Modal on mobile devices

web/src/css/style.css

@@ -606,6 +606,30 @@ button.btn-success:hover {
 }
 
 /* Status banners */
+.notice {
+    background: #e8f7fa;
+    border: 1px solid #b2e4ed;
+    color: #0b6e80;
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    margin-bottom: 1.5rem;
+    font-size: 0.88rem;
+    line-height: 1.5;
+}
+
+.notice-heading {
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    margin-bottom: 0.3rem;
+}
+
+.notice a {
+    color: #0b6e80;
+    text-decoration: underline;
+}
+
 .warning {
     background: var(--warning-bg);
     border: 1px solid var(--warning-border);
@@ -1216,6 +1240,13 @@ button:focus-visible {
     margin-bottom: 0.5rem;
 }
 
+.modal-footer {
+    padding: 1rem 1.25rem;
+    border-top: 1px solid var(--border-light);
+    display: flex;
+    justify-content: flex-end;
+}
+
 .modal-body a {
     color: var(--primary);
     text-decoration: none;

web/src/index.html

@@ -93,9 +93,9 @@
 
         <!-- Step 1: Choose connection method -->
         <section id="step-connect" class="step" hidden>
-            <div class="warning">
-                <b>Patching modifies system files on your Kobo, and <u>will void your warranty</u>.</b> This process allows for custom modifications to be applied, or undone. If something has gone wrong,
-                you may need to <a href="https://help.kobo.com/hc/en-us/articles/360017605314-Manual-reset-your-Kobo-Clara-HD-Kobo-Nia-Kobo-Elipsa-Kobo-Clara-2E-Kobo-Elipsa-2E" target="_blank">manually reset your device</a>.
+            <div class="notice">
+                <div class="notice-heading">Important information</div>
+                If you choose to modify your Kobo's system files via this tool, your warranty may be affected. A backup of any extra books is recommended. If something goes wrong, follow the official instructions on <a href="https://help.kobo.com/hc/en-us/articles/360017605314-Manual-reset-your-Kobo-Clara-HD-Kobo-Nia-Kobo-Elipsa-Kobo-Clara-2E-Kobo-Elipsa-2E" target="_blank">how to manually reset your device</a>.
             </div>
             <p>How would you like to set up your Kobo?</p>
             <div class="mode-cards">
@@ -106,7 +106,7 @@
                             Connect my Kobo
                             <span class="recommended-pill">recommended</span>
                         </div>
-                        <div class="mode-card-desc">Connect your Kobo via USB and select its drive. You will have the option to apply these changes directly, or you can download a ZIP.</div>
+                        <div class="mode-card-desc">Connect your device via USB. Your device will be automatically identified, and this is the easiest way to apply customizations. You will have the option to apply these changes directly, or you can download a ZIP.</div>
                     </div>
                 </button>
                 <button id="btn-manual" class="mode-card mode-card-btn">
@@ -510,5 +510,20 @@
             </div>
         </div>
     </dialog>
+
+    <dialog id="mobile-dialog" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 id="mobile-dialog-title">Heads up!</h2>
+            </div>
+            <div class="modal-body">
+                <p>This tool works best on a <b>desktop or laptop computer</b>. The interface is optimized for larger screens, and connecting your Kobo via USB is more straightforward from a computer.</p>
+                <p>For the best experience, open this page on a computer using <b>Google Chrome</b>. It supports copying directly to your Kobo device.</p>
+            </div>
+            <div class="modal-footer">
+                <button id="btn-mobile-continue" class="secondary">Continue anyway</button>
+            </div>
+        </div>
+    </dialog>
 </body>
 </html>

web/src/js/app.js

@@ -216,6 +216,15 @@ state.goToModeSelection = goToModeSelection;
 const loader = $('initial-loader');
 if (loader) loader.remove();
 
+// Show a warning modal on mobile/tablet devices. Patching requires a USB connection
+// to a computer, so mobile use is inherently limited.
+const isMobileDevice = navigator.maxTouchPoints > 0 && window.innerWidth < 820;
+if (isMobileDevice) {
+    const mobileDialog = $('mobile-dialog');
+    mobileDialog.showModal();
+    $('btn-mobile-continue').addEventListener('click', () => mobileDialog.close());
+}
+
 // Detect iOS (Safari/WebKit) — the File System Access API is unavailable on iOS.
 const isAppleMobileDevice = /iPad|iPhone|iPod/.test(navigator.userAgent) ||
     (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);