|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>SpooQube - Video Sharing 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> |
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
} |
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #888; |
|
|
border-radius: 4px; |
|
|
} |
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #555; |
|
|
} |
|
|
|
|
|
|
|
|
.video-card:hover .thumbnail-overlay { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
|
|
|
.dark-mode-toggle { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { |
|
|
opacity: 1; |
|
|
} |
|
|
50% { |
|
|
opacity: 0.5; |
|
|
} |
|
|
} |
|
|
.animate-pulse { |
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300"> |
|
|
|
|
|
<header class="sticky top-0 z-50 bg-white dark:bg-gray-800 shadow-sm"> |
|
|
<div class="container mx-auto px-4 py-3 flex items-center justify-between"> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
<div class="flex items-center"> |
|
|
<i class="fab fa-youtube text-red-600 text-3xl mr-1"></i> |
|
|
<span class="text-xl font-bold">SpooQube</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hidden md:flex flex-1 max-w-2xl mx-4"> |
|
|
<div class="relative w-full"> |
|
|
<input type="text" placeholder="Search" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-l-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700"> |
|
|
<button class="absolute right-0 top-0 h-full px-5 bg-gray-200 dark:bg-gray-600 rounded-r-full border-l border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
</div> |
|
|
<button class="ml-2 p-2 bg-gray-200 dark:bg-gray-700 rounded-full hover:bg-gray-300 dark:hover:bg-gray-600"> |
|
|
<i class="fas fa-microphone"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center space-x-3"> |
|
|
<button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 md:hidden"> |
|
|
<i class="fas fa-search text-xl"></i> |
|
|
</button> |
|
|
<button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"> |
|
|
<i class="fas fa-video text-xl"></i> |
|
|
</button> |
|
|
<button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"> |
|
|
<i class="fas fa-bell text-xl"></i> |
|
|
</button> |
|
|
<button id="darkModeToggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 dark-mode-toggle"> |
|
|
<i class="fas fa-moon text-xl dark:hidden"></i> |
|
|
<i class="fas fa-sun text-xl hidden dark:block"></i> |
|
|
</button> |
|
|
<div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white font-medium cursor-pointer"> |
|
|
S |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:hidden px-4 pb-3"> |
|
|
<div class="relative w-full"> |
|
|
<input type="text" placeholder="Search" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700"> |
|
|
<button class="absolute right-3 top-1/2 transform -translate-y-1/2"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 py-6 flex flex-col md:flex-row"> |
|
|
|
|
|
<aside class="hidden md:block w-64 pr-4"> |
|
|
<div class="space-y-1 sticky top-20"> |
|
|
<div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer bg-gray-200 dark:bg-gray-700"> |
|
|
<i class="fas fa-home text-xl"></i> |
|
|
<span>Home</span> |
|
|
</div> |
|
|
<div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer"> |
|
|
<i class="fas fa-compass text-xl"></i> |
|
|
<span>Explore</span> |
|
|
</div> |
|
|
<div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer"> |
|
|
<i class="fas fa-subscript text-xl"></i> |
|
|
<span>Subscriptions</span> |
|
|
</div> |
|
|
<hr class="border-gray-300 dark:border-gray-700 my-2"> |
|
|
<div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer"> |
|
|
<i class="fas fa-photo-video text-xl"></i> |
|
|
<span>Library</span> |
|
|
</div> |
|
|
<div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer"> |
|
|
<i class="fas fa-history text-xl"></i> |
|
|
<span>History</span> |
|
|
</div> |
|
|
<div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer"> |
|
|
<i class="fas fa-clock text-xl"></i> |
|
|
<span>Watch Later</span> |
|
|
</div> |
|
|
<div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer"> |
|
|
<i class="fas fa-thumbs-up text-xl"></i> |
|
|
<span>Liked Videos</span> |
|
|
</div> |
|
|
<hr class="border-gray-300 dark:border-gray-700 my-2"> |
|
|
<h3 class="px-3 py-2 font-medium">SUBSCRIPTIONS</h3> |
|
|
<div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer"> |
|
|
<div class="w-6 h-6 rounded-full bg-red-500"></div> |
|
|
<span>Tech Channel</span> |
|
|
</div> |
|
|
<div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer"> |
|
|
<div class="w-6 h-6 rounded-full bg-blue-500"></div> |
|
|
<span>Coding Tutorials</span> |
|
|
</div> |
|
|
<div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer"> |
|
|
<div class="w-6 h-6 rounded-full bg-green-500"></div> |
|
|
<span>Gaming Hub</span> |
|
|
</div> |
|
|
<div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer"> |
|
|
<div class="w-6 h-6 rounded-full bg-yellow-500"></div> |
|
|
<span>Music Vibes</span> |
|
|
</div> |
|
|
<hr class="border-gray-300 dark:border-gray-700 my-2"> |
|
|
<div class="p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center space-x-4 cursor-pointer"> |
|
|
<i class="fas fa-cog text-xl"></i> |
|
|
<span>Settings</span> |
|
|
</div> |
|
|
</div> |
|
|
</aside> |
|
|
|
|
|
|
|
|
<main class="flex-1"> |
|
|
|
|
|
<div class="flex space-x-2 overflow-x-auto pb-4 hide-scrollbar mb-4"> |
|
|
<button class="px-3 py-1 bg-gray-800 dark:bg-gray-700 text-white rounded-full whitespace-nowrap">All</button> |
|
|
<button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-full whitespace-nowrap">Gaming</button> |
|
|
<button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-full whitespace-nowrap">Music</button> |
|
|
<button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-full whitespace-nowrap">Live</button> |
|
|
<button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-full whitespace-nowrap">Programming</button> |
|
|
<button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-full whitespace-nowrap">Recently uploaded</button> |
|
|
<button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-full whitespace-nowrap">Watched</button> |
|
|
<button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-full whitespace-nowrap">New to you</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="relative w-full aspect-video bg-black rounded-xl overflow-hidden"> |
|
|
<img src="https://source.unsplash.com/random/1280x720/?technology" alt="Featured Video" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4"> |
|
|
<div> |
|
|
<h2 class="text-xl font-bold text-white">The Future of AI Technology in 2023</h2> |
|
|
<p class="text-gray-300">1.2M views • 3 days ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute top-4 right-4 bg-black/70 text-white p-2 rounded-full"> |
|
|
<i class="fas fa-volume-up"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"> |
|
|
|
|
|
<div class="video-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/300x169/?gaming" alt="Video Thumbnail" class="w-full aspect-video object-cover"> |
|
|
<div class="thumbnail-overlay absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-300 flex items-center justify-center"> |
|
|
<button class="bg-white/80 text-black p-3 rounded-full hover:bg-white"> |
|
|
<i class="fas fa-play text-lg"></i> |
|
|
</button> |
|
|
</div> |
|
|
<span class="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-1.5 py-0.5 rounded">10:15</span> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="w-9 h-9 rounded-full bg-blue-500 flex-shrink-0"></div> |
|
|
<div> |
|
|
<h3 class="font-medium line-clamp-2">How to Build a Gaming PC in 2023 - Ultimate Guide</h3> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">Tech Reviews</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-500">245K views • 2 weeks ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="video-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/300x169/?music" alt="Video Thumbnail" class="w-full aspect-video object-cover"> |
|
|
<div class="thumbnail-overlay absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-300 flex items-center justify-center"> |
|
|
<button class="bg-white/80 text-black p-3 rounded-full hover:bg-white"> |
|
|
<i class="fas fa-play text-lg"></i> |
|
|
</button> |
|
|
</div> |
|
|
<span class="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-1.5 py-0.5 rounded">5:42</span> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="w-9 h-9 rounded-full bg-red-500 flex-shrink-0"></div> |
|
|
<div> |
|
|
<h3 class="font-medium line-clamp-2">Top 10 Songs of the Week - Music Chart Update</h3> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">Music Vibes</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-500">1.1M views • 1 day ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="video-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/300x169/?programming" alt="Video Thumbnail" class="w-full aspect-video object-cover"> |
|
|
<div class="thumbnail-overlay absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-300 flex items-center justify-center"> |
|
|
<button class="bg-white/80 text-black p-3 rounded-full hover:bg-white"> |
|
|
<i class="fas fa-play text-lg"></i> |
|
|
</button> |
|
|
</div> |
|
|
<span class="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-1.5 py-0.5 rounded">15:30</span> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="w-9 h-9 rounded-full bg-green-500 flex-shrink-0"></div> |
|
|
<div> |
|
|
<h3 class="font-medium line-clamp-2">Learn JavaScript in 15 Minutes - Quick Tutorial</h3> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">Code Masters</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-500">356K views • 3 weeks ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="video-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/300x169/?travel" alt="Video Thumbnail" class="w-full aspect-video object-cover"> |
|
|
<div class="thumbnail-overlay absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-300 flex items-center justify-center"> |
|
|
<button class="bg-white/80 text-black p-3 rounded-full hover:bg-white"> |
|
|
<i class="fas fa-play text-lg"></i> |
|
|
</button> |
|
|
</div> |
|
|
<span class="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-1.5 py-0.5 rounded">22:08</span> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="w-9 h-9 rounded-full bg-purple-500 flex-shrink-0"></div> |
|
|
<div> |
|
|
<h3 class="font-medium line-clamp-2">Bali Travel Guide - Best Places to Visit in 2023</h3> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">Travel Adventures</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-500">789K views • 1 month ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="video-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/300x169/?cooking" alt="Video Thumbnail" class="w-full aspect-video object-cover"> |
|
|
<div class="thumbnail-overlay absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-300 flex items-center justify-center"> |
|
|
<button class="bg-white/80 text-black p-3 rounded-full hover:bg-white"> |
|
|
<i class="fas fa-play text-lg"></i> |
|
|
</button> |
|
|
</div> |
|
|
<span class="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-1.5 py-0.5 rounded">8:45</span> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="w-9 h-9 rounded-full bg-yellow-500 flex-shrink-0"></div> |
|
|
<div> |
|
|
<h3 class="font-medium line-clamp-2">5 Easy Dinner Recipes for Busy Weeknights</h3> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">Foodie Channel</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-500">432K views • 5 days ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="video-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/300x169/?fitness" alt="Video Thumbnail" class="w-full aspect-video object-cover"> |
|
|
<div class="thumbnail-overlay absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-300 flex items-center justify-center"> |
|
|
<button class="bg-white/80 text-black p-3 rounded-full hover:bg-white"> |
|
|
<i class="fas fa-play text-lg"></i> |
|
|
</button> |
|
|
</div> |
|
|
<span class="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-1.5 py-0.5 rounded">12:20</span> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="w-9 h-9 rounded-full bg-pink-500 flex-shrink-0"></div> |
|
|
<div> |
|
|
<h3 class="font-medium line-clamp-2">30-Minute Full Body Workout at Home - No Equipment</h3> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">FitLife</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-500">1.5M views • 2 months ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="video-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/300x169/?technology" alt="Video Thumbnail" class="w-full aspect-video object-cover"> |
|
|
<div class="thumbnail-overlay absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-300 flex items-center justify-center"> |
|
|
<button class="bg-white/80 text-black p-3 rounded-full hover:bg-white"> |
|
|
<i class="fas fa-play text-lg"></i> |
|
|
</button> |
|
|
</div> |
|
|
<span class="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-1.5 py-0.5 rounded">18:32</span> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="w-9 h-9 rounded-full bg-blue-500 flex-shrink-0"></div> |
|
|
<div> |
|
|
<h3 class="font-medium line-clamp-2">iPhone 15 Pro Max Review - Is It Worth It?</h3> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">Tech Today</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-500">2.3M views • 1 week ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="video-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/300x169/?science" alt="Video Thumbnail" class="w-full aspect-video object-cover"> |
|
|
<div class="thumbnail-overlay absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-300 flex items-center justify-center"> |
|
|
<button class="bg-white/80 text-black p-3 rounded-full hover:bg-white"> |
|
|
<i class="fas fa-play text-lg"></i> |
|
|
</button> |
|
|
</div> |
|
|
<span class="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-1.5 py-0.5 rounded">25:15</span> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="w-9 h-9 rounded-full bg-indigo-500 flex-shrink-0"></div> |
|
|
<div> |
|
|
<h3 class="font-medium line-clamp-2">The Science Behind Black Holes - Explained Simply</h3> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">Science Channel</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-500">876K views • 3 weeks ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8 flex justify-center"> |
|
|
<button class="px-6 py-2 bg-gray-200 dark:bg-gray-700 rounded-full hover:bg-gray-300 dark:hover:bg-gray-600 flex items-center space-x-2"> |
|
|
<i class="fas fa-redo"></i> |
|
|
<span>Load More</span> |
|
|
</button> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 flex justify-around py-3 z-50"> |
|
|
<button class="flex flex-col items-center text-blue-600 dark:text-blue-400"> |
|
|
<i class="fas fa-home text-xl"></i> |
|
|
<span class="text-xs mt-1">Home</span> |
|
|
</button> |
|
|
<button class="flex flex-col items-center text-gray-600 dark:text-gray-400"> |
|
|
<i class="fas fa-compass text-xl"></i> |
|
|
<span class="text-xs mt-1">Explore</span> |
|
|
</button> |
|
|
<button class="flex flex-col items-center text-gray-600 dark:text-gray-400"> |
|
|
<i class="fas fa-plus-circle text-xl"></i> |
|
|
<span class="text-xs mt-1">Create</span> |
|
|
</button> |
|
|
<button class="flex flex-col items-center text-gray-600 dark:text-gray-400"> |
|
|
<i class="fas fa-subscript text-xl"></i> |
|
|
<span class="text-xs mt-1">Subscriptions</span> |
|
|
</button> |
|
|
<button class="flex flex-col items-center text-gray-600 dark:text-gray-400"> |
|
|
<i class="fas fa-photo-video text-xl"></i> |
|
|
<span class="text-xs mt-1">Library</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const darkModeToggle = document.getElementById('darkModeToggle'); |
|
|
const html = document.documentElement; |
|
|
|
|
|
|
|
|
const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; |
|
|
const savedMode = localStorage.getItem('darkMode'); |
|
|
|
|
|
if (savedMode === 'dark' || (!savedMode && userPrefersDark)) { |
|
|
html.classList.add('dark'); |
|
|
} |
|
|
|
|
|
darkModeToggle.addEventListener('click', () => { |
|
|
html.classList.toggle('dark'); |
|
|
const isDark = html.classList.contains('dark'); |
|
|
localStorage.setItem('darkMode', isDark ? 'dark' : 'light'); |
|
|
}); |
|
|
|
|
|
|
|
|
const loadMoreBtn = document.querySelector('button:contains("Load More")'); |
|
|
if (loadMoreBtn) { |
|
|
loadMoreBtn.addEventListener('click', () => { |
|
|
loadMoreBtn.innerHTML = '<i class="fas fa-spinner animate-spin"></i><span>Loading...</span>'; |
|
|
setTimeout(() => { |
|
|
|
|
|
loadMoreBtn.innerHTML = '<i class="fas fa-redo"></i><span>Load More</span>'; |
|
|
alert('More videos would load here in a real application!'); |
|
|
}, 1500); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.video-card').forEach(card => { |
|
|
card.addEventListener('mouseenter', () => { |
|
|
card.querySelector('.thumbnail-overlay').style.opacity = '1'; |
|
|
}); |
|
|
card.addEventListener('mouseleave', () => { |
|
|
card.querySelector('.thumbnail-overlay').style.opacity = '0'; |
|
|
}); |
|
|
}); |
|
|
</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=Spooke/spooqube" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
