# Как была создана серия «Codex безумные сайты 2»

Это не десять перекрашенных шаблонов. Серия состоит из десяти автономных HTML-лендингов для `nastya.pro.pilki`, у каждого свой art direction, композиционная система, motion-язык и интерактив.

## Что лежит в папке

1. [Monolith Cinema](01_monolith_cinema.html)
2. [Film Liquid](02_film_liquid.html)
3. [Red Kinetic](03_red_kinetic.html)
4. [Clinical Future](04_clinical_future.html)
5. [Tactile Hands](05_tactile_hands.html)
6. [Mono Couture](06_mono_couture.html)
7. [Acid Abrasive](07_acid_abrasive.html)
8. [Plum Noir](08_plum_noir.html)
9. [Pop Film Lab](09_pop_film_lab.html)
10. [Forest Light](10_forest_light.html)

[index.html](index.html) служит общей витриной. Медиа лежат в `assets-v2`, каждый лендинг открывается напрямую и не требует сборки.

## Шаг 1. Сначала факты, потом визуальный стиль

Были разобраны два публичных источника:

- действующий сайт [nastya-pro-pilki.ru](https://nastya-pro-pilki.ru/), чтобы сохранить бренд, тексты, программы, цены, контакты и реальные доказательства;
- сайт основного конкурента [pilkiiplenki.online](https://www.pilkiiplenki.online/), чтобы понять, какие материалы зритель должен сразу узнавать и как продукт показывается в работе.

Зафиксирована только подтверждённая предметная система:

- широкая светлая изогнутая пилка half-moon или banana;
- прямой мягкий баф;
- пластиковая основа под сменный файл;
- листы плёнок для маникюра и педикюра.

В оригинальных визуалах намеренно нет аппарата, фрез, ножниц, кусачек, пушера и флаконов. Бренды, grit, SKU и размеры не подписывались, потому что публичные страницы не подтверждают точную комплектацию курса.

## Шаг 2. Единый слой правды

Все десять вариантов используют одни и те же проверенные факты:

- «Курсы пилочного маникюра»;
- «Без фрез, ножниц и лишней пыли»;
- онлайн и живое обучение для мастеров, новичков и для себя;
- постановка руки, подбор материалов, практика, разбор ошибок и поддержка;
- более 10 лет в индустрии, 100+ учениц, 80+ работ и кейсов;
- живое обучение в Раменском;
- Telegram `@stasigel`, телефон и WhatsApp `+7 999 970-79-20`.

Во всех сайтах присутствуют пять актуальных программ:

| Программа | Цена и условия |
|---|---|
| Живой индивидуальный «Пилки + плёнки» | 25 000 руб., предоплата 5 000 руб. или рассрочка T-Bank |
| Онлайн «Только пилочный» | 20 000 руб., 15 000 руб. по промокоду `222` |
| Онлайн «Пилки + плёнки» | 25 000 руб., 20 000 руб. по промокоду `222` |
| Живой «Сам себе мастер» | 10 000 руб., предоплата 5 000 руб. или рассрочка T-Bank |
| Онлайн «Сам себе мастер» | 7 000 руб., полная оплата или Долями |

Даты живых курсов не зашивались в HTML, чтобы не публиковать устаревшее расписание. CTA работают как демонстрационный preview и не отправляют формы, не запускают оплату и не вызывают production webhook.

## Шаг 3. Десять разных художественных направлений

| Номер | Направление | Главный приём |
|---|---|---|
| 01 | Cold charcoal cinema | Монументальный крупный план и хромированная типографика |
| 02 | Cobalt film optics | Оптическая плёнка, холодная глубина и liquid-переходы |
| 03 | Saturated red editorial | Плакатный масштаб и резкий kinetic timing |
| 04 | Clinical future | Светлая материальная лаборатория и точная инфографика |
| 05 | Tactile documentary | Руки, контакт, нажим и живая обратная связь |
| 06 | Mono couture | Fashion-редактура и монохромная хореография предметов |
| 07 | Acid abrasive | Макро поверхности, кислотный акцент и Canvas-частицы |
| 08 | Plum noir | Кинематографичная постановка плёнки и глубокий сливовый свет |
| 09 | Pop film lab | Кораллово-бирюзовая лаборатория и игровые образцы плёнок |
| 10 | Forest light | Скульптурный натюрморт и генеративное поле света |

Pinterest использовался только как moodboard для поиска ритма beauty-campaign, предметной съёмки и motion-подачи. Ни один макет, фотография или композиция не копировались.

## Шаг 4. Оригинальные изображения через GPT Image

Для каждого концепта создан отдельный 16:9 hero-кадр. Общий каркас промпта:

> Cinematic premium beauty education campaign, exact manicure material geometry, natural anatomy, no text, no logos, no drill, no drill bits, no scissors, no nippers, no pusher, no bottles, clean negative space for web typography, 16:9.

Десять вариаций сцены:

1. Чёрный холодный macro: руки и изогнутая светлая пилка у свободного края.
2. Кобальтовый свет: натуральная рука и тонкая прозрачная плёнка в оптическом пространстве.
3. Красная предметная сцена: изогнутая пилка, прозрачная база и прямой баф.
4. Белая клиническая лаборатория: пилка, база, баф и отдельный лист плёнки.
5. Сланцевый документальный macro: одно спокойное движение по свободному краю.
6. Чёрно-белая couture-композиция: pile из пилок, бафов, баз и плёнок.
7. Чёрный macro с acid-lime: пилка у натурального ногтя, высокий контраст поверхности.
8. Plum noir: постановка плёнки на натуральный ноготь в мягком розовом свете.
9. Coral and aqua top view: цветная лаборатория пилок, бафов и листов плёнок.
10. Forest green still life: пилка, баф, база и иридисцентные ленты плёнки.

Исходники сохранены как `assets-v2/images/hero-01.png` ... `hero-10.png`.

## Шаг 5. Видео и motion

Для Kling подготовлены:

- `work/kling_manifest.json` с десятью отдельными image-to-video задачами;
- `work/kling_i2v.mjs`, который читает ключ только из `C:\Users\User\Downloads\KLING_API_KEY.txt`, не печатает его и сразу скачивает готовые MP4;
- разные motion-промпты: controlled filing, film lowering, product hover, clinical light sweep, macro push, overhead parallax и ribbon motion.

Во время этой сборки Kling вернул `Account balance not enough` до запуска первого ролика. Чтобы не останавливать проект, из десяти GPT Image-кадров были собраны лёгкие шестисекундные MP4-петли 1280 x 720 с отдельной траекторией камеры, цветокоррекцией и бесшовным ping-pong движением. Для этого используется `work/generate_video_loops.ps1` и локальный ffmpeg runtime.

После пополнения Kling новые ролики можно получить из корня проекта одной командой:

```powershell
& 'C:\Users\User\.cache\codex-runtimes\codex-primary-runtime\dependencies\node\bin\node.exe' '.\work\kling_i2v.mjs' --manifest '.\work\kling_manifest.json'
```

Скрипт перезапишет `assets-v2/videos/hero-01.mp4` ... `hero-10.mp4`. HTML менять не потребуется.

## Шаг 6. Сборка без шаблонного конструктора

Каждый сайт сделан как автономный HTML с собственными CSS и JavaScript:

- локальные MP4 с `autoplay muted loop playsinline` и обязательным poster;
- IntersectionObserver для reveal и управления видео;
- Canvas только там, где он усиливает концепцию;
- интерактивный выбор пяти курсов;
- реальные фото работ, screenshot-отзывы и исходные видеоотзывы;
- минимум четыре layout family внутри каждого лендинга;
- responsive-перестройка для desktop и mobile;
- `prefers-reduced-motion` останавливает видео и декоративное движение;
- никаких внешних runtime-зависимостей и scroll listeners.

## Шаг 7. Три ревизии каждого сайта

Каждый концепт прошёл три отдельных прохода:

1. **Композиция.** Первый viewport, иерархия, контраст, типографика, разные layout family, узнаваемость пилок и плёнок.
2. **Motion и обогащение.** Видео, poster fallback, reveal, Canvas или интерактив курса, уместность анимации, отсутствие визуального шума.
3. **Mobile, доступность и факты.** Переполнение, читаемость заголовков, focus-visible, reduced motion, media paths, цены, контакты, anchors и отсутствие неподтверждённых обещаний.

Локальные журналы ревизий:

- `work/01_03_review_v2.md`;
- `work/04_06_review_v2.md`;
- `work/07_09_review_v2.md`;
- `work/10_review_v2.md`.

Во время общей браузерной ревизии дополнительно исправлены мобильные заголовки 01-03, первый viewport 07 и mobile overflow в 05-09.

## Шаг 8. Финальная проверка

Автоматическая проверка подтверждает для всех десяти HTML:

- один `h1`, минимум восемь смысловых секций и все ключевые anchors;
- пять программ, цены, промокод, контакты и факты;
- существующие локальные `src` и `poster`;
- отсутствие inline SVG, внешних scripts/styles, em dash, en dash и scroll listeners;
- корректный синтаксис каждого inline JavaScript;
- воспроизводимые H.264 MP4 1280 x 720;
- нулевое горизонтальное переполнение на 1440 x 900 и 390 x 844.

Проверочные команды из корня проекта:

```powershell
python .\work\validate_collection.py
& 'C:\Users\User\.cache\codex-runtimes\codex-primary-runtime\dependencies\node\bin\node.exe' '.\work\validate_scripts.mjs'
```

## Как повторить метод для другого проекта

1. Снять точный контент и product truth с исходного сайта.
2. Разобрать конкурентов не ради копирования, а ради понимания предметов и пользовательских ожиданий.
3. Зафиксировать одну factual layer, общую для всех вариантов.
4. Придумать десять арт-направлений с разными композицией, цветом, типографикой и motion-логикой.
5. Сгенерировать отдельный предметный кадр под каждый art direction.
6. Сделать отдельный motion prompt, а не один универсальный эффект.
7. Собрать каждый вариант автономно и подключить реальные доказательства.
8. Выполнить три ревизии, затем общий browser QA на desktop и mobile.
9. Только после проверок собирать витрину и публиковать серию.