diff --git a/static/calendar.html b/static/calendar.html index 8346d70..a65f9c9 100644 --- a/static/calendar.html +++ b/static/calendar.html @@ -6,6 +6,12 @@ Thermograph — 2-year calendar + + + + + @@ -112,5 +118,6 @@ + diff --git a/static/compare.html b/static/compare.html index d3f4883..5d7eb6f 100644 --- a/static/compare.html +++ b/static/compare.html @@ -6,6 +6,12 @@ Thermograph — compare comfort + + + + + @@ -172,5 +178,6 @@ + diff --git a/static/day.html b/static/day.html index 4f85bc4..4f88eab 100644 --- a/static/day.html +++ b/static/day.html @@ -6,6 +6,12 @@ Thermograph — a single day + + + + + @@ -78,5 +84,6 @@ + diff --git a/static/ios-install.js b/static/ios-install.js new file mode 100644 index 0000000..9ce5f72 --- /dev/null +++ b/static/ios-install.js @@ -0,0 +1,73 @@ +// A small, dismissible "Add to Home Screen" hint for iPhone/iPad visitors. +// +// iOS only grants Web Push to a site the user has added to the Home Screen via +// Safari's Share sheet (iOS 16.4+). There is no beforeinstallprompt on iOS, so +// the only nudge available is telling people where the control is. This module +// shows that nudge — and only when it can actually help: real iOS Safari, not +// already installed, not previously dismissed. Everything degrades to nothing. + +// Not the "tg:" prefix — cache.js sweeps that namespace on every load. The +// durable app prefer­ences ("thermograph:unit", "thermograph:loc") use this one. +const KEY = "thermograph:ios-a2hs"; + +function isIOS() { + const ua = navigator.userAgent || ""; + // iPadOS 13+ reports as "Macintosh"; a touch point count disambiguates it. + return /iphone|ipad|ipod/i.test(ua) || + (/Macintosh/.test(ua) && (navigator.maxTouchPoints || 0) > 1); +} + +function isStandalone() { + return window.navigator.standalone === true || + (window.matchMedia && window.matchMedia("(display-mode: standalone)").matches); +} + +function isSafari() { + // Add to Home Screen only works from Safari proper — not Chrome (CriOS), + // Firefox (FxiOS), Edge (EdgiOS), Opera (OPiOS), or most in-app webviews. + const ua = navigator.userAgent || ""; + if (/crios|fxios|edgios|opios/i.test(ua)) return false; + return /safari/i.test(ua); +} + +function dismissed() { + try { return localStorage.getItem(KEY) === "off"; } catch (e) { return false; } +} +function remember() { + try { localStorage.setItem(KEY, "off"); } catch (e) {} +} + +function build() { + const el = document.createElement("div"); + el.className = "ios-a2hs"; + el.setAttribute("role", "note"); + el.setAttribute("aria-label", "Install Thermograph on your Home Screen"); + // The share glyph mirrors iOS's own Share icon so the instruction is scannable. + el.innerHTML = + '' + + '
Add Thermograph to your Home Screen' + + 'Tap Share, then Add to Home Screen — it’s how to get weather alerts on iPhone.
' + + ''; + el.querySelector(".ios-a2hs-x").addEventListener("click", () => { + remember(); + el.remove(); + }); + return el; +} + +function maybeShow() { + if (!isIOS() || isStandalone() || !isSafari() || dismissed()) return; + if (document.querySelector(".ios-a2hs")) return; + document.body.appendChild(build()); +} + +// Wait a beat so the hint never competes with first paint, and only on an +// interactive document. +if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", () => setTimeout(maybeShow, 1200)); +} else { + setTimeout(maybeShow, 1200); +} diff --git a/static/legend.html b/static/legend.html index 50567c7..5216ed4 100644 --- a/static/legend.html +++ b/static/legend.html @@ -6,6 +6,12 @@ Thermograph — reading the grades + + + + + @@ -109,5 +115,6 @@ document.getElementById("temp-scale").innerHTML = SCALE_TEMP.map(row).join(""); document.getElementById("rain-scale").innerHTML = SCALE_RAIN.map(row).join(""); + diff --git a/static/style.css b/static/style.css index 7c5f5c9..7dd35ac 100644 --- a/static/style.css +++ b/static/style.css @@ -2034,3 +2034,31 @@ details.hub-country > summary:hover { color: var(--accent); } } .digest-note { margin: 0; font-size: 12px; } .digest-status { margin: 0; font-size: 14px; color: var(--accent); } + +/* iOS "Add to Home Screen" hint (frontend/ios-install.js) — a slim dismissible + card pinned above the home indicator, shown only to iOS Safari visitors who + haven't installed yet. Themed like the rest of the surface chrome. */ +.ios-a2hs { + position: fixed; z-index: 950; + left: 50%; transform: translateX(-50%); + bottom: calc(12px + env(safe-area-inset-bottom)); + width: min(440px, calc(100vw - 24px)); + display: flex; align-items: center; gap: 12px; + padding: 12px 14px; + background: var(--surface); color: var(--text); + border: 1px solid var(--border); border-radius: 14px; + box-shadow: 0 8px 30px rgba(0, 0, 0, .35); + animation: ios-a2hs-in .25s ease-out; +} +@keyframes ios-a2hs-in { from { opacity: 0; transform: translate(-50%, 12px); } } +.ios-a2hs-share { width: 26px; height: 26px; flex: 0 0 auto; color: var(--accent); } +.ios-a2hs-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.3; } +.ios-a2hs-text b { font-weight: 700; } +.ios-a2hs-text span { color: var(--muted); } +.ios-a2hs-x { + flex: 0 0 auto; margin-left: auto; + width: 32px; height: 32px; border-radius: 8px; + background: none; border: none; color: var(--muted); + font-size: 22px; line-height: 1; cursor: pointer; +} +.ios-a2hs-x:hover { color: var(--text); background: var(--surface-2); } diff --git a/static/subscriptions.html b/static/subscriptions.html index 67aba91..49da550 100644 --- a/static/subscriptions.html +++ b/static/subscriptions.html @@ -6,6 +6,12 @@ Thermograph — weather alerts + + + + + @@ -58,5 +64,6 @@ +