63 lines
2.6 KiB
HTML
63 lines
2.6 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
<title>Streams</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root { --bg:#0b1020; --card:#121a33; --muted:#9fb0d8; --ok:#22c55e; --danger:#ef4444; }
|
|
*{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;align-items:center;gap:8px}
|
|
a{color:#90cdf4;text-decoration:none}
|
|
.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}
|
|
input{width:220px;padding:8px 10px;border-radius:10px;border:1px solid #36446c;background:#0f1530;color:#e6eaf2}
|
|
.title{display:flex;align-items:center;justify-content:space-between}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<div class="title">
|
|
<h1 style="margin:0">🎬 Streams</h1>
|
|
<div class="row">
|
|
<input id="filter" placeholder="Filter (z.B. stream1)">
|
|
<a href="/refresh" class="pill">Neu laden</a>
|
|
</div>
|
|
</div>
|
|
<p style="opacity:.8">RTMP Ingest: <code>rtmp://HOST/<name></code> · HLS: <code>http(s)://HOST/hls/<name></code></p>
|
|
<div id="list" class="grid"></div>
|
|
</div>
|
|
<script>
|
|
async function load(){
|
|
const res = await fetch('/api/streams');
|
|
const data = await res.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" style="justify-content:space-between">
|
|
<div>
|
|
<div style="font-weight:800;font-size:1.1rem">${it.name}</div>
|
|
<div style="opacity:.8;font-size:.9rem">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);
|
|
</script>
|
|
</body>
|
|
</html> |