Hugging Face's logo

Spaces:
zoob1
/
zenith
Running

App Files Community
zoob1 commited on
Commit
936e5d5
·
verified ·
1 Parent(s): c044089

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +735 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Zenith
3
- emoji: 🚀
4
- colorFrom: gray
5
- colorTo: indigo
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: zenith
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,735 @@
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>Zenith | Coin for a Cause</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%);
12
+ }
13
+ .card-hover:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .transaction-animation {
18
+ animation: slideIn 0.5s ease-out;
19
+ }
20
+ @keyframes slideIn {
21
+ from {
22
+ opacity: 0;
23
+ transform: translateX(20px);
24
+ }
25
+ to {
26
+ opacity: 1;
27
+ transform: translateX(0);
28
+ }
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="font-sans bg-gray-50">
33
+ <!-- Navigation -->
34
+ <nav class="bg-white shadow-sm fixed w-full z-10">
35
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
36
+ <div class="flex justify-between h-16">
37
+ <div class="flex items-center">
38
+ <div class="flex-shrink-0 flex items-center">
39
+ <i class="fas fa-coins text-blue-600 text-2xl mr-2"></i>
40
+ <span class="text-xl font-bold text-blue-600">Zenith</span>
41
+ </div>
42
+ </div>
43
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
44
+ <a href="#home" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
45
+ <a href="#how-it-works" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">How It Works</a>
46
+ <a href="#donate" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Donate</a>
47
+ <a href="#transparency" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Transparency</a>
48
+ </div>
49
+ <div class="-mr-2 flex items-center sm:hidden">
50
+ <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
51
+ <span class="sr-only">Open main menu</span>
52
+ <i class="fas fa-bars"></i>
53
+ </button>
54
+ </div>
55
+ </div>
56
+ </div>
57
+ <!-- Mobile menu -->
58
+ <div id="mobile-menu" class="hidden sm:hidden bg-white shadow-lg">
59
+ <div class="pt-2 pb-3 space-y-1">
60
+ <a href="#home" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
61
+ <a href="#how-it-works" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">How It Works</a>
62
+ <a href="#donate" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Donate</a>
63
+ <a href="#transparency" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Transparency</a>
64
+ </div>
65
+ </div>
66
+ </nav>
67
+
68
+ <!-- Hero Section -->
69
+ <section id="home" class="gradient-bg text-white pt-24 pb-16">
70
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
71
+ <div class="lg:grid lg:grid-cols-12 lg:gap-8">
72
+ <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
73
+ <h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl">
74
+ <span class="block">Zenith</span>
75
+ <span class="block text-blue-200">Coin for a Cause</span>
76
+ </h1>
77
+ <p class="mt-3 text-base text-blue-100 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
78
+ Every cryptocurrency transaction contributes to humanitarian causes worldwide through our innovative fee-sharing model.
79
+ </p>
80
+ <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
81
+ <a href="#donate" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-blue-700 bg-white hover:bg-blue-50 transition duration-150">
82
+ Simulate a Donation
83
+ <i class="fas fa-arrow-right ml-2"></i>
84
+ </a>
85
+ </div>
86
+ </div>
87
+ <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
88
+ <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
89
+ <div class="bg-white p-6 rounded-lg shadow-xl">
90
+ <div class="flex items-center justify-between mb-4">
91
+ <h3 class="text-lg font-medium text-gray-900">Recent Donation</h3>
92
+ <span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full">Completed</span>
93
+ </div>
94
+ <div class="flex items-center space-x-4">
95
+ <div class="flex-shrink-0 bg-blue-100 p-3 rounded-full">
96
+ <i class="fas fa-hand-holding-heart text-blue-600 text-xl"></i>
97
+ </div>
98
+ <div>
99
+ <p class="text-sm font-medium text-gray-900">0.0025 ETH</p>
100
+ <p class="text-sm text-gray-500">Medical supplies for Tyre</p>
101
+ </div>
102
+ </div>
103
+ <div class="mt-6 pt-6 border-t border-gray-200">
104
+ <div class="flex justify-between">
105
+ <span class="text-sm font-medium text-gray-500">Transaction ID</span>
106
+ <span class="text-sm text-gray-900">0x8a...3f7b</span>
107
+ </div>
108
+ <div class="flex justify-between mt-2">
109
+ <span class="text-sm font-medium text-gray-500">Date</span>
110
+ <span class="text-sm text-gray-900">Today, 10:42 AM</span>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </section>
119
+
120
+ <!-- Mission Section -->
121
+ <section class="py-12 bg-white">
122
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
123
+ <div class="lg:text-center">
124
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Our Mission</h2>
125
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
126
+ Supporting South Lebanon Through Crypto
127
+ </p>
128
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
129
+ We redirect a portion of cryptocurrency transaction fees to provide essential aid to communities in South Lebanon affected by economic crises.
130
+ </p>
131
+ </div>
132
+
133
+ <div class="mt-10">
134
+ <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
135
+ <div class="bg-gray-50 rounded-lg p-6 transition duration-300 ease-in-out card-hover">
136
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
137
+ <i class="fas fa-medkit text-xl"></i>
138
+ </div>
139
+ <div class="mt-5">
140
+ <h3 class="text-lg font-medium text-gray-900">Medical Supplies</h3>
141
+ <p class="mt-2 text-base text-gray-500">
142
+ Funding hospitals and clinics with essential medicines and equipment in Tyre and Sidon.
143
+ </p>
144
+ </div>
145
+ </div>
146
+
147
+ <div class="bg-gray-50 rounded-lg p-6 transition duration-300 ease-in-out card-hover">
148
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
149
+ <i class="fas fa-bread-slice text-xl"></i>
150
+ </div>
151
+ <div class="mt-5">
152
+ <h3 class="text-lg font-medium text-gray-900">Food Security</h3>
153
+ <p class="mt-2 text-base text-gray-500">
154
+ Providing food packages to families struggling with hyperinflation and shortages.
155
+ </p>
156
+ </div>
157
+ </div>
158
+
159
+ <div class="bg-gray-50 rounded-lg p-6 transition duration-300 ease-in-out card-hover">
160
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
161
+ <i class="fas fa-lightbulb text-xl"></i>
162
+ </div>
163
+ <div class="mt-5">
164
+ <h3 class="text-lg font-medium text-gray-900">Solar Energy</h3>
165
+ <p class="mt-2 text-base text-gray-500">
166
+ Installing solar panels to combat electricity shortages in remote villages.
167
+ </p>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </section>
174
+
175
+ <!-- How It Works Section -->
176
+ <section id="how-it-works" class="py-12 bg-gray-50">
177
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
178
+ <div class="lg:text-center">
179
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Process</h2>
180
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
181
+ How It Works
182
+ </p>
183
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
184
+ A simple three-step process to turn your crypto transactions into humanitarian aid.
185
+ </p>
186
+ </div>
187
+
188
+ <div class="mt-10">
189
+ <div class="relative">
190
+ <div class="hidden lg:block lg:absolute lg:inset-0 lg:h-48 lg:bg-gradient-to-r lg:from-blue-50 lg:to-transparent"></div>
191
+ <div class="relative space-y-12 lg:grid lg:grid-cols-3 lg:gap-8 lg:space-y-0">
192
+ <div class="group">
193
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
194
+ <span class="text-xl font-bold">1</span>
195
+ </div>
196
+ <div class="mt-5">
197
+ <h3 class="text-lg leading-6 font-medium text-gray-900 group-hover:text-blue-600 transition duration-150">
198
+ Trade Cryptocurrency
199
+ </h3>
200
+ <p class="mt-2 text-base text-gray-500">
201
+ Buy, sell or exchange cryptocurrency through our partnered exchanges or wallets.
202
+ </p>
203
+ </div>
204
+ </div>
205
+
206
+ <div class="group">
207
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
208
+ <span class="text-xl font-bold">2</span>
209
+ </div>
210
+ <div class="mt-5">
211
+ <h3 class="text-lg leading-6 font-medium text-gray-900 group-hover:text-blue-600 transition duration-150">
212
+ Fee Redirection
213
+ </h3>
214
+ <p class="mt-2 text-base text-gray-500">
215
+ A small percentage (0.1-0.5%) of your transaction fee is automatically redirected to our aid fund.
216
+ </p>
217
+ </div>
218
+ </div>
219
+
220
+ <div class="group">
221
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
222
+ <span class="text-xl font-bold">3</span>
223
+ </div>
224
+ <div class="mt-5">
225
+ <h3 class="text-lg leading-6 font-medium text-gray-900 group-hover:text-blue-600 transition duration-150">
226
+ Aid Distribution
227
+ </h3>
228
+ <p class="mt-2 text-base text-gray-500">
229
+ Funds are converted to stablecoins and distributed to verified NGOs in South Lebanon.
230
+ </p>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <div class="mt-20">
237
+ <div class="bg-white shadow overflow-hidden sm:rounded-lg">
238
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
239
+ <h3 class="text-lg leading-6 font-medium text-gray-900">
240
+ Frequently Asked Questions
241
+ </h3>
242
+ </div>
243
+ <div class="divide-y divide-gray-200">
244
+ <div class="px-4 py-5 sm:p-6">
245
+ <h4 class="text-md font-medium text-gray-900">Is this a real cryptocurrency platform?</h4>
246
+ <p class="mt-2 text-sm text-gray-500">
247
+ No, this is a student prototype demonstrating how cryptocurrency transaction fees could be used for humanitarian aid. No real blockchain transactions occur.
248
+ </p>
249
+ </div>
250
+ <div class="px-4 py-5 sm:p-6">
251
+ <h4 class="text-md font-medium text-gray-900">How are funds allocated in South Lebanon?</h4>
252
+ <p class="mt-2 text-sm text-gray-500">
253
+ In this simulation, funds would be distributed to verified NGOs focusing on medical aid, food security, and infrastructure support in the most affected areas.
254
+ </p>
255
+ </div>
256
+ <div class="px-4 py-5 sm:p-6">
257
+ <h4 class="text-md font-medium text-gray-900">Can I track where my donation goes?</h4>
258
+ <p class="mt-2 text-sm text-gray-500">
259
+ Yes, our transparency dashboard shows all simulated transactions and their allocations to specific aid programs.
260
+ </p>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </section>
268
+
269
+ <!-- Donation Simulation Section -->
270
+ <section id="donate" class="py-12 bg-white">
271
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
272
+ <div class="lg:text-center">
273
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Contribute</h2>
274
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
275
+ Simulate a Donation
276
+ </p>
277
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
278
+ Experience how crypto trading can support humanitarian causes.
279
+ </p>
280
+ </div>
281
+
282
+ <div class="mt-10 sm:mt-12">
283
+ <div class="bg-white shadow-lg rounded-lg overflow-hidden">
284
+ <div class="p-6 sm:p-8">
285
+ <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
286
+ <div>
287
+ <h3 class="text-lg font-medium text-gray-900">Trade Simulation</h3>
288
+ <p class="mt-1 text-sm text-gray-500">
289
+ Select a cryptocurrency and amount to see how fees would contribute to aid.
290
+ </p>
291
+
292
+ <div class="mt-6 space-y-4">
293
+ <div>
294
+ <label for="crypto" class="block text-sm font-medium text-gray-700">Cryptocurrency</label>
295
+ <select id="crypto" name="crypto" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
296
+ <option value="BTC">Bitcoin (BTC)</option>
297
+ <option value="ETH">Ethereum (ETH)</option>
298
+ <option value="USDT">Tether (USDT)</option>
299
+ <option value="SOL">Solana (SOL)</option>
300
+ </select>
301
+ </div>
302
+
303
+ <div>
304
+ <label for="amount" class="block text-sm font-medium text-gray-700">Amount</label>
305
+ <div class="mt-1 relative rounded-md shadow-sm">
306
+ <input type="number" name="amount" id="amount" class="focus:ring-blue-500 focus:border-blue-500 block w-full pl-3 pr-12 sm:text-sm border-gray-300 rounded-md" placeholder="0.00">
307
+ <div class="absolute inset-y-0 right-0 flex items-center">
308
+ <label for="currency" class="sr-only">Currency</label>
309
+ <select id="currency" name="currency" class="focus:ring-blue-500 focus:border-blue-500 h-full py-0 pl-2 pr-7 border-transparent bg-transparent text-gray-500 sm:text-sm rounded-md">
310
+ <option>USD</option>
311
+ <option>EUR</option>
312
+ <option>LBP</option>
313
+ </select>
314
+ </div>
315
+ </div>
316
+ </div>
317
+
318
+ <div>
319
+ <label for="fee" class="block text-sm font-medium text-gray-700">Transaction Fee (%)</label>
320
+ <input type="range" id="fee" name="fee" min="0.1" max="1" step="0.1" value="0.3" class="mt-1 block w-full">
321
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
322
+ <span>0.1%</span>
323
+ <span>0.5%</span>
324
+ <span>1%</span>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+
330
+ <div>
331
+ <h3 class="text-lg font-medium text-gray-900">Donation Impact</h3>
332
+ <p class="mt-1 text-sm text-gray-500">
333
+ See how your simulated trade would contribute.
334
+ </p>
335
+
336
+ <div class="mt-6 bg-gray-50 rounded-lg p-4">
337
+ <div class="flex justify-between">
338
+ <span class="text-sm font-medium text-gray-500">Transaction Value</span>
339
+ <span id="tx-value" class="text-sm text-gray-900">$0.00</span>
340
+ </div>
341
+ <div class="flex justify-between mt-2">
342
+ <span class="text-sm font-medium text-gray-500">Transaction Fee</span>
343
+ <span id="tx-fee" class="text-sm text-gray-900">$0.00</span>
344
+ </div>
345
+ <div class="flex justify-between mt-2">
346
+ <span class="text-sm font-medium text-gray-500">Donation Portion</span>
347
+ <span id="tx-donation" class="text-sm font-medium text-blue-600">$0.00</span>
348
+ </div>
349
+ <div class="mt-4 pt-4 border-t border-gray-200">
350
+ <p class="text-xs text-gray-500">
351
+ Based on current rates, this donation could provide:
352
+ </p>
353
+ <ul id="impact-list" class="mt-2 space-y-1 text-sm text-gray-500">
354
+ <li class="flex items-start">
355
+ <i class="fas fa-check-circle text-green-500 mt-0.5 mr-2 flex-shrink-0"></i>
356
+ <span>Select an amount to see impact</span>
357
+ </li>
358
+ </ul>
359
+ </div>
360
+ </div>
361
+
362
+ <button id="simulate-btn" class="mt-6 w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150">
363
+ Simulate Transaction
364
+ </button>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ </section>
372
+
373
+ <!-- Transparency Section -->
374
+ <section id="transparency" class="py-12 bg-gray-50">
375
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
376
+ <div class="lg:text-center">
377
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Accountability</h2>
378
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
379
+ Donation Transparency
380
+ </p>
381
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
382
+ Every simulated transaction is recorded and displayed publicly.
383
+ </p>
384
+ </div>
385
+
386
+ <div class="mt-10">
387
+ <div class="bg-white shadow overflow-hidden sm:rounded-lg">
388
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200 bg-gray-50">
389
+ <div class="-ml-4 -mt-4 flex justify-between items-center flex-wrap sm:flex-nowrap">
390
+ <div class="ml-4 mt-4">
391
+ <h3 class="text-lg leading-6 font-medium text-gray-900">
392
+ Recent Transactions
393
+ </h3>
394
+ <p class="mt-1 text-sm text-gray-500">
395
+ Last 10 simulated donations to South Lebanon aid.
396
+ </p>
397
+ </div>
398
+ <div class="ml-4 mt-4 flex-shrink-0">
399
+ <button id="refresh-btn" class="relative inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150">
400
+ <i class="fas fa-sync-alt mr-2"></i>
401
+ Refresh
402
+ </button>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ <div class="divide-y divide-gray-200">
407
+ <div id="transactions-container">
408
+ <!-- Transactions will be loaded here -->
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+ <div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
415
+ <div class="bg-white overflow-hidden shadow rounded-lg">
416
+ <div class="px-4 py-5 sm:p-6">
417
+ <div class="flex items-center">
418
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
419
+ <i class="fas fa-coins text-white text-xl"></i>
420
+ </div>
421
+ <div class="ml-5 w-0 flex-1">
422
+ <dl>
423
+ <dt class="text-sm font-medium text-gray-500 truncate">
424
+ Total Donations
425
+ </dt>
426
+ <dd>
427
+ <div class="text-lg font-medium text-gray-900">
428
+ $24,382
429
+ </div>
430
+ </dd>
431
+ </dl>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </div>
436
+
437
+ <div class="bg-white overflow-hidden shadow rounded-lg">
438
+ <div class="px-4 py-5 sm:p-6">
439
+ <div class="flex items-center">
440
+ <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
441
+ <i class="fas fa-users text-white text-xl"></i>
442
+ </div>
443
+ <div class="ml-5 w-0 flex-1">
444
+ <dl>
445
+ <dt class="text-sm font-medium text-gray-500 truncate">
446
+ Beneficiaries
447
+ </dt>
448
+ <dd>
449
+ <div class="text-lg font-medium text-gray-900">
450
+ 8,450+
451
+ </div>
452
+ </dd>
453
+ </dl>
454
+ </div>
455
+ </div>
456
+ </div>
457
+ </div>
458
+
459
+ <div class="bg-white overflow-hidden shadow rounded-lg">
460
+ <div class="px-4 py-5 sm:p-6">
461
+ <div class="flex items-center">
462
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
463
+ <i class="fas fa-exchange-alt text-white text-xl"></i>
464
+ </div>
465
+ <div class="ml-5 w-0 flex-1">
466
+ <dl>
467
+ <dt class="text-sm font-medium text-gray-500 truncate">
468
+ Transactions
469
+ </dt>
470
+ <dd>
471
+ <div class="text-lg font-medium text-gray-900">
472
+ 3,142
473
+ </div>
474
+ </dd>
475
+ </dl>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ </div>
482
+ </section>
483
+
484
+ <!-- Footer -->
485
+ <footer class="bg-white">
486
+ <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
487
+ <nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
488
+ <div class="px-5 py-2">
489
+ <a href="#home" class="text-base text-gray-500 hover:text-gray-900 transition duration-150">
490
+ Home
491
+ </a>
492
+ </div>
493
+ <div class="px-5 py-2">
494
+ <a href="#how-it-works" class="text-base text-gray-500 hover:text-gray-900 transition duration-150">
495
+ How It Works
496
+ </a>
497
+ </div>
498
+ <div class="px-5 py-2">
499
+ <a href="#donate" class="text-base text-gray-500 hover:text-gray-900 transition duration-150">
500
+ Donate
501
+ </a>
502
+ </div>
503
+ <div class="px-5 py-2">
504
+ <a href="#transparency" class="text-base text-gray-500 hover:text-gray-900 transition duration-150">
505
+ Transparency
506
+ </a>
507
+ </div>
508
+ </nav>
509
+ <div class="mt-8 flex justify-center space-x-6">
510
+ <a href="#" class="text-gray-400 hover:text-gray-500 transition duration-150">
511
+ <span class="sr-only">Twitter</span>
512
+ <i class="fab fa-twitter text-xl"></i>
513
+ </a>
514
+ <a href="#" class="text-gray-400 hover:text-gray-500 transition duration-150">
515
+ <span class="sr-only">GitHub</span>
516
+ <i class="fab fa-github text-xl"></i>
517
+ </a>
518
+ <a href="#" class="text-gray-400 hover:text-gray-500 transition duration-150">
519
+ <span class="sr-only">Telegram</span>
520
+ <i class="fab fa-telegram text-xl"></i>
521
+ </a>
522
+ </div>
523
+ <p class="mt-8 text-center text-base text-gray-400">
524
+ &copy; 2023 Zenith. A student prototype demonstration.
525
+ </p>
526
+ </div>
527
+ </footer>
528
+
529
+ <script>
530
+ // Mobile menu toggle
531
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
532
+ const menu = document.getElementById('mobile-menu');
533
+ menu.classList.toggle('hidden');
534
+ });
535
+
536
+ // Smooth scrolling for anchor links
537
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
538
+ anchor.addEventListener('click', function (e) {
539
+ e.preventDefault();
540
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
541
+ behavior: 'smooth'
542
+ });
543
+ // Close mobile menu if open
544
+ document.getElementById('mobile-menu').classList.add('hidden');
545
+ });
546
+ });
547
+
548
+ // Donation simulation calculator
549
+ const cryptoSelect = document.getElementById('crypto');
550
+ const amountInput = document.getElementById('amount');
551
+ const feeSlider = document.getElementById('fee');
552
+ const txValue = document.getElementById('tx-value');
553
+ const txFee = document.getElementById('tx-fee');
554
+ const txDonation = document.getElementById('tx-donation');
555
+ const impactList = document.getElementById('impact-list');
556
+ const simulateBtn = document.getElementById('simulate-btn');
557
+ const refreshBtn = document.getElementById('refresh-btn');
558
+ const transactionsContainer = document.getElementById('transactions-container');
559
+
560
+ // Sample transaction data
561
+ const sampleTransactions = [
562
+ { id: '0x8a3f...7b', crypto: 'ETH', amount: 0.25, fee: 0.3, donation: 0.00075, time: '2 minutes ago', status: 'completed' },
563
+ { id: '0x5b2e...9d', crypto: 'BTC', amount: 0.05, fee: 0.4, donation: 0.0002, time: '15 minutes ago', status: 'completed' },
564
+ { id: '0x3c7a...1f', crypto: 'USDT', amount: 500, fee: 0.2, donation: 1.00, time: '1 hour ago', status: 'completed' },
565
+ { id: '0x9d4f...6a', crypto: 'SOL', amount: 5, fee: 0.5, donation: 0.025, time: '3 hours ago', status: 'completed' },
566
+ { id: '0x2e8b...3c', crypto: 'ETH', amount: 1.2, fee: 0.3, donation: 0.0036, time: '5 hours ago', status: 'completed' },
567
+ { id: '0x7f1a...9e', crypto: 'BTC', amount: 0.1, fee: 0.4, donation: 0.0004, time: '1 day ago', status: 'completed' },
568
+ { id: '0x4d3c...2b', crypto: 'USDT', amount: 250, fee: 0.2, donation: 0.50, time: '2 days ago', status: 'completed' },
569
+ { id: '0x6e9f...7d', crypto: 'SOL', amount: 8, fee: 0.5, donation: 0.04, time: '3 days ago', status: 'completed' },
570
+ { id: '0x1b5a...4f', crypto: 'ETH', amount: 0.75, fee: 0.3, donation: 0.00225, time: '1 week ago', status: 'completed' },
571
+ { id: '0x3f8c...6e', crypto: 'BTC', amount: 0.02, fee: 0.4, donation: 0.00008, time: '2 weeks ago', status: 'completed' }
572
+ ];
573
+
574
+ // Crypto prices (simplified)
575
+ const cryptoPrices = {
576
+ BTC: 30000,
577
+ ETH: 1800,
578
+ USDT: 1,
579
+ SOL: 25
580
+ };
581
+
582
+ // Impact examples
583
+ const impactExamples = [
584
+ { amount: 0.5, text: "Provide a family with a week's worth of food" },
585
+ { amount: 1, text: "Supply clean water for a household for a month" },
586
+ { amount: 5, text: "Provide emergency medical supplies for a clinic" },
587
+ { amount: 10, text: "Fund a solar-powered light for a home" },
588
+ { amount: 25, text: "Support a child's education for a month" },
589
+ { amount: 50, text: "Provide a month's supply of medicines" }
590
+ ];
591
+
592
+ // Load transactions
593
+ function loadTransactions() {
594
+ transactionsContainer.innerHTML = '';
595
+ sampleTransactions.forEach(tx => {
596
+ const txElement = document.createElement('div');
597
+ txElement.className = 'px-4 py-5 sm:p-6 transaction-animation';
598
+ txElement.innerHTML = `
599
+ <div class="flex items-start">
600
+ <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
601
+ <i class="fas fa-${tx.crypto === 'BTC' ? 'bitcoin' : tx.crypto === 'ETH' ? 'ethereum' : 'dollar-sign'} text-blue-600 text-xl"></i>
602
+ </div>
603
+ <div class="ml-4 flex-1">
604
+ <div class="flex items-center justify-between">
605
+ <h4 class="text-sm font-medium text-gray-900">${tx.crypto} Transaction</h4>
606
+ <span class="px-2 py-1 text-xs font-semibold text-${tx.status === 'completed' ? 'green' : 'yellow'}-800 bg-${tx.status === 'completed' ? 'green' : 'yellow'}-100 rounded-full">${tx.status}</span>
607
+ </div>
608
+ <div class="mt-1 flex items-center justify-between">
609
+ <p class="text-sm text-gray-500">${tx.id}</p>
610
+ <p class="text-sm font-medium text-gray-900">${tx.time}</p>
611
+ </div>
612
+ <div class="mt-2 grid grid-cols-3 gap-4">
613
+ <div>
614
+ <p class="text-xs text-gray-500">Amount</p>
615
+ <p class="text-sm font-medium text-gray-900">${tx.amount} ${tx.crypto}</p>
616
+ </div>
617
+ <div>
618
+ <p class="text-xs text-gray-500">Fee</p>
619
+ <p class="text-sm font-medium text-gray-900">${tx.fee}%</p>
620
+ </div>
621
+ <div>
622
+ <p class="text-xs text-gray-500">Donation</p>
623
+ <p class="text-sm font-medium text-blue-600">${tx.donation} ${tx.crypto}</p>
624
+ </div>
625
+ </div>
626
+ </div>
627
+ </div>
628
+ `;
629
+ transactionsContainer.appendChild(txElement);
630
+ });
631
+ }
632
+
633
+ // Calculate donation impact
634
+ function calculateImpact() {
635
+ const crypto = cryptoSelect.value;
636
+ const amount = parseFloat(amountInput.value) || 0;
637
+ const feePercentage = parseFloat(feeSlider.value);
638
+
639
+ if (amount <= 0) {
640
+ txValue.textContent = '$0.00';
641
+ txFee.textContent = '$0.00';
642
+ txDonation.textContent = '$0.00';
643
+ impactList.innerHTML = `
644
+ <li class="flex items-start">
645
+ <i class="fas fa-check-circle text-green-500 mt-0.5 mr-2 flex-shrink-0"></i>
646
+ <span>Select an amount to see impact</span>
647
+ </li>
648
+ `;
649
+ return;
650
+ }
651
+
652
+ const usdValue = amount * (crypto === 'USDT' ? 1 : cryptoPrices[crypto]);
653
+ const feeAmount = usdValue * (feePercentage / 100);
654
+ const donationAmount = feeAmount * 0.5; // 50% of fee goes to donation
655
+
656
+ txValue.textContent = `$${usdValue.toFixed(2)}`;
657
+ txFee.textContent = `$${feeAmount.toFixed(2)}`;
658
+ txDonation.textContent = `$${donationAmount.toFixed(2)}`;
659
+
660
+ // Generate impact list
661
+ impactList.innerHTML = '';
662
+ impactExamples.forEach(impact => {
663
+ if (donationAmount >= impact.amount) {
664
+ const count = Math.floor(donationAmount / impact.amount);
665
+ if (count > 0) {
666
+ const item = document.createElement('li');
667
+ item.className = 'flex items-start';
668
+ item.innerHTML = `
669
+ <i class="fas fa-check-circle text-green-500 mt-0.5 mr-2 flex-shrink-0"></i>
670
+ <span>${count > 1 ? count + 'x ' : ''}${impact.text}</span>
671
+ `;
672
+ impactList.appendChild(item);
673
+ }
674
+ }
675
+ });
676
+
677
+ if (impactList.children.length === 0) {
678
+ impactList.innerHTML = `
679
+ <li class="flex items-start">
680
+ <i class="fas fa-info-circle text-blue-500 mt-0.5 mr-2 flex-shrink-0"></i>
681
+ <span>Every dollar helps provide essential aid</span>
682
+ </li>
683
+ `;
684
+ }
685
+ }
686
+
687
+ // Simulate transaction
688
+ function simulateTransaction() {
689
+ const crypto = cryptoSelect.value;
690
+ const amount = parseFloat(amountInput.value) || 0;
691
+ const feePercentage = parseFloat(feeSlider.value);
692
+
693
+ if (amount <= 0) {
694
+ alert('Please enter a valid amount');
695
+ return;
696
+ }
697
+
698
+ // Create a mock transaction
699
+ const tx = {
700
+ id: '0x' + Math.random().toString(16).substr(2, 8) + '...' + Math.random().toString(16).substr(2, 4),
701
+ crypto: crypto,
702
+ amount: amount.toFixed(crypto === 'BTC' || crypto === 'ETH' ? 4 : 2),
703
+ fee: feePercentage,
704
+ donation: (amount * (feePercentage / 100)).toFixed(6),
705
+ time: 'Just now',
706
+ status: 'completed'
707
+ };
708
+
709
+ // Add to beginning of array
710
+ sampleTransactions.unshift(tx);
711
+
712
+ // Reload transactions
713
+ loadTransactions();
714
+
715
+ // Show success message
716
+ alert(`Simulated transaction successful!\n\n${amount} ${crypto} traded with ${feePercentage}% fee\n$${(amount * (feePercentage / 100) * (crypto === 'USDT' ? 1 : cryptoPrices[crypto])).toFixed(2)} donated to South Lebanon aid.`);
717
+
718
+ // Reset form
719
+ amountInput.value = '';
720
+ calculateImpact();
721
+ }
722
+
723
+ // Event listeners
724
+ cryptoSelect.addEventListener('change', calculateImpact);
725
+ amountInput.addEventListener('input', calculateImpact);
726
+ feeSlider.addEventListener('input', calculateImpact);
727
+ simulateBtn.addEventListener('click', simulateTransaction);
728
+ refreshBtn.addEventListener('click', loadTransactions);
729
+
730
+ // Initialize
731
+ loadTransactions();
732
+ calculateImpact();
733
+ </script>
734
+ <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=zoob1/zenith" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
735
+ </html>