Add color-parade README with AI usage disclosure
This commit is contained in:
emil28092005
@@ -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.
|
||||||
|
Сборка страницы, финальная доводка вёрстки и правка текстов — вручную.
|
||||||
|
|
||||||
|
## Использование
|
||||||
|
|
||||||
|
Учебный проект. Код и макет можно смотреть и разбирать, коммерческое
|
||||||
|
использование — по договорённости с автором.
|
||||||
Reference in New Issue
Block a user