47 lines
12 KiB
Markdown
47 lines
12 KiB
Markdown
# Лендинг торе те этого продукта
|
||
|
||
Сделай мне лендинг для торе, те для этого продукта
|
||
|
||
## Объём работы
|
||
|
||
Собирай ровно то, что написано в задании, и ничего сверх: без дополнительных разделов, журналов, историй, настроек и «на всякий случай» — их не просили. Свои файлы — только index.html (стили и скрипт внутри него) плюс то, что задание просит создать явно; без сборщиков и фреймворков, без комментариев в коде. Демо-данные короткие и реалистичные. Вопросов не задавай: чего в задании нет — реши сам разумно и коротко. Закончив, опубликуй сайт.
|
||
|
||
## Дизайн — дизайн-система KT AI
|
||
|
||
Весь интерфейс собирай на дизайн-системе KT AI, которая уже лежит в папке проекта `design-system/`.
|
||
Перед первой строкой вёрстки прочитай `design.md` и `design-system/AGENTS.md` и следуй им.
|
||
Подключай файлы ДС относительными путями и в этом порядке: `./design-system/kt-ai-fonts.css`,
|
||
`./design-system/kt-ai-tokens.css`, `./design-system/kt-ai-components.css`, `./design-system/kt-ai-page.css`.
|
||
Тема по умолчанию — светлая: `<html lang="ru" data-theme="light">`; не ставь `dark` и не ставь `auto`
|
||
(auto уходит в тёмную по системной теме). Переключатель темы можно оставить, но открываться страница должна светлой.
|
||
Цвета, отступы и размеры — только токенами `var(--kt-ai-…)`, иконки — из `design-system/icons/kt-ai-lucide-sprite.svg`.
|
||
Плашки показателей — `.kt-ai-kpi` (`.value`, `.label`, `.hint`) в полосе `.kt-ai-kpi-strip`; таблицы — по правилам ДС (frameless, `.kt-ai-table-wrap`, числа вправо, `tabular-nums`);
|
||
графики — чистый SVG/div высотой 190–220px, столбцы 20–28px с радиусом 2px, цвета только `var(--kt-ai-chart-blue|green|orange|pink|red|salmon)`, подсказки значений — `data-kt-tip` + `./design-system/kt-ai-chart-tip.js`.
|
||
Имена токенов не выдумывай — только существующие в `design-system/kt-ai-tokens.css`: --kt-ai-fg / -fg-muted / -fg-faint, --kt-ai-bg / -bg-soft, --kt-ai-card-bg / -card-border, --kt-ai-border / -border-strong, --kt-ai-primary, --kt-ai-radius-xl / -3xl, --kt-ai-font-sans / -mono, --kt-ai-chart-blue / -green / -orange / -pink / -red / -salmon, --kt-ai-status-ok-fg / -warn-fg / -risk-fg.
|
||
Несуществующий токен (`--kt-ai-text-primary`, `--kt-ai-bg-surface`, `--kt-ai-font-family`) молча не применится — страница выйдет в Times New Roman без рамок.
|
||
Классы ДС (`.kt-ai-kpi`, `.kt-ai-card`, `.kt-ai-table`, `.kt-ai-btn`, `.kt-ai-chip`, `.kt-ai-input`) в своём `<style>` не переопределяй — ДС рисует их сама; свой `<style>` — только сетка и отступы. `<body class="kt-ai-app">`.
|
||
Перед публикацией проверь сам: в HTML не меньше десятка классов `kt-ai-*`, каждый `var(--kt-ai-…)` есть в tokens.css, свои hex-цвета — только внутри логотипа. Иначе это не дизайн-система, а перекраска.
|
||
Метка режима данных («Демо-данные» / «Данные из системы») — существующий чип `.kt-ai-chip` с `data-tone="orange"`; своего класса под неё не заводи: неизвестный класс `kt-ai-*` снижает балл ДС и уводит приёмку в лишнюю досылку правки.
|
||
Фильтры и пустое состояние тоже из ДС (`.kt-ai-select`, `.kt-ai-filter-chip`, `.kt-ai-empty`): каждый выведенный фильтр обязан менять все представления, которые задевает — таблицу, показатели, график и текст объяснения, — либо нести рядом видимую подпись «в демо не меняет …» (правила — в разделе «Состояние данных»).
|
||
Таблицы, списки, журналы, дашборды и формы собирай из готовых классов ДС (`design-system/COMPONENTS.md`),
|
||
архетип экрана выбирай по `design-system/docs/ARCHETYPES.md`. Каркас страницы — из `design.md`, с обычными `<link>`.
|
||
Шаблон `design-system/templates/kt-ai-app-shell.html` целиком не копируй: его скрипты-загрузчики (`data-kt-ai-base-resolver`,
|
||
`data-kt-ai-boot`) тянут CSS с корня сайта по абсолютному пути `/design-system/…`, а сайт публикуется в подпапке — стили не загрузятся.
|
||
Подключай только файлы, которые реально лежат в `design-system/` (проверь `ls design-system`): файла `kt-ai-components.js` там нет.
|
||
Шапка страницы: слева логотип Казахтелекома — `<img src="https://code.vibe42.kz/tore/aitu/kt-logo.svg" alt="Казахтелеком" height="28">`, рядом название приложения; без логотипа страница не принимается.
|
||
Свой стиль не выдумывай, Bootstrap/Tailwind/Material/Google Fonts не подключай, сырые hex-цвета не пиши.
|
||
Папку `design-system/` закоммить вместе с проектом — иначе опубликованная страница останется без стилей.
|
||
|
||
## Состояние данных
|
||
|
||
Данные в приложении демонстрационные, и это видно. Собери их по одному контракту.
|
||
|
||
1. Один плоский набор записей: `const DATA = [{…}]`, где у каждой записи есть поле под КАЖДЫЙ фильтр (сегмент, канал, дата или период) и под каждый показатель. Раскладывать данные по значению фильтра (`DATA['7d']`, `insights.B2B`) нельзя: тогда каждое представление читает своё подмножество и они расходятся — храни значение фильтра в поле записи и фильтруй набор.
|
||
2. Одна функция представления: `viewFor(state)` → `{status: "ok"|"empty", rows, series, kpis, explanation, recommendations}`. Таблица, показатели, график, объяснение и рекомендации берут данные ТОЛЬКО из этого объекта. Рисует их одна `render(view)`, подряд и без раннего `return`.
|
||
3. Один статус данных на страницу: `document.documentElement.dataset.ktDataState = view.status`. Каждая область данных помечена `data-kt-region="table|kpi|chart|insights|recommendations"`, и пустой статус гасит их одним правилом CSS: `[data-kt-data-state="empty"] [data-kt-region]{display:none}`. Скрывать области поштучно (`element.style.display = "none"`) нельзя — так на пустом статусе остаются прежний график и прошлые рекомендации; вместо этого меняй один признак статуса и очищай области из `view`.
|
||
3a. Управление и блок пустого состояния НИКОГДА не прячутся. Прятать можно только сами области результатов и только их собственный элемент: `region.style.display = "none"`. Подниматься к предку — `region.parentElement`, `parentNode`, `closest(...)` — ЗАПРЕЩЕНО: на прогоне 13.09 сборщик спрятал `chartRegion.parentElement`, родителем оказался `<main>`, и вместе с графиком исчезли фильтры, переключатель и само сообщение «Недостаточно данных» — экран остался пустым без способа вернуться к данным. Фильтры, переключатель и блок `data-kt-region="empty"` держи ВНЕ любой скрываемой области, и проверь последовательность данные → пусто → данные, включая перезагрузку в пустом состоянии.
|
||
4. Фильтр обязан менять ВСЕ представления, которые задевает: таблицу, показатели, график И текст объяснения. Объяви реестр `const FILTERS = [{id: "<id селекта>", label: "…", affects: ["table", "kpi", "chart", "insights"]}]`, и в нём обязан быть каждый видимый фильтр. Если в демо фильтр чего-то не меняет — скажи это честно: `demoOnly: true` плюс видимая подпись рядом с контролом `<span data-kt-filter-note>в демо не меняет график</span>`. Фильтр без реестра и без подписи не выводи вовсе.
|
||
5. Молчаливая подмена набора запрещена: `DATA_SET[x] || DATA_SET["7d"]` и `insights[seg] || insights.all` показывают выбранный период вместе с данными другого. Нет данных под выбранные фильтры — статус `empty` и одна явная причина («за выбранный период данных нет»). Сохранённое значение фильтра при загрузке сверяй с реестром и списком опций: неизвестное — сбрось на значение по умолчанию и скажи об этом подписью, а не подставляй молча.
|
||
6. Режим данных виден постоянно: `data-kt-data-mode="demo"` на `<body>` и один видимый чип `<span class="kt-ai-chip" data-tone="orange">Демо-данные</span>` в шапке — на каждом экране и на любой ширине, своего класса для него не заводи. Режим `live` и чип «Данные из системы» ставь только если в задании названы система-источник и точка доступа к ней; приложенная к заданию таблица — это по-прежнему `demo`.
|
||
7. Происхождение чисел. Ни одного утверждения «данные получены из …», «по данным системы …», «за IV квартал 2025»: числа синтетические, источника у них нет — вместо источника пиши «Демо-данные». Причины отклонений подавай гипотезой («вероятная причина», «гипотеза, не подтверждено»), а не установленным фактом. Показатель, у которого нет основания, подписывай ровно словами «не измерено» и целью не называй; подтверждённый замером — «измерено», собственное предложение — «предложение», ожидающее проверки — «не подтверждено».
|