feat: uuroverzicht per dag (temperatuur, regen, wind)
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>
This commit is contained in:
@@ -62,6 +62,23 @@
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user