82 lines
2.8 KiB
HTML
82 lines
2.8 KiB
HTML
<!doctype html>
|
||
<html lang="pl">
|
||
<head>
|
||
<meta charset="utf-8"/>
|
||
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
||
<title>Trader – Panel</title>
|
||
<link rel="stylesheet" href="/static/style.css"/>
|
||
<style>
|
||
body { font-family: system-ui, Arial, sans-serif; margin: 0; padding: 1rem; background: #fafafa; }
|
||
.toolbar { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem; }
|
||
.badge { padding:.2rem .5rem; border-radius:.5rem; background:#ddd; font-weight:600; }
|
||
.badge.ok { background:#d1fae5; }
|
||
.badge.err { background:#fee2e2; }
|
||
.grid { display:grid; grid-template-columns: 1fr; gap: 1rem; }
|
||
@media(min-width: 900px){ .grid{ grid-template-columns: 1fr 1fr; } }
|
||
.card { border:1px solid #eee; border-radius:.75rem; padding:1rem; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.04); }
|
||
table { width:100%; border-collapse:collapse; }
|
||
th, td { border-bottom:1px solid #eee; padding:.4rem .5rem; }
|
||
td.num { text-align:right; font-variant-numeric: tabular-nums; }
|
||
button { cursor:pointer; }
|
||
.muted{ color:#666; }
|
||
.now { display:flex; gap:.5rem; align-items:center; }
|
||
progress { width: 220px; height: 10px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="toolbar card">
|
||
<span>Loop:</span>
|
||
<span id="loopState" class="badge">–</span>
|
||
<button id="btnStart">Start</button>
|
||
<button id="btnStop">Stop</button>
|
||
<button id="btnTick" title="Wykonaj jedną rundę (1 ticker)">Tick</button>
|
||
|
||
<span>| Auto-refresh:</span>
|
||
<button id="autoOn">On</button>
|
||
<button id="autoOff">Off</button>
|
||
<label class="muted">co <select id="refreshMs">
|
||
<option value="1000">1s</option>
|
||
<option value="2000" selected>2s</option>
|
||
<option value="5000">5s</option>
|
||
<option value="10000">10s</option>
|
||
</select></label>
|
||
|
||
<span>| Runda: <b id="roundNo">–</b></span>
|
||
<span>| Gotówka: <b id="cash">–</b></span>
|
||
</div>
|
||
|
||
<div class="card now">
|
||
<b>Teraz:</b>
|
||
<span id="stage">–</span>
|
||
<span id="ticker">–</span>
|
||
<span id="progressText" class="muted">0 / 0</span>
|
||
<progress id="progress" value="0" max="0"></progress>
|
||
<span class="muted">Ostatnia akcja:</span>
|
||
<span id="lastAction">–</span>
|
||
</div>
|
||
|
||
<div class="grid">
|
||
<div class="card">
|
||
<h3>Pozycje</h3>
|
||
<table id="positions">
|
||
<thead>
|
||
<tr><th>Ticker</th><th>Strona</th><th>Ilość</th><th>Wejście</th><th>Ostatnia</th><th>PnL</th></tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Transakcje (ostatnie 50)</h3>
|
||
<table id="trades">
|
||
<thead>
|
||
<tr><th>Czas</th><th>Ticker</th><th>Akcja</th><th>Cena</th><th>Ilość</th></tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/static/app.js"></script>
|
||
</body>
|
||
</html>
|