.deposit-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);
}
.deposit-calc h2 { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.deposit-calc .sub { font-size: 13px; color: #6b7a90; margin-bottom: 28px; }
.deposit-calc .field-group { margin-bottom: 20px; }
.deposit-calc .field-group label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; color: #c8d0dc; margin-bottom: 4px; }
.deposit-calc .field-group label span:last-child { font-weight: 400; color: #6b7a90; }
.deposit-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; }
.deposit-calc .field-group input[type=»number»]:focus { border-color: #4a7cf7; box-shadow: 0 0 0 3px rgba(74,124,247,0.15); background: #131b28; }
.deposit-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; }
.deposit-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; }
.deposit-calc .field-group input[type=»range»]::-webkit-slider-thumb:hover { transform: scale(1.1); background: #5f8af8; }
.deposit-calc .field-group input[type=»range»]::-moz-range-thumb { width: 18px; height: 18px; background: #4a7cf7; border: none; border-radius: 50%; cursor: pointer; }
.deposit-calc .field-group select { width: 100%; 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; margin-top: 4px; cursor: pointer; }
.deposit-calc .field-group select:focus { border-color: #4a7cf7; box-shadow: 0 0 0 3px rgba(74,124,247,0.15); background: #131b28; }
.deposit-calc .results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0; }
.deposit-calc .result-card { background: #0f151f; border: 1px solid #1e2836; border-radius: 16px; padding: 16px; text-align: center; }
.deposit-calc .result-card .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7a90; margin-bottom: 4px; }
.deposit-calc .result-card .value { font-size: 20px; font-weight: 600; color: #f0f2f7; }
.deposit-calc .result-card .value.accent { color: #4a7cf7; }
.deposit-calc .result-card .value.green { color: #4caf7a; }
.deposit-calc .result-card.wide { grid-column: span 2; }
.deposit-calc .monthly-table { margin-top: 24px; border-top: 1px solid #1e2836; padding-top: 20px; }
.deposit-calc .monthly-table h4 { font-size: 15px; font-weight: 500; color: #c8d0dc; margin-bottom: 12px; }
.deposit-calc .monthly-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.deposit-calc .monthly-table th { text-align: left; padding: 8px 6px; color: #6b7a90; font-weight: 500; border-bottom: 1px solid #1e2836; }
.deposit-calc .monthly-table td { padding: 8px 6px; color: #c8d0dc; border-bottom: 1px solid #141a24; }
.deposit-calc .monthly-table tr:last-child td { border-bottom: none; }
.deposit-calc .monthly-table .highlight { color: #4a7cf7; font-weight: 600; }
.deposit-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: 8px; }
.deposit-calc .btn-primary:hover { background: #5f8af8; }
.deposit-calc .btn-primary:active { transform: scale(0.98); }
.deposit-calc input[type=number]::-webkit-inner-spin-button,
.deposit-calc input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.deposit-calc input[type=number] { -moz-appearance: textfield; }
@media (max-width: 440px) { .deposit-calc { padding: 24px 16px; margin: 20px 12px; } .deposit-calc .results-grid { gap: 8px; } .deposit-calc .result-card .value { font-size: 17px; } }
Калькулятор вклада
Рассчитайте доход и итоговую сумму с учётом капитализации
Ежемесячно
Ежеквартально
Раз в полгода
Ежегодно
Без капитализации (проценты выплачиваются)
Вложено средств / Эффективная ставка
500 000 ₽ · 12.0%
(function() {
// DOM-элементы
const amountSlider = document.getElementById(‘depAmountSlider’);
const amountInput = document.getElementById(‘depAmountInput’);
const amountDisplay = document.getElementById(‘depAmountDisplay’);
const termSlider = document.getElementById(‘depTermSlider’);
const termInput = document.getElementById(‘depTermInput’);
const termDisplay = document.getElementById(‘depTermDisplay’);
const rateSlider = document.getElementById(‘depRateSlider’);
const rateInput = document.getElementById(‘depRateInput’);
const rateDisplay = document.getElementById(‘depRateDisplay’);
const capSelect = document.getElementById(‘depCapitalization’);
const addSlider = document.getElementById(‘depAddSlider’);
const addInput = document.getElementById(‘depAddInput’);
const addDisplay = document.getElementById(‘depAddDisplay’); const totalEl = document.getElementById(‘depTotal’);
const incomeEl = document.getElementById(‘depIncome’);
const investedEl = document.getElementById(‘depInvested’);
const tableBody = document.getElementById(‘depTableBody’); // Основной расчёт
function calculate() {
const initial = parseFloat(amountInput.value) || 0;
const months = parseFloat(termInput.value) || 1;
const annualRate = parseFloat(rateInput.value) || 0;
const monthlyAdd = parseFloat(addInput.value) || 0;
const capPerYear = parseInt(capSelect.value); const monthlyRate = (annualRate / 100) / 12;
let balance = initial;
let totalInvested = initial;
let totalIncome = 0; // Для таблицы
const rows = []; if (capPerYear === 0) {
// Без капитализации: проценты начисляются на начальную сумму, не прибавляются
const monthlyInterest = initial * monthlyRate;
for (let m = 1; m <= months; m++) {
totalInvested += monthlyAdd;
totalIncome += monthlyInterest;
rows.push({
month: m,
invested: totalInvested,
income: totalIncome,
balance: initial + totalIncome + (totalInvested — initial)
});
}
balance = initial + totalIncome + (totalInvested — initial);
} else {
// С капитализацией
for (let m = 1; m 0 ? ((finalAmount — investedTotal) / investedTotal) * 100 * (12 / months) : 0; // Обновление UI
totalEl.textContent = Math.round(finalAmount).toLocaleString(‘ru-RU’) + ‘ ₽’;
incomeEl.textContent = Math.round(income).toLocaleString(‘ru-RU’) + ‘ ₽’;
investedEl.textContent = Math.round(investedTotal).toLocaleString(‘ru-RU’) + ‘ ₽ · ‘ + effectiveRate.toFixed(1) + ‘%’; // Таблица: показываем не все месяцы, а с шагом (например, каждый месяц до 12, потом каждый 3-й)
let step = 1;
if (months > 24) step = 3;
else if (months > 12) step = 2; let html = »;
for (let i = 0; i < rows.length; i++) {
const r = rows[i];
if (r.month === months || r.month === 1 || r.month % step === 0) {
html += `
| ${r.month} | ${Math.round(r.invested).toLocaleString(‘ru-RU’)} ₽ | ${Math.round(r.income).toLocaleString(‘ru-RU’)} ₽ | ${Math.round(r.balance).toLocaleString(‘ru-RU’)} ₽ |
`;
}
}
tableBody.innerHTML = html;
} // Синхронизация слайдера и поля
function sync(slider, input, display, formatter) {
const update = () => {
const val = parseFloat(slider.value);
input.value = val;
if (display) display.textContent = formatter ? formatter(val) : val;
calculate();
};
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 ? formatter(val) : val;
calculate();
});
const initVal = parseFloat(slider.value);
input.value = initVal;
if (display) display.textContent = formatter ? formatter(initVal) : initVal;
} // Форматтеры
const rubFormatter = (v) => Number(v).toLocaleString(‘ru-RU’) + ‘ ₽’;
const termFormatter = (v) => v + ‘ мес.’;
const rateFormatter = (v) => v + ‘ %’;
const addFormatter = (v) => Number(v).toLocaleString(‘ru-RU’) + ‘ ₽’; // Инициализация
sync(amountSlider, amountInput, amountDisplay, rubFormatter);
sync(termSlider, termInput, termDisplay, termFormatter);
sync(rateSlider, rateInput, rateDisplay, rateFormatter);
sync(addSlider, addInput, addDisplay, addFormatter); // Обработчики для select
capSelect.addEventListener(‘change’, calculate); // Первоначальный расчёт
calculate();
})();
