bolade/bio-performx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add header and footer templates for report generation

Browse Source 
- 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
2025-09-26 21:42:02 +01:00
parent 1ae1ec2369
commit 894fbbcee3
40 changed files with 805 additions and 1838 deletions
Download Patch File Download Diff File Expand all files Collapse all files
report_gen/page_18.html
+7 -207
View File
@@ -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>