Added WebGL check and message for unsupported Android devices

src/components/CheckWebGLSupport.astro

@@ -0,0 +1,56 @@
+
+<!-- A warning message box to inform the user that their browser does not support WebGL 2.0 -->
+<dialog class="warning-message-box">
+    Sorry, this website will not work on this device.
+    This device is missing a required WebGL extension.
+    This is a known <a href="https://github.com/openlayers/openlayers/issues/15581">issue</a> with some Android devices.
+
+    <br/><br/>
+    Please visit from another device.<br/>
+    <button autofocus>Close</button>
+</dialog>
+
+
+
+<script>
+
+// Javascript function to create a canvas, get a WebGL context, and check for the "OES_texture_float" extension
+function WebGL_Has_OES_texture_float() {
+    const canvas = document.createElement('canvas');
+    const gl = canvas.getContext('webgl', { antialias: false });
+    if (!gl) return false;
+    try {
+        return gl.getExtension('OES_texture_float')!=null;
+    } catch (e) {
+        return false;
+    }
+}
+
+// On document load, check if WebGL 2.0 is supported
+document.addEventListener('DOMContentLoaded', () => {
+    if (!WebGL_Has_OES_texture_float()) {
+        const el = document.querySelector('.warning-message-box') as HTMLDialogElement;
+        if (el) el.showModal();
+    }
+});
+</script>
+
+
+<style>
+.warning-message-box {
+    padding: 10px;
+    border-radius: 10px;
+    z-index: 1000;
+    text-align: center;
+    button {
+        margin-top: 1rem;
+    }
+    max-width: min(500px, 95vw);
+    border: 1px solid black;
+    &::backdrop {
+        backdrop-filter: blur(3px);
+        background-color: rgba(255, 255, 255, 0.5);
+    }
+
+}
+</style>

src/pages/index.astro

@@ -8,6 +8,7 @@ import Toaster from "../components/Toaster.astro";
 import ChoosePalette from "../components/ChoosePalette.astro";
 import COGURL from "../components/COGURL.astro";
 import Matomo from "../components/Matomo.astro";
+import CheckWebGLSupport from "../components/CheckWebGLSupport.astro";
 export const prerender = true;
 
 import "../style.css";
@@ -34,6 +35,8 @@ import "../style.css";
 
     <Logos />
 
+    <CheckWebGLSupport />
+
     <LowerRightCornerUI />
 
     <COGURL />