2025-09-24 09:57:15 +01:00
< 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 >
