<!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, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
    }

    @media (max-width: 480px) {
      .cards-grid {
        grid-template-columns: 1fr;
      }
    }

    .char-card {
      background: #ffffff;
      border-radius: 14px;
      border: 1px solid #e2e8f0;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      position: relative;
    }

    .card-excited {
      border-top: 4px solid #f59e0b;
    }

    .card-exhausted {
      border-top: 4px solid #64748b;
    }

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

    .card-title {
      font-size: 15px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .emoji-badge {
      font-size: 22px;
      line-height: 1;
    }

    .dialogue-box {
      background: #f8fafc;
      border-radius: 8px;
      padding: 10px;
      font-size: 13.5px;
      line-height: 1.4;
      color: #334155;
      border-left: 3px solid #cbd5e1;
    }

    .dialogue-excited {
      border-left-color: #f59e0b;
      background: #fffbeb;
    }

    .dialogue-exhausted {
      border-left-color: #94a3b8;
      background: #f1f5f9;
    }

    .wave-container {
      background: #ffffff;
      border: 1px solid #f1f5f9;
      border-radius: 8px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
    }

    svg.soundwave {
      width: 100%;
      height: 100%;
    }

    .tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .tag {
      font-size: 11px;
      font-weight: 600;
      padding: 4px 8px;
      border-radius: 6px;
      letter-spacing: 0.2px;
    }

    .tag-excited {
      background: #fef3c7;
      color: #b45309;
    }

    .tag-exhausted {
      background: #e2e8f0;
      color: #475569;
    }

    .audio-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 7px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #1e293b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
      width: 100%;
      user-select: none;
    }

    .audio-btn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }

    .audio-btn:active {
      background: #e2e8f0;
    }

    .audio-btn.playing {
      box-shadow: 0 0 0 2px #3b82f6;
      border-color: #3b82f6;
    }
  </style>
</head>
<body>

  <div class="cards-grid">
    
    <div class="char-card card-excited">
      <div class="card-header">
        <span class="card-title">Excited <span class="emoji-badge">🎉</span></span>
      </div>

      <div class="dialogue-box dialogue-excited">
        <strong>&ldquo;We are finally here!&rdquo;</strong> cheered Leo, jumping up and down.
      </div>

      
      <div class="wave-container">
        <svg class="soundwave" viewBox="0 0 200 48" preserveAspectRatio="none">
          <path d="M 0,24 Q 10,4 20,24 T 40,24 T 60,24 T 80,24 T 100,24 T 120,24 T 140,24 T 160,24 T 180,24 T 200,24" 
                fill="none" stroke="#f59e0b" stroke-width="2.5" stroke-linecap="round"/>
        </svg>
      </div>

      <div class="tag-list">
        <span class="tag tag-excited">High Pitch</span>
        <span class="tag tag-excited">Fast Rate</span>
        <span class="tag tag-excited">Loud &amp; Bright</span>
      </div>

      <button class="audio-btn" id="btnExcited" onclick="playExcitedTone()">
        <span>🔊</span> Hear Tone Pitch
      </button>
    </div>

    
    <div class="char-card card-exhausted">
      <div class="card-header">
        <span class="card-title">Exhausted <span class="emoji-badge">😓</span></span>
      </div>

      <div class="dialogue-box dialogue-exhausted">
        <strong>&ldquo;We are finally here...&rdquo;</strong> groaned Mia, dropping her backpack.
      </div>

      
      <div class="wave-container">
        <svg class="soundwave" viewBox="0 0 200 48" preserveAspectRatio="none">
          <path d="M 0,24 Q 25,36 50,24 T 100,28 T 150,32 T 200,36" 
                fill="none" stroke="#64748b" stroke-width="2.5" stroke-linecap="round"/>
        </svg>
      </div>

      <div class="tag-list">
        <span class="tag tag-exhausted">Low Pitch</span>
        <span class="tag tag-exhausted">Slow Rate</span>
        <span class="tag tag-exhausted">Weary Sigh</span>
      </div>

      <button class="audio-btn" id="btnExhausted" onclick="playExhaustedTone()">
        <span>🔊</span> Hear Tone Pitch
      </button>
    </div>
  </div>

  <script>
    let audioCtx = null;

    function getAudioContext() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
      return audioCtx;
    }

    function playExcitedTone() {
      const ctx = getAudioContext();
      const btn = document.getElementById('btnExcited');
      btn.classList.add('playing');

      // Fast, rising, bright notes (Leo jumping)
      const notes = [440, 554.37, 659.25, 880];
      const now = ctx.currentTime;

      notes.forEach((freq, idx) => {
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'triangle';
        osc.frequency.setValueAtTime(freq, now + idx * 0.1);

        gain.gain.setValueAtTime(0.2, now + idx * 0.1);
        gain.gain.exponentialRampToValueAtTime(0.001, now + idx * 0.1 + 0.18);

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

        osc.start(now + idx * 0.1);
        osc.stop(now + idx * 0.1 + 0.18);
      });

      setTimeout(() => btn.classList.remove('playing'), 600);
    }

    function playExhaustedTone() {
      const ctx = getAudioContext();
      const btn = document.getElementById('btnExhausted');
      btn.classList.add('playing');

      // Slow, dragging, low descending slide (Mia sighing)
      const now = ctx.currentTime;
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();

      osc.type = 'sine';
      osc.frequency.setValueAtTime(220, now);
      osc.frequency.exponentialRampToValueAtTime(110, now + 0.9);

      gain.gain.setValueAtTime(0.25, now);
      gain.gain.linearRampToValueAtTime(0.001, now + 0.95);

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

      osc.start(now);
      osc.stop(now + 0.95);

      setTimeout(() => btn.classList.remove('playing'), 1000);
    }
  </script>
</body>
</html>

Reading Literature with Purpose and Character Expression

<!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">
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      user-select: none;
    }
    
    .header-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      gap: 8px;
    }
    
    .nav-tabs {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    
    .tab-btn {
      padding: 6px 12px;
      border-radius: 20px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }
    
    .tab-btn.active-0 { background: #6b21a8; color: #fff; border-color: #6b21a8; }
    .tab-btn.active-1 { background: #d97706; color: #fff; border-color: #d97706; }
    .tab-btn.active-2 { background: #059669; color: #fff; border-color: #059669; }

    .play-audio-btn {
      padding: 6px 14px;
      border-radius: 20px;
      border: 1px solid #22b7ff;
      background: #f0f9ff;
      color: #0284c7;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s ease;
      white-space: nowrap;
    }
    .play-audio-btn:hover {
      background: #e0f2fe;
    }

    .cards-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .script-card {
      border-radius: 12px;
      padding: 12px 14px;
      background: #ffffff;
      border: 2px solid transparent;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      transition: all 0.25s ease;
      cursor: pointer;
      position: relative;
    }
    
    .script-card.active {
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .script-card[data-idx="0"].active { border-color: #6b21a8; background: #faf5ff; }
    .script-card[data-idx="1"].active { border-color: #d97706; background: #fffbeb; }
    .script-card[data-idx="2"].active { border-color: #059669; background: #ecfdf5; }

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

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: 0.2px;
    }
    .badge-narrator { background: #6b21a8; }
    .badge-pip { background: #d97706; }
    .badge-barnaby { background: #059669; }

    .pitch-tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 6px;
      border-radius: 4px;
      background: rgba(0,0,0,0.05);
    }

    .words-flow {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 8px 10px;
    }

    .word-unit {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .pitch-guide {
      height: 22px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .pitch-bar {
      width: 14px;
      border-radius: 3px;
      transition: height 0.3s ease, background-color 0.2s ease;
    }

    /* Pitch levels */
    .p-deep { height: 6px; background: #059669; opacity: 0.9; }
    .p-low { height: 10px; background: #6b21a8; opacity: 0.8; }
    .p-mid { height: 14px; background: #6b21a8; opacity: 0.8; }
    .p-high { height: 20px; background: #d97706; }
    .p-peak { height: 22px; background: #d97706; }

    .tremble {
      animation: trembleAnim 0.35s infinite alternate ease-in-out;
    }
    @keyframes trembleAnim {
      0% { transform: translateY(0px) scaleY(1); }
      100% { transform: translateY(-3px) scaleY(1.15); }
    }

    .word-text {
      font-size: 15px;
      font-weight: 500;
      color: #1e2945;
      line-height: 1.2;
    }

    .active-word {
      font-weight: 700;
      transform: scale(1.08);
      transition: transform 0.15s ease;
    }

    .legend-row {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-top: 10px;
      font-size: 11px;
      color: #64748b;
      font-weight: 600;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .legend-bar {
      width: 6px;
      border-radius: 2px;
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <div class="nav-tabs">
      <button class="tab-btn active-0" data-target="0">📖 Narrator</button>
      <button class="tab-btn" data-target="1">🐰 Pip</button>
      <button class="tab-btn" data-target="2">🦡 Barnaby</button>
    </div>
    <button class="play-audio-btn" id="playPitchBtn">🔊 Hear Tone</button>
  </div>

  <div class="cards-container">
    
    <div class="script-card active" data-idx="0">
      <div class="card-top">
        <span class="badge badge-narrator">📖 Narrator</span>
        <span class="pitch-tag" style="color: #6b21a8;">Mysterious · Steady Pitch</span>
      </div>
      <div class="words-flow">
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-mid"></div></div><span class="word-text">The</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-low"></div></div><span class="word-text">dark</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-low"></div></div><span class="word-text">cave</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-mid"></div></div><span class="word-text">rumbled</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-deep" style="background:#6b21a8;"></div></div><span class="word-text">deep</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-deep" style="background:#4a148c; height: 5px;"></div></div><span class="word-text">underground.</span></div>
      </div>
    </div>

    
    <div class="script-card" data-idx="1">
      <div class="card-top">
        <span class="badge badge-pip">🐰 Pip the Rabbit</span>
        <span class="pitch-tag" style="color: #d97706;">High &amp; Trembling</span>
      </div>
      <div class="words-flow">
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-high tremble"></div></div><span class="word-text">"Did</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-mid tremble"></div></div><span class="word-text">you</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-high tremble"></div></div><span class="word-text">hear</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-peak tremble"></div></div><span class="word-text">that?"</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-mid"></div></div><span class="word-text">Pip</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-peak tremble"></div></div><span class="word-text">squeaked,</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-high tremble"></div></div><span class="word-text">shivering</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-mid"></div></div><span class="word-text">in</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-high tremble"></div></div><span class="word-text">the</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-peak tremble"></div></div><span class="word-text">cold.</span></div>
      </div>
    </div>

    
    <div class="script-card" data-idx="2">
      <div class="card-top">
        <span class="badge badge-barnaby">🦡 Barnaby the Badger</span>
        <span class="pitch-tag" style="color: #059669;">Brave &amp; Deep</span>
      </div>
      <div class="words-flow">
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-deep"></div></div><span class="word-text">"Stay</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-deep"></div></div><span class="word-text">close.</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-low" style="background:#059669;"></div></div><span class="word-text">I</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-low" style="background:#059669;"></div></div><span class="word-text">will</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-deep"></div></div><span class="word-text">protect</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-deep"></div></div><span class="word-text">us,"</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-low" style="background:#059669;"></div></div><span class="word-text">Barnaby</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-deep"></div></div><span class="word-text">growled,</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-deep"></div></div><span class="word-text">stepping</span></div>
        <div class="word-unit"><div class="pitch-guide"><div class="pitch-bar p-deep"></div></div><span class="word-text">forward.</span></div>
      </div>
    </div>
  </div>

  <div class="legend-row">
    <div class="legend-item"><div class="legend-bar" style="height:18px;background:#d97706;"></div> High Pitch</div>
    <div class="legend-item"><div class="legend-bar" style="height:12px;background:#6b21a8;"></div> Mid Pitch</div>
    <div class="legend-item"><div class="legend-bar" style="height:6px;background:#059669;"></div> Low / Deep Pitch</div>
  </div>

  <script>
    let activeIdx = 0;
    const cards = Array.from(document.querySelectorAll('.script-card'));
    const tabBtns = Array.from(document.querySelectorAll('.tab-btn'));
    const playBtn = document.getElementById('playPitchBtn');

    // Pitch contours for sound synthesis
    const pitches = [
      [180, 160, 150, 175, 130, 110],                      // Narrator
      [480, 420, 520, 620, 460, 640, 580, 490, 540, 600], // Pip (high, trembling)
      [120, 110, 135, 130, 105, 95, 125, 90, 95, 85]      // Barnaby (deep)
    ];

    function selectCard(index, playAudio = false) {
      activeIdx = index;
      cards.forEach((card, i) => {
        if (i === index) {
          card.classList.add('active');
        } else {
          card.classList.remove('active');
        }
      });

      tabBtns.forEach((btn, i) => {
        btn.className = 'tab-btn';
        if (i === index) {
          btn.classList.add('active-' + index);
        }
      });

      if (playAudio) {
        playPitchSequence(index);
      }
    }

    tabBtns.forEach((btn, i) => {
      btn.addEventListener('click', () => selectCard(i, false));
    });

    cards.forEach((card, i) => {
      card.addEventListener('click', () => selectCard(i, true));
    });

    playBtn.addEventListener('click', () => {
      playPitchSequence(activeIdx);
    });

    function playPitchSequence(charIdx) {
      const AudioCtx = window.AudioContext || window.webkitAudioContext;
      if (!AudioCtx) return;
      const ctx = new AudioCtx();
      
      const freqs = pitches[charIdx];
      const wordElements = cards[charIdx].querySelectorAll('.word-unit');
      const stepDuration = 0.28;
      
      freqs.forEach((freq, i) => {
        const startTime = ctx.currentTime + i * stepDuration;
        
        // Highlight word in sync
        setTimeout(() => {
          wordElements.forEach(w => w.classList.remove('active-word'));
          if (wordElements[i]) wordElements[i].classList.add('active-word');
        }, i * stepDuration * 1000);

        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        
        if (charIdx === 1) { // Pip vibrato
          osc.type = 'triangle';
          const vibrato = ctx.createOscillator();
          const vibGain = ctx.createGain();
          vibrato.frequency.value = 14;
          vibGain.gain.value = 25;
          vibrato.connect(osc.frequency);
          vibrato.start(startTime);
          vibrato.stop(startTime + stepDuration);
        } else if (charIdx === 2) { // Barnaby saw/deep
          osc.type = 'sawtooth';
        } else { // Narrator sine
          osc.type = 'sine';
        }
        
        osc.frequency.setValueAtTime(freq, startTime);
        gain.gain.setValueAtTime(0.18, startTime);
        gain.gain.exponentialRampToValueAtTime(0.001, startTime + stepDuration - 0.03);
        
        osc.connect(gain);
        gain.connect(ctx.destination);
        
        osc.start(startTime);
        osc.stop(startTime + stepDuration);
      });

      // Clear word highlights after sequence
      setTimeout(() => {
        wordElements.forEach(w => w.classList.remove('active-word'));
      }, freqs.length * stepDuration * 1000);
    }
  </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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      gap: 10px;
    }

    .comparison-container {
      width: 100%;
      max-width: 500px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .voice-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    }

    .voice-card.robot {
      border-color: #cbd5e1;
      background: #f8fafc;
    }

    .voice-card.expressive {
      border-color: #bfdbfe;
      background: #f0f7ff;
    }

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

    .speaker-info {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .avatar {
      font-size: 24px;
      line-height: 1;
    }

    .speaker-label {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.2px;
    }

    .robot .speaker-label {
      color: #64748b;
    }

    .expressive .speaker-label {
      color: #2563eb;
    }

    .sound-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.2s, border-color 0.2s;
    }

    .sound-btn:active {
      background: #e2e8f0;
    }

    .expressive .sound-btn {
      border-color: #93c5fd;
      color: #1d4ed8;
    }

    .expressive .sound-btn:active {
      background: #dbeafe;
    }

    .quote-box {
      font-size: 14px;
      font-weight: 600;
      color: #334155;
      padding-left: 2px;
    }

    .expressive .quote-box {
      color: #0f172a;
    }

    .wave-display {
      width: 100%;
      height: 48px;
      position: relative;
    }

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

    /* Animated soundwave */
    .wave-path {
      stroke-dasharray: 8, 4;
      animation: waveFlow 4s linear infinite;
    }

    @keyframes waveFlow {
      from { stroke-dashoffset: 48; }
      to { stroke-dashoffset: 0; }
    }

    /* Sparkle pulse */
    .sparkle {
      animation: pulseGlow 2s ease-in-out infinite alternate;
      transform-origin: center;
    }
    .sparkle:nth-child(2) { animation-delay: 0.6s; }
    .sparkle:nth-child(3) { animation-delay: 1.2s; }

    @keyframes pulseGlow {
      0% { opacity: 0.3; transform: scale(0.8); }
      100% { opacity: 1; transform: scale(1.2); }
    }

    .footer-label {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      text-align: center;
      background: #e0f2fe;
      border: 1px solid #bae6fd;
      color: #0369a1;
      padding: 6px 14px;
      border-radius: 20px;
      margin-top: 2px;
    }
  </style>
</head>
<body>

  <div class="comparison-container">
    
    <div class="voice-card robot">
      <div class="card-header">
        <div class="speaker-info">
          <span class="avatar">🤖</span>
          <span class="speaker-label">Robot Voice (Flat Pitch)</span>
        </div>
        <button class="sound-btn" onclick="playRobotSound()" aria-label="Listen to robot voice">
          <span>▶</span> Flat
        </button>
      </div>
      
      <div class="quote-box">"I found the treasure."</div>

      <div class="wave-display">
        <svg viewBox="0 0 400 40" preserveAspectRatio="none">
          
          <line x1="0" y1="20" x2="400" y2="20" stroke="#94a3b8" stroke-width="4" stroke-linecap="round" />
          <line x1="0" y1="20" x2="400" y2="20" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="6, 6" />
        </svg>
      </div>
    </div>

    
    <div class="voice-card expressive">
      <div class="card-header">
        <div class="speaker-info">
          <span class="avatar">🧒</span>
          <span class="speaker-label">Expressive Voice (Pitch Inflection)</span>
        </div>
        <button class="sound-btn" onclick="playExpressiveSound()" aria-label="Listen to expressive voice">
          <span>▶</span> Lively
        </button>
      </div>

      <div class="quote-box">"I found the treasure!" ✨</div>

      <div class="wave-display">
        <svg viewBox="0 0 400 40" preserveAspectRatio="none">
          <defs>
            <linearGradient id="waveGrad" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" stop-color="#3b82f6" />
              <stop offset="50%" stop-color="#2563eb" />
              <stop offset="100%" stop-color="#38bdf8" />
            </linearGradient>
          </defs>
          
          <path d="M 0,25 C 50,25 65,34 100,34 C 145,34 165,6 210,6 C 255,6 275,32 315,32 C 350,32 370,10 400,10" 
                fill="none" stroke="url(#waveGrad)" stroke-width="4" stroke-linecap="round" class="wave-path" />
          
          
          <g class="sparkle" transform="translate(210, 6)">
            <text x="0" y="0" font-size="14" fill="#eab308" text-anchor="middle" dominant-baseline="central">✦</text>
          </g>
          <g class="sparkle" transform="translate(400, 10)">
            <text x="0" y="0" font-size="13" fill="#eab308" text-anchor="middle" dominant-baseline="central">✦</text>
          </g>
          <g class="sparkle" transform="translate(100, 34)">
            <text x="0" y="0" font-size="11" fill="#f59e0b" text-anchor="middle" dominant-baseline="central">✦</text>
          </g>
        </svg>
      </div>
    </div>
  </div>

  <div class="footer-label">
    Voice Inflection brings characters to life!
  </div>

  <script>
    let audioCtx = null;

    function getAudioContext() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
      return audioCtx;
    }

    function playRobotSound() {
      const ctx = getAudioContext();
      const notes = [190, 190, 190, 190, 190]; // Flat monotone pitch
      const now = ctx.currentTime;
      
      notes.forEach((freq, i) => {
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sawtooth';
        osc.frequency.setValueAtTime(freq, now + i * 0.22);
        
        gain.gain.setValueAtTime(0.08, now + i * 0.22);
        gain.gain.exponentialRampToValueAtTime(0.001, now + i * 0.22 + 0.18);
        
        osc.connect(gain);
        gain.connect(ctx.destination);
        
        osc.start(now + i * 0.22);
        osc.stop(now + i * 0.22 + 0.19);
      });
    }

    function playExpressiveSound() {
      const ctx = getAudioContext();
      const pitches = [260, 310, 480, 370, 520]; // Dynamic rising/falling pitches
      const now = ctx.currentTime;

      pitches.forEach((freq, i) => {
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(freq, now + i * 0.2);
        
        gain.gain.setValueAtTime(0.15, now + i * 0.2);
        gain.gain.exponentialRampToValueAtTime(0.001, now + i * 0.2 + 0.22);
        
        osc.connect(gain);
        gain.connect(ctx.destination);
        
        osc.start(now + i * 0.2);
        osc.stop(now + i * 0.2 + 0.23);
      });
    }
  </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: #ffffff;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .main-wrap {
      width: 100%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Sentence display */
    .sentence-box {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 20px 16px;
      font-size: 20px;
      line-height: 1.6;
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 4px 6px;
    }

    .token {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.25s ease;
      box-shadow: 0 0 0 2px transparent;
    }

    .token:hover {
      box-shadow: 0 0 0 2px #cbd5e1;
    }

    /* Token color themes */
    .token-quotes {
      color: #0284c7;
      background: #e0f2fe;
    }
    .token-punct {
      color: #e11d48;
      background: #ffe4e6;
    }
    .token-tag {
      color: #ea580c;
      background: #ffedd5;
    }
    .token-action {
      color: #7c3aed;
      background: #ede9fe;
    }

    .token.active {
      box-shadow: 0 0 0 2px currentColor;
    }

    /* Info card */
    .info-panel {
      height: 96px;
      position: relative;
      overflow: hidden;
    }

    .info-card {
      position: absolute;
      inset: 0;
      border-radius: 10px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 14px;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      pointer-events: none;
    }

    .info-card.active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .badge-icon {
      font-size: 24px;
      width: 44px;
      height: 44px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .badge-details {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .badge-title {
      font-size: 15px;
      font-weight: 700;
    }

    .badge-desc {
      font-size: 13px;
      font-weight: 500;
      opacity: 0.9;
    }

    /* Card styling per token */
    .card-quotes { background: #f0f9ff; border: 1.5px solid #bae6fd; color: #0369a1; }
    .card-quotes .badge-icon { background: #e0f2fe; }

    .card-punct { background: #fff1f2; border: 1.5px solid #fecdd3; color: #be123c; }
    .card-punct .badge-icon { background: #ffe4e6; }

    .card-tag { background: #fff7ed; border: 1.5px solid #fed7aa; color: #c2410c; }
    .card-tag .badge-icon { background: #ffedd5; }

    .card-action { background: #faf5ff; border: 1.5px solid #e9d5ff; color: #6b21a8; }
    .card-action .badge-icon { background: #ede9fe; }

    /* Controls */
    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
    }

    .nav-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
    }

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

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

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .dot.active {
      width: 22px;
      border-radius: 6px;
      background: #2563eb;
    }

    @media (max-width: 480px) {
      .sentence-box { font-size: 17px; padding: 14px 10px; }
      .info-panel { height: 104px; }
      .badge-title { font-size: 14px; }
      .badge-desc { font-size: 12px; }
    }
  </style>
</head>
<body>
  <div class="main-wrap">
    
    <div class="sentence-box">
      <span class="token token-quotes" data-index="0">“Look out</span><span class="token token-punct" data-index="1">!</span><span class="token token-quotes" data-index="0">”</span>
      <span class="token token-tag" data-index="2">shouted Maya,</span>
      <span class="token token-action" data-index="3">ducking behind the wall.</span>
    </div>

    
    <div class="info-panel">
      
      <div class="info-card card-quotes" data-card="0">
        <div class="badge-icon">💬</div>
        <div class="badge-details">
          <div class="badge-title">Dialogue</div>
          <div class="badge-desc">Exact words spoken out loud</div>
        </div>
      </div>

      
      <div class="info-card card-punct" data-card="1">
        <div class="badge-icon">⚡</div>
        <div class="badge-details">
          <div class="badge-title">Punctuation Mark</div>
          <div class="badge-desc">High energy & loud volume</div>
        </div>
      </div>

      
      <div class="info-card card-tag" data-card="2">
        <div class="badge-icon">🗣️</div>
        <div class="badge-details">
          <div class="badge-title">Dialogue Tag</div>
          <div class="badge-desc">Loud & urgent tone</div>
        </div>
      </div>

      
      <div class="info-card card-action" data-card="3">
        <div class="badge-icon">🏃</div>
        <div class="badge-details">
          <div class="badge-title">Action Clue</div>
          <div class="badge-desc">Quick & ducking low</div>
        </div>
      </div>
    </div>

    
    <div class="controls">
      <button class="nav-btn" id="prevBtn" aria-label="Previous">◀</button>
      <div class="dots">
        <div class="dot active" data-index="0"></div>
        <div class="dot" data-index="1"></div>
        <div class="dot" data-index="2"></div>
        <div class="dot" data-index="3"></div>
      </div>
      <button class="nav-btn" id="nextBtn" aria-label="Next">▶</button>
    </div>
  </div>

  <script>
    let currentIndex = 0;
    const totalSteps = 4;
    const tokens = document.querySelectorAll('.token');
    const cards = document.querySelectorAll('.info-card');
    const dots = document.querySelectorAll('.dot');

    function showStep(index) {
      currentIndex = (index + totalSteps) % totalSteps;

      tokens.forEach(el => {
        el.classList.toggle('active', parseInt(el.dataset.index) === currentIndex);
      });

      cards.forEach(el => {
        el.classList.toggle('active', parseInt(el.dataset.card) === currentIndex);
      });

      dots.forEach(el => {
        el.classList.toggle('active', parseInt(el.dataset.index) === currentIndex);
      });
    }

    tokens.forEach(el => {
      el.addEventListener('click', () => showStep(parseInt(el.dataset.index)));
    });

    dots.forEach(el => {
      el.addEventListener('click', () => showStep(parseInt(el.dataset.index)));
    });

    document.getElementById('prevBtn').addEventListener('click', () => showStep(currentIndex - 1));
    document.getElementById('nextBtn').addEventListener('click', () => showStep(currentIndex + 1));

    // Initialize first state
    showStep(0);
  </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="1:1">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    .diagram-flow {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Top Spoken Line Header */
    .quote-box {
      text-align: center;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
    }

    .quote-text {
      font-family: Georgia, 'Times New Roman', serif;
      font-size: 20px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.2px;
    }

    .neutral-tag {
      display: inline-block;
      background: #e2e8f0;
      color: #475569;
      font-family: system-ui, sans-serif;
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 999px;
      margin-left: 4px;
      vertical-align: middle;
      border: 1px solid #cbd5e1;
    }

    /* Two-Column Comparison Grid */
    .compare-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    @media (max-width: 440px) {
      .compare-grid {
        grid-template-columns: 1fr;
      }
    }

    .scenario-card {
      border-radius: 10px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: box-shadow 0.3s ease, border-color 0.3s ease;
      position: relative;
    }

    /* Scenario A: Anxiety */
    .scenario-a {
      background: #f1f5f9;
      border: 2px solid #818cf8;
    }
    .scenario-a.active {
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
      border-color: #4f46e5;
    }

    /* Scenario B: Confidence */
    .scenario-b {
      background: #fffbeb;
      border: 2px solid #f59e0b;
    }
    .scenario-b.active {
      box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35);
      border-color: #d97706;
    }

    .card-header {
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .header-a { color: #4338ca; }
    .header-b { color: #b45309; }

    .context-pill {
      font-size: 11.5px;
      font-style: italic;
      line-height: 1.35;
      padding: 6px 8px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.85);
      border: 1px dashed rgba(0, 0, 0, 0.15);
    }

    .arrow-indicator {
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      color: #94a3b8;
      line-height: 1;
      margin: -2px 0;
    }

    .inferred-box {
      background: #ffffff;
      border-radius: 8px;
      padding: 8px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      border: 1px solid rgba(0,0,0,0.08);
    }

    .tone-title {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: -0.1px;
    }
    .tone-a { color: #4f46e5; }
    .tone-b { color: #d97706; }

    .tone-desc {
      font-size: 10.5px;
      color: #64748b;
      line-height: 1.2;
    }

    /* Waveform Visuals */
    .waveform-svg {
      width: 100%;
      height: 24px;
      overflow: visible;
    }

    .wave-line-a {
      stroke: #6366f1;
      stroke-width: 2.5;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .wave-line-b {
      stroke: #f59e0b;
      stroke-width: 3.5;
      fill: none;
      stroke-linecap: square;
      stroke-linejoin: miter;
    }

    .sim-btn {
      width: 100%;
      padding: 6px 10px;
      font-size: 11.5px;
      font-weight: 600;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      transition: opacity 0.2s ease, filter 0.2s ease;
      color: #ffffff;
    }
    .sim-btn:active {
      opacity: 0.85;
    }
    .btn-a { background: #6366f1; }
    .btn-b { background: #f59e0b; }

    /* Bottom Banner */
    .takeaway-banner {
      text-align: center;
      font-size: 11.5px;
      font-weight: 600;
      color: #334155;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 10px;
    }
  </style>
</head>
<body>

  <div class="diagram-flow">
    
    <div class="quote-box">
      <span class="quote-text">“I am ready,”</span>
      <span class="neutral-tag">said Sam <span style="font-weight: normal; opacity: 0.8;">(neutral)</span></span>
    </div>

    
    <div class="compare-grid">
      
      
      <div class="scenario-card scenario-a" id="cardA">
        <div class="card-header header-a">
          <span>Scenario A</span>
          <span>😰 Hesitant</span>
        </div>

        <div class="context-pill">
          🔍 “…biting his nails and pacing the rug.”
        </div>

        <div class="arrow-indicator">↓</div>

        <div class="inferred-box">
          <svg class="waveform-svg" viewBox="0 0 160 24">
            <path class="wave-line-a" d="M 5,12 Q 15,4 25,12 T 45,12 T 65,12 T 85,12 T 105,12 T 125,12 T 145,12 T 155,12" />
          </svg>
          <div class="tone-title tone-a">Trembling & Breathless</div>
          <div class="tone-desc">High, unstable, quiet pitch</div>
        </div>

        <button type="button" class="sim-btn btn-a" id="btnA">
          <span>🔊</span> <span>Simulate Tone</span>
        </button>
      </div>

      
      <div class="scenario-card scenario-b" id="cardB">
        <div class="card-header header-b">
          <span>Scenario B</span>
          <span>🔥 Confident</span>
        </div>

        <div class="context-pill">
          🔍 “…slamming his fists with a grin.”
        </div>

        <div class="arrow-indicator">↓</div>

        <div class="inferred-box">
          <svg class="waveform-svg" viewBox="0 0 160 24">
            <path class="wave-line-b" d="M 5,12 L 20,2 L 35,22 L 50,2 L 65,22 L 80,2 L 95,22 L 110,2 L 125,22 L 140,2 L 155,12" />
          </svg>
          <div class="tone-title tone-b">Resonant & Decisive</div>
          <div class="tone-desc">Strong, loud, projected pitch</div>
        </div>

        <button type="button" class="sim-btn btn-b" id="btnB">
          <span>🔊</span> <span>Simulate Tone</span>
        </button>
      </div>

    </div>

    
    <div class="takeaway-banner">
      Same Spoken Words + Narrative Clues = Distinct Vocal Tones
    </div>
  </div>

  <script>
    let audioCtx = null;

    function getAudioContext() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
      return audioCtx;
    }

    function playTrembleTone() {
      const ctx = getAudioContext();
      const t = ctx.currentTime;

      // Carrier oscillator (High pitch)
      const carrier = ctx.createOscillator();
      carrier.type = 'sine';
      carrier.frequency.setValueAtTime(420, t);

      // Tremolo / Vibrato LFO for trembling hesitation
      const lfo = ctx.createOscillator();
      lfo.frequency.setValueAtTime(14, t);

      const lfoGain = ctx.createGain();
      lfoGain.gain.setValueAtTime(35, t);
      lfo.connect(carrier.frequency);

      // Main Gain Envelope
      const gain = ctx.createGain();
      gain.gain.setValueAtTime(0.001, t);
      gain.gain.linearRampToValueAtTime(0.12, t + 0.15);
      gain.gain.exponentialRampToValueAtTime(0.001, t + 0.9);

      carrier.connect(gain);
      gain.connect(ctx.destination);

      lfo.start(t);
      carrier.start(t);
      lfo.stop(t + 0.9);
      carrier.stop(t + 0.9);
    }

    function playBoldTone() {
      const ctx = getAudioContext();
      const t = ctx.currentTime;

      // Primary punchy oscillator
      const osc1 = ctx.createOscillator();
      osc1.type = 'triangle';
      osc1.frequency.setValueAtTime(160, t);
      osc1.frequency.exponentialRampToValueAtTime(120, t + 0.5);

      // Sub-harmonic resonant oscillator
      const osc2 = ctx.createOscillator();
      osc2.type = 'sawtooth';
      osc2.frequency.setValueAtTime(80, t);

      // Lowpass filter for warm authority
      const filter = ctx.createBiquadFilter();
      filter.type = 'lowpass';
      filter.frequency.setValueAtTime(600, t);

      // Decisive punch gain envelope
      const gain = ctx.createGain();
      gain.gain.setValueAtTime(0.001, t);
      gain.gain.linearRampToValueAtTime(0.28, t + 0.04);
      gain.gain.exponentialRampToValueAtTime(0.001, t + 0.6);

      osc1.connect(filter);
      osc2.connect(filter);
      filter.connect(gain);
      gain.connect(ctx.destination);

      osc1.start(t);
      osc2.start(t);
      osc1.stop(t + 0.6);
      osc2.stop(t + 0.6);
    }

    const cardA = document.getElementById('cardA');
    const cardB = document.getElementById('cardB');
    const btnA = document.getElementById('btnA');
    const btnB = document.getElementById('btnB');

    btnA.addEventListener('click', () => {
      cardB.classList.remove('active');
      cardA.classList.add('active');
      playTrembleTone();
      setTimeout(() => cardA.classList.remove('active'), 900);
    });

    btnB.addEventListener('click', () => {
      cardA.classList.remove('active');
      cardB.classList.add('active');
      playBoldTone();
      setTimeout(() => cardB.classList.remove('active'), 600);
    });
  </script>
</body>
</html>

OGE.3.RF.5

Aligned learning resources

Related diagrams