source: Klonkt/src/assets/css/ward.css@ 303bfc4

Last change on this file since 303bfc4 was 303bfc4, checked in by Robin <roboburr@…>, 3 months ago

De Ward PWA: het vangnet vanuit het kind gezien

Klonkt had /guardian, de kant van de volwassene. Dit is dezelfde relatie
vanaf de andere kant: wie waakt er over mij, is dat vangnet heel, en wat
ligt er bij hen te wachten. Shaer doet dit als native app; dit is het in
de browser, voor wie geen app kan of wil installeren.

Plak 1 is bewust HET VANGNET en niet de sociale kant. De feed en de
composer staan al op de gewone Klonkt-site; die dubbelen we niet zomaar.
Wat Shaer uniek toevoegt voor een ward is juist het guardianship-deel.

Drie keuzes die er toe doen. De hulpknop staat bovenaan en vol breed: als
je hem nodig hebt moet je niet hoeven zoeken. De par. 4-controle zit in
een eigen endpoint omdat hij per guardian een remote fetch kost, dus de
pagina tekent eerst en vult daarna aan; een trage guardian-server mag het
scherm van een kind niet ophouden. En dezelfde drieslag als in de apps:
misvormd is oranje, onbereikbaar is grijs, in orde is stil. Onbereikbaar
is geen goedkeuring, maar ook geen alarm.

New file:
src/routes/ward.js

  • pagina, /api/state, /api/guardian-checks, assets, manifest, icoon

src/views/pages/ward.ejs

  • schil; begintoestand als JSON mee, geen inline script (CSP)

src/assets/js/ward.js

  • tekent guardians, aanvragen en wachtende follows

src/assets/css/ward.css

  • donker, grote raakzones

test/ward-pwa.test.js

  • de poort (een vreemde komt er niet in) en de inhoud

Changed files:
src/server.js

  • /ward gemonteerd

src/services/i18n.js

  • ward-sleutels in nl, en, de

remarks: 886 tests groen. De hulpknop en het accepteren van aanvragen
doen nog niets; dat is de volgende plak.

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>
  • Property mode set to 100644
File size: 2.0 KB
RevLine 
[303bfc4]1/* De Ward PWA: rustig, groot genoeg voor een kind, donker als de rest. */
2:root {
3 --bg: #141a24;
4 --card: #1c2431;
5 --ink: #eef2f8;
6 --dim: #9aa7bb;
7 --accent: #5a32e6;
8 --alarm: #ef9f27;
9 --ok: #46c26a;
10}
11* { box-sizing: border-box; }
12body {
13 margin: 0; padding: 16px calc(16px + env(safe-area-inset-right)) 32px calc(16px + env(safe-area-inset-left));
14 background: var(--bg); color: var(--ink);
15 font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
16}
17h1 { font-size: 1.4rem; margin: 8px 0 20px; }
18h2 { font-size: 1rem; margin: 24px 0 10px; color: var(--dim); font-weight: 600; }
19
20/* De hulpknop is het belangrijkste element op deze pagina en ziet er ook zo
21 uit: vol breed, grote raakzone, geen concurrentie eromheen. */
22.help button {
23 width: 100%; padding: 18px; border: 0; border-radius: 14px;
24 background: var(--accent); color: #fff; font-size: 1.1rem; font-weight: 600;
25}
26.help button:disabled { background: #3a3f4d; color: var(--dim); }
27.help .hint { margin: 8px 2px 0; color: var(--dim); font-size: .85rem; }
28
29.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
30.card { background: var(--card); border-radius: 12px; padding: 12px 14px; }
31.row { display: flex; align-items: center; gap: 10px; }
32.name { font-weight: 600; margin: 0; }
33.hint { color: var(--dim); font-size: .85rem; margin: 6px 0 0; }
34.empty { color: var(--dim); }
35
36.chip { margin-left: auto; font-size: .75rem; padding: 3px 9px; border-radius: 999px; background: #2a3342; color: var(--dim); }
37.chip.ok { background: rgba(70,194,106,.16); color: var(--ok); }
38.chip.away { background: rgba(239,159,39,.16); color: var(--alarm); }
39
40/* Misvormd krijgt de alarmkleur, onbereikbaar bewust NIET: niet-weten is geen
41 misconfiguratie. Maar het is ook geen goedkeuring, dus het staat er wel. */
42.note { margin: 8px 0 0; font-size: .85rem; padding: 6px 9px; border-radius: 8px; }
43.note.alarm { background: rgba(239,159,39,.16); color: var(--alarm); }
44.note.unknown { background: rgba(154,167,187,.14); color: var(--dim); }
Note: See TracBrowser for help on using the repository browser.