bob21b/calisthenics-flow-master
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>PPL Program - Calisthenics Flow Master</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11</head>12<body class="bg-gray-50">13 <custom-navbar></custom-navbar>14 15 <main class="container mx-auto px-4 py-8">16 <div class="flex justify-between items-center mb-8">17 <h1 class="text-3xl font-bold text-primary-700">PPL Program</h1>18 <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg font-medium flex items-center gap-2">19 <i data-feather="plus" class="w-4 h-4"></i> New Workout20 </button>21 </div>22 23 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">24 <!-- Push Day -->25 <div class="bg-white rounded-xl shadow-md overflow-hidden">26 <div class="bg-primary-500 text-white p-4">27 <h2 class="text-xl font-bold flex items-center gap-2">28 <i data-feather="arrow-up" class="w-5 h-5"></i> Push Day29 </h2>30 </div>31 <div class="p-4">32 <div class="mb-4">33 <h3 class="font-semibold text-secondary-700 mb-2">Push-up Progressions</h3>34 <ul class="space-y-2">35 <li class="flex items-center gap-2">36 <i data-feather="check-circle" class="text-primary-500 w-4 h-4"></i>37 <span>Knee Push-ups: 3x8-12</span>38 </li>39 <li class="flex items-center gap-2">40 <i data-feather="circle" class="text-gray-300 w-4 h-4"></i>41 <span>Regular Push-ups: 3x8-12</span>42 </li>43 </ul>44 </div>45 <div class="mb-4">46 <h3 class="font-semibold text-secondary-700 mb-2">Dips Progressions</h3>47 <ul class="space-y-2">48 <li class="flex items-center gap-2">49 <i data-feather="circle" class="text-gray-300 w-4 h-4"></i>50 <span>Bench Dips: 3x8-12</span>51 </li>52 </ul>53 </div>54 <button class="w-full bg-primary-100 text-primary-700 hover:bg-primary-200 py-2 rounded-lg font-medium transition flex items-center justify-center gap-2">55 <i data-feather="play" class="w-4 h-4"></i> Start Workout56 </button>57 </div>58 </div>59 60 <!-- Pull Day -->61 <div class="bg-white rounded-xl shadow-md overflow-hidden">62 <div class="bg-secondary-500 text-white p-4">63 <h2 class="text-xl font-bold flex items-center gap-2">64 <i data-feather="arrow-down" class="w-5 h-5"></i> Pull Day65 </h2>66 </div>67 <div class="p-4">68 <div class="mb-4">69 <h3 class="font-semibold text-secondary-700 mb-2">Pull-up Progressions</h3>70 <ul class="space-y-2">71 <li class="flex items-center gap-2">72 <i data-feather="check-circle" class="text-primary-500 w-4 h-4"></i>73 <span>Scapular Pulls: 3x8-12</span>74 </li>75 <li class="flex items-center gap-2">76 <i data-feather="circle" class="text-gray-300 w-4 h-4"></i>77 <span>Negative Pull-ups: 3x5-8</span>78 </li>79 </ul>80 </div>81 <div class="mb-4">82 <h3 class="font-semibold text-secondary-700 mb-2">Row Progressions</h3>83 <ul class="space-y-2">84 <li class="flex items-center gap-2">85 <i data-feather="circle" class="text-gray-300 w-4 h-4"></i>86 <span>Inverted Rows: 3x8-12</span>87 </li>88 </ul>89 </div>90 <button class="w-full bg-secondary-100 text-secondary-700 hover:bg-secondary-200 py-2 rounded-lg font-medium transition flex items-center justify-center gap-2">91 <i data-feather="play" class="w-4 h-4"></i> Start Workout92 </button>93 </div>94 </div>95 96 <!-- Leg Day -->97 <div class="bg-white rounded-xl shadow-md overflow-hidden">98 <div class="bg-primary-600 text-white p-4">99 <h2 class="text-xl font-bold flex items-center gap-2">100 <i data-feather="activity" class="w-5 h-5"></i> Leg Day101 </h2>102 </div>103 <div class="p-4">104 <div class="mb-4">105 <h3 class="font-semibold text-secondary-700 mb-2">Squat Progressions</h3>106 <ul class="space-y-2">107 <li class="flex items-center gap-2">108 <i data-feather="check-circle" class="text-primary-500 w-4 h-4"></i>109 <span>Assisted Squats: 3x8-12</span>110 </li>111 <li class="flex items-center gap-2">112 <i data-feather="circle" class="text-gray-300 w-4 h-4"></i>113 <span>Bodyweight Squats: 3x12-15</span>114 </li>115 </ul>116 </div>117 <div class="mb-4">118 <h3 class="font-semibold text-secondary-700 mb-2">Lunge Progressions</h3>119 <ul class="space-y-2">120 <li class="flex items-center gap-2">121 <i data-feather="circle" class="text-gray-300 w-4 h-4"></i>122 <span>Static Lunges: 3x8-12 per leg</span>123 </li>124 </ul>125 </div>126 <button class="w-full bg-primary-100 text-primary-700 hover:bg-primary-200 py-2 rounded-lg font-medium transition flex items-center justify-center gap-2">127 <i data-feather="play" class="w-4 h-4"></i> Start Workout128 </button>129 </div>130 </div>131 </div>132 133 <!-- Workout Schedule -->134 <div class="bg-white rounded-xl shadow-md p-6 mb-8">135 <h2 class="text-2xl font-bold text-secondary-800 mb-6">Weekly Schedule</h2>136 <div class="overflow-x-auto">137 <table class="w-full">138 <thead>139 <tr class="bg-gray-100">140 <th class="p-3 text-left text-secondary-700">Day</th>141 <th class="p-3 text-left text-secondary-700">Workout</th>142 <th class="p-3 text-left text-secondary-700">Focus</th>143 <th class="p-3 text-left text-secondary-700">Status</th>144 </tr>145 </thead>146 <tbody class="divide-y divide-gray-200">147 <tr>148 <td class="p-3 font-medium">Monday</td>149 <td class="p-3">Push Day</td>150 <td class="p-3">Chest, Shoulders, Triceps</td>151 <td class="p-3">152 <span class="bg-primary-100 text-primary-700 px-3 py-1 rounded-full text-sm">Completed</span>153 </td>154 </tr>155 <tr>156 <td class="p-3 font-medium">Tuesday</td>157 <td class="p-3">Pull Day</td>158 <td class="p-3">Back, Biceps</td>159 <td class="p-3">160 <span class="bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full text-sm">Pending</span>161 </td>162 </tr>163 <tr>164 <td class="p-3 font-medium">Wednesday</td>165 <td class="p-3">Leg Day</td>166 <td class="p-3">Quads, Hamstrings, Glutes</td>167 <td class="p-3">168 <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">Not Started</span>169 </td>170 </tr>171 <tr>172 <td class="p-3 font-medium">Thursday</td>173 <td class="p-3">Push Day</td>174 <td class="p-3">Chest, Shoulders, Triceps</td>175 <td class="p-3">176 <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">Not Started</span>177 </td>178 </tr>179 <tr>180 <td class="p-3 font-medium">Friday</td>181 <td class="p-3">Pull Day</td>182 <td class="p-3">Back, Biceps</td>183 <td class="p-3">184 <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">Not Started</span>185 </td>186 </tr>187 <tr>188 <td class="p-3 font-medium">Saturday</td>189 <td class="p-3">Leg Day</td>190 <td class="p-3">Quads, Hamstrings, Glutes</td>191 <td class="p-3">192 <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">Not Started</span>193 </td>194 </tr>195 <tr>196 <td class="p-3 font-medium">Sunday</td>197 <td class="p-3">Rest Day</td>198 <td class="p-3">Active Recovery</td>199 <td class="p-3">200 <span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm">Rest</span>201 </td>202 </tr>203 </tbody>204 </table>205 </div>206 </div>207 208 <!-- Program Tips -->209 <div class="bg-white rounded-xl shadow-md p-6">210 <h2 class="text-2xl font-bold text-secondary-800 mb-6">Program Tips</h2>211 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">212 <div class="bg-primary-50 p-4 rounded-lg">213 <h3 class="font-semibold text-primary-700 mb-2 flex items-center gap-2">214 <i data-feather="zap" class="w-5 h-5"></i> Progressive Overload215 </h3>216 <p class="text-secondary-600">Increase reps or move to the next progression when you can complete all sets with good form. Track your progress consistently.</p>217 </div>218 <div class="bg-secondary-50 p-4 rounded-lg">219 <h3 class="font-semibold text-secondary-700 mb-2 flex items-center gap-2">220 <i data-feather="clock" class="w-5 h-5"></i> Rest Periods221 </h3>222 <p class="text-secondary-600">Take 60-90 seconds between sets for hypertrophy, or 2-3 minutes for strength work. Listen to your body.</p>223 </div>224 <div class="bg-primary-50 p-4 rounded-lg">225 <h3 class="font-semibold text-primary-700 mb-2 flex items-center gap-2">226 <i data-feather="rotate-cw" class="w-5 h-5"></i> Consistency227 </h3>228 <p class="text-secondary-600">Stick to the program for at least 8 weeks to see significant results. Trust the process.</p>229 </div>230 <div class="bg-secondary-50 p-4 rounded-lg">231 <h3 class="font-semibold text-secondary-700 mb-2 flex items-center gap-2">232 <i data-feather="heart" class="w-5 h-5"></i> Recovery233 </h3>234 <p class="text-secondary-600">Prioritize sleep (7-9 hours) and nutrition. Include mobility work and active recovery sessions.</p>235 </div>236 </div>237 </div>238 </main>239 240 <custom-footer></custom-footer>241 242 <script src="components/navbar.js"></script>243 <script src="components/footer.js"></script>244 <script src="script.js"></script>245 <script>246 feather.replace();247 </script>248</body>249</html>