aethex-us/src/components/EasterEggs.astro

45 lines
961 B
Text

---
// Easter eggs and badge system for AeThex (mockup)
let found = false;
function revealEgg() {
found = true;
alert('🥚 You found an AeThex Easter Egg! Badge unlocked!');
}
---
<div class="easter-eggs">
<button class="egg-btn" client:click={revealEgg}>🔍 Find the Secret Egg</button>
{found && <div class="egg-badge">🥚 AeThex Egg Hunter Badge!</div>}
</div>
<style>
.easter-eggs {
display: flex;
flex-direction: column;
align-items: center;
margin: 2em 0 1em 0;
}
.egg-btn {
background: #ffd580;
color: #222;
border: none;
border-radius: 16px;
padding: 1em 2em;
font-size: 1.1em;
font-weight: 700;
cursor: pointer;
box-shadow: 0 2px 16px #0006;
transition: background 0.2s, color 0.2s;
}
.egg-btn:hover {
background: #ff1a1a;
color: #fff;
}
.egg-badge {
margin-top: 1.2em;
font-size: 1.2em;
color: #ff1a1a;
font-weight: 700;
background: #fff3;
border-radius: 12px;
padding: 0.5em 1.2em;
}
</style>