theoandClaude Opus 5
ca2fc76552
Er is een vierde binnenmodule bijgekomen. De kaart verscheen al vanzelf (StationMapper leest alle NAModule4-modules uit), maar de kolom was op drie kaarten ontworpen: vier kaarten van 120px duwden de rij op 481px en daarmee de onderste strook 39px voorbij de onderrand van het canvas. De kolom heeft nu een vaste hoogte van 412px met overflow verborgen, en fitRooms() verkleint de inhoud met een schaal zodra die niet past. Bij drie modules verandert er niets (schaal 1), bij vier wordt het 0,86 en met een vastgezette module 0,78. Zo blijft het scherm kloppen, ongeacht hoeveel modules erbij komen. De dev-fixture heeft er een vierde module bij, zodat dit lokaal te zien is zonder Netatmo-koppeling. Servicewerker naar v12. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
127 lines
5.1 KiB
HTML
127 lines
5.1 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>
|
||
<div class="a-temprow">
|
||
<p class="a-temp num" id="temp">–</p>
|
||
<div class="a-today" id="today-chart" hidden>
|
||
<p class="a-tcap">Vandaag</p>
|
||
<svg class="a-tspark" viewBox="0 0 200 96" preserveAspectRatio="none" aria-hidden="true">
|
||
<line class="a-spark-base" x1="0" y1="95.5" x2="200" y2="95.5"/>
|
||
<path class="a-spark-line" id="today-path" d=""/>
|
||
</svg>
|
||
<div class="a-px num" id="today-hours"></div>
|
||
</div>
|
||
</div>
|
||
<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"><div id="rooms"></div></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>
|