-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
489 lines (396 loc) · 25.1 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
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-126297236-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-126297236-1');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Materialize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Swiper CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/css/swiper.css">
<!-- Google Font Embed -->
<link type="text/css" href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<!-- Google Fonts Material Icons -->
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Metronome Custom CSS -->
<link type="text/css" rel="stylesheet" href="./assets/css/min/metro.min.css">
<!--Firebase-->
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.4.1/firebaseui.css" />
<!-- Main Custom CSS -->
<link type="text/css" rel="stylesheet" href="./assets/css/min/styles.min.css">
<title>A1 Guitar Learner - Guitar Learning Companion App</title>
</head>
<!-- Start UI -->
<body>
<!-- Begin Main Nav Bar -->
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<div class="container">
<a href="#home-tab" id="a-one-logo" class="brand-logo left"><img width="50px" src="./assets/images/a1-icon.png"></a>
<ul class="right">
<li><a id="user-button" class="dropdown-trigger" data-target="user-dropdown"><i class="material-icons">person</i></a></li>
<li><a id="content-button" class="dropdown-trigger" data-target="dropdown1"><i class="material-icons">menu</i></a></li>
<li><a id="home-button" href="#home-tab"><i class="material-icons">home</i></a></li>
</ul>
<!-- User Dropdown Content UL -->
<div class="col s12">
<ul id="user-dropdown" class="dropdown-content left">
<li><a id="user"></a></li>
<li><a id="favorites-dropdown"class="white-text" href="#favorites-tab">Favorites</a></li>
<li><a href="" id="edit-profile" class="white-text">Edit Profile</a></li>
<li><a href="" id="invite-members" class="white-text">Invite Members</a></li>
<li><a href="" id="logout" class="white-text">Logout</a></li>
</ul>
</div>
<!-- End User Dropdown Dropdown UL -->
<!-- Nav Content Dropdown Content UL -->
<div class="col s12">
<ul id="dropdown1" class="dropdown-content left">
<li><a id="tab-dropdown"class="white-text" href="#tabs-tab">Tabs</a></li>
<li><a id="videos-dropdown"class="white-text" href="#video-tab">Videos</a></li>
<li><a id="tuner-dropdown"class="white-text" href="#tuner-tab">Tuner</a></li>
<li><a id="metronome-dropdown"class="white-text" href="#metronome-tab">Metronome</a></li>
</ul>
</div>
<!-- End Nav Conetnt Dropdown UL -->
</div>
</div>
</nav>
</div>
<!-- End Main Nav Bar -->
<!--Begin Firebase UI container div-->
<div class="container">
<div a href="#" class="col s6 offset-3 z-depth-5" id="firebaseui-auth-container"></div>
</div>
<!--End Firebase UI container div-->
<!-- Begin Main Container -->
<div id="main-container" class="container">
<!-- Begin Tabbed Feature Layout -->
<div class="row user-tabs">
<!-- Begin Tab Navigation -->
<div class="col s12">
<ul class="tabs" id="tabs">
<li id="tab-for-tabs" class="tab col m3 l3 s6"><a href="#tabs-tab">Tabs</a></li>
<li id="tab-for-play" class="tab col m3 l3 s6"><a href="#videos-tab">Videos</a></li>
<li id="tab-for-tuner" class="tab col m3 l3 s6" ><a href="#tuner-tab">Tuner</a></li>
<li id="tab-for-metronome" class="tab col m3 l3 s6"><a href="#metronome-tab">Metronome</a></li>
</ul>
</div>
<!-- End Tab Navigation -->
<!-- Begin Tabs Tab Content -->
<div id="tabs-tab" class="col s12">
<div class="row">
<div class="col s12">
<div class="row">
<form id="tab-form">
<div class="input-field col s12">
<i class="material-icons prefix">search</i>
<input type="text" id="tab-search" class="autocomplete">
<label for="tab-search">Search Tabs & Chords by Artist</label>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div id="tabs-view" class="col s12 z-depth-5">
<table id="artist-search" class="display">
<thead>
<tr>
<th>Song <i class="artist-sort-icon small material-icons">sort</i></th>
<th>Tabs <i class="artist-sort-icon small material-icons">sort</i></th>
<th>Chords <i class="artist-sort-icon small material-icons">sort</i></th>
<th>Favs</th>
</tr>
</thead>
<tbody id="tabs-body"></tbody>
</table>
</div>
</div>
</div>
<!-- End Tabs Tab Content -->
<!-- Begin Videos Tab Content -->
<div id="videos-tab" class="col s12">
<div class="row">
<div class="col s12">
<div class="row">
<form id="yt-form">
<div class="input-field col s12">
<i class="material-icons prefix">search</i>
<input type="text" id="youtube-search" class="autocomplete">
<label for="youtube-search">Search for Lesson Videos</label>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div id="videos-tab-view" class="col s12 z-depth-5">
<div id="button-row1" class="row">
<button id="prev-btn" class="z-depth-5 blue darken-3 btn-large col s2 left"><i id="prev-icon" class="material-icons">trending_flat</i></button>
<button id="next-btn" class="z-depth-5 blue darken-3 btn-large col s2 right"><i class="material-icons">trending_flat</i></button>
</div>
<div id="video-row" class="row">
<div id="video-view" class="col s12"></div>
</div>
<div id="button-row2" class="row">
<button id="prev-btn2" class="z-depth-5 blue darken-3 btn-large col s2 left"><i id="prev-icon" class="material-icons">trending_flat</i></button>
<button id="next-btn2" class="z-depth-5 blue darken-3 btn-large col s2 right"><i class="material-icons">trending_flat</i></button>
</div>
</div>
</div>
</div>
<!-- End Videos Tab Content -->
<!-- Begin Tuner Tab Content -->
<div id="tuner-tab" class="col s12 center-align z-depth-5">
<div id="detector" class="vague">
<div class="pitch"><span id="pitch">--</span>Hz</div>
<div class="note"><span id="note">--</span></div>
<canvas id="output" width=300 height=42></canvas>
<div id="detune"><span id="detune_amt">--</span><span id="flat">cents ♭</span><span id="sharp">cents ♯</span></div>
</div>
<div id="tuner-btns" class="row">
<button id="tuner-btn" class="col s12 btn-large" onclick="toggleLiveInput()">Enable Microphone</button>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-35593052-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<br>
<h5 class="white-text">Standard tuning is E-A-D-G-B-E.<br>If you see a consistent <span class="green-text">green</span> letter, the string is in <span class="green-text">tune.</span><br><br>
See alternate guitar tunings <a target="_blank" href="https://en.wikipedia.org/wiki/List_of_guitar_tunings">here.</a>
</h5><br>
</div>
<!-- End Tuner Content -->
<!-- Begin Metronome Tab -->
<div id="metronome-tab" class="col s12 z-depth-5">
<section id="metro-container" class="metronome-container">
<div class="counter"></div>
<i class="fa fa-cog options-btn"></i>
<div id="control-container" class="controls">
<label>BPM:
<i class="fa fa-minus bpm-minus"></i>
<input id="bpm-area" type="text" value="60" class="bpm-input" />
<i class="fa fa-plus bpm-plus"></i>
</label>
<label>Beat: <input id="beat-area" type="text" value="4" class="ts-top"/></label>
<div id="timer-checkbox">
<input type="checkbox" id="timer-check" />
<label for="timer-check"></label>
Timer: <input id="timer-area" type="text" value="60" class="timer" />
</div>
<button id="tap-button" class="tap-btn">Tap</button>
<button id="play-button" class="play-btn">Play</button>
</div>
<div class="options">
<i class="fa fa-caret-down up"></i>
<label>Off Beat Pitch: <input type="range" min="0" max="500" value="200" class="beat-range" /></label>
<label>Accent Pitch: <input type="range" min="0" max="500" value="380" class="accent-range" /></label>
</div>
</section>
</div>
<!-- End Metronome Tab -->
<!-- Start Favorites Section Content-->
<div class="col s12 z-depth-5" id="favorites-tab">
<div class="col s12 m12 l6">
<h3 class="white-text center-align">Saved Tabs + Chords</h3>
<table id="artist-fav" class="display">
<thead>
<tr>
<th>Song</th>
<th>Tabs + Chords</th>
<th>Delete</th>
</tr>
</thead>
<tbody id="favorite-tabs"></tbody>
</table>
</div>
<div class="col col s12 m12 l6" id="favorite-vids">
<h3 class="white-text center-align">Saved Videos</h3>
<div id="fav-video-view" class="col s12"></div>
</div>
</div>
<!--End Favorites Section -->
</div>
<!-- End Tabbed Feature Layout -->
<!-- Begin About Us Page Content -->
<div id="about-tab" class="col s12">
<div class="row">
<div id="about-contain" class="col s10 offset-s1 z-depth-5">
<h1 class="about-head">Panda Warriors Dev Group</h1>
<p class="about-names"><a target="blank" href="https://github.com/jamesschlader">Jim Schlader - The Sensei <img width="30px" src="./assets/images/github-hover.png" alt="Jim Schlader Github"></a></p>
<p class="about-names"><a target="blank" href="https://github.com/bishopcanno">Eric Bishop - The Samurai <img width="30px" src="./assets/images/github-hover.png" alt="Eric Bishop Github"></a></p>
<p class="about-names"><a target="blank" href="https://github.com/bryan-lee-git">Bryan Lee - The Ninja <img width="30px" src="./assets/images/github-hover.png" alt="Bryan Lee Github"></a></p>
<p class="about-names"><a target="blank" href="https://github.com/Skeeter404">Bronson Bird - The Shaolin Monk <img width="30px" src="./assets/images/github-hover.png" alt="Bronson Bird Github"></a></p>
<br><br>
<div class="col s12 divider grey darken-2"></div>
<br>
<h3 class="about-head">The "Why" Behind A1 Guitar Learner</h3>
<p class="about-para">Let's start with getting the name out of the way... We named ourselves "The Panda Warriors", totally off of a whim. We wanted to have fun with this project and we seemed to accomplish exactly that.</p>
<p class="about-para">The A1 in "A1 Guitar Learner" stands for "All-in-one". We wanted to create one application that a user could go to in order to find everything that they need to begin playing the guitar!</p>
<p class="about-para">The four of us started this project for a Coding and Web Development course that we were taking through the University of Utah. It has been a really fun learning experience and a great way to immerse ourselves into the world of Web Development.</p>
<p class="about-para">One thing that we all seemed to have in common was our love of music and our innate desire to help others find their love for it as well. We decided to build off of that and create something that was easy to use, fun, and useful on the go. Hopefully this helps tons of people across the globe begin their journey of learning how to play the guitar!</p>
</div>
</div>
</div>
<!--End About Us Page-->
<!--Begin Credit Page-->
<div id="credit-tab" class="col s12">
<div class="row">
<div id="credit-contain" class="col s10 offset-s1 z-depth-5">
<h1 class="credit-head">Credit Where Credit Is Due!</h1>
<p class="credit-para">We would like to extend credit to the other great developers that built some of the amazing things that we implemented into our application.</p>
<div class="col s12 divider grey darken-2"></div><br><br>
<div class="row">
<div class="col s12 m6 l4">
<p class="credit-para"><img width="30px" src="./assets/images/songsterr-icon.png" alt="Songsterr API icon"><a target="_blank" href="https://www.songsterr.com/a/wa/api"> Songsterr API </a></p>
</div>
<div class="col s12 m6 l4">
<p class="credit-para"><img width="30px" src="./assets/images/yt-icon.png" alt="YouTube API icon"><a target="_blank" href="https://developers.google.com/youtube/v3/docs/"> Youtube Data API </a></p>
</div>
<div class="col s12 m6 l4">
<p class="credit-para"><img width="30px" src="./assets/images/datatablesjs-icon.png" alt="DataTables.js icon"><a target="_blank" href="https://datatables.net/"> DataTables.js </a></p>
</div>
<div class="col s12 m6 l4">
<p class="credit-para"><img width="30px" src="./assets/images/materialize-logo.png" alt="Google Materialize API icon"><a target="_blank" href="https://materializecss.com/"> Google Materialize </a></p>
</div>
<div class="col s12 m6 l4">
<p class="credit-para"><img width="30px" src="./assets/images/material-design-icon.png" alt="Google Material Design Icons"><a target="_blank" href="https://material.io/tools/icons/?icon=trending_flat&style=baseline"> Material Design </a></p>
</div>
<div class="col s12 m6 l4">
<p class="credit-para"><img width="30px" src="./assets/images/firebase-icon.png" alt="Google Firebase"><a target="_blank" href="https://firebase.google.com/"> Google Firebase </a></p>
</div>
<div class="col s12 m6 l6">
<p class="credit-para"><img width="30px" src="./assets/images/google-analytics.png" alt="Google Analytics"><a target="_blank" href="http://analytics.google.com"> Google Analytics </a></p>
</div>
<div class="col s12 m6 l6">
<p class="credit-para"><img width="30px" src="./assets/images/swiper-icon.png" alt="Swiper JS"><a target="_blank" href="http://idangero.us/swiper/"> Swiper by iDangero.us </a></p>
</div>
</div>
<div class="col s12 divider grey darken-2"></div>
<br>
<p class="credit-para">
<a target="_blank" href="https://codepen.io/ganderzz/pen/Ezlfu">Metronome by Ezlfu</a> | <a target="_blank" href="https://github.com/cwilso/pitchdetect">Pitch Detect by cwilso</a></p>
</div>
</div>
</div>
<!--End Credit Page-->
<!-- Begin Landing Page Header -->
<div id="home-tab">
<section id="header">
<div class="row">
<div class="col s12">
<h1 class="center-align" id="welcome-header">A1 Guitar Learner</h1>
<h4 class="white-text head-four center-align">Your guitar learning companion app.</h4>
</div>
</div>
</section>
<!-- End Landing Page Header -->
<!-- Begin Landing Page Feature Carousel -->
<div class="container">
<div class="row">
<div class="col s10 offset-s1 divider grey darken-2"></div>
<div class="col s10 offset-s1">
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<h1 class="head-one blue-text darken-5">Guitar Tabs</h1>
<h4 class="white-text head-four">Learn songs by your<br>favorite musicians.</h4>
<a href="#tabs-tab" id="tab-carousel-btn" class="btn-floating btn-large pulse" id="tab-icon"><i class="large material-icons">format_align_justify</i></a>
<br/>
<br/>
</div>
<div class="swiper-slide">
<h1 class="head-one blue-text darken-5">Lesson Videos</h1>
<h4 class="white-text head-four">Learn songs by<br>watching others play.</h4>
<a href="#videos-tab" id="videos-carousel-btn" class="btn-floating btn-large pulse" id="play-icon"><i class="large material-icons">play_circle_filled</i></a>
<br/>
<br/>
</div>
<div class="swiper-slide">
<h1 class="head-one blue-text darken-5">Guitar Tuner</h1>
<h4 class="white-text head-four">Don't be a novice.<br>Tune your instrument.</h4>
<a href="#tuner-tab" id="tuner-carousel-btn" class="btn-floating btn-large pulse" id="tuner-icon"><i class="large material-icons">music_note</i></a>
<br/>
<br/>
</div>
<div class="swiper-slide">
<h1 class="head-one blue-text darken-5">Metronome</h1>
<h4 class="white-text head-four">A metronome to keep<Br>your rhythm.</h4>
<a href="#metronome-tab" id="metronome-carousel-btn" class="btn-floating btn-large pulse" id="metronome-icon"><i class="large material-icons">graphic_eq</i></a>
<br/>
<br/>
</div>
...
</div>
<br><br>
<!-- Pagination/Indicators -->
<div class="swiper-pagination"></div>
<!-- Navigation buttons -->
<div id="swiper-arrows">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Landing Feature Carousel -->
</div>
<!-- End Main Container -->
<!-- Begin Footer -->
<footer id="footer" class="col l12 s12 m12 center-align">
Panda Warriors Development Group © 2018<br>
<a id="about-dropdown" href="#about-tab">About</a> | <a id="credit-dropdown" href="#credit-tab">Credits</a>
</footer>
<!-- End Footer -->
<!-- All Scripts -->
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/5.5.0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/firebaseui/3.4.1/firebaseui.js"></script>
<!-- Guitar Chords -->
<script async type="text/javascript" src="https://www.scales-chords.com/api/scales-chords-api.js"></script>
<!-- Example of easily embedded chord diagram: <ins class="scales_chords_api" chord="D#m(maj9)"></ins> -->
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<!-- Added this angular js file for canvas functionality on iPhone -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<!-- fitText.js for making font-sizes flexible -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext.min.js"></script>
<!-- DataTables.js -->
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<!-- Materialize -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Pitch Detect Tuner -->
<script src="./assets/pitch-detect/js/pitchdetect.js"></script>
<!-- Swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/js/swiper.js"></script>
<!-- YouTube API -->
<script src="./assets/js/min/yt.min.js"></script>
<!-- Songsterr API -->
<script src="./assets/js/min/songsterr.min.js"></script>
<!-- Metronome -->
<script src="./assets/js/min/metro.min.js"></script>
<!-- Main App -->
<script src="./assets/js/min/app.min.js"></script>
</body>
<!-- End UI -->
</html>