Калькулятор ипотеки

.mortgage-calc { max-width: 520px; margin: 40px auto; padding: 32px 28px; background: #141a24; border-radius: 28px; border: 1px solid rgba(255,255,255,0.04); color: #f0f2f7; font-family: ‘Inter’, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, sans-serif; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.04); } .mortgage-calc h2 { font-size: 22px; font-weight: 600; margin-bottom: 4px; } .mortgage-calc .sub { font-size: 13px; color: #6b7a90; margin-bottom: 28px; } .mortgage-calc .field-group { margin-bottom: 20px; } .mortgage-calc .field-group label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; color: #c8d0dc; margin-bottom: 4px; } .mortgage-calc .field-group label span:last-child { font-weight: 400; color: #6b7a90; } .mortgage-calc .field-group input[type=»number»] { width: 100%; padding: 12px 16px; background: #0f151f; border: 1px solid #262f3d; border-radius: 14px; color: #f0f2f7; font-size: 18px; font-weight: 500; outline: none; transition: 0.2s; margin-top: 4px; } .mortgage-calc .field-group input[type=»number»]:focus { border-color: #4a7cf7; box-shadow: 0 0 0 3px rgba(74,124,247,0.15); background: #131b28; } .mortgage-calc .field-group input[type=»range»] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: #262f3d; border-radius: 2px; outline: none; margin: 8px 0 4px; } .mortgage-calc .field-group input[type=»range»]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: #4a7cf7; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 4px rgba(74,124,247,0.15); transition: 0.15s; } .mortgage-calc .field-group input[type=»range»]::-webkit-slider-thumb:hover { transform: scale(1.1); background: #5f8af8; } .mortgage-calc .field-group input[type=»range»]::-moz-range-thumb { width: 18px; height: 18px; background: #4a7cf7; border: none; border-radius: 50%; cursor: pointer; } .mortgage-calc .results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0; } .mortgage-calc .result-card { background: #0f151f; border: 1px solid #1e2836; border-radius: 16px; padding: 16px; text-align: center; } .mortgage-calc .result-card .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7a90; margin-bottom: 4px; } .mortgage-calc .result-card .value { font-size: 20px; font-weight: 600; color: #f0f2f7; } .mortgage-calc .result-card .value.accent { color: #4a7cf7; } .mortgage-calc .btn-primary { width: 100%; padding: 14px; background: #4a7cf7; border: none; border-radius: 16px; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; transition: 0.2s; margin-top: 4px; } .mortgage-calc .btn-primary:hover { background: #5f8af8; } .mortgage-calc .btn-primary:active { transform: scale(0.98); } .mortgage-calc .early-block { margin-top: 28px; padding-top: 24px; border-top: 1px solid #1e2836; } .mortgage-calc .early-block h3 { font-size: 17px; font-weight: 500; margin-bottom: 16px; color: #c8d0dc; } .mortgage-calc .early-block .input-group-inline { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .mortgage-calc .early-block .input-group-inline input[type=»number»] { flex: 1; min-width: 120px; padding: 12px 16px; background: #0f151f; border: 1px solid #262f3d; border-radius: 14px; color: #f0f2f7; font-size: 16px; font-weight: 500; outline: none; transition: 0.2s; } .mortgage-calc .early-block .input-group-inline input[type=»number»]:focus { border-color: #4a7cf7; box-shadow: 0 0 0 3px rgba(74,124,247,0.15); background: #131b28; } .mortgage-calc .early-block .input-group-inline button { padding: 12px 24px; background: #2d3748; border: none; border-radius: 14px; color: #f0f2f7; font-weight: 500; cursor: pointer; transition: 0.2s; white-space: nowrap; } .mortgage-calc .early-block .input-group-inline button:hover { background: #3d4a5c; } .mortgage-calc .early-result { margin-top: 16px; font-size: 15px; color: #c8d0dc; } .mortgage-calc .early-result strong { color: #f0f2f7; } .mortgage-calc .early-result .saving { color: #4a7cf7; font-weight: 600; } .mortgage-calc input[type=number]::-webkit-inner-spin-button, .mortgage-calc input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .mortgage-calc input[type=number] { -moz-appearance: textfield; } @media (max-width: 440px) { .mortgage-calc { padding: 24px 16px; margin: 20px 12px; } .mortgage-calc .results-grid { gap: 8px; } .mortgage-calc .result-card .value { font-size: 17px; } .mortgage-calc .early-block .input-group-inline { flex-direction: column; align-items: stretch; } } (function() { // Элементы управления const amountSlider = document.getElementById(‘amountSlider’); const amountInput = document.getElementById(‘amountInput’); const amountDisplay = document.getElementById(‘amountDisplay’); const termSlider = document.getElementById(‘termSlider’); const termInput = document.getElementById(‘termInput’); const termDisplay = document.getElementById(‘termDisplay’); const rateSlider = document.getElementById(‘rateSlider’); const rateInput = document.getElementById(‘rateInput’); const rateDisplay = document.getElementById(‘rateDisplay’); const monthlyPaymentEl = document.getElementById(‘monthlyPayment’); const totalOverpaymentEl = document.getElementById(‘totalOverpayment’); const totalCostEl = document.getElementById(‘totalCost’); const earlyAmountInput = document.getElementById(‘earlyAmount’); const calcEarlyBtn = document.getElementById(‘calcEarlyBtn’); const earlyResult = document.getElementById(‘earlyResult’); // Основной расчёт function calculate(earlyPayment = 0) { const amount = parseFloat(amountInput.value) || 0; const termYears = parseFloat(termInput.value) || 1; const annualRate = parseFloat(rateInput.value) || 0; const termMonths = termYears * 12; const monthlyRate = (annualRate / 100) / 12; let monthlyPayment = 0; let totalPayment = 0; let overpayment = 0; if (monthlyRate === 0) { monthlyPayment = amount / termMonths; } else { const factor = Math.pow(1 + monthlyRate, termMonths); monthlyPayment = amount * (monthlyRate * factor) / (factor — 1); } totalPayment = monthlyPayment * termMonths; overpayment = totalPayment — amount; // — Досрочное погашение — let newTermMonths = termMonths; let newTotalPayment = totalPayment; let interestSaved = 0; let monthsReduced = 0; if (earlyPayment > 0 && earlyPayment r * PV) { const n = -Math.log(1 — (r * PV) / PMT) / Math.log(1 + r); newTermMonths = Math.ceil(n); } else { newTermMonths = termMonths; // если платеж слишком мал } } if (newTermMonths 0 && earlyPayment < amount) { earlyResult.innerHTML = ` Сумма досрочного погашения: ${Math.round(earlyPayment).toLocaleString(‘ru-RU’)} ₽
Экономия на процентах: ${Math.round(interestSaved).toLocaleString(‘ru-RU’)} ₽
Срок сократится на ${Math.round(monthsReduced)} месяцев `; } else if (earlyPayment >= amount && amount > 0) { earlyResult.innerHTML = `💡 Досрочное погашение полностью закрывает кредит!`; } else { earlyResult.innerHTML = `Введите сумму досрочного погашения (до ${Math.round(amount).toLocaleString(‘ru-RU’)} ₽)`; } } // Синхронизация слайдера и поля ввода function syncSliderInput(slider, input, display, formatter) { const update = () => { const val = parseFloat(slider.value); input.value = val; if (display) display.textContent = formatter(val); calculate(parseFloat(earlyAmountInput.value) || 0); }; slider.addEventListener(‘input’, update); input.addEventListener(‘input’, function() { let val = parseFloat(this.value); if (isNaN(val)) return; const min = parseFloat(slider.min); const max = parseFloat(slider.max); const step = parseFloat(slider.step) || 1; if (val max) val = max; val = Math.round(val / step) * step; slider.value = val; this.value = val; if (display) display.textContent = formatter(val); calculate(parseFloat(earlyAmountInput.value) || 0); }); const initVal = parseFloat(slider.value); input.value = initVal; if (display) display.textContent = formatter(initVal); } // Форматтеры const amountFormatter = (v) => Number(v).toLocaleString(‘ru-RU’) + ‘ ₽’; const termFormatter = (v) => v + ‘ ‘ + declOfNum(v, [‘год’, ‘года’, ‘лет’]); const rateFormatter = (v) => v + ‘ %’; function declOfNum(num, forms) { const n = Math.abs(num) % 100; const n1 = n % 10; if (n > 10 && n 1 && n1 < 5) return forms[1]; if (n1 === 1) return forms[0]; return forms[2]; } // Инициализация syncSliderInput(amountSlider, amountInput, amountDisplay, amountFormatter); syncSliderInput(termSlider, termInput, termDisplay, termFormatter); syncSliderInput(rateSlider, rateInput, rateDisplay, rateFormatter); // Кнопка досрочного расчёта calcEarlyBtn.addEventListener('click', function() { const early = parseFloat(earlyAmountInput.value) || 0; calculate(early); }); // Авто-расчёт при изменении суммы досрочного earlyAmountInput.addEventListener('input', function() { const early = parseFloat(this.value) || 0; calculate(early); }); // Первоначальный расчёт calculate(0); })();