From 0164ccbd67489649d547254075d772922240438e Mon Sep 17 00:00:00 2001
From: Isaac Shoebottom <ir.shoebottom@gmail.com>
Date: Thu, 30 May 2024 13:39:56 -0300
Subject: [PATCH] Simplify memes page

---
 index.html | 143 +++++++----------------------------------------------
 1 file changed, 19 insertions(+), 124 deletions(-)
diff --git a/index.html b/index.html
index e4a6df5..31ef188 100644
--- a/index.html
+++ b/index.html
@@ -1,150 +1,45 @@
 <head>
-	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>Click for memes</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
 	<script src="max.js"></script>
 	<script>
-		var idQueue = []
-
+		// Detects the user's preferred color scheme and sets the theme accordingly
+		if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+			document.getElementsByTagName('html')[0].setAttribute('data-bs-theme', 'dark');
+		} else {
+			document.getElementsByTagName('html')[0].setAttribute('data-bs-theme', 'light');
+		}
+		window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+			let theme = event.matches ? "dark" : "light";
+			document.getElementsByTagName('html')[0].setAttribute('data-bs-theme', theme);
+		});
 		function generateRandomID() {
 			let videoID = Math.floor(Math.random() * MAX + 1)
 			let videoIDString = videoID.toString();
 			let paddedID = videoIDString.padStart(5, '0')
 			return paddedID
 		}
-
 		function newVideo() {
 			let videoPlayer = document.getElementById("video-player")
-			let paddedID
-
-			do {
+			let paddedID = generateRandomID()
+			while (video.src.includes(paddedID)) {
 				paddedID = generateRandomID()
-			} while (idQueue.indexOf(paddedID) > 0)
-
-
-			if (idQueue.length < MAX) {
-				idQueue.push(paddedID)
 			}
-			else {
-				idQueue.shift()
-			}
-
-
 			videoPlayer.src = (paddedID + ".mp4")
 		}
-
-		function modeSwitch() {
-			const darkModeButton = document.getElementById("dark-mode")
-			const bodyElement = document.querySelector('body')
-
-			if (darkModeButton.checked) {
-				bodyElement.style.backgroundColor = "rgb(25, 25, 25)"
-				bodyElement.style.color = "rgb(240, 240, 240)"
-
-				localStorage.setItem("memes.darkMode", true)
-			}
-			else {
-				bodyElement.style.backgroundColor = "rgb(240, 240, 240)"
-				bodyElement.style.color = "rgb(25, 25, 25)"
-
-				localStorage.setItem("memes.darkMode", false)
-			}
-		}
-
-		function setLocalStorage() {
-			const autoPlayButton = document.getElementById("autoplay")
-
-			if (autoPlayButton.checked) {
-				localStorage.setItem("memes.autoPlay", true)
-			}
-			else {
-				localStorage.setItem("memes.autoPlay", false)
-			}
-		}
 	</script>
-	<style>
-		* {
-			text-align: center;
-			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-			margin-bottom: 10px;
-		}
-
-		video {
-			border-radius: 10px;
-			display: block;
-			margin: auto;
-
-			width: 95vw;
-			height: 80vh;
-		}
-
-		button {
-			display: block;
-			position: relative;
-			margin: auto;
-			margin-bottom: 10px;
-			border-color: let(--bg-color);
-			border: 0;
-			background-color: lightgrey;
-			transition: background-color ease-in 100ms;
-			transition: transform linear 50ms;
-
-			border-radius: 25px;
-			height: 2rem;
-		}
-
-		button:hover {
-			background-color: darkgrey;
-			transform: scale(1.1);
-		}
-
-		button:active {
-			transition: background-color linear 20ms;
-			background-color: grey;
-		}
-	</style>
 </head>
 
-<body onload="newVideo()" style="background-color:rgb(240, 240, 240); color:rgb(25, 25, 25)">
-
-	<p>Click button to see new video</p>
-
-	<button type="button" onclick="newVideo()">Get new video</button>
-
-	<input type="checkbox" id="autoplay" title="autoplayButton" value="True" onclick="setLocalStorage()">
-	<label for="checkbox">Autoplay</label>
-
-	<input type="checkbox" id="dark-mode" title="modeSwitchButton" value="True" onclick="modeSwitch()">
-	<label for="checkbox">Dark Mode</label>
-
-	<p>Click player to start memes</p>
-
-	<video src="" id="video-player" controls autoPlay></video>
-
-
+<body class="container-fluid" onload="newVideo()">
+	<div class="d-flex align-self-center justify-content-center align-items-center">
+		<video class="vw-100 vh-100" id="video-player" controls autoPlay></video>
+	</div>
 	<script>
 		const video = document.getElementById("video-player")
-		const autoPlayButton = document.getElementById("autoplay")
 
 		video.onended = (event) => {
-			if (autoPlayButton.checked) {
-				setTimeout(newVideo, 500)
-			}
-			else {
-				video.play()
-			}
-		}
-
-
-		let darkModeCheck = localStorage.getItem("memes.darkMode")
-		if (darkModeCheck === "true") {
-			const darkModeCheckbox = document.getElementById("dark-mode")
-			darkModeCheckbox.checked = true
-			modeSwitch()
-		}
-
-		let autoPlayCheck = localStorage.getItem("memes.autoPlay")
-		if (autoPlayCheck === "true") {
-			autoPlayButton.checked = true
+			setTimeout(newVideo, 500)
 		}
 	</script>
 </body>
\ No newline at end of file
