DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Die Chatkiste steht immer, Beenden raeumt auf -- und eine verspaetete Antwort ueberschreibt nichts Neueres mehr

Browse Source 
Filipe, 30.09.2026: „wenn eine sendung beendet wurde soll alles
automatisch verschwinden. also von daten die da stehen von dem video."
Und: „mach dass ich die chat kiste immer sehe bitte und nicht erst
wenn das video läuft."

=====================================================================
1. BEENDET HEISST LEER
=====================================================================
Beim Beenden verschwinden Titel, YouTube-Adresse, Videotitel,
Vorschaubild, Beginn und das zweite Video samt seiner Stelle. Vorher
blieb alles stehen; beim naechsten Aufmachen stand dort der Titel der
letzten Sendung und ein Beginn, der in der Vergangenheit liegt.

ERST DER VERLAUF, DANN DAS LEEREN -- weg vom Schreibtisch heisst
nicht weg aus der Welt. Geprueft: Nach dem Beenden steht die Sendung
weiter in `reaktion_verlauf`, samt Video.

EINE FELDLISTE, NICHT ZWEI. Die Aufzaehlung stand in der
Zuruecksetzen-Route; jetzt brauchen sie zwei Wege. `SENDUNGS_FELDER`
und `PULT_EINSTELLUNGEN` stehen einmal oben. Zwei Abschriften waeren
die, die beim naechsten Spaltenzuwachs auseinanderlaufen -- genau so
sind am 11.09. drei Spalten mit Inhalt verlorengegangen.

Einstellungen (Bildaufteilung, Kameragroesse, Chatmodus) und die
Warteschlange bleiben -- die raeumt weiter nur „Alles zuruecksetzen"
ab. Wer nur vorbereitet und dann zumacht, behaelt seine Eingaben; das
ist eine Entscheidung und steht als Pruefung fest.

DAS FELD „BEGINN" WURDE NIE GELEERT, nur gefuellt:
`if (lage.beginnt_am && document.activeElement !== …)` -- zwei Fragen
in einer Bedingung, und die zweite beantwortete die erste
stillschweigend mit nein. Das betraf auch den vorhandenen
Zuruecksetzen-Knopf.

=====================================================================
2. DIE CHATKISTE STEHT IMMER
=====================================================================
Sie lag in `#teil-live` und ging mit ihm weg. Im Wartebereich stand
dabei woertlich „Der Chat ist schon offen" -- der Satz stimmte sogar,
der Server laesst dort schreiben (201, geprueft); zu sehen war der
Chat trotzdem nicht.

Die drei Haeute und die Schiene liegen jetzt in einem gemeinsamen
`.raum`: links wechseln die Haeute, rechts steht der Chat. Das Raster
wandert mit nach oben statt sich zu verdoppeln -- zwei
`grid-template-columns` fuer dieselbe Frage waren am 28.09. der
Grund, warum die Regieleiste null Pixel bekam.

Wer nicht schreiben darf, liest den Grund im Feld („Der Saal ist zu").

DER UMBAU HAT DREI DINGE VERSCHOBEN, und die Messung hat sie sofort
gefunden: Kino 0 px hoch, Spendenkarte bei x=1458 ausserhalb des
Bildes, „Kamera aus"-Schild kam nicht an. Eine Ursache: Zwei Regeln
(`grid-row: 2` und `grid-area: kino`) zielten auf die drei Haeute,
weil die frueher unmittelbar im Saal lagen. Gefunden hat das nicht
das Nachdenken, sondern eine Messung der ganzen Kette --
`teil-live 0x0 @1440,742` lag NEBEN dem Raum.

=====================================================================
3. „DER SAAL IST ZU" ERREICHTE NIEMANDEN, DER DARIN SASS
=====================================================================
`stand: "zu"` loescht `reaktion_dabei`, und `melden()` suchte seine
Empfaenger erst danach -- in genau dieser geleerten Liste. Die Seiten
der Zuschauer blieben auf „live" stehen.

`melden(art, daten, wer)` nimmt jetzt eine Empfaengerliste; die
Stand-Route bestimmt sie VOR jeder Aenderung.

UND EINE ZUGESPERRTE SEITE VERSTUMMTE FUER IMMER. War der Saal zu,
hielt `anschliessen()` jeden Takt an -- und Rundrufe bekam sie auch
keine, weil sie in keiner Liste mehr stand. Machte der Host wieder
auf, passierte bei allen mit offenem Reiter NICHTS. Nicht in dreissig
Sekunden: nie, bis jemand von Hand neu lud. Gemessen: Server sagt
„vorbereitung", die Seite zeigt „zu", auch nach 40 Sekunden.
Jetzt fragt eine geschlossene Seite alle 15 Sekunden nach -- der
ruhigste Zustand des Hauses, dort kostet das nichts.

=====================================================================
4. WER ZULETZT ANTWORTET, HAT NICHT RECHT
=====================================================================
Eine Abfrage ist Sekundenbruchteile unterwegs. Kommt in dieser Zeit
ein Rundruf an, ist SEIN Stand der neuere -- und trotzdem hat die
verspaetete Antwort ihn ueberschrieben.

Gemessen: Die Regie schaltet die Werbung auf Wechsel, der Rundruf
zeichnet ihn, und einen Augenblick spaeter steht wieder Laufband.
Eine feste Wartezeit in der Messung hatte das zugedeckt; es fiel
erst auf, als ich sie durch eine echte Bedingung ersetzte.

Drei Runden Raten lagen daneben. Gefunden hat es eine Mitschrift der
Aufrufkette:

    wechsel:2  @ EventSource
    laufband:2 @ zeichnen < standHolen < signalEmpfangen

Eine Folgenummer zaehlt jeden angekommenen Rundruf. Jede Abfrage, die
die Seite VON SICH AUS macht -- nach dem Verbindungsaufbau, im
geschlossenen Saal, bei jedem Verbindungssignal, nach einer
abgelehnten Anwesenheitsmeldung, und der Anwesenheitstakt selbst --
verwirft ihr Ergebnis, wenn inzwischen etwas Neueres da war.

Abfragen nach einer EIGENEN Handlung bleiben hart: Sie bringen Dinge
mit, die kein Rundruf traegt (die Verwaltungslisten der Regie). Die
Unterscheidung steht am Aufruf, nicht in einer Bedingung im Inneren.

=====================================================================
5. UND DIE MESSUNGEN WARTEN NICHT MEHR AUF DIE UHR
=====================================================================
Feste Wartezeiten sind dieselbe Falle wie feste Schwellen: Sie
stimmen, bis daneben etwas langsamer wird, und melden dann einen
Fehler, den es nicht gibt. Zweimal ist mir das in einer Stunde
passiert -- einmal beim Band, einmal bei den Ecken. Der Werbeblock
wartet jetzt fuenfmal auf das Ergebnis, der Gleichlauf viermal; laeuft
eine Frist ab, ist es ein echter Befund.

Die erste Fassung der Gleichlauf-Gegenprobe war selbst falsch -- sie
hielt das Selbstheilen des Systems fuer einen Fehler.

Neu in mess-reaktion: „Die Chatkiste in jedem Zustand" (alle drei,
mit Breite und Sperrgrund) und „Beendet heisst leer (im Pult)" -- dort
gemessen, wo Filipe hinsieht, nicht in der Datenbank.
Neu in pruef-reaktion (+14): das Leeren, die Gegenprobe „vorher war
etwas drin", der Verlauf bleibt, und die Entscheidung „wer nur
vorbereitet hat, behaelt seine Eingaben".

Gemessen: mess-reaktion dreimal hintereinander 0/0, pruef-reaktion
407/0, pruef-css-klassen 37/0, pruef-struktur 44/0, pruef-tippziele
13/0, pruef-haus-seiten 38/0, pruef-haus-trennung 100/0, pruef-buehne
38/0, pruef-push-ziel 38/0, mess-buehne 0.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-30 02:36:13 +02:00
co-authored by Claude Opus 5
parent 2c3b90d75c
commit 0fbd3f45b3
50 changed files with 1644 additions and 933 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/reaktion.html
+244 -230
View File
@@ -7,15 +7,15 @@
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609292348" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609292348" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609292348" />
<link rel="stylesheet" href="assets/css/start.css?v=202609292348" />
<link rel="stylesheet" href="assets/css/reaktion.css?v=202609292348" />
<link rel="stylesheet" href="assets/css/spendenkarte.css?v=202609292348" />
<link rel="stylesheet" href="assets/css/werbung.css?v=202609292348" />
<link rel="stylesheet" href="assets/css/module.css?v=202609292348" />
<link rel="stylesheet" href="assets/css/haus.css?v=202609292348" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609300235" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609300235" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609300235" />
<link rel="stylesheet" href="assets/css/start.css?v=202609300235" />
<link rel="stylesheet" href="assets/css/reaktion.css?v=202609300235" />
<link rel="stylesheet" href="assets/css/spendenkarte.css?v=202609300235" />
<link rel="stylesheet" href="assets/css/werbung.css?v=202609300235" />
<link rel="stylesheet" href="assets/css/module.css?v=202609300235" />
<link rel="stylesheet" href="assets/css/haus.css?v=202609300235" />
</head>
<body class="start reaktion-seite" data-stand="laedt">
@@ -129,226 +129,240 @@
<p class="fehler" id="fehler" role="alert" aria-live="polite" hidden></p>
<!-- ============ ZU ============================================== -->
<section class="vorhang" id="teil-zu" aria-label="Die Reaction ist geschlossen">
<div class="vorhang__licht" aria-hidden="true"></div>
<div class="vorhang__innen">
<span class="vorhang__marke"><i></i>Team Dogi<i></i></span>
<h1 class="vorhang__titel">Der Saal ist zu.</h1>
<p class="vorhang__satz" id="zu-satz">
Hier schauen wir zusammen. Wenn etwas läuft, steht es hier —
und du siehst es schon an der Kachel.
</p>
<p class="vorhang__naechste" id="zu-naechste" hidden></p>
</div>
</section>
<!-- ============ DER RAUM =======================================
Zwei Spalten: links wechseln die drei Haeute (Vorhang,
Wartebereich, Kino), rechts steht die Chatschiene -- und die
bleibt.
<!-- ============ VORBEREITUNG ==================================== -->
<section class="warte" id="teil-warte" aria-label="Wartebereich">
<div class="warte__buehne">
<div class="warte__bild" id="warte-bild" aria-hidden="true"></div>
<div class="warte__text">
<span class="warte__kicker">Gleich geht es los</span>
<h1 class="warte__titel" id="warte-titel">Reaction startet bald</h1>
<!-- Der Countdown ist eine ZAHL und kein Balken. Ein Balken
sagt „irgendwann"; eine Zahl sagt „in vier Minuten", und
danach entscheidet jemand, ob er sich noch einen Kaffee
holt. -->
<div class="countdown" id="countdown" hidden>
<span class="countdown__zahl" id="countdown-zahl">–</span>
<span class="countdown__wort" id="countdown-wort">bis zum Start</span>
</div>
<p class="warte__danach" id="warte-naechstes" hidden></p>
<p class="warte__satz">
Der Chat ist schon offen. Schreib schon mal, wer da ist.
Filipe, 30.09.2026: "mach dass ich die chat kiste immer sehe
bitte und nicht erst wenn das video laeuft."
Vorher lag die Schiene IM Kino und ging mit ihm weg. Im
Wartebereich stand dabei "Der Chat ist schon offen" -- der
Satz stimmte, der Server laesst dort schreiben; zu sehen war
der Chat trotzdem nicht. -->
<div class="raum" id="raum">
<section class="vorhang" id="teil-zu" aria-label="Die Reaction ist geschlossen">
<div class="vorhang__licht" aria-hidden="true"></div>
<div class="vorhang__innen">
<span class="vorhang__marke"><i></i>Team Dogi<i></i></span>
<h1 class="vorhang__titel">Der Saal ist zu.</h1>
<p class="vorhang__satz" id="zu-satz">
Hier schauen wir zusammen. Wenn etwas läuft, steht es hier —
und du siehst es schon an der Kachel.
</p>
<p class="vorhang__naechste" id="zu-naechste" hidden></p>
</div>
</div>
</section>
</section>
<!-- ============ LIVE ============================================ -->
<section class="kino" id="teil-live" aria-label="Die Reaction läuft">
<!-- Das Video. Der Rahmen bleibt stehen, auch wenn noch nichts
darin ist -- ein Kasten, der erst entsteht, wenn das Video
kommt, lässt die halbe Seite springen. -->
<div class="leinwand" id="leinwand">
<div class="leinwand__video" id="video-platz">
<div class="leinwand__warte" id="video-warte">Das Video kommt gleich …</div>
</div>
<!-- WER MITSIEHT, MUSS ES WISSEN. Läuft das Video auf 1,5-fach
und steht das nirgends, hält jeder Zweite seine Leitung für
kaputt — oder glaubt, bei ihm sei etwas verstellt. Ein
kleines Schild, nur wenn es nicht 1× ist; bei normaler
Geschwindigkeit wäre es eine Fläche ohne Aussage. -->
<span class="leinwand__tempo" id="leinwand-tempo" hidden aria-live="polite"></span>
<!-- Die Kamerafenster liegen ÜBER dem Video, nicht daneben.
Genau so sieht eine Reaction aus: das Bild groß, das
Gesicht klein davor. Wer lieber beides gleich groß hat,
stellt oben die Anordnung um. -->
<div class="kameras" id="kameras"></div>
<!-- DER TON MUSS FREIGEGEBEN WERDEN. Ein Videoelement mit Ton
darf nicht von allein losgehen -- das verbietet jeder
Browser. Die Kameras starten deshalb stumm, und dieser
Knopf (oder die erste Berührung der Seite) schaltet sie
laut. Ohne ihn säße jemand vor einem stummen Bild und
suchte den Fehler bei sich. -->
<!-- DIE SPENDENTAFEL. Hier laufen die Karten ein — eine nach
der anderen, unten am Rand, nie über der Mitte. Wer etwas
gibt, soll es sehen; wer zusieht, soll das Video nicht
verlieren. -->
<div class="spendentafel" id="spendentafel" aria-live="polite"></div>
<!-- DIE SENDERLEISTE. Sie gehört jedem, der sendet — Host wie
Gast — und liegt über dem Bild, weil man dorthin sieht.
Ein Gast, der sein eigenes Bild nicht abschalten kann,
müsste den Host darum bitten; das ist keine Bedienung,
das ist eine Bitte. -->
<div class="senderleiste" id="senderleiste" hidden>
<button type="button" class="sender-knopf" id="s-kamera" aria-pressed="false">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M3.5 6.5h11v11h-11z" />
<path d="M14.5 10.5l6-3.5v10l-6-3.5z" />
<path class="sender-knopf__strich" d="M3 21L21 3" />
</svg>
<span id="s-kamera-wort">Kamera</span>
</button>
<!-- ==== DEN BILDSCHIRM TEILEN ==========================
Filipe: „waere es nicht einfach eine bildschirm
uebertragung zu installieren?"
Er geht denselben Weg wie die Kamera — dieselbe
Direktverbindung, nur eine andere Quelle. Deshalb steht
der Knopf auch hier und nicht in einem eigenen
Bereich. -->
<button type="button" class="sender-knopf" id="s-teilen" aria-pressed="false">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M3 4.5h18v12H3z" />
<path d="M8 20.5h8" />
<path d="M12 16.5v4" />
</svg>
<span id="s-teilen-wort">Bildschirm</span>
</button>
<button type="button" class="sender-knopf" id="s-mikro" aria-pressed="false">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 3.2a2.6 2.6 0 0 1 2.6 2.6v6a2.6 2.6 0 0 1-5.2 0v-6A2.6 2.6 0 0 1 12 3.2z" />
<path d="M5.8 11.4a6.2 6.2 0 0 0 12.4 0M12 17.6V21" />
<path class="sender-knopf__strich" d="M3 21L21 3" />
</svg>
<span id="s-mikro-wort">Mikro</span><kbd class="sender-taste">M</kbd>
</button>
<span class="sender-pegel" id="s-pegel" aria-hidden="true"><i></i></span>
</div>
<button type="button" class="ton-an" id="ton-an" hidden>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M4 9.4h3.6L12 5.2v13.6L7.6 14.6H4z" />
<path d="M16.2 9.2a4 4 0 0 1 0 5.6" />
<path d="M18.6 6.6a7.4 7.4 0 0 1 0 10.8" />
</svg>
<span>Ton einschalten</span>
</button>
</div>
<!-- Der Chat. Auf dem Rechner eine Schiene rechts, am Handy eine
Lade, die von unten einfährt. -->
<aside class="schiene" id="schiene" aria-label="Live-Chat">
<header class="schiene__kopf">
<h2 class="schiene__titel">Live-Chat</h2>
<span class="schiene__zahl" id="chat-zahl">0</span>
<!-- WAS GEMELDET WURDE. Steht nur da, wenn etwas offen ist —
eine Zahl, die immer sichtbar und meistens null ist, wird
nach drei Tagen nicht mehr gelesen. Nur für die
Moderation. -->
<button type="button" class="schiene__meldungen" id="chat-meldungen" hidden></button>
<!-- DIE CHAT-STUFE STEHT DORT, WO DER CHAT IST, und nicht im
Regiepult. Man moderiert, wo man liest — ein Umweg über
ein Register wäre in dem Moment, in dem es laut wird,
genau ein Umweg zu viel. Nur die zwei sehen sie. -->
<div class="chatstufen" id="chat-stufen" hidden role="group" aria-label="Wer schreiben darf">
<button type="button" class="chatstufe" data-modus="offen" aria-pressed="true">Offen</button>
<button type="button" class="chatstufe" data-modus="team" aria-pressed="false">Team</button>
<button type="button" class="chatstufe" data-modus="zu" aria-pressed="false">Zu</button>
</div>
</header>
<ol class="schiene__liste" id="chat-liste" aria-live="polite"></ol>
<form class="schiene__form" id="chat-form">
<input type="text" id="chat-feld" class="schiene__feld" maxlength="400"
placeholder="Sag was …" autocomplete="off" />
<button type="submit" class="schiene__senden" aria-label="Senden">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12 20 4l-4 8 4 8z" /></svg>
</button>
</form>
<!-- DER WEG, DEN HOST ZU UNTERSTÜTZEN. Er steht IM Chat und
nicht in einer eigenen Ecke: Wer gerade etwas gut findet,
tippt es in den Chat — und sieht den Knopf in derselben
Bewegung.
VIER BETRÄGE STATT EINES LINKS. Ein Tipp öffnet PayPal mit
schon eingetragener Summe; wer eine Liste sieht, rechnet,
wer vier Knöpfe sieht, tippt. Danach fragt das Feld
einmal nach — mehr können wir von hier aus nicht wissen,
und so zu tun, als wüssten wir es, wäre gelogen. -->
<div class="geben" id="geben" hidden>
<div class="geben__kopf">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 20.4S3.6 15.2 3.6 9.6A4.2 4.2 0 0 1 12 7.4a4.2 4.2 0 0 1 8.4 2.2c0 5.6-8.4 10.8-8.4 10.8z" />
</svg>
<span id="geben-titel">Dogi was ausgeben</span>
</div>
<div class="geben__betraege" id="geben-betraege"></div>
<a class="geben__frei" id="geben-frei" hidden
rel="noopener noreferrer" target="_blank">Frei wählen …</a>
<!-- Erscheint erst, wenn jemand eine Zahl angetippt hat.
Vorher wäre es eine Frage auf etwas, das nicht passiert
ist. -->
<div class="geben__nach" id="geben-nach" hidden>
<p class="geben__frage" id="geben-frage">Hat es geklappt?</p>
<!-- ==== DER TEXT KOMMT VON DEM, DER GIBT ==============
Filipe: „der text der dazu erscheint sollen die leute
selber schreiben können … es sollen personalisierte
texte sein von den leuten selbst."
Der Name steht oben, weil viele mit ihrem Rudelnamen
dastehen wollen und nicht mit dem, der im Haus
steht. Beides ist freiwillig — wer nichts schreibt,
bekommt seinen Namen und eine Karte ohne Satz. -->
<label class="geben__feld">
<span>Name auf der Karte</span>
<input type="text" id="geben-name" maxlength="40"
autocomplete="off" placeholder="So wie du dastehen willst" />
</label>
<label class="geben__feld">
<span>Dein Text <span class="geben__rest" id="geben-rest"></span></span>
<textarea id="geben-text" rows="2" maxlength="140"
placeholder="Was soll im Bild stehen?"></textarea>
</label>
<div class="geben__nach-knoepfe">
<button type="button" class="geben__melden" id="geben-melden">Ja, melden</button>
<button type="button" class="geben__abbruch" id="geben-abbruch">Doch nicht</button>
<!-- ============ VORBEREITUNG ==================================== -->
<section class="warte" id="teil-warte" aria-label="Wartebereich">
<div class="warte__buehne">
<div class="warte__bild" id="warte-bild" aria-hidden="true"></div>
<div class="warte__text">
<span class="warte__kicker">Gleich geht es los</span>
<h1 class="warte__titel" id="warte-titel">Reaction startet bald</h1>
<!-- Der Countdown ist eine ZAHL und kein Balken. Ein Balken
sagt „irgendwann"; eine Zahl sagt „in vier Minuten", und
danach entscheidet jemand, ob er sich noch einen Kaffee
holt. -->
<div class="countdown" id="countdown" hidden>
<span class="countdown__zahl" id="countdown-zahl">–</span>
<span class="countdown__wort" id="countdown-wort">bis zum Start</span>
</div>
<p class="warte__danach" id="warte-naechstes" hidden></p>
<p class="warte__satz">
Der Chat ist schon offen. Schreib schon mal, wer da ist.
</p>
</div>
<p class="geben__danke" id="geben-danke" hidden></p>
<!-- WAS ICH SELBST HABE. Ohne einen sichtbaren Stand wären
die Punkte eine Zahl in einer Datenbank und kein Grund,
wiederzukommen. Er steht nur da, wenn er nicht null
ist — eine Null zu zeigen ist keine Auskunft, sondern
eine Aufforderung. -->
<p class="geben__stand" id="geben-stand" hidden></p>
</div>
</aside>
</section>
<!-- ============ LIVE ============================================ -->
<section class="kino" id="teil-live" aria-label="Die Reaction läuft">
<!-- Das Video. Der Rahmen bleibt stehen, auch wenn noch nichts
darin ist -- ein Kasten, der erst entsteht, wenn das Video
kommt, lässt die halbe Seite springen. -->
<div class="leinwand" id="leinwand">
<div class="leinwand__video" id="video-platz">
<div class="leinwand__warte" id="video-warte">Das Video kommt gleich …</div>
</div>
<!-- WER MITSIEHT, MUSS ES WISSEN. Läuft das Video auf 1,5-fach
und steht das nirgends, hält jeder Zweite seine Leitung für
kaputt — oder glaubt, bei ihm sei etwas verstellt. Ein
kleines Schild, nur wenn es nicht 1× ist; bei normaler
Geschwindigkeit wäre es eine Fläche ohne Aussage. -->
<span class="leinwand__tempo" id="leinwand-tempo" hidden aria-live="polite"></span>
<!-- Die Kamerafenster liegen ÜBER dem Video, nicht daneben.
Genau so sieht eine Reaction aus: das Bild groß, das
Gesicht klein davor. Wer lieber beides gleich groß hat,
stellt oben die Anordnung um. -->
<div class="kameras" id="kameras"></div>
<!-- DER TON MUSS FREIGEGEBEN WERDEN. Ein Videoelement mit Ton
darf nicht von allein losgehen -- das verbietet jeder
Browser. Die Kameras starten deshalb stumm, und dieser
Knopf (oder die erste Berührung der Seite) schaltet sie
laut. Ohne ihn säße jemand vor einem stummen Bild und
suchte den Fehler bei sich. -->
<!-- DIE SPENDENTAFEL. Hier laufen die Karten ein — eine nach
der anderen, unten am Rand, nie über der Mitte. Wer etwas
gibt, soll es sehen; wer zusieht, soll das Video nicht
verlieren. -->
<div class="spendentafel" id="spendentafel" aria-live="polite"></div>
<!-- DIE SENDERLEISTE. Sie gehört jedem, der sendet — Host wie
Gast — und liegt über dem Bild, weil man dorthin sieht.
Ein Gast, der sein eigenes Bild nicht abschalten kann,
müsste den Host darum bitten; das ist keine Bedienung,
das ist eine Bitte. -->
<div class="senderleiste" id="senderleiste" hidden>
<button type="button" class="sender-knopf" id="s-kamera" aria-pressed="false">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M3.5 6.5h11v11h-11z" />
<path d="M14.5 10.5l6-3.5v10l-6-3.5z" />
<path class="sender-knopf__strich" d="M3 21L21 3" />
</svg>
<span id="s-kamera-wort">Kamera</span>
</button>
<!-- ==== DEN BILDSCHIRM TEILEN ==========================
Filipe: „waere es nicht einfach eine bildschirm
uebertragung zu installieren?"
Er geht denselben Weg wie die Kamera — dieselbe
Direktverbindung, nur eine andere Quelle. Deshalb steht
der Knopf auch hier und nicht in einem eigenen
Bereich. -->
<button type="button" class="sender-knopf" id="s-teilen" aria-pressed="false">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M3 4.5h18v12H3z" />
<path d="M8 20.5h8" />
<path d="M12 16.5v4" />
</svg>
<span id="s-teilen-wort">Bildschirm</span>
</button>
<button type="button" class="sender-knopf" id="s-mikro" aria-pressed="false">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 3.2a2.6 2.6 0 0 1 2.6 2.6v6a2.6 2.6 0 0 1-5.2 0v-6A2.6 2.6 0 0 1 12 3.2z" />
<path d="M5.8 11.4a6.2 6.2 0 0 0 12.4 0M12 17.6V21" />
<path class="sender-knopf__strich" d="M3 21L21 3" />
</svg>
<span id="s-mikro-wort">Mikro</span><kbd class="sender-taste">M</kbd>
</button>
<span class="sender-pegel" id="s-pegel" aria-hidden="true"><i></i></span>
</div>
<button type="button" class="ton-an" id="ton-an" hidden>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M4 9.4h3.6L12 5.2v13.6L7.6 14.6H4z" />
<path d="M16.2 9.2a4 4 0 0 1 0 5.6" />
<path d="M18.6 6.6a7.4 7.4 0 0 1 0 10.8" />
</svg>
<span>Ton einschalten</span>
</button>
</div>
<!-- Der Chat. Auf dem Rechner eine Schiene rechts, am Handy eine
Lade, die von unten einfährt. -->
</section>
</section>
<aside class="schiene" id="schiene" aria-label="Live-Chat">
<header class="schiene__kopf">
<h2 class="schiene__titel">Live-Chat</h2>
<span class="schiene__zahl" id="chat-zahl">0</span>
<!-- WAS GEMELDET WURDE. Steht nur da, wenn etwas offen ist —
eine Zahl, die immer sichtbar und meistens null ist, wird
nach drei Tagen nicht mehr gelesen. Nur für die
Moderation. -->
<button type="button" class="schiene__meldungen" id="chat-meldungen" hidden></button>
<!-- DIE CHAT-STUFE STEHT DORT, WO DER CHAT IST, und nicht im
Regiepult. Man moderiert, wo man liest — ein Umweg über
ein Register wäre in dem Moment, in dem es laut wird,
genau ein Umweg zu viel. Nur die zwei sehen sie. -->
<div class="chatstufen" id="chat-stufen" hidden role="group" aria-label="Wer schreiben darf">
<button type="button" class="chatstufe" data-modus="offen" aria-pressed="true">Offen</button>
<button type="button" class="chatstufe" data-modus="team" aria-pressed="false">Team</button>
<button type="button" class="chatstufe" data-modus="zu" aria-pressed="false">Zu</button>
</div>
</header>
<ol class="schiene__liste" id="chat-liste" aria-live="polite"></ol>
<form class="schiene__form" id="chat-form">
<input type="text" id="chat-feld" class="schiene__feld" maxlength="400"
placeholder="Sag was …" autocomplete="off" />
<button type="submit" class="schiene__senden" aria-label="Senden">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12 20 4l-4 8 4 8z" /></svg>
</button>
</form>
<!-- DER WEG, DEN HOST ZU UNTERSTÜTZEN. Er steht IM Chat und
nicht in einer eigenen Ecke: Wer gerade etwas gut findet,
tippt es in den Chat — und sieht den Knopf in derselben
Bewegung.
VIER BETRÄGE STATT EINES LINKS. Ein Tipp öffnet PayPal mit
schon eingetragener Summe; wer eine Liste sieht, rechnet,
wer vier Knöpfe sieht, tippt. Danach fragt das Feld
einmal nach — mehr können wir von hier aus nicht wissen,
und so zu tun, als wüssten wir es, wäre gelogen. -->
<div class="geben" id="geben" hidden>
<div class="geben__kopf">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 20.4S3.6 15.2 3.6 9.6A4.2 4.2 0 0 1 12 7.4a4.2 4.2 0 0 1 8.4 2.2c0 5.6-8.4 10.8-8.4 10.8z" />
</svg>
<span id="geben-titel">Dogi was ausgeben</span>
</div>
<div class="geben__betraege" id="geben-betraege"></div>
<a class="geben__frei" id="geben-frei" hidden
rel="noopener noreferrer" target="_blank">Frei wählen …</a>
<!-- Erscheint erst, wenn jemand eine Zahl angetippt hat.
Vorher wäre es eine Frage auf etwas, das nicht passiert
ist. -->
<div class="geben__nach" id="geben-nach" hidden>
<p class="geben__frage" id="geben-frage">Hat es geklappt?</p>
<!-- ==== DER TEXT KOMMT VON DEM, DER GIBT ==============
Filipe: „der text der dazu erscheint sollen die leute
selber schreiben können … es sollen personalisierte
texte sein von den leuten selbst."
Der Name steht oben, weil viele mit ihrem Rudelnamen
dastehen wollen und nicht mit dem, der im Haus
steht. Beides ist freiwillig — wer nichts schreibt,
bekommt seinen Namen und eine Karte ohne Satz. -->
<label class="geben__feld">
<span>Name auf der Karte</span>
<input type="text" id="geben-name" maxlength="40"
autocomplete="off" placeholder="So wie du dastehen willst" />
</label>
<label class="geben__feld">
<span>Dein Text <span class="geben__rest" id="geben-rest"></span></span>
<textarea id="geben-text" rows="2" maxlength="140"
placeholder="Was soll im Bild stehen?"></textarea>
</label>
<div class="geben__nach-knoepfe">
<button type="button" class="geben__melden" id="geben-melden">Ja, melden</button>
<button type="button" class="geben__abbruch" id="geben-abbruch">Doch nicht</button>
</div>
</div>
<p class="geben__danke" id="geben-danke" hidden></p>
<!-- WAS ICH SELBST HABE. Ohne einen sichtbaren Stand wären
die Punkte eine Zahl in einer Datenbank und kein Grund,
wiederzukommen. Er steht nur da, wenn er nicht null
ist — eine Null zu zeigen ist keine Auskunft, sondern
eine Aufforderung. -->
<p class="geben__stand" id="geben-stand" hidden></p>
</div>
</aside>
</div><!-- /raum -->
<!-- ============ DIE REGIE =====================================
Nur für DogFather und die rechte Hand.
@@ -867,15 +881,15 @@
<!-- bereiche.js VOR kopf.js: Dort steht `window.Bereiche`, und kopf.js
liest daraus die Leitungsrollen. -->
<script src="assets/js/bereiche.js?v=202609292348" defer></script>
<script src="assets/js/wahl.js?v=202609292348" defer></script>
<script src="assets/js/nachfrage.js?v=202609292348" defer></script>
<script src="assets/js/meldung.js?v=202609292348" defer></script>
<script src="assets/js/installieren.js?v=202609292348" defer></script>
<script src="assets/js/kopf.js?v=202609292348" defer></script>
<script src="assets/js/glocke.js?v=202609292348" defer></script>
<script src="assets/js/spendenkarte.js?v=202609292348" defer></script>
<script src="assets/js/werbung.js?v=202609292348" defer></script>
<script src="assets/js/reaktion.js?v=202609292348" defer></script>
<script src="assets/js/bereiche.js?v=202609300235" defer></script>
<script src="assets/js/wahl.js?v=202609300235" defer></script>
<script src="assets/js/nachfrage.js?v=202609300235" defer></script>
<script src="assets/js/meldung.js?v=202609300235" defer></script>
<script src="assets/js/installieren.js?v=202609300235" defer></script>
<script src="assets/js/kopf.js?v=202609300235" defer></script>
<script src="assets/js/glocke.js?v=202609300235" defer></script>
<script src="assets/js/spendenkarte.js?v=202609300235" defer></script>
<script src="assets/js/werbung.js?v=202609300235" defer></script>
<script src="assets/js/reaktion.js?v=202609300235" defer></script>
</body>
</html>