theoandClaude Opus 5
c0715b7cc9
De lijn had geen schaal, dus je kon niet zien hoeveel hPa de uitslag was of wanneer een dip viel. Nu links de hoogste en laagste waarde van het venster in hele hPa, uitgelijnd op boven- en onderkant van de lijn, en eronder vijf tijdlabels (0/25/50/75/100% van het venster) met "nu" rechts, ondersteund door drie lichte verticale hulplijnen. Posities komen uit de pure functie axisMarks(), met tests. De losse tekst "1009 – 1015 hPa in 24 u" in de kopregel vervalt: de y-as zegt hetzelfde en de x-as maakt het venster duidelijk. De extra labelrij past door de marge onder de grote temperatuur 8px te krappen; er blijft 5px speling boven en onder de hero. Servicewerker naar v8. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
117 lines
4.6 KiB
HTML
117 lines
4.6 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></p>
|
||
<div class="a-pgrid">
|
||
<div class="a-py num"><span id="press-max">–</span><span id="press-min">–</span></div>
|
||
<svg class="a-spark" viewBox="0 0 560 56" preserveAspectRatio="none" aria-hidden="true">
|
||
<line class="a-spark-grid" x1="140" y1="0" x2="140" y2="56"/>
|
||
<line class="a-spark-grid" x1="280" y1="0" x2="280" y2="56"/>
|
||
<line class="a-spark-grid" x1="420" y1="0" x2="420" y2="56"/>
|
||
<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></div>
|
||
<div class="a-px num" id="press-hours"></div>
|
||
</div>
|
||
</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>
|