Сайт кофейни «Вайб и Кнопка»

ЗАПРОС 1. ОСНОВА
================

Сделай в этой папке новый проект в папке `kofejnya-sajt` — одностраничный сайт, от которого у человека вырывается «вау». Я покажу его в коротком вертикальном видео, поэтому важнее всего первое впечатление, красота картинки и то, как страница оживает при прокрутке.

ТЕМА
Вымышленная «Кофейня „Вайб и Кнопка“». Кофе варит рыжий кот Вайб, меню составила мышка Кнопка. Кнопка — компьютерная мышь, поэтому в меню шутки про компьютеры. Тон — уютное дорогое заведение, а внутри лёгкий юмор. Весь текст на русском.

ГЛАВНАЯ ИДЕЯ
Весь сайт — один объёмный игрушечный домик в разрезе, как кукольный дом без передней стены. Человек листает страницу, а камера плавно спускается с этажа на этаж. Дом всё время живой: что-то дымится, качается, мигает.

ЭТАЖИ (сверху вниз)
1. Крыша. Светится вывеска, висит гирлянда, по небу плывут облака. Вайб сидит на краю крыши и качает хвостом. Крупное название, одна строка под ним и кнопка «Занять столик».
2. Зал. Стойка, кофемашина с паром, полки с чашками, Вайб за стойкой. Рядом всплывает меню — 5 карточек: «Латте „Дедлайн“ — бодрит до утра», «Капучино „Без багов“ — такого не бывает, но вкусно», «Сырник 404 — не найден. Его съела Кнопка», «Раф „Ctrl+Z“ — если день пошёл не так», «Молоко. Просто молоко — выбор шефа». Цены в рублях.
3. Кухня. Кнопка у печи, на противне сырники. Рядом «Правила дома»: «Столик у окна занят. Там спит кот. С 2019 года», «Wi-Fi есть. Пароль знает мышь», «Гладить бариста можно. Отвлекать — нет».
4. Подвал. Вместо винного погреба — серверная: мигают огоньки, на полках рядом с серверами лежат головки сыра. Три счётчика с набегающими цифрами: «чашек сварено сегодня», «сырников съела Кнопка», «часов кот проспал на работе».
5. Финал. Камера отъезжает, дом виден целиком, наступает ночь, в окнах загорается тёплый свет. Кнопка «Занять столик» — по нажатию появляется окно «Все столики заняты котами. Они спят. Мы не решаемся их будить» и сыплется конфетти.

ЧТО МОЖНО ПОТРОГАТЬ
- Переключатель «день / ночь» в углу (солнце и луна) — работает в любой момент, свет в доме меняется плавно.
- Нажал на Вайба — он жмурится и мурчит, над ним сердечко. Нажал на Кнопку — она подпрыгивает и мигает экраном.
- Движение мыши и наклон телефона слегка поворачивают дом, чтобы чувствовалась глубина.
- Кнопка едет вниз вместе с прокруткой на маленьком лифте сбоку дома — так видно, сколько осталось листать.

ГЕРОИ
Кот Вайб — рыжий, с тёмными полосками на спине и голове, светлая мордочка и грудка, большие круглые глаза с бликами, розовый нос, длинные усы и хвост. Мышка Кнопка — компьютерная мышь бирюзового цвета: два круглых ушка, тёмный экранчик вместо лица с бирюзовыми глазами, красная кнопка-колёсико на макушке, хвост-провод. Здесь герои должны быть такими: объёмные, гладкие, как дорогие виниловые игрушки, с мягкими тенями и бликами в глазах. Никаких угловатых краёв, «лесенок» и размытия — на экране телефона всё должно быть чётким. Но узнаваемыми: рыжий кот с полосками и кремовой мордочкой; бирюзовая компьютерная мышь с тёмным экраном вместо лица, красной кнопкой на спине и хвостом-проводом.

ОБРАЗЦЫ, НА КОТОРЫЕ РАВНЯТЬСЯ (если есть доступ в интернет — открой и посмотри; если нет — ориентируйся на описание)
- bruno-simon.com — игрушечный объёмный мир, мягкий свет, всё хочется потрогать.
- Игра Monument Valley — чистые формы, спокойная палитра из 4–5 цветов, вид на домик под углом.
- Картинки «isometric room» — маленькие комнаты в разрезе с тёплыми лампами и множеством мелочей.

КАК СДЕЛАТЬ
- Открывается двойным щелчком по `index.html`, без установки и без сервера.
- Объём — Three.js, движение при прокрутке — GSAP со ScrollTrigger; библиотеки подключи с cdnjs.cloudflare.com или cdn.jsdelivr.net. Шрифты — Google Fonts: Unbounded для заголовков, Golos Text для текста.
- Никаких картинок и готовых моделей из интернета: дом, мебель, героев, пар и огоньки построй программой.
- Тексты, карточки и кнопки — обычной вёрсткой поверх сцены, чтобы буквы были резкими. Карточки — светлое «матовое стекло» со скруглением.
- Палитра: кремовый и тёплое дерево, рыжий и бирюзовый от героев, тёмно-синий для текста. Днём светло и солнечно, ночью — синие сумерки и тёплые окна.
- Мягкие тени, сглаживание, чёткость на экранах с высокой плотностью точек.
- Главное — вертикальный экран телефона: дом узкий и высокий, занимает экран целиком. На ноутбуке дом стоит сбоку, текст рядом.
- На телефоне не должно тормозить: упрощай тени и мелкие детали, если кадров мало. Если у человека включено «уменьшить движение» или объёмная графика недоступна — покажи красивую неподвижную версию, а не пустой экран.
- Без счётчиков посещений, форм, регистрации и ключей.

ПОРЯДОК РАБОТЫ
Сначала сделай героев и один этаж, сними снимок экрана и честно посмотри: похоже ли на дорогую игрушку? Если герои выглядят как набор шариков или кот не узнаётся — доведи, и только потом строй остальные этажи.

ПРОВЕРКА ПЕРЕД «ГОТОВО»
Открой страницу в браузере без окна и сделай снимки: каждый из пяти этажей днём, финал ночью, окно после кнопки — на ширине телефона (390×844) и ноутбука. Посмотри на них сам: если текст налезает на героев, этаж пустой, что-то торчит сквозь стены или герои не похожи на образец — исправь. Проверь нажатия на героев и переключатель дня и ночи. В консоли не должно быть ошибок.

В КОНЦЕ
Напиши `ЧТО-ЭТО.md` в папке проекта простыми словами: что это, как открыть, что проверено и что нет. Когда закончишь, напиши мне, как открыть результат.


ЗАПРОС 2. ДОВОДКА (отправить, когда первый готов)
=================================================

Домик получился красивым, но сейчас это аттракцион, а не сайт кафе: человек не понимает, куда он попал и что тут можно сделать. Доделай проект `kofejnya-sajt` так, чтобы с первого экрана было ясно: это сайт кофейни. Домик и всё, что уже работает, оставь — он остаётся главным украшением.

ЧТО ДОБАВИТЬ

1. Верхняя полоса, как на обычных сайтах. Слева название «Вайб и Кнопка» с маленьким значком, справа ссылки: «Меню», «О нас», «Отзывы», «Как найти» и кнопка «Забронировать». Полоса всегда наверху, полупрозрачная. По нажатию страница плавно едет к нужному разделу. На телефоне ссылки прячутся под значок «три полоски». Переключатель «день / ночь» перенеси в эту полосу.

2. Первый экран. Домик, название и кнопка остаются, но добавь строку, по которой сразу понятно, что это заведение: «Кофейня · Мурлыкин переулок, 4 · каждый день с 8:00 до 22:00».

3. Путешествие по этажам оставь как есть. После ночного финала страница продолжается обычными разделами на спокойном кремовом фоне — в том же стиле: те же шрифты, цвета, скруглённые карточки.

4. Раздел «Меню» — полное, с вкладками:
- Кофе: Латте «Дедлайн» — бодрит до утра, 290 ₽; Капучино «Без багов» — такого не бывает, но вкусно, 270 ₽; Раф «Ctrl+Z» — если день пошёл не так, 340 ₽; Эспрессо «Быстрый запуск» — готов за 20 секунд, 180 ₽; Американо «Обновление» — долго, зато надолго, 220 ₽.
- Не кофе: Молоко. Просто молоко — выбор шефа, 150 ₽; Какао «Спящий режим» — после него кот не отвечает, 260 ₽; Чай «Перезагрузка» — помогает в 9 случаях из 10, 200 ₽.
- Выпечка: Сырник 404 — не найден, его съела Кнопка, 404 ₽; Чизкейк «Кэш» — лучше не чистить, а съесть, 320 ₽; Круассан «Курсор» — слоёный, хрустит, 240 ₽; Печенье «Куки» — принять все, 120 ₽.
У каждой позиции маленький нарисованный значок. Вкладки переключаются плавно.

5. Раздел «О нас». Короткая история в три предложения: кофейню открыли кот, который писал код, и мышка, которая его проверяла. Две карточки с портретами: «Вайб — бариста. Варит кофе, между заказами спит» и «Кнопка — шеф-кондитер. Печёт сырники, до зала доносит не все». Портреты — крупные красивые снимки героев с этой же сцены.

6. Раздел «Отзывы» — три карточки со звёздами:
- «Пришёл поработать. Кот лёг на ноутбук. Работа не сделана, отзыв — пять звёзд». Игорь, программист.
- «Сырник в меню есть, сырника нет. Мышь смотрит честными глазами». Марина.
- «Лучший капучино в городе. Бариста, правда, уснул, пока варил». Тимур.

7. Раздел «Как нас найти». Адрес: Мурлыкин переулок, 4. Часы работы: каждый день с 8:00 до 22:00, «кот спит с 14:00 до 16:00, кофе в это время варит мышь». Телефон: +7 (000) 000-00-00. Рядом нарисованная программой карта района в нашем стиле: улицы, парк, речка и домик-кофейня с флажком. Настоящие карты из интернета не подключай.

8. Раздел «Забронировать столик». Форма: имя, день, время, сколько гостей и кнопка «Забронировать». Данные никуда не отправляются. По нажатию открывается то же шуточное окно «Все столики заняты котами. Они спят. Мы не решаемся их будить». Все кнопки «Занять столик» и «Забронировать» на странице теперь ведут к этой форме.

9. Низ страницы: название, адрес, часы, строка «Кофейня вымышленная. Сайт сделан для примера» и год.

МЕЛОЧИ
- Ночной режим должен менять и новые разделы: тёмно-синий фон, светлый текст, тёплые карточки.
- За столиком у окна в зале посади второго спящего кота — к правилу «Столик у окна занят».
- Новые разделы на телефоне — в одну колонку, на ноутбуке — в две-три. Ничего не должно вылезать за край экрана.
- Скорость не должна упасть: когда домик уехал за экран, сцену не рисуй.

ПРОВЕРКА ПЕРЕД «ГОТОВО»
Открой страницу в браузере без окна и сделай снимки: первый экран с верхней полосой, каждый новый раздел днём, один раздел ночью, открытое меню «три полоски» — на ширине телефона (390×844) и ноутбука. Посмотри сам: похоже ли теперь на сайт настоящей кофейни, не налезает ли текст, ровные ли отступы. Проверь, что каждая ссылка в полосе привозит к своему разделу, вкладки меню переключаются, форма открывает окно. В консоли не должно быть ошибок.

В КОНЦЕ
Обнови `ЧТО-ЭТО.md` и напиши мне, когда готово.