From 01d2c9d3174b4e946fda35719b910ba26f6b9b47 Mon Sep 17 00:00:00 2001
From: dr_domi <dominy888@gmail.com>
Date: Sun, 3 May 2026 19:32:23 +0000
Subject: [PATCH] =?UTF-8?q?=D0=97=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D0=B8?=
 =?UTF-8?q?=D1=82=D1=8C=20=D1=84=D0=B0=D0=B9=D0=BB=D1=8B=20=D0=B2=20=C2=AB?=
 =?UTF-8?q?/=C2=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 263 ++++++++++++++++-------------------------------------
 1 file changed, 80 insertions(+), 183 deletions(-)
diff --git a/index.html b/index.html
index e4bdeaf..caf49a6 100644
--- a/index.html
+++ b/index.html
@@ -2,212 +2,109 @@
 <html lang="ru">
 <head>
     <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>
+    <!-- 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 {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: #e6f7ff;
-            color: #003366;
-            margin: 0;
-            padding: 0;
-            line-height: 1.6;
+            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);
         }
-        header {
-            background-color: #b3e0ff;
-            padding: 20px;
-            text-align: center;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        .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);
         }
-        header h1 {
-            margin: 0;
-            font-size: 28px;
-            color: #003366;
+        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;
         }
-        main {
-            max-width: 600px;
-            margin: 30px auto;
-            padding: 20px;
-            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;
+        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>
-    <header>
+    <div class="container">
         <h1>Калькулятор индекса массы тела (BMI)</h1>
-    </header>
 
-    <main>
-        <form id="bmi-form">
-            <label for="height">Рост (в метрах):</label>
-            <input type="text" id="height" name="height" placeholder="Например: 1.75" required>
+        <label for="height">Рост (в метрах):</label>
+        <input type="number" id="height" placeholder="1.75" step="0.01">
 
-            <label for="weight">Вес (в килограммах):</label>
-            <input type="text" id="weight" name="weight" placeholder="Например: 70" required>
+        <label for="weight">Вес (в килограммах):</label>
+        <input type="number" id="weight" placeholder="70" step="0.1">
 
-            <button type="submit">Рассчитать BMI</button>
-        </form>
+        <button onclick="calculate()">Рассчитать BMI</button>
 
-        <div id="result"></div>
-    </main>
+        <div class="result" id="result"></div>
 
-    <aside>
-        <h3>Интерпретация результата:</h3>
-        <ul>
-            <li><strong>Менее 18.5</strong> — Недостаточный вес</li>
-            <li><strong>18.5–24.9</strong> — Нормальный вес</li>
-            <li><strong>25–29.9</strong> — Избыточный вес</li>
-            <li><strong>30 и более</strong> — Ожирение</li>
-        </ul>
-    </aside>
+        <div class="scale">
+            <b>Интерпретация результата:</b><br>
+            • Менее 18.5 — Недостаточный вес<br>
+            • 18.5–24.9 — Нормальный вес<br>
+            • 25–29.9 — Избыточный вес<br>
+            • 30 и более — Ожирение
+        </div>
 
-    <footer>
-      <p>
-        &copy; 2026 Калькулятор BMI. Автор: <strong>Александр Захаров</strong>.<br>
-        <small style="color: #555;">
-          Разработано с использованием <strong>GigaCode</strong> — ИИ-ассистента для программистов от Сбера.<br>
-          Инструмент для оценки массы тела. Не является медицинским диагнозом.
-        </small>
-      </p>
-    </footer>
+        <div class="footer">
+            © 2026 Калькулятор BMI. Автор: Александр Захаров.<br>
+            Разработано с использованием GigaCode — ИИ-ассистента для программистов от Сбера.<br>
+            Инструмент для оценки массы тела. Не является медицинским диагнозом.
+        </div>
+    </div>
 
     <script>
-      document.getElementById('bmi-form').addEventListener('submit', function(e) {
-          e.preventDefault();
+        // 1. Сообщаем ВК, что приложение готово
+        vkBridge.send('VKWebAppInit').catch(console.error);
 
-          const heightInput = document.getElementById('height').value;
-          const weightInput = document.getElementById('weight').value;
-          const resultDiv = document.getElementById('result');
+        // 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');
+            }
+        });
 
-          // Проверка на число
-          const height = parseFloat(heightInput);
-          const weight = parseFloat(weightInput);
+        // 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(height) || isNaN(weight)) {
-              resultDiv.style.display = 'block';
-              resultDiv.style.color = '#cc0000';
-              resultDiv.innerHTML = 'Ошибка: введите корректные числа.';
-              return;
-          }
+            if (isNaN(h) || isNaN(w) || h <= 0 || w <= 0) {
+                resBox.style.display = 'block';
+                resBox.textContent = '❌ Введите корректные рост и вес.';
+                return;
+            }
 
-          if (height <= 0 || height > 3) {
-              resultDiv.style.display = 'block';
-              resultDiv.style.color = '#cc0000';
-              resultDiv.innerHTML = 'Рост должен быть от 0.5 до 3 метров.';
-              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 = '🚨 Ожирение';
 
-          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>
-          `;
-      });
+            resBox.style.display = 'block';
+            resBox.innerHTML = `<b>Ваш BMI: ${bmi}</b><br>${status}`;
+        }
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>
