Понкрашов отчет.md 7.5 KB
Отчет о разработке интерактивного веб-сайта «KompShop»
Дата составления: 11 июня 2026 г.
Исполнитель: ИИ-ассистент Qwen
Проект: Маркетплейс компьютерных комплектующих «KompShop»
Основатель: Понкрашов Александр Николаевич
1. Инициация проекта и анализ исходных данных
Работа над проектом началась с загрузки референсного файла (Qwen_html_20260609_9xju395ir.html), который представлял собой шаблон сайта игрового клуба «PC CLUB». Я использовали этот файл только как пример структуры и общего стиля.
Мой исходный промт содержал следующие требования:
- Тематика: маркетплейс компьютерных деталей.
- Структура: ровно 7 отдельных HTML-страниц (Главная, Каталог, Корзина, Отзывы, Регистрация/Вход, Периферия, Профиль).
- Контент: информация о магазине в г. Новозыбков, основатель Понкрашов А.Н., 2 номера телефона, почта kompshop@gmail.com, ссылки на VK, Telegram, WhatsApp.
- Наполнение: по 30 товаров с реальными фото в основном каталоге и каталоге периферии, 40 подробных отзывов с датами (2018–2026 гг.) и оценками.
- 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), но они не показывались на сайте.
Мои действия:
- Я открывал сайт ozon.ru.
- Находил реальные, качественные фотографии комплектующих (видеокарты RTX 4090, процессоры Intel/AMD, мониторы 240Hz, механические клавиатуры, кресла DXRacer и т.д.).
- Копировал URL-адреса этих изображений.
- Открывал предоставленные QWENом HTML-файлы в текстовом редакторе.
- Находил массивы данных const products = [...] в разделах