-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
169 lines (154 loc) · 5.24 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
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<title>ChordialJS</title>
<link href="http://netdna.bootstrapcdn.com/bootswatch/2.3.2/cerulean/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
select {
width: auto;
}
label {
display: inline-block;
margin-left: 1em;
}
legend {
width: auto;
margin-bottom: auto;
border: none;
}
fieldset {
border: 1px solid #E5E5E5;
display: inline;
padding: 5px;
}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div style='float:right'>
<div class="">
<ul class="nav">
<li><a href="/">laher.net.nz</a></li>
</ul>
</div>
</div>
<a class="brand" href="index.html">ChordialJS</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="samples.html">Samples</a></li>
<li><a href="https://www.github.com/laher/ChordialJS/">Code</a></li>
<li><a href="https://www.github.com/laher/ChordialJS/wiki">Wiki</a></li>
<li><a href="https://www.github.com/laher/ChordialJS/issues">Issues</a></li>
<li><a href="mailto:chordial@laher.net.nz">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- body partial, used for adding pages to layout -->
<div class="container">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="jumbotron subhead">
<!--
<div style='float:right'>
<div>
<div id="B71" data-positions="X21202" data-fingers="-213-4" data-size="3" data-name="B7" style="color:blue">B7</div>
<div id="B72" data-positions="X21202" data-fingers="-213-4" data-size="2" data-name="B7" style="color:green">B7</div>
<div id="B73" data-positions="X21202" data-fingers="-213-4" data-size="1" data-name="B7" style="color:purple">B7</div>
</div>
</div>
-->
<h1>Welcome to Chordial</h1>
<p>Make some chord progressions, transpose them, mix them up ... for Guitar, Ukulele (so far)</p>
<p>Embed these chords in any html5 website. Or not!</p>
<p><a href='samples.html' class="btn btn-primary btn-large">Try it »</a></p>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span4">
<h2>Samples</h2>
<p>See some examples of Chordial in action</p>
<p><a href='samples.html' class="btn" href="#">Let's Go »</a></p>
</div>
<div class="span4">
<h2>Quickie</h2>
<p>Have a quick "I IV V7" progression for the guitar</p>
<div id='progression1'></div>
<div style='clear:both'></div>
<p>
<label for="key">Key:</label>
<select id="key" onchange="change_key();">
<option selected="selected">C</option>
<option>C#</option>
<option>D</option>
<option>D#</option>
<option>E</option>
<option>F</option>
<option>F#</option>
<option>G</option>
<option>G#</option>
<option>A</option>
<option>A#</option>
<option>B</option>
</select>
</p>
</div>
<div class="span4">
<h2>Code</h2>
<p>This JavaScript project is free to use. Fork me on GitHub!</p>
<p><a class="btn" href="https://www.github.com/laher/ChordialJS/">View Details »</a></p>
</div>
</div>
<script type="text/javascript">//<![CDATA[
window.onload= function(){
var key='G';
do_chords(key);
//ChordialJS.renderElement(document.getElementById('B71'));
//ChordialJS.renderElement(document.getElementById('B72'));
//ChordialJS.renderElement(document.getElementById('B73'));
};
var do_chords= function(key) {
var size= 2,lefty=false;
var scale= ChordialJS.makeScale('major',key);
var el= document.getElementById('progression1');
var children= el.childNodes;
ChordialJS.renderChords(el, [
{ note: scale[0], size: size, lefty: lefty },
{ note: scale[3], size: size, lefty: lefty },
{ note: scale[4], size: size, lefty: lefty, family: 'seven' },
]);
};
var change_key= function(){
var key= document.getElementById('key').value;
do_chords(key);
};
//]]>
</script>
</div>
<hr>
<div class="container">
<footer>
<p>© <a href='http://laher.github.com/'>Am Laher 2012</a></p>
</footer>
</div> <!-- /container -->
<!-- twitter bootstrap requires jquery. Otherwise jquery is unused in this site -->
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="dist/Chordial-0.0.14.js"></script>
</body>
</html>