diff --git a/adventskalender/2025/content/day01.html b/adventskalender/2025/content/day01.html index 15658c5..ec31617 100644 --- a/adventskalender/2025/content/day01.html +++ b/adventskalender/2025/content/day01.html @@ -88,8 +88,8 @@ - + \ No newline at end of file diff --git a/adventskalender/2025/js/background.js b/adventskalender/2025/js/background.js index 49d3d2b..b708c8c 100644 --- a/adventskalender/2025/js/background.js +++ b/adventskalender/2025/js/background.js @@ -39,7 +39,6 @@ link.href = path; } - // === Setze Favicon direkt === const faviconPath = `${basePath}1920/webp/${filename}.webp`; setFavicon(faviconPath); @@ -51,70 +50,76 @@ if (!picture || !img || !sources) return; - // === Daumenkino (nur für Tag 1, wenn Popup geladen wurde) === - if (dayToShow === 1) { - document.addEventListener("day01-loaded", () => { - const thumbkino = document.querySelector(".thumbkino-video"); - if (!thumbkino) { - console.warn("[Bratonien] Kein Daumenkino-Element gefunden."); - return; - } + // === Daumenkino für Tag 1 === + document.addEventListener("day01-loaded", () => { + const thumbkino = document.querySelector(".thumbkino-video"); + if (!thumbkino) { + console.warn("[Bratonien] Kein Daumenkino-Element gefunden."); + return; + } - const formats = ["webm", "mp4"]; - const resolutions = [ - "nHD", - "FWVGA", - "qHD", - "HD", - "HDplus", - "FullHD", - "1440p", - "4K", - ]; - const breakpoints = [640, 854, 960, 1280, 1600, 1920, 2560, 3840]; + const formats = ["webm", "mp4"]; + const resolutions = [ + "nHD", + "FWVGA", + "qHD", + "HD", + "HDplus", + "FullHD", + "1440p", + "4K", + ]; + const breakpoints = [640, 854, 960, 1280, 1600, 1920, 2560, 3840]; - // alte Quellen entfernen - while (thumbkino.firstChild) thumbkino.removeChild(thumbkino.firstChild); + // aktuelle Quellen komplett entfernen + while (thumbkino.firstChild) thumbkino.removeChild(thumbkino.firstChild); - formats.forEach((format) => { - resolutions.forEach((res, i) => { - const mediaQuery = - i === resolutions.length - 1 - ? "(min-width: 2561px)" - : `(max-width: ${breakpoints[i]}px)`; + // neue Quellen basierend auf aktuellem Tag hinzufügen + formats.forEach((format) => { + resolutions.forEach((res, i) => { + const mediaQuery = + i === resolutions.length - 1 + ? "(min-width:2561px)" + : `(max-width:${breakpoints[i]}px)`; - const source = document.createElement("source"); - source.src = `/${YEAR}/assets/videos/${res}/${format}/${padded}.${format}`; - source.type = `video/${format}`; - source.media = mediaQuery; - thumbkino.appendChild(source); - }); + const source = document.createElement("source"); + source.src = `/${YEAR}/assets/videos/${res}/${format}/${padded}.${format}`; + source.type = `video/${format}`; + source.media = mediaQuery; + thumbkino.appendChild(source); }); - - thumbkino.load(); - thumbkino.play().catch(() => {}); - - console.log(`[Bratonien] Daumenkino gesetzt für Tag ${padded}`); }); - } + // Video neu initialisieren + thumbkino.pause(); + thumbkino.load(); + + // Sicherstellen, dass das neue Video vollständig geladen ist, bevor es startet + thumbkino.addEventListener( + "loadeddata", + () => { + thumbkino.currentTime = 0; + thumbkino.play().catch(() => {}); + console.log(`[Bratonien] Daumenkino aktualisiert für Tag ${padded}`); + }, + { once: true } + ); + }); + + // === Responsive Hintergrundbilder === const breakpoints = [420, 768, 1024, 1366, 1600, 1920, 2560, 3840]; - // === für AVIF und WebP aktualisieren === sources.forEach((source) => { const type = source.getAttribute("type"); - const format = type?.split("/")[1]; // "avif" oder "webp" + const format = type?.split("/")[1]; if (!format) return; const newSrcset = breakpoints - .map( - (bp) => `${basePath}${bp}/${format}/${filename}.${format} ${bp}w` - ) + .map((bp) => `${basePath}${bp}/${format}/${filename}.${format} ${bp}w`) .join(", "); source.setAttribute("srcset", newSrcset); }); - // === (JPEG-Fallback) === const jpegSrcset = breakpoints .map((bp) => `${basePath}${bp}/jpeg/${filename}.jpeg ${bp}w`) .join(", "); diff --git a/adventskalender/2025/js/popup.js b/adventskalender/2025/js/popup.js index 1c1b665..e5b7d82 100644 --- a/adventskalender/2025/js/popup.js +++ b/adventskalender/2025/js/popup.js @@ -1,11 +1,10 @@ // Adventskalender 2025 – Popup-Logik (Bratonien Edition) const popupOverlay = document.getElementById("popup-overlay"); -const popupBox = document.getElementById("popup-box"); const popupContent = document.getElementById("popup-content"); const popupClose = document.getElementById("popup-close"); -let activeSound = null; // aktuell laufender Hintergrundsound +let activeDay = null; // === Platzhalterfunktion === function placeholder(text) { @@ -20,31 +19,31 @@ function placeholder(text) { const popupData = { 1: { title: "🎁 Adventskalenderstart + Daumenkino", content: placeholder("QR-Code zum Daumenkino & Intro-Post") }, 2: { title: "🍰 Foodcheck: Tassenkuchen", content: placeholder("3-Zutaten-Rezept – Quickclip folgt") }, - 3: { title: "🎧 Mini-Podcast: Kindheitsweihnachten", content: placeholder("Audioaufnahme folgt – Thema: Kindheitsweihnachten") }, - 4: { title: "🎞️ Mini-Comic", content: placeholder("Comic (1–3 Panels) folgt") }, - 5: { title: "👗 Cosplay-Winter-Transformation", content: placeholder("Reel oder Kurzvideo folgt") }, - 6: { title: "☕ Foodcheck: Winterdrink", content: placeholder("Rezeptclip / Ästhetikaufnahme folgt") }, - 7: { title: "🎧 Mini-Podcast: Was ist Bratonien?", content: placeholder("Kurzpodcast mit Stimme & Haltung folgt") }, - 8: { title: "📱 Bratonien Icon-Pack", content: placeholder("Download-Link & Vorschau folgen") }, - 9: { title: "🍽️ Foodcheck: Last-Minute-Snack", content: placeholder("Schneller Clip / Humorige Variante folgt") }, - 10: { title: "🥕 Fiktive Bratonien-Tradition", content: placeholder("Text oder Kurzclip zur Möhre auf dem Fenstersims folgt") }, - 11: { title: "👑 Cosplay-Inspo: Accessoires", content: placeholder("Foto / Nahaufnahme folgt") }, - 12: { title: "🎥 POV: So beginnt ein Bratonien-Stream", content: placeholder("Stream-Intro-Video folgt") }, - 13: { title: "🎙️ Mini-Podcast: Weihnachtscringe", content: placeholder("Podcastaufnahme folgt") }, - 14: { title: "🍪 Foodcheck: Last-Minute-Plätzchen", content: placeholder("Clip oder Foto folgt") }, - 15: { title: "🧠 Mini-Podcast: Der große Wunsch", content: placeholder("Kurzer Audio-Text folgt") }, - 16: { title: "📦 5 Dinge, die du nicht mehr kaufen solltest", content: placeholder("Humor-Reel folgt") }, - 17: { title: "🎞️ Die besten Weihnachtsfilme in Bratonien", content: placeholder("Liste oder humorige Zusammenstellung folgt") }, - 18: { title: "🎧 Mini-Podcast: Weihnachten früher", content: placeholder("Audioaufnahme folgt") }, - 19: { title: "🍪 Foodcheck: Das hässlichste Plätzchen", content: placeholder("Humorclip oder Foto folgt") }, - 20: { title: "🎁 3 Arten von Menschen beim Geschenkeeinpacken", content: placeholder("Sketch-Reel folgt") }, - 21: { title: "📞 Audio-Sketch: Der Weihnachtsanruf", content: placeholder("Audioaufnahme folgt") }, + 3: { title: "🎧 Mini-Podcast: Kindheitsweihnachten", content: placeholder("Audioaufnahme folgt") }, + 4: { title: "🎞️ Mini-Comic", content: placeholder("Comic folgt") }, + 5: { title: "👗 Cosplay-Winter-Transformation", content: placeholder("Reel folgt") }, + 6: { title: "☕ Foodcheck: Winterdrink", content: placeholder("Rezeptclip folgt") }, + 7: { title: "🎧 Mini-Podcast: Was ist Bratonien?", content: placeholder("Kurzpodcast folgt") }, + 8: { title: "📱 Bratonien Icon-Pack", content: placeholder("Download-Link folgt") }, + 9: { title: "🍽️ Foodcheck: Last-Minute-Snack", content: placeholder("Humorclip folgt") }, + 10: { title: "🥕 Fiktive Bratonien-Tradition", content: placeholder("Text folgt") }, + 11: { title: "👑 Cosplay-Inspo: Accessoires", content: placeholder("Foto folgt") }, + 12: { title: "🎥 POV: So beginnt ein Bratonien-Stream", content: placeholder("Video folgt") }, + 13: { title: "🎙️ Mini-Podcast: Weihnachtscringe", content: placeholder("Podcast folgt") }, + 14: { title: "🍪 Foodcheck: Last-Minute-Plätzchen", content: placeholder("Clip folgt") }, + 15: { title: "🧠 Mini-Podcast: Der große Wunsch", content: placeholder("Kurztext folgt") }, + 16: { title: "📦 5 Dinge, die du nicht mehr kaufen solltest", content: placeholder("Reel folgt") }, + 17: { title: "🎞️ Die besten Weihnachtsfilme in Bratonien", content: placeholder("Liste folgt") }, + 18: { title: "🎧 Mini-Podcast: Weihnachten früher", content: placeholder("Audio folgt") }, + 19: { title: "🍪 Foodcheck: Das hässlichste Plätzchen", content: placeholder("Humorclip folgt") }, + 20: { title: "🎁 3 Arten von Menschen beim Geschenkeeinpacken", content: placeholder("Sketch folgt") }, + 21: { title: "📞 Audio-Sketch: Der Weihnachtsanruf", content: placeholder("Audio folgt") }, 22: { title: "🎲 Bratonischer Geschenke-Generator", content: placeholder("Minispiel folgt") }, - 23: { title: "🍨 Foodcheck: Deko-Dessert (Schneekugel)", content: placeholder("Foodfoto / Clip folgt") }, - 24: { title: "🎬 Danke & Geschenk", content: placeholder("Finale Video & Freebie folgen") } + 23: { title: "🍨 Foodcheck: Deko-Dessert (Schneekugel)", content: placeholder("Foodfoto folgt") }, + 24: { title: "🎬 Danke & Geschenk", content: placeholder("Finale folgt") } }; -// === Türchen öffnen – HTML laden oder Fallback === +// === Popup öffnen === function openPopup(day) { const data = popupData[day]; if (!data) return; @@ -53,114 +52,69 @@ function openPopup(day) { const url = `/2025/content/day${tag}.html`; fetch(url) - .then(res => { - if (!res.ok) throw new Error("Inhalt nicht gefunden"); - return res.text(); - }) + .then(res => res.ok ? res.text() : Promise.reject("Inhalt nicht gefunden")) .then(html => { + activeDay = day; popupContent.innerHTML = `

${data.title}

${html}`; popupOverlay.classList.add("active"); - // === Event an background.js senden, sobald day01 geladen ist === - if (day === 1) { - document.dispatchEvent(new CustomEvent("day01-loaded")); - } - - // === Tag 1: Sound + Daumenkino starten === + // Event für background.js if (day === 1) { setTimeout(() => { - try { - const bg = popupContent.querySelector("#bgmusic"); - const thumbkino = popupContent.querySelector(".thumbkino-video"); - - if (bg) { - bg.volume = 0.5; - bg.currentTime = 0; - bg.play().catch(() => {}); - activeSound = bg; - } - - if (thumbkino) { - thumbkino.muted = true; - thumbkino.loop = true; - thumbkino.play().catch(() => {}); - } - } catch (err) { - console.warn("Audio oder Video konnten nicht gestartet werden:", err); - } - }, 250); - } else { - // === alle anderen Tage: nur Video-Autoplay sichern === - setTimeout(() => { - const videos = popupContent.querySelectorAll("video[autoplay]"); - videos.forEach(v => v.play().catch(() => {})); - }, 250); + document.dispatchEvent(new CustomEvent("day01-loaded")); + }, 100); } + + // Medien starten + setTimeout(() => { + const bg = popupContent.querySelector("#bgmusic"); + const videos = popupContent.querySelectorAll("video"); + + if (day === 1 && bg) { + bg.volume = 0.5; + bg.currentTime = 0; + bg.play().catch(() => {}); + } + + videos.forEach(v => { + v.muted = true; + v.loop = true; + v.play().catch(() => {}); + }); + }, 300); }) .catch(err => { popupContent.innerHTML = `

${data.title}

${data.content}`; popupOverlay.classList.add("active"); - console.warn(`Türchen ${day}: HTML konnte nicht geladen werden. Fallback verwendet.`, err); + console.warn(`Türchen ${day}: ${err}`); }); } -// === Gesperrte Türchen – Zufallsspruch + Countdown === -window.showLockedPopup = function (day) { - const sprueche = [ - "🎁 Na na na, hier wird nicht geschummelt!", - "❄️ Geduld ist auch eine Form von Magie.", - "🎅 Ho ho ho – zu früh! Versuch es später nochmal.", - "⏳ Die Tür klemmt noch – vielleicht morgen?", - "🍪 Kein Plätzchen für Ungeduldige!", - "🎄 Schön, dass du neugierig bist – aber noch ist Geheimniszeit!", - "🔒 Tür verriegelt. Der Weihnachtszauber hat Öffnungszeiten.", - "✨ Geduld, kleiner Weihnachtself – noch ein bisschen Glitzer abwarten!", - "🕯️ Zu früh dran? Das Lichtlein brennt noch nicht für dich." - ]; +// === Popup schließen === +function closePopup() { + popupOverlay.classList.remove("active"); - const zufall = sprueche[Math.floor(Math.random() * sprueche.length)]; + // Alle Audioelemente im Popup stoppen + popupContent.querySelectorAll("audio").forEach(a => { + a.pause(); + a.currentTime = 0; + }); - const yearMatch = document.title.match(/\d{4}/); - const year = yearMatch ? parseInt(yearMatch[0], 10) : new Date().getFullYear(); - const unlockDate = new Date(year, 11, parseInt(day, 10), 0, 0, 0); - const now = new Date(); + // Alle Videos im Popup stoppen + popupContent.querySelectorAll("video").forEach(v => { + v.pause(); + v.currentTime = 0; + }); - let diff = unlockDate - now; - if (diff < 0) diff = 0; + activeDay = null; +} - const totalMinutes = Math.floor(diff / 60000); - const days = Math.floor(totalMinutes / (60 * 24)); - const hours = Math.floor((totalMinutes % (60 * 24)) / 60); - const minutes = totalMinutes % 60; - - let timeText = ""; - if (days > 0) timeText += `${days} Tag${days !== 1 ? "en" : ""}`; - if (hours > 0) timeText += `${timeText ? ", " : ""}${hours} Stunde${hours !== 1 ? "n" : ""}`; - if (minutes > 0 || timeText === "") - timeText += `${timeText ? " und " : ""}${minutes} Minute${minutes !== 1 ? "n" : ""}`; - - popupContent.innerHTML = ` -

Türchen ${day} ist noch geschlossen

-

${zufall}

-

🔓 Öffnet in ${timeText}

- `; - popupOverlay.classList.add("active"); -}; - -// === Schließen – Overlay oder X-Button === +// === Schließen-Events === popupClose.addEventListener("click", closePopup); popupOverlay.addEventListener("click", e => { if (e.target === popupOverlay) closePopup(); }); -function closePopup() { - popupOverlay.classList.remove("active"); - if (activeSound) { - activeSound.pause(); - activeSound.currentTime = 0; - activeSound = null; - } -} - // === Export für door-open.js === -window.openPopup = openPopup; \ No newline at end of file +window.openPopup = openPopup; +window.closePopup = closePopup; \ No newline at end of file