bio-performx/report_gen/page_5.html

<div class="w-full page bg-white" style="height: 297mm;"></div>
  <!-- Header Section -->
  <div class="bg-black text-white px-6 py-4 flex items-center justify-between">
    <div class="flex items-center">
      <div class="text-lg font-bold mr-2">ISHP</div>
      <div class="w-6 h-4 bg-cyan-400 mr-8"></div>
    </div>
    <div class="flex space-x-8 text-sm">
      <span>Name: {{ patient_name | default('Keirstyn Moran') }}</span>
      <span>Age: {{ age | default('34') }}</span>
      <span>Height: {{ height | default('5\'4"') }}</span>
      <span>Weight: {{ weight | default('123lbs') }}</span>
      <span>Focus: {{ focus | default('Endurance') }}</span>
    </div>
  </div>

  <!-- Main Content -->
  <div class="px-8 py-6">
    <!-- Page Title -->
    <h1 class="text-3xl font-bold text-black mb-6">Nutrition Guidelines</h1>
    
    <!-- Section Title -->
    <h2 class="text-xl font-bold text-black mb-4">Resting Metabolic Rate Assessment</h2>
    <p class="text-gray-700 text-sm mb-8">The resting metabolic rate assessment determines the number of calories that you burn at rest, and metabolic health. It is also an indicator of overall health and well-being.</p>

    <!-- Slow vs Fast Metabolism Section -->
    <div class="mb-12">
      <div class="text-center mb-6">
        <h3 class="text-2xl font-bold text-black mb-6">Slow vs Fast Metabolism</h3>
        
        <!-- Metabolism Scale -->
        <div class="relative mx-auto max-w-2xl">
          <!-- Scale background -->
          <div class="bg-gray-200 h-12 rounded-lg relative">
            <!-- Green indicator at slow position -->
            <div class="absolute left-16 top-0 h-12 w-32 bg-green-200 rounded-lg flex items-center justify-center">
              <span class="text-black font-bold">{{ resting_calories | default('1386kCals') }}</span>
            </div>
            <!-- Marker dot -->
            <div class="absolute left-20 -top-2 w-4 h-4 bg-black rounded-full"></div>
          </div>
          
          <!-- Scale labels -->
          <div class="flex justify-between mt-4 text-sm font-semibold">
            <span>Very Slow</span>
            <span>Slow</span>
            <span>Average</span>
            <span>Fast</span>
            <span>Very Fast</span>
          </div>
          
          <!-- Scale dots -->
          <div class="flex justify-between mt-2">
            <div class="w-2 h-2 bg-black rounded-full"></div>
            <div class="w-2 h-2 bg-black rounded-full"></div>
            <div class="w-2 h-2 bg-black rounded-full"></div>
            <div class="w-2 h-2 bg-black rounded-full"></div>
            <div class="w-2 h-2 bg-black rounded-full"></div>
          </div>
        </div>
      </div>

      <!-- Fuel Source Section -->
      <div class="mb-12">
        <h3 class="text-2xl font-bold text-black mb-6 text-center">Fuel Source</h3>
        
        <!-- Fuel Source Bar -->
        <div class="relative mx-auto max-w-2xl">
          <div class="flex h-16 rounded-lg overflow-hidden">
            <!-- Fats section (33%) -->
            <div class="bg-yellow-300 flex-none w-1/3 flex items-center justify-center">
              <div class="text-center">
                <div class="font-bold text-black">Fats</div>
                <div class="font-bold text-black">{{ fat_percentage | default('33%') }}</div>
              </div>
            </div>
            <!-- Carbs section (67%) -->
            <div class="bg-cyan-300 flex-1 flex items-center justify-center">
              <div class="text-center">
                <div class="font-bold text-black">Carbs</div>
                <div class="font-bold text-black">{{ carb_percentage | default('67%') }}</div>
              </div>
            </div>
          </div>
          
          <!-- Optimal marker -->
          <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-8">
            <div class="text-center">
              <div class="text-sm font-semibold">Optimal</div>
              <div class="w-0 h-0 border-l-4 border-r-4 border-t-8 border-transparent border-t-black"></div>
            </div>
          </div>
          
          <!-- Scale numbers -->
          <div class="flex justify-between mt-4 text-sm">
            <span>0</span>
            <span>25</span>
            <span>50</span>
            <span>75</span>
            <span>100</span>
          </div>
          
          <!-- Scale dots -->
          <div class="flex justify-between mt-2">
            <div class="w-2 h-2 bg-black rounded-full"></div>
            <div class="w-2 h-2 bg-black rounded-full"></div>
            <div class="w-2 h-2 bg-black rounded-full"></div>
            <div class="w-2 h-2 bg-black rounded-full"></div>
            <div class="w-2 h-2 bg-black rounded-full"></div>
          </div>
        </div>
      </div>

      <!-- Caloric Intake Section -->
      <div class="mb-12">
        <h3 class="text-3xl font-bold text-black mb-8 text-center">Caloric Intake</h3>
        
        <!-- Calculation Formula -->
        <div class="flex items-center justify-center space-x-6 text-center">
          <!-- Resting Metabolic -->
          <div class="bg-gray-200 p-4 rounded-lg">
            <div class="text-2xl font-bold text-black">{{ resting_calories | default('1386kCals') }}</div>
            <div class="text-sm text-gray-600 mt-2">
              <div>Resting</div>
              <div>Metabolic</div>
            </div>
          </div>
          
          <!-- Plus sign -->
          <div class="text-4xl font-bold text-black">+</div>
          
          <!-- NEAT -->
          <div class="bg-gray-200 p-4 rounded-lg">
            <div class="text-2xl font-bold text-black">{{ neat_calories | default('762kCals') }}</div>
            <div class="text-sm text-gray-600 mt-2">NEAT</div>
          </div>
          
          <!-- Minus sign -->
          <div class="text-4xl font-bold text-black">-</div>
          
          <!-- Weight Loss -->
          <div class="bg-gray-200 p-4 rounded-lg">
            <div class="text-2xl font-bold text-black">{{ weight_loss_calories | default('423kCals') }}</div>
            <div class="text-sm text-gray-600 mt-2">
              <div>to lose {{ weight_loss_rate | default('1.1lbs') }}</div>
              <div>per week</div>
            </div>
          </div>
          
          <!-- Equals sign -->
          <div class="text-4xl font-bold text-black">=</div>
          
          <!-- Total -->
          <div class="bg-gray-200 p-4 rounded-lg">
            <div class="text-2xl font-bold text-black">{{ total_calories | default('~1725kCals') }}</div>
          </div>
        </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">
      <div class="flex space-x-8">
        <span>CONTACT: {{ contact_email | default('info@ishplabs.com') }}</span>
        <span>WEBSITE: {{ website | default('www.ishplabs.com') }}</span>
        <span>SOCIAL: {{ social | default('@ishplabs') }}</span>
      </div>
      <div class="bg-white text-black font-bold px-3 py-1 text-lg">
        {{ page_number | default('5') }}
      </div>
    </div>
  </div>
</div>