From 61460b52758297daf1d315ae7960d4ec9713b3af Mon Sep 17 00:00:00 2001 From: Mango0x45 Date: Tue, 30 Mar 2021 13:03:03 +0200 Subject: Grab CSS from stackedit and remove all the bloat. Also start work on dark theme. --- index.html | 56 ++++++++++++++++++++++----------- main.js | 33 +++++++++++++++----- style.css | 102 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 167 insertions(+), 24 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index 5a9063e..00fec9c 100644 --- a/index.html +++ b/index.html @@ -7,44 +7,66 @@ YouTube Frame Timer - + +

-

Speedrun Retimer without Ads

+ +

Speedrun Retimer without Ads

+ + Source code (GitHub) +

Video Framerate

-

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.

+

+ 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. +

Framerate: - +

-

Video Endpoints

+

Video Endpoints

- Find the starting point (you can use the , and - . 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 , + and . 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.

Starting frame: - +

Ending frame: - +

Video Time

- + +

- +

- \ No newline at end of file + diff --git a/main.js b/main.js index da3d68f..ff338a8 100644 --- a/main.js +++ b/main.js @@ -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%; +} -- cgit v1.2.3