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