bolade
237 lines
12 KiB
HTML
237 lines
12 KiB
HTML
<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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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-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>
|
|
</div>
|