Fehlelrkorrekturen

adventskalender/2025/content/day01.html

@@ -0,0 +1,96 @@
+<section class="popup-day dayXX">
+
+  <h3>🎁 Türchen XX</h3>
+
+  <!-- === Basisbild (Platzhalter oder Hauptmotiv) === -->
+  <div class="image-wrapper">
+    <picture>
+      <!-- AVIF -->
+      <source
+        type="image/avif"
+        srcset="
+          /2025/assets/images/480/avif/Basisbild.avif 480w,
+          /2025/assets/images/720/avif/Basisbild.avif 720w,
+          /2025/assets/images/1024/avif/Basisbild.avif 1024w,
+          /2025/assets/images/1366/avif/Basisbild.avif 1366w,
+          /2025/assets/images/1600/avif/Basisbild.avif 1600w,
+          /2025/assets/images/1920/avif/Basisbild.avif 1920w,
+          /2025/assets/images/2560/avif/Basisbild.avif 2560w,
+          /2025/assets/images/3840/avif/Basisbild.avif 3840w"
+        sizes="100vw">
+
+      <!-- WebP -->
+      <source
+        type="image/webp"
+        srcset="
+          /2025/assets/images/480/webp/Basisbild.webp 480w,
+          /2025/assets/images/720/webp/Basisbild.webp 720w,
+          /2025/assets/images/1024/webp/Basisbild.webp 1024w,
+          /2025/assets/images/1366/webp/Basisbild.webp 1366w,
+          /2025/assets/images/1600/webp/Basisbild.webp 1600w,
+          /2025/assets/images/1920/webp/Basisbild.webp 1920w,
+          /2025/assets/images/2560/webp/Basisbild.webp 2560w,
+          /2025/assets/images/3840/webp/Basisbild.webp 3840w"
+        sizes="100vw">
+
+      <!-- JPEG-Fallback -->
+      <img
+        src="/2025/assets/images/1366/jpeg/Basisbild.jpeg"
+        srcset="
+          /2025/assets/images/480/jpeg/Basisbild.jpeg 480w,
+          /2025/assets/images/720/jpeg/Basisbild.jpeg 720w,
+          /2025/assets/images/1024/jpeg/Basisbild.jpeg 1024w,
+          /2025/assets/images/1366/jpeg/Basisbild.jpeg 1366w,
+          /2025/assets/images/1600/jpeg/Basisbild.jpeg 1600w,
+          /2025/assets/images/1920/jpeg/Basisbild.jpeg 1920w,
+          /2025/assets/images/2560/jpeg/Basisbild.jpeg 2560w,
+          /2025/assets/images/3840/jpeg/Basisbild.jpeg 3840w"
+        sizes="100vw"
+        alt="Bratonien Adventskalender – Tag XX"
+        decoding="async">
+    </picture>
+  </div>
+
+
+  <!-- === Daumenkino-Video === -->
+  <div class="video-wrapper thumbkino">
+    <video
+      class="video thumbkino-video"
+      autoplay
+      loop
+      muted
+      playsinline
+      preload="auto"
+      poster="/2025/assets/images/1366/jpeg/Basisbild.jpeg"
+    >
+      <!-- WEBM-Varianten -->
+      <source src="/2025/assets/videos/nHD/XX.webm"       type="video/webm" media="(max-width: 640px)">
+      <source src="/2025/assets/videos/FWVGA/XX.webm"     type="video/webm" media="(max-width: 854px)">
+      <source src="/2025/assets/videos/qHD/XX.webm"       type="video/webm" media="(max-width: 960px)">
+      <source src="/2025/assets/videos/HD/XX.webm"        type="video/webm" media="(max-width: 1280px)">
+      <source src="/2025/assets/videos/HDplus/XX.webm"    type="video/webm" media="(max-width: 1600px)">
+      <source src="/2025/assets/videos/FullHD/XX.webm"    type="video/webm" media="(max-width: 1920px)">
+      <source src="/2025/assets/videos/1440p/XX.webm"     type="video/webm" media="(max-width: 2560px)">
+      <source src="/2025/assets/videos/4K/XX.webm"        type="video/webm" media="(min-width: 2561px)">
+
+      <!-- MP4-Fallbacks -->
+      <source src="/2025/assets/videos/nHD/XX.mp4"        type="video/mp4" media="(max-width: 640px)">
+      <source src="/2025/assets/videos/FWVGA/XX.mp4"      type="video/mp4" media="(max-width: 854px)">
+      <source src="/2025/assets/videos/qHD/XX.mp4"        type="video/mp4" media="(max-width: 960px)">
+      <source src="/2025/assets/videos/HD/XX.mp4"         type="video/mp4" media="(max-width: 1280px)">
+      <source src="/2025/assets/videos/HDplus/XX.mp4"     type="video/mp4" media="(max-width: 1600px)">
+      <source src="/2025/assets/videos/FullHD/XX.mp4"     type="video/mp4" media="(max-width: 1920px)">
+      <source src="/2025/assets/videos/1440p/XX.mp4"      type="video/mp4" media="(max-width: 2560px)">
+      <source src="/2025/assets/videos/4K/XX.mp4"         type="video/mp4" media="(min-width: 2561px)">
+
+      Dein Browser unterstützt dieses Videoformat nicht.
+    </video>
+  </div>
+
+
+  <!-- === Hintergrundmusik (optional) === -->
+  <audio id="bgmusic" autoplay loop>
+    <source src="/2025/assets/audio/dayXX_theme.mp3" type="audio/mpeg">
+  </audio>
+
+</section>

adventskalender/2025/js/background.js

@@ -66,10 +66,10 @@
 
     // === <img> (JPEG-Fallback) ===
     const jpegSrcset = breakpoints
-      .map(bp => `${basePath}${bp}/jpeg/${filename}.jpg ${bp}w`)
+      .map(bp => `${basePath}${bp}/jpeg/${filename}.jpeg ${bp}w`)
       .join(", ");
 
-    img.setAttribute("src", `${basePath}1920/jpeg/${filename}.jpg`);
+    img.setAttribute("src", `${basePath}1920/jpeg/${filename}.jpeg`);
     img.setAttribute("srcset", jpegSrcset);
     img.setAttribute("sizes", "100vw");