Thomas/Bratonien-Adventskalender
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New files, optical enhancement, new conten

Browse Source
This commit is contained in:
Thomas Dannenberg
2025-11-14 21:06:22 +01:00
parent 19e8faa088
commit 24e79a86bf
8 changed files with 584 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
templates/audio.txt Normal file
View File

@@ -0,0 +1,32 @@
<section class="popup-day popup-3part">
<!-- TITEL -->
<div class="popup-header">
<h2><!-- TITEL DES TAGES --></h2>
</div>
<!-- 2 SPALTEN -->
<div class="popup-body">
<!-- ================================
LINKE SPALTE – TEXT
================================ -->
<div class="story">
<!-- DEIN TEXT HIER -->
</div>
<!-- ================================
RECHTE SPALTE – SOUND
================================ -->
<div class="addon">
<audio controls preload="auto" class="addon-audio">
<source src="/2025/assets/sounds/SOUND.mp3" type="audio/mpeg">
Dein Browser unterstützt Audio nicht.
</audio>
</div>
</div>
</section>

86
templates/picture.txt Normal file
View File

@@ -0,0 +1,86 @@
<!-- ============================================
POPUP: STANDARD TAG — TEXT + BILD
============================================ -->
<section class="popup-day popup-3part">
<!-- TITEL -->
<div class="popup-header">
<h2><!-- TITEL DES TAGES --></h2>
</div>
<!-- 2 SPALTEN -->
<div class="popup-body">
<!-- ================================
LINKE SPALTE – DEIN TEXT
================================ -->
<div class="story">
<!-- HIER DEIN TEXT -->
</div>
<!-- ================================
RECHTE SPALTE – BILD (RESPONSIV)
================================ -->
<div class="addon">
<!-- RESPONSIVES BILD -->
<picture>
<!-- AVIF -->
<source
type="image/avif"
srcset="
/2025/assets/images/dayXX/480/avif/BILD.avif 480w,
/2025/assets/images/dayXX/720/avif/BILD.avif 720w,
/2025/assets/images/dayXX/1024/avif/BILD.avif 1024w,
/2025/assets/images/dayXX/1366/avif/BILD.avif 1366w,
/2025/assets/images/dayXX/1600/avif/BILD.avif 1600w,
/2025/assets/images/dayXX/1920/avif/BILD.avif 1920w,
/2025/assets/images/dayXX/2560/avif/BILD.avif 2560w,
/2025/assets/images/dayXX/3840/avif/BILD.avif 3840w
"
sizes="(max-width: 900px) 100vw, 40vw"
>
<!-- WEBP -->
<source
type="image/webp"
srcset="
/2025/assets/images/dayXX/480/webp/BILD.webp 480w,
/2025/assets/images/dayXX/720/webp/BILD.webp 720w,
/2025/assets/images/dayXX/1024/webp/BILD.webp 1024w,
/2025/assets/images/dayXX/1366/webp/BILD.webp 1366w,
/2025/assets/images/dayXX/1600/webp/BILD.webp 1600w,
/2025/assets/images/dayXX/1920/webp/BILD.webp 1920w,
/2025/assets/images/dayXX/2560/webp/BILD.webp 2560w,
/2025/assets/images/dayXX/3840/webp/BILD.webp 3840w
"
sizes="(max-width: 900px) 100vw, 40vw"
>
<!-- JPEG -->
<img
src="/2025/assets/images/dayXX/1024/jpeg/BILD.jpg"
srcset="
/2025/assets/images/dayXX/480/jpeg/BILD.jpg 480w,
/2025/assets/images/dayXX/720/jpeg/BILD.jpg 720w,
/2025/assets/images/dayXX/1024/jpeg/BILD.jpg 1024w,
/2025/assets/images/dayXX/1366/jpeg/BILD.jpg 1366w,
/2025/assets/images/dayXX/1600/jpeg/BILD.jpg 1600w,
/2025/assets/images/dayXX/1920/jpeg/BILD.jpg 1920w,
/2025/assets/images/dayXX/2560/jpeg/BILD.jpg 2560w,
/2025/assets/images/dayXX/3840/jpeg/BILD.jpg 3840w
"
sizes="(max-width: 900px) 100vw, 40vw"
alt="Bild zum Tag"
class="addon-image"
decoding="async"
loading="lazy"
>
</picture>
</div>
</div>
</section>

95
templates/recipe.txt Normal file
View File

@@ -0,0 +1,95 @@
<section class="popup-day popup-recipe">
<!-- TITEL -->
<div class="popup-header">
<h2><!-- TITEL HIER --></h2>
</div>
<!-- HAUPTBEREICH -->
<div class="popup-body">
<!-- =====================================
LINKE SPALTE – STORYTEXT
===================================== -->
<div class="story">
<!-- DEIN STORYTEXT HIER REIN -->
</div>
<!-- =====================================
RECHTE SPALTE – REZEPT (mit responsivem Bild)
===================================== -->
<div class="addon popup-recipe-content">
<!-- REZEPTNAME -->
<h3 class="recipe-title"><!-- Rezeptname --></h3>
<!-- RESPONSIVES REZEPTBILD -->
<picture class="recipe-image-wrapper">
<!-- AVIF -->
<source
type="image/avif"
srcset="
/2025/assets/images/rezepte/480/avif/REZEPT.avif 480w,
/2025/assets/images/rezepte/720/avif/REZEPT.avif 720w,
/2025/assets/images/rezepte/1024/avif/REZEPT.avif 1024w,
/2025/assets/images/rezepte/1366/avif/REZEPT.avif 1366w,
/2025/assets/images/rezepte/1600/avif/REZEPT.avif 1600w,
/2025/assets/images/rezepte/1920/avif/REZEPT.avif 1920w
"
sizes="(max-width: 900px) 100vw, 40vw"
>
<!-- WEBP -->
<source
type="image/webp"
srcset="
/2025/assets/images/rezepte/480/webp/REZEPT.webp 480w,
/2025/assets/images/rezepte/720/webp/REZEPT.webp 720w,
/2025/assets/images/rezepte/1024/webp/REZEPT.webp 1024w,
/2025/assets/images/rezepte/1366/webp/REZEPT.webp 1366w,
/2025/assets/images/rezepte/1600/webp/REZEPT.webp 1600w,
/2025/assets/images/rezepte/1920/webp/REZEPT.webp 1920w
"
sizes="(max-width: 900px) 100vw, 40vw"
>
<!-- JPEG Fallback -->
<img
src="/2025/assets/images/rezepte/1024/jpeg/REZEPT.jpg"
srcset="
/2025/assets/images/rezepte/480/jpeg/REZEPT.jpg 480w,
/2025/assets/images/rezepte/720/jpeg/REZEPT.jpg 720w,
/2025/assets/images/rezepte/1024/jpeg/REZEPT.jpg 1024w,
/2025/assets/images/rezepte/1366/jpeg/REZEPT.jpg 1366w,
/2025/assets/images/rezepte/1600/jpeg/REZEPT.jpg 1600w,
/2025/assets/images/rezepte/1920/jpeg/REZEPT.jpg 1920w
"
sizes="(max-width: 900px) 100vw, 40vw"
alt="Rezeptbild"
class="recipe-image"
decoding="async"
loading="lazy"
>
</picture>
<!-- Zutaten -->
<h4>Zutaten</h4>
<ul>
<!-- Zutaten -->
</ul>
<!-- Zubereitung -->
<h4>Zubereitung</h4>
<p>
<!-- Zubereitung -->
</p>
</div>
</div>
</section>

54
templates/video.txt Normal file
View File

@@ -0,0 +1,54 @@
<!-- ============================================
POPUP: STANDARD TAG — TEXT + VIDEO
============================================ -->
<section class="popup-day popup-3part">
<div class="popup-header">
<h2><!-- TITEL DES TAGES --></h2>
</div>
<div class="popup-body">
<!-- TEXT -->
<div class="story">
<!-- DEIN TEXT -->
</div>
<!-- VIDEO -->
<div class="addon">
<video
autoplay
playsinline
muted
loop
preload="auto"
class="addon-video"
poster="/2025/assets/images/dayXX/1024/jpeg/BILD.jpg"
>
<!-- WEBM -->
<source src="/2025/assets/videos/nHD/webm/VID.webm" type="video/webm" media="(max-width: 640px)">
<source src="/2025/assets/videos/FWVGA/webm/VID.webm" type="video/webm" media="(max-width: 854px)">
<source src="/2025/assets/videos/qHD/webm/VID.webm" type="video/webm" media="(max-width: 960px)">
<source src="/2025/assets/videos/HD/webm/VID.webm" type="video/webm" media="(max-width: 1280px)">
<source src="/2025/assets/videos/HDplus/webm/VID.webm" type="video/webm" media="(max-width: 1600px)">
<source src="/2025/assets/videos/FullHD/webm/VID.webm" type="video/webm" media="(max-width: 1920px)">
<source src="/2025/assets/videos/1440p/webm/VID.webm" type="video/webm" media="(max-width: 2560px)">
<source src="/2025/assets/videos/4K/webm/VID.webm" type="video/webm" media="(min-width: 2561px)">
<!-- MP4 -->
<source src="/2025/assets/videos/nHD/mp4/VID.mp4" type="video/mp4" media="(max-width: 640px)">
<source src="/2025/assets/videos/FWVGA/mp4/VID.mp4" type="video/mp4" media="(max-width: 854px)">
<source src="/2025/assets/videos/qHD/mp4/VID.mp4" type="video/mp4" media="(max-width: 960px)">
<source src="/2025/assets/videos/HD/mp4/VID.mp4" type="video/mp4" media="(max-width: 1280px)">
<source src="/2025/assets/videos/HDplus/mp4/VID.mp4" type="video/mp4" media="(max-width: 1600px)">
<source src="/2025/assets/videos/FullHD/mp4/VID.mp4" type="video/mp4" media="(max-width: 1920px)">
<source src="/2025/assets/videos/1440p/mp4/VID.mp4" type="video/mp4" media="(max-width: 2560px)">
<source src="/2025/assets/videos/4K/mp4/VID.mp4" type="video/mp4" media="(min-width: 2561px)">
Dein Browser unterstützt dieses Video nicht.
</video>
</div>
</div>
</section>