feat: add mobile detection with friendly unsupported message
All checks were successful
check / check (push) Successful in 28s
All checks were successful
check / check (push) Successful in 28s
Detect mobile viewport (innerWidth < 768) at init and show a centered 'Not yet available on mobile.' box instead of starting the full monitor. No polling, no host rows, no sparklines on mobile. Desktop behavior is completely unchanged. Ref #2, ref #4
This commit is contained in:
19
src/main.js
19
src/main.js
@@ -1131,6 +1131,25 @@ function handleResize(state) {
|
||||
async function init() {
|
||||
log.info("NetWatch starting");
|
||||
|
||||
// Mobile detection — show a friendly message and bail out early
|
||||
if (window.innerWidth < 768) {
|
||||
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 mt-2">Real-time network connectivity monitor</p>
|
||||
</header>
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:50vh;">
|
||||
<div style="background:#1f2937;border:1px solid #374151;border-radius:12px;padding:2rem 1.5rem;text-align:center;max-width:90vw;">
|
||||
<p style="font-size:1.25rem;color:#e5e7eb;margin:0;">Not yet available on mobile.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
log.info("Mobile viewport detected — skipping monitor startup");
|
||||
return;
|
||||
}
|
||||
|
||||
// Probe common gateway IPs to find the local router
|
||||
const gateway = await detectGateway();
|
||||
const localHosts = [LOCAL_CPE];
|
||||
|
||||
Reference in New Issue
Block a user