DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hinweisliste "Was ist dran": Zeichen, Zahl und Farbe der Zielkachel

Browse Source 
Die Zeilen waren die letzten schmucklosen Elemente der Startseite. Jetzt
traegt jede das Zeichen UND die Farbe der Kachel, zu der sie fuehrt --
Hinweis und Ziel gehoeren dadurch sichtbar zusammen, ohne dass die
Zuordnung ein zweites Mal irgendwo steht (sie kommt aus derselben
Tabelle wie die Zahl auf der Kachel). Die Anzahl steht vorn, getrennt vom
Satz und in gleicher Zeichenbreite; beim Ueberfliegen von sieben Zeilen
liest man genau sie zuerst. Ueberfaellig schlaegt Bereichsfarbe und
bleibt rot -- wenn etwas brennt, zaehlt zuerst, DASS es brennt.

Dabei gefunden und behoben: Die Farbtoene hingen an .kachel[data-ton=n].
Um sie fuer die Hinweiszeilen mitzunutzen, wurde .kachel entfernt --
damit gewann aber die Voreinstellung ".kachel { --ton: var(--akzent) }"
weiter unten in der Datei den Wettstreit der Regeln, und alle siebzehn
Kacheln waeren blau gewesen. Die Voreinstellung steht jetzt in :where()
und zaehlt dabei als nicht vorhanden. Die Browserpruefung hat das
gemeldet ("1 Farbe auf 17 Kacheln"), nicht das Auge.

"Nichts offen" ist kein gestrichelter Kasten mehr, sondern eine gute
Nachricht mit ruhigem Gruen und Haken. Weil er jetzt display:flex hat,
war er staerker als das hidden des Browsers und haette IMMER dagestanden
-- eigene Regel dafuer plus eine Pruefung, die beide Richtungen misst.

Neue Pruefungen (pruef-start-ansicht): Zeichen, vorangestellte Zahl,
keine doppelte Zahl im Satz, ganzer Satz fuer Vorleseprogramme, Farbe
gleich der Kachelfarbe an echten Bildpunkten, rot nur bei ueberfaellig.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-01 09:39:59 +02:00
co-authored by Claude Opus 5
parent e74254263f
commit 1816ed9e1f
23 changed files with 365 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pruef-buehne.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 821 KiB

After

Width:  |  Height:  |  Size: 834 KiB

pruef-start-computer.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

pruef-start-creator.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

pruef-start-handy.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 613 KiB

After

Width:  |  Height:  |  Size: 624 KiB

server/pruef-start-ansicht.mjs
+74
View File
@@ -98,6 +98,19 @@ const lesen = (seite) => seite.evaluate(() => ({
hinweise: [...document.querySelectorAll("#dran .dran__punkt")]
.filter((z) => z.offsetParent !== null).length,
hinweiseGesamt: document.querySelectorAll("#dran .dran__punkt").length,
/* Jede Hinweiszeile traegt Zeichen und Farbe der Kachel, zu der sie
fuehrt. Geprueft wird beides an den echten Bildpunkten, nicht an der
Absicht im Quelltext. */
dranZeilen: [...document.querySelectorAll("#dran .dran__punkt")].map((z) => ({
ton: z.dataset.ton || null,
stufe: z.dataset.stufe,
pfade: z.querySelectorAll(".dran__svg path").length,
strich: getComputedStyle(z.querySelector(".dran__svg")).stroke,
zahl: z.querySelector(".dran__zahl")?.textContent || null,
zahlFarbe: getComputedStyle(z.querySelector(".dran__zahl")).color,
text: z.querySelector(".dran__text")?.textContent || "",
label: z.querySelector(".dran__link")?.getAttribute("aria-label") || "",
})),
zeichenGroesse: Math.round(document.querySelector(".kachel__zeichen")?.getBoundingClientRect().width || 0),
wasserzeichen: document.querySelectorAll(".kachel__wasserzeichen").length,
wasserzeichenDeckung: getComputedStyle(document.querySelector(".kachel__wasserzeichen") || document.body).opacity,
@@ -177,6 +190,44 @@ for (const [breite, wie] of [[1440, "Computer"], [390, "Handy"]]) {
ok(r.abgeschnitten.length === 0,
`kein Text wird abgeschnitten (${r.abgeschnitten.join(" | ") || "keiner"})`);
ok(r.hinweise <= 4, `höchstens vier Hinweise sichtbar (${r.hinweise} von ${r.hinweiseGesamt})`);
/* --- Die Hinweiszeilen ------------------------------------------------
Eine Zeile ohne Zeichen oder ohne Zahl waere ein halbes Bauteil und
faellt beim Ueberfliegen sofort auf. */
ok(r.dranZeilen.length > 0, `es liegen Hinweise vor (${r.dranZeilen.length})`);
ok(r.dranZeilen.every((z) => z.pfade > 0),
`jede Hinweiszeile trägt ihr Zeichen (${r.dranZeilen.filter((z) => !z.pfade).length} ohne)`);
ok(r.dranZeilen.every((z) => /^[1-9]\d*$/.test(z.zahl || "")),
`jede Hinweiszeile stellt ihre Zahl voran (${r.dranZeilen.map((z) => z.zahl).join(",")})`);
/* Die Zahl steht vorn -- im Satz darf sie nicht noch einmal stehen. */
ok(r.dranZeilen.every((z) => !/^\d/.test(z.text)),
`und keine Zahl steht doppelt (${r.dranZeilen.map((z) => z.text).find((t) => /^\d/.test(t)) || "keine"})`);
/* Vorleseprogramme bekommen den ganzen Satz, nicht "2" und "Aufgaben sind
überfällig" als zwei Bruchstuecke. */
ok(r.dranZeilen.every((z) => z.label.includes(z.zahl) && z.label.length > 10),
"und der ganze Satz steht für Vorleseprogramme dran");
/* Farbe folgt dem Bereich, nicht dem Bauteil: Der Ton der Zeile muss
der Ton einer wirklich vorhandenen Kachel sein. */
const kachelToene = new Set(r.kacheln.map((k) => k.ton));
ok(r.dranZeilen.every((z) => z.ton && kachelToene.has(z.ton)),
`jede Zeile trägt den Farbton ihrer Kachel (${r.dranZeilen.map((z) => z.ton).join(",")})`);
/* Und zwar wirklich DIESELBE Farbe, an echten Bildpunkten gemessen --
"hat einen Ton" reicht nicht, sonst faellt nicht auf, wenn alle
Zeilen denselben tragen. */
const kachelFarbe = new Map(r.kacheln.map((k) => [k.ton, k.farbe]));
const falsch = r.dranZeilen.filter((z) => z.stufe !== "warnung")
.filter((z) => z.zahlFarbe !== kachelFarbe.get(z.ton));
ok(falsch.length === 0,
`und die Farbe ist die der Kachel (${falsch.map((z) => `${z.ton}: ${z.zahlFarbe} statt ${kachelFarbe.get(z.ton)}`).join(" | ") || "alle"})`);
/* Ueberfaellig schlaegt Bereichsfarbe -- dort muss Rot stehen, sonst
geht die Dringlichkeit in siebzehn Farben unter. */
const warnZeilen = r.dranZeilen.filter((z) => z.stufe === "warnung");
ok(warnZeilen.length > 0 && warnZeilen.every((z) => z.zahlFarbe === "rgb(255, 154, 162)"),
`überfällige Zeilen sind rot (${warnZeilen.length} Stück, ${warnZeilen[0]?.zahlFarbe})`);
/* Und die uebrigen eben NICHT rot -- sonst waere die Regel wertlos. */
ok(r.dranZeilen.filter((z) => z.stufe !== "warnung")
.every((z) => z.zahlFarbe !== "rgb(255, 154, 162)"),
"und nur die");
ok(r.zahlen === 6, `die Aufgabenzahlen stehen (${r.zahlen})`);
ok(!r.zahlenLeer, "und nicht der Leer-Satz");
ok(r.ueber <= 0, `nichts steht über (${r.ueber}px, ${r.ueberstehend.join(", ")})`);
@@ -217,6 +268,29 @@ console.log("\n=== Scout");
await kontext.close();
}
/* Der Satz "Nichts offen" ist ein Kasten mit display:flex geworden. Damit
ist er staerker als das hidden des Browsers -- ohne eine eigene Regel
stuende er IMMER da, auch wenn Arbeit offen ist. Genau das wird hier
gemessen, in beide Richtungen. */
console.log("\n=== Der Satz 'Nichts offen' erscheint nur, wenn nichts offen ist");
{
const kontext = await browser.newContext({ viewport: { width: 1440, height: 1200 } });
const seite = await anmelden(kontext, "admin", "CODE-DOGI-0001");
const r = await seite.evaluate(() => {
const k = document.getElementById("zahlen-leer");
const zu = getComputedStyle(k).display;
k.hidden = false;
const auf = getComputedStyle(k).display;
const haken = k.querySelectorAll("svg path").length;
k.hidden = true;
return { zu, auf, haken };
});
ok(r.zu === "none", `versteckt heisst versteckt (${r.zu})`);
ok(r.auf !== "none", `und sichtbar heisst sichtbar (${r.auf})`);
ok(r.haken > 0, `der Haken ist da (${r.haken})`);
await kontext.close();
}
console.log("\n=== Weniger Bewegung: keine Animation");
{
const kontext = await browser.newContext({
workspace/assets/css/start.css
+133 -38
View File
@@ -346,27 +346,38 @@ body.start > main { position: relative; z-index: 1; }
genommen -- LIVE rot, Technik gelb, Reports grün, Personen rot-gold.
Geprüft gegen genau diesen Hintergrund: Helligkeitsband, Farbstärke
und Kontrast bestehen für alle siebzehn. */
.kachel[data-ton="1"] { --ton: #3e95e7; } /* 250° */
.kachel[data-ton="2"] { --ton: #7089ea; } /* 271° */
.kachel[data-ton="3"] { --ton: #947de2; } /* 292° */
.kachel[data-ton="4"] { --ton: #b173d0; } /* 314° */
.kachel[data-ton="5"] { --ton: #c66ab5; } /* 335° */
.kachel[data-ton="6"] { --ton: #d56694; } /* 356° */
.kachel[data-ton="7"] { --ton: #dc666f; } /* 17° */
.kachel[data-ton="8"] { --ton: #db6c48; } /* 38° */
.kachel[data-ton="9"] { --ton: #d17717; } /* 59° */
.kachel[data-ton="10"] { --ton: #ba8610; } /* 81° */
.kachel[data-ton="11"] { --ton: #a29205; } /* 102° */
.kachel[data-ton="12"] { --ton: #809e23; } /* 123° */
.kachel[data-ton="13"] { --ton: #50a752; } /* 144° */
.kachel[data-ton="14"] { --ton: #07aa7c; } /* 165° */
.kachel[data-ton="15"] { --ton: #12a69b; } /* 186° */
.kachel[data-ton="16"] { --ton: #04a3b4; } /* 208° */
.kachel[data-ton="17"] { --ton: #059ece; } /* 229° */
und Kontrast bestehen für alle siebzehn.
Die Töne hängen bewusst NICHT an .kachel, sondern nur am Merkmal
data-ton: Dieselbe Nummer färbt die Kachel und die Hinweiszeile, die
dorthin führt. Eine Farbe gehört hier zu einem Bereich, nicht zu einem
Bauteil. */
[data-ton="1"] { --ton: #3e95e7; } /* 250° */
[data-ton="2"] { --ton: #7089ea; } /* 271° */
[data-ton="3"] { --ton: #947de2; } /* 292° */
[data-ton="4"] { --ton: #b173d0; } /* 314° */
[data-ton="5"] { --ton: #c66ab5; } /* 335° */
[data-ton="6"] { --ton: #d56694; } /* 356° */
[data-ton="7"] { --ton: #dc666f; } /* 17° */
[data-ton="8"] { --ton: #db6c48; } /* 38° */
[data-ton="9"] { --ton: #d17717; } /* 59° */
[data-ton="10"] { --ton: #ba8610; } /* 81° */
[data-ton="11"] { --ton: #a29205; } /* 102° */
[data-ton="12"] { --ton: #809e23; } /* 123° */
[data-ton="13"] { --ton: #50a752; } /* 144° */
[data-ton="14"] { --ton: #07aa7c; } /* 165° */
[data-ton="15"] { --ton: #12a69b; } /* 186° */
[data-ton="16"] { --ton: #04a3b4; } /* 208° */
[data-ton="17"] { --ton: #059ece; } /* 229° */
/* Rückfallwert für alles, was einen Ton braucht, aber keine Nummer hat.
Steht bewusst in :where() -- damit zählt die Zeile beim Wettstreit der
Regeln als NICHT vorhanden und die Nummer oben gewinnt immer. Ohne
das Kniff hätte diese Zeile (eine Klasse, weiter unten in der Datei)
alle siebzehn Töne überstimmt und jede Kachel wäre blau gewesen. */
:where(.kachel, .dran__punkt) { --ton: var(--akzent); }
.kachel {
--ton: var(--akzent);
/* Wo der Zeiger steht. Wird von start.js gesetzt; die Mitte ist der
Rückfallwert, damit ohne Zeiger nichts springt. */
--mx: 50%;
@@ -568,11 +579,35 @@ body.start > main { position: relative; z-index: 1; }
}
}
/* Der leere Zustand ist kein Fehler, sondern das Ziel -- deshalb ein
ruhiges Gruen statt gestrichelter Leere. Gedeckt gehalten, kein
Signalgruen: Es soll freuen, nicht blenden. */
.zahlen-leer {
margin: 0; padding: 15px 17px;
font-size: .88rem; color: var(--text-still);
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
display: flex; align-items: center; gap: 13px;
margin: 0; padding: 14px 17px;
font-size: .9rem; color: var(--text);
border: 1px solid rgba(80, 167, 130, .28);
border-radius: var(--radius-klein);
background: linear-gradient(90deg, rgba(80, 167, 130, .1), transparent 60%);
}
.zahlen-leer__haken {
flex: none; display: grid; place-items: center;
width: 30px; height: 30px; border-radius: 50%;
border: 1px solid rgba(80, 167, 130, .38);
background: rgba(80, 167, 130, .14);
}
.zahlen-leer__haken svg {
width: 16px; height: 16px;
fill: none; stroke: #6fbd95; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
}
/* Pflicht, sobald hier ein display steht: Das display der Klasse ist
staerker als das hidden des Browsers -- ohne diese Zeile stuende der
Satz IMMER da, auch wenn Aufgaben offen sind. */
.zahlen-leer[hidden] { display: none; }
.zahlen-leer__still { color: var(--text-leise); }
.zahlen-leer strong { font-weight: 650; }
.zahlen-leer strong::after { content: " "; }
@media (max-width: 900px) {
.kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@@ -629,49 +664,109 @@ body.start > main { position: relative; z-index: 1; }
.willkommen, .dran__liste, .inhalt .fuss { max-width: 940px; }
.dran { margin-bottom: 30px; }
.dran__liste { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.dran__liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* Jede Zeile traegt Zeichen und Farbe ihrer Kachel (data-ton kommt aus
start.js). Ohne Zuordnung bleibt der Hausakzent -- eine Zeile ohne
Farbe gibt es nicht. */
.dran__punkt {
/* --ton kommt aus data-ton bzw. dem Rückfallwert in :where() oben. */
position: relative;
overflow: hidden;
border: 1px solid var(--rand);
border-radius: var(--radius-klein);
background: rgba(255, 255, 255, .028);
transition: border-color .18s ease, background .18s ease;
background:
linear-gradient(90deg, color-mix(in srgb, var(--ton) 9%, transparent), transparent 46%),
rgba(255, 255, 255, .028);
transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
/* Der Streifen links ist die Farbe der Kachel, zu der es geht -- oben
kraeftig, unten auslaufend, damit er nicht wie ein Balken wirkt. */
.dran__punkt::before {
content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px;
border-radius: 0 2px 2px 0;
background: var(--rand);
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg,
var(--ton),
color-mix(in srgb, var(--ton) 35%, transparent));
}
/* Ueberfaellig schlaegt Bereichsfarbe: Wenn etwas brennt, zaehlt zuerst
DASS es brennt. Das Zeichen sagt weiterhin, wo. */
.dran__punkt[data-stufe="warnung"] {
--ton: var(--warn);
border-color: rgba(255, 154, 162, .3);
background: rgba(255, 154, 162, .055);
}
.dran__punkt[data-stufe="warnung"]::before { background: var(--warn); }
.dran__punkt[data-stufe="offen"]::before { background: var(--akzent); opacity: .7; }
.dran__punkt[data-stufe="ruhig"] { opacity: .78; }
.dran__punkt:hover { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); }
.dran__punkt[data-stufe="ruhig"] { opacity: .8; }
.dran__punkt:hover {
border-color: color-mix(in srgb, var(--ton) 42%, var(--rand));
background:
linear-gradient(90deg, color-mix(in srgb, var(--ton) 15%, transparent), transparent 52%),
rgba(255, 255, 255, .05);
}
.dran__punkt[data-stufe="ruhig"]:hover { opacity: 1; }
.dran__link {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 12px 15px 12px 18px;
display: grid;
grid-template-columns: auto auto 1fr auto;
align-items: center; gap: 13px;
padding: 11px 15px 11px 17px;
color: var(--text); text-decoration: none; font-size: .9rem;
}
.dran__punkt[data-stufe="warnung"] .dran__text { font-weight: 600; }
.dran__zeichen {
display: grid; place-items: center;
width: 30px; height: 30px; border-radius: 9px;
border: 1px solid color-mix(in srgb, var(--ton) 30%, transparent);
background: color-mix(in srgb, var(--ton) 13%, transparent);
transition: transform .18s ease, background .18s ease;
}
.dran__svg {
width: 16px; height: 16px;
fill: none; stroke: var(--ton); stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round;
}
.dran__link:hover .dran__zeichen {
transform: scale(1.07);
background: color-mix(in srgb, var(--ton) 20%, transparent);
}
/* Die Zahl steht vorn und in gleicher Zeichenbreite: Beim Ueberfliegen
von sieben Zeilen liest man sie zuerst, und sie sollen untereinander
stehen, nicht huepfen. */
.dran__zahl {
font-size: 1.15rem; font-weight: 700; line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--ton);
min-width: 1.6ch; text-align: right;
}
.dran__text { color: var(--text-leise); }
.dran__punkt[data-stufe="warnung"] .dran__text { color: var(--text); font-weight: 600; }
.dran__pfeil {
color: var(--text-still); font-size: .95rem;
transition: transform .18s ease, color .18s ease;
}
.dran__link:hover .dran__pfeil { color: var(--akzent); transform: translateX(3px); }
.dran__link:hover .dran__pfeil { color: var(--ton); transform: translateX(3px); }
/* Auf dem Handy ist Platz das knappste Gut: Zeichen und Pfeil weichen,
Zahl und Satz bleiben -- die tragen die Aussage. */
@media (max-width: 460px) {
.dran__link { grid-template-columns: auto 1fr; gap: 10px; padding: 11px 13px 11px 15px; }
.dran__zeichen, .dran__pfeil { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.kachel__wasserzeichen, .kachel__zeichen { transition: none; }
.kachel:hover .kachel__wasserzeichen { transform: rotate(-8deg); }
.kachel:hover .kachel__zeichen { transform: none; }
.dran__punkt, .dran__pfeil { transition: none; }
.dran__punkt, .dran__pfeil, .dran__zeichen { transition: none; }
.dran__link:hover .dran__pfeil { transform: none; }
.dran__link:hover .dran__zeichen { transform: none; }
}
/* Ohne Farbverlaeufe (Kontrastmodus, Druck) bleibt der Streifen als
einfarbige Kante -- sonst waere die Zuordnung dort ganz weg. */
@media (forced-colors: active) {
.dran__punkt::before { background: CanvasText; }
.dran__svg { stroke: CanvasText; }
.dran__zahl { color: CanvasText; }
}
/* =====================================================================
workspace/assets/js/start.js
+42 -5
View File
@@ -169,6 +169,18 @@
ohne_profil: 'Creator-Profile',
};
/* Findet einen Bereich über seinen Namen -- damit Hinweis und Kachel
dasselbe Zeichen und denselben Farbton benutzen, ohne dass die
Zuordnung ein zweites Mal irgendwo stünde. */
const bereichZu = (name) => {
if (!name) return null;
for (const g of GRUPPEN) {
const b = g.bereiche.find((x) => x.name === name);
if (b) return b;
}
return null;
};
const $ = (id) => document.getElementById(id);
const el = (tag, klasse, text) => {
const k = document.createElement(tag);
@@ -177,11 +189,11 @@
return k;
};
function zeichenBauen(name) {
function zeichenBauen(name, klasse = 'kachel__svg') {
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', '0 0 24 24');
svg.setAttribute('aria-hidden', 'true');
svg.setAttribute('class', 'kachel__svg');
svg.setAttribute('class', klasse);
for (const d of (ZEICHEN[name] || [])) {
const p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
p.setAttribute('d', d);
@@ -392,15 +404,40 @@
const li = el('li', 'dran__punkt');
li.dataset.stufe = h.stufe;
/* Jeder Hinweis fuehrt irgendwohin -- ein Hinweis ohne Ziel ist
/* Ein Hinweis trägt ZEICHEN UND FARBE der Kachel, zu der er führt.
Dadurch gehört sichtbar zusammen, was zusammengehört: Wer die
rote Zeile „2 Aufgaben sind überfällig" sieht, erkennt weiter
unten dieselbe Farbe und dasselbe Zeichen auf der Kachel
wieder -- und weiß, wohin er muss, bevor er den Text zu Ende
gelesen hat. Beides kommt aus derselben Zuordnung wie die Zahl
auf der Kachel, es gibt also keine zweite Liste. */
const kachel = bereichZu(HINWEIS_ZU_KACHEL[h.art]);
if (kachel) li.dataset.ton = String(kachel.ton);
/* Jeder Hinweis führt irgendwohin -- ein Hinweis ohne Ziel ist
nur ein schlechtes Gewissen. */
const a = el('a', 'dran__link');
a.href = h.ziel;
a.append(el('span', 'dran__text',
(EINZAHL[h.art] || ((n) => `${n} × ${h.text}`))(h.anzahl)));
if (kachel) {
const zeichen = el('span', 'dran__zeichen');
zeichen.append(zeichenBauen(kachel.zeichen, 'dran__svg'));
a.append(zeichen);
}
/* Die Zahl steht vorn und getrennt vom Satz. Man liest sie zuerst,
und beim Überfliegen von sieben Zeilen zählt genau das. */
a.append(el('span', 'dran__zahl', String(h.anzahl)));
const satz = (EINZAHL[h.art] || ((n) => `${n} × ${h.text}`))(h.anzahl);
/* Die Zahl steht schon davor -- im Satz wäre sie doppelt. */
a.append(el('span', 'dran__text', satz.replace(/^\d+\s+(×\s+)?/, '')));
const pfeil = el('span', 'dran__pfeil', '→');
pfeil.setAttribute('aria-hidden', 'true');
a.append(pfeil);
/* Vorleseprogramme bekommen den ganzen Satz, nicht die Bruchstücke. */
a.setAttribute('aria-label', satz);
li.append(a);
liste.append(li);
}
workspace/aufgaben.html
+6 -6
View File
@@ -7,9 +7,9 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010939" />
</head>
<body class="start">
@@ -139,8 +139,8 @@
</form>
</dialog>
<script src="assets/js/wahl.js?v=202609010545" defer></script>
<script src="assets/js/kopf.js?v=202609010545" defer></script>
<script src="assets/js/aufgaben.js?v=202609010545" defer></script>
<script src="assets/js/wahl.js?v=202609010939" defer></script>
<script src="assets/js/kopf.js?v=202609010939" defer></script>
<script src="assets/js/aufgaben.js?v=202609010939" defer></script>
</body>
</html>
workspace/automation.html
+7 -7
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/automation.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/automation.css?v=202609010939" />
</head>
<body class="start">
@@ -132,8 +132,8 @@
</main>
<script src="assets/js/wahl.js?v=202609010545" defer></script>
<script src="assets/js/kopf.js?v=202609010545" defer></script>
<script src="assets/js/automation.js?v=202609010545" defer></script>
<script src="assets/js/wahl.js?v=202609010939" defer></script>
<script src="assets/js/kopf.js?v=202609010939" defer></script>
<script src="assets/js/automation.js?v=202609010939" defer></script>
</body>
</html>
workspace/bereich.html
+7 -7
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/bereich.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/bereich.css?v=202609010939" />
</head>
<body class="start">
@@ -103,8 +103,8 @@
</main>
<script src="assets/js/wahl.js?v=202609010545" defer></script>
<script src="assets/js/kopf.js?v=202609010545" defer></script>
<script src="assets/js/bereich.js?v=202609010545" defer></script>
<script src="assets/js/wahl.js?v=202609010939" defer></script>
<script src="assets/js/kopf.js?v=202609010939" defer></script>
<script src="assets/js/bereich.js?v=202609010939" defer></script>
</body>
</html>
workspace/calls.html
+8 -8
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/calls.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/calls.css?v=202609010939" />
</head>
<body class="start">
@@ -54,9 +54,9 @@
</main>
<script src="assets/js/ki.js?v=202609010545" defer></script>
<script src="assets/js/wahl.js?v=202609010545" defer></script>
<script src="assets/js/kopf.js?v=202609010545" defer></script>
<script src="assets/js/calls.js?v=202609010545" defer></script>
<script src="assets/js/ki.js?v=202609010939" defer></script>
<script src="assets/js/wahl.js?v=202609010939" defer></script>
<script src="assets/js/kopf.js?v=202609010939" defer></script>
<script src="assets/js/calls.js?v=202609010939" defer></script>
</body>
</html>
workspace/content.html
+7 -7
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/content.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/content.css?v=202609010939" />
</head>
<body class="start">
@@ -158,8 +158,8 @@
</main>
<script src="assets/js/wahl.js?v=202609010545" defer></script>
<script src="assets/js/kopf.js?v=202609010545" defer></script>
<script src="assets/js/content.js?v=202609010545" defer></script>
<script src="assets/js/wahl.js?v=202609010939" defer></script>
<script src="assets/js/kopf.js?v=202609010939" defer></script>
<script src="assets/js/content.js?v=202609010939" defer></script>
</body>
</html>
workspace/dateien.html
+7 -7
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/dateien.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/dateien.css?v=202609010939" />
</head>
<body class="start">
@@ -93,8 +93,8 @@
</main>
<script src="assets/js/wahl.js?v=202609010545" defer></script>
<script src="assets/js/kopf.js?v=202609010545" defer></script>
<script src="assets/js/dateien.js?v=202609010545" defer></script>
<script src="assets/js/wahl.js?v=202609010939" defer></script>
<script src="assets/js/kopf.js?v=202609010939" defer></script>
<script src="assets/js/dateien.js?v=202609010939" defer></script>
</body>
</html>
workspace/index.html
+2 -2
View File
@@ -25,7 +25,7 @@
type="image/webp" media="(max-width: 899px)" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010939" />
</head>
<body class="gate">
@@ -143,6 +143,6 @@
</p>
</main>
<script src="assets/js/gate.js?v=202609010545" defer></script>
<script src="assets/js/gate.js?v=202609010939" defer></script>
</body>
</html>
workspace/kalender.html
+7 -7
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/kalender.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/kalender.css?v=202609010939" />
</head>
<body class="start">
@@ -99,8 +99,8 @@
</main>
<script src="assets/js/wahl.js?v=202609010545" defer></script>
<script src="assets/js/kopf.js?v=202609010545" defer></script>
<script src="assets/js/kalender.js?v=202609010545" defer></script>
<script src="assets/js/wahl.js?v=202609010939" defer></script>
<script src="assets/js/kopf.js?v=202609010939" defer></script>
<script src="assets/js/kalender.js?v=202609010939" defer></script>
</body>
</html>
workspace/personen.html
+7 -7
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/personen.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/personen.css?v=202609010939" />
</head>
<body class="start">
@@ -121,8 +121,8 @@
</main>
<script src="assets/js/wahl.js?v=202609010545" defer></script>
<script src="assets/js/kopf.js?v=202609010545" defer></script>
<script src="assets/js/personen.js?v=202609010545" defer></script>
<script src="assets/js/wahl.js?v=202609010939" defer></script>
<script src="assets/js/kopf.js?v=202609010939" defer></script>
<script src="assets/js/personen.js?v=202609010939" defer></script>
</body>
</html>
workspace/profil.html
+7 -7
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/profil.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/profil.css?v=202609010939" />
</head>
<body class="start">
@@ -132,8 +132,8 @@
</main>
<script src="assets/js/wahl.js?v=202609010545" defer></script>
<script src="assets/js/kopf.js?v=202609010545" defer></script>
<script src="assets/js/profil.js?v=202609010545" defer></script>
<script src="assets/js/wahl.js?v=202609010939" defer></script>
<script src="assets/js/kopf.js?v=202609010939" defer></script>
<script src="assets/js/profil.js?v=202609010939" defer></script>
</body>
</html>
workspace/report.html
+8 -8
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/report.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/report.css?v=202609010939" />
</head>
<body class="start">
@@ -91,9 +91,9 @@
</main>
<script src="assets/js/ki.js?v=202609010545" defer></script>
<script src="assets/js/wahl.js?v=202609010545" defer></script>
<script src="assets/js/kopf.js?v=202609010545" defer></script>
<script src="assets/js/report.js?v=202609010545" defer></script>
<script src="assets/js/ki.js?v=202609010939" defer></script>
<script src="assets/js/wahl.js?v=202609010939" defer></script>
<script src="assets/js/kopf.js?v=202609010939" defer></script>
<script src="assets/js/report.js?v=202609010939" defer></script>
</body>
</html>
workspace/scouting.html
+7 -7
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/scouting.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/scouting.css?v=202609010939" />
</head>
<body class="start">
@@ -124,8 +124,8 @@
</div>
</div>
<script src="assets/js/wahl.js?v=202609010545" defer></script>
<script src="assets/js/kopf.js?v=202609010545" defer></script>
<script src="assets/js/scouting.js?v=202609010545" defer></script>
<script src="assets/js/wahl.js?v=202609010939" defer></script>
<script src="assets/js/kopf.js?v=202609010939" defer></script>
<script src="assets/js/scouting.js?v=202609010939" defer></script>
</body>
</html>
workspace/start.html
+16 -6
View File
@@ -7,8 +7,8 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010939" />
</head>
<body class="start">
@@ -58,7 +58,17 @@
<section class="zahlen-block" id="zahlen-block">
<p class="feldschild">Deine Aufgaben</p>
<ul class="zahlen" id="zahlen"></ul>
<p class="zahlen-leer" id="zahlen-leer" hidden>Nichts offen. Alles abgearbeitet.</p>
<!-- Kein Grau-in-Grau, wenn alles erledigt ist: Ein leerer Posteingang
ist eine gute Nachricht und darf auch so aussehen. -->
<div class="zahlen-leer" id="zahlen-leer" hidden>
<span class="zahlen-leer__haken" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="m5 12.6 4.4 4.4L19 7.4" /></svg>
</span>
<span>
<strong>Nichts offen.</strong>
<span class="zahlen-leer__still">Alles abgearbeitet – gönn dir was.</span>
</span>
</div>
</section>
<!-- Die Bereiche, in drei Gruppen: was man täglich braucht, was zu
@@ -73,8 +83,8 @@
</p>
</main>
<script src="assets/js/wahl.js?v=202609010545" defer></script>
<script src="assets/js/kopf.js?v=202609010545" defer></script>
<script src="assets/js/start.js?v=202609010545" defer></script>
<script src="assets/js/wahl.js?v=202609010939" defer></script>
<script src="assets/js/kopf.js?v=202609010939" defer></script>
<script src="assets/js/start.js?v=202609010939" defer></script>
</body>
</html>
workspace/startcheck.html
+8 -8
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/startcheck.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/startcheck.css?v=202609010939" />
</head>
<body class="start">
@@ -70,9 +70,9 @@
</main>
<script src="assets/js/ki.js?v=202609010545" defer></script>
<script src="assets/js/wahl.js?v=202609010545" defer></script>
<script src="assets/js/kopf.js?v=202609010545" defer></script>
<script src="assets/js/startcheck.js?v=202609010545" defer></script>
<script src="assets/js/ki.js?v=202609010939" defer></script>
<script src="assets/js/wahl.js?v=202609010939" defer></script>
<script src="assets/js/kopf.js?v=202609010939" defer></script>
<script src="assets/js/startcheck.js?v=202609010939" defer></script>
</body>
</html>
workspace/uebersicht.html
+5 -5
View File
@@ -7,9 +7,9 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/uebersicht.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/uebersicht.css?v=202609010939" />
</head>
<body class="start">
@@ -57,7 +57,7 @@
</main>
<script src="assets/js/kopf.js?v=202609010545" defer></script>
<script src="assets/js/uebersicht.js?v=202609010545" defer></script>
<script src="assets/js/kopf.js?v=202609010939" defer></script>
<script src="assets/js/uebersicht.js?v=202609010939" defer></script>
</body>
</html>
workspace/wissen.html
+7 -7
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/wissen.css?v=202609010545" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/start.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010939" />
<link rel="stylesheet" href="assets/css/wissen.css?v=202609010939" />
</head>
<body class="start">
@@ -175,8 +175,8 @@
</main>
<script src="assets/js/wahl.js?v=202609010545" defer></script>
<script src="assets/js/kopf.js?v=202609010545" defer></script>
<script src="assets/js/wissen.js?v=202609010545" defer></script>
<script src="assets/js/wahl.js?v=202609010939" defer></script>
<script src="assets/js/kopf.js?v=202609010939" defer></script>
<script src="assets/js/wissen.js?v=202609010939" defer></script>
</body>
</html>