theoandClaude Opus 5
c542601d4e
Het regenblok linksonder opent een overlay met de geanimeerde regenradar van Buienradar (550x512, tijd in het beeld), naast de regencijfers die we al hebben: vandaag, de 3 vorige dagen en het maandtotaal. Sluit na 20 seconden of bij een tik, net als het uuroverzicht. Het beeld loopt via onze eigen /api/radar.php in plaats van een <img> rechtstreeks naar Buienradar: de spec wil alles lokaal geserveerd, de iPad praat zo nooit met een derde partij, we cachen 4 minuten (de radar ververst elke 5) en de servicewerker kan het laatste beeld offline bewaren. Bij een storing komt het laatst opgehaalde beeld terug; pas als er niets is, een nette melding in plaats van een leeg vlak. Bronvermelding staat in de overlay, zoals Buienradar vraagt. Verder: de overlay-machinerie (20s-timer, balk, sluiten) staat nu een keer in plaats van per overlay, Http kan optioneel redirects volgen (de beeld-API leidt door naar een CDN), en alle /api/-paden zijn in de servicewerker network-first met een cachesleutel zonder querystring. Servicewerker naar v7. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
109 lines
4.3 KiB
HTML
109 lines
4.3 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 id="rain-block">
|
||
<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="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>
|
||
|
||
<div class="overlay" id="radar-overlay" hidden>
|
||
<div class="ho-bar"><i id="ro-bar-fill"></i></div>
|
||
<header class="ho-head">
|
||
<span class="ho-date">Regen</span>
|
||
<span class="ho-hint">tik om te sluiten</span>
|
||
</header>
|
||
<div class="ro-body">
|
||
<div class="ro-map">
|
||
<p class="ro-status" id="ro-status">Radar laden…</p>
|
||
<img class="ro-img" id="ro-img" alt="Regenradar" hidden>
|
||
</div>
|
||
<div class="ro-side">
|
||
<p class="ro-big"><span class="num" id="ro-today">–</span> mm</p>
|
||
<p class="ro-sub">vandaag</p>
|
||
<div class="ro-days" id="ro-days"></div>
|
||
<p class="ro-month num" id="ro-month">–</p>
|
||
<p class="ro-source">bron: Buienradar.nl</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
<div id="rotate">Draai de iPad een kwartslag</div>
|
||
<script type="module" src="app.js"></script>
|
||
</body>
|
||
</html>
|