Add plain-language summary + umbrella tip for today

Neither Met Office's Global Spot API nor Open-Meteo return a narrative text
summary -- both are purely numeric/coded. New lib/summary.js derives one
rule-based from today's already-fetched hourly points (icon + precip_prob),
no extra API call, no LLM:
- Headline: "Scattered showers today", "Rain likely later", "Heavy rain
  today", "Dry today", etc. -- compares rain distribution across the whole
  day vs specifically the hours still ahead of "now".
- Note: "Thunderstorms possible", appended when a thunder icon shows up.
- Umbrella nudge: shown when there's a real rain chance now or later today.

Computed fresh per-request (not cached at fetch time), since "later" means
later than whoever's looking at the screen right now, not later than the
last hourly refresh.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-08-25 13:03:24 +00:00
parent 3beac76ae6
commit 435b59b3fe
5 changed files with 114 additions and 4 deletions

View file

@ -73,10 +73,27 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
.wx-now {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: clamp(10px, 1.8vw, 24px);
}
.wx-now-temp { font-size: clamp(2.4rem, 5.5vw, 4.6rem); font-weight: 700; line-height: 1; }
.wx-now-meta { display: flex; flex-direction: column; gap: 4px; color: var(--text-muted); font-size: clamp(0.8rem, 1.05vw, 1.05rem); }
.wx-summary-headline { color: var(--text); font-weight: 600; font-size: clamp(0.95rem, 1.3vw, 1.3rem); }
.wx-summary-note { color: #fbbf24; }
.wx-umbrella-tip {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: auto;
padding: clamp(6px, 0.9vh, 10px) clamp(12px, 1.4vw, 18px);
border-radius: 999px;
background: rgba(125, 211, 252, 0.14);
border: 1px solid rgba(125, 211, 252, 0.35);
color: #7dd3fc;
font-weight: 600;
font-size: clamp(0.75rem, 0.95vw, 0.95rem);
white-space: nowrap;
}
.wx-section-label {
font-size: clamp(0.7rem, 0.95vw, 0.9rem);