-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (124 loc) · 5.77 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
<head>
<title>KeyTest</title>
<style> @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap'); </style>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="icon" href="KT.png">
</head>
<body>
<div id="header">
<p id="title">KeyTest</p>
<p id="github" onclick="location.href='https://github.com/Trzynastek'">Github</p>
</div>
<ul class="background">
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>
<div class="test">
<div class="textarea">
<div id="stats">
<p class="stat" id="wpm"></p>
<p class="stat" id="time"></p>
<p class="stat" id="errors"></p>
<p class="stat" id="accuracy"></p>
</div>
<input type="text" id="input"></input>
<div id="outputbox">
<p id="main"></p>
<p class="dummy">
<span id="output"></span>
<span class="symbol visible generated" id="generated"></span>
</p>
<span id="dummy" class="dummy"></span>
</div>
</div>
<div class="keyboard">
<div class="row">
<p class="key" id="`">~</p>
<p class="key" id="1">1</p>
<p class="key" id="2">2</p>
<p class="key" id="3">3</p>
<p class="key" id="4">4</p>
<p class="key" id="5">5</p>
<p class="key" id="6">6</p>
<p class="key" id="7">7</p>
<p class="key" id="8">8</p>
<p class="key" id="9">9</p>
<p class="key" id="0">0</p>
<p class="key" id="-">-</p>
<p class="key" id="=">=</p>
<p class="key" id="backspace" style="width:100px !important;">backspace</p>
<p class="key" id="pageup">pgup</p>
</div>
<div class="row">
<p class="key" id="tab" style="width:79px !important;">tab</p>
<p class="key" id="q">q</p>
<p class="key" id="w">w</p>
<p class="key" id="e">e</p>
<p class="key" id="r">r</p>
<p class="key" id="t">t</p>
<p class="key" id="y">y</p>
<p class="key" id="u">u</p>
<p class="key" id="i">i</p>
<p class="key" id="o">o</p>
<p class="key" id="p">p</p>
<p class="key" id="[">[</p>
<p class="key" id="]">]</p>
<p class="key" id="\" style="width:67px !important;">\</p>
<p class="key" id="pagedown">pgdn</p>
</div>
<div class="row">
<p class="key" id="capslock" style="width:90px !important;">caps</p>
<p class="key" id="a">a</p>
<p class="key" id="s">s</p>
<p class="key" id="d">d</p>
<p class="key" id="f">f</p>
<p class="key" id="g">g</p>
<p class="key" id="h">h</p>
<p class="key" id="j">j</p>
<p class="key" id="k">k</p>
<p class="key" id="l">l</p>
<p class="key" id=";">;</p>
<p class="key" id="'">'</p>
<p class="key" id="enter" style="width:110px !important;">enter</p>
<p class="key" id="home">home</p>
</div>
<div class="row">
<p class="key" id="lshift" style="width:107px !important;">shift</p>
<p class="key" id="z">z</p>
<p class="key" id="x">x</p>
<p class="key" id="c">c</p>
<p class="key" id="v">v</p>
<p class="key" id="b">b</p>
<p class="key" id="n">n</p>
<p class="key" id="m">m</p>
<p class="key" id=",">,</p>
<p class="key" id=".">.</p>
<p class="key" id="/">/</p>
<p class="key" id="rshift" style="width:93px !important;">shift</p>
<p class="key" id="arrowup">↑</p>
<p class="key" id="end">end</p>
</div>
<div class="row">
<p class="key" id="lcontrol" style="width:67px !important;">ctrl</p>
<p class="key" id="meta" style="width:67px !important;">win</p>
<p class="key" id="lalt" style="width:67px !important;">alt</p>
<p class="key" id=" " style="width:320px !important;"></p>
<p class="key" id="raltgraph" style="width:67px !important;">alt</p>
<p class="key" id="rcontrol" style="width:67px !important;">ctrl</p>
<p class="key" id="arrowleft">←</p>
<p class="key" id="arrowdown">↓</p>
<p class="key" id="arrowright">→</p>
</div>
</div>
</div>
</body>
</html>