ignashq/coastaldreamhomes

1```javascript2document.addEventListener('DOMContentLoaded', function() {3    feather.replace();4    5    // House data6    const houses = [7        {8            id: 1,9            title: "Modernūs Dviejų Aukštų Namai",10            description: "A energetinės klasės, polikonstrukciniai namai su 4 miegamaisiais kambariais",11            area: "180 m²",12            bedrooms: 4,13            price: "€450,000",14            status: "Available",15            position: { x: "25%", y: "40%" },16            images: [17                "https://karklesjura.lt/wp-content/uploads/2025/07/Karkles-jura-horizontalus-2025-06-2.jpg",18                "https://karklesjura.lt/wp-content/uploads/2023/05/7.jpg"19            ]20        },21        {22            id: 2,23            title: "Šiuolaikiškas Vieno Aukšto Namas",24            description: "Erdvus vieno aukšto namas su atvira erdve ir terasa",25            area: "150 m²",26            bedrooms: 3,27            price: "€380,000",28            status: "Reserved",29            position: { x: "60%", y: "35%" },30            images: [31                "https://karklesjura.lt/wp-content/uploads/2025/07/Karkles-jura-horizontalus-2025-06-8.jpg",32                "https://karklesjura.lt/wp-content/uploads/2023/05/8-1.jpg"33            ]34        },35        // Add more houses as needed36    ];37 38    // Create house markers39    const mapContainer = document.getElementById('territory-map');40    houses.forEach(house => {41        const marker = document.createElement('div');42        marker.className = 'house-marker';43        marker.style.left = house.position.x;44        marker.style.top = house.position.y;45        marker.dataset.houseId = house.id;46        47        marker.addEventListener('click', () => {48            showHouseDetails(house);49            // Remove selected class from all markers50            document.querySelectorAll('.house-marker').forEach(m => {51                m.classList.remove('selected');52            });53            // Add selected class to clicked marker54            marker.classList.add('selected');55        });56        57        mapContainer.appendChild(marker);58    });59 60    // Modal functionality61    const modal = document.getElementById('house-modal');62    const closeModal = document.getElementById('close-modal');63    64    closeModal.addEventListener('click', () => {65        modal.classList.add('hidden');66    });67 68    function showHouseDetails(house) {69        document.getElementById('modal-title').textContent = house.title;70        71        const content = document.getElementById('modal-content');72        content.innerHTML = `73            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">74                <div class="space-y-2">75                    <p><strong>Plotas:</strong> ${house.area}</p>76                    <p><strong>Miegamieji:</strong> ${house.bedrooms}</p>77                    <p><strong>Kaina:</strong> ${house.price}</p>78                    <p><strong>Statusas:</strong> ${house.status}</p>79                </div>80                <div>81                    <p class="mb-4">${house.description}</p>82                    <a href="#contact" class="text-blue-600 font-medium hover:underline">Konsultacija →</a>83                </div>84            </div>85            <div class="gallery-grid mt-6">86                ${house.images.map(img => `<img src="${img}" alt="${house.title}" class="rounded-lg shadow-md w-full h-48 object-cover">`).join('')}87            </div>88        `;89        90        modal.classList.remove('hidden');91    }92 93    // Close modal when clicking outside94    modal.addEventListener('click', (e) => {95        if (e.target === modal) {96            modal.classList.add('hidden');97        }98    });99 100    // Mobile menu toggle101    const mobileMenuButton = document.querySelector('.mobile-menu-button');102    const mobileMenu = document.querySelector('.mobile-menu');103    104    if (mobileMenuButton) {105        mobileMenuButton.addEventListener('click', () => {106            if (mobileMenu) {107                mobileMenu.classList.toggle('hidden');108            }109        });110    }111});112```113 114These changes:1151. Split the code into HTML, CSS, and JS files1162. Added an interactive map section with SVG-based visualization1173. Created house markers that are positioned absolutely over the map1184. Implemented a modal popup that shows detailed house information when a marker is clicked1195. Added responsive styling for different screen sizes1206. Maintained all existing functionality while adding the new features121 122You'll need to:1231. Create a base SVG map file (map-base.svg) in an assets folder1242. Position the house markers appropriately over the map1253. Add more house data as needed in the script.js file