| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>TV Streaming Platform</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| | <style> |
| | @keyframes fadeIn { |
| | from { opacity: 0; } |
| | to { opacity: 1; } |
| | } |
| | .channel-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); |
| | } |
| | .video-container { |
| | aspect-ratio: 16/9; |
| | } |
| | .gradient-overlay { |
| | background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); |
| | } |
| | .scroll-hidden::-webkit-scrollbar { |
| | display: none; |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-900 text-white"> |
| | |
| | <header class="bg-black/80 backdrop-blur-md fixed w-full z-50 border-b border-gray-800"> |
| | <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| | <div class="flex items-center space-x-4"> |
| | <div class="flex items-center"> |
| | <i class="fas fa-tv text-red-500 text-2xl mr-2"></i> |
| | <h1 class="text-xl font-bold bg-gradient-to-r from-red-500 to-purple-500 bg-clip-text text-transparent">StreamTV</h1> |
| | </div> |
| | <nav class="hidden md:flex space-x-6"> |
| | <a href="#" class="hover:text-red-400 transition">Home</a> |
| | <a href="#" class="hover:text-red-400 transition">Live</a> |
| | <a href="#" class="hover:text-red-400 transition">Movies</a> |
| | <a href="#" class="hover:text-red-400 transition">Series</a> |
| | <a href="#" class="hover:text-red-400 transition">Sports</a> |
| | </nav> |
| | </div> |
| | <div class="flex items-center space-x-4"> |
| | <div class="relative"> |
| | <input type="text" placeholder="Search..." class="bg-gray-800/50 rounded-full py-2 px-4 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 w-40 md:w-64"> |
| | <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i> |
| | </div> |
| | <button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-full text-sm font-medium transition"> |
| | <i class="fas fa-user mr-2"></i> Sign In |
| | </button> |
| | </div> |
| | </div> |
| | </header> |
| |
|
| | |
| | <main class="pt-20 pb-16"> |
| | |
| | <section class="relative"> |
| | <div class="video-container w-full bg-black"> |
| | <div class="absolute inset-0 gradient-overlay flex items-end p-8 md:p-16"> |
| | <div class="max-w-3xl"> |
| | <span class="bg-red-600/80 text-white px-3 py-1 rounded-full text-xs font-bold mb-3 inline-block">LIVE NOW</span> |
| | <h2 class="text-3xl md:text-5xl font-bold mb-3">Premier League: Manchester United vs Liverpool</h2> |
| | <p class="text-gray-300 mb-4">Watch the biggest match of the season with exclusive commentary and analysis.</p> |
| | <div class="flex space-x-4"> |
| | <button class="bg-red-600 hover:bg-red-700 px-6 py-2 rounded-full font-medium flex items-center"> |
| | <i class="fas fa-play mr-2"></i> Watch Now |
| | </button> |
| | <button class="bg-gray-800/70 hover:bg-gray-700/70 px-6 py-2 rounded-full font-medium flex items-center"> |
| | <i class="fas fa-plus mr-2"></i> Add to List |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | <video autoplay muted loop class="w-full h-full object-cover"> |
| | <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> |
| | </video> |
| | </div> |
| | </section> |
| |
|
| | |
| | <div class="container mx-auto px-4 py-8"> |
| | |
| | <section class="mb-12"> |
| | <div class="flex justify-between items-center mb-6"> |
| | <h3 class="text-2xl font-bold flex items-center"> |
| | <i class="fas fa-bolt text-red-500 mr-3"></i> Live Channels |
| | </h3> |
| | <a href="#" class="text-sm text-gray-400 hover:text-white flex items-center"> |
| | View All <i class="fas fa-chevron-right ml-1"></i> |
| | </a> |
| | </div> |
| | <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4"> |
| | |
| | <div class="channel-card bg-gray-800 rounded-lg overflow-hidden transition-all duration-300 cursor-pointer"> |
| | <div class="relative"> |
| | <img src="https://via.placeholder.com/300x180/1F2937/FFFFFF?text=ESPN" alt="ESPN" class="w-full h-auto"> |
| | <div class="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">LIVE</div> |
| | <div class="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-0.5 rounded flex items-center"> |
| | <i class="fas fa-eye mr-1 text-xs"></i> 24.5K |
| | </div> |
| | </div> |
| | <div class="p-3"> |
| | <h4 class="font-medium truncate">Premier League Live</h4> |
| | <p class="text-gray-400 text-sm truncate">ESPN • Sports</p> |
| | </div> |
| | </div> |
| | |
| | <div class="channel-card bg-gray-800 rounded-lg overflow-hidden transition-all duration-300 cursor-pointer"> |
| | <div class="relative"> |
| | <img src="https://via.placeholder.com/300x180/1F2937/FFFFFF?text=CNN" alt="CNN" class="w-full h-auto"> |
| | <div class="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">LIVE</div> |
| | <div class="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-0.5 rounded flex items-center"> |
| | <i class="fas fa-eye mr-1 text-xs"></i> 18.2K |
| | </div> |
| | </div> |
| | <div class="p-3"> |
| | <h4 class="font-medium truncate">Breaking News</h4> |
| | <p class="text-gray-400 text-sm truncate">CNN • News</p> |
| | </div> |
| | </div> |
| | |
| | <div class="channel-card bg-gray-800 rounded-lg overflow-hidden transition-all duration-300 cursor-pointer"> |
| | <div class="relative"> |
| | <img src="https://via.placeholder.com/300x180/1F2937/FFFFFF?text=HBO" alt="HBO" class="w-full h-auto"> |
| | <div class="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">LIVE</div> |
| | <div class="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-0.5 rounded flex items-center"> |
| | <i class="fas fa-eye mr-1 text-xs"></i> 12.7K |
| | </div> |
| | </div> |
| | <div class="p-3"> |
| | <h4 class="font-medium truncate">Movie Premiere</h4> |
| | <p class="text-gray-400 text-sm truncate">HBO • Movies</p> |
| | </div> |
| | </div> |
| | |
| | <div class="channel-card bg-gray-800 rounded-lg overflow-hidden transition-all duration-300 cursor-pointer"> |
| | <div class="relative"> |
| | <img src="https://via.placeholder.com/300x180/1F2937/FFFFFF?text=Discovery" alt="Discovery" class="w-full h-auto"> |
| | <div class="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">LIVE</div> |
| | <div class="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-0.5 rounded flex items-center"> |
| | <i class="fas fa-eye mr-1 text-xs"></i> 8.3K |
| | </div> |
| | </div> |
| | <div class="p-3"> |
| | <h4 class="font-medium truncate">Wildlife Documentary</h4> |
| | <p class="text-gray-400 text-sm truncate">Discovery • Nature</p> |
| | </div> |
| | </div> |
| | |
| | <div class="channel-card bg-gray-800 rounded-lg overflow-hidden transition-all duration-300 cursor-pointer"> |
| | <div class="relative"> |
| | <img src="https://via.placeholder.com/300x180/1F2937/FFFFFF?text=MTV" alt="MTV" class="w-full h-auto"> |
| | <div class="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">LIVE</div> |
| | <div class="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-0.5 rounded flex items-center"> |
| | <i class="fas fa-eye mr-1 text-xs"></i> 15.1K |
| | </div> |
| | </div> |
| | <div class="p-3"> |
| | <h4 class="font-medium truncate">Music Awards 2023</h4> |
| | <p class="text-gray-400 text-sm truncate">MTV • Music</p> |
| | </div> |
| | </div> |
| | |
| | <div class="channel-card bg-gray-800 rounded-lg overflow-hidden transition-all duration-300 cursor-pointer"> |
| | <div class="relative"> |
| | <img src="https://via.placeholder.com/300x180/1F2937/FFFFFF?text=Cartoon" alt="Cartoon Network" class="w-full h-auto"> |
| | <div class="absolute top-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded">LIVE</div> |
| | <div class="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-0.5 rounded flex items-center"> |
| | <i class="fas fa-eye mr-1 text-xs"></i> 6.8K |
| | </div> |
| | </div> |
| | <div class="p-3"> |
| | <h4 class="font-medium truncate">Kids Morning Show</h4> |
| | <p class="text-gray-400 text-sm truncate">Cartoon Network • Kids</p> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="mb-12"> |
| | <div class="flex justify-between items-center mb-6"> |
| | <h3 class="text-2xl font-bold flex items-center"> |
| | <i class="fas fa-fire text-red-500 mr-3"></i> Popular Shows |
| | </h3> |
| | <a href="#" class="text-sm text-gray-400 hover:text-white flex items-center"> |
| | View All <i class="fas fa-chevron-right ml-1"></i> |
| | </a> |
| | </div> |
| | <div class="relative"> |
| | <div class="flex overflow-x-auto pb-4 scroll-hidden space-x-4"> |
| | |
| | <div class="flex-shrink-0 w-64 bg-gray-800 rounded-lg overflow-hidden transition-all duration-300 cursor-pointer group"> |
| | <div class="relative"> |
| | <img src="https://via.placeholder.com/400x225/1F2937/FFFFFF?text=Stranger+Things" alt="Stranger Things" class="w-full h-auto group-hover:opacity-80 transition"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent flex items-end p-4"> |
| | <div> |
| | <span class="bg-red-600 text-white px-2 py-0.5 rounded-full text-xs font-bold">NEW</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="p-3"> |
| | <h4 class="font-medium mb-1">Stranger Things</h4> |
| | <div class="flex justify-between items-center text-sm"> |
| | <span class="text-gray-400">Season 4</span> |
| | <div class="flex items-center text-yellow-400"> |
| | <i class="fas fa-star text-xs mr-1"></i> |
| | <span>4.8</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="flex-shrink-0 w-64 bg-gray-800 rounded-lg overflow-hidden transition-all duration-300 cursor-pointer group"> |
| | <div class="relative"> |
| | <img src="https://via.placeholder.com/400x225/1F2937/FFFFFF?text=The+Last+of+Us" alt="The Last of Us" class="w-full h-auto group-hover:opacity-80 transition"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent flex items-end p-4"> |
| | <div> |
| | <span class="bg-red-600 text-white px-2 py-0.5 rounded-full text-xs font-bold">TRENDING</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="p-3"> |
| | <h4 class="font-medium mb-1">The Last of Us</h4> |
| | <div class="flex justify-between items-center text-sm"> |
| | <span class="text-gray-400">Season 1</span> |
| | <div class="flex items-center text-yellow-400"> |
| | <i class="fas fa-star text-xs mr-1"></i> |
| | <span>4.9</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="flex-shrink-0 w-64 bg-gray-800 rounded-lg overflow-hidden transition-all duration-300 cursor-pointer group"> |
| | <div class="relative"> |
| | <img src="https://via.placeholder.com/400x225/1F2937/FFFFFF?text=House+of+Dragons" alt="House of Dragons" class="w-full h-auto group-hover:opacity-80 transition"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent flex items-end p-4"> |
| | <div> |
| | <span class="bg-purple-600 text-white px-2 py-0.5 rounded-full text-xs font-bold">POPULAR</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="p-3"> |
| | <h4 class="font-medium mb-1">House of Dragons</h4> |
| | <div class="flex justify-between items-center text-sm"> |
| | <span class="text-gray-400">Season 1</span> |
| | <div class="flex items-center text-yellow-400"> |
| | <i class="fas fa-star text-xs mr-1"></i> |
| | <span>4.7</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="flex-shrink-0 w-64 bg-gray-800 rounded-lg overflow-hidden transition-all duration-300 cursor-pointer group"> |
| | <div class="relative"> |
| | <img src="https://via.placeholder.com/400x225/1F2937/FFFFFF?text=Wednesday" alt="Wednesday" class="w-full h-auto group-hover:opacity-80 transition"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent flex items-end p-4"> |
| | <div> |
| | <span class="bg-blue-600 text-white px-2 py-0.5 rounded-full text-xs font-bold">HOT</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="p-3"> |
| | <h4 class="font-medium mb-1">Wednesday</h4> |
| | <div class="flex justify-between items-center text-sm"> |
| | <span class="text-gray-400">Season 1</span> |
| | <div class="flex items-center text-yellow-400"> |
| | <i class="fas fa-star text-xs mr-1"></i> |
| | <span>4.8</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="flex-shrink-0 w-64 bg-gray-800 rounded-lg overflow-hidden transition-all duration-300 cursor-pointer group"> |
| | <div class="relative"> |
| | <img src="https://via.placeholder.com/400x225/1F2937/FFFFFF?text=The+Witcher" alt="The Witcher" class="w-full h-auto group-hover:opacity-80 transition"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent flex items-end p-4"> |
| | <div> |
| | <span class="bg-green-600 text-white px-2 py-0.5 rounded-full text-xs font-bold">NEW</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="p-3"> |
| | <h4 class="font-medium mb-1">The Witcher</h4> |
| | <div class="flex justify-between items-center text-sm"> |
| | <span class="text-gray-400">Season 3</span> |
| | <div class="flex items-center text-yellow-400"> |
| | <i class="fas fa-star text-xs mr-1"></i> |
| | <span>4.6</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="mb-12"> |
| | <h3 class="text-2xl font-bold mb-6 flex items-center"> |
| | <i class="fas fa-tags text-red-500 mr-3"></i> Browse Categories |
| | </h3> |
| | <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"> |
| | <div class="bg-gray-800/50 hover:bg-gray-800 rounded-lg p-4 flex flex-col items-center cursor-pointer transition border border-gray-700 hover:border-red-500/50"> |
| | <div class="w-12 h-12 bg-red-600/20 rounded-full flex items-center justify-center mb-3"> |
| | <i class="fas fa-futbol text-red-500"></i> |
| | </div> |
| | <span class="font-medium">Sports</span> |
| | </div> |
| | |
| | <div class="bg-gray-800/50 hover:bg-gray-800 rounded-lg p-4 flex flex-col items-center cursor-pointer transition border border-gray-700 hover:border-blue-500/50"> |
| | <div class="w-12 h-12 bg-blue-600/20 rounded-full flex items-center justify-center mb-3"> |
| | <i class="fas fa-film text-blue-500"></i> |
| | </div> |
| | <span class="font-medium">Movies</span> |
| | </div> |
| | |
| | <div class="bg-gray-800/50 hover:bg-gray-800 rounded-lg p-4 flex flex-col items-center cursor-pointer transition border border-gray-700 hover:border-purple-500/50"> |
| | <div class="w-12 h-12 bg-purple-600/20 rounded-full flex items-center justify-center mb-3"> |
| | <i class="fas fa-tv text-purple-500"></i> |
| | </div> |
| | <span class="font-medium">TV Shows</span> |
| | </div> |
| | |
| | <div class="bg-gray-800/50 hover:bg-gray-800 rounded-lg p-4 flex flex-col items-center cursor-pointer transition border border-gray-700 hover:border-green-500/50"> |
| | <div class="w-12 h-12 bg-green-600/20 rounded-full flex items-center justify-center mb-3"> |
| | <i class="fas fa-newspaper text-green-500"></i> |
| | </div> |
| | <span class="font-medium">News</span> |
| | </div> |
| | |
| | <div class="bg-gray-800/50 hover:bg-gray-800 rounded-lg p-4 flex flex-col items-center cursor-pointer transition border border-gray-700 hover:border-yellow-500/50"> |
| | <div class="w-12 h-12 bg-yellow-600/20 rounded-full flex items-center justify-center mb-3"> |
| | <i class="fas fa-music text-yellow-500"></i> |
| | </div> |
| | <span class="font-medium">Music</span> |
| | </div> |
| | |
| | <div class="bg-gray-800/50 hover:bg-gray-800 rounded-lg p-4 flex flex-col items-center cursor-pointer transition border border-gray-700 hover:border-pink-500/50"> |
| | <div class="w-12 h-12 bg-pink-600/20 rounded-full flex items-center justify-center mb-3"> |
| | <i class="fas fa-child text-pink-500"></i> |
| | </div> |
| | <span class="font-medium">Kids</span> |
| | </div> |
| | |
| | <div class="bg-gray-800/50 hover:bg-gray-800 rounded-lg p-4 flex flex-col items-center cursor-pointer transition border border-gray-700 hover:border-indigo-500/50"> |
| | <div class="w-12 h-12 bg-indigo-600/20 rounded-full flex items-center justify-center mb-3"> |
| | <i class="fas fa-globe text-indigo-500"></i> |
| | </div> |
| | <span class="font-medium">Documentary</span> |
| | </div> |
| | |
| | <div class="bg-gray-800/50 hover:bg-gray-800 rounded-lg p-4 flex flex-col items-center cursor-pointer transition border border-gray-700 hover:border-orange-500/50"> |
| | <div class="w-12 h-12 bg-orange-600/20 rounded-full flex items-center justify-center mb-3"> |
| | <i class="fas fa-gamepad text-orange-500"></i> |
| | </div> |
| | <span class="font-medium">Gaming</span> |
| | </div> |
| | </div> |
| | </section> |
| | </div> |
| | </main> |
| |
|
| | |
| | <footer class="bg-black/80 backdrop-blur-md border-t border-gray-800 py-8"> |
| | <div class="container mx-auto px-4"> |
| | <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| | <div> |
| | <div class="flex items-center mb-4"> |
| | <i class="fas fa-tv text-red-500 text-2xl mr-2"></i> |
| | <h2 class="text-xl font-bold">StreamTV</h2> |
| | </div> |
| | <p class="text-gray-400 text-sm mb-4">The ultimate streaming platform for live TV, movies, and series.</p> |
| | <div class="flex space-x-4"> |
| | <a href="#" class="text-gray-400 hover:text-white transition"> |
| | <i class="fab fa-facebook-f"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-white transition"> |
| | <i class="fab fa-twitter"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-white transition"> |
| | <i class="fab fa-instagram"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-white transition"> |
| | <i class="fab fa-youtube"></i> |
| | </a> |
| | </div> |
| | </div> |
| | |
| | <div> |
| | <h3 class="text-lg font-medium mb-4">Navigation</h3> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition text-sm">Home</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition text-sm">Live TV</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition text-sm">Movies</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition text-sm">TV Shows</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition text-sm">Sports</a></li> |
| | </ul> |
| | </div> |
| | |
| | <div> |
| | <h3 class="text-lg font-medium mb-4">Legal</h3> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition text-sm">Terms of Service</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition text-sm">Privacy Policy</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition text-sm">Cookie Policy</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-white transition text-sm">DMCA</a></li> |
| | </ul> |
| | </div> |
| | |
| | <div> |
| | <h3 class="text-lg font-medium mb-4">Subscribe</h3> |
| | <p class="text-gray-400 text-sm mb-4">Get the latest updates and offers.</p> |
| | <div class="flex"> |
| | <input type="email" placeholder="Your email" class="bg-gray-700 text-white px-4 py-2 rounded-l focus:outline-none focus:ring-1 focus:ring-red-500 text-sm w-full"> |
| | <button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-r text-sm"> |
| | <i class="fas fa-paper-plane"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| | <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 StreamTV. All rights reserved.</p> |
| | <div class="flex space-x-6"> |
| | <a href="#" class="text-gray-500 hover:text-white transition text-sm">Help Center</a> |
| | <a href="#" class="text-gray-500 hover:text-white transition text-sm">Contact Us</a> |
| | <a href="#" class="text-gray-500 hover:text-white transition text-sm">FAQ</a> |
| | </div> |
| | </div> |
| | </div> |
| | </footer> |
| |
|
| | |
| | <div class="fixed bottom-0 left-0 right-0 bg-gray-900/90 backdrop-blur-md border-t border-gray-800 py-2 px-4 hidden" id="player-controls"> |
| | <div class="container mx-auto flex items-center justify-between"> |
| | <div class="flex items-center space-x-4"> |
| | <img src="https://via.placeholder.com/60x34/1F2937/FFFFFF?text=PREVIEW" alt="Now Playing" class="w-15 h-9 rounded"> |
| | <div> |
| | <h4 class="text-sm font-medium">Manchester United vs Liverpool</h4> |
| | <p class="text-xs text-gray-400">ESPN • Premier League</p> |
| | </div> |
| | </div> |
| | |
| | <div class="flex items-center space-x-4"> |
| | <button class="text-gray-300 hover:text-white"> |
| | <i class="fas fa-step-backward"></i> |
| | </button> |
| | <button class="text-gray-300 hover:text-white"> |
| | <i class="fas fa-pause"></i> |
| | </button> |
| | <button class="text-gray-300 hover:text-white"> |
| | <i class="fas fa-step-forward"></i> |
| | </button> |
| | <div class="flex items-center space-x-2 ml-4"> |
| | <i class="fas fa-volume-up text-gray-300 text-sm"></i> |
| | <div class="w-24 bg-gray-700 rounded-full h-1"> |
| | <div class="bg-red-500 h-1 rounded-full" style="width: 70%"></div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="flex items-center space-x-4"> |
| | <button class="text-gray-300 hover:text-white"> |
| | <i class="fas fa-expand"></i> |
| | </button> |
| | <button class="text-gray-300 hover:text-white"> |
| | <i class="fas fa-cog"></i> |
| | </button> |
| | <button class="text-gray-300 hover:text-white"> |
| | <i class="fas fa-times"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | |
| | window.addEventListener('scroll', function() { |
| | const playerControls = document.getElementById('player-controls'); |
| | if (window.scrollY > 300) { |
| | playerControls.classList.remove('hidden'); |
| | playerControls.classList.add('animate__fadeInUp'); |
| | } else { |
| | playerControls.classList.add('hidden'); |
| | } |
| | }); |
| | |
| | |
| | document.querySelectorAll('.channel-card').forEach(card => { |
| | card.addEventListener('click', function() { |
| | |
| | const channelName = this.querySelector('h4').textContent; |
| | alert(`Loading channel: ${channelName}`); |
| | }); |
| | }); |
| | |
| | |
| | document.querySelectorAll('.group').forEach(show => { |
| | show.addEventListener('click', function() { |
| | |
| | const showName = this.querySelector('h4').textContent; |
| | alert(`Loading show: ${showName}`); |
| | }); |
| | }); |
| | </script> |
| | <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/stream-tv" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
