editor.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Typing Freaks Editor</title>
  5. <link rel="stylesheet" href="editor.css" />
  6. </head>
  7. <body>
  8. <div id="container">
  9. <div id="controls">
  10. <div>
  11. <input id="url" type="text" />
  12. <button id="load">Load from url (Youtube/etc)</button>
  13. <input id="audio" type="file" />
  14. <button id="play">Play</button>
  15. <button id="pause">Pause</button>
  16. <button id="insert-marker">Insert Marker</button>
  17. <div class="scrubber">
  18. <div class="bar">
  19. <div class="bar-overlay"></div>
  20. </div>
  21. <div class="markers">
  22. </div>
  23. </div>
  24. <div class="waveform-container">
  25. <canvas id="waveform"></canvas>
  26. <canvas id="waveform-overlay"></canvas>
  27. </div>
  28. <div id="display"></div>
  29. </div>
  30. <div id="youtube"></div>
  31. </div>
  32. <div class="text-areas">
  33. <span id="intervals-label">Intervals</span>
  34. <span id="kanji-label">Kanji</span>
  35. <span id="kana-label">Kana</span>
  36. <ul id="intervals"></ul>
  37. <textarea id="kanji"></textarea>
  38. <textarea id="kana"></textarea>
  39. </div>
  40. <div>
  41. <textarea id="json" placeholder="JSON"></textarea>
  42. </div>
  43. <div>
  44. <button id="import">Import</button>
  45. <button id="export">Export</button>
  46. </div>
  47. </div>
  48. <template id="interval-template">
  49. <li>
  50. <input class="interval" type="number" step="0.1">
  51. <button class="play-section">Play</button>
  52. <button class="remove-section">Remove</button>
  53. </li>
  54. </template>
  55. <script type="module" src="editor.js"></script>
  56. </body>
  57. </html>