DogFatherGitandClaude Opus 5
1ad22b55c4
--- screen1: Glocke nach rechts, Ring so gross wie die Uhr ---
"dieser button links vom kreis soll rechts davon sein und der kreis
soll die gleiche groesse wie die uhr haben."
Die KAESTEN waren schon exakt gleich gross (248 x 248, seit gestern aus
einer Variablen). Der gezeichnete Ring aber nicht: Sein aeusserer Bogen
lag bei Radius 128 von 150, plus halbe Strichbreite also bei 132,5 --
88 Prozent des Kastens, gerendert 219 statt 248 px. Die Uhr daneben
fuellt ihren Kasten ganz aus, ihr Leuchtkranz ragt sogar 7 px darueber
hinaus. Zwei gleich grosse Kaesten mit ungleich grossem Inhalt sehen
ungleich gross aus.
Jetzt 145 statt 128 (aussen) und 120 statt 106 (die Segmente) --
dasselbe Verhaeltnis zueinander, nur bis an den Rand. 145 + 4,5 =
149,5 von 150: ein halber Pixel Luft, damit die runde Kappe nicht
abgeschnitten wird.
Die Glocke steht jetzt rechts vom Ring. Damit liegen beide Knoepfe
INNEN, zwischen den Instrumenten und dem Text -- vorher sassen sie an
den beiden Aussenkanten, so weit voneinander entfernt wie moeglich,
obwohl sie dasselbe tun: einstellen, was einen erreicht.
--- screen2: die Stunden ---
"die stunden muss noch perfektionnieren."
DIE LICHTKANTE WAR EIN KRATZER. Sie stand auf 50 Prozent Weiss bei 0,9
Breite. Auf den schmalen Sekunden- und Minutenbahnen ist das eine
Kante; auf dem 5,8 px breiten Stundenbalken war es ein zweiter,
weisser Balken auf dem roten. Der Grund ist Verhaeltnis UND Farbe:
0,9 von 3,2 sind 28 Prozent, 0,9 von 5,8 nur 16 -- aber die Stunde ist
die einzige deckende, kraeftig gefaerbte Bahn, und auf Rot faellt
dasselbe Weiss doppelt so stark auf wie auf Silber. Jetzt 22 Prozent
bei 0,6 Breite.
DER KOPF BLEIBT ROT. Er stand auf #ffd9dd, also fast weiss -- das
aktuelle Glied war zwar das hellste, hatte aber die Farbe seiner Bahn
verloren und sah aus wie ein Fremdkoerper zwischen den roten Balken.
Jetzt ein helles, deutliches Rot: Es hebt sich durch Helligkeit ab,
nicht durch eine andere Farbe.
--- screen3: die Report-Karten stehen gerade ---
"ich will dass alles passt, nicht bedeckt ist, schief steht oder zu
tief oder zu hoch."
NACHGEMESSEN, ALLE 17 KARTEN -- der Befund deckt sich genau mit dem,
was er beschreibt: Name und Zahl lagen 12 bis 28 px auf VERSCHIEDENEN
Hoehen, sie ueberlappten sich waagerecht (gemessener Abstand -183 bis
-524 px), und Karten in derselben Reihe waren verschieden hoch.
DIE URSACHE IST EINE ZEILE: `.kachel__zahl` steht `position: absolute`
bei top 13 / right 13. Auf der Startseite ist das richtig -- gleich
grosse Kacheln, einzeiliger Name. Hier bricht der Name um ("Community:
neue Eintraege"), die Karte waechst nach unten, die Zahl bleibt oben
kleben. Sie war ausserdem fuer die Hoehenrechnung unsichtbar, weshalb
es vorher schon eine `min-height` als Pflaster brauchte.
Jetzt ein echtes Raster: Name links (Zeile 1), Trend darunter, Zahl
rechts ueber beide Zeilen und mittig. `display: contents` auf dem
Wrapper -- so werden seine Kinder selbst zu Rasterfeldern, ohne dass am
HTML etwas geaendert werden muss und ohne dass die Startseite, die
dieselben Klassen benutzt, etwas davon mitbekommt.
Nachgemessen danach: 17 von 17 sauber -- nichts ragt heraus, nichts
ueberlappt, nichts abgeschnitten, kein Versatz ueber 5 px, und keine
Reihe mit ungleichen Hoehen.
--- screen4: Schutz & Regeln wird Magenta ---
"ich will dass die kategorie eine farbe bekommt die extrem krass
auffaellt. diese kategorie ist naemlich seeeehr wichtig."
MAGENTA, WEIL ES DAS EINZIGE IST, DAS ES SONST NICHT GIBT. Rot ist fuer
"ueberfaellig" und Spicy Media vergeben, Babyblau fuer DogFather, Lila
fuer Manager, Gruen fuer Scout, Bronze fuer Creator, Bernstein fuer
"dringend". #ff2fd0 stoesst mit keinem davon zusammen -- es faellt
nicht auf, weil es HELLER ist, sondern weil es einzigartig ist. Das
ist verlaesslicher: Helligkeit konkurriert mit den Nachbarn,
Einzigartigkeit nicht.
Gerechnet wie bei Ton 21: Abstand zum naechsten Nachbarn 0,1305 (die
Grenze im Satz liegt bei 0,0973), Buntheit 0,276 -- die hoechste im
ganzen Satz, das alte Gold lag bei 0,170 --, Kontrast 6,00:1. Von
sieben Kandidaten sind drei an der Abstandsgrenze gescheitert. Das
Saeuregelb #e0ff00 waere lauter gewesen (16,86:1), haette sich aber
mit dem Bernstein von "dringend" und dem Gold der Nachbarkacheln um
dieselbe Wirkung gestritten. Die Kachel bleibt gebaut wie alle
anderen; was sie heraushebt, ist die Farbe, keine Sonderform.
--- Eine Rueckwirkung, die pruef-buehne gefunden hat ---
Die Typenschilder von gestern nutzen `background-clip: text` -- dafuer
MUSS `color: transparent` sein. pruef-buehne las genau dieses `color`,
machte daraus Schwarz und meldete 1,07:1 fuer Text, der hell und gut
lesbar ist. Fuenf Fehlalarme auf drei Seiten.
Eine Warnung, die bei richtiger Arbeit anschlaegt, wird abgeschaltet.
Sie ist deshalb nicht weichgemacht, sondern GENAUER geworden: Bei
Verlaufsschrift zaehlt jetzt der DUNKELSTE Farbstopp der ersten
Hintergrundebene -- der schlechteste Punkt, den es auf dieser Schrift
wirklich gibt. Damit meldet start.html 4,74:1 (noetig 4,5), die
Pruefung findet also weiter die engste Stelle.
UND DIE GEGENPROBE HAT SOFORT EINEN FEHLER IN MEINEM EIGENEN CODE
GEFUNDEN: Ich suchte das Ende der ersten Ebene mit `"),"` -- diese
Zeichenfolge steht aber schon am Ende des ERSTEN `rgb(...)`. Die
Messung las damit immer nur den ersten Stopp und haette einen dunklen
Verlauf fuer hell gehalten. Jetzt wird ueber Klammern gezaehlt. Der
Helfer steht einmal und wird als Quelltext in beide Seiten-Aufrufe
gereicht -- zwei Kopien waeren zwei Gelegenheiten auseinanderzulaufen.
Geprueft: pruef-buehne (mit neuer Gegenprobe), pruef-start-ansicht,
pruef-css-klassen, pruef-handy, pruef-workspace-seiten -- alle in
Ordnung.
Co-Authored-By: Claude Opus 5 <[email protected]>
351 lines
16 KiB
HTML
351 lines
16 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||
<title>Kalender · Spicy & Dogi</title>
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<link rel="manifest" href="/workspace/app.webmanifest" />
|
||
<!-- Die Farbe der Fensterleiste, wenn der Workspace als App laeuft.
|
||
Stand auf #0674b9 (kraeftiges Blau) und stach damit als einziger
|
||
heller Balken ueber einer durchweg dunklen Seite. Jetzt derselbe
|
||
Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite
|
||
eine Flaeche sind statt zweier. -->
|
||
<meta name="theme-color" content="#06090f" />
|
||
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609090258" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609090258" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090258" />
|
||
<link rel="stylesheet" href="assets/css/kalender.css?v=202609090258" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609090258" />
|
||
</head>
|
||
|
||
<body class="start">
|
||
|
||
<!-- Der Schleier ueber der Buehne (Casper und HasiDog in den unteren
|
||
Ecken, siehe start.css). Ein eigenes Element statt eines dritten
|
||
Pseudo-Elements -- body hat nur ::before und ::after. -->
|
||
<div class="schleier" aria-hidden="true"></div>
|
||
|
||
<header class="kopfleiste">
|
||
<button type="button" class="zurueck-knopf" id="zurueck" hidden>
|
||
<svg class="zurueck-knopf__pfeil" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M14.5 5.5 8 12l6.5 6.5" />
|
||
</svg>
|
||
<span class="zurueck-knopf__text">Zurück</span>
|
||
</button>
|
||
<p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator Workspace</a> · Kalender</span></p>
|
||
<div class="kopfleiste__rechts">
|
||
<span class="wer" id="wer">…</span>
|
||
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="inhalt inhalt--breit">
|
||
|
||
<!-- 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>
|
||
<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. -->
|
||
<!-- ==== ALLES DREI IN EINER KACHEL (08.09.2026) =================
|
||
Filipe: "ich will dass das alles in einer geilen kachel ist wie
|
||
die kacheln in der start seite. und noch geiler."
|
||
|
||
Die drei Abschnitte -- was als Naechstes ansteht, was in diesem
|
||
Monat liegt, was von allein weiterlaeuft -- standen frei auf dem
|
||
Hintergrundbild. Drei Ueberschriften ohne Fassung lesen sich als
|
||
drei lose Listen; zusammen sind sie EINE Auskunft: was ausser den
|
||
Terminen im Kalender sonst noch kommt.
|
||
|
||
Der Umschlag traegt die Kacheloptik der Startseite (Fase, Raster,
|
||
Innenschatten), die drei Abschnitte darin nur noch ihre
|
||
Ueberschrift. Faellt alles drei weg, verschwindet auch die
|
||
Kachel -- siehe `:has()` in kalender.css. -->
|
||
<section class="k-anlasskachel">
|
||
|
||
<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>
|
||
|
||
<!-- Die laufenden Wiederholungen. Steht bewusst über dem Kalender und
|
||
nicht in einem Menü versteckt: Was von allein weiterläuft, muss
|
||
man sehen können, sonst weiß nach drei Monaten niemand mehr,
|
||
warum jeden Dienstag ein Call im Kalender steht. -->
|
||
<section class="k-leiste k-serien" id="serien-block" hidden>
|
||
<p class="feldschild">Läuft von allein</p>
|
||
<div class="k-serienliste" id="serien"></div>
|
||
</section>
|
||
|
||
</section><!-- /.k-anlasskachel -->
|
||
|
||
<form class="neu" id="neu" hidden>
|
||
<div class="neu__zeile">
|
||
<label class="feld-schild" for="f-titel">Worum geht es?</label>
|
||
<input id="f-titel" maxlength="160" placeholder="z. B. Wochen-Call mit Luna" required />
|
||
</div>
|
||
<div class="neu__raster">
|
||
<div>
|
||
<label class="feld-schild" for="f-art">Art</label>
|
||
<!-- NEUN ARTEN, IN ZWEI GRUPPEN (08.09.2026).
|
||
|
||
Die Gruppen sind nicht Deko: Die ersten drei sind INTERNE
|
||
Termine, die anderen sechs sind AUFTRITTE. Das ist der
|
||
Unterschied, nach dem man sucht ("ist das ein Arbeitstermin
|
||
oder ein Stream?"), und eine Liste aus neun gleichrangigen
|
||
Zeilen laesst ihn nicht erkennen. -->
|
||
<select id="f-art">
|
||
<optgroup label="Intern">
|
||
<option value="call" selected>Call</option>
|
||
<option value="termin">Termin</option>
|
||
<option value="review">Review</option>
|
||
</optgroup>
|
||
<optgroup label="Auftritt">
|
||
<option value="bigmatch">BigMatch</option>
|
||
<option value="turnier">Turnier</option>
|
||
<option value="special">Special-Live</option>
|
||
<option value="collab">Collab</option>
|
||
<option value="raid">Raid-Train</option>
|
||
<option value="charity">Charity</option>
|
||
</optgroup>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="feld-schild" for="f-beginn">Beginn</label>
|
||
<input id="f-beginn" type="datetime-local" required />
|
||
</div>
|
||
<div>
|
||
<label class="feld-schild" for="f-dauer">Dauer <span class="feld-schild__still">Minuten</span></label>
|
||
<input id="f-dauer" type="number" min="5" max="1440" step="5" value="30" />
|
||
</div>
|
||
<!-- Wiederholen. Die Auswahl wird erst beim Öffnen gefüllt, weil
|
||
ihre Beschriftungen vom gewählten Datum abhängen: "jeden
|
||
Dienstag", "jeden Monat am 2." – so muss niemand raten, was
|
||
ein Rhythmus im eigenen Fall bedeutet. -->
|
||
<div>
|
||
<label class="feld-schild" for="f-takt">Wiederholen</label>
|
||
<select id="f-takt">
|
||
<option value="">Einmalig</option>
|
||
</select>
|
||
</div>
|
||
<div id="feld-teilnehmer" hidden>
|
||
<label class="feld-schild" for="f-teilnehmer">Mit wem</label>
|
||
<select id="f-teilnehmer"><option value="">—</option></select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- WER SONST NOCH DABEI IST (05.09.2026).
|
||
Wunsch: "ich will auch 2 leute markieren können mit denen der
|
||
call ist."
|
||
|
||
Einzelne Schalter statt eines <select multiple>: Das verliert
|
||
bei einem Fehlklick die ganze Auswahl und ist am Handy kaum zu
|
||
bedienen.
|
||
|
||
FÜR JEDE ROLLE, nicht nur für die Leitung (05.09.2026:
|
||
*"das soll für jeden verfügbar sein"*). Das ist ohne Risiko,
|
||
weil nicht die Oberfläche entscheidet, wen man auswählen darf,
|
||
sondern der Server: /api/personen liefert jeder Rolle nur die
|
||
zugeteilten Namen, und teilnehmerSetzen() lässt alles andere
|
||
still weg. Ein Creator sieht hier also seine Betreuer, keine
|
||
fremden Creator.
|
||
|
||
Die Klassen heißen k-dabei__* und stehen in kalender.css.
|
||
Vorher waren es die .wahl__*-Klassen aus dateien.css -- die
|
||
diese Seite gar nicht einbindet, weshalb die Namen ohne jeden
|
||
Abstand aneinanderklebten. -->
|
||
<div id="feld-dabei" hidden>
|
||
<p class="feld-schild">Wer ist noch dabei?</p>
|
||
<div class="k-dabei" id="dabei-wahl"></div>
|
||
<p class="leise" id="dabei-hinweis"></p>
|
||
</div>
|
||
|
||
<!-- Erscheint nur, wenn ein Rhythmus gewählt ist. Der Satz darunter
|
||
sagt in Worten, was gleich passiert – eine Regel, die man nicht
|
||
vorlesen kann, stellt man später nicht mehr richtig ab. -->
|
||
<div class="neu__zeile k-wdh" id="feld-wdh" hidden>
|
||
<div class="k-wdh__ende">
|
||
<label class="feld-schild" for="f-ende">Läuft bis
|
||
<span class="leise">(leer = bis du sie abstellst)</span></label>
|
||
<input id="f-ende" type="date" />
|
||
</div>
|
||
<p class="k-wdh__satz" id="wdh-satz" aria-live="polite"></p>
|
||
</div>
|
||
<div class="neu__zeile">
|
||
<label class="feld-schild" for="f-ort">Ort oder Link <span class="leise">(optional)</span></label>
|
||
<input id="f-ort" maxlength="400" placeholder="Discord, Meet-Link, Adresse …" />
|
||
</div>
|
||
<div class="neu__zeile">
|
||
<label class="feld-schild" for="f-text">Notiz <span class="leise">(optional)</span></label>
|
||
<textarea id="f-text" rows="2" maxlength="4000"></textarea>
|
||
</div>
|
||
<p class="fehler" id="neu-fehler" role="alert" aria-live="polite"></p>
|
||
<div class="neu__knoepfe">
|
||
<button type="submit" class="knopf knopf--klein" id="neu-speichern">Eintragen</button>
|
||
<button type="button" class="abmelden" id="neu-abbrechen">Abbrechen</button>
|
||
</div>
|
||
</form>
|
||
|
||
|
||
|
||
|
||
<!-- KALENDER ABONNIEREN (06.09.2026, Stufe 3.2 des Plans).
|
||
|
||
Steht unten und zugeklappt: Man richtet ihn EINMAL ein und sieht
|
||
ihn danach nie wieder an. Ein Kasten, der dauerhaft Platz nimmt,
|
||
obwohl er einmal im Leben gebraucht wird, drängt sich vor die
|
||
Termine – und um die geht es hier.
|
||
|
||
Warum es das überhaupt gibt: Der Workspace kann benachrichtigen,
|
||
aber er kann nicht verhindern, dass jemand einen Zahnarzttermin
|
||
auf denselben Dienstag legt. Das kann nur ein Kalender, der die
|
||
Termine dort hat, wo ohnehin nachgesehen wird. -->
|
||
<details class="k-abo" id="abo-block">
|
||
<summary class="k-abo__kopf">
|
||
<span class="k-abo__titel">In deinen eigenen Kalender holen</span>
|
||
<span class="k-abo__unter">Google, Apple, Outlook – einmal einrichten, dann läuft es</span>
|
||
</summary>
|
||
<div class="k-abo__inhalt">
|
||
<p class="k-abo__satz" id="abo-satz">
|
||
Du bekommst einen persönlichen Link. Wer ihn hat, sieht deine Termine –
|
||
gib ihn also nicht weiter. Falls doch: Du kannst ihn jederzeit ersetzen,
|
||
der alte ist dann sofort tot.
|
||
</p>
|
||
|
||
<div class="k-abo__zeile" id="abo-hat" hidden>
|
||
<input class="k-abo__feld" id="abo-link" readonly aria-label="Dein Kalender-Link" />
|
||
<button type="button" class="knopf knopf--klein" id="abo-kopieren">Kopieren</button>
|
||
</div>
|
||
|
||
<p class="k-abo__stand" id="abo-stand"></p>
|
||
|
||
<div class="k-abo__knoepfe">
|
||
<button type="button" class="knopf knopf--klein" id="abo-erzeugen">Link erzeugen</button>
|
||
<button type="button" class="abmelden" id="abo-neu" hidden>Neuen Link erzeugen</button>
|
||
<button type="button" class="abmelden abmelden--warnung" id="abo-aus" hidden>Abschalten</button>
|
||
</div>
|
||
|
||
<p class="k-abo__hilfe" id="abo-hilfe" hidden>
|
||
<strong>So trägst du ihn ein:</strong>
|
||
<span class="k-abo__weg">Google Kalender: links unten bei „Weitere Kalender“ auf das Plus,
|
||
dann „Per URL“ – Link einfügen – „Kalender hinzufügen“.</span>
|
||
<span class="k-abo__weg">iPhone: Einstellungen → Apps → Kalender → Accounts →
|
||
Account hinzufügen → Andere → Kalenderabo hinzufügen – Link einfügen.</span>
|
||
<span class="k-abo__weg">Outlook: Kalender → Kalender hinzufügen → Aus dem Internet abonnieren.</span>
|
||
<span class="k-abo__weg leise">Die Kalender holen neue Termine selbst ab – meist innerhalb
|
||
weniger Stunden, nicht sofort. Das legen Google und Apple fest, nicht wir.</span>
|
||
</p>
|
||
|
||
<p class="fehler" id="abo-fehler" role="alert" aria-live="polite"></p>
|
||
</div>
|
||
</details>
|
||
|
||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||
|
||
<!-- 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="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. -->
|
||
<!-- DIE FASSUNG UND DAS GLAS SIND ZWEI EBENEN (screen2, 09.09.2026).
|
||
Der <dialog> selbst traegt nur noch die Fase und den
|
||
Farbverlauf der Fassung; alles Sichtbare liegt in
|
||
`.k-dialog__glas` darin. Ohne diese zweite Ebene muesste die
|
||
Fassung ein `border` sein -- und ein Rand folgt dem Rechteck,
|
||
nicht der abgeschraegten Ecke. Dieselbe Bauart wie bei der
|
||
Zentrale und der Rollenkachel auf der Anmeldeseite. -->
|
||
<dialog id="tagdialog" class="k-dialog" aria-labelledby="tagdialog-titel">
|
||
<div class="k-dialog__glas">
|
||
<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>
|
||
</div><!-- /.k-dialog__glas -->
|
||
</dialog>
|
||
|
||
<!-- ====================================================================
|
||
DER WECKER (07.09.2026)
|
||
|
||
Filipe: "wie so ein wecker, den man in den eintraegen aktivieren
|
||
oder ausschalten kann ... auch mehrmals informiert."
|
||
|
||
Ein eigener Dialog und kein Aufklapp-Feld im Tagesfenster: Der
|
||
Wecker gehoert zu EINEM Termin, und im Tagesfenster stehen mehrere.
|
||
Ein Feld, das sich dort aufklappt, schiebt alles darunter weg --
|
||
man verliert die Zeile, die man gerade angesehen hat.
|
||
|
||
<dialog> statt eines selbstgebauten Kastens: Es bringt das
|
||
Wichtigste mit, was man sonst vergisst -- Escape schliesst, der
|
||
Tastaturfokus bleibt darin gefangen, und der Rest der Seite ist
|
||
fuer Vorleseprogramme abgemeldet. -->
|
||
<dialog class="tagdialog wecker-dialog" id="wecker-dialog" aria-labelledby="wecker-titel">
|
||
<div class="tagdialog__kopf">
|
||
<div>
|
||
<h2 class="titel" id="wecker-titel">Erinnerung</h2>
|
||
<p class="leise" id="wecker-wann"></p>
|
||
</div>
|
||
<button type="button" class="knopf-still" id="wecker-zu" aria-label="Schließen">✕</button>
|
||
</div>
|
||
<p class="leise wecker-hinweis">
|
||
Nur für dich. Andere Teilnehmer stellen ihre Erinnerungen selbst ein.
|
||
</p>
|
||
<div class="wecker-liste" id="wecker-liste"></div>
|
||
<p class="fehler" id="wecker-fehler" role="alert" aria-live="polite"></p>
|
||
</dialog>
|
||
|
||
</main>
|
||
|
||
<script src="assets/js/wahl.js?v=202609090258" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609090258" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609090258" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609090258" defer></script>
|
||
<script src="assets/js/kalender.js?v=202609090258" defer></script>
|
||
<script src="assets/js/kalender-abo.js?v=202609090258" defer></script>
|
||
</body>
|
||
</html>
|