index.html

<!doctype html><html lang="nl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="Een eenvoudige budgetplanner die je uitgaven lokaal in je browser bewaart."><title>PebbleBudget — grip op je maand</title><link rel="stylesheet" href="styles.css"><script src="app.js" defer></script></head><body>
<header><a class="brand" href="index.html"><span class="logo">p</span> pebble<span>budget</span></a><a class="lang" href="en/index.html">English ↗</a></header><main><section class="hero"><div><p class="eyebrow">JE GELD, HELDER IN BEELD</p><h1>Een rustige blik<br><em>op je maand.</em></h1><p class="intro">Houd uitgaven en je maandbudget bij. Alles blijft privé in deze browser.</p></div><div class="hero-art" aria-hidden="true">↗</div></section>
<section class="overview"><article class="stat"><span>Maandbudget</span><strong id="budgetValue">€ 0,00</strong><label for="budgetInput">Pas je budget aan</label><div class="budget-edit"><input id="budgetInput" type="number" min="0" step="10" value="1000" aria-label="Maandbudget in euro"><button id="saveBudget">Bewaar</button></div></article><article class="stat spent"><span>Uitgegeven deze maand</span><strong id="spentValue">€ 0,00</strong><div class="meter"><i id="budgetMeter"></i></div><small id="budgetHint">Nog geen uitgaven</small></article><article class="stat remaining"><span>Nog beschikbaar</span><strong id="remainingValue">€ 0,00</strong><label for="month">Bekijk maand</label><input id="month" type="month"></article></section>
<div class="columns"><section class="panel"><div class="panel-head"><div><p class="eyebrow">NIEUWE UITGAVE</p><h2>Waar ging het naartoe?</h2></div><span class="icon">＋</span></div><form id="expenseForm"><label for="title">Omschrijving</label><input id="title" maxlength="80" required placeholder="Bijv. boodschappen"><div class="form-row"><div><label for="amount">Bedrag (€)</label><input id="amount" type="number" min="0.01" step="0.01" required placeholder="0,00"></div><div><label for="category">Categorie</label><select id="category"><option value="food">Boodschappen</option><option value="home">Wonen</option><option value="travel">Vervoer</option><option value="fun">Vrije tijd</option><option value="other">Overig</option></select></div></div><label for="date">Datum</label><input id="date" type="date" required><button class="primary" type="submit">Uitgave toevoegen <span>→</span></button></form><p class="privacy">🔒 Alleen opgeslagen op dit apparaat.</p></section>
<section class="panel transactions"><div class="panel-head"><div><p class="eyebrow">JOUW OVERZICHT</p><h2>Recente uitgaven</h2></div><button id="export" class="text-button">Exporteer data ↓</button></div><ul id="list" class="list"></ul><p id="empty" class="empty">Nog geen uitgaven voor deze maand. Voeg je eerste toe.</p></section></div>
<section class="note"><strong>Een hulpmiddel om overzicht te houden</strong><p>PebbleBudget geeft geen financieel advies en koppelt niet met je bank. Vul alleen gegevens in die je zelf wilt bewaren. Verwijder sitegegevens in je browser om alles te wissen.</p></section></main><footer><span>PebbleBudget <span>· Een beetje overzicht, stap voor stap.</span></span><span>Privé in je browser · Geen account nodig</span></footer></body></html>