index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Weather Bot | Dashboard</title> <base href="/weather-bot/"> <link rel="stylesheet" href="static/css/style.css"> </head> <body> <div class="app">  <header class="header"> <div class="header-left"> <div class="logo">WB</div> <div> <h1>Weather Bot</h1> <span class="header-sub" id="header-sub">Polymarket Weather Trading</span> </div> <span class="badge" id="mode-badge">DRY RUN</span> </div> <div class="header-right"> <span class="status-indicator" id="status-indicator"> <span class="status-dot" id="status-dot"></span> <span id="status-text">Connecting...</span> </span> <button class="btn btn-icon" id="scan-btn" onclick="triggerScan()" title="Run scan now"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 12.5A5.5 5.5 0 1 1 8 2.5a5.5 5.5 0 0 1 0 11zM8 4v4l3 1.5"/></svg> Scan </button> <button class="btn btn-icon" onclick="triggerResolve()" title="Check trade outcomes"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M6.5 12.5l-4-4 1.4-1.4L6.5 9.7l5.6-5.6 1.4 1.4z"/></svg> Resolve </button> </div> </header>  <div class="kill-switch-bar" id="kill-switch-bar" style="display:none"> <span>KILL SWITCH ACTIVE — <span id="kill-reason"></span></span> <button class="btn btn-danger btn-sm" onclick="toggleKillSwitch()">Deactivate</button> </div>  <div class="kpi-strip"> <div class="kpi"> <span class="kpi-label">Bankroll</span> <span class="kpi-value" id="bankroll">$0</span> </div> <div class="kpi-divider"></div> <div class="kpi"> <span class="kpi-label">Total P&L</span> <span class="kpi-value" id="daily-pnl">$0.00</span> </div> <div class="kpi-divider"></div> <div class="kpi"> <span class="kpi-label">Open</span> <span class="kpi-value" id="open-positions">0</span> </div> <div class="kpi-divider"></div> <div class="kpi"> <span class="kpi-label">Deployed</span> <span class="kpi-value" id="deployed">$0</span> </div> <div class="kpi-divider"></div> <div class="kpi"> <span class="kpi-label">Win Rate</span> <span class="kpi-value" id="win-rate">—</span> </div> <div class="kpi-divider"></div> <div class="kpi"> <span class="kpi-label">Trades</span> <span class="kpi-value" id="trades-today">0</span> </div> <div class="kpi-divider"></div> <div class="kpi"> <span class="kpi-label">Markets</span> <span class="kpi-value" id="markets-found">0</span> </div> <div class="kpi-divider"></div> <div class="kpi"> <span class="kpi-label">Last Scan</span> <span class="kpi-value kpi-value-sm" id="last-scan">Never</span> </div> </div>  <section class="section" id="section-open"> <div class="section-header"> <h2>Open Positions</h2> <span class="section-count" id="open-count">0</span> </div> <div id="open-trades-container"> <div class="empty-state" id="open-empty"> <div class="empty-icon">📭</div> <div>No open positions</div> <div class="empty-sub">Bot will open trades when edge is found</div> </div> </div> </section>  <div class="tabs"> <button class="tab active" onclick="switchTab('history', this)">Trade History</button> <button class="tab" onclick="switchTab('markets', this)">Markets</button> <button class="tab" onclick="switchTab('performance', this)">Performance</button> <button class="tab" onclick="switchTab('settings', this)">Settings</button> </div>  <div class="tab-content" id="tab-history"> <div class="tab-toolbar"> <div class="filter-group"> <button class="filter-btn active" onclick="filterHistory('all', this)">All</button> <button class="filter-btn" onclick="filterHistory('won', this)">Wins</button> <button class="filter-btn" onclick="filterHistory('lost', this)">Losses</button> <button class="filter-btn" onclick="filterHistory('pending', this)">Pending</button> </div> <span class="tab-info" id="history-info">0 trades</span> </div> <div class="table-wrap"> <table class="data-table" id="history-table"> <thead> <tr> <th>Date</th> <th>City</th> <th>Bet</th> <th>Side</th> <th>Price</th> <th>Size</th> <th>Edge</th> <th>Model vs Mkt</th> <th>Status</th> <th>P&L</th> </tr> </thead> <tbody id="history-body"> <tr><td colspan="10" class="empty">Loading...</td></tr> </tbody> </table> </div> </div>  <div class="tab-content hidden" id="tab-markets"> <div class="tab-toolbar"> <span class="tab-info" id="markets-info">0 active markets</span> </div> <div class="table-wrap"> <table class="data-table"> <thead> <tr> <th>City</th> <th>Date</th> <th>Question</th> <th>Threshold</th> <th>YES Price</th> <th>Volume</th> </tr> </thead> <tbody id="markets-body"> <tr><td colspan="6" class="empty">Loading...</td></tr> </tbody> </table> </div> </div>  <div class="tab-content hidden" id="tab-performance"> <div class="perf-grid">  <div class="perf-card"> <div class="perf-card-title">Total Resolved</div> <div class="perf-card-value" id="perf-total">0</div> </div> <div class="perf-card"> <div class="perf-card-title">Win Rate</div> <div class="perf-card-value" id="perf-winrate">—</div> </div> <div class="perf-card"> <div class="perf-card-title">Total P&L</div> <div class="perf-card-value" id="perf-pnl">$0.00</div> </div> <div class="perf-card"> <div class="perf-card-title">Unresolved</div> <div class="perf-card-value" id="perf-pending">0</div> </div> </div> <h3 class="sub-title">By Edge Tier</h3> <div class="table-wrap"> <table class="data-table"> <thead> <tr><th>Tier</th><th>Trades</th><th>Win Rate</th><th>Avg Edge</th><th>P&L</th></tr> </thead> <tbody id="perf-tier-body"> <tr><td colspan="5" class="empty">No data yet</td></tr> </tbody> </table> </div> <h3 class="sub-title">By City</h3> <div class="table-wrap"> <table class="data-table"> <thead> <tr><th>City</th><th>Trades</th><th>Win Rate</th><th>P&L</th></tr> </thead> <tbody id="perf-city-body"> <tr><td colspan="4" class="empty">No data yet</td></tr> </tbody> </table> </div> <h3 class="sub-title">Calibration</h3> <div class="table-wrap"> <table class="data-table"> <thead> <tr><th>City</th><th>Brier Score</th><th>MAE</th><th>Samples</th><th>Confidence</th></tr> </thead> <tbody id="perf-cal-body"> <tr><td colspan="5" class="empty">No calibration data</td></tr> </tbody> </table> </div> </div>  <div class="tab-content hidden" id="tab-settings"> <div class="settings-grid"> <div class="settings-card"> <h3>Bot Control</h3> <div class="setting-row"> <span>Mode</span> <span class="badge" id="ctrl-mode">DRY RUN</span> </div> <div class="setting-row"> <span>Kill Switch</span> <button class="btn btn-sm" id="kill-btn" onclick="toggleKillSwitch()">Activate</button> </div> <div class="setting-row"> <span>Scan Now</span> <button class="btn btn-sm btn-primary" onclick="triggerScan()">Run</button> </div> <div class="setting-row"> <span>Resolve Trades</span> <button class="btn btn-sm btn-primary" onclick="triggerResolve()">Resolve</button> </div> </div> <div class="settings-card"> <h3>Risk Parameters</h3> <div class="setting-row"><span>Max Daily Loss</span><span id="ctrl-max-loss">$20</span></div> <div class="setting-row"><span>Max Positions</span><span id="ctrl-max-pos">20</span></div> <div class="setting-row"><span>Bet Size</span><span>$1</span></div> <div class="setting-row"><span>Min Edge</span><span>10%</span></div> <div class="setting-row"><span>Min Volume</span><span>$5,000</span></div> <div class="setting-row"><span>Max Ensemble STD</span><span>7F</span></div> <div class="setting-row"><span>Max Slippage</span><span>3c</span></div> <div class="setting-row"><span>Kelly Fraction</span><span>20%</span></div> </div> <div class="settings-card"> <h3>Scan Schedule</h3> <div class="setting-row"><span>Scan Interval</span><span>15 min</span></div> <div class="setting-row"><span>Resolve Interval</span><span>10 min</span></div> <div class="setting-row"><span>Ensemble Members</span><span>82 (GFS+ECMWF)</span></div> <div class="setting-row"><span>Cities Covered</span><span>49</span></div> </div> </div> </div>  <footer class="footer"> <span>Polymarket Weather Bot v2</span> <span id="footer-time"></span> </footer> </div> <script src="static/js/app.js"></script> </body> </html>