|
|
<!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> |
