-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
73 lines (71 loc) · 4.75 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
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body class="css-selector">
<div id='header'>
<span id='night' onclick="switchTheme();">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" />
</svg>
</span>
<a href="https://github.com/alelouis" id='info' target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
<h1 id='title'>midiTeach 1.0</h1>
</div>
<div id='main'>
<div id='selector'>
<div class='chordSelector' id="select_maj" onclick="miditeach.selectChord('maj')">maj</div>
<div class='chordSelector' id="select_min" onclick="miditeach.selectChord('min')">min</div>
<div class='chordSelector' id="select_aug" onclick="miditeach.selectChord('aug')">aug</div>
<div class='chordSelector' id="select_dim" onclick="miditeach.selectChord('dim')">dim</div>
<div class='chordSelector' id="select_maj7" onclick="miditeach.selectChord('maj7')">maj7</div>
<div class='chordSelector' id="select_min7" onclick="miditeach.selectChord('min7')">min7</div>
<div class='chordSelector' id="select_dom" onclick="miditeach.selectChord('dom')">7</div>
<div class='chordSelector' id="select_minmaj7" onclick="miditeach.selectChord('minmaj7')">mM7</div>
</div>
<div id='score'>
<p style="display:inline" id='correct'>0</p> <h2 style="display:inline">-</h2>
<p style="display:inline" id='wrong'>0</p>
</div>
<p id='chord'></p>
<p id='formula'></p>
<p id='notes'> </p>
<div id="piano">
<svg viewBox="0 0 340 200" xmlns="http://www.w3.org/2000/svg">
<rect id="note1" x="0" width="40" height="200" rx="15" style="fill:var(--gray-color);"/>
<rect id="note3" x="50" width="40" height="200" rx="15" style="fill:var(--gray-color);"/>
<rect id="note5" x="100" width="40" height="200" rx="15" style="fill:var(--gray-color);"/>
<rect id="note6" x="150" width="40" height="200" rx="15" style="fill:var(--gray-color);"/>
<rect id="note8" x="200" width="40" height="200" rx="15" style="fill:var(--gray-color);"/>
<rect id="note10" x="250" width="40" height="200" rx="15" style="fill:var(--gray-color);"/>
<rect id="note12" x="300" width="40" height="200" rx="15" style="fill:var(--gray-color);"/>
<rect id="note2" x="27.5" width="35" height="140" rx="15" stroke-width=8 style="fill:var(--gray-color);stroke:var(--background-color)"/>
<rect id="note4" x="77.5" width="35" height="140" rx="15" stroke-width=8 style="fill:var(--gray-color);stroke:var(--background-color)"/>
<rect id="note7" x="177.5" width="35" height="140" rx="15" stroke-width=8 style="fill:var(--gray-color);stroke:var(--background-color)"/>
<rect id="note9" x="227.5" width="35" height="140" rx="15" stroke-width=8 style="fill:var(--gray-color);stroke:var(--background-color)"/>
<rect id="note11" x="277.5" width="35" height="140" rx="15" stroke-width=8 style="fill:var(--gray-color);stroke:var(--background-color)"/>
</svg>
</div>
<div id='time'>
<span>Last </span>
<span id='lastTime'>0</span>
<span> sec</span></br>
<span>Mean </span>
<span id='meanTime'>0</span>
<span> sec</span></br></br>
<div id='reset' onclick="miditeach.reset()"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg></div>
</div>
</div>
<div id='footer'>
<p style="display:inline" id='devices'></p>
</div>
</body>
<script src="miditeach-1.0.js"></script>
<script src="switcher.js"></script>
</html>