-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
42 lines (42 loc) · 8.92 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Drum</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/main.css" />
</head>
<body>
<main>
<div class="container">
<header><h1>It is your chance to be a drummer!</h1></header>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 130" preserveAspectratio="xMidYMid meet" aria-labelledby="title">
<title> Drum</title>
<g id="snare" data-key="KeyS">
<path class="part-white move" d="m23.1 27.2c-0.6 0-1.1 0-1.7 0-10.1 0.4-17.3 2.5-18.9 5.7-0.2 0.4-0.4 1.5-0.4 2.6 0 1.7-0.1 1.9-0.7 2.3-1.7 1.1-1.8 3.5-0.2 4.9l1 0.8-0.1 3.1c-0.1 1.9 0 3.3 0.1 3.6 1.6 3 7 4.9 16.1 5.8l0.8 0.1c0.4-0.1 0.9-0.1 1.4-0.1 1.3 0.1 2.8 0.6 4.1 1.9 0 0 0.2 0.2 0.2 0.2v-1.8l4-0.4c4.8-0.5 7.8-1.2 10.5-2.5 3.6-1.6 4.2-2.7 4.4-6.8l0.1-2.9 1.1-1.1c1-1 1-1.1 0.9-2.3-0.1-1-0.3-1.4-1.1-2.1-0.9-0.8-1-0.9-1-2.7 0-2-0.3-2.9-1.5-4-2.7-2.6-11.1-4.4-19.3-4.4z"/>
<path class="part-gold move" d="m23.2 27.3c-0.6 0-1.1 0-1.7 0-10.1 0.4-17.3 2.5-18.9 5.7-0.2 0.4-0.4 1.5-0.4 2.6 0 1.7-0.1 1.9-0.7 2.3-1.7 1.1-1.8 3.5-0.2 4.9l1 0.8-0.1 3.1c-0.1 1.9 0 3.3 0.1 3.6 1.4 2.6 5.9 4.5 13.4 5.5 0.2 0 0.4 0 0.6 0 0.8 0 1.7-0.1 2.5-0.1 0.2-0.2 0.3-0.4 0.5-0.7 0 0 0 0 0.1 0-0.3-0.7-0.3-1.2 0.2-1.3 0.3 0 0.8 0.1 1.5 0.5 1 0.5 2.2-0.3 3.2 0 1.3 0.4 2.6 0.9 3.3 1.8l1.4-0.2c4.8-0.5 7.8-1.2 10.5-2.5 3.6-1.6 4.2-2.7 4.4-6.8l0.1-2.9 1.1-1.1c1-1 1-1.1 0.9-2.3-0.1-1-0.3-1.4-1.1-2.1-0.9-0.8-1-0.9-1-2.7 0-2-0.3-2.9-1.5-4-2.7-2.6-11.1-4.4-19.3-4.4zm0.1 1.3c2.2 0 4.3 0.1 6.4 0.4 5.4 0.6 9.4 1.8 11.5 3.4 1.7 1.3 1.4 1.5-0.8 0.4-7-3.5-21.5-4.1-31-1.4-1.3 0.4-3.1 1.1-4 1.6-1.9 1-2.1 0.7-0.4-0.6 3-2.3 10.5-3.8 18.2-3.8z"/>
<path class="part-red move" d="m23.8 30.7v1c0 0.6 0.1 1 0.3 1 0.7 0 1.8 1.5 2 2.8 0.1 1.2 0.1 1.3-1.1 2.4-1.2 1.1-1.2 1.2-1.2 2.6 0 1.4 0 1.5-0.7 1.5-0.6 0-0.7-0.1-0.7-1.6 0-1.4-0.1-1.6-0.6-1.8-2.5-0.9-2.6-4.3-0.3-5.6 0.7-0.4 0.9-0.7 0.9-1.3v-0.8l-2.6 0.2c-7.9 0.5-14.2 2.4-15.8 4.7-0.6 0.9-0.5 1.4 0.4 1.8 1.1 0.5 2.1 1.9 2.1 3.1 0 1-1.3 2.7-2.3 2.9-0.6 0.1-0.6 0.3-0.6 1.5 0 1-0.1 1.5-0.7 2.1-1.3 1.5-1.2 2.8 0.2 4.3 1.9 2.1 6.5 3.7 13.5 4.5 0.8-0.5 1.8-0.8 3-0.8 1 0 2.2 0.3 3.5 0.9h0c0.7 0.3 1.3 0.7 1.9 1.1v-0.8l4-0.4c4.8-0.5 7.8-1.2 10.5-2.5 3.7-1.7 5-3.7 3.7-5.9-0.4-0.6-0.5-1.3-0.5-2.3 0-1.3-0.1-1.5-0.6-1.6-0.3-0.1-1-0.5-1.4-0.9-0.6-0.6-0.8-1-0.8-2.1 0-1.4 0.6-2.4 2-2.9 0.5-0.2 0.8-0.5 0.8-0.9 0-2.8-6.9-5.3-16.3-5.9z"/>
<path class="part-black" d="m22.8 42.2c-8.6 0.1-16.8 1.9-19.4 4.9-1.4 1.6-1.4 2.8 0.1 4.5 2 2.3 7.4 4 15.4 4.7l1.8 0.2v20.3 20.3l-7.9 7.9-7.9 7.9-1.2-0.1c-0.9-0.1-1.4 0-2 0.4-2.7 1.7-1.8 5.4 1.4 5.8 1.1 0.1 1.3 0.1 2.3-1 1-1 1.1-1.2 1-2.3l-0.1-1.2 7.6-7.6c4.2-4.2 7.7-7.6 7.8-7.6 0.1 0 0.2 3.9 0.2 8.6v8.6l-0.6 0.5c-0.9 0.7-1.3 1.9-1.1 3 0.2 0.9 1.2 2.1 2 2.4 1.2 0.4 2.2 0.2 3.2-0.9 1-1 1.1-1.1 0.9-2.3-0.1-1-0.3-1.4-1.1-2.1l-1-0.9v-8.5c0-4.7 0.1-8.5 0.2-8.5 0.1 0 3.5 3.3 7.6 7.4l7.4 7.4 0 1.5c0 1.3 0.1 1.6 0.8 2.3 0.6 0.6 1.1 0.9 2 1 1.2 0.1 1.3 0.1 2.3-1 1-1 1.1-1.2 1-2.3-0.2-1.8-1.3-2.9-3.1-2.9l-1.3 0-7.8-7.8-7.8-7.8v-20.3-20.3l4-0.4c4.9-0.5 7.9-1.2 10.6-2.5 2.2-1 3.7-2.4 4-3.6 0.6-2.5-2.5-4.9-8.1-6.3-3.9-1-8.5-1.4-13-1.4z"/>
</g>
<g id="kick" data-key="KeyD">
<path class="part-white" d="m94.7 37.7c-3.2 0-6.5 0.4-9.7 1.2-3.7 0.9-5.8 1.7-9.3 3.5-13.8 7-22.4 21.2-22.4 36.9l0 2.8-0.8 0.4c-1.1 0.6-1.7 1.9-1.5 3.1 0.2 0.9 1.3 2.4 1.9 2.4 0.2 0 0.4 1.1 0.6 3.2 0.3 2.6 1.4 8 2 9.6 0 0.1 0.1 0.2 0 0.3 0.2 0.1 0.3 0.2 0.2 0.6 0-0.1-0.2-0.4-0.2-0.3 0.1 0.2 0.2 0.3 0.2 0.5 0.1 0.2-0.1 0.5-0.1 0.7 0.1 0.1 0.2 0.1 0.2 0.3 0.1 0.1-0.1-0.1-0.2-0.2 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0 0.2 0 0.3 0.1 0 0.2 0.1 0.3 0.1 0-0.1 0.1-0.1 0.1-0.2 0.1-0.1 0.7 0.9 1.4 2.3 0.7 1.4 1.9 3.5 2.7 4.7 7.3 11 19.3 17.8 32.5 18.4 16.2 0.8 31.6-8.3 38.8-22.8 1.1-2.1 1.4-2.7 1.6-2.5 0-0.1 0.1-0.1 0.2-0.2 0 0-0.1 0.1 0 0.1 0.1-0.1 0.2-0.1 0.2-0.2 0 0 0 0 0 0 0-0.1 0.1-0.3 0.1-0.4 0-0.1 0.1-0.1 0.1-0.2 0 0 0 0 0 0 0 0 0 0 0 0 0-0.1 0-0.2 0.1-0.2 0 0 0-0.1 0-0.1 0-0.1 0.1-0.2 0.1-0.2v-0.3c-0.3 0-0.4-0.1-0.3-0.5 0.6-1.5 1.8-6.9 2-9.5 0.3-2.5 0.4-3 0.8-3.2 0.3-0.1 0.9-0.6 1.3-1.1 0.7-0.8 0.8-1.1 0.7-2.1-0.1-1.2-0.9-2.3-2-2.7-0.6-0.2-0.6-0.4-0.6-2.9 0-15.8-9-30.3-23.1-37.2-5.8-2.9-11.8-4.3-18-4.3zM55.4 101.7c0 0 0 0 0 0.1 0 0 0 0 0 0.1 0 0 0 0.1 0 0.1 0 0 0-0.1 0-0.1 0 0.1-0.1 0.2-0.1 0.4 0.1 0 0.2-0.1 0.3-0.1 0 0 0.1-0.1 0.1-0.1-0.1-0.2-0.1-0.3-0.2-0.3zm78.1 1c0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1-0.1 0.1 0zm-0.1 0.2c0 0 0 0 0 0 0 0 0 0.1 0 0.1 0 0 0-0.1 0-0.1zm0.3 1.7c0 0 0 0-0.1 0 0 0 0 0.1 0 0.1 0-0.1 0-0.1 0-0.2zm-84.9 20.1c0 0 0 0-0.1 0l0 0c0 0 0 0 0 0 0.1 0 0.2 0.1 0.3 0.1 0 0 0 0 0 0 0 0 0-0.1 0-0.1-0.1 0-0.1-0.1-0.2-0.1zm91.5 1.3c-0.2 0-0.3 0.1-0.4 0.1 0 0.1 0 0.2 0 0.3 0 0 0 0 0 0 0.1-0.1 0.3-0.3 0.4-0.4 0 0-0.1 0-0.1 0z"/>
<path class="part-gold" d="m94.3 37.4v0c-3.3 0-6.6 0.4-9.9 1.2-3.7 0.9-5.9 1.7-9.4 3.5-14 7.1-22.7 21.4-22.7 37.2l0 2.8-0.8 0.4c-1.1 0.6-1.7 1.9-1.5 3.1 0.2 0.9 1.3 2.5 1.9 2.5 0.2 0 0.4 1.1 0.6 3.2 0.3 2.6 1.4 8 2.1 9.7 0.1 0.3 0 0.4-0.3 0.4 0 0 0 0.1 0 0.2v0.1c0.2 0.2 0.4 0.3 0.4 0.7 0 0.1 0 0.2 0 0.3 0 0 0.1 0 0.1 0 0.2 0 0.4 0.4 0.4 0.7 0.2 0.2 0.7 1.1 1.3 2.2 0.7 1.4 1.9 3.5 2.8 4.8 7.4 11.1 19.6 18 32.9 18.6 16.4 0.8 32.1-8.4 39.3-23 1.2-2.4 1.5-2.8 1.7-2.4 0 0 0 0 0 0-0.1-0.2-0.1-0.5 0.1-0.5 0 0 0 0 0 0 0-0.8 0-1 0.5-0.9 0 0 0-0.1 0-0.1 0-0.1 0-0.2 0-0.3 0-0.1 0-0.2 0-0.3-0.2 0-0.3-0.2-0.2-0.5 0.6-1.5 1.8-7 2-9.6 0.3-2.5 0.4-3.1 0.8-3.2 0.3-0.1 0.9-0.6 1.3-1.1 0.7-0.9 0.8-1.1 0.7-2.1-0.1-1.2-0.9-2.4-2-2.8-0.6-0.2-0.6-0.4-0.6-3 0-16-9.1-30.6-23.4-37.5-5.9-2.9-12-4.3-18.2-4.3zm-0.2 9.7c2.9 0 5.7 0.2 7.8 0.6 16.3 3.5 28.5 15.5 31.9 31.6 0.3 1.4 0.7 3.1 0.9 3.7 0.7 2.5-0.5 12.2-2.1 17-2.1 6.3-6.8 13.4-11.8 17.7-5.5 4.7-11.6 7.7-18.7 9.2-3 0.6-9.8 0.9-12.7 0.6-6.5-0.8-13.4-3.6-18.8-7.4-2.9-2.1-7.2-6.4-9.2-9.2-3.3-4.7-5.6-10.1-6.8-15.6-0.8-3.8-1.3-11.6-0.8-12.6 0.2-0.4 0.6-1.9 0.9-3.3 1.8-8.5 6.5-16.6 13-22.2 5.4-4.7 11.7-7.8 18.9-9.3 2-0.4 4.9-0.6 7.8-0.6zM52.8 103.1c0 0 0 0 0 0.1 0 0 0 0 0 0zm1.1 2c0 0.1-0.1 0.1-0.1 0.2 0.1 0.1 0.2 0.1 0.4 0.2-0.1-0.1-0.1-0.1-0.2-0.2 0 0-0.1-0.1-0.1-0.1z"/>
<path class="part-black" d="m54.5 101.3c-0.2 0-0.4 0.1-0.6 0.2-0.1 0.1-2 4.9-4 10.7l-3.8 10.4-1 0.2c-0.7 0.1-1.3 0.5-1.9 1.2-0.8 0.9-0.9 1.1-0.8 2.2 0.1 1.2 0.9 2.3 1.9 2.7 1.5 0.6 3.3-0.2 4-1.7 0.4-0.8 0.4-1.1 0.1-2.1-0.2-0.6-0.3-1.2-0.4-1.4 0-0.2 1.7-4.9 3.7-10.6 2.1-5.7 3.7-10.6 3.7-11-0.1-0.5-0.6-0.8-1-0.7zm78.9 0c-0.5 0-1 0.3-1 0.7 0 0.3 1.6 5.3 3.7 11 2.1 5.7 3.8 10.5 3.7 10.6 0 0.2-0.2 0.8-0.4 1.4-0.3 1-0.3 1.2 0.1 2.1 0.2 0.5 0.8 1.2 1.3 1.5 1.9 1.2 4.4-0.1 4.6-2.5 0-0.1 0-0.1 0-0.2l-0.1-0.9-0.3-0.6c-0.1-0.1-0.3-0.3-0.4-0.5-0.6-0.7-1.2-1-1.9-1.2l-1-0.2-3.8-10.4c-2.1-5.7-3.9-10.5-4-10.7-0.1-0.1-0.3-0.2-0.6-0.2z"/>
<path class="part-red" d="m93.4 38.5c-1.3 0-4.9 0.4-7.1 0.8-15.8 3.2-28.1 15.5-31.3 31.4-0.3 1.5-0.5 3.1-0.5 3.6 0 0.7 0.1 0.5 0.8-1.2 3.5-9.9 10.7-18.2 20.1-23 5-2.5 9.6-3.9 15.4-4.5 2.7-0.3 3.2-0.4 2.6-0.6-2.5-1.1-2.7-4.3-0.4-5.7 0.5-0.3 0.9-0.6 0.9-0.7 0-0.1-0.2-0.1-0.5-0.1zm2.6 0.1c-0.5 0-0.8 0.1-0.8 0.2 0 0.2 0.2 0.3 0.3 0.3 0.7 0 1.8 1.5 2 2.8 0.1 1.2 0.1 1.3-1.1 2.4l-1.2 1.1 3.1 0.3c8.5 0.9 16.4 4.4 23 10 5.2 4.5 9.6 11.1 11.8 17.4 0.9 2.6 1 1.4 0.2-2.3-3.6-17.6-18.1-30.5-36-32.1-0.5 0-1-0.1-1.3-0.1z"/>
</g>
<g id="hihat" data-key="KeyF">
<path class="part-black" d="M165.5 0C164.5 0 163.5 0.6 162.9 1.6c-0.6 1-0.7 1.9-0.1 2.9 0.3 0.6 0.4 1.6 0.4 4v3.3 5.4 5.4 38.7 38.7l-7.9 7.9-7.9 7.9-1.2-0.1c-0.9-0.1-1.4 0-2 0.4-2.7 1.7-1.8 5.4 1.4 5.8 1.1 0.1 1.3 0.1 2.3-1 1-1 1.1-1.2 1-2.3l-0.1-1.2 7.6-7.6c4.2-4.2 7.7-7.6 7.8-7.6 0.1 0 0.2 3.9 0.2 8.6v8.6l-0.6 0.5c-0.9 0.7-1.3 1.9-1.1 3 0.2 0.9 1.2 2.1 2 2.4 1.2 0.4 2.2 0.2 3.2-0.9 1-1 1.1-1.1 0.9-2.3-0.1-1-0.3-1.4-1.1-2.1l-1-0.9v-8.5c0-4.7 0.1-8.5 0.2-8.5 0.1 0 3.5 3.3 7.6 7.4l7.4 7.4 0 1.5c0 1.3 0.1 1.6 0.8 2.3 0.6 0.6 1.1 0.9 2 1 1.2 0.1 1.3 0.1 2.3-1 1-1 1.1-1.2 1-2.3-0.2-1.8-1.3-2.9-3.1-2.9l-1.3 0-7.8-7.8-7.8-7.8v-38.7-38.7-5.4-5.4-3.3c0-2.6 0.1-3.5 0.4-4 0.6-0.9 0.3-2.6-0.6-3.6-0.6-0.7-1.4-1-2.2-1z"/>
<path class="part-gold move" d="m163.2 11.5v0.1l-0.7 0c-0.4 0-2.5 0.1-4.6 0.3-7.6 0.5-12 1.5-13.6 2.9l-0.8 0.8 9.9 0 9.9 0v0.1h4.8v-0.1h9.8c9.7 0 9.8 0 9.5-0.5-1-1.6-7-2.8-16.1-3.3l-3.1-0.2v0z"/>
<path class="part-gold" d="m163.7 22.4v-0.1l-0.7 0c-0.4 0-2.5-0.1-4.6-0.3-7.6-0.5-12-1.5-13.6-2.9l-0.8-0.8 9.9 0 9.9 0v-0.1h4.8v0.1h9.8c9.7 0 9.8 0 9.5 0.5-1 1.6-7 2.8-16.1 3.3l-3.1 0.2v0z"/>
</g>
</svg>
</div>
</main>
<footer>
<p class="instructions">Play drum using S for snare, D for kick and F for hihat.</p>
<p class="author">Made by <a href="https://github.com/marrow00">marrow00</a></p>
</footer>
<script src="js.js"></script>
</body>
</html>