diff --git a/color-parade/README.md b/color-parade/README.md index 3de3a8e..ea765ea 100644 --- a/color-parade/README.md +++ b/color-parade/README.md @@ -1,102 +1,108 @@ -# Парад цвета — лендинг фестиваля +# Парад цвета -Одностраничный сайт для концепта фестиваля «Парад цвета» — музыка, общение и -цветной порошок в духе Холи. Это веб-часть учебного проекта по айдентике: -знак, флаги, палитра и носители, нарисованные в Figma, собраны в одну страницу. +Одностраничный лендинг концепта фестиваля «Парад цвета» — музыка, общение и +цветной порошок в духе Холи. Учебный проект по айдентике: знак, флаги и графика +из Figma собраны в веб-страницу. -- **Автор:** Эмиль Шанаев, группа БРИЦП262, 1 модуль, 2026 -- **Макет:** [Figma](https://figma.com/design/zFGCJKaBusfMvKccvAeMMx/Shanayev) -- **Код:** [Gitea, ветка `gh-pages`](https://git.shanaty.ru/Emil_Shanaty/Design_HSE_Study/src/branch/gh-pages/color-parade) +## Ссылка на сайт -> Это концепт: фестиваль не проводится, билеты не продаются, события и -> контакты вымышлены. +https://git.shanaty.ru/pub/design_hse_study/color-parade/ -## Как открыть +Страница статическая: сборки нет, всё лежит в `index.html`, `styles.css` и +`assets/`. Чтобы открыть локально, достаточно запустить в папке проекта +`python3 -m http.server 8000` и зайти на `http://localhost:8000`. -Сборки нет: статический HTML и CSS без зависимостей. Достаточно открыть -`index.html` в браузере или поднять локальный сервер, чтобы проверить -относительные пути к шрифтам и картинкам: +## Скриншот -```sh -cd color-parade -python3 -m http.server 8000 -# → http://localhost:8000 -``` +![Главная страница](images/screenshot.png) -## Структура +## Автор -``` -color-parade/ -├── index.html разметка страницы -├── styles.css токены, сетки, компоненты и адаптив -└── assets/ - ├── fonts/ Inter и Inter Display (локально, .ttf) - └── images/ фото-мокапы и флаг с росчерком -``` +Эмиль Шанаев, группа БРИЦП262, 1 модуль, 2026. -## Что на странице +## Что я научился(ась) делать -- **Шапка** — знак из четырёх кругов, навигация и кнопка «Билеты». -- **Обложка** — «ПАРАД ЦВЕТА», подзаголовок и кнопка; справа флаг с - росчерком, повёрнутый на −7°. -- **Бегущая строка** — жёлтая полоса «ЦВЕТ • МУЗЫКА • ЛЮДИ». -- **Что вас ждёт** — три цветные плитки: зал красок, музыка, кадры на память. -- **О фестивале** — тёмный блок с двумя наложенными фотографиями. -- **События** — три карточки: зал красок, живая сцена, творческие зоны. -- **Мерч** — фото коллекции и список из трёх позиций. -- **Подвал** — о проекте, автор и ссылки на Figma и Gitea. - -## Технологии - -- HTML5 и CSS3. **JavaScript не используется.** -- Inter и Inter Display лежат в `assets/fonts` — внешних запросов за шрифтами - нет. -- Цвета бренда вынесены в CSS-переменные в `:root`. -- Адаптив на брейкпоинтах 1050, 800 и 520 px. -- Доступность: skip-link, семантика `header` / `main` / `footer`, - `aria-labelledby` у секций, заметный `focus-visible`, alt у изображений и - поддержка `prefers-reduced-motion`. - -## Палитра - -| Токен | Цвет | Где используется | -|---|---|---| -| `--ink` | `#181818` | текст и тёмные блоки | -| `--paper` | `#FFFDF5` | фон страницы | -| `--cy` | `#00AEEF` | циан, плитка «Зал красок» | -| `--mg` | `#EC008C` | маджента, плитка «Музыка» | -| `--yl` | `#FFF200` | жёлтый, бегущая строка | -| `--muted` | `#68645F` | вторичный текст | -| `--hair` | `#DEDBD3` | линии и разделители | +- Раскладывать страницу по макету из Figma сеткой, а не абсолютным + позиционированием: плитки, карточки событий и блок мерча — это `grid`. +- Делать заголовки резиновыми через `clamp()` — они не ломают вёрстку на + телефоне и не выглядят мелкими на широком экране. +- Обрезать фотографии через `object-fit` и `object-position`: кадр + подстраивается под блок, но лицо и главное в кадре не обрезается. +- Долго не получалось с фото-стопкой в блоке «О фестивале»: два повёрнутых + снимка налезали друг на друга и вылезали за сетку. Помогло `position: + absolute` внутри блока с `min-height` и отдельные `transform: rotate()` для + каждого фото. +- Проверять страницу на 375, 768 и 1440 px и не забывать про + `prefers-reduced-motion` и заметный фокус у ссылок. ## Использование ИИ -Проект сделан не полностью вручную: ИИ использовался как подсобный -инструмент, а не как автор. +### Инструменты -| Что | ИИ | Комментарий | -|---|---|---| -| Вёрстка, HTML/CSS | да, частично | каркас разметки, сетки, адаптив, мелкие правки | -| Тексты | да, черновики | ИИ помог набросать формулировки, финал — вручную | -| Знак, флаги, палитра, плакаты | нет | Figma | -| Фотографии в макете | да, частично | фото-мокапы для концепта, реального события не было | +| Инструмент | Для чего использовал(а) | Уровень помощи | +| --- | --- | --- | +| GPT Astra | Каркас страницы, сетки и адаптив по макету | 3 | +| DeepSeek 4.1 Flash | Объяснял свойства CSS, помогал с ошибками и с черновиками текстов | 2 | +| GPT Image Sunburst | Сгенерировал фото-мокапы для концепта | 3 | -**Вёрстка.** HTML и CSS частично собраны с помощью ИИ-ассистента: каркас -разметки, сетки, адаптив, отдельные правки вроде `focus-visible`. Дальше код -доводился вручную — типографика, отступы, поведение на разных ширинах, -доступность и детали, которые видно только в браузере. +Уровни: 2 — ИИ подсказал фрагмент или нашёл ошибку, 3 — ИИ написал заметный +кусок кода или картинку, которые я вставил и разобрал. -**Текст.** ИИ помог набросать черновики формулировок — заголовки, подписи -секций, описания событий и мерча. Финальные формулировки, факты и структура -страницы — авторские. +Код, который написал ИИ, помечен комментариями в `index.html` и `styles.css` +(«ИИ: … Запись №… в README»). -**Изображения.** Фото в макете — постановочные мокапы для концепта: реального -фестиваля не было, часть кадров сгенерирована нейросетью. +### Записи о запросах -**Что сделано без ИИ.** Знак, флаги, палитра, плакаты и носители — в Figma. -Сборка страницы, финальная доводка вёрстки и правка текстов — вручную. +#### Запись №1 · 21.10.2026 -## Использование +- **Что я хотел(а) сделать:** сверстать страницу по макету из Figma — шапку, + обложку с флагом, бегущую строку, три цветные плитки, тёмный блок о + фестивале, карточки событий и мерч. +- **Что я спросил(а):** попросил собрать каркас лендинга по макету и сразу + сделать адаптив под телефон. +- **Что ответил ИИ:** выдал HTML-разметку по секциям и CSS с переменными + цветов, сетками и тремя медиазапросами. +- **Что я изменил(а) сам(а):** поправил размеры и отступы заголовков, переделал + фото-стопку в блоке «О фестивале» и обрезку картинок, убрал лишние обёртки, + подогнал брейкпоинты под свои 1050, 800 и 520 px. +- **Как я понял(а), что это работает:** открыл страницу в браузере и сузил окно + до 375 px — по горизонтали ничего не вылезает, меню переносится, плитки + встают в колонку. -Учебный проект. Код и макет можно смотреть и разбирать, коммерческое -использование — по договорённости с автором. +#### Запись №2 · 21.10.2026 + +- **Что я хотел(а) сделать:** получить фотографии для концепта, потому что + реального фестиваля не было. +- **Что я спросил(а):** попросил сгенерировать кадры фестиваля красок, стену с + плакатами и мерч в этой айдентике. +- **Что ответил ИИ:** сделал изображения 3072×2048, которые пришлось обрезать + под пропорции блоков. +- **Что я изменил(а) сам(а):** выбрал кадры, обрезал их до 3:2, сжал в JPEG и + выставил `object-position`, чтобы в карточках не резались лица. +- **Как я понял(а), что это работает:** вставил картинки в макет и проверил, + как они смотрятся под текстом на широком и узком экране. + +#### Запись №3 · 27.10.2026 + +- **Что я хотел(а) сделать:** довести страницу до сдачи — проверить доступность + и мелочи, которые не видно на скриншоте. +- **Что я спросил(а):** что ещё стоит добавить в статичную страницу для + доступности и удобства. +- **Что ответил ИИ:** предложил skip-link, `aria-labelledby` у секций, + `focus-visible` и `prefers-reduced-motion`. +- **Что я изменил(а) сам(а):** добавил skip-link и подписи секций, поправил alt + у декоративных картинок (у них теперь пустой alt и `aria-hidden`), проверил, + что фокус видно на тёмном фоне. +- **Как я понял(а), что это работает:** прошёл по странице клавишей Tab, + включил в DevTools эмуляцию `prefers-reduced-motion` и посмотрел, что + прокрутка и кнопки перестают анимироваться. + +### Выводы + +Больше всего ИИ помог на старте: с готовым каркасом проще править, чем +начинать с пустого файла. Ошибался он в мелочах — например, предлагал +фиксированные размеры заголовков вместо `clamp()` и не думал про узкие экраны, +пока я сам не сузил окно. Макет он не видел, поэтому цвета и отступы всё равно +приходилось сверять с Figma. Теперь я понимаю, как в этой вёрстке работают +сетки, `object-fit` и медиазапросы, и смогу собрать такую страницу без +подсказок. diff --git a/color-parade/images/screenshot.png b/color-parade/images/screenshot.png new file mode 100644 index 0000000..15e6c85 Binary files /dev/null and b/color-parade/images/screenshot.png differ diff --git a/color-parade/index.html b/color-parade/index.html index 06a301b..9b230b0 100644 --- a/color-parade/index.html +++ b/color-parade/index.html @@ -1,4 +1,5 @@ + diff --git a/color-parade/styles.css b/color-parade/styles.css index 600802a..360ee80 100644 --- a/color-parade/styles.css +++ b/color-parade/styles.css @@ -1,3 +1,4 @@ +/* ИИ: базовая сетка, переменные и адаптив — GPT Astra, дальше правил вручную. Запись №1 в README */ @font-face{font-family:Inter;src:url("assets/fonts/Inter-Regular.ttf") format("truetype");font-weight:400;font-display:swap} @font-face{font-family:Inter;src:url("assets/fonts/Inter-Medium.ttf") format("truetype");font-weight:500;font-display:swap} @font-face{font-family:Inter;src:url("assets/fonts/Inter-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}