Complete AI Training
Sign inGet started

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.