v1: report & poster builder

2026-06-10 10:48:12 +00:00 · 2026-06-10 10:48:12 +00:00 · 4cb7001488
commit 4cb7001488
parent 88c3bf37ba
3 changed files with 984 additions and 0 deletions
--- a/AGENTS.md
+++ b/AGENTS.md
@ -0,0 +1,173 @@
+<!-- vibe42-agents-version: v3-guided-2026-06-01 -->
+# Vibe42 — учебная песочница для лендингов
+
+Workspace юзера `Yershat_Baitayev`. Это **учебная среда**, где обычные люди (не разработчики) пробуют сделать свой первый сайт.
+
+---
+
+## 🎯 ТВОЯ РОЛЬ
+
+Ты — **гид и помощник**, а не слепой исполнитель. Цель сессии — чтобы юзер вышел с:
+1. **рабочим лендингом**, опубликованным по адресу `https://pages.git.vibe42.kz/Yershat_Baitayev/<repo>/`,
+2. ощущением «это было легко» — без серверов, БД, токенов, конфигов.
+
+Юзер не разработчик. Ему важен **результат, который видно в браузере**, а не код.
+
+---
+
+## 🗺 СЦЕНАРИЙ ПЕРВОГО ЗАХОДА (юзер только зашёл, ещё ничего нет)
+
+1. Поздоровайся коротко: «Привет! Тут за 10 минут собираем лендинг и публикуем его в интернете. О чём хочешь сделать?»
+2. Если он не знает — предложи **4 конкретных идеи** (выбирай близкие к нему, не абстрактные):
+   - Промо хобби (фотография / музыка / спорт)
+   - Резюме / personal page с контактами
+   - Афиша мероприятия (концерт, день рождения, мастер-класс)
+   - Меню заведения / прайс услуг
+   - Лендинг продукта или будущего проекта (waitlist)
+3. Уточни **2 короткие детали**: стиль (тёмный/светлый/яркий) и главную цель (рассказать / собрать заявку / показать работы).
+4. Сразу делай `./new-project <name>` и собирай страницу. Не спрашивай разрешения на каждый шаг.
+
+---
+
+## 💬 ЕСЛИ ЮЗЕР ОТВЕЧАЕТ РАСПЛЫВЧАТО
+
+Юзер говорит «сделай что-нибудь» / «ну хз» / «сюрприз» → **не делай ничего абстрактного**.
+
+Скажи: «Давай определимся, я задам 3 коротких вопроса:
+1. Это для тебя лично, для проекта/бизнеса, или для события?
+2. Главная цель — рассказать о чём-то / собрать заявку / показать портфолио?
+3. Любимое настроение — строгое тёмное, лёгкое светлое, яркое цветное?»
+
+После ответов **сразу** предложи 2 конкретных варианта названия+структуры. Дай выбрать и иди делать.
+
+---
+
+## 🚫 ЕСЛИ ЮЗЕР ХОЧЕТ СЛОЖНОЕ — ПЕРЕФОРМУЛИРУЙ В ЛЕНДИНГ
+
+| Запрос | Что делаем вместо |
+|--------|-------------------|
+| «магазин с корзиной» | лендинг с товарами + кнопка «купить» = ссылка на WhatsApp / Telegram |
+| «соцсеть» | лендинг будущего проекта + waitlist-форма (Formspree / Getform) |
+| «блог с админкой» | personal-page + ссылки на статьи в Telegram/Medium |
+| «приложение для записи» | лендинг услуги + ссылка на Calendly / WhatsApp |
+| «сайт с входом юзеров» | публичный лендинг без логина (нам логин не нужен) |
+| «бот в Telegram» | лендинг с описанием бота + кнопка `t.me/...` |
+
+**Не говори «это невозможно».** Скажи: «У нас песочница только для статических сайтов. Давай сделаем лендинг, который покажет твою идею — а кнопки/формы свяжем с готовыми сервисами (WhatsApp, Telegram, Formspree)». Юзер счастлив, результат за 15 минут.
+
+---
+
+## 📐 ШАБЛОНЫ СТРАНИЦ (выбирай под идею юзера)
+
+### A — Промо продукта/услуги
+**Секции:** Hero (заголовок + подзаголовок + CTA-кнопка) → 3-4 преимущества (иконка emoji + текст) → социальное доказательство (отзыв или цифра) → CTA (кнопка/телефон/мессенджер).
+
+### B — Personal / резюме
+**Секции:** Hero (фото-аватарка + имя + одна фраза «кто я») → О себе (1-2 абзаца) → 3-5 карточек проектов/опыта → Контакты (email, telegram, github как ссылки-кнопки).
+
+### C — Афиша мероприятия
+**Секции:** Hero (название + дата + место крупно) → Программа (список с временем) → Локация (картинка-placeholder + адрес) → Регистрация (форма Formspree или контакт).
+
+### D — Меню / прайс
+**Секции:** Hero (название + слоган) → Меню/прайс (категории с ценами) → Контакты (телефон, адрес, часы работы, карта-картинка).
+
+### E — Waitlist для будущего проекта
+**Секции:** Hero (название проекта + одна фраза + email-форма) → 3 фичи «что будет» → FAQ (3 пункта) → CTA (та же email-форма).
+
+Все шаблоны — **одна страница, прокрутка вниз**. Никаких роутов, ничего динамического.
+
+---
+
+## ⚡ РИТУАЛ ПОСЛЕ ПЕРВОГО ЗАПУСКА
+
+Как только готов первый рабочий вариант (даже грубый):
+
+1. **Сразу запушь:**
+   ```bash
+   git add -A
+   git commit -m "v1"
+   git push origin HEAD:pages
+   ```
+2. **ОБЯЗАТЕЛЬНО** дай юзеру ссылку **жирно**:
+   > 🎉 Готово! Твой лендинг здесь: **https://pages.git.vibe42.kz/Yershat_Baitayev/<repo>/**
+3. Скажи: «Открой в новой вкладке, посмотри. Что хочешь поменять?»
+4. Дальше короткие итерации: правка → push → новый URL-показ. Каждые 2-3 правки — push.
+
+---
+
+## ⚠️ ЖЕЛЕЗНЫЕ ПРАВИЛА (НЕ нарушать никогда)
+
+1. **Только статика — HTML + CSS + JS в браузере.**
+2. **Никакого бэкенда.** Никаких Node/Express/FastAPI/Django/PHP/Go-серверов. Никаких БД. Никакого Redis.
+3. **Никакой аутентификации / OAuth / JWT.**
+4. **Никакого Docker, nginx, sudo, системных настроек.**
+5. **Никаких тяжёлых сборщиков** (`npm install` дерево на 500МБ). Tailwind — только через CDN.
+6. **НИКОГДА `git init` в workspace root (`/workspaces/Yershat_Baitayev`)** — это папка-контейнер юзера, не репозиторий.
+
+---
+
+## ✅ ВСЕГДА работай через `./new-project`
+
+Если юзер сказал «сделай сайт NAME» / «создай проект NAME»:
+
+```bash
+cd /workspaces/Yershat_Baitayev
+./new-project NAME    # создаёт repo в Gitea + клонит локально в ./NAME/
+cd NAME
+# теперь создавай index.html / style.css / script.js внутри ./NAME
+```
+
+`./new-project` сам создаёт repo, клонит, и копирует туда `AGENTS.md` + `design.md`.
+
+---
+
+## 🌐 Git и публикация
+
+**НЕТ GitHub.** Self-hosted git: **https://git.vibe42.kz**
+
+- Профиль юзера: https://git.vibe42.kz/Yershat_Baitayev
+- Pages (живые лендинги): https://pages.git.vibe42.kz/Yershat_Baitayev/<repo>/
+- Креды уже в `/workspaces/Yershat_Baitayev/.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 404** → запушь ветку `pages` снова: `git push origin HEAD:pages -f`
+- **Не дёргай Gitea API типа `/repos/.../pages`, `/settings/pages`, `/deploy_keys`** — их нет
+- **Не пытайся «настроить Pages через UI Gitea»** — Pages у нас работают только через push в ветку `pages`
+- Запуталось — сделай новый чистый проект через `./new-project NAME-v2`, перенеси туда работающий index.html
+
+---
+
+## ❌ Чего НЕ делать НИКОГДА
+
+- ❌ `git init` в workspace root
+- ❌ `npm install` с прод-зависимостями (express/mongoose/pg/prisma/next/nuxt)
+- ❌ Создавать `server.js` / `app.py` / `main.go` как backend
+- ❌ Использовать `gh` CLI или GitHub API
+- ❌ Вызывать Gitea Pages-API (его нет)
+- ❌ Долгое отлаживание Pages — почти всегда решение «push HEAD:pages»
+- ❌ Просить юзера ввести токен/URL/пароль — всё уже настроено
+- ❌ Задавать юзеру 10 вопросов подряд (максимум 2-3 за раз)
+- ❌ Показывать юзеру голый код больше 1 раза — ему важен результат, а не как написано
+- ❌ Предлагать «давай сначала дизайн в Figma» — мы делаем сразу в HTML
+- ❌ Говорить «это сложно» — переформулируй в простое
+- ❌ Зависать в обсуждениях — сделай первый вариант грубо, потом итерируй
+
+---
+
+## 🎨 design.md
+
+Рядом лежит `design.md` с готовой палитрой, типографикой и стартер-шаблоном `index.html`. **Начинай с него.** Не выдумывай новые цвета — модифицируй существующие.
--- a/design.md
+++ b/design.md
@ -0,0 +1,110 @@
+<!-- vibe42-design-version: v1-2026-06-01 -->
+# Design system — Vibe42 песочница
+
+Базовые цвета и типографика для лендингов. Можно отклоняться, но начинай с этого.
+
+## Палитра
+
+| Token | Hex | Использование |
+|-------|-----|---------------|
+| `--ink` | `#0F1218` | Тёмный фон / основной текст |
+| `--cyan` | `#00E5FF` | Основной акцент (кнопки, лого) |
+| `--cyan-50` | `#E8FCFF` | Светлая подложка для акцентов |
+| `--white` | `#FFFFFF` | Основной фон |
+| `--gray-500` | `#5B6573` | Вторичный текст |
+| `--gray-100` | `#F2F4F7` | Сепараторы / тонкие фоны |
+
+## Типографика
+
+```css
+font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
+```
+
+| Уровень | Размер | Вес | line-height |
+|---------|--------|-----|-------------|
+| h1 (hero) | 56px | 800 | 1.05 |
+| h2 (section) | 36px | 700 | 1.15 |
+| h3 | 22px | 700 | 1.3 |
+| body | 17px | 400 | 1.6 |
+| small | 14px | 400 | 1.5 |
+
+На мобиле — h1 уменьши до 36px, h2 до 28px.
+
+## Лейаут
+
+- max-width контента: **1140px** (контейнер с padding по бокам)
+- секция: `padding: 80px 24px` (мобила: `48px 20px`)
+- gap между блоками внутри секции: `24-32px`
+- border-radius: `8px` (кнопки, карточки), `16px` (большие карточки)
+
+## Кнопки
+
+```css
+.btn-primary {
+  background: var(--cyan); color: var(--ink);
+  padding: 14px 28px; border-radius: 8px;
+  font-weight: 700; text-decoration: none;
+  display: inline-block;
+}
+.btn-secondary {
+  background: transparent; color: var(--ink);
+  border: 2px solid var(--ink);
+  padding: 12px 26px; border-radius: 8px;
+}
+```
+
+## Стартер `index.html`
+
+```html
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Мой проект</title>
+<style>
+:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7}
+*{box-sizing:border-box;margin:0;padding:0}
+body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
+.container{max-width:1140px;margin:0 auto;padding:80px 24px}
+.hero{background:var(--ink);color:var(--white)}
+.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:24px}
+.hero p{font-size:20px;color:#9aa3b2;max-width:600px;margin-bottom:32px}
+.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none}
+.btn:hover{background:#1be5ff}
+.section h2{font-size:36px;font-weight:700;margin-bottom:24px}
+.card{background:var(--gray-100);border-radius:16px;padding:32px;margin-bottom:16px}
+@media (max-width:640px){.hero h1{font-size:36px}.section h2{font-size:28px}.container{padding:48px 20px}}
+</style>
+</head>
+<body>
+<section class="hero">
+  <div class="container">
+    <h1>Заголовок проекта</h1>
+    <p>Подзаголовок — пара предложений о чём это.</p>
+    <a class="btn" href="#section">Начать</a>
+  </div>
+</section>
+<section id="section" class="section">
+  <div class="container">
+    <h2>Секция</h2>
+    <div class="card">Контент карточки.</div>
+    <div class="card">Контент карточки.</div>
+  </div>
+</section>
+</body>
+</html>
+```
+
+## Чем НЕ пользоваться
+
+- Bootstrap, Material UI, Chakra, Ant Design — слишком тяжело и не нужно для лендинга
+- Font Awesome — используй emoji (🚀 ⚡ ✨) или inline SVG
+- jQuery — vanilla JS более чем достаточно
+
+## Чем МОЖНО (если очень надо)
+
+- **Tailwind через CDN**: `<script src="https://cdn.tailwindcss.com"></script>` — для прототипа OK
+- **Lottie animations через CDN**
+- **Placeholder картинки**: `https://picsum.photos/800/600`, `https://placehold.co/600x400`
+- **Шрифты Google Fonts через `<link>`** в head
--- a/index.html
+++ b/index.html
@ -0,0 +1,701 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Генератор отчётов и постеров</title>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+<style>
+:root {
+  --ink: #0F1218;
+  --cyan: #00A3FF;
+  --cyan-50: #EBF5FF;
+  --white: #FFFFFF;
+  --gray-500: #6B7280;
+  --gray-200: #E5E7EB;
+  --gray-100: #F3F4F6;
+  --gray-50: #F9FAFB;
+  --green: #10B981;
+  --red: #EF4444;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
+  color: var(--ink);
+  background: var(--gray-50);
+}
+
+/* ── Header ── */
+.header {
+  background: var(--white);
+  border-bottom: 1px solid var(--gray-200);
+  padding: 16px 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+.header-inner {
+  max-width: 1140px;
+  margin: 0 auto;
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.logo-area {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.logo-area img {
+  height: 36px;
+  display: none;
+}
+.logo-area img.visible {
+  display: block;
+}
+.app-title {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+/* ── Tabs ── */
+.tabs {
+  display: flex;
+  gap: 4px;
+  background: var(--gray-100);
+  border-radius: 10px;
+  padding: 4px;
+}
+.tab-btn {
+  padding: 8px 20px;
+  border: none;
+  background: transparent;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  color: var(--gray-500);
+  transition: all 0.2s;
+}
+.tab-btn.active {
+  background: var(--white);
+  color: var(--ink);
+  box-shadow: 0 1px 3px rgba(0,0,0,.08);
+}
+
+/* ── Main Layout ── */
+.main {
+  max-width: 1140px;
+  margin: 0 auto;
+  padding: 32px 24px;
+  display: grid;
+  grid-template-columns: 380px 1fr;
+  gap: 32px;
+  align-items: start;
+}
+@media (max-width: 860px) {
+  .main {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ── Sidebar (forms) ── */
+.sidebar {
+  background: var(--white);
+  border-radius: 12px;
+  padding: 24px;
+  border: 1px solid var(--gray-200);
+  position: sticky;
+  top: 100px;
+}
+.sidebar h2 {
+  font-size: 20px;
+  margin-bottom: 20px;
+}
+.form-group {
+  margin-bottom: 16px;
+}
+.form-group label {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--gray-500);
+  margin-bottom: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.form-group input,
+.form-group select,
+.form-group textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--gray-200);
+  border-radius: 8px;
+  font-size: 15px;
+  font-family: inherit;
+  transition: border 0.2s;
+}
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--cyan);
+  box-shadow: 0 0 0 3px var(--cyan-50);
+}
+.form-group textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+.color-grid {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.color-swatch {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: 0.2s;
+}
+.color-swatch.active {
+  border-color: var(--ink);
+  transform: scale(1.15);
+}
+.file-upload {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  border: 2px dashed var(--gray-200);
+  border-radius: 8px;
+  text-align: center;
+  font-size: 14px;
+  color: var(--gray-500);
+  cursor: pointer;
+  transition: 0.2s;
+}
+.file-upload:hover {
+  border-color: var(--cyan);
+  background: var(--cyan-50);
+}
+.file-upload input {
+  display: none;
+}
+
+/* ── Preview ── */
+.preview-area {
+  background: var(--white);
+  border-radius: 12px;
+  padding: 24px;
+  border: 1px solid var(--gray-200);
+}
+.preview-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.preview-label {
+  font-size: 14px;
+  color: var(--gray-500);
+  font-weight: 600;
+}
+.download-btns {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.btn-dl {
+  padding: 8px 14px;
+  border: 1px solid var(--gray-200);
+  border-radius: 8px;
+  background: var(--white);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.btn-dl:hover {
+  background: var(--gray-50);
+  border-color: var(--cyan);
+}
+
+/* ── Report/Poster Canvas ── */
+.canvas-wrap {
+  background: var(--gray-200);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  min-height: 500px;
+}
+
+/* Report Slide */
+.report-slide {
+  width: 100%;
+  max-width: 680px;
+  aspect-ratio: 16/9;
+  background: var(--white);
+  border-radius: 4px;
+  box-shadow: 0 2px 20px rgba(0,0,0,.08);
+  padding: 48px 56px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+.report-slide .rs-company {
+  font-size: 14px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--gray-500);
+  margin-bottom: 8px;
+}
+.report-slide .rs-title {
+  font-size: 32px;
+  font-weight: 800;
+  line-height: 1.15;
+  margin-bottom: 4px;
+}
+.report-slide .rs-period {
+  font-size: 16px;
+  color: var(--gray-500);
+  margin-bottom: 32px;
+}
+.report-slide .rs-metrics {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  flex: 1;
+}
+.report-slide .rs-metric {
+  background: var(--gray-50);
+  border-radius: 12px;
+  padding: 20px;
+  text-align: center;
+}
+.report-slide .rs-metric-value {
+  font-size: 28px;
+  font-weight: 800;
+  line-height: 1;
+  margin-bottom: 6px;
+}
+.report-slide .rs-metric-label {
+  font-size: 13px;
+  color: var(--gray-500);
+  font-weight: 500;
+}
+.report-slide .rs-footer {
+  margin-top: 24px;
+  font-size: 12px;
+  color: var(--gray-500);
+  border-top: 1px solid var(--gray-200);
+  padding-top: 12px;
+}
+.report-slide .rs-logo {
+  position: absolute;
+  top: 40px;
+  right: 56px;
+  max-height: 40px;
+  display: none;
+}
+.report-slide .rs-logo.visible {
+  display: block;
+}
+
+/* Poster */
+.poster-canvas {
+  width: 100%;
+  max-width: 500px;
+  aspect-ratio: 3/4;
+  border-radius: 4px;
+  box-shadow: 0 2px 20px rgba(0,0,0,.08);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 48px 40px;
+  position: relative;
+  overflow: hidden;
+  color: var(--white);
+}
+.poster-canvas .ps-logo {
+  max-height: 64px;
+  margin-bottom: 24px;
+  display: none;
+}
+.poster-canvas .ps-logo.visible {
+  display: block;
+}
+.poster-canvas .ps-title {
+  font-size: 36px;
+  font-weight: 800;
+  line-height: 1.1;
+  margin-bottom: 12px;
+}
+.poster-canvas .ps-subtitle {
+  font-size: 18px;
+  font-weight: 500;
+  opacity: 0.85;
+  margin-bottom: 24px;
+}
+.poster-canvas .ps-info {
+  font-size: 14px;
+  opacity: 0.7;
+  max-width: 300px;
+}
+.poster-canvas .ps-company {
+  position: absolute;
+  bottom: 40px;
+  left: 0;
+  right: 0;
+  font-size: 12px;
+  opacity: 0.6;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+}
+
+@media (max-width: 640px) {
+  .main { padding: 16px; }
+  .sidebar { position: static; }
+  .report-slide { padding: 28px 24px; }
+  .report-slide .rs-title { font-size: 24px; }
+  .report-slide .rs-metrics { grid-template-columns: repeat(2, 1fr); gap: 12px; }
+  .report-slide .rs-metric-value { font-size: 22px; }
+  .poster-canvas .ps-title { font-size: 26px; }
+}
+</style>
+</head>
+<body>
+
+<!-- ═══ HEADER ═══ -->
+<div class="header">
+  <div class="header-inner">
+    <div class="logo-area">
+      <img id="headerLogo" src="" alt="Logo" class="">
+      <span class="app-title">Report & Poster Builder</span>
+    </div>
+    <div class="tabs" id="modeTabs">
+      <button class="tab-btn active" data-mode="report">Отчёт</button>
+      <button class="tab-btn" data-mode="poster">Постер</button>
+    </div>
+  </div>
+</div>
+
+<!-- ═══ MAIN ═══ -->
+<div class="main">
+
+  <!-- ── SIDEBAR: Report Form ── -->
+  <aside class="sidebar" id="reportForm">
+    <h2>Данные отчёта</h2>
+    <div class="form-group">
+      <label>Компания</label>
+      <input type="text" id="rCompany" placeholder="ООО «Твоя Компания»">
+    </div>
+    <div class="form-group">
+      <label>Период</label>
+      <select id="rPeriodType">
+        <option value="Ежемесячный">Ежемесячный</option>
+        <option value="Ежеквартальный">Ежеквартальный</option>
+        <option value="Годовой">Годовой</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label>Период (укажи)</label>
+      <input type="text" id="rPeriod" placeholder="Q2 2026">
+    </div>
+    <div class="form-group">
+      <label>Логотип (опционально)</label>
+      <label class="file-upload">
+        <input type="file" id="rLogo" accept="image/*">
+        Загрузить логотип
+      </label>
+    </div>
+    <div style="border-top:1px solid var(--gray-200); margin:16px 0; padding-top:16px; font-size:13px; font-weight:600; color:var(--gray-500);">Показатели</div>
+    <div class="form-group">
+      <label>Выручка</label>
+      <input type="text" id="m1v" placeholder="12 500 000 ₸">
+    </div>
+    <div class="form-group">
+      <label>План (%)</label>
+      <input type="text" id="m2v" placeholder="104%">
+    </div>
+    <div class="form-group">
+      <label>Прибыль</label>
+      <input type="text" id="m3v" placeholder="2 800 000 ₸">
+    </div>
+    <div class="form-group">
+      <label>Клиенты</label>
+      <input type="text" id="m4v" placeholder="340">
+    </div>
+    <div class="form-group">
+      <label>Средний чек</label>
+      <input type="text" id="m5v" placeholder="36 700 ₸">
+    </div>
+    <div class="form-group">
+      <label>NPS</label>
+      <input type="text" id="m6v" placeholder="78">
+    </div>
+    <div class="form-group">
+      <label>Примечания</label>
+      <textarea id="rNotes" placeholder="Краткий комментарий к отчёту..."></textarea>
+    </div>
+  </aside>
+
+  <!-- ── SIDEBAR: Poster Form (hidden) ── -->
+  <aside class="sidebar" id="posterForm" style="display:none;">
+    <h2>Дизайн постера</h2>
+    <div class="form-group">
+      <label>Заголовок</label>
+      <input type="text" id="pTitle" placeholder="Ключевое сообщение">
+    </div>
+    <div class="form-group">
+      <label>Подзаголовок</label>
+      <input type="text" id="pSubtitle" placeholder="Дополнительная информация">
+    </div>
+    <div class="form-group">
+      <label>Детали</label>
+      <textarea id="pInfo" placeholder="Дата, место, контакты..."></textarea>
+    </div>
+    <div class="form-group">
+      <label>Логотип</label>
+      <label class="file-upload">
+        <input type="file" id="pLogo" accept="image/*">
+        Загрузить логотип
+      </label>
+    </div>
+    <div class="form-group">
+      <label>Компания</label>
+      <input type="text" id="pCompany" placeholder="ООО «Твоя Компания»">
+    </div>
+    <div class="form-group">
+      <label>Цвет</label>
+      <div class="color-grid" id="colorPicker">
+        <span class="color-swatch active" style="background:#0F1218" data-color="#0F1218" data-text="#FFFFFF"></span>
+        <span class="color-swatch" style="background:#1E3A5F" data-color="#1E3A5F" data-text="#FFFFFF"></span>
+        <span class="color-swatch" style="background:#00A3FF" data-color="#00A3FF" data-text="#FFFFFF"></span>
+        <span class="color-swatch" style="background:#10B981" data-color="#10B981" data-text="#FFFFFF"></span>
+        <span class="color-swatch" style="background:#7C3AED" data-color="#7C3AED" data-text="#FFFFFF"></span>
+        <span class="color-swatch" style="background:#DC2626" data-color="#DC2626" data-text="#FFFFFF"></span>
+        <span class="color-swatch" style="background:#F59E0B" data-color="#F59E0B" data-text="#0F1218"></span>
+        <span class="color-swatch" style="background:#FFFFFF;border:2px solid #E5E7EB" data-color="#FFFFFF" data-text="#0F1218"></span>
+      </div>
+    </div>
+  </aside>
+
+  <!-- ── PREVIEW ── -->
+  <div class="preview-area">
+    <div class="preview-toolbar">
+      <span class="preview-label">Предпросмотр</span>
+      <div class="download-btns">
+        <button class="btn-dl" onclick="downloadAs('pdf')">PDF</button>
+        <button class="btn-dl" onclick="downloadAs('png')">PNG</button>
+        <button class="btn-dl" onclick="downloadAs('jpeg')">JPEG</button>
+      </div>
+    </div>
+    <div class="canvas-wrap" id="canvasWrap">
+      <!-- Report Slide -->
+      <div class="report-slide" id="reportSlide">
+        <img class="rs-logo" id="rsLogo" src="" alt="">
+        <div class="rs-company" id="rsCompany">ООО «Твоя Компания»</div>
+        <div class="rs-title" id="rsTitle">Ежемесячный отчёт</div>
+        <div class="rs-period" id="rsPeriod">Q2 2026</div>
+        <div class="rs-metrics">
+          <div class="rs-metric"><div class="rs-metric-value" id="rm1v">—</div><div class="rs-metric-label">Выручка</div></div>
+          <div class="rs-metric"><div class="rs-metric-value" id="rm2v">—</div><div class="rs-metric-label">План</div></div>
+          <div class="rs-metric"><div class="rs-metric-value" id="rm3v">—</div><div class="rs-metric-label">Прибыль</div></div>
+          <div class="rs-metric"><div class="rs-metric-value" id="rm4v">—</div><div class="rs-metric-label">Клиенты</div></div>
+          <div class="rs-metric"><div class="rs-metric-value" id="rm5v">—</div><div class="rs-metric-label">Средний чек</div></div>
+          <div class="rs-metric"><div class="rs-metric-value" id="rm6v">—</div><div class="rs-metric-label">NPS</div></div>
+        </div>
+        <div class="rs-footer" id="rsNotes"></div>
+      </div>
+
+      <!-- Poster Canvas (hidden) -->
+      <div class="poster-canvas" id="posterCanvas" style="display:none;">
+        <img class="ps-logo" id="psLogo" src="" alt="">
+        <div class="ps-title" id="psTitle"></div>
+        <div class="ps-subtitle" id="psSubtitle"></div>
+        <div class="ps-info" id="psInfo"></div>
+        <div class="ps-company" id="psCompany"></div>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+<script>
+// ═══ MODE SWITCHING ═══
+document.getElementById('modeTabs').addEventListener('click', function(e) {
+  if (e.target.classList.contains('tab-btn')) {
+    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+    e.target.classList.add('active');
+    const mode = e.target.dataset.mode;
+    if (mode === 'report') {
+      document.getElementById('reportForm').style.display = '';
+      document.getElementById('posterForm').style.display = 'none';
+      document.getElementById('reportSlide').style.display = '';
+      document.getElementById('posterCanvas').style.display = 'none';
+      document.querySelector('.app-title').textContent = 'Report & Poster Builder';
+    } else {
+      document.getElementById('reportForm').style.display = 'none';
+      document.getElementById('posterForm').style.display = '';
+      document.getElementById('reportSlide').style.display = 'none';
+      document.getElementById('posterCanvas').style.display = '';
+      document.querySelector('.app-title').textContent = 'Report & Poster Builder';
+    }
+    currentMode = mode;
+  }
+});
+
+let currentMode = 'report';
+
+// ═══ COLOR PICKER ═══
+let posterBg = '#0F1218';
+let posterText = '#FFFFFF';
+
+document.getElementById('colorPicker').addEventListener('click', function(e) {
+  const swatch = e.target.closest('.color-swatch');
+  if (!swatch) return;
+  document.querySelectorAll('.color-swatch').forEach(s => s.classList.remove('active'));
+  swatch.classList.add('active');
+  posterBg = swatch.dataset.color;
+  posterText = swatch.dataset.text;
+  updatePoster();
+});
+
+// ═══ LIVE UPDATE: Report ═══
+const reportFields = [
+  { id: 'rCompany', target: 'rsCompany', type: 'text' },
+  { id: 'rPeriod', target: 'rsPeriod', type: 'text' },
+  { id: 'rNotes', target: 'rsNotes', type: 'text' },
+  { id: 'm1v', target: 'rm1v', type: 'text' },
+  { id: 'm2v', target: 'rm2v', type: 'text' },
+  { id: 'm3v', target: 'rm3v', type: 'text' },
+  { id: 'm4v', target: 'rm4v', type: 'text' },
+  { id: 'm5v', target: 'rm5v', type: 'text' },
+  { id: 'm6v', target: 'rm6v', type: 'text' },
+];
+
+document.getElementById('rPeriodType').addEventListener('change', function() {
+  document.getElementById('rsTitle').textContent = this.value + ' отчёт';
+});
+
+reportFields.forEach(f => {
+  const el = document.getElementById(f.id);
+  if (!el) return;
+  el.addEventListener('input', function() {
+    document.getElementById(f.target).textContent = this.value;
+  });
+});
+
+// ═══ LIVE UPDATE: Poster ═══
+['pTitle','pSubtitle','pInfo','pCompany'].forEach(id => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.addEventListener('input', function() {
+    updatePoster();
+  });
+});
+
+function updatePoster() {
+  document.getElementById('psTitle').textContent = document.getElementById('pTitle').value;
+  document.getElementById('psSubtitle').textContent = document.getElementById('pSubtitle').value;
+  document.getElementById('psInfo').textContent = document.getElementById('pInfo').value;
+  document.getElementById('psCompany').textContent = document.getElementById('pCompany').value;
+  const canvas = document.getElementById('posterCanvas');
+  canvas.style.background = posterBg;
+  canvas.style.color = posterText;
+  const info = document.getElementById('psInfo');
+  info.style.color = posterText;
+  info.style.opacity = '0.7';
+  const subtitle = document.getElementById('psSubtitle');
+  subtitle.style.opacity = '0.85';
+}
+
+// ═══ LOGO UPLOAD ═══
+function handleLogoUpload(input, targetImg, headerImg) {
+  const file = input.files[0];
+  if (!file) return;
+  const reader = new FileReader();
+  reader.onload = function(e) {
+    const url = e.target.result;
+    if (targetImg) { targetImg.src = url; targetImg.classList.add('visible'); }
+    if (headerImg) { headerImg.src = url; headerImg.classList.add('visible'); }
+  };
+  reader.readAsDataURL(file);
+}
+
+document.getElementById('rLogo').addEventListener('change', function() {
+  handleLogoUpload(this, document.getElementById('rsLogo'), document.getElementById('headerLogo'));
+});
+
+document.getElementById('pLogo').addEventListener('change', function() {
+  handleLogoUpload(this, document.getElementById('psLogo'), document.getElementById('headerLogo'));
+});
+
+// ═══ DOWNLOAD ═══
+function downloadAs(format) {
+  let target;
+  let filename;
+
+  if (currentMode === 'report') {
+    target = document.getElementById('reportSlide');
+    const period = document.getElementById('rPeriod').value || 'отчёт';
+    filename = 'отчёт_' + period.replace(/\s+/g, '_');
+  } else {
+    target = document.getElementById('posterCanvas');
+    const title = document.getElementById('pTitle').value || 'постер';
+    filename = 'постер_' + title.replace(/\s+/g, '_').substring(0, 30);
+  }
+
+  if (format === 'pdf') {
+    const originalDisplay = target.style.display;
+    target.style.display = '';
+    window.print();
+    if (currentMode !== 'report') target.style.display = originalDisplay;
+    return;
+  }
+
+  html2canvas(target, {
+    scale: 2,
+    useCORS: true,
+    backgroundColor: null
+  }).then(canvas => {
+    let mimeType;
+    if (format === 'jpeg') {
+      mimeType = 'image/jpeg';
+      const ctx = canvas.getContext('2d');
+      ctx.fillStyle = '#FFFFFF';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(canvas, 0, 0);
+    } else {
+      mimeType = 'image/png';
+    }
+    const link = document.createElement('a');
+    link.download = filename + '.' + format;
+    link.href = canvas.toDataURL(mimeType, 0.95);
+    link.click();
+  });
+}
+
+// ═══ INIT ═══
+document.getElementById('rsTitle').textContent = 'Ежемесячный отчёт';
+</script>
+
+</body>
+</html>