easc-cli 1.1.30 → 1.1.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/charity-website/admin/index.html +299 -0
- package/charity-website/public/index.html +265 -0
- package/charity-website/src/css/admin.css +710 -0
- package/charity-website/src/css/style.css +741 -0
- package/charity-website/src/js/app.js +444 -0
- package/package.json +1 -1
- package/src/cli/cmd/tui/routes/session/index.tsx +12 -12
|
@@ -0,0 +1,299 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Admin Dashboard - CharityHub</title>
|
|
7
|
+
<link rel="stylesheet" href="../src/css/admin.css" />
|
|
8
|
+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div class="admin-container">
|
|
12
|
+
<!-- Sidebar -->
|
|
13
|
+
<aside class="sidebar">
|
|
14
|
+
<div class="sidebar-header">
|
|
15
|
+
<i class="fas fa-heart"></i>
|
|
16
|
+
<span>CharityHub Admin</span>
|
|
17
|
+
</div>
|
|
18
|
+
<nav class="sidebar-nav">
|
|
19
|
+
<ul>
|
|
20
|
+
<li>
|
|
21
|
+
<a href="#dashboard" class="nav-link active" data-section="dashboard"
|
|
22
|
+
><i class="fas fa-tachometer-alt"></i> Dashboard</a
|
|
23
|
+
>
|
|
24
|
+
</li>
|
|
25
|
+
<li>
|
|
26
|
+
<a href="#charities" class="nav-link" data-section="charities"
|
|
27
|
+
><i class="fas fa-building"></i> Charities</a
|
|
28
|
+
>
|
|
29
|
+
</li>
|
|
30
|
+
<li>
|
|
31
|
+
<a href="#donations" class="nav-link" data-section="donations"
|
|
32
|
+
><i class="fas fa-hand-holding-usd"></i> Donations</a
|
|
33
|
+
>
|
|
34
|
+
</li>
|
|
35
|
+
<li>
|
|
36
|
+
<a href="#categories" class="nav-link" data-section="categories"
|
|
37
|
+
><i class="fas fa-tags"></i> Categories</a
|
|
38
|
+
>
|
|
39
|
+
</li>
|
|
40
|
+
<li>
|
|
41
|
+
<a href="#settings" class="nav-link" data-section="settings"><i class="fas fa-cog"></i> Settings</a>
|
|
42
|
+
</li>
|
|
43
|
+
</ul>
|
|
44
|
+
</nav>
|
|
45
|
+
</aside>
|
|
46
|
+
|
|
47
|
+
<!-- Main Content -->
|
|
48
|
+
<main class="main-content">
|
|
49
|
+
<header class="content-header">
|
|
50
|
+
<h1 id="pageTitle">Dashboard</h1>
|
|
51
|
+
<div class="header-actions">
|
|
52
|
+
<button class="btn btn-primary" onclick="exportData()"><i class="fas fa-download"></i> Export Data</button>
|
|
53
|
+
<button class="btn btn-secondary" onclick="refreshData()"><i class="fas fa-sync"></i> Refresh</button>
|
|
54
|
+
</div>
|
|
55
|
+
</header>
|
|
56
|
+
|
|
57
|
+
<!-- Dashboard Section -->
|
|
58
|
+
<section id="dashboard" class="content-section active">
|
|
59
|
+
<div class="stats-grid">
|
|
60
|
+
<div class="stat-card">
|
|
61
|
+
<div class="stat-icon">
|
|
62
|
+
<i class="fas fa-building"></i>
|
|
63
|
+
</div>
|
|
64
|
+
<div class="stat-info">
|
|
65
|
+
<h3 id="totalCharitiesStat">0</h3>
|
|
66
|
+
<p>Total Charities</p>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
<div class="stat-card">
|
|
70
|
+
<div class="stat-icon">
|
|
71
|
+
<i class="fas fa-hand-holding-usd"></i>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="stat-info">
|
|
74
|
+
<h3 id="totalDonationsStat">$0</h3>
|
|
75
|
+
<p>Total Donations</p>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="stat-card">
|
|
79
|
+
<div class="stat-icon">
|
|
80
|
+
<i class="fas fa-users"></i>
|
|
81
|
+
</div>
|
|
82
|
+
<div class="stat-info">
|
|
83
|
+
<h3 id="totalDonorsStat">0</h3>
|
|
84
|
+
<p>Total Donors</p>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="stat-card">
|
|
88
|
+
<div class="stat-icon">
|
|
89
|
+
<i class="fas fa-chart-line"></i>
|
|
90
|
+
</div>
|
|
91
|
+
<div class="stat-info">
|
|
92
|
+
<h3 id="avgDonationStat">$0</h3>
|
|
93
|
+
<p>Average Donation</p>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
|
|
98
|
+
<div class="dashboard-charts">
|
|
99
|
+
<div class="chart-container">
|
|
100
|
+
<h3>Recent Donations</h3>
|
|
101
|
+
<div class="chart-placeholder">
|
|
102
|
+
<canvas id="donationsChart"></canvas>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="chart-container">
|
|
106
|
+
<h3>Top Charities</h3>
|
|
107
|
+
<div class="top-charities" id="topCharities">
|
|
108
|
+
<!-- Will be populated dynamically -->
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<div class="recent-activity">
|
|
114
|
+
<h3>Recent Activity</h3>
|
|
115
|
+
<div class="activity-list" id="recentActivity">
|
|
116
|
+
<!-- Will be populated dynamically -->
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
</section>
|
|
120
|
+
|
|
121
|
+
<!-- Charities Section -->
|
|
122
|
+
<section id="charities" class="content-section">
|
|
123
|
+
<div class="section-actions">
|
|
124
|
+
<button class="btn btn-primary" onclick="openCharityModal()">
|
|
125
|
+
<i class="fas fa-plus"></i> Add Charity
|
|
126
|
+
</button>
|
|
127
|
+
</div>
|
|
128
|
+
<div class="table-container">
|
|
129
|
+
<table class="data-table" id="charitiesTable">
|
|
130
|
+
<thead>
|
|
131
|
+
<tr>
|
|
132
|
+
<th>Name</th>
|
|
133
|
+
<th>Category</th>
|
|
134
|
+
<th>Goal</th>
|
|
135
|
+
<th>Raised</th>
|
|
136
|
+
<th>Progress</th>
|
|
137
|
+
<th>Status</th>
|
|
138
|
+
<th>Actions</th>
|
|
139
|
+
</tr>
|
|
140
|
+
</thead>
|
|
141
|
+
<tbody>
|
|
142
|
+
<!-- Will be populated dynamically -->
|
|
143
|
+
</tbody>
|
|
144
|
+
</table>
|
|
145
|
+
</div>
|
|
146
|
+
</section>
|
|
147
|
+
|
|
148
|
+
<!-- Donations Section -->
|
|
149
|
+
<section id="donations" class="content-section">
|
|
150
|
+
<div class="filters">
|
|
151
|
+
<select id="donationStatusFilter" class="filter-select">
|
|
152
|
+
<option value="">All Status</option>
|
|
153
|
+
<option value="pending">Pending</option>
|
|
154
|
+
<option value="completed">Completed</option>
|
|
155
|
+
<option value="failed">Failed</option>
|
|
156
|
+
</select>
|
|
157
|
+
<input type="date" id="donationDateFilter" class="filter-input" />
|
|
158
|
+
</div>
|
|
159
|
+
<div class="table-container">
|
|
160
|
+
<table class="data-table" id="donationsTable">
|
|
161
|
+
<thead>
|
|
162
|
+
<tr>
|
|
163
|
+
<th>ID</th>
|
|
164
|
+
<th>Charity</th>
|
|
165
|
+
<th>Donor</th>
|
|
166
|
+
<th>Amount</th>
|
|
167
|
+
<th>Status</th>
|
|
168
|
+
<th>Date</th>
|
|
169
|
+
<th>Actions</th>
|
|
170
|
+
</tr>
|
|
171
|
+
</thead>
|
|
172
|
+
<tbody>
|
|
173
|
+
<!-- Will be populated dynamically -->
|
|
174
|
+
</tbody>
|
|
175
|
+
</table>
|
|
176
|
+
</div>
|
|
177
|
+
</section>
|
|
178
|
+
|
|
179
|
+
<!-- Categories Section -->
|
|
180
|
+
<section id="categories" class="content-section">
|
|
181
|
+
<div class="section-actions">
|
|
182
|
+
<button class="btn btn-primary" onclick="openCategoryModal()">
|
|
183
|
+
<i class="fas fa-plus"></i> Add Category
|
|
184
|
+
</button>
|
|
185
|
+
</div>
|
|
186
|
+
<div class="categories-grid" id="categoriesGrid">
|
|
187
|
+
<!-- Will be populated dynamically -->
|
|
188
|
+
</div>
|
|
189
|
+
</section>
|
|
190
|
+
|
|
191
|
+
<!-- Settings Section -->
|
|
192
|
+
<section id="settings" class="content-section">
|
|
193
|
+
<div class="settings-form">
|
|
194
|
+
<h3>General Settings</h3>
|
|
195
|
+
<form id="settingsForm">
|
|
196
|
+
<div class="form-group">
|
|
197
|
+
<label for="siteName">Site Name</label>
|
|
198
|
+
<input type="text" id="siteName" value="CharityHub" />
|
|
199
|
+
</div>
|
|
200
|
+
<div class="form-group">
|
|
201
|
+
<label for="siteEmail">Contact Email</label>
|
|
202
|
+
<input type="email" id="siteEmail" value="support@charityhub.org" />
|
|
203
|
+
</div>
|
|
204
|
+
<div class="form-group">
|
|
205
|
+
<label for="donationMinimum">Minimum Donation ($)</label>
|
|
206
|
+
<input type="number" id="donationMinimum" value="1" min="1" />
|
|
207
|
+
</div>
|
|
208
|
+
<div class="form-group">
|
|
209
|
+
<label>
|
|
210
|
+
<input type="checkbox" id="enableNotifications" checked />
|
|
211
|
+
Enable email notifications
|
|
212
|
+
</label>
|
|
213
|
+
</div>
|
|
214
|
+
<button type="submit" class="btn btn-primary">Save Settings</button>
|
|
215
|
+
</form>
|
|
216
|
+
</div>
|
|
217
|
+
</section>
|
|
218
|
+
</main>
|
|
219
|
+
</div>
|
|
220
|
+
|
|
221
|
+
<!-- Charity Modal -->
|
|
222
|
+
<div class="modal" id="charityModal">
|
|
223
|
+
<div class="modal-content">
|
|
224
|
+
<div class="modal-header">
|
|
225
|
+
<h3 id="charityModalTitle">Add Charity</h3>
|
|
226
|
+
<button class="modal-close" onclick="closeCharityModal()">
|
|
227
|
+
<i class="fas fa-times"></i>
|
|
228
|
+
</button>
|
|
229
|
+
</div>
|
|
230
|
+
<div class="modal-body">
|
|
231
|
+
<form id="charityForm">
|
|
232
|
+
<div class="form-group">
|
|
233
|
+
<label for="charityName">Name *</label>
|
|
234
|
+
<input type="text" id="charityName" required />
|
|
235
|
+
</div>
|
|
236
|
+
<div class="form-group">
|
|
237
|
+
<label for="charityDescription">Description *</label>
|
|
238
|
+
<textarea id="charityDescription" rows="3" required></textarea>
|
|
239
|
+
</div>
|
|
240
|
+
<div class="form-group">
|
|
241
|
+
<label for="charityCategory">Category *</label>
|
|
242
|
+
<select id="charityCategory" required>
|
|
243
|
+
<option value="">Select Category</option>
|
|
244
|
+
</select>
|
|
245
|
+
</div>
|
|
246
|
+
<div class="form-group">
|
|
247
|
+
<label for="charityGoal">Goal Amount ($) *</label>
|
|
248
|
+
<input type="number" id="charityGoal" min="1" step="0.01" required />
|
|
249
|
+
</div>
|
|
250
|
+
<div class="form-group">
|
|
251
|
+
<label for="charityImage">Image URL</label>
|
|
252
|
+
<input type="url" id="charityImage" />
|
|
253
|
+
</div>
|
|
254
|
+
<div class="form-group">
|
|
255
|
+
<label for="charityWebsite">Website URL</label>
|
|
256
|
+
<input type="url" id="charityWebsite" />
|
|
257
|
+
</div>
|
|
258
|
+
<div class="form-group">
|
|
259
|
+
<label>
|
|
260
|
+
<input type="checkbox" id="charityActive" checked />
|
|
261
|
+
Active
|
|
262
|
+
</label>
|
|
263
|
+
</div>
|
|
264
|
+
<button type="submit" class="btn btn-primary">Save Charity</button>
|
|
265
|
+
</form>
|
|
266
|
+
</div>
|
|
267
|
+
</div>
|
|
268
|
+
</div>
|
|
269
|
+
|
|
270
|
+
<!-- Category Modal -->
|
|
271
|
+
<div class="modal" id="categoryModal">
|
|
272
|
+
<div class="modal-content">
|
|
273
|
+
<div class="modal-header">
|
|
274
|
+
<h3 id="categoryModalTitle">Add Category</h3>
|
|
275
|
+
<button class="modal-close" onclick="closeCategoryModal()">
|
|
276
|
+
<i class="fas fa-times"></i>
|
|
277
|
+
</button>
|
|
278
|
+
</div>
|
|
279
|
+
<div class="modal-body">
|
|
280
|
+
<form id="categoryForm">
|
|
281
|
+
<div class="form-group">
|
|
282
|
+
<label for="categoryName">Name *</label>
|
|
283
|
+
<input type="text" id="categoryName" required />
|
|
284
|
+
</div>
|
|
285
|
+
<div class="form-group">
|
|
286
|
+
<label for="categoryDescription">Description</label>
|
|
287
|
+
<textarea id="categoryDescription" rows="3"></textarea>
|
|
288
|
+
</div>
|
|
289
|
+
<button type="submit" class="btn btn-primary">Save Category</button>
|
|
290
|
+
</form>
|
|
291
|
+
</div>
|
|
292
|
+
</div>
|
|
293
|
+
</div>
|
|
294
|
+
|
|
295
|
+
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
|
|
296
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
297
|
+
<script src="../src/js/admin.js"></script>
|
|
298
|
+
</body>
|
|
299
|
+
</html>
|
|
@@ -0,0 +1,265 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>CharityHub - Make a Difference Today</title>
|
|
7
|
+
<link rel="stylesheet" href="src/css/style.css" />
|
|
8
|
+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<header class="header">
|
|
12
|
+
<nav class="nav">
|
|
13
|
+
<div class="nav-brand">
|
|
14
|
+
<i class="fas fa-heart"></i>
|
|
15
|
+
<span>CharityHub</span>
|
|
16
|
+
</div>
|
|
17
|
+
<ul class="nav-menu">
|
|
18
|
+
<li><a href="#home" class="nav-link">Home</a></li>
|
|
19
|
+
<li><a href="#charities" class="nav-link">Charities</a></li>
|
|
20
|
+
<li><a href="#about" class="nav-link">About</a></li>
|
|
21
|
+
<li><a href="#contact" class="nav-link">Contact</a></li>
|
|
22
|
+
</ul>
|
|
23
|
+
<button class="nav-toggle" id="navToggle">
|
|
24
|
+
<i class="fas fa-bars"></i>
|
|
25
|
+
</button>
|
|
26
|
+
</nav>
|
|
27
|
+
</header>
|
|
28
|
+
|
|
29
|
+
<main>
|
|
30
|
+
<section id="home" class="hero">
|
|
31
|
+
<div class="hero-content">
|
|
32
|
+
<h1 class="hero-title">Make a Difference Today</h1>
|
|
33
|
+
<p class="hero-subtitle">Support trusted charities and help create positive change in the world</p>
|
|
34
|
+
<div class="hero-stats">
|
|
35
|
+
<div class="stat">
|
|
36
|
+
<span class="stat-number" id="totalCharities">0</span>
|
|
37
|
+
<span class="stat-label">Charities</span>
|
|
38
|
+
</div>
|
|
39
|
+
<div class="stat">
|
|
40
|
+
<span class="stat-number" id="totalRaised">$0</span>
|
|
41
|
+
<span class="stat-label">Raised</span>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="stat">
|
|
44
|
+
<span class="stat-number" id="totalDonors">0</span>
|
|
45
|
+
<span class="stat-label">Donors</span>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
<button class="btn btn-primary" onclick="scrollToCharities()">Explore Charities</button>
|
|
49
|
+
</div>
|
|
50
|
+
</section>
|
|
51
|
+
|
|
52
|
+
<section id="charities" class="charities">
|
|
53
|
+
<div class="container">
|
|
54
|
+
<div class="section-header">
|
|
55
|
+
<h2 class="section-title">Featured Charities</h2>
|
|
56
|
+
<p class="section-subtitle">Support causes that matter to you</p>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<div class="filters">
|
|
60
|
+
<div class="filter-group">
|
|
61
|
+
<label for="categoryFilter">Category:</label>
|
|
62
|
+
<select id="categoryFilter" class="filter-select">
|
|
63
|
+
<option value="">All Categories</option>
|
|
64
|
+
</select>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="filter-group">
|
|
67
|
+
<label for="sortFilter">Sort by:</label>
|
|
68
|
+
<select id="sortFilter" class="filter-select">
|
|
69
|
+
<option value="name">Name</option>
|
|
70
|
+
<option value="goal">Goal Amount</option>
|
|
71
|
+
<option value="progress">Progress</option>
|
|
72
|
+
</select>
|
|
73
|
+
</div>
|
|
74
|
+
<div class="search-group">
|
|
75
|
+
<input type="text" id="searchInput" placeholder="Search charities..." class="search-input" />
|
|
76
|
+
<button class="search-btn" onclick="searchCharities()">
|
|
77
|
+
<i class="fas fa-search"></i>
|
|
78
|
+
</button>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<div class="charities-grid" id="charitiesGrid">
|
|
83
|
+
<!-- Charity cards will be dynamically inserted here -->
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<div class="load-more-container">
|
|
87
|
+
<button class="btn btn-secondary" id="loadMoreBtn" onclick="loadMoreCharities()">Load More</button>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
</section>
|
|
91
|
+
|
|
92
|
+
<section id="about" class="about">
|
|
93
|
+
<div class="container">
|
|
94
|
+
<div class="section-header">
|
|
95
|
+
<h2 class="section-title">About CharityHub</h2>
|
|
96
|
+
<p class="section-subtitle">Connecting generous donors with trusted charities</p>
|
|
97
|
+
</div>
|
|
98
|
+
<div class="about-content">
|
|
99
|
+
<div class="about-text">
|
|
100
|
+
<p>
|
|
101
|
+
CharityHub is a platform dedicated to making charitable giving simple, transparent, and impactful. We
|
|
102
|
+
partner with verified charities across various causes to ensure your donations make a real difference.
|
|
103
|
+
</p>
|
|
104
|
+
<div class="features">
|
|
105
|
+
<div class="feature">
|
|
106
|
+
<i class="fas fa-shield-alt"></i>
|
|
107
|
+
<h3>Verified Charities</h3>
|
|
108
|
+
<p>All charities are thoroughly vetted and verified</p>
|
|
109
|
+
</div>
|
|
110
|
+
<div class="feature">
|
|
111
|
+
<i class="fas fa-chart-line"></i>
|
|
112
|
+
<h3>Transparent Impact</h3>
|
|
113
|
+
<p>Track how your donations are making a difference</p>
|
|
114
|
+
</div>
|
|
115
|
+
<div class="feature">
|
|
116
|
+
<i class="fas fa-lock"></i>
|
|
117
|
+
<h3>Secure Payments</h3>
|
|
118
|
+
<p>Your transactions are safe and protected</p>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
</section>
|
|
125
|
+
|
|
126
|
+
<section id="contact" class="contact">
|
|
127
|
+
<div class="container">
|
|
128
|
+
<div class="section-header">
|
|
129
|
+
<h2 class="section-title">Get in Touch</h2>
|
|
130
|
+
<p class="section-subtitle">Have questions? We're here to help</p>
|
|
131
|
+
</div>
|
|
132
|
+
<div class="contact-content">
|
|
133
|
+
<div class="contact-info">
|
|
134
|
+
<div class="contact-item">
|
|
135
|
+
<i class="fas fa-envelope"></i>
|
|
136
|
+
<div>
|
|
137
|
+
<h3>Email</h3>
|
|
138
|
+
<p>support@charityhub.org</p>
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
141
|
+
<div class="contact-item">
|
|
142
|
+
<i class="fas fa-phone"></i>
|
|
143
|
+
<div>
|
|
144
|
+
<h3>Phone</h3>
|
|
145
|
+
<p>1-800-CHARITY</p>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
<div class="contact-item">
|
|
149
|
+
<i class="fas fa-map-marker-alt"></i>
|
|
150
|
+
<div>
|
|
151
|
+
<h3>Address</h3>
|
|
152
|
+
<p>123 Hope Street, Charity City, CC 12345</p>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
<form class="contact-form" id="contactForm">
|
|
157
|
+
<div class="form-group">
|
|
158
|
+
<input type="text" id="contactName" placeholder="Your Name" required />
|
|
159
|
+
</div>
|
|
160
|
+
<div class="form-group">
|
|
161
|
+
<input type="email" id="contactEmail" placeholder="Your Email" required />
|
|
162
|
+
</div>
|
|
163
|
+
<div class="form-group">
|
|
164
|
+
<textarea id="contactMessage" placeholder="Your Message" rows="5" required></textarea>
|
|
165
|
+
</div>
|
|
166
|
+
<button type="submit" class="btn btn-primary">Send Message</button>
|
|
167
|
+
</form>
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
</section>
|
|
171
|
+
</main>
|
|
172
|
+
|
|
173
|
+
<footer class="footer">
|
|
174
|
+
<div class="container">
|
|
175
|
+
<div class="footer-content">
|
|
176
|
+
<div class="footer-brand">
|
|
177
|
+
<i class="fas fa-heart"></i>
|
|
178
|
+
<span>CharityHub</span>
|
|
179
|
+
<p>Making the world a better place, one donation at a time.</p>
|
|
180
|
+
</div>
|
|
181
|
+
<div class="footer-links">
|
|
182
|
+
<div class="footer-section">
|
|
183
|
+
<h4>Quick Links</h4>
|
|
184
|
+
<ul>
|
|
185
|
+
<li><a href="#home">Home</a></li>
|
|
186
|
+
<li><a href="#charities">Charities</a></li>
|
|
187
|
+
<li><a href="#about">About</a></li>
|
|
188
|
+
<li><a href="#contact">Contact</a></li>
|
|
189
|
+
</ul>
|
|
190
|
+
</div>
|
|
191
|
+
<div class="footer-section">
|
|
192
|
+
<h4>Categories</h4>
|
|
193
|
+
<ul id="footerCategories">
|
|
194
|
+
<!-- Categories will be dynamically inserted -->
|
|
195
|
+
</ul>
|
|
196
|
+
</div>
|
|
197
|
+
<div class="footer-section">
|
|
198
|
+
<h4>Follow Us</h4>
|
|
199
|
+
<div class="social-links">
|
|
200
|
+
<a href="#" class="social-link"><i class="fab fa-facebook"></i></a>
|
|
201
|
+
<a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
|
|
202
|
+
<a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
|
|
203
|
+
<a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
</div>
|
|
208
|
+
<div class="footer-bottom">
|
|
209
|
+
<p>© 2024 CharityHub. All rights reserved.</p>
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
</footer>
|
|
213
|
+
|
|
214
|
+
<!-- Donation Modal -->
|
|
215
|
+
<div class="modal" id="donationModal">
|
|
216
|
+
<div class="modal-content">
|
|
217
|
+
<div class="modal-header">
|
|
218
|
+
<h3>Make a Donation</h3>
|
|
219
|
+
<button class="modal-close" onclick="closeDonationModal()">
|
|
220
|
+
<i class="fas fa-times"></i>
|
|
221
|
+
</button>
|
|
222
|
+
</div>
|
|
223
|
+
<div class="modal-body">
|
|
224
|
+
<div class="charity-info" id="modalCharityInfo">
|
|
225
|
+
<!-- Charity info will be dynamically inserted -->
|
|
226
|
+
</div>
|
|
227
|
+
<form id="donationForm">
|
|
228
|
+
<div class="form-group">
|
|
229
|
+
<label for="donorName">Your Name</label>
|
|
230
|
+
<input type="text" id="donorName" required />
|
|
231
|
+
</div>
|
|
232
|
+
<div class="form-group">
|
|
233
|
+
<label for="donorEmail">Your Email</label>
|
|
234
|
+
<input type="email" id="donorEmail" required />
|
|
235
|
+
</div>
|
|
236
|
+
<div class="form-group">
|
|
237
|
+
<label for="donationAmount">Donation Amount ($)</label>
|
|
238
|
+
<div class="amount-options">
|
|
239
|
+
<button type="button" class="amount-btn" data-amount="10">$10</button>
|
|
240
|
+
<button type="button" class="amount-btn" data-amount="25">$25</button>
|
|
241
|
+
<button type="button" class="amount-btn" data-amount="50">$50</button>
|
|
242
|
+
<button type="button" class="amount-btn" data-amount="100">$100</button>
|
|
243
|
+
<input type="number" id="donationAmount" placeholder="Other" min="1" step="0.01" />
|
|
244
|
+
</div>
|
|
245
|
+
</div>
|
|
246
|
+
<div class="form-group">
|
|
247
|
+
<label for="donationMessage">Message (Optional)</label>
|
|
248
|
+
<textarea id="donationMessage" placeholder="Leave a message of support..."></textarea>
|
|
249
|
+
</div>
|
|
250
|
+
<div class="form-group checkbox-group">
|
|
251
|
+
<label>
|
|
252
|
+
<input type="checkbox" id="anonymousDonation" />
|
|
253
|
+
<span>Make this donation anonymous</span>
|
|
254
|
+
</label>
|
|
255
|
+
</div>
|
|
256
|
+
<button type="submit" class="btn btn-primary btn-full">Donate Now</button>
|
|
257
|
+
</form>
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
</div>
|
|
261
|
+
|
|
262
|
+
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
|
|
263
|
+
<script src="src/js/app.js"></script>
|
|
264
|
+
</body>
|
|
265
|
+
</html>
|