DogFatherGitandClaude Opus 5
17157b4f18
Filipe zu dem Feld in der Kopfleiste: "das soll viel besser aussehen
viel geiler aber nicht so eine scheisse."
Er hatte recht. Da stand ein Etikett mit dem Wort SICHT und daneben ein
Auswahlfeld -- ein Formular, das in die Kopfleiste gerutscht war. Drei
Aenderungen:
* DAS AUGE ersetzt das Wort. Es sagt dasselbe in einem Zeichen und
laesst dem NAMEN den Platz, um den es eigentlich geht. Fuer
Vorleseprogramme bleibt die Beschriftung erhalten, nur unsichtbar --
sie ersatzlos zu loeschen haette das Feld unbeschriftet gelassen.
* "Meine Sicht" statt "Alles (meine Sicht)". Der Zusatz erklaerte
nichts und machte den Knopf so breit, dass am Handy nichts anderes
mehr danebenpasste.
* EIN KREUZ statt "zurueck zu mir". Der Satz brauchte mehr Platz als
der Name daneben, und was ein Kreuz an einer aktiven Auswahl tut,
weiss jeder. Die Worte bleiben im aria-label und im Titel.
DIE EIGENTLICHE VERBESSERUNG ist aber die Hierarchie: Im Normalfall
ist der Umschalter still (graues Auge, ruhiger Rand). Sobald eine
FREMDE Sicht laeuft, traegt er ganz Farbe -- nicht nur ein
Zusatzknopf am Rand.
Das ist der gefaehrlichste Zustand dieser Funktion: Wer sie vergisst,
sieht am naechsten Tag drei Aufgaben statt dreissig und haelt das fuer
den Bestand. Ein Zustand, der Schaden anrichtet, muss lauter sein als
einer, der nichts tut.
Co-Authored-By: Claude Opus 5 <[email protected]>
216 lines
9.8 KiB
HTML
216 lines
9.8 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 · Creator Workspace</title>
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<link rel="manifest" href="/workspace/app.webmanifest" />
|
||
<meta name="theme-color" content="#0674b9" />
|
||
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609061746" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609061746" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609061746" />
|
||
<link rel="stylesheet" href="assets/css/kalender.css?v=202609061746" />
|
||
</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. -->
|
||
<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>
|
||
<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>
|
||
<select id="f-art">
|
||
<option value="call" selected>Call</option>
|
||
<option value="termin">Termin</option>
|
||
<option value="review">Review</option>
|
||
</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>
|
||
|
||
<!-- 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>
|
||
|
||
<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. -->
|
||
<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=202609061746" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609061746" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609061746" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609061746" defer></script>
|
||
<script src="assets/js/kalender.js?v=202609061746" defer></script>
|
||
</body>
|
||
</html>
|