82 lines
3.6 KiB
HTML
82 lines
3.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Linear Void - 24/7 Synchronized Channel</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
|
<link rel="stylesheet" href="/src/style.css" />
|
|
</head>
|
|
|
|
<body class="bg-slate-950 text-slate-200">
|
|
<div class="flex h-screen" x-data="app()">
|
|
<!-- Video Player -->
|
|
<div class="flex-1 flex flex-col">
|
|
<div class="p-4 border-b border-slate-800 flex items-center justify-between bg-slate-900">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold">LV</div>
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-white">Linear Void</h1>
|
|
<p class="text-xs text-emerald-400">24/7 Synchronized Channel • Live</p>
|
|
</div>
|
|
</div>
|
|
<div class="now-playing px-4 py-1 rounded-full text-sm font-medium flex items-center gap-2">
|
|
<div class="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></div>
|
|
<span id="now-playing">Loading schedule...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 flex items-center justify-center p-8 bg-black relative">
|
|
<video id="player" class="max-h-full rounded-xl shadow-2xl" controls autoplay></video>
|
|
<div id="now-playing-overlay" class="absolute bottom-8 left-8 bg-black/70 backdrop-blur-md px-6 py-3 rounded-2xl text-sm hidden">
|
|
<div class="flex items-center gap-3">
|
|
<div class="text-emerald-400">● LIVE</div>
|
|
<div id="overlay-title" class="font-medium"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-4 bg-slate-900 border-t border-slate-800 text-xs text-slate-400 flex justify-between">
|
|
<div>Latency: ~25s • Synced for all viewers (per ADR-001)</div>
|
|
<div class="flex gap-6">
|
|
<a href="#" onclick="switchRoom('main')" class="hover:text-white">Main Channel</a>
|
|
<a href="#" onclick="switchRoom('chill')" class="hover:text-white">Chill Room</a>
|
|
<a href="#" onclick="switchRoom('talk')" class="hover:text-white">Talk Room</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Sidebar -->
|
|
<div class="w-96 flex flex-col border-l border-slate-800 bg-slate-900 chat-sidebar">
|
|
<div class="p-4 border-b border-slate-700 font-medium flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-emerald-400">●</span>
|
|
<span id="room-name">Main Channel</span>
|
|
</div>
|
|
<button onclick="togglePrivateDM()" class="text-xs px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-lg">New DM</button>
|
|
</div>
|
|
|
|
<!-- Messages -->
|
|
<div id="messages" class="flex-1 p-4 overflow-y-auto space-y-4 text-sm">
|
|
<!-- Messages populated by JS -->
|
|
</div>
|
|
|
|
<!-- Input -->
|
|
<div class="p-4 border-t border-slate-700">
|
|
<div class="flex gap-2">
|
|
<input id="message-input" type="text" placeholder="Type a message..." class="input flex-1 px-4 py-3 rounded-2xl text-sm focus:outline-none" onkeydown="if(event.key === 'Enter') sendMessage()">
|
|
<button onclick="sendMessage()" class="bg-blue-600 hover:bg-blue-500 px-6 rounded-2xl text-sm font-medium">Send</button>
|
|
</div>
|
|
<div class="text-[10px] text-slate-500 mt-2 text-center">
|
|
Synced with video • Moderation active
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
|
|
</html> |