Files
dogfather-universe/workspace/tafel.html
T
DogFatherGitandClaude Opus 5 dc5e6a0c24 Reaktion: das Chatfeld bekommt einen Namen
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]>
2026-10-01 12:24:46 +02:00

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=202610011216" />
<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=202610011216" defer></script>
<script src="assets/js/tafel.js?v=202610011216" defer></script>
</body>
</html>