editor.html 1.8 KB

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