<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Gabagool Bot — Live Dashboard</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<div class="title">
<h1>Gabagool Bot</h1>
<span class="subtitle">Live Trading Dashboard</span>
</div>
<div class="status">
<span id="statusDot" class="dot"></span>
<span id="statusText">Connecting…</span>
<span id="lastUpdated">—</span>
</div>
</header>
<main>
<section class="grid">
<div class="card">
<h3>Starting Equity</h3>
<div class="value" id="startingCapital">—</div>
</div>
<div class="card">
<h3>Current Equity</h3>
<div class="value" id="currentBalance">—</div>
</div>
<div class="card">
<h3>P&L</h3>
<div class="value" id="totalPnl">—</div>
<div class="sub" id="totalPnlPercent">—</div>
</div>
<div class="card">
<h3>ROI</h3>
<div class="value" id="roi">—</div>
</div>
<div class="card">
<h3>Drawdown</h3>
<div class="value" id="drawdown">—</div>
</div>
<div class="card">
<h3>Win Rate</h3>
<div class="value" id="winRate">—</div>
</div>
<div class="card">
<h3>Trades</h3>
<div class="value" id="totalTrades">—</div>
</div>
<div class="card">
<h3>Locked Profit</h3>
<div class="value" id="lockedProfit">—</div>
</div>
</section>
<section class="panel">
<h2>Open Positions</h2>
<div class="table-wrap">
<table id="positionsTable">
<thead>
<tr>
<th>Market</th>
<th>Crypto</th>
<th>YES</th>
<th>NO</th>
<th>Paired</th>
<th>Unpaired YES</th>
<th>Unpaired NO</th>
<th>Avg YES</th>
<th>Avg NO</th>
<th>Locked Profit</th>
</tr>
</thead>
<tbody>
<tr><td colspan="10" class="muted">No data yet</td></tr>
</tbody>
</table>
</div>
</section>
<section class="panel">
<h2>Recent Trades</h2>
<div class="table-wrap">
<table id="tradesTable">
<thead>
<tr>
<th>Time</th>
<th>Market</th>
<th>Side</th>
<th>Action</th>
<th>Price</th>
<th>Size</th>
<th>Cost</th>
<th>Locked P&L</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr><td colspan="9" class="muted">No data yet</td></tr>
</tbody>
</table>
</div>
</section>
</main>
<footer>
<span>Read‑only • Auto refresh</span>
</footer>
<script src="app.js"></script>
</body>
</html>