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>