diff --git a/assets/css/main.css b/assets/css/main.css index 41be8532..3906c7dd 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,1548 +1,473 @@ -/* Global Styles & Variables */ +/* +MajuroEats Theme +*/ + :root { - --coral: #FF6B6B; - --sandy-beige: #F4E8D8; - --turquoise: #40E0D0; - --ocean-blue: #1E90FF; - --white: #FFFFFF; - --off-white: #f8f9fa; - --text-color: #333; - --light-gray: #f2f2f2; - --medium-gray: #ccc; - --dark-gray: #555; + --coral: #FF6F61; + --orange: #FF9A8B; + --ocean-blue: #00A7E1; + --palm-green: #3D9970; + --coconut-white: #FFFFFF; + --sand: #F4F1EA; + --text-dark: #333333; + --text-light: #666666; + --border-color: #EAEAEA; - --font-heading: 'Poppins', sans-serif; - --font-body: 'Lato', sans-serif; - - --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08); - --border-radius: 16px; + --font-family: 'Nunito', sans-serif; + --border-radius: 12px; + --shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.07); + --shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.1); + --transition: all 0.3s ease-in-out; } +/* --- Global Styles --- */ body { - font-family: var(--font-body); - color: var(--text-color); - background-color: var(--off-white); + font-family: var(--font-family); + background-color: var(--sand); + color: var(--text-dark); margin: 0; - padding: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -h1, h2, h3, h4, h5, h6 { - font-family: var(--font-heading); - font-weight: 600; -} - -a { - text-decoration: none; - color: var(--coral); - transition: color 0.3s ease; -} - -a:hover { - color: var(--turquoise); + padding-top: 80px; /* Space for fixed header */ } .container { max-width: 1200px; margin: 0 auto; - padding: 20px; + padding: 0 20px; } -/* Header styles */ -header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 15px 30px; - background-color: var(--white); - border-bottom: 1px solid var(--light-gray); - position: sticky; +a { + text-decoration: none; + color: var(--coral); + transition: var(--transition); +} + +a:hover { + opacity: 0.8; +} + +img { + max-width: 100%; + height: auto; +} + +main { + display: block; /* For older browsers */ +} + +.page-content { + padding-top: 40px; + padding-bottom: 40px; +} + +.section-title { + font-size: 2.5rem; + font-weight: 800; + text-align: center; + margin-bottom: 40px; + color: var(--text-dark); +} + +/* --- Navigation Bar --- */ +.main-header { + background-color: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--border-color); + box-shadow: var(--shadow-soft); + position: fixed; top: 0; - z-index: 100; + left: 0; + width: 100%; + z-index: 1000; + height: 80px; +} + +.main-nav { + display: flex; + align-items: center; + justify-content: space-between; + height: 100%; } .logo { - font-family: var(--font-heading); - font-size: 28px; - font-weight: 700; - color: var(--text-color); -} - -.address-container { - cursor: pointer; - padding: 8px 12px; - border-radius: 20px; - background-color: var(--off-white); - transition: background-color 0.3s ease; -} - -.address-container:hover { - background-color: var(--light-gray); -} - -.address-display { - font-size: 14px; - font-weight: 500; -} - -.user-actions { display: flex; align-items: center; + gap: 10px; + font-size: 1.8rem; + font-weight: 800; + color: var(--text-dark); } -.user-actions a { - margin-left: 20px; - font-weight: 600; - font-size: 15px; +.logo-icon { + font-size: 2rem; } -/* Modal styles */ -.modal { +.nav-links { + display: flex; + list-style: none; + margin: 0; + padding: 0; + gap: 30px; +} + +.nav-links a { + color: var(--text-light); + font-weight: 700; + font-size: 1rem; + padding: 10px 0; + border-bottom: 2px solid transparent; +} + +.nav-links a:hover, .nav-links a.active { + color: var(--coral); + border-bottom-color: var(--coral); +} + +.nav-actions { + display: flex; + align-items: center; + gap: 15px; +} + +.nav-link-button { + color: var(--text-light); + font-weight: 700; + font-size: 1rem; +} + +.nav-button { + padding: 10px 20px; + border-radius: 50px; + font-weight: 700; + font-size: 1rem; + border: 2px solid var(--coral); +} + +.nav-button.primary { + background-color: var(--coral); + color: var(--coconut-white); +} + +.nav-button.primary:hover { + background-color: transparent; + color: var(--coral); +} + +.hamburger { display: none; - position: fixed; - z-index: 1000; - left: 0; + background: none; + border: none; + cursor: pointer; + padding: 0; +} + +.hamburger span { + display: block; + width: 25px; + height: 3px; + background-color: var(--text-dark); + margin: 5px 0; + transition: var(--transition); +} + +/* --- Hero Section --- */ +.hero-section { + position: relative; + background-image: url('../assets/pasted-20251016-062926-8620c9e4.jpg'); + background-size: cover; + background-position: center; + color: var(--coconut-white); + padding: 120px 0; + text-align: center; +} + +.hero-overlay { + position: absolute; top: 0; + left: 0; width: 100%; height: 100%; - overflow: auto; - background-color: rgba(0,0,0,0.5); - backdrop-filter: blur(5px); + background: linear-gradient(45deg, var(--orange), var(--coral)); + opacity: 0.85; } -.modal-content { - background-color: var(--white); - margin: 15% auto; - padding: 30px; - border: none; - width: 90%; - max-width: 500px; - border-radius: var(--border-radius); - box-shadow: 0 10px 30px rgba(0,0,0,0.1); - text-align: center; + +.hero-content-container { position: relative; + z-index: 2; } -.close-button { - color: var(--medium-gray); - position: absolute; - top: 15px; - right: 20px; - font-size: 32px; - font-weight: bold; - transition: color 0.3s ease; + +.hero-content h1 { + font-size: 3.5rem; + font-weight: 800; + margin: 0 0 15px; + text-shadow: 0 3px 10px rgba(0,0,0,0.2); } -.close-button:hover, -.close-button:focus { - color: var(--dark-gray); - text-decoration: none; - cursor: pointer; + +.hero-content p { + font-size: 1.25rem; + margin: 0 0 30px; + opacity: 0.9; } -#modal-address-input { - width: calc(100% - 40px); - padding: 12px; - margin-top: 10px; + +.location-actions { + display: flex; + justify-content: center; + gap: 20px; margin-bottom: 20px; - border: 1px solid var(--light-gray); - border-radius: 8px; - font-size: 16px; -} -#save-address-button { - background-color: var(--coral); - color: white; - padding: 12px 25px; - border: none; - border-radius: 8px; - cursor: pointer; - font-size: 16px; - font-weight: 600; - transition: background-color 0.3s ease; -} -#save-address-button:hover { - background-color: #ff4f4f; } - -/* Animations */ -@keyframes fadeIn { - from { opacity: 0; transform: translateY(-10px); } - to { opacity: 1; transform: translateY(0); } -} - -.fade-in { - animation: fadeIn 0.5s ease-in-out forwards; -} - -/* Restaurant Grid */ -.page-title { - font-size: 2rem; +.location-button { + padding: 15px 30px; + border-radius: 50px; font-weight: 700; - margin-bottom: 1.5rem; + font-size: 1.1rem; + border: 2px solid var(--coconut-white); + cursor: pointer; + transition: var(--transition); +} + +.location-button.primary { + background-color: var(--coconut-white); + color: var(--coral); +} + +.location-button.primary:hover { + background-color: transparent; + color: var(--coconut-white); +} + +.location-button.secondary { + background-color: transparent; + color: var(--coconut-white); +} + +.location-button.secondary:hover { + background-color: var(--coconut-white); + color: var(--coral); +} + +.find-restaurants-btn { + display: inline-block; + background-color: var(--palm-green); + color: var(--coconut-white); + padding: 18px 40px; + border-radius: 50px; + font-size: 1.2rem; + font-weight: 800; + margin-bottom: 20px; + box-shadow: var(--shadow-medium); +} + +.delivery-note { + font-size: 0.9rem; + opacity: 0.8; +} + +/* --- Promo Section --- */ +.promo-section { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 30px; + margin-bottom: 60px; +} + +.promo-card { + background: var(--coconut-white); + padding: 30px; + border-radius: var(--border-radius); + text-align: center; + box-shadow: var(--shadow-soft); + transition: var(--transition); +} + +.promo-card:hover { + transform: translateY(-10px); + box-shadow: var(--shadow-medium); +} + +.promo-card h3 { + font-size: 1.5rem; + font-weight: 800; + color: var(--ocean-blue); + margin: 0 0 10px; +} + +.promo-card p { + font-size: 1rem; + color: var(--text-light); + margin: 0; +} + +/* --- Featured Restaurants --- */ +.featured-restaurants { + margin-bottom: 60px; } .restaurant-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); - gap: 2rem; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; } .restaurant-card { - background-color: var(--white); + background: var(--coconut-white); border-radius: var(--border-radius); box-shadow: var(--shadow-soft); overflow: hidden; - transition: all 0.3s ease-in-out; - display: flex; - flex-direction: column; - text-decoration: none; - color: inherit; + transition: var(--transition); + color: var(--text-dark); } .restaurant-card:hover { - transform: translateY(-5px); - box-shadow: 0 8px 20px rgba(0,0,0,0.12); + transform: translateY(-10px); + box-shadow: var(--shadow-medium); } -.restaurant-card img { - width: 100%; +.card-image { height: 200px; - object-fit: cover; + background-size: cover; + background-position: center; } -.restaurant-card-content { - padding: 1rem; - display: flex; - flex-direction: column; - flex-grow: 1; +.card-content { + padding: 20px; } -.restaurant-card-content h3 { - font-size: 1.15rem; - font-weight: 700; - margin-bottom: 0.25rem; +.card-content h3 { + font-size: 1.4rem; + font-weight: 800; + margin: 0 0 5px; } -.restaurant-card-content p { - color: var(--dark-gray); +.cuisine-tags { font-size: 0.9rem; - margin-bottom: 0.5rem; + color: var(--text-light); + margin: 0 0 15px; } .restaurant-info { display: flex; justify-content: space-between; align-items: center; - margin-top: auto; + font-size: 1rem; + font-weight: 700; } .rating-display { display: flex; align-items: center; - font-size: 0.9rem; - font-weight: 600; - color: var(--text-color); + gap: 5px; } .rating-display .star { - color: #FFC107; - margin-right: 0.25rem; + color: #FFC700; + font-size: 1.2rem; } .delivery-info { - font-size: 0.9rem; - font-weight: 600; - color: var(--dark-gray); + color: var(--text-light); } -footer { +.see-all-container { text-align: center; - padding: 3rem 0; - margin-top: 3rem; - background-color: var(--white); - border-top: 1px solid var(--light-gray); + margin-top: 40px; } -/* Restaurant Menu Page */ -.restaurant-hero-menu { - position: relative; - height: 350px; - background-size: cover; - background-position: center; - display: flex; - flex-direction: column; - justify-content: flex-end; - padding: 3rem; - color: var(--white); - border-radius: 0 0 var(--border-radius) var(--border-radius); - overflow: hidden; - margin-bottom: 3rem; -} - -.restaurant-hero-menu::after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 100%); -} - -.restaurant-hero-menu-content { - position: relative; - z-index: 1; -} - -.restaurant-hero-menu h1 { - font-size: 3rem; - font-weight: 700; - margin: 0 0 0.5rem; - text-shadow: 0 2px 8px rgba(0,0,0,0.7); -} - -.restaurant-hero-menu p { - font-size: 1.1rem; - margin: 0.25rem 0; - text-shadow: 0 1px 5px rgba(0,0,0,0.6); -} - -/* Menu Grid */ -.menu-grid { - display: grid; - grid-template-columns: 1fr; - gap: 1.5rem; -} - -.menu-item-card { - background-color: var(--white); - border-radius: var(--border-radius); - box-shadow: var(--shadow-soft); - overflow: hidden; - transition: all 0.3s ease-in-out; - display: flex; - justify-content: space-between; - padding: 1.5rem; -} - -.menu-item-card:hover { - transform: translateY(-5px); - box-shadow: 0 8px 20px rgba(0,0,0,0.12); -} - -.menu-item-image { - width: 120px; - height: 120px; - object-fit: cover; - border-radius: 12px; - margin-left: 1.5rem; -} - -.menu-item-card-content { - padding: 0; - display: flex; - flex-direction: column; - flex-grow: 1; -} - -.menu-item-card-content h3 { - font-size: 1.2rem; - font-weight: 700; - margin: 0 0 0.5rem; -} - -.menu-item-card-content .description { - font-size: 0.9rem; - color: var(--dark-gray); - margin-bottom: 1rem; - flex-grow: 1; -} - -.menu-item-card-content .price { +.see-all-btn { + background-color: var(--coral); + color: var(--coconut-white); + padding: 15px 35px; + border-radius: 50px; font-size: 1.1rem; font-weight: 700; - color: var(--text-color); -} - -/* Reviews Section */ -.reviews-section { - background-color: var(--white); - padding: 2rem; - border-radius: var(--border-radius); - box-shadow: var(--shadow-soft); - position: sticky; - top: 120px; /* Adjust based on header height */ -} - -.review-card { - border-bottom: 1px solid var(--light-gray); - padding: 1.5rem 0; -} - -.review-card:last-child { - border-bottom: none; - padding-bottom: 0; -} - -.review-card:first-child { - padding-top: 0; -} - -.review-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 0.5rem; -} - -.review-header strong { - font-size: 1rem; -} - -.review-text { - font-style: italic; - color: var(--dark-gray); - margin-bottom: 0.5rem; -} - - -/* Rating Section on Menu Page */ -.rating-form-container { - background-color: var(--white); - padding: 2rem; - border-radius: var(--border-radius); - box-shadow: var(--shadow-soft); - margin-top: 2rem; -} - -.rating-form-container h2 { - margin-top: 0; -} - -.rate-form .stars { - font-size: 2rem; - color: var(--medium-gray); - cursor: pointer; - direction: rtl; - display: inline-block; -} - -.rate-form .stars > label { - color: var(--medium-gray); - transition: color 0.2s; -} - -.rate-form .stars > input { - display: none; -} - -.rate-form .stars > input:checked ~ label, -.rate-form .stars:not(:hover) > input:checked ~ label { - color: #FFC107 !important; -} - -.rate-form .stars > label:hover, -.rate-form .stars > label:hover ~ label { - color: #FFC107 !important; -} - -.rate-form button { - background-color: var(--coral); - color: white; - border: none; - padding: 10px 20px; - border-radius: 8px; - cursor: pointer; - font-size: 1rem; - font-weight: 600; - margin-top: 1rem; - transition: background-color 0.3s ease; -} - -.rate-form button:hover { - background-color: #ff4f4f; -} - -/* Auth Forms */ -.auth-container { - max-width: 450px; - margin: 4rem auto; - padding: 3rem; - background-color: var(--white); - border-radius: var(--border-radius); - box-shadow: var(--shadow-soft); -} - -.auth-container h1 { - text-align: center; - margin-bottom: 2rem; - font-size: 2rem; -} - -.form-group { - margin-bottom: 1.5rem; -} - -.form-group label { - display: block; - margin-bottom: 0.5rem; - font-weight: 600; - color: var(--dark-gray); -} - -.form-group input { - width: 100%; - padding: 0.8rem 1rem; - border: 1px solid var(--medium-gray); - border-radius: 8px; - box-sizing: border-box; - font-size: 1rem; - transition: border-color 0.3s; -} - -.form-group input:focus { - outline: none; - border-color: var(--coral); -} - -.btn-submit { - width: 100%; - padding: 0.9rem; - border: none; - border-radius: 8px; - background-color: var(--coral); - color: white; - font-size: 1.1rem; - font-weight: 600; - cursor: pointer; - transition: background-color 0.3s; -} - -.btn-submit:hover { - background-color: #ff4f4f; -} - -.form-footer { - text-align: center; - margin-top: 1.5rem; -} - -.form-footer a { - color: var(--coral); - font-weight: 600; - text-decoration: none; -} - -.form-footer a:hover { - text-decoration: underline; -} - -/* Add to Cart Form */ -.add-to-cart-form { - margin-top: 1rem; -} - -.add-to-cart-form .form-row { - display: flex; - align-items: center; -} - -.quantity-input { - width: 60px; - padding: 0.5rem; - text-align: center; - border: 1px solid var(--medium-gray); - border-radius: 8px; - font-size: 1rem; - margin-right: 0.5rem; -} - -.add-to-cart-btn { - flex-grow: 1; - background-color: var(--coral); - color: white; - border: none; - padding: 0.6rem 1rem; - border-radius: 8px; - cursor: pointer; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - transition: background-color 0.3s; -} - -.add-to-cart-btn:hover { - background-color: #ff4f4f; -} - -/* Cart Icon */ -.cart-icon { - position: relative; - display: inline-block; - margin-right: 20px; - color: var(--text-color); -} - -.cart-item-count { - position: absolute; - top: -8px; - right: -8px; - background-color: var(--coral); - color: white; - border-radius: 50%; - padding: 2px 6px; - font-size: 12px; - font-weight: bold; -} - -/* Cart Page */ -.cart-table { - width: 100%; - border-collapse: collapse; - margin: 2rem 0; - box-shadow: var(--shadow-soft); - border-radius: var(--border-radius); - overflow: hidden; -} - -.cart-table thead { - background-color: var(--off-white); -} - -.cart-table th, .cart-table td { - padding: 1rem 1.5rem; - text-align: left; -} - -.cart-table th { - font-weight: 600; - font-size: 0.9rem; - text-transform: uppercase; - color: var(--dark-gray); -} - -.cart-table tbody tr { - border-bottom: 1px solid var(--light-gray); -} - -.cart-table tbody tr:last-child { - border-bottom: none; -} - -.cart-table .update-form { - display: flex; - align-items: center; -} - -.cart-table .quantity-input { - width: 50px; - margin-right: 0.5rem; -} - -.cart-table .update-btn { - background-color: var(--turquoise); - color: white; - border: none; - padding: 0.4rem 0.8rem; - border-radius: 6px; - cursor: pointer; - font-size: 0.8rem; - font-weight: 600; - transition: background-color 0.3s; -} - -.cart-table .update-btn:hover { - background-color: #38d8c9; -} - -.cart-table .remove-link { - color: var(--coral); - font-weight: 600; - font-size: 0.9rem; -} - -.cart-total { - text-align: right; - margin-top: 1.5rem; - font-size: 1.25rem; - font-weight: 700; -} - -.cart-actions { - display: flex; - justify-content: flex-end; - align-items: center; - margin-top: 2rem; - gap: 1rem; -} - -.clear-cart-btn, .checkout-btn { - padding: 0.8rem 1.5rem; - border-radius: 8px; - font-weight: 600; - text-transform: uppercase; - font-size: 0.9rem; - transition: all 0.3s; -} - -.clear-cart-btn { - background-color: transparent; - border: 2px solid var(--medium-gray); - color: var(--dark-gray); -} - -.clear-cart-btn:hover { - background-color: var(--light-gray); - border-color: var(--dark-gray); -} - -.checkout-btn { - background-color: var(--coral); - color: white; border: 2px solid var(--coral); + transition: var(--transition); } -.checkout-btn:hover { - background-color: #ff4f4f; - border-color: #ff4f4f; -} - -/* Checkout Page */ -.checkout-summary { - max-width: 700px; - margin: 2rem auto; - padding: 2rem; - background-color: var(--white); - border-radius: var(--border-radius); - box-shadow: var(--shadow-soft); -} - -.checkout-summary h2 { - text-align: center; - margin-bottom: 2rem; -} - -.checkout-form { - text-align: center; - margin-top: 2rem; -} - -/* Order Confirmation Page */ -.order-confirmation { - max-width: 600px; - margin: 4rem auto; - padding: 3rem; - text-align: center; - background-color: var(--white); - border-radius: var(--border-radius); - box-shadow: var(--shadow-soft); -} - -.order-confirmation h1 { - color: var(--ocean-blue); - font-size: 2.5rem; - margin-bottom: 1rem; -} - -.order-confirmation p { - font-size: 1.1rem; - color: var(--dark-gray); - margin-bottom: 2rem; -} - -.order-confirmation .btn { - background-color: var(--coral); - color: white; - padding: 0.8rem 2rem; - border-radius: 8px; - font-weight: 600; - text-transform: uppercase; - font-size: 1rem; - transition: background-color 0.3s; -} - -.order-confirmation .btn:hover { - background-color: #ff4f4f; -} - -/* Search and Filter */ -.search-form { - display: flex; - gap: 1rem; - align-items: center; -} - -.search-bar, -.cuisine-filter { - padding: 1rem; - font-size: 1rem; - border-radius: 50px; - border: none; - box-shadow: var(--shadow-soft); -} - -.search-bar { - flex-grow: 1; - padding-left: 3rem; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: 1rem center; -} - -.cuisine-filter { - background-color: var(--white); -} - -.search-button { - background-color: var(--coral); - color: white; - border: none; - padding: 1rem 2rem; - border-radius: 50px; - cursor: pointer; - font-size: 1rem; - font-weight: 600; - transition: background-color 0.3s; -} - -.search-button:hover { - background-color: #ff4f4f; -} - -/* Filter Bar */ -.filter-bar { - margin-top: 1.5rem; - display: flex; - justify-content: center; -} - -.filter-dropdown { - position: relative; - display: inline-block; -} - -.filter-button { - background-color: rgba(255, 255, 255, 0.2); - color: var(--white); - padding: 12px 24px; - font-size: 1rem; - font-weight: 600; - border: 1px solid rgba(255, 255, 255, 0.5); - border-radius: 50px; - cursor: pointer; - display: flex; - align-items: center; - gap: 8px; - transition: all 0.3s ease; -} - -.filter-button:hover { - background-color: rgba(255, 255, 255, 0.3); - border-color: var(--white); -} - -.filter-button-icon { - transition: transform 0.3s ease; -} - -.filter-options { - display: none; - position: absolute; - background-color: var(--white); - min-width: 200px; - box-shadow: var(--shadow-soft); - border-radius: var(--border-radius); - z-index: 1; - margin-top: 8px; - padding: 8px 0; - max-height: 300px; - overflow-y: auto; -} - -.filter-option { - color: var(--text-color); - padding: 12px 20px; - text-decoration: none; - display: block; - font-weight: 500; - transition: background-color 0.2s ease; -} - -.filter-option:hover, .filter-option.active { - background-color: var(--light-gray); +.see-all-btn:hover { + background-color: transparent; color: var(--coral); } -.filter-dropdown:hover .filter-options { - display: block; -} - -.filter-dropdown:hover .filter-button-icon { - transform: rotate(180deg); -} - -.location-actions { - margin-top: 15px; - display: flex; - gap: 10px; - justify-content: center; -} - -.location-button { - background-color: rgba(255, 255, 255, 0.2); - border: 1px solid rgba(255, 255, 255, 0.5); - color: white; - border-radius: 50px; - padding: 10px 20px; - cursor: pointer; - font-size: 1rem; - font-weight: 600; - transition: all 0.3s ease; -} - -.location-button:hover { - background-color: rgba(255, 255, 255, 0.3); - border-color: var(--white); -} - -/* Star Rating Styles */ -.rating { - display: inline-block; - font-size: 2rem; - direction: rtl; /* Right-to-left to fill stars from right */ -} - -.rating input { - display: none; -} - -.rating label { - color: #ddd; /* Default empty star color */ - cursor: pointer; - padding: 0 0.1em; - transition: color 0.2s; -} - -.rating label:hover, -.rating label:hover ~ label, -.rating input:checked ~ label { - color: #FFC107; /* Filled star color */ -} - -.row { - display: flex; - flex-wrap: wrap; - margin: 0 -15px; -} -.col-md-3 { - width: 25%; - padding: 0 15px; -} -.col-md-9 { - width: 75%; - padding: 0 15px; -} -.form-check { - margin-bottom: 10px; -} -.btn { - padding: 8px 15px; - border-radius: 5px; - text-decoration: none; - cursor: pointer; - display: inline-block; +/* --- Footer --- */ +.main-footer { + background-color: var(--text-dark); + color: var(--sand); + padding: 40px 0; text-align: center; } -.btn-primary { - background-color: #007bff; - color: white; - border: 1px solid #007bff; -} -.btn-secondary { - background-color: #6c757d; - color: white; - border: 1px solid #6c757d; -} -.mt-3 { - margin-top: 1rem; -} -.search-form { - display: flex; -} -.search-bar { - flex-grow: 1; -} - -/* Cuisine Carousel */ -.cuisine-carousel { - display: flex; - overflow-x: auto; - padding-bottom: 1rem; - margin-bottom: 1.5rem; - scrollbar-width: thin; /* For Firefox */ - scrollbar-color: var(--medium-gray) var(--light-gray); -} - -.cuisine-carousel::-webkit-scrollbar { - height: 8px; -} - -.cuisine-carousel::-webkit-scrollbar-track { - background: var(--light-gray); - border-radius: 10px; -} - -.cuisine-carousel::-webkit-scrollbar-thumb { - background-color: var(--medium-gray); - border-radius: 10px; -} - -.cuisine-card { - position: relative; - margin-right: 1rem; -} - -.cuisine-card input[type="checkbox"] { - position: absolute; - opacity: 0; - width: 100%; - height: 100%; - cursor: pointer; -} - -.cuisine-card label { - display: block; - padding: 0.75rem 1.5rem; - border: 1px solid var(--medium-gray); - border-radius: 50px; - background-color: var(--white); - color: var(--text-color); - font-weight: 600; - white-space: nowrap; - transition: all 0.3s ease; -} - -.cuisine-card input[type="checkbox"]:checked + label { - background-color: var(--coral); - color: var(--white); - border-color: var(--coral); -} - -.cuisine-card label:hover { - background-color: var(--light-gray); -} - -.cuisine-card input[type="checkbox"]:checked + label:hover { - background-color: #ff4f4f; -} - -/* New Filter Bar */ -.filter-bar-new { - display: flex; - align-items: center; - gap: 1.5rem; - margin-bottom: 2rem; - background-color: var(--white); - padding: 1rem; - border-radius: var(--border-radius); - box-shadow: var(--shadow-soft); -} - -.filter-bar-new .form-group, -.filter-bar-new .form-check { - margin-bottom: 0; -} - -.filter-bar-new .form-control { - border-radius: 50px; - border: 1px solid var(--medium-gray); - padding: 0.5rem 1rem; -} - -.filter-bar-new .form-check-label { - font-weight: 600; -} - -.filter-bar-new .btn-secondary { - margin-left: auto; -} - -/* Remove old column styles */ -.row { - display: block; -} -.col-md-3, -.col-md-9 { - width: 100%; - padding: 0; -} - -/* Categories Section */ -.categories-section { - margin-bottom: 3rem; -} - -.category-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 1.5rem; -} - -.category-card { - position: relative; - border-radius: var(--border-radius); - overflow: hidden; - height: 150px; - display: flex; - align-items: flex-end; - justify-content: center; - text-decoration: none; - color: var(--white); - transition: transform 0.3s ease, box-shadow 0.3s ease; -} - -.category-card:hover { - transform: translateY(-5px); - box-shadow: 0 10px 20px rgba(0,0,0,0.2); -} - -.category-card img { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; - z-index: 1; - transition: transform 0.3s ease; -} - -.category-card:hover img { - transform: scale(1.05); -} - -.category-card-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%); - z-index: 2; -} - -.category-card h3 { - position: relative; - z-index: 3; - margin: 0; - padding: 1rem; - font-size: 1.2rem; - font-weight: 700; - text-align: center; - text-shadow: 0 2px 4px rgba(0,0,0,0.5); -} - -/* New Checkout Styles */ -.checkout-container { - display: flex; - min-height: 100vh; - background-color: var(--white); -} - -.checkout-main { - flex-grow: 1; - padding: 2rem 4rem; - display: flex; - flex-direction: column; -} - -.checkout-header { - margin-bottom: 3rem; -} - -.checkout-logo { - display: flex; - align-items: center; - gap: 0.75rem; - font-size: 1.5rem; - font-weight: 700; - color: var(--text-color); -} - -.step-title { - font-size: 1.75rem; - margin-bottom: 2rem; -} - -#delivery-form .form-group { - margin-bottom: 1.5rem; -} - -#delivery-form .form-control { - padding: 1rem; - font-size: 1rem; - border-radius: 8px; - border: 1px solid var(--medium-gray); -} - -.btn-primary { - width: 100%; - padding: 1rem; - font-size: 1.1rem; - font-weight: 600; - border-radius: 8px; - background-color: var(--coral); - color: white; - border: none; - cursor: pointer; - transition: background-color 0.3s; -} - -.btn-primary:hover { - background-color: #ff4f4f; -} - -.payment-methods { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1.5rem; - margin-bottom: 2rem; -} - -.payment-method-card { - border: 1px solid var(--medium-gray); - border-radius: 12px; - cursor: pointer; - transition: border-color 0.3s, box-shadow 0.3s; -} - -.payment-method-card:has(input:checked) { - border-color: var(--coral); - box-shadow: 0 0 0 2px var(--coral); -} - -.payment-method-card label { - display: flex; - align-items: center; - gap: 1rem; - padding: 1.5rem; - font-size: 1.1rem; - font-weight: 600; -} - -.payment-method-card input[type="radio"] { - display: none; -} - -.payment-method-card svg { - width: 32px; - height: 32px; -} - -#paypal-button-container { - margin-top: 1rem; -} - -.btn-secondary { - width: 100%; - padding: 1rem; - font-size: 1.1rem; - font-weight: 600; - border-radius: 8px; - background-color: transparent; - color: var(--dark-gray); - border: 1px solid var(--medium-gray); - cursor: pointer; - margin-top: 1rem; - transition: background-color 0.3s, border-color 0.3s; -} - -.btn-secondary:hover { - background-color: var(--light-gray); - border-color: var(--dark-gray); -} - -.checkout-summary { - width: 450px; - background-color: var(--off-white); - padding: 2rem; - border-left: 1px solid var(--light-gray); - display: flex; - flex-direction: column; -} - -.checkout-summary h4 { - font-size: 1.5rem; - margin-bottom: 2rem; -} - -.summary-items { - flex-grow: 1; -} - -.summary-item { - display: flex; - justify-content: space-between; - margin-bottom: 1rem; - font-size: 1rem; -} - -.item-name { - color: var(--dark-gray); -} - -.item-price { - font-weight: 600; -} - -.summary-total { - border-top: 1px solid var(--medium-gray); - padding-top: 1.5rem; -} - -.summary-line { - display: flex; - justify-content: space-between; - margin-bottom: 0.75rem; - font-size: 1rem; -} - -.summary-line.discount { - color: #28a745; -} - -.summary-line.total { - font-size: 1.25rem; - font-weight: 700; - margin-top: 1rem; -} - -/* Order Confirmation Page Refined */ -.card.shadow-sm { - border: none; - border-radius: var(--border-radius); - box-shadow: var(--shadow-soft); -} - -.card-header.bg-success { - background-color: var(--coral) !important; - border-bottom: none; - border-radius: var(--border-radius) var(--border-radius) 0 0; -} -.card-header h2 { - font-size: 1.75rem; - color: var(--white); -} - -.card-body .lead { - font-size: 1.2rem; - font-weight: 500; - color: var(--dark-gray); -} - -.card-body h5 { - font-size: 1.25rem; - font-weight: 600; - margin-bottom: 1rem; - color: var(--text-color); - border-bottom: 2px solid var(--light-gray); - padding-bottom: 0.5rem; -} - -.badge.bg-warning { - font-size: 0.9rem; - padding: 0.5em 0.75em; - background-color: var(--turquoise) !important; - color: var(--text-color) !important; -} - -.list-group-item { - border-color: var(--light-gray); -} - -.list-group-item span { - font-weight: 600; -} - -.list-group-item.fw-bold { - font-size: 1.1rem; -} - -.order-confirmation-actions .btn { - margin: 0 0.5rem; - padding: 0.8rem 1.5rem; - font-weight: 600; - text-transform: uppercase; - font-size: 0.9rem; - border-radius: 50px; - transition: all 0.3s ease; -} - -.order-confirmation-actions .btn-primary { - background-color: var(--coral); - border-color: var(--coral); -} - -.order-confirmation-actions .btn-primary:hover { - background-color: #ff4f4f; - border-color: #ff4f4f; - transform: translateY(-2px); -} - -.order-confirmation-actions .btn-secondary { - background-color: var(--off-white); - border-color: var(--medium-gray); - color: var(--dark-gray); -} - -.order-confirmation-actions .btn-secondary:hover { - background-color: var(--light-gray); - border-color: var(--dark-gray); - transform: translateY(-2px); -} - -/* Order Status Page */ -.order-status-container { - max-width: 800px; - margin: 2rem auto; - padding: 2rem; - background-color: var(--white); - border-radius: var(--border-radius); - box-shadow: var(--shadow-soft); -} - -.order-status-header { - text-align: center; - margin-bottom: 2.5rem; - border-bottom: 1px solid var(--light-gray); - padding-bottom: 1.5rem; -} - -.order-status-header h1 { - font-size: 2.2rem; - margin-bottom: 0.5rem; -} - -.order-status-header p { - font-size: 1.1rem; - color: var(--dark-gray); -} - -#order-status-timeline { - position: relative; - padding: 1rem 0; -} - -.timeline-item { - display: flex; - position: relative; - padding-left: 60px; /* Space for icon and line */ - padding-bottom: 3rem; -} - -.timeline-item:last-child { - padding-bottom: 0; -} - -.timeline-item::before { - content: ''; - position: absolute; - left: 24px; /* Center the line */ - top: 50px; - width: 2px; - height: calc(100% - 50px); - background-color: var(--light-gray); - transition: background-color 0.5s ease; -} - -.timeline-item:last-child::before { - display: none; -} - -.timeline-icon { - position: absolute; - left: 0; - top: 0; - width: 50px; - height: 50px; - border-radius: 50%; - background-color: var(--light-gray); - color: var(--medium-gray); - display: flex; - align-items: center; - justify-content: center; - font-size: 1.5rem; - z-index: 1; - border: 4px solid var(--off-white); - transition: all 0.5s ease; -} - -.timeline-content { - padding-top: 10px; -} - -.timeline-content h5 { - font-size: 1.2rem; - font-weight: 700; - margin-bottom: 0.25rem; - transition: color 0.5s ease; - border-bottom: none; - padding-bottom: 0; -} - -.timeline-content p { - font-size: 0.95rem; - color: var(--dark-gray); - margin: 0; -} - -/* --- Timeline States --- */ - -/* Default (Not yet active) */ -.timeline-item:not(.timeline-complete):not(.timeline-active) .timeline-icon { - background-color: var(--light-gray); - color: var(--medium-gray); -} - -/* Active State */ -.timeline-active .timeline-icon { - background-color: var(--turquoise); - color: var(--white); - transform: scale(1.1); - box-shadow: 0 0 15px rgba(64, 224, 208, 0.7); -} - -.timeline-active h5 { - color: var(--turquoise); -} - -/* Complete State */ -.timeline-complete::before { - background-color: var(--coral); -} - -.timeline-complete .timeline-icon { - background-color: var(--coral); - color: var(--white); -} - -/* Cancelled State */ -.timeline-cancelled .timeline-icon { - background-color: var(--dark-gray); - color: var(--white); -} - -.timeline-cancelled h5 { - color: var(--dark-gray); - text-decoration: line-through; -} - -.order-status-footer { - text-align: center; - margin-top: 2.5rem; - padding-top: 1.5rem; - border-top: 1px solid var(--light-gray); -} - -.order-status-footer p { - margin-bottom: 1rem; -} +/* --- Responsive Design --- */ +@media (max-width: 992px) { + .nav-links { + display: none; + position: absolute; + top: 80px; + left: 0; + width: 100%; + background-color: var(--coconut-white); + flex-direction: column; + gap: 0; + padding: 20px 0; + box-shadow: var(--shadow-medium); + } + + .nav-links.active { + display: flex; + } + + .nav-links li { + text-align: center; + } + + .nav-links a { + padding: 15px; + display: block; + border-bottom: 1px solid var(--border-color); + } + + .nav-actions { + display: none; /* Simple toggle, for complex logic more JS is needed */ + } + + .nav-actions.active { + display: flex; + position: absolute; + top: calc(80px + 250px); /* Adjust based on nav-links height */ + left: 0; + width: 100%; + background-color: var(--coconut-white); + justify-content: center; + padding: 20px 0; + box-shadow: var(--shadow-medium); + } + + .hamburger { + display: block; + } + + .hero-content h1 { + font-size: 2.8rem; + } +} + +@media (max-width: 768px) { + body { + padding-top: 70px; + } + .main-header, .main-nav { + height: 70px; + } + .nav-links { + top: 70px; + } + .hero-content h1 { + font-size: 2.2rem; + } + .hero-content p { + font-size: 1.1rem; + } + .location-actions { + flex-direction: column; + gap: 15px; + } +} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index 0fdd3ea3..fb8ed395 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -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') || ''; - } + if (hamburger) { + hamburger.addEventListener('click', () => { + navLinks.classList.toggle('active'); + navActions.classList.toggle('active'); }); } - - // 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'; - } - }); - } -}); \ No newline at end of file +}); diff --git a/assets/pasted-20251016-062926-8620c9e4.jpg b/assets/pasted-20251016-062926-8620c9e4.jpg new file mode 100644 index 00000000..ec25caae Binary files /dev/null and b/assets/pasted-20251016-062926-8620c9e4.jpg differ diff --git a/header.php b/header.php index 7ab00b7e..1c387872 100644 --- a/header.php +++ b/header.php @@ -6,68 +6,44 @@ session_start(); - Majuro Eats + MajuroEats - Fast Island Delivery - + - -
- -
- Enter delivery address -
- -
- 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']; - } - } - ?> - - - - - - Welcome, - My Profile - Order History - Logout - - Login - Sign Up - +
+
+
- - - - - - +
\ No newline at end of file diff --git a/hero.php b/hero.php index 32104efc..aee3b438 100644 --- a/hero.php +++ b/hero.php @@ -1,103 +1,15 @@ - - - -
-
-

Everything you crave, delivered.

-

Your favorite local restaurants, delivered to your door.

-
- - -
+
+
+
+

Fast Island Delivery โ€” From Rita to Laura!

+

Get your favorite meals delivered anywhere on Majuro Island.

+
+ + +
+ Find Restaurants +

MajuroEats delivers only within the main island zone (Ritaโ€“Laura).

+
-
+ \ No newline at end of file diff --git a/index.php b/index.php index c1d1b59e..36bd8d9b 100644 --- a/index.php +++ b/index.php @@ -1,331 +1,67 @@ -
-
-

Discover by Category

-
- 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', - ]; +
- foreach ($cuisines as $cuisine): - $image_url = $cuisine_images[$cuisine['name']] ?? 'https://picsum.photos/600?random=' . $cuisine['id']; - ?> - - <?= htmlspecialchars($cuisine['name']) ?> -
-

- - -
-
+
+
+

$0 Delivery Fee

+

On your first order

+
+
+

Earn Rewards

+

With every meal

+
+
+

Support Local

+

Majuro Restaurants

+
+
-
- - - - +
+

Featured Restaurants

+
+ 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 + GROUP BY r.id + ORDER BY average_rating DESC, r.id DESC + LIMIT 6"); + $restaurants = $stmt->fetchAll(PDO::FETCH_ASSOC); -
-
- - -
-
- onchange="this.form.submit()"> - -
- Clear Filters -
- + 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 = ?"; + $cuisine_stmt = db()->prepare($cuisine_sql); + $cuisine_stmt->execute([$restaurant['id']]); + $restaurant_cuisines_list = $cuisine_stmt->fetchAll(PDO::FETCH_COLUMN); - 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"; - } - } - ?> -

-
-
- = ? 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 '

No restaurants found matching your criteria.

'; + echo ''; + echo '
'; + echo '
'; + echo '

' . htmlspecialchars($restaurant['name']) . '

'; + echo '

' . htmlspecialchars(implode(', ', $restaurant_cuisines_list)) . '

'; + echo '
'; + if ($restaurant['average_rating']) { + echo '
โ˜… ' . number_format($restaurant['average_rating'], 1) . '
'; } 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 = ?"; - $cuisine_stmt = db()->prepare($cuisine_sql); - $cuisine_stmt->execute([$restaurant['id']]); - $restaurant_cuisines_list = $cuisine_stmt->fetchAll(PDO::FETCH_COLUMN); - - echo ''; - echo '' . htmlspecialchars($restaurant['name']) . ''; - echo '
'; - echo '

' . htmlspecialchars($restaurant['name']) . '

'; - echo '

' . htmlspecialchars(implode(', ', $restaurant_cuisines_list)) . '

'; - echo '
'; - if ($restaurant['rating_count'] > 0) { - echo '
'; - echo 'โ˜…'; - echo '' . htmlspecialchars(number_format($restaurant['average_rating'], 1)) . ''; - echo '
'; - } else { - echo '
No ratings yet
'; - } - echo '
'; - echo '
'; - echo ''; - } + echo '
New
'; } - ?> -
-
-
-
+ echo '
25-35 min
'; + echo '
'; + echo ''; + echo ''; + } + ?> + +
+ See all restaurants +
+ - - - - - + \ No newline at end of file