Refactor code structure for improved readability and maintainability
This commit is contained in:
bolade
@@ -1,6 +1,5 @@
|
||||
<div
|
||||
class="w-full page bg-black text-white relative overflow-hidden"
|
||||
style="height: 297mm"
|
||||
>
|
||||
<!-- ISHP Logo/Text -->
|
||||
<div class="absolute top-8 left-8 z-20">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="w-full page bg-white" style="height: 297mm;"></div>
|
||||
<div class="w-full page bg-white">
|
||||
<!-- Header Section -->
|
||||
<div class="bg-black text-white px-6 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
@@ -26,7 +26,7 @@
|
||||
|
||||
<!-- VO2 Pulse Graph -->
|
||||
<div class="flex justify-center mb-6">
|
||||
<img src="{{ vo2_pulse_chart | default('../graphs/vo2_pulse_chart.png') }}"
|
||||
<img src="{{ vo2_pulse_chart }}"
|
||||
alt="VO2 Pulse Chart"
|
||||
class="w-full max-w-4xl h-auto object-contain">
|
||||
</div>
|
||||
@@ -42,7 +42,7 @@
|
||||
|
||||
<!-- VO2 Breath Graph -->
|
||||
<div class="flex justify-center mb-6">
|
||||
<img src="{{ vo2_breath_chart | default('../graphs/vo2_breath_chart.png') }}"
|
||||
<img src="{{ vo2_breath_chart }}"
|
||||
alt="VO2 Breath Chart"
|
||||
class="w-full max-w-4xl h-auto object-contain">
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="w-full page bg-white" style="height: 297mm">
|
||||
<div class="w-full page bg-white">
|
||||
<!-- Header Section -->
|
||||
<div
|
||||
class="bg-black text-white px-6 py-4 flex items-center justify-between"
|
||||
@@ -71,7 +71,7 @@
|
||||
|
||||
<div class="flex justify-center">
|
||||
<img
|
||||
src="{{ fat_metabolism_chart | default('../graphs/fat_metabolism_chart.png') }}"
|
||||
src="{{ fat_metabolism_chart }}"
|
||||
alt="Fat Metabolism Chart"
|
||||
class="w-full max-w-4xl h-auto object-contain"
|
||||
/>
|
||||
@@ -130,7 +130,7 @@
|
||||
<!-- Recovery Graph -->
|
||||
<div class="flex justify-center mb-6">
|
||||
<img
|
||||
src="{{ recovery_chart | default('../graphs/recovery_chart.png') }}"
|
||||
src="{{ recovery_chart }}"
|
||||
alt="Recovery Chart"
|
||||
class="w-full max-w-4xl h-auto object-contain"
|
||||
/>
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<div class="page" id="page-12">
|
||||
This is page 12
|
||||
</div>
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="w-full page bg-white" style="height: 297mm;"></div>
|
||||
<div class="w-full page bg-white">
|
||||
<!-- Header Section -->
|
||||
<div class="bg-black text-white px-6 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="w-full page bg-white" style="height: 297mm;"></div>
|
||||
<div class="w-full page bg-white">
|
||||
<!-- Header Section -->
|
||||
<div class="bg-black text-white px-6 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="w-full page bg-white" style="height: 297mm;"></div>
|
||||
<div class="w-full page bg-white">
|
||||
<!-- Header Section -->
|
||||
<div class="bg-black text-white px-6 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="w-full page bg-white" style="height: 297mm;"></div>
|
||||
<div class="w-full page bg-white">
|
||||
<!-- Header Section -->
|
||||
<div class="bg-black text-white px-6 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
|
||||
+161
-169
@@ -1,173 +1,165 @@
|
||||
<body class="bg-white font-sans">
|
||||
<!-- Header -->
|
||||
<div class="bg-black text-white p-4 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="text-xl font-bold">ISHP</div>
|
||||
<div class="w-8 h-6 bg-teal-400"></div>
|
||||
<!-- Header -->
|
||||
<div class="w-full page">
|
||||
<div class="bg-black text-white p-4 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="text-xl font-bold">ISHP</div>
|
||||
<div class="w-8 h-6 bg-teal-400"></div>
|
||||
</div>
|
||||
<div class="text-sm">
|
||||
<span class="mr-6">Name: Keirstyn Moran</span>
|
||||
<span class="mr-6">Age: 34</span>
|
||||
<span class="mr-6">Height: 5'4"</span>
|
||||
<span class="mr-6">Weight: 123lbs</span>
|
||||
<span>Focus: Endurance</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="p-8">
|
||||
<h1 class="text-4xl font-bold mb-8">Glossary</h1>
|
||||
|
||||
<div class="space-y-6 text-sm leading-relaxed">
|
||||
<!-- Peak VT -->
|
||||
<div>
|
||||
<p class="font-semibold">Peak VT:</p>
|
||||
<p class="mb-2">
|
||||
Peak Volume of air moved throughout the test.
|
||||
</p>
|
||||
<p class="mb-2">
|
||||
Respiratory Capability Limitations that can be found
|
||||
include:
|
||||
</p>
|
||||
<ul class="list-disc ml-6 space-y-1">
|
||||
<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>
|
||||
<div class="text-sm">
|
||||
<span class="mr-6">Name: Keirstyn Moran</span>
|
||||
<span class="mr-6">Age: 34</span>
|
||||
<span class="mr-6">Height: 5'4"</span>
|
||||
<span class="mr-6">Weight: 123lbs</span>
|
||||
<span>Focus: Endurance</span>
|
||||
|
||||
<!-- 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-2">
|
||||
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-2">
|
||||
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>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="p-8">
|
||||
<h1 class="text-4xl font-bold mb-8">Glossary</h1>
|
||||
|
||||
<div class="space-y-6 text-sm leading-relaxed">
|
||||
<!-- Peak VT -->
|
||||
<div>
|
||||
<p class="font-semibold">Peak VT:</p>
|
||||
<p class="mb-2">
|
||||
Peak Volume of air moved throughout the test.
|
||||
</p>
|
||||
<p class="mb-2">
|
||||
Respiratory Capability Limitations that can be found
|
||||
include:
|
||||
</p>
|
||||
<ul class="list-disc ml-6 space-y-1">
|
||||
<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-2">
|
||||
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-2">
|
||||
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
|
||||
class="bg-black text-white p-4 flex justify-between items-center text-sm mt-8"
|
||||
>
|
||||
<div>CONTACT: info@ishplabs.com</div>
|
||||
<div>WEBSITE: www.ishplabs.com</div>
|
||||
<div>SOCIAL: @ishplabs</div>
|
||||
<div class="bg-white text-black px-3 py-1 font-bold">17</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<!-- Footer -->
|
||||
<div
|
||||
class="bg-black text-white p-4 flex justify-between items-center text-sm mt-8"
|
||||
>
|
||||
<div>CONTACT: info@ishplabs.com</div>
|
||||
<div>WEBSITE: www.ishplabs.com</div>
|
||||
<div>SOCIAL: @ishplabs</div>
|
||||
<div class="bg-white text-black px-3 py-1 font-bold">17</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+218
-353
@@ -1,371 +1,236 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Glossary - Page 18</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-white font-sans">
|
||||
<!-- Header -->
|
||||
<div class="bg-black text-white p-4 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="text-xl font-bold">ISHP</div>
|
||||
<div class="w-8 h-6 bg-teal-400"></div>
|
||||
</div>
|
||||
<div class="text-sm">
|
||||
<span class="mr-6">Name: Keirstyn Moran</span>
|
||||
<span class="mr-6">Age: 34</span>
|
||||
<span class="mr-6">Height: 5'4"</span>
|
||||
<span class="mr-6">Weight: 123lbs</span>
|
||||
<span>Focus: Endurance</span>
|
||||
</div>
|
||||
<div class="w-full page">
|
||||
<div class="bg-black text-white p-4 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="text-xl font-bold">ISHP</div>
|
||||
<div class="w-8 h-6 bg-teal-400"></div>
|
||||
</div>
|
||||
<div class="text-sm">
|
||||
<span class="mr-6">Name: Keirstyn Moran</span>
|
||||
<span class="mr-6">Age: 34</span>
|
||||
<span class="mr-6">Height: 5'4"</span>
|
||||
<span class="mr-6">Weight: 123lbs</span>
|
||||
<span>Focus: Endurance</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="p-8">
|
||||
<h1 class="text-4xl font-bold mb-8">Glossary</h1>
|
||||
<!-- Body Fat Percent Master Chart -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold mb-6 text-center">
|
||||
Body Fat Percent Master Chart
|
||||
</h2>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Body Fat Percent Master Chart -->
|
||||
<!-- Male Chart -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold mb-6 text-center">
|
||||
Body Fat Percent Master Chart
|
||||
</h2>
|
||||
|
||||
<!-- Male Chart -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-20 text-right mr-4 font-medium">
|
||||
Age (M)
|
||||
</div>
|
||||
<div class="flex-1 grid grid-cols-11 gap-0 h-20">
|
||||
<!-- Age 20-39 row -->
|
||||
<div
|
||||
class="bg-red-300 border border-gray-300 flex items-center justify-center text-xs font-medium"
|
||||
>
|
||||
20-39
|
||||
</div>
|
||||
<div
|
||||
class="bg-yellow-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-green-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-green-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-yellow-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-20 text-right mr-4 font-medium"></div>
|
||||
<div class="flex-1 grid grid-cols-11 gap-0 h-20">
|
||||
<!-- Age 40-59 row -->
|
||||
<div
|
||||
class="bg-yellow-300 border border-gray-300 flex items-center justify-center text-xs font-medium"
|
||||
>
|
||||
40-59
|
||||
</div>
|
||||
<div
|
||||
class="bg-green-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-green-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-yellow-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-yellow-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-20 text-right mr-4 font-medium"></div>
|
||||
<div class="flex-1 grid grid-cols-11 gap-0 h-20">
|
||||
<!-- Age 60-79 row -->
|
||||
<div
|
||||
class="bg-yellow-300 border border-gray-300 flex items-center justify-center text-xs font-medium"
|
||||
>
|
||||
60-79
|
||||
</div>
|
||||
<div
|
||||
class="bg-green-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-green-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-green-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-yellow-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Percentage labels for male chart -->
|
||||
<div class="flex items-center">
|
||||
<div class="w-20 mr-4"></div>
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-20 text-right mr-4 font-medium">Age (M)</div>
|
||||
<div class="flex-1 grid grid-cols-11 gap-0 h-20">
|
||||
<!-- Age 20-39 row -->
|
||||
<div
|
||||
class="flex-1 grid grid-cols-11 gap-0 text-xs text-center font-medium"
|
||||
class="bg-red-300 border border-gray-300 flex items-center justify-center text-xs font-medium"
|
||||
>
|
||||
<div>0%</div>
|
||||
<div>5%</div>
|
||||
<div>10%</div>
|
||||
<div>15%</div>
|
||||
<div>20%</div>
|
||||
<div>25%</div>
|
||||
<div>30%</div>
|
||||
<div>35%</div>
|
||||
<div>40%</div>
|
||||
<div>45%</div>
|
||||
<div>50%</div>
|
||||
20-39
|
||||
</div>
|
||||
<div class="bg-yellow-300 border border-gray-300"></div>
|
||||
<div class="bg-green-300 border border-gray-300"></div>
|
||||
<div class="bg-green-400 border border-gray-300"></div>
|
||||
<div class="bg-yellow-300 border border-gray-300"></div>
|
||||
<div class="bg-red-300 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Female Chart -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-20 text-right mr-4 font-medium">
|
||||
Age (F)
|
||||
</div>
|
||||
<div class="flex-1 grid grid-cols-11 gap-0 h-20">
|
||||
<!-- Age 20-39 row -->
|
||||
<div
|
||||
class="bg-red-300 border border-gray-300 flex items-center justify-center text-xs font-medium"
|
||||
>
|
||||
20-39
|
||||
</div>
|
||||
<div
|
||||
class="bg-red-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-yellow-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-green-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-green-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-green-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-yellow-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-20 text-right mr-4 font-medium"></div>
|
||||
<div class="flex-1 grid grid-cols-11 gap-0 h-20">
|
||||
<!-- Age 40-59 row -->
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300 flex items-center justify-center text-xs font-medium"
|
||||
>
|
||||
40-59
|
||||
</div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-yellow-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-green-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-green-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-yellow-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-20 text-right mr-4 font-medium"></div>
|
||||
<div class="flex-1 grid grid-cols-11 gap-0 h-20">
|
||||
<!-- Age 60-79 row -->
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300 flex items-center justify-center text-xs font-medium"
|
||||
>
|
||||
60-79
|
||||
</div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-yellow-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-green-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-green-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-yellow-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-300 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Percentage labels for female chart -->
|
||||
<div class="flex items-center">
|
||||
<div class="w-20 mr-4"></div>
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-20 text-right mr-4 font-medium"></div>
|
||||
<div class="flex-1 grid grid-cols-11 gap-0 h-20">
|
||||
<!-- Age 40-59 row -->
|
||||
<div
|
||||
class="flex-1 grid grid-cols-11 gap-0 text-xs text-center font-medium"
|
||||
class="bg-yellow-300 border border-gray-300 flex items-center justify-center text-xs font-medium"
|
||||
>
|
||||
<div>0%</div>
|
||||
<div>5%</div>
|
||||
<div>10%</div>
|
||||
<div>15%</div>
|
||||
<div>20%</div>
|
||||
<div>25%</div>
|
||||
<div>30%</div>
|
||||
<div>35%</div>
|
||||
<div>40%</div>
|
||||
<div>45%</div>
|
||||
<div>50%</div>
|
||||
40-59
|
||||
</div>
|
||||
<div class="bg-green-300 border border-gray-300"></div>
|
||||
<div class="bg-green-400 border border-gray-300"></div>
|
||||
<div class="bg-yellow-300 border border-gray-300"></div>
|
||||
<div class="bg-yellow-300 border border-gray-300"></div>
|
||||
<div class="bg-red-300 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-20 text-right mr-4 font-medium"></div>
|
||||
<div class="flex-1 grid grid-cols-11 gap-0 h-20">
|
||||
<!-- Age 60-79 row -->
|
||||
<div
|
||||
class="bg-yellow-300 border border-gray-300 flex items-center justify-center text-xs font-medium"
|
||||
>
|
||||
60-79
|
||||
</div>
|
||||
<div class="bg-green-300 border border-gray-300"></div>
|
||||
<div class="bg-green-400 border border-gray-300"></div>
|
||||
<div class="bg-green-400 border border-gray-300"></div>
|
||||
<div class="bg-yellow-300 border border-gray-300"></div>
|
||||
<div class="bg-red-300 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Percentage labels for male chart -->
|
||||
<div class="flex items-center">
|
||||
<div class="w-20 mr-4"></div>
|
||||
<div
|
||||
class="flex-1 grid grid-cols-11 gap-0 text-xs text-center font-medium"
|
||||
>
|
||||
<div>0%</div>
|
||||
<div>5%</div>
|
||||
<div>10%</div>
|
||||
<div>15%</div>
|
||||
<div>20%</div>
|
||||
<div>25%</div>
|
||||
<div>30%</div>
|
||||
<div>35%</div>
|
||||
<div>40%</div>
|
||||
<div>45%</div>
|
||||
<div>50%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Female Chart -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-20 text-right mr-4 font-medium">Age (F)</div>
|
||||
<div class="flex-1 grid grid-cols-11 gap-0 h-20">
|
||||
<!-- Age 20-39 row -->
|
||||
<div
|
||||
class="bg-red-300 border border-gray-300 flex items-center justify-center text-xs font-medium"
|
||||
>
|
||||
20-39
|
||||
</div>
|
||||
<div class="bg-red-300 border border-gray-300"></div>
|
||||
<div class="bg-red-300 border border-gray-300"></div>
|
||||
<div class="bg-yellow-300 border border-gray-300"></div>
|
||||
<div class="bg-green-300 border border-gray-300"></div>
|
||||
<div class="bg-green-400 border border-gray-300"></div>
|
||||
<div class="bg-green-300 border border-gray-300"></div>
|
||||
<div class="bg-yellow-300 border border-gray-300"></div>
|
||||
<div class="bg-red-300 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-20 text-right mr-4 font-medium"></div>
|
||||
<div class="flex-1 grid grid-cols-11 gap-0 h-20">
|
||||
<!-- Age 40-59 row -->
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300 flex items-center justify-center text-xs font-medium"
|
||||
>
|
||||
40-59
|
||||
</div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
<div class="bg-red-300 border border-gray-300"></div>
|
||||
<div class="bg-yellow-300 border border-gray-300"></div>
|
||||
<div class="bg-green-300 border border-gray-300"></div>
|
||||
<div class="bg-green-400 border border-gray-300"></div>
|
||||
<div class="bg-yellow-300 border border-gray-300"></div>
|
||||
<div class="bg-red-300 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-20 text-right mr-4 font-medium"></div>
|
||||
<div class="flex-1 grid grid-cols-11 gap-0 h-20">
|
||||
<!-- Age 60-79 row -->
|
||||
<div
|
||||
class="bg-red-400 border border-gray-300 flex items-center justify-center text-xs font-medium"
|
||||
>
|
||||
60-79
|
||||
</div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
<div class="bg-red-300 border border-gray-300"></div>
|
||||
<div class="bg-yellow-300 border border-gray-300"></div>
|
||||
<div class="bg-green-300 border border-gray-300"></div>
|
||||
<div class="bg-green-400 border border-gray-300"></div>
|
||||
<div class="bg-yellow-300 border border-gray-300"></div>
|
||||
<div class="bg-red-300 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
<div class="bg-red-400 border border-gray-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Percentage labels for female chart -->
|
||||
<div class="flex items-center">
|
||||
<div class="w-20 mr-4"></div>
|
||||
<div
|
||||
class="flex-1 grid grid-cols-11 gap-0 text-xs text-center font-medium"
|
||||
>
|
||||
<div>0%</div>
|
||||
<div>5%</div>
|
||||
<div>10%</div>
|
||||
<div>15%</div>
|
||||
<div>20%</div>
|
||||
<div>25%</div>
|
||||
<div>30%</div>
|
||||
<div>35%</div>
|
||||
<div>40%</div>
|
||||
<div>45%</div>
|
||||
<div>50%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div
|
||||
class="bg-black text-white p-4 flex justify-between items-center text-sm"
|
||||
>
|
||||
<div>CONTACT: info@ishplabs.com</div>
|
||||
<div>WEBSITE: www.ishplabs.com</div>
|
||||
<div>SOCIAL: @ishplabs</div>
|
||||
<div class="bg-white text-black px-3 py-1 font-bold">18</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<!-- Footer -->
|
||||
<div
|
||||
class="bg-black text-white p-4 flex justify-between items-center text-sm"
|
||||
>
|
||||
<div>CONTACT: info@ishplabs.com</div>
|
||||
<div>WEBSITE: www.ishplabs.com</div>
|
||||
<div>SOCIAL: @ishplabs</div>
|
||||
<div class="bg-white text-black px-3 py-1 font-bold">18</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+835
-846
File diff suppressed because it is too large
Load Diff
@@ -1,4 +1,4 @@
|
||||
<div class="bg-white w-full page m-0 p-0" style="height: 297mm">
|
||||
<div class="bg-white w-full page m-0 p-0">
|
||||
<div class="px-16 py-20">
|
||||
<!-- Table of Contents Header -->
|
||||
<div class="mb-12">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="w-full page bg-white" style="height: 297mm;"></div>
|
||||
<div class="w-full page bg-white">
|
||||
<!-- Header Section -->
|
||||
<div class="bg-black text-white px-6 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
@@ -30,7 +30,7 @@
|
||||
<!-- Body Composition Chart -->
|
||||
<div class="flex justify-center mb-8">
|
||||
<div class="relative">
|
||||
<img src="{{ body_composition_chart | default('../graphs/page_1_body_composition.png') }}"
|
||||
<img src="{{ body_composition_chart}}"
|
||||
alt="Body Composition Chart"
|
||||
class="w-80 h-80 object-contain">
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
|
||||
<!-- Body Fat Chart -->
|
||||
<div class="flex justify-center">
|
||||
<img src="{{ body_fat_chart | default('../graphs/page_1_body_fat.png') }}"
|
||||
<img src="{{ body_fat_chart}}"
|
||||
alt="Body Fat Percentage Chart"
|
||||
class="w-full max-w-2xl h-32 object-contain">
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="w-full page bg-white" style="height: 297mm;"></div>
|
||||
<div class="w-full page bg-white">
|
||||
<!-- Header Section -->
|
||||
<div class="bg-black text-white px-6 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="w-full page bg-white" style="height: 297mm;"></div>
|
||||
<div class="w-full page bg-white">
|
||||
<!-- Header Section -->
|
||||
<div class="bg-black text-white px-6 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="w-full page bg-white" style="height: 297mm;"></div>
|
||||
<div class="w-full page bg-white">
|
||||
<!-- Header Section -->
|
||||
<div class="bg-black text-white px-6 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="w-full page bg-white" style="height: 297mm;"></div>
|
||||
<div class="w-full page bg-white">
|
||||
<!-- Header Section -->
|
||||
<div class="bg-black text-white px-6 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
@@ -150,7 +150,7 @@
|
||||
|
||||
<!-- Respiratory Graph -->
|
||||
<div class="flex justify-center mb-4">
|
||||
<img src="{{ respiratory_graph | default('../graphs/respiratory_chart.png') }}"
|
||||
<img src="{{ respiratory_graph }}"
|
||||
alt="Respiratory Analysis Chart"
|
||||
class="w-full max-w-4xl h-64 object-contain">
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="w-full page bg-white" style="height: 297mm;"></div>
|
||||
<div class="w-full page bg-white">
|
||||
<!-- Header Section -->
|
||||
<div class="bg-black text-white px-6 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="w-full page bg-white" style="height: 297mm;"></div>
|
||||
<div class="w-full page bg-white">
|
||||
<!-- Header Section -->
|
||||
<div class="bg-black text-white px-6 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
@@ -18,7 +18,7 @@
|
||||
<div class="px-8 py-12 flex flex-col items-center justify-center h-full">
|
||||
<!-- Fuel Utilization Chart -->
|
||||
<div class="w-full max-w-5xl">
|
||||
<img src="{{ fuel_utilization_chart | default('../graphs/fuel_utilization_chart.png') }}"
|
||||
<img src="{{ fuel_utilization_chart }}"
|
||||
alt="Fuel Utilization Report - Institute of Science, Health and Performance"
|
||||
class="w-full h-auto object-contain">
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user