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