Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Speed Typing Challenge</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| @keyframes shake { | |
| 0%, 100% { transform: translateX(0); } | |
| 25% { transform: translateX(-5px); } | |
| 75% { transform: translateX(5px); } | |
| } | |
| .key-active { | |
| background-color: #3b82f6 ; | |
| color: white ; | |
| transform: translateY(2px); | |
| box-shadow: 0 2px 0 #1d4ed8; | |
| } | |
| .key-correct { | |
| background-color: #10b981 ; | |
| } | |
| .key-wrong { | |
| background-color: #ef4444 ; | |
| animation: shake 0.2s; | |
| } | |
| .current-char { | |
| border-bottom: 3px solid #3b82f6; | |
| } | |
| .correct-char { | |
| color: #10b981; | |
| } | |
| .wrong-char { | |
| color: #ef4444; | |
| text-decoration: underline; | |
| } | |
| .progress-bar { | |
| transition: width 0.3s ease; | |
| } | |
| .floating-emoji { | |
| position: absolute; | |
| pointer-events: none; | |
| font-size: 1.5rem; | |
| animation: float-up 2s forwards; | |
| } | |
| @keyframes float-up { | |
| 0% { transform: translateY(0); opacity: 1; } | |
| 100% { transform: translateY(-100px); opacity: 0; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col"> | |
| <div class="container mx-auto px-4 py-8 flex-1 flex flex-col"> | |
| <!-- Header --> | |
| <header class="text-center mb-8"> | |
| <h1 class="text-4xl font-bold text-blue-400 mb-2">Speed Typing Challenge</h1> | |
| <p class="text-gray-400">Test your typing speed and accuracy!</p> | |
| </header> | |
| <!-- Game Stats --> | |
| <div class="bg-gray-800 rounded-lg p-4 mb-6 shadow-lg"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-blue-400" id="wpm">0</div> | |
| <div class="text-gray-400 text-sm">WPM</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-green-400" id="accuracy">100%</div> | |
| <div class="text-gray-400 text-sm">Accuracy</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-purple-400" id="score">0</div> | |
| <div class="text-gray-400 text-sm">Score</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-yellow-400" id="time">60</div> | |
| <div class="text-gray-400 text-sm">Seconds</div> | |
| </div> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> | |
| <div id="time-progress" class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <!-- Game Area --> | |
| <div class="flex-1 flex flex-col"> | |
| <!-- Text Display --> | |
| <div class="bg-gray-800 rounded-lg p-6 mb-6 shadow-lg relative overflow-hidden min-h-32"> | |
| <div id="text-display" class="text-xl leading-relaxed font-mono select-none"></div> | |
| <div id="floating-emojis" class="absolute inset-0 pointer-events-none overflow-hidden"></div> | |
| </div> | |
| <!-- Keyboard --> | |
| <div class="bg-gray-800 rounded-lg p-4 shadow-lg"> | |
| <div class="keyboard-row flex justify-center mb-2"> | |
| <div class="key" data-key="`">`</div> | |
| <div class="key" data-key="1">1</div> | |
| <div class="key" data-key="2">2</div> | |
| <div class="key" data-key="3">3</div> | |
| <div class="key" data-key="4">4</div> | |
| <div class="key" data-key="5">5</div> | |
| <div class="key" data-key="6">6</div> | |
| <div class="key" data-key="7">7</div> | |
| <div class="key" data-key="8">8</div> | |
| <div class="key" data-key="9">9</div> | |
| <div class="key" data-key="0">0</div> | |
| <div class="key" data-key="-">-</div> | |
| <div class="key" data-key="=">=</div> | |
| <div class="key key-wide" data-key="backspace"> | |
| <i class="fas fa-backspace"></i> | |
| </div> | |
| </div> | |
| <div class="keyboard-row flex justify-center mb-2"> | |
| <div class="key key-wide" data-key="tab">Tab</div> | |
| <div class="key" data-key="q">Q</div> | |
| <div class="key" data-key="w">W</div> | |
| <div class="key" data-key="e">E</div> | |
| <div class="key" data-key="r">R</div> | |
| <div class="key" data-key="t">T</div> | |
| <div class="key" data-key="y">Y</div> | |
| <div class="key" data-key="u">U</div> | |
| <div class="key" data-key="i">I</div> | |
| <div class="key" data-key="o">O</div> | |
| <div class="key" data-key="p">P</div> | |
| <div class="key" data-key="[">[</div> | |
| <div class="key" data-key="]">]</div> | |
| <div class="key" data-key="\\">\</div> | |
| </div> | |
| <div class="keyboard-row flex justify-center mb-2"> | |
| <div class="key key-extra-wide" data-key="capslock"> | |
| <i class="fas fa-caps-lock"></i> | |
| </div> | |
| <div class="key" data-key="a">A</div> | |
| <div class="key" data-key="s">S</div> | |
| <div class="key" data-key="d">D</div> | |
| <div class="key" data-key="f">F</div> | |
| <div class="key" data-key="g">G</div> | |
| <div class="key" data-key="h">H</div> | |
| <div class="key" data-key="j">J</div> | |
| <div class="key" data-key="k">K</div> | |
| <div class="key" data-key="l">L</div> | |
| <div class="key" data-key=";">;</div> | |
| <div class="key" data-key="'">'</div> | |
| <div class="key key-extra-wide" data-key="enter"> | |
| <i class="fas fa-arrow-left rotate-180"></i> | |
| </div> | |
| </div> | |
| <div class="keyboard-row flex justify-center mb-2"> | |
| <div class="key key-ultra-wide" data-key="shift"> | |
| <i class="fas fa-arrow-up"></i> | |
| </div> | |
| <div class="key" data-key="z">Z</div> | |
| <div class="key" data-key="x">X</div> | |
| <div class="key" data-key="c">C</div> | |
| <div class="key" data-key="v">V</div> | |
| <div class="key" data-key="b">B</div> | |
| <div class="key" data-key="n">N</div> | |
| <div class="key" data-key="m">M</div> | |
| <div class="key" data-key=",">,</div> | |
| <div class="key" data-key=".">.</div> | |
| <div class="key" data-key="/">/</div> | |
| <div class="key key-ultra-wide" data-key="shift"> | |
| <i class="fas fa-arrow-up"></i> | |
| </div> | |
| </div> | |
| <div class="keyboard-row flex justify-center"> | |
| <div class="key" data-key="ctrl">Ctrl</div> | |
| <div class="key" data-key="win"> | |
| <i class="fab fa-windows"></i> | |
| </div> | |
| <div class="key" data-key="alt">Alt</div> | |
| <div class="key key-space" data-key=" ">Space</div> | |
| <div class="key" data-key="alt">Alt</div> | |
| <div class="key" data-key="fn">Fn</div> | |
| <div class="key" data-key="ctrl">Ctrl</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Controls --> | |
| <div class="mt-6 text-center"> | |
| <button id="start-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-lg"> | |
| <i class="fas fa-play mr-2"></i> Start Game | |
| </button> | |
| <div class="mt-4 flex justify-center space-x-4"> | |
| <button id="easy-btn" class="difficulty-btn bg-green-600 hover:bg-green-700 px-4 py-2 rounded" data-level="easy">Easy</button> | |
| <button id="medium-btn" class="difficulty-btn bg-yellow-600 hover:bg-yellow-700 px-4 py-2 rounded" data-level="medium">Medium</button> | |
| <button id="hard-btn" class="difficulty-btn bg-red-600 hover:bg-red-700 px-4 py-2 rounded" data-level="hard">Hard</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Over Modal --> | |
| <div id="game-over-modal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center hidden z-50"> | |
| <div class="bg-gray-800 rounded-xl p-8 max-w-md w-full mx-4 shadow-2xl transform transition-all duration-300 scale-95 opacity-0"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-bold text-blue-400 mb-4">Game Over!</h2> | |
| <div class="text-xl mb-6"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-400">Final Score:</span> | |
| <span class="font-bold" id="final-score">0</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-400">WPM:</span> | |
| <span class="font-bold" id="final-wpm">0</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-400">Accuracy:</span> | |
| <span class="font-bold" id="final-accuracy">100%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-400">Difficulty:</span> | |
| <span class="font-bold" id="final-difficulty">Medium</span> | |
| </div> | |
| </div> | |
| <button id="play-again-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full transition-all duration-300 transform hover:scale-105"> | |
| <i class="fas fa-redo mr-2"></i> Play Again | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Game variables | |
| let currentText = ''; | |
| let currentIndex = 0; | |
| let correctChars = 0; | |
| let wrongChars = 0; | |
| let startTime; | |
| let timer; | |
| let gameActive = false; | |
| let difficulty = 'medium'; | |
| let score = 0; | |
| let emojis = ['🎯', '🔥', '⚡', '🚀', '💯', '👏', '👍', '✨', '🌟', '🏆']; | |
| let positiveEmojis = ['😊', '🤩', '😎', '🤘', '👌', '💪', '🙌', '🦄', '🌈', '🍕']; | |
| let negativeEmojis = ['😅', '😬', '😳', '🤔', '🙄', '😓', '😥', '🤒', '😵', '💀']; | |
| // DOM elements | |
| const textDisplay = document.getElementById('text-display'); | |
| const startBtn = document.getElementById('start-btn'); | |
| const gameOverModal = document.getElementById('game-over-modal'); | |
| const playAgainBtn = document.getElementById('play-again-btn'); | |
| const wpmDisplay = document.getElementById('wpm'); | |
| const accuracyDisplay = document.getElementById('accuracy'); | |
| const scoreDisplay = document.getElementById('score'); | |
| const timeDisplay = document.getElementById('time'); | |
| const timeProgress = document.getElementById('time-progress'); | |
| const floatingEmojis = document.getElementById('floating-emojis'); | |
| const difficultyBtns = document.querySelectorAll('.difficulty-btn'); | |
| const keys = document.querySelectorAll('.key'); | |
| const finalScore = document.getElementById('final-score'); | |
| const finalWpm = document.getElementById('final-wpm'); | |
| const finalAccuracy = document.getElementById('final-accuracy'); | |
| const finalDifficulty = document.getElementById('final-difficulty'); | |
| // Sample texts based on difficulty | |
| const sampleTexts = { | |
| easy: [ | |
| "The quick brown fox jumps over the lazy dog.", | |
| "Programming is fun and challenging at the same time.", | |
| "Learning to type quickly will improve your productivity.", | |
| "Practice makes perfect when it comes to typing skills.", | |
| "The sun shines brightly on a beautiful summer day." | |
| ], | |
| medium: [ | |
| "JavaScript is a versatile programming language used for web development. It allows developers to create interactive websites and applications.", | |
| "The complexity of modern software systems requires careful planning and design to ensure reliability and maintainability.", | |
| "Artificial intelligence is transforming various industries by automating tasks that previously required human intelligence.", | |
| "Responsive web design ensures that websites look good on all devices, from mobile phones to desktop computers.", | |
| "Cloud computing has revolutionized how businesses store and process data, offering scalability and cost efficiency." | |
| ], | |
| hard: [ | |
| "The intricacies of quantum computing lie in its ability to process information using quantum bits or qubits, which can exist in multiple states simultaneously, unlike classical bits that are binary.", | |
| "Neural networks, inspired by biological neurons, consist of layers of interconnected nodes that process input data through weighted connections, adjusting these weights during training to minimize error in predictions.", | |
| "Cryptographic hash functions are mathematical algorithms that map data of arbitrary size to fixed-size values, designed to be one-way functions that are infeasible to invert, providing data integrity verification.", | |
| "The observer effect in quantum mechanics states that the act of observation inevitably alters the system being observed, a fundamental limitation in measuring quantum phenomena with absolute precision.", | |
| "Polymorphism in object-oriented programming allows objects of different classes to be treated as objects of a common superclass, enabling code reuse and more flexible software design through method overriding and overloading." | |
| ] | |
| }; | |
| // Initialize game | |
| function initGame() { | |
| // Set difficulty | |
| difficultyBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| difficulty = btn.dataset.level; | |
| difficultyBtns.forEach(b => b.classList.remove('ring-2', 'ring-white')); | |
| btn.classList.add('ring-2', 'ring-white'); | |
| }); | |
| }); | |
| // Set medium as default difficulty | |
| document.getElementById('medium-btn').click(); | |
| // Keyboard highlight | |
| document.addEventListener('keydown', (e) => { | |
| if (!gameActive) return; | |
| const key = e.key.toLowerCase(); | |
| const keyElement = document.querySelector(`.key[data-key="${key}"]`) || | |
| document.querySelector(`.key[data-key="${e.code.replace('Key', '').toLowerCase()}"]`); | |
| if (keyElement) { | |
| keyElement.classList.add('key-active'); | |
| } | |
| }); | |
| document.addEventListener('keyup', (e) => { | |
| const key = e.key.toLowerCase(); | |
| const keyElement = document.querySelector(`.key[data-key="${key}"]`) || | |
| document.querySelector(`.key[data-key="${e.code.replace('Key', '').toLowerCase()}"]`); | |
| if (keyElement) { | |
| keyElement.classList.remove('key-active'); | |
| } | |
| }); | |
| // Start game button | |
| startBtn.addEventListener('click', startGame); | |
| // Play again button | |
| playAgainBtn.addEventListener('click', () => { | |
| gameOverModal.classList.add('hidden'); | |
| startGame(); | |
| }); | |
| } | |
| // Start the game | |
| function startGame() { | |
| // Reset stats | |
| currentIndex = 0; | |
| correctChars = 0; | |
| wrongChars = 0; | |
| score = 0; | |
| scoreDisplay.textContent = '0'; | |
| accuracyDisplay.textContent = '100%'; | |
| wpmDisplay.textContent = '0'; | |
| timeDisplay.textContent = '60'; | |
| timeProgress.style.width = '100%'; | |
| // Get random text based on difficulty | |
| const texts = sampleTexts[difficulty]; | |
| currentText = texts[Math.floor(Math.random() * texts.length)]; | |
| // Display text with current character highlighted | |
| displayText(); | |
| // Start timer | |
| startTime = new Date(); | |
| let timeLeft = 60; | |
| timer = setInterval(() => { | |
| timeLeft--; | |
| timeDisplay.textContent = timeLeft; | |
| timeProgress.style.width = `${(timeLeft / 60) * 100}%`; | |
| if (timeLeft <= 0) { | |
| endGame(); | |
| } | |
| }, 1000); | |
| // Focus on window for key events | |
| window.focus(); | |
| // Set game state | |
| gameActive = true; | |
| startBtn.disabled = true; | |
| startBtn.classList.remove('bg-blue-600', 'hover:bg-blue-700'); | |
| startBtn.classList.add('bg-gray-600', 'cursor-not-allowed'); | |
| startBtn.innerHTML = '<i class="fas fa-gamepad mr-2"></i> Game in Progress...'; | |
| } | |
| // Display text with current character highlighted | |
| function displayText() { | |
| let html = ''; | |
| for (let i = 0; i < currentText.length; i++) { | |
| let charClass = ''; | |
| if (i < currentIndex) { | |
| charClass = 'correct-char'; | |
| } else if (i === currentIndex) { | |
| charClass = 'current-char'; | |
| } | |
| html += `<span class="${charClass}">${currentText[i]}</span>`; | |
| } | |
| textDisplay.innerHTML = html; | |
| } | |
| // Handle key press | |
| document.addEventListener('keydown', (e) => { | |
| if (!gameActive) return; | |
| // Prevent default for most keys except Tab, Escape, etc. | |
| if (e.key.length === 1 || e.key === 'Backspace' || e.key === 'Enter' || e.key === 'Space') { | |
| e.preventDefault(); | |
| } | |
| const expectedChar = currentText[currentIndex]; | |
| const typedChar = e.key; | |
| // Highlight key | |
| const key = e.key.toLowerCase(); | |
| const keyElement = document.querySelector(`.key[data-key="${key}"]`) || | |
| document.querySelector(`.key[data-key="${e.code.replace('Key', '').toLowerCase()}"]`); | |
| if (keyElement) { | |
| keyElement.classList.add('key-active'); | |
| // Remove highlight after short delay | |
| setTimeout(() => { | |
| keyElement.classList.remove('key-active'); | |
| }, 200); | |
| } | |
| // Handle backspace | |
| if (typedChar === 'Backspace') { | |
| if (currentIndex > 0) { | |
| currentIndex--; | |
| // If we're going back over a wrong character, decrease wrong count | |
| if (textDisplay.children[currentIndex].classList.contains('wrong-char')) { | |
| wrongChars--; | |
| } else { | |
| correctChars--; | |
| } | |
| displayText(); | |
| } | |
| return; | |
| } | |
| // Check if game is over (all characters typed) | |
| if (currentIndex >= currentText.length) { | |
| return; | |
| } | |
| // Check if typed character matches expected character | |
| if (typedChar === expectedChar) { | |
| correctChars++; | |
| score += 10; | |
| // Add floating emoji for correct key | |
| if (Math.random() > 0.7) { | |
| addFloatingEmoji(positiveEmojis[Math.floor(Math.random() * positiveEmojis.length)]); | |
| } | |
| // Highlight key as correct | |
| if (keyElement) { | |
| keyElement.classList.add('key-correct'); | |
| setTimeout(() => { | |
| keyElement.classList.remove('key-correct'); | |
| }, 300); | |
| } | |
| } else { | |
| wrongChars++; | |
| score = Math.max(0, score - 5); | |
| // Add floating emoji for wrong key | |
| if (Math.random() > 0.7) { | |
| addFloatingEmoji(negativeEmojis[Math.floor(Math.random() * negativeEmojis.length)]); | |
| } | |
| // Highlight key as wrong | |
| if (keyElement) { | |
| keyElement.classList.add('key-wrong'); | |
| setTimeout(() => { | |
| keyElement.classList.remove('key-wrong'); | |
| }, 300); | |
| } | |
| // Mark character as wrong | |
| textDisplay.children[currentIndex].classList.add('wrong-char'); | |
| } | |
| // Move to next character | |
| currentIndex++; | |
| // Update stats | |
| updateStats(); | |
| // Check if all characters are typed | |
| if (currentIndex >= currentText.length) { | |
| setTimeout(() => { | |
| addFloatingEmoji(emojis[Math.floor(Math.random() * emojis.length)]); | |
| score += 100; // Bonus for completing the text | |
| updateStats(); | |
| endGame(); | |
| }, 300); | |
| } else { | |
| displayText(); | |
| } | |
| }); | |
| // Add floating emoji effect | |
| function addFloatingEmoji(emoji) { | |
| const emojiElement = document.createElement('div'); | |
| emojiElement.className = 'floating-emoji'; | |
| emojiElement.textContent = emoji; | |
| // Random position in the text display area | |
| const textRect = textDisplay.getBoundingClientRect(); | |
| const x = Math.random() * (textRect.width - 30); | |
| const y = Math.random() * (textRect.height - 30); | |
| emojiElement.style.left = `${x}px`; | |
| emojiElement.style.top = `${y}px`; | |
| floatingEmojis.appendChild(emojiElement); | |
| // Remove after animation | |
| setTimeout(() => { | |
| emojiElement.remove(); | |
| }, 2000); | |
| } | |
| // Update game stats | |
| function updateStats() { | |
| // Calculate WPM (Words Per Minute) | |
| const timeElapsed = (new Date() - startTime) / 60000; // in minutes | |
| const wordsTyped = correctChars / 5; // standard word length | |
| const wpm = Math.round(wordsTyped / timeElapsed) || 0; | |
| // Calculate accuracy | |
| const totalTyped = correctChars + wrongChars; | |
| const accuracy = totalTyped > 0 ? Math.round((correctChars / totalTyped) * 100) : 100; | |
| // Update displays | |
| wpmDisplay.textContent = wpm; | |
| accuracyDisplay.textContent = `${accuracy}%`; | |
| scoreDisplay.textContent = score; | |
| } | |
| // End the game | |
| function endGame() { | |
| clearInterval(timer); | |
| gameActive = false; | |
| // Update final stats | |
| finalScore.textContent = score; | |
| finalWpm.textContent = wpmDisplay.textContent; | |
| finalAccuracy.textContent = accuracyDisplay.textContent; | |
| finalDifficulty.textContent = difficulty.charAt(0).toUpperCase() + difficulty.slice(1); | |
| // Show game over modal with animation | |
| gameOverModal.classList.remove('hidden'); | |
| setTimeout(() => { | |
| const modalContent = gameOverModal.querySelector('div'); | |
| modalContent.classList.remove('scale-95', 'opacity-0'); | |
| modalContent.classList.add('scale-100', 'opacity-100'); | |
| }, 10); | |
| // Reset start button | |
| startBtn.disabled = false; | |
| startBtn.classList.remove('bg-gray-600', 'cursor-not-allowed'); | |
| startBtn.classList.add('bg-blue-600', 'hover:bg-blue-700'); | |
| startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Start Game'; | |
| } | |
| // Initialize the game when page loads | |
| window.addEventListener('load', initGame); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=GMANMD12/speed-typing-challenge" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |