111 lines
4.1 KiB
HTML
111 lines
4.1 KiB
HTML
<!doctype html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Kostenverdeler</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<main class="app-shell">
|
|
<section class="topbar" aria-labelledby="app-title">
|
|
<div>
|
|
<p class="eyebrow">Gezamenlijke uitgaven</p>
|
|
<h1 id="app-title">Kostenverdeler</h1>
|
|
</div>
|
|
<button class="icon-button subtle" id="resetButton" type="button" title="Alles wissen" aria-label="Alles wissen">
|
|
<span aria-hidden="true">↺</span>
|
|
</button>
|
|
</section>
|
|
|
|
<section class="summary-grid" aria-label="Samenvatting">
|
|
<article class="summary-card">
|
|
<span class="summary-label">Totaal uitgegeven</span>
|
|
<strong id="totalSpent">€ 0,00</strong>
|
|
</article>
|
|
<article class="summary-card">
|
|
<span class="summary-label" id="personALabel">Persoon 1 betaalde</span>
|
|
<strong id="paidA">€ 0,00</strong>
|
|
</article>
|
|
<article class="summary-card">
|
|
<span class="summary-label" id="personBLabel">Persoon 2 betaalde</span>
|
|
<strong id="paidB">€ 0,00</strong>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="balance-panel" aria-live="polite">
|
|
<div>
|
|
<p class="eyebrow">Af te rekenen</p>
|
|
<h2 id="settlementText">Alles is in balans.</h2>
|
|
</div>
|
|
<p id="balanceDetail">Voeg een uitgave toe om de verdeling te berekenen.</p>
|
|
</section>
|
|
|
|
<div class="content-grid">
|
|
<section class="panel setup-panel" aria-labelledby="people-title">
|
|
<div class="section-heading">
|
|
<h2 id="people-title">Personen</h2>
|
|
</div>
|
|
<div class="name-grid">
|
|
<label>
|
|
<span>Persoon 1</span>
|
|
<input id="personAName" type="text" autocomplete="off" maxlength="32">
|
|
</label>
|
|
<label>
|
|
<span>Persoon 2</span>
|
|
<input id="personBName" type="text" autocomplete="off" maxlength="32">
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel form-panel" aria-labelledby="expense-title">
|
|
<div class="section-heading">
|
|
<h2 id="expense-title">Uitgave toevoegen</h2>
|
|
</div>
|
|
<form id="expenseForm" class="expense-form">
|
|
<label class="full-row">
|
|
<span>Omschrijving</span>
|
|
<input id="description" type="text" placeholder="Boodschappen, huur, lunch..." required maxlength="80">
|
|
</label>
|
|
<label>
|
|
<span>Bedrag</span>
|
|
<input id="amount" type="text" inputmode="decimal" placeholder="0,00" required>
|
|
</label>
|
|
<label>
|
|
<span>Betaald door</span>
|
|
<select id="paidBy"></select>
|
|
</label>
|
|
<fieldset class="full-row">
|
|
<legend>Verdelen over</legend>
|
|
<div class="split-options">
|
|
<label>
|
|
<input id="shareA" type="checkbox" checked>
|
|
<span id="shareALabel">Persoon 1</span>
|
|
</label>
|
|
<label>
|
|
<input id="shareB" type="checkbox" checked>
|
|
<span id="shareBLabel">Persoon 2</span>
|
|
</label>
|
|
</div>
|
|
</fieldset>
|
|
<button class="primary-button full-row" type="submit">Uitgave opslaan</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="panel expenses-panel" aria-labelledby="list-title">
|
|
<div class="section-heading row-heading">
|
|
<h2 id="list-title">Uitgaven</h2>
|
|
<button class="text-button" id="exportButton" type="button">CSV</button>
|
|
</div>
|
|
<div id="emptyState" class="empty-state">
|
|
Nog geen uitgaven. Begin met de eerste gedeelde kostenpost.
|
|
</div>
|
|
<ul id="expenseList" class="expense-list" aria-label="Uitgavenlijst"></ul>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|