View Code - 20260722

typing_master_num_pad.php | 20260722_120325.php Initial Domain Snapshot

<?php
/* =============================================================================
   File: /typing_master_num_pad.php
   Purpose: Num Pad Typing Practice with Visual Finger Guide
   Author: mistermanager.in
   Date: 2025-10-06
   ============================================================================= */
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Num Pad Typing Practice — Typing Master</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
  font-family: 'Segoe UI', sans-serif;
  background: #f8f9fa;
  color: #222;
  text-align: center;
  margin: 0; padding: 20px;
}

h1 { font-size: 24px; margin-bottom: 10px; }

#practice-text {
  font-size: 28px;
  letter-spacing: 3px;
  background: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  display: inline-block;
  margin: 15px auto;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#input-area {
  margin-top: 10px;
}

input[type="text"] {
  width: 300px;
  font-size: 22px;
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

#keyboard {
  display: grid;
  grid-template-columns: repeat(4, 70px);
  gap: 8px;
  justify-content: center;
  margin-top: 30px;
}

.key {
  background: #e9ecef;
  border-radius: 8px;
  padding: 15px 0;
  font-size: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.key.highlight {
  background: #0d6efd;
  color: white;
}

#finger-guide {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

.finger {
  width: 50px; height: 50px;
  border-radius: 50%;
  opacity: 0.4;
}

.finger.active { opacity: 1; border: 3px solid #000; }

.finger.index { background: #4caf50; }
.finger.middle { background: #2196f3; }
.finger.ring { background: #ff9800; }
.finger.little { background: #f44336; }

#stats {
  margin-top: 20px;
  font-size: 18px;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  background: #198754;
  color: white;
  border-radius: 8px;
  cursor: pointer;
}
button:hover { background: #157347; }

</style>
</head>
<body>

<h1>Num Pad Typing Practice</h1>

<div id="practice-text">Press Start to Begin</div>

<button id="start-btn">Start Practice</button>

<div id="stats">
  Accuracy: <span id="accuracy">0</span>% | Speed: <span id="speed">0</span> CPM
</div>

let text = '', startTime = null, totalTyped = 0, correctTyped = 0;

function generateText() {
  const digits = '0123456789';
  let result = '';
  for (let i = 0; i < 20; i++) {
    result += digits[Math.floor(Math.random() * 10)];
    if (i % 4 === 3) result += ' ';
  }
  return result.trim();
}

function getFingerForKey(k) {
  if (['4','5','6'].includes(k)) return 'index';
  if (['7','8','9'].includes(k)) return 'middle';
  if (['1','2','3'].includes(k)) return 'ring';
  if (['0','.','+','Enter','-','/','*'].includes(k)) return 'little';
  return null;
}

function highlightKey(key) {
  keys.forEach(k => k.classList.remove('highlight'));
  const target = [...keys].find(k => k.dataset.key === key);
  if (target) target.classList.add('highlight');
}

function highlightFinger(finger) {
  Object.values(fingers).forEach(f => f.classList.remove('active'));
  if (finger && fingers[finger]) fingers[finger].classList.add('active');
}

startBtn.onclick = () => {
  text = generateText();
  practiceText.textContent = text;
  input.disabled = false;
  input.value = '';
  input.focus();
  startTime = null;
  totalTyped = correctTyped = 0;
  document.getElementById('accuracy').textContent = 0;
  document.getElementById('speed').textContent = 0;
};

input.addEventListener('input', (e) => {
  if (!startTime) startTime = new Date();
  const typed = e.target.value;
  totalTyped++;
  const currentChar = text[typed.length - 1];
  if (typed[typed.length - 1] === currentChar) correctTyped++;

const acc = ((correctTyped / totalTyped) * 100).toFixed(1);
  const elapsed = (new Date() - startTime) / 60000;
  const speed = Math.round(correctTyped / elapsed);

document.getElementById('accuracy').textContent = acc;
  document.getElementById('speed').textContent = speed;

const nextChar = text[typed.length];
  highlightKey(nextChar);
  highlightFinger(getFingerForKey(nextChar));
});
</script>

<p style="margin-top:30px;color:#777;">Created by <b>mistermanager.in</b></p>
</body>
</html>