dr_domi/BMI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Загрузить файлы в «/»

Browse Source
This commit is contained in:
dr_domi
2026-05-03 19:32:23 +00:00
parent 96bddb140b
commit 01d2c9d317
1 changed files with 80 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+78 -181
View File
@@ -2,212 +2,109 @@
<html lang="ru"> <html lang="ru">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>Калькулятор BMI</title> <title>Калькулятор BMI</title>
<!-- VK Bridge для работы внутри ВК -->
<script src="https://unpkg.com/@vkontakte/vk-bridge/dist/browser.min.js"></script>
<style> <style>
/* Общие стили */ :root {
--bg: #ffffff; --text: #000000; --card: #f0f2f5;
--btn: #0077ff; --btn-text: #ffffff; --border: #dce1e6;
}
@media (prefers-color-scheme: dark) {
:root { --bg: #19191a; --text: #ffffff; --card: #2c2d2e; --border: #454647; }
}
body { body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
background-color: #e6f7ff; background: var(--bg); color: var(--text); padding: 16px;
color: #003366; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
margin: 0;
padding: 0;
line-height: 1.6;
} }
header { .container { max-width: 400px; margin: 0 auto; }
background-color: #b3e0ff; h1 { font-size: 20px; margin: 0 0 16px; }
padding: 20px; label { display: block; margin-bottom: 4px; font-weight: 500; font-size: 14px; }
text-align: center; input {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); width: 100%; padding: 10px; margin-bottom: 12px; border: 1px solid var(--border);
border-radius: 8px; font-size: 16px; box-sizing: border-box; background: var(--bg); color: var(--text);
} }
header h1 { button {
margin: 0; width: 100%; padding: 12px; background: var(--btn); color: var(--btn-text);
font-size: 28px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; font-weight: 500;
color: #003366;
} }
main { button:active { opacity: 0.8; }
max-width: 600px; .result {
margin: 30px auto; margin-top: 16px; padding: 12px; background: var(--card); border-radius: 8px;
padding: 20px; display: none; line-height: 1.4;
background-color: #d9f0ff;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
form label {
display: block;
margin-top: 15px;
font-weight: bold;
}
form input[type="text"] {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #99d6ff;
border-radius: 5px;
font-size: 16px;
box-sizing: border-box;
}
form button {
margin-top: 20px;
padding: 12px 20px;
background-color: #0066cc;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
form button:hover {
background-color: #004d99;
}
#result {
margin-top: 20px;
padding: 15px;
background-color: #cce6ff;
border-radius: 5px;
font-size: 18px;
font-weight: bold;
text-align: center;
display: none;
}
aside {
max-width: 600px;
margin: 20px auto;
padding: 15px;
background-color: #c2e0ff;
border-radius: 8px;
font-size: 14px;
}
aside h3 {
margin-top: 0;
color: #003366;
}
footer {
text-align: center;
padding: 20px;
background-color: #b3e0ff;
color: #003366;
font-size: 14px;
margin-top: 40px;
} }
.scale { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--text); opacity: 0.85; }
.footer { margin-top: 24px; font-size: 11px; opacity: 0.6; text-align: center; line-height: 1.4; }
</style> </style>
</head> </head>
<body> <body>
<header> <div class="container">
<h1>Калькулятор индекса массы тела (BMI)</h1> <h1>Калькулятор индекса массы тела (BMI)</h1>
</header>
<main>
<form id="bmi-form">
<label for="height">Рост (в метрах):</label> <label for="height">Рост (в метрах):</label>
<input type="text" id="height" name="height" placeholder="Например: 1.75" required> <input type="number" id="height" placeholder="1.75" step="0.01">
<label for="weight">Вес (в килограммах):</label> <label for="weight">Вес (в килограммах):</label>
<input type="text" id="weight" name="weight" placeholder="Например: 70" required> <input type="number" id="weight" placeholder="70" step="0.1">
<button type="submit">Рассчитать BMI</button> <button onclick="calculate()">Рассчитать BMI</button>
</form>
<div id="result"></div> <div class="result" id="result"></div>
</main>
<aside> <div class="scale">
<h3>Интерпретация результата:</h3> <b>Интерпретация результата:</b><br>
<ul> • Менее 18.5 — Недостаточный вес<br>
<li><strong>Менее 18.5</strong> — Недостаточный вес</li> • 18.5–24.9 — Нормальный вес<br>
<li><strong>18.5–24.9</strong> — Нормальный вес</li> • 25–29.9 — Избыточный вес<br>
<li><strong>25–29.9</strong> — Избыточный вес</li> • 30 и более — Ожирение
<li><strong>30 и более</strong> — Ожирение</li> </div>
</ul>
</aside>
<footer> <div class="footer">
<p> © 2026 Калькулятор BMI. Автор: Александр Захаров.<br>
&copy; 2026 Калькулятор BMI. Автор: <strong>Александр Захаров</strong>.<br> Разработано с использованием GigaCode — ИИ-ассистента для программистов от Сбера.<br>
<small style="color: #555;">
Разработано с использованием <strong>GigaCode</strong> — ИИ-ассистента для программистов от Сбера.<br>
Инструмент для оценки массы тела. Не является медицинским диагнозом. Инструмент для оценки массы тела. Не является медицинским диагнозом.
</small> </div>
</p> </div>
</footer>
<script> <script>
document.getElementById('bmi-form').addEventListener('submit', function(e) { // 1. Сообщаем ВК, что приложение готово
e.preventDefault(); vkBridge.send('VKWebAppInit').catch(console.error);
const heightInput = document.getElementById('height').value; // 2. Синхронизируем тему (светлая/тёмная) с настройками ВК
const weightInput = document.getElementById('weight').value; vkBridge.subscribe((e) => {
const resultDiv = document.getElementById('result'); if (e.detail.type === 'VKWebAppUpdateConfig') {
const isDark = e.detail.data.theme === 'dark' || e.detail.data.theme === 'space_gray';
// Проверка на число document.documentElement.style.setProperty('--bg', isDark ? '#19191a' : '#ffffff');
const height = parseFloat(heightInput); document.documentElement.style.setProperty('--text', isDark ? '#ffffff' : '#000000');
const weight = parseFloat(weightInput); document.documentElement.style.setProperty('--card', isDark ? '#2c2d2e' : '#f0f2f5');
document.documentElement.style.setProperty('--border', isDark ? '#454647' : '#dce1e6');
if (isNaN(height) || isNaN(weight)) {
resultDiv.style.display = 'block';
resultDiv.style.color = '#cc0000';
resultDiv.innerHTML = 'Ошибка: введите корректные числа.';
return;
} }
if (height <= 0 || height > 3) {
resultDiv.style.display = 'block';
resultDiv.style.color = '#cc0000';
resultDiv.innerHTML = 'Рост должен быть от 0.5 до 3 метров.';
return;
}
if (weight <= 0 || weight > 200) {
resultDiv.style.display = 'block';
resultDiv.style.color = '#cc0000';
resultDiv.innerHTML = 'Вес должен быть от 1 до 200 кг.';
return;
}
// Расчёт BMI
const bmi = weight / (height * height);
const roundedBmi = Math.round(bmi * 100) / 100;
// Определение категории
let category = '';
let textColor = '#003366';
if (bmi < 18.5) {
category = 'Дефицит массы тела';
} else if (bmi >= 18.5 && bmi < 25) {
category = 'Нормальная масса тела';
} else if (bmi >= 25 && bmi < 30) {
category = 'Избыточная масса тела (предожирение)';
} else if (bmi >= 30 && bmi < 35) {
category = 'Ожирение I степени';
textColor = '#cc0000';
} else if (bmi >= 35 && bmi < 40) {
category = 'Ожирение II степени';
textColor = '#cc0000';
} else {
category = 'Ожирение III степени (морбидное)';
textColor = '#cc0000';
}
// Вывод результата + категория + дисклеймер
resultDiv.style.display = 'block';
resultDiv.style.color = textColor;
resultDiv.style.fontSize = '16px';
resultDiv.style.lineHeight = '1.5';
resultDiv.innerHTML = `
<div><strong>Ваш BMI:</strong> ${roundedBmi}</div>
<div style="margin-top: 5px;">${category}</div>
<div style="margin-top: 15px; font-size: 14px; color: #555; font-style: italic; border-top: 1px dashed #999; padding-top: 10px;">
<small>
<strong>Важно:</strong> ИМТ — скрининговый, а не диагностический инструмент.
Он не учитывает пол, возраст, распределение жира, мышечную массу и плотность костей.
Например, у спортсменов ИМТ может быть завышен, а у пожилых людей — занижен.
Для точной оценки состояния здоровья обратитесь к врачу.
</small>
</div>
`;
}); });
// 3. Логика калькулятора
function calculate() {
const h = parseFloat(document.getElementById('height').value.replace(',', '.'));
const w = parseFloat(document.getElementById('weight').value.replace(',', '.'));
const resBox = document.getElementById('result');
if (isNaN(h) || isNaN(w) || h <= 0 || w <= 0) {
resBox.style.display = 'block';
resBox.textContent = '❌ Введите корректные рост и вес.';
return;
}
const bmi = (w / (h * h)).toFixed(1);
let status = '';
if (bmi < 18.5) status = '🔹 Недостаточный вес';
else if (bmi < 25) status = '✅ Нормальный вес';
else if (bmi < 30) status = '⚠️ Избыточный вес';
else status = '🚨 Ожирение';
resBox.style.display = 'block';
resBox.innerHTML = `<b>Ваш BMI: ${bmi}</b><br>${status}`;
}
</script> </script>
</body> </body>
</html> </html>