-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
334 lines (295 loc) · 17.9 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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aCHORDingly - Practice Switching Between Chords</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="icon" href="assets/images/favicon.ico">
<!-- Foundation CSS BEGIN -->
<link rel="stylesheet" href="assets/css/foundation.css">
<link rel="stylesheet" href="assets/css/app.css">
<!-- Foundation CSS END -->
<!-- chord diagrams api BEGIN THIS NEEDS TO STAY UP HERE-->
<script async type="text/javascript" src="https://www.scales-chords.com/api/scales-chords-api.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<!-- jquery BEGIN -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<!-- jquery END -->
<!-- EmailJS for email form submission BEGIN-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
<script type="text/javascript">
(function() {
emailjs.init("user_V6yI0pvrzIhaeUNDHJdZu");
})();
</script>
<!-- EmailJS for email form submission END-->
</head>
<body>
<!-- Navigation -->
<header>
<img src="./assets/images/aCHORDingly.png" />
<div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="responsive-menu"></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar funNavBar" id="responsive-menu">
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text newUser">You must have a Hook Theory account in order to use aCHORDingly</li>
<li data-open="about"><a href="#about">About</a></li>
<li data-open="howitworks"><a href="#howitworks">How It Works</a></li>
<li data-open="contact"><a href="#contact">Contact</a></li>
<li><button class="button newUser" data-open="login-box">Login</button></li>
<li hidden class="has-submenu myActSubmenu">
<a href="#account">My Account</a>
<ul id="userAct" class="submenu menu vertical" data-submenu>
<li><a href="https://www.hooktheory.com/account" target="_blank">Manage</a></li>
<li><a class="logout" href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="hero-text">
</div>
</section>
<!-- chords 1 & 2 -->
<div class="chordSetup">
<div class="systemMsg" id="systemMsg"></div>
<div class="grid-x grid-margin-x grid-padding-x">
<!-- Choose First Chord -->
<div class="large-4 cell">
<label for="chord1">Choose your first Chord</label>
<select name="chord1" id="chord1">
<option disabled selected>Select starting chord</option>
</select>
<!-- Container for Diagrams -->
<div class="card">
<div class="card-divider">
<h4>Chord 1</h4>
</div>
<div class="card-section">
<!-- This is where the diagrams will get appended to, using jQuery -->
<div class="chord1DiagramContainer"></div>
</div>
</div>
</div>
<!-- Suggested Next Chord -->
<div class="large-4 cell">
<label for="chord2">Suggested Chord</label>
<select name="chord2" id="chord2">
<option disabled selected>Select second chord</option>
</select>
<!-- Container for Diagrams -->
<div class="card">
<div class="card-divider">
<h4>Chord 2</h4>
</div>
<div class="card-section">
<!-- This is where the diagrams will get appended to, using jQuery -->
<div class="chord2DiagramContainer"></div>
</div>
</div>
</div>
<!-- Column Three -->
<div class="large-4 cell">
<!--
<div class="userAccount" id="userAccount"></div>
<label for="userAccountMenu">Hook Theory Account</label>
<select name="userAccountMenu" id="userAccountMenu">
</select>
-->
<label for="loadSession">Load a Session</label>
<select name="SavedProgressions" id="HistoryID">
<option disabled selected>--Saved Sessions--</option>
</select>
<!-- Container for Common Chords -->
<div class="card">
<div class="card-divider">
<h4>Most Common Chords after Chord 2</h4>
</div>
<div class="card-section">
<!-- This is where the most common chords will get appended to, using jQuery -->
<ul name="chordListColumn3" class="chordListColumn3" id="chordListColumn3">
</ul>
</div>
</div>
<!-- Container for Session -->
<div class="card">
<div class="card-divider">
<h4>Save Your Session</h4>
</div>
<div class="card-section">
<!-- Display Save Session Window -->
<p><button class="button" data-open="saveYourProgress">Save</button></p>
</div>
</div>
</div>
</div>
</div>
<!-- Save Session -->
<div class="medium reveal" id="saveYourProgress" data-reveal>
<h2>Save Your Session</h2>
<input type="text" id="savedName" name="savedName" placeholder="Type a name for your session">
<button data-close class="button" id="SaveSession">Save Session</button>
<!--
<select name="SavedProgressions" id="HistoryID">
<option disabled selected>--Saved Progressions--</option>
</select>
-->
<p class="modal-close-button"><button class="button" data-close>Close</button></p>
<button class="close-button" data-close aria-label="Close Modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<!-- login -->
<div class="signin reveal" id="login-box" title="Hook Theory Login" data-reveal>
<p>Please sign in to your Hook Theory Account.</p>
<input type="text" placeholder="Enter Username" class="username" id="username">
<p>
<input type="password" class="password" id="password">
<button class="login submit button" data-close id="login">Login</button>
<p>Need an account? <a href="https://www.hooktheory.com/signup" target="_blank">Sign Up</a></p>
<p><a href="https://www.hooktheory.com/user/password" target="_blank">Forgot Password?</a></p>
<a href="https://www.hooktheory.com/user/username" target="_blank">Forgot Username?</a></p>
<button class="close-button" data-close aria-label="Close Modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- About Section/Modal -->
<div class="large reveal" id="about" title="About aCHORDingly" data-reveal>
<h2>About a<b>CHORD</b>ingly</h2>
<p><img src="assets/images/jpg-pics/learnguitar.jpg" /></p>
<p>a<b>CHORD</b>ingly is the brainchild of Cinco Swim Solutions <img src="assets/images/cincoswim.png" width="30" height="50" alt="Cinco Swim" /></p>
<p>As a beginner guitarist, what are the most common chord changes to know? This app will allow the user to learn the most popular chord patterns in music. Useful for beginners who only know two or three chords.</p>
<p>Most of us have had the experience of wanting to learn a few songs.
And we soon see that there are chords and chord diagrams that we need to figure out. It’s easy to get overwhelmed!
a<b>CHORD</b>ingly focuses on an important subset skill: putting two or three chords together. You select a chord and practice that.
</p>
<p>
Our app then suggests a probable second chord. You can then practice putting the two chords together to build fluency.
And perhaps choose a third chord to add or try a new session.
Before long, you will begin to develop the dexterity and aural skills to tackle those songs!
</p>
<p>a<b>CHORD</b>ingly: we know this approach really builds key abilities.</p>
<p>See <a href="#howitworks" data-open="howitworks">How It Works</a> for more details.
And happy <b>CHORD</b>ing!</p>
<p class="modal-close-button"><button class="button" data-close>Close</button></p>
<button class="close-button" data-close aria-label="Close Modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- How It Works Section/Modal -->
<div class="large reveal" id="howitworks" title="How It Works" data-reveal>
<h2>Using a<b>CHORD</b>ingly</h2>
<p>a<b>CHORD</b>ingly helps you learn how to connect chords, an important skillset in learning songs. When you choose Chord1, our application suggests Chord2, as well as some alternative options. The application also returns a list of other probable chords based on your choices.</p>
<p>See <a href="#about" data-open="about">About</a> a<b>CHORD</b>ingly for a brief introduction to its goal and purpose.</p>
<ul class="accordion" data-accordion data-multi-expand="true" data-allow-all-closed="true">
<li class="accordion-item is-active" data-accordion-item>
<!-- Accordion tab title -->
<a href="#" class="accordion-title"><h3>Logging In</h3></a>
<!-- Accordion tab content: it would start in the open state due to using the `is-active` state class. -->
<div class="accordion-content" data-tab-content>
<p>Please note that a<b>CHORD</b>ingly requires you to have a [free] Hook Theory account. Visit <a href="https://www.hooktheory.com/signup" target="_blank">Hook Theory to sign up</a> for a free account. If you signed up for a Hook Theory account using Google, you will need to go to the <a href="https://www.hooktheory.com/account" target="_blank">My Account</a> section in Hook Theory and change your password. You will need to know your password in order to login via a<b>CHORD</b>ingly</p>
<img src="assets/images/HowItWorks/Login.JPG" />
</div>
</li>
<li class="accordion-item" data-accordion-item>
<!-- Accordion tab title -->
<a href="#" class="accordion-title"><h3>Selecting Chords</h3></a>
<!-- Accordion tab content: it would start in the open state due to using the `is-active` state class. -->
<div class="accordion-content" data-tab-content>
<p>Once you are signed in to a<b>CHORD</b>ingly, you are prompted to choose your first Chord from the pulldown menu on the left-hand column of the page. That’s your starting point:</p>
<p><img src="assets/images/HowItWorks/StartingChord.png" /></p>
<div class="callout success">
<p>Of course you’ll want to get practicing right away and master the fingering and listen to the sound of that chord. Great! So, what next?</p>
</div>
<p>Once you have chosen your first Chord, a<b>CHORD</b>ingly automatically searches the musical database to generate a suggested second chord. The pulldown menu also allows you to choose some alternatives and provides a list of probable additional chords based on your choices. Neat!</p>
<p><img src="assets/images/HowItWorks/SuggestedChords.JPG" /></p>
<div class="callout success">
<p>You can click on the green speaker icons below the chord diagrams to hear an audio of the chord!</p>
<p>Also, when you click on any of the "Most Common Chords", a<b>CHORD</b>ingly will prepopulate the second chord and refresh the suggestions.</p>
</div>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<!-- Accordion tab title -->
<a href="#" class="accordion-title"><h3>Saving Sessions</h3></a>
<!-- Accordion tab content: it would start in the open state due to using the `is-active` state class. -->
<div class="accordion-content" data-tab-content>
<p>You can save your Session and practice your selections again another time. And you can continue to develop your vocabulary, dexterity, and aural skills with every session as you expand your knowledge. Before long you’ll be using a<b>CHORD</b>ingly to practice pairs of chords from some of those favourite songs! And you’ll be much closer to finding that musical a<b>CHORD</b> you want. Happy <b>CHORD</b>ing!</p>
<p><img src="assets/images/HowItWorks/SaveSession.JPG" /></p>
</div>
</li>
</ul>
<p class="modal-close-button"><button class="button" data-close>Close</button></p>
<button class="close-button" data-close aria-label="Close Modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- Contact Us Section/Modal -->
<div class="large reveal" id="contact" title="Contact Us" data-reveal>
<h2>Contact Us</h2>
<p>If you would like to contact us please fill the form below</p>
<form onsubmit="ContactFunction()">
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="medium-6 cell">
<label>Name
<input class="contactName" type="text" placeholder="Your full name">
</label>
</div>
<div class="medium-6 cell">
<label>Email Address
<input class="contactEmail" type="email" placeholder="Email Address">
</label>
</div>
<div class="large-12 cell">
<label>
Question / Comment
<textarea class="contactMessage" placeholder="Type your question or comment here"></textarea>
</label>
</div>
<div>
<input data-close type="submit" class="button" value="submit">
</div>
</div>
</div>
</form>
<p class="modal-close-button"><button class="button" data-close>Close</button></p>
<button class="close-button" data-close aria-label="Close Modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- Footer -->
<footer>
<div>
<p><a href="https://github.com/michaelpalumbo/achordingly" target="_blank">Contribute</a> | <a href="#about" data-open="about">About</a> | <a href="#howitworks" data-open="howitworks">How It Works</a> | <a href="#contact" data-open="contact">Contact</a></p>
<img src="assets/images/cincoswim.png" />
© 2022 Cinco Swim Solutions
</div>
</footer>
<!-- our JS file(s) BEGIN -->
<script src="./assets/js/progressions.js"></script>
<!-- our JS file(s) END -->
<!-- chord diagrams api BEGIN -->
<!-- chord iagrams api END -->
<!-- tonalJS for scales/chords lookup tables -->
<script src="https://cdn.jsdelivr.net/npm/@tonaljs/tonal/browser/tonal.min.js"></script>
<!-- Foundation JS BEGIN-->
<script src="assets/js/vendor/jquery.js"></script>
<script src="assets/js/vendor/what-input.js"></script>
<script src="assets/js/vendor/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<!-- Foundation JS END-->
</body>
</html>