DogFatherGitandClaude Opus 5
1894395d8f
Die "Letzten Ereignisse" im Personen-Bereich fuellten mit 25 Zeilen die
halbe Seite, obwohl sie Nachschlagewerk sind und kein Startbild. Jetzt
stehen nur die vier neuesten da, der Rest kommt auf Knopfdruck.
Der Knopf sagt, was er TUT ("Alle 25 zeigen" / "Nur die letzten 4") und
nennt die Zahl, damit man weiss, was dahintersteckt. Bei hoechstens vier
Eintraegen bleibt er ganz weg -- ein Knopf, der nichts verbirgt, verwirrt
nur. Der Pfeil dreht sich, aria-expanded stimmt.
Gemeinsamer Helfer in kopf.js statt zweimal derselbe Block: Dieselbe
Liste gab es auf der Automationen-Seite ("Zuletzt automatisch passiert"),
die verhaelt sich jetzt genauso. Zugeklappt wird per CSS
([data-klapp="zu"]) statt durch Entfernen von Zeilen -- das Aufklappen
braucht so weder Neuaufbau noch zweite Abfrage.
Der Zuhoerer wird nur einmal gesetzt (die Listen werden bei jeder
Aktualisierung neu aufgebaut), und die Anzahl wird bei jedem Umschalten
frisch gelesen statt in der Fassung des ersten Durchlaufs festzuhaengen.
Geprueft: beide Seiten, Computer und Handy, zweimaliges Hin- und
Herklappen, Gegenprobe mit drei Eintraegen -- server/pruef-protokoll-klappe.mjs
Co-Authored-By: Claude Opus 5 <[email protected]>
112 lines
4.8 KiB
HTML
112 lines
4.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>Personen & Zugänge · Creator Workspace</title>
|
|
<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=202608311327" />
|
|
<link rel="stylesheet" href="assets/css/start.css?v=202608311327" />
|
|
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311327" />
|
|
<link rel="stylesheet" href="assets/css/personen.css?v=202608311327" />
|
|
</head>
|
|
|
|
<body class="start">
|
|
|
|
<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"><a class="zurueck" href="start.html">Creator Workspace</a> · Personen</p>
|
|
<div class="kopfleiste__rechts">
|
|
<span class="wer" id="wer">…</span>
|
|
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
|
|
</div>
|
|
</header>
|
|
|
|
<svg style="display:none" aria-hidden="true"><defs>
|
|
<g id="r-krone"><path d="M4 17.6 5.4 7.4l4 3.4L12 5.2l2.6 5.6 4-3.4L20 17.6z"/><path d="M4.6 20.4h14.8"/></g>
|
|
<g id="r-stern"><path d="m12 3.4 2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.8l6-.8z"/></g>
|
|
<g id="r-schutz"><path d="M12 3.4 5.8 5.9v5c0 3.5 2.5 6.7 6.2 8 3.7-1.3 6.2-4.5 6.2-8v-5z"/><path d="m9.5 11.8 1.8 1.8 3.3-3.5"/></g>
|
|
<g id="r-person"><circle cx="12" cy="8.4" r="3.6"/><path d="M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7"/></g>
|
|
</defs></svg>
|
|
|
|
<main class="inhalt inhalt--breit">
|
|
|
|
<section class="kopf-zeile">
|
|
<div>
|
|
<p class="marke">Zugänge</p>
|
|
<h1 class="titel">Personen & Zugangscodes</h1>
|
|
</div>
|
|
<button type="button" class="knopf knopf--klein" id="neu-oeffnen">Person anlegen</button>
|
|
</section>
|
|
|
|
<form class="neu" id="neu" hidden>
|
|
<div class="neu__raster">
|
|
<div>
|
|
<label class="feld-schild" for="f-name">Name</label>
|
|
<input id="f-name" name="name" maxlength="60" placeholder="z. B. Luna" required />
|
|
</div>
|
|
<div class="rollenwahl-block">
|
|
<span class="feld-schild">Rolle</span>
|
|
<!-- Kein Auswahlmenü: Bei vier Möglichkeiten ist eine sichtbare
|
|
Wahl schneller und zeigt gleich, was die Rolle bedeutet. Das
|
|
Systemmenü ließ sich ausserdem nicht gestalten. -->
|
|
<div class="rollenwahl" id="f-rolle" role="radiogroup" aria-label="Rolle"></div>
|
|
</div>
|
|
</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">Anlegen</button>
|
|
<button type="button" class="abmelden" id="neu-abbrechen">Abbrechen</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Anzeige des frisch erzeugten Codes. Bewusst auffällig und mit klarem
|
|
Hinweis, dass er nur jetzt zu sehen ist. -->
|
|
<div class="code-kasten" id="code-kasten" hidden role="status" aria-live="polite">
|
|
<p class="code-kasten__schild">Zugangscode für <span id="code-name"></span></p>
|
|
<p class="code-kasten__code" id="code-wert"></p>
|
|
<p class="code-kasten__hinweis">
|
|
Dieser Code wird <strong>nur jetzt</strong> angezeigt und ist danach nicht mehr
|
|
abrufbar. Sicher weitergeben und in Bitwarden ablegen.
|
|
</p>
|
|
<div class="neu__knoepfe">
|
|
<button type="button" class="knopf knopf--klein" id="code-kopieren">Kopieren</button>
|
|
<button type="button" class="abmelden" id="code-schliessen">Verstanden, schließen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
|
|
|
<div id="liste" aria-busy="true"><p class="leise">Personen werden geladen …</p></div>
|
|
|
|
<!-- Das Protokoll ist Nachschlagewerk, nicht Startbild: Standardmäßig
|
|
stehen nur die letzten vier Zeilen da, alles Weitere auf Knopfdruck. -->
|
|
<section class="protokoll-block">
|
|
<div class="klapp-kopf">
|
|
<p class="feldschild">Letzte Ereignisse</p>
|
|
<button type="button" class="knopf-still" id="protokoll-schalter"
|
|
aria-expanded="false" aria-controls="protokoll" hidden>
|
|
<span id="protokoll-schalter-text">Alle zeigen</span>
|
|
<svg class="klapp-pfeil" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="m6 9.5 6 6 6-6" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div id="protokoll" data-klapp="zu"><p class="leise">…</p></div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<script src="assets/js/wahl.js?v=202608311327" defer></script>
|
|
<script src="assets/js/kopf.js?v=202608311327" defer></script>
|
|
<script src="assets/js/personen.js?v=202608311327" defer></script>
|
|
</body>
|
|
</html>
|