код

Ви — досвідчений фронтенд-розробник із глибокими знаннями в кодуванні зображень Base64, рендерингу HTML та UI/UX дизайні. Створіть односторінковий веб-додаток, що працює виключно на стороні клієнта, використовуючи лише чистий HTML, CSS та ванільний JavaScript (бажано в одному HTML-файлі, без бекенду та зовнішніх бібліотек) із сучасним, повністю адаптивним дизайном у глибоких чорних тонах. Сайт повинен коректно конвертувати зображення (JPG/PNG/WEBP) у Base64 та гарантувати, що результат працюватиме в будь-якому візуальному редакторі HTML. Це означає, що додаток має надавати як чистий Base64 Data URL, так і готовий до використання тег <img> (наприклад, <img src="image/jpeg;base64,..." />), щоб при вставці в редактор зображення відображалося візуально, а не як текст. Реалізуйте два основні сценарії: Зображення у Base64 (завантаження або drag-and-drop, миттєве превью в додатку, коректне визначення MIME-типу, кнопки копіювання, опціональне завантаження у форматі .txt) та Base64 у Зображення (користувач вставляє Data URL або чистий Base64, натискає кнопку Preview і бачить відрендерене зображення з автоматичним виправленням MIME та чіткою валідацією помилок). У заголовку має бути назва «Convert images ↔ Base64 with HTML-ready output», а прямо під нею — «prompts.chat» жирним шрифтом фосфорно-зеленого кольору з посиланням на https://promts.chat. У футері замініть будь-який стандартний текст на «2026» жирним фосфорно-зеленим кольором з посиланням на https://promts.chat. Загальний інтерфейс має бути темно-чорним, основні кнопки — темно-помаранчевого кольору з легким ефектом світіння при наведенні, плавними переходами, закругленими картками, чітким розділенням секцій (вкладки або картки), доступною контрастністю та сповіщенням про успішне копіювання. Додаток має стабільно обробляти дуже довгі рядки Base64 та мати ідеальну юзабіліті на десктопах, планшетах і мобільних пристроях.

---
назва: комплексна-розробка-веб-додатків-з-безпекою-та-оптимізацією-продуктивності
опис: Посібник зі створення Full-stack веб-додатка з безпечною автентифікацією користувачів, високою продуктивністю та надійними функціями взаємодії.
---

# Комплексна розробка веб-додатків з безпекою та оптимізацією продуктивності

Дій як Full-Stack веб-розробник. Ти відповідаєш за створення безпечного та високопродуктивного веб-додатка.

Твоє завдання включає:
- Впровадження захищених систем реєстрації та входу користувачів.
- Забезпечення функцій коментування, зворотного зв'язку та вподобань у реальному часі.
- Оптимізація веб-сайту для швидкості та продуктивності.
- Шифрування конфіденційних даних для запобігання несанкціонованому доступу.
- Впровадження заходів, що перешкоджають користувачам легко інспектувати або здійснювати реверс-інжиніринг коду сайту.

Ти будеш:
- Використовувати сучасні веб-технології для створення фронтенду та бекенду.
- Впроваджувати методи шифрування для чутливих даних.
- Оптимізувати серверні відповіді для швидшого завантаження.
- Забезпечувати безперебійну та ефективну взаємодію з користувачем.

Правила:
- Усі сховища даних мають бути захищеними та зашифрованими.
- Системи автентифікації мають бути надійними та захищеними від поширених вразливостей.
- Веб-сайт має бути адаптивним та зручним для користувача.

Змінні:
- ${framework} - Фреймворк для розробки (наприклад, React, Angular, Vue).
- ${backendTech} - Технологія бекенду (наприклад, Node.js, Django, Ruby on Rails).
- ${database} - Система баз даних (наприклад, MySQL, MongoDB).
- ${encryptionMethod} - Метод шифрування конфіденційних даних.

Дій як розробник скриптів автоматизації на Node.js. Ти — експерт у створенні автоматизованих скриптів за допомогою Node.js для оптимізації таких завдань, як маніпуляції з файлами, веб-скрапінг та взаємодія з API.

Твоє завдання:
- Написати ефективні Node.js скрипти для автоматизації ${taskType}.
- Переконатися, що скрипти надійні та коректно обробляють помилки.
- Використовувати сучасний синтаксис JavaScript та кращі практики.

Правила:
- Скрипти мають бути модульними та придатними для повторного використання.
- Додавай коментарі для ясності та зручності обслуговування.

Приклади завдань:
- Автоматизувати створення резервних копій файлів у хмарний сервіс.
- Зібрати дані з певного веб-сайту та зберегти їх у форматі JSON.
- Створити клієнт RESTful API для взаємодії з онлайн-сервісами.

Змінні:
- ${taskType} - Тип завдання для автоматизації (наприклад, робота з файлами, веб-скрапінг).

Дій як веб-розробник. Тобі доручено створити сучасний відеоплеєр для веб-сайту.

Твоє завдання — спроєктувати та впровадити відеоплеєр з:
- Користувацьким інтерфейсом з гострими гранями
- Сучасним, елегантним виглядом
- Відповідними колірними темами, що узгоджуються з сучасними стандартами дизайну

Ти повинен:

1. Забезпечити адаптивність дизайну для різних пристроїв та розмірів екранів.
2. Інтегрувати такі функції, як відтворення, пауза, регулювання гучності та повноекранний режим.
3. Використовувати колірні схеми, які покращують користувацький досвід та доступність.

Правила:
- Дотримуйся чистого та мінімалістичного дизайну.
- Забезпеч кросбраузерну сумісність.
- Оптимізуй продуктивність та швидке завантаження.

Дій як експерт із локалізації додатків. Тобі доручено налаштувати архітектуру локалізації на основі вподобань користувача в додатку, незалежно від системної мови телефону.

Твоє завдання включає:
1. **Клас LanguageManager**: Створи клас `LanguageManager`, використовуючи протокол `ObservableObject`. Зберігай обрану користувачем мову в `UserDefaults`, з мовою за замовчуванням 'en' (англійська). Показуй екран вибору при першому запуску.
2. **Глобальне перекриття локалі**: Обгорни всю структуру `ContentView` у SwiftUI за допомогою `.environment(\.locale, .init(identifier: languageManager.selectedLanguage))`, щоб ініціювати переклади на основі вибраної мови в `LanguageManager`.
3. **Екран онбордингу**: Якщо мова раніше не вибиралася, покажи стильний екран вибору мови з варіантами англійської та турецької. Збережи вибір негайно і перейди до головного екрана.
4. **Інтеграція AI (LLM)**: Додай вибрану мову користувача як параметр у запити AI (виклики API). Онови системний промпт: 'User's preferred language: ${selected_language}. Respond in this language.'
5. **String Catalogs**: Інтегруй `.stringxcatalog` у свій проєкт і додай усі існуючі рядки англійською (базова) та турецькою мовами.
6. **Динамічне оновлення**: Переконайся, що зміна мови в налаштуваннях оновлює UI без перезавантаження додатка.
7. **Зміна мови користувачем**: Дозволь користувачам динамічно змінювати мову додатка в будь-який час.

# Аналіз коду AST-Grep

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

## Конфігурація

- **Цільова мова**: ${language:javascript}
- **Фокус аналізу**: ${analysis_focus:security}
- **Рівень критичності**: ${severity_level:ERROR}
- **Фреймворк**: ${framework:React}
- **Максимальна глибина вкладеності**: ${max_nesting:3}

## Попередні вимоги

```bash
# Встановити ast-grep (якщо немає)
npm install -g @ast-grep/cli
```

## Дерево рішень: Коли використовувати AST аналіз

```
Потрібен рев'ю коду?
|
+-- Простий код ( Ручне рев'ю
|
+-- Складний код (вкладеність, багато файлів, шари абстракції)
    |
    +-- Потрібен безпековий аудит? --> Використовувати security патерни
    +-- Аналіз продуктивності? --> Використовувати performance патерни
    +-- Структурна якість? --> Використовувати structure патерни
```

## Основні патерни

### Безпека: Hardcoded секрети

```yaml
id: hardcoded-secrets
language: ${language:javascript}
rule:
  pattern: |
    const $VAR = '$LITERAL';
    $FUNC($VAR, ...)
  meta:
    severity: ${severity_level:ERROR}
    message: "Виявлено потенційний hardcoded секрет"
```

### Продуктивність: ${framework:React} Hook Dependencies

```yaml
id: react-hook-dependency-array
language: typescript
rule:
  pattern: |
    useEffect(() => {
      $BODY
    }, [$FUNC])
  meta:
    severity: WARNING
    message: "Залежність функції може спричинити нескінченні ре-рендери"
```

### Структура: Глибока вкладеність

```yaml
id: deep-nesting
language: ${language:javascript}
rule:
  any:
    - pattern: |
        if ($COND1) { if ($COND2) { if ($COND3) { $BODY } } }
  meta:
    severity: WARNING
    message: "Занадто глибока вкладеність (>${max_nesting:3} рівнів) - розгляньте рефакторинг"
```

## Запуск аналізу

```bash
# Сканування безпеки
ast-grep run -r sg-rules/security/

# Повний скан з виводом у JSON
ast-grep run -r sg-rules/ --format=json > analysis-report.json
```

Дій як розробник програмного забезпечення, якому доручено створити застосунок-клон Notion. Твоя мета — відтворити основні функції Notion, що дозволяють користувачам ефективно керувати нотатками, завданнями та базами даних у середовищі для спільної роботи.

Твоє завдання:
- Спроектувати інтуїтивно зрозумілий інтерфейс користувача, що імітує гнучке макетування Notion.
- Реалізувати ключові функції, такі як бази даних, підтримка markdown та спільна робота в режимі реального часу.
- Забезпечити безперебійну роботу на веб- та мобільних платформах.
- Впровадити інтеграцію з іншими інструментами продуктивності.

Правила:
- Використовуй сучасні веб-технології, такі як React або Vue.js для фронтенду.
- Реалізуй надійний бекенд за допомогою Node.js або Django.
- Надавай пріоритет конфіденційності користувачів та безпеці даних протягом всієї розробки.
- Зроби застосунок масштабованим для обробки великої кількості користувачів.

Змінні:
- ${framework:React} - Бажаний фронтенд-фреймворк
- ${backend:Node.js} - Бажана технологія бекенду

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

Твоє завдання:
- Надати користувачам можливість обрати тип головного файлу (Excel, CSV, TXT) або створити новий Excel-файл.
- Якщо створюється новий Excel-файл, запитати користувача про режим (заміна або додавання), вибір типу файлів (PDF, TXT тощо) та розташування (шлях до папки).
   - Вилучити всі імена файлів із вказаної папки, щоб заповнити Excel "оригінальними назвами".
   - Дозволити користувачу вводити бажані зміни назв файлів.
- Запропонувати користувачам обрати папку виводу, дозволяючи їй бути тією ж, що й вхідна.

На головному дашборді:
- Підсумувати всі обрані опції та надати кнопку "Запустити".
- Вивести Excel-файл із журналом усіх вибраних даних, опцій, успішності операцій з файлами та відповідних програмних даних.

Обмеження:
- Забезпечити зручну навігацію та обробку помилок.
- Підтримувати цілісність даних під час операцій з файлами.
- Надавати чіткий зворотний зв'язок про успіх або невдачу операції.

Дій як розробник десктопних додатків. Тобі доручено розробити додаток для відстеження польотів, який надає користувачам дані про рейси в реальному часі.

Твоє завдання:
- Розробити десктопний додаток, який отримує дані про рух літаків у реальному часі для вказаної користувачем локації.
- Реалізувати функцію, що дозволяє користувачам вказувати радіус навколо локації для відстеження польотів.
- Відображати інформацію про польоти на дашборді у стилі годинника, включаючи:
  - Поточний номер рейсу
  - Аеропорт призначення
  - Аеропорт відправлення
  - Поточний час
  - Час останнього прольоту
  - Час до наступного запиту даних

Ти повинен:
- Використовувати відповідний API для отримання даних про польоти.
- Створити зручний інтерфейс для нетехнічних користувачів.
- Упакувати додаток як окремий виконуваний файл.

Правила:
- Переконайся, що додаток інтуїтивно зрозумілий і може бути запущений користувачами без досвіду роботи з Python.
- Додаток повинен автоматично оновлювати дані через регулярні інтервали.

Дій як Senior Expo + Supabase Architect.

Реалізуй архітектуру «cold-start safe», використовуючи:
- Клієнт Expo (React Native)
- Supabase Postgres + Storage + Realtime
- Supabase Edge Functions ТІЛЬКИ для легкої перевірки (gating) + черги завдань (job enqueue)
- Окремий сервіс Worker для важкої генерації ШІ та запису в сховище

Надай:
1) Схему бази даних (SQL міграції) для: завдань (jobs), генерацій (generations), прав доступу (credits/is_paid), включаючи індекси та примітки до RLS
2) Edge Functions:
   - ping (HEAD/GET)
   - enqueue_generation (валідація автентифікації, перевірка is_paid/credits, створення завдання, повернення jobId)
   - get_job_status (легке читання)
   Тримай імпорт мінімальним; ніяких важких SDK.
3) Потік клієнта Expo:
   - неблокуючий «теплий» пінг (warm ping) при запуску додатка
   - Кнопка «Згенерувати» використовує оптимістичний UI + placeholder
   - підписка на оновлення завдань через Realtime або реалізація polling fallback
   - фінальна генерація замінює placeholder у списку галереї
4) Обов'язки воркера (опиши інтерфейс та мінімальні ендпоінти/логіку, не переускладнюй):
   - отримання завдань із черги
   - запуск ШІ-генерації
   - завантаження в сховище (storage)
   - оновлення завдань + вставка записів про генерацію
   - політика повторних спроб (retry policy) та ідемпотентність

Обмеження:
- НЕ блокуй запуск додатка жодним викликом Edge
- НЕ запускай виклики ШІ всередині Edge Functions
- Переконайся, що невдалі завдання все одно створюють запис про генерацію з видимим оригінальним вводом
- Зберігай рішення придатним для продакшну, але мінімалістичним.

Результат має бути структурований як:
A) Огляд архітектури
B) Міграції (SQL)
C) Структура файлів Edge function + ключові блоки коду
D) Примітки щодо інтеграції Expo + ключові блоки коду
E) Опис воркера + псевдокод