calum/rda-v3
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

feat: redesign donate modal to match prototype like-for-like

Browse source 
- Cream (#F6F1E8) panel with slide-in/fade animation (no dark header bar)
- Eyebrow + Merriweather 900 title + subtitle header with circular close btn
- Running total dark green chip bar (updates live with mode/amount/Gift Aid)
- Full-label mode toggle: 'One-off donation' / 'Monthly donation', black active
- 2x2 amount chips with large Merriweather amount + impact text, black when selected
- 'Or another amount' inline row (£ prefix + right-aligned number input)
- Gift Aid block: custom visual checkbox, expandable name/address fields
- Pay step: Apple Pay / Google Pay / PayPal express buttons (→ JustGiving),
  'Or pay with card' divider, full card form (email, card, expiry/CVC,
  name, country/postcode), Direct Debit note (monthly only), lock-icon
  Donate button, trust row (Stripe / cancel anytime / Charity SC007357)
- Done step: green checkmark, 'Thank you...' heading, gift summary, close
- Hero button: green pill uppercase 'DONATE →' (matching DonateButton)
- Yellow bar button: black pill uppercase 'DONATE NOW →'

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Calum Muir 2026-05-25 12:08:47 +02:00
parent 23c9bacc36
commit eb5111aae3
1 changed files with 447 additions and 392 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

839
src/pages/index.astro
View file

@ -155,217 +155,56 @@ const ctaCards = [
display: none; display: none;
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(0,0,0,0.62);
backdrop-filter: blur(4px);
z-index: 1000; z-index: 1000;
align-items: center;
justify-content: center;
padding: 16px;
}
.donate-overlay.open { display: flex; }
.donate-modal {
background: #fff;
border-radius: 14px;
width: 100%;
max-width: 420px;
overflow: hidden;
box-shadow: 0 24px 80px rgba(0,0,0,0.45);
}
.donate-header {
background: #1e2e1a;
padding: 22px 24px 18px;
position: relative;
}
.donate-close {
position: absolute;
top: 14px; right: 16px;
background: none;
border: none;
color: rgba(246,241,232,0.6);
font-size: 22px;
cursor: pointer;
line-height: 1;
padding: 4px;
transition: color 0.15s;
}
.donate-close:hover { color: #F6F1E8; }
.donate-body { padding: 24px; }
.donate-toggle {
display: flex;
background: #f0f0ee;
border-radius: 999px;
padding: 3px;
margin-bottom: 22px;
}
.donate-toggle-btn {
flex: 1;
border: none;
background: none;
border-radius: 999px;
padding: 8px 0;
font-family: 'Public Sans', sans-serif;
font-weight: 700;
font-size: 13px;
cursor: pointer;
color: #555;
transition: background 0.2s, color 0.2s;
}
.donate-toggle-btn.active {
background: #1e2e1a;
color: #fff;
}
.donate-chips {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 14px;
}
.donate-chip {
border: 2px solid #e0e0de;
background: #fff;
border-radius: 8px;
padding: 10px 4px;
font-family: 'Merriweather', serif;
font-weight: 700;
font-size: 15px;
color: #1e2e1a;
cursor: pointer;
text-align: center;
transition: border-color 0.15s, background 0.15s;
}
.donate-chip:hover { border-color: #7DA371; }
.donate-chip.selected { border-color: #7DA371; background: #edf4ec; }
.donate-custom-wrap {
position: relative;
margin-bottom: 16px;
}
.donate-custom-prefix {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-family: 'Merriweather', serif;
font-weight: 700;
font-size: 16px;
color: #1e2e1a;
pointer-events: none;
}
.donate-custom-input {
width: 100%;
border: 2px solid #e0e0de;
border-radius: 8px;
padding: 11px 14px 11px 28px;
font-family: 'Merriweather', serif;
font-weight: 700;
font-size: 16px;
color: #1e2e1a;
outline: none;
transition: border-color 0.15s;
box-sizing: border-box;
}
.donate-custom-input:focus,
.donate-custom-input.selected { border-color: #7DA371; }
.donate-impact {
font-family: 'Public Sans', sans-serif;
font-weight: 600;
font-size: 13px;
color: #5a7a56;
min-height: 20px;
margin-bottom: 18px;
line-height: 1.4;
}
.donate-giftaid {
background: #f9f7f0;
border: 1px solid #e8e4d4;
border-radius: 8px;
padding: 14px 16px;
margin-bottom: 20px;
display: flex;
gap: 12px;
align-items: flex-start; align-items: flex-start;
}
.donate-giftaid input[type=checkbox] {
margin-top: 2px;
width: 18px;
height: 18px;
accent-color: #7DA371;
flex-shrink: 0;
cursor: pointer;
}
.donate-giftaid label {
font-family: 'Public Sans', sans-serif;
font-size: 13px;
font-weight: 600;
color: #3a3a2e;
line-height: 1.5;
cursor: pointer;
}
.donate-giftaid label strong { color: #1e2e1a; }
.donate-proceed-btn {
display: block;
width: 100%;
background: #7DA371;
color: #1e2e1a;
border: none;
border-radius: 999px;
padding: 14px 0;
font-family: 'Public Sans', sans-serif;
font-weight: 800;
font-size: 15px;
letter-spacing: 0.05em;
cursor: pointer;
transition: opacity 0.2s;
}
.donate-proceed-btn:hover { opacity: 0.88; }
.donate-step-pay { display: none; }
.donate-summary {
font-family: 'Merriweather', serif;
font-weight: 700;
font-size: 20px;
color: #1e2e1a;
text-align: center;
margin-bottom: 6px;
}
.donate-summary-sub {
font-family: 'Public Sans', sans-serif;
font-weight: 600;
font-size: 14px;
color: #666;
text-align: center;
margin-bottom: 28px;
line-height: 1.5;
}
.donate-jg-btn {
display: flex;
align-items: center;
justify-content: center; justify-content: center;
gap: 10px; padding: 4vh 16px 48px;
width: 100%; overflow-y: auto;
background: #1e2e1a; background: rgba(0,0,0,0);
color: #F6F1E8; -webkit-backdrop-filter: blur(0);
border: none; backdrop-filter: blur(0);
border-radius: 999px; transition: background 0.28s ease, backdrop-filter 0.28s ease, -webkit-backdrop-filter 0.28s ease;
padding: 15px 0;
font-family: 'Public Sans', sans-serif;
font-weight: 800;
font-size: 15px;
cursor: pointer;
text-decoration: none;
transition: opacity 0.2s;
margin-bottom: 12px;
} }
.donate-jg-btn:hover { opacity: 0.82; } .donate-overlay.visible {
.donate-back-link { background: rgba(0,0,0,0.55);
display: block; -webkit-backdrop-filter: blur(6px);
text-align: center; backdrop-filter: blur(6px);
}
.donate-panel {
position: relative;
width: 100%;
max-width: 680px;
background: #F6F1E8;
border-radius: 7px;
padding: clamp(28px, 4vw, 44px);
margin: auto;
box-shadow: 0 24px 80px rgba(0,0,0,0.4);
transform: translateY(16px) scale(0.985);
opacity: 0;
transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.28s ease;
}
.donate-overlay.visible .donate-panel {
transform: translateY(0) scale(1);
opacity: 1;
}
.donate-fi {
font-family: 'Public Sans', sans-serif; font-family: 'Public Sans', sans-serif;
font-weight: 600; font-weight: 600;
font-size: 13px; font-size: 15px;
color: #888; color: #000;
cursor: pointer; background: #fff;
text-decoration: underline; border: 1.5px solid rgba(0,0,0,0.15);
border-radius: 6px;
padding: 12px 14px;
outline: none;
width: 100%;
box-sizing: border-box;
transition: border-color 0.18s, box-shadow 0.18s;
}
.donate-fi:focus {
border-color: #7DA371;
box-shadow: 0 0 0 3px rgba(125,163,113,0.2);
} }
.donate-back-link:hover { color: #555; }
</style> </style>
<!-- Fixed nav wrapper — transparent until scrolled --> <!-- Fixed nav wrapper — transparent until scrolled -->
@ -426,12 +265,12 @@ const ctaCards = [
<button <button
onclick="openDonateModal()" onclick="openDonateModal()"
class="absolute hero-donate" class="absolute hero-donate"
style="bottom: 40px; right: 28px; display: flex; align-items: center; gap: 9px; background: #7DA371; color: #1e2e1a; border: none; border-radius: 999px; padding: 12px 22px 12px 18px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.05em; cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,0.32); transition: opacity 0.2s;" style="bottom: 40px; right: 28px; display: inline-flex; align-items: center; gap: 10px; background: #7DA371; color: #fff; border: none; border-radius: 9999px; padding: 16px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; white-space: nowrap; box-shadow: 0 4px 18px rgba(0,0,0,0.32); transition: background 0.18s ease;"
onmouseover="this.style.opacity='0.88'" onmouseout="this.style.opacity='1'" onmouseover="this.style.background='#5a7d55'" onmouseout="this.style.background='#7DA371'"
aria-label="Open donation form" aria-label="Open donation form"
> >
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
Donate Donate
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
</button> </button>
<!-- Scroll indicator (absolute, hidden on mobile) --> <!-- Scroll indicator (absolute, hidden on mobile) -->
@ -477,12 +316,12 @@ const ctaCards = [
</p> </p>
<button <button
onclick="openDonateModal()" onclick="openDonateModal()"
style="display: flex; align-items: center; gap: 9px; background: #1e2e1a; color: #F6F1E8; border: none; border-radius: 999px; padding: 13px 24px 13px 20px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.05em; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: opacity 0.2s;" style="display: inline-flex; align-items: center; gap: 10px; background: #000; color: #fff; border: none; border-radius: 9999px; padding: 16px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background 0.2s ease;"
onmouseover="this.style.opacity='0.82'" onmouseout="this.style.opacity='1'" onmouseover="this.style.background='#222'" onmouseout="this.style.background='#000'"
aria-label="Open donation form" aria-label="Open donation form"
> >
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg> Donate now
Donate <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
</button> </button>
</div> </div>
</section> </section>
@ -605,83 +444,241 @@ const ctaCards = [
</div> </div>
<!-- ── DONATE MODAL ── --> <!-- ── DONATE MODAL ── -->
<div id="donate-overlay" class="donate-overlay" role="dialog" aria-modal="true" aria-label="Donation form"> <div id="donate-overlay" role="dialog" aria-modal="true" aria-labelledby="donate-modal-title">
<div class="donate-modal"> <div id="donate-panel" class="donate-panel">
<!-- Header --> <!-- Header -->
<div class="donate-header"> <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:24px;">
<button class="donate-close" onclick="closeDonateModal()" aria-label="Close">&#x2715;</button> <div>
<p style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:#7DA371;margin-bottom:6px;">Highland Group RDA</p> <p style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:#7DA371;margin-bottom:10px;">Donate · Highland Group RDA</p>
<p style="font-family:'Merriweather',serif;font-weight:700;font-size:18px;color:#F6F1E8;line-height:1.25;margin:0;">Make a donation</p> <h2 id="donate-modal-title" style="font-family:'Merriweather',serif;font-weight:900;font-size:clamp(22px,2.6vw,30px);color:#000;line-height:1.2;margin:0;">Make a donation</h2>
</div> <p id="donate-header-sub" style="margin-top:6px;font-family:'Public Sans',sans-serif;font-weight:600;font-size:14px;color:rgba(0,0,0,0.6);line-height:1.5;">Every gift goes directly to our ponies and riders.</p>
<!-- Step 1: Choose amount -->
<div class="donate-body" id="donate-step-amount">
<!-- One-off / Monthly toggle -->
<div class="donate-toggle" role="group" aria-label="Donation frequency">
<button class="donate-toggle-btn active" id="donate-btn-once" onclick="setFreq('once')">One-off</button>
<button class="donate-toggle-btn" id="donate-btn-monthly" onclick="setFreq('monthly')">Monthly</button>
</div> </div>
<button onclick="closeDonateModal()" aria-label="Close"
<!-- Amount chips --> style="flex-shrink:0;width:38px;height:38px;border-radius:9999px;border:none;background:rgba(0,0,0,0.07);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.18s;"
<div class="donate-chips" id="donate-chips" role="group" aria-label="Donation amount"> onmouseover="this.style.background='rgba(0,0,0,0.14)'" onmouseout="this.style.background='rgba(0,0,0,0.07)'">
<!-- filled by JS --> <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3l10 10M13 3L3 13"/></svg>
</div>
<!-- Custom amount -->
<div class="donate-custom-wrap">
<span class="donate-custom-prefix">£</span>
<input
type="number"
id="donate-custom"
class="donate-custom-input"
placeholder="Other amount"
min="1"
step="1"
aria-label="Custom donation amount in pounds"
oninput="onCustomInput()"
/>
</div>
<!-- Impact text -->
<p class="donate-impact" id="donate-impact" aria-live="polite"></p>
<!-- Gift Aid -->
<div class="donate-giftaid">
<input type="checkbox" id="donate-giftaid-cb" />
<label for="donate-giftaid-cb">
<strong>Boost your donation by 25% at no extra cost.</strong><br>
I am a UK taxpayer and I understand that if I pay less Income Tax and/or Capital Gains Tax than the amount of Gift Aid claimed on all my donations, it is my responsibility to pay any difference.
</label>
</div>
<!-- Proceed button -->
<button class="donate-proceed-btn" id="donate-proceed" onclick="proceedToCheckout()">
Continue →
</button> </button>
</div> </div>
<!-- Step 2: Checkout / JustGiving redirect --> <!-- Running total chip -->
<div class="donate-body donate-step-pay" id="donate-step-pay"> <div id="donate-total-chip" style="display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#1e2e1a;color:#F6F1E8;border-radius:7px;padding:14px 18px;margin-bottom:22px;">
<div style="text-align:center;margin-bottom:28px;"> <span id="donate-chip-label" style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(246,241,232,0.6);">Your gift</span>
<div style="width:56px;height:56px;background:#edf4ec;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;"> <span>
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#7DA371" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg> <span id="donate-chip-amount" style="font-family:'Merriweather',serif;font-weight:900;font-size:26px;color:#F6F1E8;">£25</span>
<span id="donate-chip-freq" style="display:none;font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:rgba(246,241,232,0.6);margin-left:4px;">/ month</span>
<span id="donate-chip-ga" style="display:none;font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:#7DA371;margin-left:10px;"></span>
</span>
</div>
<!-- ─── STEP: AMOUNT ─── -->
<div id="donate-step-amount">
<!-- Mode toggle -->
<div role="tablist" style="display:grid;grid-template-columns:1fr 1fr;background:rgba(0,0,0,0.06);border:1.5px solid rgba(0,0,0,0.1);border-radius:9999px;padding:4px;margin-bottom:22px;">
<button id="donate-tab-oneoff" role="tab" aria-selected="true" type="button" onclick="dSetMode('oneoff')"
style="font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;letter-spacing:0.02em;padding:11px 18px;border-radius:9999px;border:none;cursor:pointer;background:#000;color:#fff;transition:all 0.22s;">
One-off donation
</button>
<button id="donate-tab-monthly" role="tab" aria-selected="false" type="button" onclick="dSetMode('monthly')"
style="font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;letter-spacing:0.02em;padding:11px 18px;border-radius:9999px;border:none;cursor:pointer;background:transparent;color:rgba(0,0,0,0.55);transition:all 0.22s;">
Monthly donation
</button>
</div>
<!-- Choose an amount label -->
<p style="font-family:'Public Sans',sans-serif;font-weight:800;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(0,0,0,0.55);margin-bottom:12px;">Choose an amount</p>
<!-- 2×2 chips grid — filled by JS -->
<div id="donate-chips-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;"></div>
<!-- "Or another amount" inline row -->
<div style="display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid rgba(0,0,0,0.12);border-radius:7px;padding:14px 16px;margin-bottom:22px;">
<span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:14px;color:rgba(0,0,0,0.55);">Or another amount</span>
<span style="margin-left:auto;font-family:'Merriweather',serif;font-weight:900;font-size:22px;color:rgba(0,0,0,0.65);">£</span>
<input id="donate-other" type="number" inputmode="decimal" min="1" placeholder="0"
oninput="dOnOther()"
style="width:86px;text-align:right;font-family:'Merriweather',serif;font-weight:900;font-size:22px;border:none;outline:none;background:transparent;color:#000;" />
<span id="donate-other-mo" style="display:none;font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:rgba(0,0,0,0.55);">/ month</span>
</div>
<!-- Gift Aid block -->
<div style="background:rgba(0,0,0,0.03);border:1.5px solid rgba(0,0,0,0.1);border-radius:7px;padding:16px 18px;margin-bottom:22px;">
<div style="display:flex;gap:12px;cursor:pointer;align-items:flex-start;" onclick="dToggleGA()">
<span id="donate-ga-box"
style="flex-shrink:0;width:22px;height:22px;border-radius:4px;margin-top:1px;background:#fff;border:1.5px solid rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;transition:all 0.18s;">
</span>
<span>
<span style="font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;color:#000;display:block;margin-bottom:4px;">Make my donation worth 25% more with Gift Aid</span>
<span style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:13px;color:rgba(0,0,0,0.6);line-height:1.5;">I'm a UK taxpayer and I'd like Highland Group RDA to reclaim Gift Aid on my donation and any donations I make in the future or have made in the last four years.</span>
</span>
</div>
<!-- Expandable name/address fields -->
<div id="donate-ga-fields" style="overflow:hidden;max-height:0;transition:max-height 0.4s ease;">
<div style="display:flex;flex-direction:column;gap:10px;padding-top:16px;">
<div style="display:flex;gap:10px;flex-wrap:wrap;">
<label style="display:flex;flex-direction:column;gap:6px;flex:1 1 120px;">
<span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">First name</span>
<input type="text" placeholder="Jane" class="donate-fi" />
</label>
<label style="display:flex;flex-direction:column;gap:6px;flex:1 1 120px;">
<span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">Last name</span>
<input type="text" placeholder="MacDonald" class="donate-fi" />
</label>
</div>
<label style="display:flex;flex-direction:column;gap:6px;">
<span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">Home address</span>
<input type="text" placeholder="House number and street" class="donate-fi" />
</label>
<div style="display:flex;gap:10px;flex-wrap:wrap;">
<label style="display:flex;flex-direction:column;gap:6px;flex:1 1 120px;">
<span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">Town</span>
<input type="text" placeholder="Inverness" class="donate-fi" />
</label>
<label style="display:flex;flex-direction:column;gap:6px;flex:1 1 120px;">
<span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">Postcode</span>
<input type="text" placeholder="IV5 7PP" class="donate-fi" />
</label>
</div>
</div>
</div> </div>
</div> </div>
<p class="donate-summary" id="donate-summary-amount"></p>
<p class="donate-summary-sub" id="donate-summary-sub"></p> <!-- Continue button -->
<a <button type="button" id="donate-continue-btn" onclick="dProceed()"
id="donate-jg-link" style="display:inline-flex;align-items:center;gap:10px;background:#7DA371;color:#fff;border:none;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;letter-spacing:0.08em;text-transform:uppercase;padding:16px 28px;border-radius:9999px;transition:background 0.18s;"
href="https://www.justgiving.com/charity/highlandgrouprda" onmouseover="this.style.background='#5a7d55'" onmouseout="this.style.background='#7DA371'">
target="_blank" Continue to payment
rel="noreferrer" <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
class="donate-jg-btn" </button>
onclick="closeDonateModal()"
>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
Donate via JustGiving
</a>
<span class="donate-back-link" onclick="backToAmount()">← Change amount</span>
</div> </div>
<!-- ─── STEP: PAY ─── -->
<div id="donate-step-pay" style="display:none;">
<!-- Back -->
<button type="button" onclick="dBack()"
style="background:transparent;border:none;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:rgba(0,0,0,0.6);display:inline-flex;align-items:center;gap:6px;padding:0;margin-bottom:20px;">
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="transform:rotate(180deg);"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
Back to amount
</button>
<!-- Express checkout -->
<p style="font-family:'Public Sans',sans-serif;font-weight:800;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(0,0,0,0.55);margin-bottom:12px;">Express checkout</p>
<div style="display:flex;gap:8px;margin-bottom:20px;">
<a href="https://www.justgiving.com/charity/highlandgrouprda" target="_blank" rel="noreferrer" onclick="closeDonateModal()"
style="flex:1;height:46px;border-radius:6px;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;gap:4px;font-family:'Public Sans',sans-serif;font-weight:600;font-size:14px;transition:filter 0.18s;"
onmouseover="this.style.filter='brightness(0.8)'" onmouseout="this.style.filter='none'">
<svg width="13" height="15" viewBox="0 0 14 16" fill="white" aria-hidden="true"><path d="M10.4 8.5c0-1.9 1.5-2.8 1.6-2.8-.9-1.3-2.2-1.5-2.7-1.5-1.2-.1-2.2.7-2.8.7-.6 0-1.5-.7-2.5-.6-1.3 0-2.5.7-3.1 1.9-1.4 2.3-.3 5.8 1 7.6.7.9 1.5 1.9 2.5 1.8 1 0 1.4-.6 2.6-.6 1.2 0 1.5.6 2.6.6 1.1 0 1.8-.9 2.4-1.8.4-.6.7-1.1.9-1.9-1.5-.6-2.5-1.8-2.5-3.4zM8.6 2.8c.6-.7 1-1.7.8-2.7-.9 0-1.9.5-2.5 1.2-.5.6-1 1.6-.9 2.6 1 .1 2-.5 2.6-1.1z"/></svg>
Pay
</a>
<a href="https://www.justgiving.com/charity/highlandgrouprda" target="_blank" rel="noreferrer" onclick="closeDonateModal()"
style="flex:1;height:46px;border-radius:6px;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:14px;transition:filter 0.18s;"
onmouseover="this.style.filter='brightness(0.8)'" onmouseout="this.style.filter='none'">
<span style="font-weight:600;"><span style="color:#4285F4;">G</span>Pay</span>
</a>
<a href="https://www.justgiving.com/charity/highlandgrouprda" target="_blank" rel="noreferrer" onclick="closeDonateModal()"
style="flex:1;height:46px;border-radius:6px;background:#FFC439;display:flex;align-items:center;justify-content:center;text-decoration:none;font-family:Verdana,sans-serif;font-weight:900;font-style:italic;font-size:15px;letter-spacing:-0.02em;transition:filter 0.18s;"
onmouseover="this.style.filter='brightness(0.92)'" onmouseout="this.style.filter='none'">
<span style="color:#003087;">Pay</span><span style="color:#009CDE;">Pal</span>
</a>
</div>
<!-- Or divider -->
<div style="display:flex;align-items:center;gap:12px;margin:4px 0 20px;">
<div style="flex:1;height:1px;background:rgba(0,0,0,0.12);"></div>
<span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(0,0,0,0.45);">Or pay with card</span>
<div style="flex:1;height:1px;background:rgba(0,0,0,0.12);"></div>
</div>
<!-- Card form (visual mock) -->
<div style="display:flex;flex-direction:column;gap:14px;margin-bottom:16px;">
<label style="display:flex;flex-direction:column;gap:6px;">
<span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">Email</span>
<input type="email" placeholder="you@example.com" class="donate-fi" />
</label>
<label style="display:flex;flex-direction:column;gap:6px;">
<span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">Card information</span>
<div style="background:#fff;border:1.5px solid rgba(0,0,0,0.15);border-radius:6px;display:flex;align-items:center;overflow:hidden;">
<input type="text" placeholder="1234 1234 1234 1234"
style="flex:1;padding:12px 14px;border:none;outline:none;font-family:'Public Sans',sans-serif;font-weight:600;font-size:15px;background:transparent;" />
<div style="display:flex;align-items:center;gap:4px;padding-right:10px;">
<span style="display:inline-flex;align-items:center;justify-content:center;height:18px;padding:0 5px;border-radius:3px;background:#1A1F71;color:#fff;font-family:'Public Sans',sans-serif;font-weight:900;font-size:9px;letter-spacing:0.04em;">VISA</span>
<span style="display:inline-flex;align-items:center;justify-content:center;height:18px;padding:0 5px;border-radius:3px;background:#EB001B;color:#fff;font-family:'Public Sans',sans-serif;font-weight:900;font-size:9px;">MC</span>
<span style="display:inline-flex;align-items:center;justify-content:center;height:18px;padding:0 5px;border-radius:3px;background:#016FD0;color:#fff;font-family:'Public Sans',sans-serif;font-weight:900;font-size:9px;">AMEX</span>
</div>
</div>
</label>
<div style="display:flex;gap:10px;">
<label style="display:flex;flex-direction:column;gap:6px;flex:1;">
<span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">Expiry</span>
<input type="text" placeholder="MM / YY" class="donate-fi" />
</label>
<label style="display:flex;flex-direction:column;gap:6px;flex:1;">
<span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">CVC</span>
<input type="text" placeholder="123" class="donate-fi" />
</label>
</div>
<label style="display:flex;flex-direction:column;gap:6px;">
<span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">Name on card</span>
<input type="text" placeholder="Full name" class="donate-fi" />
</label>
<div style="display:flex;gap:10px;">
<label style="display:flex;flex-direction:column;gap:6px;flex:1;">
<span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">Country</span>
<select class="donate-fi" style="cursor:pointer;appearance:none;">
<option>United Kingdom</option>
<option>Ireland</option>
<option>United States</option>
<option>Other</option>
</select>
</label>
<label style="display:flex;flex-direction:column;gap:6px;flex:1;">
<span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">Postcode</span>
<input type="text" placeholder="IV5 7PP" class="donate-fi" />
</label>
</div>
</div>
<!-- Direct Debit note (monthly only) -->
<div id="donate-dd-note" style="display:none;margin-bottom:16px;padding:12px 14px;background:rgba(0,0,0,0.04);border-radius:6px;border:1px dashed rgba(0,0,0,0.18);">
<p style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:#000;margin-bottom:4px;">Prefer Direct Debit?</p>
<p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:13px;color:rgba(0,0,0,0.6);line-height:1.5;">We can also set up your monthly gift via Direct Debit (BACS). <a href="https://www.justgiving.com/charity/highlandgrouprda" target="_blank" rel="noreferrer" style="text-decoration:underline;">Donate via JustGiving →</a></p>
</div>
<!-- Donate button -->
<button type="button" id="donate-pay-btn" onclick="dComplete()"
style="margin-top:4px;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#7DA371;color:#fff;border:none;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;letter-spacing:0.08em;text-transform:uppercase;padding:16px 28px;border-radius:9999px;box-sizing:border-box;transition:background 0.18s;"
onmouseover="this.style.background='#5a7d55'" onmouseout="this.style.background='#7DA371'">
<svg width="12" height="13" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="7" width="10" height="7" rx="1.5"/><path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2"/></svg>
<span id="donate-pay-label">Donate £25</span>
</button>
<!-- Trust row -->
<div style="display:flex;flex-wrap:wrap;gap:16px;row-gap:8px;align-items:center;padding-top:16px;border-top:1px solid rgba(0,0,0,0.1);margin-top:16px;">
<span style="display:inline-flex;align-items:center;gap:5px;font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.55);">
<svg width="11" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="7" width="10" height="7" rx="1.5"/><path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2"/></svg>
Secured by <span style="font-family:'Public Sans',sans-serif;font-weight:800;font-size:13px;color:#635BFF;margin-left:2px;">stripe</span>
</span>
<span id="donate-trust-cancel" style="display:none;font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.55);">You can cancel anytime</span>
<span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.55);">Charity SC007357</span>
</div>
</div>
<!-- ─── STEP: DONE ─── -->
<div id="donate-step-done" style="display:none;">
<div style="display:flex;flex-direction:column;gap:16px;padding:32px 0 8px;text-align:left;">
<div style="width:56px;height:56px;border-radius:9999px;background:#7DA371;display:flex;align-items:center;justify-content:center;">
<svg width="28" height="28" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8l3.5 3.5L13 5"/></svg>
</div>
<h3 style="font-family:'Merriweather',serif;font-weight:900;font-size:28px;color:#000;line-height:1.2;">Thank you — from all of us at Highland Group RDA.</h3>
<p id="donate-done-msg" style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:16px;color:rgba(0,0,0,0.7);line-height:1.6;max-width:520px;"></p>
<button type="button" onclick="closeDonateModal()"
style="align-self:flex-start;margin-top:8px;background:transparent;color:#000;border:1.5px solid #7DA371;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:800;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;padding:12px 24px;border-radius:9999px;transition:background 0.18s;"
onmouseover="this.style.background='rgba(125,163,113,0.1)'" onmouseout="this.style.background='transparent'">
Close
</button>
</div>
</div>
</div> </div>
</div> </div>
@ -694,145 +691,203 @@ const ctaCards = [
} }
// ── Donate modal ── // ── Donate modal ──
const PRESETS = { const D_PRESETS = {
once: [ oneoff: [
{ amt: 10, impact: "covers feed for one session" }, { amount: 10, impact: 'Hay for a pony for two days' },
{ amt: 25, impact: "helps with grooming supplies" }, { amount: 25, impact: "Funds one rider's session" },
{ amt: 50, impact: "contributes towards farrier costs" }, { amount: 50, impact: 'Covers a routine vet visit' },
{ amt: 100, impact: "supports a month of hay" }, { amount: 100, impact: 'A full week of farriery' },
], ],
monthly: [ monthly: [
{ amt: 5, impact: "provides a weekly treat for a pony" }, { amount: 5, impact: 'A grooming kit each month' },
{ amt: 10, impact: "covers monthly grooming supplies" }, { amount: 10, impact: 'Helps feed our ponies' },
{ amt: 25, impact: "contributes to monthly vet care" }, { amount: 20, impact: 'Funds a weekly session' },
{ amt: 50, impact: "supports monthly farrier visits" }, { amount: 35, impact: "A pony's regular farriery" },
], ],
}; };
let donateFreq = "once"; let _dMode = 'oneoff';
let donateSelected = 25; // default chip let _dAmt = 25;
let donateCustomActive = false; let _dOther = '';
let _dGA = false;
function renderChips() { function dGetAmt() {
const container = document.getElementById("donate-chips"); const v = Number(_dOther);
if (!container) return; return (_dOther && v > 0) ? v : _dAmt;
container.innerHTML = "";
PRESETS[donateFreq].forEach(({ amt }) => {
const btn = document.createElement("button");
btn.className = "donate-chip" + (!donateCustomActive && donateSelected === amt ? " selected" : "");
btn.textContent = "£" + amt;
btn.setAttribute("aria-pressed", String(!donateCustomActive && donateSelected === amt));
btn.onclick = () => selectChip(amt);
container.appendChild(btn);
});
} }
function getImpact() { function dRenderChips() {
if (donateCustomActive) return ""; const grid = document.getElementById('donate-chips-grid');
const preset = PRESETS[donateFreq].find(p => p.amt === donateSelected); if (!grid) return;
return preset ? "✦ £" + preset.amt + " " + preset.impact + "." : ""; const presets = D_PRESETS[_dMode];
const noOther = !_dOther;
grid.innerHTML = presets.map(({ amount, impact }) => {
const sel = noOther && _dAmt === amount;
return `<button type="button" onclick="dSelectChip(${amount})"
style="text-align:left;cursor:pointer;
background:${sel ? '#000' : '#fff'};
color:${sel ? '#fff' : '#000'};
border:1.5px solid ${sel ? '#000' : 'rgba(0,0,0,0.12)'};
border-radius:7px;padding:16px 18px;
display:flex;flex-direction:column;gap:4px;
transition:all 0.18s;"
onmouseover="if(this.dataset.sel!=='1'){this.style.borderColor='rgba(0,0,0,0.3)';}"
onmouseout="if(this.dataset.sel!=='1'){this.style.borderColor='rgba(0,0,0,0.12)';}"
data-sel="${sel ? '1' : '0'}">
<span style="font-family:'Merriweather',serif;font-weight:900;font-size:28px;line-height:1;">£${amount}</span>
<span style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:13px;line-height:1.4;opacity:${sel ? 0.9 : 0.75};">${impact}</span>
</button>`;
}).join('');
} }
function updateImpact() { function dUpdateChip() {
const el = document.getElementById("donate-impact"); const amt = dGetAmt();
if (el) el.textContent = getImpact(); const gaAmt = _dGA && amt > 0 ? Math.round(amt * 0.25 * 100) / 100 : 0;
} const el = (id) => document.getElementById(id);
if (el('donate-chip-label')) el('donate-chip-label').textContent = _dMode === 'monthly' ? 'Your monthly gift' : 'Your gift';
function selectChip(amt) { if (el('donate-chip-amount')) el('donate-chip-amount').textContent = '£' + (Number.isFinite(amt) ? amt : 0);
donateSelected = amt; if (el('donate-chip-freq')) el('donate-chip-freq').style.display = _dMode === 'monthly' ? 'inline' : 'none';
donateCustomActive = false; if (el('donate-chip-ga')) {
const input = document.getElementById("donate-custom"); el('donate-chip-ga').style.display = (_dGA && amt > 0) ? 'inline' : 'none';
if (input) { input.value = ""; input.classList.remove("selected"); } el('donate-chip-ga').textContent = `+ £${gaAmt.toFixed(2)} Gift Aid`;
renderChips(); }
updateImpact(); // Update pay button label
} const gaTotal = amt + gaAmt;
const payLabel = el('donate-pay-label');
function onCustomInput() { if (payLabel) {
const input = document.getElementById("donate-custom"); payLabel.textContent = `Donate £${Number.isFinite(amt) ? amt : 0}${_dMode === 'monthly' ? ' / month' : ''}${_dGA && amt > 0 ? ` (£${gaTotal.toFixed(2)} with Gift Aid)` : ''}`;
if (!input) return;
donateCustomActive = !!input.value;
if (donateCustomActive) input.classList.add("selected");
else input.classList.remove("selected");
renderChips();
updateImpact();
}
function setFreq(freq) {
donateFreq = freq;
document.getElementById("donate-btn-once").classList.toggle("active", freq === "once");
document.getElementById("donate-btn-monthly").classList.toggle("active", freq === "monthly");
// keep current selected amount if it exists in new presets, else default to first
const exists = PRESETS[freq].some(p => p.amt === donateSelected);
if (!exists) donateSelected = PRESETS[freq][1].amt;
donateCustomActive = false;
const input = document.getElementById("donate-custom");
if (input) { input.value = ""; input.classList.remove("selected"); }
renderChips();
updateImpact();
}
function proceedToCheckout() {
const customInput = document.getElementById("donate-custom");
const customVal = parseFloat(customInput?.value);
const amount = donateCustomActive && customVal > 0 ? customVal : donateSelected;
const giftAid = document.getElementById("donate-giftaid-cb")?.checked;
const freqLabel = donateFreq === "monthly" ? "per month" : "one-off gift";
const summaryAmt = document.getElementById("donate-summary-amount");
const summarySub = document.getElementById("donate-summary-sub");
if (summaryAmt) summaryAmt.textContent = "£" + (Number.isInteger(amount) ? amount : amount.toFixed(2));
if (summarySub) {
summarySub.textContent = freqLabel.charAt(0).toUpperCase() + freqLabel.slice(1)
+ (giftAid ? " · Gift Aid selected" : "")
+ "\nYou'll complete your payment securely via JustGiving.";
} }
document.getElementById("donate-step-amount").style.display = "none";
document.getElementById("donate-step-pay").style.display = "block";
} }
function backToAmount() { function dSelectChip(amount) {
document.getElementById("donate-step-pay").style.display = "none"; _dAmt = amount;
document.getElementById("donate-step-amount").style.display = "block"; _dOther = '';
const inp = document.getElementById('donate-other');
if (inp) inp.value = '';
dRenderChips();
dUpdateChip();
}
function dOnOther() {
const inp = document.getElementById('donate-other');
_dOther = inp ? inp.value : '';
dRenderChips();
dUpdateChip();
}
function dSetMode(mode) {
_dMode = mode;
const toOne = document.getElementById('donate-tab-oneoff');
const toMo = document.getElementById('donate-tab-monthly');
if (toOne) { toOne.style.background = mode === 'oneoff' ? '#000' : 'transparent'; toOne.style.color = mode === 'oneoff' ? '#fff' : 'rgba(0,0,0,0.55)'; toOne.setAttribute('aria-selected', String(mode === 'oneoff')); }
if (toMo) { toMo.style.background = mode === 'monthly' ? '#000' : 'transparent'; toMo.style.color = mode === 'monthly' ? '#fff' : 'rgba(0,0,0,0.55)'; toMo.setAttribute('aria-selected', String(mode === 'monthly')); }
_dAmt = mode === 'oneoff' ? 25 : 10;
_dOther = '';
const inp = document.getElementById('donate-other');
if (inp) inp.value = '';
const moTag = document.getElementById('donate-other-mo');
if (moTag) moTag.style.display = mode === 'monthly' ? 'inline' : 'none';
dRenderChips();
dUpdateChip();
}
function dToggleGA() {
_dGA = !_dGA;
const box = document.getElementById('donate-ga-box');
const fields = document.getElementById('donate-ga-fields');
if (box) {
box.style.background = _dGA ? '#7DA371' : '#fff';
box.style.borderColor = _dGA ? '#7DA371' : 'rgba(0,0,0,0.3)';
box.innerHTML = _dGA
? '<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8l3.5 3.5L13 5"/></svg>'
: '';
}
if (fields) fields.style.maxHeight = _dGA ? '420px' : '0';
dUpdateChip();
}
function dProceed() {
const el = (id) => document.getElementById(id);
el('donate-step-amount').style.display = 'none';
el('donate-step-pay').style.display = 'block';
const dd = el('donate-dd-note');
if (dd) dd.style.display = _dMode === 'monthly' ? 'block' : 'none';
const tc = el('donate-trust-cancel');
if (tc) tc.style.display = _dMode === 'monthly' ? 'inline' : 'none';
dUpdateChip();
document.getElementById('donate-overlay')?.scrollTo(0, 0);
}
function dBack() {
document.getElementById('donate-step-pay').style.display = 'none';
document.getElementById('donate-step-amount').style.display = 'block';
}
function dComplete() {
const amt = dGetAmt();
const gaAmt = _dGA && amt > 0 ? Math.round(amt * 0.25 * 100) / 100 : 0;
const el = (id) => document.getElementById(id);
el('donate-step-pay').style.display = 'none';
el('donate-step-done').style.display = 'block';
el('donate-total-chip').style.display = 'none';
el('donate-modal-title').textContent = 'Thank you.';
el('donate-header-sub').style.display = 'none';
const msg = el('donate-done-msg');
if (msg) {
msg.innerHTML = `Your ${_dMode === 'monthly' ? 'monthly' : 'one-off'} gift of <strong>£${Number.isFinite(amt) ? amt : 0}</strong>${_dGA ? ` (worth £${(amt + gaAmt).toFixed(2)} with Gift Aid)` : ''} goes directly to our ponies and riders. A receipt is on its way to your inbox.`;
}
document.getElementById('donate-overlay')?.scrollTo(0, 0);
} }
function openDonateModal() { function openDonateModal() {
renderChips(); const el = (id) => document.getElementById(id);
updateImpact(); // Reset state
// reset to amount step _dMode = 'oneoff'; _dAmt = 25; _dOther = ''; _dGA = false;
const stepAmt = document.getElementById("donate-step-amount"); // Reset UI
const stepPay = document.getElementById("donate-step-pay"); dSetMode('oneoff');
if (stepAmt) stepAmt.style.display = "block"; const gaBox = el('donate-ga-box');
if (stepPay) stepPay.style.display = "none"; const gaFields = el('donate-ga-fields');
const otherInp = el('donate-other');
const overlay = document.getElementById("donate-overlay"); if (gaBox) { gaBox.style.background = '#fff'; gaBox.style.borderColor = 'rgba(0,0,0,0.3)'; gaBox.innerHTML = ''; }
if (gaFields) gaFields.style.maxHeight = '0';
if (otherInp) otherInp.value = '';
// Reset steps
el('donate-step-amount').style.display = 'block';
el('donate-step-pay').style.display = 'none';
el('donate-step-done').style.display = 'none';
el('donate-total-chip').style.display = 'flex';
el('donate-modal-title').textContent = 'Make a donation';
const sub = el('donate-header-sub');
if (sub) sub.style.display = 'block';
dRenderChips();
dUpdateChip();
// Open overlay with animation
const overlay = el('donate-overlay');
if (overlay) { if (overlay) {
overlay.classList.add("open"); overlay.style.display = 'flex';
document.body.style.overflow = "hidden"; document.body.style.overflow = 'hidden';
requestAnimationFrame(() => requestAnimationFrame(() => overlay.classList.add('visible')));
} }
} }
function closeDonateModal() { function closeDonateModal() {
const overlay = document.getElementById("donate-overlay"); const overlay = document.getElementById('donate-overlay');
if (overlay) overlay.classList.remove("open"); if (!overlay) return;
document.body.style.overflow = ""; overlay.classList.remove('visible');
document.body.style.overflow = '';
setTimeout(() => { overlay.style.display = 'none'; }, 300);
} }
// Close on overlay click document.getElementById('donate-overlay')?.addEventListener('click', function(e) {
document.getElementById("donate-overlay")?.addEventListener("click", function(e) {
if (e.target === this) closeDonateModal(); if (e.target === this) closeDonateModal();
}); });
document.addEventListener('keydown', function(e) {
// Close on Escape if (e.key === 'Escape') closeDonateModal();
document.addEventListener("keydown", function(e) {
if (e.key === "Escape") closeDonateModal();
}); });
// Expose globally so onclick attributes work Object.assign(window, { openDonateModal, closeDonateModal, dSetMode, dSelectChip, dOnOther, dToggleGA, dProceed, dBack, dComplete });
Object.assign(window, { openDonateModal, closeDonateModal, setFreq, selectChip, onCustomInput, proceedToCheckout, backToAmount });
// Initial render dRenderChips();
renderChips(); dUpdateChip();
updateImpact();
</script> </script>
</BaseLayout> </BaseLayout>