Home Load Calculator<\/title>\n<style>\n\/* ===== EA2Z Home Load Calculator - Scoped CSS ===== *\/\n.ea2z-hlc-wrap * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\n.ea2z-hlc-wrap {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n max-width: 960px;\n margin: 20px auto;\n padding: 0 15px;\n color: #2d3436;\n line-height: 1.6;\n}\n\n\/* Header *\/\n.ea2z-hlc-header {\n background: linear-gradient(135deg, #0984e3 0%, #6c5ce7 50%, #a855f7 100%);\n border-radius: 16px;\n padding: 32px 28px;\n text-align: center;\n margin-bottom: 24px;\n position: relative;\n overflow: hidden;\n box-shadow: 0 8px 32px rgba(9, 132, 227, 0.3);\n}\n\n.ea2z-hlc-header::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);\n animation: ea2z-pulse 6s ease-in-out infinite;\n}\n\n@keyframes ea2z-pulse {\n 0%, 100% { transform: scale(1); opacity: 0.5; }\n 50% { transform: scale(1.1); opacity: 1; }\n}\n\n.ea2z-hlc-header-icon {\n font-size: 48px;\n margin-bottom: 8px;\n position: relative;\n z-index: 1;\n}\n\n.ea2z-hlc-header h1 {\n color: #ffffff;\n font-size: 28px;\n font-weight: 700;\n margin-bottom: 6px;\n position: relative;\n z-index: 1;\n letter-spacing: -0.5px;\n}\n\n.ea2z-hlc-header p {\n color: rgba(255, 255, 255, 0.9);\n font-size: 15px;\n position: relative;\n z-index: 1;\n font-weight: 400;\n}\n\n\/* Summary Cards *\/\n.ea2z-hlc-summary {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 14px;\n margin-bottom: 24px;\n}\n\n.ea2z-hlc-summary-card {\n background: #ffffff;\n border-radius: 14px;\n padding: 20px 16px;\n text-align: center;\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);\n border: 1px solid #f0f0f0;\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n position: relative;\n overflow: hidden;\n}\n\n.ea2z-hlc-summary-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n}\n\n.ea2z-hlc-summary-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n}\n\n.ea2z-hlc-summary-card:nth-child(1)::before { background: linear-gradient(90deg, #0984e3, #74b9ff); }\n.ea2z-hlc-summary-card:nth-child(2)::before { background: linear-gradient(90deg, #00b894, #55efc4); }\n.ea2z-hlc-summary-card:nth-child(3)::before { background: linear-gradient(90deg, #e17055, #fab1a0); }\n.ea2z-hlc-summary-card:nth-child(4)::before { background: linear-gradient(90deg, #6c5ce7, #a29bfe); }\n\n.ea2z-hlc-summary-icon {\n font-size: 28px;\n margin-bottom: 8px;\n}\n\n.ea2z-hlc-summary-label {\n font-size: 12px;\n color: #636e72;\n text-transform: uppercase;\n letter-spacing: 0.8px;\n font-weight: 600;\n margin-bottom: 4px;\n}\n\n.ea2z-hlc-summary-value {\n font-size: 22px;\n font-weight: 700;\n color: #2d3436;\n line-height: 1.2;\n}\n\n.ea2z-hlc-summary-unit {\n font-size: 12px;\n color: #b2bec3;\n font-weight: 500;\n margin-top: 2px;\n}\n\n\/* Appliance Section *\/\n.ea2z-hlc-section-title {\n font-size: 20px;\n font-weight: 700;\n color: #2d3436;\n margin-bottom: 16px;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.ea2z-hlc-section-title span {\n font-size: 24px;\n}\n\n\/* Appliance Cards *\/\n.ea2z-hlc-cards {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-bottom: 20px;\n}\n\n.ea2z-hlc-card {\n background: #ffffff;\n border-radius: 14px;\n padding: 20px;\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);\n border: 1px solid #f0f0f0;\n transition: box-shadow 0.2s ease;\n animation: ea2z-fadeIn 0.3s ease;\n}\n\n@keyframes ea2z-fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.ea2z-hlc-card:hover {\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);\n}\n\n.ea2z-hlc-card-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.ea2z-hlc-card-num {\n background: linear-gradient(135deg, #0984e3, #6c5ce7);\n color: #fff;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 13px;\n font-weight: 700;\n}\n\n.ea2z-hlc-card-load {\n font-size: 14px;\n font-weight: 600;\n color: #0984e3;\n background: rgba(9, 132, 227, 0.08);\n padding: 4px 12px;\n border-radius: 20px;\n}\n\n.ea2z-hlc-remove-btn {\n background: none;\n border: none;\n color: #e17055;\n cursor: pointer;\n font-size: 20px;\n padding: 4px 8px;\n border-radius: 8px;\n transition: background 0.2s;\n line-height: 1;\n}\n\n.ea2z-hlc-remove-btn:hover {\n background: rgba(225, 112, 85, 0.1);\n}\n\n.ea2z-hlc-card-grid {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 12px;\n align-items: end;\n}\n\n.ea2z-hlc-field {\n display: flex;\n flex-direction: column;\n}\n\n.ea2z-hlc-field label {\n font-size: 11px;\n color: #636e72;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 6px;\n}\n\n.ea2z-hlc-field select,\n.ea2z-hlc-field input {\n width: 100%;\n padding: 10px 12px;\n border: 2px solid #edf2f7;\n border-radius: 10px;\n font-size: 14px;\n font-family: inherit;\n color: #2d3436;\n background: #fafbfc;\n transition: border-color 0.2s, box-shadow 0.2s;\n outline: none;\n -webkit-appearance: none;\n appearance: none;\n}\n\n.ea2z-hlc-field select {\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23636e72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 12px center;\n padding-right: 32px;\n cursor: pointer;\n}\n\n.ea2z-hlc-field select:focus,\n.ea2z-hlc-field input:focus {\n border-color: #0984e3;\n box-shadow: 0 0 0 3px rgba(9, 132, 227, 0.1);\n background: #fff;\n}\n\n.ea2z-hlc-field input[type=\"number\"] {\n -moz-appearance: textfield;\n}\n\n.ea2z-hlc-field input[type=\"number\"]::-webkit-inner-spin-button,\n.ea2z-hlc-field input[type=\"number\"]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n\/* Quantity Control *\/\n.ea2z-hlc-qty-wrap {\n display: flex;\n align-items: center;\n border: 2px solid #edf2f7;\n border-radius: 10px;\n overflow: hidden;\n background: #fafbfc;\n}\n\n.ea2z-hlc-qty-btn {\n background: none;\n border: none;\n width: 36px;\n height: 40px;\n font-size: 18px;\n cursor: pointer;\n color: #0984e3;\n font-weight: 700;\n transition: background 0.2s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.ea2z-hlc-qty-btn:hover {\n background: rgba(9, 132, 227, 0.08);\n}\n\n.ea2z-hlc-qty-wrap input {\n border: none;\n border-left: 2px solid #edf2f7;\n border-right: 2px solid #edf2f7;\n border-radius: 0;\n text-align: center;\n width: 100%;\n min-width: 0;\n padding: 10px 4px;\n background: transparent;\n font-weight: 600;\n}\n\n.ea2z-hlc-qty-wrap input:focus {\n box-shadow: none;\n}\n\n\/* Watts editable highlight *\/\n.ea2z-hlc-watts-input {\n position: relative;\n}\n\n.ea2z-hlc-watts-input input {\n padding-right: 30px;\n font-weight: 600;\n color: #e17055;\n}\n\n.ea2z-hlc-watts-suffix {\n position: absolute;\n right: 12px;\n bottom: 12px;\n font-size: 12px;\n color: #b2bec3;\n font-weight: 600;\n pointer-events: none;\n}\n\n.ea2z-hlc-watts-hint {\n font-size: 9px;\n color: #b2bec3;\n margin-top: 2px;\n font-style: italic;\n}\n\n\/* Add Button *\/\n.ea2z-hlc-add-wrap {\n text-align: center;\n margin-bottom: 28px;\n}\n\n.ea2z-hlc-add-btn {\n background: linear-gradient(135deg, #0984e3, #6c5ce7);\n color: #ffffff;\n border: none;\n padding: 14px 32px;\n border-radius: 12px;\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n transition: transform 0.2s, box-shadow 0.2s;\n font-family: inherit;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n box-shadow: 0 4px 16px rgba(9, 132, 227, 0.3);\n}\n\n.ea2z-hlc-add-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 24px rgba(9, 132, 227, 0.4);\n}\n\n.ea2z-hlc-add-btn:active {\n transform: translateY(0);\n}\n\n\/* Breakdown *\/\n.ea2z-hlc-breakdown {\n background: #ffffff;\n border-radius: 14px;\n padding: 24px;\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);\n border: 1px solid #f0f0f0;\n margin-bottom: 24px;\n}\n\n.ea2z-hlc-breakdown-title {\n font-size: 18px;\n font-weight: 700;\n margin-bottom: 16px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.ea2z-hlc-breakdown-table {\n width: 100%;\n border-collapse: collapse;\n}\n\n.ea2z-hlc-breakdown-table thead th {\n background: #f8f9fa;\n padding: 10px 14px;\n text-align: left;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.8px;\n color: #636e72;\n font-weight: 700;\n border-bottom: 2px solid #edf2f7;\n}\n\n.ea2z-hlc-breakdown-table thead th:last-child {\n text-align: right;\n}\n\n.ea2z-hlc-breakdown-table tbody td {\n padding: 12px 14px;\n font-size: 14px;\n border-bottom: 1px solid #f0f0f0;\n color: #2d3436;\n}\n\n.ea2z-hlc-breakdown-table tbody td:last-child {\n text-align: right;\n font-weight: 700;\n color: #0984e3;\n}\n\n.ea2z-hlc-breakdown-table tbody tr:last-child td {\n border-bottom: none;\n}\n\n\/* Bar *\/\n.ea2z-hlc-bar-wrap {\n width: 100%;\n background: #edf2f7;\n border-radius: 6px;\n height: 8px;\n overflow: hidden;\n margin-top: 4px;\n}\n\n.ea2z-hlc-bar {\n height: 100%;\n border-radius: 6px;\n background: linear-gradient(90deg, #0984e3, #6c5ce7);\n transition: width 0.4s ease;\n min-width: 2px;\n}\n\n\/* Empty State *\/\n.ea2z-hlc-empty {\n text-align: center;\n padding: 40px 20px;\n color: #b2bec3;\n}\n\n.ea2z-hlc-empty-icon {\n font-size: 48px;\n margin-bottom: 12px;\n}\n\n.ea2z-hlc-empty p {\n font-size: 15px;\n}\n\n\/* Footer *\/\n.ea2z-hlc-footer {\n text-align: center;\n padding: 16px;\n font-size: 13px;\n color: #b2bec3;\n}\n\n.ea2z-hlc-footer a {\n color: #0984e3;\n text-decoration: none;\n font-weight: 600;\n}\n\n\/* Info tooltip *\/\n.ea2z-hlc-info-row {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n\/* Reset Button *\/\n.ea2z-hlc-reset-btn {\n background: none;\n border: 2px solid #e17055;\n color: #e17055;\n padding: 10px 24px;\n border-radius: 10px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n font-family: inherit;\n margin-left: 10px;\n}\n\n.ea2z-hlc-reset-btn:hover {\n background: #e17055;\n color: #fff;\n}\n\n\/* ===== RESPONSIVE ===== *\/\n@media (max-width: 900px) {\n .ea2z-hlc-summary {\n grid-template-columns: repeat(2, 1fr);\n }\n .ea2z-hlc-card-grid {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n@media (max-width: 640px) {\n .ea2z-hlc-wrap {\n padding: 0 10px;\n }\n .ea2z-hlc-header {\n padding: 24px 18px;\n border-radius: 12px;\n }\n .ea2z-hlc-header h1 {\n font-size: 22px;\n }\n .ea2z-hlc-header p {\n font-size: 13px;\n }\n .ea2z-hlc-summary {\n grid-template-columns: repeat(2, 1fr);\n gap: 10px;\n }\n .ea2z-hlc-summary-card {\n padding: 16px 12px;\n }\n .ea2z-hlc-summary-value {\n font-size: 18px;\n }\n .ea2z-hlc-card {\n padding: 16px;\n }\n .ea2z-hlc-card-grid {\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n }\n .ea2z-hlc-card-grid .ea2z-hlc-field:first-child {\n grid-column: 1 \/ -1;\n }\n .ea2z-hlc-breakdown {\n padding: 16px;\n overflow-x: auto;\n }\n .ea2z-hlc-breakdown-table {\n min-width: 400px;\n }\n .ea2z-hlc-add-btn {\n width: 100%;\n justify-content: center;\n padding: 14px 20px;\n }\n .ea2z-hlc-reset-btn {\n margin-left: 0;\n margin-top: 8px;\n width: 100%;\n }\n .ea2z-hlc-btn-group {\n flex-direction: column;\n }\n}\n\n@media (max-width: 400px) {\n .ea2z-hlc-summary {\n grid-template-columns: 1fr;\n }\n .ea2z-hlc-card-grid {\n grid-template-columns: 1fr;\n }\n .ea2z-hlc-card-grid .ea2z-hlc-field:first-child {\n grid-column: 1;\n }\n}\n\n\/* Button group *\/\n.ea2z-hlc-btn-group {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n flex-wrap: wrap;\n}\n<\/style>\n<\/head>\n<body>\n\n<div class=\"ea2z-hlc-wrap\" id=\"ea2z-hlc-root\">\n\n \n <div class=\"ea2z-hlc-header\">\n <div class=\"ea2z-hlc-header-icon\">\u26a1<\/div>\n <h1>Home Load Calculator<\/h1>\n <p>Calculate your total electrical load, inverter, battery & solar panel requirements<\/p>\n <\/div>\n\n \n <div class=\"ea2z-hlc-summary\" id=\"ea2z-hlc-summary\">\n <div class=\"ea2z-hlc-summary-card\">\n <div class=\"ea2z-hlc-summary-icon\">\ud83d\udd0c<\/div>\n <div class=\"ea2z-hlc-summary-label\">Total Load<\/div>\n <div class=\"ea2z-hlc-summary-value\" id=\"ea2z-total-load\">0<\/div>\n <div class=\"ea2z-hlc-summary-unit\">Watts<\/div>\n <\/div>\n <div class=\"ea2z-hlc-summary-card\">\n <div class=\"ea2z-hlc-summary-icon\">\ud83d\udd0b<\/div>\n <div class=\"ea2z-hlc-summary-label\">Inverter Size<\/div>\n <div class=\"ea2z-hlc-summary-value\" id=\"ea2z-inverter-size\">0<\/div>\n <div class=\"ea2z-hlc-summary-unit\">VA<\/div>\n <\/div>\n <div class=\"ea2z-hlc-summary-card\">\n <div class=\"ea2z-hlc-summary-icon\">\ud83e\udeab<\/div>\n <div class=\"ea2z-hlc-summary-label\">Battery Capacity<\/div>\n <div class=\"ea2z-hlc-summary-value\" id=\"ea2z-battery-cap\">0<\/div>\n <div class=\"ea2z-hlc-summary-unit\">Ah (12V)<\/div>\n <\/div>\n <div class=\"ea2z-hlc-summary-card\">\n <div class=\"ea2z-hlc-summary-icon\">\u2600\ufe0f<\/div>\n <div class=\"ea2z-hlc-summary-label\">Solar Panel<\/div>\n <div class=\"ea2z-hlc-summary-value\" id=\"ea2z-solar-size\">0<\/div>\n <div class=\"ea2z-hlc-summary-unit\">Watts<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"ea2z-hlc-section-title\">\n <span>\ud83c\udfe0<\/span> Your Appliances\n <\/div>\n\n \n <div class=\"ea2z-hlc-cards\" id=\"ea2z-hlc-cards\">\n \n <\/div>\n\n \n <div class=\"ea2z-hlc-add-wrap\">\n <div class=\"ea2z-hlc-btn-group\">\n <button class=\"ea2z-hlc-add-btn\" id=\"ea2z-add-btn\" type=\"button\">\u2795 Add Appliance<\/button>\n <button class=\"ea2z-hlc-reset-btn\" id=\"ea2z-reset-btn\" type=\"button\">\ud83d\udd04 Reset All<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"ea2z-hlc-breakdown\" id=\"ea2z-hlc-breakdown\">\n <div class=\"ea2z-hlc-breakdown-title\"><span>\ud83d\udcca<\/span> Load Breakdown<\/div>\n <div id=\"ea2z-breakdown-content\">\n <div class=\"ea2z-hlc-empty\">\n <div class=\"ea2z-hlc-empty-icon\">\ud83d\udccb<\/div>\n <p>Add appliances above to see the load breakdown<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"ea2z-hlc-footer\">\n Developed by <a href=\"https:\/\/www.engineeringa2z.com\" target=\"_blank\" rel=\"noopener\">EngineeringA2Z.com<\/a>\n <\/div>\n\n<\/div>\n\n<script>\n(function() {\n 'use strict';\n\n \/* ===== Appliance Database ===== *\/\n var APPLIANCES = [\n { name: 'LED Bulb', watts: 12 },\n { name: 'CFL Bulb', watts: 25 },\n { name: 'Tube Light', watts: 40 },\n { name: 'Ceiling Fan', watts: 70 },\n { name: 'Table Fan', watts: 50 },\n { name: 'Exhaust Fan', watts: 40 },\n { name: 'TV (LED)', watts: 80 },\n { name: 'TV (LCD)', watts: 120 },\n { name: 'Refrigerator', watts: 250 },\n { name: 'Washing Machine', watts: 500 },\n { name: 'Air Cooler', watts: 200 },\n { name: 'Air Conditioner (1 Ton)', watts: 1200 },\n { name: 'Air Conditioner (1.5 Ton)', watts: 1800 },\n { name: 'Air Conditioner (2 Ton)', watts: 2400 },\n { name: 'Water Heater (Geyser)', watts: 2000 },\n { name: 'Iron', watts: 1000 },\n { name: 'Hair Dryer', watts: 1200 },\n { name: 'Microwave Oven', watts: 1200 },\n { name: 'Electric Kettle', watts: 1500 },\n { name: 'Toaster', watts: 800 },\n { name: 'Mixer Grinder', watts: 750 },\n { name: 'Induction Cooktop', watts: 2000 },\n { name: 'Water Pump (0.5 HP)', watts: 400 },\n { name: 'Water Pump (1 HP)', watts: 750 },\n { name: 'Computer \/ Desktop', watts: 200 },\n { name: 'Laptop', watts: 65 },\n { name: 'Laptop Charger', watts: 65 },\n { name: 'WiFi Router', watts: 15 },\n { name: 'Phone Charger', watts: 10 },\n { name: 'CCTV Camera', watts: 15 },\n { name: 'Set Top Box', watts: 25 },\n { name: 'Printer', watts: 50 },\n { name: 'Sewing Machine', watts: 100 },\n { name: 'Vacuum Cleaner', watts: 800 },\n { name: 'Dishwasher', watts: 1800 },\n { name: 'Room Heater', watts: 2000 },\n { name: 'Other \/ Custom', watts: 100 }\n ];\n\n var USAGE_TYPES = [\n { label: 'Regular', factor: 1.0 },\n { label: 'Heavy', factor: 1.2 },\n { label: 'Light', factor: 0.7 },\n { label: 'Standby', factor: 0.3 }\n ];\n\n var cardCounter = 0;\n var container = document.getElementById('ea2z-hlc-cards');\n var addBtn = document.getElementById('ea2z-add-btn');\n var resetBtn = document.getElementById('ea2z-reset-btn');\n\n \/* ===== Build Appliance Dropdown Options ===== *\/\n function buildApplianceOptions(selectedIdx) {\n var html = '';\n for (var i = 0; i < APPLIANCES.length; i++) {\n var sel = (i === selectedIdx) ? ' selected' : '';\n html += '<option value=\"' + i + '\"' + sel + '>' + APPLIANCES[i].name + ' (' + APPLIANCES[i].watts + 'W)<\/option>';\n }\n return html;\n }\n\n \/* ===== Build Usage Type Options ===== *\/\n function buildUsageOptions() {\n var html = '';\n for (var i = 0; i < USAGE_TYPES.length; i++) {\n html += '<option value=\"' + i + '\">' + USAGE_TYPES[i].label + '<\/option>';\n }\n return html;\n }\n\n \/* ===== Create Appliance Card ===== *\/\n function createCard(applianceIdx) {\n cardCounter++;\n var id = 'ea2z-card-' + cardCounter;\n var a = APPLIANCES[applianceIdx || 0];\n\n var card = document.createElement('div');\n card.className = 'ea2z-hlc-card';\n card.id = id;\n card.setAttribute('data-card-id', cardCounter);\n\n card.innerHTML =\n '<div class=\"ea2z-hlc-card-header\">' +\n '<div class=\"ea2z-hlc-info-row\">' +\n '<div class=\"ea2z-hlc-card-num\">' + cardCounter + '<\/div>' +\n '<div class=\"ea2z-hlc-card-load\" data-role=\"card-load\">0 W<\/div>' +\n '<\/div>' +\n '<button class=\"ea2z-hlc-remove-btn\" data-role=\"remove\" type=\"button\" title=\"Remove appliance\">\u2715<\/button>' +\n '<\/div>' +\n '<div class=\"ea2z-hlc-card-grid\">' +\n '<div class=\"ea2z-hlc-field\">' +\n '<label>Appliance<\/label>' +\n '<select data-role=\"appliance\">' + buildApplianceOptions(applianceIdx || 0) + '<\/select>' +\n '<\/div>' +\n '<div class=\"ea2z-hlc-field\">' +\n '<label>Quantity<\/label>' +\n '<div class=\"ea2z-hlc-qty-wrap\">' +\n '<button class=\"ea2z-hlc-qty-btn\" data-role=\"qty-minus\" type=\"button\">\u2212<\/button>' +\n '<input type=\"number\" data-role=\"quantity\" value=\"1\" min=\"1\" max=\"50\">' +\n '<button class=\"ea2z-hlc-qty-btn\" data-role=\"qty-plus\" type=\"button\">+<\/button>' +\n '<\/div>' +\n '<\/div>' +\n '<div class=\"ea2z-hlc-field\">' +\n '<label>Power (Watts)<\/label>' +\n '<div class=\"ea2z-hlc-watts-input\">' +\n '<input type=\"number\" data-role=\"watts\" value=\"' + a.watts + '\" min=\"1\" max=\"50000\" step=\"1\">' +\n '<span class=\"ea2z-hlc-watts-suffix\">W<\/span>' +\n '<\/div>' +\n '<div class=\"ea2z-hlc-watts-hint\">\u270f\ufe0f Editable<\/div>' +\n '<\/div>' +\n '<div class=\"ea2z-hlc-field\">' +\n '<label>Hours \/ Day<\/label>' +\n '<input type=\"number\" data-role=\"hours\" value=\"8\" min=\"0.5\" max=\"24\" step=\"0.5\">' +\n '<\/div>' +\n '<div class=\"ea2z-hlc-field\">' +\n '<label>Usage Type<\/label>' +\n '<select data-role=\"usage\">' + buildUsageOptions() + '<\/select>' +\n '<\/div>' +\n '<\/div>';\n\n container.appendChild(card);\n\n \/\/ Event: Appliance change\n var appSelect = card.querySelector('[data-role=\"appliance\"]');\n appSelect.addEventListener('change', function() {\n var idx = parseInt(this.value, 10);\n var wattsInput = card.querySelector('[data-role=\"watts\"]');\n wattsInput.value = APPLIANCES[idx].watts;\n recalculate();\n });\n\n \/\/ Event: Quantity +\/-\n card.querySelector('[data-role=\"qty-minus\"]').addEventListener('click', function() {\n var inp = card.querySelector('[data-role=\"quantity\"]');\n var v = parseInt(inp.value, 10) || 1;\n if (v > 1) { inp.value = v - 1; recalculate(); }\n });\n\n card.querySelector('[data-role=\"qty-plus\"]').addEventListener('click', function() {\n var inp = card.querySelector('[data-role=\"quantity\"]');\n var v = parseInt(inp.value, 10) || 1;\n if (v < 50) { inp.value = v + 1; recalculate(); }\n });\n\n \/\/ Event: Remove\n card.querySelector('[data-role=\"remove\"]').addEventListener('click', function() {\n card.remove();\n renumberCards();\n recalculate();\n });\n\n \/\/ Event: Any input change\n var inputs = card.querySelectorAll('input, select');\n for (var i = 0; i < inputs.length; i++) {\n inputs[i].addEventListener('input', recalculate);\n inputs[i].addEventListener('change', recalculate);\n }\n\n recalculate();\n return card;\n }\n\n \/* ===== Renumber Cards ===== *\/\n function renumberCards() {\n var cards = container.querySelectorAll('.ea2z-hlc-card');\n for (var i = 0; i < cards.length; i++) {\n var numEl = cards[i].querySelector('.ea2z-hlc-card-num');\n if (numEl) numEl.textContent = (i + 1);\n }\n }\n\n \/* ===== Recalculate Everything ===== *\/\n function recalculate() {\n var cards = container.querySelectorAll('.ea2z-hlc-card');\n var totalWatts = 0;\n var totalWh = 0;\n var breakdownData = [];\n\n for (var i = 0; i < cards.length; i++) {\n var c = cards[i];\n var appIdx = parseInt(c.querySelector('[data-role=\"appliance\"]').value, 10);\n var qty = parseInt(c.querySelector('[data-role=\"quantity\"]').value, 10) || 1;\n var watts = parseFloat(c.querySelector('[data-role=\"watts\"]').value) || 0;\n var hours = parseFloat(c.querySelector('[data-role=\"hours\"]').value) || 0;\n var usageIdx = parseInt(c.querySelector('[data-role=\"usage\"]').value, 10);\n var factor = USAGE_TYPES[usageIdx] ? USAGE_TYPES[usageIdx].factor : 1;\n\n var cardLoad = watts * qty * factor;\n var cardWh = cardLoad * hours;\n\n totalWatts += cardLoad;\n totalWh += cardWh;\n\n \/\/ Update card load display\n var loadEl = c.querySelector('[data-role=\"card-load\"]');\n if (loadEl) loadEl.textContent = Math.round(cardLoad) + ' W';\n\n breakdownData.push({\n name: APPLIANCES[appIdx] ? APPLIANCES[appIdx].name : 'Custom',\n qty: qty,\n watts: watts,\n hours: hours,\n usage: USAGE_TYPES[usageIdx] ? USAGE_TYPES[usageIdx].label : 'Regular',\n load: Math.round(cardLoad),\n wh: Math.round(cardWh)\n });\n }\n\n totalWatts = Math.round(totalWatts);\n totalWh = Math.round(totalWh);\n\n \/\/ Inverter: 1.25x safety factor, rounded to nearest 100\n var inverterVA = Math.ceil((totalWatts * 1.25) \/ 100) * 100;\n\n \/\/ Battery: (totalWh \/ battery voltage \/ DoD \/ inverter efficiency)\n \/\/ Assuming 12V battery, 50% DoD, 85% inverter efficiency\n var batteryAh = totalWh > 0 ? Math.ceil(totalWh \/ (12 * 0.5 * 0.85)) : 0;\n\n \/\/ Round battery to standard sizes\n batteryAh = roundToStandardBattery(batteryAh);\n\n \/\/ Solar: totalWh \/ peak sun hours (5h avg) \/ system losses (0.75)\n var solarWatts = totalWh > 0 ? Math.ceil(totalWh \/ (5 * 0.75)) : 0;\n solarWatts = Math.ceil(solarWatts \/ 50) * 50; \/\/ Round to nearest 50W\n\n \/\/ Update summary\n document.getElementById('ea2z-total-load').textContent = formatNumber(totalWatts);\n document.getElementById('ea2z-inverter-size').textContent = formatNumber(inverterVA);\n document.getElementById('ea2z-battery-cap').textContent = formatNumber(batteryAh);\n document.getElementById('ea2z-solar-size').textContent = formatNumber(solarWatts);\n\n \/\/ Update breakdown\n updateBreakdown(breakdownData, totalWatts);\n }\n\n \/* ===== Round to Standard Battery ===== *\/\n function roundToStandardBattery(ah) {\n if (ah <= 0) return 0;\n var standards = [20, 40, 60, 80, 100, 120, 150, 180, 200, 220, 250, 300, 350, 400, 500, 600];\n for (var i = 0; i < standards.length; i++) {\n if (ah <= standards[i]) return standards[i];\n }\n return Math.ceil(ah \/ 100) * 100;\n }\n\n \/* ===== Format Number ===== *\/\n function formatNumber(n) {\n return n.toLocaleString('en-IN');\n }\n\n \/* ===== Update Breakdown Table ===== *\/\n function updateBreakdown(data, totalWatts) {\n var contentEl = document.getElementById('ea2z-breakdown-content');\n\n if (data.length === 0) {\n contentEl.innerHTML =\n '<div class=\"ea2z-hlc-empty\">' +\n '<div class=\"ea2z-hlc-empty-icon\">\ud83d\udccb<\/div>' +\n '<p>Add appliances above to see the load breakdown<\/p>' +\n '<\/div>';\n return;\n }\n\n var html =\n '<table class=\"ea2z-hlc-breakdown-table\">' +\n '<thead><tr>' +\n '<th>Appliance<\/th>' +\n '<th>Qty<\/th>' +\n '<th>Watts<\/th>' +\n '<th>Hours<\/th>' +\n '<th>Usage<\/th>' +\n '<th>Load (W)<\/th>' +\n '<\/tr><\/thead><tbody>';\n\n for (var i = 0; i < data.length; i++) {\n var d = data[i];\n var pct = totalWatts > 0 ? Math.round((d.load \/ totalWatts) * 100) : 0;\n html +=\n '<tr>' +\n '<td>' + escapeHtml(d.name) +\n '<div class=\"ea2z-hlc-bar-wrap\"><div class=\"ea2z-hlc-bar\" style=\"width:' + pct + '%\"><\/div><\/div>' +\n '<\/td>' +\n '<td>' + d.qty + '<\/td>' +\n '<td>' + d.watts + 'W<\/td>' +\n '<td>' + d.hours + 'h<\/td>' +\n '<td>' + d.usage + '<\/td>' +\n '<td>' + formatNumber(d.load) + ' W (' + pct + '%)<\/td>' +\n '<\/tr>';\n }\n\n html +=\n '<tr style=\"background:#f8f9fa;font-weight:700\">' +\n '<td colspan=\"5\">Total Load<\/td>' +\n '<td style=\"text-align:right;color:#0984e3\">' + formatNumber(totalWatts) + ' W<\/td>' +\n '<\/tr>';\n\n html += '<\/tbody><\/table>';\n contentEl.innerHTML = html;\n }\n\n \/* ===== Escape HTML ===== *\/\n function escapeHtml(str) {\n var div = document.createElement('div');\n div.appendChild(document.createTextNode(str));\n return div.innerHTML;\n }\n\n \/* ===== Event: Add Appliance ===== *\/\n addBtn.addEventListener('click', function() {\n createCard(0);\n \/\/ Scroll to new card\n var cards = container.querySelectorAll('.ea2z-hlc-card');\n var lastCard = cards[cards.length - 1];\n if (lastCard) {\n lastCard.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n });\n\n \/* ===== Event: Reset All ===== *\/\n resetBtn.addEventListener('click', function() {\n if (container.querySelectorAll('.ea2z-hlc-card').length === 0) return;\n var confirmReset = confirm('Remove all appliances and reset the calculator?');\n if (confirmReset) {\n container.innerHTML = '';\n cardCounter = 0;\n recalculate();\n }\n });\n\n \/* ===== Initialize with Default Appliances ===== *\/\n function init() {\n \/\/ Add some default appliances\n var defaults = [\n { idx: 0, qty: 5, hours: 8 }, \/\/ LED Bulb\n { idx: 3, qty: 3, hours: 10 }, \/\/ Ceiling Fan\n { idx: 6, qty: 1, hours: 5 }, \/\/ TV LED\n { idx: 8, qty: 1, hours: 24 } \/\/ Refrigerator\n ];\n\n for (var i = 0; i < defaults.length; i++) {\n var d = defaults[i];\n var card = createCard(d.idx);\n card.querySelector('[data-role=\"quantity\"]').value = d.qty;\n card.querySelector('[data-role=\"hours\"]').value = d.hours;\n }\n\n recalculate();\n }\n\n init();\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\n```\n","protected":false},"excerpt":{"rendered":"<p>\u201c`html Home Load Calculator \u26a1 Home Load Calculator Calculate your total electrical load, inverter, battery & solar panel requirements \ud83d\udd0c Total Load 0 Watts \ud83d\udd0b Inverter Size 0 VA \ud83e\udeab Battery Capacity 0 Ah (12V) \u2600\ufe0f Solar Panel 0 Watts \ud83c\udfe0 Your Appliances \u2795 Add Appliance \ud83d\udd04 Reset All \ud83d\udcca Load Breakdown \ud83d\udccb Add appliances […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-905","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>EduGuide Chatbot - HB Tech Hindi<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hbtech.co.in\/hi\/eduguide-chatbot\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"EduGuide Chatbot - HB Tech Hindi\" \/>\n<meta property=\"og:description\" content=\"\u201c`html Home Load Calculator \u26a1 Home Load Calculator Calculate your total electrical load, inverter, battery & solar panel requirements \ud83d\udd0c Total Load 0 Watts \ud83d\udd0b Inverter Size 0 VA \ud83e\udeab Battery Capacity 0 Ah (12V) \u2600\ufe0f Solar Panel 0 Watts \ud83c\udfe0 Your Appliances \u2795 Add Appliance \ud83d\udd04 Reset All \ud83d\udcca Load Breakdown \ud83d\udccb Add appliances […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hbtech.co.in\/hi\/eduguide-chatbot\/\" \/>\n<meta property=\"og:site_name\" content=\"HB Tech Hindi\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-31T13:48:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hbtech.co.in\/hi\/wp-content\/uploads\/2025\/03\/HB-Tech-Logo-512-x-512-px.png\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/eduguide-chatbot\\\/\",\"url\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/eduguide-chatbot\\\/\",\"name\":\"EduGuide Chatbot - HB Tech Hindi\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/#website\"},\"datePublished\":\"2025-10-09T13:22:55+00:00\",\"dateModified\":\"2026-05-31T13:48:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/eduguide-chatbot\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/eduguide-chatbot\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/eduguide-chatbot\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"EduGuide Chatbot\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/#website\",\"url\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/\",\"name\":\"HB Tech\",\"description\":\"HB Tech: The Power Behind Progress\",\"publisher\":{\"@id\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/#organization\",\"name\":\"HB Tech Hindi\",\"url\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/HB-Tech-Logo-512-x-512-px.png\",\"contentUrl\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/HB-Tech-Logo-512-x-512-px.png\",\"width\":512,\"height\":512,\"caption\":\"HB Tech Hindi\"},\"image\":{\"@id\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"EduGuide Chatbot - HB Tech Hindi","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hbtech.co.in\/hi\/eduguide-chatbot\/","og_locale":"en_US","og_type":"article","og_title":"EduGuide Chatbot - HB Tech Hindi","og_description":"\u201c`html Home Load Calculator \u26a1 Home Load Calculator Calculate your total electrical load, inverter, battery & solar panel requirements \ud83d\udd0c Total Load 0 Watts \ud83d\udd0b Inverter Size 0 VA \ud83e\udeab Battery Capacity 0 Ah (12V) \u2600\ufe0f Solar Panel 0 Watts \ud83c\udfe0 Your Appliances \u2795 Add Appliance \ud83d\udd04 Reset All \ud83d\udcca Load Breakdown \ud83d\udccb Add appliances […]","og_url":"https:\/\/hbtech.co.in\/hi\/eduguide-chatbot\/","og_site_name":"HB Tech Hindi","article_modified_time":"2026-05-31T13:48:45+00:00","og_image":[{"width":512,"height":512,"url":"https:\/\/hbtech.co.in\/hi\/wp-content\/uploads\/2025\/03\/HB-Tech-Logo-512-x-512-px.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hbtech.co.in\/hi\/eduguide-chatbot\/","url":"https:\/\/hbtech.co.in\/hi\/eduguide-chatbot\/","name":"EduGuide Chatbot - HB Tech Hindi","isPartOf":{"@id":"https:\/\/hbtech.co.in\/hi\/#website"},"datePublished":"2025-10-09T13:22:55+00:00","dateModified":"2026-05-31T13:48:45+00:00","breadcrumb":{"@id":"https:\/\/hbtech.co.in\/hi\/eduguide-chatbot\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hbtech.co.in\/hi\/eduguide-chatbot\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/hbtech.co.in\/hi\/eduguide-chatbot\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hbtech.co.in\/hi\/"},{"@type":"ListItem","position":2,"name":"EduGuide Chatbot"}]},{"@type":"WebSite","@id":"https:\/\/hbtech.co.in\/hi\/#website","url":"https:\/\/hbtech.co.in\/hi\/","name":"HB Tech","description":"HB Tech: The Power Behind Progress","publisher":{"@id":"https:\/\/hbtech.co.in\/hi\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hbtech.co.in\/hi\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hbtech.co.in\/hi\/#organization","name":"HB Tech Hindi","url":"https:\/\/hbtech.co.in\/hi\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hbtech.co.in\/hi\/#\/schema\/logo\/image\/","url":"https:\/\/hbtech.co.in\/hi\/wp-content\/uploads\/2025\/03\/HB-Tech-Logo-512-x-512-px.png","contentUrl":"https:\/\/hbtech.co.in\/hi\/wp-content\/uploads\/2025\/03\/HB-Tech-Logo-512-x-512-px.png","width":512,"height":512,"caption":"HB Tech Hindi"},"image":{"@id":"https:\/\/hbtech.co.in\/hi\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/hbtech.co.in\/hi\/wp-json\/wp\/v2\/pages\/905","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hbtech.co.in\/hi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hbtech.co.in\/hi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hbtech.co.in\/hi\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hbtech.co.in\/hi\/wp-json\/wp\/v2\/comments?post=905"}],"version-history":[{"count":4,"href":"https:\/\/hbtech.co.in\/hi\/wp-json\/wp\/v2\/pages\/905\/revisions"}],"predecessor-version":[{"id":1076,"href":"https:\/\/hbtech.co.in\/hi\/wp-json\/wp\/v2\/pages\/905\/revisions\/1076"}],"wp:attachment":[{"href":"https:\/\/hbtech.co.in\/hi\/wp-json\/wp\/v2\/media?parent=905"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":905,"date":"2025-10-09T18:52:55","date_gmt":"2025-10-09T13:22:55","guid":{"rendered":"https:\/\/hbtech.co.in\/hi\/?page_id=905"},"modified":"2026-05-31T19:18:45","modified_gmt":"2026-05-31T13:48:45","slug":"eduguide-chatbot","status":"publish","type":"page","link":"https:\/\/hbtech.co.in\/hi\/eduguide-chatbot\/","title":{"rendered":"EduGuide Chatbot"},"content":{"rendered":"\n\n\n\u201c`html\n\n\n\n\n\nHome Load Calculator<\/title>\n<style>\n\/* ===== EA2Z Home Load Calculator - Scoped CSS ===== *\/\n.ea2z-hlc-wrap * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\n.ea2z-hlc-wrap {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n max-width: 960px;\n margin: 20px auto;\n padding: 0 15px;\n color: #2d3436;\n line-height: 1.6;\n}\n\n\/* Header *\/\n.ea2z-hlc-header {\n background: linear-gradient(135deg, #0984e3 0%, #6c5ce7 50%, #a855f7 100%);\n border-radius: 16px;\n padding: 32px 28px;\n text-align: center;\n margin-bottom: 24px;\n position: relative;\n overflow: hidden;\n box-shadow: 0 8px 32px rgba(9, 132, 227, 0.3);\n}\n\n.ea2z-hlc-header::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);\n animation: ea2z-pulse 6s ease-in-out infinite;\n}\n\n@keyframes ea2z-pulse {\n 0%, 100% { transform: scale(1); opacity: 0.5; }\n 50% { transform: scale(1.1); opacity: 1; }\n}\n\n.ea2z-hlc-header-icon {\n font-size: 48px;\n margin-bottom: 8px;\n position: relative;\n z-index: 1;\n}\n\n.ea2z-hlc-header h1 {\n color: #ffffff;\n font-size: 28px;\n font-weight: 700;\n margin-bottom: 6px;\n position: relative;\n z-index: 1;\n letter-spacing: -0.5px;\n}\n\n.ea2z-hlc-header p {\n color: rgba(255, 255, 255, 0.9);\n font-size: 15px;\n position: relative;\n z-index: 1;\n font-weight: 400;\n}\n\n\/* Summary Cards *\/\n.ea2z-hlc-summary {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 14px;\n margin-bottom: 24px;\n}\n\n.ea2z-hlc-summary-card {\n background: #ffffff;\n border-radius: 14px;\n padding: 20px 16px;\n text-align: center;\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);\n border: 1px solid #f0f0f0;\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n position: relative;\n overflow: hidden;\n}\n\n.ea2z-hlc-summary-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n}\n\n.ea2z-hlc-summary-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n}\n\n.ea2z-hlc-summary-card:nth-child(1)::before { background: linear-gradient(90deg, #0984e3, #74b9ff); }\n.ea2z-hlc-summary-card:nth-child(2)::before { background: linear-gradient(90deg, #00b894, #55efc4); }\n.ea2z-hlc-summary-card:nth-child(3)::before { background: linear-gradient(90deg, #e17055, #fab1a0); }\n.ea2z-hlc-summary-card:nth-child(4)::before { background: linear-gradient(90deg, #6c5ce7, #a29bfe); }\n\n.ea2z-hlc-summary-icon {\n font-size: 28px;\n margin-bottom: 8px;\n}\n\n.ea2z-hlc-summary-label {\n font-size: 12px;\n color: #636e72;\n text-transform: uppercase;\n letter-spacing: 0.8px;\n font-weight: 600;\n margin-bottom: 4px;\n}\n\n.ea2z-hlc-summary-value {\n font-size: 22px;\n font-weight: 700;\n color: #2d3436;\n line-height: 1.2;\n}\n\n.ea2z-hlc-summary-unit {\n font-size: 12px;\n color: #b2bec3;\n font-weight: 500;\n margin-top: 2px;\n}\n\n\/* Appliance Section *\/\n.ea2z-hlc-section-title {\n font-size: 20px;\n font-weight: 700;\n color: #2d3436;\n margin-bottom: 16px;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.ea2z-hlc-section-title span {\n font-size: 24px;\n}\n\n\/* Appliance Cards *\/\n.ea2z-hlc-cards {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-bottom: 20px;\n}\n\n.ea2z-hlc-card {\n background: #ffffff;\n border-radius: 14px;\n padding: 20px;\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);\n border: 1px solid #f0f0f0;\n transition: box-shadow 0.2s ease;\n animation: ea2z-fadeIn 0.3s ease;\n}\n\n@keyframes ea2z-fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.ea2z-hlc-card:hover {\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);\n}\n\n.ea2z-hlc-card-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.ea2z-hlc-card-num {\n background: linear-gradient(135deg, #0984e3, #6c5ce7);\n color: #fff;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 13px;\n font-weight: 700;\n}\n\n.ea2z-hlc-card-load {\n font-size: 14px;\n font-weight: 600;\n color: #0984e3;\n background: rgba(9, 132, 227, 0.08);\n padding: 4px 12px;\n border-radius: 20px;\n}\n\n.ea2z-hlc-remove-btn {\n background: none;\n border: none;\n color: #e17055;\n cursor: pointer;\n font-size: 20px;\n padding: 4px 8px;\n border-radius: 8px;\n transition: background 0.2s;\n line-height: 1;\n}\n\n.ea2z-hlc-remove-btn:hover {\n background: rgba(225, 112, 85, 0.1);\n}\n\n.ea2z-hlc-card-grid {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 12px;\n align-items: end;\n}\n\n.ea2z-hlc-field {\n display: flex;\n flex-direction: column;\n}\n\n.ea2z-hlc-field label {\n font-size: 11px;\n color: #636e72;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 6px;\n}\n\n.ea2z-hlc-field select,\n.ea2z-hlc-field input {\n width: 100%;\n padding: 10px 12px;\n border: 2px solid #edf2f7;\n border-radius: 10px;\n font-size: 14px;\n font-family: inherit;\n color: #2d3436;\n background: #fafbfc;\n transition: border-color 0.2s, box-shadow 0.2s;\n outline: none;\n -webkit-appearance: none;\n appearance: none;\n}\n\n.ea2z-hlc-field select {\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23636e72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 12px center;\n padding-right: 32px;\n cursor: pointer;\n}\n\n.ea2z-hlc-field select:focus,\n.ea2z-hlc-field input:focus {\n border-color: #0984e3;\n box-shadow: 0 0 0 3px rgba(9, 132, 227, 0.1);\n background: #fff;\n}\n\n.ea2z-hlc-field input[type=\"number\"] {\n -moz-appearance: textfield;\n}\n\n.ea2z-hlc-field input[type=\"number\"]::-webkit-inner-spin-button,\n.ea2z-hlc-field input[type=\"number\"]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n\/* Quantity Control *\/\n.ea2z-hlc-qty-wrap {\n display: flex;\n align-items: center;\n border: 2px solid #edf2f7;\n border-radius: 10px;\n overflow: hidden;\n background: #fafbfc;\n}\n\n.ea2z-hlc-qty-btn {\n background: none;\n border: none;\n width: 36px;\n height: 40px;\n font-size: 18px;\n cursor: pointer;\n color: #0984e3;\n font-weight: 700;\n transition: background 0.2s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.ea2z-hlc-qty-btn:hover {\n background: rgba(9, 132, 227, 0.08);\n}\n\n.ea2z-hlc-qty-wrap input {\n border: none;\n border-left: 2px solid #edf2f7;\n border-right: 2px solid #edf2f7;\n border-radius: 0;\n text-align: center;\n width: 100%;\n min-width: 0;\n padding: 10px 4px;\n background: transparent;\n font-weight: 600;\n}\n\n.ea2z-hlc-qty-wrap input:focus {\n box-shadow: none;\n}\n\n\/* Watts editable highlight *\/\n.ea2z-hlc-watts-input {\n position: relative;\n}\n\n.ea2z-hlc-watts-input input {\n padding-right: 30px;\n font-weight: 600;\n color: #e17055;\n}\n\n.ea2z-hlc-watts-suffix {\n position: absolute;\n right: 12px;\n bottom: 12px;\n font-size: 12px;\n color: #b2bec3;\n font-weight: 600;\n pointer-events: none;\n}\n\n.ea2z-hlc-watts-hint {\n font-size: 9px;\n color: #b2bec3;\n margin-top: 2px;\n font-style: italic;\n}\n\n\/* Add Button *\/\n.ea2z-hlc-add-wrap {\n text-align: center;\n margin-bottom: 28px;\n}\n\n.ea2z-hlc-add-btn {\n background: linear-gradient(135deg, #0984e3, #6c5ce7);\n color: #ffffff;\n border: none;\n padding: 14px 32px;\n border-radius: 12px;\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n transition: transform 0.2s, box-shadow 0.2s;\n font-family: inherit;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n box-shadow: 0 4px 16px rgba(9, 132, 227, 0.3);\n}\n\n.ea2z-hlc-add-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 24px rgba(9, 132, 227, 0.4);\n}\n\n.ea2z-hlc-add-btn:active {\n transform: translateY(0);\n}\n\n\/* Breakdown *\/\n.ea2z-hlc-breakdown {\n background: #ffffff;\n border-radius: 14px;\n padding: 24px;\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);\n border: 1px solid #f0f0f0;\n margin-bottom: 24px;\n}\n\n.ea2z-hlc-breakdown-title {\n font-size: 18px;\n font-weight: 700;\n margin-bottom: 16px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.ea2z-hlc-breakdown-table {\n width: 100%;\n border-collapse: collapse;\n}\n\n.ea2z-hlc-breakdown-table thead th {\n background: #f8f9fa;\n padding: 10px 14px;\n text-align: left;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.8px;\n color: #636e72;\n font-weight: 700;\n border-bottom: 2px solid #edf2f7;\n}\n\n.ea2z-hlc-breakdown-table thead th:last-child {\n text-align: right;\n}\n\n.ea2z-hlc-breakdown-table tbody td {\n padding: 12px 14px;\n font-size: 14px;\n border-bottom: 1px solid #f0f0f0;\n color: #2d3436;\n}\n\n.ea2z-hlc-breakdown-table tbody td:last-child {\n text-align: right;\n font-weight: 700;\n color: #0984e3;\n}\n\n.ea2z-hlc-breakdown-table tbody tr:last-child td {\n border-bottom: none;\n}\n\n\/* Bar *\/\n.ea2z-hlc-bar-wrap {\n width: 100%;\n background: #edf2f7;\n border-radius: 6px;\n height: 8px;\n overflow: hidden;\n margin-top: 4px;\n}\n\n.ea2z-hlc-bar {\n height: 100%;\n border-radius: 6px;\n background: linear-gradient(90deg, #0984e3, #6c5ce7);\n transition: width 0.4s ease;\n min-width: 2px;\n}\n\n\/* Empty State *\/\n.ea2z-hlc-empty {\n text-align: center;\n padding: 40px 20px;\n color: #b2bec3;\n}\n\n.ea2z-hlc-empty-icon {\n font-size: 48px;\n margin-bottom: 12px;\n}\n\n.ea2z-hlc-empty p {\n font-size: 15px;\n}\n\n\/* Footer *\/\n.ea2z-hlc-footer {\n text-align: center;\n padding: 16px;\n font-size: 13px;\n color: #b2bec3;\n}\n\n.ea2z-hlc-footer a {\n color: #0984e3;\n text-decoration: none;\n font-weight: 600;\n}\n\n\/* Info tooltip *\/\n.ea2z-hlc-info-row {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n\/* Reset Button *\/\n.ea2z-hlc-reset-btn {\n background: none;\n border: 2px solid #e17055;\n color: #e17055;\n padding: 10px 24px;\n border-radius: 10px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n font-family: inherit;\n margin-left: 10px;\n}\n\n.ea2z-hlc-reset-btn:hover {\n background: #e17055;\n color: #fff;\n}\n\n\/* ===== RESPONSIVE ===== *\/\n@media (max-width: 900px) {\n .ea2z-hlc-summary {\n grid-template-columns: repeat(2, 1fr);\n }\n .ea2z-hlc-card-grid {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n@media (max-width: 640px) {\n .ea2z-hlc-wrap {\n padding: 0 10px;\n }\n .ea2z-hlc-header {\n padding: 24px 18px;\n border-radius: 12px;\n }\n .ea2z-hlc-header h1 {\n font-size: 22px;\n }\n .ea2z-hlc-header p {\n font-size: 13px;\n }\n .ea2z-hlc-summary {\n grid-template-columns: repeat(2, 1fr);\n gap: 10px;\n }\n .ea2z-hlc-summary-card {\n padding: 16px 12px;\n }\n .ea2z-hlc-summary-value {\n font-size: 18px;\n }\n .ea2z-hlc-card {\n padding: 16px;\n }\n .ea2z-hlc-card-grid {\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n }\n .ea2z-hlc-card-grid .ea2z-hlc-field:first-child {\n grid-column: 1 \/ -1;\n }\n .ea2z-hlc-breakdown {\n padding: 16px;\n overflow-x: auto;\n }\n .ea2z-hlc-breakdown-table {\n min-width: 400px;\n }\n .ea2z-hlc-add-btn {\n width: 100%;\n justify-content: center;\n padding: 14px 20px;\n }\n .ea2z-hlc-reset-btn {\n margin-left: 0;\n margin-top: 8px;\n width: 100%;\n }\n .ea2z-hlc-btn-group {\n flex-direction: column;\n }\n}\n\n@media (max-width: 400px) {\n .ea2z-hlc-summary {\n grid-template-columns: 1fr;\n }\n .ea2z-hlc-card-grid {\n grid-template-columns: 1fr;\n }\n .ea2z-hlc-card-grid .ea2z-hlc-field:first-child {\n grid-column: 1;\n }\n}\n\n\/* Button group *\/\n.ea2z-hlc-btn-group {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n flex-wrap: wrap;\n}\n<\/style>\n<\/head>\n<body>\n\n<div class=\"ea2z-hlc-wrap\" id=\"ea2z-hlc-root\">\n\n \n <div class=\"ea2z-hlc-header\">\n <div class=\"ea2z-hlc-header-icon\">\u26a1<\/div>\n <h1>Home Load Calculator<\/h1>\n <p>Calculate your total electrical load, inverter, battery & solar panel requirements<\/p>\n <\/div>\n\n \n <div class=\"ea2z-hlc-summary\" id=\"ea2z-hlc-summary\">\n <div class=\"ea2z-hlc-summary-card\">\n <div class=\"ea2z-hlc-summary-icon\">\ud83d\udd0c<\/div>\n <div class=\"ea2z-hlc-summary-label\">Total Load<\/div>\n <div class=\"ea2z-hlc-summary-value\" id=\"ea2z-total-load\">0<\/div>\n <div class=\"ea2z-hlc-summary-unit\">Watts<\/div>\n <\/div>\n <div class=\"ea2z-hlc-summary-card\">\n <div class=\"ea2z-hlc-summary-icon\">\ud83d\udd0b<\/div>\n <div class=\"ea2z-hlc-summary-label\">Inverter Size<\/div>\n <div class=\"ea2z-hlc-summary-value\" id=\"ea2z-inverter-size\">0<\/div>\n <div class=\"ea2z-hlc-summary-unit\">VA<\/div>\n <\/div>\n <div class=\"ea2z-hlc-summary-card\">\n <div class=\"ea2z-hlc-summary-icon\">\ud83e\udeab<\/div>\n <div class=\"ea2z-hlc-summary-label\">Battery Capacity<\/div>\n <div class=\"ea2z-hlc-summary-value\" id=\"ea2z-battery-cap\">0<\/div>\n <div class=\"ea2z-hlc-summary-unit\">Ah (12V)<\/div>\n <\/div>\n <div class=\"ea2z-hlc-summary-card\">\n <div class=\"ea2z-hlc-summary-icon\">\u2600\ufe0f<\/div>\n <div class=\"ea2z-hlc-summary-label\">Solar Panel<\/div>\n <div class=\"ea2z-hlc-summary-value\" id=\"ea2z-solar-size\">0<\/div>\n <div class=\"ea2z-hlc-summary-unit\">Watts<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"ea2z-hlc-section-title\">\n <span>\ud83c\udfe0<\/span> Your Appliances\n <\/div>\n\n \n <div class=\"ea2z-hlc-cards\" id=\"ea2z-hlc-cards\">\n \n <\/div>\n\n \n <div class=\"ea2z-hlc-add-wrap\">\n <div class=\"ea2z-hlc-btn-group\">\n <button class=\"ea2z-hlc-add-btn\" id=\"ea2z-add-btn\" type=\"button\">\u2795 Add Appliance<\/button>\n <button class=\"ea2z-hlc-reset-btn\" id=\"ea2z-reset-btn\" type=\"button\">\ud83d\udd04 Reset All<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"ea2z-hlc-breakdown\" id=\"ea2z-hlc-breakdown\">\n <div class=\"ea2z-hlc-breakdown-title\"><span>\ud83d\udcca<\/span> Load Breakdown<\/div>\n <div id=\"ea2z-breakdown-content\">\n <div class=\"ea2z-hlc-empty\">\n <div class=\"ea2z-hlc-empty-icon\">\ud83d\udccb<\/div>\n <p>Add appliances above to see the load breakdown<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"ea2z-hlc-footer\">\n Developed by <a href=\"https:\/\/www.engineeringa2z.com\" target=\"_blank\" rel=\"noopener\">EngineeringA2Z.com<\/a>\n <\/div>\n\n<\/div>\n\n<script>\n(function() {\n 'use strict';\n\n \/* ===== Appliance Database ===== *\/\n var APPLIANCES = [\n { name: 'LED Bulb', watts: 12 },\n { name: 'CFL Bulb', watts: 25 },\n { name: 'Tube Light', watts: 40 },\n { name: 'Ceiling Fan', watts: 70 },\n { name: 'Table Fan', watts: 50 },\n { name: 'Exhaust Fan', watts: 40 },\n { name: 'TV (LED)', watts: 80 },\n { name: 'TV (LCD)', watts: 120 },\n { name: 'Refrigerator', watts: 250 },\n { name: 'Washing Machine', watts: 500 },\n { name: 'Air Cooler', watts: 200 },\n { name: 'Air Conditioner (1 Ton)', watts: 1200 },\n { name: 'Air Conditioner (1.5 Ton)', watts: 1800 },\n { name: 'Air Conditioner (2 Ton)', watts: 2400 },\n { name: 'Water Heater (Geyser)', watts: 2000 },\n { name: 'Iron', watts: 1000 },\n { name: 'Hair Dryer', watts: 1200 },\n { name: 'Microwave Oven', watts: 1200 },\n { name: 'Electric Kettle', watts: 1500 },\n { name: 'Toaster', watts: 800 },\n { name: 'Mixer Grinder', watts: 750 },\n { name: 'Induction Cooktop', watts: 2000 },\n { name: 'Water Pump (0.5 HP)', watts: 400 },\n { name: 'Water Pump (1 HP)', watts: 750 },\n { name: 'Computer \/ Desktop', watts: 200 },\n { name: 'Laptop', watts: 65 },\n { name: 'Laptop Charger', watts: 65 },\n { name: 'WiFi Router', watts: 15 },\n { name: 'Phone Charger', watts: 10 },\n { name: 'CCTV Camera', watts: 15 },\n { name: 'Set Top Box', watts: 25 },\n { name: 'Printer', watts: 50 },\n { name: 'Sewing Machine', watts: 100 },\n { name: 'Vacuum Cleaner', watts: 800 },\n { name: 'Dishwasher', watts: 1800 },\n { name: 'Room Heater', watts: 2000 },\n { name: 'Other \/ Custom', watts: 100 }\n ];\n\n var USAGE_TYPES = [\n { label: 'Regular', factor: 1.0 },\n { label: 'Heavy', factor: 1.2 },\n { label: 'Light', factor: 0.7 },\n { label: 'Standby', factor: 0.3 }\n ];\n\n var cardCounter = 0;\n var container = document.getElementById('ea2z-hlc-cards');\n var addBtn = document.getElementById('ea2z-add-btn');\n var resetBtn = document.getElementById('ea2z-reset-btn');\n\n \/* ===== Build Appliance Dropdown Options ===== *\/\n function buildApplianceOptions(selectedIdx) {\n var html = '';\n for (var i = 0; i < APPLIANCES.length; i++) {\n var sel = (i === selectedIdx) ? ' selected' : '';\n html += '<option value=\"' + i + '\"' + sel + '>' + APPLIANCES[i].name + ' (' + APPLIANCES[i].watts + 'W)<\/option>';\n }\n return html;\n }\n\n \/* ===== Build Usage Type Options ===== *\/\n function buildUsageOptions() {\n var html = '';\n for (var i = 0; i < USAGE_TYPES.length; i++) {\n html += '<option value=\"' + i + '\">' + USAGE_TYPES[i].label + '<\/option>';\n }\n return html;\n }\n\n \/* ===== Create Appliance Card ===== *\/\n function createCard(applianceIdx) {\n cardCounter++;\n var id = 'ea2z-card-' + cardCounter;\n var a = APPLIANCES[applianceIdx || 0];\n\n var card = document.createElement('div');\n card.className = 'ea2z-hlc-card';\n card.id = id;\n card.setAttribute('data-card-id', cardCounter);\n\n card.innerHTML =\n '<div class=\"ea2z-hlc-card-header\">' +\n '<div class=\"ea2z-hlc-info-row\">' +\n '<div class=\"ea2z-hlc-card-num\">' + cardCounter + '<\/div>' +\n '<div class=\"ea2z-hlc-card-load\" data-role=\"card-load\">0 W<\/div>' +\n '<\/div>' +\n '<button class=\"ea2z-hlc-remove-btn\" data-role=\"remove\" type=\"button\" title=\"Remove appliance\">\u2715<\/button>' +\n '<\/div>' +\n '<div class=\"ea2z-hlc-card-grid\">' +\n '<div class=\"ea2z-hlc-field\">' +\n '<label>Appliance<\/label>' +\n '<select data-role=\"appliance\">' + buildApplianceOptions(applianceIdx || 0) + '<\/select>' +\n '<\/div>' +\n '<div class=\"ea2z-hlc-field\">' +\n '<label>Quantity<\/label>' +\n '<div class=\"ea2z-hlc-qty-wrap\">' +\n '<button class=\"ea2z-hlc-qty-btn\" data-role=\"qty-minus\" type=\"button\">\u2212<\/button>' +\n '<input type=\"number\" data-role=\"quantity\" value=\"1\" min=\"1\" max=\"50\">' +\n '<button class=\"ea2z-hlc-qty-btn\" data-role=\"qty-plus\" type=\"button\">+<\/button>' +\n '<\/div>' +\n '<\/div>' +\n '<div class=\"ea2z-hlc-field\">' +\n '<label>Power (Watts)<\/label>' +\n '<div class=\"ea2z-hlc-watts-input\">' +\n '<input type=\"number\" data-role=\"watts\" value=\"' + a.watts + '\" min=\"1\" max=\"50000\" step=\"1\">' +\n '<span class=\"ea2z-hlc-watts-suffix\">W<\/span>' +\n '<\/div>' +\n '<div class=\"ea2z-hlc-watts-hint\">\u270f\ufe0f Editable<\/div>' +\n '<\/div>' +\n '<div class=\"ea2z-hlc-field\">' +\n '<label>Hours \/ Day<\/label>' +\n '<input type=\"number\" data-role=\"hours\" value=\"8\" min=\"0.5\" max=\"24\" step=\"0.5\">' +\n '<\/div>' +\n '<div class=\"ea2z-hlc-field\">' +\n '<label>Usage Type<\/label>' +\n '<select data-role=\"usage\">' + buildUsageOptions() + '<\/select>' +\n '<\/div>' +\n '<\/div>';\n\n container.appendChild(card);\n\n \/\/ Event: Appliance change\n var appSelect = card.querySelector('[data-role=\"appliance\"]');\n appSelect.addEventListener('change', function() {\n var idx = parseInt(this.value, 10);\n var wattsInput = card.querySelector('[data-role=\"watts\"]');\n wattsInput.value = APPLIANCES[idx].watts;\n recalculate();\n });\n\n \/\/ Event: Quantity +\/-\n card.querySelector('[data-role=\"qty-minus\"]').addEventListener('click', function() {\n var inp = card.querySelector('[data-role=\"quantity\"]');\n var v = parseInt(inp.value, 10) || 1;\n if (v > 1) { inp.value = v - 1; recalculate(); }\n });\n\n card.querySelector('[data-role=\"qty-plus\"]').addEventListener('click', function() {\n var inp = card.querySelector('[data-role=\"quantity\"]');\n var v = parseInt(inp.value, 10) || 1;\n if (v < 50) { inp.value = v + 1; recalculate(); }\n });\n\n \/\/ Event: Remove\n card.querySelector('[data-role=\"remove\"]').addEventListener('click', function() {\n card.remove();\n renumberCards();\n recalculate();\n });\n\n \/\/ Event: Any input change\n var inputs = card.querySelectorAll('input, select');\n for (var i = 0; i < inputs.length; i++) {\n inputs[i].addEventListener('input', recalculate);\n inputs[i].addEventListener('change', recalculate);\n }\n\n recalculate();\n return card;\n }\n\n \/* ===== Renumber Cards ===== *\/\n function renumberCards() {\n var cards = container.querySelectorAll('.ea2z-hlc-card');\n for (var i = 0; i < cards.length; i++) {\n var numEl = cards[i].querySelector('.ea2z-hlc-card-num');\n if (numEl) numEl.textContent = (i + 1);\n }\n }\n\n \/* ===== Recalculate Everything ===== *\/\n function recalculate() {\n var cards = container.querySelectorAll('.ea2z-hlc-card');\n var totalWatts = 0;\n var totalWh = 0;\n var breakdownData = [];\n\n for (var i = 0; i < cards.length; i++) {\n var c = cards[i];\n var appIdx = parseInt(c.querySelector('[data-role=\"appliance\"]').value, 10);\n var qty = parseInt(c.querySelector('[data-role=\"quantity\"]').value, 10) || 1;\n var watts = parseFloat(c.querySelector('[data-role=\"watts\"]').value) || 0;\n var hours = parseFloat(c.querySelector('[data-role=\"hours\"]').value) || 0;\n var usageIdx = parseInt(c.querySelector('[data-role=\"usage\"]').value, 10);\n var factor = USAGE_TYPES[usageIdx] ? USAGE_TYPES[usageIdx].factor : 1;\n\n var cardLoad = watts * qty * factor;\n var cardWh = cardLoad * hours;\n\n totalWatts += cardLoad;\n totalWh += cardWh;\n\n \/\/ Update card load display\n var loadEl = c.querySelector('[data-role=\"card-load\"]');\n if (loadEl) loadEl.textContent = Math.round(cardLoad) + ' W';\n\n breakdownData.push({\n name: APPLIANCES[appIdx] ? APPLIANCES[appIdx].name : 'Custom',\n qty: qty,\n watts: watts,\n hours: hours,\n usage: USAGE_TYPES[usageIdx] ? USAGE_TYPES[usageIdx].label : 'Regular',\n load: Math.round(cardLoad),\n wh: Math.round(cardWh)\n });\n }\n\n totalWatts = Math.round(totalWatts);\n totalWh = Math.round(totalWh);\n\n \/\/ Inverter: 1.25x safety factor, rounded to nearest 100\n var inverterVA = Math.ceil((totalWatts * 1.25) \/ 100) * 100;\n\n \/\/ Battery: (totalWh \/ battery voltage \/ DoD \/ inverter efficiency)\n \/\/ Assuming 12V battery, 50% DoD, 85% inverter efficiency\n var batteryAh = totalWh > 0 ? Math.ceil(totalWh \/ (12 * 0.5 * 0.85)) : 0;\n\n \/\/ Round battery to standard sizes\n batteryAh = roundToStandardBattery(batteryAh);\n\n \/\/ Solar: totalWh \/ peak sun hours (5h avg) \/ system losses (0.75)\n var solarWatts = totalWh > 0 ? Math.ceil(totalWh \/ (5 * 0.75)) : 0;\n solarWatts = Math.ceil(solarWatts \/ 50) * 50; \/\/ Round to nearest 50W\n\n \/\/ Update summary\n document.getElementById('ea2z-total-load').textContent = formatNumber(totalWatts);\n document.getElementById('ea2z-inverter-size').textContent = formatNumber(inverterVA);\n document.getElementById('ea2z-battery-cap').textContent = formatNumber(batteryAh);\n document.getElementById('ea2z-solar-size').textContent = formatNumber(solarWatts);\n\n \/\/ Update breakdown\n updateBreakdown(breakdownData, totalWatts);\n }\n\n \/* ===== Round to Standard Battery ===== *\/\n function roundToStandardBattery(ah) {\n if (ah <= 0) return 0;\n var standards = [20, 40, 60, 80, 100, 120, 150, 180, 200, 220, 250, 300, 350, 400, 500, 600];\n for (var i = 0; i < standards.length; i++) {\n if (ah <= standards[i]) return standards[i];\n }\n return Math.ceil(ah \/ 100) * 100;\n }\n\n \/* ===== Format Number ===== *\/\n function formatNumber(n) {\n return n.toLocaleString('en-IN');\n }\n\n \/* ===== Update Breakdown Table ===== *\/\n function updateBreakdown(data, totalWatts) {\n var contentEl = document.getElementById('ea2z-breakdown-content');\n\n if (data.length === 0) {\n contentEl.innerHTML =\n '<div class=\"ea2z-hlc-empty\">' +\n '<div class=\"ea2z-hlc-empty-icon\">\ud83d\udccb<\/div>' +\n '<p>Add appliances above to see the load breakdown<\/p>' +\n '<\/div>';\n return;\n }\n\n var html =\n '<table class=\"ea2z-hlc-breakdown-table\">' +\n '<thead><tr>' +\n '<th>Appliance<\/th>' +\n '<th>Qty<\/th>' +\n '<th>Watts<\/th>' +\n '<th>Hours<\/th>' +\n '<th>Usage<\/th>' +\n '<th>Load (W)<\/th>' +\n '<\/tr><\/thead><tbody>';\n\n for (var i = 0; i < data.length; i++) {\n var d = data[i];\n var pct = totalWatts > 0 ? Math.round((d.load \/ totalWatts) * 100) : 0;\n html +=\n '<tr>' +\n '<td>' + escapeHtml(d.name) +\n '<div class=\"ea2z-hlc-bar-wrap\"><div class=\"ea2z-hlc-bar\" style=\"width:' + pct + '%\"><\/div><\/div>' +\n '<\/td>' +\n '<td>' + d.qty + '<\/td>' +\n '<td>' + d.watts + 'W<\/td>' +\n '<td>' + d.hours + 'h<\/td>' +\n '<td>' + d.usage + '<\/td>' +\n '<td>' + formatNumber(d.load) + ' W (' + pct + '%)<\/td>' +\n '<\/tr>';\n }\n\n html +=\n '<tr style=\"background:#f8f9fa;font-weight:700\">' +\n '<td colspan=\"5\">Total Load<\/td>' +\n '<td style=\"text-align:right;color:#0984e3\">' + formatNumber(totalWatts) + ' W<\/td>' +\n '<\/tr>';\n\n html += '<\/tbody><\/table>';\n contentEl.innerHTML = html;\n }\n\n \/* ===== Escape HTML ===== *\/\n function escapeHtml(str) {\n var div = document.createElement('div');\n div.appendChild(document.createTextNode(str));\n return div.innerHTML;\n }\n\n \/* ===== Event: Add Appliance ===== *\/\n addBtn.addEventListener('click', function() {\n createCard(0);\n \/\/ Scroll to new card\n var cards = container.querySelectorAll('.ea2z-hlc-card');\n var lastCard = cards[cards.length - 1];\n if (lastCard) {\n lastCard.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n });\n\n \/* ===== Event: Reset All ===== *\/\n resetBtn.addEventListener('click', function() {\n if (container.querySelectorAll('.ea2z-hlc-card').length === 0) return;\n var confirmReset = confirm('Remove all appliances and reset the calculator?');\n if (confirmReset) {\n container.innerHTML = '';\n cardCounter = 0;\n recalculate();\n }\n });\n\n \/* ===== Initialize with Default Appliances ===== *\/\n function init() {\n \/\/ Add some default appliances\n var defaults = [\n { idx: 0, qty: 5, hours: 8 }, \/\/ LED Bulb\n { idx: 3, qty: 3, hours: 10 }, \/\/ Ceiling Fan\n { idx: 6, qty: 1, hours: 5 }, \/\/ TV LED\n { idx: 8, qty: 1, hours: 24 } \/\/ Refrigerator\n ];\n\n for (var i = 0; i < defaults.length; i++) {\n var d = defaults[i];\n var card = createCard(d.idx);\n card.querySelector('[data-role=\"quantity\"]').value = d.qty;\n card.querySelector('[data-role=\"hours\"]').value = d.hours;\n }\n\n recalculate();\n }\n\n init();\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\n```\n","protected":false},"excerpt":{"rendered":"<p>\u201c`html Home Load Calculator \u26a1 Home Load Calculator Calculate your total electrical load, inverter, battery & solar panel requirements \ud83d\udd0c Total Load 0 Watts \ud83d\udd0b Inverter Size 0 VA \ud83e\udeab Battery Capacity 0 Ah (12V) \u2600\ufe0f Solar Panel 0 Watts \ud83c\udfe0 Your Appliances \u2795 Add Appliance \ud83d\udd04 Reset All \ud83d\udcca Load Breakdown \ud83d\udccb Add appliances […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-905","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>EduGuide Chatbot - HB Tech Hindi<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hbtech.co.in\/hi\/eduguide-chatbot\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"EduGuide Chatbot - HB Tech Hindi\" \/>\n<meta property=\"og:description\" content=\"\u201c`html Home Load Calculator \u26a1 Home Load Calculator Calculate your total electrical load, inverter, battery & solar panel requirements \ud83d\udd0c Total Load 0 Watts \ud83d\udd0b Inverter Size 0 VA \ud83e\udeab Battery Capacity 0 Ah (12V) \u2600\ufe0f Solar Panel 0 Watts \ud83c\udfe0 Your Appliances \u2795 Add Appliance \ud83d\udd04 Reset All \ud83d\udcca Load Breakdown \ud83d\udccb Add appliances […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hbtech.co.in\/hi\/eduguide-chatbot\/\" \/>\n<meta property=\"og:site_name\" content=\"HB Tech Hindi\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-31T13:48:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hbtech.co.in\/hi\/wp-content\/uploads\/2025\/03\/HB-Tech-Logo-512-x-512-px.png\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/eduguide-chatbot\\\/\",\"url\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/eduguide-chatbot\\\/\",\"name\":\"EduGuide Chatbot - HB Tech Hindi\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/#website\"},\"datePublished\":\"2025-10-09T13:22:55+00:00\",\"dateModified\":\"2026-05-31T13:48:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/eduguide-chatbot\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/eduguide-chatbot\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/eduguide-chatbot\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"EduGuide Chatbot\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/#website\",\"url\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/\",\"name\":\"HB Tech\",\"description\":\"HB Tech: The Power Behind Progress\",\"publisher\":{\"@id\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/#organization\",\"name\":\"HB Tech Hindi\",\"url\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/HB-Tech-Logo-512-x-512-px.png\",\"contentUrl\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/HB-Tech-Logo-512-x-512-px.png\",\"width\":512,\"height\":512,\"caption\":\"HB Tech Hindi\"},\"image\":{\"@id\":\"https:\\\/\\\/hbtech.co.in\\\/hi\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"EduGuide Chatbot - HB Tech Hindi","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hbtech.co.in\/hi\/eduguide-chatbot\/","og_locale":"en_US","og_type":"article","og_title":"EduGuide Chatbot - HB Tech Hindi","og_description":"\u201c`html Home Load Calculator \u26a1 Home Load Calculator Calculate your total electrical load, inverter, battery & solar panel requirements \ud83d\udd0c Total Load 0 Watts \ud83d\udd0b Inverter Size 0 VA \ud83e\udeab Battery Capacity 0 Ah (12V) \u2600\ufe0f Solar Panel 0 Watts \ud83c\udfe0 Your Appliances \u2795 Add Appliance \ud83d\udd04 Reset All \ud83d\udcca Load Breakdown \ud83d\udccb Add appliances […]","og_url":"https:\/\/hbtech.co.in\/hi\/eduguide-chatbot\/","og_site_name":"HB Tech Hindi","article_modified_time":"2026-05-31T13:48:45+00:00","og_image":[{"width":512,"height":512,"url":"https:\/\/hbtech.co.in\/hi\/wp-content\/uploads\/2025\/03\/HB-Tech-Logo-512-x-512-px.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hbtech.co.in\/hi\/eduguide-chatbot\/","url":"https:\/\/hbtech.co.in\/hi\/eduguide-chatbot\/","name":"EduGuide Chatbot - HB Tech Hindi","isPartOf":{"@id":"https:\/\/hbtech.co.in\/hi\/#website"},"datePublished":"2025-10-09T13:22:55+00:00","dateModified":"2026-05-31T13:48:45+00:00","breadcrumb":{"@id":"https:\/\/hbtech.co.in\/hi\/eduguide-chatbot\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hbtech.co.in\/hi\/eduguide-chatbot\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/hbtech.co.in\/hi\/eduguide-chatbot\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hbtech.co.in\/hi\/"},{"@type":"ListItem","position":2,"name":"EduGuide Chatbot"}]},{"@type":"WebSite","@id":"https:\/\/hbtech.co.in\/hi\/#website","url":"https:\/\/hbtech.co.in\/hi\/","name":"HB Tech","description":"HB Tech: The Power Behind Progress","publisher":{"@id":"https:\/\/hbtech.co.in\/hi\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hbtech.co.in\/hi\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hbtech.co.in\/hi\/#organization","name":"HB Tech Hindi","url":"https:\/\/hbtech.co.in\/hi\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hbtech.co.in\/hi\/#\/schema\/logo\/image\/","url":"https:\/\/hbtech.co.in\/hi\/wp-content\/uploads\/2025\/03\/HB-Tech-Logo-512-x-512-px.png","contentUrl":"https:\/\/hbtech.co.in\/hi\/wp-content\/uploads\/2025\/03\/HB-Tech-Logo-512-x-512-px.png","width":512,"height":512,"caption":"HB Tech Hindi"},"image":{"@id":"https:\/\/hbtech.co.in\/hi\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/hbtech.co.in\/hi\/wp-json\/wp\/v2\/pages\/905","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hbtech.co.in\/hi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hbtech.co.in\/hi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hbtech.co.in\/hi\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hbtech.co.in\/hi\/wp-json\/wp\/v2\/comments?post=905"}],"version-history":[{"count":4,"href":"https:\/\/hbtech.co.in\/hi\/wp-json\/wp\/v2\/pages\/905\/revisions"}],"predecessor-version":[{"id":1076,"href":"https:\/\/hbtech.co.in\/hi\/wp-json\/wp\/v2\/pages\/905\/revisions\/1076"}],"wp:attachment":[{"href":"https:\/\/hbtech.co.in\/hi\/wp-json\/wp\/v2\/media?parent=905"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}