142 lines
5.7 KiB
HTML
142 lines
5.7 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>
|
||
<div class="container">
|
||
<header>
|
||
<h1>🍎 Калькулятор калорий</h1>
|
||
<p class="subtitle">Твой персональный дневник питания</p>
|
||
</header>
|
||
|
||
<section class="card">
|
||
<h2>📊 Расчёт нормы калорий</h2>
|
||
<form id="profileForm">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Пол</label>
|
||
<select id="gender" required>
|
||
<option value="male">Мужской</option>
|
||
<option value="female">Женский</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Возраст (лет)</label>
|
||
<input type="number" id="age" min="10" max="100" placeholder="25" required>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Рост (см)</label>
|
||
<input type="number" id="height" min="100" max="250" placeholder="175" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Вес (кг)</label>
|
||
<input type="number" id="weight" min="30" max="300" placeholder="70" required>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Активность</label>
|
||
<select id="activity" required>
|
||
<option value="1.2">Минимальная (сидячая работа)</option>
|
||
<option value="1.375">Слабая (тренировки 1-3 раза/нед)</option>
|
||
<option value="1.55">Средняя (тренировки 3-5 раз/нед)</option>
|
||
<option value="1.725">Высокая (тренировки 6-7 раз/нед)</option>
|
||
<option value="1.9">Экстремальная (физическая работа)</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Цель</label>
|
||
<select id="goal" required>
|
||
<option value="lose">Похудение (-20%)</option>
|
||
<option value="maintain">Поддержание веса</option>
|
||
<option value="gain">Набор массы (+15%)</option>
|
||
</select>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Рассчитать</button>
|
||
</form>
|
||
<div id="result" class="result-box" style="display:none;">
|
||
<div class="result-item">
|
||
<span class="result-label">Базовый обмен (BMR)</span>
|
||
<span class="result-value" id="bmrValue">0</span>
|
||
</div>
|
||
<div class="result-item">
|
||
<span class="result-label">Норма калорий</span>
|
||
<span class="result-value" id="tdeeValue">0</span>
|
||
</div>
|
||
<div class="result-item highlight">
|
||
<span class="result-label">Твоя цель</span>
|
||
<span class="result-value" id="goalValue">0</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="card">
|
||
<h2>📝 Дневник питания</h2>
|
||
<div class="stats-row">
|
||
<div class="stat-item">
|
||
<span class="stat-label">Съедено сегодня</span>
|
||
<span class="stat-value" id="todayCalories">0</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">Цель на день</span>
|
||
<span class="stat-value" id="goalCalories">0</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">Осталось</span>
|
||
<span class="stat-value" id="remainingCalories">0</span>
|
||
</div>
|
||
</div>
|
||
<form id="entryForm">
|
||
<div class="form-row">
|
||
<div class="form-group flex-grow">
|
||
<label>Продукт / блюдо</label>
|
||
<input type="text" id="foodName" placeholder="Например: Гречка с курицей" required>
|
||
</div>
|
||
<div class="form-group" style="max-width:100px;">
|
||
<label>Ккал</label>
|
||
<input type="number" id="calories" min="0" placeholder="350" required>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Белки (г)</label>
|
||
<input type="number" id="protein" min="0" step="0.1" placeholder="25">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Жиры (г)</label>
|
||
<input type="number" id="fat" min="0" step="0.1" placeholder="15">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Углеводы (г)</label>
|
||
<input type="number" id="carbs" min="0" step="0.1" placeholder="45">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Дата</label>
|
||
<input type="date" id="entryDate" required>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Добавить запись</button>
|
||
</form>
|
||
</section>
|
||
|
||
<section class="card">
|
||
<h2>📋 История записей</h2>
|
||
<div class="filter-row">
|
||
<input type="date" id="filterDate" class="filter-date">
|
||
<button onclick="filterByDate()" class="btn btn-secondary">Фильтр</button>
|
||
<button onclick="clearFilter()" class="btn btn-secondary">Сброс</button>
|
||
<button onclick="exportCsv()" class="btn btn-success">Выгрузить в Excel</button>
|
||
</div>
|
||
<div id="entriesList" class="entries-list"></div>
|
||
</section>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|