97 lines
3.3 KiB
PHP
97 lines
3.3 KiB
PHP
<!-- hero.php -->
|
|
<div class="hero-section">
|
|
<div class="container text-center">
|
|
<h1 class="hero-title">Your Favorite Food, Delivered</h1>
|
|
<p class="hero-subtitle">Enter your location to see which restaurants deliver to you.</p>
|
|
<a href="#" class="btn btn-primary btn-lg" id="pin-location-btn">Pin a Location on Map</a>
|
|
<div class="mt-3">
|
|
<a href="#" class="text-muted" id="use-location-btn">or use my current location</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Location Modal -->
|
|
<div id="location-modal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close-btn">×</span>
|
|
<h2>Pin Your Delivery Location</h2>
|
|
<div id="map" style="height: 400px; width: 100%;"></div>
|
|
<button id="confirm-location-btn" class="btn btn-primary mt-3" disabled>Confirm Location</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const modal = document.getElementById('location-modal');
|
|
const pinBtn = document.getElementById('pin-location-btn');
|
|
const useLocationBtn = document.getElementById('use-location-btn');
|
|
const closeBtn = document.querySelector('.close-btn');
|
|
const confirmBtn = document.getElementById('confirm-location-btn');
|
|
|
|
let map;
|
|
let marker;
|
|
let selectedLocation = null;
|
|
const majuroCenter = [7.11, 171.38];
|
|
|
|
function initMap(center, zoom) {
|
|
if (map) {
|
|
map.off();
|
|
map.remove();
|
|
}
|
|
map = L.map('map').setView(center, zoom);
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
map.on('click', function(e) {
|
|
if (marker) {
|
|
map.removeLayer(marker);
|
|
}
|
|
marker = L.marker(e.latlng).addTo(map);
|
|
selectedLocation = e.latlng;
|
|
confirmBtn.disabled = false;
|
|
});
|
|
}
|
|
|
|
pinBtn.onclick = function(e) {
|
|
e.preventDefault();
|
|
modal.style.display = 'block';
|
|
setTimeout(() => initMap(majuroCenter, 13), 100);
|
|
};
|
|
|
|
useLocationBtn.onclick = function(e) {
|
|
e.preventDefault();
|
|
if (navigator.geolocation) {
|
|
navigator.geolocation.getCurrentPosition(function(position) {
|
|
const userLocation = {
|
|
lat: position.coords.latitude,
|
|
lng: position.coords.longitude
|
|
};
|
|
window.location.href = `restaurants.php?lat=${userLocation.lat}&lng=${userLocation.lng}`;
|
|
}, function() {
|
|
alert('Could not get your location. Please pin it on the map.');
|
|
});
|
|
} else {
|
|
alert('Geolocation is not supported by this browser.');
|
|
}
|
|
};
|
|
|
|
closeBtn.onclick = function() {
|
|
modal.style.display = 'none';
|
|
};
|
|
|
|
confirmBtn.onclick = function() {
|
|
if (selectedLocation) {
|
|
window.location.href = `restaurants.php?lat=${selectedLocation.lat}&lng=${selectedLocation.lng}`;
|
|
}
|
|
modal.style.display = 'none';
|
|
};
|
|
|
|
window.onclick = function(event) {
|
|
if (event.target == modal) {
|
|
modal.style.display = 'none';
|
|
}
|
|
};
|
|
});
|
|
</script>
|