2
0

editor.html 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  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. <input id="audio" type="file" />
  9. <button id="play">Play</button>
  10. <button id="pause">Pause</button>
  11. <button id="insert-marker">Insert Marker</button>
  12. <div class="scrubber">
  13. <div class="bar">
  14. <div class="bar-overlay"></div>
  15. </div>
  16. <div class="markers">
  17. </div>
  18. </div>
  19. <div class="text-areas">
  20. <span id="intervals-label">Intervals</span>
  21. <span id="kanji-label">Kanji</span>
  22. <span id="kana-label">Kana</span>
  23. <ul id="intervals"></ul>
  24. <div id="kanji" contentEditable></div>
  25. <div id="kana" contentEditable></div>
  26. </div>
  27. <div>
  28. <textarea id="json" placeholder="JSON"></textarea>
  29. </div>
  30. <div>
  31. <button id="import">Import</button>
  32. <button id="export">Export</button>
  33. </div>
  34. </div>
  35. <template id="interval-template">
  36. <li>
  37. <input class="interval" type="number" step="0.1">
  38. <button class="play-section">Play</button>
  39. <button class="remove-section">Remove</button>
  40. </li>
  41. </template>
  42. <script type="text/javascript" src="bundle.js"></script>
  43. <script type="text/javascript">
  44. let e = new editor.Editor();
  45. e.start();
  46. </script>
  47. </body>
  48. </html>