V16

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;
 }

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: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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';
+        });
+    }
 });

footer.php

@@ -3,5 +3,7 @@
         <p>&copy; <?php echo date("Y"); ?> Majuro Eats. All Rights Reserved. | <a href="/admin/login.php">Admin Login</a></p>
     </div>
 </footer>
+<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
+<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
 </body>
 </html>

header.php

@@ -9,12 +9,12 @@ session_start();
     <title>MajuroEats - Fast Island Delivery</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="assets/css/main.css?v=<?php echo time(); ?>">
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
+    <link rel="stylesheet" href="assets/css/main.css">
 </head>
 <body>
-
-<header class="main-header">
+    <header>
     <div class="container">
         <nav class="main-nav">
             <a href="/" class="logo">

index.php

@@ -64,4 +64,13 @@
 
 </div>
 
+<div id="location-modal" class="modal">
+    <div class="modal-content">
+        <span class="close-button">&times;</span>
+        <h2>Pin Your Location</h2>
+        <div id="map"></div>
+        <button id="confirm-location" class="btn-primary">Confirm Location</button>
+    </div>
+</div>
+
 <?php include 'footer.php'; ?>