From 01782b93dc477e8e2f47409af5244e4069ba8c61 Mon Sep 17 00:00:00 2001 From: Mango0x45 Date: Fri, 30 Apr 2021 22:22:54 +0200 Subject: Finally add dark theme! --- .clang-format | 6 +-- index.html | 106 +++++++++++++++++++------------------------ main.js | 68 +++++++++++++++------------- style.css | 141 +++++++++++++++++++++++++++++++++++++++++++--------------- 4 files changed, 190 insertions(+), 131 deletions(-) diff --git a/.clang-format b/.clang-format index bda6336..3130d2e 100644 --- a/.clang-format +++ b/.clang-format @@ -23,7 +23,7 @@ BraceWrapping: AfterUnion: false AfterExternBlock: false BeforeCatch: false - BeforeElse: false + BeforeElse: true IndentBraces: false SplitEmptyFunction: true SplitEmptyRecord: true @@ -31,7 +31,7 @@ BraceWrapping: BreakBeforeBinaryOperators: NonAssignment BreakBeforeBraces: Custom BreakBeforeTernaryOperators: true -ColumnLimit: 80 +ColumnLimit: 100 ContinuationIndentWidth: 8 DeriveLineEnding: true IndentCaseBlocks: false @@ -61,4 +61,4 @@ UseTab: Always # Taken from git's rules (Except PenaltyBreakAssignment) PenaltyBreakAssignment: 100 -PenaltyExcessCharacter: 100 \ No newline at end of file +PenaltyExcessCharacter: 100 diff --git a/index.html b/index.html index 23e4a99..b5cc2a0 100644 --- a/index.html +++ b/index.html @@ -1,74 +1,60 @@ - + + YouTube Frame Timer - YouTube Frame Timer - - - -

- + - - - - - --> -

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

- Framerate: - -

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

- Starting frame: - -

- Ending frame: - -

Video Time

- -

- - -

- -

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

+ Framerate: + +

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

+ Starting frame: + +

+ Ending frame: + +

Video Time

+ +

+ + +

+ diff --git a/main.js b/main.js index ff338a8..8f04723 100644 --- a/main.js +++ b/main.js @@ -5,18 +5,25 @@ function compute() const st = document.getElementById("startobj").value; const et = document.getElementById("endobj").value; + /* Return early if not all fields are filled */ if (st === undefined || et === undefined || fps === undefined) return; + /* Return early on a negative time */ const frames = (et - st) * fps; + if (frames < 0) { + document.getElementById("time").value = "Error: Negative time"; + return; + } + const s = Math.round(frames / fps * 1000) / 1000; /* 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); - const mod_message = `Mod Note: Retimed (Start Frame: ${ - sf}, End Frame: ${ef}, FPS: ${fps}, Total Time: ${t})`; + const mod_message = `Mod Note: Retimed (Start Frame: ${sf}, End Frame: ${ef}, FPS: ${ + fps}, Total Time: ${t})`; document.getElementById("time").value = t; document.getElementById("mod_message").disabled = false; @@ -49,63 +56,62 @@ 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; if (fps > 0 && fps % 1 == 0) { document.getElementById("startobj").disabled = false; document.getElementById("endobj").disabled = false; - document.getElementById("compute_button").disabled = false; - } else { + } + else { document.getElementById("framerate") .setCustomValidity("Please enter a valid framerate."); document.getElementById("framerate").reportValidity(); document.getElementById("startobj").disabled = true; document.getElementById("endobj").disabled = true; - document.getElementById("compute_button").disabled = true; } } /* Get current frame from input field (either start time or end time). */ function parse_time(event) { - let inptext_frame; + /* Return early if invalid JSON is passed (numbers are valid) */ + let inp, dinfo; try { - inptext_frame = (JSON.parse(event.target.value)).cmt; + dinfo = JSON.parse(event.target.value); } catch { document.getElementById(event.target.id).value = ""; return; } - if (inptext_frame !== undefined) { - const fps = parseInt( - document.getElementById("framerate").value); - const frame_from_obj = (t, fps) => Math.floor(t * fps) / fps; - const fframe = frame_from_obj(inptext_frame, fps); - document.getElementById(event.target.id).value = `${fframe}`; + /* If cmt isn't available fallback to lct, also allow raw numbers */ + if (!(inp = dinfo.cmt) && !(inp = dinfo.lct) && typeof ((inp = dinfo)) !== "number") { + document.getElementById(event.target.id).value = ""; + return; } - if (document.getElementById("startobj").value - && document.getElementById("endobj").value) + /* Calculate the exact timestamp */ + const fps = parseInt(document.getElementById("framerate").value); + const frame = Math.floor(inp * fps) / fps; + document.getElementById(event.target.id).value = `${frame}`; + + /* If all fields are filled the compute */ + if (document.getElementById("startobj").value && document.getElementById("endobj").value) compute(); } /* Change the users preferred theme. */ -function change_preferance() +function change_theme() { - 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"); - } + const theme_switch = document.getElementById("page_theme"); + const want = theme_switch.checked ? "dark" : "light"; + + document.documentElement.setAttribute("theme", want); + localStorage.setItem("theme", want); } + +/* Automatically select the users preferred theme */ +const theme = localStorage.getItem("theme"); +document.documentElement.setAttribute("theme", theme); +document.getElementById("page_theme").checked = (theme == "dark"); diff --git a/style.css b/style.css index 8a9abb9..b16b4dd 100644 --- a/style.css +++ b/style.css @@ -1,10 +1,33 @@ -/* - * This is a stripped down version of the style.css found over at - * https://stackedit.io - */ +:root { + --slider-color: #FFFFFF; + --slider-bg-on-color: #2196F3; + --slider-bg-off-color: #CCCCCC; +} + +[theme="light"] { + --bg-color: #FFFFFF; + --text-color: #24292E; + --box-color: #DDDDDD; + --url-color: #0366D6; + --underline-color: #EAECEF; +} + +[theme="dark"] { + --bg-color: #22272E; + --text-color: #ADBAC7; + --box-color: #2D333B; + --url-color: #539BF5; + --underline-color: #373E47; +} body { - margin: 0; + background-color: var(--bg-color); + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; + max-width: 70%; + padding-left: 30px; + padding-right: 30px; } html { @@ -14,7 +37,6 @@ html { } 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; @@ -24,16 +46,12 @@ body, html { } h1 { - font-size: 2em; - margin: 0.67em 0; -} - -h1:after { + border-bottom: 1px solid var(--underline-color); content: ""; display: block; + font-size: 2em; position: relative; top: 0.33em; - border-bottom: 1px solid hsla(0, 0%, 50%, 0.33); } h1, h3 { @@ -45,9 +63,18 @@ p { margin: 1.2em 0; } + +button, h1, h3, input, p, textarea { + color: var(--text-color); +} + +button, input, code, textarea { + background-color: var(--box-color); +} + a { background-color: transparent; - color: #0c93e4; + color: var(--url-color); text-decoration: underline; text-decoration-skip: ink; -webkit-text-decoration-skip: objects; @@ -57,27 +84,20 @@ 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; } +code { + font-family: Roboto Mono, Lucida Sans Typewriter, Lucida Console, monaco, Courrier, + monospace; + font-size: 1em; + padding: 2px 4px; +} + input { + border: none; overflow: visible; } @@ -85,18 +105,65 @@ textarea { overflow: auto; } -button, input, textarea { +button, code, input, textarea { + border: none; + border-radius: 6px; font-family: sans-serif; font-size: 100%; - line-height: 1.15; + line-height: 1.5; margin: 0; } -.stackedit__html { - margin-bottom: 20px; - margin-left: auto; - margin-right: auto; - padding-left: 30px; - padding-right: 30px; - max-width: 70%; +.switch { + display: inline-flex; + float: right; + height: 34px; + position: relative; + width: 60px; +} + +.switch input { + height: 0; + opacity: 0; + width: 0; +} + +.slider { + background-color: var(--slider-bg-off-color); + border-radius: 34px; + bottom: 0; + position: absolute; + cursor: pointer; + left: 0; + right: 0; + top: 0; + transition: .4s; + -webkit-transition: .4s; +} + +.slider:before { + background-color: var(--slider-color); + border-radius: 50%; + bottom: 4px; + content: ""; + height: 26px; + left: 4px; + position: absolute; + transition: .4s; + width: 26px; + -webkit-transition: .4s; +} + +input:checked + .slider { + background-color: var(--slider-bg-on-color); +} + +input:focus + .slider { + box-shadow: 0 0 1px var(--slider-bg-on-color); +} + +input:checked + .slider:before { + transform: translateX(26px); + -ms-transform: translateX(26px); + -webkit-transform: translateX(26px); } -- cgit v1.2.3