src/index.hbs
<!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="{{package.keywords}}">
<meta name="description" content="{{package.description}}">
<link rel="manifest" href="manifest.json">
<title>{{package.name}}</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="{{config.publicUrl}}">{{package.name}}</a></h1>
<ul class="Header__navigation">
<li>Version {{package.version}}</li>
<li>
<span>Built with</span>
<a
href="https://github.com/martijnversluis/ChordSheetJS"
target="_blank"
rel="noopener noreferrer"
>ChordSheetJS</a>
</li>
<li>
<a href="{{package.githubHome}}" target="_blank" rel="noopener noreferrer">GitHub</a>
</li>
<li>
<a href="{{package.bugs.url}}" target="_blank" rel="noopener noreferrer">Issues</a>
</li>
<li>
<a href="{{package.about}}" 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">
{{#each config.toolbar}}
<li>
<button id="toolbar__{{@key}}" type="button">{{this}}</button>
</li>
{{/each}}
</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">{{example_chord_pro_sheet}}</textarea>
</div>
<div class="EditorContainer__errorMessage" id="chordSheetEditor__errorMessage"></div>
</section>
<section class="App__column" id="chordSheetViewer">
<ul class="RadioGroup">
{{#each config.displayModes}}
<li class="RadioGroup__option">
<input
type="radio"
class="RadioGroup__radio"
id="chordSheetViewer__displayMode{{upperCaseFirst @key}}"
name="display_mode"
value="{{@key}}"
{{#if (eq ../config.defaultDisplayMode @key)}}
checked="checked"
{{/if}}
>
<label
class="RadioGroup__label"
for="chordSheetViewer__displayMode{{upperCaseFirst @key}}"
>{{this}}</label>
</li>
{{/each}}
</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="{{bundlePath}}"></script>
</body>
</html>