Files
dogfather-universe/workspace/buehne.html
T
DogFatherGitandClaude Opus 5 da557b5288 Agentur-Events: zwei Karten nebeneinander, Banner in der Mitte
Filipe: "ich will dass die kachel an sich noch viel geiler und krass
aussieht. die soll aber auch garnicht so breit sein. es sollen immer
zwei neben einander stehen können und wenn man auf banner anzeigen
drückt soll das banner schön in der mitte sein."

GEMESSEN VORHER: Karte 1160 px breit, eine je Reihe (#liste stand auf
display: block). --ton: #cace02 an ALLEN drei Zustaenden -- ein seit
drei Tagen vorbeigelaufenes Event leuchtete wie eines, das laeuft. Und
border-left-width: 0px, border-radius: 0px: Die Dringlichkeitskante aus
bereich.css kommt seit dem Baukasten nicht mehr an (module.css setzt
border: 0, gleich stark und spaeter im Ladeweg).

ZWEI NEBENEINANDER -- die Regel SIEBT, statt zu schalten. #liste traegt
das Raster immer; alles, was keine Eventkarte ist, nimmt mit
`grid-column: 1 / -1` die ganze Breite. In den sieben anderen Bereichen
aendert sich damit kein Pixel. Gemessen: Eventkarten 573 px, die
Schulung daneben weiterhin 1160 px; auf 412 px steht wieder eine je
Reihe (379 px, kein seitliches Schieben).

DAS BANNER KOMMT IN DIE MITTE -- und zwar in der BILDSCHAU, die es seit
dem 25.09.2026 gibt und die hier nur nie angeschlossen war. Sie wurde
damals fuer genau diese Beschwerde gebaut ("wenn man bilder aufmacht,
will ich dass die in der mitte sind"). Ihr Stil ist dafuer aus chat.css
in eine eigene bildschau.css gezogen: bereich.html laedt chat.css nicht,
und 5815 Zeilen Chat auf einer Seite ohne Chat waere der falsche Preis.
Gemessen: 1178x662 px, Mitte 640 gegen 640, Escape schliesst, die Seite
springt nicht weg. Der Weg in den Tab bleibt (mittlere Maustaste, Strg).

ZWEI FEHLER, DIE DIE SCHMALERE KARTE ERST SICHTBAR GEMACHT HAT:

 1. `justify-content: flex-end` an der Buehne laesst den Inhalt nach
    OBEN herauslaufen, wenn der Platz nicht reicht -- und die Karte hat
    ein clip-path, also ist er dann weg. Gemessen: Das Etikett
    "Agentur-Events" sass auf einer Karte bei y = -28 px. Die alte
    Messung fragte nach Farbe, Groesse, Sichtbarkeit und Deckkraft und
    bekam auf alles die richtige Antwort -- nach der LAGE hatte sie nie
    gefragt. Jetzt `margin-top: auto`, das kann nicht herauslaufen.

 2. Die Buehnenhoehe kam aus der BREITE (aspect-ratio 2.6/1, bei
    "vorbei" 3.6/1 mit max-height 190px). Bei halber Kartenbreite
    bricht der Titel auf mehr Zeilen um: Inhalt 231 px, Kasten 220 px
    -- der Zeitbalken lag auf dem Satz darunter. Jetzt eine
    Mindesthoehe, der Rest kommt vom Inhalt. Das Banner liegt absolut
    darin und fuellt jede Hoehe; die Rechnung brauchte es nie.

AUSSERDEM: Jeder Zustand traegt seinen Ton (laeuft = Agenturgelb,
kommt = kuehl, vorbei = stumpf) und faerbt damit Eckwinkel, Kantenlicht
und Zeitbalken mit. Die Farbkante der Karte liegt im Hintergrund statt
auf einem Pseudoelement (beide gehoeren dem Baukasten), 6 px, weil das
Kantenlicht 1,6 px verdeckt. Der Aufgabenzaehler ist eine Pille statt
grauer Text, gleich hohe Karten mit dem Fuss unten.

pruef-eventkarte: 77 -> 94 Pruefungen, gruen. Zwei Gegenproben gefahren
(Ueberlaufschutz entfernt -> rot mit "ev-buehne__inhalt oben -28px";
die neue Lagepruefung nennt den Schuldigen selbst). Neu darin: nichts
darf aus einer Karte herausragen (132 Teile), der Inhalt muss in jede
Buehne passen, und auf 412 px steht eine Karte je Reihe.
Dazu gruen: chat-anhaenge (168, die Bildschau nach dem Umzug),
chat-optik, chat, css-klassen, haus-trennung, lesbarkeit, eintrag-bild,
tippziele, fingermass, leerzustand.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-10-07 00:52:53 +02:00

70 lines
3.0 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bühne – das laufende Video</title>
<!-- ======================================================================
DAS LAUFENDE VIDEO ALS BROWSER-QUELLE (28.09.2026)
Zeigt das Video, das gerade in der Reaction läuft — auf dieselbe
Sekunde wie bei allen anderen. Sonst nichts: kein Chat, keine
Kameras, keine Bedienung, kein Rand.
WARUM DIE EIGENE KAMERA HIER NICHT DRIN IST: Sie ist in OBS
direkt als Gerät verfügbar, in besserer Qualität und frei in
Größe und Lage. Den Umweg über den Browser zu nehmen hieße,
Qualität gegen nichts einzutauschen — und die Größe wäre dann
festgelegt statt frei.
Sind GÄSTE im Bild, kommen deren Kameras über eine
Direktverbindung an, und die braucht eine angemeldete Seite.
Dafür gibt es den Bühnenmodus der Reaction-Seite
(`reaktion.html?nur=buehne`), der als Fenster aufgenommen wird.
In OBS: Quelle → Browser → diese Adresse, 1920 × 1080,
„Steuerung anzeigen" aus.
====================================================================== -->
<style>
html, body {
margin: 0; padding: 0;
background: #000;
height: 100%; overflow: hidden;
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}
#platz { position: fixed; inset: 0; }
#platz iframe { width: 100%; height: 100%; border: 0; display: block; }
/* ==== BEI „NUR KAMERA" GEHT DAS BILD AUS ========================
Sonst läge im Stream ein stehengebliebenes YouTube-Bild unter
den Kameras — und Filipe sähe es nicht, weil er in OBS auf
seine Szene schaut und nicht auf die Quelle.
`visibility` UND NICHT `display`. Ein Spieler, den man aus dem
Seitenaufbau nimmt, hört auf zu dekodieren; beim Zurückschalten
müsste er erst wieder an die richtige Stelle springen, und das
sehen dann alle. So läuft er weiter, nur eben unsichtbar, und
ist in derselben Sekunde wieder da. */
body[data-bild="aus"] #platz { visibility: hidden; }
/* Was zu sehen ist, wenn gerade nichts läuft. Schwarz und still --
eine Beschriftung stünde im Stream. Nur bei einem falschen
Schlüssel gibt es einen Hinweis, denn den sieht man sonst nie. */
.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>
<!-- DIE WERBEEINBLENDUNG. Dieselbe Datei wie in der Reaction-Seite:
Zwei Fassungen altern unterschiedlich, und dann sieht der Stream
anders aus als das, worueber geredet wird. -->
<link rel="stylesheet" href="assets/css/werbung.css?v=202610070052" />
</head>
<body class="obs-buehne">
<div id="platz"></div>
<script src="assets/js/werbung.js?v=202610070052" defer></script>
<script src="assets/js/buehne.js?v=202610070052" defer></script>
</body>
</html>