| <!DOCTYPE html> |
| <html lang="en" class="scroll-smooth"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>SliceStream - Video Vibes Unleashed</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#6366f1', |
| secondary: '#8b5cf6', |
| dark: '#1e293b', |
| light: '#f8fafc' |
| } |
| } |
| } |
| } |
| </script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: #f8fafc; |
| } |
| .video-card:hover .play-icon { |
| opacity: 1; |
| transform: scale(1.1); |
| } |
| .nav-blur { |
| backdrop-filter: blur(10px); |
| background-color: rgba(255, 255, 255, 0.8); |
| } |
| .dark .nav-blur { |
| background-color: rgba(30, 41, 59, 0.8); |
| } |
| ::-webkit-scrollbar { |
| width: 8px; |
| } |
| ::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| } |
| ::-webkit-scrollbar-thumb { |
| background: #8b5cf6; |
| border-radius: 4px; |
| } |
| ::-webkit-scrollbar-thumb:hover { |
| background: #7c3aed; |
| } |
| </style> |
| </head> |
| <body class="bg-light text-dark dark:bg-dark dark:text-light transition-colors duration-300"> |
| |
| <nav class="nav-blur fixed top-0 left-0 right-0 z-50 border-b border-gray-200 dark:border-gray-700"> |
| <div class="container mx-auto px-4 py-3 flex items-center justify-between"> |
| <div class="flex items-center space-x-4"> |
| <div class="flex items-center"> |
| <i data-feather="play" class="text-primary w-6 h-6"></i> |
| <span class="ml-2 text-xl font-bold">SliceStream</span> |
| </div> |
| <div class="hidden md:flex space-x-6"> |
| <a href="index.html" class="hover:text-primary transition">Home</a> |
| <a href="clip.html" class="hover:text-primary transition">Clip Videos</a> |
| <a href="#" class="hover:text-primary transition">Subscriptions</a> |
| <a href="#" class="hover:text-primary transition">Library</a> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="relative hidden md:block"> |
| <input type="text" placeholder="Search videos..." class="bg-gray-100 dark:bg-gray-800 rounded-full py-2 px-4 pl-10 w-64 focus:outline-none focus:ring-2 focus:ring-primary"> |
| <i data-feather="search" class="absolute left-3 top-2.5 text-gray-500"></i> |
| </div> |
| <button class="md:hidden" id="mobile-menu-button"> |
| <i data-feather="menu"></i> |
| </button> |
| <div class="hidden md:flex items-center space-x-3"> |
| <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"> |
| <i data-feather="upload"></i> |
| </button> |
| <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"> |
| <i data-feather="bell"></i> |
| </button> |
| <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white"> |
| <i data-feather="user"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div id="mobile-menu" class="fixed inset-0 z-40 bg-black bg-opacity-50 hidden"> |
| <div class="absolute top-0 right-0 h-full w-3/4 bg-white dark:bg-gray-800 shadow-lg transform transition-transform duration-300 translate-x-full"> |
| <div class="p-4 flex justify-between items-center border-b"> |
| <span class="text-xl font-bold">Menu</span> |
| <button id="close-mobile-menu"> |
| <i data-feather="x"></i> |
| </button> |
| </div> |
| <div class="p-4 space-y-4"> |
| <input type="text" placeholder="Search..." class="w-full bg-gray-100 dark:bg-gray-700 rounded-full py-2 px-4"> |
| <a href="index.html" class="block py-2 hover:text-primary">Home</a> |
| <a href="clip.html" class="block py-2 hover:text-primary">Clip Videos</a> |
| <a href="#" class="block py-2 hover:text-primary">Subscriptions</a> |
| <a href="#" class="block py-2 hover:text-primary">Library</a> |
| <div class="pt-4 border-t"> |
| <button class="w-full bg-primary text-white py-2 rounded-lg">Upload Video</button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <main class="pt-16"> |
| |
| <section class="relative h-96 overflow-hidden" id="hero"> |
| <div class="absolute inset-0 bg-gradient-to-r from-dark to-transparent z-10"></div> |
| <div class="absolute inset-0 flex items-center z-20"> |
| <div class="container mx-auto px-4"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Discover Amazing Videos</h1> |
| <p class="text-xl mb-8 max-w-2xl">Watch, share, and create content that inspires millions around the world.</p> |
| <div class="flex space-x-4"> |
| <button class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-medium transition-all transform hover:scale-105"> |
| Start Watching |
| </button> |
| <button class="border border-primary text-primary hover:bg-primary/10 px-6 py-3 rounded-lg font-medium transition-all transform hover:scale-105"> |
| Upload Video |
| </button> |
| </div> |
| </div> |
| </div> |
| <video autoplay muted loop class="absolute inset-0 w-full h-full object-cover"> |
| <source src="https://static.photos/technology/1200x630/42" type="video/mp4"> |
| </video> |
| </section> |
|
|
| |
| <section class="py-6 bg-gray-100 dark:bg-gray-800 overflow-x-auto"> |
| <div class="container mx-auto px-4"> |
| <div class="flex space-x-4"> |
| <button class="whitespace-nowrap px-4 py-2 bg-primary text-white rounded-full">All</button> |
| <button class="whitespace-nowrap px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-full hover:bg-gray-300 dark:hover:bg-gray-600">Music</button> |
| <button class="whitespace-nowrap px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-full hover:bg-gray-300 dark:hover:bg-gray-600">Gaming</button> |
| <button class="whitespace-nowrap px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-full hover:bg-gray-300 dark:hover:bg-gray-600">News</button> |
| <button class="whitespace-nowrap px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-full hover:bg-gray-300 dark:hover:bg-gray-600">Live</button> |
| <button class="whitespace-nowrap px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-full hover:bg-gray-300 dark:hover:bg-gray-600">Comedy</button> |
| <button class="whitespace-nowrap px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-full hover:bg-gray-300 dark:hover:bg-gray-600">Sports</button> |
| <button class="whitespace-nowrap px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-full hover:bg-gray-300 dark:hover:bg-gray-600">Learning</button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-2xl font-bold mb-8">Trending Videos</h2> |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> |
| |
| <div class="video-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300"> |
| <div class="relative"> |
| <img src="https://static.photos/technology/640x360/1" alt="Video thumbnail" class="w-full h-48 object-cover"> |
| <div class="absolute inset-0 flex items-center justify-center play-icon opacity-0 transition-opacity duration-300"> |
| <div class="bg-black bg-opacity-50 rounded-full p-3"> |
| <i data-feather="play" class="text-white w-8 h-8"></i> |
| </div> |
| </div> |
| <span class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">10:30</span> |
| </div> |
| <div class="p-4"> |
| <div class="flex items-start space-x-3"> |
| <img src="https://static.photos/people/200x200/1" alt="Channel" class="w-10 h-10 rounded-full"> |
| <div> |
| <h3 class="font-medium line-clamp-2">Amazing Tech Gadgets You Need in 2023</h3> |
| <p class="text-gray-500 text-sm mt-1">Tech Explorer</p> |
| <p class="text-gray-500 text-sm">1.2M views • 3 days ago</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="video-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300"> |
| <div class="relative"> |
| <img src="https://static.photos/travel/640x360/2" alt="Video thumbnail" class="w-full h-48 object-cover"> |
| <div class="absolute inset-0 flex items-center justify-center play-icon opacity-0 transition-opacity duration-300"> |
| <div class="bg-black bg-opacity-50 rounded-full p-3"> |
| <i data-feather="play" class="text-white w-8 h-8"></i> |
| </div> |
| </div> |
| <span class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">15:45</span> |
| </div> |
| <div class="p-4"> |
| <div class="flex items-start space-x-3"> |
| <img src="https://static.photos/people/200x200/2" alt="Channel" class="w-10 h-10 rounded-full"> |
| <div> |
| <h3 class="font-medium line-clamp-2">Top 10 Hidden Travel Destinations</h3> |
| <p class="text-gray-500 text-sm mt-1">Travel Diaries</p> |
| <p class="text-gray-500 text-sm">856K views • 1 week ago</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="video-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300"> |
| <div class="relative"> |
| <img src="https://static.photos/food/640x360/3" alt="Video thumbnail" class="w-full h-48 object-cover"> |
| <div class="absolute inset-0 flex items-center justify-center play-icon opacity-0 transition-opacity duration-300"> |
| <div class="bg-black bg-opacity-50 rounded-full p-3"> |
| <i data-feather="play" class="text-white w-8 h-8"></i> |
| </div> |
| </div> |
| <span class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">8:12</span> |
| </div> |
| <div class="p-4"> |
| <div class="flex items-start space-x-3"> |
| <img src="https://static.photos/people/200x200/3" alt="Channel" class="w-10 h-10 rounded-full"> |
| <div> |
| <h3 class="font-medium line-clamp-2">5 Easy Dinner Recipes for Beginners</h3> |
| <p class="text-gray-500 text-sm mt-1">Cooking Master</p> |
| <p class="text-gray-500 text-sm">1.5M views • 5 days ago</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="video-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300"> |
| <div class="relative"> |
| <img src="https://static.photos/fitness/640x360/4" alt="Video thumbnail" class="w-full h-48 object-cover"> |
| <div class="absolute inset-0 flex items-center justify-center play-icon opacity-0 transition-opacity duration-300"> |
| <div class="bg-black bg-opacity-50 rounded-full p-3"> |
| <i data-feather="play" class="text-white w-8 h-8"></i> |
| </div> |
| </div> |
| <span class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">22:30</span> |
| </div> |
| <div class="p-4"> |
| <div class="flex items-start space-x-3"> |
| <img src="https://static.photos/people/200x200/4" alt="Channel" class="w-10 h-10 rounded-full"> |
| <div> |
| <h3 class="font-medium line-clamp-2">Full Body Workout at Home - No Equipment</h3> |
| <p class="text-gray-500 text-sm mt-1">FitLife</p> |
| <p class="text-gray-500 text-sm">2.3M views • 2 weeks ago</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mt-12 text-center"> |
| <button class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-medium transition-all transform hover:scale-105"> |
| Load More Videos |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-gray-100 dark:bg-gray-800"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-2xl font-bold mb-8">Featured Channels</h2> |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6"> |
| |
| <div class="text-center"> |
| <div class="w-20 h-20 mx-auto rounded-full overflow-hidden border-2 border-primary p-1"> |
| <img src="https://static.photos/people/200x200/5" alt="Channel" class="w-full h-full object-cover rounded-full"> |
| </div> |
| <h3 class="mt-3 font-medium">Tech Explorer</h3> |
| <p class="text-gray-500 text-sm">1.2M subscribers</p> |
| </div> |
| |
| |
| <div class="text-center"> |
| <div class="w-20 h-20 mx-auto rounded-full overflow-hidden border-2 border-primary p-1"> |
| <img src="https://static.photos/people/200x200/6" alt="Channel" class="w-full h-full object-cover rounded-full"> |
| </div> |
| <h3 class="mt-3 font-medium">Travel Diaries</h3> |
| <p class="text-gray-500 text-sm">856K subscribers</p> |
| </div> |
| |
| |
| <div class="text-center"> |
| <div class="w-20 h-20 mx-auto rounded-full overflow-hidden border-2 border-primary p-1"> |
| <img src="https://static.photos/people/200x200/7" alt="Channel" class="w-full h-full object-cover rounded-full"> |
| </div> |
| <h3 class="mt-3 font-medium">Cooking Master</h3> |
| <p class="text-gray-500 text-sm">1.5M subscribers</p> |
| </div> |
| |
| |
| <div class="text-center"> |
| <div class="w-20 h-20 mx-auto rounded-full overflow-hidden border-2 border-primary p-1"> |
| <img src |
| </body> |
| </html> |
