123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- <html>
- <head>
- <title>Typing Freaks Editor</title>
- <link rel="stylesheet" href="editor.css" />
- </head>
- <body>
- <div id="container">
- <div id="controls">
- <input id="audio" type="file" />
- <button id="play">Play</button>
- <button id="pause">Pause</button>
- <button id="insert-marker">Insert Marker</button>
- <div class="scrubber">
- <div class="bar">
- <div class="bar-overlay"></div>
- </div>
- <div class="markers">
- </div>
- </div>
- <div class="waveform-container">
- <canvas id="waveform"></canvas>
- <canvas id="waveform-overlay"></canvas>
- </div>
- <div id="display"></div>
- </div>
- <div class="text-areas">
- <span id="intervals-label">Intervals</span>
- <span id="kanji-label">Kanji</span>
- <span id="kana-label">Kana</span>
- <ul id="intervals"></ul>
- <textarea id="kanji"></textarea>
- <textarea id="kana"></textarea>
- </div>
- <div>
- <textarea id="json" placeholder="JSON"></textarea>
- </div>
- <div>
- <button id="import">Import</button>
- <button id="export">Export</button>
- </div>
- </div>
- <template id="interval-template">
- <li>
- <input class="interval" type="number" step="0.1">
- <button class="play-section">Play</button>
- <button class="remove-section">Remove</button>
- </li>
- </template>
- <script type="text/javascript" src="bundle.js"></script>
- <script type="text/javascript">
- let e = new editor.Editor();
- e.start();
- </script>
- </body>
- </html>
|