120 lines
4.7 KiB
JavaScript
120 lines
4.7 KiB
JavaScript
// Adventskalender 2025 – Popup-Logik (Bratonien Edition)
|
||
|
||
const popupOverlay = document.getElementById("popup-overlay");
|
||
const popupContent = document.getElementById("popup-content");
|
||
const popupClose = document.getElementById("popup-close");
|
||
|
||
let activeDay = null;
|
||
|
||
// === Platzhalterfunktion ===
|
||
function placeholder(text) {
|
||
return `
|
||
<div class="placeholder">
|
||
<p><em>${text}</em></p>
|
||
<p style="opacity:0.7;">(Inhalt wird noch produziert)</p>
|
||
</div>`;
|
||
}
|
||
|
||
// === Inhalte 1–24 (Platzhalter) ===
|
||
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") },
|
||
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 folgt") },
|
||
24: { title: "🎬 Danke & Geschenk", content: placeholder("Finale folgt") }
|
||
};
|
||
|
||
// === Popup öffnen ===
|
||
function openPopup(day) {
|
||
const data = popupData[day];
|
||
if (!data) return;
|
||
|
||
const tag = String(day).padStart(2, "0");
|
||
const url = `/2025/content/day${tag}.html`;
|
||
|
||
fetch(url)
|
||
.then(res => res.ok ? res.text() : Promise.reject("Inhalt nicht gefunden"))
|
||
.then(html => {
|
||
activeDay = day;
|
||
popupContent.innerHTML = `<h2>${data.title}</h2>${html}`;
|
||
popupOverlay.classList.add("active");
|
||
|
||
// Event für background.js
|
||
if (day === 1) {
|
||
setTimeout(() => {
|
||
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 = `<h2>${data.title}</h2>${data.content}`;
|
||
popupOverlay.classList.add("active");
|
||
console.warn(`Türchen ${day}: ${err}`);
|
||
});
|
||
}
|
||
|
||
// === Popup schließen ===
|
||
function closePopup() {
|
||
popupOverlay.classList.remove("active");
|
||
|
||
// Alle Audioelemente im Popup stoppen
|
||
popupContent.querySelectorAll("audio").forEach(a => {
|
||
a.pause();
|
||
a.currentTime = 0;
|
||
});
|
||
|
||
// Alle Videos im Popup stoppen
|
||
popupContent.querySelectorAll("video").forEach(v => {
|
||
v.pause();
|
||
v.currentTime = 0;
|
||
});
|
||
|
||
activeDay = null;
|
||
}
|
||
|
||
// === Schließen-Events ===
|
||
popupClose.addEventListener("click", closePopup);
|
||
popupOverlay.addEventListener("click", e => {
|
||
if (e.target === popupOverlay) closePopup();
|
||
});
|
||
|
||
// === Export für door-open.js ===
|
||
window.openPopup = openPopup;
|
||
window.closePopup = closePopup; |