diff --git a/assets/css/main.css b/assets/css/main.css
index 3906c7dd..ead983f9 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -470,4 +470,58 @@ main {
flex-direction: column;
gap: 15px;
}
+}
+
+/* --- Location Modal --- */
+.modal {
+ display: none;
+ position: fixed;
+ z-index: 1001;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: rgba(0,0,0,0.5);
+}
+
+.modal-content {
+ background-color: #fefefe;
+ margin: 10% auto;
+ padding: 20px;
+ border: 1px solid #888;
+ width: 80%;
+ max-width: 600px;
+ border-radius: var(--border-radius);
+ position: relative;
+}
+
+.close-button {
+ color: #aaa;
+ position: absolute;
+ top: 10px;
+ right: 20px;
+ font-size: 28px;
+ font-weight: bold;
+}
+
+.close-button:hover,
+.close-button:focus {
+ color: black;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+#map {
+ height: 400px;
+ width: 100%;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border-radius: var(--border-radius);
+}
+
+#confirm-location {
+ width: 100%;
+ padding: 15px;
+ font-size: 1.1rem;
}
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index fb8ed395..6998f715 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -9,4 +9,60 @@ document.addEventListener('DOMContentLoaded', function() {
navActions.classList.toggle('active');
});
}
+
+ // Location Modal
+ const locationModal = document.getElementById('location-modal');
+ const pinLocationBtn = document.getElementById('pin-location-btn');
+ const closeModalBtn = document.querySelector('.close-button');
+ const confirmLocationBtn = document.getElementById('confirm-location');
+ let map, marker;
+ let markerPosition = { lat: 6.9271, lng: 171.1845 }; // Default to Majuro
+
+ function initMap() {
+ if (map) {
+ map.remove();
+ }
+ map = L.map('map').setView(markerPosition, 13);
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ attribution: '© OpenStreetMap contributors'
+ }).addTo(map);
+
+ marker = L.marker(markerPosition, { draggable: true }).addTo(map);
+
+ marker.on('dragend', function(event) {
+ const position = marker.getLatLng();
+ markerPosition = { lat: position.lat, lng: position.lng };
+ });
+ }
+
+ if (pinLocationBtn) {
+ pinLocationBtn.addEventListener('click', () => {
+ locationModal.style.display = 'block';
+ // Invalidate map size on modal open to ensure it renders correctly
+ setTimeout(initMap, 10);
+ });
+ }
+
+ if (closeModalBtn) {
+ closeModalBtn.addEventListener('click', () => {
+ locationModal.style.display = 'none';
+ });
+ }
+
+ window.addEventListener('click', (event) => {
+ if (event.target == locationModal) {
+ locationModal.style.display = 'none';
+ }
+ });
+
+ if (confirmLocationBtn) {
+ confirmLocationBtn.addEventListener('click', () => {
+ sessionStorage.setItem('user_latitude', markerPosition.lat);
+ sessionStorage.setItem('user_longitude', markerPosition.lng);
+ locationModal.style.display = 'none';
+ // Optional: Update UI to show location is set
+ pinLocationBtn.textContent = 'Location Set!';
+ pinLocationBtn.style.backgroundColor = '#28a745';
+ });
+ }
});
diff --git a/footer.php b/footer.php
index 1cf7e3fe..7c8e7fbc 100644
--- a/footer.php
+++ b/footer.php
@@ -3,5 +3,7 @@
© Majuro Eats. All Rights Reserved. | Admin Login
+
+