24. Sept. 2024, 19:19

_res/_custom.js

@@ -87,19 +87,47 @@ function gradioCustomJS() {
 	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) 60%, black)")
-	body.style.setProperty("--primary-800", "color-mix(in srgb, var(--primary-600) 70%, black)")
-	body.style.setProperty("--primary-900", "color-mix(in srgb, var(--primary-600) 80%, black)")
-	body.style.setProperty("--primary-950", "color-mix(in srgb, var(--primary-600) 90%, black)")
-
-	body.style.setProperty("--block-title-text-color", "var(--neutral-950)")
-	body.style.setProperty("--block-label-text-color", "var(--neutral-950)")
-	body.style.setProperty("--checkbox-label-text-color", "var(--neutral-950)")
+	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))
-	body.style.setProperty("--block-title-text-color", anpasseTextfarbe(usedColor))
-	body.style.setProperty("--block-label-text-color", anpasseTextfarbe(usedColor))
-	body.style.setProperty("--checkbox-label-text-color", 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)
+	})
 
 	const prompt_input = document.querySelector("#prompt_input")
 	prompt_input.setAttribute("autocomplete", "off")
@@ -173,5 +201,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"
 }