Menu Html Css Codepen - Restaurant

<div class="footer-note"> <span><i class="fas fa-leaf"></i> Locally sourced</span> <span><i class="fas fa-wine-bottle"></i> Wine pairing available</span> <span><i class="fas fa-clock"></i> Tue–Sun 5PM – 11PM</span> </div> </div>

// simple XSS prevention function escapeHtml(str) return str.replace(/[&<>]/g, function(m) if (m === '&') return '&'; if (m === '<') return '<'; if (m === '>') return '>'; return m; ).replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, function(c) return c; );

/* category filter (optional interactive tabs) */ .filter-tabs display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-bottom: 2.8rem; .filter-btn background: transparent; border: 1.5px solid #e2cfb5; padding: 0.6rem 1.6rem; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.9rem; border-radius: 60px; cursor: pointer; transition: all 0.2s ease; color: #4f3a28; background: white; .filter-btn i margin-right: 6px; font-size: 0.85rem; .filter-btn.active background: #c17b4c; border-color: #c17b4c; color: white; box-shadow: 0 6px 12px -8px rgba(193,123,76,0.4); .filter-btn:hover:not(.active) background: #f2e6db; border-color: #cb9e78;

let cardsHtml = ''; filteredItems.forEach(dish => // fallback image if unsplash not reachable? but unsplash works, reliable. provide a backup color style. const imgSrc = dish.img; // Dietary badge tiny let dietBadge = ''; if (dish.dietary === 'veg') dietBadge = '<span class="badge-cat"><i class="fas fa-seedling"></i> Vegetarian</span>'; else if (dish.dietary === 'seafood') dietBadge = '<span class="badge-cat"><i class="fas fa-fish"></i> Seafood</span>'; else if (dish.dietary === 'meat') dietBadge = '<span class="badge-cat"><i class="fas fa-drumstick-bite"></i> Meat</span>'; cardsHtml += ` <div class="menu-card"> <img class="card-img" src="$imgSrc" alt="$dish.name" loading="lazy" onerror="this.src='https://placehold.co/500x300/efe3d4/7a5a3e?text=Le+Bistro'"> <div class="card-content"> <div class="dish-header"> <h3 class="dish-name">$escapeHtml(dish.name)</h3> <span class="dish-price">$dish.price</span> </div> <div class="dish-desc">$escapeHtml(dish.desc)</div> <div class="dish-meta"> <span><i class="fas $dish.icon"></i> Signature</span> $dietBadge ? `<span>$dietBadge</span>` : '' </div> </div> </div> `; ); menuGrid.innerHTML = cardsHtml;

// Extract unique categories and order (priority: Appetizers, Mains, Pasta, Desserts, Drinks) const categoryOrder = ["Appetizers", "Mains", "Pasta", "Desserts", "Drinks"]; let uniqueCategories = [...new Map(menuData.map(item => [item.category, item.category])).values()]; // sort according to preferred order, then alphabetically for any extra uniqueCategories.sort((a,b) => let indexA = categoryOrder.indexOf(a); let indexB = categoryOrder.indexOf(b); if (indexA !== -1 && indexB !== -1) return indexA - indexB; if (indexA !== -1) return -1; if (indexB !== -1) return 1; return a.localeCompare(b); );

<!-- Dynamic category filters (JS powered) --> <div class="filter-tabs" id="filterTabs"> <!-- will be populated from js --> </div>