Hugging Face's logo

Spaces:
vi-c
/
kid-actvities
Running

App Files Community
vi-c commited on
Commit
047cd12
·
verified ·
1 Parent(s): 171a2e0

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +687 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Kid Actvities
3
- emoji: 📚
4
  colorFrom: green
5
- colorTo: yellow
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: kid-actvities
3
+ emoji: 🐳
4
  colorFrom: green
5
+ colorTo: green
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,687 @@
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>Kidventure - Find Kids Activities Near You</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
+ <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
10
+ <style>
11
+ .map-container {
12
+ height: 500px;
13
+ border-radius: 12px;
14
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
15
+ }
16
+ .activity-card:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
19
+ }
20
+ .filter-section {
21
+ transition: all 0.3s ease;
22
+ }
23
+ .active-filter {
24
+ background-color: #3b82f6;
25
+ color: white;
26
+ }
27
+ .age-bubble {
28
+ transition: all 0.2s ease;
29
+ }
30
+ .age-bubble:hover {
31
+ transform: scale(1.05);
32
+ }
33
+ .age-bubble.selected {
34
+ background-color: #3b82f6;
35
+ color: white;
36
+ }
37
+ .tab-active {
38
+ border-bottom: 3px solid #3b82f6;
39
+ color: #3b82f6;
40
+ font-weight: 600;
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="bg-gray-50">
45
+ <!-- Header -->
46
+ <header class="bg-white shadow-sm">
47
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
48
+ <div class="flex items-center space-x-2">
49
+ <i class="fas fa-child-reaching text-3xl text-blue-500"></i>
50
+ <h1 class="text-2xl font-bold text-gray-800">Kidventure</h1>
51
+ </div>
52
+ <div class="flex items-center space-x-4">
53
+ <button id="loginBtn" class="px-4 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition">
54
+ Sign In
55
+ </button>
56
+ <button id="addActivityBtn" class="px-4 py-2 rounded-lg bg-green-500 text-white hover:bg-green-600 transition hidden">
57
+ <i class="fas fa-plus mr-2"></i>Add Activity
58
+ </button>
59
+ </div>
60
+ </div>
61
+ </header>
62
+
63
+ <!-- Hero Section -->
64
+ <section class="bg-gradient-to-r from-blue-400 to-purple-500 text-white py-12">
65
+ <div class="container mx-auto px-4 text-center">
66
+ <h2 class="text-4xl font-bold mb-4">Find Amazing Activities for Kids</h2>
67
+ <p class="text-xl mb-8">Discover fun, educational, and exciting things to do with children in your area</p>
68
+
69
+ <!-- Search Bar -->
70
+ <div class="max-w-3xl mx-auto bg-white rounded-lg shadow-lg p-2">
71
+ <div class="flex">
72
+ <input type="text" placeholder="Search by location or activity..."
73
+ class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-800">
74
+ <button class="bg-blue-500 text-white px-6 py-3 rounded-r-lg hover:bg-blue-600 transition">
75
+ <i class="fas fa-search mr-2"></i>Search
76
+ </button>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </section>
81
+
82
+ <!-- Main Content -->
83
+ <main class="container mx-auto px-4 py-8">
84
+ <!-- Filters Section -->
85
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
86
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Filter Activities</h3>
87
+
88
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
89
+ <!-- Age Range Filter -->
90
+ <div class="filter-section">
91
+ <h4 class="font-medium mb-3 text-gray-700">Age Range</h4>
92
+ <div class="flex flex-wrap gap-2">
93
+ <button class="age-bubble px-3 py-1 rounded-full border border-gray-300 text-sm">0-2</button>
94
+ <button class="age-bubble px-3 py-1 rounded-full border border-gray-300 text-sm">3-5</button>
95
+ <button class="age-bubble px-3 py-1 rounded-full border border-gray-300 text-sm selected">6-9</button>
96
+ <button class="age-bubble px-3 py-1 rounded-full border border-gray-300 text-sm">10-12</button>
97
+ <button class="age-bubble px-3 py-1 rounded-full border border-gray-300 text-sm">13+</button>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Indoor/Outdoor Filter -->
102
+ <div class="filter-section">
103
+ <h4 class="font-medium mb-3 text-gray-700">Location Type</h4>
104
+ <div class="flex gap-2">
105
+ <button class="px-4 py-2 rounded-lg border border-gray-300 active-filter">Indoor</button>
106
+ <button class="px-4 py-2 rounded-lg border border-gray-300">Outdoor</button>
107
+ <button class="px-4 py-2 rounded-lg border border-gray-300">Both</button>
108
+ </div>
109
+ </div>
110
+
111
+ <!-- Price Filter -->
112
+ <div class="filter-section">
113
+ <h4 class="font-medium mb-3 text-gray-700">Price</h4>
114
+ <div class="flex gap-2">
115
+ <button class="px-4 py-2 rounded-lg border border-gray-300 active-filter">Free</button>
116
+ <button class="px-4 py-2 rounded-lg border border-gray-300">Paid</button>
117
+ <button class="px-4 py-2 rounded-lg border border-gray-300">Any</button>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Duration Filter -->
122
+ <div class="filter-section">
123
+ <h4 class="font-medium mb-3 text-gray-700">Duration</h4>
124
+ <div class="flex gap-2">
125
+ <button class="px-4 py-2 rounded-lg border border-gray-300">Permanent</button>
126
+ <button class="px-4 py-2 rounded-lg border border-gray-300 active-filter">Temporary</button>
127
+ <button class="px-4 py-2 rounded-lg border border-gray-300">Any</button>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- Results Display Toggle -->
134
+ <div class="flex border-b mb-6">
135
+ <button id="mapTab" class="px-6 py-3 tab-active">
136
+ <i class="fas fa-map mr-2"></i>Map View
137
+ </button>
138
+ <button id="listTab" class="px-6 py-3">
139
+ <i class="fas fa-list mr-2"></i>List View
140
+ </button>
141
+ </div>
142
+
143
+ <!-- Map View -->
144
+ <div id="mapView" class="mb-8">
145
+ <div id="map" class="map-container w-full"></div>
146
+ </div>
147
+
148
+ <!-- List View (Hidden by default) -->
149
+ <div id="listView" class="hidden">
150
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
151
+ <!-- Activity Card 1 -->
152
+ <div class="activity-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
153
+ <div class="relative">
154
+ <img src="https://images.unsplash.com/photo-1577896851231-70ef18881754?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
155
+ alt="Children's Museum" class="w-full h-48 object-cover">
156
+ <div class="absolute top-2 right-2 bg-yellow-400 text-xs font-bold px-2 py-1 rounded-full">
157
+ <i class="fas fa-star mr-1"></i>4.8
158
+ </div>
159
+ <div class="absolute bottom-2 left-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">
160
+ <i class="fas fa-dollar-sign mr-1"></i>15
161
+ </div>
162
+ </div>
163
+ <div class="p-4">
164
+ <h3 class="font-bold text-lg mb-2">Discovery Children's Museum</h3>
165
+ <div class="flex items-center text-gray-600 text-sm mb-2">
166
+ <i class="fas fa-map-marker-alt mr-1"></i> 1.2 miles away
167
+ </div>
168
+ <div class="flex flex-wrap gap-1 mb-3">
169
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Indoor</span>
170
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Ages 2-12</span>
171
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Educational</span>
172
+ </div>
173
+ <p class="text-gray-700 text-sm mb-4">Interactive exhibits designed to spark curiosity and creativity in children of all ages.</p>
174
+ <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg transition">
175
+ View Details
176
+ </button>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Activity Card 2 -->
181
+ <div class="activity-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
182
+ <div class="relative">
183
+ <img src="https://images.unsplash.com/photo-1517825738774-7de9363ef735?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
184
+ alt="Nature Park" class="w-full h-48 object-cover">
185
+ <div class="absolute top-2 right-2 bg-yellow-400 text-xs font-bold px-2 py-1 rounded-full">
186
+ <i class="fas fa-star mr-1"></i>4.6
187
+ </div>
188
+ <div class="absolute bottom-2 left-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">
189
+ <i class="fas fa-dollar-sign mr-1"></i>Free
190
+ </div>
191
+ </div>
192
+ <div class="p-4">
193
+ <h3 class="font-bold text-lg mb-2">Sunshine Nature Park</h3>
194
+ <div class="flex items-center text-gray-600 text-sm mb-2">
195
+ <i class="fas fa-map-marker-alt mr-1"></i> 2.5 miles away
196
+ </div>
197
+ <div class="flex flex-wrap gap-1 mb-3">
198
+ <span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded">Outdoor</span>
199
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">All Ages</span>
200
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Nature</span>
201
+ </div>
202
+ <p class="text-gray-700 text-sm mb-4">Beautiful trails, playgrounds, and picnic areas perfect for family outings.</p>
203
+ <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg transition">
204
+ View Details
205
+ </button>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- Activity Card 3 -->
210
+ <div class="activity-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
211
+ <div class="relative">
212
+ <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
213
+ alt="Art Class" class="w-full h-48 object-cover">
214
+ <div class="absolute top-2 right-2 bg-yellow-400 text-xs font-bold px-2 py-1 rounded-full">
215
+ <i class="fas fa-star mr-1"></i>4.9
216
+ </div>
217
+ <div class="absolute bottom-2 left-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">
218
+ <i class="fas fa-dollar-sign mr-1"></i>25
219
+ </div>
220
+ </div>
221
+ <div class="p-4">
222
+ <h3 class="font-bold text-lg mb-2">Creative Kids Art Studio</h3>
223
+ <div class="flex items-center text-gray-600 text-sm mb-2">
224
+ <i class="fas fa-map-marker-alt mr-1"></i> 3.1 miles away
225
+ </div>
226
+ <div class="flex flex-wrap gap-1 mb-3">
227
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Indoor</span>
228
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Ages 5-12</span>
229
+ <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Arts & Crafts</span>
230
+ </div>
231
+ <p class="text-gray-700 text-sm mb-4">Weekly art classes that encourage creativity and self-expression in children.</p>
232
+ <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg transition">
233
+ View Details
234
+ </button>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </main>
240
+
241
+ <!-- Add Activity Modal -->
242
+ <div id="addActivityModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
243
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto">
244
+ <div class="p-6">
245
+ <div class="flex justify-between items-center mb-4">
246
+ <h3 class="text-2xl font-bold text-gray-800">Add New Activity</h3>
247
+ <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
248
+ <i class="fas fa-times text-xl"></i>
249
+ </button>
250
+ </div>
251
+
252
+ <form id="activityForm" class="space-y-4">
253
+ <div>
254
+ <label class="block text-gray-700 font-medium mb-2">Activity Name</label>
255
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
256
+ </div>
257
+
258
+ <div>
259
+ <label class="block text-gray-700 font-medium mb-2">Description</label>
260
+ <textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3"></textarea>
261
+ </div>
262
+
263
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
264
+ <div>
265
+ <label class="block text-gray-700 font-medium mb-2">Location</label>
266
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
267
+ </div>
268
+
269
+ <div>
270
+ <label class="block text-gray-700 font-medium mb-2">Price</label>
271
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
272
+ <option value="free">Free</option>
273
+ <option value="paid">Paid</option>
274
+ </select>
275
+ </div>
276
+ </div>
277
+
278
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
279
+ <div>
280
+ <label class="block text-gray-700 font-medium mb-2">Age Range</label>
281
+ <div class="flex flex-wrap gap-2">
282
+ <label class="inline-flex items-center">
283
+ <input type="checkbox" class="rounded border-gray-300 text-blue-500"> 0-2
284
+ </label>
285
+ <label class="inline-flex items-center">
286
+ <input type="checkbox" class="rounded border-gray-300 text-blue-500"> 3-5
287
+ </label>
288
+ <label class="inline-flex items-center">
289
+ <input type="checkbox" class="rounded border-gray-300 text-blue-500" checked> 6-9
290
+ </label>
291
+ <label class="inline-flex items-center">
292
+ <input type="checkbox" class="rounded border-gray-300 text-blue-500"> 10-12
293
+ </label>
294
+ <label class="inline-flex items-center">
295
+ <input type="checkbox" class="rounded border-gray-300 text-blue-500"> 13+
296
+ </label>
297
+ </div>
298
+ </div>
299
+
300
+ <div>
301
+ <label class="block text-gray-700 font-medium mb-2">Activity Type</label>
302
+ <div class="flex flex-wrap gap-2">
303
+ <label class="inline-flex items-center">
304
+ <input type="radio" name="locationType" class="rounded-full border-gray-300 text-blue-500" checked> Indoor
305
+ </label>
306
+ <label class="inline-flex items-center">
307
+ <input type="radio" name="locationType" class="rounded-full border-gray-300 text-blue-500"> Outdoor
308
+ </label>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
314
+ <div>
315
+ <label class="block text-gray-700 font-medium mb-2">Duration</label>
316
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
317
+ <option value="permanent">Permanent</option>
318
+ <option value="temporary">Temporary</option>
319
+ </select>
320
+ </div>
321
+
322
+ <div>
323
+ <label class="block text-gray-700 font-medium mb-2">Upload Images</label>
324
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center">
325
+ <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
326
+ <p class="text-gray-500">Drag & drop images here or click to browse</p>
327
+ <input type="file" class="hidden" multiple>
328
+ </div>
329
+ </div>
330
+ </div>
331
+
332
+ <div class="pt-4">
333
+ <button type="submit" class="w-full bg-green-500 hover:bg-green-600 text-white py-3 rounded-lg font-medium transition">
334
+ Submit Activity
335
+ </button>
336
+ </div>
337
+ </form>
338
+ </div>
339
+ </div>
340
+ </div>
341
+
342
+ <!-- Login Modal -->
343
+ <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
344
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-md">
345
+ <div class="p-8">
346
+ <div class="flex justify-between items-center mb-6">
347
+ <h3 class="text-2xl font-bold text-gray-800">Sign In</h3>
348
+ <button id="closeLoginModalBtn" class="text-gray-500 hover:text-gray-700">
349
+ <i class="fas fa-times text-xl"></i>
350
+ </button>
351
+ </div>
352
+
353
+ <form class="space-y-4">
354
+ <div>
355
+ <label class="block text-gray-700 font-medium mb-2">Email</label>
356
+ <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
357
+ </div>
358
+
359
+ <div>
360
+ <label class="block text-gray-700 font-medium mb-2">Password</label>
361
+ <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
362
+ </div>
363
+
364
+ <div class="flex items-center justify-between">
365
+ <label class="inline-flex items-center">
366
+ <input type="checkbox" class="rounded border-gray-300 text-blue-500"> Remember me
367
+ </label>
368
+ <a href="#" class="text-blue-500 hover:text-blue-700 text-sm">Forgot password?</a>
369
+ </div>
370
+
371
+ <div class="pt-2">
372
+ <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg font-medium transition">
373
+ Sign In
374
+ </button>
375
+ </div>
376
+
377
+ <div class="text-center text-sm text-gray-600">
378
+ Don't have an account? <a href="#" class="text-blue-500 hover:text-blue-700">Sign up</a>
379
+ </div>
380
+
381
+ <div class="relative my-4">
382
+ <div class="absolute inset-0 flex items-center">
383
+ <div class="w-full border-t border-gray-300"></div>
384
+ </div>
385
+ <div class="relative flex justify-center text-sm">
386
+ <span class="px-2 bg-white text-gray-500">Or continue with</span>
387
+ </div>
388
+ </div>
389
+
390
+ <div class="grid grid-cols-2 gap-3">
391
+ <button class="flex items-center justify-center py-2 px-4 border border-gray-300 rounded-lg hover:bg-gray-50 transition">
392
+ <i class="fab fa-google text-red-500 mr-2"></i> Google
393
+ </button>
394
+ <button class="flex items-center justify-center py-2 px-4 border border-gray-300 rounded-lg hover:bg-gray-50 transition">
395
+ <i class="fab fa-facebook text-blue-600 mr-2"></i> Facebook
396
+ </button>
397
+ </div>
398
+ </form>
399
+ </div>
400
+ </div>
401
+ </div>
402
+
403
+ <!-- Footer -->
404
+ <footer class="bg-gray-800 text-white py-8">
405
+ <div class="container mx-auto px-4">
406
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
407
+ <div>
408
+ <h4 class="text-lg font-semibold mb-4">Kidventure</h4>
409
+ <p class="text-gray-400">Helping families discover amazing activities for children since 2023.</p>
410
+ </div>
411
+ <div>
412
+ <h4 class="text-lg font-semibold mb-4">Explore</h4>
413
+ <ul class="space-y-2">
414
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Popular Activities</a></li>
415
+ <li><a href="#" class="text-gray-400 hover:text-white transition">New Additions</a></li>
416
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Seasonal Events</a></li>
417
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Educational Programs</a></li>
418
+ </ul>
419
+ </div>
420
+ <div>
421
+ <h4 class="text-lg font-semibold mb-4">Company</h4>
422
+ <ul class="space-y-2">
423
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
424
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
425
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
426
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
427
+ </ul>
428
+ </div>
429
+ <div>
430
+ <h4 class="text-lg font-semibold mb-4">Connect</h4>
431
+ <div class="flex space-x-4">
432
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f text-xl"></i></a>
433
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a>
434
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a>
435
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-pinterest text-xl"></i></a>
436
+ </div>
437
+ <div class="mt-4">
438
+ <p class="text-gray-400">Subscribe to our newsletter</p>
439
+ <div class="flex mt-2">
440
+ <input type="email" placeholder="Your email" class="px-3 py-2 rounded-l-lg text-gray-800 focus:outline-none">
441
+ <button class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded-r-lg transition">
442
+ <i class="fas fa-paper-plane"></i>
443
+ </button>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
449
+ <p>&copy; 2023 Kidventure. All rights reserved.</p>
450
+ </div>
451
+ </div>
452
+ </footer>
453
+
454
+ <script>
455
+ // Initialize map
456
+ function initMap() {
457
+ const map = new google.maps.Map(document.getElementById("map"), {
458
+ center: { lat: 40.7128, lng: -74.0060 }, // Default to New York
459
+ zoom: 12,
460
+ styles: [
461
+ {
462
+ featureType: "poi",
463
+ elementType: "labels",
464
+ stylers: [{ visibility: "off" }]
465
+ }
466
+ ]
467
+ });
468
+
469
+ // Sample markers (in a real app, these would come from your database)
470
+ const activities = [
471
+ {
472
+ name: "Discovery Children's Museum",
473
+ position: { lat: 40.7128, lng: -74.0060 },
474
+ type: "indoor",
475
+ ages: "2-12",
476
+ price: "paid",
477
+ rating: 4.8
478
+ },
479
+ {
480
+ name: "Sunshine Nature Park",
481
+ position: { lat: 40.7228, lng: -74.0160 },
482
+ type: "outdoor",
483
+ ages: "all",
484
+ price: "free",
485
+ rating: 4.6
486
+ },
487
+ {
488
+ name: "Creative Kids Art Studio",
489
+ position: { lat: 40.7028, lng: -74.0110 },
490
+ type: "indoor",
491
+ ages: "5-12",
492
+ price: "paid",
493
+ rating: 4.9
494
+ }
495
+ ];
496
+
497
+ // Add markers to map
498
+ activities.forEach(activity => {
499
+ const marker = new google.maps.Marker({
500
+ position: activity.position,
501
+ map: map,
502
+ title: activity.name,
503
+ icon: {
504
+ url: activity.type === "indoor" ?
505
+ "https://maps.google.com/mapfiles/ms/icons/blue-dot.png" :
506
+ "https://maps.google.com/mapfiles/ms/icons/green-dot.png",
507
+ scaledSize: new google.maps.Size(40, 40)
508
+ }
509
+ });
510
+
511
+ // Info window content
512
+ const contentString = `
513
+ <div class="max-w-xs">
514
+ <h3 class="font-bold text-lg">${activity.name}</h3>
515
+ <div class="flex items-center my-1">
516
+ <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-${activity.type === "indoor" ? "blue" : "green"}-100 text-${activity.type === "indoor" ? "blue" : "green"}-800 mr-2">
517
+ ${activity.type === "indoor" ? "Indoor" : "Outdoor"}
518
+ </span>
519
+ <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
520
+ Ages ${activity.ages}
521
+ </span>
522
+ </div>
523
+ <div class="flex items-center my-1">
524
+ <span class="text-yellow-500">
525
+ ${Array(Math.floor(activity.rating)).fill('<i class="fas fa-star"></i>').join('')}
526
+ ${activity.rating % 1 ? '<i class="fas fa-star-half-alt"></i>' : ''}
527
+ </span>
528
+ <span class="ml-1 text-gray-600">(${activity.rating})</span>
529
+ </div>
530
+ <p class="text-sm text-gray-700 mt-1">${activity.price === "free" ? "Free admission" : "Paid activity"}</p>
531
+ <button class="mt-2 px-3 py-1 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 transition">
532
+ View Details
533
+ </button>
534
+ </div>
535
+ `;
536
+
537
+ const infowindow = new google.maps.InfoWindow({
538
+ content: contentString
539
+ });
540
+
541
+ marker.addListener("click", () => {
542
+ infowindow.open(map, marker);
543
+ });
544
+ });
545
+ }
546
+
547
+ // Initialize the map when the page loads
548
+ document.addEventListener("DOMContentLoaded", () => {
549
+ // Note: In a real app, you would need a valid Google Maps API key
550
+ // initMap();
551
+
552
+ // Tab switching
553
+ const mapTab = document.getElementById("mapTab");
554
+ const listTab = document.getElementById("listTab");
555
+ const mapView = document.getElementById("mapView");
556
+ const listView = document.getElementById("listView");
557
+
558
+ mapTab.addEventListener("click", () => {
559
+ mapTab.classList.add("tab-active");
560
+ listTab.classList.remove("tab-active");
561
+ mapView.classList.remove("hidden");
562
+ listView.classList.add("hidden");
563
+ });
564
+
565
+ listTab.addEventListener("click", () => {
566
+ listTab.classList.add("tab-active");
567
+ mapTab.classList.remove("tab-active");
568
+ listView.classList.remove("hidden");
569
+ mapView.classList.add("hidden");
570
+ });
571
+
572
+ // Age bubble selection
573
+ const ageBubbles = document.querySelectorAll(".age-bubble");
574
+ ageBubbles.forEach(bubble => {
575
+ bubble.addEventListener("click", () => {
576
+ ageBubbles.forEach(b => b.classList.remove("selected"));
577
+ bubble.classList.add("selected");
578
+ });
579
+ });
580
+
581
+ // Filter button selection
582
+ const filterButtons = document.querySelectorAll(".filter-section button:not(.age-bubble)");
583
+ filterButtons.forEach(button => {
584
+ button.addEventListener("click", (e) => {
585
+ // For radio behavior within each filter section
586
+ const parentSection = button.closest(".filter-section");
587
+ const siblings = parentSection.querySelectorAll("button");
588
+ siblings.forEach(btn => btn.classList.remove("active-filter"));
589
+ button.classList.add("active-filter");
590
+ });
591
+ });
592
+
593
+ // Modal handling
594
+ const loginBtn = document.getElementById("loginBtn");
595
+ const loginModal = document.getElementById("loginModal");
596
+ const closeLoginModalBtn = document.getElementById("closeLoginModalBtn");
597
+
598
+ loginBtn.addEventListener("click", () => {
599
+ loginModal.classList.remove("hidden");
600
+ });
601
+
602
+ closeLoginModalBtn.addEventListener("click", () => {
603
+ loginModal.classList.add("hidden");
604
+ });
605
+
606
+ // Simulate admin login (for demo purposes)
607
+ loginBtn.addEventListener("click", () => {
608
+ // In a real app, this would be after successful authentication
609
+ setTimeout(() => {
610
+ document.getElementById("addActivityBtn").classList.remove("hidden");
611
+ }, 2000);
612
+ });
613
+
614
+ // Add activity modal
615
+ const addActivityBtn = document.getElementById("addActivityBtn");
616
+ const addActivityModal = document.getElementById("addActivityModal");
617
+ const closeModalBtn = document.getElementById("closeModalBtn");
618
+
619
+ addActivityBtn.addEventListener("click", () => {
620
+ addActivityModal.classList.remove("hidden");
621
+ });
622
+
623
+ closeModalBtn.addEventListener("click", () => {
624
+ addActivityModal.classList.add("hidden");
625
+ });
626
+
627
+ // File upload interaction
628
+ const fileUpload = document.querySelector('.border-dashed input[type="file"]');
629
+ const uploadArea = document.querySelector('.border-dashed');
630
+
631
+ uploadArea.addEventListener('click', () => {
632
+ fileUpload.click();
633
+ });
634
+
635
+ fileUpload.addEventListener('change', (e) => {
636
+ if (e.target.files.length > 0) {
637
+ uploadArea.innerHTML = `
638
+ <i class="fas fa-check-circle text-3xl text-green-500 mb-2"></i>
639
+ <p class="text-gray-800">${e.target.files.length} file(s) selected</p>
640
+ `;
641
+ }
642
+ });
643
+
644
+ // Drag and drop for file upload
645
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
646
+ uploadArea.addEventListener(eventName, preventDefaults, false);
647
+ });
648
+
649
+ function preventDefaults(e) {
650
+ e.preventDefault();
651
+ e.stopPropagation();
652
+ }
653
+
654
+ ['dragenter', 'dragover'].forEach(eventName => {
655
+ uploadArea.addEventListener(eventName, highlight, false);
656
+ });
657
+
658
+ ['dragleave', 'drop'].forEach(eventName => {
659
+ uploadArea.addEventListener(eventName, unhighlight, false);
660
+ });
661
+
662
+ function highlight() {
663
+ uploadArea.classList.add('bg-blue-50', 'border-blue-300');
664
+ }
665
+
666
+ function unhighlight() {
667
+ uploadArea.classList.remove('bg-blue-50', 'border-blue-300');
668
+ }
669
+
670
+ uploadArea.addEventListener('drop', handleDrop, false);
671
+
672
+ function handleDrop(e) {
673
+ const dt = e.dataTransfer;
674
+ const files = dt.files;
675
+ fileUpload.files = files;
676
+
677
+ if (files.length > 0) {
678
+ uploadArea.innerHTML = `
679
+ <i class="fas fa-check-circle text-3xl text-green-500 mb-2"></i>
680
+ <p class="text-gray-800">${files.length} file(s) selected</p>
681
+ `;
682
+ }
683
+ }
684
+ });
685
+ </script>
686
+ <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=vi-c/kid-actvities" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
687
+ </html>