diff options
| -rw-r--r-- | index.html | 56 | ||||
| -rw-r--r-- | main.js | 33 | ||||
| -rw-r--r-- | style.css | 102 |
3 files changed, 167 insertions, 24 deletions
@@ -7,44 +7,66 @@ <meta name="description" content="A speedrun retime tool"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>YouTube Frame Timer</title> - <link rel="stylesheet" href="https://stackedit.io/style.css"> + <link rel="stylesheet" href="style.css" type="text/css" media="screen"> + <!-- + <link rel="stylesheet" href="dark.css" type="text/css" media="screen"> + --> <script src="main.js"></script> </head> <body class="stackedit"> <div class="stackedit__html"> - <h1 id="youtube-interval-timer">Speedrun Retimer without Ads</h1> + <!-- + TODO: Finish dark theme! + + <label class="switch"> + <input type="checkbox" id="color_preference" onclick="change_preferance()"> + <span class="slider round" id="slider"></span> + </label> + --> + <h1>Speedrun Retimer without Ads</h1> + <a href="https://github.com/Mango0x45/no-ad-retimer"> + Source code (GitHub) + </a> <h3 id="video-framerate">Video Framerate</h3> - <p>Right click the YouTube video and select “Stats for nerds.” The - third line is “Current / Optimal Res” - find the two numbers after - the @ and enter them for framerate.</p> + <p> + Right click the YouTube video and select “Stats for + nerds.” The third line is “Current / Optimal Res” - + find the two numbers after the @ and enter them for + framerate. + </p> <p> <label for="framerate">Framerate: </label> - <input type="text" id="framerate" size="3" value="30" onchange='check_fps(event)'> + <input type="text" id="framerate" size="3" value="30" + onchange='check_fps(event)'> </p> - <h3 id="video-endpoints">Video Endpoints</h3> + <h3>Video Endpoints</h3> <p> - Find the starting point (you can use the <code>,</code> and - <code>.</code> keys to find the exact frame). Right click the video - and select “Copy debug info” and paste it for starting frame. Repeat - for ending frame. + Find the starting point (you can use the <code>,</code> + and <code>.</code> keys to find the exact frame). Right + click the video and select “Copy debug info” and paste + it for starting frame. Repeat for ending frame. </p> <p> <label for="startobj">Starting frame: </label> - <input type="text" id="startobj" style='width:100%' onchange='parse_time(event)'> + <input type="text" id="startobj" style='width:100%' + onchange='parse_time(event)'> </p> <p> <label for="endobj">Ending frame: </label> - <input type="text" id="endobj" style='width:100%' onchange='parse_time(event)'> + <input type="text" id="endobj" style='width:100%' + onchange='parse_time(event)'> </p> <h3 id="video-time">Video Time</h3> <input type="text" id="time" readonly size="20"> <p> - <textarea id="mod_message" cols="40" rows="5" disabled></textarea> + <textarea id="mod_message" cols="40" rows="3" readonly + disabled> + </textarea> </p> - <button id="mod_message_button" onclick="copy_mod_message()" disabled>Copy Mod Message to - Clipboard</button> + <button id="mod_message_button" onclick="copy_mod_message()" + disabled>Copy Mod Message to Clipboard</button> </div> </body> -</html>
\ No newline at end of file +</html> @@ -1,4 +1,4 @@ -/* Compute the total duration of the run */ +/* Compute the total duration of the run. */ function compute() { const fps = parseInt(document.getElementById("framerate").value); @@ -11,7 +11,7 @@ function compute() const frames = (et - st) * fps; const s = Math.round(frames / fps * 1000) / 1000; - /* Show the time and mod message in the DOM */ + /* Show the time and mod message in the DOM. */ const sf = Math.trunc(st * fps); const ef = Math.trunc(et * fps); const t = time_format(s); @@ -24,7 +24,7 @@ function compute() document.getElementById("mod_message_button").disabled = false; } -/* Convert seconds to human readable time */ +/* Convert seconds to human readable time. */ function time_format(t) { const h = ~~(t / 3600); @@ -40,7 +40,7 @@ function time_format(t) return ret; } -/* Allow user to copy mod message to clipboard */ +/* Allow user to copy mod message to clipboard. */ function copy_mod_message() { const text_area = document.getElementById("mod_message"); @@ -49,8 +49,10 @@ function copy_mod_message() document.execCommand("copy"); } -/* If framerate is invalid, show an error message and disable start and end - * frame fields */ +/* + * If framerate is invalid, show an error message and disable start and end + * frame fields. + */ function check_fps(event) { fps = event.target.value; @@ -68,9 +70,10 @@ function check_fps(event) } } -/* Get current frame from input field (either start time or end time) */ +/* Get current frame from input field (either start time or end time). */ function parse_time(event) { + let inptext_frame; try { inptext_frame = (JSON.parse(event.target.value)).cmt; } catch { @@ -90,3 +93,19 @@ function parse_time(event) && document.getElementById("endobj").value) compute(); } + +/* Change the users preferred theme. */ +function change_preferance() +{ + const color_switch = document.getElementById("color_preference"); + + if (color_switch.checked) { + document.body.classList.add("dark"); + document.body.classList.remove("light"); + localStorage.setItem("preference", "dark"); + } else { + document.body.classList.add("light"); + document.body.classList.remove("dark"); + localStorage.setItem("preference", "light"); + } +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..8a9abb9 --- /dev/null +++ b/style.css @@ -0,0 +1,102 @@ +/* + * This is a stripped down version of the style.css found over at + * https://stackedit.io + */ + +body { + margin: 0; +} + +html { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +body, html { + color: rgba(0, 0, 0, 0.75); + font-size: 16px; + font-family: Lato, Helvetica Neue, Helvetica, sans-serif; + font-variant-ligatures: common-ligatures; + line-height: 1.67; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +h1:after { + content: ""; + display: block; + position: relative; + top: 0.33em; + border-bottom: 1px solid hsla(0, 0%, 50%, 0.33); +} + +h1, h3 { + margin: 1.8em 0; + line-height: 1.33; +} + +p { + margin: 1.2em 0; +} + +a { + background-color: transparent; + color: #0c93e4; + text-decoration: underline; + text-decoration-skip: ink; + -webkit-text-decoration-skip: objects; +} + +a:focus, a:hover { + text-decoration: none; +} + +code { + background-color: rgba(0, 0, 0, 0.05); + border-radius: 3px; + padding: 2px 4px; + font-family: Roboto Mono, Lucida Sans Typewriter, Lucida Console, + monaco, Courrier, monospace; + font-size: 0.85em; + font-family: monospace, monospace; + font-size: 1em; +} + +code * { + font-size: inherit; +} + +button { + overflow: visible; + text-transform: none; +} + +input { + overflow: visible; +} + +textarea { + overflow: auto; +} + +button, input, textarea { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; +} + +.stackedit__html { + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; + padding-left: 30px; + padding-right: 30px; + max-width: 70%; +} |