theoandClaude Opus 5
107978b265
In de lege ruimte rechts van de grote buitentemperatuur staat nu het
verloop van vandaag: onderschrift "Vandaag", de lijn, en tijdlabels op
hele uren met "nu" rechts. Geen y-as, want de laagste en hoogste waarde
van vandaag staan al onder de balk en dat is precies de schaal.
Het getal en het grafiekje staan in een flexrij, zodat het grafiekje de
resterende ruimte pakt en meebeweegt als het getal smaller of breder
wordt. Vlak na middernacht zijn er nog geen twee meetpunten; dan blijft
het blokje verborgen in plaats van een leeg kader te tonen.
Data uit een extra getmeasure (scale=30min, type=Temperature, op de
buitenmodule) vanaf middernacht lokale tijd, cache 15 minuten, in de
payload als outdoor_history: {points, stale} zodat een storing daar de
rest niet raakt. PressureHistory is generiek gemaakt tot MeasureSeries
met de naam van het waardeveld als parameter, in plaats van er een bijna
identieke tweede klasse naast te zetten. StationMapper geeft nu ook het
id van de buitenmodule door.
Onderweg gevonden: FixtureSource deed een modulo op een float, wat een
PHP-deprecation vóór de JSON in de response zette. Dat verklaart de
kapotte JSON die eerder in de browserconsole langskwam. Opgelost met
intdiv. Servicewerker naar v10.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
251 lines
11 KiB
CSS
251 lines
11 KiB
CSS
/* Weerscherm, ontwerp A. Vast canvas van 1133 × 744 dat via JS geschaald en gecentreerd wordt. */
|
||
|
||
:root {
|
||
--bg: #E8EDF1;
|
||
--ink: #1B2A35;
|
||
--muted: #5F707C;
|
||
--line: #C6D0D8;
|
||
--warm: #B8761C;
|
||
--cold: #3A75A3;
|
||
--rain: #2E6A99;
|
||
--sun: #D39A2C;
|
||
--good: #4E8F5A;
|
||
--bad: #B5433B;
|
||
--iconfill: #E8EDF1;
|
||
--w: 1133px;
|
||
--h: 744px;
|
||
}
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
html, body {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
background: var(--bg);
|
||
color: var(--ink);
|
||
font-family: -apple-system, "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
|
||
font-variant-numeric: tabular-nums;
|
||
-webkit-text-size-adjust: none;
|
||
-webkit-user-select: none;
|
||
user-select: none;
|
||
-webkit-touch-callout: none;
|
||
}
|
||
|
||
[hidden] { display: none !important; }
|
||
|
||
#viewport {
|
||
position: fixed;
|
||
top: env(safe-area-inset-top, 0px);
|
||
right: env(safe-area-inset-right, 0px);
|
||
bottom: env(safe-area-inset-bottom, 0px);
|
||
left: env(safe-area-inset-left, 0px);
|
||
overflow: hidden;
|
||
}
|
||
|
||
#stage {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: var(--w);
|
||
height: var(--h);
|
||
transform-origin: top left;
|
||
display: grid;
|
||
padding: 30px 44px;
|
||
grid-template-columns: 1fr 330px;
|
||
grid-template-rows: 40px 1fr 232px;
|
||
column-gap: 56px;
|
||
background: var(--bg);
|
||
}
|
||
|
||
.num { font-variant-numeric: tabular-nums; }
|
||
.cold { color: var(--cold); }
|
||
.warm { color: var(--warm); }
|
||
.muted { color: var(--muted); }
|
||
|
||
.ic, .wind-ic { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; width: 100%; height: 100%; display: block; }
|
||
.i-sun { stroke: var(--sun); }
|
||
.i-drop { stroke: var(--rain); }
|
||
.i-cloud { fill: var(--iconfill); }
|
||
|
||
/* Kopregel */
|
||
.a-top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; }
|
||
.a-date { font-size: 22px; font-weight: 500; }
|
||
.a-right { display: flex; gap: 18px; align-items: baseline; }
|
||
.a-status { font-size: 15px; color: var(--warm); }
|
||
.a-upd { font-size: 15px; color: var(--muted); }
|
||
.a-upd.stale { color: var(--warm); }
|
||
.a-clock { font-size: 26px; font-weight: 300; }
|
||
|
||
/* Buiten */
|
||
.a-hero { align-self: center; }
|
||
.a-label { font-size: 22px; color: var(--muted); font-weight: 500; display: flex; gap: 14px; align-items: baseline; }
|
||
.a-trend { font-size: 17px; font-weight: 400; }
|
||
.a-temprow { display: flex; align-items: center; gap: 28px; margin: 4px 0 10px 0; }
|
||
.a-temp { font-size: 200px; font-weight: 200; letter-spacing: -.045em; line-height: .95; margin-left: -8px; }
|
||
|
||
/* Temperatuurverloop van vandaag, in de ruimte rechts van het grote getal */
|
||
.a-today { flex: 1; min-width: 0; }
|
||
.a-today[hidden] { display: none; }
|
||
.a-tcap { font-size: 15px; color: var(--muted); margin-bottom: 4px; }
|
||
.a-tspark { display: block; width: 100%; height: 96px; overflow: visible; }
|
||
.a-hum { font-size: 17px; font-weight: 400; }
|
||
.a-hum:not(:empty)::before { content: "·"; margin-right: 14px; }
|
||
.a-range { width: 560px; }
|
||
.a-track { position: relative; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--cold), var(--warm)); }
|
||
.a-mark { position: absolute; top: 50%; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); border: 5px solid var(--ink); transform: translate(-50%, -50%); transition: left .6s ease; }
|
||
.a-ends { display: flex; justify-content: space-between; margin-top: 14px; font-size: 17px; color: var(--muted); }
|
||
.a-ends b { font-size: 24px; font-weight: 600; margin-right: 6px; }
|
||
|
||
/* Luchtdruk, 24 uur. Grafiek met een y-as (hoogste/laagste waarde) en tijdlabels op de x-as. */
|
||
.a-pressure { width: 560px; margin-top: 14px; }
|
||
.a-plabel { font-size: 17px; color: var(--muted); display: flex; gap: 12px; align-items: baseline; margin-bottom: 6px; }
|
||
.a-plabel b { font-size: 20px; font-weight: 600; color: var(--ink); }
|
||
.a-pgrid { display: grid; grid-template-columns: 44px 1fr; column-gap: 8px; row-gap: 3px; }
|
||
.a-py { display: flex; flex-direction: column; justify-content: space-between; text-align: right; font-size: 13px; color: var(--muted); line-height: 1; padding: 1px 0; }
|
||
.a-px { position: relative; height: 17px; font-size: 13px; color: var(--muted); }
|
||
.a-px span { position: absolute; top: 0; white-space: nowrap; }
|
||
.a-spark { display: block; width: 100%; height: 56px; overflow: visible; }
|
||
.a-spark-base { stroke: var(--line); stroke-width: 1; }
|
||
.a-spark-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .6; }
|
||
.a-spark-line { fill: none; stroke: var(--rain); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
|
||
|
||
/* Binnen */
|
||
.a-inside { align-self: center; }
|
||
.a-room { padding: 12px 0; border-top: 1px solid var(--line); }
|
||
.a-room:first-child { border-top: 0; }
|
||
.a-rname { font-size: 19px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
|
||
.pill { display: inline-block; font-size: 13px; font-weight: 600; line-height: 1; padding: 5px 10px; border-radius: 999px; color: #fff; background: var(--muted); letter-spacing: .01em; white-space: nowrap; }
|
||
.pill.good { background: var(--good); }
|
||
.pill.medium { background: var(--warm); }
|
||
.pill.bad { background: var(--bad); }
|
||
.pill.unknown { background: var(--line); color: var(--muted); }
|
||
.a-rtemp { font-size: 50px; font-weight: 300; line-height: 1.05; transition: font-size .25s ease; }
|
||
.a-room.off .a-rtemp { color: var(--muted); }
|
||
.a-room.pinned .a-rtemp { font-size: 92px; }
|
||
.a-rmm { font-size: 17px; display: flex; gap: 18px; }
|
||
.a-rmm .rv { color: var(--muted); }
|
||
|
||
/* Onderste strook */
|
||
.a-bottom { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 22px; display: grid; grid-template-columns: 390px 1fr; column-gap: 36px; }
|
||
.a-sub { font-size: 19px; color: var(--muted); font-weight: 500; margin-bottom: 10px; }
|
||
.a-rainrow { display: flex; justify-content: space-between; align-items: flex-end; }
|
||
.a-rbig { font-size: 22px; color: var(--rain); }
|
||
.a-rbig span { font-size: 60px; font-weight: 300; line-height: 1; }
|
||
.a-rsm { font-size: 17px; color: var(--muted); }
|
||
.a-month { font-size: 17px; margin-top: 18px; color: var(--muted); white-space: nowrap; }
|
||
.a-month b { color: var(--ink); font-weight: 600; font-size: 20px; margin-left: 4px; }
|
||
.a-bars { display: flex; gap: 6px; align-items: flex-end; }
|
||
.a-bar { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 14px; color: var(--muted); min-width: 38px; }
|
||
.a-bar i { display: block; width: 24px; border-radius: 4px 4px 0 0; background: var(--rain); opacity: .4; transition: height .6s ease; }
|
||
.a-bar.now i { opacity: 1; }
|
||
.a-bar.now span { color: var(--ink); font-weight: 600; }
|
||
|
||
/* Verwachting */
|
||
.a-fc { display: grid; grid-template-columns: repeat(6, 1fr); text-align: center; }
|
||
.a-day { display: flex; flex-direction: column; align-items: center; gap: 6px; border-left: 1px solid var(--line); }
|
||
.a-day:first-child { border-left: 0; }
|
||
.a-dname { font-size: 19px; font-weight: 600; }
|
||
.a-icon { width: 50px; height: 50px; }
|
||
.a-hl { font-size: 28px; font-weight: 500; }
|
||
.a-hl span { font-size: 22px; color: var(--muted); font-weight: 400; margin-left: 6px; }
|
||
.a-fr { font-size: 16px; color: var(--rain); }
|
||
.a-fr span { color: var(--muted); margin-left: 6px; }
|
||
|
||
/* Meldingen */
|
||
.banner {
|
||
position: absolute;
|
||
left: 44px;
|
||
right: 44px;
|
||
top: 86px;
|
||
height: 396px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
padding: 40px 60px;
|
||
font-size: 30px;
|
||
line-height: 1.4;
|
||
color: var(--ink);
|
||
background: var(--bg);
|
||
border: 1px solid var(--line);
|
||
border-radius: 18px;
|
||
z-index: 2;
|
||
}
|
||
.banner small { display: block; margin-top: 16px; font-size: 20px; color: var(--muted); }
|
||
|
||
/* Overlays (uuroverzicht, regenradar): tik om te openen, tik erop of wacht 20s om te sluiten.
|
||
De .ho-*-chrome (balk, kop) wordt door beide overlays gedeeld. */
|
||
.overlay {
|
||
position: absolute;
|
||
left: 44px;
|
||
right: 44px;
|
||
top: 40px;
|
||
bottom: 40px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 22px;
|
||
padding: 26px 0 22px;
|
||
background: var(--bg);
|
||
border: 1px solid var(--line);
|
||
border-radius: 18px;
|
||
box-shadow: 0 12px 32px rgba(27, 42, 53, .12);
|
||
z-index: 5;
|
||
}
|
||
.overlay[hidden] { display: none; }
|
||
|
||
.ho-bar { margin: 0 30px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
|
||
.ho-bar i { display: block; width: 100%; height: 100%; background: var(--rain); transform-origin: left; }
|
||
|
||
.ho-head { margin: 0 30px; display: flex; justify-content: space-between; align-items: baseline; }
|
||
.ho-date { font-size: 22px; font-weight: 500; }
|
||
.ho-hint { font-size: 16px; color: var(--muted); }
|
||
|
||
.ho-grid { display: grid; grid-template-columns: repeat(12, 1fr); text-align: center; }
|
||
|
||
.ho-temp { display: flex; flex-direction: column; gap: 6px; }
|
||
#ho-temp-nums .num { font-size: 22px; font-weight: 500; }
|
||
.ho-temp-svg { display: block; width: 100%; height: 64px; }
|
||
.ho-temp-line { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
|
||
|
||
.ho-rain .ho-rbar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 66px; }
|
||
.ho-rbar i { display: block; width: 14px; border-radius: 3px 3px 0 0; background: var(--rain); opacity: .55; }
|
||
.ho-rbar .num { font-size: 14px; color: var(--muted); }
|
||
|
||
.ho-wind .ho-wcell { display: flex; flex-direction: column; align-items: center; gap: 6px; }
|
||
.ho-warrow { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: var(--muted); }
|
||
.ho-warrow.off { font-size: 18px; }
|
||
.ho-wcell .num { font-size: 15px; color: var(--muted); }
|
||
|
||
.ho-hours span { font-size: 16px; color: var(--muted); }
|
||
|
||
/* Regenradar */
|
||
.ro-body { display: flex; gap: 56px; margin: 0 30px; min-height: 0; }
|
||
.ro-map { display: flex; align-items: center; justify-content: center; width: 560px; flex: none; }
|
||
.ro-img { height: 512px; width: auto; display: block; border-radius: 10px; }
|
||
.ro-status { font-size: 22px; color: var(--muted); }
|
||
|
||
.ro-side { display: flex; flex-direction: column; justify-content: center; }
|
||
.ro-big { font-size: 26px; color: var(--rain); }
|
||
.ro-big span { font-size: 76px; font-weight: 300; line-height: 1; }
|
||
.ro-sub { font-size: 19px; color: var(--muted); margin-bottom: 26px; }
|
||
.ro-days p { display: flex; justify-content: space-between; width: 260px; font-size: 21px; color: var(--muted); padding: 7px 0; border-top: 1px solid var(--line); }
|
||
.ro-days b { color: var(--ink); font-weight: 600; }
|
||
.ro-month { width: 260px; font-size: 19px; color: var(--muted); margin-top: 18px; }
|
||
.ro-source { font-size: 15px; color: var(--muted); margin-top: auto; padding-top: 22px; }
|
||
|
||
#rotate {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0; right: 0; bottom: 0; left: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30px;
|
||
color: var(--muted);
|
||
background: var(--bg);
|
||
z-index: 10;
|
||
}
|
||
@media (orientation: portrait) {
|
||
#rotate { display: flex; }
|
||
}
|