DogFatherGit
079cf8c74f
Filipe: "ich will das alles auch so perfekt dass ich es ganz einfach
und easy mit obs oder mit tiktok studio verbinden kann. also so dass
man dan nur die kamera und das video sieht."
WARUM OHNE ANMELDUNG -- nachgesehen, nicht angenommen
OBS speichert die Anmeldung einer Browser-Quelle NICHT zuverlaessig;
im OBS-Forum stehen dazu Meldungen bis in die aktuelle Fassung 31.
Eine Quelle, bei der man sich nach jedem Programmstart neu anmelden
muss, ist mitten in einer Sendung unbrauchbar.
Deshalb ein SCHLUESSEL in der Adresse -- derselbe Weg, den jedes
Alert-Werkzeug im Netz geht. 32 Byte aus dem Zufall des Systems,
verglichen wird zeitgleich (`timingSafeEqual`): Ein gewoehnlicher
Vergleich bricht beim ersten falschen Zeichen ab, und aus den
Bruchteilen einer Millisekunde laesst sich ein Schluessel Zeichen
fuer Zeichen erraten.
DREI QUELLEN, WEIL DREI DINGE VERSCHIEDEN SIND
buehne.html Das laufende YouTube-Video, auf die Sekunde genau wie
bei allen anderen. Stumm (der Ton kommt aus dem
Mischpult) und ohne jede Bedienung -- was hier zu
sehen ist, geht in den Stream.
DIE EIGENE KAMERA IST ABSICHTLICH NICHT DRIN. Sie ist
in OBS direkt als Geraet verfuegbar, in besserer
Qualitaet und frei in Groesse und Lage -- genau das,
was Filipe will ("meine kamera groesser machen video
kleiner"). Den Umweg ueber den Browser zu nehmen
hiesse, Qualitaet gegen nichts einzutauschen und die
Groesse festzulegen statt sie freizugeben.
tafel.html Nur die Spendenkarten, auf DURCHSICHTIGEM Grund.
Groesse und Lage stehen in der Adresse (`&g=1.6`,
`&pos=or`): Wer in OBS eine Quelle einrichtet, hat die
Adresse ohnehin vor sich -- ein Wert, den man
stattdessen im Regiepult suchen muesste, waere ein
Fensterwechsel mitten im Einrichten. Alles rechnet in
`rem`, ein Wert nimmt Schrift, Bild und Polsterung
gleichmaessig mit.
Buehnenmodus `reaktion.html?nur=buehne` -- dieselbe Seite, nur ohne
alles Bedienbare. Fuer den Fall, dass GAESTE im Bild
sind: Deren Kameras kommen ueber eine
Direktverbindung an, und die braucht eine angemeldete
Seite. Diese eine wird als Fenster aufgenommen.
ES IST DIESELBE SEITE UND NICHT EINE ZWEITE. Eine
eigene muesste Video, Kameras, Verbindungsaufbau und
Nachfuehrung noch einmal enthalten -- und beim
naechsten Umbau saehe eine von beiden anders aus.
WAS HERAUSKOMMT, IST DIE EIGENTLICHE FRAGE
Wer den Schluessel hat, sieht genau das, was ohnehin im Stream
steht: Video, Stand, Sekunde, Titel -- und die Spendenkarten. Kein
Chat, keine Namen von Zusehenden, keine Zahlen ueber das Haus. Die
Pruefung zaehlt die Felder der Auskunft EINZELN auf und weist jedes
verbotene namentlich nach; eine Auskunft, die "ungefaehr das
Richtige" enthaelt, ist bei einem Weg ohne Anmeldung keine.
Ein neuer Schluessel macht die alten Adressen sofort tot -- und
schliesst die laufenden Quellen. Sonst liefe eine mit dem alten
weiter, obwohl er zurueckgezogen ist, und man haelt sich fuer
sicher, ohne es zu sein.
SIE MUESSEN TAGE LAUFEN, OHNE DASS JEMAND HINSIEHT
Das ist der Unterschied zu einer Seite im Browser: Wer eine Seite
offen hat, merkt, wenn sie haengt. Eine Quelle in OBS laeuft im
Hintergrund, und ein Stillstand faellt erst auf, wenn die erste
Spende nicht erscheint -- mitten in der Sendung. Deshalb ein
Lebenszeichen alle 25 Sekunden, eine eigene Wache (70 Sekunden ohne
alles = neu verbinden) und ein sofortiger Neuaufbau, wenn der
Rechner aus dem Ruhezustand kommt.
Und: Ein Fehler wird angezeigt, aber nur der, der etwas bedeutet --
ein falscher Schluessel. Alles andere bleibt still, weil jede
Flaeche hier im Stream zu sehen waere.
ZWEI EIGENE FEHLER, BEIDE VON DER MESSUNG GEFUNDEN
1. Die Quellen kamen mit 401 zurueck, obwohl die Seiten laengst
geladen waren: `aufgabenRouter` haengt eine Schranke ueber ALLE
Pfade unter /workspace/api. Genau dafuer stehen `sicherungRouter`
und der Weg fuers Profilbild schon davor -- die Buehne ist der
dritte Fall derselben Art und steht jetzt dort.
2. `waitUntil: "networkidle"` auf einer Seite mit Ereignisstrom. Der
Strom endet absichtlich nie; die Messung wartete auf einen
Zustand, der nicht eintreten kann, und brach nach 30 Sekunden ab.
Dieselbe Falle wie am 06.09. beim Regressionslauf.
ZWEI PRUEFUNGEN WURDEN DABEI GENAUER
`pruef-struktur` verlangte von den zwei OBS-Quellen ein Symbol fuer
den Startbildschirm, ein Manifest und eine Leistenfarbe. Sie
laufen in einem Programmfenster und werden nie installiert -- sie
fallen aus dieser Frage heraus, benannt und mit Grund.
Die Namensstreit-Regel zaehlte jede Klasse, die irgendwo in einem
Selektor vorkommt. Damit galt auch
`body[data-nur="buehne"] .kopfleiste { display: none }` als eigene
Klasse -- dabei ist das das Gegenteil: eine absichtliche
Bezugnahme, um sie im Buehnenmodus wegzunehmen. Gezaehlt wird
jetzt nur, was am ANFANG einer Regel steht, also als eigenes
Bauteil gemeint ist. Mit Gegenprobe in beide Richtungen -- sonst
haette ich eine Regel nur so lange geschaerft, bis sie schweigt.
GEMESSEN
mess-buehne (neu) Ein Browserfenster OHNE jeden Keks: beide
Quellen arbeiten, 0 Kekse, Grund durchsichtig
(rgba(0,0,0,0)), Karte laeuft an (25 EUR,
Rudel-Legende, 348x178). Falscher Schluessel: kein
Inhalt, Grund im Bild. Neuer Schluessel: alter 404,
neuer 200. Buehnenmodus: Kopf, Chat, Pult und
Schild weg, Leinwand da, Saal 720 von 720.
pruef-buehne (neu) 36 Punkte, 0 Fehler
pruef-reaktion 156 (war 154), spenden 46, haus-trennung 100,
haus-seiten 38, struktur 35, css-klassen 33,
verborgen 25, rechtetafel 19, portnummern 15,
ports 8 -- alle 0 Fehler.
500 lines
24 KiB
HTML
500 lines
24 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=202609280908" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609280908" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609280908" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609280908" />
|
||
<link rel="stylesheet" href="assets/css/reaktion.css?v=202609280908" />
|
||
<link rel="stylesheet" href="assets/css/spendenkarte.css?v=202609280908" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609280908" />
|
||
<link rel="stylesheet" href="assets/css/haus.css?v=202609280908" />
|
||
</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">
|
||
|
||
<!-- ============ 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 ============================================== -->
|
||
<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>
|
||
|
||
<!-- 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>
|
||
<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>
|
||
</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>
|
||
|
||
<!-- 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="stufen" id="chat-stufen" hidden role="group" aria-label="Wer schreiben darf">
|
||
<button type="button" class="stufe" data-modus="offen" aria-pressed="true">Offen</button>
|
||
<button type="button" class="stufe" data-modus="team" aria-pressed="false">Team</button>
|
||
<button type="button" class="stufe" 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">Anderer Betrag …</a>
|
||
|
||
<!-- Erscheint erst, wenn jemand einen Betrag 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>
|
||
<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>
|
||
</div>
|
||
</aside>
|
||
|
||
|
||
</section>
|
||
|
||
<!-- ============ 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 Register --------------------------------------- -->
|
||
<div class="pult__innen" id="pult-innen">
|
||
<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="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>
|
||
</div>
|
||
|
||
<!-- ==== Sendung ======================================== -->
|
||
<section class="pult-tafel" data-tafel="sendung" role="tabpanel"
|
||
id="tafel-sendung" aria-labelledby="reiter-sendung">
|
||
|
||
<!-- DIE VIDEOSPUR. Vorher gab es für das laufende Video im
|
||
Pult überhaupt keine Bedienung — wer spulen wollte,
|
||
musste in das YouTube-Bild fassen, und was dort passiert,
|
||
passiert nur bei einem selbst. -->
|
||
<div class="spur" id="spur">
|
||
<div class="spur__kopf">
|
||
<span class="spur__marke" id="spur-marke">Läuft</span>
|
||
<strong class="spur__titel" id="spur-titel">Noch kein Video eingetragen</strong>
|
||
</div>
|
||
<div class="spur__band">
|
||
<button type="button" class="spur__knopf" id="v-zurueck" title="10 Sekunden zurück">−10</button>
|
||
<button type="button" class="spur__knopf spur__knopf--gross" id="v-spiel" title="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">+10</button>
|
||
<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>
|
||
<button type="button" class="spur__knopf spur__knopf--weiter" id="v-naechstes"
|
||
title="Nächstes Video aus der Warteschlange">Nächstes</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pult__zeile">
|
||
<label class="pult__feld">
|
||
<span>Titel der Sendung</span>
|
||
<input type="text" id="p-titel" maxlength="120" placeholder="Worum geht es?" />
|
||
</label>
|
||
<label class="pult__feld">
|
||
<span>YouTube</span>
|
||
<input type="text" id="p-video" placeholder="Adresse oder Kennung einfügen" />
|
||
</label>
|
||
</div>
|
||
<div class="pult__zeile">
|
||
<label class="pult__feld">
|
||
<span>Vorschaubild</span>
|
||
<input type="text" id="p-vorschau" placeholder="Adresse eines Bildes (freiwillig)" />
|
||
</label>
|
||
<label class="pult__feld pult__feld--kurz">
|
||
<span>Beginn</span>
|
||
<input type="datetime-local" id="p-beginn" />
|
||
</label>
|
||
<button type="button" class="knopf-still" id="p-sichern">Übernehmen</button>
|
||
</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">
|
||
Die Anordnung gilt für alle — sie ist Teil der Sendung, nicht
|
||
deine Ansicht.
|
||
</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>
|
||
|
||
<!-- ==== Spenden ======================================= -->
|
||
<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">
|
||
<span>Betrag</span>
|
||
<input type="text" id="sp-betrag" inputmode="decimal" placeholder="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>
|
||
<label class="pult__feld">
|
||
<span>Gruß (freiwillig)</span>
|
||
<input type="text" id="sp-gruss" maxlength="200" 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>
|
||
|
||
<p class="pult__klein" id="sp-hinweis"></p>
|
||
</section>
|
||
|
||
<!-- EIN KÜRZEL, DAS NIEMAND KENNT, IST KEINS. Deshalb steht es
|
||
dort, wo gearbeitet wird, und nicht in einer Hilfe. -->
|
||
<p class="kuerzel">
|
||
<kbd>Leertaste</kbd> Pause · <kbd>←</kbd><kbd>→</kbd> 10 s ·
|
||
<kbd>M</kbd> Mikro · <kbd>N</kbd> Nächstes · <kbd>1</kbd><kbd>2</kbd><kbd>3</kbd> Anordnung
|
||
</p>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- bereiche.js VOR kopf.js: Dort steht `window.Bereiche`, und kopf.js
|
||
liest daraus die Leitungsrollen. -->
|
||
<script src="assets/js/bereiche.js?v=202609280908" defer></script>
|
||
<script src="assets/js/wahl.js?v=202609280908" defer></script>
|
||
<script src="assets/js/nachfrage.js?v=202609280908" defer></script>
|
||
<script src="assets/js/meldung.js?v=202609280908" defer></script>
|
||
<script src="assets/js/installieren.js?v=202609280908" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609280908" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609280908" defer></script>
|
||
<script src="assets/js/spendenkarte.js?v=202609280908" defer></script>
|
||
<script src="assets/js/reaktion.js?v=202609280908" defer></script>
|
||
</body>
|
||
</html>
|