Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CLUB44 - Form Guide Vault</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background-color: #0a0a0a; | |
| color: #ffffff; | |
| max-width: 428px; | |
| margin: 0 auto; | |
| position: relative; | |
| height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| .exercise-card { | |
| transition: all 0.3s ease; | |
| } | |
| .exercise-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .filter-chip { | |
| transition: all 0.2s ease; | |
| } | |
| .filter-chip.active { | |
| background-color: #44ffaa; | |
| color: #0a0a0a; | |
| } | |
| .video-container { | |
| aspect-ratio: 16/9; | |
| } | |
| .nav-item.active { | |
| color: #44ffaa; | |
| } | |
| ::-webkit-scrollbar { | |
| width: 0; | |
| background: transparent; | |
| } | |
| </style> | |
| </head> | |
| <body class="relative pb-20"> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-10 bg-black bg-opacity-90 backdrop-blur-sm px-6 py-4 border-b border-gray-800"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-br from-[#44ffaa] to-[#44aaff] flex items-center justify-center"> | |
| <span class="text-black font-bold text-xs">44</span> | |
| </div> | |
| <h1 class="text-xl font-bold">CLUB44</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-ellipsis-vertical"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="px-6 py-4"> | |
| <!-- Page Title and Filter --> | |
| <div class="mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-2xl font-bold">Form Guide Vault</h2> | |
| <button class="text-[#44ffaa] text-sm font-bold">VIEW ALL</button> | |
| </div> | |
| <!-- Body Part Filter Chips --> | |
| <div class="flex space-x-2 overflow-x-auto pb-2 scroll-smooth"> | |
| <button class="filter-chip active px-4 py-2 rounded-full bg-gray-800 text-sm font-bold whitespace-nowrap">All</button> | |
| <button class="filter-chip px-4 py-2 rounded-full bg-gray-800 text-sm font-bold whitespace-nowrap">Upper Body</button> | |
| <button class="filter-chip px-4 py-2 rounded-full bg-gray-800 text-sm font-bold whitespace-nowrap">Lower Body</button> | |
| <button class="filter-chip px-4 py-2 rounded-full bg-gray-800 text-sm font-bold whitespace-nowrap">Core</button> | |
| <button class="filter-chip px-4 py-2 rounded-full bg-gray-800 text-sm font-bold whitespace-nowrap">Push</button> | |
| <button class="filter-chip px-4 py-2 rounded-full bg-gray-800 text-sm font-bold whitespace-nowrap">Pull</button> | |
| <button class="filter-chip px-4 py-2 rounded-full bg-gray-800 text-sm font-bold whitespace-nowrap">Compound</button> | |
| </div> | |
| </div> | |
| <!-- Exercise Grid --> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <!-- Exercise Card 1 --> | |
| <div class="exercise-card bg-gray-900 rounded-xl overflow-hidden border border-gray-800 cursor-pointer"> | |
| <div class="video-container relative bg-gray-800"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-play text-3xl text-[#44ffaa]"></i> | |
| </div> | |
| <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" | |
| alt="Bench Press" class="w-full h-full object-cover opacity-70"> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-bold text-sm mb-1">Bench Press</h3> | |
| <div class="flex items-center text-xs text-gray-400"> | |
| <span class="mr-2">Chest</span> | |
| <i class="fas fa-circle text-[6px] mr-2"></i> | |
| <span>Push</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Exercise Card 2 --> | |
| <div class="exercise-card bg-gray-900 rounded-xl overflow-hidden border border-gray-800 cursor-pointer"> | |
| <div class="video-container relative bg-gray-800"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-play text-3xl text-[#44ffaa]"></i> | |
| </div> | |
| <img src="https://images.unsplash.com/photo-1532029837206-abbe2b7620e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" | |
| alt="Deadlift" class="w-full h-full object-cover opacity-70"> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-bold text-sm mb-1">Deadlift</h3> | |
| <div class="flex items-center text-xs text-gray-400"> | |
| <span class="mr-2">Full Body</span> | |
| <i class="fas fa-circle text-[6px] mr-2"></i> | |
| <span>Pull</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Exercise Card 3 --> | |
| <div class="exercise-card bg-gray-900 rounded-xl overflow-hidden border border-gray-800 cursor-pointer"> | |
| <div class="video-container relative bg-gray-800"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-play text-3xl text-[#44ffaa]"></i> | |
| </div> | |
| <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" | |
| alt="Squat" class="w-full h-full object-cover opacity-70"> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-bold text-sm mb-1">Squat</h3> | |
| <div class="flex items-center text-xs text-gray-400"> | |
| <span class="mr-2">Legs</span> | |
| <i class="fas fa-circle text-[6px] mr-2"></i> | |
| <span>Compound</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Exercise Card 4 --> | |
| <div class="exercise-card bg-gray-900 rounded-xl overflow-hidden border border-gray-800 cursor-pointer"> | |
| <div class="video-container relative bg-gray-800"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-play text-3xl text-[#44ffaa]"></i> | |
| </div> | |
| <img src="https://images.unsplash.com/photo-1532029837206-abbe2b7620e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" | |
| alt="Pull-up" class="w-full h-full object-cover opacity-70"> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-bold text-sm mb-1">Pull-up</h3> | |
| <div class="flex items-center text-xs text-gray-400"> | |
| <span class="mr-2">Back</span> | |
| <i class="fas fa-circle text-[6px] mr-2"></i> | |
| <span>Pull</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Exercise --> | |
| <div class="mt-8"> | |
| <h3 class="text-lg font-bold mb-4">Featured Form Guide</h3> | |
| <div class="bg-gray-900 rounded-xl overflow-hidden border border-gray-800"> | |
| <div class="video-container relative bg-gray-800"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-play text-4xl text-[#44ffaa]"></i> | |
| </div> | |
| <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" | |
| alt="Overhead Press" class="w-full h-full object-cover opacity-70"> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div> | |
| <h3 class="font-bold text-lg mb-1">Overhead Press</h3> | |
| <div class="flex items-center text-sm text-gray-400"> | |
| <span class="mr-2">Shoulders</span> | |
| <i class="fas fa-circle text-[6px] mr-2"></i> | |
| <span>Push</span> | |
| </div> | |
| </div> | |
| <button class="text-[#44ffaa]"> | |
| <i class="fas fa-bookmark text-xl"></i> | |
| </button> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm font-bold">Form Cues</span> | |
| <span class="text-xs text-gray-400">3 steps</span> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-[#44ffaa] flex items-center justify-center mr-2 mt-0.5 flex-shrink-0"> | |
| <span class="text-black font-bold text-xs">1</span> | |
| </div> | |
| <p class="text-sm">Grip the bar slightly wider than shoulder width</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-[#44ffaa] flex items-center justify-center mr-2 mt-0.5 flex-shrink-0"> | |
| <span class="text-black font-bold text-xs">2</span> | |
| </div> | |
| <p class="text-sm">Keep core tight and glutes squeezed</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-[#44ffaa] flex items-center justify-center mr-2 mt-0.5 flex-shrink-0"> | |
| <span class="text-black font-bold text-xs">3</span> | |
| </div> | |
| <p class="text-sm">Press straight up, don't lean back</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full py-3 bg-[#44ffaa] bg-opacity-10 border border-[#44ffaa] rounded-lg text-[#44ffaa] font-bold text-sm flex items-center justify-center"> | |
| <i class="fas fa-play mr-2"></i> Watch Tutorial | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Bottom Navigation --> | |
| <nav class="fixed bottom-0 left-0 right-0 bg-black bg-opacity-90 backdrop-blur-sm border-t border-gray-800 flex justify-around py-3 px-4"> | |
| <a href="#" class="nav-item flex flex-col items-center text-gray-400 active"> | |
| <i class="fas fa-home text-xl mb-1"></i> | |
| <span class="text-xs">Dashboard</span> | |
| </a> | |
| <a href="#" class="nav-item flex flex-col items-center text-gray-400"> | |
| <i class="fas fa-chart-line text-xl mb-1"></i> | |
| <span class="text-xs">Logs</span> | |
| </a> | |
| <a href="#" class="nav-item flex flex-col items-center text-[#44ffaa]"> | |
| <i class="fas fa-dumbbell text-xl mb-1"></i> | |
| <span class="text-xs">Vault</span> | |
| </a> | |
| <a href="#" class="nav-item flex flex-col items-center text-gray-400"> | |
| <i class="fas fa-book text-xl mb-1"></i> | |
| <span class="text-xs">Journal</span> | |
| </a> | |
| <a href="#" class="nav-item flex flex-col items-center text-gray-400"> | |
| <i class="fas fa-user text-xl mb-1"></i> | |
| <span class="text-xs">Profile</span> | |
| </a> | |
| </nav> | |
| <script> | |
| // Filter chip interaction | |
| const filterChips = document.querySelectorAll('.filter-chip'); | |
| filterChips.forEach(chip => { | |
| chip.addEventListener('click', () => { | |
| filterChips.forEach(c => c.classList.remove('active')); | |
| chip.classList.add('active'); | |
| // Here you would filter the exercises based on the selected chip | |
| }); | |
| }); | |
| // Exercise card interaction | |
| const exerciseCards = document.querySelectorAll('.exercise-card'); | |
| exerciseCards.forEach(card => { | |
| card.addEventListener('click', () => { | |
| // Here you would navigate to the exercise detail page | |
| console.log('Navigating to exercise detail'); | |
| }); | |
| }); | |
| </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=44xClub/form-guide" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |