2026-07-11 02:58:56 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1" / >
< title > Thermograph — compare comfort< / 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 — compare comfort" / >
< 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__/compare" / >
< 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 02:58:56 +00:00
< link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" / >
< link rel = "stylesheet" href = "style.css" / >
< / head >
< body >
< header >
< div class = "brand" >
< span class = "logo" > ▚< / span >
< div >
< h1 > Thermograph · Compare< / h1 >
< p class = "tag" > Which place best hits your comfort temperature over a date range< / p >
< / div >
< nav class = "view-nav" aria-label = "Views" >
< a href = "./" data-view = "map" > Weekly< / a >
< a href = "calendar" data-view = "calendar" > Calendar< / a >
< a href = "day" data-view = "day" > Day< / a >
< a href = "compare" data-view = "compare" class = "active" > Compare< / a >
< / nav >
< / div >
< / header >
< main >
<!-- Locations to line up against each other. -->
< section class = "controls" >
< div class = "cmp-locs" >
< span class = "cal-filter-label" > Locations< / span >
< ul id = "cmp-loc-list" class = "cmp-loc-list" > < / ul >
2026-07-11 03:17:17 +00:00
< div class = "cmp-loc-actions" >
< button type = "button" id = "cmp-add" class = "find-btn" > < / button >
< button type = "button" id = "cmp-refresh" class = "cmp-refresh-btn" hidden > Refresh comparison ↻< / button >
< / div >
2026-07-11 02:58:56 +00:00
< / div >
< / section >
<!-- The comfort target, what temperature to judge by, the tolerance band, and
the date range. Comfort/band/basis recompute instantly (no refetch); only
the date range or the location set trigger a data load. -->
< div id = "cmp-params" class = "cmp-params" hidden >
< div class = "cmp-param cmp-comfort" >
2026-07-11 22:33:38 +00:00
< label > Comfort range < b id = "cmp-range-val" > < / b > < / label >
< div class = "dual-range" id = "cmp-slicer" >
< div class = "dual-track" > < span class = "dual-fill" id = "cmp-fill" > < / span > < / div >
< input id = "cmp-lo" type = "range" min = "30" max = "100" step = "1" aria-label = "Comfort range lower bound" / >
< input id = "cmp-hi" type = "range" min = "30" max = "100" step = "1" aria-label = "Comfort range upper bound" / >
< / div >
< span class = "hint" > Days landing in this range hit comfort; below it is colder, above it is warmer.< / span >
2026-07-11 02:58:56 +00:00
< / div >
< div class = "cmp-param cmp-basis-block" >
< span class = "cal-filter-label" > Judge each day by its< / span >
< div class = "metric-toggle" id = "cmp-basis" role = "group" aria-label = "Temperature to compare" >
< button type = "button" data-basis = "tmax" class = "active" > High< / button >
< button type = "button" data-basis = "mean" > Mean< / button >
< button type = "button" data-basis = "tmin" > Low< / button >
< button type = "button" data-basis = "feels" > Feels< / button >
< / div >
< / div >
< div class = "cmp-param cmp-range cal-range" id = "cmp-range" >
< div class = "cal-range-head" >
< span class = "cal-filter-label" > Date range< / span >
< span class = "hint" > any span; longer loads take a moment< / span >
< / div >
< label > From < input id = "cmp-start" type = "month" / > < / label >
< label > To < input id = "cmp-end" type = "month" / > < / label >
2026-07-11 03:17:17 +00:00
< span class = "hint" > Editing the range arms Refresh — tap it to reload.< / span >
2026-07-11 02:58:56 +00:00
< / div >
< / div >
< div id = "cmp-head" class = "cal-head" hidden > < / div >
< div class = "placeholder" id = "cmp-placeholder" >
< p > Add two or more places to see which one best matches your comfort temperature
across a date range — the share of days that land in your comfort band, how
often it runs colder or warmer, and by how much.< / p >
< / div >
Compare: diverging comfort bars, baseline strip, real loading state (#68)
Rework the compare results so the winner, the cold/warm skew, and the
places' baselines all read at a glance, and make loading obvious.
- Diverging comfort bar per place: colder days grow left of a fixed
centre comfort marker, warmer days grow right, both on one 0–100%
scale — a cold-skewed place and a hot-skewed one mirror each other and
compare directly. Replaces the left-anchored stacked bar + 3-up stat
grid (the grid was the main mobile-clutter source).
- Baseline strip above the cards: every place's average basis temp on
one shared °F axis with the comfort range shaded, plus a middle-80%
(p10–p90) spread, so baselines line up side by side. computeStats now
also returns avgTemp/p10/p90.
- Stronger winner: filled accent rank badge, accent card frame, and a
"Best match" flag on the subline.
- Real in-progress state: a CSS spinner ring on loading chips, a queued
dot on pending chips, an inline spinner in the header, and shimmering
skeleton cards for still-loading places (previously only muted text —
the referenced chip spinner never existed).
- Mobile: tighter baseline gutter/axis and caption sizing.
2026-07-11 23:49:00 +00:00
<!-- Baseline: every place's typical temperature on one shared axis, so their
baselines line up against each other and the shaded comfort range. -->
< section id = "cmp-baseline" class = "cmp-baseline" hidden > < / section >
2026-07-11 02:58:56 +00:00
< div id = "cmp-results" class = "cmp-results" > < / div >
2026-07-11 22:33:38 +00:00
<!-- Climate distribution, independent of the comfort filter: how each place's
days spread across a metric's Record-Low→Record-High categories, mirroring
the calendar's totals strip. Its own metric + share/count toggles. -->
< section id = "cmp-dist" class = "cmp-dist" hidden >
< div class = "ct-head" >
< div class = "cmp-dist-controls" >
< span class = "cal-filter-label" > Distribution by< / span >
< div class = "metric-toggle" id = "cmp-dist-metric" role = "group" aria-label = "Distribution metric" >
< 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 >
< label class = "ct-count-toggle" > < input type = "checkbox" id = "cmp-dist-count" / > Show count< / label >
< / div >
< div id = "cmp-dist-body" class = "cmp-dist-body" > < / div >
< / section >
2026-07-11 02:58:56 +00:00
< / 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 = "compare.js" > < / script >
2026-07-11 02:58:56 +00:00
< / body >
< / html >
