Web: Added warning message for unsupported browsers (close #202)

DiligentGraphics · Aug 26, 2024 · 8364891 · 8364891
1 parent b09cfe7
commit 8364891
Showing 1 changed file with 44 additions and 1 deletion.
diff --git a/SampleBase/src/Emscripten/resources/emscripten_template.html.in b/SampleBase/src/Emscripten/resources/emscripten_template.html.in
@@ -128,6 +128,7 @@
             transform: scale(0.95);
             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
         }
+
         .emscripten {
             display: none;
             position: absolute;
@@ -148,6 +149,36 @@
             image-rendering: pixelated;
             -ms-interpolation-mode: nearest-neighbor;
         }
+
+        #browser-warning {
+            display: none;
+            color: #ffffff;
+            background-color: rgba(255, 69, 0, 0.8);
+            border: 2px solid #ff4500;
+            border-radius: 10px;
+            padding: 15px 20px;
+            text-align: center;
+            margin: 20px auto;
+            width: 80%;
+            max-width: 500px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            position: relative;
+            animation: fadeIn 1s ease-in-out;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+
+        #browser-warning::before {
+            content: '⚠️';
+            font-size: 1.5em;
+            position: absolute;
+            top: 10px;
+            left: 10px;
+        }
     </style>
 </head>
 <body>
@@ -164,9 +195,19 @@
             <div class="spinner"></div>
             <div class="progress-text" id="progress-text">0%</div>
         </div>
+        <div id="browser-warning">
+            The application may not run properly on this browser. For best results, we recommend using Chrome.
+        </div>
     </div>
 
-    <script type='text/javascript'>   
+    <script type='text/javascript'>
+        function detectBrowser() {
+            var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+            if (!isChrome) {
+                document.getElementById('browser-warning').style.display = 'block';
+            }
+        }
+
         var initWebGPUDevice = (async () => {
             const requiredFeatures = [
                 "depth-clip-control",
@@ -251,6 +292,8 @@
             }
         };
 
+        detectBrowser();
+
         window.onerror = function () {
             console.log("onerror: " + event);
         };