bio-performx/app/report_gen/page_3.html

<div class="w-full page bg-white">
  <!-- Main Content -->
  <div class="px-6 py-4">
    <!-- Page Title -->
    <h1 class="text-3xl font-bold text-black mb-6">Overview</h1>
    
    <!-- Top Row: Metabolic and Respiratory -->
    <div class="grid grid-cols-2 gap-6 mb-6">
      <!-- Metabolic Section -->
      <div class="border border-gray-300 rounded-lg p-3">
        <div class="flex items-center mb-3">
          <div class="w-6 h-6 bg-gray-400 rounded-full mr-2"></div>
          <h2 class="text-lg font-bold">Metabolic</h2>
        </div>
        
        <table class="w-full text-xs border-collapse">
          <tr>
            <th class="bg-gray-200 p-2 border text-left font-semibold">Resting Metabolic Rate</th>
            <th class="bg-gray-200 p-2 border text-left font-semibold">Active Metabolic Rate</th>
          </tr>
          <tr>
            <td class="bg-red-200 p-2 border">Fat/Carbohydrate Ratio</td>
            <td class="bg-red-200 p-2 border">Metabolic Efficiency Low Intensity</td>
          </tr>
          <tr>
            <td class="bg-gray-200 p-2 border">Metabolism</td>
            <td class="bg-yellow-200 p-2 border">Metabolic Efficiency High Intensity</td>
          </tr>
          <tr>
            <td class="bg-yellow-200 p-2 border">Breathing Frequency</td>
            <td class="bg-white p-2 border"></td>
          </tr>
          <tr>
            <td class="bg-red-200 p-2 border">Breath Volume</td>
            <td class="bg-white p-2 border"></td>
          </tr>
          <tr>
            <td class="bg-green-200 p-2 border">Heart Rate</td>
            <td class="bg-white p-2 border"></td>
          </tr>
        </table>
      </div>

      <!-- Respiratory Section -->
      <div class="border border-gray-300 rounded-lg p-3">
        <div class="flex items-center mb-3">
          <div class="w-6 h-6 bg-gray-400 rounded-full mr-2"></div>
          <h2 class="text-lg font-bold">Respiratory</h2>
        </div>
        
        <table class="w-full text-xs border-collapse">
          <tr>
            <th class="bg-gray-200 p-2 border text-left font-semibold">Lung Function</th>
          </tr>
          <tr>
            <td class="bg-green-200 p-2 border">Lung Capacity</td>
          </tr>
          <tr>
            <td class="bg-green-200 p-2 border">Lung Capability</td>
          </tr>
          <tr>
            <td class="bg-red-200 p-2 border">Breathing Frequency Zones</td>
          </tr>
        </table>
      </div>
    </div>

    <!-- Middle Row: Cardiovascular and Strength -->
    <div class="grid grid-cols-2 gap-6 mb-6">
      <!-- Cardiovascular Section -->
      <div class="border border-gray-300 rounded-lg p-3">
        <div class="flex items-center mb-3">
          <div class="w-6 h-6 bg-gray-400 rounded-full mr-2"></div>
          <h2 class="text-lg font-bold">Cardiovascular</h2>
        </div>
        
        <table class="w-full text-xs border-collapse">
          <tr>
            <th class="bg-gray-200 p-2 border text-left font-semibold">Active Metabolic Rate</th>
          </tr>
          <tr>
            <td class="bg-green-200 p-2 border">Aerobic Health (VO2 Max)</td>
          </tr>
          <tr>
            <td class="bg-red-200 p-2 border">Training Zones</td>
          </tr>
          <tr>
            <td class="bg-red-200 p-2 border">Metabolic Efficiency (VO2 Pulse)</td>
          </tr>
        </table>
      </div>

      <!-- Strength Section -->
      <div class="border border-gray-300 rounded-lg p-3">
        <div class="flex items-center mb-3">
          <div class="w-6 h-6 bg-gray-400 rounded-full mr-2"></div>
          <h2 class="text-lg font-bold">Strength</h2>
        </div>
        
        <table class="w-full text-xs border-collapse">
          <tr>
            <th class="bg-gray-200 p-2 border text-left font-semibold">Strength - High Intensity</th>
          </tr>
          <tr>
            <td class="bg-green-200 p-2 border">CO2/O2 (RER)</td>
          </tr>
          <tr>
            <td class="bg-green-200 p-2 border">Heart Rate</td>
          </tr>
          <tr>
            <td class="bg-green-200 p-2 border">Breath Frequency</td>
          </tr>
          <tr>
            <td class="bg-yellow-200 p-2 border">Muscle Efficiency</td>
          </tr>
        </table>
      </div>
    </div>

    <!-- Bottom Row: Recovery -->
    <div class="grid grid-cols-2 gap-6">
      <!-- Recovery Section -->
      <div class="border border-gray-300 rounded-lg p-3">
        <div class="flex items-center mb-3">
          <div class="w-6 h-6 bg-gray-400 rounded-full mr-2"></div>
          <h2 class="text-lg font-bold">Recovery</h2>
        </div>
        
        <table class="w-full text-xs border-collapse">
          <tr>
            <th class="bg-gray-200 p-2 border text-left font-semibold">Active Metabolic Rate</th>
          </tr>
          <tr>
            <td class="bg-green-200 p-2 border">
              <div class="flex justify-between items-center">
                <span>Heart Rate</span>
                <span class="bg-green-600 text-white px-2 py-1 rounded font-bold text-xs">44</span>
              </div>
            </td>
          </tr>
          <tr>
            <td class="bg-green-200 p-2 border">Metabolic (CO2)</td>
          </tr>
          <tr>
            <td class="bg-gray-200 p-2 border">Muscle Oxygen</td>
          </tr>
          <tr>
            <td class="bg-red-200 p-2 border">Breath Frequency</td>
          </tr>
        </table>
      </div>

      <!-- Empty space for balance -->
      <div></div>
    </div>
  </div>
</div>