Spaces:
Running
Running
Add 2 files
Browse files- README.md +6 -4
- index.html +687 -19
README.md
CHANGED
@@ -1,10 +1,12 @@
|
|
1 |
---
|
2 |
-
title:
|
3 |
-
emoji:
|
4 |
colorFrom: green
|
5 |
-
colorTo:
|
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 |
-
<!
|
2 |
-
<html>
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>© 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>
|