Spaces:
Running
Running
| <html lang="pt"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ReelRush - Video Feed</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); | |
| :root { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| body { | |
| background-color: #000; | |
| padding: 0; | |
| margin: 0; | |
| overflow: hidden; | |
| } | |
| #app-container { | |
| width: 100vw; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| #video-feed { | |
| height: 100%; | |
| overflow-y: scroll; | |
| scroll-snap-type: y mandatory; | |
| } | |
| .reel-post { | |
| width: 100%; | |
| height: 100%; | |
| scroll-snap-align: start; | |
| position: relative; | |
| background: #000; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .spin-slow { | |
| animation: spin 3s linear infinite; | |
| } | |
| #video-feed::-webkit-scrollbar, | |
| #profile-screen::-webkit-scrollbar, | |
| #search-screen::-webkit-scrollbar, | |
| #inbox-screen::-webkit-scrollbar { | |
| display: none; | |
| } | |
| #video-feed, #profile-screen, #search-screen, #inbox-screen { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| .line-clamp-2 { | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black p-0 m-0 overflow-hidden"> | |
| <div id="app-container" class="w-full h-screen bg-black text-white relative flex flex-col overflow-hidden"> | |
| <!-- Header --> | |
| <header id="feed-header" class="absolute top-0 left-0 w-full z-20 p-4 flex justify-center items-center text-lg bg-gradient-to-b from-black/50 to-transparent transition-all duration-300"> | |
| <div class="flex space-x-4"> | |
| <div class="font-light opacity-80 hover:opacity-100 transition duration-150 cursor-pointer">Following</div> | |
| <div class="font-bold border-b-2 border-white pb-1">For You</div> | |
| </div> | |
| <svg class="w-6 h-6 absolute right-4 opacity-70 cursor-pointer hover:opacity-100 transition" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg> | |
| </header> | |
| <!-- Main Content --> | |
| <div id="screen-container" class="flex-grow relative h-[calc(100vh-4rem)] overflow-hidden"> | |
| <!-- FEED SCREEN --> | |
| <main id="video-feed" class="absolute inset-0 transition-transform duration-300 transform translate-x-0 z-10"> | |
| <!-- Sample Video Post 1 --> | |
| <div class="reel-post"> | |
| <video src="http://static.photos/travel/640x360/1" autoplay loop muted class="w-full h-full object-cover"></video> | |
| <div class="absolute bottom-20 left-4 right-4 text-white"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-gray-600 mr-2"></div> | |
| <span class="font-semibold">@traveler</span> | |
| <button class="ml-auto bg-red-500 text-white text-sm px-3 py-1 rounded-full font-bold">Follow</button> | |
| </div> | |
| <p class="text-sm mb-2">Exploring the beautiful beaches of Bali 🇮🇩 #travel #bali</p> | |
| <div class="flex space-x-4 items-center"> | |
| <div class="flex items-center"> | |
| <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /> | |
| </svg> | |
| <span>24.5K</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /> | |
| </svg> | |
| <span>1.2K</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" /> | |
| </svg> | |
| <span>Share</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-4 right-4 flex flex-col items-center space-y-4"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-10 h-10 rounded-full border-2 border-white flex items-center justify-center"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /> | |
| </svg> | |
| </div> | |
| <span class="text-xs mt-1">@user123</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sample Video Post 2 --> | |
| <div class="reel-post"> | |
| <video src="http://static.photos/food/640x360/2" autoplay loop muted class="w-full h-full object-cover"></video> | |
| <div class="absolute bottom-20 left-4 right-4 text-white"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-gray-600 mr-2"></div> | |
| <span class="font-semibold">@cheflife</span> | |
| <button class="ml-auto bg-red-500 text-white text-sm px-3 py-1 rounded-full font-bold">Follow</button> | |
| </div> | |
| <p class="text-sm mb-2">Easy 5-minute breakfast recipe! 🍳 #food #recipe</p> | |
| <div class="flex space-x-4 items-center"> | |
| <div class="flex items-center"> | |
| <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /> | |
| </svg> | |
| <span>48.2K</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /> | |
| </svg> | |
| <span>3.4K</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" /> | |
| </svg> | |
| <span>Share</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-4 right-4 flex flex-col items-center space-y-4"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-10 h-10 rounded-full border-2 border-white flex items-center justify-center"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /> | |
| </svg> | |
| </div> | |
| <span class="text-xs mt-1">@foodie42</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sample Video Post 3 --> | |
| <div class="reel-post"> | |
| <video src="http://static.photos/fitness/640x360/3" autoplay loop muted class="w-full h-full object-cover"></video> | |
| <div class="absolute bottom-20 left-4 right-4 text-white"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-gray-600 mr-2"></div> | |
| <span class="font-semibold">@fitguru</span> | |
| <button class="ml-auto bg-red-500 text-white text-sm px-3 py-1 rounded-full font-bold">Follow</button> | |
| </div> | |
| <p class="text-sm mb-2">Quick home workout with no equipment! 💪 #fitness #workout</p> | |
| <div class="flex space-x-4 items-center"> | |
| <div class="flex items-center"> | |
| <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /> | |
| </svg> | |
| <span>102.8K</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /> | |
| </svg> | |
| <span>8.7K</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" /> | |
| </svg> | |
| <span>Share</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-4 right-4 flex flex-col items-center space-y-4"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-10 h-10 rounded-full border-2 border-white flex items-center justify-center"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /> | |
| </svg> | |
| </div> | |
| <span class="text-xs mt-1">@gymrat99</span> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- PROFILE SCREEN --> | |
| <section id="profile-screen" class="absolute inset-0 bg-black transition-transform duration-300 transform translate-x-full z-20 flex flex-col"> | |
| <div class="h-16 flex items-center p-4 border-b border-gray-800 flex-shrink-0"> | |
| <button id="profile-back-button" class="text-white hover:text-gray-400 transition transform active:scale-90"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg> | |
| </button> | |
| <h2 class="flex-grow text-center text-lg font-bold mr-6">@AwesomeUser</h2> | |
| </div> | |
| <div class="flex-grow overflow-y-auto"> | |
| <div class="p-4 pt-6"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-24 h-24 rounded-full bg-gray-500 border-4 border-gray-700"></div> | |
| <p class="text-sm text-gray-400 mt-3">Full Name</p> | |
| </div> | |
| <div class="flex justify-around text-center border-b border-gray-800 py-4 mt-4"> | |
| <div> | |
| <p class="font-bold text-lg">1.2M</p> | |
| <p class="text-xs text-gray-400">Followers</p> | |
| </div> | |
| <div> | |
| <p class="font-bold text-lg">35</p> | |
| <p class="text-xs text-gray-400">Following</p> | |
| </div> | |
| <div> | |
| <p class="font-bold text-lg">15.8M</p> | |
| <p class="text-xs text-gray-400">Likes</p> | |
| </div> | |
| </div> | |
| <p class="text-sm text-center text-gray-300 my-4"> | |
| Content Creator | Travel, Food & Tech. 🌍 | |
| </p> | |
| <div class="flex justify-center space-x-4 mb-8"> | |
| <button class="bg-red-600 px-6 py-2 text-sm font-semibold rounded-lg hover:bg-red-700 transition transform active:scale-95"> | |
| Edit Profile | |
| </button> | |
| <button class="border border-gray-600 px-4 py-2 text-sm font-semibold rounded-lg hover:bg-gray-800 transition transform active:scale-95"> | |
| <svg class="w-5 h-5 inline-block -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg> | |
| </button> | |
| </div> | |
| <div class="flex border-b border-gray-800 sticky top-0 bg-black/90 backdrop-blur-sm z-10"> | |
| <button class="flex-1 p-3 text-center border-b-2 border-white font-semibold text-sm transition"> | |
| Videos | |
| </button> | |
| <button class="flex-1 p-3 text-center text-gray-500 hover:text-white border-b-2 border-transparent transition text-sm"> | |
| Saved | |
| </button> | |
| <button class="flex-1 p-3 text-center text-gray-500 hover:text-white border-b-2 border-transparent transition text-sm"> | |
| <svg class="w-6 h-6 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V7a2 2 0 00-2-2H6a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-3 gap-0.5 pt-0.5"> | |
| <div class="aspect-[9/16] bg-gray-700 flex flex-col items-center justify-center text-xs opacity-90 hover:opacity-100 transition"><span class="font-bold">#Design</span><span class="text-gray-400">1.5K</span></div> | |
| <div class="aspect-[9/16] bg-gray-700 flex flex-col items-center justify-center text-xs opacity-90 hover:opacity-100 transition"><span class="font-bold">#Travel</span><span class="text-gray-400">2.1K</span></div> | |
| <div class="aspect-[9/16] bg-gray-700 flex flex-col items-center justify-center text-xs opacity-90 hover:opacity-100 transition"><span class="font-bold">#Food</span><span class="text-gray-400">800</span></div> | |
| <div class="aspect-[9/16] bg-gray-700 flex flex-col items-center justify-center text-xs opacity-90 hover:opacity-100 transition"><span class="font-bold">#Tech</span><span class="text-gray-400">3.2K</span></div> | |
| <div class="aspect-[9/16] bg-gray-700 flex flex-col items-center justify-center text-xs opacity-90 hover:opacity-100 transition"><span class="font-bold">#DIY</span><span class="text-gray-400">990</span></div> | |
| <div class="aspect-[9/16] bg-gray-700 flex flex-col items-center justify-center text-xs opacity-90 hover:opacity-100 transition"><span class="font-bold">#Dance</span><span class="text-gray-400">4.5K</span></div> | |
| <div class="aspect-[9/16] bg-gray-700 flex flex-col items-center justify-center text-xs opacity-90 hover:opacity-100 transition"><span class="font-bold">#Sports</span><span class="text-gray-400">1.1K</span></div> | |
| <div class="aspect-[9/16] bg-gray-700 flex flex-col items-center justify-center text-xs opacity-90 hover:opacity-100 transition"><span class="font-bold">#Pets</span><span class="text-gray-400">6.7K</span></div> | |
| <div class="aspect-[9/16] bg-gray-700 flex flex-col items-center justify-center text-xs opacity-90 hover:opacity-100 transition"><span class="font-bold">#Fashion</span><span class="text-gray-400">1.3K</span></div> | |
| <div class="aspect-[9/16] bg-gray-700 flex flex-col items-center justify-center text-xs opacity-90 hover:opacity-100 transition"><span class="font-bold">#Gaming</span><span class="text-gray-400">2.8K</span></div> | |
| <div class="aspect-[9/16] bg-gray-700 flex flex-col items-center justify-center text-xs opacity-90 hover:opacity-100 transition"><span class="font-bold">#Recipes</span><span class="text-gray-400">5.1K</span></div> | |
| <div class="aspect-[9/16] bg-gray-700 flex flex-col items-center justify-center text-xs opacity-90 hover:opacity-100 transition"><span class="font-bold">#News</span><span class="text-gray-400">900</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SEARCH SCREEN --> | |
| <section id="search-screen" class="absolute inset-0 bg-black transition-transform duration-300 transform translate-x-full z-20 flex flex-col"> | |
| <div class="h-16 flex items-center p-4 border-b border-gray-800 flex-shrink-0"> | |
| <button id="search-back-button" class="text-white hover:text-gray-400 transition transform active:scale-90"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg> | |
| </button> | |
| <div class="flex-grow bg-gray-800 rounded-xl px-4 py-2 ml-2"> | |
| <input type="text" placeholder="Search accounts and videos..." class="w-full bg-transparent outline-none text-white placeholder-gray-500 text-sm"> | |
| </div> | |
| </div> | |
| <div class="p-4 flex-grow overflow-y-auto"> | |
| <h2 class="text-xl font-bold mb-4">Explore Categories</h2> | |
| <div class="grid grid-cols-2 gap-4 mb-8"> | |
| <div class="bg-gray-800 rounded-xl p-4 text-center cursor-pointer hover:bg-gray-700 transition transform active:scale-95"> | |
| <div class="w-12 h-12 bg-red-500 rounded-full mx-auto mb-2 flex items-center justify-center text-2xl">😂</div> | |
| <p class="font-semibold">Comedy</p> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-4 text-center cursor-pointer hover:bg-gray-700 transition transform active:scale-95"> | |
| <div class="w-12 h-12 bg-blue-500 rounded-full mx-auto mb-2 flex items-center justify-center text-2xl">🎵</div> | |
| <p class="font-semibold">Music</p> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-4 text-center cursor-pointer hover:bg-gray-700 transition transform active:scale-95"> | |
| <div class="w-12 h-12 bg-green-500 rounded-full mx-auto mb-2 flex items-center justify-center text-2xl">✈️</div> | |
| <p class="font-semibold">Travel</p> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-4 text-center cursor-pointer hover:bg-gray-700 transition transform active:scale-95"> | |
| <div class="w-12 h-12 bg-purple-500 rounded-full mx-auto mb-2 flex items-center justify-center text-2xl">🍔</div> | |
| <p class="font-semibold">Food</p> | |
| </div> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-3">Trending Now</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center p-2 bg-gray-800 rounded-lg cursor-pointer hover:bg-gray-700 transition"> | |
| <div class="w-16 h-16 bg-gray-700 rounded mr-3 flex items-center justify-center"> | |
| <span class="text-2xl">🔥</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">#TikTokChallenge</p> | |
| <p class="text-sm text-gray-400">2.3M views</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-2 bg-gray-800 rounded-lg cursor-pointer hover:bg-gray-700 transition"> | |
| <div class="w-16 h-16 bg-gray-700 rounded mr-3 flex items-center justify-center"> | |
| <span class="text-2xl">🍜</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">#EasyRecipes</p> | |
| <p class="text-sm text-gray-400">1.8M views</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- INBOX SCREEN --> | |
| <section id="inbox-screen" class="absolute inset-0 bg-black transition-transform duration-300 transform translate-x-full z-20 flex flex-col"> | |
| <div class="h-16 flex items-center p-4 border-b border-gray-800 flex-shrink-0"> | |
| <button id="inbox-back-button" class="text-white hover:text-gray-400 transition transform active:scale-90"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg> | |
| </button> | |
| <h2 class="flex-grow text-center text-lg font-bold mr-6">Inbox</h2> | |
| <button class="text-white hover:text-gray-400 transition transform active:scale-90"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path></svg> | |
| </button> | |
| </div> | |
| <div class="p-4 flex-grow overflow-y-auto"> | |
| <div class="flex items-center bg-gray-800 rounded-xl p-3 mb-6"> | |
| <svg class="w-5 h-5 text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg> | |
| <input type="text" placeholder="Search conversations" class="w-full bg-transparent outline-none text-white placeholder-gray-500 text-sm"> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-3">Recent</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center p-2 hover:bg-gray-800 rounded-lg cursor-pointer transition"> | |
| <div class="w-12 h-12 bg-gray-600 rounded-full mr-3 border-2 border-red-500 flex-shrink-0"></div> | |
| <div class="flex-grow"> | |
| <p class="font-medium">@friend123</p> | |
| <p class="text-sm text-gray-400 truncate">Hey! How are you? Loved your last video!</p> | |
| </div> | |
| <span class="text-xs text-gray-500 ml-2 flex-shrink-0">10:42</span> | |
| </div> | |
| <div class="flex items-center p-2 hover:bg-gray-800 rounded-lg cursor-pointer transition"> | |
| <div class="w-12 h-12 bg-gray-600 rounded-full mr-3 flex-shrink-0"></div> | |
| <div class="flex-grow"> | |
| <p class="font-medium">@contentCreator</p> | |
| <p class="text-sm text-gray-400 truncate">Thanks for the feedback!</p> | |
| </div> | |
| <span class="text-xs text-gray-500 ml-2 flex-shrink-0">Yesterday</span> | |
| </div> | |
| <div class="flex items-center p-2 hover:bg-gray-800 rounded-lg cursor-pointer transition"> | |
| <div class="w-12 h-12 bg-gray-600 rounded-full mr-3 flex-shrink-0"></div> | |
| <div class="flex-grow"> | |
| <p class="font-medium">@family</p> | |
| <p class="text-sm text-gray-400 truncate">Dinner tonight?</p> | |
| </div> | |
| <span class="text-xs text-gray-500 ml-2 flex-shrink-0">Mon</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Bottom Navigation --> | |
| <nav class="h-16 bg-black flex justify-around items-center border-t border-gray-800 z-30 flex-shrink-0"> | |
| <div id="nav-home" class="flex flex-col items-center text-xs text-white cursor-pointer hover:text-red-500 transition transform active:scale-95"> | |
| <svg class="w-6 h-6 fill-white nav-icon" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg> | |
| <span>Home</span> | |
| </div> | |
| <div id="nav-search" class="flex flex-col items-center text-xs text-gray-500 cursor-pointer hover:text-red-500 transition transform active:scale-95"> | |
| <svg class="w-6 h-6 fill-gray-500 nav-icon" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zM9.5 14C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg> | |
| <span>Explore</span> | |
| </div> | |
| <!-- Add Button (Styled for emphasis) --> | |
| <button class="bg-red-600 text-white rounded-xl w-14 h-10 flex items-center justify-center shadow-lg shadow-red-500/50 transition duration-200 hover:bg-red-700 transform active:scale-90"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"></path></svg> | |
| </button> | |
| <div id="nav-inbox" class="flex flex-col items-center text-xs text-gray-500 cursor-pointer hover:text-red-500 transition transform active:scale-95"> | |
| <svg class="w-6 h-6 fill-gray-500 nav-icon" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/></svg> | |
| <span>Inbox</span> | |
| </div> | |
| <div id="nav-profile" class="flex flex-col items-center text-xs text-gray-500 cursor-pointer hover:text-red-500 transition transform active:scale-95"> | |
| <div class="w-6 h-6 rounded-full bg-gray-500 border-2 border-transparent nav-icon transition duration-100"></div> | |
| <span>Profile</span> | |
| </div> | |
| </nav> | |
| </div> | |
| <script> | |
| // Navigation functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| feather.replace(); | |
| // Navigation buttons | |
| const navHome = document.getElementById('nav-home'); | |
| const navSearch = document.getElementById('nav-search'); | |
| const navInbox = document.getElementById('nav-inbox'); | |
| const navProfile = document.getElementById('nav-profile'); | |
| // Screens | |
| const videoFeed = document.getElementById('video-feed'); | |
| const searchScreen = document.getElementById('search-screen'); | |
| const inboxScreen = document.getElementById('inbox-screen'); | |
| const profileScreen = document.getElementById('profile-screen'); | |
| // Back buttons | |
| const searchBackButton = document.getElementById('search-back-button'); | |
| const inboxBackButton = document.getElementById('inbox-back-button'); | |
| const profileBackButton = document.getElementById('profile-back-button'); | |
| // Navigation functions | |
| navHome.addEventListener('click', () => { | |
| videoFeed.style.transform = 'translateX(0)'; | |
| searchScreen.style.transform = 'translateX(100%)'; | |
| inboxScreen.style.transform = 'translateX(100%)'; | |
| profileScreen.style.transform = 'translateX(100%)'; | |
| // Update nav icons | |
| document.querySelectorAll('.nav-icon').forEach(icon => { | |
| icon.classList.remove('fill-white'); | |
| icon.classList.add('fill-gray-500'); | |
| }); | |
| navHome.querySelector('.nav-icon').classList.add('fill-white'); | |
| navHome.querySelector('.nav-icon').classList.remove('fill-gray-500'); | |
| }); | |
| navSearch.addEventListener('click', () => { | |
| searchScreen.style.transform = 'translateX(0)'; | |
| videoFeed.style.transform = 'translateX(-100%)'; | |
| inboxScreen.style.transform = 'translateX(100%)'; | |
| profileScreen.style.transform = 'translateX(100%)'; | |
| // Update nav icons | |
| document.querySelectorAll('.nav-icon').forEach(icon => { | |
| icon.classList.remove('fill-white'); | |
| icon.classList.add('fill-gray-500'); | |
| }); | |
| navSearch.querySelector('.nav-icon').classList.add('fill-white'); | |
| navSearch.querySelector('.nav-icon').classList.remove('fill-gray-500'); | |
| }); | |
| navInbox.addEventListener('click', () => { | |
| inboxScreen.style.transform = 'translateX(0)'; | |
| videoFeed.style.transform = 'translateX(-100%)'; | |
| searchScreen.style.transform = 'translateX(100%)'; | |
| profileScreen.style.transform = 'translateX(100%)'; | |
| // Update nav icons | |
| document.querySelectorAll('.nav-icon').forEach(icon => { | |
| icon.classList.remove('fill-white'); | |
| icon.classList.add('fill-gray-500'); | |
| }); | |
| navInbox.querySelector('.nav-icon').classList.add('fill-white'); | |
| navInbox.querySelector('.nav-icon').classList.remove('fill-gray-500'); | |
| }); | |
| navProfile.addEventListener('click', () => { | |
| profileScreen.style.transform = 'translateX(0)'; | |
| videoFeed.style.transform = 'translateX(-100%)'; | |
| searchScreen.style.transform = 'translateX(100%)'; | |
| inboxScreen.style.transform = 'translateX(100%)'; | |
| // Update nav icons | |
| document.querySelectorAll('.nav-icon').forEach(icon => { | |
| icon.classList.remove('fill-white'); | |
| icon.classList.add('fill-gray-500'); | |
| }); | |
| navProfile.querySelector('.nav-icon').classList.add('border-white'); | |
| navProfile.querySelector('.nav-icon').classList.remove('border-transparent'); | |
| }); | |
| // Back button functionality | |
| searchBackButton.addEventListener('click', () => { | |
| searchScreen.style.transform = 'translateX(100%)'; | |
| videoFeed.style.transform = 'translateX(0)'; | |
| // Update nav icons | |
| document.querySelectorAll('.nav-icon').forEach(icon => { | |
| icon.classList.remove('fill-white'); | |
| icon.classList.add('fill-gray-500'); | |
| }); | |
| navHome.querySelector('.nav-icon').classList.add('fill-white'); | |
| navHome.querySelector('.nav-icon').classList.remove('fill-gray-500'); | |
| }); | |
| inboxBackButton.addEventListener('click', () => { | |
| inboxScreen.style.transform = 'translateX(100%)'; | |
| videoFeed.style.transform = 'translateX(0)'; | |
| // Update nav icons | |
| document.querySelectorAll('.nav-icon').forEach(icon => { | |
| icon.classList.remove('fill-white'); | |
| icon.classList.add('fill-gray-500'); | |
| }); | |
| navHome.querySelector('.nav-icon').classList.add('fill-white'); | |
| navHome.querySelector('.nav-icon').classList.remove('fill-gray-500'); | |
| }); | |
| profileBackButton.addEventListener('click', () => { | |
| profileScreen.style.transform = 'translateX(100%)'; | |
| videoFeed.style.transform = 'translateX(0)'; | |
| // Update nav icons | |
| document.querySelectorAll('.nav-icon').forEach(icon => { | |
| icon.classList.remove('fill-white'); | |
| icon.classList.add('fill-gray-500'); | |
| }); | |
| navHome.querySelector('.nav-icon').classList.add('fill-white'); | |
| navHome.querySelector('.nav-icon').classList.remove('fill-gray-500'); | |
| }); | |
| // Like button functionality | |
| document.querySelectorAll('.reel-post').forEach(post => { | |
| const likeButton = post.querySelector('.flex.items-center:first-child'); | |
| likeButton.addEventListener('click', function() { | |
| const likeCount = this.querySelector('span:last-child'); | |
| const currentLikes = parseInt(likeCount.textContent.replace(/[^\d]/g, '')); | |
| if(this.classList.contains('liked')) { | |
| likeCount.textContent = formatNumber(currentLikes - 1); | |
| this.classList.remove('liked'); | |
| } else { | |
| likeCount.textContent = formatNumber(currentLikes + 1); | |
| this.classList.add('liked'); | |
| } | |
| }); | |
| }); | |
| // Format numbers for display | |
| function formatNumber(num) { | |
| if(num >= 1000000) { | |
| return (num/1000000).toFixed(1) + 'M'; | |
| } | |
| if(num >= 1000) { | |
| return (num/1000).toFixed(1) + 'K'; | |
| } | |
| return num.toString(); | |
| } | |
| }); | |
| </script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> | |