From 76d825f9c5b31b8e465e8cd55210b1d9d546e96a Mon Sep 17 00:00:00 2001
From: "Jonny_Bro (Nikita)" <48434875+JonnyBro@users.noreply.github.com>
Date: Mon, 24 Feb 2025 18:53:27 +0500
Subject: [PATCH] feat: simple theme selector

---
 components/course_card_orig.html | 58 --------------------------------
 components/footer.html           |  1 +
 components/navbar.html           | 33 +++++++++++-------
 views/admin.ejs                  |  3 ++
 views/index.ejs                  |  3 ++
 views/key.ejs                    |  5 +++
 views/stats.ejs                  |  6 ++++
 views/upload.ejs                 |  5 +++
 8 files changed, 43 insertions(+), 71 deletions(-)
 delete mode 100644 components/course_card_orig.html

diff --git a/components/course_card_orig.html b/components/course_card_orig.html
deleted file mode 100644
index 305af7a..0000000
--- a/components/course_card_orig.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<div class="flex flex-row flex-shrink-0 m-2 p-2 w-fit font-mono
-			bg-red-700
-			drop-shadow-[0_0px_10px_rgba(0,0,0,0.5)]">
-	<div class="flex w-52">
-		<div class="relative">
-			<img src="{mapimagesrc}" style="height: 7.25rem; width: 12.93rem" class="object-cover">
-			<div class="absolute bottom-0 text-xl font-semibold
-						drop-shadow-[0_0px_2px_rgba(0,0,0,1)]">
-				<div class=" bg-black bg-opacity-30 pr-2 pl-1 py-0.5 pt-0" style="max-width: 12rem; overflow: hidden;">
-					<a class="hover:text-yellow-200 transition-all" target="_blank" href="https://steamcommunity.com/sharedfiles/filedetails/?id={mapwid}">{coursemap}</a>
-				</div>
-			</div>
-			<div class="absolute top-0 text-sm font-semibold
-						drop-shadow-[0_0px_2px_rgba(0,0,0,1)]">
-				<div class="bg-black bg-opacity-30 p-1">
-					{elementcount}
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="flex w-96 ml-2">
-		<div class="relative w-full text-left">
-			<div class="h-full w-full grid grid-rows-3 grid-cols-1">
-				<div class="flex flex-col justify-center text-lg font-bold w-11/12">
-					<p class="truncate">{coursename}</p>
-				</div>
-				<div class="flex flex-col justify-center">
-					<div class="truncate w-3/4" style="overflow:hidden;">
-						<i class="fa-solid fa-file w-4"></i>
-						<a title="Click to copy" onclick="event.preventDefault(); navigator.clipboard.writeText('{coursecode}'); const text = this.innerText; this.innerText = 'Copied!'; setTimeout(() => { this.innerText = text }, 1000);" class="hover:text-yellow-200 transition-all" href="#">{coursecode}</a>
-					</div>
-				</div>
-				<div class="flex flex-col justify-center">
-					<div class="truncate w-3/4" style="overflow:hidden;">
-						<i class="fa-solid fa-user w-4"></i>
-						<a title="Click to see SteamID/Name" href="#" onclick="event.preventDefault(); this.innerText === '{uploadername}' ? this.innerText = '{uploaderuid}' : this.innerText = '{uploadername}'">{uploadername}</a>
-					</div>
-				</div>
-				<div class="flex flex-col justify-center">
-					<div class="truncate w-3/4" style="overflow:hidden;">
-						<i class="fa-solid fa-upload w-4"></i>
-						<span>{fdate}</span>
-					</div>
-				</div>
-				<div id="rating" class="text-center absolute bottom-0 right-0">
-					<span id="{coursecode}-likes" class="font-bold">{likecount}</span>
-					<a title="Like" href="#" id="{coursecode}" onclick="event.preventDefault(); like(this)"><i class="hover:text-yellow-200 transition-all fa-solid fa-thumbs-up"></i></a>
-					/
-					<span id="{coursecode}-dislikes" class="font-bold">{dislikecount}</span>
-					<a title="Dislike" href="#" id="{coursecode}" onclick="event.preventDefault(); dislike(this)"><i class="hover:text-yellow-200 transition-all fa-solid fa-thumbs-down"></i></a>
-				</div>
-				<div class="absolute -top-1 right-0 hover:text-yellow-200 transition-all">
-					<a title="Download course file" href="{coursedownload}" download><i class="fa-solid fa-download"></i></a>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
\ No newline at end of file
diff --git a/components/footer.html b/components/footer.html
index d561e9f..d473e78 100644
--- a/components/footer.html
+++ b/components/footer.html
@@ -1,6 +1,7 @@
 <footer class="footer footer-center p-4 bg-base-300 text-base-content font-mono">
 	<div class="block">
 		Coperight @ Jonny_Bro & rlx 2023-<%= new Date().getFullYear() %>
+		<br>
 		<a class="link link-hover" target="_blank" href="https://git.jonnybro.ru/jonny_bro/beatrun-courses-server-docker">[Full source code available here!]</a>
 	</div>
 </footer>
\ No newline at end of file
diff --git a/components/navbar.html b/components/navbar.html
index 83dc577..5f995f0 100644
--- a/components/navbar.html
+++ b/components/navbar.html
@@ -22,6 +22,11 @@
 					Our Discord
 				</a>
 			</li>
+			<label class="cursor-pointer grid place-items-center">
+				<input id="themeSelector" type="checkbox" class="toggle bg-base-content row-start-1 col-start-1 col-span-2"/>
+				<svg class="col-start-2 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+				<svg class="col-start-1 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>
+			</label>
 			<% if (user) { %>
 				<a class="btn btn-sm btn-primary hover:bg-red-700" href="/key"><%= user.personaname %></a>
 				<a class="btn btn-sm btn-primary hover:bg-red-700" href="/upload">Upload</a>
@@ -48,11 +53,11 @@
 				Our Discord
 			</a>
 		</li>
-		<!-- <label class="cursor-pointer grid place-items-center">
+		<label class="cursor-pointer grid place-items-center">
 			<input id="themeSelector" type="checkbox" class="toggle bg-base-content row-start-1 col-start-1 col-span-2"/>
 			<svg class="col-start-2 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
 			<svg class="col-start-1 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>
-		</label> -->
+		</label>
 		<% if (user) { %>
 			<a class="btn btn-sm btn-primary hover:bg-red-700" href="/key"><%= user.personaname %></a>
 			<a class="btn btn-sm btn-primary hover:bg-red-700" href="/upload">Upload</a>
@@ -64,21 +69,23 @@
 			<a class="btn btn-sm btn-primary hover:bg-red-700" href="/admin">Admin</a>
 		<% } %>
 	</ul>
-	<!-- <script>
-		const e = document.getElementById("themeSelector");
 
-		e.addEventListener("change", () => {
+	<script>
+		const element = document.getElementById("themeSelector");
+
+		element.addEventListener("change", () => {
 			event.preventDefault();
 
-			const theme = localStorage.getItem("theme")
+			const theme = localStorage.getItem("theme");
+
+			if (!theme) localStorage.setItem("theme", "black");
 
 			theme === "nord" ? localStorage.setItem("theme", "black") : localStorage.setItem("theme", "nord");
-			document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"));
-		})
 
-		if (localStorage.getItem("theme") === "black")
-			document.getElementById("themeSelector").checked = "checked"
-		else
-			document.getElementById("themeSelector").checked = null
-	</script> -->
+			document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"));
+		});
+
+		if (localStorage.getItem("theme") === "black") document.getElementById("themeSelector").checked = "checked";
+		else document.getElementById("themeSelector").checked = null;
+	</script>
 </nav>
\ No newline at end of file
diff --git a/views/admin.ejs b/views/admin.ejs
index 8b2f2ab..06b9e90 100644
--- a/views/admin.ejs
+++ b/views/admin.ejs
@@ -25,6 +25,9 @@
 	</style>
 
 	<script>
+		// Apply user's theme
+		document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"));
+
 		function sendAction(args) {
 			const { action } = args;
 			const responseBox = document.getElementById("responseBox");
diff --git a/views/index.ejs b/views/index.ejs
index 0722dc0..8582d7e 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -26,6 +26,9 @@
 	</style>
 
 	<script>
+		// Apply user's theme
+		document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"));
+
 		function update() {
 			const page = document.getElementById("pageSelect");
 			const sort = document.getElementById("sortValue");
diff --git a/views/key.ejs b/views/key.ejs
index 61f0409..f4ac178 100644
--- a/views/key.ejs
+++ b/views/key.ejs
@@ -24,6 +24,11 @@
 			-ms-overflow-style: none;
 		}
 	</style>
+
+	<script>
+		// Apply user's theme
+		document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"));
+	</script>
 </head>
 
 <body class="w-screen font-mono">
diff --git a/views/stats.ejs b/views/stats.ejs
index 0c3e522..de42734 100644
--- a/views/stats.ejs
+++ b/views/stats.ejs
@@ -24,10 +24,16 @@
 			-ms-overflow-style: none;
 		}
 	</style>
+
+	<script>
+		// Apply user's theme
+		document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"));
+	</script>
 </head>
 
 <body class="w-screen font-mono">
 	<% include ../components/navbar.html %>
+
 	<div class="hero min-h-screen bg-base-200">
 		<div class="hero-content text-center">
 			<div class="text-center align-top w-full">
diff --git a/views/upload.ejs b/views/upload.ejs
index 4df1b06..a49d6bc 100644
--- a/views/upload.ejs
+++ b/views/upload.ejs
@@ -24,6 +24,11 @@
 			-ms-overflow-style: none;
 		}
 	</style>
+
+	<script>
+		// Apply user's theme
+		document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"));
+	</script>
 </head>
 
 <body class="w-screen font-mono">