Mateusz Gruszczyński
198 lines
9.1 KiB
HTML
198 lines
9.1 KiB
HTML
<!doctype html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Symulator kredytu hipotecznego</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="/static/styles.css" rel="stylesheet">
|
|
</head>
|
|
<body data-theme="dark">
|
|
<main class="container-fluid app-shell py-3">
|
|
<header class="hero card border-0 shadow-sm mb-3">
|
|
<div class="card-body d-flex flex-wrap align-items-center justify-content-between gap-3">
|
|
<div>
|
|
<h1 class="h3 mb-1">Symulator kredytu hipotecznego</h1>
|
|
<p class="text-muted mb-0">@linuxiarz.pl</p>
|
|
</div>
|
|
<div class="d-flex gap-2 flex-wrap justify-content-end">
|
|
<button id="themeToggle" class="btn btn-outline-secondary btn-sm" type="button" aria-label="Przełącz motyw">☀️ Jasny</button>
|
|
<button id="loadNbp" class="btn btn-outline-primary btn-sm">Pobierz stopę NBP</button>
|
|
<button id="exportJson" class="btn btn-outline-secondary btn-sm">Eksport JSON</button>
|
|
<button id="importJson" class="btn btn-outline-secondary btn-sm">Import JSON</button>
|
|
<button id="exportCsv" class="btn btn-outline-secondary btn-sm">CSV</button>
|
|
<button id="exportPdf" class="btn btn-primary btn-sm">PDF</button>
|
|
<input id="jsonFile" type="file" accept="application/json,.json" hidden>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="row g-3">
|
|
<section class="col-12 col-xl-4">
|
|
<div class="card shadow-sm border-0 sticky-xl-top slim-card">
|
|
<div class="card-body">
|
|
<h2 class="h5 mb-3">Parametry</h2>
|
|
<div class="row g-2">
|
|
<div class="col-6">
|
|
<label class="form-label">Kwota kredytu</label>
|
|
<input id="principal" type="number" class="form-control form-control-sm" value="600000" min="1">
|
|
</div>
|
|
<div class="col-6">
|
|
<label class="form-label">Okres w miesiącach</label>
|
|
<input id="termMonths" type="number" class="form-control form-control-sm" value="300" min="1" max="600">
|
|
</div>
|
|
<div class="col-12 term-slider-wrap">
|
|
<div class="d-flex justify-content-between align-items-center gap-2">
|
|
<label class="form-label mb-0" for="yearsSlider">Szybki wybór lat</label>
|
|
<span id="yearsSliderLabel" class="small text-muted">25 lat = 300 mies.</span>
|
|
</div>
|
|
<input id="yearsSlider" type="range" class="form-range" min="1" max="50" step="1" value="25">
|
|
</div>
|
|
<div class="col-6">
|
|
<label class="form-label">Stopa bazowa %</label>
|
|
<input id="baseRate" type="number" step="0.01" class="form-control form-control-sm" value="5.75">
|
|
</div>
|
|
<div class="col-6">
|
|
<label class="form-label">Marża %</label>
|
|
<input id="margin" type="number" step="0.01" class="form-control form-control-sm" value="2.00">
|
|
</div>
|
|
<div class="col-6">
|
|
<label class="form-label">Typ rat</label>
|
|
<select id="installmentType" class="form-select form-select-sm">
|
|
<option value="equal">Równe</option>
|
|
<option value="decreasing">Malejące</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-6">
|
|
<label class="form-label">Efekt nadpłat</label>
|
|
<select id="overpaymentEffect" class="form-select form-select-sm">
|
|
<option value="shorten">Skrócenie okresu</option>
|
|
<option value="lower_payment">Zmniejszenie raty</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-6">
|
|
<label class="form-label">Data startu kredytu</label>
|
|
<input id="loanStartDate" type="date" class="form-control form-control-sm">
|
|
</div>
|
|
<div class="col-6">
|
|
<label class="form-label">Dzień spłaty raty</label>
|
|
<input id="dueDay" type="number" min="1" max="28" class="form-control form-control-sm" value="5">
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-check small mb-0">
|
|
<input id="moveDueDate" class="form-check-input" type="checkbox" checked>
|
|
<span class="form-check-label">Przesuwaj spłatę na pierwszy dzień roboczy, jeśli wypada w dzień wolny</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<h3 class="h6 mb-0">Zmiany oprocentowania</h3>
|
|
<button id="addRate" class="btn btn-sm btn-outline-primary">+</button>
|
|
</div>
|
|
<div id="rateChanges" class="stack"></div>
|
|
|
|
<hr>
|
|
<div class="d-flex justify-content-between align-items-start gap-2 mb-2">
|
|
<div>
|
|
<h3 class="h6 mb-0">Okres ochronny nadpłat</h3>
|
|
<div class="text-muted small">Domyślna prowizja automatycznie wpisywana do nowych nadpłat</div>
|
|
</div>
|
|
<button id="applyProtection" class="btn btn-sm btn-outline-secondary" type="button">Uzupełnij</button>
|
|
</div>
|
|
<div class="row g-2 align-items-end">
|
|
<div class="col-6">
|
|
<label class="form-label">Prowizja %</label>
|
|
<input id="protectionCommission" type="number" min="0" max="20" step="0.01" class="form-control form-control-sm" value="0">
|
|
</div>
|
|
<div class="col-6">
|
|
<label class="form-label">Do miesiąca</label>
|
|
<input id="protectionMonths" type="number" min="1" class="form-control form-control-sm" placeholder="np. 36">
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<h3 class="h6 mb-0">Nadpłaty</h3>
|
|
<button id="addOverpayment" class="btn btn-sm btn-outline-primary">+</button>
|
|
</div>
|
|
<div id="overpayments" class="stack"></div>
|
|
|
|
<hr>
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<div>
|
|
<h3 class="h6 mb-0">Kredyt historyczny</h3>
|
|
<div class="text-muted small">Miesięczne oprocentowanie, karencja i faktyczne nadpłaty</div>
|
|
</div>
|
|
<button id="addHistorical" class="btn btn-sm btn-outline-primary">+</button>
|
|
</div>
|
|
<div id="historicalMonths" class="stack"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="col-12 col-xl-8">
|
|
<div class="row g-3 mb-3" id="summaryCards"></div>
|
|
<div class="row g-3">
|
|
<div class="col-12 col-lg-8">
|
|
<div class="card shadow-sm border-0 chart-card">
|
|
<div class="card-body">
|
|
<h2 class="h6">Saldo i rata w czasie</h2>
|
|
<canvas id="lineChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-lg-4">
|
|
<div class="card shadow-sm border-0 chart-card">
|
|
<div class="card-body">
|
|
<h2 class="h6">Struktura kosztów</h2>
|
|
<canvas id="pieChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="card shadow-sm border-0 chart-card-sm">
|
|
<div class="card-body">
|
|
<h2 class="h6">Odsetki rocznie</h2>
|
|
<canvas id="barChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="card shadow-sm border-0 chart-card">
|
|
<div class="card-body">
|
|
<h2 class="h6">Podział raty i koszt narastająco</h2>
|
|
<canvas id="detailChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="card shadow-sm border-0">
|
|
<div class="card-body">
|
|
<h2 class="h6">Opis wyniku</h2>
|
|
<p id="resultText" class="mb-0 text-muted"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="card shadow-sm border-0">
|
|
<div class="card-body table-responsive">
|
|
<h2 class="h6">Harmonogram</h2>
|
|
<table class="table table-sm align-middle mb-0">
|
|
<thead><tr><th>Mies.</th><th>Data</th><th>Dni</th><th>Oproc.</th><th>Rata</th><th>Kapitał</th><th>Odsetki</th><th>Nadpłata</th><th>Prow.</th><th>Koszt nar.</th><th>Saldo</th></tr></thead>
|
|
<tbody id="scheduleTable"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|