<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>منوفود فدک | میدونم برمیگردی!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Vazirmatn', sans-serif;
}
body {
background-color: #f9f5f0;
color: #333;
line-height: 1.6;
padding-bottom: 40px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* هدر */
header {
background: linear-gradient(135deg, #d32f2f, #b71c1c);
color: white;
padding: 20px 0;
text-align: center;
border-radius: 0 0 20px 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
margin-bottom: 25px;
}
.logo-title {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
}
.logo {
font-size: 2.8rem;
margin-bottom: 5px;
color: #ffcc00;
}
h1 {
font-size: 2.2rem;
margin-bottom: 5px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.tagline {
font-size: 1.2rem;
font-weight: 500;
color: #ffeb3b;
margin-bottom: 10px;
}
/* بخش جستجو */
.search-container {
background-color: white;
padding: 20px;
border-radius: 15px;
margin: 20px auto;
max-width: 800px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.search-box {
display: flex;
gap: 10px;
margin-bottom: 15px;
}
.search-input {
flex: 1;
padding: 15px 20px;
border: 2px solid #e0e0e0;
border-radius: 12px;
font-size: 1rem;
outline: none;
transition: all 0.3s;
}
.search-input:focus {
border-color: #d32f2f;
box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
}
.search-btn {
background: linear-gradient(135deg, #d32f2f, #b71c1c);
color: white;
border: none;
padding: 0 25px;
border-radius: 12px;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
.search-btn:hover {
background: linear-gradient(135deg, #b71c1c, #8b0000);
transform: translateY(-2px);
}
.search-results {
margin-top: 20px;
display: none;
}
.search-results.active {
display: block;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.results-count {
color: #666;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px dashed #ddd;
font-size: 0.95rem;
}
.results-count strong {
color: #d32f2f;
}
.result-item {
background-color: #f9f9f9;
padding: 15px;
border-radius: 10px;
margin-bottom: 10px;
border-right: 4px solid #d32f2f;
transition: all 0.3s;
}
.result-item:hover {
background-color: #fff5f5;
transform: translateX(-5px);
}
.result-name {
font-weight: 700;
color: #333;
margin-bottom: 5px;
font-size: 1.1rem;
}
.result-category {
color: #666;
font-size: 0.9rem;
margin-bottom: 5px;
}
.result-price {
font-weight: 700;
color: #d32f2f;
font-size: 1.2rem;
}
.no-results {
text-align: center;
padding: 30px;
color: #666;
background-color: #f9f9f9;
border-radius: 10px;
}
.no-results i {
font-size: 3rem;
color: #ddd;
margin-bottom: 15px;
}
/* بخشهای منو */
.menu-section {
background: white;
margin: 25px 0;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
padding: 20px;
overflow: hidden;
transition: transform 0.3s ease;
}
.menu-section:hover {
transform: translateY(-5px);
}
.section-title {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
color: #d32f2f;
font-size: 1.6rem;
padding-bottom: 10px;
border-bottom: 2px dashed #ffcc00;
}
.section-title i {
margin-left: 10px;
font-size: 1.8rem;
}
/* جداول منو */
.menu-table {
width: 100%;
border-collapse: collapse;
font-size: 1rem;
}
.menu-table th {
background-color: #ffebee;
color: #b71c1c;
padding: 15px 10px;
text-align: center;
font-weight: 700;
border-bottom: 2px solid #ffcc00;
}
.menu-table td {
padding: 14px 10px;
text-align: center;
border-bottom: 1px solid #eee;
}
.menu-table tr:last-child td {
border-bottom: none;
}
.menu-table tr:hover {
background-color: #fff9f9;
}
.menu-table tr.highlighted {
background-color: #fff9e6;
animation: highlightPulse 2s infinite;
}
@keyframes highlightPulse {
0% { background-color: #fff9e6; }
50% { background-color: #fff0cc; }
100% { background-color: #fff9e6; }
}
.item-name {
font-weight: 600;
color: #333;
text-align: right;
}
.price {
font-weight: 700;
color: #d32f2f;
direction: ltr;
display: inline-block;
}
/* فوتر ساده */
footer {
text-align: center;
margin-top: 50px;
padding: 25px 15px;
color: #666;
font-size: 0.9rem;
border-top: 1px solid #eee;
}
/* ریسپانسیو */
@media (max-width: 768px) {
.container {
padding: 0 10px;
}
h1 {
font-size: 1.8rem;
}
.tagline {
font-size: 1rem;
}
.menu-section {
padding: 15px;
margin: 20px 0;
}
.section-title {
font-size: 1.4rem;
}
.menu-table {
font-size: 0.9rem;
}
.menu-table th, .menu-table td {
padding: 10px 5px;
}
.search-box {
flex-direction: column;
}
.search-btn {
padding: 15px;
width: 100%;
}
.logo {
font-size: 2.2rem;
}
}
@media (max-width: 480px) {
.menu-table {
font-size: 0.85rem;
}
.section-title {
font-size: 1.2rem;
}
.search-input {
padding: 12px 15px;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="logo-title">
<div class="logo">
<i class="fas fa-utensils"></i>
</div>
<h1>منوفود فدک</h1>
<p class="tagline">"میدونم برمیگردی !"</p>
</div>
</div>
</header>
<div class="container">
<!-- بخش جستجو -->
<section class="search-container">
<div class="search-box">
<input type="text" class="search-input" id="search-input" placeholder="نام غذا یا قیمت مورد نظر را جستجو کنید... (مثال: لازانیا، پیتزا زیر 300 هزار، ساندویچ)">
<button class="search-btn" id="search-btn">
<i class="fas fa-search"></i>
<span style="margin-right: 8px;">جستجو</span>
</button>
</div>
<div class="search-results" id="search-results">
<div class="results-count" id="results-count">نتایج جستجو: <strong>0</strong> مورد یافت شد</div>
<div id="results-container">
<!-- نتایج جستجو در اینجا نمایش داده میشود -->
</div>
</div>
</section>
<!-- ویژه های فدک -->
<section class="menu-section" id="specials-section">
<h2 class="section-title"><i class="fas fa-star"></i> ویژه های فدک</h2>
<table class="menu-table">
<thead>
<tr>
<th>نام</th>
<th>قیمت (تومان)</th>
</tr>
</thead>
<tbody id="specials-table">
<!-- داده ها توسط جاوااسکریپت پر می شود -->
</tbody>
</table>
</section>
<!-- پیتزاهای تنوری فدک -->
<section class="menu-section" id="pizza-section">
<h2 class="section-title"><i class="fas fa-pizza-slice"></i> پیتزاهای تنوری فدک</h2>
<table class="menu-table">
<thead>
<tr>
<th>نام پیتزا</th>
<th>تک نفره (تومان)</th>
<th>دو نفره (تومان)</th>
</tr>
</thead>
<tbody id="pizza-table">
<!-- داده ها توسط جاوااسکریپت پر می شود -->
</tbody>
</table>
</section>
<!-- برگرهای دست ساز فدک -->
<section class="menu-section" id="burger-section">
<h2 class="section-title"><i class="fas fa-hamburger"></i> برگرهای دست ساز فدک</h2>
<table class="menu-table">
<thead>
<tr>
<th>نام</th>
<th>قیمت (تومان)</th>
</tr>
</thead>
<tbody id="burger-table">
<!-- داده ها توسط جاوااسکریپت پر می شود -->
</tbody>
</table>
</section>
<!-- ساندویچ های ویژه و پرسی -->
<section class="menu-section" id="sandwich-section">
<h2 class="section-title"><i class="fas fa-bread-slice"></i> ساندویچ های ویژه و پرسی</h2>
<table class="menu-table">
<thead>
<tr>
<th>نام</th>
<th>قیمت (تومان)</th>
</tr>
</thead>
<tbody id="sandwich-table">
<!-- داده ها توسط جاوااسکریپت پر می شود -->
</tbody>
</table>
</section>
<!-- پیش غذا فدک -->
<section class="menu-section" id="appetizer-section">
<h2 class="section-title"><i class="fas fa-french-fries"></i> پیش غذا فدک</h2>
<table class="menu-table">
<thead>
<tr>
<th>نام</th>
<th>قیمت (تومان)</th>
</tr>
</thead>
<tbody id="appetizer-table">
<!-- داده ها توسط جاوااسکریپت پر می شود -->
</tbody>
</table>
</section>
<!-- نوشیدنی های خنک -->
<section class="menu-section" id="drink-section">
<h2 class="section-title"><i class="fas fa-glass-cheers"></i> نوشیدنی های خنک</h2>
<table class="menu-table">
<thead>
<tr>
<th>نام</th>
<th>قیمت (تومان)</th>
</tr>
</thead>
<tbody id="drink-table">
<!-- داده ها توسط جاوااسکریپت پر می شود -->
</tbody>
</table>
</section>
</div>
<footer>
<div class="container">
<p> تمامی حقوق برای فست فود فدک محفوظ است</p>
</div>
</footer>
<script>
// دادههای منو
const menuData = {
specials: [
{name: "لازانیا ویژه", price: "۳۶۰,۰۰۰"},
{name: "لپی ویژه", price: "۳۲۰,۰۰۰"},
{name: "لازانیا گوشت", price: "۳۲۵,۰۰۰"},
{name: "لپی گوشت", price: "۲۹۰,۰۰۰"},
{name: "لپی برگر ویژه", price: "۲۹۰,۰۰۰"},
{name: "رست پاستا", price: "۲۷۰,۰۰۰"},
{name: "بشقاب داغ مخلوط", price: "۲۶۰,۰۰۰"},
{name: "لازانیا مخلوط", price: "۲۵۰,۰۰۰"},
{name: "لازانیا فیله مرغ", price: "۲۵۰,۰۰۰"},
{name: "پاستا آلفردو", price: "۲۲۰,۰۰۰"},
{name: "لازانیا کالباس", price: "۱۸۵,۰۰۰"}
],
pizzas: [
{name: "پیتزا قرمه محلی", single: "۴۵۰,۰۰۰", double: "۵۵۰,۰۰۰"},
{name: "پیتزا گوشت و قارچ", single: "۲۳۰,۰۰۰", double: "۳۵۵,۰۰۰"},
{name: "پیتزا میکس", single: "۳۱۰,۰۰۰", double: "۳۶۰,۰۰۰"},
{name: "پیتزا مخصوص", single: "۲۰۰,۰۰۰", double: "۲۹۰,۰۰۰"},
{name: "پیتزا فیله مرغ", single: "۱۷۰,۰۰۰", double: "۲۴۰,۰۰۰"}
],
burgers: [
{name: "دوبل برگر دستی", price: "۲۶۵,۰۰۰"},
{name: "همبرگر دستی ویژه", price: "۲۰۰,۰۰۰"},
{name: "همبرگر دستی", price: "۱۶۵,۰۰۰"},
{name: "رویال برگر", price: "۱۴۰,۰۰۰"},
{name: "دوبل برگر (معمولی)", price: "۱۳۵,۰۰۰"},
{name: "چیز برگر", price: "۱۲۵,۰۰۰"},
{name: "همبرگر (معمولی)", price: "۷۵,۰۰۰"}
],
sandwiches: [
{name: "قرمه پرسی", price: "۳۶۰,۰۰۰"},
{name: "ساندویچ قرمه محلی", price: "۳۳۰,۰۰۰"},
{name: "ساندویچ مخصوص فدک", price: "۲۶۰,۰۰۰"},
{name: "ساندویچ رست بیف ویژه", price: "۲۳۰,۰۰۰"},
{name: "ساندویچ پیتزا (با گوشت)", price: "۲۱۰,۰۰۰"},
{name: "ساندویچ چیکن ویژه", price: "۱۷۰,۰۰۰"},
{name: "ساندویچ مرغ مخلوط", price: "۱۷۰,۰۰۰"},
{name: "ساندویچ رویال ویژه", price: "۱۶۰,۰۰۰"},
{name: "ساندویچ فیله مرغ ویژه", price: "۱۵۵,۰۰۰"},
{name: "ساندویچ مخلوط", price: "۱۴۵,۰۰۰"},
{name: "ساندویچ استیک ویژه", price: "۱۳۵,۰۰۰"},
{name: "ساندویچ خوراک ویژه", price: "۱۲۵,۰۰۰"},
{name: "ساندویچ مرغ", price: "۱۲۰,۰۰۰"},
{name: "ساندویچ خوراک با مرغ", price: "۱۱۵,۰۰۰"},
{name: "ساندویچ کالباس", price: "۱۰۰,۰۰۰"},
{name: "ساندویچ خوراک هندی", price: "۹۰,۰۰۰"},
{name: "ساندویچ ژامبون تنوری", price: "[قیمت]"}
],
appetizers: [
{name: "سیب و پنیر", price: "۱۲۰,۰۰۰"},
{name: "چیپس و پنیر", price: "۹۰,۰۰۰"},
{name: "سیب زمینی سرخ کرده", price: "۸۰,۰۰۰"}
],
drinks: [
{name: "دوغ خانواده", price: "۶۰,۰۰۰"},
{name: "نوشابه خانواده", price: "۵۵,۰۰۰"},
{name: "دلستر خانواده", price: "۵۰,۰۰۰"},
{name: "نوشابه قوطی", price: "۴۰,۰۰۰"},
{name: "دلستر لیموناد / شیشه", price: "۴۰,۰۰۰"},
{name: "لیموناد شیشه", price: "۳۵,۰۰۰"},
{name: "نوشابه تک نفره", price: "۲۵,۰۰۰"},
{name: "لیموناد تک نفره", price: "۲۵,۰۰۰"},
{name: "دوغ تک نفره", price: "۲۵,۰۰۰"},
{name: "آب معدنی", price: "۱۵,۰۰۰"},
{name: "آب معدنی کوچک", price: "۱۰,۰۰۰"}
]
};
// تابع برای پر کردن جداول با دادهها
function populateTables() {
// ویژهها
const specialsTable = document.getElementById('specials-table');
menuData.specials.forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `
<td class="item-name">${item.name}</td>
<td><span class="price">${item.price}</span></td>
`;
specialsTable.appendChild(row);
});
// پیتزاها
const pizzaTable = document.getElementById('pizza-table');
menuData.pizzas.forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `
<td class="item-name">${item.name}</td>
<td><span class="price">${item.single}</span></td>
<td><span class="price">${item.double}</span></td>
`;
pizzaTable.appendChild(row);
});
// برگرها
const burgerTable = document.getElementById('burger-table');
menuData.burgers.forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `
<td class="item-name">${item.name}</td>
<td><span class="price">${item.price}</span></td>
`;
burgerTable.appendChild(row);
});
// ساندویچها
const sandwichTable = document.getElementById('sandwich-table');
menuData.sandwiches.forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `
<td class="item-name">${item.name}</td>
<td><span class="price">${item.price}</span></td>
`;
sandwichTable.appendChild(row);
});
// پیش غذاها
const appetizerTable = document.getElementById('appetizer-table');
menuData.appetizers.forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `
<td class="item-name">${item.name}</td>
<td><span class="price">${item.price}</span></td>
`;
appetizerTable.appendChild(row);
});
// نوشیدنیها
const drinkTable = document.getElementById('drink-table');
menuData.drinks.forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `
<td class="item-name">${item.name}</td>
<td><span class="price">${item.price}</span></td>
`;
drinkTable.appendChild(row);
});
}
// تابع برای جستجو در منو
function searchMenu(query) {
// پاک کردن هایلایت قبلی
document.querySelectorAll('.menu-table tr').forEach(row => {
row.classList.remove('highlighted');
});
// اگر جستجو خالی باشد
if (!query.trim()) {
document.getElementById('search-results').classList.remove('active');
return;
}
// تبدیل اعداد فارسی به انگلیسی برای پردازش
const persianToEnglishNumbers = {
'۰': '0', '۱': '1', '۲': '2', '۳': '3', '۴': '4',
'۵': '5', '۶': '6', '۷': '7', '۸': '8', '۹': '9'
};
let englishQuery = query;
for (const [persian, english] of Object.entries(persianToEnglishNumbers)) {
englishQuery = englishQuery.replace(new RegExp(persian, 'g'), english);
}
// همه آیتمها را در یک آرایه جمعآوری میکنیم
const allItems = [
...menuData.specials.map(item => ({...item, category: "ویژه های فدک", categoryId: "specials-section"})),
...menuData.pizzas.map(item => ({...item, name: item.name, price: item.single, category: "پیتزاهای تنوری فدک", categoryId: "pizza-section"})),
...menuData.burgers.map(item => ({...item, category: "برگرهای دست ساز فدک", categoryId: "burger-section"})),
...menuData.sandwiches.map(item => ({...item, category: "ساندویچ های ویژه و پرسی", categoryId: "sandwich-section"})),
...menuData.appetizers.map(item => ({...item, category: "پیش غذا فدک", categoryId: "appetizer-section"})),
...menuData.drinks.map(item => ({...item, category: "نوشیدنی های خنک", categoryId: "drink-section"}))
];
let results = [];
// بررسی اگر کاربر قیمت خاصی را جستجو کرده
const priceMatch = englishQuery.match(/(\d+)\s*(هزار|تومن|تومان|زیر|کمتر)/);
if (priceMatch) {
const maxPrice = parseInt(priceMatch[1]) * 1000;
results = allItems.filter(item => {
const itemPrice = parseInt(item.price.replace(/,/g, '')) || 0;
return itemPrice > 0 && itemPrice <= maxPrice;
});
} else {
// جستجو بر اساس نام
results = allItems.filter(item =>
item.name.includes(query) ||
item.name.toLowerCase().includes(query.toLowerCase())
);
}
// نمایش نتایج
displayResults(results, query);
// هایلایت کردن نتایج در جداول
highlightResults(results);
}
// تابع برای نمایش نتایج جستجو
function displayResults(results, query) {
const resultsContainer = document.getElementById('results-container');
const resultsCount = document.getElementById('results-count');
const searchResults = document.getElementById('search-results');
// بهروزرسانی تعداد نتایج
resultsCount.innerHTML = `نتایج جستجو برای "<strong>${query}</strong>": <strong>${results.length}</strong> مورد یافت شد`;
// پاک کردن نتایج قبلی
resultsContainer.innerHTML = '';
if (results.length === 0) {
// نمایش پیام عدم یافتن نتیجه
resultsContainer.innerHTML = `
<div class="no-results">
<i class="fas fa-search"></i>
<h3>نتیجهای یافت نشد</h3>
<p>هیچ آیتمی با عبارت "${query}" پیدا نشد. لطفاً عبارت جستجوی خود را تغییر دهید.</p>
</div>
`;
} else {
// نمایش نتایج
results.forEach(item => {
const resultElement = document.createElement('div');
resultElement.className = 'result-item';
resultElement.innerHTML = `
<div class="result-name">${item.name}</div>
<div class="result-category">${item.category}</div>
<div class="result-price">${item.price} تومان</div>
`;
// کلیک بر روی نتیجه برای اسکرول به آیتم
resultElement.addEventListener('click', () => {
const section = document.getElementById(item.categoryId);
if (section) {
section.scrollIntoView({ behavior: 'smooth', block: 'center' });
// هایلایت بیشتر آیتم
const allRows = document.querySelectorAll(`#${item.categoryId} .menu-table tr`);
allRows.forEach(row => {
if (row.textContent.includes(item.name)) {
row.classList.add('highlighted');
setTimeout(() => {
row.classList.remove('highlighted');
}, 3000);
}
});
}
});
resultsContainer.appendChild(resultElement);
});
}
// نمایش بخش نتایج
searchResults.classList.add('active');
// اسکرول به بخش نتایج
searchResults.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
// تابع برای هایلایت کردن نتایج در جداول
function highlightResults(results) {
results.forEach(item => {
const section = document.getElementById(item.categoryId);
if (section) {
const allRows = section.querySelectorAll('.menu-table tr');
allRows.forEach(row => {
if (row.textContent.includes(item.name)) {
row.classList.add('highlighted');
// حذف هایلایت پس از 3 ثانیه
setTimeout(() => {
row.classList.remove('highlighted');
}, 3000);
}
});
}
});
}
// رویدادهای جستجو
document.addEventListener('DOMContentLoaded', function() {
populateTables();
const searchInput = document.getElementById('search-input');
const searchBtn = document.getElementById('search-btn');
// جستجو با کلیک روی دکمه
searchBtn.addEventListener('click', () => {
searchMenu(searchInput.value);
});
// جستجو با فشردن دکمه Enter
searchInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
searchMenu(searchInput.value);
}
});
// جستجوی خودکار پس از تایپ کردن
let searchTimeout;
searchInput.addEventListener('input', () => {
clearTimeout(searchTimeout);
searchTimeout = setTimeout(() => {
if (searchInput.value.length >= 2) {
searchMenu(searchInput.value);
} else if (searchInput.value.length === 0) {
document.getElementById('search-results').classList.remove('active');
}
}, 500);
});
// پیشنهادات جستجو هنگام فوکوس
searchInput.addEventListener('focus', () => {
if (searchInput.value.length >= 2) {
searchMenu(searchInput.value);
}
});
});
</script>
</body>
</html>