forked from rednetio/chord-display
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
64 lines (59 loc) · 3.54 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
<!DOCTYPE html>
<html>
<head>
<title>{{TITLE}}</title>
<meta name="description" content="{{DESCRIPTION}}"/>
<meta name="keywords" content="{{KEYWORDS}}">
<meta name="author" content="{{AUTHOR_NAME}}">
<meta charset="UTF-8" />
<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAA////AMnJyQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABERIRESEREAEREhERIREQARESEREhERABERIRESEREAEREhERIREQARESEREhERABEQABEAAREAERAAEQABEQAREAARAAERABEQABEAAREAERAAEQABEQAREAARAAERABEQABEAAREAERAAEQABEQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" rel="icon" type="image/x-icon">
</head>
<body>
<div id="app">
<div id="settings">
<div id="credits">
<h1><a href="{{HOMEPAGE}}" target="_blank">{{TITLE}}</a></h1>
<p>{{DESCRIPTION}}</p>
<p>Version <b>{{VERSION}}</b> - Developed by {{AUTHOR_NAME}} (<a href="{{AUTHOR_URL}}" target="_blank">{{AUTHOR_URL}}</a>)</p>
<p>Powered by <a href="https://github.com/tonaljs/tonal" target="_blank">tonaljs</a> - <a class="badge" href="https://github.com/{{GITHUB_REPOSITORY}}" target="_black"><img src="https://img.shields.io/github/stars/{{GITHUB_REPOSITORY}}.svg?label=Source%20on%20Github&style=social" alt="Source on Github"/></a></p>
</div>
<form>
<fieldset>
<legend>Settings:</legend>
<label><span>MIDI Input: </span><select id="midiIn"></select></label>
<label><span>Note Start: </span><input id="noteStart" type="text" size="2" maxlength="2" /></label>
<label><span>Note End: </span><input id="noteEnd" type="text" size="2" maxlength="2" /></label>
<fieldset>
<legend>Features:</legend>
<label><span>Latin Notation: </span><input id="latinNotationEnabled" type="checkbox" /></label>
<label><span>Pitch Wheel: </span><input id="pitchWheelEnabled" type="checkbox" /></label>
<label><span>Mod Wheel: </span><input id="modWheelEnabled" type="checkbox" /></label>
</fieldset>
<fieldset>
<legend>Colors:</legend>
<label><span>Note: </span><input id="colorNote" type="color" /></label>
<label><span>Pitch Up: </span><input id="colorPitchWheelUp" type="color" /></label>
<label><span>Pitch Down: </span><input id="colorPitchWheelDown" type="color" /></label>
<label><span>Mod Wheel: </span><input id="colorModWheel" type="color" /></label>
</fieldset>
<fieldset>
<legend>Hide elements:</legend>
<label><span>Keyboard: </span><input id="hideKeyboard" type="checkbox" /></label>
<label><span>Chord Name: </span><input id="hideChord" type="checkbox" /></label>
<label><span>Bass Note: </span><input id="hideBassNote" type="checkbox" /></label>
<label><span>Notes: </span><input id="hideNotes" type="checkbox" /></label>
<label><span>Key Names: </span><input id="hideKeyName" type="checkbox" /></label>
<label><span>Tonic: </span><input id="hideTonic" type="checkbox" /></label>
</fieldset>
</fieldset>
</form>
</div>
<div id="chordContainer">
<span id="chord">{{TITLE}}</span>
</div>
<div id="notes">Play now and see your notes</div>
<div id="keyboard"></div>
</div>
<script src="src/index.js"></script>
</body>
</html>