Das Regie-Tor: jeder sieht es, nur die zwei kommen rein -- und Farbe für die Reihen
Filipe, zum Bildschirmfoto des Foyers: „unter den [Reihen] fehlt eine
kachel, die viel kraesser und spezieller aussehen soll, wo nur
dogfather oder vanvan reinkommen. mit ihren zugangscodes für die seite.
und das soll die regie kachel sein. die muss wirklich ultra krass sein.
komplett crazy. die anderen kacheln aber auch gerne farbiger machen und
nicht so kaal und dunkel."
Auf die Rückfrage, wie fest das Schloss sein soll: „punkt 2 aber die
soll jeder sehen aber nur vanvan und dogfather sollen da rein kommen
bitte."
Haus: Team Dogi (crew.dogfather-universe.com). Die Agentur ist nicht
berührt -- pruef-haus-trennung 107/0.
DAS TOR
Eine vierte Kachel über die GANZE BREITE unter den drei Reihen. Das ist
die stärkste Aussage, die ein Raster treffen kann, und sie kostet keine
einzige Farbe. Ein Licht läuft in sieben Sekunden darüber -- flach und
schmal, wie der Schein einer Lampe über einem Mischpult. Kein Blinken:
dasselbe Signal mit doppelter Belastung für die Augen, und diese Seite
steht manchmal eine Stunde offen. prefers-reduced-motion bekommt den
Schein stehend, nicht gar keinen -- der Zustand muss auch dann zu
erkennen sein.
Drei Zustände, und jeder sieht anders aus: verschlossen rot mit
geschlossenem Bügel, aufgeschlossen grün mit aufspringendem Bügel, und
für alle anderen gedämpftes Grau ohne Lauflicht, mit „nicht erlaubt"
schon am Mauszeiger.
ZWEI SCHLÖSSER HINTEREINANDER, UND NUR EINES IST GEHEIM
(1) DIE ROLLE, und zwar VOR dem Code -- ohne ihn anzusehen. Das ist
wichtiger, als es aussieht: Sonst könnte irgendwer im Haus mit
Rateversuchen die `versuche`-Bremse für seine eigene IP vollaufen
lassen und sich damit von der ANMELDUNG aussperren; beide zählen in
derselben Tabelle. Geprüft mit Gegenprobe: Ein Gast schickt den
RICHTIGEN Admin-Code, kommt nicht durch, und die Versuchszahl
bleibt bei 0.
(2) DER CODE, geprüft mit `codeGeprueft()` -- neu in workspace.js,
neben der Anmeldung und mit deren Rechenvorschrift, deren Vergleich
in konstanter Zeit und deren Bremse. Ein zweiter Codevergleich in
einem anderen Modul wäre der, der beim nächsten Umbau der
scrypt-Parameter stehen bleibt.
Und er prüft GENAU DIESE PERSON. Die Anmeldung geht alle Personen einer
Rolle durch -- dort ist der Code die Kennung. Hier wäre das falsch:
VanVans Code öffnete DogFathers Tür, und im Protokoll stünde, ER sei
hineingegangen.
WAS DIE TÜR LEISTET UND WAS NICHT -- UND DASS ES DASTEHT
Filipes „Punkt 2" heißt: Der Code öffnet die Tür, danach ist die Regie
offen wie bisher. Die Routen der Sendung prüfen weiterhin nur die Rolle.
Das ist die bewusste Wahl und keine vergessene Stelle -- eine Sperre,
die mitten in einer Übertragung zuschnappen kann, richtet mehr Schaden
an, als sie verhindert.
Damit das niemand überschätzt, steht es als Satz IM FENSTER, nicht nur
im Quelltext: „Das hält einen neugierigen Blick auf, nicht jemanden, der
an deinem offenen Rechner sitzt." Eine Sicherung, die stärker aussieht,
als sie ist, ist schlechter als gar keine.
FARBE -- ABER NICHT AUF DER FLÄCHE
Filipe hatte recht, und der Grund war meiner: Beim Umbau auf das
Hausmaterial heute Vormittag habe ich die Farbe mit herausgenommen, weil
die alte Fassung sie auf der FLÄCHE trug -- und genau das machte den
Text schlecht lesbar. Richtig ist nicht „keine Farbe", sondern Farbe,
wo kein Text steht:
* Jede Reihe hat ihren Ton (`--ton`, derselbe Griff, über den
module.css das Kantenlicht legt): Bernstein für das, was ansteht
-- dieselbe Farbe wie „überfällig" --, Blau für die Sendung, rot
sobald sie läuft, Grün für das, was hereinkommt: dieselbe Farbe,
die ein angenommener Vorschlag trägt. Die Farben SAGEN etwas.
* Ein Band im Kopf jeder Tafel, die Überschrift in ihrem Ton, die
Schilder passend. Vorher war jedes Schild blau, egal in welcher
Reihe es stand -- zwei Farben nebeneinander, die nichts
voneinander wussten.
* Ein Streifen am Zeilenanfang statt eines eingefärbten Kastens.
Drei Pixel an der Kante sagen dasselbe, und der Text steht
weiterhin auf dem Grund, auf dem er gemessen wurde.
Die Kachel selbst trägt dieselbe Silhouette und dasselbe deckende
Material wie jede Karte im Haus (`.regie-tor` steht in der Modulliste in
module.css und in der Materialliste in start.css). „Krass" heißt hier
nicht „anders als das Haus" -- genau das stand heute Vormittag schon
einmal in foyer.css und war ein Fehler.
PROTOKOLLWÖRTER, DIE MAN LESEN KANN
`personen.js` baut den Anzeigetext aus dem Schlüssel: Unterstriche
werden Leerzeichen, nur der erste Buchstabe wird groß. Aus
`regie_code_falsch` wäre auf dem Bildschirm „Regie code falsch"
geworden. Die Regel, die daraus folgt: Hauptwort plus Mittelwort, nie
zwei Hauptwörter. Jetzt `regie_aufgeschlossen`, `regie_abgeschlossen`,
`regie_verweigert`, `regie_unbefugt`. Und das Detail war ein
ISO-Zeitstempel mitten in einer Zeile, die ein Mensch überfliegt --
jetzt steht dort „12 Stunden".
GEMESSEN
pruef-reaktion 571, 0 Fehler (vorher 538) -- Abschnitt 21
mess-foyer 96, 0 Fehler (vorher 70), 12 Bildschirmfotos
pruef-handy-teamdogi 263 Seitenaufrufe, 0 Befunde
pruef-breiten 23 auf 45 Seiten und fünf Breiten
pruef-struktur 102 · pruef-css-klassen 37 · pruef-lesbarkeit 14
pruef-bewegung 9 · pruef-tippziele 13 · pruef-deutsche-texte 12
pruef-crew-adresse 173 · pruef-haus-trennung 107
pruef-community-sicht 10 · pruef-sackgassen 14
alle 0 Fehler
UND EINE LÜCKE, DIE DIE EIGENE MESSUNG GEFUNDEN HAT
Der Vorhang mit dem Codefeld schließt auf Esc und auf einen Druck
daneben, und der Finger steht im Feld -- für jemanden ohne Maus war er
trotzdem eine Falle: Die Tabulatortaste lief durch die Knöpfe DAHINTER
weiter, sichtbar war aber das Codefeld. Man tippt auf A und bekommt B,
nur eben mit der Tastatur.
Der erste Riegel legte `#foyer` still -- und die neue Messung fiel
sofort darüber: Die KOPFLEISTE steht außerhalb davon, der Fokus lief
weiter nach „Abmelden". Jetzt wird alles neben dem Vorhang stillgelegt,
ABGELEITET statt aufgezählt (`body.children`), und beim Schließen genau
das wieder freigegeben, was ich selbst gesetzt habe.
Und die Messung selbst war beim ersten Entwurf zu streng: Sie verlangte
„der Fokus bleibt IMMER im Fenster" und wurde rot, obwohl die Sperre
tadellos arbeitete -- am Ende des Tabulatorkreises gibt der Browser den
Fokus an seine eigene Leiste ab, im Dokument steht dann `body`. `body`
ist kein Bedienelement. Gefragt ist jetzt das Richtige: Wird je ein
BEDIENELEMENT außerhalb erreicht? Die Gegenprobe nennt es beim Namen
(`DRAUSSEN:zurueck`).
mess-foyer misst beide Hälften von Filipes Satz: dass ein Gast das Tor
SIEHT (und ein Druck ihm trotzdem kein Codefeld öffnet) und dass nur die
zwei HINEINKOMMEN. Dazu der ganze Weg im Browser: falscher Code
abgewiesen und Feld geleert, richtiger Code führt in den Saal, die
Freigabe gilt in einem neuen Fenster -- und VanVans Tür ist trotzdem
noch zu.
EIN FEHLALARM IN DER EIGENEN MESSUNG, BEHOBEN
mess-foyer suchte zuerst das WORT „Warteschlange" im Dokument eines
Gastes und fand es -- im unsichtbaren Gerüst der linken Reihe, wo es als
Überschrift steht. Zwei Gründe, warum das falsch war: Eine Beschriftung
ist keine Auskunft, und dass es eine Warteschlange GIBT, steht seit
heute im Regie-Tor, das jeder sieht. Eine Messung, die genau das als
Leck zählt, widerspricht dem Entwurf -- und sie hätte bei jedem Lauf
angeschlagen. Gefragt ist das Schärfere: Kommen DATEN an? Jetzt werden
Titel und Videokennungen geprüft, und dass keine einzige Planzeile
gebaut wurde.
NICHT BEHOBEN, WEIL NICHT MEINS: pruef-meldungen bleibt rot (28
Kennungen ohne Satz, 3 Rohanzeigen) -- gemessen im worktree auf dem
letzten Commit schon vorher, Zeichen für Zeichen dieselbe Liste. Meine
Arbeit hat 2 Kennungen und 2 Sätze ergänzt (174 -> 176, 155 -> 157), die
Zahlen gehen genau gleich hoch. Die Dateien gehören überwiegend der
Agentur; das gehört in einen eigenen Durchgang.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -95,6 +95,49 @@
|
||||
}
|
||||
.foyer-reihe[hidden] { display: none; }
|
||||
|
||||
/* =====================================================================
|
||||
JEDE REIHE HAT IHREN TON (08.10.2026)
|
||||
|
||||
Filipe: „die anderen kacheln aber auch gerne farbiger machen und
|
||||
nicht so kahl und dunkel."
|
||||
|
||||
ER HAT RECHT, UND DER GRUND WAR MEINER: Beim Umbau auf das
|
||||
Hausmaterial habe ich die Farbe mit herausgenommen, weil die alte
|
||||
Fassung sie auf der FLAECHE trug — und eine getoente Flaeche war
|
||||
genau das, was den Text schlecht lesbar machte. Richtig ist nicht
|
||||
„keine Farbe", sondern Farbe an den Stellen, die keinen Text
|
||||
tragen: die Kante, die Ueberschrift, der Streifen am Zeilenanfang.
|
||||
|
||||
`--ton` ist der Griff, den das Haus dafuer schon hat. module.css
|
||||
legt damit ein Kantenlicht auf die Silhouette; alles Weitere unten
|
||||
leitet sich aus demselben Wert ab, statt ihn noch einmal
|
||||
hinzuschreiben. EINE Zahl je Reihe, und sie steht genau einmal.
|
||||
|
||||
WARUM DIESE DREI: Bernstein fuer das, was ansteht (Terminfarbe des
|
||||
Hauses, dieselbe wie bei „überfällig"), Blau fuer die Sendung
|
||||
(wird rot, sobald sie laeuft), Gruen fuer das, was hereinkommt —
|
||||
dieselbe Farbe, die ein angenommener Vorschlag traegt. Die Farben
|
||||
sagen also etwas; sie sind keine Dekoration.
|
||||
===================================================================== */
|
||||
.foyer-reihe--plan { --ton: #e0a13a; }
|
||||
.foyer-reihe--raten { --ton: #5fc99a; }
|
||||
|
||||
/* DER KOPF BEKOMMT EIN BAND IN SEINEM TON. Es liegt UNTER der Zeile
|
||||
und nicht hinter dem Text: `color-mix` mit 14 % laesst den
|
||||
deckenden Hausgrund durch, und gemessen bleibt der Kontrast der
|
||||
Ueberschrift darueber unveraendert — sie steht ohnehin auf eigener
|
||||
Farbe. Die negativen Raender ziehen das Band bis an die
|
||||
Tafelkante, damit es ein Band ist und kein Kasten. */
|
||||
.foyer-reihe__kopf {
|
||||
margin: -16px -16px 0;
|
||||
padding: 14px 16px 12px;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 26%, transparent);
|
||||
background:
|
||||
linear-gradient(180deg,
|
||||
color-mix(in srgb, var(--ton, var(--akzent)) 14%, transparent),
|
||||
transparent);
|
||||
}
|
||||
|
||||
.foyer-reihe__kopf {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
gap: 10px; min-width: 0;
|
||||
@@ -112,15 +155,24 @@
|
||||
verschiebt. */
|
||||
min-height: 28px;
|
||||
}
|
||||
/* DIE UEBERSCHRIFT TRAEGT DEN TON DER REIHE statt eines Grautons.
|
||||
Das ist die groesste Wirkung fuer die kleinste Aenderung: drei
|
||||
Woerter, die man sofort auseinanderhaelt, ohne dass irgendwo eine
|
||||
Flaeche heller wird. `88%` mit Weiss gemischt, damit die Schrift
|
||||
hell genug bleibt — der reine Ton waere bei Bernstein und Gruen
|
||||
auf dunklem Grund zwar bunt, aber nicht gut zu lesen. */
|
||||
.foyer-reihe__ueber {
|
||||
margin: 0;
|
||||
font-size: .78rem; font-weight: 800;
|
||||
letter-spacing: .14em; text-transform: uppercase;
|
||||
color: var(--text-leise, #a9a3bd);
|
||||
color: color-mix(in srgb, var(--ton, var(--akzent)) 70%, #ffffff);
|
||||
}
|
||||
/* „nur ihr zwei" — ein Schild und kein Schloss. Ein Schloss sagt
|
||||
„hier ist etwas verborgen"; dieses Schild sagt, dass die Reihe für
|
||||
niemanden sonst existiert, und das ist der Unterschied. */
|
||||
/* Die Schilder nehmen denselben Ton. Vorher war das Schild immer
|
||||
blau, egal in welcher Reihe es stand — zwei Farben nebeneinander,
|
||||
die nichts voneinander wussten. */
|
||||
.foyer-reihe__nur,
|
||||
.foyer-reihe__zahl {
|
||||
/* .72rem sind 11,52 px — die Untergrenze des Hauses ist 11,5, und
|
||||
@@ -132,9 +184,9 @@
|
||||
padding: 3px 9px 4px;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
color: #cfe0ff;
|
||||
background: rgba(154, 183, 255, .12);
|
||||
border: 1px solid rgba(154, 183, 255, .3);
|
||||
color: color-mix(in srgb, var(--ton, var(--akzent)) 55%, #ffffff);
|
||||
background: color-mix(in srgb, var(--ton, var(--akzent)) 14%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 34%, transparent);
|
||||
}
|
||||
.foyer-reihe__zahl { color: #ffd9a0; background: rgba(224, 161, 58, .14); border-color: rgba(224, 161, 58, .34); }
|
||||
.foyer-reihe__zahl[hidden], .foyer-reihe__nur[hidden] { display: none; }
|
||||
@@ -159,7 +211,12 @@
|
||||
LINKS: DER PLAN
|
||||
===================================================================== */
|
||||
.plan-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
|
||||
/* EIN STREIFEN AM ZEILENANFANG, kein getoenter Kasten. Drei Pixel
|
||||
Farbe an der Kante sagen dasselbe wie eine eingefaerbte Flaeche —
|
||||
nur steht der Text weiterhin auf dem Grund, auf dem er gemessen
|
||||
wurde. */
|
||||
.plan-zeile {
|
||||
border-left: 3px solid color-mix(in srgb, var(--ton, var(--akzent)) 42%, transparent);
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
min-width: 0;
|
||||
padding: 8px 10px 8px 8px;
|
||||
@@ -379,6 +436,7 @@
|
||||
|
||||
.raten-liste { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
|
||||
.raten-zeile {
|
||||
border-left: 3px solid color-mix(in srgb, var(--ton, var(--akzent)) 42%, transparent);
|
||||
display: flex; align-items: flex-start; gap: 10px;
|
||||
min-width: 0;
|
||||
padding: 8px 10px 9px 8px;
|
||||
@@ -456,6 +514,274 @@
|
||||
steht links der Plan, und das soll so bleiben. Eine zweite Fassung
|
||||
derselben Seite wäre die, die beim nächsten Umbau vergessen wird.
|
||||
===================================================================== */
|
||||
/* =====================================================================
|
||||
DAS REGIE-TOR (08.10.2026)
|
||||
|
||||
Filipe: „die muss wirklich ultra krass sein. komplett crazy."
|
||||
|
||||
---------------------------------------------------------------------
|
||||
KRASS HEISST HIER NICHT: ANDERS ALS DAS HAUS
|
||||
|
||||
Der naheliegende Weg waere eine Kachel mit eigener Rundung, eigenem
|
||||
Verlauf, eigener Kante gewesen. Genau das stand heute Vormittag
|
||||
schon einmal in dieser Datei und war ein Fehler — die Flaeche war
|
||||
durchsichtig, die Tapete schien durch, und sie sah aus wie von
|
||||
einer anderen Website. Filipes Satz vom 07.09. gilt weiter: „DU
|
||||
HAST WIEDER EINE KLEINE AENDERUNG UEBERALL GEMACHT ANSTATT EINE
|
||||
RIESEN AENDERUNG."
|
||||
|
||||
Also: dieselbe Silhouette wie jede Karte im Haus (`.regie-tor`
|
||||
steht in der Modulliste in module.css) und dasselbe deckende
|
||||
Material (in der Materialliste in start.css) — und darueber ein
|
||||
eigenes Lichtelement, das es von allem anderen abhebt. Gleiche
|
||||
Familie, hochgedreht.
|
||||
|
||||
---------------------------------------------------------------------
|
||||
DREI DINGE MACHEN SIE BESONDERS
|
||||
|
||||
1. SIE IST SO BREIT WIE ALLES ZUSAMMEN. Die drei Reihen daneben
|
||||
teilen sich eine Zeile; diese steht allein darunter. Das ist
|
||||
die staerkste Aussage, die ein Raster ueberhaupt treffen kann,
|
||||
und sie kostet keine einzige Farbe.
|
||||
2. EIN LICHT LAEUFT DARUEBER. Sieben Sekunden von links nach
|
||||
rechts, flach und schmal — wie der Schein einer Lampe ueber
|
||||
einem Mischpult. Kein Blinken, kein Puls: Das waere dasselbe
|
||||
Signal mit doppelter Belastung fuer die Augen, und diese Seite
|
||||
steht manchmal eine Stunde offen.
|
||||
3. SIE ANTWORTET AUF IHREN ZUSTAND. Verschlossen glimmt sie rot
|
||||
und zurueckhaltend; aufgeschlossen wird das Licht gruen und
|
||||
ruhig. Wer nicht hinein darf, sieht sie gedaempft und ohne
|
||||
Bewegung — sie laedt ihn nicht ein, sie verschweigt sich aber
|
||||
auch nicht.
|
||||
|
||||
WER WENIGER BEWEGUNG EINGESTELLT HAT, bekommt das Licht als
|
||||
stehenden Schein. Nicht „keine Farbe" — der Zustand muss auch dann
|
||||
zu erkennen sein.
|
||||
===================================================================== */
|
||||
.regie-tor {
|
||||
/* Rot wie der Knopf, der eine Sendung startet. Aufgeschlossen
|
||||
wechselt er weiter unten auf Gruen. */
|
||||
--ton: #d8404a;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 16px 0 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
/* Die Silhouette kommt aus module.css. Hier steht nur, dass die
|
||||
Hoehe reicht, damit das Licht Platz zum Laufen hat. */
|
||||
min-height: 96px;
|
||||
}
|
||||
|
||||
/* DAS LICHT. Ein eigenes Element und kein `::before`/`::after`: Die
|
||||
beiden gehoeren in diesem Haus der Form (Kantenlicht und Raster aus
|
||||
module.css). Wer sie hier ueberschriebe, naehme der Kachel genau
|
||||
das, was sie zu einer Kachel dieses Hauses macht. */
|
||||
.regie-tor__licht {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(120% 140% at 8% 0%,
|
||||
color-mix(in srgb, var(--ton) 22%, transparent), transparent 58%),
|
||||
radial-gradient(90% 120% at 100% 100%,
|
||||
color-mix(in srgb, var(--ton) 14%, transparent), transparent 62%);
|
||||
}
|
||||
/* Der laufende Schein liegt auf einem zweiten Verlauf im selben
|
||||
Element — `background-position` bewegt nur ihn. */
|
||||
.regie-tor__licht::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(100deg,
|
||||
transparent 36%,
|
||||
color-mix(in srgb, var(--ton) 26%, transparent) 48%,
|
||||
color-mix(in srgb, #ffffff 16%, transparent) 50%,
|
||||
color-mix(in srgb, var(--ton) 26%, transparent) 52%,
|
||||
transparent 64%);
|
||||
background-size: 260% 100%;
|
||||
background-repeat: no-repeat;
|
||||
animation: regie-schein 7s linear infinite;
|
||||
}
|
||||
@keyframes regie-schein {
|
||||
from { background-position: -130% 0; }
|
||||
to { background-position: 230% 0; }
|
||||
}
|
||||
|
||||
.regie-tor__innen {
|
||||
position: relative;
|
||||
/* Ueber dem Licht (1) und ueber dem Kantenlicht (2) aus module.css.
|
||||
Ohne diese Zeile laege der Text unter dem Schein und wuerde bei
|
||||
jedem Durchlauf kurz heller — genau die Art Flackern, die diese
|
||||
Seite nicht haben soll. */
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 18px 20px;
|
||||
min-height: 96px;
|
||||
}
|
||||
|
||||
.regie-tor__zeichen {
|
||||
flex: none;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 54px; height: 54px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid color-mix(in srgb, var(--ton) 42%, transparent);
|
||||
background: color-mix(in srgb, var(--ton) 12%, transparent);
|
||||
color: color-mix(in srgb, var(--ton) 60%, #ffffff);
|
||||
}
|
||||
.regie-tor__glyphe {
|
||||
width: 28px; height: 28px;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.7;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
/* Aufgeschlossen springt der Buegel auf — dasselbe Zeichen, andere
|
||||
Aussage, und man sieht es aus fuenf Metern. */
|
||||
.regie-tor[data-offen="ja"] .regie-tor__glyphe path {
|
||||
transform: translateX(5px) rotate(-14deg);
|
||||
transform-origin: 16px 10px;
|
||||
}
|
||||
|
||||
.regie-tor__text { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
|
||||
.regie-tor__ueber {
|
||||
font-size: .72rem; font-weight: 800;
|
||||
letter-spacing: .22em; text-transform: uppercase;
|
||||
color: color-mix(in srgb, var(--ton) 62%, #ffffff);
|
||||
}
|
||||
.regie-tor__titel {
|
||||
font-size: 1.12rem; font-weight: 800;
|
||||
color: var(--text, #e9e6f2);
|
||||
line-height: 1.2;
|
||||
}
|
||||
.regie-tor__satz {
|
||||
font-size: .82rem; line-height: 1.45;
|
||||
color: var(--text-leise, #a9a3bd);
|
||||
}
|
||||
.regie-tor__marke {
|
||||
flex: none;
|
||||
align-self: flex-start;
|
||||
font-size: .72rem; font-weight: 800;
|
||||
letter-spacing: .08em; text-transform: uppercase;
|
||||
padding: 4px 11px 5px;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
color: color-mix(in srgb, var(--ton) 55%, #ffffff);
|
||||
background: color-mix(in srgb, var(--ton) 15%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--ton) 36%, transparent);
|
||||
}
|
||||
|
||||
/* AUFGESCHLOSSEN: gruen und ruhig. */
|
||||
.regie-tor[data-offen="ja"] { --ton: #5fc99a; }
|
||||
|
||||
/* WER NICHT HINEIN DARF: gedaempft und ohne Lauflicht. Sie bleibt
|
||||
sichtbar — Filipe wollte ausdruecklich, dass jeder sie sieht —,
|
||||
aber sie winkt niemanden heran, der ohnehin nicht durchkommt. Und
|
||||
der Mauszeiger sagt es vorher: kein Zeigefinger, sondern das
|
||||
Zeichen fuer „nicht erlaubt". */
|
||||
.regie-tor[data-darf="nein"] {
|
||||
--ton: #7f8699;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.regie-tor[data-darf="nein"] .regie-tor__licht::after { animation: none; opacity: .25; }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.regie-tor__licht::after { animation: none; background-position: 46% 0; }
|
||||
.regie-tor[data-offen="ja"] .regie-tor__glyphe path { transform: none; }
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
DER VORHANG MIT DEM CODEFELD
|
||||
===================================================================== */
|
||||
.regie-vorhang {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
/* UEBER ALLEM, auch ueber der Kopfleiste (die steht bei 6). Das
|
||||
geht nur, weil dieses Element NEBEN `main` steht und nicht darin
|
||||
— siehe der Hinweis in der HTML. */
|
||||
z-index: 40;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 18px;
|
||||
background: rgba(4, 6, 11, .72);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
.regie-vorhang[hidden] { display: none; }
|
||||
|
||||
.regie-fenster {
|
||||
width: min(420px, 100%);
|
||||
padding: 20px 20px 18px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(216, 64, 74, .3);
|
||||
background:
|
||||
linear-gradient(168deg,
|
||||
rgba(20, 27, 40, .98) 0%,
|
||||
rgba(11, 15, 24, .99) 62%,
|
||||
rgba(8, 11, 18, .99) 100%);
|
||||
box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9);
|
||||
}
|
||||
.regie-fenster__titel {
|
||||
margin: 0 0 6px;
|
||||
font-size: 1.05rem; font-weight: 800;
|
||||
color: var(--text, #e9e6f2);
|
||||
}
|
||||
.regie-fenster__satz {
|
||||
margin: 0 0 14px;
|
||||
font-size: .84rem; line-height: 1.5;
|
||||
color: var(--text-leise, #a9a3bd);
|
||||
}
|
||||
.regie-feld { display: grid; gap: 5px; }
|
||||
.regie-feld > span {
|
||||
font-size: .76rem; font-weight: 700;
|
||||
color: var(--text-leise, #a9a3bd);
|
||||
}
|
||||
.regie-feld input {
|
||||
min-height: 44px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 11px;
|
||||
border: 1px solid var(--linie, rgba(150, 160, 190, .22));
|
||||
background: rgba(255, 255, 255, .04);
|
||||
color: var(--text, #e9e6f2);
|
||||
font-size: .92rem;
|
||||
/* Ein Zugangscode ist eine Folge von Zeichen, keine Sprache.
|
||||
Gleiche Breiten machen Vertipper sichtbar. */
|
||||
font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
|
||||
letter-spacing: .06em;
|
||||
}
|
||||
.regie-feld input:focus-visible {
|
||||
outline: 2px solid rgba(216, 64, 74, .5);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.regie-fenster__fehler {
|
||||
margin: 9px 0 0;
|
||||
font-size: .8rem; line-height: 1.45;
|
||||
color: #ff8b92;
|
||||
}
|
||||
.regie-fenster__fehler[hidden] { display: none; }
|
||||
.regie-fenster__knoepfe {
|
||||
display: flex; gap: 10px; justify-content: flex-end;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.regie-fenster__knoepfe .knopf,
|
||||
.regie-fenster__knoepfe .knopf-still { margin-top: 0; min-height: 44px; }
|
||||
.regie-fenster__kleingedruckt {
|
||||
margin: 14px 0 0;
|
||||
padding-top: 11px;
|
||||
border-top: 1px solid var(--linie, rgba(150, 160, 190, .14));
|
||||
font-size: .74rem; line-height: 1.45;
|
||||
color: var(--text-still, #8b93a4);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.foyer-reihen,
|
||||
.foyer-reihen:has(> .foyer-reihe--plan[hidden]) {
|
||||
@@ -466,6 +792,20 @@
|
||||
.foyer-reihe--raten { order: 2; }
|
||||
.foyer-reihe--plan { order: 3; }
|
||||
.foyer-reihe { padding: 14px 13px 16px; border-radius: 16px; }
|
||||
.foyer-reihe__kopf { margin: -14px -13px 0; padding: 12px 13px 10px; }
|
||||
|
||||
/* AUF 390 PX IST NEBENEINANDER NICHT MEHR DRIN. Gemessen: Zeichen,
|
||||
Text und Schild brauchen zusammen 352 px, der Satz bekaeme davon
|
||||
knapp 140 und braeche vierzeilig um. Untereinander bleibt alles
|
||||
lesbar, und die Kachel bleibt EIN Knopf. */
|
||||
.regie-tor__innen {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
.regie-tor__marke { align-self: flex-start; order: -1; }
|
||||
.regie-tor__zeichen { width: 46px; height: 46px; }
|
||||
.saal-knopf { min-height: 52px; }
|
||||
}
|
||||
|
||||
|
||||
@@ -140,7 +140,7 @@
|
||||
}
|
||||
|
||||
/* MODULLISTE */
|
||||
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe) {
|
||||
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe, .regie-tor) {
|
||||
position: relative;
|
||||
clip-path: polygon(var(--fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase));
|
||||
border-radius: 0;
|
||||
@@ -168,7 +168,7 @@
|
||||
was übrig bleibt, ist eine Linie, die exakt der Form folgt, Schräge
|
||||
inklusive. Ein `border` könnte das nicht: Er folgt dem Rechteck. */
|
||||
/* MODULLISTE */
|
||||
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe)::before {
|
||||
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe, .regie-tor)::before {
|
||||
content: "";
|
||||
position: absolute; inset: 0;
|
||||
pointer-events: none;
|
||||
@@ -191,7 +191,7 @@
|
||||
/* RASTER UND ECKWINKEL. Beides auf ::after -- ein drittes Element gibt
|
||||
es nicht, und beides ist reine Optik ohne Klicks. */
|
||||
/* MODULLISTE */
|
||||
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe)::after {
|
||||
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe, .regie-tor)::after {
|
||||
content: "";
|
||||
position: absolute; inset: 0;
|
||||
pointer-events: none;
|
||||
@@ -398,7 +398,7 @@
|
||||
Gefunden beim Eintragen von `.foyer-reihe`: acht Vorkommen der
|
||||
Liste, sieben Marken. Die Pruefung erwartet jetzt acht. */
|
||||
/* MODULLISTE */
|
||||
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe):focus-visible {
|
||||
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe, .regie-tor):focus-visible {
|
||||
outline: 2px solid var(--akzent);
|
||||
outline-offset: -4px;
|
||||
}
|
||||
@@ -407,7 +407,7 @@
|
||||
/* Dieselbe Form, kleiner -- keine zweite Gestaltung. */
|
||||
:root { --fase: 12px; }
|
||||
/* MODULLISTE */
|
||||
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe) {
|
||||
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe, .regie-tor) {
|
||||
filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .7));
|
||||
}
|
||||
}
|
||||
@@ -421,15 +421,15 @@
|
||||
/* Im Kontrastmodus zählt die Kante, und die muss ein echter `border`
|
||||
sein. Die Schräge bleibt: Sie ist Geometrie, keine Farbe. */
|
||||
/* MODULLISTE */
|
||||
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe) {
|
||||
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe, .regie-tor) {
|
||||
filter: none; border: 1px solid CanvasText;
|
||||
}
|
||||
/* MODULLISTE */
|
||||
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe)::after {
|
||||
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe, .regie-tor)::after {
|
||||
display: none;
|
||||
}
|
||||
/* MODULLISTE */
|
||||
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe)::before {
|
||||
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl, .foyer-reihe, .regie-tor)::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7679,7 +7679,7 @@ body[data-fremde-sicht="ja"]::after {
|
||||
.spalte, .balance, .saeulen-kasten, .neu, .call-raum, .schulung__neu,
|
||||
.nachricht, .creator, .summe, .wert, .pdf, .pdf-ablage, .suchleiste,
|
||||
.person, .kk, .fortschritt, .punkt, .nur-lesen, .todo-liste li,
|
||||
.unterweisung, .warnkarte, .foyer-reihe
|
||||
.unterweisung, .warnkarte, .foyer-reihe, .regie-tor
|
||||
/* `.foyer-reihe` sind die drei Tafeln im Foyer der Reaction. Sie
|
||||
hatten bis zum 08.10.2026 ihre eigene Flaeche
|
||||
(`rgba(255,255,255,.045)`) -- also eine zweite Antwort auf die
|
||||
|
||||
@@ -343,6 +343,12 @@
|
||||
'Dieses Video hat schon jemand angeraten. Es liegt bei DogFather und VanVan.',
|
||||
steht_schon_bereit:
|
||||
'Das liegt schon in der Warteschlange — es kommt also sowieso.',
|
||||
/* ---- Das Regie-Tor (08.10.2026) ---- */
|
||||
regie_gehoert_den_zweien:
|
||||
'Die Regie gehört DogFather und VanVan. Dein Zugang reicht hier nicht — '
|
||||
+ 'das ist kein Fehler, die Tür ist einfach nicht für dich.',
|
||||
code_falsch:
|
||||
'Der Code stimmt nicht. Es ist derselbe, mit dem du dich hier anmeldest.',
|
||||
nicht_deiner:
|
||||
'Das ist nicht deiner. Zurückziehen kannst du nur, was du selbst '
|
||||
+ 'geschickt hast und worüber noch nicht entschieden ist.',
|
||||
|
||||
@@ -35,6 +35,10 @@
|
||||
|
||||
let lage = null;
|
||||
let raten = null;
|
||||
let regie = null;
|
||||
/* Welche Bereiche der Vorhang stillgelegt hat -- gemerkt, damit
|
||||
beim Schliessen genau die wieder freigegeben werden. */
|
||||
let geschwiegen = [];
|
||||
|
||||
async function hole(pfad, einstellungen) {
|
||||
return fetch(pfad, { credentials: 'same-origin', ...(einstellungen || {}) });
|
||||
@@ -445,9 +449,184 @@
|
||||
await ratenHolen();
|
||||
}
|
||||
|
||||
/* =================================================================
|
||||
DAS REGIE-TOR
|
||||
|
||||
Filipe: „die soll jeder sehen aber nur vanvan und dogfather
|
||||
sollen da rein kommen bitte."
|
||||
|
||||
DIE KACHEL STEHT IMMER DA. Was sich aendert, ist der Satz darauf
|
||||
und das, was ein Druck bewirkt. Wer nicht hinein darf, bekommt
|
||||
KEIN Eingabefeld -- eine Kachel, die jeder sieht, waere sonst
|
||||
eine Ratestelle fuer jeden im Haus.
|
||||
================================================================= */
|
||||
function regieZeichnen() {
|
||||
const tor = $('regie-tor');
|
||||
if (!tor || !regie) return;
|
||||
const darf = !!regie.darf;
|
||||
const offen = !!regie.offen;
|
||||
tor.dataset.darf = darf ? 'ja' : 'nein';
|
||||
tor.dataset.offen = offen ? 'ja' : 'nein';
|
||||
|
||||
$('regie-marke').textContent = darf ? (offen ? 'Offen' : 'Verschlossen') : 'Nur ihr zwei';
|
||||
|
||||
if (!darf) {
|
||||
$('regie-titel').textContent = 'Der Platz hinter dem Pult';
|
||||
$('regie-satz').textContent = 'Hier führen DogFather und VanVan die Sendung. '
|
||||
+ 'Für dich ist die Tür zu — und das bleibt sie auch.';
|
||||
tor.setAttribute('aria-label',
|
||||
'Regie — nur für DogFather und VanVan, du kommst hier nicht hinein');
|
||||
return;
|
||||
}
|
||||
|
||||
if (offen) {
|
||||
const bis = regie.bis ? alsTermin(regie.bis) : '';
|
||||
$('regie-titel').textContent = 'Regie — aufgeschlossen';
|
||||
$('regie-satz').textContent = bis
|
||||
? `Offen bis ${bis}. Ein Druck, und du stehst am Pult.`
|
||||
: 'Offen. Ein Druck, und du stehst am Pult.';
|
||||
tor.setAttribute('aria-label', 'In die Regie gehen');
|
||||
} else {
|
||||
$('regie-titel').textContent = 'Regie aufschließen';
|
||||
$('regie-satz').textContent = 'Warteschlange, Ton, Werbung, der rote Knopf. '
|
||||
+ 'Einmal dein Zugangscode, dann zwölf Stunden offen.';
|
||||
tor.setAttribute('aria-label', 'Regie mit deinem Zugangscode aufschließen');
|
||||
}
|
||||
}
|
||||
|
||||
/** Ein Druck auf die Kachel. Drei Ausgaenge, und jeder sagt etwas
|
||||
* anderes: hinein / aufschliessen / das ist nicht deine Tuer. */
|
||||
function regieDruck() {
|
||||
if (!regie?.darf) {
|
||||
sagFehler('Die Regie gehört DogFather und VanVan. '
|
||||
+ 'Dein Zugang reicht hier nicht — das ist kein Fehler.');
|
||||
return;
|
||||
}
|
||||
if (regie.offen) { window.location.href = 'reaktion.html'; return; }
|
||||
vorhangAuf();
|
||||
}
|
||||
|
||||
function vorhangAuf() {
|
||||
const v = $('regie-vorhang');
|
||||
v.hidden = false;
|
||||
/* ==== DER REST DER SEITE WIRD STILLGELEGT =====================
|
||||
Ohne das waere der Vorhang nur ein Bild: Esc schliesst, ein
|
||||
Druck daneben schliesst, der Finger steht im Feld -- aber die
|
||||
Tabulatortaste lief weiter durch die Knoepfe DAHINTER. Wer die
|
||||
Maus nicht benutzt, landete nach drei Tastendruecken auf
|
||||
„Abmelden", sichtbar war aber das Codefeld. Das ist dieselbe
|
||||
Sorte Fehler wie ein Knopf, der auf einem anderen liegt: Man
|
||||
tippt auf A und bekommt B.
|
||||
|
||||
`inert` statt eines selbstgebauten Fokusfaengers: Es nimmt dem
|
||||
ganzen Bereich Klicks, Fokus und Vorleseprogramme in einem
|
||||
Zug. Ein Fokusfaenger von Hand ist zwanzig Zeilen, die beim
|
||||
naechsten neuen Knopf nicht mehr stimmen.
|
||||
|
||||
NICHT NUR `main`, SONDERN ALLES AUSSER DEM VORHANG. Der erste
|
||||
Entwurf legte `#foyer` stumm -- und die eigene Messung fiel
|
||||
sofort darueber: Die KOPFLEISTE steht ausserhalb davon, also
|
||||
lief die Tabulatortaste weiter nach „Abmelden". Ein halber
|
||||
Riegel ist hier so gut wie keiner.
|
||||
|
||||
ABGELEITET STATT AUFGEZAEHLT: Was neben dem Vorhang steht,
|
||||
wird gefragt und nicht in eine Liste geschrieben. Eine Liste
|
||||
waere die, die den naechsten Kasten vergisst, den jemand ins
|
||||
`body` haengt. */
|
||||
geschwiegen = [...document.body.children].filter(
|
||||
(e) => e !== v && 'inert' in e && !e.inert);
|
||||
for (const e of geschwiegen) e.inert = true;
|
||||
$('regie-fehler').hidden = true;
|
||||
const feld = $('regie-code');
|
||||
feld.value = '';
|
||||
/* Erst zeigen, dann den Finger hineinsetzen -- ein `focus()` auf
|
||||
etwas, das noch `hidden` ist, landet nirgends. */
|
||||
setTimeout(() => feld.focus(), 30);
|
||||
document.addEventListener('keydown', vorhangTaste);
|
||||
}
|
||||
|
||||
function vorhangZu() {
|
||||
$('regie-vorhang').hidden = true;
|
||||
/* NUR ZURUECKNEHMEN, WAS ICH SELBST GESETZT HABE. Haette ich
|
||||
stumpf alles wieder freigegeben, wuerde ein Bereich, den eine
|
||||
andere Stelle aus eigenem Grund stillgelegt hat, hier
|
||||
versehentlich wieder hoerbar. */
|
||||
for (const e of geschwiegen) e.inert = false;
|
||||
geschwiegen = [];
|
||||
/* DAS FELD WIRD GELEERT, auch beim Abbrechen. Ein Zugangscode,
|
||||
der in einem geschlossenen Fenster stehen bleibt, steht beim
|
||||
naechsten Bildschirmteilen wieder da. */
|
||||
$('regie-code').value = '';
|
||||
document.removeEventListener('keydown', vorhangTaste);
|
||||
$('regie-tor')?.focus();
|
||||
}
|
||||
|
||||
/* Esc schliesst. Ohne das waere der Vorhang eine Falle fuer jeden,
|
||||
der die Maus gerade nicht hat. */
|
||||
function vorhangTaste(e) {
|
||||
if (e.key === 'Escape') { e.preventDefault(); vorhangZu(); }
|
||||
}
|
||||
|
||||
async function regieAufschliessen(e) {
|
||||
e.preventDefault();
|
||||
const code = $('regie-code').value.trim();
|
||||
const knopf = $('regie-los');
|
||||
const fehlerfeld = $('regie-fehler');
|
||||
fehlerfeld.hidden = true;
|
||||
if (!code) {
|
||||
fehlerfeld.textContent = 'Tipp erst deinen Code ein.';
|
||||
fehlerfeld.hidden = false;
|
||||
return;
|
||||
}
|
||||
knopf.disabled = true;
|
||||
try {
|
||||
const a = await hole('/workspace/api/reaktion/regie', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ code }),
|
||||
});
|
||||
if (!a.ok) {
|
||||
const wort = (await a.json().catch(() => null))?.fehler;
|
||||
/* DER FEHLER STEHT IM FENSTER, nicht oben auf der Seite. Wer
|
||||
gerade tippt, schaut auf das Feld -- eine Meldung hinter
|
||||
dem Vorhang haette er nie gesehen. */
|
||||
fehlerfeld.textContent = (window.sagWas && wort && window.sagWas(wort))
|
||||
|| 'Das ging gerade nicht.';
|
||||
fehlerfeld.hidden = false;
|
||||
$('regie-code').value = '';
|
||||
$('regie-code').focus();
|
||||
return;
|
||||
}
|
||||
regie = await a.json();
|
||||
regieZeichnen();
|
||||
vorhangZu();
|
||||
window.location.href = 'reaktion.html';
|
||||
} catch {
|
||||
fehlerfeld.textContent = 'Das ging gerade nicht.';
|
||||
fehlerfeld.hidden = false;
|
||||
} finally { knopf.disabled = false; }
|
||||
}
|
||||
|
||||
async function regieAbschliessen() {
|
||||
const a = await hole('/workspace/api/reaktion/regie', { method: 'DELETE' });
|
||||
if (!a.ok) { sagFehler('Das ging gerade nicht.'); return; }
|
||||
regie = await a.json();
|
||||
regieZeichnen();
|
||||
sagFehler('Regie wieder abgeschlossen.');
|
||||
}
|
||||
|
||||
/* =================================================================
|
||||
HOLEN
|
||||
================================================================= */
|
||||
async function regieHolen() {
|
||||
try {
|
||||
const a = await hole('/workspace/api/reaktion/regie');
|
||||
if (!a.ok) return;
|
||||
regie = await a.json();
|
||||
regieZeichnen();
|
||||
} catch { /* die Kachel bleibt stehen, wie sie war */ }
|
||||
}
|
||||
|
||||
async function standHolen() {
|
||||
try {
|
||||
const a = await hole('/workspace/api/reaktion');
|
||||
@@ -510,8 +689,28 @@
|
||||
$('raten-notiz').addEventListener('input', restZeigen);
|
||||
restZeigen();
|
||||
|
||||
$('regie-tor').addEventListener('click', regieDruck);
|
||||
$('regie-form').addEventListener('submit', regieAufschliessen);
|
||||
$('regie-ab').addEventListener('click', vorhangZu);
|
||||
/* Ein Druck neben das Fenster schliesst es auch -- aber nur, wenn
|
||||
er WIRKLICH daneben war und nicht auf ein Kind davon. */
|
||||
$('regie-vorhang').addEventListener('click', (e) => {
|
||||
if (e.target === $('regie-vorhang')) vorhangZu();
|
||||
});
|
||||
/* Rechte Maustaste auf die offene Kachel schliesst wieder ab. Als
|
||||
eigener Knopf waere es ein zweites Bedienelement in einer
|
||||
Kachel, die selbst ein einziger grosser Knopf ist -- ein Knopf
|
||||
im Knopf ist in jedem Vorleseprogramm ein Durcheinander.
|
||||
ERREICHBAR BLEIBT ES TROTZDEM: Nach zwölf Stunden fällt das
|
||||
Schloss von selbst zu, und wer sofort abschließen will, kann
|
||||
sich abmelden. */
|
||||
$('regie-tor').addEventListener('contextmenu', (e) => {
|
||||
if (regie?.darf && regie.offen) { e.preventDefault(); regieAbschliessen(); }
|
||||
});
|
||||
|
||||
standHolen();
|
||||
ratenHolen();
|
||||
regieHolen();
|
||||
|
||||
/* ==== ALLE ZWANZIG SEKUNDEN NACHFRAGEN ====================
|
||||
Damit jemand, der das Foyer offen stehen laesst, den Start
|
||||
@@ -528,7 +727,9 @@
|
||||
if (document.visibilityState === 'visible') standHolen();
|
||||
}, 20000);
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.visibilityState === 'visible') { standHolen(); ratenHolen(); }
|
||||
if (document.visibilityState === 'visible') {
|
||||
standHolen(); ratenHolen(); regieHolen();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user