aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--index.html45
-rw-r--r--main.js17
-rw-r--r--settings.html61
-rw-r--r--settings.js78
-rw-r--r--style.css20
5 files changed, 190 insertions, 31 deletions
diff --git a/index.html b/index.html
index 2c7d192..cfaefdc 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,6 @@
<!DOCTYPE html>
-<html theme="light">
+<html>
<head>
<title>YouTube Frame Timer</title>
@@ -12,19 +12,39 @@
</head>
<body>
- <label class="switch">
- <input type="checkbox" id="page_theme" onclick="change_theme()">
- <span class="slider" id="slider"></span>
- </label>
- <!-- This needs to come after the above switch -->
- <script src="main.js"></script>
-
+ <a href="settings.html" id="settings">
+ <!--
+ Source: https://freesvg.org/options-icon-24168
+ License: Public Domain
+ -->
+ <svg viewBox="0 0 100 100">
+ <path d="m50.011 0c-2.8839 0-5.7139 0.25936-8.4642 0.7281l-1.3424 14.221c
+ -2.8444 0.79287-5.5365 1.9015-8.0546 3.322l-10.99-9.0785c-4.6419
+ 3.286-8.7054 7.3259-11.991 11.968l9.1012 10.99c-1.4188 2.5151-2.552
+ 5.214-3.3447 8.0546l-14.197 1.35c-0.46893 2.75-0.728 5.58-0.728
+ 8.49 0 2.8897 0.25747 5.7085 0.7281 8.4641l14.198 1.3425c0.79274
+ 2.8406 1.926 5.5395 3.3447 8.0546l-9.0785 10.99c3.2796 4.6294
+ 7.3161 8.6885 11.945 11.968l11.013-9.1013c2.5197 1.4217 5.2082
+ 2.5515 8.0546 3.3447l1.3424 14.221c2.7503 0.4688 5.5803 0.7054
+ 8.4642 0.7054 2.8838 0 5.6911-0.2366 8.4414-0.7054l1.3424-14.221c
+ 2.8465-0.7932 5.5349-1.923 8.0546-3.3447l11.013 9.1013c
+ 4.6293-3.2797 8.6658-7.3388 11.945-11.968l-9.0785-10.99c
+ 1.4188-2.5151 2.552-5.214 3.3447-8.0546l14.198-1.3425c0.47063-2.7556
+ 0.7281-5.5744 0.7281-8.4641 0-2.8848-0.25907-5.7131-0.7281-8.4642l
+ -14.198-1.3424c-0.79274-2.8406-1.926-5.5395-3.3447-8.0546l
+ 9.1012-10.99c-3.2855-4.6423-7.349-8.6821-11.991-11.968l-10.99
+ 9.0785c-2.5181-1.4205-5.2102-2.5291-8.0546-3.322l-1.3424-14.221c
+ -2.7503-0.46874-5.5576-0.7281-8.4414-0.7281zm0 30.967c10.516 0
+ 19.022 8.528 19.022 19.044s-8.5053 19.044-19.022 19.044c-10.516
+ 0-19.044-8.528-19.044-19.044s8.528-19.044 19.044-19.044z"/>
+ </svg>
+ </a>
<h1>Speedrun Retimer without Ads</h1>
- <a href="https://github.com/Mango0x45/no-ad-retimer" target="_blank">
+ <a href="https://github.com/Mango0x45/no-ad-retimer" target="_blank" class="toggleable">
Source code (GitHub)
</a>
<h3>Video Framerate</h3>
- <p>
+ <p class="toggleable">
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.
@@ -34,7 +54,7 @@
<input type="text" id="framerate" size="3" value="30" onchange='check_fps(event)'>
</p>
<h3>Video Endpoints</h3>
- <p>
+ <p class="toggleable">
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.
@@ -56,6 +76,9 @@
<button id="mod_message_button" disabled onclick="copy_mod_message()">
Copy Mod Message to Clipboard
</button>
+
+ <script src="main.js"></script>
+ <script src="settings.js"></script>
</body>
</html>
diff --git a/main.js b/main.js
index ae7f1d3..3cf8d05 100644
--- a/main.js
+++ b/main.js
@@ -100,20 +100,3 @@ function parse_time(event)
if (document.getElementById("startobj").value && document.getElementById("endobj").value)
compute();
}
-
-/* Change the users preferred theme. */
-function change_theme()
-{
- 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");
-if (theme) {
- document.documentElement.setAttribute("theme", theme);
- document.getElementById("page_theme").checked = (theme == "dark");
-}
diff --git a/settings.html b/settings.html
new file mode 100644
index 0000000..c4eaced
--- /dev/null
+++ b/settings.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+
+<html theme="light">
+
+<head>
+ <title>YouTube Frame Timer</title>
+ <meta charset="utf-8">
+ <meta name="keywords" content="Speedrun, Retime">
+ <meta name="description" content="A speedrun retime tool">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="style.css" type="text/css" media="screen">
+</head>
+
+<body>
+ <a href="index.html" id="back">
+ <!--
+ Source: https://www.svgrepo.com/svg/18507/back-button
+ License: CC0 - Creative Commons (No rights reserved)
+ -->
+ <svg viewBox="0 0 219.151 219.151">
+ <path d="M109.576,219.151c60.419,0,109.573-49.156,109.573-109.576C219.149,
+ 49.156,169.995,0,109.576,0S0.002,49.156,0.002,109.575C0.002,
+ 169.995,49.157,219.151,109.576,219.151z M109.576,15c52.148,0,
+ 94.573,42.426,94.574,94.575c0,52.149-42.425,94.575-94.574,
+ 94.576c-52.148-0.001-94.573-42.427-94.573-94.577C15.003,57.427,
+ 57.428,15,109.576,15z"/>
+ <path d="M94.861,156.507c2.929,2.928,7.678,2.927,10.606,0c2.93-2.93,
+ 2.93-7.678-0.001-10.608l-28.82-28.819l83.457-0.008c4.142-0.001,
+ 7.499-3.358,7.499-7.502c-0.001-4.142-3.358-7.498-7.5-7.498l-83.46,
+ 0.008l28.827-28.825c2.929-2.929,2.929-7.679,0-10.607c
+ -1.465-1.464-3.384-2.197-5.304-2.197c-1.919,0-3.838,0.733-5.303,
+ 2.196l-41.629,41.628c-1.407,1.406-2.197,3.313-2.197,5.303c0.001,
+ 1.99,0.791,3.896,2.198,5.305L94.861,156.507z"/>
+ </svg>
+ </a>
+ <h1>Page Settings</h1>
+ <h3 class="options">Dark Theme</h3>
+ <label class="switch">
+ <input type="checkbox" id="page_theme" onclick="change_theme()">
+ <span class="slider" id="slider"></span>
+ </label>
+ <br>
+ <br>
+ <h3 class="options">Remove Titles</h3>
+ <label class="switch">
+ <input type="checkbox" id="page_titles" onclick="remove_titles()">
+ <span class="slider" id="slider"></span>
+ </label>
+ <br>
+ <br>
+ <h3 class="options">Remove Text</h3>
+ <label class="switch">
+ <input type="checkbox" id="page_text" onclick="remove_text()">
+ <span class="slider" id="slider"></span>
+ </label>
+
+ <!-- This needs to come after the switches switch -->
+ <script src="settings.js"></script>
+</body>
+
+</html>
diff --git a/settings.js b/settings.js
new file mode 100644
index 0000000..a82281d
--- /dev/null
+++ b/settings.js
@@ -0,0 +1,78 @@
+/* Set all the settings any time someone loads a page */
+function set_settings()
+{
+ change_theme();
+ remove_titles();
+ remove_text();
+}
+
+/* Initialize the settings page by flipping the switches and such */
+function settings_init()
+{
+ document.getElementById("page_theme").checked = (localStorage.getItem("theme") === "dark");
+ document.getElementById("page_titles").checked = (localStorage.getItem("remove_titles") === "true");
+ document.getElementById("page_text").checked = (localStorage.getItem("remove_text") === "true");
+}
+
+/* Change the users preferred theme. */
+function change_theme()
+{
+ let theme;
+ try {
+ /* Settings page */
+ theme = (document.getElementById("page_theme").checked) ? "dark" : "light";
+ } catch {
+ /* Index page */
+ theme = (localStorage.getItem("theme") === "dark") ? "dark" : "light";
+ }
+
+ document.documentElement.setAttribute("theme", theme);
+ localStorage.setItem("theme", theme);
+}
+
+/* Remove unnecessary titles */
+function remove_titles()
+{
+ let checked;
+ try {
+ /* Settings page */
+ checked = document.getElementById("page_titles").checked;
+ } catch {
+ /* Index page */
+ if (localStorage.getItem("remove_titles") === "true")
+ checked = true;
+ else
+ checked = false;
+ }
+
+ if (checked && !window.location.href.endsWith("settings.html"))
+ for (let element of document.getElementsByTagName("h3"))
+ element.classList.add("hidden");
+ localStorage.setItem("remove_titles", checked.toString());
+}
+
+/* Remove unnecessary text */
+function remove_text()
+{
+ let checked;
+ try {
+ /* Settings page */
+ checked = document.getElementById("page_text").checked;
+ } catch {
+ /* Index page */
+ if (localStorage.getItem("remove_text") === "true")
+ checked = true;
+ else
+ checked = false;
+ }
+
+ if (checked)
+ for (let element of document.getElementsByClassName("toggleable"))
+ element.classList.add("hidden");
+ localStorage.setItem("remove_text", checked.toString());
+}
+
+/* Conform to the users preferences */
+if (window.location.href.endsWith("settings.html"))
+ settings_init();
+set_settings();
diff --git a/style.css b/style.css
index 48aa4b0..59f1e2a 100644
--- a/style.css
+++ b/style.css
@@ -78,8 +78,6 @@ a {
background-color: transparent;
color: var(--url-color);
text-decoration: underline;
- text-decoration-skip: ink;
- -webkit-text-decoration-skip: objects;
}
a:focus, a:hover {
@@ -116,11 +114,27 @@ button, code, input, textarea {
margin: 0;
}
-.switch {
+#settings, #back {
display: inline-flex;
+ fill: var(--text-color);
float: right;
height: 34px;
position: relative;
+ width: 34px;
+}
+
+.options {
+ margin: 0;
+}
+
+.hidden {
+ display: none;
+}
+
+.switch {
+ float: left;
+ height: 34px;
+ position: relative;
width: 60px;
}