BluefxPraise/The_Oracle
0
1<!doctype html>2<html lang="en">3<head>4<meta charset="utf-8" />5<meta name="viewport" content="width=device-width,initial-scale=1" />6<title>The Oracle — Dashboard</title>7<style>8 :root {9 --bg: #0a0d12;10 --card: #131821;11 --line: #1f2733;12 --text: #e6edf3;13 --muted: #7d8590;14 --accent: #58a6ff;15 --green: #3fb950;16 --red: #f85149;17 --amber: #d29922;18 }19 * { box-sizing: border-box; }20 body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,Segoe UI,Roboto,sans-serif; }21 header { padding: 18px 22px; border-bottom: 1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }22 header h1 { margin:0; font-size: 18px; letter-spacing: .04em; }23 header .pill { font-size: 12px; padding: 4px 10px; border:1px solid var(--line); border-radius:99px; color:var(--muted); }24 .grid { display:grid; gap:14px; padding:18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }25 .card { background:var(--card); border:1px solid var(--line); border-radius: 14px; padding:14px 16px; }26 .kpi .label { color:var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }27 .kpi .value { font-size: 22px; font-weight:600; margin-top:6px; }28 .pos { color: var(--green); }29 .neg { color: var(--red); }30 .warn { color: var(--amber); }31 table { width:100%; border-collapse: collapse; font-size: 13px; }32 th, td { text-align:left; padding: 8px 10px; border-bottom: 1px solid var(--line); }33 th { color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing:.06em; }34 .dot { display:inline-block; width: 10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }35 .dot.green { background: var(--green); box-shadow: 0 0 8px var(--green); }36 .dot.red { background: var(--red); }37 .dot.amber { background: var(--amber); }38 .section-title { font-size: 12px; text-transform: uppercase; letter-spacing:.08em; color:var(--muted); margin: 16px 22px 8px; }39 footer { color:var(--muted); font-size: 11px; padding: 18px 22px; }40 @media (max-width: 600px) { header h1 { font-size: 15px; } .grid { padding: 12px; } }41</style>42</head>43<body>44<header>45 <h1>🧠 THE ORACLE — LIVE DASHBOARD</h1>46 <span class="pill" id="phase">phase: …</span>47</header>48 49<div class="section-title">Live KPIs</div>50<div class="grid" id="kpis"></div>51 52<div class="section-title">Models</div>53<div class="grid" id="models"></div>54 55<div class="section-title">Open Signals</div>56<div style="padding: 0 18px 18px;">57 <div class="card">58 <table id="signals">59 <thead>60 <tr><th>Time</th><th>Pair</th><th>Dir</th><th>Entry</th><th>SL</th><th>TP</th><th>Conf</th><th>Regime</th></tr>61 </thead>62 <tbody></tbody>63 </table>64 </div>65</div>66 67<footer id="footer">refreshing…</footer>68 69<script>70async function load() {71 try {72 const r = await fetch('/api/state');73 const s = await r.json();74 document.getElementById('phase').textContent = 'phase: ' + s.phase;75 76 const k = document.getElementById('kpis');77 const pnlClass = s.daily_pnl_pct >= 0 ? 'pos' : 'neg';78 k.innerHTML = `79 <div class="card kpi"><div class="label">Mode</div><div class="value">${s.halted ? '<span class="warn">HALTED</span>' : '<span class="pos">LIVE</span>'}</div></div>80 <div class="card kpi"><div class="label">Daily PnL %</div><div class="value ${pnlClass}">${s.daily_pnl_pct.toFixed(2)}%</div></div>81 <div class="card kpi"><div class="label">Open Signals</div><div class="value">${s.open_signals}</div></div>82 <div class="card kpi"><div class="label">Total Today</div><div class="value">${s.signals_today}</div></div>83 <div class="card kpi"><div class="label">Consec Losses</div><div class="value">${s.consecutive_losses}</div></div>84 <div class="card kpi"><div class="label">Confidence Threshold</div><div class="value">${s.threshold.toFixed(0)}%</div></div>85 <div class="card kpi"><div class="label">Risk %</div><div class="value">${s.risk_pct.toFixed(2)}%</div></div>86 <div class="card kpi"><div class="label">Targets Active</div><div class="value">${s.active_targets}</div></div>87 `;88 89 const m = document.getElementById('models');90 m.innerHTML = (s.models || []).map(x => `91 <div class="card">92 <div class="label" style="color:var(--muted); font-size:11px;">MODEL</div>93 <div style="font-size:16px; margin-top:4px;">94 <span class="dot ${x.healthy ? 'green' : 'red'}"></span>${x.name}95 </div>96 <div style="font-size:12px; color:var(--muted); margin-top:6px;">w=${x.weight.toFixed(2)} · wr=${x.winrate.toFixed(1)}%</div>97 </div>98 `).join('');99 100 const tb = document.querySelector('#signals tbody');101 tb.innerHTML = (s.open || []).map(o => `102 <tr>103 <td>${(o.ts || '').substring(11,16)}</td>104 <td>${o.pair}</td>105 <td class="${o.direction === 'BUY' ? 'pos' : 'neg'}">${o.direction}</td>106 <td>${(+o.entry).toFixed(5)}</td>107 <td>${(+o.sl).toFixed(5)}</td>108 <td>${(+o.tp).toFixed(5)}</td>109 <td>${(+o.confidence).toFixed(0)}%</td>110 <td>${o.regime || '-'}</td>111 </tr>112 `).join('') || '<tr><td colspan="8" style="color:var(--muted)">No open signals.</td></tr>';113 114 document.getElementById('footer').textContent = 'updated ' + new Date().toLocaleTimeString();115 } catch (e) {116 document.getElementById('footer').textContent = 'error: ' + e.message;117 }118}119load(); setInterval(load, 10000);120</script>121</body>122</html>123