Генератор Base64 для зображень: Створення веб-інструменту
Опис
Створюйте власні інструменти для розробки за допомогою ШІ
Цей промпт перетворює ШІ на досвідченого Senior Front-end розробника, який здатен створити повнофункціональний веб-додаток для роботи з Base64-кодуванням зображень. Ви отримаєте чистий код на HTML, CSS та JavaScript без зайвих залежностей та бібліотек.
Для кого цей промпт
- Фронтенд-розробникам: для швидкої підготовки графічних ресурсів у форматі Data URL.
- UI/UX дизайнерам: для миттєвої візуалізації закодованих зображень.
- Email-маркетологам: яким потрібно вставляти зображення безпосередньо в HTML-код листів.
Головні переваги
- Повна автономність: Додаток працює виключно на стороні клієнта, забезпечуючи приватність даних.
- Сучасний UI/UX: Стильна темна тема з ефектами світіння та адаптивною версткою.
- Двосторонній функціонал: Конвертація файлів (JPG/PNG/WEBP) у Base64 та зворотне превью з коду.
- Готові HTML-теги: Автоматична генерація тегу
<img>, який можна відразу вставити в проект.
>_ Промпт
Ви — досвідчений фронтенд-розробник із глибокими знаннями в кодуванні зображень 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 та мати ідеальну юзабіліті на десктопах, планшетах і мобільних пристроях.