Professionalità e serietà al vostro servizio
<!-- CASA EFFICIENTE - SIMULATORE WEBFLOW READY -->
<!-- Incolla tutto questo codice dentro un elemento Embed di Webflow -->
<div id="ce-sim-wrap">
<style>
#ce-sim-wrap {
--ce-bg: #f8fafc;
--ce-card: #ffffff;
--ce-text: #0f172a;
--ce-muted: #64748b;
--ce-line: #e2e8f0;
--ce-dark: #0f172a;
--ce-accent: #16a34a;
--ce-soft: #f1f5f9;
--ce-radius: 24px;
--ce-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
color: var(--ce-text);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#ce-sim-wrap * { box-sizing: border-box; }
#ce-sim-wrap .ce-card {
background: var(--ce-card);
border: 1px solid rgba(226, 232, 240, 0.8);
border-radius: var(--ce-radius);
box-shadow: var(--ce-shadow);
}
#ce-sim-wrap .ce-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 20px;
align-items: start;
}
#ce-sim-wrap .ce-left,
#ce-sim-wrap .ce-right {
display: grid;
gap: 20px;
}
#ce-sim-wrap .ce-panel { padding: 24px; }
#ce-sim-wrap .ce-title {
margin: 0 0 8px;
font-size: 1.2rem;
line-height: 1.2;
letter-spacing: -0.02em;
}
#ce-sim-wrap .ce-top {
margin: 0 0 22px;
color: var(--ce-muted);
font-size: 0.96rem;
}
#ce-sim-wrap .ce-form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
#ce-sim-wrap .ce-field {
display: grid;
gap: 8px;
}
#ce-sim-wrap .ce-field-full { grid-column: 1 / -1; }
#ce-sim-wrap label {
font-weight: 600;
font-size: 0.95rem;
}
#ce-sim-wrap input,
#ce-sim-wrap select,
#ce-sim-wrap button {
font: inherit;
}
#ce-sim-wrap input,
#ce-sim-wrap select {
width: 100%;
border: 1px solid var(--ce-line);
background: white;
border-radius: 16px;
padding: 14px 16px;
color: var(--ce-text);
outline: none;
}
#ce-sim-wrap input:focus,
#ce-sim-wrap select:focus {
border-color: #94a3b8;
}
#ce-sim-wrap .ce-hint {
color: var(--ce-muted);
font-size: 0.8rem;
line-height: 1.45;
}
#ce-sim-wrap .ce-switch-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 16px;
border-radius: 18px;
background: var(--ce-soft);
border: 1px solid rgba(226,232,240,0.8);
}
#ce-sim-wrap .ce-switch {
position: relative;
width: 54px;
height: 32px;
border-radius: 999px;
background: #cbd5e1;
cursor: pointer;
flex: 0 0 auto;
transition: 0.2s ease;
}
#ce-sim-wrap .ce-switch::after {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 24px;
height: 24px;
border-radius: 50%;
background: white;
box-shadow: 0 2px 6px rgba(0,0,0,0.18);
transition: 0.2s ease;
}
#ce-sim-wrap .ce-switch.active {
background: var(--ce-accent);
}
#ce-sim-wrap .ce-switch.active::after {
transform: translateX(22px);
}
#ce-sim-wrap .ce-result-hero {
padding: 26px;
border-radius: 24px;
background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
color: white;
}
#ce-sim-wrap .ce-result-hero small {
color: rgba(255,255,255,0.72);
display: block;
}
#ce-sim-wrap .ce-price {
margin: 8px 0 0;
font-size: clamp(2.3rem, 4vw, 3.4rem);
line-height: 1;
letter-spacing: -0.05em;
font-weight: 800;
}
#ce-sim-wrap .ce-result-list,
#ce-sim-wrap .ce-summary-list {
display: grid;
gap: 12px;
margin-top: 16px;
}
#ce-sim-wrap .ce-result-item,
#ce-sim-wrap .ce-summary-item {
padding: 16px;
border-radius: 18px;
background: var(--ce-soft);
border: 1px solid rgba(226, 232, 240, 0.75);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
#ce-sim-wrap .ce-mini-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-top: 16px;
}
#ce-sim-wrap .ce-mini-box {
padding: 16px;
border-radius: 18px;
background: var(--ce-soft);
border: 1px solid rgba(226, 232, 240, 0.75);
}
#ce-sim-wrap .ce-mini-box strong {
display: block;
margin-top: 4px;
font-size: 1.45rem;
line-height: 1.1;
letter-spacing: -0.04em;
}
#ce-sim-wrap .ce-btn {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 0;
border-radius: 999px;
padding: 14px 22px;
font-weight: 700;
cursor: pointer;
background: var(--ce-dark);
color: white;
transition: 0.2s ease;
}
#ce-sim-wrap .ce-btn:hover { transform: translateY(-1px); }
#ce-sim-wrap .ce-note {
margin-top: 14px;
color: var(--ce-muted);
font-size: 0.8rem;
line-height: 1.5;
}
@media (max-width: 991px) {
#ce-sim-wrap .ce-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
#ce-sim-wrap .ce-form-grid,
#ce-sim-wrap .ce-mini-grid {
grid-template-columns: 1fr;
}
#ce-sim-wrap .ce-panel {
padding: 18px;
}
}
</style>
<div class="ce-grid">
<div class="ce-left">
<div class="ce-card ce-panel">
<h3 class="ce-title">Dati della casa</h3>
<p class="ce-top">Inserisci il profilo della casa e dell’impianto esistente.</p>
<div class="ce-form-grid">
<div class="ce-field">
<label for="ce-province">Provincia</label>
<input id="ce-province" value="Lucca" />
</div>
<div class="ce-field">
<label for="ce-houseType">Tipologia abitazione</label>
<select id="ce-houseType">
<option value="appartamento">Appartamento</option>
<option value="villetta" selected>Villetta</option>
<option value="villa">Villa</option>
</select>
</div>
<div class="ce-field">
<label for="ce-surface">Superficie abitazione (m²)</label>
<input id="ce-surface" type="number" value="120" />
</div>
<div class="ce-field">
<label for="ce-occupants">Numero occupanti</label>
<input id="ce-occupants" type="number" value="4" />
</div>
<div class="ce-field">
<label for="ce-heatingType">Impianto attuale</label>
<select id="ce-heatingType">
<option value="gas" selected>Caldaia a gas</option>
<option value="gpl">GPL</option>
<option value="gasolio">Gasolio</option>
<option value="elettrico">Elettrico diretto</option>
</select>
</div>
<div class="ce-field">
<label for="ce-exposure">Esposizione tetto</label>
<select id="ce-exposure">
<option value="bassa">Bassa</option>
<option value="media" selected>Media</option>
<option value="alta">Alta</option>
</select>
</div>
</div>
</div>
<div class="ce-card ce-panel">
<h3 class="ce-title">Consumi e costi attuali</h3>
<p class="ce-top">Modifica i valori per aggiornare il risultato in tempo reale.</p>
<div class="ce-form-grid">
<div class="ce-field">
<label for="ce-annualElectricityKwh">Consumo elettrico annuo (kWh)</label>
<input id="ce-annualElectricityKwh" type="number" value="3800" />
</div>
<div class="ce-field">
<label for="ce-annualHeatingCost">Spesa annua riscaldamento/ACS (€)</label>
<input id="ce-annualHeatingCost" type="number" value="1800" />
</div>
<div class="ce-field">
<label for="ce-electricityCostPerKwh">Costo energia elettrica (€/kWh)</label>
<input id="ce-electricityCostPerKwh" type="number" step="0.01" value="0.29" />
<div class="ce-hint">Prezzo medio acquistato dalla rete</div>
</div>
<div class="ce-field">
<label for="ce-feedInTariff">Valore energia immessa (€/kWh)</label>
<input id="ce-feedInTariff" type="number" step="0.01" value="0.10" />
<div class="ce-hint">Valore medio riconosciuto all’energia ceduta</div>
</div>
</div>
<div style="margin-top:18px; display:grid; gap:14px;">
<div class="ce-switch-row">
<div>
<strong>Hai già o prevedi un’auto elettrica?</strong>
<div class="ce-hint">Attiva la wallbox nel calcolo del risparmio</div>
</div>
<div class="ce-switch active" id="ce-toggleEV"></div>
</div>
<div class="ce-field" id="ce-evFieldWrap">
<label for="ce-evKmYear">Km annui auto elettrica</label>
<input id="ce-evKmYear" type="number" value="12000" />
</div>
<div class="ce-switch-row">
<div>
<strong>Usi il raffrescamento estivo?</strong>
<div class="ce-hint">Migliora il ritorno dell’intervento integrato</div>
</div>
<div class="ce-switch active" id="ce-toggleCooling"></div>
</div>
</div>
</div>
<div class="ce-card ce-panel">
<h3 class="ce-title">Configurazione impianto desiderato</h3>
<p class="ce-top">Imposta fotovoltaico e accumulo per vedere subito come cambia il risultato.</p>
<div class="ce-form-grid">
<div class="ce-field ce-field-full">
<label for="ce-pvSizeKw">Taglia fotovoltaico (kWp)</label>
<input id="ce-pvSizeKw" type="number" step="0.5" value="6" />
<div class="ce-hint">Consigliato per il profilo inserito: <span id="ce-recommendedPvSize">-</span> kWp</div>
</div>
</div>
<div style="margin-top:18px; display:grid; gap:14px;">
<div class="ce-switch-row">
<div>
<strong>Vuoi batteria di accumulo?</strong>
<div class="ce-hint">Aumenta l’autoconsumo e il risparmio sul prelievo</div>
</div>
<div class="ce-switch active" id="ce-toggleBattery"></div>
</div>
<div class="ce-field" id="ce-batteryFieldWrap">
<label for="ce-batterySizeKwh">Capacità batteria (kWh)</label>
<input id="ce-batterySizeKwh" type="number" step="1" value="10" />
<div class="ce-hint">Consigliata per questa taglia FV: <span id="ce-recommendedBatterySize">-</span> kWh</div>
</div>
</div>
</div>
</div>
<div class="ce-right">
<div class="ce-card ce-panel">
<div class="ce-result-hero">
<small>Risparmio annuo stimato</small>
<div class="ce-price" id="ce-totalAnnualSavings">€ 0</div>
<div style="margin-top:10px; color:rgba(255,255,255,0.72);">Spesa attuale stimata: <span id="ce-currentTotalCost">€ 0</span> / anno</div>
</div>
<div class="ce-result-list">
<div class="ce-result-item"><span>Risparmio pompa di calore</span><strong id="ce-heatingSavings">€ 0</strong></div>
<div class="ce-result-item"><span>Risparmio fotovoltaico</span><strong id="ce-electricitySavings">€ 0</strong></div>
<div class="ce-result-item"><span>Autoconsumo stimato</span><strong id="ce-selfConsumptionRatio">0%</strong></div>
<div class="ce-result-item"><span>Risparmio ricarica auto</span><strong id="ce-evSavings">€ 0</strong></div>
<div class="ce-result-item"><span>Produzione FV stimata</span><strong id="ce-pvProductionKwh">0 kWh/anno</strong></div>
</div>
<div class="ce-mini-grid">
<div class="ce-mini-box">
<small class="ce-hint">Energia autoconsumata</small>
<strong id="ce-selfConsumedKwh">0 kWh</strong>
</div>
<div class="ce-mini-box">
<small class="ce-hint">Energia immessa</small>
<strong id="ce-exportedKwh">0 kWh</strong>
</div>
<div class="ce-mini-box">
<small class="ce-hint">Fabbisogno elettrico futuro</small>
<strong id="ce-totalFutureElectricDemand">0 kWh</strong>
</div>
<div class="ce-mini-box">
<small class="ce-hint">Rientro stimato</small>
<strong id="ce-paybackYears">0 anni</strong>
</div>
</div>
</div>
<div class="ce-card ce-panel">
<h3 class="ce-title">Investimento indicativo</h3>
<div class="ce-summary-list">
<div class="ce-summary-item"><span>Pompa di calore</span><strong id="ce-heatPumpCost">€ 0</strong></div>
<div class="ce-summary-item"><span>Fotovoltaico</span><strong id="ce-pvCost">€ 0</strong></div>
<div class="ce-summary-item" id="ce-batteryCostRow"><span>Batteria</span><strong id="ce-batteryCost">€ 0</strong></div>
<div class="ce-summary-item" id="ce-wallboxCostRow"><span>Wallbox</span><strong id="ce-wallboxCost">€ 0</strong></div>
<div class="ce-summary-item" style="background:#e2fbe8; border-color:#c6f6d5;"><span><strong>Totale investimento</strong></span><strong id="ce-totalInvestment">€ 0</strong></div>
</div>
<div class="ce-note">Stima preliminare basata su parametri medi. La proposta finale dipende da involucro, terminali, potenza disponibile, esposizione reale, profilo di consumo e configurazione impiantistica.</div>
</div>
<div class="ce-card ce-panel">
<h3 class="ce-title">Dettaglio economico</h3>
<div class="ce-summary-list">
<div class="ce-summary-item"><span>Costo energia impostato</span><strong id="ce-electricityCostFormatted">€ 0,00/kWh</strong></div>
<div class="ce-summary-item"><span>Valore energia immessa</span><strong id="ce-feedInFormatted">€ 0,00/kWh</strong></div>
<div class="ce-summary-item"><span>Risparmio da autoconsumo</span><strong id="ce-electricityBillSavings">€ 0</strong></div>
<div class="ce-summary-item"><span>Valore energia ceduta</span><strong id="ce-exportValue">€ 0</strong></div>
</div>
</div>
<div class="ce-card ce-panel">
<h3 class="ce-title">Ricevi la simulazione completa</h3>
<p class="ce-top">Lascia il contatto per una valutazione più approfondita e una proposta personalizzata.</p>
<div class="ce-field">
<label for="ce-leadName">Nome e cognome</label>
<input id="ce-leadName" placeholder="Mario Rossi" />
</div>
<div class="ce-field" style="margin-top:14px;">
<label for="ce-leadPhone">Telefono</label>
<input id="ce-leadPhone" placeholder="333 1234567" />
</div>
<div class="ce-field" style="margin-top:14px;">
<label for="ce-leadEmail">Email</label>
<input id="ce-leadEmail" placeholder="nome@email.it" />
</div>
<button class="ce-btn" id="ce-leadSubmit" style="margin-top:16px;">Ottieni la tua analisi gratuita</button>
<div class="ce-note">In Webflow puoi collegare questo blocco a Webflow Forms, Zapier, Make o a un webhook del tuo CRM.</div>
</div>
</div>
</div>
<script>
(function() {
const wrap = document.getElementById('ce-sim-wrap');
if (!wrap) return;
const eur0 = new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 });
const eur2 = new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 });
const intFmt = new Intl.NumberFormat('it-IT', { maximumFractionDigits: 0 });
const state = {
hasEV: true,
hasCooling: true,
hasBattery: true,
};
const $ = (id) => document.getElementById(id);
const num = (id) => Number($(id).value || 0);
const clamp = (n, min, max) => Math.min(Math.max(n, min), max);
function toggleSwitch(el, key, wrapId) {
el.classList.toggle('active');
state[key] = el.classList.contains('active');
if (wrapId) $(wrapId).style.display = state[key] ? 'grid' : 'none';
calculate();
}
function calculate() {
const houseType = $('ce-houseType').value;
const surface = num('ce-surface');
const heatingType = $('ce-heatingType').value;
const annualElectricityKwh = num('ce-annualElectricityKwh');
const annualHeatingCost = num('ce-annualHeatingCost');
const electricityCostPerKwh = num('ce-electricityCostPerKwh');
const feedInTariff = num('ce-feedInTariff');
const pvSizeKw = num('ce-pvSizeKw');
const batterySizeKwh = num('ce-batterySizeKwh');
const evKmYear = num('ce-evKmYear');
const exposure = $('ce-exposure').value;
const exposureFactor = exposure === 'alta' ? 1.1 : exposure === 'bassa' ? 0.85 : 1;
const houseFactor = houseType === 'appartamento' ? 0.9 : houseType === 'villa' ? 1.15 : 1;
const coolingBonus = state.hasCooling ? 250 : 0;
const evConsumptionKwh = state.hasEV ? evKmYear * 0.18 : 0;
const heatPumpExtraElectricity = clamp(surface * 18 * houseFactor, 1400, 4200);
const totalFutureElectricDemand = annualElectricityKwh + evConsumptionKwh + heatPumpExtraElectricity;
const pvProductionKwh = pvSizeKw * 1250 * exposureFactor;
const baseSelfConsumptionRatio = state.hasBattery ? 0.32 : 0.22;
const batteryBoost = state.hasBattery ? clamp(batterySizeKwh * 0.025, 0.08, 0.28) : 0;
const evBoost = state.hasEV ? 0.06 : 0;
const finalSelfConsumptionRatio = clamp(baseSelfConsumptionRatio + batteryBoost + evBoost, 0.2, 0.85);
const selfConsumedKwh = Math.min(pvProductionKwh * finalSelfConsumptionRatio, totalFutureElectricDemand);
const exportedKwh = Math.max(pvProductionKwh - selfConsumedKwh, 0);
const currentElectricityCost = annualElectricityKwh * electricityCostPerKwh;
const currentEvCost = state.hasEV ? evConsumptionKwh * electricityCostPerKwh : 0;
const currentTotalCost = annualHeatingCost + currentElectricityCost + currentEvCost;
const electricityBillSavings = selfConsumedKwh * electricityCostPerKwh;
const exportValue = exportedKwh * feedInTariff;
const electricitySavings = electricityBillSavings + exportValue;
const heatPumpCoverageFactor = heatingType === 'gasolio' || heatingType === 'gpl' ? 0.82 : heatingType === 'elettrico' ? 0.45 : 0.74;
const heatingSavings = annualHeatingCost * heatPumpCoverageFactor;
const evSavings = state.hasEV ? evKmYear * (0.14 - 0.045) : 0;
const totalAnnualSavings = electricitySavings + heatingSavings + evSavings + coolingBonus;
const heatPumpCost = surface < 90 ? 9000 : surface < 150 ? 12000 : 16000;
const pvCost = pvSizeKw * 1850;
const batteryCost = state.hasBattery ? batterySizeKwh * 850 : 0;
const wallboxCost = state.hasEV ? 1800 : 0;
const totalInvestment = heatPumpCost + pvCost + batteryCost + wallboxCost;
const paybackYears = totalAnnualSavings > 0 ? totalInvestment / totalAnnualSavings : 0;
const recommendedPvSize = clamp(Math.round((totalFutureElectricDemand / 1250) * 10) / 10, 3, 20);
const recommendedBatterySize = clamp(Math.round((pvSizeKw * 1.6) * 10) / 10, 0, 40);
$('ce-totalAnnualSavings').textContent = eur0.format(totalAnnualSavings);
$('ce-currentTotalCost').textContent = eur0.format(currentTotalCost);
$('ce-heatingSavings').textContent = eur0.format(heatingSavings);
$('ce-electricitySavings').textContent = eur0.format(electricitySavings);
$('ce-selfConsumptionRatio').textContent = Math.round(finalSelfConsumptionRatio * 100) + '%';
$('ce-evSavings').textContent = eur0.format(evSavings);
$('ce-pvProductionKwh').textContent = intFmt.format(pvProductionKwh) + ' kWh/anno';
$('ce-selfConsumedKwh').textContent = intFmt.format(selfConsumedKwh) + ' kWh';
$('ce-exportedKwh').textContent = intFmt.format(exportedKwh) + ' kWh';
$('ce-totalFutureElectricDemand').textContent = intFmt.format(totalFutureElectricDemand) + ' kWh';
$('ce-paybackYears').textContent = paybackYears.toFixed(1).replace('.', ',') + ' anni';
$('ce-heatPumpCost').textContent = eur0.format(heatPumpCost);
$('ce-pvCost').textContent = eur0.format(pvCost);
$('ce-batteryCost').textContent = eur0.format(batteryCost);
$('ce-wallboxCost').textContent = eur0.format(wallboxCost);
$('ce-totalInvestment').textContent = eur0.format(totalInvestment);
$('ce-electricityCostFormatted').textContent = eur2.format(electricityCostPerKwh) + '/kWh';
$('ce-feedInFormatted').textContent = eur2.format(feedInTariff) + '/kWh';
$('ce-electricityBillSavings').textContent = eur0.format(electricityBillSavings);
$('ce-exportValue').textContent = eur0.format(exportValue);
$('ce-recommendedPvSize').textContent = recommendedPvSize.toString().replace('.', ',');
$('ce-recommendedBatterySize').textContent = recommendedBatterySize.toString().replace('.', ',');
$('ce-batteryCostRow').style.display = state.hasBattery ? 'flex' : 'none';
$('ce-wallboxCostRow').style.display = state.hasEV ? 'flex' : 'none';
$('ce-batteryFieldWrap').style.display = state.hasBattery ? 'grid' : 'none';
$('ce-evFieldWrap').style.display = state.hasEV ? 'grid' : 'none';
}
['ce-houseType','ce-surface','ce-occupants','ce-heatingType','ce-exposure','ce-annualElectricityKwh','ce-annualHeatingCost','ce-electricityCostPerKwh','ce-feedInTariff','ce-evKmYear','ce-pvSizeKw','ce-batterySizeKwh'].forEach(id => {
$(id).addEventListener('input', calculate);
$(id).addEventListener('change', calculate);
});
$('ce-toggleEV').addEventListener('click', () => toggleSwitch($('ce-toggleEV'), 'hasEV', 'ce-evFieldWrap'));
$('ce-toggleCooling').addEventListener('click', () => toggleSwitch($('ce-toggleCooling'), 'hasCooling'));
$('ce-toggleBattery').addEventListener('click', () => toggleSwitch($('ce-toggleBattery'), 'hasBattery', 'ce-batteryFieldWrap'));
$('ce-leadSubmit').addEventListener('click', function() {
const name = $('ce-leadName').value.trim();
const phone = $('ce-leadPhone').value.trim();
const email = $('ce-leadEmail').value.trim();
alert(
'Lead acquisito:\n' +
(name || '-') + '\n' +
(phone || '-') + '\n' +
(email || '-') + '\nProvincia: ' + $('ce-province').value +
'\nRisparmio stimato: ' + $('ce-totalAnnualSavings').textContent + '/anno'
);
});
calculate();
})();
</script>
</div>