Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Waxir - Spicy Shorts</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> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 500: '#eab308', | |
| DEFAULT: '#eab308', | |
| }, | |
| secondary: { | |
| 500: '#22c55e', | |
| DEFAULT: '#22c55e', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .video-container { | |
| aspect-ratio: 9/16; | |
| } | |
| .blur-overlay { | |
| backdrop-filter: blur(5px); | |
| } | |
| .gradient-overlay { | |
| background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <!-- Logo --> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <span class="text-primary-500 font-bold text-2xl">Waxir</span> | |
| <span class="ml-1 text-yellow-300">🌶️</span> | |
| </div> | |
| <!-- Search --> | |
| <div class="flex-1 flex justify-center px-4 lg:px-0 max-w-md"> | |
| <div class="w-full"> | |
| <label for="search" class="sr-only">Search</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i data-feather="search" class="text-gray-400"></i> | |
| </div> | |
| <input id="search" name="search" class="block w-full pl-10 pr-3 py-2 border border-gray-600 rounded-full bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500" placeholder="Search..." type="search"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right menu --> | |
| <div class="flex items-center"> | |
| <button type="button" class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-1 focus:ring-primary-500"> | |
| <i data-feather="upload-cloud"></i> | |
| </button> | |
| <button type="button" class="ml-3 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-1 focus:ring-primary-500"> | |
| <i data-feather="heart"></i> | |
| </button> | |
| <button type="button" class="ml-3 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-1 focus:ring-primary-500"> | |
| <i data-feather="user"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main content - Reels feed --> | |
| <main class="pb-16"> | |
| <!-- Categories --> | |
| <div class="bg-gray-800 px-4 py-2 overflow-x-auto"> | |
| <div class="flex space-x-4"> | |
| <button class="px-4 py-1 rounded-full bg-primary-500 text-white font-medium text-sm whitespace-nowrap"> | |
| For You | |
| </button> | |
| <button class="px-4 py-1 rounded-full bg-gray-700 text-gray-300 hover:bg-gray-600 font-medium text-sm whitespace-nowrap"> | |
| Trending | |
| </button> | |
| <button class="px-4 py-1 rounded-full bg-gray-700 text-gray-300 hover:bg-gray-600 font-medium text-sm whitespace-nowrap"> | |
| New | |
| </button> | |
| <button class="px-4 py-1 rounded-full bg-gray-700 text-gray-300 hover:bg-gray-600 font-medium text-sm whitespace-nowrap"> | |
| Popular | |
| </button> | |
| <button class="px-4 py-1 rounded-full bg-gray-700 text-gray-300 hover:bg-gray-600 font-medium text-sm whitespace-nowrap"> | |
| Amateur | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Reels grid --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-1 p-1"> | |
| <!-- Video card 1 --> | |
| <div class="relative group overflow-hidden rounded-lg video-container"> | |
| <video class="w-full h-full object-cover" poster="http://static.photos/red/640x360/1" muted loop> | |
| <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> | |
| </video> | |
| <div class="absolute inset-0 gradient-overlay flex flex-col justify-between p-4 opacity-0 group-hover:opacity-100 transition-opacity"> | |
| <div class="flex justify-between"> | |
| <span class="bg-primary-500 text-xs font-bold px-2 py-1 rounded">18+</span> | |
| <button class="text-white bg-black bg-opacity-50 rounded-full p-2"> | |
| <i data-feather="more-vertical" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div> | |
| <div class="flex items-center mb-2"> | |
| <img src="http://static.photos/people/40x40/1" alt="Creator" class="w-8 h-8 rounded-full border-2 border-primary-500"> | |
| <span class="ml-2 font-medium">HotDancer21</span> | |
| </div> | |
| <p class="text-sm line-clamp-2">Late night practice session getting spicy 😈🔥 #dance #spicy</p> | |
| <div class="flex justify-between mt-2"> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="heart" class="w-4 h-4 mr-1"></i> 2.4K | |
| </button> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="message-square" class="w-4 h-4 mr-1"></i> 124 | |
| </button> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="share-2" class="w-4 h-4 mr-1"></i> Share | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video card 2 --> | |
| <div class="relative group overflow-hidden rounded-lg video-container"> | |
| <video class="w-full h-full object-cover" poster="http://static.photos/black/640x360/2" muted loop> | |
| <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> | |
| </video> | |
| <div class="absolute inset-0 gradient-overlay flex flex-col justify-between p-4 opacity-0 group-hover:opacity-100 transition-opacity"> | |
| <div class="flex justify-between"> | |
| <span class="bg-primary-500 text-xs font-bold px-2 py-1 rounded">18+</span> | |
| <button class="text-white bg-black bg-opacity-50 rounded-full p-2"> | |
| <i data-feather="more-vertical" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div> | |
| <div class="flex items-center mb-2"> | |
| <img src="http://static.photos/people/40x40/2" alt="Creator" class="w-8 h-8 rounded-full border-2 border-primary-500"> | |
| <span class="ml-2 font-medium">FlexKing</span> | |
| </div> | |
| <p class="text-sm line-clamp-2">Morning workout routine showing off these gains 💪 #fitness #gym</p> | |
| <div class="flex justify-between mt-2"> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="heart" class="w-4 h-4 mr-1"></i> 3.1K | |
| </button> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="message-square" class="w-4 h-4 mr-1"></i> 87 | |
| </button> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="share-2" class="w-4 h-4 mr-1"></i> Share | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video card 3 --> | |
| <div class="relative group overflow-hidden rounded-lg video-container"> | |
| <video class="w-full h-full object-cover" poster="http://static.photos/red/640x360/3" muted loop> | |
| <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> | |
| </video> | |
| <div class="absolute inset-0 gradient-overlay flex flex-col justify-between p-4 opacity-0 group-hover:opacity-100 transition-opacity"> | |
| <div class="flex justify-between"> | |
| <span class="bg-primary-500 text-xs font-bold px-2 py-1 rounded">18+</span> | |
| <button class="text-white bg-black bg-opacity-50 rounded-full p-2"> | |
| <i data-feather="more-vertical" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div> | |
| <div class="flex items-center mb-2"> | |
| <img src="http://static.photos/people/40x40/3" alt="Creator" class="w-8 h-8 rounded-full border-2 border-primary-500"> | |
| <span class="ml-2 font-medium">BeachBabe</span> | |
| </div> | |
| <p class="text-sm line-clamp-2">Sun, sand and... well you can guess the rest 😘 #beach #bikini</p> | |
| <div class="flex justify-between mt-2"> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="heart" class="w-4 h-4 mr-1"></i> 5.7K | |
| </button> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="message-square" class="w-4 h-4 mr-1"></i> 342 | |
| </button> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="share-2" class="w-4 h-4 mr-1"></i> Share | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video card 4 --> | |
| <div class="relative group overflow-hidden rounded-lg video-container"> | |
| <video class="w-full h-full object-cover" poster="http://static.photos/black/640x360/4" muted loop> | |
| <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> | |
| </video> | |
| <div class="absolute inset-0 gradient-overlay flex flex-col justify-between p-4 opacity-0 group-hover:opacity-100 transition-opacity"> | |
| <div class="flex justify-between"> | |
| <span class="bg-primary-500 text-xs font-bold px-2 py-1 rounded">18+</span> | |
| <button class="text-white bg-black bg-opacity-50 rounded-full p-2"> | |
| <i data-feather="more-vertical" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div> | |
| <div class="flex items-center mb-2"> | |
| <img src="http://static.photos/people/40x40/4" alt="Creator" class="w-8 h-8 rounded-full border-2 border-primary-500"> | |
| <span class="ml-2 font-medium">CosmicLover</span> | |
| </div> | |
| <p class="text-sm line-clamp-2">Exploring new positions from outer space 🚀 #cosplay #scifi</p> | |
| <div class="flex justify-between mt-2"> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="heart" class="w-4 h-4 mr-1"></i> 1.9K | |
| </button> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="message-square" class="w-4 h-4 mr-1"></i> 56 | |
| </button> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="share-2" class="w-4 h-4 mr-1"></i> Share | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video card 5 --> | |
| <div class="relative group overflow-hidden rounded-lg video-container"> | |
| <video class="w-full h-full object-cover" poster="http://static.photos/red/640x360/5" muted loop> | |
| <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> | |
| </video> | |
| <div class="absolute inset-0 gradient-overlay flex flex-col justify-between p-4 opacity-0 group-hover:opacity-100 transition-opacity"> | |
| <div class="flex justify-between"> | |
| <span class="bg-primary-500 text-xs font-bold px-2 py-1 rounded">18+</span> | |
| <button class="text-white bg-black bg-opacity-50 rounded-full p-2"> | |
| <i data-feather="more-vertical" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div> | |
| <div class="flex items-center mb-2"> | |
| <img src="http://static.photos/people/40x40/5" alt="Creator" class="w-8 h-8 rounded-full border-2 border-primary-500"> | |
| <span class="ml-2 font-medium">MasseusePro</span> | |
| </div> | |
| <p class="text-sm line-clamp-2">Special techniques for deep relaxation... very deep 😉 #massage #sensual</p> | |
| <div class="flex justify-between mt-2"> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="heart" class="w-4 h-4 mr-1"></i> 4.2K | |
| </button> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="message-square" class="w-4 h-4 mr-1"></i> 231 | |
| </button> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="share-2" class="w-4 h-4 mr-1"></i> Share | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video card 6 --> | |
| <div class="relative group overflow-hidden rounded-lg video-container"> | |
| <video class="w-full h-full object-cover" poster="http://static.photos/black/640x360/6" muted loop> | |
| <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> | |
| </video> | |
| <div class="absolute inset-0 gradient-overlay flex flex-col justify-between p-4 opacity-0 group-hover:opacity-100 transition-opacity"> | |
| <div class="flex justify-between"> | |
| <span class="bg-primary-500 text-xs font-bold px-2 py-1 rounded">18+</span> | |
| <button class="text-white bg-black bg-opacity-50 rounded-full p-2"> | |
| <i data-feather="more-vertical" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div> | |
| <div class="flex items-center mb-2"> | |
| <img src="http://static.photos/people/40x40/6" alt="Creator" class="w-8 h-8 rounded-full border-2 border-primary-500"> | |
| <span class="ml-2 font-medium">PoolParty</span> | |
| </div> | |
| <p class="text-sm line-clamp-2">When the pool party gets a little too wild 🍑 #pool #bikini</p> | |
| <div class="flex justify-between mt-2"> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="heart" class="w-4 h-4 mr-1"></i> 7.1K | |
| </button> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="message-square" class="w-4 h-4 mr-1"></i> 498 | |
| </button> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="share-2" class="w-4 h-4 mr-1"></i> Share | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video card 7 --> | |
| <div class="relative group overflow-hidden rounded-lg video-container"> | |
| <video class="w-full h-full object-cover" poster="http://static.photos/red/640x360/7" muted loop> | |
| <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> | |
| </video> | |
| <div class="absolute inset-0 gradient-overlay flex flex-col justify-between p-4 opacity-0 group-hover:opacity-100 transition-opacity"> | |
| <div class="flex justify-between"> | |
| <span class="bg-primary-500 text-xs font-bold px-2 py-1 rounded">18+</span> | |
| <button class="text-white bg-black bg-opacity-50 rounded-full p-2"> | |
| <i data-feather="more-vertical" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div> | |
| <div class="flex items-center mb-2"> | |
| <img src="http://static.photos/people/40x40/7" alt="Creator" class="w-8 h-8 rounded-full border-2 border-primary-500"> | |
| <span class="ml-2 font-medium">YogaQueen</span> | |
| </div> | |
| <p class="text-sm line-clamp-2">Showing off my flexibility in ways you wouldn't believe 🧘♀️ #yoga #flexible</p> | |
| <div class="flex justify-between mt-2"> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="heart" class="w-4 h-4 mr-1"></i> 3.8K | |
| </button> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="message-square" class="w-4 h-4 mr-1"></i> 187 | |
| </button> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="share-2" class="w-4 h-4 mr-1"></i> Share | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video card 8 --> | |
| <div class="relative group overflow-hidden rounded-lg video-container"> | |
| <video class="w-full h-full object-cover" poster="http://static.photos/black/640x360/8" muted loop> | |
| <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> | |
| </video> | |
| <div class="absolute inset-0 gradient-overlay flex flex-col justify-between p-4 opacity-0 group-hover:opacity-100 transition-opacity"> | |
| <div class="flex justify-between"> | |
| <span class="bg-primary-500 text-xs font-bold px-2 py-1 rounded">18+</span> | |
| <button class="text-white bg-black bg-opacity-50 rounded-full p-2"> | |
| <i data-feather="more-vertical" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div> | |
| <div class="flex items-center mb-2"> | |
| <img src="http://static.photos/people/40x40/8" alt="Creator" class="w-8 h-8 rounded-full border-2 border-primary-500"> | |
| <span class="ml-2 font-medium">LateNightLover</span> | |
| </div> | |
| <p class="text-sm line-clamp-2">What happens when the lights go out... 😏 #bedroom #couple</p> | |
| <div class="flex justify-between mt-2"> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="heart" class="w-4 h-4 mr-1"></i> 6.3K | |
| </button> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="message-square" class="w-4 h-4 mr-1"></i> 412 | |
| </button> | |
| <button class="flex items-center text-sm"> | |
| <i data-feather="share-2" class="w-4 h-4 mr-1"></i> Share | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Bottom navigation --> | |
| <div class="fixed bottom-0 left-0 right-0 bg-gray-800 border-t border-gray-700 flex justify-around py-3 z-50"> | |
| <a href="#" class="text-primary-500 flex flex-col items-center"> | |
| <i data-feather="home" class="w-6 h-6"></i> | |
| <span class="text-xs mt-1">Home</span> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white flex flex-col items-center"> | |
| <i data-feather="compass" class="w-6 h-6"></i> | |
| <span class="text-xs mt-1">Explore</span> | |
| </a> | |
| <a href="#" class="bg-primary-500 text-white rounded-full p-3 -mt-8 shadow-lg shadow-primary-500/30"> | |
| <i data-feather="plus" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white flex flex-col items-center"> | |
| <i data-feather="heart" class="w-6 h-6"></i> | |
| <span class="text-xs mt-1">Likes</span> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white flex flex-col items-center"> | |
| <i data-feather="user" class="w-6 h-6"></i> | |
| <span class="text-xs mt-1">Profile</span> | |
| </a> | |
| </div> | |
| <!-- Age verification modal --> | |
| <div class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 blur-overlay"> | |
| <div class="bg-gray-800 rounded-lg p-8 max-w-md w-full mx-4 border border-primary-500 shadow-lg"> | |
| <div class="text-center mb-6"> | |
| <h2 class="text-2xl font-bold text-primary-500 mb-2">🔞 Age Verification</h2> | |
| <p class="text-gray-300">This website contains adult content and is only for viewers 18+</p> | |
| </div> | |
| <div class="flex flex-col space-y-4"> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white font-bold py-3 px-4 rounded-full transition"> | |
| I am 18 or older - Enter | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 text-gray-300 font-bold py-3 px-4 rounded-full transition"> | |
| I am under 18 - Exit | |
| </button> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-6 text-center">By entering, you agree to our Terms of Service and acknowledge our Privacy Policy</p> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Simple video play/pause on hover | |
| document.querySelectorAll('.video-container').forEach(container => { | |
| const video = container.querySelector('video'); | |
| container.addEventListener('mouseenter', () => { | |
| video.play().catch(e => console.log('Autoplay prevented:', e)); | |
| }); | |
| container.addEventListener('mouseleave', () => { | |
| video.pause(); | |
| video.currentTime = 0; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |