Files
dogfather-universe/workspace/tafel.html
T
DogFatherGitandClaude Opus 5 48689e28ac Teilen-Seite kann nicht mehr stumm haengen bleiben
Filipe: "ich lade video hoch und es erscheint immer noch nicht" --
auf Nachfrage: die Seite bleibt haengen, es kommt KEINE Meldung.

WAS GEMESSEN WURDE, bevor etwas angefasst wurde:

  Server zwischen 08:41 und der Meldung   unveraendert, ein Neustart
  Seine Sitzungen                          gueltig, Android-App
  TikTok-Abruf vom Server                  200, auch fuer Kurzlinks
  Seite, Skript, alle 14 Elemente          live auf beiden Adressen
  Service Worker                           speichert nichts zwischen
  Manifeste (beide)                        gueltig, share_target da
  Protokoll heute                          kein video_eingelesen
  Teilen-Weg nachgespielt (mess-teilen)    201, Eintrag, Erfolgssatz

Aus den Caddy-Protokollen ausserdem: Die Handy-Apps laufen auf crew.
(85 Android, 18 iPhone), auf der Agenturadresse fast nur Windows.
Der Riegel von heute Mittag trifft ihn also nicht.

DIE URSACHE IST DAMIT NICHT GEFUNDEN -- aber ein eigener Mangel
schon, und der ist der Grund, warum die Suche so lange gedauert hat:
`los()` baut die Seite auf und macht dabei keine einzige Netzanfrage.
Es kann also nur stolpern, nicht warten. Und wenn es stolpert, wird
`ladezeile.hidden = true` nie erreicht -- die Seite steht fuer immer
auf "wird geladen". Kein Fehler, kein Hinweis, nichts zum
Weitermelden, und von aussen nicht zu unterscheiden von "der Server
antwortet nicht".

Eine Seite, die nicht sagen kann, dass sie kaputt ist, kostet jeden
Fehler doppelt: einmal den Fehler und einmal die Suche danach.

Jetzt nennt sie den Grund im Klartext, oeffnet das Feld zum
Einfuegen von Hand und haengt den Knopf daran -- eine Meldung ohne
Ausweg waere nur ein Trost. Beim naechsten Versuch steht also da,
woran es liegt.

GEGENPROBE GEFAHREN, und sie hat zuerst mich korrigiert: Der erste
Versuch tauschte die Kennung im HTML unterwegs aus und kam nie an --
die Seite lud normal, der Browser meldete nichts, und die Messung
schloss daraus "die Sicherung greift nicht". Eine Gegenprobe, die
ihren eigenen Schaden nicht anrichtet, misst gar nichts. Jetzt wird
`document.getElementById` vor jedem Skript ersetzt, genau das, was
`$` benutzt. Ergebnis: Ladezeile weg, Meldung "Probe: Element fehlt",
Einfuegefeld offen.

mess-teilen.mjs neu: spielt den Teilen-Weg einmal heil und einmal
zerstoert durch.

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