Kreditni kalkulator<\/title>\r\n <style>\r\n :root{\r\n --bg: #f8fafc; \/* page background *\/\r\n --card: #ffffff; \/* card background *\/\r\n --ink: #0f172a; \/* primary text *\/\r\n --muted: #475569; \/* secondary text *\/\r\n --line: #e2e8f0; \/* borders *\/\r\n --brand: #4f46e5; \/* indigo *\/\r\n --brand-2: #7c3aed; \/* violet *\/\r\n --radius-xl: 18px;\r\n --radius-lg: 14px;\r\n --shadow-1: 0 6px 24px rgba(15, 23, 42, .06);\r\n --shadow-2: 0 10px 30px rgba(79, 70, 229, .25);\r\n }\r\n *{box-sizing:border-box}\r\n body{margin:0;background:linear-gradient(145deg,var(--bg),#eef2ff);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;color:var(--ink)}\r\n .container{max-width:1120px;margin:0 auto;padding:20px 14px}\r\n h1{font-size:clamp(22px,2.8vw,36px);line-height:1.15;margin:0 0 10px}\r\n p.lead{color:var(--muted);max-width:820px;margin:6px 0 22px}\r\n\r\n .grid{display:grid;gap:18px}\r\n @media(min-width:960px){.grid{grid-template-columns:1fr 1fr}}\r\n\r\n .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-1);backdrop-filter:saturate(150%) blur(2px)}\r\n .card .body{padding:18px}\r\n\r\n .row{display:grid;grid-template-columns:1fr;gap:10px}\r\n .row.cols-3{grid-template-columns:repeat(3,1fr)}\r\n .row.cols-2{grid-template-columns:repeat(2,1fr)}\r\n @media(max-width:640px){.row.cols-3,.row.cols-2{grid-template-columns:1fr}}\r\n\r\n label{font-size:12px;color:var(--muted);display:block;margin-bottom:6px}\r\n input[type=\"number\"],select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);outline:none}\r\n input[type=\"number\"]:focus,select:focus{box-shadow:0 0 0 6px rgba(79,70,229,.12);border-color:var(--brand)}\r\n .range-wrap{display:grid;gap:8px}\r\n input[type=\"range\"]{width:100%}\r\n input[type=\"range\"]{appearance:none;height:6px;border-radius:999px;background:#e5e7eb;outline:none}\r\n input[type=\\\"range\\\"]::-webkit-slider-thumb{appearance:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:pointer}\r\n input[type=\\\"range\\\"]::-moz-range-thumb{width:24px;height:24px;border:none;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:pointer}\r\n\r\n .kpi{display:grid;gap:12px;grid-template-columns:1fr 1fr}\r\n @media(max-width:640px){.kpi{grid-template-columns:1fr}}\r\n .kpi .item{border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff}\r\n .kpi .item .label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}\r\n .kpi .item .value{font-size:22px;font-weight:700;margin-top:3px}\r\n .hint{font-size:12px;color:var(--muted)}\r\n\r\n .hero{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-2)}\r\n .hero .big{font-size:clamp(24px,4vw,42px);font-weight:800}\r\n .hero .meta{opacity:.9;margin-top:6px;font-size:13px}\r\n\r\n table{width:100%;border-collapse:collapse}\r\n thead th{font-size:12px;color:#475569;text-transform:uppercase;letter-spacing:.06em;text-align:left;background:#f8fafc}\r\n th,td{padding:10px;border-bottom:1px solid var(--line)}\r\n tr:hover td{background:#f9fafb}\r\n\r\n .toolbar{display:flex;gap:10px;align-items:center}\r\n .btn{border:none;background:#0f172a;color:#fff;padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:600}\r\n .btn:hover{background:#111827}\r\n\r\n .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\\\"container\\\" id=\\\"loan-app\\\" data-primary-currency=\\\"EUR\\\">\r\n <div class=\\\"grid\\\" role=\\\"region\\\" aria-label=\\\"Kreditni kalkulator\\\">\r\n \r\n <section class=\"card\" aria-labelledby=\"inputs-title\">\r\n <div class=\"body\">\r\n <h2 id=\"inputs-title\" class=\"sr-only\">Ulazni podaci<\/h2>\r\n <div class=\"row cols-3\">\r\n <div>\r\n <label for=\"currency\">Valuta<\/label>\r\n <select id=\"currency\" aria-label=\"Valuta\">\r\n <option value=\"EUR\" selected>EUR<\/option>\r\n <option value=\"RSD\">RSD<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label for=\"years\">Rok (godina)<\/label>\r\n <input id=\"years\" type=\"number\" min=\"1\" max=\"40\" step=\"1\" value=\"25\" \/>\r\n <\/div>\r\n <div>\r\n <label for=\"rate\">Kamatna stopa (% godi\u0161nje)<\/label>\r\n <input id=\"rate\" type=\"number\" min=\"0\" max=\"25\" step=\"0.01\" value=\"5.49\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"row\" style=\"margin-top:14px\">\r\n <div>\r\n <label for=\"price\">Cena nekretnine <span id=\"price-view\" class=\"hint\"><\/span><\/label>\r\n <div class=\"range-wrap\">\r\n <input id=\"price-range\" type=\"range\" min=\"10000\" max=\"500000\" step=\"1000\" value=\"150000\" \/>\r\n <input id=\"price\" type=\"number\" min=\"10000\" max=\"500000\" step=\"1000\" value=\"150000\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"row\" style=\"margin-top:14px\">\r\n <div>\r\n <label for=\"downPct\">U\u010de\u0161\u0107e (%) <span id=\"down-view\" class=\"hint\"><\/span><\/label>\r\n <div class=\"range-wrap\">\r\n <input id=\"downPct-range\" type=\"range\" min=\"0\" max=\"90\" step=\"1\" value=\"20\" \/>\r\n <input id=\"downPct\" type=\"number\" min=\"0\" max=\"90\" step=\"1\" value=\"20\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"row\" style=\"margin-top:14px\">\r\n <div>\r\n <label for=\"fees\">Dodatni tro\u0161kovi (% na iznos kredita) \u2013 opcionalno <span id=\"fees-view\" class=\"hint\"><\/span><\/label>\r\n <div class=\"range-wrap\">\r\n <input id=\"fees-range\" type=\"range\" min=\"0\" max=\"5\" step=\"0.1\" value=\"0\" \/>\r\n <input id=\"fees\" type=\"number\" min=\"0\" max=\"5\" step=\"0.1\" value=\"0\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"kpi\" style=\"margin-top:16px\">\r\n <div class=\"item\">\r\n <div class=\"label\">U\u010de\u0161\u0107e<\/div>\r\n <div id=\"kpi-down\" class=\"value\">\u2014<\/div>\r\n <div id=\"kpi-downpct\" class=\"hint\">\u2014<\/div>\r\n <\/div>\r\n <div class=\"item\">\r\n <div class=\"label\">Iznos kredita<\/div>\r\n <div id=\"kpi-principal\" class=\"value\">\u2014<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"card\" aria-labelledby=\"outputs-title\">\r\n <div class=\"body\">\r\n <h2 id=\"outputs-title\" class=\"sr-only\">Rezultati<\/h2>\r\n <div class=\"hero\">\r\n <div class=\"big\" id=\"monthly\">\u2014<\/div>\r\n <div class=\"meta\" id=\"meta\">\u2014<\/div>\r\n <\/div>\r\n\r\n <div class=\"kpi\" style=\"margin-top:16px\">\r\n <div class=\"item\">\r\n <div class=\"label\">Ukupno pla\u0107eno<\/div>\r\n <div id=\"kpi-total\" class=\"value\">\u2014<\/div>\r\n <div id=\"kpi-fees\" class=\"hint\"><\/div>\r\n <\/div>\r\n <div class=\"item\">\r\n <div class=\"label\">Ukupna kamata<\/div>\r\n <div id=\"kpi-interest\" class=\"value\">\u2014<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\\\"toolbar\\\" style=\\\"margin-top:12px;margin-bottom:6px;justify-content:space-between\\\">\r\n <h3 style=\"margin:0;font-size:16px\">Amortizacija \u2013 prvih 12 meseci<\/h3>\r\n <button class=\"btn\" id=\"download-csv\">Preuzmi CSV<\/button>\r\n <\/div>\r\n <div style=\"overflow:auto;border:1px solid var(--line);border-radius:14px\">\r\n <table aria-label=\"Amortizaciona tabela \u2013 prvih 12 meseci\">\r\n <thead>\r\n <tr>\r\n <th>Mesec<\/th>\r\n <th>Rata<\/th>\r\n <th>Kamatni deo<\/th>\r\n <th>Glavnica<\/th>\r\n <th>Preostali dug<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"tbody\"><\/tbody>\r\n <\/table>\r\n <\/div>\r\n <p class=\"hint\" style=\"margin-top:8px\">Napomena: Ovaj prora\u010dun je informativnog karaktera. Kona\u010dne uslove i efektivnu kamatnu stopu odre\u0111uje banka.<\/p>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n (function(){\r\n const $ = (s, p=document) => p.querySelector(s);\r\n const app = $('#loan-app');\r\n\r\n \/\/ Inputs\r\n const elCurrency = $('#currency');\r\n const elYears = $('#years');\r\n const elRate = $('#rate');\r\n\r\n const elPriceR = $('#price-range');\r\n const elPriceN = $('#price');\r\n const elPriceView = $('#price-view');\r\n\r\n const elDownR = $('#downPct-range');\r\n const elDownN = $('#downPct');\r\n const elDownView = $('#down-view');\r\n\r\n const elFeesR = $('#fees-range');\r\n const elFeesN = $('#fees');\r\n const elFeesView = $('#fees-view');\r\n\r\n \/\/ KPIs\r\n const kDown = $('#kpi-down');\r\n const kDownPct = $('#kpi-downpct');\r\n const kPrincipal = $('#kpi-principal');\r\n const kMonthly = $('#monthly');\r\n const kMeta = $('#meta');\r\n const kTotal = $('#kpi-total');\r\n const kInterest = $('#kpi-interest');\r\n const kFees = $('#kpi-fees');\r\n const tBody = $('#tbody');\r\n const btnCsv = $('#download-csv');\r\n\r\n const clamp = (v,min,max)=>Math.min(Math.max(Number(v)||0,min),max);\r\n const toNum = (v)=> Number(String(v).replace(',', '.'));\r\n\r\n const fmt = (v)=> new Intl.NumberFormat('sr-RS',{\r\n style:'currency',currency:elCurrency.value,maximumFractionDigits:0\r\n }).format(isFinite(v)?v:0);\r\n\r\n function syncPair(rangeEl, numberEl, min, max){\r\n rangeEl.addEventListener('input',()=>{ numberEl.value = clamp(rangeEl.value,min,max); render(); });\r\n numberEl.addEventListener('input',()=>{ numberEl.value = clamp(numberEl.value,min,max); rangeEl.value = numberEl.value; render(); });\r\n }\r\n\r\n syncPair(elPriceR, elPriceN, 10000, 500000);\r\n syncPair(elDownR, elDownN, 0, 90);\r\n syncPair(elFeesR, elFeesN, 0, 5);\r\n\r\n [elCurrency, elYears, elRate].forEach(el=> el.addEventListener('input', render));\r\n\r\n function buildSchedule(P, rateAnnual, years){\r\n const r = rateAnnual\/100\/12; \/\/ monthly\r\n const n = Math.round(years*12);\r\n const m = r===0 ? P\/n : (P*r)\/(1-Math.pow(1+r,-n));\r\n const rows = [];\r\n let bal = P;\r\n for(let i=1;i<=n;i++){\r\n const interest = bal*r;\r\n const principal = m - interest;\r\n bal = Math.max(bal - principal, 0);\r\n rows.push({month:i, payment:m, interest, principal, balance:bal});\r\n }\r\n const tInterest = rows.reduce((s,x)=>s+x.interest,0);\r\n const tPaid = rows.reduce((s,x)=>s+x.payment,0);\r\n return {m, r, n, rows, tInterest, tPaid};\r\n }\r\n\r\n function render(){\r\n const price = clamp(toNum(elPriceN.value), 10000, 500000);\r\n const downPct = clamp(toNum(elDownN.value), 0, 90);\r\n const rate = clamp(toNum(elRate.value), 0, 25);\r\n const years = clamp(toNum(elYears.value), 1, 40);\r\n const feesPct = clamp(toNum(elFeesN.value), 0, 5);\r\n\r\n \/\/ Derived\r\n const down = price * downPct \/ 100;\r\n const principal = Math.max(price - down, 0);\r\n const fees = principal * feesPct \/ 100;\r\n\r\n \/\/ UI mirrors\r\n elPriceView.textContent = ' ' + fmt(price);\r\n elDownView.textContent = ` ${downPct}% ( ${fmt(down)} )`;\r\n elFeesView.textContent = ` ${feesPct}% (~ ${fmt(fees)} )`;\r\n\r\n kDown.textContent = fmt(down);\r\n kDownPct.textContent = downPct + '%';\r\n kPrincipal.textContent = fmt(principal);\r\n\r\n const {m, r, n, rows, tInterest, tPaid} = buildSchedule(principal, rate, years);\r\n kMonthly.textContent = fmt(m);\r\n kMeta.textContent = `${years} god \u2022 ${n} meseci \u2022 ${rate}% godi\u0161nje (${(r*100).toFixed(3)}% mese\u010dno)`;\r\n kInterest.textContent = fmt(tInterest);\r\n kTotal.textContent = fmt(tPaid + fees);\r\n kFees.textContent = feesPct>0 ? '+ tro\u0161kovi uklju\u010deni' : '';\r\n\r\n \/\/ Table (first 12 months)\r\n tBody.innerHTML = rows.slice(0,12).map(row => `\r\n <tr>\r\n <td>${row.month}<\/td>\r\n <td>${fmt(row.payment)}<\/td>\r\n <td>${fmt(row.interest)}<\/td>\r\n <td>${fmt(row.principal)}<\/td>\r\n <td>${fmt(row.balance)}<\/td>\r\n <\/tr>\r\n `).join('');\r\n\r\n \/\/ CSV\r\n btnCsv.onclick = () => {\r\n const headers = ['Mesec','Rata','Kamatni deo','Glavnica','Preostali dug'];\r\n const data = [headers, ...rows.map(r=>[r.month, r.payment, r.interest, r.principal, r.balance])]\r\n .map(r=>r.map(c=> typeof c==='number' ? c.toFixed(2) : c).join(','))\r\n .join('\\n');\r\n const blob = new Blob([data], {type:'text\/csv;charset=utf-8;'});\r\n const url = URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url; a.download = 'amortizacija.csv';\r\n document.body.appendChild(a); a.click();\r\n setTimeout(()=>{ URL.revokeObjectURL(url); a.remove(); }, 100);\r\n };\r\n }\r\n\r\n \/\/ initial\r\n render();\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-275f66a elementor-widget__width-initial elementor-align-center elementor-widget elementor-widget-button\" data-id=\"275f66a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-float\" href=\"#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjQwMiIsInRvZ2dsZSI6ZmFsc2V9\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Iskoristi besplatno savetovanje<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-7aaa2c51 elementor-section-height-min-height elementor-section-boxed elementor-section-height-default elementor-invisible\" data-id=\"7aaa2c51\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{"background_background":"classic","animation":"fadeIn"}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-36e5d9f\" data-id=\"36e5d9f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-471c467e elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"471c467e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-200481fe elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"200481fe\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-wider\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-21d3732\" data-id=\"21d3732\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Najprecizniji Kreditni Kalkulator \/ Kalkulator Uslova I Kamata Kreditni kalkulator Ulazni podaci Valuta EURRSD Rok (godina) Kamatna stopa (% godi\u0161nje) Cena nekretnine U\u010de\u0161\u0107e (%) Dodatni tro\u0161kovi (% na iznos kredita) \u2013 opcionalno U\u010de\u0161\u0107e \u2014 \u2014 Iznos kredita \u2014 Rezultati \u2014 \u2014 Ukupno pla\u0107eno \u2014 Ukupna kamata \u2014 Amortizacija \u2013 prvih 12 meseci Preuzmi CSV Mesec […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-279","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/najnizekamate.com\/index.php?rest_route=\/wp\/v2\/pages\/279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/najnizekamate.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/najnizekamate.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/najnizekamate.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/najnizekamate.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=279"}],"version-history":[{"count":7,"href":"https:\/\/najnizekamate.com\/index.php?rest_route=\/wp\/v2\/pages\/279\/revisions"}],"predecessor-version":[{"id":444,"href":"https:\/\/najnizekamate.com\/index.php?rest_route=\/wp\/v2\/pages\/279\/revisions\/444"}],"wp:attachment":[{"href":"https:\/\/najnizekamate.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}