Mateusz Gruszczyński
137 lines
5.7 KiB
HTML
137 lines
5.7 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">@linuiarz.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="exportCsv" class="btn btn-outline-secondary btn-sm">CSV</button>
|
|
<button id="exportPdf" class="btn btn-primary btn-sm">PDF</button>
|
|
</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 lat</label>
|
|
<input id="years" type="number" class="form-control form-control-sm" value="25" min="1" max="50">
|
|
</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>
|
|
|
|
<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-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>
|
|
</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">
|
|
<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>Oproc.</th><th>Rata</th><th>Kapitał</th><th>Odsetki</th><th>Nadpłata</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>
|