Add color-parade README with AI usage disclosure

2026-10-30 11:15:06 +03:00
parent 51f1b53582
commit 64572f9336
1 changed files with 102 additions and 0 deletions
@@ -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.
+Сборка страницы, финальная доводка вёрстки и правка текстов — вручную.
+
+## Использование
+
+Учебный проект. Код и макет можно смотреть и разбирать, коммерческое
+использование — по договорённости с автором.