From 5ed673baccea107ea395484036bbb76caf62f706 Mon Sep 17 00:00:00 2001 From: Nate Emmert Date: Thu, 15 Oct 2026 13:34:22 -0400 Subject: [PATCH] Install-as-app guide and iPhone safe-area support - Install banner (phones), Settings guide and dialog with iPhone/iPad and Android steps, native Install button where supported; steps also on the dashboard Account page - apple-touch-icon now a PNG (iOS ignores SVG icons) - Shared pwa-safe.css: dark cap behind the status bar/Dynamic Island in the installed app, inset-aware offline banner, pull-to-refresh, bottom bars, full-screen map, dialogs - Landscape-aware content gutters; measured top-bar height; viewport-fit=cover on every page Co-Authored-By: Claude Sonnet 5.5 --- app/public/app-ui.css | 49 ++++++++++++--- app/public/app-ui.js | 99 ++++++++++++++++++++++++++++++ app/public/dashboard-account.html | 16 +++++ app/public/dashboard-login.html | 1 + app/public/dashboard-recover.html | 6 +- app/public/dashboard-settings.html | 7 ++- app/public/dashboard-setup.html | 6 +- app/public/dashboard.html | 1 + app/public/index.html | 19 +++++- app/public/pwa-safe.css | 30 +++++++++ app/public/sw.js | 3 +- 11 files changed, 223 insertions(+), 14 deletions(-) create mode 100644 app/public/pwa-safe.css diff --git a/app/public/app-ui.css b/app/public/app-ui.css index f1e4b19..d999ac8 100644 --- a/app/public/app-ui.css +++ b/app/public/app-ui.css @@ -2,7 +2,8 @@ :root { --sky-text: #ffffff; --blue-grad: linear-gradient(160deg, #2563eb 0%, #3b82f6 55%, #93c5fd 100%); - --topbar-h: 58px; + --topbar-h: calc(58px + env(safe-area-inset-top, 0px)); + --gutter: 1rem; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } /* on (the viewport): putting this on can block wheel scrolling when body is a scroll container */ @@ -10,20 +11,20 @@ html { overscroll-behavior-y: none; } button, a, summary { touch-action: manipulation; } /* ── Layout ── */ -.app { max-width: 980px; padding: 0 1rem 4rem; } -@media (min-width: 900px) { .app { padding: 0 1.5rem 4rem; } } +.app { max-width: 980px; padding: 0 var(--gutter) 4rem; } +@media (min-width: 900px) { :root { --gutter: 1.5rem; } } /* ── Slim top bar ── */ .topbar { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; gap: 0.75rem; - margin: 0 -1rem 1rem; padding: calc(0.55rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) 0.55rem calc(1rem + env(safe-area-inset-left, 0px)); + margin: 0 calc(-1 * var(--gutter)) 1rem; padding: calc(0.55rem + env(safe-area-inset-top, 0px)) calc(var(--gutter) + env(safe-area-inset-right, 0px)) 0.55rem calc(var(--gutter) + env(safe-area-inset-left, 0px)); min-height: var(--topbar-h); background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } -@media (min-width: 900px) { .topbar { margin: 0 -1.5rem 1.25rem; padding-left: 1.5rem; padding-right: 1.5rem; } } +@media (min-width: 900px) { .topbar { margin-bottom: 1.25rem; } } .brand { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; color: var(--ink); font-weight: 800; letter-spacing: -0.01em; font-size: 1.05rem; flex-shrink: 0; } .brand-mark { color: var(--accent); font-size: 1.3rem; line-height: 1; } .topbar .tabs { border: none; border-radius: 999px; background: var(--paper-dark); padding: 3px; gap: 2px; margin: 0 auto; overflow: visible; } @@ -47,8 +48,9 @@ button, a, summary { touch-action: manipulation; } .icon-btn:hover { color: var(--accent); border-color: var(--accent); } .icon-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; } @media (max-width: 640px) { - .app { padding: 0 0.9rem max(5.5rem, calc(5rem + env(safe-area-inset-bottom, 0px))); } - .topbar { margin: 0 -0.9rem 0.8rem; } + :root { --gutter: 0.9rem; } + .app { padding: 0 calc(var(--gutter) + env(safe-area-inset-right, 0px)) max(5.5rem, calc(5rem + env(safe-area-inset-bottom, 0px))) calc(var(--gutter) + env(safe-area-inset-left, 0px)); } + .topbar { margin: 0 calc(-1 * (var(--gutter) + env(safe-area-inset-right, 0px))) 0.8rem calc(-1 * (var(--gutter) + env(safe-area-inset-left, 0px))); } .brand-name { display: none; } .topbar .tabs { display: none; } .loc-chip { flex: 1; max-width: none; justify-content: flex-start; } @@ -130,7 +132,7 @@ button, a, summary { touch-action: manipulation; } .bring-row .rec-label { font-size: 0.78rem; font-weight: 600; white-space: nowrap; } /* ── Sticky section headings (iPhone friendly) ── */ -.sticky-head { position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) - 6px); z-index: 20; padding: 0.45rem 0.15rem; margin: 0 0 0.5rem; +.sticky-head { position: sticky; top: calc(var(--topbar-h) - 6px); z-index: 20; padding: 0.45rem 0.15rem; margin: 0 0 0.5rem; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .section-label { font-size: 0.78rem; letter-spacing: 0.12em; } .link-btn { min-height: 36px; font-style: normal; color: var(--accent); } @@ -208,3 +210,34 @@ body:not([data-tab="conditions"]) #loading { display: none; } .hilo-arrow { display: inline; font-size: 0.8em; opacity: .85; margin-right: 1px; } .hilo-label { flex-basis: 100%; font-size: 0.62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; margin-top: 2px; } @media (max-width: 640px) { .hero-hilo { flex-direction: column; gap: 0.35rem; } .hilo-divider { width: 70%; height: 1px; } } + +/* ── Install guide ── */ +.install-banner { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.9rem; padding: 0.65rem 0.8rem; border-radius: 16px; + background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--card-bg)), var(--card-bg)); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); } +.install-banner.hidden { display: none; } +.ib-ico { font-size: 1.6rem; } +.ib-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.85rem; line-height: 1.25; } +.ib-text span { font-size: 0.74rem; color: var(--ink-light); } +.ib-btn { font: inherit; font-weight: 700; font-size: 0.82rem; min-height: 40px; padding: 0 1rem; border-radius: 999px; border: none; background: var(--accent); color: #fff; cursor: pointer; } +.ib-x { font: inherit; width: 36px; height: 36px; border: none; background: transparent; color: var(--ink-light); font-size: 1rem; cursor: pointer; border-radius: 50%; } +.install-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 1.4rem; } +.ins-lead { font-size: 0.88rem; margin-bottom: 0.8rem; color: var(--ink-mid); } +.ins-done { font-weight: 700; color: #22c55e; margin-bottom: 0.4rem; } +.ins-tabs { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--paper-darker); margin-bottom: 0.8rem; } +.ins-tab { font: inherit; font-size: 0.8rem; font-weight: 700; min-height: 36px; padding: 0 0.9rem; border: none; border-radius: 999px; background: transparent; color: var(--ink-light); cursor: pointer; } +.ins-tab.on { background: var(--accent); color: #fff; } +.ins-steps { margin: 0 0 0.6rem 1.2rem; display: grid; gap: 0.55rem; font-size: 0.9rem; line-height: 1.4; } +.ins-steps li::marker { font-weight: 800; color: var(--accent); } +.ins-ico { vertical-align: -5px; margin: 0 2px; color: var(--accent); } +.ins-note { font-size: 0.78rem; color: var(--ink-light); line-height: 1.5; margin-top: 0.5rem; } +.ins-install { font: inherit; font-weight: 700; min-height: 44px; padding: 0 1.4rem; margin-bottom: 0.8rem; border: none; border-radius: 999px; background: var(--accent); color: #fff; cursor: pointer; } +.install-dialog { border: 1px solid var(--border); border-radius: 20px; background: var(--paper-dark); color: var(--ink); padding: 1.1rem 1.2rem 1.3rem; width: min(440px, 92vw); margin: auto; } +.install-dialog::backdrop { background: rgba(0,0,0,.6); } +.install-dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.7rem; } +.install-dialog-head h2 { font-size: 1.1rem; } +.install-dialog-head button { font: inherit; width: 36px; height: 36px; border: none; background: transparent; color: var(--ink-light); font-size: 1rem; cursor: pointer; border-radius: 50%; } + +/* Landscape phones: side insets for the content column (the top bar already adds its own) */ +.app { padding-left: calc(var(--gutter) + env(safe-area-inset-left, 0px)); padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px)); } +.topbar { margin-left: calc(-1 * (var(--gutter) + env(safe-area-inset-left, 0px))); margin-right: calc(-1 * (var(--gutter) + env(safe-area-inset-right, 0px))); } +.install-dialog { margin-top: max(1rem, env(safe-area-inset-top, 0px)); } diff --git a/app/public/app-ui.js b/app/public/app-ui.js index 336f826..f0132f2 100644 --- a/app/public/app-ui.js +++ b/app/public/app-ui.js @@ -23,6 +23,12 @@ if (typeof baseActivate === 'function') { }; } +// Keep sticky section headings flush under the (safe-area aware) top bar +const topbarEl = document.querySelector('.topbar'); +if (topbarEl && 'ResizeObserver' in window) { + new ResizeObserver(() => document.documentElement.style.setProperty('--topbar-h', topbarEl.offsetHeight + 'px')).observe(topbarEl); +} + // ── Top bar: location chip opens search ────────────────────────────────────── $('tb-search')?.addEventListener('click', () => { window.activateTab('settings'); @@ -398,6 +404,99 @@ window.AppUI = { onStation() { syncTopbarLocation(); renderStationContext(); }, }; + +// ── Install as an app (PWA): guidance for iPhone/iPad and Android ──────────── +const Install = (() => { + const ua = navigator.userAgent || ''; + const isIOS = /iPad|iPhone|iPod/.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1); + const isAndroid = /Android/i.test(ua); + const standalone = () => window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true; + let deferred = null; // Chrome/Edge/Samsung install prompt + window.addEventListener('beforeinstallprompt', (e) => { e.preventDefault(); deferred = e; refresh(); }); + window.addEventListener('appinstalled', () => { deferred = null; localStorage.setItem('installDone', '1'); refresh(); }); + + const SHARE = ''; + const DOTS = ''; + + const steps = { + ios: `
    +
  1. Open this page in Safari. (On iOS 16.4+ Chrome and Edge can do it too.)
    2. +
  2. Tap the Share button ${SHARE} at the bottom of the screen (top right on iPad).
    3. +
  3. Scroll down and tap Add to Home Screen.
    4. +
  4. Tap Add. The app icon appears on your Home Screen.
    5. +
+

Open it from the Home Screen icon for the full-screen app. iPhone has no automatic install pop-up, so this manual step is the only way.

`, + android: `
    +
  1. Open this page in Chrome.
    2. +
  2. Tap the menu ${DOTS} (top right).
    3. +
  3. Tap Install app (or Add to Home screen).
    4. +
  4. Tap Install. The app shows up in your app drawer and on your Home screen.
    5. +
+

Samsung Internet: menu (☰) → Add page to → Home screen. Firefox: menu → Install.

`, + }; + const other = '

Desktop Chrome/Edge: click the install icon in the address bar (or menu → Install NeCloud Weather).

'; + const dashNote = '

The Station Dashboard installs separately: open /dashboard and follow the same steps to get its own icon.

'; + + function platform() { return isIOS ? 'ios' : isAndroid ? 'android' : null; } + + function body(active) { + const p = active || platform() || 'ios'; + const tabs = `
+ +
`; + const promptBtn = deferred && p === 'android' ? '' : ''; + return `${tabs}
${promptBtn}${steps[p]}${!platform() ? other : ''}${dashNote}
`; + } + + function wire(root) { + root.querySelectorAll('.ins-tab').forEach((b) => b.addEventListener('click', () => { root.innerHTML = body(b.dataset.p); wire(root); })); + root.querySelector('#ins-native')?.addEventListener('click', async () => { + if (!deferred) return; + deferred.prompt(); try { await deferred.userChoice; } catch {} deferred = null; refresh(); + }); + } + + function renderCard() { + const card = $('install-card'); + if (!card) return; + if (standalone()) { + card.innerHTML = '

✓ You\'re using the installed app.

' + dashNote; + return; + } + card.innerHTML = `

Add NeCloud Weather to your phone like a normal app: full screen, its own icon, and it opens instantly.

${body()}
`; + wire(card.querySelector('.ins-wrap')); + } + + // Banner: phones only, not installed, not dismissed within 30 days + function renderBanner() { + const el = $('install-banner'); + if (!el) return; + let dismissed = 0; try { dismissed = +localStorage.getItem('installDismissed') || 0; } catch {} + const show = !standalone() && (isIOS || isAndroid) && Date.now() - dismissed > 30 * 86400000 && !localStorage.getItem('installDone'); + el.classList.toggle('hidden', !show); + $('ib-how').textContent = deferred ? 'Install' : 'How'; + } + + function openDialog() { + const dlg = $('install-dialog'), b = $('install-dialog-body'); + if (!dlg || !b) return; + b.innerHTML = body(); wire(b); + if (typeof dlg.showModal === 'function') dlg.showModal(); else dlg.setAttribute('open', ''); + } + + function refresh() { renderBanner(); renderCard(); } + + $('ib-how')?.addEventListener('click', async () => { + if (deferred) { deferred.prompt(); try { await deferred.userChoice; } catch {} deferred = null; refresh(); } + else openDialog(); + }); + $('ib-close')?.addEventListener('click', () => { try { localStorage.setItem('installDismissed', String(Date.now())); } catch {} $('install-banner').classList.add('hidden'); }); + $('install-dialog-close')?.addEventListener('click', () => $('install-dialog').close()); + $('install-dialog')?.addEventListener('click', (e) => { if (e.target === e.currentTarget) e.currentTarget.close(); }); + refresh(); + return { refresh, openDialog }; +})(); + syncTopbarLocation(); new MutationObserver(syncTopbarLocation).observe($('loc-name') || document.body, { childList: true, characterData: true, subtree: true }); })(); diff --git a/app/public/dashboard-account.html b/app/public/dashboard-account.html index 39f819d..af4d6f2 100644 --- a/app/public/dashboard-account.html +++ b/app/public/dashboard-account.html @@ -5,6 +5,9 @@ + + + Account diff --git a/app/public/dashboard-settings.html b/app/public/dashboard-settings.html index 592721b..a7d0b98 100644 --- a/app/public/dashboard-settings.html +++ b/app/public/dashboard-settings.html @@ -2,7 +2,10 @@ - + + + + Station Settings diff --git a/app/public/dashboard.html b/app/public/dashboard.html index 80b75d8..03dfa4e 100644 --- a/app/public/dashboard.html +++ b/app/public/dashboard.html @@ -11,6 +11,7 @@ + Station Dashboard diff --git a/app/public/index.html b/app/public/index.html index d237a23..504890f 100644 --- a/app/public/index.html +++ b/app/public/index.html @@ -3,9 +3,10 @@ + NeCloud Weather - + @@ -41,6 +42,14 @@ + + +