zwitschi
fca4286d87
- Updated main.ts to streamline player and chat initialization, removing Alpine.js dependency. - Improved message rendering with new CSS classes for better styling and layout. - Added a function to simulate "now playing" titles at regular intervals. - Revamped style.css with a new design system using CSS variables for better maintainability. - Removed tailwind.config.js as Tailwind CSS is no longer used.
75 lines
2.9 KiB
HTML
75 lines
2.9 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>
|
|
<link rel="stylesheet" href="/src/style.css" />
|
|
</head>
|
|
|
|
<body class="lv-body">
|
|
<main class="viewer-shell" aria-label="Live player and chat">
|
|
<section class="viewer-main" aria-label="Video stream panel">
|
|
<header class="viewer-header">
|
|
<div class="viewer-brand-group">
|
|
<div class="brand-badge" aria-hidden="true">LV</div>
|
|
<div>
|
|
<h1 class="viewer-title">Linear Void</h1>
|
|
<p class="viewer-subtitle">24/7 Synchronized Channel • Live</p>
|
|
</div>
|
|
</div>
|
|
<div class="now-playing-pill" aria-live="polite">
|
|
<span class="live-dot" aria-hidden="true"></span>
|
|
<span id="now-playing">Loading schedule...</span>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="player-stage" aria-label="Video stage">
|
|
<video id="player" class="player" controls autoplay muted playsinline></video>
|
|
<div id="now-playing-overlay" class="now-playing-overlay hidden" aria-live="polite">
|
|
<div class="now-playing-overlay-inner">
|
|
<span class="live-label">LIVE</span>
|
|
<span id="overlay-title" class="overlay-title"></span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="viewer-footer">
|
|
<div>Latency: ~25s • Synced</div>
|
|
<nav class="room-links" aria-label="Quick room switch">
|
|
<a href="#" onclick="switchRoom('main'); return false;">Main Channel</a>
|
|
<a href="#" onclick="switchRoom('chill'); return false;">Chill Room</a>
|
|
<a href="#" onclick="switchRoom('talk'); return false;">Talk Room</a>
|
|
</nav>
|
|
</footer>
|
|
</section>
|
|
|
|
<aside class="chat-sidebar" aria-label="Chat panel">
|
|
<header class="chat-header">
|
|
<div class="chat-room-title">
|
|
<span class="chat-live-marker" aria-hidden="true">●</span>
|
|
<span id="room-name">Main Channel</span>
|
|
</div>
|
|
<button type="button" class="btn btn-secondary" onclick="togglePrivateDM()">New DM</button>
|
|
</header>
|
|
|
|
<section id="messages" class="chat-messages" aria-live="polite" aria-label="Message stream"></section>
|
|
|
|
<div class="chat-input-area">
|
|
<div class="chat-input-row">
|
|
<label for="message-input" class="sr-only">Message input</label>
|
|
<input id="message-input" type="text" placeholder="Type a message..." class="input" onkeydown="if(event.key === 'Enter') sendMessage()" />
|
|
<button type="button" class="btn btn-primary" onclick="sendMessage()">Send</button>
|
|
</div>
|
|
<p class="chat-note">
|
|
Synced with video • Moderation active
|
|
</p>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
|
|
</html> |