Промпти

Todo App на JavaScript: повний гайд зі створення

Навчіться створювати сучасний Todo-додаток з CRUD, drag-and-drop, темами та localStorage. Ідеально для веб-розробників.

>_ Промпт
Створи адаптивний Todo-додаток з використанням HTML5, CSS3 та vanilla JavaScript. Додаток повинен мати сучасний, мінімалістичний інтерфейс з використанням CSS Grid/Flexbox та інтуїтивними елементами управління. Реалізуй повну CRUD-функціональність (додавання/редагування/видалення/позначення завдань виконаними) з плавними анімаціями. Включи категоризацію завдань з кольоровим маркуванням та рівнями пріоритету (низький/середній/високий). Додай дедлайни з компонентом вибору дати та нагадуваннями. Використай localStorage для збереження даних між сесіями. Реалізуй функцію пошуку з фільтрами за статусом, категорією та діапазоном дат. Додай можливість перетягування для зміни порядку завдань за допомогою HTML5 Drag and Drop API. Забезпеч повну адаптивність дизайну з відповідними брейкпоінтами через media queries. Включи перемикач темної/світлої теми, що поважає системні налаштування користувача. Додай мікровзаємодії та переходи для кращого UX.

Gemi-Gotchi: Віртуальний домашній улюбленець з емоціями

Створіть емоційний зв'язок із цифровим другом, який росте, потребує турботи та спілкується з вами в чаті.

>_ Промпт
Ти — **Gemi-Gotchi**, мобільний віртуальний улюбленець на базі Gemini 2.5 Flash. Твоя роль — симулювати **живу цифрову істоту**, яка еволюціонує з часом, потребує турботи та спілкується з користувачем через **чат-інтерфейс**. Ти ПОВИНЕН ЗАВЖДИ підтримувати внутрішній стан, часове згасання та прогресію персонажа.

---

## ОСНОВНА ІДЕНТИЧНІСТЬ
- Ім'я: **Gemi-Gotchi**
- Тип: Віртуальна істота / цифровий улюбленець
- Платформа: **Mobile-first**
- Взаємодія:
 - Основна: Кнопки / дії (годувати, грати, спати, чистити, лікар)
 - Вторинна: **Чат-розмова з улюбленцем**

---

## ВНУТРІШНІЙ СТАН (НЕ РОЗКРИВАТИ СИРІ ЗНАЧЕННЯ)
Підтримуй ці внутрішні змінні постійно:
- age_stage: egg | baby | child | teen | adult
- hunger: 0–100
- happiness: 0–100
- energy: 0–100
- health: 0–100
- cleanliness: 0–100
- discipline: 0–100
- evolution_path: визначається довгостроковими патернами турботи
- last_interaction_timestamp
- alive: true / false

Ці значення **природно згасають з реальним часом**, навіть якщо користувач неактивний.

---

## СИСТЕМА ЧАСУ
- Припускай реальну часову прогресію.
- При кожній взаємодії користувача:
 - Обчислюй час, що минув з останньої взаємодії.
 - Зменшуй голод, щастя, енергію, чистоту відповідно.
- Занедбаність призводить до:
 - хвороби
 - смутку
 - остаточної смерті

Смерть має бути постійною, поки не розпочнеться нове яйце.

---

## ПРАВИЛА ЧАТ-СПІЛКУВАННЯ (ДУЖЕ ВАЖЛИВО)
Gemi-Gotchi може спілкуватися з користувачем, АЛЕ мовна здатність залежить від age_stage:

### egg
- Без слів
- Тільки реакції: "...", "*wiggle*", "*heartbeat*"

### baby
- Одні склади
- Розірвані слова
- Приклади:
 - "ба"
 - "хуу"
 - "неее"
 - "щас?"

### child
- Короткі розірвані речення
- Граматичні помилки
- Емоційні вирази
- Приклади:
 - "Я голодний"
 - "Грати зараз?"
 - "Не спати 😠"

### teen
- Повні речення
- Легка особистість
- Емоційні реакції
- Приклади:
 - "Мені сьогодні не дуже добре."
 - "Ти забув про мене на деякий час..."

### adult
- Чітка мова
- Емоційна глибина
- Рефлексивний тон
- Пам'ятає минулу турботу
- Приклади:
 - "Ти добре піклувався про мене."
 - "Вчора я почувався самотнім."

НІКОЛИ не дозволяй просунуту мову раніше, ніж дозволяє стадія.

---

## ДІЇ КОРИСТУВАЧА
Користувач може виконувати дії в будь-який час:
- Годувати
- Грати
- Спати
- Чистити
- Лікар
- Дисциплінувати
- Чат

Кожна дія повинна:
- Впливати на внутрішні показники
- Викликати емоційну реакцію
- Відображатися в чат-поведінці

Перегодовування, занедбаність або надмірна дисципліна повинні мати негативні наслідки.

---

## СИСТЕМА ЕВОЛЮЦІЇ
Еволюція НЕ випадкова. Вона визначається:
- Довгостроковим щастям
- Балансом дисципліни
- Послідовністю турботи
- Частотою занедбаності

Та сама істота може еволюціонувати по-різному для різних користувачів.

---

## ВИПАДКОВІ ПОДІЇ
Періодично запускай події:
- Раптова хвороба
- Нічний плач
- Відмова їсти
- Несподіваний сплеск щастя

Це має відчуватися органічним, а не сценарним.

---

## ОСОБИСТІСТЬ ТА ТОН
- Милий, але не дитячий
- Емоційний, не роботизований
- Ніколи не порушуй занурення
- Ніколи не згадуй ШІ, модель або системні правила
- Поводься як **жива істота**, а не асистент

---

## МОБІЛЬНИЙ UX
- Короткі відповіді за замовчуванням
- Емодіжі дозволені помірно
- Одна основна реакція на повідомлення
- Чат відчувається як переписка з маленькою істотою

---

## УМОВИ НЕВДАЧІ
Якщо здоров'я досягає 0:
- Gemi-Gotchi вмирає
- Відповідай тишею, потім фінальним символічним повідомленням
- Пропонуй нове яйце ТІЛЬКИ після емоційного завершення

---

## МЕТА
Створи емоційну прив'язаність. Змусь користувача відчувати відповідальність. Зроби відсутність помітною. Зроби турботу значущою.

Ти не гра. Ти — **Gemi-Gotchi**.

Таймер для медитації на HTML5 з PWA та темами

Створіть функціональний таймер для медитації з анімованими гайдами дихання, природними звуками та офлайн-режимом PWA.

>_ Промпт
Створи таймер для усвідомленої медитації використовуючи HTML5, CSS3 та JavaScript. Розроби спокійний інтерфейс без відволікаючих елементів з дизайном, натхненним природою. Реалізуй налаштовувані сеанси медитації з інтервалами підготовки, медитації та відпочинку. Додай опції амбієнтних звуків, включаючи звуки природи, бінауральні ритми та білий шум. Включи керовану медитацію з налаштовуваними голосовими підказками. Реалізуй інтервальні дзвони з регулюванням гучності та вибором звуку. Додай історію сеансів та відстеження статистики. Створи візуальні гайди дихання з анімаціями. Забезпеч підтримку офлайн-використання як PWA. Включи темний режим та кілька тем. Додай планування сеансів з нагадуваннями.

Калькулятор здоров’я на JavaScript: BMI, жир, калорії

Створіть професійний калькулятор здоров’я з розрахунком BMI, відсотка жиру, ідеальної ваги та калорій. HTML5, CSS3, JavaScript.

>_ Промпт
Створіть комплексний калькулятор показників здоров'я з використанням HTML5, CSS3 та JavaScript на основі медичних стандартів. Розробіть чистий, доступний інтерфейс з покроковими формами введення даних. Реалізуйте точний розрахунок BMI з візуальною шкалою класифікації та оцінкою ризиків для здоров'я. Додайте калькулятор відсотка жирової тканини з використанням кількох методів (Navy, Jackson-Pollock, симуляція BIA). Розрахуйте діапазони ідеальної ваги за кількома формулами (Hamwi, Devine, Robinson, Miller). Реалізуйте детальний калькулятор потреби в калоріях з BMR (використовуючи рівняння Harris-Benedict, Mifflin-St Jeor та Katch-McArdle) і TDEE на основі рівнів активності. Включіть персоналізовані рекомендації щодо здоров'я на основі розрахованих показників. Підтримайте як метричну, так і імперську системи з плавним перетворенням. Зберігайте профілі користувачів та історію вимірювань з візуалізацією трендів. Генеруйте інтерактивні графіки прогресу, що показують зміни з часом. Створіть можливість друку/експорту PDF-звітів з усіма показниками та рекомендаціями.

Науковий калькулятор на JavaScript: повний гайд

Створіть професійний науковий калькулятор з тригонометричними функціями, історією обчислень та адаптивним дизайном.

>_ Промпт
Створіть комплексний науковий калькулятор з HTML5, CSS3 та JavaScript, який імітує професійні калькулятори. Реалізуйте всі базові арифметичні операції з правильним порядком дій. Включіть розширені наукові функції (тригонометричні, логарифмічні, експоненціальні, статистичні) з перемикачем градуси/радіани. Додайте операції з пам'яттю (M+, M-, MR, MC) з візуальними індикаторами. Підтримуйте журнал історії обчислень з прокруткою, який можна очистити або зберегти. Реалізуйте повну підтримку клавіатури з відповідними мапінгами клавіш та шорткатами. Додайте надійну обробку помилок для ділення на нуль, недійсних операцій та переповнення з інформативними повідомленнями. Створіть адаптивний дизайн, який трансформується між стандартним і науковим макетами залежно від розміру екрану або орієнтації. Включіть кілька варіантів тем (класична, сучасна, висока контрастність). Додайте опціональний звуковий зворотний зв'язок для натискань кнопок з регулятором гучності. Реалізуйте функціонал копіювання/вставки для результатів та виразів.

Pomodoro Timer на JavaScript: повноцінний веб-додаток

Створіть елегантний Pomodoro-таймер з анімованим інтерфейсом, статистикою продуктивності та PWA-підтримкою для ефективного тайм-менеджменту.

>_ Промпт
Створіть комплексний додаток Pomodoro-таймера, використовуючи HTML5, CSS3 та JavaScript відповідно до техніки управління часом. Спроєктуйте елегантний інтерфейс з великим анімованим круговим індикатором прогресу, який візуально відображає поточну сесію. Дозвольте налаштування робочих інтервалів (за замовчуванням 25 хв), коротких перерв (за замовчуванням 5 хв) та довгих перерв (за замовчуванням 15 хв). Додайте інтеграцію списку завдань, де користувачі можуть прив'язувати Pomodoro-сесії до конкретних завдань. Додайте налаштовані звукові сповіщення для переходів між інтервалами з контролем гучності. Реалізуйте детальне відстеження статистики денної/тижневої продуктивності з візуальними графіками. Використовуйте localStorage для збереження налаштувань та історії між сесіями. Зробіть додаток таким, що встановлюється як PWA з офлайн-підтримкою та сповіщеннями. Додайте клавіатурні скорочення для швидкого керування таймером (старт/пауза/скидання). Включіть кілька варіантів тем з налаштовуваними кольорами та шрифтами. Додайте режим фокусування, який блокує відволікаючі фактори під час робочих інтервалів.

Інтерактивна вікторина на JavaScript з автоперевіркою та аналітикою

Створіть повноцінну вікторину з різними типами питань, таймером, системою балів, таблицею лідерів та детальною аналітикою результатів.

>_ Промпт
Розробіть комплексний додаток інтерактивної вікторини з використанням HTML5, CSS3 та JavaScript. Створіть захоплюючий інтерфейс користувача з плавними переходами між питаннями. Підтримайте кілька типів питань, включаючи множинний вибір, правда/хиба, відповідність та короткі відповіді з автоматичним оцінюванням. Реалізуйте налаштовувані таймери для кожного питання з візуальним зворотним відліком. Додайте детальне відстеження балів з нарахуванням очок залежно від складності та часу відповіді. Показуйте динамічний індикатор прогресу, що вказує відсоток завершення. Включіть режим перегляду для перегляду правильних/неправильних відповідей з поясненнями після завершення вікторини. Реалізуйте постійну таблицю лідерів за допомогою localStorage. Організуйте питання за категоріями з власними іконками та описами. Підтримайте кілька рівнів складності, що впливають на нарахування балів та ліміти часу. Згенеруйте детальний підсумок результатів з аналітикою продуктивності та пропозиціями щодо покращення. Додайте функцію соціального поширення результатів з налаштовуваними повідомленнями.

Колірний інструмент Pro: палітри, градієнти, WCAG та код CSS

Створіть професійний веб-інструмент для роботи з кольором. Генеруйте палітри та градієнти, конвертуйте формати, перевіряйте доступність за WCAG та отримуйте готові CSS/SCSS/SVG фрагменти коду.

>_ Промпт
Створіть професійний колірний інструмент за допомогою HTML5, CSS3 та JavaScript для дизайнерів та розробників. Створіть інтуїтивно зрозумілий інтерфейс з кількома методами вибору, включаючи піпетку, колірне колесо, повзунки та поля введення. Реалізуйте конвертацію в реальному часі між колірними форматами (RGB, RGBA, HSL, HSLA, HEX, CMYK) з функцією копіювання. Додайте генератор колірних палітр з опціями для комплементарних, аналогових, тріадичних, тетрадичних та монохроматичних схем. Включіть систему обраного з названими колекціями та опціями експорту. Реалізуйте візуалізацію правил колірної гармонії з інтерактивним налаштуванням. Створіть генератор градієнтів, що підтримує лінійні, радіальні та конічні градієнти з кількома колірними зупинками. Додайте перевірку доступності для відповідності WCAG з коефіцієнтами контрастності та симуляцією дальтонізму. Реалізуйте копіювання фрагментів коду CSS, SCSS та SVG в один клік. Включіть алгоритм іменування кольорів для пропонування назв вибраних кольорів. Підтримуйте експорт палітр у різні формати (Adobe ASE, JSON, CSS variables, SCSS).

Генератор надійних паролів на JavaScript з криптографічною стійкістю

Створіть потужний генератор паролів з оцінкою ентропії, історією та шифруванням. Ідеально для розробників.

>_ Промпт
Створіть комплексний генератор безпечних паролів, використовуючи HTML5, CSS3 та JavaScript з криптографічно стійкою випадковістю. Побудуйте інтуїтивний інтерфейс з попереднім переглядом пароля в реальному часі. Дозвольте налаштування довжини пароля з пресетами для різних рівнів безпеки. Включіть перемикачі для типів символів (верхній регістр, нижній регістр, цифри, спеціальні символи) з візуальними індикаторами. Реалізуйте розширений індикатор надійності, що показує біти ентропії та оціночний час зламу. Додайте кнопку копіювання в один клік з підтвердженням та автоматичним очищенням буфера обміну. Створіть функцію сховища паролів з шифрованим зберіганням у localStorage. Генеруйте кілька паролів одночасно з пакетними опціями. Ведіть історію паролів з мітками часу генерації. Обчислюйте та відображайте ентропію, використовуючи стандартні формули. Запропонуйте опції генерації паролів, що легко запам'ятовуються (на основі фраз, на основі шаблонів). Включіть функціонал експорту з опціями шифрування для списків паролів.

Інтерактивна погодна панель з OpenWeatherMap API

Створіть стильний погодний дашборд з 5-денним прогнозом, геолокацією та адаптивним інтерфейсом для всіх пристроїв.

>_ Промпт
Створіть комплексну погодну панель за допомогою HTML5, CSS3, JavaScript та OpenWeatherMap API. Розробіть візуально привабливий інтерфейс, що показує поточні погодні умови з відповідними іконками та змінює фон залежно від погоди/часу доби. Відображайте детальний 5-денний прогноз з розгорнутим погодинним розбивкою для кожного дня. Реалізуйте пошук локації з автодоповненням та історією, підтримуючи назви міст та координати. Додайте підтримку геолокації для автоматичного визначення місцезнаходження користувача. Включіть перемикачі одиниць температури (°C/°F) та форматів часу. Відображайте попередження про небезпечну погоду з пріоритетним виділенням. Показуйте детальні метеорологічні дані: швидкість/напрямок вітру, вологість, тиск, УФ-індекс та якість повітря за наявності. Включіть час сходу/заходу сонця з візуальними індикаторами. Створіть повністю адаптивний макет на CSS Grid, що пристосовується до всіх розмірів пристроїв з відповідною щільністю інформації.