Add requirements.txt, tailwind configuration, and initial truth report HTML

- Created requirements.txt with a comprehensive list of dependencies.
- Added tailwindconfig.js for Tailwind CSS configuration.
- Introduced truth_report.html with structured content and Tailwind CSS styling for a visually appealing layout.

report_gen/page_1.html

@@ -36,64 +36,6 @@
     </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>

report_gen/page_2.html

@@ -1,62 +1,62 @@
-<div class="bg-white w-full page m-0 p-0">
-    <div class="px-16 py-20">
+<div class="bg-white w-full page m-0 px-10">
+    <div class="px-16 py-10">
         <!-- Table of Contents Header -->
-        <div class="mb-12">
-            <h1 class="text-4xl font-bold text-black mb-4 tracking-wide">
+        <div class="mb-8">
+            <h1
+                class="text-5xl font-bold text-black mb-6 tracking-wide border-b-4 border-blue-500 pb-2 text-center"
+            >
                 TABLE OF CONTENTS
             </h1>
             <div class="w-full h-1 bg-cyan-400"></div>
         </div>
 
         <!-- Table of Contents Items -->
-        <div class="space-y-6">
+        <div class="flex flex-col justify-between space-y-6 py-6">
             <!-- Lung Analysis -->
-            <div class="flex items-start bg-gray-200 rounded-lg">
+            <div class="flex items-start bg-gray-200 h-24">
                 <div
-                    class="bg-black text-white text-2xl font-bold w-16 h-16 flex items-center justify-center rounded-lg mr-6"
+                    class="bg-black text-white text-2xl font-bold w-16 h-full flex items-center justify-center mr-8 flex-shrink-0"
                 >
                     3
                 </div>
-                <div class="flex-1 py-3">
-                    <h2 class="text-2xl font-semibold text-black mb-1">
+                <div class="flex flex-col flex-1 py-1 justify-center h-full">
+                    <h2 class="text-2xl font-semibold text-black">
                         Lung Analysis
                     </h2>
-                    <div class="space-y-1">
-                        <p class="text-gray-600 text-sm">
-                            Pulse Oximetry Assessment
-                        </p>
-                        <p class="text-gray-600 text-sm">
-                            Spirometry Assessment
-                        </p>
-                    </div>
+                    <p class="text-gray-600 text-base">
+                        Pulse Oximetry Assessment
+                    </p>
+                    <p class="text-gray-600 text-base">
+                        Spirometry Assessment
+                    </p>
                 </div>
             </div>
 
             <!-- Cardio Metrics -->
-            <div class="flex items-start bg-gray-200 rounded-lg">
+            <div class="flex items-start bg-gray-200 h-24">
                 <div
-                    class="bg-black text-white text-2xl font-bold w-16 h-16 flex items-center justify-center rounded-lg mr-6"
+                    class="bg-black text-white text-2xl font-bold w-16 h-full flex items-center justify-center mr-8 flex-shrink-0"
                 >
                     4
                 </div>
-                <div class="flex-1 py-3">
-                    <h2 class="text-2xl font-semibold text-black mb-1">
+                <div class="flex flex-col py-1  flex-1 justify-center h-full">
+                    <h2 class="text-2xl font-semibold text-black mb-3">
                         Cardio Metrics
                     </h2>
-                    <p class="text-gray-600 text-sm">
+                    <p class="text-gray-600 text-base">
                         Active Metabolic Rate Assessment
                     </p>
                 </div>
             </div>
 
             <!-- Fuel Utilization -->
-            <div class="flex items-start bg-gray-200 rounded-lg">
+            <div class="flex items-start bg-gray-200 h-24">
                 <div
-                    class="bg-black text-white text-2xl font-bold w-16 h-16 flex items-center justify-center rounded-lg mr-6"
+                    class="bg-black text-white text-2xl font-bold w-16 h-full flex items-center justify-center mr-8 flex-shrink-0"
                 >
                     5
                 </div>
-                <div class="flex-1 py-3">
+                <div class="flex flex-col py-1 flex-1 justify-center flex-1 h-full">
                     <h2 class="text-2xl font-semibold text-black">
                         Fuel Utilization
                     </h2>
@@ -64,13 +64,13 @@
             </div>
 
             <!-- Local Muscle Activity -->
-            <div class="flex items-start bg-gray-200 rounded-lg">
+            <div class="flex items-start bg-gray-200 h-24">
                 <div
-                    class="bg-black text-white text-2xl font-bold w-16 h-16 flex items-center justify-center rounded-lg mr-6"
+                    class="bg-black text-white text-2xl font-bold w-16 h-full flex items-center justify-center mr-8 flex-shrink-0"
                 >
                     9
                 </div>
-                <div class="flex-1 py-3">
+                <div class="flex flex-col justify-center h-full flex-1">
                     <h2 class="text-2xl font-semibold text-black">
                         Local Muscle Activity
                     </h2>
@@ -78,13 +78,13 @@
             </div>
 
             <!-- Training Recommendations -->
-            <div class="flex items-start bg-gray-200 rounded-lg">
+            <div class="flex items-start bg-gray-200 h-24">
                 <div
-                    class="bg-black text-white text-2xl font-bold w-16 h-16 flex items-center justify-center rounded-lg mr-6"
+                    class="bg-black text-white text-2xl font-bold w-16 h-full flex items-center justify-center mr-8 flex-shrink-0"
                 >
                     10
                 </div>
-                <div class="flex-1 py-3">
+                <div class="flex flex-col h-full justify-center flex-1">
                     <h2 class="text-2xl font-semibold text-black">
                         Training Recommendations
                     </h2>
@@ -92,28 +92,36 @@
             </div>
 
             <!-- Next Steps -->
-            <div class="flex items-start bg-gray-200 rounded-lg">
+            <div class="flex items-start bg-gray-200 h-24">
                 <div
-                    class="bg-black text-white text-2xl font-bold w-16 h-16 flex items-center justify-center rounded-lg mr-6"
+                    class="bg-black text-white text-2xl font-bold w-16 h-full flex items-center justify-center mr-8 flex-shrink-0"
                 >
                     12
                 </div>
-                <div class="flex-1 py-3">
+                <div class="flex flex-col h-full justify-center flex-1">
                     <h2 class="text-2xl font-semibold text-black">
                         Next Steps
                     </h2>
+                    <div class="space-y-2">
+                        <!-- No sub-items -->
+                    </div>
                 </div>
             </div>
 
             <!-- Glossary -->
-            <div class="flex items-start bg-gray-200 rounded-lg">
+            <div class="flex items-start bg-gray-200 h-24">
                 <div
-                    class="bg-black text-white text-2xl font-bold w-16 h-16 flex items-center justify-center rounded-lg mr-6"
+                    class="bg-black text-white text-2xl font-bold w-16 h-full flex items-center justify-center mr-8 flex-shrink-0"
                 >
                     13
                 </div>
-                <div class="flex-1 py-3">
-                    <h2 class="text-2xl font-semibold text-black">Glossary</h2>
+                <div class="flex flex-col h-full justify-center flex-1">
+                    <h2 class="text-2xl font-semibold text-black">
+                        Glossary
+                    </h2>
+                    <div class="space-y-2">
+                        <!-- No sub-items -->
+                    </div>
                 </div>
             </div>
         </div>

report_gen/page_3.html

@@ -30,43 +30,27 @@
       <!-- Body Composition Chart -->
       <div class="flex justify-center mb-8">
         <div class="relative">
-          <img src="{{ body_composition_chart}}" 
+          <img src="data:image/png;base64, {{ body_composition_chart}}" 
                alt="Body Composition Chart" 
                class="w-80 h-80 object-contain">
           
           <!-- Chart Labels -->
-          <div class="absolute top-4 left-1/2 transform -translate-x-1/2 text-center">
-            <div class="text-lg font-semibold text-gray-700">Fat Mass ({{ fat_mass | default('27.6lbs') }})</div>
-            <div class="text-lg font-semibold text-gray-700">{{ fat_percentage | default('22.4%') }}</div>
-          </div>
-          
-          <div class="absolute bottom-4 right-8 text-center">
-            <div class="text-lg font-semibold text-gray-700">Lean Mass ({{ lean_mass | default('95.4lbs') }})</div>
-            <div class="text-lg font-semibold text-gray-700">{{ lean_percentage | default('77.6%') }}</div>
-          </div>
         </div>
       </div>
 
       <!-- Body Fat Percentage Section -->
       <div class="mb-8">
-        <h4 class="text-xl font-bold text-center text-black mb-4">Body Fat Percent - {{ body_fat_percent | default('22.4%') }}</h4>
         
         <!-- Body Fat Chart -->
         <div class="flex justify-center">
-          <img src="{{ body_fat_chart}}" 
-               alt="Body Fat Percentage Chart" 
-               class="w-full max-w-2xl h-32 object-contain">
+          <img src="data:image/png;base64, {{ body_fat_chart }}" 
+               alt="Body Fat Percentage Chart" >
         </div>
         
         <!-- Age Range Label -->
-        <div class="flex justify-start mt-2 ml-8">
-          <span class="text-sm font-semibold text-gray-700">{{ age_range | default('20-39') }}</span>
-          <span class="text-sm text-gray-700 ml-1">({{ gender | default('F') }})</span>
-        </div>
       </div>
     </div>
   </div>
-
   <!-- Footer Section -->
   <div class="absolute bottom-0 left-0 right-0 bg-black text-white px-6 py-3">
     <div class="flex justify-between items-center text-sm">

report_gen/page_7.html

@@ -150,7 +150,7 @@
       
       <!-- Respiratory Graph -->
       <div class="flex justify-center mb-4">
-        <img src="{{ respiratory_graph }}" 
+        <img src="data:image/png;base64, {{ respiratory_graph }}" 
              alt="Respiratory Analysis Chart" 
              class="w-full max-w-4xl h-64 object-contain">
       </div>