pruef-handy-teamdogi meldete auf beiden Geraeten und fuer Modi und
Community dasselbe:
reaktion.html: Bedienelement ohne Namen — input#chat-feld
Sein einziger Name war der PLATZHALTER. Der ist keiner: Er
verschwindet in dem Moment, in dem jemand anfaengt zu tippen, und
danach hat das Feld fuer ein Vorleseprogramm gar keinen Namen mehr.
Der Knopf daneben macht es seit jeher richtig
(`aria-label="Senden"`).
UND DER NAME WANDERT MIT. Das Feld sagt im Platzhalter, warum
gerade nicht geschrieben werden kann — „Der Chat ist gerade zu",
„Du bist gerade stumm geschaltet", „Gerade schreibt nur das Team".
Ein fester `aria-label` haette genau diese Auskunft fuer das Ohr
verschluckt. Er kommt deshalb aus derselben Zeile wie der
Platzhalter: eine Angabe, zwei Ausgaben. Zwei getrennte Texte
waeren die naechste Stelle, an der einer gepflegt wird und der
andere nicht.
GEPRUEFT
pruef-handy-teamdogi 8 Befunde -> 14 Pruefungen, 0 Fehler
pruef-reaktion 421 Pruefungen, 0 Fehler
pruef-handy 186 Pruefungen, 0 Fehler
Damit ist die Liste der alten offenen Punkte abgearbeitet:
- pruef-fingermass (Grundwert 1) unveraendert 1, dazu eine
zweite Zahl fuer die
Faelle, die sie bisher gar
nicht sehen konnte
- Regie/Transport auf 320x568 die Ueberlappung ist weg
- report.html 27x18 px gibt es nicht mehr; beide
Messungen melden die Seite
sauber (Notiz war veraltet)
- Ueberstand pruef-handy-teamdogi 0 Befunde
Co-Authored-By: Claude Opus 5 <[email protected]>
920 lines
45 KiB
HTML
920 lines
45 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>Reaction · Team Dogi</title>
|
||
<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=202610011216" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202610011216" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202610011216" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202610011216" />
|
||
<link rel="stylesheet" href="assets/css/reaktion.css?v=202610011216" />
|
||
<link rel="stylesheet" href="assets/css/spendenkarte.css?v=202610011216" />
|
||
<link rel="stylesheet" href="assets/css/werbung.css?v=202610011216" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202610011216" />
|
||
<link rel="stylesheet" href="assets/css/haus.css?v=202610011216" />
|
||
</head>
|
||
|
||
<body class="start reaktion-seite" data-stand="laedt">
|
||
|
||
<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">Team Dogi</a> · Reaction</span></p>
|
||
<div class="kopfleiste__rechts">
|
||
<span class="wer" id="wer">…</span>
|
||
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ======================================================================
|
||
DIE REACTION (28.09.2026)
|
||
|
||
Filipes Kurznotiz: Kachel sichtbar -> geschlossen -> Vorbereitung
|
||
-> Wartebereich/Chat -> Countdown -> LIVE -> Reaction + Gäste +
|
||
Chat + PayPal -> Ende.
|
||
|
||
WARUM DIESE SEITE ANDERS GEBAUT IST ALS JEDE ANDERE IM HAUS
|
||
|
||
Alle anderen Seiten sind Listen und Karten: Man liest, man
|
||
entscheidet, man geht wieder. Hier sitzt man. Eine Stunde lang,
|
||
mit anderen zusammen, und schaut auf EINE Sache.
|
||
|
||
Deshalb gibt es hier keine Kacheln und kein Raster, sondern
|
||
einen SAAL: eine große Fläche für das Video, Kamerabilder als
|
||
schwebende Fenster darüber, der Chat als Schiene daneben. Am
|
||
Handy wird daraus ein Stapel, und die Schiene fährt von unten
|
||
ein.
|
||
|
||
DREI HÄUTE ÜBEREINANDER, nicht drei Seiten nebeneinander:
|
||
|
||
.saal[data-stand="zu"] der Vorhang ist zu
|
||
.saal[data-stand="vorbereitung"] Vorschau, Countdown, Chat
|
||
.saal[data-stand="live"] Video, Kameras, Chat
|
||
|
||
Alle drei stehen im Dokument und werden über `data-stand`
|
||
umgeschaltet. Der Grund ist nicht Bequemlichkeit: Beim Wechsel
|
||
von „gleich" auf „live" soll nichts neu geladen werden -- weder
|
||
der Chat, in dem man mitten im Satz ist, noch die Verbindung zur
|
||
Kamera. Ein Seitenwechsel an dieser Stelle wäre ein Abriss.
|
||
====================================================================== -->
|
||
<main class="saal" id="saal" data-stand="zu">
|
||
|
||
<!-- ============ DIE REGIELEISTE ================================
|
||
Sie steht ÜBER dem Saal, nicht darin — Filipes Wunsch vom
|
||
28.09.2026. Nur die zwei, die die Sendung führen, sehen sie.
|
||
|
||
Sie ist absichtlich der EINZIGE Teil der Regie, der immer
|
||
sichtbar ist: Wer die Regie zuklappt, um mehr Bild zu haben,
|
||
soll trotzdem mit einem Griff wieder hineinkommen.
|
||
============================================================ -->
|
||
<div class="regieleiste" id="regieleiste" data-auf="zu" hidden>
|
||
<!-- DAS SCHILD SAGT, WAS DIESE LEISTE IST. Darüber steht die
|
||
Kopfleiste des Hauses („Reaction"), darunter die Sendung —
|
||
ohne ein Wort dazwischen sind das sieben Begriffe am oberen
|
||
Rand, die aussehen wie noch eine Navigation.
|
||
`aria-hidden`, weil die Leiste ihren Namen schon über
|
||
`aria-label` trägt; zweimal vorgelesen wäre es Lärm. -->
|
||
<span class="regieleiste__schild" aria-hidden="true">Regie</span>
|
||
<!-- DER KNOPF, DER DIE REGISTER HOLT (01.10.2026).
|
||
|
||
Acht Register brauchen am Handy zwei Zeilen (gemessen 100 px
|
||
auf 360, 148 auf 320), und die fehlen unten: Der Chatkopf
|
||
landete dadurch auf dem Pult. Hier klappen sie hinter ihren
|
||
eigenen Wert — dasselbe Muster wie die Tempo-Gruppe in der
|
||
Transportleiste, und aus demselben Grund.
|
||
|
||
Er zeigt, wo man GERADE ist, damit man zum Nachsehen nicht
|
||
aufklappen muss. Am Rechner gibt es ihn nicht; dort steht
|
||
die Leiste offen. -->
|
||
<button type="button" class="reiter__auf" id="reiter-auf"
|
||
aria-expanded="false" aria-controls="reiter"
|
||
aria-label="Regie-Bereiche ein- und ausklappen">
|
||
<span id="reiter-auf-wort">Sendung</span>
|
||
</button>
|
||
<div class="reiter" id="reiter" role="tablist" aria-label="Regie-Bereiche">
|
||
<button type="button" class="reiter__knopf" role="tab" data-tafel="sendung"
|
||
id="reiter-sendung" aria-controls="tafel-sendung" aria-selected="true">Sendung</button>
|
||
<button type="button" class="reiter__knopf" role="tab" data-tafel="liste"
|
||
id="reiter-liste" aria-controls="tafel-liste" aria-selected="false">
|
||
Warteschlange <span class="reiter__zahl" id="reiter-liste-zahl">0</span>
|
||
</button>
|
||
<button type="button" class="reiter__knopf" role="tab" data-tafel="ton"
|
||
id="reiter-ton" aria-controls="tafel-ton" aria-selected="false">Ton</button>
|
||
<button type="button" class="reiter__knopf" role="tab" data-tafel="gaeste"
|
||
id="reiter-gaeste" aria-controls="tafel-gaeste" aria-selected="false">Gäste</button>
|
||
<button type="button" class="reiter__knopf" role="tab" data-tafel="bild"
|
||
id="reiter-bild" aria-controls="tafel-bild" aria-selected="false">Bild</button>
|
||
<button type="button" class="reiter__knopf" role="tab" data-tafel="gestaltung"
|
||
aria-selected="false" id="reiter-gestaltung"
|
||
aria-controls="tafel-gestaltung">Gestaltung</button>
|
||
<button type="button" class="reiter__knopf" role="tab" data-tafel="werbung"
|
||
id="reiter-werbung" aria-controls="tafel-werbung"
|
||
aria-selected="false">Werbung</button>
|
||
<button type="button" class="reiter__knopf" role="tab" data-tafel="spenden"
|
||
id="reiter-spenden" aria-controls="tafel-spenden" aria-selected="false">
|
||
Spenden <span class="reiter__zahl" id="reiter-spenden-zahl" data-leer="ja">0</span>
|
||
</button>
|
||
<!-- Die gleitende Marke. `aria-hidden`, weil sie nichts sagt,
|
||
was `aria-selected` nicht schon sagt — sie zeigt es nur. -->
|
||
<span class="reiter__marke" id="reiter-marke" aria-hidden="true"></span>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ============ DAS SCHILD ÜBER ALLEM ============================
|
||
Es steht in allen drei Zuständen und sagt in drei Worten, was
|
||
los ist. Unten am Handy ist der Platz knapp; das Schild bleibt
|
||
trotzdem, weil die Antwort auf „läuft schon was?" die einzige
|
||
ist, die jeder beim Öffnen sucht. -->
|
||
<div class="buehne-schild" id="schild">
|
||
<span class="buehne-schild__punkt" aria-hidden="true"></span>
|
||
<span class="buehne-schild__wort" id="schild-wort">…</span>
|
||
<span class="buehne-schild__zahl" id="schild-zahl" hidden></span>
|
||
</div>
|
||
|
||
<p class="fehler" id="fehler" role="alert" aria-live="polite" hidden></p>
|
||
|
||
<!-- ============ ZU ============================================== -->
|
||
<!-- ============ DER RAUM =======================================
|
||
Zwei Spalten: links wechseln die drei Haeute (Vorhang,
|
||
Wartebereich, Kino), rechts steht die Chatschiene -- und die
|
||
bleibt.
|
||
|
||
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>
|
||
</section>
|
||
|
||
<!-- ============ 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>
|
||
</div>
|
||
</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>
|
||
<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">
|
||
<!-- DER NAME STEHT ALS `aria-label` DA, NICHT NUR ALS
|
||
PLATZHALTER (01.10.2026). Ein Platzhalter verschwindet,
|
||
sobald jemand tippt — danach hat das Feld keinen Namen
|
||
mehr. Der Knopf daneben macht es seit jeher richtig.
|
||
Das Programm schreibt beide gleichzeitig um, wenn der
|
||
Chat zu ist: Dann heisst das Feld „Der Chat ist gerade
|
||
zu" statt „Deine Nachricht". -->
|
||
<input type="text" id="chat-feld" class="schiene__feld" maxlength="400"
|
||
aria-label="Deine Nachricht"
|
||
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.
|
||
|
||
SIE LIEGT UNTEN, weil man beim Senden auf das Bild schaut und
|
||
nicht auf die Knöpfe — und was man nicht ansieht, greift man
|
||
mit dem Daumen.
|
||
|
||
SIE IST ZWEIGETEILT, und das ist der wichtigste Teil des
|
||
Umbaus: Oben eine Leiste, die IMMER steht — Lampe, Laufzeit,
|
||
Zahlen, die drei großen Knöpfe. Darunter die Register mit
|
||
allem, was man vorbereitet. Wer mitten in der Sendung
|
||
„Beenden" drückt, drückt es, weil etwas passiert ist. Das
|
||
darf nicht hinter einer Bewegung liegen.
|
||
========================================================== -->
|
||
<section class="pult" id="pult" hidden aria-label="Regie">
|
||
|
||
<!-- ---- Die Leiste: immer sichtbar ------------------------- -->
|
||
<div class="pult__leiste">
|
||
<div class="lampe" id="pult-lampe">
|
||
<span class="lampe__punkt" aria-hidden="true"></span>
|
||
<span class="lampe__wort" id="pult-wort">Geschlossen</span>
|
||
</div>
|
||
|
||
<!-- Die Laufzeit. Sie ist der Grund, warum in Regieräumen
|
||
überall Uhren hängen: Ohne sie verschätzt man sich um
|
||
Viertelstunden. -->
|
||
<div class="laufzeit" id="pult-uhr" hidden>
|
||
<span class="laufzeit__zahl" id="pult-zeit">0:00</span>
|
||
<span class="laufzeit__wort">Laufzeit</span>
|
||
</div>
|
||
|
||
<dl class="messwerte">
|
||
<div class="messwerte__paar">
|
||
<dt>Sehen zu</dt><dd id="z-dabei">0</dd>
|
||
</div>
|
||
<div class="messwerte__paar">
|
||
<dt>Mit Bild</dt><dd id="z-sicht">0</dd>
|
||
</div>
|
||
<div class="messwerte__paar">
|
||
<dt>Gäste</dt><dd id="z-gaeste">0</dd>
|
||
</div>
|
||
<!-- WAS DIE EIGENE LEITUNG TRÄGT. Jede Kamera geht direkt zu
|
||
einem Menschen, und jede kostet Upload. Diese Zahl ist
|
||
der Unterschied zwischen „es ruckelt bei euch?" und
|
||
„ich sehe, dass es zu viel wird". -->
|
||
<div class="messwerte__paar">
|
||
<dt>Upload</dt><dd id="z-last">–</dd>
|
||
</div>
|
||
</dl>
|
||
|
||
<div class="pult__tun">
|
||
<button type="button" class="tun tun--vor" id="p-vorbereiten">Vorbereiten</button>
|
||
<button type="button" class="tun tun--live" id="p-starten">Auf Sendung</button>
|
||
<button type="button" class="tun tun--aus" id="p-beenden">Beenden</button>
|
||
</div>
|
||
|
||
<button type="button" class="pult__klapp" id="pult-griff"
|
||
aria-expanded="true" aria-controls="pult-innen"
|
||
aria-label="Regie ein- oder ausklappen">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 15l6-6 6 6" /></svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- ---- Die Tafeln ------------------------------------------
|
||
Die Register dazu stehen NICHT hier, sondern ganz oben über
|
||
dem Saal. Grund: Wer die Regie zuklappt, hätte sie sonst
|
||
nicht mehr — und genau dann braucht man sie am ehesten. -->
|
||
<div class="pult__innen" id="pult-innen">
|
||
|
||
<!-- ==== Sendung ======================================== -->
|
||
<section class="pult-tafel" data-tafel="sendung" role="tabpanel"
|
||
id="tafel-sendung" aria-labelledby="reiter-sendung">
|
||
|
||
<!-- ==== DER REGIEPLATZ ==================================
|
||
Filipe: „kann das nicht bissl aufgeteilt sein auf links
|
||
und rechts und eine barre unten in der mitte."
|
||
|
||
Links steht, was LÄUFT — das liest man. Rechts steht,
|
||
was man EINTRÄGT — das tippt man vor der Sendung. Unten
|
||
liegt der Transport — den fasst man währenddessen an,
|
||
und er liegt deshalb immer an derselben Stelle. -->
|
||
<div class="regieplatz">
|
||
|
||
<!-- ==== LINKS: DIE KACHEL „WAS LÄUFT" =================
|
||
Sie geht über die ganze Höhe der rechten Seite und
|
||
trägt ein VORSCHAUBILD. Damit ist sie immer gefüllt --
|
||
auch bevor etwas eingetragen ist. Vorher stand hier
|
||
nur ein Titel, und wenn keiner da war, ein schwarzes
|
||
Loch neben einer vollen Spalte. -->
|
||
<section class="regiekachel kachel--laeuft" id="spur">
|
||
<div class="regieregiekachel__kopf">
|
||
<h4 class="regieregiekachel__ueber">Was läuft</h4>
|
||
<span class="spur__marke" id="spur-marke">Läuft</span>
|
||
</div>
|
||
|
||
<div class="laufbild" id="laufbild">
|
||
<img id="spur-bild" alt="" />
|
||
<span class="laufbild__leer" id="laufbild-leer">
|
||
Noch kein Video — trag rechts eine YouTube-Adresse ein.
|
||
</span>
|
||
</div>
|
||
|
||
<strong class="spur__titel" id="spur-titel">Noch kein Video eingetragen</strong>
|
||
<p class="pult__klein" id="zweit-hinweis">
|
||
Zwei Videos merken sich beide ihre Stelle — du kannst
|
||
mitten im einen wegschalten und später dort weitermachen.
|
||
</p>
|
||
</section>
|
||
|
||
<!-- ==== RECHTS OBEN: DIE SENDUNG ==================== -->
|
||
<section class="regiekachel kachel--sendung">
|
||
<div class="regieregiekachel__kopf">
|
||
<h4 class="regieregiekachel__ueber">Die Sendung</h4>
|
||
</div>
|
||
<label class="pult__feld">
|
||
<span>Titel der Sendung</span>
|
||
<input type="text" id="p-titel" maxlength="120" placeholder="Worum geht es?" />
|
||
</label>
|
||
<div class="regieregiekachel__paar">
|
||
<label class="pult__feld">
|
||
<span>YouTube</span>
|
||
<input type="text" id="p-video" placeholder="Adresse oder Kennung" />
|
||
</label>
|
||
<label class="pult__feld pult__feld--kurz">
|
||
<span>Beginn</span>
|
||
<input type="datetime-local" id="p-beginn" />
|
||
</label>
|
||
</div>
|
||
<div class="pult__zeile pult__zeile--ende">
|
||
<button type="button" class="knopf-still knopf-still--haupt"
|
||
id="p-sichern">Übernehmen</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ==== RECHTS UNTEN: BEREITLEGEN =================== -->
|
||
<section class="regiekachel kachel--bereit">
|
||
<div class="regieregiekachel__kopf">
|
||
<h4 class="regieregiekachel__ueber">Bereitlegen</h4>
|
||
</div>
|
||
<div class="regieregiekachel__paar">
|
||
<label class="pult__feld">
|
||
<span>Zweites Video</span>
|
||
<input type="text" id="p-zweit" placeholder="Adresse — leer räumt es weg" />
|
||
</label>
|
||
<label class="pult__feld">
|
||
<span>Vorschaubild</span>
|
||
<input type="text" id="p-vorschau" placeholder="Adresse eines Bildes" />
|
||
</label>
|
||
</div>
|
||
<div class="pult__zeile pult__zeile--ende">
|
||
<button type="button" class="knopf-still" id="p-zweit-sichern">Bereitlegen</button>
|
||
<!-- ==== ALLES ZURÜCKSETZEN ====================
|
||
Filipe: „brauch ich auch noch einen button wo ich
|
||
alles easy zurücksetzen kann."
|
||
Bewusst ruhig: Er gehört hierher, ist aber nicht
|
||
das, was man sucht. Was er leert und was er
|
||
stehen lässt, sagt er vorher. -->
|
||
<button type="button" class="knopf-still knopf-still--leise"
|
||
id="p-zuruecksetzen">Alles zurücksetzen</button>
|
||
</div>
|
||
<p class="pult__klein" id="zurueck-hinweis"></p>
|
||
</section>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ==== Warteschlange ================================== -->
|
||
<section class="pult-tafel" data-tafel="liste" role="tabpanel" hidden
|
||
id="tafel-liste" aria-labelledby="reiter-liste">
|
||
<div class="pult__zeile">
|
||
<label class="pult__feld">
|
||
<span>Video anhängen</span>
|
||
<input type="text" id="l-neu" placeholder="YouTube-Adresse einfügen und Enter" />
|
||
</label>
|
||
<button type="button" class="knopf-still" id="l-anhaengen">Anhängen</button>
|
||
</div>
|
||
<ol class="warteliste" id="warteliste"></ol>
|
||
<p class="pult__klein" id="liste-hinweis">
|
||
Räum vorher ein, was ihr schauen wollt. Im Live drückst du
|
||
dann nur noch „Nächstes“ — eine Adresse mitten in der
|
||
Sendung einzutippen ist ein Tippfehler zu viel.
|
||
</p>
|
||
</section>
|
||
|
||
<!-- ==== Ton ============================================ -->
|
||
<section class="pult-tafel" data-tafel="ton" role="tabpanel" hidden
|
||
id="tafel-ton" aria-labelledby="reiter-ton">
|
||
<div class="regler-reihe" id="regler"></div>
|
||
<p class="pult__klein" id="ton-hinweis"></p>
|
||
</section>
|
||
|
||
<!-- ==== Gäste ========================================== -->
|
||
<section class="pult-tafel" data-tafel="gaeste" role="tabpanel" hidden
|
||
id="tafel-gaeste" aria-labelledby="reiter-gaeste">
|
||
<h3 class="pult__ueber">Auf der Bühne <span class="pult__klein" id="gast-zahl">0 von 2</span></h3>
|
||
<div class="gast-reihe" id="gast-reihe"></div>
|
||
<div class="pult__zeile">
|
||
<select id="p-wen" class="pult__wahl" aria-label="Wen holen?"></select>
|
||
<button type="button" class="knopf-still" id="p-holen">Dazuholen</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ==== Bild =========================================== -->
|
||
<section class="pult-tafel" data-tafel="bild" role="tabpanel" hidden
|
||
id="tafel-bild" aria-labelledby="reiter-bild">
|
||
<h3 class="pult__ueber">Anordnung</h3>
|
||
<div class="layout-reihe" id="layout-reihe"></div>
|
||
<p class="pult__klein">
|
||
Mit den Tasten <kbd>1</kbd> bis <kbd>5</kbd> schaltest du
|
||
sie auch ohne die Regie aufzuklappen.
|
||
</p>
|
||
<p class="pult__klein">
|
||
Die Anordnung gilt für alle — sie ist Teil der Sendung, nicht
|
||
deine Ansicht.
|
||
</p>
|
||
|
||
<!-- ==== GRÖSSE UND ECKE DER KAMERAS ===================
|
||
Zwischen „Video groß" (208 px) und „Kameras groß"
|
||
(380 px) gab es nichts. Für eine Sendung, in der zwei
|
||
Leute reden, ist das eine zu klein und das andere
|
||
verdeckt das Video. -->
|
||
<!-- ==== WAS BEIM TEILEN ZU ERWARTEN IST ===============
|
||
Das gehört an die Bedienung und nicht in eine Hilfe:
|
||
Wer es erst erfährt, nachdem im Stream zehn Minuten ein
|
||
schwarzes Rechteck stand, erfährt es zu spät. -->
|
||
<h3 class="pult__ueber">Bildschirm teilen</h3>
|
||
<p class="pult__klein">
|
||
Der Knopf sitzt unten in der Senderleiste. Geteilt wird
|
||
statt deiner Kamera — dein Bildschirm läuft dann in deinem
|
||
Fenster, und mit „Kameras groß“ oder „Nur Kamera“ füllt er
|
||
die ganze Fläche.
|
||
</p>
|
||
<p class="pult__klein" id="teilen-hinweis">
|
||
<strong>Netflix, Disney+ und Prime bleiben schwarz.</strong>
|
||
Das ist keine Einstellung, sondern ihr Kopierschutz — auf
|
||
Discord und Zoom ist es genauso. Und einen Film
|
||
weiterzusenden wäre eine öffentliche Wiedergabe. Gedacht
|
||
ist das Teilen für dein Spiel, dein Schnittprogramm, OBS
|
||
oder eine Webseite.
|
||
</p>
|
||
|
||
<h3 class="pult__ueber">Kamerafenster</h3>
|
||
<div class="kamerawahl">
|
||
<div class="kamerawahl__teil">
|
||
<span class="kamerawahl__wort">Größe</span>
|
||
<div class="kamgroesse" id="kamgroesse" role="group"
|
||
aria-label="Größe der Kamerafenster"></div>
|
||
</div>
|
||
<div class="kamerawahl__teil">
|
||
<span class="kamerawahl__wort">Ecke</span>
|
||
<div class="kamecke" id="kamecke" role="group"
|
||
aria-label="Ecke der Kamerafenster"></div>
|
||
</div>
|
||
</div>
|
||
<p class="pult__klein" id="kamecke-hinweis">
|
||
Die Ecke gilt bei „Video groß“ — sonst stehen die Fenster
|
||
in der Mitte.
|
||
</p>
|
||
|
||
<!-- ==== FÜR OBS UND TIKTOK STUDIO ====================
|
||
Drei Adressen, drei Aufgaben. Sie stehen hier und nicht
|
||
in einem eigenen Register: „Bild" ist die Frage, was zu
|
||
sehen ist und wie es hinausgeht. -->
|
||
<h3 class="pult__ueber">Für OBS & TikTok Studio
|
||
<span class="pult__klein" id="obs-quellen">–</span></h3>
|
||
<div class="quellen" id="quellen"></div>
|
||
<p class="pult__klein" id="obs-hinweis">
|
||
In OBS: <strong>Quelle → Browser</strong>, Adresse einfügen,
|
||
1920 × 1080. Deine eigene Kamera nimmst du in OBS direkt als
|
||
Gerät — das ist schärfer und du kannst sie frei schieben und
|
||
größer ziehen.
|
||
</p>
|
||
<button type="button" class="knopf-still" id="obs-neu">Schlüssel neu erzeugen</button>
|
||
</section>
|
||
|
||
<!-- ==== Gestaltung ==================================== -->
|
||
<section class="pult-tafel" data-tafel="gestaltung" role="tabpanel" hidden
|
||
id="tafel-gestaltung" aria-labelledby="reiter-gestaltung">
|
||
<!-- ==== DIE DOGEN-MÜNZEN ===============================
|
||
Filipe: „ich werde die drei varianten schicken für
|
||
niedrige spenden. mittlere und hohe spenden. alle drei
|
||
varianten will ich drauf so dass ich sie aussuchen kann
|
||
wie ich will."
|
||
|
||
Drei Sätze zu je drei Münzen. Welche gilt, entscheidet
|
||
die Stufe, in die eine Spende fällt — links die
|
||
niedrige, rechts die hohe. -->
|
||
<h3 class="pult__ueber">Die Dogen-Münzen</h3>
|
||
<div class="muenzwahl" id="muenzwahl" role="group"
|
||
aria-label="Münzsatz auswählen"></div>
|
||
<div class="zeichenwahl__tun">
|
||
<label class="stufe-tun" id="zeichen-hoch">Eigenes Zeichen hochladen
|
||
<input type="file" id="zeichen-datei" hidden
|
||
accept="image/jpeg,image/png,image/webp" />
|
||
</label>
|
||
<button type="button" class="stufe-tun stufe-tun--weg"
|
||
id="zeichen-weg" hidden>Eigenes Zeichen weg</button>
|
||
</div>
|
||
<p class="pult__klein">
|
||
Die Münze steht neben jeder Zahl und groß auf der Karte —
|
||
im Saal wie im Stream. Welche von den dreien, entscheidet
|
||
die Höhe der Spende: die Stufenleiter darunter wird dafür
|
||
in Drittel geteilt.
|
||
</p>
|
||
|
||
<h3 class="pult__ueber">Wie eine Spende aussieht</h3>
|
||
<p class="pult__klein">
|
||
Je Stufe: ab wie vielen Dogen sie gilt, wie sie heißt,
|
||
welches Zeichen, welche Farbe, wie lange sie steht und wie
|
||
groß. Eine Spende bekommt immer die höchste Stufe, die auf
|
||
sie passt.
|
||
</p>
|
||
<div class="stufen" id="stufen"></div>
|
||
<div class="pult__zeile">
|
||
<button type="button" class="knopf-still" id="stufe-neu">Stufe dazu</button>
|
||
<button type="button" class="knopf-still knopf-still--haupt"
|
||
id="stufen-sichern">Übernehmen</button>
|
||
<span class="pult__klein" id="stufen-stand"></span>
|
||
</div>
|
||
<p class="pult__klein">
|
||
„Ausprobieren“ zeigt dir eine Karte — nur bei dir, und es wird
|
||
keine Spende daraus. Im Saal sieht das niemand.
|
||
</p>
|
||
</section>
|
||
|
||
<!-- ==== Spenden ======================================= -->
|
||
<!-- ==== DIE WERBEEINBLENDUNG ==============================
|
||
Filipe: „ich will dass du auch perfektionierst dass ich
|
||
einen banner durchlaufen kann, oder erscheinen lassen
|
||
kann mit werbung drauf."
|
||
|
||
ZWEI TEILE, UND DAS MIT ABSICHT: oben das Band mit dem
|
||
Text, unten die zwei Bilder in den Ecken. Sie in einen
|
||
Kasten zu legen waere kuerzer gewesen und falsch -- ein
|
||
Wasserzeichen und eine Laufschrift haben nichts
|
||
miteinander zu tun ausser dem Ort. -->
|
||
<section class="pult-tafel" data-tafel="werbung" role="tabpanel" hidden
|
||
id="tafel-werbung" aria-labelledby="reiter-werbung">
|
||
|
||
<h3 class="pult__ueber">Das Band</h3>
|
||
<div class="bandart-reihe" id="bandart-reihe"></div>
|
||
<p class="pult__klein" id="bandart-satz">
|
||
Ein Rabattcode gehört in den Wechsel: Wer „DOGI10“ lesen
|
||
will, während es nach links wandert, hat es gesehen und
|
||
nicht behalten.
|
||
</p>
|
||
|
||
<div class="pult__feld" id="bandtempo-feld">
|
||
<label class="pult__wort" for="bandtempo">Wie lange</label>
|
||
<div class="bandtempo-reihe" id="bandtempo-reihe"></div>
|
||
<p class="pult__klein">
|
||
Beim Laufband für einen ganzen Durchlauf, beim Wechsel je
|
||
Botschaft.
|
||
</p>
|
||
</div>
|
||
|
||
<h3 class="pult__ueber">Die Botschaften</h3>
|
||
<ul class="bandliste" id="bandliste"></ul>
|
||
|
||
<div class="pult__feld">
|
||
<label class="pult__wort" for="band-neu">Neue Botschaft</label>
|
||
<input type="text" id="band-neu" class="pult__eingabe"
|
||
maxlength="90" placeholder="vans-diy-bastelbedarf.com" />
|
||
<input type="text" id="band-neu-unter" class="pult__eingabe"
|
||
maxlength="60" placeholder="Rabattcode DOGI10 — Häkelbedarf" />
|
||
<div class="bandbild-reihe" id="bandbild-reihe"></div>
|
||
<button type="button" class="knopf-still" id="band-anlegen">
|
||
Botschaft hinzufügen
|
||
</button>
|
||
<p class="pult__klein">
|
||
Ein Wort in Großbuchstaben mit einer Ziffer darin wird als
|
||
Code hervorgehoben — „DOGI10“ bekommt einen Rahmen,
|
||
„VANVAN“ nicht.
|
||
</p>
|
||
</div>
|
||
|
||
<h3 class="pult__ueber">Die Bilder in den Ecken</h3>
|
||
<div class="eckenwahl" id="eckenwahl-dogi"
|
||
aria-label="Wo der Husky steht"></div>
|
||
<div class="eckenwahl" id="eckenwahl-hase"
|
||
aria-label="Wo der Häkelhase steht"></div>
|
||
|
||
<div class="pult__feld">
|
||
<label class="pult__wort">Wie groß</label>
|
||
<div class="eckengroesse-reihe" id="eckengroesse-reihe"></div>
|
||
</div>
|
||
|
||
<p class="pult__klein">
|
||
Beides läuft auch in OBS mit — die Adressen dafür stehen im
|
||
Register <strong>Bild</strong>. Links und rechts mittig gibt
|
||
es mit Absicht nicht: Dort liegen bei jedem Videodienst die
|
||
Bedienelemente.
|
||
</p>
|
||
</section>
|
||
|
||
<section class="pult-tafel" data-tafel="spenden" role="tabpanel" hidden
|
||
id="tafel-spenden" aria-labelledby="reiter-spenden">
|
||
|
||
<!-- VON HAND EINTRAGEN. Der Weg, der immer geht: Die
|
||
PayPal-Meldung steht auf dem Handy, der Betrag ist in
|
||
drei Sekunden eingetippt, die Karte läuft sofort. -->
|
||
<div class="pult__zeile">
|
||
<label class="pult__feld pult__feld--kurz">
|
||
<!-- Der Preis steht IM Feldnamen und nicht darunter: Beim
|
||
Eintragen liest man die Zahl von der Zahlungsmeldung
|
||
ab, und die Umrechnung muss in derselben Zeile
|
||
stehen, in der man tippt. -->
|
||
<span>Dogen <span class="preis" id="sp-preis"></span></span>
|
||
<input type="text" id="sp-betrag" inputmode="decimal" placeholder="0,5" />
|
||
</label>
|
||
<label class="pult__feld">
|
||
<span>Name auf der Karte</span>
|
||
<input type="text" id="sp-name" maxlength="40" placeholder="Wer hat gegeben?" />
|
||
</label>
|
||
<!-- WEM DIE DOGEN GEHÖREN. Freiwillig: Steht auf der
|
||
Zahlungsmeldung nur ein Vorname, wäre eine zugeordnete
|
||
Person geraten — und geratene Punkte sind schlimmer
|
||
als keine. -->
|
||
<label class="pult__feld pult__feld--kurz">
|
||
<span>Punkte für</span>
|
||
<select id="sp-wem"></select>
|
||
</label>
|
||
<label class="pult__feld">
|
||
<span>Gruß (freiwillig)</span>
|
||
<input type="text" id="sp-gruss" maxlength="140" placeholder="Was dabeistand" />
|
||
</label>
|
||
<button type="button" class="knopf-still" id="sp-zeigen">Zeigen</button>
|
||
</div>
|
||
|
||
<h3 class="pult__ueber">Wartet auf dich <span class="pult__klein" id="sp-offen-zahl">0</span></h3>
|
||
<ol class="spendenliste" id="sp-offen"></ol>
|
||
|
||
<h3 class="pult__ueber">Zuletzt gezeigt</h3>
|
||
<ol class="spendenliste spendenliste--still" id="sp-letzte"></ol>
|
||
|
||
<!-- WER WIE VIELE DOGEN HAT. Nur hier, nur für die Leitung.
|
||
Öffentlich wäre es eine Rangliste darüber, wer wie viel
|
||
gibt — und wer wenig geben kann, stünde jeden Abend
|
||
darin. -->
|
||
<h3 class="pult__ueber">Dogen im Rudel</h3>
|
||
<ol class="dogenliste" id="sp-staende"></ol>
|
||
|
||
<p class="pult__klein" id="sp-hinweis"></p>
|
||
</section>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ==== DER TRANSPORT — EINE EIGENE ZEILE UNTER ALLEM =========
|
||
Er lag im Register „Sendung" und war damit weg, sobald man auf
|
||
„Ton" oder „Spenden" ging. Der Play-Knopf ist aber der eine,
|
||
den man mitten in einer Sendung blind treffen muss — er gehört
|
||
nicht in ein Register, sondern unter den Saal.
|
||
|
||
Damit steht er auch bei ZUGEKLAPPTER Regie zur Verfügung. -->
|
||
<div class="transport" id="transport" hidden>
|
||
<div class="transport__schiene">
|
||
<input type="range" class="spur__schiene" id="v-band" min="0" max="1000" value="0"
|
||
step="1" aria-label="Stelle im Video" />
|
||
<span class="spur__zeit" id="v-zeit">0:00 / 0:00</span>
|
||
</div>
|
||
|
||
<div class="transport__reihe">
|
||
<!-- ==== DIE TASTEN STEHEN AM KNOPF ===================
|
||
Früher stand hier nichts und dafür eine Legende am Ende
|
||
der Regie — hinter allen Registern, also auch unter
|
||
„Ton" und „Spenden", wo keines dieser Kürzel etwas tut.
|
||
Eine Legende zwingt außerdem dazu, vom Knopf zur Liste zu
|
||
schauen und zurück. Am Knopf liest man die Taste beim
|
||
Bedienen und lernt sie dabei. -->
|
||
<!-- DIE GRUPPE KLAPPT AM FINGERGERAET HINTER IHREN WERT.
|
||
Sechs Knoepfe zu je 44 Pixeln passen auf 320 px nicht in
|
||
eine Zeile; umgebrochen kosteten sie die Transportleiste
|
||
rund 90 Pixel Hoehe — und die fehlten dem Bild. Der Knopf
|
||
zeigt, was gerade gilt, damit man zum Nachsehen nicht
|
||
aufklappen muss. Am Rechner gibt es ihn nicht, dort steht
|
||
die Gruppe offen. -->
|
||
<div class="transport__teil transport__teil--links" id="tempo-teil" data-auf="zu">
|
||
<button type="button" class="tempo__auf" id="tempo-auf"
|
||
aria-expanded="false" aria-controls="tempo"
|
||
aria-label="Geschwindigkeit ein- und ausklappen">1×</button>
|
||
<span class="transport__wort">Tempo <kbd>+</kbd><kbd>−</kbd></span>
|
||
<div class="tempo" id="tempo" role="group" aria-label="Geschwindigkeit"></div>
|
||
</div>
|
||
|
||
<div class="transport__teil transport__teil--mitte">
|
||
<button type="button" class="spur__knopf" id="v-zurueck"
|
||
title="10 Sekunden zurück (Pfeil links)">−10 <kbd>←</kbd></button>
|
||
<button type="button" class="spur__knopf spur__knopf--gross" id="v-spiel"
|
||
title="Abspielen und Pause (Leertaste)">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true" id="v-spiel-bild"><path d="M8 5h3v14H8zm5 0h3v14h-3z" /></svg>
|
||
</button>
|
||
<button type="button" class="spur__knopf" id="v-vor"
|
||
title="10 Sekunden vor (Pfeil rechts)">+10 <kbd>→</kbd></button>
|
||
<!-- Die Leertaste steht UNTER dem runden Knopf und nicht
|
||
darin: Ein Wort in einem runden Knopf von 58 Pixeln
|
||
passt nicht, und der Knopf soll das Zeichen bleiben,
|
||
das man blind trifft. -->
|
||
<span class="transport__taste"><kbd>Leertaste</kbd></span>
|
||
</div>
|
||
|
||
<div class="transport__teil transport__teil--rechts">
|
||
<span class="transport__wort">Weiter</span>
|
||
<button type="button" class="spur__knopf spur__knopf--tausch" id="v-tauschen"
|
||
hidden title="Zwischen den beiden Videos wechseln">
|
||
Wechseln zu <span id="v-tausch-titel">…</span> <kbd>T</kbd>
|
||
</button>
|
||
<button type="button" class="spur__knopf spur__knopf--weiter" id="v-naechstes"
|
||
title="Nächstes Video aus der Warteschlange">Nächstes <kbd>N</kbd></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<!-- bereiche.js VOR kopf.js: Dort steht `window.Bereiche`, und kopf.js
|
||
liest daraus die Leitungsrollen. -->
|
||
<script src="assets/js/bereiche.js?v=202610011216" defer></script>
|
||
<script src="assets/js/wahl.js?v=202610011216" defer></script>
|
||
<script src="assets/js/nachfrage.js?v=202610011216" defer></script>
|
||
<script src="assets/js/meldung.js?v=202610011216" defer></script>
|
||
<script src="assets/js/installieren.js?v=202610011216" defer></script>
|
||
<script src="assets/js/kopf.js?v=202610011216" defer></script>
|
||
<script src="assets/js/glocke.js?v=202610011216" defer></script>
|
||
<script src="assets/js/spendenkarte.js?v=202610011216" defer></script>
|
||
<script src="assets/js/werbung.js?v=202610011216" defer></script>
|
||
<script src="assets/js/reaktion.js?v=202610011216" defer></script>
|
||
</body>
|
||
</html>
|