# Сайт тестов — инструкция

> Этот файл лежит в корне сайта: `https://tests.dinasteinpsy.ru/README.md`.
> Если ты Claude и тебя попросили «выложить тест» — прочитай файл целиком и действуй по шагам ниже.
> Список уже выложенных тестов: `https://tests.dinasteinpsy.ru/` (страница) или `https://tests.dinasteinpsy.ru/?format=json` (данные).

## Что это за сайт

Здесь лежат интерактивные тесты Дины. Каждый тест — одна HTML-страница.
Люди попадают сюда из Instagram: пишут кодовое слово под рилсом → бот в директе проверяет подписку → даёт ссылку на тест.

Ссылку собирает бот по шаблону:

```
https://tests.dinasteinpsy.ru/<slug>/
```

`<slug>` — имя папки теста. От правильного имени папки зависит, откроется ли тест у людей. Поэтому правила ниже — обязательные.

## Структура сайта

```
/                     ← корень сайта (public_html)
├── index.php         ← автоматический список тестов, не трогать
├── README.md         ← эта инструкция, не трогать
├── lubov/
│   └── index.html    ← тест «ЛЮБОВЬ»
├── karera/
│   └── index.html    ← тест «КАРЬЕРА»
└── _draft-novyi/     ← черновик: папки с «_» в начале скрыты из списка
    └── index.html
```

Одна папка = один тест. Внутри папки обязательно файл с именем ровно `index.html`.

## Правило имени папки (slug)

Имя папки = кодовое слово теста латиницей.

- только строчные латинские буквы, цифры и дефис: `a–z`, `0–9`, `-`
- без пробелов, без кириллицы, без `ь` и `ъ`, без заглавных
- несколько слов — через дефис

| Кодовое слово | Папка |
|---|---|
| ЛЮБОВЬ | `lubov` |
| КАРЬЕРА | `karera` |
| ДЕНЬГИ | `dengi` |
| НОВАЯ Я | `novaya-ya` |

Если папка с таким именем уже есть (см. список на главной) — добавь номер: `lubov-2`. Чужую папку не перезаписывай.

## Требования к файлу теста

1. **Один самодостаточный файл `index.html`.** Весь CSS и JavaScript — внутри файла.
2. **Картинки** — либо встроены в файл (base64), либо лежат рядом в той же папке и подключены относительным путём: `<img src="cover.jpg">`. Не ссылайся на файлы на своём компьютере.
3. **Никаких функций Claude.** Тест должен работать как обычная веб-страница: без хранилища артефактов Claude, без запросов к Claude, без `window.claude`. Простой HTML + JS — да.
4. **Работает на телефоне.** В `<head>` есть `<meta name="viewport" content="width=device-width, initial-scale=1">`. Почти все откроют тест с телефона из Instagram.
5. **Внешние скрипты** — только если без них никак, и только с надёжных CDN. Лучше без них.
6. **Паспорт теста в `<head>`** — эти строки показываются в списке на главной:

```html
<title>Тест: какая ты в любви</title>
<meta name="codeword" content="ЛЮБОВЬ">
<meta name="reel" content="https://www.instagram.com/reel/XXXX/">
<meta name="author" content="Дина">
```

`codeword` — кодовое слово ровно так, как оно звучит в рилсе. `reel` — ссылка на рилс, если он уже вышел (можно добавить позже).

## Фирменный стиль Дины (для всех тестов)

Каждый новый тест делаем в этой палитре. Образец: `/kofe/` (тёмная страница, огромный узкий красный заголовок, светлые и вишнёвые блоки).
Референс-карточка палитры: `/_brand/palette.png` (папка `_brand` скрыта из списка тестов).

| Цвет | HEX | RGB | CMYK | Где использовать |
|---|---|---|---|---|
| Cotton | `#EDEBDD` | 237 / 235 / 221 | 0, 1, 7, 7 | основной текст на тёмном фоне, светлые блоки-подложки |
| Cherry Red | `#810100` | 129 / 1 / 0 | 0, 99, 100, 49 | блок с призывом в канал, цифры шкалы, кнопки «плюс» |
| Maroon | `#630000` | 99 / 0 / 0 | 0, 100, 100, 61 | декоративные фигуры (звезда на обложке), глубокие тени |
| Noir Black | `#1B1717` | 27 / 23 / 23 | 0, 15, 15, 89 | фон страницы |

Дополнительные оттенки из образца (производные, не из карточки):
- `#D1180F` — яркий красный для крупных заголовков, полосы прогресса и главной кнопки (нужен, чтобы заголовок читался на тёмном фоне: Cherry Red на Noir слишком тёмный)
- `#A3120D` — выбранный вариант ответа
- `#262020` — карточки вариантов поверх фона

Шрифты образца: заголовки — Alumni Sans 800/900 (запасные: Oswald, Arial Narrow), текст — Golos Text.

```css
:root {
  --noir: #1B1717; --noir-2: #262020;
  --cotton: #EDEBDD; --cherry: #810100; --maroon: #630000;
  --red: #D1180F; --pick: #A3120D;
}
```

## Как выложить новый тест

1. Попроси Claude собрать тест как **один готовый файл `index.html`** по требованиям выше (можно просто дать ему этот README).
2. Зайди в панель Beget → **Файловый менеджер** → папка сайта тестов → `public_html`.
3. Создай папку по правилу имени (например `lubov`).
4. Загрузи в неё `index.html` (и картинки, если они отдельными файлами).
5. Открой на телефоне `https://tests.dinasteinpsy.ru/lubov/` — тест должен открыться и пройтись до конца.
6. Открой `https://tests.dinasteinpsy.ru/` — тест должен появиться в списке с правильным кодовым словом.
7. Напиши Эдуарду: **кодовое слово + ссылка на рилс**. Папку он увидит в списке сам.

Черновик, который ещё рано показывать: назови папку с подчёркиванием в начале (`_lubov`), а перед публикацией переименуй без него.

## Как обновить тест

Загрузи новый `index.html` в ту же папку поверх старого. Имя папки не меняй — на него уже ссылается бот.

## Чего не делать

- Не переименовывать и не удалять папки тестов, которые уже в рилсах: у людей перестанет открываться ссылка.
- Не трогать `index.php` и `README.md` в корне.
- Не класть в корень что-то кроме папок тестов.

## Для Эдуарда: подключение в BotHelp

Новый тест = копия триггера «Дина · … · триггер» в Инструментах роста:

- пост/Reels → нужный рилс
- ключевое слово → кодовое слово
- кнопка «Проверить подписку ✅» → действие «Установить поле» `test_link` = имя папки (`lubov`)
- запуск бота «CTA Дина IG · TG» с шага «Условие 1» — не меняется
- кодовое слово добавить в «Дина · Тесты · ответ в комментариях»
- активировать

Кнопка «Забрать 🎁» в боте открывает `https://tests.dinasteinpsy.ru/{%test_link%}/`. Бот для нового теста не меняется.