-
-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
143 lines (139 loc) · 5.04 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<meta name="keywords" content="javascript,chords,parsing,convert,chord-sheet,chordpro">
<meta name="description" content="ChordPro editor. Transpose your chord sheet. Convert ChordPro to chord sheet.">
<link rel="manifest" href="manifest.json">
<title>ChordFiddle</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<form id="root">
<div class="App">
<header class="Header">
<div class="Header__wrapper">
<h1 class="Header__site-name">
<a href="/ChordFiddle">ChordFiddle</a></h1>
<ul class="Header__navigation">
<li>Version 2.3.0</li>
<li>
<span>Built with</span>
<a
href="https://github.com/martijnversluis/ChordSheetJS"
target="_blank"
rel="noopener noreferrer"
>ChordSheetJS</a>
</li>
<li>
<a href="https://github.com/martijnversluis/ChordFiddle" target="_blank" rel="noopener noreferrer">GitHub</a>
</li>
<li>
<a href="https://github.com/martijnversluis/chordfiddle/issues" target="_blank" rel="noopener noreferrer">Issues</a>
</li>
<li>
<a href="https://github.com/martijnversluis/ChordFiddle/blob/master/README.md#chordfiddle" target="_blank" rel="noopener noreferrer">About</a>
</li>
</ul>
</div>
</header>
<main class="App__container">
<div class="App__columns">
<section class="App__column">
<ul class="Toolbar" id="toolbar">
<li>
<button id="toolbar__transposeDown" type="button">Transpose down</button>
</li>
<li>
<button id="toolbar__transposeUp" type="button">Transpose up</button>
</li>
<li>
<button id="toolbar__switchToSharp" type="button">Use ♯</button>
</li>
<li>
<button id="toolbar__switchToFlat" type="button">Use ♭</button>
</li>
<li>
<button id="toolbar__importChordSheet" type="button">Import chord sheet</button>
</li>
</ul>
<div class="EditorContainer">
<div class="ChordSheetEditor LineNumbers EditorContainer__lineNumbers" id="chordSheetEditor__lineNumbers" data-mode="text"></div>
<textarea class="ChordSheetEditor EditorContainer__editor" id="chordSheetEditor" data-mode="text">
{title: Let it be}
{subtitle: ChordSheetJS example version}
{key: C}
{capo: 5}
{composer: John Lennon}
{composer: Paul McCartney}
{chordsize: 12px}
{textcolour: maroon}
Written by: %{composer}
{textcolour}
Lyrics by: %{lyricist|%{}|(unknown)}
{chordcolour: purple}
{chordfont: monospace}
{chordsize: 150%}
{textcolour: navy}
{textfont: sans-serif}
{textsize: 120%}
{start_of_chorus}
Let it [Am]be, let it [C/G]be, let it [F]be, let it [C]be
[C]Whisper words of [G]wisdom, let it [F]be [C/E] [Dm] [C]
{end_of_chorus}
</textarea>
</div>
<div class="EditorContainer__errorMessage" id="chordSheetEditor__errorMessage"></div>
</section>
<section class="App__column" id="chordSheetViewer">
<ul class="RadioGroup">
<li class="RadioGroup__option">
<input
type="radio"
class="RadioGroup__radio"
id="chordSheetViewer__displayModeHtml"
name="display_mode"
value="html"
checked="checked"
>
<label
class="RadioGroup__label"
for="chordSheetViewer__displayModeHtml"
>Markup</label>
</li>
<li class="RadioGroup__option">
<input
type="radio"
class="RadioGroup__radio"
id="chordSheetViewer__displayModeText"
name="display_mode"
value="text"
>
<label
class="RadioGroup__label"
for="chordSheetViewer__displayModeText"
>Plain</label>
</li>
</ul>
<div class="ChordSheetViewer" id="chordSheetViewer__outlet"></div>
</section>
</div>
</main>
</div>
<section class="ImportDialog" id="importDialog">
<button class="ImportDialog__close-button" id="importDialog__closeButton" type="button">×</button>
<div class="ImportDialog__contents"><h1>Import chord sheet</h1>
<textarea class="ChordSheetEditor ImportDialog__editor" id="importDialog__editor"></textarea>
<div class="ImportDialog__buttons">
<button class="large" id="importDialog__confirmButton" type="button">Import chord sheet</button>
</div>
</div>
</section>
</form>
<script src="dist/bundle.js"></script>
</body>
</html>