static/afac26.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Applause for a Cause - HCA RSVP</title>
    <style>
        body {
            font-family: var(--wa-font-sans);
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 1rem;
        }
        #signin { display: none; flex: 1; align-items: center; justify-content: center; }
        #main { display: none; width: 100%; max-width: 600px; }
        .header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 2rem;
            width: 100%;
        }
        .header img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
        .header .spacer { flex: 1; }
        .event-header {
            text-align: center;
            margin-bottom: 1.5rem;
        }
        .event-header img {
            height: 120px;
            border-radius: 8px;
            margin-bottom: 1rem;
        }
        .event-header p {
            margin: 0.25rem 0;
            opacity: 0.7;
        }
        .rsvp-section {
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--wa-color-neutral-80);
        }
        .button-group {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }
        .donation-group {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .donation-group wa-button::part(base) {
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .donation-group wa-button[data-value="custom"]::part(base) {
            flex-direction: column;
        }
        .donation-group wa-input {
            width: 80px;
            margin-top: 0.4rem;
            --wa-focus-ring-width: 0;
            --wa-input-border-width: 0;
            --wa-input-focus-ring-color: transparent;
            --wa-input-border-color: transparent;
            --wa-input-border-color-focus: transparent;
        }
        wa-input[type="number"]::part(input) {
            -moz-appearance: textfield;
            text-align: center;
        }
        .donation-group wa-input::part(base) {
            border: none;
            box-shadow: none;
            outline: none;
        }
        .donation-group wa-input::part(base):focus-within {
            border: none;
            box-shadow: none;
            outline: none;
        }
        wa-input[type="number"]::part(input)::-webkit-inner-spin-button,
        wa-input[type="number"]::part(input)::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        wa-button.selected::part(base) {
            background-color: #FEDE02;
            color: #000;
        }
        .donation-section {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--wa-color-neutral-80);
        }
        .thank-you {
            background: var(--wa-color-success-95);
            color: var(--wa-color-success-30);
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 1rem;
        }
        .wa-dark .thank-you {
            background: var(--wa-color-success-20);
            color: var(--wa-color-success-90);
        }
        .info-box {
            background: var(--wa-color-neutral-95);
            color: var(--wa-color-neutral-20);
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }
        .wa-dark .info-box {
            background: var(--wa-color-neutral-20);
            color: var(--wa-color-neutral-90);
        }
        .donation-group wa-button {
            width: calc(50% - 0.25rem);
        }
    </style>
</head>
<body style="opacity: 0">
    <div id="signin"></div>
    <div id="main">
        <div class="header">
            <img data-bind="picture" alt="Profile">
            <span data-bind="name"></span>
            <span class="spacer"></span>
            <wa-button variant="neutral" size="small" id="logout-btn">Switch User</wa-button>
        </div>
        <div id="thank-you" class="thank-you" style="display: none;"></div>
        <wa-card>
            <div class="event-header">
                <img src="/afac26-logo.png" alt="Applause for a Cause">
                <p>Saturday, February 7, 2026 · 6:30 PM</p>
                <p>Helios Gym</p>
                <p>597 Central Avenue, Sunnyvale, CA 94086</p>
            </div>
            <div class="info-box">
                <p style="margin: 0 0 0.5rem 0;">Tickets are pay-what-you-wish. All donations go to <a href="https://svcommunityservices.org/" target="_blank">Sunnyvale Community Services</a>. We suggest $25 per family, but most importantly we'd love to see you there!</p>
                <p style="margin: 0;">Feel free to share this page with friends and family.</p>
            </div>
            <div class="rsvp-section">
                <div id="rsvp-header" style="font-weight: bold; margin-bottom: 1rem;">RSVP now to reserve your seats!</div>
                <div>Number of people (including performers):</div>
                <div class="button-group" id="num-people-group">
                    <wa-button size="small" variant="neutral" data-value="0">0</wa-button>
                    <wa-button size="small" variant="neutral" class="selected" data-value="1">1</wa-button>
                    <wa-button size="small" variant="neutral" data-value="2">2</wa-button>
                    <wa-button size="small" variant="neutral" data-value="3">3</wa-button>
                    <wa-button size="small" variant="neutral" data-value="4">4</wa-button>
                    <wa-button size="small" variant="neutral" data-value="5">5</wa-button>
                    <wa-button size="small" variant="neutral" data-value="6">6</wa-button>
                    <wa-button size="small" variant="neutral" data-value="7">7</wa-button>
                    <wa-button size="small" variant="neutral" data-value="8">8</wa-button>
                </div>
                <div class="donation-section">
                    <div id="donation-status" style="display: none; font-weight: bold; margin-bottom: 1rem;"></div>
                    <div id="donation-header">Would you like to make a donation?</div>
                    <div class="button-group donation-group" id="donation-group">
                        <wa-button variant="neutral" class="selected" data-value="25">$25</wa-button>
                        <wa-button variant="neutral" data-value="50">$50</wa-button>
                        <wa-button variant="neutral" data-value="custom"><span>Other</span><wa-input type="number" size="small" id="custom-amount" min="1" value="100"><span slot="start">$</span></wa-input></wa-button>
                        <wa-button variant="neutral" data-value="0">Maybe later</wa-button>
                    </div>
                </div>
                <hr style="margin-top: 1rem; border: none; border-top: 1px solid var(--wa-color-neutral-80);">
                <div style="text-align: center; margin-top: 1rem;">
                    <wa-button variant="brand" id="rsvp-btn">Submit RSVP</wa-button>
                </div>
            </div>
        </wa-card>
        <wa-button variant="text" size="small" href="/" style="margin-top: 2rem; margin-left: 3px;">« Events</wa-button>
    </div>
    <script type="module">
        import { auth, logout, api } from '/app.js';

        await auth();
        document.getElementById('main').style.display = 'block';
        document.getElementById('logout-btn').addEventListener('click', logout);

        const eventId = 'afac26';

        function showConfirmation(numPeople, donatedAmount) {
            const parts = [];
            if (numPeople > 0) {
                const word = numPeople === 1 ? 'person' : 'people';
                parts.push(`Your RSVP for ${numPeople} ${word} is confirmed.`);
            }
            if (donatedAmount) {
                parts.push(`Thank you for your $${donatedAmount.toFixed(2)} donation!`);
            }
            if (parts.length) {
                document.getElementById('thank-you').textContent = parts.join(' ');
                document.getElementById('thank-you').style.display = 'block';
            }
        }

        const params = new URLSearchParams(location.search);
        const donatedParam = params.get('donated');
        const numPeopleParam = params.get('num_people');
        if (donatedParam || numPeopleParam) {
            showConfirmation(parseInt(numPeopleParam) || 0, donatedParam ? parseFloat(donatedParam) : null);
            document.getElementById('thank-you').scrollIntoView({ behavior: 'smooth', block: 'center' });
            history.replaceState({}, '', location.pathname);
        }

        let selectedNumPeople = 1;
        let selectedDonation = 25;

        function setupButtonGroup(groupId, onChange) {
            const group = document.getElementById(groupId);
            group.querySelectorAll('wa-button').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    if (e.target.tagName === 'WA-INPUT') return;
                    group.querySelectorAll('wa-button').forEach(b => b.classList.remove('selected'));
                    btn.classList.add('selected');
                    onChange(btn.dataset.value);
                });
            });
        }

        setupButtonGroup('num-people-group', val => {
            selectedNumPeople = parseInt(val);
        });

        setupButtonGroup('donation-group', val => {
            selectedDonation = val === 'custom' ? 'custom' : (val === '0' ? 0 : parseInt(val));
        });

        document.getElementById('custom-amount').addEventListener('focus', () => {
            const group = document.getElementById('donation-group');
            group.querySelectorAll('wa-button').forEach(b => b.classList.remove('selected'));
            group.querySelector('wa-button[data-value="custom"]').classList.add('selected');
            selectedDonation = 'custom';
        });

        async function loadRSVP() {
            const data = await api('GET', `/api/rsvp/${eventId}`);
            updateUI(data);
        }

        function updateUI(data) {
            const hasRSVP = data.numPeople > 0;
            const hasDonation = data.donation > 0;

            if (hasRSVP) {
                const word = data.numPeople === 1 ? 'person' : 'people';
                document.getElementById('rsvp-header').textContent = `You've RSVPed for ${data.numPeople} ${word}.`;
            } else {
                document.getElementById('rsvp-header').textContent = 'RSVP now to reserve your seats!';
            }

            const donationStatus = document.getElementById('donation-status');
            if (hasDonation) {
                donationStatus.textContent = `You've donated $${data.donation.toFixed(2)}. Thank you!`;
                donationStatus.style.display = 'block';
                document.getElementById('donation-header').textContent = 'Make an additional donation?';
            } else {
                donationStatus.style.display = 'none';
                document.getElementById('donation-header').textContent = 'Would you like to make a donation?';
            }

            document.getElementById('rsvp-btn').textContent = (hasRSVP || hasDonation) ? 'Update RSVP' : 'Submit RSVP';

            const numGroup = document.getElementById('num-people-group');
            numGroup.querySelectorAll('wa-button').forEach(b => b.classList.remove('selected'));
            selectedNumPeople = data.numPeople || 1;
            const currentBtn = numGroup.querySelector(`wa-button[data-value="${selectedNumPeople}"]`);
            if (currentBtn) currentBtn.classList.add('selected');

            if (hasRSVP || hasDonation) {
                const donationGroup = document.getElementById('donation-group');
                donationGroup.querySelectorAll('wa-button').forEach(b => b.classList.remove('selected'));
                donationGroup.querySelector('wa-button[data-value="0"]').classList.add('selected');
                selectedDonation = 0;
            }
        }

        document.getElementById('rsvp-btn').addEventListener('click', async () => {
            let donationCents = 0;
            if (selectedDonation === 'custom') {
                donationCents = (parseInt(document.getElementById('custom-amount').value) || 0) * 100;
            } else if (selectedDonation > 0) {
                donationCents = selectedDonation * 100;
            }

            const data = await api('POST', `/api/rsvp/${eventId}`, { numPeople: selectedNumPeople, donationCents });
            if (data.url) {
                location.href = data.url;
            } else {
                updateUI(data);
                showConfirmation(data.numPeople, null);
            }
        });

        await loadRSVP();

        await customElements.whenDefined('wa-card');
        document.body.style.opacity = 1;
    </script>
</body>
</html>
Add events list and Applause for a Cause event page 2025-12-29 13:04:15 -08:00			`<!DOCTYPE html>`
			`<html lang="en">`
			`<head>`
			`<meta charset="UTF-8">`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
Alisa feedback #1 2026-01-03 21:04:00 -08:00			`<title>Applause for a Cause - HCA RSVP</title>`
Add events list and Applause for a Cause event page 2025-12-29 13:04:15 -08:00			`<style>`
			`body {`
			`font-family: var(--wa-font-sans);`
			`display: flex;`
			`flex-direction: column;`
			`align-items: center;`
			`min-height: 100vh;`
			`margin: 0;`
			`padding: 1rem;`
			`}`
Center signin button and adjust Events link spacing 2025-12-29 14:27:59 -08:00			`#signin { display: none; flex: 1; align-items: center; justify-content: center; }`
Add events list and Applause for a Cause event page 2025-12-29 13:04:15 -08:00			`#main { display: none; width: 100%; max-width: 600px; }`
			`.header {`
			`display: flex;`
			`align-items: center;`
			`gap: 1rem;`
			`margin-bottom: 2rem;`
			`width: 100%;`
			`}`
			`.header img {`
			`width: 40px;`
			`height: 40px;`
			`border-radius: 50%;`
			`}`
			`.header .spacer { flex: 1; }`
Add RSVP functionality with signed token auth 2025-12-29 13:17:02 -08:00			`.event-header {`
			`text-align: center;`
			`margin-bottom: 1.5rem;`
			`}`
			`.event-header img {`
			`height: 120px;`
			`border-radius: 8px;`
			`margin-bottom: 1rem;`
			`}`
			`.event-header p {`
			`margin: 0.25rem 0;`
			`opacity: 0.7;`
			`}`
			`.rsvp-section {`
			`margin-top: 1.5rem;`
			`padding-top: 1.5rem;`
			`border-top: 1px solid var(--wa-color-neutral-80);`
			`}`
Replace number inputs and radios with button groups 2025-12-30 09:38:28 -08:00			`.button-group {`
Add RSVP functionality with signed token auth 2025-12-29 13:17:02 -08:00			`display: flex;`
Replace number inputs and radios with button groups 2025-12-30 09:38:28 -08:00			`flex-wrap: wrap;`
			`gap: 0.5rem;`
			`margin-top: 0.5rem;`
Add RSVP functionality with signed token auth 2025-12-29 13:17:02 -08:00			`}`
Improve RSVP form with button selectors and yellow highlights 2025-12-30 10:00:55 -08:00			`.donation-group {`
Add donation info to event page and HCA Events header to sign-in 2025-12-30 12:40:46 -08:00			`display: flex;`
			`flex-wrap: wrap;`
Add Stripe payment integration for donations 2025-12-29 14:20:03 -08:00			`gap: 0.5rem;`
Replace number inputs and radios with button groups 2025-12-30 09:38:28 -08:00			`}`
Improve RSVP form with button selectors and yellow highlights 2025-12-30 10:00:55 -08:00			`.donation-group wa-button::part(base) {`
			`height: 80px;`
Replace number inputs and radios with button groups 2025-12-30 09:38:28 -08:00			`display: flex;`
			`align-items: center;`
Improve RSVP form with button selectors and yellow highlights 2025-12-30 10:00:55 -08:00			`justify-content: center;`
			`}`
			`.donation-group wa-button[data-value="custom"]::part(base) {`
			`flex-direction: column;`
			`}`
			`.donation-group wa-input {`
			`width: 80px;`
			`margin-top: 0.4rem;`
			`--wa-focus-ring-width: 0;`
			`--wa-input-border-width: 0;`
Fix donation button styling and input field interactions 2025-12-30 10:41:44 -08:00			`--wa-input-focus-ring-color: transparent;`
			`--wa-input-border-color: transparent;`
			`--wa-input-border-color-focus: transparent;`
Improve RSVP form with button selectors and yellow highlights 2025-12-30 10:00:55 -08:00			`}`
			`wa-input[type="number"]::part(input) {`
			`-moz-appearance: textfield;`
			`text-align: center;`
			`}`
Fix donation button styling and input field interactions 2025-12-30 10:41:44 -08:00			`.donation-group wa-input::part(base) {`
			`border: none;`
			`box-shadow: none;`
			`outline: none;`
			`}`
			`.donation-group wa-input::part(base):focus-within {`
			`border: none;`
			`box-shadow: none;`
			`outline: none;`
			`}`
Improve RSVP form with button selectors and yellow highlights 2025-12-30 10:00:55 -08:00			`wa-input[type="number"]::part(input)::-webkit-inner-spin-button,`
			`wa-input[type="number"]::part(input)::-webkit-outer-spin-button {`
			`-webkit-appearance: none;`
			`margin: 0;`
			`}`
Fix donation button styling and input field interactions 2025-12-30 10:41:44 -08:00			`wa-button.selected::part(base) {`
Improve RSVP form with button selectors and yellow highlights 2025-12-30 10:00:55 -08:00			`background-color: #FEDE02;`
			`color: #000;`
			`}`
			`.donation-section {`
			`margin-top: 1rem;`
			`padding-top: 1rem;`
			`border-top: 1px solid var(--wa-color-neutral-80);`
Add Stripe payment integration for donations 2025-12-29 14:20:03 -08:00			`}`
			`.thank-you {`
			`background: var(--wa-color-success-95);`
			`color: var(--wa-color-success-30);`
			`padding: 1rem;`
			`border-radius: 8px;`
			`margin-bottom: 1rem;`
			`}`
			`.wa-dark .thank-you {`
			`background: var(--wa-color-success-20);`
			`color: var(--wa-color-success-90);`
			`}`
Add donation info to event page and HCA Events header to sign-in 2025-12-30 12:40:46 -08:00			`.info-box {`
			`background: var(--wa-color-neutral-95);`
			`color: var(--wa-color-neutral-20);`
			`padding: 1rem;`
			`border-radius: 8px;`
			`margin-bottom: 1rem;`
			`font-size: 0.9rem;`
			`}`
			`.wa-dark .info-box {`
			`background: var(--wa-color-neutral-20);`
			`color: var(--wa-color-neutral-90);`
			`}`
			`.donation-group wa-button {`
			`width: calc(50% - 0.25rem);`
			`}`
Add events list and Applause for a Cause event page 2025-12-29 13:04:15 -08:00			`</style>`
			`</head>`
			`<body style="opacity: 0">`
			`<div id="signin"></div>`
			`<div id="main">`
			`<div class="header">`
			`<img data-bind="picture" alt="Profile">`
			`<span data-bind="name"></span>`
			`<span class="spacer"></span>`
			`<wa-button variant="neutral" size="small" id="logout-btn">Switch User</wa-button>`
			`</div>`
Show combined RSVP and donation confirmation after Stripe checkout 2026-01-03 21:19:59 -08:00			`<div id="thank-you" class="thank-you" style="display: none;"></div>`
Add RSVP functionality with signed token auth 2025-12-29 13:17:02 -08:00			`<wa-card>`
			`<div class="event-header">`
			`<img src="/afac26-logo.png" alt="Applause for a Cause">`
Alisa feedback #1 2026-01-03 21:04:00 -08:00			`<p>Saturday, February 7, 2026 · 6:30 PM</p>`
Add RSVP functionality with signed token auth 2025-12-29 13:17:02 -08:00			`<p>Helios Gym</p>`
Alisa feedback #1 2026-01-03 21:04:00 -08:00			`<p>597 Central Avenue, Sunnyvale, CA 94086</p>`
Add RSVP functionality with signed token auth 2025-12-29 13:17:02 -08:00			`</div>`
Add donation info to event page and HCA Events header to sign-in 2025-12-30 12:40:46 -08:00			`<div class="info-box">`
Alisa feedback #1 2026-01-03 21:04:00 -08:00			`<p style="margin: 0 0 0.5rem 0;">Tickets are pay-what-you-wish. All donations go to <a href="https://svcommunityservices.org/" target="_blank">Sunnyvale Community Services</a>. We suggest $25 per family, but most importantly we'd love to see you there!</p>`
Add donation info to event page and HCA Events header to sign-in 2025-12-30 12:40:46 -08:00			`<p style="margin: 0;">Feel free to share this page with friends and family.</p>`
			`</div>`
Add RSVP functionality with signed token auth 2025-12-29 13:17:02 -08:00			`<div class="rsvp-section">`
Alisa feedback #1 2026-01-03 21:04:00 -08:00			`<div id="rsvp-header" style="font-weight: bold; margin-bottom: 1rem;">RSVP now to reserve your seats!</div>`
			`<div>Number of people (including performers):</div>`
Consolidate RSVP form into single unified page 2025-12-30 12:04:13 -08:00			`<div class="button-group" id="num-people-group">`
			`<wa-button size="small" variant="neutral" data-value="0">0</wa-button>`
			`<wa-button size="small" variant="neutral" class="selected" data-value="1">1</wa-button>`
			`<wa-button size="small" variant="neutral" data-value="2">2</wa-button>`
			`<wa-button size="small" variant="neutral" data-value="3">3</wa-button>`
			`<wa-button size="small" variant="neutral" data-value="4">4</wa-button>`
			`<wa-button size="small" variant="neutral" data-value="5">5</wa-button>`
			`<wa-button size="small" variant="neutral" data-value="6">6</wa-button>`
			`<wa-button size="small" variant="neutral" data-value="7">7</wa-button>`
			`<wa-button size="small" variant="neutral" data-value="8">8</wa-button>`
Add RSVP functionality with signed token auth 2025-12-29 13:17:02 -08:00			`</div>`
Consolidate RSVP form into single unified page 2025-12-30 12:04:13 -08:00			`<div class="donation-section">`
Fix RSVP grammar and make status text styling consistent 2025-12-30 12:18:15 -08:00			`<div id="donation-status" style="display: none; font-weight: bold; margin-bottom: 1rem;"></div>`
Fix inconsistent text styling on event page 2025-12-30 12:12:55 -08:00			`<div id="donation-header">Would you like to make a donation?</div>`
Consolidate RSVP form into single unified page 2025-12-30 12:04:13 -08:00			`<div class="button-group donation-group" id="donation-group">`
			`<wa-button variant="neutral" class="selected" data-value="25">$25</wa-button>`
			`<wa-button variant="neutral" data-value="50">$50</wa-button>`
			`<wa-button variant="neutral" data-value="custom"><span>Other</span><wa-input type="number" size="small" id="custom-amount" min="1" value="100"><span slot="start">$</span></wa-input></wa-button>`
			`<wa-button variant="neutral" data-value="0">Maybe later</wa-button>`
Add Stripe payment integration for donations 2025-12-29 14:20:03 -08:00			`</div>`
Add RSVP functionality with signed token auth 2025-12-29 13:17:02 -08:00			`</div>`
Consolidate RSVP form into single unified page 2025-12-30 12:04:13 -08:00			`<hr style="margin-top: 1rem; border: none; border-top: 1px solid var(--wa-color-neutral-80);">`
			`<div style="text-align: center; margin-top: 1rem;">`
			`<wa-button variant="brand" id="rsvp-btn">Submit RSVP</wa-button>`
			`</div>`
Add RSVP functionality with signed token auth 2025-12-29 13:17:02 -08:00			`</div>`
Add events list and Applause for a Cause event page 2025-12-29 13:04:15 -08:00			`</wa-card>`
Center signin button and adjust Events link spacing 2025-12-29 14:27:59 -08:00			`<wa-button variant="text" size="small" href="/" style="margin-top: 2rem; margin-left: 3px;">« Events</wa-button>`
Add events list and Applause for a Cause event page 2025-12-29 13:04:15 -08:00			`</div>`
			`<script type="module">`
Add RSVP functionality with signed token auth 2025-12-29 13:17:02 -08:00			`import { auth, logout, api } from '/app.js';`
Add events list and Applause for a Cause event page 2025-12-29 13:04:15 -08:00
			`await auth();`
			`document.getElementById('main').style.display = 'block';`
			`document.getElementById('logout-btn').addEventListener('click', logout);`

Add RSVP functionality with signed token auth 2025-12-29 13:17:02 -08:00			`const eventId = 'afac26';`

Show combined RSVP and donation confirmation after Stripe checkout 2026-01-03 21:19:59 -08:00			`function showConfirmation(numPeople, donatedAmount) {`
			`const parts = [];`
			`if (numPeople > 0) {`
			`const word = numPeople === 1 ? 'person' : 'people';`
			parts.push(`Your RSVP for ${numPeople} ${word} is confirmed.`);
			`}`
			`if (donatedAmount) {`
			parts.push(`Thank you for your $${donatedAmount.toFixed(2)} donation!`);
			`}`
			`if (parts.length) {`
			`document.getElementById('thank-you').textContent = parts.join(' ');`
			`document.getElementById('thank-you').style.display = 'block';`
			`}`
			`}`

			`const params = new URLSearchParams(location.search);`
			`const donatedParam = params.get('donated');`
			`const numPeopleParam = params.get('num_people');`
			`if (donatedParam \|\| numPeopleParam) {`
			`showConfirmation(parseInt(numPeopleParam) \|\| 0, donatedParam ? parseFloat(donatedParam) : null);`
Scroll confirmation bar into view after Stripe redirect 2026-01-03 21:21:39 -08:00			`document.getElementById('thank-you').scrollIntoView({ behavior: 'smooth', block: 'center' });`
Add Stripe payment integration for donations 2025-12-29 14:20:03 -08:00			`history.replaceState({}, '', location.pathname);`
			`}`

Replace number inputs and radios with button groups 2025-12-30 09:38:28 -08:00			`let selectedNumPeople = 1;`
			`let selectedDonation = 25;`

Consolidate RSVP form into single unified page 2025-12-30 12:04:13 -08:00			`function setupButtonGroup(groupId, onChange) {`
Replace number inputs and radios with button groups 2025-12-30 09:38:28 -08:00			`const group = document.getElementById(groupId);`
			`group.querySelectorAll('wa-button').forEach(btn => {`
Improve RSVP form with button selectors and yellow highlights 2025-12-30 10:00:55 -08:00			`btn.addEventListener('click', (e) => {`
			`if (e.target.tagName === 'WA-INPUT') return;`
Consolidate RSVP form into single unified page 2025-12-30 12:04:13 -08:00			`group.querySelectorAll('wa-button').forEach(b => b.classList.remove('selected'));`
			`btn.classList.add('selected');`
Replace number inputs and radios with button groups 2025-12-30 09:38:28 -08:00			`onChange(btn.dataset.value);`
			`});`
Add Stripe payment integration for donations 2025-12-29 14:20:03 -08:00			`});`
Replace number inputs and radios with button groups 2025-12-30 09:38:28 -08:00			`}`

			`setupButtonGroup('num-people-group', val => {`
			`selectedNumPeople = parseInt(val);`
Consolidate RSVP form into single unified page 2025-12-30 12:04:13 -08:00			`});`
Replace number inputs and radios with button groups 2025-12-30 09:38:28 -08:00
			`setupButtonGroup('donation-group', val => {`
			`selectedDonation = val === 'custom' ? 'custom' : (val === '0' ? 0 : parseInt(val));`
Consolidate RSVP form into single unified page 2025-12-30 12:04:13 -08:00			`});`
Replace number inputs and radios with button groups 2025-12-30 09:38:28 -08:00
Fix donation button styling and input field interactions 2025-12-30 10:41:44 -08:00			`document.getElementById('custom-amount').addEventListener('focus', () => {`
			`const group = document.getElementById('donation-group');`
			`group.querySelectorAll('wa-button').forEach(b => b.classList.remove('selected'));`
			`group.querySelector('wa-button[data-value="custom"]').classList.add('selected');`
			`selectedDonation = 'custom';`
			`});`

Add RSVP functionality with signed token auth 2025-12-29 13:17:02 -08:00			`async function loadRSVP() {`
			const data = await api('GET', `/api/rsvp/${eventId}`);
			`updateUI(data);`
			`}`

			`function updateUI(data) {`
Consolidate RSVP form into single unified page 2025-12-30 12:04:13 -08:00			`const hasRSVP = data.numPeople > 0;`
			`const hasDonation = data.donation > 0;`

			`if (hasRSVP) {`
Add RSVP functionality with signed token auth 2025-12-29 13:17:02 -08:00			`const word = data.numPeople === 1 ? 'person' : 'people';`
Fix RSVP grammar and make status text styling consistent 2025-12-30 12:18:15 -08:00			document.getElementById('rsvp-header').textContent = `You've RSVPed for ${data.numPeople} ${word}.`;
Add RSVP functionality with signed token auth 2025-12-29 13:17:02 -08:00			`} else {`
Alisa feedback #1 2026-01-03 21:04:00 -08:00			`document.getElementById('rsvp-header').textContent = 'RSVP now to reserve your seats!';`
Consolidate RSVP form into single unified page 2025-12-30 12:04:13 -08:00			`}`

			`const donationStatus = document.getElementById('donation-status');`
			`if (hasDonation) {`
			donationStatus.textContent = `You've donated $${data.donation.toFixed(2)}. Thank you!`;
			`donationStatus.style.display = 'block';`
			`document.getElementById('donation-header').textContent = 'Make an additional donation?';`
			`} else {`
			`donationStatus.style.display = 'none';`
			`document.getElementById('donation-header').textContent = 'Would you like to make a donation?';`
			`}`

			`document.getElementById('rsvp-btn').textContent = (hasRSVP \|\| hasDonation) ? 'Update RSVP' : 'Submit RSVP';`

			`const numGroup = document.getElementById('num-people-group');`
			`numGroup.querySelectorAll('wa-button').forEach(b => b.classList.remove('selected'));`
			`selectedNumPeople = data.numPeople \|\| 1;`
			const currentBtn = numGroup.querySelector(`wa-button[data-value="${selectedNumPeople}"]`);
			`if (currentBtn) currentBtn.classList.add('selected');`

			`if (hasRSVP \|\| hasDonation) {`
			`const donationGroup = document.getElementById('donation-group');`
			`donationGroup.querySelectorAll('wa-button').forEach(b => b.classList.remove('selected'));`
			`donationGroup.querySelector('wa-button[data-value="0"]').classList.add('selected');`
			`selectedDonation = 0;`
Add RSVP functionality with signed token auth 2025-12-29 13:17:02 -08:00			`}`
			`}`

			`document.getElementById('rsvp-btn').addEventListener('click', async () => {`
Consolidate RSVP and donation into single endpoint 2025-12-30 11:46:58 -08:00			`let donationCents = 0;`
			`if (selectedDonation === 'custom') {`
			`donationCents = (parseInt(document.getElementById('custom-amount').value) \|\| 0) * 100;`
			`} else if (selectedDonation > 0) {`
			`donationCents = selectedDonation * 100;`
Replace number inputs and radios with button groups 2025-12-30 09:38:28 -08:00			`}`
Consolidate RSVP and donation into single endpoint 2025-12-30 11:46:58 -08:00
			const data = await api('POST', `/api/rsvp/${eventId}`, { numPeople: selectedNumPeople, donationCents });
			`if (data.url) {`
			`location.href = data.url;`
			`} else {`
			`updateUI(data);`
Show combined RSVP and donation confirmation after Stripe checkout 2026-01-03 21:19:59 -08:00			`showConfirmation(data.numPeople, null);`
Add Stripe payment integration for donations 2025-12-29 14:20:03 -08:00			`}`
Add RSVP functionality with signed token auth 2025-12-29 13:17:02 -08:00			`});`

			`await loadRSVP();`

Add events list and Applause for a Cause event page 2025-12-29 13:04:15 -08:00			`await customElements.whenDefined('wa-card');`
			`document.body.style.opacity = 1;`
			`</script>`
			`</body>`
			`</html>`