124 lines
4.8 KiB
HTML
124 lines
4.8 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">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body class="kt-ai-app">
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<div class="dash-brand">
|
||
<img src="https://code.vibe42.kz/tore/aitu/kt-logo.svg" alt="Казахтелеком" height="28">
|
||
<strong>Розничные продажи</strong>
|
||
</div>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span class="kt-ai-chip" id="period-chip">Август 2026</span>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="dash-main">
|
||
<div class="kt-ai-wrap dash-wrap">
|
||
|
||
<div class="kt-ai-v" data-gap="group">
|
||
|
||
<section class="dash-head">
|
||
<h1 class="kt-ai-h1">Продажи по городам</h1>
|
||
<p class="kt-ai-meta" id="scope-line">8 городов · 6 регионов · август 2026</p>
|
||
</section>
|
||
|
||
<section class="kt-ai-kpi-strip" data-cards="true" id="kpi-strip"></section>
|
||
|
||
<section class="kt-ai-card dash-chart-card">
|
||
<div class="kt-ai-v" data-gap="block">
|
||
<div class="kt-ai-h-stack">
|
||
<h2 class="kt-ai-h2" style="margin:0">Динамика по месяцам</h2>
|
||
<span class="kt-ai-spacer"></span>
|
||
<div class="kt-ai-segmented" id="period-seg">
|
||
<button class="seg" data-period="3m">3 мес</button>
|
||
<button class="seg" data-period="6m">6 мес</button>
|
||
<button class="seg" data-active="true" data-period="12m">Год</button>
|
||
</div>
|
||
</div>
|
||
<div class="dash-chart" id="chart"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="kt-ai-card dash-table-card">
|
||
<div class="kt-ai-v" data-gap="block">
|
||
<div class="kt-ai-h-stack">
|
||
<h2 class="kt-ai-h2" style="margin:0">Города</h2>
|
||
<span class="kt-ai-spacer"></span>
|
||
<div class="kt-ai-field" style="margin:0;min-width:180px">
|
||
<select class="kt-ai-select" id="region-filter" aria-label="Регион">
|
||
<option value="all">Все регионы</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-table-wrap">
|
||
<table class="kt-ai-table" id="cities-table">
|
||
<thead>
|
||
<tr>
|
||
<th data-label="Город">Город</th>
|
||
<th data-label="Регион">Регион</th>
|
||
<th class="num" data-label="Выручка">Выручка</th>
|
||
<th class="num" data-label="К предыдущему месяцу">К пред. месяцу</th>
|
||
<th class="num" data-label="Доля">Доля</th>
|
||
<th class="num" data-label="На точку">На точку</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="cities-tbody"></tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="dash-table-foot" id="table-foot"></div>
|
||
|
||
<section class="kt-ai-conclusion" id="conclusion">
|
||
<span class="title">Что показывают эти числа</span>
|
||
<span class="text" id="conclusion-text"></span>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Казахтелеком · Розничные продажи</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>Дашборд</span>
|
||
</footer>
|
||
|
||
<template id="city-detail-tpl">
|
||
<div class="kt-ai-modal">
|
||
<div class="modal-head">
|
||
<div>
|
||
<div class="modal-title" id="d-title"></div>
|
||
<div class="kt-ai-meta" id="d-region"></div>
|
||
</div>
|
||
<button class="kt-ai-icon-button" data-close aria-label="Закрыть">
|
||
<svg class="kt-icon"><use href="#x"></use></svg>
|
||
</button>
|
||
</div>
|
||
<div class="kt-ai-kpi-strip" data-cards="true" id="d-kpis"></div>
|
||
<h3 class="kt-ai-h3 kt-ai-modal-sub">Динамика по месяцам</h3>
|
||
<div class="dash-chart dash-chart-sm" id="d-chart"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<script src="design-system/kt-ai-chart-tip.js"></script>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|