feat(frontend): Add dark mode (e9f8a0bd) · Commits · git-mirror / Youtubevideofinder

static/dark.svg

0 → 100644

+16 −0

Original line number	Diff line number	Diff line
		<?xml version="1.0" encoding="UTF-8"?>
		<svg viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
		<g fill-rule="evenodd">
		<path d="m371.97 312.16c-18.111-18.288-119.49-78.851-148.1-79.784-31.52 2.4782-149.42 75.629-162.79 75.564 6.3304-29.776 47.61-45.055 65.085-81.826-69.744-5.8226-112.65-85.187-117.14-88.391 8.5434 0.7767 114.3 0.22121 106.91-7.0337-15.448-7.7241-80.18-82.533-77.371-84.405 14.431 11.807 136.8 35.136 142.08 36.576 1.1286-12.414 46.192-68.177 47.83-73.634 9.0508 27.939 37.249 73.617 42.203 76.447 6.9387-3.965 94.123-61.897 102.69-61.897 8.5456-3.2046-63.176 94.855-71.744 108.32-2.0297 3.8339 5.6539 3.3092 11.254 0 22.406-5.272 84.596-27.206 99.879-30.949-3.5683 2.0391-68.298 96.311-70.338 99.88-24.427 12.453 23.446 78.778 29.542 111.13z" stroke-width="6.25"/>
		<path d="m336.35 198.25c0 43.196-58.957 87.542-57.622 133.74 1.5848 56.506-31.446 92.127-60.344 91.304-47.427 0-56.289-33.975-56.92-88.628-0.5414-45.526-62.314-98.843-62.314-142.04 0-86.392 54.994-126.65 120.84-126.65 65.851 0 116.35 45.88 116.35 132.27z" fill="#fff"/>
		<path d="m181.24 398.28c8.0103 1.6234 49.415 4.7323 70.517 0.25598-5.4886 4.0158-20.975 19.794-35.587 18.8-9.9537-0.21631-30.592-11.906-34.93-19.056z"/>
		<path d="m189.51 344.44c7.474-2.8152 47.861-18.018 66.247-24.953 13.752-4.4314 9.3938-22.672-6.6619-17.687-19.365 7.294-55.036 20.73-69.305 26.105-5.8338 2.1973-3.6327 21.519 9.7196 16.535z" fill="none" stroke="#000" stroke-width="1.046"/>
		<path d="m255.06 390.81c13.752-7.7506 15.021-40.883-1.0349-32.165-19.365 12.757-46.581 30.168-60.85 39.568 9.087 2.103 43.498 4.7255 61.885-7.4038z" stroke="#fcfcfc" stroke-width="7.535"/>
		<path d="m322.53 194.36c0 38.677-52.059 78.383-50.88 119.74 1.3993 50.594-102.99 51.331-103.54 2.3959-0.4782-40.763-55.024-88.502-55.024-127.18 0-77.354 48.56-113.4 106.71-113.4 58.146 0 102.74 41.08 102.74 118.43z"/>
		<g stroke-width="8.266">
		<path d="m192.62 388.93c7.474-4.9239 47.861-31.514 66.247-43.643 13.752-7.7506 9.3938-39.653-6.6619-30.935-19.365 12.757-55.036 36.258-69.305 45.658-5.8338 3.8431-3.6327 37.637 9.7196 28.92z" stroke="#fcfcfc"/>
		<path d="m185.97 352.52c7.474-4.9238 27.469-19.335 45.856-31.465 13.752-7.7506-41.306-6.8555-55.575 2.5446-5.8338 3.8431-3.6327 37.638 9.7196 28.92z" stroke="#fcf9f9"/>
		</g>
		<path d="m281.97 149.44c0 20.156-13.632 36.514-30.429 36.514s-10.143-16.358-10.143-36.514-6.6538-36.514 10.143-36.514 30.429 16.358 30.429 36.514z" fill="#fff" stroke-width="1.25"/>
		</g>
		</svg>

templates/init.html

+91 −0

Original line number	Diff line number	Diff line
		@@ -48,6 +48,9 @@ button {
		padding-bottom: 41px;
		border: 1px solid black;
		}
		.button-dark {
		background-color: rgba(50, 50, 50) !important;
		}

		button[disabled] {
		background-color: rgba(200, 200, 200, 1);
		@@ -73,8 +76,86 @@ button[disabled] {
		color: white;
		background-color: black;
		}

		.a-dark{
		color: orange;
		}

		.a-dark:visited {
		color: red;
		}

		#theme-select {
		background: url("/static/dark.svg");
		height: 32px;
		width: 32px;
		cursor: pointer;
		background-repeat: no-repeat;
		background-position: center;
		}

		.theme-select-dark {
		filter: invert(100%);
		}

		#theme-select:hover {
		animation-name: test1;
		animation-duration: 0.5s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
		}

		@keyframes test1{
		from {
		background-color: rgba(0, 0, 0, 0);
		}
		to {
		background-color: rgba(100, 100, 100, 1);
		}
		}

		</style>
		<script>
		const DARKNESS = {
		"#theme-select": "theme-select-dark",
		"#but": "button-dark",
		"body": "white",
		"a": "a-dark",
		"input": "white"
		}
		function toggleDarkness() {
		if (localStorage.getItem("dark")) {
		console.log("MODE = DARK");
		lightMode();
		}
		else {
		console.log("MODE != DARK");
		darkMode();
		}
		}
		function lightMode() {
		for (const [key, value] of Object.entries(DARKNESS)) {
		document.querySelectorAll(key).forEach((e) => e.classList.remove(value));
		}
		try {
		localStorage.removeItem("dark");
		}
		catch(e) {
		alert("Could not save preference!");
		}
		}
		function darkMode() {
		for (const [key, value] of Object.entries(DARKNESS)) {
		document.querySelectorAll(key).forEach((e) => e.classList.add(value));
		}
		try {
		localStorage.setItem("dark", true);
		}
		catch(e) {
		alert("Could not save preference!");
		}
		}
		function coerceToVid(vid) {
		// Regexes here are based on the ones from https://github.com/mattwright324/youtube-metadata/blob/master/js/shared.js#L8-L14
		let patterns = [
		@@ -102,6 +183,8 @@ button[disabled] {
		console.log(newVid);
		if (!newVid) {
		document.getElementById("data").innerHTML = `<span style="color:red;">That doesn't look like a valid video ID.</span>`;
		document.getElementById("but").disabled = false;
		document.getElementById("but").innerHTML = "Search for Captures";
		return false;
		}
		document.getElementById("int").innerHTML = `<br>Interpreting that URL as video ID ${newVid}`;
		@@ -179,6 +262,7 @@ button[disabled] {
		document.getElementById("data").innerHTML = "<span class='red'>this code should be unreachable - please report this issue and provide a way to reproduce</span>";
		}
		}
		console.log(localStorage.getItem("dark"));
		</script>
		</head>
		<body>
		@@ -205,11 +289,18 @@ button[disabled] {
		</div>
		<div id="warning">
		<b>I take no responsibility for any data loss as a result of incorrect values.</b> Verify the values for any important videos!
		<span style="float: right;" id="theme-select" onclick="toggleDarkness()"></span>
		</div>
		<a href="https://github.com/TheTechRobo/youtubevideofinder/">Source code (GitHub)</a>
		<a href="/api" style="float:right;">API documentation</a>
		</body>
		</html>
		<script>
		if (localStorage.getItem("dark")) {
		darkMode();
		console.log("DarkModeSetup");
		}
		</script>
		{% if default %}
		<script>
		finishWrpa("{{default}}");