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/bedside.html
Daniel 1431498fd6 feat(nav): promote Bedside to its own tab; reorganise sidebar sections 
Bedside is now a top-level tab instead of a sub-pill inside Calculators —
it's the highest-traffic emergency reference in the app and deserves a
one-click entry. Same DOM structure and JS modules; only the container
moved.

Sidebar reorg:
- Notes: Hospital Course, Chart Review, SOAP Note, Well Visit, Sick Visit
  (Well Visit + Sick Visit relocated from the old "Pediatric" group —
  they're clinical note workflows, not pure reference tools).
- Section rename: "Pediatric" → "Clinical Tools". The section now holds
  Vaccine Schedule, Catch-Up Schedule, Physical Exam Guide, Bedside,
  Calculators, Pagers & Extensions, Learning Hub, Content Manager — mix
  of reference tables + active calculators + utilities, none strictly
  pediatric. "Clinical Tools" reads naturally for the combined set.

Layout changes:
- calculators.html: dropped 480 lines of bedside panel + the Bedside
  nav-pill. The shared age→weight estimator moved with it.
- bedside.html: new component file, contains the full bedside card +
  the age→weight estimator prepended.
- index.html: added bedside-tab section, sidebar restructured.
- e2e-harness.html: renders calculators + bedside side-by-side (not the
  old calc-tab→bedside-pill dance) so the bedside smoke suite still
  works without auth. e2e-bootstrap fetches both with a cache-buster.
- bedside-smoke.spec.js: removed the now-obsolete calc-nav-pill click
  from each test.

Tab persistence is unchanged — ped_last_tab already survives sign-out,
and the lazy-load cache keeps sub-pill state across navigation within a
session. Persistence across browser restart for sub-pills is a separate
follow-up.
2026-04-23 18:58:38 +02:00

523 lines
38 KiB
HTML
Raw Blame History

<!-- Bedside — emergency and rapid-reference clinical tools, extracted to its own top-level tab. -->
<!-- ═══════════ GLOBAL AGE → WEIGHT (available for every calculator below) ═══════════ -->
<div id="bedside-shared" style="background:var(--g50);border:1px solid var(--g200);border-radius:10px;padding:12px 14px;margin-bottom:20px;">
<div style="font-size:11px;font-weight:700;color:var(--g600);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;"><i class="fas fa-weight-scale" style="color:var(--blue);"></i> Age → Weight estimator</div>
<div style="display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;">
<div class="calc-field" style="flex:1;min-width:140px;max-width:190px;">
<label style="font-weight:600;">Age <span style="font-weight:400;color:var(--g500);font-size:11px;">(e.g. 3y, 6 mo, 15d)</span></label>
<input type="text" id="bedside-age" placeholder="e.g. 3y or 6 mo" autocomplete="off">
</div>
<div class="calc-field" style="flex:1;min-width:150px;max-width:200px;">
<label style="font-weight:600;">Formula</label>
<select id="bedside-formula">
<option value="apls" selected>APLS (Luscombe 2007)</option>
<option value="bestguess">Best Guess (Tinning 2007)</option>
</select>
</div>
<div class="calc-field" style="flex:1;min-width:140px;max-width:190px;">
<label style="font-weight:600;">Weight (kg)</label>
<input type="number" id="bedside-weight" min="0.3" max="200" step="0.1" placeholder="auto from age, or type">
</div>
<button id="btn-bedside-clear" class="btn-sm btn-ghost" type="button">Clear</button>
</div>
<div id="bedside-estimate-note" style="font-size:12px;color:var(--g600);margin-top:8px;min-height:18px;"></div>
<div style="font-size:11px;color:var(--g500);margin-top:4px;">Estimator only — copy the weight into whichever calculator you need.</div>
<!-- Formulas reference (collapsed by default) -->
<details style="margin-top:10px;">
<summary style="cursor:pointer;font-size:12px;color:var(--blue-dark);font-weight:600;"><i class="fas fa-info-circle"></i> Weight-estimation formulas</summary>
<div style="margin-top:8px;padding:10px 12px;background:white;border:1px solid var(--g200);border-radius:6px;font-size:12px;line-height:1.55;">
<div style="font-weight:700;color:var(--g700);margin-bottom:2px;">APLS (Luscombe &amp; Owens 2007 / APLS-UK 2016)</div>
<div style="padding-left:12px;">
&bull; 0-12 months: <strong>(0.5 &times; age in months) + 4</strong><br>
&bull; 1-5 years: <strong>(2 &times; age in years) + 8</strong><br>
&bull; 6-12 years: <strong>(3 &times; age in years) + 7</strong>
</div>
<div style="font-weight:700;color:var(--g700);margin:8px 0 2px;">Best Guess (Tinning &amp; Acworth 2007)</div>
<div style="padding-left:12px;">
&bull; 1-11 months: <strong>(age in months + 9) / 2</strong><br>
&bull; 1-4 years: <strong>2 &times; (age in years + 5)</strong><br>
&bull; 5-14 years: <strong>4 &times; age in years</strong>
</div>
<div style="margin-top:8px;color:var(--g500);font-style:italic;">Broselow tape (length-based) is most accurate when available.</div>
</div>
</details>
</div>
<div class="card">
<div class="card-header">
<h3><i class="fas fa-briefcase-medical" style="color:var(--red);"></i> Bedside</h3>
<span style="font-size:11px;color:var(--g500);">Weight-based pediatric reference. Always verify against institutional protocols.</span>
</div>
<div style="padding:16px;">
<div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--g200);">
<button class="calc-pill active" data-em="neonatal"><i class="fas fa-baby"></i> Neonatal</button>
<button class="calc-pill" data-em="airway"><i class="fas fa-wind"></i> Airway/RSI</button>
<button class="calc-pill" data-em="cardiac"><i class="fas fa-heart-pulse"></i> Cardiac Arrest</button>
<button class="calc-pill" data-em="respiratory"><i class="fas fa-lungs"></i> Respiratory</button>
<button class="calc-pill" data-em="ventilation"><i class="fas fa-fan"></i> O2 &amp; Ventilation</button>
<button class="calc-pill" data-em="seizure"><i class="fas fa-brain"></i> Seizures</button>
<button class="calc-pill" data-em="sepsis"><i class="fas fa-virus"></i> Sepsis &amp; Fever</button>
<button class="calc-pill" data-em="anaphylaxis"><i class="fas fa-syringe"></i> Anaphylaxis</button>
<button class="calc-pill" data-em="sedation"><i class="fas fa-bed-pulse"></i> Sedation</button>
<button class="calc-pill" data-em="agitation"><i class="fas fa-user-injured"></i> Agitation</button>
<button class="calc-pill" data-em="antiemetics"><i class="fas fa-pills"></i> Antiemetics</button>
<button class="calc-pill" data-em="antimicrobials"><i class="fas fa-bacterium"></i> Antimicrobials</button>
<button class="calc-pill" data-em="burns"><i class="fas fa-fire"></i> Burns</button>
<button class="calc-pill" data-em="toxicology"><i class="fas fa-skull-crossbones"></i> Toxicology</button>
<button class="calc-pill" data-em="trauma"><i class="fas fa-user-injured" style="transform:rotate(-45deg);"></i> Trauma</button>
</div>
<!-- ── NEONATAL ── -->
<div id="em-neonatal" class="em-section">
<h4 style="font-size:15px;font-weight:700;color:var(--g800);margin:0 0 4px;">Neonatal Assessment</h4>
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">GA classification, birth weight assessment (AGA/SGA/LGA), and prematurity category. Fenton 2013 / WHO.</p>
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;">
<div class="calc-field" style="flex:1;min-width:130px;">
<label>GA (weeks)</label>
<input type="number" id="neo-ga-weeks" min="22" max="44" step="1" placeholder="e.g. 34">
</div>
<div class="calc-field" style="flex:1;min-width:130px;">
<label>GA (days)</label>
<input type="number" id="neo-ga-days" min="0" max="6" step="1" placeholder="0-6">
</div>
<div class="calc-field" style="flex:1;min-width:130px;">
<label>Birth Weight (g)</label>
<input type="number" id="neo-weight" min="200" max="6000" step="1" placeholder="e.g. 2500">
</div>
<div class="calc-field" style="flex:1;min-width:110px;">
<label>Sex</label>
<select id="neo-sex">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<button id="btn-neo-assess" class="btn-sm btn-primary" style="margin-bottom:12px;"><i class="fas fa-calculator"></i> Assess</button>
<div id="neo-result"></div>
<details style="margin-top:24px;border-top:1px solid var(--g200);padding-top:16px;">
<summary style="cursor:pointer;font-size:14px;font-weight:700;color:var(--g800);"><i class="fas fa-heart-pulse" style="color:var(--red);"></i> NRP Resuscitation Pathway</summary>
<p style="font-size:12px;color:var(--g500);margin:8px 0;">AHA Neonatal Resuscitation Program 2020. Static visual pathway — enter weight to calculate drug doses.</p>
<div style="margin-bottom:10px;">
<button class="btn-sm btn-ghost" type="button" data-img-src="/img/nrp_pathway.png" data-img-title="NRP Pathway (reference)"><i class="fas fa-image"></i> View pathway image</button>
</div>
<div id="nrp-pathway-static"></div>
<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:12px;">
<div class="calc-field" style="flex:1;min-width:170px;max-width:240px;">
<label>Current Weight (kg)</label>
<input type="number" id="nrp-weight" min="0.3" max="6" step="0.01" placeholder="e.g. 3.0">
</div>
<button id="btn-nrp-calc" class="btn-sm btn-primary"><i class="fas fa-calculator"></i> Calculate NRP Doses</button>
</div>
<div id="nrp-result" style="margin-top:12px;"></div>
</details>
<!-- Apgar Score -->
<div style="margin-top:24px;border-top:1px solid var(--g200);padding-top:16px;">
<h4 style="font-size:14px;font-weight:700;color:var(--g800);margin:0 0 4px;"><i class="fas fa-clipboard-check" style="color:var(--blue);"></i> Apgar Score</h4>
<p style="font-size:12px;color:var(--g500);margin:0 0 10px;">Assess at <strong>1 and 5 minutes</strong>. If &lt;7 at 5 min, repeat every 5 min up to 20 min. Apgar is a description — <em>never</em> delay resuscitation waiting for a score.</p>
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;">
<div class="calc-field" style="flex:1;min-width:150px;">
<label><strong>A</strong>ppearance (color)</label>
<select id="apgar-appearance">
<option value="0">0 — Blue / pale all over</option>
<option value="1" selected>1 — Body pink, extremities blue</option>
<option value="2">2 — All pink</option>
</select>
</div>
<div class="calc-field" style="flex:1;min-width:150px;">
<label><strong>P</strong>ulse (HR)</label>
<select id="apgar-pulse">
<option value="0">0 — Absent</option>
<option value="1">1 — &lt;100</option>
<option value="2" selected>2 — ≥100</option>
</select>
</div>
<div class="calc-field" style="flex:1;min-width:150px;">
<label><strong>G</strong>rimace (reflex)</label>
<select id="apgar-grimace">
<option value="0">0 — No response</option>
<option value="1">1 — Grimace / weak cry</option>
<option value="2" selected>2 — Cry / active withdrawal</option>
</select>
</div>
<div class="calc-field" style="flex:1;min-width:150px;">
<label><strong>A</strong>ctivity (tone)</label>
<select id="apgar-activity">
<option value="0">0 — Limp</option>
<option value="1">1 — Some flexion</option>
<option value="2" selected>2 — Active motion</option>
</select>
</div>
<div class="calc-field" style="flex:1;min-width:150px;">
<label><strong>R</strong>espiration</label>
<select id="apgar-respiration">
<option value="0">0 — Absent</option>
<option value="1">1 — Slow / irregular</option>
<option value="2" selected>2 — Strong cry</option>
</select>
</div>
</div>
<button id="btn-apgar-calc" class="btn-sm btn-primary"><i class="fas fa-calculator"></i> Calculate Apgar</button>
<div id="apgar-result" style="margin-top:10px;"></div>
</div>
</div>
<!-- ── AIRWAY / RSI ── -->
<div id="em-airway" class="em-section" style="display:none;">
<h4 style="font-size:15px;font-weight:700;color:var(--g800);margin:0 0 4px;">Airway Management / RSI</h4>
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">RSI drugs + equipment sizing + initial ventilator settings.</p>
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;">
<div class="calc-field" style="flex:1;min-width:140px;max-width:200px;">
<label>Weight (kg)</label>
<input type="number" id="airway-weight" min="1" max="150" step="0.1" placeholder="e.g. 20">
</div>
<div class="calc-field" style="flex:1;min-width:140px;max-width:200px;">
<label>Age (years, for equipment sizing)</label>
<input type="number" id="airway-age" min="0" max="18" step="0.5" placeholder="e.g. 5">
</div>
</div>
<button id="btn-airway-calc" class="btn-sm btn-primary" style="margin-bottom:12px;"><i class="fas fa-calculator"></i> Calculate</button>
<div id="airway-result"></div>
</div>
<!-- ── CARDIAC ARREST / PALS ── -->
<div id="em-cardiac" class="em-section" style="display:none;">
<h4 style="font-size:15px;font-weight:700;color:var(--g800);margin:0 0 4px;">Cardiac Arrest / PALS</h4>
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">PALS algorithm medications for arrest and peri-arrest rhythms.</p>
<div class="calc-field" style="max-width:200px;margin-bottom:12px;">
<label>Weight (kg)</label>
<input type="number" id="cardiac-weight" min="1" max="150" step="0.1" placeholder="e.g. 20">
</div>
<div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;">
<button class="btn-sm btn-primary" data-cardiac="general">General Doses</button>
<button class="btn-sm btn-primary" data-cardiac="asystole">Asystole / PEA</button>
<button class="btn-sm btn-primary" data-cardiac="brady">Bradycardia</button>
<button class="btn-sm btn-primary" data-cardiac="svt">SVT</button>
<button class="btn-sm btn-primary" data-cardiac="vfib">VF / Pulseless VT</button>
<button class="btn-sm btn-primary" data-cardiac="vt">Stable VT</button>
</div>
<div id="cardiac-result"></div>
</div>
<!-- ── RESPIRATORY ── -->
<div id="em-respiratory" class="em-section" style="display:none;">
<h4 style="font-size:15px;font-weight:700;color:var(--g800);margin:0 0 4px;">Respiratory Management</h4>
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">Asthma, croup, bronchiolitis — scores, stepwise management, weight-based drug dosing.</p>
<div class="calc-field" style="max-width:200px;margin-bottom:12px;">
<label>Weight (kg)</label>
<input type="number" id="resp-weight" min="1" max="150" step="0.1" placeholder="e.g. 15">
</div>
<div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;">
<button class="calc-pill active" data-resp="asthma">Asthma</button>
<button class="calc-pill" data-resp="croup">Croup</button>
<button class="calc-pill" data-resp="bronchiolitis">Bronchiolitis</button>
</div>
<div id="resp-asthma">
<p style="font-size:12px;color:var(--g500);margin:0 0 10px;">Select severity to see stepwise management with weight-based dosing.</p>
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;">
<button class="btn-sm" data-asthma-severity="mild" style="background:var(--green);color:white;">Mild</button>
<button class="btn-sm" data-asthma-severity="moderate" style="background:var(--amber);color:white;">Moderate</button>
<button class="btn-sm" data-asthma-severity="severe" style="background:var(--red);color:white;">Severe</button>
</div>
<div id="asthma-result"></div>
<div style="margin-top:16px;border-top:1px solid var(--g200);padding-top:12px;">
<label style="font-size:12px;font-weight:600;color:var(--g600);margin-bottom:8px;display:block;">PRAM Score (Pediatric Respiratory Assessment Measure)</label>
<div style="display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;">
<div class="calc-field" style="flex:1;min-width:160px;">
<label>O2 Saturation</label>
<select id="pram-spo2"><option value="0">≥95%</option><option value="1">92-94%</option><option value="2">&lt;92%</option></select>
</div>
<div class="calc-field" style="flex:1;min-width:160px;">
<label>Suprasternal Retractions</label>
<select id="pram-retractions"><option value="0">Absent</option><option value="2">Present</option></select>
</div>
<div class="calc-field" style="flex:1;min-width:160px;">
<label>Scalene Contraction</label>
<select id="pram-scalene"><option value="0">Absent</option><option value="2">Present</option></select>
</div>
<div class="calc-field" style="flex:1;min-width:160px;">
<label>Air Entry</label>
<select id="pram-air"><option value="0">Normal</option><option value="1">Decreased at bases</option><option value="2">Widespread decrease</option><option value="3">Absent/minimal</option></select>
</div>
<div class="calc-field" style="flex:1;min-width:160px;">
<label>Wheezing</label>
<select id="pram-wheeze"><option value="0">Absent</option><option value="1">Expiratory only</option><option value="2">Insp &amp; exp</option><option value="3">Audible / silent chest</option></select>
</div>
</div>
<button id="btn-pram-calc" class="btn-sm btn-primary"><i class="fas fa-calculator"></i> Calculate PRAM</button>
<div id="pram-result" style="margin-top:8px;"></div>
</div>
</div>
<div id="resp-croup" style="display:none;">
<p style="font-size:12px;color:var(--g500);margin:0 0 10px;">Westley Croup Score → severity-based treatment.</p>
<div style="display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;">
<div class="calc-field" style="flex:1;min-width:160px;">
<label>Consciousness</label>
<select id="croup-conscious"><option value="0">Normal</option><option value="5">Disoriented</option></select>
</div>
<div class="calc-field" style="flex:1;min-width:160px;">
<label>Cyanosis</label>
<select id="croup-cyanosis"><option value="0">None</option><option value="4">With agitation</option><option value="5">At rest</option></select>
</div>
<div class="calc-field" style="flex:1;min-width:160px;">
<label>Stridor</label>
<select id="croup-stridor"><option value="0">None</option><option value="1">With agitation</option><option value="2">At rest</option></select>
</div>
<div class="calc-field" style="flex:1;min-width:160px;">
<label>Air Entry</label>
<select id="croup-air"><option value="0">Normal</option><option value="1">Decreased</option><option value="2">Markedly decreased</option></select>
</div>
<div class="calc-field" style="flex:1;min-width:160px;">
<label>Retractions</label>
<select id="croup-retractions"><option value="0">None</option><option value="1">Mild</option><option value="2">Moderate</option><option value="3">Severe</option></select>
</div>
</div>
<button id="btn-croup-calc" class="btn-sm btn-primary"><i class="fas fa-calculator"></i> Calculate Westley Score</button>
<div id="croup-result" style="margin-top:10px;"></div>
</div>
<div id="resp-bronchiolitis" style="display:none;">
<p style="font-size:12px;color:var(--g500);margin:0 0 10px;">Bronchiolitis management per AAP 2014/2023 — primarily supportive.</p>
<div style="display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;">
<div class="calc-field" style="flex:1;min-width:160px;">
<label>Age</label>
<select id="bronch-age"><option value="<12w">&lt;12 weeks</option><option value="12w-12m">12 wks - 12 mo</option><option value=">12m">&gt;12 months</option></select>
</div>
<div class="calc-field" style="flex:1;min-width:160px;">
<label>O2 Saturation</label>
<select id="bronch-spo2"><option value="normal">≥90%</option><option value="low">&lt;90%</option></select>
</div>
<div class="calc-field" style="flex:1;min-width:160px;">
<label>Hydration</label>
<select id="bronch-hydration"><option value="adequate">Adequate</option><option value="poor">Poor / dehydrated</option></select>
</div>
<div class="calc-field" style="flex:1;min-width:160px;">
<label>Resp Distress</label>
<select id="bronch-distress"><option value="mild">Mild</option><option value="moderate">Moderate</option><option value="severe">Severe / apnea</option></select>
</div>
</div>
<button id="btn-bronch-calc" class="btn-sm btn-primary"><i class="fas fa-calculator"></i> Assess</button>
<div id="bronch-result" style="margin-top:10px;"></div>
</div>
</div>
<!-- ── O2 & VENTILATION (teaching + reference) ── -->
<div id="em-ventilation" class="em-section" style="display:none;">
<h4 style="font-size:15px;font-weight:700;color:var(--g800);margin:0 0 14px;">Oxygen &amp; Ventilation</h4>
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;">
<div class="calc-field" style="flex:1;min-width:140px;max-width:200px;">
<label>Weight (kg)</label>
<input type="number" id="vent-weight" min="1" max="150" step="0.1" placeholder="e.g. 20">
</div>
<div class="calc-field" style="flex:1;min-width:140px;max-width:200px;">
<label>Age (years, optional)</label>
<input type="number" id="vent-age" min="0" max="18" step="0.5" placeholder="e.g. 5">
</div>
</div>
<button id="btn-vent-show" class="btn-sm btn-primary" style="margin-bottom:12px;"><i class="fas fa-diagram-project"></i> Show Reference</button>
<div id="vent-result"></div>
</div>
<!-- ── SEIZURES / STATUS EPILEPTICUS ── -->
<div id="em-seizure" class="em-section" style="display:none;">
<h4 style="font-size:15px;font-weight:700;color:var(--g800);margin:0 0 4px;">Status Epilepticus</h4>
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">Time-based pathway — stabilize → 1st benzo → 2nd benzo → 2nd-line AED → refractory.</p>
<div class="calc-field" style="max-width:200px;margin-bottom:12px;">
<label>Weight (kg)</label>
<input type="number" id="seizure-weight" min="1" max="150" step="0.1" placeholder="e.g. 20">
</div>
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;">
<button id="btn-seizure-calc" class="btn-sm btn-primary"><i class="fas fa-diagram-project"></i> Show Pathway</button>
<button class="btn-sm btn-ghost" data-img-src="/img/epilepsy_eiic_pathway.png" data-img-title="Pediatric Status Epilepticus Pathway (reference)"><i class="fas fa-image"></i> View pathway image</button>
</div>
<div id="seizure-result"></div>
</div>
<!-- ── SEPSIS ── -->
<div id="em-sepsis" class="em-section" style="display:none;">
<h4 style="font-size:15px;font-weight:700;color:var(--g800);margin:0 0 4px;">Sepsis &amp; Fever Workup</h4>
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">Phoenix Sepsis Criteria (2024), age-based approach, first-hour bundle, and validated febrile-infant rules (PECARN / Aronson / Rochester / Step-by-Step).</p>
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;">
<div class="calc-field" style="flex:1;min-width:140px;max-width:200px;">
<label>Weight (kg)</label>
<input type="number" id="sepsis-weight" min="1" max="150" step="0.1" placeholder="e.g. 20">
</div>
<div class="calc-field" style="flex:1;min-width:180px;max-width:240px;">
<label>Age group</label>
<select id="sepsis-age">
<option value="neonate">Neonate (0-28 days)</option>
<option value="infant">Young infant (29 d - 3 mo)</option>
<option value="child" selected>Older child / adolescent (&gt;3 mo)</option>
</select>
</div>
</div>
<button id="btn-sepsis-show" class="btn-sm btn-primary" style="margin-bottom:12px;"><i class="fas fa-list-check"></i> Show Approach</button>
<div id="sepsis-result"></div>
</div>
<!-- ── ANAPHYLAXIS ── -->
<div id="em-anaphylaxis" class="em-section" style="display:none;">
<h4 style="font-size:15px;font-weight:700;color:var(--g800);margin:0 0 4px;">Anaphylaxis</h4>
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">Stepwise management with weight-based dosing.</p>
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;">
<div class="calc-field" style="flex:1;min-width:140px;max-width:200px;">
<label>Weight (kg)</label>
<input type="number" id="anaph-weight" min="1" max="150" step="0.1" placeholder="e.g. 25">
</div>
<div class="calc-field" style="flex:1;min-width:140px;max-width:200px;">
<label>Age Group</label>
<select id="anaph-age"><option value="infant">&lt;1 year</option><option value="child" selected>1-12 years</option><option value="adolescent">&gt;12 years</option></select>
</div>
</div>
<button id="btn-anaph-calc" class="btn-sm btn-primary" style="margin-bottom:12px;"><i class="fas fa-calculator"></i> Calculate Doses</button>
<div id="anaph-result"></div>
</div>
<!-- ── PROCEDURAL SEDATION ── -->
<div id="em-sedation" class="em-section" style="display:none;">
<h4 style="font-size:15px;font-weight:700;color:var(--g800);margin:0 0 4px;">Procedural Sedation</h4>
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">Sedation agents + reversal drugs.</p>
<div class="calc-field" style="max-width:200px;margin-bottom:12px;">
<label>Weight (kg)</label>
<input type="number" id="sed-weight" min="1" max="150" step="0.1" placeholder="e.g. 15">
</div>
<button id="btn-sed-calc" class="btn-sm btn-primary" style="margin-bottom:12px;"><i class="fas fa-calculator"></i> Calculate Doses</button>
<div id="sed-result"></div>
</div>
<!-- ── AGITATION ── -->
<div id="em-agitation" class="em-section" style="display:none;">
<h4 style="font-size:15px;font-weight:700;color:var(--g800);margin:0 0 4px;">Acute Agitation</h4>
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">Stepwise: verbal de-escalation → oral → IM/IV.</p>
<div class="calc-field" style="max-width:200px;margin-bottom:12px;">
<label>Weight (kg)</label>
<input type="number" id="agit-weight" min="1" max="150" step="0.1" placeholder="e.g. 30">
</div>
<button id="btn-agit-calc" class="btn-sm btn-primary" style="margin-bottom:12px;"><i class="fas fa-calculator"></i> Calculate Doses</button>
<div id="agit-result"></div>
</div>
<!-- ── ANTIEMETICS ── -->
<div id="em-antiemetics" class="em-section" style="display:none;">
<h4 style="font-size:15px;font-weight:700;color:var(--g800);margin:0 0 4px;">Antiemetics</h4>
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">Common pediatric antiemetic dosing with max doses and key cautions.</p>
<div class="calc-field" style="max-width:200px;margin-bottom:12px;">
<label>Weight (kg)</label>
<input type="number" id="emet-weight" min="1" max="150" step="0.1" placeholder="e.g. 20">
</div>
<button id="btn-emet-calc" class="btn-sm btn-primary" style="margin-bottom:12px;"><i class="fas fa-calculator"></i> Calculate Doses</button>
<div id="emet-result"></div>
</div>
<!-- ── ANTIMICROBIALS ── -->
<div id="em-antimicrobials" class="em-section" style="display:none;">
<h4 style="font-size:15px;font-weight:700;color:var(--g800);margin:0 0 4px;">Empiric Antimicrobials</h4>
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">Empiric regimens by age and infection type. Always tailor to local resistance, cultures, and severity.</p>
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;">
<div class="calc-field" style="flex:1;min-width:160px;">
<label>Age</label>
<select id="abx-age">
<option value="neonate">Neonate (0-28 days)</option>
<option value="infant">Infant (1-3 months)</option>
<option value="child">Child (&gt;3 months)</option>
</select>
</div>
<div class="calc-field" style="flex:1;min-width:200px;">
<label>Infection</label>
<select id="abx-infection">
<option value="sepsis">Sepsis / bacteremia</option>
<option value="meningitis">Meningitis</option>
<option value="pna">Community-acquired pneumonia</option>
<option value="uti">UTI / pyelonephritis</option>
<option value="skin">Skin / soft tissue</option>
<option value="ent">AOM / sinusitis / pharyngitis</option>
<option value="neutropenic">Febrile neutropenia</option>
<option value="ic">Intra-abdominal</option>
<option value="bone">Osteomyelitis / septic arthritis</option>
</select>
</div>
</div>
<button id="btn-abx-lookup" class="btn-sm btn-primary" style="margin-bottom:12px;"><i class="fas fa-search"></i> Look Up Regimen</button>
<div id="abx-result"></div>
</div>
<!-- ── BURNS ── -->
<div id="em-burns" class="em-section" style="display:none;">
<h4 style="font-size:15px;font-weight:700;color:var(--g800);margin:0 0 4px;">Burn Management</h4>
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">TBSA body-parts calculator (Lund-Browder age-adjusted) + Parkland fluid resuscitation. Count only 2nd-degree or deeper.</p>
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;">
<div class="calc-field" style="flex:1;min-width:130px;max-width:180px;">
<label>Weight (kg)</label>
<input type="number" id="burn-weight" min="1" max="150" step="0.1" placeholder="e.g. 20">
</div>
<div class="calc-field" style="flex:1;min-width:130px;max-width:180px;">
<label>Age group</label>
<select id="burn-age">
<option value="infant">Infant (&lt;1 yr)</option>
<option value="young" selected>1-5 years</option>
<option value="child">5-10 years</option>
<option value="adol">10-15 years</option>
<option value="adult">&gt;15 / adult</option>
</select>
</div>
<div class="calc-field" style="flex:1;min-width:130px;max-width:180px;">
<label>Override TBSA %</label>
<input type="number" id="burn-tbsa" min="0" max="100" step="0.5" placeholder="auto from body parts">
</div>
</div>
<div id="burn-bodyparts-wrapper" style="margin-bottom:12px;"></div>
<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px;">
<button id="btn-burn-calc" class="btn-sm btn-primary" type="button"><i class="fas fa-calculator"></i> Calculate Parkland</button>
<button id="btn-burn-reset" class="btn-sm btn-ghost" type="button">Reset body parts</button>
<span id="burn-tbsa-live" style="font-size:13px;font-weight:700;color:var(--blue-dark);"></span>
</div>
<div id="burn-result"></div>
</div>
<!-- ── TOXICOLOGY ── -->
<div id="em-toxicology" class="em-section" style="display:none;">
<h4 style="font-size:15px;font-weight:700;color:var(--g800);margin:0 0 4px;">Toxicology</h4>
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">Approach, decontamination, common ingestions with antidotes, dialyzable drugs reference.</p>
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;">
<div class="calc-field" style="flex:1;min-width:140px;max-width:200px;">
<label>Weight (kg)</label>
<input type="number" id="tox-weight" min="1" max="150" step="0.1" placeholder="e.g. 20">
</div>
<div class="calc-field" style="flex:1;min-width:200px;">
<label>Topic</label>
<select id="tox-topic">
<option value="approach">General approach + decontamination</option>
<option value="acetaminophen">Acetaminophen</option>
<option value="opioids">Opioids</option>
<option value="iron">Iron</option>
<option value="tca">TCAs</option>
<option value="bbccb">β-blocker / CCB</option>
<option value="benzo">Benzodiazepines</option>
<option value="organo">Organophosphates / carbamates</option>
<option value="salicylate">Salicylates</option>
<option value="etoh">Toxic alcohols</option>
<option value="dialyzable">Dialyzable drugs (ISTUMBLE)</option>
</select>
</div>
</div>
<button id="btn-tox-lookup" class="btn-sm btn-primary" style="margin-bottom:12px;"><i class="fas fa-search"></i> Look Up</button>
<div id="tox-result"></div>
</div>
<!-- ── TRAUMA ── -->
<div id="em-trauma" class="em-section" style="display:none;">
<h4 style="font-size:15px;font-weight:700;color:var(--g800);margin:0 0 4px;">Trauma</h4>
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">Primary / secondary survey, c-spine, massive transfusion, TXA.</p>
<div class="calc-field" style="max-width:200px;margin-bottom:12px;">
<label>Weight (kg)</label>
<input type="number" id="trauma-weight" min="1" max="150" step="0.1" placeholder="e.g. 30">
</div>
<button id="btn-trauma-show" class="btn-sm btn-primary" style="margin-bottom:12px;"><i class="fas fa-list"></i> Show Reference</button>
<div id="trauma-result"></div>
</div>
</div>
</div>
Reference in a new issue View git blame Copy permalink