<!DOCTYPE html>
<html lang=”sl”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Kalkulator realnih stroškov: Elektrika vs. Dizel/Bencin | Pametna Mobilnost</title>
<style>
:root {
–primary: #0A7C45;
–primary-dark: #065C33;
–primary-light: #E6F5EE;
–primary-mid: #C3E9D4;
–accent: #E07B1A;
–accent-light: #FDF0E3;
–accent-mid: #F8D5A8;
–danger: #C0392B;
–danger-light: #FDECEA;
–secondary: #132638;
–text: #132638;
–text-muted: #5A6A7A;
–text-light: #8898A8;
–bg: #F4F7FA;
–bg-card: #FFFFFF;
–bg-section: #FBFCFD;
–border: #DDE4EC;
–border-light: #EEF2F7;
–shadow-sm: 0 1px 4px rgba(19,38,56,0.07);
–shadow-md: 0 3px 12px rgba(19,38,56,0.10);
–radius-sm: 6px;
–radius-md: 10px;
–radius-lg: 16px;
–font-main: ‘Barlow’, ‘DM Sans’, system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(–font-main);
background: var(–bg);
color: var(–text);
font-size: 15px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
#pm-kalkulator {
max-width: 820px;
margin: 0 auto;
padding: 24px 16px 40px;
}
/* ─── HEADER ─── */
.pm-header {
text-align: center;
margin-bottom: 18px;
}
.pm-header-badges {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.pm-header .pm-badge {
display: inline-block;
background: var(–primary-light);
color: var(–primary-dark);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 20px;
border: 1px solid var(–primary-mid);
}
.pm-header .pm-update-meta {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(–bg-card);
color: var(–text-muted);
font-size: 11px;
font-weight: 600;
padding: 4px 12px;
border-radius: 20px;
border: 1px solid var(–border);
}
.pm-header h2 {
font-size: clamp(20px, 4vw, 28px);
font-weight: 700;
color: var(–secondary);
margin-bottom: 8px;
letter-spacing: -0.02em;
line-height: 1.2;
}
.pm-header p {
font-size: 14px;
color: var(–text-muted);
max-width: 480px;
margin: 0 auto;
}
/* ─── DATA STATUS ─── */
.pm-data-status {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(–text-light);
justify-content: center;
margin-bottom: 20px;
}
.pm-data-status .dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(–text-light);
flex-shrink: 0;
}
.pm-data-status.loaded .dot { background: var(–primary); }
.pm-data-status.loaded { color: var(–primary); }
.pm-data-status.error .dot { background: var(–danger); }
/* ─── KM INPUT TOP ─── */
.pm-km-block {
background: var(–secondary);
border-radius: var(–radius-lg);
padding: 20px 22px;
margin-bottom: 20px;
color: white;
}
.pm-km-block h3 {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.9;
margin-bottom: 14px;
color: #CBD5E1;
}
.pm-km-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.pm-km-field label {
display: block;
font-size: 12px;
font-weight: 700;
color: #94A3B8;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pm-km-field input {
width: 100%;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.25);
border-radius: var(–radius-sm);
color: #FFFFFF;
font-size: 22px;
font-weight: 700;
padding: 10px 14px;
font-family: var(–font-main);
outline: none;
transition: border-color 0.2s, background 0.2s;
-webkit-appearance: none;
}
.pm-km-field input:focus {
border-color: rgba(255,255,255,0.6);
background: rgba(255,255,255,0.18);
}
.pm-km-field input::placeholder { opacity: 0.4; }
.pm-km-field .unit {
font-size: 11px;
color: #64748B;
margin-top: 5px;
letter-spacing: 0.04em;
}
/* ─── CARD GRID ─── */
.pm-cards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 20px;
}
@media (max-width: 600px) {
.pm-cards-grid { grid-template-columns: 1fr; }
.pm-km-row { grid-template-columns: 1fr 1fr; }
}
.pm-card {
background: var(–bg-card);
border-radius: var(–radius-lg);
box-shadow: var(–shadow-sm);
border: 1.5px solid var(–border);
overflow: hidden;
transition: box-shadow 0.2s;
}
.pm-card:hover { box-shadow: var(–shadow-md); }
.pm-card-header {
padding: 14px 18px 12px;
border-bottom: 1px solid var(–border-light);
display: flex;
align-items: center;
gap: 10px;
}
.pm-card-icon {
width: 34px; height: 34px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 17px;
flex-shrink: 0;
}
.pm-card-ice .pm-card-icon { background: var(–accent-light); }
.pm-card-ev .pm-card-icon { background: var(–primary-light); }
.pm-card-header-text h4 {
font-size: 14px;
font-weight: 700;
letter-spacing: -0.01em;
}
.pm-card-ice .pm-card-header-text h4 { color: var(–accent); }
.pm-card-ev .pm-card-header-text h4 { color: var(–primary); }
.pm-card-header-text span {
font-size: 11px;
color: var(–text-light);
}
.pm-card-body { padding: 16px 18px 18px; }
.pm-field {
margin-bottom: 13px;
}
.pm-field:last-child { margin-bottom: 0; }
.pm-field label {
display: block;
font-size: 11.5px;
font-weight: 600;
color: var(–text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 5px;
}
.pm-field input,
.pm-field select {
width: 100%;
border: 1.5px solid var(–border);
border-radius: var(–radius-sm);
padding: 8px 11px;
font-size: 14px;
font-family: var(–font-main);
color: var(–text);
background: var(–bg-section);
outline: none;
transition: border-color 0.2s, background 0.2s;
-webkit-appearance: none;
}
.pm-field input:focus,
.pm-field select:focus {
border-color: var(–primary);
background: var(–bg-card);
}
.pm-field select { cursor: pointer; }
.pm-field .pm-field-note {
font-size: 11px;
color: var(–text-light);
margin-top: 4px;
line-height: 1.4;
}
.pm-field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.pm-tag-fixed {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(–primary-light);
color: var(–primary-dark);
border: 1px solid var(–primary-mid);
border-radius: 20px;
font-size: 12px;
font-weight: 600;
padding: 5px 11px;
}
/* ─── RESULTS TABLE ─── */
.pm-results {
background: var(–bg-card);
border-radius: var(–radius-lg);
box-shadow: var(–shadow-sm);
border: 1.5px solid var(–border);
margin-bottom: 16px;
overflow: hidden;
}
.pm-results-header {
background: var(–secondary);
color: #E2E8F0;
padding: 14px 20px;
display: flex;
align-items: center;
gap: 8px;
}
.pm-results-header h3 {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #F1F5F9;
}
.pm-results table {
width: 100%;
border-collapse: collapse;
}
.pm-results thead th {
padding: 10px 14px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: #475569;
background: var(–bg-section);
text-align: left;
border-bottom: 1px solid var(–border-light);
}
.pm-results thead th:not(:first-child) { text-align: right; }
.pm-results tbody td {
padding: 11px 14px;
font-size: 14px;
border-bottom: 1px solid var(–border-light);
color: var(–text);
}
.pm-results tbody tr:last-child td { border-bottom: none; font-weight: 700; }
.pm-results tbody td:not(:first-child) { text-align: right; }
.pm-results tbody td:first-child {
font-weight: 600;
color: var(–text-muted);
font-size: 13px;
}
.pm-results tbody tr:last-child td:first-child { color: var(–text); }
.td-ice { color: var(–accent) !important; font-weight: 600 !important; }
.td-ev { color: var(–primary) !important; font-weight: 600 !important; }
/* ─── SAVINGS BOX ─── */
.pm-savings-box {
border-radius: var(–radius-lg);
padding: 22px 22px;
margin-bottom: 16px;
transition: background 0.3s, border-color 0.3s;
text-align: center;
}
.pm-savings-box.positive {
background: var(–primary-light);
border: 2px solid var(–primary-mid);
}
.pm-savings-box.negative {
background: var(–danger-light);
border: 2px solid #F5CACA;
}
.pm-savings-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
margin-bottom: 6px;
}
.pm-savings-box.positive .pm-savings-label { color: var(–primary-dark); }
.pm-savings-box.negative .pm-savings-label { color: var(–danger); }
.pm-savings-amount {
font-size: clamp(32px, 7vw, 46px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: 6px;
}
.pm-savings-box.positive .pm-savings-amount { color: var(–primary-dark); }
.pm-savings-box.negative .pm-savings-amount { color: var(–danger); }
.pm-savings-sub {
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
}
.pm-savings-box.positive .pm-savings-sub { color: var(–primary); }
.pm-savings-box.negative .pm-savings-sub { color: var(–danger); }
.pm-five-year {
display: inline-block;
background: rgba(10,124,69,0.12);
border-radius: 20px;
padding: 3px 10px;
font-weight: 700;
font-size: 13px;
}
.pm-savings-box.negative .pm-five-year { background: rgba(192,57,43,0.10); }
/* ─── LEAD GEN FORM ─── */
.pm-leadgen {
background: var(–bg-card);
border-radius: var(–radius-lg);
border: 1.5px solid var(–border);
box-shadow: var(–shadow-sm);
padding: 22px 22px 24px;
margin-top: 4px;
}
.pm-leadgen-top {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 18px;
}
.pm-leadgen-icon {
width: 40px; height: 40px;
background: var(–primary-light);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.pm-leadgen-top h3 {
font-size: 16px;
font-weight: 700;
color: var(–secondary);
margin-bottom: 3px;
letter-spacing: -0.01em;
}
.pm-leadgen-top p {
font-size: 13px;
color: var(–text-muted);
line-height: 1.5;
}
.pm-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
@media (max-width: 480px) {
.pm-form-row { grid-template-columns: 1fr; }
}
.pm-form-group label {
display: block;
font-size: 11.5px;
font-weight: 600;
color: var(–text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 5px;
}
.pm-form-group input {
width: 100%;
border: 1.5px solid var(–border);
border-radius: var(–radius-sm);
padding: 10px 13px;
font-size: 14px;
font-family: var(–font-main);
color: var(–text);
background: var(–bg-section);
outline: none;
transition: border-color 0.2s;
-webkit-appearance: none;
}
.pm-form-group input:focus { border-color: var(–primary); background: var(–bg-card); }
.pm-gdpr-label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
margin-bottom: 14px;
}
.pm-gdpr-label input[type=checkbox] {
width: 16px; height: 16px;
flex-shrink: 0;
margin-top: 2px;
accent-color: var(–primary);
cursor: pointer;
}
.pm-gdpr-label span {
font-size: 12px;
color: var(–text-muted);
line-height: 1.5;
}
.pm-gdpr-label a { color: var(–primary); }
.pm-summary-preview {
background: var(–bg-section);
border: 1px solid var(–border-light);
border-radius: var(–radius-sm);
padding: 10px 13px;
margin-bottom: 14px;
font-size: 12px;
color: var(–text-muted);
line-height: 1.6;
}
.pm-summary-preview strong { color: var(–text); font-weight: 600; }
.pm-btn-submit {
width: 100%;
background: var(–primary);
color: white;
border: none;
border-radius: var(–radius-md);
padding: 14px 20px;
font-size: 15px;
font-weight: 700;
font-family: var(–font-main);
cursor: pointer;
letter-spacing: -0.01em;
transition: background 0.2s, transform 0.1s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.pm-btn-submit:hover { background: var(–primary-dark); }
.pm-btn-submit:active { transform: scale(0.99); }
.pm-btn-submit:disabled { background: #9CB8A8; cursor: not-allowed; transform: none; }
.pm-btn-submit .btn-arrow { font-size: 18px; }
.pm-form-msg {
margin-top: 12px;
padding: 10px 14px;
border-radius: var(–radius-sm);
font-size: 13px;
display: none;
}
.pm-form-msg.success {
background: var(–primary-light);
color: var(–primary-dark);
border: 1px solid var(–primary-mid);
display: block;
}
.pm-form-msg.error {
background: var(–danger-light);
color: var(–danger);
border: 1px solid #F5CACA;
display: block;
}
/* ─── DISCLAIMER ─── */
.pm-disclaimer {
margin-top: 20px;
font-size: 11px;
color: var(–text-light);
line-height: 1.6;
text-align: center;
padding: 0 10px;
}
/* ─── LOADING OVERLAY ─── */
.pm-spinner {
display: inline-block;
width: 14px; height: 14px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: pm-spin 0.7s linear infinite;
vertical-align: -2px;
}
@keyframes pm-spin { to { transform: rotate(360deg); } }
/* ─── RESPONSIVE ─── */
@media (max-width: 480px) {
#pm-kalkulator { padding: 16px 12px 32px; }
.pm-km-block { padding: 16px 16px; }
.pm-card-body { padding: 14px 14px 16px; }
.pm-results table { font-size: 14px; }
.pm-results thead th, .pm-results tbody td { padding: 9px 10px; }
.pm-leadgen { padding: 18px 16px 20px; }
.pm-field input, .pm-field select { font-size: 16px; padding: 10px 12px; }
.pm-field label { font-size: 12px; }
.pm-field .pm-field-note { font-size: 12px; }
.pm-km-field input { font-size: 26px; }
.pm-km-field label { font-size: 13px; }
.pm-km-field .unit { font-size: 12px; }
.pm-card-header-text h4 { font-size: 15px; }
.pm-savings-label { font-size: 13px; }
}
</style>
</head>
<body>
<div id=”pm-kalkulator”>
<header class=”pm-header”>
<div class=”pm-header-badges”>
<div class=”pm-badge”>⚡ Kalkulator realnih stroškov</div>
<div class=”pm-update-meta”>📅 Posodobljeno: november 2026 (subvencije Borzen in omrežnina)</div>
</div>
<h2>Elektrika vs. Dizel / Bencin</h2>
<p>Brez olepševanja. Vnesi svoje podatke in v 30 sekundah izvedi, katera možnost je cenejša zate.</p>
</header>
<div class=”pm-data-status” id=”pm-status”>
<span class=”dot”></span>
<span id=”pm-status-text”><span class=”pm-spinner”></span> Nalagam cene iz baze…</span>
</div>
<!– KM INPUT –>
<section class=”pm-km-block”>
<h3>📍 Vaša mobilnost</h3>
<p style=”font-size:14px;color:#CBD5E1;margin-bottom:14px;line-height:1.7;”>
Vnesite dnevne ali mesečne kilometre, porabo trenutnega vozila, ocenjene stroške servisa in izberite ponudnika elektrike — kalkulator sproti izračuna primerjavo.
</p>
<div class=”pm-km-row”>
<div class=”pm-km-field”>
<label for=”km-daily”>Dnevno</label>
<input type=”number” id=”km-daily” value=”50″ min=”1″ max=”999″ inputmode=”numeric”>
<div class=”unit”>km / dan</div>
</div>
<div class=”pm-km-field”>
<label for=”km-monthly”>Mesečno</label>
<input type=”number” id=”km-monthly” value=”1500″ min=”1″ max=”30000″ inputmode=”numeric”>
<div class=”unit”>km / mesec</div>
</div>
</div>
</section>
<!– CARDS –>
<div class=”pm-cards-grid”>
<!– ICE CARD –>
<div class=”pm-card pm-card-ice”>
<div class=”pm-card-header”>
<div class=”pm-card-icon”>⛽️</div>
<div class=”pm-card-header-text”>
<h4>Vaše trenutno vozilo</h4>
<span>Motor z notranjim zgorevanjem</span>
</div>
</div>
<div class=”pm-card-body”>
<div class=”pm-field”>
<label for=”ice-fuel-type”>Vrsta goriva</label>
<select id=”ice-fuel-type”>
<option value=”diesel” selected>⚡ Dizel</option>
<option value=”bencin”>⛽ Bencin 95</option>
</select>
</div>
<div class=”pm-field-row”>
<div class=”pm-field”>
<label for=”ice-consumption”>Poraba</label>
<input type=”number” id=”ice-consumption” value=”6.0″ min=”3″ max=”25″ step=”0.1″ inputmode=”decimal”>
<div class=”pm-field-note”>l / 100 km</div>
</div>
<div class=”pm-field”>
<label for=”ice-fuel-price”>Cena goriva</label>
<input type=”number” id=”ice-fuel-price” value=”1.734″ min=”0.5″ max=”4″ step=”0.001″ inputmode=”decimal”>
<div class=”pm-field-note”>€ / liter</div>
</div>
</div>
<div class=”pm-field”>
<label for=”ice-service”>Letni servis</label>
<input type=”number” id=”ice-service” value=”150″ min=”0″ max=”5000″ step=”10″ inputmode=”numeric”>
<div class=”pm-field-note”>€ / leto (povpr. pri popoldancu)</div>
</div>
<div class=”pm-field”>
<label for=”ice-cestnina”>Letna cestnina</label>
<input type=”number” id=”ice-cestnina” value=”150″ min=”0″ max=”1000″ step=”10″ inputmode=”numeric”>
<div class=”pm-field-note”>€ / leto</div>
</div>
</div>
</div>
<!– EV CARD –>
<div class=”pm-card pm-card-ev”>
<div class=”pm-card-header”>
<div class=”pm-card-icon”>⚡</div>
<div class=”pm-card-header-text”>
<h4>Električno vozilo</h4>
<span>Nočno polnjenje (Blok 4 / Blok 3)</span>
</div>
</div>
<div class=”pm-card-body”>
<div class=”pm-field”>
<label for=”ev-provider”>Ponudnik elektrike</label>
<select id=”ev-provider”>
<option value=”GEN-I” selected>GEN-I</option>
<option value=”Petrol”>Petrol</option>
<option value=”ECE”>ECE</option>
<option value=”Energija Plus”>Energija Plus</option>
<option value=”Elektro energija”>Elektro energija</option>
</select>
</div>
<div class=”pm-field-row”>
<div class=”pm-field”>
<label for=”ev-consumption”>Poraba</label>
<input type=”number” id=”ev-consumption” value=”18.0″ min=”8″ max=”35″ step=”0.5″ inputmode=”decimal”>
<div class=”pm-field-note”>kWh / 100 km</div>
</div>
<div class=”pm-field”>
<label for=”ev-price”>Cena elektrike</label>
<input type=”number” id=”ev-price” value=”0.1469″ min=”0.05″ max=”0.50″ step=”0.0001″ inputmode=”decimal”>
<div class=”pm-field-note”>MT + nočna omrežnina (Blok 4 / 3)</div>
</div>
</div>
<div class=”pm-field”>
<label for=”ev-service”>Letni servis</label>
<input type=”number” id=”ev-service” value=”50″ min=”0″ max=”2000″ step=”10″ inputmode=”numeric”>
<div class=”pm-field-note”>€ / leto (EV ima manj vzdrž.)</div>
</div>
<div class=”pm-field”>
<label for=”ev-cestnina”>Letna cestnina</label>
<input type=”number” id=”ev-cestnina” value=”62″ min=”0″ max=”500″ step=”1″ inputmode=”numeric”>
<div class=”pm-field-note”>€ / leto — od 1.1.2025: 43 € (vozila ≤1.750 kg) / 62 € (vozila >1.750 kg)</div>
</div>
</div>
</div>
</div><!– /cards-grid –>
<!– RESULTS TABLE –>
<div class=”pm-results”>
<div class=”pm-results-header”>
<span>📊</span>
<h3>Primerjava stroškov</h3>
</div>
<table>
<thead>
<tr>
<th>Obdobje</th>
<th>⛽ ICE / Dizel</th>
<th>⚡ Električno</th>
<th>Razlika</th>
</tr>
</thead>
<tbody>
<tr>
<td>Na dan</td>
<td class=”td-ice” id=”res-ice-day”>—</td>
<td class=”td-ev” id=”res-ev-day”>—</td>
<td id=”res-diff-day”>—</td>
</tr>
<tr>
<td>Na mesec</td>
<td class=”td-ice” id=”res-ice-month”>—</td>
<td class=”td-ev” id=”res-ev-month”>—</td>
<td id=”res-diff-month”>—</td>
</tr>
<tr>
<td>Na leto (skupaj)</td>
<td class=”td-ice” id=”res-ice-year”>—</td>
<td class=”td-ev” id=”res-ev-year”>—</td>
<td id=”res-diff-year”>—</td>
</tr>
</tbody>
</table>
</div>
<!– SAVINGS BOX –>
<div class=”pm-savings-box positive” id=”pm-savings-box”>
<div class=”pm-savings-label” id=”savings-label”>Vaš letni prihranek z EV</div>
<div class=”pm-savings-amount” id=”savings-amount”>0 €</div>
<div class=”pm-savings-sub”>
<span id=”savings-sub-text”>Izračunaj zgoraj ↑</span>
<span class=”pm-five-year” id=”savings-5y” style=”display:none;”></span>
</div>
</div>
<!– SMART TIPS –>
<div id=”pm-tips-panel” style=”margin-bottom:16px;display:none;”></div>
<!– LEAD GEN –>
<div class=”pm-leadgen” id=”pm-leadgen”>
<div class=”pm-leadgen-top”>
<div class=”pm-leadgen-icon”>🔔</div>
<div>
<h3>Pošlji mi moj izračun</h3>
<p>Pošljemo ti rezultat tega izračuna na e-mail, da ga imaš pri roki.</p>
</div>
</div>
<div class=”pm-summary-preview” id=”pm-calc-summary”>
Vnesi kilometre in podatke o vozilu za pregled izračuna.
</div>
<div class=”pm-form-row”>
<div class=”pm-form-group”>
<label for=”lead-name”>Ime</label>
<input type=”text” id=”lead-name” placeholder=”Janez Novak” autocomplete=”given-name”>
</div>
<div class=”pm-form-group”>
<label for=”lead-email”>E-mail</label>
<input type=”email” id=”lead-email” placeholder=”janez@primer.si” autocomplete=”email”>
</div>
</div>
<label class=”pm-gdpr-label”>
<input type=”checkbox” id=”lead-gdpr”>
<span>Strinjam se z obdelavo osebnih podatkov za namen pošiljanja izračuna na e-mail. <a href=”/zasebnost” target=”_blank”>Politika zasebnosti →</a> <strong style=”color:var(–danger);”>*</strong></span>
</label>
<label class=”pm-gdpr-label” style=”margin-bottom:18px;”>
<input type=”checkbox” id=”lead-gdpr-marketing”>
<span>Želim prejemati novosti, teste in vsebine s portala Pametna Mobilnost. <span style=”color:var(–text-light);font-size:11px;”>(neobvezno — odjavite se kadarkoli)</span></span>
</label>
<button class=”pm-btn-submit” id=”pm-submit-btn” onclick=”window.pmPosljiIzracun()”>
<span id=”pm-btn-text”>Pošlji mi izračun</span>
<span class=”btn-arrow” id=”pm-btn-arrow”>→</span>
</button>
<div class=”pm-form-msg” id=”pm-form-msg”></div>
</div>
<p class=”pm-disclaimer”>
* Izračun je informativen in temelji na vnesenih podatkih ter trenutnih cenah iz baze. Stroški servisiranja, zavarovanja in polnjenja se razlikujejo glede na model, starost in način vožnje. Cene elektrike pri nočnem polnjenju (Blok 4 / Blok 3) so povprečne vrednosti vključno z omrežnino in DDV. Od 1. 1. 2025 električna vozila plačujejo letno cestnino: 43 € (masa ≤1.750 kg) ali 62 € (masa >1.750 kg). CO₂ izračun temelji na povprečni emisiji slovenskega elektroenergetskega sistema (0,24 kg/kWh, vir: ARSO).
</p>
</div><!– /#pm-kalkulator –>
<script>
(function() {
‘use strict’;
/* ─── STATE ─── */
var state = {
pricesLoaded: false,
data: {
goriva: { diesel: 1.734, bencin: 1.683 },
elektrika: {
‘GEN-I’: { blok4: 0.1469 },
‘Petrol’: { blok4: 0.1512 },
‘ECE’: { blok4: 0.1488 },
‘Energija Plus’: { blok4: 0.1503 },
‘Elektro energija’: { blok4: 0.1441 }
}
},
results: {
iceDay: 0, iceMonth: 0, iceYear: 0,
evDay: 0, evMonth: 0, evYear: 0,
annualSaving: 0
}
};
/* ─── DOM READY ─── */
function init() {
bindEvents();
loadPrices();
}
if (document.readyState === ‘loading’) {
document.addEventListener(‘DOMContentLoaded’, init);
} else {
init();
}
/* ─── FETCH PRICES ─── */
function loadPrices() {
/* Poskusi WordPress REST endpoint, fallback na statični JSON */
var endpoints = [
‘/wp-json/pm/v1/cene’,
‘/podatki.json’
];
function tryNext( index ) {
if ( index >= endpoints.length ) {
setStatus(‘error’, ‘● Privzete cene (brez povezave)’);
syncPricesToUI();
recalc();
return;
}
fetch( endpoints[index] )
.then(function(r) {
if (!r.ok) throw new Error(‘HTTP ‘ + r.status);
return r.json();
})
.then(function(json) {
if (json && json.goriva) state.data.goriva = json.goriva;
/* Normalizacija elektrike — usklajenost med Python (stari format)
in Admin PHP (novi format).
Python piše: { “geni”: {mt, vt, et}, “eplus”: {…}, … }
Kalkulator pričakuje: { “GEN-I”: {blok4}, “Energija Plus”: {…}, … }
*/
if (json && json.elektrika) {
var raw = json.elektrika;
var normalized = {};
var keyMap = {
‘geni’: ‘GEN-I’,
‘petrol’: ‘Petrol’,
‘ece’: ‘ECE’,
‘eplus’: ‘Energija Plus’,
‘elektroenergija’: ‘Elektro energija’
};
/* Omrežnina Blok 4 z DDV (iz JSON ali privzeto) */
var omr = json.omreznina || {};
var bloki = omr.bloki || {};
var ddvF = omr.ddv_faktor || 1.22;
var omrBlok4 = (bloki.blok4 || 0.01805) * ddvF;
Object.keys(raw).forEach(function(k) {
var entry = raw[k];
var displayKey = keyMap[k.toLowerCase()] || k;
var blok4Val;
if (entry.blok4) {
/* Novi admin format — že vključuje omrežnino */
blok4Val = entry.blok4;
} else if (entry.mt) {
/* Python/ZPS format — mt je samo energija z DDV, doda omrežnino */
blok4Val = entry.mt + omrBlok4;
} else {
blok4Val = 0.1469;
}
normalized[displayKey] = { blok4: parseFloat(blok4Val.toFixed(4)) };
});
state.data.elektrika = normalized;
}
state.pricesLoaded = true;
/* Prikaži datum posodobitve */
var meta = json.meta || {};
var datumStr = ”;
if (meta.goriva_posodobljeno || meta.osvezeno) {
var rawDatum = meta.goriva_posodobljeno || meta.osvezeno;
var d = new Date(rawDatum);
datumStr = d.toLocaleDateString(‘sl-SI’, { day:’2-digit’, month:’2-digit’, year:’numeric’ });
}
var statusTxt = ‘● Cene goriv posodobljene’ + (datumStr ? ‘ ‘ + datumStr : ”) + ‘ • vir: energetika-portal.si’;
setStatus(‘loaded’, statusTxt);
/* Opozorilo za stare cene elektrike */
if (meta.elektrika_opozorilo) {
var warningEl = document.createElement(‘div’);
warningEl.style.cssText = ‘font-size:11px;color:var(–accent);text-align:center;margin-bottom:8px;’;
warningEl.innerHTML = ‘⚠️ Cene elektrike morda niso posodobljene (‘ + (meta.elektrika_dni_staro || ‘?’) + ‘ dni) — preverite ročno’;
var statusEl = document.getElementById(‘pm-status’);
if (statusEl && statusEl.parentNode) statusEl.parentNode.insertBefore(warningEl, statusEl.nextSibling);
}
syncPricesToUI();
recalc();
})
.catch(function() {
tryNext( index + 1 );
});
}
tryNext(0);
}
function setStatus(cls, html) {
var el = document.getElementById(‘pm-status’);
var txt = document.getElementById(‘pm-status-text’);
if (!el || !txt) return;
el.className = ‘pm-data-status ‘ + cls;
txt.innerHTML = html;
}
function syncPricesToUI() {
var fuelType = val(‘ice-fuel-type’);
var price = state.data.goriva[fuelType] || 1.734;
document.getElementById(‘ice-fuel-price’).value = price.toFixed(3);
updateEVPrice();
}
function updateEVPrice() {
var provider = val(‘ev-provider’);
var entry = state.data.elektrika[provider] || { blok4: 0.1469 };
var price = entry.blok4 || 0.1469;
var el = document.getElementById(‘ev-price’);
if (el) el.value = price.toFixed(4);
return price;
}
/* ─── BIND EVENTS ─── */
function bindEvents() {
var ids = [
‘km-daily’,’km-monthly’,
‘ice-fuel-type’,’ice-consumption’,’ice-fuel-price’,’ice-service’,’ice-cestnina’,
‘ev-provider’,’ev-consumption’,’ev-price’,’ev-service’,’ev-cestnina’
];
ids.forEach(function(id) {
var el = document.getElementById(id);
if (!el) return;
el.addEventListener(‘input’, function() {
if (id === ‘km-daily’) syncKm(‘daily’);
if (id === ‘km-monthly’) syncKm(‘monthly’);
if (id === ‘ice-fuel-type’) {
var price = state.data.goriva[val(‘ice-fuel-type’)] || 1.734;
document.getElementById(‘ice-fuel-price’).value = price.toFixed(3);
updateFuelLabel();
}
if (id === ‘ev-provider’) updateEVPrice();
recalc();
});
});
}
function updateFuelLabel() {
var th = document.querySelector(‘#pm-kalkulator thead th:nth-child(2)’);
if (!th) return;
var ft = val(‘ice-fuel-type’);
th.innerHTML = ft === ‘diesel’ ? ‘⛽ ICE / Dizel’ : ‘⛽ ICE / Bencin’;
}
function syncKm(source) {
var DAYS_PER_MONTH = 30.44;
if (source === ‘daily’) {
var d = parseFloat(document.getElementById(‘km-daily’).value) || 50;
document.getElementById(‘km-monthly’).value = Math.round(d * DAYS_PER_MONTH);
} else {
var m = parseFloat(document.getElementById(‘km-monthly’).value) || 1500;
document.getElementById(‘km-daily’).value = Math.round(m / DAYS_PER_MONTH);
}
}
/* ─── HELPERS ─── */
function val(id) {
var el = document.getElementById(id);
if (!el) return ”;
return el.tagName === ‘SELECT’ ? el.value : el.value;
}
function num(id, fallback) {
var v = parseFloat(val(id));
return isNaN(v) ? (fallback || 0) : v;
}
function fmt(n, decimals) {
if (typeof decimals === ‘undefined’) decimals = 2;
return n.toFixed(decimals).replace(‘.’, ‘,’) + ‘ €’;
}
function setEl(id, html) {
var el = document.getElementById(id);
if (el) el.innerHTML = html;
}
/* ─── MAIN RECALC ─── */
function recalc() {
var kmMonthly = num(‘km-monthly’, 1500);
var kmDaily = kmMonthly / 30.4375;
var kmYearly = kmMonthly * 12;
/* ICE energy cost */
var iceCons = num(‘ice-consumption’, 6.0); /* l/100km */
var icePrice = num(‘ice-fuel-price’, 1.734); /* €/l */
var iceEnergyPerKm = (iceCons / 100) * icePrice;
var iceEnergyDay = iceEnergyPerKm * kmDaily;
var iceEnergyMonth = iceEnergyPerKm * kmMonthly;
var iceEnergyYear = iceEnergyPerKm * kmYearly;
var iceService = num(‘ice-service’, 150);
var iceCestnina = num(‘ice-cestnina’, 150);
var iceFixedDaily = (iceService + iceCestnina) / 365;
var iceDay = iceEnergyDay + iceFixedDaily;
var iceMonth = iceEnergyMonth + (iceService + iceCestnina) / 12;
var iceYear = iceEnergyYear + iceService + iceCestnina;
/* EV energy cost */
var evCons = num(‘ev-consumption’, 18.0); /* kWh/100km */
var evPrice = num(‘ev-price’, 0.1469); /* €/kWh — user-editable */
var evEnergyPerKm = (evCons / 100) * evPrice;
var evEnergyDay = evEnergyPerKm * kmDaily;
var evEnergyMonth = evEnergyPerKm * kmMonthly;
var evEnergyYear = evEnergyPerKm * kmYearly;
var evService = num(‘ev-service’, 50);
var evCestnina = num(‘ev-cestnina’, 62);
var evFixedDaily = (evService + evCestnina) / 365;
var evDay = evEnergyDay + evFixedDaily;
var evMonth = evEnergyMonth + (evService + evCestnina) / 12;
var evYear = evEnergyYear + evService + evCestnina;
/* Diff */
var annualSaving = iceYear – evYear;
/* CO2 prihranek (dizel: 2.64 kg CO2/l, elektrika SLO mešanica: ~0.24 kg CO2/kWh) */
var co2IceYear = (iceCons / 100) * kmYearly * 2.64;
var co2EvYear = (evCons / 100) * kmYearly * 0.24;
var co2Saving = Math.round(co2IceYear – co2EvYear);
state.results = { iceDay, iceMonth, iceYear, evDay, evMonth, evYear, annualSaving, co2Saving, kmYearly, evCons, iceCons, evPrice };
/* ─── UPDATE TABLE ─── */
setEl(‘res-ice-day’, fmt(iceDay));
setEl(‘res-ev-day’, fmt(evDay));
setEl(‘res-ice-month’, fmt(iceMonth));
setEl(‘res-ev-month’, fmt(evMonth));
setEl(‘res-ice-year’, fmt(iceYear));
setEl(‘res-ev-year’, fmt(evYear));
var diffDay = iceDay – evDay;
var diffMonth = iceMonth – evMonth;
var diffYear = iceYear – evYear;
function colorDiff(v, id) {
var el = document.getElementById(id);
if (!el) return;
var sign = v > 0 ? ‘+’ : ”;
el.innerHTML = ‘<span style=”color:’ + (v >= 0 ? ‘var(–primary)’ : ‘var(–danger)’) + ‘;font-weight:600;”>’ + sign + fmt(v) + ‘</span>’;
}
colorDiff(diffDay, ‘res-diff-day’);
colorDiff(diffMonth, ‘res-diff-month’);
colorDiff(diffYear, ‘res-diff-year’);
/* ─── SAVINGS BOX ─── */
var box = document.getElementById(‘pm-savings-box’);
var isPositive = annualSaving >= 0;
if (box) {
box.className = ‘pm-savings-box ‘ + (isPositive ? ‘positive’ : ‘negative’);
}
setEl(‘savings-label’, isPositive ? ‘Vaš letni prihranek z EV’ : ‘EV je trenutno dražji za’);
var absVal = Math.abs(annualSaving);
setEl(‘savings-amount’, fmt(absVal, 0));
var sub5El = document.getElementById(‘savings-5y’);
if (sub5El) {
sub5El.style.display = ‘inline-block’;
var sign5 = isPositive ? ‘Prihranite’ : ‘Doplačate’;
sub5El.textContent = sign5 + ‘ v 5 letih: ‘ + fmt(absVal * 5, 0);
}
var subTxt = isPositive
? ‘pri ‘ + Math.round(kmYearly).toLocaleString(‘sl-SI’) + ‘ km / leto’
: ‘Gorivo je v tem scenariju ugodnejše — preverite EV ponudbo za vaše km’;
setEl(‘savings-sub-text’, subTxt);
/* ─── SMART TIPS ─── */
updateTips({ kmYearly, annualSaving, evCons, iceCons, evPrice, evYear, iceYear, co2Saving });
/* ─── SUMMARY PREVIEW ─── */
var provider = val(‘ev-provider’);
var fuelLabel = val(‘ice-fuel-type’) === ‘diesel’ ? ‘Dizel’ : ‘Bencin 95’;
var summaryHtml =
‘<strong>’ + Math.round(kmYearly).toLocaleString(‘sl-SI’) + ‘ km/leto</strong> • ‘ +
‘ICE (‘ + fuelLabel + ‘, ‘ + iceCons.toFixed(1) + ‘l/100km): <strong>’ + fmt(iceYear, 0) + ‘/leto</strong> • ‘ +
‘EV (‘ + provider + ‘, ‘ + evCons.toFixed(1) + ‘kWh/100km): <strong>’ + fmt(evYear, 0) + ‘/leto</strong> • ‘ +
(isPositive ? ‘Letni prihranek: ‘ : ‘Razlika: ‘) + ‘<strong style=”color:’ + (isPositive ? ‘var(–primary-dark)’ : ‘var(–danger)’) + ‘;”>’ + fmt(annualSaving, 0) + ‘</strong>’;
setEl(‘pm-calc-summary’, summaryHtml);
}
/* ─── SMART TIPS ─── */
function updateTips(d) {
var panel = document.getElementById(‘pm-tips-panel’);
if (!panel) return;
var tips = [];
/* CO2 tip — vedno */
if (d.co2Saving > 0) {
tips.push({
icon: ‘🌿’,
color: ‘#0A7C45’,
bg: ‘#E6F5EE’,
border: ‘#C3E9D4’,
title: ‘Okoljski prihranek’,
text: ‘Z EV bi letno prihranili <strong>’ + d.co2Saving.toLocaleString(‘sl-SI’) + ‘ kg CO₂</strong> — to je ‘ + Math.round(d.co2Saving / 120) + ‘ dreves, ki letno absorbirajo toliko CO₂.’
});
}
/* Km benchmark */
if (d.kmYearly < 10000) {
tips.push({
icon: ‘📊’,
color: ‘#E07B1A’,
bg: ‘#FDF0E3’,
border: ‘#F8D5A8’,
title: ‘Nizka kilometrina’,
text: ‘Prevozite <strong>’ + Math.round(d.kmYearly / 1000) + ‘.000 km/leto</strong> — manj od slovenskega povprečja (14.000–16.000 km). Pri nizki kilometrini se EV dolgoročno bolj splača kot kratkoročno. Prihranki pri gorivu rastejo sorazmerno s km.’
});
} else if (d.kmYearly > 25000) {
tips.push({
icon: ‘🚀’,
color: ‘#0A7C45’,
bg: ‘#E6F5EE’,
border: ‘#C3E9D4’,
title: ‘Visoka kilometrina — EV je idealna izbira’,
text: ‘Prevozite <strong>’ + Math.round(d.kmYearly / 1000) + ‘.000 km/leto</strong> — skoraj 2× slovensko povprečje (14.000–16.000 km). Pri takšni kilometrini se vsak cent na kWh pozna. Vaš prihranek je eden višjih, ki jih vidimo.’
});
}
/* Poraba EV — primerjava */
if (d.evCons > 22) {
tips.push({
icon: ‘⚡’,
color: ‘#7C3AED’,
bg: ‘#F5F3FF’,
border: ‘#DDD6FE’,
title: ‘Visoka poraba EV’,
text: ‘Vnesena poraba <strong>’ + d.evCons.toFixed(1) + ‘ kWh/100km</strong> je nad povprečjem (18–20 kWh). Tipično za SUV ali zimsko vožnjo. Poleti ali pri mestni vožnji bo poraba nižja.’
});
} else if (d.evCons < 15) {
tips.push({
icon: ‘⚡’,
color: ‘#0A7C45’,
bg: ‘#E6F5EE’,
border: ‘#C3E9D4’,
title: ‘Varčna poraba EV’,
text: ‘Poraba <strong>’ + d.evCons.toFixed(1) + ‘ kWh/100km</strong> je odlična — pod slovenskim povprečjem. Tipično za mestne in kompaktne modele (BYD Dolphin Surf, Leapmotor T03, Dacia Spring).’
});
}
/* Polnjenje tip — glede na km */
var dnevniKm = d.kmYearly / 365;
var kwhNaDan = (d.evCons / 100) * dnevniKm;
var urNocno5kw = kwhNaDan / 5; /* koliko ur pri 5 kW */
var urNocno11kw = kwhNaDan / 11; /* koliko ur pri 11 kW */
if (kwhNaDan <= 40) {
var zadostuje = urNocno5kw <= 8;
tips.push({
icon: ‘🔌’,
color: ‘#0369A1’,
bg: ‘#F0F9FF’,
border: ‘#BAE6FD’,
title: zadostuje ? ‘Nočno polnjenje pri 3,7–5,5 kW zadostuje’ : ‘Potrebujete malo večjo moč polnilca’,
text: ‘Za vaših <strong>’ + Math.round(dnevniKm) + ‘ km/dan</strong> potrebujete ~<strong>’ + kwhNaDan.toFixed(1) + ‘ kWh/dan</strong>. ‘
+ ‘Pri polnjenju od 22:00 do 06:00 (8 ur) to napolni ‘
+ (zadostuje
? ‘že vtičnica <strong>CEE 16A (3,7 kW)</strong> v <strong>’ + urNocno5kw.toFixed(1) + ‘ urah</strong> — wallbox ni nujno potreben.’
: ‘polnilec <strong>5,5 kW (CEE 3-faz. 10A)</strong> v <strong>’ + (kwhNaDan / 5.5).toFixed(1) + ‘ urah</strong>.’)
+ ‘<br><br>💡 <strong>Priporočamo moč do ~5 kW</strong> — tako ostanete znotraj tipične gospodinjske dogovorjene moči in se izognete obračunavanju presežnih konic (še posebej v zimski sezoni med novembrom in februarjem). ‘
+ ‘Če imate wallbox 11 kW, ga v aplikaciji omejite na <strong>6 A ali 10 A</strong>.’
+ ‘<br><br>ℹ️ <strong>Novost s 1. 1. 2027:</strong> Z novim letom bo nočno polnjenje (22:00–06:00) pozimi med tednom v <strong>Bloku 3</strong> (ob vikendih v Bloku 4, poleti v Bloku 4 in 5), ugodno pa postaja tudi dnevno okno med <strong>12:00 in 17:00</strong>.’
});
} else {
tips.push({
icon: ‘⚡’,
color: ‘#7C3AED’,
bg: ‘#F5F3FF’,
border: ‘#DDD6FE’,
title: ‘Visoka dnevna potreba — pazite na dogovorjeno moč’,
text: ‘Za vaših <strong>’ + Math.round(dnevniKm) + ‘ km/dan</strong> potrebujete ~<strong>’ + kwhNaDan.toFixed(1) + ‘ kWh/dan</strong>. ‘
+ ‘Pri 5 kW bi polnili <strong>’ + urNocno5kw.toFixed(1) + ‘ ur</strong>, pri 11 kW pa <strong>’ + urNocno11kw.toFixed(1) + ‘ ur</strong>.’
+ ‘<br><br>⚠️ Pri polnjenju nad <strong>5–6 kW</strong> preverite vašo <strong>dogovorjeno obračunsko moč</strong> v posameznem časovnem bloku (Blok 4 / s 1. 1. 2027 tudi Blok 3 pozimi med tednom) — presežki nad dogovorjeno močjo se zaračunavajo. ‘
+ ‘Nastavite polnilnico na moč, ki skupaj s porabo hiše ne preseže vaše omejitve.’
});
}
/* Subvencija tip — pri nakupu novega EV */
if (d.annualSaving > 500) {
tips.push({
icon: ‘💶’,
color: ‘#065C33’,
bg: ‘#DCFCE7’,
border: ‘#BBF7D0’,
title: ‘Subvencija Borzen in EKO bonusi (november 2026)’,
text: ‘Višina nepovratnih spodbud programa Borzen za električna vozila (kategorija M1):’
+ ‘<table style=”width:100%;border-collapse:collapse;margin:10px 0;font-size:12px;”>’
+ ‘<tr style=”background:rgba(10,124,69,0.08);”>’
+ ‘<td style=”padding:5px 8px;font-weight:600;color:#065C33;”>Cena vozila (z DDV)</td>’
+ ‘<td style=”padding:5px 8px;font-weight:700;color:#065C33;text-align:right;”>Subvencija</td>’
+ ‘</tr>’
+ ‘<tr style=”border-top:1px solid #C3E9D4;”>’
+ ‘<td style=”padding:5px 8px;color:#334155;”>Nova EV do 25.000 €</td>’
+ ‘<td style=”padding:5px 8px;font-weight:700;color:#0A7C45;text-align:right;”>7.800 €</td>’
+ ‘</tr>’
+ ‘<tr style=”border-top:1px solid #C3E9D4;”>’
+ ‘<td style=”padding:5px 8px;color:#334155;”>Nova EV 25.000 – 35.000 €</td>’
+ ‘<td style=”padding:5px 8px;font-weight:700;color:#0A7C45;text-align:right;”>7.200 €</td>’
+ ‘</tr>’
+ ‘<tr style=”border-top:1px solid #C3E9D4;”>’
+ ‘<td style=”padding:5px 8px;color:#334155;”>Nova EV 35.000 – 45.000 €</td>’
+ ‘<td style=”padding:5px 8px;font-weight:700;color:#0A7C45;text-align:right;”>6.500 €</td>’
+ ‘</tr>’
+ ‘<tr style=”border-top:1px solid #C3E9D4;”>’
+ ‘<td style=”padding:5px 8px;color:#334155;”>Rabljena EV (do 45.000 €)</td>’
+ ‘<td style=”padding:5px 8px;font-weight:700;color:#0A7C45;text-align:right;”>3.000 €</td>’
+ ‘</tr>’
+ ‘<tr style=”border-top:1px solid #C3E9D4;opacity:0.75;”>’
+ ‘<td style=”padding:5px 8px;color:#334155;text-decoration:line-through;”>45.000 – 65.000 € (fizične osebe)</td>’
+ ‘<td style=”padding:5px 8px;font-weight:600;color:#C0392B;text-align:right;”>ukinjeno 1. 9. 2026</td>’
+ ‘</tr>’
+ ‘</table>’
+ ‘<div style=”background:rgba(224,123,26,0.12);border-left:3px solid #E07B1A;padding:8px 10px;border-radius:0 4px 4px 0;font-size:12px;color:#92400E;margin-bottom:8px;”>’
+ ‘⚠️ <strong>Stanje 5. 11. 2026:</strong> Javni poziv JP SUB-EV26 se je zaradi porabe sredstev zaključil. V pripravi je nov razpis ter subvencionirane obrestne mere Eko sklada, v vmesnem obdobju pa številni uvozniki ponujajo <strong>lastne EKO bonuse na vozila iz zaloge</strong>.’
+ ‘</div>’
+ ‘<a href=”https://borzen.si/sl-si/podpore-za-mobilnost/subvencije-za-nakup-elektricnih-vozil” target=”_blank” style=”color:#0A7C45;font-weight:600;”>Preveri stanje razpisov na borzen.si →</a>’
});
}
/* Cena goriva visoka */
if (d.iceCons > 7 && d.kmYearly > 12000) {
tips.push({
icon: ‘⛽’,
color: ‘#B45309’,
bg: ‘#FFFBEB’,
border: ‘#FDE68A’,
title: ‘Visoka poraba in kilometrina — kritična kombinacija’,
text: ‘Poraba <strong>’ + d.iceCons.toFixed(1) + ‘ l/100km</strong> pri <strong>’ + Math.round(d.kmYearly / 1000) + ‘.000 km/leto</strong> pomeni, da za gorivo letno zapravite ‘ + Math.round((d.iceCons / 100) * d.kmYearly * num(‘ice-fuel-price’, 1.734)).toLocaleString(‘sl-SI’) + ‘ €. To je eden najpomembnejših razlogov za prehod na EV.’
});
}
/* ZPS podatek */
tips.push({
icon: ‘📋’,
color: ‘#475569’,
bg: ‘#F8FAFC’,
border: ‘#E2E8F0’,
title: ‘Kaj pravi analiza ZPS v praksi (2025/2026)’,
text: ‘Po analizi Zveze potrošnikov Slovenije (ZPS) so <strong>rabljeni EV cenejši</strong> od bencinskih za <strong>262–849 € letno</strong> pri skupnih stroških lastništva.’
+ ‘<br><br>Napoved ZPS za leto 2026 se je s prihodom dostopnih modelov (pod 25.000 €) že potrdila v praksi: skupni strošek nakupa in 5-letne vožnje novega električnega vozila je <strong>že izenačen s primerljivim bencincem</strong>, vsako nadaljnje leto pa prinaša čisti prihranek pri gorivu in servisu.’
+ ‘<br><br><a href=”https://www.zps.si/nasveti-in-vodniki/elektricni-avtomobili-na-prelomni-tocki-2025-04-03″ target=”_blank” style=”color:#0A7C45;font-weight:600;”>Preberi celotno analizo ZPS →</a>’
});
/* Render */
var html = ‘<div style=”display:flex;flex-direction:column;gap:10px;”>’;
tips.forEach(function(t) {
html += ‘<div style=”background:’ + t.bg + ‘;border:1.5px solid ‘ + t.border + ‘;border-radius:var(–radius-md);padding:14px 16px;display:flex;gap:12px;align-items:flex-start;”>’
+ ‘<span style=”font-size:20px;flex-shrink:0;line-height:1.4;”>’ + t.icon + ‘</span>’
+ ‘<div><div style=”font-size:12px;font-weight:700;color:’ + t.color + ‘;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:3px;”>’ + t.title + ‘</div>’
+ ‘<div style=”font-size:13px;color:var(–text-muted);line-height:1.6;”>’ + t.text + ‘</div></div>’
+ ‘</div>’;
});
html += ‘</div>’;
panel.innerHTML = html;
panel.style.display = ‘block’;
}
/* ─── LEAD GEN SUBMIT ─── */
window.pmPosljiIzracun = function() {
var name = (document.getElementById(‘lead-name’) || {}).value || ”;
var email = (document.getElementById(‘lead-email’) || {}).value || ”;
var gdpr = (document.getElementById(‘lead-gdpr’) || {}).checked;
var gdpr_marketing = (document.getElementById(‘lead-gdpr-marketing’) || {}).checked;
var msgEl = document.getElementById(‘pm-form-msg’);
var btnEl = document.getElementById(‘pm-submit-btn’);
var btnTxt = document.getElementById(‘pm-btn-text’);
var btnArrow = document.getElementById(‘pm-btn-arrow’);
if (!name.trim()) { showMsg(‘error’, ‘Prosimo, vnesi svoje ime.’); return; }
if (!email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) { showMsg(‘error’, ‘Prosimo, vnesi veljaven e-mail naslov.’); return; }
if (!gdpr) { showMsg(‘error’, ‘Za pošiljanje je potrebno strinjanje s politiko zasebnosti.’); return; }
if (btnEl) { btnEl.disabled = true; }
if (btnTxt) { btnTxt.innerHTML = ‘<span class=”pm-spinner”></span> Pošiljam…’; }
if (btnArrow) { btnArrow.style.display = ‘none’; }
if (msgEl) { msgEl.className = ‘pm-form-msg’; msgEl.style.display = ‘none’; }
var r = state.results;
var payload = {
name: name.trim(),
email: email.trim(),
gdpr: true,
gdpr_marketing: gdpr_marketing,
km_monthly: num(‘km-monthly’, 1500),
km_yearly: Math.round(num(‘km-monthly’, 1500) * 12),
fuel_type: val(‘ice-fuel-type’),
ice_consumption: num(‘ice-consumption’, 6.0),
ice_fuel_price: num(‘ice-fuel-price’, 1.734),
ice_service: num(‘ice-service’, 150),
ice_cestnina: num(‘ice-cestnina’, 150),
ev_provider: val(‘ev-provider’),
ev_consumption: num(‘ev-consumption’, 18.0),
ev_service: num(‘ev-service’, 50),
ev_cestnina: num(‘ev-cestnina’, 62),
ev_price: num(‘ev-price’, 0.1469),
ice_year_total: Math.round(r.iceYear * 100) / 100,
ev_year_total: Math.round(r.evYear * 100) / 100,
annual_saving: Math.round(r.annualSaving * 100) / 100,
five_year_saving: Math.round(r.annualSaving * 5 * 100) / 100,
co2_saving_kg: r.co2Saving || 0,
source: ‘kalkulator-ev-vs-ice’,
timestamp: new Date().toISOString()
};
fetch(‘/pm-poslji-stroskovni.php’, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify(payload)
})
.then(function(res) {
if (!res.ok) throw new Error(‘HTTP ‘ + res.status);
return res.json().catch(function() { return {}; });
})
.then(function() {
showMsg(‘success’, ‘✓ Odlično! Izračun smo ti poslali na e-mail.’);
if (btnTxt) btnTxt.innerHTML = ‘Poslano ✓’;
if (btnEl) { btnEl.style.background = ‘var(–primary-dark)’; }
})
.catch(function(err) {
showMsg(‘error’, ‘Prišlo je do napake. Poskusite znova ali nas kontaktirajte direktno.’);
if (btnEl) { btnEl.disabled = false; }
if (btnTxt) btnTxt.innerHTML = ‘Pošlji mi izračun’;
if (btnArrow) btnArrow.style.display = ”;
console.warn(‘PM submit error:’, err);
});
};
function showMsg(type, html) {
var el = document.getElementById(‘pm-form-msg’);
if (!el) return;
el.className = ‘pm-form-msg ‘ + type;
el.innerHTML = html;
}
})();
</script>
</body>
</html>
