DogFatherGitandClaude Opus 5
6815ba89ba
--- screen1: die sieben Zahlen fuehren zu ihren Aufgaben ---
"wenn ich auf die druecke soll ich auf zu denen punkten gebracht
werden."
Der Weg dahin gab es laengst: `aufgaben.html?zeigen=<schluessel>`
springt zu den passenden Karten und legt eine Zeile darueber, was
gezeigt wird. Nur waren die sieben Karten `<li>` ohne Link -- die
Auskunft war da, der Weg dorthin nicht.
Zwei Schluessel fehlten und sind nachgetragen: "heute" (die Karten
tragen dafuer jetzt `data-heute`, denn "heute faellig" ist ein eigener
Zustand und kein Sonderfall von "ueberfaellig") und "abgebrochen" --
das klappt zusaetzlich den Kasten auf, in dem die Abgebrochenen
stehen. Ein Sprung in einen zugeklappten Kasten laesst einen glauben,
der Knopf sei kaputt.
EIN <a> IM <li>, NICHT DAS <li> KLICKBAR: Ein Listenpunkt mit einem
Klick-Zuhoerer ist fuer Tastatur und Vorleseprogramm kein Ziel. Die
Trefferflaeche wird ueber ein durchsichtiges `::after` auf die ganze
Kachel gestreckt -- im ersten Anlauf stand dort `padding: inherit`,
was die 14/16 der Kachel ein zweites Mal aufgetragen und sie siebenmal
um 28 px verbreitert haette.
DIE NULL BLEIBT EIN LINK. Der Sprung zeigt dann eine leere Spalte mit
der Zeile "Aufgaben, die offen sind" -- das ist eine Antwort. Ein
toter Knopf ist keine.
--- screen2: die Kategorietitel werden Typenschilder ---
"die titel von den kategorien sollen spezieller und geiler sein."
Fase statt Rundung (die Pille war das einzige Rund auf einer Seite aus
abgeschraegten Platten), ein gepraegter Anschlag aus drei Kerben
statt eines Strichs, gebuerstetes Metall in der Schrift und eine
auslaufende Linie nach rechts.
UND DABEI EIN FUND: Der "leuchtende Strich" vor "Was ist dran" und
"Deine Aufgaben" wurde NIE GEZEICHNET. `.zahlen-block .feldschild`
setzt `display: flex`, damit das Pseudoelement eine Box bekommt --
rund 1200 Zeilen spaeter steht `.inhalt .feldschild { display: block }`
mit derselben Spezifitaet, und die spaetere gewinnt. Das Schild war
`block`, das Pseudoelement damit `inline`, und ein Inline-Kasten
ignoriert `width` und `height`. Aufgefallen ist es nur, weil mein
neuer Anschlag ebenfalls unsichtbar blieb und die Messung sagte: Der
Text beginnt bei x=12, also genau an der Polsterung -- davor belegt
nichts Platz.
Die Gegenprobe hat mich dabei vor einer falschen Reparatur bewahrt:
Ich hatte den Textverlauf (`background-clip: text`) im Verdacht.
Einmal mit und einmal ohne gemessen -- in beiden Faellen x=12. Damit
war die Ursache ausgeschlossen, bevor ich an der falschen Stelle
gearbeitet habe.
--- screen3: DogFather wird Silber, der Husky wird das echte Logo ---
"dieses husky symbol soll ersetzt werden durch den husky oben in der
leiste. und die farbe von der rolle und die barre soll so richtig geil
silber sein ... und der husky soll eine geile babyblau [Auge] haben."
Damit kehrt die Rolle zu dem zurueck, was im allerersten Auftrag stand
("husky: silber und blaue augen").
DAS ZEICHEN war eine geometrische Eigenkonstruktion -- ein Fuenfeck mit
zwei dreieckigen Ohren. Ordentlich gebaut, aber nicht DER Husky: Oben
in der Leiste steht die richtige Marke, und zwei verschiedene Huskys
auf einer Seite sind einer zu viel. Jetzt das echte Logo als <image>,
eingefaerbt mit `feComponentTransfer` -- eine zweistufige Tabelle
bildet Schwarz auf dunklen Stahl und Weiss auf Silber ab. Ein
`feColorMatrix` koennte das nicht; er mischt nur linear und zoege die
Mitteltoene flach.
DAS AUGE IST GEMESSEN, NICHT GESETZT: Ein Durchlauf ueber die
Bildpunkte hat die Pupille als einzige dunkle Insel gefunden, die
ringsum von Hellem umgeben ist -- bei 165/258 von 512, also 32,2 % und
50,4 %.
DIE ROLLENFARBE NACHGERECHNET, weil Silber gefaehrlich ist: Es hat
kaum Buntheit und koennte neben einer anderen Rolle verschwinden. In
OKLab liegt #d8e0ec 0,1901 von seinem naechsten Nachbarn (Scout)
entfernt -- das bisherige Babyblau lag bei 0,1349. Die fuenf Rollen
sind dadurch BESSER auseinanderzuhalten als vorher. Kontrast 14,41:1.
"wie mit sternen" ist als GLANZ gebaut, nicht als Funkeln: ein
schmales schraeges Spitzlicht und drei winzige Lichtpunkte, alles
still. Ein wanderndes Glitzern auf der Anmeldeseite waere genau das,
was die Hausregel verbietet.
Nebenbei: `rs-silber` faerbte den alten Husky und wird jetzt nirgends
mehr benutzt -- entfernt statt liegengelassen.
--- Aufraeumen ---
`ruf.png` (ein Messbild von mir) war ueber `git add -A` ins Repo und
bis auf den Server gewandert -- die Loeschung kam eine Zeile zu spaet.
Entfernt, und `.gitignore` sperrt jetzt das Praefix `zz-`, das solche
Dateien ab sofort tragen. Eine Regel im Werkzeug ist besser als eine,
an die ich mich erinnern muss.
Geprueft: pruef-rollen (97), pruef-start-ansicht, pruef-css-klassen,
pruef-workspace-seiten -- alle in Ordnung. Dazu die sieben Links und
beide neuen Sprungziele im Browser durchgeklickt.
Co-Authored-By: Claude Opus 5 <[email protected]>
334 lines
17 KiB
HTML
334 lines
17 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 · 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=202609090155" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609090155" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090155" />
|
||
<link rel="stylesheet" href="assets/css/personen.css?v=202609090155" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609090155" />
|
||
</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> · Personen</span></p>
|
||
<div class="kopfleiste__rechts">
|
||
<span class="wer" id="wer">…</span>
|
||
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ====================================================================
|
||
DIE FÜNF ROLLENZEICHEN, plastisch (08.09.2026)
|
||
|
||
Filipe: "die symbole sollen auch noch viel viel viel realistischer
|
||
und geiler sein", mit genauen Vorgaben je Rolle:
|
||
peperoni rot und grün
|
||
husky silber und blaue Augen
|
||
manager gelber Stern, der glitzert
|
||
scout grünes Schild mit einer roten Peperoni darin
|
||
creator lila und silber, "was richtig geiles"
|
||
|
||
WAS SICH GRUNDSÄTZLICH ÄNDERT: Vorher trug jedes Zeichen genau EINE
|
||
Farbe (`currentColor` über `.fuell`/`.linie`). Damit lässt sich
|
||
"rot UND grün" nicht darstellen. Jedes Zeichen bekommt deshalb
|
||
eigene Verläufe — dieselbe Technik, mit der auch die Kacheln
|
||
plastisch wirken: ein heller Rand oben, die Sättigung in der Mitte,
|
||
Abdunklung unten. Das ergibt Volumen statt einer flachen Fläche.
|
||
|
||
WARUM VERLÄUFE UND KEIN DETAIL: Diese Zeichen stehen bei 22 px.
|
||
Mehr Linien werden dort zu Matsch — das stand schon beim Husky hier,
|
||
und es gilt weiter. "Realistischer" heißt bei dieser Größe also
|
||
nicht "mehr Striche", sondern LICHT: eine Form, auf die Licht fällt,
|
||
wirkt körperlich; dieselbe Form flach gefüllt wirkt wie ein
|
||
Aufkleber. Alle Verläufe laufen deshalb von oben nach unten, als
|
||
stünde das Licht über der Seite — so wie bei allem anderen hier auch.
|
||
|
||
Die Verlaufs-IDs sind mit `rs-` vorangestellt (RollenSymbol), damit
|
||
sie mit nichts kollidieren, was später dazukommt.
|
||
==================================================================== -->
|
||
<!-- NICHT `display:none` VERSTECKEN -- das war ein echter Fehler, und man
|
||
sieht ihn erst im Bild (08.09.2026).
|
||
|
||
Solange die Zeichen einfarbig waren (`currentColor` ueber CSS), war
|
||
`display:none` harmlos. Sobald sie ihre Farbe aus einem <linearGradient>
|
||
im selben <defs> holen, ist es das nicht mehr: Ein Verlauf in einem
|
||
Teilbaum, der `display:none` traegt, wird nicht ausgewertet, und ein
|
||
`<use>` darauf bekommt schlicht KEINE Fuellung. Im Bildschirmfoto
|
||
standen daraufhin fuenf Bruchstuecke -- nur die Strichlinien, keine
|
||
Flaechen. Die Zahlen sagten dazu nichts, das Sprite war ja da.
|
||
|
||
Richtig ist ein Kasten ohne Groesse: Er wird gerendert (Verlaeufe
|
||
werden also aufgeloest), nimmt aber keinen Platz ein. -->
|
||
<svg width="0" height="0" style="position:absolute;overflow:hidden" aria-hidden="true"><defs>
|
||
|
||
<linearGradient id="rs-chili-rot" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0" stop-color="#ff8a6b"/>
|
||
<stop offset=".55" stop-color="#ef4136"/>
|
||
<stop offset="1" stop-color="#a8221c"/>
|
||
</linearGradient>
|
||
<linearGradient id="rs-chili-gruen" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0" stop-color="#8fd66a"/>
|
||
<stop offset="1" stop-color="#3f7d33"/>
|
||
</linearGradient>
|
||
<!-- `rs-silber` ist am 09.09.2026 entfallen. Er faerbte den alten,
|
||
selbstgebauten Husky; seit dort das echte Logo steht (mit einem
|
||
eigenen Duotonie-Filter), benutzte ihn niemand mehr. Ein
|
||
Verlauf, den man im Quelltext findet und der nichts faerbt,
|
||
kostet den naechsten Leser eine Suche. -->
|
||
<!-- DER STERN WIRD LILA (08.09.2026, zweite Ansage von Filipe).
|
||
Zuerst hiess es "manager: gelber stern der glitzert", dann nach
|
||
dem Bildschirmfoto: "die hauptfarbe von denen ist lila, der stern
|
||
soll so bleiben aber was gelb ist soll lila werden."
|
||
|
||
Die FORM bleibt also, nur die Farbe wechselt -- und das ist auch
|
||
stimmiger: Der Manager traegt Lila als Rollenfarbe, ein goldener
|
||
Stern daneben waere die einzige Stelle gewesen, an der Zeichen und
|
||
Rolle auseinandergehen. Die Wechsel hell/dunkel bleiben, sie sind
|
||
es, die aus einer Flaeche einen Koerper machen.
|
||
|
||
Der Name der Kennung bleibt `rs-gold`: Sie wird an mehreren
|
||
Stellen benutzt, und ein Umbenennen waere eine zweite Gelegenheit,
|
||
eine davon zu vergessen. -->
|
||
<linearGradient id="rs-gold" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0" stop-color="#e6d6ff"/>
|
||
<stop offset=".45" stop-color="#a78bfa"/>
|
||
<stop offset="1" stop-color="#5b3fa8"/>
|
||
</linearGradient>
|
||
<linearGradient id="rs-schild" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0" stop-color="#7fe0ae"/>
|
||
<stop offset=".5" stop-color="#3faa78"/>
|
||
<stop offset="1" stop-color="#1c5e42"/>
|
||
</linearGradient>
|
||
<linearGradient id="rs-lila" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0" stop-color="#d9c9ff"/>
|
||
<stop offset=".38" stop-color="#a78bfa"/>
|
||
<stop offset="1" stop-color="#5b3fa8"/>
|
||
</linearGradient>
|
||
<linearGradient id="rs-lila-silber" x1="0" y1="1" x2="1" y2="0">
|
||
<stop offset="0" stop-color="#6d4fc4"/>
|
||
<stop offset=".5" stop-color="#cbd5e1"/>
|
||
<stop offset="1" stop-color="#a78bfa"/>
|
||
</linearGradient>
|
||
<radialGradient id="rs-auge" cx=".38" cy=".32" r=".85">
|
||
<stop offset="0" stop-color="#bfe9ff"/>
|
||
<stop offset=".45" stop-color="#3fa9f5"/>
|
||
<stop offset="1" stop-color="#0f4c75"/>
|
||
</radialGradient>
|
||
|
||
<!-- SPICY MEDIA — die Peperoni, rot mit grünem Stiel.
|
||
Der Stiel liegt ÜBER der Frucht und ist eine eigene Form: Als
|
||
Teil desselben Pfades hätte er die Farbe der Frucht erben müssen,
|
||
und genau das wollte Filipe nicht. -->
|
||
<g id="r-chili">
|
||
<path fill="url(#rs-chili-rot)" d="M13.4 4.6c-.6 1.4-.3 2.6.6 3.4 3 .3 5 2.6 5 5.4 0 3.4-3 6-6.8 6-4.6 0-8.2-2.9-9.7-6.7 3.7.9 6.6-.4 8-3.1.6-1.2.4-2.4-.4-3.1"/>
|
||
<path fill="none" stroke="rgba(255,255,255,.5)" stroke-width=".9" stroke-linecap="round" d="M6.2 13.9c2.4 1.9 5 2.6 7.4 2"/>
|
||
<path fill="none" stroke="url(#rs-chili-gruen)" stroke-width="1.9" stroke-linecap="round" d="M13.4 4.6c1.5-.6 2.8.1 3 1.4"/>
|
||
<path fill="none" stroke="url(#rs-chili-gruen)" stroke-width="1.7" stroke-linecap="round" d="M13.4 4.6c-.5 1.2-.3 2.3.5 3.2"/>
|
||
</g>
|
||
|
||
<!-- DER HUSKY IST JETZT DAS ECHTE LOGO (09.09.2026, screen3).
|
||
|
||
Filipe: "dieses husky symbol soll ersetzt werden durch den husky
|
||
oben in der leiste ... die farbe von der rolle und die barre soll
|
||
so richtig geil silber sein ... und der husky soll eine geile
|
||
babyblau sein haben."
|
||
|
||
Hier stand eine geometrische Eigenkonstruktion: ein Fuenfeck mit
|
||
zwei dreieckigen Ohren und zwei Punkten. Sie war ordentlich
|
||
gebaut, aber sie war nicht DER Husky -- oben in der Leiste steht
|
||
die richtige Marke, und zwei verschiedene Huskys auf einer Seite
|
||
sind einer zu viel.
|
||
|
||
DAS BILD KOMMT ALS <image>, DIE FARBE AUS EINEM FILTER. Die
|
||
Datei ist schwarz-weiss und freigestellt. `feComponentTransfer`
|
||
mit einer zweistufigen Tabelle bildet sie auf zwei Farben ab:
|
||
Schwarz wird zu dunklem Stahl (#2a3644), Weiss zu Silber
|
||
(#e8eef6). Das ist eine echte Duotonie -- ein `feColorMatrix`
|
||
koennte das nicht, der kann nur linear mischen und wuerde die
|
||
Mitteltoene flach ziehen.
|
||
|
||
DAS AUGE IST GEMESSEN, NICHT GESETZT: Ein Durchlauf ueber die
|
||
Bildpunkte hat die Pupille als einzige dunkle Insel gefunden,
|
||
die ringsum von Hellem umgeben ist -- bei 165/258 von 512, also
|
||
32,2 % und 50,4 %. Im 24er Raster sind das 7,73 und 12,1.
|
||
Darauf liegen Iris (babyblau), Pupille und ein Glanzpunkt.
|
||
|
||
Warum ueberhaupt eine Iris: Das Logo hat ein schwarzes Auge.
|
||
Babyblau war seit dem ersten Auftrag gewuenscht ("husky: silber
|
||
und blaue augen") und ist es jetzt wieder -- es ist der einzige
|
||
Farbfleck an einem sonst silbernen Zeichen und traegt damit
|
||
genau so viel Farbe wie die anderen Rollen auch. -->
|
||
<filter id="rs-husky-duo" color-interpolation-filters="sRGB">
|
||
<feComponentTransfer>
|
||
<feFuncR type="table" tableValues="0.165 0.910"/>
|
||
<feFuncG type="table" tableValues="0.212 0.933"/>
|
||
<feFuncB type="table" tableValues="0.267 0.965"/>
|
||
</feComponentTransfer>
|
||
</filter>
|
||
<g id="r-husky">
|
||
<image href="assets/img/marke-husky.webp" x="0" y="0" width="24" height="24"
|
||
preserveAspectRatio="xMidYMid meet" filter="url(#rs-husky-duo)"/>
|
||
<circle fill="#7ec8f2" cx="7.73" cy="12.1" r="1.05"/>
|
||
<circle fill="#16232f" cx="7.73" cy="12.1" r="0.52"/>
|
||
<circle fill="#ffffff" opacity=".85" cx="7.5" cy="11.85" r="0.2"/>
|
||
</g>
|
||
|
||
<!-- MANAGER — der goldene Stern, der glitzert.
|
||
Das Funkeln ist ein schmaler heller Streifen, der einmal quer
|
||
über den Stern wandert. Es ist BEWUSST langsam (4,5 s) und
|
||
schwach: Ein schnelles Blinken wäre genau die aggressive Optik,
|
||
die hier nicht sein soll. Bei "weniger Bewegung" steht es still
|
||
(siehe personen.css) -- dann bleibt ein ruhiger goldener Stern. -->
|
||
<g id="r-stern">
|
||
<path fill="url(#rs-gold)" 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"/>
|
||
<path fill="rgba(255,255,255,.45)" d="m12 3.4 2.6 5.6-2.6.7z"/>
|
||
<path class="rs-funkel" fill="rgba(255,255,255,.75)" 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>
|
||
|
||
<!-- SCOUT — grünes Schild mit einer roten Peperoni darin.
|
||
Der Haken von früher ist weg: Filipe hat die Peperoni ausdrücklich
|
||
verlangt, und beides nebeneinander wäre bei 22 px Matsch. Die
|
||
Chili ist stark vereinfacht — bei dieser Größe zählt nur, dass
|
||
eine rote, gebogene Form mit grünem Stiel im Schild steht. -->
|
||
<g id="r-schutz">
|
||
<path fill="url(#rs-schild)" 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 fill="rgba(255,255,255,.28)" d="M12 3.4 5.8 5.9v5c0 1.4.4 2.7 1.1 3.9L12 3.4z"/>
|
||
<path fill="url(#rs-chili-rot)" d="M13.6 8.1c-.4.9-.2 1.7.4 2.2 1.9.2 3.2 1.7 3.2 3.4 0 2.1-1.9 3.8-4.3 3.8-2.9 0-5.2-1.8-6.1-4.2 2.3.6 4.2-.3 5-2 .4-.8.3-1.5-.2-2z" transform="translate(-.6 -.9) scale(.92) translate(1 1)"/>
|
||
<path fill="none" stroke="#8fd66a" stroke-width="1.3" stroke-linecap="round" d="M12.9 7.6c.9-.4 1.7 0 1.8.8"/>
|
||
</g>
|
||
|
||
<!-- CREATOR — Lila und Silber.
|
||
Statt der alten Person-Silhouette (die aussah wie ein leeres
|
||
Benutzerbild und damit wie "niemand") jetzt ein geschliffener
|
||
Kristall: lila Kern, silberne Facetten. Er hat als einziges der
|
||
fünf Zeichen eine Innenzeichnung, und die trägt auch klein --
|
||
weil es gerade Kanten sind, keine Rundungen. -->
|
||
<g id="r-person">
|
||
<path fill="url(#rs-lila)" d="M12 2.6 20 9l-3 11.4H7L4 9z"/>
|
||
<path fill="url(#rs-lila-silber)" opacity=".85" d="M12 2.6 20 9h-5.6zM12 2.6 4 9h5.6z"/>
|
||
<path fill="rgba(255,255,255,.4)" d="M12 2.6 14.4 9H9.6z"/>
|
||
<path fill="none" stroke="rgba(216,222,233,.75)" stroke-width=".8" stroke-linejoin="round" d="M12 2.6 20 9l-3 11.4H7L4 9zM4 9h16M9.6 9 12 20.4 14.4 9"/>
|
||
</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>
|
||
<!-- Der Satz gilt nur für Manager und Spicy Media: Sie sehen hier
|
||
allein das Anlegen. personen.js blendet ihn dafür ein.
|
||
Er stand vorher nur im Skript (`$('unterzeile')`), und dieses
|
||
Element gab es nie -- der Aufruf war mit `&&` abgesichert und
|
||
tat deshalb schweigend nichts. Eine abgesicherte Zeile, die
|
||
ins Leere greift, sieht auf Dauer aus wie eine, die
|
||
funktioniert. -->
|
||
<p class="leise" id="unterzeile" hidden></p>
|
||
</div>
|
||
<div class="kopf-knoepfe">
|
||
<!-- Standardmäßig steht hier nur DogFather. Alle anderen kommen auf
|
||
Knopfdruck dazu – und der Knopf sagt immer, wie viele das sind,
|
||
damit niemand vergisst, dass da noch welche sind. -->
|
||
<button type="button" class="knopf-still" id="rest-schalter"
|
||
aria-expanded="false" aria-controls="liste" hidden>
|
||
<span id="rest-schalter-text">weitere 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>
|
||
<button type="button" class="knopf knopf--klein" id="neu-oeffnen">Person anlegen</button>
|
||
</div>
|
||
</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=202609090155" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609090155" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609090155" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609090155" defer></script>
|
||
<script src="assets/js/personen.js?v=202609090155" defer></script>
|
||
</body>
|
||
</html>
|