Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>YouTube Clone</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> | |
| .sidebar-item:hover { | |
| background-color: rgba(255,255,255,0.1); | |
| } | |
| .video-card:hover { | |
| transform: scale(1.02); | |
| } | |
| .search-bar:focus-within { | |
| border-color: #1C62B9; | |
| } | |
| .player-overlay { | |
| background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%); | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-[#0f0f0f] text-white"> | |
| <!-- Header --> | |
| <header class="fixed top-0 left-0 right-0 bg-[#0f0f0f] z-50 border-b border-[#303030]"> | |
| <div class="flex items-center justify-between px-4 py-2"> | |
| <!-- Left section --> | |
| <div class="flex items-center"> | |
| <button class="p-2 rounded-full hover:bg-[#272727] mr-2"> | |
| <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-semibold">Conciencia</span> | |
| </div> | |
| </div> | |
| <!-- Center section - Search bar --> | |
| <div class="flex-1 max-w-2xl mx-4 hidden md:block"> | |
| <div class="flex items-center search-bar border border-[#303030] rounded-3xl overflow-hidden"> | |
| <input type="text" placeholder="Search" class="bg-transparent py-2 px-4 w-full focus:outline-none"> | |
| <button class="px-5 py-2 bg-[#222222] border-l border-[#303030]"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Right section --> | |
| <div class="flex items-center"> | |
| <button class="p-2 rounded-full hover:bg-[#272727] md:hidden mr-2"> | |
| <i class="fas fa-search text-xl"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-[#272727] mr-2"> | |
| <i class="fas fa-microphone text-xl"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-[#272727] mr-2"> | |
| <i class="fas fa-video text-xl"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-[#272727] mr-2"> | |
| <i class="fas fa-bell text-xl"></i> | |
| </button> | |
| <button class="ml-2 px-4 py-1 rounded-full bg-[#1a73e8] hover:bg-[#1a6bd6] flex items-center"> | |
| <i class="fas fa-user-circle mr-2"></i> | |
| <span>Sign in</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile search bar --> | |
| <div class="px-4 pb-2 md:hidden"> | |
| <div class="flex items-center search-bar border border-[#303030] rounded-3xl overflow-hidden"> | |
| <input type="text" placeholder="Search" class="bg-transparent py-2 px-4 w-full focus:outline-none"> | |
| <button class="px-5 py-2 bg-[#222222] border-l border-[#303030]"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="flex pt-16"> | |
| <!-- Sidebar --> | |
| <aside class="hidden md:block w-60 bg-[#0f0f0f] h-[calc(100vh-56px)] sticky top-16 overflow-y-auto scrollbar-hide"> | |
| <nav class="py-2"> | |
| <a href="#" class="flex items-center px-4 py-2 sidebar-item text-white"> | |
| <i class="fas fa-home mr-4 text-xl"></i> | |
| <span>Home</span> | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 sidebar-item"> | |
| <i class="fas fa-fire mr-4 text-xl"></i> | |
| <span>Shorts</span> | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 sidebar-item"> | |
| <i class="fas fa-bell mr-4 text-xl"></i> | |
| <span>Subscriptions</span> | |
| </a> | |
| <hr class="border-[#303030] my-2"> | |
| <a href="#" class="flex items-center px-4 py-2 sidebar-item"> | |
| <i class="fas fa-user-circle mr-4 text-xl"></i> | |
| <span>You</span> | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 sidebar-item"> | |
| <i class="fas fa-history mr-4 text-xl"></i> | |
| <span>History</span> | |
| </a> | |
| <hr class="border-[#303030] my-2"> | |
| <h3 class="px-4 py-2 text-gray-500 text-sm uppercase">Explore</h3> | |
| <a href="#" class="flex items-center px-4 py-2 sidebar-item"> | |
| <i class="fas fa-music mr-4 text-xl"></i> | |
| <span>Music</span> | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 sidebar-item"> | |
| <i class="fas fa-gamepad mr-4 text-xl"></i> | |
| <span>Gaming</span> | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 sidebar-item"> | |
| <i class="fas fa-newspaper mr-4 text-xl"></i> | |
| <span>News</span> | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 sidebar-item"> | |
| <i class="fas fa-trophy mr-4 text-xl"></i> | |
| <span>Sports</span> | |
| </a> | |
| </nav> | |
| </aside> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 p-4"> | |
| <!-- Video Player Section --> | |
| <div class="mb-8"> | |
| <div class="relative w-full aspect-video bg-black rounded-xl overflow-hidden"> | |
| <!-- Video Placeholder --> | |
| <div class="w-full h-full bg-gradient-to-br from-purple-900 to-blue-500 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fab fa-youtube text-8xl text-red-600 mb-4"></i> | |
| <p class="text-2xl font-semibold">Try searching to get started</p> | |
| <p class="text-gray-300 mt-2">Start watching videos to help us build a feed of videos you'll love</p> | |
| </div> | |
| </div> | |
| <!-- Player Controls Overlay --> | |
| <div class="absolute inset-0 player-overlay flex flex-col justify-between p-4"> | |
| <!-- Top Controls --> | |
| <div class="flex justify-between"> | |
| <button class="bg-black bg-opacity-50 rounded-full p-2"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <div class="flex"> | |
| <button class="bg-black bg-opacity-50 rounded-full p-2 mx-1"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button class="bg-black bg-opacity-50 rounded-full p-2 mx-1"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Center Play Button --> | |
| <div class="flex justify-center items-center"> | |
| <button class="bg-black bg-opacity-50 rounded-full p-4"> | |
| <i class="fas fa-play text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Bottom Controls --> | |
| <div class="flex justify-between items-end"> | |
| <div> | |
| <p class="text-sm">Info • Shopping</p> | |
| </div> | |
| <div class="flex"> | |
| <button class="bg-black bg-opacity-50 rounded-full p-2 mx-1"> | |
| <i class="fas fa-volume-mute"></i> | |
| </button> | |
| <button class="bg-black bg-opacity-50 rounded-full p-2 mx-1"> | |
| <i class="fas fa-expand"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Playback Speed --> | |
| <div class="absolute top-4 right-4 bg-black bg-opacity-70 px-3 py-1 rounded-full text-sm"> | |
| 2x | |
| </div> | |
| <!-- Playback Progress --> | |
| <div class="absolute bottom-0 left-0 right-0 h-1 bg-gray-600"> | |
| <div class="h-full bg-red-600 w-1/3"></div> | |
| </div> | |
| </div> | |
| <!-- Video Info --> | |
| <div class="mt-4"> | |
| <h1 class="text-xl font-semibold">Welcome to YouTube - Start Your Journey</h1> | |
| <div class="flex flex-wrap items-center justify-between mt-2"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 mr-3"></div> | |
| <div> | |
| <p class="font-medium">YouTube Official</p> | |
| <p class="text-gray-400 text-sm">15M subscribers</p> | |
| </div> | |
| <button class="ml-4 px-4 py-1 bg-[#272727] hover:bg-[#3f3f3f] rounded-full">Subscribe</button> | |
| </div> | |
| <div class="flex mt-2 md:mt-0"> | |
| <button class="flex items-center bg-[#272727] hover:bg-[#3f3f3f] rounded-l-full px-4 py-1"> | |
| <i class="fas fa-thumbs-up mr-2"></i> 2.5K | |
| </button> | |
| <button class="flex items-center bg-[#272727] hover:bg-[#3f3f3f] rounded-r-full border-l border-[#4a4a4a] px-4 py-1"> | |
| <i class="fas fa-thumbs-down mr-2"></i> | |
| </button> | |
| <button class="flex items-center bg-[#272727] hover:bg-[#3f3f3f] rounded-full px-4 py-1 ml-2"> | |
| <i class="fas fa-share mr-2"></i> Share | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recommendations Grid --> | |
| <div> | |
| <h2 class="text-xl font-semibold mb-4">Recommended</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> | |
| <!-- Video Card 1 --> | |
| <div class="video-card bg-[#181818] rounded-lg overflow-hidden transition-transform duration-200 cursor-pointer"> | |
| <div class="relative"> | |
| <div class="aspect-video bg-gradient-to-r from-blue-600 to-indigo-800"></div> | |
| <span class="absolute bottom-1 right-1 bg-black bg-opacity-80 px-1 text-xs rounded">10:25</span> | |
| </div> | |
| <div class="p-3"> | |
| <div class="flex"> | |
| <div class="w-9 h-9 rounded-full bg-gradient-to-r from-yellow-500 to-red-500 mr-3 flex-shrink-0"></div> | |
| <div> | |
| <h3 class="font-medium line-clamp-2">How to create amazing UI designs with Tailwind CSS</h3> | |
| <p class="text-gray-400 text-sm mt-1">Design Mastery</p> | |
| <p class="text-gray-400 text-sm">245K views • 2 days ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video Card 2 --> | |
| <div class="video-card bg-[#181818] rounded-lg overflow-hidden transition-transform duration-200 cursor-pointer"> | |
| <div class="relative"> | |
| <div class="aspect-video bg-gradient-to-r from-green-600 to-teal-800"></div> | |
| <span class="absolute bottom-1 right-1 bg-black bg-opacity-80 px-1 text-xs rounded">15:42</span> | |
| </div> | |
| <div class="p-3"> | |
| <div class="flex"> | |
| <div class="w-9 h-9 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 mr-3 flex-shrink-0"></div> | |
| <div> | |
| <h3 class="font-medium line-clamp-2">Top 10 JavaScript tricks every developer should know</h3> | |
| <p class="text-gray-400 text-sm mt-1">Code With Me</p> | |
| <p class="text-gray-400 text-sm">512K views • 1 week ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video Card 3 --> | |
| <div class="video-card bg-[#181818] rounded-lg overflow-hidden transition-transform duration-200 cursor-pointer"> | |
| <div class="relative"> | |
| <div class="aspect-video bg-gradient-to-r from-red-600 to-orange-800"></div> | |
| <span class="absolute bottom-1 right-1 bg-black bg-opacity-80 px-1 text-xs rounded">22:18</span> | |
| </div> | |
| <div class="p-3"> | |
| <div class="flex"> | |
| <div class="w-9 h-9 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500 mr-3 flex-shrink-0"></div> | |
| <div> | |
| <h3 class="font-medium line-clamp-2">Building a responsive website from scratch</h3> | |
| <p class="text-gray-400 text-sm mt-1">Web Dev Simplified</p> | |
| <p class="text-gray-400 text-sm">1.2M views • 3 weeks ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video Card 4 --> | |
| <div class="video-card bg-[#181818] rounded-lg overflow-hidden transition-transform duration-200 cursor-pointer"> | |
| <div class="relative"> | |
| <div class="aspect-video bg-gradient-to-r from-indigo-600 to-purple-800"></div> | |
| <span class="absolute bottom-1 right-1 bg-black bg-opacity-80 px-1 text-xs rounded">8:33</span> | |
| </div> | |
| <div class="p-3"> | |
| <div class="flex"> | |
| <div class="w-9 h-9 rounded-full bg-gradient-to-r from-yellow-400 to-orange-500 mr-3 flex-shrink-0"></div> | |
| <div> | |
| <h3 class="font-medium line-clamp-2">The future of web development - 2023 trends</h3> | |
| <p class="text-gray-400 text-sm mt-1">Tech Insider</p> | |
| <p class="text-gray-400 text-sm">876K views • 1 month ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Mobile Navigation --> | |
| <nav class="fixed bottom-0 left-0 right-0 bg-[#0f0f0f] border-t border-[#303030] md:hidden"> | |
| <div class="flex justify-around py-2"> | |
| <a href="#" class="flex flex-col items-center text-red-600"> | |
| <i class="fas fa-home text-xl"></i> | |
| <span class="text-xs mt-1">Home</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-400"> | |
| <i class="fas fa-fire text-xl"></i> | |
| <span class="text-xs mt-1">Shorts</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-400"> | |
| <i class="fas fa-plus-circle text-2xl bg-white text-black rounded-full"></i> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-400"> | |
| <i class="fas fa-bell text-xl"></i> | |
| <span class="text-xs mt-1">Subscriptions</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-400"> | |
| <i class="fas fa-user-circle text-xl"></i> | |
| <span class="text-xs mt-1">You</span> | |
| </a> | |
| </div> | |
| </nav> | |
| <script> | |
| // Simple toggle functionality for mobile sidebar | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const menuBtn = document.querySelector('.fa-bars').closest('button'); | |
| const sidebar = document.querySelector('aside'); | |
| menuBtn.addEventListener('click', function() { | |
| sidebar.classList.toggle('hidden'); | |
| sidebar.classList.toggle('md:block'); | |
| }); | |
| // Video card hover effect | |
| const videoCards = document.querySelectorAll('.video-card'); | |
| videoCards.forEach(card => { | |
| card.addEventListener('mouseenter', () => { | |
| card.classList.add('transform'); | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| card.classList.remove('transform'); | |
| }); | |
| }); | |
| }); | |
| </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=Backtun/redise-o-youtube" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |