-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
86 lines (82 loc) · 4.06 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
<!DOCTYPE html>
<html lang="en" >
<!-- manifest="app.appcache" -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JS-404</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href='http://fonts.googleapis.com/css?family=Play' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/banks.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div id='container'>
<a href="#openModal" id="modal">About</a>
<div id="openModal" class="modalDialog">
<div> <a href="#close" title="Close" class="close">X</a>
<h2>About</h2>
<p>A senior level project done while studying web development at <a href="http://www.makersquare.com" target="_blank" class="mks">MakerSquare</a> in Austin, TX.</p>
<p>Click or press a number 1-5 to choose a sound bank. Each pad has a corresponding key assigned to it. Tap out a beat and enjoy. To record click the reocrd button and play your beat. When finished hit stop and then play to play back what you recorded. Best used with Chrome or Safari browsers.<br>
Check out my other work or reach out to me at: <br>
<a href="http://bobbysmith.codes" target="_blank">bobbysmith.codes</a></p>
</div>
</div>
<div id='logo'>
<h1> JS-404<sup><span>®</span></sup></h1>
</div>
<div id='screen'>
<div id='current-bank' class='titles'>Current Bank: <span></span></div>
<div id='description' class='titles'>Description: <span></span></div>
<div id="sample" class="titles">Sample: <span></span></div>
</div>
<div id='left'>
<div id='transport'>
<div id='banks'>
<button class='bank selected' id='808' data-id='1'>1</button>
<button class='bank' id='house' data-id='2'>2</button>
<button class='bank' id='dancehall' data-id='3'>3</button>
<button class='bank' id='hip-hop' data-id='4'>4</button>
<button class='bank' id='soul' data-id='5'>5</button>
<button class='bank' id='hidden' data-id='6'></button>
</div>
<div id='track'>
<button id='record'><img src="images/record.png"></button>
<button id='play'><img src="images/play.png"></button>
<button id='stop'><img src="images/stop.png"></button>
<!-- <div class="form">
<input id="bpm" type="text" name="bpm" value="120"><br>
<input type="submit" value="BPM" id="submit-button">
</div> -->
</div>
</div>
</div>
<div id='pads'>
<button class='pad' data-id='55'>7</button>
<button class='pad' data-id='56'>8</button>
<button class='pad' data-id='57'>9</button>
<button class='pad' data-id='48'>0</button>
<button class='pad' data-id='89'>y</button>
<button class='pad' data-id='85'>u</button>
<button class='pad' data-id='73'>i</button>
<button class='pad' data-id='79'>o</button>
<button class='pad' data-id='72'>h</button>
<button class='pad' data-id='74'>j</button>
<button class='pad' data-id='75'>k</button>
<button class='pad' data-id='76'>l</button>
<button class='pad' data-id='66'>b</button>
<button class='pad' data-id='78'>n</button>
<button class='pad' data-id='77'>m</button>
<button class='pad' data-id='188'>,</button>
</div>
</div>
<script type="text/javascript" src="js/presentation.js"></script>
<script type="text/javascript">JS404.bindPresentation();</script>
</body>
</html>