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

feat: add spots counter, cancellation policy, and update registration perks
CI/CD / deploy (push) Failing after 1m2s Details 

- Live spots counter (X of 60 remaining) with progress bar on registration sidebar
- Cancellation policy on step 2: 70% refund >1 month, 30% refund >1 week, none <1 week
- Updated sidebar perks to reflect actual offering (was "priority booking when tickets open")

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-04-10 14:56:04 -04:00
parent dc95bf4819
commit 1221674fd9
1 changed files with 78 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
index.html
View File

@ -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 @@
<div class="register-content">
<div class="register-info">
<h3>Early registration gets you</h3>
<div class="spots-counter" id="spots-counter">
<div class="spots-number"><span id="spots-remaining">--</span> <span class="spots-label">of 60 spots remaining</span></div>
<div class="spots-bar"><div class="spots-bar-fill" id="spots-bar-fill"></div></div>
<p class="spots-note">Rooms are assigned first-come, first-served. Popular options fill up fast.</p>
</div>
<h3>What you get</h3>
<ul class="register-perks">
<li>
<span class="check">✓</span>
<span>Priority booking when tickets open</span>
<span>7 days of sessions, workshops, games and LARPs</span>
</li>
<li>
<span class="check">✓</span>
@ -1985,6 +2042,10 @@
<strong>About food:</strong> Food is not included in this payment. Expect approximately &euro;15–20 per person per day. We'll be in touch about food choices and dietary preferences before the event.
</div>
<div class="info-box" style="background: rgba(157, 78, 221, 0.08); border-color: rgba(157, 78, 221, 0.3);">
<strong style="color: var(--accent-purple);">Deposit &amp; cancellation:</strong> 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.
</div>
<div class="form-submit">
<button type="button" class="btn btn-primary" id="btn-pay">Pay via Mollie</button>
</div>
@ -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');