| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CLUB44 - Recovery Blueprint</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet"> |
| <style> |
| body { |
| font-family: 'Montserrat', sans-serif; |
| background-color: #0A0A0A; |
| color: #FFFFFF; |
| -webkit-touch-callout: none; |
| -webkit-user-select: none; |
| -khtml-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| } |
| .content-card { |
| background: linear-gradient(145deg, #1A1A1A, #121212); |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); |
| } |
| .progress-bar { |
| background: linear-gradient(90deg, #FF5F6D, #FFC371); |
| } |
| .locked-content { |
| background: repeating-linear-gradient( |
| 45deg, |
| #1A1A1A, |
| #1A1A1A 10px, |
| #222222 10px, |
| #222222 20px |
| ); |
| } |
| .nav-icon { |
| filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%); |
| } |
| .nav-icon.active { |
| filter: invert(76%) sepia(29%) saturate(659%) hue-rotate(314deg) brightness(101%) contrast(101%); |
| } |
| </style> |
| </head> |
| <body class="min-h-screen flex flex-col"> |
| |
| <header class="pt-12 pb-4 px-6"> |
| <div class="flex justify-between items-center"> |
| <button class="p-2 rounded-full bg-gray-900"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /> |
| </svg> |
| </button> |
| <div class="text-center"> |
| <h1 class="text-xl font-bold">Recovery Blueprint</h1> |
| <p class="text-xs text-gray-400 mt-1">Chapter 3 of 12</p> |
| </div> |
| <button class="p-2 rounded-full bg-gray-900"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" /> |
| </svg> |
| </button> |
| </div> |
| |
| |
| <div class="mt-4"> |
| <div class="w-full bg-gray-800 rounded-full h-1.5"> |
| <div class="progress-bar h-1.5 rounded-full" style="width: 25%"></div> |
| </div> |
| <div class="flex justify-between text-xs text-gray-400 mt-1"> |
| <span>25% completed</span> |
| <span>12 min read</span> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="flex-1 overflow-y-auto px-6 py-4"> |
| <div class="content-card rounded-2xl p-6 mb-6"> |
| <h2 class="text-lg font-bold mb-4">The Science of Muscle Recovery</h2> |
| <p class="text-sm text-gray-300 mb-4 leading-relaxed"> |
| Recovery is where the magic happens. When you train, you're breaking down muscle tissue. It's during recovery that your body repairs these microtears, making your muscles stronger than before. |
| </p> |
| <p class="text-sm text-gray-300 mb-4 leading-relaxed"> |
| The process involves three key phases: |
| </p> |
| <ol class="list-decimal list-inside text-sm text-gray-300 mb-4 space-y-2"> |
| <li class="leading-relaxed"><span class="font-bold">Inflammation Phase</span> (0-6 hours post-workout): Your body sends nutrients to damaged areas</li> |
| <li class="leading-relaxed"><span class="font-bold">Repair Phase</span> (6-48 hours): Muscle fibers rebuild with protein synthesis</li> |
| <li class="leading-relaxed"><span class="font-bold">Remodeling Phase</span> (48-72 hours): Muscles adapt to handle future stress</li> |
| </ol> |
| <div class="my-6 p-4 bg-gray-900 rounded-lg"> |
| <h3 class="text-sm font-bold mb-2 text-yellow-400">CLUB44 Insight</h3> |
| <p class="text-xs text-gray-300 leading-relaxed"> |
| Elite athletes spend as much time optimizing recovery as they do training. Your 1% gains compound when you master both. |
| </p> |
| </div> |
| <p class="text-sm text-gray-300 mb-4 leading-relaxed"> |
| Sleep is the ultimate recovery tool. During deep sleep, your body releases growth hormone which stimulates muscle growth and repair. Aim for 7-9 hours of quality sleep, especially on training days. |
| </p> |
| </div> |
|
|
| |
| <div class="content-card rounded-2xl p-6 mb-6 locked-content relative"> |
| <div class="absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-center rounded-2xl"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-yellow-400 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /> |
| </svg> |
| <h3 class="font-bold text-center">Premium Content Locked</h3> |
| <p class="text-xs text-gray-300 text-center mt-1 px-6">Complete previous chapters to unlock this content</p> |
| </div> |
| <h2 class="text-lg font-bold mb-4">Advanced Recovery Protocols</h2> |
| <p class="text-sm text-gray-300 mb-4 leading-relaxed"> |
| For those looking to optimize every aspect of recovery, these advanced techniques can help you bounce back faster and perform at your peak. |
| </p> |
| <ul class="list-disc list-inside text-sm text-gray-300 mb-4 space-y-2"> |
| <li class="leading-relaxed">Cold water immersion (15°C for 11-15 minutes)</li> |
| <li class="leading-relaxed">Pneumatic compression therapy</li> |
| <li class="leading-relaxed">Targeted photobiomodulation</li> |
| <li class="leading-relaxed">Nutrient timing strategies</li> |
| </ul> |
| </div> |
|
|
| |
| <div class="flex space-x-4 mb-16"> |
| <button class="flex-1 bg-gray-900 hover:bg-gray-800 text-white font-bold py-3 px-4 rounded-xl flex items-center justify-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> |
| </svg> |
| Mark as Read |
| </button> |
| <button class="flex-1 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 px-4 rounded-xl flex items-center justify-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /> |
| </svg> |
| Reflect |
| </button> |
| </div> |
| </main> |
|
|
| |
| <nav class="bg-gray-900 border-t border-gray-800 px-6 py-3 flex justify-around"> |
| <a href="#" class="flex flex-col items-center"> |
| <img src="https://cdn-icons-png.flaticon.com/512/3652/3652191.png" class="h-6 w-6 nav-icon" alt="Dashboard"> |
| <span class="text-xs mt-1">Dashboard</span> |
| </a> |
| <a href="#" class="flex flex-col items-center"> |
| <img src="https://cdn-icons-png.flaticon.com/512/3652/3652151.png" class="h-6 w-6 nav-icon" alt="Logs"> |
| <span class="text-xs mt-1">Logs</span> |
| </a> |
| <a href="#" class="flex flex-col items-center"> |
| <img src="https://cdn-icons-png.flaticon.com/512/3652/3652124.png" class="h-6 w-6 nav-icon active" alt="Vault"> |
| <span class="text-xs mt-1 text-yellow-400">Vault</span> |
| </a> |
| <a href="#" class="flex flex-col items-center"> |
| <img src="https://cdn-icons-png.flaticon.com/512/3652/3652169.png" class="h-6 w-6 nav-icon" alt="Journal"> |
| <span class="text-xs mt-1">Journal</span> |
| </a> |
| <a href="#" class="flex flex-col items-center"> |
| <img src="https://cdn-icons-png.flaticon.com/512/3652/3652139.png" class="h-6 w-6 nav-icon" alt="Profile"> |
| <span class="text-xs mt-1">Profile</span> |
| </a> |
| </nav> |
|
|
| <script> |
| |
| document.addEventListener('selectstart', function(e) { |
| e.preventDefault(); |
| return false; |
| }); |
| |
| |
| const buttons = document.querySelectorAll('button'); |
| buttons.forEach(button => { |
| button.addEventListener('mousedown', () => { |
| button.classList.add('scale-95'); |
| button.classList.add('opacity-90'); |
| }); |
| button.addEventListener('mouseup', () => { |
| button.classList.remove('scale-95'); |
| button.classList.remove('opacity-90'); |
| }); |
| button.addEventListener('mouseleave', () => { |
| button.classList.remove('scale-95'); |
| button.classList.remove('opacity-90'); |
| }); |
| }); |
| |
| |
| const markAsRead = document.querySelectorAll('button')[2]; |
| markAsRead.addEventListener('click', () => { |
| alert('Chapter marked as read. Progress updated!'); |
| }); |
| |
| |
| const reflectBtn = document.querySelectorAll('button')[3]; |
| reflectBtn.addEventListener('click', () => { |
| alert('Opening journal to reflect on this chapter...'); |
| }); |
| </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/educational-page-examples" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
