File size: 11,251 Bytes
c1308ab | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 | <!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 -->
<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>
<!-- Progress bar -->
<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 Content -->
<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>
<!-- Locked Content Section -->
<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>
<!-- Action Buttons -->
<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>
<!-- Bottom Navigation -->
<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>
// Prevent text selection
document.addEventListener('selectstart', function(e) {
e.preventDefault();
return false;
});
// Simulate button interactions
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');
});
});
// Mark as read functionality
const markAsRead = document.querySelectorAll('button')[2];
markAsRead.addEventListener('click', () => {
alert('Chapter marked as read. Progress updated!');
});
// Reflect button functionality
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> |