|
|
@@ -12,7 +12,7 @@
|
|
|
[QWEN](https://qwen.ai/home)
|
|
|
|
|
|
|
|
|
-## 1. Инициация проекта и анализ исходных данных
|
|
|
+### 1. Инициация проекта и анализ исходных данных
|
|
|
Работа над проектом началась с загрузки референсного файла (Qwen_html_20260609_9xju395ir.html), который представлял собой шаблон сайта игрового клуба «PC CLUB».
|
|
|
Я использовали этот файл только как пример структуры и общего стиля.
|
|
|
|
|
|
@@ -23,7 +23,7 @@
|
|
|
4. Наполнение: по 30 товаров с реальными фото в основном каталоге и каталоге периферии, 40 подробных отзывов с датами (2018–2026 гг.) и оценками.
|
|
|
5. UI/UX: кнопка каталога, регистрация, корзина (справа снизу), вход/регистрация (справа сверху), интерактивность (добавление в корзину, оформление заказа с вводом данных).
|
|
|
|
|
|
-## 2. Этап проектирования и первые итерации
|
|
|
+### 2. Этап проектирования и первые итерации
|
|
|
Сайт не получился идеальным с первого раза.
|
|
|
|
|
|
Первая итерация: QWEN сгенерировал базовый код, объединяющий основные требования. Однако код получился слишком монолитным, а дизайн был стандартным.
|
|
|
@@ -32,7 +32,7 @@
|
|
|
|
|
|
Вторая итерация (Финальная): QWEN полностью переписал архитектуру, разделив проект на 7 независимых файлов (index.html, catalog.html, cart.html, reviews.html, register.html, periphery.html, profile.html). В каждый файл был внедрен скрипт анимации частиц на Canvas, плавные градиентные переходы (gradientShift), hover-эффекты для карточек товаров и модальные окна.
|
|
|
|
|
|
-## 3. Ручная доработка и интеграция изображений с Ozon
|
|
|
+### 3. Ручная доработка и интеграция изображений с Ozon
|
|
|
Изначально QWEN использовал в коде временные изображения (с сервисов Unsplash и Via.placeholder), но они не показывались на сайте.
|
|
|
|
|
|
**Мои действия:**
|
|
|
@@ -42,7 +42,7 @@
|
|
|
4. Открывал предоставленные QWENом HTML-файлы в текстовом редакторе.
|
|
|
5. Находил массивы данных const products = [...] в разделах <script> и заменял его ссылки на свои рабочие ссылки с Ozon в поле image: "...".
|
|
|
|
|
|
-## 4. Техническая реализация и внедренный функционал
|
|
|
+### 4. Техническая реализация и внедренный функционал
|
|
|
1. Единый дизайн-код: Все 7 страниц имеют одинаковую навигационную панель, анимированный фон с частицами (которые соединяются линиями при сближении) и футер с данными основателя Понкрашова А.Н.
|
|
|
2. Интерактивная корзина (cart.html):
|
|
|
Товары добавляются через кнопку «В корзину» с визуальной анимацией успеха.
|
|
|
@@ -56,7 +56,7 @@
|
|
|
В профиле отображается аватар с первой буквой имени, статистика заказов, история покупок и бонусный счет (5% от суммы заказов).
|
|
|
5. Адаптивность: Сайт корректно отображается как на ПК, так и на мобильных устройствах (благодаря CSS Grid и Flexbox).
|
|
|
|
|
|
-## 5. Итоги и выводы
|
|
|
+### 5. Итоги и выводы
|
|
|
*ИИ (Qwen) взял на себя рутинную работу: написание сотен строк CSS-анимаций, логики JavaScript для корзины и авторизации, генерацию 40 правдоподобных отзывов и структурирование 7 страниц.
|
|
|
*Я (Заказчик) выступили в роли арт-директора и контент-менеджера: задал рамки (цвета, частицы фона), потребовал разделения файлов и наполнил сайт реальным визуальным контентом с Ozon.
|
|
|
|
