Support Us: replace JustGiving donate band + sponsor section with inline widgets
- Donate band → UnifiedDonateWidget: expanding yellow section with one-off/monthly mode toggle, 2×2 preset chips with impact text, Gift Aid with address fields, pay step (express + card form), done step, and sticky dark-green summary rail - Sponsor a Pony → SponsorPonyWidget: 4-step flow (idle costs grid → pony picker with actual ponies Breagha/Harley/Connolly/Puzzle → tier selector → payment) - Updated 'Donate' three-ways card to link to #donate instead of JustGiving - Updated FAQ sponsor payment answer to reflect working widget Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
a6255b2318
commit
a9d72fcde2
1 changed files with 715 additions and 76 deletions
|
|
@ -17,10 +17,10 @@ const ways = [
|
||||||
{
|
{
|
||||||
label: "Donate",
|
label: "Donate",
|
||||||
heading: "Give today",
|
heading: "Give today",
|
||||||
body: "A one-off or regular donation via JustGiving goes directly towards running our sessions, caring for our ponies, and keeping our facilities safe.",
|
body: "A one-off or monthly donation goes directly towards running our sessions, caring for our ponies, and keeping our facilities safe.",
|
||||||
action: "Donate via JustGiving",
|
action: "Donate now",
|
||||||
href: "https://www.justgiving.com/charity/highlandgrouprda",
|
href: "#donate",
|
||||||
external: true,
|
external: false,
|
||||||
img: "/contact-640.webp",
|
img: "/contact-640.webp",
|
||||||
objectPos: "50% 40%",
|
objectPos: "50% 40%",
|
||||||
},
|
},
|
||||||
|
|
@ -91,7 +91,7 @@ const faqs = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
q: "How do I pay to sponsor a pony?",
|
q: "How do I pay to sponsor a pony?",
|
||||||
a: "We are currently working on a dedicated payment method — thank you for your patience. In the meantime, you can donate via JustGiving or contact us directly to discuss sponsorship arrangements.",
|
a: "You can sponsor one of our ponies directly on this page — choose your pony, pick a sponsorship level, and set up your monthly gift in a few steps. You can cancel at any time.",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
---
|
---
|
||||||
|
|
@ -289,84 +289,393 @@ const faqs = [
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ── DONATE BAND ── -->
|
<!-- ── DONATE WIDGET ── -->
|
||||||
<section style="background: #f5d445; padding: clamp(32px, 5vw, 44px) clamp(24px, 6vw, 72px);">
|
<section id="donate" style="background: #f5d445;">
|
||||||
|
<!-- Collapsed header bar -->
|
||||||
|
<div style="padding: clamp(28px, 4vw, 40px) clamp(24px, 6vw, 72px);">
|
||||||
<div style="max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;">
|
<div style="max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;">
|
||||||
<div>
|
<div>
|
||||||
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(20px, 2.5vw, 28px); color: #000; line-height: 1.3; margin-bottom: 8px;">
|
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(20px, 2.5vw, 28px); color: #000; line-height: 1.3; margin-bottom: 6px;">
|
||||||
Donate today via JustGiving.
|
Donate today.
|
||||||
</h2>
|
</h2>
|
||||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px; color: rgba(0,0,0,0.65); line-height: 1.6;">
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px; color: rgba(0,0,0,0.6); line-height: 1.6;">
|
||||||
One-off or regular — every donation goes directly towards our riders and ponies.
|
One-off or monthly — every gift goes directly to our riders and ponies.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<a
|
<button id="dw-toggle-btn" onclick="dwOpen()"
|
||||||
href="https://www.justgiving.com/charity/highlandgrouprda"
|
style="flex-shrink:0;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:13px;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background 0.18s ease;"
|
||||||
target="_blank"
|
onmouseover="this.style.background='#222'" onmouseout="this.style.background='#000'">
|
||||||
rel="noreferrer"
|
Donate now
|
||||||
style="flex-shrink: 0;"
|
<svg width="14" height="14" 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 8h10M9 4l4 4-4 4"/></svg>
|
||||||
>
|
</button>
|
||||||
<img
|
</div>
|
||||||
src="/Button.webp"
|
</div>
|
||||||
alt="Donate via JustGiving"
|
|
||||||
style="height: 52px; object-fit: contain; display: block;"
|
<!-- Expandable form panel -->
|
||||||
loading="lazy"
|
<div id="dw-panel" style="display:none;opacity:0;transform:translateY(-8px);transition:opacity 0.3s ease,transform 0.3s ease;">
|
||||||
/>
|
<div style="background:#F6F1E8;padding:clamp(28px,4vw,44px) clamp(24px,6vw,72px) clamp(32px,4vw,48px);">
|
||||||
</a>
|
<div style="max-width:1200px;margin:0 auto;display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap;">
|
||||||
|
|
||||||
|
<!-- Form column -->
|
||||||
|
<div style="flex:1 1 360px;min-width:0;">
|
||||||
|
|
||||||
|
<!-- Running total chip -->
|
||||||
|
<div id="dw-chip" style="display:flex;align-items:baseline;justify-content:space-between;gap:16px;background:#1e2e1a;color:#F6F1E8;border-radius:7px;padding:14px 18px;margin-bottom:22px;flex-wrap:wrap;">
|
||||||
|
<span id="dw-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>
|
||||||
|
<span>
|
||||||
|
<span id="dw-chip-amount" style="font-family:'Merriweather',serif;font-weight:900;font-size:26px;color:#F6F1E8;">£25</span>
|
||||||
|
<span id="dw-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="dw-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>
|
||||||
|
|
||||||
|
<!-- Amount step -->
|
||||||
|
<div id="dw-step-amount">
|
||||||
|
<div style="display:flex;background:rgba(0,0,0,0.08);border-radius:9999px;padding:4px;width:fit-content;margin-bottom:24px;">
|
||||||
|
<button id="dw-tab-oneoff" onclick="dwSetMode('oneoff')"
|
||||||
|
style="padding:9px 22px;border-radius:9999px;border:none;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:800;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;transition:all 0.18s ease;background:#000;color:#fff;">
|
||||||
|
One-off
|
||||||
|
</button>
|
||||||
|
<button id="dw-tab-monthly" onclick="dwSetMode('monthly')"
|
||||||
|
style="padding:9px 22px;border-radius:9999px;border:none;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:800;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;transition:all 0.18s ease;background:transparent;color:rgba(0,0,0,0.5);">
|
||||||
|
Monthly
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(0,0,0,0.4);margin-bottom:12px;">Choose an amount</p>
|
||||||
|
<div id="dw-chips-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;"></div>
|
||||||
|
<div style="display:flex;align-items:center;gap:10px;margin-bottom:24px;">
|
||||||
|
<span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:rgba(0,0,0,0.5);">Or</span>
|
||||||
|
<div style="position:relative;flex:1;display:flex;align-items:center;">
|
||||||
|
<span style="position:absolute;left:14px;font-family:'Public Sans',sans-serif;font-weight:700;font-size:15px;color:rgba(0,0,0,0.5);">£</span>
|
||||||
|
<input id="dw-other-input" type="number" min="1" placeholder="Other amount" oninput="dwOnOther()"
|
||||||
|
style="width:100%;padding:12px 14px 12px 30px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-weight:700;font-size:15px;background:white;outline:none;box-sizing:border-box;"
|
||||||
|
onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
|
||||||
|
</div>
|
||||||
|
<span id="dw-other-mo" style="display:none;font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:rgba(0,0,0,0.5);">/ mo</span>
|
||||||
|
</div>
|
||||||
|
<!-- Gift Aid -->
|
||||||
|
<div style="background:white;border-radius:7px;padding:18px 20px;margin-bottom:24px;border:2px solid rgba(0,0,0,0.08);">
|
||||||
|
<div onclick="dwToggleGA()" style="display:flex;align-items:flex-start;gap:14px;cursor:pointer;">
|
||||||
|
<span id="dw-ga-check" style="flex-shrink:0;margin-top:2px;width:20px;height:20px;border-radius:5px;border:2px solid rgba(0,0,0,0.25);background:white;display:flex;align-items:center;justify-content:center;transition:all 0.15s ease;">
|
||||||
|
<svg id="dw-ga-tick" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="opacity:0;transition:opacity 0.15s ease;"><path d="M2 6l3 3 5-5"/></svg>
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<p style="font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;color:#000;margin-bottom:2px;">Boost your donation with Gift Aid</p>
|
||||||
|
<p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:13px;color:rgba(0,0,0,0.55);line-height:1.5;">We can claim 25p of Gift Aid for every £1 you give at no extra cost to you.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="dw-ga-fields" style="max-height:0;overflow:hidden;transition:max-height 0.3s ease,opacity 0.3s ease;opacity:0;">
|
||||||
|
<div style="margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px;">
|
||||||
|
<input placeholder="First name" oninput="dwGaField('firstName',this.value)" style="padding:10px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
|
||||||
|
<input placeholder="Last name" oninput="dwGaField('lastName',this.value)" style="padding:10px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
|
||||||
|
<input placeholder="Address" oninput="dwGaField('address',this.value)" style="grid-column:1/-1;padding:10px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
|
||||||
|
<input placeholder="Town / City" oninput="dwGaField('town',this.value)" style="padding:10px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
|
||||||
|
<input placeholder="Postcode" oninput="dwGaField('postcode',this.value)" style="padding:10px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
|
||||||
|
</div>
|
||||||
|
<p style="margin-top:10px;font-family:'Public Sans',sans-serif;font-weight:600;font-size:12px;color:rgba(0,0,0,0.45);line-height:1.6;">I am a UK taxpayer and understand that if I pay less Income Tax and/or Capital Gains Tax than the amount of Gift Aid claimed on all my donations in that tax year it is my responsibility to pay any difference.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button onclick="dwProceed()"
|
||||||
|
style="width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:#1e2e1a;color:#F6F1E8;border:none;border-radius:9999px;padding:16px 28px;font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;transition:background 0.18s ease;"
|
||||||
|
onmouseover="this.style.background='#2d4427'" onmouseout="this.style.background='#1e2e1a'">
|
||||||
|
Continue to payment
|
||||||
|
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="#F6F1E8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pay step -->
|
||||||
|
<div id="dw-step-pay" style="display:none;">
|
||||||
|
<button onclick="dwBack()" style="display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:rgba(0,0,0,0.5);padding:0;margin-bottom:22px;">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 8H3M7 4L3 8l4 4"/></svg>
|
||||||
|
Back
|
||||||
|
</button>
|
||||||
|
<p style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(0,0,0,0.4);margin-bottom:12px;">Express checkout</p>
|
||||||
|
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;">
|
||||||
|
<button style="padding:12px;border:2px solid rgba(0,0,0,0.12);border-radius:8px;background:black;color:white;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:800;font-size:12px;">Apple Pay</button>
|
||||||
|
<button style="padding:12px;border:2px solid rgba(0,0,0,0.12);border-radius:8px;background:white;color:black;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:800;font-size:12px;">G Pay</button>
|
||||||
|
<a href="https://www.justgiving.com/charity/highlandgrouprda" target="_blank" rel="noreferrer" style="display:flex;align-items:center;justify-content:center;padding:12px;border:2px solid rgba(0,0,0,0.12);border-radius:8px;background:white;color:#003087;font-family:'Public Sans',sans-serif;font-weight:800;font-size:12px;text-decoration:none;">PayPal</a>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;align-items:center;gap:12px;margin-bottom: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:12px;color:rgba(0,0,0,0.4);">Or pay with card</span>
|
||||||
|
<div style="flex:1;height:1px;background:rgba(0,0,0,0.12);"></div>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;flex-direction:column;gap:10px;margin-bottom:20px;">
|
||||||
|
<input type="email" placeholder="Email address" style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
|
||||||
|
<input placeholder="Card number" style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
|
||||||
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
|
||||||
|
<input placeholder="MM / YY" style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
|
||||||
|
<input placeholder="CVC" style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
|
||||||
|
</div>
|
||||||
|
<input placeholder="Name on card" style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
|
||||||
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
|
||||||
|
<select style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;background:white;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'">
|
||||||
|
<option>United Kingdom</option>
|
||||||
|
<option>United States</option>
|
||||||
|
<option>Other</option>
|
||||||
|
</select>
|
||||||
|
<input placeholder="Postcode" style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="dw-dd-note" style="display:none;background:rgba(0,0,0,0.05);border-radius:7px;padding:12px 16px;margin-bottom:16px;">
|
||||||
|
<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;">Monthly donations are collected via Direct Debit. You can cancel at any time.</p>
|
||||||
|
</div>
|
||||||
|
<button id="dw-pay-btn" onclick="dwComplete()"
|
||||||
|
style="width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:#1e2e1a;color:#F6F1E8;border:none;border-radius:9999px;padding:16px 28px;font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;transition:background 0.18s ease;margin-bottom:14px;"
|
||||||
|
onmouseover="this.style.background='#2d4427'" onmouseout="this.style.background='#1e2e1a'">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="#F6F1E8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="5" width="12" height="9" rx="2"/><path d="M5 5V4a3 3 0 016 0v1"/></svg>
|
||||||
|
<span id="dw-pay-label">Donate £25</span>
|
||||||
|
</button>
|
||||||
|
<div style="display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;">
|
||||||
|
<span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;color:rgba(0,0,0,0.35);">Secured by Stripe</span>
|
||||||
|
<span style="color:rgba(0,0,0,0.2);">·</span>
|
||||||
|
<span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;color:rgba(0,0,0,0.35);">Cancel anytime</span>
|
||||||
|
<span style="color:rgba(0,0,0,0.2);">·</span>
|
||||||
|
<span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;color:rgba(0,0,0,0.35);">SC007357</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Done step -->
|
||||||
|
<div id="dw-step-done" style="display:none;text-align:center;padding:40px 0 24px;">
|
||||||
|
<div style="width:56px;height:56px;background:#7DA371;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;">
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
|
||||||
|
</div>
|
||||||
|
<h3 style="font-family:'Merriweather',serif;font-weight:900;font-size:28px;color:#000;margin-bottom:10px;">Thank you.</h3>
|
||||||
|
<p id="dw-done-msg" style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:16px;color:rgba(0,0,0,0.6);line-height:1.6;max-width:400px;margin:0 auto 28px;"></p>
|
||||||
|
<button onclick="dwClose()" style="display:inline-flex;align-items:center;gap:10px;background:#1e2e1a;color:#F6F1E8;border:none;border-radius:9999px;padding:14px 28px;font-family:'Public Sans',sans-serif;font-weight:800;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;">
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Summary rail (desktop) -->
|
||||||
|
<div id="dw-rail" style="display:none;flex:0 0 260px;background:#1e2e1a;border-radius:7px;padding:28px 24px;align-self:flex-start;position:sticky;top:90px;">
|
||||||
|
<p style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(246,241,232,0.5);margin-bottom:16px;">Your support</p>
|
||||||
|
<div id="dw-rail-amount" style="font-family:'Merriweather',serif;font-weight:900;font-size:38px;color:#F6F1E8;margin-bottom:4px;">£25</div>
|
||||||
|
<div id="dw-rail-freq" style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:rgba(246,241,232,0.5);margin-bottom:20px;">one-off gift</div>
|
||||||
|
<div id="dw-rail-impact" style="background:rgba(255,255,255,0.08);border-radius:6px;padding:14px 16px;margin-bottom:20px;">
|
||||||
|
<p id="dw-rail-impact-text" style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:13px;color:rgba(246,241,232,0.75);line-height:1.5;"></p>
|
||||||
|
</div>
|
||||||
|
<div id="dw-rail-ga" style="display:none;">
|
||||||
|
<div style="height:1px;background:rgba(255,255,255,0.1);margin-bottom:16px;"></div>
|
||||||
|
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
|
||||||
|
<span style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:13px;color:rgba(246,241,232,0.6);">Your gift</span>
|
||||||
|
<span id="dw-rail-ga-base" style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:#F6F1E8;"></span>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;justify-content:space-between;margin-bottom:12px;">
|
||||||
|
<span style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:13px;color:rgba(246,241,232,0.6);">Gift Aid</span>
|
||||||
|
<span id="dw-rail-ga-extra" style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:#7DA371;"></span>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;justify-content:space-between;">
|
||||||
|
<span style="font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;color:#F6F1E8;">Total to charity</span>
|
||||||
|
<span id="dw-rail-ga-total" style="font-family:'Merriweather',serif;font-weight:900;font-size:16px;color:#F6F1E8;"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ── SPONSOR A PONY ── -->
|
<!-- ── SPONSOR A PONY ── -->
|
||||||
<section id="sponsor" class="split-panel" style="display: flex; width: 100%; min-height: 520px; overflow: hidden;">
|
<section id="sponsor">
|
||||||
|
|
||||||
|
<!-- Step 0: Idle -->
|
||||||
|
<div id="sp-idle" style="display:flex;width:100%;min-height:520px;overflow:hidden;" class="split-panel">
|
||||||
<div class="panel-wrap split-panel-img" style="flex:0 0 48%;position:relative;overflow:hidden;">
|
<div class="panel-wrap split-panel-img" style="flex:0 0 48%;position:relative;overflow:hidden;">
|
||||||
<img
|
<img class="panel-img" src="/alineofponies-1920w.webp" alt="Our ponies"
|
||||||
class="panel-img"
|
|
||||||
src="/alineofponies-1920w.webp"
|
|
||||||
alt="Our ponies"
|
|
||||||
style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;"
|
style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;"
|
||||||
loading="lazy"
|
loading="lazy" decoding="async" />
|
||||||
decoding="async"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="split-panel-text" style="flex:1 1 0;background:#1e2e1a;display:flex;flex-direction:column;justify-content:center;padding:64px 72px;">
|
<div class="split-panel-text" style="flex:1 1 0;background:#1e2e1a;display:flex;flex-direction:column;justify-content:center;padding:64px 72px;">
|
||||||
<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: 14px;">
|
<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:14px;">Sponsor a pony</p>
|
||||||
Sponsor a pony
|
<div style="width:36px;height:2px;background:#7DA371;margin-bottom:22px;"></div>
|
||||||
</p>
|
<h2 style="font-family:'Merriweather',serif;font-weight:700;font-size:clamp(22px,2.5vw,34px);color:#F6F1E8;line-height:1.15;margin-bottom:16px;">By sponsoring a pony, you enable us to enrich lives.</h2>
|
||||||
<div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 22px;" />
|
<p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:16px;color:rgba(246,241,232,0.75);line-height:1.7;margin-bottom:32px;">Our ponies need regular farriery, feed, and veterinary care. Sponsoring one — even partially — makes a direct, tangible difference to a real animal and the riders who depend on them.</p>
|
||||||
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 34px); color: #F6F1E8; line-height: 1.15; margin-bottom: 16px;">
|
|
||||||
By sponsoring a pony, you enable us to enrich lives.
|
|
||||||
</h2>
|
|
||||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(246,241,232,0.75); line-height: 1.7; margin-bottom: 32px;">
|
|
||||||
Our ponies need regular farriery, feed, and veterinary care. Sponsoring one — even partially — makes a direct, tangible difference to a real animal and the riders who depend on them.
|
|
||||||
</p>
|
|
||||||
<!-- Cost grid -->
|
|
||||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:36px;">
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:36px;">
|
||||||
{costs.map((c) => (
|
{costs.map((c) => (
|
||||||
<div class="cost-card" style="background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:7px;padding:16px 18px;">
|
<div class="cost-card" style="background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:7px;padding:16px 18px;">
|
||||||
<p style="font-family: 'Merriweather', serif; font-weight: 900; font-size: 26px; color: #7DA371; line-height: 1;">
|
<p style="font-family:'Merriweather',serif;font-weight:900;font-size:26px;color:#7DA371;line-height:1;">{c.amount}</p>
|
||||||
{c.amount}
|
<p style="margin-top:4px;font-family:'Public Sans',sans-serif;font-weight:600;font-size:11px;color:rgba(246,241,232,0.45);text-transform:uppercase;letter-spacing:0.08em;">{c.period}</p>
|
||||||
</p>
|
<p style="margin-top:8px;font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:#F6F1E8;line-height:1.4;">{c.label}</p>
|
||||||
<p style="margin-top: 4px; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 11px; color: rgba(246,241,232,0.45); text-transform: uppercase; letter-spacing: 0.08em;">
|
|
||||||
{c.period}
|
|
||||||
</p>
|
|
||||||
<p style="margin-top: 8px; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: #F6F1E8; line-height: 1.4;">
|
|
||||||
{c.label}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<a
|
<button onclick="spStart()"
|
||||||
href="https://www.justgiving.com/charity/highlandgrouprda"
|
style="align-self:flex-start;display:inline-flex;align-items:center;gap:10px;background:#7DA371;color:white;border:none;border-radius:9999px;padding:13px 28px;font-family:'Public Sans',sans-serif;font-weight:800;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;transition:background 0.18s ease;"
|
||||||
target="_blank"
|
onmouseover="this.style.background='#5a7d55'" onmouseout="this.style.background='#7DA371'">
|
||||||
rel="noreferrer"
|
Choose a pony to sponsor
|
||||||
style="align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: #7DA371; color: white; border-radius: 9999px; padding: 13px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;"
|
<svg width="14" height="14" 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 8h10M9 4l4 4-4 4"/></svg>
|
||||||
>
|
</button>
|
||||||
Sponsor via JustGiving
|
|
||||||
<svg width="14" height="14" 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 8h10M9 4l4 4-4 4"/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 1: Pony picker -->
|
||||||
|
<div id="sp-picker" style="display:none;background:#1e2e1a;padding:clamp(40px,6vw,72px) clamp(24px,6vw,72px);">
|
||||||
|
<div style="max-width:1100px;margin:0 auto;">
|
||||||
|
<button onclick="spBack(1)" style="display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:rgba(246,241,232,0.5);padding:0;margin-bottom:28px;">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 8H3M7 4L3 8l4 4"/></svg>
|
||||||
|
Back
|
||||||
|
</button>
|
||||||
|
<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:12px;">Sponsor a pony</p>
|
||||||
|
<h2 style="font-family:'Merriweather',serif;font-weight:700;font-size:clamp(22px,2.5vw,32px);color:#F6F1E8;line-height:1.2;margin-bottom:8px;">Who would you like to sponsor?</h2>
|
||||||
|
<p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:15px;color:rgba(246,241,232,0.65);margin-bottom:36px;">Each of our four ponies plays a unique role in our sessions.</p>
|
||||||
|
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;">
|
||||||
|
<button onclick="spSelectPony('breagha')" style="position:relative;aspect-ratio:3/4;border:none;border-radius:10px;overflow:hidden;cursor:pointer;background:transparent;padding:0;transition:transform 0.2s ease;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">
|
||||||
|
<img src="/Breagh-bc8e70e8-2880w.webp" alt="Breagha" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;" />
|
||||||
|
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.1) 60%);"></div>
|
||||||
|
<div style="position:absolute;bottom:0;left:0;right:0;padding:20px 18px;">
|
||||||
|
<p style="font-family:'Merriweather',serif;font-weight:700;font-size:20px;color:white;margin-bottom:3px;">Breagha</p>
|
||||||
|
<p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:12px;color:rgba(255,255,255,0.7);">13hh · Skewbald cob mare · 19yo</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<button onclick="spSelectPony('harley')" style="position:relative;aspect-ratio:3/4;border:none;border-radius:10px;overflow:hidden;cursor:pointer;background:transparent;padding:0;transition:transform 0.2s ease;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">
|
||||||
|
<img src="/Harley-6ece9eca-2880w.webp" alt="Harley" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;" />
|
||||||
|
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.1) 60%);"></div>
|
||||||
|
<div style="position:absolute;bottom:0;left:0;right:0;padding:20px 18px;">
|
||||||
|
<p style="font-family:'Merriweather',serif;font-weight:700;font-size:20px;color:white;margin-bottom:3px;">Harley</p>
|
||||||
|
<p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:12px;color:rgba(255,255,255,0.7);">15.3hh · Skewbald cob · 17yo</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<button onclick="spSelectPony('connolly')" style="position:relative;aspect-ratio:3/4;border:none;border-radius:10px;overflow:hidden;cursor:pointer;background:transparent;padding:0;transition:transform 0.2s ease;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">
|
||||||
|
<img src="/connolly-73f3e69f-2880w-2.webp" alt="Connolly" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;" />
|
||||||
|
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.1) 60%);"></div>
|
||||||
|
<div style="position:absolute;bottom:0;left:0;right:0;padding:20px 18px;">
|
||||||
|
<p style="font-family:'Merriweather',serif;font-weight:700;font-size:20px;color:white;margin-bottom:3px;">Connolly</p>
|
||||||
|
<p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:12px;color:rgba(255,255,255,0.7);">15.1hh · Piebald cob gelding · 18yo</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<button onclick="spSelectPony('puzzle')" style="position:relative;aspect-ratio:3/4;border:none;border-radius:10px;overflow:hidden;cursor:pointer;background:transparent;padding:0;transition:transform 0.2s ease;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">
|
||||||
|
<img src="/puzzle-5de6e325-2880w.webp" alt="Puzzle" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;" />
|
||||||
|
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.1) 60%);"></div>
|
||||||
|
<div style="position:absolute;bottom:0;left:0;right:0;padding:20px 18px;">
|
||||||
|
<p style="font-family:'Merriweather',serif;font-weight:700;font-size:20px;color:white;margin-bottom:3px;">Puzzle</p>
|
||||||
|
<p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:12px;color:rgba(255,255,255,0.7);">15.1hh · Skewbald cob mare · 16yo</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 2: Tier picker -->
|
||||||
|
<div id="sp-tier" style="display:none;background:#1e2e1a;padding:clamp(40px,6vw,72px) clamp(24px,6vw,72px);">
|
||||||
|
<div style="max-width:800px;margin:0 auto;">
|
||||||
|
<button onclick="spBack(2)" style="display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:rgba(246,241,232,0.5);padding:0;margin-bottom:28px;">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 8H3M7 4L3 8l4 4"/></svg>
|
||||||
|
Back
|
||||||
|
</button>
|
||||||
|
<p id="sp-tier-pony-name" style="font-family:'Merriweather',serif;font-weight:900;font-size:clamp(22px,2.5vw,32px);color:#F6F1E8;margin-bottom:8px;"></p>
|
||||||
|
<p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:15px;color:rgba(246,241,232,0.65);margin-bottom:32px;">Choose your sponsorship level.</p>
|
||||||
|
<div id="sp-tier-rows" style="display:flex;flex-direction:column;gap:10px;margin-bottom:28px;"></div>
|
||||||
|
<!-- Gift Aid -->
|
||||||
|
<div style="background:rgba(255,255,255,0.07);border-radius:7px;padding:18px 20px;margin-bottom:24px;">
|
||||||
|
<div onclick="spToggleGA()" style="display:flex;align-items:flex-start;gap:14px;cursor:pointer;">
|
||||||
|
<span id="sp-ga-check" style="flex-shrink:0;margin-top:2px;width:20px;height:20px;border-radius:5px;border:2px solid rgba(246,241,232,0.3);background:transparent;display:flex;align-items:center;justify-content:center;transition:all 0.15s ease;">
|
||||||
|
<svg id="sp-ga-tick" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="opacity:0;transition:opacity 0.15s ease;"><path d="M2 6l3 3 5-5"/></svg>
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<p style="font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;color:#F6F1E8;margin-bottom:2px;">Boost your sponsorship with Gift Aid</p>
|
||||||
|
<p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:13px;color:rgba(246,241,232,0.55);line-height:1.5;">We can claim 25p for every £1 you give at no extra cost.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="sp-ga-fields" style="max-height:0;overflow:hidden;transition:max-height 0.3s ease,opacity 0.3s ease;opacity:0;">
|
||||||
|
<div style="margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px;">
|
||||||
|
<input placeholder="First name" style="padding:10px 14px;border:2px solid rgba(246,241,232,0.2);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;background:rgba(255,255,255,0.07);color:#F6F1E8;" />
|
||||||
|
<input placeholder="Last name" style="padding:10px 14px;border:2px solid rgba(246,241,232,0.2);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;background:rgba(255,255,255,0.07);color:#F6F1E8;" />
|
||||||
|
<input placeholder="Address" style="grid-column:1/-1;padding:10px 14px;border:2px solid rgba(246,241,232,0.2);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;background:rgba(255,255,255,0.07);color:#F6F1E8;" />
|
||||||
|
<input placeholder="Town / City" style="padding:10px 14px;border:2px solid rgba(246,241,232,0.2);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;background:rgba(255,255,255,0.07);color:#F6F1E8;" />
|
||||||
|
<input placeholder="Postcode" style="padding:10px 14px;border:2px solid rgba(246,241,232,0.2);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;background:rgba(255,255,255,0.07);color:#F6F1E8;" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button onclick="spProceedToPayment()"
|
||||||
|
style="width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:#7DA371;color:white;border:none;border-radius:9999px;padding:16px 28px;font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;transition:background 0.18s ease;"
|
||||||
|
onmouseover="this.style.background='#5a7d55'" onmouseout="this.style.background='#7DA371'">
|
||||||
|
Continue to payment
|
||||||
|
<svg width="14" height="14" 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 8h10M9 4l4 4-4 4"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 3: Payment -->
|
||||||
|
<div id="sp-pay" style="display:none;background:#1e2e1a;padding:clamp(40px,6vw,72px) clamp(24px,6vw,72px);">
|
||||||
|
<div style="max-width:1000px;margin:0 auto;display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap;">
|
||||||
|
<div style="flex:1 1 360px;min-width:0;background:#F6F1E8;border-radius:10px;padding:32px;">
|
||||||
|
<button onclick="spBack(3)" style="display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:rgba(0,0,0,0.5);padding:0;margin-bottom:22px;">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 8H3M7 4L3 8l4 4"/></svg>
|
||||||
|
Back
|
||||||
|
</button>
|
||||||
|
<p style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(0,0,0,0.4);margin-bottom:12px;">Express checkout</p>
|
||||||
|
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;">
|
||||||
|
<button style="padding:12px;border:2px solid rgba(0,0,0,0.12);border-radius:8px;background:black;color:white;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:800;font-size:12px;">Apple Pay</button>
|
||||||
|
<button style="padding:12px;border:2px solid rgba(0,0,0,0.12);border-radius:8px;background:white;color:black;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:800;font-size:12px;">G Pay</button>
|
||||||
|
<button style="padding:12px;border:2px solid rgba(0,0,0,0.12);border-radius:8px;background:white;color:#003087;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:800;font-size:12px;">PayPal</button>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;align-items:center;gap:12px;margin-bottom: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:12px;color:rgba(0,0,0,0.4);">Or pay with card</span>
|
||||||
|
<div style="flex:1;height:1px;background:rgba(0,0,0,0.12);"></div>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;flex-direction:column;gap:10px;margin-bottom:20px;">
|
||||||
|
<input type="email" placeholder="Email address" style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
|
||||||
|
<input placeholder="Card number" style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
|
||||||
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
|
||||||
|
<input placeholder="MM / YY" style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
|
||||||
|
<input placeholder="CVC" style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
|
||||||
|
</div>
|
||||||
|
<input placeholder="Name on card" style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
|
||||||
|
</div>
|
||||||
|
<div style="background:rgba(0,0,0,0.05);border-radius:7px;padding:12px 16px;margin-bottom:16px;">
|
||||||
|
<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;">Sponsorship is collected monthly via Direct Debit. You can cancel at any time.</p>
|
||||||
|
</div>
|
||||||
|
<button id="sp-pay-btn" onclick="spComplete()"
|
||||||
|
style="width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:#1e2e1a;color:#F6F1E8;border:none;border-radius:9999px;padding:16px 28px;font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;transition:background 0.18s ease;margin-bottom:14px;"
|
||||||
|
onmouseover="this.style.background='#2d4427'" onmouseout="this.style.background='#1e2e1a'">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="#F6F1E8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="5" width="12" height="9" rx="2"/><path d="M5 5V4a3 3 0 016 0v1"/></svg>
|
||||||
|
<span id="sp-pay-label">Sponsor Breagha — £5/mo</span>
|
||||||
|
</button>
|
||||||
|
<div style="display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;">
|
||||||
|
<span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;color:rgba(0,0,0,0.35);">Secured by Stripe</span>
|
||||||
|
<span style="color:rgba(0,0,0,0.2);">·</span>
|
||||||
|
<span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;color:rgba(0,0,0,0.35);">Cancel anytime</span>
|
||||||
|
<span style="color:rgba(0,0,0,0.2);">·</span>
|
||||||
|
<span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;color:rgba(0,0,0,0.35);">SC007357</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Summary sidebar -->
|
||||||
|
<div style="flex:0 0 260px;background:rgba(255,255,255,0.06);border-radius:10px;padding:28px 24px;">
|
||||||
|
<p style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(246,241,232,0.5);margin-bottom:16px;">Your sponsorship</p>
|
||||||
|
<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;">
|
||||||
|
<img id="sp-pay-pony-img" src="" alt="" style="width:52px;height:52px;object-fit:cover;border-radius:8px;flex-shrink:0;" />
|
||||||
|
<div>
|
||||||
|
<p id="sp-pay-pony-name" style="font-family:'Merriweather',serif;font-weight:700;font-size:18px;color:#F6F1E8;"></p>
|
||||||
|
<p id="sp-pay-pony-desc" style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:12px;color:rgba(246,241,232,0.55);"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="height:1px;background:rgba(255,255,255,0.1);margin-bottom:16px;"></div>
|
||||||
|
<p id="sp-pay-tier-name" style="font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;color:#F6F1E8;margin-bottom:4px;"></p>
|
||||||
|
<p id="sp-pay-tier-amount" style="font-family:'Merriweather',serif;font-weight:900;font-size:28px;color:#7DA371;margin-bottom:4px;"></p>
|
||||||
|
<p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:13px;color:rgba(246,241,232,0.5);">per month</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 4: Done -->
|
||||||
|
<div id="sp-done" style="display:none;background:#1e2e1a;padding:clamp(60px,8vw,100px) clamp(24px,6vw,72px);text-align:center;">
|
||||||
|
<div style="max-width:560px;margin:0 auto;">
|
||||||
|
<div style="width:64px;height:64px;background:#7DA371;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;">
|
||||||
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
|
||||||
|
</div>
|
||||||
|
<h2 style="font-family:'Merriweather',serif;font-weight:900;font-size:clamp(26px,3vw,38px);color:#F6F1E8;margin-bottom:14px;">Thank you.</h2>
|
||||||
|
<p id="sp-done-msg" style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:17px;color:rgba(246,241,232,0.7);line-height:1.7;margin-bottom:32px;"></p>
|
||||||
|
<button onclick="spReset()" style="display:inline-flex;align-items:center;gap:10px;background:#7DA371;color:white;border:none;border-radius:9999px;padding:14px 28px;font-family:'Public Sans',sans-serif;font-weight:800;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;">
|
||||||
|
Back to support page
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ── VOLUNTEERING ── -->
|
<!-- ── VOLUNTEERING ── -->
|
||||||
|
|
@ -472,11 +781,341 @@ const faqs = [
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
// ── Nav scroll ────────────────────────────────────────────
|
||||||
const nav = document.getElementById("site-nav");
|
const nav = document.getElementById("site-nav");
|
||||||
if (nav) {
|
if (nav) {
|
||||||
window.addEventListener("scroll", () => {
|
window.addEventListener("scroll", () => {
|
||||||
nav.classList.toggle("scrolled", window.scrollY > 40);
|
nav.classList.toggle("scrolled", window.scrollY > 40);
|
||||||
}, { passive: true });
|
}, { passive: true });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ── Donate Widget (inline) ────────────────────────────────
|
||||||
|
const DW_PRESETS = {
|
||||||
|
oneoff: [
|
||||||
|
{ amount: 10, impact: 'Hay for a pony for two days' },
|
||||||
|
{ amount: 25, impact: "Funds one rider's session" },
|
||||||
|
{ amount: 50, impact: 'Covers a routine vet visit' },
|
||||||
|
{ amount: 100, impact: 'A full week of farriery' },
|
||||||
|
],
|
||||||
|
monthly: [
|
||||||
|
{ amount: 5, impact: 'A grooming kit each month' },
|
||||||
|
{ amount: 10, impact: 'Helps feed our ponies' },
|
||||||
|
{ amount: 20, impact: 'Funds a weekly session' },
|
||||||
|
{ amount: 35, impact: "A pony's regular farriery" },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
let _dw_open = false, _dw_mode = 'oneoff', _dw_amount = 25, _dw_other = '', _dw_ga = false;
|
||||||
|
let _dw_gaFields = {};
|
||||||
|
|
||||||
|
function dwGetAmt() {
|
||||||
|
return _dw_other ? (Number(_dw_other) || 0) : _dw_amount;
|
||||||
|
}
|
||||||
|
|
||||||
|
function dwRenderChips() {
|
||||||
|
const grid = document.getElementById('dw-chips-grid');
|
||||||
|
if (!grid) return;
|
||||||
|
const presets = DW_PRESETS[_dw_mode];
|
||||||
|
grid.innerHTML = presets.map(p => {
|
||||||
|
const sel = p.amount === _dw_amount && !_dw_other;
|
||||||
|
return `<button onclick="dwSelectChip(${p.amount})"
|
||||||
|
style="padding:16px;border:2px solid ${sel ? '#000' : 'rgba(0,0,0,0.14)'};
|
||||||
|
border-radius:8px;background:${sel ? '#000' : 'white'};color:${sel ? 'white' : '#000'};
|
||||||
|
cursor:pointer;text-align:left;transition:all 0.15s ease;">
|
||||||
|
<p style="font-family:'Merriweather',serif;font-weight:900;font-size:22px;line-height:1;margin-bottom:4px;">£${p.amount}</p>
|
||||||
|
<p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:12px;line-height:1.4;opacity:${sel ? '0.7' : '0.55'};">${p.impact}</p>
|
||||||
|
</button>`;
|
||||||
|
}).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function dwUpdateSummary() {
|
||||||
|
const amt = dwGetAmt();
|
||||||
|
const ga = _dw_ga ? Math.round(amt * 0.25 * 100) / 100 : 0;
|
||||||
|
|
||||||
|
const chipAmt = document.getElementById('dw-chip-amount');
|
||||||
|
const chipFreq = document.getElementById('dw-chip-freq');
|
||||||
|
const chipGA = document.getElementById('dw-chip-ga');
|
||||||
|
const chipLbl = document.getElementById('dw-chip-label');
|
||||||
|
if (chipAmt) chipAmt.textContent = `£${Number.isFinite(amt) ? amt : 0}`;
|
||||||
|
if (chipFreq) chipFreq.style.display = _dw_mode === 'monthly' ? 'inline' : 'none';
|
||||||
|
if (chipGA) { chipGA.style.display = (_dw_ga && amt > 0) ? 'inline' : 'none'; chipGA.textContent = `+ £${ga.toFixed(2)} Gift Aid`; }
|
||||||
|
if (chipLbl) chipLbl.textContent = _dw_mode === 'monthly' ? 'Your monthly gift' : 'Your gift';
|
||||||
|
|
||||||
|
const payLabel = document.getElementById('dw-pay-label');
|
||||||
|
if (payLabel) {
|
||||||
|
const total = amt + ga;
|
||||||
|
payLabel.textContent = `Donate £${Number.isFinite(total) ? total : 0}${_dw_mode === 'monthly' ? '/mo' : ''}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const rail = document.getElementById('dw-rail');
|
||||||
|
if (rail) rail.style.display = (window.innerWidth >= 768) ? 'block' : 'none';
|
||||||
|
const railAmt = document.getElementById('dw-rail-amount');
|
||||||
|
const railFreq = document.getElementById('dw-rail-freq');
|
||||||
|
if (railAmt) railAmt.textContent = `£${Number.isFinite(amt) ? amt : 0}`;
|
||||||
|
if (railFreq) railFreq.textContent = _dw_mode === 'monthly' ? 'per month' : 'one-off gift';
|
||||||
|
|
||||||
|
const presets = DW_PRESETS[_dw_mode];
|
||||||
|
const match = presets.find(p => p.amount === (_dw_other ? null : _dw_amount));
|
||||||
|
const impactTxt = document.getElementById('dw-rail-impact-text');
|
||||||
|
const impactBlk = document.getElementById('dw-rail-impact');
|
||||||
|
if (impactTxt && impactBlk) {
|
||||||
|
if (match) { impactBlk.style.display = 'block'; impactTxt.textContent = match.impact; }
|
||||||
|
else { impactBlk.style.display = 'none'; }
|
||||||
|
}
|
||||||
|
|
||||||
|
const railGA = document.getElementById('dw-rail-ga');
|
||||||
|
if (railGA) {
|
||||||
|
railGA.style.display = (_dw_ga && amt > 0) ? 'block' : 'none';
|
||||||
|
if (_dw_ga && amt > 0) {
|
||||||
|
const b = document.getElementById('dw-rail-ga-base');
|
||||||
|
const e = document.getElementById('dw-rail-ga-extra');
|
||||||
|
const t = document.getElementById('dw-rail-ga-total');
|
||||||
|
if (b) b.textContent = `£${amt}`;
|
||||||
|
if (e) e.textContent = `+£${ga.toFixed(2)}`;
|
||||||
|
if (t) t.textContent = `£${(amt + ga).toFixed(2)}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function dwOpen() {
|
||||||
|
if (_dw_open) return;
|
||||||
|
_dw_open = true;
|
||||||
|
_dw_mode = 'oneoff'; _dw_amount = 25; _dw_other = ''; _dw_ga = false;
|
||||||
|
|
||||||
|
const btn = document.getElementById('dw-toggle-btn');
|
||||||
|
if (btn) {
|
||||||
|
btn.innerHTML = 'Close <svg width="12" height="12" 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 3l10 10M13 3L3 13"/></svg>';
|
||||||
|
btn.onclick = dwClose;
|
||||||
|
}
|
||||||
|
|
||||||
|
dwShowStep('amount');
|
||||||
|
dwRenderChips();
|
||||||
|
dwUpdateSummary();
|
||||||
|
|
||||||
|
const panel = document.getElementById('dw-panel');
|
||||||
|
if (panel) {
|
||||||
|
panel.style.display = 'block';
|
||||||
|
requestAnimationFrame(() => requestAnimationFrame(() => {
|
||||||
|
panel.style.opacity = '1';
|
||||||
|
panel.style.transform = 'translateY(0)';
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
if (window.innerWidth >= 768) {
|
||||||
|
const r = document.getElementById('dw-rail');
|
||||||
|
if (r) r.style.display = 'block';
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
document.getElementById('donate')?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
|
|
||||||
|
function dwClose() {
|
||||||
|
_dw_open = false;
|
||||||
|
const panel = document.getElementById('dw-panel');
|
||||||
|
if (panel) {
|
||||||
|
panel.style.opacity = '0';
|
||||||
|
panel.style.transform = 'translateY(-8px)';
|
||||||
|
setTimeout(() => { panel.style.display = 'none'; }, 300);
|
||||||
|
}
|
||||||
|
const btn = document.getElementById('dw-toggle-btn');
|
||||||
|
if (btn) {
|
||||||
|
btn.innerHTML = 'Donate now <svg width="14" height="14" 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 8h10M9 4l4 4-4 4"/></svg>';
|
||||||
|
btn.style.background = '#000';
|
||||||
|
btn.onclick = dwOpen;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function dwShowStep(step) {
|
||||||
|
['amount','pay','done'].forEach(s => {
|
||||||
|
const el = document.getElementById(`dw-step-${s}`);
|
||||||
|
if (el) el.style.display = s === step ? 'block' : 'none';
|
||||||
|
});
|
||||||
|
const chip = document.getElementById('dw-chip');
|
||||||
|
if (chip) chip.style.display = step === 'done' ? 'none' : 'flex';
|
||||||
|
}
|
||||||
|
|
||||||
|
function dwSetMode(mode) {
|
||||||
|
_dw_mode = mode;
|
||||||
|
_dw_amount = mode === 'monthly' ? 10 : 25;
|
||||||
|
_dw_other = '';
|
||||||
|
const oo = document.getElementById('dw-tab-oneoff');
|
||||||
|
const mo = document.getElementById('dw-tab-monthly');
|
||||||
|
if (oo) { oo.style.background = mode === 'oneoff' ? '#000' : 'transparent'; oo.style.color = mode === 'oneoff' ? '#fff' : 'rgba(0,0,0,0.5)'; }
|
||||||
|
if (mo) { mo.style.background = mode === 'monthly' ? '#000' : 'transparent'; mo.style.color = mode === 'monthly' ? '#fff' : 'rgba(0,0,0,0.5)'; }
|
||||||
|
const inp = document.getElementById('dw-other-input');
|
||||||
|
if (inp) inp.value = '';
|
||||||
|
const otherMo = document.getElementById('dw-other-mo');
|
||||||
|
if (otherMo) otherMo.style.display = mode === 'monthly' ? 'inline' : 'none';
|
||||||
|
dwRenderChips();
|
||||||
|
dwUpdateSummary();
|
||||||
|
}
|
||||||
|
|
||||||
|
function dwSelectChip(amount) {
|
||||||
|
_dw_amount = amount; _dw_other = '';
|
||||||
|
const inp = document.getElementById('dw-other-input');
|
||||||
|
if (inp) inp.value = '';
|
||||||
|
dwRenderChips(); dwUpdateSummary();
|
||||||
|
}
|
||||||
|
|
||||||
|
function dwOnOther() {
|
||||||
|
const inp = document.getElementById('dw-other-input');
|
||||||
|
_dw_other = inp ? inp.value : '';
|
||||||
|
dwRenderChips(); dwUpdateSummary();
|
||||||
|
}
|
||||||
|
|
||||||
|
function dwToggleGA() {
|
||||||
|
_dw_ga = !_dw_ga;
|
||||||
|
const chk = document.getElementById('dw-ga-check');
|
||||||
|
const tck = document.getElementById('dw-ga-tick');
|
||||||
|
const fld = document.getElementById('dw-ga-fields');
|
||||||
|
if (chk) { chk.style.background = _dw_ga ? '#7DA371' : 'white'; chk.style.borderColor = _dw_ga ? '#7DA371' : 'rgba(0,0,0,0.25)'; }
|
||||||
|
if (tck) tck.style.opacity = _dw_ga ? '1' : '0';
|
||||||
|
if (fld) { fld.style.maxHeight = _dw_ga ? '320px' : '0'; fld.style.opacity = _dw_ga ? '1' : '0'; }
|
||||||
|
dwUpdateSummary();
|
||||||
|
}
|
||||||
|
|
||||||
|
function dwGaField(f, v) { _dw_gaFields[f] = v; }
|
||||||
|
|
||||||
|
function dwProceed() {
|
||||||
|
dwShowStep('pay');
|
||||||
|
const dd = document.getElementById('dw-dd-note');
|
||||||
|
if (dd) dd.style.display = _dw_mode === 'monthly' ? 'block' : 'none';
|
||||||
|
dwUpdateSummary();
|
||||||
|
}
|
||||||
|
|
||||||
|
function dwBack() { dwShowStep('amount'); dwRenderChips(); }
|
||||||
|
|
||||||
|
function dwComplete() {
|
||||||
|
dwShowStep('done');
|
||||||
|
const msg = document.getElementById('dw-done-msg');
|
||||||
|
const amt = dwGetAmt();
|
||||||
|
if (msg) {
|
||||||
|
msg.textContent = _dw_mode === 'monthly'
|
||||||
|
? `Your £${amt}/month regular gift means the world to us. You can cancel at any time.`
|
||||||
|
: `Your gift of £${amt} goes directly to our ponies and riders. Thank you so much.`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Sponsor Pony Widget ───────────────────────────────────
|
||||||
|
const SP_PONIES = {
|
||||||
|
breagha: { name: 'Breagha', img: '/Breagh-bc8e70e8-2880w.webp', desc: '13hh · Skewbald cob mare · 19yo' },
|
||||||
|
harley: { name: 'Harley', img: '/Harley-6ece9eca-2880w.webp', desc: '15.3hh · Skewbald cob · 17yo' },
|
||||||
|
connolly: { name: 'Connolly', img: '/connolly-73f3e69f-2880w-2.webp', desc: '15.1hh · Piebald cob gelding · 18yo' },
|
||||||
|
puzzle: { name: 'Puzzle', img: '/puzzle-5de6e325-2880w.webp', desc: '15.1hh · Skewbald cob mare · 16yo' },
|
||||||
|
};
|
||||||
|
const SP_TIERS = [
|
||||||
|
{ id: 'companion', label: 'Companion', amount: 5, perks: 'Monthly update + name on our sponsor board' },
|
||||||
|
{ id: 'partner', label: 'Partner', amount: 15, perks: 'All above + annual photo of your pony' },
|
||||||
|
{ id: 'guardian', label: 'Guardian', amount: 25, perks: 'All above + visit invitation each year' },
|
||||||
|
{ id: 'patron', label: 'Patron', amount: 40, perks: 'All above + personal thank-you from the team' },
|
||||||
|
];
|
||||||
|
|
||||||
|
let _sp_pony = null, _sp_tier = null, _sp_ga = false;
|
||||||
|
|
||||||
|
function spShowStep(step) {
|
||||||
|
['idle','picker','tier','pay','done'].forEach(s => {
|
||||||
|
const el = document.getElementById(`sp-${s}`);
|
||||||
|
if (!el) return;
|
||||||
|
if (s === step) {
|
||||||
|
el.style.display = s === 'idle' ? 'flex' : 'block';
|
||||||
|
} else {
|
||||||
|
el.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function spStart() {
|
||||||
|
spShowStep('picker');
|
||||||
|
document.getElementById('sponsor')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||||
|
}
|
||||||
|
|
||||||
|
function spSelectPony(ponyId) {
|
||||||
|
_sp_pony = ponyId; _sp_tier = null; _sp_ga = false;
|
||||||
|
const nameEl = document.getElementById('sp-tier-pony-name');
|
||||||
|
if (nameEl) nameEl.textContent = `Sponsor ${SP_PONIES[ponyId].name}`;
|
||||||
|
spRenderTiers();
|
||||||
|
spShowStep('tier');
|
||||||
|
document.getElementById('sponsor')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||||
|
}
|
||||||
|
|
||||||
|
function spRenderTiers() {
|
||||||
|
const container = document.getElementById('sp-tier-rows');
|
||||||
|
if (!container) return;
|
||||||
|
container.innerHTML = SP_TIERS.map(t => {
|
||||||
|
const sel = t.id === _sp_tier;
|
||||||
|
return `<button onclick="spSelectTier('${t.id}')"
|
||||||
|
style="display:flex;align-items:center;justify-content:space-between;gap:16px;
|
||||||
|
padding:18px 20px;border-radius:8px;cursor:pointer;text-align:left;width:100%;
|
||||||
|
border:2px solid ${sel ? '#7DA371' : 'rgba(255,255,255,0.15)'};
|
||||||
|
background:${sel ? 'rgba(125,163,113,0.2)' : 'rgba(255,255,255,0.06)'};
|
||||||
|
transition:all 0.15s ease;">
|
||||||
|
<div>
|
||||||
|
<p style="font-family:'Public Sans',sans-serif;font-weight:800;font-size:15px;color:#F6F1E8;margin-bottom:3px;">${t.label}</p>
|
||||||
|
<p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:13px;color:rgba(246,241,232,0.55);line-height:1.4;">${t.perks}</p>
|
||||||
|
</div>
|
||||||
|
<div style="text-align:right;flex-shrink:0;">
|
||||||
|
<p style="font-family:'Merriweather',serif;font-weight:900;font-size:22px;color:#7DA371;line-height:1;">£${t.amount}</p>
|
||||||
|
<p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:12px;color:rgba(246,241,232,0.45);">/ month</p>
|
||||||
|
</div>
|
||||||
|
</button>`;
|
||||||
|
}).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function spSelectTier(tierId) { _sp_tier = tierId; spRenderTiers(); }
|
||||||
|
|
||||||
|
function spToggleGA() {
|
||||||
|
_sp_ga = !_sp_ga;
|
||||||
|
const chk = document.getElementById('sp-ga-check');
|
||||||
|
const tck = document.getElementById('sp-ga-tick');
|
||||||
|
const fld = document.getElementById('sp-ga-fields');
|
||||||
|
if (chk) { chk.style.background = _sp_ga ? '#7DA371' : 'transparent'; chk.style.borderColor = _sp_ga ? '#7DA371' : 'rgba(246,241,232,0.3)'; }
|
||||||
|
if (tck) tck.style.opacity = _sp_ga ? '1' : '0';
|
||||||
|
if (fld) { fld.style.maxHeight = _sp_ga ? '320px' : '0'; fld.style.opacity = _sp_ga ? '1' : '0'; }
|
||||||
|
}
|
||||||
|
|
||||||
|
function spProceedToPayment() {
|
||||||
|
if (!_sp_tier) {
|
||||||
|
const rows = document.getElementById('sp-tier-rows');
|
||||||
|
if (rows) { rows.style.outline = '2px solid #f5d445'; rows.style.borderRadius = '8px'; setTimeout(() => { rows.style.outline = 'none'; }, 1400); }
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const pony = SP_PONIES[_sp_pony];
|
||||||
|
const tier = SP_TIERS.find(t => t.id === _sp_tier);
|
||||||
|
|
||||||
|
const img = document.getElementById('sp-pay-pony-img');
|
||||||
|
const nm = document.getElementById('sp-pay-pony-name');
|
||||||
|
const dsc = document.getElementById('sp-pay-pony-desc');
|
||||||
|
const tnm = document.getElementById('sp-pay-tier-name');
|
||||||
|
const tamt = document.getElementById('sp-pay-tier-amount');
|
||||||
|
const lbl = document.getElementById('sp-pay-label');
|
||||||
|
|
||||||
|
if (img) { img.src = pony.img; img.alt = pony.name; }
|
||||||
|
if (nm) nm.textContent = pony.name;
|
||||||
|
if (dsc) dsc.textContent = pony.desc;
|
||||||
|
if (tnm) tnm.textContent = tier.label;
|
||||||
|
if (tamt) tamt.textContent = `£${tier.amount}`;
|
||||||
|
if (lbl) lbl.textContent = `Sponsor ${pony.name} — £${tier.amount}/mo`;
|
||||||
|
|
||||||
|
spShowStep('pay');
|
||||||
|
document.getElementById('sponsor')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||||
|
}
|
||||||
|
|
||||||
|
function spComplete() {
|
||||||
|
const pony = SP_PONIES[_sp_pony];
|
||||||
|
const tier = SP_TIERS.find(t => t.id === _sp_tier);
|
||||||
|
const msg = document.getElementById('sp-done-msg');
|
||||||
|
if (msg) msg.textContent = `You are now a ${tier.label} sponsor of ${pony.name}. Your £${tier.amount}/month will help cover their care costs. A confirmation has been sent to your email.`;
|
||||||
|
spShowStep('done');
|
||||||
|
document.getElementById('sponsor')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||||
|
}
|
||||||
|
|
||||||
|
function spBack(fromStep) {
|
||||||
|
if (fromStep === 1) spShowStep('idle');
|
||||||
|
else if (fromStep === 2) spShowStep('picker');
|
||||||
|
else if (fromStep === 3) spShowStep('tier');
|
||||||
|
document.getElementById('sponsor')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||||
|
}
|
||||||
|
|
||||||
|
function spReset() { _sp_pony = null; _sp_tier = null; _sp_ga = false; spShowStep('idle'); }
|
||||||
</script>
|
</script>
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue