From 64572f93364b275d98ce90239ec79e3ff8259f5e Mon Sep 17 00:00:00 2001 From: emil28092005 Date: Fri, 30 Oct 2026 11:15:06 +0300 Subject: [PATCH] Add color-parade README with AI usage disclosure --- color-parade/README.md | 102 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 color-parade/README.md diff --git a/color-parade/README.md b/color-parade/README.md new file mode 100644 index 0000000..3de3a8e --- /dev/null +++ b/color-parade/README.md @@ -0,0 +1,102 @@ +# Парад цвета — лендинг фестиваля + +Одностраничный сайт для концепта фестиваля «Парад цвета» — музыка, общение и +цветной порошок в духе Холи. Это веб-часть учебного проекта по айдентике: +знак, флаги, палитра и носители, нарисованные в 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) + +> Это концепт: фестиваль не проводится, билеты не продаются, события и +> контакты вымышлены. + +## Как открыть + +Сборки нет: статический HTML и CSS без зависимостей. Достаточно открыть +`index.html` в браузере или поднять локальный сервер, чтобы проверить +относительные пути к шрифтам и картинкам: + +```sh +cd color-parade +python3 -m http.server 8000 +# → http://localhost:8000 +``` + +## Структура + +``` +color-parade/ +├── index.html разметка страницы +├── styles.css токены, сетки, компоненты и адаптив +└── assets/ + ├── fonts/ Inter и Inter Display (локально, .ttf) + └── images/ фото-мокапы и флаг с росчерком +``` + +## Что на странице + +- **Шапка** — знак из четырёх кругов, навигация и кнопка «Билеты». +- **Обложка** — «ПАРАД ЦВЕТА», подзаголовок и кнопка; справа флаг с + росчерком, повёрнутый на −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` | линии и разделители | + +## Использование ИИ + +Проект сделан не полностью вручную: ИИ использовался как подсобный +инструмент, а не как автор. + +| Что | ИИ | Комментарий | +|---|---|---| +| Вёрстка, HTML/CSS | да, частично | каркас разметки, сетки, адаптив, мелкие правки | +| Тексты | да, черновики | ИИ помог набросать формулировки, финал — вручную | +| Знак, флаги, палитра, плакаты | нет | Figma | +| Фотографии в макете | да, частично | фото-мокапы для концепта, реального события не было | + +**Вёрстка.** HTML и CSS частично собраны с помощью ИИ-ассистента: каркас +разметки, сетки, адаптив, отдельные правки вроде `focus-visible`. Дальше код +доводился вручную — типографика, отступы, поведение на разных ширинах, +доступность и детали, которые видно только в браузере. + +**Текст.** ИИ помог набросать черновики формулировок — заголовки, подписи +секций, описания событий и мерча. Финальные формулировки, факты и структура +страницы — авторские. + +**Изображения.** Фото в макете — постановочные мокапы для концепта: реального +фестиваля не было, часть кадров сгенерирована нейросетью. + +**Что сделано без ИИ.** Знак, флаги, палитра, плакаты и носители — в Figma. +Сборка страницы, финальная доводка вёрстки и правка текстов — вручную. + +## Использование + +Учебный проект. Код и макет можно смотреть и разбирать, коммерческое +использование — по договорённости с автором.