Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DishVision TV Guide</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#eff6ff', | |
| 100: '#dbeafe', | |
| 200: '#bfdbfe', | |
| 300: '#93c5fd', | |
| 400: '#60a5fa', | |
| 500: '#3b82f6', | |
| 600: '#2563eb', | |
| 700: '#1d4ed8', | |
| 800: '#1e40af', | |
| 900: '#1e3a8a', | |
| }, | |
| dark: { | |
| 900: '#0f172a', | |
| 800: '#1e293b', | |
| 700: '#334155', | |
| 600: '#475569', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); | |
| color: #f1f5f9; | |
| min-height: 100vh; | |
| } | |
| .glass-card { | |
| background: rgba(30, 41, 59, 0.6); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); | |
| } | |
| .channel-card { | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| } | |
| .channel-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); | |
| } | |
| .time-slot { | |
| min-width: 150px; | |
| border-radius: 12px; | |
| transition: all 0.3s ease; | |
| } | |
| .time-slot:hover { | |
| transform: scale(1.05); | |
| background: rgba(56, 73, 104, 0.7) ; | |
| } | |
| .program-card { | |
| transition: all 0.3s ease; | |
| border-radius: 12px; | |
| margin-bottom: 12px; | |
| } | |
| .program-card:hover { | |
| background: rgba(71, 85, 105, 0.5); | |
| transform: translateX(5px); | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .scrollbar-hide { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| .nav-link { | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: #3b82f6; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .category-card { | |
| transition: all 0.3s ease; | |
| border-radius: 16px; | |
| overflow: hidden; | |
| } | |
| .category-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .live-badge { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| </style> | |
| </head> | |
| <body class="dark-900 text-slate-100"> | |
| <!-- Header --> | |
| <header class="glass-card sticky top-0 z-50 backdrop-blur-md"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center shadow-lg"> | |
| <i data-feather="tv" class="text-white"></i> | |
| </div> | |
| <h1 class="text-3xl font-bold">Dish<span class="gradient-text">Vision</span></h1> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="nav-link font-medium">Guide</a> | |
| <a href="#" class="nav-link font-medium">Movies</a> | |
| <a href="#" class="nav-link font-medium">Sports</a> | |
| <a href="#" class="nav-link font-medium">Series</a> | |
| <a href="#" class="nav-link font-medium">Recordings</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search channels..." class="bg-dark-800 rounded-full py-2.5 px-5 pl-12 focus:outline-none focus:ring-2 focus:ring-primary-500 w-48 md:w-72 transition-all duration-300"> | |
| <i data-feather="search" class="absolute left-4 top-3 text-slate-400"></i> | |
| </div> | |
| <button class="bg-gradient-to-r from-primary-600 to-primary-800 hover:from-primary-700 hover:to-primary-900 text-white rounded-full p-3 transition-all duration-300 shadow-lg"> | |
| <i data-feather="settings"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Date Navigation --> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold gradient-text">TV Guide</h2> | |
| <div class="flex items-center space-x-6"> | |
| <button class="p-3 rounded-full bg-dark-800 hover:bg-dark-700 transition-all duration-300 shadow-md"> | |
| <i data-feather="chevron-left" class="w-6 h-6"></i> | |
| </button> | |
| <div class="text-center px-6 py-3 bg-gradient-to-r from-primary-700 to-primary-900 rounded-xl shadow-lg"> | |
| <p class="font-bold text-lg">Today</p> | |
| <p class="text-sm opacity-80">June 15, 2023</p> | |
| </div> | |
| <button class="p-3 rounded-full bg-dark-800 hover:bg-dark-700 transition-all duration-300 shadow-md"> | |
| <i data-feather="chevron-right" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Time Slots --> | |
| <div class="mb-8 overflow-x-auto scrollbar-hide py-4"> | |
| <div class="flex space-x-6 min-w-max"> | |
| <div class="time-slot text-center py-4 px-6 bg-dark-800 shadow-md"> | |
| <p class="font-bold text-lg">Now</p> | |
| <p class="text-sm text-slate-400">3:45 PM</p> | |
| </div> | |
| <div class="time-slot text-center py-4 px-6 bg-dark-800 shadow-md"> | |
| <p class="font-bold text-lg">4:00 PM</p> | |
| <p class="text-sm text-slate-400">2 hrs</p> | |
| </div> | |
| <div class="time-slot text-center py-4 px-6 bg-dark-800 shadow-md"> | |
| <p class="font-bold text-lg">6:00 PM</p> | |
| <p class="text-sm text-slate-400">2 hrs</p> | |
| </div> | |
| <div class="time-slot text-center py-4 px-6 bg-dark-800 shadow-md"> | |
| <p class="font-bold text-lg">8:00 PM</p> | |
| <p class="text-sm text-slate-400">1 hr</p> | |
| </div> | |
| <div class="time-slot text-center py-4 px-6 bg-dark-800 shadow-md"> | |
| <p class="font-bold text-lg">9:00 PM</p> | |
| <p class="text-sm text-slate-400">2 hrs</p> | |
| </div> | |
| <div class="time-slot text-center py-4 px-6 bg-dark-800 shadow-md"> | |
| <p class="font-bold text-lg">11:00 PM</p> | |
| <p class="text-sm text-slate-400">1 hr</p> | |
| </div> | |
| <div class="time-slot text-center py-4 px-6 bg-dark-800 shadow-md"> | |
| <p class="font-bold text-lg">12:00 AM</p> | |
| <p class="text-sm text-slate-400">2 hrs</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Channel Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-8"> | |
| <!-- Channel Card 1 --> | |
| <div class="channel-card glass-card shadow-xl"> | |
| <div class="bg-gradient-to-r from-dark-800 to-dark-700 p-5 flex items-center"> | |
| <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center mr-4 shadow-lg"> | |
| <span class="font-bold text-lg">CNN</span> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-xl">CNN</h3> | |
| <p class="text-sm text-slate-400">Channel 202</p> | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <div class="program-card bg-dark-800 p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="font-semibold text-lg">Newsroom</span> | |
| <p class="text-xs text-slate-400 mt-1">Breaking news coverage</p> | |
| </div> | |
| <span class="text-xs bg-red-600 px-3 py-1 rounded-full live-badge font-bold">LIVE</span> | |
| </div> | |
| <div class="mt-3 flex items-center text-sm text-slate-400"> | |
| <i data-feather="clock" class="w-4 h-4 mr-2"></i> | |
| <span>3:45 PM - 5:00 PM</span> | |
| </div> | |
| </div> | |
| <div class="program-card bg-dark-800 p-4 mt-4"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <span class="font-semibold">Anderson Cooper 360</span> | |
| <p class="text-xs text-slate-400 mt-1">In-depth news analysis</p> | |
| </div> | |
| <span class="text-sm font-medium">6:00 PM</span> | |
| </div> | |
| </div> | |
| <div class="program-card bg-dark-800 p-4 mt-4"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <span class="font-semibold">Cuomo Prime Time</span> | |
| <p class="text-xs text-slate-400 mt-1">Political commentary show</p> | |
| </div> | |
| <span class="text-sm font-medium">8:00 PM</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Channel Card 2 --> | |
| <div class="channel-card glass-card shadow-xl"> | |
| <div class="bg-gradient-to-r from-dark-800 to-dark-700 p-5 flex items-center"> | |
| <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center mr-4 shadow-lg"> | |
| <span class="font-bold text-lg">ESPN</span> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-xl">ESPN</h3> | |
| <p class="text-sm text-slate-400">Channel 142</p> | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <div class="program-card bg-dark-800 p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <span class="font-semibold text-lg">SportsCenter</span> | |
| <p class="text-xs text-slate-400 mt-1">Top sports headlines</p> | |
| </div> | |
| <span class="text-xs bg-red-600 px-3 py-1 rounded-full live-badge font-bold">LIVE</span> | |
| </div> | |
| <div class="mt-3 flex items-center text-sm text-slate-400"> | |
| <i data-feather="clock" class="w-4 h-4 mr-2"></i> | |
| <span>3:30 PM - 6:00 PM</span> | |
| </div> | |
| </div> | |
| <div class="program-card bg-dark-800 p-4 mt-4"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <span class="font-semibold">NBA Tonight</span> | |
| <p class="text-xs text-slate-400 mt-1">NBA highlights and analysis</p> | |
| </div> | |
| <span class="text-sm font-medium">6:00 PM</span> | |
| </div> | |
| </div> | |
| <div class="program-card bg-dark-800 p-4 mt-4"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <span class="font-semibold">Monday Night Football</span> | |
| <p class="text-xs text-slate-400 mt-1">Football game coverage</p> | |
| </div> | |
| <span class="text-sm font-medium">8:15 PM</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Channel Card 3 --> | |
| <div class="channel-card glass-card shadow-xl"> | |
| <div class="bg-gradient-to-r from-dark-800 to-dark-700 p-5 flex items-center"> | |
| <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center mr-4 shadow-lg"> | |
| <span class="font-bold text-lg">HBO</span> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-xl">HBO</h3> | |
| <p class="text-sm text-slate-400">Channel 501</p> | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <div class="program-card bg-dark-800 p-4"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <span class="font-semibold text-lg">Last Week Tonight</span> | |
| <p class="text-xs text-slate-400 mt-1">Comedy news program</p> | |
| </div> | |
| <span class="text-sm font-medium">4:00 PM</span> | |
| </div> | |
| </div> | |
| <div class="program-card bg-dark-800 p-4 mt-4"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <span class="font-semibold">Game of Thrones</span> | |
| <p class="text-xs text-slate-400 mt-1">Fantasy drama series</p> | |
| </div> | |
| <span class="text-sm font-medium">6:00 PM</span> | |
| </div> | |
| </div> | |
| <div class="program-card bg-dark-800 p-4 mt-4"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <span class="font-semibold">Westworld</span> | |
| <p class="text-xs text-slate-400 mt-1">Sci-fi thriller series</p> | |
| </div> | |
| <span class="text-sm font-medium">9:00 PM</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Channel Card 4 --> | |
| <div class="channel-card glass-card shadow-xl"> | |
| <div class="bg-gradient-to-r from-dark-800 to-dark-700 p-5 flex items-center"> | |
| <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center mr-4 shadow-lg"> | |
| <span class="font-bold text-lg">NBC</span> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-xl">NBC</h3> | |
| <p class="text-sm text-slate-400">Channel 101</p> | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <div class="program-card bg-dark-800 p-4"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <span class="font-semibold text-lg">The Today Show</span> | |
| <p class="text-xs text-slate-400 mt-1">Morning news and talk show</p> | |
| </div> | |
| <span class="text-sm font-medium">4:00 PM</span> | |
| </div> | |
| </div> | |
| <div class="program-card bg-dark-800 p-4 mt-4"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <span class="font-semibold">The Voice</span> | |
| <p class="text-xs text-slate-400 mt-1">Singing competition show</p> | |
| </div> | |
| <span class="text-sm font-medium">7:00 PM</span> | |
| </div> | |
| </div> | |
| <div class="program-card bg-dark-800 p-4 mt-4"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <span class="font-semibold">Saturday Night Live</span> | |
| <p class="text-xs text-slate-400 mt-1">Late-night sketch comedy</p> | |
| </div> | |
| <span class="text-sm font-medium">11:30 PM</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Categories Section --> | |
| <div class="mt-16"> | |
| <h2 class="text-3xl font-bold mb-8 text-center gradient-text">Browse by Category</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6"> | |
| <div class="category-card glass-card p-6 text-center cursor-pointer shadow-lg"> | |
| <div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center mx-auto mb-4 shadow-lg"> | |
| <i class="fas fa-film text-2xl text-white"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Movies</h3> | |
| </div> | |
| <div class="category-card glass-card p-6 text-center cursor-pointer shadow-lg"> | |
| <div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center mx-auto mb-4 shadow-lg"> | |
| <i class="fas fa-baseball-ball text-2xl text-white"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Sports</h3> | |
| </div> | |
| <div class="category-card glass-card p-6 text-center cursor-pointer shadow-lg"> | |
| <div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center mx-auto mb-4 shadow-lg"> | |
| <i class="fas fa-tv text-2xl text-white"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Series</h3> | |
| </div> | |
| <div class="category-card glass-card p-6 text-center cursor-pointer shadow-lg"> | |
| <div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center mx-auto mb-4 shadow-lg"> | |
| <i class="fas fa-music text-2xl text-white"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Music</h3> | |
| </div> | |
| <div class="category-card glass-card p-6 text-center cursor-pointer shadow-lg"> | |
| <div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center mx-auto mb-4 shadow-lg"> | |
| <i class="fas fa-book-open text-2xl text-white"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Documentaries</h3> | |
| </div> | |
| <div class="category-card glass-card p-6 text-center cursor-pointer shadow-lg"> | |
| <div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center mx-auto mb-4 shadow-lg"> | |
| <i class="fas fa-child text-2xl text-white"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Kids</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="glass-card mt-16 py-10 border-t border-dark-700"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center"> | |
| <i data-feather="tv" class="text-white"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold">Dish<span class="gradient-text">Vision</span></h2> | |
| </div> | |
| <p class="text-slate-400 text-sm mt-3 max-w-md">Your ultimate TV guide experience with personalized recommendations and seamless navigation.</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-slate-400 hover:text-primary-400 transition-colors text-2xl"> | |
| <i class="fab fa-facebook"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-primary-400 transition-colors text-2xl"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-primary-400 transition-colors text-2xl"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-primary-400 transition-colors text-2xl"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-dark-700 mt-8 pt-8 text-center text-slate-500 text-sm"> | |
| <p>© 2023 DishVision. All rights reserved. This is a demo interface.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |