Spaces:

faisalhr1997
/

nebulizer

Running

App Files Files Community

faisalhr1997 commited on Aug 26, 2025

Commit

1d0860e

verified ·

1 Parent(s): 27ebb6f

make a modern minimal looking with dark and light mode toggle with god tier ui ux for a presentation website with accessibility tools tailored towards presentation - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +721 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Nebulizer
-emoji: 📚
-colorFrom: pink
 colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: nebulizer
+emoji: 🐳
+colorFrom: green
 colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,721 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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; }
+    /* Accessibility */
+    .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 -->
+  <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>
+  <!-- Progress Bar -->
+  <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 Content -->
+  <main class="flex-grow flex flex-col md:flex-row px-4 md:px-6 pb-6 gap-4 overflow-hidden" id="main-content">
+    <!-- Sidebar Navigation -->
+    <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">
+            <!-- JS will populate -->
+          </ul>
+        </nav>
+      </div>
+    </aside>
+    <!-- Slide Content -->
+    <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">
+          <!-- Slides will be injected here -->
+        </main>
+      </div>
+      <!-- Navigation Controls -->
+      <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>
+  <!-- Scripts -->
+  <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₂ &lt;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 &gt;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 &gt;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>