1135 lines
44 KiB
HTML
1135 lines
44 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Меню на неделю — ПП рецепты</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🥗</text></svg>">
|
||
<style>
|
||
:root {
|
||
--primary: #FF6B6B;
|
||
--secondary: #4ECDC4;
|
||
--accent: #FFE66D;
|
||
--dark: #2C3E50;
|
||
--light: #F7F9FC;
|
||
--success: #95E1D3;
|
||
--warning: #F38181;
|
||
--purple: #6C5CE7;
|
||
--orange: #FFA502;
|
||
}
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: 'Open Sans', sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: var(--dark);
|
||
line-height: 1.6;
|
||
}
|
||
.hero {
|
||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||
color: white;
|
||
padding: 60px 20px;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
|
||
background-size: 30px 30px;
|
||
animation: moveGrid 20s linear infinite;
|
||
}
|
||
@keyframes moveGrid {
|
||
0% { transform: translate(0, 0); }
|
||
100% { transform: translate(30px, 30px); }
|
||
}
|
||
.hero h1 {
|
||
font-family: 'Montserrat', sans-serif;
|
||
font-size: clamp(32px, 5vw, 56px);
|
||
font-weight: 800;
|
||
margin-bottom: 16px;
|
||
position: relative;
|
||
z-index: 1;
|
||
text-shadow: 3px 3px 6px rgba(0,0,0,0.2);
|
||
}
|
||
.hero p {
|
||
font-size: clamp(16px, 2vw, 20px);
|
||
max-width: 600px;
|
||
margin: 0 auto 24px;
|
||
position: relative;
|
||
z-index: 1;
|
||
opacity: 0.95;
|
||
}
|
||
.hero-emoji {
|
||
font-size: clamp(40px, 8vw, 80px);
|
||
margin-bottom: 16px;
|
||
animation: bounce 2s infinite;
|
||
}
|
||
@keyframes bounce {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-20px); }
|
||
}
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 40px 20px;
|
||
}
|
||
.day-section {
|
||
background: white;
|
||
border-radius: 24px;
|
||
padding: 32px;
|
||
margin-bottom: 32px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.day-section::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 6px;
|
||
background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent), var(--purple));
|
||
}
|
||
.day-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.day-badge {
|
||
background: linear-gradient(135deg, var(--primary), var(--warning));
|
||
color: white;
|
||
padding: 12px 24px;
|
||
border-radius: 50px;
|
||
font-family: 'Montserrat', sans-serif;
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
|
||
}
|
||
.day-total {
|
||
margin-left: auto;
|
||
background: var(--light);
|
||
padding: 12px 20px;
|
||
border-radius: 12px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
.meal-type {
|
||
margin-bottom: 24px;
|
||
}
|
||
.meal-type h3 {
|
||
font-family: 'Montserrat', sans-serif;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: var(--dark);
|
||
margin-bottom: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.meal-type h3 .icon {
|
||
font-size: 24px;
|
||
}
|
||
.meal-type.breakfast h3 { color: var(--orange); }
|
||
.meal-type.snack1 h3 { color: var(--success); }
|
||
.meal-type.lunch h3 { color: var(--primary); }
|
||
.meal-type.snack2 h3 { color: var(--purple); }
|
||
.meal-type.dinner h3 { color: var(--secondary); }
|
||
.recipe-card {
|
||
background: var(--light);
|
||
border-radius: 16px;
|
||
padding: 20px;
|
||
margin-bottom: 16px;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
cursor: pointer;
|
||
}
|
||
.recipe-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
|
||
}
|
||
.recipe-header {
|
||
display: flex;
|
||
gap: 16px;
|
||
margin-bottom: 16px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.recipe-image {
|
||
width: 120px;
|
||
height: 120px;
|
||
border-radius: 12px;
|
||
object-fit: cover;
|
||
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
||
}
|
||
.recipe-info {
|
||
flex: 1;
|
||
min-width: 200px;
|
||
}
|
||
.recipe-name {
|
||
font-family: 'Montserrat', sans-serif;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
margin-bottom: 8px;
|
||
color: var(--dark);
|
||
}
|
||
.recipe-meta {
|
||
display: flex;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 12px;
|
||
font-size: 14px;
|
||
}
|
||
.meta-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
background: white;
|
||
padding: 4px 12px;
|
||
border-radius: 20px;
|
||
font-weight: 600;
|
||
}
|
||
.bjhu-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
|
||
gap: 8px;
|
||
margin-top: 12px;
|
||
}
|
||
.bjhu-item {
|
||
background: white;
|
||
padding: 8px;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
}
|
||
.bjhu-value {
|
||
font-weight: 800;
|
||
font-size: 16px;
|
||
display: block;
|
||
}
|
||
.bjhu-protein { color: var(--primary); }
|
||
.bjhu-fat { color: var(--warning); }
|
||
.bjhu-carbs { color: var(--secondary); }
|
||
.bjhu-cal { color: var(--purple); }
|
||
.recipe-details {
|
||
display: none;
|
||
margin-top: 16px;
|
||
padding-top: 16px;
|
||
border-top: 2px dashed rgba(0,0,0,0.1);
|
||
}
|
||
.recipe-details.show {
|
||
display: block;
|
||
}
|
||
.recipe-details h4 {
|
||
font-family: 'Montserrat', sans-serif;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
margin-bottom: 8px;
|
||
color: var(--dark);
|
||
}
|
||
.recipe-details p, .recipe-details li {
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
}
|
||
.recipe-details ul, .recipe-details ol {
|
||
margin-left: 20px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.toggle-btn {
|
||
background: linear-gradient(135deg, var(--secondary), #26C9B9);
|
||
color: white;
|
||
border: none;
|
||
padding: 8px 16px;
|
||
border-radius: 20px;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
margin-top: 8px;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
.toggle-btn:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
.no-oven-badge {
|
||
display: inline-block;
|
||
background: linear-gradient(135deg, var(--success), #7BC9A8);
|
||
color: white;
|
||
padding: 4px 12px;
|
||
border-radius: 12px;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
margin-left: 8px;
|
||
}
|
||
.filter-bar {
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 20px;
|
||
margin-bottom: 32px;
|
||
display: flex;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
|
||
}
|
||
.filter-btn {
|
||
background: var(--light);
|
||
border: 2px solid transparent;
|
||
padding: 10px 20px;
|
||
border-radius: 25px;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
font-family: 'Montserrat', sans-serif;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.filter-btn:hover, .filter-btn.active {
|
||
background: var(--primary);
|
||
color: white;
|
||
transform: scale(1.05);
|
||
}
|
||
.search-input {
|
||
flex: 1;
|
||
min-width: 200px;
|
||
padding: 10px 20px;
|
||
border: 2px solid var(--light);
|
||
border-radius: 25px;
|
||
font-size: 14px;
|
||
font-family: 'Open Sans', sans-serif;
|
||
}
|
||
.search-input:focus {
|
||
outline: none;
|
||
border-color: var(--primary);
|
||
}
|
||
@media (max-width: 768px) {
|
||
.hero { padding: 40px 16px; }
|
||
.container { padding: 20px 16px; }
|
||
.day-section { padding: 20px; }
|
||
.recipe-header { flex-direction: column; }
|
||
.recipe-image { width: 100%; height: 200px; }
|
||
.day-header { flex-direction: column; align-items: flex-start; gap: 12px; }
|
||
.day-total { margin-left: 0; width: 100%; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<section class="hero">
|
||
<div class="hero-emoji">🥗🍳🥑</div>
|
||
<h1>Меню на неделю</h1>
|
||
<p>Сбалансированное ПП-питание без духовки с рецептами, фото и расчётом БЖУ</p>
|
||
</section>
|
||
|
||
<div class="container">
|
||
<div class="filter-bar">
|
||
<input type="text" class="search-input" placeholder="🔍 Поиск блюда..." id="searchInput">
|
||
<button class="filter-btn active" data-day="all">Все дни</button>
|
||
<button class="filter-btn" data-day="1">Понедельник</button>
|
||
<button class="filter-btn" data-day="2">Вторник</button>
|
||
<button class="filter-btn" data-day="3">Среда</button>
|
||
<button class="filter-btn" data-day="4">Четверг</button>
|
||
<button class="filter-btn" data-day="5">Пятница</button>
|
||
<button class="filter-btn" data-day="6">Суббота</button>
|
||
<button class="filter-btn" data-day="7">Воскресенье</button>
|
||
</div>
|
||
|
||
<div id="menuContainer"></div>
|
||
</div>
|
||
|
||
<script>
|
||
const menuData = [
|
||
{
|
||
day: 1,
|
||
name: "Понедельник",
|
||
meals: [
|
||
{
|
||
type: "breakfast",
|
||
icon: "🌅",
|
||
name: "Завтрак",
|
||
recipes: [
|
||
{
|
||
name: "Овсяная каша с ягодами и орехами",
|
||
image: "https://images.unsplash.com/photo-1517673132405-a56a62b18caf?w=400&h=300&fit=crop",
|
||
time: "15 мин",
|
||
protein: 12,
|
||
fats: 18,
|
||
carbs: 52,
|
||
calories: 420,
|
||
ingredients: ["Овсяные хлопья — 80г", "Молоко 1.5% — 200мл", "Ягоды (черника/малина) — 100г", "Грецкие орехи — 20г", "Мёд — 1 ч.л."],
|
||
recipe: "1. Залить овсяные хлопья молоком и варить на среднем огне 5-7 минут, помешивая.\n2. Добавить ягоды и перемешать.\n3. Выложить в тарелку, украсить орехами и полить мёдом."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "snack1",
|
||
icon: "🍎",
|
||
name: "Перекус",
|
||
recipes: [
|
||
{
|
||
name: "Творог с фруктами",
|
||
image: "https://images.unsplash.com/photo-1488477181946-6428a0291777?w=400&h=300&fit=crop",
|
||
time: "5 мин",
|
||
protein: 18,
|
||
fats: 5,
|
||
carbs: 20,
|
||
calories: 200,
|
||
ingredients: ["Творог 5% — 150г", "Яблоко — 1 шт", "Корица — по вкусу"],
|
||
recipe: "1. Творог выложить в миску.\n2. Яблоко нарезать кубиками.\n3. Смешать творог с яблоком, посыпать корицей."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "lunch",
|
||
icon: "🍲",
|
||
name: "Обед",
|
||
recipes: [
|
||
{
|
||
name: "Куриный суп с овощами",
|
||
image: "https://images.unsplash.com/photo-1547592166-23ac45744acd?w=400&h=300&fit=crop",
|
||
time: "40 мин",
|
||
protein: 25,
|
||
fats: 8,
|
||
carbs: 22,
|
||
calories: 280,
|
||
ingredients: ["Куриное филе — 200г", "Картофель — 2 шт", "Морковь — 1 шт", "Лук — 1 шт", "Вермишель — 50г", "Зелень, соль, перец"],
|
||
recipe: "1. Куриное филе отварить 20 минут, нарезать.\n2. Картофель нарезать кубиками, морковь натереть, лук измельчить.\n3. Добавить овощи в бульон, варить 10 минут.\n4. Добавить вермишель и курицу, варить ещё 5 минут.\n5. Посыпать зеленью."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "snack2",
|
||
icon: "🥤",
|
||
name: "Полдник",
|
||
recipes: [
|
||
{
|
||
name: "Протеиновый коктейль с бананом",
|
||
image: "https://images.unsplash.com/photo-1577805947697-b9b5b8e7e8e7?w=400&h=300&fit=crop",
|
||
time: "5 мин",
|
||
protein: 20,
|
||
fats: 3,
|
||
carbs: 25,
|
||
calories: 210,
|
||
ingredients: ["Протеин (ванильный) — 30г", "Банан — 1 шт", "Молоко 1.5% — 250мл"],
|
||
recipe: "1. Все ингредиенты поместить в блендер.\n2. Взбивать 1-2 минуты до однородности."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "dinner",
|
||
icon: "🍽️",
|
||
name: "Ужин",
|
||
recipes: [
|
||
{
|
||
name: "Рыба на пару с брокколи",
|
||
image: "https://images.unsplash.com/photo-1467003909585-2f8a7270028d?w=400&h=300&fit=crop",
|
||
time: "25 мин",
|
||
protein: 30,
|
||
fats: 10,
|
||
carbs: 12,
|
||
calories: 260,
|
||
ingredients: ["Филе белой рыбы (минтай/треска) — 200г", "Брокколи — 200г", "Лимон — 1/4 шт", "Специи для рыбы"],
|
||
recipe: "1. Рыбу натереть специями, сбрызнуть лимоном.\n2. Брокколи разобрать на соцветия.\n3. Готовить в пароварке 20-25 минут.\n4. Подавать с долькой лимона."
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
day: 2,
|
||
name: "Вторник",
|
||
meals: [
|
||
{
|
||
type: "breakfast",
|
||
icon: "🌅",
|
||
name: "Завтрак",
|
||
recipes: [
|
||
{
|
||
name: "Омлет с овощами и сыром",
|
||
image: "https://images.unsplash.com/photo-1510693206972-df098062cb71?w=400&h=300&fit=crop",
|
||
time: "15 мин",
|
||
protein: 22,
|
||
fats: 20,
|
||
carbs: 8,
|
||
calories: 310,
|
||
ingredients: ["Яйца — 3 шт", "Помидор — 1 шт", "Болгарский перец — 1/2 шт", "Сыр — 40г", "Молоко — 50мл"],
|
||
recipe: "1. Яйца взбить с молоком.\n2. Овощи нарезать кубиками.\n3. Обжарить овощи 3 минуты на сковороде.\n4. Залить яйцами, накрыть крышкой, готовить 5-7 минут.\n5. Посыпать сыром."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "snack1",
|
||
icon: "🥑",
|
||
name: "Перекус",
|
||
recipes: [
|
||
{
|
||
name: "Авокадо-тост с яйцом пашот",
|
||
image: "https://images.unsplash.com/photo-1525351484163-7529414395d8?w=400&h=300&fit=crop",
|
||
time: "10 мин",
|
||
protein: 12,
|
||
fats: 15,
|
||
carbs: 18,
|
||
calories: 260,
|
||
ingredients: ["Хлеб цельнозерновой — 2 ломтика", "Авокадо — 1/2 шт", "Яйцо — 1 шт", "Лимонный сок, соль, перец"],
|
||
recipe: "1. Авокадо размять вилкой с лимоном и солью.\n2. Хлеб подсушить на сухой сковороде.\n3. Яйцо приготовить пашот (в кипятке 3 минуты).\n4. Намазать авокадо на тост, сверху яйцо."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "lunch",
|
||
icon: "🍲",
|
||
name: "Обед",
|
||
recipes: [
|
||
{
|
||
name: "Гречка с индейкой и грибами",
|
||
image: "https://images.unsplash.com/photo-1585032226651-759b368d7246?w=400&h=300&fit=crop",
|
||
time: "30 мин",
|
||
protein: 28,
|
||
fats: 12,
|
||
carbs: 45,
|
||
calories: 400,
|
||
ingredients: ["Гречка — 80г (сухая)", "Филе индейки — 150г", "Шампиньоны — 100г", "Лук — 1 шт", "Масло оливковое — 1 ст.л."],
|
||
recipe: "1. Гречку отварить 20 минут.\n2. Индейку нарезать кубиками, обжарить 5 минут.\n3. Добавить грибы и лук, готовить ещё 7 минут.\n4. Смешать с гречкой."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "snack2",
|
||
icon: "🥤",
|
||
name: "Полдник",
|
||
recipes: [
|
||
{
|
||
name: "Смузи зелёный детокс",
|
||
image: "https://images.unsplash.com/photo-1610970872781-42f9979a2fe1?w=400&h=300&fit=crop",
|
||
time: "5 мин",
|
||
protein: 4,
|
||
fats: 2,
|
||
carbs: 22,
|
||
calories: 120,
|
||
ingredients: ["Шпинат — 50г", "Огурец — 1 шт", "Яблоко зелёное — 1 шт", "Сельдерей — 1 стебель", "Вода — 200мл"],
|
||
recipe: "1. Все ингредиенты нарезать.\n2. Поместить в блендер с водой.\n3. Взбивать 1-2 минуты."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "dinner",
|
||
icon: "🍽️",
|
||
name: "Ужин",
|
||
recipes: [
|
||
{
|
||
name: "Куриные котлеты на пару с салатом",
|
||
image: "https://images.unsplash.com/photo-1532550907401-a500c9a57435?w=400&h=300&fit=crop",
|
||
time: "30 мин",
|
||
protein: 32,
|
||
fats: 8,
|
||
carbs: 10,
|
||
calories: 250,
|
||
ingredients: ["Куриное филе — 200г", "Лук — 1/2 шт", "Хлеб цельнозерновой — 30г", "Огурец, помидор — для салата", "Масло оливковое — 1 ч.л."],
|
||
recipe: "1. Филе и лук прокрутить в фарш.\n2. Добавить размоченный хлеб, соль, перец.\n3. Сформировать котлеты.\n4. Готовить в пароварке 20 минут.\n5. Подать со свежим салатом."
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
day: 3,
|
||
name: "Среда",
|
||
meals: [
|
||
{
|
||
type: "breakfast",
|
||
icon: "🌅",
|
||
name: "Завтрак",
|
||
recipes: [
|
||
{
|
||
name: "Сырники на пару",
|
||
image: "https://images.unsplash.com/photo-1567620905732-2d1d7a07d34a?w=400&h=300&fit=crop",
|
||
time: "25 мин",
|
||
protein: 20,
|
||
fats: 14,
|
||
carbs: 28,
|
||
calories: 320,
|
||
ingredients: ["Творог 5% — 200г", "Яйцо — 1 шт", "Мука рисовая — 40г", "Сахар — 1 ст.л.", "Сметана 10% — 30г"],
|
||
recipe: "1. Творог смешать с яйцом, сахаром и мукой.\n2. Сформировать сырники.\n3. Готовить в пароварке 15 минут.\n4. Подавать со сметаной."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "snack1",
|
||
icon: "🍌",
|
||
name: "Перекус",
|
||
recipes: [
|
||
{
|
||
name: "Банановые панкейки без масла",
|
||
image: "https://images.unsplash.com/photo-1528207776546-365bb710ee93?w=400&h=300&fit=crop",
|
||
time: "15 мин",
|
||
protein: 10,
|
||
fats: 6,
|
||
carbs: 35,
|
||
calories: 240,
|
||
ingredients: ["Банан — 1 спелый", "Яйцо — 2 шт", "Овсяные хлопья — 40г", "Разрыхлитель — 1/2 ч.л."],
|
||
recipe: "1. Банан размять вилкой.\n2. Добавить яйца и хлопья, перемешать.\n3. Жарить на сухой сковороде по 2 минуты с каждой стороны."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "lunch",
|
||
icon: "🍲",
|
||
name: "Обед",
|
||
recipes: [
|
||
{
|
||
name: "Паста с тунцом и томатами",
|
||
image: "https://images.unsplash.com/photo-1563379926898-05f4575a45d8?w=400&h=300&fit=crop",
|
||
time: "20 мин",
|
||
protein: 26,
|
||
fats: 10,
|
||
carbs: 48,
|
||
calories: 380,
|
||
ingredients: ["Паста из твёрдых сортов — 80г (сухая)", "Тунец в собственном соку — 100г", "Помидоры черри — 150г", "Чеснок — 1 зубчик", "Базилик, оливковое масло"],
|
||
recipe: "1. Пасту отварить до готовности.\n2. Помидоры разрезать пополам.\n3. На сковороде обжарить чеснок 1 минуту, добавить томаты, тушить 3 минуты.\n4. Добавить тунец и пасту, перемешать.\n5. Украсить базиликом."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "snack2",
|
||
icon: "🥤",
|
||
name: "Полдник",
|
||
recipes: [
|
||
{
|
||
name: "Кефир с отрубями и ягодами",
|
||
image: "https://images.unsplash.com/photo-1563805042-7684c019e1cb?w=400&h=300&fit=crop",
|
||
time: "3 мин",
|
||
protein: 8,
|
||
fats: 3,
|
||
carbs: 15,
|
||
calories: 120,
|
||
ingredients: ["Кефир 1% — 250мл", "Отруби овсяные — 20г", "Ягоды — 50г"],
|
||
recipe: "1. Кефир налить в стакан.\n2. Добавить отруби и ягоды.\n3. Перемешать."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "dinner",
|
||
icon: "🍽️",
|
||
name: "Ужин",
|
||
recipes: [
|
||
{
|
||
name: "Креветки с овощами вок",
|
||
image: "https://images.unsplash.com/photo-1512058564366-18510be2db19?w=400&h=300&fit=crop",
|
||
time: "20 мин",
|
||
protein: 24,
|
||
fats: 8,
|
||
carbs: 15,
|
||
calories: 230,
|
||
ingredients: ["Креветки — 200г", "Болгарский перец — 1 шт", "Стручковая фасоль — 100г", "Морковь — 1 шт", "Соевый соус — 2 ст.л.", "Имбирь, чеснок"],
|
||
recipe: "1. Овощи нарезать соломкой.\n2. Обжарить в воке 5 минут на сильном огне.\n3. Добавить креветки, соевый соус, имбирь и чеснок.\n4. Готовить ещё 3-4 минуты."
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
day: 4,
|
||
name: "Четверг",
|
||
meals: [
|
||
{
|
||
type: "breakfast",
|
||
icon: "🌅",
|
||
name: "Завтрак",
|
||
recipes: [
|
||
{
|
||
name: "Гранола с йогуртом и фруктами",
|
||
image: "https://images.unsplash.com/photo-1517673132405-a56a62b18caf?w=400&h=300&fit=crop",
|
||
time: "10 мин",
|
||
protein: 14,
|
||
fats: 16,
|
||
carbs: 48,
|
||
calories: 380,
|
||
ingredients: ["Гранола домашняя — 60г", "Йогурт греческий — 150г", "Банан — 1/2 шт", "Киви — 1 шт", "Семена чиа — 1 ч.л."],
|
||
recipe: "1. В миску выложить йогурт.\n2. Сверху добавить гранолу.\n3. Украсить нарезанными фруктами и семенами."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "snack1",
|
||
icon: "🥜",
|
||
name: "Перекус",
|
||
recipes: [
|
||
{
|
||
name: "Ореховая смесь с сухофруктами",
|
||
image: "https://images.unsplash.com/photo-1596525737526-16c60b57e658?w=400&h=300&fit=crop",
|
||
time: "2 мин",
|
||
protein: 8,
|
||
fats: 18,
|
||
carbs: 20,
|
||
calories: 270,
|
||
ingredients: ["Миндаль — 15г", "Кешью — 15г", "Курага — 20г", "Изюм — 15г"],
|
||
recipe: "Просто смешать все ингредиенты. Удобно брать с собой!"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "lunch",
|
||
icon: "🍲",
|
||
name: "Обед",
|
||
recipes: [
|
||
{
|
||
name: "Борщ без мяса (вегетарианский)",
|
||
image: "https://images.unsplash.com/photo-1547592166-23ac45744acd?w=400&h=300&fit=crop",
|
||
time: "45 мин",
|
||
protein: 8,
|
||
fats: 10,
|
||
carbs: 35,
|
||
calories: 260,
|
||
ingredients: ["Свёкла — 2 шт", "Капуста — 200г", "Картофель — 2 шт", "Морковь — 1 шт", "Лук — 1 шт", "Томатная паста — 2 ст.л.", "Сметана 10% — 30г"],
|
||
recipe: "1. Свёклу натереть, тушить с томатной пастой 10 минут.\n2. Картофель нарезать, отварить 10 минут.\n3. Добавить капусту, варить 10 минут.\n4. Добавить свёклу, морковь, лук.\n5. Варить ещё 10 минут.\n6. Подавать со сметаной."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "snack2",
|
||
icon: "🍊",
|
||
name: "Полдник",
|
||
recipes: [
|
||
{
|
||
name: "Фруктовый салат с йогуртом",
|
||
image: "https://images.unsplash.com/photo-1490474418585-ba9bad8fd0ea?w=400&h=300&fit=crop",
|
||
time: "10 мин",
|
||
protein: 4,
|
||
fats: 2,
|
||
carbs: 28,
|
||
calories: 150,
|
||
ingredients: ["Апельсин — 1 шт", "Яблоко — 1 шт", "Груша — 1/2 шт", "Йогурт натуральный — 100г"],
|
||
recipe: "1. Фрукты нарезать кубиками.\n2. Заправить йогуртом.\n3. Перемешать."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "dinner",
|
||
icon: "🍽️",
|
||
name: "Ужин",
|
||
recipes: [
|
||
{
|
||
name: "Кальмары тушёные с овощами",
|
||
image: "https://images.unsplash.com/photo-1565557623262-b51c2513a641?w=400&h=300&fit=crop",
|
||
time: "25 мин",
|
||
protein: 26,
|
||
fats: 6,
|
||
carbs: 12,
|
||
calories: 210,
|
||
ingredients: ["Кальмары — 250г", "Кабачок — 1 шт", "Морковь — 1 шт", "Лук — 1 шт", "Сметана 10% — 50г", "Зелень"],
|
||
recipe: "1. Кальмары очистить, нарезать кольцами.\n2. Овощи нарезать соломкой.\n3. Обжарить овощи 5 минут.\n4. Добавить кальмары, тушить 3 минуты.\n5. Добавить сметану, тушить ещё 2 минуты."
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
day: 5,
|
||
name: "Пятница",
|
||
meals: [
|
||
{
|
||
type: "breakfast",
|
||
icon: "🌅",
|
||
name: "Завтрак",
|
||
recipes: [
|
||
{
|
||
name: "Ленивая овсянка в банке",
|
||
image: "https://images.unsplash.com/photo-1517673132405-a56a62b18caf?w=400&h=300&fit=crop",
|
||
time: "5 мин (+ ночь)",
|
||
protein: 14,
|
||
fats: 12,
|
||
carbs: 45,
|
||
calories: 340,
|
||
ingredients: ["Овсяные хлопья — 60г", "Йогурт греческий — 100г", "Молоко — 100мл", "Семена льна — 1 ч.л.", "Ягоды — 80г"],
|
||
recipe: "1. Смешать все ингредиенты в банке.\n2. Убрать в холодильник на ночь.\n3. Утром готово! Можно добавить свежие ягоды."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "snack1",
|
||
icon: "🥒",
|
||
name: "Перекус",
|
||
recipes: [
|
||
{
|
||
name: "Овощные палочки с хумусом",
|
||
image: "https://images.unsplash.com/photo-1574484284008-86d47dc7b5dd?w=400&h=300&fit=crop",
|
||
time: "10 мин",
|
||
protein: 8,
|
||
fats: 12,
|
||
carbs: 18,
|
||
calories: 210,
|
||
ingredients: ["Морковь — 1 шт", "Огурец — 1 шт", "Сельдерей — 2 стебля", "Хумус — 60г"],
|
||
recipe: "1. Овощи нарезать палочками.\n2. Подать с хумусом."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "lunch",
|
||
icon: "🍲",
|
||
name: "Обед",
|
||
recipes: [
|
||
{
|
||
name: "Ризотто с грибами",
|
||
image: "https://images.unsplash.com/photo-1476124369491-e7addf5db371?w=400&h=300&fit=crop",
|
||
time: "35 мин",
|
||
protein: 12,
|
||
fats: 14,
|
||
carbs: 52,
|
||
calories: 380,
|
||
ingredients: ["Рис арборио — 80г (сухой)", "Шампиньоны — 150г", "Лук — 1 шт", "Пармезан — 30г", "Бульон овощной — 400мл", "Вино белое — 50мл (опционально)"],
|
||
recipe: "1. Лук обжарить 2 минуты.\n2. Добавить рис, обжарить 1 минуту.\n3. Влить вино, выпарить.\n4. Постепенно добавлять бульон по половнику, помешивая.\n5. Добавить грибы, готовить до готовности риса.\n6. Посыпать пармезаном."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "snack2",
|
||
icon: "🥛",
|
||
name: "Полдник",
|
||
recipes: [
|
||
{
|
||
name: "Ряженка с печеньем",
|
||
image: "https://images.unsplash.com/photo-1563805042-7684c019e1cb?w=400&h=300&fit=crop",
|
||
time: "2 мин",
|
||
protein: 6,
|
||
fats: 8,
|
||
carbs: 22,
|
||
calories: 190,
|
||
ingredients: ["Ряженка 2.5% — 250мл", "Печенье овсяное — 2 шт"],
|
||
recipe: "Просто налить ряженку и подать с печеньем."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "dinner",
|
||
icon: "🍽️",
|
||
name: "Ужин",
|
||
recipes: [
|
||
{
|
||
name: "Салат с курицей и авокадо",
|
||
image: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=400&h=300&fit=crop",
|
||
time: "20 мин",
|
||
protein: 28,
|
||
fats: 16,
|
||
carbs: 10,
|
||
calories: 300,
|
||
ingredients: ["Куриное филе — 150г", "Авокадо — 1/2 шт", "Салат айсберг — 100г", "Помидоры черри — 100г", "Оливковое масло — 1 ст.л.", "Лимонный сок"],
|
||
recipe: "1. Курицу отварить или обжарить 10 минут.\n2. Нарезать все ингредиенты.\n3. Смешать, заправить маслом и лимоном."
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
day: 6,
|
||
name: "Суббота",
|
||
meals: [
|
||
{
|
||
type: "breakfast",
|
||
icon: "🌅",
|
||
name: "Завтрак",
|
||
recipes: [
|
||
{
|
||
name: "Шакшука (яичница с овощами)",
|
||
image: "https://images.unsplash.com/photo-1588166524941-3bf61a9c41db?w=400&h=300&fit=crop",
|
||
time: "20 мин",
|
||
protein: 18,
|
||
fats: 22,
|
||
carbs: 15,
|
||
calories: 340,
|
||
ingredients: ["Яйца — 3 шт", "Помидоры — 3 шт", "Болгарский перец — 1 шт", "Лук — 1 шт", "Чеснок — 1 зубчик", "Зелень"],
|
||
recipe: "1. Лук и перец обжарить 3 минуты.\n2. Добавить помидоры, тушить 5 минут.\n3. Сделать углубления, вбить яйца.\n4. Готовить под крышкой 5-7 минут.\n5. Посыпать зеленью."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "snack1",
|
||
icon: "🍓",
|
||
name: "Перекус",
|
||
recipes: [
|
||
{
|
||
name: "Ягодный смузи-боул",
|
||
image: "https://images.unsplash.com/photo-1577805947697-b9b5b8e7e8e7?w=400&h=300&fit=crop",
|
||
time: "10 мин",
|
||
protein: 10,
|
||
fats: 8,
|
||
carbs: 32,
|
||
calories: 240,
|
||
ingredients: ["Замороженные ягоды — 150г", "Банан — 1 шт", "Йогурт греческий — 100г", "Гранола — 30г", "Кокосовая стружка"],
|
||
recipe: "1. Ягоды и банан взбить с йогуртом.\n2. Выложить в миску.\n3. Украсить гранолой и кокосом."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "lunch",
|
||
icon: "🍲",
|
||
name: "Обед",
|
||
recipes: [
|
||
{
|
||
name: "Плов с курицей (без обжарки)",
|
||
image: "https://images.unsplash.com/photo-1585032226651-759b368d7246?w=400&h=300&fit=crop",
|
||
time: "40 мин",
|
||
protein: 26,
|
||
fats: 12,
|
||
carbs: 55,
|
||
calories: 420,
|
||
ingredients: ["Рис басмати — 100г (сухой)", "Куриное филе — 200г", "Морковь — 2 шт", "Лук — 1 шт", "Специи для плова", "Масло оливковое — 1 ст.л."],
|
||
recipe: "1. Рис промыть.\n2. Курицу нарезать кубиками.\n3. Лук и морковь обжарить 3 минуты.\n4. Добавить курицу, специи, рис.\n5. Залить водой (1:2), тушить под крышкой 25 минут."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "snack2",
|
||
icon: "🧀",
|
||
name: "Полдник",
|
||
recipes: [
|
||
{
|
||
name: "Сыр моцарелла с томатами",
|
||
image: "https://images.unsplash.com/photo-1529312266912-b33cf6227e24?w=400&h=300&fit=crop",
|
||
time: "5 мин",
|
||
protein: 14,
|
||
fats: 12,
|
||
carbs: 6,
|
||
calories: 190,
|
||
ingredients: ["Моцарелла мини — 100г", "Помидоры черри — 150г", "Базилик", "Оливковое масло — 1 ч.л."],
|
||
recipe: "1. Помидоры разрезать пополам.\n2. Смешать с моцареллой.\n3. Добавить базилик и масло."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "dinner",
|
||
icon: "🍽️",
|
||
name: "Ужин",
|
||
recipes: [
|
||
{
|
||
name: "Запечённая тыква с сыром (на сковороде)",
|
||
image: "https://images.unsplash.com/photo-1574484284008-86d47dc7b5dd?w=400&h=300&fit=crop",
|
||
time: "25 мин",
|
||
protein: 10,
|
||
fats: 14,
|
||
carbs: 18,
|
||
calories: 240,
|
||
ingredients: ["Тыква — 300г", "Сыр фета — 60г", "Чеснок — 1 зубчик", "Зелень", "Масло оливковое — 1 ст.л."],
|
||
recipe: "1. Тыкву нарезать кубиками.\n2. Обжарить с чесноком 10 минут под крышкой.\n3. Добавить сыр и зелень.\n4. Готовить ещё 3 минуты."
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
day: 7,
|
||
name: "Воскресенье",
|
||
meals: [
|
||
{
|
||
type: "breakfast",
|
||
icon: "🌅",
|
||
name: "Завтрак",
|
||
recipes: [
|
||
{
|
||
name: "Блинчики из овсяной муки с творогом",
|
||
image: "https://images.unsplash.com/photo-1528207776546-365bb710ee93?w=400&h=300&fit=crop",
|
||
time: "25 мин",
|
||
protein: 22,
|
||
fats: 14,
|
||
carbs: 38,
|
||
calories: 360,
|
||
ingredients: ["Овсяная мука — 60г", "Яйца — 2 шт", "Молоко — 150мл", "Творог — 100г", "Сахар — 1 ст.л."],
|
||
recipe: "1. Смешать муку, яйца, молоко.\n2. Жарить блинчики на сухой сковороде.\n3. Творог смешать с сахаром.\n4. Намазать на блинчики."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "snack1",
|
||
icon: "🍐",
|
||
name: "Перекус",
|
||
recipes: [
|
||
{
|
||
name: "Груша с рикоттой",
|
||
image: "https://images.unsplash.com/photo-1490474418585-ba9bad8fd0ea?w=400&h=300&fit=crop",
|
||
time: "5 мин",
|
||
protein: 8,
|
||
fats: 10,
|
||
carbs: 22,
|
||
calories: 210,
|
||
ingredients: ["Груша — 1 шт", "Рикотта — 80г", "Мёд — 1 ч.л.", "Корица"],
|
||
recipe: "1. Грушу нарезать дольками.\n2. Подать с рикоттой.\n3. Полить мёдом, посыпать корицей."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "lunch",
|
||
icon: "🍲",
|
||
name: "Обед",
|
||
recipes: [
|
||
{
|
||
name: "Уха из речной рыбы",
|
||
image: "https://images.unsplash.com/photo-1547592166-23ac45744acd?w=400&h=300&fit=crop",
|
||
time: "40 мин",
|
||
protein: 24,
|
||
fats: 6,
|
||
carbs: 18,
|
||
calories: 230,
|
||
ingredients: ["Речная рыба (судак/окунь) — 300г", "Картофель — 2 шт", "Морковь — 1 шт", "Лук — 1 шт", "Лавровый лист, перец горошком"],
|
||
recipe: "1. Рыбу очистить, залить водой, варить 20 минут.\n2. Вынуть рыбу, отделить от костей.\n3. В бульон добавить картофель, морковь, лук.\n4. Варить 15 минут.\n5. Вернуть рыбу, добавить специи."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "snack2",
|
||
icon: "🥜",
|
||
name: "Полдник",
|
||
recipes: [
|
||
{
|
||
name: "Протеиновый батончик домашний",
|
||
image: "https://images.unsplash.com/photo-1577805947697-b9b5b8e7e8e7?w=400&h=300&fit=crop",
|
||
time: "5 мин",
|
||
protein: 12,
|
||
fats: 10,
|
||
carbs: 20,
|
||
calories: 220,
|
||
ingredients: ["Протеин — 20г", "Овсяные хлопья — 30г", "Арахисовая паста — 20г", "Мёд — 1 ч.л."],
|
||
recipe: "1. Смешать все ингредиенты.\n2. Сформировать батончик.\n3. Убрать в холодильник на 30 минут."
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "dinner",
|
||
icon: "🍽️",
|
||
name: "Ужин",
|
||
recipes: [
|
||
{
|
||
name: "Салат с тунцом и яйцом",
|
||
image: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=400&h=300&fit=crop",
|
||
time: "15 мин",
|
||
protein: 26,
|
||
fats: 12,
|
||
carbs: 8,
|
||
calories: 250,
|
||
ingredients: ["Тунец в собственном соку — 120г", "Яйцо варёное — 2 шт", "Огурец — 1 шт", "Салат ромэн — 100г", "Йогурт греческий — 50г"],
|
||
recipe: "1. Тунец размять вилкой.\n2. Яйцо и огурец нарезать.\n3. Смешать все ингредиенты.\n4. Заправить йогуртом."
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
];
|
||
|
||
function calculateDayTotals(meals) {
|
||
let totalP = 0, totalF = 0, totalC = 0, totalCal = 0;
|
||
meals.forEach(meal => {
|
||
meal.recipes.forEach(recipe => {
|
||
totalP += recipe.protein;
|
||
totalF += recipe.fats;
|
||
totalC += recipe.carbs;
|
||
totalCal += recipe.calories;
|
||
});
|
||
});
|
||
return { p: totalP, f: totalF, c: totalC, cal: totalCal };
|
||
}
|
||
|
||
function renderMenu(filterDay = 'all', searchTerm = '') {
|
||
const container = document.getElementById('menuContainer');
|
||
let html = '';
|
||
|
||
const filteredData = menuData.filter(dayData => {
|
||
if (filterDay !== 'all' && dayData.day !== parseInt(filterDay)) return false;
|
||
return true;
|
||
});
|
||
|
||
filteredData.forEach(dayData => {
|
||
const totals = calculateDayTotals(dayData.meals);
|
||
|
||
let dayHtml = `
|
||
<div class="day-section" data-day="${dayData.day}">
|
||
<div class="day-header">
|
||
<div class="day-badge">${dayData.name}</div>
|
||
<div class="day-total">
|
||
📊 БЖУ: <strong>${totals.p}г</strong> белков | <strong>${totals.f}г</strong> жиров |
|
||
<strong>${totals.c}г</strong> углеводов | <strong>${totals.cal} ккал</strong>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
dayData.meals.forEach(meal => {
|
||
let recipesHtml = '';
|
||
meal.recipes.forEach((recipe, idx) => {
|
||
const recipeId = `recipe-${dayData.day}-${meal.type}-${idx}`;
|
||
recipesHtml += `
|
||
<div class="recipe-card" data-name="${recipe.name.toLowerCase()}" onclick="toggleRecipe('${recipeId}')">
|
||
<div class="recipe-header">
|
||
<img src="${recipe.image}" alt="${recipe.name}" class="recipe-image" loading="lazy">
|
||
<div class="recipe-info">
|
||
<div class="recipe-name">${recipe.name} <span class="no-oven-badge">🚫🔥 Без духовки</span></div>
|
||
<div class="recipe-meta">
|
||
<span class="meta-item">⏱️ ${recipe.time}</span>
|
||
<span class="meta-item">🔥 ${recipe.calories} ккал</span>
|
||
</div>
|
||
<div class="bjhu-grid">
|
||
<div class="bjhu-item bjhu-protein"><span class="bjhu-value">${recipe.protein}г</span>Белки</div>
|
||
<div class="bjhu-item bjhu-fat"><span class="bjhu-value">${recipe.fats}г</span>Жиры</div>
|
||
<div class="bjhu-item bjhu-carbs"><span class="bjhu-value">${recipe.carbs}г</span>Углеводы</div>
|
||
<div class="bjhu-item bjhu-cal"><span class="bjhu-value">${recipe.calories}</span>ккал</div>
|
||
</div>
|
||
<button class="toggle-btn" onclick="event.stopPropagation(); toggleRecipe('${recipeId}')">📖 Показать рецепт</button>
|
||
</div>
|
||
</div>
|
||
<div id="${recipeId}" class="recipe-details">
|
||
<h4>🛒 Ингредиенты:</h4>
|
||
<ul>${recipe.ingredients.map(ing => `<li>${ing}</li>`).join('')}</ul>
|
||
<h4>👨🍳 Приготовление:</h4>
|
||
<p style="white-space: pre-line;">${recipe.recipe}</p>
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
dayHtml += `
|
||
<div class="meal-type ${meal.type}">
|
||
<h3><span class="icon">${meal.icon}</span> ${meal.name}</h3>
|
||
${recipesHtml}
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
dayHtml += `</div>`;
|
||
html += dayHtml;
|
||
});
|
||
|
||
container.innerHTML = html;
|
||
}
|
||
|
||
function toggleRecipe(id) {
|
||
const el = document.getElementById(id);
|
||
if (el) {
|
||
el.classList.toggle('show');
|
||
}
|
||
}
|
||
|
||
// Filter functionality
|
||
document.querySelectorAll('.filter-btn').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
||
this.classList.add('active');
|
||
const day = this.dataset.day;
|
||
const search = document.getElementById('searchInput').value.toLowerCase();
|
||
renderMenu(day, search);
|
||
});
|
||
});
|
||
|
||
// Search functionality
|
||
document.getElementById('searchInput').addEventListener('input', function() {
|
||
const search = this.value.toLowerCase();
|
||
const activeDay = document.querySelector('.filter-btn.active').dataset.day;
|
||
renderMenu(activeDay, search);
|
||
});
|
||
|
||
// Initial render
|
||
renderMenu();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|