Refactor page_7.html for improved layout and responsiveness
- Enhanced the structure of the Spirometry Assessment and Respiratory sections for better readability. - Centered images and added max-width constraints to ensure proper scaling on different devices. - Improved text formatting for clarity and consistency.
bolade
@@ -78,7 +78,7 @@ page_7_context = {
|
||||
"peak_vt_bpm": 198,
|
||||
"peak_vt_zone": 3,
|
||||
"fev1_percentage": 85,
|
||||
"lung_analysis_chart": "",
|
||||
"lung_analysis_chart": image_to_base64("/home/oluwasanmi/Documents/Work/MKD/report_generation/graphs/spirometry_chart.png"),
|
||||
"respiratory_analysis_chart": image_to_base64(
|
||||
"/home/oluwasanmi/Documents/Work/MKD/report_generation/graphs/respiratory.png"
|
||||
),
|
||||
|
||||
|
Before Width: | Height: | Size: 300 KiB After Width: | Height: | Size: 285 KiB |
|
Before Width: | Height: | Size: 291 KiB After Width: | Height: | Size: 262 KiB |
|
Before Width: | Height: | Size: 420 KiB After Width: | Height: | Size: 399 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 193 KiB |
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 113 KiB |
|
Before Width: | Height: | Size: 256 KiB After Width: | Height: | Size: 238 KiB |
|
Before Width: | Height: | Size: 314 KiB After Width: | Height: | Size: 292 KiB |
@@ -1,38 +1,56 @@
|
||||
<div class="w-full page bg-white p-8">
|
||||
<!-- Header -->
|
||||
<h1 class="text-3xl font-bold mb-6">Lung Analysis</h1>
|
||||
<!-- Header -->
|
||||
<h1 class="text-3xl font-bold mb-6">Lung Analysis</h1>
|
||||
|
||||
<!-- Spirometry Assessment Section -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-semibold mb-4">Spirometry Assessment</h2>
|
||||
<p class="text-sm text-gray-700 mb-6">
|
||||
Spirometry is a diagnostic device that assesses how well a person breathes and how their lungs are functioning. Lung function
|
||||
is crucial for oxygen delivery during physical activity. Comparing results to expected/normal values can highlight potential limitations
|
||||
that would require additional lung training to improve overall physical activity.
|
||||
</p>
|
||||
<!-- Spirometry Assessment Section -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-semibold mb-4">Spirometry Assessment</h2>
|
||||
<p class="text-sm text-gray-700 mb-6">
|
||||
Spirometry is a diagnostic device that assesses how well a person
|
||||
breathes and how their lungs are functioning. Lung function is
|
||||
crucial for oxygen delivery during physical activity. Comparing
|
||||
results to expected/normal values can highlight potential
|
||||
limitations that would require additional lung training to improve
|
||||
overall physical activity.
|
||||
</p>
|
||||
|
||||
<!-- Lung Volume Chart -->
|
||||
<img src="data:image/png;base64,{{ lung_analysis_chart }}" alt="Lung Volume Analysis Chart" class="w-full">
|
||||
<!-- Lung Volume Chart -->
|
||||
<div class="flex justify-center">
|
||||
<img
|
||||
src="data:image/png;base64,{{ lung_analysis_chart }}"
|
||||
alt="Lung Volume Analysis Chart"
|
||||
class="w-full max-w-4xl h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Indications Box -->
|
||||
<div class="bg-gray-200 rounded-lg p-4 text-center mb-8">
|
||||
<h3 class="font-semibold text-lg mb-2">Indications</h3>
|
||||
<p class="text-gray-700">{{ indication }}</p>
|
||||
<!-- Indications Box -->
|
||||
<div class="bg-gray-200 rounded-lg p-4 text-center mb-8">
|
||||
<h3 class="font-semibold text-lg mb-2">Indications</h3>
|
||||
<p class="text-gray-700">{{ indication }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Respiratory Section -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-semibold mb-4 text-center">Respiratory</h2>
|
||||
<!-- Respiratory Section -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-semibold mb-4 text-center">Respiratory</h2>
|
||||
|
||||
<!-- Respiratory Chart -->
|
||||
<img src="data:image/png;base64,{{ respiratory_analysis_chart }}" alt="Respiratory Analysis Chart" class="w-full mb-4">
|
||||
<!-- Respiratory Chart -->
|
||||
<div class="flex justify-center mb-6">
|
||||
<img
|
||||
src="data:image/png;base64,{{ respiratory_analysis_chart }}"
|
||||
alt="Respiratory Analysis Chart"
|
||||
class="w-full mb-4 object-contain max-w-4xl h-auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Peak VT Info Box -->
|
||||
<div class="bg-gray-200 rounded-lg p-4 text-center">
|
||||
<h3 class="font-semibold mb-2">Peak VT</h3>
|
||||
<p class="text-sm">{{ peak_vt }} L/Breath which occurs at {{ peak_vt_bpm }} bpm (Zone {{ peak_vt_zone }})</p>
|
||||
<p class="text-sm">{{ fev1_percentage }}% of FEV1</p>
|
||||
<!-- Peak VT Info Box -->
|
||||
<div class="bg-gray-200 rounded-lg p-4 text-center">
|
||||
<h3 class="font-semibold mb-2">Peak VT</h3>
|
||||
<p class="text-sm">
|
||||
{{ peak_vt }} L/Breath which occurs at {{ peak_vt_bpm }} bpm
|
||||
(Zone {{ peak_vt_zone }})
|
||||
</p>
|
||||
<p class="text-sm">{{ fev1_percentage }}% of FEV1</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||