-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
117 lines (110 loc) · 4.21 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>SHAlala</title>
<style>
body {
line-height: 1.4;
font-size: 16px;
padding: 0 10px;
margin: 10px auto;
max-width: 650px;
}
#maincontent {
max-width:42em;margin:15 auto;
}
label {
/* make text not selectable to prevent selection when clicking a checkbox label */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div {
padding-top: 5px;
}
</style>
</head>
<body>
<div class="maincontent">
<h1>SHAlala</h1>
<h2>Turn Your SHA1 into Music If You Want to Do That For Some Reason</h2>
<form id="form">
<h3>Provide a Hash</h3>
<div>
<label for="hashInput">Hash input:</label>
<input id="hashInput" placeholder="enter SHA1 here" type="text">
<button type="button" id="hashInputClear">X</button>
<br>
<p style="margin: 0; font-size: .8em;">(All other inputs are ignored when this is used)</p>
<div id="hashInputError" style="color:red"></div>
</div>
<div>
<h3>Load a Github Repo</h3>
<div>
<p style="margin:0">Grabs the most recent commit of the Github Repo</p>
<p style="margin: 0; font-size: .8em">(Text/File input are ignored if a repo has been specified)</p>
<div>
<label for="githubInput">Github URL: </label>
<input id="githubInput" type="text" placeholder="https://github.com/UserName/Repository" style="width:50%">
<button id="githubInputButton" type="button">Load</button>
<button id="githubClearButton" type="button">X</button>
</div>
</div>
<div id="githubResults"></div>
</div>
<hr/>
<h3>Generate a Hash</h3>
<p style="margin: 0px">
Text and File inputs are concatenated when generating the SHA1
</p>
<div>
<label for="formInput">Text Input:</label>
<input id="formInput" type="text" placeholder="enter text here" />
</div>
<div>
<label for="fileInput">Upload a file (Does not get sent to a server):</label>
<input id="fileInput" type="file" style="padding-top: 5px"/>
<button type="button" id="clearFile">X</button>
</div>
<hr/>
<div style="margin-top:10px;">
<h3>Configure</h3>
<label for="scaleSelect">Select a scale:</label>
<select id="scaleSelect">
<option value="ionian">Ionian</option>
<option value="dorian">Dorian</option>
<option value="phrygian">Phrygian</option>
<option value="lydian">Lydian</option>
<option value="mixolydian">Mixolydian</option>
<option value="aeolian">Aeolian</option>
<option value="locrian">Locrian</option>
<option value="chromatic">Chromatic</option>
<option value="diminished">Diminished</option>
<option value="wholetone">Whole tone</option>
<option value="minorpenta">Minor Pentatonic</option>
<option value="majorpenta">Major Pentatonic</option>
<option value="mccoy">McCoy Tyner</option>
</select>
<input type="checkbox" checked="true" id="playShortHashCheckbox" />
<label for="playShortHashCheckbox">play the short hash</label>
<div>
tempo:<br/>
<input id="range-input" value="200" type="range" min="60" max="240" />
<span id="range-value">180 BPM</span>
</div>
</div>
<h3>Play</h3>
<button type="submit" style="margin-top: 10px">SHAlala</button>
<button id="stop">stop</button>
<div id="sha"></div>
</form>
<hr style="margin-top:30px;">
<a href="https://github.com/Garrett-Bodley/SHAlala">Source code</a>
</div>
<script src="https://unpkg.com/tone@14.8.49/build/Tone.js"></script>
<script type="module" src="/index.js"></script>
</body>
</html>