From fd61e35b56f60e29aeb1eaa9d9957d31f0e8e79b Mon Sep 17 00:00:00 2001 From: Nate Emmert Date: Thu, 15 Oct 2026 12:56:18 -0400 Subject: [PATCH] Redesign main app: slim top bar, dynamic sky hero, nowcast, scrub chart, unified palette - One slate/blue palette across the app, dashboard, account/login pages (data colours stay orange = warm, blue = cool on the dashboard) - Slim sticky top bar with location chip, gear (settings) and ? (learn); 4-tab nav (Now, Station, Map, Alerts) with a thumb-reach bottom bar on phones - Hero sky gradient by condition/time with rain, storm, snow and star effects (respects reduced motion); keeps the searched city and badges when temps come from your station - One-line summary, 'Next 2 hours' bars and rain countdown from 15-minute precipitation, rain/cold-aware 'Bring' chips; yesterday + 'vs usual' context from the station - Scrubbable hourly chart (temp, rain chance, wind), 7-day range bars, AQI gauge, details tiles instead of drawers, taller radar with location marker + alert polygons - Skeleton loading instead of a full-screen spinner, sticky section headers, safe areas - Server: minutely_15 precipitation, public /api/station/summary Co-Authored-By: Claude Sonnet 5.5 --- app/public/app-ui.css | 209 +++++++++++++++ app/public/app-ui.js | 403 +++++++++++++++++++++++++++++ app/public/app.js | 38 +-- app/public/dashboard-account.html | 8 +- app/public/dashboard-login.html | 8 +- app/public/dashboard-recover.html | 6 +- app/public/dashboard-settings.html | 12 +- app/public/dashboard-setup.html | 6 +- app/public/dashboard-ui.css | 7 + app/public/dashboard.html | 18 +- app/public/dashboard.webmanifest | 4 +- app/public/index.html | 258 ++++++++---------- app/public/manifest.json | 4 +- app/public/style.css | 56 ++-- app/public/sw.js | 4 +- app/server.js | 26 ++ 16 files changed, 846 insertions(+), 221 deletions(-) create mode 100644 app/public/app-ui.css create mode 100644 app/public/app-ui.js diff --git a/app/public/app-ui.css b/app/public/app-ui.css new file mode 100644 index 0000000..136755c --- /dev/null +++ b/app/public/app-ui.css @@ -0,0 +1,209 @@ +/* Main app redesign layer: slim top bar, dynamic sky hero, nowcast, scrub chart, tiles, skeletons */ +:root { + --sky-text: #ffffff; + --blue-grad: linear-gradient(160deg, #2563eb 0%, #3b82f6 55%, #93c5fd 100%); + --topbar-h: 58px; +} +html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } +body { 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; } } + +/* ── 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)); + 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; } } +.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; } +.topbar .tab { border: none; border-radius: 999px; min-height: 36px; padding: 0 1rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-light); position: relative; } +.topbar .tab:hover { color: var(--ink); } +.topbar .tab.active { background: var(--accent); color: #fff; } +.topbar-actions { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; min-width: 0; } +.tabs + .topbar-actions { margin-left: 0; } +.loc-chip { + display: inline-flex; align-items: center; gap: 0.35rem; min-height: 40px; max-width: 46vw; padding: 0 0.85rem; + border: 1px solid var(--border); border-radius: 999px; background: var(--paper-dark); color: var(--ink); + font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; +} +.loc-chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.loc-chip-ico { font-size: 1.1rem; line-height: 1; color: var(--accent); } +.icon-btn { + display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; + border: 1px solid var(--border); border-radius: 50%; background: var(--paper-dark); color: var(--ink-light); + font: inherit; font-size: 1.05rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: color .15s, border-color .15s, background .15s; +} +.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; } + .brand-name { display: none; } + .topbar .tabs { display: none; } + .loc-chip { flex: 1; max-width: none; justify-content: flex-start; } + .icon-btn[href="/dashboard"] { display: none; } /* reachable from Settings */ +} + +/* ── Bottom nav (4 tabs) in the shared palette ── */ +.bottom-nav { background: color-mix(in srgb, var(--paper-dark) 94%, transparent); border-top: 1px solid var(--border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } +.bottom-tab { color: var(--ink-light); border-right: none; min-height: 58px; position: relative; } +.bottom-tab.active { color: var(--accent); background: transparent; } +.bottom-tab.active::before { content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); } +.bottom-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } + +/* ── Location header ── */ +.loc-header { background: transparent; border: none; padding: 0.1rem 0.15rem; margin-bottom: 0.6rem; } +.loc-name { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; } +.loc-sub, .loc-time { font-size: 0.78rem; color: var(--ink-light); } + +/* ── Shared card surface ── */ +.ui-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 1.4rem; } +.ui-card .section-head { margin-bottom: 0.7rem; } + +/* ── Dynamic sky hero ── */ +.hero { + position: relative; overflow: hidden; isolation: isolate; color: var(--sky-text); + background: var(--blue-grad); border: none; border-radius: 22px; padding: 1.6rem 1.3rem; margin-bottom: 0.9rem; + box-shadow: 0 10px 30px rgba(37, 99, 235, 0.18); transition: background .6s ease; + --card-sub: rgba(255,255,255,0.82); --card-ink: #fff; +} +.hero[data-sky="clear-day"] { background: linear-gradient(160deg, #1d4ed8 0%, #3b82f6 55%, #bae6fd 100%); } +.hero[data-sky="clear-night"] { background: linear-gradient(160deg, #0b1330 0%, #1e2a5a 60%, #3b2f6b 100%); box-shadow: 0 10px 30px rgba(11,19,48,.5); } +.hero[data-sky="cloudy-day"] { background: linear-gradient(160deg, #475569 0%, #64748b 55%, #94a3b8 100%); box-shadow: 0 10px 30px rgba(71,85,105,.25); } +.hero[data-sky="cloudy-night"]{ background: linear-gradient(160deg, #0f172a 0%, #1e293b 60%, #334155 100%); } +.hero[data-sky="rain"] { background: linear-gradient(160deg, #1e293b 0%, #334155 55%, #475569 100%); } +.hero[data-sky="storm"] { background: linear-gradient(160deg, #1a1033 0%, #2f2a55 55%, #45406b 100%); } +.hero[data-sky="snow"] { background: linear-gradient(160deg, #64748b 0%, #94a3b8 55%, #cbd5e1 100%); } +.hero[data-sky="fog"] { background: linear-gradient(160deg, #64748b 0%, #94a3b8 60%, #cbd5e1 100%); } +.sky-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } +.hero-temp { font-family: 'Barlow Condensed', var(--serif); font-weight: 800; font-size: clamp(5rem, 18vw, 7.5rem); letter-spacing: -0.02em; text-shadow: 0 2px 18px rgba(0,0,0,.18); } +.hero-temp .deg { font-size: 0.4em; opacity: .75; } +.hero .feels, .hero .hero-sub, .hero .hero-desc, .hilo-label { color: var(--sky-text); opacity: .92; } +.hero-desc { font-weight: 700; font-size: 1rem; } +.hero-icon { filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); } +.hero-hilo { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 14px; color: #fff; } +.hilo-divider { background: rgba(255,255,255,.3); } +.hero-share-btn { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.12); min-height: 36px; border-radius: 999px; } +.hero-share-btn:hover { background: rgba(255,255,255,.25); } +.hero-share-status { color: #fff; } +.station-badge { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.4); } +.hero-context { margin-top: 0.45rem; font-size: 0.8rem; font-weight: 600; color: #fff; background: rgba(0,0,0,.18); border-radius: 999px; padding: 0.25rem 0.8rem; display: inline-block; } +@media (max-width: 640px) { + .hero { grid-template-columns: 1fr auto; grid-template-areas: "center right" "left left"; padding: 1.2rem 1rem; gap: 0.7rem; } + .hero-center { grid-area: center; text-align: left; } + .hero-right { grid-area: right; } + .hero-left { grid-area: left; flex-direction: row; align-items: center; gap: 0.6rem; flex-wrap: wrap; } + .hero-icon { font-size: 2.2rem; } + .hero-hilo { flex-direction: column; } + .hilo-divider { width: 70%; height: 1px; } +} + +/* ── Summary ── */ +.summary-line { font-size: 1.02rem; font-weight: 700; line-height: 1.35; margin: 0 0.15rem 1.1rem; letter-spacing: -0.005em; } +.summary-line small { display: block; font-size: 0.8rem; font-weight: 500; color: var(--ink-light); margin-top: 0.15rem; } +.summary-line:empty { display: none; } + +/* ── Nowcast ── */ +.nowcast-bars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; align-items: end; height: 70px; margin-bottom: 0.35rem; } +.nc-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; min-width: 0; } +.nc-bar { width: 100%; border-radius: 6px 6px 3px 3px; background: color-mix(in srgb, var(--cool) 28%, var(--paper-darker)); min-height: 5px; transition: height .4s ease; } +.nc-bar.wet { background: linear-gradient(180deg, #60a5fa, #2563eb); } +.nc-bar.heavy { background: linear-gradient(180deg, #818cf8, #4338ca); } +.nc-time { font-size: 0.62rem; color: var(--ink-light); font-variant-numeric: tabular-nums; white-space: nowrap; } +.nowcast-bars + .nowcast-bars { margin-top: 0; } +.bring-row { display: flex; align-items: flex-start; gap: 0.7rem; padding-top: 0.8rem; margin-top: 0.7rem; border-top: 1px solid var(--border); } +.bring-label { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-light); padding-top: 0.45rem; flex-shrink: 0; } +.bring-row .recs-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; } +.bring-row .rec-item { flex-direction: row; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 999px; background: var(--paper-darker); border: 1px solid var(--border); } +.bring-row .rec-icon { font-size: 1.05rem; } +.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; + 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); } + +/* ── Hourly scrub chart ── */ +.hourly-card { padding: 0.8rem 0.9rem 0.6rem; margin-bottom: 0.7rem; } +.hc-readout { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: baseline; font-size: 0.82rem; min-height: 1.6rem; font-variant-numeric: tabular-nums; color: var(--ink-light); } +.hc-readout b { color: var(--ink); font-size: 1.15rem; } +.hc-readout .hc-t { font-weight: 700; color: var(--ink); min-width: 4.5rem; } +.hc-readout .hc-rain { color: #3b82f6; font-weight: 600; } +.hc-readout .hc-wind { color: var(--cool); font-weight: 600; } +.hourly-chart { width: 100%; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: crosshair; } +.hourly-chart svg { display: block; width: 100%; height: auto; overflow: visible; } +.hourly-scroll { border-radius: 14px; margin-bottom: 1.6rem; } +.hour-cell { background: var(--card-bg); } +.hour-cell.now { background: color-mix(in srgb, var(--accent) 14%, var(--card-bg)); } + +/* ── Radar ── */ +.radar-embed-wrap { border-radius: 16px; margin-bottom: 1.6rem; border: 1px solid var(--border); } +.radar-map { height: 380px; } +@media (max-width: 640px) { .radar-map { height: 320px; } } +.radar-loc-marker { display: flex; flex-direction: column; align-items: center; gap: 4px; transform: translateY(-4px); pointer-events: none; } +.radar-loc-pin { width: 16px; height: 16px; border-radius: 50%; background: #2563eb; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(37,99,235,.25), 0 2px 6px rgba(0,0,0,.5); animation: pin-pulse 2.4s ease-out infinite; } +.radar-loc-label { background: rgba(7,12,20,.82); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } +@keyframes pin-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,99,235,.55), 0 2px 6px rgba(0,0,0,.5); } 70%,100% { box-shadow: 0 0 0 14px rgba(37,99,235,0), 0 2px 6px rgba(0,0,0,.5); } } + +/* ── 7-day range bars ── */ +.daily-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--card-bg); margin-bottom: 1.6rem; } +.day-row { grid-template-columns: 5.2rem 2rem 3rem 2.2rem 1fr 2.2rem; gap: 0.5rem; padding: 0.7rem 1rem; border: none; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; } +.day-row:last-child { border-bottom: none; } +.day-row.today { background: color-mix(in srgb, var(--accent) 8%, transparent); } +.day-name { font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.day-icon { font-size: 1.4rem; text-align: center; } +.day-pop { font-size: 0.74rem; font-weight: 600; color: #3b82f6; white-space: nowrap; font-variant-numeric: tabular-nums; } +.pop-drop { font-size: 0.7rem; margin-right: 1px; } +.day-lo-t, .day-hi-t { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.95rem; text-align: right; } +.day-lo-t { color: var(--ink-light); font-weight: 600; } +.day-range { position: relative; height: 7px; border-radius: 99px; background: var(--paper-darker); } +.day-range-bar { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, #38bdf8, #fbbf24 60%, #fb923c); } +@media (max-width: 640px) { .day-row { grid-template-columns: 3.7rem 1.8rem 2.6rem 2rem 1fr 2rem; gap: 0.35rem; padding: 0.65rem 0.8rem; } } + +/* ── Detail tiles ── */ +.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.65rem; margin-bottom: 1.6rem; } +.detail-grid .stat-card { border: 1px solid var(--border); border-radius: 16px; background: var(--card-bg); padding: 0.9rem 1rem; min-width: 0; } +.detail-grid .aqi-card, .detail-grid .sun-tile { grid-column: span 2; } +@media (max-width: 420px) { .detail-grid { grid-template-columns: repeat(2, 1fr); } } +.sun-tile .sun-timeline-wrap { margin-top: 0.4rem; } +.aqi-cat { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.1rem 0.5rem; border-radius: 99px; background: var(--paper-darker); vertical-align: middle; margin-left: 0.3rem; } +.aqi-track { position: relative; height: 8px; border-radius: 99px; margin: 0.45rem 0 0.35rem; background: linear-gradient(90deg, #22c55e 0%, #eab308 20%, #f97316 40%, #ef4444 60%, #a855f7 80%, #7f1d1d 100%); } +.aqi-marker { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.4); transition: left .5s ease; } + +/* ── Skeleton loading (replaces the full-screen spinner) ── */ +.loading { display: block; min-height: 0; padding: 0; } +.loading.hidden { display: none; } +body:not([data-tab="conditions"]) #loading { display: none; } +.sk { border-radius: 16px; background: linear-gradient(90deg, var(--paper-dark) 25%, var(--paper-darker) 50%, var(--paper-dark) 75%); background-size: 200% 100%; animation: sk-shimmer 1.4s infinite linear; } +.sk-hero { height: 190px; border-radius: 22px; margin-bottom: 0.9rem; } +.sk-line { height: 24px; width: 70%; margin-bottom: 1.1rem; border-radius: 8px; } +.sk-card { height: 120px; margin-bottom: 1.2rem; } +.sk-card.tall { height: 200px; } +.sk-rows { display: grid; gap: 8px; } +.sk-row { height: 44px; border-radius: 12px; } +@keyframes sk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } +@media (prefers-reduced-motion: reduce) { .sk, .radar-loc-pin, .nc-bar { animation: none; transition: none; } } + +/* ── Page chrome ── */ +.tab-panel { animation: panel-in .25s cubic-bezier(.2,0,0,1); } +@keyframes panel-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } +.footer-note { color: var(--ink-light); } +.settings-wrap .icon-btn { display: none; } + +/* High / low block: one tidy line each */ +.hero-hilo { display: flex; align-items: center; gap: 0.2rem; padding: 0.55rem 0.8rem; } +.hilo-item { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center; font-size: 1.35rem; font-weight: 800; line-height: 1.1; text-align: center; min-width: 3.6rem; } +.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; } } diff --git a/app/public/app-ui.js b/app/public/app-ui.js new file mode 100644 index 0000000..336f826 --- /dev/null +++ b/app/public/app-ui.js @@ -0,0 +1,403 @@ +/* Main app redesign layer — builds on globals from app.js (state, wmo, tempDisplay, radarEmbed, …). + app.js calls AppUI.onWeather / onAir / onStation after rendering. */ +(() => { +'use strict'; + +const $ = (id) => document.getElementById(id); +const num = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : null); +const us = () => state.units === 'us'; +const REDUCED = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + +// ── Tab tracking (drives skeleton visibility, top-bar state) ───────────────── +function currentTabName() { + return document.querySelector('.tab.active, .bottom-tab.active')?.dataset.tab || 'conditions'; +} +document.body.dataset.tab = currentTabName(); +const baseActivate = window.activateTab; +if (typeof baseActivate === 'function') { + window.activateTab = function (name) { + baseActivate(name); + document.body.dataset.tab = name; + window.scrollTo({ top: 0 }); + if (name === 'conditions' && window.AppUI) setTimeout(window.AppUI.refreshFx, 30); + }; +} + +// ── Top bar: location chip opens search ────────────────────────────────────── +$('tb-search')?.addEventListener('click', () => { + window.activateTab('settings'); + setTimeout(() => { + const input = $('search-input'); + if (input) { input.scrollIntoView({ block: 'center', behavior: 'smooth' }); input.focus({ preventScroll: true }); } + }, 120); +}); +function syncTopbarLocation() { + const name = $('loc-name')?.textContent?.trim(); + if ($('tb-loc')) $('tb-loc').textContent = name || 'Location'; +} + +// ── Sky: gradient + precipitation / star effects ───────────────────────────── +function skyFor(code, isDay, stationRaining) { + if (stationRaining) return 'rain'; + if (code >= 95) return 'storm'; + if ([71, 73, 75, 77, 85, 86].includes(code)) return 'snow'; + if ([51, 53, 55, 56, 57, 61, 63, 65, 66, 67, 80, 81, 82].includes(code)) return 'rain'; + if ([45, 48].includes(code)) return 'fog'; + if (code === 2 || code === 3) return isDay ? 'cloudy-day' : 'cloudy-night'; + return isDay ? 'clear-day' : 'clear-night'; +} + +const fx = { raf: 0, kind: null, parts: [], w: 0, h: 0, flash: 0 }; +function fxResize(canvas) { + const dpr = Math.min(window.devicePixelRatio || 1, 2); + fx.w = canvas.clientWidth; fx.h = canvas.clientHeight; + canvas.width = fx.w * dpr; canvas.height = fx.h * dpr; + canvas.getContext('2d').setTransform(dpr, 0, 0, dpr, 0, 0); +} +function fxSeed(kind) { + const n = kind === 'storm' ? 130 : kind === 'rain' ? 85 : kind === 'snow' ? 70 : kind === 'clear-night' ? 55 : 0; + fx.parts = Array.from({ length: n }, () => ({ + x: Math.random() * fx.w, y: Math.random() * fx.h, + v: kind === 'snow' ? 0.4 + Math.random() * 0.9 : kind === 'clear-night' ? 0 : 6 + Math.random() * 7, + r: kind === 'snow' ? 1 + Math.random() * 2.2 : kind === 'clear-night' ? 0.4 + Math.random() * 1.2 : 0.8 + Math.random() * 0.8, + p: Math.random() * Math.PI * 2, + })); +} +function fxFrame(t) { + const canvas = $('sky-fx'); + if (!canvas) return; + const ctx = canvas.getContext('2d'); + ctx.clearRect(0, 0, fx.w, fx.h); + const kind = fx.kind; + if (kind === 'rain' || kind === 'storm') { + ctx.strokeStyle = 'rgba(200,220,255,0.55)'; ctx.lineWidth = 1.1; ctx.lineCap = 'round'; + ctx.beginPath(); + for (const p of fx.parts) { + ctx.moveTo(p.x, p.y); ctx.lineTo(p.x - 2.2, p.y + p.v * 1.6); + p.y += p.v; p.x -= 0.55; + if (p.y > fx.h) { p.y = -10; p.x = Math.random() * (fx.w + 20); } + } + ctx.stroke(); + if (kind === 'storm') { + if (fx.flash <= 0 && Math.random() < 0.004) fx.flash = 1; + if (fx.flash > 0) { ctx.fillStyle = `rgba(255,255,255,${(fx.flash * 0.28).toFixed(3)})`; ctx.fillRect(0, 0, fx.w, fx.h); fx.flash -= 0.07; } + } + } else if (kind === 'snow') { + ctx.fillStyle = 'rgba(255,255,255,0.85)'; + for (const p of fx.parts) { + ctx.beginPath(); ctx.arc(p.x + Math.sin(t / 900 + p.p) * 6, p.y, p.r, 0, Math.PI * 2); ctx.fill(); + p.y += p.v; if (p.y > fx.h + 4) { p.y = -4; p.x = Math.random() * fx.w; } + } + } else if (kind === 'clear-night') { + for (const p of fx.parts) { + ctx.fillStyle = `rgba(255,255,255,${(0.35 + 0.55 * Math.abs(Math.sin(t / 1400 + p.p))).toFixed(2)})`; + ctx.beginPath(); ctx.arc(p.x, p.y * 0.8, p.r, 0, Math.PI * 2); ctx.fill(); + } + } + if (!REDUCED && !document.hidden) fx.raf = requestAnimationFrame(fxFrame); +} +function setSky(kind) { + const hero = $('hero'), canvas = $('sky-fx'); + if (!hero || !canvas) return; + hero.dataset.sky = kind; + cancelAnimationFrame(fx.raf); + fx.kind = kind; + fxResize(canvas); + fxSeed(kind); + if (fx.parts.length) fxFrame(performance.now()); + else canvas.getContext('2d').clearRect(0, 0, fx.w, fx.h); +} +window.addEventListener('resize', () => { const c = $('sky-fx'); if (c && fx.kind) { fxResize(c); fxSeed(fx.kind); } }); +document.addEventListener('visibilitychange', () => { if (!document.hidden && fx.parts.length && !REDUCED) { cancelAnimationFrame(fx.raf); fxFrame(performance.now()); } }); + +// ── Nowcast: next 2 hours from 15-minute precipitation ─────────────────────── +function nowcastSlots(data) { + const m = data.minutely_15; + const now = Date.now(); + if (m?.time?.length && m.precipitation) { + let i = m.time.findIndex((t) => new Date(t).getTime() + 15 * 60000 > now); + if (i < 0) i = 0; + const slots = []; + for (let k = i; k < m.time.length; k++) slots.push({ t: new Date(m.time[k]).getTime(), v: m.precipitation[k] || 0 }); + if (slots.length >= 4) return { slots, source: '15min' }; + } + // Fallback: hourly rain chance spread over 15-minute slots + const h = data.hourly; + let si = h.time.findIndex((t) => new Date(t).getTime() >= now - 3600000); + if (si < 0) si = 0; + const slots = []; + for (let k = si; k < Math.min(si + 6, h.time.length); k++) { + const t0 = new Date(h.time[k]).getTime(); + const pp = (h.precipitation_probability?.[k] || 0) / 100; + const mm = h.rain?.[k] || 0; + for (let q = 0; q < 4; q++) slots.push({ t: t0 + q * 900000, v: pp >= 0.5 ? Math.max(mm / 4, us() ? 0.006 : 0.15) : 0, pp }); + } + return { slots: slots.filter((s) => s.t + 900000 > now), source: 'hourly' }; +} +const WET = () => (us() ? 0.004 : 0.1); +const HEAVY = () => (us() ? 0.04 : 1.0); +const mins = (ms) => Math.max(0, Math.round(ms / 60000)); +function human(m) { return m >= 90 ? `${Math.round(m / 6) / 10}h`.replace('.0h', 'h') : `${m} min`; } + +function rainOutlook(slots) { + const now = Date.now(); + const wet = (s) => s.v >= WET(); + const first = slots[0]; + if (!slots.length) return { text: '', short: '' }; + if (first && wet(first)) { + const dry = slots.findIndex((s) => !wet(s)); + if (dry < 0) return { text: 'Rain continuing for the next few hours', short: 'Rain continuing', kind: 'raining' }; + const end = mins(slots[dry].t - now); + return { text: `Rain ending in about ${human(end)}`, short: `Rain ends ~${human(end)}`, kind: 'raining' }; + } + const idx = slots.findIndex(wet); + if (idx < 0) return { text: `No rain expected in the next ${Math.round((slots[slots.length - 1].t + 900000 - now) / 3600000)} hours`, short: 'Dry ahead', kind: 'dry' }; + const start = mins(slots[idx].t - now); + let len = 0; for (let k = idx; k < slots.length && wet(slots[k]); k++) len += 15; + const reachesEnd = idx + len / 15 >= slots.length; + const dur = reachesEnd ? `${human(len)}+` : `about ${human(len)}`; + const when = start <= 5 ? 'Rain starting now' : `Rain starting in ${human(start)}`; + return { text: `${when}, lasting ${dur}`, short: start <= 5 ? 'Rain now' : `Rain in ${human(start)}`, kind: 'soon', start }; +} + +function renderNowcast(data) { + const host = $('nowcast-bars'); + if (!host) return { text: '', short: '' }; + const { slots, source } = nowcastSlots(data); + const next8 = slots.slice(0, 8); + const scale = Math.max(HEAVY() * 1.5, ...next8.map((s) => s.v)); + host.innerHTML = next8.map((s, i) => { + const hPct = s.v >= WET() ? Math.max(14, Math.min(100, (s.v / scale) * 100)) : 7; + const cls = s.v >= HEAVY() ? 'heavy' : s.v >= WET() ? 'wet' : ''; + const label = i === 0 ? 'Now' : i % 2 === 0 ? new Date(s.t).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }).replace(' ', '').toLowerCase() : ''; + const unit = us() ? 'in' : 'mm'; + return `
${label}
`; + }).join(''); + const outlook = rainOutlook(slots); + $('nowcast-note').textContent = source === '15min' ? outlook.short : `${outlook.short} · hourly est.`; + return outlook; +} + +// ── "Bring" chips react to the rain outlook and the coming cold ────────────── +function enrichBring(data, outlook) { + const grid = $('recommendations'); + if (!grid) return; + const have = (label) => [...grid.querySelectorAll('.rec-label')].some((e) => e.textContent.toLowerCase().includes(label)); + const add = (icon, label) => grid.insertAdjacentHTML('afterbegin', `
${icon}${label}
`); + const h = data.hourly; + let si = h.time.findIndex((t) => new Date(t).getTime() >= Date.now()); + if (si < 0) si = 0; + const next12 = h.temperature_2m.slice(si, si + 12); + const coldF = (t) => (us() ? t : t * 9 / 5 + 32); + if (next12.length && coldF(Math.min(...next12)) <= 50 && !have('jacket') && !have('coat')) add('🧥', 'Jacket'); + if ((outlook?.kind === 'soon' || outlook?.kind === 'raining') && !have('umbrella')) add('☂️', 'Umbrella'); +} + +// ── Summary line ───────────────────────────────────────────────────────────── +function renderSummary(data, outlook) { + const el = $('summary-line'); + if (!el) return; + const c = data.current, d = data.daily; + const w = wmo(c.weather_code); + const hi = tempDisplay(d.temperature_2m_max[0]), lo = tempDisplay(d.temperature_2m_min[0]); + const parts = []; + if (outlook?.kind === 'soon' || outlook?.kind === 'raining') parts.push(`${outlook.text}.`); + else parts.push(`${w.desc} now, high ${hi}°, low ${lo}°.`); + const wind = c.wind_speed_10m; + const windy = (us() ? wind >= 18 : wind >= 29); + const subs = []; + if (outlook?.kind === 'soon' || outlook?.kind === 'raining') subs.push(`${w.desc} · high ${hi}°, low ${lo}°`); + if (windy) subs.push(`Breezy: ${speedDisplay(wind)} ${speedUnit()}${c.wind_gusts_10m ? `, gusts ${speedDisplay(c.wind_gusts_10m)}` : ''}`); + const nAlerts = state.currentAlerts?.features?.length || 0; + if (nAlerts) subs.push(`⚠ ${nAlerts} active alert${nAlerts > 1 ? 's' : ''} — see Alerts`); + el.innerHTML = `${parts.join(' ')}${subs.length ? `${subs.join(' · ')}` : ''}`; +} + +// ── Hourly scrub chart (SVG, no dependencies) ──────────────────────────────── +function renderHourlyChart(data) { + const host = $('hourly-chart'), readout = $('hc-readout'); + if (!host) return; + const h = data.hourly; + let start = h.time.findIndex((t) => new Date(t).getTime() >= Date.now() - 1800000); + if (start < 0) start = 0; + const n = Math.min(state.hourlyExtended ? 48 : 24, h.time.length - start); + const idx = Array.from({ length: n }, (_, i) => start + i); + const feels = state.hourlyFeelsLike; + const temp = idx.map((i) => (feels ? h.apparent_temperature?.[i] ?? h.temperature_2m[i] : h.temperature_2m[i])); + const pop = idx.map((i) => h.precipitation_probability?.[i] ?? 0); + const wind = idx.map((i) => h.wind_speed_10m?.[i] ?? 0); + const times = idx.map((i) => new Date(h.time[i])); + + const W = 640, H = 200, L = 34, R = 12, T = 14, B = 26; + const pw = W - L - R, ph = H - T - B; + const tMin = Math.floor(Math.min(...temp) - 2), tMax = Math.ceil(Math.max(...temp) + 2); + const wMax = Math.max(15, ...wind); + const x = (i) => L + (n === 1 ? 0 : (i / (n - 1)) * pw); + const yT = (v) => T + (1 - (v - tMin) / (tMax - tMin)) * ph; + const yW = (v) => T + (1 - v / wMax) * ph; + const barW = Math.max(3, pw / n - 3); + + const bars = pop.map((p, i) => p > 0 ? `` : '').join(''); + const line = (arr, yf) => arr.map((v, i) => `${i ? 'L' : 'M'}${x(i).toFixed(1)},${yf(v).toFixed(1)}`).join(''); + const tLine = line(temp, yT); + const area = `${tLine}L${x(n - 1).toFixed(1)},${T + ph}L${x(0).toFixed(1)},${T + ph}Z`; + + // x-axis labels + midnight dividers + let xl = ''; + const step = n > 30 ? 6 : 3; + times.forEach((t, i) => { + const mid = t.getHours() === 0; + if (mid && i > 0) xl += `${times[i].toLocaleDateString([], { weekday: 'short' })}`; + if (i % step === 0) xl += `${i === 0 ? 'Now' : t.toLocaleTimeString([], { hour: 'numeric' }).replace(' ', '').toLowerCase()}`; + }); + // y-axis (temperature) + let yl = ''; + for (let k = 0; k <= 3; k++) { + const v = tMin + ((tMax - tMin) * k) / 3, yy = yT(v); + yl += `${tempDisplay(v)}°`; + } + + host.innerHTML = ` + + ${yl}${bars} + + + + ${xl} + `; + + const svg = host.querySelector('svg'); + const fmtT = (d) => d.toLocaleDateString([], { weekday: 'short' }) + ' ' + d.toLocaleTimeString([], { hour: 'numeric' }); + const show = (i) => { + const code = h.weather_code?.[idx[i]]; + readout.innerHTML = `${i === 0 ? 'Now' : fmtT(times[i])}${code != null ? wmo(code).icon : ''} ${tempDisplay(temp[i])}°💧 ${pop[i]}%💨 ${speedDisplay(wind[i])} ${speedUnit()}`; + const cur = svg.querySelector('#hc-cursor'); + cur.style.display = ''; + svg.querySelector('#hc-line').setAttribute('x1', x(i)); svg.querySelector('#hc-line').setAttribute('x2', x(i)); + svg.querySelector('#hc-dot').setAttribute('cx', x(i)); svg.querySelector('#hc-dot').setAttribute('cy', yT(temp[i])); + }; + const move = (ev) => { + const r = svg.getBoundingClientRect(); + const vx = ((ev.clientX - r.left) / r.width) * W; + show(Math.max(0, Math.min(n - 1, Math.round(((vx - L) / pw) * (n - 1))))); + }; + svg.addEventListener('pointermove', move); + svg.addEventListener('pointerdown', move); + const reset = () => { svg.querySelector('#hc-cursor').style.display = 'none'; show(0); svg.querySelector('#hc-cursor').style.display = 'none'; }; + svg.addEventListener('pointerleave', reset); + svg.addEventListener('pointercancel', reset); + show(0); svg.querySelector('#hc-cursor').style.display = 'none'; +} + +// ── Air quality gauge + UV category ────────────────────────────────────────── +function aqiInfo(v) { + if (v == null) return ['', '#94a3b8']; + if (v <= 50) return ['Good', '#22c55e']; + if (v <= 100) return ['Moderate', '#eab308']; + if (v <= 150) return ['Sensitive', '#f97316']; + if (v <= 200) return ['Unhealthy', '#ef4444']; + if (v <= 300) return ['Very unhealthy', '#a855f7']; + return ['Hazardous', '#991b1b']; +} +function uvCategory(uv) { + if (uv == null) return ''; + return uv < 3 ? 'Low' : uv < 6 ? 'Moderate' : uv < 8 ? 'High' : uv < 11 ? 'Very high' : 'Extreme'; +} +function renderAqi(air) { + const v = num(air?.current?.us_aqi); + const [label, color] = aqiInfo(v); + const cat = $('aqi-cat'), marker = $('aqi-marker'); + if (cat) { cat.textContent = label; cat.style.color = color; } + if (marker) marker.style.left = v == null ? '0%' : `${Math.min(100, (v / 300) * 100).toFixed(1)}%`; +} + +// ── Station context (yesterday / normal) ───────────────────────────────────── +let summaryCache = { at: 0, data: null }; +async function loadStationSummary() { + if (summaryCache.data && Date.now() - summaryCache.at < 5 * 60000) return summaryCache.data; + try { + const r = await fetch('/api/station/summary'); + if (!r.ok) return null; + summaryCache = { at: Date.now(), data: await r.json() }; + return summaryCache.data; + } catch { return null; } +} +async function renderStationContext() { + const el = $('hero-context'); + if (!el) return; + const s = await loadStationSummary(); + const y = s?.yesterday; + if (!y || y.hi == null || y.lo == null) { el.classList.add('hidden'); return; } + const conv = (f) => (us() ? Math.round(f) : Math.round((f - 32) * 5 / 9)); + let text = `Yesterday ${conv(y.hi)}° / ${conv(y.lo)}°`; + const todayHi = state.currentWeather?.daily?.temperature_2m_max?.[0]; + if (s.normal?.hi != null && todayHi != null) { + const normHi = us() ? s.normal.hi : (s.normal.hi - 32) * 5 / 9; + const diff = Math.round(todayHi - normHi); + if (Math.abs(diff) >= 1) text += ` · ${Math.abs(diff)}° ${diff > 0 ? 'warmer' : 'cooler'} than usual today`; + else text += ' · about normal for today'; + } + el.textContent = text; + el.classList.remove('hidden'); +} + +// ── Radar: location marker with rain countdown + alert polygons ────────────── +let radarMarker = null, radarMarkerEl = null; +function updateRadar(city, outlook) { + const map = typeof radarEmbed !== 'undefined' ? radarEmbed?.map : null; + if (!map || typeof maplibregl === 'undefined' || city?.latitude == null) return; + const label = outlook?.kind === 'soon' || outlook?.kind === 'raining' ? `📍 ${outlook.short}` : `📍 ${city.name || 'You'}`; + if (!radarMarker) { + radarMarkerEl = document.createElement('div'); + radarMarkerEl.className = 'radar-loc-marker'; + radarMarkerEl.innerHTML = '
'; + radarMarker = new maplibregl.Marker({ element: radarMarkerEl, anchor: 'bottom' }).setLngLat([city.longitude, city.latitude]).addTo(map); + } else radarMarker.setLngLat([city.longitude, city.latitude]); + radarMarkerEl.querySelector('.radar-loc-label').textContent = label; + + const feats = (state.currentAlerts?.features || []).filter((f) => f.geometry); + const apply = () => { + try { + const fc = { type: 'FeatureCollection', features: feats }; + if (map.getSource('ui-alerts')) { map.getSource('ui-alerts').setData(fc); return; } + if (!feats.length) return; + map.addSource('ui-alerts', { type: 'geojson', data: fc }); + map.addLayer({ id: 'ui-alerts-fill', type: 'fill', source: 'ui-alerts', paint: { 'fill-color': '#ef4444', 'fill-opacity': 0.14 } }); + map.addLayer({ id: 'ui-alerts-line', type: 'line', source: 'ui-alerts', paint: { 'line-color': '#ef4444', 'line-width': 2, 'line-dasharray': [2, 1] } }); + } catch { /* style swapped mid-update; next refresh retries */ } + }; + if (map.isStyleLoaded()) apply(); else map.once('idle', apply); +} + +// ── Public hooks ───────────────────────────────────────────────────────────── +let lastOutlook = null; +window.AppUI = { + onWeather(data, city) { + syncTopbarLocation(); + const peek = $('wind-drawer-peek'); if (peek) peek.textContent = peek.textContent.replace(/^[\s·]+/, ''); + const c = data.current; + const d = state.ambientDevice?.lastData; + const stationFresh = !!(d?.dateutc && Date.now() - d.dateutc < 15 * 60000 && state.ambientUseStation); + if (!stationFresh) { $('station-badge')?.classList.add('hidden'); $('hero-context')?.classList.add('hidden'); } + setSky(skyFor(c.weather_code, !!c.is_day, stationFresh && d.rainratein > 0)); + $('uv-cat').textContent = uvCategory(data.daily?.uv_index_max?.[0]); + lastOutlook = renderNowcast(data); + enrichBring(data, lastOutlook); + if ((lastOutlook?.kind === 'soon' || lastOutlook?.kind === 'raining') && $('cur-precip')) $('cur-precip').textContent = lastOutlook.short; + renderSummary(data, lastOutlook); + renderHourlyChart(data); + updateRadar(city, lastOutlook); + if (state.currentAir) renderAqi(state.currentAir); + if (stationFresh) renderStationContext(); + }, + onAir(air) { renderAqi(air); }, + refreshFx() { const c = $('sky-fx'); if (c && fx.kind) { cancelAnimationFrame(fx.raf); fxResize(c); fxSeed(fx.kind); if (fx.parts.length) fxFrame(performance.now()); } }, + onStation() { syncTopbarLocation(); renderStationContext(); }, +}; + +syncTopbarLocation(); +new MutationObserver(syncTopbarLocation).observe($('loc-name') || document.body, { childList: true, characterData: true, subtree: true }); +})(); diff --git a/app/public/app.js b/app/public/app.js index 79a33c8..ea71ddc 100644 --- a/app/public/app.js +++ b/app/public/app.js @@ -746,7 +746,7 @@ function renderSavedCities() { // ── Tab switching ───────────────────────────────────────────────────────────── function activateTab(tabName) { - document.querySelectorAll('.tab, .bottom-tab').forEach(t => t.classList.remove('active')); + document.querySelectorAll('.tab, .bottom-tab, .icon-btn[data-tab]').forEach(t => t.classList.remove('active')); document.querySelectorAll('.tab-panel').forEach(p => hide(p)); document.querySelectorAll(`[data-tab="${tabName}"]`).forEach(t => t.classList.add('active')); show(document.getElementById('tab-' + tabName)); @@ -768,7 +768,7 @@ function activateTab(tabName) { refreshSavedCityWeather(); } } -document.querySelectorAll('.tab, .bottom-tab').forEach(btn => { +document.querySelectorAll('.tab, .bottom-tab, .icon-btn[data-tab]').forEach(btn => { btn.addEventListener('click', () => activateTab(btn.dataset.tab)); }); @@ -1609,6 +1609,8 @@ function renderWeather(data, city) { // Apply station overlay if we have fresh station data if (state.ambientDevice) applyStationOverlay(state.ambientDevice); + + if (window.AppUI) window.AppUI.onWeather(data, city); } function renderDailyForecast(daily) { @@ -1619,16 +1621,22 @@ function renderDailyForecast(daily) { const maxDays = state.showExtendedForecast ? Math.min(16, totalDays) : Math.min(7, totalDays); list.innerHTML = ''; + const hiAll = daily.temperature_2m_max.slice(0, maxDays), loAll = daily.temperature_2m_min.slice(0, maxDays); + const wkMin = Math.min(...loAll), wkMax = Math.max(...hiAll), span = Math.max(wkMax - wkMin, 1); for (let i = 0; i < maxDays; i++) { const dw = wmo(daily.weather_code[i]); + const lo = daily.temperature_2m_min[i], hi = daily.temperature_2m_max[i]; + const left = ((lo - wkMin) / span) * 100, width = Math.max(((hi - lo) / span) * 100, 6); + const pop = daily.precipitation_probability_max[i]; const row = document.createElement('div'); row.className = 'day-row' + (i === 0 ? ' today' : ''); row.innerHTML = `
${formatDayShort(daily.time[i])}
-
${dw.icon}
-
${dw.desc}
-
${tempDisplay(daily.temperature_2m_max[i])}° / ${tempDisplay(daily.temperature_2m_min[i])}°
-
${daily.precipitation_probability_max[i] > 0 ? daily.precipitation_probability_max[i] + '% rain
' : ''}${speedDisplay(daily.wind_speed_10m_max[i])} ${speedUnit()}
+
${dw.icon}
+
${pop > 0 ? `💧${pop}%` : ''}
+
${tempDisplay(lo)}°
+
+
${tempDisplay(hi)}°
`; list.appendChild(row); } @@ -1661,6 +1669,7 @@ function renderAirQuality(data) { if (panelAqi) panelAqi.textContent = cur.us_aqi ?? '--'; setMapOverlayReadouts({ aqi: cur.us_aqi ?? '--' }); + if (window.AppUI) window.AppUI.onAir(data); } function normalizeSeverity(severity) { @@ -2658,7 +2667,7 @@ syncOfflineState(); // ── Swipe gestures for tab switching ────────────────────────────────────────── (function initSwipe() { - const TABS = ['conditions', 'station', 'unified-map', 'alerts', 'learn', 'settings']; + const TABS = ['conditions', 'station', 'unified-map', 'alerts']; let touchX = 0; let touchY = 0; let blocked = false; @@ -3085,16 +3094,13 @@ function applyStationOverlay(device) { peekEl.textContent = `· ${fS(data.windspeedmph)} ${speedUnit()} ${compassDir(data.winddir || 0)} · ${data.humidity ?? '--'}% humidity`; } - // Replace location name with station name - const stationName = device.info?.name || device.macAddress || 'My Station'; - const locNameEl = document.getElementById('loc-name'); - const locSubEl = document.getElementById('loc-sub'); - if (locNameEl) locNameEl.textContent = stationName; - if (locSubEl) locSubEl.textContent = 'Ambient Weather Station'; - - // Hide the hero badge (redundant — location header now identifies the station) + // Keep the searched location's name; mark that temperatures now come from your own station + const stationName = (state.stationName || device.info?.name || 'My Station'); const badge = document.getElementById('station-badge'); - if (badge) hide(badge); + const badgeName = document.getElementById('station-badge-name'); + if (badgeName) badgeName.textContent = `Your station · ${stationName}`; + if (badge) show(badge); + if (window.AppUI) window.AppUI.onStation(device, data); } function renderAmbientStation(device) { diff --git a/app/public/dashboard-account.html b/app/public/dashboard-account.html index 99798e3..39f819d 100644 --- a/app/public/dashboard-account.html +++ b/app/public/dashboard-account.html @@ -3,18 +3,18 @@ - + Account