Significant Progress
This commit is contained in:
bolade
+162
-212
@@ -1,216 +1,166 @@
|
||||
<div class="w-full page bg-white">
|
||||
<!-- Header Section -->
|
||||
<!-- Main Content -->
|
||||
<div class="px-8 py-6">
|
||||
<!-- Page Title -->
|
||||
<h1 class="text-3xl font-bold text-black mb-8 text-center">Training Recommendations</h1>
|
||||
|
||||
<!-- Training Recommendations Section -->
|
||||
<div class="grid grid-cols-2 gap-8 mb-8">
|
||||
<!-- Left Side: Zone Recommendations -->
|
||||
<div class="bg-gray-200 p-6 rounded-lg">
|
||||
<!-- Zone 2 Recommendations -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-lg font-bold text-black mb-3">Zone 2 {{ zone2_frequency | default('3-4x/week') }}:</h3>
|
||||
<ul class="text-sm text-black space-y-1 list-disc list-inside">
|
||||
<li>{{ zone2_duration | default('40+ minutes') }} of Steady State Cardio (HR {{ zone2_hr_range | default('____') }} bpm)</li>
|
||||
<li>{{ zone2_speed | default('____ mph') }} at {{ zone2_incline | default('2% Incline') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Zone 3 Recommendations -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-lg font-bold text-black mb-3">Zone 3 {{ zone3_frequency | default('1-2x/week') }}:</h3>
|
||||
<ul class="text-sm text-black space-y-1 list-disc list-inside">
|
||||
<li>{{ zone3_duration | default('10-20 minutes') }} in zone 3 (HR {{ zone3_hr_range | default('____ bpm') }})</li>
|
||||
<li>{{ zone3_speed | default('____mph') }} + at {{ zone3_incline | default('2% Incline') }}</li>
|
||||
<li>Slow down cadence until HR reaches {{ zone3_target_hr | default('___ bpm') }}</li>
|
||||
<li>{{ zone3_recovery_speed | default('____mph') }} at {{ zone3_recovery_incline | default('2% Incline') }}</li>
|
||||
<li>Maintain HR in zone 1 ({{ zone1_hr_range | default('____bpm') }}) for {{ zone1_duration | default('4-8 minutes') }}</li>
|
||||
<li>Repeat {{ zone3_repeats | default('2-3 times') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side: Training Table -->
|
||||
<div>
|
||||
<table class="w-full border-collapse text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold">Type</th>
|
||||
<th class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold">Sets</th>
|
||||
<th class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold">Effort Duration</th>
|
||||
<th class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold">Zone</th>
|
||||
<th class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold">RPE</th>
|
||||
<th class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold">Recovery Duration</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Short Row -->
|
||||
<tr>
|
||||
<td class="border border-gray-400 p-2 text-center text-black font-semibold">Short</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ short_sets | default('8-10') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ short_duration | default('10-30 seconds') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ short_zone | default('5') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ short_rpe | default('10') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ short_recovery | default('20-60 seconds') }}</td>
|
||||
</tr>
|
||||
|
||||
<!-- Medium Row -->
|
||||
<tr>
|
||||
<td class="border border-gray-400 p-2 text-center text-black font-semibold">Medium</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ medium_sets | default('6-8') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ medium_duration | default('30-90 seconds') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ medium_zone | default('4') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ medium_rpe | default('8-9') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ medium_recovery | default('30-90 seconds') }}</td>
|
||||
</tr>
|
||||
|
||||
<!-- Long Row -->
|
||||
<tr>
|
||||
<td class="border border-gray-400 p-2 text-center text-black font-semibold">Long</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ long_sets | default('4-6') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ long_duration | default('5-10 minutes') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ long_zone | default('3/4') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ long_rpe | default('7-8') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ long_recovery | default('2.5-5 minutes') }}</td>
|
||||
</tr>
|
||||
|
||||
<!-- Tempo Row -->
|
||||
<tr>
|
||||
<td class="border border-gray-400 p-2 text-center text-black font-semibold">Tempo</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ tempo_sets | default('2-3') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ tempo_duration | default('10-20 minutes') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ tempo_zone | default('3') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ tempo_rpe | default('6-7') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ tempo_recovery | default('4-8 minutes') }}</td>
|
||||
</tr>
|
||||
|
||||
<!-- Cardio Row -->
|
||||
<tr>
|
||||
<td class="border border-gray-400 p-2 text-center text-black font-semibold">Cardio</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ cardio_sets | default('1') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ cardio_duration | default('>40 minutes') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ cardio_zone | default('2') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ cardio_rpe | default('4-5') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ cardio_recovery | default('N/A') }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Training Week Example Section -->
|
||||
<div class="page bg-white p-8 max-w-4xl mx-auto">
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-black mb-6 text-center">Training Week Example with Progression</h2>
|
||||
|
||||
<!-- Week 1 -->
|
||||
<div class="mb-6">
|
||||
<div class="grid grid-cols-7 gap-2">
|
||||
<!-- Monday -->
|
||||
<div class="bg-cyan-300 p-3 text-center rounded-lg">
|
||||
<div class="font-bold text-black mb-1">Monday</div>
|
||||
<div class="text-sm text-black">{{ week1_mon_zone | default('Zone 2') }}</div>
|
||||
<div class="text-sm text-black">{{ week1_mon_duration | default('45 mins') }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Tuesday -->
|
||||
<div class="bg-cyan-300 p-3 text-center rounded-lg">
|
||||
<div class="font-bold text-black mb-1">Tuesday</div>
|
||||
<div class="text-sm text-black">{{ week1_tue_zone | default('Zone 2') }}</div>
|
||||
<div class="text-sm text-black">{{ week1_tue_duration | default('45 mins') }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Wednesday -->
|
||||
<div class="bg-cyan-300 p-3 text-center rounded-lg">
|
||||
<div class="font-bold text-black mb-1">Wednesday</div>
|
||||
<div class="text-sm text-black">{{ week1_wed_zone | default('Zone 3') }}</div>
|
||||
<div class="text-sm text-black">{{ week1_wed_duration1 | default('10mins On') }}</div>
|
||||
<div class="text-sm text-black">{{ week1_wed_duration2 | default('8mins Rest') }}</div>
|
||||
<div class="text-sm text-black">{{ week1_wed_sets | default('x2') }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Thursday -->
|
||||
<div class="bg-gray-200 p-3 text-center rounded-lg">
|
||||
<div class="font-bold text-black mb-1">Thursday</div>
|
||||
<div class="text-sm text-black">{{ week1_thu_content | default('') }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Friday -->
|
||||
<div class="bg-cyan-300 p-3 text-center rounded-lg">
|
||||
<div class="font-bold text-black mb-1">Friday</div>
|
||||
<div class="text-sm text-black">{{ week1_fri_zone | default('Zone 2') }}</div>
|
||||
<div class="text-sm text-black">{{ week1_fri_duration | default('45 mins') }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Saturday -->
|
||||
<div class="bg-gray-200 p-3 text-center rounded-lg">
|
||||
<div class="font-bold text-black mb-1">Saturday</div>
|
||||
<div class="text-sm text-black">{{ week1_sat_content | default('') }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Sunday -->
|
||||
<div class="bg-gray-200 p-3 text-center rounded-lg">
|
||||
<div class="font-bold text-black mb-1">Sunday</div>
|
||||
<div class="text-sm text-black">{{ week1_sun_content | default('') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Week 2 -->
|
||||
<div class="mb-6">
|
||||
<div class="grid grid-cols-7 gap-2">
|
||||
<!-- Monday -->
|
||||
<div class="bg-cyan-300 p-3 text-center rounded-lg">
|
||||
<div class="font-bold text-black mb-1">Monday</div>
|
||||
<div class="text-sm text-black">{{ week2_mon_zone | default('Zone 2') }}</div>
|
||||
<div class="text-sm text-black">{{ week2_mon_duration | default('50 mins') }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Tuesday -->
|
||||
<div class="bg-cyan-300 p-3 text-center rounded-lg">
|
||||
<div class="font-bold text-black mb-1">Tuesday</div>
|
||||
<div class="text-sm text-black">{{ week2_tue_zone | default('Zone 2') }}</div>
|
||||
<div class="text-sm text-black">{{ week2_tue_duration | default('50 mins') }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Wednesday -->
|
||||
<div class="bg-cyan-300 p-3 text-center rounded-lg">
|
||||
<div class="font-bold text-black mb-1">Wednesday</div>
|
||||
<div class="text-sm text-black">{{ week2_wed_zone | default('Zone 3') }}</div>
|
||||
<div class="text-sm text-black">{{ week2_wed_duration1 | default('10mins On') }}</div>
|
||||
<div class="text-sm text-black">{{ week2_wed_duration2 | default('6mins Rest') }}</div>
|
||||
<div class="text-sm text-black">{{ week2_wed_sets | default('x2') }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Thursday -->
|
||||
<div class="bg-gray-200 p-3 text-center rounded-lg">
|
||||
<div class="font-bold text-black mb-1">Thursday</div>
|
||||
<div class="text-sm text-black">{{ week2_thu_content | default('') }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Friday -->
|
||||
<div class="bg-cyan-300 p-3 text-center rounded-lg">
|
||||
<div class="font-bold text-black mb-1">Friday</div>
|
||||
<div class="text-sm text-black">{{ week2_fri_zone | default('Zone 2') }}</div>
|
||||
<div class="text-sm text-black">{{ week2_fri_duration | default('50 mins') }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Saturday -->
|
||||
<div class="bg-gray-200 p-3 text-center rounded-lg">
|
||||
<div class="font-bold text-black mb-1">Saturday</div>
|
||||
<div class="text-sm text-black">{{ week2_sat_content | default('') }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Sunday -->
|
||||
<div class="bg-gray-200 p-3 text-center rounded-lg">
|
||||
<div class="font-bold text-black mb-1">Sunday</div>
|
||||
<div class="text-sm text-black">{{ week2_sun_content | default('') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold text-gray-900 mb-4">
|
||||
Local Muscle Activity
|
||||
</h1>
|
||||
<h2 class="text-xl font-semibold text-gray-800 mb-2">
|
||||
Muscle Oxygenation Assessment
|
||||
</h2>
|
||||
<p class="text-sm text-gray-600 leading-relaxed">
|
||||
SMO2 testing (Skeletal Muscle Oxygen Saturation) is an analysis of
|
||||
how effectively oxygen is being used at a particular muscle. It
|
||||
helps determine limitations on if the muscle is effectively using
|
||||
oxygen when exercising.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Section -->
|
||||
<!-- Combined Muscle Oxygenation Chart -->
|
||||
<div class="mb-6">
|
||||
<div class="flex justify-center mb-4">
|
||||
<img
|
||||
src="data:image/png;base64,{{ muscle_oxygenation_chart }}"
|
||||
alt="Muscle Oxygenation Chart"
|
||||
class="w-full h-auto max-w-6xl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Metrics Summary Grid -->
|
||||
<div class="grid grid-cols-2 gap-6 mb-6">
|
||||
<!-- Left Leg Metrics -->
|
||||
<div class="bg-blue-50 p-4 rounded-lg border-2 border-blue-200">
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-4 text-center">
|
||||
Left Leg Analysis
|
||||
</h3>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="bg-white p-3 rounded shadow-sm">
|
||||
<div class="text-xs font-semibold text-gray-700 mb-1">
|
||||
Baseline SmO₂
|
||||
</div>
|
||||
<div class="text-lg font-bold text-gray-900">
|
||||
{{ left_baseline_smo2 | default('75.4%') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-3 rounded shadow-sm">
|
||||
<div class="text-xs font-semibold text-gray-700 mb-1">
|
||||
Minimum SmO₂
|
||||
</div>
|
||||
<div class="text-lg font-bold text-gray-900">
|
||||
{{ left_minimum_smo2 | default('69.3%') }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 mt-1">
|
||||
{{ left_minimum_lap | default('Lap 6') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-3 rounded shadow-sm">
|
||||
<div class="text-xs font-semibold text-gray-700 mb-1">
|
||||
Oxygen Drop
|
||||
</div>
|
||||
<div class="text-lg font-bold text-gray-900">
|
||||
{{ left_oxygen_drop | default('6.0%') }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 mt-1">
|
||||
{{ left_drop_percentage | default('8% decrease') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-3 rounded shadow-sm">
|
||||
<div class="text-xs font-semibold text-gray-700 mb-1">
|
||||
Recovery
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 mb-1">
|
||||
"Optimal >100%"
|
||||
</div>
|
||||
<div class="text-lg font-bold text-green-600">
|
||||
{{ left_recovery_percentage | default('109%') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Leg Metrics -->
|
||||
<div class="bg-purple-50 p-4 rounded-lg border-2 border-purple-200">
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-4 text-center">
|
||||
Right Leg Analysis
|
||||
</h3>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="bg-white p-3 rounded shadow-sm">
|
||||
<div class="text-xs font-semibold text-gray-700 mb-1">
|
||||
Baseline SmO₂
|
||||
</div>
|
||||
<div class="text-lg font-bold text-gray-900">
|
||||
{{ right_baseline_smo2 | default('82.9%') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-3 rounded shadow-sm">
|
||||
<div class="text-xs font-semibold text-gray-700 mb-1">
|
||||
Minimum SmO₂
|
||||
</div>
|
||||
<div class="text-lg font-bold text-gray-900">
|
||||
{{ right_minimum_smo2 | default('73.7%') }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 mt-1">
|
||||
{{ right_minimum_lap | default('Lap 6') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-3 rounded shadow-sm">
|
||||
<div class="text-xs font-semibold text-gray-700 mb-1">
|
||||
Oxygen Drop
|
||||
</div>
|
||||
<div class="text-lg font-bold text-gray-900">
|
||||
{{ right_oxygen_drop | default('9.3%') }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 mt-1">
|
||||
{{ right_drop_percentage | default('11% decrease') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-3 rounded shadow-sm">
|
||||
<div class="text-xs font-semibold text-gray-700 mb-1">
|
||||
Recovery
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 mb-1">
|
||||
"Optimal >100%"
|
||||
</div>
|
||||
<div class="text-lg font-bold text-blue-600">
|
||||
{{ right_recovery_percentage | default('97%') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Key Findings Summary -->
|
||||
<div class="bg-gray-100 p-4 rounded-lg">
|
||||
<h3 class="text-base font-bold text-gray-900 mb-3">Key Findings</h3>
|
||||
<div class="text-sm text-gray-700 space-y-2">
|
||||
<p>
|
||||
• <strong>Left leg</strong> showed better oxygen maintenance
|
||||
during high-intensity work
|
||||
</p>
|
||||
<p>
|
||||
•
|
||||
<strong
|
||||
>{{ recovery_assessment | default('Excellent recovery
|
||||
capacity') }}</strong
|
||||
>
|
||||
- both legs recovered well
|
||||
</p>
|
||||
<p>
|
||||
• <strong>Heart rate progression:</strong> {{ hr_warmup |
|
||||
default('93') }} → {{ hr_max | default('168') }} bpm
|
||||
</p>
|
||||
<p>
|
||||
• <strong>Test duration:</strong> {{ test_duration |
|
||||
default('~21 minutes active test') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user