kris/etf-trade-tracker
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rebrand from ETF Trade Tracker to Personal Finance Tracker with growth charts

Browse Source 
Update application branding to reflect broader financial tracking capabilities beyond just ETF trades. Add comprehensive growth visualization features with time period selectors and three distinct chart views for portfolio, cash, and total net worth tracking.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
kris
2025-12-23 13:58:43 +00:00
co-authored by Claude
parent 8f4899cf8b
commit 4fb0d35daf
3 changed files with 502 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+59 -4
View File
@@ -3,14 +3,14 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ETF Trade Tracker</title>
<title>Personal Finance Tracker</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="app-container">
<nav class="sidebar">
<div class="sidebar-header">
<h2>ETF Tracker</h2>
<h2>Finance Tracker</h2>
</div>
<ul class="sidebar-menu">
<li class="menu-item active" data-page="dashboard">
@@ -80,7 +80,7 @@
<!-- Login Page -->
<div id="login-page" class="page active">
<div class="login-container">
<h2>Login to ETF Tracker</h2>
<h2>Login to Personal Finance Tracker</h2>
<form id="login-form" class="login-form">
<div class="form-group">
<label for="login-username">Username</label>
@@ -181,8 +181,63 @@
</div>
</div>
</div>
<!-- Growth Graphs Section -->
<div class="growth-graphs-section">
<div class="graphs-header">
<h2>Growth & Trends</h2>
<div class="time-period-selector">
<button class="period-btn active" data-period="7d">7D</button>
<button class="period-btn" data-period="1m">1M</button>
<button class="period-btn" data-period="3m">3M</button>
<button class="period-btn" data-period="6m">6M</button>
<button class="period-btn" data-period="1y">1Y</button>
</div>
</div>
<div class="graphs-grid">
<div class="graph-card portfolio-graph">
<div class="graph-header">
<h3>Portfolio Value</h3>
<div class="graph-stats">
<span class="current-value" id="portfolio-graph-value">€0.00</span>
<span class="change-indicator" id="portfolio-graph-change">+0.0%</span>
</div>
</div>
<div class="graph-container">
<canvas id="portfolio-chart" class="chart-canvas"></canvas>
</div>
</div>
<div class="graph-card cash-graph">
<div class="graph-header">
<h3>Cash Holdings</h3>
<div class="graph-stats">
<span class="current-value" id="cash-graph-value">€0.00</span>
<span class="change-indicator" id="cash-graph-change">+0.0%</span>
</div>
</div>
<div class="graph-container">
<canvas id="cash-chart" class="chart-canvas"></canvas>
</div>
</div>
<div class="graph-card combined-graph">
<div class="graph-header">
<h3>Total Net Worth</h3>
<div class="graph-stats">
<span class="current-value" id="total-graph-value">€0.00</span>
<span class="change-indicator" id="total-graph-change">+0.0%</span>
</div>
</div>
<div class="graph-container">
<canvas id="total-chart" class="chart-canvas"></canvas>
</div>
</div>
</div>
</div>
</div>
<!-- Add Trade Page -->
<div id="add-trade-page" class="page">
<div class="trade-form-container">