Add donation info to event page and HCA Events header to sign-in

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Ian Gulliver
2025-12-30 12:40:46 -08:00
parent fdb36a364c
commit abdd312df3
2 changed files with 32 additions and 3 deletions

View File

@@ -54,8 +54,8 @@
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.donation-group { .donation-group {
display: grid; display: flex;
grid-template-columns: repeat(4, 1fr); flex-wrap: wrap;
gap: 0.5rem; gap: 0.5rem;
} }
.donation-group wa-button::part(base) { .donation-group wa-button::part(base) {
@@ -115,6 +115,21 @@
background: var(--wa-color-success-20); background: var(--wa-color-success-20);
color: var(--wa-color-success-90); 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> </style>
</head> </head>
<body style="opacity: 0"> <body style="opacity: 0">
@@ -138,6 +153,10 @@
<p>Feb 7, 2026 · 6:30 PM</p> <p>Feb 7, 2026 · 6:30 PM</p>
<p>Helios Gym</p> <p>Helios Gym</p>
</div> </div>
<div class="info-box">
<p style="margin: 0 0 0.5rem 0;">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 class="rsvp-section">
<div id="rsvp-header" style="font-weight: bold; margin-bottom: 1rem;">RSVP now!</div> <div id="rsvp-header" style="font-weight: bold; margin-bottom: 1rem;">RSVP now!</div>
<div>Number of people:</div> <div>Number of people:</div>

View File

@@ -109,8 +109,18 @@ export async function auth() {
} }
}); });
signin.style.flexDirection = 'column';
const header = document.createElement('div');
header.textContent = 'HCA Events';
header.style.cssText = 'font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem;';
signin.appendChild(header);
const buttonContainer = document.createElement('div');
signin.appendChild(buttonContainer);
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches; const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
google.accounts.id.renderButton(signin, { google.accounts.id.renderButton(buttonContainer, {
type: 'standard', type: 'standard',
theme: isDark ? 'outline' : 'filled_black', theme: isDark ? 'outline' : 'filled_black',
size: 'large', size: 'large',