<!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, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background: #f8fafc;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      min-height: 100%;
      user-select: none;
    }

    /* Top Controls */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 380px;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 999px;
    }

    .btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 700;
      color: #64748b;
      border-radius: 999px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .btn.active {
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    /* Diagram Stage */
    .stage {
      width: 100%;
      max-width: 440px;
      aspect-ratio: 4 / 3;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Status Badge */
    .status-badge {
      font-size: 15px;
      font-weight: 800;
      padding: 6px 16px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.3s, color 0.3s;
    }

    .safe-badge {
      background: #dcfce7;
      color: #166534;
      border: 1.5px solid #86efac;
    }

    .danger-badge {
      background: #fee2e2;
      color: #991b1b;
      border: 1.5px solid #fca5a5;
    }

    /* CSS Animations */
    .droplet-goggles {
      animation: dropFlightSafe 3.2s infinite ease-in-out;
    }

    .droplet-nogoggles {
      animation: dropFlightDanger 3.2s infinite ease-in-out;
    }

    .ripple-ring {
      animation: rippleSafe 3.2s infinite ease-out;
      transform-origin: 236px 145px;
    }

    .splash-burst {
      animation: splashDanger 3.2s infinite ease-out;
      transform-origin: 275px 145px;
    }

    .tear-drop {
      animation: tearFall 3.2s infinite ease-in;
    }

    .happy-eye, .happy-mouth {
      transition: opacity 0.2s ease;
    }

    .ouch-eye, .ouch-mouth {
      animation: winceShake 3.2s infinite ease-in-out;
    }

    @keyframes dropFlightSafe {
      0%, 10% { transform: translate(0, 0) scale(0.6); opacity: 0; }
      15% { opacity: 1; transform: translate(0, 0) scale(1); }
      48% { transform: translate(162px, 10px) scale(1); opacity: 1; }
      52% { transform: translate(168px, 12px) scale(1.1, 0.7); opacity: 1; }
      70% { transform: translate(150px, 60px) scale(0.5); opacity: 0; }
      100% { transform: translate(150px, 60px) scale(0); opacity: 0; }
    }

    @keyframes rippleSafe {
      0%, 48% { opacity: 0; transform: scale(0.2); }
      52% { opacity: 0.9; }
      75% { opacity: 0; transform: scale(1.8); }
      100% { opacity: 0; }
    }

    @keyframes dropFlightDanger {
      0%, 10% { transform: translate(0, 0) scale(0.6); opacity: 0; }
      15% { opacity: 1; transform: translate(0, 0) scale(1); }
      50% { transform: translate(202px, 10px) scale(1); opacity: 1; }
      54% { transform: translate(204px, 10px) scale(1.2, 0.6); opacity: 0; }
      100% { opacity: 0; }
    }

    @keyframes splashDanger {
      0%, 50% { opacity: 0; transform: scale(0.3); }
      54% { opacity: 1; transform: scale(1); }
      75% { opacity: 0; transform: scale(1.6); }
      100% { opacity: 0; }
    }

    @keyframes winceShake {
      0%, 50% { transform: translate(0, 0); }
      54% { transform: translate(-2px, 1px); }
      58% { transform: translate(2px, -1px); }
      62% { transform: translate(-2px, 0); }
      66% { transform: translate(0, 0); }
      100% { transform: translate(0, 0); }
    }

    @keyframes tearFall {
      0%, 54% { opacity: 0; transform: translate(0, 0); }
      62% { opacity: 1; transform: translate(0, 4px); }
      85% { opacity: 0; transform: translate(0, 22px); }
      100% { opacity: 0; }
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button id="btnSafe" class="btn active" onclick="setMode(true)">
      <span>🥽</span> With Goggles
    </button>
    <button id="btnDanger" class="btn" onclick="setMode(false)">
      <span>⚠️</span> No Goggles
    </button>
  </div>

  
  <div class="stage">
    <svg viewBox="0 0 400 280">
      <defs>
        
        <linearGradient id="dropGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#38bdf8" />
          <stop offset="100%" stop-color="#2563eb" />
        </linearGradient>

        
        <linearGradient id="potionGrad" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#a855f7" />
          <stop offset="100%" stop-color="#6366f1" />
        </linearGradient>

        
        <linearGradient id="lensGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#0284c7" stop-opacity="0.3" />
          <stop offset="60%" stop-color="#38bdf8" stop-opacity="0.2" />
          <stop offset="100%" stop-color="#e0f2fe" stop-opacity="0.4" />
        </linearGradient>
      </defs>

      
      <g transform="translate(45, 140)">
        
        <polygon points="25,25 5,75 55,75 35,25" fill="none" stroke="#cbd5e1" stroke-width="4" stroke-linejoin="round" />
        <rect x="23" y="10" width="14" height="15" fill="none" stroke="#cbd5e1" stroke-width="4" stroke-linecap="round" />
        <line x1="20" y1="10" x2="40" y2="10" stroke="#94a3b8" stroke-width="4" stroke-linecap="round" />
        
        <polygon points="12,71 48,71 39,45 21,45" fill="url(#potionGrad)" />
        <ellipse cx="30" cy="45" rx="9" ry="3" fill="#c084fc" opacity="0.6" />
        
        <circle cx="26" cy="60" r="2.5" fill="#ffffff" opacity="0.7" />
        <circle cx="34" cy="53" r="1.5" fill="#ffffff" opacity="0.8" />
      </g>

      
      <g id="faceGroup">
        
        <circle cx="300" cy="150" r="62" fill="#fed7aa" />
        
        
        <path d="M 255 125 C 265 90, 340 90, 355 130 C 335 105, 275 105, 255 125 Z" fill="#9a3412" />
        
        
        <ellipse cx="360" cy="155" rx="8" ry="12" fill="#fdba74" />

        
        <path id="brow" d="M 268 126 Q 282 120 292 125" stroke="#7c2d12" stroke-width="3" stroke-linecap="round" fill="none" />

        
        <g id="eyeState">
          
          <g id="eyeHappy">
            <ellipse cx="280" cy="145" rx="11" ry="13" fill="#ffffff" />
            <circle cx="277" cy="145" r="7" fill="#1e293b" />
            <circle cx="275" cy="142" r="2.5" fill="#ffffff" />
            <ellipse cx="288" cy="165" rx="7" ry="4" fill="#fca5a5" opacity="0.6" />
          </g>

          
          <g id="eyeOuch" style="display: none;">
            <path class="ouch-eye" d="M 270 145 L 285 140 L 273 150 Z" fill="#9a3412" />
            <path class="ouch-eye" d="M 270 145 L 285 152" stroke="#7c2d12" stroke-width="3.5" stroke-linecap="round" />
            
            <path class="tear-drop" d="M 275 156 C 275 156, 272 163, 272 166 C 272 168, 274 170, 276 170 C 278 170, 280 168, 280 166 C 280 163, 277 156, 277 156 Z" fill="#38bdf8" />
          </g>
        </g>

        
        <path id="mouthHappy" d="M 268 180 Q 282 195 296 180" stroke="#9a3412" stroke-width="3.5" stroke-linecap="round" fill="none" />
        <ellipse id="mouthOuch" class="ouch-mouth" cx="278" cy="184" rx="6" ry="8" fill="#7c2d12" style="display: none;" />

        
        <g id="gogglesLayer">
          
          <path d="M 295 145 Q 330 147 362 153" stroke="#0284c7" stroke-width="5" fill="none" stroke-linecap="round" />
          
          <path d="M 245 118 C 230 135, 230 160, 245 174 C 270 178, 298 172, 302 146 C 298 120, 270 114, 245 118 Z" fill="url(#lensGrad)" stroke="#0284c7" stroke-width="3.5" stroke-linejoin="round" />
          
          <path d="M 242 134 Q 237 146 242 158" stroke="#ffffff" stroke-width="3" stroke-linecap="round" fill="none" opacity="0.8" />
        </g>
      </g>

      
      
      <g id="safeAnimGroup">
        <circle class="ripple-ring" cx="236" cy="145" r="14" fill="none" stroke="#0284c7" stroke-width="3" opacity="0" />
        <circle class="ripple-ring" cx="236" cy="145" r="22" fill="none" stroke="#38bdf8" stroke-width="2" opacity="0" style="animation-delay: 0.08s;" />
        
        
        <path class="droplet-goggles" d="M 75 140 C 75 140, 68 147, 68 151 C 68 155, 71 158, 75 158 C 79 158, 82 155, 82 151 C 82 147, 75 140, 75 140 Z" fill="url(#dropGrad)" />
      </g>

      
      <g id="dangerAnimGroup" style="display: none;">
        
        <g class="splash-burst" opacity="0">
          <circle cx="270" cy="138" r="3" fill="#0284c7" />
          <circle cx="278" cy="133" r="2.5" fill="#38bdf8" />
          <circle cx="268" cy="154" r="3" fill="#2563eb" />
          <circle cx="262" cy="145" r="2" fill="#0284c7" />
        </g>

        
        <path class="droplet-nogoggles" d="M 75 140 C 75 140, 68 147, 68 151 C 68 155, 71 158, 75 158 C 79 158, 82 155, 82 151 C 82 147, 75 140, 75 140 Z" fill="url(#dropGrad)" />
      </g>
    </svg>
  </div>

  
  <div id="statusBadge" class="status-badge safe-badge">
    <span>🛡️</span> Eyes Safe & Dry
  </div>

  <script>
    function setMode(isSafe) {
      const btnSafe = document.getElementById('btnSafe');
      const btnDanger = document.getElementById('btnDanger');
      const goggles = document.getElementById('gogglesLayer');
      const eyeHappy = document.getElementById('eyeHappy');
      const eyeOuch = document.getElementById('eyeOuch');
      const mouthHappy = document.getElementById('mouthHappy');
      const mouthOuch = document.getElementById('mouthOuch');
      const brow = document.getElementById('brow');
      const safeAnim = document.getElementById('safeAnimGroup');
      const dangerAnim = document.getElementById('dangerAnimGroup');
      const badge = document.getElementById('statusBadge');

      if (isSafe) {
        btnSafe.classList.add('active');
        btnDanger.classList.remove('active');

        goggles.style.display = 'block';
        eyeHappy.style.display = 'block';
        eyeOuch.style.display = 'none';
        mouthHappy.style.display = 'block';
        mouthOuch.style.display = 'none';
        brow.setAttribute('d', 'M 268 126 Q 282 120 292 125');

        safeAnim.style.display = 'block';
        dangerAnim.style.display = 'none';

        badge.className = 'status-badge safe-badge';
        badge.innerHTML = '<span>🛡️</span> Eyes Safe & Dry';
      } else {
        btnDanger.classList.add('active');
        btnSafe.classList.remove('active');

        goggles.style.display = 'none';
        eyeHappy.style.display = 'none';
        eyeOuch.style.display = 'block';
        mouthHappy.style.display = 'none';
        mouthOuch.style.display = 'block';
        brow.setAttribute('d', 'M 268 132 Q 280 136 292 128');

        safeAnim.style.display = 'none';
        dangerAnim.style.display = 'block';

        badge.className = 'status-badge danger-badge';
        badge.innerHTML = '<span>⚠️</span> Liquid In Eye!';
      }
    }
  </script>
</body>
</html>

Staying Safe During Science Explorations

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

    .header {
      text-align: center;
      margin-bottom: 14px;
    }

    .title {
      font-size: 20px;
      font-weight: 800;
      color: #0f172a;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .badges-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      width: 100%;
      max-width: 480px;
      margin-bottom: 14px;
    }

    .badge-btn {
      background: #f8fafc;
      border: 2px solid #94a3b8;
      border-radius: 16px;
      padding: 14px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
      touch-action: manipulation;
      outline: none;
    }

    .badge-btn:hover {
      border-color: #64748b;
      background: #f1f5f9;
    }

    .badge-btn:focus-visible {
      outline: 3px solid #0284c7;
      outline-offset: 2px;
    }

    .badge-icon {
      font-size: 38px;
      line-height: 1.1;
      margin-bottom: 8px;
      filter: grayscale(35%) opacity(90%);
      transition: filter 0.25s ease;
    }

    .badge-label {
      font-size: 14px;
      font-weight: 800;
      color: #1e293b;
      text-align: center;
      line-height: 1.25;
      transition: color 0.25s ease;
    }

    .badge-sub {
      font-size: 12px;
      font-weight: 700;
      color: #334155;
      margin-top: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      text-align: center;
      transition: color 0.25s ease;
    }

    .star-check {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #94a3b8;
      color: #ffffff;
      font-size: 12px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.25s ease, color 0.25s ease;
    }

    /* Active Golden State */
    .badge-btn.unlocked {
      background: #fffbeb;
      border-color: #d97706;
      box-shadow: 0 4px 14px rgba(217, 119, 6, 0.25);
    }

    .badge-btn.unlocked .badge-icon {
      filter: grayscale(0%) opacity(100%);
    }

    .badge-btn.unlocked .badge-label {
      color: #92400e;
    }

    .badge-btn.unlocked .badge-sub {
      color: #b45309;
    }

    .badge-btn.unlocked .star-check {
      background: #d97706;
      color: #ffffff;
    }

    .status-bar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #f1f5f9;
      border: 2px solid #cbd5e1;
      border-radius: 999px;
      padding: 8px 20px;
      font-size: 14px;
      font-weight: 700;
      color: #1e293b;
      transition: all 0.25s ease;
    }

    .status-bar.ready {
      background: #ecfdf5;
      border-color: #059669;
      color: #065f46;
      box-shadow: 0 3px 12px rgba(5, 150, 105, 0.2);
    }

    @media (max-width: 380px) {
      body { padding: 12px 8px; }
      .badge-icon { font-size: 32px; margin-bottom: 6px; }
      .badge-label { font-size: 13px; }
      .badge-sub { font-size: 11px; }
      .badge-btn { padding: 10px 4px; }
      .status-bar { font-size: 13px; padding: 6px 14px; }
      .title { font-size: 18px; }
    }
  </style>
</head>
<body>

  <div class="header">
    <div class="title">🧪 Science Safety Checklist</div>
  </div>

  <div class="badges-grid" role="group" aria-label="Science Safety Checklist">
    <button class="badge-btn" id="b1" aria-pressed="false">
      <span class="star-check">✓</span>
      <span class="badge-icon">👂</span>
      <span class="badge-label">Ears<br>Listening</span>
      <span class="badge-sub">⏸️ Wait</span>
    </button>

    <button class="badge-btn" id="b2" aria-pressed="false">
      <span class="star-check">✓</span>
      <span class="badge-icon">🥽</span>
      <span class="badge-label">Goggles<br>On</span>
      <span class="badge-sub">👁️ Shield</span>
    </button>

    <button class="badge-btn" id="b3" aria-pressed="false">
      <span class="star-check">✓</span>
      <span class="badge-icon">🤲</span>
      <span class="badge-label">Gentle<br>Hands</span>
      <span class="badge-sub">🚫👅 No Taste</span>
    </button>
  </div>

  <div class="status-bar" id="status">
    <span>👆 Tap badges to get ready!</span>
  </div>

  <script>
    let audioCtx = null;

    function playChime(isFinal) {
      try {
        if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        if (audioCtx.state === 'suspended') audioCtx.resume();

        const notes = isFinal ? [523.25, 659.25, 783.99, 1046.50] : [587.33, 880.00];
        notes.forEach((freq, idx) => {
          const osc = audioCtx.createOscillator();
          const gain = audioCtx.createGain();
          const t = audioCtx.currentTime + (idx * 0.08);

          osc.type = 'triangle';
          osc.frequency.setValueAtTime(freq, t);

          gain.gain.setValueAtTime(0.2, t);
          gain.gain.exponentialRampToValueAtTime(0.001, t + 0.35);

          osc.connect(gain);
          gain.connect(audioCtx.destination);

          osc.start(t);
          osc.stop(t + 0.35);
        });
      } catch (e) {}
    }

    const buttons = [
      document.getElementById('b1'),
      document.getElementById('b2'),
      document.getElementById('b3')
    ];
    const statusEl = document.getElementById('status');

    function updateStatus() {
      const activeCount = buttons.filter(btn => btn.classList.contains('unlocked')).length;
      if (activeCount === 3) {
        statusEl.className = 'status-bar ready';
        statusEl.innerHTML = '<span>🌟 Ready for Science!</span>';
      } else if (activeCount === 0) {
        statusEl.className = 'status-bar';
        statusEl.innerHTML = '<span>👆 Tap badges to get ready!</span>';
      } else {
        statusEl.className = 'status-bar';
        statusEl.innerHTML = `<span>⭐ ${activeCount} of 3 Badges Ready</span>`;
      }
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        const isNowUnlocked = btn.classList.toggle('unlocked');
        btn.setAttribute('aria-pressed', isNowUnlocked ? 'true' : 'false');
        const star = btn.querySelector('.star-check');
        star.textContent = isNowUnlocked ? '★' : '✓';

        const totalActive = buttons.filter(b => b.classList.contains('unlocked')).length;
        if (isNowUnlocked) {
          playChime(totalActive === 3);
        }
        updateStatus();
      });
    });
  </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; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px;
      user-select: none;
    }

    /* State Switcher Tabs */
    .tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 360px;
    }
    .tab-btn {
      flex: 1;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      padding: 8px 12px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.25s ease;
    }
    .tab-btn.active-wait {
      background: #fef3c7;
      border-color: #f59e0b;
      color: #b45309;
    }
    .tab-btn.active-go {
      background: #dcfce7;
      border-color: #22c55e;
      color: #15803d;
    }

    /* Main Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 360px;
      height: 240px;
      background: #ffffff;
      border-radius: 20px;
      border: 2px solid #e2e8f0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px 12px;
    }

    /* Speech Bubble */
    .bubble {
      background: #f1f5f9;
      border: 2px solid #cbd5e1;
      border-radius: 16px;
      padding: 6px 16px;
      font-size: 16px;
      font-weight: 800;
      position: relative;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .bubble::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 8px 8px 0;
      border-style: solid;
      border-color: #cbd5e1 transparent transparent;
    }
    .bubble.wait {
      background: #fffbeb;
      border-color: #fcd34d;
      color: #b45309;
    }
    .bubble.wait::after { border-color: #fcd34d transparent transparent; }
    .bubble.go {
      background: #ecfdf5;
      border-color: #86efac;
      color: #15803d;
    }
    .bubble.go::after { border-color: #86efac transparent transparent; }

    /* Science Beaker / Potion */
    .potion-area {
      font-size: 44px;
      line-height: 1;
      position: relative;
      transition: transform 0.3s ease;
    }
    .sparkle {
      position: absolute;
      font-size: 18px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .sparkle-l { top: -4px; left: -18px; }
    .sparkle-r { top: -4px; right: -18px; }
    .stage.is-go .sparkle { opacity: 1; }

    /* Table & Hands Area */
    .table-zone {
      width: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Yellow Safety Line */
    .safety-line {
      width: 100%;
      height: 6px;
      background: #facc15;
      border-radius: 3px;
      position: relative;
      transition: background 0.3s ease;
    }
    .safety-label {
      position: absolute;
      top: -16px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.5px;
      color: #b45309;
      white-space: nowrap;
      text-transform: uppercase;
    }
    .stage.is-go .safety-line {
      background: #86efac;
    }
    .stage.is-go .safety-label {
      color: #15803d;
    }

    /* Hands */
    .hands {
      font-size: 34px;
      margin-top: 6px;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      display: flex;
      gap: 28px;
    }
    .stage.is-go .hands {
      transform: translateY(-22px);
    }

    /* Main Action Button */
    .action-btn {
      width: 100%;
      max-width: 360px;
      padding: 12px;
      border: none;
      border-radius: 14px;
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: transform 0.1s ease, filter 0.2s ease;
      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    }
    .action-btn:active {
      transform: scale(0.98);
    }
    .action-btn.btn-wait {
      background: #22c55e;
      color: #ffffff;
    }
    .action-btn.btn-go {
      background: #f59e0b;
      color: #ffffff;
    }
  </style>
</head>
<body>

  
  <div class="tabs">
    <button class="tab-btn active-wait" id="tabWait" onclick="setState('wait')">
      <span>👂</span> 1. Listen & Wait
    </button>
    <button class="tab-btn" id="tabGo" onclick="setState('go')">
      <span>✅</span> 2. Explore!
    </button>
  </div>

  
  <div class="stage" id="stage">
    <div class="bubble wait" id="speechBubble">
      <span id="speechIcon">👂</span>
      <span id="speechText">"Ready, set..."</span>
    </div>

    <div class="potion-area">
      <span class="sparkle sparkle-l">✨</span>
      <span>🧪</span>
      <span class="sparkle sparkle-r">🫧</span>
    </div>

    <div class="table-zone">
      <div class="safety-line">
        <span class="safety-label" id="lineLabel">Yellow Wait Line</span>
      </div>
      <div class="hands">
        <span>✋</span>
        <span>✋</span>
      </div>
    </div>
  </div>

  
  <button class="action-btn btn-wait" id="actionBtn" onclick="toggleState()">
    <span id="btnIcon">🟢</span>
    <span id="btnText">Ready! Tap for "Go!"</span>
  </button>

  <script>
    let currentState = 'wait';

    function playTone(freq, type = 'sine', duration = 0.25) {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = type;
        osc.frequency.value = freq;
        osc.connect(gain);
        gain.connect(ctx.destination);
        gain.gain.setValueAtTime(0.2, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration);
        osc.start();
        osc.stop(ctx.currentTime + duration);
      } catch (e) {}
    }

    function setState(state) {
      currentState = state;
      const stage = document.getElementById('stage');
      const tabWait = document.getElementById('tabWait');
      const tabGo = document.getElementById('tabGo');
      const bubble = document.getElementById('speechBubble');
      const speechIcon = document.getElementById('speechIcon');
      const speechText = document.getElementById('speechText');
      const lineLabel = document.getElementById('lineLabel');
      const actionBtn = document.getElementById('actionBtn');
      const btnIcon = document.getElementById('btnIcon');
      const btnText = document.getElementById('btnText');

      if (state === 'go') {
        playTone(587.33, 'triangle', 0.3); // High friendly chime (D5)
        stage.classList.add('is-go');

        tabWait.className = 'tab-btn';
        tabGo.className = 'tab-btn active-go';

        bubble.className = 'bubble go';
        speechIcon.textContent = '✅';
        speechText.textContent = '"Go! Explore!"';

        lineLabel.textContent = 'Safe to Touch';

        actionBtn.className = 'action-btn btn-go';
        btnIcon.textContent = '⏸';
        btnText.textContent = 'Reset to "Wait"';
      } else {
        playTone(392.00, 'sine', 0.2); // Gentle low cue (G4)
        stage.classList.remove('is-go');

        tabWait.className = 'tab-btn active-wait';
        tabGo.className = 'tab-btn';

        bubble.className = 'bubble wait';
        speechIcon.textContent = '👂';
        speechText.textContent = '"Ready, set..."';

        lineLabel.textContent = 'Yellow Wait Line';

        actionBtn.className = 'action-btn btn-wait';
        btnIcon.textContent = '🟢';
        btnText.textContent = 'Ready! Tap for "Go!"';
      }
    }

    function toggleState() {
      setState(currentState === 'wait' ? 'go' : 'wait');
    }
  </script>
</body>
</html>

OGS.1.SEP.2

Aligned learning resources

Related diagrams