Add a settings page and make Jerrin happy

author: Mango0x45 <thomasvoss@live.com> 2021-05-14 13:39:56 +0200
committer: Mango0x45 <thomasvoss@live.com> 2021-05-14 13:39:56 +0200
commit: 9a545eb6633b293822771f6ae5c6530780513142 (patch)
tree: f674ca55ea8499950455fc5c981347846acd73e1
parent: 3ae7d94e4b851b41c89f0e08932d62352e06bedc (diff)
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;
 }
author	Mango0x45 <thomasvoss@live.com>	2021-05-14 13:39:56 +0200
committer	Mango0x45 <thomasvoss@live.com>	2021-05-14 13:39:56 +0200
commit	9a545eb6633b293822771f6ae5c6530780513142 (patch)
tree	f674ca55ea8499950455fc5c981347846acd73e1
parent	3ae7d94e4b851b41c89f0e08932d62352e06bedc (diff)