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>