Deploying to gh-pages from @ 31ce316 🚀

bluerobotics · Apr 25, 2024 · e48d81f · e48d81f
1 parent b1c0ca3
commit e48d81f
Showing 1 changed file with 31 additions and 37 deletions.
diff --git a/index.html b/index.html
@@ -19,15 +19,15 @@
 <link rel="manifest" href="./manifest.webmanifest"><script id="vite-plugin-pwa:register-sw" src="./registerSW.js"></script></head>
 
 <body>
-    <div id="browser-overlay">
-        <div id="browser-overlay-message">
+    <div id="non-app-main">
+        <div id="browser-overlay">
             <p>Please use Google Chrome or Microsoft Edge for the best experience on our website.</p>
             <button id="proceed-browser-overlay">Proceed Anyway</button>
         </div>
-    </div>
-    <div id="underlying-fallback">
-        <p>It looks like something went wrong while loading Cockpit. Resetting the settings can solve the problem.</p>
-        <button id="clear-settings-btn">Reset Cockpit settings</button>
+        <div id="underlying-fallback">
+            <p>It looks like something went wrong while loading Cockpit. Resetting the settings can solve the problem.</p>
+            <button id="clear-settings-btn">Reset Cockpit settings</button>
+        </div>
     </div>
     <div id="app"></div>
 
@@ -45,68 +45,62 @@
             if (!isChrome && !isEdge) {
                 overlay.style.display = 'flex'
                 content.style.display = 'none'
+            } else {
+                underlyingFallback.style.display = 'flex';
             }
 
             proceedButton.addEventListener('click', function() {
                 overlay.style.display = 'none';
                 content.style.display = 'block';
+                underlyingFallback.style.display = 'flex';
             });
 
             clearSettingsButton.addEventListener('click', function() {
                 localStorage.clear();
                 location.reload();
             });
-
-            setTimeout(() => {
-                underlyingFallback.style.display = 'flex';
-            }, 1500);
         })
     </script>
 
     <style>
-        #browser-overlay {
-            display: none;
-            position: fixed;
+        #non-app-main {
+            color: #fff;
+            background: rgba(0,0,0,0.8);
+            display: flex;
+            position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: rgba(0,0,0,0.8);
             justify-content: center;
             align-items: center;
-        }
-
-        #browser-overlay-message {
-            color: #fff;
+            flex-direction: column;
             font-size: 20px;
             text-align: center;
         }
 
-        #browser-overlay-message button {
-            background-color: #525252;
-            border: none;
-            color: white;
-            padding: 5px 8px;
-            text-align: center;
-            text-decoration: none;
-            display: inline-block;
-            font-size: 16px;
-            margin: 4px 2px;
-            transition-duration: 0.4s;
-            cursor: pointer;
+        #browser-overlay {
+            display: none;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            border: #fff solid 1px;
+            border-radius: 5px;
+            margin: 1.5rem;
+            padding: 1.5rem;
         }
+
         #underlying-fallback {
             display: none;
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
             justify-content: center;
             align-items: center;
             flex-direction: column;
+            border: #fff solid 1px;
+            border-radius: 5px;
+            margin: 1.5rem;
+            padding: 1.5rem;
         }
-        #clear-settings-btn {
+        #non-app-main button {
             background-color: #0486aa;
             border: none;
             color: white;
@@ -115,7 +109,7 @@
             text-decoration: none;
             display: inline-block;
             font-size: 16px;
-            margin: 2rem;
+            margin-top: 1.5rem;
             cursor: pointer;
             border-radius: 5px;
         }