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.

context.py

@@ -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"
     ),

report_gen/page_7.html

@@ -1,38 +1,56 @@
 <div class="w-full page bg-white p-8">
-  <!-- Header -->
+    <!-- Header -->
-  <h1 class="text-3xl font-bold mb-6">Lung Analysis</h1>
+    <h1 class="text-3xl font-bold mb-6">Lung Analysis</h1>
-  
+
-  <!-- Spirometry Assessment Section -->
+    <!-- Spirometry Assessment Section -->
-  <div class="mb-8">
+    <div class="mb-8">
-    <h2 class="text-xl font-semibold mb-4">Spirometry Assessment</h2>
+        <h2 class="text-xl font-semibold mb-4">Spirometry Assessment</h2>
-    <p class="text-sm text-gray-700 mb-6">
+        <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 
+            Spirometry is a diagnostic device that assesses how well a person
-      is crucial for oxygen delivery during physical activity. Comparing results to expected/normal values can highlight potential limitations 
+            breathes and how their lungs are functioning. Lung function is
-      that would require additional lung training to improve overall physical activity.
+            crucial for oxygen delivery during physical activity. Comparing
-    </p>
+            results to expected/normal values can highlight potential
-    
+            limitations that would require additional lung training to improve
-    <!-- Lung Volume Chart -->
+            overall physical activity.
-    <img src="data:image/png;base64,{{ lung_analysis_chart }}" alt="Lung Volume Analysis Chart" class="w-full">
+        </p>
-    
+
-    <!-- Indications Box -->
+        <!-- Lung Volume Chart -->
-    <div class="bg-gray-200 rounded-lg p-4 text-center mb-8">
+        <div class="flex justify-center">
-      <h3 class="font-semibold text-lg mb-2">Indications</h3>
+            <img
-        <p class="text-gray-700">{{ indication }}</p>
+                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>
+        </div>
     </div>
-  </div>
+
-  
+    <!-- Respiratory Section -->
-  <!-- Respiratory Section -->
+    <div class="mb-8">
-  <div class="mb-8">
+        <h2 class="text-xl font-semibold mb-4 text-center">Respiratory</h2>
-    <h2 class="text-xl font-semibold mb-4 text-center">Respiratory</h2>
+
-    
+        <!-- Respiratory Chart -->
-    <!-- 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">
+            <img
-    
+                src="data:image/png;base64,{{ respiratory_analysis_chart }}"
-    <!-- Peak VT Info Box -->
+                alt="Respiratory Analysis Chart"
-    <div class="bg-gray-200 rounded-lg p-4 text-center">
+                class="w-full mb-4 object-contain max-w-4xl h-auto"
-      <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>
+        </div>
-      <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>