Significant Progress
This commit is contained in:
bolade
+113
-143
@@ -1,166 +1,136 @@
|
||||
<div class="page bg-white p-8 max-w-4xl mx-auto">
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<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 class="w-full page bg-white">
|
||||
|
||||
<!-- 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>
|
||||
<!-- Main Content -->
|
||||
<div class="px-8 py-6">
|
||||
<!-- Fat Metabolism Section -->
|
||||
<div class="mb-2">
|
||||
<h2 class="text-xl font-bold text-black mb-4 text-center">
|
||||
Fat Metabolism
|
||||
</h2>
|
||||
|
||||
<!-- 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>
|
||||
<!-- Fat Metabolism Info Boxes -->
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<!-- Fat Max Box -->
|
||||
<div class="bg-gray-200 p-3 rounded-lg text-center">
|
||||
<h3 class="text-base font-bold text-black mb-2">Fat Max</h3>
|
||||
<p class="text-xs text-gray-600 italic mb-2">
|
||||
{{ fat_max_optimal | default('*Optimal
|
||||
10-12Kcals/minute') }}
|
||||
</p>
|
||||
<p class="text-lg font-bold text-black">
|
||||
{{ fat_max_value | default('3.8Kcals/min') }}
|
||||
</p>
|
||||
<p class="text-xs text-black">
|
||||
{{ fat_max_heart_rate | default('49% of Max Heart Rate')
|
||||
}}
|
||||
</p>
|
||||
<p class="text-xs text-black">
|
||||
{{ fat_max_bpm | default('97 bpm') }}
|
||||
</p>
|
||||
</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>
|
||||
<!-- Carbs and Fat Crossover Box -->
|
||||
<div class="bg-gray-200 p-3 rounded-lg text-center">
|
||||
<h3 class="text-base font-bold text-black mb-3">
|
||||
Carbs and Fat Crossover
|
||||
</h3>
|
||||
<p class="text-lg font-bold text-black">
|
||||
{{ crossover_bpm | default('100bpm') }}
|
||||
</p>
|
||||
<p class="text-xs text-black">
|
||||
{{ crossover_heart_rate | default('51% of Max Heart
|
||||
Rate') }}
|
||||
</p>
|
||||
</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>
|
||||
<!-- Fat Metabolism Graph -->
|
||||
<div class="mb-4">
|
||||
<!-- <div class="bg-gray-100 p-2 rounded-lg mb-2">
|
||||
<p class="text-black font-semibold text-center text-sm"></p>
|
||||
{{ fat_metabolism_note | default('100bpm at a speed of
|
||||
4.0mph and incline of 2%') }}
|
||||
</p>
|
||||
</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 class="flex justify-center">
|
||||
<img
|
||||
src="data:image/png;base64, {{ fat_metabolism_chart }}"
|
||||
alt="Fat Metabolism Chart"
|
||||
class="w-full max-w-4xl h-auto object-contain"
|
||||
/>
|
||||
</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>
|
||||
<!-- Recovery Section -->
|
||||
<div class="mb-2">
|
||||
<h2 class="text-xl font-bold text-black mb-4 text-center">
|
||||
Recovery
|
||||
</h2>
|
||||
|
||||
<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>
|
||||
<!-- Recovery Info Boxes -->
|
||||
<div class="grid grid-cols-3 gap-4 mb-4">
|
||||
<!-- Cardiac Recovery -->
|
||||
<div class="bg-gray-200 p-3 rounded-lg text-center">
|
||||
<h3 class="text-sm font-bold text-black mb-2">
|
||||
Cardiac Recovery
|
||||
</h3>
|
||||
<p class="text-xs text-gray-600 mb-2">
|
||||
{{ cardiac_recovery_time | default('(1 minute)') }}
|
||||
</p>
|
||||
<p class="text-lg font-bold text-black">
|
||||
{{ cardiac_recovery_percentage | default('33%') }}
|
||||
</p>
|
||||
</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>
|
||||
<!-- Metabolic Recovery -->
|
||||
<div class="bg-gray-200 p-3 rounded-lg text-center">
|
||||
<h3 class="text-sm font-bold text-black mb-2">
|
||||
Metabolic (CO2) Recovery
|
||||
</h3>
|
||||
<p class="text-xs text-gray-600 mb-2">
|
||||
{{ metabolic_recovery_time | default('(2 minute)') }}
|
||||
</p>
|
||||
<p class="text-lg font-bold text-black">
|
||||
{{ metabolic_recovery_percentage | default('65%') }}
|
||||
</p>
|
||||
</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>
|
||||
<!-- Breath Frequency Recovery -->
|
||||
<div class="bg-gray-200 p-3 rounded-lg text-center">
|
||||
<h3 class="text-sm font-bold text-black mb-2">
|
||||
Breath Frequency Recovery
|
||||
</h3>
|
||||
<p class="text-xs text-gray-600 mb-2">
|
||||
{{ breath_recovery_time | default('(2.5 minute)') }}
|
||||
</p>
|
||||
<p class="text-lg font-bold text-black">
|
||||
{{ breath_recovery_percentage | default('76%') }}
|
||||
</p>
|
||||
</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>
|
||||
<!-- Recovery Graph -->
|
||||
<div class="flex justify-center mb-6">
|
||||
<img
|
||||
src="data:image/png;base64, {{ recovery_chart }}"
|
||||
alt="Recovery Chart"
|
||||
class="w-full max-w-4xl h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resting Heart Rate Table -->
|
||||
<div class="mb-2">
|
||||
<div class="flex justify-center">
|
||||
<img
|
||||
src="data:image/png;base64, {{ rhr_table }}"
|
||||
alt="Resting Heart Rate Table"
|
||||
class="table-image"
|
||||
/>
|
||||
</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