Day01 Fehlerbehebung

adventskalender/2025/content/day01.html

@@ -2,10 +2,10 @@
 
   <h3>🎁 Türchen 01</h3>
 
-  <!-- === Basisbild (Platzhalter oder Hauptmotiv) === -->
+  <!-- === Basisbild (Platzhalter oder Hauptmotiv) ===
   <div class="image-wrapper">
     <picture>
-      <!-- AVIF -->
+      <!-- AVIF 
       <source
         type="image/avif"
         srcset="
@@ -19,7 +19,7 @@
           /2025/assets/images/3840/avif/Basisbild.avif 3840w"
         sizes="100vw">
 
-      <!-- WebP -->
+      <!-- WebP 
       <source
         type="image/webp"
         srcset="
@@ -33,7 +33,7 @@
           /2025/assets/images/3840/webp/Basisbild.webp 3840w"
         sizes="100vw">
 
-      <!-- JPEG-Fallback -->
+      <!-- JPEG-Fallback 
       <img
         src="/2025/assets/images/1366/jpeg/Basisbild.jpeg"
         srcset="
@@ -49,7 +49,7 @@
         alt="Bratonien Adventskalender – Tag 01"
         decoding="async">
     </picture>
-  </div>
+  </div> -->
  
 
   <!-- === Daumenkino-Video === -->
@@ -87,9 +87,9 @@
   </div>
 
 
-  <!-- === Hintergrundmusik (optional) === -->
+  <!-- === Hintergrundmusik (optional) ===
   <audio id="bgmusic" autoplay loop>
     <source src="/2025/assets/sounds/FallingSnow.mp3" type="audio/mpeg">
-  </audio>
+  </audio> -->
 
 </section>

adventskalender/2025/js/background.js

@@ -19,7 +19,8 @@
   const sim = getSimulatedDay();
   if (DEV_MODE && sim) dayToShow = sim;
 
-  const padded = (dayToShow >= 1 && dayToShow <= 24)
+  const padded =
+    dayToShow >= 1 && dayToShow <= 24
       ? String(dayToShow).padStart(2, "0")
       : "Basisbild";
 
@@ -50,23 +51,67 @@
 
     if (!picture || !img || !sources) return;
 
+    // === Daumenkino (nur für Tag 1) ===
+    if (dayToShow === 1) {
+      const thumbkino = document.querySelector(".thumbkino-video");
+      if (thumbkino) {
+        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);
+
+        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);
+          });
+        });
+
+        thumbkino.load();
+        thumbkino.play().catch(() => {});
+
+        console.log(`[Bratonien] Daumenkino gesetzt für Tag ${padded}`);
+      }
+    }
+
     const breakpoints = [420, 768, 1024, 1366, 1600, 1920, 2560, 3840];
 
     // === <source> für AVIF und WebP aktualisieren ===
-    sources.forEach(source => {
+    sources.forEach((source) => {
       const type = source.getAttribute("type");
       const format = type?.split("/")[1]; // "avif" oder "webp"
       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);
     });
 
     // === <img> (JPEG-Fallback) ===
     const jpegSrcset = breakpoints
-      .map(bp => `${basePath}${bp}/jpeg/${filename}.jpeg ${bp}w`)
+      .map((bp) => `${basePath}${bp}/jpeg/${filename}.jpeg ${bp}w`)
       .join(", ");
 
     img.setAttribute("src", `${basePath}1920/jpeg/${filename}.jpeg`);

adventskalender/2025/js/popup.js

@@ -5,6 +5,8 @@ const popupBox = document.getElementById("popup-box");
 const popupContent = document.getElementById("popup-content");
 const popupClose = document.getElementById("popup-close");
 
+let activeSound = null; // aktuell laufender Hintergrundsound
+
 // === Platzhalterfunktion ===
 function placeholder(text) {
   return `
@@ -65,9 +67,9 @@ function openPopup(day) {
         setTimeout(() => {
           try {
             // --- Soundeffekt FallingSnow ---
-            const sound = new Audio("/2025/assets/sounds/FallingSnow.mp3");
+            activeSound = new Audio("/2025/assets/sounds/FallingSnow.mp3");
-            sound.volume = 0.5;
+            activeSound.volume = 0.5;
-            sound.play().catch(() => {});
+            activeSound.play().catch(() => {});
 
             // --- Daumenkino-Video (Fallback-Start) ---
             const thumbkino = popupContent.querySelector(".thumbkino-video");
@@ -114,7 +116,7 @@ window.showLockedPopup = function (day) {
 
   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); // 11 = Dezember
+  const unlockDate = new Date(year, 11, parseInt(day, 10), 0, 0, 0);
   const now = new Date();
 
   let diff = unlockDate - now;
@@ -140,9 +142,24 @@ window.showLockedPopup = function (day) {
 };
 
 // === Schließen ===
-popupClose.addEventListener("click", () => popupOverlay.classList.remove("active"));
+popupClose.addEventListener("click", () => {
+  popupOverlay.classList.remove("active");
+  if (activeSound) {
+    activeSound.pause();
+    activeSound.currentTime = 0;
+    activeSound = null;
+  }
+});
+
 popupOverlay.addEventListener("click", e => {
-  if (e.target === popupOverlay) popupOverlay.classList.remove("active");
+  if (e.target === popupOverlay) {
+    popupOverlay.classList.remove("active");
+    if (activeSound) {
+      activeSound.pause();
+      activeSound.currentTime = 0;
+      activeSound = null;
+    }
+  }
 });
 
 // === Export für door-open.js ===