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

Add initial HTML structure for report generation

Browse Source 
- Created page_1.html with layout including ISHP branding, main content, and dotted pattern.
- Developed page_2.html featuring a Table of Contents with sections for Lung Analysis, Cardio Metrics, Fuel Utilization, Local Muscle Activity, Training Recommendations, Next Steps, and Glossary.
- Added placeholder files for pages 3 to 19 to facilitate future content development.
This commit is contained in:
bolade
2025-09-24 08:35:29 +01:00
parent 804b3fb10e
commit 4753276778
24 changed files with 1784 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
report_gen/page_1.html
+104
View File
@@ -0,0 +1,104 @@
<div
class="w-full page bg-black text-white relative overflow-hidden"
style="height: 297mm"
>
<!-- ISHP Logo/Text -->
<div class="absolute top-8 left-8 z-20">
<h1 class="text-2xl font-bold tracking-wider">ISHP</h1>
</div>
<!-- Diagonal Cyan Stripe -->
<div class="absolute top-0 left-0 w-full h-full">
<div
class="absolute top-0 left-0 w-96 h-full bg-gradient-to-r from-cyan-300 to-cyan-400 transform -skew-x-12 origin-top-left"
></div>
</div>
<!-- Main Content Container -->
<div
class="relative z-10 flex flex-col justify-center items-end h-full pr-16"
>
<!-- BIO-PERFORMX Section -->
<div class="text-right mb-8">
<h1 class="text-6xl font-bold tracking-wider mb-2">BIO-PERFORMX</h1>
<p class="text-3xl italic font-light">Endurance</p>
</div>
<!-- Name and Date Section -->
<div class="text-right mt-16">
<h2 class="text-4xl font-bold tracking-wider mb-2">
{{ name|upper }}
</h2>
<h2 class="text-4xl font-bold tracking-wider mb-6">
{{ surname|upper }}
</h2>
<p class="text-xl italic underline">{{ date }}</p>
</div>
</div>
<!-- Dotted Pattern at Bottom -->
<div class="absolute bottom-0 left-0 w-full h-32 z-10">
<div class="grid grid-cols-20 gap-2 h-full items-end pb-8 pl-8">
<!-- First row of dots -->
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
</div>
<div class="grid grid-cols-20 gap-2 h-full items-end pb-4 pl-8">
<!-- Second row of dots -->
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
</div>
<div class="grid grid-cols-20 gap-2 h-full items-end pl-8">
<!-- Third row of dots -->
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
<div class="w-2 h-2 bg-white rounded-full"></div>
</div>
</div>
</div>
<style>
.grid-cols-20 {
grid-template-columns: repeat(20, minmax(0, 1fr));
}
</style>
report_gen/page_10.html
View File
report_gen/page_11.html
View File
report_gen/page_12.html
View File
report_gen/page_13.html
View File
report_gen/page_14.html
View File
report_gen/page_15.html
View File
report_gen/page_16.html
View File
report_gen/page_17.html
View File
report_gen/page_18.html
View File
report_gen/page_19.html
View File
report_gen/page_2.html
+121
View File
@@ -0,0 +1,121 @@
<div class="bg-white w-full page m-0 p-0" style="height: 297mm">
<div class="px-16 py-20">
<!-- Table of Contents Header -->
<div class="mb-12">
<h1 class="text-4xl font-bold text-black mb-4 tracking-wide">
TABLE OF CONTENTS
</h1>
<div class="w-full h-1 bg-cyan-400"></div>
</div>
<!-- Table of Contents Items -->
<div class="space-y-6">
<!-- Lung Analysis -->
<div class="flex items-start bg-gray-200 rounded-lg">
<div
class="bg-black text-white text-2xl font-bold w-16 h-16 flex items-center justify-center rounded-lg mr-6"
>
3
</div>
<div class="flex-1 py-3">
<h2 class="text-2xl font-semibold text-black mb-1">
Lung Analysis
</h2>
<div class="space-y-1">
<p class="text-gray-600 text-sm">
Pulse Oximetry Assessment
</p>
<p class="text-gray-600 text-sm">
Spirometry Assessment
</p>
</div>
</div>
</div>
<!-- Cardio Metrics -->
<div class="flex items-start bg-gray-200 rounded-lg">
<div
class="bg-black text-white text-2xl font-bold w-16 h-16 flex items-center justify-center rounded-lg mr-6"
>
4
</div>
<div class="flex-1 py-3">
<h2 class="text-2xl font-semibold text-black mb-1">
Cardio Metrics
</h2>
<p class="text-gray-600 text-sm">
Active Metabolic Rate Assessment
</p>
</div>
</div>
<!-- Fuel Utilization -->
<div class="flex items-start bg-gray-200 rounded-lg">
<div
class="bg-black text-white text-2xl font-bold w-16 h-16 flex items-center justify-center rounded-lg mr-6"
>
5
</div>
<div class="flex-1 py-3">
<h2 class="text-2xl font-semibold text-black">
Fuel Utilization
</h2>
</div>
</div>
<!-- Local Muscle Activity -->
<div class="flex items-start bg-gray-200 rounded-lg">
<div
class="bg-black text-white text-2xl font-bold w-16 h-16 flex items-center justify-center rounded-lg mr-6"
>
9
</div>
<div class="flex-1 py-3">
<h2 class="text-2xl font-semibold text-black">
Local Muscle Activity
</h2>
</div>
</div>
<!-- Training Recommendations -->
<div class="flex items-start bg-gray-200 rounded-lg">
<div
class="bg-black text-white text-2xl font-bold w-16 h-16 flex items-center justify-center rounded-lg mr-6"
>
10
</div>
<div class="flex-1 py-3">
<h2 class="text-2xl font-semibold text-black">
Training Recommendations
</h2>
</div>
</div>
<!-- Next Steps -->
<div class="flex items-start bg-gray-200 rounded-lg">
<div
class="bg-black text-white text-2xl font-bold w-16 h-16 flex items-center justify-center rounded-lg mr-6"
>
12
</div>
<div class="flex-1 py-3">
<h2 class="text-2xl font-semibold text-black">
Next Steps
</h2>
</div>
</div>
<!-- Glossary -->
<div class="flex items-start bg-gray-200 rounded-lg">
<div
class="bg-black text-white text-2xl font-bold w-16 h-16 flex items-center justify-center rounded-lg mr-6"
>
13
</div>
<div class="flex-1 py-3">
<h2 class="text-2xl font-semibold text-black">Glossary</h2>
</div>
</div>
</div>
</div>
</div>
report_gen/page_3.html
View File
report_gen/page_4.html
View File
report_gen/page_5.html
View File
report_gen/page_6.html
View File
report_gen/page_7.html
View File
report_gen/page_8.html
View File
report_gen/page_9.html
View File