110 lines
4.3 KiB
PHP
110 lines
4.3 KiB
PHP
<div class="hero-section">
|
|
<div class="hero-content">
|
|
<h1 class="hero-title">Your Island, Your Food, Delivered</h1>
|
|
<p class="hero-subtitle">The best local restaurants and stores delivered to your door.</p>
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<div class="input-group mb-3">
|
|
<input type="text" id="location-input" class="form-control form-control-lg" placeholder="Enter your address or pin a location" readonly>
|
|
<button id="location-submit-btn" class="btn btn-primary btn-lg">Find Food</button>
|
|
</div>
|
|
<div class="d-flex justify-content-center gap-3">
|
|
<button id="pin-location-btn" class="btn btn-secondary">Pin a location on the map</button>
|
|
<button id="use-location-btn" class="btn btn-secondary">Use my current location</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Location Modal -->
|
|
<div id="location-modal" class="modal fade" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Pin Your Delivery Location</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="map" style="height: 50vh; width: 100%;"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
<button id="confirm-location-btn" type="button" class="btn btn-primary" disabled>Confirm Location</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const locationModal = new bootstrap.Modal(document.getElementById('location-modal'));
|
|
const locationInput = document.getElementById('location-input');
|
|
const locationSubmitBtn = document.getElementById('location-submit-btn');
|
|
const useLocationBtn = document.getElementById('use-location-btn');
|
|
const pinLocationBtn = document.getElementById('pin-location-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;
|
|
});
|
|
}
|
|
|
|
function openModal() {
|
|
locationModal.show();
|
|
}
|
|
|
|
document.getElementById('location-modal').addEventListener('shown.bs.modal', function () {
|
|
initMap(majuroCenter, 13);
|
|
});
|
|
|
|
locationInput.onclick = openModal;
|
|
locationSubmitBtn.onclick = openModal;
|
|
pinLocationBtn.onclick = openModal;
|
|
|
|
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.');
|
|
}
|
|
};
|
|
|
|
confirmBtn.onclick = function() {
|
|
if (selectedLocation) {
|
|
window.location.href = `restaurants.php?lat=${selectedLocation.lat}&lng=${selectedLocation.lng}`;
|
|
}
|
|
locationModal.hide();
|
|
};
|
|
});
|
|
</script>
|