Add hidden Easter Egg clicker game triggered by clicking the company name 5 times
This commit is contained in:
@@ -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>
|
||||
@@ -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>© 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">© 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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user