BMI Gauge<\/title>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n * {\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n padding: 20px;\r\n font-family: Poppins;\r\n background: #f4f6f9;\r\n }\r\n\r\n .card {\r\n max-width: 600px;\r\n margin: auto;\r\n background: #fff;\r\n border-radius: 20px;\r\n padding: 25px;\r\n box-shadow: 0 15px 35px rgba(0, 0, 0, .08);\r\n }\r\n\r\n h2 {\r\n margin-top: 0;\r\n }\r\n\r\n .form-row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: 10px;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .form-row label {\r\n min-width: 70px;\r\n font-weight: 600;\r\n }\r\n\r\n input,\r\n select {\r\n padding: 10px;\r\n border-radius: 8px;\r\n border: 1px solid #ddd;\r\n flex: 1;\r\n min-width: 80px;\r\n }\r\n\r\n .small {\r\n max-width: 80px;\r\n }\r\n\r\n button {\r\n width: 100%;\r\n padding: 12px;\r\n border: none;\r\n border-radius: 10px;\r\n background: #0077C8;\r\n color: #fff;\r\n font-weight: 600;\r\n cursor: pointer;\r\n }\r\n\r\n .gauge-wrapper {\r\n position: relative;\r\n height: 240px;\r\n margin-top: 30px;\r\n }\r\n\r\n svg {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .pointer {\r\n position: absolute;\r\n bottom: 130px;\r\n left: 50%;\r\n width: 0;\r\n height: 0;\r\n border-left: 12px solid transparent;\r\n border-right: 12px solid transparent;\r\n border-bottom: 22px solid #2ecc71;\r\n transform-origin: 50% 100%;\r\n transform: translateX(-50%) rotate(-90deg);\r\n transition: .6s ease;\r\n }\r\n\r\n .bmi-number {\r\n position: absolute;\r\n bottom: 35px;\r\n width: 100%;\r\n text-align: center;\r\n font-size: 42px;\r\n font-weight: 700;\r\n color: #2ecc71;\r\n }\r\n\r\n #bmiMessage {\r\n text-align: center;\r\n margin-top: 15px;\r\n font-weight: 600;\r\n }\r\n\r\n @media(max-width:500px) {\r\n .form-row {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n\r\n input,\r\n select {\r\n width: 100%;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n <div class=\"card\">\r\n <h2>BMI Results<\/h2>\r\n\r\n <div class=\"form-row\">\r\n <label>Height<\/label>\r\n\r\n <div id=\"heightFeet\" style=\"display:flex; gap:8px; flex:1;\">\r\n <input type=\"number\" id=\"feet\" class=\"small\" placeholder=\"5\">\r\n <span>ft<\/span>\r\n <input type=\"number\" id=\"inches\" class=\"small\" placeholder=\"10\">\r\n <span>in<\/span>\r\n <\/div>\r\n\r\n <div id=\"heightCm\" style=\"display:none; flex:1;\">\r\n <input type=\"number\" id=\"heightCmInput\" placeholder=\"170\">\r\n <span>cm<\/span>\r\n <\/div>\r\n\r\n <select id=\"unitSelect\" onchange=\"toggleHeightUnit()\" style=\"max-width:100px;\">\r\n <option value=\"ft\">ft\/in<\/option>\r\n <option value=\"cm\">cm<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"form-row\">\r\n <label>Weight<\/label>\r\n <input type=\"number\" id=\"weightInput\" placeholder=\"70\">\r\n <span>kg<\/span>\r\n <\/div>\r\n\r\n <button onclick=\"calculateBMI()\">Calculate<\/button>\r\n\r\n <div class=\"gauge-wrapper\">\r\n <svg id=\"gauge\" viewBox=\"0 0 400 240\"><\/svg>\r\n <div class=\"pointer\" id=\"pointer\"><\/div>\r\n <div class=\"bmi-number\" id=\"bmiValue\">--<\/div>\r\n <\/div>\r\n\r\n <div id=\"bmiMessage\"><\/div>\r\n\r\n <\/div>\r\n\r\n <script>\r\n\r\n const segments = [\r\n { label: \"Underweight\", range: \"<18.5\", color: \"#3498db\" },\r\n { label: \"Normal weight\", range: \"18.5\u201322.9\", color: \"#2ecc71\" },\r\n { label: \"Overweight\", range: \"23\u201324.9\", color: \"#f1c40f\" },\r\n { label: \"Obesity Grade 1\", range: \"25\u201329.9\", color: \"#f39c12\" },\r\n { label: \"Obesity Grade 2\", range: \"30\u201334.9\", color: \"#e74c3c\" },\r\n { label: \"Obesity Grade 3\", range: \">35\", color: \"#6e2c91\" }\r\n ];\r\n\r\n const svg = document.getElementById(\"gauge\");\r\n const cx = 200;\r\n const cy = 210;\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n const outerR = 180;\r\n const innerR = 140;\r\n\r\n function polarToCartesian(cx, cy, r, angle) {\r\n const rad = (angle - 90) * Math.PI \/ 180;\r\n return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };\r\n }\r\n\r\n \/* Correct arc direction (text upright) *\/\r\n function describeArc(startAngle, endAngle, r) {\r\n const start = polarToCartesian(cx, cy, r, startAngle);\r\n const end = polarToCartesian(cx, cy, r, endAngle);\r\n return `\r\n M ${start.x} ${start.y}\r\n A ${r} ${r} 0 0 1 ${end.x} ${end.y}\r\n `;\r\n }\r\n\r\n function describeDonut(startAngle, endAngle) {\r\n const startOuter = polarToCartesian(cx, cy, outerR, endAngle);\r\n const endOuter = polarToCartesian(cx, cy, outerR, startAngle);\r\n const startInner = polarToCartesian(cx, cy, innerR, endAngle);\r\n const endInner = polarToCartesian(cx, cy, innerR, startAngle);\r\n\r\n return `\r\n M ${startOuter.x} ${startOuter.y}\r\n A ${outerR} ${outerR} 0 0 0 ${endOuter.x} ${endOuter.y}\r\n L ${endInner.x} ${endInner.y}\r\n A ${innerR} ${innerR} 0 0 1 ${startInner.x} ${startInner.y}\r\n Z`;\r\n }\r\n\r\n function drawGauge() {\r\n svg.innerHTML = \"\";\r\n let startAngle = -90;\r\n const segmentAngle = 180 \/ segments.length;\r\n\r\n segments.forEach((seg, i) => {\r\n const endAngle = startAngle + segmentAngle;\r\n\r\n \/* colored arc *\/\r\n const path = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"path\");\r\n path.setAttribute(\"d\", describeDonut(startAngle, endAngle));\r\n path.setAttribute(\"fill\", seg.color);\r\n svg.appendChild(path);\r\n\r\n \/* STATUS curved ABOVE arc *\/\r\n const statusId = \"statusArc\" + i;\r\n const statusArc = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"path\");\r\n statusArc.setAttribute(\"id\", statusId);\r\n statusArc.setAttribute(\"d\", describeArc(startAngle, endAngle, outerR + 10));\r\n statusArc.setAttribute(\"fill\", \"none\");\r\n svg.appendChild(statusArc);\r\n\r\n const statusText = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"text\");\r\n statusText.setAttribute(\"font-size\", \"12\");\r\n statusText.setAttribute(\"font-weight\", \"600\");\r\n statusText.setAttribute(\"fill\", \"#000\");\r\n statusText.setAttribute(\"dominant-baseline\", \"middle\");\r\n\r\n const statusTextPath = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"textPath\");\r\n statusTextPath.setAttribute(\"href\", \"#\" + statusId);\r\n statusTextPath.setAttribute(\"startOffset\", \"50%\");\r\n statusTextPath.setAttribute(\"text-anchor\", \"middle\");\r\n statusTextPath.textContent = seg.label;\r\n\r\n statusText.appendChild(statusTextPath);\r\n svg.appendChild(statusText);\r\n\r\n \/* RANGE curved INSIDE arc *\/\r\n const rangeId = \"rangeArc\" + i;\r\n const rangeArc = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"path\");\r\n rangeArc.setAttribute(\"id\", rangeId);\r\n rangeArc.setAttribute(\"d\", describeArc(startAngle, endAngle, (outerR + innerR) \/ 2));\r\n rangeArc.setAttribute(\"fill\", \"none\");\r\n svg.appendChild(rangeArc);\r\n\r\n const rangeText = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"text\");\r\n rangeText.setAttribute(\"font-size\", \"12\");\r\n rangeText.setAttribute(\"font-weight\", \"600\");\r\n rangeText.setAttribute(\"fill\", \"#fff\");\r\n\r\n const rangeTextPath = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"textPath\");\r\n rangeTextPath.setAttribute(\"href\", \"#\" + rangeId);\r\n rangeTextPath.setAttribute(\"startOffset\", \"50%\");\r\n rangeTextPath.setAttribute(\"text-anchor\", \"middle\");\r\n rangeTextPath.textContent = seg.range;\r\n\r\n rangeText.appendChild(rangeTextPath);\r\n svg.appendChild(rangeText);\r\n\r\n startAngle = endAngle;\r\n });\r\n }\r\n\r\n drawGauge();\r\n\r\n function toggleHeightUnit() {\r\n const unit = document.getElementById(\"unitSelect\").value;\r\n document.getElementById(\"heightFeet\").style.display = unit === \"ft\" ? \"flex\" : \"none\";\r\n document.getElementById(\"heightCm\").style.display = unit === \"cm\" ? \"flex\" : \"none\";\r\n }\r\n\r\n function calculateBMI() {\r\n\r\n let heightMeters;\r\n const unit = document.getElementById(\"unitSelect\").value;\r\n\r\n if (unit === \"ft\") {\r\n const ft = parseFloat(feet.value) || 0;\r\n const inch = parseFloat(inches.value) || 0;\r\n if (ft === 0) return alert(\"Enter height\");\r\n heightMeters = ((ft * 12) + inch) * 0.0254;\r\n } else {\r\n const cm = parseFloat(heightCmInput.value);\r\n if (!cm) return alert(\"Enter height\");\r\n heightMeters = cm \/ 100;\r\n }\r\n\r\n const weight = parseFloat(weightInput.value);\r\n\r\n if (!weight) return alert(\"Enter weight\");\r\n\r\n const bmi = (weight \/ (heightMeters * heightMeters)).toFixed(1);\r\n bmiValue.innerText = bmi;\r\n\r\n let index = 0;\r\n let msg = \"\";\r\n if (bmi < 18.5) { index = 0; msg = \"Currently, your body weight is in an underweight range. Your BMI suggests you are underweight. At this stage, focusing on a balanced, nutrient-dense diet can be of help to you. We recommend you to consider speaking with your doctor for further guidance.\"; }\r\n else if (bmi < 23) { index = 1; msg = \"Currently, your body weight is in an acceptable range. While you may not need medical intervention right now, you can focus on healthy lifestyle habits to help maintain your body weight.\"; }\r\n else if (bmi < 25) { index = 2; msg = \"Currently, your body weight is in the overweight range. Your BMI suggests you are overweight. At this stage, focusing on lifestyle changes can be of help to you. We recommend you to consider speaking with your doctor for further guidance.\"; }\r\n else if (bmi < 30) { index = 3; msg = \"Medical Consultation Strongly Recommended. Your BMI falls in the obesity range and may increase your future risk for adverse health outcomes\"; }\r\n else if (bmi < 35) { index = 4; msg = \"Medical Consultation Strongly Recommended. Your BMI falls in the obesity range and may increase your future risk for adverse health outcomes.\"; }\r\n else { index = 5; msg = \"Medical Consultation Strongly Recommended. Your BMI falls in the obesity range and may increase your future risk for adverse health outcomes.\"; }\r\n\r\n document.getElementById(\"bmiMessage\").innerText = msg;\r\n\r\n const segmentAngle = 180 \/ segments.length;\r\n const angle = -90 + (index * segmentAngle) + (segmentAngle \/ 2);\r\n\r\n pointer.style.transform = \"translateX(-50%) rotate(\" + angle + \"deg)\";\r\n pointer.style.borderBottomColor = segments[index].color;\r\n bmiValue.style.color = segments[index].color;\r\n }\r\n\r\n <\/script>\r\n\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ded370c elementor-widget elementor-widget-text-editor\" data-id=\"ded370c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As per <a href=\"https:\/\/pmc.ncbi.nlm.nih.gov\/articles\/PMC9519829\/\">ESI<\/a> guidelines<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Body Mass Index (BMI) BMI Gauge BMI Results Height ft in cm ft\/incm Weight kg Calculate — As per ESI guidelines<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5903","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/humrahi.co.in\/as\/wp-json\/wp\/v2\/pages\/5903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/humrahi.co.in\/as\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/humrahi.co.in\/as\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/humrahi.co.in\/as\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/humrahi.co.in\/as\/wp-json\/wp\/v2\/comments?post=5903"}],"version-history":[{"count":58,"href":"https:\/\/humrahi.co.in\/as\/wp-json\/wp\/v2\/pages\/5903\/revisions"}],"predecessor-version":[{"id":9490,"href":"https:\/\/humrahi.co.in\/as\/wp-json\/wp\/v2\/pages\/5903\/revisions\/9490"}],"wp:attachment":[{"href":"https:\/\/humrahi.co.in\/as\/wp-json\/wp\/v2\/media?parent=5903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}