Stroom 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 --green: #16a34a;\n --green-light: #f0fdf4;\n --yellow: #d97706;\n --yellow-light: #fffbeb;\n --red: #dc2626;\n --red-light: #fef2f2;\n --shadow: 0 2px 12px rgba(0,0,0,0.07);\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 \/* \u2500\u2500 Header \u2500\u2500 *\/\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 { font-size: 0.9rem; font-weight: 600; }\n .header-sub { font-size: 0.75rem; color: var(--muted); margin-top: 1px; }\n\n \/* \u2500\u2500 Main \u2500\u2500 *\/\n .main {\n padding: 1.25rem;\n max-width: 540px;\n margin: 0 auto;\n }\n\n \/* \u2500\u2500 Section label \u2500\u2500 *\/\n .section-label {\n font-size: 0.7rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n color: var(--muted);\n margin: 1.25rem 0 0.6rem;\n }\n .section-label:first-child { margin-top: 0; }\n\n \/* \u2500\u2500 Card \u2500\u2500 *\/\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: 0.75rem;\n }\n\n .card-header {\n padding: 0.9rem 1.1rem;\n border-bottom: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.6rem;\n cursor: pointer;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n }\n .card-header-left { display: flex; align-items: center; gap: 0.6rem; }\n .card-icon {\n width: 30px; height: 30px;\n background: var(--accent-light);\n border-radius: 7px;\n display: flex; align-items: center; justify-content: center;\n font-size: 0.9rem;\n flex-shrink: 0;\n }\n .card-title { font-size: 0.9rem; font-weight: 600; }\n .card-subtitle { font-size: 0.72rem; color: var(--muted); margin-top: 1px; }\n\n .chevron {\n color: var(--muted);\n transition: transform 0.2s;\n font-size: 0.75rem;\n }\n .card.open .chevron { transform: rotate(180deg); }\n\n .card-body {\n padding: 1.1rem;\n display: none;\n }\n .card.open .card-body { display: block; }\n\n \/* \u2500\u2500 Voltage selector \u2500\u2500 *\/\n .volt-toggle {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.4rem;\n margin-bottom: 1rem;\n }\n .volt-btn {\n background: var(--input-bg);\n border: 1.5px solid var(--border);\n border-radius: 8px;\n padding: 0.6rem;\n text-align: center;\n font-family: 'Inter', sans-serif;\n font-size: 0.85rem;\n font-weight: 600;\n color: var(--muted);\n cursor: pointer;\n transition: all 0.15s;\n min-height: 44px;\n }\n .volt-btn.active {\n background: var(--accent-light);\n border-color: var(--accent);\n color: var(--accent);\n }\n .volt-btn .vb-sub { font-size: 0.68rem; font-weight: 400; display: block; color: inherit; opacity: 0.7; margin-top: 1px; }\n\n \/* \u2500\u2500 Phase selector \u2500\u2500 *\/\n .phase-toggle {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.4rem;\n margin-bottom: 1rem;\n }\n .phase-btn {\n background: var(--input-bg);\n border: 1.5px solid var(--border);\n border-radius: 8px;\n padding: 0.6rem;\n text-align: center;\n font-family: 'Inter', sans-serif;\n font-size: 0.85rem;\n font-weight: 600;\n color: var(--muted);\n cursor: pointer;\n transition: all 0.15s;\n min-height: 44px;\n }\n .phase-btn.active {\n background: var(--accent-light);\n border-color: var(--accent);\n color: var(--accent);\n }\n .phase-btn .pb-sub { font-size: 0.68rem; font-weight: 400; display: block; opacity: 0.7; margin-top: 1px; }\n\n \/* \u2500\u2500 Input field \u2500\u2500 *\/\n .field { margin-bottom: 1rem; }\n .field:last-of-type { margin-bottom: 0; }\n\n label {\n display: block;\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--muted);\n text-transform: uppercase;\n letter-spacing: 0.06em;\n margin-bottom: 0.45rem;\n }\n\n .input-wrap {\n display: flex;\n border: 1.5px solid var(--border);\n border-radius: 9px;\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 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.1rem;\n font-weight: 600;\n color: var(--text);\n padding: 0.8rem 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 .unit-badge {\n background: var(--bg);\n border-left: 1.5px solid var(--border);\n padding: 0 0.9rem;\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: 48px;\n justify-content: center;\n }\n\n \/* \u2500\u2500 PF row \u2500\u2500 *\/\n .pf-row {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin-bottom: 1rem;\n background: var(--bg);\n border-radius: 8px;\n padding: 0.6rem 0.8rem;\n }\n .pf-label { font-size: 0.75rem; font-weight: 600; color: var(--muted); flex: 1; }\n .pf-note { font-size: 0.68rem; color: var(--muted); opacity: 0.7; }\n input[type=\"range\"] {\n flex: 2;\n accent-color: var(--accent);\n height: 4px;\n cursor: pointer;\n }\n .pf-value { font-size: 0.85rem; font-weight: 700; color: var(--accent); min-width: 32px; text-align: right; }\n\n \/* \u2500\u2500 Calc button \u2500\u2500 *\/\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: 0.95rem;\n cursor: pointer;\n transition: background 0.15s, transform 0.1s;\n min-height: 52px;\n box-shadow: 0 2px 8px rgba(232,78,27,0.28);\n margin-top: 0.5rem;\n }\n .btn:hover { background: var(--accent-dark); }\n .btn:active { transform: scale(0.98); }\n\n \/* \u2500\u2500 Result \u2500\u2500 *\/\n .result-wrap {\n display: none;\n animation: slideIn 0.3s ease both;\n }\n .result-wrap.visible { display: block; }\n\n @keyframes slideIn {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .result-hero {\n background: var(--accent);\n border-radius: var(--radius);\n padding: 1.4rem 1.25rem;\n text-align: center;\n color: white;\n margin-bottom: 0.75rem;\n box-shadow: 0 4px 20px rgba(232,78,27,0.25);\n }\n .rh-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.75; margin-bottom: 4px; }\n .rh-value { font-size: 3.2rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }\n .rh-value span { font-size: 1.3rem; font-weight: 400; opacity: 0.75; margin-left: 4px; }\n .rh-sub { font-size: 0.78rem; opacity: 0.7; margin-top: 6px; }\n\n \/* Generator advice *\/\n .gen-advice {\n border-radius: var(--radius);\n padding: 1rem 1.1rem;\n margin-bottom: 0.75rem;\n display: flex;\n align-items: flex-start;\n gap: 0.75rem;\n border: 1.5px solid;\n }\n .gen-advice.green { background: var(--green-light); border-color: #86efac; }\n .gen-advice.yellow { background: var(--yellow-light); border-color: #fcd34d; }\n .gen-advice.red { background: var(--red-light); border-color: #fca5a5; }\n .ga-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }\n .ga-title { font-size: 0.85rem; font-weight: 700; margin-bottom: 2px; }\n .gen-advice.green .ga-title { color: var(--green); }\n .gen-advice.yellow .ga-title { color: var(--yellow); }\n .gen-advice.red .ga-title { color: var(--red); }\n .ga-text { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }\n\n \/* Fleet grid *\/\n .fleet-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.35rem;\n }\n .fleet-item {\n background: rgba(255,255,255,0.6);\n border: 1px solid var(--border);\n border-radius: 7px;\n padding: 0.45rem 0.6rem;\n display: flex;\n flex-direction: column;\n gap: 1px;\n }\n .fleet-item.fleet-rec {\n background: white;\n border-color: var(--accent);\n box-shadow: 0 0 0 2px rgba(232,78,27,0.15);\n }\n .fleet-kva { font-size: 0.82rem; font-weight: 700; color: var(--text); }\n .fleet-item.fleet-rec .fleet-kva { color: var(--accent); }\n .fleet-note { font-size: 0.65rem; color: var(--muted); line-height: 1.3; }\n .fleet-badge {\n display: inline-block;\n background: var(--accent);\n color: white;\n font-size: 0.62rem;\n font-weight: 700;\n border-radius: 4px;\n padding: 1px 5px;\n margin-top: 2px;\n width: fit-content;\n }\n .fleet-combo {\n grid-column: 1 \/ -1;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 4px;\n }\n .fleet-combo .fleet-kva { font-size: 0.88rem; }\n\n \/* Breakdown grid *\/\n .breakdown {\n background: var(--white);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n overflow: hidden;\n box-shadow: var(--shadow);\n }\n .bk-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.75rem 1.1rem;\n border-bottom: 1px solid var(--border);\n font-size: 0.85rem;\n }\n .bk-row:last-child { border-bottom: none; }\n .bk-key { color: var(--muted); font-weight: 500; }\n .bk-val { font-weight: 700; color: var(--text); }\n .bk-val.accent { color: var(--accent); }\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.82rem;\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.7rem;\n color: var(--muted);\n padding: 1rem 0 2.5rem;\n }\n\n @media (min-width: 480px) {\n .main { padding: 2rem 1.5rem; }\n .rh-value { font-size: 3.8rem; }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"header\">\n <div class=\"header-logo\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\/><\/svg>\n <\/div>\n <div>\n <div class=\"header-title\">Team Infra<\/div>\n <div class=\"header-sub\">Stroom Calculator<\/div>\n <\/div>\n<\/div>\n\n<div class=\"main\">\n\n \n <div class=\"section-label\">Netspanning<\/div>\n <div class=\"card open\" id=\"card-volt\">\n <div class=\"card-header\" onclick=\"toggleCard('card-volt')\">\n <div class=\"card-header-left\">\n <div class=\"card-icon\">\u26a1<\/div>\n <div>\n <div class=\"card-title\">Spanning & fase<\/div>\n <div class=\"card-subtitle\">Vaste instelling voor alle berekeningen<\/div>\n <\/div>\n <\/div>\n <div class=\"chevron\">\u25bc<\/div>\n <\/div>\n <div class=\"card-body\">\n <label>Spanning<\/label>\n <div class=\"volt-toggle\">\n <button class=\"volt-btn\" id=\"v230\" onclick=\"setVolt(230)\">\n 230V <span class=\"vb-sub\">Enkelfasig<\/span>\n <\/button>\n <button class=\"volt-btn active\" id=\"v400\" onclick=\"setVolt(400)\">\n 400V <span class=\"vb-sub\">Driefasig<\/span>\n <\/button>\n <\/div>\n <label>Aantal fasen<\/label>\n <div class=\"phase-toggle\">\n <button class=\"phase-btn\" id=\"p1\" onclick=\"setPhase(1)\">\n 1-fase <span class=\"pb-sub\">230V<\/span>\n <\/button>\n <button class=\"phase-btn active\" id=\"p3\" onclick=\"setPhase(3)\">\n 3-fase <span class=\"pb-sub\">400V<\/span>\n <\/button>\n <\/div>\n <div class=\"pf-row\">\n <span class=\"pf-label\">Vermogensfactor (cos \u03c6)<\/span>\n <input type=\"range\" id=\"pf-slider\" min=\"0.6\" max=\"1.0\" step=\"0.01\" value=\"0.8\" oninput=\"updatePF()\">\n <span class=\"pf-value\" id=\"pf-display\">0.80<\/span>\n <\/div>\n <div class=\"pf-note\" style=\"font-size:0.72rem;color:var(--muted);margin-top:-0.5rem;padding:0 0.1rem;\">\n \u2139 Standaard 0.80 voor generatorberekeningen. Motoren \u00b10.7\u20130.85, verlichting\/elektronica \u00b10.9\u20131.0\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"section-label\">Invoer \u2014 kies \u00e9\u00e9n methode<\/div>\n <div class=\"card open\" id=\"card-watt\">\n <div class=\"card-header\" onclick=\"toggleCard('card-watt')\">\n <div class=\"card-header-left\">\n <div class=\"card-icon\">\ud83d\udca1<\/div>\n <div>\n <div class=\"card-title\">Vermogen in Watt of kW<\/div>\n <div class=\"card-subtitle\">Vul W \u00f3f kW in<\/div>\n <\/div>\n <\/div>\n <div class=\"chevron\">\u25bc<\/div>\n <\/div>\n <div class=\"card-body\">\n <div class=\"field\">\n <label>Vermogen in Watt (W)<\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"input-w\" inputmode=\"decimal\" placeholder=\"bv. 3500\" min=\"0\" step=\"1\" oninput=\"syncKW()\">\n <div class=\"unit-badge\">W<\/div>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>Vermogen in kiloWatt (kW)<\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"input-kw\" inputmode=\"decimal\" placeholder=\"bv. 3.5\" min=\"0\" step=\"0.01\" oninput=\"syncW()\">\n <div class=\"unit-badge\">kW<\/div>\n <\/div>\n <\/div>\n <button class=\"btn\" onclick=\"calcFromWatt()\">Bereken \u2192 kVA \u26a1<\/button>\n <div class=\"error\" id=\"err-watt\">Vul een geldig vermogen in (W of kW).<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card\" id=\"card-amp\">\n <div class=\"card-header\" onclick=\"toggleCard('card-amp')\">\n <div class=\"card-header-left\">\n <div class=\"card-icon\">\ud83d\udd0c<\/div>\n <div>\n <div class=\"card-title\">Stroomsterkte in Amp\u00e8re<\/div>\n <div class=\"card-subtitle\">Alleen amperage bekend<\/div>\n <\/div>\n <\/div>\n <div class=\"chevron\">\u25bc<\/div>\n <\/div>\n <div class=\"card-body\">\n <div class=\"field\">\n <label>Stroom (A)<\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"input-a\" inputmode=\"decimal\" placeholder=\"bv. 16\" min=\"0\" step=\"0.1\">\n <div class=\"unit-badge\">A<\/div>\n <\/div>\n <\/div>\n <button class=\"btn\" onclick=\"calcFromAmp()\">Bereken \u2192 kVA \u26a1<\/button>\n <div class=\"error\" id=\"err-amp\">Vul een geldig amperage in.<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"section-label\">Resultaat<\/div>\n <div class=\"result-wrap\" id=\"result-wrap\">\n\n <div class=\"result-hero\">\n <div class=\"rh-label\">Benodigde generatorcapaciteit<\/div>\n <div class=\"rh-value\" id=\"res-kva\">\u2014<span>kVA<\/span><\/div>\n <div class=\"rh-sub\" id=\"res-sub\">\u2014<\/div>\n <\/div>\n\n <div class=\"gen-advice\" id=\"gen-advice\">\n <div class=\"ga-icon\" id=\"ga-icon\">\u26a1<\/div>\n <div>\n <div class=\"ga-title\" id=\"ga-title\">\u2014<\/div>\n <div class=\"ga-text\" id=\"ga-text\">\u2014<\/div>\n <\/div>\n <\/div>\n\n <div class=\"breakdown\" id=\"breakdown\"><\/div>\n <\/div>\n\n <div class=\"footer\">Wiki Team Infra \u00b7 Stroom Calculator<\/div>\n<\/div>\n\n<script>\n let volt = 400;\n let phase = 3;\n let pf = 0.80;\n\n \/\/ \u2500\u2500 UI controls \u2500\u2500\n function toggleCard(id) {\n const c = document.getElementById(id);\n c.classList.toggle('open');\n }\n\n function setVolt(v) {\n volt = v;\n document.getElementById('v230').classList.toggle('active', v === 230);\n document.getElementById('v400').classList.toggle('active', v === 400);\n \/\/ Auto-sync phase\n setPhase(v === 400 ? 3 : 1);\n }\n\n function setPhase(p) {\n phase = p;\n document.getElementById('p1').classList.toggle('active', p === 1);\n document.getElementById('p3').classList.toggle('active', p === 3);\n \/\/ Sync voltage display\n if (p === 1 && volt !== 230) setVoltOnly(230);\n if (p === 3 && volt !== 400) setVoltOnly(400);\n }\n\n function setVoltOnly(v) {\n volt = v;\n document.getElementById('v230').classList.toggle('active', v === 230);\n document.getElementById('v400').classList.toggle('active', v === 400);\n }\n\n function updatePF() {\n pf = parseFloat(document.getElementById('pf-slider').value);\n document.getElementById('pf-display').textContent = pf.toFixed(2);\n }\n\n \/\/ Sync W \u2194 kW\n function syncKW() {\n const w = document.getElementById('input-w').value;\n document.getElementById('input-kw').value = w !== '' ? (parseFloat(w) \/ 1000).toFixed(3).replace(\/\\.?0+$\/, '') : '';\n }\n function syncW() {\n const kw = document.getElementById('input-kw').value;\n document.getElementById('input-w').value = kw !== '' ? Math.round(parseFloat(kw) * 1000) : '';\n }\n\n \/\/ \u2500\u2500 Formulas \u2500\u2500\n \/\/ 1-fase: kVA = (V \u00d7 A) \/ 1000 = kW \/ pf\n \/\/ 3-fase: kVA = (\u221a3 \u00d7 V \u00d7 A) \/ 1000 = kW \/ pf\n const SQRT3 = Math.sqrt(3);\n\n function kvaFromKW(kw) {\n return kw \/ pf;\n }\n\n function kvaFromAmp(a) {\n if (phase === 1) return (volt * a) \/ 1000;\n return (SQRT3 * volt * a) \/ 1000;\n }\n\n function ampFromKVA(kva) {\n if (phase === 1) return (kva * 1000) \/ volt;\n return (kva * 1000) \/ (SQRT3 * volt);\n }\n\n \/\/ \u2500\u2500 Team Infra vloot \u2500\u2500\n const flPowerrental = [\n { kva: 40, label: '40 kVA', note: '' },\n { kva: 60, label: '60 kVA', note: '' },\n { kva: 100, label: '100 kVA', note: '' },\n { kva: 150, label: '150 kVA', note: '' },\n { kva: 200, label: '200 kVA', note: '\u2605 Bulkmachine \u2014 ruim beschikbaar' },\n { kva: 250, label: '250 kVA', note: '' },\n { kva: 300, label: '300 kVA', note: '' },\n ];\n const singleSizes = flPowerrental.map(g => g.kva); \/\/ [40,60,100,150,200,250,300]\n\n \/\/ Build all valid combos (1 or 2 machines) sorted by total kVA\n function buildCombos() {\n const combos = [];\n \/\/ Single machines\n singleSizes.forEach(a => combos.push({ total: a, parts: [a] }));\n \/\/ Pairs (allow same size twice, favour 200 as bulk)\n singleSizes.forEach(a => {\n singleSizes.forEach(b => {\n if (b < a) return; \/\/ avoid duplicates\n combos.push({ total: a + b, parts: [a, b] });\n });\n });\n \/\/ Sort by total ascending\n combos.sort((x, y) => x.total - y.total);\n return combos;\n }\n const allCombos = buildCombos();\n\n function labelParts(parts) {\n if (parts.length === 1) return `${parts[0]} kVA`;\n const [a, b] = parts;\n if (a === b) return `2\u00d7 ${a} kVA`;\n return `${a} kVA + ${b} kVA`;\n }\n\n function noteForCombo(parts) {\n if (parts.length === 1 && parts[0] === 200) return '\u2605 Bulkmachine \u2014 ruim beschikbaar';\n if (parts.length === 2 && parts[0] === 200 && parts[1] === 200) return 'Twee bulkmachines gekoppeld';\n if (parts.length === 2 && parts.includes(200)) return 'Combinatie met bulkmachine (200 kVA)';\n if (parts.length === 2) return 'Combinatie van twee machines';\n return '';\n }\n\n function getGenAdvice(kva) {\n const needed = kva * 1.25; \/\/ 25% reserve\n \/\/ First: try to fit in a single machine\n const single = flPowerrental.find(g => g.kva >= needed);\n if (single) {\n return {\n total: single.kva,\n parts: [single.kva],\n label: labelParts([single.kva]),\n note: noteForCombo([single.kva]),\n isCombo: false,\n needed,\n };\n }\n \/\/ Single machines maxed out (>300 kVA) \u2014 find smallest combo\n const combo = allCombos.find(c => c.parts.length === 2 && c.total >= needed);\n if (combo) {\n return {\n total: combo.total,\n parts: combo.parts,\n label: labelParts(combo.parts),\n note: noteForCombo(combo.parts),\n isCombo: true,\n needed,\n };\n }\n \/\/ Above max combo (600 kVA) \u2014 maatwerk\n return { total: null, parts: [], label: 'Maatwerk', note: 'Neem contact op met Team Infra voor een oplossing op maat.', isCombo: false, needed };\n }\n\n \/\/ \u2500\u2500 Show result \u2500\u2500\n function showResult(kva, rows, method) {\n const resWrap = document.getElementById('result-wrap');\n const resKVA = document.getElementById('res-kva');\n const resSub = document.getElementById('res-sub');\n const bd = document.getElementById('breakdown');\n const advice = document.getElementById('gen-advice');\n const gaIcon = document.getElementById('ga-icon');\n const gaTitle = document.getElementById('ga-title');\n const gaText = document.getElementById('ga-text');\n\n resWrap.classList.remove('visible');\n void resWrap.offsetWidth;\n\n resKVA.innerHTML = kva.toFixed(2) + '<span>kVA<\/span>';\n resSub.textContent = `${volt}V \u00b7 ${phase === 1 ? 'enkelfasig' : 'driefasig'} \u00b7 cos \u03c6 ${pf.toFixed(2)} \u00b7 ${method}`;\n\n \/\/ Breakdown\n bd.innerHTML = rows.map(r =>\n `<div class=\"bk-row\"><span class=\"bk-key\">${r.k}<\/span><span class=\"bk-val ${r.accent ? 'accent' : ''}\">${r.v}<\/span><\/div>`\n ).join('');\n\n \/\/ Generator advice \u2014 Team Infra\n const gen = getGenAdvice(kva);\n const needed = gen.needed;\n const isCustom = gen.total === null;\n const color = isCustom ? 'red' : (gen.total <= 60 ? 'green' : gen.total <= 200 ? 'yellow' : 'red');\n const icons = { green: '\u2705', yellow: '\u26a1', red: '\ud83d\udd34' };\n advice.className = `gen-advice ${color}`;\n gaIcon.textContent = icons[color];\n gaTitle.textContent = `Team Infra advies: ${gen.label}`;\n\n let noteText = `Benodigd incl. 25% reserve: ${needed.toFixed(1)} kVA.`;\n if (gen.note) noteText += ` ${gen.note}`;\n\n \/\/ Build fleet overview \u2014 show single machines + recommended combo\n let fleetItems = flPowerrental.map(g => {\n const isRec = !gen.isCombo && gen.total === g.kva;\n return `<div class=\"fleet-item ${isRec ? 'fleet-rec' : ''}\">\n <span class=\"fleet-kva\">${g.kva} kVA<\/span>\n ${g.note ? `<span class=\"fleet-note\">${g.note}<\/span>` : ''}\n ${isRec ? '<span class=\"fleet-badge\">Advies \u2713<\/span>' : ''}\n <\/div>`;\n }).join('');\n\n \/\/ If combo advised, add a highlighted combo row spanning full width\n let comboRow = '';\n if (gen.isCombo) {\n comboRow = `<div class=\"fleet-item fleet-rec fleet-combo\">\n <span class=\"fleet-kva\">\u26a1 ${gen.label} = ${gen.total} kVA<\/span>\n <span class=\"fleet-note\">${gen.note}<\/span>\n <span class=\"fleet-badge\">Advies \u2713<\/span>\n <\/div>`;\n }\n if (isCustom) {\n comboRow = `<div class=\"fleet-item fleet-rec fleet-combo\">\n <span class=\"fleet-kva\">Maatwerk<\/span>\n <span class=\"fleet-note\">${gen.note}<\/span>\n <span class=\"fleet-badge\">Advies \u2713<\/span>\n <\/div>`;\n }\n\n gaText.innerHTML = `${noteText}\n <div class=\"fleet-grid\" style=\"margin-top:0.75rem\">${fleetItems}<\/div>\n ${comboRow ? `<div style=\"margin-top:0.35rem\">${comboRow}<\/div>` : ''}`;\n\n\n\n resWrap.classList.add('visible');\n setTimeout(() => resWrap.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 50);\n }\n\n \/\/ \u2500\u2500 Calculate from W\/kW \u2500\u2500\n function calcFromWatt() {\n const errEl = document.getElementById('err-watt');\n errEl.classList.remove('visible');\n\n const wVal = document.getElementById('input-w').value;\n const kwVal = document.getElementById('input-kw').value;\n\n let kw = null;\n if (kwVal !== '') kw = parseFloat(kwVal);\n else if (wVal !== '') kw = parseFloat(wVal) \/ 1000;\n\n if (!kw || kw <= 0) { errEl.classList.add('visible'); return; }\n\n const kva = kvaFromKW(kw);\n const a = ampFromKVA(kva);\n\n showResult(kva, [\n { k: 'Actief vermogen (kW)', v: kw.toFixed(3) + ' kW' },\n { k: 'Actief vermogen (W)', v: (kw * 1000).toFixed(0) + ' W' },\n { k: 'Spanning', v: volt + ' V (' + (phase === 1 ? '1-fase' : '3-fase') + ')' },\n { k: 'Vermogensfactor (cos \u03c6)', v: pf.toFixed(2) },\n { k: 'Stroom (A)', v: a.toFixed(1) + ' A per fase' },\n { k: 'Schijnbaar vermogen', v: kva.toFixed(2) + ' kVA', accent: true },\n ], 'berekend via vermogen');\n }\n\n \/\/ \u2500\u2500 Calculate from Amp \u2500\u2500\n function calcFromAmp() {\n const errEl = document.getElementById('err-amp');\n errEl.classList.remove('visible');\n\n const a = parseFloat(document.getElementById('input-a').value);\n if (!a || a <= 0) { errEl.classList.add('visible'); return; }\n\n const kva = kvaFromAmp(a);\n const kw = kva * pf;\n\n showResult(kva, [\n { k: 'Stroom', v: a + ' A per fase' },\n { k: 'Spanning', v: volt + ' V (' + (phase === 1 ? '1-fase' : '3-fase') + ')' },\n { k: 'Vermogensfactor (cos \u03c6)', v: pf.toFixed(2) },\n { k: 'Actief vermogen (kW)',v: kw.toFixed(2) + ' kW' },\n { k: 'Actief vermogen (W)', v: (kw * 1000).toFixed(0) + ' W' },\n { k: 'Schijnbaar vermogen', v: kva.toFixed(2) + ' kVA', accent: true },\n ], 'berekend via amperage');\n }\n\n \/\/ Enter key\n document.addEventListener('keydown', e => {\n if (e.key !== 'Enter') return;\n const active = document.activeElement;\n if (['input-w','input-kw'].includes(active.id)) calcFromWatt();\n if (active.id === 'input-a') calcFromAmp();\n });\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Stroom Calculator \u2013 Team Infra Team Infra Stroom Calculator Netspanning \u26a1 Spanning & fase Vaste instelling voor alle berekeningen \u25bc Spanning 230V Enkelfasig 400V Driefasig Aantal fasen 1-fase 230V 3-fase 400V Vermogensfactor (cos \u03c6) 0.80 \u2139 Standaard 0.80 voor generatorberekeningen. Motoren \u00b10.7\u20130.85, verlichting\/elektronica \u00b10.9\u20131.0 Invoer \u2014 kies \u00e9\u00e9n methode \ud83d\udca1 Vermogen in Watt of kW […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70],"tags":[48],"class_list":["post-176","post","type-post","status-publish","format-standard","hentry","category-calculators","tag-stroom"],"_links":{"self":[{"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/posts\/176","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=176"}],"version-history":[{"count":3,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/posts\/176\/revisions"}],"predecessor-version":[{"id":179,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/posts\/176\/revisions\/179"}],"wp:attachment":[{"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":176,"date":"2026-03-06T09:06:31","date_gmt":"2026-03-06T09:06:31","guid":{"rendered":"https:\/\/wiki.teaminfra.nl\/?p=176"},"modified":"2026-03-06T09:20:05","modified_gmt":"2026-03-06T09:20:05","slug":"stroom-calculator","status":"publish","type":"post","link":"https:\/\/wiki.teaminfra.nl\/?p=176","title":{"rendered":"Stroom calculator"},"content":{"rendered":"\n\n\n\n\n\nStroom 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 --green: #16a34a;\n --green-light: #f0fdf4;\n --yellow: #d97706;\n --yellow-light: #fffbeb;\n --red: #dc2626;\n --red-light: #fef2f2;\n --shadow: 0 2px 12px rgba(0,0,0,0.07);\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 \/* \u2500\u2500 Header \u2500\u2500 *\/\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 { font-size: 0.9rem; font-weight: 600; }\n .header-sub { font-size: 0.75rem; color: var(--muted); margin-top: 1px; }\n\n \/* \u2500\u2500 Main \u2500\u2500 *\/\n .main {\n padding: 1.25rem;\n max-width: 540px;\n margin: 0 auto;\n }\n\n \/* \u2500\u2500 Section label \u2500\u2500 *\/\n .section-label {\n font-size: 0.7rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n color: var(--muted);\n margin: 1.25rem 0 0.6rem;\n }\n .section-label:first-child { margin-top: 0; }\n\n \/* \u2500\u2500 Card \u2500\u2500 *\/\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: 0.75rem;\n }\n\n .card-header {\n padding: 0.9rem 1.1rem;\n border-bottom: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.6rem;\n cursor: pointer;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n }\n .card-header-left { display: flex; align-items: center; gap: 0.6rem; }\n .card-icon {\n width: 30px; height: 30px;\n background: var(--accent-light);\n border-radius: 7px;\n display: flex; align-items: center; justify-content: center;\n font-size: 0.9rem;\n flex-shrink: 0;\n }\n .card-title { font-size: 0.9rem; font-weight: 600; }\n .card-subtitle { font-size: 0.72rem; color: var(--muted); margin-top: 1px; }\n\n .chevron {\n color: var(--muted);\n transition: transform 0.2s;\n font-size: 0.75rem;\n }\n .card.open .chevron { transform: rotate(180deg); }\n\n .card-body {\n padding: 1.1rem;\n display: none;\n }\n .card.open .card-body { display: block; }\n\n \/* \u2500\u2500 Voltage selector \u2500\u2500 *\/\n .volt-toggle {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.4rem;\n margin-bottom: 1rem;\n }\n .volt-btn {\n background: var(--input-bg);\n border: 1.5px solid var(--border);\n border-radius: 8px;\n padding: 0.6rem;\n text-align: center;\n font-family: 'Inter', sans-serif;\n font-size: 0.85rem;\n font-weight: 600;\n color: var(--muted);\n cursor: pointer;\n transition: all 0.15s;\n min-height: 44px;\n }\n .volt-btn.active {\n background: var(--accent-light);\n border-color: var(--accent);\n color: var(--accent);\n }\n .volt-btn .vb-sub { font-size: 0.68rem; font-weight: 400; display: block; color: inherit; opacity: 0.7; margin-top: 1px; }\n\n \/* \u2500\u2500 Phase selector \u2500\u2500 *\/\n .phase-toggle {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.4rem;\n margin-bottom: 1rem;\n }\n .phase-btn {\n background: var(--input-bg);\n border: 1.5px solid var(--border);\n border-radius: 8px;\n padding: 0.6rem;\n text-align: center;\n font-family: 'Inter', sans-serif;\n font-size: 0.85rem;\n font-weight: 600;\n color: var(--muted);\n cursor: pointer;\n transition: all 0.15s;\n min-height: 44px;\n }\n .phase-btn.active {\n background: var(--accent-light);\n border-color: var(--accent);\n color: var(--accent);\n }\n .phase-btn .pb-sub { font-size: 0.68rem; font-weight: 400; display: block; opacity: 0.7; margin-top: 1px; }\n\n \/* \u2500\u2500 Input field \u2500\u2500 *\/\n .field { margin-bottom: 1rem; }\n .field:last-of-type { margin-bottom: 0; }\n\n label {\n display: block;\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--muted);\n text-transform: uppercase;\n letter-spacing: 0.06em;\n margin-bottom: 0.45rem;\n }\n\n .input-wrap {\n display: flex;\n border: 1.5px solid var(--border);\n border-radius: 9px;\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 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.1rem;\n font-weight: 600;\n color: var(--text);\n padding: 0.8rem 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 .unit-badge {\n background: var(--bg);\n border-left: 1.5px solid var(--border);\n padding: 0 0.9rem;\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: 48px;\n justify-content: center;\n }\n\n \/* \u2500\u2500 PF row \u2500\u2500 *\/\n .pf-row {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin-bottom: 1rem;\n background: var(--bg);\n border-radius: 8px;\n padding: 0.6rem 0.8rem;\n }\n .pf-label { font-size: 0.75rem; font-weight: 600; color: var(--muted); flex: 1; }\n .pf-note { font-size: 0.68rem; color: var(--muted); opacity: 0.7; }\n input[type=\"range\"] {\n flex: 2;\n accent-color: var(--accent);\n height: 4px;\n cursor: pointer;\n }\n .pf-value { font-size: 0.85rem; font-weight: 700; color: var(--accent); min-width: 32px; text-align: right; }\n\n \/* \u2500\u2500 Calc button \u2500\u2500 *\/\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: 0.95rem;\n cursor: pointer;\n transition: background 0.15s, transform 0.1s;\n min-height: 52px;\n box-shadow: 0 2px 8px rgba(232,78,27,0.28);\n margin-top: 0.5rem;\n }\n .btn:hover { background: var(--accent-dark); }\n .btn:active { transform: scale(0.98); }\n\n \/* \u2500\u2500 Result \u2500\u2500 *\/\n .result-wrap {\n display: none;\n animation: slideIn 0.3s ease both;\n }\n .result-wrap.visible { display: block; }\n\n @keyframes slideIn {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .result-hero {\n background: var(--accent);\n border-radius: var(--radius);\n padding: 1.4rem 1.25rem;\n text-align: center;\n color: white;\n margin-bottom: 0.75rem;\n box-shadow: 0 4px 20px rgba(232,78,27,0.25);\n }\n .rh-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.75; margin-bottom: 4px; }\n .rh-value { font-size: 3.2rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }\n .rh-value span { font-size: 1.3rem; font-weight: 400; opacity: 0.75; margin-left: 4px; }\n .rh-sub { font-size: 0.78rem; opacity: 0.7; margin-top: 6px; }\n\n \/* Generator advice *\/\n .gen-advice {\n border-radius: var(--radius);\n padding: 1rem 1.1rem;\n margin-bottom: 0.75rem;\n display: flex;\n align-items: flex-start;\n gap: 0.75rem;\n border: 1.5px solid;\n }\n .gen-advice.green { background: var(--green-light); border-color: #86efac; }\n .gen-advice.yellow { background: var(--yellow-light); border-color: #fcd34d; }\n .gen-advice.red { background: var(--red-light); border-color: #fca5a5; }\n .ga-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }\n .ga-title { font-size: 0.85rem; font-weight: 700; margin-bottom: 2px; }\n .gen-advice.green .ga-title { color: var(--green); }\n .gen-advice.yellow .ga-title { color: var(--yellow); }\n .gen-advice.red .ga-title { color: var(--red); }\n .ga-text { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }\n\n \/* Fleet grid *\/\n .fleet-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.35rem;\n }\n .fleet-item {\n background: rgba(255,255,255,0.6);\n border: 1px solid var(--border);\n border-radius: 7px;\n padding: 0.45rem 0.6rem;\n display: flex;\n flex-direction: column;\n gap: 1px;\n }\n .fleet-item.fleet-rec {\n background: white;\n border-color: var(--accent);\n box-shadow: 0 0 0 2px rgba(232,78,27,0.15);\n }\n .fleet-kva { font-size: 0.82rem; font-weight: 700; color: var(--text); }\n .fleet-item.fleet-rec .fleet-kva { color: var(--accent); }\n .fleet-note { font-size: 0.65rem; color: var(--muted); line-height: 1.3; }\n .fleet-badge {\n display: inline-block;\n background: var(--accent);\n color: white;\n font-size: 0.62rem;\n font-weight: 700;\n border-radius: 4px;\n padding: 1px 5px;\n margin-top: 2px;\n width: fit-content;\n }\n .fleet-combo {\n grid-column: 1 \/ -1;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 4px;\n }\n .fleet-combo .fleet-kva { font-size: 0.88rem; }\n\n \/* Breakdown grid *\/\n .breakdown {\n background: var(--white);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n overflow: hidden;\n box-shadow: var(--shadow);\n }\n .bk-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.75rem 1.1rem;\n border-bottom: 1px solid var(--border);\n font-size: 0.85rem;\n }\n .bk-row:last-child { border-bottom: none; }\n .bk-key { color: var(--muted); font-weight: 500; }\n .bk-val { font-weight: 700; color: var(--text); }\n .bk-val.accent { color: var(--accent); }\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.82rem;\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.7rem;\n color: var(--muted);\n padding: 1rem 0 2.5rem;\n }\n\n @media (min-width: 480px) {\n .main { padding: 2rem 1.5rem; }\n .rh-value { font-size: 3.8rem; }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"header\">\n <div class=\"header-logo\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\/><\/svg>\n <\/div>\n <div>\n <div class=\"header-title\">Team Infra<\/div>\n <div class=\"header-sub\">Stroom Calculator<\/div>\n <\/div>\n<\/div>\n\n<div class=\"main\">\n\n \n <div class=\"section-label\">Netspanning<\/div>\n <div class=\"card open\" id=\"card-volt\">\n <div class=\"card-header\" onclick=\"toggleCard('card-volt')\">\n <div class=\"card-header-left\">\n <div class=\"card-icon\">\u26a1<\/div>\n <div>\n <div class=\"card-title\">Spanning & fase<\/div>\n <div class=\"card-subtitle\">Vaste instelling voor alle berekeningen<\/div>\n <\/div>\n <\/div>\n <div class=\"chevron\">\u25bc<\/div>\n <\/div>\n <div class=\"card-body\">\n <label>Spanning<\/label>\n <div class=\"volt-toggle\">\n <button class=\"volt-btn\" id=\"v230\" onclick=\"setVolt(230)\">\n 230V <span class=\"vb-sub\">Enkelfasig<\/span>\n <\/button>\n <button class=\"volt-btn active\" id=\"v400\" onclick=\"setVolt(400)\">\n 400V <span class=\"vb-sub\">Driefasig<\/span>\n <\/button>\n <\/div>\n <label>Aantal fasen<\/label>\n <div class=\"phase-toggle\">\n <button class=\"phase-btn\" id=\"p1\" onclick=\"setPhase(1)\">\n 1-fase <span class=\"pb-sub\">230V<\/span>\n <\/button>\n <button class=\"phase-btn active\" id=\"p3\" onclick=\"setPhase(3)\">\n 3-fase <span class=\"pb-sub\">400V<\/span>\n <\/button>\n <\/div>\n <div class=\"pf-row\">\n <span class=\"pf-label\">Vermogensfactor (cos \u03c6)<\/span>\n <input type=\"range\" id=\"pf-slider\" min=\"0.6\" max=\"1.0\" step=\"0.01\" value=\"0.8\" oninput=\"updatePF()\">\n <span class=\"pf-value\" id=\"pf-display\">0.80<\/span>\n <\/div>\n <div class=\"pf-note\" style=\"font-size:0.72rem;color:var(--muted);margin-top:-0.5rem;padding:0 0.1rem;\">\n \u2139 Standaard 0.80 voor generatorberekeningen. Motoren \u00b10.7\u20130.85, verlichting\/elektronica \u00b10.9\u20131.0\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"section-label\">Invoer \u2014 kies \u00e9\u00e9n methode<\/div>\n <div class=\"card open\" id=\"card-watt\">\n <div class=\"card-header\" onclick=\"toggleCard('card-watt')\">\n <div class=\"card-header-left\">\n <div class=\"card-icon\">\ud83d\udca1<\/div>\n <div>\n <div class=\"card-title\">Vermogen in Watt of kW<\/div>\n <div class=\"card-subtitle\">Vul W \u00f3f kW in<\/div>\n <\/div>\n <\/div>\n <div class=\"chevron\">\u25bc<\/div>\n <\/div>\n <div class=\"card-body\">\n <div class=\"field\">\n <label>Vermogen in Watt (W)<\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"input-w\" inputmode=\"decimal\" placeholder=\"bv. 3500\" min=\"0\" step=\"1\" oninput=\"syncKW()\">\n <div class=\"unit-badge\">W<\/div>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>Vermogen in kiloWatt (kW)<\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"input-kw\" inputmode=\"decimal\" placeholder=\"bv. 3.5\" min=\"0\" step=\"0.01\" oninput=\"syncW()\">\n <div class=\"unit-badge\">kW<\/div>\n <\/div>\n <\/div>\n <button class=\"btn\" onclick=\"calcFromWatt()\">Bereken \u2192 kVA \u26a1<\/button>\n <div class=\"error\" id=\"err-watt\">Vul een geldig vermogen in (W of kW).<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card\" id=\"card-amp\">\n <div class=\"card-header\" onclick=\"toggleCard('card-amp')\">\n <div class=\"card-header-left\">\n <div class=\"card-icon\">\ud83d\udd0c<\/div>\n <div>\n <div class=\"card-title\">Stroomsterkte in Amp\u00e8re<\/div>\n <div class=\"card-subtitle\">Alleen amperage bekend<\/div>\n <\/div>\n <\/div>\n <div class=\"chevron\">\u25bc<\/div>\n <\/div>\n <div class=\"card-body\">\n <div class=\"field\">\n <label>Stroom (A)<\/label>\n <div class=\"input-wrap\">\n <input type=\"number\" id=\"input-a\" inputmode=\"decimal\" placeholder=\"bv. 16\" min=\"0\" step=\"0.1\">\n <div class=\"unit-badge\">A<\/div>\n <\/div>\n <\/div>\n <button class=\"btn\" onclick=\"calcFromAmp()\">Bereken \u2192 kVA \u26a1<\/button>\n <div class=\"error\" id=\"err-amp\">Vul een geldig amperage in.<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"section-label\">Resultaat<\/div>\n <div class=\"result-wrap\" id=\"result-wrap\">\n\n <div class=\"result-hero\">\n <div class=\"rh-label\">Benodigde generatorcapaciteit<\/div>\n <div class=\"rh-value\" id=\"res-kva\">\u2014<span>kVA<\/span><\/div>\n <div class=\"rh-sub\" id=\"res-sub\">\u2014<\/div>\n <\/div>\n\n <div class=\"gen-advice\" id=\"gen-advice\">\n <div class=\"ga-icon\" id=\"ga-icon\">\u26a1<\/div>\n <div>\n <div class=\"ga-title\" id=\"ga-title\">\u2014<\/div>\n <div class=\"ga-text\" id=\"ga-text\">\u2014<\/div>\n <\/div>\n <\/div>\n\n <div class=\"breakdown\" id=\"breakdown\"><\/div>\n <\/div>\n\n <div class=\"footer\">Wiki Team Infra \u00b7 Stroom Calculator<\/div>\n<\/div>\n\n<script>\n let volt = 400;\n let phase = 3;\n let pf = 0.80;\n\n \/\/ \u2500\u2500 UI controls \u2500\u2500\n function toggleCard(id) {\n const c = document.getElementById(id);\n c.classList.toggle('open');\n }\n\n function setVolt(v) {\n volt = v;\n document.getElementById('v230').classList.toggle('active', v === 230);\n document.getElementById('v400').classList.toggle('active', v === 400);\n \/\/ Auto-sync phase\n setPhase(v === 400 ? 3 : 1);\n }\n\n function setPhase(p) {\n phase = p;\n document.getElementById('p1').classList.toggle('active', p === 1);\n document.getElementById('p3').classList.toggle('active', p === 3);\n \/\/ Sync voltage display\n if (p === 1 && volt !== 230) setVoltOnly(230);\n if (p === 3 && volt !== 400) setVoltOnly(400);\n }\n\n function setVoltOnly(v) {\n volt = v;\n document.getElementById('v230').classList.toggle('active', v === 230);\n document.getElementById('v400').classList.toggle('active', v === 400);\n }\n\n function updatePF() {\n pf = parseFloat(document.getElementById('pf-slider').value);\n document.getElementById('pf-display').textContent = pf.toFixed(2);\n }\n\n \/\/ Sync W \u2194 kW\n function syncKW() {\n const w = document.getElementById('input-w').value;\n document.getElementById('input-kw').value = w !== '' ? (parseFloat(w) \/ 1000).toFixed(3).replace(\/\\.?0+$\/, '') : '';\n }\n function syncW() {\n const kw = document.getElementById('input-kw').value;\n document.getElementById('input-w').value = kw !== '' ? Math.round(parseFloat(kw) * 1000) : '';\n }\n\n \/\/ \u2500\u2500 Formulas \u2500\u2500\n \/\/ 1-fase: kVA = (V \u00d7 A) \/ 1000 = kW \/ pf\n \/\/ 3-fase: kVA = (\u221a3 \u00d7 V \u00d7 A) \/ 1000 = kW \/ pf\n const SQRT3 = Math.sqrt(3);\n\n function kvaFromKW(kw) {\n return kw \/ pf;\n }\n\n function kvaFromAmp(a) {\n if (phase === 1) return (volt * a) \/ 1000;\n return (SQRT3 * volt * a) \/ 1000;\n }\n\n function ampFromKVA(kva) {\n if (phase === 1) return (kva * 1000) \/ volt;\n return (kva * 1000) \/ (SQRT3 * volt);\n }\n\n \/\/ \u2500\u2500 Team Infra vloot \u2500\u2500\n const flPowerrental = [\n { kva: 40, label: '40 kVA', note: '' },\n { kva: 60, label: '60 kVA', note: '' },\n { kva: 100, label: '100 kVA', note: '' },\n { kva: 150, label: '150 kVA', note: '' },\n { kva: 200, label: '200 kVA', note: '\u2605 Bulkmachine \u2014 ruim beschikbaar' },\n { kva: 250, label: '250 kVA', note: '' },\n { kva: 300, label: '300 kVA', note: '' },\n ];\n const singleSizes = flPowerrental.map(g => g.kva); \/\/ [40,60,100,150,200,250,300]\n\n \/\/ Build all valid combos (1 or 2 machines) sorted by total kVA\n function buildCombos() {\n const combos = [];\n \/\/ Single machines\n singleSizes.forEach(a => combos.push({ total: a, parts: [a] }));\n \/\/ Pairs (allow same size twice, favour 200 as bulk)\n singleSizes.forEach(a => {\n singleSizes.forEach(b => {\n if (b < a) return; \/\/ avoid duplicates\n combos.push({ total: a + b, parts: [a, b] });\n });\n });\n \/\/ Sort by total ascending\n combos.sort((x, y) => x.total - y.total);\n return combos;\n }\n const allCombos = buildCombos();\n\n function labelParts(parts) {\n if (parts.length === 1) return `${parts[0]} kVA`;\n const [a, b] = parts;\n if (a === b) return `2\u00d7 ${a} kVA`;\n return `${a} kVA + ${b} kVA`;\n }\n\n function noteForCombo(parts) {\n if (parts.length === 1 && parts[0] === 200) return '\u2605 Bulkmachine \u2014 ruim beschikbaar';\n if (parts.length === 2 && parts[0] === 200 && parts[1] === 200) return 'Twee bulkmachines gekoppeld';\n if (parts.length === 2 && parts.includes(200)) return 'Combinatie met bulkmachine (200 kVA)';\n if (parts.length === 2) return 'Combinatie van twee machines';\n return '';\n }\n\n function getGenAdvice(kva) {\n const needed = kva * 1.25; \/\/ 25% reserve\n \/\/ First: try to fit in a single machine\n const single = flPowerrental.find(g => g.kva >= needed);\n if (single) {\n return {\n total: single.kva,\n parts: [single.kva],\n label: labelParts([single.kva]),\n note: noteForCombo([single.kva]),\n isCombo: false,\n needed,\n };\n }\n \/\/ Single machines maxed out (>300 kVA) \u2014 find smallest combo\n const combo = allCombos.find(c => c.parts.length === 2 && c.total >= needed);\n if (combo) {\n return {\n total: combo.total,\n parts: combo.parts,\n label: labelParts(combo.parts),\n note: noteForCombo(combo.parts),\n isCombo: true,\n needed,\n };\n }\n \/\/ Above max combo (600 kVA) \u2014 maatwerk\n return { total: null, parts: [], label: 'Maatwerk', note: 'Neem contact op met Team Infra voor een oplossing op maat.', isCombo: false, needed };\n }\n\n \/\/ \u2500\u2500 Show result \u2500\u2500\n function showResult(kva, rows, method) {\n const resWrap = document.getElementById('result-wrap');\n const resKVA = document.getElementById('res-kva');\n const resSub = document.getElementById('res-sub');\n const bd = document.getElementById('breakdown');\n const advice = document.getElementById('gen-advice');\n const gaIcon = document.getElementById('ga-icon');\n const gaTitle = document.getElementById('ga-title');\n const gaText = document.getElementById('ga-text');\n\n resWrap.classList.remove('visible');\n void resWrap.offsetWidth;\n\n resKVA.innerHTML = kva.toFixed(2) + '<span>kVA<\/span>';\n resSub.textContent = `${volt}V \u00b7 ${phase === 1 ? 'enkelfasig' : 'driefasig'} \u00b7 cos \u03c6 ${pf.toFixed(2)} \u00b7 ${method}`;\n\n \/\/ Breakdown\n bd.innerHTML = rows.map(r =>\n `<div class=\"bk-row\"><span class=\"bk-key\">${r.k}<\/span><span class=\"bk-val ${r.accent ? 'accent' : ''}\">${r.v}<\/span><\/div>`\n ).join('');\n\n \/\/ Generator advice \u2014 Team Infra\n const gen = getGenAdvice(kva);\n const needed = gen.needed;\n const isCustom = gen.total === null;\n const color = isCustom ? 'red' : (gen.total <= 60 ? 'green' : gen.total <= 200 ? 'yellow' : 'red');\n const icons = { green: '\u2705', yellow: '\u26a1', red: '\ud83d\udd34' };\n advice.className = `gen-advice ${color}`;\n gaIcon.textContent = icons[color];\n gaTitle.textContent = `Team Infra advies: ${gen.label}`;\n\n let noteText = `Benodigd incl. 25% reserve: ${needed.toFixed(1)} kVA.`;\n if (gen.note) noteText += ` ${gen.note}`;\n\n \/\/ Build fleet overview \u2014 show single machines + recommended combo\n let fleetItems = flPowerrental.map(g => {\n const isRec = !gen.isCombo && gen.total === g.kva;\n return `<div class=\"fleet-item ${isRec ? 'fleet-rec' : ''}\">\n <span class=\"fleet-kva\">${g.kva} kVA<\/span>\n ${g.note ? `<span class=\"fleet-note\">${g.note}<\/span>` : ''}\n ${isRec ? '<span class=\"fleet-badge\">Advies \u2713<\/span>' : ''}\n <\/div>`;\n }).join('');\n\n \/\/ If combo advised, add a highlighted combo row spanning full width\n let comboRow = '';\n if (gen.isCombo) {\n comboRow = `<div class=\"fleet-item fleet-rec fleet-combo\">\n <span class=\"fleet-kva\">\u26a1 ${gen.label} = ${gen.total} kVA<\/span>\n <span class=\"fleet-note\">${gen.note}<\/span>\n <span class=\"fleet-badge\">Advies \u2713<\/span>\n <\/div>`;\n }\n if (isCustom) {\n comboRow = `<div class=\"fleet-item fleet-rec fleet-combo\">\n <span class=\"fleet-kva\">Maatwerk<\/span>\n <span class=\"fleet-note\">${gen.note}<\/span>\n <span class=\"fleet-badge\">Advies \u2713<\/span>\n <\/div>`;\n }\n\n gaText.innerHTML = `${noteText}\n <div class=\"fleet-grid\" style=\"margin-top:0.75rem\">${fleetItems}<\/div>\n ${comboRow ? `<div style=\"margin-top:0.35rem\">${comboRow}<\/div>` : ''}`;\n\n\n\n resWrap.classList.add('visible');\n setTimeout(() => resWrap.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 50);\n }\n\n \/\/ \u2500\u2500 Calculate from W\/kW \u2500\u2500\n function calcFromWatt() {\n const errEl = document.getElementById('err-watt');\n errEl.classList.remove('visible');\n\n const wVal = document.getElementById('input-w').value;\n const kwVal = document.getElementById('input-kw').value;\n\n let kw = null;\n if (kwVal !== '') kw = parseFloat(kwVal);\n else if (wVal !== '') kw = parseFloat(wVal) \/ 1000;\n\n if (!kw || kw <= 0) { errEl.classList.add('visible'); return; }\n\n const kva = kvaFromKW(kw);\n const a = ampFromKVA(kva);\n\n showResult(kva, [\n { k: 'Actief vermogen (kW)', v: kw.toFixed(3) + ' kW' },\n { k: 'Actief vermogen (W)', v: (kw * 1000).toFixed(0) + ' W' },\n { k: 'Spanning', v: volt + ' V (' + (phase === 1 ? '1-fase' : '3-fase') + ')' },\n { k: 'Vermogensfactor (cos \u03c6)', v: pf.toFixed(2) },\n { k: 'Stroom (A)', v: a.toFixed(1) + ' A per fase' },\n { k: 'Schijnbaar vermogen', v: kva.toFixed(2) + ' kVA', accent: true },\n ], 'berekend via vermogen');\n }\n\n \/\/ \u2500\u2500 Calculate from Amp \u2500\u2500\n function calcFromAmp() {\n const errEl = document.getElementById('err-amp');\n errEl.classList.remove('visible');\n\n const a = parseFloat(document.getElementById('input-a').value);\n if (!a || a <= 0) { errEl.classList.add('visible'); return; }\n\n const kva = kvaFromAmp(a);\n const kw = kva * pf;\n\n showResult(kva, [\n { k: 'Stroom', v: a + ' A per fase' },\n { k: 'Spanning', v: volt + ' V (' + (phase === 1 ? '1-fase' : '3-fase') + ')' },\n { k: 'Vermogensfactor (cos \u03c6)', v: pf.toFixed(2) },\n { k: 'Actief vermogen (kW)',v: kw.toFixed(2) + ' kW' },\n { k: 'Actief vermogen (W)', v: (kw * 1000).toFixed(0) + ' W' },\n { k: 'Schijnbaar vermogen', v: kva.toFixed(2) + ' kVA', accent: true },\n ], 'berekend via amperage');\n }\n\n \/\/ Enter key\n document.addEventListener('keydown', e => {\n if (e.key !== 'Enter') return;\n const active = document.activeElement;\n if (['input-w','input-kw'].includes(active.id)) calcFromWatt();\n if (active.id === 'input-a') calcFromAmp();\n });\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Stroom Calculator \u2013 Team Infra Team Infra Stroom Calculator Netspanning \u26a1 Spanning & fase Vaste instelling voor alle berekeningen \u25bc Spanning 230V Enkelfasig 400V Driefasig Aantal fasen 1-fase 230V 3-fase 400V Vermogensfactor (cos \u03c6) 0.80 \u2139 Standaard 0.80 voor generatorberekeningen. Motoren \u00b10.7\u20130.85, verlichting\/elektronica \u00b10.9\u20131.0 Invoer \u2014 kies \u00e9\u00e9n methode \ud83d\udca1 Vermogen in Watt of kW […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70],"tags":[48],"class_list":["post-176","post","type-post","status-publish","format-standard","hentry","category-calculators","tag-stroom"],"_links":{"self":[{"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/posts\/176","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=176"}],"version-history":[{"count":3,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/posts\/176\/revisions"}],"predecessor-version":[{"id":179,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=\/wp\/v2\/posts\/176\/revisions\/179"}],"wp:attachment":[{"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wiki.teaminfra.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}