Lade dir unseren festlichen Adventskalender herunter und bringe Weihnachten direkt auf deine Website. Dieses Dreamcodes Script ist vollständig selbstständig: beim ersten Aufruf erstellt es automatisch alle notwendigen Dateien (style.css, script.js, data.php) und läuft sofort im Browser.
Highlights:
- 24 Türchen mit Text, Bildern oder Videos
- Schneefall und Konfetti Effekte
- Türchen Shake bei verfrühtem Öffnen
- Festliche Glocken oder Trommel-Sounds
- Animierte Modals im Neumorphism/Glass-Look
- Responsive Design, optimiert für Desktop, Tablet und Mobile
- Zustandsspeicherung via
localStorage
Einfach installieren:
Abspeichern als .php Datei -hochladen- Browser öffnen – alles wird automatisch generiert
- Adventskalender genießen – Spass haben 😉
Perfekt für Webseiten, Weihnachtsaktionen oder interaktive Überraschungen.
<?php
declare(strict_types=1);
$baseDir=__DIR__.DIRECTORY_SEPARATOR;
$files=['style.css','script.js','data.php'];
foreach($files as $f){
$path=$baseDir.$f;
if(!file_exists($path)){
$content=match($f){
'style.css'=>getCss(),
'script.js'=>getJs(),
'data.php'=>getData(),
default=>''
};
@file_put_contents($path,$content);
@chmod($path,0644);
}
}
$ADVENT=include $baseDir.'data.php';
$doors=$ADVENT['doors']??[];
$config=$ADVENT['__config']??[];
$serverDay=(int)date('j'); $serverMonth=(int)date('n');
?><!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Luxus Weihnachts-Adventskalender</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="app">
<header class="topbar"><div class="brand">🎄 Adventskalender 🎅</div><div class="meta">Server: <?= date('Y-m-d') ?></div></header>
<section class="grid" role="list">
<?php for($i=1;$i<=($config['days']??24);$i++): ?><article class="door" data-day="<?= $i ?>" role="listitem" aria-label="Tag <?= $i ?>"><div class="door-face"><div class="num"><?= $i ?></div><div class="glass"></div></div></article><?php endfor; ?></section>
<div id="modal" class="modal" aria-hidden="true"><div class="modal-backdrop" data-close="true"></div><div class="modal-card"><button class="close" data-close="true">✕</button><h2 id="modal-title"></h2><div id="modal-media"></div><div id="modal-body"></div><footer class="modal-footer"><button id="mark-read" class="btn">Als gelesen markieren</button></footer></div></div>
<footer class="footer">Powered by <a href="https://www.dreamcodes.net" target="_blank" rel="noopener">Dreamcodes</a></footer>
<script>window.ADVENT_CONFIG=<?= json_encode($ADVENT,JSON_UNESCAPED_UNICODE|JSON_THROW_ON_ERROR) ?>;window.SERVER_DAY=<?= $serverDay ?>;window.SERVER_MONTH=<?= $serverMonth ?>;</script>
<script src="script.js" defer></script>
</body>
</html>
<?php
function getCss(): string{
return <<<CSS
:root{--bg:#0b0b2a;--card:#1b0b3a;--glass:rgba(255,255,255,0.08);--accent:#ff4444;--radius:16px;--gap:20px}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',Arial;background:linear-gradient(#0b0b2a,#2a0b2a);color:#fff;overflow-x:hidden}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:var(--gap);padding:20px}
.door{position:relative;height:150px;border-radius:var(--radius);cursor:pointer;transform-style:preserve-3d;transition:transform .4s ease-in-out}
.door-face{position:absolute;inset:0;border-radius:inherit;padding:10px;display:flex;align-items:flex-end;justify-content:flex-end;background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(0,0,0,0.05));backdrop-filter:blur(10px) saturate(150%);box-shadow:0 4px 12px rgba(0,0,0,0.5)}
.num{font-size:28px;font-weight:900;color:#ffeb3b;text-shadow:0 0 8px #fff}
.door.open .door-face{transform:rotateX(20deg) translateY(-20px);box-shadow:0 30px 60px rgba(0,0,0,0.7)}
.door.shake{animation:shake .6s}@keyframes shake{0%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}100%{transform:translateX(0)}}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:60}
.modal[aria-hidden=false]{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px)}
.modal-card{position:relative;z-index:70;max-width:720px;width:94%;border-radius:20px;padding:24px;background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.05));box-shadow:0 10px 40px rgba(0,0,0,0.8);animation:fadeIn .5s ease}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
.close{position:absolute;right:12px;top:10px;background:transparent;border:none;color:#ffeb3b;font-size:20px;cursor:pointer}
.modal-footer{display:flex;justify-content:flex-end}.btn{background:linear-gradient(180deg,#ff6b6b,#c70039);border:none;padding:12px 18px;border-radius:12px;color:#fff;cursor:pointer;font-weight:700}
.footer{text-align:center;margin-top:18px;font-size:13px;color:#eee}
#snowfall{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:50}
.flake{position:absolute;color:white;user-select:none}
CSS;
}
function getJs(): string{
return <<<JS
'use strict';
const STORAGE_KEY='advent_luxury_opened';
const state={opened:new Set(JSON.parse(localStorage.getItem(STORAGE_KEY)||'[]'))};
function saveState(){localStorage.setItem(STORAGE_KEY,JSON.stringify(Array.from(state.opened)))}
function queryDay(el){return parseInt(el.getAttribute('data-day'))||0}
function showModal(data){const m=document.getElementById('modal');m.setAttribute('aria-hidden','false');document.getElementById('modal-title').textContent=data.title||'Inhalt';document.getElementById('modal-media').innerHTML='';if(data.media){if(data.media.type==='img'){let img=document.createElement('img');img.src=data.media.src;document.getElementById('modal-media').appendChild(img);}else if(data.media.type==='video'){let iframe=document.createElement('iframe');iframe.src=data.media.src;iframe.width='100%';iframe.height='360';iframe.setAttribute('allow','accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');document.getElementById('modal-media').appendChild(iframe);}}document.getElementById('modal-body').innerHTML=data.html||''}
function closeModal(){document.getElementById('modal').setAttribute('aria-hidden','true')}
function playSound(){let audio=new Audio('https://www.myinstants.com/media/sounds/christmas-bells.mp3');audio.volume=0.5;audio.play().catch(()=>{});}
function showConfetti(){const canvas=document.createElement('canvas');canvas.style.position='fixed';canvas.style.top='0';canvas.style.left='0';canvas.style.width='100%';canvas.style.height='100%';canvas.style.pointerEvents='none';canvas.style.zIndex='9999';document.body.appendChild(canvas);const ctx=canvas.getContext('2d');canvas.width=window.innerWidth;canvas.height=window.innerHeight;const particles=[];for(let i=0;i<150;i++){particles.push({x:Math.random()*canvas.width,y:Math.random()*canvas.height,r:Math.random()*5+2,dx:(Math.random()-0.5)*2,dy:Math.random()*2+1,color:'hsl('+Math.random()*360+',100%,50%)',tilt:Math.random()*20});}function draw(){ctx.clearRect(0,0,canvas.width,canvas.height);particles.forEach(p=>{ctx.save();ctx.translate(p.x,p.y);ctx.rotate(p.tilt*Math.PI/180);ctx.fillStyle=p.color;ctx.fillRect(-p.r/2,-p.r/2,p.r,p.r);ctx.restore();p.x+=p.dx;p.y+=p.dy;p.tilt+=0.1;if(p.y>canvas.height){p.y=0;p.x=Math.random()*canvas.width}if(p.x>canvas.width){p.x=0}}requestAnimationFrame(draw)}draw();setTimeout(()=>canvas.remove(),3000)}
(function(){const snow=document.createElement('div');snow.id='snowfall';document.body.appendChild(snow);for(let i=0;i<100;i++){const f=document.createElement('div');f.className='flake';f.style.left=Math.random()*100+'%';f.style.top=Math.random()*window.innerHeight+'px';f.style.fontSize=(10+Math.random()*10)+'px';f.innerHTML='❄';snow.appendChild(f);}})();
document.addEventListener('click',async ev=>{const door=ev.target.closest('.door');if(!door)return;const day=queryDay(door);const payload=await fetch('?action=get&day='+day).then(r=>r.json()).catch(_=>({ok:false}));if(!payload.ok){door.classList.add('shake');return;}if(!payload.allowed){door.classList.add('shake');alert('Erst am richtigen Tag öffnbar!');return;}door.classList.add('open');state.opened.add(day);saveState();showModal(payload.content);playSound();showConfetti();});
document.addEventListener('click',e=>{if(e.target.dataset.close)closeModal()});document.addEventListener('keydown',e=>{if(e.key==='Escape')closeModal()});document.getElementById('mark-read').addEventListener('click',()=>{const t=document.getElementById('modal-title').textContent||'';const m=t.match(/(\d{1,2})$/);if(m){state.opened.add(parseInt(m[1]));saveState();document.querySelectorAll('.door').forEach(d=>{if(state.opened.has(parseInt(d.dataset.day)))d.classList.add('open');});}closeModal();});document.querySelectorAll('.door').forEach(d=>{if(state.opened.has(parseInt(d.dataset.day)))d.classList.add('open')});
JS;
}
function getData(): string{
$doors=[];
for($i=1;$i<=24;$i++){
$doors[$i]=['title'=>'🎁 Tag '.$i,'html'=>'<p>Weihnachtsüberraschung für Tag '.$i.'</p>','media'=>null];
if(in_array($i,[3,7,12,18])){$doors[$i]['media']=['type'=>'img','src'=>'https://picsum.photos/seed/xmas'.$i.'/800/450'];}
if(in_array($i,[5,10,20])){$doors[$i]['media']=['type'=>'video','src'=>'https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0'];}}
$config=['days'=>24,'allow_any_month'=>false];
return "<?php\nreturn ".var_export(['__config'=>$config,'doors'=>$doors],true).";\n";
}
?>