BMI Calculator<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@300;400;600;700;800;900&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --bg: #0f0f1a;\n --surface: #1a1a2e;\n --card: #16213e;\n --accent: #e94560;\n --accent2: #f5a623;\n --green: #00c896;\n --blue: #0f3460;\n --text: #f0f0f0;\n --muted: #8888aa;\n --radius: 20px;\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; }\n\n body {\n font-family: 'Nunito', sans-serif;\n background: var(--bg);\n color: var(--text);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n padding: 0;\n }\n\n .phone {\n width: 100%;\n max-width: 420px;\n min-height: 100vh;\n background: var(--bg);\n position: relative;\n overflow: hidden;\n }\n\n \/* Status bar *\/\n .status-bar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 20px 6px;\n font-size: 12px;\n font-weight: 700;\n color: var(--text);\n }\n .status-icons { display: flex; gap: 6px; align-items: center; }\n\n \/* Header *\/\n .header {\n padding: 8px 24px 20px;\n background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);\n }\n .header h1 {\n font-size: 28px;\n font-weight: 900;\n letter-spacing: -0.5px;\n }\n .header h1 span { color: var(--accent); }\n .header p { font-size: 13px; color: var(--muted); margin-top: 2px; }\n\n \/* Decorative blob *\/\n .blob {\n position: absolute;\n width: 200px; height: 200px;\n background: radial-gradient(circle, rgba(233,69,96,0.15) 0%, transparent 70%);\n top: -60px; right: -60px;\n border-radius: 50%;\n pointer-events: none;\n }\n\n \/* Gender selector *\/\n .section { padding: 0 20px 16px; }\n .label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }\n\n .gender-row { display: flex; gap: 12px; }\n .gender-btn {\n flex: 1;\n background: var(--card);\n border: 2px solid transparent;\n border-radius: 16px;\n padding: 16px 12px;\n cursor: pointer;\n text-align: center;\n transition: all 0.25s ease;\n color: var(--muted);\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n font-size: 14px;\n }\n .gender-btn.active {\n border-color: var(--accent);\n color: var(--text);\n background: rgba(233,69,96,0.12);\n }\n .gender-icon { font-size: 28px; margin-bottom: 6px; display: block; }\n\n \/* Slider card *\/\n .slider-card {\n background: var(--card);\n border-radius: var(--radius);\n padding: 20px;\n margin: 0 20px 14px;\n }\n .slider-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }\n .slider-value { font-size: 32px; font-weight: 900; }\n .slider-value span { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 3px; }\n\n input[type=range] {\n -webkit-appearance: none;\n width: 100%;\n height: 6px;\n border-radius: 3px;\n background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill, 50%), #2a2a45 var(--fill, 50%), #2a2a45 100%);\n outline: none;\n cursor: pointer;\n }\n input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 22px; height: 22px;\n border-radius: 50%;\n background: var(--accent);\n box-shadow: 0 0 0 4px rgba(233,69,96,0.25);\n cursor: pointer;\n transition: box-shadow 0.2s;\n }\n input[type=range]:active::-webkit-slider-thumb {\n box-shadow: 0 0 0 8px rgba(233,69,96,0.3);\n }\n\n \/* Counter card *\/\n .counter-row { display: flex; gap: 12px; margin: 0 20px 14px; }\n .counter-card {\n flex: 1;\n background: var(--card);\n border-radius: var(--radius);\n padding: 18px 14px;\n text-align: center;\n }\n .counter-val { font-size: 30px; font-weight: 900; margin: 6px 0; }\n .counter-btns { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }\n .counter-btn {\n width: 36px; height: 36px;\n border-radius: 50%;\n border: none;\n background: rgba(233,69,96,0.15);\n color: var(--accent);\n font-size: 20px;\n font-weight: 900;\n cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: all 0.2s;\n font-family: 'Nunito', sans-serif;\n line-height: 1;\n }\n .counter-btn:active { transform: scale(0.9); background: rgba(233,69,96,0.3); }\n\n \/* Calculate button *\/\n .calc-btn {\n margin: 4px 20px 16px;\n width: calc(100% - 40px);\n padding: 18px;\n background: linear-gradient(135deg, var(--accent) 0%, #c0392b 100%);\n border: none;\n border-radius: 16px;\n color: white;\n font-family: 'Nunito', sans-serif;\n font-size: 17px;\n font-weight: 800;\n letter-spacing: 0.5px;\n cursor: pointer;\n box-shadow: 0 8px 24px rgba(233,69,96,0.4);\n transition: all 0.2s;\n }\n .calc-btn:active { transform: scale(0.97); box-shadow: 0 4px 12px rgba(233,69,96,0.4); }\n\n \/* Result card *\/\n .result-card {\n margin: 0 20px 20px;\n background: var(--card);\n border-radius: var(--radius);\n padding: 24px;\n display: none;\n animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n .result-card.show { display: block; }\n\n @keyframes slideUp {\n from { opacity: 0; transform: translateY(30px) scale(0.95); }\n to { opacity: 1; transform: translateY(0) scale(1); }\n }\n\n .result-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }\n .result-bmi { font-size: 64px; font-weight: 900; line-height: 1; margin: 8px 0 4px; }\n .result-status {\n font-size: 18px; font-weight: 800;\n padding: 6px 14px;\n border-radius: 30px;\n display: inline-block;\n margin-bottom: 16px;\n }\n\n \/* Gauge *\/\n .gauge { position: relative; margin: 12px 0; }\n .gauge-track {\n height: 10px;\n border-radius: 5px;\n background: linear-gradient(to right, #3498db 0%, #2ecc71 20%, #f1c40f 45%, #e67e22 65%, #e74c3c 100%);\n }\n .gauge-marker {\n position: absolute;\n top: -4px;\n width: 18px; height: 18px;\n border-radius: 50%;\n background: white;\n transform: translateX(-50%);\n box-shadow: 0 2px 8px rgba(0,0,0,0.4);\n transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n .gauge-labels {\n display: flex;\n justify-content: space-between;\n margin-top: 6px;\n font-size: 10px;\n color: var(--muted);\n font-weight: 600;\n }\n\n \/* Tip *\/\n .tip {\n margin-top: 14px;\n background: rgba(255,255,255,0.05);\n border-radius: 12px;\n padding: 12px 14px;\n font-size: 13px;\n color: var(--muted);\n line-height: 1.6;\n }\n .tip strong { color: var(--text); }\n\n \/* BMI Table *\/\n .bmi-table { margin: 0 20px 30px; background: var(--card); border-radius: var(--radius); overflow: hidden; }\n .bmi-table-title { padding: 14px 16px 0; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }\n .bmi-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 11px 16px;\n font-size: 13px;\n border-bottom: 1px solid rgba(255,255,255,0.04);\n }\n .bmi-row:last-child { border-bottom: none; }\n .bmi-dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; flex-shrink: 0; }\n .bmi-name { flex: 1; font-weight: 600; }\n .bmi-range { color: var(--muted); font-size: 12px; font-weight: 700; }\n<\/style>\n<\/head>\n<body>\n<div class=\"phone\">\n <div class=\"blob\"><\/div>\n\n \n <div class=\"status-bar\">\n <span id=\"clock\">09:41<\/span>\n <div class=\"status-icons\">\n <span>\ud83d\udcf6<\/span><span>\ud83d\udd0b<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"header\">\n <h1>BMI <span>Rekenmachine<\/span><\/h1>\n <p>Bereken je Body Mass Index<\/p>\n <\/div>\n\n \n <div class=\"section\">\n <div class=\"label\">Geslacht<\/div>\n <div class=\"gender-row\">\n <button class=\"gender-btn active\" onclick=\"setGender('man', this)\">\n <span class=\"gender-icon\">\ud83d\udc68<\/span>Man\n <\/button>\n <button class=\"gender-btn\" onclick=\"setGender('vrouw', this)\">\n <span class=\"gender-icon\">\ud83d\udc69<\/span>Vrouw\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"slider-card\">\n <div class=\"slider-header\">\n <div class=\"label\" style=\"margin:0\">Lengte<\/div>\n <div class=\"slider-value\" id=\"heightVal\">170 <span>cm<\/span><\/div>\n <\/div>\n <input type=\"range\" id=\"heightSlider\" min=\"100\" max=\"220\" value=\"170\"\n oninput=\"updateSlider(this, 'heightVal', 'cm')\">\n <\/div>\n\n \n <div class=\"counter-row\">\n <div class=\"counter-card\">\n <div class=\"label\">Gewicht<\/div>\n <div class=\"counter-val\" id=\"weightVal\">70<\/div>\n <div style=\"font-size:12px;color:var(--muted);font-weight:600;\">kg<\/div>\n <div class=\"counter-btns\">\n <button class=\"counter-btn\" onclick=\"adjust('weightVal', -1, 30, 200)\">\u2212<\/button>\n <button class=\"counter-btn\" onclick=\"adjust('weightVal', 1, 30, 200)\">+<\/button>\n <\/div>\n <\/div>\n <div class=\"counter-card\">\n <div class=\"label\">Leeftijd<\/div>\n <div class=\"counter-val\" id=\"ageVal\">25<\/div>\n <div style=\"font-size:12px;color:var(--muted);font-weight:600;\">jaar<\/div>\n <div class=\"counter-btns\">\n <button class=\"counter-btn\" onclick=\"adjust('ageVal', -1, 5, 100)\">\u2212<\/button>\n <button class=\"counter-btn\" onclick=\"adjust('ageVal', 1, 5, 100)\">+<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <button class=\"calc-btn\" onclick=\"calculate()\">\ud83d\udd0d Bereken mijn BMI<\/button>\n\n \n <div class=\"result-card\" id=\"resultCard\">\n <div class=\"result-label\">Jouw BMI<\/div>\n <div class=\"result-bmi\" id=\"resultBMI\">—<\/div>\n <div class=\"result-status\" id=\"resultStatus\">—<\/div>\n <div class=\"gauge\">\n <div class=\"gauge-track\"><\/div>\n <div class=\"gauge-marker\" id=\"gaugeMarker\" style=\"left:50%\"><\/div>\n <div class=\"gauge-labels\">\n <span>Ondergewicht<\/span>\n <span>Normaal<\/span>\n <span>Overgewicht<\/span>\n <span>Obesitas<\/span>\n <\/div>\n <\/div>\n <div class=\"tip\" id=\"resultTip\"><\/div>\n <\/div>\n\n \n <div class=\"bmi-table\">\n <div class=\"bmi-table-title\">BMI Categorie\u00ebn<\/div>\n <div class=\"bmi-row\">\n <div class=\"bmi-dot\" style=\"background:#3498db\"><\/div>\n <div class=\"bmi-name\">Ondergewicht<\/div>\n <div class=\"bmi-range\">< 18.5<\/div>\n <\/div>\n <div class=\"bmi-row\">\n <div class=\"bmi-dot\" style=\"background:#2ecc71\"><\/div>\n <div class=\"bmi-name\">Normaal gewicht<\/div>\n <div class=\"bmi-range\">18.5 \u2013 24.9<\/div>\n <\/div>\n <div class=\"bmi-row\">\n <div class=\"bmi-dot\" style=\"background:#f1c40f\"><\/div>\n <div class=\"bmi-name\">Overgewicht<\/div>\n <div class=\"bmi-range\">25 \u2013 29.9<\/div>\n <\/div>\n <div class=\"bmi-row\">\n <div class=\"bmi-dot\" style=\"background:#e67e22\"><\/div>\n <div class=\"bmi-name\">Obesitas I<\/div>\n <div class=\"bmi-range\">30 \u2013 34.9<\/div>\n <\/div>\n <div class=\"bmi-row\">\n <div class=\"bmi-dot\" style=\"background:#e74c3c\"><\/div>\n <div class=\"bmi-name\">Obesitas II \/ III<\/div>\n <div class=\"bmi-range\">≥ 35<\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n \/\/ Clock\n function updateClock() {\n const n = new Date();\n document.getElementById('clock').textContent =\n String(n.getHours()).padStart(2,'0') + ':' + String(n.getMinutes()).padStart(2,'0');\n }\n updateClock();\n setInterval(updateClock, 10000);\n\n \/\/ Gender\n let gender = 'man';\n function setGender(g, btn) {\n gender = g;\n document.querySelectorAll('.gender-btn').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n }\n\n \/\/ Slider\n function updateSlider(el, valId, unit) {\n const v = el.value;\n document.getElementById(valId).innerHTML = v + ' <span>' + unit + '<\/span>';\n const pct = ((v - el.min) \/ (el.max - el.min)) * 100;\n el.style.setProperty('--fill', pct + '%');\n }\n\n \/\/ Init slider fill\n const sl = document.getElementById('heightSlider');\n sl.style.setProperty('--fill', ((170-100)\/(220-100)*100) + '%');\n\n \/\/ Counter\n function adjust(id, delta, min, max) {\n const el = document.getElementById(id);\n let v = parseInt(el.textContent) + delta;\n if (v < min) v = min;\n if (v > max) v = max;\n el.textContent = v;\n }\n\n \/\/ Calculate\n function calculate() {\n const h = parseInt(document.getElementById('heightSlider').value) \/ 100;\n const w = parseInt(document.getElementById('weightVal').textContent);\n const age = parseInt(document.getElementById('ageVal').textContent);\n const bmi = w \/ (h * h);\n const bmiRounded = Math.round(bmi * 10) \/ 10;\n\n \/\/ Status\n let status, color, tip, gaugePos;\n if (bmi < 18.5) {\n status = '\ud83d\udd35 Ondergewicht'; color = '#3498db'; gaugePos = 8;\n tip = `<strong>Advies:<\/strong> Je BMI is lager dan aanbevolen. Overweeg meer calorierijke voeding te eten en raadpleeg eventueel een di\u00ebtist.`;\n } else if (bmi < 25) {\n status = '\ud83d\udfe2 Normaal gewicht'; color = '#2ecc71'; gaugePos = 32;\n tip = `<strong>Geweldig!<\/strong> Je BMI ligt in het gezonde bereik. Blijf actief en eet gevarieerd om dit te behouden. \ud83d\udcaa`;\n } else if (bmi < 30) {\n status = '\ud83d\udfe1 Overgewicht'; color = '#f1c40f'; gaugePos = 58;\n tip = `<strong>Let op:<\/strong> Je BMI wijst op licht overgewicht. Meer bewegen en gezonder eten kan helpen. Kleine stappen maken groot verschil!`;\n } else if (bmi < 35) {\n status = '\ud83d\udfe0 Obesitas I'; color = '#e67e22'; gaugePos = 78;\n tip = `<strong>Actie gewenst:<\/strong> Je BMI duidt op obesitas. Raadpleeg je huisarts voor persoonlijk advies over leefstijlveranderingen.`;\n } else {\n status = '\ud83d\udd34 Obesitas II\/III'; color = '#e74c3c'; gaugePos = 93;\n tip = `<strong>Medisch advies nodig:<\/strong> Je BMI is aanzienlijk verhoogd. Bespreek dit zo snel mogelijk met je huisarts.`;\n }\n\n document.getElementById('resultBMI').textContent = bmiRounded;\n document.getElementById('resultBMI').style.color = color;\n const statusEl = document.getElementById('resultStatus');\n statusEl.textContent = status;\n statusEl.style.background = color + '22';\n statusEl.style.color = color;\n document.getElementById('gaugeMarker').style.left = gaugePos + '%';\n document.getElementById('resultTip').innerHTML = tip;\n\n const card = document.getElementById('resultCard');\n card.classList.remove('show');\n void card.offsetWidth;\n card.classList.add('show');\n\n card.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n<\/script>\n<\/body>\n","protected":false},"excerpt":{"rendered":"<p>BMI Calculator 09:41 \ud83d\udcf6\ud83d\udd0b BMI Rekenmachine Bereken je Body Mass Index Geslacht \ud83d\udc68Man \ud83d\udc69Vrouw Lengte 170 cm Gewicht 70 kg \u2212 + Leeftijd 25 jaar \u2212 + \ud83d\udd0d Bereken mijn BMI Jouw BMI — — Ondergewicht Normaal Overgewicht Obesitas BMI Categorie\u00ebn Ondergewicht < 18.5 Normaal gewicht 18.5 \u2013 24.9 Overgewicht 25 \u2013 29.9 Obesitas I […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","ngg_post_thumbnail":0,"footnotes":""},"class_list":["post-1754","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mariodekens.be\/index.php\/wp-json\/wp\/v2\/pages\/1754","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mariodekens.be\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mariodekens.be\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mariodekens.be\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mariodekens.be\/index.php\/wp-json\/wp\/v2\/comments?post=1754"}],"version-history":[{"count":1,"href":"https:\/\/mariodekens.be\/index.php\/wp-json\/wp\/v2\/pages\/1754\/revisions"}],"predecessor-version":[{"id":1756,"href":"https:\/\/mariodekens.be\/index.php\/wp-json\/wp\/v2\/pages\/1754\/revisions\/1756"}],"wp:attachment":[{"href":"https:\/\/mariodekens.be\/index.php\/wp-json\/wp\/v2\/media?parent=1754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1754,"date":"2026-04-17T15:42:38","date_gmt":"2026-04-17T15:42:38","guid":{"rendered":"https:\/\/mariodekens.be\/?page_id=1754"},"modified":"2026-04-17T15:42:38","modified_gmt":"2026-04-17T15:42:38","slug":"bmi-bepalen","status":"publish","type":"page","link":"https:\/\/mariodekens.be\/index.php\/bmi-bepalen\/","title":{"rendered":"BMI bepalen"},"content":{"rendered":"\n\n\n\n\nBMI Calculator<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@300;400;600;700;800;900&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --bg: #0f0f1a;\n --surface: #1a1a2e;\n --card: #16213e;\n --accent: #e94560;\n --accent2: #f5a623;\n --green: #00c896;\n --blue: #0f3460;\n --text: #f0f0f0;\n --muted: #8888aa;\n --radius: 20px;\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; }\n\n body {\n font-family: 'Nunito', sans-serif;\n background: var(--bg);\n color: var(--text);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n padding: 0;\n }\n\n .phone {\n width: 100%;\n max-width: 420px;\n min-height: 100vh;\n background: var(--bg);\n position: relative;\n overflow: hidden;\n }\n\n \/* Status bar *\/\n .status-bar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 20px 6px;\n font-size: 12px;\n font-weight: 700;\n color: var(--text);\n }\n .status-icons { display: flex; gap: 6px; align-items: center; }\n\n \/* Header *\/\n .header {\n padding: 8px 24px 20px;\n background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);\n }\n .header h1 {\n font-size: 28px;\n font-weight: 900;\n letter-spacing: -0.5px;\n }\n .header h1 span { color: var(--accent); }\n .header p { font-size: 13px; color: var(--muted); margin-top: 2px; }\n\n \/* Decorative blob *\/\n .blob {\n position: absolute;\n width: 200px; height: 200px;\n background: radial-gradient(circle, rgba(233,69,96,0.15) 0%, transparent 70%);\n top: -60px; right: -60px;\n border-radius: 50%;\n pointer-events: none;\n }\n\n \/* Gender selector *\/\n .section { padding: 0 20px 16px; }\n .label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }\n\n .gender-row { display: flex; gap: 12px; }\n .gender-btn {\n flex: 1;\n background: var(--card);\n border: 2px solid transparent;\n border-radius: 16px;\n padding: 16px 12px;\n cursor: pointer;\n text-align: center;\n transition: all 0.25s ease;\n color: var(--muted);\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n font-size: 14px;\n }\n .gender-btn.active {\n border-color: var(--accent);\n color: var(--text);\n background: rgba(233,69,96,0.12);\n }\n .gender-icon { font-size: 28px; margin-bottom: 6px; display: block; }\n\n \/* Slider card *\/\n .slider-card {\n background: var(--card);\n border-radius: var(--radius);\n padding: 20px;\n margin: 0 20px 14px;\n }\n .slider-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }\n .slider-value { font-size: 32px; font-weight: 900; }\n .slider-value span { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 3px; }\n\n input[type=range] {\n -webkit-appearance: none;\n width: 100%;\n height: 6px;\n border-radius: 3px;\n background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill, 50%), #2a2a45 var(--fill, 50%), #2a2a45 100%);\n outline: none;\n cursor: pointer;\n }\n input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 22px; height: 22px;\n border-radius: 50%;\n background: var(--accent);\n box-shadow: 0 0 0 4px rgba(233,69,96,0.25);\n cursor: pointer;\n transition: box-shadow 0.2s;\n }\n input[type=range]:active::-webkit-slider-thumb {\n box-shadow: 0 0 0 8px rgba(233,69,96,0.3);\n }\n\n \/* Counter card *\/\n .counter-row { display: flex; gap: 12px; margin: 0 20px 14px; }\n .counter-card {\n flex: 1;\n background: var(--card);\n border-radius: var(--radius);\n padding: 18px 14px;\n text-align: center;\n }\n .counter-val { font-size: 30px; font-weight: 900; margin: 6px 0; }\n .counter-btns { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }\n .counter-btn {\n width: 36px; height: 36px;\n border-radius: 50%;\n border: none;\n background: rgba(233,69,96,0.15);\n color: var(--accent);\n font-size: 20px;\n font-weight: 900;\n cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: all 0.2s;\n font-family: 'Nunito', sans-serif;\n line-height: 1;\n }\n .counter-btn:active { transform: scale(0.9); background: rgba(233,69,96,0.3); }\n\n \/* Calculate button *\/\n .calc-btn {\n margin: 4px 20px 16px;\n width: calc(100% - 40px);\n padding: 18px;\n background: linear-gradient(135deg, var(--accent) 0%, #c0392b 100%);\n border: none;\n border-radius: 16px;\n color: white;\n font-family: 'Nunito', sans-serif;\n font-size: 17px;\n font-weight: 800;\n letter-spacing: 0.5px;\n cursor: pointer;\n box-shadow: 0 8px 24px rgba(233,69,96,0.4);\n transition: all 0.2s;\n }\n .calc-btn:active { transform: scale(0.97); box-shadow: 0 4px 12px rgba(233,69,96,0.4); }\n\n \/* Result card *\/\n .result-card {\n margin: 0 20px 20px;\n background: var(--card);\n border-radius: var(--radius);\n padding: 24px;\n display: none;\n animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n .result-card.show { display: block; }\n\n @keyframes slideUp {\n from { opacity: 0; transform: translateY(30px) scale(0.95); }\n to { opacity: 1; transform: translateY(0) scale(1); }\n }\n\n .result-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }\n .result-bmi { font-size: 64px; font-weight: 900; line-height: 1; margin: 8px 0 4px; }\n .result-status {\n font-size: 18px; font-weight: 800;\n padding: 6px 14px;\n border-radius: 30px;\n display: inline-block;\n margin-bottom: 16px;\n }\n\n \/* Gauge *\/\n .gauge { position: relative; margin: 12px 0; }\n .gauge-track {\n height: 10px;\n border-radius: 5px;\n background: linear-gradient(to right, #3498db 0%, #2ecc71 20%, #f1c40f 45%, #e67e22 65%, #e74c3c 100%);\n }\n .gauge-marker {\n position: absolute;\n top: -4px;\n width: 18px; height: 18px;\n border-radius: 50%;\n background: white;\n transform: translateX(-50%);\n box-shadow: 0 2px 8px rgba(0,0,0,0.4);\n transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n .gauge-labels {\n display: flex;\n justify-content: space-between;\n margin-top: 6px;\n font-size: 10px;\n color: var(--muted);\n font-weight: 600;\n }\n\n \/* Tip *\/\n .tip {\n margin-top: 14px;\n background: rgba(255,255,255,0.05);\n border-radius: 12px;\n padding: 12px 14px;\n font-size: 13px;\n color: var(--muted);\n line-height: 1.6;\n }\n .tip strong { color: var(--text); }\n\n \/* BMI Table *\/\n .bmi-table { margin: 0 20px 30px; background: var(--card); border-radius: var(--radius); overflow: hidden; }\n .bmi-table-title { padding: 14px 16px 0; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }\n .bmi-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 11px 16px;\n font-size: 13px;\n border-bottom: 1px solid rgba(255,255,255,0.04);\n }\n .bmi-row:last-child { border-bottom: none; }\n .bmi-dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; flex-shrink: 0; }\n .bmi-name { flex: 1; font-weight: 600; }\n .bmi-range { color: var(--muted); font-size: 12px; font-weight: 700; }\n<\/style>\n<\/head>\n<body>\n<div class=\"phone\">\n <div class=\"blob\"><\/div>\n\n \n <div class=\"status-bar\">\n <span id=\"clock\">09:41<\/span>\n <div class=\"status-icons\">\n <span>\ud83d\udcf6<\/span><span>\ud83d\udd0b<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"header\">\n <h1>BMI <span>Rekenmachine<\/span><\/h1>\n <p>Bereken je Body Mass Index<\/p>\n <\/div>\n\n \n <div class=\"section\">\n <div class=\"label\">Geslacht<\/div>\n <div class=\"gender-row\">\n <button class=\"gender-btn active\" onclick=\"setGender('man', this)\">\n <span class=\"gender-icon\">\ud83d\udc68<\/span>Man\n <\/button>\n <button class=\"gender-btn\" onclick=\"setGender('vrouw', this)\">\n <span class=\"gender-icon\">\ud83d\udc69<\/span>Vrouw\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"slider-card\">\n <div class=\"slider-header\">\n <div class=\"label\" style=\"margin:0\">Lengte<\/div>\n <div class=\"slider-value\" id=\"heightVal\">170 <span>cm<\/span><\/div>\n <\/div>\n <input type=\"range\" id=\"heightSlider\" min=\"100\" max=\"220\" value=\"170\"\n oninput=\"updateSlider(this, 'heightVal', 'cm')\">\n <\/div>\n\n \n <div class=\"counter-row\">\n <div class=\"counter-card\">\n <div class=\"label\">Gewicht<\/div>\n <div class=\"counter-val\" id=\"weightVal\">70<\/div>\n <div style=\"font-size:12px;color:var(--muted);font-weight:600;\">kg<\/div>\n <div class=\"counter-btns\">\n <button class=\"counter-btn\" onclick=\"adjust('weightVal', -1, 30, 200)\">\u2212<\/button>\n <button class=\"counter-btn\" onclick=\"adjust('weightVal', 1, 30, 200)\">+<\/button>\n <\/div>\n <\/div>\n <div class=\"counter-card\">\n <div class=\"label\">Leeftijd<\/div>\n <div class=\"counter-val\" id=\"ageVal\">25<\/div>\n <div style=\"font-size:12px;color:var(--muted);font-weight:600;\">jaar<\/div>\n <div class=\"counter-btns\">\n <button class=\"counter-btn\" onclick=\"adjust('ageVal', -1, 5, 100)\">\u2212<\/button>\n <button class=\"counter-btn\" onclick=\"adjust('ageVal', 1, 5, 100)\">+<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <button class=\"calc-btn\" onclick=\"calculate()\">\ud83d\udd0d Bereken mijn BMI<\/button>\n\n \n <div class=\"result-card\" id=\"resultCard\">\n <div class=\"result-label\">Jouw BMI<\/div>\n <div class=\"result-bmi\" id=\"resultBMI\">—<\/div>\n <div class=\"result-status\" id=\"resultStatus\">—<\/div>\n <div class=\"gauge\">\n <div class=\"gauge-track\"><\/div>\n <div class=\"gauge-marker\" id=\"gaugeMarker\" style=\"left:50%\"><\/div>\n <div class=\"gauge-labels\">\n <span>Ondergewicht<\/span>\n <span>Normaal<\/span>\n <span>Overgewicht<\/span>\n <span>Obesitas<\/span>\n <\/div>\n <\/div>\n <div class=\"tip\" id=\"resultTip\"><\/div>\n <\/div>\n\n \n <div class=\"bmi-table\">\n <div class=\"bmi-table-title\">BMI Categorie\u00ebn<\/div>\n <div class=\"bmi-row\">\n <div class=\"bmi-dot\" style=\"background:#3498db\"><\/div>\n <div class=\"bmi-name\">Ondergewicht<\/div>\n <div class=\"bmi-range\">< 18.5<\/div>\n <\/div>\n <div class=\"bmi-row\">\n <div class=\"bmi-dot\" style=\"background:#2ecc71\"><\/div>\n <div class=\"bmi-name\">Normaal gewicht<\/div>\n <div class=\"bmi-range\">18.5 \u2013 24.9<\/div>\n <\/div>\n <div class=\"bmi-row\">\n <div class=\"bmi-dot\" style=\"background:#f1c40f\"><\/div>\n <div class=\"bmi-name\">Overgewicht<\/div>\n <div class=\"bmi-range\">25 \u2013 29.9<\/div>\n <\/div>\n <div class=\"bmi-row\">\n <div class=\"bmi-dot\" style=\"background:#e67e22\"><\/div>\n <div class=\"bmi-name\">Obesitas I<\/div>\n <div class=\"bmi-range\">30 \u2013 34.9<\/div>\n <\/div>\n <div class=\"bmi-row\">\n <div class=\"bmi-dot\" style=\"background:#e74c3c\"><\/div>\n <div class=\"bmi-name\">Obesitas II \/ III<\/div>\n <div class=\"bmi-range\">≥ 35<\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n \/\/ Clock\n function updateClock() {\n const n = new Date();\n document.getElementById('clock').textContent =\n String(n.getHours()).padStart(2,'0') + ':' + String(n.getMinutes()).padStart(2,'0');\n }\n updateClock();\n setInterval(updateClock, 10000);\n\n \/\/ Gender\n let gender = 'man';\n function setGender(g, btn) {\n gender = g;\n document.querySelectorAll('.gender-btn').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n }\n\n \/\/ Slider\n function updateSlider(el, valId, unit) {\n const v = el.value;\n document.getElementById(valId).innerHTML = v + ' <span>' + unit + '<\/span>';\n const pct = ((v - el.min) \/ (el.max - el.min)) * 100;\n el.style.setProperty('--fill', pct + '%');\n }\n\n \/\/ Init slider fill\n const sl = document.getElementById('heightSlider');\n sl.style.setProperty('--fill', ((170-100)\/(220-100)*100) + '%');\n\n \/\/ Counter\n function adjust(id, delta, min, max) {\n const el = document.getElementById(id);\n let v = parseInt(el.textContent) + delta;\n if (v < min) v = min;\n if (v > max) v = max;\n el.textContent = v;\n }\n\n \/\/ Calculate\n function calculate() {\n const h = parseInt(document.getElementById('heightSlider').value) \/ 100;\n const w = parseInt(document.getElementById('weightVal').textContent);\n const age = parseInt(document.getElementById('ageVal').textContent);\n const bmi = w \/ (h * h);\n const bmiRounded = Math.round(bmi * 10) \/ 10;\n\n \/\/ Status\n let status, color, tip, gaugePos;\n if (bmi < 18.5) {\n status = '\ud83d\udd35 Ondergewicht'; color = '#3498db'; gaugePos = 8;\n tip = `<strong>Advies:<\/strong> Je BMI is lager dan aanbevolen. Overweeg meer calorierijke voeding te eten en raadpleeg eventueel een di\u00ebtist.`;\n } else if (bmi < 25) {\n status = '\ud83d\udfe2 Normaal gewicht'; color = '#2ecc71'; gaugePos = 32;\n tip = `<strong>Geweldig!<\/strong> Je BMI ligt in het gezonde bereik. Blijf actief en eet gevarieerd om dit te behouden. \ud83d\udcaa`;\n } else if (bmi < 30) {\n status = '\ud83d\udfe1 Overgewicht'; color = '#f1c40f'; gaugePos = 58;\n tip = `<strong>Let op:<\/strong> Je BMI wijst op licht overgewicht. Meer bewegen en gezonder eten kan helpen. Kleine stappen maken groot verschil!`;\n } else if (bmi < 35) {\n status = '\ud83d\udfe0 Obesitas I'; color = '#e67e22'; gaugePos = 78;\n tip = `<strong>Actie gewenst:<\/strong> Je BMI duidt op obesitas. Raadpleeg je huisarts voor persoonlijk advies over leefstijlveranderingen.`;\n } else {\n status = '\ud83d\udd34 Obesitas II\/III'; color = '#e74c3c'; gaugePos = 93;\n tip = `<strong>Medisch advies nodig:<\/strong> Je BMI is aanzienlijk verhoogd. Bespreek dit zo snel mogelijk met je huisarts.`;\n }\n\n document.getElementById('resultBMI').textContent = bmiRounded;\n document.getElementById('resultBMI').style.color = color;\n const statusEl = document.getElementById('resultStatus');\n statusEl.textContent = status;\n statusEl.style.background = color + '22';\n statusEl.style.color = color;\n document.getElementById('gaugeMarker').style.left = gaugePos + '%';\n document.getElementById('resultTip').innerHTML = tip;\n\n const card = document.getElementById('resultCard');\n card.classList.remove('show');\n void card.offsetWidth;\n card.classList.add('show');\n\n card.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n<\/script>\n<\/body>\n","protected":false},"excerpt":{"rendered":"<p>BMI Calculator 09:41 \ud83d\udcf6\ud83d\udd0b BMI Rekenmachine Bereken je Body Mass Index Geslacht \ud83d\udc68Man \ud83d\udc69Vrouw Lengte 170 cm Gewicht 70 kg \u2212 + Leeftijd 25 jaar \u2212 + \ud83d\udd0d Bereken mijn BMI Jouw BMI — — Ondergewicht Normaal Overgewicht Obesitas BMI Categorie\u00ebn Ondergewicht < 18.5 Normaal gewicht 18.5 \u2013 24.9 Overgewicht 25 \u2013 29.9 Obesitas I […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","ngg_post_thumbnail":0,"footnotes":""},"class_list":["post-1754","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mariodekens.be\/index.php\/wp-json\/wp\/v2\/pages\/1754","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mariodekens.be\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mariodekens.be\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mariodekens.be\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mariodekens.be\/index.php\/wp-json\/wp\/v2\/comments?post=1754"}],"version-history":[{"count":1,"href":"https:\/\/mariodekens.be\/index.php\/wp-json\/wp\/v2\/pages\/1754\/revisions"}],"predecessor-version":[{"id":1756,"href":"https:\/\/mariodekens.be\/index.php\/wp-json\/wp\/v2\/pages\/1754\/revisions\/1756"}],"wp:attachment":[{"href":"https:\/\/mariodekens.be\/index.php\/wp-json\/wp\/v2\/media?parent=1754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}