Add body fat analysis graph for page 1
This commit is contained in:
bolade
@@ -0,0 +1,175 @@
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user