de02ebcf19
- Compare: move the "Judge each day by its" basis toggle out of the filter sheet into the inline comfort card above the results (a scoring control, like the comfort slider). Handler is id-based, so no JS change for the move. - Metric selector is duplicated, not relocated: revert the sheetOnly relocation in filtersheet.js; keep the inline selector visible on all viewports and add a synced copy inside each page's filter sheet (mobile-only via CSS). The sheet copy clones the inline buttons; a single setter (setDistMetric / setColorMetric) drives the shared state and reflects the active metric on both, so picking any of the 8 metrics in either selector syncs the other and re-renders. Applies to compare's "Distribution by" and calendar's "Color the calendar by". Frontend-only; no backend or payload change.
104 lines
5 KiB
HTML
104 lines
5 KiB
HTML
<!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>
|
|
<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" />
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<header class="compact">
|
|
<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>
|
|
<a href="compare" data-view="compare">Compare</a>
|
|
</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>
|
|
<!-- 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>
|
|
</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>
|
|
<script type="module" src="calendar.js"></script>
|
|
</body>
|
|
</html>
|