 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/gositeme.com/public_html/demo/robert/ |
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu - Restaurant Zellers</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--primary-color: #e63946;
--secondary-color: #ffffff;
--accent-color: #ff4d4d;
--text-color: #333333;
--light-text: #666666;
--background: #ffffff;
--light-background: #ffffff;
--border-radius: 8px;
--box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
.menu-hero {
position: relative;
height: 60vh;
min-height: 500px;
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('images/menu/hero-bg.jpg');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
margin-bottom: 0;
overflow: hidden;
}
.hero-slideshow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hero-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.hero-slide.active {
opacity: 1;
}
.hero-content {
position: relative;
z-index: 2;
padding: 0 20px;
}
.hero-title {
font-size: 4rem;
margin-bottom: 20px;
font-family: 'Playfair Display', serif;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
animation: fadeInUp 1s ease;
}
.title-main {
display: block;
margin-bottom: 10px;
}
.title-sub {
display: block;
font-size: 1.5rem;
font-weight: 300;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.menu-hero-content {
max-width: 800px;
padding: 0 20px;
}
.menu-hero h1 {
font-size: 4rem;
margin-bottom: 20px;
font-family: 'Playfair Display', serif;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
animation: fadeInUp 1s ease;
}
.menu-hero p {
font-size: 1.4rem;
margin-bottom: 30px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
animation: fadeInUp 1s ease 0.2s;
opacity: 0;
animation-fill-mode: forwards;
}
.menu-filters {
background: var(--secondary-color);
padding: 30px 0;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 15px rgba(230, 57, 70, 0.1);
border-bottom: 1px solid rgba(230, 57, 70, 0.1);
}
.search-box {
max-width: 600px;
margin: 0 auto 25px;
position: relative;
}
.search-box input {
width: 100%;
padding: 15px 25px;
border: 2px solid rgba(230, 57, 70, 0.2);
border-radius: 50px;
font-size: 16px;
background: var(--secondary-color);
color: var(--text-color);
transition: var(--transition);
}
.search-box input:focus {
border-color: var(--primary-color);
outline: none;
box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.1);
}
.search-box input::placeholder {
color: var(--light-text);
}
.search-box button {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--primary-color);
font-size: 18px;
cursor: pointer;
}
.filter-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin-bottom: 20px;
}
.filter-btn {
padding: 12px 30px;
border: 2px solid var(--primary-color);
border-radius: 50px;
background: var(--secondary-color);
color: var(--primary-color);
font-weight: 500;
cursor: pointer;
transition: var(--transition);
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.9rem;
}
.filter-btn:hover, .filter-btn.active {
background: var(--primary-color);
color: var(--secondary-color);
transform: translateY(-2px);
}
.dietary-filters {
display: flex;
justify-content: center;
gap: 15px;
}
.dietary-btn {
padding: 8px 20px;
border: 1px solid rgba(230, 57, 70, 0.2);
border-radius: 50px;
background: var(--secondary-color);
color: var(--text-color);
font-size: 14px;
cursor: pointer;
transition: var(--transition);
}
.dietary-btn:hover, .dietary-btn.active {
background: var(--primary-color);
color: var(--secondary-color);
border-color: var(--primary-color);
}
.menu-categories {
padding: 80px 0;
background: var(--light-background);
}
.menu-category {
margin-bottom: 80px;
}
.menu-category h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 50px;
font-family: 'Playfair Display', serif;
color: var(--text-color);
position: relative;
padding-bottom: 20px;
}
.menu-category h2::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background: var(--primary-color);
}
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
padding: 0 20px;
}
.menu-item {
background: var(--secondary-color);
border: 1px solid rgba(230, 57, 70, 0.1);
box-shadow: 0 2px 4px rgba(230, 57, 70, 0.05);
border-radius: 15px;
overflow: hidden;
transition: var(--transition);
}
.menu-item:hover {
box-shadow: 0 8px 15px rgba(230, 57, 70, 0.1);
}
.menu-item-image {
width: 100%;
height: 250px;
object-fit: cover;
transition: var(--transition);
}
.menu-item:hover .menu-item-image {
transform: scale(1.05);
}
.menu-item-content {
padding: 25px;
}
.menu-item-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.menu-item-title {
font-size: 1.4rem;
font-weight: 600;
color: var(--primary-color);
font-family: 'Playfair Display', serif;
}
.menu-item-price {
font-size: 1.4rem;
font-weight: 700;
color: var(--primary-color);
}
.menu-item-description {
color: var(--text-color);
margin-bottom: 20px;
font-size: 1rem;
line-height: 1.6;
}
.menu-item-tags {
display: flex;
gap: 10px;
margin-bottom: 15px;
}
.menu-tag {
padding: 5px 15px;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 500;
}
.tag-vegetarian {
background: #e8f5e9;
color: #2e7d32;
}
.tag-vegan {
background: #f1f8e9;
color: #558b2f;
}
.tag-spicy {
background: #ffebee;
color: #c62828;
}
.menu-item-rating {
display: flex;
align-items: center;
gap: 10px;
}
.stars {
color: var(--primary-color);
}
.review-count {
color: var(--text-color);
font-size: 0.9rem;
}
.add-to-cart-btn {
background: var(--primary-color);
color: var(--secondary-color);
}
.add-to-cart-btn:hover {
background: var(--accent-color);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.menu-hero h1 {
font-size: 2.5rem;
}
.menu-grid {
grid-template-columns: 1fr;
}
.filter-buttons {
gap: 10px;
}
.filter-btn {
padding: 8px 15px;
font-size: 14px;
}
}
</style>
</head>
<body>
<!-- Header -->
<header class="header">
<div class="header-container">
<div class="logo">
<a href="index.html">
<img src="images/logo.png" alt="Restaurant Zellers Logo">
</a>
</div>
<nav class="main-nav">
<ul>
<li><a href="index.html" data-lang="nav-home">Accueil</a></li>
<li><a href="menu.html" class="active" data-lang="nav-menu">Menu</a></li>
<li><a href="locations.html" data-lang="nav-locations">Emplacements</a></li>
</ul>
</nav>
<div class="header-actions">
<button class="menu-toggle">
<i class="fas fa-bars"></i>
</button>
</div>
<button class="lang-toggle" id="langToggle">EN</button>
</div>
</header>
<!-- Hero Section with Slideshow -->
<section class="hero menu-hero">
<div class="hero-slideshow">
<!-- Slide 1: Dim Sum -->
<div class="hero-slide active" style="background-image: url('https://images.unsplash.com/photo-1563245372-f21724e3856d?q=80&w=2070');">
<div class="hero-content">
<h1 class="hero-title">
<span class="title-main" data-lang="menu-title-main-1">Dim Sum Artisanal</span>
<span class="title-sub" data-lang="menu-subtitle-1">Dumplings et bouchées vapeur faits maison</span>
</h1>
</div>
</div>
<!-- Slide 2: Noodles -->
<div class="hero-slide" style="background-image: url('https://images.unsplash.com/photo-1585032226651-759b368d7246?q=80&w=2070');">
<div class="hero-content">
<h1 class="hero-title">
<span class="title-main" data-lang="menu-title-main-2">Nouilles Fraîches</span>
<span class="title-sub" data-lang="menu-subtitle-2">Préparées à la main chaque jour</span>
</h1>
</div>
</div>
<!-- Slide 3: Seafood -->
<div class="hero-slide" style="background-image: url('https://images.unsplash.com/photo-1579871494447-9811cf80d66c?q=80&w=2070');">
<div class="hero-content">
<h1 class="hero-title">
<span class="title-main" data-lang="menu-title-main-3">Fruits de Mer</span>
<span class="title-sub" data-lang="menu-subtitle-3">Sélection fraîche du jour</span>
</h1>
</div>
</div>
<!-- Slide 4: Stir Fry -->
<div class="hero-slide" style="background-image: url('https://images.unsplash.com/photo-1525755662778-989d0524087e?q=80&w=2070');">
<div class="hero-content">
<h1 class="hero-title">
<span class="title-main" data-lang="menu-title-main-4">Wok & Sautés</span>
<span class="title-sub" data-lang="menu-subtitle-4">Saveurs authentiques et épices traditionnelles</span>
</h1>
</div>
</div>
<!-- Slide 5: Rice Dishes -->
<div class="hero-slide" style="background-image: url('https://images.unsplash.com/photo-1603133872878-684f208fb84b?q=80&w=2070');">
<div class="hero-content">
<h1 class="hero-title">
<span class="title-main" data-lang="menu-title-main-5">Plats de Riz</span>
<span class="title-sub" data-lang="menu-subtitle-5">Du riz parfumé aux meilleures garnitures</span>
</h1>
</div>
</div>
<!-- Slide 6: Soups -->
<div class="hero-slide" style="background-image: url('https://images.unsplash.com/photo-1582878826629-29b7ad1cdc43?q=80&w=2070');">
<div class="hero-content">
<h1 class="hero-title">
<span class="title-main" data-lang="menu-title-main-6">Soupes Maison</span>
<span class="title-sub" data-lang="menu-subtitle-6">Bouillons réconfortants et savoureux</span>
</h1>
</div>
</div>
<!-- Slide 7: Desserts -->
<div class="hero-slide" style="background-image: url('https://images.unsplash.com/photo-1541952187701-039ad50a0705?q=80&w=2070');">
<div class="hero-content">
<h1 class="hero-title">
<span class="title-main" data-lang="menu-title-main-7">Desserts</span>
<span class="title-sub" data-lang="menu-subtitle-7">Douceurs traditionnelles asiatiques</span>
</h1>
</div>
</div>
<!-- Slide 8: Vegetarian -->
<div class="hero-slide" style="background-image: url('https://images.unsplash.com/photo-1512621776951-a57141f2eefd?q=80&w=2070');">
<div class="hero-content">
<h1 class="hero-title">
<span class="title-main" data-lang="menu-title-main-8">Plats Végétariens</span>
<span class="title-sub" data-lang="menu-subtitle-8">Légumes frais et tofu préparé maison</span>
</h1>
</div>
</div>
<!-- Slide 9: Fusion Dishes -->
<div class="hero-slide" style="background-image: url('https://images.unsplash.com/photo-1547928576-965be7f5f6a6?q=80&w=2070');">
<div class="hero-content">
<h1 class="hero-title">
<span class="title-main" data-lang="menu-title-main-9">Cuisine Fusion</span>
<span class="title-sub" data-lang="menu-subtitle-9">Le meilleur de l'Est et de l'Ouest</span>
</h1>
</div>
</div>
</div>
</section>
<!-- Menu Filters -->
<section class="menu-filters">
<div class="container">
<div class="search-box">
<input type="text" id="menu-search" placeholder="Rechercher un plat..." data-lang="search-placeholder">
<button type="button"><i class="fas fa-search"></i></button>
</div>
<div class="filter-buttons">
<button class="filter-btn active" data-category="all" data-lang="filter-all">Tout</button>
<button class="filter-btn" data-category="appetizers" data-lang="filter-appetizers">Entrées</button>
<button class="filter-btn" data-category="soups" data-lang="filter-soups">Soupes</button>
<button class="filter-btn" data-category="main-courses" data-lang="filter-main">Plats Principaux</button>
<button class="filter-btn" data-category="noodles" data-lang="filter-noodles">Nouilles</button>
<button class="filter-btn" data-category="rice" data-lang="filter-rice">Riz</button>
<button class="filter-btn" data-category="desserts" data-lang="filter-desserts">Desserts</button>
<button class="filter-btn" data-category="beverages" data-lang="filter-beverages">Boissons</button>
</div>
<div class="dietary-filters">
<button class="dietary-btn" data-filter="vegetarian" data-lang="filter-vegetarian">Végétarien</button>
<button class="dietary-btn" data-filter="spicy" data-lang="filter-spicy">Épicé</button>
<button class="dietary-btn" data-filter="glutenfree" data-lang="filter-gluten-free">Sans Gluten</button>
</div>
</div>
</section>
<!-- Menu Categories -->
<section class="menu-categories">
<div class="container" id="menu-items-container">
<!-- Menu items will be dynamically inserted here -->
</div>
</section>
<!-- Testimonials -->
<section class="testimonials">
<div class="container">
<h2 class="section-title" data-lang="testimonial-title">Ce Que Disent Nos Clients</h2>
<div class="testimonial-slider">
<div class="testimonial">
<p class="testimonial-text" data-lang="testimonial-text-1">La meilleure cuisine chinoise que j'ai jamais goûtée ! Les saveurs sont authentiques et le service est excellent.</p>
<p class="testimonial-author" data-lang="testimonial-author-1">John Smith</p>
<p class="testimonial-role" data-lang="testimonial-role-1">Client Régulier</p>
</div>
<div class="testimonial">
<p class="testimonial-text" data-lang="testimonial-text-2">Une nourriture incroyable et une excellente atmosphère. Le personnel est très sympathique et les portions sont généreuses.</p>
<p class="testimonial-author" data-lang="testimonial-author-2">Sarah Johnson</p>
<p class="testimonial-role" data-lang="testimonial-role-2">Blogueuse Culinaire</p>
</div>
</div>
</div>
</section>
<!-- Back to Top Button -->
<button class="back-to-top">
<i class="fas fa-chevron-up"></i>
</button>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3 data-lang="contact">Contactez-nous</h3>
<p>450-455-8888</p>
<p>info@restaurantzellers.com</p>
</div>
<div class="footer-section">
<h3 data-lang="hours">Heures d'Ouverture</h3>
<p>Lun-Ven: 11h00 - 22h00</p>
<p>Sam-Dim: 11h00 - 23h00</p>
</div>
<div class="footer-section">
<h3 data-lang="follow">Suivez-nous</h3>
<div class="social-links">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Restaurant Zellers. <span data-lang="copyright">Tous droits réservés</span></p>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="js/language.js"></script>
<script src="js/menu.js"></script>
<script>
// Wait for menu.js to load
window.addEventListener('load', function() {
// Hero Slider
const slides = document.querySelectorAll('.hero-slide');
let currentSlide = 0;
const totalSlides = slides.length;
let slideInterval;
function showSlide(index) {
slides.forEach(slide => {
slide.classList.remove('active');
slide.style.opacity = '0';
});
slides[index].classList.add('active');
slides[index].style.opacity = '1';
}
function nextSlide() {
currentSlide = (currentSlide + 1) % totalSlides;
showSlide(currentSlide);
}
function startSlideshow() {
if (slideInterval) {
clearInterval(slideInterval);
}
showSlide(0);
slideInterval = setInterval(nextSlide, 3000);
}
startSlideshow();
const heroSection = document.querySelector('.hero');
heroSection.addEventListener('mouseenter', () => {
clearInterval(slideInterval);
});
heroSection.addEventListener('mouseleave', () => {
startSlideshow();
});
// Menu filtering and other functionality
const menuContainer = document.getElementById('menu-items-container');
const categoryButtons = document.querySelectorAll('[data-category]');
const searchInput = document.getElementById('menu-search');
const dietaryFilters = document.querySelectorAll('[data-filter]');
let currentCategory = 'all';
let currentDietaryFilters = new Set();
// Category translations
const categoryTranslations = {
'appetizers': 'Entrées',
'soups': 'Soupes',
'main-courses': 'Plats Principaux',
'noodles': 'Nouilles',
'rice': 'Riz',
'desserts': 'Desserts',
'beverages': 'Boissons'
};
function renderMenuItems(category = 'all', searchTerm = '', dietaryFilters = new Set()) {
if (!menuContainer || !window.menuData) {
console.error('Menu container or menu data not found');
return;
}
menuContainer.innerHTML = '';
Object.entries(window.menuData).forEach(([categoryKey, items]) => {
if (category !== 'all' && category !== categoryKey) return;
const filteredItems = items.filter(item => {
const matchesSearch = !searchTerm ||
item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
item.description.toLowerCase().includes(searchTerm.toLowerCase());
const matchesDietary = dietaryFilters.size === 0 ||
Array.from(dietaryFilters).every(filter => {
switch(filter) {
case 'vegetarian': return item.isVegetarian;
case 'spicy': return item.isSpicy;
case 'glutenfree': return item.isGlutenFree;
default: return true;
}
});
return matchesSearch && matchesDietary;
});
if (filteredItems.length === 0) return;
const categorySection = document.createElement('div');
categorySection.className = 'menu-category';
categorySection.innerHTML = `
<h2 data-lang="category-${categoryKey}">
${categoryTranslations[categoryKey] || categoryKey}
</h2>
<div class="menu-grid">
${filteredItems.map(item => `
<div class="menu-item">
<img src="${item.image}" alt="${item.name}" class="menu-item-image">
<div class="menu-item-content">
<div class="menu-item-header">
<h3 class="menu-item-title">${item.name}</h3>
<span class="menu-item-price">${item.price.toFixed(2)} $</span>
</div>
<p class="menu-item-description">${item.description}</p>
<div class="menu-item-tags">
${item.isVegetarian ? '<span class="menu-tag tag-vegetarian">Végétarien</span>' : ''}
${item.isSpicy ? '<span class="menu-tag tag-spicy">Épicé</span>' : ''}
${item.isGlutenFree ? '<span class="menu-tag tag-vegan">Sans Gluten</span>' : ''}
</div>
<div class="menu-item-rating">
<div class="stars">
${'★'.repeat(Math.floor(item.rating))}${item.rating % 1 ? '½' : ''}${'☆'.repeat(5 - Math.ceil(item.rating))}
</div>
<span class="review-count">(${item.reviewCount})</span>
</div>
</div>
</div>
`).join('')}
</div>
`;
menuContainer.appendChild(categorySection);
});
}
// Initialize with all items
renderMenuItems();
// Category filter
categoryButtons.forEach(button => {
button.addEventListener('click', () => {
categoryButtons.forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
currentCategory = button.dataset.category;
renderMenuItems(currentCategory, searchInput.value, currentDietaryFilters);
});
});
// Search filter
searchInput.addEventListener('input', (e) => {
renderMenuItems(currentCategory, e.target.value, currentDietaryFilters);
});
// Dietary filters
dietaryFilters.forEach(filter => {
filter.addEventListener('click', () => {
filter.classList.toggle('active');
if (filter.classList.contains('active')) {
currentDietaryFilters.add(filter.dataset.filter);
} else {
currentDietaryFilters.delete(filter.dataset.filter);
}
renderMenuItems(currentCategory, searchInput.value, currentDietaryFilters);
});
});
// Back to top functionality
const backToTop = document.querySelector('.back-to-top');
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
backToTop.classList.add('visible');
} else {
backToTop.classList.remove('visible');
}
});
backToTop.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
});
</script>
</body>
</html>