-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
48 lines (39 loc) · 2.55 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" type="text/css" href="./styles/style.css"> -->
<link rel="stylesheet" type="text/css" href="./styles/style-new.css">
<title>Hexadrum: Online Demo</title>
</head>
<body>
<main>
<header>
<h1>HEAR THE <strong>HEXADRUM</strong> BEFORE YOU BUY IT</h1>
<button id="start-audio" type="button">Click here to start playing</button>
</header>
<div id="online-hx-player">
<div id="hx-wrapper">
<!-- Image Map Generated by http://www.image-map.net/ -->
<canvas id="hx-canvas">Your browser does not support HTML canvas</canvas>
<img src="./images/hexadrum.png" usemap="#image-map" alt="Shows Hexadrum seen from above" id="hexadrum">
<map name="image-map">
<area alt="hx-snare" id="hx-snare" coords="397,288,382,378,384,387,477,443,486,444,590,403,595,393,605,306,602,297,514,247,504,245,407,281" shape="poly" class="hx-play">
<area alt="hx-tom1" id="hx-tom1" coords="544,141,537,226,616,271,699,228,707,141,628,99" shape="poly" class="hx-play">
<area alt="hx-tom2" id="hx-tom2" coords="638,303,627,397,719,442,823,389,829,295,736,252" shape="poly" class="hx-play">
<area alt="hx-hihat" id="hx-hihat" coords="314,99,309,107,305,117,303,129,303,140,304,152,307,162,310,171,314,177,318,183,324,190,332,196,338,201,347,205,355,209,364,211,374,215,387,217,399,219,409,219,419,218,430,216,442,213,449,209,459,205,468,199,478,194,486,187,496,177,502,166,508,150,509,131,508,113,503,100,496,89,487,80,477,73,465,65,451,59,440,56,423,52,407,52,389,54,374,57,360,62,345,70,332,80,321,90" shape="poly" class="hx-play">
<area alt="hx-kick" id="hx-kick" coords="508,801,516,815,507,823,523,843,534,835,546,847,566,820,579,806,596,790,634,765,654,749,671,727,680,708,684,695,691,690,679,675,668,684,649,688,633,694,619,703,603,717,589,733,577,749,554,769,533,785" shape="poly" class="hx-play">
<area alt="hx-cajon" id="hx-cajon" coords="197,564,36,743,37,755,89,883,94,893,117,910,275,1019,285,1019,291,1012,429,844,405,706,397,692,387,682,202,564" shape="poly" class="hx-play">
</map>
</div>
</div>
</main>
<script
src="./scripts/jquery-3.4.1.min.js"></script>
<script src="./scripts/jquery.rwdImageMaps.min.js"></script>
<script src="./scripts/canvasGraphics.js"></script>
<script src="./scripts/main.js"></script>
</body>
</html>