106 lines
3.8 KiB
JavaScript
106 lines
3.8 KiB
JavaScript
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
// --- Initialize Map ---
|
|
const map = L.map('map').setView([20, 0], 2);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
const cities = [
|
|
{ name: 'Sydney', coords: [-33.8688, 151.2093] },
|
|
{ name: 'Ashgabat', coords: [37.9601, 58.3261] },
|
|
{ name: 'Tbilisi', coords: [41.7151, 44.8271] },
|
|
{ name: 'Vilnius', coords: [54.6872, 25.2797] },
|
|
{ name: 'Helsinki', coords: [60.1699, 24.9384] },
|
|
{ name: 'Warsaw', coords: [52.2297, 21.0122] },
|
|
{ name: 'Dublin', coords: [53.3498, -6.2603] },
|
|
{ name: 'New York', coords: [40.7128, -74.0060] },
|
|
{ name: 'Dallas', coords: [32.7767, -96.7970] },
|
|
{ name: 'San Francisco', coords: [37.7749, -122.4194] }
|
|
];
|
|
|
|
const icon = L.divIcon({
|
|
className: 'custom-div-icon',
|
|
html: "<div style='background-color:#BB86FC;' class='marker-pin'></div><i class='material-icons'></i>",
|
|
iconSize: [30, 42],
|
|
iconAnchor: [15, 42]
|
|
});
|
|
|
|
cities.forEach(city => {
|
|
L.marker(city.coords, {
|
|
icon: L.divIcon({
|
|
html: `<div style="background-color: #BB86FC; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff;"></div>`,
|
|
className: 'custom-marker',
|
|
iconSize: [16, 16],
|
|
iconAnchor: [8, 8]
|
|
})
|
|
}).addTo(map)
|
|
.bindPopup(`<b>${city.name}</b>`);
|
|
});
|
|
|
|
// --- Contact Form Handling ---
|
|
const contactForm = document.getElementById('contactForm');
|
|
contactForm.addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
|
|
const name = document.getElementById('name').value.trim();
|
|
const email = document.getElementById('email').value.trim();
|
|
const message = document.getElementById('message').value.trim();
|
|
|
|
if (!name || !email || !message) {
|
|
showToast('Please fill out all fields.', 'danger');
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData(this);
|
|
|
|
fetch('contact_handler.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showToast(data.message, 'success');
|
|
contactForm.reset();
|
|
} else {
|
|
showToast(data.message, 'danger');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
showToast('An unexpected error occurred. Please try again.', 'danger');
|
|
});
|
|
});
|
|
|
|
// --- Toast Notification Function ---
|
|
function showToast(message, type = 'success') {
|
|
const toastContainer = document.getElementById('toast-container');
|
|
|
|
const toastId = 'toast-' + Math.random().toString(36).substr(2, 9);
|
|
|
|
const toastHTML = `
|
|
<div id="${toastId}" class="toast align-items-center text-white bg-${type} border-0" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="d-flex">
|
|
<div class="toast-body">
|
|
${message}
|
|
</div>
|
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
toastContainer.insertAdjacentHTML('beforeend', toastHTML);
|
|
|
|
const toastElement = document.getElementById(toastId);
|
|
const toast = new bootstrap.Toast(toastElement, { delay: 5000 });
|
|
toast.show();
|
|
|
|
toastElement.addEventListener('hidden.bs.toast', function () {
|
|
toastElement.remove();
|
|
});
|
|
}
|
|
});
|