Hugging Face's logo

Spaces:
ItsJayKee
/
codeflow-typeracer
Running

App Files Community
ItsJayKee commited on
Commit
aa478aa
·
verified ·
1 Parent(s): 2ff6be1

make the snippet form into like this example

Browse files

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

with spaces so it would look organized

Files changed (1) hide show
  1. index.html +25 -10
index.html CHANGED
@@ -1,24 +1,28 @@
 
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>CodeFlow Typing Challenge</title>
 
7
  <link rel="stylesheet" href="style.css">
 
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
  <script src="https://unpkg.com/feather-icons"></script>
11
  </head>
 
12
  <body class="bg-gray-900 text-gray-100 min-h-screen">
13
  <custom-header></custom-header>
14
-
15
  <main class="container mx-auto px-4 py-8 max-w-4xl">
 
16
  <div class="text-center mb-12">
17
  <h1 class="text-4xl font-bold mb-2 text-indigo-400">CodeFlow Typing Challenge</h1>
18
  <p class="text-lg text-gray-400">Test your coding language typing speed & accuracy</p>
19
  </div>
20
-
21
  <div class="bg-gray-800 rounded-xl p-6 shadow-lg mb-8">
 
22
  <div class="flex justify-between items-center mb-6">
23
  <div class="flex space-x-4">
24
  <div class="bg-gray-700 px-4 py-2 rounded-lg">
@@ -29,7 +33,8 @@
29
  <option value="css">CSS</option>
30
  <option value="javascript">JavaScript</option>
31
  </select>
32
- </div>
 
33
  <div class="bg-gray-700 px-4 py-2 rounded-lg">
34
  <span class="text-indigo-300">Time:</span>
35
  <select id="time-select" class="ml-2 bg-gray-800 text-gray-100 border-none focus:ring-2 focus:ring-indigo-500 rounded">
@@ -40,36 +45,44 @@
40
  </select>
41
  <span id="timer" class="ml-2">60s</span>
42
  </div>
43
- <div class="bg-gray-700 px-4 py-2 rounded-lg">
 
44
  <span class="text-indigo-300">Speed:</span>
45
  <span id="speed" class="ml-2">0 WPM</span>
46
  </div>
47
  </div>
 
48
  <button id="reset-btn" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg transition">
49
  <i data-feather="refresh-cw" class="inline mr-2"></i>Reset
50
  </button>
51
  </div>
52
-
53
  <div id="typing-area" class="bg-gray-900 rounded-lg p-6 mb-6 h-48 overflow-y-auto">
54
  <div id="code-display" class="font-mono text-lg leading-relaxed"></div>
55
  </div>
56
 
57
- <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>
 
 
 
 
 
58
  </div>
59
-
60
  <div id="results" class="hidden bg-gray-800 rounded-xl p-6 shadow-lg">
61
  <h2 class="text-2xl font-bold mb-6 text-center text-indigo-400">Your Results</h2>
 
62
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
63
  <div class="bg-gray-900 p-4 rounded-lg text-center">
64
  <div class="text-4xl font-bold text-indigo-400 mb-2" id="final-wpm">0</div>
65
  <div class="text-gray-400">Words Per Minute</div>
66
  </div>
 
67
  <div class="bg-gray-900 p-4 rounded-lg text-center">
68
  <div class="text-4xl font-bold text-indigo-400 mb-2" id="final-accuracy">0%</div>
69
  <div class="text-gray-400">Accuracy</div>
70
  </div>
71
  </div>
72
- <div class="mt-8 text-center">
 
73
  <button id="try-again-btn" class="bg-indigo-600 hover:bg-indigo-700 px-6 py-3 rounded-lg text-lg transition">
74
  <i data-feather="repeat" class="inline mr-2"></i>Try Again
75
  </button>
@@ -82,9 +95,11 @@
82
  <script src="components/header.js"></script>
83
  <script src="components/footer.js"></script>
84
  <script src="script.js"></script>
 
85
  <script>
86
  feather.replace();
87
  </script>
88
- <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 
89
  </body>
90
- </html>
 
1
+
2
  <!DOCTYPE html>
3
  <html lang="en">
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>CodeFlow Typing Challenge</title>
8
+
9
  <link rel="stylesheet" href="style.css">
10
+
11
  <script src="https://cdn.tailwindcss.com"></script>
12
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
13
  <script src="https://unpkg.com/feather-icons"></script>
14
  </head>
15
+
16
  <body class="bg-gray-900 text-gray-100 min-h-screen">
17
  <custom-header></custom-header>
 
18
  <main class="container mx-auto px-4 py-8 max-w-4xl">
19
+
20
  <div class="text-center mb-12">
21
  <h1 class="text-4xl font-bold mb-2 text-indigo-400">CodeFlow Typing Challenge</h1>
22
  <p class="text-lg text-gray-400">Test your coding language typing speed & accuracy</p>
23
  </div>
 
24
  <div class="bg-gray-800 rounded-xl p-6 shadow-lg mb-8">
25
+
26
  <div class="flex justify-between items-center mb-6">
27
  <div class="flex space-x-4">
28
  <div class="bg-gray-700 px-4 py-2 rounded-lg">
 
33
  <option value="css">CSS</option>
34
  <option value="javascript">JavaScript</option>
35
  </select>
36
+ </div>
37
+
38
  <div class="bg-gray-700 px-4 py-2 rounded-lg">
39
  <span class="text-indigo-300">Time:</span>
40
  <select id="time-select" class="ml-2 bg-gray-800 text-gray-100 border-none focus:ring-2 focus:ring-indigo-500 rounded">
 
45
  </select>
46
  <span id="timer" class="ml-2">60s</span>
47
  </div>
48
+
49
+ <div class="bg-gray-700 px-4 py-2 rounded-lg">
50
  <span class="text-indigo-300">Speed:</span>
51
  <span id="speed" class="ml-2">0 WPM</span>
52
  </div>
53
  </div>
54
+
55
  <button id="reset-btn" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg transition">
56
  <i data-feather="refresh-cw" class="inline mr-2"></i>Reset
57
  </button>
58
  </div>
 
59
  <div id="typing-area" class="bg-gray-900 rounded-lg p-6 mb-6 h-48 overflow-y-auto">
60
  <div id="code-display" class="font-mono text-lg leading-relaxed"></div>
61
  </div>
62
 
63
+ <textarea
64
+ id="input-field"
65
+ 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"
66
+ rows="6"
67
+ placeholder="Start typing here..."
68
+ ></textarea>
69
  </div>
 
70
  <div id="results" class="hidden bg-gray-800 rounded-xl p-6 shadow-lg">
71
  <h2 class="text-2xl font-bold mb-6 text-center text-indigo-400">Your Results</h2>
72
+
73
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
74
  <div class="bg-gray-900 p-4 rounded-lg text-center">
75
  <div class="text-4xl font-bold text-indigo-400 mb-2" id="final-wpm">0</div>
76
  <div class="text-gray-400">Words Per Minute</div>
77
  </div>
78
+
79
  <div class="bg-gray-900 p-4 rounded-lg text-center">
80
  <div class="text-4xl font-bold text-indigo-400 mb-2" id="final-accuracy">0%</div>
81
  <div class="text-gray-400">Accuracy</div>
82
  </div>
83
  </div>
84
+
85
+ <div class="mt-8 text-center">
86
  <button id="try-again-btn" class="bg-indigo-600 hover:bg-indigo-700 px-6 py-3 rounded-lg text-lg transition">
87
  <i data-feather="repeat" class="inline mr-2"></i>Try Again
88
  </button>
 
95
  <script src="components/header.js"></script>
96
  <script src="components/footer.js"></script>
97
  <script src="script.js"></script>
98
+
99
  <script>
100
  feather.replace();
101
  </script>
102
+
103
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
104
  </body>
105
+ </html>