Spaces:

GameDev102
/

meme-typing-speed-test

Running

File size: 24,220 Bytes

6c131e3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meme Typing Speed Test</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');
        
        body {
            font-family: 'Comic Neue', cursive;
            transition: background-image 0.5s ease-in-out;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            min-height: 100vh;
        }
        
        .bg-overlay {
            background-color: rgba(0, 0, 0, 0.6);
        }
        
        .text-display {
            font-size: 1.2rem;
            line-height: 1.8;
            letter-spacing: 0.05em;
        }
        
        .correct {
            color: #4ade80;
        }
        
        .incorrect {
            color: #f87171;
            text-decoration: underline;
        }
        
        .current {
            background-color: rgba(74, 222, 128, 0.3);
            border-left: 2px solid #4ade80;
        }
        
        .fade-in {
            animation: fadeIn 0.5s;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .meme-caption {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
            animation: bounce 1s infinite alternate;
        }
        
        @keyframes bounce {
            from { transform: translateY(0); }
            to { transform: translateY(-5px); }
        }
        
        .result-card {
            backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.15);
        }
    </style>
</head>
<body class="bg-gray-900 text-white" id="app">
    <div class="bg-overlay min-h-screen flex flex-col items-center justify-center p-4 md:p-8">
        <div class="w-full max-w-4xl mx-auto">
            <!-- Header -->
            <header class="text-center mb-8 fade-in">
                <h1 class="text-4xl md:text-5xl font-bold mb-2 text-yellow-300">Meme Typing Speed Test</h1>
                <p class="text-lg md:text-xl text-gray-300">Type fast, get roasted, enjoy the memes!</p>
            </header>
            
            <!-- Stats Display -->
            <div class="flex justify-between mb-6 bg-gray-800 rounded-lg p-4 shadow-lg">
                <div class="text-center">
                    <p class="text-sm text-gray-400">Speed</p>
                    <p class="text-2xl font-bold" id="wpm">0</p>
                    <p class="text-xs">WPM</p>
                </div>
                <div class="text-center">
                    <p class="text-sm text-gray-400">Accuracy</p>
                    <p class="text-2xl font-bold" id="accuracy">100</p>
                    <p class="text-xs">%</p>
                </div>
                <div class="text-center">
                    <p class="text-sm text-gray-400">Time</p>
                    <p class="text-2xl font-bold" id="time">60</p>
                    <p class="text-xs">seconds</p>
                </div>
            </div>
            
            <!-- Meme Caption -->
            <div class="text-center mb-6">
                <p class="text-xl md:text-2xl font-bold meme-caption text-yellow-300" id="meme-caption">Ready to get roasted by your typing speed?</p>
            </div>
            
            <!-- Typing Test Area -->
            <div id="test-container" class="fade-in">
                <div class="mb-6 p-4 bg-gray-800 rounded-lg shadow-lg">
                    <div id="text-display" class="text-display mb-4 h-24 overflow-y-auto"></div>
                    <input 
                        type="text" 
                        id="input-field" 
                        class="w-full p-3 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400" 
                        placeholder="Click here to start typing..." 
                        autocomplete="off"
                        autocorrect="off"
                        autocapitalize="off"
                        spellcheck="false"
                    >
                </div>
                
                <div class="text-center">
                    <button id="start-btn" class="px-6 py-3 bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-bold rounded-lg transition duration-200">
                        Start Test
                    </button>
                </div>
            </div>
            
            <!-- Results (Hidden Initially) -->
            <div id="results-container" class="hidden fade-in">
                <div class="result-card rounded-lg p-6 mb-6 shadow-xl border border-gray-700">
                    <h2 class="text-3xl font-bold text-center mb-4 text-yellow-300">Your Results</h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                        <div class="bg-gray-800 p-4 rounded-lg">
                            <p class="text-sm text-gray-400">Final Speed</p>
                            <p class="text-3xl font-bold" id="final-wpm">0</p>
                            <p class="text-xs">Words Per Minute</p>
                        </div>
                        <div class="bg-gray-800 p-4 rounded-lg">
                            <p class="text-sm text-gray-400">Accuracy</p>
                            <p class="text-3xl font-bold" id="final-accuracy">100</p>
                            <p class="text-xs">% Correct</p>
                        </div>
                        <div class="bg-gray-800 p-4 rounded-lg">
                            <p class="text-sm text-gray-400">Meme Level</p>
                            <p class="text-3xl font-bold" id="meme-level">Snail</p>
                            <p class="text-xs">Speed Tier</p>
                        </div>
                    </div>
                    
                    <div class="text-center mb-6">
                        <p class="text-xl font-bold" id="final-caption">You type like a sloth on a lazy Sunday!</p>
                    </div>
                    
                    <div class="flex flex-col md:flex-row justify-center gap-4">
                        <button id="restart-btn" class="px-6 py-3 bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-bold rounded-lg transition duration-200">
                            Try Again
                        </button>
                        <button id="share-btn" class="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-lg transition duration-200">
                            Share Results
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Sample texts for typing test
        const sampleTexts = [
            "The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump!",
            "Crazy Fredrick bought many very exquisite opal jewels. The five boxing wizards jump quickly. My girl wove six dozen plaid jackets before she quit.",
            "Jinxed wizards pluck ivy from the big quilt. Crazy Fredrick bought many very exquisite opal jewels. Sphinx of black quartz, judge my vow.",
            "The quick onyx goblin jumps over the lazy dwarf. Pack my red box with five dozen quality jugs. How quickly daft jumping zebras vex!",
            "Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Two driven jocks help fax my big quiz. Five quacking zephyrs jolt my wax bed."
        ];
        
        // Meme GIFs for different speed tiers
        const memeGifs = {
            slow: "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExcGJhZ2J0dG9uY2J0d3F4dGJ5d3R6Z2V4eXJ2bGJ5b2VtZ2J5eW1rZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3o7TKTD1P5JCDoQxKU/giphy.gif",
            medium: "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExb2V4dG5oZ2R4dW5tZ2J5eW1rZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/l0HU20BZ6LbSEITza/giphy.gif",
            fast: "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExb2V4dG5oZ2R4dW5tZ2J5eW1rZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3o7aCTPPm4OHfRLSH6/giphy.gif",
            ultra: "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExb2V4dG5oZ2R4dW5tZ2J5eW1rZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/xT5LMHxhOfscxPfIfm/giphy.gif"
        };
        
        // Meme captions for different speed tiers
        const memeCaptions = {
            slow: [
                "Your grandma types faster than this.",
                "Are you typing with your nose?",
                "I've seen sloths move faster.",
                "Is your keyboard made of molasses?",
                "At this rate, you'll finish by next Christmas."
            ],
            medium: [
                "Not bad... for a turtle.",
                "You're trying, and that's what counts.",
                "Speed: Average. Meme potential: High.",
                "You type like a middle manager.",
                "Could be worse... could be better."
            ],
            fast: [
                "WOOOSH! You're going places!",
                "Someone's been practicing!",
                "Now we're cooking with gas!",
                "Look at you go, speed demon!",
                "The keyboard is on fire!"
            ],
            ultra: [
                "HOLY MOLY! Are you a robot?",
                "The Flash called, he wants his speed back.",
                "You type faster than light travels.",
                "Did you sell your soul for typing powers?",
                "NASA wants to study your fingers."
            ]
        };
        
        // Final result captions
        const resultCaptions = {
            slow: [
                "You type like a sloth on a lazy Sunday.",
                "Your fingers move at geological speeds.",
                "At least you're consistent... consistently slow.",
                "Maybe try voice typing next time?",
                "The good news: You can only improve from here!"
            ],
            medium: [
                "You're the typing equivalent of vanilla ice cream.",
                "Not too hot, not too cold... just right.",
                "You type like a reliable Honda Civic.",
                "Perfectly adequate in every way.",
                "You're the human equivalent of 60 WPM."
            ],
            fast: [
                "Look at you, you speedy little typist!",
                "Your fingers dance across the keyboard!",
                "You type like a caffeinated secretary.",
                "The keyboard trembles at your approach!",
                "You've clearly spent too much time online."
            ],
            ultra: [
                "ARE YOU EVEN HUMAN? This is insane!",
                "Your fingers are a blur of typing fury!",
                "The keyboard can't keep up with you!",
                "You type faster than most people think!",
                "Warning: Typing at this speed may cause spontaneous combustion."
            ]
        };
        
        // DOM elements
        const textDisplay = document.getElementById('text-display');
        const inputField = document.getElementById('input-field');
        const startBtn = document.getElementById('start-btn');
        const wpmDisplay = document.getElementById('wpm');
        const accuracyDisplay = document.getElementById('accuracy');
        const timeDisplay = document.getElementById('time');
        const memeCaption = document.getElementById('meme-caption');
        const testContainer = document.getElementById('test-container');
        const resultsContainer = document.getElementById('results-container');
        const finalWpm = document.getElementById('final-wpm');
        const finalAccuracy = document.getElementById('final-accuracy');
        const memeLevel = document.getElementById('meme-level');
        const finalCaption = document.getElementById('final-caption');
        const restartBtn = document.getElementById('restart-btn');
        const shareBtn = document.getElementById('share-btn');
        
        // Test variables
        let currentText = '';
        let timer;
        let timeLeft = 60;
        let isTyping = false;
        let correctChars = 0;
        let incorrectChars = 0;
        let totalTyped = 0;
        let wpm = 0;
        let accuracy = 100;
        let speedInterval;
        let lastUpdateTime = 0;
        let correctKeystrokes = 0;
        let totalKeystrokes = 0;
        
        // Initialize the app
        function init() {
            // Preload all GIFs
            preloadGifs();
            
            // Set up event listeners
            startBtn.addEventListener('click', startTest);
            inputField.addEventListener('input', checkTyping);
            inputField.addEventListener('keydown', (e) => {
                if (e.key === 'Enter') {
                    e.preventDefault();
                }
            });
            restartBtn.addEventListener('click', resetTest);
            shareBtn.addEventListener('click', shareResults);
            
            // Display a random text sample
            displaySampleText();
        }
        
        // Preload all GIFs to avoid loading delays
        function preloadGifs() {
            Object.values(memeGifs).forEach(url => {
                const img = new Image();
                img.src = url;
            });
        }
        
        // Display a random sample text
        function displaySampleText() {
            currentText = sampleTexts[Math.floor(Math.random() * sampleTexts.length)];
            textDisplay.innerHTML = '';
            
            currentText.split('').forEach(char => {
                const span = document.createElement('span');
                span.textContent = char;
                textDisplay.appendChild(span);
            });
        }
        
        // Start the typing test
        function startTest() {
            if (isTyping) return;
            
            isTyping = true;
            timeLeft = 60;
            correctChars = 0;
            incorrectChars = 0;
            totalTyped = 0;
            wpm = 0;
            accuracy = 100;
            correctKeystrokes = 0;
            totalKeystrokes = 0;
            
            // Update UI
            startBtn.classList.add('hidden');
            inputField.value = '';
            inputField.focus();
            timeDisplay.textContent = timeLeft;
            
            // Start timer
            timer = setInterval(updateTimer, 1000);
            
            // Start WPM calculation
            lastUpdateTime = Date.now();
            speedInterval = setInterval(calculateSpeed, 2000);
            
            // Set initial meme
            updateMeme();
        }
        
        // Update the timer
        function updateTimer() {
            timeLeft--;
            timeDisplay.textContent = timeLeft;
            
            if (timeLeft <= 0) {
                finishTest();
            }
        }
        
        // Calculate typing speed (WPM)
        function calculateSpeed() {
            const now = Date.now();
            const timeElapsed = (now - lastUpdateTime) / 1000 / 60; // in minutes
            const charsTyped = totalTyped;
            
            if (timeElapsed > 0) {
                // WPM = (correct characters / 5) / minutes
                wpm = Math.round((correctChars / 5) / timeElapsed);
                accuracy = totalTyped > 0 ? Math.round((correctKeystrokes / totalKeystrokes) * 100) : 100;
                
                wpmDisplay.textContent = wpm;
                accuracyDisplay.textContent = accuracy;
                
                updateMeme();
            }
            
            lastUpdateTime = now;
            correctChars = 0;
            totalTyped = 0;
        }
        
        // Check typing against sample text
        function checkTyping() {
            if (!isTyping) return;
            
            const inputText = inputField.value;
            const currentChar = inputText[inputText.length - 1];
            const expectedChar = currentText[inputText.length - 1];
            
            totalTyped++;
            totalKeystrokes++;
            
            // Check if the character is correct
            if (currentChar === expectedChar) {
                correctChars++;
                correctKeystrokes++;
            } else {
                incorrectChars++;
            }
            
            // Update the text display with correct/incorrect styling
            updateTextDisplay(inputText);
        }
        
        // Update the text display with coloring
        function updateTextDisplay(inputText) {
            const textSpans = textDisplay.querySelectorAll('span');
            
            textSpans.forEach((span, index) => {
                // Reset classes
                span.className = '';
                
                // Already typed characters
                if (index < inputText.length) {
                    if (inputText[index] === currentText[index]) {
                        span.classList.add('correct');
                    } else {
                        span.classList.add('incorrect');
                    }
                }
                
                // Current character
                if (index === inputText.length) {
                    span.classList.add('current');
                }
            });
            
            // Scroll to keep current character in view
            const currentSpan = textDisplay.querySelector('.current');
            if (currentSpan) {
                currentSpan.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            }
        }
        
        // Update the meme based on current WPM
        function updateMeme() {
            let speedTier, randomCaption;
            
            if (wpm <= 20) {
                speedTier = 'slow';
                randomCaption = memeCaptions.slow[Math.floor(Math.random() * memeCaptions.slow.length)];
            } else if (wpm <= 50) {
                speedTier = 'medium';
                randomCaption = memeCaptions.medium[Math.floor(Math.random() * memeCaptions.medium.length)];
            } else if (wpm <= 80) {
                speedTier = 'fast';
                randomCaption = memeCaptions.fast[Math.floor(Math.random() * memeCaptions.fast.length)];
            } else {
                speedTier = 'ultra';
                randomCaption = memeCaptions.ultra[Math.floor(Math.random() * memeCaptions.ultra.length)];
            }
            
            // Update background
            document.body.style.backgroundImage = `url(${memeGifs[speedTier]})`;
            
            // Update caption
            memeCaption.textContent = randomCaption;
        }
        
        // Finish the test and show results
        function finishTest() {
            clearInterval(timer);
            clearInterval(speedInterval);
            isTyping = false;
            
            // Calculate final WPM and accuracy
            const finalWpmValue = Math.max(0, wpm);
            const finalAccuracyValue = Math.max(0, Math.min(100, accuracy));
            
            // Determine speed tier
            let speedTier, levelName, randomResultCaption;
            
            if (finalWpmValue <= 20) {
                speedTier = 'slow';
                levelName = 'Snail';
                randomResultCaption = resultCaptions.slow[Math.floor(Math.random() * resultCaptions.slow.length)];
            } else if (finalWpmValue <= 50) {
                speedTier = 'medium';
                levelName = 'Average Joe';
                randomResultCaption = resultCaptions.medium[Math.floor(Math.random() * resultCaptions.medium.length)];
            } else if (finalWpmValue <= 80) {
                speedTier = 'fast';
                levelName = 'Speed Demon';
                randomResultCaption = resultCaptions.fast[Math.floor(Math.random() * resultCaptions.fast.length)];
            } else {
                speedTier = 'ultra';
                levelName = 'GOD MODE';
                randomResultCaption = resultCaptions.ultra[Math.floor(Math.random() * resultCaptions.ultra.length)];
            }
            
            // Update final results
            finalWpm.textContent = finalWpmValue;
            finalAccuracy.textContent = finalAccuracyValue;
            memeLevel.textContent = levelName;
            finalCaption.textContent = randomResultCaption;
            
            // Set final meme
            document.body.style.backgroundImage = `url(${memeGifs[speedTier]})`;
            
            // Show results container
            testContainer.classList.add('hidden');
            resultsContainer.classList.remove('hidden');
        }
        
        // Reset the test
        function resetTest() {
            clearInterval(timer);
            clearInterval(speedInterval);
            
            isTyping = false;
            inputField.value = '';
            
            // Reset displays
            wpmDisplay.textContent = '0';
            accuracyDisplay.textContent = '100';
            timeDisplay.textContent = '60';
            
            // Show test container
            testContainer.classList.remove('hidden');
            resultsContainer.classList.add('hidden');
            
            // Reset start button
            startBtn.classList.remove('hidden');
            
            // Get new sample text
            displaySampleText();
            
            // Reset meme
            memeCaption.textContent = "Ready to get roasted by your typing speed?";
            document.body.style.backgroundImage = '';
        }
        
        // Share results
        function shareResults() {
            const finalWpmValue = finalWpm.textContent;
            const finalAccuracyValue = finalAccuracy.textContent;
            const levelName = memeLevel.textContent;
            const caption = finalCaption.textContent;
            
            const shareText = `I just scored ${finalWpmValue} WPM (${finalAccuracyValue}% accuracy) on the Meme Typing Speed Test! ${caption} Try it yourself!`;
            
            if (navigator.share) {
                navigator.share({
                    title: 'My Typing Speed Results',
                    text: shareText,
                    url: window.location.href
                }).catch(err => {
                    console.log('Error sharing:', err);
                    fallbackShare(shareText);
                });
            } else {
                fallbackShare(shareText);
            }
        }
        
        // Fallback for browsers that don't support Web Share API
        function fallbackShare(text) {
            // Copy to clipboard
            navigator.clipboard.writeText(text).then(() => {
                alert('Results copied to clipboard! Paste it anywhere to share.');
            }).catch(err => {
                console.log('Could not copy text: ', err);
                prompt('Copy this to share:', text);
            });
        }
        
        // Initialize the app when the DOM is loaded
        document.addEventListener('DOMContentLoaded', init);
    </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=GameDev102/meme-typing-speed-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>