[ИИ] README по гайдлайну, скриншот и пометки ИИ в коде
This commit is contained in:
emil28092005
+88
-82
@@ -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
|
||||
```
|
||||
|
||||
|
||||
## Структура
|
||||
## Автор
|
||||
|
||||
```
|
||||
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` и медиазапросы, и смогу собрать такую страницу без
|
||||
подсказок.
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
@@ -1,4 +1,5 @@
|
||||
<!doctype html>
|
||||
<!-- ИИ: каркас разметки и секции собраны с ИИ (GPT Astra), дальше правил вручную. Запись №1 в README -->
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user