2026-01-17 08:04:39 -07:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Donate - Applause for a Cause</ title >
< style >
body {
font-family : var ( -- wa - font - sans );
display : flex ;
flex-direction : column ;
align-items : center ;
min-height : 100 vh ;
margin : 0 ;
padding : 1 rem ;
}
# main { width : 100 % ; max-width : 600 px ; }
. event-header {
text-align : center ;
margin-bottom : 1.5 rem ;
}
. event-header img {
height : 120 px ;
border-radius : 8 px ;
margin-bottom : 1 rem ;
}
. event-header p {
margin : 0.25 rem 0 ;
opacity : 0.7 ;
}
. button-group {
display : flex ;
flex-wrap : wrap ;
gap : 0.5 rem ;
margin-top : 0.5 rem ;
}
. donation-group {
display : flex ;
flex-wrap : wrap ;
gap : 0.5 rem ;
}
. donation-group wa-button :: part ( base ) {
height : 80 px ;
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 : 80 px ;
margin-top : 0.4 rem ;
--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 : 1 rem ;
}
. thank-you {
background : var ( -- wa - color - success -95 );
color : var ( -- wa - color - success -30 );
padding : 1 rem ;
border-radius : 8 px ;
margin-bottom : 1 rem ;
}
. 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 : 1 rem ;
border-radius : 8 px ;
margin-bottom : 1 rem ;
font-size : 0.9 rem ;
}
. wa-dark . info-box {
background : var ( -- wa - color - neutral -20 );
color : var ( -- wa - color - neutral -90 );
}
. donation-group wa-button {
width : calc ( 50 % - 0.25 rem );
}
</ style >
</ head >
< body style = "opacity: 0" >
< div id = "main" >
< 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" >
</ div >
< div class = "info-box" >
< p style = "margin: 0;" > All donations go to < a href = "https://svcommunityservices.org/" target = "_blank" > Sunnyvale Community Services</ a > . Thank you for your generosity!</ p >
</ div >
< div class = "donation-section" >
< div style = "font-weight: bold; margin-bottom: 1rem;" > Select a donation amount:</ div >
< div class = "button-group donation-group" id = "donation-group" >
2026-01-17 08:10:56 -07:00
< wa-button variant = "neutral" class = "selected" data-value = "10" > $10</ wa-button >
< wa-button variant = "neutral" data-value = "25" > $25</ wa-button >
2026-01-17 08:04:39 -07:00
< 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 >
</ div >
< div style = "text-align: center; margin-top: 1.5rem;" >
< wa-button variant = "brand" id = "donate-btn" > Donate</ wa-button >
</ div >
</ div >
</ wa-card >
</ div >
< script type = "module" >
import { api } from '/app.js' ;
const eventId = 'afac26' ;
const params = new URLSearchParams ( location . search );
const donatedParam = params . get ( 'donated' );
if ( donatedParam ) {
const el = document . getElementById ( 'thank-you' );
el . textContent = `Thank you for your $ ${ parseFloat ( donatedParam ). toFixed ( 2 ) } donation!` ;
el . style . display = 'block' ;
history . replaceState ({}, '' , location . pathname );
}
2026-01-17 17:55:06 -07:00
const amountParam = params . get ( 'a' );
2026-01-17 08:10:56 -07:00
let selectedDonation = 10 ;
2026-01-17 18:04:56 -07:00
if ( amountParam !== null ) {
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' ;
2026-01-17 17:55:06 -07:00
const amount = parseFloat ( amountParam );
if ( amount > 0 ) {
document . getElementById ( 'custom-amount' ). value = amount % 1 === 0 ? amount : amount . toFixed ( 2 );
2026-01-17 18:04:56 -07:00
} else {
document . getElementById ( 'custom-amount' ). value = '' ;
2026-01-17 17:55:06 -07:00
}
}
2026-01-17 08:04:39 -07:00
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 ( 'donation-group' , val => {
selectedDonation = val === 'custom' ? 'custom' : 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' ;
});
2026-01-17 08:32:00 -07:00
const donateBtn = document . getElementById ( 'donate-btn' );
donateBtn . addEventListener ( 'click' , async () => {
2026-01-17 08:04:39 -07:00
let donationCents = 0 ;
if ( selectedDonation === 'custom' ) {
2026-01-17 17:55:06 -07:00
donationCents = Math . round (( parseFloat ( document . getElementById ( 'custom-amount' ). value ) || 0 ) * 100 );
2026-01-17 08:04:39 -07:00
} else {
donationCents = selectedDonation * 100 ;
}
if ( donationCents <= 0 ) {
2026-01-17 18:04:56 -07:00
alert ( selectedDonation === 'custom' ? 'Please enter a donation amount' : 'Please select a donation amount' );
2026-01-17 08:04:39 -07:00
return ;
}
2026-01-17 08:32:00 -07:00
donateBtn . loading = true ;
donateBtn . disabled = true ;
2026-01-17 08:04:39 -07:00
const data = await api ( 'POST' , `/api/donate/ ${ eventId } ` , { donationCents });
if ( data . url ) {
location . href = data . url ;
2026-01-17 08:32:00 -07:00
} else {
donateBtn . loading = false ;
donateBtn . disabled = false ;
2026-01-17 08:04:39 -07:00
}
});
await customElements . whenDefined ( 'wa-card' );
document . body . style . opacity = 1 ;
</ script >
</ body >
</ html >
