Kalender neu: vier Ansichten, Anlaesse und Feiertage, selbst gerechnet
Der Kalender war eine Liste mit drei Zeitraum-Knoepfen. Jetzt ist er
aufgebaut wie der Redaktionskalender in VanVans Hub -- mit denselben
Bauteilen, aber auf Creator zugeschnitten.
VIER ANSICHTEN auf DENSELBEN Daten. Der Server liefert einen Zeitraum,
hier wird er nur unterschiedlich dargestellt -- so kann keine Ansicht
etwas anderes zeigen als die andere. Monat (Ueberblick und Rhythmus),
Woche (die sieben Tage gross), Liste (was kommt als Naechstes),
Zeitstrahl (wo sich etwas ballt und wo Luft ist).
ANLAESSE UND FEIERTAGE, vollstaendig selbst gerechnet. Ein leerer
Kalender ist nicht nur kahl, er ist nutzlos: Die Frage beim Planen
lautet nie "was habe ich schon eingetragen", sondern "worauf muss ich
zuarbeiten". Ostern ueber die Gauss-Formel, davon abgeleitet Karfreitag,
Himmelfahrt und Pfingsten, dazu die beweglichen Termine (Muttertag,
Black Friday als Freitag nach dem VIERTEN Donnerstag im November, die
vier Advente rueckwaerts vom vierten). Kein Dienst, keine Liste zum
Nachpflegen, keine Kosten, funktioniert offline und im Jahr 2040.
Bewusst NUR die neun bundesweiten Feiertage. Fronleichnam,
Reformationstag und Allerheiligen gelten je nach Bundesland -- ein
Kalender, der sie ueberall anzeigt, waere fuer die Haelfte der Leute
schlicht falsch. Lieber weniger behaupten als etwas Falsches.
Zwei beschriftete Reihen, die zwei VERSCHIEDENE Fragen beantworten:
"Als Naechstes" blickt ab heute nach vorn und aendert sich beim
Blaettern NICHT, "Im September" beschreibt den Monat, den man ansieht.
Ohne Ueberschriften waeren zwei gleich aussehende Reihen verwirrend.
Farbe folgt der Sache, nicht dem Rang -- dieselbe Regel wie bei den
Kacheln: Call blau, Termin violett, Review gruen, Frist orange. Ueberall
gleich: Pille im Raster, Zeile in der Liste, Filterknopf, Balken im
Zeitstrahl. Die KW-Spalte ist kein Schmuck, sondern die uebliche
Waehrung in Absprachen ("machen wir in KW 42").
NEUE PRUEFUNG pruef-kalender.mjs. Sie prueft nicht nur, DASS etwas
dasteht, sondern die gerechneten Tage gegen nachschlagbare Werte:
Ostersonntag 2026/2027/2030, Karfreitag, Himmelfahrt, Muttertag, Black
Friday und den 4. Advent. Ohne das koennte die Osterformel um einen Tag
daneben liegen und niemand wuerde es merken -- bis irgendwann jemand
Karfreitag arbeitet. Dazu: ganze Wochen im Raster, genau ein "heute",
vier Arten in vier Farben, dass ein ausgeschalteter Filter WIRKLICH
etwas ausblendet (ein Filter, der nur die Knopffarbe aendert, ist
keiner), Blaettern in beide Richtungen und der Tagesdialog.
ZWEI FUNDE:
- "Sep" am Monatsersten lag bei 3,96:1, wenn der Erste zufaellig HEUTE
ist -- dann liegt der Text auf der aufgehellten Zelle. Nur an echten
Bildpunkten zu sehen, nie an der Farbangabe.
- Die eigene Pruefung blaetterte stur vorwaerts und erreichte April 2026
nie (heute ist September). Zehn rote Meldungen, die wie ein
Rechenfehler in der Osterformel aussahen. Jetzt wird die Richtung aus
dem offenen Monat bestimmt.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
Binary file not shown.
|
After Width: | Height: | Size: 744 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
@@ -65,7 +65,11 @@ const { chromium } = await import(
|
||||
"file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
|
||||
const browser = await chromium.launch();
|
||||
|
||||
const SEITEN = ["start.html", "uebersicht.html", "personen.html", "content.html", "aufgaben.html"];
|
||||
/* Der Kalender kam am 01.09.2026 dazu -- er bringt die meisten neuen
|
||||
Farbflächen mit (vier Arten, Feiertagsfärbung, Anlassmarken), und
|
||||
genau dort entscheidet sich, ob der hellere Hintergrund noch trägt. */
|
||||
const SEITEN = ["start.html", "uebersicht.html", "personen.html", "content.html",
|
||||
"aufgaben.html", "kalender.html"];
|
||||
|
||||
for (const [breite, hoehe, wie] of [[1440, 950, "Computer"], [390, 780, "Handy"]]) {
|
||||
console.log(`\n=== ${wie} (${breite}x${hoehe})`);
|
||||
|
||||
@@ -0,0 +1,333 @@
|
||||
/* Browserpruefung des Kalenders: vier Ansichten, Anlaesse, Feiertage,
|
||||
Filter, Tagesdialog -- und die selbst gerechneten Tage gegen bekannte
|
||||
Werte.
|
||||
|
||||
Die Anlassrechnung ist der Teil, der still falsch sein kann: Ein um
|
||||
einen Tag verschobener Ostersonntag faellt niemandem auf, verschiebt
|
||||
aber Karfreitag, Himmelfahrt und Pfingsten gleich mit. Deshalb werden
|
||||
hier feste, nachschlagbare Daten geprueft und nicht nur "es steht
|
||||
irgendwas da". */
|
||||
import { mkdtempSync, rmSync } from "node:fs";
|
||||
import { tmpdir } from "node:os";
|
||||
import { join } from "node:path";
|
||||
|
||||
const ordner = mkdtempSync(join(tmpdir(), "ws-kal-"));
|
||||
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
|
||||
process.env.PORT = "4188";
|
||||
process.env.SITE_ACCESS_SECRET = "lokaler-test";
|
||||
process.env.SITE_ACCESS_CODE_DOGI = "DOGI-TEST-1";
|
||||
process.env.SITE_ACCESS_CODE_VANVAN = "VANVAN-TEST-1";
|
||||
process.env.SITE_PUBLIC_LAUNCH_AT = "2020-01-01T00:00:00+01:00";
|
||||
|
||||
const express = (await import("express")).default;
|
||||
const ec = express.response.cookie;
|
||||
express.response.cookie = function (n, w, o) { return ec.call(this, n, w, { ...(o || {}), secure: false }); };
|
||||
await import("./index.js");
|
||||
await new Promise((r) => setTimeout(r, 700));
|
||||
const BASIS = "http://127.0.0.1:4188";
|
||||
setTimeout(() => { console.log("ABBRUCH"); process.exit(1); }, 200_000).unref?.();
|
||||
|
||||
let fehler = 0;
|
||||
const ok = (b, t) => { console.log((b ? " ok " : " FEHL ") + t); if (!b) fehler++; };
|
||||
|
||||
await fetch(BASIS + "/workspace/api/anmelden", {
|
||||
method: "POST", headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ rolle: "admin", code: "x" }) }).catch(() => {});
|
||||
|
||||
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 heute = jetzt.slice(0, 10);
|
||||
const morgen = new Date(Date.now() + 86400_000).toISOString().slice(0, 10);
|
||||
const in5 = new Date(Date.now() + 5 * 86400_000).toISOString().slice(0, 10);
|
||||
|
||||
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");
|
||||
d.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt) VALUES (?,?,?,?,?,1,?)")
|
||||
.run(name, rolle, hash, salt, 32768, jetzt);
|
||||
return d.prepare("SELECT last_insert_rowid() AS id").get().id;
|
||||
}
|
||||
const idDogi = anlegen("Filipe", "admin", "CODE-DOGI-0001");
|
||||
const idAnna = anlegen("Tili", "creator", "CODE-ANNA-0001");
|
||||
|
||||
/* Drei Arten von Terminen und eine Frist -- damit alle vier Filter etwas
|
||||
zu zeigen haben und man sieht, ob die Farben auseinandergehalten
|
||||
werden. */
|
||||
const termine = [
|
||||
["call", heute + "T10:00", "Wochen-Call"],
|
||||
["call", heute + "T15:30", "Kurzes Rueckfragen"],
|
||||
["termin", morgen + "T09:00", "Dreh im Studio"],
|
||||
["review", in5 + "T14:00", "Monats-Review"],
|
||||
];
|
||||
for (const [art, beginn, titel] of termine) {
|
||||
d.prepare(`INSERT INTO termine (titel, art, beginn, dauer_min, creator_id, teilnehmer_id,
|
||||
erledigt, erstellt, erstellt_von) VALUES (?,?,?,?,?,?,0,?,?)`)
|
||||
.run(titel, art, beginn, 30, idAnna, idAnna, jetzt, idDogi);
|
||||
}
|
||||
d.prepare(`INSERT INTO aufgaben (titel, status, creator_id, verantwortlich_id, frist,
|
||||
prioritaet, erstellt, erstellt_von) VALUES (?,?,?,?,?,?,?,?)`)
|
||||
.run("Thumbnail bauen", "offen", idAnna, idAnna, morgen, "hoch", jetzt, idDogi);
|
||||
d.close();
|
||||
|
||||
const { chromium } = await import(
|
||||
"file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
|
||||
const browser = await chromium.launch();
|
||||
|
||||
async function anmelden(kontext, rolle, code) {
|
||||
const seite = await kontext.newPage();
|
||||
await seite.goto(BASIS + "/workspace/", { waitUntil: "domcontentloaded" });
|
||||
await seite.click(`.rolle[data-rolle="${rolle}"]`);
|
||||
await seite.fill("#code", code);
|
||||
await seite.click("button[type=submit]");
|
||||
await seite.waitForURL("**/start.html", { timeout: 15000 });
|
||||
return seite;
|
||||
}
|
||||
|
||||
const lesen = (seite) => seite.evaluate(() => ({
|
||||
zeitraum: document.getElementById("zeitraum")?.textContent || "",
|
||||
unter: document.getElementById("zeitraum-unter")?.textContent || "",
|
||||
ansicht: document.getElementById("kalender")?.dataset.ansicht || null,
|
||||
/* Monatsraster */
|
||||
zellen: document.querySelectorAll(".k-tag").length,
|
||||
kwSpalten: document.querySelectorAll(".k-kw").length,
|
||||
kwWerte: [...document.querySelectorAll(".k-kw")].map((k) => k.textContent),
|
||||
heuteZellen: document.querySelectorAll('.k-tag[data-heute="ja"]').length,
|
||||
feiertagZellen: document.querySelectorAll('.k-tag[data-feiertag="ja"]').length,
|
||||
fremdZellen: document.querySelectorAll('.k-tag[data-fremd="ja"]').length,
|
||||
/* Eintraege */
|
||||
pillen: [...document.querySelectorAll(".k-pille")].map((p) => ({
|
||||
text: p.textContent,
|
||||
farbe: getComputedStyle(p).borderLeftColor,
|
||||
})),
|
||||
anlaesse: [...document.querySelectorAll("#kalender .k-anlass")].map((a) => a.textContent),
|
||||
/* Leisten */
|
||||
saison: [...document.querySelectorAll("#saison .k-anlasskarte")].map((k) => ({
|
||||
name: k.querySelector(".k-anlasskarte__name")?.textContent,
|
||||
rest: k.querySelector(".k-anlasskarte__rest")?.textContent,
|
||||
feiertag: k.classList.contains("feiertag"),
|
||||
})),
|
||||
monatsanlaesse: [...document.querySelectorAll("#monatsanlaesse .k-anlasskarte")]
|
||||
.map((k) => k.querySelector(".k-anlasskarte__name")?.textContent),
|
||||
monatTitel: document.getElementById("monat-titel")?.textContent || "",
|
||||
/* Filter */
|
||||
chips: [...document.querySelectorAll(".k-chip")].map((c) => ({
|
||||
text: c.textContent, an: c.getAttribute("aria-pressed") === "true",
|
||||
})),
|
||||
/* Andere Ansichten */
|
||||
wochenSpalten: document.querySelectorAll(".k-wochentag").length,
|
||||
listentage: document.querySelectorAll(".k-listentag").length,
|
||||
strahlTage: document.querySelectorAll(".k-strahl__tag").length,
|
||||
zeilen: document.querySelectorAll(".k-zeile").length,
|
||||
ueber: document.documentElement.scrollWidth - document.documentElement.clientWidth,
|
||||
/* Abgeschnittener Text ist der häufigste stille Fehler: Er sieht auf
|
||||
den ersten Blick nach Absicht aus. Gemessen wird die tatsächliche
|
||||
Textbreite gegen die verfügbare. Die Pillen im Raster sind bewusst
|
||||
ausgenommen -- eine Zelle ist 150 px breit, dort IST das Kürzen die
|
||||
richtige Lösung, und der volle Text steht im Tagesdialog. */
|
||||
abgeschnitten: [...document.querySelectorAll(
|
||||
".k-anlasskarte__name, .k-anlasskarte__wann, .k-anlasskarte__rest, "
|
||||
+ ".k-zeile__titel, .k-listentag__datum, .k-chip, .k-ansicht, .k-zeitraum")]
|
||||
.filter((e) => e.scrollWidth > e.clientWidth + 1)
|
||||
.map((e) => e.textContent.trim().slice(0, 30)),
|
||||
}));
|
||||
|
||||
for (const [breite, wie] of [[1440, "Computer"], [390, "Handy"]]) {
|
||||
console.log(`\n=== ${wie} (${breite}px)`);
|
||||
const kontext = await browser.newContext({ viewport: { width: breite, height: 1100 } });
|
||||
const konsole = [];
|
||||
const seite = await anmelden(kontext, "admin", "CODE-DOGI-0001");
|
||||
seite.on("console", (m) => { if (m.type() === "error") konsole.push(m.text()); });
|
||||
seite.on("pageerror", (e) => konsole.push("pageerror: " + e.message));
|
||||
await seite.goto(BASIS + "/workspace/kalender.html", { waitUntil: "networkidle" });
|
||||
await seite.waitForTimeout(700);
|
||||
|
||||
const r = await lesen(seite);
|
||||
console.log(" Zeitraum:", r.zeitraum, "·", r.unter);
|
||||
console.log(" Als Nächstes:", r.saison.map((s) => `${s.name} (${s.rest})`).join(" · "));
|
||||
|
||||
/* ---- Monatsraster ---- */
|
||||
ok(r.ansicht === "monat", `startet im Monat (${r.ansicht})`);
|
||||
/* Ein Monatsraster hat immer ganze Wochen: 28, 35 oder 42 Zellen.
|
||||
Alles andere heisst, dass die Wochenberechnung daneben liegt. */
|
||||
ok([28, 35, 42].includes(r.zellen), `ganze Wochen im Raster (${r.zellen} Zellen)`);
|
||||
ok(r.kwSpalten === r.zellen / 7, `je Woche eine KW (${r.kwSpalten} für ${r.zellen / 7} Wochen)`);
|
||||
ok(r.kwWerte.every((w) => Number(w) >= 1 && Number(w) <= 53),
|
||||
`alle Kalenderwochen plausibel (${r.kwWerte.join(",")})`);
|
||||
ok(r.heuteZellen === 1, `genau ein Tag ist "heute" (${r.heuteZellen})`);
|
||||
ok(r.fremdZellen > 0, `die Nachbarmonatstage sind erkennbar (${r.fremdZellen})`);
|
||||
|
||||
/* ---- Eintraege im Raster ---- */
|
||||
ok(r.pillen.length === 5, `alle fünf Einträge stehen im Raster (${r.pillen.length})`);
|
||||
ok(r.pillen.some((p) => p.text.includes("Wochen-Call")), "der Call ist dabei");
|
||||
ok(r.pillen.some((p) => p.text.includes("Thumbnail bauen")), "die Frist aus den Aufgaben auch");
|
||||
/* Jede Art traegt ihre eigene Farbe. Zwei Calls, ein Termin, ein
|
||||
Review, eine Frist -> vier verschiedene Farben. */
|
||||
const farben = new Set(r.pillen.map((p) => p.farbe));
|
||||
ok(farben.size === 4, `vier Arten, vier Farben (${farben.size})`);
|
||||
/* Die Uhrzeit steht vorn -- ausser bei der Frist, die keine hat. */
|
||||
ok(r.pillen.filter((p) => /^\d{2}:\d{2}/.test(p.text)).length === 4,
|
||||
"vier Einträge mit Uhrzeit, die Frist ohne");
|
||||
|
||||
/* ---- Zaehler in der Kopfzeile ---- */
|
||||
ok(/KW \d+( – \d+)? · 5 Einträge/.test(r.unter), `die Kopfzeile zählt mit ("${r.unter}")`);
|
||||
|
||||
/* ---- Filter ---- */
|
||||
ok(r.chips.length === 4, `vier Filter (${r.chips.length})`);
|
||||
ok(r.chips.every((c) => c.an), "und alle zunächst an");
|
||||
ok(r.chips.some((c) => c.text.includes("Call (2)")), `der Call-Filter zählt zwei (${r.chips.map((c) => c.text).join(" ")})`);
|
||||
ok(r.chips.some((c) => c.text.includes("Frist (1)")), "der Fristen-Filter zählt eine");
|
||||
|
||||
/* Ausschalten muss WIRKLICH etwas ausblenden -- ein Filter, der nur
|
||||
die Farbe des Knopfes aendert, ist keiner. */
|
||||
await seite.click('.k-chip:has-text("Call")');
|
||||
await seite.waitForTimeout(250);
|
||||
const nachFilter = await lesen(seite);
|
||||
ok(nachFilter.pillen.length === 3,
|
||||
`Calls ausgeschaltet: drei Einträge übrig (${nachFilter.pillen.length})`);
|
||||
ok(/· 3 Einträge/.test(nachFilter.unter), `und die Kopfzeile zählt neu ("${nachFilter.unter}")`);
|
||||
await seite.click('.k-chip:has-text("Call")');
|
||||
await seite.waitForTimeout(250);
|
||||
|
||||
/* ---- Anlassleisten ---- */
|
||||
ok(r.saison.length === 3, `drei kommende Anlässe (${r.saison.length})`);
|
||||
ok(r.saison.every((s) => /^(heute|morgen|in \d+ Tagen)$/.test(s.rest.replace("Vorlauf läuft", "").trim())),
|
||||
`jeder mit Abstand in Tagen (${r.saison.map((s) => s.rest).join(" | ")})`);
|
||||
ok(r.monatTitel.startsWith("Im "), `die zweite Leiste nennt den Monat ("${r.monatTitel}")`);
|
||||
|
||||
/* ---- Blättern ---- */
|
||||
const vorher = r.zeitraum;
|
||||
await seite.click("#vor-zeit");
|
||||
await seite.waitForTimeout(400);
|
||||
const weiter = await lesen(seite);
|
||||
ok(weiter.zeitraum !== vorher, `vorwärts blättern wechselt den Monat (${vorher} → ${weiter.zeitraum})`);
|
||||
ok(weiter.heuteZellen === 0, "im nächsten Monat ist kein Tag mehr \"heute\"");
|
||||
await seite.click("#heute-knopf");
|
||||
await seite.waitForTimeout(400);
|
||||
const zurueck = await lesen(seite);
|
||||
ok(zurueck.zeitraum === vorher, `"Heute" führt zurück (${zurueck.zeitraum})`);
|
||||
|
||||
/* ---- Die anderen drei Ansichten ---- */
|
||||
for (const [name, pruefung] of [
|
||||
["woche", (x) => x.wochenSpalten === 7],
|
||||
["liste", (x) => x.listentage > 0 && x.zeilen > 0],
|
||||
["zeitstrahl", (x) => x.strahlTage === 42],
|
||||
]) {
|
||||
await seite.click(`.k-ansicht[data-ansicht="${name}"]`);
|
||||
await seite.waitForTimeout(450);
|
||||
const a = await lesen(seite);
|
||||
ok(a.ansicht === name && pruefung(a),
|
||||
`Ansicht ${name} baut auf (Spalten=${a.wochenSpalten} Tage=${a.listentage} `
|
||||
+ `Striche=${a.strahlTage} Zeilen=${a.zeilen})`);
|
||||
ok(a.ueber <= 0, ` und steht nicht über (${a.ueber}px)`);
|
||||
}
|
||||
await seite.click('.k-ansicht[data-ansicht="monat"]');
|
||||
await seite.waitForTimeout(400);
|
||||
|
||||
/* ---- Tagesdialog ---- */
|
||||
await seite.click(`.k-tag[data-tag="${heute}"]`);
|
||||
await seite.waitForTimeout(300);
|
||||
const dialog = await seite.evaluate(() => ({
|
||||
offen: document.getElementById("tagdialog")?.open,
|
||||
titel: document.getElementById("tagdialog-titel")?.textContent,
|
||||
unter: document.getElementById("tagdialog-unter")?.textContent,
|
||||
zeilen: document.querySelectorAll("#tagdialog-liste .k-zeile").length,
|
||||
}));
|
||||
ok(dialog.offen === true, "ein Klick auf den Tag öffnet den Dialog");
|
||||
ok(dialog.zeilen === 2, `und zeigt die beiden Calls von heute (${dialog.zeilen})`);
|
||||
ok(/heute/.test(dialog.unter), `und weiss, dass es heute ist ("${dialog.unter}")`);
|
||||
await seite.keyboard.press("Escape");
|
||||
await seite.waitForTimeout(250);
|
||||
ok(await seite.evaluate(() => !document.getElementById("tagdialog").open),
|
||||
"Esc schließt ihn wieder");
|
||||
|
||||
ok(r.ueber <= 0, `nichts steht über (${r.ueber}px)`);
|
||||
ok(r.abgeschnitten.length === 0,
|
||||
`kein Text wird abgeschnitten (${r.abgeschnitten.join(" | ") || "keiner"})`);
|
||||
ok(konsole.length === 0, `keine Fehler in der Konsole${konsole.length ? " -> " + konsole.join(" | ") : ""}`);
|
||||
|
||||
await seite.screenshot({
|
||||
path: breite === 1440 ? "pruef-kalender-computer.png" : "pruef-kalender-handy.png",
|
||||
fullPage: true });
|
||||
await kontext.close();
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
Die gerechneten Tage gegen bekannte Werte.
|
||||
|
||||
Diese Zahlen stehen in jedem Kalender und lassen sich nachschlagen.
|
||||
Ohne diese Prüfung koennte die Osterformel um einen Tag daneben
|
||||
liegen und niemand wuerde es merken -- bis irgendwann jemand
|
||||
Karfreitag arbeitet.
|
||||
--------------------------------------------------------------------- */
|
||||
console.log("\n=== Die gerechneten Tage");
|
||||
{
|
||||
const kontext = await browser.newContext({ viewport: { width: 1440, height: 1000 } });
|
||||
const seite = await anmelden(kontext, "admin", "CODE-DOGI-0001");
|
||||
await seite.goto(BASIS + "/workspace/kalender.html", { waitUntil: "networkidle" });
|
||||
await seite.waitForTimeout(600);
|
||||
|
||||
/* Zu jedem Jahr: der Monat wird angesteuert und im Raster nachgesehen,
|
||||
an welchem Tag der Anlass steht. Damit wird wirklich das geprueft,
|
||||
was der Kalender ANZEIGT -- nicht eine Formel, die daneben noch
|
||||
einmal gerechnet wird. */
|
||||
const faelle = [
|
||||
["2026-04-05", "Ostersonntag"],
|
||||
["2026-04-03", "Karfreitag"],
|
||||
["2026-05-14", "Christi Himmelfahrt"],
|
||||
["2026-05-10", "Muttertag"],
|
||||
["2026-11-27", "Black Friday"],
|
||||
["2026-12-20", "4. Advent"],
|
||||
["2027-03-28", "Ostersonntag"],
|
||||
["2027-11-26", "Black Friday"],
|
||||
["2027-12-19", "4. Advent"],
|
||||
["2030-04-21", "Ostersonntag"],
|
||||
];
|
||||
|
||||
/* Zum Zielmonat blättern -- über die echten Knöpfe, nicht durch
|
||||
Setzen einer inneren Variablen: So wird auch die Navigation selbst
|
||||
mitgeprüft.
|
||||
|
||||
Wichtig ist die RICHTUNG. Ein erster Versuch klickte stur vorwärts
|
||||
und erreichte April 2026 nie, weil heute September 2026 ist. Der
|
||||
Test meldete daraufhin zehnmal "Monat nicht erreicht" -- und hätte
|
||||
bei oberflächlichem Hinsehen wie ein Rechenfehler in der
|
||||
Osterformel ausgesehen. Deshalb wird jetzt verglichen, welcher
|
||||
Monat offen ist, und gezielt in die passende Richtung geblättert. */
|
||||
async function zuMonat(tag) {
|
||||
for (let i = 0; i < 90; i++) {
|
||||
const stand = await seite.evaluate((t) => {
|
||||
if (document.querySelector(`.k-tag[data-tag="${t}"]`)) return "da";
|
||||
/* Der offene Monat ist der der Zellen OHNE data-fremd -- die
|
||||
Randzellen gehören zum Nachbarmonat. */
|
||||
const eigen = document.querySelector('.k-tag:not([data-fremd="ja"])');
|
||||
return eigen ? eigen.dataset.tag.slice(0, 7) : null;
|
||||
}, tag);
|
||||
if (stand === "da") return true;
|
||||
if (!stand) return false;
|
||||
await seite.click(stand < tag.slice(0, 7) ? "#vor-zeit" : "#zurueck-zeit");
|
||||
await seite.waitForTimeout(70);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
for (const [tag, name] of faelle) {
|
||||
const erreicht = await zuMonat(tag);
|
||||
const text = erreicht ? await seite.evaluate((t) => {
|
||||
const z = document.querySelector(`.k-tag[data-tag="${t}"]`);
|
||||
return z ? [...z.querySelectorAll(".k-anlass")].map((a) => a.textContent).join(" | ") : null;
|
||||
}, tag) : null;
|
||||
ok(text !== null && text.includes(name),
|
||||
`${name} liegt ${tag} (gefunden: ${text ?? "Monat nicht erreicht"})`);
|
||||
}
|
||||
await kontext.close();
|
||||
}
|
||||
|
||||
await browser.close();
|
||||
/* Der Testordner bleibt manchmal gesperrt, weil der Server im selben
|
||||
Prozess noch auf der Datenbank sitzt. Das ist kein Prüfergebnis --
|
||||
ein Aufräumfehler darf einen bestandenen Lauf nicht rot machen. */
|
||||
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
|
||||
console.log(fehler ? `\n${fehler} Prüfung(en) fehlgeschlagen.` : "\nAlles in Ordnung.");
|
||||
process.exit(fehler ? 1 : 0);
|
||||
@@ -1,83 +1,547 @@
|
||||
/* ===================================================================
|
||||
Kalender. Nach Tagen gruppiert statt als Monatsraster: Es geht um
|
||||
wenige, dafür konkrete Termine -- eine Liste liest sich dabei besser
|
||||
und funktioniert auf dem Handy ohne Umbau.
|
||||
Kalender
|
||||
|
||||
Gebaut nach demselben Grundsatz wie die Kacheln auf der Startseite:
|
||||
Die Farbe gehört zur SACHE, nicht zum Rang. Ein Call ist überall
|
||||
blau, ein Review überall grün, eine Frist überall orange -- in der
|
||||
Pille im Raster, in der Zeile in der Liste, im Filterknopf und im
|
||||
Balken des Zeitstrahls. Wer die Farbe einmal gelernt hat, muss die
|
||||
Beschriftung nicht mehr lesen.
|
||||
|
||||
Augenschonend: gedeckte Töne, keine Signalfarben, kein Blinken. Der
|
||||
einzige laute Punkt ist "heute" -- und der darf laut sein, weil man
|
||||
ihn sucht.
|
||||
=================================================================== */
|
||||
|
||||
.zeitraum { display: flex; gap: 8px; margin: 0 0 22px; flex-wrap: wrap; }
|
||||
.zeitraum .schritt[aria-pressed="true"] {
|
||||
/* Gedrueckt = der "voll"-Auftritt des Knopf-Systems. Vorher stand
|
||||
hier eine eigene Flaeche, die den geschliffenen Rand ueberschrieb. */
|
||||
--f: var(--akzent);
|
||||
color: #fff;
|
||||
background:
|
||||
linear-gradient(color-mix(in srgb, var(--f) 20%, #121926),
|
||||
color-mix(in srgb, var(--f) 12%, #0d1420)) padding-box,
|
||||
linear-gradient(150deg, var(--f),
|
||||
color-mix(in srgb, var(--f) 45%, transparent)) border-box;
|
||||
box-shadow: 0 4px 16px -9px var(--f);
|
||||
/* ---------- Kopf: der Zeitraum als Überschrift --------------------------
|
||||
Man liest zuerst, WO man ist, und bewegt sich dann. Deshalb steht der
|
||||
Monat groß und die Navigation daneben, nicht umgekehrt. */
|
||||
.k-kopf {
|
||||
display: flex; align-items: flex-end; justify-content: space-between;
|
||||
flex-wrap: wrap; gap: 16px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.k-zeitraum {
|
||||
margin: 0;
|
||||
font-size: clamp(1.7rem, 3.2vw, 2.4rem);
|
||||
letter-spacing: -.025em;
|
||||
color: #f2f7fd;
|
||||
text-shadow: 0 2px 26px rgba(63, 189, 245, .16);
|
||||
/* Der Monatsname wechselt beim Blättern die Länge. Ohne feste
|
||||
Zeichenbreite für die Jahreszahl springt die Zeile dabei. */
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.k-kopf__unter {
|
||||
margin: 5px 0 0;
|
||||
font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
|
||||
color: var(--text-still);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.k-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||||
.k-pfeil {
|
||||
min-width: 38px; padding-left: 0; padding-right: 0;
|
||||
font-size: 1.15rem; line-height: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tag { margin-bottom: 22px; }
|
||||
|
||||
.tag__kopf {
|
||||
display: flex; align-items: baseline; gap: 10px;
|
||||
margin: 0 2px 9px; padding-bottom: 7px;
|
||||
border-bottom: 1px solid var(--rand);
|
||||
/* ---------- Die beiden Anlassreihen ------------------------------------
|
||||
Oben "Als Nächstes" (blickt ab heute nach vorn, ändert sich beim
|
||||
Blättern NICHT), darunter die Anlässe des angezeigten Zeitraums. Sie
|
||||
sehen absichtlich gleich aus -- es sind dieselben Dinge, nur zu einer
|
||||
anderen Frage. Die Überschriften sagen, welche. */
|
||||
.k-leiste { margin-bottom: 20px; }
|
||||
.k-leiste .feldschild { display: flex; align-items: center; gap: 9px; }
|
||||
.k-leiste .feldschild::before {
|
||||
content: "";
|
||||
width: 18px; height: 2px; border-radius: 2px;
|
||||
background: linear-gradient(90deg, var(--akzent), transparent);
|
||||
opacity: .8;
|
||||
}
|
||||
.tag__datum { font-weight: 700; font-size: .95rem; }
|
||||
.tag__wochentag { font-size: .8rem; color: var(--text-still); }
|
||||
.tag__marke {
|
||||
margin-left: auto; padding: 1px 9px; border-radius: 999px;
|
||||
font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
|
||||
background: rgba(63, 189, 245, .16); color: #7fd2fb;
|
||||
.k-anlassreihe {
|
||||
display: grid; gap: 9px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
margin-top: 10px;
|
||||
}
|
||||
/* Vergangene Tage treten zurück, bleiben aber lesbar. */
|
||||
.tag[data-vergangen="ja"] .tag__datum,
|
||||
.tag[data-vergangen="ja"] .tag__wochentag { color: var(--text-still); }
|
||||
|
||||
.eintrag {
|
||||
display: grid; gap: 3px 14px;
|
||||
grid-template-columns: 78px 1fr auto;
|
||||
align-items: start;
|
||||
padding: 11px 14px; margin-bottom: 8px;
|
||||
background: rgba(255, 255, 255, .03);
|
||||
border: 1px solid var(--rand);
|
||||
border-left: 3px solid var(--rand);
|
||||
.k-anlasskarte {
|
||||
--afarbe: var(--akzent);
|
||||
position: relative; overflow: hidden;
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 11px 14px 11px 16px;
|
||||
border: 1px solid color-mix(in srgb, var(--afarbe) 26%, var(--rand));
|
||||
border-radius: var(--radius-klein);
|
||||
background:
|
||||
linear-gradient(90deg, color-mix(in srgb, var(--afarbe) 11%, transparent), transparent 58%),
|
||||
rgba(255, 255, 255, .03);
|
||||
cursor: pointer;
|
||||
transition: border-color .18s ease, background .18s ease, transform .18s ease;
|
||||
}
|
||||
.k-anlasskarte::before {
|
||||
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
||||
background: linear-gradient(180deg, var(--afarbe),
|
||||
color-mix(in srgb, var(--afarbe) 35%, transparent));
|
||||
}
|
||||
.k-anlasskarte:hover, .k-anlasskarte:focus-visible {
|
||||
border-color: color-mix(in srgb, var(--afarbe) 46%, var(--rand));
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
/* Vorbei heißt: steht noch da, aber leiser. Ganz wegzulassen wäre
|
||||
falsch -- man will sehen, dass der Tag gewesen ist. */
|
||||
.k-anlasskarte.vorbei { opacity: .5; }
|
||||
.k-anlasskarte__sym { font-size: 1.3rem; line-height: 1; flex: none; }
|
||||
.k-anlasskarte__txt { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
|
||||
/* Der Name darf umbrechen statt abzubrechen. Vorher stand hier
|
||||
"Tag der Deutsc…" -- abgeschnittener Text sieht auf den ersten Blick
|
||||
nach Absicht aus und ist deshalb der teuerste stille Fehler in einer
|
||||
Karte. Zwei Zeilen kosten nichts, ein verlorener Name schon. */
|
||||
.k-anlasskarte__name {
|
||||
font-weight: 650; color: var(--text);
|
||||
line-height: 1.25;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.k-anlasskarte__wann { font-size: .78rem; color: var(--text-leise); }
|
||||
.k-anlasskarte__rest {
|
||||
flex: none; text-align: right;
|
||||
font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
|
||||
color: var(--afarbe);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.k-anlasskarte__rest small {
|
||||
display: block; margin-top: 2px;
|
||||
font-size: .64rem; letter-spacing: .06em;
|
||||
color: var(--text-still); text-transform: none;
|
||||
}
|
||||
.k-anlassleer {
|
||||
grid-column: 1 / -1;
|
||||
margin: 0; padding: 13px 16px;
|
||||
font-size: .88rem; color: var(--text-still);
|
||||
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
|
||||
}
|
||||
.eintrag[data-art="call"] { border-left-color: var(--akzent); }
|
||||
.eintrag[data-art="review"] { border-left-color: #e0a33c; }
|
||||
.eintrag[data-art="termin"] { border-left-color: var(--violett); }
|
||||
.eintrag[data-art="frist"] { border-left-color: #d8656e; background: rgba(216, 101, 110, .05); }
|
||||
.eintrag[data-erledigt="ja"] { opacity: .5; }
|
||||
|
||||
.eintrag__zeit {
|
||||
font-variant-numeric: tabular-nums; font-weight: 600; font-size: .88rem;
|
||||
/* ---------- Werkzeugleiste: Ansicht und Filter -------------------------- */
|
||||
.k-werkzeuge {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
flex-wrap: wrap; gap: 12px;
|
||||
margin: 4px 0 16px;
|
||||
}
|
||||
.k-ansichten { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.k-ansicht {
|
||||
padding: 8px 15px;
|
||||
border: 1px solid var(--rand); border-radius: 999px;
|
||||
background: rgba(255, 255, 255, .03);
|
||||
color: var(--text-leise);
|
||||
font: inherit; font-size: .86rem;
|
||||
cursor: pointer;
|
||||
transition: border-color .18s ease, background .18s ease, color .18s ease;
|
||||
}
|
||||
.k-ansicht:hover { color: var(--text); border-color: var(--rand-hell); }
|
||||
.k-ansicht[aria-pressed="true"] {
|
||||
color: #eaf4fd;
|
||||
border-color: color-mix(in srgb, var(--akzent) 46%, transparent);
|
||||
background: color-mix(in srgb, var(--akzent) 15%, transparent);
|
||||
}
|
||||
|
||||
.k-filter { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.k-chip {
|
||||
--cfarbe: var(--akzent);
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
padding: 8px 14px;
|
||||
border: 1px solid var(--rand); border-radius: 999px;
|
||||
background: rgba(255, 255, 255, .03);
|
||||
color: var(--text-still);
|
||||
font: inherit; font-size: .84rem;
|
||||
cursor: pointer;
|
||||
font-variant-numeric: tabular-nums;
|
||||
transition: border-color .18s ease, background .18s ease, color .18s ease, opacity .18s ease;
|
||||
}
|
||||
.k-chip__punkt {
|
||||
width: 8px; height: 8px; border-radius: 50%;
|
||||
background: var(--cfarbe);
|
||||
transition: opacity .18s ease, box-shadow .18s ease;
|
||||
}
|
||||
.k-chip[aria-pressed="true"] {
|
||||
color: var(--text);
|
||||
border-color: color-mix(in srgb, var(--cfarbe) 40%, transparent);
|
||||
background: color-mix(in srgb, var(--cfarbe) 11%, transparent);
|
||||
}
|
||||
.k-chip[aria-pressed="true"] .k-chip__punkt {
|
||||
box-shadow: 0 0 8px color-mix(in srgb, var(--cfarbe) 70%, transparent);
|
||||
}
|
||||
/* Ausgeschaltet: der Punkt wird hohl. Nur die Deckkraft zu senken wäre
|
||||
im Kontrastmodus nicht zu unterscheiden. */
|
||||
.k-chip[aria-pressed="false"] .k-chip__punkt {
|
||||
background: transparent;
|
||||
box-shadow: inset 0 0 0 1.5px var(--cfarbe);
|
||||
opacity: .55;
|
||||
}
|
||||
|
||||
/* ---------- Monatsraster ------------------------------------------------
|
||||
Eine Spalte für die Kalenderwoche, dann die sieben Tage. Die
|
||||
KW-Spalte ist kein Schmuck: In Absprachen ("machen wir in KW 42")
|
||||
ist sie die übliche Währung. */
|
||||
.k-raster {
|
||||
display: grid;
|
||||
grid-template-columns: 46px repeat(7, minmax(0, 1fr));
|
||||
gap: 1px;
|
||||
background: var(--rand);
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: var(--radius-klein);
|
||||
overflow: hidden;
|
||||
}
|
||||
.k-spaltenkopf {
|
||||
padding: 11px 10px;
|
||||
background: rgba(12, 17, 28, .82);
|
||||
font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
|
||||
color: var(--text-leise);
|
||||
}
|
||||
.eintrag__titel { font-weight: 600; font-size: .93rem; }
|
||||
.eintrag__zusatz {
|
||||
grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px;
|
||||
font-size: .78rem; color: var(--text-still);
|
||||
}
|
||||
.eintrag__zusatz a { color: var(--akzent); }
|
||||
.eintrag__knoepfe { display: flex; gap: 6px; align-items: center; }
|
||||
.k-spaltenkopf--kw { color: var(--text-still); }
|
||||
|
||||
.eintrag__art {
|
||||
padding: 1px 8px; border-radius: 999px;
|
||||
font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
|
||||
background: rgba(255, 255, 255, .06); color: var(--text-still);
|
||||
.k-kw {
|
||||
display: flex; align-items: flex-start; justify-content: center;
|
||||
padding: 10px 4px;
|
||||
background: rgba(9, 13, 22, .78);
|
||||
font-size: .78rem; font-weight: 600;
|
||||
color: var(--text-still);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
/* Die laufende Woche wird in der KW-Spalte markiert -- dadurch findet
|
||||
man sich beim Blättern sofort zurecht. */
|
||||
.k-kw[data-jetzt="ja"] {
|
||||
color: var(--akzent);
|
||||
background: color-mix(in srgb, var(--akzent) 12%, rgba(9, 13, 22, .78));
|
||||
}
|
||||
|
||||
.leer-hinweis {
|
||||
padding: 26px 20px; text-align: center;
|
||||
color: var(--text-still); font-size: .9rem;
|
||||
border: 1px dashed var(--rand); border-radius: var(--radius);
|
||||
.k-tag {
|
||||
min-height: 108px;
|
||||
padding: 8px 9px 10px;
|
||||
background: rgba(11, 15, 25, .74);
|
||||
display: flex; flex-direction: column; gap: 4px;
|
||||
cursor: pointer;
|
||||
transition: background .16s ease;
|
||||
}
|
||||
.k-tag:hover { background: rgba(20, 27, 42, .85); }
|
||||
.k-tag:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
|
||||
/* Tage des Nachbarmonats: da, aber deutlich zurückgenommen. Sie ganz
|
||||
wegzulassen würde das Raster zerreißen. */
|
||||
.k-tag[data-fremd="ja"] { background: rgba(7, 10, 17, .72); }
|
||||
.k-tag[data-fremd="ja"] .k-tag__zahl { color: var(--text-still); opacity: .6; }
|
||||
.k-tag[data-wochenende="ja"] { background: rgba(9, 12, 20, .8); }
|
||||
/* Gesetzlicher Feiertag: ein Hauch Rosé. Kein Signal, nur eine andere
|
||||
Fläche -- man sieht ihn, ohne dass er ruft. */
|
||||
.k-tag[data-feiertag="ja"] { background: color-mix(in srgb, #ff9aa2 9%, rgba(11, 15, 25, .74)); }
|
||||
.k-tag[data-feiertag="ja"]:hover { background: color-mix(in srgb, #ff9aa2 14%, rgba(11, 15, 25, .74)); }
|
||||
.k-tag[data-heute="ja"] {
|
||||
background: color-mix(in srgb, var(--akzent) 13%, rgba(11, 15, 25, .74));
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 50%, transparent);
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.eintrag { grid-template-columns: 62px 1fr; }
|
||||
.eintrag__knoepfe { grid-column: 1 / -1; margin-top: 8px; }
|
||||
.eintrag__zusatz { grid-column: 1 / -1; }
|
||||
.k-tag__kopf { display: flex; align-items: baseline; gap: 6px; }
|
||||
.k-tag__zahl {
|
||||
font-size: .95rem; font-weight: 650; color: var(--text);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
/* Am Monatsersten steht der Monatsname dabei -- sonst weiß man in der
|
||||
letzten Rasterzeile nicht, ob die 1 schon zum nächsten Monat gehört.
|
||||
|
||||
Bewusst --text-leise statt --text-still: Wenn der Monatserste
|
||||
zufällig HEUTE ist, liegt der Text auf der aufgehellten Heute-Zelle,
|
||||
und dort kam der leiseste Grauton nur noch auf 3,96:1. Gemessen an
|
||||
echten Bildpunkten, nicht an der Farbangabe -- die weiß nichts davon,
|
||||
was hinter ihr liegt. Jetzt 5,9:1. */
|
||||
.k-tag__monat { font-size: .7rem; color: var(--text-leise); }
|
||||
.k-tag__heute {
|
||||
margin-left: auto;
|
||||
font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
|
||||
color: var(--akzent);
|
||||
}
|
||||
|
||||
/* ---------- Anlassmarke im Raster --------------------------------------- */
|
||||
.k-anlass {
|
||||
--afarbe: var(--akzent);
|
||||
display: block;
|
||||
padding: 2px 6px;
|
||||
border-radius: 5px;
|
||||
border-left: 2px solid var(--afarbe);
|
||||
background: color-mix(in srgb, var(--afarbe) 13%, transparent);
|
||||
color: color-mix(in srgb, var(--afarbe) 70%, #ffffff);
|
||||
font-size: .68rem; line-height: 1.35;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
/* Feiertage sind lauter als Anlässe: Sie sind eine Tatsache, kein
|
||||
Vorschlag. */
|
||||
.k-anlass.feiertag {
|
||||
background: color-mix(in srgb, var(--afarbe) 20%, transparent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ---------- Pille: ein Eintrag im Raster -------------------------------- */
|
||||
.k-pille {
|
||||
--pfarbe: var(--akzent);
|
||||
display: block;
|
||||
padding: 3px 7px;
|
||||
border-radius: 5px;
|
||||
border-left: 2px solid var(--pfarbe);
|
||||
background: color-mix(in srgb, var(--pfarbe) 16%, transparent);
|
||||
color: var(--text);
|
||||
font-size: .72rem; line-height: 1.4;
|
||||
text-decoration: none;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
transition: background .16s ease;
|
||||
}
|
||||
.k-pille:hover { background: color-mix(in srgb, var(--pfarbe) 26%, transparent); }
|
||||
.k-pille__zeit {
|
||||
color: var(--pfarbe); font-weight: 650; margin-right: 5px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
/* Erledigt: durchgestrichen UND blasser. Nur blasser wäre im
|
||||
Kontrastmodus nicht zu erkennen. */
|
||||
.k-pille.erledigt { opacity: .5; text-decoration: line-through; }
|
||||
|
||||
/* ---------- Wochenansicht ----------------------------------------------- */
|
||||
.k-woche {
|
||||
display: grid; gap: 1px;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
background: var(--rand);
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: var(--radius-klein);
|
||||
overflow: hidden;
|
||||
}
|
||||
.k-wochentag {
|
||||
min-height: 190px;
|
||||
padding: 10px;
|
||||
background: rgba(11, 15, 25, .74);
|
||||
display: flex; flex-direction: column; gap: 5px;
|
||||
cursor: pointer;
|
||||
transition: background .16s ease;
|
||||
}
|
||||
.k-wochentag:hover { background: rgba(20, 27, 42, .85); }
|
||||
.k-wochentag:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
|
||||
.k-wochentag[data-feiertag="ja"] { background: color-mix(in srgb, #ff9aa2 9%, rgba(11, 15, 25, .74)); }
|
||||
.k-wochentag[data-heute="ja"] {
|
||||
background: color-mix(in srgb, var(--akzent) 13%, rgba(11, 15, 25, .74));
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 50%, transparent);
|
||||
}
|
||||
.k-wochentag__kopf {
|
||||
display: flex; align-items: baseline; gap: 7px;
|
||||
padding-bottom: 7px; margin-bottom: 3px;
|
||||
border-bottom: 1px solid var(--rand);
|
||||
}
|
||||
.k-wochentag__name {
|
||||
font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
|
||||
color: var(--text-still);
|
||||
}
|
||||
.k-wochentag__zahl {
|
||||
font-size: 1.25rem; font-weight: 700; color: var(--text);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.k-wochentag__leer { margin: auto 0; color: var(--text-still); font-size: .8rem; }
|
||||
|
||||
/* ---------- Listenansicht ----------------------------------------------- */
|
||||
.k-liste { display: grid; gap: 12px; }
|
||||
.k-listentag {
|
||||
padding: 14px 16px;
|
||||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||||
background: rgba(255, 255, 255, .026);
|
||||
display: grid; gap: 7px;
|
||||
}
|
||||
.k-listentag[data-vergangen="ja"] { opacity: .62; }
|
||||
.k-listentag[data-heute="ja"] {
|
||||
border-color: color-mix(in srgb, var(--akzent) 40%, transparent);
|
||||
background: color-mix(in srgb, var(--akzent) 7%, rgba(255, 255, 255, .026));
|
||||
}
|
||||
.k-listentag__kopf { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
|
||||
.k-listentag__datum { font-weight: 650; color: var(--text); }
|
||||
.k-listentag__kw {
|
||||
font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
|
||||
color: var(--text-still); font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.k-listentag__marke {
|
||||
margin-left: auto; padding: 2px 9px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid color-mix(in srgb, var(--akzent) 34%, transparent);
|
||||
background: color-mix(in srgb, var(--akzent) 13%, transparent);
|
||||
color: var(--akzent);
|
||||
font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ---------- Eine ausführliche Zeile ------------------------------------- */
|
||||
.k-zeile {
|
||||
--zfarbe: var(--akzent);
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center; gap: 12px;
|
||||
padding: 9px 12px 9px 14px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--rand);
|
||||
background:
|
||||
linear-gradient(90deg, color-mix(in srgb, var(--zfarbe) 8%, transparent), transparent 50%),
|
||||
rgba(255, 255, 255, .02);
|
||||
}
|
||||
.k-zeile::before {
|
||||
content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
background: var(--zfarbe);
|
||||
}
|
||||
.k-zeile[data-erledigt="ja"] { opacity: .55; }
|
||||
.k-zeile[data-erledigt="ja"] .k-zeile__titel { text-decoration: line-through; }
|
||||
.k-zeile__zeit {
|
||||
font-size: .82rem; font-weight: 650; color: var(--zfarbe);
|
||||
font-variant-numeric: tabular-nums;
|
||||
min-width: 5.5ch;
|
||||
}
|
||||
.k-zeile__titel { color: var(--text); min-width: 0; }
|
||||
.k-zeile__knoepfe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||||
.k-zeile__art {
|
||||
padding: 2px 9px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid color-mix(in srgb, var(--zfarbe) 32%, transparent);
|
||||
color: var(--zfarbe);
|
||||
font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
|
||||
}
|
||||
.k-zeile__zusatz {
|
||||
grid-column: 1 / -1;
|
||||
display: flex; flex-wrap: wrap; gap: 4px 10px;
|
||||
font-size: .78rem; color: var(--text-leise);
|
||||
}
|
||||
.k-zeile__zusatz a { color: var(--akzent); }
|
||||
|
||||
/* ---------- Zeitstrahl ---------------------------------------------------
|
||||
Sechs Wochen auf einer Achse. Die Höhe eines Strichs ist die Menge
|
||||
des Tages -- man sieht Ballungen und Lücken, ohne zu zählen. */
|
||||
.k-strahl-rahmen {
|
||||
padding: 20px 18px 14px;
|
||||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||||
background: rgba(255, 255, 255, .026);
|
||||
}
|
||||
.k-strahl {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: minmax(0, 1fr);
|
||||
align-items: end;
|
||||
gap: 2px;
|
||||
height: 150px;
|
||||
}
|
||||
.k-strahl__tag {
|
||||
--menge: 0;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
|
||||
gap: 3px;
|
||||
padding-bottom: 16px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
cursor: pointer;
|
||||
transition: background .16s ease;
|
||||
}
|
||||
.k-strahl__tag:hover { background: rgba(255, 255, 255, .05); }
|
||||
.k-strahl__tag:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
|
||||
.k-strahl__tag[data-wochenende="ja"] { background: rgba(255, 255, 255, .022); }
|
||||
.k-strahl__tag[data-feiertag="ja"] { background: color-mix(in srgb, #ff9aa2 10%, transparent); }
|
||||
.k-strahl__tag[data-heute="ja"] { background: color-mix(in srgb, var(--akzent) 15%, transparent); }
|
||||
.k-strahl__saeule {
|
||||
--sfarbe: var(--akzent);
|
||||
width: 100%;
|
||||
/* Ein leerer Tag bekommt einen Sockel von 3 px statt gar nichts --
|
||||
sonst sähe die Achse an ruhigen Stellen kaputt aus. */
|
||||
height: calc(3px + var(--menge) * 20px);
|
||||
border-radius: 3px 3px 0 0;
|
||||
background: linear-gradient(180deg, var(--sfarbe),
|
||||
color-mix(in srgb, var(--sfarbe) 30%, transparent));
|
||||
opacity: .92;
|
||||
}
|
||||
.k-strahl__tag[style*="--menge: 0"] .k-strahl__saeule { opacity: .3; }
|
||||
.k-strahl__sym { position: absolute; top: 2px; font-size: .8rem; }
|
||||
.k-strahl__kw {
|
||||
position: absolute; bottom: 0;
|
||||
font-size: .62rem; color: var(--text-still);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.k-strahl__fuss {
|
||||
margin: 14px 0 0;
|
||||
font-size: .76rem; color: var(--text-still);
|
||||
}
|
||||
|
||||
/* ---------- Leerer Zeitraum --------------------------------------------- */
|
||||
.k-leer {
|
||||
padding: 26px 22px;
|
||||
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
|
||||
text-align: center;
|
||||
}
|
||||
.k-leer__satz { margin: 0 0 6px; color: var(--text-leise); }
|
||||
.k-leer__tipp { margin: 0; font-size: .82rem; color: var(--text-still); }
|
||||
|
||||
/* ---------- Tagesdialog -------------------------------------------------- */
|
||||
.k-dialog {
|
||||
width: min(560px, calc(100vw - 32px));
|
||||
padding: 20px 22px;
|
||||
border: 1px solid var(--rand-hell);
|
||||
border-radius: var(--radius);
|
||||
background: var(--glas-tief);
|
||||
color: var(--text);
|
||||
box-shadow: var(--schatten);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
.k-dialog::backdrop { background: rgba(3, 5, 10, .72); backdrop-filter: blur(3px); }
|
||||
.k-dialog__kopf {
|
||||
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.k-dialog__titel { display: block; font-size: 1.1rem; color: #eaf2fb; }
|
||||
.k-dialog__unter {
|
||||
display: block; margin-top: 3px;
|
||||
font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
|
||||
color: var(--text-still);
|
||||
}
|
||||
.k-dialog__anlaesse { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
|
||||
.k-dialog__anlaesse:empty { display: none; }
|
||||
.k-dialog__anlaesse .k-anlass { font-size: .76rem; padding: 4px 9px; }
|
||||
.k-dialog__liste { display: grid; gap: 8px; margin-bottom: 16px; }
|
||||
.k-dialog__fuss {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid var(--rand);
|
||||
}
|
||||
.k-dialog__tipp { font-size: .74rem; color: var(--text-still); }
|
||||
|
||||
/* ---------- Kleinere Bildschirme ----------------------------------------
|
||||
Das Monatsraster ist auf einem Handy nicht sinnvoll zu quetschen: Bei
|
||||
390 px wären die Zellen 46 px breit, und in einer 46-px-Zelle steht
|
||||
kein Termin. Statt zu schrumpfen wird deshalb umgebaut -- die
|
||||
KW-Spalte fällt weg, die Zellen werden flacher, und die Pillen zeigen
|
||||
nur noch die Uhrzeit als Punkt. */
|
||||
@media (max-width: 860px) {
|
||||
.k-raster { grid-template-columns: 32px repeat(7, minmax(0, 1fr)); }
|
||||
.k-tag { min-height: 76px; padding: 6px 5px 7px; }
|
||||
.k-tag__monat, .k-tag__heute { display: none; }
|
||||
.k-anlass, .k-pille {
|
||||
font-size: .6rem; padding: 1px 4px;
|
||||
border-left-width: 2px;
|
||||
}
|
||||
.k-pille__zeit { margin-right: 3px; }
|
||||
.k-spaltenkopf { padding: 8px 4px; font-size: .66rem; letter-spacing: .06em; }
|
||||
.k-kw { font-size: .66rem; padding: 7px 2px; }
|
||||
.k-woche { grid-template-columns: 1fr; }
|
||||
.k-wochentag { min-height: 0; }
|
||||
.k-strahl { height: 110px; }
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.k-kopf { align-items: flex-start; }
|
||||
.k-nav { width: 100%; }
|
||||
.k-zeile { grid-template-columns: auto 1fr; }
|
||||
.k-zeile__knoepfe { grid-column: 1 / -1; }
|
||||
.k-anlassreihe { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.k-anlasskarte, .k-tag, .k-wochentag, .k-pille, .k-chip,
|
||||
.k-ansicht, .k-strahl__tag { transition: none; }
|
||||
.k-anlasskarte:hover { transform: none; }
|
||||
}
|
||||
|
||||
/* Ohne Farbverläufe (Kontrastmodus, Druck) müssen Kante und Schrift
|
||||
allein tragen -- deshalb bleiben die Ränder erhalten. */
|
||||
@media (forced-colors: active) {
|
||||
.k-zeile::before, .k-anlasskarte::before { background: CanvasText; }
|
||||
.k-pille, .k-anlass { border: 1px solid CanvasText; }
|
||||
.k-strahl__saeule { background: CanvasText; }
|
||||
}
|
||||
|
||||
+781
-159
File diff suppressed because it is too large
Load Diff
@@ -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=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011013" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -139,8 +139,8 @@
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/aufgaben.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/aufgaben.js?v=202609011013" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/automation.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/automation.css?v=202609011013" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -132,8 +132,8 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/automation.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/automation.js?v=202609011013" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/bereich.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/bereich.css?v=202609011013" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -107,8 +107,8 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/bereich.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/bereich.js?v=202609011013" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/calls.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/calls.css?v=202609011013" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -54,9 +54,9 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/ki.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/calls.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/ki.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/calls.js?v=202609011013" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/content.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/content.css?v=202609011013" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -158,8 +158,8 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/content.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/content.js?v=202609011013" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/dateien.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/dateien.css?v=202609011013" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -93,8 +93,8 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/dateien.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/dateien.js?v=202609011013" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609011013" />
|
||||
</head>
|
||||
|
||||
<body class="gate">
|
||||
@@ -143,6 +143,6 @@
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<script src="assets/js/gate.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/gate.js?v=202609011013" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+67
-19
@@ -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=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/kalender.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/kalender.css?v=202609011013" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -34,15 +34,37 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="inhalt">
|
||||
<main class="inhalt inhalt--breit">
|
||||
|
||||
<section class="kopf-zeile">
|
||||
<div>
|
||||
<p class="marke">Termine</p>
|
||||
<h1 class="titel">Kalender & Calls</h1>
|
||||
<p class="unterzeile">Termine, Calls und Fristen aus den Aufgaben – in einer Ansicht.</p>
|
||||
<!-- Der Zeitraum ist die Überschrift, nicht eine Beschriftung neben
|
||||
Knöpfen: Man liest zuerst, WO man ist, und bewegt sich dann. -->
|
||||
<section class="k-kopf">
|
||||
<div class="k-kopf__titel">
|
||||
<h1 class="k-zeitraum" id="zeitraum">…</h1>
|
||||
<p class="k-kopf__unter" id="zeitraum-unter"></p>
|
||||
</div>
|
||||
<button type="button" class="knopf knopf--klein" id="neu-oeffnen">Neuer Termin</button>
|
||||
<div class="k-nav">
|
||||
<button type="button" class="knopf-still k-pfeil" id="zurueck-zeit" aria-label="Vorheriger Zeitraum">‹</button>
|
||||
<button type="button" class="knopf-still" id="heute-knopf">Heute</button>
|
||||
<button type="button" class="knopf-still k-pfeil" id="vor-zeit" aria-label="Nächster Zeitraum">›</button>
|
||||
<button type="button" class="knopf knopf--klein" id="neu-oeffnen">Neuer Termin</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Zwei Reihen, die zwei VERSCHIEDENE Fragen beantworten – und deshalb
|
||||
beschriftet sind:
|
||||
"Als Nächstes" blickt ab heute nach vorn und ändert sich NICHT
|
||||
beim Blättern
|
||||
"Im September" beschreibt den Monat, den man gerade ansieht
|
||||
Ohne Überschriften wären zwei gleich aussehende Reihen verwirrend. -->
|
||||
<section class="k-leiste" id="saison-block" hidden>
|
||||
<p class="feldschild">Als Nächstes</p>
|
||||
<div class="k-anlassreihe" id="saison"></div>
|
||||
</section>
|
||||
|
||||
<section class="k-leiste" id="monat-block" hidden>
|
||||
<p class="feldschild" id="monat-titel">Im Monat</p>
|
||||
<div class="k-anlassreihe" id="monatsanlaesse"></div>
|
||||
</section>
|
||||
|
||||
<form class="neu" id="neu" hidden>
|
||||
@@ -89,18 +111,44 @@
|
||||
|
||||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||||
|
||||
<div class="zeitraum">
|
||||
<button type="button" class="schritt" data-tage="14">2 Wochen</button>
|
||||
<button type="button" class="schritt" data-tage="30">30 Tage</button>
|
||||
<button type="button" class="schritt" data-tage="90">90 Tage</button>
|
||||
<!-- Vier Ansichten auf DENSELBEN Daten. Der Server liefert einen
|
||||
Zeitraum, hier wird er nur unterschiedlich dargestellt – so kann
|
||||
keine Ansicht etwas anderes zeigen als die andere. -->
|
||||
<div class="k-werkzeuge">
|
||||
<div class="k-ansichten" role="group" aria-label="Ansicht">
|
||||
<button type="button" class="k-ansicht" data-ansicht="monat" aria-pressed="true">Monat</button>
|
||||
<button type="button" class="k-ansicht" data-ansicht="woche" aria-pressed="false">Woche</button>
|
||||
<button type="button" class="k-ansicht" data-ansicht="liste" aria-pressed="false">Liste</button>
|
||||
<button type="button" class="k-ansicht" data-ansicht="zeitstrahl" aria-pressed="false">Zeitstrahl</button>
|
||||
</div>
|
||||
<div class="k-filter" id="filter"></div>
|
||||
</div>
|
||||
|
||||
<div id="liste" aria-busy="true"><p class="leise">Kalender wird geladen …</p></div>
|
||||
<div id="kalender" aria-busy="true"><p class="leise">Kalender wird geladen …</p></div>
|
||||
|
||||
<!-- Der Tagesdialog. Als echtes <dialog>: Esc schließt, der Tastaturfokus
|
||||
bleibt drin, und der Rest der Seite ist für Vorleseprogramme still –
|
||||
das alles bringt das Element mit, ohne dass es nachgebaut wird. -->
|
||||
<dialog id="tagdialog" class="k-dialog" aria-labelledby="tagdialog-titel">
|
||||
<div class="k-dialog__kopf">
|
||||
<div>
|
||||
<strong id="tagdialog-titel" class="k-dialog__titel">…</strong>
|
||||
<span id="tagdialog-unter" class="k-dialog__unter"></span>
|
||||
</div>
|
||||
<button type="button" class="knopf-still" id="tagdialog-zu" aria-label="Schließen">✕</button>
|
||||
</div>
|
||||
<div id="tagdialog-anlaesse" class="k-dialog__anlaesse"></div>
|
||||
<div id="tagdialog-liste" class="k-dialog__liste"></div>
|
||||
<div class="k-dialog__fuss">
|
||||
<button type="button" class="knopf knopf--klein" id="tagdialog-neu">Hier eintragen</button>
|
||||
<span class="k-dialog__tipp">Esc schließt</span>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/kalender.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/kalender.js?v=202609011013" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/personen.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/personen.css?v=202609011013" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -121,8 +121,8 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/personen.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/personen.js?v=202609011013" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/profil.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/profil.css?v=202609011013" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -132,8 +132,8 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/profil.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/profil.js?v=202609011013" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/report.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/report.css?v=202609011013" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -91,9 +91,9 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/ki.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/report.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/ki.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/report.js?v=202609011013" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/scouting.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/scouting.css?v=202609011013" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -124,8 +124,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/scouting.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/scouting.js?v=202609011013" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609011013" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -99,8 +99,8 @@
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/start.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/start.js?v=202609011013" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/startcheck.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/startcheck.css?v=202609011013" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -70,9 +70,9 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/ki.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/startcheck.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/ki.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/startcheck.js?v=202609011013" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/uebersicht.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/uebersicht.css?v=202609011013" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -57,7 +57,7 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/kopf.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/uebersicht.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/uebersicht.js?v=202609011013" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/wissen.css?v=202609010955" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011013" />
|
||||
<link rel="stylesheet" href="assets/css/wissen.css?v=202609011013" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -175,8 +175,8 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/wissen.js?v=202609010955" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609011013" defer></script>
|
||||
<script src="assets/js/wissen.js?v=202609011013" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user