forked from ChristofferHolmesland/codetyper
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (136 loc) · 2.82 KB
/
index.html
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html>
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8" />
<title>codetyper</title>
<link rel="stylesheet" href="static/styles/style.css" />
</head>
<style></style>
<body>
<header>
<div class="theme-switch-wrapper">
<label
class="theme-switch"
for="light-checkbox"
>
<input
type="checkbox"
id="light-checkbox"
/>
<div class="slider round"></div>
</label>
<p>Light Mode</p>
</div>
<div>
<input
id="font"
placeholder="Choose Custom Font"
/>
</div>
</header>
<div id="selectDiv">
<div class="lang-buttons">
<p>Choose a language to start with</p>
<br />
<button class="btn githubbutton" id="java">
Java
</button>
<button class="btn githubbutton" id="c">
C
</button>
<button class="btn githubbutton" id="cpp">
C++
</button>
<button class="btn githubbutton" id="csharp">
C#
</button>
<button class="btn githubbutton" id="py">
Python
</button>
<button class="btn githubbutton" id="go">
Go
</button>
<button class="btn githubbutton" id="kotlin">
Kotlin
</button>
<button class="btn githubbutton" id="js">
JavaScript
</button>
</div>
<br />
<div class="code-chooser">
<input
id="githubinput"
type="text"
placeholder="Or enter Github link"
/>
<button id="githubbutton">-></button>
</div>
<br />
<br />
<div id="limits">
<label
>I want to limit the number of lines to
</label>
<input
id="line_limit"
min="1"
placeholder="unlimited"
class="number-box"
/>
<label>lines.</label>
<br />
<label>I want to complete the test in</label>
<input
id="time_limit"
min="1"
placeholder="unlimited"
class="number-box"
/>
<label>seconds.</label>
</div>
</div>
<div id="writingDiv" class="displaynone">
<div id="timer">00:00</div>
<div tabindex="0" id="words"></div>
</div>
<div id="resultDiv" class="displaynone">
<div class="results-left">
CPM:
<span id="cpmDiv"> </span>
<br />
<br />
WPM:
<span id="wpmDiv"></span>
<br />
<br />
Acc:
<span id="accuracy"> </span>
<br />
<br />
Difficulty:
<span id="difficulty"></span>
<br />
<br />
<button
id="restartbut"
onclick="document.location.reload(true)"
>
Restart
</button>
</div>
<span id="errors"></span> <br />
<div id="error-container" class="results-center">
<ul id="errored-characters"></ul>
</div>
<br />
</div>
<script src="static/scripts/result-screen.js"></script>
<script src="static/scripts/index.js"></script>
</body>
</html>