Initial commit

2025-02-19 00:34:19 +01:00
commit d75e5b1f11
44 changed files with 5970 additions and 0 deletions
--- a/static/js/lockscreenBgHandler.js
+++ b/static/js/lockscreenBgHandler.js
@ -0,0 +1,144 @@
+// Image Handler
+const baseUrl = "https://api.unsplash.com/photos/random?client_id=[KEY]&orientation=landscape&topics=nature";
+const apiKey = "tYOt7Jo94U7dunVcP5gt-kDKDMjWFOGQNsHuhLDLV8k"; // Take from config
+const fullUrl = baseUrl.replace("[KEY]", apiKey);
+
+const showModeImage = "/static/media/showModeLockscreen.jpg"
+
+let credits = document.getElementById("credits");
+
+let currentImageHandle;
+
+// Lock screen or show mode
+let screenState = "lock";
+
+function handleImage() {
+	if(screenState === "lock") {
+		fetch("https://staging.thegreydiamond.de/projects/photoPortfolio/api/getRand.php?uuid=01919dec-b2cd-7adc-8ca2-a071d1169cbc&unsplash=true")
+			.then(response => response.json())
+			.then(data => {
+				// data = {
+				// 	urls: {
+				// 		regular: "https://imageproxy.thegreydiamond.de/ra5iqxlyve6HpjNvC1tzG50a14oIOgiWP95CxIvbBC8/sm:1/kcr:1/aHR0cHM6Ly9zdGFn/aW5nLnRoZWdyZXlk/aWFtb25kLmRlL3By/b2plY3RzL3Bob3Rv/UG9ydGZvbGlvL2Rl/bW9IaVJlcy9QMTE5/MDgzMC1zY2hpbGQu/anBn.webp"
+				// 	},
+				// 	user: {
+				// 		name: "Sören Oesterwind",
+				// 		links: {
+				// 			html: "https://thegreydiamond.de"
+				// 		}
+				// 	}
+				// }
+				if(!currentImageHandle) {
+					// Create a page filling div which contains the image
+					currentImageHandle = document.createElement("div");
+					currentImageHandle.style.position = "absolute";
+					currentImageHandle.style.top = "0";
+					currentImageHandle.style.left = "0";
+					currentImageHandle.style.width = "100%";
+					currentImageHandle.style.height = "100%";
+					currentImageHandle.style.backgroundImage = `url(${data.urls.regular})`;
+					currentImageHandle.style.backgroundSize = "cover";
+					currentImageHandle.style.opacity = 1;
+				} else {
+					// Create a new div behind the current one and delete the old one when the new one is loaded
+					let newImageHandle = document.createElement("div");
+					newImageHandle.style.position = "absolute";
+					newImageHandle.style.top = "0";
+					newImageHandle.style.left = "0";
+					newImageHandle.style.width = "100%";
+					newImageHandle.style.height = "100%";
+					newImageHandle.style.backgroundImage = `url(${data.urls.regular})`;
+					newImageHandle.style.backgroundSize = "cover";
+					newImageHandle.style.opacity = 1;
+					newImageHandle.style.transition = "1s";
+					newImageHandle.style.zIndex = 19999;
+					document.body.appendChild(newImageHandle);
+
+					currentImageHandle.style.opacity = 0;
+					setTimeout(() => {
+						currentImageHandle.remove();
+						newImageHandle.style.zIndex = 200000;
+						currentImageHandle = newImageHandle;
+					}, 1000);
+
+
+
+					// Set the credits
+					credits.innerHTML = `Photo by <a href="${data.user.links.html}" target="_blank">${data.user.name}</a> on <a href="https://unsplash.com" target="_blank">Unsplash</a>`;
+					credits.style.zIndex = 300000;
+				}
+			})
+			.catch(error => {
+				console.error("Error fetching image: ", error);
+			});
+	} else {
+		if(currentImageHandle) {
+			// Check if the image is already loaded
+			if(currentImageHandle.style.backgroundImage === `url("${showModeImage}")`) {
+				return;
+			}
+			// Create a new div behind the current one and delete the old one when the new one is loaded
+			let newImageHandle = document.createElement("div");
+			newImageHandle.style.position = "absolute";
+			newImageHandle.style.top = "0";
+			newImageHandle.style.left = "0";
+			newImageHandle.style.width = "100%";
+			newImageHandle.style.height = "100%";
+			newImageHandle.style.backgroundImage = `url(${showModeImage})`;
+			newImageHandle.style.backgroundSize = "cover";
+			newImageHandle.style.opacity = 1;
+			newImageHandle.style.transition = "1s";
+			document.body.appendChild(newImageHandle);
+
+			setTimeout(() => {
+				currentImageHandle.remove();
+				currentImageHandle = newImageHandle;
+			}, 1000);
+		}
+	}
+}
+
+function handleTimeAndDate() {
+	let time = new Date();
+	let hours = time.getHours();
+	let minutes = time.getMinutes();
+	let day = time.getDate();
+	let month = time.getMonth();
+	month += 1;
+	let year = time.getFullYear();
+
+	let timeHandle = document.getElementById("time");
+	let dateHandle = document.getElementById("date");
+
+	timeHandle.innerHTML = `${hours < 10 ? "0" + hours : hours}:${minutes < 10 ? "0" + minutes : minutes}:${time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds()}`;
+	// Datum in format Montag, 22.12.2024
+	dateHandle.innerHTML = `${getDay(time.getDay())}, ${day < 10 ? "0" + day : day}.${month < 10 ? "0" + month : month}.${year}`;
+}
+
+function getDay(day) {
+	switch(day) {
+		case 0:
+			return "Sonntag";
+		case 1:
+			return "Montag";
+		case 2:
+			return "Dienstag";
+		case 3:
+			return "Mittwoch";
+		case 4:
+			return "Donnerstag";
+		case 5:
+			return "Freitag";
+		case 6:
+			return "Samstag";
+	}
+}
+
+// Set the image handler to run every 10 minutes
+setInterval(handleImage, 60 * 1000 * 10);
+handleImage();
+handleImage()
+
+// Set the time and date handler to run every minute
+setInterval(handleTimeAndDate, 500);
+handleTimeAndDate();