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