Spaces:

bxn7373
/

mneu

Running

App Files Files Community

mneu / index.html

bxn7373

undefined - Initial Deployment

f101ebf verified 11 months ago

raw

history blame contribute delete

69.4 kB

	<!DOCTYPE html>
	<html lang="ar" dir="rtl">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>قائمة طعام مطعم جفرا الأردني</title>
	<meta name="description" content="قائمة طعام مطعم جفرا الأردني - أطيب المأكولات الأردنية التقليدية بجودة عالية">
	<meta name="keywords" content="مطعم أردني, منسف, مقبلات عربية, حلويات شرقية, مشاوي">
	<meta name="author" content="مطعم جفرا">
	<meta property="og:title" content="قائمة طعام مطعم جفرا الأردني">
	<meta property="og:description" content="أصالة المذاق الأردني في أطيب المأكولات">
	<meta property="og:image" content="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80">

	<!-- تحسينات تحميل الخطوط -->
	<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=Tajawal:wght@400;500;700;900&display=swap" rel="stylesheet">

	<!-- تحسينات تحميل الأيقونات -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

	<!-- تحميل Tailwind CSS -->
	<script src="https://cdn.tailwindcss.com"></script>

	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	primary: '#7b3738',
	secondary: '#f8a22f',
	accent: '#5a2a2a',
	light: '#f8f3ee',
	},
	fontFamily: {
	'tajawal': ['Tajawal', 'sans-serif']
	},
	boxShadow: {
	'card': '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
	'card-hover': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)'
	}
	}
	}
	}
	</script>

	<style>
	body {
	font-family: 'Tajawal', sans-serif;
	background-color: #f8f3ee;
	scroll-behavior: smooth;
	}

	/* شاشة التحميل */
	.loading-spinner {
	border: 4px solid rgba(123, 55, 56, 0.2);
	border-radius: 50%;
	border-top: 4px solid #7b3738;
	width: 40px;
	height: 40px;
	animation: spin 1s linear infinite;
	}

	@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
	}

	/* تأثيرات الحركة */
	@keyframes bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
	}

	.animate-bounce {
	animation: bounce 0.5s;
	}

	@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
	}

	.fade-in {
	animation: fadeIn 0.5s ease-out forwards;
	}

	/* نص الظل */
	.text-shadow {
	text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
	}

	/* عناصر القائمة */
	.menu-item {
	transition: all 0.3s ease;
	opacity: 0;
	}

	.menu-item.show {
	opacity: 1;
	}

	.menu-item:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	}

	/* الأقسام المخفية */
	.menu-section {
	display: none;
	}

	.menu-section.active {
	display: block;
	}

	/* زر الفئة النشط */
	.category-btn.active {
	background-color: #7b3738;
	color: white;
	}

	/* أيقونة القلب */
	.heart-icon {
	transition: all 0.3s ease;
	}

	.heart-icon:hover {
	transform: scale(1.2);
	color: #e63946;
	}

	.heart-icon.favorited {
	color: #e63946;
	}

	/* زر السلة */
	.add-to-cart {
	transition: all 0.3s ease;
	}

	.add-to-cart:hover {
	background-color: #5a2a2a;
	transform: scale(1.05);
	}

	/* الإطار الزخرفي */
	.ornamental-border {
	position: relative;
	}

	.ornamental-border:after {
	content: "";
	position: absolute;
	bottom: -10px;
	right: 0;
	width: 50px;
	height: 3px;
	background: linear-gradient(90deg, #f8a22f, #7b3738);
	}

	/* طبقة التعتيم */
	.overlay {
	background: rgba(0,0,0,0.5);
	backdrop-filter: blur(5px);
	}

	/* شريط التمرير المخفي */
	.hide-scrollbar::-webkit-scrollbar {
	display: none;
	}

	.hide-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
	}

	/* تأثيرات الصور */
	.menu-img {
	transition: transform 0.5s ease;
	}

	.menu-item:hover .menu-img {
	transform: scale(1.05);
	}

	/* طباعة فقط */
	@media print {
	header, nav, #cart-button, #cart-sidebar, .no-print {
	display: none !important;
	}

	body {
	font-size: 12pt;
	background: none;
	color: #000;
	}

	.menu-item {
	page-break-inside: avoid;
	break-inside: avoid;
	}
	}

	/* رسالة التأكيد */
	.confirmation-message {
	animation: fadeIn 0.5s ease-out;
	}
	</style>
	</head>
	<body class="text-gray-800 bg-light">
	<!-- شاشة التحميل -->
	<div id="loading-screen" class="fixed inset-0 bg-white z-50 flex items-center justify-center">
	<div class="text-center">
	<div class="loading-spinner mx-auto"></div>
	<p class="mt-4 text-primary font-medium text-lg">جاري تحضير قائمتنا لك...</p>
	</div>
	</div>

	<!-- Header Section -->
	<header class="relative h-screen md:h-[70vh] overflow-hidden">
	<div class="absolute inset-0 bg-black opacity-30"></div>
	<img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
	alt="مطعم جفرا"
	class="w-full h-full object-cover menu-img"
	loading="lazy">
	<div class="absolute inset-0 flex flex-col items-center justify-center text-white text-center px-4">
	<div class="border-b-4 border-white pb-4 mb-6 ornamental-border">
	<h1 class="text-5xl md:text-6xl lg:text-7xl font-black text-shadow">مطعم جفرا</h1>
	<p class="text-xl md:text-2xl mt-4 text-shadow">أصالة المذاق الأردني منذ 1985</p>
	</div>
	<div class="hidden md:flex space-x-8 space-x-reverse mt-6">
	<p class="flex items-center">
	<i class="fas fa-phone-alt ml-2" aria-hidden="true"></i>
	<span>06-5678901</span>
	</p>
	<p class="flex items-center">
	<i class="fas fa-map-marker-alt ml-2" aria-hidden="true"></i>
	<span>عمان - جبل الحسين</span>
	</p>
	<p class="flex items-center">
	<i class="far fa-clock ml-2" aria-hidden="true"></i>
	<span>10 صباحاً - 11 مساءً</span>
	</p>
	</div>
	<a href="#menu" class="mt-12 bg-primary hover:bg-accent text-white px-8 py-3 rounded-full shadow-lg transition duration-300 flex items-center">
	<i class="fas fa-utensils ml-2" aria-hidden="true"></i>
	تصفح قائمتنا
	</a>
	</div>
	<div class="absolute bottom-6 left-0 right-0 flex justify-center">
	<a href="#menu" class="animate-bounce text-white">
	<i class="fas fa-chevron-down text-2xl" aria-hidden="true"></i>
	</a>
	</div>
	</header>

	<!-- Main Content -->
	<main class="container mx-auto px-4 py-12 max-w-7xl" id="menu">
	<!-- Categories Navigation -->
	<nav aria-label="تصنيفات الطعام">
	<div class="flex overflow-x-auto pb-6 mb-10 hide-scrollbar space-x-4 space-x-reverse">
	<button class="category-btn whitespace-nowrap px-6 py-3 rounded-full bg-white shadow-md text-gray-700 hover:bg-primary hover:text-white transition active"
	data-category="appetizers"
	aria-current="page">
	<i class="fas fa-utensils ml-2" aria-hidden="true"></i>
	المقبلات
	</button>
	<button class="category-btn whitespace-nowrap px-6 py-3 rounded-full bg-white shadow-md text-gray-700 hover:bg-primary hover:text-white transition"
	data-category="main-dishes">
	<i class="fas fa-drumstick-bite ml-2" aria-hidden="true"></i>
	الأطباق الرئيسية
	</button>
	<button class="category-btn whitespace-nowrap px-6 py-3 rounded-full bg-white shadow-md text-gray-700 hover:bg-primary hover:text-white transition"
	data-category="grills">
	<i class="fas fa-fire ml-2" aria-hidden="true"></i>
	المشاوي
	</button>
	<button class="category-btn whitespace-nowrap px-6 py-3 rounded-full bg-white shadow-md text-gray-700 hover:bg-primary hover:text-white transition"
	data-category="sides">
	<i class="fas fa-bread-slice ml-2" aria-hidden="true"></i>
	الأطباق الجانبية
	</button>
	<button class="category-btn whitespace-nowrap px-6 py-3 rounded-full bg-white shadow-md text-gray-700 hover:bg-primary hover:text-white transition"
	data-category="desserts">
	<i class="fas fa-ice-cream ml-2" aria-hidden="true"></i>
	الحلويات
	</button>
	<button class="category-btn whitespace-nowrap px-6 py-3 rounded-full bg-white shadow-md text-gray-700 hover:bg-primary hover:text-white transition"
	data-category="drinks">
	<i class="fas fa-glass-cheers ml-2" aria-hidden="true"></i>
	المشروبات
	</button>
	</div>
	</nav>

	<!-- Search and Filters -->
	<div class="mb-10 flex flex-col md:flex-row justify-between items-center gap-6">
	<div class="relative w-full md:w-96">
	<input type="text"
	placeholder="ابحث عن طبق..."
	class="w-full pr-12 pl-5 py-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition"
	aria-label="بحث عن أطباق"
	id="search-input">
	<button class="absolute right-4 top-3 text-gray-500 hover:text-primary transition"
	aria-label="بحث"
	id="search-btn">
	<i class="fas fa-search text-lg" aria-hidden="true"></i>
	</button>
	</div>

	<div class="flex items-center space-x-4 space-x-reverse">
	<span class="font-medium text-gray-700">ترتيب حسب:</span>
	<select class="px-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition"
	aria-label="ترتيب العناصر"
	id="sort-select">
	<option value="best-selling">الافضل مبيعا</option>
	<option value="price-low-to-high">السعر من الأقل للأعلى</option>
	<option value="price-high-to-low">السعر من الأعلى للأقل</option>
	<option value="newest">الأحدث</option>
	</select>
	</div>
	</div>

	<!-- Appetizers Section -->
	<section class="menu-section active fade-in" id="appetizers" aria-labelledby="appetizers-heading">
	<h2 id="appetizers-heading" class="text-3xl font-black mb-8 flex items-center text-gray-800">
	<i class="fas fa-utensils ml-3 text-primary text-2xl" aria-hidden="true"></i>
	<span>مقبلاتنا الشهية</span>
	</h2>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="appetizers-container">
	<!-- Item 1 -->
	<article class="menu-item bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl show">
	<div class="relative overflow-hidden">
	<img src="https://images.unsplash.com/photo-1601050690597-df0568f70950?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
	alt="طبق حمص"
	class="w-full h-56 object-cover menu-img"
	loading="lazy">
	<div class="absolute top-4 right-4 flex flex-col space-y-3">
	<span class="bg-red-600 text-white px-3 py-1 rounded-full text-sm font-medium shadow">
	الأكثر طلباً
	</span>
	<button class="heart-icon bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-red-500"
	aria-label="إضافة إلى المفضلة"
	data-item="حمص جفرا">
	<i class="far fa-heart text-lg" aria-hidden="true"></i>
	</button>
	</div>
	</div>
	<div class="p-6">
	<div class="flex justify-between items-start mb-3">
	<h3 class="text-xl font-bold text-gray-800">حمص جفرا</h3>
	<span class="text-xl font-bold text-primary">3.50 د.أ</span>
	</div>
	<p class="text-gray-600 mb-5">حمص معد يدوياً مع طحينة وزيت زيتون وزعتر وبقدونس</p>
	<div class="flex justify-between items-center">
	<div class="flex space-x-1 space-x-reverse text-yellow-400">
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star-half-alt" aria-hidden="true"></i>
	<span class="text-gray-600 mr-1 text-sm">(128)</span>
	</div>
	<button class="add-to-cart bg-primary hover:bg-accent text-white px-4 py-2 rounded-full flex items-center shadow-md"
	data-name="حمص جفرا"
	data-price="3.50"
	aria-label="إضافة حمص جفرا إلى السلة">
	<i class="fas fa-plus mr-2" aria-hidden="true"></i>
	أضف للطلب
	</button>
	</div>
	</div>
	</article>

	<!-- Item 2 -->
	<article class="menu-item bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl show">
	<div class="relative overflow-hidden">
	<img src="https://images.unsplash.com/photo-1589302168068-964664b9291a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
	alt="طبق متبل الباذنجان"
	class="w-full h-56 object-cover menu-img"
	loading="lazy">
	<div class="absolute top-4 right-4">
	<button class="heart-icon bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-red-500"
	aria-label="إضافة إلى المفضلة"
	data-item="متبل الباذنجان">
	<i class="far fa-heart text-lg" aria-hidden="true"></i>
	</button>
	</div>
	</div>
	<div class="p-6">
	<div class="flex justify-between items-start mb-3">
	<h3 class="text-xl font-bold text-gray-800">متبل الباذنجان</h3>
	<span class="text-xl font-bold text-primary">4.00 د.أ</span>
	</div>
	<p class="text-gray-600 mb-5">باذنجان مشوي مع الطحينة، الثوم، الليمون وزيت الزيتون</p>
	<div class="flex justify-between items-center">
	<div class="flex space-x-1 space-x-reverse text-yellow-400">
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="far fa-star" aria-hidden="true"></i>
	<span class="text-gray-600 mr-1 text-sm">(95)</span>
	</div>
	<button class="add-to-cart bg-primary hover:bg-accent text-white px-4 py-2 rounded-full flex items-center shadow-md"
	data-name="متبل الباذنجان"
	data-price="4.00"
	aria-label="إضافة متبل الباذنجان إلى السلة">
	<i class="fas fa-plus mr-2" aria-hidden="true"></i>
	أضف للطلب
	</button>
	</div>
	</div>
	</article>

	<!-- Item 3 -->
	<article class="menu-item bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl show">
	<div class="relative overflow-hidden">
	<img src="https://images.unsplash.com/photo-1621996659492-996b7611a5d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
	alt="طبق سلطة فتوش"
	class="w-full h-56 object-cover menu-img"
	loading="lazy">
	<div class="absolute top-4 right-4 flex flex-col space-y-3">
	<span class="bg-green-600 text-white px-3 py-1 rounded-full text-sm font-medium shadow">
	صحي
	</span>
	<button class="heart-icon bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-red-500"
	aria-label="إضافة إلى المفضلة"
	data-item="سلطة فتوش">
	<i class="far fa-heart text-lg" aria-hidden="true"></i>
	</button>
	</div>
	</div>
	<div class="p-6">
	<div class="flex justify-between items-start mb-3">
	<h3 class="text-xl font-bold text-gray-800">سلطة فتوش</h3>
	<span class="text-xl font-bold text-primary">5.50 د.أ</span>
	</div>
	<p class="text-gray-600 mb-5">خضار طازجة مع خبز مقرمش، خل بلسمي، زيت زيتون وسماق</p>
	<div class="flex justify-between items-center">
	<div class="flex space-x-1 space-x-reverse text-yellow-400">
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<span class="text-gray-600 mr-1 text-sm">(142)</span>
	</div>
	<button class="add-to-cart bg-primary hover:bg-accent text-white px-4 py-2 rounded-full flex items-center shadow-md"
	data-name="سلطة فتوش"
	data-price="5.50"
	aria-label="إضافة سلطة فتوش إلى السلة">
	<i class="fas fa-plus mr-2" aria-hidden="true"></i>
	أضف للطلب
	</button>
	</div>
	</div>
	</article>
	</div>
	</section>

	<!-- Main Dishes Section -->
	<section class="menu-section fade-in" id="main-dishes" aria-labelledby="main-dishes-heading" style="display: none;">
	<h2 id="main-dishes-heading" class="text-3xl font-black mb-8 flex items-center text-gray-800">
	<i class="fas fa-drumstick-bite ml-3 text-primary text-2xl" aria-hidden="true"></i>
	<span>الأطباق الرئيسية</span>
	</h2>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="main-dishes-container">
	<!-- Item 1 -->
	<article class="menu-item bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl show">
	<div class="relative overflow-hidden">
	<img src="https://images.unsplash.com/photo-1589301760014-d929f3979dbc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
	alt="طبق المنسف الأردني"
	class="w-full h-56 object-cover menu-img"
	loading="lazy">
	<div class="absolute top-4 right-4 flex flex-col space-y-3">
	<span class="bg-red-600 text-white px-3 py-1 rounded-full text-sm font-medium shadow">
	الأكثر طلباً
	</span>
	<button class="heart-icon bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-red-500"
	aria-label="إضافة إلى المفضلة"
	data-item="المنسف الأردني">
	<i class="far fa-heart text-lg" aria-hidden="true"></i>
	</button>
	</div>
	</div>
	<div class="p-6">
	<div class="flex justify-between items-start mb-3">
	<h3 class="text-xl font-bold text-gray-800">المنسف الأردني</h3>
	<span class="text-xl font-bold text-primary">12.50 د.أ</span>
	</div>
	<p class="text-gray-600 mb-5">لحم ضأن على الأرز مع اللبن واللوز المحمص، الطبق الوطني الأردني</p>
	<div class="flex justify-between items-center">
	<div class="flex space-x-1 space-x-reverse text-yellow-400">
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<span class="text-gray-600 mr-1 text-sm">(215)</span>
	</div>
	<button class="add-to-cart bg-primary hover:bg-accent text-white px-4 py-2 rounded-full flex items-center shadow-md"
	data-name="المنسف الأردني"
	data-price="12.50"
	aria-label="إضافة المنسف الأردني إلى السلة">
	<i class="fas fa-plus mr-2" aria-hidden="true"></i>
	أضف للطلب
	</button>
	</div>
	</div>
	</article>

	<!-- Item 2 -->
	<article class="menu-item bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl show">
	<div class="relative overflow-hidden">
	<img src="https://images.unsplash.com/photo-1631515243349-e0cb75fb8dbe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1488&q=80"
	alt="طبق المسخّن الفلسطيني"
	class="w-full h-56 object-cover menu-img"
	loading="lazy">
	<div class="absolute top-4 right-4">
	<button class="heart-icon bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-red-500"
	aria-label="إضافة إلى المفضلة"
	data-item="المسخّن الفلسطيني">
	<i class="far fa-heart text-lg" aria-hidden="true"></i>
	</button>
	</div>
	</div>
	<div class="p-6">
	<div class="flex justify-between items-start mb-3">
	<h3 class="text-xl font-bold text-gray-800">المسخّن الفلسطيني</h3>
	<span class="text-xl font-bold text-primary">10.00 د.أ</span>
	</div>
	<p class="text-gray-600 mb-5">خبز طابون مع دجاج مشوي، بصل وزيت زيتون وزعتر</p>
	<div class="flex justify-between items-center">
	<div class="flex space-x-1 space-x-reverse text-yellow-400">
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star-half-alt" aria-hidden="true"></i>
	<span class="text-gray-600 mr-1 text-sm">(178)</span>
	</div>
	<button class="add-to-cart bg-primary hover:bg-accent text-white px-4 py-2 rounded-full flex items-center shadow-md"
	data-name="المسخّن الفلسطيني"
	data-price="10.00"
	aria-label="إضافة المسخّن الفلسطيني إلى السلة">
	<i class="fas fa-plus mr-2" aria-hidden="true"></i>
	أضف للطلب
	</button>
	</div>
	</div>
	</article>

	<!-- Item 3 -->
	<article class="menu-item bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl show">
	<div class="relative overflow-hidden">
	<img src="https://images.unsplash.com/photo-1605291567909-4887c4193cb7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
	alt="طبق كبسة الدجاج"
	class="w-full h-56 object-cover menu-img"
	loading="lazy">
	<div class="absolute top-4 right-4">
	<button class="heart-icon bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-red-500"
	aria-label="إضافة إلى المفضلة"
	data-item="كبسة الدجاج">
	<i class="far fa-heart text-lg" aria-hidden="true"></i>
	</button>
	</div>
	</div>
	<div class="p-6">
	<div class="flex justify-between items-start mb-3">
	<h3 class="text-xl font-bold text-gray-800">كبسة الدجاج</h3>
	<span class="text-xl font-bold text-primary">9.50 د.أ</span>
	</div>
	<p class="text-gray-600 mb-5">أرز مع دجاج وتوابل الكبسة الشهية، مع اللوز المحمص والزبيب</p>
	<div class="flex justify-between items-center">
	<div class="flex space-x-1 space-x-reverse text-yellow-400">
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="far fa-star" aria-hidden="true"></i>
	<span class="text-gray-600 mr-1 text-sm">(134)</span>
	</div>
	<button class="add-to-cart bg-primary hover:bg-accent text-white px-4 py-2 rounded-full flex items-center shadow-md"
	data-name="كبسة الدجاج"
	data-price="9.50"
	aria-label="إضافة كبسة الدجاج إلى السلة">
	<i class="fas fa-plus mr-2" aria-hidden="true"></i>
	أضف للطلب
	</button>
	</div>
	</div>
	</article>
	</div>
	</section>

	<!-- Grills Section -->
	<section class="menu-section fade-in" id="grills" aria-labelledby="grills-heading" style="display: none;">
	<h2 id="grills-heading" class="text-3xl font-black mb-8 flex items-center text-gray-800">
	<i class="fas fa-fire ml-3 text-primary text-2xl" aria-hidden="true"></i>
	<span>مشوياتنا الشهية</span>
	</h2>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="grills-container">
	<!-- Item 1 -->
	<article class="menu-item bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl show">
	<div class="relative overflow-hidden">
	<img src="https://images.unsplash.com/photo-1601050690117-4b0f3e2b9d9b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1474&q=80"
	alt="طبق شيش طاووق"
	class="w-full h-56 object-cover menu-img"
	loading="lazy">
	<div class="absolute top-4 right-4 flex flex-col space-y-3">
	<span class="bg-red-600 text-white px-3 py-1 rounded-full text-sm font-medium shadow">
	الأكثر طلباً
	</span>
	<button class="heart-icon bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-red-500"
	aria-label="إضافة إلى المفضلة"
	data-item="شيش طاووق">
	<i class="far fa-heart text-lg" aria-hidden="true"></i>
	</button>
	</div>
	</div>
	<div class="p-6">
	<div class="flex justify-between items-start mb-3">
	<h3 class="text-xl font-bold text-gray-800">شيش طاووق</h3>
	<span class="text-xl font-bold text-primary">8.50 د.أ</span>
	</div>
	<p class="text-gray-600 mb-5">قطع دجاج مشوية مع الثوم والليمون والتوابل، تقدم مع الخبز الطازج</p>
	<div class="flex justify-between items-center">
	<div class="flex space-x-1 space-x-reverse text-yellow-400">
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star-half-alt" aria-hidden="true"></i>
	<span class="text-gray-600 mr-1 text-sm">(198)</span>
	</div>
	<button class="add-to-cart bg-primary hover:bg-accent text-white px-4 py-2 rounded-full flex items-center shadow-md"
	data-name="شيش طاووق"
	data-price="8.50"
	aria-label="إضافة شيش طاووق إلى السلة">
	<i class="fas fa-plus mr-2" aria-hidden="true"></i>
	أضف للطلب
	</button>
	</div>
	</div>
	</article>

	<!-- Item 2 -->
	<article class="menu-item bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl show">
	<div class="relative overflow-hidden">
	<img src="https://images.unsplash.com/photo-1611270638662-3e7cc10c4df9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
	alt="طبق كفتة مشوية"
	class="w-full h-56 object-cover menu-img"
	loading="lazy">
	<div class="absolute top-4 right-4">
	<button class="heart-icon bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-red-500"
	aria-label="إضافة إلى المفضلة"
	data-item="كفتة مشوية">
	<i class="far fa-heart text-lg" aria-hidden="true"></i>
	</button>
	</div>
	</div>
	<div class="p-6">
	<div class="flex justify-between items-start mb-3">
	<h3 class="text-xl font-bold text-gray-800">كفتة مشوية</h3>
	<span class="text-xl font-bold text-primary">10.50 д.а</span>
	</div>
	<p class="text-gray-600 mb-5">خليط من اللحم المفروم مع البصل والتوابل المشوية على الفحم</p>
	<div class="flex justify-between items-center">
	<div class="flex space-x-1 space-x-reverse text-yellow-400">
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<span class="text-gray-600 mr-1 text-sm">(165)</span>
	</div>
	<button class="add-to-cart bg-primary hover:bg-accent text-white px-4 py-2 rounded-full flex items-center shadow-md"
	data-name="كفتة مشوية"
	data-price="10.50"
	aria-label="إضافة كفتة مشوية إلى السلة">
	<i class="fas fa-plus mr-2" aria-hidden="true"></i>
	أضف للطلب
	</button>
	</div>
	</div>
	</article>

	<!-- Item 3 -->
	<article class="menu-item bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl show">
	<div class="relative overflow-hidden">
	<img src="https://images.unsplash.com/photo-1555939597-63e5fd1a19b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
	alt="طبق لحم ضأن مشوي"
	class="w-full h-56 object-cover menu-img"
	loading="lazy">
	<div class="absolute top-4 right-4">
	<button class="heart-icon bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-red-500"
	aria-label="إضافة إلى المفضلة"
	data-item="لحم ضأن مشوي">
	<i class="far fa-heart text-lg" aria-hidden="true"></i>
	</button>
	</div>
	</div>
	<div class="p-6">
	<div class="flex justify-between items-start mb-3">
	<h3 class="text-xl font-bold text-gray-8200">لحم ضأن مشوي</h3>
	<span class="text-xl font-bold text-primary">14.50 د.أ</span>
	</div>
	<p class="text-gray-600 mb-5">قطع ضأن مشوية على الفحم مع خلطة التوابل الخاصة بالمطعم</p>
	<div class="flex justify-between items-center">
	<div class="flex space-x-1 space-x-reverse text-yellow-400">
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="fas fa-star" aria-hidden="true"></i>
	<i class="far fa-star" aria-hidden="true"></i>
	<span class="text-gray-600 mr-1 text-sm">(152)</span>
	</div>
	<button class="add-to-cart bg-primary hover:bg-accent text-white px-4 py-2 rounded-full flex items-center shadow-md"
	data-name="لحم ضأن مشوي"
	data-price="14.50"
	aria-label="إضافة لحم ضأن مشوي إلى السلة">
	<i class="fas fa-plus mr-2" aria-hidden="true"></i>
	أضف للطلب
	</button>
	</div>
	</div>
	</article>
	</div>
	</section>

	<!-- Other sections (Sides, Desserts, Drinks) would follow the same pattern -->
	</main>

	<!-- Footer -->
	<footer class="bg-primary text-white pt-12 pb-6">
	<div class="container mx-auto px-4">
	<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
	<div>
	<h3 class="text-xl font-bold mb-4">مطعم جفرا</h3>
	<p class="mb-4">نقدم أطيب المأكولات الأردنية التقليدية منذ عام 1985.</p>
	<div class="flex space-x-4 space-x-reverse">
	<a href="#" class="text-white hover:text-secondary transition" aria-label="فيسبوك">
	<i class="fab fa-facebook-f text-lg" aria-hidden="true"></i>
	</a>
	<a href="#" class="text-white hover:text-secondary transition" aria-label="إنستغرام">
	<i class="fab fa-instagram text-lg" aria-hidden="true"></i>
	</a>
	<a href="#" class="text-white hover:text-secondary transition" aria-label="تويتر">
	<i class="fab fa-twitter text-lg" aria-hidden="true"></i>
	</a>
	</div>
	</div>

	<div>
	<h3 class="text-xl font-bold mb-4">ساعات العمل</h3>
	<ul class="space-y-2">
	<li class="flex justify-between">
	<span>الأحد - الخميس</span>
	<span>10 صباحاً - 11 مساءً</span>
	</li>
	<li class="flex justify-between">
	<span>الجمعة والسبت</span>
	<span>11 ظهراً - 12 منتصف الليل</span>
	</li>
	</ul>
	</div>

	<div>
	<h3 class="text-xl font-bold mb-4">تواصل معنا</h3>
	<address class="not-italic">
	<p class="flex items-center mb-3">
	<i class="fas fa-map-marker-alt ml-2" aria-hidden="true"></i>
	عمان - جبل الحسين، شارع الملك حسين
	</p>
	<p class="flex items-center mb-3">
	<i class="fas fa-phone-alt ml-2" aria-hidden="true"></i>
	06-5678901
	</p>
	<p class="flex items-center">
	<i class="fas fa-envelope ml-2" aria-hidden="true"></i>
	info@jafrarestaurant.com
	</p>
	</address>
	</div>
	</div>

	<div class="border-t border-opacity-20 border-white mt-8 pt-6 text-center">
	<p>© 2023 مطعم جفرا. جميع الحقوق محفوظة.</p>
	</div>
	</div>
	</footer>

	<!-- Cart Sidebar -->
	<aside class="fixed inset-y-0 right-0 w-full md:w-96 bg-white shadow-2xl transform translate-x-full transition-transform duration-300 ease-in-out z-50"
	id="cart-sidebar"
	aria-labelledby="cart-heading">
	<div class="relative h-full flex flex-col">
	<!-- Cart Header -->
	<div class="p-6 border-b border-gray-200 bg-primary text-white">
	<div class="flex justify-between items-center">
	<h2 id="cart-heading" class="text-2xl font-bold">
	<i class="fas fa-shopping-cart ml-2" aria-hidden="true"></i>
	سلة الطلبات
	</h2>
	<button id="close-cart" class="text-white hover:text-gray-200 transition" aria-label="إغلاق السلة">
	<i class="fas fa-times text-xl" aria-hidden="true"></i>
	</button>
	</div>
	<p class="mt-2 text-sm">لديك <span id="cart-count">0</span> عناصر في السلة</p>
	</div>

	<!-- Cart Items -->
	<div class="flex-1 overflow-y-auto p-6" id="cart-items">
	<p class="text-center text-gray-500 py-10">السلة فارغة</p>
	</div>

	<!-- Cart Footer -->
	<div class="p-6 border-t border-gray-200 bg-gray-50">
	<div class="flex justify-between items-center mb-6">
	<span class="font-bold text-lg">المجموع:</span>
	<span class="font-bold text-xl text-primary" id="cart-total">0.00 د.أ</span>
	</div>
	<button id="confirm-order"
	class="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg shadow-md transition duration-300 flex items-center justify-center">
	<i class="fas fa-check-circle ml-2" aria-hidden="true"></i>
	تأكيد الطلب
	</button>
	<button id="clear-cart"
	class="w-full mt-3 bg-red-600 hover:bg-red-700 text-white py-3 rounded-lg shadow-md transition duration-300 flex items-center justify-center">
	<i class="fas fa-trash-alt ml-2" aria-hidden="true"></i>
	تفريغ السلة
	</button>
	</div>
	</div>
	</aside>

	<!-- Cart Button -->
	<div class="fixed bottom-6 right-6 z-40">
	<button id="cart-button"
	class="bg-primary hover:bg-accent text-white p-4 rounded-full shadow-xl hover:shadow-2xl transition duration-300 relative flex items-center justify-center"
	aria-label="عرض سلة التسوق">
	<i class="fas fa-shopping-cart text-xl" aria-hidden="true"></i>
	<span class="absolute -top-2 -right-2 bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-medium"
	id="cart-badge">
	0
	</span>
	</button>
	</div>

	<!-- Overlay -->
	<div class="fixed inset-0 overlay hidden z-30" id="overlay"></div>

	<!-- Confirmation Modal -->
	<div class="fixed inset-0 z-50 flex items-center justify-center hidden" id="confirmation-modal">
	<div class="bg-white rounded-lg shadow-2xl max-w-sm w-full mx-4 overflow-hidden">
	<div class="p-6 text-center">
	<i class="fas fa-check-circle text-5xl text-green-600 mb-4" aria-hidden="true"></i>
	<h3 class="text-xl font-bold text-gray-800 mb-2">تم تأكيد طلبك!</h3>
	<p class="text-gray-600 mb-6">سيتم تحويلك إلى واتساب لإتمام الطلب</p>
	<button id="close-modal"
	class="w-full bg-primary hover:bg-accent text-white py-2 rounded-lg transition duration-300">
	موافق
	</button>
	</div>
	</div>
	</div>

	<script>
	// Initialize cart from localStorage or empty array
	let cart = JSON.parse(localStorage.getItem('jafra-cart')) \|\| [];
	let favorites = JSON.parse(localStorage.getItem('jafra-favorites')) \|\| [];

	// Wait for DOM to be fully loaded
	document.addEventListener('DOMContentLoaded', () => {
	// Hide loading screen after simulating loading
	setTimeout(() => {
	document.getElementById('loading-screen').classList.add('hidden');
	document.body.style.overflow = 'auto'; // Re-enable scrolling

	// Animate in menu items
	animateMenuItems();
	}, 1000);

	// Initialize cart from localStorage
	updateCartUI();
	updateFavoritesUI();

	// Category switching
	document.querySelectorAll('.category-btn').forEach(btn => {
	btn.addEventListener('click', function() {
	// Remove active class from all buttons
	document.querySelectorAll('.category-btn').forEach(el => {
	el.classList.remove('active');
	el.removeAttribute('aria-current');
	});

	// Add active class to clicked button
	this.classList.add('active');
	this.setAttribute('aria-current', 'page');

	// Hide all menu sections
	document.querySelectorAll('.menu-section').forEach(section => {
	section.style.display = 'none';
	});

	// Show the selected section
	const category = this.getAttribute('data-category');
	const section = document.getElementById(category);
	section.style.display = 'block';
	section.classList.add('fade-in');

	// Scroll to top of menu smoothly
	section.scrollIntoView({behavior: 'smooth', block: 'start'});
	});
	});

	// Favorite button functionality
	document.querySelectorAll('.heart-icon').forEach(btn => {
	btn.addEventListener('click', function() {
	const icon = this.querySelector('i');
	const itemName = this.getAttribute('data-item');

	if (icon.classList.contains('far')) {
	// Add to favorites
	icon.classList.remove('far');
	icon.classList.add('fas', 'text-red-500');
	favorites.push(itemName);
	showToast(`تمت إضافة "${itemName}" إلى المفضلة`, 'success');
	} else {
	// Remove from favorites
	icon.classList.remove('fas', 'text-red-500');
	icon.classList.add('far');
	favorites = favorites.filter(name => name !== itemName);
	showToast(`تمت إزالة "${itemName}" من المفضلة`, 'info');
	}

	// Save to localStorage
	localStorage.setItem('jafra-favorites', JSON.stringify(favorites));
	});
	});

	// Add to cart functionality (delegated event)
	document.addEventListener('click', function(e) {
	if (e.target.closest('.add-to-cart')) {
	const button = e.target.closest('.add-to-cart');
	const itemName = button.getAttribute('data-name');
	const itemPrice = parseFloat(button.getAttribute('data-price'));

	// Add item to cart
	addToCart(itemName, itemPrice);

	// Update cart UI
	updateCartUI();

	// Show success message
	showToast(`تم إضافة "${itemName}" إلى السلة`, 'success');
	}
	});

	// Clear cart with confirmation
	document.getElementById('clear-cart').addEventListener('click', function() {
	if(cart.length === 0) {
	showToast('السلة فارغة بالفعل', 'info');
	return;
	}

	if(confirm('هل أنت متأكد من رغبتك في تفريغ السلة؟')) {
	cart = [];
	updateCartUI();
	showToast('تم تفريغ السلة بنجاح', 'success');
	}
	});

	// Cart sidebar toggle
	document.getElementById('cart-button').addEventListener('click', function() {
	document.getElementById('cart-sidebar').classList.remove('translate-x-full');
	document.getElementById('overlay').classList.remove('hidden');
	document.body.style.overflow = 'hidden'; // Prevent scrolling when cart is open
	});

	// Close cart sidebar
	document.getElementById('close-cart').addEventListener('click', closeCart);
	document.getElementById('overlay').addEventListener('click', closeCart);

	// Close confirmation modal
	document.getElementById('close-modal').addEventListener('click', function() {
	document.getElementById('confirmation-modal').classList.add('hidden');
	document.getElementById('overlay').classList.add('hidden');
	document.body.style.overflow = 'auto';
	});

	// Confirm order and redirect to WhatsApp
	document.getElementById('confirm-order').addEventListener('click', function() {
	if (cart.length === 0) {
	showToast('السلة فارغة، أضف عناصر لتأكيد الطلب', 'error');
	return;
	}

	// Show confirmation modal
	document.getElementById('confirmation-modal').classList.remove('hidden');
	document.getElementById('overlay').classList.remove('hidden');
	document.body.style.overflow = 'hidden';

	// Prepare WhatsApp message after a slight delay
	setTimeout(() => {
	let message = 'مرحباً، أريد طلب التالي من مطعم جفرا:\n\n';
	let total = 0;

	cart.forEach(item => {
	message += `- ${item.name} (${item.quantity}× ${item.price.toFixed(2)} د.أ)\n`;
	total += item.price * item.quantity;
	});

	message += `\nالمجموع: ${total.toFixed(2)} د.أ\n`;
	message += '\n\nتفاصيل التوصيل:\n';
	message += 'الاسم: ____\n';
	message += 'العنوان: ____\n';
	message += 'هاتف: ____\n';
	message += '\nشكراً لك';

	const encodedMessage = encodeURIComponent(message);
	window.open(`https://wa.me/962795959002?text=${encodedMessage}`, '_blank');

	// Clear cart after order confirmation
	cart = [];
	updateCartUI();
	closeCart();
	}, 500);
	});

	// Search functionality
	document.getElementById('search-btn').addEventListener('click', performSearch);
	document.getElementById('search-input').addEventListener('keypress', function(e) {
	if (e.key === 'Enter') {
	performSearch();
	}
	});

	// Sort functionality
	document.getElementById('sort-select').addEventListener('change', function() {
	sortMenuItems(this.value);
	});
	});

	// Cart functions
	function addToCart(name, price) {
	// Check if item already exists in cart
	const existingItem = cart.find(item => item.name === name);

	if (existingItem) {
	existingItem.quantity += 1;
	} else {
	cart.push({
	name: name,
	price: price,
	quantity: 1
	});
	}

	// Save cart to localStorage
	localStorage.setItem('jafra-cart', JSON.stringify(cart));

	// Animate cart button
	const cartBtn = document.getElementById('cart-button');
	cartBtn.classList.add('animate-bounce');
	setTimeout(() => cartBtn.classList.remove('animate-bounce'), 1000);
	}

	function updateCartUI() {
	// Save cart to localStorage
	localStorage.setItem('jafra-cart', JSON.stringify(cart));

	// Update cart badge
	const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
	document.getElementById('cart-badge').textContent = totalItems;
	document.getElementById('cart-count').textContent = totalItems;

	// Update cart items list
	const cartItemsContainer = document.getElementById('cart-items');

	if (cart.length === 0) {
	cartItemsContainer.innerHTML = '<p class="text-center text-gray-500 py-10">السلة فارغة</p>';
	} else {
	cartItemsContainer.innerHTML = '';

	cart.forEach(item => {
	const itemElement = document.createElement('div');
	itemElement.className = 'flex justify-between items-center py-4 border-b border-gray-200';
	itemElement.innerHTML = `
	<div class="flex-1">
	<h4 class="font-medium">${item.name}</h4>
	<p class="text-sm text-gray-500">${item.price.toFixed(2)} د.أ × ${item.quantity}</p>
	</div>
	<div class="flex items-center">
	<span class="font-medium ml-3">${(item.price * item.quantity).toFixed(2)} د.أ</span>
	<button class="remove-item ml-3 text-red-500 hover:text-red-700 transition"
	data-name="${item.name}"
	aria-label="إزالة ${item.name} من السلة">
	<i class="fas fa-trash-alt" aria-hidden="true"></i>
	</button>
	</div>
	`;
	cartItemsContainer.appendChild(itemElement);
	});

	// Add event listeners to remove buttons
	document.querySelectorAll('.remove-item').forEach(btn => {
	btn.addEventListener('click', function() {
	const itemName = this.getAttribute('data-name');
	removeFromCart(itemName);
	updateCartUI();
	});
	});
	}

	// Update cart total
	const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
	document.getElementById('cart-total').textContent = total.toFixed(2) + ' د.أ';
	}

	function removeFromCart(name) {
	cart = cart.filter(item => item.name !== name);
	showToast(`تم إزالة "${name}" من السلة`, 'success');
	localStorage.setItem('jafra-cart', JSON.stringify(cart));
	}

	function closeCart() {
	document.getElementById('cart-sidebar').classList.add('translate-x-full');
	document.getElementById('overlay').classList.add('hidden');
	document.getElementById('confirmation-modal').classList.add('hidden');
	document.body.style.overflow = 'auto'; // Re-enable scrolling
	}

	function updateFavoritesUI() {
	favorites.forEach(itemName => {
	document.querySelectorAll(`.heart-icon[data-item="${itemName}"] i`).forEach(icon => {
	icon.classList.remove('far');
	icon.classList.add('fas', 'text-red-500');
	});
	});
	}

	// Search function
	function performSearch() {
	const query = document.getElementById('search-input').value.toLowerCase().trim();

	if (!query) {
	showToast('الرجاء إدخال كلمة للبحث', 'error');
	return;
	}

	let found = false;

	document.querySelectorAll('.menu-item').forEach(item => {
	const name = item.querySelector('h3').textContent.toLowerCase();
	const description = item.querySelector('p').textContent.toLowerCase();

	if (name.includes(query) \|\| description.includes(query)) {
	item.style.display = 'block';
	found = true;

	// Highlight the matching text
	if (name.includes(query)) {
	const highlightedName = item.querySelector('h3').textContent.replace(
	new RegExp(query, 'gi'),
	match => `<span class="bg-yellow-200">${match}</span>`
	);
	item.querySelector('h3').innerHTML = highlightedName;
	}
	} else {
	item.style.display = 'none';
	}
	});

	if (!found) {
	showToast('لا توجد نتائج مطابقة للبحث', 'info');
	} else {
	// Find the first visible section and scroll to it
	const firstVisibleSection = document.querySelector('.menu-section:not([style*="display: none"])');
	if (firstVisibleSection) {
	firstVisibleSection.scrollIntoView({behavior: 'smooth', block: 'start'});
	}
	}
	}

	// Sort function
	function sortMenuItems(criteria) {
	const activeSection = document.querySelector('.menu-section:not([style*="display: none"])');
	if (!activeSection) return;

	const container = activeSection.querySelector('.grid');
	const items = Array.from(container.querySelectorAll('.menu-item'));

	items.forEach(item => container.removeChild(item));

	switch(criteria) {
	case 'best-selling':
	// Sort by rating (approximated from stars count)
	items.sort((a, b) => {
	const aRating = parseInt(a.querySelector('.text-yellow-400 ~ span').textContent.match(/\d+/)[0]);
	const bRating = parseInt(b.querySelector('.text-yellow-400 ~ span').textContent.match(/\d+/)[0]);
	return bRating - aRating;
	});
	break;

	case 'price-low-to-high':
	items.sort((a, b) => {
	const aPrice = parseFloat(a.querySelector('[data-price]').getAttribute('data-price'));
	const bPrice = parseFloat(b.querySelector('[data-price]').getAttribute('data-price'));
	return aPrice - bPrice;
	});
	break;

	case 'price-high-to-low':
	items.sort((a, b) => {
	const aPrice = parseFloat(a.querySelector('[data-price]').getAttribute('data-price'));
	const bPrice = parseFloat(b.querySelector('[data-price]').getAttribute('data-price'));
	return bPrice - aPrice;
	});
	break;

	case 'newest':
	default:
	// Default order (as in HTML)
	break;
	}

	items.forEach(item => container.appendChild(item));
	showToast(`تم ترتيب العناصر حسب ${getSortCriteriaName(criteria)}`, 'success');
	}

	function getSortCriteriaName(criteria) {
	const names = {
	'best-selling': 'الأفضل مبيعاً',
	'price-low-to-high': 'السعر تصاعدياً',
	'price-high-to-low': 'السعر تنازلياً',
	'newest': 'الأحدث'
	};
	return names[criteria] \|\| criteria;
	}

	// Toast notification
	function showToast(message, type = 'success') {
	// Remove any existing toasts
	document.querySelectorAll('.toast-notification').forEach(el => el.remove());

	const colors = {
	success: 'bg-green-600',
	error: 'bg-red-600',
	warning: 'bg-yellow-600',
	info: 'bg-blue-600'
	};

	const icons = {
	success: 'fa-check-circle',
	error: 'fa-exclamation-circle',
	warning: 'fa-exclamation-triangle',
	info: 'fa-info-circle'
	};

	const toast = document.createElement('div');
	toast.className = `toast-notification fixed bottom-6 right-6 ${colors[type]} text-white px-5 py-3 rounded-lg shadow-lg transition-all duration-300 transform translate-y-20 opacity-0 z-50 flex items-center`;
	toast.innerHTML = `
	<i class="fas ${icons[type]} text-lg ml-2" aria-hidden="true"></i>
	<span>${message}</span>
	`;
	toast.setAttribute('role', 'alert');
	document.body.appendChild(toast);

	// Trigger reflow to enable transition
	void toast.offsetWidth;

	// Show toast
	toast.classList.remove('translate-y-20', 'opacity-0');
	toast.classList.add('translate-y-0', 'opacity-100');

	// Hide after 3 seconds
	setTimeout(() => {
	toast.classList.remove('translate-y-0', 'opacity-100');
	toast.classList.add('translate-y-20', 'opacity-0');

	// Remove after animation completes
	setTimeout(() => {
	toast.remove();
	}, 300);
	}, 3000);
	}

	// Animate menu items in sequence
	function animateMenuItems() {
	const items = document.querySelectorAll('.menu-item');
	items.forEach((item, index) => {
	setTimeout(() => {
	item.classList.add('show');
	}, 100 * index);
	});
	}
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=bxn7373/mneu" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>