From 38bbd13c7fe55026ed85173ad69cca92d21481a7 Mon Sep 17 00:00:00 2001
From: user <user@Mac.lan guest wan>
Date: Fri, 27 Feb 2026 02:00:01 -0800
Subject: [PATCH] fix: show 'not available on mobile' message instead of broken
 layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Detect mobile devices via user agent and viewport width (<=768px).
On mobile, skip all checker initialization and render only the
header, description, and a styled 'Not yet available on mobile' box.

Desktop behavior is completely unchanged — the mobile check returns
early before any existing code runs.
---
 src/main.js | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/main.js b/src/main.js
index 3ab6bb8..b99a827 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1128,9 +1128,42 @@ function handleResize(state) {
 
 // --- Bootstrap ---------------------------------------------------------------
 
+// --- Mobile Detection --------------------------------------------------------
+
+function isMobile() {
+    // Check both user agent and viewport width for robust detection
+    const uaMatch =
+        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+            navigator.userAgent,
+        );
+    const narrowViewport = window.innerWidth <= 768;
+    return uaMatch || narrowViewport;
+}
+
+function buildMobileUI() {
+    const app = document.getElementById("app");
+    app.innerHTML = `
+    <div class="mx-auto px-[5%] py-8">
+      <header class="mb-8">
+        <h1 class="text-3xl font-bold text-white"><a href="https://git.eeqj.de/sneak/netwatch" target="_blank" rel="noopener" class="underline decoration-dashed decoration-gray-500 underline-offset-4">NetWatch</a> by <a href="https://sneak.berlin" target="_blank" rel="noopener" class="text-blue-400 underline hover:text-blue-300">@sneak</a></h1>
+        <p class="text-gray-400 text-sm mt-2">Real-time network latency monitor</p>
+      </header>
+      <div style="margin: 2rem auto; max-width: 500px; padding: 3rem 2rem; background: rgba(31, 41, 55, 0.7); border: 1px solid rgba(75, 85, 99, 0.5); border-radius: 1rem; text-align: center;">
+        <p style="font-size: 1.5rem; font-weight: 600; color: #d1d5db;">Not yet available on mobile.</p>
+        <p style="font-size: 0.875rem; color: #6b7280; margin-top: 1rem;">Please visit on a desktop browser for the full experience.</p>
+      </div>
+    </div>`;
+}
+
 async function init() {
     log.info("NetWatch starting");
 
+    if (isMobile()) {
+        log.info("Mobile device detected — showing placeholder");
+        buildMobileUI();
+        return;
+    }
+
     // Probe common gateway IPs to find the local router
     const gateway = await detectGateway();
     const localHosts = [LOCAL_CPE];
-- 
2.49.1