Hugging Face's logo

Spaces:
fenglui
/
ecotrack
Running

App Files Community
fenglui commited on
Commit
f5f0c69
·
verified ·
1 Parent(s): 05dba13

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +597 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ecotrack
3
- emoji: 🦀
4
- colorFrom: red
5
- colorTo: green
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: ecotrack
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: blue
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,597 @@
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>EcoTrack - Your Sustainable Lifestyle Companion</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, #4ade80 0%, #3b82f6 100%);
12
+ }
13
+ .action-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
16
+ }
17
+ .earth-spin {
18
+ animation: spin 20s linear infinite;
19
+ }
20
+ @keyframes spin {
21
+ 0% { transform: rotate(0deg); }
22
+ 100% { transform: rotate(360deg); }
23
+ }
24
+ .progress-ring__circle {
25
+ transition: stroke-dashoffset 0.35s;
26
+ transform: rotate(-90deg);
27
+ transform-origin: 50% 50%;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="font-sans bg-gray-50">
32
+ <!-- Navigation -->
33
+ <nav class="bg-white shadow-sm">
34
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
35
+ <div class="flex justify-between h-16">
36
+ <div class="flex items-center">
37
+ <div class="flex-shrink-0 flex items-center">
38
+ <i class="fas fa-leaf text-green-500 text-2xl mr-2"></i>
39
+ <span class="text-xl font-bold text-gray-800">EcoTrack</span>
40
+ </div>
41
+ </div>
42
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
43
+ <a href="#" class="text-green-600 px-3 py-2 text-sm font-medium">Dashboard</a>
44
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Actions</a>
45
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Community</a>
46
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Learn</a>
47
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Rewards</a>
48
+ </div>
49
+ <div class="flex items-center">
50
+ <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium">
51
+ Sign In
52
+ </button>
53
+ </div>
54
+ </div>
55
+ </div>
56
+ </nav>
57
+
58
+ <!-- Hero Section -->
59
+ <div class="gradient-bg text-white">
60
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
61
+ <div class="text-center">
62
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
63
+ Track Your Impact, Save Our Planet
64
+ </h1>
65
+ <p class="mt-6 max-w-2xl mx-auto text-xl">
66
+ Every small action counts. Join thousands of eco-conscious individuals making a difference every day.
67
+ </p>
68
+ <div class="mt-10">
69
+ <button class="bg-white text-green-600 px-8 py-3 rounded-md text-lg font-semibold hover:bg-gray-100 transition duration-300">
70
+ Get Started - It's Free
71
+ </button>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ </div>
76
+
77
+ <!-- Stats Section -->
78
+ <div class="bg-white py-12">
79
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
80
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
81
+ <div class="p-6 rounded-lg border border-gray-100 shadow-sm">
82
+ <div class="text-4xl font-bold text-green-500">12,589</div>
83
+ <div class="mt-2 text-gray-600">Active Users</div>
84
+ </div>
85
+ <div class="p-6 rounded-lg border border-gray-100 shadow-sm">
86
+ <div class="text-4xl font-bold text-green-500">387,241</div>
87
+ <div class="mt-2 text-gray-600">Actions Logged</div>
88
+ </div>
89
+ <div class="p-6 rounded-lg border border-gray-100 shadow-sm">
90
+ <div class="text-4xl font-bold text-green-500">1,204</div>
91
+ <div class="mt-2 text-gray-600">Trees Planted</div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- How It Works -->
98
+ <div class="bg-gray-50 py-16">
99
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
100
+ <div class="text-center">
101
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
102
+ How EcoTrack Works
103
+ </h2>
104
+ <p class="mt-4 max-w-2xl mx-auto text-gray-500">
105
+ Simple steps to make a big difference
106
+ </p>
107
+ </div>
108
+
109
+ <div class="mt-16">
110
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
111
+ <div class="text-center">
112
+ <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-100 text-green-600">
113
+ <i class="fas fa-plus text-xl"></i>
114
+ </div>
115
+ <div class="mt-6">
116
+ <h3 class="text-lg font-medium text-gray-900">1. Log Your Actions</h3>
117
+ <p class="mt-2 text-gray-500">
118
+ Record your daily sustainable actions like recycling, reducing waste, or conserving energy.
119
+ </p>
120
+ </div>
121
+ </div>
122
+ <div class="text-center">
123
+ <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-100 text-green-600">
124
+ <i class="fas fa-chart-line text-xl"></i>
125
+ </div>
126
+ <div class="mt-6">
127
+ <h3 class="text-lg font-medium text-gray-900">2. Track Your Impact</h3>
128
+ <p class="mt-2 text-gray-500">
129
+ See real-time statistics on your carbon footprint reduction and resource savings.
130
+ </p>
131
+ </div>
132
+ </div>
133
+ <div class="text-center">
134
+ <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-100 text-green-600">
135
+ <i class="fas fa-trophy text-xl"></i>
136
+ </div>
137
+ <div class="mt-6">
138
+ <h3 class="text-lg font-medium text-gray-900">3. Earn Rewards</h3>
139
+ <p class="mt-2 text-gray-500">
140
+ Redeem points for discounts, plant trees, or donate to environmental causes.
141
+ </p>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Action Cards -->
150
+ <div class="bg-white py-16">
151
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
152
+ <div class="text-center">
153
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
154
+ Popular Eco Actions
155
+ </h2>
156
+ <p class="mt-4 max-w-2xl mx-auto text-gray-500">
157
+ Start with these simple actions to make an impact
158
+ </p>
159
+ </div>
160
+
161
+ <div class="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
162
+ <!-- Action Card 1 -->
163
+ <div class="action-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
164
+ <div class="p-6">
165
+ <div class="flex items-center">
166
+ <div class="flex-shrink-0 bg-green-100 p-3 rounded-full">
167
+ <i class="fas fa-recycle text-green-600 text-xl"></i>
168
+ </div>
169
+ <div class="ml-4">
170
+ <h3 class="text-lg font-medium text-gray-900">Recycling</h3>
171
+ <p class="mt-1 text-sm text-gray-500">15 points per item</p>
172
+ </div>
173
+ </div>
174
+ <div class="mt-4">
175
+ <p class="text-gray-600">
176
+ Properly sorting and recycling paper, plastic, glass, and metal reduces landfill waste.
177
+ </p>
178
+ </div>
179
+ <div class="mt-6">
180
+ <button class="w-full bg-green-50 text-green-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-green-100">
181
+ Log This Action
182
+ </button>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <!-- Action Card 2 -->
188
+ <div class="action-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
189
+ <div class="p-6">
190
+ <div class="flex items-center">
191
+ <div class="flex-shrink-0 bg-green-100 p-3 rounded-full">
192
+ <i class="fas fa-bolt text-green-600 text-xl"></i>
193
+ </div>
194
+ <div class="ml-4">
195
+ <h3 class="text-lg font-medium text-gray-900">Energy Saving</h3>
196
+ <p class="mt-1 text-sm text-gray-500">10 points per hour</p>
197
+ </div>
198
+ </div>
199
+ <div class="mt-4">
200
+ <p class="text-gray-600">
201
+ Turning off lights and unplugging devices when not in use conserves energy.
202
+ </p>
203
+ </div>
204
+ <div class="mt-6">
205
+ <button class="w-full bg-green-50 text-green-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-green-100">
206
+ Log This Action
207
+ </button>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Action Card 3 -->
213
+ <div class="action-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
214
+ <div class="p-6">
215
+ <div class="flex items-center">
216
+ <div class="flex-shrink-0 bg-green-100 p-3 rounded-full">
217
+ <i class="fas fa-bicycle text-green-600 text-xl"></i>
218
+ </div>
219
+ <div class="ml-4">
220
+ <h3 class="text-lg font-medium text-gray-900">Green Commute</h3>
221
+ <p class="mt-1 text-sm text-gray-500">25 points per trip</p>
222
+ </div>
223
+ </div>
224
+ <div class="mt-4">
225
+ <p class="text-gray-600">
226
+ Walking, biking, or using public transport reduces carbon emissions.
227
+ </p>
228
+ </div>
229
+ <div class="mt-6">
230
+ <button class="w-full bg-green-50 text-green-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-green-100">
231
+ Log This Action
232
+ </button>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <div class="mt-10 text-center">
239
+ <button class="text-green-600 hover:text-green-800 font-medium">
240
+ View All Actions <i class="fas fa-chevron-right ml-1"></i>
241
+ </button>
242
+ </div>
243
+ </div>
244
+ </div>
245
+
246
+ <!-- Progress Section -->
247
+ <div class="gradient-bg text-white py-16">
248
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
249
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
250
+ <div class="mb-12 lg:mb-0">
251
+ <h2 class="text-3xl font-extrabold sm:text-4xl">
252
+ Your Personal Impact Dashboard
253
+ </h2>
254
+ <p class="mt-4 text-lg">
255
+ Track your progress, set goals, and see how your actions contribute to a healthier planet.
256
+ </p>
257
+ <div class="mt-8 grid grid-cols-2 gap-6">
258
+ <div>
259
+ <div class="text-3xl font-bold">1,245</div>
260
+ <div class="mt-1 text-green-100">Points Earned</div>
261
+ </div>
262
+ <div>
263
+ <div class="text-3xl font-bold">87</div>
264
+ <div class="mt-1 text-green-100">Actions Taken</div>
265
+ </div>
266
+ <div>
267
+ <div class="text-3xl font-bold">42kg</div>
268
+ <div class="mt-1 text-green-100">CO₂ Reduced</div>
269
+ </div>
270
+ <div>
271
+ <div class="text-3xl font-bold">3</div>
272
+ <div class="mt-1 text-green-100">Trees Planted</div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ <div class="relative">
277
+ <div class="relative mx-auto w-64 h-64">
278
+ <svg class="w-full h-full" viewBox="0 0 100 100">
279
+ <!-- Background circle -->
280
+ <circle cx="50" cy="50" r="45" fill="none" stroke="#e5e7eb" stroke-width="8"/>
281
+ <!-- Progress circle -->
282
+ <circle class="progress-ring__circle" cx="50" cy="50" r="45" fill="none" stroke="#ffffff" stroke-width="8" stroke-dasharray="283" stroke-dashoffset="70"/>
283
+ </svg>
284
+ <div class="absolute inset-0 flex items-center justify-center">
285
+ <div class="text-center">
286
+ <div class="text-4xl font-bold">72%</div>
287
+ <div class="text-green-100">Monthly Goal</div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ <div class="mt-8 text-center">
292
+ <button class="bg-white text-green-600 px-6 py-2 rounded-md font-medium hover:bg-gray-100 transition duration-300">
293
+ View Full Dashboard
294
+ </button>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- Community Section -->
302
+ <div class="bg-white py-16">
303
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
304
+ <div class="text-center">
305
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
306
+ Join Our Growing Community
307
+ </h2>
308
+ <p class="mt-4 max-w-2xl mx-auto text-gray-500">
309
+ Connect with like-minded individuals and share your journey
310
+ </p>
311
+ </div>
312
+
313
+ <div class="mt-12">
314
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
315
+ <!-- Community Post 1 -->
316
+ <div class="bg-gray-50 rounded-lg p-6">
317
+ <div class="flex items-center">
318
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/42.jpg" alt="">
319
+ <div class="ml-3">
320
+ <p class="text-sm font-medium text-gray-900">Sarah J.</p>
321
+ <p class="text-xs text-gray-500">2 hours ago</p>
322
+ </div>
323
+ </div>
324
+ <div class="mt-4">
325
+ <p class="text-gray-700">
326
+ "Just installed solar panels on my roof! Excited to see my energy bills drop and my EcoTrack points rise!"
327
+ </p>
328
+ </div>
329
+ <div class="mt-4 flex items-center text-sm text-gray-500">
330
+ <i class="fas fa-heart mr-1 text-green-500"></i> 24
331
+ <i class="fas fa-comment ml-4 mr-1 text-green-500"></i> 5
332
+ </div>
333
+ </div>
334
+
335
+ <!-- Community Post 2 -->
336
+ <div class="bg-gray-50 rounded-lg p-6">
337
+ <div class="flex items-center">
338
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
339
+ <div class="ml-3">
340
+ <p class="text-sm font-medium text-gray-900">Michael T.</p>
341
+ <p class="text-xs text-gray-500">5 hours ago</p>
342
+ </div>
343
+ </div>
344
+ <div class="mt-4">
345
+ <p class="text-gray-700">
346
+ "Completed my 30-day zero waste challenge today. It was tough but so rewarding! Any tips for maintaining this lifestyle?"
347
+ </p>
348
+ </div>
349
+ <div class="mt-4 flex items-center text-sm text-gray-500">
350
+ <i class="fas fa-heart mr-1 text-green-500"></i> 42
351
+ <i class="fas fa-comment ml-4 mr-1 text-green-500"></i> 13
352
+ </div>
353
+ </div>
354
+
355
+ <!-- Community Post 3 -->
356
+ <div class="bg-gray-50 rounded-lg p-6">
357
+ <div class="flex items-center">
358
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/63.jpg" alt="">
359
+ <div class="ml-3">
360
+ <p class="text-sm font-medium text-gray-900">Priya K.</p>
361
+ <p class="text-xs text-gray-500">1 day ago</p>
362
+ </div>
363
+ </div>
364
+ <div class="mt-4">
365
+ <p class="text-gray-700">
366
+ "Our neighborhood recycling initiative has diverted over 500kg of waste from landfills this month! So proud of our community effort."
367
+ </p>
368
+ </div>
369
+ <div class="mt-4 flex items-center text-sm text-gray-500">
370
+ <i class="fas fa-heart mr-1 text-green-500"></i> 87
371
+ <i class="fas fa-comment ml-4 mr-1 text-green-500"></i> 22
372
+ </div>
373
+ </div>
374
+ </div>
375
+
376
+ <div class="mt-10 text-center">
377
+ <button class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-md font-medium transition duration-300">
378
+ Join the Community
379
+ </button>
380
+ </div>
381
+ </div>
382
+ </div>
383
+ </div>
384
+
385
+ <!-- Rewards Section -->
386
+ <div class="bg-gray-50 py-16">
387
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
388
+ <div class="text-center">
389
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
390
+ Redeem Your Points
391
+ </h2>
392
+ <p class="mt-4 max-w-2xl mx-auto text-gray-500">
393
+ Your eco-friendly actions deserve rewards
394
+ </p>
395
+ </div>
396
+
397
+ <div class="mt-12">
398
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
399
+ <!-- Reward 1 -->
400
+ <div class="bg-white rounded-lg overflow-hidden shadow-sm border border-gray-100">
401
+ <div class="p-6">
402
+ <div class="flex justify-center">
403
+ <div class="bg-green-100 p-4 rounded-full">
404
+ <i class="fas fa-tree text-green-600 text-3xl"></i>
405
+ </div>
406
+ </div>
407
+ <div class="mt-6 text-center">
408
+ <h3 class="text-lg font-medium text-gray-900">Plant a Tree</h3>
409
+ <p class="mt-2 text-gray-600">
410
+ Donate 500 points to plant a tree through our partner organizations.
411
+ </p>
412
+ <div class="mt-6">
413
+ <button class="bg-green-50 text-green-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-green-100">
414
+ Redeem (500 pts)
415
+ </button>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ </div>
420
+
421
+ <!-- Reward 2 -->
422
+ <div class="bg-white rounded-lg overflow-hidden shadow-sm border border-gray-100">
423
+ <div class="p-6">
424
+ <div class="flex justify-center">
425
+ <div class="bg-green-100 p-4 rounded-full">
426
+ <i class="fas fa-tag text-green-600 text-3xl"></i>
427
+ </div>
428
+ </div>
429
+ <div class="mt-6 text-center">
430
+ <h3 class="text-lg font-medium text-gray-900">Eco Store Discount</h3>
431
+ <p class="mt-2 text-gray-600">
432
+ Get 15% off at our partner eco-friendly stores with 300 points.
433
+ </p>
434
+ <div class="mt-6">
435
+ <button class="bg-green-50 text-green-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-green-100">
436
+ Redeem (300 pts)
437
+ </button>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </div>
442
+
443
+ <!-- Reward 3 -->
444
+ <div class="bg-white rounded-lg overflow-hidden shadow-sm border border-gray-100">
445
+ <div class="p-6">
446
+ <div class="flex justify-center">
447
+ <div class="bg-green-100 p-4 rounded-full">
448
+ <i class="fas fa-book text-green-600 text-3xl"></i>
449
+ </div>
450
+ </div>
451
+ <div class="mt-6 text-center">
452
+ <h3 class="text-lg font-medium text-gray-900">Eco Book Club</h3>
453
+ <p class="mt-2 text-gray-600">
454
+ Join our exclusive book club with 200 points and get monthly eco-literature.
455
+ </p>
456
+ <div class="mt-6">
457
+ <button class="bg-green-50 text-green-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-green-100">
458
+ Redeem (200 pts)
459
+ </button>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+
469
+ <!-- Newsletter -->
470
+ <div class="bg-white py-16">
471
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
472
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
473
+ <div class="mb-12 lg:mb-0">
474
+ <img class="mx-auto h-48 earth-spin" src="https://cdn-icons-png.flaticon.com/512/44/44386.png" alt="Earth">
475
+ </div>
476
+ <div>
477
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
478
+ Stay Updated
479
+ </h2>
480
+ <p class="mt-4 text-lg text-gray-500">
481
+ Subscribe to our newsletter for weekly eco-tips, success stories, and special rewards.
482
+ </p>
483
+ <div class="mt-8">
484
+ <form class="sm:flex">
485
+ <label for="email-address" class="sr-only">Email address</label>
486
+ <input id="email-address" name="email" type="email" autocomplete="email" required class="w-full px-5 py-3 border border-gray-300 shadow-sm placeholder-gray-400 focus:ring-green-500 focus:border-green-500 sm:max-w-xs rounded-md" placeholder="Enter your email">
487
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
488
+ <button type="submit" class="w-full bg-green-600 hover:bg-green-700 flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
489
+ Subscribe
490
+ </button>
491
+ </div>
492
+ </form>
493
+ </div>
494
+ </div>
495
+ </div>
496
+ </div>
497
+ </div>
498
+
499
+ <!-- Footer -->
500
+ <footer class="bg-gray-800">
501
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
502
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
503
+ <div>
504
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
505
+ EcoTrack
506
+ </h3>
507
+ <div class="mt-4 space-y-4">
508
+ <a href="#" class="text-base text-gray-400 hover:text-white">
509
+ About Us
510
+ </a>
511
+ <a href="#" class="text-base text-gray-400 hover:text-white block">
512
+ Careers
513
+ </a>
514
+ <a href="#" class="text-base text-gray-400 hover:text-white block">
515
+ Press
516
+ </a>
517
+ </div>
518
+ </div>
519
+ <div>
520
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
521
+ Resources
522
+ </h3>
523
+ <div class="mt-4 space-y-4">
524
+ <a href="#" class="text-base text-gray-400 hover:text-white">
525
+ Blog
526
+ </a>
527
+ <a href="#" class="text-base text-gray-400 hover:text-white block">
528
+ Guides
529
+ </a>
530
+ <a href="#" class="text-base text-gray-400 hover:text-white block">
531
+ Research
532
+ </a>
533
+ </div>
534
+ </div>
535
+ <div>
536
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
537
+ Support
538
+ </h3>
539
+ <div class="mt-4 space-y-4">
540
+ <a href="#" class="text-base text-gray-400 hover:text-white">
541
+ Help Center
542
+ </a>
543
+ <a href="#" class="text-base text-gray-400 hover:text-white block">
544
+ Community
545
+ </a>
546
+ <a href="#" class="text-base text-gray-400 hover:text-white block">
547
+ Contact Us
548
+ </a>
549
+ </div>
550
+ </div>
551
+ <div>
552
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
553
+ Connect
554
+ </h3>
555
+ <div class="mt-4 flex space-x-6">
556
+ <a href="#" class="text-gray-400 hover:text-white">
557
+ <i class="fab fa-facebook-f"></i>
558
+ </a>
559
+ <a href="#" class="text-gray-400 hover:text-white">
560
+ <i class="fab fa-twitter"></i>
561
+ </a>
562
+ <a href="#" class="text-gray-400 hover:text-white">
563
+ <i class="fab fa-instagram"></i>
564
+ </a>
565
+ <a href="#" class="text-gray-400 hover:text-white">
566
+ <i class="fab fa-linkedin-in"></i>
567
+ </a>
568
+ </div>
569
+ </div>
570
+ </div>
571
+ <div class="mt-12 border-t border-gray-700 pt-8">
572
+ <p class="text-base text-gray-400 text-center">
573
+ &copy; 2023 EcoTrack. All rights reserved.
574
+ </p>
575
+ </div>
576
+ </div>
577
+ </footer>
578
+
579
+ <script>
580
+ // Simple animation for the progress ring
581
+ document.addEventListener('DOMContentLoaded', function() {
582
+ const circle = document.querySelector('.progress-ring__circle');
583
+ const radius = circle.r.baseVal.value;
584
+ const circumference = 2 * Math.PI * radius;
585
+
586
+ circle.style.strokeDasharray = circumference;
587
+ circle.style.strokeDashoffset = circumference - (0.72 * circumference);
588
+
589
+ // Simulate user login/show modal
590
+ setTimeout(() => {
591
+ // This would be replaced with actual login logic
592
+ console.log('Welcome to EcoTrack! Start tracking your eco-friendly actions today.');
593
+ }, 2000);
594
+ });
595
+ </script>
596
+ <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=fenglui/ecotrack" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
597
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ 一个网站或移动应用，鼓励用户记录自己的环保行动（如垃圾分类、节能减排、植树造林等），并与其他用户分享。平台会根据用户的环保行动给予积分和奖励，激励更多人参与环保活动，同时提供环保知识和资讯，提高用户的环保意识。