-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
122 lines (121 loc) · 5.96 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="kt.css">
<title>Keyboard Trainer</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="kt.js"></script>
</head>
<body class="page-ct">
<header>
<div id="logo">Keyboard Trainer</div>
<nav>
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="levels" id="levels">
<div class="leftArrow button" id="leftArrow"> < </div>
<div class="currentLevel button" id="currentLevel">Level 1</div>
<div class="rightArrow button" id="rightArrow"> > </div>
</div>
<div class="textToInputContainer">
<input type="text" class="text" id="text" readonly="readonly"/>
<span id="leftToType" class="leftToType"></span>
</div>
<div class="keyboard" id="keyboard">
<div class="line1" id="line1">
<div class="letter colorLittleFingerLeft" id="letter1_1">></div>
<div class="letter colorLittleFingerLeft" id="letter1_2">1</div>
<div class="letter colorLittleFingerLeft" id="letter1_3">2</div>
<div class="letter colorRingFingerLeft" id="letter1_4">3</div>
<div class="letter colorMiddleFingerLeft" id="letter1_5">4</div>
<div class="letter colorIndexFingerLeft" id="letter1_6">5</div>
<div class="letter colorIndexFingerLeft" id="letter1_7">6</div>
<div class="letter colorIndexFingerRight" id="letter1_8">7</div>
<div class="letter colorIndexFingerRight" id="letter1_9">8</div>
<div class="letter colorMiddleFingerRight" id="letter1_10">9</div>
<div class="letter colorRingFingerRight" id="letter1_11">0</div>
<div class="letter colorLittleFingerRight" id="letter1_12">-</div>
<div class="letter colorLittleFingerRight" id="letter1_13">=</div>
</div>
<div class="line2" id="line2">
<div class="letter colorLittleFingerLeft" id="letter2_1">й</div>
<div class="letter colorRingFingerLeft" id="letter2_2">ц</div>
<div class="letter colorMiddleFingerLeft" id="letter2_3">у</div>
<div class="letter colorIndexFingerLeft" id="letter2_4">к</div>
<div class="letter colorIndexFingerLeft" id="letter2_5">е</div>
<div class="letter colorIndexFingerRight" id="letter2_6">н</div>
<div class="letter colorIndexFingerRight" id="letter2_7">г</div>
<div class="letter colorMiddleFingerRight" id="letter2_8">ш</div>
<div class="letter colorRingFingerRight" id="letter2_9">щ</div>
<div class="letter colorLittleFingerRight" id="letter2_10">з</div>
<div class="letter colorLittleFingerRight" id="letter2_11">х</div>
<div class="letter colorLittleFingerRight" id="letter2_12">ъ</div>
</div>
<div class="line3" id="line3">
<div class="letter colorLittleFingerLeft" id="letter3_1">ф</div>
<div class="letter colorRingFingerLeft" id="letter3_2">ы</div>
<div class="letter colorMiddleFingerLeft" id="letter3_3">в</div>
<div class="letter colorIndexFingerLeft underline" id="letter3_4">а</div>
<div class="letter colorIndexFingerLeft" id="letter3_5">п</div>
<div class="letter colorIndexFingerRight" id="letter3_6">р</div>
<div class="letter colorIndexFingerRight underline" id="letter3_7">о</div>
<div class="letter colorMiddleFingerRight" id="letter3_8">л</div>
<div class="letter colorRingFingerRight" id="letter3_9">д</div>
<div class="letter colorLittleFingerRight" id="letter3_10">ж</div>
<div class="letter colorLittleFingerRight" id="letter3_11">э</div>
<div class="letter colorLittleFingerRight" id="letter3_12">ё</div>
</div>
<div class="line4" id="line4">
<div class="letter colorLittleFingerLeft" id="letter4_1">]</div>
<div class="letter colorLittleFingerLeft" id="letter4_2">я</div>
<div class="letter colorRingFingerLeft" id="letter4_3">ч</div>
<div class="letter colorMiddleFingerLeft" id="letter4_4">с</div>
<div class="letter colorIndexFingerLeft" id="letter4_5">м</div>
<div class="letter colorIndexFingerLeft" id="letter4_6">и</div>
<div class="letter colorIndexFingerRight" id="letter4_7">т</div>
<div class="letter colorIndexFingerRight" id="letter4_8">ь</div>
<div class="letter colorMiddleFingerRight" id="letter4_9">б</div>
<div class="letter colorRingFingerRight" id="letter4_10">ю</div>
<div class="letter colorLittleFingerRight" id="letter4_11">/</div>
</div>
<div class="letter space colorBigFinger" id="space"></div>
<div class="fingerSet" id="fingerSet">
<div class="finger colorLittleFingerLeft finger1"></div>
<div class="finger colorRingFingerLeft finger2"></div>
<div class="finger colorMiddleFingerLeft finger3"></div>
<div class="finger colorIndexFingerLeft finger4"></div>
<div class="finger colorBigFinger finger5"></div>
<div class="finger colorBigFinger finger5"></div>
<div class="finger colorIndexFingerRight finger4"></div>
<div class="finger colorMiddleFingerRight finger3"></div>
<div class="finger colorRingFingerRight finger2"></div>
<div class="finger colorLittleFingerRight finger1"></div>
</div>
<div class="counter" id="counter">
<div class="counter-label">
<label> <input id="keyboardFingerColors" type="checkbox" value="fingerColors"/><span>Finger Colors</span></label>
<label> <input id="checkNumbers" type="checkbox" value="trainNumbers"/><span>Train Numbers</span></label>
<label> <input id="checkHideKeys" type="checkbox" value="hideKeys"/><span>Hide Keys</span></label>
</div>
<div class="counterTable" id="counterTable">
<div class="table counterTable-first">
<div>Right</div>
<div>Wrong</div>
</div>
<div class="table counterTable-second">
<div id="counterForRight"></div>
<div id="counterForWrong"></div>
</div>
</div>
</div>
</div>
</body>
</html>