-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
105 lines (101 loc) · 4.61 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="./style.css">
<title>Keybpard</title>
</head>
<body>
<div class="switcher">
<h1>Themes</h1>
<p>Click on the buttons to change the theme</p>
</div>
<div class="base">
<div class="key">~</div>
<div class="key">1</div>
<div class="key">2</div>
<div class="key">3</div>
<div class="key">4</div>
<div class="key">5</div>
<div class="key">6</div>
<div class="key">7</div>
<div class="key">8</div>
<div class="key">9</div>
<div class="key">0</div>
<div class="key">-</div>
<div class="key">+</div>
<div class="key delete">Delete</div>
<div class="key tab">Tab</div>
<div class="key">Q</div>
<div class="key col" id="w" tabindex="1">W</div>
<div class="key">E</div>
<div class="key">R</div>
<div class="key">T</div>
<div class="key">Y</div>
<div class="key">U</div>
<div class="key">I</div>
<div class="key">O</div>
<div class="key">P</div>
<div class="key">[</div>
<div class="key">]</div>
<div class="key backslash">\</div>
<div class="key capslock">CapsLock</div>
<div class="key col" id="a" tabindex="2">A</div>
<div class="key col" id="s" tabindex="3">S</div>
<div class="key col" id="d" tabindex="4">D</div>
<div class="key">F</div>
<div class="key">G</div>
<div class="key">H</div>
<div class="key">J</div>
<div class="key">K</div>
<div class="key">L</div>
<div class="key">;</div>
<div class="key">'</div>
<div class="key return">Enter</div>
<div class="key leftshift">Shift</div>
<div class="key">Z</div>
<div class="key">X</div>
<div class="key">C</div>
<div class="key">V</div>
<div class="key">B</div>
<div class="key">N</div>
<div class="key">M</div>
<div class="key">,</div>
<div class="key">.</div>
<div class="key">/</div>
<div class="key rightshift">Shift</div>
<div class="key leftctrl">Ctrl</div>
<div class="key fn">Fn</div>
<div class="key command">
<svg width="24" viewBox="0 0 480 480">
<path d="M0.176,224L0.001,67.963l192-26.072V224H0.176z M224.001,37.241L479.937,0v224H224.001V37.241z M479.999,256l-0.062,224
l-255.936-36.008V256H479.999z M192.001,439.918L0.157,413.621L0.147,256h191.854V439.918z" />
</svg>
</div>
<div class="key">Alt</div>
<div class="key space col" tabindex="5">Space</div>
<div class="key gr col" tabindex="6">Alt Gr</div>
<div class="key command">
<svg viewBox="0 0 470.586 470.586" width="30">
<path d="M327.081,0H90.234C74.331,0,61.381,12.959,61.381,28.859v412.863c0,15.924,12.95,28.863,28.853,28.863H380.35
c15.917,0,28.855-12.939,28.855-28.863V89.234L327.081,0z M333.891,43.184l35.996,39.121h-35.996V43.184z M384.972,441.723
c0,2.542-2.081,4.629-4.635,4.629H90.234c-2.55,0-4.619-2.087-4.619-4.629V28.859c0-2.548,2.069-4.613,4.619-4.613h219.411v70.181
c0,6.682,5.443,12.099,12.129,12.099h63.198V441.723z M128.364,128.89H334.15c5.013,0,9.079,4.066,9.079,9.079
c0,5.013-4.066,9.079-9.079,9.079H128.364c-5.012,0-9.079-4.066-9.079-9.079C119.285,132.957,123.352,128.89,128.364,128.89z
M343.229,198.98c0,5.012-4.066,9.079-9.079,9.079H128.364c-5.012,0-9.079-4.066-9.079-9.079s4.067-9.079,9.079-9.079H334.15
C339.163,189.901,343.229,193.968,343.229,198.98z M343.229,257.993c0,5.013-4.066,9.079-9.079,9.079H128.364
c-5.012,0-9.079-4.066-9.079-9.079s4.067-9.079,9.079-9.079H334.15C339.163,248.914,343.229,252.98,343.229,257.993z
M343.229,318.011c0,5.013-4.066,9.079-9.079,9.079H128.364c-5.012,0-9.079-4.066-9.079-9.079s4.067-9.079,9.079-9.079H334.15
C339.163,308.932,343.229,312.998,343.229,318.011z" />
</svg>
</div>
<div class="key rightctrl">Ctrl</div>
<div class="stand"></div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="./main.js"></script>
</body>
</html>