<!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>Should You Water Your Plant?</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      padding: 8px 12px 12px;
      user-select: none;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      max-width: 380px;
      margin-bottom: 4px;
    }

    .choice-btn {
      flex: 1;
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 700;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      background: #f8fafc;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.25s ease;
    }

    .choice-btn.active-yes {
      background: #ecfdf5;
      border-color: #10b981;
      color: #065f46;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
    }

    .choice-btn.active-no {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1e40af;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }

    /* SVG Diagram Layout */
    .svg-container {
      width: 100%;
      max-width: 440px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
      max-height: 420px;
      overflow: visible;
    }

    /* Shapes & Text */
    .node-shape {
      transition: fill 0.3s ease, stroke 0.3s ease, filter 0.3s ease;
    }

    .node-text {
      font-size: 12.5px;
      font-weight: 600;
      fill: #1e2945;
      text-anchor: middle;
      dominant-baseline: central;
      pointer-events: none;
    }

    .node-title {
      font-size: 13.5px;
      font-weight: 700;
    }

    /* Flow Lines */
    .path-base {
      stroke: #cbd5e1;
      stroke-width: 2.5;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke 0.3s ease;
    }

    .path-active {
      fill: none;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 6 6;
      animation: flowDash 0.8s linear infinite;
    }

    .path-yes-active {
      stroke: #10b981;
    }

    .path-no-active {
      stroke: #3b82f6;
    }

    @keyframes flowDash {
      to {
        stroke-dashoffset: -12;
      }
    }

    /* Pulse Dots along Path */
    .flow-dot {
      fill: #ffffff;
      stroke-width: 2;
    }

    .dot-yes {
      stroke: #10b981;
      fill: #10b981;
    }

    .dot-no {
      stroke: #3b82f6;
      fill: #3b82f6;
    }

    /* Branch Labels on Arrows */
    .branch-label {
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .branch-pill {
      cursor: pointer;
      transition: transform 0.2s ease;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="choice-btn active-yes" id="btnYes" onclick="setChoice('yes')">
      <span>💧 Dry? YES</span>
    </button>
    <button class="choice-btn" id="btnNo" onclick="setChoice('no')">
      <span>⏳ Dry? NO</span>
    </button>
  </div>

  
  <div class="svg-container">
    <svg viewBox="0 0 380 400">
      <defs>
        
        <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#94a3b8"/>
        </marker>
        <marker id="arrow-active-yes" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#10b981"/>
        </marker>
        <marker id="arrow-active-no" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#3b82f6"/>
        </marker>
      </defs>

      
      
      <line x1="190" y1="36" x2="190" y2="66" class="path-base" id="base-trunk-1" marker-end="url(#arrow)" />
      
      <line x1="190" y1="110" x2="190" y2="140" class="path-base" id="base-trunk-2" marker-end="url(#arrow)" />

      
      <path d="M 125 180 L 85 180 L 85 240" class="path-base" id="base-branch-yes" marker-end="url(#arrow)" />
      
      <path d="M 85 292 L 85 345 L 138 345" class="path-base" id="base-end-yes" marker-end="url(#arrow)" />

      
      <path d="M 255 180 L 295 180 L 295 240" class="path-base" id="base-branch-no" marker-end="url(#arrow)" />
      
      <path d="M 295 292 L 295 345 L 242 345" class="path-base" id="base-end-no" marker-end="url(#arrow)" />

      
      
      <line x1="190" y1="36" x2="190" y2="66" class="path-active path-yes-active" id="anim-trunk-1" />
      <line x1="190" y1="110" x2="190" y2="140" class="path-active path-yes-active" id="anim-trunk-2" />

      
      <path d="M 190 180 L 85 180 L 85 240" class="path-active path-yes-active" id="anim-branch-yes" />
      <path d="M 85 292 L 85 345 L 138 345" class="path-active path-yes-active" id="anim-end-yes" />

      
      <path d="M 190 180 L 295 180 L 295 240" class="path-active path-no-active" id="anim-branch-no" style="display:none;" />
      <path d="M 295 292 L 295 345 L 242 345" class="path-active path-no-active" id="anim-end-no" style="display:none;" />

      
      <g id="node-start">
        <rect x="145" y="10" width="90" height="28" rx="14" fill="#f1f5f9" stroke="#94a3b8" stroke-width="2" class="node-shape" id="shape-start"/>
        <text x="190" y="24" class="node-text node-title" fill="#334155">Start</text>
      </g>

      
      <g id="node-step2">
        <rect x="95" y="68" width="190" height="42" rx="8" fill="#ffffff" stroke="#cbd5e1" stroke-width="2" class="node-shape" id="shape-step2"/>
        <text x="190" y="89" class="node-text">Check top inch of soil</text>
      </g>

      
      <g id="node-step3">
        <polygon points="190,140 255,180 190,220 125,180" fill="#ffffff" stroke="#cbd5e1" stroke-width="2" class="node-shape" id="shape-step3"/>
        <text x="190" y="180" class="node-text" style="font-weight:700;">Is soil dry?</text>
      </g>

      
      
      <g class="branch-pill" onclick="setChoice('yes')">
        <rect x="96" y="167" width="34" height="22" rx="6" fill="#ecfdf5" stroke="#10b981" stroke-width="1.5" id="chip-yes"/>
        <text x="113" y="179" class="branch-label" fill="#065f46">Yes</text>
      </g>

      
      <g class="branch-pill" onclick="setChoice('no')">
        <rect x="250" y="167" width="34" height="22" rx="6" fill="#eff6ff" stroke="#3b82f6" stroke-width="1.5" id="chip-no"/>
        <text x="267" y="179" class="branch-label" fill="#1e40af">No</text>
      </g>

      
      <g id="node-action-yes" onclick="setChoice('yes')" style="cursor:pointer;">
        <rect x="15" y="242" width="140" height="50" rx="8" fill="#ffffff" stroke="#cbd5e1" stroke-width="2" class="node-shape" id="shape-act-yes"/>
        <text x="85" y="260" class="node-text">Add water until</text>
        <text x="85" y="276" class="node-text">it drains 💧</text>
      </g>

      
      <g id="node-action-no" onclick="setChoice('no')" style="cursor:pointer;">
        <rect x="225" y="242" width="140" height="50" rx="8" fill="#ffffff" stroke="#cbd5e1" stroke-width="2" class="node-shape" id="shape-act-no"/>
        <text x="295" y="260" class="node-text">Wait 2 days and</text>
        <text x="295" y="276" class="node-text">check again ⏳</text>
      </g>

      
      <g id="node-end">
        <rect x="145" y="331" width="90" height="28" rx="14" fill="#f1f5f9" stroke="#94a3b8" stroke-width="2" class="node-shape" id="shape-end"/>
        <text x="190" y="345" class="node-text node-title" fill="#334155">End</text>
      </g>
    </svg>
  </div>

  <script>
    function setChoice(choice) {
      const btnYes = document.getElementById('btnYes');
      const btnNo = document.getElementById('btnNo');
      
      const animTrunk1 = document.getElementById('anim-trunk-1');
      const animTrunk2 = document.getElementById('anim-trunk-2');
      const animBranchYes = document.getElementById('anim-branch-yes');
      const animEndYes = document.getElementById('anim-end-yes');
      const animBranchNo = document.getElementById('anim-branch-no');
      const animEndNo = document.getElementById('anim-end-no');

      const shapeActYes = document.getElementById('shape-act-yes');
      const shapeActNo = document.getElementById('shape-act-no');
      const shapeStep2 = document.getElementById('shape-step2');
      const shapeStep3 = document.getElementById('shape-step3');
      const shapeEnd = document.getElementById('shape-end');

      const baseEndYes = document.getElementById('base-end-yes');
      const baseEndNo = document.getElementById('base-end-no');
      const baseBranchYes = document.getElementById('base-branch-yes');
      const baseBranchNo = document.getElementById('base-branch-no');

      if (choice === 'yes') {
        // Toggle Buttons
        btnYes.className = 'choice-btn active-yes';
        btnNo.className = 'choice-btn';

        // Animated Overlays
        animTrunk1.className.baseVal = 'path-active path-yes-active';
        animTrunk2.className.baseVal = 'path-active path-yes-active';
        animBranchYes.style.display = 'inline';
        animEndYes.style.display = 'inline';
        animBranchNo.style.display = 'none';
        animEndNo.style.display = 'none';

        // Arrows & Marker Highlights
        baseBranchYes.setAttribute('marker-end', 'url(#arrow-active-yes)');
        baseEndYes.setAttribute('marker-end', 'url(#arrow-active-yes)');
        baseBranchNo.setAttribute('marker-end', 'url(#arrow)');
        baseEndNo.setAttribute('marker-end', 'url(#arrow)');

        // Node Highlights
        shapeStep2.setAttribute('stroke', '#10b981');
        shapeStep2.setAttribute('fill', '#f0fdf4');
        shapeStep3.setAttribute('stroke', '#10b981');
        shapeStep3.setAttribute('fill', '#f0fdf4');

        shapeActYes.setAttribute('stroke', '#10b981');
        shapeActYes.setAttribute('stroke-width', '2.5');
        shapeActYes.setAttribute('fill', '#ecfdf5');

        shapeActNo.setAttribute('stroke', '#e2e8f0');
        shapeActNo.setAttribute('stroke-width', '1.5');
        shapeActNo.setAttribute('fill', '#ffffff');

        shapeEnd.setAttribute('stroke', '#10b981');
        shapeEnd.setAttribute('fill', '#ecfdf5');
      } else {
        // Toggle Buttons
        btnYes.className = 'choice-btn';
        btnNo.className = 'choice-btn active-no';

        // Animated Overlays
        animTrunk1.className.baseVal = 'path-active path-no-active';
        animTrunk2.className.baseVal = 'path-active path-no-active';
        animBranchYes.style.display = 'none';
        animEndYes.style.display = 'none';
        animBranchNo.style.display = 'inline';
        animEndNo.style.display = 'inline';

        // Arrows & Marker Highlights
        baseBranchNo.setAttribute('marker-end', 'url(#arrow-active-no)');
        baseEndNo.setAttribute('marker-end', 'url(#arrow-active-no)');
        baseBranchYes.setAttribute('marker-end', 'url(#arrow)');
        baseEndYes.setAttribute('marker-end', 'url(#arrow)');

        // Node Highlights
        shapeStep2.setAttribute('stroke', '#3b82f6');
        shapeStep2.setAttribute('fill', '#f8fafc');
        shapeStep3.setAttribute('stroke', '#3b82f6');
        shapeStep3.setAttribute('fill', '#f8fafc');

        shapeActNo.setAttribute('stroke', '#3b82f6');
        shapeActNo.setAttribute('stroke-width', '2.5');
        shapeActNo.setAttribute('fill', '#eff6ff');

        shapeActYes.setAttribute('stroke', '#e2e8f0');
        shapeActYes.setAttribute('stroke-width', '1.5');
        shapeActYes.setAttribute('fill', '#ffffff');

        shapeEnd.setAttribute('stroke', '#3b82f6');
        shapeEnd.setAttribute('fill', '#eff6ff');
      }
    }

    // Initialize with default state
    setChoice('yes');
  </script>
</body>
</html>

Interpreting Timelines and Process Diagrams

<!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="4:3">
  <title>Volcano Cross-Section Cutaway</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 8px 10px;
    }

    .diagram-app {
      width: 100%;
      max-width: 640px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* Top Tabs */
    .tabs-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      width: 100%;
    }

    .tab-btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      font-size: 11px;
      font-weight: 600;
      padding: 5px 10px;
      border-radius: 9999px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .tab-btn:hover {
      background: #f1f5f9;
      color: #0f172a;
    }

    .tab-btn.active {
      color: #0f172a;
      background: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 0 0 1.5px #0284c7;
    }

    .tab-indicator {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      display: inline-block;
      flex-shrink: 0;
    }

    /* SVG Diagram Container */
    .svg-container {
      width: 100%;
      position: relative;
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      user-select: none;
    }

    /* SVG Interactive Elements */
    .clickable {
      cursor: pointer;
      transition: filter 0.25s ease, opacity 0.25s ease;
    }

    .clickable:hover {
      filter: brightness(1.12);
    }

    .highlight-glow {
      animation: pulseGlow 1.8s ease-in-out infinite alternate;
    }

    @keyframes pulseGlow {
      0% { opacity: 0.7; filter: drop-shadow(0 0 2px #38bdf8); }
      100% { opacity: 1; filter: drop-shadow(0 0 7px #0284c7); }
    }

    .leader-line {
      stroke-width: 1.5;
      fill: none;
      transition: stroke 0.2s ease, stroke-width 0.2s ease;
    }

    .label-tag {
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      user-select: none;
      transition: fill 0.2s ease;
    }

    /* Bottom Info Card */
    .info-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .info-left {
      display: flex;
      flex-direction: column;
      gap: 2px;
      text-align: left;
    }

    .info-title {
      font-size: 12px;
      font-weight: 700;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .info-desc {
      font-size: 12px;
      color: #475569;
      line-height: 1.35;
    }

    .badge-cutaway {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      font-size: 10px;
      font-weight: 600;
      padding: 3px 7px;
      border-radius: 4px;
      white-space: nowrap;
      flex-shrink: 0;
    }
  </style>
</head>
<body>

<div class="diagram-app">
  
  <nav class="tabs-nav" aria-label="Volcano Features">
    <button class="tab-btn active" data-target="chamber">
      <span class="tab-indicator" style="background: #ef4444;"></span>Magma Chamber
    </button>
    <button class="tab-btn" data-target="conduit">
      <span class="tab-indicator" style="background: #ea580c;"></span>Main Conduit
    </button>
    <button class="tab-btn" data-target="strata">
      <span class="tab-indicator" style="background: #d97706;"></span>Ash &amp; Lava Strata
    </button>
    <button class="tab-btn" data-target="vent">
      <span class="tab-indicator" style="background: #e11d48;"></span>Side Vent
    </button>
    <button class="tab-btn" data-target="crater">
      <span class="tab-indicator" style="background: #64748b;"></span>Summit Crater
    </button>
  </nav>

  
  <div class="svg-container">
    <svg viewBox="0 0 600 340" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Cutaway diagram of a composite volcano">
      <defs>
        
        <linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#e0f2fe"/>
          <stop offset="100%" stop-color="#f8fafc"/>
        </linearGradient>

        
        <radialGradient id="magmaGlow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stop-color="#fef08a"/>
          <stop offset="40%" stop-color="#f97316"/>
          <stop offset="100%" stop-color="#b91c1c"/>
        </radialGradient>

        
        <linearGradient id="conduitGrad" x1="0%" y1="100%" x2="0%" y2="0%">
          <stop offset="0%" stop-color="#f97316"/>
          <stop offset="100%" stop-color="#ea580c"/>
        </linearGradient>

        
        <linearGradient id="outerSlopeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#2d6a4f"/>
          <stop offset="60%" stop-color="#40916c"/>
          <stop offset="100%" stop-color="#1b4332"/>
        </linearGradient>

        
        <linearGradient id="ashGrad" x1="0%" y1="100%" x2="0%" y2="0%">
          <stop offset="0%" stop-color="#64748b" stop-opacity="0.85"/>
          <stop offset="100%" stop-color="#cbd5e1" stop-opacity="0.1"/>
        </linearGradient>
      </defs>

      
      <rect width="600" height="340" fill="url(#skyGrad)" />

      
      <rect x="0" y="270" width="600" height="70" fill="#334155" />
      <rect x="0" y="266" width="600" height="6" fill="#15803d" />

      
      <g id="exterior-slope">
        
        <polygon points="280,85 70,270 280,270" fill="url(#outerSlopeGrad)" />
        
        <polygon points="280,85 240,270 280,270" fill="#1b4332" opacity="0.45" />
        
        <circle cx="160" cy="245" r="14" fill="#1e4620" opacity="0.7"/>
        <circle cx="185" cy="240" r="18" fill="#2d6a4f" opacity="0.8"/>
        <circle cx="215" cy="225" r="12" fill="#1e4620" opacity="0.6"/>
        <circle cx="130" cy="255" r="12" fill="#2d6a4f" opacity="0.8"/>
        
        <polygon points="280,85 260,115 280,118" fill="#f1f5f9" opacity="0.9" />
        
        
        <text x="140" y="175" fill="#ffffff" font-size="11" font-weight="700" opacity="0.9" letter-spacing="0.5">3D EXTERIOR</text>
        <text x="140" y="190" fill="#dcfce7" font-size="9" font-weight="600" opacity="0.85">Rock &amp; Vegetation</text>
      </g>

      
      <line x1="280" y1="85" x2="280" y2="270" stroke="#0f172a" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.6" />

      
      <g id="geo-strata" class="clickable" data-id="strata">
        
        <polygon points="280,270 530,270 500,240 280,240" fill="#64748b" />
        
        <polygon points="280,240 500,240 470,210 280,210" fill="#d97706" />
        
        <polygon points="280,210 470,210 435,175 280,175" fill="#475569" />
        
        <polygon points="280,175 435,175 400,140 280,140" fill="#b45309" />
        
        <polygon points="280,140 400,140 365,105 280,105" fill="#64748b" />
        
        <polygon points="280,105 365,105 345,85 280,85" fill="#d97706" />

        
        <line x1="280" y1="255" x2="515" y2="255" stroke="#475569" stroke-width="1" opacity="0.5" />
        <line x1="280" y1="225" x2="485" y2="225" stroke="#92400e" stroke-width="1" opacity="0.5" />
        <line x1="280" y1="192" x2="452" y2="192" stroke="#334155" stroke-width="1" opacity="0.5" />
        <line x1="280" y1="158" x2="418" y2="158" stroke="#78350f" stroke-width="1" opacity="0.5" />
        <line x1="280" y1="122" x2="382" y2="122" stroke="#334155" stroke-width="1" opacity="0.5" />
      </g>

      
      <polygon id="strata-highlight" points="280,85 345,85 530,270 280,270" fill="none" stroke="#0284c7" stroke-width="2.5" opacity="0" pointer-events="none"/>

      
      <g id="geo-vent" class="clickable" data-id="vent">
        
        <polygon points="415,220 460,220 445,190" fill="#78350f" />
        
        <path d="M 292,205 L 435,195 L 440,202 L 292,215 Z" fill="#ea580c" />
        <ellipse cx="440" cy="193" rx="7" ry="3" fill="#f97316" />
        
        <path d="M 445,193 Q 460,205 455,220" stroke="#f97316" stroke-width="2.5" fill="none" />
      </g>
      <circle id="vent-highlight" cx="440" cy="195" r="14" fill="none" stroke="#0284c7" stroke-width="2" opacity="0" pointer-events="none" />

      
      <g id="geo-conduit" class="clickable" data-id="conduit">
        
        <path d="M 272,270 L 272,85 L 292,85 L 292,270 Z" fill="url(#conduitGrad)" />
        
        <line x1="282" y1="260" x2="282" y2="95" stroke="#fef08a" stroke-width="3.5" stroke-linecap="round" opacity="0.9" />
      </g>
      <rect id="conduit-highlight" x="270" y="83" width="24" height="189" fill="none" stroke="#0284c7" stroke-width="2" opacity="0" pointer-events="none" />

      
      <g id="geo-chamber" class="clickable" data-id="chamber">
        
        <ellipse cx="282" cy="295" rx="90" ry="35" fill="url(#magmaGlow)" />
        
        <ellipse cx="282" cy="295" rx="55" ry="18" fill="#fef08a" opacity="0.5" />
      </g>
      <ellipse id="chamber-highlight" cx="282" cy="295" rx="93" ry="38" fill="none" stroke="#0284c7" stroke-width="2.5" opacity="1" class="highlight-glow" pointer-events="none" />

      
      
      <g id="ash-cloud" pointer-events="none">
        <ellipse cx="282" cy="40" rx="35" ry="18" fill="url(#ashGrad)" />
        <ellipse cx="305" cy="50" rx="22" ry="12" fill="url(#ashGrad)" />
        <ellipse cx="265" cy="55" rx="20" ry="10" fill="url(#ashGrad)" />
      </g>

      <g id="geo-crater" class="clickable" data-id="crater">
        
        <ellipse cx="282" cy="85" rx="22" ry="8" fill="#475569" />
        <ellipse cx="282" cy="86" rx="14" ry="5" fill="#ea580c" />
      </g>
      <ellipse id="crater-highlight" cx="282" cy="85" rx="26" ry="11" fill="none" stroke="#0284c7" stroke-width="2" opacity="0" pointer-events="none" />

      

      
      <g class="clickable" data-id="crater">
        <polyline id="line-crater" class="leader-line" points="295,85 360,45 420,45" stroke="#94a3b8" stroke-dasharray="2,2" />
        <circle cx="295" cy="85" r="3" fill="#64748b" />
        <text id="text-crater" class="label-tag" x="425" y="49" fill="#475569">Summit Crater</text>
      </g>

      
      <g class="clickable" data-id="strata">
        <polyline id="line-strata" class="leader-line" points="360,150 430,120 480,120" stroke="#94a3b8" stroke-dasharray="2,2" />
        <circle cx="360" cy="150" r="3" fill="#d97706" />
        <text id="text-strata" class="label-tag" x="485" y="124" fill="#475569">Ash &amp; Lava Strata</text>
      </g>

      
      <g class="clickable" data-id="vent">
        <polyline id="line-vent" class="leader-line" points="445,195 490,195 530,195" stroke="#94a3b8" stroke-dasharray="2,2" />
        <circle cx="445" cy="195" r="3" fill="#e11d48" />
        <text id="text-vent" class="label-tag" x="495" y="188" fill="#475569">Side Vent</text>
      </g>

      
      <g class="clickable" data-id="conduit">
        <polyline id="line-conduit" class="leader-line" points="272,160 210,120 130,120" stroke="#94a3b8" stroke-dasharray="2,2" />
        <circle cx="272" cy="160" r="3" fill="#ea580c" />
        <text id="text-conduit" class="label-tag" x="50" y="124" fill="#475569">Main Conduit</text>
      </g>

      
      <g class="clickable" data-id="chamber">
        <polyline id="line-chamber" class="leader-line" points="195,295 140,295 80,295" stroke="#0284c7" stroke-width="2" />
        <circle cx="195" cy="295" r="3.5" fill="#ef4444" />
        <text id="text-chamber" class="label-tag" x="18" y="291" fill="#0284c7">Magma Chamber</text>
      </g>
    </svg>
  </div>

  
  <div class="info-card" id="infoCard">
    <div class="info-left">
      <div class="info-title" id="cardTitle">
        <span class="tab-indicator" style="background: #ef4444;" id="cardDot"></span>
        Magma Chamber
      </div>
      <div class="info-desc" id="cardDesc">
        Deep underground reservoir where molten rock collects under high pressure before rising through the crust.
      </div>
    </div>
    <div class="badge-cutaway">Internal Cross-Section</div>
  </div>
</div>

<script>
  // Educational Feature Definitions
  const features = {
    chamber: {
      name: "Magma Chamber",
      color: "#ef4444",
      desc: "Deep underground reservoir where molten rock collects under high pressure before rising through the crust.",
      highlightId: "chamber-highlight",
      lineId: "line-chamber",
      textId: "text-chamber"
    },
    conduit: {
      name: "Main Conduit (Pipe)",
      color: "#ea580c",
      desc: "The central vertical channel that guides pressurized magma upwards from the subterranean chamber to the peak.",
      highlightId: "conduit-highlight",
      lineId: "line-conduit",
      textId: "text-conduit"
    },
    strata: {
      name: "Ash & Lava Strata",
      color: "#d97706",
      desc: "Alternating hardened layers of cooled lava and porous volcanic ash built up from repeated historical eruptions.",
      highlightId: "strata-highlight",
      lineId: "line-strata",
      textId: "text-strata"
    },
    vent: {
      name: "Side Vent & Cone",
      color: "#e11d48",
      desc: "A secondary lateral branch that allows lava to break through the volcano's weaker flank slope.",
      highlightId: "vent-highlight",
      lineId: "line-vent",
      textId: "text-vent"
    },
    crater: {
      name: "Summit Crater",
      color: "#64748b",
      desc: "The steep-walled depression at the volcano's peak where eruptive gases, ash clouds, and lava vents discharge.",
      highlightId: "crater-highlight",
      lineId: "line-crater",
      textId: "text-crater"
    }
  };

  let currentFeature = "chamber";

  function selectFeature(key) {
    if (!features[key]) return;
    currentFeature = key;

    // 1. Update Tabs
    document.querySelectorAll('.tab-btn').forEach(btn => {
      if (btn.getAttribute('data-target') === key) {
        btn.classList.add('active');
      } else {
        btn.classList.remove('active');
      }
    });

    // 2. Update SVG Highlights, Lines, and Text
    Object.keys(features).forEach(k => {
      const feat = features[k];
      const hl = document.getElementById(feat.highlightId);
      const line = document.getElementById(feat.lineId);
      const txt = document.getElementById(feat.textId);

      if (k === key) {
        if (hl) {
          hl.setAttribute('opacity', '1');
          hl.classList.add('highlight-glow');
        }
        if (line) {
          line.setAttribute('stroke', '#0284c7');
          line.setAttribute('stroke-width', '2');
          line.removeAttribute('stroke-dasharray');
        }
        if (txt) {
          txt.setAttribute('fill', '#0284c7');
        }
      } else {
        if (hl) {
          hl.setAttribute('opacity', '0');
          hl.classList.remove('highlight-glow');
        }
        if (line) {
          line.setAttribute('stroke', '#94a3b8');
          line.setAttribute('stroke-width', '1.5');
          line.setAttribute('stroke-dasharray', '2,2');
        }
        if (txt) {
          txt.setAttribute('fill', '#475569');
        }
      }
    });

    // 3. Update Bottom Info Card
    const cardTitle = document.getElementById('cardTitle');
    const cardDesc = document.getElementById('cardDesc');
    const cardDot = document.getElementById('cardDot');
    
    cardDot.style.background = features[key].color;
    cardTitle.innerHTML = `<span class="tab-indicator" style="background: ${features[key].color};"></span>${features[key].name}`;
    cardDesc.textContent = features[key].desc;
  }

  // Setup click listeners for tabs
  document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      selectFeature(btn.getAttribute('data-target'));
    });
  });

  // Setup click listeners for clickable SVG groups & labels
  document.querySelectorAll('.clickable').forEach(el => {
    el.addEventListener('click', () => {
      const target = el.getAttribute('data-id');
      if (target) selectFeature(target);
    });
  });

  // Initialize with Magma Chamber
  selectFeature('chamber');
</script>

</body>
</html>

<!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="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    .header-row {
      width: 100%;
      max-width: 620px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .title {
      font-size: 17px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .stepper-controls {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .btn-play {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 4px 10px;
      border-radius: 16px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .btn-play:hover {
      background: #e2e8f0;
    }

    /* Timeline Bar Section */
    .timeline-container {
      width: 100%;
      max-width: 620px;
      position: relative;
      padding: 24px 10px 10px 10px;
      margin-bottom: 8px;
    }

    .timeline-track {
      position: relative;
      height: 6px;
      background: #e2e8f0;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .timeline-progress {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      background: #22b7ff;
      border-radius: 3px;
      transition: width 0.4s ease;
      width: 0%;
      z-index: 1;
    }

    /* Interval Delta Pill */
    .interval-pill {
      position: absolute;
      top: -20px;
      transform: translateX(-50%);
      background: #0f172a;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 10px;
      white-space: nowrap;
      transition: left 0.4s ease, opacity 0.3s ease;
      opacity: 0;
      pointer-events: none;
      z-index: 4;
    }

    .interval-pill::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 4px 4px 0;
      border-style: solid;
      border-color: #0f172a transparent transparent;
    }

    .timeline-node {
      position: relative;
      z-index: 2;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #ffffff;
      border: 3px solid #cbd5e1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      transition: border-color 0.3s, box-shadow 0.3s;
    }

    .timeline-node.reached {
      border-color: #22b7ff;
    }

    .timeline-node.active {
      border-color: #22b7ff;
      box-shadow: 0 0 0 4px rgba(34, 183, 255, 0.25);
      background: #f0f9ff;
    }

    .node-year {
      position: absolute;
      bottom: -22px;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      transition: color 0.3s;
    }

    .timeline-node.active .node-year {
      color: #0284c7;
    }

    /* Cards Grid */
    .cards-grid {
      width: 100%;
      max-width: 620px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-top: 18px;
    }

    @media (min-width: 540px) {
      .cards-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .event-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 8px;
      cursor: pointer;
      transition: box-shadow 0.3s, background 0.3s;
      display: flex;
      flex-direction: column;
      gap: 4px;
      text-align: left;
    }

    .event-card:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .event-card.active {
      background: #f0f9ff;
      box-shadow: 0 0 0 2px #22b7ff;
    }

    .card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .card-emoji {
      font-size: 18px;
      line-height: 1;
    }

    .card-badge {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 5px;
      border-radius: 4px;
      background: #e2e8f0;
      color: #475569;
    }

    .event-card.active .card-badge {
      background: #bae6fd;
      color: #0369a1;
    }

    .card-year {
      font-size: 15px;
      font-weight: 800;
      color: #22b7ff;
    }

    .card-title {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.2;
    }

    .card-caption {
      font-size: 11.5px;
      color: #64748b;
      line-height: 1.3;
    }

    /* Comparison Bar footer */
    .delta-status {
      width: 100%;
      max-width: 620px;
      margin-top: 10px;
      background: #f8fafc;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      color: #334155;
    }

    .delta-status strong {
      color: #0284c7;
    }
  </style>
</head>
<body>

  <div class="header-row">
    <div class="title">✈️ Milestones in Flight</div>
    <div class="stepper-controls">
      <button class="btn-play" id="playBtn" onclick="toggleAutoPlay()">
        <span id="playIcon">⏸</span> <span id="playText">Auto</span>
      </button>
    </div>
  </div>

  <div class="timeline-container">
    <div class="interval-pill" id="intervalPill">+0 yrs</div>
    <div class="timeline-track">
      <div class="timeline-progress" id="progressLine"></div>
      
      <button class="timeline-node active" id="node-0" onclick="selectStep(0)">
        <span>1</span>
        <span class="node-year">1903</span>
      </button>
      <button class="timeline-node" id="node-1" onclick="selectStep(1)">
        <span>2</span>
        <span class="node-year">1927</span>
      </button>
      <button class="timeline-node" id="node-2" onclick="selectStep(2)">
        <span>3</span>
        <span class="node-year">1947</span>
      </button>
      <button class="timeline-node" id="node-3" onclick="selectStep(3)">
        <span>4</span>
        <span class="node-year">1969</span>
      </button>
    </div>
  </div>

  <div class="cards-grid">
    <div class="event-card active" id="card-0" onclick="selectStep(0)">
      <div class="card-top">
        <span class="card-emoji">🛫</span>
        <span class="card-badge">First Plane</span>
      </div>
      <div class="card-year">1903</div>
      <div class="card-title">Wright Brothers</div>
      <div class="card-caption">First powered, controlled airplane flight at Kitty Hawk.</div>
    </div>

    <div class="event-card" id="card-1" onclick="selectStep(1)">
      <div class="card-top">
        <span class="card-emoji">🌊</span>
        <span class="card-badge">Solo Ocean</span>
      </div>
      <div class="card-year">1927</div>
      <div class="card-title">Charles Lindbergh</div>
      <div class="card-caption">First nonstop solo flight across the Atlantic Ocean.</div>
    </div>

    <div class="event-card" id="card-2" onclick="selectStep(2)">
      <div class="card-top">
        <span class="card-emoji">⚡</span>
        <span class="card-badge">Mach 1</span>
      </div>
      <div class="card-year">1947</div>
      <div class="card-title">Chuck Yeager</div>
      <div class="card-caption">First pilot to break the sound barrier in the Bell X-1.</div>
    </div>

    <div class="event-card" id="card-3" onclick="selectStep(3)">
      <div class="card-top">
        <span class="card-emoji">🌕</span>
        <span class="card-badge">Moon Landing</span>
      </div>
      <div class="card-year">1969</div>
      <div class="card-title">Apollo 11</div>
      <div class="card-caption">Humans leave Earth orbit and land on the lunar surface.</div>
    </div>
  </div>

  <div class="delta-status" id="deltaStatus">
    <span>Flight span: <strong>66 total years</strong> from first flight to the Moon.</span>
  </div>

  <script>
    const events = [
      { year: 1903, prevDelta: 0, desc: "Starting milestone: powered flight begins." },
      { year: 1927, prevDelta: 24, from: 1903, desc: "+24 years: aviation expands to transoceanic travel." },
      { year: 1947, prevDelta: 20, from: 1927, desc: "+20 years: aircraft reach supersonic speed." },
      { year: 1969, prevDelta: 22, from: 1947, desc: "+22 years: atmospheric flight reaches the Moon." }
    ];

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

    const nodePositions = [0, 33.333, 66.666, 100];

    function updateUI() {
      // Update nodes and cards
      for (let i = 0; i < 4; i++) {
        const node = document.getElementById(`node-${i}`);
        const card = document.getElementById(`card-${i}`);
        
        if (i === currentStep) {
          node.classList.add('active');
          card.classList.add('active');
        } else {
          node.classList.remove('active');
          card.classList.remove('active');
        }

        if (i <= currentStep) {
          node.classList.add('reached');
        } else {
          node.classList.remove('reached');
        }
      }

      // Progress bar
      const progress = document.getElementById('progressLine');
      progress.style.width = nodePositions[currentStep] + '%';

      // Floating interval pill
      const pill = document.getElementById('intervalPill');
      const item = events[currentStep];

      if (currentStep === 0) {
        pill.style.opacity = '0';
      } else {
        const midPct = (nodePositions[currentStep - 1] + nodePositions[currentStep]) / 2;
        pill.style.left = midPct + '%';
        pill.textContent = `+${item.prevDelta} yrs`;
        pill.style.opacity = '1';
      }

      // Status text
      const status = document.getElementById('deltaStatus');
      status.innerHTML = `<span><strong>${item.year}:</strong> ${item.desc}</span>`;
    }

    function selectStep(stepIndex) {
      currentStep = stepIndex;
      updateUI();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % 4;
      updateUI();
    }

    function toggleAutoPlay() {
      isPlaying = !isPlaying;
      const playIcon = document.getElementById('playIcon');
      const playText = document.getElementById('playText');
      if (isPlaying) {
        playIcon.textContent = '⏸';
        playText.textContent = 'Auto';
        startTimer();
      } else {
        playIcon.textContent = '▶';
        playText.textContent = 'Play';
        clearInterval(timer);
      }
    }

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

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

OGE.5.RI.4

Aligned learning resources

Related diagrams