Felix Brabetz
102 lines
4.8 KiB
Plaintext
102 lines
4.8 KiB
Plaintext
---
|
|
// src/components/EasterEgg.astro
|
|
---
|
|
<div x-data="{ open: false, plantClicks: 0, blooming: false }" class="fixed bottom-4 right-4 z-50">
|
|
<!-- Modal -->
|
|
<div x-show="open" x-cloak class="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50">
|
|
<div class="glass p-8 rounded-2xl max-w-sm w-full text-center relative border border-emerald-500/30">
|
|
<button @click="open = false; plantClicks = 0; blooming = false" class="absolute top-4 right-4 text-stone-500 hover:text-white">
|
|
<i class="fa-solid fa-times"></i>
|
|
</button>
|
|
|
|
<h3 class="text-xl font-luxury font-bold text-white mb-2">Secret Garden</h3>
|
|
<p class="text-stone-400 text-xs mb-6">Klicke auf Gießen, um die Pflanze wachsen zu lassen!</p>
|
|
|
|
<div class="h-48 flex items-end justify-center mb-6">
|
|
<!-- The Plant -->
|
|
<div class="relative transition-transform duration-200" :style="`transform: scale(${1 + plantClicks * 0.005})`">
|
|
<div x-show="!blooming" class="text-emerald-500 text-6xl">
|
|
<i class="fa-solid fa-seedling"></i>
|
|
</div>
|
|
<!-- When blooming -->
|
|
<div x-show="blooming" class="text-6xl animate-bounce">
|
|
🌸
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<p class="text-xs font-mono text-stone-500">Wachstum: <span x-text="plantClicks"></span>%</p>
|
|
<div class="w-full bg-stone-800 h-1.5 rounded-full overflow-hidden">
|
|
<div class="bg-emerald-500 h-full transition-all" :style="`width: ${plantClicks}%`"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<button x-show="!blooming" @click="plantClicks += 10; if(plantClicks >= 100) { plantClicks = 100; blooming = true; }" class="mt-6 w-full py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-colors">
|
|
Gießen 💧
|
|
</button>
|
|
|
|
<!-- Award -->
|
|
<div x-show="blooming" x-cloak class="mt-6 text-center" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100">
|
|
<div class="text-5xl mb-3">🏆</div>
|
|
<h4 class="text-lg font-luxury font-bold text-white mb-1">Auszeichnung verliehen!</h4>
|
|
<p class="text-stone-400 text-xs mb-4 font-light">Hiermit verleihen wir dir den</p>
|
|
|
|
<div class="bg-amber-500/10 border border-amber-500/30 p-4 rounded-lg inline-block mb-4">
|
|
<span class="text-amber-500 font-bold uppercase tracking-wider text-xs">Goldener Brabetz-Grüner-Daumen</span>
|
|
</div>
|
|
|
|
<p class="text-stone-500 text-[10px] font-mono leading-tight mb-4">Zertifikats-ID: BRB-PLX-2026-NICE</p>
|
|
|
|
<button @click="window.downloadBrabetzPDF()" class="text-xs text-amber-500 hover:text-amber-400 underline uppercase tracking-wider transition-colors">
|
|
Als PDF herunterladen 📄
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Listen for custom event -->
|
|
<div x-init="window.addEventListener('open-easter-egg', () => { open = true; })"></div>
|
|
</div>
|
|
|
|
<script is:inline>
|
|
window.downloadBrabetzPDF = function() {
|
|
const { jsPDF } = window.jspdf;
|
|
const doc = new jsPDF({
|
|
orientation: 'landscape',
|
|
unit: 'mm',
|
|
format: 'a5'
|
|
});
|
|
|
|
// Background
|
|
doc.setFillColor(24, 24, 27); // Dark stone-900
|
|
doc.rect(0, 0, 210, 148, 'F');
|
|
|
|
// Border
|
|
doc.setDrawColor(245, 158, 11); // Amber-500
|
|
doc.setLineWidth(1);
|
|
doc.rect(5, 5, 200, 138);
|
|
|
|
// Text
|
|
doc.setTextColor(255, 255, 255);
|
|
doc.setFontSize(24);
|
|
doc.text("AUSZEICHNUNG", 105, 30, { align: "center" });
|
|
|
|
doc.setTextColor(120, 113, 108); // Stone-500
|
|
doc.setFontSize(12);
|
|
doc.text("Hiermit verleihen wir", 105, 50, { align: "center" });
|
|
|
|
doc.setTextColor(245, 158, 11); // Amber-500
|
|
doc.setFontSize(18);
|
|
doc.text("Den Goldenen Brabetz-Grünen-Daumen", 105, 70, { align: "center" });
|
|
|
|
doc.setTextColor(120, 113, 108); // Stone-500
|
|
doc.setFontSize(10);
|
|
doc.text("für besondere Verdienste um das Pflanzenwachstum.", 105, 90, { align: "center" });
|
|
|
|
doc.text("Zertifikats-ID: BRB-PLX-2026-NICE", 105, 120, { align: "center" });
|
|
|
|
doc.save("Brabetz_Auszeichnung.pdf");
|
|
}
|
|
</script>
|