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
+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>
|
||||
|
||||
Reference in New Issue
Block a user