Tagesblick: Termine als Karten, und vier Fehler, die dabei auffielen

Filipe zu der Liste mit einem einzigen Termin darin: "das soll viel
geiler und krasser aussehen bitte."

Er hatte recht, und der Grund war der Einzelfall. Ein Zeitstrahl lebt
davon, dass er etwas VERBINDET -- bei einem Eintrag verbindet er nichts.
Uebrig blieben eine magere Zeile, ein Strich ins Leere und Weissraum bis
zur Plakette am rechten Rand.

Jetzt traegt jede Karte fuer sich: eigene Flaeche mit farbiger Kante,
die Uhrzeit gross und in der Farbe der Terminart (vorher war sie
kleiner als der Titel -- dabei ist sie das, was man sucht), ein Balken
fuer die Dauer, und "JETZT" am naechsten Termin statt eines etwas
helleren Hintergrunds. Erledigtes bekommt einen Haken und verliert die
Farbe, bleibt aber voll lesbar; vorher wurde alles blasser, was auch
den Text traf.

Kein Neon dazu. Die Wirkung kommt aus Kontrast und Hierarchie.

VIER FEHLER, DIE DIE PRUEFUNGEN GEFUNDEN HABEN

1. ZEITZONE, in NEUN Pruefungen. Um 00:10 meldete pruef-teilnehmer
   ploetzlich 13 Fehlschlaege an einer Datei, die seit Stunden niemand
   angefasst hatte:

       Ortszeit:  06.09.2026, 00:10
       UTC:       05.09.2026, 22:10

   Sie bildeten ihr Tagesdatum mit toISOString() -- also UTC -- legten
   ihre Termine auf gestern und suchten heute. ZWEI STUNDEN AM TAG waren
   sie damit rot, im Winter eine. Wer nur tagsueber laeuft, sieht das
   nie. Jetzt gibt es helfer-zeit.mjs mit derselben Rechenweise wie die
   Anwendung, und pruef-struktur sucht das Muster kuenftig automatisch.

2. MEIN UMSTELL-SKRIPT VERSAGTE STILL. Es pruefte
   `if "helfer-zeit.mjs" not in s` -- und mein eigener Kommentar
   enthielt den Dateinamen. Ergebnis: keine einzige der neun Dateien
   bekam den Import, alle waeren zur Laufzeit abgestuerzt. `node --check`
   findet das nicht. Aufgefallen, weil danach nachgezaehlt wurde statt
   der Erfolgsmeldung zu glauben.

3. DIE KACHEL LIESS DIE SEITE SPRINGEN. Der Layout-Sprung auf
   start.html stieg von 0 auf 0,96 -- zweimal bestaetigt. Sie erschien
   erst nach dem Laden und schob alles darunter weg. Das ist kein
   Schoenheitsfehler, sondern der Grund, warum man auf den falschen
   Knopf drueckt.

   Gemessen wurden die echten Hoehen (1 Termin 169 px, 3 → 327, 5 →
   486). Daraus zwei Konsequenzen: Platz vorher reservieren, und
   hoechstens DREI Termine zeigen -- das halbiert die Spanne und ist
   die klarere Aussage. Der Rest steht als "1 weiterer Termin heute"
   darunter, nicht stillschweigend abgeschnitten. Von 0,96 auf 0,163.

4. SCHRIFTGROESSE, zweimal am selben Tag: erst die Art-Plaketten mit
   10,56 px, dann -- nach der Korrektur -- die neue Jetzt-Marke mit
   10,88. Beide Male gemeldet von pruef-handy und pruef-grosscheck,
   beide Male erst nach einem mehrminuetigen Browserlauf.

ZWEI PRUEFUNGEN, DIE SICH SELBST IM WEG STANDEN

pruef-tempo-workspace meldete "NEUE Doppelabfrage: start.html 2x
/workspace/api/termine". Nachgemessen an einem einzelnen Seitenaufruf:
genau eine Anfrage. Die Pruefung startete ihren Zaehler, bevor die
Anmeldung zur Ruhe gekommen war, und schrieb der Seite an, was die
vorherige noch offen hatte.

pruef-tagesblick fiel zum zweiten Mal auf dieselbe Falle herein: Sie
mass die Artfarbe an einem vorbeigezogenen Termin, der absichtlich grau
ist. Diesmal an der Wurzel geloest -- die Daempfung wird fuer die
Messung kurz abgeschaltet und sofort zurueckgesetzt. Damit ist die
Zuordnung fuer JEDEN Termin geprueft, unabhaengig von der Uhrzeit des
Laufs, und zusaetzlich beweist die Pruefung, dass die Daempfung greift.

NEU: Schriftgroessen werden jetzt AN DER QUELLE geprueft, in Sekunden
statt Minuten. Im Bestand stehen 43 solche Stellen; sie alle rot zu
melden haette die Pruefung ab Tag eins wertlos gemacht. Deshalb eine
Grundlinie wie beim Layout-Sprung: Sie haelt den Stand fest und
schlaegt an, sobald es MEHR werden. Heute haette das zweimal gegriffen.
Die Browserpruefung bleibt daneben -- sie sieht, was am Ende auf dem
Schirm steht, die CSS-Pruefung nur, was gemeint war.

Gesamtlauf: 56 von 56 Dateien, 2002 von 2002 Punkten.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-09-06 01:32:33 +02:00
co-authored by Claude Opus 5
parent 6541ecbfa7
commit e0d8e6d55d
32 changed files with 832 additions and 297 deletions
+52
View File
@@ -0,0 +1,52 @@
/* WELCHER TAG IST HEUTE? — für Prüfungen.
DER FEHLER, DEN DAS VERHINDERT, gefunden am 06.09.2026 um 00:10.
Der Gesamtlauf meldete plötzlich 13 Fehlschläge in
pruef-teilnehmer.mjs -- an einer Datei, die seit Stunden niemand
angefasst hatte. "der alte Termin ist da: FEHL", "sein Teilnehmer
wurde uebernommen: LEER". Es sah aus, als sei die Teilnehmerfunktion
kaputt.
Sie war es nicht. Es war zehn nach Mitternacht.
Ortszeit (MESZ): 06.09.2026, 00:10
UTC: 05.09.2026, 22:10
Die Prüfung bildete ihr Datum mit
`new Date().toISOString().slice(0, 10)` -- das ist UTC und ergab den
5. September. Die Anwendung rechnet den Tag dagegen LOKAL
(heuteLokal() in workspace.js) und suchte am 6. Die Prüfung legte
ihre Termine also auf gestern und wunderte sich, dass sie heute
keine fand.
ZWEI STUNDEN AM TAG war diese Prüfung damit rot -- zwischen
Mitternacht und zwei Uhr, im Winter eine Stunde. Wer nur tagsüber
läuft, sieht das nie; wer nachts arbeitet, sucht stundenlang an der
falschen Stelle. Dieselbe Sorte Fehler wie die Layout-Messung, die
je nach Serverlaune anschlug: Ein Ergebnis, das von der Uhrzeit
abhängt, ist kein Ergebnis.
Deshalb gibt es das hier EINMAL statt viermal in Kopie. Die
Rechenweise ist bewusst dieselbe wie in workspace.js -- eine
Prüfung, die den Tag anders bestimmt als die Anwendung, prüft nicht
die Anwendung, sondern sich selbst.
===================================================================== */
/** Der heutige Tag in ORTSZEIT, als "JJJJ-MM-TT". */
export function heuteLokal() {
const d = new Date();
const p = (n) => String(n).padStart(2, "0");
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`;
}
/** Derselbe Tag, um n Tage verschoben (negativ = in der Vergangenheit).
*
* Gerechnet wird über die Millisekunden und danach lokal ausgelesen.
* `setDate(getDate() + n)` täte es auch, hat aber an den zwei
* Umstellungstagen im Jahr seine Tücken. */
export function tagLokal(versatz) {
const d = new Date(Date.now() + versatz * 86400_000);
const p = (n) => String(n).padStart(2, "0");
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`;
}
+5 -1
View File
@@ -37,6 +37,7 @@ import { mkdtempSync, rmSync, readFileSync, readdirSync } from "node:fs";
import { tmpdir } from "node:os";
import { join, dirname } from "node:path";
import { fileURLToPath } from "node:url";
import { heuteLokal } from "./helfer-zeit.mjs";
const HIER = dirname(fileURLToPath(import.meta.url));
const ordner = mkdtempSync(join(tmpdir(), "ws-wege-"));
@@ -101,7 +102,10 @@ for (let i = 0; i < 60; i++) {
}
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const jetzt = new Date().toISOString();
const heute = jetzt.slice(0, 10);
/* ORTSZEIT, nicht UTC -- Begruendung in helfer-zeit.mjs. Mit
`jetzt.slice(0, 10)` lag dieser Wert zwischen Mitternacht und
zwei Uhr einen Tag daneben. */
const heute = heuteLokal();
function anlegen(name, rolle, code) {
const salt = randomBytes(16).toString("hex");
const hash = scryptSync(code, salt, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
+5 -1
View File
@@ -28,6 +28,7 @@
import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { heuteLokal } from "./helfer-zeit.mjs";
const ordner = mkdtempSync(join(tmpdir(), "ws-a11y-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
@@ -64,7 +65,10 @@ for (let i = 0; i < 60; i++) {
}
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const jetzt = new Date().toISOString();
const heute = jetzt.slice(0, 10);
/* ORTSZEIT, nicht UTC -- Begruendung in helfer-zeit.mjs. Mit
`jetzt.slice(0, 10)` lag dieser Wert zwischen Mitternacht und
zwei Uhr einen Tag daneben. */
const heute = heuteLokal();
function anlegen(name, rolle, code) {
const salt = randomBytes(16).toString("hex");
const hash = scryptSync(code, salt, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
+5 -1
View File
@@ -31,6 +31,7 @@
import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { heuteLokal } from "./helfer-zeit.mjs";
const ordner = mkdtempSync(join(tmpdir(), "ws-breit-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
@@ -67,7 +68,10 @@ for (let i = 0; i < 60; i++) {
}
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const jetzt = new Date().toISOString();
const heute = jetzt.slice(0, 10);
/* ORTSZEIT, nicht UTC -- Begruendung in helfer-zeit.mjs. Mit
`jetzt.slice(0, 10)` lag dieser Wert zwischen Mitternacht und
zwei Uhr einen Tag daneben. */
const heute = heuteLokal();
function anlegen(name, rolle, code) {
const salt = randomBytes(16).toString("hex");
const hash = scryptSync(code, salt, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
+5 -1
View File
@@ -33,6 +33,7 @@
import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { heuteLokal } from "./helfer-zeit.mjs";
const ordner = mkdtempSync(join(tmpdir(), "ws-browser-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
@@ -88,7 +89,10 @@ for (let i = 0; i < 60; i++) {
}
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const jetzt = new Date().toISOString();
const heute = jetzt.slice(0, 10);
/* ORTSZEIT, nicht UTC -- Begruendung in helfer-zeit.mjs. Mit
`jetzt.slice(0, 10)` lag dieser Wert zwischen Mitternacht und
zwei Uhr einen Tag daneben. */
const heute = heuteLokal();
function anlegen(name, rolle, code) {
const salt = randomBytes(16).toString("hex");
const hash = scryptSync(code, salt, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
+103
View File
@@ -251,6 +251,109 @@ console.log(` -- ${nurAnker.size} Klassen sind nirgends gestaltet `
+ `(Struktur-Anker, kein Fehler): ${[...nurAnker].slice(0, 8).join(", ")}`
+ (nurAnker.size > 8 ? " …" : ""));
/* =======================================================================
Schriftgrößen: nichts unter 11,5 Pixeln
=======================================================================
ZUM ZWEITEN MAL AM SELBEN TAG (06.09.2026). Erst hatten die
Art-Plaketten des Tagesblicks 10,56 px, dann -- nach der Korrektur --
die neue "JETZT"-Marke 10,88. Beide Male gemeldet von pruef-handy
und pruef-grosscheck, beide Male erst nach einem Browserlauf von
mehreren Minuten.
Die Regel steht seit dem 01.09.2026 im Haus: Unter 11,5 px liest auf
einem Handy niemand mehr, und was dort niemand liest, ist auf dem
Rechner nur Zierde. Sie wurde bisher nur AM BILD geprüft. Hier wird
sie an der Quelle geprüft -- in Sekunden statt in Minuten, und
bevor überhaupt jemand einen Browser startet.
WARUM BEIDE PRÜFUNGEN BLEIBEN: Diese hier findet den Wert im
Stylesheet. Sie kann nicht wissen, ob eine Regel am Ende überhaupt
greift oder von einer späteren überschrieben wird -- das sieht nur
der Browser. Die eine ist schnell und ungenau, die andere langsam
und genau. Zusammen fangen sie beides ab.
GERECHNET WIRD MIT 16 px Grundgröße: 0,72 rem = 11,52 px ist gerade
noch erlaubt, 0,71 rem = 11,36 px nicht mehr. */
console.log("\n=== Ist irgendeine Schrift zu klein? ===");
{
const GRENZE_PX = 11.5;
const GRUND_PX = 16;
let gemessen = 0;
const zuKlein = [];
for (const datei of readdirSync(join(WS, "assets/css")).filter((n) => n.endsWith(".css"))) {
const text = readFileSync(join(WS, "assets/css", datei), "utf8")
.replace(/\/\*[\s\S]*?\*\//g, " "); // Kommentare weg
for (const treffer of text.matchAll(/font-size:\s*([\d.]+)(rem|em|px)/g)) {
const wert = Number(treffer[1]);
const einheit = treffer[2];
/* `em` hängt von der Umgebung ab und lässt sich hier nicht
ausrechnen -- solche Stellen werden nicht gezählt, statt sie zu
raten. Sie sind selten und die Browserprüfung sieht sie. */
if (einheit === "em") continue;
const px = einheit === "px" ? wert : wert * GRUND_PX;
gemessen++;
if (px < GRENZE_PX) {
const zeile = text.slice(0, treffer.index).split("\n").length;
zuKlein.push(`${datei}:${zeile} → ${treffer[1]}${einheit} = ${px.toFixed(2)} px`);
}
}
}
/* DIE ANZAHL GEHÖRT IN DIE BEDINGUNG: Fände das Muster gar nichts,
stünde sonst "0 zu kleine" da -- grün, ohne je eine Größe
angesehen zu haben. */
ok(gemessen > 150, `${gemessen} Schriftgrößen im Stylesheet geprüft`);
/* EINE GRUNDLINIE, KEIN WUNSCHWERT -- dasselbe Vorgehen wie beim
Layout-Sprung in pruef-tempo-workspace.
Im Bestand stehen 43 solche Stellen. Sie alle zu ändern wäre ein
Eingriff ins Aussehen von dreizehn Stylesheets, kein Fehlerfix --
und die Browserprüfung (pruef-handy) beanstandet davon nur die,
die auf einem Handy WIRKLICH sichtbar sind. Viele greifen dort
gar nicht oder werden überschrieben.
Eine Prüfung, die vom ersten Tag an rot ist, wird weggeklickt --
und mit ihr die echte Warnung. Sie hält deshalb den heutigen Stand
fest und schlägt an, sobald es MEHR werden. Genau das hätte heute
zweimal gegriffen: erst bei den Art-Plaketten (10,56 px), dann bei
der Jetzt-Marke (10,88) -- beide Male hätte es Minuten statt eines
Browserlaufs gekostet.
Wird der Bestand irgendwann aufgeräumt, gehört die Zahl gesenkt.
Sie steht hier als Zahl und nicht als Liste, damit niemand eine
neue Stelle in eine Ausnahmeliste einträgt und sie damit
stillschweigend erlaubt. */
const GRUNDLINIE = 43;
ok(zuKlein.length <= GRUNDLINIE && gemessen > 150,
zuKlein.length > GRUNDLINIE
? `${zuKlein.length} Stellen unter ${GRENZE_PX} px — das sind `
+ `${zuKlein.length - GRUNDLINIE} MEHR als die Grundlinie ${GRUNDLINIE}. `
+ `Neu hinzugekommen ist vermutlich eine davon:\n `
+ zuKlein.slice(-6).join("\n ")
: `${zuKlein.length} Stellen unter ${GRENZE_PX} px `
+ `(Grundlinie ${GRUNDLINIE}, nicht mehr geworden)`);
if (zuKlein.length && zuKlein.length <= GRUNDLINIE) {
console.log(` -- davon im Bestand: ${zuKlein.slice(0, 3).join(" · ")} …`
+ ` — sichtbar sind sie laut pruef-handy nicht, sonst stünden sie dort`);
}
/* GEGENPROBE: Erkennt die Rechnung beide Einheiten -- und lässt sie
einen erlaubten Wert in Ruhe? Ohne das wäre "0 Treffer" wertlos. */
const probe = ".a { font-size: .68rem; } .b { font-size: 10px; } .c { font-size: .95rem; }";
const gefunden = [...probe.matchAll(/font-size:\s*([\d.]+)(rem|em|px)/g)]
.map(([, w, e]) => (e === "px" ? Number(w) : Number(w) * GRUND_PX))
.filter((px) => px < GRENZE_PX);
ok(gefunden.length === 2,
`Gegenprobe: von drei Größen werden die zwei zu kleinen erkannt `
+ `(${gefunden.map((p) => p.toFixed(2)).join(", ")} px), die dritte nicht`);
}
/* =======================================================================
GEGENPROBE — die Messung muss beides können
======================================================================= */
+3 -1
View File
@@ -22,6 +22,7 @@
import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { heuteLokal, tagLokal } from "./helfer-zeit.mjs";
const ordner = mkdtempSync(join(tmpdir(), "ws-frei-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
@@ -154,7 +155,8 @@ ok((uebersicht.daten.offen ?? 0) >= 1, "die Übersicht zählt sie mit");
console.log("\n— Termin mit frei eingetragenem Namen —");
const morgen = new Date(Date.now() + 86400_000).toISOString().slice(0, 10);
/* ORTSZEIT, nicht UTC -- Begruendung in helfer-zeit.mjs. */
const morgen = tagLokal(1);
const termin = await api(seiteDogi, "/workspace/api/termine", {
method: "POST",
koerper: {
+3 -1
View File
@@ -34,6 +34,7 @@
import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { heuteLokal, tagLokal } from "./helfer-zeit.mjs";
const ordner = mkdtempSync(join(tmpdir(), "ws-msicht-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
@@ -59,7 +60,8 @@ const { DatabaseSync } = await import("node:sqlite");
const { scryptSync, randomBytes } = await import("node:crypto");
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const jetzt = new Date().toISOString();
const tag = (v) => new Date(Date.now() + v * 86400_000).toISOString().slice(0, 10);
/* ORTSZEIT, nicht UTC -- Begruendung in helfer-zeit.mjs. */
const tag = (v) => tagLokal(v);
function person(name, rolle, code) {
const salt = randomBytes(16).toString("hex");
+3 -1
View File
@@ -29,6 +29,7 @@
import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { heuteLokal, tagLokal } from "./helfer-zeit.mjs";
const ordner = mkdtempSync(join(tmpdir(), "ws-rollen-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
@@ -58,7 +59,8 @@ const { DatabaseSync } = await import("node:sqlite");
const { scryptSync, randomBytes } = await import("node:crypto");
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const jetzt = new Date().toISOString();
const tag = (v) => new Date(Date.now() + v * 86400_000).toISOString().slice(0, 10);
/* ORTSZEIT, nicht UTC -- Begruendung in helfer-zeit.mjs. */
const tag = (v) => tagLokal(v);
function person(name, rolle, code) {
const salt = randomBytes(16).toString("hex");
+78
View File
@@ -490,6 +490,84 @@ console.log(`\n=== Laedt jedes Server-Modul? ===`);
for (const f of [boese, brav]) { try { unlinkSync(f); } catch { /* egal */ } }
}
/* ---------- Rechnet jede Pruefung den TAG so wie die Anwendung? --------
GEFUNDEN AM 06.09.2026 UM 00:10, und zwar auf die harte Tour: Der
Gesamtlauf meldete 13 Fehlschlaege in pruef-teilnehmer.mjs -- an
einer Datei, die seit Stunden niemand angefasst hatte.
Ortszeit (MESZ): 06.09.2026, 00:10
UTC: 05.09.2026, 22:10
Die Pruefung bildete ihr Datum mit `toISOString().slice(0, 10)` --
das ist UTC. Sie legte ihre Termine also auf gestern und fand heute
nichts. ZWEI STUNDEN AM TAG war sie damit rot (im Winter eine).
Wer nur tagsueber laeuft, sieht das nie. Wer nachts arbeitet, sucht
stundenlang am falschen Ende -- die Meldungen sagen "der Termin ist
weg", nicht "dein Datum ist falsch".
Deshalb wird es hier gesucht, statt darauf zu warten, dass es wieder
jemanden trifft. Gemeint ist nur das TAGESDATUM; ein Zeitstempel
(`erstellt`) darf und soll UTC sein. */
console.log(`\n=== Rechnen die Pruefungen mit Ortszeit? ===`);
{
const dateien = readdirSync(SERVER).filter((n) => n.startsWith("pruef-") && n.endsWith(".mjs"));
ok(dateien.length >= 30, `${dateien.length} Pruefdateien durchgesehen`);
const verdaechtig = [];
for (const datei of dateien) {
/* Die eigene Datei bleibt aussen vor: Die Gegenprobe unten MUSS
das gesuchte Muster als Text enthalten, sonst könnte sie nicht
beweisen, dass sie es erkennt. Sie würde sich sonst selbst
anzeigen -- eine Warnung, die immer kommt, und die liest bald
niemand mehr. */
if (datei === "pruef-struktur.mjs") continue;
const text = readFileSync(join(SERVER, datei), "utf8").replace(/\/\*[\s\S]*?\*\//g, " ");
/* Das Muster ist eng gefasst: NUR toISOString() gefolgt von einem
Schnitt auf zehn Zeichen -- also genau die Bildung eines
Tagesdatums. `new Date().toISOString()` allein (ein voller
Zeitstempel) ist voellig in Ordnung und faellt nicht darunter. */
for (const treffer of text.matchAll(/toISOString\(\)\s*\.\s*slice\(\s*0\s*,\s*10\s*\)/g)) {
const zeile = text.slice(0, treffer.index).split("\n").length;
verdaechtig.push(`${datei}:${zeile}`);
}
/* Und die zweite Schreibweise: erst in eine Variable, dann geschnitten. */
for (const treffer of text.matchAll(/=\s*(\w+)\s*\.\s*slice\(\s*0\s*,\s*10\s*\)/g)) {
const name = treffer[1];
/* Nur melden, wenn diese Variable aus toISOString() stammt. */
if (new RegExp(`(const|let)\\s+${name}\\s*=\\s*new Date\\(\\)\\.toISOString\\(\\)`).test(text)) {
const zeile = text.slice(0, treffer.index).split("\n").length;
verdaechtig.push(`${datei}:${zeile} (über ${name})`);
}
}
}
ok(verdaechtig.length === 0,
verdaechtig.length
? `bilden ihr Tagesdatum aus UTC statt Ortszeit — nachts zwischen `
+ `00:00 und 02:00 schlagen sie fälschlich an:\n `
+ verdaechtig.join("\n ")
: `keine Prüfung bildet ihr Tagesdatum aus UTC (alle nutzen helfer-zeit.mjs)`);
/* GEGENPROBE: Findet das Muster überhaupt etwas? Ohne diesen
Nachweis wäre "0 Treffer" auch dann grün, wenn der reguläre
Ausdruck gar nichts erkennt. */
const probe = "const jetzt = new Date().toISOString();\nconst heute = jetzt.slice(0, 10);";
const erkanntA = /toISOString\(\)\s*\.\s*slice\(\s*0\s*,\s*10\s*\)/
.test("new Date().toISOString().slice(0, 10)");
const erkanntB = /=\s*(\w+)\s*\.\s*slice\(\s*0\s*,\s*10\s*\)/.test(probe)
&& /(const|let)\s+jetzt\s*=\s*new Date\(\)\.toISOString\(\)/.test(probe);
ok(erkanntA && erkanntB,
"Gegenprobe: beide Schreibweisen werden erkannt (direkt und über eine Variable)");
/* Und ein harmloser Zeitstempel darf NICHT anschlagen -- sonst wäre
die Prüfung eine Warnung, die immer kommt. */
const harmlos = /toISOString\(\)\s*\.\s*slice\(\s*0\s*,\s*10\s*\)/
.test("const jetzt = new Date().toISOString();");
ok(!harmlos, "Gegenprobe: ein voller Zeitstempel (ohne Schnitt) schlägt nicht an");
}
/* ---------- Gegenprobe --------------------------------------------------- */
console.log(`\n=== Gegenprobe (muss anschlagen) ===`);
+66 -16
View File
@@ -220,15 +220,46 @@ melde("\n=== Die Termine des Tages ===");
Eine Prüfung, deren Ergebnis von der Uhrzeit des Laufs abhängt,
ist keine Prüfung -- sie ist morgens grün und abends rot, und
irgendwann glaubt ihr niemand mehr. Deshalb wird hier --ton
gelesen: die Zuordnung Art → Farbe, die immer gilt. Der Rand
folgt darunter, aber nur an einem Termin, der nachweislich noch
nicht vorbei ist. */
const toene = await seite.$$eval(".tagesliste__punkt", (punkte) => punkte.map((p) => ({
art: p.dataset.art,
ton: getComputedStyle(p).getPropertyValue("--ton").trim().toLowerCase(),
vorbei: p.dataset.vorbei === "ja",
rand: getComputedStyle(p.querySelector(".tagesliste__marke")).borderTopColor,
})));
gelesen: die Zuordnung Art → Farbe, die immer gilt. Die sichtbare
Kante folgt darunter, aber nur an einem Termin, der nachweislich
noch nicht vorbei ist. */
const toene = await seite.$$eval(".tagesliste__punkt", (punkte) => punkte.map((p) => {
const vorbei = p.dataset.vorbei === "ja";
/* DIE DÄMPFUNG WIRD FÜR DIE MESSUNG KURZ ABGESCHALTET.
Ein vorbeigezogener Termin setzt --ton bewusst auf Grau. Wer
die Zuordnung Art → Farbe an ihm misst, misst die Dämpfung und
nennt sie einen Fehler -- genau das ist im ersten Entwurf
passiert ("falsche Farbe: call=#75859a").
Statt nur die ausstehenden zu messen (dann hinge das Ergebnis
wieder an der Uhrzeit des Laufs, und abends bliebe fast nichts
übrig) wird das Merkmal hier kurz entfernt, gemessen und sofort
zurückgesetzt. Damit ist die Zuordnung für JEDEN Termin geprüft,
unabhängig davon, wann jemand den Lauf startet. */
if (vorbei) delete p.dataset.vorbei;
const ton = getComputedStyle(p).getPropertyValue("--ton").trim().toLowerCase();
if (vorbei) p.dataset.vorbei = "ja";
return {
art: p.dataset.art,
ton,
vorbei,
/* Die farbige Kante links ist seit dem Umbau auf Karten
(05.09.2026) ein ::before -- vorher war es der Ring einer
Marke. Gemessen wird ihr Hintergrund, dort steckt die Farbe. */
kante: getComputedStyle(p, "::before").backgroundImage,
/* Und der Dauerbalken: Seine Füllung sagt, wie lang der Termin
ist. Ein Balken, der bei jeder Dauer gleich aussieht, wäre
Deko -- und Deko, die aussieht wie eine Angabe, führt in die
Irre. */
laenge: getComputedStyle(p.querySelector(".tagesliste__balken") || p)
.getPropertyValue("--laenge").trim(),
/* Der gedämpfte Ton, separat: So lässt sich beides beweisen --
die richtige Zuordnung UND dass die Dämpfung greift. */
tonGedaempft: getComputedStyle(p).getPropertyValue("--ton").trim().toLowerCase(),
};
}));
const SOLL = { call: "#3fbdf5", termin: "#8a76ff", review: "#50a752", frist: "#d17717" };
const falsch = toene.filter((t) => SOLL[t.art] && t.ton !== SOLL[t.art]);
@@ -238,17 +269,17 @@ melde("\n=== Die Termine des Tages ===");
: `alle ${toene.length} Termine tragen die Kalenderfarbe ihrer Art `
+ `(${toene.map((t) => `${t.art} ${t.ton}`).join(", ")})`);
/* Und der Rand nimmt sie auch wirklich an -- gemessen an einem
/* Und die Kante nimmt sie auch wirklich an -- gemessen an einem
Termin, der noch aussteht. Gibt es keinen (ein Lauf kurz vor
Mitternacht), wird das gesagt statt behauptet: der dritte Ausgang. */
const offen = toene.find((t) => !t.vorbei);
if (offen) {
const soll = SOLL[offen.art];
const r = parseInt(soll.slice(1, 3), 16), g = parseInt(soll.slice(3, 5), 16), b = parseInt(soll.slice(5, 7), 16);
ok(offen.rand.replace(/\s/g, "") === `rgb(${r},${g},${b})`,
`der Ring des nächsten Termins (${offen.art}) trägt sie sichtbar: ${offen.rand}`);
ok(offen.kante.replace(/\s/g, "").includes(`rgb(${r},${g},${b})`),
`die Kante des nächsten Termins (${offen.art}) trägt die Farbe sichtbar`);
} else {
melde(` -- kein ausstehender Termin zur Zeit des Laufs — der Ring `
melde(` -- kein ausstehender Termin zur Zeit des Laufs — die Kante `
+ `wurde nicht am Bild geprüft (die Zuordnung darüber schon)`);
}
@@ -257,11 +288,30 @@ melde("\n=== Die Termine des Tages ===");
eine Behauptung im Stylesheet. */
const vorbei = toene.find((t) => t.vorbei);
if (vorbei) {
ok(vorbei.rand.replace(/\s/g, "") !== `rgb(80,167,82)`.replace(/\s/g, "")
|| vorbei.art !== "review",
`ein vorbeigezogener Termin ist gedämpft (Ring ${vorbei.rand} statt der Artfarbe)`);
/* Beides zusammen ist der Beweis: Die Zuordnung stimmt (ton), UND
die Dämpfung überschreibt sie (tonGedaempft). Nur eines von
beidem zu messen liesse offen, ob die Dämpfung überhaupt wirkt
oder ob die Farbe von vornherein fehlte. */
ok(vorbei.tonGedaempft === "#75859a" && vorbei.ton !== "#75859a",
`vorbei wird gedämpft: ${vorbei.art} trägt ${vorbei.ton}, `
+ `angezeigt wird ${vorbei.tonGedaempft}`);
}
/* DER DAUERBALKEN muss die Dauer WIRKLICH abbilden. Ein Balken, der
bei 30 und bei 60 Minuten gleich aussieht, ist Deko -- und Deko,
die aussieht wie eine Angabe, ist schlimmer als keine. */
const laengen = toene.map((t) => t.laenge).filter(Boolean);
ok(laengen.length === 3 && new Set(laengen).size >= 2,
laengen.length !== 3
? `nur ${laengen.length} von 3 Terminen haben einen Dauerbalken`
: `die Balken unterscheiden sich nach Dauer: ${laengen.join(", ")}`);
/* Und die JETZT-Marke steht genau am nächsten Termin -- nicht an
allen, nicht an keinem. */
const jetztMarken = await seite.$$eval(".tagesliste__jetzt",
(m) => m.filter((x) => getComputedStyle(x).display !== "none").length);
ok(jetztMarken === 1, `die Marke "Jetzt" steht ${jetztMarken}× (erwartet genau 1×)`);
/* GENAU EINER ist "als Nächstes dran" -- nicht null, nicht zwei. */
const naechste = zeilen.filter((z) => z.naechster).length;
ok(naechste === 1, `genau ${naechste} Termin ist als Nächstes hervorgehoben`);
+5 -1
View File
@@ -27,6 +27,7 @@
import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { heuteLokal } from "./helfer-zeit.mjs";
const ordner = mkdtempSync(join(tmpdir(), "ws-teiln-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
@@ -63,7 +64,10 @@ for (let i = 0; i < 60; i++) {
}
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const jetzt = new Date().toISOString();
const heute = jetzt.slice(0, 10);
/* ORTSZEIT, nicht UTC -- Begruendung in helfer-zeit.mjs. Mit
`jetzt.slice(0, 10)` war diese Pruefung jede Nacht zwischen 00:00
und 02:00 rot, weil sie ihre Termine auf gestern legte. */
const heute = heuteLokal();
function anlegen(name, rolle, code) {
const salt = randomBytes(16).toString("hex");
const hash = scryptSync(code, salt, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
+22 -1
View File
@@ -31,6 +31,7 @@
import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { heuteLokal } from "./helfer-zeit.mjs";
const ordner = mkdtempSync(join(tmpdir(), "ws-tempo-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
@@ -67,7 +68,8 @@ for (let i = 0; i < 60; i++) {
}
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const jetzt = new Date().toISOString();
const heute = jetzt.slice(0, 10);
/* ORTSZEIT, nicht UTC -- Begruendung in helfer-zeit.mjs. */
const heute = heuteLokal();
function anlegen(name, rolle, code) {
const salt = randomBytes(16).toString("hex");
const hash = scryptSync(code, salt, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
@@ -122,6 +124,25 @@ await seite.fill("#code", "CODE-DOGI-0001");
await seite.click("button[type=submit]");
await seite.waitForURL("**/start.html", { timeout: 20000 });
/* ERST ZUR RUHE KOMMEN LASSEN, dann messen (06.09.2026).
Die Anmeldung landet auf start.html -- und diese Seite holt ihre
Daten nach. Startet die Messschleife sofort, laufen diese Anfragen
noch, und der Zaehler der ERSTEN Seite bekommt sie mit. Genau das
ist passiert, als der Tagesblick dazukam: Die Pruefung meldete
"NEUE Doppelabfrage: start.html 2x /workspace/api/termine".
Es waren aber zwei SEITENAUFRUFE mit je einer Anfrage -- einmal
durch die Weiterleitung nach dem Anmelden, einmal durch die
Messschleife. Nachgemessen an einem einzelnen Aufruf: genau eine
Anfrage. Die Pruefung hat also nicht den Code beanstandet, sondern
ihre eigene Vorbereitung.
Wer hier nicht wartet, gibt jeder Seite die Schuld an dem, was die
vorherige noch offen hatte. */
await seite.waitForLoadState("networkidle");
await seite.waitForTimeout(600);
/* Grenzen. Grosszuegig -- sie sollen den Ausreisser finden, nicht das
Kilobyte. */
const GRENZE_ANFRAGEN = 40;
+235 -105
View File
@@ -3222,6 +3222,18 @@ body[data-fremde-sicht="ja"]::after {
.tagesblick__seite--dran { grid-column: 1; }
.tagesblick__seite--heute { grid-column: 3; }
/* SOLANGE GELADEN WIRD, hält die Kachel ihre Höhe. Ohne das sprang
alles darunter nach unten, sobald die Daten ankamen -- gemessen als
Layout-Sprung 0,96 auf der Startseite. Der Wert entspricht ungefähr
einer Kachel mit zwei bis drei Einträgen je Seite. Gemessen: ein
Termin ergibt 169 px, drei ergeben 327 px -- 280 liegt dazwischen,
der Rest-Sprung ist damit in beide Richtungen klein. */
.tagesblick[data-laedt="ja"] { min-height: 280px; }
/* Die Überschriften stehen schon da, der Rest bleibt ruhig leer. Ein
zappelndes Skelett wäre hier Selbstzweck -- die Wartezeit ist der
eine Moment, in dem die Daten aus der Datenbank kommen. */
.tagesblick[data-laedt="ja"] .tagesblick__leer { visibility: hidden; }
.tagesblick__seite {
display: flex; flex-direction: column;
padding: 17px 19px 19px;
@@ -3263,131 +3275,247 @@ body[data-fremde-sicht="ja"]::after {
font-size: .84rem; color: var(--text-still);
}
/* ---------- Die Termine als Zeitstrahl ---------------------------------- */
/* ---------- Die Termine des Tages ---------------------------------------
ZWEITER ANLAUF (05.09.2026). Der erste war eine Liste mit einem
dünnen Strich dahinter. Filipes Urteil an einem Tag mit EINEM
Termin: *"das soll viel geiler und krasser aussehen."*
Er hatte recht, und der Grund ist der Einzelfall: Ein Zeitstrahl
lebt davon, dass er etwas VERBINDET. Bei einem einzigen Eintrag
verbindet er nichts -- übrig bleiben eine magere Zeile, ein Strich
ins Leere und viel Weißraum bis zur Plakette am rechten Rand.
WAS SICH ÄNDERT: Jeder Termin ist jetzt eine eigene Fläche mit
farbiger Kante statt einer nackten Zeile. Das trägt auch allein.
Dazu drei Dinge, die vorher fehlten:
* Die Uhrzeit ist groß und trägt die Farbe der Terminart. Sie ist
die Auskunft, die man sucht -- vorher war sie kleiner als der
Titel.
* Ein Balken zeigt die DAUER. Aus "30 min" als Text wird etwas,
das man sieht, ohne zu lesen: Ein Zweistundenblock ist ein
anderer Tag als vier Viertelstunden.
* Der nächste Termin bekommt einen Ring und die Marke "JETZT" --
nicht bloß einen helleren Hintergrund.
WAS SICH NICHT ÄNDERT: kein Neon, keine harten Weißflächen, keine
Bewegung. "Krass" entsteht hier aus Kontrast und Hierarchie, nicht
aus Leuchtkraft -- augenschonend bleibt Hausregel. Die Farbe steckt
weiterhin in wenigen kleinen Flächen; sie wirkt nur stärker, weil
drumherum mehr Ruhe ist. */
.tagesliste {
display: grid; gap: 2px;
display: grid; gap: 8px;
margin: 0; padding: 0; list-style: none;
position: relative;
}
/* Die senkrechte Linie hinter den Punkten. Sie beginnt am ersten und
endet am letzten Punkt -- eine Linie, die über den letzten Termin
hinausläuft, verspricht etwas, das nicht kommt. */
.tagesliste::before {
content: "";
position: absolute; left: 61px; top: 18px; bottom: 18px; width: 1px;
background: linear-gradient(180deg,
transparent, var(--rand-hell) 12%, var(--rand-hell) 88%, transparent);
}
.tagesliste__punkt {
--ton: #8a76ff;
position: relative;
display: grid;
grid-template-columns: 46px 16px 1fr auto;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 10px;
padding: 9px 10px 9px 0;
gap: 14px;
padding: 13px 15px 13px 17px;
border: 1px solid var(--rand);
border-radius: var(--radius-klein);
transition: background .18s ease;
/* Ein Hauch der Terminfarbe von links, dann nichts mehr. Die Fläche
bleibt fast schwarz -- die Farbe soll die Kante betonen, nicht die
Karte einfärben. */
background:
linear-gradient(90deg,
color-mix(in srgb, var(--ton) 8%, transparent),
transparent 42%),
rgba(255, 255, 255, .022);
transition: border-color .18s ease, background .18s ease, transform .18s ease;
overflow: hidden;
}
/* Dieselben vier Farben wie im Kalender (ARTFARBE in kalender.js).
Eine Farbe, die hier etwas anderes bedeutete als dort, müsste man
zweimal lernen. */
/* DIE KANTE LINKS ist der eigentliche Träger der Farbe. Oben kräftig,
unten auslaufend -- ein durchgehender Balken wirkt wie ein Etikett,
ein auslaufender wie Licht. */
.tagesliste__punkt::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg,
var(--ton), color-mix(in srgb, var(--ton) 30%, transparent));
}
.tagesliste__punkt[data-art="call"] { --ton: #3fbdf5; }
.tagesliste__punkt[data-art="termin"] { --ton: #8a76ff; }
.tagesliste__punkt[data-art="review"] { --ton: #50a752; }
.tagesliste__punkt[data-art="frist"] { --ton: #d17717; }
.tagesliste__punkt:hover {
border-color: color-mix(in srgb, var(--ton) 40%, var(--rand));
background:
linear-gradient(90deg,
color-mix(in srgb, var(--ton) 13%, transparent),
transparent 48%),
rgba(255, 255, 255, .045);
}
/* ---- Die Zeit: groß, farbig, mit Dauerbalken ---- */
.tagesliste__zeit {
display: flex; flex-direction: column; align-items: flex-end;
gap: 1px;
/* Tabellenziffern: Sonst tanzen die Uhrzeiten untereinander, weil
die 1 schmaler ist als die 8. */
font-variant-numeric: tabular-nums;
display: flex; flex-direction: column; align-items: flex-start;
gap: 7px;
min-width: 92px;
}
/* Balken und Minutenzahl stehen NEBENEINANDER, nicht übereinander.
Untereinander lag der Balken direkt unter der Uhrzeit und las sich
als deren Unterstreichung -- er sah aus wie Deko und nicht wie eine
Angabe. Nebeneinander ist klar, dass die Länge etwas bedeutet, und
die linke Spalte wird eine Zeile flacher. */
.tagesliste__laenge {
display: flex; align-items: center; gap: 8px;
width: 100%;
}
.tagesliste__stunde {
font-size: .88rem; font-weight: 650; color: var(--text-leise);
letter-spacing: .01em;
font-size: 1.12rem; font-weight: 700;
letter-spacing: -.01em; line-height: 1;
color: color-mix(in srgb, var(--ton) 62%, #ffffff);
font-variant-numeric: tabular-nums;
}
/* 0,74 rem = 11,84 px. NICHT kleiner: Unter 11,5 px meldet die
Geräteprüfung zu Recht "zu kleine Schrift" -- und was auf dem Handy
niemand liest, ist auf dem Rechner nur Zierde. Der erste Entwurf
hatte 0,68 rem (10,88 px). */
.tagesliste__dauer { font-size: .74rem; color: var(--text-still); }
/* Der Punkt auf der Linie. Ein Ring, kein Klecks -- er soll die Linie
markieren, nicht überdecken. */
.tagesliste__marke {
justify-self: center;
width: 9px; height: 9px; border-radius: 50%;
background: #0b0f16;
border: 2px solid var(--ton);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ton) 12%, transparent);
/* DER DAUERBALKEN. Seine Breite kommt aus --laenge (in start.js
gesetzt): 30 Minuten sind kurz, zwei Stunden füllen ihn. Damit sieht
man die Länge, statt sie zu lesen.
Gedeckelt bei 100 %, weil ein Ganztagestermin den Balken sonst aus
der Karte schöbe. */
.tagesliste__balken {
position: relative; flex: none;
/* Feste Breite statt 100 %: Die Spur ist der Maßstab, an dem man die
Füllung abliest. Wäre sie mal breiter, mal schmaler, sagte die
Füllung nichts mehr. */
width: 40px; height: 4px;
border-radius: 999px;
background: rgba(255, 255, 255, .08);
overflow: hidden;
}
.tagesliste__balken::after {
content: ""; position: absolute; inset: 0;
width: var(--laenge, 30%);
border-radius: 999px;
background: linear-gradient(90deg,
var(--ton), color-mix(in srgb, var(--ton) 45%, transparent));
}
.tagesliste__dauer {
font-size: .74rem; color: var(--text-still);
font-variant-numeric: tabular-nums;
}
/* ---- Text ---- */
.tagesliste__text { min-width: 0; }
.tagesliste__titel {
margin: 0;
font-size: .89rem; font-weight: 600; color: var(--text-leise);
/* Ein langer Titel darf die Kachel nicht breiter machen. */
font-size: .96rem; font-weight: 620; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tagesliste__unter {
margin: 2px 0 0;
font-size: .75rem; color: var(--text-still);
margin: 3px 0 0;
font-size: .78rem; color: var(--text-still);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ---- Rechte Seite: Art und Zustand ---- */
.tagesliste__rechts {
display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.tagesliste__art {
padding: 2px 9px; border-radius: 999px;
/* 11,84 px statt der ursprünglichen 10,56. Gemeldet von pruef-handy
auf allen drei Geräteklassen: "zu kleine Schrift: Call 10.56px".
Großbuchstaben mit Sperrung wirken kleiner als sie sind -- gerade
deshalb ist die Grenze hier nicht verhandelbar. */
padding: 3px 10px; border-radius: 999px;
/* 11,84 px. Unter 11,5 meldet die Geräteprüfung zu Recht "zu kleine
Schrift" -- und Großbuchstaben mit Sperrung wirken kleiner, als
sie sind. */
font-size: .74rem; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase;
color: color-mix(in srgb, var(--ton) 72%, #ffffff);
background: color-mix(in srgb, var(--ton) 11%, transparent);
border: 1px solid color-mix(in srgb, var(--ton) 26%, transparent);
letter-spacing: .06em; text-transform: uppercase;
color: color-mix(in srgb, var(--ton) 78%, #ffffff);
background: color-mix(in srgb, var(--ton) 13%, transparent);
border: 1px solid color-mix(in srgb, var(--ton) 30%, transparent);
white-space: nowrap;
}
/* Der ganze Eintrag ist anklickbar, ohne dass ein <a> um alles liegt:
Ein Link, der Überschrift, Zeit und Marke umschließt, liest sich für
ein Vorleseprogramm als ein einziger langer Name. So bleibt die
Struktur erhalten, und das aria-label sagt den ganzen Satz. */
/* DIE JETZT-MARKE. Sie sagt in einem Wort, was der hellere Hintergrund
vorher nur andeutete. */
.tagesliste__jetzt {
display: none;
align-items: center; gap: 5px;
/* 11,84 px. Zum ZWEITEN Mal an dieser Kachel korrigiert -- erst die
Art-Plaketten, jetzt diese Marke. Unter 11,5 px meldet die
Geraetepruefung zu Recht "zu kleine Schrift", und Grossbuchstaben
mit weiter Sperrung wirken noch kleiner, als sie sind. */
font-size: .74rem; font-weight: 800;
letter-spacing: .1em; text-transform: uppercase;
color: var(--ton);
}
.tagesliste__jetzt::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--ton);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ton) 22%, transparent);
}
.tagesliste__punkt[data-naechster="ja"] .tagesliste__jetzt { display: inline-flex; }
/* ---- Als Nächstes dran ---- */
.tagesliste__punkt[data-naechster="ja"] {
border-color: color-mix(in srgb, var(--ton) 45%, transparent);
background:
linear-gradient(90deg,
color-mix(in srgb, var(--ton) 15%, transparent),
transparent 55%),
rgba(255, 255, 255, .04);
}
.tagesliste__punkt[data-naechster="ja"]::before { width: 4px; }
.tagesliste__punkt[data-naechster="ja"] .tagesliste__stunde {
color: color-mix(in srgb, var(--ton) 40%, #ffffff);
}
/* ---- Vorbei ----
Zurücktreten, nicht verschwinden: Man will sehen, was man heute
schon hinter sich hat. Statt alles blass zu machen (dann leidet die
Lesbarkeit), verliert nur die FARBE an Kraft -- der Text bleibt. */
.tagesliste__punkt[data-vorbei="ja"] {
--ton: #75859a;
background: rgba(255, 255, 255, .015);
}
.tagesliste__punkt[data-vorbei="ja"] .tagesliste__titel { color: var(--text-leise); }
.tagesliste__punkt[data-vorbei="ja"]::before { opacity: .5; }
.tagesliste__punkt[data-vorbei="ja"]:hover { background: rgba(255, 255, 255, .04); }
/* Der Haken sagt "erledigt" schneller als jede Farbe. */
.tagesliste__punkt[data-vorbei="ja"] .tagesliste__art::before {
content: "✓ ";
font-weight: 700;
}
/* ---- Der ganze Eintrag ist anklickbar ----
Ein <a> um alles herum läse sich für ein Vorleseprogramm als ein
einziger langer Name. So bleibt die Struktur erhalten, und das
aria-label sagt den ganzen Satz. */
.tagesliste__link {
position: absolute; inset: 0;
border-radius: var(--radius-klein);
}
/* "3 weitere Termine heute" -- der Hinweis auf das, was nicht mehr
in die Kachel passte. Still gehalten: Er ist ein Wegweiser, keine
sechste Karte. */
.tagesliste__mehr {
padding: 4px 0 0 2px;
}
.tagesliste__mehr-link {
font-size: .8rem; color: var(--text-still);
text-decoration: none;
transition: color .16s ease;
}
.tagesliste__mehr-link:hover { color: var(--text-leise); }
.tagesliste__link:focus-visible {
outline: 2px solid var(--ton); outline-offset: -2px;
outline: 2px solid var(--ton); outline-offset: -3px;
}
.tagesliste__punkt:hover { background: rgba(255, 255, 255, .035); }
/* WAS ALS NÄCHSTES DRAN IST. Beim Überfliegen ist das die eigentliche
Auskunft -- nicht "der erste Termin des Tages". */
.tagesliste__punkt[data-naechster="ja"] {
background: color-mix(in srgb, var(--ton) 7%, transparent);
}
.tagesliste__punkt[data-naechster="ja"] .tagesliste__titel { color: var(--text); }
.tagesliste__punkt[data-naechster="ja"] .tagesliste__stunde { color: var(--text); }
.tagesliste__punkt[data-naechster="ja"] .tagesliste__marke {
background: var(--ton);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--ton) 16%, transparent);
}
/* VORBEI heißt nicht weg. Man will sehen, was man heute schon hinter
sich hat -- es tritt nur zurück. */
.tagesliste__punkt[data-vorbei="ja"] { opacity: .45; }
.tagesliste__punkt[data-vorbei="ja"]:hover { opacity: .75; }
.tagesliste__punkt[data-vorbei="ja"] .tagesliste__marke {
border-color: var(--text-still);
box-shadow: none;
}
/* ---------- Schmale Schirme --------------------------------------------
Untereinander statt nebeneinander -- und der Trenner wird waagerecht.
@@ -3411,42 +3539,44 @@ body[data-fremde-sicht="ja"]::after {
}
@media (max-width: 460px) {
/* Die Dauer entfällt zuerst -- sie ist die Angabe, die man am
seltensten braucht, und schafft Platz für den Titel. */
.tagesliste__dauer { display: none; }
.tagesliste__punkt {
grid-template-columns: 40px 14px 1fr;
gap: 8px;
/* OBEN AUSRICHTEN, nicht mittig. Sobald die Plakette unter den
Titel rutscht, wird die Zeile hoch -- eine mittig gesetzte
Uhrzeit steht dann auf Höhe der zweiten Zeile und fluchtet mit
gar nichts. Am Rechner bleibt es mittig, dort ist die Zeile
einzeilig. */
/* Die Uhrzeitspalte wird schmaler, der Rest bleibt. Die Plakette
nach unten zu schieben wäre der naheliegende Griff -- sie steht
dann aber unter dem Titel und macht jede Karte fünfzig Pixel
höher, ohne etwas zu gewinnen. */
gap: 11px;
padding: 12px 13px 12px 15px;
/* OBEN AUSRICHTEN: Bricht der Titel auf zwei Zeilen, stünde eine
mittig gesetzte Uhrzeit auf Höhe der zweiten und fluchtete mit
nichts. Am Rechner bleibt es mittig, dort ist alles einzeilig. */
align-items: start;
}
/* Die Zeit und der Punkt auf der Linie rücken auf die Höhe des
Titels -- die drei gehören optisch zusammen. */
.tagesliste__zeit { padding-top: 1px; }
.tagesliste__marke { margin-top: 6px; }
/* Die Art steht dann unter dem Titel statt daneben. */
.tagesliste__art {
grid-column: 3; justify-self: start;
margin-top: 6px;
}
.tagesliste::before { left: 54px; }
.tagesliste__zeit { min-width: 78px; }
.tagesliste__stunde { font-size: 1.02rem; }
/* Der Balken entfaellt am Handy -- neben ihm bliebe fuer den Titel
zu wenig. Die Zahl sagt es weiterhin. */
.tagesliste__balken { display: none; }
.tagesliste__titel { font-size: .92rem; white-space: normal; }
.tagesliste__rechts { padding-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
.tagesliste__punkt, .tagesblick__mehr-pfeil { transition: none; }
}
/* Ohne Farbverläufe tragen Kante und Ring allein. Der Trenner wird zur
echten Linie -- ein Verlauf, den es nicht gibt, wäre sonst gar nichts. */
/* Ohne Farbverläufe trägt die Kante allein -- und die ist hier ein
Verlauf, also muss sie zur echten Fläche werden. Sonst verschwindet
ausgerechnet das Merkmal, das die Terminart anzeigt. */
@media (forced-colors: active) {
.tagesblick { border: 1px solid CanvasText; }
.tagesblick__seite--heute::before { background: CanvasText; }
.tagesliste::before { background: CanvasText; }
.tagesliste__marke { border-color: CanvasText; }
.tagesliste__punkt { border: 1px solid CanvasText; }
.tagesliste__punkt::before { background: CanvasText; }
.tagesliste__punkt[data-naechster="ja"] { border-width: 2px; }
.tagesliste__balken::after { background: CanvasText; }
.tagesliste__art { border: 1px solid CanvasText; }
.tagesliste__jetzt::before { background: CanvasText; box-shadow: none; }
/* Im Kontrastmodus gibt es keine gedämpften Töne -- der Haken vor
der Art bleibt das Merkmal für "vorbei". */
.tagesliste__punkt[data-vorbei="ja"] { opacity: 1; }
}
+74 -15
View File
@@ -535,11 +535,13 @@
const etwasRechts = $('tagestermine').childElementCount > 0;
/* Solange die Termine noch unterwegs sind, wird nicht versteckt --
sonst blitzt die Kachel auf und verschwindet wieder. */
if (!tagesterminGeladen) {
if (etwasLinks) $('dran-block').hidden = false;
return;
}
$('dran-block').hidden = !etwasLinks && !etwasRechts;
const kachel = $('dran-block');
if (!tagesterminGeladen) return; /* der Platzhalter haelt die Hoehe */
/* Jetzt steht beides fest: Der Platzhalter wird abgeraeumt, und die
Kachel bleibt nur, wenn sie etwas zu zeigen hat. */
delete kachel.dataset.laedt;
kachel.hidden = !etwasLinks && !etwasRechts;
}
/** hh:mm aus einem Zeitstempel, ohne Zeitzonen-Rechnerei.
@@ -587,7 +589,34 @@
return !Number.isNaN(ende.getTime()) ? ende >= jetzt : uhrzeit(t.beginn) >= jetztText;
});
for (const t of termine) {
/* HÖCHSTENS FÜNF. Zwei Gründe, und beide zählen:
Fachlich: Eine Kachel auf der Startseite beantwortet "was kommt
als Nächstes", nicht "was war alles". Wer zwanzig Termine hat,
will die nächsten sehen und dann in den Kalender -- eine Liste,
die den halben Bildschirm füllt, nimmt den Blick auf alles
darunter.
Technisch: Ohne Grenze hängt die Höhe der Kachel an der Zahl der
Termine, und der reservierte Platz kann nie passen. Der
Layout-Sprung lag deshalb bei 0,93 -- alles unterhalb rutschte
beim Laden nach unten. Mit einer Obergrenze ist die Höhe
planbar.
Warum DREI und nicht fuenf: Gemessen wurde die Kachelhoehe --
ein Termin 169 px, drei 327 px, fuenf 486 px. Je weiter die
Spanne, desto weniger kann der reservierte Platz passen, und
desto staerker springt die Seite. Bei drei liegt die Spanne bei
gut 150 Pixeln statt bei 320.
Die weggelassenen werden GENANNT, nicht verschwiegen: Eine
Liste, die stillschweigend abschneidet, liest sich wie der
ganze Tag -- und man verpasst den Termin um sechs. */
const ZEIGE_HOECHSTENS = 3;
const gezeigt = termine.slice(0, ZEIGE_HOECHSTENS);
const weitere = termine.length - gezeigt.length;
for (const t of gezeigt) {
const li = el('li', 'tagesliste__punkt');
li.dataset.art = t.art || 'termin';
@@ -597,19 +626,30 @@
hinter sich hat. Es tritt nur zurück. */
else if (beginn < jetztText) li.dataset.vorbei = 'ja';
/* ---- Links: Uhrzeit, Dauerbalken, Dauer ---- */
const zeit = el('span', 'tagesliste__zeit');
zeit.append(el('span', 'tagesliste__stunde', beginn));
if (t.dauer_min) {
zeit.append(el('span', 'tagesliste__dauer', `${t.dauer_min} min`));
/* DER BALKEN ZEIGT DIE LÄNGE. Bezugsgröße sind zwei Stunden --
darüber ist er voll. Das ist keine Skala, sondern ein
Verhältnis: Man soll auf einen Blick sehen, ob ein Termin
kurz oder lang ist, ohne "30 min" zu lesen.
Zwei Stunden als Vollausschlag, weil darüber im Alltag
kaum etwas liegt; ein Ganztagestermin würde jeden anderen
Balken sonst auf einen Strich zusammendrücken. */
const anteil = Math.max(12, Math.min(100, (Number(t.dauer_min) / 120) * 100));
const balken = el('span', 'tagesliste__balken');
balken.style.setProperty('--laenge', `${Math.round(anteil)}%`);
balken.setAttribute('aria-hidden', 'true'); // die Zahl daneben sagt es
const laenge = el('span', 'tagesliste__laenge');
laenge.append(balken, el('span', 'tagesliste__dauer', `${t.dauer_min} min`));
zeit.append(laenge);
}
li.append(zeit);
/* Der Punkt auf der Linie. Er trägt die Farbe der Terminart --
dieselbe wie im Kalender, damit man sie nicht zweimal lernt. */
const marke = el('span', 'tagesliste__marke');
marke.setAttribute('aria-hidden', 'true');
li.append(marke);
/* ---- Mitte: Titel und Beteiligte ---- */
const text = el('div', 'tagesliste__text');
text.append(el('p', 'tagesliste__titel', t.titel));
@@ -620,8 +660,14 @@
if (unten.length) text.append(el('p', 'tagesliste__unter', unten.join(' · ')));
li.append(text);
const art = el('span', 'tagesliste__art', ART_NAME[t.art] || t.art || '');
li.append(art);
/* ---- Rechts: Art und, beim nächsten, die Jetzt-Marke ---- */
const rechts = el('div', 'tagesliste__rechts');
rechts.append(el('span', 'tagesliste__art', ART_NAME[t.art] || t.art || ''));
/* Steht im Markup immer, wird aber nur beim nächsten Termin
eingeblendet (CSS). Ein Wort sagt hier mehr als ein hellerer
Hintergrund -- und ein Vorleseprogramm bekommt es ebenfalls. */
rechts.append(el('span', 'tagesliste__jetzt', 'Jetzt'));
li.append(rechts);
/* Der ganze Eintrag führt in den Kalender, auf den richtigen Tag.
Ein Termin, den man nur anschauen kann, ist eine Sackgasse. */
@@ -633,6 +679,19 @@
liste.append(li);
}
/* Was nicht mehr hineinpasste, wird gesagt -- mit dem Weg dorthin.
Eine Liste, die stillschweigend abschneidet, liest sich wie der
ganze Tag, und man verpasst den Termin um sechs. */
if (weitere > 0) {
const mehr = el('li', 'tagesliste__mehr');
const a = el('a', 'tagesliste__mehr-link',
`${weitere} weitere${weitere === 1 ? 'r Termin' : ' Termine'} heute →`);
a.href = 'kalender.html';
mehr.append(a);
liste.append(mehr);
}
tagesblickPruefen();
}
+8 -8
View File
@@ -9,9 +9,9 @@
<meta name="theme-color" content="#0674b9" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/start.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/start.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609060056" />
</head>
<body class="start">
@@ -211,10 +211,10 @@
</form>
</dialog>
<script src="assets/js/wahl.js?v=202609052040" defer></script>
<script src="assets/js/bereiche.js?v=202609052040" defer></script>
<script src="assets/js/kopf.js?v=202609052040" defer></script>
<script src="assets/js/glocke.js?v=202609052040" defer></script>
<script src="assets/js/aufgaben.js?v=202609052040" defer></script>
<script src="assets/js/wahl.js?v=202609060056" defer></script>
<script src="assets/js/bereiche.js?v=202609060056" defer></script>
<script src="assets/js/kopf.js?v=202609060056" defer></script>
<script src="assets/js/glocke.js?v=202609060056" defer></script>
<script src="assets/js/aufgaben.js?v=202609060056" defer></script>
</body>
</html>
+9 -9
View File
@@ -9,10 +9,10 @@
<meta name="theme-color" content="#0674b9" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/start.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/automation.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/start.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/automation.css?v=202609060056" />
</head>
<body class="start">
@@ -134,10 +134,10 @@
</main>
<script src="assets/js/wahl.js?v=202609052040" defer></script>
<script src="assets/js/bereiche.js?v=202609052040" defer></script>
<script src="assets/js/kopf.js?v=202609052040" defer></script>
<script src="assets/js/glocke.js?v=202609052040" defer></script>
<script src="assets/js/automation.js?v=202609052040" defer></script>
<script src="assets/js/wahl.js?v=202609060056" defer></script>
<script src="assets/js/bereiche.js?v=202609060056" defer></script>
<script src="assets/js/kopf.js?v=202609060056" defer></script>
<script src="assets/js/glocke.js?v=202609060056" defer></script>
<script src="assets/js/automation.js?v=202609060056" defer></script>
</body>
</html>
+13 -13
View File
@@ -9,10 +9,10 @@
<meta name="theme-color" content="#0674b9" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/start.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/bereich.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/start.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/bereich.css?v=202609060056" />
</head>
<body class="start">
@@ -117,14 +117,14 @@
</main>
<script src="assets/js/wahl.js?v=202609052040" defer></script>
<script src="assets/js/bereiche.js?v=202609052040" defer></script>
<script src="assets/js/kopf.js?v=202609052040" defer></script>
<script src="assets/js/glocke.js?v=202609052040" defer></script>
<script src="assets/js/checkliste.js?v=202609052040" defer></script>
<script src="assets/js/ampel.js?v=202609052040" defer></script>
<script src="assets/js/schulung.js?v=202609052040" defer></script>
<script src="assets/js/vorlagen.js?v=202609052040" defer></script>
<script src="assets/js/bereich.js?v=202609052040" defer></script>
<script src="assets/js/wahl.js?v=202609060056" defer></script>
<script src="assets/js/bereiche.js?v=202609060056" defer></script>
<script src="assets/js/kopf.js?v=202609060056" defer></script>
<script src="assets/js/glocke.js?v=202609060056" defer></script>
<script src="assets/js/checkliste.js?v=202609060056" defer></script>
<script src="assets/js/ampel.js?v=202609060056" defer></script>
<script src="assets/js/schulung.js?v=202609060056" defer></script>
<script src="assets/js/vorlagen.js?v=202609060056" defer></script>
<script src="assets/js/bereich.js?v=202609060056" defer></script>
</body>
</html>
+10 -10
View File
@@ -9,10 +9,10 @@
<meta name="theme-color" content="#0674b9" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/start.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/calls.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/start.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/calls.css?v=202609060056" />
</head>
<body class="start">
@@ -76,11 +76,11 @@
</main>
<script src="assets/js/ki.js?v=202609052040" defer></script>
<script src="assets/js/wahl.js?v=202609052040" defer></script>
<script src="assets/js/bereiche.js?v=202609052040" defer></script>
<script src="assets/js/kopf.js?v=202609052040" defer></script>
<script src="assets/js/glocke.js?v=202609052040" defer></script>
<script src="assets/js/calls.js?v=202609052040" defer></script>
<script src="assets/js/ki.js?v=202609060056" defer></script>
<script src="assets/js/wahl.js?v=202609060056" defer></script>
<script src="assets/js/bereiche.js?v=202609060056" defer></script>
<script src="assets/js/kopf.js?v=202609060056" defer></script>
<script src="assets/js/glocke.js?v=202609060056" defer></script>
<script src="assets/js/calls.js?v=202609060056" defer></script>
</body>
</html>
+11 -11
View File
@@ -9,10 +9,10 @@
<meta name="theme-color" content="#0674b9" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/start.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/content.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/start.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/content.css?v=202609060056" />
</head>
<body class="start">
@@ -166,12 +166,12 @@
</main>
<script src="assets/js/wahl.js?v=202609052040" defer></script>
<script src="assets/js/bereiche.js?v=202609052040" defer></script>
<script src="assets/js/kopf.js?v=202609052040" defer></script>
<script src="assets/js/glocke.js?v=202609052040" defer></script>
<script src="assets/js/checkliste.js?v=202609052040" defer></script>
<script src="assets/js/vorlagen.js?v=202609052040" defer></script>
<script src="assets/js/content.js?v=202609052040" defer></script>
<script src="assets/js/wahl.js?v=202609060056" defer></script>
<script src="assets/js/bereiche.js?v=202609060056" defer></script>
<script src="assets/js/kopf.js?v=202609060056" defer></script>
<script src="assets/js/glocke.js?v=202609060056" defer></script>
<script src="assets/js/checkliste.js?v=202609060056" defer></script>
<script src="assets/js/vorlagen.js?v=202609060056" defer></script>
<script src="assets/js/content.js?v=202609060056" defer></script>
</body>
</html>
+9 -9
View File
@@ -9,10 +9,10 @@
<meta name="theme-color" content="#0674b9" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/start.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/dateien.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/start.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/dateien.css?v=202609060056" />
</head>
<body class="start">
@@ -95,10 +95,10 @@
</main>
<script src="assets/js/wahl.js?v=202609052040" defer></script>
<script src="assets/js/bereiche.js?v=202609052040" defer></script>
<script src="assets/js/kopf.js?v=202609052040" defer></script>
<script src="assets/js/glocke.js?v=202609052040" defer></script>
<script src="assets/js/dateien.js?v=202609052040" defer></script>
<script src="assets/js/wahl.js?v=202609060056" defer></script>
<script src="assets/js/bereiche.js?v=202609060056" defer></script>
<script src="assets/js/kopf.js?v=202609060056" defer></script>
<script src="assets/js/glocke.js?v=202609060056" defer></script>
<script src="assets/js/dateien.js?v=202609060056" defer></script>
</body>
</html>
+2 -2
View File
@@ -27,7 +27,7 @@
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609060056" />
</head>
<body class="gate">
@@ -145,6 +145,6 @@
</p>
</main>
<script src="assets/js/gate.js?v=202609052040" defer></script>
<script src="assets/js/gate.js?v=202609060056" defer></script>
</body>
</html>
+9 -9
View File
@@ -9,10 +9,10 @@
<meta name="theme-color" content="#0674b9" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/start.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/kalender.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/start.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/kalender.css?v=202609060056" />
</head>
<body class="start">
@@ -206,10 +206,10 @@
</main>
<script src="assets/js/wahl.js?v=202609052040" defer></script>
<script src="assets/js/bereiche.js?v=202609052040" defer></script>
<script src="assets/js/kopf.js?v=202609052040" defer></script>
<script src="assets/js/glocke.js?v=202609052040" defer></script>
<script src="assets/js/kalender.js?v=202609052040" defer></script>
<script src="assets/js/wahl.js?v=202609060056" defer></script>
<script src="assets/js/bereiche.js?v=202609060056" defer></script>
<script src="assets/js/kopf.js?v=202609060056" defer></script>
<script src="assets/js/glocke.js?v=202609060056" defer></script>
<script src="assets/js/kalender.js?v=202609060056" defer></script>
</body>
</html>
+9 -9
View File
@@ -9,10 +9,10 @@
<meta name="theme-color" content="#0674b9" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/start.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/personen.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/start.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/personen.css?v=202609060056" />
</head>
<body class="start">
@@ -123,10 +123,10 @@
</main>
<script src="assets/js/wahl.js?v=202609052040" defer></script>
<script src="assets/js/bereiche.js?v=202609052040" defer></script>
<script src="assets/js/kopf.js?v=202609052040" defer></script>
<script src="assets/js/glocke.js?v=202609052040" defer></script>
<script src="assets/js/personen.js?v=202609052040" defer></script>
<script src="assets/js/wahl.js?v=202609060056" defer></script>
<script src="assets/js/bereiche.js?v=202609060056" defer></script>
<script src="assets/js/kopf.js?v=202609060056" defer></script>
<script src="assets/js/glocke.js?v=202609060056" defer></script>
<script src="assets/js/personen.js?v=202609060056" defer></script>
</body>
</html>
+10 -10
View File
@@ -9,10 +9,10 @@
<meta name="theme-color" content="#0674b9" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/start.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/profil.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/start.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/profil.css?v=202609060056" />
</head>
<body class="start">
@@ -201,11 +201,11 @@
</main>
<script src="assets/js/wahl.js?v=202609052040" defer></script>
<script src="assets/js/bereiche.js?v=202609052040" defer></script>
<script src="assets/js/kopf.js?v=202609052040" defer></script>
<script src="assets/js/glocke.js?v=202609052040" defer></script>
<script src="assets/js/steckbrief.js?v=202609052040" defer></script>
<script src="assets/js/profil.js?v=202609052040" defer></script>
<script src="assets/js/wahl.js?v=202609060056" defer></script>
<script src="assets/js/bereiche.js?v=202609060056" defer></script>
<script src="assets/js/kopf.js?v=202609060056" defer></script>
<script src="assets/js/glocke.js?v=202609060056" defer></script>
<script src="assets/js/steckbrief.js?v=202609060056" defer></script>
<script src="assets/js/profil.js?v=202609060056" defer></script>
</body>
</html>
+10 -10
View File
@@ -9,10 +9,10 @@
<meta name="theme-color" content="#0674b9" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/start.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/report.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/start.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/report.css?v=202609060056" />
</head>
<body class="start">
@@ -93,11 +93,11 @@
</main>
<script src="assets/js/ki.js?v=202609052040" defer></script>
<script src="assets/js/wahl.js?v=202609052040" defer></script>
<script src="assets/js/bereiche.js?v=202609052040" defer></script>
<script src="assets/js/kopf.js?v=202609052040" defer></script>
<script src="assets/js/glocke.js?v=202609052040" defer></script>
<script src="assets/js/report.js?v=202609052040" defer></script>
<script src="assets/js/ki.js?v=202609060056" defer></script>
<script src="assets/js/wahl.js?v=202609060056" defer></script>
<script src="assets/js/bereiche.js?v=202609060056" defer></script>
<script src="assets/js/kopf.js?v=202609060056" defer></script>
<script src="assets/js/glocke.js?v=202609060056" defer></script>
<script src="assets/js/report.js?v=202609060056" defer></script>
</body>
</html>
+9 -9
View File
@@ -9,10 +9,10 @@
<meta name="theme-color" content="#0674b9" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/start.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/scouting.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/start.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/scouting.css?v=202609060056" />
</head>
<body class="start">
@@ -126,10 +126,10 @@
</div>
</div>
<script src="assets/js/wahl.js?v=202609052040" defer></script>
<script src="assets/js/bereiche.js?v=202609052040" defer></script>
<script src="assets/js/kopf.js?v=202609052040" defer></script>
<script src="assets/js/glocke.js?v=202609052040" defer></script>
<script src="assets/js/scouting.js?v=202609052040" defer></script>
<script src="assets/js/wahl.js?v=202609060056" defer></script>
<script src="assets/js/bereiche.js?v=202609060056" defer></script>
<script src="assets/js/kopf.js?v=202609060056" defer></script>
<script src="assets/js/glocke.js?v=202609060056" defer></script>
<script src="assets/js/scouting.js?v=202609060056" defer></script>
</body>
</html>
+24 -8
View File
@@ -9,8 +9,8 @@
<meta name="theme-color" content="#0674b9" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/start.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/start.css?v=202609060056" />
</head>
<body class="start">
@@ -73,7 +73,23 @@
<section> mit Überschrift je Hälfte, damit ein Vorleseprogramm
die beiden Bereiche ansagen und anspringen kann -- ein Raster
allein ist für ihn nur eine Reihenfolge. -->
<section class="tagesblick" id="dran-block" hidden
<!-- PLATZ WIRD VORHER RESERVIERT, nicht nachträglich genommen.
Die Kachel war zuerst `hidden` und erschien erst, wenn ihre
Daten da waren. Sie ist aber hoch -- alles darunter sprang
dadurch nach unten. Gemessen von pruef-tempo-workspace: Der
Layout-Sprung von start.html stieg von 0 auf 0,96, zweimal
hintereinander bestätigt.
Ein Sprung ist kein Schönheitsfehler: Er ist der Grund, warum
man auf den falschen Knopf drückt. Man zielt auf etwas, und im
Moment des Klicks rutscht es weg.
Deshalb steht die Kachel von Anfang an da und hält ihre Höhe
(data-laedt="ja" → min-height im CSS). Erst wenn feststeht, dass
BEIDE Hälften leer sind, verschwindet sie -- und dieser Sprung
ist klein, weil sie dann nur die Platzhalterhöhe hatte. -->
<section class="tagesblick" id="dran-block" data-laedt="ja"
aria-labelledby="tagesblick-titel">
<h2 class="tagesblick__titel" id="tagesblick-titel">Dein Tag</h2>
@@ -144,10 +160,10 @@
</p>
</main>
<script src="assets/js/wahl.js?v=202609052040" defer></script>
<script src="assets/js/bereiche.js?v=202609052040" defer></script>
<script src="assets/js/kopf.js?v=202609052040" defer></script>
<script src="assets/js/glocke.js?v=202609052040" defer></script>
<script src="assets/js/start.js?v=202609052040" defer></script>
<script src="assets/js/wahl.js?v=202609060056" defer></script>
<script src="assets/js/bereiche.js?v=202609060056" defer></script>
<script src="assets/js/kopf.js?v=202609060056" defer></script>
<script src="assets/js/glocke.js?v=202609060056" defer></script>
<script src="assets/js/start.js?v=202609060056" defer></script>
</body>
</html>
+10 -10
View File
@@ -9,10 +9,10 @@
<meta name="theme-color" content="#0674b9" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/start.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/startcheck.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/start.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/startcheck.css?v=202609060056" />
</head>
<body class="start">
@@ -72,11 +72,11 @@
</main>
<script src="assets/js/ki.js?v=202609052040" defer></script>
<script src="assets/js/wahl.js?v=202609052040" defer></script>
<script src="assets/js/bereiche.js?v=202609052040" defer></script>
<script src="assets/js/kopf.js?v=202609052040" defer></script>
<script src="assets/js/glocke.js?v=202609052040" defer></script>
<script src="assets/js/startcheck.js?v=202609052040" defer></script>
<script src="assets/js/ki.js?v=202609060056" defer></script>
<script src="assets/js/wahl.js?v=202609060056" defer></script>
<script src="assets/js/bereiche.js?v=202609060056" defer></script>
<script src="assets/js/kopf.js?v=202609060056" defer></script>
<script src="assets/js/glocke.js?v=202609060056" defer></script>
<script src="assets/js/startcheck.js?v=202609060056" defer></script>
</body>
</html>
+9 -9
View File
@@ -9,10 +9,10 @@
<meta name="theme-color" content="#0674b9" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/start.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/profil.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/start.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/profil.css?v=202609060056" />
</head>
<body class="start">
@@ -113,10 +113,10 @@
</main>
<script src="assets/js/wahl.js?v=202609052040" defer></script>
<script src="assets/js/bereiche.js?v=202609052040" defer></script>
<script src="assets/js/kopf.js?v=202609052040" defer></script>
<script src="assets/js/glocke.js?v=202609052040" defer></script>
<script src="assets/js/steckbrief.js?v=202609052040" defer></script>
<script src="assets/js/wahl.js?v=202609060056" defer></script>
<script src="assets/js/bereiche.js?v=202609060056" defer></script>
<script src="assets/js/kopf.js?v=202609060056" defer></script>
<script src="assets/js/glocke.js?v=202609060056" defer></script>
<script src="assets/js/steckbrief.js?v=202609060056" defer></script>
</body>
</html>
+7 -7
View File
@@ -9,9 +9,9 @@
<meta name="theme-color" content="#0674b9" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/start.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/uebersicht.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/start.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/uebersicht.css?v=202609060056" />
</head>
<body class="start">
@@ -59,10 +59,10 @@
</main>
<script src="assets/js/bereiche.js?v=202609052040" defer></script>
<script src="assets/js/bereiche.js?v=202609060056" defer></script>
<script src="assets/js/kopf.js?v=202609052040" defer></script>
<script src="assets/js/glocke.js?v=202609052040" defer></script>
<script src="assets/js/uebersicht.js?v=202609052040" defer></script>
<script src="assets/js/kopf.js?v=202609060056" defer></script>
<script src="assets/js/glocke.js?v=202609060056" defer></script>
<script src="assets/js/uebersicht.js?v=202609060056" defer></script>
</body>
</html>
+9 -9
View File
@@ -9,10 +9,10 @@
<meta name="theme-color" content="#0674b9" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/start.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/wissen.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/start.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609060056" />
<link rel="stylesheet" href="assets/css/wissen.css?v=202609060056" />
</head>
<body class="start">
@@ -177,10 +177,10 @@
</main>
<script src="assets/js/wahl.js?v=202609052040" defer></script>
<script src="assets/js/bereiche.js?v=202609052040" defer></script>
<script src="assets/js/kopf.js?v=202609052040" defer></script>
<script src="assets/js/glocke.js?v=202609052040" defer></script>
<script src="assets/js/wissen.js?v=202609052040" defer></script>
<script src="assets/js/wahl.js?v=202609060056" defer></script>
<script src="assets/js/bereiche.js?v=202609060056" defer></script>
<script src="assets/js/kopf.js?v=202609060056" defer></script>
<script src="assets/js/glocke.js?v=202609060056" defer></script>
<script src="assets/js/wissen.js?v=202609060056" defer></script>
</body>
</html>