414 lines
14 KiB
HTML
414 lines
14 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>ИнБоди Калькулятор — Демо</title>
|
||
<style>
|
||
* { margin: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
padding: 40px 20px;
|
||
}
|
||
.container { max-width: 1000px; margin: 0 auto; }
|
||
|
||
h1 {
|
||
text-align: center;
|
||
color: white;
|
||
font-size: 36px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.subtitle {
|
||
text-align: center;
|
||
color: rgba(255,255,255,0.9);
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.card {
|
||
background: white;
|
||
border-radius: 20px;
|
||
padding: 40px;
|
||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.form-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 15px;
|
||
margin-bottom: 30px;
|
||
}
|
||
.form-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.form-group label {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 8px;
|
||
font-weight: 500;
|
||
}
|
||
.form-group input, .form-group select {
|
||
padding: 15px;
|
||
border: 2px solid #e0e0e5;
|
||
border-radius: 12px;
|
||
font-size: 16px;
|
||
transition: 0.3s;
|
||
}
|
||
.form-group input:focus, .form-group select:focus {
|
||
border-color: #667eea;
|
||
outline: none;
|
||
box-shadow: 0 0 0 4px rgba(102,126,234,0.1);
|
||
}
|
||
|
||
.btn {
|
||
width: 100%;
|
||
padding: 18px;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 12px;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: 0.3s;
|
||
margin-bottom: 30px;
|
||
}
|
||
.btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 10px 30px rgba(102,126,234,0.4);
|
||
}
|
||
|
||
.results-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 30px;
|
||
}
|
||
.result-card {
|
||
background: linear-gradient(135deg, #f8f9fc 0%, #e9ecef 100%);
|
||
border-radius: 15px;
|
||
padding: 25px;
|
||
text-align: center;
|
||
transition: 0.3s;
|
||
}
|
||
.result-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
}
|
||
.result-card .icon {
|
||
font-size: 42px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.result-card .value {
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
color: #667eea;
|
||
margin: 10px 0;
|
||
}
|
||
.result-card .label {
|
||
color: #666;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
.result-card .norma {
|
||
font-size: 12px;
|
||
color: #999;
|
||
margin-top: 8px;
|
||
}
|
||
.result-card.good .value { color: #00c853; }
|
||
.result-card.warning .value { color: #ff9800; }
|
||
.result-card.bad .value { color: #f44336; }
|
||
|
||
.body-type-section {
|
||
background: #f8f9fc;
|
||
border-radius: 15px;
|
||
padding: 25px;
|
||
margin-top: 30px;
|
||
}
|
||
.body-type-section h3 {
|
||
color: #667eea;
|
||
margin-bottom: 20px;
|
||
}
|
||
.body-type-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 15px;
|
||
}
|
||
.body-type-card {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
border-left: 4px solid #667eea;
|
||
}
|
||
.body-type-card h4 {
|
||
margin: 0 0 10px;
|
||
color: #333;
|
||
}
|
||
.body-type-card p {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin: 5px 0;
|
||
line-height: 1.6;
|
||
}
|
||
.body-type-card .my-type {
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
color: white;
|
||
padding: 5px 12px;
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
display: inline-block;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.recommendations {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
border-radius: 15px;
|
||
padding: 25px;
|
||
margin-top: 30px;
|
||
}
|
||
.recommendations h3 {
|
||
margin-top: 0;
|
||
margin-bottom: 20px;
|
||
}
|
||
.recommendations ul {
|
||
padding-left: 20px;
|
||
line-height: 2;
|
||
}
|
||
.recommendations li {
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.hidden { display: none; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>📐 ИнБоди Калькулятор</h1>
|
||
<p class="subtitle">Профессиональный анализ состава тела</p>
|
||
|
||
<div class="card">
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label>⚖️ Вес (кг)</label>
|
||
<input type="number" id="weight" value="65" step="0.1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>📏 Рост (см)</label>
|
||
<input type="number" id="height" value="165">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>🎂 Возраст (лет)</label>
|
||
<input type="number" id="age" value="37">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>👤 Пол</label>
|
||
<select id="gender">
|
||
<option value="female">Женский</option>
|
||
<option value="male">Мужской</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>🍐 Талия (см)</label>
|
||
<input type="number" id="waist" value="70">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>📊 Бёдра (см)</label>
|
||
<input type="number" id="hips" value="95">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>🦒 Шея (см)</label>
|
||
<input type="number" id="neck" value="32">
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn" onclick="calculate()">🔍 Рассчитать состав тела</button>
|
||
|
||
<!-- Результаты -->
|
||
<div id="results" class="results-grid hidden">
|
||
<div class="result-card" id="card-bmi">
|
||
<div class="icon">⚖️</div>
|
||
<div class="value" id="bmi">24.5</div>
|
||
<div class="label">ИМТ</div>
|
||
<div class="norma" id="bmi-text">Норма</div>
|
||
</div>
|
||
<div class="result-card" id="card-bodyfat">
|
||
<div class="icon">🥩</div>
|
||
<div class="value" id="bodyfat">28%</div>
|
||
<div class="label">% Жира</div>
|
||
<div class="norma" id="bodyfat-text">Норма</div>
|
||
</div>
|
||
<div class="result-card">
|
||
<div class="icon">💪</div>
|
||
<div class="value" id="muscle">42 кг</div>
|
||
<div class="label">Мышцы</div>
|
||
<div class="norma">Средний уровень</div>
|
||
</div>
|
||
<div class="result-card">
|
||
<div class="icon">🔥</div>
|
||
<div class="value" id="bmr">1450</div>
|
||
<div class="label">Калории (покой)</div>
|
||
<div class="norma">Без движения</div>
|
||
</div>
|
||
<div class="result-card">
|
||
<div class="icon">📊</div>
|
||
<div class="value" id="tdee">2030</div>
|
||
<div class="label">Калории (день)</div>
|
||
<div class="norma">Поддержание</div>
|
||
</div>
|
||
<div class="result-card">
|
||
<div class="icon">🎯</div>
|
||
<div class="value" id="target">1530</div>
|
||
<div class="label">Для похудения</div>
|
||
<div class="norma">Дефицит 20%</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Тип телосложения -->
|
||
<div id="body-type" class="body-type-section hidden">
|
||
<h3>🍐 Твой тип телосложения</h3>
|
||
<div class="body-type-grid">
|
||
<div class="body-type-card">
|
||
<h4>🍎 Яблоко</h4>
|
||
<p>Жир откладывается на животе</p>
|
||
<p>Талия > Бёдер</p>
|
||
<p>Риск: диабет, сердце</p>
|
||
</div>
|
||
<div class="body-type-card">
|
||
<h4>🍐 Груша</h4>
|
||
<p>Жир на бёдрах и ягодицах</p>
|
||
<p>Бёдра > Талии</p>
|
||
<p>Более здоровый тип</p>
|
||
</div>
|
||
<div class="body-type-card" style="border-left-color: #00c853;">
|
||
<h4>⏳ Песочные часы</h4>
|
||
<p>Пропорциональное тело</p>
|
||
<p>Талия < Бёдер на 25 см</p>
|
||
<p>Идеальный баланс</p>
|
||
<span class="my-type">✨ Твой тип!</span>
|
||
</div>
|
||
<div class="body-type-card">
|
||
<h4>📏 Прямоугольник</h4>
|
||
<p>Равномерное распределение</p>
|
||
<p>Талия ≈ Бёдра</p>
|
||
<p>Спортивное телосложение</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Рекомендации -->
|
||
<div id="recommendations" class="recommendations hidden">
|
||
<h3>📋 Персональные рекомендации</h3>
|
||
<ul>
|
||
<li><strong>Калории:</strong> 1530 ккал/день для потери 0.5 кг/неделю</li>
|
||
<li><strong>Белок:</strong> 98 г в день (1.5 г на кг веса)</li>
|
||
<li><strong>Вода:</strong> 2.2 литра в день</li>
|
||
<li><strong>Тренировки:</strong> 4-5 раз в неделю (силовые + кардио)</li>
|
||
<li><strong>Сон:</strong> 7-8 часов для восстановления</li>
|
||
<li><strong>Цель:</strong> 58 кг за 8 недель (реалистично!)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function calculate() {
|
||
const weight = parseFloat(document.getElementById('weight').value);
|
||
const height = parseFloat(document.getElementById('height').value) / 100;
|
||
const age = parseInt(document.getElementById('age').value);
|
||
const gender = document.getElementById('gender').value;
|
||
const waist = parseFloat(document.getElementById('waist').value);
|
||
const hips = parseFloat(document.getElementById('hips').value);
|
||
const neck = parseFloat(document.getElementById('neck').value);
|
||
|
||
// ИМТ
|
||
const bmi = (weight / (height * height)).toFixed(1);
|
||
document.getElementById('bmi').textContent = bmi;
|
||
|
||
let bmiText = '';
|
||
let bmiClass = '';
|
||
if (bmi < 18.5) { bmiText = 'Недостаток'; bmiClass = 'warning'; }
|
||
else if (bmi < 25) { bmiText = 'Норма'; bmiClass = 'good'; }
|
||
else if (bmi < 30) { bmiText = 'Избыток'; bmiClass = 'warning'; }
|
||
else { bmiText = 'Ожирение'; bmiClass = 'bad'; }
|
||
|
||
document.getElementById('bmi-text').textContent = bmiText;
|
||
document.getElementById('card-bmi').className = 'result-card ' + bmiClass;
|
||
|
||
// % жира (формула ВМС США)
|
||
let bodyFat;
|
||
if (gender === 'female') {
|
||
bodyFat = 495 / (1.29579 - 0.35004 * Math.log10(waist + hips - neck) + 0.22100 * Math.log10(height * 100)) - 450;
|
||
} else {
|
||
bodyFat = 495 / (1.0324 - 0.19077 * Math.log10(waist - neck) + 0.15456 * Math.log10(height * 100)) - 450;
|
||
}
|
||
bodyFat = bodyFat.toFixed(1);
|
||
document.getElementById('bodyfat').textContent = bodyFat + '%';
|
||
|
||
let bfText = '';
|
||
let bfClass = '';
|
||
const bfNormMin = gender === 'female' ? 21 : 8;
|
||
const bfNormMax = gender === 'female' ? 33 : 19;
|
||
if (bodyFat < bfNormMin) { bfText = 'Низкий'; bfClass = 'warning'; }
|
||
else if (bodyFat <= bfNormMax) { bfText = 'Норма'; bfClass = 'good'; }
|
||
else { bfText = 'Высокий'; bfClass = 'bad'; }
|
||
|
||
document.getElementById('bodyfat-text').textContent = bfText;
|
||
document.getElementById('card-bodyfat').className = 'result-card ' + bfClass;
|
||
|
||
// Мышечная масса
|
||
const muscle = (weight * (100 - bodyFat) / 100).toFixed(1);
|
||
document.getElementById('muscle').textContent = muscle + ' кг';
|
||
|
||
// BMR (Миффлин-Сан Жеор)
|
||
let bmr;
|
||
if (gender === 'female') {
|
||
bmr = 10 * weight + 6.25 * (height * 100) - 5 * age - 161;
|
||
} else {
|
||
bmr = 10 * weight + 6.25 * (height * 100) - 5 * age + 5;
|
||
}
|
||
bmr = Math.round(bmr);
|
||
document.getElementById('bmr').textContent = bmr;
|
||
|
||
// TDEE (средняя активность)
|
||
const tdee = Math.round(bmr * 1.4);
|
||
document.getElementById('tdee').textContent = tdee;
|
||
|
||
// Цель для похудения
|
||
const target = Math.round(tdee * 0.75);
|
||
document.getElementById('target').textContent = target;
|
||
|
||
// Показываем результаты
|
||
document.getElementById('results').classList.remove('hidden');
|
||
document.getElementById('body-type').classList.remove('hidden');
|
||
document.getElementById('recommendations').classList.remove('hidden');
|
||
|
||
// Определяем тип телосложения
|
||
const whr = waist / hips;
|
||
let bodyType = '';
|
||
if (whr > 0.85) {
|
||
bodyType = 'apple'; // Яблоко
|
||
} else if (whr < 0.75) {
|
||
bodyType = 'pear'; // Груша
|
||
} else {
|
||
bodyType = 'hourglass'; // Песочные часы
|
||
}
|
||
|
||
// Подсветка типа
|
||
document.querySelectorAll('.body-type-card .my-type').forEach(el => el.remove());
|
||
const types = { apple: 0, pear: 1, hourglass: 2, rectangle: 3 };
|
||
const cards = document.querySelectorAll('.body-type-card');
|
||
const myType = document.createElement('span');
|
||
myType.className = 'my-type';
|
||
myType.textContent = '✨ Твой тип!';
|
||
|
||
if (bodyType === 'apple') cards[0].appendChild(myType);
|
||
else if (bodyType === 'pear') cards[1].appendChild(myType);
|
||
else if (bodyType === 'hourglass') cards[2].appendChild(myType);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|