2 files changed, 29 insertions, 14 deletions
diff --git a/index.html b/index.html
index eb9a563..b2a6736 100644
--- a/index.html
+++ b/index.html
@@ -4,17 +4,23 @@
         <script defer src="main.mjs"></script>
     </head>
     <body>
-        <h1>Setup AIRMX Pro</h1>
-        <div>
-            <input type="text" id="ssid" placeholder="SSID" />
-        </div>
-        <div>
-            <input type="password" id="password" placeholder="Password" />
-        </div>
-        <div>
-            <button id="connect" type="button">
-                Connect
-            </button>
-        </div>
+        <p id="unsupported-message" style="display: none;">
+            Your browser does not support the Web Bluetooth API. Please switch to Google Chrome and try again.
+        </p>
+
+        <main>
+            <h1>Setup AIRMX Pro</h1>
+            <div>
+                <input type="text" id="ssid" placeholder="SSID" />
+            </div>
+            <div>
+                <input type="password" id="password" placeholder="Password" />
+            </div>
+            <div>
+                <button id="connect" type="button" onclick="connect()">
+                    Connect
+                </button>
+            </div>
+        </main>
     </body>
 </html>
diff --git a/main.mjs b/main.mjs
index 618efa0..31d4056 100644
--- a/main.mjs
+++ b/main.mjs
@@ -216,5 +216,14 @@ function handleDeviceResponse(event) {
     console.log(`Received data from device: ${receivedBytes.join(' ')}`)
 }
 
-const button = document.getElementById('connect')
-button.addEventListener('click', connect)
+function supportBluetoothApi() {
+    return 'bluetooth' in navigator
+}
+
+if (! supportBluetoothApi()) {
+    const unsupportedMessage = document.getElementById('unsupported-message')
+    unsupportedMessage.style.display = 'block'
+
+    const main = document.querySelector('main')
+    main.style.display = 'none'
+}