tore/razrabotay-veb-sayt-lending
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
main
razrabotay-veb-sayt-lending/brief.md

11 KiB
Raw Permalink Blame History

Разработай веб-сайт лендинг-пейдж про

Разработай мне веб-сайт, лендинг-пейдж про Казахтелеком. Короткий, понятный.

Объём работы

Собирай ровно то, что написано в задании. Не добавляй лишние разделы, журналы и настройки. Для статичной страницы достаточно index.html. Если запрошен статичный макет, не добавляй серверную часть на этом этапе. Если задача требует общего хранения, настоящей регистрации или рабочего приложения, реализуй серверную часть и базу данных средствами Vibe AI. Создай необходимые файлы, таблицы и обработчики, даже если владелец не перечислил их отдельно. Не подменяй общее хранение localStorage или демонстрационным списком. Собственная база приложения не требует интеграции с системами КТ и отдельного утверждения дизайна в экспрессе. При доработке существующего проекта это правило заменяет прежнее ограничение одним 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. Управление и сообщение пустого состояния не прячутся никогда: скрывай только блок результата. Скрывать его предка (parentElement, parentNode, closest(...)) ЗАПРЕЩЕНО. Фильтры и надпись «Недостаточно данных» остаются видимыми.
  2. Фильтр обязан менять ВСЕ представления, которые задевает: таблицу, показатели, график и текст объяснения. Объяви реестр const FILTERS = [{id, label, affects}] со всеми видимыми фильтрами. Не меняет чего-то в демо — скажи честно: demoOnly: true и видимая подпись рядом с контролом <span data-kt-filter-note>в демо не меняет график</span>.
  3. Молчаливая подмена набора запрещена: DATA_SET[x] || DATA_SET["7d"] показывает выбранный период вместе с данными другого. Нет данных под выбранные фильтры — покажи пустое состояние с явной причиной («за выбранный период данных нет»), а не чужой набор. Демо-набор наполни так, чтобы под каждым значением каждого фильтра числа были РАЗНЫЕ, и один срез оставь пустым.
  4. Для демонстрационных наборов: data-kt-data-mode="demo" на <body> и видимый чип <span class="kt-ai-chip" data-tone="orange">Демо-данные</span> в шапке. Для записей, действительно сохраняемых в собственной базе приложения, допустим live и подпись «Данные приложения». Чип «Данные из системы» используй только для реально подключённой системы, когда в задании названы источник и точка доступа. Не представляй собственную базу как интеграцию с КТ.
  5. Объявленный запрет обязан быть запретом, а не надписью. Если строка помечена как непроходная (конфликт данных, пустой обязательный срок, незаполненное поле), действие по ней НЕ ВЫПОЛНЯЕТСЯ: ни поштучно, ни массовой кнопкой «принять всё». Кнопку в такой строке ставь disabled, а рядом одной фразой скажи, ЧТО именно мешает и что сделать («срок не заполнен — укажите дату»). Массовое действие пропускает непроходные строки и честно пишет, сколько пропустило.