From b1471cedb5a278f6910b1851b18e41ecced85103 Mon Sep 17 00:00:00 2001
From: Nico Verbruggen <mail@nicoverbruggen.be>
Date: Mon, 23 Mar 2026 22:58:52 +0100
Subject: [PATCH] Modal on mobile devices

---
 tests/e2e/screenshots.mjs | 23 ++++++++++++++++++++++-
 web/src/css/style.css     | 31 +++++++++++++++++++++++++++++++
 web/src/index.html        | 23 +++++++++++++++++++----
 web/src/js/app.js         |  9 +++++++++
 4 files changed, 81 insertions(+), 5 deletions(-)

diff --git a/tests/e2e/screenshots.mjs b/tests/e2e/screenshots.mjs
index d8b1113..9d24707 100644
--- a/tests/e2e/screenshots.mjs
+++ b/tests/e2e/screenshots.mjs
@@ -14,9 +14,26 @@ const shot = async (page, name, testInfo) => {
   await page.screenshot({ path: `screenshots/${project}/${name}.png`, fullPage: true });
 };
 
+/** Dismiss the mobile warning modal if it's open. */
+const dismissMobileModal = async (page) => {
+  const dialog = page.locator('#mobile-dialog');
+  if (await dialog.evaluate(el => el.open).catch(() => false)) {
+    await page.click('#btn-mobile-continue');
+    await expect(dialog).not.toBeVisible();
+  }
+};
+
 test('capture all steps', async ({ page }, testInfo) => {
-  // 1. Connect step
+  const isMobile = testInfo.project.name === 'mobile';
+
+  // 1. Connect step (with mobile modal if applicable)
   await page.goto('/');
+  if (isMobile) {
+    // Capture the mobile warning modal
+    await expect(page.locator('#mobile-dialog')).toBeVisible();
+    await page.screenshot({ path: `screenshots/mobile/00-mobile-warning.png` });
+    await page.click('#btn-mobile-continue');
+  }
   await expect(page.locator('#step-connect')).not.toBeHidden();
   await injectMockDevice(page);
   await shot(page, '01-connect', testInfo);
@@ -78,6 +95,7 @@ test('capture all steps', async ({ page }, testInfo) => {
 
 test('incompatible firmware', async ({ page }, testInfo) => {
   await page.goto('/');
+  await dismissMobileModal(page);
   await injectMockDevice(page, { firmware: '5.0.0' });
   await page.click('#btn-connect');
   await page.click('#btn-connect-ready');
@@ -87,6 +105,7 @@ test('incompatible firmware', async ({ page }, testInfo) => {
 
 test('unknown model', async ({ page }, testInfo) => {
   await page.goto('/');
+  await dismissMobileModal(page);
   await injectMockDevice(page, { serial: 'X9990A0000000' });
   await page.click('#btn-connect');
   await page.click('#btn-connect-ready');
@@ -97,12 +116,14 @@ test('unknown model', async ({ page }, testInfo) => {
 test('unsupported browser', async ({ page }, testInfo) => {
   await page.addInitScript(() => { delete window.showDirectoryPicker; });
   await page.goto('/');
+  await dismissMobileModal(page);
   await expect(page.locator('#connect-unsupported-hint')).toBeVisible();
   await shot(page, '13-connect-unsupported', testInfo);
 });
 
 test('disclaimer dialog', async ({ page }, testInfo) => {
   await page.goto('/');
+  await dismissMobileModal(page);
   await page.click('#btn-how-it-works');
   await expect(page.locator('#how-it-works-dialog')).toBeVisible();
   await page.waitForTimeout(200);
diff --git a/web/src/css/style.css b/web/src/css/style.css
index 9a831fa..e5462ac 100644
--- a/web/src/css/style.css
+++ b/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;
diff --git a/web/src/index.html b/web/src/index.html
index e13e01a..6987bb9 100644
--- a/web/src/index.html
+++ b/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>
diff --git a/web/src/js/app.js b/web/src/js/app.js
index 6bbdafa..15a51ae 100644
--- a/web/src/js/app.js
+++ b/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);