12 KiB
Регистрация на тимбилдинг ДЦБ Астана
У нас скоро тимбилдинг для нашего дивизиона в кт, внизу информация. Разработай сайт для регистрации участников тимбилдинга, ну и нам админом чтобы могли видеть, кто зарегистрировался 🔥 ДЦБ Астана, принимайте эстафету! 😎 Коллеги, завтра наконец-то ваша очередь перезагрузиться! 🤩 18 сентября состоится командный тимбилдинг ДЦБ Астана в зоне отдыха «Лазурный берег» 💚 Впереди день вне привычной рабочей обстановки: командные активности, общение, отдых и возможность просто классно провести время вместе По времени: 🕣 В 08:30 приходим на работу как обычно в БЦ «Асылтау» 🚌 В 10:30 выезжаем от БЦ «Асылтау» 📍 ул. Алматы, 1 🌊 Место проведения: зона отдыха «Лазурный берег» 📍 г. Косшы, ул. Айтебе би, 32 https://2gis.kz/astana/geo/70000001075700933/71.350893,50.990512 🚌 Обратный выезд с базы отдыха ориентировочно в 18:00 Алматы свой заряд уже получил, теперь очередь Астаны! 🔥 Оставляем рабочие задачи на несколько часов, переключаемся, общаемся и набираемся новых впечатлений вместе с командой 💙 Берите с собой хорошее настроение, остальное организуем! 🫂 До встречи завтра!
Цель: Сайт для регистрации участников и просмотра списка администратором
Пользователи: Участники тимбилдинга и администраторы
Экраны:
- Форма регистрации: имя, фамилия, телефон, подтверждение
- Админ-панель: список зарегистрированных участников
Данные: Имя, фамилия, телефон участника, статус регистрации
Правила брифа: интерфейс в стиле Казахтелекома на дизайн-системе KT AI, на русском; адаптивно для телефона; без входа по логину и паролю. Если настоящих данных нет — наполни приложение правдоподобными примерами. Не пиши на экране пометок «демо», «демонстрационная версия», «тестовые данные» и не утверждай, откуда взяты данные.
Объём работы
Собирай ровно то, что написано в задании. Не добавляй лишние разделы, журналы и настройки. Для статичной страницы достаточно index.html. Если запрошен статичный макет, не добавляй серверную часть на этом этапе. Если задача требует общего хранения, настоящей регистрации или рабочего приложения, реализуй серверную часть и базу данных средствами Vibe AI. Создай необходимые файлы, таблицы и обработчики, даже если владелец не перечислил их отдельно. Не подменяй общее хранение localStorage или демонстрационным списком. Собственная база приложения не требует интеграции с системами КТ и отдельного утверждения дизайна в экспрессе. При доработке существующего проекта это правило заменяет прежнее ограничение одним HTML-файлом. Проверь сохранение записи, чтение из другой сессии, обработку ошибок и ограничения доступа. Личные данные доступны только уполномоченному пользователю, секреты не попадают в браузерный код. Не придумывай доступы или готовые интеграции. Если публикация серверной части недоступна, укажи конкретную причину и не объявляй функцию работающей. Закончив, опубликуй приложение и сообщи фактический адрес и результаты проверки; сохраняй прежний адрес, если платформа это позволяет.
Имена файлов
Если серверная часть не нужна, скрипт интерфейса называй script.js, стили — style.css. Не создавай в корне проекта файлы app.js, main.js, index.js, server.js, bot.js, app.py, main.py, server.py и package.json со scripts.start: платформа примет проект за серверное приложение и не опубликует статичный сайт. Эти имена — только для настоящего сервера.
Дизайн — дизайн-система 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 уходит в тёмную по системной теме). lang — язык интерфейса из задания: казахский — kk, английский — en, иначе ru. Переключатель темы можно оставить, но открываться страница должна светлой.
Цвета, отступы и размеры — только токенами 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-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/ закоммить вместе с проектом — иначе опубликованная страница останется без стилей.
Без пометок «демо»
Не пиши на экране «Демо-данные», «демонстрационная версия», «тестовые данные», «макет» и похожие пометки. Если настоящих данных нет — наполни приложение правдоподобными примерами. Не утверждай, откуда взяты данные.
Ничего не додумывай
Собирай по заданию. Сведений о работе, которых в задании нет, не добавляй: чужие компании и бренды, системы и интеграции, отделы, роли, сроки, цены и показатели «как в жизни» — не выдумывай. Примеры в таблицах и на графиках — обычные и нейтральные, они только показывают устройство экрана. Чего-то не хватает — оставь поле пустым или добавь пустое состояние, а не выдуманный факт.