Refactor code structure for improved readability and maintainability
This commit is contained in:
bolade
@@ -0,0 +1,12 @@
|
||||
<div class=" bg-black text-white px-6 py-3">
|
||||
<div class="flex justify-between items-center text-sm">
|
||||
<div class="flex space-x-8">
|
||||
<span>contact: {{ contact_email }}</span>
|
||||
<span>website: {{ website }}</span>
|
||||
<span>social: {{ social }}</span>
|
||||
</div>
|
||||
<div class="bg-white text-black font-bold px-3 py-1 text-lg">
|
||||
{{ page_number }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,14 @@
|
||||
|
||||
<div class="bg-black text-white px-6 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="text-lg font-bold mr-2">ISHP</div>
|
||||
<div class="w-6 h-4 bg-cyan-400 mr-8"></div>
|
||||
</div>
|
||||
<div class="flex space-x-8 text-sm">
|
||||
<span>Name: {{ patient_name }}</span>
|
||||
<span>Age: {{ age }}</span>
|
||||
<span>Height: {{ height }}</span>
|
||||
<span>Weight: {{ weight }}</span>
|
||||
<span>Focus: {{ focus }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,40 @@
|
||||
<div
|
||||
class="w-full page bg-black text-white relative overflow-hidden"
|
||||
>
|
||||
<!-- ISHP Logo/Text -->
|
||||
<div class="absolute top-8 left-8 z-20">
|
||||
<h1 class="text-2xl font-bold tracking-wider">ISHP</h1>
|
||||
</div>
|
||||
|
||||
<!-- Diagonal Cyan Stripe -->
|
||||
<div class="absolute top-0 left-0 w-full h-full">
|
||||
<div
|
||||
class="absolute top-0 left-0 w-96 h-full bg-gradient-to-r from-cyan-300 to-cyan-400 transform -skew-x-12 origin-top-left"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content Container -->
|
||||
<div
|
||||
class="relative z-10 flex flex-col justify-center items-end h-full pr-16"
|
||||
>
|
||||
<!-- BIO-PERFORMX Section -->
|
||||
<div class="text-right mb-8">
|
||||
<h1 class="text-6xl font-bold tracking-wider mb-2">BIO-PERFORMX</h1>
|
||||
<p class="text-3xl italic font-light">Endurance</p>
|
||||
</div>
|
||||
|
||||
<!-- Name and Date Section -->
|
||||
<div class="text-right mt-16">
|
||||
<h2 class="text-4xl font-bold tracking-wider mb-2">
|
||||
{{ name|upper }}
|
||||
</h2>
|
||||
<h2 class="text-4xl font-bold tracking-wider mb-6">
|
||||
{{ surname|upper }}
|
||||
</h2>
|
||||
<p class="text-xl italic underline">{{ date }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dotted Pattern at Bottom -->
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
<div class="w-full page bg-white">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="px-8 py-6">
|
||||
<!-- VO2 Pulse Section -->
|
||||
<div class="mb-8">
|
||||
<!-- VO2 Pulse Header -->
|
||||
<div class="bg-gray-200 p-4 rounded-lg mb-4 text-center">
|
||||
<h2 class="text-lg font-bold text-black">VO2 Pulse</h2>
|
||||
<p class="text-black">Begins to drop at {{ vo2_pulse_drop_bpm | default('180 bpm') }} ({{ vo2_pulse_drop_zone | default('Zone 4') }})</p>
|
||||
</div>
|
||||
|
||||
<!-- VO2 Pulse Graph -->
|
||||
<div class="flex justify-center mb-6">
|
||||
<img src="data:image/png;base64, {{ vo2_pulse_chart }}"
|
||||
alt="VO2 Pulse Chart"
|
||||
class="w-full max-w-4xl h-auto object-contain">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- VO2 Breath Section -->
|
||||
<div class="mb-8">
|
||||
<!-- VO2 Breath Header -->
|
||||
<div class="bg-gray-200 p-4 rounded-lg mb-4 text-center">
|
||||
<h2 class="text-lg font-bold text-black">VO2 Breath</h2>
|
||||
<p class="text-black">Begins to drop at {{ vo2_breath_drop_bpm | default('173 bpm') }} ({{ vo2_breath_drop_zone | default('Zone 3') }})</p>
|
||||
</div>
|
||||
|
||||
<!-- VO2 Breath Graph -->
|
||||
<div class="flex justify-center mb-6">
|
||||
<img src="data:image/png;base64, {{ vo2_breath_chart }}"
|
||||
alt="VO2 Breath Chart"
|
||||
class="w-full max-w-4xl h-auto object-contain">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,231 @@
|
||||
<div class="w-full page bg-white">
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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="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>
|
||||
|
||||
<!-- Recovery Section -->
|
||||
<div class="mb-2">
|
||||
<h2 class="text-xl font-bold text-black mb-4 text-center">
|
||||
Recovery
|
||||
</h2>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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">
|
||||
<h3 class="text-base font-bold text-black mb-2 text-center">
|
||||
Resting Heart Rate - {{ resting_heart_rate | default('53bpm') }}
|
||||
</h3>
|
||||
|
||||
<table class="w-full border-collapse text-xs">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold"
|
||||
>
|
||||
Age (F)
|
||||
</th>
|
||||
<th
|
||||
class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold"
|
||||
>
|
||||
Poor
|
||||
</th>
|
||||
<th
|
||||
class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold"
|
||||
>
|
||||
Below Average
|
||||
</th>
|
||||
<th
|
||||
class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold"
|
||||
>
|
||||
Average
|
||||
</th>
|
||||
<th
|
||||
class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold"
|
||||
>
|
||||
Above Average
|
||||
</th>
|
||||
<th
|
||||
class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold"
|
||||
>
|
||||
Good
|
||||
</th>
|
||||
<th
|
||||
class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold"
|
||||
>
|
||||
Excellent
|
||||
</th>
|
||||
<th
|
||||
class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold relative"
|
||||
>
|
||||
Athlete
|
||||
<!-- Arrow indicator -->
|
||||
<div
|
||||
class="absolute -bottom-3 left-1/2 transform -translate-x-1/2"
|
||||
>
|
||||
<div
|
||||
class="w-0 h-0 border-l-3 border-r-3 border-t-6 border-transparent border-t-black"
|
||||
></div>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="bg-cyan-200 border border-gray-400 p-2 text-black font-semibold text-center"
|
||||
>
|
||||
{{ hr_age_range | default('26-35') }}
|
||||
</td>
|
||||
<td
|
||||
class="bg-gray-100 border border-gray-400 p-2 text-black text-center"
|
||||
>
|
||||
{{ hr_poor | default('82bpm +') }}
|
||||
</td>
|
||||
<td
|
||||
class="bg-gray-100 border border-gray-400 p-2 text-black text-center"
|
||||
>
|
||||
{{ hr_below_avg | default('75-81bpm') }}
|
||||
</td>
|
||||
<td
|
||||
class="bg-gray-100 border border-gray-400 p-2 text-black text-center"
|
||||
>
|
||||
{{ hr_average | default('71-74bpm') }}
|
||||
</td>
|
||||
<td
|
||||
class="bg-gray-100 border border-gray-400 p-2 text-black text-center"
|
||||
>
|
||||
{{ hr_above_avg | default('66-70bpm') }}
|
||||
</td>
|
||||
<td
|
||||
class="bg-gray-100 border border-gray-400 p-2 text-black text-center"
|
||||
>
|
||||
{{ hr_good | default('62-65bpm') }}
|
||||
</td>
|
||||
<td
|
||||
class="bg-gray-100 border border-gray-400 p-2 text-black text-center"
|
||||
>
|
||||
{{ hr_excellent | default('55-61bpm') }}
|
||||
</td>
|
||||
<td
|
||||
class="bg-green-200 border border-gray-400 p-2 text-black text-center font-bold"
|
||||
>
|
||||
{{ hr_athlete | default('44-54bpm') }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,76 @@
|
||||
<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>
|
||||
|
||||
<!-- Right Leg Section -->
|
||||
<div class="mb-12">
|
||||
<h3 class="text-lg font-semibold text-center text-gray-800 mb-6">Indications - Right Leg</h3>
|
||||
|
||||
<div class="flex gap-8">
|
||||
<!-- Chart Image -->
|
||||
<div class="flex-1">
|
||||
<img src="right-leg-chart.png" alt="Right Leg SMO2 Chart" class="w-full h-auto">
|
||||
</div>
|
||||
|
||||
<!-- Right Side Info -->
|
||||
<div class="w-48 space-y-4">
|
||||
<div class="bg-gray-100 p-3 rounded">
|
||||
<div class="text-xs font-semibold text-gray-700 mb-1">Surplus</div>
|
||||
<div class="text-xs text-gray-600">Supply > Demand at a heart rate and speed of:</div>
|
||||
<div class="text-sm font-bold text-gray-800">n/a</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-100 p-3 rounded">
|
||||
<div class="text-xs font-semibold text-gray-700 mb-1">Supply Threshold</div>
|
||||
<div class="text-xs text-gray-600">Demand outstrips supply at a heart rate of:</div>
|
||||
<div class="text-sm font-bold text-gray-800">154bpm @ 5.0mph</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-100 p-3 rounded">
|
||||
<div class="text-xs font-semibold text-gray-700 mb-1">Recovery</div>
|
||||
<div class="text-xs text-gray-600">"Optimal >100%"</div>
|
||||
<div class="text-sm font-bold text-gray-800">n/a</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Left Leg Section -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-center text-gray-800 mb-6">Indications - Left Leg</h3>
|
||||
|
||||
<div class="flex gap-8">
|
||||
<!-- Chart Image -->
|
||||
<div class="flex-1">
|
||||
<img src="left-leg-chart.png" alt="Left Leg SMO2 Chart" class="w-full h-auto">
|
||||
</div>
|
||||
|
||||
<!-- Right Side Info -->
|
||||
<div class="w-48 space-y-4">
|
||||
<div class="bg-gray-100 p-3 rounded">
|
||||
<div class="text-xs font-semibold text-gray-700 mb-1">Surplus</div>
|
||||
<div class="text-xs text-gray-600">Supply > Demand at a heart rate and speed of:</div>
|
||||
<div class="text-sm font-bold text-gray-800">n/a</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-100 p-3 rounded">
|
||||
<div class="text-xs font-semibold text-gray-700 mb-1">Supply Threshold</div>
|
||||
<div class="text-xs text-gray-600">Demand outstrips supply at a heart rate of:</div>
|
||||
<div class="text-sm font-bold text-gray-800">165 bpm @ 5.5mph</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-100 p-3 rounded">
|
||||
<div class="text-xs font-semibold text-gray-700 mb-1">Recovery</div>
|
||||
<div class="text-xs text-gray-600">"Optimal >100%"</div>
|
||||
<div class="text-sm font-bold text-gray-800">n/a</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,216 @@
|
||||
<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="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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Section -->
|
||||
</div>
|
||||
@@ -0,0 +1,148 @@
|
||||
<div class="w-full page bg-white">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="px-8 py-6">
|
||||
<!-- Page Title -->
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-3xl font-bold text-black mb-2">Training Week</h1>
|
||||
<p class="text-gray-600 italic">(To be filled out by your trainer)</p>
|
||||
</div>
|
||||
|
||||
<!-- First Training Week Grid -->
|
||||
<div class="mb-8">
|
||||
<div class="grid grid-cols-7 gap-2 mb-4">
|
||||
<!-- Week 1 Headers -->
|
||||
<div class="bg-cyan-300 p-2 text-center rounded-lg">
|
||||
<div class="font-bold text-black">Monday</div>
|
||||
</div>
|
||||
<div class="bg-cyan-300 p-2 text-center rounded-lg">
|
||||
<div class="font-bold text-black">Tuesday</div>
|
||||
</div>
|
||||
<div class="bg-cyan-300 p-2 text-center rounded-lg">
|
||||
<div class="font-bold text-black">Wednesday</div>
|
||||
</div>
|
||||
<div class="bg-cyan-300 p-2 text-center rounded-lg">
|
||||
<div class="font-bold text-black">Thursday</div>
|
||||
</div>
|
||||
<div class="bg-cyan-300 p-2 text-center rounded-lg">
|
||||
<div class="font-bold text-black">Friday</div>
|
||||
</div>
|
||||
<div class="bg-gray-200 p-2 text-center rounded-lg">
|
||||
<div class="font-bold text-black">Saturday</div>
|
||||
</div>
|
||||
<div class="bg-gray-200 p-2 text-center rounded-lg">
|
||||
<div class="font-bold text-black">Sunday</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Week 1 Content Boxes -->
|
||||
<div class="grid grid-cols-7 gap-2 mb-8">
|
||||
<div class="bg-gray-100 border-2 border-gray-300 h-32 rounded-lg"></div>
|
||||
<div class="bg-gray-100 border-2 border-gray-300 h-32 rounded-lg"></div>
|
||||
<div class="bg-gray-100 border-2 border-gray-300 h-32 rounded-lg"></div>
|
||||
<div class="bg-gray-100 border-2 border-gray-300 h-32 rounded-lg"></div>
|
||||
<div class="bg-gray-100 border-2 border-gray-300 h-32 rounded-lg"></div>
|
||||
<div class="bg-gray-100 border-2 border-gray-300 h-32 rounded-lg"></div>
|
||||
<div class="bg-gray-100 border-2 border-gray-300 h-32 rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Second Training Week Grid -->
|
||||
<div class="mb-8">
|
||||
<div class="grid grid-cols-7 gap-2 mb-4">
|
||||
<!-- Week 2 Headers -->
|
||||
<div class="bg-cyan-300 p-2 text-center rounded-lg">
|
||||
<div class="font-bold text-black">Monday</div>
|
||||
</div>
|
||||
<div class="bg-cyan-300 p-2 text-center rounded-lg">
|
||||
<div class="font-bold text-black">Tuesday</div>
|
||||
</div>
|
||||
<div class="bg-cyan-300 p-2 text-center rounded-lg">
|
||||
<div class="font-bold text-black">Wednesday</div>
|
||||
</div>
|
||||
<div class="bg-cyan-300 p-2 text-center rounded-lg">
|
||||
<div class="font-bold text-black">Thursday</div>
|
||||
</div>
|
||||
<div class="bg-cyan-300 p-2 text-center rounded-lg">
|
||||
<div class="font-bold text-black">Friday</div>
|
||||
</div>
|
||||
<div class="bg-gray-200 p-2 text-center rounded-lg">
|
||||
<div class="font-bold text-black">Saturday</div>
|
||||
</div>
|
||||
<div class="bg-gray-200 p-2 text-center rounded-lg">
|
||||
<div class="font-bold text-black">Sunday</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Week 2 Content Boxes -->
|
||||
<div class="grid grid-cols-7 gap-2 mb-8">
|
||||
<div class="bg-gray-100 border-2 border-gray-300 h-32 rounded-lg"></div>
|
||||
<div class="bg-gray-100 border-2 border-gray-300 h-32 rounded-lg"></div>
|
||||
<div class="bg-gray-100 border-2 border-gray-300 h-32 rounded-lg"></div>
|
||||
<div class="bg-gray-100 border-2 border-gray-300 h-32 rounded-lg"></div>
|
||||
<div class="bg-gray-100 border-2 border-gray-300 h-32 rounded-lg"></div>
|
||||
<div class="bg-gray-100 border-2 border-gray-300 h-32 rounded-lg"></div>
|
||||
<div class="bg-gray-100 border-2 border-gray-300 h-32 rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Training Week Guidelines Section -->
|
||||
<div class="mb-6">
|
||||
<h2 class="text-2xl font-bold text-black mb-6 text-center">Training Week Guidelines</h2>
|
||||
|
||||
<!-- Guidelines Grid -->
|
||||
<div class="grid grid-cols-5 gap-4 mb-6">
|
||||
<!-- Zone 1 -->
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-black mb-3">Zone 1</h3>
|
||||
<ul class="text-sm text-black space-y-2 list-disc list-inside">
|
||||
<li>Zone 1 training is low intensity, for active recovery.</li>
|
||||
<li>It can be done daily or even consecutively, depending on fitness, volume, and health.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Zone 2 -->
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-black mb-3">Zone 2</h3>
|
||||
<ul class="text-sm text-black space-y-2 list-disc list-inside">
|
||||
<li>Zone 2 training can be done on consecutive or daily basis with moderate sessions.</li>
|
||||
<li>Can be steady state or interval sessions.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Zone 3 -->
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-black mb-3">Zone 3</h3>
|
||||
<ul class="text-sm text-black space-y-2 list-disc list-inside">
|
||||
<li>Zone 3 training can be done 1-5 times per week.</li>
|
||||
<li>Wait 24 to 48 hours between sessions for adequate recovery.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Zone 4 -->
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-black mb-3">Zone 4</h3>
|
||||
<ul class="text-sm text-black space-y-2 list-disc list-inside">
|
||||
<li>Zone 4 training: 1-4 times per week.</li>
|
||||
<li>Wait 24 to 48 hours between intense sessions for recovery.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Zone 5 -->
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-black mb-3">Zone 5</h3>
|
||||
<ul class="text-sm text-black space-y-2 list-disc list-inside">
|
||||
<li>Zone 5 training: 1-2 times per week.</li>
|
||||
<li>Wait 48 hours between sessions for recovery.</li>
|
||||
<li>Zone 5 increases VO2 max and endurance at VO2 max.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Important Note -->
|
||||
<div class="text-center">
|
||||
<p class="text-lg font-bold text-black italic">Zone 3, 4, 5 can be combined with Zone 1 or 2 - the higher zone should be done first!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,70 @@
|
||||
<div class="w-full page bg-white">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="px-8 py-6">
|
||||
<!-- Page Title -->
|
||||
<h1 class="text-3xl font-bold text-black mb-8">Next Steps:</h1>
|
||||
|
||||
<!-- Calorie Tracking Section -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-bold text-black mb-4">Calorie Tracking</h2>
|
||||
<ul class="text-black space-y-2 list-disc list-inside ml-4">
|
||||
<li>Download and create an account with My Fitness Pal (or preferred nutrition tracker)</li>
|
||||
<li>Fill out the "My Profile" section with your goals (ie: height, weight, target weight)
|
||||
<ul class="mt-2 ml-6 space-y-1 list-disc list-inside">
|
||||
<li>Input your Macros</li>
|
||||
<li>Click the three dots on the bottom right corner</li>
|
||||
<li>Click "Goals"</li>
|
||||
<li>Click "Calorie, Carbs, Protein and Fat Goals" under the Nutrition Goals</li>
|
||||
<li>Set the Calories, Carbs, Protein, and Fat to the recommended macro outlined above.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Once completed fill out your food intake from each meal on the main page</li>
|
||||
</ul>
|
||||
|
||||
<!-- Recommendation Note -->
|
||||
<div class="mt-6 text-center">
|
||||
<p class="text-black italic font-semibold">It's highly recommended to purchase a weight and food scale for more accurate results.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Daily Tasks Section -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-bold text-black mb-4">Daily Tasks</h2>
|
||||
<ul class="text-black space-y-2 list-disc list-inside ml-4">
|
||||
<li>Weigh yourself in the morning, after your first bowel movement, and naked</li>
|
||||
<li>Log your weight into your my fitness pal app</li>
|
||||
<li>Track calories in grams - FOLLOW YOUR PERSONAL RECOMMENDATIONS.</li>
|
||||
<li>Log in a diary:
|
||||
<ul class="mt-2 ml-6 space-y-1 list-disc list-inside">
|
||||
<li>Log any additional prescribed recommendation (i.e breath work)</li>
|
||||
<li>Complete the prescribed training recommendations (i.e Zone 2 Training)</li>
|
||||
<li>Log additional physical activity (i.e Monday - Strength Training 1 hour)</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Two weeks after Appointment Section -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-bold text-black mb-4">Two weeks after Appointment</h2>
|
||||
<ul class="text-black space-y-2 list-disc list-inside ml-4">
|
||||
<li>Should you find the macronutrient breakdown difficult to follow, reach out to us to discuss a change within your caloric parameters</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Contact Information -->
|
||||
<div class="mb-12 text-center">
|
||||
<p class="text-lg font-bold text-black">Should you have any questions or concerns please contact us!</p>
|
||||
</div>
|
||||
|
||||
<!-- Recommended Next Testing Date -->
|
||||
<div class="mb-8 text-center">
|
||||
<h2 class="text-2xl font-bold text-black">
|
||||
<span class="underline">Recommended Next Testing Date:</span>
|
||||
<span class="ml-2">October 2025</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,57 @@
|
||||
<div class="w-full page bg-white">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="px-6">
|
||||
<!-- Page Title -->
|
||||
<h1 class="text-2xl font-bold text-black mb-4">Glossary</h1>
|
||||
|
||||
<!-- Body Fat Percentage -->
|
||||
<div class="mb-3">
|
||||
<h2 class="text-base font-bold text-black mb-1">Body Fat Percentage:</h2>
|
||||
<p class="text-xs text-black leading-snug">The percentage of your overall body weight that is composed of fat cells. Body fat percentage can be reduced by either losing weight from fat mass, while maintaining lean mass, or maintaining fat mass while increasing lean mass.</p>
|
||||
</div>
|
||||
|
||||
<!-- Metabolic Rate -->
|
||||
<div class="mb-3">
|
||||
<h2 class="text-base font-bold text-black mb-1">Metabolic Rate:</h2>
|
||||
<p class="text-xs text-black leading-snug">Metabolic Rate measures the number of calories your body burns for basic functions and movement, based on factors like weight, age, gender, and height. A higher metabolic rate helps prevent weight gain and supports weight loss by ensuring you burn enough calories. Tracking metabolic rate is key for managing weight and preventing conditions linked to metabolic dysfunction. Positive influences include resistance exercise, proper sleep, and adequate protein, while negative factors include extreme dieting, yo-yo dieting, and excessive cardio. Improving it involves resistance training and optimal nutrition.</p>
|
||||
</div>
|
||||
|
||||
<!-- Fuel Source -->
|
||||
<div class="mb-3">
|
||||
<h2 class="text-base font-bold text-black mb-1">Fuel Source:</h2>
|
||||
<p class="text-xs text-black leading-snug mb-1">Fat-burning efficiency measures your cells' ability to use fat as fuel, reflecting mitochondrial and cellular health. It indicates how well your body balances fat and carbohydrate usage to support energy needs, assessed by analyzing oxygen and carbon dioxide in your breath. High fat-burning efficiency suggests strong metabolic and mitochondrial function, linked to better weight management and longevity.</p>
|
||||
<p class="text-xs text-black leading-snug">To improve fat-burning efficiency, focus on Zone 2 endurance training and potentially intermittent fasting to enhance oxygen absorption and cellular function. Zone 5 interval training will also help improve fat burning mitochondrial density and capillarization. Factors that reduce fat burning ability include diets high in processed foods, alcohol, and large meals before bed. Conditions related to metabolic stress also hinder fat burning abilities.</p>
|
||||
</div>
|
||||
|
||||
<!-- NEAT -->
|
||||
<div class="mb-3">
|
||||
<h2 class="text-base font-bold text-black mb-1">NEAT (Non-Exercise Activity Thermogenesis)</h2>
|
||||
<p class="text-xs text-black leading-snug">refers to the energy expended for all activities that are not deliberate exercise or structured physical activity. This includes daily movements such as walking, fidgeting, standing, cleaning, typing, and even simple tasks like cooking or shopping. NEAT contributes significantly to the total caloric expenditure and plays a key role in maintaining body weight and overall energy balance. It varies widely among individuals, depending on lifestyle, occupation, and habits.</p>
|
||||
</div>
|
||||
|
||||
<!-- Spirometry -->
|
||||
<div class="mb-3">
|
||||
<h2 class="text-base font-bold text-black mb-1">Spirometry:</h2>
|
||||
<p class="text-xs text-black leading-snug mb-1">Spirometry is a diagnostic device used to provide objective measurements of lung volumes and capacities. Lung function is crucial for oxygen delivery during physical activity, and comparing spirometry results to expected values can highlight any potential limitations to performance.</p>
|
||||
<p class="text-xs text-black leading-snug mb-1">"From a Performance standpoint, it is essential in making informed training recommendations related to respiratory health to optimize endurance performance and metabolic health."</p>
|
||||
|
||||
<!-- Spirometry Sub-definitions -->
|
||||
<ul class="text-xs text-black space-y-1 list-disc list-inside ml-3">
|
||||
<li><strong>FEV1:</strong> Forced Expiratory Volume - the total amount of air expelled in the first second.</li>
|
||||
<li><strong>FVC:</strong> Forced Vital Capacity - the maximum amount of air exhaled in one breath after a maximum inhalation</li>
|
||||
<li><strong>FEV1/FVC:</strong> Calculated ratio used in the diagnosis of obstructive & restrictive lung disease.</li>
|
||||
</ul>
|
||||
|
||||
<p class="text-xs text-black leading-snug mt-1">By comparing these measurements to expected values based on age, gender, height and ethnicity, healthcare professionals can diagnose a range of lung conditions such as asthma, COPD, restrictive lung diseases, and more.</p>
|
||||
</div>
|
||||
|
||||
<!-- VO2 max -->
|
||||
<div>
|
||||
<h2 class="text-base font-bold text-black mb-1">VO2 max:</h2>
|
||||
<p class="text-xs text-black leading-snug mb-1">VO2 Max, or maximal oxygen consumption serves as a valuable indicator of overall fitness, cardiovascular health, and endurance capacity. VO2 max reflects the efficiency of your heart lung system in pumping oxygen-rich blood to working muscles. A higher VO2 max indicates a stronger cardiovascular system, which is associated with a reduced risk of heart disease and other cardiovascular issues.</p>
|
||||
<p class="text-xs text-black leading-snug">Understanding and training to increase your VO2 max can contribute to enhanced physical performance, longevity and well-being.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,88 @@
|
||||
<!-- Header -->
|
||||
<div class="w-full page">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="p-4 text-sm">
|
||||
<h1 class="text-2xl font-bold mb-4">Glossary</h1>
|
||||
|
||||
<div class="space-y-3 leading-tight">
|
||||
<!-- Peak VT -->
|
||||
<div>
|
||||
<p class="font-semibold">Peak VT:</p>
|
||||
<p class="mb-1">
|
||||
Peak Volume of air moved throughout the test.
|
||||
</p>
|
||||
<p class="mb-1">
|
||||
Respiratory Capability Limitations that can be found include:
|
||||
</p>
|
||||
<ul class="list-disc ml-4 space-y-0">
|
||||
<li>
|
||||
<strong>Endurance:</strong> Normal capacity, but cannot maintain their VT over time.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Strength/Power:</strong> Normal capacity, but peak VT is not 75-85% of their FEV1 despite FEV1 being normal
|
||||
</li>
|
||||
<li>
|
||||
<strong>Coordination (Hyper/Hypo-Ventilation):</strong> Normal capacity, but uses low volumes +/- high BFs at lower intensities. A breathing coordination limitation can also be identified by the loss of volume at higher intensities, which are then recovered upon recovery/stop of activity.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- VO2 Pulse -->
|
||||
<div>
|
||||
<p class="font-semibold">VO2 Pulse:</p>
|
||||
<p>
|
||||
VO2 Pulse refers to the relationship between oxygen consumption (VO2) and heart rate (HR) during exercise. This measure gives insight into how efficiently the body is using oxygen in relation to the heart's output. A higher VO2 Pulse suggests that an individual is able to deliver oxygen more efficiently to the muscles with each heartbeat.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- VO2 Breath -->
|
||||
<div>
|
||||
<p class="font-semibold">VO2 Breath:</p>
|
||||
<p>
|
||||
VO2 Breath refers to the amount of oxygen consumed per breath during exercise, which indicates how effectively the body delivers oxygen to the bloodstream through the lungs with each breath. A more efficient VO2 Breath means the body requires less effort to obtain the same amount of oxygen, indicating better respiratory efficiency and oxygen utilization.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Carb & Fat Crossover -->
|
||||
<div>
|
||||
<p class="font-semibold">Carb & Fat Crossover:</p>
|
||||
<p class="mb-1">
|
||||
The point during exercise at which the body shifts its predominant fuel source from fats to carbohydrates. This transition typically occurs as exercise intensity increases, and marks the transition from Zone 2 into Zone 3. As exercise intensity increases, the body starts to rely more on carbohydrates because they provide faster energy.
|
||||
</p>
|
||||
<p>
|
||||
Endurance training (e.g., long, steady-state cardio within Zones 1 & 2) increases the body's ability to burn fat efficiently at higher intensities, shifting the crossover point to a faster speed, or higher heart rate/intensity. Because fat stores are much larger and can provide a steady stream of energy for prolonged periods, a higher CHO/FAT crossover can help delay fatigue, which is especially beneficial in longer-duration events, where carbohydrate depletion can lead to a significant drop in performance.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Cardiovascular Recovery -->
|
||||
<div>
|
||||
<p class="font-semibold">Cardiovascular Recovery:</p>
|
||||
<p>
|
||||
The percentage your heart rate drops within the first minute of the inactive recovery phase in relation to the lowest heart rate recorded prior to the start of the test.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Metabolic (CO2) Recovery -->
|
||||
<div>
|
||||
<p class="font-semibold">Metabolic (CO2) Recovery:</p>
|
||||
<p class="mb-1">
|
||||
The percentage that your VCO2 levels (amount of CO2 you are exhaling) drop within the first 1.5 minutes of the inactive recovery phase in relation to the lowest VCO2 recorded prior to the start of the test.
|
||||
</p>
|
||||
<p>
|
||||
refers to the rate at which the body clears carbon dioxide (CO2) after exercise, reflecting the efficiency of the cardiovascular and respiratory systems in returning CO2 levels to baseline. A faster VCO2 recovery indicates effective management of metabolic byproducts, signaling a healthier metabolic system and lower risk of metabolic disorders.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Breath Frequency Recovery -->
|
||||
<div>
|
||||
<p class="font-semibold">Breath Frequency Recovery:</p>
|
||||
<p>
|
||||
Refers to the speed at which the body returns to a normal breathing rate after physical exertion. Faster breath frequency recovery indicates a well-conditioned cardiovascular and respiratory system, allowing the body to efficiently regulate oxygen and CO2 levels. It supports better endurance, faster recovery between intervals, and the ability to sustain higher performance during repeated efforts or prolonged activity. Additionally, a quick return to baseline signals that the autonomic nervous system is functioning well, reducing stress on the body and promoting more efficient recovery. This also reflects a healthier metabolic system, better management of metabolic byproducts like CO2, and a lower risk of chronic conditions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
</div>
|
||||
@@ -0,0 +1,38 @@
|
||||
<div class="w-full page">
|
||||
<!-- Main Content -->
|
||||
<div class="p-8">
|
||||
<h1 class="text-4xl font-bold mb-8">Glossary</h1>
|
||||
|
||||
<!-- Local Muscle Activity/SMO2 Definition -->
|
||||
<div class="mb-12 text-sm leading-relaxed">
|
||||
<p class="font-semibold mb-2">Local Muscle Activity/SMO2:</p>
|
||||
<p>
|
||||
SmO2 testing is a valuable tool for understanding how muscles
|
||||
respond to various physiological stressors and how to fine-tune
|
||||
training, nutrition and hydration accordingly. Monitoring
|
||||
changes in tissue oxygen saturation and utilization helps
|
||||
identify an individual's optimal intensity to work at, as well
|
||||
as how well they recover between bouts of intensity. This can
|
||||
help optimize training to improve performance, prevent
|
||||
overtraining, and tailor strategies for better results.
|
||||
</p>
|
||||
<p>
|
||||
During competitions, athletes can also use SmO2 data to pace
|
||||
themselves effectively. Adjusting intensity based on muscle
|
||||
oxygenation can help prevent premature fatigue and optimize race
|
||||
outcomes
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-5xl">
|
||||
<h1 class="text-2xl font-bold mb-4 text-center">
|
||||
Body Fat Percent Master Chart
|
||||
</h1>
|
||||
<img
|
||||
src="data:image/png;base64,{{ body_fat_percentage_chart }}"
|
||||
alt="Body Fat Percentage"
|
||||
class="w-full h-auto object-contain chart-large"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,814 @@
|
||||
<div class="w-full page bg-white">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="p-6">
|
||||
<h1 class="text-3xl font-bold mb-6">Glossary</h1>
|
||||
|
||||
<!-- Resting Heart Rate Section -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-bold mb-4 text-center">
|
||||
Resting Heart Rate
|
||||
</h2>
|
||||
|
||||
<!-- Male Table -->
|
||||
<div class="mb-4">
|
||||
<table
|
||||
class="w-full border-collapse border border-gray-300 text-xs"
|
||||
>
|
||||
<thead>
|
||||
<tr class="bg-cyan-200">
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Age (M)
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Poor
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Below Average
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Average
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Above Average
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Good
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Excellent
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Athlete
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="border border-gray-300 p-1 font-medium text-center"
|
||||
>
|
||||
18-25
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
85bpm +
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
76-84bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
74-78bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
70-73bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
66-69bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
61-65bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
60-60bpm
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="border border-gray-300 p-1 font-medium text-center"
|
||||
>
|
||||
26-35
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
83bpm +
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
77-82bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
73-76bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
69-72bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
65-68bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
60-64bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
55-59bpm
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="border border-gray-300 p-1 font-medium text-center"
|
||||
>
|
||||
36-45
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
85bpm +
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
79-84bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
74-78bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
70-73bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
65-69bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
60-64bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
55-59bpm
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="border border-gray-300 p-1 font-medium text-center"
|
||||
>
|
||||
46-55
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
84bpm +
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
76-83bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
73-77bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
70-72bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
66-69bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
61-65bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
56-60bpm
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="border border-gray-300 p-1 font-medium text-center"
|
||||
>
|
||||
56-65
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
85bpm +
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
78-84bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
74-77bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
70-73bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
65-69bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
60-64bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
50-59bpm
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="border border-gray-300 p-1 font-medium text-center"
|
||||
>
|
||||
65+
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
84bpm +
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
77-83bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
73-76bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
70-73bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
65-69bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
60-64bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
55-59bpm
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Female Table -->
|
||||
<div class="mb-4">
|
||||
<table
|
||||
class="w-full border-collapse border border-gray-300 text-xs"
|
||||
>
|
||||
<thead>
|
||||
<tr class="bg-cyan-200">
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Age (F)
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Poor
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Below Average
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Average
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Above Average
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Good
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Excellent
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Athlete
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="border border-gray-300 p-1 font-medium text-center"
|
||||
>
|
||||
18-25
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
81bpm +
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
74-81bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
73-78bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
66-69bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
62-65bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
56-61bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
50-55bpm
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="border border-gray-300 p-1 font-medium text-center"
|
||||
>
|
||||
26-35
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
82bpm +
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
75-81bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
71-74bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
66-70bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
62-65bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
55-61bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
54-54bpm
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="border border-gray-300 p-1 font-medium text-center"
|
||||
>
|
||||
36-45
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
83bpm +
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
76-82bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
71-75bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
67-70bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
63-66bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
57-62bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
47-56bpm
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="border border-gray-300 p-1 font-medium text-center"
|
||||
>
|
||||
46-55
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
84bpm +
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
77-83bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
72-76bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
68-71bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
64-67bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
58-63bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
49-57bpm
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="border border-gray-300 p-1 font-medium text-center"
|
||||
>
|
||||
56-65
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
82bpm +
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
76-81bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
72-75bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
68-71bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
62-67bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
57-61bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
51-56bpm
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="border border-gray-300 p-1 font-medium text-center"
|
||||
>
|
||||
65+
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
80bpm +
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
74-79bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
70-73bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
66-69bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
62-65bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
56-61bpm
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
52-55bpm
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- VO2 Master Chart Section -->
|
||||
<div class="mb-4">
|
||||
<h2 class="text-xl font-bold mb-4 text-center">
|
||||
VO2 Master Chart
|
||||
</h2>
|
||||
|
||||
<!-- Male VO2 Table -->
|
||||
<div class="mb-4">
|
||||
<table
|
||||
class="w-full border-collapse border border-gray-300 text-xs"
|
||||
>
|
||||
<thead>
|
||||
<tr class="bg-cyan-200">
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Age (M)
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Very Poor
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Poor
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Fair
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Good
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Excellent
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Superior
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="border border-gray-300 p-1 font-medium text-center"
|
||||
>
|
||||
20-29
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
29.0-38.1
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
38.1-44.9
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
44.9-50.2
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
50.2-61.8
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
57.1-66.3
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
66.3+
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="border border-gray-300 p-1 font-medium text-center"
|
||||
>
|
||||
30-39
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
27.2-34.1
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
34.1-39.6
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
39.6-45.2
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
45.2-51.6
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
51.6-59.8
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
59.8+
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="border border-gray-300 p-1 font-medium text-center"
|
||||
>
|
||||
40-49
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
24.2-30.5
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
30.5-35.7
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
35.7-40.3
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
40.3-46.7
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
46.7-55.6
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
55.6+
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="border border-gray-300 p-1 font-medium text-center"
|
||||
>
|
||||
50-59
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
20.9-26.1
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
26.1-30.7
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
30.7-35.1
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
35.1-41.2
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
41.2-50.7
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
50.7+
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="border border-gray-300 p-1 font-medium text-center"
|
||||
>
|
||||
60-69
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
17.4-22.4
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
22.4-26.6
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
26.6-30.5
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
30.5-36.1
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
36.1-43.0
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
43.0+
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Female VO2 Table -->
|
||||
<div class="mb-4">
|
||||
<table
|
||||
class="w-full border-collapse border border-gray-300 text-xs"
|
||||
>
|
||||
<thead>
|
||||
<tr class="bg-cyan-200">
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Age (F)
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Very Poor
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Poor
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Fair
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Good
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Excellent
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 p-1 font-bold text-center"
|
||||
>
|
||||
Superior
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="border border-gray-300 p-1 font-medium text-center"
|
||||
>
|
||||
20-29
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
21.7-28.6
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
28.6-34.6
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
34.6-40.6
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
40.6-46.5
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
46.5-56.0
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
56.0+
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="border border-gray-300 p-1 font-medium text-center"
|
||||
>
|
||||
30-39
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
19.0-24.1
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
24.1-28.2
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
28.2-32.2
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
32.2-35.7
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
35.7-45.8
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
45.8+
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="border border-gray-300 p-1 font-medium text-center"
|
||||
>
|
||||
40-49
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
17.0-21.3
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
21.3-24.9
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
24.9-28.7
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
28.7-34.0
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
34.0-41.7
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
41.7+
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="border border-gray-300 p-1 font-medium text-center"
|
||||
>
|
||||
50-59
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
16.0-19.1
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
19.1-24.4
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
21.8-27.6
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
25.2-28.6
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
28.6-35.9
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
35.9+
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="border border-gray-300 p-1 font-medium text-center"
|
||||
>
|
||||
60-69
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
13.4-16.5
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
16.5-18.9
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
18.9-21.2
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
21.2-24.6
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
24.6-29.4
|
||||
</td>
|
||||
<td class="border border-gray-300 p-1 text-center">
|
||||
29.4+
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,129 @@
|
||||
<div class="bg-white w-full page m-0 px-10">
|
||||
<div class="px-16 py-10">
|
||||
<!-- Table of Contents Header -->
|
||||
<div class="mb-8">
|
||||
<h1
|
||||
class="text-5xl font-bold text-black mb-6 tracking-wide border-b-4 border-blue-500 pb-2 text-center"
|
||||
>
|
||||
TABLE OF CONTENTS
|
||||
</h1>
|
||||
<div class="w-full h-1 bg-cyan-400"></div>
|
||||
</div>
|
||||
|
||||
<!-- Table of Contents Items -->
|
||||
<div class="flex flex-col justify-between space-y-6 py-6">
|
||||
<!-- Lung Analysis -->
|
||||
<div class="flex items-start bg-gray-200 h-24">
|
||||
<div
|
||||
class="bg-black text-white text-2xl font-bold w-16 h-full flex items-center justify-center mr-8 flex-shrink-0"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<div class="flex flex-col flex-1 py-1 justify-center h-full">
|
||||
<h2 class="text-2xl font-semibold text-black">
|
||||
Lung Analysis
|
||||
</h2>
|
||||
<p class="text-gray-600 text-base">
|
||||
Pulse Oximetry Assessment
|
||||
</p>
|
||||
<p class="text-gray-600 text-base">
|
||||
Spirometry Assessment
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cardio Metrics -->
|
||||
<div class="flex items-start bg-gray-200 h-24">
|
||||
<div
|
||||
class="bg-black text-white text-2xl font-bold w-16 h-full flex items-center justify-center mr-8 flex-shrink-0"
|
||||
>
|
||||
4
|
||||
</div>
|
||||
<div class="flex flex-col py-1 flex-1 justify-center h-full">
|
||||
<h2 class="text-2xl font-semibold text-black mb-3">
|
||||
Cardio Metrics
|
||||
</h2>
|
||||
<p class="text-gray-600 text-base">
|
||||
Active Metabolic Rate Assessment
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fuel Utilization -->
|
||||
<div class="flex items-start bg-gray-200 h-24">
|
||||
<div
|
||||
class="bg-black text-white text-2xl font-bold w-16 h-full flex items-center justify-center mr-8 flex-shrink-0"
|
||||
>
|
||||
5
|
||||
</div>
|
||||
<div class="flex flex-col py-1 flex-1 justify-center flex-1 h-full">
|
||||
<h2 class="text-2xl font-semibold text-black">
|
||||
Fuel Utilization
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Local Muscle Activity -->
|
||||
<div class="flex items-start bg-gray-200 h-24">
|
||||
<div
|
||||
class="bg-black text-white text-2xl font-bold w-16 h-full flex items-center justify-center mr-8 flex-shrink-0"
|
||||
>
|
||||
9
|
||||
</div>
|
||||
<div class="flex flex-col justify-center h-full flex-1">
|
||||
<h2 class="text-2xl font-semibold text-black">
|
||||
Local Muscle Activity
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Training Recommendations -->
|
||||
<div class="flex items-start bg-gray-200 h-24">
|
||||
<div
|
||||
class="bg-black text-white text-2xl font-bold w-16 h-full flex items-center justify-center mr-8 flex-shrink-0"
|
||||
>
|
||||
10
|
||||
</div>
|
||||
<div class="flex flex-col h-full justify-center flex-1">
|
||||
<h2 class="text-2xl font-semibold text-black">
|
||||
Training Recommendations
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Next Steps -->
|
||||
<div class="flex items-start bg-gray-200 h-24">
|
||||
<div
|
||||
class="bg-black text-white text-2xl font-bold w-16 h-full flex items-center justify-center mr-8 flex-shrink-0"
|
||||
>
|
||||
12
|
||||
</div>
|
||||
<div class="flex flex-col h-full justify-center flex-1">
|
||||
<h2 class="text-2xl font-semibold text-black">
|
||||
Next Steps
|
||||
</h2>
|
||||
<div class="space-y-2">
|
||||
<!-- No sub-items -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Glossary -->
|
||||
<div class="flex items-start bg-gray-200 h-24">
|
||||
<div
|
||||
class="bg-black text-white text-2xl font-bold w-16 h-full flex items-center justify-center mr-8 flex-shrink-0"
|
||||
>
|
||||
13
|
||||
</div>
|
||||
<div class="flex flex-col h-full justify-center flex-1">
|
||||
<h2 class="text-2xl font-semibold text-black">
|
||||
Glossary
|
||||
</h2>
|
||||
<div class="space-y-2">
|
||||
<!-- No sub-items -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,157 @@
|
||||
<div class="w-full page bg-white">
|
||||
<!-- Main Content -->
|
||||
<div class="px-6 py-4">
|
||||
<!-- Page Title -->
|
||||
<h1 class="text-3xl font-bold text-black mb-6">Overview</h1>
|
||||
|
||||
<!-- Top Row: Metabolic and Respiratory -->
|
||||
<div class="grid grid-cols-2 gap-6 mb-6">
|
||||
<!-- Metabolic Section -->
|
||||
<div class="border border-gray-300 rounded-lg p-3">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-6 h-6 bg-gray-400 rounded-full mr-2"></div>
|
||||
<h2 class="text-lg font-bold">Metabolic</h2>
|
||||
</div>
|
||||
|
||||
<table class="w-full text-xs border-collapse">
|
||||
<tr>
|
||||
<th class="bg-gray-200 p-2 border text-left font-semibold">Resting Metabolic Rate</th>
|
||||
<th class="bg-gray-200 p-2 border text-left font-semibold">Active Metabolic Rate</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bg-red-200 p-2 border">Fat/Carbohydrate Ratio</td>
|
||||
<td class="bg-red-200 p-2 border">Metabolic Efficiency Low Intensity</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bg-gray-200 p-2 border">Metabolism</td>
|
||||
<td class="bg-yellow-200 p-2 border">Metabolic Efficiency High Intensity</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bg-yellow-200 p-2 border">Breathing Frequency</td>
|
||||
<td class="bg-white p-2 border"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bg-red-200 p-2 border">Breath Volume</td>
|
||||
<td class="bg-white p-2 border"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bg-green-200 p-2 border">Heart Rate</td>
|
||||
<td class="bg-white p-2 border"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Respiratory Section -->
|
||||
<div class="border border-gray-300 rounded-lg p-3">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-6 h-6 bg-gray-400 rounded-full mr-2"></div>
|
||||
<h2 class="text-lg font-bold">Respiratory</h2>
|
||||
</div>
|
||||
|
||||
<table class="w-full text-xs border-collapse">
|
||||
<tr>
|
||||
<th class="bg-gray-200 p-2 border text-left font-semibold">Lung Function</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bg-green-200 p-2 border">Lung Capacity</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bg-green-200 p-2 border">Lung Capability</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bg-red-200 p-2 border">Breathing Frequency Zones</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Middle Row: Cardiovascular and Strength -->
|
||||
<div class="grid grid-cols-2 gap-6 mb-6">
|
||||
<!-- Cardiovascular Section -->
|
||||
<div class="border border-gray-300 rounded-lg p-3">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-6 h-6 bg-gray-400 rounded-full mr-2"></div>
|
||||
<h2 class="text-lg font-bold">Cardiovascular</h2>
|
||||
</div>
|
||||
|
||||
<table class="w-full text-xs border-collapse">
|
||||
<tr>
|
||||
<th class="bg-gray-200 p-2 border text-left font-semibold">Active Metabolic Rate</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bg-green-200 p-2 border">Aerobic Health (VO2 Max)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bg-red-200 p-2 border">Training Zones</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bg-red-200 p-2 border">Metabolic Efficiency (VO2 Pulse)</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Strength Section -->
|
||||
<div class="border border-gray-300 rounded-lg p-3">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-6 h-6 bg-gray-400 rounded-full mr-2"></div>
|
||||
<h2 class="text-lg font-bold">Strength</h2>
|
||||
</div>
|
||||
|
||||
<table class="w-full text-xs border-collapse">
|
||||
<tr>
|
||||
<th class="bg-gray-200 p-2 border text-left font-semibold">Strength - High Intensity</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bg-green-200 p-2 border">CO2/O2 (RER)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bg-green-200 p-2 border">Heart Rate</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bg-green-200 p-2 border">Breath Frequency</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bg-yellow-200 p-2 border">Muscle Efficiency</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Row: Recovery -->
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<!-- Recovery Section -->
|
||||
<div class="border border-gray-300 rounded-lg p-3">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-6 h-6 bg-gray-400 rounded-full mr-2"></div>
|
||||
<h2 class="text-lg font-bold">Recovery</h2>
|
||||
</div>
|
||||
|
||||
<table class="w-full text-xs border-collapse">
|
||||
<tr>
|
||||
<th class="bg-gray-200 p-2 border text-left font-semibold">Active Metabolic Rate</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bg-green-200 p-2 border">
|
||||
<div class="flex justify-between items-center">
|
||||
<span>Heart Rate</span>
|
||||
<span class="bg-green-600 text-white px-2 py-1 rounded font-bold text-xs">44</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bg-green-200 p-2 border">Metabolic (CO2)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bg-gray-200 p-2 border">Muscle Oxygen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bg-red-200 p-2 border">Breath Frequency</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Empty space for balance -->
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,36 @@
|
||||
<div class="w-full page bg-white">
|
||||
<!-- Main Content -->
|
||||
<div class="px-8 py-6">
|
||||
<!-- Page Title -->
|
||||
<h1 class="text-3xl font-bold text-black mb-6">Nutrition Guidelines</h1>
|
||||
|
||||
<!-- Section Title -->
|
||||
<h2 class="text-xl font-bold text-black mb-2">Ultrasound & Body Composition Assessment</h2>
|
||||
<p class="text-gray-700 text-sm mb-8">Designed to track and optimize exercise and diet. Its proven technology can accurately measure tissue structure and body composition.</p>
|
||||
|
||||
<!-- Body Composition Section -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-2xl font-bold text-center text-black mb-6">Body Composition</h3>
|
||||
|
||||
<!-- Body Composition Chart -->
|
||||
<div class="flex justify-center mb-16 w-full">
|
||||
<img src="data:image/png;base64, {{ body_composition_chart}}"
|
||||
alt="Body Composition Chart"
|
||||
class=" object-contain ">
|
||||
</div>
|
||||
|
||||
<!-- Body Fat Percentage Section -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-2xl font-bold text-center text-black mb-6">Body Fat Percentage - {{ fat_percentage }}%</h3>
|
||||
<!-- Body Fat Chart -->
|
||||
<div class="flex justify-center">
|
||||
<img src="data:image/png;base64, {{ body_fat_chart }}"
|
||||
alt="Body Fat Percentage Chart" >
|
||||
</div>
|
||||
|
||||
<!-- Age Range Label -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Section -->
|
||||
</div>
|
||||
@@ -0,0 +1,97 @@
|
||||
<div class="w-full bg-white">
|
||||
<!-- Header Section -->
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="px-8 py-2">
|
||||
<!-- Page Title -->
|
||||
<h1 class="text-3xl font-bold text-black mb-3">Nutrition Guidelines</h1>
|
||||
|
||||
<!-- Section Title -->
|
||||
<h2 class="text-xl font-bold text-black mb-2">
|
||||
Resting Metabolic Rate Assessment
|
||||
</h2>
|
||||
<p class="text-gray-700 text-sm mb-4">
|
||||
The resting metabolic rate assessment determines the number of
|
||||
calories that you burn at rest, and metabolic health. It is also an
|
||||
indicator of overall health and well-being.
|
||||
</p>
|
||||
|
||||
<!-- Slow vs Fast Metabolism Section -->
|
||||
<div class="mb-6">
|
||||
<div class="flex justify-center">
|
||||
<img
|
||||
src="data:image/png;base64,{{ metabolism_chart }}"
|
||||
alt="Slow vs Fast Metabolism Chart"
|
||||
class="max-w-full h-auto max-h-40"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fuel Source Section -->
|
||||
<div class="mb-6">
|
||||
<div class="flex justify-center">
|
||||
<img
|
||||
src="data:image/png;base64,{{ fuel_source_chart }}"
|
||||
alt="Fuel Source Chart"
|
||||
class="max-w-full h-auto max-h-40"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Caloric Intake Section -->
|
||||
<div class="px-6">
|
||||
<h3 class="text-2xl font-bold text-black mb-4 text-center">
|
||||
Caloric Intake
|
||||
</h3>
|
||||
|
||||
<!-- Calculation Formula -->
|
||||
<div class="flex items-center justify-center space-x-4 text-center">
|
||||
<!-- Resting Metabolic -->
|
||||
<div class="bg-gray-200 p-3 rounded-lg">
|
||||
<div class="text-lg font-bold text-black">
|
||||
{{ resting_calories }}kCals
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 mt-1">
|
||||
<div>Resting</div>
|
||||
<div>Metabolic</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Plus sign -->
|
||||
<div class="text-2xl font-bold text-black">+</div>
|
||||
|
||||
<!-- NEAT -->
|
||||
<div class="bg-gray-200 p-3 rounded-lg">
|
||||
<div class="text-lg font-bold text-black">
|
||||
{{ neat_calories }}kCals
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 mt-1">NEAT</div>
|
||||
</div>
|
||||
|
||||
<!-- Minus sign -->
|
||||
<div class="text-2xl font-bold text-black">-</div>
|
||||
|
||||
<!-- Weight Loss -->
|
||||
<div class="bg-gray-200 p-3 rounded-lg">
|
||||
<div class="text-lg font-bold text-black">
|
||||
{{ weight_loss_calories }}kCals
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 mt-1">
|
||||
<div>to lose {{ weight_loss_rate }}lbs</div>
|
||||
<div>per week</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Equals sign -->
|
||||
<div class="text-2xl font-bold text-black">=</div>
|
||||
|
||||
<!-- Total -->
|
||||
<div class="bg-gray-200 p-3 rounded-lg">
|
||||
<div class="text-lg font-bold text-black">
|
||||
~{{ total_calories }}kCals
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,219 @@
|
||||
<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">Weekly Meal Plan Breakdown</h1>
|
||||
|
||||
<!-- Caloric Deficit Example Section -->
|
||||
<div class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-black mb-6 text-center">Caloric Deficit Example</h2>
|
||||
|
||||
<!-- Weekly Grid -->
|
||||
<div class="grid grid-cols-7 gap-3 mb-8">
|
||||
<!-- Monday -->
|
||||
<div class="bg-cyan-300 p-3 text-left rounded-lg">
|
||||
<div class="font-bold text-black mb-2">Monday</div>
|
||||
<div class="text-lg font-bold text-black mb-2">{{ deficit_calories | default('1725KCals') }}</div>
|
||||
<div class="text-xs text-black space-y-1">
|
||||
<div>{{ deficit_protein | default('120g Protein') }}</div>
|
||||
<div>{{ deficit_carbs | default('155g Carbs') }}</div>
|
||||
<div>{{ deficit_fat | default('69g Fat') }}</div>
|
||||
<div>{{ deficit_fiber | default('25g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tuesday -->
|
||||
<div class="bg-cyan-300 p-3 text-left rounded-lg">
|
||||
<div class="font-bold text-black mb-2">Tuesday</div>
|
||||
<div class="text-lg font-bold text-black mb-2">{{ deficit_calories | default('1725KCals') }}</div>
|
||||
<div class="text-xs text-black space-y-1">
|
||||
<div>{{ deficit_protein | default('120g Protein') }}</div>
|
||||
<div class="text-xs text-black">{{ deficit_carbs | default('155g Carbs') }}</div>
|
||||
<div>{{ deficit_fat | default('69g Fat') }}</div>
|
||||
<div>{{ deficit_fiber | default('25g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wednesday -->
|
||||
<div class="bg-cyan-300 p-3 text-left rounded-lg">
|
||||
<div class="font-bold text-black mb-2">Wednesday</div>
|
||||
<div class="text-lg font-bold text-black mb-2">{{ deficit_calories | default('1725KCals') }}</div>
|
||||
<div class="text-xs text-black space-y-1">
|
||||
<div>{{ deficit_protein | default('120g Protein') }}</div>
|
||||
<div>{{ deficit_carbs | default('155g Carbs') }}</div>
|
||||
<div>{{ deficit_fat | default('69g Fat') }}</div>
|
||||
<div>{{ deficit_fiber | default('25g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Thursday -->
|
||||
<div class="bg-cyan-300 p-3 text-left rounded-lg">
|
||||
<div class="font-bold text-black mb-2">Thursday</div>
|
||||
<div class="text-lg font-bold text-black mb-2">{{ deficit_calories | default('1725KCals') }}</div>
|
||||
<div class="text-xs text-black space-y-1">
|
||||
<div>{{ deficit_protein | default('120g Protein') }}</div>
|
||||
<div>{{ deficit_carbs | default('155g Carbs') }}</div>
|
||||
<div>{{ deficit_fat | default('69g Fat') }}</div>
|
||||
<div>{{ deficit_fiber | default('25g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Friday -->
|
||||
<div class="bg-cyan-300 p-3 text-left rounded-lg">
|
||||
<div class="font-bold text-black mb-2">Friday</div>
|
||||
<div class="text-lg font-bold text-black mb-2">{{ deficit_calories | default('1725KCals') }}</div>
|
||||
<div class="text-xs text-black space-y-1">
|
||||
<div>{{ deficit_protein | default('120g Protein') }}</div>
|
||||
<div>{{ deficit_carbs | default('155g Carbs') }}</div>
|
||||
<div>{{ deficit_fat | default('69g Fat') }}</div>
|
||||
<div>{{ deficit_fiber | default('25g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Saturday -->
|
||||
<div class="p-3 text-left rounded-lg">
|
||||
<div class="font-bold text-black mb-2">Saturday</div>
|
||||
<div class="text-lg font-bold text-black mb-2">{{ deficit_calories | default('1725KCals') }}</div>
|
||||
<div class="text-xs text-black space-y-1">
|
||||
<div>{{ deficit_protein | default('120g Protein') }}</div>
|
||||
<div>{{ deficit_carbs | default('155g Carbs') }}</div>
|
||||
<div>{{ deficit_fat | default('69g Fat') }}</div>
|
||||
<div>{{ deficit_fiber | default('25g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sunday -->
|
||||
<div class="p-3 text-left rounded-lg">
|
||||
<div class="font-bold text-black mb-2">Sunday</div>
|
||||
<div class="text-lg font-bold text-black mb-2">{{ deficit_calories | default('1725KCals') }}</div>
|
||||
<div class="text-xs text-black space-y-1">
|
||||
<div>{{ deficit_protein | default('120g Protein') }}</div>
|
||||
<div>{{ deficit_carbs | default('155g Carbs') }}</div>
|
||||
<div>{{ deficit_fat | default('69g Fat') }}</div>
|
||||
<div>{{ deficit_fiber | default('25g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Caloric Deficit with Maintenance/Refeed Example Section -->
|
||||
<div class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-black mb-6 text-center">Caloric Deficit with Maintenance/Refeed Example</h2>
|
||||
|
||||
<!-- Weekly Grid -->
|
||||
<div class="grid grid-cols-7 gap-2 mb-8">
|
||||
<!-- Monday -->
|
||||
<div class="bg-cyan-300 p-3 text-left rounded-lg">
|
||||
<div class="font-bold text-black mb-2">Monday</div>
|
||||
<div class="text-lg font-bold text-black mb-2">{{ refeed_weekday_calories | default('1615KCals') }}</div>
|
||||
<div class="text-xs text-black space-y-1">
|
||||
<div>{{ refeed_weekday_protein | default('120g Protein') }}</div>
|
||||
<div>{{ refeed_weekday_carbs | default('142g Carbs') }}</div>
|
||||
<div>{{ refeed_weekday_fat | default('63g Fat') }}</div>
|
||||
<div>{{ refeed_weekday_fiber | default('24g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tuesday -->
|
||||
<div class="bg-cyan-300 p-3 text-left rounded-lg">
|
||||
<div class="font-bold text-black mb-2">Tuesday</div>
|
||||
<div class="text-lg font-bold text-black mb-2">{{ refeed_weekday_calories | default('1615KCals') }}</div>
|
||||
<div class="text-xs text-black space-y-1">
|
||||
<div>{{ refeed_weekday_protein | default('120g Protein') }}</div>
|
||||
<div>{{ refeed_weekday_carbs | default('142g Carbs') }}</div>
|
||||
<div>{{ refeed_weekday_fat | default('63g Fat') }}</div>
|
||||
<div>{{ refeed_weekday_fiber | default('24g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wednesday -->
|
||||
<div class="bg-cyan-300 p-3 text-left rounded-lg">
|
||||
<div class="font-bold text-black mb-2">Wednesday</div>
|
||||
<div class="text-lg font-bold text-black mb-2">{{ refeed_weekday_calories | default('1615KCals') }}</div>
|
||||
<div class="text-xs text-black space-y-1">
|
||||
<div>{{ refeed_weekday_protein | default('120g Protein') }}</div>
|
||||
<div>{{ refeed_weekday_carbs | default('142g Carbs') }}</div>
|
||||
<div>{{ refeed_weekday_fat | default('63g Fat') }}</div>
|
||||
<div>{{ refeed_weekday_fiber | default('24g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Thursday -->
|
||||
<div class="p-3 text-left rounded-lg">
|
||||
<div class="font-bold text-black mb-2">Thursday</div>
|
||||
<div class="text-lg font-bold text-black mb-2">{{ refeed_weekday_calories | default('1615KCals') }}</div>
|
||||
<div class="text-xs text-black space-y-1">
|
||||
<div>{{ refeed_weekday_protein | default('120g Protein') }}</div>
|
||||
<div>{{ refeed_weekday_carbs | default('142g Carbs') }}</div>
|
||||
<div>{{ refeed_weekday_fat | default('63g Fat') }}</div>
|
||||
<div>{{ refeed_weekday_fiber | default('24g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Friday -->
|
||||
<div class="p-3 text-left rounded-lg">
|
||||
<div class="font-bold text-black mb-2">Friday</div>
|
||||
<div class="text-lg font-bold text-black mb-2">{{ refeed_weekday_calories | default('1615KCals') }}</div>
|
||||
<div class="text-xs text-black space-y-1">
|
||||
<div>{{ refeed_weekday_protein | default('120g Protein') }}</div>
|
||||
<div>{{ refeed_weekday_carbs | default('142g Carbs') }}</div>
|
||||
<div>{{ refeed_weekday_fat | default('63g Fat') }}</div>
|
||||
<div>{{ refeed_weekday_fiber | default('24g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Saturday -->
|
||||
<div class="p-3 text-left rounded-lg">
|
||||
<div class="font-bold text-black mb-2">Saturday</div>
|
||||
<div class="text-lg font-bold text-black mb-2">{{ refeed_weekend_calories | default('2000KCals') }}</div>
|
||||
<div class="text-xs text-black space-y-1">
|
||||
<div>{{ refeed_weekend_protein | default('120g Protein') }}</div>
|
||||
<div>{{ refeed_weekend_carbs | default('190g Carbs') }}</div>
|
||||
<div>{{ refeed_weekend_fat | default('84g Fat') }}</div>
|
||||
<div>{{ refeed_weekend_fiber | default('30g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sunday -->
|
||||
<div class="p-3 text-left rounded-lg">
|
||||
<div class="font-bold text-black mb-2">Sunday</div>
|
||||
<div class="text-lg font-bold text-black mb-2">{{ refeed_weekend_calories | default('2000KCals') }}</div>
|
||||
<div class="text-xs text-black space-y-1">
|
||||
<div>{{ refeed_weekend_protein | default('120g Protein') }}</div>
|
||||
<div>{{ refeed_weekend_carbs | default('190g Carbs') }}</div>
|
||||
<div>{{ refeed_weekend_fat | default('84g Fat') }}</div>
|
||||
<div>{{ refeed_weekend_fiber | default('30g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Macronutrients Recommendations Section -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-black mb-8 text-center">Macronutrients Recommendations</h2>
|
||||
|
||||
<!-- Macronutrient Boxes -->
|
||||
<div class="flex justify-center space-x-12">
|
||||
<!-- Protein -->
|
||||
<div class="bg-gray-200 p-6 rounded-lg text-center">
|
||||
<div class="text-3xl font-bold text-black mb-2">{{ protein_percentage | default('28%') }}</div>
|
||||
<div class="text-lg font-semibold text-black">Protein</div>
|
||||
</div>
|
||||
|
||||
<!-- Carbs -->
|
||||
<div class="bg-gray-200 p-6 rounded-lg text-center">
|
||||
<div class="text-3xl font-bold text-black mb-2">{{ carbs_percentage | default('36%') }}</div>
|
||||
<div class="text-lg font-semibold text-black">Carbs</div>
|
||||
</div>
|
||||
|
||||
<!-- Fats -->
|
||||
<div class="bg-gray-200 p-6 rounded-lg text-center">
|
||||
<div class="text-3xl font-bold text-black mb-2">{{ fats_percentage | default('36%') }}</div>
|
||||
<div class="text-lg font-semibold text-black">Fats</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,56 @@
|
||||
<div class="w-full page bg-white p-4">
|
||||
<!-- Header -->
|
||||
<h1 class="text-3xl font-bold mb-2">Lung Analysis</h1>
|
||||
|
||||
<!-- Spirometry Assessment Section -->
|
||||
<div class="mb-2">
|
||||
<h2 class="text-xl font-semibold mb-4">Spirometry Assessment</h2>
|
||||
<p class="text-sm text-gray-700 mb-4">
|
||||
Spirometry is a diagnostic device that assesses how well a person
|
||||
breathes and how their lungs are functioning. Lung function is
|
||||
crucial for oxygen delivery during physical activity. Comparing
|
||||
results to expected/normal values can highlight potential
|
||||
limitations that would require additional lung training to improve
|
||||
overall physical activity.
|
||||
</p>
|
||||
|
||||
<!-- Lung Volume Chart -->
|
||||
<div class="flex justify-center">
|
||||
<img
|
||||
src="data:image/png;base64,{{ lung_analysis_chart }}"
|
||||
alt="Lung Volume Analysis Chart"
|
||||
class="w-full max-w-4xl h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Indications Box -->
|
||||
<div class="bg-gray-200 rounded-lg p-4 text-center mb-2">
|
||||
<h3 class="font-semibold text-lg mb-2">Indications</h3>
|
||||
<p class="text-gray-700">{{ indication }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Respiratory Section -->
|
||||
<div class="mb-4">
|
||||
<h2 class="text-xl font-semibold mb-4 text-center">Respiratory</h2>
|
||||
|
||||
<!-- Respiratory Chart -->
|
||||
<div class="flex justify-center mb-4">
|
||||
<img
|
||||
src="data:image/png;base64,{{ respiratory_analysis_chart }}"
|
||||
alt="Respiratory Analysis Chart"
|
||||
class="w-full mb-4 object-contain max-w-4xl h-auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Peak VT Info Box -->
|
||||
<div class="bg-gray-200 rounded-lg p-4 text-center">
|
||||
<h3 class="font-semibold mb-2">Peak VT</h3>
|
||||
<p class="text-sm">
|
||||
{{ peak_vt }} L/Breath which occurs at {{ peak_vt_bpm }} bpm
|
||||
(Zone {{ peak_vt_zone }})
|
||||
</p>
|
||||
<p class="text-sm">{{ fev1_percentage }}% of FEV1</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,198 @@
|
||||
<div class="w-full page bg-white">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="px-8 py-6">
|
||||
<!-- Page Title -->
|
||||
<h1 class="text-3xl font-bold text-black mb-6">Cardio Metrics</h1>
|
||||
|
||||
<!-- Active Metabolic Rate Assessment Section -->
|
||||
<h2 class="text-xl font-bold text-black mb-4">Active Metabolic Rate Assessment</h2>
|
||||
<p class="text-gray-700 text-sm mb-8">The active metabolic rate assessment is a key measure of aerobic fitness. It helps determine your specific heart rate zones and how well your body uses carbohydrates and fats as fuel while you exercise. It is also an indicator of overall health and wellbeing.</p>
|
||||
|
||||
<!-- VO2 Max Section -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-bold text-black mb-4 text-center">VO2 Max - {{ vo2_max_value | default('49.5') }} ({{ vo2_max_percentile | default('100th percentile') }})</h3>
|
||||
|
||||
<!-- VO2 Max Table -->
|
||||
<div class="mb-8">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="bg-cyan-300 border border-gray-400 p-3 text-black font-bold">Age (F)</th>
|
||||
<th class="bg-cyan-300 border border-gray-400 p-3 text-black font-bold">Very Poor</th>
|
||||
<th class="bg-cyan-300 border border-gray-400 p-3 text-black font-bold">Poor</th>
|
||||
<th class="bg-cyan-300 border border-gray-400 p-3 text-black font-bold">Fair</th>
|
||||
<th class="bg-cyan-300 border border-gray-400 p-3 text-black font-bold">Good</th>
|
||||
<th class="bg-cyan-300 border border-gray-400 p-3 text-black font-bold">Excellent</th>
|
||||
<th class="bg-cyan-300 border border-gray-400 p-3 text-black font-bold relative">
|
||||
Superior
|
||||
<!-- Arrow indicator -->
|
||||
<div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2">
|
||||
<div class="w-0 h-0 border-l-4 border-r-4 border-t-8 border-transparent border-t-black"></div>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="bg-cyan-200 border border-gray-400 p-3 text-black font-semibold">{{ age_range | default('30-39') }}</td>
|
||||
<td class="bg-gray-100 border border-gray-400 p-3 text-black text-center">{{ very_poor_range | default('19.0-24.1') }}</td>
|
||||
<td class="bg-gray-100 border border-gray-400 p-3 text-black text-center">{{ poor_range | default('24.1-28.2') }}</td>
|
||||
<td class="bg-gray-100 border border-gray-400 p-3 text-black text-center">{{ fair_range | default('28.2-32.2') }}</td>
|
||||
<td class="bg-gray-100 border border-gray-400 p-3 text-black text-center">{{ good_range | default('32.2-35.7') }}</td>
|
||||
<td class="bg-gray-100 border border-gray-400 p-3 text-black text-center">{{ excellent_range | default('35.7-45.8') }}</td>
|
||||
<td class="bg-gray-100 border border-gray-400 p-3 text-black text-center font-bold">{{ superior_range | default('45.8+') }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Personalized Heart Rate Zones Section -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-bold text-black mb-6 text-center">Personalized Heart Rate Zones</h3>
|
||||
|
||||
<!-- Heart Rate Zones Table -->
|
||||
<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">Zone 1</th>
|
||||
<th class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold">Zone 2</th>
|
||||
<th class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold">Zone 3</th>
|
||||
<th class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold">Zone 4</th>
|
||||
<th class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold">Zone 5</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Zone Descriptions -->
|
||||
<tr>
|
||||
<td class="border border-gray-400 p-3 text-center">
|
||||
<div class="text-black font-semibold mb-1">Improves health and recovery capacity</div>
|
||||
</td>
|
||||
<td class="border border-gray-400 p-3 text-center">
|
||||
<div class="text-black font-semibold mb-1">Improves endurance and fat burning</div>
|
||||
</td>
|
||||
<td class="border border-gray-400 p-3 text-center">
|
||||
<div class="text-black font-semibold mb-1">Improves Aerobic fitness</div>
|
||||
</td>
|
||||
<td class="border border-gray-400 p-3 text-center">
|
||||
<div class="text-black font-semibold mb-1">Improves maximum performance capacity</div>
|
||||
</td>
|
||||
<td class="border border-gray-400 p-3 text-center">
|
||||
<div class="text-black font-semibold mb-1">Develops maximum performance and speed</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Heart Rate Percentages -->
|
||||
<tr>
|
||||
<td class="border border-gray-400 p-2 text-center text-black font-semibold">{{ zone1_percentage | default('55-65% of Max Heart Rate') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black font-semibold">{{ zone2_percentage | default('65-75% of Max Heart Rate') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black font-semibold">{{ zone3_percentage | default('80-85% of Max Heart Rate') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black font-semibold">{{ zone4_percentage | default('85-88% of Max Heart Rate') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black font-semibold">{{ zone5_percentage | default('90% of Max Heart Rate') }}</td>
|
||||
</tr>
|
||||
|
||||
<!-- Heart Rate BPM -->
|
||||
<tr>
|
||||
<td class="bg-red-200 border border-gray-400 p-2 text-center text-black font-bold">{{ zone1_bpm | default('81-96bpm') }}</td>
|
||||
<td class="bg-red-200 border border-gray-400 p-2 text-center text-black font-bold">{{ zone2_bpm | default('96-100bpm') }}</td>
|
||||
<td class="bg-yellow-200 border border-gray-400 p-2 text-center text-black font-bold">{{ zone3_bpm | default('100-178bpm') }}</td>
|
||||
<td class="bg-green-200 border border-gray-400 p-2 text-center text-black font-bold">{{ zone4_bpm | default('178-188bpm') }}</td>
|
||||
<td class="bg-green-200 border border-gray-400 p-2 text-center text-black font-bold">{{ zone5_bpm | default('188-198bpm') }}</td>
|
||||
</tr>
|
||||
|
||||
<!-- Speed -->
|
||||
<tr>
|
||||
<td class="border border-gray-400 p-2 text-center">
|
||||
<div class="text-black font-semibold">{{ zone1_speed | default('3.5mph') }}</div>
|
||||
<div class="text-black text-xs">{{ zone1_incline | default('2% Incline') }}</div>
|
||||
</td>
|
||||
<td class="border border-gray-400 p-2 text-center">
|
||||
<div class="text-black font-semibold">{{ zone2_speed | default('3.5-4.0mph') }}</div>
|
||||
<div class="text-black text-xs">{{ zone2_incline | default('2% Incline') }}</div>
|
||||
</td>
|
||||
<td class="border border-gray-400 p-2 text-center">
|
||||
<div class="text-black font-semibold">{{ zone3_speed | default('4.0-6.5mph') }}</div>
|
||||
<div class="text-black text-xs">{{ zone3_incline | default('2% Incline') }}</div>
|
||||
</td>
|
||||
<td class="border border-gray-400 p-2 text-center">
|
||||
<div class="text-black font-semibold">{{ zone4_speed | default('6.5-7.0mph') }}</div>
|
||||
<div class="text-black text-xs">{{ zone4_incline | default('2% Incline') }}</div>
|
||||
</td>
|
||||
<td class="border border-gray-400 p-2 text-center">
|
||||
<div class="text-black font-semibold">{{ zone5_speed | default('7.0-8.0mph') }}</div>
|
||||
<div class="text-black text-xs">{{ zone5_incline | default('2% Incline') }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Pace -->
|
||||
<tr>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ zone1_pace | default('10:39min/km Pace') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ zone2_pace | default('10:39-9:19min/km Pace') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ zone3_pace | default('9:19-5:44min/km Pace') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ zone4_pace | default('5:44-5:20min/km Pace') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ zone5_pace | default('5:20-4:40min/km Pace') }}</td>
|
||||
</tr>
|
||||
|
||||
<!-- Average Calories -->
|
||||
<tr>
|
||||
<td class="border border-gray-400 p-2 text-center">
|
||||
<div class="text-black text-xs">Avg:</div>
|
||||
<div class="text-black font-semibold">{{ zone1_calories | default('4.4kcals/minute') }}</div>
|
||||
</td>
|
||||
<td class="border border-gray-400 p-2 text-center">
|
||||
<div class="text-black text-xs">Avg:</div>
|
||||
<div class="text-black font-semibold">{{ zone2_calories | default('5.9kcals/minute') }}</div>
|
||||
</td>
|
||||
<td class="border border-gray-400 p-2 text-center">
|
||||
<div class="text-black text-xs">Avg:</div>
|
||||
<div class="text-black font-semibold">{{ zone3_calories | default('9.4kcals/minute') }}</div>
|
||||
</td>
|
||||
<td class="border border-gray-400 p-2 text-center">
|
||||
<div class="text-black text-xs">Avg:</div>
|
||||
<div class="text-black font-semibold">{{ zone4_calories | default('12.5kcals/minute') }}</div>
|
||||
</td>
|
||||
<td class="border border-gray-400 p-2 text-center">
|
||||
<div class="text-black text-xs">Avg:</div>
|
||||
<div class="text-black font-semibold">{{ zone5_calories | default('12.8kcals/minute') }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Carb Utilization -->
|
||||
<tr>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ zone1_carb | default('Avg: 0.4g/min Carb Utilization') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ zone2_carb | default('Avg: 0.6g/min Carb Utilization') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ zone3_carb | default('Avg: 1.9g/min Carb Utilization') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ zone4_carb | default('Avg: 2.9g/min Carb Utilization') }}</td>
|
||||
<td class="border border-gray-400 p-2 text-center text-black">{{ zone5_carb | default('Avg: 3.1g/min Carb Utilization') }}</td>
|
||||
</tr>
|
||||
|
||||
<!-- Breathing -->
|
||||
<tr>
|
||||
<td class="bg-red-200 border border-gray-400 p-2 text-center">
|
||||
<div class="text-black font-bold">{{ zone1_breaths | default('Avg: 27 breaths') }}</div>
|
||||
<div class="text-black text-xs italic">{{ zone1_breath_range | default('Ideal Range: 15-20 breaths') }}</div>
|
||||
</td>
|
||||
<td class="bg-red-200 border border-gray-400 p-2 text-center">
|
||||
<div class="text-black font-bold">{{ zone2_breaths | default('Avg: 28 breaths') }}</div>
|
||||
<div class="text-black text-xs italic">{{ zone2_breath_range | default('Ideal Range: 20-25 breaths') }}</div>
|
||||
</td>
|
||||
<td class="bg-yellow-200 border border-gray-400 p-2 text-center">
|
||||
<div class="text-black font-bold">{{ zone3_breaths | default('Avg: 31 breaths') }}</div>
|
||||
<div class="text-black text-xs italic">{{ zone3_breath_range | default('Ideal Range: 25-30 breaths') }}</div>
|
||||
</td>
|
||||
<td class="bg-green-200 border border-gray-400 p-2 text-center">
|
||||
<div class="text-black font-bold">{{ zone4_breaths | default('Avg: 42 breaths') }}</div>
|
||||
<div class="text-black text-xs italic">{{ zone4_breath_range | default('Ideal Range: 30-35 breaths') }}</div>
|
||||
</td>
|
||||
<td class="bg-green-200 border border-gray-400 p-2 text-center">
|
||||
<div class="text-black font-bold">{{ zone5_breaths | default('Avg: 51 breaths') }}</div>
|
||||
<div class="text-black text-xs italic">{{ zone5_breath_range | default('Ideal Range: 40+ breaths') }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,21 @@
|
||||
<div class="w-full page bg-white">
|
||||
<!-- Main Content -->
|
||||
<div class="flex flex-col items-center justify-center h-full">
|
||||
<!-- Fuel Utilization Chart -->
|
||||
<div class="w-full max-w-5xl">
|
||||
<img
|
||||
src="data:image/png;base64,{{ fuel_utilization_chart }}"
|
||||
alt="Fuel Utilization Report - Institute of Science, Health and Performance"
|
||||
class="w-full h-auto object-contain chart-large"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Chart Information -->
|
||||
<div class="mt-8 text-center">
|
||||
<p class="text-gray-700 text-sm">
|
||||
Client: {{ client_name | default('Keirstyn Moran') }} |
|
||||
Assessment Date: {{ assessment_date | default('July 29 2025') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user