| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Baby Adventures Perth | April 17-21, 2025</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"> |
| |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" |
| integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" |
| crossorigin=""/> |
|
|
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Short+Stack&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #fef6f6; |
| } |
| |
| .baby-font { |
| font-family: 'Short Stack', cursive; |
| } |
| |
| .activity-card { |
| transition: all 0.3s ease; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .activity-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); |
| } |
| |
| .sensory-bg { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); } |
| .nature-bg { background: linear-gradient(135deg, #e0f7fa 0%, #80deea 100%); } |
| .library-bg { background: linear-gradient(135deg, #fff8e1 0%, #ffe082 100%); } |
| .festival-bg { background: linear-gradient(135deg, #f3e5f5 0%, #ce93d8 100%); } |
| .park-bg { background: linear-gradient(135deg, #e8f5e9 0%, #a5d6a7 100%); } |
| |
| .tab-active { |
| border-bottom: 3px solid #f9a8d4; |
| color: #ec4899; |
| font-weight: 600; |
| } |
| |
| .animated-bg { |
| animation: gradient 15s ease infinite; |
| background-size: 400% 400%; |
| background-image: linear-gradient(-45deg, #fbc2eb, #a6c1ee, #fbc2eb, #a6c1ee); |
| } |
| |
| @keyframes gradient { |
| 0% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
| |
| .baby-icon { |
| font-size: 1.2rem; |
| color: #ec4899; |
| } |
| |
| .focal-image { |
| max-width: 500px; |
| width: 90%; |
| margin: 1.5rem auto; |
| border-radius: 0.75rem; |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); |
| } |
| |
| |
| #map { |
| height: 400px; |
| border-radius: 0 0 0.75rem 0.75rem; |
| } |
| .leaflet-popup-content-wrapper { |
| border-radius: 8px; |
| } |
| .leaflet-popup-content { |
| font-family: 'Poppins', sans-serif; |
| font-size: 0.9rem; |
| line-height: 1.4; |
| } |
| .leaflet-popup-content b { |
| font-weight: 600; |
| color: #db2777; |
| } |
| </style> |
| </head> |
| <body> |
| <header class="animated-bg text-white py-6"> |
| <div class="container mx-auto px-4"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <h1 class="text-3xl md:text-4xl font-bold baby-font">Baby Adventures Perth</h1> |
| <p class="text-lg mt-1">April 17-21, 2025</p> |
| </div> |
| <nav class="hidden md:flex space-x-6"> |
| <a href="#" class="hover:text-pink-200 transition">Home</a> |
| <a href="#mapSection" class="hover:text-pink-200 transition">Map</a> <a href="#tipsSection" class="hover:text-pink-200 transition">Tips</a> </nav> |
| <div class="hidden md:block"> |
| <i class="fas fa-baby text-4xl opacity-80"></i> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| <main class="container mx-auto px-4 py-8"> |
| <section class="mb-12 text-center"> |
| <div class="max-w-3xl mx-auto"> |
| <h2 class="text-2xl md:text-3xl font-bold text-pink-600 mb-4 baby-font">Best Activities for Your 6-Month-Old</h2> |
| |
| <img |
| src="WhatsApp Image 2025-04-17 at 11.01.16_f6618ce9.jpg" |
| alt="Baby playing with colorful sensory toys on a mat" |
| class="focal-image" |
| > |
| <p class="text-gray-700 mb-6 mt-6">Perth offers wonderful gentle, engaging activities perfect for your little one. We've curated the best sensory experiences, interactive play, and relaxed environments for families with young babies.</p> |
| <div class="flex justify-center space-x-2 flex-wrap gap-2"> |
| <span class="px-3 py-1 bg-pink-100 text-pink-800 rounded-full text-sm flex items-center"> |
| <i class="fas fa-baby-carriage mr-1 baby-icon"></i> Sensory Play |
| </span> |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm flex items-center"> |
| <i class="fas fa-book mr-1 baby-icon" style="color: #3b82f6;"></i> Story Time |
| </span> |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm flex items-center"> |
| <i class="fas fa-tree mr-1 baby-icon" style="color: #10b981;"></i> Nature |
| </span> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="mb-8 overflow-x-auto"> |
| <div class="flex space-x-1 sm:space-x-4 pb-2 border-b justify-center"> |
| <button onclick="filterActivities('all', this)" class="tab-button px-3 sm:px-4 py-2 text-gray-600 font-medium whitespace-nowrap tab-active">All</button> |
| <button onclick="filterActivities('library', this)" class="tab-button px-3 sm:px-4 py-2 text-gray-600 font-medium whitespace-nowrap"> |
| <i class="fas fa-book mr-1 sm:mr-2"></i><span class="hidden sm:inline">Library</span> |
| </button> |
| <button onclick="filterActivities('outdoor', this)" class="tab-button px-3 sm:px-4 py-2 text-gray-600 font-medium whitespace-nowrap"> |
| <i class="fas fa-tree mr-1 sm:mr-2"></i><span class="hidden sm:inline">Outdoor</span> |
| </button> |
| <button onclick="filterActivities('festival', this)" class="tab-button px-3 sm:px-4 py-2 text-gray-600 font-medium whitespace-nowrap"> |
| <i class="fas fa-music mr-1 sm:mr-2"></i><span class="hidden sm:inline">Festivals</span> |
| </button> |
| <button onclick="filterActivities('sensory', this)" class="tab-button px-3 sm:px-4 py-2 text-gray-600 font-medium whitespace-nowrap"> |
| <i class="fas fa-hand-holding-heart mr-1 sm:mr-2"></i><span class="hidden sm:inline">Sensory</span> |
| </button> |
| <button onclick="filterActivities('park', this)" class="tab-button px-3 sm:px-4 py-2 text-gray-600 font-medium whitespace-nowrap"> |
| <i class="fas fa-parking mr-1 sm:mr-2"></i><span class="hidden sm:inline">Parks</span> |
| </button> |
| </div> |
| </section> |
|
|
| <section id="activitiesGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12"> |
| <div class="activity-card library-bg rounded-xl p-6" data-category="library" data-url="https://vincent.wa.gov.au/library"> |
| <div class="flex justify-between items-start mb-3"> |
| <span class="px-3 py-1 bg-white text-yellow-700 rounded-full text-sm">Library</span> |
| <span class="text-sm bg-white px-2 py-1 rounded-full"> |
| <i class="fas fa-clock mr-1"></i> 10:00 AM |
| </span> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Baby Rhyme Time</h3> |
| <p class="text-gray-700 mb-4 flex-grow">Interactive 20-minute sessions with songs, rhymes, and movements to stimulate your baby's development.</p> |
| <div class="flex items-center text-sm mb-3"> |
| <i class="fas fa-map-marker-alt mr-2 text-gray-600"></i> |
| <span>City of Vincent Library</span> |
| </div> |
| <div class="flex items-center text-sm mb-4"> |
| <i class="fas fa-calendar-day mr-2 text-gray-600"></i> |
| <span>Monday, April 21</span> |
| </div> |
| <button class="modal-trigger mt-auto w-full bg-pink-500 hover:bg-pink-600 text-white py-2 rounded-lg transition flex items-center justify-center"> |
| <i class="fas fa-info-circle mr-2"></i> More Details |
| </button> |
| </div> |
|
|
| <div class="activity-card nature-bg rounded-xl p-6" data-category="outdoor park" data-url="https://www.bgpa.wa.gov.au/kings-park/events/walks-and-talks/stories-in-the-park"> |
| <div class="flex justify-between items-start mb-3"> |
| <span class="px-3 py-1 bg-white text-blue-700 rounded-full text-sm">Outdoor / Park</span> |
| <span class="text-sm bg-white px-2 py-1 rounded-full"> |
| <i class="fas fa-clock mr-1"></i> 10:00 AM |
| </span> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Stories in the Park</h3> |
| <p class="text-gray-700 mb-4 flex-grow">Gentle outdoor storytelling in the beautiful setting of Kings Park. Perfect for morning fresh air.</p> |
| <div class="flex items-center text-sm mb-3"> |
| <i class="fas fa-map-marker-alt mr-2 text-gray-600"></i> |
| <span>Kings Park</span> |
| </div> |
| <div class="flex items-center text-sm mb-4"> |
| <i class="fas fa-calendar-day mr-2 text-gray-600"></i> |
| <span>Select dates</span> |
| </div> |
| <button class="modal-trigger mt-auto w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg transition flex items-center justify-center"> |
| <i class="fas fa-info-circle mr-2"></i> More Details |
| </button> |
| </div> |
|
|
| <div class="activity-card festival-bg rounded-xl p-6" data-category="festival library" data-url="#"> |
| <div class="flex justify-between items-start mb-3"> |
| <span class="px-3 py-1 bg-white text-purple-700 rounded-full text-sm">Festival / Library</span> |
| <span class="text-sm bg-white px-2 py-1 rounded-full"> |
| <i class="fas fa-clock mr-1"></i> 11:30 AM |
| </span> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Ballerina Bunny's Easter Show</h3> |
| <p class="text-gray-700 mb-4 flex-grow">Soft music, puppet interactions and visual stimuli perfect for young infants.</p> |
| <div class="flex items-center text-sm mb-3"> |
| <i class="fas fa-map-marker-alt mr-2 text-gray-600"></i> |
| <span>City of Perth Library</span> |
| </div> |
| <div class="flex items-center text-sm mb-4"> |
| <i class="fas fa-calendar-day mr-2 text-gray-600"></i> |
| <span>Thursday, April 17</span> |
| </div> |
| <button class="modal-trigger mt-auto w-full bg-purple-500 hover:bg-purple-600 text-white py-2 rounded-lg transition flex items-center justify-center"> |
| <i class="fas fa-info-circle mr-2"></i> Details / Book |
| </button> |
| </div> |
|
|
| <div class="activity-card park-bg rounded-xl p-6" data-category="park outdoor sensory" data-url="https://www.bgpa.wa.gov.au/kings-park/area/rio-tinto-naturescape"> |
| <div class="flex justify-between items-start mb-3"> |
| <span class="px-3 py-1 bg-white text-green-700 rounded-full text-sm">Park / Outdoor</span> |
| <span class="text-sm bg-white px-2 py-1 rounded-full"> |
| <i class="fas fa-clock mr-1"></i> All Day |
| </span> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Rio Tinto Naturescape</h3> |
| <p class="text-gray-700 mb-4 flex-grow">Nature play space with water features, bush trails and shaded picnic areas perfect for families.</p> |
| <div class="flex items-center text-sm mb-3"> |
| <i class="fas fa-map-marker-alt mr-2 text-gray-600"></i> |
| <span>Kings Park (Naturescape)</span> |
| </div> |
| <div class="flex items-center text-sm mb-4"> |
| <i class="fas fa-calendar-day mr-2 text-gray-600"></i> |
| <span>Daily (Seasonal Closure)</span> |
| </div> |
| <button class="modal-trigger mt-auto w-full bg-green-500 hover:bg-green-600 text-white py-2 rounded-lg transition flex items-center justify-center"> |
| <i class="fas fa-info-circle mr-2"></i> Visit Website |
| </button> |
| </div> |
|
|
| <div class="activity-card sensory-bg rounded-xl p-6" data-category="sensory" data-url="#"> |
| <div class="flex justify-between items-start mb-3"> |
| <span class="px-3 py-1 bg-white text-indigo-700 rounded-full text-sm">Sensory</span> |
| <span class="text-sm bg-white px-2 py-1 rounded-full"> |
| <i class="fas fa-clock mr-1"></i> Various Times |
| </span> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Made to Be Messy Sessions</h3> |
| <p class="text-gray-700 mb-4 flex-grow">Tactile exploration with non-toxic materials like edible paints and textured objects. (Locations vary - not shown on map).</p> |
| <div class="flex items-center text-sm mb-3"> |
| <i class="fas fa-map-marker-alt mr-2 text-gray-600"></i> |
| <span>Multiple Locations (e.g., Playgroups)</span> |
| </div> |
| <div class="flex items-center text-sm mb-4"> |
| <i class="fas fa-calendar-day mr-2 text-gray-600"></i> |
| <span>Check provider</span> |
| </div> |
| <button class="modal-trigger mt-auto w-full bg-indigo-500 hover:bg-indigo-600 text-white py-2 rounded-lg transition flex items-center justify-center"> |
| <i class="fas fa-info-circle mr-2"></i> Find Sessions |
| </button> |
| </div> |
|
|
| <div class="activity-card park-bg rounded-xl p-6" data-category="park outdoor sensory" data-url="https://www.developmentwa.com.au/places-and-projects/elizabeth-quay/see-and-do/bhp-water-park"> |
| <div class="flex justify-between items-start mb-3"> |
| <span class="px-3 py-1 bg-white text-green-700 rounded-full text-sm">Park / Outdoor</span> |
| <span class="text-sm bg-white px-2 py-1 rounded-full"> |
| <i class="fas fa-clock mr-1"></i> All Day (Seasonal) |
| </span> |
| </div> |
| <h3 class="text-xl font-bold mb-2">BHP Water Park</h3> |
| <p class="text-gray-700 mb-4 flex-grow">Gentle fountains and interactive jets for sensory water play. Nearby cafes offer shaded seating.</p> |
| <div class="flex items-center text-sm mb-3"> |
| <i class="fas fa-map-marker-alt mr-2 text-gray-600"></i> |
| <span>Elizabeth Quay</span> |
| </div> |
| <div class="flex items-center text-sm mb-4"> |
| <i class="fas fa-calendar-day mr-2 text-gray-600"></i> |
| <span>Open Daily (Summer Season)</span> |
| </div> |
| <button class="modal-trigger mt-auto w-full bg-green-500 hover:bg-green-600 text-white py-2 rounded-lg transition flex items-center justify-center"> |
| <i class="fas fa-info-circle mr-2"></i> View Info |
| </button> |
| </div> |
| </section> |
|
|
| <section id="tipsSection" class="bg-white rounded-xl shadow-md p-6 mb-12 scroll-mt-20"> |
| <h2 class="text-2xl font-bold text-pink-600 mb-6 baby-font text-center">Tips for Baby Outings</h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div class="flex items-start"> |
| <div class="bg-pink-100 p-3 rounded-full mr-4 flex-shrink-0"> |
| <i class="fas fa-sun text-pink-500 text-xl"></i> |
| </div> |
| <div> |
| <h3 class="font-bold mb-1">Morning Magic</h3> |
| <p class="text-gray-700 text-sm">Babies are often happiest after their morning nap. Plan outings for mid-morning.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4 flex-shrink-0"> |
| <i class="fas fa-baby-carriage text-blue-500 text-xl"></i> |
| </div> |
| <div> |
| <h3 class="font-bold mb-1">Pack Smart</h3> |
| <p class="text-gray-700 text-sm">Bring essentials: change mat, nappies, wipes, feeding supplies, hat, sunscreen, and a favorite toy.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-yellow-100 p-3 rounded-full mr-4 flex-shrink-0"> |
| <i class="fas fa-clock text-yellow-500 text-xl"></i> |
| </div> |
| <div> |
| <h3 class="font-bold mb-1">Keep it Short</h3> |
| <p class="text-gray-700 text-sm">Start with shorter trips. An hour or two is plenty for a young baby's first adventures.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="mapSection" class="mb-12 scroll-mt-20"> |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="p-6"> |
| <h2 class="text-2xl font-bold text-pink-600 mb-4 baby-font text-center">Activity Locations Map</h2> |
| <p class="text-gray-700 mb-0 text-center">Click on the markers to see the activity location.</p> |
| </div> |
| <div id="map"></div> |
| </div> |
| </section> |
| </main> |
|
|
| <footer class="bg-gray-800 text-white py-8"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0 text-center md:text-left"> |
| <h3 class="text-xl font-bold baby-font">Baby Adventures Perth</h3> |
| <p class="text-gray-400 mt-1 text-sm">Making memories with your little one</p> |
| </div> |
| <div class="flex space-x-4 mb-4 md:mb-0"> |
| <a href="#" class="text-gray-400 hover:text-white transition" aria-label="Facebook"> |
| <i class="fab fa-facebook-f text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition" aria-label="Instagram"> |
| <i class="fab fa-instagram text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition" aria-label="Contact Email"> |
| <i class="fas fa-envelope text-xl"></i> |
| </a> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm"> |
| <p>© 2025 Baby Adventures Perth. Information subject to change. Always check official sources.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <div id="activityModal" class="fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center z-50 hidden p-4"> |
| <div class="bg-white rounded-xl max-w-lg w-full max-h-[90vh] overflow-y-auto relative shadow-xl"> |
| <button onclick="closeModal()" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 text-2xl" aria-label="Close modal"> |
| × |
| </button> |
| <div class="p-6 sm:p-8"> |
| <h3 id="modalTitle" class="text-2xl font-bold mb-4 baby-font text-pink-600">Activity Title</h3> |
| <div id="modalContent" class="text-gray-700 mb-6 prose max-w-none"> |
| </div> |
| <div id="modalActions" class="mt-6 flex flex-col sm:flex-row gap-3"> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" |
| integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" |
| crossorigin=""></script> |
|
|
| <script> |
| |
| function filterActivities(category, clickedButton) { |
| document.querySelectorAll('.tab-button').forEach(button => { |
| button.classList.remove('tab-active'); |
| button.classList.add('text-gray-600'); |
| button.classList.remove('text-pink-600'); |
| }); |
| if (clickedButton) { |
| clickedButton.classList.add('tab-active'); |
| clickedButton.classList.remove('text-gray-600'); |
| clickedButton.classList.add('text-pink-600'); |
| } |
| |
| const activities = document.querySelectorAll('#activitiesGrid .activity-card'); |
| activities.forEach(activity => { |
| const categories = activity.dataset.category ? activity.dataset.category.split(' ') : []; |
| if (category === 'all' || categories.includes(category)) { |
| activity.style.display = 'flex'; |
| } else { |
| activity.style.display = 'none'; |
| } |
| }); |
| } |
| |
| const modal = document.getElementById('activityModal'); |
| const modalTitle = document.getElementById('modalTitle'); |
| const modalContent = document.getElementById('modalContent'); |
| const modalActions = document.getElementById('modalActions'); |
| |
| function openModal(title, content, url) { |
| modalTitle.textContent = title; |
| modalContent.innerHTML = content; |
| |
| modalActions.innerHTML = ''; |
| if (url && url !== '#') { |
| const linkButton = document.createElement('a'); |
| linkButton.href = url; |
| linkButton.target = "_blank"; |
| linkButton.rel = "noopener noreferrer"; |
| linkButton.className = "w-full sm:w-auto inline-flex justify-center items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-pink-500 hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transition"; |
| linkButton.innerHTML = `<i class="fas fa-external-link-alt mr-2"></i> Visit Website`; |
| modalActions.appendChild(linkButton); |
| } |
| |
| const closeBtn = document.createElement('button'); |
| closeBtn.onclick = closeModal; |
| closeBtn.className = "w-full sm:w-auto mt-3 sm:mt-0 inline-flex justify-center items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-base font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition"; |
| closeBtn.textContent = "Close"; |
| modalActions.appendChild(closeBtn); |
| |
| modal.classList.remove('hidden'); |
| modal.classList.add('flex'); |
| document.body.style.overflow = 'hidden'; |
| } |
| |
| function closeModal() { |
| modal.classList.add('hidden'); |
| modal.classList.remove('flex'); |
| document.body.style.overflow = ''; |
| } |
| |
| document.querySelectorAll('.modal-trigger').forEach(button => { |
| button.addEventListener('click', function() { |
| const card = this.closest('.activity-card'); |
| const title = card.querySelector('h3').textContent; |
| const description = card.querySelector('p').textContent; |
| const locationEl = card.querySelector('.fa-map-marker-alt'); |
| const dateEl = card.querySelector('.fa-calendar-day'); |
| const locationInfo = locationEl ? locationEl.parentElement.textContent.trim() : 'Location not specified'; |
| const dateInfo = dateEl ? dateEl.parentElement.textContent.trim() : 'Date not specified'; |
| const url = card.dataset.url || '#'; |
| |
| const modalHTMLContent = ` |
| <p class="mb-4">${description}</p> |
| <div class="bg-gray-100 p-4 rounded-lg mb-4 space-y-2"> |
| <div class="flex items-center"> |
| <i class="fas fa-map-marker-alt mr-3 text-gray-500 w-4 text-center"></i> |
| <span>${locationInfo}</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-calendar-day mr-3 text-gray-500 w-4 text-center"></i> |
| <span>${dateInfo}</span> |
| </div> |
| </div> |
| <p class="text-sm text-gray-500 italic">Please confirm details and check the official website for any last-minute changes before visiting.</p> |
| `; |
| |
| openModal(title, modalHTMLContent, url); |
| }); |
| }); |
| |
| modal.addEventListener('click', function(e) { |
| if (e.target === this) { |
| closeModal(); |
| } |
| }); |
| |
| document.addEventListener('keydown', function(event) { |
| if (event.key === 'Escape' && !modal.classList.contains('hidden')) { |
| closeModal(); |
| } |
| }); |
| |
| |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const locations = [ |
| [-31.9375, 115.8455, "Baby Rhyme Time", "City of Vincent Library, Leederville"], |
| [-31.9594, 115.8445, "Stories in the Park", "Kings Park (near Zamia Cafe/May Drive Parkland area)"], |
| [-31.9560, 115.8611, "Ballerina Bunny's Easter Show", "City of Perth Library, Hay St"], |
| [-31.9630, 115.8376, "Rio Tinto Naturescape", "Kings Park (Specific Naturescape entrance)"], |
| [-31.9591, 115.8582, "BHP Water Park", "Elizabeth Quay"] |
| |
| ]; |
| |
| |
| const mapElement = document.getElementById('map'); |
| if (mapElement) { |
| |
| const map = L.map('map').setView([-31.955, 115.85], 13); |
| |
| |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
| maxZoom: 19, |
| attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' |
| }).addTo(map); |
| |
| |
| locations.forEach(loc => { |
| const marker = L.marker([loc[0], loc[1]]).addTo(map); |
| marker.bindPopup(`<b>${loc[2]}</b><br>${loc[3]}`); |
| }); |
| } else { |
| console.error("Map container element with ID 'map' not found."); |
| } |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| const targetId = this.getAttribute('href'); |
| |
| if (targetId && targetId.length > 1) { |
| const targetElement = document.querySelector(targetId); |
| if (targetElement) { |
| targetElement.scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| } |
| } |
| }); |
| }); |
| }); |
| |
| </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=kevinktg/lesley" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
