From b3df6e941744eee472579262bdc0cc9268d4ad3a Mon Sep 17 00:00:00 2001 From: Sebastjan Date: Tue, 7 Jul 2026 10:12:29 +0000 Subject: [PATCH] Ozadje = nakljucna FOLX slika na body (menja ob osvezitvi); player pol-prosojen; dodan Chromecast + AirPlay; fullscreen na strimu --- src/server.js | 3 +- views/index.ejs | 73 ++++++++++++++++++++++++++++++------------------- 2 files changed, 47 insertions(+), 29 deletions(-) diff --git a/src/server.js b/src/server.js index 088d798..613b429 100644 --- a/src/server.js +++ b/src/server.js @@ -38,7 +38,8 @@ app.use(express.static(path.join(__dirname, '..', 'public'), { app.get('/', (_req, res) => { // Use our proxy route for the player — it always returns fresh tokens - res.render('index', { hlsUrl: '/stream/1/master.m3u8' }); + const bg = '/assets/bg/bg' + (1 + Math.floor(Math.random() * 4)) + '.jpg'; + res.render('index', { hlsUrl: '/stream/1/master.m3u8', bg }); }); app.get('/test-embed', (_req, res) => { diff --git a/views/index.ejs b/views/index.ejs index 1af7233..3ea00c3 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -21,24 +21,22 @@ :root { --akzent: #DC1D4D; --font-display: 'Geograph', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; } * { box-sizing: border-box; } html, body { margin: 0; background: #000; } - body { color: #fff; font-family: var(--font-display); } + body { color: #fff; font-family: var(--font-display); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; } a { color: var(--akzent); text-decoration: none; } a:hover { color: #FF4A73; } @keyframes fx-pulse { 50% { opacity: .3; } } @keyframes fx-vu { from { transform: scaleY(.15); } to { transform: scaleY(1); } } input[type="range"].fxvol { accent-color: var(--akzent); } ::selection { background: var(--akzent); color: #fff; } - .wrap { min-height: 100vh; background: #000; display: flex; flex-direction: column; } + .wrap { min-height: 100vh; display: flex; flex-direction: column; background: rgba(0,0,0,0.35); } header.top { padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,0.14); } .top-inner { width: min(900px, 100%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } header.top .logo { height: 64px; width: auto; display: block; margin: -14px 0; } .uhr { font-family: var(--font-mono); font-size: 13px; color: #B8B8B8; letter-spacing: 0.06em; } main.stage-wrap { width: min(1240px, 100%); margin: 0 auto; padding: clamp(16px,3vw,40px) clamp(12px,2.5vw,24px) 0; flex: 1; } .player-col { width: min(900px, 100%); margin: 0 auto; } - .player-frame { position: relative; aspect-ratio: 16/9; overflow: hidden; isolation: isolate; background: #0A0A0A; } - .player-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; background:#000; } - .stage-poster { position: absolute; inset: 0; width:100%; height:100%; object-fit: cover; z-index: 0; opacity: 1; transition: opacity 1.2s ease; } - .stage-poster.b { opacity: 0; } + .player-frame { position: relative; aspect-ratio: 16/9; overflow: hidden; isolation: isolate; background: rgba(10,10,10,0.35); border: 1px solid rgba(255,255,255,0.14); } + .player-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; background:transparent; } .scrim { position: absolute; inset: 0; z-index: 1; background: rgba(10,10,10,0.28); pointer-events:none; } .msg { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(10,10,10,0.55); color:#fff; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; } .msg.hidden { display:none; } @@ -59,7 +57,7 @@ :fullscreen .player-frame, .player-frame:fullscreen { aspect-ratio: auto; width:100%; height:100%; } - +
@@ -71,11 +69,9 @@
- - -
- +
Stream wird geladen…
@@ -89,6 +85,10 @@
AUTO · HD + +
@@ -103,30 +103,17 @@
+