<!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;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

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

    .box {
      border-radius: 14px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
    }

    /* Top Box - Squished */
    .box-squished {
      background: #fff5f5;
      border: 2px dashed #fca5a5;
    }

    /* Bottom Box - Spaced */
    .box-spaced {
      background: #f0fdf4;
      border: 2px solid #86efac;
    }

    .badge-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      letter-spacing: 0.2px;
    }

    .badge-red {
      background: #fee2e2;
      color: #dc2626;
      border: 1px solid #fca5a5;
    }

    .badge-green {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #86efac;
    }

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

    /* Letter Display */
    .display-area {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      background: #ffffff;
      border-radius: 10px;
      padding: 6px 12px;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
    }

    .squished-text {
      font-size: 26px;
      font-weight: 800;
      color: #dc2626;
      letter-spacing: -2px;
      display: inline-flex;
      align-items: center;
      animation: squeeze 2.4s ease-in-out infinite;
    }

    @keyframes squeeze {
      0%, 100% { letter-spacing: -2px; transform: scaleX(0.92); }
      50% { letter-spacing: -3px; transform: scaleX(0.85); }
    }

    .spaced-text-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .word {
      font-size: 26px;
      font-weight: 800;
      color: #166534;
      background: #eafaf1;
      padding: 2px 10px;
      border-radius: 8px;
      border: 1px solid #bbf7d0;
      transition: transform 0.2s ease;
    }

    .space-indicator {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #e0f2fe;
      border: 1.5px dashed #38bdf8;
      border-radius: 6px;
      padding: 2px 6px;
      color: #0284c7;
      font-size: 11px;
      font-weight: 800;
      line-height: 1.1;
      transition: all 0.2s ease;
    }

    .space-indicator .arrow {
      font-size: 13px;
      font-weight: 900;
    }

    .space-indicator.active {
      background: #38bdf8;
      color: #ffffff;
      border-color: #0284c7;
      transform: scale(1.12);
      box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
    }

    /* Keyboard Interactive Section */
    .keyboard-zone {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 4px;
    }

    .spacebar-btn {
      appearance: none;
      border: none;
      cursor: pointer;
      background: #fef08a;
      color: #854d0e;
      font-weight: 800;
      font-size: 15px;
      padding: 10px 24px;
      border-radius: 10px;
      box-shadow: 0 5px 0 #ca8a04, 0 8px 12px rgba(202, 138, 4, 0.25);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all 0.1s ease;
      touch-action: manipulation;
    }

    .spacebar-btn:active, .spacebar-btn.pressed {
      transform: translateY(4px);
      box-shadow: 0 1px 0 #ca8a04, 0 3px 6px rgba(202, 138, 4, 0.2);
      background: #fde047;
    }

    .thumb-pointer {
      font-size: 26px;
      line-height: 1;
      animation: thumbPress 1.8s ease-in-out infinite;
      transform-origin: bottom center;
    }

    @keyframes thumbPress {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-4px) rotate(-8deg); }
    }
  </style>
</head>
<body>

  
  <div class="box box-squished">
    <div class="badge-row">
      <span class="badge badge-red">⚠️ Too squished!</span>
      <span class="emoji-face">😿</span>
    </div>
    <div class="display-area">
      <span class="squished-text">acatran</span>
    </div>
  </div>

  
  <div class="box box-spaced">
    <div class="badge-row">
      <span class="badge badge-green">✓ Easy to read!</span>
      <span class="emoji-face">😸</span>
    </div>

    <div class="display-area">
      <div class="spaced-text-wrap">
        <span class="word">a</span>
        <div class="space-indicator" id="sp1">
          <span class="arrow">⟷</span>
        </div>
        <span class="word">cat</span>
        <div class="space-indicator" id="sp2">
          <span class="arrow">⟷</span>
        </div>
        <span class="word">ran</span>
      </div>
    </div>

    
    <div class="keyboard-zone">
      <span class="thumb-pointer">👍</span>
      <button class="spacebar-btn" id="spaceBtn" type="button">
        ␣ Spacebar
      </button>
    </div>
  </div>

  <script>
    const spaceBtn = document.getElementById('spaceBtn');
    const sp1 = document.getElementById('sp1');
    const sp2 = document.getElementById('sp2');
    const words = document.querySelectorAll('.word');

    function playKeyClick() {
      try {
        const AudioContext = window.AudioContext || window.webkitAudioContext;
        if (!AudioContext) return;
        const ctx = new AudioContext();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();

        osc.type = 'triangle';
        osc.frequency.setValueAtTime(420, ctx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(140, ctx.currentTime + 0.08);

        gain.gain.setValueAtTime(0.2, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.08);

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

        osc.start();
        osc.stop(ctx.currentTime + 0.08);
      } catch (e) {}
    }

    function triggerSpace() {
      playKeyClick();

      spaceBtn.classList.add('pressed');
      sp1.classList.add('active');
      sp2.classList.add('active');

      words.forEach(w => w.style.transform = 'scale(1.08)');

      setTimeout(() => {
        spaceBtn.classList.remove('pressed');
        sp1.classList.remove('active');
        sp2.classList.remove('active');
        words.forEach(w => w.style.transform = 'scale(1)');
      }, 350);
    }

    spaceBtn.addEventListener('click', triggerSpace);
  </script>
</body>
</html>

Keyboarding Basics: Typing Letters, Spacebar, and Period

<!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;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    /* Target Sentence */
    .sentence-card {
      background: #ffffff;
      padding: 10px 24px;
      border-radius: 12px;
      font-size: 24px;
      font-weight: 700;
      letter-spacing: 0.5px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      border: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      gap: 2px;
    }
    .period-dot {
      color: #ea580c;
      display: inline-block;
      transition: all 0.3s ease;
      font-size: 32px;
      line-height: 1;
    }
    .period-dot.glow {
      transform: scale(1.4);
      text-shadow: 0 0 12px rgba(249, 115, 22, 0.9);
    }

    /* Keyboard Container */
    .keyboard-wrap {
      position: relative;
      width: 100%;
      max-width: 360px;
      background: #e2e8f0;
      padding: 14px 12px;
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin: 8px 0;
    }

    .key-row {
      display: flex;
      justify-content: center;
      gap: 8px;
    }
    .bottom-row {
      padding-left: 20px;
    }

    /* Key Styling */
    .key {
      position: relative;
      width: 60px;
      height: 60px;
      background: #ffffff;
      border-radius: 10px;
      box-shadow: 0 4px 0 #cbd5e1, 0 5px 6px rgba(0,0,0,0.06);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: background 0.25s ease, transform 0.15s ease, box-shadow 0.15s ease;
    }
    .key-char {
      font-size: 20px;
      font-weight: 800;
      color: #334155;
    }
    .key-sub {
      font-size: 10px;
      font-weight: 700;
      color: #94a3b8;
      text-transform: uppercase;
      margin-top: 1px;
    }

    /* Highlight States */
    .key.home-l {
      border: 2px solid #3b82f6;
      background: #eff6ff;
    }
    .key.home-l .key-sub {
      color: #2563eb;
    }

    .key.period-key {
      border: 2px dashed #fdba74;
    }
    .key.period-key.active-press {
      background: #ffedd5;
      border: 2px solid #ea580c;
      transform: translateY(3px);
      box-shadow: 0 1px 0 #ea580c, 0 0 14px rgba(234, 88, 12, 0.4);
    }
    .key.period-key.active-press .key-char {
      color: #ea580c;
    }

    /* SVG Motion Path Overlay */
    .motion-overlay {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    .path-arrow {
      stroke: #ea580c;
      stroke-width: 3.5;
      stroke-dasharray: 6 5;
      stroke-linecap: round;
      fill: none;
      opacity: 0.85;
      animation: dashMove 1.2s linear infinite;
    }
    @keyframes dashMove {
      to { stroke-dashoffset: -22; }
    }

    /* Animated Finger Dot */
    .finger-marker {
      position: absolute;
      width: 24px;
      height: 24px;
      background: #ea580c;
      border: 3px solid #ffffff;
      border-radius: 50%;
      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
      z-index: 10;
      pointer-events: none;
      transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      transform: translate(-50%, -50%);
    }

    /* Stepper Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      max-width: 360px;
      justify-content: space-between;
    }
    .btn-step {
      flex: 1;
      padding: 8px 6px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }
    .btn-step.active {
      background: #ea580c;
      color: #ffffff;
      border-color: #ea580c;
      box-shadow: 0 2px 6px rgba(234, 88, 12, 0.3);
    }
    .play-btn {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #334155;
    }
  </style>
</head>
<body>

  
  <div class="sentence-card">
    <span>I see a dog</span><span id="targetPeriod" class="period-dot">.</span>
  </div>

  
  <div class="keyboard-wrap" id="kbWrap">
    
    <svg class="motion-overlay" id="svgLayer" viewBox="0 0 360 160">
      <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="#ea580c" />
        </marker>
      </defs>
      <path id="reachPath" class="path-arrow" d="M 205,52 Q 220,80 232,106" marker-end="url(#arrow)" />
    </svg>

    
    <div id="finger" class="finger-marker"></div>

    
    <div class="key-row">
      <div class="key" id="keyJ">
        <span class="key-char">J</span>
        <span class="key-sub">Index</span>
      </div>
      <div class="key" id="keyK">
        <span class="key-char">K</span>
        <span class="key-sub">Middle</span>
      </div>
      <div class="key home-l" id="keyL">
        <span class="key-char">L</span>
        <span class="key-sub">Ring</span>
      </div>
      <div class="key" id="keySemi">
        <span class="key-char">;</span>
        <span class="key-sub">Pinky</span>
      </div>
    </div>

    
    <div class="key-row bottom-row">
      <div class="key" id="keyM">
        <span class="key-char">M</span>
      </div>
      <div class="key" id="keyComma">
        <span class="key-char">,</span>
      </div>
      <div class="key period-key" id="keyPeriod">
        <span class="key-char" style="font-size: 26px; line-height: 14px;">.</span>
        <span class="key-sub" style="color: #ea580c;">Reach</span>
      </div>
      <div class="key" id="keySlash">
        <span class="key-char">/</span>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn-step active" id="step0">1. Home Row</button>
    <button class="btn-step" id="step1">2. Reach & Tap .</button>
    <button class="btn-step" id="step2">3. Return to L</button>
    <button class="play-btn" id="playBtn" title="Play/Pause">⏸</button>
  </div>

  <script>
    // Audio synthesis on direct user interaction
    function playTapSound(f = 520) {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.frequency.setValueAtTime(f, ctx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(320, ctx.currentTime + 0.08);
        osc.connect(gain);
        gain.connect(ctx.destination);
        gain.gain.setValueAtTime(0.18, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.08);
        osc.start();
        osc.stop(ctx.currentTime + 0.08);
      } catch (e) {}
    }

    const kbWrap = document.getElementById('kbWrap');
    const keyL = document.getElementById('keyL');
    const keyPeriod = document.getElementById('keyPeriod');
    const finger = document.getElementById('finger');
    const targetPeriod = document.getElementById('targetPeriod');
    const reachPath = document.getElementById('reachPath');
    const playBtn = document.getElementById('playBtn');
    const stepBtns = [document.getElementById('step0'), document.getElementById('step1'), document.getElementById('step2')];

    function updatePositions() {
      const wrapRect = kbWrap.getBoundingClientRect();
      const lRect = keyL.getBoundingClientRect();
      const dotRect = keyPeriod.getBoundingClientRect();

      const lX = (lRect.left + lRect.width / 2) - wrapRect.left;
      const lY = (lRect.top + lRect.height / 2) - wrapRect.top;
      const dX = (dotRect.left + dotRect.width / 2) - wrapRect.left;
      const dY = (dotRect.top + dotRect.height / 2) - wrapRect.top;

      // Update SVG path dynamically for exact alignment
      reachPath.setAttribute('d', `M ${lX},${lY} Q ${(lX + dX)/2 + 10},${(lY + dY)/2} ${dX - 4},${dY - 14}`);

      return { lX, lY, dX, dY };
    }

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

    function applyStep(stepIndex, isUser = false) {
      currentStep = stepIndex;
      const pos = updatePositions();

      stepBtns.forEach((b, i) => b.classList.toggle('active', i === stepIndex));

      if (stepIndex === 0) {
        // Step 1: Rest on L
        finger.style.left = pos.lX + 'px';
        finger.style.top = pos.lY + 'px';
        keyPeriod.classList.remove('active-press');
        targetPeriod.classList.remove('glow');
      } else if (stepIndex === 1) {
        // Step 2: Reach & Tap Period
        finger.style.left = pos.dX + 'px';
        finger.style.top = pos.dY + 'px';
        keyPeriod.classList.add('active-press');
        targetPeriod.classList.add('glow');
        if (isUser) playTapSound(580);
      } else if (stepIndex === 2) {
        // Step 3: Return to L
        finger.style.left = pos.lX + 'px';
        finger.style.top = pos.lY + 'px';
        keyPeriod.classList.remove('active-press');
        targetPeriod.classList.remove('glow');
        if (isUser) playTapSound(440);
      }
    }

    function nextStep() {
      const next = (currentStep + 1) % 3;
      applyStep(next, false);
    }

    function startAutoPlay() {
      isPlaying = true;
      playBtn.textContent = '⏸';
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3000);
    }

    function pauseAutoPlay() {
      isPlaying = false;
      playBtn.textContent = '▶';
      if (timer) clearInterval(timer);
    }

    // Step button interactions
    stepBtns.forEach((btn, idx) => {
      btn.addEventListener('click', () => {
        applyStep(idx, true);
        pauseAutoPlay();
      });
    });

    // Key direct taps
    keyPeriod.addEventListener('click', () => {
      applyStep(1, true);
      pauseAutoPlay();
    });
    keyL.addEventListener('click', () => {
      applyStep(0, true);
      pauseAutoPlay();
    });

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        pauseAutoPlay();
      } else {
        startAutoPlay();
      }
    });

    // Initial setup on mount
    window.addEventListener('resize', () => applyStep(currentStep));
    setTimeout(() => {
      applyStep(0);
      startAutoPlay();
    }, 100);
  </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;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    /* Steps Bar */
    .steps-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 620px;
    }

    .step-btn {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
    }

    .step-btn.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.18);
    }

    .step-badge {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #e2e8f0;
      color: #475569;
      font-weight: 700;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 4px;
    }

    .step-btn.active .step-badge {
      background: #22b7ff;
      color: #ffffff;
    }

    .key-cap {
      font-family: ui-monospace, monospace;
      font-weight: 700;
      font-size: 15px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-bottom: 3px solid #94a3b8;
      border-radius: 6px;
      padding: 2px 8px;
      margin-bottom: 4px;
      color: #0f172a;
    }

    .finger-hint {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      line-height: 1.1;
    }

    .step-btn.active .finger-hint {
      color: #0284c7;
    }

    /* Screen Container */
    .monitor-frame {
      width: 100%;
      max-width: 620px;
      background: #e2e8f0;
      border-radius: 16px;
      padding: 8px 8px 12px;
      margin: 10px 0;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }

    .monitor-bar {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 2px 6px 6px;
    }

    .bar-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
    }

    .screen {
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid #cbd5e1;
      min-height: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
      text-align: center;
    }

    .screen-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #94a3b8;
      margin-bottom: 6px;
    }

    .screen-text-line {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 32px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: 1px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .typed-char {
      display: inline-block;
    }

    .typed-char.space {
      width: 14px;
    }

    .typed-char.new {
      color: #0284c7;
      background: #e0f2fe;
      border-radius: 4px;
      padding: 0 2px;
    }

    .cursor {
      display: inline-block;
      width: 3px;
      height: 32px;
      background: #22b7ff;
      margin-left: 2px;
      animation: blink 0.9s infinite;
      vertical-align: middle;
    }

    @keyframes blink {
      0%, 49% { opacity: 1; }
      50%, 100% { opacity: 0; }
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 620px;
    }

    .ctrl-btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }

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

    .dots-nav {
      display: flex;
      gap: 6px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #e2e8f0;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: background-color 0.2s, transform 0.2s;
    }

    .dot.active {
      background: #22b7ff;
      transform: scale(1.15);
    }
  </style>
</head>
<body>

  
  <div class="steps-grid" id="stepsGrid">
    <button class="step-btn active" data-step="0">
      <div class="step-badge">1</div>
      <div class="key-cap">A</div>
      <div class="finger-hint">Left pinky</div>
    </button>
    <button class="step-btn" data-step="1">
      <div class="step-badge">2</div>
      <div class="key-cap">Space</div>
      <div class="finger-hint">Thumb</div>
    </button>
    <button class="step-btn" data-step="2">
      <div class="step-badge">3</div>
      <div class="key-cap">cat ␣</div>
      <div class="finger-hint">Word + space</div>
    </button>
    <button class="step-btn" data-step="3">
      <div class="step-badge">4</div>
      <div class="key-cap">sat .</div>
      <div class="finger-hint">Right ring .</div>
    </button>
  </div>

  
  <div class="monitor-frame">
    <div class="monitor-bar">
      <div class="bar-dot"></div>
      <div class="bar-dot"></div>
      <div class="bar-dot"></div>
    </div>
    <div class="screen">
      <div class="screen-label">Computer Screen</div>
      <div class="screen-text-line" id="screenDisplay">
        <span class="typed-char new">A</span><span class="cursor"></span>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="ctrl-btn" id="prevBtn">◀ Prev</button>
    <button class="ctrl-btn" id="playBtn">⏸ Pause</button>
    <button class="ctrl-btn" id="nextBtn">Next ▶</button>
    <div class="dots-nav">
      <button class="dot active" data-step="0" aria-label="Step 1"></button>
      <button class="dot" data-step="1" aria-label="Step 2"></button>
      <button class="dot" data-step="2" aria-label="Step 3"></button>
      <button class="dot" data-step="3" aria-label="Step 4"></button>
    </div>
  </div>

  <script>
    const stepData = [
      { html: '<span class="typed-char new">A</span><span class="cursor"></span>' },
      { html: '<span class="typed-char">A</span><span class="typed-char space new">&nbsp;</span><span class="cursor"></span>' },
      { html: '<span class="typed-char">A&nbsp;</span><span class="typed-char new">cat</span><span class="typed-char space new">&nbsp;</span><span class="cursor"></span>' },
      { html: '<span class="typed-char">A&nbsp;cat&nbsp;</span><span class="typed-char new">sat.</span><span class="cursor"></span>' }
    ];

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

    const stepButtons = document.querySelectorAll('.step-btn');
    const dots = document.querySelectorAll('.dot');
    const display = document.getElementById('screenDisplay');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    function renderStep(index) {
      currentStep = index;
      display.innerHTML = stepData[index].html;

      stepButtons.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === index);
      });
    }

    function advance() {
      const next = (currentStep + 1) % stepData.length;
      renderStep(next);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(advance, 3000);
      isPlaying = true;
      playBtn.textContent = '⏸ Pause';
    }

    function stopAutoPlay() {
      if (timer) clearInterval(timer);
      isPlaying = false;
      playBtn.textContent = '▶ Play';
    }

    function toggleAutoPlay() {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        advance();
        startAutoPlay();
      }
    }

    stepButtons.forEach((btn) => {
      btn.addEventListener('click', () => {
        const step = parseInt(btn.getAttribute('data-step'), 10);
        renderStep(step);
        stopAutoPlay();
      });
    });

    dots.forEach((dot) => {
      dot.addEventListener('click', () => {
        const step = parseInt(dot.getAttribute('data-step'), 10);
        renderStep(step);
        stopAutoPlay();
      });
    });

    prevBtn.addEventListener('click', () => {
      stopAutoPlay();
      const prev = (currentStep - 1 + stepData.length) % stepData.length;
      renderStep(prev);
    });

    nextBtn.addEventListener('click', () => {
      stopAutoPlay();
      advance();
    });

    playBtn.addEventListener('click', toggleAutoPlay);

    // Initial Start
    startAutoPlay();
  </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; -webkit-tap-highlight-color: transparent; }
    body {
      background-color: #f8f9fa;
      color: #1e2945;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px 8px;
      min-height: 100%;
      user-select: none;
    }

    .header {
      text-align: center;
      margin-bottom: 6px;
    }
    .title {
      font-size: 16px;
      font-weight: 800;
      color: #1e2945;
      letter-spacing: 0.5px;
    }
    .sub {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }

    /* Keyboard Frame */
    .keyboard-box {
      width: 100%;
      max-width: 520px;
      background: #e2e8f0;
      padding: 8px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.06), inset 0 1px 2px rgba(255,255,255,0.8);
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .key-row {
      display: flex;
      justify-content: center;
      gap: 4px;
      width: 100%;
    }

    .key {
      flex: 1;
      height: 34px;
      max-width: 38px;
      background: #ffffff;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      color: #94a3b8;
      box-shadow: 0 2px 0 #cbd5e1;
      cursor: pointer;
      position: relative;
      transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

    .key.passive {
      opacity: 0.55;
      cursor: default;
    }

    /* Left Hand Keys (Pastel Blue) */
    .key.left-key {
      background: #e0f2fe;
      color: #0369a1;
      box-shadow: 0 2px 0 #7dd3fc;
      opacity: 1;
    }
    /* Right Hand Keys (Pastel Green) */
    .key.right-key {
      background: #dcfce7;
      color: #15803d;
      box-shadow: 0 2px 0 #86efac;
      opacity: 1;
    }

    /* Tactile Bump Keys (F & J) */
    .key.has-bump::after {
      content: '';
      position: absolute;
      bottom: 4px;
      width: 10px;
      height: 2.5px;
      border-radius: 2px;
      background: currentColor;
      box-shadow: 0 0 4px rgba(255, 180, 0, 0.8);
    }
    .bump-glow {
      position: absolute;
      top: 2px;
      right: 3px;
      font-size: 8px;
      color: #f59e0b;
      line-height: 1;
    }

    /* Active Highlighted Key */
    .key.active {
      box-shadow: 0 0 0 2.5px #f59e0b, 0 3px 6px rgba(0,0,0,0.15) !important;
      font-weight: 900;
    }
    .key.left-key.active {
      background: #bae6fd;
    }
    .key.right-key.active {
      background: #bbf7d0;
    }

    .key.spacebar {
      flex: 5;
      max-width: 210px;
      font-size: 11px;
      letter-spacing: 1px;
      color: #64748b;
      background: #f1f5f9;
      box-shadow: 0 2px 0 #cbd5e1;
    }

    /* Hands Area */
    .hands-container {
      width: 100%;
      max-width: 520px;
      display: flex;
      justify-content: space-around;
      align-items: flex-start;
      margin-top: 4px;
      padding: 0 8px;
    }

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

    .hand-badge {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .left-badge {
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #7dd3fc;
    }
    .right-badge {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #86efac;
    }

    .hand-svg {
      width: 130px;
      height: 90px;
      overflow: visible;
    }

    .finger-indicator {
      cursor: pointer;
      transition: filter 0.2s ease, transform 0.2s ease;
    }
    .finger-indicator circle {
      stroke: #ffffff;
      stroke-width: 1.5;
    }
    .finger-indicator text {
      font-size: 9px;
      font-weight: 800;
      fill: #ffffff;
      text-anchor: middle;
      dominant-baseline: central;
      pointer-events: none;
    }

    .finger-indicator.active circle {
      stroke: #f59e0b;
      stroke-width: 2.5;
      filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.8));
    }

    /* Guide Note */
    .hint-bar {
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      background: #ffffff;
      padding: 4px 12px;
      border-radius: 20px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      display: flex;
      align-items: center;
      gap: 6px;
    }
  </style>
</head>
<body>

  <div class="header">
    <div class="title">Home Row Guide</div>
    <div class="sub">Rest fingers on the colored keys</div>
  </div>

  
  <div class="keyboard-box">
    
    <div class="key-row">
      <div class="key passive">Q</div>
      <div class="key passive">W</div>
      <div class="key passive">E</div>
      <div class="key passive">R</div>
      <div class="key passive">T</div>
      <div class="key passive">Y</div>
      <div class="key passive">U</div>
      <div class="key passive">I</div>
      <div class="key passive">O</div>
      <div class="key passive">P</div>
    </div>

    
    <div class="key-row">
      <div class="key left-key" data-key="A" id="key-A">A</div>
      <div class="key left-key" data-key="S" id="key-S">S</div>
      <div class="key left-key" data-key="D" id="key-D">D</div>
      <div class="key left-key has-bump" data-key="F" id="key-F">
        <span class="bump-glow">✦</span>F
      </div>
      <div class="key passive">G</div>
      <div class="key passive">H</div>
      <div class="key right-key has-bump" data-key="J" id="key-J">
        <span class="bump-glow">✦</span>J
      </div>
      <div class="key right-key" data-key="K" id="key-K">K</div>
      <div class="key right-key" data-key="L" id="key-L">L</div>
      <div class="key right-key" data-key=";" id="key-semi">;</div>
    </div>

    
    <div class="key-row">
      <div class="key passive">Z</div>
      <div class="key passive">X</div>
      <div class="key passive">C</div>
      <div class="key passive">V</div>
      <div class="key passive">B</div>
      <div class="key passive">N</div>
      <div class="key passive">M</div>
      <div class="key passive">.</div>
    </div>

    
    <div class="key-row">
      <div class="key spacebar passive">SPACEBAR (Thumbs)</div>
    </div>
  </div>

  
  <div class="hands-container">
    
    <div class="hand-card">
      <div class="hand-badge left-badge">Left Hand (A-S-D-F)</div>
      <svg class="hand-svg" viewBox="0 0 130 90">
        
        <path d="M22,88 C20,68 18,52 18,36 C18,31 24,31 24,36 C24,46 25,48 25,48 C25,48 27,24 35,24 C41,24 41,31 40,44 C40,44 43,14 51,14 C58,14 58,22 57,39 C57,39 61,19 70,19 C77,19 76,27 75,44 C75,44 80,42 88,42 C97,42 98,54 88,64 C76,76 72,88 72,88 Z" 
              fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1.8" stroke-linejoin="round"/>
        
        
        
        <g class="finger-indicator" data-key="A" id="finger-A">
          <circle cx="21" cy="34" r="8.5" fill="#0284c7" />
          <text x="21" y="34">A</text>
        </g>
        
        <g class="finger-indicator" data-key="S" id="finger-S">
          <circle cx="37" cy="22" r="8.5" fill="#0369a1" />
          <text x="37" y="22">S</text>
        </g>
        
        <g class="finger-indicator" data-key="D" id="finger-D">
          <circle cx="54" cy="12" r="8.5" fill="#0284c7" />
          <text x="54" y="12">D</text>
        </g>
        
        <g class="finger-indicator" data-key="F" id="finger-F">
          <circle cx="73" cy="17" r="9" fill="#0284c7" />
          <text x="73" y="17">F✦</text>
        </g>
        
        <g class="finger-indicator" data-key="SPACE" style="cursor:default">
          <circle cx="91" cy="49" r="7" fill="#94a3b8" />
          <text x="91" y="49" style="font-size:7px">␣</text>
        </g>
      </svg>
    </div>

    
    <div class="hand-card">
      <div class="hand-badge right-badge">Right Hand (J-K-L-;)</div>
      <svg class="hand-svg" viewBox="0 0 130 90">
        
        <path d="M108,88 C110,68 112,52 112,36 C112,31 106,31 106,36 C106,46 105,48 105,48 C105,48 103,24 95,24 C89,24 89,31 90,44 C90,44 87,14 79,14 C72,14 72,22 73,39 C73,39 69,19 60,19 C53,19 54,27 55,44 C55,44 50,42 42,42 C33,42 32,54 42,64 C54,76 58,88 58,88 Z" 
              fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1.8" stroke-linejoin="round"/>
        
        
        <g class="finger-indicator" data-key="SPACE" style="cursor:default">
          <circle cx="39" cy="49" r="7" fill="#94a3b8" />
          <text x="39" y="49" style="font-size:7px">␣</text>
        </g>
        
        <g class="finger-indicator" data-key="J" id="finger-J">
          <circle cx="57" cy="17" r="9" fill="#16a34a" />
          <text x="57" y="17">J✦</text>
        </g>
        
        <g class="finger-indicator" data-key="K" id="finger-K">
          <circle cx="76" cy="12" r="8.5" fill="#15803d" />
          <text x="76" y="12">K</text>
        </g>
        
        <g class="finger-indicator" data-key="L" id="finger-L">
          <circle cx="93" cy="22" r="8.5" fill="#16a34a" />
          <text x="93" y="22">L</text>
        </g>
        
        <g class="finger-indicator" data-key=";" id="finger-semi">
          <circle cx="109" cy="34" r="8.5" fill="#15803d" />
          <text x="109" y="34">;</text>
        </g>
      </svg>
    </div>
  </div>

  
  <div class="hint-bar" id="hint-msg">
    <span>✦ Feel the raised bumps on <strong>F</strong> and <strong>J</strong></span>
  </div>

  <script>
    // Frequencies for interactive tone synthesis
    const toneMap = {
      'A': 261.63, // C4
      'S': 293.66, // D4
      'D': 329.63, // E4
      'F': 349.23, // F4
      'J': 392.00, // G4
      'K': 440.00, // A4
      'L': 493.88, // B4
      ';': 523.25  // C5
    };

    let audioCtx = null;
    function playTone(freq) {
      if (!freq) return;
      try {
        if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        if (audioCtx.state === 'suspended') audioCtx.resume();
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
        gain.gain.setValueAtTime(0.18, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.35);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + 0.35);
      } catch (e) {}
    }

    const keys = ['A', 'S', 'D', 'F', 'J', 'K', 'L', ';'];
    let activeKey = 'F';

    function selectKey(k) {
      if (!keys.includes(k)) return;
      activeKey = k;

      // Update Key Elements
      document.querySelectorAll('.key').forEach(el => el.classList.remove('active'));
      const targetKeyEl = document.querySelector(`.key[data-key="${k}"]`);
      if (targetKeyEl) targetKeyEl.classList.add('active');

      // Update Finger SVG Elements
      document.querySelectorAll('.finger-indicator').forEach(el => el.classList.remove('active'));
      const targetFingerEl = document.querySelector(`.finger-indicator[data-key="${k}"]`);
      if (targetFingerEl) targetFingerEl.classList.add('active');

      // Play Sound
      playTone(toneMap[k]);

      // Message Update
      const hint = document.getElementById('hint-msg');
      if (k === 'F' || k === 'J') {
        hint.innerHTML = `<span>✦ Pointer finger rests on <strong>${k}</strong> with tactile bump!</span>`;
      } else {
        hint.innerHTML = `<span>Finger matched to key <strong>${k}</strong></span>`;
      }
    }

    // Attach Click / Touch Listeners
    document.querySelectorAll('.key[data-key]').forEach(el => {
      el.addEventListener('pointerdown', (e) => {
        e.preventDefault();
        selectKey(el.dataset.key);
      });
    });

    document.querySelectorAll('.finger-indicator[data-key]').forEach(el => {
      el.addEventListener('pointerdown', (e) => {
        e.preventDefault();
        selectKey(el.dataset.key);
      });
    });

    // Keyboard physical event listener
    window.addEventListener('keydown', (e) => {
      const k = e.key.toUpperCase();
      if (keys.includes(k) || (e.key === ';' && keys.includes(';'))) {
        selectKey(e.key === ';' ? ';' : k);
      }
    });

    // Initialize with 'F' key
    selectKey('F');
  </script>
</body>
</html>

OGE.2.W.6

Aligned learning resources

Related diagrams