-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathdrums.html
More file actions
74 lines (72 loc) · 5.75 KB
/
drums.html
File metadata and controls
74 lines (72 loc) · 5.75 KB
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Drums | Torsk</title>
<script src="/static/fastclick/lib/fastclick.js"></script>
<script src="/static/socket.io/node_modules/socket.io-client/socket.io.js"></script>
<!-- CSS -->
<link href="/static/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link href="torsk.css" rel="stylesheet">
<!-- JS -->
<script type="text/javascript" src="torsk.js"></script>
</head>
<body>
<table>
<tr onclick="drums()">
<td id="kick-1" onclick="toggleChecked('kick-1')" style="background-color: lightblue;" class="inactive"> </td>
<td id="kick-2" onclick="toggleChecked('kick-2')" style="background-color: lightblue;" class="inactive"> </td>
<td id="kick-3" onclick="toggleChecked('kick-3')" style="background-color: lightblue;" class="inactive"> </td>
<td id="kick-4" onclick="toggleChecked('kick-4')" style="background-color: lightblue;" class="inactive"> </td>
<td id="kick-5" onclick="toggleChecked('kick-5')" style="background-color: lightblue;" class="inactive"> </td>
<td id="kick-6" onclick="toggleChecked('kick-6')" style="background-color: lightblue;" class="inactive"> </td>
<td id="kick-7" onclick="toggleChecked('kick-7')" style="background-color: lightblue;" class="inactive"> </td>
<td id="kick-8" onclick="toggleChecked('kick-8')" style="background-color: lightblue;" class="inactive"> </td>
</tr>
<tr onclick="drums()">
<td id="snare-1" onclick="toggleChecked('snare-1')" style="background-color: violet;" class="inactive"> </td>
<td id="snare-2" onclick="toggleChecked('snare-2')" style="background-color: violet;" class="inactive"> </td>
<td id="snare-3" onclick="toggleChecked('snare-3')" style="background-color: violet;" class="inactive"> </td>
<td id="snare-4" onclick="toggleChecked('snare-4')" style="background-color: violet;" class="inactive"> </td>
<td id="snare-5" onclick="toggleChecked('snare-5')" style="background-color: violet;" class="inactive"> </td>
<td id="snare-6" onclick="toggleChecked('snare-6')" style="background-color: violet;" class="inactive"> </td>
<td id="snare-7" onclick="toggleChecked('snare-7')" style="background-color: violet;" class="inactive"> </td>
<td id="snare-8" onclick="toggleChecked('snare-8')" style="background-color: violet;" class="inactive"> </td>
</tr>
<tr onclick="drums()">
<td id="clap-1" onclick="toggleChecked('clap-1')" style="background-color: lightgray;" class="inactive"> </td>
<td id="clap-2" onclick="toggleChecked('clap-2')" style="background-color: lightgray;" class="inactive"> </td>
<td id="clap-3" onclick="toggleChecked('clap-3')" style="background-color: lightgray;" class="inactive"> </td>
<td id="clap-4" onclick="toggleChecked('clap-4')" style="background-color: lightgray;" class="inactive"> </td>
<td id="clap-5" onclick="toggleChecked('clap-5')" style="background-color: lightgray;" class="inactive"> </td>
<td id="clap-6" onclick="toggleChecked('clap-6')" style="background-color: lightgray;" class="inactive"> </td>
<td id="clap-7" onclick="toggleChecked('clap-7')" style="background-color: lightgray;" class="inactive"> </td>
<td id="clap-8" onclick="toggleChecked('clap-8')" style="background-color: lightgray;" class="inactive"> </td>
</tr>
<tr onclick="drums()">
<td id="hihat-1" onclick="toggleChecked('hihat-1')" style="background-color: lightpink;" class="inactive"> </td>
<td id="hihat-2" onclick="toggleChecked('hihat-2')" style="background-color: lightpink;" class="inactive"> </td>
<td id="hihat-3" onclick="toggleChecked('hihat-3')" style="background-color: lightpink;" class="inactive"> </td>
<td id="hihat-4" onclick="toggleChecked('hihat-4')" style="background-color: lightpink;" class="inactive"> </td>
<td id="hihat-5" onclick="toggleChecked('hihat-5')" style="background-color: lightpink;" class="inactive"> </td>
<td id="hihat-6" onclick="toggleChecked('hihat-6')" style="background-color: lightpink;" class="inactive"> </td>
<td id="hihat-7" onclick="toggleChecked('hihat-7')" style="background-color: lightpink;" class="inactive"> </td>
<td id="hihat-8" onclick="toggleChecked('hihat-8')" style="background-color: lightpink;" class="inactive"> </td>
</tr>
<tr onclick="drums()">
<td id="crash-1" onclick="toggleChecked('crash-1')" style="background-color: limegreen;" class="inactive"> </td>
<td id="crash-2" onclick="toggleChecked('crash-2')" style="background-color: limegreen;" class="inactive"> </td>
<td id="crash-3" onclick="toggleChecked('crash-3')" style="background-color: limegreen;" class="inactive"> </td>
<td id="crash-4" onclick="toggleChecked('crash-4')" style="background-color: limegreen;" class="inactive"> </td>
<td id="crash-5" onclick="toggleChecked('crash-5')" style="background-color: limegreen;" class="inactive"> </td>
<td id="crash-6" onclick="toggleChecked('crash-6')" style="background-color: limegreen;" class="inactive"> </td>
<td id="crash-7" onclick="toggleChecked('crash-7')" style="background-color: limegreen;" class="inactive"> </td>
<td id="crash-8" onclick="toggleChecked('crash-8')" style="background-color: limegreen;" class="inactive"> </td>
</tr>
<tr>
<td colspan="4" onclick="drums()" style="text-align: center; background-color: lightblue;"><b>:-)</b></td>
<td colspan="4" onclick="stopDrums()" style="text-align: center; background-color: lightcoral;"><b>:-/</b></td>
</tr>
</table>
</body>
</html>