{"id":13936,"date":"2025-01-12T17:36:59","date_gmt":"2025-01-12T16:36:59","guid":{"rendered":"https:\/\/www.builtbybricks.art\/?page_id=13936"},"modified":"2025-01-27T20:14:44","modified_gmt":"2025-01-27T19:14:44","slug":"pixelart","status":"publish","type":"page","link":"https:\/\/www.builtbybricks.art\/en\/pixelart\/","title":{"rendered":"pixelart"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Starry Sky with More White Stars<\/title>\r\n <style>\r\n \/* Schwarzer Hintergrund *\/\r\n html, body {\r\n margin: 0;\r\n padding: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: transparent; \/* Hintergrundfarbe *\/\r\n overflow: hidden;\r\n }\r\n\r\n #sky {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: transparent; \/* Fest schwarzer Hintergrund *\/\r\n }\r\n\r\n \/* Sterne *\/\r\n .star {\r\n position: absolute;\r\n width: 2px;\r\n height: 2px;\r\n border-radius: 50%;\r\n animation: blink 3s infinite ease-in-out;\r\n opacity: 0.8;\r\n }\r\n\r\n \/* Animation f\u00fcr das Blinken *\/\r\n @keyframes blink {\r\n 0%, 100% {\r\n opacity: 0.8;\r\n }\r\n 50% {\r\n opacity: 0.3;\r\n }\r\n }\r\n\r\n \/* Farben f\u00fcr Neonsterne *\/\r\n .star.white {\r\n background-color: white;\r\n }\r\n\r\n .star.blue {\r\n background-color: #00f; \/* Neonblau *\/\r\n }\r\n\r\n .star.red {\r\n background-color: #f00; \/* Neonrot *\/\r\n }\r\n\r\n .star.green {\r\n background-color: #0f0; \/* Neongr\u00fcn *\/\r\n }\r\n\r\n .star.yellow {\r\n background-color: #ff0; \/* Neongelb *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"sky\"><\/div>\r\n <script>\r\n document.addEventListener(\"DOMContentLoaded\", () => {\r\n const sky = document.getElementById(\"sky\");\r\n\r\n \/\/ Berechnet die Anzahl der Sterne basierend auf der Bildschirmfl\u00e4che\r\n const calculateStars = () => {\r\n const screenArea = window.innerWidth * window.innerHeight; \/\/ Bildschirmfl\u00e4che\r\n const baseDensity = 0.00005; \/\/ Basisdichte der Sterne (Sterne pro Pixel)\r\n return Math.round(screenArea * baseDensity); \/\/ Anzahl der Sterne berechnen\r\n };\r\n\r\n \/\/ Sterne erstellen\r\n const createStars = (numStars) => {\r\n \/\/ Entfernt vorhandene Sterne, wenn das Fenster neu geladen wird\r\n sky.innerHTML = '';\r\n\r\n for (let i = 0; i < numStars; i++) {\r\n const star = document.createElement(\"div\");\r\n\r\n \/\/ Zuf\u00e4llige Farben f\u00fcr Sterne\r\n const colors = ['white', 'white', 'white', 'blue', 'red', 'green', 'yellow']; \/\/ Mehr wei\u00dfe Sterne\r\n const randomColor = colors[Math.floor(Math.random() * colors.length)];\r\n star.className = `star ${randomColor}`;\r\n\r\n \/\/ Zuf\u00e4llige Position\r\n star.style.top = `${Math.random() * 100}vh`;\r\n star.style.left = `${Math.random() * 100}vw`;\r\n\r\n \/\/ Zuf\u00e4llige Verz\u00f6gerung f\u00fcr das Blinken\r\n star.style.animationDelay = `${Math.random() * 3}s`;\r\n\r\n \/\/ Zuf\u00e4llige Gr\u00f6\u00dfe f\u00fcr den Stern\r\n const size = Math.random() * 2 + 1; \/\/ 1px bis 3px\r\n star.style.width = `${size}px`;\r\n star.style.height = `${size}px`;\r\n\r\n sky.appendChild(star);\r\n }\r\n };\r\n\r\n \/\/ Initial Sterne erstellen\r\n const initialStars = calculateStars();\r\n createStars(initialStars);\r\n\r\n \/\/ Sterne neu erstellen, wenn die Fenstergr\u00f6\u00dfe ge\u00e4ndert wird\r\n window.addEventListener(\"resize\", () => {\r\n const updatedStars = calculateStars();\r\n createStars(updatedStars);\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ebbb9c3 e-con-full e-flex e-con e-parent\" data-id=\"ebbb9c3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a5efd8b elementor-widget elementor-widget-global elementor-global-15393 elementor-widget-html\" data-id=\"a5efd8b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"de\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>15s Einflug \u2013 10s Pause \u2013 5s Abflug (mit Timer)<\/title>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/p5@1.6.0\/lib\/p5.min.js\"><\/script>\r\n <style>\r\n html, body {\r\n margin: 0; \r\n padding: 0; \r\n height: 100%;\r\n background: #eee; \r\n overflow: hidden;\r\n }\r\n canvas {\r\n position: absolute;\r\n top: 0; \r\n left: 0;\r\n z-index: 9998;\r\n image-rendering: pixelated;\r\n pointer-events: none; \/* Klicks gehen durch das Canvas hindurch *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<script>\r\n\/**\r\n * Zeitkonstanten (Millisekunden)\r\n * - Einflug: 15s\r\n * - Pause: 10s\r\n * - Abflug: 5s\r\n *\/\r\nconst DUR_IN = 15000; \/\/ 15 Sekunden Einflug\r\nconst DUR_WAIT = 10000; \/\/ 10 Sekunden Pause\r\nconst DUR_OUT = 5000; \/\/ 5 Sekunden Abflug\r\n\r\n\/\/ Einstellungen\r\nlet amplitude = 300;\r\nlet offsetFromLeft = 50;\r\nlet offsetFromBottom = 50;\r\nlet basePixelSize = 1;\r\n\r\n\/\/ Phasen (0=Einflug, 1=Pause, 2=Abflug)\r\nlet phase = 0;\r\nlet timeInStart = 0; \/\/ Startzeit Einflug\r\nlet timeOutStart = 0; \/\/ Startzeit Abflug\r\n\r\nlet finalY; \/\/ Endposition Y nach Einflug\r\nlet xEnd, yEnd;\r\n\r\n\/\/ Easing-Funktionen\r\nfunction easeInOutQuad(x) {\r\n \/\/ Anfang & Ende langsam, Mitte schnell\r\n return (x < 0.5) \r\n ? 2 * x * x \r\n : 1 - Math.pow(-2*x + 2, 2) \/ 2;\r\n}\r\nfunction easeInQuad(x){\r\n \/\/ Start langsam, Ende schnell\r\n return x * x;\r\n}\r\n\r\n\/\/ Timer\r\nlet globalStartTime = 0;\r\n\r\n\/\/ Bild\r\nlet img;\r\nfunction preload(){\r\n img = loadImage(\r\n \"https:\/\/www.builtbybricks.art\/wp-content\/uploads\/2025\/01\/7995b1a2-b6a9-4283-857c-41d974b182d1-png.webp\"\r\n );\r\n}\r\n\r\nfunction setup(){\r\n createCanvas(windowWidth, windowHeight);\r\n noSmooth();\r\n phase = 0;\r\n \/\/ Start Einflug\r\n timeInStart = millis();\r\n globalStartTime = timeInStart; \r\n}\r\n\r\nfunction draw(){\r\n clear();\r\n\r\n \/\/ ============== Timer-Anzeige ==============\r\n let totalElapsed = (millis() - globalStartTime) \/ 1000;\r\n textSize(20);\r\n fill(50);\r\n text(\"Zeit: \" + totalElapsed.toFixed(1) + \"s\", 20, 30);\r\n\r\n \/\/ ============== Responsives Skalieren ==============\r\n let factor = width \/ 1920;\r\n let actualPixelSize = Math.min(basePixelSize * factor, 1);\r\n\r\n let scaledImgWidth = img.width * actualPixelSize;\r\n let scaledImgHeight = img.height * actualPixelSize;\r\n\r\n \/\/ Einflug-Ziel\r\n xEnd = offsetFromLeft + 20;\r\n yEnd = height - offsetFromBottom - scaledImgHeight + 100;\r\n\r\n \/\/ Phasen\r\n if (phase === 0){\r\n drawEinflug(scaledImgWidth, scaledImgHeight, actualPixelSize);\r\n }\r\n else if (phase === 1){\r\n drawPause(scaledImgWidth, scaledImgHeight, actualPixelSize);\r\n }\r\n else if (phase === 2){\r\n drawAbflug(scaledImgWidth, scaledImgHeight, actualPixelSize);\r\n }\r\n}\r\n\r\n\/\/ --------------- Einflug (15s) ---------------\r\nfunction drawEinflug(imgW, imgH, scaleVal){\r\n let now = millis();\r\n let elapsed = now - timeInStart;\r\n \/\/ rawIn 0..1 linear\r\n let rawIn = elapsed \/ DUR_IN;\r\n if (rawIn > 1) rawIn = 1;\r\n\r\n \/\/ => easeInOutQuad => Anfang & Ende langsam, Mitte schnell\r\n let fractionIn = easeInOutQuad(rawIn);\r\n\r\n \/\/ Bogen\r\n let xPos = lerp(width, xEnd, fractionIn);\r\n let yPos = lerp(0, yEnd, fractionIn) - amplitude * Math.sin(Math.PI * fractionIn);\r\n\r\n \/\/ Zeichnen\r\n push();\r\n translate(xPos, yPos);\r\n scale(scaleVal);\r\n image(img, 0, 0);\r\n pop();\r\n\r\n \/\/ Fertig => Pause\r\n if (rawIn >= 1){\r\n finalY = yPos; \r\n phase = 1; \r\n \/\/ 10s Pause => Abflug\r\n setTimeout(() => {\r\n phase = 2;\r\n timeOutStart = millis();\r\n }, DUR_WAIT);\r\n }\r\n}\r\n\r\n\/\/ --------------- Pause (10s) ---------------\r\nfunction drawPause(imgW, imgH, scaleVal){\r\n \/\/ Bild ruhend an finalY\r\n push();\r\n translate(xEnd, finalY);\r\n scale(scaleVal);\r\n image(img, 0, 0);\r\n pop();\r\n}\r\n\r\n\/\/ --------------- Abflug (5s) ---------------\r\nfunction drawAbflug(imgW, imgH, scaleVal){\r\n let now = millis();\r\n let elapsed = now - timeOutStart; \r\n let rawOut = elapsed \/ DUR_OUT;\r\n if (rawOut > 1) rawOut = 1;\r\n\r\n \/\/ => easeInQuad => Start langsam, Ende schnell\r\n let fractionOut = easeInQuad(rawOut);\r\n\r\n \/\/ Start finalY => Ende = -imgH (oben raus)\r\n let yPos = lerp(finalY, -imgH, fractionOut);\r\n let xPos = xEnd;\r\n\r\n \/\/ Zeichnen\r\n push();\r\n translate(xPos, yPos);\r\n scale(scaleVal);\r\n image(img, 0, 0);\r\n pop();\r\n\r\n \/\/ Fertig => noLoop()\r\n if (rawOut >= 1){\r\n noLoop();\r\n }\r\n}\r\n\r\nfunction windowResized(){\r\n resizeCanvas(windowWidth, windowHeight);\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9af55f6 e-con-full e-flex e-con e-parent\" data-id=\"9af55f6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2f032f6 elementor-widget elementor-widget-html\" data-id=\"2f032f6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Slider-Controlled Music<\/title>\r\n <style>\r\n \/* Wrapper f\u00fcr den Schieberegler *\/\r\n #volume-control-wrapper {\r\n display: flex;\r\n align-items: center; \/* Vertikal zentrieren innerhalb des Containers *\/\r\n justify-content: center; \/* Horizontal zentrieren innerhalb des Containers *\/\r\n position: fixed;\r\n top: 50px; \/* Abstand von oben *\/\r\n left: 0;\r\n width: 100%; \/* Volle Breite *\/\r\n padding: 10px;\r\n z-index: 1000; \/* Sicherstellen, dass es im Vordergrund bleibt *\/\r\n background: transparent; \/* Transparenter Hintergrund *\/\r\n }\r\n\r\n \/* Schieberegler *\/\r\n #volume-slider {\r\n -webkit-appearance: none;\r\n width: 100%; \/* Volle Breite des Containers *\/\r\n height: 0px; \/* Unsichtbare Linie *\/\r\n background: transparent; \/* Kein Hintergrund *\/\r\n outline: none;\r\n cursor: pointer;\r\n }\r\n\r\n \/* Schieberegler Daumen mit Bild (responsiv) *\/\r\n #volume-slider::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n appearance: none;\r\n width: 25vw; \/* Responsiv: 25% der Bildschirmbreite *\/\r\n height: 25vw; \/* Responsiv: 25% der Bildschirmbreite *\/\r\n max-width: 200px; \/* Maximalgr\u00f6\u00dfe *\/\r\n max-height: 200px; \/* Maximalgr\u00f6\u00dfe *\/\r\n background: url('https:\/\/www.builtbybricks.art\/wp-content\/uploads\/2025\/01\/e7fdd094-d2ab-4a72-9196-7eb4b5c08503-png.webp') no-repeat center center;\r\n background-size: contain; \/* Bild sichtbar und vollst\u00e4ndig anzeigen *\/\r\n border-radius: 50%;\r\n cursor: pointer;\r\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); \/* Schatten um das Bild *\/\r\n }\r\n\r\n #volume-slider::-moz-range-thumb {\r\n width: 25vw; \/* Responsiv: 25% der Bildschirmbreite *\/\r\n height: 25vw; \/* Responsiv: 25% der Bildschirmbreite *\/\r\n max-width: 200px; \/* Maximalgr\u00f6\u00dfe *\/\r\n max-height: 200px; \/* Maximalgr\u00f6\u00dfe *\/\r\n background: url('https:\/\/www.builtbybricks.art\/wp-content\/uploads\/2025\/01\/e7fdd094-d2ab-4a72-9196-7eb4b5c08503-png.webp') no-repeat center center;\r\n background-size: contain; \/* Bild sichtbar und vollst\u00e4ndig anzeigen *\/\r\n border-radius: 50%;\r\n cursor: pointer;\r\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); \/* Schatten um das Bild *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- Schieberegler -->\r\n <div id=\"volume-control-wrapper\">\r\n <input id=\"volume-slider\" type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0\"> <!-- Schieberegler -->\r\n <\/div>\r\n\r\n <!-- Hintergrundmusik -->\r\n <audio id=\"background-music\" loop>\r\n <!-- Cache-Busting durch Zufallsparameter -->\r\n <source src=\"https:\/\/www.builtbybricks.art\/wp-content\/uploads\/2024\/12\/kim-lightyear-angel-eyes-chiptune-edit-110226.mp3?nocache=\" type=\"audio\/mpeg\">\r\n <\/audio>\r\n\r\n <script>\r\n document.addEventListener(\"DOMContentLoaded\", function () {\r\n const volumeSlider = document.getElementById(\"volume-slider\");\r\n const backgroundMusic = document.getElementById(\"background-music\");\r\n let isMusicStarted = false; \/\/ \u00dcberpr\u00fcfung, ob die Musik gestartet wurde\r\n\r\n \/\/ Startet die Musik, wenn der Slider nicht mehr auf der Ausgangsposition ist\r\n const startMusicIfSliderMoved = () => {\r\n if (!isMusicStarted) {\r\n backgroundMusic.volume = parseFloat(volumeSlider.value); \/\/ Setzt die Lautst\u00e4rke vor dem Start\r\n backgroundMusic.play()\r\n .then(() => {\r\n console.log(\"Musik gestartet.\");\r\n isMusicStarted = true; \/\/ Musik als gestartet markieren\r\n })\r\n .catch((error) => {\r\n console.error(\"Autoplay blockiert:\", error);\r\n });\r\n }\r\n };\r\n\r\n \/\/ Lautst\u00e4rkeregelung \u00fcber den Schieberegler\r\n volumeSlider.addEventListener(\"change\", () => {\r\n startMusicIfSliderMoved(); \/\/ Startet die Musik bei der ersten Bewegung\r\n });\r\n\r\n volumeSlider.addEventListener(\"input\", (event) => {\r\n const volume = parseFloat(event.target.value); \/\/ Wert des Sliders (0 bis 1)\r\n if (!isMusicStarted && volume > 0) {\r\n startMusicIfSliderMoved(); \/\/ Startet die Musik bei der ersten Bewegung\r\n }\r\n backgroundMusic.volume = volume; \/\/ Lautst\u00e4rke des Audioelements anpassen\r\n });\r\n\r\n \/\/ \u00dcberwachung des Audio-Status\r\n backgroundMusic.addEventListener(\"play\", () => {\r\n console.log(\"Audioelement wird abgespielt.\");\r\n });\r\n\r\n backgroundMusic.addEventListener(\"volumechange\", () => {\r\n console.log(`Aktuelle Lautst\u00e4rke: ${backgroundMusic.volume}`);\r\n });\r\n\r\n backgroundMusic.addEventListener(\"error\", (error) => {\r\n console.error(\"Fehler beim Laden der Audiodatei:\", error);\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-26a7450 e-flex e-con-boxed e-con e-parent\" data-id=\"26a7450\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7ea02a0 elementor-widget elementor-widget-html\" data-id=\"7ea02a0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"de\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Bild als Footer mit Originalgr\u00f6\u00dfe<\/title>\r\n <style>\r\n html, body {\r\n margin: 0;\r\n padding: 0;\r\n height: 100%;\r\n background-color: #000; \/* Hintergrundfarbe *\/\r\n }\r\n\r\n .footer-image {\r\n position: fixed; \/* Fixiert das Bild am unteren Rand *\/\r\n bottom: 0; \/* Am unteren Rand des Viewports *\/\r\n left: 50%; \/* Zentriert das Bild horizontal *\/\r\n transform: translateX(-50%); \/* Korrigiert die Zentrierung *\/\r\n width: 100%; \/* Passt sich an die Breite des Bildschirms an *\/\r\n max-width: 720px; \/* Maximale Breite des Bildes in Originalgr\u00f6\u00dfe *\/\r\n height: auto; \/* Beibehaltung des Seitenverh\u00e4ltnisses *\/\r\n max-height: 100%; \/* Bild \u00fcberschreitet nie die H\u00f6he des Viewports *\/\r\n z-index: 999; \/* \u00dcberlagert andere Inhalte *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- Bild als Footer -->\r\n <img decoding=\"async\" class=\"footer-image\" src=\"https:\/\/www.builtbybricks.art\/wp-content\/uploads\/2025\/01\/f5cfe983-321a-42bd-9e20-ca0f76005292-png.webp\" alt=\"Footer Bild\" title=\"\">\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7573822 e-flex e-con-boxed e-con e-parent\" data-id=\"7573822\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-15420 elementor-widget elementor-widget-global elementor-global-15420 elementor-widget-html\" data-id=\"15420\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Press Spacebar<\/title>\r\n <style>\r\n \/* Importiere eine typische 80er-Jahre-Schriftart *\/\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Press+Start+2P&display=swap');\r\n\r\n \/* Spacebar Prompt Styling *\/\r\n #spacebar-prompt {\r\n position: fixed;\r\n bottom: 20px; \/* Position oberhalb der Fu\u00dfzeile *\/\r\n left: 50%;\r\n transform: translateX(-50%);\r\n color: white;\r\n font-size: clamp(0.6rem, 1.5vw, 1.2rem); \/* Dynamische Schriftgr\u00f6\u00dfe mit mind. 0.6rem *\/\r\n text-align: center;\r\n font-family: 'Press Start 2P', cursive;\r\n z-index: 9999; \/* H\u00f6chste Priorit\u00e4t, bleibt \u00fcber allen anderen Elementen *\/\r\n pointer-events: auto; \/* Erm\u00f6glicht Klicks auf den Text *\/\r\n opacity: 1;\r\n animation: fade-in-out 2s infinite; \/* Dauerhafte Animation *\/\r\n white-space: nowrap; \/* Verhindert Zeilenumbr\u00fcche *\/\r\n padding: 0 5px; \/* Mindestabstand von 5px links und rechts *\/\r\n box-sizing: border-box; \/* Padding wird in die Breite einbezogen *\/\r\n max-width: calc(100% - 10px); \/* Sorgt f\u00fcr Abstand von 5px links und rechts *\/\r\n overflow: hidden; \/* Verhindert, dass der Text abgeschnitten wird *\/\r\n background: transparent; \/* Der Container-Hintergrund bleibt transparent *\/\r\n }\r\n\r\n \/* Styling f\u00fcr das Wort \"spacebar\" als Button *\/\r\n #spacebar-prompt .key {\r\n display: inline-block;\r\n background: rgba(255, 255, 255, 0.2); \/* Beibehaltung des farbigen Hintergrunds *\/\r\n color: white;\r\n padding: 0.4em 0.8em;\r\n border-radius: 5px;\r\n font-weight: bold;\r\n text-align: center;\r\n vertical-align: middle;\r\n line-height: 1.5;\r\n text-shadow: 1px 1px 0 black, \/* Schwarze Kontur f\u00fcr Text *\/\r\n -1px 1px 0 black,\r\n 1px -1px 0 black,\r\n -1px -1px 0 black;\r\n box-shadow: 0 0 0 2px black; \/* Schwarze Kontur um den Button *\/\r\n }\r\n\r\n \/* Animation f\u00fcr den Blink-Effekt *\/\r\n @keyframes fade-in-out {\r\n 0%, 100% {\r\n opacity: 1;\r\n }\r\n 50% {\r\n opacity: 0.5;\r\n }\r\n }\r\n\r\n \/* Optionaler Hintergrundstil *\/\r\n body {\r\n margin: 0;\r\n background: transparent; \/* Der Seitenhintergrund bleibt transparent *\/\r\n height: 100vh;\r\n color: white;\r\n overflow: hidden;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"spacebar-prompt\" onclick=\"redirectToGoogle()\">\r\n Press <span class=\"key\">spacebar<\/span> to skip intro\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Funktion zum \u00d6ffnen von Google\r\n function redirectToGoogle() {\r\n window.location.href = \"https:\/\/www.google.de\";\r\n }\r\n\r\n \/\/ \u00dcberwacht das Dr\u00fccken einer Taste\r\n document.addEventListener('keydown', (event) => {\r\n if (event.code === 'Space') { \/\/ Wenn die Leertaste gedr\u00fcckt wird\r\n redirectToGoogle();\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-65f4ef8 e-flex e-con-boxed e-con e-parent\" data-id=\"65f4ef8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2f4112a elementor-widget elementor-widget-html\" data-id=\"2f4112a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"de\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Bild mit Neon-Effekt und Text<\/title>\r\n <style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n height: 100vh;\r\n display: flex;\r\n justify-content: center;\r\n align-items: flex-start; \/* Anfangsposition *\/\r\n background-color: black; \/* Schwarzer Hintergrund *\/\r\n overflow: hidden;\r\n }\r\n\r\n #custom-fade-container {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n opacity: 0;\r\n transition: opacity 3s ease-in-out;\r\n position: relative;\r\n top: 50%; \/* Verschiebt den Container 50% nach unten *\/\r\n }\r\n\r\n #custom-fade-container.visible-custom {\r\n opacity: 1;\r\n }\r\n\r\n #custom-image {\r\n position: relative;\r\n max-width: 45%;\r\n max-height: 45%;\r\n filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 30px #fff); \/* Wei\u00dfer Neon-Effekt *\/\r\n }\r\n\r\n #custom-text {\r\n font-family: Arial, sans-serif;\r\n font-size: 2rem;\r\n color: white; \/* Einfacher wei\u00dfer Text *\/\r\n opacity: 0; \/* Unsichtbar zu Beginn *\/\r\n transition: opacity 3s ease-in-out;\r\n }\r\n\r\n #custom-text.visible {\r\n opacity: 1;\r\n }\r\n\r\n #second-image-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n opacity: 0; \/* Unsichtbar zu Beginn *\/\r\n transition: opacity 3s ease-in-out;\r\n }\r\n\r\n #second-image-container.visible {\r\n opacity: 1;\r\n }\r\n\r\n #second-image {\r\n position: relative;\r\n max-width: 45%;\r\n max-height: 45%;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"custom-fade-container\">\r\n <img decoding=\"async\" id=\"custom-image\" src=\"https:\/\/www.builtbybricks.art\/wp-content\/uploads\/2025\/01\/91ba4dde-ce92-42e9-8712-07a2f0c4c692-png.webp\" alt=\"Neon Bild\" title=\"\">\r\n <\/div>\r\n <div id=\"custom-text\">Presents<\/div>\r\n <div id=\"second-image-container\">\r\n <img decoding=\"async\" id=\"second-image\" src=\"https:\/\/www.builtbybricks.art\/wp-content\/uploads\/2025\/01\/23e425f2-efb5-4665-9300-d09ba883c7d9-png.webp\" alt=\"Zweites Bild\" title=\"\">\r\n <\/div>\r\n\r\n <script>\r\n (function() {\r\n const customContainer = document.getElementById('custom-fade-container');\r\n const customText = document.getElementById('custom-text');\r\n const secondImageContainer = document.getElementById('second-image-container');\r\n\r\n \/\/ Einblendungsverz\u00f6gerung von 15 Sekunden\r\n setTimeout(() => {\r\n customContainer.classList.add('visible-custom');\r\n\r\n \/\/ Nach 7 Sekunden das erste Bild ausblenden\r\n setTimeout(() => {\r\n customContainer.classList.remove('visible-custom');\r\n\r\n \/\/ Nach dem Ausblenden des Bildes den Text \"Presents\" anzeigen\r\n setTimeout(() => {\r\n customText.classList.add('visible');\r\n\r\n \/\/ Text \"Presents\" f\u00fcr 3 Sekunden anzeigen\r\n setTimeout(() => {\r\n customText.classList.remove('visible');\r\n\r\n \/\/ Zweites Bild dauerhaft anzeigen\r\n setTimeout(() => {\r\n secondImageContainer.classList.add('visible');\r\n }, 1000);\r\n }, 3000);\r\n }, 3000);\r\n }, 7000);\r\n }, 15000);\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Starry Sky with More White Stars 15s Einflug \u2013 10s Pause \u2013 5s Abflug (mit Timer) Slider-Controlled Music Bild als Footer mit Originalgr\u00f6\u00dfe Press Spacebar Press spacebar to skip intro Bild mit Neon-Effekt und Text Presents<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"federated","footnotes":""},"class_list":["post-13936","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages\/13936","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/comments?post=13936"}],"version-history":[{"count":1070,"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages\/13936\/revisions"}],"predecessor-version":[{"id":15620,"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages\/13936\/revisions\/15620"}],"wp:attachment":[{"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/media?parent=13936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}