[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Калькулятор калорий</title>
<style>
/* Стили для калькулятора */
.calorie-calculator {
max-width: 500px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
background-color: #f9f9f9;
font-family: Arial, sans-serif;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.calorie-calculator h2 {
text-align: center;
color: #333;
}
.input-group {
margin-bottom: 15px;
}
.input-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
.input-group input[type="number"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.input-group select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.result {
margin-top: 20px;
padding: 15px;
background-color: #eaf7ff;
border: 1px solid #b0e0e6;
border-radius: 5px;
font-size: 18px;
text-align: center;
}
button {
display: block;
width: 100%;
padding: 12px;
background-color: #007bff;
color: white;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="calorie-calculator">
<h2>Калькулятор калорий</h2>
<!-- Поле для выбора пола -->
<div class="input-group">
<label for="gender">Пол:</label>
<select id="gender">
<option value="male">Мужчина</option>
<option value="female">Женщина</option>
</select>
</div>
<!-- Поле для ввода возраста -->
<div class="input-group">
<label for="age">Возраст (лет):</label>
<input type="number" id="age" placeholder="Например, 25" min="1" max="120">
</div>
<!-- Поле для ввода веса -->
<div class="input-group">
<label for="weight">Вес (кг):</label>
<input type="number" id="weight" placeholder="Например, 70" min="1" step="0.1">
</div>
<!-- Поле для ввода роста -->
<div class="input-group">
<label for="height">Рост (см):</label>
<input type="number" id="height" placeholder="Например, 175" min="50" max="250">
</div>
<!-- Поле для выбора уровня активности -->
<div class="input-group">
<label for="activity">Уровень активности:</label>
<select id="activity">
<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>
<!-- Кнопка для расчета -->
<button onclick="calculateCalories()">Рассчитать</button>
<!-- Блок для вывода результата -->
<div class="result" id="result">
Результат появится здесь.
</div>
</div>
<script>
// Функция для расчета калорий
function calculateCalories() {
// Получаем значения из полей ввода
const gender = document.getElementById('gender').value;
const age = parseFloat(document.getElementById('age').value) || 0;
const weight = parseFloat(document.getElementById('weight').value) || 0;
const height = parseFloat(document.getElementById('height').value) || 0;
const activity = parseFloat(document.getElementById('activity').value) || 1.2;
// Проверяем корректность введенных данных
if (age <= 0 || weight <= 0 || height <= 0) {
document.getElementById('result').innerHTML = '<p style="color: red;">Пожалуйста, введите корректные данные.</p>';
return;
}
// Расчет базальной скорости метаболизма (BMR) по формуле Миффлина-Сан Жеора
let bmr;
if (gender === 'male') {
bmr = 10 * weight + 6.25 * height - 5 * age + 5; // Для мужчин
} else {
bmr = 10 * weight + 6.25 * height - 5 * age - 161; // Для женщин
}
// Учет уровня активности
const dailyCalories = bmr * activity;
// Форматируем результаты для вывода
const formattedDailyCalories = Math.round(dailyCalories);
// Выводим результат
document.getElementById('result').innerHTML = `
<p><strong>Ваша суточная потребность в калориях:</strong> ${formattedDailyCalories} ккал</p>
`;
}
</script>
</body>
</html>[/html]