| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>RTEdge.net – Nebulization Mastery</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/heroicons@2.0.13/dist/heroicons.js"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --bg-primary: #ffffff; |
| --bg-secondary: #f8fafc; |
| --bg-card: rgba(255,255,255,0.9); |
| --text-primary: #1e293b; |
| --text-secondary: #64748b; |
| --accent: #3b82f6; |
| --border: #e2e8f0; |
| --shadow: rgba(0,0,0,0.1); |
| } |
| |
| [data-theme="dark"] { |
| --bg-primary: #0f172a; |
| --bg-secondary: #1e293b; |
| --bg-card: rgba(30,41,59,0.8); |
| --text-primary: #f8fafc; |
| --text-secondary: #94a3b8; |
| --border: #334155; |
| --shadow: rgba(0,0,0,0.3); |
| } |
| |
| * { transition: background-color 0.3s, color 0.3s; } |
| |
| body { |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
| background: var(--bg-primary); |
| color: var(--text-primary); |
| } |
| |
| .card { |
| background: var(--bg-card); |
| border: 1px solid var(--border); |
| box-shadow: 0 4px 6px -1px var(--shadow); |
| border-radius: 16px; |
| backdrop-filter: blur(20px); |
| -webkit-backdrop-filter: blur(20px); |
| } |
| |
| .slide { |
| opacity: 0; |
| transform: translateY(20px); |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| .slide.active { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| |
| .btn-nav { |
| transition: all 0.2s; |
| background: var(--accent); |
| } |
| |
| .btn-nav:hover:not(:disabled) { |
| transform: translateY(-1px); |
| box-shadow: 0 4px 12px rgba(59,130,246,0.4); |
| } |
| |
| .btn-nav:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| } |
| |
| .traffic-light { |
| width: 16px; |
| height: 16px; |
| border-radius: 50%; |
| margin-right: 8px; |
| flex-shrink: 0; |
| } |
| |
| .green { background: #10b981; } |
| .yellow { background: #f59e0b; } |
| .red { background: #ef4444; } |
| |
| |
| .sr-only { |
| position: absolute; |
| width: 1px; |
| height: 1px; |
| padding: 0; |
| margin: -1px; |
| overflow: hidden; |
| clip: rect(0,0,0,0); |
| white-space: nowrap; |
| border: 0; |
| } |
| |
| .focus-visible:focus { |
| outline: 2px solid var(--accent); |
| outline-offset: 2px; |
| } |
| |
| .dark-toggle { |
| background: var(--bg-secondary); |
| border: 1px solid var(--border); |
| padding: 8px; |
| border-radius: 50%; |
| cursor: pointer; |
| transition: all 0.2s; |
| } |
| |
| .dark-toggle:hover { |
| transform: scale(1.1); |
| } |
| |
| .progress-bar { |
| background: var(--bg-secondary); |
| height: 4px; |
| border-radius: 2px; |
| overflow: hidden; |
| } |
| |
| .progress-fill { |
| background: var(--accent); |
| height: 100%; |
| transition: width 0.4s ease; |
| } |
| |
| .nav-item { |
| padding: 12px 16px; |
| border-radius: 8px; |
| transition: all 0.2s; |
| text-align: left; |
| width: 100%; |
| } |
| |
| .nav-item:hover { |
| background: var(--bg-secondary); |
| } |
| |
| .nav-item.active { |
| background: var(--accent); |
| color: white; |
| } |
| |
| .skip-link { |
| position: absolute; |
| top: -40px; |
| left: 0; |
| background: var(--accent); |
| color: white; |
| padding: 8px; |
| text-decoration: none; |
| border-radius: 0 0 4px 0; |
| } |
| |
| .skip-link:focus { |
| top: 0; |
| } |
| |
| @media (max-width: 768px) { |
| .card { |
| border-radius: 12px; |
| } |
| } |
| </style> |
| </head> |
| <body class="bg-primary"> |
| <a href="#main-content" class="skip-link">Skip to main content</a> |
|
|
| |
| <header class="p-4 md:p-6 flex justify-between items-center border-b border-border"> |
| <h1 class="text-xl md:text-2xl font-bold" style="color: var(--accent);"> |
| RTEdge.net <span class="text-secondary ml-2 text-sm md:text-base font-normal">Nebulization Mastery</span> |
| </h1> |
| <div class="flex items-center space-x-3"> |
| <span class="text-sm text-secondary hidden md:block" aria-live="polite"> |
| Slide <span id="currentSlide">1</span> of <span id="totalSlides">17</span> |
| </span> |
| <button id="themeToggle" class="dark-toggle" aria-label="Toggle dark mode"> |
| <svg id="themeIcon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /> |
| </svg> |
| </button> |
| <button id="menuBtn" class="md:hidden p-2 rounded-lg hover:bg-secondary" aria-label="Toggle navigation"> |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> |
| </svg> |
| </button> |
| </div> |
| </header> |
|
|
| |
| <div class="px-4 md:px-6 py-3"> |
| <div class="progress-bar"> |
| <div id="progressBar" class="progress-fill" style="width:6.25%"></div> |
| </div> |
| </div> |
|
|
| |
| <main class="flex-grow flex flex-col md:flex-row px-4 md:px-6 pb-6 gap-4 overflow-hidden" id="main-content"> |
| |
| <aside id="sidebar" class="hidden md:block w-full md:w-72 shrink-0"> |
| <div class="card p-4 h-full overflow-y-auto"> |
| <nav> |
| <ul id="navList" class="space-y-1 text-sm"> |
| |
| </ul> |
| </nav> |
| </div> |
| </aside> |
|
|
| |
| <section class="flex-grow flex flex-col" aria-live="polite"> |
| <div class="card p-6 md:p-8 flex-grow overflow-y-auto"> |
| <main id="slideContainer"> |
| |
| </main> |
| </div> |
|
|
| |
| <nav class="mt-4 flex justify-between items-center" aria-label="Slide navigation"> |
| <button id="prevBtn" class="btn-nav text-white px-4 py-2 rounded-lg shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2" aria-label="Previous slide"> |
| <span aria-hidden="true">←</span> Previous |
| </button> |
| <button id="nextBtn" class="btn-nav text-white px-4 py-2 rounded-lg shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2" aria-label="Next slide"> |
| Next <span aria-hidden="true">→</span> |
| </button> |
| </nav> |
| </section> |
| </main> |
|
|
| |
| <script> |
| // Theme management |
| const themeToggle = document.getElementById('themeToggle'); |
| const themeIcon = document.getElementById('themeIcon'); |
| const html = document.documentElement; |
| |
| // Check for saved theme preference or default to light |
| const savedTheme = localStorage.getItem('theme') || 'light'; |
| html.setAttribute('data-theme', savedTheme); |
| updateThemeIcon(savedTheme); |
| |
| themeToggle.addEventListener('click', () => { |
| const currentTheme = html.getAttribute('data-theme'); |
| const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; |
| html.setAttribute('data-theme', newTheme); |
| localStorage.setItem('theme', newTheme); |
| updateThemeIcon(newTheme); |
| }); |
| |
| function updateThemeIcon(theme) { |
| if (theme === 'dark') { |
| themeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707" />'; |
| } else { |
| themeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />'; |
| } |
| } |
| |
| // Keyboard navigation |
| document.addEventListener('keydown', (e) => { |
| if (e.key === 'ArrowLeft') goToSlide(current - 1); |
| if (e.key === 'ArrowRight') goToSlide(current + 1); |
| if (e.key === 'Home') goToSlide(0); |
| if (e.key === 'End') goToSlide(total - 1); |
| }); |
| |
| const slides = [ |
| /* 1 */ ` |
| <h2 class="text-2xl md:text-3xl font-bold text-sky-600 mb-4">🎯 Session Overview</h2> |
| <p class="mb-2 text-lg font-semibold">Duration: <span class="text-sky-600">30 minutes</span></p> |
| <p class="mb-4">Target Audience: Nursing students and healthcare professionals</p> |
| <p class="mb-4 font-medium">Teaching Method: Interactive presentation with demonstrations</p> |
| <div class="bg-sky-50 border-l-4 border-sky-500 p-4 mb-4"> |
| <p class="font-semibold text-sky-700 mb-1">💡 Did You Know?</p> |
| <p class="text-sm text-slate-700">Nebulization therapy is used by millions worldwide for direct lung medication delivery, offering rapid relief with minimal systemic side effects.</p> |
| </div> |
| <p class="text-lg font-bold text-sky-700">🚀 Get Ready to Master Life-Saving Skills!</p> |
| `, |
| /* 2 */ ` |
| <h2 class="text-2xl md:text-3xl font-bold text-sky-600 mb-4">By the end of this session, you will be able to:</h2> |
| <ul class="list-disc list-inside space-y-2 text-slate-800"> |
| <li><strong>Define</strong> nebulization and identify its three main types</li> |
| <li><strong>Execute</strong> the B.A.S.I.C. procedure safely and effectively</li> |
| <li><strong>Recognize</strong> indications, contraindications, and complications using the Traffic Light System</li> |
| <li><strong>Calculate</strong> appropriate medication dosages for different patient groups</li> |
| <li><strong>Demonstrate</strong> proper nursing responsibilities and patient education</li> |
| <li><strong>Evaluate</strong> advantages and limitations in clinical practice</li> |
| </ul> |
| <div class="mt-6 p-4 bg-slate-100 rounded-lg"> |
| <p class="font-bold text-slate-800">🔑 Key Framework: B.A.S.I.C. Method</p> |
| <p class="text-sm text-slate-700 mt-1"> |
| <strong>B</strong>aseline assessment → <strong>A</strong>ssemble equipment → <strong>S</strong>tart therapy → <strong>I</strong>nstruct patient → <strong>C</strong>heck response |
| </p> |
| </div> |
| `, |
| /* 3 */ ` |
| <h2 class="text-2xl md:text-3xl font-bold text-sky-600 mb-4">🔬 Scientific Definition</h2> |
| <p class="mb-4 text-slate-800"> |
| <strong>Nebulization</strong>: A medical procedure that converts liquid medication into fine aerosol mist (1-5 micrometers) for direct inhalation into the respiratory tract via a nebulizer device. |
| </p> |
| <div class="space-y-4"> |
| <div> |
| <p class="font-bold text-slate-800">⚛️ Physics Behind It</p> |
| <p class="text-sm text-slate-700">Venturi Principle: High-velocity airflow creates vacuum → liquid becomes fine mist → particles penetrate deep into alveoli</p> |
| </div> |
| <div> |
| <p class="font-bold text-slate-800">🎯 Why It Works</p> |
| <p class="text-sm text-slate-700">Direct lung delivery bypasses gastrointestinal system, providing rapid onset (minutes vs hours) with minimal systemic effects</p> |
| </div> |
| <div> |
| <p class="font-bold text-slate-800">💡 Clinical Advantage</p> |
| <p class="text-sm text-slate-700">Higher local drug concentrations in lungs while reducing systemic side effects</p> |
| </div> |
| </div> |
| `, |
| /* 4 */ ` |
| <h2 class="text-2xl md:text-3xl font-bold text-sky-600 mb-4">Nebulizer Types</h2> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full text-sm text-left text-slate-700"> |
| <thead class="bg-slate-100"> |
| <tr> |
| <th class="p-2 font-semibold">Type</th> |
| <th class="p-2 font-semibold">Mechanism</th> |
| <th class="p-2 font-semibold">Best Use</th> |
| <th class="p-2 font-semibold">Memory Aid</th> |
| <th class="p-2 font-semibold">Key Limitation</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr class="border-b"> |
| <td class="p-2 font-bold">Jet (Pneumatic)</td> |
| <td class="p-2">Compressed air/O₂ (6-8 L/min)</td> |
| <td class="p-2">Hospital acute care</td> |
| <td class="p-2 italic">Just Air</td> |
| <td class="p-2">Noisy (60 dB), 5-15 min</td> |
| </tr> |
| <tr class="border-b"> |
| <td class="p-2 font-bold">Ultrasonic</td> |
| <td class="p-2">Sound waves (1-3 MHz)</td> |
| <td class="p-2">Quiet home use</td> |
| <td class="p-2 italic">Ultra-Quiet</td> |
| <td class="p-2">Heat damages proteins</td> |
| </tr> |
| <tr> |
| <td class="p-2 font-bold">Mesh</td> |
| <td class="p-2">Vibrating mesh/plate</td> |
| <td class="p-2">Portable, efficient</td> |
| <td class="p-2 italic">Most Advanced</td> |
| <td class="p-2">Expensive, needs cleaning</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="mt-4 p-3 bg-red-100 border-l-4 border-red-500 text-red-700 font-semibold"> |
| ⚠️ Critical Remember: J-U-M! Jet for hospitals • Ultrasonic for home • Mesh for efficiency |
| </div> |
| `, |
| /* 5 */ ` |
| <h2 class="text-2xl md:text-3xl font-bold text-sky-600 mb-4">🔬 Primary Goal & Applications</h2> |
| <p class="mb-4 font-bold text-slate-800">Direct lung delivery → Higher local concentration → Fewer systemic effects</p> |
| <div class="grid md:grid-cols-2 gap-4 text-sm"> |
| <div> |
| <p class="font-bold text-slate-800 mb-1">🫁 Bronchodilation</p> |
| <p class="text-slate-700">Opens airways, relieves wheezing <em>(Salbutamol)</em></p> |
| </div> |
| <div> |
| <p class="font-bold text-slate-800 mb-1">🔥 Anti-Inflammatory</p> |
| <p class="text-slate-700">Reduces mucosal swelling <em>(Budesonide)</em></p> |
| </div> |
| <div> |
| <p class="font-bold text-slate-800 mb-1">💧 Mucociliary Clearance</p> |
| <p class="text-slate-700">Hydrates airways <em>(Hypertonic saline)</em></p> |
| </div> |
| <div> |
| <p class="font-bold text-slate-800 mb-1">🦠 Infection Control</p> |
| <p class="text-slate-700">Local antibiotics/antivirals</p> |
| </div> |
| </div> |
| <p class="mt-6 text-slate-800 font-semibold">👥 Universal Access: Perfect for infants, elderly, cognitively impaired, or acute distress</p> |
| `, |
| /* 6 */ ` |
| <h2 class="text-2xl md:text-3xl font-bold text-sky-600 mb-4">Indications</h2> |
| <div class="space-y-4"> |
| <div> |
| <h3 class="text-lg font-bold text-red-600">🚨 ACUTE CONDITIONS</h3> |
| <ul class="list-disc list-inside ml-4 text-sm text-slate-700"> |
| <li>Asthma attacks (SpO₂ <92%)</li> |
| <li>Acute bronchospasm</li> |
| <li>Anaphylaxis with respiratory distress</li> |
| <li>COPD exacerbations</li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-bold text-green-600">🟢 CHRONIC CONDITIONS</h3> |
| <ul class="list-disc list-inside ml-4 text-sm text-slate-700"> |
| <li>Cystic Fibrosis</li> |
| <li>Bronchiectasis</li> |
| <li>Post-extubation airway management</li> |
| <li>RSV bronchiolitis in children</li> |
| </ul> |
| </div> |
| </div> |
| <div class="mt-6 p-4 bg-slate-100 rounded-lg"> |
| <p class="font-bold text-slate-800">📋 Case Study</p> |
| <p class="text-sm text-slate-700">65-year-old COPD, RR 32, SpO₂ 88%, wheezing → Immediate nebulize Salbutamol!</p> |
| </div> |
| `, |
| /* 7 */ ` |
| <h2 class="text-2xl md:text-3xl font-bold text-sky-600 mb-4">Contraindications</h2> |
| <div class="space-y-4"> |
| <div> |
| <h3 class="text-lg font-bold text-red-700">❌ ABSOLUTE</h3> |
| <ul class="list-disc list-inside ml-4 text-sm text-slate-700"> |
| <li>Known drug hypersensitivity</li> |
| <li>Active respiratory tract bleeding</li> |
| <li>Severe heart failure with tachycardia >120 bpm</li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-bold text-yellow-600">⚠️ RELATIVE</h3> |
| <ul class="list-disc list-inside ml-4 text-sm text-slate-700"> |
| <li>Pulmonary edema</li> |
| <li>Purulent tonsillitis</li> |
| <li>Severe anxiety</li> |
| <li>Unconscious (non-ventilated)</li> |
| </ul> |
| </div> |
| </div> |
| <div class="mt-6 p-3 bg-red-100 border-l-4 border-red-500 text-red-700 font-semibold"> |
| 🔴 LIFE-THREATENING: COPD patients use AIR, NEVER oxygen as driving gas! |
| </div> |
| `, |
| /* 8 */ ` |
| <h2 class="text-2xl md:text-3xl font-bold text-sky-600 mb-4">📝 Equipment Checklist</h2> |
| <div class="space-y-4 text-sm"> |
| <div> |
| <h3 class="font-bold text-slate-800">🔧 Core Equipment</h3> |
| <ul class="list-disc list-inside ml-4 text-slate-700"> |
| <li>Nebulizer machine, medication cup, mouthpiece/face mask, tubing</li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="font-bold text-slate-800">💊 Medications & Supplies</h3> |
| <ul class="list-disc list-inside ml-4 text-slate-700"> |
| <li>Prescribed meds, sterile saline 0.9%, sterile syringes, PPE</li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="font-bold text-slate-800">📊 Monitoring</h3> |
| <ul class="list-disc list-inside ml-4 text-slate-700"> |
| <li>Pulse oximeter, stethoscope, BP monitor, emergency meds</li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="font-bold text-slate-800">🧽 Cleaning Supplies</h3> |
| <ul class="list-disc list-inside ml-4 text-slate-700"> |
| <li>Antiseptic solution, sterile water, towels, disposal bags</li> |
| </ul> |
| </div> |
| </div> |
| <p class="mt-4 p-3 bg-red-100 border-l-4 border-red-500 text-red-700 font-semibold"> |
| ONLY use sterile normal saline for dilution ❌ NEVER tap water or water for injection |
| </p> |
| `, |
| /* 9 */ ` |
| <h2 class="text-2xl md:text-3xl font-bold text-sky-600 mb-4">🔍 B.A.S.I.C. Framework</h2> |
| <div class="space-y-3 text-sm"> |
| <div> |
| <p class="font-bold text-slate-800">B - Baseline Assessment</p> |
| <ul class="list-disc list-inside ml-4 text-slate-700"> |
| <li>Verify order, vitals, explain procedure</li> |
| </ul> |
| </div> |
| <div> |
| <p class="font-bold text-slate-800">A - Assemble Equipment</p> |
| <ul class="list-disc list-inside ml-4 text-slate-700"> |
| <li>Connect tubing, add meds, dilute to 3-5ml</li> |
| </ul> |
| </div> |
| <div> |
| <p class="font-bold text-slate-800">S - Start Therapy</p> |
| <ul class="list-disc list-inside ml-4 text-slate-700"> |
| <li>Position upright 45-90°, mask seal, 6-8 L/min</li> |
| </ul> |
| </div> |
| <div> |
| <p class="font-bold text-slate-800">I - Instruct Patient</p> |
| <ul class="list-disc list-inside ml-4 text-slate-700"> |
| <li>"Breathe slowly, hold 2-3 sec, exhale through nose"</li> |
| </ul> |
| </div> |
| <div> |
| <p class="font-bold text-slate-800">C - Check Response</p> |
| <ul class="list-disc list-inside ml-4 text-slate-700"> |
| <li>Monitor vitals Q2min, watch complications, document</li> |
| </ul> |
| </div> |
| </div> |
| `, |
| /* 10 */ ` |
| <h2 class="text-2xl md:text-3xl font-bold text-sky-600 mb-4">🚦 Traffic Light System</h2> |
| <div class="space-y-4"> |
| <div> |
| <div class="flex items-center mb-1"><span class="traffic-light green"></span><span class="font-bold text-green-700">GREEN - Continue</span></div> |
| <ul class="list-disc list-inside ml-8 text-sm text-slate-700"> |
| <li>Tremors, dry mouth, bad taste, mild headache → reassure</li> |
| </ul> |
| </div> |
| <div> |
| <div class="flex items-center mb-1"><span class="traffic-light yellow"></span><span class="font-bold text-yellow-700">YELLOW - Pause</span></div> |
| <ul class="list-disc list-inside ml-8 text-sm text-slate-700"> |
| <li>Tachycardia >100, throat irritation, dizziness → pause & assess</li> |
| </ul> |
| </div> |
| <div> |
| <div class="flex items-center mb-1"><span class="traffic-light red"></span><span class="font-bold text-red-700">RED - STOP</span></div> |
| <ul class="list-disc list-inside ml-8 text-sm text-slate-700"> |
| <li>Severe bronchospasm, chest pain, allergy → STOP, call help</li> |
| </ul> |
| </div> |
| </div> |
| `, |
| /* 11 */ ` |
| <h2 class="text-2xl md:text-3xl font-bold text-sky-600 mb-4">💊 Dosage Guide</h2> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full text-xs md:text-sm text-left text-slate-700"> |
| <thead class="bg-slate-100"> |
| <tr> |
| <th class="p-2 font-semibold">Drug</th> |
| <th class="p-2 font-semibold">Adult</th> |
| <th class="p-2 font-semibold">Pediatric</th> |
| <th class="p-2 font-semibold">Dilution</th> |
| <th class="p-2 font-semibold">Frequency</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr class="border-b"><td class="p-2">Salbutamol</td><td class="p-2">2.5-5mg</td><td class="p-2">0.15mg/kg</td><td class="p-2">NS to 3-5ml</td><td class="p-2">Q4-6H PRN</td></tr> |
| <tr class="border-b"><td class="p-2">Ipratropium</td><td class="p-2">500mcg</td><td class="p-2">250mcg</td><td class="p-2">NS to 3-5ml</td><td class="p-2">Q6-8H</td></tr> |
| <tr class="border-b"><td class="p-2">Combination</td><td class="p-2">2.5/0.5mg</td><td class="p-2">1.25/0.25mg</td><td class="p-2">Ready to use</td><td class="p-2">Q6H</td></tr> |
| <tr class="border-b"><td class="p-2">Budesonide</td><td class="p-2">1-2mg</td><td class="p-2">0.5-1mg</td><td class="p-2">No dilution</td><td class="p-2">BID</td></tr> |
| <tr><td class="p-2">Hypertonic Saline</td><td class="p-2">3-7% 4ml</td><td class="p-2">3-7% 2-4ml</td><td class="p-2">No dilution</td><td class="p-2">BID-QID</td></tr> |
| </tbody> |
| </table> |
| </div> |
| <p class="mt-4 text-xs text-slate-600 italic">Quick Memory: Salbutamol 2.5-5mg acute, Budesonide never dilute, HS watch bronchospasm</p> |
| `, |
| /* 12 */ ` |
| <h2 class="text-2xl md:text-3xl font-bold text-sky-600 mb-4">Nursing Responsibilities</h2> |
| <div class="grid md:grid-cols-2 gap-4 text-sm"> |
| <div> |
| <h3 class="font-bold text-slate-800 mb-1">⏱️ DURING</h3> |
| <ul class="list-disc list-inside text-slate-700"> |
| <li>Verify 5 rights</li> |
| <li>Position upright 45-90°</li> |
| <li>Mask seal</li> |
| <li>Monitor vitals Q2min</li> |
| <li>Stay with patient</li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="font-bold text-slate-800 mb-1">📋 AFTER</h3> |
| <ul class="list-disc list-inside text-slate-700"> |
| <li>Reassess respiratory status</li> |
| <li>Oral rinse after steroids</li> |
| <li>Encourage coughing</li> |
| <li>Clean equipment</li> |
| <li>Document SpO₂ change</li> |
| </ul> |
| </div> |
| </div> |
| <div class="mt-6 p-3 bg-sky-100 rounded-lg"> |
| <p class="font-bold text-sky-800">🔑 Critical Points</p> |
| <ul class="list-disc list-inside text-xs text-sky-700"> |
| <li>Mask seal prevents 50% waste</li> |
| <li>After steroids rinse mouth</li> |
| <li>Document SpO₂ change</li> |
| <li>Teach clean-and-dry rule</li> |
| </ul> |
| </div> |
| `, |
| /* 13 */ ` |
| <h2 class="text-2xl md:text-3xl font-bold text-sky-600 mb-4">Advantages</h2> |
| <div class="space-y-3 text-sm"> |
| <p><strong>⚡ Rapid Action</strong> – Onset in minutes vs hours</p> |
| <p><strong>🎯 Targeted Therapy</strong> – Higher local concentration, fewer side effects</p> |
| <p><strong>👥 Universal Access</strong> – No coordination required</p> |
| <p><strong>💨 Oxygen Integration</strong> – Simultaneous O₂ delivery</p> |
| <p><strong>📈 Large Dose</strong> – Continuous nebulization possible</p> |
| <p><strong>💊 Drug Versatility</strong> – Antibiotics, steroids, bronchodilators</p> |
| </div> |
| <p class="mt-6 p-3 bg-sky-100 rounded-lg font-semibold text-slate-800">🏆 Nebulizers succeed where inhalers fail – perfect for emergencies, pediatrics, elderly.</p> |
| `, |
| /* 14 */ ` |
| <h2 class="text-2xl md:text-3xl font-bold text-sky-600 mb-4">Limitations</h2> |
| <div class="space-y-3 text-sm"> |
| <p><strong>⏰ Time-Consuming</strong> – 5-15 min vs 2 min MDI</p> |
| <p><strong>🔊 Noise Issues</strong> – 60 dB jet nebulizers</p> |
| <p><strong>🦠 Infection Risk</strong> – Contaminated equipment</p> |
| <p><strong>💸 Drug Waste</strong> – 50% lost during exhalation</p> |
| <p><strong>💰 Equipment Cost</strong> – Mesh $150+ vs $20 jet</p> |
| <p><strong>🔌 Power Dependency</strong> – Needs electricity</p> |
| </div> |
| <p class="mt-6 p-3 bg-slate-100 rounded-lg font-semibold text-slate-800">Despite limitations, benefits outweigh disadvantages in appropriate patients.</p> |
| `, |
| /* 15 */ ` |
| <h2 class="text-2xl md:text-3xl font-bold text-sky-600 mb-4">🚨 Safety Summary</h2> |
| <div class="space-y-4"> |
| <div> |
| <h3 class="font-bold text-slate-800">MEDICATION SAFETY</h3> |
| <ul class="list-disc list-inside ml-4 text-sm text-slate-700"> |
| <li>Double-check 5 rights</li> |
| <li>ONLY sterile saline dilution</li> |
| <li>Add drugs immediately before use</li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="font-bold text-slate-800">EQUIPMENT SAFETY</h3> |
| <ul class="list-disc list-inside ml-4 text-sm text-slate-700"> |
| <li>Mouthpiece for steroids</li> |
| <li>Keep nebulizer cup upright</li> |
| <li>Check for cracks</li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="font-bold text-slate-800">PATIENT-SPECIFIC</h3> |
| <p class="text-sm text-slate-700">COPD → AIR | Asthma → OXYGEN</p> |
| </div> |
| </div> |
| <p class="mt-4 p-3 bg-red-100 border-l-4 border-red-500 text-red-700 font-semibold">🔴 Monitor first 5 minutes – most complications occur here!</p> |
| `, |
| /* 16 */ ` |
| <h2 class="text-2xl md:text-3xl font-bold text-sky-600 mb-4">🎯 Key Takeaways</h2> |
| <div class="space-y-3 text-sm"> |
| <p><strong>🔑 Core Frameworks:</strong> B.A.S.I.C. & Traffic Light System</p> |
| <p><strong>🚦 Critical Distinctions:</strong> COPD=AIR, Asthma=O₂</p> |
| <p><strong>👩⚕️ Nursing Priorities:</strong> Mask seal, mouth rinse, vitals, documentation, education</p> |
| <p class="mt-4 text-slate-700 italic">"You're not just operating a machine – you're the safety guardian ensuring medications reach the lungs effectively."</p> |
| </div> |
| `, |
| /* 17 */ ` |
| <h2 class="text-2xl md:text-3xl font-bold text-sky-600 mb-4">🏆 Congratulations!</h2> |
| <div class="space-y-3 text-sm"> |
| <p>You've completed nebulization therapy training and can now:</p> |
| <ul class="list-disc list-inside ml-4 text-slate-700"> |
| <li>Safely perform procedures</li> |
| <li>Recognize & manage complications</li> |
| <li>Educate patients & families</li> |
| <li>Make critical clinical decisions</li> |
| </ul> |
| <p class="mt-4 p-3 bg-sky-100 rounded-lg font-semibold text-slate-800">"Every nebulization you perform correctly can prevent an ICU admission and save lives."</p> |
| <p class="mt-4 text-slate-700 font-bold">Thank you for your dedication to excellence in patient care!</p> |
| </div> |
| ` |
| ]; |
| |
| // Populate sidebar |
| const navTitles = [ |
| "Session Overview", |
| "Learning Objectives", |
| "Scientific Definition", |
| "Nebulizer Types", |
| "Primary Goal", |
| "Indications", |
| "Contraindications", |
| "Equipment Checklist", |
| "B.A.S.I.C. Framework", |
| "Traffic Light System", |
| "Dosage Guide", |
| "Nursing Responsibilities", |
| "Advantages", |
| "Limitations", |
| "Safety Summary", |
| "Key Takeaways", |
| "Congratulations!" |
| ]; |
| const navList = document.getElementById('navList'); |
| navTitles.forEach((title, i) => { |
| const li = document.createElement('li'); |
| li.innerHTML = `<button class="w-full text-left p-2 rounded hover:bg-sky-100" onclick="goToSlide(${i})">${i + 1}. ${title}</button>`; |
| navList.appendChild(li); |
| }); |
| |
| // Navigation |
| let current = 0; |
| const total = slides.length; |
| document.getElementById('totalSlides').textContent = total; |
| |
| function render() { |
| document.getElementById('currentSlide').textContent = current + 1; |
| document.getElementById('progressBar').style.width = ((current + 1) / total * 100) + '%'; |
| document.getElementById('slideContainer').innerHTML = slides[current]; |
| document.getElementById('prevBtn').disabled = current === 0; |
| document.getElementById('nextBtn').disabled = current === total - 1; |
| } |
| |
| function goToSlide(index) { |
| if (index >= 0 && index < total) { |
| current = index; |
| render(); |
| } |
| } |
| |
| document.getElementById('prevBtn').addEventListener('click', () => goToSlide(current - 1)); |
| document.getElementById('nextBtn').addEventListener('click', () => goToSlide(current + 1)); |
| |
| // Mobile menu toggle |
| document.getElementById('menuBtn').addEventListener('click', () => { |
| const sidebar = document.getElementById('sidebar'); |
| sidebar.classList.toggle('hidden'); |
| sidebar.classList.toggle('block'); |
| }); |
| |
| // Init |
| render(); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=faisalhr1997/nebulizer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
