1<!DOCTYPE html>
2<html lang="en" data-theme="dark">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>ApexFinance — Modern Personal Finance Dashboard</title>
7 <meta name="description" content="A modern, high-performance static web application for personal expense tracking, budgeting, and financial analytics.">
8 <link rel="stylesheet" href="style.css">
9</head>
10<body>
11 <div id="app">
12
13 <header class="app-header">
14 <div class="brand-container">
15 <div class="brand-logo">💎</div>
16 <div class="brand-title">
17 <h1>ApexFinance</h1>
18 <p>Personal Finance & Analytics</p>
19 </div>
20 </div>
21 <div class="header-actions">
22 <button id="add-tx-btn" class="btn btn-primary" title="Shortcut: N">
23 <span>+</span>
24 <span>Add Transaction</span>
25 <kbd>N</kbd>
26 </button>
27 <button id="import-csv-btn" class="btn btn-secondary" title="Import CSV">
28 <span>📥</span>
29 <span>Import</span>
30 </button>
31 <input type="file" id="csv-file-input" accept=".csv" style="display: none;">
32 <button id="export-csv-btn" class="btn btn-secondary" title="Export CSV">
33 <span>📤</span>
34 <span>Export</span>
35 </button>
36 <button id="theme-toggle-btn" class="btn btn-icon" title="Toggle Theme (Shortcut: D)">☀️</button>
37 <button id="shortcuts-btn" class="btn btn-icon" title="Keyboard Shortcuts (Shortcut: ?)">❓</button>
38 <a href="tests.html" class="btn btn-secondary" title="Self Test Page" style="text-decoration:none;">🧪 Tests</a>
39 </div>
40 </header>
41
42
43 <section class="summary-grid">
44 <div class="summary-card card-net-worth">
45 <div class="card-header">
46 <span class="card-title">Net Balance</span>
47 <div class="card-icon icon-net-worth">💳</div>
48 </div>
49 <div id="net-worth-val" class="card-amount">$0.00</div>
50 <div class="card-subtext">Total cashflow position</div>
51 </div>
52
53 <div class="summary-card card-income">
54 <div class="card-header">
55 <span class="card-title">Total Income</span>
56 <div class="card-icon icon-income">📈</div>
57 </div>
58 <div id="income-val" class="card-amount">$0.00</div>
59 <div class="card-subtext">
60 <span class="trend-badge trend-positive">Inflow</span> past 30 days
61 </div>
62 </div>
63
64 <div class="summary-card card-expenses">
65 <div class="card-header">
66 <span class="card-title">Total Expenses</span>
67 <div class="card-icon icon-expenses">📉</div>
68 </div>
69 <div id="expenses-val" class="card-amount">$0.00</div>
70 <div class="card-subtext">
71 <span class="trend-badge trend-negative">Outflow</span> past 30 days
72 </div>
73 </div>
74
75 <div class="summary-card card-savings">
76 <div class="card-header">
77 <span class="card-title">Net Savings</span>
78 <div class="card-icon icon-savings">💰</div>
79 </div>
80 <div id="savings-val" class="card-amount">$0.00</div>
81 <div class="card-subtext">
82 <span id="savings-rate-val" class="trend-badge trend-positive">0% rate</span>
83 </div>
84 </div>
85 </section>
86
87
88 <section class="dashboard-layout">
89
90 <div class="section-card">
91 <div class="section-header">
92 <h2 class="section-title">
93 <span>📊</span>
94 <span>Spending & Income Trends</span>
95 </h2>
96 <span style="font-size:12px; color:var(--text-muted);">Hover points for details</span>
97 </div>
98 <div class="canvas-wrapper">
99 <canvas id="spending-canvas"></canvas>
100 </div>
101 </div>
102
103
104 <div class="section-card">
105 <div class="section-header">
106 <h2 class="section-title">
107 <span>🎯</span>
108 <span>Monthly Category Budgets</span>
109 </h2>
110 <span style="font-size:12px; color:var(--text-muted);">Budget utilization</span>
111 </div>
112 <div id="budget-list" class="budget-list">
113
114 </div>
115 </div>
116 </section>
117
118
119 <section class="transactions-container">
120 <div class="toolbar">
121 <div class="search-box">
122 <span class="search-icon">🔍</span>
123 <input type="text" id="search-input" placeholder="Search transactions (press '/' to focus)..." title="Search Shortcut: /">
124 </div>
125
126 <div class="filter-group">
127 <select id="category-filter" class="select-control">
128 <option value="all">All Categories</option>
129 </select>
130
131 <select id="type-filter" class="select-control">
132 <option value="all">All Types</option>
133 <option value="income">Income Only</option>
134 <option value="expense">Expense Only</option>
135 </select>
136 </div>
137 </div>
138
139 <div class="table-wrapper">
140 <table class="tx-table">
141 <thead>
142 <tr>
143 <th>Date</th>
144 <th>Type</th>
145 <th>Category</th>
146 <th>Description</th>
147 <th>Amount</th>
148 <th>Actions</th>
149 </tr>
150 </thead>
151 <tbody id="tx-tbody">
152
153 </tbody>
154 </table>
155 </div>
156 <div style="margin-top: 12px; font-size: 12px; color: var(--text-muted); text-align: right;" id="tx-count"></div>
157 </section>
158
159
160 <div id="tx-modal" class="modal-backdrop">
161 <div class="modal-content">
162 <div class="modal-header">
163 <h3 id="tx-modal-title" class="modal-title">Add Transaction</h3>
164 <button id="modal-close-btn" class="btn btn-icon" style="border:none; background:none; font-size:18px;">✕</button>
165 </div>
166 <form id="tx-form">
167 <input type="hidden" id="tx-id">
168
169 <div class="form-row">
170 <div class="form-group">
171 <label for="tx-type" class="form-label">Type</label>
172 <select id="tx-type" class="form-control" required>
173 <option value="expense">Expense</option>
174 <option value="income">Income</option>
175 </select>
176 </div>
177 <div class="form-group">
178 <label for="tx-date" class="form-label">Date</label>
179 <input type="date" id="tx-date" class="form-control" required>
180 </div>
181 </div>
182
183 <div class="form-row">
184 <div class="form-group">
185 <label for="tx-amount" class="form-label">Amount ($)</label>
186 <input type="number" id="tx-amount" class="form-control" step="0.01" min="0.01" placeholder="0.00" required>
187 </div>
188 <div class="form-group">
189 <label for="tx-category" class="form-label">Category</label>
190 <select id="tx-category" class="form-control" required>
191
192 </select>
193 </div>
194 </div>
195
196 <div class="form-group">
197 <label for="tx-desc" class="form-label">Description</label>
198 <input type="text" id="tx-desc" class="form-control" placeholder="e.g. Whole Foods Groceries" required>
199 </div>
200
201 <div class="form-group">
202 <label for="tx-notes" class="form-label">Notes (Optional)</label>
203 <textarea id="tx-notes" class="form-control" rows="2" placeholder="Additional details..."></textarea>
204 </div>
205
206 <div class="modal-footer">
207 <button type="button" id="modal-cancel-btn" class="btn btn-secondary">Cancel</button>
208 <button type="submit" class="btn btn-primary">Save Transaction</button>
209 </div>
210 </form>
211 </div>
212 </div>
213
214
215 <div id="shortcuts-modal" class="modal-backdrop">
216 <div class="modal-content">
217 <div class="modal-header">
218 <h3 class="modal-title">Keyboard Shortcuts</h3>
219 <button id="shortcuts-close-btn" class="btn btn-icon" style="border:none; background:none; font-size:18px;">✕</button>
220 </div>
221 <div class="shortcut-list">
222 <div class="shortcut-item">
223 <span>Add new transaction</span>
224 <kbd>N</kbd>
225 </div>
226 <div class="shortcut-item">
227 <span>Focus search bar</span>
228 <kbd>/</kbd>
229 </div>
230 <div class="shortcut-item">
231 <span>Toggle Dark/Light theme</span>
232 <kbd>D</kbd>
233 </div>
234 <div class="shortcut-item">
235 <span>Open keyboard shortcuts</span>
236 <kbd>?</kbd>
237 </div>
238 <div class="shortcut-item">
239 <span>Close modal / cancel</span>
240 <kbd>Esc</kbd>
241 </div>
242 </div>
243 </div>
244 </div>
245
246
247 <div id="toast-container"></div>
248 </div>
249
250 <script src="data.js"></script>
251 <script src="charts.js"></script>
252 <script src="app.js"></script>
253</body>
254</html>
255
Discussion
No comments yet. Start the discussion. Recorded by @patrick-toulme.