Дмитрий
85 lines
4.9 KiB
HTML
85 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Дашборд мозга — Лидерра</title>
|
||
<style>
|
||
:root {
|
||
--bg: #F6F3EC; --ink: #012019; --teal: #0F6E56;
|
||
--panel: #ffffff; --line: #d8d2c4;
|
||
--mono: 'JetBrains Mono', ui-monospace, monospace;
|
||
--sans: 'Inter', system-ui, sans-serif;
|
||
}
|
||
body { margin:0; height:100vh; display:flex; flex-direction:column; background:var(--bg); color:var(--ink); font-family:var(--sans); overflow:hidden; }
|
||
#tabbar { background:var(--panel); border-bottom:1px solid var(--line); padding:8px 12px; display:flex; align-items:center; gap:10px; flex-shrink:0; }
|
||
#tabbar button { background:var(--panel); border:1px solid var(--line); color:var(--ink); border-radius:5px; padding:6px 14px; font-size:13px; cursor:pointer; font-family:var(--sans); }
|
||
#tabbar button.active { background:var(--teal); color:#ffffff; border-color:var(--teal); }
|
||
#tabbar button:hover { background:rgba(15,110,86,0.08); }
|
||
#status { margin-left:auto; font-size:12px; color:var(--ink); font-family:var(--mono); opacity:0.7; }
|
||
#graph { height:40vh; background:#1e1e2e; flex-shrink:0; border-bottom:1px solid var(--line); }
|
||
#network { background:#1e1e2e; }
|
||
#workarea { flex:1; overflow:auto; padding:16px; }
|
||
.view { display:none; }
|
||
.view.active { display:block; }
|
||
h3, h4 { color:var(--teal); margin:8px 0; }
|
||
#agg-tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
|
||
.tile { background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:12px; }
|
||
.tile h4 { margin:0 0 6px; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; }
|
||
.tile p { margin:0; font-family:var(--mono); font-size:13px; }
|
||
.feed-group { margin-bottom:16px; }
|
||
.feed-card { background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:8px 10px; margin-bottom:6px; font-family:var(--mono); font-size:12px; }
|
||
#replay-list { float:left; width:40%; padding-right:12px; box-sizing:border-box; }
|
||
#replay-detail { float:left; width:60%; }
|
||
#replay-episodes { list-style:none; padding:0; max-height:50vh; overflow:auto; }
|
||
#replay-episodes li { background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:6px 10px; margin-bottom:4px; cursor:pointer; font-family:var(--mono); font-size:11px; }
|
||
#replay-episodes li:hover { background:rgba(15,110,86,0.06); }
|
||
#agg-conflicts { margin-top:16px; }
|
||
#agg-conflicts p { font-family:var(--mono); font-size:12px; }
|
||
#feed-pause { background:var(--panel); border:1px solid var(--line); color:var(--ink); border-radius:5px; padding:4px 10px; cursor:pointer; font-family:var(--sans); }
|
||
#feed-poll-state { margin-left:8px; font-family:var(--mono); font-size:11px; color:var(--ink); opacity:0.7; }
|
||
#map-conflicts { font-family:var(--mono); font-size:12px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header id="tabbar">
|
||
<button data-view="map">Карта</button>
|
||
<button data-view="replay">Разбор</button>
|
||
<button data-view="feed">Лента</button>
|
||
<button data-view="aggregate">Агрегат</button>
|
||
<span id="status"></span>
|
||
</header>
|
||
<section id="graph">
|
||
<div id="network" style="width:100%;height:100%"></div>
|
||
</section>
|
||
<section id="workarea">
|
||
<div class="view" id="view-map">
|
||
<p>Топология мозга: 124 узла, рёбра, 11 размеченных дизайн-конфликтов. Это нулевое состояние холста — без оверлеев.</p>
|
||
<ul id="map-conflicts"></ul>
|
||
</div>
|
||
<div class="view" id="view-replay">
|
||
<div id="replay-list">
|
||
<select id="f-classification"><option value="">все</option><option value="bugfix">bugfix</option><option value="feature">feature</option><option value="refactor">refactor</option><option value="docs">docs</option><option value="question">question</option><option value="other">other</option></select>
|
||
<select id="f-outcome"><option value="">все</option><option value="success">success</option><option value="unknown">unknown</option><option value="failure">failure</option></select>
|
||
<label><input type="checkbox" id="f-errors"> только с ошибками</label>
|
||
<ul id="replay-episodes"></ul>
|
||
</div>
|
||
<div id="replay-detail"></div>
|
||
</div>
|
||
<div class="view" id="view-feed">
|
||
<button id="feed-pause">Пауза</button>
|
||
<span id="feed-poll-state"></span>
|
||
<div id="feed-stream"></div>
|
||
</div>
|
||
<div class="view" id="view-aggregate">
|
||
<div id="agg-tiles"></div>
|
||
<div id="agg-conflicts"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<script src="https://unpkg.com/vis-network@9.1.9/standalone/umd/vis-network.min.js"></script>
|
||
<script src="../automation-graph-data.js"></script>
|
||
<script type="module" src="dashboard.js"></script>
|
||
</body>
|
||
</html>
|