---

Создай полноценный, красивый, удобный и адаптивный сайт для публикации фотографий тетрадей с решёнными домашними заданиями. Сайт должен работать бесплатно через GitLab Pages и использовать исключительно статическую архитектуру.

1. Основная идея

Это сайт, на котором ученики могут находить фотографии страниц тетрадей с готовыми решениями домашних заданий.

Вместо текстовых ответов используются реальные фотографии рукописных решений. Пользователь заходит на сайт, выбирает класс, предмет и нужное задание, после чего просматривает соответствующие фотографии.

Сайт предназначен для школьников, поэтому он должен быть максимально простым, быстрым и удобным даже на телефонах.

2. Технологии и размещение

Проект должен быть полностью совместим с GitLab Pages.

Требования:

- Используй GitLab как хранилище исходного кода, фотографий и данных сайта.
- Настрой автоматическую сборку и публикацию сайта через GitLab CI/CD.
- Создай корректный файл ".gitlab-ci.yml", учитывающий особенности выбранного стека и GitLab Pages.
- После добавления новых фотографий или изменения данных в репозитории сайт должен автоматически обновляться.
- Используй только бесплатные возможности GitLab, не требующие платной подписки.
- Не используй GitHub, GitHub API или GitHub Pages.
- Не используй Firebase, Supabase, сторонние базы данных, отдельный сервер, платные сервисы или внешнее файловое хранилище.
- Не создавай backend, API для загрузки файлов, систему регистрации, авторизации или административную панель.
- Не требуй от посетителей установки приложений или расширений браузера.

Выбери подходящую архитектуру и технологии самостоятельно. Предпочтение отдавай лёгкому, быстрому и простому в сопровождении решению.

Важно: учитывай, что сайт может размещаться по адресу вида "username.gitlab.io/project-name/". Все пути к ресурсам, изображениям, стилям и скриптам должны корректно работать в GitLab Pages с учётом базового пути проекта. Не полагайся на то, что сайт обязательно размещён в корне домена.

3. Структура хранения фотографий

Организуй файлы в репозитории логично и понятно.

Например:

"public/images/8/math/"
"public/images/8/russian/"
"public/images/8/physics/"
"public/images/9/math/"

Это примеры структуры, а не обязательное ограничение. Можешь предложить более удобную организацию.

Для каждого задания должна быть возможность хранить:

- класс;
- название предмета;
- номер задания или упражнения;
- тему;
- одну или несколько фотографий;
- необязательное описание;
- дату добавления.

Храни информацию в простом структурированном формате, например JSON.

Каталог должен формироваться на основе этих данных, чтобы добавление нового задания не требовало изменения множества файлов вручную.

4. Главная страница

Создай современную главную страницу с:

- названием сайта;
- коротким описанием;
- поисковой строкой;
- выбором класса;
- карточками школьных предметов;
- блоком недавно добавленных заданий;
- удобной навигацией по сайту.

Не перегружай интерфейс лишними элементами.

5. Выбор класса и предмета

Реализуй каталог, в котором пользователь сможет выбрать класс, например с 5-го по 11-й.

После выбора класса показывай доступные предметы.

Предусмотри возможность легко добавлять новые классы и предметы через изменение данных в репозитории, без необходимости переписывать интерфейс.

Если для выбранного класса или предмета пока нет заданий, показывай аккуратное сообщение об отсутствии материалов.

6. Поиск

Реализуй быстрый поиск по:

- номеру упражнения;
- названию или теме задания;
- предмету;
- классу.

Поиск должен работать непосредственно в браузере, без сервера и базы данных.

Добавь фильтрацию результатов и понятное отображение найденных заданий.

Если ничего не найдено, сообщай об этом пользователю.

7. Страница задания

Для каждого задания создай удобную страницу или отдельный просмотр, где отображаются:

- класс;
- предмет;
- номер упражнения;
- тема;
- все фотографии решения;
- дополнительное описание, если оно есть.

Пользователь должен иметь возможность:

- открывать фотографии в увеличенном виде;
- увеличивать и уменьшать изображение;
- переключаться между несколькими фотографиями одного задания;
- переходить к следующему и предыдущему изображению;
- закрывать полноэкранный просмотр;
- возвращаться в каталог.

Фотографии должны быть достаточно крупными и чёткими, чтобы можно было прочитать рукописный текст.

Не обрезай важные части фотографий и не ухудшай их качество чрезмерным сжатием.

8. Дизайн

Сделай качественный современный интерфейс с тёмной темой.

Предпочтительный стиль:

- тёмный фон;
- аккуратные карточки;
- умеренные скругления;
- приятные акцентные цвета;
- хорошая читаемость;
- ненавязчивые анимации;
- плавные переходы;
- единая визуальная система;
- аккуратные иконки;
- продуманное расположение элементов.

Не делай сайт похожим на примитивный школьный проект или стандартный шаблон.

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

9. Адаптация под телефоны

Сайт должен полноценно работать на смартфонах, планшетах и компьютерах.

Обязательно:

- адаптируй размеры текста и карточек;
- обеспечь удобное управление пальцами;
- не допускай горизонтальной прокрутки всей страницы;
- сделай поиск и фильтры удобными на маленьких экранах;
- оптимизируй просмотр фотографий для мобильных устройств;
- учитывай безопасные области экрана;
- обеспечь нормальную работу браузерной навигации.

10. Производительность

Поскольку фотографии хранятся непосредственно в репозитории GitLab, следи за размером проекта.

Реализуй:

- отложенную загрузку фотографий;
- миниатюры для каталога;
- загрузку полноразмерных изображений только при необходимости;
- корректные размеры изображений;
- оптимизацию без потери читаемости текста;
- отсутствие ненужных зависимостей;
- быструю загрузку основных страниц.

Если это целесообразно, используй WebP для миниатюр, сохраняя оригиналы фотографий в хорошем качестве.

Не добавляй тяжёлые библиотеки ради простых функций.

11. Добавление новых заданий

Поскольку административной панели нет, добавление материалов должно выполняться непосредственно через репозиторий GitLab.

Предусмотри понятный процесс:

1. Пользователь загружает фотографии в соответствующую папку репозитория.
2. Добавляет информацию о задании в файл каталога.
3. Сохраняет изменения и отправляет их в GitLab.
4. GitLab CI/CD автоматически собирает и публикует обновлённый сайт.

Подготовь удобный формат записи задания в каталоге.

Например, каждое задание должно содержать идентификатор, класс, предмет, номер упражнения, тему и список путей к фотографиям.

Обеспечь возможность прикрепить к одному заданию несколько изображений.

При необходимости создай примеры заполнения каталога и подробную инструкцию на русском языке.

Не добавляй фиктивные реальные решения домашних заданий. Для демонстрации используй явно обозначенные примеры или пустой каталог.

12. Автоматизация GitLab Pages

Настрой полноценный процесс публикации.

Обязательно:

- создай ".gitlab-ci.yml";
- настрой правильные этапы сборки и публикации;
- учитывай требования GitLab Pages для выбранного стека;
- проверь корректность путей к ресурсам;
- обеспечь обработку ошибок сборки;
- настрой публикацию при изменениях в основной ветке репозитория;
- не используй секретные токены и персональные данные;
- не предполагай наличие платных возможностей GitLab.

Если для проекта не нужен этап компиляции, настрой простую публикацию статических файлов подходящим способом.

Не ограничивайся созданием конфигурационного файла: проверь, что он соответствует фактической структуре проекта.

13. Документация

Создай подробный README на русском языке, в котором объясни:

- назначение сайта;
- структуру проекта;
- где хранятся фотографии;
- как добавить новое задание;
- как прикрепить несколько фотографий;
- как изменить название предмета или добавить класс;
- как отправить изменения в GitLab;
- как работает автоматическая публикация;
- где найти опубликованный сайт;
- как исправлять распространённые ошибки.

Инструкция должна быть понятна человеку, который не является профессиональным разработчиком.

14. Качество реализации

Не создавай только макет или демонстрацию интерфейса.

Нужен полноценный работающий проект со всеми основными функциями.

Проверь:

- работу поиска;
- фильтрацию по классам и предметам;
- отображение каталога;
- открытие и переключение фотографий;
- корректность путей в GitLab Pages;
- адаптивность;
- обработку пустого каталога;
- отсутствие ошибок в консоли;
- успешную сборку;
- корректность конфигурации CI/CD.

Не оставляй неработающие кнопки, фиктивные функции, незавершённые компоненты или ссылки на отсутствующие файлы.

Если у тебя есть доступ к терминалу и репозиторию, создай файлы проекта, запусти сборку и исправь обнаруженные ошибки. Если доступа нет, предоставь полностью готовую структуру проекта и все необходимые файлы.

Не утверждай, что сайт опубликован или CI/CD проверен, если фактически не выполнял эти действия.

Итог

Создай готовый к размещению на GitLab Pages сайт-каталог фотографий решений домашних заданий.

Главный приоритет — удобный поиск нужного задания, качественный просмотр фотографий, привлекательный дизайн, простое добавление новых материалов через GitLab и полностью автоматическая бесплатная публикация.

Проект должен быть простым в обслуживании и не зависеть от GitHub, серверов, баз данных или платных сторонних сервисов.