timecode-correcter/index.html at master · sutangu/timecode-correcter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Timecodes correcter</title>
  <meta name="keywords" content="timecodes, stream, youtube, twitch, podcast">
  <meta name="description" content="Corrector of timecodes for podcast or stream or whatever">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Correct timecodes w/ diff <small class="version">(ver. 1.4.0)</small></h1>
<h2>It works with <i>HH:MM:SS</i> or <i>MM:SS</i> only</h2>
<div class="form">
  <div class="grid">
    <div class="data">
      <label class="correcter-wrap">
        Difference value
        i.e.:
        <span id="example-correcter" onclick="setValue('input')" class="underline">00:01:23</span>
        <input id="correcter" name="correct" placeholder="Timecode correcter paste here..." />
      </label>

      <label>
        Timecodes to correct
        i.e.:
        <span id="example-list" onclick="setValue('textarea')" class="underline">
          <span>00:00:00 Stream has started</span>
          <span>00:10:23 Stream started</span>
          <span>00:32:45 Main theme</span>
          <span>00:45:11 Next topic</span>
          <span>01:41:12 Next topic</span>
        </span>
        <textarea id="timecodes" cols="50" rows="30" name="timecodes" placeholder="Your timecodes paste here..."></textarea>
      </label>
    </div>

    <div class="overflow">
      <div class="result-wrapper">
        <h2>Correct result is:</h2>
        <button id="copy-button" onclick="copyResult()">copy corrected list</button>
        <div id="result">result will be here</div>
      </div>
    </div>

  </div>

  <div id="is-corrected"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/luxon@2.0.1/build/global/luxon.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>