-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
66 lines (64 loc) · 1.89 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
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<link rel='stylesheet' type="text/css" href='main.css' />
<title>Chord Progression Generator</title>
</head>
<body class='d-flex justify-content-center align-items-center'>
<div id='gameboy'>
<!-- Screen -->
<div id='screen-container'>
<div id='screen'>
<h1></h1>
</div>
</div>
<div id='buttons'>
<!-- Replay button -->
<div class='button-row'>
<div class='text-container'>
<p>Replay</p>
</div>
<div id='replaybutton' class='button'></div>
</div>
<!-- Generate button -->
<div class='button-row'>
<div class='text-container'>
<p>Generate</p>
</div>
<div id='generatebutton' class='button'></div>
</div>
</div>
<div id='inputs'>
<!-- Major / minor -->
<div class='slider-row'>
<div class='text-container'>
<p>Type:</p>
</div>
<div class='text-container'>
<p id='majorminoroutput' class='output'>Major</p>
</div>
<input id='majorminorrange' class='slider' type='range' min='0' max='1' value='0' />
</div>
<!-- Key -->
<div class='slider-row'>
<div class='text-container'>
<p>Key:</p>
</div>
<div class='text-container'>
<p id='keyoutput' class='output'>Random</p>
</div>
<!-- random, C, D, E, F, G, A, B, C#/Db, D#/Eb, F#/Gb, G#/Ab, A#/Bb -->
<!-- random, Cm,Dm,Em,Fm,Gm,Am,Bm,C#m/Ddm,D#m/Ebm,F#m/Gbm, G#m/Abm, A#m/Bbm -->
<!-- const KEYS = ["Random", "C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]; -->
<input id='keyrange' class='slider' type='range' min='0' max='12' value='0' />
</div>
</div>
</div>
<script src='jquery.min.js'></script>
<script src='ChordGenerator.js'></script>
<script src='Tone.js'></script>
<script src='main.js'></script>
</body>
</html>