2026-07-11 00:29:47 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1" / >
< title > Thermograph — 2-year calendar< / title >
2026-07-11 15:59:14 +00:00
< meta name = "description" content = "Pick any point on Earth and see how its recent weather stacks up against ~45 years of local climate history — graded days, calendars, forecasts, and side-by-side comparisons." / >
< meta name = "theme-color" content = "#f0803c" / >
<!-- Link previews (Discord, Slack, iMessage…). The server fills the og:url /
og:image origins in from this request's scheme://host + base path —
crawlers need absolute URLs and don't run JS. -->
< meta property = "og:type" content = "website" / >
< meta property = "og:site_name" content = "Thermograph" / >
< meta property = "og:title" content = "Thermograph — 2-year calendar" / >
< meta property = "og:description" content = "Pick any point on Earth and see how its recent weather stacks up against ~45 years of local climate history — graded days, calendars, forecasts, and side-by-side comparisons." / >
< meta property = "og:url" content = "__ORIGIN__/calendar" / >
< meta property = "og:image" content = "__ORIGIN__/logo.png" / >
< meta property = "og:image:width" content = "512" / >
< meta property = "og:image:height" content = "512" / >
< meta property = "og:image:alt" content = "Thermograph logo" / >
< meta name = "twitter:card" content = "summary" / >
< link rel = "icon" href = "logo.svg" type = "image/svg+xml" / >
< link rel = "apple-touch-icon" href = "logo.png" / >
2026-07-11 00:29:47 +00:00
< link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" / >
< link rel = "stylesheet" href = "style.css" / >
< / head >
< body >
2026-07-11 07:20:13 +00:00
< header class = "compact" >
2026-07-11 00:29:47 +00:00
< div class = "brand" >
< span class = "logo" > ▚< / span >
< div >
< h1 > Thermograph · Calendar< / h1 >
< / div >
< nav class = "view-nav" aria-label = "Views" >
< a href = "./" data-view = "map" > Weekly< / a >
< a href = "calendar" data-view = "calendar" class = "active" > Calendar< / a >
< a href = "day" data-view = "day" > Day< / a >
2026-07-11 02:58:56 +00:00
< a href = "compare" data-view = "compare" > Compare< / a >
2026-07-11 00:29:47 +00:00
< / nav >
< / div >
< / header >
< main >
< section class = "controls" >
< div class = "find-bar" >
< button type = "button" id = "find-btn" class = "find-btn" > < / button >
< span id = "loc-label" class = "loc-label" hidden > < / span >
< / div >
< / section >
< div id = "cal-head" class = "cal-head" hidden > < / div >
<!-- Time filters: month/year range + season + year, each a compact dropdown. -->
< div id = "cal-filters" class = "cal-filters" hidden >
< div class = "cal-range" id = "cal-range" >
< div class = "cal-range-head" >
< span class = "cal-filter-label" > Range< / span >
< span class = "hint" > longer spans load 2 years at a time< / span >
< / div >
< label > From < input id = "range-start" type = "month" / > < / label >
< label > To < input id = "range-end" type = "month" / > < / label >
< button type = "button" id = "range-refresh" class = "range-refresh" hidden > Refresh dates ↻< / button >
< / div >
< div id = "cal-seasonyear" class = "cal-seasonyear" > < / div >
2026-07-12 07:45:12 +00:00
<!-- A synced copy of the metric selector for the phone sheet; buttons are cloned
from the inline #metric-toggle in JS. Hidden on desktop. -->
< div class = "cal-metric-sheet" >
< span class = "cal-filter-label" > Color the calendar by< / span >
< div class = "metric-toggle" id = "metric-toggle-sheet" role = "group" aria-label = "Color the calendar by (in filters)" > < / div >
< / div >
2026-07-11 00:29:47 +00:00
< / div >
<!-- Metric selector sits below the time filters, right above the grid it colors. -->
< div id = "metric-block" class = "metric-block" hidden >
< span class = "cal-filter-label" > Color the calendar by< / span >
< div class = "metric-toggle" id = "metric-toggle" role = "group" aria-label = "Color the calendar by" >
< button type = "button" data-metric = "tmax" class = "active" > High< / button >
< button type = "button" data-metric = "tmin" > Low< / button >
< button type = "button" data-metric = "feels" > Feels< / button >
< button type = "button" data-metric = "humid" > Humid< / button >
< button type = "button" data-metric = "wind" > Wind< / button >
< button type = "button" data-metric = "gust" > Gust< / button >
< button type = "button" data-metric = "precip" > Precip< / button >
< button type = "button" data-metric = "dsr" > Dry streak< / button >
< / div >
< / div >
<!-- Category totals for the current metric across the shown (and weather -
filtered) days: a stacked share bar + per-category percentages. -->
< div id = "cal-totals" class = "cal-totals" hidden > < / div >
< div class = "placeholder" id = "cal-placeholder" >
< p > Search a place — or open this from a graded location on the map — to see how
every day of the last two years graded against that spot's own climate history.< / p >
< / div >
< div id = "calendar" class = "calendar" > < / div >
< div id = "cal-key" > < / div >
< div id = "cal-tip" class = "chart-tip" hidden > < / div >
< / main >
< script src = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" > < / script >
Convert the frontend to ES modules; split nav.js by concern (#48)
The frontend was classic scripts sharing one global scope, with a
load-order contract enforced only by comments (leaflet -> nav ->
shared -> mappicker -> page) and hand-rolled window.Thermograph /
window.LocationPicker namespaces. Page scripts now import what they use;
the dependency graph replaces the ordering contract, and no app globals
remain (Leaflet stays a classic script / global L, loaded first).
nav.js had grown four concerns; it's now three single-purpose modules:
- nav.js: last-location memory + header view-links + locHash.
- units.js: the °F/°C toggle and unit-aware formatting. The compare
special case is gone — pages that want the toggle import units.js;
compare simply doesn't.
- cache.js: the IndexedDB response cache, SWR getJSON, bundle-seeded
view prefetch and neighbor warming. prefetchViews(lat, lon, ownViews)
now takes the calling page's own view names instead of a page-identity
map (VIEW_OWN) — adding a page no longer means editing this module.
The slice->URL map stays here as bundle-contract knowledge.
frontend/package.json ({"type": "module"}) makes CI's node --check
parse the files as modules.
Verified: node --check on all files as modules; 108 backend tests;
headless-Chromium smoke across all five pages against live data — zero
console/page errors, all render assertions pass (cards, chart, calendar
grid + metric switch, ladders, compare ranking, legend scales).
2026-07-11 20:28:33 +00:00
< script type = "module" src = "calendar.js" > < / script >
2026-07-11 00:29:47 +00:00
< / body >
< / html >
