DogFatherGitandClaude Opus 5
813d2e85a1
Filipe, 28.09.2026: "das soll nicht ueberall sein sondern da perfekt
integriert werden."
Er hat recht: Die Legende war ein eigener Absatz am Ende der Regie --
hinter ALLEN Registern. Damit stand sie unter "Ton", unter "Spenden",
unter "Gestaltung", also an sechs Stellen, an denen keines ihrer
Kuerzel etwas tut. Eine Legende, die ueberall steht, gehoert nirgends
hin.
Und eine Legende ist ohnehin der Umweg: Sie zwingt dazu, vom Knopf zu
einer Liste zu schauen und zurueck. Steht die Taste AM Knopf, liest
man sie beim Bedienen -- und lernt sie dabei.
Leertaste unter dem runden Play-Knopf (ein Wort passt nicht
hinein, und der Knopf soll das Zeichen bleiben, das man
blind trifft)
Pfeile an -10 und +10
+ und - am Wort "Tempo"
N an "Naechstes"
T an "Wechseln"
M am Mikro-Knopf in der Senderleiste
1 bis 5 bei der Anordnung im Register "Bild"
Nichts geht verloren, jedes steht dort, wo es wirkt.
UND DIE PRUEFUNG STELLT EINE ANDERE FRAGE ALS VORHER. Sie pruefte, ob
ein Kuerzel IRGENDWO in der Legende steht. Jetzt prueft sie, ob es am
RICHTIGEN Knopf steht -- ein Kuerzel an der falschen Stelle ist
schlimmer als keins. Dazu eine Gegenprobe, dass die alte Legende
wirklich weg ist: Stuende beides da, pflegte beim naechsten Kuerzel
jemand nur eine der beiden Stellen.
Der Chat bleibt unveraendert: Er liegt in `#teil-live` und erscheint
damit nur, wenn die Sendung laeuft -- so, wie Filipe es erwartet hat.
pruef-reaktion 379/0 - pruef-css-klassen ok - pruef-tippziele 11/0
Co-Authored-By: Claude Opus 5 <[email protected]>
87 lines
3.2 KiB
HTML
87 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Spendentafel</title>
|
|
<!-- ======================================================================
|
|
DIE SPENDENTAFEL FÜR OBS UND TIKTOK STUDIO (28.09.2026)
|
|
|
|
Eine Browser-Quelle, die nichts zeigt als die Spendenkarten — auf
|
|
DURCHSICHTIGEM Grund, damit sie über dem Bild liegen kann.
|
|
|
|
KEINE ANMELDUNG, SONDERN EIN SCHLÜSSEL. OBS speichert die
|
|
Anmeldung einer Browser-Quelle nicht zuverlässig; eine Quelle,
|
|
bei der man sich nach jedem Programmstart neu anmelden muss, ist
|
|
mitten in einer Sendung unbrauchbar. Ohne gültigen Schlüssel
|
|
antwortet der Server mit 404 und diese Seite bleibt leer.
|
|
|
|
SIE ZEIGT NUR, WAS OHNEHIN IM STREAM STEHT: Betrag, Name, Gruß,
|
|
Stufe. Kein Chat, keine Namen von Zusehenden, keine Bedienung.
|
|
|
|
In OBS: Quelle → Browser → diese Adresse, Breite 1920, Höhe 1080,
|
|
„Eigenes CSS" leer lassen (der Grund ist schon
|
|
durchsichtig).
|
|
====================================================================== -->
|
|
<link rel="stylesheet" href="assets/css/spendenkarte.css?v=202609282051" />
|
|
<style>
|
|
/* DURCHSICHTIG BIS AUF DIE KARTEN. OBS legt die Quelle über das
|
|
Bild; jede Fläche, die hier steht, deckt dort etwas zu. */
|
|
html, body {
|
|
margin: 0; padding: 0;
|
|
background: transparent;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
|
|
}
|
|
/* Der Kasten für die Karten füllt das Bild. Wo sie erscheinen,
|
|
entscheidet die Ausrichtung — unten links, wie im Saal. */
|
|
.obs-tafel {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
align-items: flex-start;
|
|
gap: 14px;
|
|
padding: 48px;
|
|
pointer-events: none;
|
|
}
|
|
/* Auf der Bühne darf sie größer sein als im Saal: Hier deckt sie
|
|
nichts zu, was man lesen müsste. */
|
|
/* ALLES IN rem. Ein einziger Wert am Wurzelelement (`&g=` in der
|
|
Adresse) nimmt damit Schrift, Bild, Polsterung und Rundung
|
|
gleichmäßig mit. In Pixeln wäre das die Sorte Zahl, die man an
|
|
zwölf Stellen nachziehen muss. */
|
|
.obs-tafel .spendenkarte {
|
|
max-width: 34rem;
|
|
gap: .9rem;
|
|
padding: .85rem 1.3rem .85rem .9rem;
|
|
border-radius: 1.15rem;
|
|
}
|
|
.obs-tafel .spendenkarte__betrag { font-size: 2.1rem; }
|
|
.obs-tafel .spendenkarte__bild { width: 3.6rem; height: 3.6rem; }
|
|
.obs-tafel .spendenkarte__wer { font-size: .95rem; }
|
|
.obs-tafel .spendenkarte__stufe { font-size: .8rem; }
|
|
.obs-tafel .spendenkarte__gruss { font-size: 1rem; }
|
|
|
|
/* Steht hier gar nichts, ist das der Normalfall — keine Spende,
|
|
keine Karte. Ein Hinweis darauf wäre im Stream zu sehen. */
|
|
.obs-fehler {
|
|
position: fixed; left: 16px; top: 16px;
|
|
padding: 10px 14px;
|
|
border-radius: 10px;
|
|
background: rgba(140, 20, 30, .9);
|
|
color: #fff;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="obs-tafel spendentafel" id="tafel" aria-live="polite"></div>
|
|
|
|
<script src="assets/js/spendenkarte.js?v=202609282051" defer></script>
|
|
<script src="assets/js/tafel.js?v=202609282051" defer></script>
|
|
</body>
|
|
</html>
|