-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (103 loc) · 4.19 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
<title>Banana Beat</title>
<link rel="icon" href="http://rs824.pbsrc.com/albums/zz164/Vinnie2020/Smiley24.gif~c200">
<link href="https://fonts.googleapis.com/css?family=Comfortaa:400,700|Poppins:300,400" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet">
</head>
<body>
<aside>
<img id="banana-beat" src="banana/banana7.png" alt="dancing banana"/>
<section id="tempo-change">
<input id="tempo-value" type="number" name="tempoValueInput" min="20" max="200" />bpm
<input id="tempo-slider" type="range" name="tempoSliderInput" min="20" max="200" step="5" />
</section> <!-- end tempo-change -->
<div id='play-pause'>
<img id='banana-spiral' clicked='no' class='spinning' src="bananaspiral.png" />
<img id='playhead' src="playpause.png" />
</div>
<button id="random-button">Randomize</button>
<button id="reset" type="click"> Reset </button>
<section id="options">
<h2>Kit Change</h2>
<button id="d1" type:"submit">Classic</button>
<button id="d2" type:"submit">Electric</button>
<button id="d4" type:"submit">Bass Guitar</button>
<button id="d0" type:"submit">Goat-Hub</button>
<h2>Add Loop</h2>
<button id="d3" type:"submit">Guitar Loop (40bpm)</button>
<button id="d5" type:"submit">Synth Loop (60bpm)</button>
<button id="d6" type:"submit">Bass Loop 1(60bpm)</button>
<button id="d7" type:"submit">Bass Loop 2(43bpm)</button>
</section> <!-- end options -->
<section id="piano-settings">
<h2>Keyboard Settings</h2>
<div id ='octaveSelector'>
<p class="left">Octave</p>
<select class="right" id='octave-menu' name="octave-change">
<option value=0>0</option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option selected="selected" value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
</select>
</div> <!-- end octaveSelector -->
<div id ='waveSelector'>
<p class="left clear-fix">Wave Tone</p>
<select class="right" id='wave-menu' name="wave-change">
<option value='sine'>Sine</option>
<option value='sawtooth'>Saw</option>
<option value='triangle'>Triangle</option>
<option value="square">Square</option>
</select>
</div> <!-- end waveSelector -->
<div class="clear-fix"></div>
</section> <!-- end piano-settings -->
<section id="export-import">
<h2>Share Your Beat</h2>
<form id="export-form">
<button type="submit">Export</button>
<input type="text" name="exportOutput" readonly="readonly" />
</form>
<form id="import-form">
<input type="text" name="importInput" required />
<button type="submit">Import</button>
<div id="error-message"></div>
</form>
</section> <!-- end export-import -->
<section id="saved-states">
<h2>Save Your Beat</h2>
<form id="save-form">
<input type="text" name="nameInput" placeholder="Beat name" required />
<button type="submit">Save Current Setup</button>
</form>
<div id="saves"></div>
<button id="clear-saves">Clear All Saved Data</button>
</section> <!-- end saved-states -->
<footer>
<a href="aboutus.html">Meet the Team</a>
</footer>
</aside>
<main>
<section id='beats'>
<table id="grid-beat"></table>
</section>
<section id="piano-box">
<table id="piano"></table>
<div id="c-sharp" class="black-key"><span>W</span></div>
<div id="d-sharp" class="black-key"><span>E</span></div>
<div id="f-sharp" class="black-key"><span>T</span></div>
<div id="g-sharp" class="black-key"><span>Y</span></div>
<div id="a-sharp" class="black-key"><span>U</span></div>
</section> <!-- end piano-box -->
</main>
<script src='app.js'></script>
</body>
</html>