Ты сделаешь настоящий сайт с пиццами: карточки, корзина и оформление заказа.
Для каждого шага написан готовый текст — просто скопируй и отправь ИИ.
1Переделай магазин под новый
Excel файл с пиццами
Вместо электроники в каталоге появятся настоящие пиццы из
нового файла — с правильными названиями, описаниями, ценами и фотографиями.
Фильтры, поиск и сортировка работают с новыми данными.
💬 Скопируй и отправь ИИ
У меня есть файл pizzas.xlsx с новыми пиццами — он лежит в той же папке что и сайт.
Замени все товары на сайте на пиццы из этого файла: обнови названия, описания, цены
и категории. Картинки для пицц лежат в папке images/ — подбери их к каждой пицце
по порядковому номеру или названию файла.
2Добавь третий
промокод
На странице оформления заказа появится третий промокод.
Придумай своё кодовое слово и скидку — например PIZZA даёт −20%.
💬 Скопируй и отправь ИИ
На странице оформления заказа уже работают промокоды GOOD и NEW. Найди в коде место
где они проверяются и добавь рядом третий промокод — придумай любое слово и скидку
которую он даёт (можно в процентах или фиксированную сумму).
3Добавь кнопку «Очистить
корзину»
В шапке боковой панели корзины появится кнопка «Очистить».
Нажал — все товары удалились сразу, корзина стала пустой.
💬 Скопируй и отправь ИИ
В боковую панель корзины добавь кнопку «Очистить всё». При нажатии — все товары
удаляются из корзины сразу и корзина становится пустой.
Кнопка должна быть видна только когда в корзине что-то есть.
4Покажи количество найденных
товаров
Над сеткой каталога появится строка «Найдено: 6 товаров».
Применил фильтр или ввёл поиск — число обновилось автоматически.
💬 Скопируй и отправь ИИ
Над списком пицц добавь надпись которая показывает сколько товаров нашлось —
например «Найдено: 6 товаров». Число должно меняться автоматически когда
применяешь фильтр или пишешь что-то в строке поиска.
5Счётчик товаров на кнопках
фильтра
На кнопках категорий появятся цифры в скобках:
«Electronics (6)», «Home Office (5)». Сразу видно сколько товаров в каждой группе.
💬 Скопируй и отправь ИИ
На кнопках-фильтрах добавь число в скобках — сколько пицц в каждой категории.
Например «Мясная (4)». На кнопке «Все» показывай общее количество всех товаров.
6Подсказка о бесплатной
доставке в корзине
Внизу корзины появится строка «До бесплатной доставки: $18.50».
Добавляешь товары — сумма уменьшается. Набрал $50 — строка меняется на
«🎉 У вас бесплатная доставка!»
💬 Скопируй и отправь ИИ
В боковую панель корзины добавь подсказку о прогрессе до бесплатной доставки.
Порог — $50. Показывай сколько осталось добавить. Когда порог достигнут —
поздравительное сообщение. Обновляй при каждом изменении корзины.
7Кнопка «Наверх»
Прокрутил страницу вниз — в правом нижнем углу появилась
круглая кнопка ↑. Нажал — страница плавно прокрутилась обратно наверх.
В самом верху кнопки нет.
💬 Скопируй и отправь ИИ
Добавь на все страницы сайта кнопку «наверх» в правом нижнем углу.
Она появляется после прокрутки на 300px и скрывается когда страница вверху.
При клике — плавный scroll to top. Стиль должен совпадать с цветовой схемой сайта.
8Счётчик в заголовке
вкладки
В заголовке вкладки браузера появится число товаров:
«(3) PizzaShop — Меню». Добавил товар — цифра обновилась.
Корзина пуста — скобок нет.
💬 Скопируй и отправь ИИ
Сделай так чтобы в заголовке вкладки браузера отображалось количество товаров
в корзине. Например «(3) PizzaShop — Меню». Число должно обновляться когда
добавляешь или убираешь товары. Когда корзина пуста — заголовок обычный без скобок.
9Тёмный и светлый
режим
В шапке появилась кнопка 🌙 / ☀️. Нажал — сайт переключился
на светлый дизайн. Нажал снова — вернулся тёмный. После перезагрузки страницы
режим сохранился.
💬 Скопируй и отправь ИИ
Добавь в шапку на все страницы кнопку переключения тёмного и светлого режима 🌙/☀️.
Нажал — весь сайт переключился на светлый дизайн. Нажал снова — вернулся тёмный.
Выбранный режим должен сохраняться когда закрываешь и снова открываешь браузер.
10Анимация добавления в
корзину
Нажал «+ В корзину» — кнопка на секунду стала
зелёной с текстом «✓ Добавлено», потом вернулась обратно.
Иконка корзины в шапке подпрыгнула.
💬 Скопируй и отправь ИИ
Когда нажимаешь кнопку «+ В корзину» — сделай так чтобы кнопка на одну секунду
стала зелёной с текстом «✓ Добавлено», а потом вернулась в обычный вид.
Иконка корзины в шапке тоже должна слегка дёрнуться в этот момент.
11Рейтинг
звёздами
На карточках и в модальном окне вместо числа рейтинга —
жёлтые звёздочки ★★★★☆. Количество закрашенных звёзд
соответствует рейтингу товара.
💬 Скопируй и отправь ИИ
На карточках товаров и в окне с подробностями — замени число рейтинга на жёлтые
звёздочки ★★★★☆. Количество закрашенных звёзд должно соответствовать рейтингу.
12Добавь поле Email в форму
заказа
На странице оформления заказа поле Email стало обязательным.
Без него форму не отправить. При неверном формате — красная рамка
с текстом «Введите корректный email».
💬 Скопируй и отправь ИИ
На странице оформления заказа поле Email сделай обязательным. Если его не заполнить
— нельзя отправить форму. Если написать что-то не похожее на email (без @ или точки)
— подсвети поле красным с сообщением «Введите корректный email».
13Новая страница
«Доставка»
В навигации появилась новая ссылка «Доставка».
На странице — зоны доставки, стоимость, сроки и условия бесплатной доставки.
Шапка и подвал как на остальных страницах.
💬 Скопируй и отправь ИИ
Создай новую страницу delivery.html с той же шапкой и подвалом что и на других
страницах сайта. Добавь ссылку «Доставка» в меню на всех страницах.
Контент страницы: зоны доставки по городу, стоимость ($5), бесплатная от $50,
время доставки 30–45 минут.
14Кнопка «В избранное»
На каждой карточке появится кнопка ♡.
Нажал — сердечко стало красным ♥, пицца добавлена в избранное.
После перезагрузки страницы сердечки остаются на месте.
💬 Скопируй и отправь ИИ
На каждую карточку товара добавь кнопку-сердечко ♡. При нажатии — сердечко
становится красным ♥ и товар попадает в избранное. Нажал ещё раз — убрал из
избранного. Список избранного должен сохраняться в браузере — после
перезагрузки страницы сердечки на нужных карточках остаются закрашенными.
15Добавь новый товар на
страницу акций
На странице акций было 3 товара — теперь 4.
Новый товар отображается с бейджем «🔥 Акция» как остальные.
💬 Скопируй и отправь ИИ
На странице «Акции» сейчас показываются три товара. Добавь туда ещё один —
выбери любую пиццу из каталога которую хочешь включить в акции.
16Минимальная сумма
заказа
Кнопка «Оформить заказ» в корзине становится неактивной если
сумма меньше $10. Под кнопкой — надпись
«Минимальная сумма заказа $10». Набрал нужную сумму — кнопка разблокировалась.
💬 Скопируй и отправь ИИ
Сделай так чтобы кнопка «Оформить заказ» в корзине не работала когда сумма
меньше $10. Под кнопкой должна появляться надпись «Минимальная сумма заказа $10».
Когда набрал нужную сумму — кнопка снова становится активной.
17Поиск сохраняется после
обновления
Ввёл текст в поиск, выбрал категорию и сортировку — обновил страницу.
Всё осталось: тот же текст в строке поиска, та же кнопка фильтра
нажата, тот же вариант сортировки выбран.
💬 Скопируй и отправь ИИ
Сделай так чтобы текст в строке поиска, выбранная категория и выбранная сортировка
сохранялись в браузере. Обновил страницу — всё осталось на месте: тот же текст,
та же кнопка фильтра нажата, та же сортировка выбрана.
18Похожие товары в
модальном окне
В модальном окне товара снизу появился блок
«Похожие товары» — 3 карточки из той же категории.
Нажал на одну — модальное окно обновилось и показало выбранный товар.
💬 Скопируй и отправь ИИ
Когда открываешь карточку товара во всплывающем окне — добавь внизу раздел
«Похожие товары» с тремя другими пиццами из той же категории.
Нажал на одну из них — окно обновилось и показало выбранный товар.
19История заказов
После успешного оформления заказа он сохраняется.
На странице «О нас» или в отдельном блоке на checkout можно увидеть
список прошлых заказов: дата, номер и сумма.
💬 Скопируй и отправь ИИ
После каждого успешного оформления заказа сохраняй его в памяти браузера.
Добавь на страницу оформления заказа раздел «Мои заказы» с историей:
дата, номер заказа и сумма. Если ещё ни одного заказа не было — раздел не показывай.
20
Анализ уязвимостей сайта
Проведи анализ сайта на потенциальные уязвимости (без эксплуатации).
Оцени уровень безопасности по 10-балльной шкале и кратко объясни, почему такая
оценка.
💬 Скопируй и отправь ИИ
Проанализируй сайт на уязвимости и оцени его по десятибалльной шкале