| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CLUB44 - Fitness & Lifestyle</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap"> |
| <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; |
| } |
| |
| .tab-active { |
| border-bottom: 3px solid #3b82f6; |
| color: #3b82f6; |
| } |
| |
| .log-card { |
| transition: all 0.3s ease; |
| } |
| |
| .log-card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); |
| } |
| |
| .expand-log { |
| max-height: 0; |
| overflow: hidden; |
| transition: max-height 0.5s ease-out; |
| } |
| |
| .expanded { |
| max-height: 500px; |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 5px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: #1a1a1a; |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: #3b82f6; |
| border-radius: 10px; |
| } |
| </style> |
| </head> |
| <body class="relative pb-20"> |
| |
| <header class="bg-black py-4 px-6 flex justify-between items-center border-b border-gray-800"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-blue-700 rounded-full flex items-center justify-center"> |
| <span class="text-white font-bold text-xl">44</span> |
| </div> |
| <h1 class="ml-3 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-bell"></i> |
| </button> |
| </div> |
| </header> |
|
|
| |
| <main class="p-4"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold">Logs</h2> |
| <div class="relative"> |
| <button id="dateFilterBtn" class="flex items-center space-x-2 bg-gray-900 px-3 py-2 rounded-lg"> |
| <span>This Week</span> |
| <i class="fas fa-chevron-down text-xs"></i> |
| </button> |
| <div id="dateFilterDropdown" class="hidden absolute right-0 mt-2 w-48 bg-gray-900 rounded-lg shadow-lg z-10 border border-gray-800"> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-800 rounded-t-lg">Today</a> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-800">This Week</a> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-800">This Month</a> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-800 rounded-b-lg">Custom Range</a> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex overflow-x-auto pb-2 mb-4 scrollbar-hide"> |
| <button class="tab-btn px-4 py-2 mr-2 font-bold tab-active" data-tab="workouts">Workouts</button> |
| <button class="tab-btn px-4 py-2 mr-2 font-bold text-gray-400" data-tab="recovery">Recovery</button> |
| <button class="tab-btn px-4 py-2 mr-2 font-bold text-gray-400" data-tab="habits">Habits</button> |
| <button class="tab-btn px-4 py-2 mr-2 font-bold text-gray-400" data-tab="nutrition">Nutrition</button> |
| <button class="tab-btn px-4 py-2 font-bold text-gray-400" data-tab="goals">Goals</button> |
| </div> |
|
|
| |
| <div id="logsContainer" class="space-y-4"> |
| |
| <div class="log-card bg-gray-900 rounded-xl p-4 border border-gray-800 cursor-pointer" onclick="toggleExpand(this)"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <div class="flex items-center mb-1"> |
| <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div> |
| <h3 class="font-bold">Upper Body Push</h3> |
| </div> |
| <p class="text-gray-400 text-sm">Today, 8:30 AM • 75 min</p> |
| </div> |
| <span class="bg-blue-900 text-blue-400 text-xs px-2 py-1 rounded">RPE: 8</span> |
| </div> |
| <div class="expand-log"> |
| <div class="mt-4 pt-4 border-t border-gray-800"> |
| <h4 class="font-bold mb-2">Exercises:</h4> |
| <ul class="space-y-2"> |
| <li class="flex justify-between"> |
| <span>Bench Press</span> |
| <span class="text-gray-400">4x8 @ 185lbs</span> |
| </li> |
| <li class="flex justify-between"> |
| <span>Overhead Press</span> |
| <span class="text-gray-400">3x10 @ 95lbs</span> |
| </li> |
| <li class="flex justify-between"> |
| <span>Dips</span> |
| <span class="text-gray-400">3x12 @ BW+25lbs</span> |
| </li> |
| </ul> |
| <div class="mt-4"> |
| <h4 class="font-bold mb-2">Notes:</h4> |
| <p class="text-gray-400">Felt strong on bench today. Need to focus on keeping elbows tucked during OHP.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="log-card bg-gray-900 rounded-xl p-4 border border-gray-800 cursor-pointer" onclick="toggleExpand(this)"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <div class="flex items-center mb-1"> |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> |
| <h3 class="font-bold">Lower Body</h3> |
| </div> |
| <p class="text-gray-400 text-sm">Yesterday, 6:00 PM • 60 min</p> |
| </div> |
| <span class="bg-green-900 text-green-400 text-xs px-2 py-1 rounded">RPE: 7</span> |
| </div> |
| <div class="expand-log"> |
| <div class="mt-4 pt-4 border-t border-gray-800"> |
| <h4 class="font-bold mb-2">Exercises:</h4> |
| <ul class="space-y-2"> |
| <li class="flex justify-between"> |
| <span>Squats</span> |
| <span class="text-gray-400">5x5 @ 225lbs</span> |
| </li> |
| <li class="flex justify-between"> |
| <span>Romanian Deadlifts</span> |
| <span class="text-gray-400">3x8 @ 185lbs</span> |
| </li> |
| <li class="flex justify-between"> |
| <span>Bulgarian Split Squats</span> |
| <span class="text-gray-400">3x10 @ 40lbs</span> |
| </li> |
| </ul> |
| <div class="mt-4"> |
| <h4 class="font-bold mb-2">Notes:</h4> |
| <p class="text-gray-400">Knee felt a little tight during squats. Make sure to warm up properly next time.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="log-card bg-gray-900 rounded-xl p-4 border border-gray-800 cursor-pointer" onclick="toggleExpand(this)"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <div class="flex items-center mb-1"> |
| <div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div> |
| <h3 class="font-bold">Cold Plunge</h3> |
| </div> |
| <p class="text-gray-400 text-sm">Yesterday, 7:30 AM • 5 min</p> |
| </div> |
| <span class="bg-purple-900 text-purple-400 text-xs px-2 py-1 rounded">50°F</span> |
| </div> |
| <div class="expand-log"> |
| <div class="mt-4 pt-4 border-t border-gray-800"> |
| <h4 class="font-bold mb-2">Details:</h4> |
| <ul class="space-y-2"> |
| <li class="flex justify-between"> |
| <span>Duration</span> |
| <span class="text-gray-400">5 minutes</span> |
| </li> |
| <li class="flex justify-between"> |
| <span>Temperature</span> |
| <span class="text-gray-400">50°F</span> |
| </li> |
| <li class="flex justify-between"> |
| <span>Breathing</span> |
| <span class="text-gray-400">Controlled</span> |
| </li> |
| </ul> |
| <div class="mt-4"> |
| <h4 class="font-bold mb-2">Notes:</h4> |
| <p class="text-gray-400">Felt great after yesterday's workout. Should do this more regularly.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="log-card bg-gray-900 rounded-xl p-4 border border-gray-800 cursor-pointer" onclick="toggleExpand(this)"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <div class="flex items-center mb-1"> |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> |
| <h3 class="font-bold">Post-Workout Meal</h3> |
| </div> |
| <p class="text-gray-400 text-sm">Today, 10:00 AM</p> |
| </div> |
| <span class="bg-yellow-900 text-yellow-400 text-xs px-2 py-1 rounded">850 cal</span> |
| </div> |
| <div class="expand-log"> |
| <div class="mt-4 pt-4 border-t border-gray-800"> |
| <h4 class="font-bold mb-2">Macros:</h4> |
| <div class="grid grid-cols-3 gap-2 mb-4"> |
| <div class="bg-gray-800 p-2 rounded-lg text-center"> |
| <p class="text-xs text-gray-400">Protein</p> |
| <p class="font-bold">65g</p> |
| </div> |
| <div class="bg-gray-800 p-2 rounded-lg text-center"> |
| <p class="text-xs text-gray-400">Carbs</p> |
| <p class="font-bold">85g</p> |
| </div> |
| <div class="bg-gray-800 p-2 rounded-lg text-center"> |
| <p class="text-xs text-gray-400">Fats</p> |
| <p class="font-bold">25g</p> |
| </div> |
| </div> |
| <h4 class="font-bold mb-2">Food Items:</h4> |
| <ul class="space-y-2"> |
| <li class="flex justify-between"> |
| <span>Grilled Chicken Breast</span> |
| <span class="text-gray-400">8oz</span> |
| </li> |
| <li class="flex justify-between"> |
| <span>White Rice</span> |
| <span class="text-gray-400">1 cup</span> |
| </li> |
| <li class="flex justify-between"> |
| <span>Steamed Broccoli</span> |
| <span class="text-gray-400">1 cup</span> |
| </li> |
| <li class="flex justify-between"> |
| <span>Olive Oil</span> |
| <span class="text-gray-400">1 tbsp</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <button id="addNewBtn" class="fixed bottom-24 right-6 w-14 h-14 bg-blue-600 rounded-full flex items-center justify-center shadow-lg hover:bg-blue-700 transition-colors"> |
| <i class="fas fa-plus text-white text-xl"></i> |
| </button> |
|
|
| |
| <div id="addNewModal" class="hidden fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center p-4"> |
| <div class="bg-gray-900 rounded-xl w-full max-w-md border border-gray-800 max-h-[80vh] overflow-y-auto"> |
| <div class="p-4 border-b border-gray-800 flex justify-between items-center"> |
| <h3 class="font-bold text-lg">New Workout Log</h3> |
| <button onclick="closeModal()" class="text-gray-400 hover:text-white"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="p-4"> |
| <div class="mb-4"> |
| <label class="block text-gray-400 mb-2">Workout Type</label> |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option>Upper Body Push</option> |
| <option>Upper Body Pull</option> |
| <option>Lower Body</option> |
| <option>Full Body</option> |
| <option>Cardio</option> |
| </select> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-400 mb-2">Duration (minutes)</label> |
| <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="60"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-400 mb-2">RPE (Rate of Perceived Exertion)</label> |
| <div class="flex items-center"> |
| <input type="range" min="1" max="10" value="5" class="w-full bg-gray-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <span class="ml-4 w-8 text-center font-bold">5</span> |
| </div> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-400 mb-2">Exercises</label> |
| <div class="space-y-2"> |
| <div class="flex items-center space-x-2"> |
| <input type="text" class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Exercise name"> |
| <button class="bg-gray-800 hover:bg-gray-700 px-3 py-2 rounded-lg"> |
| <i class="fas fa-times text-red-500"></i> |
| </button> |
| </div> |
| <button class="flex items-center text-blue-500"> |
| <i class="fas fa-plus mr-2"></i> |
| <span>Add Exercise</span> |
| </button> |
| </div> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-400 mb-2">Notes</label> |
| <textarea class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 h-24 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="How did it feel? Any observations?"></textarea> |
| </div> |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg mt-2"> |
| Save Workout |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <nav class="fixed bottom-0 left-0 right-0 bg-black border-t border-gray-800 flex justify-around py-3"> |
| <a href="#" class="flex flex-col items-center text-gray-400 hover:text-white"> |
| <i class="fas fa-home text-xl"></i> |
| <span class="text-xs mt-1">Dashboard</span> |
| </a> |
| <a href="#" class="flex flex-col items-center text-blue-500"> |
| <i class="fas fa-clipboard-list text-xl"></i> |
| <span class="text-xs mt-1">Logs</span> |
| </a> |
| <a href="#" class="flex flex-col items-center text-gray-400 hover:text-white"> |
| <i class="fas fa-lock text-xl"></i> |
| <span class="text-xs mt-1">Vault</span> |
| </a> |
| <a href="#" class="flex flex-col items-center text-gray-400 hover:text-white"> |
| <i class="fas fa-book text-xl"></i> |
| <span class="text-xs mt-1">Journal</span> |
| </a> |
| <a href="#" class="flex flex-col items-center text-gray-400 hover:text-white"> |
| <i class="fas fa-user text-xl"></i> |
| <span class="text-xs mt-1">Profile</span> |
| </a> |
| </nav> |
|
|
| <script> |
| |
| function toggleExpand(card) { |
| const expandSection = card.querySelector('.expand-log'); |
| expandSection.classList.toggle('expanded'); |
| |
| |
| document.querySelectorAll('.log-card').forEach(otherCard => { |
| if (otherCard !== card && otherCard.querySelector('.expand-log').classList.contains('expanded')) { |
| otherCard.querySelector('.expand-log').classList.remove('expanded'); |
| } |
| }); |
| } |
| |
| |
| const tabButtons = document.querySelectorAll('.tab-btn'); |
| tabButtons.forEach(button => { |
| button.addEventListener('click', () => { |
| |
| tabButtons.forEach(btn => { |
| btn.classList.remove('tab-active', 'text-blue-500'); |
| btn.classList.add('text-gray-400'); |
| }); |
| button.classList.add('tab-active', 'text-blue-500'); |
| button.classList.remove('text-gray-400'); |
| |
| |
| console.log(`Switched to ${button.dataset.tab} tab`); |
| }); |
| }); |
| |
| |
| const dateFilterBtn = document.getElementById('dateFilterBtn'); |
| const dateFilterDropdown = document.getElementById('dateFilterDropdown'); |
| |
| dateFilterBtn.addEventListener('click', (e) => { |
| e.stopPropagation(); |
| dateFilterDropdown.classList.toggle('hidden'); |
| }); |
| |
| |
| document.addEventListener('click', () => { |
| dateFilterDropdown.classList.add('hidden'); |
| }); |
| |
| |
| const addNewBtn = document.getElementById('addNewBtn'); |
| const addNewModal = document.getElementById('addNewModal'); |
| |
| addNewBtn.addEventListener('click', () => { |
| addNewModal.classList.remove('hidden'); |
| }); |
| |
| function closeModal() { |
| addNewModal.classList.add('hidden'); |
| } |
| |
| |
| const rpeSlider = document.querySelector('input[type="range"]'); |
| const rpeValue = document.querySelector('input[type="range"] + span'); |
| |
| rpeSlider.addEventListener('input', () => { |
| rpeValue.textContent = rpeSlider.value; |
| }); |
| </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/logs-page" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
