Сделай в этой папке новый проект — весёлую страницу-тест «Какой ты кот?». Папка проекта: `kakoj-ty-kot`. Герои: Кот Вайб — рыжий, с тёмными полосками на спине и голове, светлая мордочка и грудка, большие круглые глаза с бликами, розовый нос, длинные усы и хвост. Мышка Кнопка — компьютерная мышь бирюзового цвета: два круглых ушка, тёмный экранчик вместо лица с бирюзовыми глазами, красная кнопка-колёсико на макушке, хвост-провод. ## Что это и зачем Это весёлая страница для друзей. Человек открывает страницу на телефоне, смотрит в камеру, мышка Кнопка «сканирует» его лицо — и выдаёт смешную карточку «Ты — такой-то кот». Карточку хочется сохранить и переслать другу. Главное — чтобы было СМЕШНО, красиво и работало с первого раза. ## Как это работает для человека (по шагам) 1. Первый экран. Сразу понятно, что это и что делать: заголовок «Какой ты кот?», под ним одна строка «Посмотри в камеру — Кнопка всё про тебя поймёт», большая кнопка «Узнать». На экране кот Вайб и мышка Кнопка (живые: моргают, кот шевелит хвостом). Мелко внизу: «Камера ничего не записывает и никуда не отправляет — всё считается прямо в твоём телефоне. Это шутка, а не настоящая наука». 2. Камера. Включается фронтальная камера (картинка зеркальная, как в зеркале). Кнопка просит: «Сделай лицо! Улыбнись, удивись, открой рот — как хочешь». 3. Сканирование, 4–5 секунд. По лицу бегут светящиеся бирюзовые точки (настоящие точки лица), сверху вниз едет полоса-сканер. Мышка Кнопка «работает», под ней сменяются смешные строки статуса, например: «Измеряю пушистость…», «Считаю, сколько раз за день ты открываешь холодильник…», «Проверяю, умеешь ли ты падать на четыре лапы…», «Сверяю с базой из 9 жизней…». Придумай штук 15, показывай каждый раз в случайном порядке. 4. Результат — карточка кота: картинка кота этой породы/характера, название крупно («Ты — Кот, который орёт в 5 утра»), 1–2 строки смешного описания, три шкалы с процентами (например «Лень 87%», «Хаос 64%», «Ласка 12%» — для каждого кота свои), реплика мышки Кнопки и реакция кота Вайба. Кнопки: «Сохранить карточку», «Отправить другу», «Ещё раз», «Проверить друга». ## Как выбирается кот - Используй распознавание лица прямо в браузере: MediaPipe Face Landmarker (библиотека @mediapipe/tasks-vision с jsdelivr, версию закрепи точно; модель face_landmarker.task с официального адреса Google). Включи blendshapes — это готовые числа «улыбка», «рот открыт», «брови вверх», «глаза прищурены», «щёки надуты», «губы трубочкой», плюс наклон головы. - Кот зависит от ВЫРАЖЕНИЯ ЛИЦА во время сканирования (среднее за 4–5 секунд), а не от внешности. Пример: широкая улыбка → «Довольный кот, которому почесали пузо»; рот открыт → «Кот, который орёт в 5 утра»; брови вверх → «Кот, увидевший огурец»; прищур → «Кот, который всё про тебя знает»; надутые щёки → «Кот, который съел твою котлету»; голова набок → «Кот, который делает вид, что не понимает»; спокойное лицо → один из спокойных котов («Кот-философ на подоконнике», «Кот-начальник дивана» и т.п.). Так человек может нарочно корчить рожи и получать разных котов — это главное веселье. - Всего сделай 12–14 котов. Плюс один редкий «легендарный» — выпадает примерно 1 раз из 25: «Ты — сам кот Вайб!» с золотой рамкой и подписью «редкость: легенда». - Если два кота подходят одинаково — выбирай случайно, чтобы «Ещё раз» давал разное. ## Внешний вид - Стиль: тёплый кремовый фон #f4ead7, тёмно-синий контур и текст #14203f, рыжий акцент #e8792b, бирюзовый #2fc4b2. Шрифты Unbounded и Golos Text (Google Fonts). - Кот Вайб и мышка Кнопка должны быть УЗНАВАЕМЫ (приметы — в начале запроса), но не плоские и не пиксельные: объёмные, гладкие, со светом и мягкими тенями. - Все 12–14 котов на карточках — разные: окрас (рыжий, чёрный, белый, серый британец, сиамский, трёхцветный, лысый сфинкс, огромный мейн-кун и т.д.), поза и предмет-шутка (огурец, котлета, коробка, ноутбук, подоконник). Рисуй их кодом (SVG/холст) в одном стиле с нашим Вайбом, без картинок из интернета. - Сначала телефон (iPhone и Android, ширина 360–430). На компьютере тоже должно выглядеть аккуратно. Плавно, без рывков. - Юмор добрый, понятный любому русскоязычному человеку, без пошлости. НИКОГДА не шутить про внешность, вес, возраст, нос и т.п. — только про выражение лица и «кошачий характер». ## Карточка для сохранения - «Сохранить карточку» делает картинку 1080×1920 (под сторис): кот, название, шкалы, мелко внизу «Какой ты кот? — [твой ник]». Фото человека на карточку НЕ кладём. - «Отправить другу» — через системное меню «Поделиться» телефона (картинка + короткий текст «Я — <кот>. А ты какой кот?»), если не получается — просто сохранить картинку. ## Если что-то пошло не так - Нет камеры или человек запретил её — не тупик: предложи «Загрузить фото» (обрабатывается так же, внутри телефона) или «Ответить на 3 вопроса» (смешные вопросы → кот). - Если страница открыта во встроенном браузере Instagram/Telegram и камера не включается — понятная плашка: «Открой в Safari или Chrome: нажми ⋯ → Открыть в браузере». - Лица не видно — Кнопка говорит «Я тебя не вижу, подвинься ближе к свету». ## Режимы для проверки - `?kot=<номер>` — сразу показать карточку нужного кота (для съёмки). - `?vse=1` — витрина: все коты сеткой (для обложки и карусели). - `?zapis=1` — без мелких подсказок и плашек, крупнее надписи (для записи экрана). - `?test=<улыбка|рот|брови|прищур|щёки|набок|спокойно>` — подставить выражение без камеры, чтобы проверить выбор кота. ## Ограничения - Только статичные файлы (HTML/CSS/JS), без своего сервера, без ключей, без регистрации, без счётчиков посещений и рекламы. Из интернета грузить только: шрифты Google, библиотеку MediaPipe с jsdelivr и её модель с адреса Google. - Всё на русском. ## Проверка перед «готово» - Проверь выбор кота отдельной маленькой проверкой (node): для каждого выражения выпадает нужный кот, легендарный выпадает редко. - Открой страницу в браузере на размере телефона 390×844 и на компьютере 1440×900: все экраны, режимы `?kot=`, `?vse=1`, `?test=…`, сохранение карточки, без ошибок в консоли. - Камеру в облаке проверить нельзя — честно напиши об этом в ЧТО-ЭТО.md, что проверено, а что нет. ## В конце - В `kakoj-ty-kot/ЧТО-ЭТО.md`: что это, как открыть, список всех котов (номер, название, при каком выражении выпадает), режимы для съёмки, что проверено. - Когда закончишь, напиши мне, как открыть результат. - Работай экономно: одна аккуратная версия, без лишних переделок по кругу.