-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
94 lines (82 loc) · 2.69 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MidiDorians</title>
<meta name="description" content="MidiDorians">
<meta name="author" content="adgad">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<section class="intro">
<div class="contents">
<h1 class="title">MidiDorians</h1>
<p class="info">Play the chords on your keyboard before they fall to the ground</p>
<p class="error"></p>
<form>
<label for="chord-roots">Chord Roots</label>
<select name="chord-roots" id="chord-roots" multiple size=2>
<option value="C" selected>C</option>
<option value="C#">C#</option>
<option value="D">D</option>
<option value="D#">D#</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="F#">F#</option>
<option value="G">G</option>
<option value="G#">G#</option>
<option value="A">A</option>
<option value="A#">A#</option>
<option value="B">B</option>
</select>
<label for="chord-complexity">Chord Length</label>
<select name="chord-length" id="chord-length" >
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<label for="chord-complexity">Chord Complexity</label>
<select name="chord-complexity" id="chord-complexity" >
<option value="simple">Simple</option>
<option value="intermediate">Intermediate</option>
<option value="hard">Hard</option>
</select>
<label for="chord-pace">Speed</label>
<select name="chord-pace" id="chord-pace" >
<option value="13700">Slow</option>
<option value="9000">Medium</option>
<option value="5000">Fast</option>
</select>
</form>
<button class="start-game">Start</button>
</div>
</section>
<section class="game">
<div class="targets"></div>
<div class="level">
<div class="label">Level</div>
<div class="value"></div>
</div>
<div class="score">
<div class="label">Score</div>
<div class="value"></div>
</div>
<div class="currentChord"></div>
<div class="piano">
<div class="piano__note" data-note="C"></div>
<div class="piano__note" data-note="C#"></div>
<div class="piano__note" data-note="D"></div>
<div class="piano__note" data-note="D#"></div>
<div class="piano__note" data-note="E"></div>
<div class="piano__note" data-note="F"></div>
<div class="piano__note" data-note="F#"></div>
<div class="piano__note" data-note="G"></div>
<div class="piano__note" data-note="G#"></div>
<div class="piano__note" data-note="A"></div>
<div class="piano__note" data-note="A#"></div>
<div class="piano__note" data-note="B"></div>
</div>
</section>
<script src="js/index.js"></script>
</body>
</html>