-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
89 lines (86 loc) · 2.42 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>🎵 MUSIC KIT 🎵</title>
<link rel="stylesheet" href="./style.css" />
<link rel="icon" href="./favicon.png" type="image/png" />
</head>
<body>
<canvas id="rainCanvas"></canvas>
<div class="keys container">
<div class="digits">
<div data-key="Digit1" class="key Digit1">
<kbd>1</kbd>
</div>
<div data-key="Digit2" class="key Digit2">
<kbd>2</kbd>
</div>
<div data-key="Digit3" class="key Digit3">
<kbd>3</kbd>
</div>
<div data-key="Digit4" class="key Digit4">
<kbd>4</kbd>
</div>
<div data-key="Digit5" class="key Digit5">
<kbd>5</kbd>
</div>
<div data-key="Digit6" class="key Digit6">
<kbd>6</kbd>
</div>
<div data-key="Digit7" class="key Digit7">
<kbd>7</kbd>
</div>
<div data-key="Digit8" class="key Digit8">
<kbd>8</kbd>
</div>
<div data-key="Digit9" class="key Digit9">
<kbd>9</kbd>
</div>
<div data-key="Digit0" class="key Digit0">
<kbd>0</kbd>
</div>
<!-- - + -->
<div data-key="Minus" class="key Minus">
<kbd>-</kbd>
</div>
<div data-key="Equal" class="key Equal">
<kbd>=</kbd>
</div>
</div>
<div class="letters">
<div data-key="KeyQ" class="key KeyQ">
<kbd>Q</kbd>
</div>
<div data-key="KeyW" class="key KeyW">
<kbd>W</kbd>
</div>
<div data-key="KeyE" class="key KeyE">
<kbd>E</kbd>
</div>
<div data-key="KeyA" class="key KeyA">
<kbd>A</kbd>
</div>
<div data-key="KeyS" class="key KeyS">
<kbd>S</kbd>
</div>
<div data-key="KeyD" class="key KeyD">
<kbd>D</kbd>
</div>
<div data-key="KeyZ" class="key KeyZ">
<kbd>Z</kbd>
</div>
<div data-key="KeyX" class="key KeyX">
<kbd>X</kbd>
</div>
<div data-key="KeyC" class="key KeyC">
<kbd>C</kbd>
</div>
</div>
</div>
<script src="./main.js"></script>
<!-- <script src="./audioContext.js"></script> -->
<script src="./rain.js"></script>
</body>
</html>