Files
dogfather-universe/workspace/tafel.html
T
DogFatherGitandClaude Opus 5 a1c2d49260 Drei Bilder konnte man schon -- nur sagte es niemand
Filipes Frage: „koennen die leute auch schon mehrere fotos schicken
wenn die im support was melden wollen?"

Technisch seit dem 02.10. (VanVans Meldung #11), und heute mehrfach
am laufenden Server nachgemessen. Beim Nachsehen auf der SEITE stand
aber:

    Knopf:       „Bild anhängen"          -- Einzahl
    Unterzeile:  „häng ein Bild dran"     -- Einzahl
    daneben:     (nichts)

Wer nicht zufaellig ein zweites Mal auf den Knopf tippt, schickt
eines. Aus seiner Sicht waere VanVans Meldung ungeloest -- und er
haette recht.

EINE MOEGLICHKEIT, VON DER MAN NICHTS WEISS, GIBT ES NICHT. Das ist
dieselbe Sorte wie ein Knopf, der eine Absage holt, nur andersherum:
Dort verspricht die Oberflaeche zu viel, hier zu wenig. Beides
kostet denselben Menschen dieselbe Zeit.

GEAENDERT

    Knopf:       „Bilder anhängen"
    Unterzeile:  „häng Bilder dran"
    daneben:     „bis zu 3 Bilder"        -- bevor man etwas waehlt
    nach einem:  „eins.png · 24 KB · noch 2 möglich"

Die letzte Zeile ist die wichtigere von beiden: „eins.png · 24 KB"
allein sagt nicht, dass ein zweites geht -- und genau an dieser
Stelle hoert jemand auf.

DIE ZAHL KOMMT VOM SERVER (`bilder_max`) und wird neu geschrieben,
sobald sie da ist. Ohne das stuende beim ersten Laden der
Vorgabewert dort -- heute zufaellig derselbe, morgen vielleicht
nicht. Eine Zahl, die zufaellig stimmt, ist keine Auskunft.

GEPRUEFT -- pruef-support-bilder 52 -> 56 ok

    der Knopf steht in der Mehrzahl („Bilder anhängen")
    und daneben steht, wie viele gehen („bis zu 3 Bilder")
    auch die Unterzeile sagt nicht mehr „ein Bild"
    und daneben steht, dass noch Platz ist
      („eins.png · 0 KB · noch 2 möglich")

Dazu gruen: pruef-zeichen 7 · pruef-css-klassen.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-10-03 12:24:50 +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=202610031224" />
<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=202610031224" defer></script>
<script src="assets/js/tafel.js?v=202610031224" defer></script>
</body>
</html>