dogfather-universe/workspace/tafel.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=202610082114" />
<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 STEHEN, ENTSCHEIDET SEIT DEM 08.10.2026 DAS REGIEPULT.
     Die Anordnung kommt aus `spendenkarte.css` über `data-platz`,
     damit Saal und Stream dieselbe Karte an derselben Stelle zeigen
     — hier stand vorher eine zweite, feste Antwort („unten links"),
     und die hätte jede Umstellung im Pult stillschweigend
     überstimmt. `?pos=` in der Adresse bleibt als ausdrückliche
     Ausnahme für eine Szene; das regelt `tafel.js`.

     Hier bleibt nur, was wirklich zu DIESER Quelle gehört: Sie
     liegt fest im Bild und nimmt keine Klicks an. */
  .obs-tafel {
    position: fixed;
    inset: 0;
    gap: 14px;
    padding: 48px;
    pointer-events: none;
  }
  /* Am Rand braucht sie im Stream mehr Abstand als im Saal: Dort
     grenzt sie an eine Bedienleiste, hier an den Bildrand, und ein
     Rand von 18 Pixeln sieht auf 1080 Zeilen aus wie ein Versehen. */
  .obs-tafel[data-platz="rand"] { padding: 48px; }
  /* 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; }

  /* ---- Und in der Mitte als Aufsteller (08.10.2026) --------------
     Dieselben Werte eine Stufe größer. Im Stream ist die Karte in
     der Bildmitte das, was in diesem Augenblick zählt — und sie
     steht dort nur ein paar Sekunden.

     Alles weiterhin in `rem`: Ein einziger Wert am Wurzelelement
     (`&g=` in der Adresse) nimmt damit Schrift, Bild, Polsterung und
     Rundung gleichmäßig mit. */
  .obs-tafel[data-platz="mitte"] .spendenkarte {
    max-width: 26rem;
    padding: 1.6rem 1.8rem 1.7rem;
    border-radius: 1.5rem;
  }
  .obs-tafel[data-platz="mitte"] .spendenkarte__betrag { font-size: 3rem; }
  .obs-tafel[data-platz="mitte"] .spendenkarte__bild { width: 5.6rem; height: 5.6rem; }
  .obs-tafel[data-platz="mitte"] .spendenkarte__wer { font-size: 1.05rem; }
  .obs-tafel[data-platz="mitte"] .spendenkarte__stufe { font-size: .85rem; }
  .obs-tafel[data-platz="mitte"] .spendenkarte__gruss { font-size: 1.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=202610082114" defer></script>
<script src="assets/js/tafel.js?v=202610082114" defer></script>
</body>
</html>