<!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;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .toolbar {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .pill-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 4px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .pill-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

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

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

    .posture-card {
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .posture-card.wrong {
      border-top: 4px solid #ef4444;
    }

    .posture-card.correct {
      border-top: 4px solid #22c55e;
    }

    .badge {
      font-size: 12px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 12px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .badge.wrong {
      background: #fee2e2;
      color: #b91c1c;
    }

    .badge.correct {
      background: #dcfce7;
      color: #15803d;
    }

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

    /* Highlight pulse effects */
    .focus-target {
      transition: opacity 0.3s ease, stroke-width 0.3s ease;
    }

    .dimmed {
      opacity: 0.2;
    }

    .highlight-ring {
      animation: pulse 1.8s infinite ease-in-out;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 0.8; }
      50% { transform: scale(1.15); opacity: 0.3; }
    }
  </style>
</head>
<body>

  
  <div class="toolbar">
    <button class="pill-btn active" onclick="setFocus('all', this)">All</button>
    <button class="pill-btn" onclick="setFocus('back', this)">Back & Shoulders</button>
    <button class="pill-btn" onclick="setFocus('wrist', this)">Wrists</button>
    <button class="pill-btn" onclick="setFocus('fingers', this)">Fingers</button>
  </div>

  <div class="cards-grid">
    
    <div class="posture-card wrong">
      <div class="badge wrong">✕ Wrong Form</div>
      <svg viewBox="0 0 200 170" aria-label="Wrong typing posture">
        
        <line x1="20" y1="140" x2="190" y2="140" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>
        <rect x="110" y="133" width="55" height="7" rx="2" fill="#cbd5e1" stroke="#64748b" stroke-width="1.5"/>
        <line x1="165" y1="133" x2="180" y2="98" stroke="#64748b" stroke-width="2" stroke-linecap="round"/>

        
        <g class="focus-target focus-back">
          
          <circle cx="82" cy="46" r="16" fill="#fca5a5" stroke="#ef4444" stroke-width="2.5"/>
          <path d="M 86 44 Q 94 46 88 52" stroke="#b91c1c" stroke-width="1.5" fill="none" stroke-linecap="round"/>
          
          
          <path d="M 72 58 Q 42 78 52 135" fill="none" stroke="#ef4444" stroke-width="4" stroke-linecap="round"/>
          
          
          <path d="M 40 76 Q 44 65 55 60" fill="none" stroke="#ef4444" stroke-dasharray="2,2" stroke-width="2"/>
          <text x="18" y="72" font-size="11" font-weight="700" fill="#b91c1c">Slumped</text>
        </g>

        
        <g class="focus-target focus-wrist">
          
          <line x1="65" y1="68" x2="56" y2="108" stroke="#1e2945" stroke-width="4" stroke-linecap="round"/>
          
          <line x1="56" y1="108" x2="112" y2="138" stroke="#1e2945" stroke-width="4" stroke-linecap="round"/>
          
          
          <circle cx="112" cy="138" r="6" fill="#ef4444" opacity="0.4" class="highlight-ring"/>
          <circle cx="112" cy="138" r="3.5" fill="#ef4444"/>
          <text x="80" y="160" font-size="11" font-weight="700" fill="#b91c1c">Resting Flat</text>
        </g>

        
        <g class="focus-target focus-fingers">
          
          <line x1="112" y1="138" x2="140" y2="137" stroke="#ef4444" stroke-width="3" stroke-linecap="round"/>
          <line x1="130" y1="137" x2="145" y2="136" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round"/>
        </g>
      </svg>
    </div>

    
    <div class="posture-card correct">
      <div class="badge correct">✓ Champion Form</div>
      <svg viewBox="0 0 200 170" aria-label="Champion typing posture">
        
        <line x1="20" y1="140" x2="190" y2="140" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>
        <rect x="110" y="133" width="55" height="7" rx="2" fill="#cbd5e1" stroke="#64748b" stroke-width="1.5"/>
        <line x1="165" y1="133" x2="180" y2="98" stroke="#64748b" stroke-width="2" stroke-linecap="round"/>

        
        <g class="focus-target focus-back">
          
          <circle cx="56" cy="36" r="16" fill="#86efac" stroke="#22c55e" stroke-width="2.5"/>
          <path d="M 60 34 Q 68 36 62 42" stroke="#15803d" stroke-width="1.5" fill="none" stroke-linecap="round"/>

          
          <line x1="56" y1="52" x2="56" y2="135" stroke="#22c55e" stroke-width="4" stroke-linecap="round"/>
          <text x="14" y="60" font-size="11" font-weight="700" fill="#15803d">Upright</text>
        </g>

        
        <g class="focus-target focus-wrist">
          
          <line x1="56" y1="62" x2="56" y2="108" stroke="#1e2945" stroke-width="4" stroke-linecap="round"/>
          
          <path d="M 56 98 L 66 98 L 66 108" fill="none" stroke="#0284c7" stroke-width="1.5"/>
          <text x="24" y="104" font-size="11" font-weight="700" fill="#0284c7">90°</text>

          
          <line x1="56" y1="108" x2="114" y2="108" stroke="#1e2945" stroke-width="4" stroke-linecap="round"/>
          
          
          <line x1="114" y1="116" x2="114" y2="132" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
          <polygon points="114,113 111,118 117,118" fill="#22c55e"/>
          <polygon points="114,135 111,130 117,130" fill="#22c55e"/>
          <text x="80" y="160" font-size="11" font-weight="700" fill="#15803d">Floating</text>
        </g>

        
        <g class="focus-target focus-fingers">
          
          <path d="M 114 108 Q 126 102 134 116" fill="none" stroke="#22c55e" stroke-width="3.5" stroke-linecap="round"/>
          
          <path d="M 134 116 Q 138 126 135 133" fill="none" stroke="#22c55e" stroke-width="2.5" stroke-linecap="round"/>
          
          
          <circle cx="125" cy="118" r="9" fill="#0284c7" fill-opacity="0.1" stroke="#0284c7" stroke-width="1.2" stroke-dasharray="2,2"/>
          <text x="135" y="102" font-size="12" fill="#0284c7">🫧</text>
        </g>
      </svg>
    </div>
  </div>

  <script>
    function setFocus(category, btn) {
      document.querySelectorAll('.pill-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');

      const targets = document.querySelectorAll('.focus-target');
      targets.forEach(el => {
        if (category === 'all') {
          el.classList.remove('dimmed');
        } else {
          if (el.classList.contains('focus-' + category)) {
            el.classList.remove('dimmed');
          } else {
            el.classList.add('dimmed');
          }
        }
      });
    }
  </script>
</body>
</html>

Touch-Typing Technique and Speed Stamina

<!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}}/gsap.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; }
    body {
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 100%;
    }

    .lanes {
      display: flex;
      flex-direction: column;
      gap: 14px;
      flex: 1;
      justify-content: center;
    }

    .lane {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .lane-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      font-weight: 700;
    }

    .rush-tag { color: #dc2626; }
    .steady-tag { color: #059669; }

    .stat-pill {
      font-size: 12px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 6px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
    }

    .track {
      position: relative;
      height: 28px;
      background: #e2e8f0;
      border-radius: 8px;
      overflow: hidden;
    }

    .progress-bar {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 0%;
      border-radius: 8px;
    }

    .rush-bar { background: linear-gradient(90deg, #f87171, #ef4444); }
    .steady-bar { background: linear-gradient(90deg, #34d399, #10b981); }

    .track-status {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.5px;
      opacity: 0;
      pointer-events: none;
    }

    .lane-foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      color: #64748b;
      font-weight: 600;
    }

    .net-speed {
      font-size: 16px;
      font-weight: 800;
    }

    .rush-net { color: #dc2626; }
    .steady-net { color: #059669; }

    .controls {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 10px;
    }

    .btn {
      appearance: none;
      border: none;
      background: #22b7ff;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700;
      padding: 8px 18px;
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .btn:active { opacity: 0.85; }

    .btn-secondary {
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #cbd5e1;
    }
  </style>
</head>
<body>

  <div class="lanes">
    
    <div class="lane">
      <div class="lane-head">
        <span class="rush-tag">⚡ Rushing</span>
        <span class="stat-pill" id="rushErrors">12 Errors ⌫</span>
      </div>

      <div class="track">
        <div class="progress-bar rush-bar" id="rushBar"></div>
        <span class="track-status" id="rushStatus" style="color:#b91c1c;">⌫ FIXING</span>
      </div>

      <div class="lane-foot">
        <span>Raw: 40 WPM</span>
        <span class="net-speed rush-net" id="rushNet">Net: 18 WPM</span>
      </div>
    </div>

    
    <div class="lane">
      <div class="lane-head">
        <span class="steady-tag">🎯 Steady & Accurate</span>
        <span class="stat-pill" id="steadyErrors">0 Errors ✓</span>
      </div>

      <div class="track">
        <div class="progress-bar steady-bar" id="steadyBar"></div>
        <span class="track-status" id="steadyStatus" style="color:#047857;">✓ SMOOTH</span>
      </div>

      <div class="lane-foot">
        <span>Raw: 28 WPM</span>
        <span class="net-speed steady-net" id="steadyNet">Net: 28 WPM</span>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="btn" id="playBtn">▶ Replay</button>
  </div>

  <script>
    const rushBar = document.getElementById('rushBar');
    const steadyBar = document.getElementById('steadyBar');
    const rushStatus = document.getElementById('rushStatus');
    const steadyStatus = document.getElementById('steadyStatus');
    const playBtn = document.getElementById('playBtn');

    let tl;

    function buildTimeline() {
      if (tl) tl.kill();

      tl = gsap.timeline({ repeat: -1, repeatDelay: 1.5 });

      // Reset
      tl.set([rushBar, steadyBar], { width: '0%' })
        .set([rushStatus, steadyStatus], { opacity: 0 });

      // Steady moves with continuous smooth progress
      tl.to(steadyBar, { width: '85%', duration: 4.8, ease: 'none' }, 0)
        .to(steadyStatus, { opacity: 1, duration: 0.3 }, 0.5);

      // Rush: Fast sprint 1 -> Error -> Backspace
      tl.to(rushBar, { width: '42%', duration: 1.0, ease: 'power1.out' }, 0)
        .to(rushStatus, { opacity: 1, duration: 0.2 }, 1.0)
        .to(rushBar, { width: '20%', duration: 1.0, ease: 'power1.inOut' }, 1.2) // backspace retreat
        .to(rushStatus, { opacity: 0, duration: 0.2 }, 2.2)

      // Rush: Sprint 2 -> Error -> Backspace
        .to(rushBar, { width: '60%', duration: 1.0, ease: 'power1.out' }, 2.4)
        .to(rushStatus, { opacity: 1, duration: 0.2 }, 3.4)
        .to(rushBar, { width: '38%', duration: 1.0, ease: 'power1.inOut' }, 3.6) // backspace retreat
        .to(rushStatus, { opacity: 0, duration: 0.2 }, 4.6)

      // Rush ends at 48% effective output vs Steady at 85%
        .to(rushBar, { width: '48%', duration: 0.5, ease: 'power1.out' }, 4.8);
    }

    if (window.gsap) {
      buildTimeline();
    } else {
      // Fallback static
      rushBar.style.width = '45%';
      steadyBar.style.width = '85%';
    }

    playBtn.addEventListener('click', () => {
      if (tl) tl.restart();
    });
  </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;
      user-select: none;
      -webkit-user-select: none;
    }

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

    .main-wrap {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    /* Hands Header Labels */
    .hands-bar {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 8px;
    }

    .hand-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .hand-title.left { color: #2563eb; }
    .hand-title.right { color: #059669; }

    /* Finger Indicators Row */
    .fingers-row {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 5px;
      padding: 0 4px;
    }

    .finger-tag {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 5px 2px;
      border-radius: 8px;
      font-size: 11px;
      font-weight: 600;
      text-align: center;
      line-height: 1.1;
      border: 1px solid rgba(0,0,0,0.06);
      transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
      cursor: pointer;
    }

    .finger-tag.left-f {
      background: #eff6ff;
      color: #1d4ed8;
      border-color: #bfdbfe;
    }

    .finger-tag.right-f {
      background: #ecfdf5;
      color: #047857;
      border-color: #a7f3d0;
    }

    .finger-tag.neutral-f {
      opacity: 0.25;
      cursor: default;
      background: #f1f5f9;
      color: #64748b;
      border-color: #e2e8f0;
    }

    .finger-tag.active {
      transform: translateY(2px);
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
    }

    .finger-tag.left-f.active {
      background: #3b82f6;
      color: #ffffff;
      border-color: #2563eb;
    }

    .finger-tag.right-f.active {
      background: #10b981;
      color: #ffffff;
      border-color: #059669;
    }

    /* Keyboard Deck */
    .keyboard-deck {
      width: 100%;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
    }

    /* Key Rows */
    .key-row {
      display: flex;
      width: 100%;
      gap: 5px;
      justify-content: center;
    }

    .key {
      position: relative;
      flex: 1;
      height: 44px;
      min-width: 0;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      background: #ffffff;
      color: #334155;
      border: 1px solid #cbd5e1;
      box-shadow: 0 3px 0 #94a3b8;
      cursor: pointer;
      transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease;
    }

    .key:active, .key.pressed {
      transform: translateY(3px);
      box-shadow: 0 0 0 #94a3b8;
    }

    /* Home Row Left & Right Coloring */
    .key.left-home {
      background: #dbeafe;
      color: #1e40af;
      border-color: #93c5fd;
      box-shadow: 0 3px 0 #60a5fa;
    }
    .key.left-home.pressed {
      background: #3b82f6;
      color: #ffffff;
      box-shadow: 0 0 0 #3b82f6;
    }

    .key.right-home {
      background: #d1fae5;
      color: #065f46;
      border-color: #6ee7b7;
      box-shadow: 0 3px 0 #34d399;
    }
    .key.right-home.pressed {
      background: #10b981;
      color: #ffffff;
      box-shadow: 0 0 0 #10b981;
    }

    .key.dimmed {
      opacity: 0.45;
      background: #f1f5f9;
      color: #64748b;
      box-shadow: 0 2px 0 #cbd5e1;
    }

    /* Raised Bump Markers on F & J */
    .tactile-bump {
      position: absolute;
      bottom: 5px;
      width: 14px;
      height: 3.5px;
      background: #eab308;
      border-radius: 3px;
      box-shadow: 0 0 0 1px #ca8a04;
    }

    /* Zoom Callout Badge */
    .bump-callout {
      position: absolute;
      top: -26px;
      background: #fef08a;
      border: 1px solid #eab308;
      color: #854d0e;
      font-size: 9px;
      font-weight: 800;
      padding: 2px 5px;
      border-radius: 5px;
      white-space: nowrap;
      pointer-events: none;
      box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    }
    .bump-callout::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 4px 4px 0 4px;
      border-style: solid;
      border-color: #eab308 transparent transparent transparent;
    }

    /* Spacebar Row */
    .space-row {
      display: flex;
      justify-content: center;
      position: relative;
    }

    .space-key {
      flex: 0 0 52%;
      height: 40px;
      background: #ede9fe;
      border-color: #c4b5fd;
      color: #5b21b6;
      box-shadow: 0 3px 0 #a78bfa;
      font-size: 13px;
      font-weight: 700;
    }
    .space-key.pressed {
      background: #8b5cf6;
      color: #ffffff;
      box-shadow: 0 0 0 #8b5cf6;
    }

    .thumbs-tag {
      position: absolute;
      bottom: -22px;
      font-size: 11px;
      font-weight: 700;
      color: #7c3aed;
      background: #f5f3ff;
      border: 1px solid #ddd6fe;
      padding: 1px 8px;
      border-radius: 10px;
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="hands-bar">
      <div class="hand-title left"><span>✋</span> Left Hand</div>
      <div class="hand-title right">Right Hand <span>✋</span></div>
    </div>

    
    <div class="fingers-row">
      <div class="finger-tag left-f" data-key="A">Pinky<br><b>A</b></div>
      <div class="finger-tag left-f" data-key="S">Ring<br><b>S</b></div>
      <div class="finger-tag left-f" data-key="D">Mid<br><b>D</b></div>
      <div class="finger-tag left-f" data-key="F">Index<br><b>F</b></div>
      <div class="finger-tag neutral-f">—</div>
      <div class="finger-tag neutral-f">—</div>
      <div class="finger-tag right-f" data-key="J">Index<br><b>J</b></div>
      <div class="finger-tag right-f" data-key="K">Mid<br><b>K</b></div>
      <div class="finger-tag right-f" data-key="L">Ring<br><b>L</b></div>
      <div class="finger-tag right-f" data-key=";">Pinky<br><b>;</b></div>
    </div>

    
    <div class="keyboard-deck">
      
      <div class="key-row">
        <button type="button" class="key left-home" data-key="A">A</button>
        <button type="button" class="key left-home" data-key="S">S</button>
        <button type="button" class="key left-home" data-key="D">D</button>
        <button type="button" class="key left-home" data-key="F">
          <div class="bump-callout">Raised Bump</div>
          F
          <span class="tactile-bump"></span>
        </button>
        <button type="button" class="key dimmed" data-key="G">G</button>
        <button type="button" class="key dimmed" data-key="H">H</button>
        <button type="button" class="key right-home" data-key="J">
          <div class="bump-callout">Raised Bump</div>
          J
          <span class="tactile-bump"></span>
        </button>
        <button type="button" class="key right-home" data-key="K">K</button>
        <button type="button" class="key right-home" data-key="L">L</button>
        <button type="button" class="key right-home" data-key=";">;</button>
      </div>

      
      <div class="key-row space-row">
        <button type="button" class="key space-key" data-key="SPACE">Spacebar</button>
        <div class="thumbs-tag">Thumbs</div>
      </div>
    </div>
  </div>

  <script>
    // Web Audio Sound on Click
    let audioCtx = null;
    function playClick(freq = 480) {
      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 = 'triangle';
        osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
        gain.gain.setValueAtTime(0.12, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.08);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + 0.08);
      } catch (e) {}
    }

    const keys = document.querySelectorAll('.key');
    const fingerTags = document.querySelectorAll('.finger-tag[data-key]');

    function triggerKey(keyName) {
      playClick(keyName === 'SPACE' ? 280 : 520);

      // Highlight Key
      keys.forEach(k => {
        if (k.getAttribute('data-key') === keyName) {
          k.classList.add('pressed');
          setTimeout(() => k.classList.remove('pressed'), 180);
        }
      });

      // Highlight Finger Tag
      fingerTags.forEach(f => {
        if (f.getAttribute('data-key') === keyName) {
          f.classList.add('active');
          setTimeout(() => f.classList.remove('active'), 180);
        }
      });
    }

    keys.forEach(key => {
      key.addEventListener('pointerdown', () => {
        triggerKey(key.getAttribute('data-key'));
      });
    });

    fingerTags.forEach(tag => {
      tag.addEventListener('pointerdown', () => {
        triggerKey(tag.getAttribute('data-key'));
      });
    });

    // Keyboard physical key listener
    window.addEventListener('keydown', (e) => {
      let k = e.key.toUpperCase();
      if (e.code === 'Space') k = 'SPACE';
      if (['A','S','D','F','G','H','J','K','L',';','SPACE'].includes(k)) {
        triggerKey(k);
      }
    });
  </script>
</body>
</html>

OGE.5.W.6

Aligned learning resources

Related diagrams