mirror of
https://github.com/Xe138/AI-Trader.git
synced 2026-04-02 09:37:23 -04:00
113 lines
4.2 KiB
HTML
113 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Portfolio Analysis - LiveTradeBench</title>
|
|
<link rel="stylesheet" href="assets/css/styles.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar">
|
|
<div class="nav-container">
|
|
<div class="nav-brand">
|
|
<span class="brand-icon">📊</span>
|
|
<h1>LiveTradeBench</h1>
|
|
</div>
|
|
<ul class="nav-menu">
|
|
<li><a href="index.html" class="nav-link">Asset Evolution</a></li>
|
|
<li><a href="portfolio.html" class="nav-link active">Portfolio Analysis</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="container">
|
|
<header class="page-header">
|
|
<h2>Agent Portfolio Breakdown</h2>
|
|
<p class="subtitle">Detailed analysis of each AI agent's holdings and performance</p>
|
|
</header>
|
|
|
|
<section class="agent-selector-section">
|
|
<label for="agentSelect">Select Agent:</label>
|
|
<select id="agentSelect" class="agent-select"></select>
|
|
</section>
|
|
|
|
<section class="portfolio-grid">
|
|
<div class="portfolio-card">
|
|
<h3>Performance Metrics</h3>
|
|
<div class="metrics-list">
|
|
<div class="metric-item">
|
|
<span class="metric-label">Total Asset Value</span>
|
|
<span class="metric-value" id="totalAsset">$0.00</span>
|
|
</div>
|
|
<div class="metric-item">
|
|
<span class="metric-label">Total Return</span>
|
|
<span class="metric-value" id="totalReturn">0.00%</span>
|
|
</div>
|
|
<div class="metric-item">
|
|
<span class="metric-label">Cash Position</span>
|
|
<span class="metric-value" id="cashPosition">$0.00</span>
|
|
</div>
|
|
<div class="metric-item">
|
|
<span class="metric-label">Total Trades</span>
|
|
<span class="metric-value" id="totalTrades">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="portfolio-card">
|
|
<h3>Asset Allocation</h3>
|
|
<div class="chart-container-small">
|
|
<canvas id="allocationChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="holdings-section">
|
|
<h3>Current Holdings</h3>
|
|
<div class="holdings-scroll-wrapper">
|
|
<div class="holdings-table-container">
|
|
<table class="holdings-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Symbol</th>
|
|
<th>Shares</th>
|
|
<th>Current Price</th>
|
|
<th>Market Value</th>
|
|
<th>Weight</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="holdingsTableBody">
|
|
<!-- Populated by JavaScript -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="trade-history-section">
|
|
<h3>Recent Trade Activity</h3>
|
|
<div class="trade-timeline" id="tradeTimeline">
|
|
<!-- Populated by JavaScript -->
|
|
</div>
|
|
</section>
|
|
|
|
<div class="loading-overlay" id="loadingOverlay">
|
|
<div class="spinner"></div>
|
|
<p>Loading portfolio data...</p>
|
|
</div>
|
|
|
|
<button class="scroll-to-top" id="scrollToTop" aria-label="Scroll to top">
|
|
↑
|
|
</button>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<p>LiveTradeBench © 2025 | AI-Powered Trading Agent Benchmark</p>
|
|
</footer>
|
|
|
|
<script src="assets/js/data-loader.js"></script>
|
|
<script src="assets/js/portfolio.js"></script>
|
|
</body>
|
|
</html>
|