2025-08-28 16:36:40 +01:00
<!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" >
2025-08-29 10:11:56 +01:00
< li class = "menu-item active" data-page = "dashboard" >
2025-08-28 16:36:40 +01:00
< span class = "menu-icon" > 📊< / span >
< span class = "menu-text" > Dashboard< / span >
< / li >
2025-08-29 10:11:56 +01:00
< li class = "menu-item" data-page = "portfolio" >
2025-08-28 16:36:40 +01:00
< span class = "menu-icon" > 💼< / span >
< span class = "menu-text" > Portfolio< / span >
< / li >
2025-08-29 10:11:56 +01:00
< li class = "menu-item" data-page = "trade-history" >
2025-08-28 16:36:40 +01:00
< span class = "menu-icon" > 📋< / span >
< span class = "menu-text" > Trade History< / span >
< / li >
2025-08-29 10:11:56 +01:00
< li class = "menu-item" data-page = "gains-losses" >
2025-08-28 16:36:40 +01:00
< span class = "menu-icon" > 📈< / span >
< span class = "menu-text" > Gains/Losses< / span >
< / li >
2025-08-29 10:11:56 +01:00
< li class = "menu-item menu-separator" data-page = "add-trade" >
2025-08-28 16:36:40 +01:00
< span class = "menu-icon" > ➕ < / span >
< span class = "menu-text" > Add Trade< / span >
< / li >
2025-08-29 10:11:56 +01:00
< li class = "menu-item" data-page = "cgt-settings" >
2025-08-28 19:20:36 +01:00
< span class = "menu-icon" > 🧮< / span >
< span class = "menu-text" > CGT Settings< / span >
< / li >
2025-08-29 10:11:56 +01:00
< li class = "menu-item admin-only" data-page = "admin" style = "display: none;" >
2025-08-28 16:36:40 +01:00
< 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 >
2025-08-28 19:20:36 +01:00
< div class = "cgt-summary" id = "cgt-summary" style = "display: none;" >
< h3 > Capital Gains Tax Summary< / h3 >
< div class = "cgt-grid" >
< div class = "cgt-card total-cgt" >
< h4 > Estimated CGT Liability< / h4 >
< div class = "cgt-value" id = "total-cgt-liability" > €0.00< / div >
< div class = "cgt-detail" id = "cgt-effective-rate" > Effective rate: 0.0%< / div >
< / div >
< div class = "cgt-card after-tax" >
< h4 > After-Tax Gains< / h4 >
< div class = "cgt-value" id = "after-tax-gains" > €0.00< / div >
< div class = "cgt-detail" id = "exemption-used" > Exemption: €0 used< / div >
< / div >
< div class = "cgt-card holding-summary" >
< h4 > Holdings by Tax Rate< / h4 >
< div class = "holding-periods" id = "holding-periods-summary" >
< div class = "period-item" >
< span class = "period-label" > Short-term:< / span >
< span class = "period-value" > €0.00< / span >
< / div >
< div class = "period-item" >
< span class = "period-label" > Long-term:< / span >
< span class = "period-value" > €0.00< / span >
< / div >
< / div >
< / div >
< / div >
< / div >
2025-08-28 16:36:40 +01:00
< / 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 >
2025-08-28 19:20:36 +01:00
<!-- CGT Settings Page -->
< div id = "cgt-settings-page" class = "page" >
< div class = "cgt-settings-container" >
< h2 > Capital Gains Tax Settings< / h2 >
< div class = "cgt-explanation" >
< p > Configure your Capital Gains Tax rates based on holding periods. These rates will be used to calculate estimated tax liability on your realized and unrealized gains.< / p >
< / div >
< form id = "cgt-settings-form" class = "cgt-settings-form" >
< h3 > CGT Rate by Holding Period< / h3 >
< div class = "cgt-rates-grid" >
< div class = "cgt-rate-item" >
< label for = "cgt-1month" > 0-1 Month (%)< / label >
< input type = "number" id = "cgt-1month" min = "0" max = "100" step = "0.1" value = "40" class = "cgt-rate-input" >
< / div >
< div class = "cgt-rate-item" >
< label for = "cgt-6months" > 1-6 Months (%)< / label >
< input type = "number" id = "cgt-6months" min = "0" max = "100" step = "0.1" value = "35" class = "cgt-rate-input" >
< / div >
< div class = "cgt-rate-item" >
< label for = "cgt-1year" > 6 Months-1 Year (%)< / label >
< input type = "number" id = "cgt-1year" min = "0" max = "100" step = "0.1" value = "30" class = "cgt-rate-input" >
< / div >
< div class = "cgt-rate-item" >
< label for = "cgt-2years" > 1-2 Years (%)< / label >
< input type = "number" id = "cgt-2years" min = "0" max = "100" step = "0.1" value = "20" class = "cgt-rate-input" >
< / div >
< div class = "cgt-rate-item" >
< label for = "cgt-longterm" > 2+ Years (%)< / label >
< input type = "number" id = "cgt-longterm" min = "0" max = "100" step = "0.1" value = "10" class = "cgt-rate-input" >
< / div >
< / div >
< div class = "cgt-options" >
< h3 > Additional Settings< / h3 >
< div class = "form-group" >
< label for = "cgt-annual-exemption" > Annual CGT Exemption (€)< / label >
< input type = "number" id = "cgt-annual-exemption" min = "0" step = "1" value = "1270" placeholder = "0" >
< small > Annual tax-free allowance for capital gains< / small >
< / div >
< div class = "form-group" >
< label class = "checkbox-label" >
< input type = "checkbox" id = "cgt-enabled" checked > Enable CGT calculations
< / label >
< / div >
< / div >
< div class = "cgt-actions" >
< button type = "submit" class = "save-cgt-btn" > Save CGT Settings< / button >
< button type = "button" id = "reset-cgt-defaults" class = "reset-cgt-btn" > Reset to Defaults< / button >
< / div >
< / form >
< div class = "cgt-preview" >
< h3 > CGT Rate Preview< / h3 >
< div id = "cgt-preview-chart" class = "cgt-preview-chart" >
< div class = "rate-bar" data-period = "1month" >
< span class = "period-label" > 0-1M< / span >
< div class = "rate-value" > 40%< / div >
< / div >
< div class = "rate-bar" data-period = "6months" >
< span class = "period-label" > 1-6M< / span >
< div class = "rate-value" > 35%< / div >
< / div >
< div class = "rate-bar" data-period = "1year" >
< span class = "period-label" > 6M-1Y< / span >
< div class = "rate-value" > 30%< / div >
< / div >
< div class = "rate-bar" data-period = "2years" >
< span class = "period-label" > 1-2Y< / span >
< div class = "rate-value" > 20%< / div >
< / div >
< div class = "rate-bar" data-period = "longterm" >
< span class = "period-label" > 2Y+< / span >
< div class = "rate-value" > 10%< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
2025-08-28 16:36:40 +01:00
< / main >
< / div >
< / div >
< script src = "script.js" > < / script >
< / body >
< / html >
