28. Sept. 2024, 22:17

_res/_custom.css

@@ -169,7 +169,7 @@ span.svelte-1gfkn6j,
 span.svelte-1gfkn6j,
 .primary.svelte-cmf5ev,
 label.selected.svelte-1k4wjf2.svelte-1k4wjf2.svelte-1k4wjf2 {
-    color: var(--neutral-900) !important;
+    color: var(--text-color-by-luminance) !important;
 }
 
 .md-header {
@@ -182,16 +182,6 @@ label.selected.svelte-1k4wjf2.svelte-1k4wjf2.svelte-1k4wjf2 {
         line-height: 1.5 !important;
     }
 
-    & i.emoji-puls {
-        color: var(--primary-100) !important;
-        animation-name: beat;
-        animation-delay: 0s;
-        animation-direction: normal;
-        animation-duration: 0.6s;
-        animation-iteration-count: infinite;
-        animation-timing-function: ease-in-out;
-    }
-
     & i.waving {
         animation: wink 2s ease infinite;
     }
@@ -201,7 +191,7 @@ label.selected.svelte-1k4wjf2.svelte-1k4wjf2.svelte-1k4wjf2 {
     }
 
     & .heart {
-        color: red;
+        color: var(--cat-red) !important;
     }
 
 }

_res/_custom.js

@@ -1,6 +1,104 @@
 function gradioCustomJS() {
 	console.log("gradioCustomJS Started")
 
+	// MARK: berechne Helligkeit der Akzentfarbe
+	function berechneHelligkeit(rgb) {
+		const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
+		if (!match) {
+			throw new Error("Ungültiges Farbformat")
+		}
+
+		const r = parseInt(match[1]) / 255
+		const g = parseInt(match[2]) / 255
+		const b = parseInt(match[3]) / 255
+
+		const rLin = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4)
+		const gLin = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4)
+		const bLin = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)
+
+		const luminanz = 0.2126 * rLin + 0.7152 * gLin + 0.0722 * bLin
+
+		return luminanz
+	}
+
+	// MARK: Textfarbe bestimmen
+	function anpasseTextfarbe(farbe) {
+		const luminanz = berechneHelligkeit(farbe)
+		const textFarbe = luminanz > 0.4 ? "var(--neutral-950)" : "var(--neutral-50)"
+		console.log("Luminanz: " + luminanz + " Text-Farbe: " + textFarbe)
+
+		return textFarbe
+	}
+
+	// MARK: Body Styles
+	const body = document.querySelector("body")
+	body.className = "dark"
+
+	// MARK: Catppuccin colors
+	const usedColor = "rgb(166, 227, 161)"
+	body.style.setProperty("--cat-rosewater", "rgb(245, 224, 220)")
+	body.style.setProperty("--cat-flamingo", "rgb(242, 205, 205)")
+	body.style.setProperty("--cat-pink", "rgb(245, 194, 231)")
+	body.style.setProperty("--cat-mauve", "rgb(203, 166, 247)")
+	body.style.setProperty("--cat-red", "rgb(243, 139, 168)")
+	body.style.setProperty("--cat-maroon", "rgb(235, 160, 172)")
+	body.style.setProperty("--cat-peach", "rgb(250, 179, 135)")
+	body.style.setProperty("--cat-yellow", "rgb(249, 226, 175)")
+	body.style.setProperty("--cat-green", "rgb(166, 227, 161)")
+	body.style.setProperty("--cat-teal", "rgb(148, 226, 213)")
+	body.style.setProperty("--cat-sky", "rgb(137, 220, 235)")
+	body.style.setProperty("--cat-sapphire", "rgb(116, 199, 236)")
+	body.style.setProperty("--cat-blue", "rgb(137, 180, 250)")
+
+	body.style.setProperty("--primary-600", usedColor)
+	body.style.setProperty("--primary-50", "color-mix(in srgb, var(--primary-600) 5%, white)")
+	body.style.setProperty("--primary-100", "color-mix(in srgb, var(--primary-600) 10%, white)")
+	body.style.setProperty("--primary-200", "color-mix(in srgb, var(--primary-600) 20%, white)")
+	body.style.setProperty("--primary-300", "color-mix(in srgb, var(--primary-600) 60%, white)")
+	body.style.setProperty("--primary-400", "color-mix(in srgb, var(--primary-600) 70%, white)")
+	body.style.setProperty("--primary-500", "color-mix(in srgb, var(--primary-600) 80%, white)")
+	body.style.setProperty("--primary-700", "color-mix(in srgb, var(--primary-600) 80%, black)")
+	body.style.setProperty("--primary-800", "color-mix(in srgb, var(--primary-600) 65%, black)")
+	body.style.setProperty("--primary-900", "color-mix(in srgb, var(--primary-600) 40%, black)")
+	body.style.setProperty("--primary-950", "color-mix(in srgb, var(--primary-600) 30%, black)")
+
+	body.style.setProperty("--button-primary-background-fill", "var(--primary-600)")
+	body.style.setProperty("--button-primary-background-fill-hover", "var(--primary-500)")
+	body.style.setProperty("--blur-value", "0px")
+	body.style.setProperty("--text-color-by-luminance", anpasseTextfarbe(usedColor))
+
+	// MARK: Selectors & Elements
+	const gradioApp = document.querySelector("gradio-app")
+	const gradioContainer = document.querySelector("body > gradio-app > div.gradio-container")
+	const alertModalElem = document.createElement("div")
+	const alertModalElemP = document.createElement("p")
+	const alertModalElemI = document.createElement("i")
+	alertModalElemI.className = "fas fa-exclamation-circle"
+	const alertModalElemSpan = document.createElement("span")
+	alertModalElemSpan.id = "alertModalText"
+	const alertModalElemButton = document.createElement("button")
+	alertModalElemButton.className = "lg primary run-btn svelte-cmf5ev"
+	alertModalElemButton.id = "alertModalBtn"
+	alertModalElemButton.textContent = "Ok"
+	alertModalElemP.id = "alertModalP"
+	alertModalElemP.append(alertModalElemI, alertModalElemSpan)
+	alertModalElem.id = "alertModal"
+	alertModalElem.style.display = "none"
+	alertModalElem.append(alertModalElemP, alertModalElemButton)
+	//alertModalElem.innerHTML = '<p></p>'
+	gradioApp.appendChild(alertModalElem)
+
+	alertModalElemButton.addEventListener("click", () => {
+		oldText = alertModalElemSpan.textContent
+		alertModalElemButton.disabled = true
+		alertModalElemSpan.innerHTML = 'Der "Ok" Button ändert nur diesen Text. 🫢<br/>In 2.5 Sekunden wird wieder die ursprüngliche Meldung gezeigt. Cool oder?'
+		setTimeout(() => {
+			alertModalElemSpan.textContent = oldText
+			alertModalElemButton.disabled = false
+			alertModalElemButton.textContent = "Noch mal?"
+		}, 2500)
+	})
+
 	//component-15
 	const tabNav = document.querySelector("div.tab-nav")
 	tabNav.addEventListener("mouseover", () => {
@@ -25,5 +123,60 @@ function gradioCustomJS() {
 		})
 	})
 
+	// MARK: Element-Ready function
+	function elementReady(selector) {
+		return new Promise((resolve, reject) => {
+			const el = document.querySelector(selector)
+			if (el) {
+				resolve(el)
+			}
+
+			new MutationObserver((mutationRecords, observer) => {
+				Array.from(document.querySelectorAll(selector)).forEach((element) => {
+					resolve(element)
+					observer.disconnect()
+				})
+			}).observe(document.documentElement, {
+				childList: true,
+				subtree: true,
+			})
+		})
+	}
+
+	// MARK: Mobile Check
+	function istMobile() {
+		// Überprüfen, ob das Gerät ein Touchscreen hat
+		if ("ontouchstart" in window || (navigator.maxTouchPoints && window.innerWidth < 768)) {
+			gradioContainer.classList.add("blur-container")
+			body.style.setProperty("--blur-value", "12px")
+			gradioApp.style.height = "calc(100vh - 120px)"
+			alertModalElem.style.display = ""
+			alertModalElemSpan.textContent = "Diese Seite ist nicht für mobile Geräte optimiert. Bitte besuche diese Seite von einem Desktop-Computer aus."
+		} else if (window.innerWidth < 1024) {
+			gradioContainer.classList.add("blur-container")
+			body.style.setProperty("--blur-value", "12px")
+			gradioApp.style.height = "calc(100vh - 120px)"
+			alertModalElem.style.display = ""
+			alertModalElemSpan.textContent = "Bildschirm Auflösung oder Fensterbreite zu gering. Bitte besuche diese Seite von einem Desktop-Computer aus."
+		} else {
+			gradioContainer.classList.remove("blur-container")
+			body.style.setProperty("--blur-value", "0px")
+			gradioApp.style.height = ""
+			alertModalElem.style.display = "none"
+			alertModalElemSpan.textContent = ""
+		}
+	}
+
+	// MARK: Event Listeners
+	window.addEventListener("resize", () => {
+		console.log("Event Window resize.")
+		istMobile()
+	})
+
+	elementReady("body > gradio-app > div.gradio-container").then((element) => {
+		console.log("Element exist: " + element)
+		istMobile()
+	})
+
 	return "Custom Gradio JS"
 }