Hugging Face's logo

Buckets:
Thanhanh9
/
Test

Files
xet
Thanhanh9/Test / forex-backtest-tracker /frontend /index.html
Thanhanh9's picture
Thanhanh9
download
raw
16.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Forex Backtest Tracker</title>
 <meta name="description" content="Track and compare forex backtesting results across multiple strategies." />
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
 <link rel="stylesheet" href="style.css" />
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
</head>
<body>
<!-- ──────────── SIDEBAR ──────────── -->
 <aside class="sidebar" id="sidebar">
 <div class="sidebar-logo">
 <span class="logo-icon">📈</span>
 <span class="logo-text">BacktestTracker</span>
 </div>
 <nav class="sidebar-nav">
 <a href="#" class="nav-item active" id="nav-dashboard" onclick="showPage('dashboard')">
 <span class="nav-icon">🏠</span> Dashboard
 </a>
 <a href="#" class="nav-item" id="nav-strategies" onclick="showPage('strategies')">
 <span class="nav-icon">📋</span> Strategies
 </a>
 </nav>
 <div class="sidebar-footer">
 <span>Forex Backtest v1.0</span>
 </div>
 </aside>
<!-- ──────────── MAIN CONTENT ──────────── -->
 <main class="main-content" id="main-content">
<!-- TOP BAR -->
 <header class="topbar">
 <div class="topbar-left" style="display:flex; align-items:center; gap:16px;">
 <button class="sidebar-toggle" onclick="toggleSidebar()" title="Toggle sidebar"
 style="background:none; border:none; color:var(--text-primary); font-size:20px; cursor:pointer;">☰</button>
 <h1 class="topbar-title" id="page-title">Dashboard</h1>
 </div>
 <div class="topbar-right">
 <button class="btn btn-primary" id="topbar-btn" onclick="openStrategyModal()">
 + New Strategy
 </button>
 </div>
 </header>
<!-- ── PAGE: DASHBOARD ── -->
 <section class="page active" id="page-dashboard">
 <!-- Summary Cards -->
 <div class="stats-grid" id="summary-cards">
 <div class="stat-card">
 <div class="stat-label">Total Strategies</div>
 <div class="stat-value" id="sum-total">0</div>
 </div>
 <div class="stat-card">
 <div class="stat-label">Active</div>
 <div class="stat-value green" id="sum-active">0</div>
 </div>
 <div class="stat-card">
 <div class="stat-label">Testing</div>
 <div class="stat-value yellow" id="sum-testing">0</div>
 </div>
 <div class="stat-card">
 <div class="stat-label">Total Backtests</div>
 <div class="stat-value blue" id="sum-backtests">0</div>
 </div>
 </div>
<!-- Charts Row -->
 <div class="charts-row">
 <div class="card chart-card">
 <div class="card-header">
 <span class="card-title">Net Profit % Comparison</span>
 <select id="chart-metric-select" class="select-sm" onchange="renderComparisonChart()">
 <option value="net_profit">Net Profit %</option>
 <option value="profit_factor">Profit Factor</option>
 <option value="max_dd_pct">Max DD %</option>
 <option value="rr">RR</option>
 <option value="total_return">Total Return</option>
 <option value="carg">CARG</option>
 </select>
 </div>
 <div class="chart-wrapper"><canvas id="comparison-chart"></canvas></div>
 </div>
 <div class="card chart-card">
 <div class="card-header">
 <span class="card-title">Winrate Comparison</span>
 </div>
 <div class="chart-wrapper"><canvas id="winrate-chart"></canvas></div>
 </div>
 </div>
<!-- Ranking Table -->
 <div class="card">
 <div class="card-header">
 <span class="card-title">Strategy Rankings</span>
 <div class="sort-controls">
 <label class="select-label">Sort by</label>
 <select id="rank-sort-field" class="select-sm" onchange="renderRankingTable()">
 <option value="net_profit">Net Profit %</option>
 <option value="profit_factor">Profit Factor</option>
 <option value="max_dd_pct">Max DD %</option>
 <option value="rr">RR</option>
 <option value="total_return">Total Return</option>
 <option value="carg">CARG</option>
 <option value="profit_trade">Profit Trades</option>
 </select>
 <select id="rank-sort-dir" class="select-sm" onchange="renderRankingTable()">
 <option value="desc">↓ Best first</option>
 <option value="asc">↑ Worst first</option>
 </select>
 </div>
 </div>
 <div class="table-wrapper">
 <table class="data-table" id="ranking-table">
 <thead>
 <tr>
 <th>#</th>
 <th>Strategy</th>
 <th>Status</th>
 <th>Backtests</th>
 <th>Net Profit %</th>
 <th>Profit Factor</th>
 <th>Max DD %</th>
 <th>RR</th>
 <th>Total Return</th>
 <th>CARG</th>
 <th></th>
 </tr>
 </thead>
 <tbody id="ranking-tbody"></tbody>
 </table>
 </div>
 </div>
 </section>
<!-- ── PAGE: STRATEGIES LIST ── -->
 <section class="page" id="page-strategies">
 <div class="strategies-grid" id="strategies-grid"></div>
 </section>
<!-- ── PAGE: STRATEGY DETAIL ── -->
 <section class="page" id="page-detail">
 <button class="btn btn-ghost back-btn" onclick="showPage('strategies')">← Back</button>
<!-- Strategy header -->
 <div class="card strategy-header-card" id="detail-header">
 <div class="detail-name-row">
 <div class="detail-name-badge">
 <h2 id="detail-name"></h2>
 <span class="badge" id="detail-status-badge"></span>
 </div>
 <div class="detail-actions">
 <button class="btn btn-secondary" onclick="openEditStrategyModal()">Edit</button>
 <button class="btn btn-primary" onclick="openBacktestModal()">+ Add Backtest</button>
 </div>
 </div>
 <div class="detail-meta-row">
 <p id="detail-description" class="detail-description"></p>
 <span class="detail-details-inline" id="detail-details-section">
 <span class="detail-details-sep" id="detail-details-sep"> ·</span>
 <span id="detail-details" class="detail-details-text"></span>
 </span>
 </div>
 </div>
<!-- Aggregated Stats -->
 <div class="card">
 <div class="card-header">
 <span class="card-title">Aggregated Metrics (Average across all backtests)</span>
 <span class="agg-count" id="detail-agg-count"></span>
 </div>
 <div class="metrics-grid" id="detail-metrics-grid"></div>
 </div>
<!-- Backtest Entries Table -->
 <div class="card">
 <div class="card-header">
 <span class="card-title">Backtest Entries</span>
 </div>
 <div class="table-wrapper">
 <table class="data-table" id="backtest-entries-table">
 <thead>
 <tr>
 <th>Pair</th>
 <th>TF</th>
 <th>Period</th>
 <th>Net P%</th>
 <th>Total Ret</th>
 <th>Trades</th>
 <th>PF</th>
 <th>Max DD%</th>
 <th>AR/MDD</th>
 <th>Avg P</th>
 <th>Avg L</th>
 <th>Recover</th>
 <th>Lgst P</th>
 <th>Lgst L</th>
 <th>CARG</th>
 <th>RR</th>
 <th></th>
 </tr>
 </thead>
 <tbody id="backtest-entries-tbody"></tbody>
 </table>
 </div>
 </div>
 </section>
</main>
<!-- ──────────── MODALS ──────────── -->
<!-- Strategy Modal -->
 <div class="modal-overlay" id="strategy-modal" onclick="closeModal('strategy-modal')">
 <div class="modal" onclick="event.stopPropagation()">
 <div class="modal-header">
 <h3 id="strategy-modal-title">New Strategy</h3>
 <button class="modal-close" onclick="closeModal('strategy-modal')">×</button>
 </div>
 <div class="modal-body">
 <form id="strategy-form">
 <input type="hidden" id="strategy-id" />
 <div class="form-group">
 <label class="field-label">Name *</label>
 <input type="text" id="strategy-name" class="form-input" placeholder="e.g. RSI System v3" required />
 </div>
 <div class="form-group">
 <label class="field-label">Status</label>
 <select id="strategy-status" class="form-input">
 <option value="testing">🔬 Testing</option>
 <option value="active">✅ Active</option>
 </select>
 </div>
 <div class="form-group">
 <label class="field-label">Description</label>
 <textarea id="strategy-description" class="form-input" rows="4"
 placeholder="Brief description..."></textarea>
 </div>
 <div class="form-group">
 <label class="field-label">Strategy Details</label>
 <textarea id="strategy-details" class="form-input" rows="6"
 placeholder="Entry rules, indicators, risk management..."></textarea>
 </div>
 </form>
 </div>
 <div class="modal-footer">
 <button class="btn btn-ghost" onclick="closeModal('strategy-modal')">Cancel</button>
 <button class="btn btn-primary" onclick="saveStrategy()">Save Strategy</button>
 </div>
 </div>
 </div>
<!-- Backtest Entry Modal -->
 <div class="modal-overlay" id="backtest-modal" onclick="closeModal('backtest-modal')">
 <div class="modal modal-wide" onclick="event.stopPropagation()">
 <div class="modal-header">
 <h3 id="backtest-modal-title">Add Backtest Entry</h3>
 <button class="modal-close" onclick="closeModal('backtest-modal')">×</button>
 </div>
 <div class="modal-body">
 <form id="backtest-form">
 <input type="hidden" id="backtest-id" />
<!-- Meta -->
 <div class="form-row-3">
 <div class="form-group">
 <label class="field-label">Currency Pair *</label>
 <input type="text" id="bt-pair" class="form-input" placeholder="EURUSD" required />
 </div>
 <div class="form-group">
 <label class="field-label">Timeframe *</label>
 <input type="text" id="bt-timeframe" class="form-input" placeholder="H1" required />
 </div>
 <div class="form-group">
 <label class="field-label">Period From</label>
 <input type="text" id="bt-date-from" class="form-input" placeholder="2023-01-01" />
 </div>
 </div>
 <div class="form-row-3">
 <div class="form-group">
 <label class="field-label">Period To</label>
 <input type="text" id="bt-date-to" class="form-input" placeholder="2024-01-01" />
 </div>
 <div class="form-group" style="grid-column: span 2">
 <label class="field-label">Notes</label>
 <input type="text" id="bt-notes" class="form-input" placeholder="Any notes..." />
 </div>
 </div>
<!-- Metrics Divider -->
 <div class="form-divider"><span>📊 Metrics</span></div>
<div class="form-row-4">
 <div class="form-group">
 <label class="field-label">Net Profit %</label>
 <input type="number" step="any" id="bt-net_profit" class="form-input" placeholder="0.00" />
 </div>
 <div class="form-group">
 <label class="field-label">Initial Balance</label>
 <input type="number" step="any" id="bt-initial_balance" class="form-input" placeholder="0.00" />
 </div>
 <div class="form-group">
 <label class="field-label">Total Return</label>
 <input type="number" step="any" id="bt-total_return" class="form-input" placeholder="0.00" />
 </div>
 <div class="form-group">
 <label class="field-label">Total Trades</label>
 <input type="number" id="bt-total_trades" class="form-input" placeholder="0" />
 </div>
 <div class="form-group">
 <label class="field-label">Profit Factor</label>
 <input type="number" step="any" id="bt-profit_factor" class="form-input" placeholder="0.00" />
 </div>
 <div class="form-group">
 <label class="field-label">Max DD %</label>
 <input type="number" step="any" id="bt-max_dd_pct" class="form-input" placeholder="0.00" />
 </div>
 <div class="form-group">
 <label class="field-label">AR/MDD</label>
 <input type="number" step="any" id="bt-ar_mdd" class="form-input" placeholder="0.00" />
 </div>
 <div class="form-group">
 <label class="field-label">Avg Profit Trade</label>
 <input type="number" step="any" id="bt-avg_profit_trade" class="form-input" placeholder="0.00" />
 </div>
 <div class="form-group">
 <label class="field-label">Avg Loss Trade</label>
 <input type="number" step="any" id="bt-avg_loss_trade" class="form-input" placeholder="0.00" />
 </div>
 <div class="form-group">
 <label class="field-label">Recover Factor</label>
 <input type="number" step="any" id="bt-recover_factor" class="form-input" placeholder="0.00" />
 </div>
 <div class="form-group">
 <label class="field-label">Largest Profit Trade</label>
 <input type="number" step="any" id="bt-largest_profit_trade" class="form-input" placeholder="0.00" />
 </div>
 <div class="form-group">
 <label class="field-label">Largest Loss Trade</label>
 <input type="number" step="any" id="bt-largest_loss_trade" class="form-input" placeholder="0.00" />
 </div>
 <div class="form-group">
 <label class="field-label">CARG</label>
 <input type="number" step="any" id="bt-carg" class="form-input" placeholder="0.00" />
 </div>
 <div class="form-group">
 <label class="field-label">RR</label>
 <input type="number" step="any" id="bt-rr" class="form-input" placeholder="0.00" />
 </div>
 </div>
 </form>
 </div>
 <div class="modal-footer">
 <button class="btn btn-ghost" onclick="closeModal('backtest-modal')">Cancel</button>
 <button class="btn btn-primary" onclick="saveBacktest()">Save Backtest</button>
 </div>
 </div>
 </div>
<!-- Confirm Delete Modal -->
 <div class="modal-overlay" id="confirm-modal" onclick="closeModal('confirm-modal')">
 <div class="modal modal-sm" onclick="event.stopPropagation()">
 <div class="modal-header">
 <h3>Confirm Delete</h3>
 <button class="modal-close" onclick="closeModal('confirm-modal')">×</button>
 </div>
 <div class="modal-body">
 <p id="confirm-message">Are you sure you want to delete this?</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-ghost" onclick="closeModal('confirm-modal')">Cancel</button>
 <button class="btn btn-danger" id="confirm-action-btn">Delete</button>
 </div>
 </div>
 </div>
<!-- Toast -->
 <div class="toast" id="toast"></div>
<script src="app.js"></script>
</body>
</html>

Xet Storage Details

Size:
16.3 kB
·
Xet hash:
919b30a2f9665c1ff04cddd481cc75d9fdfe312d9e86e52db33a3a45f5a6492d

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.