Natures Embrace Map - MeggiTools

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nature's Embrace Map</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        body {
            margin: 0;
            font-family: 'Arial', sans-serif;
            background: #2c3e50;
            color: #ecf0f1;
        }
        #map {
            height: 100vh;
            width: 100vw;
            position: relative;
        }
        .leaflet-container {
            background: linear-gradient(120deg, #2ecc71, #27ae60);
            border: 5px solid #27ae60;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            transition: all 0.5s ease;
        }
        .leaflet-container:hover {
            transform: scale(1.05);
            border-color: #27ae60;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
        }
        .leaflet-popup-content {
            font-size: 16px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .leaflet-marker-icon {
            transition: transform 0.3s ease;
        }
        .leaflet-marker-icon:hover {
            transform: scale(1.5);
        }
        @keyframes pulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 rgba(39, 174, 96, 0.4);
            }
            70% {
                transform: scale(1.2);
                box-shadow: 0 0 20px rgba(39, 174, 96, 0);
            }
            100% {
                transform: scale(1);
                box-shadow: 0 0 0 rgba(39, 174, 96, 0);
            }
        }
        .animated-pulse {
            animation: pulse 2s infinite;
        }
        .leaflet-control-attribution {
            display: none;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        const map = L.map('map').setView([51.505, -0.09], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap'
        }).addTo(map);
        const leafIcon = L.divIcon({
            className: 'leaf-icon animated-pulse',
            html: '🌿',
            iconSize: [30, 30],
            iconAnchor: [15, 30]
        });
        L.marker([51.5, -0.09], { icon: leafIcon }).addTo(map)
            .bindPopup('<div>🌿 Nature\'s Embrace</div>');
        const customIcon = L.divIcon({
            className: 'custom-icon animated-pulse',
            html: '<i class="fas fa-leaf" style="color: green; font-size: 30px;"></i>',
            iconSize: [30, 30],
            iconAnchor: [15, 30]
        });
        L.marker([51.515, -0.1], { icon: customIcon }).addTo(map)
            .bindPopup('<div><i class="fas fa-leaf" style="color: green;"></i> Custom Leaf Icon</div>');
        const circle = L.circle([51.508, -0.11], {
            color: '#27ae60',
            fillColor: '#2ecc71',
            fillOpacity: 0.5,
            radius: 500
        }).addTo(map);
    </script>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</body>
</html>