Add hidden Easter Egg clicker game triggered by clicking the company name 5 times

This commit is contained in:
Felix Brabetz
2026-05-16 04:45:57 +02:00
parent 44302d1dfd
commit 65a875fbaf
3 changed files with 49 additions and 1 deletions
+46
View File
@@ -0,0 +1,46 @@
---
// 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 @click="plantClicks += 10; if(plantClicks >= 100) { plantClicks = 100; blooming = true; }" :disabled="blooming" class="mt-6 w-full py-3 bg-emerald-600 hover:bg-emerald-700 disabled:bg-emerald-900 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-colors">
<span x-show="!blooming">Gießen 💧</span>
<span x-show="blooming">Prächtig erblüht! 🎉</span>
</button>
<p x-show="blooming" class="text-emerald-400 text-xs mt-4 font-semibold">Du hast den echten Brabetz-Grünen-Daumen!</p>
</div>
</div>
<!-- Listen for custom event -->
<div x-init="window.addEventListener('open-easter-egg', () => { open = true; })"></div>
</div>
+1 -1
View File
@@ -42,6 +42,6 @@
<!-- Bottom -->
<div class="max-w-7xl mx-auto px-6 lg:px-8 mt-16 pt-8 border-t border-stone-900/50 text-center text-[10px] text-stone-700">
<p>&copy; 2026 Gebrüder Brabetz GmbH. Alle Rechte vorbehalten. | <button @click="currentPage = 'page-impressum'" class="hover:text-stone-500">Impressum</button> | <button @click="currentPage = 'page-datenschutz'" class="hover:text-stone-500">Datenschutz</button></p>
<p x-data="{ clickCount: 0 }" class="select-none">&copy; 2026 <span @click="clickCount++; if(clickCount >= 5) { window.dispatchEvent(new CustomEvent('open-easter-egg')); clickCount = 0; }" class="cursor-pointer hover:text-stone-500">Gebrüder Brabetz GmbH</span>. Alle Rechte vorbehalten. | <button @click="currentPage = 'page-impressum'" class="hover:text-stone-500">Impressum</button> | <button @click="currentPage = 'page-datenschutz'" class="hover:text-stone-500">Datenschutz</button></p>
</div>
</footer>
+2
View File
@@ -16,6 +16,7 @@ import SubpageGewerbe from '../components/SubpageGewerbe.astro';
import SubpageContact from '../components/SubpageContact.astro';
import SubpageImpressum from '../components/SubpageImpressum.astro';
import SubpageDatenschutz from '../components/SubpageDatenschutz.astro';
import EasterEgg from '../components/EasterEgg.astro';
---
<Layout title="Gebrüder Brabetz GmbH - Premium GaLaBau">
@@ -40,6 +41,7 @@ import SubpageDatenschutz from '../components/SubpageDatenschutz.astro';
<SubpageContact />
<SubpageImpressum />
<SubpageDatenschutz />
<EasterEgg />
<!-- CHARTS INIT -->
<script is:inline>