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