<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <title>Cardiac Cycle - Left Ventricle</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      padding: 10px;
      user-select: none;
    }

    /* Stage Tabs / Nav */
    .tabs {
      display: flex;
      width: 100%;
      max-width: 480px;
      gap: 6px;
      margin-bottom: 6px;
    }
    .tab {
      flex: 1;
      text-align: center;
      padding: 8px 4px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .tab.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
    }

    /* Main Display Area */
    .viewport {
      position: relative;
      width: 100%;
      max-width: 420px;
      flex: 1;
      min-height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
      max-height: 320px;
    }

    /* Indicator HUD / Metrics */
    .hud {
      display: flex;
      justify-content: space-between;
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 14px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      margin-top: 4px;
    }
    .hud-col {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .hud-label {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .hud-val {
      font-size: 15px;
      font-weight: 800;
      color: #0f172a;
    }
    .sound-badge {
      display: inline-block;
      padding: 1px 6px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 800;
    }
    .sound-none { color: #94a3b8; }
    .sound-s1 { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; }
    .sound-s2 { background: #e0e7ff; color: #4338ca; border: 1px solid #c7d2fe; }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 6px;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.15s;
    }
    .btn:active {
      background: #f1f5f9;
    }

    /* SVG Transitions */
    .valve-leaf {
      transition: transform 0.4s ease, stroke 0.3s;
      transform-origin: center;
    }
    .blood-fill {
      transition: height 0.4s ease, y 0.4s ease;
    }
    .arrow-flow {
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
  </style>
</head>
<body>

  
  <div class="tabs">
    <div class="tab active" onclick="setStep(0)">1. Filling</div>
    <div class="tab" onclick="setStep(1)">2. Contraction</div>
    <div class="tab" onclick="setStep(2)">3. Ejection</div>
    <div class="tab" onclick="setStep(3)">4. Relaxation</div>
  </div>

  
  <div class="viewport">
    <svg viewBox="0 0 400 320">
      <defs>
        
        <linearGradient id="bloodGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#ef4444" />
          <stop offset="100%" stop-color="#b91c1c" />
        </linearGradient>
        <linearGradient id="atriumGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#fca5a5" />
          <stop offset="100%" stop-color="#ef4444" />
        </linearGradient>
        
        <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 10 5 L 0 9 z" fill="#dc2626" />
        </marker>
        <marker id="arrowWhite" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 10 5 L 0 9 z" fill="#ffffff" />
        </marker>

        
        <clipPath id="ventricleClip">
          <path d="M 120 130 C 105 180 120 270 200 290 C 280 270 295 180 280 130 Z" />
        </clipPath>
      </defs>

      
      <path d="M 230 140 C 240 70 290 50 330 50" fill="none" stroke="#e2e8f0" stroke-width="34" stroke-linecap="round"/>
      <path id="aortaBlood" d="M 230 140 C 240 70 290 50 330 50" fill="none" stroke="#ef4444" stroke-width="26" stroke-linecap="round" opacity="0.3"/>

      
      <path d="M 115 130 C 110 60 210 60 205 130 Z" fill="url(#atriumGrad)" opacity="0.85"/>
      <text x="160" y="90" font-size="13" font-weight="700" fill="#ffffff" text-anchor="middle">Atrium</text>

      
      <path d="M 104 125 C 85 185 105 285 200 306 C 295 285 315 185 296 125 Z" fill="#cbd5e1"/>

      
      <path d="M 120 130 C 105 180 120 270 200 290 C 280 270 295 180 280 130 Z" fill="#f1f5f9"/>

      
      <g clip-path="url(#ventricleClip)">
        <rect id="bloodRect" class="blood-fill" x="90" y="140" width="220" height="160" fill="url(#bloodGrad)" opacity="0.9"/>
      </g>

      
      
      <line id="inflowArrow" class="arrow-flow" x1="160" y1="105" x2="160" y2="175" stroke="#ffffff" stroke-width="4" marker-end="url(#arrowWhite)" opacity="1"/>
      
      <path id="outflowArrow" class="arrow-flow" d="M 200 200 C 220 170 235 120 280 65" fill="none" stroke="#ffffff" stroke-width="4" marker-end="url(#arrowWhite)" opacity="0"/>

      
      <g id="mitralGroup">
        <line id="mitralL" class="valve-leaf" x1="130" y1="130" x2="152" y2="148" stroke="#1e293b" stroke-width="4" stroke-linecap="round"/>
        <line id="mitralR" class="valve-leaf" x1="175" y1="130" x2="155" y2="148" stroke="#1e293b" stroke-width="4" stroke-linecap="round"/>
        <text x="110" y="120" font-size="11" font-weight="700" fill="#475569">Mitral</text>
      </g>

      
      <g id="aorticGroup">
        <line id="aorticL" class="valve-leaf" x1="225" y1="130" x2="238" y2="120" stroke="#1e293b" stroke-width="4" stroke-linecap="round"/>
        <line id="aorticR" class="valve-leaf" x1="255" y1="130" x2="242" y2="120" stroke="#1e293b" stroke-width="4" stroke-linecap="round"/>
        <text x="270" y="120" font-size="11" font-weight="700" fill="#475569">Aortic</text>
      </g>

      
      <text x="200" y="225" font-size="14" font-weight="800" fill="#ffffff" text-anchor="middle">Ventricle</text>
      <text id="chamberPresText" x="200" y="245" font-size="12" font-weight="700" fill="#fef08a" text-anchor="middle">P &lt; Atrium</text>

      
      <g id="soundVisual" opacity="0" transform="translate(200, 130)">
        <circle r="18" fill="none" stroke="#ef4444" stroke-width="2" opacity="0.8"/>
        <circle r="26" fill="none" stroke="#ef4444" stroke-width="1.5" opacity="0.5"/>
      </g>
    </svg>
  </div>

  
  <div class="hud">
    <div class="hud-col">
      <span class="hud-label">Volume</span>
      <span class="hud-val" id="volVal">120 mL (EDV)</span>
    </div>
    <div class="hud-col">
      <span class="hud-label">Mitral Valve</span>
      <span class="hud-val" id="mitralVal" style="color:#16a34a;">OPEN</span>
    </div>
    <div class="hud-col">
      <span class="hud-label">Aortic Valve</span>
      <span class="hud-val" id="aorticVal" style="color:#dc2626;">CLOSED</span>
    </div>
    <div class="hud-col">
      <span class="hud-label">Heart Sound</span>
      <span class="hud-val"><span id="soundBadge" class="sound-badge sound-none">—</span></span>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" onclick="prevStep()">← Prev</button>
    <button class="btn" id="playBtn" onclick="togglePlay()">⏸ Pause</button>
    <button class="btn" onclick="nextStep()">Next →</button>
  </div>

  <script>
    const stages = [
      {
        name: "1. Filling",
        volText: "120 mL (EDV)",
        mitralText: "OPEN",
        mitralColor: "#16a34a",
        aorticText: "CLOSED",
        aorticColor: "#dc2626",
        sound: "—",
        soundClass: "sound-none",
        presText: "P < Atrium",
        bloodY: 140,
        bloodH: 160,
        mitralL: { x1: 130, y1: 130, x2: 140, y2: 155 },
        mitralR: { x1: 175, y1: 130, x2: 165, y2: 155 },
        aorticL: { x1: 225, y1: 130, x2: 240, y2: 125 },
        aorticR: { x1: 255, y1: 130, x2: 240, y2: 125 },
        inflow: 1,
        outflow: 0,
        aortaAlpha: 0.25,
        soundRipple: 0
      },
      {
        name: "2. Contraction",
        volText: "120 mL (Constant)",
        mitralText: "CLOSED",
        mitralColor: "#dc2626",
        aorticText: "CLOSED",
        aorticColor: "#dc2626",
        sound: "S1 'lub'",
        soundClass: "sound-s1",
        presText: "P Rising ↑",
        bloodY: 140,
        bloodH: 160,
        mitralL: { x1: 130, y1: 130, x2: 153, y2: 132 },
        mitralR: { x1: 175, y1: 130, x2: 152, y2: 132 },
        aorticL: { x1: 225, y1: 130, x2: 240, y2: 125 },
        aorticR: { x1: 255, y1: 130, x2: 240, y2: 125 },
        inflow: 0,
        outflow: 0,
        aortaAlpha: 0.25,
        soundRipple: 1
      },
      {
        name: "3. Ejection",
        volText: "50 mL (ESV)",
        mitralText: "CLOSED",
        mitralColor: "#dc2626",
        aorticText: "OPEN",
        aorticColor: "#16a34a",
        sound: "—",
        soundClass: "sound-none",
        presText: "P > Aorta (>80)",
        bloodY: 225,
        bloodH: 75,
        mitralL: { x1: 130, y1: 130, x2: 153, y2: 132 },
        mitralR: { x1: 175, y1: 130, x2: 152, y2: 132 },
        aorticL: { x1: 225, y1: 130, x2: 232, y2: 105 },
        aorticR: { x1: 255, y1: 130, x2: 250, y2: 105 },
        inflow: 0,
        outflow: 1,
        aortaAlpha: 0.9,
        soundRipple: 0
      },
      {
        name: "4. Relaxation",
        volText: "50 mL (Constant)",
        mitralText: "CLOSED",
        mitralColor: "#dc2626",
        aorticText: "CLOSED",
        aorticColor: "#dc2626",
        sound: "S2 'dup'",
        soundClass: "sound-s2",
        presText: "P Dropping ↓",
        bloodY: 225,
        bloodH: 75,
        mitralL: { x1: 130, y1: 130, x2: 153, y2: 132 },
        mitralR: { x1: 175, y1: 130, x2: 152, y2: 132 },
        aorticL: { x1: 225, y1: 130, x2: 240, y2: 125 },
        aorticR: { x1: 255, y1: 130, x2: 240, y2: 125 },
        inflow: 0,
        outflow: 0,
        aortaAlpha: 0.25,
        soundRipple: 1
      }
    ];

    let currentStep = 0;
    let timer = null;
    let isPlaying = true;

    function render() {
      const s = stages[currentStep];

      // Update tabs
      document.querySelectorAll('.tab').forEach((t, i) => {
        t.classList.toggle('active', i === currentStep);
      });

      // Update HUD
      document.getElementById('volVal').textContent = s.volText;
      
      const mVal = document.getElementById('mitralVal');
      mVal.textContent = s.mitralText;
      mVal.style.color = s.mitralColor;

      const aVal = document.getElementById('aorticVal');
      aVal.textContent = s.aorticText;
      aVal.style.color = s.aorticColor;

      const sBadge = document.getElementById('soundBadge');
      sBadge.textContent = s.sound;
      sBadge.className = 'sound-badge ' + s.soundClass;

      // Update Chamber SVG Elements
      document.getElementById('chamberPresText').textContent = s.presText;

      const bloodRect = document.getElementById('bloodRect');
      bloodRect.setAttribute('y', s.bloodY);
      bloodRect.setAttribute('height', s.bloodH);

      // Valves
      const mL = document.getElementById('mitralL');
      mL.setAttribute('x1', s.mitralL.x1);
      mL.setAttribute('y1', s.mitralL.y1);
      mL.setAttribute('x2', s.mitralL.x2);
      mL.setAttribute('y2', s.mitralL.y2);

      const mR = document.getElementById('mitralR');
      mR.setAttribute('x1', s.mitralR.x1);
      mR.setAttribute('y1', s.mitralR.y1);
      mR.setAttribute('x2', s.mitralR.x2);
      mR.setAttribute('y2', s.mitralR.y2);

      const aL = document.getElementById('aorticL');
      aL.setAttribute('x1', s.aorticL.x1);
      aL.setAttribute('y1', s.aorticL.y1);
      aL.setAttribute('x2', s.aorticL.x2);
      aL.setAttribute('y2', s.aorticL.y2);

      const aR = document.getElementById('aorticR');
      aR.setAttribute('x1', s.aorticR.x1);
      aR.setAttribute('y1', s.aorticR.y1);
      aR.setAttribute('x2', s.aorticR.x2);
      aR.setAttribute('y2', s.aorticR.y2);

      // Arrows & Flow
      document.getElementById('inflowArrow').style.opacity = s.inflow;
      document.getElementById('outflowArrow').style.opacity = s.outflow;
      document.getElementById('aortaBlood').setAttribute('opacity', s.aortaAlpha);

      // Sound Visual
      document.getElementById('soundVisual').setAttribute('opacity', s.soundRipple);
    }

    function setStep(idx) {
      currentStep = (idx + stages.length) % stages.length;
      render();
    }

    function nextStep() {
      setStep(currentStep + 1);
    }

    function prevStep() {
      setStep(currentStep - 1);
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('playBtn').textContent = isPlaying ? '⏸ Pause' : '▶ Play';
      if (isPlaying) {
        startTimer();
      } else {
        clearInterval(timer);
      }
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        nextStep();
      }, 3000);
    }

    // Initialize
    render();
    startTimer();
  </script>
</body>
</html>

The Cardiac Cycle: How the Heart Pumps Blood

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    /* Phase Selector Tabs */
    .nav-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      width: 100%;
      max-width: 500px;
    }
    .phase-btn {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 4px;
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      line-height: 1.2;
      transition: all 0.25s ease;
    }
    .phase-btn.active {
      background: #eff6ff;
      color: #2563eb;
      border-color: #2563eb;
      box-shadow: 0 0 0 1px #2563eb;
    }

    /* Stage Area */
    .stage-container {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 8px 0;
    }

    /* Heart Graphic SVG Wrapper */
    .heart-view {
      position: relative;
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg.heart-svg {
      width: 100%;
      height: 100%;
      max-height: 280px;
    }

    /* Panels & Indicators */
    .metrics-panel {
      width: 130px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .metric-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 8px;
    }
    .metric-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      color: #64748b;
      margin-bottom: 4px;
    }
    .bar-bg {
      background: #e2e8f0;
      height: 12px;
      border-radius: 6px;
      overflow: hidden;
      position: relative;
    }
    .bar-fill {
      height: 100%;
      background: #2563eb;
      width: 0%;
      border-radius: 6px;
      transition: width 0.4s ease;
    }
    .pressure-val {
      font-size: 12px;
      font-weight: 700;
      color: #1e2945;
      margin-top: 2px;
      display: flex;
      justify-content: space-between;
    }

    /* Status Badges */
    .badge-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .badge {
      font-size: 11px;
      font-weight: 600;
      padding: 4px 6px;
      border-radius: 6px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #475569;
    }
    .badge.open {
      background: #dcfce7;
      border-color: #86efac;
      color: #15803d;
    }
    .badge.closed {
      background: #fee2e2;
      border-color: #fca5a5;
      color: #b91c1c;
    }

    /* Sound Pill */
    .sound-banner {
      min-height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 700;
      color: #d97706;
      background: #fef3c7;
      border: 1px solid #fde68a;
      border-radius: 20px;
      padding: 2px 10px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .sound-banner.visible {
      opacity: 1;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      max-width: 500px;
      justify-content: center;
    }
    .btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .btn:hover {
      background: #e2e8f0;
    }
    .sound-btn {
      font-size: 12px;
      padding: 6px 10px;
      color: #2563eb;
      background: #eff6ff;
      border-color: #bfdbfe;
    }

    /* SVG Valve Animation States */
    .valve-leaf {
      transition: transform 0.4s ease, stroke 0.3s;
      transform-origin: center;
    }
    .blood-flow {
      transition: opacity 0.4s ease, stroke-dashoffset 0.4s ease;
    }
    .ventricle-cavity {
      transition: fill 0.4s ease, transform 0.4s ease;
      transform-origin: 100px 170px;
    }
  </style>
</head>
<body>

  
  <div class="nav-grid">
    <button class="phase-btn active" onclick="setPhase(0)">1. Filling<br><span style="font-weight:400;font-size:9px">Diastole</span></button>
    <button class="phase-btn" onclick="setPhase(1)">2. Iso-Contract<br><span style="font-weight:400;font-size:9px">Early Systole</span></button>
    <button class="phase-btn" onclick="setPhase(2)">3. Ejection<br><span style="font-weight:400;font-size:9px">Late Systole</span></button>
    <button class="phase-btn" onclick="setPhase(3)">4. Iso-Relax<br><span style="font-weight:400;font-size:9px">Early Diastole</span></button>
  </div>

  
  <div class="stage-container">
    <div class="heart-view">
      <svg class="heart-svg" viewBox="0 0 200 240">
        <defs>
          <linearGradient id="gradBlood" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#ef4444" />
            <stop offset="100%" stop-color="#b91c1c" />
          </linearGradient>
          
          <marker id="arrow" viewBox="0 0 6 6" refX="3" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
            <path d="M 0 0 L 6 3 L 0 6 z" fill="#ef4444"/>
          </marker>
        </defs>

        
        <path d="M 120,135 Q 120,40 160,35" fill="none" stroke="#fed7aa" stroke-width="18" stroke-linecap="round" />
        <path d="M 120,135 Q 120,40 160,35" fill="none" stroke="#ea580c" stroke-width="2" />
        
        <path id="aortaBlood" d="M 120,135 Q 120,40 160,35" fill="none" stroke="#ef4444" stroke-width="12" opacity="0.1" stroke-linecap="round" />

        
        <ellipse cx="65" cy="55" rx="30" ry="24" fill="#fee2e2" stroke="#f87171" stroke-width="2" />
        <text x="65" y="45" font-size="9" font-weight="700" fill="#991b1b" text-anchor="middle">Left Atrium</text>

        
        <path d="M 40,110 C 25,160 50,225 100,225 C 150,225 160,160 145,110 Z" fill="#fee2e2" stroke="#dc2626" stroke-width="8" />
        
        <path id="ventricleCavity" class="ventricle-cavity" d="M 46,115 C 34,155 56,215 100,215 C 144,215 152,155 139,115 Z" fill="#ef4444" opacity="0.8" />
        <text x="100" y="180" font-size="10" font-weight="700" fill="#ffffff" text-anchor="middle">Left Ventricle</text>

        
        <line id="mitralFlow" x1="65" y1="75" x2="75" y2="135" stroke="#ef4444" stroke-width="4" stroke-linecap="round" marker-end="url(#arrow)" opacity="1" />
        
        <line id="aorticFlow" x1="105" y1="145" x2="125" y2="90" stroke="#ef4444" stroke-width="4" stroke-linecap="round" marker-end="url(#arrow)" opacity="0" />

        
        <g id="mitralValveGroup" transform="translate(68, 105)">
          <circle cx="0" cy="0" r="14" fill="#ffffff" stroke="#94a3b8" stroke-width="1.5" />
          <line id="mvL" x1="-8" y1="-5" x2="-2" y2="8" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" class="valve-leaf" />
          <line id="mvR" x1="8" y1="-5" x2="2" y2="8" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" class="valve-leaf" />
          <text x="-16" y="2" font-size="8" font-weight="700" fill="#475569" text-anchor="end">Mitral</text>
        </g>

        
        <g id="aorticValveGroup" transform="translate(122, 125)">
          <circle cx="0" cy="0" r="12" fill="#ffffff" stroke="#94a3b8" stroke-width="1.5" />
          <line id="avL" x1="-6" y1="5" x2="0" y2="-2" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" class="valve-leaf" />
          <line id="avR" x1="6" y1="5" x2="0" y2="-2" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" class="valve-leaf" />
          <text x="15" y="3" font-size="8" font-weight="700" fill="#475569" text-anchor="start">Aortic</text>
        </g>
      </svg>
    </div>

    
    <div class="metrics-panel">
      
      <div class="metric-card">
        <div class="metric-label">LV Pressure</div>
        <div class="bar-bg">
          <div id="lvBar" class="bar-fill"></div>
        </div>
        <div class="pressure-val"><span id="lvVal">5</span> <span style="font-size:9px;color:#94a3b8">mmHg</span></div>
      </div>

      <div class="metric-card">
        <div class="metric-label">Aortic Pressure</div>
        <div class="bar-bg">
          <div id="aoBar" class="bar-fill" style="background:#ea580c"></div>
        </div>
        <div class="pressure-val"><span id="aoVal">80</span> <span style="font-size:9px;color:#94a3b8">mmHg</span></div>
      </div>

      
      <div class="badge-group">
        <div id="mvBadge" class="badge open">
          <span>Mitral</span><span id="mvState">OPEN</span>
        </div>
        <div id="avBadge" class="badge closed">
          <span>Aortic</span><span id="avState">CLOSED</span>
        </div>
      </div>
    </div>
  </div>

  
  <div id="soundBanner" class="sound-banner">
    <span id="soundIcon">🔊</span>
    <span id="soundText">S1 'Lub' (Mitral Closes)</span>
  </div>

  
  <div class="controls">
    <button class="btn" id="prevBtn" onclick="step(-1)">◀</button>
    <button class="btn" id="playBtn" onclick="togglePlay()">⏸ Pause</button>
    <button class="btn" id="nextBtn" onclick="step(1)">▶</button>
    <button class="btn sound-btn" onclick="triggerAudio()">🔊 Sound</button>
  </div>

  <script>
    const phases = [
      {
        name: "Ventricular Filling",
        mvOpen: true,
        avOpen: false,
        lvP: 8,
        aoP: 80,
        sound: null,
        scaleV: 1.0,
        flowM: 1,
        flowA: 0
      },
      {
        name: "Isovolumetric Contraction",
        mvOpen: false,
        avOpen: false,
        lvP: 50,
        aoP: 80,
        sound: "S1 'Lub' • AV Valve Closes",
        scaleV: 0.98,
        flowM: 0,
        flowA: 0
      },
      {
        name: "Ventricular Ejection",
        mvOpen: false,
        avOpen: true,
        lvP: 120,
        aoP: 120,
        sound: null,
        scaleV: 0.82,
        flowM: 0,
        flowA: 1
      },
      {
        name: "Isovolumetric Relaxation",
        mvOpen: false,
        avOpen: false,
        lvP: 20,
        aoP: 85,
        sound: "S2 'Dub' • Aortic Valve Closes",
        scaleV: 0.85,
        flowM: 0,
        flowA: 0
      }
    ];

    let currentPhase = 0;
    let isPlaying = true;
    let timer = null;

    // Web Audio Tone Synthesis
    let audioCtx = null;
    function playHeartSound(type) {
      try {
        if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        if (audioCtx.state === 'suspended') audioCtx.resume();

        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.connect(gain);
        gain.connect(audioCtx.destination);

        if (type === 'S1') {
          // Low freq lub
          osc.frequency.setValueAtTime(75, audioCtx.currentTime);
          osc.frequency.exponentialRampToValueAtTime(40, audioCtx.currentTime + 0.12);
          gain.gain.setValueAtTime(0.3, audioCtx.currentTime);
          gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.12);
          osc.start();
          osc.stop(audioCtx.currentTime + 0.12);
        } else if (type === 'S2') {
          // Snappier higher dub
          osc.frequency.setValueAtTime(110, audioCtx.currentTime);
          osc.frequency.exponentialRampToValueAtTime(50, audioCtx.currentTime + 0.09);
          gain.gain.setValueAtTime(0.25, audioCtx.currentTime);
          gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.09);
          osc.start();
          osc.stop(audioCtx.currentTime + 0.09);
        }
      } catch (e) {}
    }

    function render() {
      const p = phases[currentPhase];

      // Update Nav Buttons
      document.querySelectorAll('.phase-btn').forEach((btn, idx) => {
        btn.classList.toggle('active', idx === currentPhase);
      });

      // Update Pressures (Max scale 140 mmHg)
      document.getElementById('lvBar').style.width = (p.lvP / 140 * 100) + '%';
      document.getElementById('lvVal').textContent = p.lvP;
      document.getElementById('aoBar').style.width = (p.aoP / 140 * 100) + '%';
      document.getElementById('aoVal').textContent = p.aoP;

      // Update Badges
      const mvBadge = document.getElementById('mvBadge');
      mvBadge.className = 'badge ' + (p.mvOpen ? 'open' : 'closed');
      document.getElementById('mvState').textContent = p.mvOpen ? 'OPEN' : 'CLOSED';

      const avBadge = document.getElementById('avBadge');
      avBadge.className = 'badge ' + (p.avOpen ? 'open' : 'closed');
      document.getElementById('avState').textContent = p.avOpen ? 'OPEN' : 'CLOSED';

      // Update SVG Valves
      // Mitral Valve cusps
      const mvL = document.getElementById('mvL');
      const mvR = document.getElementById('mvR');
      if (p.mvOpen) {
        mvL.setAttribute('x2', '-6'); mvL.setAttribute('y2', '9');
        mvR.setAttribute('x2', '6'); mvR.setAttribute('y2', '9');
      } else {
        mvL.setAttribute('x2', '0'); mvL.setAttribute('y2', '4');
        mvR.setAttribute('x2', '0'); mvR.setAttribute('y2', '4');
      }

      // Aortic Valve cusps
      const avL = document.getElementById('avL');
      const avR = document.getElementById('avR');
      if (p.avOpen) {
        avL.setAttribute('x2', '-4'); avL.setAttribute('y2', '-6');
        avR.setAttribute('x2', '4'); avR.setAttribute('y2', '-6');
      } else {
        avL.setAttribute('x2', '0'); avL.setAttribute('y2', '0');
        avR.setAttribute('x2', '0'); avR.setAttribute('y2', '0');
      }

      // Ventricle Size & Flow Arrows
      const vCavity = document.getElementById('ventricleCavity');
      vCavity.style.transform = `scale(${p.scaleV})`;

      document.getElementById('mitralFlow').style.opacity = p.flowM;
      document.getElementById('aorticFlow').style.opacity = p.flowA;
      document.getElementById('aortaBlood').style.opacity = p.avOpen ? 0.9 : 0.15;

      // Sound notification banner
      const soundBanner = document.getElementById('soundBanner');
      if (p.sound) {
        soundBanner.classList.add('visible');
        document.getElementById('soundText').textContent = p.sound;
      } else {
        soundBanner.classList.remove('visible');
      }
    }

    function setPhase(idx, manual = true) {
      currentPhase = idx;
      render();
      if (manual && (idx === 1 || idx === 3)) {
        playHeartSound(idx === 1 ? 'S1' : 'S2');
      }
    }

    function step(dir) {
      currentPhase = (currentPhase + dir + 4) % 4;
      setPhase(currentPhase, true);
    }

    function triggerAudio() {
      if (currentPhase === 1) playHeartSound('S1');
      else if (currentPhase === 3) playHeartSound('S2');
      else playHeartSound('S1');
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('playBtn').textContent = isPlaying ? '⏸ Pause' : '▶ Play';
      if (isPlaying) startLoop();
      else clearInterval(timer);
    }

    function startLoop() {
      clearInterval(timer);
      timer = setInterval(() => {
        currentPhase = (currentPhase + 1) % 4;
        setPhase(currentPhase, false);
      }, 3200);
    }

    // Initialize
    render();
    startLoop();
  </script>
</body>
</html>

Epithelial, Connective, Muscle, and Nervous Tissues

Homeostatic Control Loops and Negative Feedback Principles

Endothermic and Ectothermic Thermoregulation Mechanisms

Osmoregulation and Blood Glucose Regulation

Baroreceptors and Systemic Blood Pressure Regulation

Suprachiasmatic Nucleus and Circadian Rhythms

science

Animal Tissues, Organ Systems, and Homeostatic Regulation

Hemodynamics, Vessel Compliance, and Microcirculation

Blood Clotting Cascade and Hemostasis

Lymphatic Circulation: Interstitial Drainage and Lipid Transport

Pulmonary Ventilation Mechanics and Gas Exchange

Hemoglobin: The Oxygen-Carrying Protein

Oxygen-Hemoglobin Dissociation Curves and the Bohr Effect

Cardiovascular, Lymphatic, and Respiratory Mechanics

Termoregulacja — mechanizmy utrzymania stałej temperatury ciała

Regulacja ciśnienia krwi — mechanizmy homeostatyczne

Rytmy dobowe organizmu — zegar biologiczny a homeostaza

Osmoregulacja i stałość składników płynów ustrojowych

Rytmy sezonowe organizmów — homeostaza w skali roku

Zapotrzebowanie energetyczne a wielkość organizmu

Zapotrzebowanie energetyczne a aktywność życiowa i temperatura ciała

Homeostaza i zapotrzebowanie energetyczne organizmów

Zawartość tlenu w wodzie — warunek życia organizmów wodnych

Warunki ułatwiające dyfuzję gazów przez powierzchnie wymiany

Lokalizacja i budowa powierzchni wymiany gazowej a środowisko życia

Narządy wymiany gazowej u zwierząt — przegląd grup

Skrzela jako narząd wymiany gazowej — mechanizm przeciwprądowy

Płuca gromad kręgowców — tendencje ewolucyjne w budowie

Wentylacja płuc u płazów i gadów — mechanizmy

Wentylacja płuc u ptaków — worki powietrzne i przepływ jednokierunkowy

Wentylacja płuc u ssaków — rola przepony

Wymiana gazowa u zwierząt

Drogi oddechowe człowieka — jama nosowa, gardło, krtań

Tchawica i oskrzela — związek budowy z funkcją

Pęcherzyki płucne — budowa a wymiana gazowa

Związek budowy elementów układu oddechowego z funkcją — podsumowanie

Wymiana gazowa w płucach — ciśnienie parcjalne i dyfuzja

Wymiana gazowa w tkankach — uwalnianie tlenu z hemoglobiny

Powinowactwo hemoglobiny do tlenu — wpływ pH krwi

Powinowactwo hemoglobiny do tlenu — wpływ temperatury krwi

Doświadczenie — różnice w zawartości CO₂ w powietrzu wdychanym i wydychanym

Budowa układu oddechowego człowieka i wymiana gazowa

Tlenek węgla — wpływ na hemoglobinę i układ oddechowy

Pyłowe zanieczyszczenia powietrza i smog a układ oddechowy

Dym tytoniowy — wpływ na funkcjonowanie układu oddechowego

RTG klatki piersiowej w diagnostyce układu oddechowego

Spirometria i bronchoskopia — badania układu oddechowego

Czynniki zewnętrzne i diagnostyka układu oddechowego

Rola krwi w transporcie tlenu — hemoglobina

Rola krwi w transporcie dwutlenku węgla — formy transportu

Wapń — znaczenie biologiczne: kości, krzepnięcie krwi i skurcz mięśni

Krzepnięcie krwi — kaskada procesu na schemacie

Zewnątrz- i wewnątrzpochodna droga krzepnięcia krwi

Zaburzenia krzepnięcia krwi — hemofilia i inne

Krew — transport gazów oddechowych i krzepnięcie

Otwarte układy krążenia u bezkręgowców

Zamknięte układy krążenia u zwierząt

Związek budowy układu krążenia z funkcją u poznanych grup zwierząt

Tętnice — budowa i funkcja

Żyły — budowa i funkcja

Kapilary — budowa i funkcja

Związek budowy naczyń krwionośnych z pełnioną funkcją — podsumowanie

Układy krążenia u zwierząt i budowa naczyń krwionośnych

Serca gromad kręgowców — tendencje ewolucyjne

Budowa serca człowieka — przedsionki, komory i zastawki

Krążenie krwi w obiegu płucnym

Krążenie krwi w obiegu ustrojowym

Automatyzm pracy serca — układ przewodzący

Regulacja pracy serca przez AUN

Serce — od ewolucji do budowy i regulacji pracy u człowieka

Miażdżyca — mechanizm powstawania i czynniki ryzyka

Choroba wieńcowa serca — przyczyny i objawy

Zawał mięśnia sercowego — mechanizm i następstwa

Nadciśnienie tętnicze — przyczyny i skutki

Udar mózgu — rodzaje i mechanizm powstawania

Żylaki — mechanizm powstawania i profilaktyka

Styl życia a choroby układu krążenia — podsumowanie związków

Profilaktyka chorób układu krążenia — dieta i aktywność

Choroby układu krążenia i ich profilaktyka

EKG — zasada działania i podstawowa interpretacja

USG serca — zasada i znaczenie diagnostyczne

Angiokardiografia — zasada i zastosowanie

Badanie Holtera — monitorowanie pracy serca w ciągu doby

Pomiar ciśnienia tętniczego — technika i interpretacja wyników

Badania krwi w diagnostyce chorób układu krążenia — lipidogram i troponiny

OGS.11.LS.HB.4

Aligned learning resources

Related diagrams