diff --git a/index.html b/index.html index 9e680ed..3d1e8ed 100644 --- a/index.html +++ b/index.html @@ -1164,6 +1164,57 @@ border-color: var(--accent-purple); } + /* Spots counter */ + .spots-counter { + background: rgba(255, 0, 110, 0.08); + border: 1px solid rgba(255, 0, 110, 0.3); + border-radius: 12px; + padding: 1.25rem 1.5rem; + margin-bottom: 2rem; + text-align: center; + } + + .spots-number { + font-family: 'Space Mono', monospace; + font-size: 1.1rem; + color: var(--text-primary); + margin-bottom: 0.75rem; + } + + .spots-number span:first-child { + font-size: 2rem; + font-weight: 700; + color: var(--accent-magenta); + } + + .spots-label { + font-size: 0.9rem; + color: var(--text-secondary); + } + + .spots-bar { + height: 6px; + background: rgba(255, 0, 110, 0.15); + border-radius: 3px; + overflow: hidden; + margin-bottom: 0.75rem; + } + + .spots-bar-fill { + height: 100%; + background: var(--gradient-3); + border-radius: 3px; + transition: width 1s ease; + width: 0%; + } + + .spots-note { + font-size: 0.8rem; + color: var(--text-secondary); + margin: 0; + font-style: italic; + } + /* Call to Action */ .cta-section { text-align: center; @@ -1718,12 +1769,18 @@
-

Early registration gets you

+
+
-- of 60 spots remaining
+
+

Rooms are assigned first-come, first-served. Popular options fill up fast.

+
+ +

What you get

+
+ Deposit & cancellation: This is a full payment. If you cancel more than 1 month before the event, you'll receive a 70% refund. If you cancel between 1 month and 1 week before, you'll receive a 30% refund. No refunds within 1 week of the event. +
+
@@ -2073,6 +2134,21 @@ }, 800); }); + // Spots counter — fetch registration count + const MAX_SPOTS = 60; + (async function loadSpots() { + try { + const res = await fetch('/api/stats'); + if (!res.ok) return; + const stats = await res.json(); + const taken = stats.totalRegistrations || 0; + const remaining = Math.max(0, MAX_SPOTS - taken); + document.getElementById('spots-remaining').textContent = remaining; + const pct = Math.min(100, Math.round((taken / MAX_SPOTS) * 100)); + document.getElementById('spots-bar-fill').style.width = pct + '%'; + } catch(e) { /* silently fail */ } + })(); + // Mobile navigation toggle const navToggle = document.querySelector('.nav-toggle'); const navLinks = document.querySelector('.nav-links');