docs: PRD продукта

AGENTS.md

@@ -0,0 +1,173 @@
+<!-- vibe42-agents-version: v3-guided-2026-06-01 -->
+# Vibe42 — учебная песочница для лендингов
+
+Workspace юзера `Issida_Ashirmatova`. Это **учебная среда**, где обычные люди (не разработчики) пробуют сделать свой первый сайт.
+
+---
+
+## 🎯 ТВОЯ РОЛЬ
+
+Ты — **гид и помощник**, а не слепой исполнитель. Цель сессии — чтобы юзер вышел с:
+1. **рабочим лендингом**, опубликованным по адресу `https://pages.git.vibe42.kz/Issida_Ashirmatova/<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/Issida_Ashirmatova/<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/Issida_Ashirmatova`)** — это папка-контейнер юзера, не репозиторий.
+
+---
+
+## ✅ ВСЕГДА работай через `./new-project`
+
+Если юзер сказал «сделай сайт NAME» / «создай проект NAME»:
+
+```bash
+cd /workspaces/Issida_Ashirmatova
+./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/Issida_Ashirmatova
+- Pages (живые лендинги): https://pages.git.vibe42.kz/Issida_Ashirmatova/<repo>/
+- Креды уже в `/workspaces/Issida_Ashirmatova/.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`. **Начинай с него.** Не выдумывай новые цвета — модифицируй существующие.

PRD.md

@@ -0,0 +1,235 @@
+# PRD — Дашборд клинической кафедры медицинского университета
+
+**Версия документа:** 1.0
+**Дата:** 26.06.2026
+**Владелец продукта:** Issida Ashirmatova
+**Живая страница:** https://pages.git.vibe42.kz/Issida_Ashirmatova/clinical-dashboard/
+**Репозиторий:** https://git.vibe42.kz/Issida_Ashirmatova/clinical-dashboard
+
+---
+
+## 1. Обзор продукта
+
+Веб-дашборд для учёта преподавателей клинической кафедры медицинского университета. Представляет собой редактируемую таблицу, где каждый преподаватель — отдельная строка, а каждый параметр (ФИО, дата рождения, образование, научная степень, категория, сертификат специалиста, членство в ассоциациях, клиническая база) — вводимое поле. Дашборд строит многопараметрические отчёты и выгружает их в CSV.
+
+Продукт реализован как **статический сайт** (HTML + CSS + JS) без сервера, базы данных и авторизации. Данные хранятся в браузере (localStorage).
+
+---
+
+## 2. Цели и задачи
+
+### Цели
+- Дать кафедре единое место для учёта кадрового состава преподавателей.
+- Обеспечить ввод и редактирование данных непосредственно в таблице, без форм и модальных окон.
+- Позволить получать аналитические отчёты по нескольким параметрам одновременно (например, «сколько преподавателей с научной степенью и какой категорией»).
+
+### Задачи (метрики успеха)
+- Ввод строки преподавателя занимает < 1 минуты.
+- Отчёт по любому набору параметров строится мгновенно, без ручного подсчёта.
+- Данные не теряются между перезагрузками страницы.
+
+---
+
+## 3. Целевые пользователи
+
+| Роль | Сценарий |
+|------|----------|
+| **Ответственный по кафедре (администратор)** | Ведёт общую таблицу, собирает анкеты преподавателей, формирует отчёты для руководства. |
+| **Преподаватель** | Вводит собственные данные в свою строку, выгружает анкету файлом и отправляет администратору. |
+
+> ⚠️ Ограничение платформы: настоящая многопользовательская авторизация с общим хранилищем в статической песочнице невозможна. Поэтому совместная работа организована через экспорт/импорт файлов (см. раздел 9).
+
+---
+
+## 4. Контекст и ограничения платформы
+
+Платформа — учебная песочница Vibe42 (только статические сайты). Жёсткие ограничения:
+
+- ✅ Статика: HTML + CSS + JS в браузере.
+- ❌ Нет бэкенда, базы данных, Redis, Docker, nginx.
+- ❌ Нет авторизации / OAuth / JWT.
+- ❌ Нет тяжёлых сборщиков (npm-зависимостей).
+- 📦 Данные хранятся в `localStorage` браузера (персонально для устройства и браузера).
+
+---
+
+## 5. Границы продукта (Scope)
+
+### В объёме (In scope)
+- Редактируемая таблица преподавателей со всеми параметрами.
+- Расширяемый набор параметров (пользовательские поля).
+- Статистические карточки (сводка по кафедре).
+- Поиск и фильтрация.
+- Многопараметрические отчёты с диаграммами и перекрёстной таблицей.
+- Экспорт в CSV, импорт/экспорт JSON (резервные копии, сбор анкет).
+
+### Вне объёма (Out of scope)
+- Многопользовательский вход и общее серверное хранилище.
+- Загрузка файлов/фотографий на сервер.
+- Сложная бизнес-логика (расчёт стажа, автозаполнение из внешних баз).
+- Уведомления и email-рассылки (возможно добавление позже через Formspree).
+
+---
+
+## 6. Пользовательские истории
+
+1. Как администратор, я хочу добавить преподавателя и заполнить все его параметры прямо в таблице, чтобы не открывать отдельные формы.
+2. Как администратор, я хочу редактировать любое поле строки одним кликом, чтобы быстро исправлять данные.
+3. Как администратор, я хочу видеть сводку: сколько всего преподавателей, сколько с научной степенью, сколько с сертификатом.
+4. Как администратор, я хочу построить отчёт одновременно по нескольким параметрам, чтобы анализировать состав кафедры.
+5. Как администратор, я хочу выгрузить отчёт в CSV для предоставления руководству.
+6. Как преподаватель, я хочу ввести свои данные и выгрузить анкету файлом, чтобы передать её администратору.
+7. Как администратор, я хочу импортировать полученные анкеты, чтобы они добавились в общую таблицу без дубликатов.
+8. Как администратор, я хочу добавлять собственные параметры (например, «стаж», «учёное звание»), чтобы учитывать специфику кафедры.
+
+---
+
+## 7. Функциональные требования
+
+### 7.1. Структура интерфейса
+- **Верхняя панель:** название, кнопки «+ Преподаватель», «⚙ Настроить поля», «⤓ Экспорт CSV», «⤒ Импорт».
+- **Вкладки:** «Преподаватели» и «Отчёты».
+- **Вкладка «Преподаватели»:** карточки статистики → панель поиска/фильтров → таблица.
+- **Вкладка «Отчёты»:** выбор параметров → графики распределения → перекрёстная таблица → сводка.
+
+### 7.2. Таблица преподавателей (инлайн-редактирование)
+- Каждая строка = один преподаватель.
+- Каждый параметр = поле ввода прямо в ячейке.
+- Типы полей зависят от параметра (см. раздел 8).
+- **Автосохранение** в `localStorage` при вводе (с debounce ~350 мс).
+- Действия по строке:
+  - `⤓` — выгрузить анкету одного преподавателя в JSON.
+  - `🗑` — удалить строку (с подтверждением).
+- Кнопка «+ Преподаватель» добавляет пустую строку, фокус на поле «ФИО».
+- Все базовые поля свободно вводимы (выпадающие поля — редактируемые комбобоксы: выбор из подсказок **или** ввод своего значения).
+
+### 7.3. Параметры преподавателя (модель данных)
+
+**Базовые поля (нельзя удалить):**
+
+| Ключ | Название | Тип | Обязательное | Варианты |
+|------|----------|-----|--------------|----------|
+| `fullName` | ФИО | text | да | — |
+| `birthDate` | Дата рождения | date | нет | — |
+| `education` | Образование | textarea | нет | — |
+| `academicDegree` | Научная степень | select (комбобокс) | нет | Нет / Кандидат наук / Доктор наук + свободный ввод |
+| `category` | Категория | select (комбобокс) | нет | Нет / Вторая / Первая / Высшая + свободный ввод |
+| `specialistCertificate` | Сертификат специалиста | text | нет | — |
+| `associations` | Членство в ассоциациях | text | нет | — |
+| `clinicalBase` | Клиническая база | text | нет | — |
+
+**Пользовательские поля:** добавляются через «⚙ Настроить поля». Доступные типы: текст, дата, число, выпадающий список (комбобокс), длинный текст, да/нет (чекбокс). Удаляемы (с подтверждением; значения у всех преподавателей теряются).
+
+### 7.4. Статистика (карточки)
+- Всего преподавателей.
+- С научной степенью (кандидат / доктор).
+- Докторов наук.
+- С сертификатом специалиста.
+- Члены ассоциаций.
+Обновляется автоматически при редактировании таблицы.
+
+### 7.5. Поиск и фильтрация
+- Полнотекстовый поиск по всем полям.
+- Фильтры: по научной степени, по категории, по клинической базе.
+- Счётчик «Показано: X из Y».
+
+### 7.6. Отчёты (многопараметрические)
+- Выбор **нескольких** параметров чекбоксами.
+- По каждому выбранному параметру — диаграмма распределения (количество по значениям).
+- По первым двум выбранным — **перекрёстная таблица** (pivot): строки × столбцы, в ячейках количество преподавателей, с итогами по строкам/столбцам и общим.
+- Сводка: всего преподавателей, % с научной степенью, число параметров в отчёте.
+- Экспорт отчёта в CSV (все распределения + перекрёстная таблица).
+- Пустые значения отображаются как «(не указано)».
+
+### 7.7. Экспорт и импорт
+- **Экспорт CSV** — вся таблица преподавателей (заголовок из актуальных названий полей).
+- **Резервная копия JSON** — полное состояние (преподаватели + пользовательские поля), двойной клик по кнопке «Экспорт CSV».
+- **Выгрузка анкеты** (⤓ в строке) — JSON одного преподавателя.
+- **Импорт** — добавление анкет из файла с защитой от дублей по ФИО (регистронезависимо). Поддерживаемые форматы: `{teachers:[...], customFields:[...]}`, массив преподавателей, один объект-преподаватель. Пользовательские поля из файла тоже сливаются.
+
+---
+
+## 8. Модель данных
+
+```
+state = {
+  teachers: [
+    {
+      id: "t_...",
+      fullName: "...",
+      birthDate: "ГГГГ-ММ-ДД",
+      education: "...",
+      academicDegree: "Доктор наук",
+      category: "Высшая",
+      specialistCertificate: "...",
+      associations: "...",
+      clinicalBase: "...",
+      <customFieldKey>: <value>
+    }
+  ],
+  customFields: [
+    { key, label, type, options?, locked:false }
+  ]
+}
+```
+
+Хранение: `localStorage["clinical_dashboard_v1"]` = JSON.stringify(state).
+
+---
+
+## 9. Сценарий совместной работы (сбор анкет)
+
+Поскольку общего сервера нет, используется файловый обмен:
+
+1. Преподаватель открывает ссылку дашборда.
+2. Вводит свои данные в новую строку.
+3. Жмёт `⤓` в конце строки → получает файл `anketa_ФИО.json`.
+4. Отправляет файл администратору (email/мессенджер).
+5. Администратор жмёт «⤒ Импорт» → анкета добавляется в таблицу (дубли по ФИО отбрасываются).
+
+---
+
+## 10. Нефункциональные требования
+
+- **Доступность:** работает в любом современном браузере, адаптивная вёрстка (десктоп/планшет/телефон), таблица скроллится по горизонтали на узких экранах.
+- **Производительность:** таблица до ~200 строк работает без задержек; автосохранение дебаунсится.
+- **Приватность:** данные не покидают браузер пользователя (кроме случаев ручного экспорта).
+- **Отказоустойчивость:** при ошибке чтения localStorage приложение не падает, начинает с пустого состояния.
+- **Интернационализация:** интерфейс на русском языке.
+- **Палитра:** клиническая тема — белый фон, тёмный текст, бирюзовый акцент (`#0891B2`).
+
+---
+
+## 11. Техническая реализация
+
+| Файл | Назначение |
+|------|------------|
+| `index.html` | Структура страницы, вкладки, модальные окна. |
+| `styles.css` | Оформление (клиническая тема, таблицы, карточки, отчёты). |
+| `app.js` | Вся логика: состояние, рендеринг, автосохранение, отчёты, экспорт/импорт. |
+
+Стек: чистый vanilla JS, без фреймворков и сборщиков. Публикация — push в ветку `pages` Gitea, Caddy обслуживает статике мгновенно.
+
+---
+
+## 12. Дорожная карта (Roadmap)
+
+| Приоритет | Возможность |
+|-----------|-------------|
+| Высокий | Форма самостоятельной подачи анкеты преподавателем через Formspree/Getform (без файлов, отправка на email администратора). |
+| Высокий | Общее хранилище через опубликованный Google Sheets CSV для настоящей многопользовательской работы. |
+| Средний | Экспорт отчётов в PDF / печать. |
+| Средний | Загрузка фото преподавателя (avatar, base64 в localStorage). |
+| Средний | Валидация полей (формат даты, обязательность). |
+| Низкий | Журнал изменений (audit log). |
+| Низкий | Роли: просмотр только для преподавателей, редактирование для администратора. |
+
+---
+
+## 13. Глоссарий
+
+- **Комбобокс** — поле, совмещающее выпадающий список подсказок и свободный ввод текста.
+- **Перекрёстная таблица (pivot)** — таблица сопряжённости: строки и столбцы — значения двух параметров, в ячейках количество объектов с данной комбинацией.
+- **localStorage** — хранилище данных в браузере пользователя.
+- **CSV** — текстовый формат таблицы, открывается в Excel/Numbers.
+- **JSON** — формат для резервных копий и обмена анкетами.

app.js

@@ -0,0 +1,578 @@
+/* =========================================================
+   Дашборд кафедры — логика
+   Данные хранятся в localStorage (без сервера/БД)
+   ========================================================= */
+
+const STORE_KEY = 'clinical_dashboard_v1';
+
+// ---- Базовые ( неудаляемые ) поля ----
+const BASE_FIELDS = [
+  { key:'fullName',              label:'ФИО',                       type:'text',    required:true,  locked:true },
+  { key:'birthDate',             label:'Дата рождения',             type:'date',    locked:true },
+  { key:'education',             label:'Образование',               type:'textarea',locked:true },
+  { key:'academicDegree',        label:'Научная степень',           type:'select',  options:['Нет','Кандидат наук','Доктор наук'], locked:true },
+  { key:'category',              label:'Категория',                 type:'select',  options:['Нет','Вторая','Первая','Высшая'], locked:true },
+  { key:'specialistCertificate', label:'Сертификат специалиста',    type:'text',    locked:true },
+  { key:'associations',          label:'Членство в ассоциациях',    type:'text',    locked:true },
+  { key:'clinicalBase',          label:'Клиническая база',          type:'text',    locked:true },
+];
+
+// ---- Состояние ----
+let state = {
+  teachers: [],
+  customFields: [],
+  editingId: null,
+};
+
+let filters = { search:'', degree:'', category:'', base:'' };
+
+/* ---------- Инициализация ---------- */
+function init(){
+  load();
+  if(state.teachers.length===0 && state.customFields.length===0){
+    seedDemo();
+  }
+  bindEvents();
+  buildFilterOptions();
+  renderAll();
+}
+
+function load(){
+  try{
+    const raw = localStorage.getItem(STORE_KEY);
+    if(raw){
+      const data = JSON.parse(raw);
+      state.teachers = data.teachers || [];
+      state.customFields = data.customFields || [];
+    }
+  }catch(e){ console.warn('load failed', e); }
+}
+
+function save(){
+  localStorage.setItem(STORE_KEY, JSON.stringify({
+    teachers: state.teachers,
+    customFields: state.customFields,
+  }));
+}
+
+function allFields(){ return BASE_FIELDS.concat(state.customFields); }
+
+function uid(){ return 't_' + Math.random().toString(36).slice(2,10) + Date.now().toString(36).slice(-4); }
+
+/* ---------- Демо-данные при первом запуске ---------- */
+function seedDemo(){
+  state.teachers = [
+    { id:uid(), fullName:'Ахметова Гульнара Сериковна', birthDate:'1975-03-12',
+      education:'КазНМУ им. С.Асфендиярова, лечебное дело, 1998; интернатура по кардиологии',
+      academicDegree:'Доктор наук', category:'Высшая',
+      specialistCertificate:'№АА1122334, 2022, Кардиология',
+      associations:'Ассоциация кардиологов РК, ESC',
+      clinicalBase:'Городской кардиологический центр' },
+    { id:uid(), fullName:'Оспанов Тимур Бакытович', birthDate:'1982-11-05',
+      education:'КГМУ, педиатрия, 2005; резидентура по неонатологии',
+      academicDegree:'Кандидат наук', category:'Первая',
+      specialistCertificate:'№АА5566778, 2023, Неонатология',
+      associations:'Ассоциация неонатологов РК',
+      clinicalBase:'Перинатальный центр №1' },
+    { id:uid(), fullName:'Жумабаева Айгерим Нурлановна', birthDate:'1989-07-21',
+      education:'КазНМУ, общая медицина, 2012; резидентура по терапии',
+      academicDegree:'Нет', category:'Вторая',
+      specialistCertificate:'№АА9988776, 2024, Терапия',
+      associations:'',
+      clinicalBase:'ГКП Поликлиника №12' },
+  ];
+  save();
+}
+
+/* ---------- События ---------- */
+function bindEvents(){
+  // Табы
+  document.querySelectorAll('.tab').forEach(t=>{
+    t.addEventListener('click', ()=>{
+      document.querySelectorAll('.tab').forEach(x=>x.classList.remove('active'));
+      document.querySelectorAll('.tabpanel').forEach(x=>x.classList.remove('active'));
+      t.classList.add('active');
+      document.getElementById('tab-'+t.dataset.tab).classList.add('active');
+      if(t.dataset.tab==='reports') renderReports();
+    });
+  });
+
+  // Кнопки
+  document.getElementById('btnAdd').addEventListener('click', addRow);
+  document.getElementById('btnFields').addEventListener('click', openFields);
+  document.getElementById('btnExport').addEventListener('click', exportCSV);
+  document.getElementById('btnImport').addEventListener('click', ()=>document.getElementById('importFile').click());
+  document.getElementById('importFile').addEventListener('change', importJSON);
+  document.getElementById('btnAddField').addEventListener('click', addCustomField);
+  document.getElementById('newFieldType').addEventListener('change', e=>{
+    document.getElementById('newFieldOptions').hidden = e.target.value!=='select';
+  });
+  document.getElementById('btnReportCsv').addEventListener('click', exportReportCSV);
+
+  // Фильтры
+  document.getElementById('search').addEventListener('input', e=>{ filters.search=e.target.value.toLowerCase(); renderTable(); });
+  document.getElementById('filterDegree').addEventListener('change', e=>{ filters.degree=e.target.value; renderTable(); });
+  document.getElementById('filterCategory').addEventListener('change', e=>{ filters.category=e.target.value; renderTable(); });
+  document.getElementById('filterBase').addEventListener('change', e=>{ filters.base=e.target.value; renderTable(); });
+
+  // Инлайн-редактирование таблицы (делегирование событий)
+  document.getElementById('tableBody').addEventListener('input', onCellInput);
+  document.getElementById('tableBody').addEventListener('change', onCellInput);
+
+  // Закрытие модалок по клику на фон
+  document.querySelectorAll('.modal-overlay').forEach(ov=>{
+    ov.addEventListener('click', e=>{ if(e.target===ov) ov.hidden=true; });
+  });
+  document.addEventListener('keydown', e=>{ if(e.key==='Escape'){ closeFields(); } });
+}
+
+/* ---------- Выпуски фильтров ---------- */
+function buildFilterOptions(){
+  const degreeSel = document.getElementById('filterDegree');
+  const catSel = document.getElementById('filterCategory');
+  const baseSel = document.getElementById('filterBase');
+  degreeSel.innerHTML = '<option value="">Все степени</option>'+uniqueValues('academicDegree').map(v=>`<option>${esc(v)}</option>`).join('');
+  catSel.innerHTML = '<option value="">Все категории</option>'+uniqueValues('category').map(v=>`<option>${esc(v)}</option>`).join('');
+  baseSel.innerHTML = '<option value="">Все базы</option>'+uniqueValues('clinicalBase').map(v=>`<option>${esc(v)}</option>`).join('');
+}
+function uniqueValues(key){
+  const set = new Set();
+  state.teachers.forEach(t=>{ if(t[key]) set.add(t[key]); });
+  return [...set].sort();
+}
+
+/* ---------- Рендер всего ---------- */
+function renderAll(){ renderStats(); renderDatalists(); renderTable(); buildFilterOptions(); renderReportFieldsList(); }
+
+/* ---------- Карточки статистики ---------- */
+function renderStats(){
+  const total = state.teachers.length;
+  const doctors = state.teachers.filter(t=>t.academicDegree==='Доктор наук').length;
+  const candidates = state.teachers.filter(t=>t.academicDegree==='Кандидат наук').length;
+  const withDegree = doctors+candidates;
+  const withCert = state.teachers.filter(t=>t.specialistCertificate && t.specialistCertificate.trim()).length;
+  const inAssoc = state.teachers.filter(t=>t.associations && t.associations.trim()).length;
+
+  document.getElementById('statsGrid').innerHTML = `
+    ${statCard('Всего преподавателей', total, 'всего на кафедре','accent')}
+    ${statCard('С научной степенью', withDegree, `${candidates} кандидат · ${doctors} доктор`,'green')}
+    ${statCard('Докторов наук', doctors, 'высшая квалификация','amber')}
+    ${statCard('С сертификатом', withCert, 'специалиста','accent')}
+    ${statCard('Члены ассоциаций', inAssoc, 'проф. членство','green')}
+  `;
+}
+function statCard(label,value,sub,cls){
+  return `<div class="stat-card ${cls||''}"><div class="label">${label}</div><div class="value">${value}</div><div class="sub">${sub||''}</div></div>`;
+}
+
+/* ---------- Таблица (инлайн-редактирование) ---------- */
+function renderTable(){
+  const head = document.getElementById('tableHead');
+  const body = document.getElementById('tableBody');
+  const empty = document.getElementById('emptyState');
+  const fields = allFields();
+
+  // Заголовок: все поля + колонка действий
+  head.innerHTML = fields.map(f=>`<th>${esc(f.label)}${f.required?' <span class="req">*</span>':''}</th>`).join('') + '<th class="actions"></th>';
+
+  const rows = filtered();
+  if(rows.length===0){
+    document.getElementById('teacherTable').style.display = state.teachers.length===0 ? 'none':'table';
+    if(state.teachers.length!==0){
+      empty.hidden=false; empty.querySelector('p').textContent='Ничего не найдено по фильтрам.';
+      empty.querySelector('button').style.display='none';
+    } else {
+      empty.hidden=false; empty.querySelector('p').textContent='Пока нет ни одного преподавателя.';
+      empty.querySelector('button').style.display='';
+    }
+    document.getElementById('countPill').textContent='';
+    body.innerHTML='';
+    return;
+  }
+  document.getElementById('teacherTable').style.display='table';
+  empty.hidden=true;
+
+  body.innerHTML = rows.map(t=>`
+    <tr data-id="${t.id}">
+      ${fields.map(f=>`<td>${cellInput(f,t)}</td>`).join('')}
+      <td class="actions">
+        <div class="row-actions">
+          <button class="icon-btn" title="Скачать анкету (JSON)" onclick="exportTeacher('${t.id}')">⤓</button>
+          <button class="icon-btn" title="Удалить" onclick="removeTeacher('${t.id}')">🗑</button>
+        </div>
+      </td>
+    </tr>`).join('');
+
+  document.getElementById('countPill').textContent = `Показано: ${rows.length} из ${state.teachers.length}`;
+}
+
+// Поле ввода прямо в ячейке таблицы
+function cellInput(f, t){
+  const val = t[f.key] ?? '';
+  const name = f.key;
+  if(f.type==='textarea')
+    return `<textarea class="cell-input" name="${name}" rows="2" placeholder="—">${esc(val)}</textarea>`;
+  if(f.type==='date')
+    return `<input class="cell-input" type="date" name="${name}" value="${esc(val)}">`;
+  if(f.type==='number')
+    return `<input class="cell-input" type="number" name="${name}" value="${esc(val)}" placeholder="—">`;
+  if(f.type==='checkbox')
+    return `<input class="cell-input check" type="checkbox" name="${name}" ${val===true||val==='true'?'checked':''}>`;
+  if(f.type==='select')
+    return `<input class="cell-input" list="dl_${name}" name="${name}" value="${esc(val)}" placeholder="выберите или введите">`;
+  return `<input class="cell-input" type="text" name="${name}" value="${esc(val)}" placeholder="—">`;
+}
+
+// Один <datalist> на каждое поле-список (без дублей по строкам)
+function renderDatalists(){
+  const box = document.getElementById('datalists');
+  box.innerHTML = allFields().filter(f=>f.type==='select')
+    .map(f=>`<datalist id="dl_${f.key}">${(f.options||[]).map(o=>`<option value="${esc(o)}">`).join('')}</datalist>`).join('');
+}
+
+// Автосохранение при вводе в любую ячейку
+let _saveTimer=null, _statTimer=null;
+function onCellInput(e){
+  const el = e.target;
+  if(!el.classList || !el.classList.contains('cell-input')) return;
+  const tr = el.closest('tr'); if(!tr) return;
+  const id = tr.dataset.id;
+  const key = el.name;
+  const t = state.teachers.find(x=>x.id===id); if(!t) return;
+  t[key] = (el.type==='checkbox') ? el.checked : el.value;
+  clearTimeout(_saveTimer); _saveTimer=setTimeout(save, 350);
+  clearTimeout(_statTimer); _statTimer=setTimeout(()=>{
+    renderStats();
+    if(document.getElementById('tab-reports').classList.contains('active')) renderReports();
+  }, 500);
+}
+
+// Добавить пустую строку-преподавателя
+function addRow(){
+  const t = { id: uid() };
+  allFields().forEach(f=>{ t[f.key] = (f.type==='checkbox') ? false : ''; });
+  state.teachers.push(t);
+  // сбросить фильтры, чтобы новая строка была видна
+  filters = { search:'', degree:'', category:'', base:'' };
+  document.getElementById('search').value='';
+  ['filterDegree','filterCategory','filterBase'].forEach(id=>document.getElementById(id).value='');
+  save(); buildFilterOptions(); renderTable(); renderStats();
+  const tr = document.querySelector(`tr[data-id="${t.id}"]`);
+  if(tr){ const inp = tr.querySelector('[name="fullName"]'); if(inp) inp.focus(); }
+}
+
+// Скачать анкету одного преподавателя (для отправки администратору)
+window.exportTeacher = function(id){
+  const t = state.teachers.find(x=>x.id===id);
+  if(!t) return;
+  const data = { teachers:[{ ...t }], customFields: state.customFields };
+  download(JSON.stringify(data, null, 2), `anketa_${(t.fullName||'prepodavatel').replace(/\s+/g,'_')}.json`, 'application/json');
+};
+
+
+function filtered(){
+  return state.teachers.filter(t=>{
+    if(filters.degree && t.academicDegree!==filters.degree) return false;
+    if(filters.category && t.category!==filters.category) return false;
+    if(filters.base && t.clinicalBase!==filters.base) return false;
+    if(filters.search){
+      const hay = [t.fullName,t.education,t.clinicalBase,t.associations,t.specialistCertificate,t.academicDegree,t.category]
+        .filter(Boolean).join(' ').toLowerCase();
+      if(!hay.includes(filters.search)) return false;
+    }
+    return true;
+  });
+}
+
+window.removeTeacher = function(id){
+  const t = state.teachers.find(x=>x.id===id);
+  if(!t) return;
+  if(confirm(`Удалить преподавателя «${t.fullName}»?`)){
+    state.teachers = state.teachers.filter(x=>x.id!==id);
+    save(); renderAll();
+  }
+};
+
+/* ---------- Настройка полей ---------- */
+function openFields(){
+  renderFieldList();
+  document.getElementById('fieldsModal').hidden=false;
+}
+function closeFields(){ document.getElementById('fieldsModal').hidden=true; }
+
+function renderFieldList(){
+  const list = document.getElementById('fieldList');
+  list.innerHTML = allFields().map(f=>`
+    <li class="field-item ${f.locked?'locked':''}">
+      <div class="meta">
+        <span class="lbl">${esc(f.label)} ${f.required?'<span class="req">*</span>':''}</span>
+        <span class="typ">${fieldTypeName(f.type)}${f.locked?' · базовое':''}</span>
+      </div>
+      ${f.locked
+        ? '<span class="del icon-btn" title="Нельзя удалить">🔒</span>'
+        : `<button class="icon-btn del" title="Удалить" onclick="removeField('${f.key}')">🗑</button>`}
+    </li>`).join('');
+}
+
+function fieldTypeName(t){
+  return {text:'Текст',date:'Дата',number:'Число',select:'Список',textarea:'Длинный текст',checkbox:'Да/Нет'}[t]||t;
+}
+
+function addCustomField(){
+  const label = document.getElementById('newFieldLabel').value.trim();
+  const type = document.getElementById('newFieldType').value;
+  const optsRaw = document.getElementById('newFieldOptions').value.trim();
+  if(!label){ alert('Введите название поля'); return; }
+  const key = 'c_'+label.toLowerCase().replace(/[^a-zа-я0-9]+/gi,'_').slice(0,24)+'_'+Math.random().toString(36).slice(2,5);
+  const f = { key, label, type, locked:false };
+  if(type==='select'){
+    f.options = optsRaw ? optsRaw.split(',').map(s=>s.trim()).filter(Boolean) : [];
+    if(f.options.length===0){ alert('Укажите варианты через запятую'); return; }
+  }
+  state.customFields.push(f);
+  save();
+  document.getElementById('newFieldLabel').value='';
+  document.getElementById('newFieldOptions').value='';
+  document.getElementById('newFieldOptions').hidden=true;
+  renderFieldList();
+  renderAll();
+}
+
+window.removeField = function(key){
+  const f = state.customFields.find(x=>x.key===key);
+  if(!f) return;
+  if(!confirm(`Удалить поле «${f.label}»? Значения этого поля у всех преподавателей будут потеряны.`)) return;
+  state.customFields = state.customFields.filter(x=>x.key!==key);
+  state.teachers.forEach(t=>{ delete t[key]; });
+  save(); renderFieldList(); renderAll();
+};
+
+/* ---------- Отчёты (многопараметрические) ---------- */
+let reportSelected = new Set(['academicDegree','category']); // выбранные по умолчанию
+
+function renderReportFieldsList(){
+  const box = document.getElementById('reportFieldsList');
+  const fields = allFields().filter(f=>f.type!=='textarea');
+  box.innerHTML = fields.map(f=>`
+    <label class="rf-item">
+      <input type="checkbox" ${reportSelected.has(f.key)?'checked':''} onchange="toggleReportField('${f.key}', this.checked)">
+      ${esc(f.label)}
+    </label>`).join('');
+}
+
+window.toggleReportField = function(key, on){
+  if(on) reportSelected.add(key); else reportSelected.delete(key);
+  renderReports();
+};
+
+function valNorm(t, f){
+  let v = t[f.key];
+  if(f.type==='checkbox') v = v ? 'Да':'Нет';
+  if(v===undefined||v===null||v==='') v='(не указано)';
+  return v;
+}
+
+function renderReports(){
+  const grid = document.getElementById('reportGrid');
+  const cross = document.getElementById('crosstabWrap');
+  const summary = document.getElementById('reportSummary');
+
+  if(state.teachers.length===0){
+    grid.innerHTML=''; cross.innerHTML=''; summary.innerHTML='<p>Нет данных для отчёта.</p>'; return;
+  }
+
+  const fields = allFields();
+  const selected = fields.filter(f=>reportSelected.has(f.key) && f.type!=='textarea');
+
+  // 1. Карточки распределения по каждому выбранному параметру
+  grid.innerHTML = selected.length
+    ? selected.map(distributionCard).join('')
+    : '<p class="hint">Отметьте параметры выше, чтобы построить отчёт.</p>';
+
+  // 2. Перекрёстная таблица по первым двум выбранным параметрам
+  cross.innerHTML = (selected.length>=2) ? crosstabHTML(selected[0], selected[1]) : '';
+
+  // 3. Сводка
+  const total = state.teachers.length;
+  const withDegree = state.teachers.filter(t=>t.academicDegree && t.academicDegree!=='Нет').length;
+  const pct = total?Math.round(withDegree/total*100):0;
+  summary.innerHTML = `
+    <h3>Сводка</h3>
+    <p>Всего преподавателей: <span class="big">${total}</span></p>
+    <p>С научной степенью: <b>${withDegree}</b> (${pct}%)</p>
+    <p>Параметров в отчёте: <b>${selected.length}</b>${selected.length>=2?` · перекрёстная таблица: ${esc(selected[0].label)} × ${esc(selected[1].label)}`:''}</p>
+    <p class="hint" style="margin-top:10px">Отметьте несколько параметров выше — по каждому будет свой график, а по первым двум — перекрёстная таблица. Отчёт скачивается в CSV целиком.</p>`;
+}
+
+function distributionCard(f){
+  const groups = {};
+  state.teachers.forEach(t=>{ const v=valNorm(t,f); groups[v]=(groups[v]||0)+1; });
+  const entries = Object.entries(groups).sort((a,b)=>b[1]-a[1]);
+  const max = Math.max(1, ...entries.map(e=>e[1]));
+  return `<div class="report-card">
+    <h3>${esc(f.label)} — распределение</h3>
+    ${entries.map(([label,count])=>`
+      <div class="report-bar">
+        <span class="bar-label">${esc(label)}</span>
+        <span class="bar-track"><span class="bar-fill" style="width:${Math.round(count/max*100)}%"></span></span>
+        <span class="bar-count">${count}</span>
+      </div>`).join('')}
+  </div>`;
+}
+
+function crosstabHTML(fa, fb){
+  const rows=[], cols=[], m={};
+  state.teachers.forEach(t=>{
+    const a=valNorm(t,fa), b=valNorm(t,fb);
+    if(!rows.includes(a)) rows.push(a);
+    if(!cols.includes(b)) cols.push(b);
+    m[a]=m[a]||{}; m[a][b]=(m[a][b]||0)+1;
+  });
+  const colTotals = cols.map(c=>rows.reduce((s,r)=>s+(m[r][c]||0),0));
+  const grand = colTotals.reduce((s,x)=>s+x,0);
+  return `<div class="crosstab">
+    <h3>Перекрёстная таблица: ${esc(fa.label)} × ${esc(fb.label)}</h3>
+    <div class="table-wrap">
+      <table class="pivot">
+        <thead><tr><th>${esc(fa.label)} \\ ${esc(fb.label)}</th>${cols.map(c=>`<th>${esc(c)}</th>`).join('')}<th>Всего</th></tr></thead>
+        <tbody>
+          ${rows.map(r=>{
+            const rowTotal=cols.reduce((s,c)=>s+(m[r][c]||0),0);
+            return `<tr><td>${esc(r)}</td>${cols.map(c=>`<td>${m[r][c]||0}</td>`).join('')}<td class="tot">${rowTotal}</td></tr>`;
+          }).join('')}
+          <tr class="total-row"><td>Всего</td>${colTotals.map(c=>`<td class="tot">${c}</td>`).join('')}<td class="tot">${grand}</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </div>`;
+}
+
+
+/* ---------- Экспорт / Импорт ---------- */
+function exportCSV(){
+  if(state.teachers.length===0){ alert('Нет данных для экспорта'); return; }
+  const fields = allFields();
+  const header = fields.map(f=>f.label);
+  const rows = state.teachers.map(t=>{
+    return fields.map(f=>{
+      let v = t[f.key] ?? '';
+      if(f.type==='checkbox') v = v?'Да':'Нет';
+      return csvCell(v);
+    });
+  });
+  const csv = '\uFEFF' + [header.map(csvCell).join(';')].concat(rows.map(r=>r.join(';'))).join('\r\n');
+  download(csv, 'prepodavateli.csv', 'text/csv;charset=utf-8');
+}
+
+function exportReportCSV(){
+  const fields = allFields();
+  const selected = fields.filter(f=>reportSelected.has(f.key) && f.type!=='textarea');
+  if(selected.length===0){ alert('Отметьте хотя бы один параметр отчёта'); return; }
+  if(state.teachers.length===0){ alert('Нет данных для отчёта'); return; }
+
+  const lines = [];
+  selected.forEach(f=>{
+    const groups = {};
+    state.teachers.forEach(t=>{ const v=valNorm(t,f); groups[v]=(groups[v]||0)+1; });
+    const entries = Object.entries(groups).sort((a,b)=>b[1]-a[1]);
+    lines.push(`Отчёт по параметру: ${f.label}`);
+    lines.push(`${csvCell('Значение')};${csvCell('Количество')}`);
+    entries.forEach(([v,c])=>lines.push(`${csvCell(v)};${c}`));
+    lines.push(''); // пустая строка-разделитель
+  });
+
+  // Перекрёстная таблица по первым двум параметрам
+  if(selected.length>=2){
+    const fa=selected[0], fb=selected[1];
+    const rows=[], cols=[], m={};
+    state.teachers.forEach(t=>{
+      const a=valNorm(t,fa), b=valNorm(t,fb);
+      if(!rows.includes(a)) rows.push(a);
+      if(!cols.includes(b)) cols.push(b);
+      m[a]=m[a]||{}; m[a][b]=(m[a][b]||0)+1;
+    });
+    lines.push(`Перекрёстная таблица: ${fa.label} × ${fb.label}`);
+    lines.push([csvCell(fa.label+' \\ '+fb.label)].concat(cols.map(csvCell)).concat([csvCell('Всего')]).join(';'));
+    rows.forEach(r=>{
+      const rowTotal=cols.reduce((s,c)=>s+(m[r][c]||0),0);
+      lines.push([csvCell(r)].concat(cols.map(c=>m[r][c]||0)).concat([rowTotal]).join(';'));
+    });
+    const colTotals=cols.map(c=>rows.reduce((s,r)=>s+(m[r][c]||0),0));
+    const grand=colTotals.reduce((s,x)=>s+x,0);
+    lines.push([csvCell('Всего')].concat(colTotals).concat([grand]).join(';'));
+  }
+
+  const csv = '\uFEFF' + lines.join('\r\n');
+  download(csv, 'otchet.csv', 'text/csv;charset=utf-8');
+}
+
+function csvCell(v){
+  const s = String(v==null?'':v);
+  if(/[;"\n]/.test(s)) return '"'+s.replace(/"/g,'""')+'"';
+  return s;
+}
+
+function importJSON(e){
+  const file = e.target.files[0];
+  if(!file) return;
+  const reader = new FileReader();
+  reader.onload = ev=>{
+    try{
+      const parsed = JSON.parse(ev.target.result);
+      // Нормализация: принимаем {teachers:[...]}, [...] или один объект-преподаватель
+      let incoming = [], extraFields = [];
+      if(Array.isArray(parsed)) incoming = parsed;
+      else if(Array.isArray(parsed.teachers)) { incoming = parsed.teachers; extraFields = parsed.customFields || []; }
+      else if(parsed && typeof parsed==='object') incoming = [parsed];
+      else throw new Error('Не распознан формат файла');
+      incoming = incoming.filter(t=>t && typeof t==='object');
+      if(incoming.length===0) throw new Error('В файле нет данных преподавателей');
+
+      // Слияние пользовательских полей
+      extraFields.forEach(f=>{ if(f && f.key && !allFields().some(x=>x.key===f.key)) state.customFields.push(f); });
+
+      // Добавляем преподавателей, пропуская дубли по ФИО
+      const existing = new Set(state.teachers.map(t=>(t.fullName||'').trim().toLowerCase()));
+      let added = 0, skipped = 0;
+      incoming.forEach(t=>{
+        const name = (t.fullName||'').trim().toLowerCase();
+        if(name && existing.has(name)){ skipped++; return; }
+        const obj = { id: uid() };
+        allFields().forEach(f=>{ obj[f.key] = t[f.key] ?? (f.type==='checkbox'? false : ''); });
+        state.teachers.push(obj);
+        existing.add(name);
+        added++;
+      });
+
+      save(); renderAll();
+      alert(`Добавлено: ${added}${skipped?`, пропущено дублей по ФИО: ${skipped}`:''}.`);
+    }catch(err){ alert('Ошибка импорта: '+err.message); }
+  };
+  reader.readAsText(file);
+  e.target.value='';
+}
+
+function download(content, filename, type){
+  const blob = new Blob([content], {type});
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href=url; a.download=filename; a.click();
+  URL.revokeObjectURL(url);
+}
+
+// Кнопка экспорта всей БД в JSON (резервная копия) — добавим в экспорт-меню через длинное нажатие не нужно; сделаем просто
+function exportBackup(){
+  download(JSON.stringify({teachers:state.teachers, customFields:state.customFields}, null, 2), 'backup_dashboard.json', 'application/json');
+}
+
+/* ---------- Утилиты ---------- */
+function esc(s){
+  return String(s==null?'':s).replace(/[&<>"']/g, c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+}
+
+/* ---------- Старт ---------- */
+// Резервная копия (JSON) — по двойному клику на кнопке "Экспорт CSV"
+const _btnExport = document.getElementById('btnExport');
+if(_btnExport){ _btnExport.title='Одинарный клик — CSV, двойной — резервная копия JSON'; _btnExport.addEventListener('dblclick', exportBackup); }
+
+init();

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

index.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Дашборд кафедры — преподаватели</title>
+<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+<header class="topbar">
+  <div class="topbar-inner">
+    <div class="brand">
+      <div class="brand-mark">៛</div>
+      <div>
+        <h1>Клиническая кафедра</h1>
+        <p class="brand-sub">Дашборд преподавателей</p>
+      </div>
+    </div>
+    <div class="topbar-actions">
+      <button class="btn ghost" id="btnFields">⚙ Настроить поля</button>
+      <button class="btn ghost" id="btnExport">⤓ Экспорт CSV</button>
+      <button class="btn ghost" id="btnImport">⤒ Импорт</button>
+      <button class="btn primary" id="btnAdd">+ Преподаватель</button>
+    </div>
+  </div>
+</header>
+
+<nav class="tabs">
+  <div class="container">
+    <button class="tab active" data-tab="teachers">Преподаватели</button>
+    <button class="tab" data-tab="reports">Отчёты</button>
+  </div>
+</nav>
+
+<main class="container">
+
+  <!-- ===== Вкладка: Преподаватели ===== -->
+  <section id="tab-teachers" class="tabpanel active">
+    <div class="stats-grid" id="statsGrid"></div>
+
+    <div class="toolbar">
+      <input type="search" id="search" class="input" placeholder="🔍 Поиск по ФИО, образованию, базе…">
+      <select id="filterDegree" class="input"></select>
+      <select id="filterCategory" class="input"></select>
+      <select id="filterBase" class="input"></select>
+      <span class="count-pill" id="countPill"></span>
+    </div>
+
+    <div class="table-wrap">
+      <table class="data-table" id="teacherTable">
+        <thead><tr id="tableHead"></tr></thead>
+        <tbody id="tableBody"></tbody>
+      </table>
+      <div class="empty-state" id="emptyState" hidden>
+        <p>Пока нет ни одного преподавателя.</p>
+        <button class="btn primary" onclick="addRow()">+ Добавить первого</button>
+      </div>
+    </div>
+    <p class="info-banner">ℹ Данные сохраняются в этом браузере. Чтобы собрать анкеты нескольких преподавателей: каждый вводит свою строку и жмёт <b>⤓</b> в конце строки → отправляет файл вам → вы жмёте <b>⤒ Импорт</b> (данные добавятся к таблице).</p>
+  </section>
+
+  <!-- ===== Вкладка: Отчёты ===== -->
+  <section id="tab-reports" class="tabpanel">
+    <div class="report-controls">
+      <div class="report-fields">
+        <span class="rf-title">Параметры отчёта — отметьте несколько:</span>
+        <div class="rf-list" id="reportFieldsList"></div>
+      </div>
+      <button class="btn outline" id="btnReportCsv">⤓ Скачать отчёт (CSV)</button>
+    </div>
+    <div class="report-grid" id="reportGrid"></div>
+    <div class="crosstab-wrap" id="crosstabWrap"></div>
+    <div class="report-summary" id="reportSummary"></div>
+  </section>
+</main>
+
+<!-- ===== Модалка: настройка полей ===== -->
+<div class="modal-overlay" id="fieldsModal" hidden>
+  <div class="modal">
+    <div class="modal-head">
+      <h2>Параметры преподавателя</h2>
+      <button class="icon-btn" onclick="closeFields()">✕</button>
+    </div>
+    <div class="modal-body">
+      <p class="hint">Базовые поля нельзя удалить. Ниже — дополнительные параметры, которые вы добавляете сами.</p>
+      <ul class="field-list" id="fieldList"></ul>
+
+      <div class="field-adder">
+        <h3>Добавить параметр</h3>
+        <div class="row">
+          <input type="text" id="newFieldLabel" class="input" placeholder="Название (напр. Стаж работы)">
+          <select id="newFieldType" class="input">
+            <option value="text">Текст</option>
+            <option value="date">Дата</option>
+            <option value="number">Число</option>
+            <option value="select">Выпадающий список</option>
+            <option value="textarea">Длинный текст</option>
+            <option value="checkbox">Да/Нет</option>
+          </select>
+        </div>
+        <input type="text" id="newFieldOptions" class="input" placeholder="Варианты через запятую (только для списка)" hidden>
+        <button class="btn primary" id="btnAddField">+ Добавить поле</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<input type="file" id="importFile" accept="application/json" hidden>
+<div id="datalists" hidden></div>
+
+<script src="app.js"></script>
+</body>
+</html>

styles.css

@@ -0,0 +1,203 @@
+:root{
+  --ink:#0F1218;
+  --cyan:#00B8D4;
+  --cyan-strong:#0891B2;
+  --cyan-50:#E8FCFF;
+  --white:#fff;
+  --gray-900:#1A2030;
+  --gray-700:#3C4658;
+  --gray-500:#5B6573;
+  --gray-300:#C9D0DB;
+  --gray-100:#F2F4F7;
+  --gray-50:#F8FAFC;
+  --green:#16A34A;
+  --green-50:#DCFCE7;
+  --amber:#D97706;
+  --amber-50:#FEF3C7;
+  --red:#DC2626;
+  --red-50:#FEE2E2;
+  --border:#E2E8F0;
+  --shadow:0 1px 3px rgba(15,18,24,.08), 0 1px 2px rgba(15,18,24,.04);
+  --shadow-lg:0 12px 32px rgba(15,18,24,.18);
+  --radius:10px;
+}
+*{box-sizing:border-box;margin:0;padding:0}
+html,body{height:100%}
+body{
+  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
+  color:var(--ink);background:var(--gray-50);
+}
+.container{max-width:1280px;margin:0 auto;padding:0 24px}
+
+/* ===== Topbar ===== */
+.topbar{background:var(--ink);color:#fff;box-shadow:var(--shadow)}
+.topbar-inner{max-width:1280px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
+.brand{display:flex;align-items:center;gap:14px}
+.brand-mark{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--cyan),var(--cyan-strong));display:grid;place-items:center;font-size:24px;font-weight:800;color:var(--ink)}
+.topbar h1{font-size:20px;font-weight:800;line-height:1.2}
+.brand-sub{font-size:13px;color:#9aa3b2}
+.topbar-actions{display:flex;gap:8px;flex-wrap:wrap}
+
+/* ===== Buttons ===== */
+.btn{
+  font:inherit;font-weight:600;font-size:14px;cursor:pointer;
+  padding:10px 16px;border-radius:8px;border:1px solid transparent;
+  display:inline-flex;align-items:center;gap:6px;transition:.15s;white-space:nowrap;
+}
+.btn.primary{background:var(--cyan-strong);color:#fff}
+.btn.primary:hover{background:#0E7490}
+.btn.ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.18)}
+.btn.ghost:hover{background:rgba(255,255,255,.16)}
+.btn.outline{background:transparent;color:var(--ink);border:1px solid var(--border)}
+.btn.outline:hover{background:var(--gray-100)}
+.btn.danger{background:var(--red);color:#fff}
+.btn.danger:hover{background:#B91C1C}
+.btn.dark{background:var(--ink);color:#fff}
+.btn.dark:hover{background:#000}
+.icon-btn{background:none;border:none;font-size:18px;cursor:pointer;color:var(--gray-500);padding:4px 8px;border-radius:6px}
+.icon-btn:hover{background:var(--gray-100)}
+
+/* ===== Tabs ===== */
+.tabs{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
+.tab{
+  background:none;border:none;cursor:pointer;font:inherit;font-weight:600;font-size:15px;
+  padding:16px 20px;color:var(--gray-500);border-bottom:2px solid transparent;
+}
+.tab:hover{color:var(--ink)}
+.tab.active{color:var(--cyan-strong);border-bottom-color:var(--cyan-strong)}
+.tabpanel{display:none;padding:28px 0 60px}
+.tabpanel.active{display:block}
+
+/* ===== Inputs ===== */
+.input{
+  font:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--border);
+  border-radius:8px;background:#fff;color:var(--ink);width:100%;
+}
+.input:focus{outline:none;border-color:var(--cyan-strong);box-shadow:0 0 0 3px var(--cyan-50)}
+select.input{cursor:pointer}
+textarea.input{resize:vertical;min-height:80px;line-height:1.5}
+
+/* ===== Stats ===== */
+.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:24px}
+.stat-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
+.stat-card .label{font-size:12px;font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
+.stat-card .value{font-size:30px;font-weight:800;line-height:1}
+.stat-card .sub{font-size:12px;color:var(--gray-500);margin-top:6px}
+.stat-card.accent{border-left:4px solid var(--cyan-strong)}
+.stat-card.green{border-left:4px solid var(--green)}
+.stat-card.amber{border-left:4px solid var(--amber)}
+
+/* ===== Toolbar ===== */
+.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
+.toolbar .input{width:auto;min-width:180px;flex:1}
+.toolbar select.input{flex:0 0 auto;min-width:150px}
+.count-pill{margin-left:auto;font-size:13px;color:var(--gray-500);background:var(--gray-100);padding:6px 12px;border-radius:20px;font-weight:600}
+
+/* ===== Table ===== */
+.table-wrap{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:auto;box-shadow:var(--shadow)}
+.data-table{width:100%;min-width:1120px;border-collapse:collapse;font-size:13px}
+.data-table thead{background:var(--gray-50)}
+.data-table th{
+  text-align:left;padding:12px 14px;font-size:12px;font-weight:700;color:var(--gray-500);
+  text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);white-space:nowrap;
+}
+.data-table td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:top}
+.data-table tbody tr:last-child td{border-bottom:none}
+.data-table tbody tr:hover{background:var(--cyan-50)}
+.data-table .name-cell{font-weight:700;color:var(--ink)}
+.data-table .actions{white-space:nowrap;text-align:right}
+.row-actions{display:inline-flex;gap:4px}
+/* инлайн-ячейки */
+.cell-input{
+  width:100%;border:1px solid transparent;background:transparent;
+  font:inherit;font-size:13px;padding:6px 8px;border-radius:6px;color:var(--ink);
+}
+.cell-input:focus{outline:none;border-color:var(--cyan-strong);background:#fff;box-shadow:0 0 0 2px var(--cyan-50)}
+.cell-input::placeholder{color:var(--gray-300)}
+textarea.cell-input{resize:vertical;min-height:38px;line-height:1.4}
+.cell-input.check{width:auto;cursor:pointer}
+.col-degree,.col-category{min-width:150px}
+.col-name{min-width:200px}
+.col-edu{min-width:240px}
+.info-banner{font-size:12.5px;color:var(--gray-500);background:var(--cyan-50);border:1px solid #b6eef7;border-radius:8px;padding:10px 14px;margin-top:14px;line-height:1.5}
+.info-banner b{color:var(--cyan-strong)}
+.badge{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--gray-100);color:var(--gray-700)}
+.badge.green{background:var(--green-50);color:var(--green)}
+.badge.amber{background:var(--amber-50);color:var(--amber)}
+.badge.cyan{background:var(--cyan-50);color:var(--cyan-strong)}
+.badge.red{background:var(--red-50);color:var(--red)}
+
+.empty-state{text-align:center;padding:60px 20px;color:var(--gray-500)}
+.empty-state .btn{margin-top:16px}
+
+/* ===== Modal ===== */
+.modal-overlay{
+  position:fixed;inset:0;background:rgba(15,18,24,.55);backdrop-filter:blur(2px);
+  z-index:100;display:grid;place-items:center;padding:20px;overflow-y:auto;
+}
+.modal-overlay[hidden]{display:none}
+.modal{background:#fff;border-radius:14px;width:100%;max-width:680px;box-shadow:var(--shadow-lg);max-height:92vh;display:flex;flex-direction:column}
+.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border)}
+.modal-head h2{font-size:18px;font-weight:700}
+.modal-body{padding:20px 24px;overflow-y:auto}
+.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--border);background:var(--gray-50)}
+.modal-foot .danger{margin-right:auto}
+
+.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
+.form-field{display:flex;flex-direction:column;gap:6px}
+.form-field.full{grid-column:1/-1}
+.form-field label{font-size:13px;font-weight:600;color:var(--gray-700)}
+.form-field .req{color:var(--red)}
+.form-field .hint{font-size:12px;color:var(--gray-500)}
+.form-error{color:var(--red);font-size:13px;margin-top:8px}
+
+/* ===== Fields config ===== */
+.hint{font-size:13px;color:var(--gray-500);margin-bottom:14px}
+.field-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
+.field-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--gray-50);border:1px solid var(--border);border-radius:8px}
+.field-item .meta{display:flex;flex-direction:column;gap:2px}
+.field-item .meta .lbl{font-weight:600;font-size:14px}
+.field-item .meta .typ{font-size:12px;color:var(--gray-500)}
+.field-item.locked .del{opacity:.4;cursor:not-allowed}
+.field-adder{border-top:1px dashed var(--border);padding-top:18px}
+.field-adder h3{font-size:15px;margin-bottom:12px}
+.row{display:flex;gap:10px;margin-bottom:10px}
+.field-adder .btn{margin-top:6px}
+
+/* ===== Reports ===== */
+.report-controls{display:flex;flex-direction:column;gap:14px;margin-bottom:22px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow)}
+.report-fields{display:flex;flex-direction:column;gap:8px}
+.rf-title{font-size:14px;font-weight:600;color:var(--gray-700)}
+.rf-list{display:flex;flex-wrap:wrap;gap:8px}
+.rf-item{display:inline-flex;align-items:center;gap:7px;font-size:14px;cursor:pointer;background:var(--gray-50);border:1px solid var(--border);padding:6px 12px;border-radius:8px;user-select:none}
+.rf-item input{cursor:pointer;accent-color:var(--cyan-strong)}
+.rf-item:has(input:checked){background:var(--cyan-50);border-color:var(--cyan-strong)}
+.report-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:24px}
+.report-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
+.report-card h3{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-500);margin-bottom:14px}
+.report-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:14px}
+.report-bar .bar-track{flex:1;height:10px;background:var(--gray-100);border-radius:6px;overflow:hidden}
+.report-bar .bar-fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--cyan-strong));border-radius:6px;min-width:2px}
+.report-bar .bar-label{min-width:120px;color:var(--gray-700)}
+.report-bar .bar-count{font-weight:700;min-width:36px;text-align:right}
+.report-summary{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow)}
+.report-summary h3{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-500);margin-bottom:12px}
+.report-summary p{font-size:15px;line-height:1.7}
+.report-summary .big{font-size:22px;font-weight:800;color:var(--cyan-strong)}
+.crosstab-wrap{margin-bottom:24px}
+.crosstab{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
+.crosstab h3{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-500);margin-bottom:14px}
+.pivot{width:100%;border-collapse:collapse;font-size:13px}
+.pivot th,.pivot td{padding:8px 12px;border:1px solid var(--border);text-align:center;white-space:nowrap}
+.pivot th:first-child,.pivot td:first-child{text-align:left;font-weight:600}
+.pivot thead th{background:var(--gray-50);font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--gray-500)}
+.pivot .tot{font-weight:700;background:var(--gray-50)}
+.pivot tr.total-row td{font-weight:700;background:var(--gray-100)}
+
+@media (max-width:760px){
+  .topbar h1{font-size:17px}
+  .form-grid{grid-template-columns:1fr}
+  .toolbar .input{min-width:140px}
+  .data-table{font-size:13px}
+  .data-table th,.data-table td{padding:10px 8px}
+}