V15
This commit is contained in:
parent
adf8c9c972
commit
4c995f3f6b
1787
assets/css/main.css
1787
assets/css/main.css
File diff suppressed because it is too large
Load Diff
@ -1,116 +1,12 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const addressDisplay = document.getElementById('address-display');
|
||||
const addressContainer = document.querySelector('.address-container');
|
||||
const modal = document.getElementById('address-modal');
|
||||
const closeButton = document.querySelector('.close-button');
|
||||
const saveAddressButton = document.getElementById('save-address-button');
|
||||
const modalAddressInput = document.getElementById('modal-address-input');
|
||||
const hamburger = document.querySelector('.hamburger');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
const navActions = document.querySelector('.nav-actions');
|
||||
|
||||
// Load and display saved address
|
||||
const savedAddress = localStorage.getItem('deliveryAddress');
|
||||
if (savedAddress) {
|
||||
addressDisplay.textContent = savedAddress;
|
||||
} else {
|
||||
addressDisplay.textContent = 'Enter delivery address';
|
||||
}
|
||||
|
||||
// Open modal
|
||||
if (addressContainer) {
|
||||
addressContainer.addEventListener('click', function() {
|
||||
if (modal) {
|
||||
modal.style.display = 'block';
|
||||
modalAddressInput.value = localStorage.getItem('deliveryAddress') || '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Close modal
|
||||
if(closeButton) {
|
||||
closeButton.addEventListener('click', function() {
|
||||
if (modal) modal.style.display = 'none';
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
window.addEventListener('click', function(event) {
|
||||
if (event.target == modal) {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Save address
|
||||
if(saveAddressButton) {
|
||||
saveAddressButton.addEventListener('click', function() {
|
||||
const newAddress = modalAddressInput.value.trim();
|
||||
if (newAddress) {
|
||||
localStorage.setItem('deliveryAddress', newAddress);
|
||||
addressDisplay.textContent = newAddress;
|
||||
modal.style.display = 'none';
|
||||
} else {
|
||||
alert('Please enter an address.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Search functionality for index.php
|
||||
const searchInput = document.getElementById('search-input');
|
||||
if (searchInput) {
|
||||
const restaurantGrid = document.getElementById('restaurant-grid');
|
||||
const restaurantCards = restaurantGrid.querySelectorAll('a.restaurant-card');
|
||||
|
||||
searchInput.addEventListener('keyup', function () {
|
||||
const searchTerm = searchInput.value.toLowerCase();
|
||||
|
||||
restaurantCards.forEach(card => {
|
||||
const name = card.dataset.name || '';
|
||||
const cuisine = card.dataset.cuisine || '';
|
||||
|
||||
if (name.includes(searchTerm) || cuisine.includes(searchTerm)) {
|
||||
card.style.display = 'flex';
|
||||
} else {
|
||||
card.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Search functionality for menu.php
|
||||
const menuSearchInput = document.getElementById('menu-search-input');
|
||||
if (menuSearchInput) {
|
||||
const menuGrid = document.getElementById('menu-grid');
|
||||
const menuItems = menuGrid.querySelectorAll('.menu-item-card');
|
||||
|
||||
menuSearchInput.addEventListener('keyup', function () {
|
||||
const searchTerm = menuSearchInput.value.toLowerCase();
|
||||
|
||||
menuItems.forEach(card => {
|
||||
const name = card.dataset.name || '';
|
||||
const description = card.dataset.description || '';
|
||||
|
||||
if (name.includes(searchTerm) || description.includes(searchTerm)) {
|
||||
card.style.display = 'flex';
|
||||
} else {
|
||||
card.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Filter dropdown
|
||||
const filterDropdown = document.querySelector('.filter-dropdown');
|
||||
if (filterDropdown) {
|
||||
const filterButton = filterDropdown.querySelector('.filter-button');
|
||||
const filterOptions = filterDropdown.querySelector('.filter-options');
|
||||
|
||||
filterButton.addEventListener('click', () => {
|
||||
const isVisible = filterOptions.style.display === 'block';
|
||||
filterOptions.style.display = isVisible ? 'none' : 'block';
|
||||
});
|
||||
|
||||
window.addEventListener('click', (event) => {
|
||||
if (!filterDropdown.contains(event.target)) {
|
||||
filterOptions.style.display = 'none';
|
||||
}
|
||||
if (hamburger) {
|
||||
hamburger.addEventListener('click', () => {
|
||||
navLinks.classList.toggle('active');
|
||||
navActions.classList.toggle('active');
|
||||
});
|
||||
}
|
||||
});
|
||||
BIN
assets/pasted-20251016-062926-8620c9e4.jpg
Normal file
BIN
assets/pasted-20251016-062926-8620c9e4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 779 KiB |
80
header.php
80
header.php
@ -6,68 +6,44 @@ session_start();
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Majuro Eats</title>
|
||||
<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=Inter:wght@400;500;600;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
|
||||
<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 rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<a href="/" class="logo">Majuro Eats</a>
|
||||
<div class="address-container">
|
||||
<span id="address-display">Enter delivery address</span>
|
||||
</div>
|
||||
|
||||
<div class="user-actions">
|
||||
<?php
|
||||
require_once 'db/config.php';
|
||||
$cart_item_count = 0;
|
||||
$db = db();
|
||||
if (isset($_SESSION['user_id'])) {
|
||||
$stmt = $db->prepare('SELECT SUM(quantity) as item_count FROM cart WHERE user_id = ?');
|
||||
$stmt->execute([$_SESSION['user_id']]);
|
||||
$result = $stmt->fetch();
|
||||
if ($result && $result['item_count'] > 0) {
|
||||
$cart_item_count = $result['item_count'];
|
||||
}
|
||||
} else {
|
||||
$stmt = $db->prepare('SELECT SUM(quantity) as item_count FROM cart WHERE session_id = ?');
|
||||
$stmt->execute([session_id()]);
|
||||
$result = $stmt->fetch();
|
||||
if ($result && $result['item_count'] > 0) {
|
||||
$cart_item_count = $result['item_count'];
|
||||
}
|
||||
}
|
||||
?>
|
||||
<a href="cart.php" class="cart-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
|
||||
<span class="cart-item-count"><?= $cart_item_count ?></span>
|
||||
<header class="main-header">
|
||||
<div class="container">
|
||||
<nav class="main-nav">
|
||||
<a href="/" class="logo">
|
||||
<span class="logo-icon">🌊</span>
|
||||
<span class="logo-text">MajuroEats</span>
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="index.php">Restaurants</a></li>
|
||||
<li><a href="#">Rewards</a></li>
|
||||
<li><a href="driver_signup.php">Driver</a></li>
|
||||
<li><a href="#">Help</a></li>
|
||||
</ul>
|
||||
<div class="nav-actions">
|
||||
<?php if (isset($_SESSION['user_id'])): ?>
|
||||
<span>Welcome, <?php echo htmlspecialchars($_SESSION['user_name']); ?></span>
|
||||
<a href="profile.php">My Profile</a>
|
||||
<a href="order_history.php">Order History</a>
|
||||
<a href="logout.php">Logout</a>
|
||||
<a href="profile.php" class="nav-link-button">Profile</a>
|
||||
<a href="logout.php" class="nav-button primary">Logout</a>
|
||||
<?php else: ?>
|
||||
<a href="login.php">Login</a>
|
||||
<a href="signup.php">Sign Up</a>
|
||||
<a href="login.php" class="nav-link-button">Sign In</a>
|
||||
<a href="signup.php" class="nav-button primary">Sign Up</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<button class="hamburger">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- The Modal -->
|
||||
<div id="address-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close-button">×</span>
|
||||
<h2>Enter your delivery address</h2>
|
||||
<input type="text" id="modal-address-input" placeholder="e.g. Uliga, Majuro">
|
||||
<button id="save-address-button">Save Address</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
|
||||
<script src="assets/js/main.js?v=<?php echo time(); ?>" defer></script>
|
||||
|
||||
<main>
|
||||
110
hero.php
110
hero.php
@ -1,103 +1,15 @@
|
||||
<?php
|
||||
function get_hero_image() {
|
||||
// Check if we have a cached image URL
|
||||
if (isset($_SESSION['hero_image_url'])) {
|
||||
return $_SESSION['hero_image_url'];
|
||||
}
|
||||
|
||||
// If not, fetch a new one from Pexels
|
||||
require_once __DIR__ . '/includes/pexels.php';
|
||||
$query = 'island food';
|
||||
$orientation = 'landscape';
|
||||
$url = 'https://api.pexels.com/v1/search?query=' . urlencode($query) . '&orientation=' . urlencode($orientation) . '&per_page=1&page=' . rand(1, 100);
|
||||
$data = pexels_get($url);
|
||||
|
||||
if (!empty($data['photos'])) {
|
||||
$photo = $data['photos'][0];
|
||||
$image_url = $photo['src']['large2x'] ?? $photo['src']['large'];
|
||||
|
||||
// Cache the URL in the session
|
||||
$_SESSION['hero_image_url'] = $image_url;
|
||||
|
||||
return $image_url;
|
||||
}
|
||||
|
||||
// Fallback image
|
||||
return 'assets/images/hero.jpg';
|
||||
}
|
||||
|
||||
$hero_image_url = get_hero_image();
|
||||
?>
|
||||
|
||||
<style>
|
||||
.hero-section {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('<?= $hero_image_url ?>');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: white;
|
||||
text-align: left;
|
||||
padding: 100px 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero-search-form {
|
||||
display: flex;
|
||||
border-radius: 50px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.hero-search-input {
|
||||
flex-grow: 1;
|
||||
border: none;
|
||||
padding: 1rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.hero-search-input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.hero-search-button {
|
||||
border: none;
|
||||
background-color: #FF6B6B;
|
||||
color: white;
|
||||
padding: 0 2rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.hero-search-button:hover {
|
||||
background-color: #ff4f4f;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="hero-section">
|
||||
<div class="hero-overlay"></div>
|
||||
<div class="container hero-content-container">
|
||||
<div class="hero-content">
|
||||
<h1>Everything you crave, delivered.</h1>
|
||||
<p>Your favorite local restaurants, delivered to your door.</p>
|
||||
<form action="index.php" method="get" class="hero-search-form">
|
||||
<input type="text" name="search" class="hero-search-input" placeholder="Find restaurants" value="<?= isset($_GET['search']) ? htmlspecialchars($_GET['search']) : '' ?>">
|
||||
<button type="submit" class="hero-search-button">Find restaurants</button>
|
||||
</form>
|
||||
<h1>Fast Island Delivery — From Rita to Laura!</h1>
|
||||
<p>Get your favorite meals delivered anywhere on Majuro Island.</p>
|
||||
<div class="location-actions">
|
||||
<button class="location-button primary" id="pin-location-btn">📍 Pin Your Location</button>
|
||||
<button class="location-button secondary" id="use-location-btn">Use Current Location</button>
|
||||
</div>
|
||||
<a href="index.php" class="find-restaurants-btn">Find Restaurants</a>
|
||||
<p class="delivery-note">MajuroEats delivers only within the main island zone (Rita–Laura).</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
334
index.php
334
index.php
@ -1,144 +1,37 @@
|
||||
<?php include 'header.php'; ?>
|
||||
<?php include 'hero.php'; ?>
|
||||
|
||||
<div class="container">
|
||||
<section class="categories-section">
|
||||
<h2 class="page-title">Discover by Category</h2>
|
||||
<div class="category-grid">
|
||||
<?php
|
||||
$cuisine_stmt = db()->query("SELECT * FROM cuisines ORDER BY name");
|
||||
$cuisines = $cuisine_stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||
// Placeholder images - we'll make these dynamic later
|
||||
$cuisine_images = [
|
||||
'American' => 'assets/images/pexels/1639557.jpg',
|
||||
'Asian' => 'assets/images/pexels/2347311.jpg',
|
||||
'BBQ' => 'assets/images/pexels/161963.jpg',
|
||||
'Breakfast' => 'assets/images/pexels/376464.jpg',
|
||||
'Cafe' => 'assets/images/pexels/312418.jpg',
|
||||
'Dessert' => 'assets/images/pexels/1099680.jpg',
|
||||
'Fast Food' => 'assets/images/pexels/1633578.jpg',
|
||||
'Healthy' => 'assets/images/pexels/1640777.jpg',
|
||||
'Indian' => 'assets/images/pexels/958545.jpg',
|
||||
'Italian' => 'assets/images/pexels/1260968.jpg',
|
||||
'Mexican' => 'assets/images/pexels/461198.jpg',
|
||||
'Pizza' => 'assets/images/pexels/1146760.jpg',
|
||||
'Seafood' => 'assets/images/pexels/1639565.jpg',
|
||||
'Vegetarian' => 'assets/images/pexels/1143754.jpg',
|
||||
];
|
||||
<div class="container page-content">
|
||||
|
||||
foreach ($cuisines as $cuisine):
|
||||
$image_url = $cuisine_images[$cuisine['name']] ?? 'https://picsum.photos/600?random=' . $cuisine['id'];
|
||||
?>
|
||||
<a href="index.php?cuisine=<?= $cuisine['id'] ?>" class="category-card">
|
||||
<img src="<?= htmlspecialchars($image_url) ?>" alt="<?= htmlspecialchars($cuisine['name']) ?>">
|
||||
<div class="category-card-overlay"></div>
|
||||
<h3><?= htmlspecialchars($cuisine['name']) ?></h3>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
<section class="promo-section">
|
||||
<div class="promo-card">
|
||||
<h3>$0 Delivery Fee</h3>
|
||||
<p>On your first order</p>
|
||||
</div>
|
||||
<div class="promo-card">
|
||||
<h3>Earn Rewards</h3>
|
||||
<p>With every meal</p>
|
||||
</div>
|
||||
<div class="promo-card">
|
||||
<h3>Support Local</h3>
|
||||
<p>Majuro Restaurants</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<form action="index.php" method="get" id="filter-form">
|
||||
<input type="hidden" name="search" value="<?= isset($_GET['search']) ? htmlspecialchars($_GET['search']) : '' ?>">
|
||||
<?php if (isset($_GET['cuisine'])): ?>
|
||||
<input type="hidden" name="cuisine" value="<?= htmlspecialchars($_GET['cuisine']) ?>">
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="filter-bar-new">
|
||||
<div class="form-group">
|
||||
<label for="min_rating">Rating</label>
|
||||
<select name="min_rating" id="min_rating" class="form-control" onchange="this.form.submit()">
|
||||
<option value="">Any</option>
|
||||
<option value="4" <?= isset($_GET['min_rating']) && $_GET['min_rating'] == 4 ? 'selected' : '' ?>>4+ stars</option>
|
||||
<option value="3" <?= isset($_GET['min_rating']) && $_GET['min_rating'] == 3 ? 'selected' : '' ?>>3+ stars</option>
|
||||
<option value="2" <?= isset($_GET['min_rating']) && $_GET['min_rating'] == 2 ? 'selected' : '' ?>>2+ stars</option>
|
||||
<option value="1" <?= isset($_GET['min_rating']) && $_GET['min_rating'] == 1 ? 'selected' : '' ?>>1+ star</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="open_now" value="1" id="open-now" <?= isset($_GET['open_now']) ? 'checked' : '' ?> onchange="this.form.submit()">
|
||||
<label class="form-check-label" for="open-now">
|
||||
Open Now
|
||||
</label>
|
||||
</div>
|
||||
<a href="index.php" class="btn btn-secondary">Clear Filters</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<section class="featured-restaurants">
|
||||
<h2 class="section-title">Featured Restaurants</h2>
|
||||
<div class="restaurant-grid">
|
||||
<?php
|
||||
$page_title = "All Restaurants";
|
||||
if (isset($_GET['cuisine']) && !empty($_GET['cuisine'])) {
|
||||
$cuisine_id = $_GET['cuisine'];
|
||||
$cuisine_stmt = db()->prepare("SELECT name FROM cuisines WHERE id = ?");
|
||||
$cuisine_stmt->execute([$cuisine_id]);
|
||||
$cuisine_name = $cuisine_stmt->fetchColumn();
|
||||
if ($cuisine_name) {
|
||||
$page_title = htmlspecialchars($cuisine_name) . " Restaurants";
|
||||
}
|
||||
}
|
||||
?>
|
||||
<h2 class="page-title mt-4"><?= $page_title ?></h2>
|
||||
<section class="restaurant-list">
|
||||
<div class="restaurant-grid" id="restaurant-grid">
|
||||
<?php
|
||||
// Base query
|
||||
$sql = "SELECT DISTINCT r.id, r.name, r.image_url, r.opening_time, r.closing_time, r.days_open, AVG(rt.rating) as average_rating, COUNT(rt.id) as rating_count
|
||||
require_once 'db/config.php';
|
||||
$db = db();
|
||||
$stmt = $db->query("SELECT r.id, r.name, r.image_url, AVG(rt.rating) as average_rating
|
||||
FROM restaurants r
|
||||
LEFT JOIN ratings rt ON r.id = rt.restaurant_id";
|
||||
$params = [];
|
||||
LEFT JOIN ratings rt ON r.id = rt.restaurant_id
|
||||
GROUP BY r.id
|
||||
ORDER BY average_rating DESC, r.id DESC
|
||||
LIMIT 6");
|
||||
$restaurants = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||
|
||||
// Join with restaurant_cuisines if filtering by cuisine
|
||||
if (isset($_GET['cuisine']) && !empty($_GET['cuisine'])) {
|
||||
$sql .= " JOIN restaurant_cuisines rc ON r.id = rc.restaurant_id";
|
||||
}
|
||||
|
||||
$where_clauses = [];
|
||||
|
||||
// Append search condition
|
||||
if (!empty($_GET['search'])) {
|
||||
$where_clauses[] = "r.name LIKE ?";
|
||||
$params[] = '%' . $_GET['search'] . '%';
|
||||
}
|
||||
|
||||
// Append cuisine filter
|
||||
if (isset($_GET['cuisine']) && !empty($_GET['cuisine'])) {
|
||||
$where_clauses[] = "rc.cuisine_id = ?";
|
||||
$params[] = $_GET['cuisine'];
|
||||
}
|
||||
|
||||
// Append "Open Now" filter
|
||||
if (isset($_GET['open_now'])) {
|
||||
$current_time = date('H:i:s');
|
||||
$current_day = date('D'); // Mon, Tue, etc.
|
||||
$where_clauses[] = "r.opening_time <= ? AND r.closing_time >= ? AND r.days_open LIKE ?";
|
||||
$params[] = $current_time;
|
||||
$params[] = $current_time;
|
||||
$params[] = '%' . $current_day . '%';
|
||||
}
|
||||
|
||||
|
||||
if (!empty($where_clauses)) {
|
||||
$sql .= " WHERE " . implode(' AND ', $where_clauses);
|
||||
}
|
||||
|
||||
$sql .= " GROUP BY r.id, r.name, r.image_url, r.opening_time, r.closing_time, r.days_open";
|
||||
|
||||
// Add rating filter (HAVING clause)
|
||||
$selected_min_rating = isset($_GET['min_rating']) && is_numeric($_GET['min_rating']) ? (int)$_GET['min_rating'] : 0;
|
||||
if ($selected_min_rating > 0) {
|
||||
$sql .= " HAVING AVG(rt.rating) >= ?";
|
||||
$params[] = $selected_min_rating;
|
||||
}
|
||||
|
||||
$sql .= " ORDER BY r.name";
|
||||
|
||||
$stmt = db()->prepare($sql);
|
||||
$stmt->execute($params);
|
||||
$restaurants = $stmt->fetchAll();
|
||||
|
||||
if (empty($restaurants)) {
|
||||
echo '<p>No restaurants found matching your criteria.</p>';
|
||||
} else {
|
||||
foreach ($restaurants as $restaurant) {
|
||||
// Get cuisines for this restaurant
|
||||
$cuisine_sql = "SELECT c.name FROM cuisines c JOIN restaurant_cuisines rc ON c.id = rc.cuisine_id WHERE rc.restaurant_id = ?";
|
||||
@ -147,185 +40,28 @@
|
||||
$restaurant_cuisines_list = $cuisine_stmt->fetchAll(PDO::FETCH_COLUMN);
|
||||
|
||||
echo '<a href="menu.php?restaurant_id=' . htmlspecialchars($restaurant['id']) . '" class="restaurant-card">';
|
||||
echo '<img src="' . htmlspecialchars($restaurant['image_url'] ? $restaurant['image_url'] : 'assets/images/hero.jpg') . '" alt="' . htmlspecialchars($restaurant['name']) . '">';
|
||||
echo '<div class="restaurant-card-content">';
|
||||
echo '<div class="card-image" style="background-image: url(\\''.htmlspecialchars($restaurant['image_url'] ? $restaurant['image_url'] : 'assets/images/hero.jpg').'\\\')"></div>';
|
||||
echo '<div class="card-content">';
|
||||
echo '<h3>' . htmlspecialchars($restaurant['name']) . '</h3>';
|
||||
echo '<p>' . htmlspecialchars(implode(', ', $restaurant_cuisines_list)) . '</p>';
|
||||
echo '<p class="cuisine-tags">' . htmlspecialchars(implode(', ', $restaurant_cuisines_list)) . '</p>';
|
||||
echo '<div class="restaurant-info">';
|
||||
if ($restaurant['rating_count'] > 0) {
|
||||
echo '<div class="rating-display">';
|
||||
echo '<span class="star">★</span>';
|
||||
echo '<span>' . htmlspecialchars(number_format($restaurant['average_rating'], 1)) . '</span>';
|
||||
echo '</div>';
|
||||
if ($restaurant['average_rating']) {
|
||||
echo '<div class="rating-display"><span class="star">★</span> ' . number_format($restaurant['average_rating'], 1) . '</div>';
|
||||
} else {
|
||||
echo '<div class="rating-display"><span class="rating-count">No ratings yet</span></div>';
|
||||
echo '<div class="rating-display">New</div>';
|
||||
}
|
||||
echo '<div class="delivery-info">25-35 min</div>';
|
||||
echo '</div>';
|
||||
echo '</div>';
|
||||
echo '</a>';
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<div class="see-all-container">
|
||||
<a href="index.php" class="see-all-btn">See all restaurants</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<div id="map-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close-button">×</span>
|
||||
<h2>Pin Your Location</h2>
|
||||
<div id="map" style="height: 400px;"></div>
|
||||
<p id="map-message"></p>
|
||||
<button id="confirm-location-button">Confirm Location</button>
|
||||
<button id="cancel-location-button">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const pinLocationButton = document.getElementById('pin-location');
|
||||
const myLocationButton = document.getElementById('my-location');
|
||||
const locationActions = document.querySelector('.location-actions');
|
||||
const addressDisplay = document.getElementById('address-display');
|
||||
|
||||
const mapModal = document.getElementById('map-modal');
|
||||
const closeModalButton = mapModal.querySelector('.close-button');
|
||||
const confirmLocationButton = document.getElementById('confirm-location-button');
|
||||
const cancelLocationButton = document.getElementById('cancel-location-button');
|
||||
const mapMessage = document.getElementById('map-message');
|
||||
|
||||
let map;
|
||||
let marker;
|
||||
|
||||
const majuroBounds = {
|
||||
minLat: 7.05,
|
||||
maxLat: 7.15,
|
||||
minLng: 171.17,
|
||||
maxLng: 171.39
|
||||
};
|
||||
|
||||
function isWithinMajuro(lat, lng) {
|
||||
return lat >= majuroBounds.minLat && lat <= majuroBounds.maxLat &&
|
||||
lng >= majuroBounds.minLng && lng <= majuroBounds.maxLng;
|
||||
}
|
||||
|
||||
function openMapModal(lat, lng) {
|
||||
mapModal.style.display = 'block';
|
||||
if (!map) {
|
||||
map = L.map('map').setView([7.09, 171.28], 12);
|
||||
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.setView([lat, lng], 14);
|
||||
if (marker) {
|
||||
marker.setLatLng([lat, lng]);
|
||||
} else {
|
||||
marker = L.marker([lat, lng], { draggable: true }).addTo(map);
|
||||
}
|
||||
mapMessage.textContent = '';
|
||||
}
|
||||
|
||||
function closeMapModal() {
|
||||
mapModal.style.display = 'none';
|
||||
}
|
||||
|
||||
pinLocationButton.addEventListener('click', function() {
|
||||
openMapModal(7.09, 171.28);
|
||||
});
|
||||
|
||||
myLocationButton.addEventListener('click', function() {
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(function(position) {
|
||||
const lat = position.coords.latitude;
|
||||
const lng = position.coords.longitude;
|
||||
if (isWithinMajuro(lat, lng)) {
|
||||
saveLocation(lat, lng);
|
||||
} else {
|
||||
alert('Sorry, we do not offer services for your current location.');
|
||||
}
|
||||
}, function() {
|
||||
alert('Could not get your location.');
|
||||
});
|
||||
} else {
|
||||
alert('Geolocation is not supported by your browser.');
|
||||
}
|
||||
});
|
||||
|
||||
closeModalButton.addEventListener('click', closeMapModal);
|
||||
cancelLocationButton.addEventListener('click', closeMapModal);
|
||||
|
||||
confirmLocationButton.addEventListener('click', function() {
|
||||
const latlng = marker.getLatLng();
|
||||
if (isWithinMajuro(latlng.lat, latlng.lng)) {
|
||||
saveLocation(latlng.lat, latlng.lng);
|
||||
} else {
|
||||
mapMessage.textContent = 'Sorry, we do not offer services for the location you pinned. Please select a location within Majuro (Rita-Laura).';
|
||||
mapMessage.style.color = 'red';
|
||||
}
|
||||
});
|
||||
|
||||
function saveLocation(lat, lng) {
|
||||
fetch('api/save_location.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ lat: lat, lng: lng })
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
updateLocationUI(lat, lng);
|
||||
closeMapModal();
|
||||
} else {
|
||||
alert(data.message || 'Could not save location.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateLocationUI(lat, lng) {
|
||||
locationActions.innerHTML = `
|
||||
<div class="pinned-location">
|
||||
<span>Pinned: ${lat.toFixed(4)}, ${lng.toFixed(4)}</span>
|
||||
<button id="change-location">Change</button>
|
||||
</div>
|
||||
`;
|
||||
addressDisplay.textContent = `Delivery to: ${lat.toFixed(4)}, ${lng.toFixed(4)}`;
|
||||
document.getElementById('change-location').addEventListener('click', function() {
|
||||
locationActions.innerHTML = `
|
||||
<button class="location-button" id="pin-location">Pin a Location</button>
|
||||
<button class="location-button" id="my-location">My Location</button>
|
||||
`;
|
||||
// Re-add event listeners
|
||||
document.getElementById('pin-location').addEventListener('click', function() { openMapModal(7.09, 171.28); });
|
||||
document.getElementById('my-location').addEventListener('click', function() {
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(function(position) {
|
||||
const lat = position.coords.latitude;
|
||||
const lng = position.coords.longitude;
|
||||
if (isWithinMajuro(lat, lng)) {
|
||||
saveLocation(lat, lng);
|
||||
} else {
|
||||
alert('Sorry, we do not offer services for your current location.');
|
||||
}
|
||||
}, function() {
|
||||
alert('Could not get your location.');
|
||||
});
|
||||
} else {
|
||||
alert('Geolocation is not supported by your browser.');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// On page load, check if location is in session
|
||||
<?php if (isset($_SESSION['delivery_location'])):
|
||||
echo "updateLocationUI(" . $_SESSION['delivery_location']['lat'] . ", " . $_SESSION['delivery_location']['lng'] . ");";
|
||||
endif; ?>
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php include 'footer.php'; ?>
|
||||
Loading…
x
Reference in New Issue
Block a user