From 66712f70944e3007d6c509487b12c736990f94e6 Mon Sep 17 00:00:00 2001
From: Mathias Malmqvist <mathias.malmqvist@gmail.com>
Date: Wed, 29 Oct 2025 01:09:05 +0100
Subject: [PATCH] Improve the unsupported browser warning and clarofy that this
 utility cannot fix drift

---
 index.html | 38 ++++++++++++++++++++++++++++++++++++--
 js/core.js |  3 +++
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 22e3824..3aa91b0 100644
--- a/index.html
+++ b/index.html
@@ -74,8 +74,23 @@
 
   <div class="container p-2">
 
-    <div id="missinghid" style="display: none;">
-      <p class="ds-i18n">Unsupported browser. Please use a web browser with WebHID support (e.g. Chrome).</p>
+    <!-- Unsupported Browser Warning -->
+    <div id="missinghid" style="bottom: 80px; left: 0; right: 0; z-index: 1030; padding: 12px 20px; display: none;">
+      <div class="container">
+        <div style="border: 2px solid #0d6efd; border-radius: 8px; color: #0d6efd; padding: 12px; background-color: white;">
+          <p class="mb-1">
+            <i class="fas fa-hand"></i>&nbsp;&nbsp;
+            <span class="ds-i18n">Unsupported browser.</span>
+          </p>
+          <p class="mb-1">
+            <span class="ds-i18n">Please use a web browser with WebHID support (e.g. Google Chrome or Microsoft Edge) on a PC or Mac.</span>
+            <span class="ds-i18n">Firefox is supported with the WebHID extension installed.</span>
+          </p>
+          <p class="mb-0">
+            <span class="ds-i18n">Using this utility on a phone or tablet is not supported.</span>
+          </p>
+        </div>
+      </div>
     </div>
 
     <div id="offlinebar" class="vstack p-2" style="display: none;">
@@ -314,6 +329,25 @@
     </div>
   </div>
 
+  <!-- About drift and this utility -->
+  <div id="aboutdrift" style="position: fixed; bottom: 80px; left: 0; right: 0; z-index: 1030; padding: 12px 20px; display: none;">
+    <div class="container">
+      <div style="border: 2px solid #0d6efd; border-radius: 8px; color: #0d6efd; padding: 12px; background-color: white;">
+        <p class="mb-2">
+          <i class="fas fa-hand-point-up"></i>&nbsp;&nbsp;
+          <span class="ds-i18n">This utility cannot fix stick drift.</span>
+        </p>
+        <p class="mb-2">
+          <span class="ds-i18n">Drift is caused by mechanical parts in the joystick being worn out, and they need to be replaced to fix the drift.</span>
+          <span class="ds-i18n">After they have been replaced, this utility can be used to calibrate the controller to work with the new joysticks.</span></p>
+        <p class="mb-0">
+          <i class="fas fa-regular fa-triangle-exclamation"></i>&nbsp;&nbsp;
+          <span class="ds-i18n">Calibrating without replacing the joysticks may help temporarily, but it may also make the problem worse, with no way to undo it.</span>
+        </p>
+      </div>
+    </div>
+  </div>
+
   <!-- Fixed Footer -->
   <footer class="fixed-bottom bg-body-tertiary border-top">
     <div class="container">
diff --git a/js/core.js b/js/core.js
index 3e77baa..a7d53da 100644
--- a/js/core.js
+++ b/js/core.js
@@ -132,6 +132,7 @@ function gboot() {
   }
 
   $("#offlinebar").show();
+  $("#aboutdrift").show();
   navigator.hid.addEventListener("disconnect", handleDisconnectedDevice);
 }
 
@@ -260,6 +261,7 @@ async function continue_connection({data, device}) {
     $("#onlinebar").show();
     $("#mainmenu").show();
     $("#resetBtn").show();
+    $("#aboutdrift").hide();
 
     $("#d-nvstatus").text = l("Unknown");
     $("#d-bdaddr").text = l("Unknown");
@@ -345,6 +347,7 @@ async function disconnect() {
   $("#offlinebar").show();
   $("#onlinebar").hide();
   $("#mainmenu").hide();
+  $("#aboutdrift").show();
 }
 
 // Wrapper function for HTML onclick handlers