Hugging Face's logo

Spaces:
vi-c
/
kid-actvities
Running

App Files Community
kid-actvities / index.html
vi-c's picture
vi-c
Add 1 files
bf7a140 verified
raw
history blame contribute delete
46.1 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kidventure - Find Kids Activities Near You</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
<style>
.map-container {
height: 500px;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.activity-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}
.filter-section {
transition: all 0.3s ease;
}
.active-filter {
background-color: #3b82f6;
color: white;
}
.age-bubble {
transition: all 0.2s ease;
}
.age-bubble:hover {
transform: scale(1.05);
}
.age-bubble.selected {
background-color: #3b82f6;
color: white;
}
.tab-active {
border-bottom: 3px solid #3b82f6;
color: #3b82f6;
font-weight: 600;
}
.gm-style .gm-style-iw-c {
padding: 0 !important;
max-width: 300px !important;
}
.gm-style .gm-style-iw-d {
overflow: hidden !important;
}
.gm-style .gm-style-iw-t::after {
background: none !important;
}
.custom-info-window {
padding: 12px;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Header -->
<header class="bg-white shadow-sm">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-child-reaching text-3xl text-blue-500"></i>
<h1 class="text-2xl font-bold text-gray-800">Kidventure</h1>
</div>
<div class="flex items-center space-x-4">
<button id="loginBtn" class="px-4 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition">
Sign In
</button>
<button id="addActivityBtn" class="px-4 py-2 rounded-lg bg-green-500 text-white hover:bg-green-600 transition hidden">
<i class="fas fa-plus mr-2"></i>Add Activity
</button>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="bg-gradient-to-r from-blue-400 to-purple-500 text-white py-12">
<div class="container mx-auto px-4 text-center">
<h2 class="text-4xl font-bold mb-4">Find Amazing Activities for Kids</h2>
<p class="text-xl mb-8">Discover fun, educational, and exciting things to do with children in your area</p>
<!-- Search Bar -->
<div class="max-w-3xl mx-auto bg-white rounded-lg shadow-lg p-2">
<div class="flex">
<input type="text" placeholder="Search by location or activity..."
class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-800">
<button class="bg-blue-500 text-white px-6 py-3 rounded-r-lg hover:bg-blue-600 transition">
<i class="fas fa-search mr-2"></i>Search
</button>
</div>
</div>
</div>
</section>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
<!-- Filters Section -->
<div class="bg-white rounded-xl shadow-md p-6 mb-8">
<h3 class="text-xl font-semibold mb-4 text-gray-800">Filter Activities</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Age Range Filter -->
<div class="filter-section">
<h4 class="font-medium mb-3 text-gray-700">Age Range</h4>
<div class="flex flex-wrap gap-2">
<button class="age-bubble px-3 py-1 rounded-full border border-gray-300 text-sm">0-2</button>
<button class="age-bubble px-3 py-1 rounded-full border border-gray-300 text-sm">3-5</button>
<button class="age-bubble px-3 py-1 rounded-full border border-gray-300 text-sm selected">6-9</button>
<button class="age-bubble px-3 py-1 rounded-full border border-gray-300 text-sm">10-12</button>
<button class="age-bubble px-3 py-1 rounded-full border border-gray-300 text-sm">13+</button>
</div>
</div>
<!-- Indoor/Outdoor Filter -->
<div class="filter-section">
<h4 class="font-medium mb-3 text-gray-700">Location Type</h4>
<div class="flex gap-2">
<button class="px-4 py-2 rounded-lg border border-gray-300 active-filter">Indoor</button>
<button class="px-4 py-2 rounded-lg border border-gray-300">Outdoor</button>
<button class="px-4 py-2 rounded-lg border border-gray-300">Both</button>
</div>
</div>
<!-- Price Filter -->
<div class="filter-section">
<h4 class="font-medium mb-3 text-gray-700">Price</h4>
<div class="flex gap-2">
<button class="px-4 py-2 rounded-lg border border-gray-300 active-filter">Free</button>
<button class="px-4 py-2 rounded-lg border border-gray-300">Paid</button>
<button class="px-4 py-2 rounded-lg border border-gray-300">Any</button>
</div>
</div>
<!-- Duration Filter -->
<div class="filter-section">
<h4 class="font-medium mb-3 text-gray-700">Duration</h4>
<div class="flex gap-2">
<button class="px-4 py-2 rounded-lg border border-gray-300">Permanent</button>
<button class="px-4 py-2 rounded-lg border border-gray-300 active-filter">Temporary</button>
<button class="px-4 py-2 rounded-lg border border-gray-300">Any</button>
</div>
</div>
</div>
</div>
<!-- Results Display Toggle -->
<div class="flex border-b mb-6">
<button id="mapTab" class="px-6 py-3 tab-active">
<i class="fas fa-map mr-2"></i>Map View
</button>
<button id="listTab" class="px-6 py-3">
<i class="fas fa-list mr-2"></i>List View
</button>
</div>
<!-- Map View -->
<div id="mapView" class="mb-8">
<div id="map" class="map-container w-full"></div>
<div class="mt-4 flex justify-between items-center">
<div class="flex items-center space-x-4">
<div class="flex items-center">
<div class="w-4 h-4 rounded-full bg-blue-500 mr-2"></div>
<span class="text-sm">Indoor Activities</span>
</div>
<div class="flex items-center">
<div class="w-4 h-4 rounded-full bg-green-500 mr-2"></div>
<span class="text-sm">Outdoor Activities</span>
</div>
</div>
<button id="locateMeBtn" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
<i class="fas fa-location-arrow mr-2"></i>Find Near Me
</button>
</div>
</div>
<!-- List View (Hidden by default) -->
<div id="listView" class="hidden">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Activity Card 1 -->
<div class="activity-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
<div class="relative">
<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"
alt="Children's Museum" class="w-full h-48 object-cover">
<div class="absolute top-2 right-2 bg-yellow-400 text-xs font-bold px-2 py-1 rounded-full">
<i class="fas fa-star mr-1"></i>4.8
</div>
<div class="absolute bottom-2 left-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">
<i class="fas fa-dollar-sign mr-1"></i>15
</div>
</div>
<div class="p-4">
<h3 class="font-bold text-lg mb-2">Discovery Children's Museum</h3>
<div class="flex items-center text-gray-600 text-sm mb-2">
<i class="fas fa-map-marker-alt mr-1"></i> 1.2 miles away
</div>
<div class="flex flex-wrap gap-1 mb-3">
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Indoor</span>
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Ages 2-12</span>
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Educational</span>
</div>
<p class="text-gray-700 text-sm mb-4">Interactive exhibits designed to spark curiosity and creativity in children of all ages.</p>
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg transition">
View Details
</button>
</div>
</div>
<!-- Activity Card 2 -->
<div class="activity-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
<div class="relative">
<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"
alt="Nature Park" class="w-full h-48 object-cover">
<div class="absolute top-2 right-2 bg-yellow-400 text-xs font-bold px-2 py-1 rounded-full">
<i class="fas fa-star mr-1"></i>4.6
</div>
<div class="absolute bottom-2 left-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">
<i class="fas fa-dollar-sign mr-1"></i>Free
</div>
</div>
<div class="p-4">
<h3 class="font-bold text-lg mb-2">Sunshine Nature Park</h3>
<div class="flex items-center text-gray-600 text-sm mb-2">
<i class="fas fa-map-marker-alt mr-1"></i> 2.5 miles away
</div>
<div class="flex flex-wrap gap-1 mb-3">
<span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded">Outdoor</span>
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">All Ages</span>
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Nature</span>
</div>
<p class="text-gray-700 text-sm mb-4">Beautiful trails, playgrounds, and picnic areas perfect for family outings.</p>
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg transition">
View Details
</button>
</div>
</div>
<!-- Activity Card 3 -->
<div class="activity-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
<div class="relative">
<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"
alt="Art Class" class="w-full h-48 object-cover">
<div class="absolute top-2 right-2 bg-yellow-400 text-xs font-bold px-2 py-1 rounded-full">
<i class="fas fa-star mr-1"></i>4.9
</div>
<div class="absolute bottom-2 left-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">
<i class="fas fa-dollar-sign mr-1"></i>25
</div>
</div>
<div class="p-4">
<h3 class="font-bold text-lg mb-2">Creative Kids Art Studio</h3>
<div class="flex items-center text-gray-600 text-sm mb-2">
<i class="fas fa-map-marker-alt mr-1"></i> 3.1 miles away
</div>
<div class="flex flex-wrap gap-1 mb-3">
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Indoor</span>
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Ages 5-12</span>
<span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Arts & Crafts</span>
</div>
<p class="text-gray-700 text-sm mb-4">Weekly art classes that encourage creativity and self-expression in children.</p>
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg transition">
View Details
</button>
</div>
</div>
</div>
</div>
</main>
<!-- Add Activity Modal -->
<div id="addActivityModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-2xl font-bold text-gray-800">Add New Activity</h3>
<button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times text-xl"></i>
</button>
</div>
<form id="activityForm" class="space-y-4">
<div>
<label class="block text-gray-700 font-medium mb-2">Activity Name</label>
<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">
</div>
<div>
<label class="block text-gray-700 font-medium mb-2">Description</label>
<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>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-gray-700 font-medium mb-2">Location</label>
<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">
</div>
<div>
<label class="block text-gray-700 font-medium mb-2">Price</label>
<select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="free">Free</option>
<option value="paid">Paid</option>
</select>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-gray-700 font-medium mb-2">Age Range</label>
<div class="flex flex-wrap gap-2">
<label class="inline-flex items-center">
<input type="checkbox" class="rounded border-gray-300 text-blue-500"> 0-2
</label>
<label class="inline-flex items-center">
<input type="checkbox" class="rounded border-gray-300 text-blue-500"> 3-5
</label>
<label class="inline-flex items-center">
<input type="checkbox" class="rounded border-gray-300 text-blue-500" checked> 6-9
</label>
<label class="inline-flex items-center">
<input type="checkbox" class="rounded border-gray-300 text-blue-500"> 10-12
</label>
<label class="inline-flex items-center">
<input type="checkbox" class="rounded border-gray-300 text-blue-500"> 13+
</label>
</div>
</div>
<div>
<label class="block text-gray-700 font-medium mb-2">Activity Type</label>
<div class="flex flex-wrap gap-2">
<label class="inline-flex items-center">
<input type="radio" name="locationType" class="rounded-full border-gray-300 text-blue-500" checked> Indoor
</label>
<label class="inline-flex items-center">
<input type="radio" name="locationType" class="rounded-full border-gray-300 text-blue-500"> Outdoor
</label>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-gray-700 font-medium mb-2">Duration</label>
<select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="permanent">Permanent</option>
<option value="temporary">Temporary</option>
</select>
</div>
<div>
<label class="block text-gray-700 font-medium mb-2">Upload Images</label>
<div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center">
<i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
<p class="text-gray-500">Drag & drop images here or click to browse</p>
<input type="file" class="hidden" multiple>
</div>
</div>
</div>
<div class="pt-4">
<button type="submit" class="w-full bg-green-500 hover:bg-green-600 text-white py-3 rounded-lg font-medium transition">
Submit Activity
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Login Modal -->
<div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl shadow-xl w-full max-w-md">
<div class="p-8">
<div class="flex justify-between items-center mb-6">
<h3 class="text-2xl font-bold text-gray-800">Sign In</h3>
<button id="closeLoginModalBtn" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times text-xl"></i>
</button>
</div>
<form class="space-y-4">
<div>
<label class="block text-gray-700 font-medium mb-2">Email</label>
<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">
</div>
<div>
<label class="block text-gray-700 font-medium mb-2">Password</label>
<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">
</div>
<div class="flex items-center justify-between">
<label class="inline-flex items-center">
<input type="checkbox" class="rounded border-gray-300 text-blue-500"> Remember me
</label>
<a href="#" class="text-blue-500 hover:text-blue-700 text-sm">Forgot password?</a>
</div>
<div class="pt-2">
<button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg font-medium transition">
Sign In
</button>
</div>
<div class="text-center text-sm text-gray-600">
Don't have an account? <a href="#" class="text-blue-500 hover:text-blue-700">Sign up</a>
</div>
<div class="relative my-4">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white text-gray-500">Or continue with</span>
</div>
</div>
<div class="grid grid-cols-2 gap-3">
<button class="flex items-center justify-center py-2 px-4 border border-gray-300 rounded-lg hover:bg-gray-50 transition">
<i class="fab fa-google text-red-500 mr-2"></i> Google
</button>
<button class="flex items-center justify-center py-2 px-4 border border-gray-300 rounded-lg hover:bg-gray-50 transition">
<i class="fab fa-facebook text-blue-600 mr-2"></i> Facebook
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h4 class="text-lg font-semibold mb-4">Kidventure</h4>
<p class="text-gray-400">Helping families discover amazing activities for children since 2023.</p>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Explore</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Popular Activities</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">New Additions</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Seasonal Events</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Educational Programs</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Connect</h4>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-pinterest text-xl"></i></a>
</div>
<div class="mt-4">
<p class="text-gray-400">Subscribe to our newsletter</p>
<div class="flex mt-2">
<input type="email" placeholder="Your email" class="px-3 py-2 rounded-l-lg text-gray-800 focus:outline-none">
<button class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded-r-lg transition">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
<p>&copy; 2023 Kidventure. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Initialize map with sample data
function initMap() {
// Default to New York coordinates
const defaultLocation = { lat: 40.7128, lng: -74.0060 };
// Create map
const map = new google.maps.Map(document.getElementById("map"), {
center: defaultLocation,
zoom: 12,
styles: [
{
featureType: "poi",
elementType: "labels",
stylers: [{ visibility: "off" }]
},
{
featureType: "transit",
elementType: "labels.icon",
stylers: [{ visibility: "off" }]
}
]
});
// Sample activities data
const activities = [
{
name: "Discovery Children's Museum",
position: { lat: 40.7128, lng: -74.0060 },
type: "indoor",
ages: "2-12",
price: "paid",
rating: 4.8,
priceAmount: "$15",
description: "Interactive exhibits designed to spark curiosity and creativity in children of all ages.",
image: "https://images.unsplash.com/photo-1577896851231-70ef18881754?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
tags: ["Educational", "Hands-on", "STEM"]
},
{
name: "Sunshine Nature Park",
position: { lat: 40.7228, lng: -74.0160 },
type: "outdoor",
ages: "all",
price: "free",
rating: 4.6,
priceAmount: "Free",
description: "Beautiful trails, playgrounds, and picnic areas perfect for family outings.",
image: "https://images.unsplash.com/photo-1517825738774-7de9363ef735?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
tags: ["Nature", "Playground", "Picnic"]
},
{
name: "Creative Kids Art Studio",
position: { lat: 40.7028, lng: -74.0110 },
type: "indoor",
ages: "5-12",
price: "paid",
rating: 4.9,
priceAmount: "$25",
description: "Weekly art classes that encourage creativity and self-expression in children.",
image: "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
tags: ["Arts & Crafts", "Painting", "Creative"]
},
{
name: "Little Explorers Science Center",
position: { lat: 40.7178, lng: -74.0030 },
type: "indoor",
ages: "3-10",
price: "paid",
rating: 4.7,
priceAmount: "$18",
description: "Hands-on science experiments and demonstrations for young curious minds.",
image: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
tags: ["Science", "Experiments", "Learning"]
},
{
name: "Adventure Playground",
position: { lat: 40.7078, lng: -74.0210 },
type: "outdoor",
ages: "4-12",
price: "free",
rating: 4.5,
priceAmount: "Free",
description: "Unique playground with natural elements and creative play structures.",
image: "https://images.unsplash.com/photo-1565992441121-4367c2967103?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
tags: ["Playground", "Adventure", "Outdoor"]
}
];
// Add markers to map
activities.forEach(activity => {
const marker = new google.maps.Marker({
position: activity.position,
map: map,
title: activity.name,
icon: {
url: activity.type === "indoor" ?
"https://maps.google.com/mapfiles/ms/icons/blue-dot.png" :
"https://maps.google.com/mapfiles/ms/icons/green-dot.png",
scaledSize: new google.maps.Size(40, 40)
}
});
// Info window content
const contentString = `
<div class="custom-info-window">
<div class="flex items-start">
<img src="${activity.image}" alt="${activity.name}" class="w-24 h-24 object-cover rounded-lg mr-3">
<div>
<h3 class="font-bold text-lg">${activity.name}</h3>
<div class="flex items-center my-1">
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
activity.type === "indoor" ? "bg-blue-100 text-blue-800" : "bg-green-100 text-green-800"
} mr-2">
${activity.type === "indoor" ? "Indoor" : "Outdoor"}
</span>
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
Ages ${activity.ages}
</span>
</div>
<div class="flex items-center my-1">
<span class="text-yellow-500">
${Array(Math.floor(activity.rating)).fill('<i class="fas fa-star"></i>').join('')}
${activity.rating % 1 ? '<i class="fas fa-star-half-alt"></i>' : ''}
</span>
<span class="ml-1 text-gray-600">(${activity.rating})</span>
</div>
<p class="text-sm text-gray-700 mt-1">${activity.price === "free" ? "Free admission" : "Price: " + activity.priceAmount}</p>
</div>
</div>
<div class="mt-2">
<p class="text-sm text-gray-700">${activity.description}</p>
<div class="flex flex-wrap gap-1 mt-2">
${activity.tags.map(tag => `<span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">${tag}</span>`).join('')}
</div>
</div>
<button class="w-full mt-3 px-3 py-2 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 transition">
View Details & Directions
</button>
</div>
`;
const infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener("click", () => {
// Close any open info windows
if (window.currentInfoWindow) {
window.currentInfoWindow.close();
}
window.currentInfoWindow = infowindow;
infowindow.open(map, marker);
});
});
// Try to get user's current location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
const userLocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
// Add user location marker
new google.maps.Marker({
position: userLocation,
map: map,
title: "Your Location",
icon: {
url: "https://maps.google.com/mapfiles/ms/icons/red-dot.png",
scaledSize: new google.maps.Size(32, 32)
}
});
// Center map on user location
map.setCenter(userLocation);
map.setZoom(14);
},
() => {
// If geolocation fails, use default location
console.log("Geolocation failed, using default location");
}
);
}
// Locate me button
document.getElementById('locateMeBtn').addEventListener('click', () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
const userLocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
// Pan to user location
map.panTo(userLocation);
map.setZoom(14);
// Add or update user location marker
if (window.userLocationMarker) {
window.userLocationMarker.setPosition(userLocation);
} else {
window.userLocationMarker = new google.maps.Marker({
position: userLocation,
map: map,
title: "Your Location",
icon: {
url: "https://maps.google.com/mapfiles/ms/icons/red-dot.png",
scaledSize: new google.maps.Size(32, 32)
}
});
}
},
() => {
alert("Unable to get your location. Please check your browser permissions.");
}
);
} else {
alert("Geolocation is not supported by your browser.");
}
});
}
// Initialize the map when the page loads
document.addEventListener("DOMContentLoaded", () => {
// Note: In a real app, you would need a valid Google Maps API key
// For demo purposes, we'll simulate the map initialization
// initMap();
// Show a placeholder for the map since we don't have an API key
const mapContainer = document.getElementById('map');
mapContainer.innerHTML = `
<div class="w-full h-full bg-gray-200 rounded-xl flex items-center justify-center">
<div class="text-center p-6">
<i class="fas fa-map-marked-alt text-5xl text-blue-500 mb-4"></i>
<h3 class="text-xl font-bold text-gray-700 mb-2">Interactive Map</h3>
<p class="text-gray-600 mb-4">With a valid Google Maps API key, this would display an interactive map with activity locations.</p>
<div class="flex justify-center space-x-4">
<div class="flex items-center">
<div class="w-4 h-4 rounded-full bg-blue-500 mr-2"></div>
<span class="text-sm">Indoor</span>
</div>
<div class="flex items-center">
<div class="w-4 h-4 rounded-full bg-green-500 mr-2"></div>
<span class="text-sm">Outdoor</span>
</div>
</div>
</div>
</div>
`;
// Tab switching
const mapTab = document.getElementById("mapTab");
const listTab = document.getElementById("listTab");
const mapView = document.getElementById("mapView");
const listView = document.getElementById("listView");
mapTab.addEventListener("click", () => {
mapTab.classList.add("tab-active");
listTab.classList.remove("tab-active");
mapView.classList.remove("hidden");
listView.classList.add("hidden");
});
listTab.addEventListener("click", () => {
listTab.classList.add("tab-active");
mapTab.classList.remove("tab-active");
listView.classList.remove("hidden");
mapView.classList.add("hidden");
});
// Age bubble selection
const ageBubbles = document.querySelectorAll(".age-bubble");
ageBubbles.forEach(bubble => {
bubble.addEventListener("click", () => {
ageBubbles.forEach(b => b.classList.remove("selected"));
bubble.classList.add("selected");
});
});
// Filter button selection
const filterButtons = document.querySelectorAll(".filter-section button:not(.age-bubble)");
filterButtons.forEach(button => {
button.addEventListener("click", (e) => {
// For radio behavior within each filter section
const parentSection = button.closest(".filter-section");
const siblings = parentSection.querySelectorAll("button");
siblings.forEach(btn => btn.classList.remove("active-filter"));
button.classList.add("active-filter");
});
});
// Modal handling
const loginBtn = document.getElementById("loginBtn");
const loginModal = document.getElementById("loginModal");
const closeLoginModalBtn = document.getElementById("closeLoginModalBtn");
loginBtn.addEventListener("click", () => {
loginModal.classList.remove("hidden");
});
closeLoginModalBtn.addEventListener("click", () => {
loginModal.classList.add("hidden");
});
// Simulate admin login (for demo purposes)
loginBtn.addEventListener("click", () => {
// In a real app, this would be after successful authentication
setTimeout(() => {
document.getElementById("addActivityBtn").classList.remove("hidden");
}, 2000);
});
// Add activity modal
const addActivityBtn = document.getElementById("addActivityBtn");
const addActivityModal = document.getElementById("addActivityModal");
const closeModalBtn = document.getElementById("closeModalBtn");
addActivityBtn.addEventListener("click", () => {
addActivityModal.classList.remove("hidden");
});
closeModalBtn.addEventListener("click", () => {
addActivityModal.classList.add("hidden");
});
// File upload interaction
const fileUpload = document.querySelector('.border-dashed input[type="file"]');
const uploadArea = document.querySelector('.border-dashed');
uploadArea.addEventListener('click', () => {
fileUpload.click();
});
fileUpload.addEventListener('change', (e) => {
if (e.target.files.length > 0) {
uploadArea.innerHTML = `
<i class="fas fa-check-circle text-3xl text-green-500 mb-2"></i>
<p class="text-gray-800">${e.target.files.length} file(s) selected</p>
`;
}
});
// Drag and drop for file upload
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
uploadArea.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
['dragenter', 'dragover'].forEach(eventName => {
uploadArea.addEventListener(eventName, highlight, false);
});
['dragleave', 'drop'].forEach(eventName => {
uploadArea.addEventListener(eventName, unhighlight, false);
});
function highlight() {
uploadArea.classList.add('bg-blue-50', 'border-blue-300');
}
function unhighlight() {
uploadArea.classList.remove('bg-blue-50', 'border-blue-300');
}
uploadArea.addEventListener('drop', handleDrop, false);
function handleDrop(e) {
const dt = e.dataTransfer;
const files = dt.files;
fileUpload.files = files;
if (files.length > 0) {
uploadArea.innerHTML = `
<i class="fas fa-check-circle text-3xl text-green-500 mb-2"></i>
<p class="text-gray-800">${files.length} file(s) selected</p>
`;
}
}
});
</script>
<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>
</html>