76 lines
3.1 KiB
HTML
76 lines
3.1 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="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>🍽 Планировщик питания</h1>
|
||
<p class="subtitle">Сбалансированное меню для 4 человек на неделю с расчётом КБЖУ и списком продуктов</p>
|
||
<div class="family-info">
|
||
<span>👨 23 года (3000 ккал)</span>
|
||
<span>👨 23 года (3000 ккал)</span>
|
||
<span>👨 55 лет (2500 ккал)</span>
|
||
<span>👩 53 года (2000 ккал)</span>
|
||
<span class="budget">💰 Бюджет: 100 000 тг</span>
|
||
</div>
|
||
</header>
|
||
|
||
<nav class="tabs">
|
||
<button class="tab active" data-tab="plan">📅 План на неделю</button>
|
||
<button class="tab" data-tab="meals">🍲 Готовые блюда</button>
|
||
<button class="tab" data-tab="recipes">📖 Рецепты с КБЖУ</button>
|
||
<button class="tab" data-tab="shopping">🛒 Список продуктов</button>
|
||
<button class="tab" data-tab="timeline">⏰ Хронология</button>
|
||
</nav>
|
||
|
||
<main>
|
||
<section id="plan" class="tab-content active">
|
||
<div class="section-header">
|
||
<h2>План питания на неделю</h2>
|
||
<button id="btn-generate" class="btn-primary">🔄 Сгенерировать план</button>
|
||
</div>
|
||
<div id="weekly-totals" class="totals-block"></div>
|
||
<div id="week-plan" class="week-grid"></div>
|
||
</section>
|
||
|
||
<section id="meals" class="tab-content">
|
||
<h2>Готовые блюда</h2>
|
||
<div class="filters">
|
||
<button class="filter-btn active" data-type="all">Все</button>
|
||
<button class="filter-btn" data-type="завтрак">Завтраки</button>
|
||
<button class="filter-btn" data-type="обед">Обеды</button>
|
||
<button class="filter-btn" data-type="ужин">Ужины</button>
|
||
</div>
|
||
<div id="meals-list" class="meals-grid"></div>
|
||
</section>
|
||
|
||
<section id="recipes" class="tab-content">
|
||
<h2>Рецепты с расчётом КБЖУ</h2>
|
||
<p class="hint">Выберите блюдо для просмотра подробного рецепта</p>
|
||
<div id="recipes-list" class="recipes-grid"></div>
|
||
<div id="recipe-detail" class="recipe-detail"></div>
|
||
</section>
|
||
|
||
<section id="shopping" class="tab-content">
|
||
<div class="section-header">
|
||
<h2>Список продуктов на неделю</h2>
|
||
<button id="btn-export" class="btn-secondary">📥 Выгрузить в Excel</button>
|
||
</div>
|
||
<div id="shopping-summary" class="totals-block"></div>
|
||
<div id="shopping-list" class="shopping-grid"></div>
|
||
</section>
|
||
|
||
<section id="timeline" class="tab-content">
|
||
<h2>Хронология закупки и готовки</h2>
|
||
<div id="timeline-list" class="timeline-list"></div>
|
||
</section>
|
||
</main>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|