8a68a8bf86
Features: - Multi-user authentication system with admin panel - SQLite database with user isolation - Trade entry, history, and portfolio tracking - Gains/losses calculation with price updates - Responsive design with sidebar navigation - Session-based authentication with bcrypt password hashing - Admin user management capabilities Default admin credentials: admin/admin123 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
308 lines
16 KiB
HTML
308 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ETF Trade 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>
|
||
</div>
|
||
<ul class="sidebar-menu">
|
||
<li class="menu-item active" data-page="dashboard">
|
||
<span class="menu-icon">📊</span>
|
||
<span class="menu-text">Dashboard</span>
|
||
</li>
|
||
<li class="menu-item" data-page="portfolio">
|
||
<span class="menu-icon">💼</span>
|
||
<span class="menu-text">Portfolio</span>
|
||
</li>
|
||
<li class="menu-item" data-page="trade-history">
|
||
<span class="menu-icon">📋</span>
|
||
<span class="menu-text">Trade History</span>
|
||
</li>
|
||
<li class="menu-item" data-page="gains-losses">
|
||
<span class="menu-icon">📈</span>
|
||
<span class="menu-text">Gains/Losses</span>
|
||
</li>
|
||
<li class="menu-item menu-separator" data-page="add-trade">
|
||
<span class="menu-icon">➕</span>
|
||
<span class="menu-text">Add Trade</span>
|
||
</li>
|
||
<li class="menu-item admin-only" data-page="admin" style="display: none;">
|
||
<span class="menu-icon">👥</span>
|
||
<span class="menu-text">Admin Panel</span>
|
||
</li>
|
||
</ul>
|
||
<div class="sidebar-footer">
|
||
<div class="user-info" id="user-info" style="display: none;">
|
||
<span id="current-user">Not logged in</span>
|
||
<button id="logout-btn" class="logout-btn">Logout</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="main-content">
|
||
<header class="top-header">
|
||
<button class="sidebar-toggle">☰</button>
|
||
<h1 id="page-title">Dashboard</h1>
|
||
</header>
|
||
|
||
<main class="content-area">
|
||
<!-- Login Page -->
|
||
<div id="login-page" class="page active">
|
||
<div class="login-container">
|
||
<h2>Login to ETF Tracker</h2>
|
||
<form id="login-form" class="login-form">
|
||
<div class="form-group">
|
||
<label for="login-username">Username</label>
|
||
<input type="text" id="login-username" required placeholder="Enter your username">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="login-password">Password</label>
|
||
<input type="password" id="login-password" required placeholder="Enter your password">
|
||
</div>
|
||
<button type="submit" class="login-btn">Login</button>
|
||
</form>
|
||
<div class="login-info">
|
||
<p>Default admin credentials:</p>
|
||
<p><strong>Username:</strong> admin</p>
|
||
<p><strong>Password:</strong> admin123</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Dashboard Page -->
|
||
<div id="dashboard-page" class="page">
|
||
<div class="dashboard-grid">
|
||
<div class="dashboard-card total-value">
|
||
<h3>Current Portfolio Value</h3>
|
||
<div class="metric-value" id="dashboard-current-value">€0.00</div>
|
||
<div class="metric-detail" id="dashboard-last-updated">Using cost basis</div>
|
||
</div>
|
||
|
||
<div class="dashboard-card total-gains">
|
||
<h3>Total Gains/Losses</h3>
|
||
<div class="metric-value" id="dashboard-total-gains">€0.00</div>
|
||
<div class="metric-change" id="dashboard-gains-percentage">0.0%</div>
|
||
</div>
|
||
|
||
<div class="dashboard-card monthly-investment">
|
||
<h3>Monthly Investment</h3>
|
||
<div class="metric-value" id="monthly-investment">€0.00</div>
|
||
<div class="metric-detail" id="monthly-trades">0 trades</div>
|
||
</div>
|
||
|
||
<div class="dashboard-card yearly-investment">
|
||
<h3>Yearly Investment</h3>
|
||
<div class="metric-value" id="yearly-investment">€0.00</div>
|
||
<div class="metric-detail" id="yearly-trades">0 trades</div>
|
||
</div>
|
||
|
||
<div class="dashboard-card total-shares">
|
||
<h3>Total Shares</h3>
|
||
<div class="metric-value" id="total-shares">0</div>
|
||
<div class="metric-detail" id="unique-etfs">0 ETFs</div>
|
||
</div>
|
||
|
||
<div class="dashboard-card cost-basis">
|
||
<h3>Total Investment</h3>
|
||
<div class="metric-value" id="dashboard-cost-basis">€0.00</div>
|
||
<div class="metric-detail" id="dashboard-avg-return">Avg return: 0.0%</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="etf-breakdown">
|
||
<h3>ETF Breakdown</h3>
|
||
<div id="etf-breakdown-list" class="breakdown-list">
|
||
<p class="no-data">No ETF positions yet</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Add Trade Page -->
|
||
<div id="add-trade-page" class="page">
|
||
<div class="trade-form-container">
|
||
<h2>Add New Trade</h2>
|
||
<form id="trade-form" class="trade-form">
|
||
<div class="form-group">
|
||
<label for="etf-symbol">ETF Symbol</label>
|
||
<input type="text" id="etf-symbol" required placeholder="e.g., VWCE, SPY, QQQ">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="trade-type">Trade Type</label>
|
||
<select id="trade-type" required>
|
||
<option value="">Select trade type</option>
|
||
<option value="buy">Buy</option>
|
||
<option value="sell">Sell</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="shares">Number of Shares</label>
|
||
<input type="number" id="shares" step="0.001" min="0" required placeholder="0.000">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="price">Price per Share</label>
|
||
<input type="number" id="price" step="0.01" min="0" required placeholder="0.00">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="currency">Currency</label>
|
||
<select id="currency" required>
|
||
<option value="">Select currency</option>
|
||
<option value="EUR">Euro (€)</option>
|
||
<option value="USD">US Dollar ($)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="trade-date">Trade Date</label>
|
||
<input type="date" id="trade-date" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="trade-time">Trade Time (24h format)</label>
|
||
<input type="time" id="trade-time" required step="1">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="fees">Fees (optional)</label>
|
||
<input type="number" id="fees" step="0.01" min="0" placeholder="0.00">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="notes">Notes (optional)</label>
|
||
<textarea id="notes" rows="3" placeholder="Additional notes about this trade..."></textarea>
|
||
</div>
|
||
|
||
<button type="submit" class="submit-btn">Add Trade</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Trade History Page -->
|
||
<div id="trade-history-page" class="page">
|
||
<div class="trade-history-container">
|
||
<h2>Trade History</h2>
|
||
<div class="trades-controls">
|
||
<button id="clear-trades" class="clear-btn">Clear All Trades</button>
|
||
<button id="export-trades" class="export-btn">Export to JSON</button>
|
||
</div>
|
||
<div id="trades-list" class="trades-list">
|
||
<p class="no-trades">No trades recorded yet. Add your first trade above!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Portfolio Page -->
|
||
<div id="portfolio-page" class="page">
|
||
<div class="portfolio-container">
|
||
<h2>Portfolio Summary</h2>
|
||
<div id="portfolio-summary" class="portfolio-summary">
|
||
<p class="no-data">No portfolio data yet</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Admin Panel Page -->
|
||
<div id="admin-page" class="page">
|
||
<div class="admin-container">
|
||
<h2>Admin Panel - User Management</h2>
|
||
|
||
<div class="admin-actions">
|
||
<h3>Create New User</h3>
|
||
<form id="create-user-form" class="create-user-form">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="new-username">Username</label>
|
||
<input type="text" id="new-username" required placeholder="Enter username">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="new-password">Password</label>
|
||
<input type="password" id="new-password" required placeholder="Enter password">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="new-email">Email (optional)</label>
|
||
<input type="email" id="new-email" placeholder="Enter email">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="new-is-admin"> Admin User
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="create-user-btn">Create User</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="users-list-section">
|
||
<h3>Existing Users</h3>
|
||
<div id="users-list" class="users-list">
|
||
<p class="no-data">Loading users...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Gains/Losses Page -->
|
||
<div id="gains-losses-page" class="page">
|
||
<div class="gains-losses-container">
|
||
<h2>Gains & Losses</h2>
|
||
|
||
<div class="performance-summary">
|
||
<div class="performance-grid">
|
||
<div class="performance-card total-gains">
|
||
<h3>Total Gains/Losses</h3>
|
||
<div class="performance-value" id="total-performance">€0.00</div>
|
||
<div class="performance-percentage" id="total-percentage">0.0%</div>
|
||
</div>
|
||
|
||
<div class="performance-card unrealized-gains">
|
||
<h3>Unrealized P&L</h3>
|
||
<div class="performance-value" id="unrealized-performance">€0.00</div>
|
||
<div class="performance-percentage" id="unrealized-percentage">0.0%</div>
|
||
</div>
|
||
|
||
<div class="performance-card current-value">
|
||
<h3>Current Portfolio Value</h3>
|
||
<div class="performance-value" id="current-portfolio-value">€0.00</div>
|
||
<div class="performance-detail" id="last-updated">Not updated</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="price-updates-section">
|
||
<h3>Update Current Prices</h3>
|
||
<div class="price-update-controls">
|
||
<button id="update-all-prices" class="update-all-btn">Update All Prices</button>
|
||
<span class="update-info">Enter current market prices to calculate gains/losses</span>
|
||
</div>
|
||
<div id="price-update-list" class="price-update-list">
|
||
<p class="no-data">No ETF positions to update</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gains-breakdown-section">
|
||
<h3>Individual Performance</h3>
|
||
<div id="gains-breakdown-list" class="gains-breakdown-list">
|
||
<p class="no-data">Update prices to see performance breakdown</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html> |