Debug ohne Embed

web/static/css/style.css

@@ -0,0 +1,18 @@
+:root { --bg:#0b1020; --card:#121a33; --muted:#9fb0d8; }
+*{box-sizing:border-box}
+body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:#e6eaf2}
+.wrap{max-width:1100px;margin:0 auto;padding:24px}
+.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
+.card{background:var(--card);border-radius:18px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
+.row{display:flex;gap:8px;align-items:center}
+.row.space-between{justify-content:space-between}
+.pill{font-size:.85rem;border-radius:999px;padding:4px 10px;background:#0f1530;border:1px solid #36446c}
+.live{background:#142e1e;border-color:#1f6e42;color:#96f7b2}
+.off{background:#2a1420;border-color:#6b1f3a;color:#f7a6be}
+.title-strong{font-weight:800;font-size:1.1rem}
+.muted{opacity:.8}
+video{width:100%;border-radius:12px;background:#000}
+.meta{margin-top:10px;display:flex;gap:10px;align-items:center}
+input{width:220px;padding:8px 10px;border-radius:10px;border:1px solid #36446c;background:#0f1530;color:#e6eaf2}
+a{color:#90cdf4;text-decoration:none}
+.title-no-margin { margin: 0; }

web/static/fonts/inter.css

@@ -0,0 +1,3 @@
+@font-face { font-family: 'Inter'; src: url('/static/fonts/inter-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
+@font-face { font-family: 'Inter'; src: url('/static/fonts/inter-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
+@font-face { font-family: 'Inter'; src: url('/static/fonts/inter-extrabold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

web/static/js/index.js

@@ -0,0 +1,25 @@
+async function load(){
+  const r = await fetch('/api/streams');
+  const data = await r.json();
+  const q = (document.getElementById('filter').value||'').toLowerCase();
+  const list = document.getElementById('list');
+  list.innerHTML = '';
+  data.items
+    .filter(it => !q || it.name.toLowerCase().includes(q))
+    .forEach(it => {
+      const a = document.createElement('a');
+      a.href = '/' + encodeURIComponent(it.name);
+      a.className = 'card';
+      a.innerHTML = `
+        <div class="row space-between">
+          <div>
+            <div class="title-strong">${it.name}</div>
+            <div class="muted">Zuschauer: ${it.viewers}</div>
+          </div>
+          <div class="pill ${it.live ? 'live':'off'}">${it.live ? 'LIVE' : 'Offline'}</div>
+        </div>`;
+      list.appendChild(a);
+    });
+}
+document.getElementById('filter').addEventListener('input', load);
+load(); setInterval(load, 3000);

web/static/js/stream.js

@@ -0,0 +1,33 @@
+(function(){
+  const name = window.__STREAM_NAME__; // oder: document.body.dataset.name
+  const v = document.getElementById('v');
+  const liveEl = document.getElementById('live');
+  const viewersEl = document.getElementById('viewers');
+  const srcEl = document.getElementById('hlssrc');
+
+  function updateLive(live){ 
+    liveEl.className = 'pill ' + (live ? 'live' : 'off');
+    liveEl.textContent = live ? 'LIVE' : 'Offline';
+  }
+
+  async function refresh(){
+    const r = await fetch('/api/streams');
+    const d = await r.json();
+    const it = d.items.find(x=>x.name===name);
+    const live = !!(it && it.live);
+    updateLive(live);
+    viewersEl.textContent = 'Zuschauer: ' + (it ? it.viewers : 0);
+    if(live){
+      const src = '/hls/'+encodeURIComponent(name);
+      srcEl.textContent = src;
+      if (window.Hls && Hls.isSupported()){
+        if(!window._hls){ window._hls = new Hls(); window._hls.attachMedia(v); }
+        window._hls.loadSource(src);
+      } else if (v.canPlayType('application/vnd.apple.mpegurl')) {
+        v.src = src;
+      }
+    }
+  }
+
+  refresh(); setInterval(refresh, 2500);
+})();