DogFatherGitandClaude Opus 5
f18ab32f8c
Filipe: "ich will dass es da in der mitte eine trennung gibt. links sollen normale creator sein und rechts premium creator. es gibt bei tiktok naemlich diese zwei optionen von streamer ... auch dass wenn man die eintraegt soll man aussuchen koennen." Jede Stufe der Pipeline hat jetzt zwei Spalten mit einer Trennlinie dazwischen. Die Trennung sitzt IN der Stufe, nicht einmal ueber der ganzen Seite: Zwei komplette Pipelines nebeneinander haetten jede Stufenueberschrift verdoppelt und die beiden Seiten waeren nie auf gleicher Hoehe gewesen. GENAU ZWEI WERTE, kein "weiss nicht". Anders als bei `netzwerk`, wo "noch nicht gefragt" eine eigene gueltige Antwort ist: Dort wird eine fremde Tatsache festgehalten, hier eine eigene Absicht -- und deren Normalfall ist "normal". NULL wird als "normal" gelesen, der eine vorhandene Lead steht damit links, ohne dass ihm etwas unterstellt wird. DIE ART UEBERLEBT DIE UEBERGABE. Beim Creator-Onboarding wandert sie auf die Person und ist in der Personenverwaltung aenderbar. Ohne das endet die Angabe genau dort, wo sie zum ersten Mal vertraglich zaehlt. Die Schwelle misst den STUFENKASTEN (@container), nicht das Fenster -- der Fehler vom 06.09.2026 im selben Haus. Auf dem Handy liegen die Spalten untereinander, die senkrechte Linie faellt weg. ZWEI FUNDE BEIM BAUEN, beide von Hauswachen: * `pruef-fingermass` fand, dass meine neue Handy-Messung mit `setViewportSize` statt eigenem Kontext lief -- ohne `hasTouch` greift keine einzige Regel aus `@media (pointer: coarse)`. * Die Klassen hiessen zuerst `.spalte__*` -- die gehoeren `aufgaben.css`, und scouting.html laedt die VOR scouting.css. `margin-left: auto` aus dem Aufgabenbrett zog die Zahl 560 px von ihrem Wort weg, ohne dass eine Pruefung rot wurde. Jetzt `.art-spalte__*`, und der Abstand wird gemessen. pruef-scouting-felder: 28 -> 64 Pruefungen, gruen. Zwei Gegenproben gefahren (Trennung deaktiviert, Spaltenreihenfolge gedreht) -- beide schlugen an. Dazu gruen: haus-trennung, css-klassen, personen-liste, personen-kachel, hand-personen, schranke, formulare, lesbarkeit, agentur, deutsche-texte, tippziele, leerzustand, fingermass. 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=202610062332" />
|
|
<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=202610062332" defer></script>
|
|
<script src="assets/js/tafel.js?v=202610062332" defer></script>
|
|
</body>
|
|
</html>
|