-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
187 lines (162 loc) · 9.08 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
<!DOCTYPE html>
<html>
<head>
<title>Modemaus by Keith Rosenberg</title>
<!-- META DATA -->
<meta name="description" content="Learn guitar modes, scales, and chords within those keys visually -
Modemaus is an app that lets you see where all the hotspots are on the guitar fretboard in each mode!" />
<meta name="keywords" content="modes, scales, keys, guitar, fretboard, music" />
<meta name="author" content="Keith Luis Rosenberg, NETPOETICA LLC" />
<meta charset="UTF-8" />
<meta property="og:title" content="Modemaus" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.keithrosenberg.com/modemaus" />
<meta property="og:image" content="http://keithrosenberg.com/modemaus/img/modemaus-logo.jpg" />
<meta property="og:site_name" content="Modemaus" />
<meta property="fb:admins" content="562700224" />
<link rel="stylesheet" href="css/modemaus.css" />
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<!-- Google Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26840997-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>
</head>
<body>
<!-- Facebook Like Button -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=311300418883458";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id = "content">
<div id = "selectorPanel">
<h1 id = "logo"><span>MODEMAUS</span></h1> <!-- CSS should displace this text -->
<form id="selectorForm" class="round">
<div>
<label for="root">Select your root note:</label>
<select name="root" id="root">
<option value="0">C</option>
<option value="1">C#/Db</option>
<option value="2">D</option>
<option value="3">D#/Eb</option>
<option value="4">E</option>
<option value="5">F</option>
<option value="6">F#/Gb</option>
<option value="7">G</option>
<option value="8">G#/Ab</option>
<option value="9">A</option>
<option value="10">A#/Bb</option>
<option value="11">B</option>
</select>
</div>
<div>
<label for="scale">Select your mode/scale:</label>
<select name="scale" id="scale">
<option value = "0">Ionian/Major</option>
<option value = "1">Dorian</option>
<option value = "2">Phrygian</option>
<option value = "3">Lydian</option>
<option value = "4">Mixolydian</option>
<option value = "5">Aeolian/Minor</option>
<option value = "6">Locrian</option>
</select>
</div>
<div>
<input type = "submit" name="submit" id="submit" value = "Find your notes!" />
</div>
</form>
<form id='fmSearch' class="round" action="#">
<div>
<p>Alternatively, you can search for a scale by name:</p>
<label for="txtSearch">Search</label>
<input type="search" id='txtSearch' name='txtSearch' class="round" autocomplete="off" />
<p>Type in the root note and name of the scale to search for it, i.e. "E phrygian"</p>
<input type="submit" name='btnSearch' id='btnSearch' value='Search' />
</div>
<div id="searchHistory" class="round">
<h3>Search History</h3>
</div>
</form>
<!-- Facebook Like button -->
<div class="fb-like-box" data-href="http://www.facebook.com/pages/Modemaus/135665956536360"
data-width="215" data-show-faces="true" data-stream="false" data-header="true"></div>
<!-- Google +1 Button -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div class ="google-plus">
<div class="g-plusone" data-size="standard" data-count="true"></div>
</div>
</div><!-- end SelectorPanel div -->
<div id = "modePanel">
<div id = "contentHeader" class = 'round'>
<h1>Modemaus</h1>
<p>Scales, Modes, and Keys at the touch of your fingertips!</p>
</div>
<div id="fretboardContainer" class="round">
<div id = "legendContainer">
<p>Legend/Color Guide</p>
<ul>
<li class = 'rootOnFretboard round'>Root Note</li>
<li class = 'fourthOnFretboard round'>Fourth Note</li>
<li class = 'fifthOnFretboard round'>Fifth Note</li>
<li class = 'noteOnFretboard round'>Other Notes</li>
</ul>
</div><!-- end legend div -->
<table id = 'fretboard'>
</table>
</div>
<div id = "outputPanel" class="round">
<h2>Notes and Related Chords</h2>
</div>
<h3>Hope you'll find this as useful as I do!</h3>
<p>
It's pretty hard to memorize all of these modes, but it is absolutely
essential for improving your ability to decorate and harmonize other musicians,
to create unique and original progressions, and to be able to express yourself
efficiently. I love the modes, and I wanted to create something that
other aspiring musicians/guitar players might find useful. Instead of turning
pages, reading notes and tabs, it's all collected right here in a very simple
interface! I'd love
to <a href = "mailto:kthrose@modemaus.net">hear some feedback and suggestions!</a>
</p>
<h4>What's new in version 3?</h4>
<p>
So this is version 3! This version is much more cross-browser compatible, significantly faster, and much more user friendly.
I've added a Search feature that lets you search for scales, and save your searches with the ability to return to them
at a later point. I'm very excited about this release! Version 4 is already in the works, and will include some great design and
color palette changes that will make this app much more user-friendly, and in the future this will be coded with support for
people who don't have JavaScript.
</p>
<p>
Some of the ideas I'm planning for in the future are:
</p>
<ul>
<li>To add audio</li>
<li>To add in the theoretical modes like FbM</li>
<li>Improve the user interface!</li>
<li>Add more instruments (piano, bass)</li>
</ul>
<p>
Enjoy! Hope this helps you learn the modes
</p>
</div><!-- end modePanel div -->
</div><!-- end content div -->
<!-- LOAD JAVASCRIPT -->
<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type='text/javascript' src="js/ValueObjects.js"></script>
<script type="text/javascript" src="js/Fretboard.js"></script>
<script type="text/javascript" src="js/Search.js"></script>
<script type="text/javascript" src="js/modemaus.js"></script>
<script type="text/javascript" src="js/Main.js"></script>
</body>
</html>