191 lines
10 KiB
HTML
191 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<!-- Дизайн: Стандартный дизайн. ДС: 5 CSS, последние — vibe-theme.css. -->
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Дашборд KPI — Казахтелеком</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">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
body { margin: 0; }
|
||
</style>
|
||
</head>
|
||
<body class="kt-ai-app">
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<div class="page-brand">
|
||
<img src="https://code.vibe42.kz/tore/aitu/kt-logo.svg" alt="Казахтелеком" height="28">
|
||
<span class="brand-name">Дашборд KPI</span>
|
||
</div>
|
||
<span class="kt-ai-spacer"></span>
|
||
<button class="kt-ai-chip period-chip" id="periodChip" type="button" title="Год отчётности">
|
||
<span class="ic"><svg class="kt-icon" viewBox="0 0 24 24"><use href="#calendar"/></svg></span>
|
||
<span class="year">2026</span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="kt-deck">
|
||
|
||
<!-- Слайд 1. Сводные показатели -->
|
||
<section class="kt-slide" aria-label="Годовой обзор">
|
||
<div class="kt-slide-inner">
|
||
<div class="slide-head">
|
||
<h2>Годовой обзор</h2>
|
||
<span class="kt-ai-chip" data-tone="blue">1 / 3</span>
|
||
</div>
|
||
<p class="slide-sub">Ключевые показатели эффективности компании на 2026 год: выручка, активные абоненты и индекс удовлетворённости.</p>
|
||
|
||
<div class="kt-ai-kpi-strip" data-cards="true">
|
||
<div class="kt-ai-kpi" data-tone="blue">
|
||
<span class="label">Выручка</span>
|
||
<span class="value" id="kRevVal">—</span>
|
||
<span class="hint" id="kRevHint">—</span>
|
||
<span class="hint" id="kRevDelta">—</span>
|
||
</div>
|
||
<div class="kt-ai-kpi" data-tone="blue">
|
||
<span class="label">Активные абоненты</span>
|
||
<span class="value" id="kSubsVal">—</span>
|
||
<span class="hint" id="kSubsHint">—</span>
|
||
<span class="hint" id="kSubsDelta">—</span>
|
||
</div>
|
||
<div class="kt-ai-kpi" data-tone="blue">
|
||
<div class="nps-block">
|
||
<div class="nps-donut" aria-hidden="true">
|
||
<svg viewBox="0 0 100 100">
|
||
<circle class="ring-bg" cx="50" cy="50" r="45" fill="none" stroke-width="8"></circle>
|
||
<circle class="ring-fg" id="npsRingFg" cx="50" cy="50" r="45" fill="none" stroke-width="8"
|
||
stroke-dasharray="283" stroke-dashoffset="283" transform="rotate(-90 50 50)"></circle>
|
||
<text id="npsValue" x="50" y="50" text-anchor="middle" dominant-baseline="central"
|
||
style="font-size:28px;font-weight:600;fill:var(--kt-ai-fg);font-variant-numeric:tabular-nums">—</text>
|
||
</svg>
|
||
</div>
|
||
<div class="kt-ai-kpi" style="gap:2px">
|
||
<span class="label">NPS · удовлетворённость</span>
|
||
<span class="hint" id="kNpsHint">—</span>
|
||
<span class="hint" id="kNpsDelta">—</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-v" data-gap="group" style="margin-top:var(--kt-ai-space-9)">
|
||
<div>
|
||
<h3 style="font-size:var(--kt-ai-text-lg);font-weight:var(--kt-ai-weight-medium);margin-bottom:var(--kt-ai-space-3)">Регионы · выручка за 2026</h3>
|
||
<div class="regions-grid" id="regionsList"></div>
|
||
</div>
|
||
<div class="kt-ai-conclusion">
|
||
<span class="title">Что показывают эти числа</span>
|
||
<span class="text">Выручка компании за 2026 год — 318,3 млрд ₸, к прошлому году рост на 15,2%. Доля двух крупнейших городов — Алматы и Астана — составляет 68% всей выручки; остальные три региона дают сбалансированный объём в 102 млрд ₸.</span>
|
||
<span class="text">NPS подрос на 2,6 п.п. к прошлому году и держится выше 50 с начала года. Скорее всего, это эффект от программы удержания в Алматы и Астане, запущенной в апреле.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Слайд 2. Динамика -->
|
||
<section class="kt-slide" aria-label="Динамика">
|
||
<div class="kt-slide-inner">
|
||
<div class="slide-head">
|
||
<h2>Динамика по месяцам</h2>
|
||
<span class="kt-ai-chip" data-tone="blue">2 / 3</span>
|
||
</div>
|
||
<p class="slide-sub">Месячная выручка, число активных абонентов и NPS. Двигайте ползунок, чтобы выбрать начало отчётного окна.</p>
|
||
|
||
<div class="kt-ai-v" data-gap="group">
|
||
<div class="kt-ai-card" style="padding:var(--kt-ai-space-6)">
|
||
<div class="kt-ai-h-stack" data-nowrap="scroll" style="margin-bottom:var(--kt-ai-space-4)">
|
||
<strong style="font-size:var(--kt-ai-text-md)">Выручка, млрд ₸</strong>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span class="kt-ai-chip" id="dynRangeChip" data-tone="blue">Янв–Дек</span>
|
||
</div>
|
||
<div id="barChart" class="cc-bars kt-chart"></div>
|
||
<div class="cc-labels"></div>
|
||
<div style="margin-top:var(--kt-ai-space-6)">
|
||
<input type="range" id="rangeSlider" class="chart-slider" min="0" max="11" step="1" value="0"
|
||
aria-label="Начало отчётного окна">
|
||
<div class="slider-scale" id="sliderScale"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-card" style="padding:var(--kt-ai-space-6)">
|
||
<strong style="font-size:var(--kt-ai-text-md)">Регионы · выручка за 2026, млрд ₸</strong>
|
||
<div class="cc-hbars" id="regionBars" style="margin-top:var(--kt-ai-space-5)"></div>
|
||
</div>
|
||
|
||
<p class="slide-sub" id="dynNote" style="margin:0"></p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Слайд 3. Услуги -->
|
||
<section class="kt-slide" aria-label="Услуги">
|
||
<div class="kt-slide-inner">
|
||
<div class="slide-head">
|
||
<h2>Распределение по продуктам</h2>
|
||
<span class="kt-ai-chip" data-tone="blue">3 / 3</span>
|
||
</div>
|
||
<p class="slide-sub">Доля направлений в выручке компании за 2026 год и объём по каждому продукту.</p>
|
||
|
||
<div class="services-grid" id="servicesGrid">
|
||
<div class="kt-ai-card service-card" style="padding:var(--kt-ai-space-6)">
|
||
<div class="service-head">
|
||
<span class="service-ic"><svg class="kt-icon" viewBox="0 0 24 24"><use href="#link"/></svg></span>
|
||
<span class="service-name">Интернет</span>
|
||
</div>
|
||
<div class="arc-row" id="svcInternet"></div>
|
||
</div>
|
||
<div class="kt-ai-card service-card" style="padding:var(--kt-ai-space-6)">
|
||
<div class="service-head">
|
||
<span class="service-ic"><svg class="kt-icon" viewBox="0 0 24 24"><use href="#send"/></svg></span>
|
||
<span class="service-name">Мобильная связь</span>
|
||
</div>
|
||
<div class="arc-row" id="svcMob"></div>
|
||
</div>
|
||
<div class="kt-ai-card service-card" style="padding:var(--kt-ai-space-6)">
|
||
<div class="service-head">
|
||
<span class="service-ic"><svg class="kt-icon" viewBox="0 0 24 24"><use href="#megaphone"/></svg></span>
|
||
<span class="service-name">Телевидение</span>
|
||
</div>
|
||
<div class="arc-row" id="svcTv"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-conclusion" style="margin-top:var(--kt-ai-space-9)">
|
||
<span class="title">Что показывают эти числа</span>
|
||
<span class="text">Интернет — якорная выручка компании: 52% и 165,5 млрд ₸ за год. Мобильная связь на втором месте (34% — 108,2 млрд ₸), телевидение — 14% (44,6 млрд ₸). Совокупность трёх направлений — вся отчётная выручка 318,3 млрд ₸.</span>
|
||
<span class="text">Динамика с прошлого года: интернет +6,2% (рост тарифа и доли оптоволокна), мобильная +4,8% (активация 5G в Астане и Алматы), ТВ +2,1% (удержание абонентской базы).</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<nav class="deck-nav" aria-label="Навигация по слайдам">
|
||
<button class="deck-arrow" id="deckPrev" aria-label="Предыдущий слайд">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
|
||
</button>
|
||
<span class="deck-counter" id="deckCounter">1 / 3</span>
|
||
<div class="deck-dots" role="tablist" aria-label="Слайды">
|
||
<button class="deck-dot" data-slide="0" role="tab" aria-label="Слайд 1"></button>
|
||
<button class="deck-dot" data-slide="1" role="tab" aria-label="Слайд 2"></button>
|
||
<button class="deck-dot" data-slide="2" role="tab" aria-label="Слайд 3"></button>
|
||
</div>
|
||
<button class="deck-arrow" id="deckNext" aria-label="Следующий слайд">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
|
||
</button>
|
||
</nav>
|
||
|
||
<script src="design-system/kt-ai-chart-tip.js"></script>
|
||
<script src="script.js"></script>
|
||
|
||
</body>
|
||
</html>
|