/* ======================================================
SOLAR SAVINGS CALCULATOR – EMBEDDABLE PRO WIDGET
Commercial‑ready front‑end widget for solar companies
Files normally distributed:
1. embed.js (script clients load)
2. widget.css (styles)
3. widget.js (logic)
For simplicity this version contains EVERYTHING in one
script so companies only embed ONE line.
====================================================== */
(function(){
const CONFIG = {
electricityPrice: 70,
productionPerKw: 1100,
costPerKw: 450000
};
/* ------------------ STYLES ------------------ */
const styles = `
.solarWidgetBox{font-family:Inter,Arial,sans-serif;max-width:420px;background:#ffffff;border-radius:16px;padding:24px;box-shadow:0 10px 30px rgba(0,0,0,0.12)}
.solarWidgetBox h2{margin-top:0;font-size:22px}
.solarField{margin-top:12px}
.solarField label{display:block;font-weight:600;font-size:14px;margin-bottom:4px}
.solarField input,.solarField select{width:100%;padding:10px;border-radius:8px;border:1px solid #ddd;font-size:14px}
.solarBtn{margin-top:18px;width:100%;padding:12px;background:#f5a623;color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer}
.solarBtn:hover{opacity:.9}
.resultBox{margin-top:20px;background:#f7f9fc;border-radius:12px;padding:16px}
.metric{font-size:20px;font-weight:700;margin:6px 0}
.small{font-size:13px;color:#666}
.leadForm{margin-top:16px}
.leadForm input{width:100%;margin-top:8px;padding:10px;border-radius:8px;border:1px solid #ddd}
.leadBtn{margin-top:10px;width:100%;background:#2a7cff;color:white;padding:11px;border:none;border-radius:10px;font-weight:700;cursor:pointer}
`;
/* ------------------ HTML ------------------ */
const html = `
`;
/* ------------------ CALCULATION ------------------ */
function calculate(){
const bill = Number(document.getElementById("solar_bill").value);
const roof = Number(document.getElementById("solar_roof").value);
const orientation = Number(document.getElementById("solar_orientation").value);
if(!bill) return;
const yearlyBill = bill*12;
const consumption = yearlyBill / CONFIG.electricityPrice;
let systemSize = consumption / CONFIG.productionPerKw;
const roofLimit = roof ? roof / 6 : systemSize;
if(systemSize > roofLimit) systemSize = roofLimit;
const yearlyProduction = systemSize * CONFIG.productionPerKw * orientation;
const yearlySaving = yearlyProduction * CONFIG.electricityPrice;
const systemCost = systemSize * CONFIG.costPerKw;
const payback = systemCost / yearlySaving;
const profit25 = yearlySaving * 25 - systemCost;
renderResult(systemSize, yearlyProduction, yearlySaving, payback, profit25);
}
/* ------------------ RESULT UI ------------------ */
function renderResult(systemSize, production, saving, payback, profit){
const result = document.getElementById("solar_result");
result.innerHTML = `
`;
initLead(systemSize, saving);
}
/* ------------------ LEAD CAPTURE ------------------ */
function initLead(systemSize, saving){
const btn = document.getElementById("lead_submit");
btn.addEventListener("click", ()=>{
const name = document.getElementById("lead_name").value;
const email = document.getElementById("lead_email").value;
const phone = document.getElementById("lead_phone").value;
const lead = {
name,
email,
phone,
systemSize,
yearlySaving: saving,
timestamp: new Date()
};
console.log("Solar Lead:", lead);
btn.innerText = "Elküldve ✓";
});
}
/* ------------------ INIT ------------------ */
function init(){
const style = document.createElement("style");
style.innerHTML = styles;
document.head.appendChild(style);
const container = document.currentScript.parentElement;
container.innerHTML = html;
container.querySelector("#solar_calc_btn").addEventListener("click", calculate);
}
init();
})();
/* ======================================================
HOW CLIENTS INSTALL THE WIDGET
They only add this to their website:
====================================================== */
