Upload folder using huggingface_hub

index.html

@@ -88,1253 +88,4 @@
 
     /* Header */
     header {
-      background: linear-gradient(135deg, rgba(0, 51, 102, 0.9), rgba(0, 20, 40, 0.9));
-      border: 1px solid var(--primary-blue);
-      border-radius: 15px;
-      padding: 20px;
-      margin-bottom: 30px;
-      box-shadow: 0 0 30px rgba(0, 212, 255, 0.5),
-        inset 0 0 20px rgba(0, 212, 255, 0.1);
-      backdrop-filter: blur(10px);
-      position: relative;
-      overflow: hidden;
-    }
-
-    header::before {
-      content: '';
-      position: absolute;
-      top: -50%;
-      left: -50%;
-      width: 200%;
-      height: 200%;
-      background: linear-gradient(45deg, transparent, var(--primary-blue), transparent);
-      opacity: 0.1;
-      animation: rotate 10s linear infinite;
-    }
-
-    @keyframes rotate {
-      0% {
-        transform: rotate(0deg);
-      }
-
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-
-    .header-content {
-      position: relative;
-      z-index: 2;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      flex-wrap: wrap;
-      gap: 20px;
-    }
-
-    h1 {
-      font-size: 2.5em;
-      text-shadow: 0 0 20px var(--primary-blue),
-        0 0 40px var(--primary-blue);
-      letter-spacing: 2px;
-      animation: pulse 2s ease-in-out infinite;
-    }
-
-    @keyframes pulse {
-
-      0%,
-      100% {
-        opacity: 1;
-      }
-
-      50% {
-        opacity: 0.8;
-      }
-    }
-
-    .status-bar {
-      display: flex;
-      gap: 20px;
-      align-items: center;
-    }
-
-    .status-indicator {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 8px 15px;
-      background: rgba(0, 212, 255, 0.1);
-      border: 1px solid var(--primary-blue);
-      border-radius: 20px;
-      font-size: 0.9em;
-    }
-
-    .status-dot {
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      animation: blink 2s infinite;
-    }
-
-    .status-dot.active {
-      background: var(--success);
-      box-shadow: 0 0 10px var(--success);
-    }
-
-    @keyframes blink {
-
-      0%,
-      100% {
-        opacity: 1;
-      }
-
-      50% {
-        opacity: 0.3;
-      }
-    }
-
-    /* Main grid layout */
-    .main-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-      gap: 25px;
-      margin-bottom: 30px;
-    }
-
-    /* Panel styles */
-    .panel {
-      background: var(--panel-bg);
-      border: 1px solid var(--primary-blue);
-      border-radius: 15px;
-      padding: 20px;
-      position: relative;
-      overflow: hidden;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      backdrop-filter: blur(10px);
-      box-shadow: 0 0 20px rgba(0, 212, 255, 0.3),
-        inset 0 0 10px rgba(0, 212, 255, 0.1);
-    }
-
-    .panel:hover {
-      transform: translateY(-5px);
-      box-shadow: 0 10px 40px rgba(0, 212, 255, 0.5),
-        inset 0 0 20px rgba(0, 212, 255, 0.2);
-    }
-
-    .panel::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: -100%;
-      width: 100%;
-      height: 2px;
-      background: linear-gradient(90deg, transparent, var(--glow-blue), transparent);
-      animation: scan 3s linear infinite;
-    }
-
-    @keyframes scan {
-      0% {
-        left: -100%;
-      }
-
-      100% {
-        left: 100%;
-      }
-    }
-
-    .panel-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 15px;
-      padding-bottom: 10px;
-      border-bottom: 1px solid rgba(0, 212, 255, 0.3);
-    }
-
-    .panel-title {
-      font-size: 1.3em;
-      font-weight: bold;
-      text-shadow: 0 0 10px var(--primary-blue);
-    }
-
-    .panel-icon {
-      width: 30px;
-      height: 30px;
-      background: radial-gradient(circle, var(--primary-blue), transparent);
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 1.2em;
-    }
-
-    /* Expanded panel */
-    .panel.expanded {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 90%;
-      max-width: 900px;
-      height: 80vh;
-      z-index: 1000;
-      overflow-y: auto;
-      animation: expandIn 0.3s ease;
-    }
-
-    @keyframes expandIn {
-      from {
-        opacity: 0;
-        transform: translate(-50%, -50%) scale(0.8);
-      }
-
-      to {
-        opacity: 1;
-        transform: translate(-50%, -50%) scale(1);
-      }
-    }
-
-    .close-btn {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      width: 30px;
-      height: 30px;
-      background: var(--critical);
-      border: none;
-      border-radius: 50%;
-      color: white;
-      font-size: 1.2em;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      z-index: 1001;
-    }
-
-    .close-btn:hover {
-      transform: rotate(90deg) scale(1.1);
-      box-shadow: 0 0 20px var(--critical);
-    }
-
-    /* Graph container */
-    .graph-container {
-      width: 100%;
-      height: 200px;
-      background: rgba(0, 10, 20, 0.5);
-      border: 1px solid rgba(0, 212, 255, 0.3);
-      border-radius: 10px;
-      margin: 15px 0;
-      position: relative;
-      overflow: hidden;
-    }
-
-    canvas {
-      width: 100%;
-      height: 100%;
-    }
-
-    /* Control sliders */
-    .control-group {
-      margin: 15px 0;
-    }
-
-    .control-label {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 8px;
-      font-size: 0.9em;
-      color: var(--primary-blue);
-    }
-
-    .slider {
-      width: 100%;
-      height: 6px;
-      background: linear-gradient(90deg, var(--dark-blue), var(--primary-blue));
-      border-radius: 3px;
-      outline: none;
-      -webkit-appearance: none;
-      position: relative;
-    }
-
-    .slider::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      appearance: none;
-      width: 20px;
-      height: 20px;
-      background: radial-gradient(circle, white, var(--primary-blue));
-      border: 2px solid var(--primary-blue);
-      border-radius: 50%;
-      cursor: pointer;
-      box-shadow: 0 0 15px var(--primary-blue);
-      transition: all 0.3s ease;
-    }
-
-    .slider::-webkit-slider-thumb:hover {
-      transform: scale(1.2);
-      box-shadow: 0 0 25px var(--glow-blue);
-    }
-
-    .slider::-moz-range-thumb {
-      width: 20px;
-      height: 20px;
-      background: radial-gradient(circle, white, var(--primary-blue));
-      border: 2px solid var(--primary-blue);
-      border-radius: 50%;
-      cursor: pointer;
-      box-shadow: 0 0 15px var(--primary-blue);
-    }
-
-    /* Mode cards */
-    .mode-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 15px;
-      margin-top: 20px;
-    }
-
-    .mode-card {
-      background: rgba(0, 51, 102, 0.3);
-      border: 1px solid var(--primary-blue);
-      border-radius: 10px;
-      padding: 15px;
-      text-align: center;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      position: relative;
-      overflow: hidden;
-    }
-
-    .mode-card::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 0;
-      height: 0;
-      background: radial-gradient(circle, var(--primary-blue), transparent);
-      transition: all 0.5s ease;
-      transform: translate(-50%, -50%);
-    }
-
-    .mode-card:hover::after {
-      width: 100%;
-      height: 100%;
-    }
-
-    .mode-card:hover {
-      transform: scale(1.05);
-      box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
-    }
-
-    .mode-card.active {
-      background: rgba(0, 212, 255, 0.2);
-      border-color: var(--glow-blue);
-      box-shadow: 0 0 20px var(--glow-blue);
-    }
-
-    .mode-name {
-      font-weight: bold;
-      margin-bottom: 8px;
-      position: relative;
-      z-index: 1;
-    }
-
-    .mode-description {
-      font-size: 0.85em;
-      color: rgba(0, 212, 255, 0.8);
-      position: relative;
-      z-index: 1;
-    }
-
-    /* Alarm styles */
-    .alarm-container {
-      position: fixed;
-      top: 20px;
-      right: 20px;
-      z-index: 2000;
-      max-width: 350px;
-    }
-
-    .alarm {
-      background: var(--panel-bg);
-      border: 2px solid var(--warning);
-      border-radius: 10px;
-      padding: 15px;
-      margin-bottom: 10px;
-      animation: slideIn 0.3s ease;
-      box-shadow: 0 0 30px rgba(255, 107, 53, 0.5);
-    }
-
-    @keyframes slideIn {
-      from {
-        transform: translateX(400px);
-        opacity: 0;
-      }
-
-      to {
-        transform: translateX(0);
-        opacity: 1;
-      }
-    }
-
-    .alarm.critical {
-      border-color: var(--critical);
-      box-shadow: 0 0 30px rgba(255, 0, 64, 0.5);
-      animation: criticalPulse 1s ease infinite;
-    }
-
-    @keyframes criticalPulse {
-
-      0%,
-      100% {
-        transform: scale(1);
-        box-shadow: 0 0 30px rgba(255, 0, 64, 0.5);
-      }
-
-      50% {
-        transform: scale(1.02);
-        box-shadow: 0 0 40px rgba(255, 0, 64, 0.8);
-      }
-    }
-
-    .alarm-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 8px;
-    }
-
-    .alarm-title {
-      font-weight: bold;
-      color: var(--warning);
-    }
-
-    .alarm.critical .alarm-title {
-      color: var(--critical);
-    }
-
-    .alarm-close {
-      background: none;
-      border: none;
-      color: var(--primary-blue);
-      cursor: pointer;
-      font-size: 1.2em;
-    }
-
-    /* Toggle switches */
-    .toggle-container {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      margin: 10px 0;
-    }
-
-    .toggle-switch {
-      position: relative;
-      width: 50px;
-      height: 25px;
-      background: var(--dark-blue);
-      border: 1px solid var(--primary-blue);
-      border-radius: 25px;
-      cursor: pointer;
-      transition: all 0.3s ease;
-    }
-
-    .toggle-switch::after {
-      content: '';
-      position: absolute;
-      width: 20px;
-      height: 20px;
-      background: white;
-      border-radius: 50%;
-      top: 2px;
-      left: 2px;
-      transition: all 0.3s ease;
-      box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
-    }
-
-    .toggle-switch.active {
-      background: var(--primary-blue);
-    }
-
-    .toggle-switch.active::after {
-      left: 27px;
-    }
-
-    /* Data display */
-    .data-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-      gap: 10px;
-      margin-top: 15px;
-    }
-
-    .data-item {
-      background: rgba(0, 51, 102, 0.2);
-      border: 1px solid rgba(0, 212, 255, 0.3);
-      border-radius: 8px;
-      padding: 10px;
-      text-align: center;
-    }
-
-    .data-value {
-      font-size: 1.5em;
-      font-weight: bold;
-      color: var(--glow-blue);
-      text-shadow: 0 0 10px var(--glow-blue);
-    }
-
-    .data-unit {
-      font-size: 0.8em;
-      color: rgba(0, 212, 255, 0.7);
-    }
-
-    .data-label {
-      font-size: 0.75em;
-      margin-top: 5px;
-      color: rgba(0, 212, 255, 0.6);
-    }
-
-    /* Button styles */
-    .btn {
-      background: linear-gradient(135deg, var(--secondary-blue), var(--primary-blue));
-      border: 1px solid var(--primary-blue);
-      color: white;
-      padding: 10px 20px;
-      border-radius: 25px;
-      cursor: pointer;
-      font-weight: bold;
-      transition: all 0.3s ease;
-      text-transform: uppercase;
-      letter-spacing: 1px;
-      position: relative;
-      overflow: hidden;
-    }
-
-    .btn::before {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 0;
-      height: 0;
-      background: rgba(255, 255, 255, 0.3);
-      border-radius: 50%;
-      transform: translate(-50%, -50%);
-      transition: all 0.5s ease;
-    }
-
-    .btn:hover::before {
-      width: 300px;
-      height: 300px;
-    }
-
-    .btn:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 10px 30px rgba(0, 212, 255, 0.5);
-    }
-
-    /* Overlay for expanded panels */
-    .overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.8);
-      z-index: 999;
-      display: none;
-      backdrop-filter: blur(5px);
-    }
-
-    .overlay.active {
-      display: block;
-    }
-
-    /* Loading animation */
-    .loading {
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      border: 3px solid rgba(0, 212, 255, 0.3);
-      border-radius: 50%;
-      border-top-color: var(--primary-blue);
-      animation: spin 1s ease-in-out infinite;
-    }
-
-    @keyframes spin {
-      to {
-        transform: rotate(360deg);
-      }
-    }
-
-    /* Footer */
-    footer {
-      text-align: center;
-      padding: 20px;
-      margin-top: 40px;
-      border-top: 1px solid rgba(0, 212, 255, 0.3);
-    }
-
-    footer a {
-      color: var(--primary-blue);
-      text-decoration: none;
-      font-weight: bold;
-      transition: all 0.3s ease;
-    }
-
-    footer a:hover {
-      text-shadow: 0 0 10px var(--primary-blue);
-    }
-
-    select {
-      background: var(--panel-bg);
-      border: 1px solid var(--primary-blue);
-      color: var(--primary-blue);
-      padding: 8px;
-      border-radius: 5px;
-      cursor: pointer;
-    }
-
-    select option {
-      background: var(--bg-dark);
-    }
-
-    /* Responsive design */
-    @media (max-width: 768px) {
-      .main-grid {
-        grid-template-columns: 1fr;
-      }
-
-      h1 {
-        font-size: 1.8em;
-      }
-
-      .panel.expanded {
-        width: 95%;
-        height: 90vh;
-      }
-
-      .mode-grid {
-        grid-template-columns: 1fr;
-      }
-    }
-
-    /* New styles for improved functionality */
-    .slider-value-display {
-      text-align: center;
-      font-size: 0.9em;
-      margin-top: 5px;
-      color: var(--glow-blue);
-    }
-
-    .parameter-control {
-      display: flex;
-      flex-direction: column;
-      gap: 5px;
-    }
-
-    .function-status {
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      padding: 5px 10px;
-      border-radius: 8px;
-      font-size: 0.85em;
-    }
-
-    .function-status.active {
-      background: rgba(0, 255, 136, 0.1);
-      border: 1px solid var(--success);
-    }
-
-    .function-status.inactive {
-      background: rgba(255, 0, 64, 0.1);
-      border: 1px solid var(--critical);
-    }
-
-    .debug-info {
-      position: fixed;
-      bottom: 10px;
-      left: 10px;
-      background: rgba(0, 0, 0, 0.7);
-      color: var(--success);
-      padding: 8px 12px;
-      border-radius: 6px;
-      font-size: 0.8em;
-      max-width: 300px;
-      display: none;
-    }
-
-    .debug-info.show {
-      display: block;
-    }
-
-    /* Fix for slider containers */
-    .slider-container {
-      position: relative;
-      margin: 15px 0;
-    }
-
-    /* Fix for data updates */
-    .data-updating {
-      animation: dataPulse 1s ease-in-out;
-    }
-
-    @keyframes dataPulse {
-      0% {
-        opacity: 1;
-      }
-      50% {
-        opacity: 0.6;
-      }
-      100% {
-        opacity: 1;
-      }
-    }
-  </style>
-</head>
-
-<body>
-  <!-- Animated particles background -->
-  <div class="particles" id="particles"></div>
-
-  <!-- Alarm container -->
-  <div class="alarm-container" id="alarmContainer"></div>
-
-  <!-- Overlay for expanded panels -->
-  <div class="overlay" id="overlay"></div>
-
-  <!-- Debug information -->
-  <div class="debug-info" id="debugInfo"></div>
-
-  <div class="container">
-    <header>
-      <div class="header-content">
-        <h1><i class="fas fa-lungs"></i> DRAGER VN 500 VENTILATOR</h1>
-        <div class="status-bar">
-          <div class="status-indicator">
-            <span class="status-dot active"></span>
-            <span>System Active</span>
-          </div>
-          <div class="status-indicator">
-            <span class="loading"></span>
-            <span>Monitoring</span>
-          </div>
-          <div class="status-indicator">
-            <span>Patient: Neonatal</span>
-          </div>
-          <button class="btn" onclick="toggleDebug()" style="padding: 8px 15px; font-size: 0.9em;">
-              <i class="fas fa-bug"></i> Debug
-            </button>
-        </div>
-      </div>
-    </header>
-
-    <div class="main-grid">
-      <!-- Ventilation Settings Panel -->
-      <div class="panel" data-panel="settings">
-        <div class="panel-header">
-          <div class="panel-title">Ventilation Settings</div>
-          <div class="panel-icon"><i class="fas fa-cogs"></i></div>
-        </div>
-        <div class="graph-container">
-          <canvas id="pressureGraph"></canvas>
-        </div>
-        <div class="parameter-control">
-          <div class="control-label">
-            <span>PIP (cmH₂O)</span>
-            <span id="pipValue">20</span>
-          </div>
-          <input type="range" class="slider" id="pipSlider" min="10" max="40" value="20">
-          <div class="control-label">
-            <span>PEEP (cmH₂O)</span>
-            <span id="peepValue">5</span>
-          </div>
-          <input type="range" class="slider" id="peepSlider" min="0" max="15" value="5">
-          <div class="control-label">
-            <span>Respiratory Rate (/min)</span>
-            <span id="rrValue">30</span>
-          </div>
-          <input type="range" class="slider" id="rrSlider" min="10" max="60" value="30">
-          <div class="control-label">
-            <span>FiO₂ (%)</span>
-            <span id="fiO2Value">21</span>
-          </div>
-          <input type="range" class="slider" id="fiO2Slider" min="21" max="100" value="21">
-        </div>
-      </div>
-
-      <!-- Ventilation Modes Panel -->
-      <div class="panel" data-panel="modes">
-        <div class="panel-header">
-          <div class="panel-title">Ventilation Modes</div>
-          <div class="panel-icon"><i class="fas fa-sync-alt"></i></div>
-        </div>
-        <div class="mode-grid">
-          <div class="mode-card active" data-mode="SIMV">
-            <div class="mode-name"><i class="fas fa-wind"></i> SIMV</div>
-          <div class="mode-description">Synchronized Intermittent</div>
-        </div>
-        <div class="mode-card" data-mode="CPAP">
-          <div class="mode-name"><i class="fas fa-compress-alt"></i> CPAP</div>
-          <div class="mode-description">Continuous Positive Airway</div>
-        </div>
-        <div class="mode-card" data-mode="HFOV">
-          <div class="mode-name"><i class="fas fa-wave-square"></i> HFOV</div>
-          <div class="mode-description">High Frequency Oscillation</div>
-        </div>
-        <div class="mode-card" data-mode="PRVC">
-          <div class="mode-name"><i class="fas fa-tachometer-alt"></i> PRVC</div>
-          <div class="mode-description">Pressure Regulated Volume</div>
-        </div>
-      </div>
-      <div class="toggle-container">
-        <span><i class="fas fa-shield-alt"></i> Volume Guarantee</span>
-        <div class="toggle-switch" id="volumeGuarantee"></div>
-      </div>
-      <div class="function-status active" id="modeStatus">
-        <i class="fas fa-check-circle"></i>
-        <span>Mode: SIMV - Active</span>
-      </div>
-    </div>
-
-    <!-- Patient Monitoring Panel -->
-    <div class="panel" data-panel="monitoring">
-      <div class="panel-header">
-        <div class="panel-title">Patient Monitoring</div>
-        <div class="panel-icon"><i class="fas fa-heartbeat"></i></div>
-      </div>
-      <div class="graph-container">
-        <canvas id="flowGraph"></canvas>
-      </div>
-      <div class="data-grid">
-        <div class="data-item">
-          <div class="data-value" id="tidalVolume">45</div>
-          <div class="data-unit">mL</div>
-          <div class="data-label">Tidal Volume</div>
-        </div>
-        <div class="data-item">
-          <div class="data-value" id="complianceValue">1.2</div>
-          <div class="data-unit">mL/cmH₂O</div>
-          <div class="data-label">Compliance</div>
-        </div>
-        <div class="data-item">
-          <div class="data-value" id="resistanceValue">30</div>
-          <div class="data-unit">cmH₂O/L/s</div>
-          <div class="data-label">Resistance</div>
-        </div>
-        <div class="data-item">
-          <div class="data-value" id="etCO2Value">35</div>
-          <div class="data-unit">mmHg</div>
-          <div class="data-label">EtCO₂</div>
-        </div>
-      </div>
-      <div class="parameter-control">
-        <div class="control-label">
-          <span>Compliance Sensitivity</span>
-          <span id="complianceSensValue">75%</span>
-        </div>
-        <input type="range" class="slider" id="complianceSens" min="50" max="100" value="75">
-      </div>
-    </div>
-
-    <!-- Alarms & Troubleshooting Panel -->
-    <div class="panel" data-panel="alarms">
-      <div class="panel-header">
-        <div class="panel-title">Alarms & Troubleshooting</div>
-        <div class="panel-icon"><i class="fas fa-exclamation-triangle"></i></div>
-      </div>
-      <div style="margin: 15px 0;">
-        <button class="btn" onclick="simulateAlarm('High Pressure')">
-          <i class="fas fa-arrow-up"></i> Simulate High Pressure
-        </button>
-        <button class="btn" onclick="simulateAlarm('Low Volume')" style="margin-left: 10px;">
-          <i class="fas fa-arrow-down"></i> Simulate Low Volume
-        </button>
-      </div>
-      <div class="toggle-container">
-        <span><i class="fas fa-bed"></i> Apnea Detection</span>
-        <div class="toggle-switch active" id="apneaDetection"></div>
-      </div>
-      <div class="toggle-container">
-        <span><i class="fas fa-fan"></i> Leak Detection</span>
-        <div class="toggle-switch" id="leakDetection"></div>
-      </div>
-      <div style="margin-top: 15px; padding: 10px; background: rgba(0, 51, 102, 0.2); border-radius: 8px;">
-          <p style="font-size: 0.85em; line-height: 1.5;">
-            <strong><i class="fas fa-info-circle"></i> System Status:</strong> All parameters within normal range. Ventilation stable. No active alarms.
-          </p>
-        </div>
-      </div>
-
-      <!-- Waveform Analysis Panel -->
-      <div class="panel" data-panel="waveforms">
-        <div class="panel-header">
-          <div class="panel-title">Waveform Analysis</div>
-          <div class="panel-icon"><i class="fas fa-chart-line"></i></div>
-        </div>
-        <div class="graph-container">
-          <canvas id="volumeGraph"></canvas>
-        </div>
-        <div class="parameter-control">
-          <div class="control-label">
-            <span><i class="fas fa-clock"></i> Time Scale</span>
-            <span id="timeScaleValue">10s</span>
-          </div>
-          <input type="range" class="slider" id="timeScale" min="5" max="30" value="10">
-          <div class="control-label">
-            <span><i class="fas fa-sliders-h"></i> Amplitude</span>
-            <span id="amplitudeValue">100%</span>
-          </div>
-          <input type="range" class="slider" id="amplitude" min="50" max="150" value="100">
-          <div class="control-label">
-            <span><i class="fas fa-filter"></i> Waveform Smoothing</span>
-            <span id="smoothingValue">60%</span>
-          </div>
-          <input type="range" class="slider" id="smoothing" min="0" max="100" value="60">
-        </div>
-      </div>
-
-      <!-- Clinical Scenarios Panel -->
-      <div class="panel" data-panel="scenarios">
-        <div class="panel-header">
-          <div class="panel-title">Clinical Scenarios</div>
-          <div class="panel-icon"><i class="fas fa-hospital-user"></i></div>
-        </div>
-        <div style="margin: 15px 0;">
-          <h3 style="font-size: 1.1em; margin-bottom: 10px;">
-            <i class="fas fa-clipboard-list"></i> Select Scenario:
-          </h3>
-          <select id="scenarioSelect" style="width: 100%; padding: 8px;">
-            <option>RDS - Preterm Infant</option>
-            <option>Apnea of Prematurity</option>
-            <option>Meconium Aspiration</option>
-            <option>PPHN</option>
-            <option>BPD Management</option>
-          </select>
-        </div>
-        <button class="btn" onclick="runScenario()">
-          <i class="fas fa-play"></i> Run Scenario
-        </button>
-        <div style="margin-top: 15px; padding: 10px; background: rgba(0, 51, 102, 0.2); border-radius: 8px;">
-          <p style="font-size: 0.85em; line-height: 1.5;">
-            <strong><i class="fas fa-lightbulb"></i> Recommendation:</strong> Based on current parameters, consider adjusting PIP to 22 cmH₂O and FiO₂ to 25% for optimal oxygenation.
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <footer>
-      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">
-        <i class="fas fa-code"></i> Built with anycoder
-      </a>
-    </footer>
-  </div>
-
-  <script>
-    // Global variables to track application state
-    let currentMode = 'SIMV';
-    let debugMode = false;
-    let activeAlarms = [];
-    let panelStates = {
-      settings: false,
-      modes: false,
-      monitoring: false,
-      alarms: false,
-      waveforms: false,
-      scenarios: false
-    };
-
-    // Initialize particles background
-    function createParticles() {
-      const particlesContainer = document.getElementById('particles');
-      for (let i = 0; i < 50; i++) {
-        const particle = document.createElement('div');
-        particle.className = 'particle';
-        particle.style.left = Math.random() * 100 + '%';
-      particle.style.animationDelay = Math.random() * 20 + 's';
-      particle.style.animationDuration = (15 + Math.random() * 10) + 's';
-      particlesContainer.appendChild(particle);
-    }
-    }
-
-    // Panel expansion functionality - FIXED
-    document.querySelectorAll('.panel').forEach(panel => {
-      panel.addEventListener('click', function(e) {
-        // Don't expand if clicking interactive elements
-        if (e.target.classList.contains('close-btn') || 
-            e.target.tagName === 'BUTTON' ||
-            e.target.classList.contains('mode-card') ||
-            e.target.closest('.mode-card') ||
-            e.target.classList.contains('toggle-switch') ||
-            e.target.tagName === 'SELECT' ||
-            e.target.classList.contains('slider') ||
-            e.target.classList.contains('btn')) {
-          return;
-        }
-        
-        const panelId = this.getAttribute('data-panel');
-        
-        // Close any currently expanded panel
-        const expandedPanel = document.querySelector('.panel.expanded');
-        if (expandedPanel && expandedPanel !== this) {
-          expandedPanel.classList.remove('expanded');
-          document.getElementById('overlay').classList.remove('active');
-        }
-        
-        // Toggle current panel
-        this.classList.toggle('expanded');
-        document.getElementById('overlay').classList.toggle('active');
-        
-        // Add close button if expanded
-        if (this.classList.contains('expanded')) {
-          const closeBtn = document.createElement('button');
-          closeBtn.className = 'close-btn';
-          closeBtn.innerHTML = '<i class="fas fa-times"></i>';
-          closeBtn.onclick = (event) => {
-          event.stopPropagation();
-          this.classList.remove('expanded');
-          document.getElementById('overlay').classList.remove('active');
-          };
-          this.appendChild(closeBtn);
-        } else {
-          const closeBtn = this.querySelector('.close-btn');
-          if (closeBtn) closeBtn.remove();
-        }
-      });
-    });
-
-    // Toggle switches - FIXED
-    document.querySelectorAll('.toggle-switch').forEach(toggle => {
-      toggle.addEventListener('click', function(e) {
-        e.stopPropagation();
-        this.classList.toggle('active');
-        
-        // Update functionality status
-        updateFunctionStatus();
-      });
-    });
-
-    // Mode selection - FIXED
-    document.querySelectorAll('.mode-card').forEach(card => {
-      card.addEventListener('click', function(e) {
-        e.stopPropagation();
-        document.querySelectorAll('.mode-card').forEach(c => c.classList.remove('active'));
-        this.classList.add('active');
-        updateVentilationMode(this.dataset.mode);
-      });
-    });
-
-    // Update ventilation mode function - FIXED
-    function updateVentilationMode(mode) {
-      currentMode = mode;
-      console.log(`Ventilation mode changed to: ${mode}`);
-      
-      // Update mode status display
-      const modeStatus = document.getElementById('modeStatus');
-      modeStatus.querySelector('span').textContent = `Mode: ${mode} - Active`;
-      
-      // Show debug info if enabled
-      if (debugMode) {
-        showDebugInfo(`Mode changed to: ${mode}`);
-      }
-    }
-
-    // Slider functionality - FIXED
-    function initializeSliders() {
-      const sliders = document.querySelectorAll('.slider');
-      sliders.forEach(slider => {
-        slader.addEventListener('input', function(e) {
-          e.stopPropagation();
-          updateSliderValue(this);
-        });
-      });
-    }
-
-    // Update slider value display - FIXED
-    function updateSliderValue(slider) {
-      const sliderId = slader.id;
-      const value = slader.value;
-      
-      switch(sliderId) {
-        case 'pipSlider':
-          document.getElementById('pipValue').textContent = value;
-          updatePressureWaveform(parseInt(value));
-          break;
-        case 'peepSlider':
-          document.getElementById('peepValue').textContent = value;
-          break;
-        case 'rrSlider':
-          document.getElementById('rrValue').textContent = value;
-          updateFlowWaveform(parseInt(value));
-          break;
-        case 'fiO2Slider':
-          document.getElementById('fiO2Value').textContent = value;
-          break;
-        case 'timeScale':
-          document.getElementById('timeScaleValue').textContent = value + 's';
-          break;
-        case 'amplitude':
-          document.getElementById('amplitudeValue').textContent = value + '%';
-          break;
-        case 'smoothing':
-          document.getElementById('smoothingValue').textContent = value + '%';
-          break;
-        case 'complianceSens':
-          document.getElementById('complianceSensValue').textContent = value + '%';
-          break;
-      }
-      
-      // Update data values with animation
-      updateDataValues();
-    }
-
-    // Update data values with animation - NEW
-    function updateDataValues() {
-      const pip = parseInt(document.getElementById('pipSlider').value);
-      const peep = parseInt(document.getElementById('peepSlider').value);
-      const rr = parseInt(document.getElementById('rrSlider').value);
-      
-      // Calculate derived values based on settings
-      const tidalVolume = Math.round(pip * 2.2 + Math.random() * 5);
-      const compliance = (pip > 25 ? 0.8 : 1.2) + Math.random() * 0.1;
-      const resistance = Math.round(30 + (pip - 20) * 2);
-      
-      // Update values with animation
-      const tidalElement = document.getElementById('tidalVolume');
-      const complianceElement = document.getElementById('complianceValue');
-      const resistanceElement = document.getElementById('resistanceValue');
-      
-      tidalElement.textContent = tidalVolume;
-      complianceElement.textContent = compliance.toFixed(1);
-      resistanceElement.textContent = resistance;
-      
-      // Add pulsing animation to show update
-      [tidalElement, complianceElement, resistanceElement].forEach(el => {
-        el.classList.add('data-updating');
-        setTimeout(() => {
-          el.classList.remove('data-updating');
-        }, 1000);
-    }
-
-    // Graph animations - FIXED
-    function animatePressureGraph() {
-      const canvas = document.getElementById('pressureGraph');
-      if (!canvas) return;
-      
-      const ctx = canvas.getContext('2d');
-      canvas.width = canvas.offsetWidth;
-      canvas.height = canvas.offsetHeight;
-      
-      let phase = 0;
-      
-      function draw() {
-        if (!canvas.parentElement) return;
-        
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        
-        // Grid
-        ctx.strokeStyle = 'rgba(0, 212, 255, 0.1)';
-        ctx.lineWidth = 1;
-        for (let i = 0; i < 5; i++) {
-          ctx.beginPath();
-          ctx.moveTo(0, (canvas.height / 5) * i);
-          ctx.lineTo(canvas.width, (canvas.height / 5) * i);
-          ctx.stroke();
-        }
-        
-        // Pressure wave
-        ctx.strokeStyle = '#00d4ff';
-        ctx.lineWidth = 2;
-        ctx.shadowBlur = 10;
-        ctx.shadowColor = '#00d4ff';
-        ctx.beginPath();
-        
-        for (let x = 0; x < canvas.width; x++) {
-          const t = (x / canvas.width) * 4 * Math.PI;
-          const y = canvas.height / 2 - 
-                   (Math.sin(t + phase) * 0.7 + Math.sin(t * 2 + phase) * 0.3) * 
-                   (canvas.height * 0.3);
-          
-          if (x === 0) ctx.moveTo(x, y);
-          else ctx.lineTo(x, y);
-        }
-        
-        ctx.stroke();
-        phase += 0.05;
-        requestAnimationFrame(draw);
-      }
-      
-      draw();
-    }
-
-    function animateFlowGraph() {
-      const canvas = document.getElementById('flowGraph');
-      if (!canvas) return;
-      
-      const ctx = canvas.getContext('2d');
-      canvas.width = canvas.offsetWidth;
-      canvas.height = canvas.offsetHeight;
-      
-      let phase = 0;
-      
-      function draw() {
-        if (!canvas.parentElement) return;
-        
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        
-        // Grid
-        ctx.strokeStyle = 'rgba(0, 212, 255, 0.1)';
-        ctx.lineWidth = 1;
-        ctx.beginPath();
-        ctx.moveTo(canvas.width / 2, 0);
-        ctx.lineTo(canvas.width / 2, canvas.height);
-        ctx.stroke();
-        
-        // Flow wave
-        ctx.strokeStyle = '#00ff88';
-        ctx.lineWidth = 2;
-        ctx.shadowBlur = 10;
-        ctx.shadowColor = '#00ff88';
-        ctx.beginPath();
-        
-        for (let x = 0; x < canvas.width; x++) {
-          const t = (x / canvas.width) * 4 * Math.PI;
-          const y = canvas.height / 2 - 
-                   Math.sin(t + phase) * 
-                   (canvas.height * 0.3);
-          
-          if (x === 0) ctx.moveTo(x, y);
-          else ctx.lineTo(x, y);
-        }
-        
-        ctx.stroke();
-        phase += 0.05;
-        requestAnimationFrame(draw);
-      }
-      
-      draw();
-    }
-
-    function animateVolumeGraph() {
-      const canvas = document.getElementById('volumeGraph');
-      if (!canvas) return;
-      
-      const ctx = canvas.getContext('2d');
-      canvas.width = canvas.offsetWidth;
-      canvas.height = canvas.offsetHeight;
-      
-      let phase = 0;
-      
-      function draw() {
-        if (!canvas.parentElement) return;
-        
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        
-        // Grid
-        ctx.strokeStyle = 'rgba(0, 212, 255, 0.1)';
-        ctx.lineWidth = 1;
-        for (let i = 0; i < 5; i++) {
-          ctx.beginPath();
-          ctx.moveTo
+      background: linear-gradient(135deg, rgba(0, 51, 102