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" > Lung Analysis< / h1 >
<!-- Spirometry Assessment Section -->
< h2 class = "text-xl font-bold text-black mb-4" > Spirometry Assessment< / h2 >
< p class = "text-gray-700 text-sm mb-8" > Spirometry is a diagnostic device that assesses how well a person breathes and how their lungs are functioning. Lung function is crucial for oxygen delivery during physical activity. Comparing results to expected/normal values can highlight potential limitations that would require additional lung training to improve overall physical activity.< / p >
<!-- Spirometry Charts Section -->
< div class = "mb-8 space-y-6" >
<!-- Lung Volume Chart -->
< div class = "flex items-center" >
< div class = "w-32 text-right pr-4" >
< div class = "font-bold text-black" > Lung Volume< / div >
< div class = "text-xs text-gray-600" > LLN< / div >
< / div >
< div class = "flex-1 relative" >
<!-- Color - coded bar -->
< div class = "flex h-8 rounded" >
< div class = "bg-red-300 flex-1" > < / div >
< div class = "bg-orange-300 flex-1" > < / div >
< div class = "bg-yellow-300 flex-1" > < / div >
< div class = "bg-green-300 flex-1" > < / div >
< div class = "bg-green-400 flex-1" > < / div >
< / div >
<!-- Predicted marker -->
< div class = "absolute top-0 left-3/4 transform -translate-x-1/2" >
< div class = "text-xs font-semibold mb-1" > Predicted< / div >
< div class = "w-0 h-0 border-l-2 border-r-2 border-t-4 border-transparent border-t-black" > < / div >
< / div >
<!-- Scale -->
< div class = "flex justify-between text-xs mt-2" >
< span > -5< / span >
< span > -4< / span >
< span > -3< / span >
< span > -2< / span >
< span > -1< / span >
< span > 0< / span >
< span > 1< / span >
< span > 2< / span >
< span > 3< / span >
< / div >
< / div >
< div class = "w-32 pl-4" >
< div class = "font-bold text-black" > FVC< / div >
< div class = "text-sm text-black" > {{ fvc_value | default('4.24L → 112.0%') }}< / div >
< div class = "text-xs text-gray-600" > of predicted< / div >
< / div >
< / div >
<!-- Lung Power Chart -->
< div class = "flex items-center" >
< div class = "w-32 text-right pr-4" >
< div class = "font-bold text-black" > Lung Power< / div >
< / div >
< div class = "flex-1 relative" >
<!-- Color - coded bar -->
< div class = "flex h-8 rounded" >
< div class = "bg-red-300 flex-1" > < / div >
< div class = "bg-orange-300 flex-1" > < / div >
< div class = "bg-yellow-300 flex-1" > < / div >
< div class = "bg-green-300 flex-1" > < / div >
< div class = "bg-green-400 flex-1" > < / div >
< / div >
<!-- Marker at position -->
< div class = "absolute top-0 left-2/3 transform -translate-x-1/2" >
< div class = "w-0 h-0 border-l-2 border-r-2 border-t-4 border-transparent border-t-black" > < / div >
< / div >
<!-- Scale -->
< div class = "flex justify-between text-xs mt-2" >
< span > -5< / span >
< span > -4< / span >
< span > -3< / span >
< span > -2< / span >
< span > -1< / span >
< span > 0< / span >
< span > 1< / span >
< span > 2< / span >
< span > 3< / span >
< / div >
< / div >
< div class = "w-32 pl-4" >
< div class = "font-bold text-black" > FEV1< / div >
< div class = "text-sm text-black" > {{ fev1_value | default('3.26L → 103.3%') }}< / div >
< div class = "text-xs text-gray-600" > of predicted< / div >
< / div >
< / div >
<!-- Power/Volume Chart -->
< div class = "flex items-center" >
< div class = "w-32 text-right pr-4" >
< div class = "font-bold text-black" > Power/Volume< / div >
< / div >
< div class = "flex-1 relative" >
<!-- Color - coded bar -->
< div class = "flex h-8 rounded" >
< div class = "bg-red-300 flex-1" > < / div >
< div class = "bg-orange-300 flex-1" > < / div >
< div class = "bg-yellow-300 flex-1" > < / div >
< div class = "bg-green-300 flex-1" > < / div >
< div class = "bg-green-400 flex-1" > < / div >
< / div >
<!-- Scale -->
< div class = "flex justify-between text-xs mt-2" >
< span > -5< / span >
< span > -4< / span >
< span > -3< / span >
< span > -2< / span >
< span > -1< / span >
< span > 0< / span >
< span > 1< / span >
< span > 2< / span >
< span > 3< / span >
< / div >
< / div >
< div class = "w-32 pl-4" >
< div class = "font-bold text-black" > FEV1/FVC< / div >
< div class = "text-sm text-black" > {{ fev1_fvc_ratio | default('76.89% → 91.8%') }}< / div >
< div class = "text-xs text-gray-600" > of predicted< / div >
< / div >
< / div >
< / div >
<!-- Indications Section -->
< div class = "bg-gray-200 p-4 rounded-lg mb-8 text-center" >
< h3 class = "text-lg font-bold text-black mb-2" > Indications< / h3 >
< p class = "text-black" > {{ indication | default('No Respiratory Capacity Limitation') }}< / p >
< / div >
<!-- Respiratory Section -->
< div class = "mb-6" >
< h2 class = "text-2xl font-bold text-black mb-4 text-center" > Respiratory< / h2 >
<!-- Respiratory Graph -->
< div class = "flex justify-center mb-4" >
< img src = "{{ respiratory_graph | default('../graphs/respiratory_chart.png') }}"
alt = "Respiratory Analysis Chart"
class = "w-full max-w-4xl h-64 object-contain" >
< / div >
<!-- Peak VT Information -->
< div class = "bg-gray-200 p-4 rounded-lg text-center" >
< h4 class = "text-lg font-bold text-black mb-2" > Peak VT< / h4 >
< p class = "text-black" > {{ peak_vt_value | default('2.38L/Breath which occurs at 172bpm (Zone 3)') }}< / p >
< p class = "text-black font-semibold" > {{ peak_vt_percentage | default('73% of FEV1') }}< / p >
< / 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('7') }}
< / div >
< / div >
< / div >
< / div >
