ZeasyAlexandClaude Opus 5.5
2c298a3427
Rahmen rechts und unten um die Facecam, darunter eine Platte mit Kanal, Kategorie, Zuschauern und Laufzeit. Soll die Statusleiste abloesen. Ueber der Kamera liegt nichts: genau 0,0 480x270 wird fuer die Shorts ausgeschnitten, das Gameplay ab x=515. Der Rahmen nutzt nur den Streifen dazwischen und den Platz darunter. Bei Abo, Raid und Bits glueht er kurz in der Farbe des Ereignisses. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
228 lines
7.9 KiB
HTML
228 lines
7.9 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>abdulive - Kamerarahmen</title>
|
||
<link rel="stylesheet" href="/theme.css">
|
||
<style>
|
||
/* Rahmen um die Facecam, dazu die Werte der alten Statusleiste auf einer
|
||
* Platte darunter.
|
||
*
|
||
* Die Kamera liegt bündig oben links, 480x270 (docs/obs-layout.md). Genau
|
||
* dieser Bereich wird für die Shorts ausgeschnitten, und das Gameplay ab
|
||
* x=515. Deshalb liegt hier NICHTS über der Kamera: der Rahmen nutzt nur den
|
||
* Streifen rechts (480 bis 515) und den freien Platz darunter. Wer den
|
||
* Rahmen nach innen zieht, hat ihn in jedem Short.
|
||
*
|
||
* Oben und links gibt es keinen Rahmen - dort ist der Bildrand.
|
||
*
|
||
* In OBS: Browser-Quelle 520x380, Position 0,0, über der Kamera. */
|
||
:root {
|
||
--cam-w: 480px;
|
||
--cam-h: 270px;
|
||
--dicke: 7px;
|
||
--abstand: 4px; /* Luft zwischen Kamera und Rahmen */
|
||
--platte-h: 74px;
|
||
--verlauf: linear-gradient(135deg, var(--lila), var(--pink), var(--tuerkis), var(--lila));
|
||
}
|
||
|
||
/* Der Rahmen: ein L um die rechte und untere Kante, außen abgerundet.
|
||
* Gezeichnet als Fläche mit ausgespartem Inneren, damit der Farbverlauf
|
||
* ohne Stoß um die Ecke läuft. */
|
||
#rahmen {
|
||
position: fixed;
|
||
left: 0; top: 0;
|
||
width: calc(var(--cam-w) + var(--abstand) + var(--dicke));
|
||
height: calc(var(--cam-h) + var(--abstand) + var(--dicke));
|
||
border-bottom-right-radius: 22px;
|
||
background: var(--verlauf);
|
||
background-size: 300% 300%;
|
||
animation: wandern 10s linear infinite;
|
||
-webkit-mask:
|
||
linear-gradient(#000 0 0) top left / calc(var(--cam-w) + var(--abstand)) calc(var(--cam-h) + var(--abstand)) no-repeat,
|
||
linear-gradient(#000 0 0);
|
||
-webkit-mask-composite: xor;
|
||
mask-composite: exclude;
|
||
filter: drop-shadow(0 0 10px rgba(169, 112, 255, .45));
|
||
transition: filter .4s;
|
||
}
|
||
@keyframes wandern { to { background-position: 300% 300%; } }
|
||
|
||
/* Platte unter der Kamera. Hängt am Rahmen, damit beides als ein Stück
|
||
* gelesen wird und nicht als zwei Overlays, die zufällig nah beieinander
|
||
* liegen. */
|
||
#platte {
|
||
position: fixed;
|
||
left: 0;
|
||
top: calc(var(--cam-h) + var(--abstand) + var(--dicke));
|
||
width: calc(var(--cam-w) + var(--abstand) + var(--dicke));
|
||
height: var(--platte-h);
|
||
display: grid;
|
||
grid-template-columns: 1fr auto;
|
||
align-items: center;
|
||
gap: 16px;
|
||
padding: 0 18px 0 16px;
|
||
background: var(--tinte-klar);
|
||
backdrop-filter: blur(14px) saturate(140%);
|
||
border-bottom-left-radius: 0;
|
||
border-bottom-right-radius: 16px;
|
||
box-shadow: var(--schatten), var(--glanz);
|
||
}
|
||
|
||
.links { min-width: 0; }
|
||
.zeile1 { display: flex; align-items: center; gap: 10px; }
|
||
.punkt {
|
||
width: 11px; height: 11px; flex: none;
|
||
border-radius: 50%;
|
||
background: #555;
|
||
}
|
||
body.live .punkt { background: var(--rot); animation: klopfen 2s ease-out infinite; }
|
||
@keyframes klopfen {
|
||
0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); }
|
||
70% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
|
||
100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
|
||
}
|
||
.kanal { font-size: 23px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
|
||
#kategorie {
|
||
font-size: 15px; color: var(--schrift-leise); margin-top: 3px;
|
||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||
}
|
||
|
||
.werte { display: flex; gap: 18px; }
|
||
.wert { text-align: right; }
|
||
.wert .zahl {
|
||
display: flex; align-items: center; justify-content: flex-end; gap: 6px;
|
||
font: 700 22px/1.1 var(--font-zahl);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.wert svg { width: 17px; height: 17px; opacity: .8; }
|
||
.wert .beschriftung {
|
||
font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
|
||
color: var(--schrift-leise);
|
||
}
|
||
.zahl.neu { animation: aufleuchten .8s ease-out; }
|
||
@keyframes aufleuchten {
|
||
0% { color: var(--tuerkis); transform: translateY(-3px); }
|
||
100% { color: inherit; transform: none; }
|
||
}
|
||
|
||
/* Nicht live: der Rahmen wird ruhig und grau. So sieht man in der
|
||
* Vorschau sofort, ob der Hub den Stream erkannt hat. */
|
||
body:not(.live) #rahmen {
|
||
background: linear-gradient(135deg, #3a3550, #57507a);
|
||
animation: none;
|
||
filter: none;
|
||
}
|
||
|
||
/* Aufleuchten bei Abo, Raid, Bits: der Rahmen glüht kurz in der Farbe des
|
||
* Ereignisses. Die große Einblendung macht alerts.html - das hier ist nur
|
||
* das Echo an der Kamera, damit der Blick dorthin geht, wo Abdu reagiert. */
|
||
body.puls #rahmen { animation: wandern 1.2s linear infinite; }
|
||
body.puls-lila #rahmen { filter: drop-shadow(0 0 22px var(--lila)); }
|
||
body.puls-pink #rahmen { filter: drop-shadow(0 0 22px var(--pink)); }
|
||
body.puls-gold #rahmen { filter: drop-shadow(0 0 22px var(--gold)); }
|
||
body.puls-tuerkis #rahmen { filter: drop-shadow(0 0 22px var(--tuerkis)); }
|
||
|
||
/* Nur zum Ansehen im Browser (?probe=1): ein Platzhalter, wo die Kamera
|
||
* sitzt. In OBS liegt dort das echte Bild. */
|
||
#kamera-probe {
|
||
display: none;
|
||
position: fixed; left: 0; top: 0;
|
||
width: var(--cam-w); height: var(--cam-h);
|
||
background:
|
||
radial-gradient(40% 55% at 50% 60%, #4a3b6b, transparent 70%),
|
||
linear-gradient(160deg, #2b2440, #17131f);
|
||
color: var(--schrift-leise);
|
||
font: 500 14px/1 var(--font-zahl);
|
||
display: none; place-items: center;
|
||
}
|
||
body.probe #kamera-probe { display: grid; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="kamera-probe">Facecam 480 × 270</div>
|
||
<div id="rahmen"></div>
|
||
<div id="platte">
|
||
<div class="links">
|
||
<div class="zeile1">
|
||
<span class="punkt"></span>
|
||
<span class="kanal kontur" id="kanal">abdulive_</span>
|
||
</div>
|
||
<div id="kategorie">offline</div>
|
||
</div>
|
||
<div class="werte">
|
||
<div class="wert">
|
||
<span class="zahl" id="zuschauer">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"
|
||
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/>
|
||
</svg><span>-</span>
|
||
</span>
|
||
<span class="beschriftung">Zuschauer</span>
|
||
</div>
|
||
<div class="wert">
|
||
<span class="zahl" id="laufzeit"><span>-</span></span>
|
||
<span class="beschriftung">live seit</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="getrennt">keine Verbindung</div>
|
||
|
||
<script src="/client.js"></script>
|
||
<script>
|
||
(function () {
|
||
'use strict';
|
||
|
||
if (Overlay.param('probe', false)) document.body.classList.add('probe');
|
||
|
||
var kategorie = document.getElementById('kategorie');
|
||
var zuschauer = document.getElementById('zuschauer');
|
||
var laufzeit = document.getElementById('laufzeit');
|
||
document.getElementById('kanal').textContent = Overlay.param('kanal', 'abdulive_');
|
||
var seit = null;
|
||
|
||
function setze(el, wert) {
|
||
var ziel = el.lastElementChild;
|
||
if (ziel.textContent === wert) return;
|
||
ziel.textContent = wert;
|
||
el.classList.remove('neu');
|
||
void el.offsetWidth;
|
||
el.classList.add('neu');
|
||
}
|
||
|
||
function stand(ev) {
|
||
document.body.classList.toggle('live', !!ev.live);
|
||
// Die Kategorie statt des Titels: der Titel ist meist zu lang für 490 px
|
||
// und steht ohnehin auf der Twitch-Seite direkt unter dem Bild.
|
||
kategorie.textContent = ev.live ? (ev.category || 'live') : 'offline';
|
||
setze(zuschauer, ev.live ? Overlay.zahl(ev.viewers) : '-');
|
||
seit = ev.live ? ev.startedAt : null;
|
||
tick();
|
||
}
|
||
function tick() { laufzeit.lastElementChild.textContent = seit ? Overlay.laufzeit(seit) : '-'; }
|
||
setInterval(tick, 10000);
|
||
|
||
var FARBE = {
|
||
sub: 'lila', resub: 'lila', subgift: 'pink', massgift: 'pink',
|
||
raid: 'tuerkis', cheer: 'gold', follow: 'tuerkis', reward: 'gold',
|
||
};
|
||
var pulsTimer = null;
|
||
function puls(farbe) {
|
||
var b = document.body;
|
||
b.className = b.className.replace(/\bpuls(-\w+)?\b/g, '').trim();
|
||
void b.offsetWidth;
|
||
b.classList.add('puls', 'puls-' + farbe);
|
||
clearTimeout(pulsTimer);
|
||
pulsTimer = setTimeout(function () {
|
||
b.className = b.className.replace(/\bpuls(-\w+)?\b/g, '').trim();
|
||
}, 4000);
|
||
}
|
||
|
||
Overlay.on('stream', stand);
|
||
Overlay.on('state', function (ev) { stand(ev.stream); });
|
||
Overlay.on('alert', function (ev) { puls(FARBE[ev.type] || 'lila'); });
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|