1<!doctype html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>Personal Finance Dashboard</title>
7 <link rel="stylesheet" href="style.css">
8</head>
9<body>
10 <header class="topbar">
11 <div>
12 <p class="eyebrow">Local-first dashboard</p>
13 <h1>Personal Finance</h1>
14 </div>
15 <div class="actions">
16 <button id="themeBtn" title="Shortcut: D">🌙 Theme</button>
17 <a class="button ghost" href="tests.html">Self-test</a>
18 </div>
19 </header>
20
21 <main class="grid">
22 <section class="card hero">
23 <div><span>Balance</span><strong id="balance">$0</strong></div>
24 <div><span>Income</span><strong id="income">$0</strong></div>
25 <div><span>Expenses</span><strong id="expenses">$0</strong></div>
26 </section>
27
28 <section class="card form-card">
29 <h2 id="formTitle">Add transaction</h2>
30 <form id="txForm">
31 <input type="hidden" id="txId">
32 <label>Date <input required type="date" id="date"></label>
33 <label>Description <input required id="description" placeholder="Coffee, paycheck..."></label>
34 <label>Category <select id="category"></select></label>
35 <label>Amount <input required type="number" step="0.01" id="amount" placeholder="-42.50 or 1200"></label>
36 <div class="row"><button type="submit">Save</button><button type="button" id="resetBtn" class="ghost">Reset</button></div>
37 </form>
38 </section>
39
40 <section class="card filters">
41 <h2>Filters & files</h2>
42 <label>Category <select id="filterCategory"><option>All</option></select></label>
43 <label>Month <input type="month" id="filterMonth"></label>
44 <label>Search <input id="search" placeholder="Search text"></label>
45 <div class="row">
46 <button id="exportBtn">Export CSV</button>
47 <label class="button file">Import CSV<input hidden type="file" id="importFile" accept=".csv,text/csv"></label>
48 </div>
49 <p class="hint">Shortcuts: <kbd>N</kbd> new, <kbd>E</kbd> export, <kbd>D</kbd> dark theme, <kbd>/</kbd> search.</p>
50 </section>
51
52 <section class="card wide">
53 <h2>Spending over time</h2>
54 <canvas id="spendingChart" aria-label="Spending over time chart"></canvas>
55 </section>
56
57 <section class="card wide">
58 <h2>Monthly budget bars</h2>
59 <div id="budgetBars" class="budget-bars"></div>
60 </section>
61
62 <section class="card table-card wide">
63 <h2>Transactions</h2>
64 <div class="table-wrap">
65 <table>
66 <thead><tr><th>Date</th><th>Description</th><th>Category</th><th class="num">Amount</th><th>Actions</th></tr></thead>
67 <tbody id="txTable"></tbody>
68 </table>
69 </div>
70 </section>
71 </main>
72
73 <script src="data.js"></script>
74 <script src="charts.js"></script>
75 <script src="app.js"></script>
76</body>
77</html>
78
Discussion
No comments yet. Start the discussion. Recorded by @patrick-toulme.