Hugging Face's logo

Spaces:
Guymy97
/
essai
Running

App Files Community
essai / index.html
Guymy97's picture
Guymy97
Deploy from anycoder
59bdd10 verified
raw
history blame contribute delete
29 kB
<!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>