Hugging Face's logo

Spaces:
hsnaruto
/
donation
Running

App Files Community
hsnaruto commited on
Commit
cd07086
·
verified ·
1 Parent(s): bb43723

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +663 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Donation
3
- emoji: 👁
4
- colorFrom: purple
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: donation
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,663 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Support Our Cause | Donate Today</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .donation-option {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .donation-option:hover {
14
+ transform: translateY(-3px);
15
+ }
16
+ .donation-option.selected {
17
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
18
+ }
19
+ .progress-bar {
20
+ height: 6px;
21
+ transition: width 0.5s ease;
22
+ }
23
+ .input-highlight {
24
+ transition: all 0.3s ease;
25
+ }
26
+ .input-highlight:focus-within {
27
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
28
+ }
29
+ .floating-label {
30
+ transition: all 0.2s ease;
31
+ transform-origin: left center;
32
+ }
33
+ .input-field:focus + .floating-label,
34
+ .input-field:not(:placeholder-shown) + .floating-label {
35
+ transform: translateY(-24px) scale(0.85);
36
+ color: #3b82f6;
37
+ }
38
+ .toast {
39
+ position: fixed;
40
+ top: 20px;
41
+ right: 20px;
42
+ padding: 15px 25px;
43
+ border-radius: 8px;
44
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
45
+ z-index: 1000;
46
+ transform: translateX(200%);
47
+ transition: transform 0.3s ease;
48
+ }
49
+ .toast.show {
50
+ transform: translateX(0);
51
+ }
52
+ .toast.success {
53
+ background-color: #48bb78;
54
+ color: white;
55
+ }
56
+ .toast.error {
57
+ background-color: #f56565;
58
+ color: white;
59
+ }
60
+ </style>
61
+ </head>
62
+ <body class="bg-gray-50 min-h-screen">
63
+ <!-- Toast Notification -->
64
+ <div id="toast" class="toast hidden"></div>
65
+
66
+ <div class="max-w-4xl mx-auto px-4 py-12">
67
+ <!-- Progress indicator -->
68
+ <div class="mb-8">
69
+ <div class="flex justify-between items-center mb-2">
70
+ <span class="text-sm font-medium text-gray-700">Donation Progress</span>
71
+ <span class="text-sm font-medium text-gray-700">65% to goal</span>
72
+ </div>
73
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
74
+ <div class="progress-bar bg-blue-600 rounded-full" style="width: 65%"></div>
75
+ </div>
76
+ </div>
77
+
78
+ <!-- Header -->
79
+ <div class="text-center mb-10">
80
+ <h1 class="text-4xl font-bold text-gray-900 mb-3">Make a Difference Today</h1>
81
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Your gift changes lives. Every donation helps us provide food, shelter, and education to those in need.</p>
82
+ </div>
83
+
84
+ <div class="flex flex-col lg:flex-row gap-8">
85
+ <!-- Donation Form -->
86
+ <div class="lg:w-2/3">
87
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
88
+ <!-- Donation Amount -->
89
+ <div class="mb-8">
90
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Select Donation Amount</h2>
91
+ <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-4">
92
+ <button class="donation-option bg-white border border-gray-300 rounded-lg py-4 px-2 text-center font-medium hover:bg-gray-50" data-amount="10">
93
+ $10
94
+ </button>
95
+ <button class="donation-option bg-white border border-gray-300 rounded-lg py-4 px-2 text-center font-medium hover:bg-gray-50" data-amount="25">
96
+ $25
97
+ </button>
98
+ <button class="donation-option bg-blue-50 border-2 border-blue-500 rounded-lg py-4 px-2 text-center font-medium text-blue-700 selected" data-amount="50">
99
+ $50
100
+ </button>
101
+ <button class="donation-option bg-white border border-gray-300 rounded-lg py-4 px-2 text-center font-medium hover:bg-gray-50" data-amount="100">
102
+ $100
103
+ </button>
104
+ </div>
105
+ <div class="input-highlight relative border border-gray-300 rounded-lg p-1">
106
+ <input type="number" id="customAmount" placeholder=" " class="input-field w-full py-3 px-4 rounded-lg focus:outline-none">
107
+ <label for="customAmount" class="floating-label absolute left-4 top-3 text-gray-500 pointer-events-none">Custom Amount ($)</label>
108
+ <div class="absolute right-3 top-3 text-gray-500">USD</div>
109
+ </div>
110
+ </div>
111
+
112
+ <!-- Donation Frequency -->
113
+ <div class="mb-8">
114
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Donation Frequency</h2>
115
+ <div class="grid grid-cols-2 gap-3">
116
+ <button id="oneTimeBtn" class="bg-blue-600 text-white py-3 px-4 rounded-lg font-medium">One-Time</button>
117
+ <button id="recurringBtn" class="bg-white border border-gray-300 text-gray-700 py-3 px-4 rounded-lg font-medium hover:bg-gray-50">Monthly</button>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Payment Information -->
122
+ <div class="mb-8">
123
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Payment Information</h2>
124
+ <div class="space-y-4">
125
+ <div class="input-highlight relative border border-gray-300 rounded-lg p-1">
126
+ <input type="text" id="cardName" placeholder=" " class="input-field w-full py-3 px-4 rounded-lg focus:outline-none">
127
+ <label for="cardName" class="floating-label absolute left-4 top-3 text-gray-500 pointer-events-none">Name on Card</label>
128
+ </div>
129
+ <div class="input-highlight relative border border-gray-300 rounded-lg p-1">
130
+ <input type="text" id="cardNumber" placeholder=" " class="input-field w-full py-3 px-4 rounded-lg focus:outline-none" maxlength="19">
131
+ <label for="cardNumber" class="floating-label absolute left-4 top-3 text-gray-500 pointer-events-none">Card Number</label>
132
+ <div class="absolute right-3 top-3 text-gray-500">
133
+ <i class="fab fa-cc-visa"></i>
134
+ <i class="fab fa-cc-mastercard ml-1"></i>
135
+ <i class="fab fa-cc-amex ml-1"></i>
136
+ </div>
137
+ </div>
138
+ <div class="grid grid-cols-2 gap-4">
139
+ <div class="input-highlight relative border border-gray-300 rounded-lg p-1">
140
+ <input type="text" id="cardExpiry" placeholder=" " class="input-field w-full py-3 px-4 rounded-lg focus:outline-none" maxlength="5">
141
+ <label for="cardExpiry" class="floating-label absolute left-4 top-3 text-gray-500 pointer-events-none">MM/YY</label>
142
+ </div>
143
+ <div class="input-highlight relative border border-gray-300 rounded-lg p-1">
144
+ <input type="text" id="cardCvv" placeholder=" " class="input-field w-full py-3 px-4 rounded-lg focus:outline-none" maxlength="4">
145
+ <label for="cardCvv" class="floating-label absolute left-4 top-3 text-gray-500 pointer-events-none">CVV</label>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <!-- Donor Information -->
152
+ <div class="mb-8">
153
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Your Information</h2>
154
+ <div class="space-y-4">
155
+ <div class="input-highlight relative border border-gray-300 rounded-lg p-1">
156
+ <input type="text" id="fullName" placeholder=" " class="input-field w-full py-3 px-4 rounded-lg focus:outline-none">
157
+ <label for="fullName" class="floating-label absolute left-4 top-3 text-gray-500 pointer-events-none">Full Name</label>
158
+ </div>
159
+ <div class="input-highlight relative border border-gray-300 rounded-lg p-1">
160
+ <input type="email" id="email" placeholder=" " class="input-field w-full py-3 px-4 rounded-lg focus:outline-none">
161
+ <label for="email" class="floating-label absolute left-4 top-3 text-gray-500 pointer-events-none">Email Address</label>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Extras -->
167
+ <div class="mb-8">
168
+ <div class="flex items-start mb-4">
169
+ <div class="flex items-center h-5">
170
+ <input id="dedication" type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
171
+ </div>
172
+ <label for="dedication" class="ml-3 text-sm text-gray-700">Dedicate this donation (add a message)</label>
173
+ </div>
174
+ <div id="dedicationMessageContainer" class="hidden mt-2">
175
+ <textarea id="dedicationMessage" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Your dedication message..."></textarea>
176
+ </div>
177
+ <div class="flex items-start">
178
+ <div class="flex items-center h-5">
179
+ <input id="newsletter" type="checkbox" checked class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
180
+ </div>
181
+ <label for="newsletter" class="ml-3 text-sm text-gray-700">Receive updates about our work (you can unsubscribe anytime)</label>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Security and Submit -->
186
+ <div class="border-t pt-6">
187
+ <div class="flex flex-col sm:flex-row justify-between items-center gap-4 mb-6">
188
+ <div class="flex items-center space-x-2">
189
+ <i class="fas fa-lock text-green-600"></i>
190
+ <span class="text-sm text-gray-600">Secure payment processing</span>
191
+ </div>
192
+ <div class="flex space-x-4">
193
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/MasterCard_Logo.svg/2560px-MasterCard_Logo.svg.png" class="h-6" alt="Mastercard">
194
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Visa_Inc._logo.svg/2560px-Visa_Inc._logo.svg.png" class="h-6" alt="Visa">
195
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/PayPal_logo.svg/2560px-PayPal_logo.svg.png" class="h-6" alt="PayPal">
196
+ </div>
197
+ </div>
198
+ <button id="donateBtn" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-4 px-6 rounded-lg text-lg transition duration-200 transform hover:scale-105">
199
+ Donate Now <i class="fas fa-heart ml-2"></i>
200
+ </button>
201
+ <p class="text-xs text-gray-500 mt-3 text-center">Your donation is tax-deductible as allowed by law. <a href="#" class="text-blue-600 hover:underline">Privacy Policy</a></p>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <!-- Sidebar -->
207
+ <div class="lg:w-1/3">
208
+ <div class="bg-white rounded-xl shadow-md overflow-hidden sticky top-6">
209
+ <div class="bg-blue-600 text-white p-4">
210
+ <h3 class="font-bold text-lg">Your Donation Summary</h3>
211
+ </div>
212
+ <div class="p-6">
213
+ <div class="flex justify-between items-center mb-4">
214
+ <span class="text-gray-600">Amount:</span>
215
+ <span id="summaryAmount" class="font-bold text-gray-900">$50.00</span>
216
+ </div>
217
+ <div class="flex justify-between items-center mb-4">
218
+ <span class="text-gray-600">Frequency:</span>
219
+ <span id="summaryFrequency" class="font-bold text-gray-900">One-Time</span>
220
+ </div>
221
+ <div class="border-t border-gray-200 my-4"></div>
222
+ <div class="flex justify-between items-center mb-2">
223
+ <span class="text-gray-600">Total:</span>
224
+ <span id="summaryTotal" class="font-bold text-xl text-gray-900">$50.00</span>
225
+ </div>
226
+ <p class="text-sm text-gray-500 mt-4">Thank you for your generosity! Your support makes a real difference.</p>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Impact Section -->
231
+ <div class="mt-6 bg-white rounded-xl shadow-md overflow-hidden">
232
+ <div class="bg-green-600 text-white p-4">
233
+ <h3 class="font-bold text-lg">Your Impact</h3>
234
+ </div>
235
+ <div class="p-6">
236
+ <div class="flex items-start mb-4">
237
+ <div class="bg-green-100 p-3 rounded-full mr-4">
238
+ <i class="fas fa-utensils text-green-600"></i>
239
+ </div>
240
+ <div>
241
+ <h4 class="font-medium text-gray-900">Provide meals</h4>
242
+ <p class="text-sm text-gray-600">$50 provides 25 meals for hungry families</p>
243
+ </div>
244
+ </div>
245
+ <div class="flex items-start mb-4">
246
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
247
+ <i class="fas fa-book text-blue-600"></i>
248
+ </div>
249
+ <div>
250
+ <h4 class="font-medium text-gray-900">Support education</h4>
251
+ <p class="text-sm text-gray-600">$100 provides school supplies for 5 children</p>
252
+ </div>
253
+ </div>
254
+ <div class="flex items-start">
255
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
256
+ <i class="fas fa-home text-purple-600"></i>
257
+ </div>
258
+ <div>
259
+ <h4 class="font-medium text-gray-900">Safe shelter</h4>
260
+ <p class="text-sm text-gray-600">$200 provides a week of safe housing</p>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+
266
+ <!-- Social Sharing -->
267
+ <div class="mt-6 bg-white rounded-xl shadow-md overflow-hidden">
268
+ <div class="p-4">
269
+ <h3 class="font-bold text-lg text-gray-900 mb-3">Spread the Word</h3>
270
+ <div class="flex justify-center space-x-4">
271
+ <button class="bg-blue-500 text-white p-3 rounded-full hover:bg-blue-600">
272
+ <i class="fab fa-facebook-f"></i>
273
+ </button>
274
+ <button class="bg-blue-400 text-white p-3 rounded-full hover:bg-blue-500">
275
+ <i class="fab fa-twitter"></i>
276
+ </button>
277
+ <button class="bg-pink-600 text-white p-3 rounded-full hover:bg-pink-700">
278
+ <i class="fab fa-instagram"></i>
279
+ </button>
280
+ <button class="bg-green-500 text-white p-3 rounded-full hover:bg-green-600">
281
+ <i class="fab fa-whatsapp"></i>
282
+ </button>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <!-- Backend Simulation -->
291
+ <script>
292
+ // Database simulation
293
+ const database = {
294
+ donations: [],
295
+ donors: []
296
+ };
297
+
298
+ // Toast notification function
299
+ function showToast(message, type = 'success') {
300
+ const toast = document.getElementById('toast');
301
+ toast.textContent = message;
302
+ toast.className = `toast ${type} show`;
303
+
304
+ setTimeout(() => {
305
+ toast.classList.remove('show');
306
+ }, 3000);
307
+ }
308
+
309
+ document.addEventListener('DOMContentLoaded', function() {
310
+ // Default values
311
+ let donationAmount = 50;
312
+ let isRecurring = false;
313
+
314
+ // DOM Elements
315
+ const donationOptions = document.querySelectorAll('.donation-option');
316
+ const customAmountInput = document.getElementById('customAmount');
317
+ const oneTimeBtn = document.getElementById('oneTimeBtn');
318
+ const recurringBtn = document.getElementById('recurringBtn');
319
+ const donateBtn = document.getElementById('donateBtn');
320
+ const summaryAmount = document.getElementById('summaryAmount');
321
+ const summaryFrequency = document.getElementById('summaryFrequency');
322
+ const summaryTotal = document.getElementById('summaryTotal');
323
+ const dedicationCheckbox = document.getElementById('dedication');
324
+ const dedicationMessageContainer = document.getElementById('dedicationMessageContainer');
325
+
326
+ // Toggle dedication message field
327
+ dedicationCheckbox.addEventListener('change', function() {
328
+ if (this.checked) {
329
+ dedicationMessageContainer.classList.remove('hidden');
330
+ } else {
331
+ dedicationMessageContainer.classList.add('hidden');
332
+ }
333
+ });
334
+
335
+ // Format card number
336
+ const cardNumberInput = document.getElementById('cardNumber');
337
+ cardNumberInput.addEventListener('input', function(e) {
338
+ let value = e.target.value.replace(/\s+/g, '');
339
+ if (value.length > 0) {
340
+ value = value.match(new RegExp('.{1,4}', 'g')).join(' ');
341
+ }
342
+ e.target.value = value;
343
+ });
344
+
345
+ // Format expiry date
346
+ const cardExpiryInput = document.getElementById('cardExpiry');
347
+ cardExpiryInput.addEventListener('input', function(e) {
348
+ let value = e.target.value;
349
+ if (value.length === 2 && !value.includes('/')) {
350
+ e.target.value = value + '/';
351
+ }
352
+ });
353
+
354
+ // Select donation amount
355
+ donationOptions.forEach(option => {
356
+ option.addEventListener('click', function() {
357
+ // Remove selected class from all options
358
+ donationOptions.forEach(opt => {
359
+ opt.classList.remove('bg-blue-50', 'border-blue-500', 'text-blue-700', 'selected');
360
+ opt.classList.add('bg-white', 'border-gray-300');
361
+ });
362
+
363
+ // Add selected class to clicked option
364
+ this.classList.remove('bg-white', 'border-gray-300');
365
+ this.classList.add('bg-blue-50', 'border-blue-500', 'text-blue-700', 'selected');
366
+
367
+ // Update donation amount
368
+ donationAmount = parseFloat(this.dataset.amount);
369
+ updateSummary();
370
+
371
+ // Clear custom amount if any
372
+ customAmountInput.value = '';
373
+ });
374
+ });
375
+
376
+ // Handle custom amount input
377
+ customAmountInput.addEventListener('input', function() {
378
+ if (this.value) {
379
+ // Remove selected class from all preset options
380
+ donationOptions.forEach(opt => {
381
+ opt.classList.remove('bg-blue-50', 'border-blue-500', 'text-blue-700', 'selected');
382
+ opt.classList.add('bg-white', 'border-gray-300');
383
+ });
384
+
385
+ // Update donation amount
386
+ donationAmount = parseFloat(this.value) || 0;
387
+ updateSummary();
388
+ }
389
+ });
390
+
391
+ // Toggle donation frequency
392
+ oneTimeBtn.addEventListener('click', function() {
393
+ isRecurring = false;
394
+ oneTimeBtn.classList.remove('bg-white', 'border-gray-300', 'text-gray-700');
395
+ oneTimeBtn.classList.add('bg-blue-600', 'text-white');
396
+ recurringBtn.classList.remove('bg-blue-600', 'text-white');
397
+ recurringBtn.classList.add('bg-white', 'border-gray-300', 'text-gray-700');
398
+ updateSummary();
399
+ });
400
+
401
+ recurringBtn.addEventListener('click', function() {
402
+ isRecurring = true;
403
+ recurringBtn.classList.remove('bg-white', 'border-gray-300', 'text-gray-700');
404
+ recurringBtn.classList.add('bg-blue-600', 'text-white');
405
+ oneTimeBtn.classList.remove('bg-blue-600', 'text-white');
406
+ oneTimeBtn.classList.add('bg-white', 'border-gray-300', 'text-gray-700');
407
+ updateSummary();
408
+ });
409
+
410
+ // Update summary section
411
+ function updateSummary() {
412
+ summaryAmount.textContent = `$${donationAmount.toFixed(2)}`;
413
+ summaryFrequency.textContent = isRecurring ? 'Monthly' : 'One-Time';
414
+ summaryTotal.textContent = `$${donationAmount.toFixed(2)}`;
415
+ }
416
+
417
+ // Validate form fields
418
+ function validateForm() {
419
+ const fullName = document.getElementById('fullName').value.trim();
420
+ const email = document.getElementById('email').value.trim();
421
+ const cardName = document.getElementById('cardName').value.trim();
422
+ const cardNumber = document.getElementById('cardNumber').value.trim();
423
+ const cardExpiry = document.getElementById('cardExpiry').value.trim();
424
+ const cardCvv = document.getElementById('cardCvv').value.trim();
425
+
426
+ if (donationAmount <= 0) {
427
+ showToast('Please select or enter a donation amount', 'error');
428
+ return false;
429
+ }
430
+
431
+ if (!fullName) {
432
+ showToast('Please enter your full name', 'error');
433
+ return false;
434
+ }
435
+
436
+ if (!email || !/^\S+@\S+\.\S+$/.test(email)) {
437
+ showToast('Please enter a valid email address', 'error');
438
+ return false;
439
+ }
440
+
441
+ if (!cardName) {
442
+ showToast('Please enter the name on card', 'error');
443
+ return false;
444
+ }
445
+
446
+ if (!cardNumber || cardNumber.replace(/\s/g, '').length < 16) {
447
+ showToast('Please enter a valid card number', 'error');
448
+ return false;
449
+ }
450
+
451
+ if (!cardExpiry || !/^\d{2}\/\d{2}$/.test(cardExpiry)) {
452
+ showToast('Please enter a valid expiry date (MM/YY)', 'error');
453
+ return false;
454
+ }
455
+
456
+ if (!cardCvv || cardCvv.length < 3) {
457
+ showToast('Please enter a valid CVV', 'error');
458
+ return false;
459
+ }
460
+
461
+ return true;
462
+ }
463
+
464
+ // Handle donation submission
465
+ donateBtn.addEventListener('click', function() {
466
+ if (!validateForm()) return;
467
+
468
+ // Collect form data
469
+ const donationData = {
470
+ amount: donationAmount,
471
+ frequency: isRecurring ? 'monthly' : 'one-time',
472
+ donor: {
473
+ name: document.getElementById('fullName').value.trim(),
474
+ email: document.getElementById('email').value.trim()
475
+ },
476
+ payment: {
477
+ cardName: document.getElementById('cardName').value.trim(),
478
+ cardLast4: document.getElementById('cardNumber').value.trim().slice(-4),
479
+ cardExpiry: document.getElementById('cardExpiry').value.trim()
480
+ },
481
+ dedication: dedicationCheckbox.checked ? document.getElementById('dedicationMessage').value.trim() : null,
482
+ subscribeToNewsletter: document.getElementById('newsletter').checked,
483
+ date: new Date().toISOString()
484
+ };
485
+
486
+ // Simulate API call to backend
487
+ setTimeout(() => {
488
+ // Store donation in "database"
489
+ database.donations.push(donationData);
490
+
491
+ // Check if donor exists
492
+ const existingDonor = database.donors.find(d => d.email === donationData.donor.email);
493
+ if (!existingDonor) {
494
+ database.donors.push({
495
+ name: donationData.donor.name,
496
+ email: donationData.donor.email,
497
+ totalDonated: donationData.amount,
498
+ donationsCount: 1,
499
+ isSubscribed: donationData.subscribeToNewsletter,
500
+ firstDonationDate: new Date().toISOString()
501
+ });
502
+ } else {
503
+ existingDonor.totalDonated += donationData.amount;
504
+ existingDonor.donationsCount += 1;
505
+ existingDonor.isSubscribed = donationData.subscribeToNewsletter;
506
+ }
507
+
508
+ // Show success message
509
+ showToast(`Thank you for your donation of $${donationAmount.toFixed(2)}!`, 'success');
510
+
511
+ // Reset form
512
+ resetForm();
513
+ }, 1000);
514
+ });
515
+
516
+ // Reset form after submission
517
+ function resetForm() {
518
+ donationOptions.forEach(opt => {
519
+ opt.classList.remove('bg-blue-50', 'border-blue-500', 'text-blue-700', 'selected');
520
+ opt.classList.add('bg-white', 'border-gray-300');
521
+ });
522
+ document.querySelector('[data-amount="50"]').classList.add('bg-blue-50', 'border-blue-500', 'text-blue-700', 'selected');
523
+
524
+ customAmountInput.value = '';
525
+ document.getElementById('fullName').value = '';
526
+ document.getElementById('email').value = '';
527
+ document.getElementById('cardName').value = '';
528
+ document.getElementById('cardNumber').value = '';
529
+ document.getElementById('cardExpiry').value = '';
530
+ document.getElementById('cardCvv').value = '';
531
+ dedicationCheckbox.checked = false;
532
+ document.getElementById('dedicationMessage').value = '';
533
+ dedicationMessageContainer.classList.add('hidden');
534
+ document.getElementById('newsletter').checked = true;
535
+
536
+ donationAmount = 50;
537
+ isRecurring = false;
538
+ oneTimeBtn.classList.remove('bg-white', 'border-gray-300', 'text-gray-700');
539
+ oneTimeBtn.classList.add('bg-blue-600', 'text-white');
540
+ recurringBtn.classList.remove('bg-blue-600', 'text-white');
541
+ recurringBtn.classList.add('bg-white', 'border-gray-300', 'text-gray-700');
542
+
543
+ updateSummary();
544
+ }
545
+ });
546
+ </script>
547
+
548
+ <!-- Backend Server Simulation (Node.js/Express style) -->
549
+ <script>
550
+ // This is a simulation of what the backend would look like in a real application
551
+ // In a real app, this would be in a separate Node.js server file
552
+
553
+ /*
554
+ // Real backend would look something like this:
555
+ const express = require('express');
556
+ const mongoose = require('mongoose');
557
+ const bodyParser = require('body-parser');
558
+ const cors = require('cors');
559
+
560
+ const app = express();
561
+ app.use(cors());
562
+ app.use(bodyParser.json());
563
+
564
+ // Connect to MongoDB
565
+ mongoose.connect('mongodb://localhost:27017/donations', {
566
+ useNewUrlParser: true,
567
+ useUnifiedTopology: true
568
+ });
569
+
570
+ // Define Donation schema
571
+ const donationSchema = new mongoose.Schema({
572
+ amount: Number,
573
+ frequency: String,
574
+ donor: {
575
+ name: String,
576
+ email: String
577
+ },
578
+ payment: {
579
+ cardName: String,
580
+ cardLast4: String,
581
+ cardExpiry: String
582
+ },
583
+ dedication: String,
584
+ subscribeToNewsletter: Boolean,
585
+ date: Date
586
+ });
587
+
588
+ const Donation = mongoose.model('Donation', donationSchema);
589
+
590
+ // Define Donor schema
591
+ const donorSchema = new mongoose.Schema({
592
+ name: String,
593
+ email: { type: String, unique: true },
594
+ totalDonated: Number,
595
+ donationsCount: Number,
596
+ isSubscribed: Boolean,
597
+ firstDonationDate: Date,
598
+ lastDonationDate: Date
599
+ });
600
+
601
+ const Donor = mongoose.model('Donor', donorSchema);
602
+
603
+ // Process donation endpoint
604
+ app.post('/api/donations', async (req, res) => {
605
+ try {
606
+ const donation = new Donation(req.body);
607
+ await donation.save();
608
+
609
+ // Update or create donor
610
+ let donor = await Donor.findOne({ email: req.body.donor.email });
611
+ if (!donor) {
612
+ donor = new Donor({
613
+ name: req.body.donor.name,
614
+ email: req.body.donor.email,
615
+ totalDonated: req.body.amount,
616
+ donationsCount: 1,
617
+ isSubscribed: req.body.subscribeToNewsletter,
618
+ firstDonationDate: new Date(),
619
+ lastDonationDate: new Date()
620
+ });
621
+ } else {
622
+ donor.totalDonated += req.body.amount;
623
+ donor.donationsCount += 1;
624
+ donor.isSubscribed = req.body.subscribeToNewsletter;
625
+ donor.lastDonationDate = new Date();
626
+ }
627
+ await donor.save();
628
+
629
+ res.status(201).json({ message: 'Donation processed successfully' });
630
+ } catch (error) {
631
+ res.status(500).json({ error: error.message });
632
+ }
633
+ });
634
+
635
+ // Get donations endpoint
636
+ app.get('/api/donations', async (req, res) => {
637
+ try {
638
+ const donations = await Donation.find().sort({ date: -1 });
639
+ res.json(donations);
640
+ } catch (error) {
641
+ res.status(500).json({ error: error.message });
642
+ }
643
+ });
644
+
645
+ // Get donors endpoint
646
+ app.get('/api/donors', async (req, res) => {
647
+ try {
648
+ const donors = await Donor.find().sort({ totalDonated: -1 });
649
+ res.json(donors);
650
+ } catch (error) {
651
+ res.status(500).json({ error: error.message });
652
+ }
653
+ });
654
+
655
+ // Start server
656
+ const PORT = process.env.PORT || 3000;
657
+ app.listen(PORT, () => {
658
+ console.log(`Server running on port ${PORT}`);
659
+ });
660
+ */
661
+ </script>
662
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=hsnaruto/donation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
663
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ add backend