Hugging Face's logo

Spaces:
PureGreenGold
/
bingo
Running

App Files Community
PureGreenGold commited on
Commit
1ab8749
·
verified ·
1 Parent(s): f1ddfde

make the buttons link to relative to that page - Initial Deployment

Browse files
Files changed (8) hide show
  1. README.md +7 -5
  2. calendar.html +278 -0
  3. challenges.html +152 -0
  4. guide.html +170 -0
  5. index.html +194 -18
  6. profile.html +158 -0
  7. prompts.txt +26 -0
  8. settings.html +193 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Bingo
3
- emoji: 🐢
4
- colorFrom: pink
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: bingo
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: purple
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
calendar.html ADDED
@@ -0,0 +1,278 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>BinGo Calendar</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
15
+ body {
16
+ font-family: 'Inter', sans-serif;
17
+ }
18
+ .bin-black { background-color: #2D3748; }
19
+ .bin-recycling { background-color: #38B2AC; }
20
+ .bin-food { background-color: #68D391; }
21
+ .bg-eco-green { background-color: #F0FFF4; }
22
+ .text-eco-green { color: #2F855A; }
23
+ .border-eco-green { border-color: #C6F6D5; }
24
+ </style>
25
+ </head>
26
+ <body class="bg-eco-green min-h-screen pb-16">
27
+ <!-- App Header -->
28
+ <header class="bg-white shadow-sm sticky top-0 z-10">
29
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
30
+ <div class="flex items-center space-x-2">
31
+ <a href="index.html" class="p-2 rounded-full hover:bg-gray-100">
32
+ <i data-feather="chevron-left"></i>
33
+ </a>
34
+ <h1 class="text-xl font-bold text-eco-green">Calendar</h1>
35
+ </div>
36
+ <button class="p-2 rounded-full hover:bg-gray-100">
37
+ <i data-feather="plus"></i>
38
+ </button>
39
+ </div>
40
+ </header>
41
+
42
+ <!-- Month Selector -->
43
+ <section class="container mx-auto px-4 py-4">
44
+ <div class="flex justify-between items-center bg-white rounded-xl shadow-sm p-3">
45
+ <button class="p-2 rounded-full hover:bg-gray-100">
46
+ <i data-feather="chevron-left"></i>
47
+ </button>
48
+ <h2 class="font-semibold">June 2023</h2>
49
+ <button class="p-2 rounded-full hover:bg-gray-100">
50
+ <i data-feather="chevron-right"></i>
51
+ </button>
52
+ </div>
53
+ </section>
54
+
55
+ <!-- Week Days -->
56
+ <section class="container mx-auto px-4 mb-4">
57
+ <div class="grid grid-cols-7 gap-1 text-center text-sm font-medium">
58
+ <div class="py-2 text-gray-500">S</div>
59
+ <div class="py-2 text-gray-500">M</div>
60
+ <div class="py-2 text-gray-500">T</div>
61
+ <div class="py-2 text-gray-500">W</div>
62
+ <div class="py-2 text-gray-500">T</div>
63
+ <div class="py-2 text-gray-500">F</div>
64
+ <div class="py-2 text-gray-500">S</div>
65
+ </div>
66
+ </section>
67
+
68
+ <!-- Calendar Grid -->
69
+ <section class="container mx-auto px-4">
70
+ <div class="grid grid-cols-7 gap-1">
71
+ <!-- Previous Month Days -->
72
+ <div class="aspect-square p-1">
73
+ <div class="h-full flex items-center justify-center text-gray-300 text-sm">28</div>
74
+ </div>
75
+ <div class="aspect-square p-1">
76
+ <div class="h-full flex items-center justify-center text-gray-300 text-sm">29</div>
77
+ </div>
78
+ <div class="aspect-square p-1">
79
+ <div class="h-full flex items-center justify-center text-gray-300 text-sm">30</div>
80
+ </div>
81
+ <div class="aspect-square p-1">
82
+ <div class="h-full flex items-center justify-center text-gray-300 text-sm">31</div>
83
+ </div>
84
+
85
+ <!-- Current Month Days -->
86
+ <div class="aspect-square p-1">
87
+ <div class="h-full flex items-center justify-center text-sm">1</div>
88
+ </div>
89
+ <div class="aspect-square p-1">
90
+ <div class="h-full flex items-center justify-center text-sm">2</div>
91
+ </div>
92
+ <div class="aspect-square p-1">
93
+ <div class="h-full flex items-center justify-center text-sm">3</div>
94
+ </div>
95
+
96
+ <!-- Week 2 -->
97
+ <div class="aspect-square p-1">
98
+ <div class="h-full flex items-center justify-center text-sm">4</div>
99
+ </div>
100
+ <div class="aspect-square p-1">
101
+ <div class="h-full flex items-center justify-center text-sm">5</div>
102
+ </div>
103
+ <div class="aspect-square p-1">
104
+ <div class="h-full flex items-center justify-center text-sm">6</div>
105
+ </div>
106
+ <div class="aspect-square p-1">
107
+ <div class="h-full flex items-center justify-center text-sm">7</div>
108
+ </div>
109
+ <div class="aspect-square p-1">
110
+ <div class="h-full flex items-center justify-center text-sm">8</div>
111
+ </div>
112
+ <div class="aspect-square p-1">
113
+ <div class="h-full flex items-center justify-center text-sm">9</div>
114
+ </div>
115
+ <div class="aspect-square p-1">
116
+ <div class="h-full flex items-center justify-center text-sm">10</div>
117
+ </div>
118
+
119
+ <!-- Week 3 -->
120
+ <div class="aspect-square p-1">
121
+ <div class="h-full flex flex-col items-center justify-start pt-2 text-sm">
122
+ <span>11</span>
123
+ <div class="w-2 h-2 rounded-full bg-green-500 mt-1"></div>
124
+ </div>
125
+ </div>
126
+ <div class="aspect-square p-1">
127
+ <div class="h-full flex flex-col items-center justify-start pt-2 text-sm">
128
+ <span>12</span>
129
+ <div class="w-2 h-2 rounded-full bg-teal-500 mt-1"></div>
130
+ </div>
131
+ </div>
132
+ <div class="aspect-square p-1">
133
+ <div class="h-full flex items-center justify-center text-sm">13</div>
134
+ </div>
135
+ <div class="aspect-square p-1">
136
+ <div class="h-full flex flex-col items-center justify-start pt-2 text-sm">
137
+ <span>14</span>
138
+ <div class="w-2 h-2 rounded-full bg-green-500 mt-1"></div>
139
+ </div>
140
+ </div>
141
+ <div class="aspect-square p-1">
142
+ <div class="h-full flex flex-col items-center justify-start pt-2 text-sm">
143
+ <span>15</span>
144
+ <div class="w-2 h-2 rounded-full bg-green-700 mt-1"></div>
145
+ </div>
146
+ </div>
147
+ <div class="aspect-square p-1">
148
+ <div class="h-full flex items-center justify-center text-sm">16</div>
149
+ </div>
150
+ <div class="aspect-square p-1">
151
+ <div class="h-full flex items-center justify-center text-sm">17</div>
152
+ </div>
153
+
154
+ <!-- Week 4 -->
155
+ <div class="aspect-square p-1">
156
+ <div class="h-full flex items-center justify-center text-sm">18</div>
157
+ </div>
158
+ <div class="aspect-square p-1">
159
+ <div class="h-full flex flex-col items-center justify-start pt-2 text-sm">
160
+ <span>19</span>
161
+ <div class="w-2 h-2 rounded-full bg-gray-800 mt-1"></div>
162
+ </div>
163
+ </div>
164
+ <div class="aspect-square p-1">
165
+ <div class="h-full flex items-center justify-center text-sm">20</div>
166
+ </div>
167
+ <div class="aspect-square p-1">
168
+ <div class="h-full flex items-center justify-center text-sm">21</div>
169
+ </div>
170
+ <div class="aspect-square p-1">
171
+ <div class="h-full flex flex-col items-center justify-start pt-2 text-sm">
172
+ <span>22</span>
173
+ <div class="w-2 h-2 rounded-full bg-teal-500 mt-1"></div>
174
+ </div>
175
+ </div>
176
+ <div class="aspect-square p-1">
177
+ <div class="h-full flex items-center justify-center text-sm">23</div>
178
+ </div>
179
+ <div class="aspect-square p-1">
180
+ <div class="h-full flex items-center justify-center text-sm">24</div>
181
+ </div>
182
+
183
+ <!-- Week 5 -->
184
+ <div class="aspect-square p-1">
185
+ <div class="h-full flex items-center justify-center text-sm">25</div>
186
+ </div>
187
+ <div class="aspect-square p-1">
188
+ <div class="h-full flex flex-col items-center justify-start pt-2 text-sm">
189
+ <span>26</span>
190
+ <div class="w-2 h-2 rounded-full bg-green-500 mt-1"></div>
191
+ </div>
192
+ </div>
193
+ <div class="aspect-square p-1">
194
+ <div class="h-full flex items-center justify-center text-sm">27</div>
195
+ </div>
196
+ <div class="aspect-square p-1">
197
+ <div class="h-full flex items-center justify-center text-sm">28</div>
198
+ </div>
199
+ <div class="aspect-square p-1">
200
+ <div class="h-full flex flex-col items-center justify-start pt-2 text-sm">
201
+ <span>29</span>
202
+ <div class="w-2 h-2 rounded-full bg-green-700 mt-1"></div>
203
+ </div>
204
+ </div>
205
+ <div class="aspect-square p-1">
206
+ <div class="h-full flex items-center justify-center text-sm">30</div>
207
+ </div>
208
+
209
+ <!-- Next Month Days -->
210
+ <div class="aspect-square p-1">
211
+ <div class="h-full flex items-center justify-center text-gray-300 text-sm">1</div>
212
+ </div>
213
+ </div>
214
+ </section>
215
+
216
+ <!-- Upcoming Collections List -->
217
+ <section class="container mx-auto px-4 mt-6">
218
+ <h2 class="text-lg font-semibold text-gray-700 mb-3">Collections This Week</h2>
219
+ <div class="space-y-3">
220
+ <div class="bg-white p-4 rounded-xl shadow-sm flex items-center">
221
+ <div class="w-12 h-12 bin-recycling rounded-lg flex items-center justify-center mr-4">
222
+ <i data-feather="repeat" class="text-white"></i>
223
+ </div>
224
+ <div class="flex-1">
225
+ <h3 class="font-medium">Recycling Bin</h3>
226
+ <p class="text-sm text-gray-500">Wed, 14 June • 8:00 AM</p>
227
+ </div>
228
+ <i data-feather="chevron-right" class="text-gray-400"></i>
229
+ </div>
230
+ <div class="bg-white p-4 rounded-xl shadow-sm flex items-center">
231
+ <div class="w-12 h-12 bin-food rounded-lg flex items-center justify-center mr-4">
232
+ <i data-feather="droplet" class="text-white"></i>
233
+ </div>
234
+ <div class="flex-1">
235
+ <h3 class="font-medium">Food Waste</h3>
236
+ <p class="text-sm text-gray-500">Thu, 15 June • 8:00 AM</p>
237
+ </div>
238
+ <i data-feather="chevron-right" class="text-gray-400"></i>
239
+ </div>
240
+ <div class="bg-white p-4 rounded-xl shadow-sm flex items-center">
241
+ <div class="w-12 h-12 bin-black rounded-lg flex items-center justify-center mr-4">
242
+ <i data-feather="trash" class="text-white"></i>
243
+ </div>
244
+ <div class="flex-1">
245
+ <h3 class="font-medium">General Waste</h3>
246
+ <p class="text-sm text-gray-500">Mon, 19 June • 8:00 AM</p>
247
+ </div>
248
+ <i data-feather="chevron-right" class="text-gray-400"></i>
249
+ </div>
250
+ </div>
251
+ </section>
252
+
253
+ <!-- Bottom Navigation -->
254
+ <nav class="fixed bottom-0 w-full bg-white border-t border-gray-200">
255
+ <div class="container mx-auto px-4">
256
+ <div class="flex justify-around">
257
+ <a href="index.html" class="py-3 px-4 text-gray-500">
258
+ <i data-feather="home" class="w-5 h-5 mx-auto"></i>
259
+ </a>
260
+ <a href="#" class="py-3 px-4 text-green-600 border-t-2 border-green-600">
261
+ <i data-feather="calendar" class="w-5 h-5 mx-auto"></i>
262
+ </a>
263
+ <a href="guide.html" class="py-3 px-4 text-gray-500">
264
+ <i data-feather="book" class="w-5 h-5 mx-auto"></i>
265
+ </a>
266
+ <a href="profile.html" class="py极3 px-4 text-gray-500">
267
+ <i data-feather="user" class="w-5 h-5 mx-auto"></i>
268
+ </a>
269
+ </div>
270
+ </div>
271
+ </nav>
272
+
273
+ <script>
274
+ AOS.init();
275
+ feather.replace();
276
+ </script>
277
+ </body>
278
+ </html>
challenges.html ADDED
@@ -0,0 +1,152 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>BinGo Challenges</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
15
+ body {
16
+ font-family: 'Inter', sans-serif;
17
+ }
18
+ .bin-black { background-color: #2D3748; }
19
+ .bin-recycling { background-color: #38B2AC; }
20
+ .bin-food { background-color: #68D391; }
21
+ .bg-eco-green { background-color: #F0FFF4; }
22
+ .text-eco-green { color: #2F855A; }
23
+ .border-eco-green { border-color: #C6F6D5; }
24
+ </style>
25
+ </head>
26
+ <body class="bg-eco-green min-h-screen pb-16">
27
+ <!-- App Header -->
28
+ <header class="bg-white shadow-sm sticky top-0 z-10">
29
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
30
+ <div class="flex items-center space-x-2">
31
+ <a href="index.html" class="p-2 rounded-full hover:bg-gray-100">
32
+ <i data-feather="chevron-left"></i>
33
+ </a>
34
+ <h1 class="text-xl font-bold text-eco-green">Eco Challenges</h1>
35
+ </div>
36
+ <button class="p-2 rounded-full hover极bg-gray-100">
37
+ <i data-feather="info"></i>
38
+ </button>
39
+ </div>
40
+ </header>
41
+
42
+ <!-- Current Challenge -->
43
+ <section class="container mx-auto px-4 py-4">
44
+ <div class="bg-gradient-to-r from-green-400 to-green-600 rounded-xl p-5 text-white">
45
+ <div class="flex justify-between items-start">
46
+ <div>
47
+ <h2 class="text-xl font-bold mb-1">Weekly Recycling Challenge</h2>
48
+ <p class="text-sm opacity-90 mb-3">Recycle 5 items this week</p>
49
+ <div class="w-full bg-white bg-opacity-30 rounded-full h-2 mb-3">
50
+ <div class="bg-white h-2 rounded-full" style="width: 60%"></div>
51
+ </div>
52
+ <p class="text-xs">3/5 completed</p>
53
+ </div>
54
+ <div class="bg-white bg-opacity-20 p-3 rounded-full">
55
+ <i data-feather="award" class="w-6 h-6"></i>
56
+ </div>
57
+ </div>
58
+ </div>
59
+ </section>
60
+
61
+ <!-- Streak Counter -->
62
+ <section class="container mx-auto px-4 py-4">
63
+ <div class="bg-white rounded-xl shadow-sm p-5">
64
+ <div class="text-center">
65
+ <h2 class="text-lg font-semibold text-gray-700 mb-2">Current Streak</h2>
66
+ <div class="text-4xl font-bold text-green-600 mb-2">12 days</div>
67
+ <p class="text-sm text-gray-500">Keep up the good work!</p>
68
+ </div>
69
+ </div>
70
+ </section>
71
+
72
+ <!-- Available Challenges -->
73
+ <section class="container mx-auto px-4">
74
+ <h2 class="text-lg font-semibold text-gray-700 mb-3">Available Challenges</h2>
75
+ <div class="space-y-3">
76
+ <div class="bg-white p-4 rounded-xl shadow-sm">
77
+ <div class="flex items-start">
78
+ <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
79
+ <i data-feather="repeat" class="text-green-600"></i>
80
+ </div>
81
+ <div class="flex-1">
82
+ <h3 class="font-medium">Plastic-Free Week</h3>
83
+ <p class="text-sm text-gray-500 mb-2">Avoid single-use plastics for 7 days</p>
84
+ <div class="flex items-center">
85
+ <i data-feather="clock" class="w-4 h-4 text-gray-400 mr-1"></i>
86
+ <span class="text-xs text-gray-500">7 days remaining</span>
87
+ </div>
88
+ </div>
89
+ <button class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium">Start</button>
90
+ </div>
91
+ </div>
92
+ <div class="bg-white p-4 rounded-xl shadow-sm">
93
+ <div class="flex items-start">
94
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
95
+ <i data-feather="shopping-bag" class="text-blue-600"></i>
96
+ </div>
97
+ <div class="flex-1">
98
+ <h3 class="font-medium">Zero Waste Shopping</h3>
99
+ <p class="text-sm text-gray-500 mb-2">Use reusable bags for all shopping</p>
100
+ <div class="flex items-center">
101
+ <i data-feather="award" class="w-4 h-4 text-yellow-500 mr-1"></i>
102
+ <span class="text-xs text-gray-500">50 points reward</span>
103
+ </div>
104
+ </div>
105
+ <button class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium">Start</button>
106
+ </div>
107
+ </div>
108
+ <div class="bg-white p-4 rounded-xl shadow-sm">
109
+ <div class="flex items-start">
110
+ <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
111
+ <i data-feather="compost" class="text-purple-600"></i>
112
+ </div>
113
+ <div class="flex-1">
114
+ <h3 class="font-medium">Food Waste Reduction</h3>
115
+ <p class="text-sm text-gray-500 mb-2">Compost all food waste for 2 weeks</p>
116
+ <div class="flex items-center">
117
+ <i data-feather="star" class="w-4 h-4 text-green-500 mr-1"></i>
118
+ <span class="text-xs text-gray-500">Premium challenge</span>
119
+ </div>
120
+ </div>
121
+ <button class="bg-gray-300 text-gray-600 px-4 py-2 rounded-lg text-sm font-medium" disabled>Locked</button>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </section>
126
+
127
+ <!-- Bottom Navigation -->
128
+ <nav class="fixed bottom-0 w-full bg-white border-t border-gray-200">
129
+ <div class="container mx-auto px-4">
130
+ <div class="flex justify-around">
131
+ <a href="index.html" class="py-3 px-4 text-gray-500">
132
+ <i data-feather="home" class="w-5 h-5 mx-auto"></i>
133
+ </a>
134
+ <a href="calendar.html" class="py-3 px-4 text-gray-500">
135
+ <i data-feather="calendar" class="w-5 h-5 mx-auto"></极>
136
+ </a>
137
+ <a href="guide.html" class="py-3 px-4 text-gray-500">
138
+ <i data-feather="book" class="w-5 h-5 mx-auto"></i>
139
+ </a>
140
+ <a href="profile.html" class="py-3 px-4 text-gray-500">
141
+ <i data-feather="user" class="w-5 h-5 mx-auto"></i>
142
+ </a>
143
+ </div>
144
+ </div>
145
+ </nav>
146
+
147
+ <script>
148
+ AOS.init();
149
+ feather.replace();
150
+ </script>
151
+ </body>
152
+ </html>
guide.html ADDED
@@ -0,0 +1,170 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>BinGo Recycling Guide</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
15
+ body {
16
+ font-family: 'Inter', sans-serif;
17
+ }
18
+ .bin-black { background-color: #2D3748; }
19
+ .bin-recycling { background-color: #38B2AC; }
20
+ .bin-food { background-color: #68D391; }
21
+ .bg-eco-green { background-color: #F0FFF4; }
22
+ .text-eco-green { color: #2F855A; }
23
+ .border-eco-green { border-color: #C6F6D5; }
24
+ </style>
25
+ </head>
26
+ <body class="bg-eco-green min-h-screen pb-16">
27
+ <!-- App Header -->
28
+ <header class="bg-white shadow-sm sticky top-0 z-10">
29
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
30
+ <div class="flex items-center space-x-2">
31
+ <a href="index.html" class="p-2 rounded-full hover:bg-gray-100">
32
+ <i data-feather="chevron-left"></i>
33
+ </a>
34
+ <h1 class="text-xl font-bold text-eco-green">Recycling Guide</h1>
35
+ </div>
36
+ <button class="p-2 rounded-full hover:bg-gray-100">
37
+ <i data-feather="search"></i>
38
+ </button>
39
+ </div>
40
+ </header>
41
+
42
+ <!-- Search Bar -->
43
+ <section class="container mx-auto px-4 py-4">
44
+ <div class="relative">
45
+ <input type="text" placeholder="Search items..." class="w-full bg-white rounded-xl shadow-sm pl-10 pr-4 py-3 focus:outline-none focus:ring-2 focus:ring-green-500">
46
+ <i data-feather="search" class="absolute left-3 top-3.5 text-gray-400"></i>
47
+ </div>
48
+ </section>
49
+
50
+ <!-- Bin Categories -->
51
+ <section class="container mx-auto px-4 mb-6">
52
+ <div class="grid grid-cols-3 gap-3">
53
+ <button class="bg-white p-4 rounded-xl shadow-sm flex flex-col items-center">
54
+ <div class="w-12 h-12 bin-black rounded-lg flex items-center justify-center mb-2">
55
+ <i data-feather="trash" class="text-white"></i>
56
+ </div>
57
+ <span class="text-xs font-medium">General</span>
58
+ </button>
59
+ <button class="bg-white p-4 rounded-xl shadow-sm flex flex-col items-center">
60
+ <div class="w-12 h-12 bin-recycling rounded-lg flex items-center justify-center mb-2">
61
+ <i data-feather="repeat" class="text-white"></i>
62
+ </div>
63
+ <span class="text-xs font-medium">Recycling</span>
64
+ </button>
65
+ <button class="bg-white p-4 rounded-xl shadow-sm flex flex-col items-center">
66
+ <div class="w-12 h-12 bin-food rounded-lg flex items-center justify-center mb-2">
67
+ <i data-feather="droplet" class="text-white"></i>
68
+ </div>
69
+ <span class="text-xs font-medium">Food Waste</span>
70
+ </button>
71
+ </div>
72
+ </section>
73
+
74
+ <!-- Popular Items -->
75
+ <section class="container mx-auto px-4">
76
+ <h2 class="text-lg font-semibold text-gray-700 mb-3">Popular Items</h2>
77
+ <div class="space-y-3">
78
+ <div class="bg-white p-4 rounded-xl shadow-sm">
79
+ <div class="flex items-start">
80
+ <div class="w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center mr-4">
81
+ <img src="http://static.photos/food/200x200/1" alt="Pizza box" class="w-full h-full object-cover rounded-lg">
82
+ </div>
83
+ <div class="flex-1">
84
+ <h3 class="font-medium">Pizza Box</h3>
85
+ <p class="text-sm text-gray-500 mb-2">Cardboard food container</p>
86
+ <div class="flex items-center">
87
+ <div class="w-4 h-4 bin-recycling rounded-full mr-2"></div>
88
+ <span class="text-xs font-medium">Recycling Bin</span>
89
+ </div>
90
+ </div>
91
+ <i data-feather="chevron-right" class="text-gray-400"></i>
92
+ </div>
93
+ </div>
94
+ <div class="bg-white p-4 rounded-xl shadow-sm">
95
+ <div class="flex items-start">
96
+ <div class="w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center mr-4">
97
+ <img src="http://static.photos/food/200x200/2" alt="Plastic bottle" class="w-full h-full object-cover rounded-lg">
98
+ </div>
99
+ <div class="flex-1">
100
+ <h3 class="font-medium">Plastic Bottle</h3>
101
+ <p class="text-sm text-gray-500 mb-2">PET plastic container</p>
102
+ <div class="flex items-center">
103
+ <div class="w-4 h-4 bin-recycling rounded-full mr-2"></div>
104
+ <span class="text-xs font-medium">Recycling Bin</span>
105
+ </div>
106
+ </div>
107
+ <i data-feather="chevron-right" class="text-gray-400"></i>
108
+ </div>
109
+ </div>
110
+ <div class="bg-white p-4 rounded-xl shadow-sm">
111
+ <div class="flex items-start">
112
+ <div class="w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center mr-4">
113
+ <img src="http://static.photos/food/200x200/3" alt="Egg shells" class="w-full h-full object-cover rounded-lg">
114
+ </div>
115
+ <div class="flex-1">
116
+ <h3 class="font-medium">Egg Shells</h3>
117
+ <p class="text-sm text-gray-500 mb-2">Organic food waste</p>
118
+ <div class="flex items-center">
119
+ <div class="w-4 h-4 bin-food rounded-full mr-2"></div>
120
+ <span class="text-xs font-medium">Food Waste Bin</span>
121
+ </div>
122
+ </div>
123
+ <i data-feather="chevron-right" class="text-gray-400"></i>
124
+ </div>
125
+ </div>
126
+ <div class="bg-white p-4 rounded-xl shadow-sm">
127
+ <div class="flex items-start">
128
+ <div class="w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center mr-4">
129
+ <img src="http://static.photos/food/200x200/4" alt="Broken glass" class="w-full h-full object-cover rounded-lg">
130
+ </div>
131
+ <div class="flex-1">
132
+ <h3 class="font-medium">Broken Glass</h3>
133
+ <p class="text-sm text-gray-500 mb-2">Sharp glass fragments</p>
134
+ <div class="flex items-center">
135
+ <div class="w-4 h-4 bin-black rounded-full mr-2"></div>
136
+ <span class="text-xs font-medium">General Waste</span>
137
+ </div>
138
+ </div>
139
+ <i data-feather="chevron-right" class="text-gray-400"></i>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </section>
144
+
145
+ <!-- Bottom Navigation -->
146
+ <nav class="fixed bottom-0 w-full bg-white border-t border-gray-200">
147
+ <div class="container mx-auto px-4">
148
+ <div class="flex justify-around">
149
+ <a href="index.html" class="py-3 px-4 text-gray-500">
150
+ <i data-feather="home" class="w-5 h-5 mx-auto"></i>
151
+ </a>
152
+ <a href="calendar.html" class="py-3 px-4 text-gray-500">
153
+ <i data-feather="calendar" class="w-5 h-5 mx-auto"></i>
154
+ </a>
155
+ <a href="#" class="py-3 px-4 text-green-600 border-t-2 border-green-600">
156
+ <i data-feather="book" class="w-5 h-5 mx-auto"></i>
157
+ </a>
158
+ <a href="#" class="py-3 px-4 text-gray-500">
159
+ <i data-feather="user" class="w-5 h-5 mx-auto"></i>
160
+ </a>
161
+ </div>
162
+ </div>
163
+ </nav>
164
+
165
+ <script>
166
+ AOS.init();
167
+ feather.replace();
168
+ </script>
169
+ </body>
170
+ </html>
index.html CHANGED
@@ -1,19 +1,195 @@
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>BinGo - Smart Bin Reminders</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
14
+ <style>
15
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
16
+ body {
17
+ font-family: 'Inter', sans-serif;
18
+ }
19
+ .bin-black { background-color: #2D3748; }
20
+ .bin-recycling { background-color: #38B2AC; }
21
+ .bin-food { background-color: #68D391; }
22
+ .bg-eco-green { background-color: #F0FFF4; }
23
+ .text-eco-green { color: #2F855A; }
24
+ .border-eco-green { border-color: #C6F6D5; }
25
+ </style>
26
+ </head>
27
+ <body class="bg-eco-green min-h-screen">
28
+ <!-- App Header -->
29
+ <header class="bg-white shadow-sm sticky top-0 z-10">
30
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
31
+ <div class="flex items-center space-x-2">
32
+ <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
33
+ <i data-feather="trash-2" class="text-green-600"></i>
34
+ </div>
35
+ <h1 class="text-xl font-bold text-eco-green">BinGo</h1>
36
+ </div>
37
+ <div class="flex space-x-4">
38
+ <button class="p-2 rounded-full hover:bg-gray-100">
39
+ <i data-feather="bell"></i>
40
+ </button>
41
+ <button class="p-2 rounded-full hover:bg-gray-100">
42
+ <i data-feather="user"></i>
43
+ </button>
44
+ </div>
45
+ </div>
46
+ </header>
47
+
48
+ <!-- Main App Content -->
49
+ <main class="container mx-auto px-4 py-6">
50
+ <!-- Next Collection Card -->
51
+ <section class="mb-8" data-aos="fade-up">
52
+ <h2 class="text-lg font-semibold text-gray-700 mb-3">Next Collection</h2>
53
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
54
+ <div class="bin-recycling p-5 text-white">
55
+ <div class="flex justify-between items-start">
56
+ <div>
57
+ <p class="text-sm opacity-90">Tomorrow</p>
58
+ <h3 class="text-2xl font-bold mt-1">Recycling Bin</h3>
59
+ <p class="text-sm mt-2">8:00 AM - 12:00 PM</p>
60
+ </div>
61
+ <div class="bg-white bg-opacity-20 p-3 rounded-full">
62
+ <i data-feather="repeat" class="w-6 h-6"></i>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ <div class="p-5">
67
+ <div class="flex justify-between items-center">
68
+ <div>
69
+ <p class="text-sm text-gray-500">Your address</p>
70
+ <p class="font-medium">12 Green Street, Dublin</p>
71
+ </div>
72
+ <button class="text-green-600 text-sm font-medium">Change</button>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </section>
77
+
78
+ <!-- Quick Actions -->
79
+ <section class="mb-8" data-aos="fade-up" data-aos-delay="100">
80
+ <div class="grid grid-cols-4 gap-3">
81
+ <a href="calendar.html" class="bg-white p-4 rounded-xl shadow-sm flex flex-col items-center">
82
+ <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mb-2">
83
+ <i data-feather="calendar" class="text-green-600"></i>
84
+ </div>
85
+ <span class="text-xs font-medium">Calendar</span>
86
+ </a>
87
+ <a href="guide.html" class="bg-white p-4 rounded-xl shadow-sm flex flex-col items-center">
88
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mb-2">
89
+ <i data-feather="search" class="text-blue-600"></i>
90
+ </div>
91
+ <span class="text-xs font-medium">Recycling Guide</span>
92
+ </a>
93
+ <a href="challenges.html" class="bg-white p-4 rounded-xl shadow-sm flex flex-col items-center">
94
+ <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mb-2">
95
+ <i data-feather="award" class="text-yellow-600"></i>
96
+ </div>
97
+ <span class="text-xs font-medium">Challenges</span>
98
+ </a>
99
+ <a href="settings.html" class="bg-white p-4 rounded-xl shadow-sm flex flex-col items-center">
100
+ <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mb-2">
101
+ <i data-feather="settings" class="text-purple-600"></i>
102
+ </div>
103
+ <span class="text-xs font-medium">Settings</span>
104
+ </a>
105
+ </div>
106
+ </section>
107
+
108
+ <!-- Upcoming Collections -->
109
+ <section class="mb-8" data-aos="fade-up" data-aos-delay="150">
110
+ <div class="flex justify-between items-center mb-3">
111
+ <h2 class="text-lg font-semibold text-gray-700">Upcoming</h2>
112
+ <a href="calendar.html" class="text-green-600 text-sm font-medium">View All</a>
113
+ </div>
114
+ <div class="space-y-3">
115
+ <div class="bg-white p-4 rounded-xl shadow-sm flex items-center">
116
+ <div class="w-12 h-12 bin-food rounded-lg flex items-center justify-center mr-4">
117
+ <i data-feather="droplet" class="text-white"></i>
118
+ </div>
119
+ <div class="flex-1">
120
+ <h3 class="font-medium">Food Waste</h3>
121
+ <p class="text-sm text-gray-500">Thu, 15 June • 8:00 AM</p>
122
+ </div>
123
+ <i data-feather="chevron-right" class="text-gray-400"></i>
124
+ </div>
125
+ <div class="bg-white p-4 rounded-xl shadow-sm flex items-center">
126
+ <div class="w-12 h-12 bin-black rounded-lg flex items-center justify-center mr-4">
127
+ <i data-feather="trash" class="text-white"></i>
128
+ </div>
129
+ <div class="flex-1">
130
+ <h3 class="font-medium">General Waste</h3>
131
+ <p class="text-sm text-gray-500">Mon, 19 June • 8:00 AM</p>
132
+ </div>
133
+ <i data-feather="chevron-right" class="text-gray-400"></i>
134
+ </div>
135
+ </div>
136
+ </section>
137
+
138
+ <!-- Eco Challenge -->
139
+ <section data-aos="fade-up" data-aos-delay="200">
140
+ <div class="bg-gradient-to-r from-green-400 to-green-600 rounded-xl p-5 text-white">
141
+ <div class="flex justify-between items-start">
142
+ <div>
143
+ <h2 class="text-xl font-bold mb-1">Eco Challenge</h2>
144
+ <p class="text-sm opacity-90 mb-3">Recycle 5 items this week</p>
145
+ <div class="w-full bg-white bg-opacity-30 rounded-full h-2 mb-3">
146
+ <div class="bg-white h-2 rounded-full" style="width: 60%"></div>
147
+ </div>
148
+ <p class="text-xs">3/5 completed</p>
149
+ </div>
150
+ <div class="bg-white bg-opacity-20 p-3 rounded-full">
151
+ <i data-feather="award" class="w-6 h-6"></i>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </section>
156
+ </main>
157
+
158
+ <!-- Bottom Navigation -->
159
+ <nav class="fixed bottom-0 w-full bg-white border-t border-gray-200">
160
+ <div class="container mx-auto px-4">
161
+ <div class="flex justify-around">
162
+ <a href="#" class="py-3 px-4 text-green-600 border-t-2 border-green-600">
163
+ <i data-feather="home" class="w-5 h-5 mx-auto"></i>
164
+ </a>
165
+ <a href="calendar.html" class="py-3 px-4 text-gray-500">
166
+ <i data-feather="calendar" class="w-5 h-5 mx-auto"></i>
167
+ </a>
168
+ <a href="guide.html" class="py-3 px-4 text-gray-500">
169
+ <i data-feather="book" class="w-5 h-5 mx-auto"></i>
170
+ </a>
171
+ <a href="profile.html" class="py-3 px-4 text-gray-500">
172
+ <i data-feather="user" class="w-5 h-5 mx-auto"></i>
173
+ </a>
174
+ </div>
175
+ </div>
176
+ </nav>
177
+
178
+ <script>
179
+ AOS.init();
180
+ feather.replace();
181
+ VANTA.GLOBE({
182
+ el: "#vanta-bg",
183
+ mouseControls: true,
184
+ touchControls: true,
185
+ gyroControls: false,
186
+ minHeight: 200.00,
187
+ minWidth: 200.00,
188
+ scale: 1.00,
189
+ scaleMobile: 1.00,
190
+ color: 0x68d391,
191
+ backgroundColor: 0xf0fff4
192
+ });
193
+ </script>
194
+ </body>
195
  </html>
profile.html ADDED
@@ -0,0 +1,158 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>BinGo Profile</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
15
+ body {
16
+ font-family: 'Inter', sans-serif;
17
+ }
18
+ .bin-black { background-color: #2D3748; }
19
+ .bin-recycling { background-color: #38B2AC; }
20
+ .bin-food { background-color: #68D391; }
21
+ .bg-eco-green { background-color: #F0FFF4; }
22
+ .text-eco-green { color: #2F855A; }
23
+ .border-eco-green { border-color: #C6F6D5; }
24
+ </style>
25
+ </head>
26
+ <body class="bg-eco-green min-h-screen pb-16">
27
+ <!-- App Header -->
28
+ <header class="bg-white shadow-sm sticky top-0 z-10">
29
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
30
+ <div class="flex items-center space-x-2">
31
+ <a href="index.html" class="p-2 rounded-full hover:bg-gray-100">
32
+ <i data-feather="chevron-left"></i>
33
+ </a>
34
+ <h1 class="text-xl font-bold text-eco-green">Profile</h1>
35
+ </div>
36
+ <button class="p-2 rounded-full hover:bg-gray-100">
37
+ <i data-feather="edit"></i>
38
+ </button>
39
+ </div>
40
+ </header>
41
+
42
+ <!-- Profile Info -->
43
+ <section class="container mx-auto px-4 py-6">
44
+ <div class="text-center">
45
+ <div class="w-20 h-20 bg-green-100 rounded-full mx-auto mb-4 flex items-center justify-center">
46
+ <i data-feather="user" class="w-10 h-10 text-green-600"></i>
47
+ </div>
48
+ <h2 class="text-xl font-bold text-gray-800">Sarah Johnson</h2>
49
+ <p class="text-gray-600">Dublin, Ireland</p>
50
+ <div class="mt-2">
51
+ <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">
52
+ Premium Member
53
+ </span>
54
+ </div>
55
+ </div>
56
+ </section>
57
+
58
+ <!-- Stats -->
59
+ <section class="container mx-auto px-4 mb-6">
60
+ <div class="bg-white rounded-xl shadow-sm p-5">
61
+ <div class="grid grid-cols-3 gap-4 text-center">
62
+ <div>
63
+ <div class="text-2xl font-bold text-green-600">12</div>
64
+ <div class="text-xs text-gray-500">Day Streak</div>
65
+ </div>
66
+ <div>
67
+ <div class="text-2xl font-bold text-blue-600">47</div>
68
+ <div class="text-xs text-gray-500">Items Recycled</div>
69
+ </div>
70
+ <div>
71
+ <div class="text-2xl font-bold text-purple-600">5</div>
72
+ <div class="text-xs text-gray-500">Challenges</div>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </section>
77
+
78
+ <!-- Profile Sections -->
79
+ <section class="container mx-auto px-4">
80
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden">
81
+ <button class="w-full text-left p-4 border-b border-gray-100 flex items-center justify-between">
82
+ <div class="flex items-center">
83
+ <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
84
+ <i data-feather="award" class="w-4 h-4 text-blue-600"></i>
85
+ </div>
86
+ <span class="font-medium">Achievements</span>
87
+ </div>
88
+ <i data-feather="chevron-right" class="text-gray-400"></i>
89
+ </button>
90
+ <button class="w-full text-left p-4 border-b border-gray-100 flex items-center justify-between">
91
+ <div class="flex items-center">
92
+ <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3">
93
+ <i data-feather="bar-chart-2" class="w-4 h-4 text-green-600"></i>
94
+ </div>
95
+ <span class="font-medium">Statistics</span>
96
+ </div>
97
+ <i data-feather="chevron-right" class="text-gray-400"></i>
98
+ </button>
99
+ <button class="w-full text-left p-4 border-b border-gray-100 flex items-center justify-between">
100
+ <div class="flex items-center">
101
+ <div class="w-8 h-8 bg-yellow-100 rounded-lg flex items-center justify-center mr-3">
102
+ <i data-feather="dollar-sign" class="w-4 h-4 text-yellow-600"></i>
103
+ </div>
104
+ <span class="font-medium">Subscription</span>
105
+ </div>
106
+ <i data-feather="chevron-right" class="text-gray-400"></i>
107
+ </button>
108
+ <a href="settings.html" class="w-full text-left p-4 border-b border-gray-100 flex items-center justify-between">
109
+ <div class="flex items-center">
110
+ <div class="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center mr-3">
111
+ <i data-feather="settings" class="w-4 h-4 text-gray-600"></i>
112
+ </div>
113
+ <span class="font-medium">Settings</span>
114
+ </div>
115
+ <i data-feather="chevron-right" class="text-gray-400"></i>
116
+ </a>
117
+ <button class="w-full text-left p-4 flex items-center justify-between">
118
+ <div class="flex items-center">
119
+ <div class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center mr-3">
120
+ <i data-feather="log-out" class="w-4 h-4 text-red-600"></i>
121
+ </div>
122
+ <span class="font-medium text-red-600">Sign Out</span>
123
+ </div>
124
+ </button>
125
+ </div>
126
+ </section>
127
+
128
+ <!-- App Version -->
129
+ <section class="container mx-auto px-4 mt-6 text-center">
130
+ <p class="text-xs text-gray-500">BinGo App v1.2.0</p>
131
+ </section>
132
+
133
+ <!-- Bottom Navigation -->
134
+ <nav class="fixed bottom-0 w-full bg-white border-t border-gray-200">
135
+ <div class="container mx-auto px-4">
136
+ <div class="flex justify-around">
137
+ <a href="index.html" class="py-3 px-4 text-gray-500">
138
+ <i data-feather="home" class="w-5 h-5 mx-auto"></i>
139
+ </a>
140
+ <a href="calendar.html" class="py-3 px-4 text-gray-500">
141
+ <i data-feather="calendar" class="w-5 h-5 mx-auto"></i>
142
+ </a>
143
+ <a href="guide.html" class="py-3 px-4 text-gray-500">
144
+ <i data-feather="book" class="w-5 h-5 mx-auto"></i>
145
+ </a>
146
+ <a href="#" class="py-3 px-4 text-green-600 border-t-2 border-green-600">
147
+ <i data-feather="user" class="w-5 h-5 mx-auto"></i>
148
+ </a>
149
+ </div>
150
+ </div>
151
+ </nav>
152
+
153
+ <script>
154
+ AOS.init();
155
+ feather.replace();
156
+ </script>
157
+ </body>
158
+ </html>
prompts.txt ADDED
@@ -0,0 +1,26 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ Create a mobile app concept called “BinGo” – a bin reminder and recycling app designed for Ireland, with plans to expand internationally. The app should have a clean, modern design with light green and neutral tones.
2
+
3
+ Core features:
4
+ - Push notifications reminding users of upcoming bin collections based on their address and council schedule.
5
+ - Colour-coded calendar view showing black bin, recycling, and food waste days.
6
+ - Option to add multiple addresses (housemates, family).
7
+ - Customizable notification times (night before, morning of collection).
8
+
9
+ Extra features to visualize:
10
+ - Recycling guide with a searchable list of what goes in each bin.
11
+ - Community eco challenges and streaks for gamification.
12
+ - Ability to book or advertise bin cleaning services.
13
+ - Missed collection reporting linked to local council systems.
14
+
15
+ UI requirements:
16
+ - Minimalist dashboard with the next bin prominently displayed.
17
+ - Calendar view with week and month navigation.
18
+ - Simple settings menu for reminder customization.
19
+ - Accessibility-friendly icons and text.
20
+
21
+ Monetization concept: freemium model (basic reminders free, premium features via subscription), optional eco-friendly brand ads, and local partnerships.
22
+
23
+ Make the concept professional, scalable, and visually appealing. Present wireframes, UX flow, and monetization structure.
24
+
25
+ make al the buttons link to relative to that page
26
+ make the buttons link to relative to that page
settings.html ADDED
@@ -0,0 +1,193 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>BinGo Settings</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/n极m/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600极700&display=swap');
15
+ body {
16
+ font-family: 'Inter', sans-serif;
17
+ }
18
+ .bin-black { background-color: #2D3748; }
19
+ .bin-recycling { background-color: #38B2AC; }
20
+ .bin-food { background-color: #68D391; }
21
+ .bg-eco-green { background-color: #F0FFF4; }
22
+ .text-eco-green { color: #2F855A; }
23
+ .border-eco-green { border-color: #极F6D5; }
24
+ </style>
25
+ </head>
26
+ <body class="bg-eco-green min-h-screen pb-16">
27
+ <!-- App Header -->
28
+ <header class="bg-white shadow-sm sticky top-0 z-10">
29
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
30
+ <div class="flex items-center space-x-2">
31
+ <a href="index.html" class="p-2 rounded-full hover:bg-gray-100">
32
+ <i data-feather="chevron-left"></i>
33
+ </a>
34
+ <h1 class="text-xl font-bold text-eco-green">Settings</h1>
35
+ </div>
36
+ </div>
37
+ </header>
38
+
39
+ <!-- Settings Sections -->
40
+ <section class="container mx-auto px-4 py-4">
41
+ <!-- Notifications -->
42
+ <div class="bg-white rounded-xl shadow-sm p-4 mb-4">
43
+ <h2 class="font-semibold text-gray-700 mb-3">Notifications</h2>
44
+ <div class="space-y-3">
45
+ <div class="flex justify-between items-center">
46
+ <div>
47
+ <p class="font-medium">Collection Reminders</p>
48
+ <p class="text-sm text-gray-500">Get notified before bin day</p>
49
+ </div>
50
+ <label class="relative inline-flex items-center cursor-pointer">
51
+ <input type="checkbox" class="sr-only peer" checked>
52
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
53
+ </label>
54
+ </div>
55
+ <div class="flex justify-between items-center">
56
+ <div>
57
+ <p class="font-medium">Reminder Time</p>
58
+ <p class="text-sm text-gray-500">When to receive notifications</p>
59
+ </div>
60
+ <select class="bg-gray-100 border-0 rounded-lg px-3 py-1 text-sm">
61
+ <option>Night before (8 PM)</option>
62
+ <option>Morning of (7 AM)</option>
63
+ <option>Both times</option>
64
+ </select>
65
+ </div>
66
+ </div>
67
+ </div>
68
+
69
+ <!-- Account -->
70
+ <div class="bg-white rounded-xl shadow-sm p-4 mb-4">
71
+ <h2 class="font-semibold text-gray-700 mb-3">Account</h2>
72
+ <div class="space-y-3">
73
+ <div class="flex justify-between items-center">
74
+ <div>
75
+ <p class="font-medium">Email Address</p>
76
+ <p class="text-sm text-gray-500">user@example.com</p>
77
+ </div>
78
+ <button class="text-green-600 text-sm font-medium">Change</button>
79
+ </div>
80
+ <div class="flex justify-between items-center">
81
+ <div>
82
+ <p class="font-medium">Password</p>
83
+ <p class="text-sm text-gray-500">••••••••</p>
84
+ </div>
85
+ <button class="text-green-600 text-sm font-medium">Change</button>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Addresses -->
91
+ <div class="bg-white rounded-xl shadow-sm p-4 mb-4">
92
+ <h2 class="font-semibold text-gray-700 mb-3">Addresses</h2>
93
+ <div class="space-y-3">
94
+ <div class="flex justify-between items-center">
95
+ <div>
96
+ <p class="font-medium">12 Green Street, Dublin</p>
97
+ <p class="text-sm text-gray-500">Primary address</p>
98
+ </div>
99
+ <button class="text-green-600 text-sm font-medium">Edit</button>
100
+ </div>
101
+ <button class="w-full text-center text-green-600 py-2 border border-green-600 rounded-lg font-medium">
102
+ <i data-feather="plus" class="w-4 h-4 inline mr-1"></i>
103
+ Add New Address
104
+ </button>
105
+ </div>
106
+ </div>
107
+
108
+ <!-- App Settings -->
109
+ <div class="bg-white rounded-xl shadow-sm p-4 mb-4">
110
+ <h2 class="font-semibold text-gray-700 mb-3">App Settings</h2>
111
+ <div class="space-y-3">
112
+ <div class="flex justify-between items-center">
113
+ <div>
114
+ <p class="font-medium">Dark Mode</p>
115
+ <p class="text-sm text-gray-500">Use dark theme</p>
116
+ </div>
117
+ <label class="relative inline-flex items-center cursor-pointer">
118
+ <input type="checkbox" class="sr-only peer">
119
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
120
+ </label>
121
+ </div>
122
+ <div class="flex justify-between items-center">
123
+ <div>
124
+ <p class="font-medium">Language</p>
125
+ <p class="text-sm text-gray-500">App language</p>
126
+ </div>
127
+ <select class="bg-gray-100 border-0 rounded-lg px-3 py-1 text-sm">
128
+ <option>English</option>
129
+ <option>Irish</option>
130
+ </select>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Support -->
136
+ <div class="bg-white rounded-xl shadow-sm p-4 mb-4">
137
+ <h2 class="font-semibold text-gray-700 mb-3">Support</h2>
138
+ <div class="space-y-3">
139
+ <button class="w-full text-left py-2">
140
+ <p class="font-medium">Help Center</p>
141
+ <p class="text-sm text-gray-500">Get help with BinGo</p>
142
+ </button>
143
+ <button class="w-full text-left py-2">
144
+ <p class="font-medium">Contact Support</p>
145
+ <p class="text-sm text-gray-500">Send us a message</p>
146
+ </button>
147
+ <button class="w-full text-left py-2">
148
+ <p class="font-medium">Rate BinGo</p>
149
+ <p class="text-sm text-gray-500">Share your experience</p>
150
+ </button>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Legal -->
155
+ <div class="bg-white rounded-xl shadow-sm p-4">
156
+ <h2 class="font-semibold text-gray-700 mb-3">Legal</h2>
157
+ <div class="space-y-3">
158
+ <button class="w-full text-left py-2 text-sm">
159
+ Privacy Policy
160
+ </button>
161
+ <button class="w-full text-left py-2 text-sm">
162
+ Terms of Service
163
+ </button>
164
+ </div>
165
+ </div>
166
+ </section>
167
+
168
+ <!-- Bottom Navigation -->
169
+ <nav class="fixed bottom-0 w-full bg-white border-t border-gray-200">
170
+ <div class="container mx-auto px-4">
171
+ <div class="flex justify-around">
172
+ <a href="index.html" class="py-3 px-4 text-gray-500">
173
+ <i data-feather="home" class="w-5 h-5 mx-auto"></i>
174
+ </a>
175
+ <a href="calendar.html" class="py-3 px-4 text-gray-500">
176
+ <i data-feather="calendar" class="w-5 h-5 mx-auto"></i>
177
+ </a>
178
+ <a href="guide.html" class="py-3 px-4 text-gray-500">
179
+ <i data-feather="book" class="w-5 h-5 mx-auto"></i>
180
+ </a>
181
+ <a href="profile.html" class="py-3 px-4 text-gray-500">
182
+ <i data-feather="user" class="w-5 h-5 mx-auto"></i>
183
+ </a>
184
+ </div>
185
+ </div>
186
+ </nav>
187
+
188
+ <script>
189
+ AOS.init();
190
+ feather.replace();
191
+ </script>
192
+ </body>
193
+ </html>