diff --git a/.vibe42-design.json b/.vibe42-design.json new file mode 100644 index 0000000..811fd64 --- /dev/null +++ b/.vibe42-design.json @@ -0,0 +1 @@ +{"version": 1, "id": "standard", "name": "Стандартный дизайн"} diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..90064c0 --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,324 @@ + +Выбранный дизайн проекта: **Стандартный дизайн**. Прочитай design.md до работы над UI; его стиль важнее оформления в примерах навыков. + + +# Vibe42 — учебная песочница: сайты, боты и первые приложения + +Workspace юзера `tore`. Это **учебная среда**, где обычные люди (не разработчики) делают свой первый настоящий проект: сайт, telegram-бота или простое приложение. + +--- +## 🎯 ТВОЯ РОЛЬ + +Ты — **гид и помощник**, а не слепой исполнитель. Цель сессии — чтобы юзер вышел с: +1. **работающим воплощением ЕГО идеи**: сайт — опубликован на `https://pages.git.vibe42.kz/tore//`, бот/приложение — запущены через `run` с живой ссылкой, +2. ощущением «это было легко» — всю техническую кухню (серверы, зависимости, git) берёшь на себя ты. + +Юзер не разработчик. Ему важен **работающий результат**, а не код. + +--- +## 🧱 СТЕК: ОДИН НА ВСЁ — НЕ ВЫДУМЫВАЙ + +Модель у нас не самая мощная, поэтому **не сочиняй архитектуру с нуля** — бери готовый стек и рецепт под тип задачи. Так проект заработает с первого-второго раза, а не будет «не могу заранить / node не стартует». + +**Определи тип и возьми стек — без вариантов:** + +| Что хочет юзер | Стек (ЖЁСТКО) | Навык / рецепт — загрузить ПЕРЕД работой | +|----------------|---------------|--------| +| Сайт, лендинг, визитка, портфолио, меню, афиша, waitlist (форма на нём — только если ответы никуда сохранять не надо; иначе строка «Простое приложение с сервером») | **Статика:** в проекте УЖЕ лежит стартовый `index.html` в выбранном дизайне из `design.md` — открой его (`read`) и правь (`edit`), не пиши с нуля; при необходимости + `script.js`. Ванильный JS, БЕЗ сборки, БЕЗ React/Vue/Vite, БЕЗ npm. БЕЗ Tailwind/Bootstrap/Google Fonts и без своих hex-цветов — только классы `kt-ai-*` и токены `var(--kt-ai-…)`. | навык `landing-templates` (шаблоны секций A–E) + `design.md` → правка готового `index.html`, публикация в `pages` | +| Telegram-бот | **Node.js (CommonJS) + grammY** (предустановлен), long-polling | навык `backend-run` → Рецепт T | +| Простое приложение с сервером: форма регистрации/заявки/опроса, ответы которой надо **сохранять**, API, счётчик, запись на время (лендинг с рабочей формой — тоже сюда) | **Node.js (CommonJS), сервер на `node:http` БЕЗ зависимостей + хранение в `data.json`** (массив плоских объектов — юзер видит записи во вкладке «Данные» и качает Excel; админку не строй без просьбы) | навыки `kt-design-system` (архетип экрана) → `backend-run` → Рецепт B | +| **Полноценное приложение:** кабинет, панель, CRM-lite, несколько экранов, живые данные — юзер явно просит «приложение/систему», а не страницу | **Express + Vite/React (фронт собирается в `dist/`, сервер его раздаёт с одного порта) + `data.json`.** Бюджет контейнера **512 МБ / 1 CPU**: зависимости — только express, react, react-dom, vite, @vitejs/plugin-react; НИКАКИХ next/nuxt/nest/prisma/mongoose/pg/tailwind. Сборку и установку делает `run` (scripts.build + scripts.start), сам в шелле не собирай | навыки `kt-design-system` (архетип экрана) → `backend-run` → Рецепт A | +| Нужен ИИ внутри (умный бот, генерация текста, ответы) | тот же Node-скелет + **`fetch` к `process.env.AI_BASE_URL`** (без SDK) | навык `backend-run` → блок «ИИ» | +| Корпоративный агент Alem внутри проекта | тот же Node-скелет + вызов Alem по `process.env.ALEM_*` | навык `backend-run` → раздел «Агент Alem» | +| **Презентация, слайды, «сделай презу», PowerPoint, pptx, доклад** | **СТАТИКА: ОДИН `index.html` + pptxgenjs с CDN. Бэкенд НЕ поднимать, ИИ в рантайме НЕ звать** | навык `presentations` — бери оттуда скелет целиком | +| Разобрать документы юзера (Excel / Word / PDF): свод, отчёт, выжимка | Предустановленные `xlsx` / `mammoth` / `pdf-parse` | навык `office-files` | +| **Учёт и трекер:** склад, заявки, журнал, задачи, СИЗ, путевые листы, сбор статистики, отчётность | **Node.js + `node:http` + `data.json`** — тот же Рецепт B, но несколько сущностей и статусы | навыки `kt-design-system` → `accounting-system` → `backend-run` (Рецепт B) | +| Читать корпоративную почту юзера (Лотус) | Node-скелет + `process.env.LOTUS_*` | навык `backend-run` → «бот, читающий почту (Lotus)» | +| **Данные из ClickHouse:** отчёт, аналитика, дашборд, «посчитай по базе», выгрузка, динамика | ИИ считает командой `ch` (только чтение) и отвечает цифрами; дашборд — Рецепт B, сервер ходит в `process.env.CH_BASE_URL` | навык `clickhouse` (сначала `ch schema`) → для экрана `kt-design-system` (архетип dashboard/analytics) | + +**Сначала таблица, потом код.** Прежде чем писать хоть строку — найди в таблице строку под запрос юзера и загрузи указанный навык вызовом `skill({ name: "..." })`: рецепты и скелеты лежат там, а не здесь. Если запрос похож на два типа сразу (например «сайт, который делает презентации») — **выигрывает более простой стек**: презентация это статика, а не «приложение с сервером». Бэкенд поднимай, только когда без него физически никак: нужен Telegram-бот, приём данных от многих людей или хранение между устройствами. + +**Язык бэкенда — ВСЕГДА Node.js в стиле CommonJS: `require(...)`, а не `import`.** Не смешивай ESM и CJS — это главная причина «node не запускается». Python бери ТОЛЬКО если задача реально требует python-библиотеку, которой нет в JS (тогда `main.py` + `requirements.txt`). По умолчанию — Node. + +**3 правила, которые ломаются чаще всего:** +1. Зависимости — ТОЛЬКО в `package.json` → `dependencies`. Их поставит `run`. НИКОГДА не пиши `npm install` в шелле. +2. Порт — всегда `process.env.PORT || 3000`. Не хардкодь другой. +3. Запуск бэкенда — ТОЛЬКО командой `run`. Никогда сам `node ...` / `npm start` в шелле. +4. **Пути во фронтенде — ТОЛЬКО относительные, без ведущего `/`:** `fetch("api/register")`, `src="script.js"`, `href="list.html"`. Приложение юзера открывается под под-путём (`…/proxy/3000/`), и `fetch("/api/…")` уходит мимо сервера — форма «не отправляется». В сервере наоборот сравнивай `url` с `/api/...` как обычно. + +--- +## 🍳 Готовые рецепты кода → навык `backend-run` + +Скелеты, которые надо копировать целиком: Рецепт T (Telegram-бот на grammY), Рецепт B (сервер на `node:http` + `data.json`), блок «ИИ» без ключей — лежат в навыке `backend-run`. Прежде чем писать хоть строку бэкенда, вызови `skill({ name: "backend-run" })` и бери скелет оттуда, из головы не сочиняй. + +--- + +## 📥 Файлы для юзера (Excel, Word, отчёты) → навык `office-files` + +«Сделай отчёт», «выгрузи в эксель», «сформируй документ» — вызови `skill({ name: "office-files" })`: как сгенерировать файл и как ОТДАТЬ его юзеру. Создать файл мало — без выдачи юзер его не получит. + +--- + +## 📊 Учётная система → навык `accounting-system` + +Склад, заявки, журнал, задачи, СИЗ, путевые листы, учёт и отчётность — сначала вызови `skill({ name: "accounting-system" })` (модель `data.json`, поля, статусы, экраны), потом строй по Рецепту B из навыка `backend-run`. Схему не изобретай. + +--- + +## 📂 Проект принимает файлы юзеров → навык `office-files` + +В проекте нужна загрузка Excel / Word / PDF / CSV и разбор их на сервере — сначала вызови `skill({ name: "office-files" })`: предустановленные библиотеки (`xlsx`, `mammoth`, `pdf-parse`), приём файла и рецепты чтения. Свои парсеры не пиши. + +--- + +## 🚑 Не запускается? → навык `backend-run` + +Бэкенд не стартует, `run` падает, пустой экран, ошибка в логах — открой `run logs`, найди строку с ошибкой и вызови `skill({ name: "backend-run" })`: там чек-лист «симптом → причина → фикс». Не гадай без него. + +--- + +## 📎 Файлы от юзера → навык `office-files` + +Юзер прислал Excel, Word, CSV или текст и просит разобрать, свести, посчитать — вызови `skill({ name: "office-files" })` ДО того, как открывать файл: там где его искать и чем читать. + +--- + +## 🗺 СЦЕНАРИЙ ПЕРВОГО ЗАХОДА (юзер только зашёл, ещё ничего нет) + +1. Поздоровайся коротко: «Привет! Тут за 10-15 минут делаем работающий проект — сайт, telegram-бота или простое приложение. Что хочешь сделать?» +2. Если он не знает — предложи **4 конкретных идеи** (выбирай близкие к нему, не абстрактные): + - Промо хобби (фотография / музыка / спорт) + - Резюме / personal page с контактами + - Афиша мероприятия (концерт, день рождения, мастер-класс) + - Меню заведения / прайс услуг + - Лендинг продукта или будущего проекта (waitlist) +3. Уточни **2 короткие детали**: стиль (тёмный/светлый/яркий) и главную цель (рассказать / собрать заявку / показать работы). +4. Собирай страницу **прямо в текущей папке проекта** — ты уже в ней (проект создан за тебя). Создавай `index.html`/`style.css`/`script.js` тут же. **НЕ запускай `./new-project`** и не делай `cd` в другие папки. Не спрашивай разрешения на каждый шаг. + +--- +## 👀 Предпросмотр — говори про него юзеру + +- Справа в интерфейсе есть вкладка **Предпросмотр** — она сама показывает сайт юзера и обновляется при каждом изменении файлов. Когда начинаешь собирать сайт, скажи один раз: «Смотри на вкладку Предпросмотр справа — там сайт появится и будет обновляться на глазах». +- Когда сайт опубликован, ВСЕГДА завершай отдельной строкой: «🎉 Готово! Твой сайт: <ссылка>» и добавь: «Нажми Поделиться в панели предпросмотра — там ссылка и QR-код, чтобы показать с телефона». + +--- +## 🧠 Память о юзере — веди её сам + +Файл памяти: `/srv/opencode/workspaces/users/tore/.mimo/memory.md` (dot-папка `.mimo` не видна в Предпросмотре — так и задумано). Папка `.mimo/` уже создана, тебе нужно только читать/писать `memory.md`. + +**В НАЧАЛЕ каждой сессии** — прочитай `/srv/opencode/workspaces/users/tore/.mimo/memory.md` ПЕРЕД первым ответом (файл всегда существует; если он пустой — просто продолжай, не сообщай об этом). Если там есть имя/проекты — поздоровайся персонально: «С возвращением, <имя>! Продолжим <последний проект> или сделаем новый?». Если файла нет — это новый юзер, работай по обычному сценарию. + +**ОБНОВЛЯЙ файл молча** (никогда не говори «я записал в память»), когда узнаёшь: +- как обращаться к юзеру (имя/ник); +- язык общения (русский / казахский / английский); +- уровень (новичок / уверенный); +- интересы и тематику; +- проекты: `repo → тема, статус`; +- стиль-предпочтения (тёмный / яркий, минимализм, ...); +- незакрытые хвосты («хотел добавить фото», «вернёмся к форме»). + +**Формат:** короткий markdown-список, максимум ~30 строк. Старое неактуальное — удаляй, не копи. + +**ЗАПРЕЩЕНО хранить:** пароли, номера карт, домашний адрес, личные данные третьих лиц. + +**Лотус ≠ владелец аккаунта.** Личность из `lotus whoami` — это владелец ПОДКЛЮЧЁННОГО корпоративного ящика, а не обязательно владелец этого аккаунта (коллеги вставляют свои токены для теста). НИКОГДА не записывай имя/почту из Лотуса как имя юзера и не здоровайся этим именем. Максимум — отдельная строка «Подключён Лотус: <ФИО> (<почта>)», которую надо обновлять при смене токена. Обращайся к юзеру только по имени, которым он сам представился в чате. + +**Говори языком юзера.** Отвечай на том языке, на котором пишет юзер (русский / казахский / английский), и на его уровне сложности: пишет коротко и просто — отвечай без терминов; технарю можно детали. Юзер переключил язык — переключись следом. + +**Это касается ВСЕГО видимого текста, а не только финального ответа.** Промежуточные комментарии между вызовами инструментов — планы («сейчас найду нужную строку…»), статусы («добавляю кнопки в hero…»), мысли вслух — юзер их ЧИТАЕТ, и они обязаны быть на его языке. Писать «We'll edit line 139» русскоязычному юзеру — ошибка. По-английски остаются только код, команды и имена файлов. + +--- +## 💬 ЕСЛИ ЮЗЕР ОТВЕЧАЕТ РАСПЛЫВЧАТО + +Юзер говорит «сделай что-нибудь» / «ну хз» / «сюрприз» → **не делай ничего абстрактного**. + +Скажи: «Давай определимся, я задам 3 коротких вопроса: +1. Это для тебя лично, для проекта/бизнеса, или для события? +2. Главная цель — рассказать о чём-то / собрать заявку / показать портфолио? +3. Любимое настроение — строгое тёмное, лёгкое светлое, яркое цветное?» + +После ответов **сразу** предложи 2 конкретных варианта названия+структуры. Дай выбрать и иди делать. + +--- +## 🧭 ВЕДИ ЮЗЕРА ПО ЕГО ИДЕЕ — НЕ ПОДМЕНЯЙ ЕЁ + +**НЕ уговаривай юзера на «лендинг вместо» его идеи.** Если он хочет бота, магазин или приложение — помоги сделать именно это, по-настоящему. Твоя задача — провести человека по ЕГО идее до работающего результата, а не продать ему заглушку попроще. + +Как выбирать форму: +| Запрос | Что делаем | +|--------|------------| +| «бот в Telegram» | НАСТОЯЩИЙ бот: код + `run` (см. раздел «Бэкенд-проекты»), long-polling | +| «приложение для записи» | реальное приложение с сервером: форма → бэкенд хранит записи (файл/JSON) → `run` | +| «магазин с корзиной» | рабочий прототип: каталог + корзина на бэкенде; оплату (это внешние договоры) пока замени кнопкой «оформить» → WhatsApp | +| «блог» | статика (pages) — если без админки; с админкой — бэкенд через `run` | +| «сайт-визитка / промо / портфолио» | статичный лендинг + публикация в `pages` — тут это лучший инструмент, а не компромисс | +| «соцсеть» | честно скажи, что за один заход не получится, и предложи первый работающий кусок (профиль + лента на бэкенде) — пусть юзер выберет | + +Правила ведения: +1. Сначала пойми идею: 2-3 коротких вопроса «для кого, что должно уметь в первой версии, как это видишь». +2. Предложи **первый работающий шаг** ЕГО идеи (MVP на сегодня) и скажи, что можно добавить потом. Не ужимай идею молча. +3. Чего мы реально не можем (приём платежей, SMS, домены) — говори честно и предлагай обходной путь, а не делай вид, что этого не просили. +4. **Не говори «у нас только статические сайты»** — это больше неправда: бэкенды запускаются через `run`. + +--- +## 📐 Шаблоны страниц → навык `landing-templates` + +Лендинг, визитка, портфолио, афиша, меню, прайс, waitlist — вызови `skill({ name: "landing-templates" })` и возьми готовую структуру секций (шаблоны A–E) под идею юзера, потом правь `index.html`. + +--- + +## 🎤 Презентации → навык `presentations` + +«Сделай презу», слайды, PowerPoint, pptx, доклад из документов — сначала вызови `skill({ name: "presentations" })`: там флоу и готовый скелет `index.html` с pptxgenjs по CDN. Свой генератор pptx не выдумывай, бэкенд не поднимай. + +--- + +## ⚡ РИТУАЛ ПОСЛЕ ПЕРВОГО ЗАПУСКА + +Как только готов первый рабочий вариант (даже грубый): + +1. **Сохрани и забэкапь код** (это НЕ публикация — в интернет пока НЕ выкладываем): + ```bash + git add -A + git commit -m "v1" + git push origin HEAD:main + ``` +2. **Покажи результат через Предпросмотр, а НЕ через ссылку.** Скажи: + > Готово! Смотри вкладку **Предпросмотр** справа — там твой сайт. Что хочешь поменять? +3. **НЕ давай ссылку на опубликованный сайт и НЕ пушь в ветку `pages`** — сайт ещё не опубликован. Когда всё понравится, юзер нажмёт кнопку **«Опубликовать»** вверху — вот тогда и выложишь. +4. Дальше короткие итерации: правка → `git commit` → `git push origin HEAD:main` → показывай в Предпросмотре. Каждые 2-3 правки — commit. + +--- +## 🚀 ПУБЛИКАЦИЯ В ИНТЕРНЕТ — ТОЛЬКО ПО КНОПКЕ «Опубликовать» + +**Проект с сервером (server.js / `run`) публикуется той же кнопкой, но НЕ в `pages`:** платформа сама запускает сервер и даёт публичную ссылку `https://code.vibe42.kz/apps/tore//` (открывается без входа, формы и `api/…` работают, уснувшее приложение просыпается по первому заходу). Для таких проектов **ничего не пушь в `pages`** — там статика, формы получают 405. Просто скажи юзеру нажать «Опубликовать» и что ссылка появится в этом окне. + +**Публикуй (push в ветку `pages`) ТОЛЬКО когда юзер явно просит опубликовать.** Он нажимает кнопку **«Опубликовать»** вверху — тебе приходит сообщение вида «Опубликуй текущий проект…». САМ, без такой просьбы, в `pages` НИКОГДА не пушь — как бы хорошо сайт ни выглядел. + +Когда юзер попросил опубликовать: +```bash +git add -A +git commit -m "publish" +git push origin HEAD:pages +``` +Затем **ОБЯЗАТЕЛЬНО** дай ссылку **жирно**: +> 🎉 Готово! Твой сайт в интернете: **https://pages.git.vibe42.kz/tore//** + +и добавь: «Нажми Поделиться в панели предпросмотра — там ссылка и QR-код». + +--- +## ⚠️ ЖЕЛЕЗНЫЕ ПРАВИЛА (НЕ нарушать никогда) + +1. **Дефолт — статика (HTML + CSS + JS).** Сайты и лендинги собирай статикой, публикация через `pages`. +2. **Бэкенд разрешён ТОЛЬКО через команду `run`** (раздел ниже). НИКОГДА не запускай серверы сам в шелле (`node server.js`, `npm start`, `python bot.py`) — шелл живёт на общем хосте: процесс убьют, а твоя сессия повиснет. +3. **Никакой аутентификации / OAuth / JWT.** +4. **Никакого Docker, nginx, sudo, системных настроек.** +5. **Никаких `npm install` / `pip install` в шелле** — зависимости ставит `run` внутри контейнера юзера. Для лендингов Tailwind — только через CDN. +6. **НИКОГДА `git init` в workspace root (`/srv/opencode/workspaces/users/tore`)** — это папка-контейнер юзера, не репозиторий. + +--- +## ⚙️ Бэкенд, боты, run → навык `backend-run` + +Telegram-бот, API, сервер, команда `run`, динамика, ИИ или агент Alem внутри проекта, корпоративная почта Lotus — сначала вызови `skill({ name: "backend-run" })` (рецепты T и B, блок «ИИ», Alem, почта, чек-лист «не запускается»), потом строй. Без него не начинай. + +--- + +## 🏗 СТРОЙ ФАЗАМИ — план, красивый фронт, потом остальное + +**Шаг 0 — блюпринт.** Перед первой правкой напиши юзеру короткий план: 3-6 строк, какие фазы и какие файлы. Подтверждения НЕ жди — сразу строй. + +**Фаза 1 — ВСЕГДА красивый работающий фронт с мок-данными.** Свёрстанный index.html + style.css + script.js, данные захардкодь прямо в код (массив объектов). Фаза закончена = юзер открыл Предпросмотр и увидел КРАСИВУЮ работающую страницу. Не начинай бэкенд, пока фронт не смотрится достойно. + +**Фазы 2+ — по одной за раз:** бэкенд (server.js вместо мок-данных), интеграции, доп-страницы. После каждой фазы коротко скажи юзеру, что готово и что дальше. + +**Сколько фаз:** простая задача (визитка, лендинг, одна страница) = 1 фаза, НЕ раздувай. Сложная (приложение с данными/ботом) = 2-4. Больше 4 не планируй. + +**✅ ЧЕК-ЛИСТ СДАЧИ ФАЗЫ (обязателен, прогоняй молча перед «готово»):** +1. Каждый созданный/правленный .js прогнан через `node --check <файл>` (bash). Ошибка — почини до сдачи. +2. Фронт и бэк СОГЛАСОВАНЫ буквально: пути fetch совпадают с роутами server.js, имена полей JSON одинаковые с обеих сторон (открой оба файла и сверь глазами — несовпадение поля это самый частый твой баг). +3. Каждый id/класс из script.js реально есть в index.html. +4. В server.js путь запроса очищай от query: сравнивай `req.url.split("?")[0]`, а не весь req.url — иначе ссылка с параметрами отдаст 404. +5. Если есть бэкенд — запусти `run` и ДОЧИТАЙ лог до конца: ошибка в логе = фаза не сдана. Если только статика — посмотри вкладку Предпросмотр. +6. Никаких выдуманных CDN-адресов и библиотек: используй только то, что перечислено в рецептах ниже. +## 📁 ТЫ УЖЕ ВНУТРИ ПАПКИ ПРОЕКТА — собирай сайт ЗДЕСЬ + +Твоя рабочая директория (cwd) — это **папка проекта юзера** (`.../users///`). Проект уже создан за тебя в тот момент, когда юзер написал идею на главной. Проверь: `pwd` — папка проекта, `ls` — там лежат AGENTS.md/design.md/README.md. + +**Собирай сайт ПРЯМО В ТЕКУЩЕЙ папке:** создавай `index.html`, `style.css`, `script.js` здесь же, в cwd. + +❌ **НЕ запускай `./new-project`.** ❌ **НЕ делай `cd` в другие папки / в корень воркспейса.** Если создашь новый проект или уйдёшь в корень — сайт окажется НЕ в том проекте, а юзер увидит пустой Предпросмотр своего проекта и спросит «а где сайт?». Именно так это ломается. + +❌ **НИКОГДА не пиши файлы по АБСОЛЮТНОМУ пути и не конструируй путь из названия проекта** (`/srv/.../<имя>/index.html`). Только ОТНОСИТЕЛЬНЫЕ пути в cwd: `index.html`, `data.json`, `./style.css`. Абсолютный/угаданный путь создаёт папку-двойник (особенно если в названии кириллица) → файл уходит мимо проекта, Предпросмотр пустой. Не уверен, где ты — сделай `pwd` и `ls`, а не угадывай. + +### Когда `./new-project` всё-таки нужен +Только если юзер ЯВНО просит **отдельный НОВЫЙ проект** («создай ещё один проект», «сделай новый сайт отдельно») — и только тогда, когда в текущей папке реально есть скрипт `new-project` (значит ты в корне воркспейса). В обычном сценарии «сделай мне лендинг» — НЕ нужен, собирай в текущей папке. + +--- +## 🌐 Git и публикация + +**НЕТ GitHub.** Self-hosted git: **https://git.vibe42.kz** + +- Профиль юзера: https://git.vibe42.kz/tore +- Pages (живые лендинги): https://pages.git.vibe42.kz/tore// +- Креды уже в `/srv/opencode/workspaces/users/tore/.git-credentials` — git push/clone работают без пароля +- **НЕ спрашивай юзера про GitHub URL / токен** — их не нужно + +### Опубликовать лендинг (ТОЛЬКО по кнопке «Опубликовать») + +```bash +git add -A +git commit -m "site" +git push origin HEAD:pages +``` + +Ветка **`pages`** (Caddy её обслуживает; `gh-pages` тоже работает как fallback). Push → лендинг доступен мгновенно. **Но пушь в `pages` только когда юзер попросил опубликовать (нажал кнопку). Пока не просил — коммить и пушь только в `main`, показывай через Предпросмотр.** + +**Если push отклонён («permission denied for writing» и т.п.)** — это проблема git-кредов, она чинится сама при перезаходе. Скажи юзеру ровно это: «Перезайди на платформу (выйди и войди) и нажми "Опубликовать" ещё раз». НИКОГДА не связывай ошибки git/публикации с Лотусом — Лотус это ТОЛЬКО корпоративная почта, к репозиториям и публикации он отношения не имеет. Не выдумывай причин, которых не видишь в выводе команды. + +--- +## 🔧 Когда что-то идёт не так + +- **Pages 404** → запушь ветку `pages` снова: `git push origin HEAD:pages -f` + +### ⚠️ Проекты с бэкендом (server.js / run) и статика — НЕ путай юзера +Публикация в Pages — статика, `server.js` там НЕ работает. Поэтому проект с сервером публикуется кнопкой как **приложение** (`/apps/…`), а не в `pages`. В Превью запросы формы автоматически уходят к запущенному через `run` серверу, если пути относительные. +- Прежде чем переделывать работающий статический index.html на серверный рендер (форма POST, шаблоны из server.js) — ПРЕДУПРЕДИ юзера: «после этого Превью и Опубликовать перестанут показывать живую версию, рабочая ссылка будет только через run». Меняй только после его согласия. +- Если проект уже с бэкендом: держи index.html статическим фронтом (разметка + fetch к API бэкенда), а не серверным шаблоном — тогда Превью хотя бы показывает актуальную вёрстку. Юзеру давай run-ссылку как основную и прямо говори, что «Опубликовать» выложит только статическую часть. +- run-контейнер засыпает после ~20 минут простоя — ссылка перестанет открываться, это нормально: пусть юзер попросит тебя снова сделать `run`. +- После существенных правок уже опубликованного сайта НАПОМНИ юзеру нажать «Опубликовать» ещё раз — иначе на сайте останется старая версия. +- **Не дёргай Gitea API типа `/repos/.../pages`, `/settings/pages`, `/deploy_keys`** — их нет +- **Не пытайся «настроить Pages через UI Gitea»** — Pages у нас работают только через push в ветку `pages` +- **Публикация — только кнопкой «Опубликовать» в интерфейсе; API git-хостинга (Gitea/GitLab Pages) не вызывай** — публикацией управляет Pages-шлюз платформы, из проекта достаточно push в ветку `pages` +- Запуталось — сделай новый чистый проект через `./new-project NAME-v2`, перенеси туда работающий index.html + +--- +## ❌ Чего НЕ делать НИКОГДА + +- ❌ `git init` в workspace root +- ❌ `npm install` руками в шелле и тяжёлые зависимости (mongoose/pg/prisma/next/nuxt/nest) — контейнер юзера 512 МБ +- ❌ Поднимать бэкенд там, где хватает статики (лендинг, визитка, презентация) — сверься с таблицей стека +- ❌ Ставить тяжёлые фреймворки (nest / next / nuxt / django) — сервер на `node:http`, а для полноценного приложения (Рецепт A) — express +- ❌ Использовать `gh` CLI или GitHub API +- ❌ Вызывать Gitea Pages-API (его нет) +- ❌ Долгое отлаживание Pages — почти всегда решение «push HEAD:pages» +- ❌ Просить юзера ввести токен/URL/пароль — всё уже настроено +- ❌ Задавать юзеру 10 вопросов подряд (максимум 2-3 за раз) +- ❌ **Публиковать сам (push в `pages`) без просьбы юзера / кнопки «Опубликовать»** — до публикации показывай результат только через Предпросмотр +- ❌ **Запускать `./new-project` или уходить `cd` из текущей папки проекта** на обычный запрос «сделай сайт» — ты УЖЕ в папке проекта, собирай тут; иначе сайт уедет не в тот проект +- ❌ Показывать юзеру голый код больше 1 раза — ему важен результат, а не как написано +- ❌ Предлагать «давай сначала дизайн в Figma» — мы делаем сразу в HTML +- ❌ Говорить «это сложно» — переформулируй в простое +- ❌ Зависать в обсуждениях — сделай первый вариант грубо, потом итерируй + +--- +## 🎨 Выбранный дизайн проекта — design.md + +Стиль проекта указан в начале AGENTS.md и в `.vibe42-design.json`. Его палитра, шрифты и скругления важнее оформления в примерах навыков. Для стилей Стандартный дизайн / Apple / Midnight / Studio сохраняй `design-system/vibe-theme.css` последним после четырёх базовых CSS. Логотипы КТ обязательны только для стиля Казахтелеком; в других стилях используй бренд пользователя. + +Рядом лежит `design.md` — **прочитай его перед первой строкой вёрстки**. Иконки — только спрайт ДС (`design-system/icons/kt-ai-icons.js` + ``), логотипы — файлы бренда проекта; эмодзи и самодельные SVG вместо иконок запрещены. `design.md` — про сайты и лендинги. Для **приложений** (панель, кабинет, учёт, заявки, дашборд, канбан, мастер) сначала вызови навык `kt-design-system`: там архетипы экрана, app-shell и 16 эталонных прототипов — без него получается лендинг с карточками вместо продукта. В нём каркас `index.html`, классы блоков лендинга и токены дизайн-системы KT AI, которая уже лежит в проекте папкой `design-system/`. + +**Порядок для сайта/страницы — ровно такой:** 1) `read design.md`, 2) `read index.html` — стартовый каркас на ДС уже лежит в проекте, 3) `edit index.html` под задачу юзера. Отдельный `style.css` со своей палитрой не нужен: ДС уже стилизует кнопки, карточки и типографику; свой ` + + + + + + + + +
+ + +
+
+ + + +
+ +
+ + + +
+ + +
+
+ + +
+
+ +
+
+
+ + + + + + + + + + + + + + +
+ + + + + + diff --git a/design-system/tokens.json b/design-system/tokens.json new file mode 100644 index 0000000..6e61427 --- /dev/null +++ b/design-system/tokens.json @@ -0,0 +1,320 @@ +{ + "$meta": { + "name": "KT AI Design Tokens", + "version": "5.4.0", + "comment": "Единый источник истины. Правки ТОЛЬКО здесь, затем: python3 scripts/build_tokens.py. Генерирует: kt-ai-tokens.css, kt-ai-print.css, figma-variables.json, kt-ai-tailwind-preset.cjs. Ссылка на primitive: значение вида $имя. v5 «Mono»: light-first, near-black primary action, flat surfaces, синий демотирован в ссылки/идентичность. v5.2: контраст AA как машинный гейт — пороги проверяются в build_tokens.py, а не глазами. v5.4: шкала вертикального ритма (stack-*) — расстояние между блоками экрана перестало быть решением каждого компонента и стало одним токеном; space-* остаётся сырой шкалой для внутренних отступов." + }, + "primitives": { + "kt-blue-300": "#84c5f0", + "kt-blue-400": "#4b9ce2", + "kt-blue-500": "#0096d7", + "kt-blue-600": "#0077c8", + "kt-blue-700": "#075985", + "kt-ink-950": "#101011", + "kt-ink-900": "#1a1a1b", + "kt-ink-850": "#222223", + "kt-ink-800": "#2b2b2d", + "kt-gray-950": "#0a0a0b", + "kt-gray-900": "#161617", + "kt-gray-850": "#1c1c1e", + "kt-gray-800": "#232325", + "kt-gray-750": "#2a2a2c", + "kt-gray-700": "#343437", + "kt-gray-25": "#fcfcfb", + "kt-gray-50": "#f7f7f5", + "kt-gray-100": "#f0f0ed", + "kt-gray-200": "#e4e4e0", + "kt-gray-300": "#d4d4d0", + "kt-paper": "#fcfcfb", + "kt-snow": "#ffffff", + "kt-near-black": "#1a1a1a", + "kt-near-white": "#fafafa", + "kt-ink-700": "#3f3f42", + "kt-ink-600": "#58585c", + "kt-ink-400": "#707073", + "kt-white-a04": "#ffffff0a", + "kt-white-a06": "#ffffff0e", + "kt-white-a09": "#ffffff18", + "kt-white-a11": "#ffffff1c", + "kt-white-a18": "#ffffff2d", + "kt-white-a92": "#ffffffeb", + "kt-black-a04": "#0000000a", + "kt-black-a06": "#0000000f", + "kt-black-a08": "#00000014", + "kt-black-a16": "#00000029", + "kt-black-a32": "#00000052", + "kt-black-a55": "#0000008c", + "kt-green-300": "#7fc794", + "kt-green-a18": "#3f9c5e2e", + "kt-orange-300": "#f5a35f", + "kt-orange-a18": "#e87b232e", + "kt-red-300": "#f0928a", + "kt-red-a20": "#dc5b5234", + "kt-blue-a18": "#3f93c52e", + "kt-purple-300": "#bb9ae0", + "kt-purple-a18": "#8a5fb02e", + "kt-grayc-a18": "#8a8a8d2e", + "kt-green-700": "#166534", + "kt-green-a13": "#16a34a20", + "kt-orange-700": "#8a3d06", + "kt-orange-a14": "#f9731624", + "kt-red-700": "#991b1b", + "kt-red-a13": "#dc262620", + "kt-blue-a14": "#0284c724", + "kt-purple-700": "#5b21b6", + "kt-purple-a13": "#7c3aed20", + "kt-grayc-a10": "#6b72801a", + "kt-chart-blue": "#1683f3", + "kt-chart-green": "#34a853", + "kt-chart-orange": "#ff6a00", + "kt-chart-salmon": "#d2785f", + "kt-chart-pink": "#ea2f6b", + "kt-chart-red": "#ef4444" + }, + "scales": { + "space": { + "0": "0", + "1": "2px", + "2": "4px", + "3": "6px", + "4": "8px", + "5": "12px", + "6": "16px", + "7": "20px", + "8": "24px", + "9": "32px", + "10": "40px", + "11": "48px", + "12": "64px" + }, + "radius": { + "xs": "2px", + "sm": "3px", + "md": "4px", + "tag": "5px", + "lg": "6px", + "xl": "8px", + "2xl": "10px", + "3xl": "12px", + "full": "9999px" + }, + "text": { + "2xs": "11px", + "xs": "12px", + "sm": "13px", + "md": "14px", + "lg": "15px", + "xl": "18px", + "2xl": "24px", + "3xl": "30px" + }, + "leading": { + "tight": "1.25", + "normal": "1.5" + }, + "weight": { + "regular": "400", + "medium": "500", + "semibold": "600", + "bold": "700" + }, + "dur": { + "fast": "100ms", + "base": "160ms", + "slow": "240ms", + "slower": "400ms" + }, + "ease": { + "standard": "cubic-bezier(.2, 0, 0, 1)", + "enter": "cubic-bezier(0, 0, .2, 1)", + "exit": "cubic-bezier(.4, 0, 1, 1)" + }, + "z": { + "sticky": "20", + "dropdown": "30", + "drawer": "40", + "modal": "50", + "toast": "60", + "tooltip": "70" + }, + "control-h": { + "sm": "28px", + "md": "32px", + "lg": "40px", + "touch": "44px" + }, + "bp": { + "sm": "640px", + "md": "832px", + "lg": "1024px", + "xl": "1280px" + }, + "layout": { + "sidebar-width": "232px", + "sidebar-collapsed-width": "52px", + "content-max": "1040px", + "content-wide": "1200px", + "content-table": "1180px", + "nav-row": "30px", + "table-row": "48px", + "table-row-compact": "38px", + "table-row-relaxed": "56px", + "chart-height": "200px", + "stack-tight": "12px", + "stack-block": "16px", + "stack-group": "24px", + "stack-region": "32px", + "pad-card": "20px" + }, + "font": { + "sans": "\"Inter\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif", + "mono": "\"JetBrains Mono\", ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, monospace" + } + }, + "themes": { + "light": { + "bg": "$kt-paper", + "bg-soft": "$kt-gray-50", + "bg-elevated": "$kt-snow", + "bg-sunken": "$kt-gray-100", + "bg-hover": "$kt-black-a04", + "bg-active": "$kt-black-a08", + "bg-glass": "color-mix(in srgb, #fcfcfb 85%, transparent)", + "inset-highlight": "#ffffff1f", + "ai-accent": "#7c4fe0", + "ai-gradient": "linear-gradient(135deg, #0096d7, #7c4fe0 92%)", + "ai-orb": "radial-gradient(circle at 32% 30%, #b69cf0, #0077c8 75%)", + "orb-bg": "radial-gradient(circle at 42% 35%, #1c2940 0%, #0a0c12 72%)", + "fg-on-ai": "#ffffff", + "card-bg": "$kt-snow", + "card-bg-glow": "$kt-snow", + "card-border": "$kt-black-a08", + "card-border-hover": "$kt-black-a16", + "card-shadow": "0 1px 2px #0000000d", + "card-shadow-hover": "0 4px 14px #00000014", + "selection": "#1a1a1a16", + "fg": "$kt-near-black", + "fg-muted": "$kt-ink-600", + "fg-faint": "$kt-ink-400", + "fg-on-fill": "#ffffff", + "border": "$kt-black-a08", + "border-strong": "$kt-black-a16", + "divider": "$kt-black-a06", + "primary": "$kt-near-black", + "primary-hover": "#343437", + "primary-subtle": "$kt-black-a04", + "brand-blue": "$kt-blue-500", + "link": "$kt-blue-600", + "focus-ring": "#1a1a1a99", + "focus-shadow": "0 0 0 3px #1a1a1a1f", + "danger": "#dc2626", + "danger-hover": "#b91c1c", + "overlay": "$kt-black-a32", + "chip-default-bg": "$kt-black-a06", + "chip-default-fg": "#2d2d2f", + "chip-gray-bg": "$kt-grayc-a10", + "chip-gray-fg": "$kt-ink-700", + "chip-orange-bg": "$kt-orange-a14", + "chip-orange-fg": "$kt-orange-700", + "chip-green-bg": "$kt-green-a13", + "chip-green-fg": "$kt-green-700", + "chip-blue-bg": "$kt-blue-a14", + "chip-blue-fg": "$kt-blue-700", + "chip-purple-bg": "$kt-purple-a13", + "chip-purple-fg": "$kt-purple-700", + "chip-red-bg": "$kt-red-a13", + "chip-red-fg": "$kt-red-700", + "status-ok-bg": "$kt-green-a13", + "status-ok-fg": "$kt-green-700", + "status-warn-bg": "$kt-orange-a14", + "status-warn-fg": "$kt-orange-700", + "status-risk-bg": "$kt-red-a13", + "status-risk-fg": "$kt-red-700", + "status-info-bg": "$kt-grayc-a10", + "status-info-fg": "$kt-ink-700", + "chart-blue": "$kt-chart-blue", + "chart-green": "$kt-chart-green", + "chart-orange": "$kt-chart-orange", + "chart-salmon": "$kt-chart-salmon", + "chart-pink": "$kt-chart-pink", + "chart-red": "$kt-chart-red", + "chart-bar-fill": "#e4e4e0", + "shadow-sm": "0 1px 2px #0000000d", + "shadow-md": "0 4px 14px #00000014", + "shadow-lg": "0 2px 6px #00000012, 0 12px 32px #0000001f", + "shadow-xl": "0 3px 8px #00000014, 0 24px 64px #00000026" + }, + "dark": { + "bg": "$kt-gray-950", + "bg-soft": "$kt-gray-900", + "bg-elevated": "$kt-gray-850", + "bg-sunken": "#060607", + "bg-hover": "$kt-white-a06", + "bg-active": "$kt-white-a09", + "bg-glass": "color-mix(in srgb, #0a0a0b 85%, transparent)", + "inset-highlight": "#00000014", + "ai-accent": "#7c4fe0", + "ai-gradient": "linear-gradient(135deg, #0096d7, #8b5cf6 92%)", + "ai-orb": "radial-gradient(circle at 32% 30%, #c4b0ff, #0096d7 75%)", + "orb-bg": "radial-gradient(circle at 42% 35%, #1c2940 0%, #0a0c12 72%)", + "fg-on-ai": "#ffffff", + "card-bg": "$kt-gray-900", + "card-bg-glow": "$kt-gray-900", + "card-border": "$kt-white-a09", + "card-border-hover": "$kt-white-a18", + "card-shadow": "none", + "card-shadow-hover": "none", + "selection": "#fafafa1f", + "fg": "$kt-white-a92", + "fg-muted": "#9b9b9e", + "fg-faint": "#848487", + "fg-on-fill": "$kt-ink-900", + "border": "$kt-white-a09", + "border-strong": "$kt-white-a18", + "divider": "$kt-white-a06", + "primary": "$kt-near-white", + "primary-hover": "#e4e4e7", + "primary-subtle": "$kt-white-a09", + "brand-blue": "$kt-blue-500", + "link": "$kt-blue-400", + "focus-ring": "#fafafa80", + "focus-shadow": "0 0 0 3px #fafafa24", + "danger": "#f0726a", + "danger-hover": "#f48a83", + "overlay": "$kt-black-a55", + "chip-default-bg": "$kt-white-a09", + "chip-default-fg": "$kt-white-a92", + "chip-gray-bg": "$kt-grayc-a18", + "chip-gray-fg": "$kt-gray-300", + "chip-orange-bg": "$kt-orange-a18", + "chip-orange-fg": "$kt-orange-300", + "chip-green-bg": "$kt-green-a18", + "chip-green-fg": "$kt-green-300", + "chip-blue-bg": "$kt-blue-a18", + "chip-blue-fg": "$kt-blue-300", + "chip-purple-bg": "$kt-purple-a18", + "chip-purple-fg": "$kt-purple-300", + "chip-red-bg": "$kt-red-a20", + "chip-red-fg": "$kt-red-300", + "status-ok-bg": "$kt-green-a18", + "status-ok-fg": "$kt-green-300", + "status-warn-bg": "$kt-orange-a18", + "status-warn-fg": "$kt-orange-300", + "status-risk-bg": "$kt-red-a20", + "status-risk-fg": "$kt-red-300", + "status-info-bg": "$kt-grayc-a18", + "status-info-fg": "$kt-gray-300", + "chart-blue": "$kt-chart-blue", + "chart-green": "$kt-chart-green", + "chart-orange": "$kt-chart-orange", + "chart-salmon": "$kt-chart-salmon", + "chart-pink": "$kt-chart-pink", + "chart-red": "$kt-chart-red", + "chart-bar-fill": "#2e2e31", + "shadow-sm": "0 1px 2px #00000052", + "shadow-md": "0 4px 16px #00000066", + "shadow-lg": "0 12px 40px #00000080", + "shadow-xl": "0 24px 80px #00000099" + } + } +} diff --git a/design-system/vibe-theme.css b/design-system/vibe-theme.css new file mode 100644 index 0000000..dbe6ddf --- /dev/null +++ b/design-system/vibe-theme.css @@ -0,0 +1,53 @@ +/* Vibe AI: Стандартный дизайн. Load AFTER the four base stylesheets. */ +:root, [data-theme] { + color-scheme: light; + --kt-ai-bg: #fafaf9; + --kt-ai-bg-soft: #fafaf9; + --kt-ai-bg-elevated: #ffffff; + --kt-ai-bg-sunken: #fafaf9; + --kt-ai-bg-glass: #ffffff; + --kt-ai-bg-hover: #c1e1f7; + --kt-ai-bg-active: #c1e1f7; + --kt-ai-fg: #0c0a09; + --kt-ai-fg-muted: #78716c; + --kt-ai-fg-faint: #78716c; + --kt-ai-fg-on-fill: #0c0a09; + --kt-ai-border: #e8e6e5; + --kt-ai-border-strong: #78716c; + --kt-ai-divider: #e8e6e5; + --kt-ai-card-bg: #ffffff; + --kt-ai-card-bg-glow: #ffffff; + --kt-ai-card-border: #e8e6e5; + --kt-ai-card-border-hover: #78716c; + --kt-ai-primary: #3ba6f1; + --kt-ai-primary-hover: #3ba6f1; + --kt-ai-primary-subtle: #c1e1f7; + --kt-ai-link: #0369a1; + --kt-ai-brand-blue: #3ba6f1; + --kt-ai-selection: #c1e1f7; + --kt-ai-focus-ring: #0369a1; + --kt-ai-focus-shadow: 0 0 0 3px #c1e1f7; + --kt-ai-chip-default-bg: #c1e1f7; + --kt-ai-chip-default-fg: #0c0a09; + --kt-ai-font-sans: Inter, system-ui, sans-serif; + --kt-ai-card-shadow: 0 2px 6px #0c0a0908; + --kt-ai-card-shadow-hover: 0 4px 12px #0c0a0910; + --vibe-accent: #3ba6f1; + --vibe-tint: #c1e1f7; + --vibe-heading-font: Inter, system-ui, sans-serif; + --vibe-heading-weight: 400; + --vibe-card-radius: 10px; + --vibe-button-radius: 999px; + --vibe-field-radius: 6px; +} + +body { background: var(--kt-ai-bg); color: var(--kt-ai-fg); font-family: var(--kt-ai-font-sans); } +h1, h2, .kt-ai-h1, .kt-ai-h2 { font-family: var(--vibe-heading-font); font-weight: var(--vibe-heading-weight); letter-spacing: -.035em; } +.kt-ai-hero h1 { font-size: clamp(36px, 5.5vw, 64px); line-height: 1.08; } +.kt-ai-section { padding-block: clamp(32px, 6vw, 64px); } +.kt-ai-pagehead, .kt-ai-cta, .kt-ai-pagefoot { background: var(--kt-ai-bg); color: var(--kt-ai-fg); } +.kt-ai-tile, .kt-ai-card { background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-card-border); border-radius: var(--vibe-card-radius); box-shadow: var(--kt-ai-card-shadow); } +.kt-ai-btn, .kt-ai-btn[data-size] { border-radius: var(--vibe-button-radius); } +.kt-ai-input, .kt-ai-select, .kt-ai-textarea { border-radius: var(--vibe-field-radius); } +.vibe-highlight { background: var(--vibe-tint); color: var(--kt-ai-fg); border-radius: 4px; padding-inline: .12em; } +.vibe-accent { color: var(--vibe-accent); } diff --git a/design.md b/design.md new file mode 100644 index 0000000..e204c32 --- /dev/null +++ b/design.md @@ -0,0 +1,124 @@ + +# Дизайн проекта: Стандартный дизайн + +Спокойный светлый интерфейс по DESIGN-6 (Seline Analytics). Тёплый почти белый фон #fafaf9, белые поверхности, тонкая граница #e8e6e5. Основной текст #0c0a09, вторичный #78716c, голубой акцент #3ba6f1 и мягкая подсветка #c1e1f7. +Заголовки лёгкие (400), крупные, с плотным межбуквенным интервалом; тело 14–16px. Roobert заменён локальным Inter. Много воздуха, спокойная аналитика, тонкие графики, маленькие подписи. Кнопки-пилюли, карточки 10px (крупные блоки 16px), поля 6px. Допустима очень мягкая тень. Текст на голубой кнопке тёмный для читаемости. Подсвечивай отдельную фразу заголовка голубым фоном, без градиентов. Не копируй название, маскота или данные Seline. + + +## Как применять + +Стиль выбран пользователем при создании проекта и сохранён в `.vibe42-design.json`. Сохраняй его при дальнейших правках. Цвета, типографика и форма компонентов из этого документа имеют приоритет над оформлением в примерах KT AI и навыках. Оттуда бери структуру и поведение. + +В проекте уже есть локальные компоненты `kt-ai-*`, шрифт Inter и иконки. Их токены переопределены в `design-system/vibe-theme.css` под выбранный стиль. Подключай этот файл ПОСЛЕДНИМ после четырёх базовых CSS на каждой странице, включая приложения. Не удаляй его при переходе на React: скопируй design-system в public/ и сохрани все пять подключений. Используй `var(--kt-ai-…)` и `var(--vibe-…)`; не подключай сторонние CSS-фреймворки или удалённые шрифты. Логотип и название — проекта пользователя. Корпоративные логотипы из библиотеки не обязательны. Иконки бери из `design-system/icons/kt-ai-icons.js` и спрайта. + +Базовая тема — `light`. Не включай автоматическое переключение светлой/тёмной темы. Используй доступные системные/локальные замены шрифтов, указанные выше. Полный визуальный референс: `design-system/style-reference.md`; он описывает стиль, его бренд и примеры текста переносить не надо. При расхождениях (опечатки, контраст текста, коммерческие шрифты) следуй этому design.md. + +## Старт: `index.html` + +Правь существующий каркас под идею пользователя. + +```html + + + + + + +Название проекта + + + + + + + + + +
+
+ Название + + О нас + Оставить заявку +
+
+ +
+
+

Главное обещание в одну строку

+

Подзаголовок: кому это и почему стоит остаться.

+
+ Оставить заявку + Подробнее +
+
+
+ +
+
+
+

Что вы получите

+

Одно-два предложения пояснения к секции.

+
+
+

Пункт первый

Коротко и по делу.

+

Пункт второй

Коротко и по делу.

+

Пункт третий

Коротко и по делу.

+
+
+
+ +
+
+

Призыв к действию

+

Город, адрес, часы работы — то, что нужно, чтобы дойти.

+ Написать +
+
+ +
+ © 2026 Название + + Контакты +
+ + + +``` + +## Блоки страницы (`kt-ai-page.css`) + +| Класс | Что это | +|-------|---------| +| `.kt-ai-wrap` | контейнер по центру (1080px). `data-width="narrow"` — 720px, `"wide"` — 1200px | +| `.kt-ai-pagehead` + `.kt-ai-pagehead-in` | липкая шапка страницы | +| `.kt-ai-hero`, `.kt-ai-hero-sub`, `.kt-ai-hero-actions` | первый экран. `data-align="center"` — по центру | +| `.kt-ai-section` + `.kt-ai-section-head` (h2 + p) | обычная секция. `data-divider="true"` — линия сверху | +| `.kt-ai-grid` + `.kt-ai-tile` (h3 + p) | сетка плиток «возможности». `data-cols="2"/"4"`, у плитки `data-span="2"/"full"` | +| `.kt-ai-tile-icon` | иконка над заголовком плитки — из спрайта ДС (см. «Иконки и логотипы» ниже) | +| `.kt-ai-cta` | финальный блок с призывом | +| `.kt-ai-pagefoot` | подвал | +| `.kt-ai-spacer` | распорка внутри шапки/подвала (толкает остальное вправо) | +| `.kt-ai-centered` | одна карточка по центру экрана — для страницы входа и 404 | + +Отступы между секциями ДС ставит сама. Адаптив (3→2→1 колонка) — тоже, `@media` писать не нужно. + +## Элементы (`kt-ai-components.css`) + +| Класс | Как применять | +|-------|---------------| +| `.kt-ai-btn` | кнопка / ссылка-кнопка. `data-variant="primary"` — главная, `"ghost"` — прозрачная, `"danger"` — опасная. `data-size="sm"/"lg"` | +| `.kt-ai-card` | карточка контента | +| `.kt-ai-chip` | статус-пилюля / тег | +| `.kt-ai-link` | текстовая ссылка | +| `.kt-ai-field` + `.kt-ai-input` / `.kt-ai-textarea` / `.kt-ai-select` | поле формы с подписью | + +**Один `primary` на экран.** Остальные кнопки — обычные или `ghost`. + + +## Проверка + +Проверь мобильный экран, читаемость, фокус клавиатуры и реальные действия кнопок. Коммить design-system/ и .vibe42-design.json вместе с проектом. Для бота, документа или скрипта без UI этот стиль не требует создания сайта. diff --git a/index.html b/index.html new file mode 100644 index 0000000..5cec9c4 --- /dev/null +++ b/index.html @@ -0,0 +1,52 @@ + + + + + + +Сводный финансовый анализ дочерних компаний + + + + + + + + +
+ +
+
+ + + + +
+
+
+
+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..20f4687 --- /dev/null +++ b/script.js @@ -0,0 +1,580 @@ +/* Сводный финансовый анализ дочерних компаний — статичный макет, состояние в localStorage */ +(function () { +"use strict"; +var LS = "sfa-do-v1"; +function loadState() { + var base = { screen: "upload", fileStatus: {}, fileManual: false, mappingMode: "auto", unitFixed: [], deviations: [], aiAccepted: false, sent: false, analysis: {}, done: { recognize: true, check: false, analysis: false, result: false }, theme: "light" }; + try { + var raw = localStorage.getItem(LS); + if (raw) { var s = JSON.parse(raw); for (var k in base) if (s && k in s) base[k] = s[k]; } + } catch (e) { if (!localStorage.getItem(LS)) base.resetFlag = true; } + return base; +} +function save() { try { localStorage.setItem(LS, JSON.stringify(S)); } catch (e) {} } +var S = loadState(); + +var COMPANIES = [ + ["ООО А", 12500, 11800, 3100, 3050, 420, 510, 640, 590, 1840, 2110, 1240, 1215], + ["ООО Б", 8200, 7950, 2100, 1980, 280, 310, 410, 390, 1220, 1150, 860, 842], + ["ООО В", 15400, 13100, 4100, 3480, 530, 470, 880, 720, 2450, 2610, 1580, 1595], + ["ООО Г", 9800, 10050, 2500, 2560, 340, 355, 520, 480, 1480, 1390, 1010, 998], + ["ООО Д", 11300, 10900, 2850, 2700, 390, 430, 610, 585, 1620, 1705, 1130, 1128], + ["ООО Е", 7600, 7420, 1900, 1830, 250, 270, 380, 350, 1090, 1160, 780, 775], + ["ООО Ж", 13900, 14350, 3600, 3720, 480, 455, 760, 730, 2180, 2040, 1420, 1408], + ["ООО З", 6700, 6510, 1680, 1610, 220, 240, 330, 300, 960, 1015, 690, 682], + ["ООО И", 10400, 9980, 2640, 2490, 360, 385, 570, 545, 1490, 1565, 1040, 1035], + ["ООО К", 8900, 8730, 2280, 2210, 300, 325, 450, 420, 1270, 1335, 915, 908], + ["ООО Л", 12100, 12490, 3200, 3310, 430, 415, 690, 660, 1740, 1650, 1265, 1258], + ["ООО М", 7100, 6890, 1780, 1720, 260, 280, 400, 365, 1030, 1085, 745, 740], + ["ООО Н", 14600, 13850, 3850, 3640, 505, 525, 830, 790, 2320, 2415, 1495, 1488], + ["ООО О", 9300, 8910, 2380, 2240, 330, 350, 510, 480, 1360, 1425, 965, 958], + ["ООО П", 11700, 11980, 3000, 3080, 405, 395, 640, 615, 1580, 1495, 1175, 1168], + ["ООО Р", 8400, 8160, 2150, 2060, 290, 310, 430, 400, 1180, 1240, 835, 830], + ["ООО С", 13200, 12840, 3400, 3280, 460, 485, 710, 680, 1950, 2020, 1355, 1348] +]; +var CO = COMPANIES.map(function (r) { return { name: r[0], vp: r[1], vf: r[2], ep: r[3], ef: r[4], cap: r[5], caf: r[6], dp: r[7], df: r[8], cp: r[9], cf: r[10], hp: r[11], hf: r[12] }; }); +function dev(o, f, v) { return v > 0 ? Math.round(Math.abs(f - v) / v * 1000) / 10 : 0; } +CO.forEach(function (c) { + c.rDev = dev(c, c.vf, c.vp); c.eDev = dev(c, c.ef, c.ep); c.cDev = dev(c, c.caf, c.cap); + c.dDev = dev(c, c.df, c.dp); c.kDev = dev(c, c.cf, c.cp); c.maxDev = Math.max(c.rDev, c.eDev, c.cDev, c.dDev, c.kDev); +}); + +var FILES = [ + ["Отчет_ОАОА_июнь.xlsx", 0], ["Fin_report_ООО-Б_0626.xlsx", 1], ["Свод_В_план_факт.xlsx", 2], + ["Отчет_Г_июнь_2026.xlsx", 3], ["Fin_Д_06-2026.xlsx", 4], ["Финансы_Е_июнь.xlsx", 5], + ["Отчет_Ж.xlsx", 6], ["Годовой_отчет_З.xlsx", 7], ["Данные_И_июнь.xlsx", 8], + ["Report_K_2026-06.xlsx", 9], ["Свод_Л_июнь.xlsx", 10], ["Fin_М_06.xlsx", 11], + ["Отчет_Н_июнь_2026.xlsx", 12], ["Data_O_2026.06.xlsx", 13], ["Отчет_П.xlsx", 14], + ["Фин_Р_июнь.xlsx", 15], ["Summary_S_06.2026.xlsx", 16] +]; + +var MAPPING = [ + ["Выручка", { 0: "Раздел_1_Оборот", 1: "Выручка_в_тыс", 2: "Выручка", 3: "ОБорот_за_отчетный_период", 4: "Revenue", 5: "ОП_Выручка", 6: "Выручка(нетто)", 7: "Выручка год", 8: "ОП-1 Выручка", 9: "REV_06", 10: "Выручка", 11: "Rev", 12: "Выручка", 13: "Sales", 14: "О_п_факт", 15: "Выручка_итоги", 16: "Revenue_06" }], + ["EBITDA", { 0: "EBITDA", 1: "Прибыль_до_аморт", 2: "EBITDA_план", 3: "EBITDA факт", 4: "EBITDA", 5: "EBITDA_итого", 6: "Прибыль_EBITDA", 7: "EBITDA_год", 8: "EBITDA факт", 9: "EBITDA_06", 10: "EBITDA", 11: "eBITDA", 12: "EBITDA факт", 13: "EBITDA", 14: "EBITDA_факт", 15: "EBITDA", 16: "EBITDA_06" }], + ["CAPEX", { 0: "Инвест_затраты", 1: "Капзатраты_тыс", 2: "CAPEX", 3: "Инвестпроект_затраты", 4: "Capex", 5: "CAPEX_итоги", 6: "Инвест.затраты", 7: "CAPEX_год", 8: "CAPEX факт", 9: "CAPEX_06", 10: "CAPEX", 11: "capex", 12: "CAPEX факт", 13: "CAPEX", 14: "ИЗ_факт", 15: "Капзатраты", 16: "Capex_06" }], + ["Дебиторка", { 0: "Дебиторка_итог", 1: "ДК_в_сальдо", 2: "Дебиторская", 3: "Д-ка_на_конец_мес", 4: "AR", 5: "Дебиторка_кон", 6: "ДК(кон.ост.)", 7: "Дебиторка_год", 8: "ДК факт", 9: "AR_06", 10: "Дебиторская", 11: "AR", 12: "ДК к/мес", 13: "AR", 14: "ДК_факт", 15: "Дебиторка_итого", 16: "AR_06" }], + ["Кредиторка", { 0: "Кредиторка_итог", 1: "КК_в_сальдо", 2: "Кредиторская", 3: "К-ка_на_конец_мес", 4: "AP", 5: "Кредиторка_кон", 6: "КК(кон.ост.)", 7: "Кредиторка_год", 8: "КК факт", 9: "AP_06", 10: "Кредиторская", 11: "AP", 12: "КК к/мес", 13: "AP", 14: "КК_факт", 15: "Кредиторка_итого", 16: "AP_06" }], + ["Численность", { 0: "Штат_ФТ", 1: "Числ._по_окладу", 2: "Численность", 3: "Штатное_число", 4: "Heads", 5: "Численность_кон", 6: "ФТ_кон.оот.", 7: "Численность_год", 8: "Штат факт", 9: "HC_06", 10: "Численность", 11: "FTE", 12: "Штат к/мес", 13: "HC", 14: "Числ_факт", 15: "Численность_итого", 16: "Headcount_06" }] +]; + +var LOGS = [ + ["10:02:14", "ok", "Получено 17 вложений из общего ящика Outlook"], + ["10:02:15", "info", "Форматы: 17 Excel, 3 нестандартных шаблона"], + ["10:02:18", "ok", "ООО А · сопоставлено 6 столбцов (шаблон 2024)"], + ["10:02:21", "warn", "ООО Б · «Выручка_в_тыс» → «Выручка», множитель 1/1000"], + ["10:02:23", "ok", "ООО В..И · автоматическое сопоставление (6/6)"], + ["10:02:27", "warn", "ООО О · пустые строки в файле, пропущены"], + ["10:02:29", "ok", "ООО Л..С · автоматическое сопоставление (6/6)"], + ["10:02:31", "info", "1 расхождение единиц измерения, отклонения свыше 5% — 3 компании"] +]; + +var ANALYSIS = { + 0: "Выручка 11 800 млн тг — 94% плана (−6%). EBITDA фактически выше плана (101%), операционная эффективность сохранена: CAPEX 510 млн тг при плане 420. Дебиторка +8%, кредиторка +3% — оборотный капитал в пределах нормы. Численность 1215 чел. при плане 1240.", + 1: "Выручка 7 950 млн тг — 97% плана. Обнаружено расхождение единиц: в файле выручка в тысячах тенге, при переносе применён множитель 1/1000. EBITDA 94% плана, отклонение в пределах допустимого. Численность 842 чел.", + 2: "Выручка 13 100 млн тг — −15% к плану, крупнейшее отклонение в группе. EBITDA 3 480 млн тг при плане 4 100 (−15%), доля в выручке снизилась с 27% до 27%. Дебиторка 1 720 при 880 — рост 96% требует разбора. Кредиторка 2 610 (96% плана).", + 3: "Выручка 10 050 млн тг — 103% плана, опережение. EBITDA 102% плана. CAPEX 355 (104%). Дебиторка 480 (92% плана). Компенсация плановых отставок, численность 998 чел. при плане 1 010.", + 4: "Выручка 10 900 млн тг — 96% плана. EBITDA 2 700 при 2 850 (95%). CAPEX 430 (110% плана) — опережение инвестиционной программы. Численность 1 128 чел.", + 5: "Выручка 7 420 млн тг — 98% плана. EBITDA 1 830 (96%). Отклонения в пределах 5% по всем статьям. Численность 775 чел.", + 6: "Выручка 14 350 млн тг — 103% плана, опережение. EBITDA 3 720 (103%). Дебиторка 730 (96% плана). Рост органический, численность 1 408 чел.", + 7: "Выручка 6 510 млн тг — 97% плана. EBITDA 1 610 (96%). Отклонений свыше 5% нет. Численность 682 чел.", + 8: "Выручка 9 980 млн тг — 96% плана, снижение 4% к плану. EBITDA 2 490 (94%). Кредиторка 1 565 (106% плана). Численность 1 035 чел.", + 9: "Выручка 8 730 млн тг — 98% плана. EBITDA 2 210 (97%). Отклонения минимальные. Численность 908 чел.", + 10: "Выручка 12 490 млн тг — 103% плана, опережение. EBITDA 3 310 (103%). CAPEX 415 (97%). Численность 1 258 чел.", + 11: "Выручка 6 890 млн тг — 97% плана. EBITDA 1 720 (97%). Отклонений свыше 5% нет. Численность 740 чел.", + 12: "Выручка 13 850 млн тг — 95% плана. EBITDA 3 640 (95%). Дебиторка 790 (95% плана), кредиторка 2 415 (104%). Численность 1 488 чел.", + 13: "Выручка 8 910 млн тг — 96% плана. EBITDA 2 240 (94%). Дебиторка 480 (94%). Численность 958 чел.", + 14: "Выручка 11 980 млн тг — 103% плана, опережение. EBITDA 3 080 (103%). Кредиторка 1 495 (95% плана). Численность 1 168 чел.", + 15: "Выручка 8 160 млн тг — 97% плана. EBITDA 2 060 (96%). Отклонения в пределах 5%. Численность 830 чел.", + 16: "Выручка 12 840 млн тг — 97% плана. EBITDA 3 280 (96%). Дебиторка 680 (96%). Численность 1 348 чел." +}; +CO.forEach(function (c, i) { c.analysis = ANALYSIS[i]; c.aStatus = 0; }); +CO[2].aStatus = 2; var A_ERR = CO[2]; + +var STEPS = [ + { id: "upload", n: 1, t: "Загрузка", sub: "распознавание файлов" }, + { id: "check", n: 2, t: "Проверка", sub: "данные и отклонения" }, + { id: "analysis", n: 3, t: "Черновик", sub: "анализа" }, + { id: "result", n: 4, t: "Итог", sub: "результат и отправка" } +]; + +/* ---------- utils ---------- */ +var T = "light"; +function $(id) { return document.getElementById(id); } +function esc(s) { return String(s).replace(/&/g, "&").replace(//g, ">").replace(/"/g, """); } +var NLC = new Intl.NumberFormat("ru-RU"); +function fmt(n) { return n == null ? "—" : NLC.format(n); } +function pct(d) { if (!d) return "0"; return "−" + String(d).replace(".", ","); } +function pctSign(d) { return (d > 0 ? "+" : "−") + String(d).replace(".", ","); } +function ic(name) { return ''; } +function toast(msg, tone) { + var d = document.createElement("div"); + d.className = "toast"; if (tone) d.setAttribute("data-tone", tone); + d.textContent = msg; + $("toasts").appendChild(d); + setTimeout(function () { d.style.transition = "opacity .3s"; d.style.opacity = "0"; setTimeout(function () { d.remove(); }, 320); }, 3600); +} +function sum(arr) { return arr.reduce(function (a, b) { return a + b; }, 0); } +function fileStatus(i) { + if (S.fileManual) return ["info", "Вручную"]; + if (S.aiAccepted) return ["ok", "Сопоставлено"]; + return S.fileStatus[i] || (i === 1 ? ["warn", "Единицы: ×1/1000"] : ["ok", "Сопоставлено"]); +} + +/* ---------- shell ---------- */ +function renderSidebar() { + var items = STEPS.map(function (st) { + var done = !!S.done[st.id]; var cur = S.screen === st.id; + return ''; + }); + items.push(''); + $("sbNav").innerHTML = '
' + items.join("") + '
'; +} +function renderTopbar() { + var t = ""; + if (S.screen === "upload") t = "Загрузка и распознавание · " + "пятница, 10:02"; + else if (S.screen === "check") t = "Проверка данных и отклонений"; + else if (S.screen === "analysis") t = "Черновик анализа"; + else if (S.screen === "result") t = "Итоговый результат"; + else t = "О решении"; + $("topTitle").innerHTML = '' + t + 'пакет на пн, 15:00'; +} +function showScreen(id) { + if (id !== "about" && !canOpen(id)) { toast("Сначала завершите предыдущий шаг", "warn"); return; } + S.screen = id; save(); + renderSidebar(); renderTopbar(); + var r = { upload: viewUpload, check: viewCheck, analysis: viewAnalysis, result: viewResult, about: viewAbout }[id]; + var el = $("view"); + el.innerHTML = r(); + el.scrollTop = 0; + document.querySelector(".kt-ai-main").scrollTop = 0; + bind(id); + closeMobile(); +} +function canOpen(id) { + if (id === "upload") return true; + if (id === "check") return !!S.done.recognize; + if (id === "analysis") return !!S.done.check; + if (id === "result") return !!S.done.analysis || S.screen === "result"; + return true; +} +function closeMobile() { var sb = $("sidebar"); if (sb) sb.removeAttribute("data-open"); $("scrim").classList.remove("on"); } + +/* ---------- stepper ---------- */ +function stepHtml(curId) { + var h = ""; + STEPS.forEach(function (st, i) { + var done = !!S.done[st.id]; var cur = curId === st.id; var cls = []; + if (cur) cls.push('data-cur="true"'); + if (done) cls.push('data-done="true"'); + if (i > 0) h += ''; + h += '' + (done ? ic("check") : st.n) + '' + st.t + ''; + }); + return '
' + h + '
'; +} + +/* ================= ЭКРАН 1 — загрузка ================= */ +function viewUpload() { + var fileRows = FILES.map(function (f, i) { + var st = fileStatus(i); + return '
' + + '' + ic("spreadsheet") + '' + + '
' + esc(f[0]) + '
' + + '
' + esc(CO[i].name) + ' · получен 10 июн, ' + (9 + i % 4) + ':' + (String(5 + i * 7) % 60).padStart(2, "0") + '
' + + '' + st[1] + '
'; + }).join(""); + var mapRows = MAPPING.map(function (m) { + var orig = Object.keys(m[1]).map(function (k) { return m[1][k]; }); + return '' + m[0] + '' + + '' + orig.map(function (o) { return esc(o); }).join(" · ") + "" + + '' + m[0] + ''; + }).join(""); + var progress = S.fileManual ? 100 : S.aiAccepted ? 100 : 82; + var banner, tone; + if (S.fileManual) { tone = "warn"; banner = "Распознавание остановлено: 1 файл обработан в ручном режиме. Проверьте столбцы и верните автоматический режим."; } + else if (S.aiAccepted) { tone = "ok"; banner = "Все 17 файлов сопоставлены, расхождения единиц отмечены. Можно переходить к проверке данных."; } + else { tone = "info"; banner = "ИИ сопоставляет столбцы по 17 файла. Отклонения и единицы будут отмечены после завершения."; } + banner = '
' + banner + '
'; + return pageHead("Загрузка и распознавание", "Вложения из общего ящика Outlook · 17 дочерних компаний, отчёт за июнь", + '', '' + + '') + + banner + stepHtml("upload") + + '
' + + '

Файлы

17 шт. · июнь 2026' + + (S.aiAccepted ? '' : "") + '
' + + '
' + fileRows + '
' + + '

Прогресс распознавания

' + + '
' + progress + '%' + (S.aiAccepted ? "17/17 файлов" : "14/17 файлов") + 'автоматически
' + + '
' + + '
Сопоставление: 6 целевых показателей во всех файлах
' + + '

Журнал действий ИИ

' + + '
' + LOGS.map(function (l) { + return '
' + l[0] + '' + + '' + (l[1] === "ok" ? "готово" : l[1] === "warn" ? "внимание" : "инфо") + '' + + '

' + l[2] + '

'; + }).join("") + '
' + + '
' + + '

Сопоставление столбцов

исходный формат → единый шаблон
' + + '
' + + mapRows + '
ПоказательИсходный столбец (варианты)Целевой столбец
'; +} + +/* ================= ЭКРАН 2 — проверка ================= */ +var chk = { company: "all", only: "all" }; +function viewCheck() { + var opts = "" + CO.map(function (c, i) { return ""; }).join(""); + var devs = CO.filter(function (c) { return c.maxDev > 5; }).length; + var kpis = + kpi("Компаний в сводном файле", "17 / 17", "план и факт, июнь") + + kpi("Отклонения плана > 5%", devs, "из 17 компаний") + + kpi("Единицы измерения", S.unitFixed.length ? "исправлено" : "1 / 17", "ООО Б · ×1/1000") + + kpi("Структура", "6 показателей", "итоговый лист + 17 вкладок"); + return pageHead("Проверка данных и отклонения", "Сводный файл сформирован ИИ · проверьте единицы измерения и отклонения от плана", + '', '") + + stepHtml("check") + + '
' + kpis + '
' + + '

Сводная таблица

' + + '
' + + '
' + + '
' + + '' + + '
' + + '
' + + '

Отклонения подсвечены: двухсегментная шкала — 2% и 5%. Строка с ошибками единиц помечена красным; исправление — по клику на ячейку. Итоговая строка — сумма по выбранным компаниям.

' + + '
' + + unitBanner(); +} +function kpi(label, value, hint) { return '
' + label + '' + value + '' + hint + '
'; } +function unitBanner() { + var fixed = S.unitFixed.length === 1; + return fixed + ? '
Единицы ООО Б исправлены: выручка переведена из тысяч в миллионы тенге.
' + : '
Расхождение единиц: ООО Б. В файле выручка в тысячах тенге, в шаблоне — в миллионах. Клик по ячейке выручки — исправить вручную.
'; +} +function totalRow() { + var r = ["Всего", sum(CO.map(function (c) { return c.vp; })), sum(CO.map(function (c) { return c.vf; })), sum(CO.map(function (c) { return c.ep; })), sum(CO.map(function (c) { return c.ef; })), sum(CO.map(function (c) { return c.cap; })), sum(CO.map(function (c) { return c.caf; })), sum(CO.map(function (c) { return c.dp; })), sum(CO.map(function (c) { return c.df; })), sum(CO.map(function (c) { return c.cp; })), sum(CO.map(function (c) { return c.cf; })), sum(CO.map(function (c) { return c.hp; })), sum(CO.map(function (c) { return c.hf; }))]; + return r; +} +function renderSumTable() { + var box = $("sumTable"); if (!box) return; + var rows = CO.map(function (c, i) { + var show = chk.company === "all" || chk.company === String(i); + if (!show) return ""; + if (chk.only === "dev" && c.maxDev <= 5) return ""; + if (chk.only === "unit" && c.name !== "ООО Б") return ""; + var unitFix = S.unitFixed.indexOf(1) !== -1; + var dR = c.rDev, dE = c.eDev, dC = c.cDev, dD = c.dDev, dK = c.kDev; + function cell(plan, fact, d, extra) { + var cls = "num cell-num" + (d >= 5 ? " cell-dev-3" : d > 2 ? " cell-dev-2" : ""); + return '' + fmt(plan) + ' / ' + fmt(fact) + ' (' + (d > 0 ? pct(d) : "0") + '%)'; + } + var vfCell = c.name === "ООО Б" + ? '' + fmt(c.vp) + ' / ' + fmt(c.vf) + ' (' + pct(dR) + '%) ' + (unitFix ? 'исправлено' : '×1 000') + '' + : cell(c.vp, c.vf, dR); + return '' + esc(c.name) + '' + vf + + cell(c.ep, c.ef, dE) + cell(c.cap, c.caf, dC) + cell(c.dp, c.df, dD) + cell(c.cp, c.cf, dK) + + '' + fmt(c.hp) + ' / ' + fmt(c.hf) + ''; + }).join(""); + var filtered = CO.filter(function (c, i) { return chk.company === "all" || chk.company === String(i)); + var totalN = chk.company === "all" ? CO.length : 1; + var tsum = filtered.map(function (c) { + return { vp: c.vp, vf: c.vf, ep: c.ep, ef: c.ef, cap: c.cap, caf: c.caf, dp: c.dp, df: c.df, cp: c.cp, cf: c.cf, hp: c.hp, hf: c.hf }; + }).reduce(function (a, b) { for (var k in a) a[k] += b[k]; return a; }, { vp: 0, vf: 0, ep: 0, ef: 0, cap: 0, caf: 0, dp: 0, df: 0, cp: 0, cf: 0, hp: 0, hf: 0 }); + var dV = dev({}, tsum.vf, tsum.vp), dE = dev({}, tsum.ef, tsum.ep), dC = dev({}, tsum.caf, tsum.cap), dD = dev({}, tsum.df, tsum.dp), dK = dev({}, tsum.cf, tsum.cp); + function t(p, f, d) { return '' + fmt(p) + ' / ' + fmt(f) + ' (' + (d > 0 ? pct(d) : "0") + '%)'; } + var totalRowHtml = 'Итого, ' + (chk.company === "all" ? "17 компаний" : esc(CO[+chk.company].name)) + '' + + t(tsum.vp, tsum.vf, dV) + t(tsum.ep, tsum.ef, dE) + t(tsum.cap, tsum.caf, dC) + t(tsum.dp, tsum.df, dD) + t(tsum.cp, tsum.cf, dK) + + '' + fmt(tsum.hp) + ' / ' + fmt(tsum.hf) + ''; + var any = rows.indexOf("Выручка, млн тгEBITDA, млн тгCAPEX, млн тгДебиторка, млн тгКредиторка, млн тгЧисленность, чел." + + (any ? rows + totalRowHtml : 'Под фильтр не попали компании') + + ""; + var note = $("fNote"); if (note) note.textContent = any ? totalN + " из 17 · план / факт, откл. в %" : ""; +} +function pageHead(title, sub, left, right) { + return '

' + title + '

' + (sub || "") + '

' + + (right ? '
' + right + '
' : "") + '
'; +} + +/* ================= ЭКРАН 3 — черновик анализа ================= */ +var curA = 0; +function analysisText(i) { + var o = S.analysis[i]; + if (o && typeof o === "string") return o; + return CO[i].analysis; +} +function aStatus(i) { return (S.analysis[i] && S.analysis[i].status) || CO[i].aStatus || 0; } +function viewAnalysis() { + var list = CO.map(function (c, i) { + var st = aStatus(i); + var dot = st === 1 ? 'dot-ok' : (st === 2 ? 'dot-err' : 'dot-gen'); + return '
' + + '' + ic("file") + '' + + '
' + esc(c.name) + (S.analysis[i] && S.analysis[i].edited ? ' правка' : "") + '
' + + '
'; + }).join(""); + var words = CO.reduce(function (a, c, i) { return a + analysisText(i).split(/\s+/).filter(Boolean).length; }, 0); + var ready = CO.filter(function (c, i) { return aStatus(i) === 1; }).length; + var memoKpi = kpi("Компаний", CO.length, "по одному выводу") + + kpi("Принято", ready, "из " + CO.length) + + kpi("Объём записки", fmt(words) + " слов", "≈ " + (words > 640 ? "2" : "1") + " стр.") + + kpi("Готовность", ready === CO.length ? "100%" : Math.round(ready / CO.length * 100) + "%", "к формированию записки"); + return pageHead("Черновик анализа", "ИИ сгенерировал выводы по каждой компании · отредактируйте при необходимости", + '', '' + + '') + + stepHtml("analysis") + + '
' + memoKpi + '
' + + '
' + + '
' + list + '
' + + '
Черновик · ' + esc(CO[curA].name) + '' + words + ' слов' + + '' + + '
' + + '
' + + '
' + + '' + + 'Статус: ' + (aStatus(curA) === 1 ? "принято" : aStatus(curA) === 2 ? "есть пометка о данных" : "черновик") + '' + + (aStatus(curA) === 2 ? 'проверить дебиторку' : "") + + '
' + + '
'; +} + +/* ================= ЭКРАН 4 — итоговый результат ================= */ +function viewResult() { + var tv = totalRow(); + var dV = dev({}, tv[2], tv[1]), dE = dev({}, tv[4], tv[3]); + var memoRows = CO.filter(function (c) { return c.maxDev > 5 || c.name === "ООО Б"; }).map(function (c) { + return "

• " + esc(c.name) + ". " + analysisTextShort(c) + "

"; + }).join(""); + var status = S.sent ? ['data-status="ok"', "Отправлено директору 09:58", ""] + : S.done.analysis ? ['data-status="ok"', "Готово к отправке", "дедлайн: пн 15:00"] + : ['data-status="warn"', "Ожидает подтверждения анализа", "дедлайн: пн 15:00"]; + var xTable = '' + + CO.map(function (c) { return ''; }).join("") + + '
ОрганизацияВыручка, млн тгEBITDA, млн тгCAPEX, млн тгДебит. / Кредит., млн тг
' + esc(c.name) + '' + fmt(c.vf) + '' + fmt(c.ef) + '' + fmt(c.caf) + '' + fmt(c.df) + ' / ' + fmt(c.cf) + '
'; + return pageHead("Итоговый результат", "Финальная проверка пакета перед передачей финансовому директору", + '', '' + + '' + + '') + + stepHtml("result") + + '
' + + '' + status[1] + ' · ' + status[2] + (S.sent ? ' · адресат: финансовый директор' : "") + '
' + + '
' + + kpi("Сводный файл", "1 итог + 17 листов", "сводный_файл_июнь.xlsx") + + kpi("Записка", "2 страницы", "выводы по компаниям") + + kpi("Сверка", "17 / 17", "единицы согласованы") + + kpi("Отклонения", dV > 0 ? "−" + pctSign(dV) + "%" : pctSign(dV) + "%", "выручка к плану · EBITDA " + pctSign(dE) + "%") + + '
' + + '
' + + '

Сводный Excel

sheet 1 из 18: Итог, затем по организации
' + + '
' + xTable + '
' + + '

Записка к отчёту

2 стр.
' + + '
На: финансовый директор · От: аналитик · Пн, 15:00
' + + '

Свод по дочерним компаниям, июнь

' + + '

По всем 17 компаниям факт к плану по выручке ' + (dV > 0 ? "−" + pctSign(dV) : pctSign(dV)) + "%, по EBITDA — " + pctSign(dE) + "% (млн тг). Единицы измерения 1 компании (ООО Б) исправлены и пересчитаны.

" + + memoRows + + '

Рекомендации: разобрать дебиторку ООО В (рост 96% к плану) и CAPEX ООО Д (110% к программе).

' + + '
' + + '
'; +} +function analysisTextShort(c) { return c.analysis; } + +/* ================= действия ================= */ +function setUnitFix(i, fixed) { + var idx = S.unitFixed.indexOf(1); + if (fixed && idx === -1) { S.unitFixed.push(1); } + if (!fixed) S.unitFixed = S.unitFixed.filter(function (x) { return x !== 1; }); + save(); + if (S.screen === "check") renderSumTable(); updateUnitBanner(); + toast(fixed ? "Единицы ООО Б исправлены: ×1/1000 применён" : "Единицы ООО Б возвращены в исходные", fixed ? "ok" : "warn"); +} +function updateUnitBanner() { + if (S.screen !== "check") return; + var banner = document.querySelector("#view .kt-ai-banner:not([data-tone='info']):not([data-tone='warn'])"); + if (!banner) return; + var fixed = S.unitFixed.indexOf(1) !== -1; + banner.setAttribute("data-tone", fixed ? "ok" : "risk"); + banner.innerHTML = fixed + ? 'Единицы ООО Б исправлены: выручка переведена из тысяч в миллионы тенге.' + : 'Расхождение единиц: ООО Б. В файле выручка в тысячах тенге, в шаблоне — в миллионах. Клик по ячейке выручки — исправить вручную.'; + var k = document.querySelectorAll(".kt-ai-kpi"); + if (k[2]) k[2].querySelector(".value").textContent = fixed ? "исправлено" : "1 / 17"; +} +function acceptAllAnalysis() { + CO.forEach(function (c, i) { S.analysis[i] = { status: 1 }; }); + S.done.analysis = true; save(); + toast("Черновик принят по всем 17 компаниям", "ok"); + showScreen("analysis"); +} +function makeMemo() { + if (!S.done.analysis) { toast("Сначала примите черновик анализа по всем компаниям", "warn"); return; } + showScreen("result"); + toast("Записка сформирована", "ok"); +} +function download(text, filename) { + try { + var b = new Blob([text], { type: "text/plain;charset=utf-8" }); + var a = document.createElement("a"); + a.href = URL.createObjectURL(b); + a.download = filename; + document.body.appendChild(a); a.click(); a.remove(); + setTimeout(function () { URL.revokeObjectURL(a.href); }, 2000); + toast("Скачивание: " + filename, "ok"); + } catch (e) { toast("Не удалось скачать файл", "warn"); } +} +function xlsxText() { + return "Сводный файл, июнь 2026, млн тг (дебиторка/кредиторка/численность — свои единицы)\n\nКомпания;Выручка (план);Выручка (факт);EBITDA (план);EBITDA (факт);CAPEX (план);CAPEX (факт);Дебиторка (план);Дебиторка (факт);Кредиторка (план);Кредиторка (факт);Численность (план);Численность (факт)\n" + + CO.map(function (c) { return [c.name, c.vp, c.vf, c.ep, c.ef, c.cap, c.caf, c.dp, c.df, c.cp, c.cf, c.hp, c.hf].join(";"); }).join("\n") + + "\n\n" + CO.map(function (c) { return "== " + c.name + " ==\n" + analysisText(CO.indexOf(c)); }).join("\n\n"); +} +function memoText() { + var tv = totalRow(); var dV = dev({}, tv[2], tv[1]), dE = dev({}, tv[4], tv[3]); + return "ЗАПИСКА — свод по дочерним компаниям, июнь 2026\nНа: финансовый директор\n\nПо всем 17 компаниям факт к плану: выручка " + pctSign(dV) + "%, EBITDA " + pctSign(dE) + "% (млн тг).\nЕдиницы измерения ООО Б исправлены (тысячи → миллионы тенге).\n\n" + CO.filter(function (c) { return c.maxDev > 5 || c.name === "ООО Б"; }).map(function (c) { return "• " + c.name + ". " + analysisTextShort(c); }).join("\n") + + "\n\nРекомендации: разобрать дебиторку ООО В (рост 96% к плану) и CAPEX ООО Д (110% к программе).\n"; +} + +/* ---------- bind ---------- */ +function bind(screen) { + var v = $("view"); + v.querySelectorAll("[data-goto]").forEach(function (b) { + b.addEventListener("click", function () { showScreen(b.getAttribute("data-goto")); }); + }); + // загрузка + if (screen === "upload") { + v.querySelectorAll("[data-act='outlook']").forEach(function (b) { b.addEventListener("click", function () { toast("Обнаружено 17 вложений в общем ящике · загрузка завершена", "ok"); }); }); + v.querySelectorAll("[data-act='recognize']").forEach(function (b) { + b.addEventListener("click", function () { + if (S.aiAccepted) { if (S.done.recognize) showScreen("check"); return; } + S.aiAccepted = true; S.done.recognize = true; save(); + toast("Сопоставление завершено: 17/17 файлов, 1 расхождение единиц", "ok"); + showScreen("upload"); + }); + }); + v.querySelectorAll("[data-act='manual']").forEach(function (b) { b.addEventListener("click", function () { + S.fileManual = true; save(); toast("Открыт ручной режим для 1 файла. Проверьте столбцы и верните автоматический режим.", "warn"); showScreen("upload"); + }); }); + v.querySelectorAll("[data-file]").forEach(function (r) { r.addEventListener("click", function () { toast(esc(CO[+r.getAttribute("data-file")].name) + " · формат распознан, 6/6 столбцов", "ok"); }); }); + } + // проверка + if (screen === "check") { + renderSumTable(); + var fc = $("fCompany"); + if (fc) { fc.value = chk.company; fc.addEventListener("change", function () { chk.company = fc.value; renderSumTable(); }); } + var fo = $("fOnly"); + if (fo) fo.addEventListener("click", function (e) { + var b = e.target.closest(".seg"); if (!b) return; + chk.only = b.getAttribute("data-v"); + fo.querySelectorAll(".seg").forEach(function (x) { x.setAttribute("data-active", x === b ? "true" : "false"); }); + renderSumTable(); + }); + var box = $("sumTable"); + if (box) box.addEventListener("click", function (e) { + var cell = e.target.closest("[data-unit]"); + if (cell) { setUnitFix(1, S.unitFixed.indexOf(1) === -1); return; } + var tr = e.target.closest("tr[data-oi]"); + if (tr) { + var i = +tr.getAttribute("data-oi"); + toast(CO[i].name + ": " + (CO[i].maxDev > 2 ? "макс. отклонение " + CO[i].maxDev + "%" : "в пределах нормы") + (CO[i].name === "ООО Б" ? " · расхождение единиц: ×1/1000" : ""), CO[i].maxDev > 5 ? "warn" : "ok"); + } + }); + v.querySelectorAll("[data-act='to-check']").forEach(function (b) { b.addEventListener("click", function () { + if (S.unitFixed.indexOf(1) === -1) { toast("Сначала исправьте единицы ООО Б (клик по ячейке выручки)", "warn"); return; } + if (!S.done.check) { S.done.check = true; save(); } + showScreen("analysis"); + }); }); + } + // анализ + if (screen === "analysis") { + var ta = $("anaText"); if (ta) ta.value = analysisText(curA); + v.querySelectorAll("[data-ana]").forEach(function (r) { r.addEventListener("click", function () { + curA = +r.getAttribute("data-ana"); save(); showScreen("analysis"); + }); }); + if (ta) ta.addEventListener("input", function () { + var cur = S.analysis[curA] || {}; + S.analysis[curA] = Object.assign(cur, { text: ta.value, edited: true }); + save(); + var st = ta.closest(".analysis-body").querySelector(".ed-stats"); + if (st) st.textContent = ta.value.split(/\s+/).filter(Boolean).length + " слов"; + }); + v.querySelectorAll("[data-act='a-prev'],[data-act='a-next']").forEach(function (b) { + b.addEventListener("click", function () { + curA = (curA + (b.getAttribute("data-act") === "a-next" ? 1 : CO.length - 1)) % CO.length; + save(); showScreen("analysis"); + }); + }); + v.querySelectorAll("[data-act='a-accept']").forEach(function (b) { b.addEventListener("click", function () { + var st = S.analysis[curA] || {}; st.status = 1; S.analysis[curA] = st; save(); + toast(CO[curA].name + ": выводы приняты", "ok"); showScreen("analysis"); + }); }); + v.querySelectorAll("[data-act='accept-all']").forEach(function (b) { b.addEventListener("click", acceptAllAnalysis); }); + v.querySelectorAll("[data-act='make-memo']").forEach(function (b) { b.addEventListener("click", makeMemo); }); + } + // итог + if (screen === "result") { + v.querySelectorAll("[data-act='dl-xlsx']").forEach(function (b) { b.addEventListener("click", function () { download(xlsxText(), "Сводный_файл_июнь_2026.txt"); }); }); + v.querySelectorAll("[data-act='dl-memo']").forEach(function (b) { b.addEventListener("click", function () { download(memoText(), "Записка_июнь_2026.txt"); }); }); + var sb2 = v.querySelector("[data-act='send-pkg']"); + if (sb2 && !S.sent) sb2.addEventListener("click", function () { + S.sent = true; S.done.result = true; save(); + toast("Пакет отправлен финансовому директору · 09:58", "ok"); + showScreen("result"); + }); + } +} + +/* ---------- инициализация ---------- */ +function init() { + var html = document.documentElement; + T = S.theme || "light"; + html.setAttribute("data-theme", T); + var ti = $("themeIcon"); if (ti) ti.setAttribute("href", T === "light" ? "#moon" : "#sun"); + $("themeToggle").addEventListener("click", function () { + T = T === "light" ? "dark" : "light"; + S.theme = T; save(); + html.setAttribute("data-theme", T); + if (ti) ti.setAttribute("href", T === "light" ? "#moon" : "#sun"); + }); + $("burger").hidden = window.innerWidth >= 832; + $("burger").addEventListener("click", function () { + var sb = $("sidebar"); + var open = sb.hasAttribute("data-open"); + if (open) closeMobile(); + else { sb.setAttribute("data-open", "true"); $("scrim").classList.add("on"); } + $("burger").hidden = window.innerWidth >= 832; + }); + $("scrim").addEventListener("click", closeMobile); + window.addEventListener("resize", function () { $("burger").hidden = window.innerWidth >= 832; }); + document.querySelector(".kt-ai-shell").addEventListener("click", function (e) { + var n = e.target.closest(".kt-ai-nav-item[data-screen]"); + if (n) showScreen(n.getAttribute("data-screen")); + }); + if (S.resetFlag) { delete S.resetFlag; save(); toast("Предыдущее состояние не восстановилось · начат новый цикл", "warn"); } + renderSidebar(); + showScreen(S.screen || "upload"); +} +/* ================= ЭКРАН 5 — о решении ================= */ +function viewAbout() { + return pageHead("О решении", "Сводный финансовый анализ дочерних компаний", "", + '') + + '
' + + card("Паспорт решения", dl([ + ["Наименование", "Сводный финансовый анализ дочерних компаний"], + ["Исполнитель", "владелец процесса — сборка на платформе Vibe AI"], + ["Пользователи", "аналитик, финансовый директор"], + ["Частота", "еженедельно, вложения по пятницам"], + ["Дедлайн", "понедельник, 15:00"] + ])) + + card("Предпосылки", '
  • Ручная обработка данных 17 дочерних компаний занимает 3–4 часа в неделю
  • Разные форматы Excel приводят к путанице в столбцах и потере данных
') + + card("Входные данные", '
  • Выручка, EBITDA, CAPEX, дебиторка, кредиторка, численность — план и факт
  • Вложения в общем ящике Outlook, приходят по пятницам
  • У каждой компании свой шаблон листов и названий столбцов
') + + card("Что делает ИИ", '
  1. Распознаёт формат файла и сопоставляет столбцы
  2. Переносит данные в единый сводный файл
  3. Подсвечивает отклонения от плана
  4. Генерирует черновик анализа по каждой компании
') + + card("Что решает человек", '
  • Аналитик проверяет единицы измерения и расхождения
  • Аналитик редактирует и утверждает черновик анализа
  • Руководитель выборочно просматривает итоговый результат
') + + card("Результат и эффект", '
  • Сводный Excel: итоговый лист + листы по организациям
  • Записка на 1–2 страницы с выводами
  • Экономия 3–4 часов в неделю
') + + card("Риски и меры", '
  • Нестандартный формат файла, путаница тысячи/миллионы тенге
  • Обязательная проверка единиц и расхождений аналитиком
  • Выборочный контроль результата руководителем
  • Журнал действий ИИ и ручной режим при ошибке
') + + '
'; +} +function card(title, body) { return '

' + title + '

' + body + '
'; } +function dl(rows) { return '
' + rows.map(function (r) { return '
' + r[0] + '
' + r[1] + '
'; }).join("") + '
'; } +document.addEventListener("DOMContentLoaded", init); +})(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..2b8b223 --- /dev/null +++ b/style.css @@ -0,0 +1,158 @@ +/* Мелки поверх ДС: сетки, таблицы, графики своими столбиками. Цвета — только токены. */ +a.kt-ai-btn { text-decoration: none; } +button.kt-ai-btn { font: inherit; } + +/* ---------- layout ---------- */ +.sb-side { display: flex; flex-direction: column; padding: var(--kt-ai-space-5) var(--kt-ai-space-4); gap: 2px; min-height: 100dvh; } +.sb-top { display: flex; align-items: center; gap: var(--kt-ai-space-4); padding: 0 var(--kt-ai-space-2) var(--kt-ai-space-6); } +.sb-top img { width: 24px; height: 24px; border-radius: var(--kt-ai-radius-md); object-fit: contain; } +.sb-top .nm { min-width: 0; flex: 1; display: flex; flex-direction: column; } +.sb-top .nm b { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-fg); letter-spacing: -.01em; line-height: 1.25; } +.sb-top .nm span { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); } +.sb-nav { display: flex; flex-direction: column; gap: 2px; } +.sb-nav .kt-ai-nav-item .lbl { display: flex; flex-direction: column; gap: 1px; min-width: 0; } +.sb-nav .kt-ai-nav-item .lbl small { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); } +.sb-foot { margin-top: auto; padding: var(--kt-ai-space-5) var(--kt-ai-space-2) 0; } + +.topbar-title { display: flex; align-items: baseline; gap: var(--kt-ai-space-4); min-width: 0; } +.topbar-title .t { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.topbar-title .sub { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); white-space: nowrap; } +@media (max-width: 767.98px) { .topbar-title .sub { display: none; } } + +.view { width: 100%; max-width: 1200px; margin-inline: auto; padding: var(--kt-ai-space-8); } +.page-head { display: flex; align-items: flex-start; gap: var(--kt-ai-space-6); margin-bottom: var(--kt-ai-space-6); } +.page-head .ph-text { flex: 1; min-width: 0; } +.page-head h1 { margin: 0; font-size: var(--kt-ai-text-2xl); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; line-height: 1.15; } +.page-head .sub { margin-top: var(--kt-ai-space-3); font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); max-width: 68ch; } +.page-head .ph-action { flex-shrink: 0; display: flex; gap: var(--kt-ai-space-4); flex-wrap: wrap; } +@media (max-width: 639.98px) { .page-head { flex-direction: column; gap: var(--kt-ai-space-5); } } + +.grid-2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--kt-ai-space-6); align-items: start; } +.grid-2-rev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--kt-ai-space-6); align-items: start; } +@media (max-width: 1023.98px) { .grid-2, .grid-2-rev { grid-template-columns: 1fr; } } + +.kt-ai-card.block { padding: var(--kt-ai-space-6); margin-bottom: var(--kt-ai-space-6); } +.block-head { display: flex; align-items: center; gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-5); } +.block-head h2 { margin: 0; font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; } +.block-head .cap { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); } +.block-head .spacer { flex: 1; } +.block-sub { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); margin: -4px 0 var(--kt-ai-space-5); } + +/* ---------- фильтры ---------- */ +.filter-row { display: flex; align-items: center; gap: var(--kt-ai-space-4); flex-wrap: wrap; margin-bottom: var(--kt-ai-space-5); } +.filter-row .kt-ai-select-wrap { width: 220px; } +.filter-note { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); } + +/* ---------- таблицы ---------- */ +.table-wrap { max-height: 520px; overflow: auto; border-bottom: 1px solid var(--kt-ai-divider); } +.kt-ai-table .col-compact { white-space: nowrap; } +.kt-ai-table tbody tr[data-clickable="true"] { cursor: pointer; } +.cell-num { font-variant-numeric: tabular-nums; } +.delta-neg { color: var(--kt-ai-status-risk-fg); } +.delta-pos { color: var(--kt-ai-status-ok-fg); } +.cell-orig { font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); } + +/* отклонения: свод 2 (оранжевый) и более (красный) */ +.cell-dev-2, .cell-dev-3 { box-shadow: inset 2px 0 0 var(--kt-ai-status-warn-fg); background: var(--kt-ai-status-warn-bg); } +.cell-dev-3 { box-shadow: inset 2px 0 0 var(--kt-ai-status-risk-fg); background: var(--kt-ai-status-risk-bg); } +/* ошибки единиц */ +.cell-unit-w { box-shadow: inset 2px 0 0 var(--kt-ai-status-risk-fg); background: var(--kt-ai-status-risk-bg); } +.cell-unit-fixed { box-shadow: inset 2px 0 0 var(--kt-ai-chart-green); background: var(--kt-ai-status-ok-bg); } + +/* ---------- файлы ---------- */ +.file-list { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow: auto; } +.file-list .kt-ai-row { padding: var(--kt-ai-space-3) var(--kt-ai-space-4); align-items: center; gap: var(--kt-ai-space-4); border-radius: var(--kt-ai-radius-lg); } +.file-list .f-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--kt-ai-radius-lg); background: var(--kt-ai-bg-soft); border: 1px solid var(--kt-ai-border); color: var(--kt-ai-fg-muted); flex: 0 0 auto; } +.file-list .f-name { min-width: 0; flex: 1; font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-medium); } +.file-list .f-meta { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); white-space: nowrap; } +.kt-icon { width: 16px; height: 16px; display: block; } + +/* ---------- прогресс ---------- */ +.progress-head { display: flex; align-items: center; gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-3); } +.progress-head .cap { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); } +.progress-head b { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-semibold); font-variant-numeric: tabular-nums; } + +/* ---------- журнал ---------- */ +.log-list { display: flex; flex-direction: column; gap: var(--kt-ai-space-4); max-height: 430px; overflow: auto; } +.log-item { display: flex; gap: var(--kt-ai-space-4); align-items: flex-start; } +.log-item .log-time { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); font-variant-numeric: tabular-nums; width: 40px; flex: 0 0 auto; padding-top: 2px; } +.log-item .log-tag { flex: 0 0 auto; margin-top: 1px; } +.log-item p { margin: 0; font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); line-height: 1.5; } +.log-item p b { color: var(--kt-ai-fg); font-weight: var(--kt-ai-weight-medium); } + +/* ---------- stepper ---------- */ +.steps { display: flex; align-items: center; gap: var(--kt-ai-space-3); flex-wrap: wrap; } +.step { display: inline-flex; align-items: center; gap: var(--kt-ai-space-3); padding: var(--kt-ai-space-3) var(--kt-ai-space-5); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-full); background: var(--kt-ai-bg-elevated); font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); font-weight: var(--kt-ai-weight-medium); cursor: pointer; transition: border-color var(--kt-ai-dur-fast), color var(--kt-ai-dur-fast); } +.step:hover:not(:disabled) { border-color: var(--kt-ai-border-strong); color: var(--kt-ai-fg); } +.step[data-cur="true"] { border-color: var(--kt-ai-primary); color: var(--kt-ai-fg); background: var(--kt-ai-primary-subtle); } +.step[data-done="true"] { color: var(--kt-ai-fg); } +.step .ic { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--kt-ai-bg-active); color: var(--kt-ai-fg-muted); font-size: 10px; font-weight: var(--kt-ai-weight-bold); font-variant-numeric: tabular-nums; } +.step[data-done="true"] .ic { background: var(--kt-ai-status-ok-fg); color: var(--kt-ai-bg); } +.step[data-cur="true"] .ic { background: var(--kt-ai-primary); color: var(--kt-ai-fg-on-fill); } +.step:disabled { opacity: .55; cursor: default; } +.step-sep { width: 14px; height: 1px; background: var(--kt-ai-border-strong); flex: 0 0 auto; } + +/* ---------- график ---------- */ +.chart-svg { width: 100%; height: 190px; display: block; } +.cc-bars { display: flex; align-items: flex-end; gap: 6px; height: 190px; padding-top: 20px; } +.cc-bars .bar { flex: 1; min-width: 16px; max-width: 44px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--kt-ai-space-3); cursor: default; } +.cc-bars .bar-fill { width: 100%; min-height: 3px; background: var(--kt-ai-chart-blue); border-radius: 2px 2px 0 0; transition: opacity var(--kt-ai-dur-fast); } +.cc-bars .bar span { font-size: 9px; color: var(--kt-ai-fg-faint); font-variant-numeric: tabular-nums; line-height: 1.1; text-align: center; } +.cc-bars .bar:hover .bar-fill { opacity: .75; } +.chart-legend { display: flex; align-items: center; gap: var(--kt-ai-space-5); font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); } +.chart-legend .sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: baseline; } + +/* ---------- черновик анализа ---------- */ +.navi-row { display: flex; align-items: center; gap: var(--kt-ai-space-5); flex-wrap: wrap; margin-bottom: var(--kt-ai-space-5); } +.navi-row .sel { display: flex; align-items: center; gap: var(--kt-ai-space-4); min-width: 0; flex: 1; } +.navi-row .sel b { font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; white-space: nowrap; } +.navi-row .sel span { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); font-variant-numeric: tabular-nums; } +.analysis-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--kt-ai-space-6); align-items: start; } +@media (max-width: 1023.98px) { .analysis-body { grid-template-columns: 1fr; } } +.analysis-list { display: flex; flex-direction: column; gap: 2px; max-height: 470px; overflow: auto; border-right: 1px solid var(--kt-ai-divider); padding-right: var(--kt-ai-space-5); } +@media (max-width: 1023.98px) { .analysis-list { border-right: none; padding-right: 0; border-bottom: 1px solid var(--kt-ai-divider); padding-bottom: var(--kt-ai-space-4); max-height: none; } } +.analysis-list .kt-ai-row { flex-wrap: wrap; line-height: 1.5; } +.analysis-list .kt-ai-row .dot { width: 7px; height: 7px; border-radius: 50%; margin-left: auto; flex: 0 0 auto; } +.analysis-list .dot-ok { background: var(--kt-ai-status-ok-fg); } +.analysis-list .dot-gen { background: var(--kt-ai-border-strong); } +.analysis-list .dot-err { background: var(--kt-ai-status-risk-fg); } +.analysis-list .sub { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); flex-basis: 100%; margin-left: var(--kt-ai-space-11); } + +.ed-wrap { border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-2xl); background: var(--kt-ai-bg-elevated); overflow: hidden; } +.ed-head { display: flex; align-items: center; gap: var(--kt-ai-space-4); padding: var(--kt-ai-space-4) var(--kt-ai-space-5); border-bottom: 1px solid var(--kt-ai-divider); background: var(--kt-ai-bg-soft); } +.ed-head .cap { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); } +textarea.kt-ai-analysis { width: 100%; min-height: 300px; border: none; border-radius: 0; box-shadow: none; padding: var(--kt-ai-space-5); font-size: var(--kt-ai-text-sm); line-height: 1.65; background: var(--kt-ai-bg); } +textarea.kt-ai-analysis:focus { box-shadow: none; } +.ed-stats { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); } + +/* ---------- записка / excel предпросмотр ---------- */ +.memo { padding: var(--kt-ai-space-7); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-2xl); background: var(--kt-ai-bg-elevated); } +.memo h3 { margin: 0 0 var(--kt-ai-space-3); font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; } +.memo p { margin: 0 0 var(--kt-ai-space-4); font-size: var(--kt-ai-text-sm); line-height: 1.65; color: var(--kt-ai-fg-muted); } +.memo p b { color: var(--kt-ai-fg); font-weight: var(--kt-ai-weight-medium); } +.memo .memo-meta { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-faint); margin-bottom: var(--kt-ai-space-5); } + +/* ---------- «О решении» ---------- */ +.pass-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--kt-ai-space-6); } +.pass-card .kv { display: grid; grid-template-columns: 130px 1fr; gap: var(--kt-ai-space-3) var(--kt-ai-space-5); } +.pass-card .kv dt { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); padding-top: 2px; } +.pass-card .kv dd { margin: 0; font-size: var(--kt-ai-text-sm); line-height: 1.55; } +.pass-card ol, .pass-card ul { margin: 0; padding-left: var(--kt-ai-space-6); display: flex; flex-direction: column; gap: var(--kt-ai-space-2); font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); line-height: 1.55; } +.pass-card ol li, .pass-card ul li { min-width: 0; } + +/* ---------- toast ---------- */ +.toast-stack { position: fixed; bottom: var(--kt-ai-space-7); right: var(--kt-ai-space-7); display: flex; flex-direction: column; gap: var(--kt-ai-space-4); z-index: 2000; } +.toast { display: flex; align-items: center; gap: var(--kt-ai-space-4); width: 340px; max-width: calc(100vw - 48px); background: var(--kt-ai-bg-elevated); border: 1px solid var(--kt-ai-border-strong); border-radius: var(--kt-ai-radius-xl); box-shadow: var(--kt-ai-shadow-lg); padding: var(--kt-ai-space-4) var(--kt-ai-space-5); font-size: var(--kt-ai-text-sm); animation: tok-in .18s ease; } +.toast::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--kt-ai-primary); flex: 0 0 auto; } +.toast[data-tone="ok"]::before { background: var(--kt-ai-status-ok-fg); } +.toast[data-tone="warn"]::before { background: var(--kt-ai-status-warn-fg); } +@keyframes tok-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } + +/* ---------- mobile ---------- */ +.sb-scrim { display: none; position: fixed; inset: 0; background: var(--kt-ai-overlay); z-index: 1400; } +@media (max-width: 831.98px) { + .sb-scrim.on { display: block; } + .sb-side { position: fixed; inset: auto 0 0 auto; width: 280px; z-index: 1500; transform: translateX(100%); transition: transform var(--kt-ai-dur-base) var(--kt-ai-ease-standard); background: var(--kt-ai-bg-elevated); box-shadow: var(--kt-ai-shadow-lg); } + .sb-side[data-open="true"] { transform: none; } + .view { padding: var(--kt-ai-space-6) var(--kt-ai-space-5) var(--kt-ai-space-10); } +}