|
@@ -0,0 +1,141 @@
|
|
|
|
|
+# Отчёт о разработке сайта «PC Club» с применением нейросетей Claude, Qwen и DeepSeek
|
|
|
|
|
+
|
|
|
|
|
+## 1. Введение
|
|
|
|
|
+
|
|
|
|
|
+**Задача:** создать многостраничный сайт для компьютерного клуба «PC Club» (г. Новозыбков) с тёмным неон-дизайном, включающий:
|
|
|
|
|
+
|
|
|
|
|
+- Главную страницу (информация, тарифы, регистрация).
|
|
|
|
|
+- Каталог товаров (б/у и новое оборудование) с фото, корзиной, диалогом с продавцом.
|
|
|
|
|
+- Страницу отзывов с формой добавления.
|
|
|
|
|
+- Игровой раздел с системой токенов и тремя мини-играми (кликер, мемори, стрелялка).
|
|
|
|
|
+- Рулетку с ежедневным вращением, призами и историей.
|
|
|
|
|
+
|
|
|
|
|
+**Срок:** 2 недели.
|
|
|
|
|
+**Инструменты:** HTML5, CSS3, JavaScript (ES6), LocalStorage, Canvas API.
|
|
|
|
|
+**Помощники:** три нейросети — **Claude AI**, **Qwen**, **DeepSeek**.
|
|
|
|
|
+
|
|
|
|
|
+**Результат:** готовый сайт доступен по адресу → [**http://veron322.beget.tech/**](http://veron322.beget.tech/)
|
|
|
|
|
+
|
|
|
|
|
+---
|
|
|
|
|
+
|
|
|
|
|
+## 2. Использованные нейросети и их роль
|
|
|
|
|
+
|
|
|
|
|
+| Нейросеть | Ссылка | Основная задача |
|
|
|
|
|
+|-----------|--------|------------------|
|
|
|
|
|
+| **Claude AI** (Anthropic) | [https://claude.ai](https://claude.ai) | Разработка структуры HTML/CSS, адаптивного дизайна, карточек товаров, системы токенов и навигации. |
|
|
|
|
|
+| **Qwen** (Alibaba Cloud) | [https://qwenlm.github.io](https://qwenlm.github.io) | Реализация сложной игровой логики: рулетка (вероятности, canvas‑анимация), мини‑игры (кликер, мемори, стрелялка), LocalStorage для токенов и истории. |
|
|
|
|
|
+| **DeepSeek** (深度求索) | [https://deepseek.com](https://deepseek.com) | Финальная сборка всех страниц, замена эмодзи на реальные фото товаров, унификация валюты (символ P), исправление багов, интеграция корзины и диалогов. |
|
|
|
|
|
+
|
|
|
|
|
+---
|
|
|
|
|
+
|
|
|
|
|
+## 3. Этапы работы и примеры промтов
|
|
|
|
|
+
|
|
|
|
|
+### Этап 1. Разработка главной страницы (Claude AI)
|
|
|
|
|
+
|
|
|
|
|
+**Промт:**
|
|
|
|
|
+> «Создай современную главную страницу для компьютерного клуба. Используй тёмную тему, неоновые акценты, шрифты Orbitron, Rajdhani, Inter. Сделай секции: Hero с кнопками, О клубе (6 карточек), Тарифы (6 карточек с ценами), Контакты и карточка основателя. Добавь модальное окно регистрации с валидацией полей. Все стили внутри одного CSS.»
|
|
|
|
|
+
|
|
|
|
|
+**Результат от Claude:**
|
|
|
|
|
+Полностью рабочий `index.html` с адаптивной сеткой, фиксированным меню, формой регистрации и сохранением данных в LocalStorage. Дизайн соответствует киберпанк-стилю.
|
|
|
|
|
+
|
|
|
|
|
+---
|
|
|
|
|
+
|
|
|
|
|
+### Этап 2. Страница товаров и корзина (Claude + Qwen)
|
|
|
|
|
+
|
|
|
|
|
+**Промт для Claude (структура товаров):**
|
|
|
|
|
+> «Сделай страницу товаров для игрового клуба. 15 товаров: мониторы, мыши, клавиатуры, кресла, геймпады. У каждого: название, цена, состояние (б/у, хорошее, отличное), описание, характеристики. Товары отображаются в виде карточек с кнопкой “В корзину”. Храни товары в массиве JavaScript.»
|
|
|
|
|
+
|
|
|
|
|
+**Промт для Qwen (корзина):**
|
|
|
|
|
+> «Напиши функции для корзины: добавление/удаление, подсчёт суммы, отображение боковой панели. Используй LocalStorage, чтобы корзина не исчезала после перезагрузки. Сделай кнопку “Оформить заказ” с выводом сообщения и очисткой корзины.»
|
|
|
|
|
+
|
|
|
|
|
+**Результат:**
|
|
|
|
|
+Qwen выдал полностью работающий код корзины с боковым выезжающим меню, счётчиком и сохранением состояния. Единственный недостаток — при удалении товара не обновлялась цена в реальном времени (позже исправлено DeepSeek).
|
|
|
|
|
+
|
|
|
|
|
+---
|
|
|
|
|
+
|
|
|
|
|
+### Этап 3. Игры и токен-система (Qwen + DeepSeek)
|
|
|
|
|
+
|
|
|
|
|
+**Промт для Qwen:**
|
|
|
|
|
+> «Создай три мини-игры, которые начисляют токены:
|
|
|
|
|
+> – Кликер: за каждый клик +1 токен, каждые 50 кликов множитель увеличивается на 1.
|
|
|
|
|
+> – Мемори (16 карточек, 8 пар): за полную победу +50 токенов.
|
|
|
|
|
+> – Стрелялка: появляются цели (эмодзи), при попадании +2 токена.
|
|
|
|
|
+> Все токены сохраняются в LocalStorage. На отдельной панели пользователь может тратить токены: 1500 токенов = 1 час игры, 300 = бесплатный напиток и т.д.»
|
|
|
|
|
+
|
|
|
|
|
+**Ответ Qwen:**
|
|
|
|
|
+Код игр был рабочим, но в мемори карточки переворачивались некорректно (не блокировались на время сравнения), а в стрелялке цели накапливались слишком быстро.
|
|
|
|
|
+
|
|
|
|
|
+**Уточнение (промт) для DeepSeek:**
|
|
|
|
|
+> «Исправь мемори: добавь задержку перед закрытием несовпавших карточек, сделай счётчик шагов. В стрелялке ограничь количество целей до 8, увеличь скорость движения и добавь анимацию “+2 токена” при попадании. В кликере сделай вылетающие плавающие монетки при клике.»
|
|
|
|
|
+
|
|
|
|
|
+**Результат DeepSeek:**
|
|
|
|
|
+Все игры стали идеально работать. Добавлена анимация, фикс багов, сохранение прогресса (токены, клики) в LocalStorage.
|
|
|
|
|
+
|
|
|
|
|
+---
|
|
|
|
|
+
|
|
|
|
|
+### Этап 4. Рулетка (Qwen)
|
|
|
|
|
+
|
|
|
|
|
+**Промт:**
|
|
|
|
|
+> «Сделай ежедневную рулетку. 8 призов с вероятностями: 1 час (10%), напиток (20%), бургер (8%), 300 токенов (15%), скидка 20% (12%), пицца (7%), 100 токенов (18%), ничего (7%). Плюс два суперприза по 1.5%: VIP-абонемент и 10 часов. Отрисуй колесо на canvas, при вращении выбирай приз с учётом вероятностей. Крутить можно раз в 24 часа, храни таймер. Показывай историю выигрышей. При выигрыше суперприза – конфетти.»
|
|
|
|
|
+
|
|
|
|
|
+**Результат:**
|
|
|
|
|
+Qwen написал рулетку полностью, но неправильно рассчитывал угол остановки (всегда попадал на первый сектор). Это было исправлено DeepSeek на этапе финальной сборки.
|
|
|
|
|
+
|
|
|
|
|
+---
|
|
|
|
|
+
|
|
|
|
|
+### Этап 5. Финальная полировка, замена эмодзи на фото и символ валюты (DeepSeek)
|
|
|
|
|
+
|
|
|
|
|
+**Промт к DeepSeek:**
|
|
|
|
|
+> «Замени все эмодзи товаров на реальные изображения. Добавь для каждого товара ссылку на фото-заглушку (потом заменю своими). Цены везде переделай с символа ₽ на латинскую букву P. Убедись, что все страницы (index, products, reviews, game, roulette) стилистически одинаковы и корректно работают вместе. Корзина должна отображать цены с P, итог тоже. Диалог с продавцом не должен закрывать модальное окно товара.»
|
|
|
|
|
+
|
|
|
|
|
+**Что сделал DeepSeek:**
|
|
|
|
|
+
|
|
|
|
|
+- В массив `products` добавлено поле `img`.
|
|
|
|
|
+- В карточках товаров и модальных окнах вместо `product-img-placeholder` с эмодзи появился тег `<img>` с fallback-картинкой.
|
|
|
|
|
+- Во всех местах (цены, корзина, итого) символ `₽` заменён на `P`.
|
|
|
|
|
+- Исправлен z-index модалок, добавлен `event.stopPropagation()` для диалога.
|
|
|
|
|
+- Проверена работа LocalStorage на всех страницах, устранены конфликты.
|
|
|
|
|
+
|
|
|
|
|
+---
|
|
|
|
|
+
|
|
|
|
|
+## 4. Что было сделано лично мной (без нейросетей)
|
|
|
|
|
+
|
|
|
|
|
+- Продуман дизайн и цветовая схема (тёмный фон + фиолетовый/голубой неон).
|
|
|
|
|
+- Написан весь текстовый контент: описания товаров, отзывы, тарифы, страница «О клубе».
|
|
|
|
|
+- Подобраны и загружены реальные фотографии товаров (вместо заглушек).
|
|
|
|
|
+- Настроены ссылки между страницами, проверена кроссбраузерность и адаптивность.
|
|
|
|
|
+- Выполнен деплой на хостинг.
|
|
|
|
|
+
|
|
|
|
|
+---
|
|
|
|
|
+
|
|
|
|
|
+## 5. Итоги и выводы
|
|
|
|
|
+
|
|
|
|
|
+| Нейросеть | Сильные стороны | Слабые стороны |
|
|
|
|
|
+|-----------|----------------|----------------|
|
|
|
|
|
+| **Claude AI** | Идеальная вёрстка, семантический HTML, чистый CSS, быстрое создание сложных сеток. | Требует точных промтов для динамической логики (JS). |
|
|
|
|
|
+| **Qwen** | Отлично пишет игровую логику, работу с LocalStorage, canvas, анимации. | Иногда выдаёт мелкие баги (неправильные углы, гонка событий), которые нужно исправлять. |
|
|
|
|
|
+| **DeepSeek** | Лучший для финальной сборки, правки чужих ошибок, интеграции компонентов, замены элементов (эмодзи → фото). | Требуется чётко сформулированное ТЗ на доработку. |
|
|
|
|
|
+
|
|
|
|
|
+**Общий вывод:** совместное использование трёх нейросетей позволило создать полноценный коммерческий сайт за минимальное время. Каждая ИИ показала свою специализацию, а DeepSeek выступил как “архитектор” и “финишёр”.
|
|
|
|
|
+
|
|
|
|
|
+---
|
|
|
|
|
+
|
|
|
|
|
+## 6. Благодарности со ссылками
|
|
|
|
|
+
|
|
|
|
|
+Выражаю благодарность командам разработчиков нейросетей:
|
|
|
|
|
+
|
|
|
|
|
+- **Anthropic (Claude AI)** – за красивый и адаптивный дизайн → [https://claude.ai](https://claude.ai)
|
|
|
|
|
+- **Alibaba Cloud (Qwen)** – за мощную игровую механику и работу с canvas → [https://qwenlm.github.io](https://qwenlm.github.io) (демо-чат: [chat.qwen.ai](https://chat.qwen.ai))
|
|
|
|
|
+- **DeepSeek (深度求索)** – за финальную шлифовку, замену эмодзи на фото и внедрение символа валюты P → [https://deepseek.com](https://deepseek.com)
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+---
|
|
|
|
|
+
|
|
|
|
|
+*Дата: 11 июня 2026 г.*
|
|
|
|
|
+*Автор: Жевлаков Иван 26группа PC Club, г. Новозыбков*
|
|
|
|
|
+
|
|
|
|
|
+**Сайт проекта:** [http://veron322.beget.tech/](http://veron322.beget.tech/)
|
|
|
|
|
+
|
|
|
|
|
+---
|
|
|
|
|
+
|
|
|
|
|
+**Конец отчёта**
|
