139 lines
6.9 KiB
HTML
139 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
||
<!-- Дизайн: Стандартный дизайн. Сохраняй все пять CSS; подробности в design.md. -->
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Топ продаж по областям — Казахтелеком</title>
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<link rel="stylesheet" href="design-system/vibe-theme.css">
|
||
<style>
|
||
/* ДС рисует кнопки для <button>; у ссылки-кнопки браузер добавляет подчёркивание */
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
|
||
.dash-wrap { max-width: 1180px; margin: 0 auto; padding: var(--kt-ai-space-8) var(--kt-ai-space-5) var(--kt-ai-space-11); }
|
||
|
||
.dash-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kt-ai-space-4); flex-wrap: wrap; margin-bottom: var(--kt-ai-space-6); }
|
||
.dash-title { display: flex; flex-direction: column; gap: var(--kt-ai-space-2); }
|
||
.dash-title h1 { font-size: var(--kt-ai-text-2xl); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.02em; margin: 0; }
|
||
.dash-title .kt-ai-meta { color: var(--kt-ai-fg-muted); }
|
||
|
||
.kpi-grid { display: grid; gap: var(--kt-ai-space-4); grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); margin-bottom: var(--kt-ai-space-6); }
|
||
.kpi-grid .kt-ai-kpi .value { font-size: var(--kt-ai-text-xl); }
|
||
.kpi-grid .kt-ai-kpi .hint { color: var(--kt-ai-fg-faint); }
|
||
|
||
.dash-toolbar { display: flex; align-items: center; gap: var(--kt-ai-space-4); flex-wrap: wrap; margin-bottom: var(--kt-ai-space-6); }
|
||
.filter-chips { display: flex; align-items: center; gap: var(--kt-ai-space-3); flex-wrap: wrap; margin-left: auto; }
|
||
|
||
.block-title { display: flex; align-items: center; justify-content: space-between; gap: var(--kt-ai-space-4); flex-wrap: wrap; margin-bottom: var(--kt-ai-space-3); }
|
||
.block-title .kt-ai-label { margin: 0; }
|
||
|
||
.chart-card { margin-bottom: var(--kt-ai-space-6); }
|
||
.chart-card .cc-bars { gap: 5px; overflow-x: auto; padding-bottom: var(--kt-ai-space-2); }
|
||
.chart-card .cc-bar { flex: 0 0 auto; width: 24px; }
|
||
.chart-card .cc-bar i { width: 24px; }
|
||
.cc-axis-cat { gap: 5px; flex-wrap: wrap; }
|
||
.cc-axis-cat span { flex: 0 0 auto; max-width: 78px; overflow: hidden; text-overflow: ellipsis; }
|
||
|
||
.rank { display: inline-flex; align-items: center; justify-content: center; gap: var(--kt-ai-space-1); min-width: 26px; height: 22px; border-radius: var(--kt-ai-radius-tag); background: var(--kt-ai-bg-active); color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-2xs); font-weight: var(--kt-ai-weight-semibold); font-variant-numeric: tabular-nums; }
|
||
tr[data-top="true"] .rank { background: var(--kt-ai-primary); color: var(--kt-ai-fg-on-fill); }
|
||
|
||
.share { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); font-variant-numeric: tabular-nums; }
|
||
.row-bar { position: relative; }
|
||
.row-bar i { position: absolute; left: 0; top: 20%; bottom: 20%; background: var(--kt-ai-primary-subtle); border-radius: var(--kt-ai-radius-xs); z-index: 0; }
|
||
.row-bar .ct { position: relative; z-index: 1; }
|
||
|
||
.dash-footer { margin-top: var(--kt-ai-space-10); display: flex; align-items: center; gap: var(--kt-ai-space-4); flex-wrap: wrap; color: var(--kt-ai-fg-faint); font-size: var(--kt-ai-text-2xs); border-top: 1px solid var(--kt-ai-border); padding-top: var(--kt-ai-space-5); }
|
||
.kt-ai-table th.num, .kt-ai-table th:has(.th-sort) { text-align: right; }
|
||
</style>
|
||
</head>
|
||
<body class="kt-ai-app">
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<img src="https://code.vibe42.kz/tore/aitu/kt-logo.svg" alt="Казахтелеком" height="28">
|
||
<strong>Топ продаж по областям</strong>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span class="kt-ai-chip" data-tone="blue">Область: все</span>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="dash-wrap">
|
||
|
||
<div class="dash-title-row">
|
||
<div class="dash-title">
|
||
<h1>Объём продаж по <span class="vibe-highlight">областям</span></h1>
|
||
<span class="kt-ai-meta" id="dash-meta"></span>
|
||
</div>
|
||
<button class="kt-ai-btn" id="btn-reset" type="button">Сбросить</button>
|
||
</div>
|
||
|
||
<div class="kpi-grid" id="kpi-strip"></div>
|
||
|
||
<div class="kt-ai-chart-card chart-card">
|
||
<div class="cc-head">
|
||
<div class="cc-title">Сравнение объёмов продаж</div>
|
||
</div>
|
||
<div class="cc-bars" id="chart-bars"></div>
|
||
<div class="cc-axis cc-axis-cat" id="chart-axis"></div>
|
||
</div>
|
||
|
||
<div class="block-title">
|
||
<span class="kt-ai-label">Рейтинг областей</span>
|
||
<span class="kt-ai-chip" id="chip-count"></span>
|
||
</div>
|
||
|
||
<div class="dash-toolbar">
|
||
<div class="kt-ai-search-field" style="width:min(360px,100%)">
|
||
<input class="kt-ai-input" id="search" type="search" placeholder="Поиск по области…">
|
||
</div>
|
||
<button class="kt-ai-btn" data-size="sm" id="btn-top3" type="button">Топ-3</button>
|
||
<span class="filter-chips" id="filter-chips"></span>
|
||
</div>
|
||
|
||
<div class="kt-ai-table-wrap">
|
||
<table class="kt-ai-table">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col" style="width:56px">Место</th>
|
||
<th scope="col">Область</th>
|
||
<th scope="col" id="th-amount">
|
||
<button class="th-sort" id="btn-sort" type="button" aria-sort="descending">
|
||
Объём продаж, млн тг
|
||
<svg class="kt-icon th-sort-ic" id="sort-ic" data-dir="desc" aria-hidden="true"><use href="#chevronDown"></use></svg>
|
||
</button>
|
||
</th>
|
||
<th scope="col" style="width:88px">Доля</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="table-body"></tbody>
|
||
</table>
|
||
<div class="kt-ai-empty" id="empty" hidden>
|
||
<div class="icon-spot"><svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#search"></use></svg></div>
|
||
<p class="title">Ничего не найдено</p>
|
||
<p>Попробуйте изменить запрос или сбросить фильтры.</p>
|
||
<button class="kt-ai-btn" data-size="sm" id="btn-empty-reset" type="button">Сбросить фильтры</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-banner data-tone="info" id="summary" hidden></div>
|
||
|
||
<div class="dash-footer">
|
||
<span>Объёмы указаны в млн тенге</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>Казахтелеком · Дашборд продаж</span>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="kt-ai-toast-stack" aria-live="polite"></div>
|
||
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<script src="script.js"></script>
|
||
<script src="design-system/kt-ai-chart-tip.js"></script>
|
||
</body>
|
||
</html>
|