Adds warning banner to macOS safari and all iOS browsers (#25)

* v1 * Update message * Remove chromeios from checklist
thistletech · Sep 4, 2024 · 53aaf2c · 53aaf2c
1 parent 1861e39
commit 53aaf2c
Showing 1 changed file with 40 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -113,6 +113,21 @@
       .xterm-viewport {
         border-radius: 10px;
       }
+       .top-banner {
+          padding: 5px;
+          font-size: .9rem;
+          background-color: #eee;
+          align-items: center;
+          justify-content: center;
+          flex-direction: row;
+          width: 100%;
+        }
+        .hidden {
+          display: none;
+        }
+        .visible {
+           display: flex;
+        }
       @media only screen and (max-width: 1200px) {
         .hero-container {
           flex-direction: column;
@@ -180,6 +195,7 @@
     />
   </head>
   <body>
+    <div id="topBanner" class="top-banner hidden">Thistle Terminal Emulator currently does not work on Safari for macOS or any iOS browser.</div>
     <div class="header">
       <div class="container">
         <div class="header-contents">
@@ -287,5 +303,29 @@ <h3>Get OTA update with Thistle Update Client (TUC)</h3>
         3
       );
     </script>
+    <script>
+     function isSafariOrOnIPhone() {
+        const userAgent = navigator.userAgent.toLowerCase();
+        const vendor = navigator.vendor.toLowerCase();
+
+        const isSafari = (
+          vendor.includes("apple") &&
+          !userAgent.includes("chrome") &&
+          !userAgent.includes("chromium") &&
+          !userAgent.includes("firefox") &&
+          !userAgent.includes("opera") &&
+          !userAgent.includes("edg") &&
+          !userAgent.includes("brave")
+        );
+
+        // Check if the user is on an iPhone
+        const isIPhone = userAgent.includes("iphone");
+
+        return isSafari || isIPhone;
+      }
+      const showBanner = isSafariOrOnIPhone();
+      const topBanner = document.getElementById("topBanner");
+      if(showBanner) topBanner.classList.add("visible");
+    </script>
   </body>
 </html>