\u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0435\u0441\u0430<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: #333;\n line-height: 1.6;\n min-height: 100vh;\n padding: 20px;\n }\n \n .container {\n max-width: 1200px;\n margin: 0 auto;\n }\n \n .header {\n text-align: center;\n padding: 40px 20px;\n margin-bottom: 30px;\n background: rgba(255, 255, 255, 0.95);\n border-radius: 20px;\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);\n }\n \n h1 {\n font-size: 2.8rem;\n margin-bottom: 15px;\n background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n \n .subtitle {\n font-size: 1.2rem;\n color: #666;\n max-width: 700px;\n margin: 0 auto 20px;\n }\n \n .calculator-container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 30px;\n margin-bottom: 50px;\n }\n \n @media (max-width: 992px) {\n .calculator-container {\n grid-template-columns: 1fr;\n }\n }\n \n .calculator-card {\n background: white;\n border-radius: 20px;\n padding: 40px;\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);\n height: fit-content;\n }\n \n .results-card {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n color: white;\n }\n \n h2 {\n font-size: 2rem;\n margin-bottom: 25px;\n color: #333;\n display: flex;\n align-items: center;\n gap: 15px;\n }\n \n .results-card h2 {\n color: white;\n }\n \n .input-group {\n margin-bottom: 25px;\n }\n \n label {\n display: block;\n margin-bottom: 10px;\n font-weight: 600;\n color: #555;\n font-size: 1.1rem;\n }\n \n .input-with-unit {\n position: relative;\n }\n \n input, select {\n width: 100%;\n padding: 16px 20px;\n border: 2px solid #e0e0e0;\n border-radius: 12px;\n font-size: 1.1rem;\n transition: border-color 0.3s ease;\n background: white;\n color: #333;\n }\n \n input[type=\"number\"] {\n -moz-appearance: textfield;\n }\n \n input[type=\"number\"]::-webkit-outer-spin-button,\n input[type=\"number\"]::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n \n input:focus, select:focus {\n outline: none;\n border-color: #667eea;\n box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n }\n \n .unit {\n position: absolute;\n right: 15px;\n top: 50%;\n transform: translateY(-50%);\n color: #888;\n font-weight: 600;\n pointer-events: none;\n }\n \n .gender-selection {\n display: flex;\n gap: 20px;\n margin-top: 10px;\n }\n \n .gender-option {\n flex: 1;\n text-align: center;\n padding: 18px;\n border: 2px solid #e0e0e0;\n border-radius: 12px;\n cursor: pointer;\n transition: all 0.3s ease;\n font-weight: 600;\n color: #555;\n }\n \n .gender-option:hover {\n border-color: #667eea;\n background: rgba(102, 126, 234, 0.05);\n }\n \n .gender-option.selected {\n border-color: #667eea;\n background: rgba(102, 126, 234, 0.1);\n color: #667eea;\n }\n \n .calculate-button {\n width: 100%;\n padding: 18px;\n background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: none;\n border-radius: 12px;\n font-size: 1.2rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n margin-top: 10px;\n box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);\n }\n \n .calculate-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 12px 25px rgba(102, 126, 234, 0.4);\n }\n \n .results-container {\n padding: 10px;\n }\n \n .result-value {\n font-size: 3.5rem;\n font-weight: 800;\n text-align: center;\n margin: 20px 0;\n text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n }\n \n .result-label {\n text-align: center;\n font-size: 1.3rem;\n margin-bottom: 30px;\n opacity: 0.9;\n }\n \n .result-details {\n background: rgba(255, 255, 255, 0.15);\n border-radius: 15px;\n padding: 25px;\n margin-bottom: 25px;\n }\n \n .result-row {\n display: flex;\n justify-content: space-between;\n margin-bottom: 15px;\n padding-bottom: 15px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n }\n \n .result-row:last-child {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n \n .age-influence {\n margin: 15px 0;\n padding: 12px;\n background: rgba(255, 255, 255, 0.1);\n border-radius: 10px;\n font-size: 0.9rem;\n text-align: center;\n }\n \n .progress-container {\n margin: 30px 0;\n }\n \n .progress-label {\n display: flex;\n justify-content: space-between;\n margin-bottom: 10px;\n font-weight: 600;\n }\n \n .progress-bar {\n height: 25px;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 12px;\n overflow: hidden;\n }\n \n .progress-fill {\n height: 100%;\n background: white;\n border-radius: 12px;\n width: 50%;\n transition: width 1s ease;\n }\n \n .weight-category {\n text-align: center;\n padding: 15px;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 12px;\n margin-top: 20px;\n font-weight: 600;\n font-size: 1.2rem;\n }\n \n .weight-category.underweight {\n color: #4fc3f7;\n background: rgba(79, 195, 247, 0.2);\n }\n \n .weight-category.normal {\n color: #81c784;\n background: rgba(129, 199, 132, 0.2);\n }\n \n .weight-category.overweight {\n color: #ffb74d;\n background: rgba(255, 183, 77, 0.2);\n }\n \n .weight-category.obese {\n color: #8B0000;\n background: rgba(229, 115, 115, 0.2);\n }\n \n .footer {\n text-align: center;\n padding: 40px 20px;\n margin-top: 50px;\n color: white;\n font-size: 0.9rem;\n opacity: 0.8;\n }\n \n .disclaimer {\n background: rgba(255, 255, 255, 0.1);\n padding: 20px;\n border-radius: 15px;\n margin-top: 30px;\n font-size: 0.9rem;\n }\n \n .example-buttons {\n display: flex;\n gap: 15px;\n margin-top: 20px;\n flex-wrap: wrap;\n }\n \n .example-button {\n padding: 12px 20px;\n background: #f0f0f0;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n font-weight: 600;\n color: #555;\n transition: all 0.3s ease;\n flex: 1;\n min-width: 120px;\n }\n \n .example-button:hover {\n background: #e0e0e0;\n transform: translateY(-2px);\n }\n \n @media (max-width: 768px) {\n h1 {\n font-size: 2.2rem;\n }\n \n .calculator-card {\n padding: 25px;\n }\n \n .gender-selection {\n flex-direction: column;\n }\n }\n \n .pulse {\n animation: pulse 2s infinite;\n }\n \n @keyframes pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n 100% { transform: scale(1); }\n }\n \n .result-emoji {\n font-size: 4rem;\n text-align: center;\n margin-bottom: 20px;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header class=\"header\">\n <h1><i class=\"fas fa-weight-scale\"><\/i> \u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0435\u0441\u0430<\/h1>\n <p class=\"subtitle\">\u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0432\u0430\u0448 \u0437\u0434\u043e\u0440\u043e\u0432\u044b\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0432\u0435\u0441\u0430 \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430, \u0440\u043e\u0441\u0442\u0430 \u0438 \u043f\u043e\u043b\u0430<\/p>\n \n <div class=\"example-buttons\">\n <button class=\"example-button\" onclick=\"loadExample(0)\">\u041c\u043e\u043b\u043e\u0434\u043e\u0439 (25)<\/button>\n <button class=\"example-button\" onclick=\"loadExample(1)\">\u0421\u0440\u0435\u0434\u043d\u0438\u0439 (40)<\/button>\n <button class=\"example-button\" onclick=\"loadExample(2)\">\u0417\u0440\u0435\u043b\u044b\u0439 (60)<\/button>\n <\/div>\n \n <div class=\"disclaimer\">\n <p><strong>\u0412\u0430\u0436\u043d\u043e:<\/strong> \u0421 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u043e\u043c \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0441 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 0.5-1 \u043a\u0433 \u0437\u0430 10 \u043b\u0435\u0442<\/p>\n <\/div>\n <\/header>\n \n <div class=\"calculator-container\">\n <div class=\"calculator-card\">\n <h2><i class=\"fas fa-calculator\"><\/i> \u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0434\u0430\u043d\u043d\u044b\u0435<\/h2>\n \n <div class=\"input-group\">\n <label>\u041f\u043e\u043b<\/label>\n <div class=\"gender-selection\">\n <div class=\"gender-option selected\" onclick=\"selectGender('male')\">\n <i class=\"fas fa-mars\"><\/i> \u041c\u0443\u0436\u0447\u0438\u043d\u0430\n <\/div>\n <div class=\"gender-option\" onclick=\"selectGender('female')\">\n <i class=\"fas fa-venus\"><\/i> \u0416\u0435\u043d\u0449\u0438\u043d\u0430\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"input-group\">\n <label>\u0412\u043e\u0437\u0440\u0430\u0441\u0442 (\u043b\u0435\u0442)<\/label>\n <div class=\"input-with-unit\">\n <input type=\"number\" id=\"age\" value=\"30\" min=\"18\" max=\"120\">\n <span class=\"unit\">\u043b\u0435\u0442<\/span>\n <\/div>\n <div style=\"font-size: 0.9rem; color: #666; margin-top: 8px;\">\n <i class=\"fas fa-info-circle\"><\/i> \u0412\u043e\u0437\u0440\u0430\u0441\u0442 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043c\u0435\u0442\u0430\u0431\u043e\u043b\u0438\u0437\u043c \u0438 \u043d\u043e\u0440\u043c\u0443 \u0432\u0435\u0441\u0430\n <\/div>\n <\/div>\n \n <div class=\"input-group\">\n <label>\u0420\u043e\u0441\u0442<\/label>\n <div class=\"input-with-unit\">\n <input type=\"number\" id=\"height\" value=\"170\" min=\"100\" max=\"250\">\n <span class=\"unit\">\u0441\u043c<\/span>\n <\/div>\n <\/div>\n \n <div class=\"input-group\">\n <label>\u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u0432\u0435\u0441<\/label>\n <div class=\"input-with-unit\">\n <input type=\"number\" id=\"currentWeight\" value=\"75\" min=\"30\" max=\"300\" step=\"0.1\">\n <span class=\"unit\">\u043a\u0433<\/span>\n <\/div>\n <\/div>\n \n <div class=\"input-group\">\n <label>\u0422\u0438\u043f \u0442\u0435\u043b\u043e\u0441\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/label>\n <select id=\"bodyType\">\n <option value=\"medium\" selected>\u0421\u0440\u0435\u0434\u043d\u0435\u0435<\/option>\n <option value=\"thin\">\u0425\u0443\u0434\u043e\u0449\u0430\u0432\u043e\u0435<\/option>\n <option value=\"broad\">\u0428\u0438\u0440\u043e\u043a\u043e\u043a\u043e\u0441\u0442\u043d\u043e\u0435<\/option>\n <\/select>\n <\/div>\n \n <button class=\"calculate-button pulse\" onclick=\"calculateWeight()\">\n <i class=\"fas fa-calculator\"><\/i> \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c\n <\/button>\n \n <div style=\"margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 12px;\">\n <h3 style=\"color: #667eea; margin-bottom: 10px;\"><i class=\"fas fa-lightbulb\"><\/i> \u041a\u0430\u043a \u0432\u043e\u0437\u0440\u0430\u0441\u0442 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0432\u0435\u0441?<\/h3>\n <p style=\"font-size: 0.9rem; color: #666;\">\u041f\u043e\u0441\u043b\u0435 30 \u043b\u0435\u0442 \u043c\u0435\u0442\u0430\u0431\u043e\u043b\u0438\u0437\u043c \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 1-2% \u043a\u0430\u0436\u0434\u044b\u0435 10 \u043b\u0435\u0442. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u043e\u043c \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0441 \u043c\u043e\u0436\u0435\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"calculator-card results-card\">\n <h2><i class=\"fas fa-chart-line\"><\/i> \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b<\/h2>\n \n <div class=\"results-container\">\n <div id=\"result-emoji\" class=\"result-emoji\">\u2696\ufe0f<\/div>\n <div id=\"result-value\" class=\"result-value\">70 \u043a\u0433<\/div>\n <div id=\"result-label\" class=\"result-label\">\u0418\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0441 \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430<\/div>\n \n <div class=\"result-details\">\n <div class=\"result-row\">\n <span>\u0418\u043d\u0434\u0435\u043a\u0441 \u043c\u0430\u0441\u0441\u044b \u0442\u0435\u043b\u0430 (\u0418\u041c\u0422):<\/span>\n <span id=\"bmi-value\">25.9<\/span>\n <\/div>\n <div class=\"result-row\">\n <span>\u0417\u0434\u043e\u0440\u043e\u0432\u044b\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0432\u0435\u0441\u0430:<\/span>\n <span id=\"weight-range\">53 — 72 \u043a\u0433<\/span>\n <\/div>\n <div class=\"result-row\">\n <span>\u0418\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0441 (\u0411\u0440\u043e\u043a\u0430):<\/span>\n <span id=\"broca-weight\">70 \u043a\u0433<\/span>\n <\/div>\n <div class=\"result-row\">\n <span>\u0418\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0441 (\u041b\u043e\u0440\u0435\u043d\u0446\u0430):<\/span>\n <span id=\"lorentz-weight\">70 \u043a\u0433<\/span>\n <\/div>\n <div class=\"result-row\">\n <span>\u0411\u0430\u0437\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u0442\u0430\u0431\u043e\u043b\u0438\u0437\u043c:<\/span>\n <span id=\"bmr-value\">1680 \u043a\u043a\u0430\u043b\/\u0434\u0435\u043d\u044c<\/span>\n <\/div>\n <\/div>\n \n <div id=\"age-influence\" class=\"age-influence\">\n <i class=\"fas fa-user-clock\"><\/i> \u0412\u043e\u0437\u0440\u0430\u0441\u0442\u043d\u0430\u044f \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u0430: <span id=\"age-correction\">0 \u043a\u0433<\/span>\n <\/div>\n \n <div class=\"progress-container\">\n <div class=\"progress-label\">\n <span>\u0412\u0430\u0448 \u0432\u0435\u0441 \u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435:<\/span>\n <span id=\"progress-percent\">50%<\/span>\n <\/div>\n <div class=\"progress-bar\">\n <div id=\"progress-fill\" class=\"progress-fill\" style=\"width: 50%;\"><\/div>\n <\/div>\n <\/div>\n \n <div id=\"weight-category\" class=\"weight-category normal\">\n \u041d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0441\n <\/div>\n \n <div style=\"margin-top: 25px; padding: 15px; background: rgba(255,255,255,0.1); border-radius: 12px;\">\n <div style=\"font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 10px;\">\n <i class=\"fas fa-running\"><\/i> \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0443\n <\/div>\n <div id=\"age-recommendation\" style=\"font-size: 0.95rem;\">\n \u0414\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0443\u043c\u0435\u0440\u0435\u043d\u043d\u0430\u044f \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <script>\n \/\/ \u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0432\u0435\u0441\u0430 \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430\n let selectedGender = 'male';\n \n function selectGender(gender) {\n selectedGender = gender;\n document.querySelectorAll('.gender-option').forEach(option => {\n option.classList.remove('selected');\n });\n event.target.classList.add('selected');\n calculateWeight();\n }\n \n function calculateWeight() {\n \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\n const age = parseFloat(document.getElementById('age').value) || 30;\n const height = parseFloat(document.getElementById('height').value) || 170;\n const currentWeight = parseFloat(document.getElementById('currentWeight').value) || 75;\n const bodyType = document.getElementById('bodyType').value;\n \n \/\/ 1. \u0412\u043e\u0437\u0440\u0430\u0441\u0442\u043d\u0430\u044f \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u0430 (\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u0435\u0441 \u0441 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u043e\u043c)\n let ageCorrection = 0;\n if (age > 30) {\n \/\/ \u041f\u043e\u0441\u043b\u0435 30 \u043b\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c 0.5 \u043a\u0433 \u0437\u0430 \u043a\u0430\u0436\u0434\u044b\u0435 10 \u043b\u0435\u0442\n ageCorrection = Math.round((age - 30) \/ 10 * 0.5);\n }\n \n \/\/ 2. \u0424\u043e\u0440\u043c\u0443\u043b\u0430 \u0411\u0440\u043e\u043a\u0430 \u0441 \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u043d\u0430 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\n let brocaWeight;\n if (selectedGender === 'male') {\n brocaWeight = height - 100;\n } else {\n brocaWeight = height - 110;\n }\n \n \/\/ \u041a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u043f\u043e \u0442\u0438\u043f\u0443 \u0442\u0435\u043b\u043e\u0441\u043b\u043e\u0436\u0435\u043d\u0438\u044f\n if (bodyType === 'thin') brocaWeight *= 0.9;\n if (bodyType === 'broad') brocaWeight *= 1.1;\n \n \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u043d\u0443\u044e \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u0443\n brocaWeight += ageCorrection;\n brocaWeight = Math.round(brocaWeight);\n \n \/\/ 3. \u0424\u043e\u0440\u043c\u0443\u043b\u0430 \u041b\u043e\u0440\u0435\u043d\u0446\u0430 \u0441 \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u043d\u0430 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\n let lorentzWeight;\n if (selectedGender === 'male') {\n lorentzWeight = height - 100 - (height - 150) \/ 4;\n } else {\n lorentzWeight = height - 100 - (height - 150) \/ 2;\n }\n \n \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u043d\u0443\u044e \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u0443\n lorentzWeight += ageCorrection;\n lorentzWeight = Math.round(lorentzWeight);\n \n \/\/ 4. \u0414\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u043f\u043e \u0418\u041c\u0422 \u0441 \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u043d\u0430 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\n const heightM = height \/ 100;\n let minWeight = Math.round(18.5 * heightM * heightM);\n let maxWeight = Math.round(24.9 * heightM * heightM);\n \n \/\/ \u0421 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u043e\u043c \u0432\u0435\u0440\u0445\u043d\u044f\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f\n if (age > 40) {\n maxWeight = Math.round(maxWeight * (1 + (age - 40) * 0.005));\n }\n \n \/\/ 5. \u0418\u041c\u0422\n const bmi = (currentWeight \/ (heightM * heightM)).toFixed(1);\n \n \/\/ 6. \u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u043c\u0435\u0442\u0430\u0431\u043e\u043b\u0438\u0437\u043c (\u0441\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430!)\n let bmr;\n if (selectedGender === 'male') {\n bmr = Math.round(10 * currentWeight + 6.25 * height - 5 * age + 5);\n } else {\n bmr = Math.round(10 * currentWeight + 6.25 * height - 5 * age - 161);\n }\n \n \/\/ 7. \u0421\u0440\u0435\u0434\u043d\u0438\u0439 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0441\n const avgWeight = Math.round((brocaWeight + lorentzWeight) \/ 2);\n \n \/\/ 8. \u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f \u0432\u0435\u0441\u0430 (\u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430)\n let weightCategory = 'normal';\n let emoji = '\u2705';\n \n \/\/ \u0414\u043b\u044f \u043f\u043e\u0436\u0438\u043b\u044b\u0445 \u043b\u044e\u0434\u0435\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0432\u044b\u0448\u0435\n let adjustedMinWeight = minWeight;\n let adjustedMaxWeight = maxWeight;\n \n if (age >= 65) {\n adjustedMinWeight = Math.round(minWeight * 1.05);\n adjustedMaxWeight = Math.round(maxWeight * 1.08);\n } else if (age >= 50) {\n adjustedMinWeight = Math.round(minWeight * 1.03);\n adjustedMaxWeight = Math.round(maxWeight * 1.05);\n }\n \n if (currentWeight < adjustedMinWeight) {\n weightCategory = 'underweight';\n emoji = '\ud83d\udcc9';\n } else if (currentWeight > adjustedMaxWeight) {\n if (parseFloat(bmi) >= 30) {\n weightCategory = 'obese';\n } else {\n weightCategory = 'overweight';\n }\n emoji = '\ud83d\udcc8';\n }\n \n \/\/ 9. \u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0431\u0430\u0440\n let progressPercent = 50;\n if (currentWeight < adjustedMinWeight) {\n progressPercent = (currentWeight \/ adjustedMinWeight) * 50;\n } else if (currentWeight > adjustedMaxWeight) {\n progressPercent = 50 + ((currentWeight - adjustedMaxWeight) \/ (adjustedMaxWeight * 0.5)) * 50;\n if (progressPercent > 100) progressPercent = 100;\n } else {\n progressPercent = 50 + ((currentWeight - adjustedMinWeight) \/ (adjustedMaxWeight - adjustedMinWeight)) * 50;\n }\n \n \/\/ 10. \u0412\u043e\u0437\u0440\u0430\u0441\u0442\u043d\u044b\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438\n let ageRecommendation = '';\n if (age < 30) {\n ageRecommendation = '\u0412 \u043c\u043e\u043b\u043e\u0434\u043e\u043c \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0435 \u043c\u0435\u0442\u0430\u0431\u043e\u043b\u0438\u0437\u043c \u0431\u044b\u0441\u0442\u0440\u044b\u0439, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0437 \u0436\u0438\u0437\u043d\u0438 \u0438 \u0441\u0438\u043b\u043e\u0432\u044b\u0435 \u0442\u0440\u0435\u043d\u0438\u0440\u043e\u0432\u043a\u0438.';\n } else if (age < 50) {\n ageRecommendation = '\u0412 \u0441\u0440\u0435\u0434\u043d\u0435\u043c \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0435 \u0432\u0430\u0436\u043d\u043e \u0441\u043e\u0447\u0435\u0442\u0430\u0442\u044c \u043a\u0430\u0440\u0434\u0438\u043e \u0438 \u0441\u0438\u043b\u043e\u0432\u044b\u0435 \u0442\u0440\u0435\u043d\u0438\u0440\u043e\u0432\u043a\u0438, \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u043f\u0438\u0442\u0430\u043d\u0438\u0435\u043c.';\n } else {\n ageRecommendation = '\u0412 \u0437\u0440\u0435\u043b\u043e\u043c \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0435 \u0432\u0430\u0436\u043d\u044b \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0443\u043c\u0435\u0440\u0435\u043d\u043d\u044b\u0435 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0440\u0430\u0441\u0442\u044f\u0436\u043a\u0430 \u0438 \u0441\u0431\u0430\u043b\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043f\u0438\u0442\u0430\u043d\u0438\u0435.';\n }\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\n document.getElementById('result-value').textContent = avgWeight + ' \u043a\u0433';\n document.getElementById('bmi-value').textContent = bmi;\n document.getElementById('weight-range').textContent = minWeight + ' - ' + maxWeight + ' \u043a\u0433';\n document.getElementById('broca-weight').textContent = brocaWeight + ' \u043a\u0433';\n document.getElementById('lorentz-weight').textContent = lorentzWeight + ' \u043a\u0433';\n document.getElementById('bmr-value').textContent = bmr + ' \u043a\u043a\u0430\u043b\/\u0434\u0435\u043d\u044c';\n document.getElementById('result-emoji').textContent = emoji;\n document.getElementById('progress-percent').textContent = Math.round(progressPercent) + '%';\n document.getElementById('progress-fill').style.width = progressPercent + '%';\n document.getElementById('age-correction').textContent = ageCorrection + ' \u043a\u0433';\n document.getElementById('age-recommendation').textContent = ageRecommendation;\n \n \/\/ \u0426\u0432\u0435\u0442 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441-\u0431\u0430\u0440\u0430\n const progressFill = document.getElementById('progress-fill');\n if (progressPercent < 40) {\n progressFill.style.background = '#4fc3f7';\n } else if (progressPercent <= 60) {\n progressFill.style.background = '#81c784';\n } else if (progressPercent <= 80) {\n progressFill.style.background = '#ffb74d';\n } else {\n progressFill.style.background = '#e57373';\n }\n \n \/\/ \u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\n const categoryElement = document.getElementById('weight-category');\n categoryElement.className = 'weight-category ' + weightCategory;\n \n let categoryText = '';\n switch(weightCategory) {\n case 'underweight':\n categoryText = '\u0414\u0435\u0444\u0438\u0446\u0438\u0442 \u043c\u0430\u0441\u0441\u044b \u0442\u0435\u043b\u0430';\n break;\n case 'normal':\n categoryText = '\u041d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0441';\n if (age > 50) categoryText += ' (\u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430)';\n break;\n case 'overweight':\n categoryText = '\u0418\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u0439 \u0432\u0435\u0441';\n break;\n case 'obese':\n categoryText = '\u041e\u0436\u0438\u0440\u0435\u043d\u0438\u0435';\n break;\n }\n categoryElement.textContent = categoryText;\n \n \/\/ \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u0443 \u0434\u043b\u044f \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430\n const ageInfluence = document.getElementById('age-influence');\n if (age > 30) {\n ageInfluence.style.display = 'block';\n ageInfluence.innerHTML = `<i class=\"fas fa-user-clock\"><\/i> \u0412\u043e\u0437\u0440\u0430\u0441\u0442\u043d\u0430\u044f \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u0430: <span id=\"age-correction\">+${ageCorrection} \u043a\u0433<\/span> (\u043f\u043e\u0441\u043b\u0435 30 \u043b\u0435\u0442)`;\n } else {\n ageInfluence.style.display = 'none';\n }\n }\n \n function loadExample(num) {\n const examples = [\n {gender: 'male', age: 25, height: 180, weight: 80},\n {gender: 'male', age: 40, height: 175, weight: 82},\n {gender: 'male', age: 60, height: 170, weight: 78}\n ];\n \n const ex = examples[num];\n \n \/\/ \u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u043e\u043b\n document.querySelectorAll('.gender-option').forEach(option => {\n option.classList.remove('selected');\n });\n document.querySelector('.gender-option:first-child').classList.add('selected');\n selectedGender = 'male';\n \n \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\n document.getElementById('age').value = ex.age;\n document.getElementById('height').value = ex.height;\n document.getElementById('currentWeight').value = ex.weight;\n \n calculateWeight();\n }\n \n \/\/ \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0430\u0441\u0447\u0435\u0442 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438\n document.addEventListener('DOMContentLoaded', function() {\n document.getElementById('age').addEventListener('input', calculateWeight);\n document.getElementById('height').addEventListener('input', calculateWeight);\n document.getElementById('currentWeight').addEventListener('input', calculateWeight);\n document.getElementById('bodyType').addEventListener('change', calculateWeight);\n \n \/\/ \u041f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0430\u0432\u0442\u043e\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\n document.querySelectorAll('input').forEach(input => {\n input.setAttribute('autocomplete', 'off');\n input.setAttribute('autocorrect', 'off');\n input.setAttribute('autocapitalize', 'off');\n input.setAttribute('spellcheck', 'false');\n });\n \n calculateWeight();\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"ru\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0435\u0441\u0430 | \u041f\u043e\u043b\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n \/* \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: #333;\n line-height: 1.6;\n min-height: 100vh;\n padding: 20px;\n }\n \n .container {\n max-width: 1200px;\n margin: 0 auto;\n }\n \n \/* \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 *\/\n .info-container {\n background: white;\n border-radius: 25px;\n padding: 40px;\n margin-top: 40px;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);\n }\n \n .info-header {\n text-align: center;\n margin-bottom: 40px;\n }\n \n .info-header h2 {\n font-size: 2.5rem;\n color: #2c3e50;\n margin-bottom: 15px;\n background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n \n .info-header p {\n font-size: 1.1rem;\n color: #666;\n max-width: 800px;\n margin: 0 auto;\n }\n \n \/* \u041f\u0440\u043e\u0441\u0442\u044b\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 *\/\n .simple-card {\n background: #f8f9fa;\n border-radius: 15px;\n padding: 25px;\n margin-bottom: 25px;\n border-left: 5px solid #667eea;\n }\n \n .simple-card h3 {\n color: #2c3e50;\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .simple-card p {\n color: #555;\n line-height: 1.7;\n }\n \n .bmi-categories {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 15px;\n margin: 30px 0;\n }\n \n .bmi-category-item {\n padding: 20px;\n border-radius: 12px;\n color: white;\n font-weight: 600;\n text-align: center;\n cursor: pointer;\n transition: transform 0.3s ease;\n }\n \n .bmi-category-item:hover {\n transform: translateY(-5px);\n }\n \n .underweight { background: #4fc3f7; }\n .normal { background: #81c784; }\n .overweight { background: #ffb74d; }\n .obese { background: #e57373; }\n \n .category-info {\n background: white;\n border: 2px solid #e0e0e0;\n border-radius: 15px;\n padding: 25px;\n margin-top: 20px;\n display: none;\n }\n \n .category-info.active {\n display: block;\n animation: fadeIn 0.5s ease;\n }\n \n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n \n \/* \u0421\u0435\u043a\u0446\u0438\u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0439 *\/\n .recommendations {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n margin: 40px 0;\n }\n \n .recommendation-item {\n background: white;\n border-radius: 15px;\n padding: 25px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);\n border: 2px solid transparent;\n transition: all 0.3s ease;\n }\n \n .recommendation-item:hover {\n border-color: #667eea;\n transform: translateY(-5px);\n }\n \n .recommendation-item h4 {\n color: #667eea;\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n \/* \u0422\u0410\u0411\u041b\u0418\u0426\u0410 \u041f\u0420\u041e\u0414\u0423\u041a\u0422\u041e\u0412 - \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041d\u0410\u042f \u0412\u0415\u0420\u0421\u0418\u042f *\/\n .food-table-container {\n overflow-x: auto;\n margin: 25px 0;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);\n }\n \n .food-table {\n width: 100%;\n border-collapse: collapse;\n min-width: 600px; \/* \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043e\u0432 *\/\n }\n \n .food-table th {\n background: #667eea;\n color: white;\n padding: 15px;\n text-align: left;\n font-weight: 600;\n }\n \n .food-table td {\n padding: 15px;\n border-bottom: 1px solid #e0e0e0;\n vertical-align: top;\n }\n \n .food-table tbody tr:hover {\n background: #f8f9fa;\n }\n \n .good { color: #81c784; font-weight: 600; }\n .moderate { color: #ffb74d; font-weight: 600; }\n .limit { color: #e57373; font-weight: 600; }\n \n \/* \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n .mobile-food-table {\n display: none;\n flex-direction: column;\n gap: 20px;\n margin: 25px 0;\n }\n \n .mobile-food-category {\n background: white;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);\n border: 1px solid #e0e0e0;\n }\n \n .mobile-category-header {\n background: #667eea;\n color: white;\n padding: 15px;\n font-weight: 600;\n font-size: 1.1rem;\n }\n \n .mobile-category-content {\n padding: 0;\n }\n \n .mobile-category-row {\n display: flex;\n border-bottom: 1px solid #e0e0e0;\n padding: 15px;\n align-items: flex-start;\n }\n \n .mobile-category-row:last-child {\n border-bottom: none;\n }\n \n .mobile-row-label {\n flex: 0 0 120px;\n font-weight: 600;\n color: #2c3e50;\n padding-right: 15px;\n }\n \n .mobile-row-value {\n flex: 1;\n line-height: 1.5;\n }\n \n \/* \u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 *\/\n .sources-section {\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n border-radius: 20px;\n padding: 30px;\n margin-top: 40px;\n }\n \n .sources-section h3 {\n text-align: center;\n color: #2c3e50;\n margin-bottom: 25px;\n }\n \n .sources-list {\n list-style: none;\n padding: 0;\n }\n \n .sources-list li {\n margin-bottom: 15px;\n padding: 15px;\n background: white;\n border-radius: 10px;\n border-left: 4px solid #667eea;\n }\n \n .sources-list a {\n color: #667eea;\n text-decoration: none;\n font-weight: 600;\n display: block;\n margin-bottom: 5px;\n }\n \n .sources-list a:hover {\n text-decoration: underline;\n }\n \n .source-description {\n color: #666;\n font-size: 0.95rem;\n }\n \n \/* \u0423\u041f\u0420\u041e\u0429\u0415\u041d\u041d\u042b\u0419 FAQ \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0420\u0410\u0411\u041e\u0422\u0410\u0415\u0422 *\/\n .simple-faq {\n margin-top: 40px;\n }\n \n .faq-title {\n color: #2c3e50;\n margin-bottom: 25px;\n text-align: center;\n font-size: 1.8rem;\n }\n \n .faq-item {\n background: white;\n border-radius: 10px;\n margin-bottom: 15px;\n overflow: hidden;\n border: 2px solid #e0e0e0;\n transition: all 0.3s ease;\n }\n \n .faq-item:hover {\n border-color: #667eea;\n }\n \n .faq-question {\n font-weight: 600;\n color: #2c3e50;\n padding: 20px;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: #f8f9fa;\n user-select: none;\n }\n \n .faq-question:hover {\n background: #f0f2ff;\n }\n \n .faq-answer {\n color: #555;\n line-height: 1.7;\n padding: 0 20px;\n max-height: 0;\n overflow: hidden;\n transition: all 0.3s ease;\n }\n \n .faq-answer.show {\n max-height: 500px;\n padding: 0 20px 20px 20px;\n animation: fadeIn 0.3s ease;\n }\n \n .faq-toggle {\n transition: transform 0.3s ease;\n font-size: 0.9rem;\n color: #667eea;\n }\n \n .faq-toggle.rotate {\n transform: rotate(180deg);\n }\n \n .footer {\n text-align: center;\n padding: 40px 20px;\n margin-top: 50px;\n color: white;\n font-size: 0.9rem;\n opacity: 0.9;\n }\n \n \/* \u041c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 *\/\n @media (max-width: 768px) {\n .info-container {\n padding: 25px 20px;\n }\n \n .info-header h2 {\n font-size: 2rem;\n }\n \n .bmi-categories {\n grid-template-columns: 1fr;\n }\n \n .recommendations {\n grid-template-columns: 1fr;\n }\n \n .simple-card {\n padding: 20px;\n }\n \n \/* \u041f\u0440\u044f\u0447\u0435\u043c \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n .food-table-container {\n display: none;\n }\n \n \/* \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u044b *\/\n .mobile-food-table {\n display: flex;\n }\n \n .mobile-category-row {\n flex-direction: column;\n padding: 12px 15px;\n }\n \n .mobile-row-label {\n flex: none;\n width: 100%;\n padding-right: 0;\n margin-bottom: 5px;\n font-size: 0.95rem;\n }\n \n .mobile-row-value {\n flex: none;\n width: 100%;\n font-size: 0.95rem;\n line-height: 1.5;\n }\n }\n \n @media (max-width: 480px) {\n .info-container {\n padding: 20px 15px;\n }\n \n .info-header h2 {\n font-size: 1.8rem;\n }\n \n .info-header p {\n font-size: 1rem;\n }\n \n .simple-card h3 {\n font-size: 1.3rem;\n }\n \n .mobile-category-header {\n padding: 12px;\n font-size: 1rem;\n }\n \n .mobile-category-row {\n padding: 10px 12px;\n }\n \n .mobile-row-label {\n font-size: 0.9rem;\n }\n \n .mobile-row-value {\n font-size: 0.9rem;\n }\n \n .sources-section {\n padding: 20px 15px;\n }\n }\n \n \/* \u0414\u043b\u044f \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0434\u0435\u043b\u0430\u0435\u043c \u0435\u0449\u0435 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u0435\u0435 *\/\n @media (max-width: 360px) {\n .mobile-category-row {\n padding: 8px 10px;\n }\n \n .good, .moderate, .limit {\n font-size: 0.85rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n \n <div class=\"info-container\">\n <div class=\"info-header\">\n <h2><i class=\"fas fa-book-medical\"><\/i> \u0418\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0437\u0434\u043e\u0440\u043e\u0432\u043e\u043c \u0432\u0435\u0441\u0435<\/h2>\n <p>\u041f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0435\u0441\u0430<\/p>\n <\/div>\n \n \n <div class=\"simple-card\">\n <h3><i class=\"fas fa-chart-bar\"><\/i> \u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0438\u043d\u0434\u0435\u043a\u0441\u0430 \u043c\u0430\u0441\u0441\u044b \u0442\u0435\u043b\u0430<\/h3>\n <p>\u0418\u041c\u0422 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0432\u0435\u0441 \u0432 \u043a\u0438\u043b\u043e\u0433\u0440\u0430\u043c\u043c\u0430\u0445, \u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043d\u0430 \u043a\u0432\u0430\u0434\u0440\u0430\u0442 \u0440\u043e\u0441\u0442\u0430 \u0432 \u043c\u0435\u0442\u0440\u0430\u0445<\/p>\n \n <div class=\"bmi-categories\">\n <div class=\"bmi-category-item underweight\" data-category=\"underweight\">\n \u0414\u0435\u0444\u0438\u0446\u0438\u0442<br><small>\u0418\u041c\u0422 < 18.5<\/small>\n <\/div>\n <div class=\"bmi-category-item normal\" data-category=\"normal\">\n \u041d\u043e\u0440\u043c\u0430<br><small>18.5 — 24.9<\/small>\n <\/div>\n <div class=\"bmi-category-item overweight\" data-category=\"overweight\">\n \u0418\u0437\u0431\u044b\u0442\u043e\u043a<br><small>25 — 29.9<\/small>\n <\/div>\n <div class=\"bmi-category-item obese\" data-category=\"obese\">\n \u041e\u0436\u0438\u0440\u0435\u043d\u0438\u0435<br><small>\u2265 30<\/small>\n <\/div>\n <\/div>\n \n <div id=\"category-info\" class=\"category-info\">\n <h4 id=\"category-title\">\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044e<\/h4>\n <p id=\"category-description\">\u041d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0430 \u043e\u0434\u043d\u0443 \u0438\u0437 \u0446\u0432\u0435\u0442\u043d\u044b\u0445 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439 \u0432\u044b\u0448\u0435, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438<\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"simple-card\">\n <h3><i class=\"fas fa-lightbulb\"><\/i> \u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438<\/h3>\n <p>\u041f\u0440\u043e\u0441\u0442\u044b\u0435 \u0441\u043e\u0432\u0435\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0437\u0434\u043e\u0440\u043e\u0432\u044b\u0439 \u0432\u0435\u0441<\/p>\n \n <div class=\"recommendations\">\n <div class=\"recommendation-item\">\n <h4><i class=\"fas fa-utensils\"><\/i> \u041f\u0438\u0442\u0430\u043d\u0438\u0435<\/h4>\n <p>\u2022 \u0415\u0448\u044c\u0442\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0432\u043e\u0449\u0435\u0439 \u0438 \u0444\u0440\u0443\u043a\u0442\u043e\u0432<\/p>\n <p>\u2022 \u0412\u044b\u0431\u0438\u0440\u0430\u0439\u0442\u0435 \u0446\u0435\u043b\u044c\u043d\u043e\u0437\u0435\u0440\u043d\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u044b<\/p>\n <p>\u2022 \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u044c\u0442\u0435 \u0441\u0430\u0445\u0430\u0440 \u0438 \u0441\u043e\u043b\u044c<\/p>\n <p>\u2022 \u041f\u0435\u0439\u0442\u0435 \u0432\u043e\u0434\u0443 \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u043b\u0430\u0434\u043a\u0438\u0445 \u043d\u0430\u043f\u0438\u0442\u043a\u043e\u0432<\/p>\n <\/div>\n \n <div class=\"recommendation-item\">\n <h4><i class=\"fas fa-running\"><\/i> \u0410\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/h4>\n <p>\u2022 150 \u043c\u0438\u043d\u0443\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0432 \u043d\u0435\u0434\u0435\u043b\u044e<\/p>\n <p>\u2022 \u0425\u043e\u0434\u0438\u0442\u0435 \u043f\u0435\u0448\u043a\u043e\u043c 30 \u043c\u0438\u043d\u0443\u0442 \u0432 \u0434\u0435\u043d\u044c<\/p>\n <p>\u2022 \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043b\u0435\u0441\u0442\u043d\u0438\u0446\u0443 \u0432\u043c\u0435\u0441\u0442\u043e \u043b\u0438\u0444\u0442\u0430<\/p>\n <p>\u2022 \u0414\u0435\u043b\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0440\u044b\u0432\u044b \u043f\u0440\u0438 \u0441\u0438\u0434\u044f\u0447\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0435<\/p>\n <\/div>\n \n <div class=\"recommendation-item\">\n <h4><i class=\"fas fa-heart\"><\/i> \u0417\u0434\u043e\u0440\u043e\u0432\u044c\u0435<\/h4>\n <p>\u2022 \u0421\u043f\u0438\u0442\u0435 7-8 \u0447\u0430\u0441\u043e\u0432 \u0432 \u0441\u0443\u0442\u043a\u0438<\/p>\n <p>\u2022 \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0439\u0442\u0435 \u0441\u0442\u0440\u0435\u0441\u0441<\/p>\n <p>\u2022 \u0420\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u0435 \u043e\u0441\u043c\u043e\u0442\u0440\u044b<\/p>\n <p>\u2022 \u0418\u0437\u043c\u0435\u0440\u044f\u0439\u0442\u0435 \u0432\u0435\u0441 1 \u0440\u0430\u0437 \u0432 \u043d\u0435\u0434\u0435\u043b\u044e<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"simple-card\">\n <h3><i class=\"fas fa-apple-alt\"><\/i> \u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0438 \u0432\u0440\u0435\u0434\u043d\u044b\u0435 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u044b \u043f\u0440\u0438 \u043b\u0438\u0448\u043d\u0435\u043c \u0432\u0435\u0441\u0435<\/h3>\n <p>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u0432\u044b\u0431\u043e\u0440\u0443<\/p>\n \n \n <div class=\"food-table-container\">\n <table class=\"food-table\">\n <thead>\n <tr>\n <th>\u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f<\/th>\n <th>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f<\/th>\n <th>\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c<\/th>\n <th>\u0418\u0437\u0431\u0435\u0433\u0430\u0442\u044c<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>\u0411\u0435\u043b\u043a\u0438<\/td>\n <td class=\"good\">\u041a\u0443\u0440\u0438\u0446\u0430, \u0440\u044b\u0431\u0430, \u0442\u043e\u0444\u0443, \u0431\u043e\u0431\u043e\u0432\u044b\u0435<\/td>\n <td class=\"moderate\">\u041a\u0440\u0430\u0441\u043d\u043e\u0435 \u043c\u044f\u0441\u043e, \u0441\u044b\u0440<\/td>\n <td class=\"limit\">\u041a\u043e\u043b\u0431\u0430\u0441\u044b, \u0441\u043e\u0441\u0438\u0441\u043a\u0438<\/td>\n <\/tr>\n <tr>\n <td>\u0423\u0433\u043b\u0435\u0432\u043e\u0434\u044b<\/td>\n <td class=\"good\">\u041a\u0440\u0443\u043f\u044b, \u0446\u0435\u043b\u044c\u043d\u043e\u0437\u0435\u0440\u043d\u043e\u0432\u043e\u0439 \u0445\u043b\u0435\u0431<\/td>\n <td class=\"moderate\">\u0411\u0435\u043b\u044b\u0439 \u0440\u0438\u0441, \u043a\u0430\u0440\u0442\u043e\u0444\u0435\u043b\u044c<\/td>\n <td class=\"limit\">\u0411\u0435\u043b\u044b\u0439 \u0445\u043b\u0435\u0431, \u0432\u044b\u043f\u0435\u0447\u043a\u0430<\/td>\n <\/tr>\n <tr>\n <td>\u0416\u0438\u0440\u044b<\/td>\n <td class=\"good\">\u041e\u043b\u0438\u0432\u043a\u043e\u0432\u043e\u0435 \u043c\u0430\u0441\u043b\u043e, \u0430\u0432\u043e\u043a\u0430\u0434\u043e, \u043e\u0440\u0435\u0445\u0438<\/td>\n <td class=\"moderate\">\u0421\u043b\u0438\u0432\u043e\u0447\u043d\u043e\u0435 \u043c\u0430\u0441\u043b\u043e<\/td>\n <td class=\"limit\">\u041c\u0430\u0440\u0433\u0430\u0440\u0438\u043d, \u0444\u0430\u0441\u0442\u0444\u0443\u0434<\/td>\n <\/tr>\n <tr>\n <td>\u041d\u0430\u043f\u0438\u0442\u043a\u0438<\/td>\n <td class=\"good\">\u0412\u043e\u0434\u0430, \u0447\u0430\u0439, \u043a\u043e\u0444\u0435 \u0431\u0435\u0437 \u0441\u0430\u0445\u0430\u0440\u0430<\/td>\n <td class=\"moderate\">\u0424\u0440\u0443\u043a\u0442\u043e\u0432\u044b\u0435 \u0441\u043e\u043a\u0438<\/td>\n <td class=\"limit\">\u0413\u0430\u0437\u0438\u0440\u043e\u0432\u043a\u0430, \u0430\u043b\u043a\u043e\u0433\u043e\u043b\u044c<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n \n \n <div class=\"mobile-food-table\">\n \n <div class=\"mobile-food-category\">\n <div class=\"mobile-category-header\">\u0411\u0435\u043b\u043a\u0438<\/div>\n <div class=\"mobile-category-content\">\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f<\/div>\n <div class=\"mobile-row-value good\">\u041a\u0443\u0440\u0438\u0446\u0430, \u0440\u044b\u0431\u0430, \u0442\u043e\u0444\u0443, \u0431\u043e\u0431\u043e\u0432\u044b\u0435<\/div>\n <\/div>\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c<\/div>\n <div class=\"mobile-row-value moderate\">\u041a\u0440\u0430\u0441\u043d\u043e\u0435 \u043c\u044f\u0441\u043e, \u0441\u044b\u0440<\/div>\n <\/div>\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u0418\u0437\u0431\u0435\u0433\u0430\u0442\u044c<\/div>\n <div class=\"mobile-row-value limit\">\u041a\u043e\u043b\u0431\u0430\u0441\u044b, \u0441\u043e\u0441\u0438\u0441\u043a\u0438<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mobile-food-category\">\n <div class=\"mobile-category-header\">\u0423\u0433\u043b\u0435\u0432\u043e\u0434\u044b<\/div>\n <div class=\"mobile-category-content\">\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f<\/div>\n <div class=\"mobile-row-value good\">\u041a\u0440\u0443\u043f\u044b, \u0446\u0435\u043b\u044c\u043d\u043e\u0437\u0435\u0440\u043d\u043e\u0432\u043e\u0439 \u0445\u043b\u0435\u0431<\/div>\n <\/div>\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c<\/div>\n <div class=\"mobile-row-value moderate\">\u0411\u0435\u043b\u044b\u0439 \u0440\u0438\u0441, \u043a\u0430\u0440\u0442\u043e\u0444\u0435\u043b\u044c<\/div>\n <\/div>\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u0418\u0437\u0431\u0435\u0433\u0430\u0442\u044c<\/div>\n <div class=\"mobile-row-value limit\">\u0411\u0435\u043b\u044b\u0439 \u0445\u043b\u0435\u0431, \u0432\u044b\u043f\u0435\u0447\u043a\u0430<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mobile-food-category\">\n <div class=\"mobile-category-header\">\u0416\u0438\u0440\u044b<\/div>\n <div class=\"mobile-category-content\">\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f<\/div>\n <div class=\"mobile-row-value good\">\u041e\u043b\u0438\u0432\u043a\u043e\u0432\u043e\u0435 \u043c\u0430\u0441\u043b\u043e, \u0430\u0432\u043e\u043a\u0430\u0434\u043e, \u043e\u0440\u0435\u0445\u0438<\/div>\n <\/div>\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c<\/div>\n <div class=\"mobile-row-value moderate\">\u0421\u043b\u0438\u0432\u043e\u0447\u043d\u043e\u0435 \u043c\u0430\u0441\u043b\u043e<\/div>\n <\/div>\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u0418\u0437\u0431\u0435\u0433\u0430\u0442\u044c<\/div>\n <div class=\"mobile-row-value limit\">\u041c\u0430\u0440\u0433\u0430\u0440\u0438\u043d, \u0444\u0430\u0441\u0442\u0444\u0443\u0434<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mobile-food-category\">\n <div class=\"mobile-category-header\">\u041d\u0430\u043f\u0438\u0442\u043a\u0438<\/div>\n <div class=\"mobile-category-content\">\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f<\/div>\n <div class=\"mobile-row-value good\">\u0412\u043e\u0434\u0430, \u0447\u0430\u0439, \u043a\u043e\u0444\u0435 \u0431\u0435\u0437 \u0441\u0430\u0445\u0430\u0440\u0430<\/div>\n <\/div>\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c<\/div>\n <div class=\"mobile-row-value moderate\">\u0424\u0440\u0443\u043a\u0442\u043e\u0432\u044b\u0435 \u0441\u043e\u043a\u0438<\/div>\n <\/div>\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u0418\u0437\u0431\u0435\u0433\u0430\u0442\u044c<\/div>\n <div class=\"mobile-row-value limit\">\u0413\u0430\u0437\u0438\u0440\u043e\u0432\u043a\u0430, \u0430\u043b\u043a\u043e\u0433\u043e\u043b\u044c<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"sources-section\">\n <h3><i class=\"fas fa-external-link-alt\"><\/i> \u041f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438<\/h3>\n <p>\u042d\u0442\u0438 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043d\u0430\u0443\u0447\u043d\u043e \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438<\/p>\n \n <ul class=\"sources-list\">\n <li>\n <a href=\"https:\/\/www.who.int\/ru\/news-room\/fact-sheets\/detail\/healthy-diet\" target=\"_blank\">\n <i class=\"fas fa-external-link-alt\"><\/i> \u0412\u041e\u0417: \u0417\u0434\u043e\u0440\u043e\u0432\u043e\u0435 \u043f\u0438\u0442\u0430\u043d\u0438\u0435\n <\/a>\n <div class=\"source-description\">\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u043f\u0438\u0442\u0430\u043d\u0438\u044e \u043e\u0442 \u0412\u0441\u0435\u043c\u0438\u0440\u043d\u043e\u0439 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0434\u0440\u0430\u0432\u043e\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f<\/div>\n <\/li>\n <li>\n <a href=\"https:\/\/www.cdc.gov\/healthyweight\/healthy_eating\/index.html\" target=\"_blank\">\n <i class=\"fas fa-external-link-alt\"><\/i> CDC: \u0417\u0434\u043e\u0440\u043e\u0432\u043e\u0435 \u043f\u0438\u0442\u0430\u043d\u0438\u0435\n <\/a>\n <div class=\"source-description\">\u0426\u0435\u043d\u0442\u0440\u044b \u043f\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044e \u0437\u0430\u0431\u043e\u043b\u0435\u0432\u0430\u043d\u0438\u0439 \u0421\u0428\u0410 — \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u043f\u0438\u0442\u0430\u043d\u0438\u044e<\/div>\n <\/li>\n <li>\n <a href=\"https:\/\/www.nhs.uk\/live-well\/eat-well\/\" target=\"_blank\">\n <i class=\"fas fa-external-link-alt\"><\/i> NHS: \u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e \u043f\u0438\u0442\u0430\u043d\u0438\u044e\n <\/a>\n <div class=\"source-description\">\u041d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u043b\u0443\u0436\u0431\u0430 \u0437\u0434\u0440\u0430\u0432\u043e\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0412\u0435\u043b\u0438\u043a\u043e\u0431\u0440\u0438\u0442\u0430\u043d\u0438\u0438<\/div>\n <\/li>\n <li>\n <a href=\"https:\/\/www.heart.org\/en\/healthy-living\/healthy-eating\" target=\"_blank\">\n <i class=\"fas fa-external-link-alt\"><\/i> \u0410\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0430\u044f \u0430\u0441\u0441\u043e\u0446\u0438\u0430\u0446\u0438\u044f \u0441\u0435\u0440\u0434\u0446\u0430\n <\/a>\n <div class=\"source-description\">\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u043f\u0438\u0442\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u044f \u0441\u0435\u0440\u0434\u0446\u0430<\/div>\n <\/li>\n <\/ul>\n <\/div>\n \n \n <div class=\"simple-faq\">\n <h3 class=\"faq-title\">\n <i class=\"fas fa-question-circle\"><\/i> \u0427\u0430\u0441\u0442\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b\n <\/h3>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\">\n \u041a\u0430\u043a \u0447\u0430\u0441\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0432\u0437\u0432\u0435\u0448\u0438\u0432\u0430\u0442\u044c\u0441\u044f?\n <i class=\"fas fa-chevron-down faq-toggle\"><\/i>\n <\/div>\n <div class=\"faq-answer\">\n \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0432\u0437\u0432\u0435\u0448\u0438\u0432\u0430\u0442\u044c\u0441\u044f 1 \u0440\u0430\u0437 \u0432 \u043d\u0435\u0434\u0435\u043b\u044e, \u0443\u0442\u0440\u043e\u043c \u043d\u0430\u0442\u043e\u0449\u0430\u043a, \u043f\u043e\u0441\u043b\u0435 \u0442\u0443\u0430\u043b\u0435\u0442\u0430. \u0415\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u044b\u0435 \u0432\u0437\u0432\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u043e\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0438\u0437-\u0437\u0430 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043b\u0435\u0431\u0430\u043d\u0438\u0439 \u0432\u0435\u0441\u0430 (\u0432\u043e\u0434\u0430, \u043f\u0438\u0449\u0430, \u0441\u043e\u043b\u044c).\n <\/div>\n <\/div>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\">\n \u041f\u043e\u0447\u0435\u043c\u0443 \u0418\u041c\u0422 \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0442\u043e\u0447\u0435\u043d?\n <i class=\"fas fa-chevron-down faq-toggle\"><\/i>\n <\/div>\n <div class=\"faq-answer\">\n \u0418\u041c\u0422 \u043d\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u043c\u044b\u0448\u0435\u0447\u043d\u0443\u044e \u043c\u0430\u0441\u0441\u0443, \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0436\u0438\u0440\u0430 \u0438 \u043f\u043b\u043e\u0442\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u0441\u0442\u0435\u0439. \u0421\u043f\u043e\u0440\u0442\u0441\u043c\u0435\u043d\u044b \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u0432\u044b\u0441\u043e\u043a\u0438\u0439 \u0418\u041c\u0422 \u0438\u0437-\u0437\u0430 \u043c\u044b\u0448\u0446. \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0437\u043c\u0435\u0440\u044f\u0439\u0442\u0435 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c \u0442\u0430\u043b\u0438\u0438 (\u0436\u0435\u043d\u0449\u0438\u043d\u044b < 80 \u0441\u043c, \u043c\u0443\u0436\u0447\u0438\u043d\u044b < 94 \u0441\u043c).\n <\/div>\n <\/div>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\">\n \u041a\u0430\u043a\u043e\u0439 \u0434\u0435\u0444\u0438\u0446\u0438\u0442 \u043a\u0430\u043b\u043e\u0440\u0438\u0439 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u0435\u043d?\n <i class=\"fas fa-chevron-down faq-toggle\"><\/i>\n <\/div>\n <div class=\"faq-answer\">\n \u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 \u0434\u0435\u0444\u0438\u0446\u0438\u0442 — 300-500 \u043a\u043a\u0430\u043b \u0432 \u0434\u0435\u043d\u044c, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043f\u043e\u0442\u0435\u0440\u0435 0.5-1 \u043a\u0433 \u0432 \u043d\u0435\u0434\u0435\u043b\u044e. \u0411\u043e\u043b\u044c\u0448\u0438\u0439 \u0434\u0435\u0444\u0438\u0446\u0438\u0442 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u043f\u043e\u0442\u0435\u0440\u0435 \u043c\u044b\u0448\u0435\u0447\u043d\u043e\u0439 \u043c\u0430\u0441\u0441\u044b, \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u044e \u043c\u0435\u0442\u0430\u0431\u043e\u043b\u0438\u0437\u043c\u0430 \u0438 \u0434\u0435\u0444\u0438\u0446\u0438\u0442\u0443 \u043f\u0438\u0442\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0432\u0435\u0449\u0435\u0441\u0442\u0432.\n <\/div>\n <\/div>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\">\n \u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0441\u043b\u0438 \u0432\u0435\u0441 \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f?\n <i class=\"fas fa-chevron-down faq-toggle\"><\/i>\n <\/div>\n <div class=\"faq-answer\">\n \u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435: 1) \u0422\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u0441\u0447\u0435\u0442\u0430 \u043a\u0430\u043b\u043e\u0440\u0438\u0439, 2) \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043b\u0438 \u043f\u044c\u0435\u0442\u0435 \u0432\u043e\u0434\u044b (30 \u043c\u043b\/\u043a\u0433), 3) \u041a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u043d\u0430 (7-8 \u0447\u0430\u0441\u043e\u0432), 4) \u0423\u0440\u043e\u0432\u0435\u043d\u044c \u0441\u0442\u0440\u0435\u0441\u0441\u0430 (\u043a\u043e\u0440\u0442\u0438\u0437\u043e\u043b \u0437\u0430\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u043e\u0434\u0443), 5) \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043d\u0443\u0436\u0435\u043d \u043f\u0435\u0440\u0435\u0440\u044b\u0432 \u0432 \u0434\u0438\u0435\u0442\u0435 (\u043c\u0435\u0442\u0430\u0431\u043e\u043b\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u044f).\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"footer\">\n <p>\u00a9 2023 \u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0432\u0435\u0441\u0430. \u0418\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0432 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0446\u0435\u043b\u044f\u0445.<\/p>\n <p><i class=\"fas fa-exclamation-circle\"><\/i> \u0414\u043b\u044f \u043c\u0435\u0434\u0438\u0446\u0438\u043d\u0441\u043a\u0438\u0445 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0439 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435\u0441\u044c \u043a \u043a\u0432\u0430\u043b\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c\u0443 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0443.<\/p>\n <\/div>\n <\/div>\n \n <script>\n \/\/ \u041f\u043e\u043a\u0430\u0437 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u0445 \u0418\u041c\u0422\n function showCategoryInfo(category) {\n const infoElement = document.getElementById('category-info');\n const titleElement = document.getElementById('category-title');\n const descElement = document.getElementById('category-description');\n \n const categories = {\n 'underweight': {\n title: '\u0414\u0435\u0444\u0438\u0446\u0438\u0442 \u043c\u0430\u0441\u0441\u044b \u0442\u0435\u043b\u0430 (\u0418\u041c\u0422 < 18.5)',\n description: '\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u043a\u0430\u043b\u043e\u0440\u0438\u0439\u043d\u043e\u0441\u0442\u044c \u043f\u0438\u0442\u0430\u043d\u0438\u044f, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0431\u0435\u043b\u043a\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u044b \u0438 \u0441\u0438\u043b\u043e\u0432\u044b\u0435 \u0442\u0440\u0435\u043d\u0438\u0440\u043e\u0432\u043a\u0438. \u041a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u0446\u0438\u044f \u0441 \u0432\u0440\u0430\u0447\u043e\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043c\u0435\u0434\u0438\u0446\u0438\u043d\u0441\u043a\u0438\u0435 \u043f\u0440\u0438\u0447\u0438\u043d\u044b.'\n },\n 'normal': {\n title: '\u041d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0441 (\u0418\u041c\u0422 18.5 - 24.9)',\n description: '\u0418\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d. \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0432\u0435\u0441 \u0441\u0431\u0430\u043b\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043f\u0438\u0442\u0430\u043d\u0438\u0435\u043c \u0438 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0439 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u044e.'\n },\n 'overweight': {\n title: '\u0418\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u0439 \u0432\u0435\u0441 (\u0418\u041c\u0422 25 - 29.9)',\n description: '\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0443\u043c\u0435\u0440\u0435\u043d\u043d\u043e\u0435 \u0441\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u0432\u0435\u0441\u0430 (0.5 \u043a\u0433 \u0432 \u043d\u0435\u0434\u0435\u043b\u044e), \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043f\u0438\u0442\u0430\u043d\u0438\u044f.'\n },\n 'obese': {\n title: '\u041e\u0436\u0438\u0440\u0435\u043d\u0438\u0435 (\u0418\u041c\u0422 \u2265 30)',\n description: '\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u0446\u0438\u044f \u0441 \u0432\u0440\u0430\u0447\u043e\u043c, \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e\u0435 \u0441\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u0432\u0435\u0441\u0430 \u043f\u043e\u0434 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043e\u0431\u0440\u0430\u0437\u0430 \u0436\u0438\u0437\u043d\u0438.'\n }\n };\n \n titleElement.textContent = categories[category].title;\n descElement.textContent = categories[category].description;\n \n \/\/ \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e\n infoElement.classList.add('active');\n \n \/\/ \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u043a\u0440\u044b\u0442\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 15 \u0441\u0435\u043a\u0443\u043d\u0434\n setTimeout(() => {\n infoElement.classList.remove('active');\n }, 15000);\n }\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f FAQ\n function toggleFAQ(faqItem) {\n const answer = faqItem.querySelector('.faq-answer');\n const toggle = faqItem.querySelector('.faq-toggle');\n \n \/\/ \u0417\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432\u0441\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 FAQ\n document.querySelectorAll('.faq-item').forEach(item => {\n if (item !== faqItem) {\n item.querySelector('.faq-answer').classList.remove('show');\n item.querySelector('.faq-toggle').classList.remove('rotate');\n }\n });\n \n \/\/ \u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 FAQ\n answer.classList.toggle('show');\n toggle.classList.toggle('rotate');\n }\n \n \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435\n document.addEventListener('DOMContentLoaded', function() {\n console.log('\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u0430');\n \n \/\/ \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0435\u0441\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e\n setTimeout(() => {\n showCategoryInfo('normal');\n }, 1000);\n \n \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043b\u044f \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439 \u0418\u041c\u0422\n document.querySelectorAll('.bmi-category-item').forEach(item => {\n item.addEventListener('click', function() {\n const category = this.getAttribute('data-category');\n if (category) {\n showCategoryInfo(category);\n }\n });\n });\n \n \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043b\u044f FAQ - \u041f\u0420\u041e\u0421\u0422\u041e\u0419 \u0438 \u0420\u0410\u0411\u041e\u0427\u0418\u0419 \u043f\u043e\u0434\u0445\u043e\u0434\n document.querySelectorAll('.faq-question').forEach(question => {\n question.addEventListener('click', function() {\n const faqItem = this.closest('.faq-item');\n toggleFAQ(faqItem);\n });\n });\n \n \/\/ \u042d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438\n document.querySelectorAll('.recommendation-item').forEach(item => {\n item.addEventListener('mouseenter', function() {\n this.style.transform = 'translateY(-5px)';\n this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.15)';\n });\n \n item.addEventListener('mouseleave', function() {\n this.style.transform = 'translateY(0)';\n this.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.08)';\n });\n });\n \n \/\/ \u042d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0418\u041c\u0422\n document.querySelectorAll('.bmi-category-item').forEach(item => {\n item.addEventListener('mouseenter', function() {\n this.style.transform = 'translateY(-5px) scale(1.05)';\n });\n \n item.addEventListener('mouseleave', function() {\n this.style.transform = 'translateY(0) scale(1)';\n });\n });\n \n \/\/ \u042d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 FAQ\n document.querySelectorAll('.faq-item').forEach(item => {\n item.addEventListener('mouseenter', function() {\n this.style.borderColor = '#667eea';\n this.style.boxShadow = '0 5px 15px rgba(102, 126, 234, 0.1)';\n });\n \n item.addEventListener('mouseleave', function() {\n this.style.borderColor = '#e0e0e0';\n this.style.boxShadow = 'none';\n });\n });\n \n \/\/ \u0410\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043e\u043a\u043d\u0430\n function checkTableVisibility() {\n const mobileTable = document.querySelector('.mobile-food-table');\n const desktopTable = document.querySelector('.food-table-container');\n \n if (window.innerWidth <= 768) {\n \/\/ \u041d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e\n if (mobileTable) mobileTable.style.display = 'flex';\n if (desktopTable) desktopTable.style.display = 'none';\n } else {\n \/\/ \u041d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430\u0445 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e\n if (mobileTable) mobileTable.style.display = 'none';\n if (desktopTable) desktopTable.style.display = 'block';\n }\n }\n \n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043e\u043a\u043d\u0430\n checkTableVisibility();\n window.addEventListener('resize', checkTableVisibility);\n });\n \n \/\/ \u041f\u0440\u043e\u0441\u0442\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432\n function animateElements() {\n const elements = document.querySelectorAll('.simple-card, .recommendation-item, .faq-item');\n \n elements.forEach((element, index) => {\n setTimeout(() => {\n element.style.opacity = '0';\n element.style.transform = 'translateY(20px)';\n \n setTimeout(() => {\n element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';\n element.style.opacity = '1';\n element.style.transform = 'translateY(0)';\n }, 50);\n }, index * 100);\n });\n }\n \n \/\/ \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438\n window.addEventListener('load', animateElements);\n \n \/\/ \u0417\u0430\u043a\u0440\u044b\u0442\u0438\u0435 FAQ \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u0432\u043d\u0435 \u0438\u0445\n document.addEventListener('click', function(event) {\n const isFaqClick = event.target.closest('.faq-item');\n \n if (!isFaqClick) {\n \/\/ \u0417\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432\u0441\u0435 FAQ\n document.querySelectorAll('.faq-item').forEach(item => {\n item.querySelector('.faq-answer').classList.remove('show');\n item.querySelector('.faq-toggle').classList.remove('rotate');\n });\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0435\u0441\u0430 \u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0435\u0441\u0430 \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0432\u0430\u0448 \u0437\u0434\u043e\u0440\u043e\u0432\u044b\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0432\u0435\u0441\u0430 \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430, \u0440\u043e\u0441\u0442\u0430 \u0438 \u043f\u043e\u043b\u0430 \u041c\u043e\u043b\u043e\u0434\u043e\u0439 (25) \u0421\u0440\u0435\u0434\u043d\u0438\u0439 (40) \u0417\u0440\u0435\u043b\u044b\u0439 (60) \u0412\u0430\u0436\u043d\u043e: \u0421 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u043e\u043c \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0441 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 0.5-1 \u043a\u0433 \u0437\u0430 10 \u043b\u0435\u0442 \u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u041f\u043e\u043b \u041c\u0443\u0436\u0447\u0438\u043d\u0430 \u0416\u0435\u043d\u0449\u0438\u043d\u0430 \u0412\u043e\u0437\u0440\u0430\u0441\u0442 (\u043b\u0435\u0442) \u043b\u0435\u0442 \u0412\u043e\u0437\u0440\u0430\u0441\u0442 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043c\u0435\u0442\u0430\u0431\u043e\u043b\u0438\u0437\u043c \u0438 \u043d\u043e\u0440\u043c\u0443 \u0432\u0435\u0441\u0430 \u0420\u043e\u0441\u0442 \u0441\u043c \u0422\u0435\u043a\u0443\u0449\u0438\u0439…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-28","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages\/28","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/gestro.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=28"}],"version-history":[{"count":27,"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages\/28\/revisions"}],"predecessor-version":[{"id":426,"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages\/28\/revisions\/426"}],"wp:attachment":[{"href":"http:\/\/gestro.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":28,"date":"2025-12-26T04:56:59","date_gmt":"2025-12-26T01:56:59","guid":{"rendered":"http:\/\/gestro.ru\/?page_id=28"},"modified":"2026-01-16T05:30:46","modified_gmt":"2026-01-16T02:30:46","slug":"28-2","status":"publish","type":"page","link":"http:\/\/gestro.ru\/?page_id=28","title":{"rendered":"\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0432\u0435\u0441\u0430"},"content":{"rendered":"\n\n\n\n \n \n \u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0435\u0441\u0430<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: #333;\n line-height: 1.6;\n min-height: 100vh;\n padding: 20px;\n }\n \n .container {\n max-width: 1200px;\n margin: 0 auto;\n }\n \n .header {\n text-align: center;\n padding: 40px 20px;\n margin-bottom: 30px;\n background: rgba(255, 255, 255, 0.95);\n border-radius: 20px;\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);\n }\n \n h1 {\n font-size: 2.8rem;\n margin-bottom: 15px;\n background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n \n .subtitle {\n font-size: 1.2rem;\n color: #666;\n max-width: 700px;\n margin: 0 auto 20px;\n }\n \n .calculator-container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 30px;\n margin-bottom: 50px;\n }\n \n @media (max-width: 992px) {\n .calculator-container {\n grid-template-columns: 1fr;\n }\n }\n \n .calculator-card {\n background: white;\n border-radius: 20px;\n padding: 40px;\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);\n height: fit-content;\n }\n \n .results-card {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n color: white;\n }\n \n h2 {\n font-size: 2rem;\n margin-bottom: 25px;\n color: #333;\n display: flex;\n align-items: center;\n gap: 15px;\n }\n \n .results-card h2 {\n color: white;\n }\n \n .input-group {\n margin-bottom: 25px;\n }\n \n label {\n display: block;\n margin-bottom: 10px;\n font-weight: 600;\n color: #555;\n font-size: 1.1rem;\n }\n \n .input-with-unit {\n position: relative;\n }\n \n input, select {\n width: 100%;\n padding: 16px 20px;\n border: 2px solid #e0e0e0;\n border-radius: 12px;\n font-size: 1.1rem;\n transition: border-color 0.3s ease;\n background: white;\n color: #333;\n }\n \n input[type=\"number\"] {\n -moz-appearance: textfield;\n }\n \n input[type=\"number\"]::-webkit-outer-spin-button,\n input[type=\"number\"]::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n \n input:focus, select:focus {\n outline: none;\n border-color: #667eea;\n box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n }\n \n .unit {\n position: absolute;\n right: 15px;\n top: 50%;\n transform: translateY(-50%);\n color: #888;\n font-weight: 600;\n pointer-events: none;\n }\n \n .gender-selection {\n display: flex;\n gap: 20px;\n margin-top: 10px;\n }\n \n .gender-option {\n flex: 1;\n text-align: center;\n padding: 18px;\n border: 2px solid #e0e0e0;\n border-radius: 12px;\n cursor: pointer;\n transition: all 0.3s ease;\n font-weight: 600;\n color: #555;\n }\n \n .gender-option:hover {\n border-color: #667eea;\n background: rgba(102, 126, 234, 0.05);\n }\n \n .gender-option.selected {\n border-color: #667eea;\n background: rgba(102, 126, 234, 0.1);\n color: #667eea;\n }\n \n .calculate-button {\n width: 100%;\n padding: 18px;\n background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: none;\n border-radius: 12px;\n font-size: 1.2rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n margin-top: 10px;\n box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);\n }\n \n .calculate-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 12px 25px rgba(102, 126, 234, 0.4);\n }\n \n .results-container {\n padding: 10px;\n }\n \n .result-value {\n font-size: 3.5rem;\n font-weight: 800;\n text-align: center;\n margin: 20px 0;\n text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n }\n \n .result-label {\n text-align: center;\n font-size: 1.3rem;\n margin-bottom: 30px;\n opacity: 0.9;\n }\n \n .result-details {\n background: rgba(255, 255, 255, 0.15);\n border-radius: 15px;\n padding: 25px;\n margin-bottom: 25px;\n }\n \n .result-row {\n display: flex;\n justify-content: space-between;\n margin-bottom: 15px;\n padding-bottom: 15px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n }\n \n .result-row:last-child {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n \n .age-influence {\n margin: 15px 0;\n padding: 12px;\n background: rgba(255, 255, 255, 0.1);\n border-radius: 10px;\n font-size: 0.9rem;\n text-align: center;\n }\n \n .progress-container {\n margin: 30px 0;\n }\n \n .progress-label {\n display: flex;\n justify-content: space-between;\n margin-bottom: 10px;\n font-weight: 600;\n }\n \n .progress-bar {\n height: 25px;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 12px;\n overflow: hidden;\n }\n \n .progress-fill {\n height: 100%;\n background: white;\n border-radius: 12px;\n width: 50%;\n transition: width 1s ease;\n }\n \n .weight-category {\n text-align: center;\n padding: 15px;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 12px;\n margin-top: 20px;\n font-weight: 600;\n font-size: 1.2rem;\n }\n \n .weight-category.underweight {\n color: #4fc3f7;\n background: rgba(79, 195, 247, 0.2);\n }\n \n .weight-category.normal {\n color: #81c784;\n background: rgba(129, 199, 132, 0.2);\n }\n \n .weight-category.overweight {\n color: #ffb74d;\n background: rgba(255, 183, 77, 0.2);\n }\n \n .weight-category.obese {\n color: #8B0000;\n background: rgba(229, 115, 115, 0.2);\n }\n \n .footer {\n text-align: center;\n padding: 40px 20px;\n margin-top: 50px;\n color: white;\n font-size: 0.9rem;\n opacity: 0.8;\n }\n \n .disclaimer {\n background: rgba(255, 255, 255, 0.1);\n padding: 20px;\n border-radius: 15px;\n margin-top: 30px;\n font-size: 0.9rem;\n }\n \n .example-buttons {\n display: flex;\n gap: 15px;\n margin-top: 20px;\n flex-wrap: wrap;\n }\n \n .example-button {\n padding: 12px 20px;\n background: #f0f0f0;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n font-weight: 600;\n color: #555;\n transition: all 0.3s ease;\n flex: 1;\n min-width: 120px;\n }\n \n .example-button:hover {\n background: #e0e0e0;\n transform: translateY(-2px);\n }\n \n @media (max-width: 768px) {\n h1 {\n font-size: 2.2rem;\n }\n \n .calculator-card {\n padding: 25px;\n }\n \n .gender-selection {\n flex-direction: column;\n }\n }\n \n .pulse {\n animation: pulse 2s infinite;\n }\n \n @keyframes pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n 100% { transform: scale(1); }\n }\n \n .result-emoji {\n font-size: 4rem;\n text-align: center;\n margin-bottom: 20px;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header class=\"header\">\n <h1><i class=\"fas fa-weight-scale\"><\/i> \u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0435\u0441\u0430<\/h1>\n <p class=\"subtitle\">\u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0432\u0430\u0448 \u0437\u0434\u043e\u0440\u043e\u0432\u044b\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0432\u0435\u0441\u0430 \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430, \u0440\u043e\u0441\u0442\u0430 \u0438 \u043f\u043e\u043b\u0430<\/p>\n \n <div class=\"example-buttons\">\n <button class=\"example-button\" onclick=\"loadExample(0)\">\u041c\u043e\u043b\u043e\u0434\u043e\u0439 (25)<\/button>\n <button class=\"example-button\" onclick=\"loadExample(1)\">\u0421\u0440\u0435\u0434\u043d\u0438\u0439 (40)<\/button>\n <button class=\"example-button\" onclick=\"loadExample(2)\">\u0417\u0440\u0435\u043b\u044b\u0439 (60)<\/button>\n <\/div>\n \n <div class=\"disclaimer\">\n <p><strong>\u0412\u0430\u0436\u043d\u043e:<\/strong> \u0421 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u043e\u043c \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0441 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 0.5-1 \u043a\u0433 \u0437\u0430 10 \u043b\u0435\u0442<\/p>\n <\/div>\n <\/header>\n \n <div class=\"calculator-container\">\n <div class=\"calculator-card\">\n <h2><i class=\"fas fa-calculator\"><\/i> \u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0434\u0430\u043d\u043d\u044b\u0435<\/h2>\n \n <div class=\"input-group\">\n <label>\u041f\u043e\u043b<\/label>\n <div class=\"gender-selection\">\n <div class=\"gender-option selected\" onclick=\"selectGender('male')\">\n <i class=\"fas fa-mars\"><\/i> \u041c\u0443\u0436\u0447\u0438\u043d\u0430\n <\/div>\n <div class=\"gender-option\" onclick=\"selectGender('female')\">\n <i class=\"fas fa-venus\"><\/i> \u0416\u0435\u043d\u0449\u0438\u043d\u0430\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"input-group\">\n <label>\u0412\u043e\u0437\u0440\u0430\u0441\u0442 (\u043b\u0435\u0442)<\/label>\n <div class=\"input-with-unit\">\n <input type=\"number\" id=\"age\" value=\"30\" min=\"18\" max=\"120\">\n <span class=\"unit\">\u043b\u0435\u0442<\/span>\n <\/div>\n <div style=\"font-size: 0.9rem; color: #666; margin-top: 8px;\">\n <i class=\"fas fa-info-circle\"><\/i> \u0412\u043e\u0437\u0440\u0430\u0441\u0442 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043c\u0435\u0442\u0430\u0431\u043e\u043b\u0438\u0437\u043c \u0438 \u043d\u043e\u0440\u043c\u0443 \u0432\u0435\u0441\u0430\n <\/div>\n <\/div>\n \n <div class=\"input-group\">\n <label>\u0420\u043e\u0441\u0442<\/label>\n <div class=\"input-with-unit\">\n <input type=\"number\" id=\"height\" value=\"170\" min=\"100\" max=\"250\">\n <span class=\"unit\">\u0441\u043c<\/span>\n <\/div>\n <\/div>\n \n <div class=\"input-group\">\n <label>\u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u0432\u0435\u0441<\/label>\n <div class=\"input-with-unit\">\n <input type=\"number\" id=\"currentWeight\" value=\"75\" min=\"30\" max=\"300\" step=\"0.1\">\n <span class=\"unit\">\u043a\u0433<\/span>\n <\/div>\n <\/div>\n \n <div class=\"input-group\">\n <label>\u0422\u0438\u043f \u0442\u0435\u043b\u043e\u0441\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/label>\n <select id=\"bodyType\">\n <option value=\"medium\" selected>\u0421\u0440\u0435\u0434\u043d\u0435\u0435<\/option>\n <option value=\"thin\">\u0425\u0443\u0434\u043e\u0449\u0430\u0432\u043e\u0435<\/option>\n <option value=\"broad\">\u0428\u0438\u0440\u043e\u043a\u043e\u043a\u043e\u0441\u0442\u043d\u043e\u0435<\/option>\n <\/select>\n <\/div>\n \n <button class=\"calculate-button pulse\" onclick=\"calculateWeight()\">\n <i class=\"fas fa-calculator\"><\/i> \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c\n <\/button>\n \n <div style=\"margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 12px;\">\n <h3 style=\"color: #667eea; margin-bottom: 10px;\"><i class=\"fas fa-lightbulb\"><\/i> \u041a\u0430\u043a \u0432\u043e\u0437\u0440\u0430\u0441\u0442 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0432\u0435\u0441?<\/h3>\n <p style=\"font-size: 0.9rem; color: #666;\">\u041f\u043e\u0441\u043b\u0435 30 \u043b\u0435\u0442 \u043c\u0435\u0442\u0430\u0431\u043e\u043b\u0438\u0437\u043c \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 1-2% \u043a\u0430\u0436\u0434\u044b\u0435 10 \u043b\u0435\u0442. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u043e\u043c \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0441 \u043c\u043e\u0436\u0435\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"calculator-card results-card\">\n <h2><i class=\"fas fa-chart-line\"><\/i> \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b<\/h2>\n \n <div class=\"results-container\">\n <div id=\"result-emoji\" class=\"result-emoji\">\u2696\ufe0f<\/div>\n <div id=\"result-value\" class=\"result-value\">70 \u043a\u0433<\/div>\n <div id=\"result-label\" class=\"result-label\">\u0418\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0441 \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430<\/div>\n \n <div class=\"result-details\">\n <div class=\"result-row\">\n <span>\u0418\u043d\u0434\u0435\u043a\u0441 \u043c\u0430\u0441\u0441\u044b \u0442\u0435\u043b\u0430 (\u0418\u041c\u0422):<\/span>\n <span id=\"bmi-value\">25.9<\/span>\n <\/div>\n <div class=\"result-row\">\n <span>\u0417\u0434\u043e\u0440\u043e\u0432\u044b\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0432\u0435\u0441\u0430:<\/span>\n <span id=\"weight-range\">53 — 72 \u043a\u0433<\/span>\n <\/div>\n <div class=\"result-row\">\n <span>\u0418\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0441 (\u0411\u0440\u043e\u043a\u0430):<\/span>\n <span id=\"broca-weight\">70 \u043a\u0433<\/span>\n <\/div>\n <div class=\"result-row\">\n <span>\u0418\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0441 (\u041b\u043e\u0440\u0435\u043d\u0446\u0430):<\/span>\n <span id=\"lorentz-weight\">70 \u043a\u0433<\/span>\n <\/div>\n <div class=\"result-row\">\n <span>\u0411\u0430\u0437\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u0442\u0430\u0431\u043e\u043b\u0438\u0437\u043c:<\/span>\n <span id=\"bmr-value\">1680 \u043a\u043a\u0430\u043b\/\u0434\u0435\u043d\u044c<\/span>\n <\/div>\n <\/div>\n \n <div id=\"age-influence\" class=\"age-influence\">\n <i class=\"fas fa-user-clock\"><\/i> \u0412\u043e\u0437\u0440\u0430\u0441\u0442\u043d\u0430\u044f \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u0430: <span id=\"age-correction\">0 \u043a\u0433<\/span>\n <\/div>\n \n <div class=\"progress-container\">\n <div class=\"progress-label\">\n <span>\u0412\u0430\u0448 \u0432\u0435\u0441 \u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435:<\/span>\n <span id=\"progress-percent\">50%<\/span>\n <\/div>\n <div class=\"progress-bar\">\n <div id=\"progress-fill\" class=\"progress-fill\" style=\"width: 50%;\"><\/div>\n <\/div>\n <\/div>\n \n <div id=\"weight-category\" class=\"weight-category normal\">\n \u041d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0441\n <\/div>\n \n <div style=\"margin-top: 25px; padding: 15px; background: rgba(255,255,255,0.1); border-radius: 12px;\">\n <div style=\"font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 10px;\">\n <i class=\"fas fa-running\"><\/i> \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0443\n <\/div>\n <div id=\"age-recommendation\" style=\"font-size: 0.95rem;\">\n \u0414\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0443\u043c\u0435\u0440\u0435\u043d\u043d\u0430\u044f \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <script>\n \/\/ \u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0432\u0435\u0441\u0430 \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430\n let selectedGender = 'male';\n \n function selectGender(gender) {\n selectedGender = gender;\n document.querySelectorAll('.gender-option').forEach(option => {\n option.classList.remove('selected');\n });\n event.target.classList.add('selected');\n calculateWeight();\n }\n \n function calculateWeight() {\n \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\n const age = parseFloat(document.getElementById('age').value) || 30;\n const height = parseFloat(document.getElementById('height').value) || 170;\n const currentWeight = parseFloat(document.getElementById('currentWeight').value) || 75;\n const bodyType = document.getElementById('bodyType').value;\n \n \/\/ 1. \u0412\u043e\u0437\u0440\u0430\u0441\u0442\u043d\u0430\u044f \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u0430 (\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u0435\u0441 \u0441 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u043e\u043c)\n let ageCorrection = 0;\n if (age > 30) {\n \/\/ \u041f\u043e\u0441\u043b\u0435 30 \u043b\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c 0.5 \u043a\u0433 \u0437\u0430 \u043a\u0430\u0436\u0434\u044b\u0435 10 \u043b\u0435\u0442\n ageCorrection = Math.round((age - 30) \/ 10 * 0.5);\n }\n \n \/\/ 2. \u0424\u043e\u0440\u043c\u0443\u043b\u0430 \u0411\u0440\u043e\u043a\u0430 \u0441 \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u043d\u0430 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\n let brocaWeight;\n if (selectedGender === 'male') {\n brocaWeight = height - 100;\n } else {\n brocaWeight = height - 110;\n }\n \n \/\/ \u041a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u043f\u043e \u0442\u0438\u043f\u0443 \u0442\u0435\u043b\u043e\u0441\u043b\u043e\u0436\u0435\u043d\u0438\u044f\n if (bodyType === 'thin') brocaWeight *= 0.9;\n if (bodyType === 'broad') brocaWeight *= 1.1;\n \n \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u043d\u0443\u044e \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u0443\n brocaWeight += ageCorrection;\n brocaWeight = Math.round(brocaWeight);\n \n \/\/ 3. \u0424\u043e\u0440\u043c\u0443\u043b\u0430 \u041b\u043e\u0440\u0435\u043d\u0446\u0430 \u0441 \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u043d\u0430 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\n let lorentzWeight;\n if (selectedGender === 'male') {\n lorentzWeight = height - 100 - (height - 150) \/ 4;\n } else {\n lorentzWeight = height - 100 - (height - 150) \/ 2;\n }\n \n \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u043d\u0443\u044e \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u0443\n lorentzWeight += ageCorrection;\n lorentzWeight = Math.round(lorentzWeight);\n \n \/\/ 4. \u0414\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u043f\u043e \u0418\u041c\u0422 \u0441 \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u043d\u0430 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\n const heightM = height \/ 100;\n let minWeight = Math.round(18.5 * heightM * heightM);\n let maxWeight = Math.round(24.9 * heightM * heightM);\n \n \/\/ \u0421 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u043e\u043c \u0432\u0435\u0440\u0445\u043d\u044f\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f\n if (age > 40) {\n maxWeight = Math.round(maxWeight * (1 + (age - 40) * 0.005));\n }\n \n \/\/ 5. \u0418\u041c\u0422\n const bmi = (currentWeight \/ (heightM * heightM)).toFixed(1);\n \n \/\/ 6. \u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u043c\u0435\u0442\u0430\u0431\u043e\u043b\u0438\u0437\u043c (\u0441\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430!)\n let bmr;\n if (selectedGender === 'male') {\n bmr = Math.round(10 * currentWeight + 6.25 * height - 5 * age + 5);\n } else {\n bmr = Math.round(10 * currentWeight + 6.25 * height - 5 * age - 161);\n }\n \n \/\/ 7. \u0421\u0440\u0435\u0434\u043d\u0438\u0439 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0441\n const avgWeight = Math.round((brocaWeight + lorentzWeight) \/ 2);\n \n \/\/ 8. \u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f \u0432\u0435\u0441\u0430 (\u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430)\n let weightCategory = 'normal';\n let emoji = '\u2705';\n \n \/\/ \u0414\u043b\u044f \u043f\u043e\u0436\u0438\u043b\u044b\u0445 \u043b\u044e\u0434\u0435\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0432\u044b\u0448\u0435\n let adjustedMinWeight = minWeight;\n let adjustedMaxWeight = maxWeight;\n \n if (age >= 65) {\n adjustedMinWeight = Math.round(minWeight * 1.05);\n adjustedMaxWeight = Math.round(maxWeight * 1.08);\n } else if (age >= 50) {\n adjustedMinWeight = Math.round(minWeight * 1.03);\n adjustedMaxWeight = Math.round(maxWeight * 1.05);\n }\n \n if (currentWeight < adjustedMinWeight) {\n weightCategory = 'underweight';\n emoji = '\ud83d\udcc9';\n } else if (currentWeight > adjustedMaxWeight) {\n if (parseFloat(bmi) >= 30) {\n weightCategory = 'obese';\n } else {\n weightCategory = 'overweight';\n }\n emoji = '\ud83d\udcc8';\n }\n \n \/\/ 9. \u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0431\u0430\u0440\n let progressPercent = 50;\n if (currentWeight < adjustedMinWeight) {\n progressPercent = (currentWeight \/ adjustedMinWeight) * 50;\n } else if (currentWeight > adjustedMaxWeight) {\n progressPercent = 50 + ((currentWeight - adjustedMaxWeight) \/ (adjustedMaxWeight * 0.5)) * 50;\n if (progressPercent > 100) progressPercent = 100;\n } else {\n progressPercent = 50 + ((currentWeight - adjustedMinWeight) \/ (adjustedMaxWeight - adjustedMinWeight)) * 50;\n }\n \n \/\/ 10. \u0412\u043e\u0437\u0440\u0430\u0441\u0442\u043d\u044b\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438\n let ageRecommendation = '';\n if (age < 30) {\n ageRecommendation = '\u0412 \u043c\u043e\u043b\u043e\u0434\u043e\u043c \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0435 \u043c\u0435\u0442\u0430\u0431\u043e\u043b\u0438\u0437\u043c \u0431\u044b\u0441\u0442\u0440\u044b\u0439, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0437 \u0436\u0438\u0437\u043d\u0438 \u0438 \u0441\u0438\u043b\u043e\u0432\u044b\u0435 \u0442\u0440\u0435\u043d\u0438\u0440\u043e\u0432\u043a\u0438.';\n } else if (age < 50) {\n ageRecommendation = '\u0412 \u0441\u0440\u0435\u0434\u043d\u0435\u043c \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0435 \u0432\u0430\u0436\u043d\u043e \u0441\u043e\u0447\u0435\u0442\u0430\u0442\u044c \u043a\u0430\u0440\u0434\u0438\u043e \u0438 \u0441\u0438\u043b\u043e\u0432\u044b\u0435 \u0442\u0440\u0435\u043d\u0438\u0440\u043e\u0432\u043a\u0438, \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u043f\u0438\u0442\u0430\u043d\u0438\u0435\u043c.';\n } else {\n ageRecommendation = '\u0412 \u0437\u0440\u0435\u043b\u043e\u043c \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0435 \u0432\u0430\u0436\u043d\u044b \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0443\u043c\u0435\u0440\u0435\u043d\u043d\u044b\u0435 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0440\u0430\u0441\u0442\u044f\u0436\u043a\u0430 \u0438 \u0441\u0431\u0430\u043b\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043f\u0438\u0442\u0430\u043d\u0438\u0435.';\n }\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\n document.getElementById('result-value').textContent = avgWeight + ' \u043a\u0433';\n document.getElementById('bmi-value').textContent = bmi;\n document.getElementById('weight-range').textContent = minWeight + ' - ' + maxWeight + ' \u043a\u0433';\n document.getElementById('broca-weight').textContent = brocaWeight + ' \u043a\u0433';\n document.getElementById('lorentz-weight').textContent = lorentzWeight + ' \u043a\u0433';\n document.getElementById('bmr-value').textContent = bmr + ' \u043a\u043a\u0430\u043b\/\u0434\u0435\u043d\u044c';\n document.getElementById('result-emoji').textContent = emoji;\n document.getElementById('progress-percent').textContent = Math.round(progressPercent) + '%';\n document.getElementById('progress-fill').style.width = progressPercent + '%';\n document.getElementById('age-correction').textContent = ageCorrection + ' \u043a\u0433';\n document.getElementById('age-recommendation').textContent = ageRecommendation;\n \n \/\/ \u0426\u0432\u0435\u0442 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441-\u0431\u0430\u0440\u0430\n const progressFill = document.getElementById('progress-fill');\n if (progressPercent < 40) {\n progressFill.style.background = '#4fc3f7';\n } else if (progressPercent <= 60) {\n progressFill.style.background = '#81c784';\n } else if (progressPercent <= 80) {\n progressFill.style.background = '#ffb74d';\n } else {\n progressFill.style.background = '#e57373';\n }\n \n \/\/ \u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\n const categoryElement = document.getElementById('weight-category');\n categoryElement.className = 'weight-category ' + weightCategory;\n \n let categoryText = '';\n switch(weightCategory) {\n case 'underweight':\n categoryText = '\u0414\u0435\u0444\u0438\u0446\u0438\u0442 \u043c\u0430\u0441\u0441\u044b \u0442\u0435\u043b\u0430';\n break;\n case 'normal':\n categoryText = '\u041d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0441';\n if (age > 50) categoryText += ' (\u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430)';\n break;\n case 'overweight':\n categoryText = '\u0418\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u0439 \u0432\u0435\u0441';\n break;\n case 'obese':\n categoryText = '\u041e\u0436\u0438\u0440\u0435\u043d\u0438\u0435';\n break;\n }\n categoryElement.textContent = categoryText;\n \n \/\/ \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u0443 \u0434\u043b\u044f \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430\n const ageInfluence = document.getElementById('age-influence');\n if (age > 30) {\n ageInfluence.style.display = 'block';\n ageInfluence.innerHTML = `<i class=\"fas fa-user-clock\"><\/i> \u0412\u043e\u0437\u0440\u0430\u0441\u0442\u043d\u0430\u044f \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u0430: <span id=\"age-correction\">+${ageCorrection} \u043a\u0433<\/span> (\u043f\u043e\u0441\u043b\u0435 30 \u043b\u0435\u0442)`;\n } else {\n ageInfluence.style.display = 'none';\n }\n }\n \n function loadExample(num) {\n const examples = [\n {gender: 'male', age: 25, height: 180, weight: 80},\n {gender: 'male', age: 40, height: 175, weight: 82},\n {gender: 'male', age: 60, height: 170, weight: 78}\n ];\n \n const ex = examples[num];\n \n \/\/ \u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u043e\u043b\n document.querySelectorAll('.gender-option').forEach(option => {\n option.classList.remove('selected');\n });\n document.querySelector('.gender-option:first-child').classList.add('selected');\n selectedGender = 'male';\n \n \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\n document.getElementById('age').value = ex.age;\n document.getElementById('height').value = ex.height;\n document.getElementById('currentWeight').value = ex.weight;\n \n calculateWeight();\n }\n \n \/\/ \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0430\u0441\u0447\u0435\u0442 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438\n document.addEventListener('DOMContentLoaded', function() {\n document.getElementById('age').addEventListener('input', calculateWeight);\n document.getElementById('height').addEventListener('input', calculateWeight);\n document.getElementById('currentWeight').addEventListener('input', calculateWeight);\n document.getElementById('bodyType').addEventListener('change', calculateWeight);\n \n \/\/ \u041f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0430\u0432\u0442\u043e\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\n document.querySelectorAll('input').forEach(input => {\n input.setAttribute('autocomplete', 'off');\n input.setAttribute('autocorrect', 'off');\n input.setAttribute('autocapitalize', 'off');\n input.setAttribute('spellcheck', 'false');\n });\n \n calculateWeight();\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"ru\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0435\u0441\u0430 | \u041f\u043e\u043b\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n \/* \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: #333;\n line-height: 1.6;\n min-height: 100vh;\n padding: 20px;\n }\n \n .container {\n max-width: 1200px;\n margin: 0 auto;\n }\n \n \/* \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 *\/\n .info-container {\n background: white;\n border-radius: 25px;\n padding: 40px;\n margin-top: 40px;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);\n }\n \n .info-header {\n text-align: center;\n margin-bottom: 40px;\n }\n \n .info-header h2 {\n font-size: 2.5rem;\n color: #2c3e50;\n margin-bottom: 15px;\n background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n \n .info-header p {\n font-size: 1.1rem;\n color: #666;\n max-width: 800px;\n margin: 0 auto;\n }\n \n \/* \u041f\u0440\u043e\u0441\u0442\u044b\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 *\/\n .simple-card {\n background: #f8f9fa;\n border-radius: 15px;\n padding: 25px;\n margin-bottom: 25px;\n border-left: 5px solid #667eea;\n }\n \n .simple-card h3 {\n color: #2c3e50;\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .simple-card p {\n color: #555;\n line-height: 1.7;\n }\n \n .bmi-categories {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 15px;\n margin: 30px 0;\n }\n \n .bmi-category-item {\n padding: 20px;\n border-radius: 12px;\n color: white;\n font-weight: 600;\n text-align: center;\n cursor: pointer;\n transition: transform 0.3s ease;\n }\n \n .bmi-category-item:hover {\n transform: translateY(-5px);\n }\n \n .underweight { background: #4fc3f7; }\n .normal { background: #81c784; }\n .overweight { background: #ffb74d; }\n .obese { background: #e57373; }\n \n .category-info {\n background: white;\n border: 2px solid #e0e0e0;\n border-radius: 15px;\n padding: 25px;\n margin-top: 20px;\n display: none;\n }\n \n .category-info.active {\n display: block;\n animation: fadeIn 0.5s ease;\n }\n \n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n \n \/* \u0421\u0435\u043a\u0446\u0438\u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0439 *\/\n .recommendations {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n margin: 40px 0;\n }\n \n .recommendation-item {\n background: white;\n border-radius: 15px;\n padding: 25px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);\n border: 2px solid transparent;\n transition: all 0.3s ease;\n }\n \n .recommendation-item:hover {\n border-color: #667eea;\n transform: translateY(-5px);\n }\n \n .recommendation-item h4 {\n color: #667eea;\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n \/* \u0422\u0410\u0411\u041b\u0418\u0426\u0410 \u041f\u0420\u041e\u0414\u0423\u041a\u0422\u041e\u0412 - \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041d\u0410\u042f \u0412\u0415\u0420\u0421\u0418\u042f *\/\n .food-table-container {\n overflow-x: auto;\n margin: 25px 0;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);\n }\n \n .food-table {\n width: 100%;\n border-collapse: collapse;\n min-width: 600px; \/* \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043e\u0432 *\/\n }\n \n .food-table th {\n background: #667eea;\n color: white;\n padding: 15px;\n text-align: left;\n font-weight: 600;\n }\n \n .food-table td {\n padding: 15px;\n border-bottom: 1px solid #e0e0e0;\n vertical-align: top;\n }\n \n .food-table tbody tr:hover {\n background: #f8f9fa;\n }\n \n .good { color: #81c784; font-weight: 600; }\n .moderate { color: #ffb74d; font-weight: 600; }\n .limit { color: #e57373; font-weight: 600; }\n \n \/* \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n .mobile-food-table {\n display: none;\n flex-direction: column;\n gap: 20px;\n margin: 25px 0;\n }\n \n .mobile-food-category {\n background: white;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);\n border: 1px solid #e0e0e0;\n }\n \n .mobile-category-header {\n background: #667eea;\n color: white;\n padding: 15px;\n font-weight: 600;\n font-size: 1.1rem;\n }\n \n .mobile-category-content {\n padding: 0;\n }\n \n .mobile-category-row {\n display: flex;\n border-bottom: 1px solid #e0e0e0;\n padding: 15px;\n align-items: flex-start;\n }\n \n .mobile-category-row:last-child {\n border-bottom: none;\n }\n \n .mobile-row-label {\n flex: 0 0 120px;\n font-weight: 600;\n color: #2c3e50;\n padding-right: 15px;\n }\n \n .mobile-row-value {\n flex: 1;\n line-height: 1.5;\n }\n \n \/* \u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 *\/\n .sources-section {\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n border-radius: 20px;\n padding: 30px;\n margin-top: 40px;\n }\n \n .sources-section h3 {\n text-align: center;\n color: #2c3e50;\n margin-bottom: 25px;\n }\n \n .sources-list {\n list-style: none;\n padding: 0;\n }\n \n .sources-list li {\n margin-bottom: 15px;\n padding: 15px;\n background: white;\n border-radius: 10px;\n border-left: 4px solid #667eea;\n }\n \n .sources-list a {\n color: #667eea;\n text-decoration: none;\n font-weight: 600;\n display: block;\n margin-bottom: 5px;\n }\n \n .sources-list a:hover {\n text-decoration: underline;\n }\n \n .source-description {\n color: #666;\n font-size: 0.95rem;\n }\n \n \/* \u0423\u041f\u0420\u041e\u0429\u0415\u041d\u041d\u042b\u0419 FAQ \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0420\u0410\u0411\u041e\u0422\u0410\u0415\u0422 *\/\n .simple-faq {\n margin-top: 40px;\n }\n \n .faq-title {\n color: #2c3e50;\n margin-bottom: 25px;\n text-align: center;\n font-size: 1.8rem;\n }\n \n .faq-item {\n background: white;\n border-radius: 10px;\n margin-bottom: 15px;\n overflow: hidden;\n border: 2px solid #e0e0e0;\n transition: all 0.3s ease;\n }\n \n .faq-item:hover {\n border-color: #667eea;\n }\n \n .faq-question {\n font-weight: 600;\n color: #2c3e50;\n padding: 20px;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: #f8f9fa;\n user-select: none;\n }\n \n .faq-question:hover {\n background: #f0f2ff;\n }\n \n .faq-answer {\n color: #555;\n line-height: 1.7;\n padding: 0 20px;\n max-height: 0;\n overflow: hidden;\n transition: all 0.3s ease;\n }\n \n .faq-answer.show {\n max-height: 500px;\n padding: 0 20px 20px 20px;\n animation: fadeIn 0.3s ease;\n }\n \n .faq-toggle {\n transition: transform 0.3s ease;\n font-size: 0.9rem;\n color: #667eea;\n }\n \n .faq-toggle.rotate {\n transform: rotate(180deg);\n }\n \n .footer {\n text-align: center;\n padding: 40px 20px;\n margin-top: 50px;\n color: white;\n font-size: 0.9rem;\n opacity: 0.9;\n }\n \n \/* \u041c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 *\/\n @media (max-width: 768px) {\n .info-container {\n padding: 25px 20px;\n }\n \n .info-header h2 {\n font-size: 2rem;\n }\n \n .bmi-categories {\n grid-template-columns: 1fr;\n }\n \n .recommendations {\n grid-template-columns: 1fr;\n }\n \n .simple-card {\n padding: 20px;\n }\n \n \/* \u041f\u0440\u044f\u0447\u0435\u043c \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n .food-table-container {\n display: none;\n }\n \n \/* \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u044b *\/\n .mobile-food-table {\n display: flex;\n }\n \n .mobile-category-row {\n flex-direction: column;\n padding: 12px 15px;\n }\n \n .mobile-row-label {\n flex: none;\n width: 100%;\n padding-right: 0;\n margin-bottom: 5px;\n font-size: 0.95rem;\n }\n \n .mobile-row-value {\n flex: none;\n width: 100%;\n font-size: 0.95rem;\n line-height: 1.5;\n }\n }\n \n @media (max-width: 480px) {\n .info-container {\n padding: 20px 15px;\n }\n \n .info-header h2 {\n font-size: 1.8rem;\n }\n \n .info-header p {\n font-size: 1rem;\n }\n \n .simple-card h3 {\n font-size: 1.3rem;\n }\n \n .mobile-category-header {\n padding: 12px;\n font-size: 1rem;\n }\n \n .mobile-category-row {\n padding: 10px 12px;\n }\n \n .mobile-row-label {\n font-size: 0.9rem;\n }\n \n .mobile-row-value {\n font-size: 0.9rem;\n }\n \n .sources-section {\n padding: 20px 15px;\n }\n }\n \n \/* \u0414\u043b\u044f \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0434\u0435\u043b\u0430\u0435\u043c \u0435\u0449\u0435 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u0435\u0435 *\/\n @media (max-width: 360px) {\n .mobile-category-row {\n padding: 8px 10px;\n }\n \n .good, .moderate, .limit {\n font-size: 0.85rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n \n <div class=\"info-container\">\n <div class=\"info-header\">\n <h2><i class=\"fas fa-book-medical\"><\/i> \u0418\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0437\u0434\u043e\u0440\u043e\u0432\u043e\u043c \u0432\u0435\u0441\u0435<\/h2>\n <p>\u041f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0435\u0441\u0430<\/p>\n <\/div>\n \n \n <div class=\"simple-card\">\n <h3><i class=\"fas fa-chart-bar\"><\/i> \u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0438\u043d\u0434\u0435\u043a\u0441\u0430 \u043c\u0430\u0441\u0441\u044b \u0442\u0435\u043b\u0430<\/h3>\n <p>\u0418\u041c\u0422 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0432\u0435\u0441 \u0432 \u043a\u0438\u043b\u043e\u0433\u0440\u0430\u043c\u043c\u0430\u0445, \u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043d\u0430 \u043a\u0432\u0430\u0434\u0440\u0430\u0442 \u0440\u043e\u0441\u0442\u0430 \u0432 \u043c\u0435\u0442\u0440\u0430\u0445<\/p>\n \n <div class=\"bmi-categories\">\n <div class=\"bmi-category-item underweight\" data-category=\"underweight\">\n \u0414\u0435\u0444\u0438\u0446\u0438\u0442<br><small>\u0418\u041c\u0422 < 18.5<\/small>\n <\/div>\n <div class=\"bmi-category-item normal\" data-category=\"normal\">\n \u041d\u043e\u0440\u043c\u0430<br><small>18.5 — 24.9<\/small>\n <\/div>\n <div class=\"bmi-category-item overweight\" data-category=\"overweight\">\n \u0418\u0437\u0431\u044b\u0442\u043e\u043a<br><small>25 — 29.9<\/small>\n <\/div>\n <div class=\"bmi-category-item obese\" data-category=\"obese\">\n \u041e\u0436\u0438\u0440\u0435\u043d\u0438\u0435<br><small>\u2265 30<\/small>\n <\/div>\n <\/div>\n \n <div id=\"category-info\" class=\"category-info\">\n <h4 id=\"category-title\">\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044e<\/h4>\n <p id=\"category-description\">\u041d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0430 \u043e\u0434\u043d\u0443 \u0438\u0437 \u0446\u0432\u0435\u0442\u043d\u044b\u0445 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439 \u0432\u044b\u0448\u0435, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438<\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"simple-card\">\n <h3><i class=\"fas fa-lightbulb\"><\/i> \u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438<\/h3>\n <p>\u041f\u0440\u043e\u0441\u0442\u044b\u0435 \u0441\u043e\u0432\u0435\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0437\u0434\u043e\u0440\u043e\u0432\u044b\u0439 \u0432\u0435\u0441<\/p>\n \n <div class=\"recommendations\">\n <div class=\"recommendation-item\">\n <h4><i class=\"fas fa-utensils\"><\/i> \u041f\u0438\u0442\u0430\u043d\u0438\u0435<\/h4>\n <p>\u2022 \u0415\u0448\u044c\u0442\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0432\u043e\u0449\u0435\u0439 \u0438 \u0444\u0440\u0443\u043a\u0442\u043e\u0432<\/p>\n <p>\u2022 \u0412\u044b\u0431\u0438\u0440\u0430\u0439\u0442\u0435 \u0446\u0435\u043b\u044c\u043d\u043e\u0437\u0435\u0440\u043d\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u044b<\/p>\n <p>\u2022 \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u044c\u0442\u0435 \u0441\u0430\u0445\u0430\u0440 \u0438 \u0441\u043e\u043b\u044c<\/p>\n <p>\u2022 \u041f\u0435\u0439\u0442\u0435 \u0432\u043e\u0434\u0443 \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u043b\u0430\u0434\u043a\u0438\u0445 \u043d\u0430\u043f\u0438\u0442\u043a\u043e\u0432<\/p>\n <\/div>\n \n <div class=\"recommendation-item\">\n <h4><i class=\"fas fa-running\"><\/i> \u0410\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/h4>\n <p>\u2022 150 \u043c\u0438\u043d\u0443\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0432 \u043d\u0435\u0434\u0435\u043b\u044e<\/p>\n <p>\u2022 \u0425\u043e\u0434\u0438\u0442\u0435 \u043f\u0435\u0448\u043a\u043e\u043c 30 \u043c\u0438\u043d\u0443\u0442 \u0432 \u0434\u0435\u043d\u044c<\/p>\n <p>\u2022 \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043b\u0435\u0441\u0442\u043d\u0438\u0446\u0443 \u0432\u043c\u0435\u0441\u0442\u043e \u043b\u0438\u0444\u0442\u0430<\/p>\n <p>\u2022 \u0414\u0435\u043b\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0440\u044b\u0432\u044b \u043f\u0440\u0438 \u0441\u0438\u0434\u044f\u0447\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0435<\/p>\n <\/div>\n \n <div class=\"recommendation-item\">\n <h4><i class=\"fas fa-heart\"><\/i> \u0417\u0434\u043e\u0440\u043e\u0432\u044c\u0435<\/h4>\n <p>\u2022 \u0421\u043f\u0438\u0442\u0435 7-8 \u0447\u0430\u0441\u043e\u0432 \u0432 \u0441\u0443\u0442\u043a\u0438<\/p>\n <p>\u2022 \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0439\u0442\u0435 \u0441\u0442\u0440\u0435\u0441\u0441<\/p>\n <p>\u2022 \u0420\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u0435 \u043e\u0441\u043c\u043e\u0442\u0440\u044b<\/p>\n <p>\u2022 \u0418\u0437\u043c\u0435\u0440\u044f\u0439\u0442\u0435 \u0432\u0435\u0441 1 \u0440\u0430\u0437 \u0432 \u043d\u0435\u0434\u0435\u043b\u044e<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"simple-card\">\n <h3><i class=\"fas fa-apple-alt\"><\/i> \u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0438 \u0432\u0440\u0435\u0434\u043d\u044b\u0435 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u044b \u043f\u0440\u0438 \u043b\u0438\u0448\u043d\u0435\u043c \u0432\u0435\u0441\u0435<\/h3>\n <p>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u0432\u044b\u0431\u043e\u0440\u0443<\/p>\n \n \n <div class=\"food-table-container\">\n <table class=\"food-table\">\n <thead>\n <tr>\n <th>\u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f<\/th>\n <th>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f<\/th>\n <th>\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c<\/th>\n <th>\u0418\u0437\u0431\u0435\u0433\u0430\u0442\u044c<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>\u0411\u0435\u043b\u043a\u0438<\/td>\n <td class=\"good\">\u041a\u0443\u0440\u0438\u0446\u0430, \u0440\u044b\u0431\u0430, \u0442\u043e\u0444\u0443, \u0431\u043e\u0431\u043e\u0432\u044b\u0435<\/td>\n <td class=\"moderate\">\u041a\u0440\u0430\u0441\u043d\u043e\u0435 \u043c\u044f\u0441\u043e, \u0441\u044b\u0440<\/td>\n <td class=\"limit\">\u041a\u043e\u043b\u0431\u0430\u0441\u044b, \u0441\u043e\u0441\u0438\u0441\u043a\u0438<\/td>\n <\/tr>\n <tr>\n <td>\u0423\u0433\u043b\u0435\u0432\u043e\u0434\u044b<\/td>\n <td class=\"good\">\u041a\u0440\u0443\u043f\u044b, \u0446\u0435\u043b\u044c\u043d\u043e\u0437\u0435\u0440\u043d\u043e\u0432\u043e\u0439 \u0445\u043b\u0435\u0431<\/td>\n <td class=\"moderate\">\u0411\u0435\u043b\u044b\u0439 \u0440\u0438\u0441, \u043a\u0430\u0440\u0442\u043e\u0444\u0435\u043b\u044c<\/td>\n <td class=\"limit\">\u0411\u0435\u043b\u044b\u0439 \u0445\u043b\u0435\u0431, \u0432\u044b\u043f\u0435\u0447\u043a\u0430<\/td>\n <\/tr>\n <tr>\n <td>\u0416\u0438\u0440\u044b<\/td>\n <td class=\"good\">\u041e\u043b\u0438\u0432\u043a\u043e\u0432\u043e\u0435 \u043c\u0430\u0441\u043b\u043e, \u0430\u0432\u043e\u043a\u0430\u0434\u043e, \u043e\u0440\u0435\u0445\u0438<\/td>\n <td class=\"moderate\">\u0421\u043b\u0438\u0432\u043e\u0447\u043d\u043e\u0435 \u043c\u0430\u0441\u043b\u043e<\/td>\n <td class=\"limit\">\u041c\u0430\u0440\u0433\u0430\u0440\u0438\u043d, \u0444\u0430\u0441\u0442\u0444\u0443\u0434<\/td>\n <\/tr>\n <tr>\n <td>\u041d\u0430\u043f\u0438\u0442\u043a\u0438<\/td>\n <td class=\"good\">\u0412\u043e\u0434\u0430, \u0447\u0430\u0439, \u043a\u043e\u0444\u0435 \u0431\u0435\u0437 \u0441\u0430\u0445\u0430\u0440\u0430<\/td>\n <td class=\"moderate\">\u0424\u0440\u0443\u043a\u0442\u043e\u0432\u044b\u0435 \u0441\u043e\u043a\u0438<\/td>\n <td class=\"limit\">\u0413\u0430\u0437\u0438\u0440\u043e\u0432\u043a\u0430, \u0430\u043b\u043a\u043e\u0433\u043e\u043b\u044c<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n \n \n <div class=\"mobile-food-table\">\n \n <div class=\"mobile-food-category\">\n <div class=\"mobile-category-header\">\u0411\u0435\u043b\u043a\u0438<\/div>\n <div class=\"mobile-category-content\">\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f<\/div>\n <div class=\"mobile-row-value good\">\u041a\u0443\u0440\u0438\u0446\u0430, \u0440\u044b\u0431\u0430, \u0442\u043e\u0444\u0443, \u0431\u043e\u0431\u043e\u0432\u044b\u0435<\/div>\n <\/div>\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c<\/div>\n <div class=\"mobile-row-value moderate\">\u041a\u0440\u0430\u0441\u043d\u043e\u0435 \u043c\u044f\u0441\u043e, \u0441\u044b\u0440<\/div>\n <\/div>\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u0418\u0437\u0431\u0435\u0433\u0430\u0442\u044c<\/div>\n <div class=\"mobile-row-value limit\">\u041a\u043e\u043b\u0431\u0430\u0441\u044b, \u0441\u043e\u0441\u0438\u0441\u043a\u0438<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mobile-food-category\">\n <div class=\"mobile-category-header\">\u0423\u0433\u043b\u0435\u0432\u043e\u0434\u044b<\/div>\n <div class=\"mobile-category-content\">\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f<\/div>\n <div class=\"mobile-row-value good\">\u041a\u0440\u0443\u043f\u044b, \u0446\u0435\u043b\u044c\u043d\u043e\u0437\u0435\u0440\u043d\u043e\u0432\u043e\u0439 \u0445\u043b\u0435\u0431<\/div>\n <\/div>\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c<\/div>\n <div class=\"mobile-row-value moderate\">\u0411\u0435\u043b\u044b\u0439 \u0440\u0438\u0441, \u043a\u0430\u0440\u0442\u043e\u0444\u0435\u043b\u044c<\/div>\n <\/div>\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u0418\u0437\u0431\u0435\u0433\u0430\u0442\u044c<\/div>\n <div class=\"mobile-row-value limit\">\u0411\u0435\u043b\u044b\u0439 \u0445\u043b\u0435\u0431, \u0432\u044b\u043f\u0435\u0447\u043a\u0430<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mobile-food-category\">\n <div class=\"mobile-category-header\">\u0416\u0438\u0440\u044b<\/div>\n <div class=\"mobile-category-content\">\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f<\/div>\n <div class=\"mobile-row-value good\">\u041e\u043b\u0438\u0432\u043a\u043e\u0432\u043e\u0435 \u043c\u0430\u0441\u043b\u043e, \u0430\u0432\u043e\u043a\u0430\u0434\u043e, \u043e\u0440\u0435\u0445\u0438<\/div>\n <\/div>\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c<\/div>\n <div class=\"mobile-row-value moderate\">\u0421\u043b\u0438\u0432\u043e\u0447\u043d\u043e\u0435 \u043c\u0430\u0441\u043b\u043e<\/div>\n <\/div>\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u0418\u0437\u0431\u0435\u0433\u0430\u0442\u044c<\/div>\n <div class=\"mobile-row-value limit\">\u041c\u0430\u0440\u0433\u0430\u0440\u0438\u043d, \u0444\u0430\u0441\u0442\u0444\u0443\u0434<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mobile-food-category\">\n <div class=\"mobile-category-header\">\u041d\u0430\u043f\u0438\u0442\u043a\u0438<\/div>\n <div class=\"mobile-category-content\">\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f<\/div>\n <div class=\"mobile-row-value good\">\u0412\u043e\u0434\u0430, \u0447\u0430\u0439, \u043a\u043e\u0444\u0435 \u0431\u0435\u0437 \u0441\u0430\u0445\u0430\u0440\u0430<\/div>\n <\/div>\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c<\/div>\n <div class=\"mobile-row-value moderate\">\u0424\u0440\u0443\u043a\u0442\u043e\u0432\u044b\u0435 \u0441\u043e\u043a\u0438<\/div>\n <\/div>\n <div class=\"mobile-category-row\">\n <div class=\"mobile-row-label\">\u0418\u0437\u0431\u0435\u0433\u0430\u0442\u044c<\/div>\n <div class=\"mobile-row-value limit\">\u0413\u0430\u0437\u0438\u0440\u043e\u0432\u043a\u0430, \u0430\u043b\u043a\u043e\u0433\u043e\u043b\u044c<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"sources-section\">\n <h3><i class=\"fas fa-external-link-alt\"><\/i> \u041f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438<\/h3>\n <p>\u042d\u0442\u0438 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043d\u0430\u0443\u0447\u043d\u043e \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438<\/p>\n \n <ul class=\"sources-list\">\n <li>\n <a href=\"https:\/\/www.who.int\/ru\/news-room\/fact-sheets\/detail\/healthy-diet\" target=\"_blank\">\n <i class=\"fas fa-external-link-alt\"><\/i> \u0412\u041e\u0417: \u0417\u0434\u043e\u0440\u043e\u0432\u043e\u0435 \u043f\u0438\u0442\u0430\u043d\u0438\u0435\n <\/a>\n <div class=\"source-description\">\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u043f\u0438\u0442\u0430\u043d\u0438\u044e \u043e\u0442 \u0412\u0441\u0435\u043c\u0438\u0440\u043d\u043e\u0439 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0434\u0440\u0430\u0432\u043e\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f<\/div>\n <\/li>\n <li>\n <a href=\"https:\/\/www.cdc.gov\/healthyweight\/healthy_eating\/index.html\" target=\"_blank\">\n <i class=\"fas fa-external-link-alt\"><\/i> CDC: \u0417\u0434\u043e\u0440\u043e\u0432\u043e\u0435 \u043f\u0438\u0442\u0430\u043d\u0438\u0435\n <\/a>\n <div class=\"source-description\">\u0426\u0435\u043d\u0442\u0440\u044b \u043f\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044e \u0437\u0430\u0431\u043e\u043b\u0435\u0432\u0430\u043d\u0438\u0439 \u0421\u0428\u0410 — \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u043f\u0438\u0442\u0430\u043d\u0438\u044e<\/div>\n <\/li>\n <li>\n <a href=\"https:\/\/www.nhs.uk\/live-well\/eat-well\/\" target=\"_blank\">\n <i class=\"fas fa-external-link-alt\"><\/i> NHS: \u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e \u043f\u0438\u0442\u0430\u043d\u0438\u044e\n <\/a>\n <div class=\"source-description\">\u041d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u043b\u0443\u0436\u0431\u0430 \u0437\u0434\u0440\u0430\u0432\u043e\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0412\u0435\u043b\u0438\u043a\u043e\u0431\u0440\u0438\u0442\u0430\u043d\u0438\u0438<\/div>\n <\/li>\n <li>\n <a href=\"https:\/\/www.heart.org\/en\/healthy-living\/healthy-eating\" target=\"_blank\">\n <i class=\"fas fa-external-link-alt\"><\/i> \u0410\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0430\u044f \u0430\u0441\u0441\u043e\u0446\u0438\u0430\u0446\u0438\u044f \u0441\u0435\u0440\u0434\u0446\u0430\n <\/a>\n <div class=\"source-description\">\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u043f\u0438\u0442\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u044f \u0441\u0435\u0440\u0434\u0446\u0430<\/div>\n <\/li>\n <\/ul>\n <\/div>\n \n \n <div class=\"simple-faq\">\n <h3 class=\"faq-title\">\n <i class=\"fas fa-question-circle\"><\/i> \u0427\u0430\u0441\u0442\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b\n <\/h3>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\">\n \u041a\u0430\u043a \u0447\u0430\u0441\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0432\u0437\u0432\u0435\u0448\u0438\u0432\u0430\u0442\u044c\u0441\u044f?\n <i class=\"fas fa-chevron-down faq-toggle\"><\/i>\n <\/div>\n <div class=\"faq-answer\">\n \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0432\u0437\u0432\u0435\u0448\u0438\u0432\u0430\u0442\u044c\u0441\u044f 1 \u0440\u0430\u0437 \u0432 \u043d\u0435\u0434\u0435\u043b\u044e, \u0443\u0442\u0440\u043e\u043c \u043d\u0430\u0442\u043e\u0449\u0430\u043a, \u043f\u043e\u0441\u043b\u0435 \u0442\u0443\u0430\u043b\u0435\u0442\u0430. \u0415\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u044b\u0435 \u0432\u0437\u0432\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u043e\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0438\u0437-\u0437\u0430 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043b\u0435\u0431\u0430\u043d\u0438\u0439 \u0432\u0435\u0441\u0430 (\u0432\u043e\u0434\u0430, \u043f\u0438\u0449\u0430, \u0441\u043e\u043b\u044c).\n <\/div>\n <\/div>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\">\n \u041f\u043e\u0447\u0435\u043c\u0443 \u0418\u041c\u0422 \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0442\u043e\u0447\u0435\u043d?\n <i class=\"fas fa-chevron-down faq-toggle\"><\/i>\n <\/div>\n <div class=\"faq-answer\">\n \u0418\u041c\u0422 \u043d\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u043c\u044b\u0448\u0435\u0447\u043d\u0443\u044e \u043c\u0430\u0441\u0441\u0443, \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0436\u0438\u0440\u0430 \u0438 \u043f\u043b\u043e\u0442\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u0441\u0442\u0435\u0439. \u0421\u043f\u043e\u0440\u0442\u0441\u043c\u0435\u043d\u044b \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u0432\u044b\u0441\u043e\u043a\u0438\u0439 \u0418\u041c\u0422 \u0438\u0437-\u0437\u0430 \u043c\u044b\u0448\u0446. \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0437\u043c\u0435\u0440\u044f\u0439\u0442\u0435 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c \u0442\u0430\u043b\u0438\u0438 (\u0436\u0435\u043d\u0449\u0438\u043d\u044b < 80 \u0441\u043c, \u043c\u0443\u0436\u0447\u0438\u043d\u044b < 94 \u0441\u043c).\n <\/div>\n <\/div>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\">\n \u041a\u0430\u043a\u043e\u0439 \u0434\u0435\u0444\u0438\u0446\u0438\u0442 \u043a\u0430\u043b\u043e\u0440\u0438\u0439 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u0435\u043d?\n <i class=\"fas fa-chevron-down faq-toggle\"><\/i>\n <\/div>\n <div class=\"faq-answer\">\n \u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 \u0434\u0435\u0444\u0438\u0446\u0438\u0442 — 300-500 \u043a\u043a\u0430\u043b \u0432 \u0434\u0435\u043d\u044c, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043f\u043e\u0442\u0435\u0440\u0435 0.5-1 \u043a\u0433 \u0432 \u043d\u0435\u0434\u0435\u043b\u044e. \u0411\u043e\u043b\u044c\u0448\u0438\u0439 \u0434\u0435\u0444\u0438\u0446\u0438\u0442 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u043f\u043e\u0442\u0435\u0440\u0435 \u043c\u044b\u0448\u0435\u0447\u043d\u043e\u0439 \u043c\u0430\u0441\u0441\u044b, \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u044e \u043c\u0435\u0442\u0430\u0431\u043e\u043b\u0438\u0437\u043c\u0430 \u0438 \u0434\u0435\u0444\u0438\u0446\u0438\u0442\u0443 \u043f\u0438\u0442\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0432\u0435\u0449\u0435\u0441\u0442\u0432.\n <\/div>\n <\/div>\n \n <div class=\"faq-item\">\n <div class=\"faq-question\">\n \u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0441\u043b\u0438 \u0432\u0435\u0441 \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f?\n <i class=\"fas fa-chevron-down faq-toggle\"><\/i>\n <\/div>\n <div class=\"faq-answer\">\n \u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435: 1) \u0422\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u0441\u0447\u0435\u0442\u0430 \u043a\u0430\u043b\u043e\u0440\u0438\u0439, 2) \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043b\u0438 \u043f\u044c\u0435\u0442\u0435 \u0432\u043e\u0434\u044b (30 \u043c\u043b\/\u043a\u0433), 3) \u041a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u043d\u0430 (7-8 \u0447\u0430\u0441\u043e\u0432), 4) \u0423\u0440\u043e\u0432\u0435\u043d\u044c \u0441\u0442\u0440\u0435\u0441\u0441\u0430 (\u043a\u043e\u0440\u0442\u0438\u0437\u043e\u043b \u0437\u0430\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u043e\u0434\u0443), 5) \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043d\u0443\u0436\u0435\u043d \u043f\u0435\u0440\u0435\u0440\u044b\u0432 \u0432 \u0434\u0438\u0435\u0442\u0435 (\u043c\u0435\u0442\u0430\u0431\u043e\u043b\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u044f).\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"footer\">\n <p>\u00a9 2023 \u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0432\u0435\u0441\u0430. \u0418\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0432 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0446\u0435\u043b\u044f\u0445.<\/p>\n <p><i class=\"fas fa-exclamation-circle\"><\/i> \u0414\u043b\u044f \u043c\u0435\u0434\u0438\u0446\u0438\u043d\u0441\u043a\u0438\u0445 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0439 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435\u0441\u044c \u043a \u043a\u0432\u0430\u043b\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c\u0443 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0443.<\/p>\n <\/div>\n <\/div>\n \n <script>\n \/\/ \u041f\u043e\u043a\u0430\u0437 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u0445 \u0418\u041c\u0422\n function showCategoryInfo(category) {\n const infoElement = document.getElementById('category-info');\n const titleElement = document.getElementById('category-title');\n const descElement = document.getElementById('category-description');\n \n const categories = {\n 'underweight': {\n title: '\u0414\u0435\u0444\u0438\u0446\u0438\u0442 \u043c\u0430\u0441\u0441\u044b \u0442\u0435\u043b\u0430 (\u0418\u041c\u0422 < 18.5)',\n description: '\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u043a\u0430\u043b\u043e\u0440\u0438\u0439\u043d\u043e\u0441\u0442\u044c \u043f\u0438\u0442\u0430\u043d\u0438\u044f, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0431\u0435\u043b\u043a\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u044b \u0438 \u0441\u0438\u043b\u043e\u0432\u044b\u0435 \u0442\u0440\u0435\u043d\u0438\u0440\u043e\u0432\u043a\u0438. \u041a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u0446\u0438\u044f \u0441 \u0432\u0440\u0430\u0447\u043e\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043c\u0435\u0434\u0438\u0446\u0438\u043d\u0441\u043a\u0438\u0435 \u043f\u0440\u0438\u0447\u0438\u043d\u044b.'\n },\n 'normal': {\n title: '\u041d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0441 (\u0418\u041c\u0422 18.5 - 24.9)',\n description: '\u0418\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d. \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0432\u0435\u0441 \u0441\u0431\u0430\u043b\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043f\u0438\u0442\u0430\u043d\u0438\u0435\u043c \u0438 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0439 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u044e.'\n },\n 'overweight': {\n title: '\u0418\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u0439 \u0432\u0435\u0441 (\u0418\u041c\u0422 25 - 29.9)',\n description: '\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0443\u043c\u0435\u0440\u0435\u043d\u043d\u043e\u0435 \u0441\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u0432\u0435\u0441\u0430 (0.5 \u043a\u0433 \u0432 \u043d\u0435\u0434\u0435\u043b\u044e), \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043f\u0438\u0442\u0430\u043d\u0438\u044f.'\n },\n 'obese': {\n title: '\u041e\u0436\u0438\u0440\u0435\u043d\u0438\u0435 (\u0418\u041c\u0422 \u2265 30)',\n description: '\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u0446\u0438\u044f \u0441 \u0432\u0440\u0430\u0447\u043e\u043c, \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e\u0435 \u0441\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u0432\u0435\u0441\u0430 \u043f\u043e\u0434 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043e\u0431\u0440\u0430\u0437\u0430 \u0436\u0438\u0437\u043d\u0438.'\n }\n };\n \n titleElement.textContent = categories[category].title;\n descElement.textContent = categories[category].description;\n \n \/\/ \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e\n infoElement.classList.add('active');\n \n \/\/ \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u043a\u0440\u044b\u0442\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 15 \u0441\u0435\u043a\u0443\u043d\u0434\n setTimeout(() => {\n infoElement.classList.remove('active');\n }, 15000);\n }\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f FAQ\n function toggleFAQ(faqItem) {\n const answer = faqItem.querySelector('.faq-answer');\n const toggle = faqItem.querySelector('.faq-toggle');\n \n \/\/ \u0417\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432\u0441\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 FAQ\n document.querySelectorAll('.faq-item').forEach(item => {\n if (item !== faqItem) {\n item.querySelector('.faq-answer').classList.remove('show');\n item.querySelector('.faq-toggle').classList.remove('rotate');\n }\n });\n \n \/\/ \u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 FAQ\n answer.classList.toggle('show');\n toggle.classList.toggle('rotate');\n }\n \n \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435\n document.addEventListener('DOMContentLoaded', function() {\n console.log('\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u0430');\n \n \/\/ \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0435\u0441\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e\n setTimeout(() => {\n showCategoryInfo('normal');\n }, 1000);\n \n \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043b\u044f \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439 \u0418\u041c\u0422\n document.querySelectorAll('.bmi-category-item').forEach(item => {\n item.addEventListener('click', function() {\n const category = this.getAttribute('data-category');\n if (category) {\n showCategoryInfo(category);\n }\n });\n });\n \n \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043b\u044f FAQ - \u041f\u0420\u041e\u0421\u0422\u041e\u0419 \u0438 \u0420\u0410\u0411\u041e\u0427\u0418\u0419 \u043f\u043e\u0434\u0445\u043e\u0434\n document.querySelectorAll('.faq-question').forEach(question => {\n question.addEventListener('click', function() {\n const faqItem = this.closest('.faq-item');\n toggleFAQ(faqItem);\n });\n });\n \n \/\/ \u042d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438\n document.querySelectorAll('.recommendation-item').forEach(item => {\n item.addEventListener('mouseenter', function() {\n this.style.transform = 'translateY(-5px)';\n this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.15)';\n });\n \n item.addEventListener('mouseleave', function() {\n this.style.transform = 'translateY(0)';\n this.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.08)';\n });\n });\n \n \/\/ \u042d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u0418\u041c\u0422\n document.querySelectorAll('.bmi-category-item').forEach(item => {\n item.addEventListener('mouseenter', function() {\n this.style.transform = 'translateY(-5px) scale(1.05)';\n });\n \n item.addEventListener('mouseleave', function() {\n this.style.transform = 'translateY(0) scale(1)';\n });\n });\n \n \/\/ \u042d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 FAQ\n document.querySelectorAll('.faq-item').forEach(item => {\n item.addEventListener('mouseenter', function() {\n this.style.borderColor = '#667eea';\n this.style.boxShadow = '0 5px 15px rgba(102, 126, 234, 0.1)';\n });\n \n item.addEventListener('mouseleave', function() {\n this.style.borderColor = '#e0e0e0';\n this.style.boxShadow = 'none';\n });\n });\n \n \/\/ \u0410\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043e\u043a\u043d\u0430\n function checkTableVisibility() {\n const mobileTable = document.querySelector('.mobile-food-table');\n const desktopTable = document.querySelector('.food-table-container');\n \n if (window.innerWidth <= 768) {\n \/\/ \u041d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e\n if (mobileTable) mobileTable.style.display = 'flex';\n if (desktopTable) desktopTable.style.display = 'none';\n } else {\n \/\/ \u041d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430\u0445 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e\n if (mobileTable) mobileTable.style.display = 'none';\n if (desktopTable) desktopTable.style.display = 'block';\n }\n }\n \n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043e\u043a\u043d\u0430\n checkTableVisibility();\n window.addEventListener('resize', checkTableVisibility);\n });\n \n \/\/ \u041f\u0440\u043e\u0441\u0442\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432\n function animateElements() {\n const elements = document.querySelectorAll('.simple-card, .recommendation-item, .faq-item');\n \n elements.forEach((element, index) => {\n setTimeout(() => {\n element.style.opacity = '0';\n element.style.transform = 'translateY(20px)';\n \n setTimeout(() => {\n element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';\n element.style.opacity = '1';\n element.style.transform = 'translateY(0)';\n }, 50);\n }, index * 100);\n });\n }\n \n \/\/ \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438\n window.addEventListener('load', animateElements);\n \n \/\/ \u0417\u0430\u043a\u0440\u044b\u0442\u0438\u0435 FAQ \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u0432\u043d\u0435 \u0438\u0445\n document.addEventListener('click', function(event) {\n const isFaqClick = event.target.closest('.faq-item');\n \n if (!isFaqClick) {\n \/\/ \u0417\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432\u0441\u0435 FAQ\n document.querySelectorAll('.faq-item').forEach(item => {\n item.querySelector('.faq-answer').classList.remove('show');\n item.querySelector('.faq-toggle').classList.remove('rotate');\n });\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0435\u0441\u0430 \u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0435\u0441\u0430 \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0432\u0430\u0448 \u0437\u0434\u043e\u0440\u043e\u0432\u044b\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0432\u0435\u0441\u0430 \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430, \u0440\u043e\u0441\u0442\u0430 \u0438 \u043f\u043e\u043b\u0430 \u041c\u043e\u043b\u043e\u0434\u043e\u0439 (25) \u0421\u0440\u0435\u0434\u043d\u0438\u0439 (40) \u0417\u0440\u0435\u043b\u044b\u0439 (60) \u0412\u0430\u0436\u043d\u043e: \u0421 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u043e\u043c \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0441 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 0.5-1 \u043a\u0433 \u0437\u0430 10 \u043b\u0435\u0442 \u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u041f\u043e\u043b \u041c\u0443\u0436\u0447\u0438\u043d\u0430 \u0416\u0435\u043d\u0449\u0438\u043d\u0430 \u0412\u043e\u0437\u0440\u0430\u0441\u0442 (\u043b\u0435\u0442) \u043b\u0435\u0442 \u0412\u043e\u0437\u0440\u0430\u0441\u0442 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043c\u0435\u0442\u0430\u0431\u043e\u043b\u0438\u0437\u043c \u0438 \u043d\u043e\u0440\u043c\u0443 \u0432\u0435\u0441\u0430 \u0420\u043e\u0441\u0442 \u0441\u043c \u0422\u0435\u043a\u0443\u0449\u0438\u0439…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-28","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages\/28","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/gestro.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=28"}],"version-history":[{"count":27,"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages\/28\/revisions"}],"predecessor-version":[{"id":426,"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages\/28\/revisions\/426"}],"wp:attachment":[{"href":"http:\/\/gestro.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}