Skip to content

Commit 9efa041

Browse files
SCodeGitSCodeGit
authored
Update donate.html
1 parent eb51d7b commit 9efa041

File tree

1 file changed

+10
-107
lines changed

1 file changed

+10
-107
lines changed

‎donate.html‎

Lines changed: 10 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<body>
5-
<!-- Fixed header: use on all pages -->
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Donate — Pacesetters Foundation</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
11+
<!-- Header -->
612
<header class="site-header">
713
<div class="container header-row">
814
<a href="index.html" class="brand">
@@ -18,114 +24,11 @@
1824
<nav class="nav">
1925
<a href="index.html">Home</a>
2026
<a href="stakeholders.html">Stakeholders</a>
21-
<a href="donate.html">Donate</a>
27+
<a href="donate.html" class="btn small">Donate</a>
2228
<a href="gallery.html">Gallery</a>
2329
<a href="contact.html">Contact</a>
2430
</nav>
2531
</div>
2632
</header>
2733

28-
<!-- Main content goes here: unique per page -->
29-
<main>
30-
<!-- Put page-specific content here -->
31-
</main>
32-
</body>
33-
34-
<meta charset="utf-8" />
35-
<meta name="viewport" content="width=device-width,initial-scale=1" />
36-
<title>Donate — Pacesetters Foundation</title>
37-
<link rel="stylesheet" href="style.css">
38-
</head>
39-
<body>
40-
<header class="site-header">
41-
<div class="container header-row">
42-
<div class="brand"><div class="logo">PF</div><div><h1 class="org-name">Pacesetters Foundation</h1></div></div>
43-
<nav class="nav"><a href="index.html">Home</a><a href="donate.html" class="btn small">Donate</a><a href="contact.html">Contact</a></nav>
44-
<button class="nav-toggle">☰</button>
45-
</div>
46-
</header>
47-
48-
<main class="container section">
49-
<h2>Support Our Work</h2>
50-
<p class="lead">Choose a convenient method to give — Bank transfer, Mobile Money (MTN, Vodafone, etc.) or Card payments.</p>
51-
52-
<div class="donate-tabs">
53-
<button class="tab-btn active" data-tab="bank">Bank Transfer</button>
54-
<button class="tab-btn" data-tab="momo">Mobile Money (MoMo)</button>
55-
<button class="tab-btn" data-tab="card">Card / Online</button>
56-
</div>
57-
58-
<div class="tab-content" id="bank">
59-
<div class="card">
60-
<h4>Bank Details</h4>
61-
<p><strong>Bank:</strong> GCB Bank Ghana</p>
62-
<p><strong>Account Name:</strong> Pacesetters Foundation</p>
63-
<p><strong>Account Number:</strong> 1234567890</p>
64-
<p><strong>Branch:</strong> Accra Main</p>
65-
<p>Use your name as reference and email proof of payment to <a href="mailto:[email protected]">[email protected]</a></p>
66-
</div>
67-
</div>
68-
69-
<div class="tab-content hidden" id="momo">
70-
<div class="card">
71-
<h4>Mobile Money</h4>
72-
<p>Select your network to see the number to send to:</p>
73-
<select id="momoNetwork">
74-
<option value="">-- Select Network --</option>
75-
<option value="MTN">MTN Mobile Money</option>
76-
<option value="Vodafone">Vodafone Cash</option>
77-
<option value="AirtelTigo">AirtelTigo Money</option>
78-
</select>
79-
80-
<div id="momoDetails" style="margin-top:12px">
81-
<!-- Will be populated by JS -->
82-
<p class="muted">Pick a network to see the number and instructions.</p>
83-
</div>
84-
</div>
85-
</div>
86-
87-
<div class="tab-content hidden" id="card">
88-
<div class="card">
89-
<h4>Card / Online Payment</h4>
90-
<p>Use our secure online checkout to donate by Visa, Mastercard or mobile card.</p>
91-
<!-- EDIT: Replace the href with your Paystack/Flutterwave checkout URL -->
92-
<a id="payBtn" class="btn primary" href="#" target="_blank" rel="noopener">Donate Online (Paystack/Flutterwave)</a>
93-
</div>
94-
</div>
95-
</main>
96-
97-
<footer class="footer"><div class="container footer-grid"><div><strong>Pacesetters Foundation</strong></div><div><small class="muted">© 2025</small></div></div></footer>
98-
99-
<button id="topBtn" title="Back to top">↑</button>
100-
<script src="script.js"></script>
101-
102-
<script>
103-
// Simple tab logic (also in script.js but keep local to ensure immediate functionality)
104-
const tabBtns = document.querySelectorAll('.tab-btn');
105-
const tabContents = document.querySelectorAll('.tab-content');
106-
tabBtns.forEach(btn => btn.addEventListener('click', () => {
107-
tabBtns.forEach(b => b.classList.remove('active'));
108-
btn.classList.add('active');
109-
const tab = btn.dataset.tab;
110-
tabContents.forEach(c => c.id === tab ? c.classList.remove('hidden') : c.classList.add('hidden'));
111-
}));
112-
113-
// MoMo networks data
114-
const momoData = {
115-
"MTN": {number:"+233 24 000 0001", name:"Pacesetters Foundation (MTN MoMo)"},
116-
"Vodafone": {number:"+233 20 000 0002", name:"Pacesetters Foundation (Vodafone Cash)"},
117-
"AirtelTigo": {number:"+233 24 000 0003", name:"Pacesetters Foundation (AirtelTigo Money)"}
118-
};
119-
120-
const momoNetwork = document.getElementById('momoNetwork');
121-
const momoDetails = document.getElementById('momoDetails');
122-
momoNetwork.addEventListener('change', () => {
123-
const v = momoNetwork.value;
124-
if (!v) { momoDetails.innerHTML = '<p class="muted">Pick a network to see the number and instructions.</p>'; return; }
125-
const data = momoData[v];
126-
momoDetails.innerHTML = `<p><strong>${data.name}</strong></p><p>Number: <strong>${data.number}</strong></p><p>Send your donation and SMS proof to <a href="mailto:[email protected]">[email protected]</a> or upload proof via our contact page.</p>`;
127-
});
128-
</script>
129-
</body>
130-
</html>
131-
34+
<!-- Main content

0 commit comments

Comments
 (0)