Spaces:
Running
Running
File size: 4,862 Bytes
aa478aa 993c9ec aa478aa 993c9ec aa478aa 993c9ec aa478aa 993c9ec aa478aa 993c9ec 79c9f2f 927550e af019c1 aa478aa 993c9ec c4ac914 993c9ec aa478aa 993c9ec 927550e 993c9ec 79c9f2f 993c9ec aa478aa 993c9ec aa478aa 927550e 993c9ec aa478aa 993c9ec 927550e 993c9ec 927550e 993c9ec 927550e 993c9ec 608d9b6 dd0f5c6 993c9ec bdf6428 993c9ec 3530adb 993c9ec aa478aa | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeFlow Typing Challenge</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
<custom-header></custom-header>
<main class="container mx-auto px-4 py-8 max-w-4xl">
<div class="text-center mb-12">
<h1 class="text-4xl font-bold mb-2 text-indigo-400">CodeFlow Typing Challenge</h1>
<p class="text-lg text-gray-400">Test your coding language typing speed & accuracy</p>
</div>
<div class="bg-gray-800 rounded-xl p-6 shadow-lg mb-8">
<div class="flex justify-between items-center mb-6">
<div class="flex space-x-4">
<div class="bg-gray-700 px-4 py-2 rounded-lg">
<span class="text-indigo-300">Language:</span>
<select id="language-select" class="ml-2 bg-gray-800 text-gray-100 border-none focus:ring-2 focus:ring-indigo-500 rounded">
<option value="all">All Languages</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
</select>
</div>
<div class="bg-gray-700 px-4 py-2 rounded-lg">
<span class="text-indigo-300">Time:</span>
<select id="time-select" class="ml-2 bg-gray-800 text-gray-100 border-none focus:ring-2 focus:ring-indigo-500 rounded">
<option value="60">1 minute</option>
<option value="120">2 minutes</option>
<option value="300">5 minutes</option>
<option value="600">10 minutes</option>
</select>
<span id="timer" class="ml-2">60s</span>
</div>
<div class="bg-gray-700 px-4 py-2 rounded-lg">
<span class="text-indigo-300">Speed:</span>
<span id="speed" class="ml-2">0 WPM</span>
</div>
</div>
</div>
<div id="typing-area" class="bg-gray-900 rounded-lg p-6 mb-6 h-48 overflow-y-auto">
<div id="code-display" class="font-mono text-lg leading-relaxed"></div>
</div>
<textarea
id="input-field"
class="w-full bg-gray-900 border-2 border-gray-700 rounded-lg p-4 font-mono text-lg focus:border-indigo-500 focus:outline-none"
rows="6"
placeholder="Start typing here..."
></textarea>
</div>
<div id="results" class="hidden bg-gray-800 rounded-xl p-6 shadow-lg">
<h2 class="text-2xl font-bold mb-6 text-center text-indigo-400">Your Results</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-gray-900 p-4 rounded-lg text-center">
<div class="text-4xl font-bold text-indigo-400 mb-2" id="final-wpm">0</div>
<div class="text-gray-400">Words Per Minute</div>
</div>
<div class="bg-gray-900 p-4 rounded-lg text-center">
<div class="text-4xl font-bold text-indigo-400 mb-2" id="final-accuracy">0%</div>
<div class="text-gray-400">Accuracy</div>
</div>
</div>
<div class="mt-8 text-center">
<button id="try-again-btn" class="bg-indigo-600 hover:bg-indigo-700 px-6 py-3 rounded-lg text-lg transition">
<i data-feather="repeat" class="inline mr-2"></i>Try Again
</button>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script src="components/header.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
// Check if user is logged in
document.addEventListener('DOMContentLoaded', () => {
const userInfo = localStorage.getItem('userInfo');
if (!userInfo) {
window.location.href = '/login.html';
}
});
</script>
<!-- Feather Icons -->
<script>
feather.replace();
</script>
</body>
</html>
|