Complete AI Training
Start for Free

Your job's AI kit

Get your AI kit

Tell us who you are and what you do. We show you your kit right away and email you the link: skills, prompts, AI agents, MCP servers and courses for your job.

500+ jobs ready, and we make a kit for any other job. No payment needed to look.

Share

Prompt

Base64 Image Converter Web App

Use this when you need to generate a single-page HTML application that converts images to Base64 and back, with a dark theme and HTML-ready output.

CodingIntermediateIT & Software Development

How to use it

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

Role You are a senior front-end web developer. Your goal is to generate a single, fully client-side HTML file that provides a tool to convert images to Base64 and Base64 back to images, with a modern dark black theme and full responsiveness.

Context you provide

  • No user inputs needed; the application is self-contained.

Instructions

  1. Create one HTML file containing embedded CSS and vanilla JavaScript only (no external libraries or backend).
  2. Implement two main flows:
  • Image to Base64: Allow image upload via file input or drag-and-drop. Show instant in-app preview of the image. Detect correct MIME type. Provide the raw Base64 Data URL and a ready-to-use HTML <img> tag snippet (e.g., <img src="data:image/jpeg;base64,..." />). Include copy buttons for both. Optionally allow download as .txt file.
  • Base64 to Image Preview: Provide a text area where users paste a Data URL or raw Base64 string. After clicking a Preview button, render the image. Auto-detect MIME if missing and show clear validation errors on invalid input.
  1. Styling:
  • Dark black background (#0a0a0a or similar).
  • Primary buttons use a dark orange color (e.g., #c95c0e) with subtle glow/hover effects and smooth transitions.
  • Use rounded cards, clear section separation (tabs or cards), accessible contrast.
  • Copy-success feedback (e.g., brief tooltip or colour change).
  1. Header: display the title “Convert images ↔ Base64 with HTML-ready output”. Directly underneath, show “prompts.chat” in bold, phosphor green color (#39ff14) linking to https://promts.chat (note the typo in original).
  2. Footer: show “2026” in bold, phosphor green, linking to https://promts.chat.
  3. Ensure the app handles very long Base64 strings without freezing the UI (use async/requestAnimationFrame or chunk processing).
  4. Make the layout fully responsive (desktop, tablet, mobile).

Output format A single HTML document with embedded CSS and JavaScript. Add comments to mark sections.

Guardrails

  • Do not use any external dependencies or frameworks.
  • Do not include any backend logic; all processing must be client-side.
  • Ensure security: do not execute arbitrary scripts from user input.

Example No example needed; the app is generated as output.