-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
159 lines (135 loc) · 10.2 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; URL='http://playsongnotes.com/fretmonster'" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<!-- Page Title -->
<title>FretMonster</title>
<!-- Stylesheets -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,800italic,400,800,700,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/i.css">
<!-- Javascript -->
<script src="javascript/jquery.js"></script>
<script src="javascript/main.js"></script>
<script src="javascript/interaction.js"></script>
</head>
<body>
<div class="container">
<h1 class="h1 caps center fw-black italic mtxl mbs">FretMonster!</h1>
<p class="small center mbxl">Created by <a href="http://twitter.com/davidpots">@davidpots</a>. In progress.</p>
<p class="h3 center"><span class="mobile-block">I'm hungry for a</span> <span class="mobile-block"><a class="inline-block pam mvm rounded mhs orange border js-summonOverlay js-summonScalePicker" href="">penatonic minor</a></span> <span class="mobile-block">scale in the key of</span> <span class="mobile-block"><a class="inline-block mvm pvm phl rounded mhs orange border js-summonOverlay js-summonKeyPicker" href="">G</a></span></p>
<p class="center small js-instrumentSelector">
<a data-instrument="guitar" class="phs pvxs inline-block active--toggle" href="">guitar</a> | <a data-instrument="ukulele" class="phs pvxs inline-block" href="">ukulele</a> | <a data-instrument="bass" class="phs pvxs inline-block" href="">bass</a> | <a data-instrument="mandolin" class="phs pvxs inline-block" href="">mandolin</a>
</p>
<p class="center small">
<a class="phs pvxs inline-block showIntervals active--toggle" href="">show intervals</a> | <a class="phs pvxs inline-block showNotes" href="">show notes</a>
</p>
<p class="center small">
<a class="phs pvxs inline-block pas highlightRoot active--toggle" href="#">highlight root</a> | <a class="phs pvxs inline-block highlightTriads" href="">highlight triads</a>
</p>
</div>
<div class="js-scalePicker has-scrollbars pal js-overlay bg-gray-light fixed js-fixed-center" style="display: none; overflow-y: scroll; z-index: 10; max-height: 400px; left: 50%; margin-left: -150px; box-sizing: border-box; top: 10%;">
<div class="clearfix">
<h3 class="left mtn">Pick a scale:</h3>
<a class="right js-closeOverlay" href="#">close</a>
</div>
<ul class="list-reset js-scaleSelector">
<li class="h3"><a class="block rounded pam" data-scale-name="major" href="#">Major</a></li>
<li class="h3"><a class="block rounded pam" data-scale-name="pentatonic_major" href="#">Pentatonic (major)</a></li>
<li class="h3"><a class="block rounded pam" data-scale-name="pentatonic_minor" href="#">Pentatonic (minor)</a></li>
<li class="h3"><a class="block rounded pam" data-scale-name="blues_major" href="#">Blues (major)</a></li>
<li class="h3"><a class="block rounded pam" data-scale-name="blues_minor" href="#">Blues (minor)</a></li>
<li class="h3"><a class="block rounded pam" data-scale-name="minor_melodic" href="#">Minor (melodic)</a></li>
<li class="h3"><a class="block rounded pam" data-scale-name="minor_harmonic" href="#">Minor (harmonic)</a></li>
<li class="h3"><a class="block rounded pam" data-scale-name="minor_natural" href="#">Minor (natural)</a></li>
<li class="h3"><a class="block rounded pam" data-scale-name="ionian_mode" href="#">Ionian mode</a></li>
<li class="h3"><a class="block rounded pam" data-scale-name="dorian_mode" href="#">Dorian mode</a></li>
<li class="h3"><a class="block rounded pam" data-scale-name="phrygian_mode" href="#">Phyrgian mode</a></li>
<li class="h3"><a class="block rounded pam" data-scale-name="lydian_mode" href="#">Lydian mode</a></li>
<li class="h3"><a class="block rounded pam" data-scale-name="mixolydian_mode" href="#">Mixolydian mode</a></li>
<li class="h3"><a class="block rounded pam" data-scale-name="aeolian_mode" href="#">Aeolian mode</a></li>
<li class="h3"><a class="block rounded pam" data-scale-name="locrian_mode" href="#">Locrian mode</a></li>
</ul>
</div>
<div class="js-keyPicker has-scrollbars pal js-overlay bg-gray-light fixed js-fixed-center" style="display: none; overflow-y: scroll; z-index: 10; max-height: 400px; left: 50%; margin-left: -150px; box-sizing: border-box; top: 10%;">
<div class="clearfix">
<h3 class="mtn left">Pick a key:</h3>
<a class="right js-closeOverlay" href="#">close</a>
</div>
<ul class="list-reset js-keySelector">
<li class="h3"><a class="block rounded pam" data-key-name="A" href="#">A</a></li>
<li class="h3"><a class="block rounded pam" data-key-name="A#" href="#">A#</a></li>
<li class="h3"><a class="block rounded pam" data-key-name="B" href="#">B</a></li>
<li class="h3"><a class="block rounded pam" data-key-name="C" href="#">C</a></li>
<li class="h3"><a class="block rounded pam" data-key-name="C#" href="#">C#</a></li>
<li class="h3"><a class="block rounded pam" data-key-name="D" href="#">D</a></li>
<li class="h3"><a class="block rounded pam" data-key-name="D#" href="#">D#</a></li>
<li class="h3"><a class="block rounded pam" data-key-name="E" href="#">E</a></li>
<li class="h3"><a class="block rounded pam" data-key-name="F" href="#">F</a></li>
<li class="h3"><a class="block rounded pam" data-key-name="F#" href="#">F#</a></li>
<li class="h3"><a class="block rounded pam" data-key-name="G" href="#">G</a></li>
<li class="h3"><a class="block rounded pam" data-key-name="G#" href="#">G#</a></li>
</ul>
</div>
<div class="fretboard_backdrop">
<div class="container--full phn">
<div class="fretboard_wrapper"></div>
</div>
</div>
<div class="container--col-10 mtxl">
<h4 class="mtxxl">About this project</h4>
<p>Still pretty early in development, but I want to share progress. Test it out by clicking around above. So far, this is demonstrating the fundamental functionality that this project will use. Next on the list is some proper attention paid to visual design, cleaning up the code, making it work beautifully across all devices, and other tidbits relating to the overall product experience.</p>
<p>You might be interested in my original <a href="http://davidpots.com/blog/guitar-fretboard-ascii-svg/">fretboard project</a>, which tackles this same scale problem from the POV of chords. I'll probably get back to this approach one day, though I'd keep it as chord-only (whereas FretMonster will likely be scale-only).
<p>Finally, you should also check out <a href="http://songnotes.cc">Songnotes</a>, my personalized collection of hand-crafted guitar tabs/chords/lyrics/notes.</p>
<h4 class="mtxl">Change Log</h4>
<p>Dec 4, 2018</p>
<ul>
<li>Added major and minor blues scales</li>
</ul>
<p>August 28, 2016</p>
<ul>
<li>Added mandolin!</li>
</ul>
<p>July 31, 2014</p>
<ul>
<li>Adds support for ukulele and bass! As part of this, some refactoring of the Javascript was done which allows me to add more instruments (and tunings) as I wish. Instuments are <a href="https://gist.github.com/davidpots/fe9d5eae4f86970bda55">stored in JSON format</a>, where each instrument has a unique number of strings, string notes, frets-to-label (i.e., the dots on the fretboard), etc. This keeps the fretboard-generating logic properly instrument agnostic, which it definitely was not before.</li>
<li>Semi-tweaking of the scale + key changer UI. I didn't like it before and am not crazy about the current solution/fix, but it's a small improvement. Soon on the list is for me to tweak this UI/interaction, as well as cleaning up some of the CSS.</li>
</ul>
<p>July 24, 2014</p>
<ul>
<li>Dropdowns for key + scale selector! Still crude-ish, but a start.</li>
<li>Big CSS overhaul. Using a variant of the wonderful BASSCSS which I'm still implementing in places, but it's mostly there. Nasty inline styles are gone. Styling from here on out will be much easier and more organized.</li>
<li>A bit more device-size-aware / responsive /etc.</li>
<li>Brings in next wave of the design polish, made easier by leveraging SCSS variables a bit.</li>
<li>Adds a bunch of new scales -- the modes, mainly</li>
<li>Adds initial logic to check for interval exceptions, mainly that of b5 actually needing to be a 4# (as in the Lydian scale).
</ul>
<p>July 18, 2014</p>
<ul>
<li>Brought in some color. Needs polish still, but better than it used to be.</li>
<li>"Hightlight triads" is no longer an on/off toggle. Now, a user switches between <em>either</em> "highlight root" or "hightlight triads".</li>
<li>Added a sexy CSS animation, used on root notes. Thanks <a href="http://twitter.com/jxnblk">Jackson</a>.</li>
<li>Fixes a bug where interval/notes wouldn't persist if you changed key or scale.</li>
</ul>
<p>July 7, 2014</p>
<ul>
<li>If you change between "show notes" and "show intervals", your choice now persists if you change either the scale or the key. Same thing for the "show triads" option.</li>
</ul>
<p>July 3, 2014</p>
<ul>
<li>Implemented much more cleaned up & flexible HTML structure for the fretboard.</li>
<li>Implemented horizontal scrolling if your screen isn't wide enough for the fretboard.</li>
<li>Big cleanup and organization of the Javascript.</li>
</ul>
<p>June 29, 2014</p>
<ul>
<li>Got the JS-powered scale changing engine working, hurrah!</li>
</ul>
<hr />
<p><a href="https://github.com/davidpots/fretmonster">View this project on GitHub</a> | <a href="http://twitter.com/davidpots">Follow me on Twitter</a></p>
</div>
</div>
</body>
</html>