Add header and footer templates for report generation
- Created a footer template with contact information and page number. - Created a header template displaying patient details including name, age, height, weight, and focus.
This commit is contained in:
bolade
Binary file not shown.
+33
-97
@@ -23,21 +23,9 @@ page_2_context = {
|
||||
|
||||
page_3_context = {
|
||||
"patient_name": "Keirstyn Moran",
|
||||
"age": "34",
|
||||
"height": "5'4\"",
|
||||
"weight": "123lbs",
|
||||
"focus": "Endurance",
|
||||
"fat_mass": "27.6lbs",
|
||||
"fat_percentage": "22.4%",
|
||||
"lean_mass": "95.4lbs",
|
||||
"lean_percentage": "77.6%",
|
||||
"body_fat_percent": "22.4%",
|
||||
"age_range": "20-39",
|
||||
"gender": "F",
|
||||
"contact_email": "info@ishplabs.com",
|
||||
"website": "www.ishplabs.com",
|
||||
"social": "@ishplabs",
|
||||
"page_number": "4",
|
||||
}
|
||||
|
||||
page_4_context = {
|
||||
"body_composition_chart": image_to_base64(
|
||||
"/home/oluwasanmi/Documents/Work/MKD/report_generation/graphs/page_1_body_composition.png"
|
||||
),
|
||||
@@ -46,13 +34,17 @@ page_3_context = {
|
||||
),
|
||||
}
|
||||
|
||||
page_4_context = {
|
||||
"patient_name": "Keirstyn Moran",
|
||||
}
|
||||
|
||||
page_5_context = {
|
||||
"patient_name": "Keirstyn Moran",
|
||||
"metabolism_chart": "",
|
||||
"fuel_source_chart": "",
|
||||
"resting_calories": 1540,
|
||||
"neat_calories": 310,
|
||||
"weight_loss_calories": 1725,
|
||||
"weight_loss_rate": "1lb/week",
|
||||
"total_calories": 3575,
|
||||
}
|
||||
|
||||
page_6_context = {
|
||||
"patient_name": "Keirstyn Moran",
|
||||
"age": "34",
|
||||
@@ -77,39 +69,22 @@ page_6_context = {
|
||||
"protein_percentage": "28%",
|
||||
"carbs_percentage": "36%",
|
||||
"fats_percentage": "36%",
|
||||
"contact_email": "info@ishplabs.com",
|
||||
"website": "www.ishplabs.com",
|
||||
"social": "@ishplabs",
|
||||
"page_number": "6",
|
||||
}
|
||||
|
||||
page_7_context = {
|
||||
"patient_name": "Keirstyn Moran",
|
||||
"age": "34",
|
||||
"height": "5'4\"",
|
||||
"weight": "123lbs",
|
||||
"focus": "Endurance",
|
||||
"fvc_value": "4.24L → 112.0%",
|
||||
"fev1_value": "3.26L → 103.3%",
|
||||
"fev1_fvc_ratio": "76.89% → 91.8%",
|
||||
"indication": "No Respiratory Capacity Limitation",
|
||||
"peak_vt_value": "2.38L/Breath which occurs at 172bpm (Zone 3)",
|
||||
"peak_vt_percentage": "73% of FEV1",
|
||||
"contact_email": "info@ishplabs.com",
|
||||
"website": "www.ishplabs.com",
|
||||
"social": "@ishplabs",
|
||||
"page_number": "7",
|
||||
"respiratory_graph": image_to_base64(
|
||||
"peak_vt": 3.2,
|
||||
"peak_vt_bpm": 198,
|
||||
"peak_vt_zone": 3,
|
||||
"fev1_percentage": 85,
|
||||
"lung_analysis_chart": "",
|
||||
"respiratory_analysis_chart": image_to_base64(
|
||||
"/home/oluwasanmi/Documents/Work/MKD/report_generation/graphs/respiratory.png"
|
||||
),
|
||||
}
|
||||
|
||||
page_8_context = {
|
||||
"patient_name": "Keirstyn Moran",
|
||||
"age": "34",
|
||||
"height": "5'4\"",
|
||||
"weight": "123lbs",
|
||||
"focus": "Endurance",
|
||||
"vo2_max_value": "49.5",
|
||||
"vo2_max_percentile": "100th percentile",
|
||||
"age_range": "30-39",
|
||||
@@ -164,35 +139,15 @@ page_8_context = {
|
||||
"zone3_breath_range": "Ideal Range: 25-30 breaths",
|
||||
"zone4_breath_range": "Ideal Range: 30-35 breaths",
|
||||
"zone5_breath_range": "Ideal Range: 40+ breaths",
|
||||
"contact_email": "info@ishplabs.com",
|
||||
"website": "www.ishplabs.com",
|
||||
"social": "@ishplabs",
|
||||
"page_number": "8",
|
||||
}
|
||||
|
||||
page_9_context = {
|
||||
"patient_name": "Keirstyn Moran",
|
||||
"age": "34",
|
||||
"height": "5'4\"",
|
||||
"weight": "123lbs",
|
||||
"focus": "Endurance",
|
||||
"fuel_utilization_chart": image_to_base64(
|
||||
"/home/oluwasanmi/Documents/Work/MKD/report_generation/graphs/fuel_utilization_chart.png"
|
||||
),
|
||||
"client_name": "Keirstyn Moran",
|
||||
"assessment_date": "July 29 2025",
|
||||
"contact_email": "info@ishplabs.com",
|
||||
"website": "www.ishplabs.com",
|
||||
"social": "@ishplabs",
|
||||
"page_number": "9",
|
||||
}
|
||||
|
||||
page_10_context = {
|
||||
"patient_name": "Keirstyn Moran",
|
||||
"age": "34",
|
||||
"height": "5'4\"",
|
||||
"weight": "123lbs",
|
||||
"focus": "Endurance",
|
||||
"vo2_pulse_drop_bpm": "180 bpm",
|
||||
"vo2_pulse_drop_zone": "Zone 4",
|
||||
"vo2_pulse_chart": image_to_base64(
|
||||
@@ -203,18 +158,9 @@ page_10_context = {
|
||||
"vo2_breath_chart": image_to_base64(
|
||||
"/home/oluwasanmi/Documents/Work/MKD/report_generation/graphs/vo2_breath_chart.png"
|
||||
),
|
||||
"contact_email": "info@ishplabs.com",
|
||||
"website": "www.ishplabs.com",
|
||||
"social": "@ishplabs",
|
||||
"page_number": "10",
|
||||
}
|
||||
|
||||
page_11_context = {
|
||||
"patient_name": "Keirstyn Moran",
|
||||
"age": "34",
|
||||
"height": "5'4\"",
|
||||
"weight": "123lbs",
|
||||
"focus": "Endurance",
|
||||
"fat_max_optimal": "*Optimal 10-12Kcals/minute",
|
||||
"fat_max_value": "3.8Kcals/min",
|
||||
"fat_max_heart_rate": "49% of Max Heart Rate",
|
||||
@@ -243,18 +189,10 @@ page_11_context = {
|
||||
"hr_good": "62-65bpm",
|
||||
"hr_excellent": "55-61bpm",
|
||||
"hr_athlete": "44-54bpm",
|
||||
"contact_email": "info@ishplabs.com",
|
||||
"website": "www.ishplabs.com",
|
||||
"social": "@ishplabs",
|
||||
"page_number": "11",
|
||||
}
|
||||
|
||||
page_12_context = {
|
||||
"patient_name": "Keirstyn Moran",
|
||||
"contact_email": "info@ishplabs.com",
|
||||
"website": "www.ishplabs.com",
|
||||
"social": "@ishplabs",
|
||||
"page_number": "12",
|
||||
|
||||
}
|
||||
|
||||
page_13_context = {
|
||||
@@ -369,11 +307,9 @@ page_17_context = {
|
||||
}
|
||||
|
||||
page_18_context = {
|
||||
"patient_name": "Keirstyn Moran",
|
||||
"contact_email": "info@ishplabs.com",
|
||||
"website": "www.ishplabs.com",
|
||||
"social": "@ishplabs",
|
||||
"page_number": "18",
|
||||
"body_fat_percentage_chart": image_to_base64(
|
||||
"/home/oluwasanmi/Documents/Work/MKD/report_generation/graphs/body_fat_percentage_chart.png"
|
||||
),
|
||||
}
|
||||
|
||||
page_19_context = {
|
||||
@@ -388,18 +324,18 @@ context_list = [
|
||||
page_1_context,
|
||||
page_2_context,
|
||||
page_3_context,
|
||||
# page_4_context,
|
||||
# page_5_context,
|
||||
# page_6_context,
|
||||
# page_7_context,
|
||||
# page_8_context,
|
||||
# page_9_context,
|
||||
# page_10_context,
|
||||
# page_11_context,
|
||||
# page_12_context,
|
||||
# page_13_context,
|
||||
# page_14_context,
|
||||
# page_15_context,
|
||||
page_4_context,
|
||||
page_5_context,
|
||||
page_6_context,
|
||||
page_7_context,
|
||||
page_8_context,
|
||||
page_9_context,
|
||||
page_10_context,
|
||||
page_11_context,
|
||||
page_12_context,
|
||||
page_13_context,
|
||||
page_14_context,
|
||||
page_15_context,
|
||||
page_16_context,
|
||||
page_17_context,
|
||||
page_18_context,
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 91 B |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
@@ -1,12 +0,0 @@
|
||||
Parameters,Best,LLN,Pred.,%Pred.,ZScore,PRE#1,PRE#2,PRE#3
|
||||
FVC,4.24,3.03,3.79,112.0,0.95,4.24,4.17,4.15
|
||||
FEV1,3.26,2.53,3.16,103.3,0.28,3.26,3.21,3.14
|
||||
FEV1/FVC%,76.89,72.47,83.78,91.8,-1.05,76.9,77.0,75.7
|
||||
PEF,684,222,384,178.7,-,444,438,684
|
||||
FEF2575,2.74,2.15,3.42,80.2,-0.84,2.74,2.68,2.48
|
||||
FEF25,6.08,,,0.0,-,6.08,6.0,5.53
|
||||
FEF50,3.06,,,0.0,-,3.06,3.1,2.77
|
||||
FEF75,1.06,0.71,1.41,75.1,-0.72,1.06,1.12,0.94
|
||||
PEFTime,79,,,49,-,79,40,39
|
||||
EVol,78.0,,,77.0,-,78.0,77.0,197.0
|
||||
FEV6,4.22,3.03,3.79,111.4,-,4.22,4.17,4.13
|
||||
|
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
@@ -7,9 +7,45 @@ env = Environment(loader=FileSystemLoader("report_gen"))
|
||||
|
||||
html_pages = []
|
||||
|
||||
header_context = {
|
||||
"patient_name": "Keirstyn Moran",
|
||||
"age": 34,
|
||||
"height": "5'4\"",
|
||||
"weight": "123lbs",
|
||||
"focus": "Endurance",
|
||||
}
|
||||
|
||||
footer_context = [{
|
||||
"contact_email": "info@ishplabs.com ",
|
||||
"website": "www.ishplabs.com",
|
||||
"social": "@ishplabs",
|
||||
"page_number": i + 1,
|
||||
} for i in range(len(context_list))]
|
||||
|
||||
|
||||
header_html = env.get_template("header.html").render(header_context)
|
||||
footer_html_list = [env.get_template("footer.html").render(context) for context in footer_context]
|
||||
|
||||
for i, context in enumerate(context_list):
|
||||
template = env.get_template(f"page_{i + 1}.html")
|
||||
html_pages.append(template.render(context))
|
||||
template = env.get_template(f"page_{i + 1}.html").render(context)
|
||||
|
||||
if (i + 1) > 2:
|
||||
full_html = f"""
|
||||
<div class="page flex flex-col justify-between">
|
||||
<div>
|
||||
{header_html}
|
||||
</div>
|
||||
<main class="flex-grow p-4">
|
||||
{template}
|
||||
</main>
|
||||
<div class="border-t text-center text-sm text-gray-600">
|
||||
{footer_html_list[i]}
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
html_pages.append(full_html)
|
||||
else:
|
||||
html_pages.append(template)
|
||||
|
||||
# Combine with page breaks
|
||||
final_html = "<div class='page-break'></div>".join(html_pages)
|
||||
@@ -28,15 +64,26 @@ html_doc = f"""
|
||||
}}
|
||||
.page-break {{ page-break-after: always; }}
|
||||
.page {{
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}}
|
||||
.page main {{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}}
|
||||
/* Reset margins and padding everywhere */
|
||||
* {{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}}
|
||||
/* Prevent images from being too large */
|
||||
img {{
|
||||
max-height: 200px;
|
||||
object-fit: contain;
|
||||
}}
|
||||
/* Reset margins and padding everywhere */
|
||||
* {{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body class="m-0 p-0">
|
||||
|
||||
Binary file not shown.
@@ -1,24 +0,0 @@
|
||||
|
||||
from playwright.sync_api import sync_playwright
|
||||
|
||||
def html_to_pdf(html_path, pdf_path):
|
||||
with sync_playwright() as p:
|
||||
browser = p.chromium.launch()
|
||||
page = browser.new_page()
|
||||
|
||||
# Load local HTML file
|
||||
page.goto(f"file://{html_path}")
|
||||
|
||||
# Export to PDF with A4 size
|
||||
page.pdf(
|
||||
path=pdf_path,
|
||||
format="A4", # <-- built-in A4 support
|
||||
margin={"top": "20mm", "bottom": "20mm", "left": "15mm", "right": "15mm"},
|
||||
print_background=True # include Tailwind background colors/images
|
||||
)
|
||||
|
||||
browser.close()
|
||||
|
||||
|
||||
# Example usage
|
||||
html_to_pdf("table_of_contents.html", "report.pdf")
|
||||
@@ -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>
|
||||
@@ -38,8 +38,3 @@
|
||||
<!-- Dotted Pattern at Bottom -->
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.grid-cols-20 {
|
||||
grid-template-columns: repeat(20, minmax(0, 1fr));
|
||||
}
|
||||
</style>
|
||||
|
||||
+2
-29
@@ -1,18 +1,4 @@
|
||||
<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">
|
||||
<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 | default('Keirstyn Moran') }}</span>
|
||||
<span>Age: {{ age | default('34') }}</span>
|
||||
<span>Height: {{ height | default('5\'4"') }}</span>
|
||||
<span>Weight: {{ weight | default('123lbs') }}</span>
|
||||
<span>Focus: {{ focus | default('Endurance') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="px-8 py-6">
|
||||
@@ -26,7 +12,7 @@
|
||||
|
||||
<!-- VO2 Pulse Graph -->
|
||||
<div class="flex justify-center mb-6">
|
||||
<img src="{{ vo2_pulse_chart }}"
|
||||
<img src="data:image/png;base64, {{ vo2_pulse_chart }}"
|
||||
alt="VO2 Pulse Chart"
|
||||
class="w-full max-w-4xl h-auto object-contain">
|
||||
</div>
|
||||
@@ -42,24 +28,11 @@
|
||||
|
||||
<!-- VO2 Breath Graph -->
|
||||
<div class="flex justify-center mb-6">
|
||||
<img src="{{ vo2_breath_chart }}"
|
||||
<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>
|
||||
|
||||
<!-- Footer Section -->
|
||||
<div class="absolute bottom-0 left-0 right-0 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 | default('info@ishplabs.com') }}</span>
|
||||
<span>WEBSITE: {{ website | default('www.ishplabs.com') }}</span>
|
||||
<span>SOCIAL: {{ social | default('@ishplabs') }}</span>
|
||||
</div>
|
||||
<div class="bg-white text-black font-bold px-3 py-1 text-lg">
|
||||
{{ page_number | default('9') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+50
-84
@@ -1,59 +1,43 @@
|
||||
<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">
|
||||
<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 | default('Keirstyn Moran') }}</span>
|
||||
<span>Age: {{ age | default('34') }}</span>
|
||||
<span>Height: {{ height | default('5\'4"') }}</span>
|
||||
<span>Weight: {{ weight | default('123lbs') }}</span>
|
||||
<span>Focus: {{ focus | default('Endurance') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="px-8 py-6">
|
||||
<!-- Fat Metabolism Section -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-black mb-4 text-center">
|
||||
<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-4 rounded-lg text-center">
|
||||
<h3 class="text-lg font-bold text-black mb-2">Fat Max</h3>
|
||||
<p class="text-sm text-gray-600 italic mb-2">
|
||||
<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-xl font-bold text-black">
|
||||
<p class="text-lg font-bold text-black">
|
||||
{{ fat_max_value | default('3.8Kcals/min') }}
|
||||
</p>
|
||||
<p class="text-sm text-black">
|
||||
<p class="text-xs text-black">
|
||||
{{ fat_max_heart_rate | default('49% of Max Heart Rate')
|
||||
}}
|
||||
</p>
|
||||
<p class="text-sm text-black">
|
||||
<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-4 rounded-lg text-center">
|
||||
<h3 class="text-lg font-bold text-black mb-4">
|
||||
<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-xl font-bold text-black">
|
||||
<p class="text-lg font-bold text-black">
|
||||
{{ crossover_bpm | default('100bpm') }}
|
||||
</p>
|
||||
<p class="text-sm text-black">
|
||||
<p class="text-xs text-black">
|
||||
{{ crossover_heart_rate | default('51% of Max Heart
|
||||
Rate') }}
|
||||
</p>
|
||||
@@ -63,7 +47,7 @@
|
||||
<!-- 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">
|
||||
<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>
|
||||
@@ -71,7 +55,7 @@
|
||||
|
||||
<div class="flex justify-center">
|
||||
<img
|
||||
src="{{ fat_metabolism_chart }}"
|
||||
src="data:image/png;base64, {{ fat_metabolism_chart }}"
|
||||
alt="Fat Metabolism Chart"
|
||||
class="w-full max-w-4xl h-auto object-contain"
|
||||
/>
|
||||
@@ -80,48 +64,48 @@
|
||||
</div>
|
||||
|
||||
<!-- Recovery Section -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-black mb-4 text-center">
|
||||
<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-4 rounded-lg text-center">
|
||||
<h3 class="text-lg font-bold text-black mb-2">
|
||||
<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-sm text-gray-600 mb-2">
|
||||
<p class="text-xs text-gray-600 mb-2">
|
||||
{{ cardiac_recovery_time | default('(1 minute)') }}
|
||||
</p>
|
||||
<p class="text-xl font-bold text-black">
|
||||
<p class="text-lg font-bold text-black">
|
||||
{{ cardiac_recovery_percentage | default('33%') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Metabolic Recovery -->
|
||||
<div class="bg-gray-200 p-4 rounded-lg text-center">
|
||||
<h3 class="text-lg font-bold text-black mb-2">
|
||||
<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-sm text-gray-600 mb-2">
|
||||
<p class="text-xs text-gray-600 mb-2">
|
||||
{{ metabolic_recovery_time | default('(2 minute)') }}
|
||||
</p>
|
||||
<p class="text-xl font-bold text-black">
|
||||
<p class="text-lg font-bold text-black">
|
||||
{{ metabolic_recovery_percentage | default('65%') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Breath Frequency Recovery -->
|
||||
<div class="bg-gray-200 p-4 rounded-lg text-center">
|
||||
<h3 class="text-lg font-bold text-black mb-2">
|
||||
<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-sm text-gray-600 mb-2">
|
||||
<p class="text-xs text-gray-600 mb-2">
|
||||
{{ breath_recovery_time | default('(2.5 minute)') }}
|
||||
</p>
|
||||
<p class="text-xl font-bold text-black">
|
||||
<p class="text-lg font-bold text-black">
|
||||
{{ breath_recovery_percentage | default('76%') }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -130,7 +114,7 @@
|
||||
<!-- Recovery Graph -->
|
||||
<div class="flex justify-center mb-6">
|
||||
<img
|
||||
src="{{ recovery_chart }}"
|
||||
src="data:image/png;base64, {{ recovery_chart }}"
|
||||
alt="Recovery Chart"
|
||||
class="w-full max-w-4xl h-auto object-contain"
|
||||
/>
|
||||
@@ -138,59 +122,59 @@
|
||||
</div>
|
||||
|
||||
<!-- Resting Heart Rate Table -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-lg font-bold text-black mb-4 text-center">
|
||||
<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">
|
||||
<table class="w-full border-collapse text-xs">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="bg-cyan-300 border border-gray-400 p-3 text-black font-bold"
|
||||
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-3 text-black font-bold"
|
||||
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-3 text-black font-bold"
|
||||
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-3 text-black font-bold"
|
||||
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-3 text-black font-bold"
|
||||
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-3 text-black font-bold"
|
||||
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-3 text-black font-bold"
|
||||
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-3 text-black font-bold relative"
|
||||
class="bg-cyan-300 border border-gray-400 p-2 text-black font-bold relative"
|
||||
>
|
||||
Athlete
|
||||
<!-- Arrow indicator -->
|
||||
<div
|
||||
class="absolute -bottom-4 left-1/2 transform -translate-x-1/2"
|
||||
class="absolute -bottom-3 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"
|
||||
class="w-0 h-0 border-l-3 border-r-3 border-t-6 border-transparent border-t-black"
|
||||
></div>
|
||||
</div>
|
||||
</th>
|
||||
@@ -199,42 +183,42 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="bg-cyan-200 border border-gray-400 p-3 text-black font-semibold text-center"
|
||||
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-3 text-black text-center"
|
||||
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-3 text-black text-center"
|
||||
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-3 text-black text-center"
|
||||
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-3 text-black text-center"
|
||||
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-3 text-black text-center"
|
||||
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-3 text-black text-center"
|
||||
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-3 text-black text-center font-bold"
|
||||
class="bg-green-200 border border-gray-400 p-2 text-black text-center font-bold"
|
||||
>
|
||||
{{ hr_athlete | default('44-54bpm') }}
|
||||
</td>
|
||||
@@ -244,22 +228,4 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Section -->
|
||||
<div class="absolute bottom-0 left-0 right-0 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 | default('info@ishplabs.com')
|
||||
}}</span
|
||||
>
|
||||
<span
|
||||
>WEBSITE: {{ website | default('www.ishplabs.com') }}</span
|
||||
>
|
||||
<span>SOCIAL: {{ social | default('@ishplabs') }}</span>
|
||||
</div>
|
||||
<div class="bg-white text-black font-bold px-3 py-1 text-lg">
|
||||
{{ page_number | default('10') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+75
-2
@@ -1,3 +1,76 @@
|
||||
<div class="page" id="page-12">
|
||||
This is page 12
|
||||
<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>
|
||||
@@ -1,19 +1,5 @@
|
||||
<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">
|
||||
<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 | default('Keirstyn Moran') }}</span>
|
||||
<span>Age: {{ age | default('34') }}</span>
|
||||
<span>Height: {{ height | default('5\'4"') }}</span>
|
||||
<span>Weight: {{ weight | default('123lbs') }}</span>
|
||||
<span>Focus: {{ focus | default('Endurance') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="px-8 py-6">
|
||||
<!-- Page Title -->
|
||||
@@ -227,16 +213,4 @@
|
||||
</div>
|
||||
|
||||
<!-- Footer Section -->
|
||||
<div class="absolute bottom-0 left-0 right-0 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 | default('info@ishplabs.com') }}</span>
|
||||
<span>WEBSITE: {{ website | default('www.ishplabs.com') }}</span>
|
||||
<span>SOCIAL: {{ social | default('@ishplabs') }}</span>
|
||||
</div>
|
||||
<div class="bg-white text-black font-bold px-3 py-1 text-lg">
|
||||
{{ page_number | default('12') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,18 +1,4 @@
|
||||
<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">
|
||||
<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: Keirstyn Moran</span>
|
||||
<span>Age: 34</span>
|
||||
<span>Height: 5'4"</span>
|
||||
<span>Weight: 123lbs</span>
|
||||
<span>Focus: Endurance</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="px-8 py-6">
|
||||
@@ -159,18 +145,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Section -->
|
||||
<div class="absolute bottom-0 left-0 right-0 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: info@sportandhighperformance.com</span>
|
||||
<span>WEBSITE: www.sportandhighperformance.com</span>
|
||||
<span>SOCIAL: @sportandhighperformance</span>
|
||||
</div>
|
||||
<div class="bg-white text-black font-bold px-3 py-1 text-lg">
|
||||
13
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,18 +1,4 @@
|
||||
<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">
|
||||
<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: Keirstyn Moran</span>
|
||||
<span>Age: 34</span>
|
||||
<span>Height: 5'4"</span>
|
||||
<span>Weight: 123lbs</span>
|
||||
<span>Focus: Endurance</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="px-8 py-6">
|
||||
@@ -81,17 +67,4 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Section -->
|
||||
<div class="absolute bottom-0 left-0 right-0 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: info@ishplabs.com</span>
|
||||
<span>WEBSITE: www.ishplabs.com</span>
|
||||
<span>SOCIAL: @ishplabs</span>
|
||||
</div>
|
||||
<div class="bg-white text-black font-bold px-3 py-1 text-lg">
|
||||
14
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+25
-52
@@ -1,84 +1,57 @@
|
||||
<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">
|
||||
<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: Keirstyn Moran</span>
|
||||
<span>Age: 34</span>
|
||||
<span>Height: 5'4"</span>
|
||||
<span>Weight: 123lbs</span>
|
||||
<span>Focus: Endurance</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="px-8 py-6">
|
||||
<div class="px-6">
|
||||
<!-- Page Title -->
|
||||
<h1 class="text-3xl font-bold text-black mb-8">Glossary</h1>
|
||||
<h1 class="text-2xl font-bold text-black mb-4">Glossary</h1>
|
||||
|
||||
<!-- Body Fat Percentage -->
|
||||
<div class="mb-6">
|
||||
<h2 class="text-lg font-bold text-black mb-2">Body Fat Percentage:</h2>
|
||||
<p class="text-sm text-black leading-relaxed">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 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-6">
|
||||
<h2 class="text-lg font-bold text-black mb-2">Metabolic Rate:</h2>
|
||||
<p class="text-sm text-black leading-relaxed">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 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-6">
|
||||
<h2 class="text-lg font-bold text-black mb-2">Fuel Source:</h2>
|
||||
<p class="text-sm text-black leading-relaxed mb-3">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-sm text-black leading-relaxed">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 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-6">
|
||||
<h2 class="text-lg font-bold text-black mb-2">NEAT (Non-Exercise Activity Thermogenesis)</h2>
|
||||
<p class="text-sm text-black leading-relaxed">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 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-6">
|
||||
<h2 class="text-lg font-bold text-black mb-2">Spirometry:</h2>
|
||||
<p class="text-sm text-black leading-relaxed mb-3">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-sm text-black leading-relaxed mb-3">"From a Performance standpoint, it is essential in making informed training recommendations related to respiratory health to optimize endurance performance and metabolic health."</p>
|
||||
<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-sm text-black space-y-2 list-disc list-inside ml-4">
|
||||
<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-sm text-black leading-relaxed mt-3">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>
|
||||
<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 class="mb-6">
|
||||
<h2 class="text-lg font-bold text-black mb-2">VO2 max:</h2>
|
||||
<p class="text-sm text-black leading-relaxed mb-3">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-sm text-black leading-relaxed">Understanding and training to increase your VO2 max can contribute to enhanced physical performance, longevity and well-being.</p>
|
||||
<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>
|
||||
|
||||
<!-- Footer Section -->
|
||||
<div class="absolute bottom-0 left-0 right-0 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: info@ishplabs.com</span>
|
||||
<span>WEBSITE: www.ishplabs.com</span>
|
||||
<span>SOCIAL: @ishplabs</span>
|
||||
</div>
|
||||
<div class="bg-white text-black font-bold px-3 py-1 text-lg">
|
||||
15
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+20
-97
@@ -1,51 +1,29 @@
|
||||
<!-- 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="p-4 text-sm">
|
||||
<h1 class="text-2xl font-bold mb-4">Glossary</h1>
|
||||
|
||||
<div class="space-y-6 text-sm leading-relaxed">
|
||||
<div class="space-y-3 leading-tight">
|
||||
<!-- Peak VT -->
|
||||
<div>
|
||||
<p class="font-semibold">Peak VT:</p>
|
||||
<p class="mb-2">
|
||||
<p class="mb-1">
|
||||
Peak Volume of air moved throughout the test.
|
||||
</p>
|
||||
<p class="mb-2">
|
||||
Respiratory Capability Limitations that can be found
|
||||
include:
|
||||
<p class="mb-1">
|
||||
Respiratory Capability Limitations that can be found include:
|
||||
</p>
|
||||
<ul class="list-disc ml-6 space-y-1">
|
||||
<ul class="list-disc ml-4 space-y-0">
|
||||
<li>
|
||||
<strong>Endurance:</strong> Normal capacity, but cannot
|
||||
maintain their VT over time.
|
||||
<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
|
||||
<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.
|
||||
<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>
|
||||
@@ -54,12 +32,7 @@
|
||||
<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.
|
||||
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>
|
||||
|
||||
@@ -67,37 +40,18 @@
|
||||
<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.
|
||||
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 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.
|
||||
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>
|
||||
|
||||
@@ -105,29 +59,18 @@
|
||||
<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.
|
||||
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 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.
|
||||
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>
|
||||
|
||||
@@ -135,31 +78,11 @@
|
||||
<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.
|
||||
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>
|
||||
</div>
|
||||
|
||||
+7
-207
@@ -1,18 +1,4 @@
|
||||
<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>
|
||||
@@ -38,199 +24,13 @@
|
||||
</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 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"
|
||||
/>
|
||||
</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>
|
||||
|
||||
+210
-235
File diff suppressed because it is too large
Load Diff
+141
-51
@@ -1,67 +1,157 @@
|
||||
<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">
|
||||
<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 | default('Keirstyn Moran') }}</span>
|
||||
<span>Age: {{ age | default('34') }}</span>
|
||||
<span>Height: {{ height | default('5\'4"') }}</span>
|
||||
<span>Weight: {{ weight | default('123lbs') }}</span>
|
||||
<span>Focus: {{ focus | default('Endurance') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="px-8 py-6">
|
||||
<div class="px-6 py-4">
|
||||
<!-- Page Title -->
|
||||
<h1 class="text-3xl font-bold text-black mb-6">Nutrition Guidelines</h1>
|
||||
<h1 class="text-3xl font-bold text-black mb-6">Overview</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-8">
|
||||
<div class="relative">
|
||||
<img src="data:image/png;base64, {{ body_composition_chart}}"
|
||||
alt="Body Composition Chart"
|
||||
class="w-80 h-80 object-contain">
|
||||
|
||||
<!-- Chart Labels -->
|
||||
<!-- 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>
|
||||
|
||||
<!-- Body Fat Percentage Section -->
|
||||
<div class="mb-8">
|
||||
|
||||
<!-- Body Fat Chart -->
|
||||
<div class="flex justify-center">
|
||||
<img src="data:image/png;base64, {{ body_fat_chart }}"
|
||||
alt="Body Fat Percentage Chart" >
|
||||
<!-- 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>
|
||||
|
||||
<!-- Age Range Label -->
|
||||
<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>
|
||||
</div>
|
||||
<!-- Footer Section -->
|
||||
<div class="absolute bottom-0 left-0 right-0 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 | default('info@ishplabs.com') }}</span>
|
||||
<span>WEBSITE: {{ website | default('www.ishplabs.com') }}</span>
|
||||
<span>SOCIAL: {{ social | default('@ishplabs') }}</span>
|
||||
|
||||
<!-- 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>
|
||||
<div class="bg-white text-black font-bold px-3 py-1 text-lg">
|
||||
{{ page_number | default('4') }}
|
||||
|
||||
<!-- 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>
|
||||
|
||||
+24
-131
@@ -1,147 +1,40 @@
|
||||
<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">
|
||||
<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 | default('Keirstyn Moran') }}</span>
|
||||
<span>Age: {{ age | default('34') }}</span>
|
||||
<span>Height: {{ height | default('5\'4"') }}</span>
|
||||
<span>Weight: {{ weight | default('123lbs') }}</span>
|
||||
<span>Focus: {{ focus | default('Endurance') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="px-8 py-6">
|
||||
<!-- Page Title -->
|
||||
<h1 class="text-4xl font-bold text-black mb-8">Overview</h1>
|
||||
<h1 class="text-3xl font-bold text-black mb-6">Nutrition Guidelines</h1>
|
||||
|
||||
<!-- Top Row: Metabolic and Respiratory -->
|
||||
<div class="grid grid-cols-2 gap-8 mb-8">
|
||||
<!-- Metabolic Section -->
|
||||
<div class="border border-gray-300 rounded-lg p-4">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-8 h-8 bg-gray-400 rounded-full mr-3"></div>
|
||||
<h2 class="text-xl font-bold">Metabolic</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2 text-sm">
|
||||
<!-- Headers -->
|
||||
<div class="bg-gray-200 p-2 font-semibold border">Resting Metabolic Rate</div>
|
||||
<div class="bg-gray-200 p-2 font-semibold border">Active Metabolic Rate</div>
|
||||
<!-- 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-8">
|
||||
<div class="relative">
|
||||
<img src="data:image/png;base64, {{ body_composition_chart}}"
|
||||
alt="Body Composition Chart"
|
||||
class="w-80 h-80 object-contain">
|
||||
|
||||
<!-- Row 1 -->
|
||||
<div class="bg-red-200 p-2 border">Fat/Carbohydrate Ratio</div>
|
||||
<div class="bg-red-200 p-2 border">Metabolic Efficiency Low Intensity</div>
|
||||
|
||||
<!-- Row 2 -->
|
||||
<div class="bg-gray-200 p-2 border">Metabolism</div>
|
||||
<div class="bg-yellow-200 p-2 border">Metabolic Efficiency High Intensity</div>
|
||||
|
||||
<!-- Row 3 -->
|
||||
<div class="bg-yellow-200 p-2 border">Breathing Frequency</div>
|
||||
<div class="bg-white p-2 border"></div>
|
||||
|
||||
<!-- Row 4 -->
|
||||
<div class="bg-red-200 p-2 border">Breath Volume</div>
|
||||
<div class="bg-white p-2 border"></div>
|
||||
|
||||
<!-- Row 5 -->
|
||||
<div class="bg-gray-200 p-2 border">Heart Rate</div>
|
||||
<div class="bg-white p-2 border"></div>
|
||||
<!-- Chart Labels -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Respiratory Section -->
|
||||
<div class="border border-gray-300 rounded-lg p-4">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-8 h-8 bg-gray-400 rounded-full mr-3"></div>
|
||||
<h2 class="text-xl font-bold">Respiratory</h2>
|
||||
<!-- Body Fat Percentage Section -->
|
||||
<div class="mb-8">
|
||||
|
||||
<!-- Body Fat Chart -->
|
||||
<div class="flex justify-center">
|
||||
<img src="data:image/png;base64, {{ body_fat_chart }}"
|
||||
alt="Body Fat Percentage Chart" >
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="bg-gray-200 p-2 font-semibold border">Lung Function</div>
|
||||
<div class="bg-green-200 p-2 border">Lung Capacity</div>
|
||||
<div class="bg-yellow-200 p-2 border">Lung Capability</div>
|
||||
<div class="bg-red-200 p-2 border">Breathing Frequency Zones</div>
|
||||
</div>
|
||||
<!-- Age Range Label -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Middle Row: Cardiovascular and Strength -->
|
||||
<div class="grid grid-cols-2 gap-8 mb-8">
|
||||
<!-- Cardiovascular Section -->
|
||||
<div class="border border-gray-300 rounded-lg p-4">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-8 h-8 bg-gray-400 rounded-full mr-3"></div>
|
||||
<h2 class="text-xl font-bold">Cardiovascular</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="bg-gray-200 p-2 font-semibold border">Active Metabolic Rate</div>
|
||||
<div class="bg-green-200 p-2 border">Aerobic Health (VO2 Max)</div>
|
||||
<div class="bg-red-200 p-2 border">Training Zones</div>
|
||||
<div class="bg-red-200 p-2 border">Metabolic Efficiency (VO2 Pulse)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Strength Section -->
|
||||
<div class="border border-gray-300 rounded-lg p-4">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-8 h-8 bg-gray-400 rounded-full mr-3"></div>
|
||||
<h2 class="text-xl font-bold">Strength</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="bg-gray-200 p-2 font-semibold border">Strength - High Intensity</div>
|
||||
<div class="bg-green-200 p-2 border">CO2/O2 (RER)</div>
|
||||
<div class="bg-green-200 p-2 border">Heart Rate</div>
|
||||
<div class="bg-green-200 p-2 border">Breath Frequency</div>
|
||||
<div class="bg-yellow-200 p-2 border">Muscle Efficiency</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Row: Recovery -->
|
||||
<div class="grid grid-cols-2 gap-8">
|
||||
<!-- Recovery Section -->
|
||||
<div class="border border-gray-300 rounded-lg p-4">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-8 h-8 bg-gray-400 rounded-full mr-3"></div>
|
||||
<h2 class="text-xl font-bold">Recovery</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="bg-gray-200 p-2 font-semibold border">Active Metabolic Rate</div>
|
||||
<div class="bg-gray-200 p-2 border flex justify-between items-center">
|
||||
<span>Heart Rate</span>
|
||||
<span class="bg-green-400 text-white px-2 py-1 rounded font-bold">44</span>
|
||||
</div>
|
||||
<div class="bg-green-200 p-2 border">Metabolic (CO2)</div>
|
||||
<div class="bg-gray-200 p-2 border">Muscle Oxygen</div>
|
||||
<div class="bg-red-200 p-2 border">Breath Frequency</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty space for balance -->
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Section -->
|
||||
<div class="absolute bottom-0 left-0 right-0 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 | default('info@ishplabs.com') }}</span>
|
||||
<span>WEBSITE: {{ website | default('www.ishplabs.com') }}</span>
|
||||
<span>SOCIAL: {{ social | default('@ishplabs') }}</span>
|
||||
</div>
|
||||
<div class="bg-white text-black font-bold px-3 py-1 text-lg">
|
||||
{{ page_number | default('3') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+85
-163
@@ -1,175 +1,97 @@
|
||||
<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">
|
||||
<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 | default('Keirstyn Moran') }}</span>
|
||||
<span>Age: {{ age | default('34') }}</span>
|
||||
<span>Height: {{ height | default('5\'4"') }}</span>
|
||||
<span>Weight: {{ weight | default('123lbs') }}</span>
|
||||
<span>Focus: {{ focus | default('Endurance') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full bg-white">
|
||||
<!-- Header Section -->
|
||||
|
||||
<!-- 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-4">Resting Metabolic Rate Assessment</h2>
|
||||
<p class="text-gray-700 text-sm mb-8">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>
|
||||
<!-- Main Content -->
|
||||
<div class="px-8 py-2">
|
||||
<!-- Page Title -->
|
||||
<h1 class="text-3xl font-bold text-black mb-3">Nutrition Guidelines</h1>
|
||||
|
||||
<!-- Slow vs Fast Metabolism Section -->
|
||||
<div class="mb-12">
|
||||
<div class="text-center mb-6">
|
||||
<h3 class="text-2xl font-bold text-black mb-6">Slow vs Fast Metabolism</h3>
|
||||
|
||||
<!-- Metabolism Scale -->
|
||||
<div class="relative mx-auto max-w-2xl">
|
||||
<!-- Scale background -->
|
||||
<div class="bg-gray-200 h-12 rounded-lg relative">
|
||||
<!-- Green indicator at slow position -->
|
||||
<div class="absolute left-16 top-0 h-12 w-32 bg-green-200 rounded-lg flex items-center justify-center">
|
||||
<span class="text-black font-bold">{{ resting_calories | default('1386kCals') }}</span>
|
||||
<!-- 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>
|
||||
<!-- Marker dot -->
|
||||
<div class="absolute left-20 -top-2 w-4 h-4 bg-black rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<!-- Scale labels -->
|
||||
<div class="flex justify-between mt-4 text-sm font-semibold">
|
||||
<span>Very Slow</span>
|
||||
<span>Slow</span>
|
||||
<span>Average</span>
|
||||
<span>Fast</span>
|
||||
<span>Very Fast</span>
|
||||
</div>
|
||||
|
||||
<!-- Scale dots -->
|
||||
<div class="flex justify-between mt-2">
|
||||
<div class="w-2 h-2 bg-black rounded-full"></div>
|
||||
<div class="w-2 h-2 bg-black rounded-full"></div>
|
||||
<div class="w-2 h-2 bg-black rounded-full"></div>
|
||||
<div class="w-2 h-2 bg-black rounded-full"></div>
|
||||
<div class="w-2 h-2 bg-black rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fuel Source Section -->
|
||||
<div class="mb-12">
|
||||
<h3 class="text-2xl font-bold text-black mb-6 text-center">Fuel Source</h3>
|
||||
|
||||
<!-- Fuel Source Bar -->
|
||||
<div class="relative mx-auto max-w-2xl">
|
||||
<div class="flex h-16 rounded-lg overflow-hidden">
|
||||
<!-- Fats section (33%) -->
|
||||
<div class="bg-yellow-300 flex-none w-1/3 flex items-center justify-center">
|
||||
<div class="text-center">
|
||||
<div class="font-bold text-black">Fats</div>
|
||||
<div class="font-bold text-black">{{ fat_percentage | default('33%') }}</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>
|
||||
<!-- Carbs section (67%) -->
|
||||
<div class="bg-cyan-300 flex-1 flex items-center justify-center">
|
||||
<div class="text-center">
|
||||
<div class="font-bold text-black">Carbs</div>
|
||||
<div class="font-bold text-black">{{ carb_percentage | default('67%') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Optimal marker -->
|
||||
<div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-8">
|
||||
<div class="text-center">
|
||||
<div class="text-sm font-semibold">Optimal</div>
|
||||
<div class="w-0 h-0 border-l-4 border-r-4 border-t-8 border-transparent border-t-black"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scale numbers -->
|
||||
<div class="flex justify-between mt-4 text-sm">
|
||||
<span>0</span>
|
||||
<span>25</span>
|
||||
<span>50</span>
|
||||
<span>75</span>
|
||||
<span>100</span>
|
||||
</div>
|
||||
|
||||
<!-- Scale dots -->
|
||||
<div class="flex justify-between mt-2">
|
||||
<div class="w-2 h-2 bg-black rounded-full"></div>
|
||||
<div class="w-2 h-2 bg-black rounded-full"></div>
|
||||
<div class="w-2 h-2 bg-black rounded-full"></div>
|
||||
<div class="w-2 h-2 bg-black rounded-full"></div>
|
||||
<div class="w-2 h-2 bg-black rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Caloric Intake Section -->
|
||||
<div class="mb-12">
|
||||
<h3 class="text-3xl font-bold text-black mb-8 text-center">Caloric Intake</h3>
|
||||
|
||||
<!-- Calculation Formula -->
|
||||
<div class="flex items-center justify-center space-x-6 text-center">
|
||||
<!-- Resting Metabolic -->
|
||||
<div class="bg-gray-200 p-4 rounded-lg">
|
||||
<div class="text-2xl font-bold text-black">{{ resting_calories | default('1386kCals') }}</div>
|
||||
<div class="text-sm text-gray-600 mt-2">
|
||||
<div>Resting</div>
|
||||
<div>Metabolic</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>
|
||||
|
||||
<!-- Plus sign -->
|
||||
<div class="text-4xl font-bold text-black">+</div>
|
||||
|
||||
<!-- NEAT -->
|
||||
<div class="bg-gray-200 p-4 rounded-lg">
|
||||
<div class="text-2xl font-bold text-black">{{ neat_calories | default('762kCals') }}</div>
|
||||
<div class="text-sm text-gray-600 mt-2">NEAT</div>
|
||||
</div>
|
||||
|
||||
<!-- Minus sign -->
|
||||
<div class="text-4xl font-bold text-black">-</div>
|
||||
|
||||
<!-- Weight Loss -->
|
||||
<div class="bg-gray-200 p-4 rounded-lg">
|
||||
<div class="text-2xl font-bold text-black">{{ weight_loss_calories | default('423kCals') }}</div>
|
||||
<div class="text-sm text-gray-600 mt-2">
|
||||
<div>to lose {{ weight_loss_rate | default('1.1lbs') }}</div>
|
||||
<div>per week</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Equals sign -->
|
||||
<div class="text-4xl font-bold text-black">=</div>
|
||||
|
||||
<!-- Total -->
|
||||
<div class="bg-gray-200 p-4 rounded-lg">
|
||||
<div class="text-2xl font-bold text-black">{{ total_calories | default('~1725kCals') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Section -->
|
||||
<div class="absolute bottom-0 left-0 right-0 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 | default('info@ishplabs.com') }}</span>
|
||||
<span>WEBSITE: {{ website | default('www.ishplabs.com') }}</span>
|
||||
<span>SOCIAL: {{ social | default('@ishplabs') }}</span>
|
||||
</div>
|
||||
<div class="bg-white text-black font-bold px-3 py-1 text-lg">
|
||||
{{ page_number | default('5') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+16
-43
@@ -1,20 +1,6 @@
|
||||
<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">
|
||||
<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 | default('Keirstyn Moran') }}</span>
|
||||
<span>Age: {{ age | default('34') }}</span>
|
||||
<span>Height: {{ height | default('5\'4"') }}</span>
|
||||
<span>Weight: {{ weight | default('123lbs') }}</span>
|
||||
<span>Focus: {{ focus | default('Endurance') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<!-- 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>
|
||||
@@ -24,9 +10,9 @@
|
||||
<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-2 mb-8">
|
||||
<div class="grid grid-cols-7 gap-3 mb-8">
|
||||
<!-- Monday -->
|
||||
<div class="bg-cyan-300 p-3 text-center rounded-lg">
|
||||
<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">
|
||||
@@ -38,7 +24,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Tuesday -->
|
||||
<div class="bg-cyan-300 p-3 text-center rounded-lg">
|
||||
<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">
|
||||
@@ -50,7 +36,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Wednesday -->
|
||||
<div class="bg-cyan-300 p-3 text-center rounded-lg">
|
||||
<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">
|
||||
@@ -62,7 +48,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Thursday -->
|
||||
<div class="bg-cyan-300 p-3 text-center rounded-lg">
|
||||
<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">
|
||||
@@ -74,7 +60,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Friday -->
|
||||
<div class="bg-cyan-300 p-3 text-center rounded-lg">
|
||||
<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">
|
||||
@@ -86,7 +72,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Saturday -->
|
||||
<div class="bg-gray-200 p-3 text-center rounded-lg">
|
||||
<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">
|
||||
@@ -98,7 +84,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Sunday -->
|
||||
<div class="bg-gray-200 p-3 text-center rounded-lg">
|
||||
<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">
|
||||
@@ -118,7 +104,7 @@
|
||||
<!-- Weekly Grid -->
|
||||
<div class="grid grid-cols-7 gap-2 mb-8">
|
||||
<!-- Monday -->
|
||||
<div class="bg-cyan-300 p-3 text-center rounded-lg">
|
||||
<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">
|
||||
@@ -130,7 +116,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Tuesday -->
|
||||
<div class="bg-cyan-300 p-3 text-center rounded-lg">
|
||||
<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">
|
||||
@@ -142,7 +128,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Wednesday -->
|
||||
<div class="bg-cyan-300 p-3 text-center rounded-lg">
|
||||
<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">
|
||||
@@ -154,7 +140,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Thursday -->
|
||||
<div class="bg-cyan-300 p-3 text-center rounded-lg">
|
||||
<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">
|
||||
@@ -166,7 +152,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Friday -->
|
||||
<div class="bg-cyan-300 p-3 text-center rounded-lg">
|
||||
<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">
|
||||
@@ -178,7 +164,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Saturday -->
|
||||
<div class="bg-gray-200 p-3 text-center rounded-lg">
|
||||
<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">
|
||||
@@ -190,7 +176,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Sunday -->
|
||||
<div class="bg-gray-200 p-3 text-center rounded-lg">
|
||||
<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">
|
||||
@@ -230,17 +216,4 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Section -->
|
||||
<div class="absolute bottom-0 left-0 right-0 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 | default('info@ishplabs.com') }}</span>
|
||||
<span>WEBSITE: {{ website | default('www.ishplabs.com') }}</span>
|
||||
<span>SOCIAL: {{ social | default('@ishplabs') }}</span>
|
||||
</div>
|
||||
<div class="bg-white text-black font-bold px-3 py-1 text-lg">
|
||||
{{ page_number | default('6') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+32
-174
@@ -1,180 +1,38 @@
|
||||
<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">
|
||||
<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 | default('Keirstyn Moran') }}</span>
|
||||
<span>Age: {{ age | default('34') }}</span>
|
||||
<span>Height: {{ height | default('5\'4"') }}</span>
|
||||
<span>Weight: {{ weight | default('123lbs') }}</span>
|
||||
<span>Focus: {{ focus | default('Endurance') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="px-8 py-6">
|
||||
<!-- Page Title -->
|
||||
<h1 class="text-3xl font-bold text-black mb-6">Lung Analysis</h1>
|
||||
<div class="w-full page bg-white p-8">
|
||||
<!-- Header -->
|
||||
<h1 class="text-3xl font-bold mb-6">Lung Analysis</h1>
|
||||
|
||||
<!-- Spirometry Assessment Section -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-semibold mb-4">Spirometry Assessment</h2>
|
||||
<p class="text-sm text-gray-700 mb-6">
|
||||
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>
|
||||
|
||||
<!-- Spirometry Assessment Section -->
|
||||
<h2 class="text-xl font-bold text-black mb-4">Spirometry Assessment</h2>
|
||||
<p class="text-gray-700 text-sm mb-8">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>
|
||||
|
||||
<!-- Spirometry Charts Section -->
|
||||
<div class="mb-8 space-y-6">
|
||||
<!-- Lung Volume Chart -->
|
||||
<div class="flex items-center">
|
||||
<div class="w-32 text-right pr-4">
|
||||
<div class="font-bold text-black">Lung Volume</div>
|
||||
<div class="text-xs text-gray-600">LLN</div>
|
||||
</div>
|
||||
<div class="flex-1 relative">
|
||||
<!-- Color-coded bar -->
|
||||
<div class="flex h-8 rounded">
|
||||
<div class="bg-red-300 flex-1"></div>
|
||||
<div class="bg-orange-300 flex-1"></div>
|
||||
<div class="bg-yellow-300 flex-1"></div>
|
||||
<div class="bg-green-300 flex-1"></div>
|
||||
<div class="bg-green-400 flex-1"></div>
|
||||
</div>
|
||||
<!-- Predicted marker -->
|
||||
<div class="absolute top-0 left-3/4 transform -translate-x-1/2">
|
||||
<div class="text-xs font-semibold mb-1">Predicted</div>
|
||||
<div class="w-0 h-0 border-l-2 border-r-2 border-t-4 border-transparent border-t-black"></div>
|
||||
</div>
|
||||
<!-- Scale -->
|
||||
<div class="flex justify-between text-xs mt-2">
|
||||
<span>-5</span>
|
||||
<span>-4</span>
|
||||
<span>-3</span>
|
||||
<span>-2</span>
|
||||
<span>-1</span>
|
||||
<span>0</span>
|
||||
<span>1</span>
|
||||
<span>2</span>
|
||||
<span>3</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-32 pl-4">
|
||||
<div class="font-bold text-black">FVC</div>
|
||||
<div class="text-sm text-black">{{ fvc_value | default('4.24L → 112.0%') }}</div>
|
||||
<div class="text-xs text-gray-600">of predicted</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lung Power Chart -->
|
||||
<div class="flex items-center">
|
||||
<div class="w-32 text-right pr-4">
|
||||
<div class="font-bold text-black">Lung Power</div>
|
||||
</div>
|
||||
<div class="flex-1 relative">
|
||||
<!-- Color-coded bar -->
|
||||
<div class="flex h-8 rounded">
|
||||
<div class="bg-red-300 flex-1"></div>
|
||||
<div class="bg-orange-300 flex-1"></div>
|
||||
<div class="bg-yellow-300 flex-1"></div>
|
||||
<div class="bg-green-300 flex-1"></div>
|
||||
<div class="bg-green-400 flex-1"></div>
|
||||
</div>
|
||||
<!-- Marker at position -->
|
||||
<div class="absolute top-0 left-2/3 transform -translate-x-1/2">
|
||||
<div class="w-0 h-0 border-l-2 border-r-2 border-t-4 border-transparent border-t-black"></div>
|
||||
</div>
|
||||
<!-- Scale -->
|
||||
<div class="flex justify-between text-xs mt-2">
|
||||
<span>-5</span>
|
||||
<span>-4</span>
|
||||
<span>-3</span>
|
||||
<span>-2</span>
|
||||
<span>-1</span>
|
||||
<span>0</span>
|
||||
<span>1</span>
|
||||
<span>2</span>
|
||||
<span>3</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-32 pl-4">
|
||||
<div class="font-bold text-black">FEV1</div>
|
||||
<div class="text-sm text-black">{{ fev1_value | default('3.26L → 103.3%') }}</div>
|
||||
<div class="text-xs text-gray-600">of predicted</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Power/Volume Chart -->
|
||||
<div class="flex items-center">
|
||||
<div class="w-32 text-right pr-4">
|
||||
<div class="font-bold text-black">Power/Volume</div>
|
||||
</div>
|
||||
<div class="flex-1 relative">
|
||||
<!-- Color-coded bar -->
|
||||
<div class="flex h-8 rounded">
|
||||
<div class="bg-red-300 flex-1"></div>
|
||||
<div class="bg-orange-300 flex-1"></div>
|
||||
<div class="bg-yellow-300 flex-1"></div>
|
||||
<div class="bg-green-300 flex-1"></div>
|
||||
<div class="bg-green-400 flex-1"></div>
|
||||
</div>
|
||||
<!-- Scale -->
|
||||
<div class="flex justify-between text-xs mt-2">
|
||||
<span>-5</span>
|
||||
<span>-4</span>
|
||||
<span>-3</span>
|
||||
<span>-2</span>
|
||||
<span>-1</span>
|
||||
<span>0</span>
|
||||
<span>1</span>
|
||||
<span>2</span>
|
||||
<span>3</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-32 pl-4">
|
||||
<div class="font-bold text-black">FEV1/FVC</div>
|
||||
<div class="text-sm text-black">{{ fev1_fvc_ratio | default('76.89% → 91.8%') }}</div>
|
||||
<div class="text-xs text-gray-600">of predicted</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Indications Section -->
|
||||
<div class="bg-gray-200 p-4 rounded-lg mb-8 text-center">
|
||||
<h3 class="text-lg font-bold text-black mb-2">Indications</h3>
|
||||
<p class="text-black">{{ indication | default('No Respiratory Capacity Limitation') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Respiratory Section -->
|
||||
<div class="mb-6">
|
||||
<h2 class="text-2xl font-bold text-black mb-4 text-center">Respiratory</h2>
|
||||
|
||||
<!-- Respiratory Graph -->
|
||||
<div class="flex justify-center mb-4">
|
||||
<img src="data:image/png;base64, {{ respiratory_graph }}"
|
||||
alt="Respiratory Analysis Chart"
|
||||
class="w-full max-w-4xl h-64 object-contain">
|
||||
</div>
|
||||
|
||||
<!-- Peak VT Information -->
|
||||
<div class="bg-gray-200 p-4 rounded-lg text-center">
|
||||
<h4 class="text-lg font-bold text-black mb-2">Peak VT</h4>
|
||||
<p class="text-black">{{ peak_vt_value | default('2.38L/Breath which occurs at 172bpm (Zone 3)') }}</p>
|
||||
<p class="text-black font-semibold">{{ peak_vt_percentage | default('73% of FEV1') }}</p>
|
||||
</div>
|
||||
<!-- Lung Volume Chart -->
|
||||
<img src="data:image/png;base64,{{ lung_analysis_chart }}" alt="Lung Volume Analysis Chart" class="w-full mb-6">
|
||||
|
||||
<!-- Indications Box -->
|
||||
<div class="bg-gray-200 rounded-lg p-4 text-center mb-8">
|
||||
<h3 class="font-semibold text-lg mb-2">Indications</h3>
|
||||
<p class="text-gray-700">{{ indication }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Section -->
|
||||
<div class="absolute bottom-0 left-0 right-0 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 | default('info@ishplabs.com') }}</span>
|
||||
<span>WEBSITE: {{ website | default('www.ishplabs.com') }}</span>
|
||||
<span>SOCIAL: {{ social | default('@ishplabs') }}</span>
|
||||
</div>
|
||||
<div class="bg-white text-black font-bold px-3 py-1 text-lg">
|
||||
{{ page_number | default('7') }}
|
||||
</div>
|
||||
|
||||
<!-- Respiratory Section -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-semibold mb-4 text-center">Respiratory</h2>
|
||||
|
||||
<!-- Respiratory Chart -->
|
||||
<img src="data:image/png;base64,{{ respiratory_analysis_chart }}" alt="Respiratory Analysis Chart" class="w-full mb-4">
|
||||
|
||||
<!-- 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>
|
||||
|
||||
@@ -1,18 +1,4 @@
|
||||
<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">
|
||||
<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 | default('Keirstyn Moran') }}</span>
|
||||
<span>Age: {{ age | default('34') }}</span>
|
||||
<span>Height: {{ height | default('5\'4"') }}</span>
|
||||
<span>Weight: {{ weight | default('123lbs') }}</span>
|
||||
<span>Focus: {{ focus | default('Endurance') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="px-8 py-6">
|
||||
@@ -209,17 +195,4 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Section -->
|
||||
<div class="absolute bottom-0 left-0 right-0 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 | default('info@ishplabs.com') }}</span>
|
||||
<span>WEBSITE: {{ website | default('www.ishplabs.com') }}</span>
|
||||
<span>SOCIAL: {{ social | default('@ishplabs') }}</span>
|
||||
</div>
|
||||
<div class="bg-white text-black font-bold px-3 py-1 text-lg">
|
||||
{{ page_number | default('8') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+2
-29
@@ -1,24 +1,10 @@
|
||||
<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">
|
||||
<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 | default('Keirstyn Moran') }}</span>
|
||||
<span>Age: {{ age | default('34') }}</span>
|
||||
<span>Height: {{ height | default('5\'4"') }}</span>
|
||||
<span>Weight: {{ weight | default('123lbs') }}</span>
|
||||
<span>Focus: {{ focus | default('Endurance') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="px-8 py-12 flex flex-col items-center justify-center h-full">
|
||||
<div class="flex flex-col items-center justify-center h-full">
|
||||
<!-- Fuel Utilization Chart -->
|
||||
<div class="w-full max-w-5xl">
|
||||
<img src="{{ fuel_utilization_chart }}"
|
||||
<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">
|
||||
</div>
|
||||
@@ -32,17 +18,4 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Section -->
|
||||
<div class="absolute bottom-0 left-0 right-0 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 | default('info@ishplabs.com') }}</span>
|
||||
<span>WEBSITE: {{ website | default('www.ishplabs.com') }}</span>
|
||||
<span>SOCIAL: {{ social | default('@ishplabs') }}</span>
|
||||
</div>
|
||||
<div class="bg-white text-black font-bold px-3 py-1 text-lg">
|
||||
{{ page_number | default('9') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Binary file not shown.
@@ -1,128 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="p-8">
|
||||
<div class="relative w-full h-screen bg-white overflow-hidden">
|
||||
<!-- Background Design -->
|
||||
<div class="absolute inset-0">
|
||||
<!-- Left side - White section with ISHP logo -->
|
||||
<div
|
||||
class="absolute left-0 top-0 w-1/3 h-full bg-white flex items-start justify-start p-8"
|
||||
>
|
||||
<div class="text-black font-bold text-4xl tracking-wider">ISHP</div>
|
||||
</div>
|
||||
|
||||
<!-- Diagonal cyan divider -->
|
||||
<div class="absolute left-0 top-0 w-full h-full">
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
class="w-full h-full"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<polygon points="0,0 35,0 25,100 0,100" fill="#22d3ee" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Right side - Black section -->
|
||||
<div class="absolute right-0 top-0 w-2/3 h-full bg-black">
|
||||
<!-- Dotted pattern at bottom -->
|
||||
<div
|
||||
class="absolute bottom-0 left-0 w-full h-32 flex items-end justify-start pl-8 pb-8"
|
||||
>
|
||||
<div class="grid grid-cols-16 gap-2">
|
||||
<!-- Creating dotted pattern -->
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional rows of dots -->
|
||||
<div
|
||||
class="absolute bottom-16 left-0 w-full h-8 flex items-center justify-start pl-8"
|
||||
>
|
||||
<div class="grid grid-cols-16 gap-2">
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute bottom-32 left-0 w-full h-8 flex items-center justify-start pl-8"
|
||||
>
|
||||
<div class="grid grid-cols-16 gap-2">
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div
|
||||
class="relative z-10 h-full flex flex-col items-center justify-center text-white"
|
||||
>
|
||||
<!-- Main Title -->
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-6xl font-bold tracking-wider mb-4">BIO-PERFORMX</h1>
|
||||
<p class="text-2xl font-light italic">Endurance</p>
|
||||
</div>
|
||||
|
||||
<!-- Patient Name -->
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-4xl font-bold tracking-widest">John Doe</h2>
|
||||
<h2 class="text-4xl font-bold tracking-widest">Moran</h2>
|
||||
</div>
|
||||
|
||||
<!-- Date -->
|
||||
<div class="text-center">
|
||||
<p class="text-xl font-light italic underline">July 29, 2025</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,157 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Truth Report</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<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-4xl font-bold text-black mb-6 tracking-wide"></h1>
|
||||
TABLE OF CONTENTS
|
||||
</h1>
|
||||
<div class="w-full h-1 bg-cyan-400"></div>
|
||||
</div>
|
||||
|
||||
<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 bg-green-200 flex-1 justify-center h-full">
|
||||
<h2 class="text-2xl font-semibold text-black">
|
||||
Fuel Utilizationd
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Table of Contents Items -->
|
||||
<div class="flex flex-col justify-between space-y-6 pt-6">
|
||||
<!-- Lung Analysis -->
|
||||
<div class="flex items-start bg-gray-200 rounded-lg mb-2">
|
||||
<div class="bg-black text-white text-2xl font-bold w-16 h-full flex items-center justify-center rounded-lg mr-8 flex-shrink-0">
|
||||
3
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h2 class="text-2xl font-semibold text-black mb-3">
|
||||
Lung Analysis
|
||||
</h2>
|
||||
<div class="space-y-2">
|
||||
<p class="text-gray-600 text-base">
|
||||
Pulse Oximetry Assessment
|
||||
</p>
|
||||
<p class="text-gray-600 text-base">
|
||||
Spirometry Assessment
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cardio Metrics -->
|
||||
<div class="flex items-start bg-gray-200 rounded-lg p-6">
|
||||
<div class="bg-black text-white text-2xl font-bold w-16 h-16 flex items-center justify-center rounded-lg mr-8 flex-shrink-0">
|
||||
4
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h2 class="text-2xl font-semibold text-black mb-3">
|
||||
Cardio Metrics
|
||||
</h2>
|
||||
<div class="space-y-2">
|
||||
<p class="text-gray-600 text-base">
|
||||
Active Metabolic Rate Assessment
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center bg-gray-200 p-6">
|
||||
<div class="flex items-center justify-center w-20 h-20 bg-black text-white text-4xl font-semibold mr-6">
|
||||
4
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="text-4xl font-normal">Nutrition Guidelines</h1>
|
||||
<p class="text-lg">Ultrasound & Body Composition Assessment</p>
|
||||
<p class="text-lg">Resting Metabolic Rate Assessment</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fuel Utilization -->
|
||||
<div class="flex items-start bg-gray-200 rounded-lg p-6">
|
||||
<div class="bg-black text-white text-2xl font-bold w-16 h-16 flex items-center justify-center rounded-lg mr-8 flex-shrink-0">
|
||||
5
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h2 class="text-2xl font-semibold text-black mb-3">
|
||||
Fuel Utilization
|
||||
</h2>
|
||||
<div class="space-y-2">
|
||||
<!-- No sub-items -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Local Muscle Activity -->
|
||||
<div class="flex items-start bg-gray-200 rounded-lg p-6">
|
||||
<div class="bg-black text-white text-2xl font-bold w-16 h-16 flex items-center justify-center rounded-lg mr-8 flex-shrink-0">
|
||||
9
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h2 class="text-2xl font-semibold text-black mb-3">
|
||||
Local Muscle Activity
|
||||
</h2>
|
||||
<div class="space-y-2">
|
||||
<!-- No sub-items -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Training Recommendations -->
|
||||
<div class="flex items-start bg-gray-200 rounded-lg p-6">
|
||||
<div class="bg-black text-white text-2xl font-bold w-16 h-16 flex items-center justify-center rounded-lg mr-8 flex-shrink-0">
|
||||
10
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h2 class="text-2xl font-semibold text-black mb-3">
|
||||
Training Recommendations
|
||||
</h2>
|
||||
<div class="space-y-2">
|
||||
<!-- No sub-items -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Next Steps -->
|
||||
<div class="flex items-start bg-gray-200 rounded-lg p-6">
|
||||
<div class="bg-black text-white text-2xl font-bold w-16 h-16 flex items-center justify-center rounded-lg mr-8 flex-shrink-0">
|
||||
12
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h2 class="text-2xl font-semibold text-black mb-3">
|
||||
Next Steps
|
||||
</h2>
|
||||
<div class="space-y-2">
|
||||
<!-- No sub-items -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Glossary -->
|
||||
<div class="flex items-start bg-gray-200 rounded-lg p-6">
|
||||
<div class="bg-black text-white text-2xl font-bold w-16 h-16 flex items-center justify-center rounded-lg mr-8 flex-shrink-0">
|
||||
13
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h2 class="text-2xl font-semibold text-black mb-3">
|
||||
Glossary
|
||||
</h2>
|
||||
<div class="space-y-2">
|
||||
<!-- No sub-items -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Reference in New Issue
Block a user