Hugging Face's logo

Spaces:
Ketamin
/
key
Running

App Files Community
Ketamin commited on
Commit
d588d2d
·
verified ·
1 Parent(s): 10664b0

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +590 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Key
3
- emoji: 😻
4
- colorFrom: green
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: key
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,590 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SpeedType - Keyboard Typing Trainer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .key {
11
+ transition: all 0.1s ease;
12
+ position: relative;
13
+ }
14
+ .key.active {
15
+ transform: translateY(2px);
16
+ background-color: #3b82f6;
17
+ color: white;
18
+ }
19
+ .key.wrong {
20
+ background-color: #ef4444;
21
+ color: white;
22
+ }
23
+ .key.correct {
24
+ background-color: #10b981;
25
+ color: white;
26
+ }
27
+ .cursor {
28
+ position: absolute;
29
+ width: 2px;
30
+ height: 24px;
31
+ background-color: #3b82f6;
32
+ animation: blink 1s infinite;
33
+ }
34
+ @keyframes blink {
35
+ 0%, 100% { opacity: 1; }
36
+ 50% { opacity: 0; }
37
+ }
38
+ .text-display {
39
+ font-family: 'Courier New', monospace;
40
+ }
41
+ .character.correct {
42
+ color: #10b981;
43
+ }
44
+ .character.wrong {
45
+ color: #ef4444;
46
+ text-decoration: underline;
47
+ }
48
+ .character.current {
49
+ background-color: #e0f2fe;
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="bg-gray-50 min-h-screen">
54
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
55
+ <header class="text-center mb-8">
56
+ <h1 class="text-4xl font-bold text-blue-600 mb-2">SpeedType</h1>
57
+ <p class="text-gray-600">Improve your typing speed and accuracy</p>
58
+ </header>
59
+
60
+ <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
61
+ <div class="flex justify-between items-center mb-6">
62
+ <div class="flex space-x-4">
63
+ <div class="bg-blue-100 text-blue-800 px-4 py-2 rounded-lg">
64
+ <span class="text-sm font-medium">Time:</span>
65
+ <span id="timer" class="text-xl font-bold ml-1">60</span>s
66
+ </div>
67
+ <div class="bg-green-100 text-green-800 px-4 py-2 rounded-lg">
68
+ <span class="text-sm font-medium">WPM:</span>
69
+ <span id="wpm" class="text-xl font-bold ml-1">0</span>
70
+ </div>
71
+ <div class="bg-purple-100 text-purple-800 px-4 py-2 rounded-lg">
72
+ <span class="text-sm font-medium">Accuracy:</span>
73
+ <span id="accuracy" class="text-xl font-bold ml-1">100</span>%
74
+ </div>
75
+ </div>
76
+ <div>
77
+ <button id="new-text-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
78
+ <i class="fas fa-sync-alt mr-2"></i>New Text
79
+ </button>
80
+ </div>
81
+ </div>
82
+
83
+ <div class="mb-8">
84
+ <div class="flex justify-between text-sm text-gray-500 mb-2">
85
+ <span>Difficulty:</span>
86
+ <div class="flex space-x-2">
87
+ <button class="difficulty-btn px-3 py-1 rounded-full bg-blue-100 text-blue-800" data-level="easy">Easy</button>
88
+ <button class="difficulty-btn px-3 py-1 rounded-full" data-level="medium">Medium</button>
89
+ <button class="difficulty-btn px-3 py-1 rounded-full" data-level="hard">Hard</button>
90
+ </div>
91
+ </div>
92
+ <div class="flex justify-between text-sm text-gray-500 mb-2">
93
+ <span>Time:</span>
94
+ <div class="flex space-x-2">
95
+ <button class="time-btn px-3 py-1 rounded-full bg-blue-100 text-blue-800" data-time="30">30s</button>
96
+ <button class="time-btn px-3 py-1 rounded-full" data-time="60">60s</button>
97
+ <button class="time-btn px-3 py-1 rounded-full" data-time="120">120s</button>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <div id="text-display" class="text-display bg-gray-100 p-6 rounded-lg text-lg leading-relaxed mb-8 relative">
103
+ <!-- Text will be inserted here -->
104
+ </div>
105
+
106
+ <div class="mb-8">
107
+ <textarea id="input-field" class="w-full p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" rows="4" placeholder="Start typing here..."></textarea>
108
+ </div>
109
+
110
+ <div class="flex justify-center mb-8">
111
+ <button id="start-btn" class="bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-lg text-lg font-medium transition">
112
+ <i class="fas fa-play mr-2"></i>Start Typing
113
+ </button>
114
+ </div>
115
+
116
+ <div class="grid grid-cols-12 gap-2 mb-8">
117
+ <!-- First row -->
118
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">`</div>
119
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">1</div>
120
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">2</div>
121
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">3</div>
122
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">4</div>
123
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">5</div>
124
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">6</div>
125
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">7</div>
126
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">8</div>
127
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">9</div>
128
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">0</div>
129
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">-</div>
130
+
131
+ <!-- Second row -->
132
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">Tab</div>
133
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">Q</div>
134
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">W</div>
135
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">E</div>
136
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">R</div>
137
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">T</div>
138
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">Y</div>
139
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">U</div>
140
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">I</div>
141
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">O</div>
142
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">P</div>
143
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">[</div>
144
+
145
+ <!-- Third row -->
146
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">Caps</div>
147
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">A</div>
148
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">S</div>
149
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">D</div>
150
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">F</div>
151
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">G</div>
152
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">H</div>
153
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">J</div>
154
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">K</div>
155
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">L</div>
156
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">;</div>
157
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">'</div>
158
+
159
+ <!-- Fourth row -->
160
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">Shift</div>
161
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">Z</div>
162
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">X</div>
163
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">C</div>
164
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">V</div>
165
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">B</div>
166
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">N</div>
167
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">M</div>
168
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">,</div>
169
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">.</div>
170
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">/</div>
171
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">Shift</div>
172
+
173
+ <!-- Fifth row -->
174
+ <div class="key col-span-2 bg-gray-200 p-3 rounded text-center font-medium">Ctrl</div>
175
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">Win</div>
176
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">Alt</div>
177
+ <div class="key col-span-4 bg-gray-200 p-3 rounded text-center font-medium">Space</div>
178
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">Alt</div>
179
+ <div class="key col-span-1 bg-gray-200 p-3 rounded text-center font-medium">Win</div>
180
+ <div class="key col-span-2 bg-gray-200 p-3 rounded text-center font-medium">Ctrl</div>
181
+ </div>
182
+ </div>
183
+
184
+ <div class="bg-white rounded-xl shadow-lg p-6">
185
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Your Progress</h2>
186
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
187
+ <div class="bg-blue-50 p-4 rounded-lg">
188
+ <div class="flex items-center">
189
+ <div class="bg-blue-100 p-3 rounded-full mr-3">
190
+ <i class="fas fa-tachometer-alt text-blue-600"></i>
191
+ </div>
192
+ <div>
193
+ <p class="text-sm text-gray-500">Average WPM</p>
194
+ <p class="text-2xl font-bold">42</p>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ <div class="bg-green-50 p-4 rounded-lg">
199
+ <div class="flex items-center">
200
+ <div class="bg-green-100 p-3 rounded-full mr-3">
201
+ <i class="fas fa-bullseye text-green-600"></i>
202
+ </div>
203
+ <div>
204
+ <p class="text-sm text-gray-500">Best Accuracy</p>
205
+ <p class="text-2xl font-bold">98%</p>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ <div class="bg-purple-50 p-4 rounded-lg">
210
+ <div class="flex items-center">
211
+ <div class="bg-purple-100 p-3 rounded-full mr-3">
212
+ <i class="fas fa-clock text-purple-600"></i>
213
+ </div>
214
+ <div>
215
+ <p class="text-sm text-gray-500">Time Practiced</p>
216
+ <p class="text-2xl font-bold">2h 15m</p>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <script>
225
+ // Sample texts for different difficulty levels
226
+ const texts = {
227
+ easy: [
228
+ "The quick brown fox jumps over the lazy dog. This sentence contains all the letters in the English alphabet.",
229
+ "Learning to type quickly and accurately is an essential skill in today's digital world. Practice makes perfect.",
230
+ "Typing is the process of writing or inputting text by pressing keys on a typewriter, computer keyboard, or touchscreen."
231
+ ],
232
+ medium: [
233
+ "The ability to type without looking at the keyboard is called touch typing. This skill can significantly improve your productivity.",
234
+ "According to research, the average typing speed is around 40 words per minute. Professional typists can reach speeds of 65 to 75 WPM.",
235
+ "The QWERTY keyboard layout was designed in the 1870s for mechanical typewriters. Despite newer layouts, it remains the most popular."
236
+ ],
237
+ hard: [
238
+ "The Dvorak Simplified Keyboard is an alternative keyboard layout patented in 1936 by August Dvorak. Studies have shown mixed results regarding its superiority over QWERTY.",
239
+ "Stenotype machines allow trained users to type at speeds exceeding 300 words per minute by pressing multiple keys simultaneously to represent syllables or words.",
240
+ "The world record for typing speed on a QWERTY keyboard is 216 words per minute, achieved by Barbara Blackburn in 2005 using the Dvorak Simplified Keyboard layout."
241
+ ]
242
+ };
243
+
244
+ // DOM elements
245
+ const textDisplay = document.getElementById('text-display');
246
+ const inputField = document.getElementById('input-field');
247
+ const startBtn = document.getElementById('start-btn');
248
+ const newTextBtn = document.getElementById('new-text-btn');
249
+ const timerElement = document.getElementById('timer');
250
+ const wpmElement = document.getElementById('wpm');
251
+ const accuracyElement = document.getElementById('accuracy');
252
+ const difficultyBtns = document.querySelectorAll('.difficulty-btn');
253
+ const timeBtns = document.querySelectorAll('.time-btn');
254
+ const keys = document.querySelectorAll('.key');
255
+
256
+ // Game state
257
+ let currentText = '';
258
+ let currentIndex = 0;
259
+ let timer;
260
+ let timeLeft = 60;
261
+ let isPlaying = false;
262
+ let correctChars = 0;
263
+ let totalChars = 0;
264
+ let startTime;
265
+ let currentDifficulty = 'easy';
266
+ let currentTimeSetting = 60;
267
+
268
+ // Initialize the game
269
+ function initGame() {
270
+ // Set initial difficulty and time
271
+ setDifficulty('easy');
272
+ setTime(60);
273
+
274
+ // Load initial text
275
+ loadNewText();
276
+
277
+ // Set up event listeners
278
+ setupEventListeners();
279
+ }
280
+
281
+ // Set up event listeners
282
+ function setupEventListeners() {
283
+ // Start button
284
+ startBtn.addEventListener('click', () => {
285
+ if (!isPlaying) {
286
+ startGame();
287
+ }
288
+ });
289
+
290
+ // New text button
291
+ newTextBtn.addEventListener('click', () => {
292
+ loadNewText();
293
+ if (isPlaying) {
294
+ resetGame();
295
+ startGame();
296
+ } else {
297
+ resetGame();
298
+ }
299
+ });
300
+
301
+ // Input field
302
+ inputField.addEventListener('input', handleInput);
303
+ inputField.addEventListener('keydown', handleKeyDown);
304
+
305
+ // Difficulty buttons
306
+ difficultyBtns.forEach(btn => {
307
+ btn.addEventListener('click', () => {
308
+ setDifficulty(btn.dataset.level);
309
+ loadNewText();
310
+ if (isPlaying) {
311
+ resetGame();
312
+ startGame();
313
+ }
314
+ });
315
+ });
316
+
317
+ // Time buttons
318
+ timeBtns.forEach(btn => {
319
+ btn.addEventListener('click', () => {
320
+ setTime(parseInt(btn.dataset.time));
321
+ if (isPlaying) {
322
+ resetGame();
323
+ startGame();
324
+ }
325
+ });
326
+ });
327
+
328
+ // Keyboard visualization
329
+ document.addEventListener('keydown', (e) => {
330
+ const key = e.key.toLowerCase();
331
+ keys.forEach(k => {
332
+ const keyText = k.textContent.toLowerCase();
333
+ if (keyText === key ||
334
+ (key === ' ' && keyText === 'space') ||
335
+ (key === 'tab' && keyText === 'tab') ||
336
+ (key === 'capslock' && keyText === 'caps') ||
337
+ (key === 'shift' && keyText === 'shift') ||
338
+ (key === 'control' && keyText === 'ctrl') ||
339
+ (key === 'alt' && keyText === 'alt') ||
340
+ (key === 'meta' && keyText === 'win')) {
341
+ k.classList.add('active');
342
+ }
343
+ });
344
+ });
345
+
346
+ document.addEventListener('keyup', (e) => {
347
+ const key = e.key.toLowerCase();
348
+ keys.forEach(k => {
349
+ const keyText = k.textContent.toLowerCase();
350
+ if (keyText === key ||
351
+ (key === ' ' && keyText === 'space') ||
352
+ (key === 'tab' && keyText === 'tab') ||
353
+ (key === 'capslock' && keyText === 'caps') ||
354
+ (key === 'shift' && keyText === 'shift') ||
355
+ (key === 'control' && keyText === 'ctrl') ||
356
+ (key === 'alt' && keyText === 'alt') ||
357
+ (key === 'meta' && keyText === 'win')) {
358
+ k.classList.remove('active');
359
+ }
360
+ });
361
+ });
362
+ }
363
+
364
+ // Set difficulty level
365
+ function setDifficulty(level) {
366
+ currentDifficulty = level;
367
+
368
+ // Update UI
369
+ difficultyBtns.forEach(btn => {
370
+ if (btn.dataset.level === level) {
371
+ btn.classList.add('bg-blue-100', 'text-blue-800');
372
+ } else {
373
+ btn.classList.remove('bg-blue-100', 'text-blue-800');
374
+ }
375
+ });
376
+ }
377
+
378
+ // Set time setting
379
+ function setTime(time) {
380
+ currentTimeSetting = time;
381
+ timeLeft = time;
382
+ timerElement.textContent = time;
383
+
384
+ // Update UI
385
+ timeBtns.forEach(btn => {
386
+ if (parseInt(btn.dataset.time) === time) {
387
+ btn.classList.add('bg-blue-100', 'text-blue-800');
388
+ } else {
389
+ btn.classList.remove('bg-blue-100', 'text-blue-800');
390
+ }
391
+ });
392
+ }
393
+
394
+ // Load new text based on difficulty
395
+ function loadNewText() {
396
+ const textArray = texts[currentDifficulty];
397
+ currentText = textArray[Math.floor(Math.random() * textArray.length)];
398
+ renderText();
399
+ }
400
+
401
+ // Render the text to type
402
+ function renderText() {
403
+ textDisplay.innerHTML = '';
404
+
405
+ for (let i = 0; i < currentText.length; i++) {
406
+ const span = document.createElement('span');
407
+ span.className = 'character';
408
+ span.textContent = currentText[i];
409
+ span.id = `char-${i}`;
410
+ textDisplay.appendChild(span);
411
+ }
412
+
413
+ // Add cursor to first character
414
+ const cursor = document.createElement('div');
415
+ cursor.className = 'cursor';
416
+ cursor.id = 'cursor';
417
+ document.getElementById('char-0').appendChild(cursor);
418
+ }
419
+
420
+ // Start the game
421
+ function startGame() {
422
+ if (isPlaying) return;
423
+
424
+ isPlaying = true;
425
+ currentIndex = 0;
426
+ correctChars = 0;
427
+ totalChars = 0;
428
+ startTime = new Date().getTime();
429
+
430
+ // Update UI
431
+ startBtn.innerHTML = '<i class="fas fa-stop mr-2"></i>Stop';
432
+ startBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
433
+ startBtn.classList.add('bg-red-600', 'hover:bg-red-700');
434
+ inputField.disabled = false;
435
+ inputField.value = '';
436
+ inputField.focus();
437
+
438
+ // Start timer
439
+ timer = setInterval(updateTimer, 1000);
440
+
441
+ // Highlight first character
442
+ updateCurrentCharacter();
443
+ }
444
+
445
+ // Update timer
446
+ function updateTimer() {
447
+ timeLeft--;
448
+ timerElement.textContent = timeLeft;
449
+
450
+ if (timeLeft <= 0) {
451
+ endGame();
452
+ }
453
+ }
454
+
455
+ // Handle input
456
+ function handleInput(e) {
457
+ const inputText = e.target.value;
458
+ const currentChar = currentText[currentIndex];
459
+
460
+ // Check if input matches current character
461
+ if (inputText[inputText.length - 1] === currentChar) {
462
+ // Correct character
463
+ document.getElementById(`char-${currentIndex}`).classList.add('correct');
464
+ document.getElementById(`char-${currentIndex}`).classList.remove('wrong', 'current');
465
+ correctChars++;
466
+ } else {
467
+ // Wrong character
468
+ document.getElementById(`char-${currentIndex}`).classList.add('wrong');
469
+ document.getElementById(`char-${currentIndex}`).classList.remove('correct', 'current');
470
+ }
471
+
472
+ totalChars++;
473
+ currentIndex++;
474
+
475
+ // Clear input
476
+ e.target.value = '';
477
+
478
+ // Update stats
479
+ updateStats();
480
+
481
+ // Move to next character or end game if finished
482
+ if (currentIndex >= currentText.length) {
483
+ loadNewText();
484
+ currentIndex = 0;
485
+ }
486
+
487
+ updateCurrentCharacter();
488
+ }
489
+
490
+ // Handle key down (for backspace)
491
+ function handleKeyDown(e) {
492
+ if (e.key === 'Backspace' && currentIndex > 0) {
493
+ currentIndex--;
494
+ document.getElementById(`char-${currentIndex}`).classList.remove('correct', 'wrong');
495
+ updateCurrentCharacter();
496
+ }
497
+ }
498
+
499
+ // Update current character highlight
500
+ function updateCurrentCharacter() {
501
+ // Remove current class from all characters
502
+ document.querySelectorAll('.character').forEach(char => {
503
+ char.classList.remove('current');
504
+ });
505
+
506
+ // Add current class to current character
507
+ if (currentIndex < currentText.length) {
508
+ document.getElementById(`char-${currentIndex}`).classList.add('current');
509
+
510
+ // Move cursor
511
+ const cursor = document.getElementById('cursor');
512
+ if (cursor) cursor.remove();
513
+
514
+ const newCursor = document.createElement('div');
515
+ newCursor.className = 'cursor';
516
+ newCursor.id = 'cursor';
517
+ document.getElementById(`char-${currentIndex}`).appendChild(newCursor);
518
+ }
519
+ }
520
+
521
+ // Update stats (WPM and accuracy)
522
+ function updateStats() {
523
+ // Calculate WPM (5 characters = 1 word)
524
+ const timeElapsed = (new Date().getTime() - startTime) / 60000; // in minutes
525
+ const wordsTyped = correctChars / 5;
526
+ const wpm = Math.round(wordsTyped / timeElapsed) || 0;
527
+ wpmElement.textContent = wpm;
528
+
529
+ // Calculate accuracy
530
+ const accuracy = totalChars > 0 ? Math.round((correctChars / totalChars) * 100) : 100;
531
+ accuracyElement.textContent = accuracy;
532
+ }
533
+
534
+ // End the game
535
+ function endGame() {
536
+ isPlaying = false;
537
+ clearInterval(timer);
538
+
539
+ // Update UI
540
+ startBtn.innerHTML = '<i class="fas fa-play mr-2"></i>Start Typing';
541
+ startBtn.classList.remove('bg-red-600', 'hover:bg-red-700');
542
+ startBtn.classList.add('bg-green-600', 'hover:bg-green-700');
543
+ inputField.disabled = true;
544
+
545
+ // Show results
546
+ alert(`Game over!\nYour typing speed: ${wpmElement.textContent} WPM\nAccuracy: ${accuracyElement.textContent}%`);
547
+ }
548
+
549
+ // Reset the game
550
+ function resetGame() {
551
+ isPlaying = false;
552
+ clearInterval(timer);
553
+ timeLeft = currentTimeSetting;
554
+ timerElement.textContent = timeLeft;
555
+ wpmElement.textContent = '0';
556
+ accuracyElement.textContent = '100';
557
+ currentIndex = 0;
558
+ correctChars = 0;
559
+ totalChars = 0;
560
+
561
+ // Update UI
562
+ startBtn.innerHTML = '<i class="fas fa-play mr-2"></i>Start Typing';
563
+ startBtn.classList.remove('bg-red-600', 'hover:bg-red-700');
564
+ startBtn.classList.add('bg-green-600', 'hover:bg-green-700');
565
+ inputField.disabled = false;
566
+ inputField.value = '';
567
+
568
+ // Reset text display
569
+ document.querySelectorAll('.character').forEach(char => {
570
+ char.classList.remove('correct', 'wrong', 'current');
571
+ });
572
+
573
+ // Reset cursor
574
+ const cursor = document.getElementById('cursor');
575
+ if (cursor) cursor.remove();
576
+
577
+ const newCursor = document.createElement('div');
578
+ newCursor.className = 'cursor';
579
+ newCursor.id = 'cursor';
580
+ if (document.getElementById('char-0')) {
581
+ document.getElementById('char-0').appendChild(newCursor);
582
+ document.getElementById('char-0').classList.add('current');
583
+ }
584
+ }
585
+
586
+ // Initialize the game when page loads
587
+ window.addEventListener('load', initGame);
588
+ </script>
589
+ <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=Ketamin/key" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
590
+ </html>