227 lines
16 KiB
HTML
227 lines
16 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="color-scheme" content="dark">
|
||
<meta name="theme-color" content="#090b0f">
|
||
<meta name="description" content="Операционная панель TradeBot">
|
||
<title>TradeBot — панель управления</title>
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23111318'/%3E%3Cpath d='M14 17h36v8H36v24h-8V25H14z' fill='%2326d99a'/%3E%3C/svg%3E">
|
||
<link rel="stylesheet" href="/assets/dashboard.css?v=3">
|
||
</head>
|
||
<body>
|
||
<div class="app-shell">
|
||
<aside class="sidebar" aria-label="Основная навигация">
|
||
<a class="brand" href="#overview" aria-label="TradeBot — обзор">
|
||
<span class="brand-mark" aria-hidden="true">T</span>
|
||
<span><strong>TradeBot</strong><small>Operations</small></span>
|
||
</a>
|
||
|
||
<nav class="nav-list">
|
||
<button class="nav-item is-active" type="button" data-page="overview" aria-label="Обзор" aria-current="page">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="M4 13h6V4H4v9Zm0 7h6v-5H4v5Zm10 0h6v-9h-6v9Zm0-16v5h6V4h-6Z"/></svg>
|
||
<span>Обзор</span>
|
||
</button>
|
||
<button class="nav-item" type="button" data-page="markets" aria-label="Рынки">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="m4 17 5-5 4 3 7-8v3l-7 8-4-3-5 5v-3Z"/></svg>
|
||
<span>Рынки</span>
|
||
</button>
|
||
<button class="nav-item" type="button" data-page="positions" aria-label="Позиции">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="M4 6h16v12H4V6Zm2 3v6h12V9H6Zm2 1h4v4H8v-4Z"/></svg>
|
||
<span>Позиции</span>
|
||
</button>
|
||
<button class="nav-item" type="button" data-page="activity" aria-label="Активность">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="M5 4h14v3H5V4Zm0 6h14v3H5v-3Zm0 6h14v3H5v-3Z"/></svg>
|
||
<span>Активность</span>
|
||
</button>
|
||
<button class="nav-item" type="button" data-page="system" aria-label="Система">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm9 4-2.1-1.2.1-2.4-2.2-2.2-2.4.1L13.2 4h-2.4L9.6 6.3l-2.4-.1L5 8.4l.1 2.4L3 12l2.1 1.2-.1 2.4 2.2 2.2 2.4-.1 1.2 2.3h2.4l1.2-2.3 2.4.1 2.2-2.2-.1-2.4L21 12Z"/></svg>
|
||
<span>Система</span>
|
||
</button>
|
||
</nav>
|
||
|
||
<div class="sidebar-foot">
|
||
<div class="connection-mini">
|
||
<span class="live-dot" id="sideConnectionDot"></span>
|
||
<span><strong id="sideConnection">Подключение…</strong><small>tb.kusoft.xyz</small></span>
|
||
</div>
|
||
<div class="version-line">Версия <span id="appVersion">—</span></div>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="main">
|
||
<header class="topbar">
|
||
<div>
|
||
<p class="eyebrow" id="pageEyebrow">Операционная панель</p>
|
||
<h1 id="pageTitle">Обзор</h1>
|
||
</div>
|
||
<div class="topbar-actions">
|
||
<span class="sync-label" id="syncLabel">Получение данных…</span>
|
||
<span class="badge badge-mode" id="modeBadge">—</span>
|
||
<button class="icon-button" id="refreshButton" type="button" aria-label="Обновить данные" title="Обновить">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="M19 8V4l-1.6 1.6A8 8 0 1 0 20 12h-2a6 6 0 1 1-2-4.5L14 9h5V8Z"/></svg>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="offline-banner" id="offlineBanner" role="alert" hidden>
|
||
<strong>Нет связи с сервером.</strong>
|
||
<span id="offlineMessage">Повторное подключение выполняется автоматически.</span>
|
||
</div>
|
||
|
||
<section class="page is-active" id="page-overview" data-title="Обзор">
|
||
<article class="hero card">
|
||
<div class="hero-copy">
|
||
<div class="status-kicker"><span class="status-orb" id="heroOrb"></span><span id="heroKicker">Проверка контура</span></div>
|
||
<h2 id="heroTitle">Получаем состояние бота</h2>
|
||
<p id="heroText">Панель сверяет торговый цикл, рыночные данные и готовность модели.</p>
|
||
<div class="hero-actions">
|
||
<button class="button button-primary" id="startButton" type="button">Запустить цикл</button>
|
||
<button class="button button-danger" id="stopButton" type="button">Остановить</button>
|
||
</div>
|
||
</div>
|
||
<div class="hero-telemetry">
|
||
<div><span>Последний цикл</span><strong id="lastLoop">—</strong></div>
|
||
<div><span>WebSocket</span><strong id="wsState">—</strong></div>
|
||
<div><span>Торговых пар</span><strong id="symbolCount">—</strong></div>
|
||
</div>
|
||
</article>
|
||
|
||
<div class="metric-grid" aria-label="Ключевые показатели">
|
||
<article class="metric card"><span>Капитал</span><strong id="metricEquity">—</strong><small id="metricEquityDelta">С начала работы</small></article>
|
||
<article class="metric card"><span>Свободно</span><strong id="metricCash">—</strong><small>USDT для новых позиций</small></article>
|
||
<article class="metric card"><span>Открытые позиции</span><strong id="metricPositions">—</strong><small id="metricExposure">Экспозиция —</small></article>
|
||
<article class="metric card"><span>Закрытые сделки</span><strong id="metricTrades">—</strong><small id="metricWinRate">Win rate —</small></article>
|
||
</div>
|
||
|
||
<div class="content-grid overview-grid">
|
||
<article class="card span-2">
|
||
<div class="card-head"><div><p class="eyebrow">Live market</p><h2>Рынок и прогноз</h2></div><button class="text-button" type="button" data-go="markets">Все пары</button></div>
|
||
<div class="table-wrap"><table><thead><tr><th>Пара</th><th>Цена</th><th>24 часа</th><th>Прогноз</th><th>Динамика</th><th>Качество</th></tr></thead><tbody id="overviewMarkets"><tr><td colspan="6" class="empty">Загрузка рынка…</td></tr></tbody></table></div>
|
||
</article>
|
||
|
||
<article class="card readiness-card">
|
||
<div class="card-head"><div><p class="eyebrow">Safety</p><h2>Готовность</h2></div><span class="badge" id="readyBadge">Проверка</span></div>
|
||
<div class="readiness-score"><strong id="readyScore">—</strong><span>торговый контур</span></div>
|
||
<ul class="check-list" id="readinessList"><li><span class="check-dot"></span>Получение состояния…</li></ul>
|
||
</article>
|
||
|
||
<article class="card span-2">
|
||
<div class="card-head"><div><p class="eyebrow">Portfolio</p><h2>Открытые позиции</h2></div><button class="text-button" type="button" data-go="positions">Подробнее</button></div>
|
||
<div id="overviewPositions" class="position-list"><div class="empty-block">Позиции загружаются…</div></div>
|
||
</article>
|
||
|
||
<article class="card model-card">
|
||
<div class="card-head"><div><p class="eyebrow">Model</p><h2>Прогнозная модель</h2></div><span class="model-glyph">ƒ</span></div>
|
||
<div class="model-state"><strong id="modelTitle">—</strong><span id="modelSubtitle">Проверка артефакта</span></div>
|
||
<dl class="compact-dl">
|
||
<div><dt>Forward gate</dt><dd id="shadowGate">—</dd></div>
|
||
<div><dt>Fallback</dt><dd id="fallbackState">—</dd></div>
|
||
<div><dt>Сбор L1</dt><dd id="collectorState">—</dd></div>
|
||
</dl>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="page" id="page-markets" data-title="Рынки">
|
||
<article class="card page-card">
|
||
<div class="card-head page-card-head"><div><p class="eyebrow">Bybit spot</p><h2>Торговая вселенная</h2><p class="subtext">Котировки, прогноз, спред и состояние данных по активным парам.</p></div><div class="search-box"><svg aria-hidden="true" viewBox="0 0 24 24"><path d="M10 4a6 6 0 1 0 3.9 10.6L19.3 20l.7-.7-5.4-5.4A6 6 0 0 0 10 4Zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"/></svg><input id="marketSearch" type="search" placeholder="Найти пару" aria-label="Найти торговую пару"></div></div>
|
||
<div class="table-wrap table-large"><table><thead><tr><th>Пара</th><th>Цена</th><th>Bid / Ask</th><th>24 часа</th><th>Прогноз</th><th>P(up)</th><th>Спред</th><th>Данные</th></tr></thead><tbody id="marketsTable"><tr><td colspan="8" class="empty">Загрузка рынка…</td></tr></tbody></table></div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="page" id="page-positions" data-title="Позиции">
|
||
<div class="metric-grid positions-metrics">
|
||
<article class="metric card"><span>Открыто</span><strong id="positionCount">—</strong><small>позиций</small></article>
|
||
<article class="metric card"><span>Рыночная стоимость</span><strong id="positionValue">—</strong><small>USDT</small></article>
|
||
<article class="metric card"><span>Нереализованный PnL</span><strong id="positionPnl">—</strong><small id="positionPnlPercent">—</small></article>
|
||
<article class="metric card"><span>Лимит экспозиции</span><strong id="exposureLimit">—</strong><small>USDT</small></article>
|
||
</div>
|
||
<article class="card page-card">
|
||
<div class="card-head"><div><p class="eyebrow">Portfolio</p><h2>Все открытые позиции</h2></div></div>
|
||
<div class="table-wrap table-large"><table><thead><tr><th>Пара</th><th>Объём</th><th>Вход</th><th>Сейчас</th><th>Стоимость</th><th>PnL</th><th>План выхода</th><th>Открыта</th></tr></thead><tbody id="positionsTable"><tr><td colspan="8" class="empty">Загрузка позиций…</td></tr></tbody></table></div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="page" id="page-activity" data-title="Активность">
|
||
<div class="activity-grid">
|
||
<article class="card activity-card">
|
||
<div class="card-head"><div><p class="eyebrow">Strategy</p><h2>Последние сигналы</h2></div></div>
|
||
<div class="feed" id="signalFeed"><div class="empty-block">Загрузка сигналов…</div></div>
|
||
</article>
|
||
<article class="card activity-card">
|
||
<div class="card-head"><div><p class="eyebrow">Execution</p><h2>Сделки</h2></div></div>
|
||
<div class="feed" id="tradeFeed"><div class="empty-block">Загрузка сделок…</div></div>
|
||
</article>
|
||
<article class="card activity-card">
|
||
<div class="card-head"><div><p class="eyebrow">System log</p><h2>События</h2></div></div>
|
||
<div class="feed" id="eventFeed"><div class="empty-block">Загрузка событий…</div></div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="page" id="page-system" data-title="Система">
|
||
<div class="system-grid">
|
||
<article class="card control-card">
|
||
<div class="card-head"><div><p class="eyebrow">Control</p><h2>Управление циклом</h2></div><span class="badge" id="controlBadge">—</span></div>
|
||
<p class="subtext">Остановка завершает торговый цикл, но не удаляет позиции и данные. Запуск возобновляет обработку рынка.</p>
|
||
<div class="control-buttons"><button class="button button-primary" id="systemStartButton" type="button">Запустить</button><button class="button button-danger" id="systemStopButton" type="button">Остановить</button></div>
|
||
<div class="setting-row"><div><strong>Быстрая торговля</strong><span id="fastTradingHint">Уменьшенный интервал принятия решений</span></div><label class="switch"><input id="fastTradingToggle" type="checkbox"><span aria-hidden="true"></span><b class="sr-only">Переключить быструю торговлю</b></label></div>
|
||
</article>
|
||
|
||
<article class="card">
|
||
<div class="card-head"><div><p class="eyebrow">Model runtime</p><h2>Обучение и модель</h2></div></div>
|
||
<dl class="system-dl" id="trainingDetails"><div><dt>Состояние</dt><dd>Загрузка…</dd></div></dl>
|
||
<p class="guard-note">Запуск обучения и продвижение shadow-модели доступны только после серверной проверки gate и намеренно не выполняются этой панелью автоматически.</p>
|
||
</article>
|
||
|
||
<article class="card">
|
||
<div class="card-head"><div><p class="eyebrow">Connectivity</p><h2>Рыночные данные</h2></div></div>
|
||
<dl class="system-dl" id="networkDetails"><div><dt>Состояние</dt><dd>Загрузка…</dd></div></dl>
|
||
</article>
|
||
|
||
<article class="card">
|
||
<div class="card-head"><div><p class="eyebrow">Runtime</p><h2>Безопасная конфигурация</h2></div></div>
|
||
<dl class="system-dl" id="configDetails"><div><dt>Состояние</dt><dd>Загрузка…</dd></div></dl>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<dialog class="dialog" id="authDialog">
|
||
<form id="authForm">
|
||
<div class="dialog-icon">T</div>
|
||
<p class="eyebrow">Защищённый доступ</p>
|
||
<h2>Вход в TradeBot</h2>
|
||
<p>Введите логин и пароль панели управления TradeBot. Данные используются только для запросов из этой вкладки и не сохраняются в браузере.</p>
|
||
<div class="auth-fields">
|
||
<div>
|
||
<label for="usernameInput">Логин</label>
|
||
<input id="usernameInput" type="text" autocomplete="username" required>
|
||
</div>
|
||
<div>
|
||
<label for="passwordInput">Пароль</label>
|
||
<input id="passwordInput" type="password" autocomplete="current-password" required>
|
||
</div>
|
||
</div>
|
||
<p class="form-error" id="authError" role="alert"></p>
|
||
<button class="button button-primary button-wide" id="authSubmitButton" type="submit">Войти</button>
|
||
</form>
|
||
</dialog>
|
||
|
||
<dialog class="dialog dialog-confirm" id="confirmDialog">
|
||
<form method="dialog">
|
||
<p class="eyebrow">Подтверждение действия</p>
|
||
<h2 id="confirmTitle">Подтвердите действие</h2>
|
||
<p id="confirmText"></p>
|
||
<div class="dialog-actions"><button class="button button-secondary" value="cancel">Отмена</button><button class="button button-danger" id="confirmAction" value="confirm">Подтвердить</button></div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<div class="toast" id="toast" role="status" aria-live="polite"></div>
|
||
<script src="/assets/dashboard.js?v=5" defer></script>
|
||
</body>
|
||
</html>
|