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 <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.0\/dist\/chart.umd.min.js\"><\/script>\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\"], input[type=\"tel\"] {\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 .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 .chart-container { position: relative; height: 400px; margin: 20px 0; }\n .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-top: 20px; }\n .stat-card { background: linear-gradient(135deg, #1e4e8c 0%, #2563eb 100%); color: white; padding: 20px; border-radius: 8px; text-align: center; }\n .stat-card.green { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }\n .stat-card.orange { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }\n .stat-card.purple { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }\n .stat-number { font-size: 2rem; font-weight: 700; margin-bottom: 5px; }\n .stat-label { font-size: 0.875rem; opacity: 0.9; }\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\" selected>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 10.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 2.677<\/div>\n <\/div>\n <div class=\"result-box\">\n <div class=\"result-label\">Terugverdientijd<\/div>\n <div class=\"result-value\" id=\"bat_tvt\">3,9 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\">25,5%<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card\" style=\"background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border: 2px solid #0ea5e9;\">\n <div class=\"card-header\" style=\"background: rgba(255,255,255,0.8); border-bottom: 2px solid #0ea5e9;\">\n <i class=\"fa-solid fa-chart-line text-blue-600\"><\/i>\n <h2 style=\"color: #0369a1;\">Batterij Investering Visualisatie<\/h2>\n <\/div>\n <div class=\"card-body\">\n \n <div class=\"stats-grid\">\n <div class=\"stat-card\">\n <div class=\"stat-number\" id=\"visual_bat_inv\">\u20ac10.500<\/div>\n <div class=\"stat-label\">Investering Batterij<\/div>\n <\/div>\n <div class=\"stat-card green\">\n <div class=\"stat-number\" id=\"visual_bat_winst\">\u20ac2.677<\/div>\n <div class=\"stat-label\">Jaarlijkse Winst<\/div>\n <\/div>\n <div class=\"stat-card orange\">\n <div class=\"stat-number\" id=\"visual_bat_tvt\">3,9 jaar<\/div>\n <div class=\"stat-label\">Terugverdientijd<\/div>\n <\/div>\n <div class=\"stat-card purple\">\n <div class=\"stat-number\" id=\"visual_bat_rendement\">25,5%<\/div>\n <div class=\"stat-label\">Rendement<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"chart-container\">\n <canvas id=\"batteryChart\"><\/canvas>\n <\/div>\n\n <div class=\"bg-white\/80 p-4 rounded-lg mt-4 border-l-4 border-blue-500\">\n <p class=\"text-sm text-gray-700\">\n <i class=\"fa-solid fa-info-circle text-blue-600\"><\/i>\n <strong>Toelichting:<\/strong> De grafiek toont uw cumulatieve cashflow over 15 jaar voor de batterij. \n De groene lijn geeft aan wanneer uw investering is terugverdiend. \n Daarna is alles pure winst! \ud83c\udf89\n <\/p>\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 10.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 2.677<\/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 223<\/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\">3,9 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\">25,5%<\/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 223<\/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 93<\/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 130<\/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 \n <div class=\"mt-8 bg-white\/10 p-6 rounded-lg\">\n <h3 class=\"text-lg font-bold mb-4 flex items-center gap-2\">\n <i class=\"fa-solid fa-chart-area text-yellow-400\"><\/i>\n Totaal Investering Visualisatie\n <\/h3>\n <div class=\"chart-container bg-white\/95 rounded-lg p-4\">\n <canvas id=\"totalChart\"><\/canvas>\n <\/div>\n <div class=\"bg-white\/5 p-4 rounded-lg mt-4 border-l-4 border-yellow-400\">\n <p class=\"text-sm opacity-90\">\n <i class=\"fa-solid fa-info-circle text-yellow-400\"><\/i>\n <strong>Toelichting:<\/strong> Deze grafiek toont uw totale cumulatieve cashflow inclusief alle geselecteerde componenten (batterij, zonnepanelen, warmtepomp) en financiering indien aangevinkt.\n <\/p>\n <\/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=\"Voornaam\">\n <\/div>\n <div class=\"input-group\">\n <label>Achternaam<\/label>\n <input type=\"text\" id=\"lead_lastname\" placeholder=\"Achternaam\">\n <\/div>\n <div class=\"input-group\">\n <label>E-mailadres<\/label>\n <input type=\"email\" id=\"lead_email\" placeholder=\"E-mailadres\">\n <\/div>\n <div class=\"input-group\">\n <label>Telefoonnummer<\/label>\n <input type=\"tel\" id=\"lead_phone\" placeholder=\"Telefoonnummer\">\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 let batteryChart = null;\n let totalChart = null;\n\n window.EnergieCalc = {\n \/\/ \u2699\ufe0f CONFIGURATIE: Vul hier jullie n8n webhook URL in\n N8N_WEBHOOK_URL: 'https:\/\/jouw-n8n-instance.com\/webhook\/energie-calculator',\n\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 _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;\n if (v <= 5000) return 1.0 + (v - 3000) \/ 2000 * 0.15;\n if (v <= 10000) return 1.15 + (v - 5000) \/ 5000 * 0.15;\n return 1.3;\n },\n\n _getBatJaarWinst: function(capKwh, stroomVerbruikKwh) {\n const basisPerKwh = 89.25;\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 updateBatteryChart: function(investering, jaarWinst, tvt) {\n const ctx = document.getElementById('batteryChart');\n if (!ctx) return;\n\n const jaren = [];\n const cashflow = [];\n\n for (let jaar = 0; jaar <= 15; jaar++) {\n jaren.push(jaar);\n const cumulatief = (jaarWinst * jaar) - investering;\n cashflow.push(Math.round(cumulatief));\n }\n\n if (batteryChart) {\n batteryChart.destroy();\n }\n\n batteryChart = new Chart(ctx, {\n type: 'line',\n data: {\n labels: jaren,\n datasets: [{\n label: 'Cumulatieve Cashflow (\u20ac)',\n data: cashflow,\n borderColor: '#10b981',\n backgroundColor: 'rgba(16, 185, 129, 0.1)',\n borderWidth: 3,\n fill: true,\n tension: 0.4,\n pointRadius: 4,\n pointHoverRadius: 6,\n pointBackgroundColor: '#10b981',\n pointBorderColor: '#fff',\n pointBorderWidth: 2\n }, {\n label: 'Break-even (\u20ac0)',\n data: Array(16).fill(0),\n borderColor: '#ef4444',\n borderWidth: 2,\n borderDash: [5, 5],\n pointRadius: 0,\n fill: false\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n display: true,\n position: 'top',\n labels: {\n font: { size: 14, weight: 'bold' },\n padding: 15\n }\n },\n tooltip: {\n backgroundColor: 'rgba(0, 0, 0, 0.8)',\n padding: 12,\n titleFont: { size: 14, weight: 'bold' },\n bodyFont: { size: 13 },\n callbacks: {\n label: function(context) {\n let label = context.dataset.label || '';\n if (label) {\n label += ': ';\n }\n if (context.parsed.y !== null) {\n label += '\u20ac ' + context.parsed.y.toLocaleString('nl-NL');\n }\n return label;\n }\n }\n }\n },\n scales: {\n x: {\n title: {\n display: true,\n text: 'Jaren',\n font: { size: 14, weight: 'bold' }\n },\n grid: {\n display: false\n }\n },\n y: {\n title: {\n display: true,\n text: 'Cumulatieve Cashflow (\u20ac)',\n font: { size: 14, weight: 'bold' }\n },\n ticks: {\n callback: function(value) {\n return '\u20ac ' + value.toLocaleString('nl-NL');\n }\n },\n grid: {\n color: 'rgba(0, 0, 0, 0.05)'\n }\n }\n }\n }\n });\n },\n\n updateTotalChart: function(investering, jaarWinst, tvt, metFinanciering) {\n const ctx = document.getElementById('totalChart');\n if (!ctx) return;\n\n const jaren = [];\n const cashflow = [];\n\n if (metFinanciering) {\n const rente = 0.0423 \/ 12;\n const n = 15 * 12;\n const maandLasten = investering * (rente \/ (1 - Math.pow(1 + rente, -n)));\n const maandBesparing = jaarWinst \/ 12;\n const maandSaldo = maandBesparing - maandLasten;\n const jaarSaldo = maandSaldo * 12;\n\n for (let jaar = 0; jaar <= 15; jaar++) {\n jaren.push(jaar);\n const cumulatief = jaarSaldo * jaar;\n cashflow.push(Math.round(cumulatief));\n }\n } else {\n for (let jaar = 0; jaar <= 15; jaar++) {\n jaren.push(jaar);\n const cumulatief = (jaarWinst * jaar) - investering;\n cashflow.push(Math.round(cumulatief));\n }\n }\n\n if (totalChart) {\n totalChart.destroy();\n }\n\n totalChart = new Chart(ctx, {\n type: 'line',\n data: {\n labels: jaren,\n datasets: [{\n label: 'Cumulatieve Cashflow (\u20ac)',\n data: cashflow,\n borderColor: '#10b981',\n backgroundColor: 'rgba(16, 185, 129, 0.1)',\n borderWidth: 3,\n fill: true,\n tension: 0.4,\n pointRadius: 4,\n pointHoverRadius: 6,\n pointBackgroundColor: '#10b981',\n pointBorderColor: '#fff',\n pointBorderWidth: 2\n }, {\n label: 'Break-even (\u20ac0)',\n data: Array(16).fill(0),\n borderColor: '#ef4444',\n borderWidth: 2,\n borderDash: [5, 5],\n pointRadius: 0,\n fill: false\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n display: true,\n position: 'top',\n labels: {\n font: { size: 14, weight: 'bold' },\n padding: 15,\n color: '#1f2937'\n }\n },\n tooltip: {\n backgroundColor: 'rgba(0, 0, 0, 0.8)',\n padding: 12,\n titleFont: { size: 14, weight: 'bold' },\n bodyFont: { size: 13 },\n callbacks: {\n label: function(context) {\n let label = context.dataset.label || '';\n if (label) {\n label += ': ';\n }\n if (context.parsed.y !== null) {\n label += '\u20ac ' + context.parsed.y.toLocaleString('nl-NL');\n }\n return label;\n }\n }\n }\n },\n scales: {\n x: {\n title: {\n display: true,\n text: 'Jaren',\n font: { size: 14, weight: 'bold' },\n color: '#1f2937'\n },\n grid: {\n display: false\n },\n ticks: {\n color: '#1f2937'\n }\n },\n y: {\n title: {\n display: true,\n text: 'Cumulatieve Cashflow (\u20ac)',\n font: { size: 14, weight: 'bold' },\n color: '#1f2937'\n },\n ticks: {\n callback: function(value) {\n return '\u20ac ' + value.toLocaleString('nl-NL');\n },\n color: '#1f2937'\n },\n grid: {\n color: 'rgba(0, 0, 0, 0.05)'\n }\n }\n }\n }\n });\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 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 const batTvt = batInv \/ batWinst;\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 = batTvt.toFixed(1) + ' jaar';\n document.getElementById('bat_rendement').innerText = batRendement.toFixed(1) + '%';\n\n document.getElementById('visual_bat_inv').innerText = this.formatEuro(batInv);\n document.getElementById('visual_bat_winst').innerText = this.formatEuro(batWinst);\n document.getElementById('visual_bat_tvt').innerText = batTvt.toFixed(1) + ' jaar';\n document.getElementById('visual_bat_rendement').innerText = batRendement.toFixed(1) + '%';\n\n this.updateBatteryChart(batInv, batWinst, batTvt);\n\n let totalInv = batInv;\n let totalProfit = batWinst;\n\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 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 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 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 const totalRendement = (totalProfit \/ totalInv) * 100;\n const finalTvt = totalInv \/ totalProfit;\n\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 document.getElementById('total_tvt').innerText = finalTvt.toFixed(1) + ' jaar';\n document.getElementById('total_rendement').innerText = totalRendement.toFixed(1) + '%';\n\n const metFinanciering = document.getElementById('financiering_check').checked;\n\n if (metFinanciering) {\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 this.updateTotalChart(totalInv, totalProfit, finalTvt, metFinanciering);\n },\n\n sendLead: function() {\n const name = document.getElementById('lead_name').value.trim();\n const lastname = document.getElementById('lead_lastname').value.trim();\n const email = document.getElementById('lead_email').value.trim();\n const phone = document.getElementById('lead_phone').value.trim();\n const optInMarketing = document.getElementById('opt_in_marketing').checked;\n const disclaimerChecked = document.getElementById('disclaimer_check').checked;\n const status = document.getElementById('status_msg');\n\n \/\/ Validatie\n if(!name || !lastname || !email || !phone) {\n status.innerText = 'Vul a.u.b. alle velden 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 \/\/ Verzamel alle calculator data\n const calculationData = {\n \/\/ NAWT gegevens\n voornaam: name,\n achternaam: lastname,\n email: email,\n telefoon: phone,\n opt_in_marketing: optInMarketing,\n\n \/\/ Huidige situatie\n stroomverbruik: document.getElementById('stroomverbruik').value,\n gasverbruik: document.getElementById('gasverbruik').value,\n\n \/\/ Batterij (verplicht)\n batterij_cap: document.getElementById('batterij_cap').value,\n bat_inv: document.getElementById('bat_inv').innerText,\n bat_winst: document.getElementById('bat_winst').innerText,\n bat_tvt: document.getElementById('bat_tvt').innerText,\n bat_rendement: document.getElementById('bat_rendement').innerText,\n\n \/\/ Bestaande zonnepanelen\n has_solar: document.getElementById('has_solar').checked,\n solar_count: document.getElementById('solar_count') ? document.getElementById('solar_count').value : '',\n solar_wp: document.getElementById('solar_wp') ? document.getElementById('solar_wp').value : '',\n solar_extra_yield: document.getElementById('solar_extra_yield') ? document.getElementById('solar_extra_yield').innerText : '',\n\n \/\/ Nieuwe zonnepanelen\n buy_solar: document.getElementById('buy_solar').checked,\n new_solar_count: document.getElementById('new_solar_count') ? document.getElementById('new_solar_count').value : '',\n new_solar_inv: document.getElementById('new_solar_inv') ? document.getElementById('new_solar_inv').innerText : '',\n new_solar_yield_cap: document.getElementById('new_solar_yield_cap') ? document.getElementById('new_solar_yield_cap').innerText : '',\n new_solar_profit: document.getElementById('new_solar_profit') ? document.getElementById('new_solar_profit').innerText : '',\n\n \/\/ Bestaande warmtepomp\n has_wp: document.getElementById('has_wp').checked,\n old_wp_type: document.getElementById('old_wp_type') ? document.getElementById('old_wp_type').value : '',\n old_wp_cap: document.getElementById('old_wp_cap') ? document.getElementById('old_wp_cap').value : '',\n old_wp_impact: document.getElementById('old_wp_impact') ? document.getElementById('old_wp_impact').innerText : '',\n\n \/\/ Nieuwe warmtepomp\n buy_wp: document.getElementById('buy_wp').checked,\n new_wp_type: document.getElementById('new_wp_type') ? document.getElementById('new_wp_type').value : '',\n new_wp_cap: document.getElementById('new_wp_cap') ? document.getElementById('new_wp_cap').value : '',\n new_wp_inv: document.getElementById('new_wp_inv') ? document.getElementById('new_wp_inv').innerText : '',\n new_wp_gas_save: document.getElementById('new_wp_gas_save') ? document.getElementById('new_wp_gas_save').innerText : '',\n new_wp_tvt: document.getElementById('new_wp_tvt') ? document.getElementById('new_wp_tvt').innerText : '',\n\n \/\/ Totaal overzicht\n total_inv: document.getElementById('total_inv').innerText,\n total_profit: document.getElementById('total_profit').innerText,\n total_profit_month: document.getElementById('total_profit_month').innerText,\n total_tvt: document.getElementById('total_tvt').innerText,\n total_rendement: document.getElementById('total_rendement').innerText,\n\n \/\/ Financiering\n financiering: document.getElementById('financiering_check').checked,\n fin_maand_besparing: document.getElementById('fin_maand_besparing') ? document.getElementById('fin_maand_besparing').innerText : '',\n fin_maand_lasten: document.getElementById('fin_maand_lasten') ? document.getElementById('fin_maand_lasten').innerText : '',\n fin_maand_saldo: document.getElementById('fin_maand_saldo') ? document.getElementById('fin_maand_saldo').innerText : '',\n fin_tvt: document.getElementById('fin_tvt') ? document.getElementById('fin_tvt').innerText : '',\n\n \/\/ Metadata\n timestamp: new Date().toISOString(),\n source: 'energie-calculator'\n };\n\n \/\/ \ud83d\udd25 WEBHOOK NAAR N8N\n fetch(this.N8N_WEBHOOK_URL, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify(calculationData)\n })\n .then(response => {\n if (!response.ok) {\n throw new Error('Webhook response was not ok');\n }\n return response.json();\n })\n .then(data => {\n status.innerText = '\u2705 Berekening succesvol verzonden!';\n status.className = 'text-green-600 text-sm self-center font-semibold';\n\n \/\/ Reset formulier\n document.getElementById('lead_name').value = '';\n document.getElementById('lead_lastname').value = '';\n document.getElementById('lead_email').value = '';\n document.getElementById('lead_phone').value = '';\n document.getElementById('opt_in_marketing').checked = false;\n document.getElementById('disclaimer_check').checked = false;\n })\n .catch(error => {\n status.innerText = '\u274c Fout bij verzenden. Probeer het later opnieuw.';\n status.className = 'text-red-600 text-sm self-center font-semibold';\n console.error('Webhook error:', error);\n });\n }\n };\n\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\n\n\n<p class=\"wp-block-paragraph\"><\/p>\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 10.500 Jaarlijkse winst \u20ac 2.677 Terugverdientijd 3,9 […]<\/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-6525","page","type-page","status-publish","hentry"],"blocksy_meta":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/pages\/6525","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=6525"}],"version-history":[{"count":8,"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/pages\/6525\/revisions"}],"predecessor-version":[{"id":6533,"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/pages\/6525\/revisions\/6533"}],"wp:attachment":[{"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/media?parent=6525"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":6525,"date":"2025-12-29T10:47:34","date_gmt":"2025-12-29T10:47:34","guid":{"rendered":"https:\/\/energieneutraal-huis.nl\/?page_id=6525"},"modified":"2026-01-03T10:09:51","modified_gmt":"2026-01-03T10:09:51","slug":"batterij-rendement2","status":"publish","type":"page","link":"https:\/\/energieneutraal-huis.nl\/index.php\/batterij-rendement2\/","title":{"rendered":"Batterij rendement2"},"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 <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.0\/dist\/chart.umd.min.js\"><\/script>\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\"], input[type=\"tel\"] {\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 .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 .chart-container { position: relative; height: 400px; margin: 20px 0; }\n .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-top: 20px; }\n .stat-card { background: linear-gradient(135deg, #1e4e8c 0%, #2563eb 100%); color: white; padding: 20px; border-radius: 8px; text-align: center; }\n .stat-card.green { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }\n .stat-card.orange { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }\n .stat-card.purple { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }\n .stat-number { font-size: 2rem; font-weight: 700; margin-bottom: 5px; }\n .stat-label { font-size: 0.875rem; opacity: 0.9; }\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\" selected>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 10.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 2.677<\/div>\n <\/div>\n <div class=\"result-box\">\n <div class=\"result-label\">Terugverdientijd<\/div>\n <div class=\"result-value\" id=\"bat_tvt\">3,9 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\">25,5%<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card\" style=\"background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border: 2px solid #0ea5e9;\">\n <div class=\"card-header\" style=\"background: rgba(255,255,255,0.8); border-bottom: 2px solid #0ea5e9;\">\n <i class=\"fa-solid fa-chart-line text-blue-600\"><\/i>\n <h2 style=\"color: #0369a1;\">Batterij Investering Visualisatie<\/h2>\n <\/div>\n <div class=\"card-body\">\n \n <div class=\"stats-grid\">\n <div class=\"stat-card\">\n <div class=\"stat-number\" id=\"visual_bat_inv\">\u20ac10.500<\/div>\n <div class=\"stat-label\">Investering Batterij<\/div>\n <\/div>\n <div class=\"stat-card green\">\n <div class=\"stat-number\" id=\"visual_bat_winst\">\u20ac2.677<\/div>\n <div class=\"stat-label\">Jaarlijkse Winst<\/div>\n <\/div>\n <div class=\"stat-card orange\">\n <div class=\"stat-number\" id=\"visual_bat_tvt\">3,9 jaar<\/div>\n <div class=\"stat-label\">Terugverdientijd<\/div>\n <\/div>\n <div class=\"stat-card purple\">\n <div class=\"stat-number\" id=\"visual_bat_rendement\">25,5%<\/div>\n <div class=\"stat-label\">Rendement<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"chart-container\">\n <canvas id=\"batteryChart\"><\/canvas>\n <\/div>\n\n <div class=\"bg-white\/80 p-4 rounded-lg mt-4 border-l-4 border-blue-500\">\n <p class=\"text-sm text-gray-700\">\n <i class=\"fa-solid fa-info-circle text-blue-600\"><\/i>\n <strong>Toelichting:<\/strong> De grafiek toont uw cumulatieve cashflow over 15 jaar voor de batterij. \n De groene lijn geeft aan wanneer uw investering is terugverdiend. \n Daarna is alles pure winst! \ud83c\udf89\n <\/p>\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 10.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 2.677<\/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 223<\/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\">3,9 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\">25,5%<\/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 223<\/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 93<\/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 130<\/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 \n <div class=\"mt-8 bg-white\/10 p-6 rounded-lg\">\n <h3 class=\"text-lg font-bold mb-4 flex items-center gap-2\">\n <i class=\"fa-solid fa-chart-area text-yellow-400\"><\/i>\n Totaal Investering Visualisatie\n <\/h3>\n <div class=\"chart-container bg-white\/95 rounded-lg p-4\">\n <canvas id=\"totalChart\"><\/canvas>\n <\/div>\n <div class=\"bg-white\/5 p-4 rounded-lg mt-4 border-l-4 border-yellow-400\">\n <p class=\"text-sm opacity-90\">\n <i class=\"fa-solid fa-info-circle text-yellow-400\"><\/i>\n <strong>Toelichting:<\/strong> Deze grafiek toont uw totale cumulatieve cashflow inclusief alle geselecteerde componenten (batterij, zonnepanelen, warmtepomp) en financiering indien aangevinkt.\n <\/p>\n <\/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=\"Voornaam\">\n <\/div>\n <div class=\"input-group\">\n <label>Achternaam<\/label>\n <input type=\"text\" id=\"lead_lastname\" placeholder=\"Achternaam\">\n <\/div>\n <div class=\"input-group\">\n <label>E-mailadres<\/label>\n <input type=\"email\" id=\"lead_email\" placeholder=\"E-mailadres\">\n <\/div>\n <div class=\"input-group\">\n <label>Telefoonnummer<\/label>\n <input type=\"tel\" id=\"lead_phone\" placeholder=\"Telefoonnummer\">\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 let batteryChart = null;\n let totalChart = null;\n\n window.EnergieCalc = {\n \/\/ \u2699\ufe0f CONFIGURATIE: Vul hier jullie n8n webhook URL in\n N8N_WEBHOOK_URL: 'https:\/\/jouw-n8n-instance.com\/webhook\/energie-calculator',\n\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 _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;\n if (v <= 5000) return 1.0 + (v - 3000) \/ 2000 * 0.15;\n if (v <= 10000) return 1.15 + (v - 5000) \/ 5000 * 0.15;\n return 1.3;\n },\n\n _getBatJaarWinst: function(capKwh, stroomVerbruikKwh) {\n const basisPerKwh = 89.25;\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 updateBatteryChart: function(investering, jaarWinst, tvt) {\n const ctx = document.getElementById('batteryChart');\n if (!ctx) return;\n\n const jaren = [];\n const cashflow = [];\n\n for (let jaar = 0; jaar <= 15; jaar++) {\n jaren.push(jaar);\n const cumulatief = (jaarWinst * jaar) - investering;\n cashflow.push(Math.round(cumulatief));\n }\n\n if (batteryChart) {\n batteryChart.destroy();\n }\n\n batteryChart = new Chart(ctx, {\n type: 'line',\n data: {\n labels: jaren,\n datasets: [{\n label: 'Cumulatieve Cashflow (\u20ac)',\n data: cashflow,\n borderColor: '#10b981',\n backgroundColor: 'rgba(16, 185, 129, 0.1)',\n borderWidth: 3,\n fill: true,\n tension: 0.4,\n pointRadius: 4,\n pointHoverRadius: 6,\n pointBackgroundColor: '#10b981',\n pointBorderColor: '#fff',\n pointBorderWidth: 2\n }, {\n label: 'Break-even (\u20ac0)',\n data: Array(16).fill(0),\n borderColor: '#ef4444',\n borderWidth: 2,\n borderDash: [5, 5],\n pointRadius: 0,\n fill: false\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n display: true,\n position: 'top',\n labels: {\n font: { size: 14, weight: 'bold' },\n padding: 15\n }\n },\n tooltip: {\n backgroundColor: 'rgba(0, 0, 0, 0.8)',\n padding: 12,\n titleFont: { size: 14, weight: 'bold' },\n bodyFont: { size: 13 },\n callbacks: {\n label: function(context) {\n let label = context.dataset.label || '';\n if (label) {\n label += ': ';\n }\n if (context.parsed.y !== null) {\n label += '\u20ac ' + context.parsed.y.toLocaleString('nl-NL');\n }\n return label;\n }\n }\n }\n },\n scales: {\n x: {\n title: {\n display: true,\n text: 'Jaren',\n font: { size: 14, weight: 'bold' }\n },\n grid: {\n display: false\n }\n },\n y: {\n title: {\n display: true,\n text: 'Cumulatieve Cashflow (\u20ac)',\n font: { size: 14, weight: 'bold' }\n },\n ticks: {\n callback: function(value) {\n return '\u20ac ' + value.toLocaleString('nl-NL');\n }\n },\n grid: {\n color: 'rgba(0, 0, 0, 0.05)'\n }\n }\n }\n }\n });\n },\n\n updateTotalChart: function(investering, jaarWinst, tvt, metFinanciering) {\n const ctx = document.getElementById('totalChart');\n if (!ctx) return;\n\n const jaren = [];\n const cashflow = [];\n\n if (metFinanciering) {\n const rente = 0.0423 \/ 12;\n const n = 15 * 12;\n const maandLasten = investering * (rente \/ (1 - Math.pow(1 + rente, -n)));\n const maandBesparing = jaarWinst \/ 12;\n const maandSaldo = maandBesparing - maandLasten;\n const jaarSaldo = maandSaldo * 12;\n\n for (let jaar = 0; jaar <= 15; jaar++) {\n jaren.push(jaar);\n const cumulatief = jaarSaldo * jaar;\n cashflow.push(Math.round(cumulatief));\n }\n } else {\n for (let jaar = 0; jaar <= 15; jaar++) {\n jaren.push(jaar);\n const cumulatief = (jaarWinst * jaar) - investering;\n cashflow.push(Math.round(cumulatief));\n }\n }\n\n if (totalChart) {\n totalChart.destroy();\n }\n\n totalChart = new Chart(ctx, {\n type: 'line',\n data: {\n labels: jaren,\n datasets: [{\n label: 'Cumulatieve Cashflow (\u20ac)',\n data: cashflow,\n borderColor: '#10b981',\n backgroundColor: 'rgba(16, 185, 129, 0.1)',\n borderWidth: 3,\n fill: true,\n tension: 0.4,\n pointRadius: 4,\n pointHoverRadius: 6,\n pointBackgroundColor: '#10b981',\n pointBorderColor: '#fff',\n pointBorderWidth: 2\n }, {\n label: 'Break-even (\u20ac0)',\n data: Array(16).fill(0),\n borderColor: '#ef4444',\n borderWidth: 2,\n borderDash: [5, 5],\n pointRadius: 0,\n fill: false\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n display: true,\n position: 'top',\n labels: {\n font: { size: 14, weight: 'bold' },\n padding: 15,\n color: '#1f2937'\n }\n },\n tooltip: {\n backgroundColor: 'rgba(0, 0, 0, 0.8)',\n padding: 12,\n titleFont: { size: 14, weight: 'bold' },\n bodyFont: { size: 13 },\n callbacks: {\n label: function(context) {\n let label = context.dataset.label || '';\n if (label) {\n label += ': ';\n }\n if (context.parsed.y !== null) {\n label += '\u20ac ' + context.parsed.y.toLocaleString('nl-NL');\n }\n return label;\n }\n }\n }\n },\n scales: {\n x: {\n title: {\n display: true,\n text: 'Jaren',\n font: { size: 14, weight: 'bold' },\n color: '#1f2937'\n },\n grid: {\n display: false\n },\n ticks: {\n color: '#1f2937'\n }\n },\n y: {\n title: {\n display: true,\n text: 'Cumulatieve Cashflow (\u20ac)',\n font: { size: 14, weight: 'bold' },\n color: '#1f2937'\n },\n ticks: {\n callback: function(value) {\n return '\u20ac ' + value.toLocaleString('nl-NL');\n },\n color: '#1f2937'\n },\n grid: {\n color: 'rgba(0, 0, 0, 0.05)'\n }\n }\n }\n }\n });\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 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 const batTvt = batInv \/ batWinst;\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 = batTvt.toFixed(1) + ' jaar';\n document.getElementById('bat_rendement').innerText = batRendement.toFixed(1) + '%';\n\n document.getElementById('visual_bat_inv').innerText = this.formatEuro(batInv);\n document.getElementById('visual_bat_winst').innerText = this.formatEuro(batWinst);\n document.getElementById('visual_bat_tvt').innerText = batTvt.toFixed(1) + ' jaar';\n document.getElementById('visual_bat_rendement').innerText = batRendement.toFixed(1) + '%';\n\n this.updateBatteryChart(batInv, batWinst, batTvt);\n\n let totalInv = batInv;\n let totalProfit = batWinst;\n\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 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 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 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 const totalRendement = (totalProfit \/ totalInv) * 100;\n const finalTvt = totalInv \/ totalProfit;\n\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 document.getElementById('total_tvt').innerText = finalTvt.toFixed(1) + ' jaar';\n document.getElementById('total_rendement').innerText = totalRendement.toFixed(1) + '%';\n\n const metFinanciering = document.getElementById('financiering_check').checked;\n\n if (metFinanciering) {\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 this.updateTotalChart(totalInv, totalProfit, finalTvt, metFinanciering);\n },\n\n sendLead: function() {\n const name = document.getElementById('lead_name').value.trim();\n const lastname = document.getElementById('lead_lastname').value.trim();\n const email = document.getElementById('lead_email').value.trim();\n const phone = document.getElementById('lead_phone').value.trim();\n const optInMarketing = document.getElementById('opt_in_marketing').checked;\n const disclaimerChecked = document.getElementById('disclaimer_check').checked;\n const status = document.getElementById('status_msg');\n\n \/\/ Validatie\n if(!name || !lastname || !email || !phone) {\n status.innerText = 'Vul a.u.b. alle velden 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 \/\/ Verzamel alle calculator data\n const calculationData = {\n \/\/ NAWT gegevens\n voornaam: name,\n achternaam: lastname,\n email: email,\n telefoon: phone,\n opt_in_marketing: optInMarketing,\n\n \/\/ Huidige situatie\n stroomverbruik: document.getElementById('stroomverbruik').value,\n gasverbruik: document.getElementById('gasverbruik').value,\n\n \/\/ Batterij (verplicht)\n batterij_cap: document.getElementById('batterij_cap').value,\n bat_inv: document.getElementById('bat_inv').innerText,\n bat_winst: document.getElementById('bat_winst').innerText,\n bat_tvt: document.getElementById('bat_tvt').innerText,\n bat_rendement: document.getElementById('bat_rendement').innerText,\n\n \/\/ Bestaande zonnepanelen\n has_solar: document.getElementById('has_solar').checked,\n solar_count: document.getElementById('solar_count') ? document.getElementById('solar_count').value : '',\n solar_wp: document.getElementById('solar_wp') ? document.getElementById('solar_wp').value : '',\n solar_extra_yield: document.getElementById('solar_extra_yield') ? document.getElementById('solar_extra_yield').innerText : '',\n\n \/\/ Nieuwe zonnepanelen\n buy_solar: document.getElementById('buy_solar').checked,\n new_solar_count: document.getElementById('new_solar_count') ? document.getElementById('new_solar_count').value : '',\n new_solar_inv: document.getElementById('new_solar_inv') ? document.getElementById('new_solar_inv').innerText : '',\n new_solar_yield_cap: document.getElementById('new_solar_yield_cap') ? document.getElementById('new_solar_yield_cap').innerText : '',\n new_solar_profit: document.getElementById('new_solar_profit') ? document.getElementById('new_solar_profit').innerText : '',\n\n \/\/ Bestaande warmtepomp\n has_wp: document.getElementById('has_wp').checked,\n old_wp_type: document.getElementById('old_wp_type') ? document.getElementById('old_wp_type').value : '',\n old_wp_cap: document.getElementById('old_wp_cap') ? document.getElementById('old_wp_cap').value : '',\n old_wp_impact: document.getElementById('old_wp_impact') ? document.getElementById('old_wp_impact').innerText : '',\n\n \/\/ Nieuwe warmtepomp\n buy_wp: document.getElementById('buy_wp').checked,\n new_wp_type: document.getElementById('new_wp_type') ? document.getElementById('new_wp_type').value : '',\n new_wp_cap: document.getElementById('new_wp_cap') ? document.getElementById('new_wp_cap').value : '',\n new_wp_inv: document.getElementById('new_wp_inv') ? document.getElementById('new_wp_inv').innerText : '',\n new_wp_gas_save: document.getElementById('new_wp_gas_save') ? document.getElementById('new_wp_gas_save').innerText : '',\n new_wp_tvt: document.getElementById('new_wp_tvt') ? document.getElementById('new_wp_tvt').innerText : '',\n\n \/\/ Totaal overzicht\n total_inv: document.getElementById('total_inv').innerText,\n total_profit: document.getElementById('total_profit').innerText,\n total_profit_month: document.getElementById('total_profit_month').innerText,\n total_tvt: document.getElementById('total_tvt').innerText,\n total_rendement: document.getElementById('total_rendement').innerText,\n\n \/\/ Financiering\n financiering: document.getElementById('financiering_check').checked,\n fin_maand_besparing: document.getElementById('fin_maand_besparing') ? document.getElementById('fin_maand_besparing').innerText : '',\n fin_maand_lasten: document.getElementById('fin_maand_lasten') ? document.getElementById('fin_maand_lasten').innerText : '',\n fin_maand_saldo: document.getElementById('fin_maand_saldo') ? document.getElementById('fin_maand_saldo').innerText : '',\n fin_tvt: document.getElementById('fin_tvt') ? document.getElementById('fin_tvt').innerText : '',\n\n \/\/ Metadata\n timestamp: new Date().toISOString(),\n source: 'energie-calculator'\n };\n\n \/\/ \ud83d\udd25 WEBHOOK NAAR N8N\n fetch(this.N8N_WEBHOOK_URL, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify(calculationData)\n })\n .then(response => {\n if (!response.ok) {\n throw new Error('Webhook response was not ok');\n }\n return response.json();\n })\n .then(data => {\n status.innerText = '\u2705 Berekening succesvol verzonden!';\n status.className = 'text-green-600 text-sm self-center font-semibold';\n\n \/\/ Reset formulier\n document.getElementById('lead_name').value = '';\n document.getElementById('lead_lastname').value = '';\n document.getElementById('lead_email').value = '';\n document.getElementById('lead_phone').value = '';\n document.getElementById('opt_in_marketing').checked = false;\n document.getElementById('disclaimer_check').checked = false;\n })\n .catch(error => {\n status.innerText = '\u274c Fout bij verzenden. Probeer het later opnieuw.';\n status.className = 'text-red-600 text-sm self-center font-semibold';\n console.error('Webhook error:', error);\n });\n }\n };\n\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\n\n\n<p class=\"wp-block-paragraph\"><\/p>\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 10.500 Jaarlijkse winst \u20ac 2.677 Terugverdientijd 3,9 […]<\/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-6525","page","type-page","status-publish","hentry"],"blocksy_meta":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/pages\/6525","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=6525"}],"version-history":[{"count":8,"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/pages\/6525\/revisions"}],"predecessor-version":[{"id":6533,"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/pages\/6525\/revisions\/6533"}],"wp:attachment":[{"href":"https:\/\/energieneutraal-huis.nl\/index.php\/wp-json\/wp\/v2\/media?parent=6525"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}