Spaces:

GameDev102
/

meme-typing-speed-test

Running

App Files Files Community

GameDev102 commited on May 6

Commit

6c131e3

verified ·

1 Parent(s): 55f1ef5

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +571 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Meme Typing Speed Test
-emoji: 💻
-colorFrom: indigo
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: meme-typing-speed-test
+emoji: 🐳
+colorFrom: yellow
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,571 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ Build a web-based typing speed test app that reacts to the user's typing speed in real-time by changing the background to a funny meme GIF. The app should track typing speed (WPM), accuracy, and adjust the background dynamically with a fade transition effect. Core Features: A real-time typing speed tracker (WPM), updated every 2 seconds. Threshold levels for speed: 0–20 WPM → Show slow meme GIF (e.g., a crawling snail or Patrick walking) 21–50 WPM → Show medium-speed meme (e.g., awkward run or someone “trying”) 51–80 WPM → Show fast meme (e.g., Naruto run, Sonic) 80+ WPM → Show ultra-fast meme (e.g., Giga Chad flying or Flash blur) Smooth CSS fade transitions between background GIFs. Show a live caption on screen that changes with typing speed, e.g.: “Your grandma types faster than this.” “WOOOSH! You’re going places.” Additional Features: Calculate final score: WPM, Accuracy, and a meme-style summary at the end. Optional: Let users download or share a GIF screenshot of their typing session. Responsive and mobile-friendly layout. Keep the UI clean and funny, and preload all GIFs to avoid lag during speed changes. Prioritize meme-worthy visual feedback and create an experience that’s fun to share on social media.