games
/
typingfreaks
mirror of https://github.com/thatsmydoing/typingfreaks.git


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
							<html>
  <head>
    <title>Typing Freaks Editor</title>
    <link rel="stylesheet" href="editor.css" />
  </head>
  <body>
    <div id="container">
      <div id="controls">
        <div>
          <input id="url" type="text" />
          <button id="load">Load from url (Youtube/etc)</button>
          <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 id="youtube"></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>