Slanglengte Calculator \u2013 Team Infra<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --bg: #f4f6f8;\n --white: #ffffff;\n --border: #dde2e8;\n --accent: #e84e1b;\n --accent-dark: #c43d12;\n --accent-light: #fff1ed;\n --text: #1a2030;\n --muted: #6b7a90;\n --input-bg: #f9fafb;\n --shadow: 0 2px 12px rgba(0,0,0,0.08);\n --radius: 12px;\n }\n\n html, body {\n background: var(--bg);\n color: var(--text);\n font-family: 'Inter', sans-serif;\n min-height: 100vh;\n -webkit-font-smoothing: antialiased;\n }\n\n \/* Header *\/\n .header {\n background: var(--white);\n border-bottom: 1px solid var(--border);\n padding: 0 1.25rem;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n height: 56px;\n position: sticky;\n top: 0;\n z-index: 10;\n }\n .header-logo {\n width: 28px; height: 28px;\n background: var(--accent);\n border-radius: 6px;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n }\n .header-logo svg { width: 16px; height: 16px; fill: white; }\n .header-title {\n font-size: 0.9rem;\n font-weight: 600;\n color: var(--text);\n }\n .header-sub {\n font-size: 0.75rem;\n color: var(--muted);\n font-weight: 400;\n margin-top: 1px;\n }\n\n \/* Main *\/\n .main {\n padding: 1.25rem;\n max-width: 520px;\n margin: 0 auto;\n }\n\n \/* Card *\/\n .card {\n background: var(--white);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n overflow: hidden;\n margin-bottom: 1rem;\n }\n\n .card-header {\n padding: 1rem 1.25rem;\n border-bottom: 1px solid var(--border);\n display: flex;\n align-items: center;\n gap: 0.6rem;\n }\n .card-icon {\n width: 32px; height: 32px;\n background: var(--accent-light);\n border-radius: 8px;\n display: flex; align-items: center; justify-content: center;\n color: var(--accent);\n flex-shrink: 0;\n font-size: 1rem;\n }\n .card-title {\n font-size: 0.95rem;\n font-weight: 600;\n }\n .card-body { padding: 1.25rem; }\n\n \/* Fields *\/\n .field { margin-bottom: 1rem; }\n .field:last-child { margin-bottom: 0; }\n\n label {\n display: block;\n font-size: 0.8rem;\n font-weight: 600;\n color: var(--muted);\n text-transform: uppercase;\n letter-spacing: 0.06em;\n margin-bottom: 0.5rem;\n }\n\n .input-wrap {\n display: flex;\n align-items: stretch;\n border: 1.5px solid var(--border);\n border-radius: 10px;\n overflow: hidden;\n background: var(--input-bg);\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n .input-wrap:focus-within {\n border-color: var(--accent);\n box-shadow: 0 0 0 3px rgba(232,78,27,0.12);\n background: white;\n }\n\n input[type=\"number\"] {\n flex: 1;\n background: transparent;\n border: none;\n outline: none;\n font-family: 'Inter', sans-serif;\n font-size: 1.15rem;\n font-weight: 600;\n color: var(--text);\n padding: 0.85rem 0.75rem;\n -moz-appearance: textfield;\n min-width: 0;\n }\n input[type=\"number\"]::-webkit-inner-spin-button,\n input[type=\"number\"]::-webkit-outer-spin-button { -webkit-appearance: none; }\n\n .unit-badge {\n background: var(--bg);\n border-left: 1.5px solid var(--border);\n padding: 0 1rem;\n font-size: 0.8rem;\n font-weight: 600;\n color: var(--muted);\n display: flex;\n align-items: center;\n white-space: nowrap;\n min-width: 52px;\n justify-content: center;\n }\n\n \/* Diagram *\/\n .diagram {\n background: var(--bg);\n border-radius: 8px;\n padding: 1rem;\n display: flex;\n align-items: center;\n gap: 1rem;\n margin-bottom: 1rem;\n }\n .diagram svg { width: 64px; height: 64px; flex-shrink: 0; }\n .diagram-text { font-size: 0.78rem; color: var(--muted); line-height: 1.6; }\n .diagram-text strong { color: var(--text); font-weight: 600; }\n\n \/* Button *\/\n .btn {\n width: 100%;\n background: var(--accent);\n color: white;\n border: none;\n border-radius: 10px;\n font-family: 'Inter', sans-serif;\n font-size: 1rem;\n font-weight: 700;\n padding: 1rem;\n cursor: pointer;\n transition: background 0.15s, transform 0.1s;\n letter-spacing: 0.01em;\n min-height: 52px;\n box-shadow: 0 2px 8px rgba(232,78,27,0.3);\n }\n .btn:hover { background: var(--accent-dark); }\n .btn:active { transform: scale(0.98); background: var(--accent-dark); }\n\n \/* Result *\/\n .result-card {\n background: var(--white);\n border: 1.5px solid var(--accent);\n border-radius: var(--radius);\n box-shadow: 0 4px 20px rgba(232,78,27,0.1);\n overflow: hidden;\n display: none;\n animation: slideIn 0.3s ease both;\n }\n .result-card.visible { display: block; }\n\n @keyframes slideIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .result-top {\n background: var(--accent);\n padding: 1.25rem;\n text-align: center;\n color: white;\n }\n .result-top-label {\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n opacity: 0.8;\n margin-bottom: 0.25rem;\n }\n .result-big {\n font-size: 3rem;\n font-weight: 700;\n line-height: 1;\n letter-spacing: -0.02em;\n }\n .result-big span {\n font-size: 1.4rem;\n font-weight: 400;\n opacity: 0.8;\n margin-left: 4px;\n }\n\n .result-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n }\n .result-cell {\n padding: 0.9rem 1.1rem;\n border-right: 1px solid var(--border);\n border-bottom: 1px solid var(--border);\n }\n .result-cell:nth-child(2n) { border-right: none; }\n .result-cell:nth-last-child(-n+2) { border-bottom: none; }\n\n .rc-label {\n font-size: 0.7rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.07em;\n color: var(--muted);\n margin-bottom: 3px;\n }\n .rc-value { font-size: 0.95rem; font-weight: 700; color: var(--text); }\n\n .result-note {\n padding: 0.75rem 1.1rem;\n background: #fffbf9;\n border-top: 1px solid var(--border);\n font-size: 0.75rem;\n color: var(--muted);\n display: flex;\n gap: 0.4rem;\n align-items: flex-start;\n }\n .result-note::before {\n content: '\u2139';\n font-size: 0.85rem;\n color: var(--accent);\n flex-shrink: 0;\n }\n\n \/* Error *\/\n .error {\n background: #fff3f0;\n border: 1px solid #fbbcac;\n border-radius: 8px;\n padding: 0.75rem 1rem;\n font-size: 0.85rem;\n color: #c43d12;\n font-weight: 500;\n display: none;\n margin-top: 0.75rem;\n }\n .error.visible { display: block; }\n\n .footer {\n text-align: center;\n font-size: 0.72rem;\n color: var(--muted);\n padding: 1rem 0 2rem;\n }\n\n @media (min-width: 480px) {\n .main { padding: 2rem 1.5rem; }\n .result-big { font-size: 3.5rem; }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"header\">\n <div class=\"header-logo\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z\"\/>\n <\/svg>\n <\/div>\n <div>\n <div class=\"header-title\">Team Infra<\/div>\n <div class=\"header-sub\">Calculators<\/div>\n <\/div>\n<\/div>\n\n<div class=\"main\">\n\n <div class=\"card\">\n <div class=\"card-header\">\n <div class=\"card-icon\">\ud83c\udf00<\/div>\n <div class=\"card-title\">Slanglengte Calculator<\/div>\n <\/div>\n <div class=\"card-body\">\n\n <div class=\"diagram\">\n <svg viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <circle cx=\"32\" cy=\"32\" r=\"30\" stroke=\"#e84e1b\" stroke-width=\"1.5\" stroke-dasharray=\"5 3\" opacity=\"0.35\"\/>\n <circle cx=\"32\" cy=\"32\" r=\"24\" stroke=\"#e84e1b\" stroke-width=\"1.5\" stroke-dasharray=\"5 3\" opacity=\"0.5\"\/>\n <circle cx=\"32\" cy=\"32\" r=\"18\" stroke=\"#e84e1b\" stroke-width=\"1.5\" stroke-dasharray=\"5 3\" opacity=\"0.65\"\/>\n <circle cx=\"32\" cy=\"32\" r=\"12\" stroke=\"#e84e1b\" stroke-width=\"1.5\" stroke-dasharray=\"5 3\" opacity=\"0.8\"\/>\n <circle cx=\"32\" cy=\"32\" r=\"6\" stroke=\"#e84e1b\" stroke-width=\"1.5\" stroke-dasharray=\"5 3\" opacity=\"0.9\"\/>\n <line x1=\"2\" y1=\"32\" x2=\"62\" y2=\"32\" stroke=\"#dde2e8\" stroke-width=\"1\" stroke-dasharray=\"3 2\"\/>\n <circle cx=\"32\" cy=\"32\" r=\"2.5\" fill=\"#e84e1b\"\/>\n <\/svg>\n <div class=\"diagram-text\">\n <strong>Formule (quick & dirty)<\/strong><br>\n Gem. omtrek = \u03c0 \u00d7 buitendiameter<br>\n Lengte = omtrek \u00d7 omwentelingen\n <\/div>\n <\/div>\n\n <div class=\"field\">\n <label>Buitendiameter van de rol<\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"diameter\" inputmode=\"decimal\" placeholder=\"85\" min=\"0.1\" step=\"0.1\">\n <div class=\"unit-badge\">cm<\/div>\n <\/div>\n <\/div>\n\n <div class=\"field\">\n <label>Aantal omwentelingen<\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"turns\" inputmode=\"numeric\" placeholder=\"40\" min=\"1\" step=\"1\">\n <div class=\"unit-badge\">\u00d7 ronden<\/div>\n <\/div>\n <\/div>\n\n <div class=\"error\" id=\"error\">Vul beide velden in met geldige waarden.<\/div>\n\n <\/div>\n <\/div>\n\n <button class=\"btn\" onclick=\"calculate()\">Bereken slanglengte \u2192<\/button>\n\n <div style=\"height: 1rem;\"><\/div>\n\n <div class=\"result-card\" id=\"result\">\n <div class=\"result-top\">\n <div class=\"result-top-label\">Geschatte slanglengte<\/div>\n <div class=\"result-big\" id=\"result-value\">\u2014<span>m<\/span><\/div>\n <\/div>\n <div class=\"result-grid\" id=\"breakdown\"><\/div>\n <div class=\"result-note\">\n Quick & dirty schatting \u2014 binnendiameter niet meegenomen. Werkelijke lengte kan iets korter zijn.\n <\/div>\n <\/div>\n\n <div class=\"footer\">Wiki Team Infra \u00b7 Slanglengte Calculator<\/div>\n\n<\/div>\n\n<script>\nfunction calculate() {\n const d = parseFloat(document.getElementById('diameter').value);\n const n = parseFloat(document.getElementById('turns').value);\n const resultEl = document.getElementById('result');\n const errorEl = document.getElementById('error');\n const valueEl = document.getElementById('result-value');\n const bdEl = document.getElementById('breakdown');\n\n errorEl.classList.remove('visible');\n resultEl.classList.remove('visible');\n\n if (!d || !n || d <= 0 || n <= 0) {\n errorEl.classList.add('visible');\n return;\n }\n\n const circumference = Math.PI * d;\n const totalCm = circumference * n;\n const totalM = totalCm \/ 100;\n\n valueEl.innerHTML = totalM.toFixed(1) + '<span>m<\/span>';\n\n bdEl.innerHTML = `\n <div class=\"result-cell\">\n <div class=\"rc-label\">Buitendiameter<\/div>\n <div class=\"rc-value\">${d} cm<\/div>\n <\/div>\n <div class=\"result-cell\">\n <div class=\"rc-label\">Omwentelingen<\/div>\n <div class=\"rc-value\">${n}\u00d7<\/div>\n <\/div>\n <div class=\"result-cell\">\n <div class=\"rc-label\">Gem. omtrek<\/div>\n <div class=\"rc-value\">${circumference.toFixed(1)} cm<\/div>\n <\/div>\n <div class=\"result-cell\">\n <div class=\"rc-label\">Totaal<\/div>\n <div class=\"rc-value\">${Math.round(totalCm).toLocaleString('nl')} cm<\/div>\n <\/div>\n `;\n\n void resultEl.offsetWidth;\n resultEl.classList.add('visible');\n resultEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n}\n\ndocument.addEventListener('keydown', e => { if (e.key === 'Enter') calculate(); });\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Slanglengte Calculator \u2013 Team Infra Team Infra Calculators \ud83c\udf00 Slanglengte Calculator Formule (quick & dirty) Gem. omtrek = \u03c0 \u00d7 buitendiameter Lengte = omtrek \u00d7 omwentelingen Buitendiameter van de rol cm Aantal omwentelingen \u00d7 ronden Vul beide velden in met geldige waarden. Bereken slanglengte \u2192 Geschatte slanglengte \u2014m Quick & dirty schatting \u2014 binnendiameter niet […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70],"tags":[69,49],"class_list":["post-173","post","type-post","status-publish","format-standard","hentry","category-calculators","tag-tyleen","tag-water"],"_links":{"self":[{"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/posts\/173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=173"}],"version-history":[{"count":2,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/posts\/173\/revisions"}],"predecessor-version":[{"id":175,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/posts\/173\/revisions\/175"}],"wp:attachment":[{"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":173,"date":"2026-03-06T08:50:06","date_gmt":"2026-03-06T08:50:06","guid":{"rendered":"https:\/\/wiki.teaminfra.nl\/?p=173"},"modified":"2026-03-06T08:51:18","modified_gmt":"2026-03-06T08:51:18","slug":"tyleen-calculator","status":"publish","type":"post","link":"https:\/\/wiki.teaminfra.nl\/?p=173","title":{"rendered":"Tyleen calculator"},"content":{"rendered":"\n\n\n\n\n\nSlanglengte Calculator \u2013 Team Infra<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --bg: #f4f6f8;\n --white: #ffffff;\n --border: #dde2e8;\n --accent: #e84e1b;\n --accent-dark: #c43d12;\n --accent-light: #fff1ed;\n --text: #1a2030;\n --muted: #6b7a90;\n --input-bg: #f9fafb;\n --shadow: 0 2px 12px rgba(0,0,0,0.08);\n --radius: 12px;\n }\n\n html, body {\n background: var(--bg);\n color: var(--text);\n font-family: 'Inter', sans-serif;\n min-height: 100vh;\n -webkit-font-smoothing: antialiased;\n }\n\n \/* Header *\/\n .header {\n background: var(--white);\n border-bottom: 1px solid var(--border);\n padding: 0 1.25rem;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n height: 56px;\n position: sticky;\n top: 0;\n z-index: 10;\n }\n .header-logo {\n width: 28px; height: 28px;\n background: var(--accent);\n border-radius: 6px;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n }\n .header-logo svg { width: 16px; height: 16px; fill: white; }\n .header-title {\n font-size: 0.9rem;\n font-weight: 600;\n color: var(--text);\n }\n .header-sub {\n font-size: 0.75rem;\n color: var(--muted);\n font-weight: 400;\n margin-top: 1px;\n }\n\n \/* Main *\/\n .main {\n padding: 1.25rem;\n max-width: 520px;\n margin: 0 auto;\n }\n\n \/* Card *\/\n .card {\n background: var(--white);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n overflow: hidden;\n margin-bottom: 1rem;\n }\n\n .card-header {\n padding: 1rem 1.25rem;\n border-bottom: 1px solid var(--border);\n display: flex;\n align-items: center;\n gap: 0.6rem;\n }\n .card-icon {\n width: 32px; height: 32px;\n background: var(--accent-light);\n border-radius: 8px;\n display: flex; align-items: center; justify-content: center;\n color: var(--accent);\n flex-shrink: 0;\n font-size: 1rem;\n }\n .card-title {\n font-size: 0.95rem;\n font-weight: 600;\n }\n .card-body { padding: 1.25rem; }\n\n \/* Fields *\/\n .field { margin-bottom: 1rem; }\n .field:last-child { margin-bottom: 0; }\n\n label {\n display: block;\n font-size: 0.8rem;\n font-weight: 600;\n color: var(--muted);\n text-transform: uppercase;\n letter-spacing: 0.06em;\n margin-bottom: 0.5rem;\n }\n\n .input-wrap {\n display: flex;\n align-items: stretch;\n border: 1.5px solid var(--border);\n border-radius: 10px;\n overflow: hidden;\n background: var(--input-bg);\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n .input-wrap:focus-within {\n border-color: var(--accent);\n box-shadow: 0 0 0 3px rgba(232,78,27,0.12);\n background: white;\n }\n\n input[type=\"number\"] {\n flex: 1;\n background: transparent;\n border: none;\n outline: none;\n font-family: 'Inter', sans-serif;\n font-size: 1.15rem;\n font-weight: 600;\n color: var(--text);\n padding: 0.85rem 0.75rem;\n -moz-appearance: textfield;\n min-width: 0;\n }\n input[type=\"number\"]::-webkit-inner-spin-button,\n input[type=\"number\"]::-webkit-outer-spin-button { -webkit-appearance: none; }\n\n .unit-badge {\n background: var(--bg);\n border-left: 1.5px solid var(--border);\n padding: 0 1rem;\n font-size: 0.8rem;\n font-weight: 600;\n color: var(--muted);\n display: flex;\n align-items: center;\n white-space: nowrap;\n min-width: 52px;\n justify-content: center;\n }\n\n \/* Diagram *\/\n .diagram {\n background: var(--bg);\n border-radius: 8px;\n padding: 1rem;\n display: flex;\n align-items: center;\n gap: 1rem;\n margin-bottom: 1rem;\n }\n .diagram svg { width: 64px; height: 64px; flex-shrink: 0; }\n .diagram-text { font-size: 0.78rem; color: var(--muted); line-height: 1.6; }\n .diagram-text strong { color: var(--text); font-weight: 600; }\n\n \/* Button *\/\n .btn {\n width: 100%;\n background: var(--accent);\n color: white;\n border: none;\n border-radius: 10px;\n font-family: 'Inter', sans-serif;\n font-size: 1rem;\n font-weight: 700;\n padding: 1rem;\n cursor: pointer;\n transition: background 0.15s, transform 0.1s;\n letter-spacing: 0.01em;\n min-height: 52px;\n box-shadow: 0 2px 8px rgba(232,78,27,0.3);\n }\n .btn:hover { background: var(--accent-dark); }\n .btn:active { transform: scale(0.98); background: var(--accent-dark); }\n\n \/* Result *\/\n .result-card {\n background: var(--white);\n border: 1.5px solid var(--accent);\n border-radius: var(--radius);\n box-shadow: 0 4px 20px rgba(232,78,27,0.1);\n overflow: hidden;\n display: none;\n animation: slideIn 0.3s ease both;\n }\n .result-card.visible { display: block; }\n\n @keyframes slideIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .result-top {\n background: var(--accent);\n padding: 1.25rem;\n text-align: center;\n color: white;\n }\n .result-top-label {\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n opacity: 0.8;\n margin-bottom: 0.25rem;\n }\n .result-big {\n font-size: 3rem;\n font-weight: 700;\n line-height: 1;\n letter-spacing: -0.02em;\n }\n .result-big span {\n font-size: 1.4rem;\n font-weight: 400;\n opacity: 0.8;\n margin-left: 4px;\n }\n\n .result-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n }\n .result-cell {\n padding: 0.9rem 1.1rem;\n border-right: 1px solid var(--border);\n border-bottom: 1px solid var(--border);\n }\n .result-cell:nth-child(2n) { border-right: none; }\n .result-cell:nth-last-child(-n+2) { border-bottom: none; }\n\n .rc-label {\n font-size: 0.7rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.07em;\n color: var(--muted);\n margin-bottom: 3px;\n }\n .rc-value { font-size: 0.95rem; font-weight: 700; color: var(--text); }\n\n .result-note {\n padding: 0.75rem 1.1rem;\n background: #fffbf9;\n border-top: 1px solid var(--border);\n font-size: 0.75rem;\n color: var(--muted);\n display: flex;\n gap: 0.4rem;\n align-items: flex-start;\n }\n .result-note::before {\n content: '\u2139';\n font-size: 0.85rem;\n color: var(--accent);\n flex-shrink: 0;\n }\n\n \/* Error *\/\n .error {\n background: #fff3f0;\n border: 1px solid #fbbcac;\n border-radius: 8px;\n padding: 0.75rem 1rem;\n font-size: 0.85rem;\n color: #c43d12;\n font-weight: 500;\n display: none;\n margin-top: 0.75rem;\n }\n .error.visible { display: block; }\n\n .footer {\n text-align: center;\n font-size: 0.72rem;\n color: var(--muted);\n padding: 1rem 0 2rem;\n }\n\n @media (min-width: 480px) {\n .main { padding: 2rem 1.5rem; }\n .result-big { font-size: 3.5rem; }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"header\">\n <div class=\"header-logo\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z\"\/>\n <\/svg>\n <\/div>\n <div>\n <div class=\"header-title\">Team Infra<\/div>\n <div class=\"header-sub\">Calculators<\/div>\n <\/div>\n<\/div>\n\n<div class=\"main\">\n\n <div class=\"card\">\n <div class=\"card-header\">\n <div class=\"card-icon\">\ud83c\udf00<\/div>\n <div class=\"card-title\">Slanglengte Calculator<\/div>\n <\/div>\n <div class=\"card-body\">\n\n <div class=\"diagram\">\n <svg viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <circle cx=\"32\" cy=\"32\" r=\"30\" stroke=\"#e84e1b\" stroke-width=\"1.5\" stroke-dasharray=\"5 3\" opacity=\"0.35\"\/>\n <circle cx=\"32\" cy=\"32\" r=\"24\" stroke=\"#e84e1b\" stroke-width=\"1.5\" stroke-dasharray=\"5 3\" opacity=\"0.5\"\/>\n <circle cx=\"32\" cy=\"32\" r=\"18\" stroke=\"#e84e1b\" stroke-width=\"1.5\" stroke-dasharray=\"5 3\" opacity=\"0.65\"\/>\n <circle cx=\"32\" cy=\"32\" r=\"12\" stroke=\"#e84e1b\" stroke-width=\"1.5\" stroke-dasharray=\"5 3\" opacity=\"0.8\"\/>\n <circle cx=\"32\" cy=\"32\" r=\"6\" stroke=\"#e84e1b\" stroke-width=\"1.5\" stroke-dasharray=\"5 3\" opacity=\"0.9\"\/>\n <line x1=\"2\" y1=\"32\" x2=\"62\" y2=\"32\" stroke=\"#dde2e8\" stroke-width=\"1\" stroke-dasharray=\"3 2\"\/>\n <circle cx=\"32\" cy=\"32\" r=\"2.5\" fill=\"#e84e1b\"\/>\n <\/svg>\n <div class=\"diagram-text\">\n <strong>Formule (quick & dirty)<\/strong><br>\n Gem. omtrek = \u03c0 \u00d7 buitendiameter<br>\n Lengte = omtrek \u00d7 omwentelingen\n <\/div>\n <\/div>\n\n <div class=\"field\">\n <label>Buitendiameter van de rol<\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"diameter\" inputmode=\"decimal\" placeholder=\"85\" min=\"0.1\" step=\"0.1\">\n <div class=\"unit-badge\">cm<\/div>\n <\/div>\n <\/div>\n\n <div class=\"field\">\n <label>Aantal omwentelingen<\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"turns\" inputmode=\"numeric\" placeholder=\"40\" min=\"1\" step=\"1\">\n <div class=\"unit-badge\">\u00d7 ronden<\/div>\n <\/div>\n <\/div>\n\n <div class=\"error\" id=\"error\">Vul beide velden in met geldige waarden.<\/div>\n\n <\/div>\n <\/div>\n\n <button class=\"btn\" onclick=\"calculate()\">Bereken slanglengte \u2192<\/button>\n\n <div style=\"height: 1rem;\"><\/div>\n\n <div class=\"result-card\" id=\"result\">\n <div class=\"result-top\">\n <div class=\"result-top-label\">Geschatte slanglengte<\/div>\n <div class=\"result-big\" id=\"result-value\">\u2014<span>m<\/span><\/div>\n <\/div>\n <div class=\"result-grid\" id=\"breakdown\"><\/div>\n <div class=\"result-note\">\n Quick & dirty schatting \u2014 binnendiameter niet meegenomen. Werkelijke lengte kan iets korter zijn.\n <\/div>\n <\/div>\n\n <div class=\"footer\">Wiki Team Infra \u00b7 Slanglengte Calculator<\/div>\n\n<\/div>\n\n<script>\nfunction calculate() {\n const d = parseFloat(document.getElementById('diameter').value);\n const n = parseFloat(document.getElementById('turns').value);\n const resultEl = document.getElementById('result');\n const errorEl = document.getElementById('error');\n const valueEl = document.getElementById('result-value');\n const bdEl = document.getElementById('breakdown');\n\n errorEl.classList.remove('visible');\n resultEl.classList.remove('visible');\n\n if (!d || !n || d <= 0 || n <= 0) {\n errorEl.classList.add('visible');\n return;\n }\n\n const circumference = Math.PI * d;\n const totalCm = circumference * n;\n const totalM = totalCm \/ 100;\n\n valueEl.innerHTML = totalM.toFixed(1) + '<span>m<\/span>';\n\n bdEl.innerHTML = `\n <div class=\"result-cell\">\n <div class=\"rc-label\">Buitendiameter<\/div>\n <div class=\"rc-value\">${d} cm<\/div>\n <\/div>\n <div class=\"result-cell\">\n <div class=\"rc-label\">Omwentelingen<\/div>\n <div class=\"rc-value\">${n}\u00d7<\/div>\n <\/div>\n <div class=\"result-cell\">\n <div class=\"rc-label\">Gem. omtrek<\/div>\n <div class=\"rc-value\">${circumference.toFixed(1)} cm<\/div>\n <\/div>\n <div class=\"result-cell\">\n <div class=\"rc-label\">Totaal<\/div>\n <div class=\"rc-value\">${Math.round(totalCm).toLocaleString('nl')} cm<\/div>\n <\/div>\n `;\n\n void resultEl.offsetWidth;\n resultEl.classList.add('visible');\n resultEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n}\n\ndocument.addEventListener('keydown', e => { if (e.key === 'Enter') calculate(); });\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Slanglengte Calculator \u2013 Team Infra Team Infra Calculators \ud83c\udf00 Slanglengte Calculator Formule (quick & dirty) Gem. omtrek = \u03c0 \u00d7 buitendiameter Lengte = omtrek \u00d7 omwentelingen Buitendiameter van de rol cm Aantal omwentelingen \u00d7 ronden Vul beide velden in met geldige waarden. Bereken slanglengte \u2192 Geschatte slanglengte \u2014m Quick & dirty schatting \u2014 binnendiameter niet […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70],"tags":[69,49],"class_list":["post-173","post","type-post","status-publish","format-standard","hentry","category-calculators","tag-tyleen","tag-water"],"_links":{"self":[{"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/posts\/173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=173"}],"version-history":[{"count":2,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/posts\/173\/revisions"}],"predecessor-version":[{"id":175,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/posts\/173\/revisions\/175"}],"wp:attachment":[{"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}