Add initial HTML structure for report generation
- 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
+116
-27
@@ -1,39 +1,128 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Lung Report</title>
|
||||
<!-- TailwindCSS via CDN -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="p-10 font-sans">
|
||||
<div class="bg-black text-white p-4 rounded-lg mb-6">
|
||||
<h1 class="text-2xl font-bold">Lung Analysis Report</h1>
|
||||
</div>
|
||||
<body class="p-8">
|
||||
<div class="relative w-full h-screen bg-white overflow-hidden">
|
||||
<!-- Background Design -->
|
||||
<div class="absolute inset-0">
|
||||
<!-- Left side - White section with ISHP logo -->
|
||||
<div
|
||||
class="absolute left-0 top-0 w-1/3 h-full bg-white flex items-start justify-start p-8"
|
||||
>
|
||||
<div class="text-black font-bold text-4xl tracking-wider">ISHP</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 mb-6">
|
||||
<div><b>Name:</b> {{ patient.name }}</div>
|
||||
<div><b>Age:</b> {{ patient.age }}</div>
|
||||
<div><b>Height:</b> {{ patient.height }} cm</div>
|
||||
<div><b>Weight:</b> {{ patient.weight }} kg</div>
|
||||
</div>
|
||||
<!-- Diagonal cyan divider -->
|
||||
<div class="absolute left-0 top-0 w-full h-full">
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
class="w-full h-full"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<polygon points="0,0 35,0 25,100 0,100" fill="#22d3ee" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<h2 class="text-xl font-semibold mb-2">Lung Function</h2>
|
||||
<div class="w-full h-6 bg-gradient-to-r from-red-500 via-yellow-300 to-green-400 relative">
|
||||
<div class="absolute top-[-5px] left-1/2 transform -translate-x-1/2
|
||||
w-0 h-0 border-l-[7px] border-r-[7px] border-b-[10px] border-black"></div>
|
||||
<!-- Right side - Black section -->
|
||||
<div class="absolute right-0 top-0 w-2/3 h-full bg-black">
|
||||
<!-- Dotted pattern at bottom -->
|
||||
<div
|
||||
class="absolute bottom-0 left-0 w-full h-32 flex items-end justify-start pl-8 pb-8"
|
||||
>
|
||||
<div class="grid grid-cols-16 gap-2">
|
||||
<!-- Creating dotted pattern -->
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional rows of dots -->
|
||||
<div
|
||||
class="absolute bottom-16 left-0 w-full h-8 flex items-center justify-start pl-8"
|
||||
>
|
||||
<div class="grid grid-cols-16 gap-2">
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute bottom-32 left-0 w-full h-8 flex items-center justify-start pl-8"
|
||||
>
|
||||
<div class="grid grid-cols-16 gap-2">
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
<div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-100 p-4 rounded-lg mb-6">
|
||||
<b>Indications:</b> {{ indications }}
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div
|
||||
class="relative z-10 h-full flex flex-col items-center justify-center text-white"
|
||||
>
|
||||
<!-- Main Title -->
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-6xl font-bold tracking-wider mb-4">BIO-PERFORMX</h1>
|
||||
<p class="text-2xl font-light italic">Endurance</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold mb-2">Respiratory Chart</h2>
|
||||
<img src="{{ chart_path }}" class="border rounded-lg shadow">
|
||||
</div>
|
||||
<!-- Patient Name -->
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-4xl font-bold tracking-widest">John Doe</h2>
|
||||
<h2 class="text-4xl font-bold tracking-widest">Moran</h2>
|
||||
</div>
|
||||
|
||||
<!-- Date -->
|
||||
<div class="text-center">
|
||||
<p class="text-xl font-light italic underline">July 29, 2025</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user