-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
166 lines (146 loc) · 8.87 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
<!DOCTYPE HTML>
<html>
<head>
<link href="css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen, projection" />
<!-- External libs -->
<!-- <script type="text/javascript" src="js/ext/jquery-1.8.3.js"></script>-->
<script type="text/javascript" src="js/ext/jquery-1.9.1.min.js"></script>
<!--<script type="text/javascript" src="js/ext/jquery.ba-resize.min.js"></script> -->
<script type="text/javascript" src="js/ext/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="js/ext/jquery.autosize-min.js"></script>
<script type="text/javascript" src="js/ext/raphael.js"></script>
<script type="text/javascript" src="js/ext/Blob.js"></script>
<script type="text/javascript" src="js/ext/FileSaver.min.js"></script>
<!-- KGT MAIN -->
<script type="text/javascript" src="js/kords.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/tabsdata.js"></script>
<!-- KGT EDITOR -->
<script type="text/javascript" src="js/editor/kords.tabseditor.js"></script>
<script type="text/javascript" src="js/editor/tabsinstance.js"></script>
<script type="text/javascript" src="js/editor/keys.js"></script>
<script type="text/javascript" src="js/editor/tabeditor.js"></script>
<script type="text/javascript" src="js/editor/tabsection.js"></script>
<script type="text/javascript" src="js/editor/textsection.js"></script>
<script type="text/javascript" src="js/editor/youtubesection.js"></script>
<script type="text/javascript" src="js/editor/tabparser.js"></script>
<!-- KGT PAINTER -->
<script type="text/javascript" src="js/painter/kords.tabspainter.js"></script>
<script type="text/javascript" src="js/painter/tabcanvaspainter.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<header>
<h3 id="header-title" class="title" style="text-align:left">GUITK <span style="color: #EE7E2A;">editor</span></h3>
<div class="tabs">
<a data-tab="pretty" class="tab active">Pretty</a>
<a data-tab="ascii" class="tab">ASCII</a>
<a data-tab="editor" class="tab">Editor</a>
<a data-tab="file" class="tab">File</a>
</div>
</header>
<section id="editor" class="nodisplay">
<div id="songdata">
<span>Song:</span> <input type="text" id="song"><br/>
<span>Artist:</span> <input type="text" id="artist"><br/>
<span>Transcribed by:</span> <input type="text" id="transcriber"><br/>
</div>
<div id="text-editor-base">
<div id="block" class="menu tabsection tabs" style="display:none">
<div id="tabblock" class="" width="100%"></div>
</div>
<div id="block" class="menu tabsection youtube" style="display:none">
<div class="youtube_edit_data">
Youtube URL: <input class="youtube_url" type="text" size="50"/><a href="#" class="loadyoutube button color mini">load</a>
<input class="youtube_id" type="hidden" style="background-color:#ff9"/>
</div>
<span class="youtube_title" style="display:none"></span>
</div>
<div id="block" class="menu tabsection text" style="display:none">
<textarea class="tabtext" cols="80" rows="2" style="border:none"></textarea>
</div>
<div id="tabs-context-menu" class="tabs-editor-tools" style="display:none">
<a id="insert-chords" class="button mini" href="#">Insert chord</a>
<select id="chords"></select>
<a class="button mini modifier" data-modifier="s" href="#" title="Slide"><img src="images/s.png"/></a>
<a class="button mini modifier" data-modifier="^" href="#" title="HammerOf"><img src="images/h.png"/></a>
<a class="button mini modifier" data-modifier="v" href="#" title="Vibrato"><img src="images/v.png"/></a>
<!-- <a class="button mini modifier" data-modifier="b" href="#" title="Bend"><img src="images/b.png"/></a> -->
<div class="checkgroup">
<a class="button mini colmodifier" data-modifier="accent" href="#" title="Accent"><img src="images/accent.png"/></a>
<a class="button mini colmodifier" data-modifier="golpe" href="#" title="Golpe"><img src="images/golpe.png"/></a>
</div>
<a id="open-tabtext" class="button mini" data-modifier="text" style="padding:2px" href="#" title="Add text"><img src="images/text.png"/></a>
<div id="barlines" class="checkgroup">
<a class="buttoncheck colmodifier" data-modifier="up_arrow" href="#" title="Golpe"><img src="images/up_arrow.png"/></a>
<a class="buttoncheck colmodifier" data-modifier="down_arrow" href="#" title="Golpe"><img src="images/down_arrow.png"/></a>
<a class="buttoncheck colmodifier" data-modifier="rasgueo" href="#" title="Golpe"><img src="images/rasgueo.png"/></a>
<a class="buttoncheck colmodifier" data-modifier="alzapua" href="#" title="Alzapua"><img src="images/alzapua.png"/></a>
<a class="buttoncheck colmodifier" data-modifier="rasgueo3" href="#" title="Rasgueo AII"><img src="images/rasgueo3.png"/></a>
<a class="buttoncheck colmodifier" data-modifier="rasgueo4" href="#" title="Rasgueo AMII"><img src="images/rasgueo4.png"/></a>
</div>
<div id="barlines" class="checkgroup">
<a class="buttoncheck colmodifier" data-modifier="barline_simple" href="#" title="Barline single"><img src="images/barline_simple.png"/></a>
<!-- <a class="buttoncheck colmodifier" data-modifier="barline_double" href="#" title="Barline double"><img src="images/barline_double.png"/></a>
<a class="buttoncheck colmodifier" data-modifier="barline_repeat_left" href="#" title="Barline repeat left"><img src="images/barline_repeat_left.png"/></a>
<a class="buttoncheck colmodifier" data-modifier="barline_repeat_right" href="#" title="Barline repeat right"><img src="images/barline_repeat_right.png"/></a>-->
</div>
<div id="lfingers" class="checkgroup">
<a class="buttoncheck" data-modifier="lfinger1" href="#" title="Finger 1 (Alt+1)"><img src="images/1.png"/></a>
<a class="buttoncheck" data-modifier="lfinger2" href="#" title="Finger 2 (Alt+2)"><img src="images/2.png"/></a>
<a class="buttoncheck" data-modifier="lfinger3" href="#" title="Finger 3 (Alt+3)"><img src="images/3.png"/></a>
<a class="buttoncheck" data-modifier="lfinger4" href="#" title="Finger 4 (Alt+4)"><img src="images/4.png"/></a>
</div>
<div id="rfingers" class="checkgroup">
<a class="buttoncheck colmodifier" data-modifier="p" href="#" title="Finger (p)"><img src="images/p.png"/></a>
<a class="buttoncheck colmodifier" data-modifier="i" href="#" title="Finger (i)"><img src="images/i.png"/></a>
<a class="buttoncheck colmodifier" data-modifier="m" href="#" title="Finger (m)"><img src="images/m.png"/></a>
<a class="buttoncheck colmodifier" data-modifier="a" href="#" title="Finger (a)"><img src="images/a.png"/></a>
</div>
</div>
<div id="empty-context-menu" class="tabs-editor-context-menu" style="text-align:right">
<a id="add_text" class="button text" href="#">Add Text</a>
<a id="add_tabs" class="button text" href="#">Add Tabs</a>
<a id="add_youtube" class="button text" href="#">Add Youtube</a>
<a id ="remove_section" style="display:none" class="button text" href="#">Remove this section</a>
</div>
<div id="text-editor" class="tabs-editor">
</div>
</section>
<section id="pretty">
<h1 id="title_song"></h1>
<h2 id="title_artist"></h2>
<div style="font-weight:bold;font-size:12px;text-align:right;margin-right:20px;margin-bottom:10px"><span id="title_transcriber"></span></div>
<div id="pretty-tab" class="pretty-tab"></div>
</section>
<section id="ascii" class="nodisplay">
<textarea id="ascii-text" cols="80" readonly="readonly"></textarea>
</section>
<section id="file" class="nodisplay">
<div class="submenu" align="right">
<a id="new_ktb" class="button text">Clear</a>
<a id="generate_ktb" class="button text">Generate KTB</a>
<a id="save_ktb" class="button text">Save KTB</a>
<a id="load_ktb" class="button text">Load KTB</a>
</div>
<textarea id="ktg" readonly="readonly"></textarea>
</section>
<footer>
<span id="footer-title" style="display:none">powered by <a target="_blank" href="http://www.guitk.com/editor">GUITK editor</a></span>
</footer>
</body>
<div id="tabblocktext_dialog" title="Text editor" style="display:none">
<p>Insert text:</p>
<p><input id="note_text" size="40"/></p>
</div>
<input type="file" id="input-file-ktg" accept=".ktg" style="display:none" onchange="handleFilesLoad(this.files)">
</html>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1752824-13', 'guitk.com');
ga('send', 'pageview');
</script>