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="app-header">
11 <div>
12 <p class="eyebrow">Local-first money tracker</p>
13 <h1>Personal Finance Dashboard</h1>
14 </div>
15 <div class="header-actions">
16 <button id="themeToggle" title="Shortcut: D">🌙 Dark</button>
17 <a class="button ghost" href="tests.html">Self-test</a>
18 </div>
19 </header>
20
21 <main class="layout">
22 <section class="cards" aria-label="Summary">
23 <article class="card"><span>Income</span><strong id="incomeTotal">$0</strong></article>
24 <article class="card"><span>Expenses</span><strong id="expenseTotal">$0</strong></article>
25 <article class="card"><span>Net</span><strong id="netTotal">$0</strong></article>
26 <article class="card"><span>Transactions</span><strong id="txCount">0</strong></article>
27 </section>
28
29 <section class="panel form-panel">
30 <div class="panel-title">
31 <h2 id="formTitle">Add transaction</h2>
32 <p>Shortcuts: <kbd>N</kbd> new, <kbd>/</kbd> search, <kbd>D</kbd> theme, <kbd>E</kbd> export</p>
33 </div>
34 <form id="transactionForm">
35 <input type="hidden" id="txId">
36 <label>Date<input id="date" type="date" required></label>
37 <label>Description<input id="description" placeholder="Groceries" required></label>
38 <label>Category<select id="category"></select></label>
39 <label>Amount<input id="amount" type="number" step="0.01" placeholder="-42.50" required></label>
40 <div class="form-actions">
41 <button type="submit" id="saveBtn">Save</button>
42 <button type="button" class="ghost" id="resetBtn">Reset</button>
43 </div>
44 </form>
45 </section>
46
47 <section class="panel chart-panel">
48 <div class="panel-title">
49 <h2>Spending over time</h2>
50 <p>Cumulative balance from filtered transactions.</p>
51 </div>
52 <canvas id="spendingChart" aria-label="Spending over time chart"></canvas>
53 </section>
54
55 <section class="panel budget-panel">
56 <div class="panel-title">
57 <h2>Monthly budgets</h2>
58 <label>Month <input id="monthFilter" type="month"></label>
59 </div>
60 <div id="budgetBars" class="budget-bars"></div>
61 </section>
62
63 <section class="panel table-panel">
64 <div class="panel-title tools">
65 <div>
66 <h2>Transactions</h2>
67 <p>Stored in your browser with localStorage.</p>
68 </div>
69 <div class="filters">
70 <input id="search" placeholder="Search transactions">
71 <select id="categoryFilter"></select>
72 <button id="exportBtn">Export CSV</button>
73 <label class="button import">Import CSV<input id="importInput" type="file" accept=".csv,text/csv"></label>
74 </div>
75 </div>
76 <div class="table-wrap">
77 <table>
78 <thead><tr><th>Date</th><th>Description</th><th>Category</th><th class="num">Amount</th><th>Actions</th></tr></thead>
79 <tbody id="transactionRows"></tbody>
80 </table>
81 </div>
82 </section>
83 </main>
84
85 <script src="data.js"></script>
86 <script src="charts.js"></script>
87 <script src="app.js"></script>
88</body>
89</html>
90
Discussion
No comments yet. Start the discussion. Recorded by @patrick-toulme.