theoandClaude Sonnet 5
8e90eb1129
Tik op een dag in de verwachtingsstrook voor een uuroverzicht van
temperatuur, regen en wind (richting + snelheid), om de 2 uur, 12
punten per dag. Sluit na 20 seconden vanzelf of bij een tik op de
overlay zelf.
Backend: Open-Meteo levert hourly-data in dezelfde call als daily
(geen extra verzoek, dezelfde 60min-cache). Nieuwe HourlyForecastMapper
groepeert per kalenderdatum en bemonstert om het andere uur, robuust
voor de zomertijddag (23/25 uur). OpenMeteoClient::dailyForecast()
hernoemd naar forecast(), geeft nu {daily, hourly} terug. Elke dag in
de forecast-array krijgt een hourly-lijst.
Frontend: temperatuurlijn hergebruikt sparklinePath (nu ook als
sparklinePoints voor exacte uitlijning met de 12-koloms grid), regen
als kleine staafjes, windpijl (nieuw icoon) wijst waarheen de wind
waait. 20s-balk via CSS transition met reflow-restart. Servicewerker
naar v5.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
88 lines
3.5 KiB
HTML
88 lines
3.5 KiB
HTML
<!doctype html>
|
||
<html lang="nl">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
|
||
<title>Weerscherm</title>
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||
<meta name="apple-mobile-web-app-title" content="Weer">
|
||
<meta name="theme-color" content="#E8EDF1">
|
||
<link rel="manifest" href="manifest.webmanifest">
|
||
<link rel="apple-touch-icon" href="icons/icon-180.png">
|
||
<link rel="icon" href="icons/icon.svg" type="image/svg+xml">
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<div id="viewport">
|
||
<main id="stage" class="da" aria-live="polite">
|
||
<header class="a-top">
|
||
<span class="a-date" id="date"> </span>
|
||
<span class="a-right">
|
||
<span class="a-status" id="status" hidden></span>
|
||
<span class="a-upd" id="upd">meting –</span>
|
||
<span class="a-clock num" id="clock">–:–</span>
|
||
</span>
|
||
</header>
|
||
|
||
<section class="a-hero">
|
||
<p class="a-label">Buiten <span class="a-trend" id="trend"></span><span class="a-hum" id="out-hum"></span></p>
|
||
<p class="a-temp num" id="temp">–</p>
|
||
<div class="a-range">
|
||
<div class="a-track"><span class="a-mark" id="mark" style="left:50%"></span></div>
|
||
<div class="a-ends num">
|
||
<span><b class="cold" id="min">–</b><span id="min-at">laagst om –</span></span>
|
||
<span><b class="warm" id="max">–</b><span id="max-at">hoogst om –</span></span>
|
||
</div>
|
||
</div>
|
||
<div class="a-pressure">
|
||
<p class="a-plabel">Luchtdruk <b class="num" id="press">–</b><span class="a-trend" id="press-trend"></span><span class="a-prange num" id="press-range"></span></p>
|
||
<svg class="a-spark" viewBox="0 0 560 56" preserveAspectRatio="none" aria-hidden="true">
|
||
<line class="a-spark-base" x1="0" y1="55.5" x2="560" y2="55.5"/>
|
||
<path class="a-spark-line" id="press-path" d=""/>
|
||
</svg>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="a-inside" id="rooms"></section>
|
||
|
||
<section class="a-bottom">
|
||
<div>
|
||
<p class="a-sub">Regen</p>
|
||
<div class="a-rainrow">
|
||
<div>
|
||
<p class="a-rbig"><span class="num" id="rain-today">–</span> mm</p>
|
||
<p class="a-rsm">vandaag</p>
|
||
<p class="a-month"><span id="month-name">–</span><b class="num" id="month-total">–</b></p>
|
||
</div>
|
||
<div class="a-bars" id="bars"></div>
|
||
</div>
|
||
</div>
|
||
<div class="a-fc" id="forecast"></div>
|
||
</section>
|
||
|
||
<div class="banner" id="banner">Gegevens laden…</div>
|
||
|
||
<div class="hour-overlay" id="hour-overlay" hidden>
|
||
<div class="ho-bar"><i id="ho-bar-fill"></i></div>
|
||
<header class="ho-head">
|
||
<span class="ho-date" id="ho-date"></span>
|
||
<span class="ho-hint">tik om te sluiten</span>
|
||
</header>
|
||
<div class="ho-temp">
|
||
<svg class="ho-temp-svg" viewBox="0 0 1045 64" preserveAspectRatio="none" aria-hidden="true">
|
||
<path class="ho-temp-line" id="ho-temp-path" d=""/>
|
||
</svg>
|
||
<div class="ho-grid" id="ho-temp-nums"></div>
|
||
</div>
|
||
<div class="ho-grid ho-rain" id="ho-rain"></div>
|
||
<div class="ho-grid ho-wind" id="ho-wind"></div>
|
||
<div class="ho-grid ho-hours" id="ho-hours"></div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
<div id="rotate">Draai de iPad een kwartslag</div>
|
||
<script type="module" src="app.js"></script>
|
||
</body>
|
||
</html>
|