Spaces:

Guymy97
/

essai

Running

App Files Files Community

Guymy97 commited on Nov 19, 2025

Commit

59bdd10

verified ·

1 Parent(s): d8b95a0

Deploy from anycoder

Browse files

Files changed (1) hide show

index.html +829 -19

index.html CHANGED Viewed

@@ -1,19 +1,829 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TiviStream - Web IPTV Player</title>
+    <!-- Fonts & Icons -->
+    <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@300;400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --bg-dark: #0f1115;
+            --bg-overlay: rgba(15, 17, 21, 0.85);
+            --bg-panel: rgba(30, 34, 42, 0.6);
+            --primary: #3b82f6;
+            --primary-glow: rgba(59, 130, 246, 0.5);
+            --text-main: #ffffff;
+            --text-muted: #9ca3af;
+            --border-color: rgba(255, 255, 255, 0.1);
+            --focus-color: rgba(255, 255, 255, 0.15);
+            --transition: all 0.2s ease-out;
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            user-select: none; /* TV interface feel */
+        }
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #000;
+            color: var(--text-main);
+            height: 100vh;
+            width: 100vw;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+        /* Video Background Layer */
+        #video-layer {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+            background: #000;
+        }
+        video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            opacity: 0.6; /* Dimmed when UI is active */
+            transition: opacity 0.5s ease;
+        }
+        body.ui-hidden video {
+            opacity: 1;
+        }
+        /* UI Layer */
+        #ui-layer {
+            position: relative;
+            z-index: 10;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            background: linear-gradient(to right, var(--bg-overlay) 0%, var(--bg-overlay) 35%, rgba(0,0,0,0.2) 100%);
+            backdrop-filter: blur(5px);
+            transition: transform 0.3s ease, opacity 0.3s ease;
+        }
+        body.ui-hidden #ui-layer {
+            opacity: 0;
+            pointer-events: none;
+        }
+        /* Header */
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1.5rem 2rem;
+            border-bottom: 1px solid var(--border-color);
+        }
+        .brand {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--primary);
+            text-shadow: 0 0 15px var(--primary-glow);
+        }
+        .brand i {
+            font-size: 1.8rem;
+        }
+        .header-right {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+        }
+        .anycoder-link {
+            color: var(--text-muted);
+            text-decoration: none;
+            font-size: 0.9rem;
+            padding: 5px 10px;
+            border-radius: 4px;
+            transition: var(--transition);
+            border: 1px solid transparent;
+        }
+        .anycoder-link:hover {
+            color: var(--text-main);
+            background: rgba(255,255,255,0.1);
+            border-color: var(--border-color);
+        }
+        .clock {
+            font-size: 1.2rem;
+            font-weight: 600;
+            font-variant-numeric: tabular-nums;
+        }
+        /* Main Layout */
+        .main-container {
+            display: flex;
+            flex: 1;
+            overflow: hidden;
+        }
+        /* Sidebar (Groups) */
+        .sidebar {
+            width: 260px;
+            background: rgba(0,0,0,0.3);
+            border-right: 1px solid var(--border-color);
+            display: flex;
+            flex-direction: column;
+            padding: 1rem 0;
+            overflow-y: auto;
+        }
+        .sidebar-title {
+            padding: 0 1.5rem 1rem;
+            font-size: 0.8rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            color: var(--text-muted);
+        }
+        .group-item {
+            padding: 12px 1.5rem;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            color: var(--text-muted);
+            transition: var(--transition);
+            border-left: 3px solid transparent;
+        }
+        .group-item:hover {
+            background: var(--focus-color);
+            color: var(--text-main);
+        }
+        .group-item.active {
+            background: linear-gradient(90deg, rgba(59, 130, 246, 0.15), transparent);
+            color: var(--text-main);
+            border-left-color: var(--primary);
+            font-weight: 600;
+        }
+        .badge {
+            background: rgba(255,255,255,0.1);
+            padding: 2px 8px;
+            border-radius: 10px;
+            font-size: 0.75rem;
+        }
+        /* Channel List (EPG) */
+        .channel-list-container {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            position: relative;
+        }
+        .epg-header {
+            padding: 1rem 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            border-bottom: 1px solid var(--border-color);
+            background: rgba(0,0,0,0.2);
+        }
+        .epg-time-indicator {
+            color: var(--primary);
+            font-weight: 600;
+            font-size: 0.9rem;
+        }
+        .channel-list {
+            overflow-y: auto;
+            padding-bottom: 100px; /* Space for bottom info */
+        }
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 3px;
+        }
+        .channel-row {
+            display: grid;
+            grid-template-columns: 60px 80px 1.5fr 2fr 80px; /* No, Logo, Name, Program, Time */
+            align-items: center;
+            padding: 15px 1.5rem;
+            border-bottom: 1px solid rgba(255,255,255,0.03);
+            cursor: pointer;
+            transition: var(--transition);
+        }
+        .channel-row:hover {
+            background: var(--focus-color);
+        }
+        .channel-row.active {
+            background: var(--primary);
+            color: white;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+            transform: scale(1.005);
+            border-radius: 4px;
+            margin: 5px 10px;
+            width: calc(100% - 20px);
+            border: none;
+        }
+        .ch-num {
+            font-weight: 300;
+            opacity: 0.7;
+        }
+        .ch-logo {
+            width: 40px;
+            height: 40px;
+            background: #fff;
+            border-radius: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #333;
+            font-weight: bold;
+            font-size: 0.8rem;
+            overflow: hidden;
+        }
+        .ch-logo img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+        .ch-name {
+            font-weight: 600;
+            padding-right: 15px;
+        }
+        .program-info {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+        .program-title {
+            font-size: 0.95rem;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .program-progress {
+            width: 100%;
+            height: 4px;
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+            overflow: hidden;
+        }
+        .progress-bar {
+            height: 100%;
+            background: var(--text-main);
+            width: 0%;
+        }
+        .channel-row.active .progress-bar {
+            background: #fff; /* High contrast on active blue bg */
+        }
+        .program-time {
+            text-align: right;
+            font-size: 0.85rem;
+            opacity: 0.8;
+        }
+        /* Bottom Info Panel */
+        .info-panel {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            background: linear-gradient(to top, #000 0%, rgba(15,17,21,0.95) 100%);
+            padding: 1.5rem 2rem;
+            border-top: 1px solid var(--border-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-end;
+        }
+        .current-details h2 {
+            font-size: 1.8rem;
+            margin-bottom: 0.5rem;
+        }
+        .meta-tags {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 1rem;
+        }
+        .tag {
+            background: rgba(255,255,255,0.15);
+            padding: 2px 8px;
+            border-radius: 4px;
+            font-size: 0.75rem;
+            font-weight: 600;
+        }
+        .tag.hd { background: #f59e0b; color: #000; }
+        .tag.live { background: #ef4444; color: #fff; }
+        .description {
+            font-size: 0.9rem;
+            color: var(--text-muted);
+            max-width: 600px;
+            line-height: 1.4;
+        }
+        .player-controls {
+            display: flex;
+            gap: 1rem;
+            align-items: center;
+        }
+        .btn-control {
+            background: transparent;
+            border: 1px solid var(--border-color);
+            color: var(--text-main);
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+        .btn-control:hover {
+            background: var(--text-main);
+            color: #000;
+        }
+        .btn-fullscreen {
+            background: var(--primary);
+            border: none;
+        }
+        /* Responsive */
+        @media (max-width: 768px) {
+            .sidebar {
+                display: none; /* Hide sidebar on mobile for cleaner look, could implement hamburger menu */
+            }
+            .channel-row {
+                grid-template-columns: 50px 1fr 60px;
+                grid-template-areas:
+                    "logo name time"
+                    "logo prog prog";
+                gap: 5px;
+            }
+            .ch-num { display: none; }
+            .ch-logo { grid-area: logo; }
+            .ch-name { grid-area: name; }
+            .program-info { grid-area: prog; }
+            .program-time { grid-area: time; }
+            .info-panel {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 1rem;
+            }
+            .description { display: none; }
+        }
+        /* Loader */
+        .loader {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 50px;
+            height: 50px;
+            border: 4px solid rgba(255,255,255,0.1);
+            border-left-color: var(--primary);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            display: none;
+            z-index: 5;
+        }
+        @keyframes spin {
+            to { transform: translate(-50%, -50%) rotate(360deg); }
+        }
+        /* Notification / Toast */
+        .toast {
+            position: fixed;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--primary);
+            color: white;
+            padding: 10px 20px;
+            border-radius: 30px;
+            font-size: 0.9rem;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s;
+            z-index: 100;
+        }
+        .toast.show {
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+    <!-- Video Player Background -->
+    <div id="video-layer">
+        <!-- Using a public domain video for demonstration purposes -->
+        <video id="main-player" loop muted playsinline poster="https://images.unsplash.com/photo-1517604931442-71053e3e2e3c?q=80&w=2070&auto=format&fit=crop">
+            <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
+            Your browser does not support the video tag.
+        </video>
+        <div class="loader" id="video-loader"></div>
+    </div>
+    <!-- Toast Notification -->
+    <div class="toast" id="toast">Channel Loaded</div>
+    <!-- UI Overlay -->
+    <div id="ui-layer">
+        <header>
+            <div class="brand">
+                <i class="fa-solid fa-tv"></i>
+                <span>TiviStream</span>
+            </div>
+            <div class="header-right">
+                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a>
+                <div class="clock" id="clock">12:00 PM</div>
+            </div>
+        </header>
+        <div class="main-container">
+            <!-- Sidebar: Groups -->
+            <div class="sidebar">
+                <div class="sidebar-title">Groups</div>
+                <div class="group-item active" onclick="filterChannels('All')">
+                    <span><i class="fa-solid fa-layer-group" style="width:20px"></i> All Channels</span>
+                    <span class="badge">42</span>
+                </div>
+                <div class="group-item" onclick="filterChannels('Favorites')">
+                    <span><i class="fa-solid fa-star" style="width:20px"></i> Favorites</span>
+                    <span class="badge">5</span>
+                </div>
+                <div class="group-item" onclick="filterChannels('Sports')">
+                    <span><i class="fa-solid fa-basketball" style="width:20px"></i> Sports</span>
+                    <span class="badge">12</span>
+                </div>
+                <div class="group-item" onclick="filterChannels('Movies')">
+                    <span><i class="fa-solid fa-film" style="width:20px"></i> Movies</span>
+                    <span class="badge">8</span>
+                </div>
+                <div class="group-item" onclick="filterChannels('News')">
+                    <span><i class="fa-solid fa-newspaper" style="width:20px"></i> News</span>
+                    <span class="badge">6</span>
+                </div>
+                <div class="group-item" onclick="filterChannels('Kids')">
+                    <span><i class="fa-solid fa-child" style="width:20px"></i> Kids</span>
+                    <span class="badge">4</span>
+                </div>
+                <div class="group-item" onclick="filterChannels('Documentary')">
+                    <span><i class="fa-solid fa-earth-americas" style="width:20px"></i> Documentary</span>
+                    <span class="badge">7</span>
+                </div>
+            </div>
+            <!-- Channel List -->
+            <div class="channel-list-container">
+                <div class="epg-header">
+                    <span>Current Guide</span>
+                    <span class="epg-time-indicator" id="date-display">Mon, 01 Jan</span>
+                </div>
+                <div class="channel-list" id="channel-list">
+                    <!-- Channels injected via JS -->
+                </div>
+            </div>
+        </div>
+        <!-- Info Panel -->
+        <div class="info-panel">
+            <div class="current-details">
+                <div class="meta-tags">
+                    <span class="tag live">LIVE</span>
+                    <span class="tag hd">HD</span>
+                    <span class="tag">1080p</span>
+                </div>
+                <h2 id="info-title">Select a Channel</h2>
+                <div class="program-info-bar" style="margin-bottom:10px; opacity:0.8; font-size:0.9rem">
+                    <span id="info-time">--:-- - --:--</span>
+                </div>
+                <p class="description" id="info-desc">
+                    Browse the channel list to start watching. Use the sidebar to filter by category. Click on a channel to tune in.
+                </p>
+            </div>
+            <div class="player-controls">
+                <button class="btn-control" title="Add to Favorites"><i class="fa-regular fa-star"></i></button>
+                <button class="btn-control" title="EPG"><i class="fa-solid fa-list"></i></button>
+                <button class="btn-control" id="toggle-ui-btn" title="Hide UI (Press Esc)"><i class="fa-regular fa-eye-slash"></i></button>
+                <button class="btn-control btn-fullscreen" id="fullscreen-btn"><i class="fa-solid fa-expand"></i></button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // --- Data Simulation ---
+        const categories = ['Sports', 'Movies', 'News', 'Kids', 'Documentary', 'Music', 'Entertainment'];
+        const channelNames = [
+            { name: "ESPN 1", cat: "Sports", icon: "fa-basketball" },
+            { name: "Sky Sports", cat: "Sports", icon: "fa-futbol" },
+            { name: "HBO", cat: "Movies", icon: "fa-film" },
+            { name: "Cinema+", cat: "Movies", icon: "fa-video" },
+            { name: "CNN", cat: "News", icon: "fa-newspaper" },
+            { name: "BBC World", cat: "News", icon: "fa-earth-europe" },
+            { name: "Disney Ch", cat: "Kids", icon: "fa-wand-magic-sparkles" },
+            { name: "Nat Geo", cat: "Documentary", icon: "fa-leaf" },
+            { name: "Discovery", cat: "Documentary", icon: "fa-binoculars" },
+            { name: "MTV Hits", cat: "Music", icon: "fa-music" },
+            { name: "Fox", cat: "Entertainment", icon: "fa-tv" },
+            { name: "ABC", cat: "Entertainment", icon: "fa-font" },
+            { name: "NBC", cat: "Entertainment", icon: "fa-feather" },
+            { name: "Cartoon Net", cat: "Kids", icon: "fa-ghost" },
+            { name: "Eurosport", cat: "Sports", icon: "fa-person-running" }
+        ];
+        const programs = {
+            'Sports': ['Live: Premier League', 'NBA Highlights', 'F1 Grand Prix', 'SportsCenter', 'UFC Fight Night'],
+            'Movies': ['The Dark Knight', 'Inception', 'Interstellar', 'Avengers: Endgame', 'Pulp Fiction', 'The Matrix'],
+            'News': ['World News Now', 'The Daily Report', 'Breaking News', 'Finance Live', 'Morning Joe'],
+            'Kids': ['SpongeBob', 'Bluey', 'Tom & Jerry', 'Peppa Pig', 'Paw Patrol'],
+            'Documentary': ['Planet Earth III', 'Cosmos', 'Ancient Aliens', 'Shark Week', 'How It\'s Made'],
+            'Music': ['Top 40 Hits', 'Classic Rock', 'Hip Hop Nation', 'Morning Vibes', 'K-Pop Countdown'],
+            'Entertainment': ['Friends', 'The Office', 'Breaking Bad', 'Game of Thrones', 'Stranger Things']
+        };
+        // Generate Channel Data
+        let channels = [];
+        for(let i=0; i < 42; i++) {
+            let template = channelNames[i % channelNames.length];
+            // Randomize slightly to create variety
+            let cat = i < 15 ? template.cat : categories[Math.floor(Math.random() * categories.length)];
+            // Generate dummy current program times
+            let now = new Date();
+            let startOffset = Math.floor(Math.random() * 30) + 5; // Started 5-35 mins ago
+            let duration = Math.floor(Math.random() * 60) + 30; // Lasts 30-90 mins
+            let startTime = new Date(now.getTime() - startOffset * 60000);
+            let endTime = new Date(startTime.getTime() + duration * 60000);
+            let progList = programs[cat] || programs['Entertainment'];
+            let currentProg = progList[Math.floor(Math.random() * progList.length)];
+            channels.push({
+                id: i + 1,
+                number: 100 + i,
+                name: i < 15 ? template.name : `Channel ${100+i}`,
+                category: cat,
+                icon: i < 15 ? template.icon : "fa-tv",
+                currentProgram: currentProg,
+                start: startTime,
+                end: endTime,
+                description: `Watch ${currentProg} on ${i < 15 ? template.name : `Channel ${100+i}`}. High definition streaming provided by TiviStream.`,
+                isFavorite: Math.random() > 0.8
+            });
+        }
+        // --- State ---
+        let currentCategory = 'All';
+        let activeChannelId = null;
+        let uiVisible = true;
+        // --- DOM Elements ---
+        const channelListEl = document.getElementById('channel-list');
+        const clockEl = document.getElementById('clock');
+        const dateDisplayEl = document.getElementById('date-display');
+        const videoEl = document.getElementById('main-player');
+        const videoLoader = document.getElementById('video-loader');
+        const infoTitle = document.getElementById('info-title');
+        const infoTime = document.getElementById('info-time');
+        const infoDesc = document.getElementById('info-desc');
+        const toggleUiBtn = document.getElementById('toggle-ui-btn');
+        const fullscreenBtn = document.getElementById('fullscreen-btn');
+        // --- Functions ---
+        function formatTime(date) {
+            return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        }
+        function updateClock() {
+            const now = new Date();
+            clockEl.innerText = formatTime(now);
+            dateDisplayEl.innerText = now.toLocaleDateString([], { weekday: 'short', day: 'numeric', month: 'short' });
+            // Update progress bars
+            document.querySelectorAll('.channel-row').forEach(row => {
+                const id = parseInt(row.dataset.id);
+                const ch = channels.find(c => c.id === id);
+                if(ch) {
+                    updateProgressBar(row.querySelector('.progress-bar'), ch);
+                }
+            });
+        }
+        function updateProgressBar(barEl, channel) {
+            const now = new Date();
+            const total = channel.end - channel.start;
+            const elapsed = now - channel.start;
+            let pct = (elapsed / total) * 100;
+            if (pct < 0) pct = 0;
+            if (pct > 100) pct = 100;
+            barEl.style.width = `${pct}%`;
+        }
+        function renderChannels(category) {
+            channelListEl.innerHTML = '';
+            const filtered = category === 'All' ? channels :
+                             category === 'Favorites' ? channels.filter(c => c.isFavorite) :
+                             channels.filter(c => c.category === category);
+            filtered.forEach(ch => {
+                const row = document.createElement('div');
+                row.className = `channel-row ${activeChannelId === ch.id ? 'active' : ''}`;
+                row.dataset.id = ch.id;
+                row.onclick = () => selectChannel(ch);
+                // Calculate Progress
+                const now = new Date();
+                // Reset times if expired (simulation logic)
+                if (now > ch.end) {
+                    ch.start = now;
+                    ch.end = new Date(now.getTime() + 45 * 60000);
+                }
+                row.innerHTML = `
+                    <div class="ch-num">${ch.number}</div>
+                    <div class="ch-logo"><i class="fa-solid ${ch.icon}"></i></div>
+                    <div class="ch-name">${ch.name}</div>
+                    <div class="program-info">
+                        <div class="program-title">${ch.currentProgram}</div>
+                        <div class="program-progress">
+                            <div class="progress-bar" style="width: 0%"></div>
+                        </div>
+                    </div>
+                    <div class="program-time">${formatTime(ch.start)}</div>
+                `;
+                // Init progress bar
+                updateProgressBar(row.querySelector('.progress-bar'), ch);
+                channelListEl.appendChild(row);
+            });
+        }
+        function filterChannels(category) {
+            currentCategory = category;
+            // Update Sidebar UI
+            document.querySelectorAll('.group-item').forEach(item => {
+                if(item.innerText.includes(category)) {
+                    item.classList.add('active');
+                } else {
+                    item.classList.remove('active');
+                }
+                // Handle "All Channels" vs "All" string match edge case
+                if(category === 'All' && item.innerText.includes('All Channels')) item.classList.add('active');
+            });
+            renderChannels(category);
+        }
+        function selectChannel(channel) {
+            if (activeChannelId === channel.id) return; // Already active
+            activeChannelId = channel.id;
+            // UI Updates
+            renderChannels(currentCategory); // Re-render to update active class
+            // Info Panel Update
+            infoTitle.innerText = `${channel.number} - ${channel.name}`;
+            infoTime.innerText = `${formatTime(channel.start)} - ${formatTime(channel.end)} • ${channel.currentProgram}`;
+            infoDesc.innerText = channel.description;
+            // Simulate Video Loading
+            videoEl.pause();
+            videoLoader.style.display = 'block';
+            showToast(`Tuning into ${channel.name}...`);
+            setTimeout(() => {
+                videoLoader.style.display = 'none';
+                videoEl.play();
+                // In a real app, we would switch the src here:
+                // videoEl.src = channel.streamUrl;
+            }, 1000);
+        }
+        function showToast(msg) {
+            const toast = document.getElementById('toast');
+            toast.innerText = msg;
+            toast.classList.add('show');
+            setTimeout(() => toast.classList.remove('show'), 3000);
+        }
+        function toggleUI() {
+            uiVisible = !uiVisible;
+            if(uiVisible) {
+                document.body.classList.remove('ui-hidden');
+                toggleUiBtn.innerHTML = '<i class="fa-regular fa-eye-slash"></i>';
+            } else {
+                document.body.classList.add('ui-hidden');
+                toggleUiBtn.innerHTML = '<i class="fa-regular fa-eye"></i>';
+                showToast("Press ESC to show menu");
+            }
+        }
+        function toggleFullscreen() {
+            if (!document.fullscreenElement) {
+                document.documentElement.requestFullscreen();
+            } else {
+                if (document.exitFullscreen) {
+                    document.exitFullscreen();
+                }
+            }
+        }
+        // --- Event Listeners ---
+        toggleUiBtn.addEventListener('click', toggleUI);
+        fullscreenBtn.addEventListener('click', toggleFullscreen);
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                if (!uiVisible) toggleUI();
+            }
+            // Simple arrow key navigation logic could be added here
+        });
+        // --- Initialization ---
+        setInterval(updateClock, 1000); // Update clock every second
+        setInterval(updateClock, 30000); // Update progress bars aggressively
+        updateClock();
+        renderChannels('All');
+        // Auto-select first channel
+        if(channels.length > 0) {
+            // Don't trigger video load immediately on load to prevent auto-play policy issues
+            // Just set UI
+            activeChannelId = channels[0].id;
+            renderChannels('All');
+            infoTitle.innerText = `${channels[0].number} - ${channels[0].name}`;
+            infoTime.innerText = `${formatTime(channels[0].start)} - ${formatTime(channels[0].end)} • ${channels[0].currentProgram}`;
+        }
+        // Handle Video Play on Interaction (Browsers block auto-play with sound)
+        document.body.addEventListener('click', () => {
+            if(videoEl.paused) {
+                videoEl.muted = false; // Unmute on interaction
+                videoEl.play().catch(e => console.log("Audio play prevented"));
+            }
+        }, { once: true });
+    </script>
+</body>
+</html>