2025-08-28 15:36:40 +00: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" >
2025-08-28 20:37:57 +00:00
< button class = "sidebar-collapse-btn" id = "sidebar-collapse-btn" title = "Collapse sidebar" > ‹ </ button >
2025-08-28 15:36:40 +00:00
< div class = "sidebar-header" >
< h2 > ETF Tracker</ h2 >
</ div >
< ul class = "sidebar-menu" >
2025-08-29 08:45:33 +00:00
< li class = "menu-item active" data-page = "dashboard" data-tooltip = "Dashboard" >
2025-08-28 15:36:40 +00:00
< span class = "menu-icon" > 📊</ span >
< span class = "menu-text" > Dashboard</ span >
</ li >
2025-08-29 08:45:33 +00:00
< li class = "menu-item" data-page = "portfolio" data-tooltip = "Portfolio" >
2025-08-28 15:36:40 +00:00
< span class = "menu-icon" > 💼</ span >
< span class = "menu-text" > Portfolio</ span >
</ li >
2025-08-29 08:45:33 +00:00
< li class = "menu-item" data-page = "trade-history" data-tooltip = "Trade History" >
2025-08-28 15:36:40 +00:00
< span class = "menu-icon" > 📋</ span >
< span class = "menu-text" > Trade History</ span >
</ li >
2025-08-29 08:45:33 +00:00
< li class = "menu-item" data-page = "gains-losses" data-tooltip = "Gains/Losses" >
2025-08-28 15:36:40 +00:00
< span class = "menu-icon" > 📈</ span >
< span class = "menu-text" > Gains/Losses</ span >
</ li >
2025-08-29 08:45:33 +00:00
< li class = "menu-item menu-separator" data-page = "add-trade" data-tooltip = "Add Trade" >
2025-08-28 15:36:40 +00:00
< span class = "menu-icon" > ➕ </ span >
< span class = "menu-text" > Add Trade</ span >
</ li >
2025-08-29 08:45:33 +00:00
< li class = "menu-item" data-page = "cgt-settings" data-tooltip = "CGT Settings" >
2025-08-28 18:20:36 +00:00
< span class = "menu-icon" > 🧮</ span >
< span class = "menu-text" > CGT Settings</ span >
</ li >
2025-08-29 08:45:33 +00:00
< li class = "menu-item admin-only" data-page = "admin" data-tooltip = "Admin Panel" style = "display: none;" >
2025-08-28 15:36:40 +00: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 18:20:36 +00: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 15:36:40 +00: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 18:20:36 +00: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 15:36:40 +00:00
</ main >
</ div >
</ div >
< script src = "script.js" ></ script >
</ body >
</ html >
