danvics/pediatric-ai-scribe-v3
1
0
Fork 0
Code Issues Pull requests Projects Releases 14 Packages Wiki Activity Actions
pediatric-ai-scribe-v3/public/components/calculators.html
Daniel ef01eca8ca Citations: move Harriet Lane label to Vitals; restore honest Bhutani cite 
Vitals — updated source attribution to "Harriet Lane — Johns Hopkins
Children's Center Kids Kard" (was just Kids Kard). Both the card
subtitle and the intro line.

Bhutani — reverted my incorrect "Harriet Lane" citation (the values
in our table were never transcribed from Harriet Lane). Restored the
original attribution to the 1999 paper. Data itself is unchanged from
the pre-session state; treat it as unverified pending a clinician-
supplied source.
2026-04-14 12:43:17 +02:00

638 lines
40 KiB
HTML
Raw Blame History

<div class="module-header">
<h2><i class="fas fa-calculator"></i> Pediatric Calculators</h2>
<p>Clinical calculators for pediatric medicine</p>
</div>
<!-- Calculator selector pills -->
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;">
<button class="calc-nav-pill active" data-calc="bp">BP Percentile</button>
<button class="calc-nav-pill" data-calc="bmi">BMI Percentile</button>
<button class="calc-nav-pill" data-calc="growth">Growth Charts</button>
<button class="calc-nav-pill" data-calc="bili">Bilirubin</button>
<button class="calc-nav-pill" data-calc="vitals">Vital Signs</button>
<button class="calc-nav-pill" data-calc="bsa">Body Surface Area</button>
<button class="calc-nav-pill" data-calc="dose">Weight-Based Dosing</button>
<button class="calc-nav-pill" data-calc="resus">Resus Meds</button>
<button class="calc-nav-pill" data-calc="gcs">GCS</button>
<button class="calc-nav-pill" data-calc="equipment">Equipment</button>
</div>
<!-- ═══════════ BP PERCENTILE CALCULATOR ═══════════ -->
<div id="calc-bp" class="calc-panel">
<div class="card">
<div class="card-header">
<h3><i class="fas fa-heart-pulse"></i> Blood Pressure Percentile</h3>
<span style="font-size:11px;color:var(--g500);">AAP 2017 Clinical Practice Guideline</span>
</div>
<div style="padding:16px;">
<p style="font-size:12px;color:var(--g500);margin:0 0 16px;">Based on normative tables for normal-weight children ages 1-17. Flynn et al., Pediatrics 2017;140(3):e20171904.</p>
<div class="calc-grid">
<div class="calc-field">
<label>Age (years)</label>
<input type="number" id="bp-age" min="1" max="17" step="1" placeholder="1-17">
</div>
<div class="calc-field">
<label>Sex</label>
<select id="bp-sex"><option value="">Select</option><option value="male">Male</option><option value="female">Female</option></select>
</div>
<div class="calc-field">
<label>Height (cm)</label>
<input type="number" id="bp-height" min="50" max="200" step="0.1" placeholder="e.g. 110">
</div>
<div class="calc-field">
<label>Systolic BP (mmHg)</label>
<input type="number" id="bp-systolic" min="50" max="250" placeholder="e.g. 105">
</div>
<div class="calc-field">
<label>Diastolic BP (mmHg)</label>
<input type="number" id="bp-diastolic" min="30" max="150" placeholder="e.g. 65">
</div>
</div>
<button id="btn-calc-bp" class="btn-sm btn-primary" style="margin-top:12px;"><i class="fas fa-calculator"></i> Calculate</button>
<button id="btn-clear-bp" class="btn-sm btn-ghost" style="margin-top:12px;">Clear</button>
<div id="bp-result" class="calc-result hidden"></div>
<div id="bp-chart-container" class="chart-container hidden"><canvas id="bp-chart-canvas"></canvas></div>
<details style="margin-top:16px;font-size:12px;border:1px solid var(--g200);border-radius:8px;padding:0;">
<summary style="padding:10px 14px;cursor:pointer;font-weight:600;color:var(--g700);background:var(--g50);border-radius:8px;">Definitions: Hypertension &amp; Hypotension (AAP 2017 / Nelson)</summary>
<div style="padding:12px 14px;">
<p style="font-weight:700;color:var(--g800);margin:0 0 8px;">Hypertension Classification (AAP 2017)</p>
<table style="width:100%;font-size:12px;border-collapse:collapse;margin-bottom:14px;">
<thead><tr style="background:var(--g100);"><th style="padding:6px 8px;text-align:left;border:1px solid var(--g200);">Category</th><th style="padding:6px 8px;text-align:left;border:1px solid var(--g200);">Ages 1 to &lt;13 years</th><th style="padding:6px 8px;text-align:left;border:1px solid var(--g200);">Ages &ge;13 years</th></tr></thead>
<tbody>
<tr><td style="padding:6px 8px;border:1px solid var(--g200);font-weight:600;color:#10b981;">Normal</td><td style="padding:6px 8px;border:1px solid var(--g200);">&lt;90th percentile</td><td style="padding:6px 8px;border:1px solid var(--g200);">&lt;120/&lt;80 mmHg</td></tr>
<tr><td style="padding:6px 8px;border:1px solid var(--g200);font-weight:600;color:#f59e0b;">Elevated BP</td><td style="padding:6px 8px;border:1px solid var(--g200);">&ge;90th to &lt;95th percentile<br>OR 120/80 mmHg to &lt;95th (whichever lower)</td><td style="padding:6px 8px;border:1px solid var(--g200);">120-129/&lt;80 mmHg</td></tr>
<tr><td style="padding:6px 8px;border:1px solid var(--g200);font-weight:600;color:#f97316;">Stage 1 HTN</td><td style="padding:6px 8px;border:1px solid var(--g200);">&ge;95th percentile to &lt;95th + 12 mmHg<br>OR 130/80-139/89 mmHg (whichever lower)</td><td style="padding:6px 8px;border:1px solid var(--g200);">130/80 to 139/89 mmHg</td></tr>
<tr><td style="padding:6px 8px;border:1px solid var(--g200);font-weight:600;color:#ef4444;">Stage 2 HTN</td><td style="padding:6px 8px;border:1px solid var(--g200);">&ge;95th + 12 mmHg<br>OR &ge;140/90 mmHg (whichever lower)</td><td style="padding:6px 8px;border:1px solid var(--g200);">&ge;140/90 mmHg</td></tr>
</tbody>
</table>
<p style="font-weight:700;color:var(--g800);margin:0 0 6px;">Hypertensive Urgency vs Emergency (Nelson)</p>
<ul style="margin:0 0 14px;padding-left:18px;color:var(--g700);line-height:1.7;">
<li><strong>Hypertensive urgency:</strong> Severe BP elevation (&gt;95th + 30 mmHg or &gt;180/120) WITHOUT end-organ damage. Requires reduction over 24-48 hours.</li>
<li><strong>Hypertensive emergency:</strong> Severe BP elevation WITH end-organ damage (encephalopathy, heart failure, retinopathy, renal injury). Requires immediate IV therapy with goal reduction of 25% in first 8 hours.</li>
</ul>
<p style="font-weight:700;color:var(--g800);margin:0 0 6px;">Hypotension (AAP/PALS)</p>
<ul style="margin:0 0 8px;padding-left:18px;color:var(--g700);line-height:1.7;">
<li><strong>Definition:</strong> Systolic BP below the 5th percentile for age, sex, and height.</li>
<li><strong>Quick estimate (1-10 years):</strong> Hypotension = SBP &lt; 70 + (2 &times; age in years) mmHg</li>
<li><strong>Neonates:</strong> SBP &lt; gestational age in weeks (term: &lt;60 mmHg)</li>
<li><strong>Clinical significance:</strong> Hypotension in children is a late sign of shock. Tachycardia, poor perfusion, and altered mental status typically precede hypotension.</li>
</ul>
<p style="font-size:11px;color:var(--g400);margin:8px 0 0;">Sources: Flynn JT et al., Pediatrics 2017;140(3). Nelson Textbook of Pediatrics, 21st ed. PALS Provider Manual.</p>
</div>
</details>
</div>
</div>
</div>
<!-- ═══════════ BMI PERCENTILE CALCULATOR ═══════════ -->
<div id="calc-bmi" class="calc-panel hidden">
<div class="card">
<div class="card-header">
<h3><i class="fas fa-weight-scale"></i> BMI Percentile</h3>
<span style="font-size:11px;color:var(--g500);">CDC Growth Charts, ages 2-20</span>
</div>
<div style="padding:16px;">
<p style="font-size:12px;color:var(--g500);margin:0 0 16px;">Based on CDC 2000 growth reference data. For children ages 2-20 years.</p>
<div class="calc-grid">
<div class="calc-field">
<label>Age (years)</label>
<input type="number" id="bmi-age-yr" min="2" max="20" step="1" placeholder="e.g. 7" style="width:60%;display:inline-block;">
<select id="bmi-age-mo" style="width:35%;display:inline-block;padding:8px 4px;border:1.5px solid var(--g300);border-radius:6px;font-size:13px;">
<option value="0">0 mo</option><option value="1">1 mo</option><option value="2">2 mo</option><option value="3">3 mo</option>
<option value="4">4 mo</option><option value="5">5 mo</option><option value="6">6 mo</option><option value="7">7 mo</option>
<option value="8">8 mo</option><option value="9">9 mo</option><option value="10">10 mo</option><option value="11">11 mo</option>
</select>
</div>
<div class="calc-field">
<label>Sex</label>
<select id="bmi-sex"><option value="">Select</option><option value="male">Male</option><option value="female">Female</option></select>
</div>
<div class="calc-field">
<label>Weight (kg)</label>
<input type="number" id="bmi-weight" min="5" max="200" step="0.1" placeholder="e.g. 25">
</div>
<div class="calc-field">
<label>Height (cm)</label>
<input type="number" id="bmi-height" min="50" max="200" step="0.1" placeholder="e.g. 120">
</div>
</div>
<button id="btn-calc-bmi" class="btn-sm btn-primary" style="margin-top:12px;"><i class="fas fa-calculator"></i> Calculate</button>
<button id="btn-clear-bmi" class="btn-sm btn-ghost" style="margin-top:12px;">Clear</button>
<div id="bmi-result" class="calc-result hidden"></div>
<div id="bmi-chart-container" class="chart-container hidden"><canvas id="bmi-chart-canvas"></canvas></div>
</div>
</div>
</div>
<!-- ═══════════ BODY SURFACE AREA ═══════════ -->
<div id="calc-bsa" class="calc-panel hidden">
<div class="card">
<div class="card-header">
<h3><i class="fas fa-child"></i> Body Surface Area</h3>
<span style="font-size:11px;color:var(--g500);">Mosteller formula</span>
</div>
<div style="padding:16px;">
<p style="font-size:12px;color:var(--g500);margin:0 0 16px;">Mosteller formula: BSA (m2) = sqrt(height(cm) x weight(kg) / 3600)</p>
<div class="calc-grid">
<div class="calc-field">
<label>Weight (kg)</label>
<input type="number" id="bsa-weight" min="1" max="200" step="0.1" placeholder="e.g. 20">
</div>
<div class="calc-field">
<label>Height (cm)</label>
<input type="number" id="bsa-height" min="30" max="220" step="0.1" placeholder="e.g. 110">
</div>
</div>
<button id="btn-calc-bsa" class="btn-sm btn-primary" style="margin-top:12px;"><i class="fas fa-calculator"></i> Calculate</button>
<button id="btn-clear-bsa" class="btn-sm btn-ghost" style="margin-top:12px;">Clear</button>
<div id="bsa-result" class="calc-result hidden"></div>
</div>
</div>
</div>
<!-- ═══════════ WEIGHT-BASED DOSING ═══════════ -->
<div id="calc-dose" class="calc-panel hidden">
<div class="card">
<div class="card-header">
<h3><i class="fas fa-pills"></i> Weight-Based Dosing</h3>
</div>
<div style="padding:16px;">
<p style="font-size:12px;color:var(--g500);margin:0 0 16px;">Calculate dose based on weight. Always verify against formulary and institutional guidelines.</p>
<div class="calc-grid">
<div class="calc-field">
<label>Patient Weight (kg)</label>
<input type="number" id="dose-weight" min="1" max="200" step="0.1" placeholder="e.g. 15">
</div>
<div class="calc-field">
<label>Dose (mg/kg)</label>
<input type="number" id="dose-per-kg" min="0.01" step="0.01" placeholder="e.g. 10">
</div>
<div class="calc-field">
<label>Frequency</label>
<select id="dose-freq">
<option value="1">Once daily</option>
<option value="2">Twice daily (BID)</option>
<option value="3">Three times daily (TID)</option>
<option value="4">Four times daily (QID)</option>
<option value="6">Every 4 hours (Q4H)</option>
</select>
</div>
<div class="calc-field">
<label>Max single dose (mg, optional)</label>
<input type="number" id="dose-max" min="0" step="1" placeholder="e.g. 500">
</div>
<div class="calc-field">
<label>Concentration (mg/mL, optional)</label>
<input type="number" id="dose-conc" min="0" step="0.1" placeholder="e.g. 40">
</div>
</div>
<button id="btn-calc-dose" class="btn-sm btn-primary" style="margin-top:12px;"><i class="fas fa-calculator"></i> Calculate</button>
<button id="btn-clear-dose" class="btn-sm btn-ghost" style="margin-top:12px;">Clear</button>
<div id="dose-result" class="calc-result hidden"></div>
</div>
</div>
</div>
<!-- ═══════════ GROWTH CHARTS ═══════════ -->
<div id="calc-growth" class="calc-panel hidden">
<div class="card">
<div class="card-header">
<h3><i class="fas fa-chart-line"></i> Growth Percentiles</h3>
</div>
<div style="padding:16px;">
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;">
<button class="calc-pill active" data-growth="wfa">Weight-for-Age</button>
<button class="calc-pill" data-growth="lfa">Length/Height-for-Age</button>
<button class="calc-pill" data-growth="hcfa">Head Circumference</button>
<button class="calc-pill" data-growth="wfl">Weight-for-Length</button>
<button class="calc-pill" data-growth="fenton">Fenton (Preterm)</button>
</div>
<p id="growth-source-text" style="font-size:12px;color:var(--g500);margin:0 0 14px;">WHO growth standards (0-2y) / CDC 2000 (2-20y).</p>
<div class="calc-grid">
<div class="calc-field">
<label>Sex</label>
<select id="growth-sex"><option value="">Select</option><option value="male">Male</option><option value="female">Female</option></select>
</div>
<div class="calc-field" id="growth-age-field">
<label>Age <span style="font-weight:400;color:var(--g500);font-size:11px;">(fill any combination)</span></label>
<div style="display:flex;gap:6px;align-items:center;">
<input type="number" id="growth-age-yr" min="0" max="20" step="1" placeholder="yr" style="flex:1;min-width:0;">
<input type="number" id="growth-age-mo" min="0" max="240" step="1" placeholder="mo" style="flex:1;min-width:0;">
<input type="number" id="growth-age-d" min="0" max="365" step="1" placeholder="d" style="flex:1;min-width:0;">
</div>
<div id="growth-age-parsed" style="font-size:11px;color:var(--g500);margin-top:4px;min-height:14px;"></div>
</div>
<div class="calc-field" id="growth-ga-field" style="display:none;">
<label>Gestational Age (weeks)</label>
<input type="number" id="growth-ga" min="22" max="50" step="1" placeholder="22-50">
</div>
<div class="calc-field" id="growth-weight-field">
<label>Weight (kg)</label>
<input type="number" id="growth-weight" min="0.3" max="200" step="0.01" placeholder="e.g. 10.5">
</div>
<div class="calc-field" id="growth-length-field">
<label>Length/Height (cm)</label>
<input type="number" id="growth-length" min="20" max="200" step="0.1" placeholder="e.g. 75">
</div>
<div class="calc-field" id="growth-hc-field" style="display:none;">
<label>Head Circumference (cm)</label>
<input type="number" id="growth-hc" min="20" max="60" step="0.1" placeholder="e.g. 35">
</div>
</div>
<div id="growth-mph-section" style="display:none;margin-top:12px;padding:12px;background:var(--g50);border-radius:8px;">
<div style="font-size:12px;font-weight:600;color:var(--g600);margin-bottom:8px;">Mid-Parental Height (optional)</div>
<div class="calc-grid">
<div class="calc-field">
<label>Mother's Height (cm)</label>
<input type="number" id="growth-mother-ht" min="120" max="200" step="0.1" placeholder="e.g. 165">
</div>
<div class="calc-field">
<label>Father's Height (cm)</label>
<input type="number" id="growth-father-ht" min="140" max="220" step="0.1" placeholder="e.g. 178">
</div>
</div>
</div>
<button id="btn-calc-growth" class="btn-sm btn-primary" style="margin-top:12px;"><i class="fas fa-calculator"></i> Calculate</button>
<button id="btn-clear-growth" class="btn-sm btn-ghost" style="margin-top:12px;">Clear</button>
<div id="growth-result" class="calc-result hidden"></div>
<div id="growth-chart-container" class="chart-container hidden"><canvas id="growth-chart-canvas"></canvas></div>
</div>
</div>
</div>
<!-- ═══════════ BILIRUBIN NOMOGRAM ═══════════ -->
<div id="calc-bili" class="calc-panel hidden">
<div class="card">
<div class="card-header">
<h3><i class="fas fa-droplet"></i> Neonatal Bilirubin</h3>
</div>
<div style="padding:16px;">
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;">
<button class="calc-pill active" data-bili="aap">AAP 2022 Phototherapy</button>
<button class="calc-pill" data-bili="bhutani">Bhutani Nomogram</button>
</div>
<div id="bili-aap-panel">
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">AAP 2022 Clinical Practice Guideline. Determines phototherapy threshold based on gestational age and risk factors.</p>
<details style="margin-bottom:14px;font-size:12px;border:1px solid var(--g200);border-radius:8px;padding:0;">
<summary style="padding:10px 14px;cursor:pointer;font-weight:600;color:var(--g700);background:var(--g50);border-radius:8px;">Neurotoxicity Risk Factors for Phototherapy Threshold (AAP 2022)</summary>
<div style="padding:12px 14px;">
<p style="font-weight:600;color:#ef4444;margin:0 0 6px;">Higher Risk (use lower threshold):</p>
<ul style="margin:0 0 10px;padding-left:18px;color:var(--g700);line-height:1.7;">
<li>Gestational age 35-37 weeks (with other risk factors)</li>
<li>Albumin &lt; 3.0 g/dL</li>
<li>Isoimmune hemolytic disease (ABO, Rh incompatibility)</li>
<li>G6PD deficiency</li>
<li>Asphyxia / significant lethargy</li>
<li>Sepsis</li>
<li>Acidosis (pH &lt; 7.15)</li>
<li>Temperature instability / hypothermia</li>
</ul>
<p style="font-weight:600;color:#10b981;margin:0 0 6px;">Lower Risk (use higher threshold):</p>
<ul style="margin:0;padding-left:18px;color:var(--g700);line-height:1.7;">
<li>Gestational age &ge; 38 weeks</li>
<li>No hemolysis</li>
<li>Well-appearing infant</li>
<li>No risk factors above</li>
</ul>
<p style="margin:8px 0 0;font-size:11px;color:var(--g400);">Source: AAP 2022 Clinical Practice Guideline</p>
</div>
</details>
<details style="margin-bottom:14px;font-size:12px;border:1px solid var(--g200);border-radius:8px;padding:0;">
<summary style="padding:10px 14px;cursor:pointer;font-weight:600;color:var(--g700);background:var(--g50);border-radius:8px;">Risk Factors for Severe Neonatal Hyperbilirubinemia (Nelson Table 137.1)</summary>
<div style="padding:12px 14px;">
<p style="font-weight:600;color:var(--g800);margin:0 0 6px;">Genetic Factors</p>
<ul style="margin:0 0 12px;padding-left:18px;color:var(--g700);line-height:1.6;">
<li>Gilbert syndrome</li>
<li>Crigler-Najjar syndrome</li>
<li>Alagille syndrome</li>
<li>&beta;-thalassemia</li>
<li>Glucose-6-phosphate dehydrogenase (G6PD) deficiency</li>
<li>Bilirubin glucuronosyltransferase polymorphism</li>
<li>Pyruvate kinase deficiency</li>
<li>Erythrocyte structural defects (hereditary spherocytosis, elliptocytosis)</li>
<li>Galactosemia</li>
</ul>
<p style="font-weight:600;color:var(--g800);margin:0 0 6px;">Maternal Factors</p>
<ul style="margin:0 0 12px;padding-left:18px;color:var(--g700);line-height:1.6;">
<li>Family history of severe jaundice, splenectomy, or cholecystectomy</li>
<li>Primiparity</li>
<li>Teenage pregnancy</li>
<li>Diabetes</li>
<li>Rhesus incompatibility</li>
<li>ABO incompatibility</li>
<li>Other blood group isoimmunization</li>
<li>Use of drugs during labor (oxytocin, promethazine, bupivacaine)</li>
<li>Exclusive breastfeeding</li>
</ul>
<p style="font-weight:600;color:var(--g800);margin:0 0 6px;">Perinatal Factors</p>
<ul style="margin:0 0 12px;padding-left:18px;color:var(--g700);line-height:1.6;">
<li>Mode of delivery (breech vs vertex, instrumentation)</li>
<li>Birth trauma (cephalohematoma, substantial bruising, extravasation)</li>
<li>Birth asphyxia</li>
<li>Congenital infections (CMV, syphilis)</li>
<li>Sepsis</li>
</ul>
<p style="font-weight:600;color:var(--g800);margin:0 0 6px;">Neonatal Factors</p>
<ul style="margin:0 0 12px;padding-left:18px;color:var(--g700);line-height:1.6;">
<li>Male sex</li>
<li>Prematurity or low birthweight and small-for-gestational age</li>
<li>Hypothyroidism</li>
<li>Polycythemia</li>
<li>Hypoglycemia</li>
<li>Low intake of breast milk, dehydration, or weight loss</li>
<li>Breast milk jaundice</li>
<li>Jaundice in the first day of life</li>
<li>Trisomy 21</li>
<li>Infant of diabetic mother</li>
<li>Cephalohematoma, other bruising</li>
</ul>
<p style="font-weight:600;color:var(--g800);margin:0 0 6px;">Other Risk Factors and Markers</p>
<ul style="margin:0 0 8px;padding-left:18px;color:var(--g700);line-height:1.6;">
<li>Previous sibling received phototherapy or exchange transfusion</li>
<li>Predischarge TSB or TcB in the high zone</li>
<li>Use of hemolytic agents (naphthalene, menthol-based products) in G6PD-deficient populations</li>
<li>Folate deficiency</li>
<li>Aflatoxins</li>
<li>Hypothermia</li>
<li>Birth outside of a healthcare facility</li>
</ul>
<p style="margin:8px 0 0;font-size:11px;color:var(--g400);">Modified from Olusanya BO, Kaplan M, Hansen TWR. Neonatal hyperbilirubinaemia: a global perspective. Lancet Child Adolesc Health. 2018;2:610-618. Nelson Textbook of Pediatrics, Table 137.1.</p>
</div>
</details>
<div class="calc-grid">
<div class="calc-field">
<label>Gestational Age (weeks)</label>
<select id="bili-ga">
<option value="">Select</option>
<option value="35">35 weeks</option>
<option value="36">36 weeks</option>
<option value="37">37 weeks</option>
<option value="38">38 weeks</option>
<option value="39">39 weeks</option>
<option value="40">40+ weeks</option>
</select>
</div>
<div class="calc-field">
<label>Age of Infant (hours)</label>
<input type="number" id="bili-age-hours" min="0" max="168" step="1" placeholder="e.g. 48">
</div>
<div class="calc-field">
<label>Total Serum Bilirubin (mg/dL)</label>
<input type="number" id="bili-tsb" min="0" max="35" step="0.1" placeholder="e.g. 12.5">
</div>
<div class="calc-field">
<label>Risk Factors</label>
<select id="bili-risk">
<option value="none">None (lower risk)</option>
<option value="medium">Neurotoxicity risk factors present</option>
</select>
</div>
</div>
<button id="btn-calc-bili-aap" class="btn-sm btn-primary" style="margin-top:12px;"><i class="fas fa-calculator"></i> Assess</button>
<button id="btn-clear-bili-aap" class="btn-sm btn-ghost" style="margin-top:12px;">Clear</button>
</div>
<div id="bili-bhutani-panel" style="display:none;">
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">Bhutani hour-specific bilirubin nomogram. Determines risk zone for infants >= 35 weeks GA.</p>
<div class="calc-grid">
<div class="calc-field">
<label>Age of Infant (hours)</label>
<input type="number" id="bhutani-age" min="12" max="144" step="1" placeholder="12-144">
</div>
<div class="calc-field">
<label>Total Serum Bilirubin (mg/dL)</label>
<input type="number" id="bhutani-tsb" min="0" max="25" step="0.1" placeholder="e.g. 8.5">
</div>
</div>
<button id="btn-calc-bhutani" class="btn-sm btn-primary" style="margin-top:12px;"><i class="fas fa-calculator"></i> Assess</button>
<button id="btn-clear-bhutani" class="btn-sm btn-ghost" style="margin-top:12px;">Clear</button>
</div>
<div id="bili-result" class="calc-result hidden"></div>
<div id="bili-chart-container" class="chart-container hidden"><canvas id="bili-chart-canvas"></canvas></div>
</div>
</div>
</div>
<!-- ═══════════ VITAL SIGNS BY AGE ═══════════ -->
<div id="calc-vitals" class="calc-panel hidden">
<div class="card">
<div class="card-header">
<h3><i class="fas fa-heartbeat"></i> Normal Vital Signs by Age</h3>
<span style="font-size:11px;color:var(--g500);">Harriet Lane &mdash; Johns Hopkins Children's Center Kids Kard</span>
</div>
<div style="padding:16px;">
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">Select age group to view normal vital sign ranges. Source: Harriet Lane &mdash; Johns Hopkins Children's Center Kids Kard.</p>
<div class="calc-field" style="max-width:300px;margin-bottom:16px;">
<label>Age Group</label>
<select id="vitals-age-select">
<option value="">Select age group</option>
<option value="premie">Premie</option>
<option value="0-3mo">0-3 months</option>
<option value="3-6mo">3-6 months</option>
<option value="6-12mo">6-12 months</option>
<option value="1-3yr">1-3 years</option>
<option value="3-6yr">3-6 years</option>
<option value="6-12yr">6-12 years</option>
<option value=">12yr">&gt;12 years</option>
</select>
</div>
<div id="vitals-result" class="hidden"></div>
<!-- All ages reference table (collapsible) -->
<details style="margin-top:16px;border:1px solid var(--g200);border-radius:8px;">
<summary style="padding:10px 14px;cursor:pointer;font-weight:600;font-size:13px;color:var(--g700);background:var(--g50);border-radius:8px;">View All Age Groups</summary>
<div style="padding:12px;overflow-x:auto;">
<table class="admin-table" style="font-size:12px;width:100%;">
<thead>
<tr><th>Age</th><th>HR (bpm)</th><th>RR</th><th>BP (mmHg)</th><th>Temp (C)</th></tr>
</thead>
<tbody>
<tr><td>Premie</td><td>120-170</td><td>40-70</td><td>55-75/35-45</td><td>36.5-37.5</td></tr>
<tr><td>0-3 mo</td><td>100-150</td><td>35-55</td><td>65-85/45-55</td><td>36.5-37.5</td></tr>
<tr><td>3-6 mo</td><td>90-120</td><td>30-45</td><td>70-90/50-65</td><td>36.5-37.5</td></tr>
<tr><td>6-12 mo</td><td>80-120</td><td>25-40</td><td>80-100/55-65</td><td>36.0-37.5</td></tr>
<tr><td>1-3 yr</td><td>70-110</td><td>20-30</td><td>90-105/55-70</td><td>36.0-37.5</td></tr>
<tr><td>3-6 yr</td><td>65-110</td><td>20-25</td><td>95-110/60-75</td><td>36.0-37.5</td></tr>
<tr><td>6-12 yr</td><td>60-95</td><td>14-22</td><td>100-120/60-75</td><td>36.0-37.5</td></tr>
<tr><td>&gt;12 yr</td><td>55-85</td><td>12-18</td><td>110-135/65-85</td><td>36.0-37.5</td></tr>
</tbody>
</table>
</div>
</details>
<div style="margin-top:16px;">
<h4 style="font-size:13px;font-weight:700;color:var(--g700);margin:0 0 8px;">Quick Reference Formulas</h4>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;">
<div style="padding:10px;background:var(--g50);border-radius:8px;font-size:12px;">
<strong>Estimated Weight:</strong><br>
1-12mo: (age in mo + 9) / 2<br>
1-5yr: 2 x (age in yr) + 8<br>
6-12yr: 3 x (age in yr) + 7
</div>
<div style="padding:10px;background:var(--g50);border-radius:8px;font-size:12px;">
<strong>Min Systolic BP:</strong><br>
1-10yr: 70 + (2 x age in yr)<br>
Hypotension: SBP &lt; 5th %ile
</div>
<div style="padding:10px;background:var(--g50);border-radius:8px;font-size:12px;">
<strong>ETT Size:</strong><br>
Uncuffed: (age/4) + 4<br>
Cuffed: (age/4) + 3.5<br>
Depth: ETT size x 3
</div>
<div style="padding:10px;background:var(--g50);border-radius:8px;font-size:12px;">
<strong>Maintenance Fluids (4-2-1):</strong><br>
First 10kg: 4 mL/kg/hr<br>
Next 10kg: +2 mL/kg/hr<br>
Each kg above 20: +1 mL/kg/hr
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ═══════════ RESUSCITATION MEDICATIONS ═══════════ -->
<div id="calc-resus" class="calc-panel hidden">
<div class="card">
<div class="card-header">
<h3><i class="fas fa-kit-medical"></i> Resuscitation Medications</h3>
<span style="font-size:11px;color:var(--g500);">Johns Hopkins Kids Kard / AHA PALS 2020</span>
</div>
<div style="padding:16px;">
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">Enter patient weight to calculate all resuscitation medication doses.</p>
<div class="calc-grid">
<div class="calc-field">
<label>Patient Weight (kg)</label>
<input type="number" id="resus-weight" min="0.5" max="100" step="0.1" placeholder="e.g. 15">
</div>
</div>
<button id="btn-calc-resus" class="btn-sm btn-primary" style="margin-top:12px;"><i class="fas fa-calculator"></i> Calculate All Doses</button>
<button id="btn-clear-resus" class="btn-sm btn-ghost" style="margin-top:12px;">Clear</button>
<div id="resus-result" class="calc-result hidden"></div>
</div>
</div>
</div>
<!-- ═══════════ GLASGOW COMA SCALE ═══════════ -->
<div id="calc-gcs" class="calc-panel hidden">
<div class="card">
<div class="card-header">
<h3><i class="fas fa-brain"></i> Glasgow Coma Scale</h3>
<span style="font-size:11px;color:var(--g500);">Child/Adult and Infant versions</span>
</div>
<div style="padding:16px;">
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">Select responses to calculate GCS. Total score 3-15. Source: Johns Hopkins Kids Kard.</p>
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;">
<button class="calc-pill active" data-gcs="child">Child / Adult</button>
<button class="calc-pill" data-gcs="infant">Infant</button>
</div>
<!-- Child/Adult GCS -->
<div id="gcs-child-panel">
<div class="calc-field" style="margin-bottom:12px;">
<label>Eye Opening</label>
<select id="gcs-child-eye">
<option value="4">4 — Spontaneous</option>
<option value="3">3 — To speech</option>
<option value="2">2 — To pain</option>
<option value="1">1 — None</option>
</select>
</div>
<div class="calc-field" style="margin-bottom:12px;">
<label>Verbal Response</label>
<select id="gcs-child-verbal">
<option value="5">5 — Oriented</option>
<option value="4">4 — Confused</option>
<option value="3">3 — Inappropriate words</option>
<option value="2">2 — Incomprehensible sounds</option>
<option value="1">1 — None</option>
</select>
</div>
<div class="calc-field" style="margin-bottom:12px;">
<label>Motor Response</label>
<select id="gcs-child-motor">
<option value="6">6 — Obeys commands</option>
<option value="5">5 — Localizes pain</option>
<option value="4">4 — Withdraws to pain</option>
<option value="3">3 — Abnormal flexion (decorticate)</option>
<option value="2">2 — Abnormal extension (decerebrate)</option>
<option value="1">1 — None (flaccid)</option>
</select>
</div>
</div>
<!-- Infant GCS -->
<div id="gcs-infant-panel" style="display:none;">
<div class="calc-field" style="margin-bottom:12px;">
<label>Eye Opening</label>
<select id="gcs-infant-eye">
<option value="4">4 — Spontaneous</option>
<option value="3">3 — To speech/sound</option>
<option value="2">2 — To painful stimuli</option>
<option value="1">1 — None</option>
</select>
</div>
<div class="calc-field" style="margin-bottom:12px;">
<label>Verbal Response</label>
<select id="gcs-infant-verbal">
<option value="5">5 — Coos/babbles</option>
<option value="4">4 — Irritable cry</option>
<option value="3">3 — Cries to pain</option>
<option value="2">2 — Moans to pain</option>
<option value="1">1 — None</option>
</select>
</div>
<div class="calc-field" style="margin-bottom:12px;">
<label>Motor Response</label>
<select id="gcs-infant-motor">
<option value="6">6 — Normal spontaneous movement</option>
<option value="5">5 — Withdraws to touch</option>
<option value="4">4 — Withdraws to pain</option>
<option value="3">3 — Abnormal flexion (decorticate)</option>
<option value="2">2 — Abnormal extension (decerebrate)</option>
<option value="1">1 — None (flaccid)</option>
</select>
</div>
</div>
<div id="gcs-result" class="calc-result"></div>
</div>
</div>
</div>
<!-- ═══════════ EQUIPMENT SIZING ═══════════ -->
<div id="calc-equipment" class="calc-panel hidden">
<div class="card">
<div class="card-header">
<h3><i class="fas fa-lungs"></i> Pediatric Equipment Sizing</h3>
<span style="font-size:11px;color:var(--g500);">Johns Hopkins Kids Kard</span>
</div>
<div style="padding:16px;">
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">Select age/weight group to view recommended equipment sizes.</p>
<div class="calc-field" style="max-width:300px;margin-bottom:16px;">
<label>Age / Weight Group</label>
<select id="equip-age-select">
<option value="">Select</option>
<option value="premie">Premie (1-3 kg)</option>
<option value="newborn">Newborn (2-4 kg)</option>
<option value="6mo">6 months (6-8 kg)</option>
<option value="1yr">1 year (10 kg)</option>
<option value="2-3yr">2-3 years (12-16 kg)</option>
<option value="4-6yr">4-6 years (20-25 kg)</option>
<option value="7-10yr">7-10 years (25-35 kg)</option>
<option value="11-15yr">11-15 years (40-50 kg)</option>
<option value="16yr">16+ years (>50 kg)</option>
</select>
</div>
<div id="equip-result" class="hidden"></div>
</div>
</div>
</div>
Reference in a new issue View git blame Copy permalink