Сюжетная дыра
Тренажёр задания №2 ЕГЭ по литературе. Цепочка одна:
произведение → персонаж → черта характера → цитата — с говорящим, номером
главы и разбором, почему верна именно эта цитата. Плюс цитаты-ловушки:
правдоподобные, взятые из того же текста, но принадлежащие другому герою.
Первое произведение — «Ионыч» Чехова, целиком и бесплатно.
Как это устроено для ученика
| Раздел | Что там |
|---|
| Досье героев | Колода из шести карточек. Карточка раскрывается в разворот: портрет по центру, факты по краям, цитата выезжает по нажатию |
| Сюжетный чек | Вопросы по героям. Верный ответ обводится от руки, к каждому — разбор |
| Тест-дыра № 2 | Разминка на короткий ответ и сопоставление в бланке, с разбором верного ответа и лишнего варианта |
Прогресс хранится в браузере (localStorage): он свой у каждого устройства
и не переносится. Аккаунтов и синхронизации пока нет — их не бывает без
бэкенда, а сайт сейчас статический.
Правила, которые нельзя нарушать
Цитаты не выдумываются и не сокращаются. Любой текст в кавычках взят из
рассказа Чехова и сверен по подлиннику (Референсы/ионыч-подлинный-текст.txt).
Говорящий и номер главы — оттуда же. Неверная цитата в тренажёре для ЕГЭ хуже,
чем её отсутствие.
Формат задания №2 не закреплён в коде. Он опирается на файлы заказчика, а
не на сверенную демоверсию ФИПИ, поэтому вынесен в данные (taskFormat в
src/data/ionych.js). До сверки на сайте стоит noindex.
Мобильный первичен. Эффект, который хорош на десктопе и ломается на 360 px,
не подходит. Всё движение гасится при prefers-reduced-motion.
Стек
Astro со статической сборкой. Рукописный CSS одним файлом, без фреймворков и
без motion-библиотек: все анимации — CSS либо небольшие модули в
src/scripts/. Единственная тяжёлая зависимость — three.js для перехода
лепестками, и он грузится только с главной и только от 900 px.
src/
components/ заглавие, шапка, кинематографический кадр, обрывок, перекат текста
data/ весь контент: герои, цитаты, вопросы, сопоставление
layouts/ Shell — голова документа, шрифты, переходы между страницами
pages/ главная, досье, разворот героя, чек, тест-дыра, 404
scripts/ колода, чек, тест-дыра, лепестки, портреты, строки досье
styles/ world.css — мир «Архива»; base.css; cinematic.css
assets/heroes/ исходники портретов (вне public: на хостинг не уезжают)
scripts/ сборка предпросмотра, вырезание фона портретов
Запуск
npm install
npm run dev # http://127.0.0.1:4321
npm run build # → dist/, обычная сборка для хостинга
Сборка рассчитана на корень домена: в исходниках абсолютные адреса. Если
сайт положить в подпапку, ссылки и ассеты поедут.
Предпросмотр в подпапке
npm run build:preview
Отдельная сборка для случая, когда сайт лежит не в корне: страницы
раскладываются одним уровнем, адреса переписываются на относительные.
Зачем это нужно и почему страницы плоские — в комментариях
scripts/build-preview.mjs.
Портреты
node scripts/cutout.mjs
Вырезает кремовую подложку из assets/heroes/*.jpg заливкой от края кадра —
не отбором по цвету: внутри коллажа полно светлого, и отбор пробил бы в нём
дыры. Результат — webp с прозрачностью в public/heroes/cut/.
Документы проекта
PRODUCT.md — продуктовая правда: кто пользователь, что обещаем, что нетSTRUCTURE.md — карта экранов и открытые вопросы по контентуРеференсы/design-system.md — палитра, типографика, переход лепестками,
и §8 «Чего не делать»AUDIT.md, TASKS.md — аудит четырёх страниц и разбор его на задачиCLAUDE.md — рабочие правила для Claude Code в этом репозитории
