Energie Calculator – Energieneutraal Huis<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n body { background-color: #f3f4f6; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }\n .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px; border: 1px solid #e5e7eb; }\n .card-header { padding: 15px 20px; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; gap: 10px; }\n .card-header h2 { color: #1e4e8c; font-weight: 700; font-size: 1.25rem; }\n .card-body { padding: 20px; }\n .result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 15px; }\n .result-box { background: #f9fafb; padding: 15px; border-radius: 6px; border-left: 4px solid #1e4e8c; }\n .result-box.green { background: #ecfdf5; border-left-color: #10b981; }\n .result-label { font-size: 0.75rem; color: #6b7280; text-transform: uppercase; font-weight: 600; }\n .result-value { font-size: 1.25rem; font-weight: 700; color: #111827; }\n .totaal-overzicht { background: #1e4e8c; color: white; border-radius: 8px; padding: 25px; margin-top: 30px; }\n .input-group { margin-bottom: 15px; }\n label { display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 5px; }\n input[type=\"number\"], select, input[type=\"text\"], input[type=\"email\"] {\n width: 100%; border: 1px solid #d1d5db; border-radius: 6px; padding: 8px 12px; outline: none;\n }\n input:focus { border-color: #1e4e8c; ring: 2px ring #1e4e8c; }\n .checkbox-wrapper { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }\n .checkbox-wrapper input[type=\"checkbox\"] { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; }\n .progress-bar-bg { background: #e5e7eb; height: 24px; border-radius: 12px; overflow: hidden; margin-top: 10px; }\n .progress-bar-fill { background: #10b981; height: 100%; transition: width 0.5s ease; }\n .btn-primary { background: #1e4e8c; color: white; padding: 10px 20px; border-radius: 6px; font-weight: 600; transition: background 0.2s; border: none; cursor: pointer; }\n .btn-primary:hover { background: #153a69; }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"max-w-5xl mx-auto p-4 md:p-8\">\n <div class=\"text-center mb-8\">\n <h1 class=\"text-3xl font-bold text-[#1e4e8c] flex justify-center items-center gap-3\">\n <i class=\"fa-solid fa-bolt text-yellow-400\"><\/i> Energie Calculator\n <\/h1>\n <p class=\"text-gray-600 mt-2\">Bereken uw rendement op de onbalansmarkt met XXL thuisbatterijen<\/p>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"card-header\">\n <i class=\"fa-solid fa-chart-column text-green-600\"><\/i>\n <h2>Uw Huidige Situatie<\/h2>\n <\/div>\n <div class=\"card-body grid grid-cols-1 md:grid-cols-2 gap-6\">\n <div class=\"input-group\">\n <label>Jaarlijks stroomverbruik (kWh)<\/label>\n <input type=\"number\" id=\"stroomverbruik\" value=\"3000\" oninput=\"EnergieCalc.calculate()\">\n <\/div>\n <div class=\"input-group\">\n <label>Jaarlijks gasverbruik (m\u00b3)<\/label>\n <input type=\"number\" id=\"gasverbruik\" value=\"1000\" oninput=\"EnergieCalc.calculate()\">\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"card-header\">\n <i class=\"fa-solid fa-battery-full text-green-500\"><\/i>\n <h2>Thuisbatterij (Verplicht)<\/h2>\n <\/div>\n <div class=\"card-body\">\n <div class=\"input-group\">\n <label>Batterij capaciteit<\/label>\n <select id=\"batterij_cap\" onchange=\"EnergieCalc.calculate()\">\n <option value=\"20\">20 kWh – \u20ac 8.500<\/option>\n <option value=\"30\">30 kWh – \u20ac 10.500<\/option>\n <option value=\"40\">40 kWh – \u20ac 13.500<\/option>\n <option value=\"50\">50 kWh – \u20ac 15.500<\/option>\n <\/select>\n <\/div>\n\n <div class=\"result-grid\">\n <div class=\"result-box\">\n <div class=\"result-label\">Investering<\/div>\n <div class=\"result-value\" id=\"bat_inv\">\u20ac 8.500<\/div>\n <\/div>\n <div class=\"result-box green\">\n <div class=\"result-label\">Jaarlijkse winst<\/div>\n <div class=\"result-value\" id=\"bat_winst\">\u20ac 1.950<\/div>\n <\/div>\n <div class=\"result-box\">\n <div class=\"result-label\">Terugverdientijd<\/div>\n <div class=\"result-value\" id=\"bat_tvt\">4,4 jaar<\/div>\n <\/div>\n <div class=\"result-box green\">\n <div class=\"result-label\">Rendement<\/div>\n <div class=\"result-value\" id=\"bat_rendement\">22,9%<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"card-header\">\n <i class=\"fa-solid fa-sun text-yellow-500\"><\/i>\n <h2>Bestaande Zonnepanelen (Optioneel)<\/h2>\n <\/div>\n <div class=\"card-body\">\n <div class=\"checkbox-wrapper\">\n <input type=\"checkbox\" id=\"has_solar\" onchange=\"EnergieCalc.toggleSection('solar_extra')\">\n <label for=\"has_solar\" class=\"mb-0\">Ik heb al zonnepanelen<\/label>\n <\/div>\n <div id=\"solar_extra\" class=\"hidden mt-4 border-t pt-4\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div class=\"input-group\">\n <label>Aantal zonnepanelen<\/label>\n <input type=\"number\" id=\"solar_count\" value=\"10\" oninput=\"EnergieCalc.calculate()\">\n <\/div>\n <div class=\"input-group\">\n <label>Capaciteit per paneel (Wp)<\/label>\n <input type=\"number\" id=\"solar_wp\" value=\"400\" oninput=\"EnergieCalc.calculate()\">\n <\/div>\n <\/div>\n <div class=\"bg-yellow-50 border-l-4 border-yellow-400 p-4 mt-4\">\n <div class=\"text-sm font-bold text-yellow-800\">Jaarlijkse besparing bestaande zonnepanelen<\/div>\n <div class=\"text-lg font-bold\" id=\"solar_extra_yield\">\u20ac 805 per jaar<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"card-header\">\n <i class=\"fa-solid fa-sun text-yellow-500\"><\/i>\n <h2>Nieuwe Zonnepanelen (Optioneel)<\/h2>\n <\/div>\n <div class=\"card-body\">\n <div class=\"checkbox-wrapper\">\n <input type=\"checkbox\" id=\"buy_solar\" onchange=\"EnergieCalc.toggleSection('solar_new')\">\n <label for=\"buy_solar\" class=\"mb-0\">Ik wil zonnepanelen aanschaffen<\/label>\n <\/div>\n <div id=\"solar_new\" class=\"hidden mt-4 border-t pt-4\">\n <div class=\"input-group\">\n <label>Gewenst aantal zonnepanelen (440 Wp – \u20ac 745 per stuk)<\/label>\n <input type=\"number\" id=\"new_solar_count\" value=\"12\" oninput=\"EnergieCalc.calculate()\">\n <\/div>\n <div class=\"result-grid\">\n <div class=\"result-box\">\n <div class=\"result-label\">Investering<\/div>\n <div class=\"result-value\" id=\"new_solar_inv\">\u20ac 8.940<\/div>\n <\/div>\n <div class=\"result-box\">\n <div class=\"result-label\">Totale capaciteit<\/div>\n <div class=\"result-value\" id=\"new_solar_yield_cap\">5,28 kWp<\/div>\n <\/div>\n <div class=\"result-box green\">\n <div class=\"result-label\">Jaarlijkse besparing nieuwe zonnepanelen<\/div>\n <div class=\"result-value\" id=\"new_solar_profit\">\u20ac 1.062<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"card-header\">\n <i class=\"fa-solid fa-temperature-half text-red-500\"><\/i>\n <h2>Bestaande Warmtepomp (Optioneel)<\/h2>\n <\/div>\n <div class=\"card-body\">\n <div class=\"checkbox-wrapper\">\n <input type=\"checkbox\" id=\"has_wp\" onchange=\"EnergieCalc.toggleSection('wp_extra')\">\n <label for=\"has_wp\" class=\"mb-0\">Ik heb al een warmtepomp<\/label>\n <\/div>\n <div id=\"wp_extra\" class=\"hidden mt-4 border-t pt-4\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div class=\"input-group\">\n <label>Type warmtepomp<\/label>\n <select id=\"old_wp_type\" onchange=\"EnergieCalc.calculate()\">\n <option value=\"hybride\">Hybride<\/option>\n <option value=\"full\">Full-electric<\/option>\n <\/select>\n <\/div>\n <div class=\"input-group\">\n <label>Capaciteit (kW)<\/label>\n <select id=\"old_wp_cap\" onchange=\"EnergieCalc.calculate()\">\n <option value=\"6\">6 kW<\/option>\n <option value=\"9\">9 kW<\/option>\n <option value=\"14\">14 kW<\/option>\n <\/select>\n <\/div>\n <\/div>\n <div class=\"bg-green-50 border-l-4 border-green-400 p-4 mt-4\">\n <div class=\"text-sm font-bold text-green-800\">Jaarlijkse besparing bestaande warmtepomp<\/div>\n <div class=\"text-lg font-bold\" id=\"old_wp_impact\">\u20ac 0 per jaar<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"card-header\">\n <i class=\"fa-solid fa-temperature-half text-red-500\"><\/i>\n <h2>Nieuwe Warmtepomp (Optioneel)<\/h2>\n <\/div>\n <div class=\"card-body\">\n <div class=\"checkbox-wrapper\">\n <input type=\"checkbox\" id=\"buy_wp\" onchange=\"EnergieCalc.toggleSection('wp_new')\">\n <label for=\"buy_wp\" class=\"mb-0\">Ik wil een warmtepomp aanschaffen<\/label>\n <\/div>\n <div id=\"wp_new\" class=\"hidden mt-4 border-t pt-4\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div class=\"input-group\">\n <label>Type warmtepomp<\/label>\n <select id=\"new_wp_type\" onchange=\"EnergieCalc.calculate()\">\n <option value=\"hybride\">Hybride<\/option>\n <option value=\"full\">Full-electric<\/option>\n <\/select>\n <\/div>\n <div class=\"input-group\">\n <label>Capaciteit (kW)<\/label>\n <select id=\"new_wp_cap\" onchange=\"EnergieCalc.calculate()\">\n <option value=\"6\">6 kW<\/option>\n <option value=\"9\">9 kW<\/option>\n <option value=\"14\">14 kW<\/option>\n <\/select>\n <\/div>\n <\/div>\n <div class=\"result-grid\">\n <div class=\"result-box\">\n <div class=\"result-label\">Investering<\/div>\n <div class=\"result-value\" id=\"new_wp_inv\">\u20ac 5.779<\/div>\n <\/div>\n <div class=\"result-box green\">\n <div class=\"result-label\">Netto jaarlijkse besparing<\/div>\n <div class=\"result-value\" id=\"new_wp_gas_save\">\u20ac 679<\/div>\n <\/div>\n <div class=\"result-box\">\n <div class=\"result-label\">Terugverdientijd<\/div>\n <div class=\"result-value\" id=\"new_wp_tvt\">8,5 jaar<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"totaal-overzicht\">\n <h2 class=\"text-xl font-bold mb-6 flex items-center gap-2\">\n <i class=\"fa-solid fa-sack-dollar text-yellow-400\"><\/i> Totaal Overzicht\n <\/h2>\n\n <div id=\"overzicht_zonder_fin\">\n <h3 class=\"text-sm uppercase font-bold mb-4 opacity-80\">Zonder Financiering<\/h3>\n <div class=\"grid grid-cols-1 md:grid-cols-5 gap-4 mb-8\">\n <div class=\"bg-white\/10 p-4 rounded-lg\">\n <div class=\"text-xs uppercase opacity-70\">Totale investering<\/div>\n <div class=\"text-2xl font-bold\" id=\"total_inv\">\u20ac 8.500<\/div>\n <\/div>\n <div class=\"bg-white\/10 p-4 rounded-lg\">\n <div class=\"text-xs uppercase opacity-70\">Jaarlijkse winst\/besparing<\/div>\n <div class=\"text-2xl font-bold\" id=\"total_profit\">\u20ac 1.950<\/div>\n <\/div>\n <div class=\"bg-white\/10 p-4 rounded-lg\">\n <div class=\"text-xs uppercase opacity-70\">Maandelijkse besparing<\/div>\n <div class=\"text-2xl font-bold\" id=\"total_profit_month\">\u20ac 162<\/div>\n <\/div>\n <div class=\"bg-white\/10 p-4 rounded-lg\">\n <div class=\"text-xs uppercase opacity-70\">Terugverdientijd<\/div>\n <div class=\"text-2xl font-bold\" id=\"total_tvt\">4,4 jaar<\/div>\n <\/div>\n <div class=\"bg-green-500\/20 p-4 rounded-lg border border-green-400\/30\">\n <div class=\"text-xs uppercase opacity-70\">Rendement<\/div>\n <div class=\"text-2xl font-bold text-green-300\" id=\"total_rendement\">22,9%<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"border-t border-white\/20 pt-6 mt-4\">\n <div class=\"flex items-center gap-3 mb-6 bg-white\/5 p-3 rounded-lg\">\n <input type=\"checkbox\" id=\"financiering_check\" onchange=\"EnergieCalc.calculate()\" class=\"w-5 h-5 cursor-pointer\">\n <label for=\"financiering_check\" class=\"text-sm font-semibold cursor-pointer text-white\">\n Toon berekening met financiering via Warmtefonds (4,23% – 15 jaar)\n <\/label>\n <\/div>\n\n <div id=\"overzicht_met_fin\" class=\"hidden\">\n <h3 class=\"text-sm uppercase font-bold mb-4 opacity-80\">Met Financiering (Warmtefonds)<\/h3>\n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-4\">\n <div class=\"bg-green-500\/20 p-4 rounded-lg border border-green-400\/30\">\n <div class=\"text-xs uppercase opacity-70\">Maandelijkse besparing<\/div>\n <div class=\"text-2xl font-bold text-green-300\" id=\"fin_maand_besparing\">\u20ac 162<\/div>\n <\/div>\n <div class=\"bg-white\/10 p-4 rounded-lg\">\n <div class=\"text-xs uppercase opacity-70\">Maandbedrag aflossing<\/div>\n <div class=\"text-2xl font-bold\" id=\"fin_maand_lasten\">\u20ac 75<\/div>\n <\/div>\n <div class=\"bg-blue-500\/20 p-4 rounded-lg border border-blue-400\/30\">\n <div class=\"text-xs uppercase opacity-70\">Maandelijks saldo<\/div>\n <div class=\"text-2xl font-bold text-blue-300\" id=\"fin_maand_saldo\">\u20ac 87<\/div>\n <\/div>\n <div class=\"bg-white\/10 p-4 rounded-lg\">\n <div class=\"text-xs uppercase opacity-70\">Terugverdientijd<\/div>\n <div class=\"text-2xl font-bold\" id=\"fin_tvt\">\u2013<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mt-8\">\n <div class=\"text-sm font-bold mb-2 opacity-80 text-white\">Terugverdientijd Visualisatie<\/div>\n <div class=\"progress-bar-bg\">\n <div id=\"tvt_bar\" class=\"progress-bar-fill\" style=\"width: 22%;\"><\/div>\n <\/div>\n <div class=\"text-xs mt-2 opacity-70\" id=\"tvt_visual_text\">4,4 jaar<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card mt-8 border-2 border-blue-200\">\n <div class=\"card-header bg-blue-50\">\n <i class=\"fa-solid fa-envelope text-blue-600\"><\/i>\n <h2>Ontvang uw berekening per e-mail<\/h2>\n <\/div>\n <div class=\"card-body\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\n <div class=\"input-group\">\n <label>Voornaam<\/label>\n <input type=\"text\" id=\"lead_name\" placeholder=\"Uw voornaam\">\n <\/div>\n <div class=\"input-group\">\n <label>E-mailadres<\/label>\n <input type=\"email\" id=\"lead_email\" placeholder=\"naam@voorbeeld.nl\">\n <\/div>\n <\/div>\n <div class=\"checkbox-wrapper\" style=\"align-items: flex-start;\">\n <input type=\"checkbox\" id=\"opt_in_marketing\" style=\"margin-top: 2px;\">\n <label for=\"opt_in_marketing\" class=\"mb-0\">Ja, ik wil graag tips en aanbiedingen ontvangen over energiebesparing<\/label>\n <\/div>\n <div class=\"checkbox-wrapper\" style=\"align-items: flex-start;\">\n <input type=\"checkbox\" id=\"disclaimer_check\" style=\"margin-top: 2px;\">\n <label for=\"disclaimer_check\" class=\"mb-0\">Ik begrijp dat deze berekening indicatief is en dat werkelijke resultaten kunnen afwijken door externe factoren zoals energieprijzen, marktomstandigheden, regelgeving, weer en gebruik.<\/label>\n <\/div>\n <div class=\"flex flex-wrap gap-4 mt-4\">\n <button class=\"btn-primary flex items-center gap-2\" onclick=\"EnergieCalc.sendLead()\">\n <i class=\"fa-solid fa-paper-plane\"><\/i> Berekening naar mij mailen\n <\/button>\n <div id=\"status_msg\" class=\"text-sm self-center font-semibold\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n(function() {\n 'use strict';\n\n window.EnergieCalc = {\n wpPrices: {\n full: { 6: 9381, 9: 9980, 14: 10900 },\n hybride: { 6: 5779, 9: 6579, 14: 7379 }\n },\n batPrices: { 20: 8500, 30: 10500, 40: 13500, 50: 15500 },\n gasPrijs: 1.33,\n stroomPrijs: 0.27,\n vastrechtGas: 339,\n\n \/\/ OPTIE 2: 3000 kWh blijft op oud niveau (~21%), 10.000 kWh wordt getemd\n _getVerbruiksFactor: function(stroomVerbruikKwh) {\n if (!stroomVerbruikKwh || stroomVerbruikKwh <= 0) return 1.0;\n const v = stroomVerbruikKwh;\n if (v <= 2000) return 0.85;\n if (v <= 3000) return 0.85 + (v - 2000) \/ 1000 * 0.15; \/\/ 2000->0.85, 3000->1.0\n if (v <= 5000) return 1.0 + (v - 3000) \/ 2000 * 0.15; \/\/ 3000->1.0, 5000->1.15\n if (v <= 10000) return 1.15 + (v - 5000) \/ 5000 * 0.15; \/\/ 5000->1.15, 10000->1.3\n return 1.3; \/\/ Maximaal 1.3x opbrengst\n },\n\n _getBatJaarWinst: function(capKwh, stroomVerbruikKwh) {\n const basisPerKwh = 89.25; \/\/ Aangepast voor 21% rendement bij 3000 kWh\n const factor = this._getVerbruiksFactor(stroomVerbruikKwh);\n return capKwh * basisPerKwh * factor;\n },\n\n toggleSection: function(id) {\n const el = document.getElementById(id);\n if (el) {\n el.classList.toggle('hidden');\n this.calculate();\n }\n },\n\n formatEuro: function(val) {\n return '\u20ac ' + Math.round(val).toLocaleString('nl-NL');\n },\n\n calculate: function() {\n const gasTotal = parseFloat(document.getElementById('gasverbruik').value) || 0;\n const stroomTotal = parseFloat(document.getElementById('stroomverbruik').value) || 0;\n\n \/\/ 1. Batterij\n const batCap = parseInt(document.getElementById('batterij_cap').value);\n const batInv = this.batPrices[batCap];\n const batWinst = this._getBatJaarWinst(batCap, stroomTotal);\n const batRendement = (batWinst \/ batInv) * 100;\n\n document.getElementById('bat_inv').innerText = this.formatEuro(batInv);\n document.getElementById('bat_winst').innerText = this.formatEuro(batWinst);\n document.getElementById('bat_tvt').innerText = (batInv \/ batWinst).toFixed(1) + ' jaar';\n document.getElementById('bat_rendement').innerText = batRendement.toFixed(1) + '%';\n\n let totalInv = batInv;\n let totalProfit = batWinst;\n\n \/\/ 2. Bestaande Solar\n if (document.getElementById('has_solar').checked) {\n const count = parseInt(document.getElementById('solar_count').value) || 0;\n const wp = parseInt(document.getElementById('solar_wp').value) || 0;\n const kwhPerPaneel = wp * 0.875;\n const extraYield = count * kwhPerPaneel * this.stroomPrijs;\n document.getElementById('solar_extra_yield').innerText = this.formatEuro(extraYield) + ' per jaar';\n totalProfit += extraYield;\n }\n\n \/\/ 3. Nieuwe Solar\n if (document.getElementById('buy_solar').checked) {\n const count = parseInt(document.getElementById('new_solar_count').value) || 0;\n const inv = count * 745;\n const wpPaneel = 440;\n const kwhPerPaneel = wpPaneel * 0.875;\n const profit = count * kwhPerPaneel * this.stroomPrijs;\n document.getElementById('new_solar_inv').innerText = this.formatEuro(inv);\n document.getElementById('new_solar_yield_cap').innerText = (count * wpPaneel \/ 1000).toFixed(2) + ' kWp';\n document.getElementById('new_solar_profit').innerText = this.formatEuro(profit);\n totalInv += inv;\n totalProfit += profit;\n }\n\n \/\/ 4. Nieuwe WP\n if (document.getElementById('buy_wp').checked) {\n const type = document.getElementById('new_wp_type').value;\n const cap = parseInt(document.getElementById('new_wp_cap').value);\n const inv = this.wpPrices[type][cap];\n let fractie = type === 'full' ? 1.0 : 0.76;\n let gasBesparingM3 = gasTotal * fractie;\n let extraVastrecht = type === 'full' ? this.vastrechtGas : 0;\n let extraStroomKwh = gasBesparingM3 * (type === 'full' ? 1.0 : 0.75);\n let extraStroomKosten = extraStroomKwh * this.stroomPrijs;\n let gasBesparingEuro = (gasBesparingM3 * this.gasPrijs) + extraVastrecht;\n let nettoBesparing = gasBesparingEuro - extraStroomKosten;\n document.getElementById('new_wp_inv').innerText = this.formatEuro(inv);\n document.getElementById('new_wp_gas_save').innerText = this.formatEuro(nettoBesparing);\n document.getElementById('new_wp_tvt').innerText = (inv \/ nettoBesparing).toFixed(1) + ' jaar';\n totalInv += inv;\n totalProfit += nettoBesparing;\n }\n\n \/\/ 5. Bestaande WP\n if (document.getElementById('has_wp').checked) {\n const typeOld = document.getElementById('old_wp_type').value;\n let fractieOld = typeOld === 'full' ? 1.0 : 0.76;\n let gasBesparingM3Old = gasTotal * fractieOld;\n let extraStroomKwhOld = gasBesparingM3Old * (typeOld === 'full' ? 1.0 : 0.75);\n let extraStroomKostenOld = extraStroomKwhOld * this.stroomPrijs;\n let extraVastrechtOld = typeOld === 'full' ? this.vastrechtGas : 0;\n let gasBesparingEuroOld = (gasBesparingM3Old * this.gasPrijs) + extraVastrechtOld - extraStroomKostenOld;\n document.getElementById('old_wp_impact').innerText = this.formatEuro(gasBesparingEuroOld) + ' per jaar';\n totalProfit += gasBesparingEuroOld;\n } else {\n document.getElementById('old_wp_impact').innerText = '\u20ac 0 per jaar';\n }\n\n \/\/ Totaal Overzicht\n const totalRendement = (totalProfit \/ totalInv) * 100;\n document.getElementById('total_inv').innerText = this.formatEuro(totalInv);\n document.getElementById('total_profit').innerText = this.formatEuro(totalProfit);\n document.getElementById('total_profit_month').innerText = this.formatEuro(totalProfit \/ 12);\n const finalTvt = totalInv \/ totalProfit;\n document.getElementById('total_tvt').innerText = finalTvt.toFixed(1) + ' jaar';\n document.getElementById('total_rendement').innerText = totalRendement.toFixed(1) + '%';\n\n \/\/ Visualisatie\n const barWidth = Math.min((finalTvt \/ 20) * 100, 100);\n document.getElementById('tvt_bar').style.width = barWidth + '%';\n document.getElementById('tvt_visual_text').innerText = finalTvt.toFixed(1) + ' jaar';\n\n \/\/ Financiering\n if (document.getElementById('financiering_check').checked) {\n document.getElementById('overzicht_met_fin').classList.remove('hidden');\n const maandBesparing = totalProfit \/ 12;\n const rente = 0.0423 \/ 12;\n const n = 15 * 12;\n const maandLasten = totalInv * (rente \/ (1 - Math.pow(1 + rente, -n)));\n const maandSaldo = maandBesparing - maandLasten;\n document.getElementById('fin_maand_besparing').innerText = this.formatEuro(maandBesparing);\n document.getElementById('fin_maand_lasten').innerText = this.formatEuro(maandLasten);\n document.getElementById('fin_maand_saldo').innerText = this.formatEuro(maandSaldo);\n if (maandSaldo > 0) {\n const tvtFin = totalInv \/ (maandSaldo * 12);\n document.getElementById('fin_tvt').innerText = tvtFin.toFixed(1) + ' jaar';\n } else {\n document.getElementById('fin_tvt').innerText = 'n.v.t.';\n }\n } else {\n document.getElementById('overzicht_met_fin').classList.add('hidden');\n }\n },\n\n sendLead: function() {\n const name = document.getElementById('lead_name').value;\n const email = document.getElementById('lead_email').value;\n const disclaimerChecked = document.getElementById('disclaimer_check').checked;\n const status = document.getElementById('status_msg');\n\n if(!name || !email) {\n status.innerText = 'Vul a.u.b. uw naam en e-mail in.';\n status.className = 'text-red-600 text-sm self-center font-semibold';\n return;\n }\n\n if(!disclaimerChecked) {\n status.innerText = 'U moet akkoord gaan met de disclaimer.';\n status.className = 'text-red-600 text-sm self-center font-semibold';\n return;\n }\n\n status.innerText = 'Bezig met verzenden...';\n status.className = 'text-blue-600 text-sm self-center font-semibold';\n\n setTimeout(function() {\n status.innerText = 'Berekening succesvol verzonden!';\n status.className = 'text-green-600 text-sm self-center font-semibold';\n }, 1500);\n }\n };\n\n \/\/ Start berekening\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', function() {\n EnergieCalc.calculate();\n });\n } else {\n EnergieCalc.calculate();\n }\n})();\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Energie Calculator – Energieneutraal Huis Energie Calculator Bereken uw rendement op de onbalansmarkt met XXL thuisbatterijen Uw Huidige Situatie Jaarlijks stroomverbruik (kWh) Jaarlijks gasverbruik (m\u00b3) Thuisbatterij (Verplicht) Batterij capaciteit 20 kWh – \u20ac 8.50030 kWh – \u20ac 10.50040 kWh – \u20ac 13.50050 kWh – \u20ac 15.500 Investering \u20ac 8.500 Jaarlijkse winst \u20ac 1.950 Terugverdientijd 4,4 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-6511","page","type-page","status-publish","hentry"],"blocksy_meta":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/pages\/6511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/comments?post=6511"}],"version-history":[{"count":2,"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/pages\/6511\/revisions"}],"predecessor-version":[{"id":6520,"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/pages\/6511\/revisions\/6520"}],"wp:attachment":[{"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/media?parent=6511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":6511,"date":"2025-12-28T16:56:34","date_gmt":"2025-12-28T16:56:34","guid":{"rendered":"https:\/\/energieneutraal-huis.nl\/?page_id=6511"},"modified":"2025-12-29T10:19:44","modified_gmt":"2025-12-29T10:19:44","slug":"batterij-rendement","status":"publish","type":"page","link":"https:\/\/energieneutraal-huis.nl\/index.php\/batterij-rendement\/","title":{"rendered":"Batterij rendement"},"content":{"rendered":"\n\n\n\n \n \n Energie Calculator – Energieneutraal Huis<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n body { background-color: #f3f4f6; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }\n .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px; border: 1px solid #e5e7eb; }\n .card-header { padding: 15px 20px; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; gap: 10px; }\n .card-header h2 { color: #1e4e8c; font-weight: 700; font-size: 1.25rem; }\n .card-body { padding: 20px; }\n .result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 15px; }\n .result-box { background: #f9fafb; padding: 15px; border-radius: 6px; border-left: 4px solid #1e4e8c; }\n .result-box.green { background: #ecfdf5; border-left-color: #10b981; }\n .result-label { font-size: 0.75rem; color: #6b7280; text-transform: uppercase; font-weight: 600; }\n .result-value { font-size: 1.25rem; font-weight: 700; color: #111827; }\n .totaal-overzicht { background: #1e4e8c; color: white; border-radius: 8px; padding: 25px; margin-top: 30px; }\n .input-group { margin-bottom: 15px; }\n label { display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 5px; }\n input[type=\"number\"], select, input[type=\"text\"], input[type=\"email\"] {\n width: 100%; border: 1px solid #d1d5db; border-radius: 6px; padding: 8px 12px; outline: none;\n }\n input:focus { border-color: #1e4e8c; ring: 2px ring #1e4e8c; }\n .checkbox-wrapper { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }\n .checkbox-wrapper input[type=\"checkbox\"] { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; }\n .progress-bar-bg { background: #e5e7eb; height: 24px; border-radius: 12px; overflow: hidden; margin-top: 10px; }\n .progress-bar-fill { background: #10b981; height: 100%; transition: width 0.5s ease; }\n .btn-primary { background: #1e4e8c; color: white; padding: 10px 20px; border-radius: 6px; font-weight: 600; transition: background 0.2s; border: none; cursor: pointer; }\n .btn-primary:hover { background: #153a69; }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"max-w-5xl mx-auto p-4 md:p-8\">\n <div class=\"text-center mb-8\">\n <h1 class=\"text-3xl font-bold text-[#1e4e8c] flex justify-center items-center gap-3\">\n <i class=\"fa-solid fa-bolt text-yellow-400\"><\/i> Energie Calculator\n <\/h1>\n <p class=\"text-gray-600 mt-2\">Bereken uw rendement op de onbalansmarkt met XXL thuisbatterijen<\/p>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"card-header\">\n <i class=\"fa-solid fa-chart-column text-green-600\"><\/i>\n <h2>Uw Huidige Situatie<\/h2>\n <\/div>\n <div class=\"card-body grid grid-cols-1 md:grid-cols-2 gap-6\">\n <div class=\"input-group\">\n <label>Jaarlijks stroomverbruik (kWh)<\/label>\n <input type=\"number\" id=\"stroomverbruik\" value=\"3000\" oninput=\"EnergieCalc.calculate()\">\n <\/div>\n <div class=\"input-group\">\n <label>Jaarlijks gasverbruik (m\u00b3)<\/label>\n <input type=\"number\" id=\"gasverbruik\" value=\"1000\" oninput=\"EnergieCalc.calculate()\">\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"card-header\">\n <i class=\"fa-solid fa-battery-full text-green-500\"><\/i>\n <h2>Thuisbatterij (Verplicht)<\/h2>\n <\/div>\n <div class=\"card-body\">\n <div class=\"input-group\">\n <label>Batterij capaciteit<\/label>\n <select id=\"batterij_cap\" onchange=\"EnergieCalc.calculate()\">\n <option value=\"20\">20 kWh – \u20ac 8.500<\/option>\n <option value=\"30\">30 kWh – \u20ac 10.500<\/option>\n <option value=\"40\">40 kWh – \u20ac 13.500<\/option>\n <option value=\"50\">50 kWh – \u20ac 15.500<\/option>\n <\/select>\n <\/div>\n\n <div class=\"result-grid\">\n <div class=\"result-box\">\n <div class=\"result-label\">Investering<\/div>\n <div class=\"result-value\" id=\"bat_inv\">\u20ac 8.500<\/div>\n <\/div>\n <div class=\"result-box green\">\n <div class=\"result-label\">Jaarlijkse winst<\/div>\n <div class=\"result-value\" id=\"bat_winst\">\u20ac 1.950<\/div>\n <\/div>\n <div class=\"result-box\">\n <div class=\"result-label\">Terugverdientijd<\/div>\n <div class=\"result-value\" id=\"bat_tvt\">4,4 jaar<\/div>\n <\/div>\n <div class=\"result-box green\">\n <div class=\"result-label\">Rendement<\/div>\n <div class=\"result-value\" id=\"bat_rendement\">22,9%<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"card-header\">\n <i class=\"fa-solid fa-sun text-yellow-500\"><\/i>\n <h2>Bestaande Zonnepanelen (Optioneel)<\/h2>\n <\/div>\n <div class=\"card-body\">\n <div class=\"checkbox-wrapper\">\n <input type=\"checkbox\" id=\"has_solar\" onchange=\"EnergieCalc.toggleSection('solar_extra')\">\n <label for=\"has_solar\" class=\"mb-0\">Ik heb al zonnepanelen<\/label>\n <\/div>\n <div id=\"solar_extra\" class=\"hidden mt-4 border-t pt-4\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div class=\"input-group\">\n <label>Aantal zonnepanelen<\/label>\n <input type=\"number\" id=\"solar_count\" value=\"10\" oninput=\"EnergieCalc.calculate()\">\n <\/div>\n <div class=\"input-group\">\n <label>Capaciteit per paneel (Wp)<\/label>\n <input type=\"number\" id=\"solar_wp\" value=\"400\" oninput=\"EnergieCalc.calculate()\">\n <\/div>\n <\/div>\n <div class=\"bg-yellow-50 border-l-4 border-yellow-400 p-4 mt-4\">\n <div class=\"text-sm font-bold text-yellow-800\">Jaarlijkse besparing bestaande zonnepanelen<\/div>\n <div class=\"text-lg font-bold\" id=\"solar_extra_yield\">\u20ac 805 per jaar<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"card-header\">\n <i class=\"fa-solid fa-sun text-yellow-500\"><\/i>\n <h2>Nieuwe Zonnepanelen (Optioneel)<\/h2>\n <\/div>\n <div class=\"card-body\">\n <div class=\"checkbox-wrapper\">\n <input type=\"checkbox\" id=\"buy_solar\" onchange=\"EnergieCalc.toggleSection('solar_new')\">\n <label for=\"buy_solar\" class=\"mb-0\">Ik wil zonnepanelen aanschaffen<\/label>\n <\/div>\n <div id=\"solar_new\" class=\"hidden mt-4 border-t pt-4\">\n <div class=\"input-group\">\n <label>Gewenst aantal zonnepanelen (440 Wp – \u20ac 745 per stuk)<\/label>\n <input type=\"number\" id=\"new_solar_count\" value=\"12\" oninput=\"EnergieCalc.calculate()\">\n <\/div>\n <div class=\"result-grid\">\n <div class=\"result-box\">\n <div class=\"result-label\">Investering<\/div>\n <div class=\"result-value\" id=\"new_solar_inv\">\u20ac 8.940<\/div>\n <\/div>\n <div class=\"result-box\">\n <div class=\"result-label\">Totale capaciteit<\/div>\n <div class=\"result-value\" id=\"new_solar_yield_cap\">5,28 kWp<\/div>\n <\/div>\n <div class=\"result-box green\">\n <div class=\"result-label\">Jaarlijkse besparing nieuwe zonnepanelen<\/div>\n <div class=\"result-value\" id=\"new_solar_profit\">\u20ac 1.062<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"card-header\">\n <i class=\"fa-solid fa-temperature-half text-red-500\"><\/i>\n <h2>Bestaande Warmtepomp (Optioneel)<\/h2>\n <\/div>\n <div class=\"card-body\">\n <div class=\"checkbox-wrapper\">\n <input type=\"checkbox\" id=\"has_wp\" onchange=\"EnergieCalc.toggleSection('wp_extra')\">\n <label for=\"has_wp\" class=\"mb-0\">Ik heb al een warmtepomp<\/label>\n <\/div>\n <div id=\"wp_extra\" class=\"hidden mt-4 border-t pt-4\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div class=\"input-group\">\n <label>Type warmtepomp<\/label>\n <select id=\"old_wp_type\" onchange=\"EnergieCalc.calculate()\">\n <option value=\"hybride\">Hybride<\/option>\n <option value=\"full\">Full-electric<\/option>\n <\/select>\n <\/div>\n <div class=\"input-group\">\n <label>Capaciteit (kW)<\/label>\n <select id=\"old_wp_cap\" onchange=\"EnergieCalc.calculate()\">\n <option value=\"6\">6 kW<\/option>\n <option value=\"9\">9 kW<\/option>\n <option value=\"14\">14 kW<\/option>\n <\/select>\n <\/div>\n <\/div>\n <div class=\"bg-green-50 border-l-4 border-green-400 p-4 mt-4\">\n <div class=\"text-sm font-bold text-green-800\">Jaarlijkse besparing bestaande warmtepomp<\/div>\n <div class=\"text-lg font-bold\" id=\"old_wp_impact\">\u20ac 0 per jaar<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"card-header\">\n <i class=\"fa-solid fa-temperature-half text-red-500\"><\/i>\n <h2>Nieuwe Warmtepomp (Optioneel)<\/h2>\n <\/div>\n <div class=\"card-body\">\n <div class=\"checkbox-wrapper\">\n <input type=\"checkbox\" id=\"buy_wp\" onchange=\"EnergieCalc.toggleSection('wp_new')\">\n <label for=\"buy_wp\" class=\"mb-0\">Ik wil een warmtepomp aanschaffen<\/label>\n <\/div>\n <div id=\"wp_new\" class=\"hidden mt-4 border-t pt-4\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div class=\"input-group\">\n <label>Type warmtepomp<\/label>\n <select id=\"new_wp_type\" onchange=\"EnergieCalc.calculate()\">\n <option value=\"hybride\">Hybride<\/option>\n <option value=\"full\">Full-electric<\/option>\n <\/select>\n <\/div>\n <div class=\"input-group\">\n <label>Capaciteit (kW)<\/label>\n <select id=\"new_wp_cap\" onchange=\"EnergieCalc.calculate()\">\n <option value=\"6\">6 kW<\/option>\n <option value=\"9\">9 kW<\/option>\n <option value=\"14\">14 kW<\/option>\n <\/select>\n <\/div>\n <\/div>\n <div class=\"result-grid\">\n <div class=\"result-box\">\n <div class=\"result-label\">Investering<\/div>\n <div class=\"result-value\" id=\"new_wp_inv\">\u20ac 5.779<\/div>\n <\/div>\n <div class=\"result-box green\">\n <div class=\"result-label\">Netto jaarlijkse besparing<\/div>\n <div class=\"result-value\" id=\"new_wp_gas_save\">\u20ac 679<\/div>\n <\/div>\n <div class=\"result-box\">\n <div class=\"result-label\">Terugverdientijd<\/div>\n <div class=\"result-value\" id=\"new_wp_tvt\">8,5 jaar<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"totaal-overzicht\">\n <h2 class=\"text-xl font-bold mb-6 flex items-center gap-2\">\n <i class=\"fa-solid fa-sack-dollar text-yellow-400\"><\/i> Totaal Overzicht\n <\/h2>\n\n <div id=\"overzicht_zonder_fin\">\n <h3 class=\"text-sm uppercase font-bold mb-4 opacity-80\">Zonder Financiering<\/h3>\n <div class=\"grid grid-cols-1 md:grid-cols-5 gap-4 mb-8\">\n <div class=\"bg-white\/10 p-4 rounded-lg\">\n <div class=\"text-xs uppercase opacity-70\">Totale investering<\/div>\n <div class=\"text-2xl font-bold\" id=\"total_inv\">\u20ac 8.500<\/div>\n <\/div>\n <div class=\"bg-white\/10 p-4 rounded-lg\">\n <div class=\"text-xs uppercase opacity-70\">Jaarlijkse winst\/besparing<\/div>\n <div class=\"text-2xl font-bold\" id=\"total_profit\">\u20ac 1.950<\/div>\n <\/div>\n <div class=\"bg-white\/10 p-4 rounded-lg\">\n <div class=\"text-xs uppercase opacity-70\">Maandelijkse besparing<\/div>\n <div class=\"text-2xl font-bold\" id=\"total_profit_month\">\u20ac 162<\/div>\n <\/div>\n <div class=\"bg-white\/10 p-4 rounded-lg\">\n <div class=\"text-xs uppercase opacity-70\">Terugverdientijd<\/div>\n <div class=\"text-2xl font-bold\" id=\"total_tvt\">4,4 jaar<\/div>\n <\/div>\n <div class=\"bg-green-500\/20 p-4 rounded-lg border border-green-400\/30\">\n <div class=\"text-xs uppercase opacity-70\">Rendement<\/div>\n <div class=\"text-2xl font-bold text-green-300\" id=\"total_rendement\">22,9%<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"border-t border-white\/20 pt-6 mt-4\">\n <div class=\"flex items-center gap-3 mb-6 bg-white\/5 p-3 rounded-lg\">\n <input type=\"checkbox\" id=\"financiering_check\" onchange=\"EnergieCalc.calculate()\" class=\"w-5 h-5 cursor-pointer\">\n <label for=\"financiering_check\" class=\"text-sm font-semibold cursor-pointer text-white\">\n Toon berekening met financiering via Warmtefonds (4,23% – 15 jaar)\n <\/label>\n <\/div>\n\n <div id=\"overzicht_met_fin\" class=\"hidden\">\n <h3 class=\"text-sm uppercase font-bold mb-4 opacity-80\">Met Financiering (Warmtefonds)<\/h3>\n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-4\">\n <div class=\"bg-green-500\/20 p-4 rounded-lg border border-green-400\/30\">\n <div class=\"text-xs uppercase opacity-70\">Maandelijkse besparing<\/div>\n <div class=\"text-2xl font-bold text-green-300\" id=\"fin_maand_besparing\">\u20ac 162<\/div>\n <\/div>\n <div class=\"bg-white\/10 p-4 rounded-lg\">\n <div class=\"text-xs uppercase opacity-70\">Maandbedrag aflossing<\/div>\n <div class=\"text-2xl font-bold\" id=\"fin_maand_lasten\">\u20ac 75<\/div>\n <\/div>\n <div class=\"bg-blue-500\/20 p-4 rounded-lg border border-blue-400\/30\">\n <div class=\"text-xs uppercase opacity-70\">Maandelijks saldo<\/div>\n <div class=\"text-2xl font-bold text-blue-300\" id=\"fin_maand_saldo\">\u20ac 87<\/div>\n <\/div>\n <div class=\"bg-white\/10 p-4 rounded-lg\">\n <div class=\"text-xs uppercase opacity-70\">Terugverdientijd<\/div>\n <div class=\"text-2xl font-bold\" id=\"fin_tvt\">\u2013<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mt-8\">\n <div class=\"text-sm font-bold mb-2 opacity-80 text-white\">Terugverdientijd Visualisatie<\/div>\n <div class=\"progress-bar-bg\">\n <div id=\"tvt_bar\" class=\"progress-bar-fill\" style=\"width: 22%;\"><\/div>\n <\/div>\n <div class=\"text-xs mt-2 opacity-70\" id=\"tvt_visual_text\">4,4 jaar<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card mt-8 border-2 border-blue-200\">\n <div class=\"card-header bg-blue-50\">\n <i class=\"fa-solid fa-envelope text-blue-600\"><\/i>\n <h2>Ontvang uw berekening per e-mail<\/h2>\n <\/div>\n <div class=\"card-body\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\n <div class=\"input-group\">\n <label>Voornaam<\/label>\n <input type=\"text\" id=\"lead_name\" placeholder=\"Uw voornaam\">\n <\/div>\n <div class=\"input-group\">\n <label>E-mailadres<\/label>\n <input type=\"email\" id=\"lead_email\" placeholder=\"naam@voorbeeld.nl\">\n <\/div>\n <\/div>\n <div class=\"checkbox-wrapper\" style=\"align-items: flex-start;\">\n <input type=\"checkbox\" id=\"opt_in_marketing\" style=\"margin-top: 2px;\">\n <label for=\"opt_in_marketing\" class=\"mb-0\">Ja, ik wil graag tips en aanbiedingen ontvangen over energiebesparing<\/label>\n <\/div>\n <div class=\"checkbox-wrapper\" style=\"align-items: flex-start;\">\n <input type=\"checkbox\" id=\"disclaimer_check\" style=\"margin-top: 2px;\">\n <label for=\"disclaimer_check\" class=\"mb-0\">Ik begrijp dat deze berekening indicatief is en dat werkelijke resultaten kunnen afwijken door externe factoren zoals energieprijzen, marktomstandigheden, regelgeving, weer en gebruik.<\/label>\n <\/div>\n <div class=\"flex flex-wrap gap-4 mt-4\">\n <button class=\"btn-primary flex items-center gap-2\" onclick=\"EnergieCalc.sendLead()\">\n <i class=\"fa-solid fa-paper-plane\"><\/i> Berekening naar mij mailen\n <\/button>\n <div id=\"status_msg\" class=\"text-sm self-center font-semibold\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n(function() {\n 'use strict';\n\n window.EnergieCalc = {\n wpPrices: {\n full: { 6: 9381, 9: 9980, 14: 10900 },\n hybride: { 6: 5779, 9: 6579, 14: 7379 }\n },\n batPrices: { 20: 8500, 30: 10500, 40: 13500, 50: 15500 },\n gasPrijs: 1.33,\n stroomPrijs: 0.27,\n vastrechtGas: 339,\n\n \/\/ OPTIE 2: 3000 kWh blijft op oud niveau (~21%), 10.000 kWh wordt getemd\n _getVerbruiksFactor: function(stroomVerbruikKwh) {\n if (!stroomVerbruikKwh || stroomVerbruikKwh <= 0) return 1.0;\n const v = stroomVerbruikKwh;\n if (v <= 2000) return 0.85;\n if (v <= 3000) return 0.85 + (v - 2000) \/ 1000 * 0.15; \/\/ 2000->0.85, 3000->1.0\n if (v <= 5000) return 1.0 + (v - 3000) \/ 2000 * 0.15; \/\/ 3000->1.0, 5000->1.15\n if (v <= 10000) return 1.15 + (v - 5000) \/ 5000 * 0.15; \/\/ 5000->1.15, 10000->1.3\n return 1.3; \/\/ Maximaal 1.3x opbrengst\n },\n\n _getBatJaarWinst: function(capKwh, stroomVerbruikKwh) {\n const basisPerKwh = 89.25; \/\/ Aangepast voor 21% rendement bij 3000 kWh\n const factor = this._getVerbruiksFactor(stroomVerbruikKwh);\n return capKwh * basisPerKwh * factor;\n },\n\n toggleSection: function(id) {\n const el = document.getElementById(id);\n if (el) {\n el.classList.toggle('hidden');\n this.calculate();\n }\n },\n\n formatEuro: function(val) {\n return '\u20ac ' + Math.round(val).toLocaleString('nl-NL');\n },\n\n calculate: function() {\n const gasTotal = parseFloat(document.getElementById('gasverbruik').value) || 0;\n const stroomTotal = parseFloat(document.getElementById('stroomverbruik').value) || 0;\n\n \/\/ 1. Batterij\n const batCap = parseInt(document.getElementById('batterij_cap').value);\n const batInv = this.batPrices[batCap];\n const batWinst = this._getBatJaarWinst(batCap, stroomTotal);\n const batRendement = (batWinst \/ batInv) * 100;\n\n document.getElementById('bat_inv').innerText = this.formatEuro(batInv);\n document.getElementById('bat_winst').innerText = this.formatEuro(batWinst);\n document.getElementById('bat_tvt').innerText = (batInv \/ batWinst).toFixed(1) + ' jaar';\n document.getElementById('bat_rendement').innerText = batRendement.toFixed(1) + '%';\n\n let totalInv = batInv;\n let totalProfit = batWinst;\n\n \/\/ 2. Bestaande Solar\n if (document.getElementById('has_solar').checked) {\n const count = parseInt(document.getElementById('solar_count').value) || 0;\n const wp = parseInt(document.getElementById('solar_wp').value) || 0;\n const kwhPerPaneel = wp * 0.875;\n const extraYield = count * kwhPerPaneel * this.stroomPrijs;\n document.getElementById('solar_extra_yield').innerText = this.formatEuro(extraYield) + ' per jaar';\n totalProfit += extraYield;\n }\n\n \/\/ 3. Nieuwe Solar\n if (document.getElementById('buy_solar').checked) {\n const count = parseInt(document.getElementById('new_solar_count').value) || 0;\n const inv = count * 745;\n const wpPaneel = 440;\n const kwhPerPaneel = wpPaneel * 0.875;\n const profit = count * kwhPerPaneel * this.stroomPrijs;\n document.getElementById('new_solar_inv').innerText = this.formatEuro(inv);\n document.getElementById('new_solar_yield_cap').innerText = (count * wpPaneel \/ 1000).toFixed(2) + ' kWp';\n document.getElementById('new_solar_profit').innerText = this.formatEuro(profit);\n totalInv += inv;\n totalProfit += profit;\n }\n\n \/\/ 4. Nieuwe WP\n if (document.getElementById('buy_wp').checked) {\n const type = document.getElementById('new_wp_type').value;\n const cap = parseInt(document.getElementById('new_wp_cap').value);\n const inv = this.wpPrices[type][cap];\n let fractie = type === 'full' ? 1.0 : 0.76;\n let gasBesparingM3 = gasTotal * fractie;\n let extraVastrecht = type === 'full' ? this.vastrechtGas : 0;\n let extraStroomKwh = gasBesparingM3 * (type === 'full' ? 1.0 : 0.75);\n let extraStroomKosten = extraStroomKwh * this.stroomPrijs;\n let gasBesparingEuro = (gasBesparingM3 * this.gasPrijs) + extraVastrecht;\n let nettoBesparing = gasBesparingEuro - extraStroomKosten;\n document.getElementById('new_wp_inv').innerText = this.formatEuro(inv);\n document.getElementById('new_wp_gas_save').innerText = this.formatEuro(nettoBesparing);\n document.getElementById('new_wp_tvt').innerText = (inv \/ nettoBesparing).toFixed(1) + ' jaar';\n totalInv += inv;\n totalProfit += nettoBesparing;\n }\n\n \/\/ 5. Bestaande WP\n if (document.getElementById('has_wp').checked) {\n const typeOld = document.getElementById('old_wp_type').value;\n let fractieOld = typeOld === 'full' ? 1.0 : 0.76;\n let gasBesparingM3Old = gasTotal * fractieOld;\n let extraStroomKwhOld = gasBesparingM3Old * (typeOld === 'full' ? 1.0 : 0.75);\n let extraStroomKostenOld = extraStroomKwhOld * this.stroomPrijs;\n let extraVastrechtOld = typeOld === 'full' ? this.vastrechtGas : 0;\n let gasBesparingEuroOld = (gasBesparingM3Old * this.gasPrijs) + extraVastrechtOld - extraStroomKostenOld;\n document.getElementById('old_wp_impact').innerText = this.formatEuro(gasBesparingEuroOld) + ' per jaar';\n totalProfit += gasBesparingEuroOld;\n } else {\n document.getElementById('old_wp_impact').innerText = '\u20ac 0 per jaar';\n }\n\n \/\/ Totaal Overzicht\n const totalRendement = (totalProfit \/ totalInv) * 100;\n document.getElementById('total_inv').innerText = this.formatEuro(totalInv);\n document.getElementById('total_profit').innerText = this.formatEuro(totalProfit);\n document.getElementById('total_profit_month').innerText = this.formatEuro(totalProfit \/ 12);\n const finalTvt = totalInv \/ totalProfit;\n document.getElementById('total_tvt').innerText = finalTvt.toFixed(1) + ' jaar';\n document.getElementById('total_rendement').innerText = totalRendement.toFixed(1) + '%';\n\n \/\/ Visualisatie\n const barWidth = Math.min((finalTvt \/ 20) * 100, 100);\n document.getElementById('tvt_bar').style.width = barWidth + '%';\n document.getElementById('tvt_visual_text').innerText = finalTvt.toFixed(1) + ' jaar';\n\n \/\/ Financiering\n if (document.getElementById('financiering_check').checked) {\n document.getElementById('overzicht_met_fin').classList.remove('hidden');\n const maandBesparing = totalProfit \/ 12;\n const rente = 0.0423 \/ 12;\n const n = 15 * 12;\n const maandLasten = totalInv * (rente \/ (1 - Math.pow(1 + rente, -n)));\n const maandSaldo = maandBesparing - maandLasten;\n document.getElementById('fin_maand_besparing').innerText = this.formatEuro(maandBesparing);\n document.getElementById('fin_maand_lasten').innerText = this.formatEuro(maandLasten);\n document.getElementById('fin_maand_saldo').innerText = this.formatEuro(maandSaldo);\n if (maandSaldo > 0) {\n const tvtFin = totalInv \/ (maandSaldo * 12);\n document.getElementById('fin_tvt').innerText = tvtFin.toFixed(1) + ' jaar';\n } else {\n document.getElementById('fin_tvt').innerText = 'n.v.t.';\n }\n } else {\n document.getElementById('overzicht_met_fin').classList.add('hidden');\n }\n },\n\n sendLead: function() {\n const name = document.getElementById('lead_name').value;\n const email = document.getElementById('lead_email').value;\n const disclaimerChecked = document.getElementById('disclaimer_check').checked;\n const status = document.getElementById('status_msg');\n\n if(!name || !email) {\n status.innerText = 'Vul a.u.b. uw naam en e-mail in.';\n status.className = 'text-red-600 text-sm self-center font-semibold';\n return;\n }\n\n if(!disclaimerChecked) {\n status.innerText = 'U moet akkoord gaan met de disclaimer.';\n status.className = 'text-red-600 text-sm self-center font-semibold';\n return;\n }\n\n status.innerText = 'Bezig met verzenden...';\n status.className = 'text-blue-600 text-sm self-center font-semibold';\n\n setTimeout(function() {\n status.innerText = 'Berekening succesvol verzonden!';\n status.className = 'text-green-600 text-sm self-center font-semibold';\n }, 1500);\n }\n };\n\n \/\/ Start berekening\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', function() {\n EnergieCalc.calculate();\n });\n } else {\n EnergieCalc.calculate();\n }\n})();\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Energie Calculator – Energieneutraal Huis Energie Calculator Bereken uw rendement op de onbalansmarkt met XXL thuisbatterijen Uw Huidige Situatie Jaarlijks stroomverbruik (kWh) Jaarlijks gasverbruik (m\u00b3) Thuisbatterij (Verplicht) Batterij capaciteit 20 kWh – \u20ac 8.50030 kWh – \u20ac 10.50040 kWh – \u20ac 13.50050 kWh – \u20ac 15.500 Investering \u20ac 8.500 Jaarlijkse winst \u20ac 1.950 Terugverdientijd 4,4 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-6511","page","type-page","status-publish","hentry"],"blocksy_meta":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/pages\/6511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/comments?post=6511"}],"version-history":[{"count":2,"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/pages\/6511\/revisions"}],"predecessor-version":[{"id":6520,"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/pages\/6511\/revisions\/6520"}],"wp:attachment":[{"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/media?parent=6511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}