Mediusa/party-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update theme to Balloon Gala Party

Browse Source
This commit is contained in:
Brian Smith
2026-08-14 21:26:12 -07:00
parent e7dbcef571
commit 4c2849d535
2 changed files with 143 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main.js
+25 -14
View File
@@ -1,21 +1,32 @@
import './style.css'
document.querySelector('#app').innerHTML = `
<div class="reactor">
<div class="core"></div>
<div class="balloon-container">
${Array.from({length: 20}).map(() => `<div class="balloon" style="--left: ${Math.random() * 100}%; --delay: ${Math.random() * 5}s; --color: hsl(${Math.random() * 360}, 80%, 60%); --scale: ${0.5 + Math.random() * 0.8}"></div>`).join('')}
</div>
<h1>☢️ NUCLEAR POWER PARTY ☢️</h1>
<p class="warning">WARNING: HIGH ENERGY VIBES DETECTED</p>
<button id="meltdown-btn">INITIATE MELTDOWN</button>
<div id="status">Status: Stable</div>
<main class="glass-panel">
<h1>The Ultimate Balloon Gala</h1>
<p class="subtitle">Join us for a night of floating fun, vivid colors, and high-altitude entertainment.</p>
<div class="details">
<div class="detail-item">
<span class="icon">📅</span>
<span>Saturday, August 29th, 2026</span>
</div>
<div class="detail-item">
<span class="icon">📍</span>
<span>The Sky Lounge, Downtown</span>
</div>
</div>
<button id="rsvp-btn">RSVP NOW</button>
</main>
`
document.querySelector('#meltdown-btn').addEventListener('click', () => {
document.querySelector('.core').style.backgroundColor = '#ff0000';
document.querySelector('.core').style.boxShadow = '0 0 100px #ff0000, 0 0 200px #ff0000';
document.querySelector('h1').style.color = '#ff0000';
document.querySelector('h1').style.textShadow = '0 0 20px #ff0000';
document.querySelector('#status').innerHTML = 'Status: CRITICAL MELTDOWN IN PROGRESS! 🕺💃';
document.querySelector('#status').style.color = '#ff0000';
document.querySelector('#status').style.animation = 'blink 0.2s infinite';
document.querySelector('#rsvp-btn').addEventListener('click', (e) => {
e.target.innerHTML = '🎉 YOU ARE ON THE GUEST LIST! 🎉';
e.target.style.backgroundColor = '#10b981';
e.target.style.color = 'white';
e.target.style.transform = 'scale(1.05)';
});