|
|
@@ -0,0 +1,66 @@
|
|
|
+# Отчет о разработке интерактивного веб-сайта «KompShop»
|
|
|
+**Дата составления: 11 июня 2026 г.**
|
|
|
+
|
|
|
+**Исполнитель: ИИ-ассистент Qwen**
|
|
|
+
|
|
|
+**Проект: Маркетплейс компьютерных комплектующих «KompShop»**
|
|
|
+
|
|
|
+**Основатель: Понкрашов Александр Николаевич**
|
|
|
+
|
|
|
+ [САЙТ](http://group2jz.beget.tech/)
|
|
|
+
|
|
|
+ [QWEN](https://qwen.ai/home)
|
|
|
+
|
|
|
+
|
|
|
+### 1. Инициация проекта и анализ исходных данных
|
|
|
+Работа над проектом началась с загрузки референсного файла (Qwen_html_20260609_9xju395ir.html), который представлял собой шаблон сайта игрового клуба «PC CLUB».
|
|
|
+Я использовали этот файл только как пример структуры и общего стиля.
|
|
|
+
|
|
|
+ **Мой исходный промт содержал следующие требования:**
|
|
|
+1. Тематика: маркетплейс компьютерных деталей.
|
|
|
+2. Структура: ровно 7 отдельных HTML-страниц (Главная, Каталог, Корзина, Отзывы, Регистрация/Вход, Периферия, Профиль).
|
|
|
+3. Контент: информация о магазине в г. Новозыбков, основатель Понкрашов А.Н., 2 номера телефона, почта kompshop@gmail.com, ссылки на VK, Telegram, WhatsApp.
|
|
|
+4. Наполнение: по 30 товаров с реальными фото в основном каталоге и каталоге периферии, 40 подробных отзывов с датами (2018–2026 гг.) и оценками.
|
|
|
+5. UI/UX: кнопка каталога, регистрация, корзина (справа снизу), вход/регистрация (справа сверху), интерактивность (добавление в корзину, оформление заказа с вводом данных).
|
|
|
+
|
|
|
+### 2. Этап проектирования и первые итерации
|
|
|
+Сайт не получился идеальным с первого раза.
|
|
|
+
|
|
|
+Первая итерация: QWEN сгенерировал базовый код, объединяющий основные требования. Однако код получился слишком монолитным, а дизайн был стандартным.
|
|
|
+
|
|
|
+Моя доработка (Промт №2): Я написал, что требуется строгое разделение кода на 7 отдельных файлов. Кроме того, я запросил конкретную цветовую схему (аналоговая триада: синий, голубой, фиолетовый) для создания мягкого, премиального дизайна, а также потребовал добавить продвинутые анимации, в частности, фон с летающими частицами.
|
|
|
+
|
|
|
+Вторая итерация (Финальная): QWEN полностью переписал архитектуру, разделив проект на 7 независимых файлов (index.html, catalog.html, cart.html, reviews.html, register.html, periphery.html, profile.html). В каждый файл был внедрен скрипт анимации частиц на Canvas, плавные градиентные переходы (gradientShift), hover-эффекты для карточек товаров и модальные окна.
|
|
|
+
|
|
|
+### 3. Ручная доработка и интеграция изображений с Ozon
|
|
|
+Изначально QWEN использовал в коде временные изображения (с сервисов Unsplash и Via.placeholder), но они не показывались на сайте.
|
|
|
+
|
|
|
+**Мои действия:**
|
|
|
+1. Я открывал сайт ozon.ru.
|
|
|
+2. Находил реальные, качественные фотографии комплектующих (видеокарты RTX 4090, процессоры Intel/AMD, мониторы 240Hz, механические клавиатуры, кресла DXRacer и т.д.).
|
|
|
+3. Копировал URL-адреса этих изображений.
|
|
|
+4. Открывал предоставленные QWENом HTML-файлы в текстовом редакторе.
|
|
|
+5. Находил массивы данных const products = [...] в разделах <script> и заменял его ссылки на свои рабочие ссылки с Ozon в поле image: "...".
|
|
|
+
|
|
|
+### 4. Техническая реализация и внедренный функционал
|
|
|
+1. Единый дизайн-код: Все 7 страниц имеют одинаковую навигационную панель, анимированный фон с частицами (которые соединяются линиями при сближении) и футер с данными основателя Понкрашова А.Н.
|
|
|
+2. Интерактивная корзина (cart.html):
|
|
|
+Товары добавляются через кнопку «В корзину» с визуальной анимацией успеха.
|
|
|
+Данные сохраняются в localStorage браузера (корзина не очищается при перезагрузке).
|
|
|
+Реализована форма оформления заказа с валидацией полей (ФИО, телефон, адрес, способ оплаты).
|
|
|
+3. Система отзывов (reviews.html):
|
|
|
+Сгенерирован массив из 40 уникальных отзывов с именами, датами (в диапазоне 2018–2026), текстом, а также разделами «Плюсы» и «Минусы».
|
|
|
+Добавлены фильтры по количеству звезд (1–5).
|
|
|
+4. Личный кабинет (register.html / profile.html):
|
|
|
+Полноценная имитация регистрации и входа с проверкой совпадения паролей и индикатором сложности пароля.
|
|
|
+В профиле отображается аватар с первой буквой имени, статистика заказов, история покупок и бонусный счет (5% от суммы заказов).
|
|
|
+5. Адаптивность: Сайт корректно отображается как на ПК, так и на мобильных устройствах (благодаря CSS Grid и Flexbox).
|
|
|
+
|
|
|
+### 5. Итоги и выводы
|
|
|
+*ИИ (Qwen) взял на себя рутинную работу: написание сотен строк CSS-анимаций, логики JavaScript для корзины и авторизации, генерацию 40 правдоподобных отзывов и структурирование 7 страниц.
|
|
|
+*Я (Заказчик) выступили в роли арт-директора и контент-менеджера: задал рамки (цвета, частицы фона), потребовал разделения файлов и наполнил сайт реальным визуальным контентом с Ozon.
|
|
|
+
|
|
|
+**Результат: Полностью рабочий, интерактивный, прототип интернет-магазина, готовый к демонстрации**
|
|
|
+
|
|
|
+
|
|
|
+
|
