# Дашборд: топ услуг B2C по регионам Веб-дашборд «Топ услуг B2C по регионам»: топ услуг Казахтелекома по количеству покупок с разбивкой по всем регионам. В шапке слева — логотип Казахтелекома: файл kt-logo.svg в корне проекта (его содержимое — в разделе «Логотип» ниже, сохрани без изменений), подключи как Казахтелеком, справа от него заголовок «Топ услуг B2C по регионам». Экран собирай ТОЛЬКО из компонентов дизайн-системы KT AI (design-system/COMPONENTS.md), своих классов, стилей и цветов не выдумывай. Шапка — .kt-ai-pagehead с логотипом и заголовком. Под ней полоса показателей .kt-ai-kpi-strip из четырёх плашек .kt-ai-kpi (в каждой .value — число, .label — подпись, .hint — уточнение): всего покупок, всего регионов, услуга-лидер (название целиком, без обрезания), регион-лидер; на широком экране четыре в один ряд, на телефоне — в две колонки. Ниже два столбчатых графика в карточках .kt-ai-card — «Топ регионов по покупкам» и «Топ услуг по количеству»: чистый SVG или div-столбцы высотой 190–220px, столбцы 20–28px с радиусом 2px, подписи значений 11px mono muted, цвет столбцов — один токен var(--kt-ai-chart-blue) (второй график — var(--kt-ai-chart-green)), без радуги; подсказка значения при наведении — атрибут data-kt-tip и скрипт ./design-system/kt-ai-chart-tip.js. Ниже таблица топ-услуг по правилам ДС: frameless в .kt-ai-table-wrap, колонки «Услуга», «Регион», «Покупок», «Сумма, ₸», числа вправо с tabular-nums, лёгкие горизонтальные разделители, поиск по услуге и фильтр по региону над таблицей. Цвета, отступы, радиусы, шрифт — только токены var(--kt-ai-…) из ДС в светлой теме (); ни одного своего hex-цвета, кроме файла логотипа. Перед публикацией проверь: в index.html не меньше десятка классов kt-ai-*. Только фронтенд — один статичный index.html с данными внутри, без серверной части (никаких package.json, server.js, node-зависимостей). Источник данных — таблица в разделе «Данные» ниже, используй её целиком и ничего не выдумывай. Все пути к CSS, скриптам, шрифтам и другим ресурсам — строго относительные (./...): сайт публикуется в подпапке, абсолютные пути с корня сломаются. Работай без уточняющих вопросов. Когда дашборд готов — опубликуй сайт. ## Основа — готовая страница Прототип уже свёрстан и проверен, его код — в этом файле между строками `<<>>`. Не перепечатывай и не переписывай его — вырежи в index.html командой: ```sh awk '/^<<>>$/{f=0} f' brief.md > index.html sed -i 's#\.\./\.\./ds/#./design-system/#g; s#\.\./\.\./kt-logo\.svg#./kt-logo.svg#g' index.html ``` Сохрани kt-logo.svg из раздела «Логотип». После этого внеси ТОЛЬКО правку владельца: Сделай заголовок страницы зелёным. Больше ничего не меняй и опубликуй сайт. ## Логотип Сохрани этот SVG как файл kt-logo.svg в корне проекта, не меняя содержимое: ```svg ``` << Топ услуг B2C по регионам
Казахтелеком

Топ услуг B2C по регионам

Июль 2026 · покупки и выручка по регионам

—
Покупок
за июль 2026
—
Выручка
по 50 позициям
—
Регионов
в выборке
—
Услуга-лидер
по покупкам

Регионы по покупкам · нажмите, чтобы отфильтровать

Услуги по покупкам · топ-8

Позиции

услуга × регион
Услуга Регион Покупок Сумма, ₸
BASE_HTML>>> ## Объём работы Собирай ровно то, что написано в задании, и ничего сверх: без дополнительных разделов, журналов, историй, настроек и «на всякий случай» — их не просили. Свои файлы — только index.html (стили и скрипт внутри него) плюс то, что задание просит создать явно; без сборщиков и фреймворков, без комментариев в коде. Демо-данные короткие и реалистичные. Вопросов не задавай: чего в задании нет — реши сам разумно и коротко. Закончив, опубликуй сайт.