111 lines
5.3 KiB
HTML
111 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
|
<title>Калькулятор BMI</title>
|
|
<!-- VK Bridge для работы внутри ВК -->
|
|
<script src="https://unpkg.com/@vkontakte/vk-bridge/dist/browser.min.js"></script>
|
|
<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 {
|
|
margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
|
|
background: var(--bg); color: var(--text); padding: 16px;
|
|
padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
.container { max-width: 400px; margin: 0 auto; }
|
|
h1 { font-size: 20px; margin: 0 0 16px; }
|
|
label { display: block; margin-bottom: 4px; font-weight: 500; font-size: 14px; }
|
|
input {
|
|
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);
|
|
}
|
|
button {
|
|
width: 100%; padding: 12px; background: var(--btn); color: var(--btn-text);
|
|
border: none; border-radius: 8px; font-size: 16px; cursor: pointer; font-weight: 500;
|
|
}
|
|
button:active { opacity: 0.8; }
|
|
.result {
|
|
margin-top: 16px; padding: 12px; background: var(--card); border-radius: 8px;
|
|
display: none; line-height: 1.4;
|
|
}
|
|
.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>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Калькулятор индекса массы тела (BMI)</h1>
|
|
|
|
<label for="height">Рост (в метрах):</label>
|
|
<input type="number" id="height" placeholder="1.75" step="0.01">
|
|
|
|
<label for="weight">Вес (в килограммах):</label>
|
|
<input type="number" id="weight" placeholder="70" step="0.1">
|
|
|
|
<button onclick="calculate()">Рассчитать BMI</button>
|
|
|
|
<div class="result" id="result"></div>
|
|
|
|
<div class="scale">
|
|
<b>Интерпретация результата:</b><br>
|
|
• Менее 18.5 — Недостаточный вес<br>
|
|
• 18.5–24.9 — Нормальный вес<br>
|
|
• 25–29.9 — Избыточный вес<br>
|
|
• 30 и более — Ожирение
|
|
</div>
|
|
|
|
<div class="footer">
|
|
© 2026 Калькулятор BMI. Автор: Александр Захаров.<br>
|
|
Разработано с использованием GigaCode — ИИ-ассистента для программистов от Сбера.<br>
|
|
Инструмент для оценки массы тела. Не является медицинским диагнозом.
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 1. Сообщаем ВК, что приложение готово
|
|
vkBridge.send('VKWebAppInit').catch(console.error);
|
|
|
|
// 2. Синхронизируем тему (светлая/тёмная) с настройками ВК
|
|
vkBridge.subscribe((e) => {
|
|
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');
|
|
document.documentElement.style.setProperty('--text', isDark ? '#ffffff' : '#000000');
|
|
document.documentElement.style.setProperty('--card', isDark ? '#2c2d2e' : '#f0f2f5');
|
|
document.documentElement.style.setProperty('--border', isDark ? '#454647' : '#dce1e6');
|
|
}
|
|
});
|
|
|
|
// 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>
|
|
</body>
|
|
</html>
|