<!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: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      user-select: none;
    }

    /* Stepper Navigation */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .step-tabs {
      display: flex;
      gap: 6px;
      flex: 1;
    }
    .tab-btn {
      flex: 1;
      border: 1.5px solid #e6e6e6;
      background: #f8fafc;
      padding: 6px 4px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.2s ease;
    }
    .tab-btn.active {
      background: #ffffff;
      color: #0284c7;
      border-color: #0284c7;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15);
    }
    .play-btn {
      border: 1.5px solid #e6e6e6;
      background: #ffffff;
      color: #1e2945;
      width: 34px;
      height: 34px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }
    .play-btn:active { background: #f1f5f9; }

    /* Word Processor Box */
    .editor-window {
      background: #ffffff;
      border: 1.5px solid #e6e6e6;
      border-radius: 10px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .editor-toolbar {
      background: #f8fafc;
      border-bottom: 1px solid #e6e6e6;
      padding: 6px 12px;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #94a3b8;
    }
    .doc-dots {
      display: flex;
      gap: 4px;
      margin-right: 8px;
    }
    .doc-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #cbd5e1;
    }
    .editor-paper {
      padding: 14px 16px;
      min-height: 86px;
      font-family: "Courier New", Courier, monospace;
      font-size: 20px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.5;
    }
    .line {
      display: flex;
      align-items: center;
      white-space: pre;
      min-height: 30px;
    }
    .highlight-char {
      color: #0284c7;
      background: #e0f2fe;
      border-radius: 3px;
      padding: 0 2px;
    }
    .space-indicator {
      display: inline-block;
      width: 14px;
      height: 16px;
      border-bottom: 3px solid #10b981;
      margin: 0 1px;
      vertical-align: middle;
    }
    .cursor {
      display: inline-block;
      width: 2px;
      height: 22px;
      background: #2563eb;
      margin-left: 2px;
      animation: blink 0.9s infinite;
      vertical-align: middle;
    }
    @keyframes blink {
      0%, 49% { opacity: 1; }
      50%, 100% { opacity: 0; }
    }

    /* Key & Hand Action Panel */
    .action-panel {
      background: #f8fafc;
      border: 1.5px solid #e6e6e6;
      border-radius: 10px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .key-display {
      display: flex;
      align-items: center;
      justify-content: space-around;
      gap: 8px;
    }

    .power-key {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 14px;
      border-radius: 8px;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      box-shadow: 0 3px 0 #94a3b8;
      font-weight: 800;
      font-size: 15px;
      color: #475569;
      min-width: 80px;
      transition: all 0.25s ease;
    }
    .power-key.active {
      transform: translateY(2px);
      box-shadow: 0 1px 0 #0284c7;
      border-color: #0284c7;
      background: #0284c7;
      color: #ffffff;
    }
    .power-key.space-bar {
      min-width: 130px;
    }

    .finger-guide {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #334155;
      text-align: center;
    }
    .finger-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      background: #e2e8f0;
      color: #1e2945;
    }
    .finger-badge.step-1 { background: #e0f2fe; color: #0369a1; }
    .finger-badge.step-2 { background: #dcfce7; color: #15803d; }
    .finger-badge.step-3 { background: #fef3c7; color: #b45309; }

    .action-goal {
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      color: #1e2945;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <div class="step-tabs">
      <button class="tab-btn active" id="tab0" onclick="setStep(0)">
        <span>⇧</span> Shift
      </button>
      <button class="tab-btn" id="tab1" onclick="setStep(1)">
        <span>␣</span> Space
      </button>
      <button class="tab-btn" id="tab2" onclick="setStep(2)">
        <span>↵</span> Enter
      </button>
    </div>
    <button class="play-btn" id="playBtn" onclick="togglePlay()" title="Play / Pause">⏸</button>
  </div>

  
  <div class="editor-window">
    <div class="editor-toolbar">
      <div class="doc-dots">
        <span class="doc-dot"></span>
        <span class="doc-dot"></span>
        <span class="doc-dot"></span>
      </div>
      <span>Document 1</span>
    </div>
    <div class="editor-paper">
      <div class="line" id="line1">
        <span id="textLine1">T</span><span class="cursor" id="cursor1"></span>
      </div>
      <div class="line" id="line2">
        <span id="textLine2"></span><span class="cursor" id="cursor2" style="display:none;"></span>
      </div>
    </div>
  </div>

  
  <div class="action-panel">
    <div class="key-display">
      <div class="power-key" id="keyShift">⇧ Shift</div>
      <div class="power-key space-bar" id="keySpace">␣ Space Bar</div>
      <div class="power-key" id="keyEnter">↵ Enter</div>
    </div>

    <div class="finger-guide">
      <span class="finger-badge step-1" id="fingerBadge">👈 Left Pinky</span>
      <span class="action-goal" id="actionGoal">Capital Letter</span>
    </div>
  </div>

  <script>
    const steps = [
      {
        line1Html: '<span class="highlight-char">T</span>',
        line2Html: '',
        cursorLine: 1,
        activeKey: 'keyShift',
        badgeText: '👈 Left Pinky + Right T',
        badgeClass: 'step-1',
        goal: 'Capital Letter'
      },
      {
        line1Html: 'The<span class="space-indicator"></span>',
        line2Html: '',
        cursorLine: 1,
        activeKey: 'keySpace',
        badgeText: '👍 Thumb',
        badgeClass: 'step-2',
        goal: 'Space Between Words'
      },
      {
        line1Html: 'The dog ran.',
        line2Html: '',
        cursorLine: 2,
        activeKey: 'keyEnter',
        badgeText: '👉 Right Pinky',
        badgeClass: 'step-3',
        goal: 'Start New Line'
      }
    ];

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

    function renderStep(idx) {
      currentStep = idx;
      const data = steps[idx];

      // Update tabs
      for (let i = 0; i < 3; i++) {
        const tab = document.getElementById('tab' + i);
        if (i === idx) {
          tab.classList.add('active');
        } else {
          tab.classList.remove('active');
        }
      }

      // Update Word Processor Text
      document.getElementById('textLine1').innerHTML = data.line1Html;
      document.getElementById('textLine2').innerHTML = data.line2Html;

      // Update Cursor position
      if (data.cursorLine === 1) {
        document.getElementById('cursor1').style.display = 'inline-block';
        document.getElementById('cursor2').style.display = 'none';
      } else {
        document.getElementById('cursor1').style.display = 'none';
        document.getElementById('cursor2').style.display = 'inline-block';
      }

      // Update Key highlights
      ['keyShift', 'keySpace', 'keyEnter'].forEach(id => {
        const el = document.getElementById(id);
        if (id === data.activeKey) {
          el.classList.add('active');
        } else {
          el.classList.remove('active');
        }
      });

      // Update Finger badge & goal
      const badge = document.getElementById('fingerBadge');
      badge.textContent = data.badgeText;
      badge.className = 'finger-badge ' + data.badgeClass;
      document.getElementById('actionGoal').textContent = data.goal;
    }

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

    function setStep(idx) {
      renderStep(idx);
      resetAutoPlay();
    }

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

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

    function resetAutoPlay() {
      if (isPlaying) {
        startTimer();
      }
    }

    // Initialize
    renderStep(0);
    startTimer();
  </script>
</body>
</html>

Using Digital Tools to Publish Your Writing

<!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: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
    }

    .app-frame {
      width: 100%;
      max-width: 520px;
      background: #ffffff;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* Window Title Bar */
    .title-bar {
      background: #e5e7eb;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #d1d5db;
      font-size: 13px;
      font-weight: 600;
      color: #4b5563;
    }

    .window-dots {
      display: flex;
      gap: 5px;
    }

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

    .toolbar {
      background: #f3f4f6;
      padding: 6px 12px;
      display: flex;
      gap: 8px;
      border-bottom: 1px solid #e5e7eb;
      font-size: 12px;
      color: #6b7280;
      user-select: none;
    }

    .tool-btn {
      padding: 2px 6px;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 4px;
      font-weight: bold;
    }

    /* Document Sheet */
    .doc-page {
      padding: 22px 20px 28px;
      min-height: 130px;
      background: #ffffff;
      position: relative;
    }

    .doc-title {
      font-size: 18px;
      font-weight: 700;
      text-align: center;
      margin-bottom: 18px;
      color: #1e2945;
    }

    .doc-line {
      font-size: 16px;
      font-family: Georgia, serif;
      line-height: 1.6;
      color: #1e2945;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      min-height: 28px;
    }

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

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

    .typo {
      color: #dc2626;
      background: #fee2e2;
      border-radius: 2px;
      padding: 0 1px;
    }

    /* Key Action Area */
    .action-panel {
      background: #f8fafc;
      border-top: 1px solid #e2e8f0;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .key-indicator {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #4b5563;
      padding: 4px 10px;
      border-radius: 6px;
      background: #e2e8f0;
      border: 1px solid #cbd5e1;
      box-shadow: 0 2px 0 #94a3b8;
      transition: all 0.2s ease;
    }

    .key-indicator.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 1px 0 #0369a1;
      transform: translateY(1px);
    }

    /* Controls Bar */
    .controls {
      width: 100%;
      max-width: 520px;
      margin-top: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .step-pills {
      display: flex;
      gap: 4px;
    }

    .step-pill {
      font-size: 12px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 14px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      user-select: none;
    }

    .step-pill.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    .btn-replay {
      font-size: 13px;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 6px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .btn-replay:active {
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  <div class="app-frame">
    
    <div class="title-bar">
      <div class="window-dots">
        <div class="dot-btn"></div>
        <div class="dot-btn"></div>
        <div class="dot-btn"></div>
      </div>
      <span>The Lost Kitten</span>
      <span style="opacity:0.4;">— □ ✕</span>
    </div>

    
    <div class="toolbar">
      <div class="tool-btn">B</div>
      <div class="tool-btn"><i>I</i></div>
      <div class="tool-btn"><u>U</u></div>
      <div class="tool-btn">≡</div>
    </div>

    
    <div class="doc-page">
      <div class="doc-title">The Lost Kitten</div>
      <div class="doc-line">
        <span id="text-content">Mia saw a small</span><span class="cursor"></span>
      </div>
    </div>

    
    <div class="action-panel">
      <span style="font-size:12px; color:#64748b;" id="action-desc">Typing story...</span>
      <div class="key-indicator" id="backspace-key">⌫ Backspace</div>
    </div>
  </div>

  
  <div class="controls">
    <div class="step-pills">
      <button class="step-pill active" onclick="goToStep(0)">1</button>
      <button class="step-pill" onclick="goToStep(1)">2 (Mistake)</button>
      <button class="step-pill" onclick="goToStep(2)">3 (Fix)</button>
      <button class="step-pill" onclick="goToStep(3)">4 (Done)</button>
    </div>
    <button class="btn-replay" onclick="replay()">↻ Replay</button>
  </div>

  <script>
    const steps = [
      {
        html: 'Mia saw a smal',
        desc: 'Typing...',
        activeKey: false
      },
      {
        html: 'Mia saw a small<span class="typo">l</span>',
        desc: 'Typing mistake: extra "l"',
        activeKey: false
      },
      {
        html: 'Mia saw a small',
        desc: 'Pressed Backspace: removed "l"',
        activeKey: true
      },
      {
        html: 'Mia saw a small cat.',
        desc: 'Finished sentence!',
        activeKey: false
      }
    ];

    let currentStep = 0;
    let autoTimer = null;

    const textEl = document.getElementById('text-content');
    const descEl = document.getElementById('action-desc');
    const keyEl = document.getElementById('backspace-key');
    const pills = document.querySelectorAll('.step-pill');

    function renderStep(idx) {
      currentStep = idx;
      const step = steps[idx];
      textEl.innerHTML = step.html;
      descEl.textContent = step.desc;

      if (step.activeKey) {
        keyEl.classList.add('active');
      } else {
        keyEl.classList.remove('active');
      }

      pills.forEach((p, i) => {
        p.classList.toggle('active', i === idx);
      });
    }

    function goToStep(idx) {
      clearInterval(autoTimer);
      renderStep(idx);
    }

    function replay() {
      clearInterval(autoTimer);
      renderStep(0);
      let next = 1;
      autoTimer = setInterval(() => {
        if (next < steps.length) {
          renderStep(next);
          next++;
        } else {
          clearInterval(autoTimer);
        }
      }, 1600);
    }

    // Start playback on load
    window.addEventListener('load', () => {
      replay();
    });
  </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">
  <title>Home Row Typing Keys</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; }
    
    body {
      width: 100%;
      background: #f8f9fa;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 10px 12px;
      min-height: 100%;
      gap: 10px;
    }

    /* Header Bar */
    .header {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      width: 100%;
      max-width: 580px;
    }

    .title-badge {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.3px;
      color: #1e2945;
      background: #ffffff;
      padding: 5px 12px;
      border-radius: 20px;
      border: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      white-space: nowrap;
    }

    .status-badge {
      font-size: 12px;
      font-weight: 600;
      color: #0284c7;
      background: #e0f2fe;
      padding: 5px 12px;
      border-radius: 20px;
      border: 1px solid #bae6fd;
      transition: all 0.2s ease;
      white-space: nowrap;
      text-align: center;
    }

    /* Keyboard Container */
    .keyboard {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 8px 8px;
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      margin-top: 24px;
      position: relative;
    }

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

    .key {
      flex: 1;
      max-width: 42px;
      height: 32px;
      background: #f1f5f9;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      position: relative;
      transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
      cursor: pointer;
    }

    .key:hover {
      filter: brightness(0.96);
    }

    .key.space {
      max-width: 220px;
      height: 24px;
    }

    /* Left Hand Keys - Blues */
    .key[data-k="A"] { background: #e0f2fe; color: #0369a1; }
    .key[data-k="S"] { background: #bae6fd; color: #0284c7; }
    .key[data-k="D"] { background: #7dd3fc; color: #0369a1; }
    .key[data-k="F"] { background: #38bdf8; color: #ffffff; }

    /* Right Hand Keys - Greens */
    .key[data-k="J"] { background: #34d399; color: #ffffff; }
    .key[data-k="K"] { background: #6ee7b7; color: #047857; }
    .key[data-k="L"] { background: #a7f3d0; color: #059669; }
    .key[data-k=";"] { background: #d1fae5; color: #047857; }

    /* Bump markers on F & J */
    .bump {
      position: absolute;
      bottom: 3px;
      width: 12px;
      height: 2.5px;
      background: #ffffff;
      border-radius: 2px;
      box-shadow: 0 0 4px rgba(255, 255, 255, 0.95);
    }

    /* Active Highlight States */
    .key.active-key {
      box-shadow: 0 0 0 2.5px #1e2945, 0 4px 8px rgba(0, 0, 0, 0.15);
      z-index: 2;
    }

    /* Bump Callouts Positioned directly above target keys */
    .callout {
      position: absolute;
      bottom: 100%;
      margin-bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 10px;
      font-weight: 700;
      padding: 3px 7px;
      border-radius: 6px;
      white-space: nowrap;
      pointer-events: none;
      z-index: 10;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
    }

    .callout::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-width: 4px 4px 0;
      border-style: solid;
    }

    .callout-f {
      background: #0284c7;
      color: #ffffff;
    }
    .callout-f::after {
      border-color: #0284c7 transparent transparent;
    }

    .callout-j {
      background: #059669;
      color: #ffffff;
    }
    .callout-j::after {
      border-color: #059669 transparent transparent;
    }

    /* Hands Diagram */
    .hands-wrapper {
      display: flex;
      justify-content: center;
      align-items: stretch;
      gap: 14px;
      width: 100%;
      max-width: 580px;
    }

    .hand-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      max-width: 280px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    }

    .hand-label {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      margin-bottom: 8px;
      padding-bottom: 4px;
      width: 100%;
      text-align: center;
      border-bottom: 1px solid #f1f5f9;
    }
    .hand-label.left { color: #0284c7; }
    .hand-label.right { color: #059669; }

    .fingers-row {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 5px;
      height: 94px;
      width: 100%;
      padding-bottom: 2px;
    }

    .finger-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 5px 1px 3px;
      border-radius: 12px 12px 6px 6px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: box-shadow 0.2s ease, filter 0.15s ease;
      color: #ffffff;
      font-weight: 800;
      font-size: 11px;
      text-align: center;
    }

    .finger-btn:hover {
      filter: brightness(0.94);
    }

    .finger-btn .f-key {
      font-size: 12px;
      font-weight: 800;
      background: rgba(255, 255, 255, 0.3);
      width: 19px;
      height: 19px;
      line-height: 19px;
      border-radius: 50%;
    }

    .finger-btn .f-name {
      font-size: 8.5px;
      font-weight: 700;
      color: #ffffff;
      line-height: 1.1;
      text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    }

    /* Left Finger Heights & Colors */
    .f-lp { width: 34px; height: 68px; background: #38bdf8; }
    .f-lr { width: 34px; height: 80px; background: #0ea5e9; }
    .f-lm { width: 34px; height: 90px; background: #0284c7; }
    .f-li { width: 36px; height: 78px; background: #0369a1; }
    .f-lt { width: 30px; height: 50px; background: #64748b; }

    /* Right Finger Heights & Colors */
    .f-rt { width: 30px; height: 50px; background: #64748b; }
    .f-ri { width: 36px; height: 78px; background: #047857; }
    .f-rm { width: 34px; height: 90px; background: #059669; }
    .f-rr { width: 34px; height: 80px; background: #10b981; }
    .f-rp { width: 34px; height: 68px; background: #34d399; }

    .finger-btn.active-finger {
      box-shadow: 0 0 0 2.5px #1e2945, 0 4px 8px rgba(0, 0, 0, 0.2);
      border-color: #ffffff;
    }

    /* Controls */
    .controls-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
    
    .btn-toggle {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      padding: 5px 16px;
      font-size: 12px;
      font-weight: 700;
      border-radius: 20px;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      transition: background 0.15s ease, border-color 0.15s ease;
    }
    .btn-toggle:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    @media (max-width: 440px) {
      .header { justify-content: center; gap: 6px; }
      .key { height: 26px; font-size: 11px; }
      .key.space { height: 20px; font-size: 10px; }
      .callout { font-size: 8.5px; padding: 2px 5px; margin-bottom: 6px; }
      .fingers-row { height: 82px; gap: 3px; }
      .finger-btn { width: 28px !important; }
      .f-lp, .f-rp { height: 58px; }
      .f-lr, .f-rr { height: 70px; }
      .f-lm, .f-rm { height: 80px; }
      .f-li, .f-ri { height: 68px; }
      .f-lt, .f-rt { height: 44px; }
      .finger-btn .f-key { width: 16px; height: 16px; font-size: 10px; line-height: 16px; }
      .finger-btn .f-name { font-size: 7.5px; }
      .hand-card { padding: 6px 4px 4px; }
      .hands-wrapper { gap: 8px; }
    }
  </style>
</head>
<body>

  
  <div class="header">
    <div class="title-badge">⌨️ Home Row Keys</div>
    <div class="status-badge" id="statusBadge">Tap any finger</div>
  </div>

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

    
    <div class="key-row">
      <div class="key" data-k="A">A</div>
      <div class="key" data-k="S">S</div>
      <div class="key" data-k="D">D</div>
      <div class="key" data-k="F">
        F
        <div class="bump"></div>
        <div class="callout callout-f">Left Pointer Bump</div>
      </div>
      <div class="key">G</div>
      <div class="key">H</div>
      <div class="key" data-k="J">
        J
        <div class="bump"></div>
        <div class="callout callout-j">Right Pointer Bump</div>
      </div>
      <div class="key" data-k="K">K</div>
      <div class="key" data-k="L">L</div>
      <div class="key" data-k=";">;</div>
    </div>

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

    
    <div class="key-row">
      <div class="key space" data-k="SPACE">SPACE</div>
    </div>
  </div>

  
  <div class="hands-wrapper">
    
    <div class="hand-card">
      <div class="hand-label left">Left Hand</div>
      <div class="fingers-row">
        <div class="finger-btn f-lp" data-key="A" data-label="Left Pinky → Key A">
          <div class="f-key">A</div>
          <div class="f-name">Pinky</div>
        </div>
        <div class="finger-btn f-lr" data-key="S" data-label="Left Ring → Key S">
          <div class="f-key">S</div>
          <div class="f-name">Ring</div>
        </div>
        <div class="finger-btn f-lm" data-key="D" data-label="Left Middle → Key D">
          <div class="f-key">D</div>
          <div class="f-name">Mid</div>
        </div>
        <div class="finger-btn f-li" data-key="F" data-label="Left Pointer → Key F (Bump)">
          <div class="f-key">F</div>
          <div class="f-name">Index</div>
        </div>
        <div class="finger-btn f-lt" data-key="SPACE" data-label="Left Thumb → Space Bar">
          <div class="f-key">␣</div>
          <div class="f-name">Thumb</div>
        </div>
      </div>
    </div>

    
    <div class="hand-card">
      <div class="hand-label right">Right Hand</div>
      <div class="fingers-row">
        <div class="finger-btn f-rt" data-key="SPACE" data-label="Right Thumb → Space Bar">
          <div class="f-key">␣</div>
          <div class="f-name">Thumb</div>
        </div>
        <div class="finger-btn f-ri" data-key="J" data-label="Right Pointer → Key J (Bump)">
          <div class="f-key">J</div>
          <div class="f-name">Index</div>
        </div>
        <div class="finger-btn f-rm" data-key="K" data-label="Right Middle → Key K">
          <div class="f-key">K</div>
          <div class="f-name">Mid</div>
        </div>
        <div class="finger-btn f-rr" data-key="L" data-label="Right Ring → Key L">
          <div class="f-key">L</div>
          <div class="f-name">Ring</div>
        </div>
        <div class="finger-btn f-rp" data-key=";" data-label="Right Pinky → Key ;">
          <div class="f-key">;</div>
          <div class="f-name">Pinky</div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls-row">
    <button class="btn-toggle" id="autoBtn">▶ Auto Guide</button>
  </div>

  <script>
    const fingerBtns = Array.from(document.querySelectorAll('.finger-btn'));
    const keys = Array.from(document.querySelectorAll('.key'));
    const statusBadge = document.getElementById('statusBadge');
    const autoBtn = document.getElementById('autoBtn');

    let autoTimer = null;
    let autoIndex = 0;
    const keySequence = ['A', 'S', 'D', 'F', 'J', 'K', 'L', ';', 'SPACE'];

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

    const freqMap = {
      'A': 261.63,
      'S': 293.66,
      'D': 329.63,
      'F': 349.23,
      'J': 392.00,
      'K': 440.00,
      'L': 493.88,
      ';': 523.25,
      'SPACE': 220.00
    };

    function selectKey(targetKey, isManual = false) {
      if (isManual && autoTimer) {
        stopAuto();
      }

      // Update Key styles
      keys.forEach(k => {
        if (k.dataset.k === targetKey) {
          k.classList.add('active-key');
        } else {
          k.classList.remove('active-key');
        }
      });

      // Update Finger styles
      let labelText = '';
      fingerBtns.forEach(f => {
        if (f.dataset.key === targetKey) {
          f.classList.add('active-finger');
          if (!labelText) labelText = f.dataset.label;
        } else {
          f.classList.remove('active-finger');
        }
      });

      if (labelText) {
        statusBadge.textContent = labelText;
      }

      if (freqMap[targetKey]) {
        playTone(freqMap[targetKey]);
      }
    }

    // Direct Finger Tap / Hover
    fingerBtns.forEach(btn => {
      btn.addEventListener('pointerdown', () => {
        selectKey(btn.dataset.key, true);
      });
      btn.addEventListener('mouseenter', () => {
        if (!autoTimer) selectKey(btn.dataset.key, false);
      });
    });

    // Direct Key Tap
    keys.forEach(keyEl => {
      if (keyEl.dataset.k) {
        keyEl.addEventListener('pointerdown', () => {
          selectKey(keyEl.dataset.k, true);
        });
      }
    });

    // Auto Play Stepper
    function nextAutoStep() {
      selectKey(keySequence[autoIndex], false);
      autoIndex = (autoIndex + 1) % keySequence.length;
    }

    function startAuto() {
      autoBtn.textContent = '⏸ Pause';
      nextAutoStep();
      autoTimer = setInterval(nextAutoStep, 1500);
    }

    function stopAuto() {
      if (autoTimer) {
        clearInterval(autoTimer);
        autoTimer = null;
      }
      autoBtn.textContent = '▶ Auto Guide';
    }

    autoBtn.addEventListener('click', () => {
      if (autoTimer) {
        stopAuto();
      } else {
        startAuto();
      }
    });

    // Start with pointer bump highlighted
    selectKey('F', false);
  </script>
</body>
</html>

OGE.3.W.5

Aligned learning resources

Related diagrams