Refactor code structure for improved readability and maintainability

context.py

@@ -27,10 +27,10 @@ page_3_context = {
 
 page_4_context = {
     "body_composition_chart": image_to_base64(
-        "/home/oluwasanmi/Documents/Work/MKD/report_generation/graphs/page_1_body_composition.png"
+        "/home/oluwasanmi/Documents/Work/MKD/report_generation/graphs/body_composition_chart.png"
     ),
     "body_fat_chart": image_to_base64(
-        "/home/oluwasanmi/Documents/Work/MKD/report_generation/graphs/page_1_body_fat.png"
+        "/home/oluwasanmi/Documents/Work/MKD/report_generation/graphs/body_fat_percent_chart.png"
     ),
 }
 

main.py

@@ -86,8 +86,7 @@ html_doc = f"""
     }}
     /* Prevent images from being too large */
     img {{
-      max-height: 200px;
-      object-fit: contain;
+      max-height: 300px;
     }}
     /* Larger images for specific charts */
     .chart-large {{

report_gen/page_4.html

@@ -13,19 +13,15 @@
       <h3 class="text-2xl font-bold text-center text-black mb-6">Body Composition</h3>
       
       <!-- Body Composition Chart -->
-      <div class="flex justify-center mb-8">
-        <div class="relative">
+      <div class="flex justify-center mb-16 w-full">
           <img src="data:image/png;base64, {{ body_composition_chart}}" 
                alt="Body Composition Chart" 
-               class="w-80 h-80 object-contain">
-          
-          <!-- Chart Labels -->
-        </div>
+               class=" object-contain ">
       </div>
 
       <!-- Body Fat Percentage Section -->
       <div class="mb-8">   
-        
+        <h3 class="text-2xl font-bold text-center text-black mb-6">Body Fat Percentage - {{ fat_percentage }}%</h3>
         <!-- Body Fat Chart -->
         <div class="flex justify-center">
           <img src="data:image/png;base64, {{ body_fat_chart }}" 

report_gen/page_7.html

@@ -12,7 +12,7 @@
     </p>
     
     <!-- Lung Volume Chart -->
-    <img src="data:image/png;base64,{{ lung_analysis_chart }}" alt="Lung Volume Analysis Chart" class="w-full mb-6">
+    <img src="data:image/png;base64,{{ lung_analysis_chart }}" alt="Lung Volume Analysis Chart" class="w-full">
     
     <!-- Indications Box -->
     <div class="bg-gray-200 rounded-lg p-4 text-center mb-8">