Skip to main content
Prompts Base64 Image Converter HTML App Generator

model coding user risk: low

Base64 Image Converter HTML App Generator

Create a single-page, fully client-side web application using pure HTML, CSS, and vanilla JavaScript that converts images to Base64 data URLs and ready-to-use HTML img tags, and pr…

PROMPT 

You are a senior front-end web developer with strong expertise in Base64 image encoding, HTML rendering, and UI/UX design. Create a single-page, fully client-side web application using pure HTML, CSS, and vanilla JavaScript only (preferably in one HTML file, no backend, no external libraries) with a modern, fully responsive, dark black theme. The site must correctly convert images (JPG/PNG/WEBP) to Base64 and ensure the output works in any HTML editor preview, meaning the app must provide both the raw Base64 Data URL and a ready-to-use HTML <img> tag output (e.g. <img src="data:image/jpeg;base64,..." />) so that pasting the HTML snippet into an editor visually renders the image instead of showing plain text. Include two main flows: Image to Base64 (upload or drag-and-drop image, instant in-app preview, correct MIME detection, copy buttons, optional download as .txt) and Base64 to Image Preview (users paste a Data URL or raw Base64, click a Preview button, and see the image rendered, with automatic MIME correction and clear validation errors). The header must display the title “Convert images ↔ Base64 with HTML-ready output”, and directly underneath it show “prompts.chat” in bold, phosphor green color, linking to https://promts.chat. The footer must replace any default text with “2026” in bold, phosphor green, linking to https://promts.chat . The overall UI should be dark black, while all primary buttons use a dark orange color with subtle glow/hover effects, smooth transitions, rounded cards, clear section separation (tabs or cards), accessible contrast, copy-success feedback, handling of very long Base64 strings without freezing, and perfect usability across desktop, tablet, and mobile.

ROLES & RULES

Role assignments

  • You are a senior front-end web developer with strong expertise in Base64 image encoding, HTML rendering, and UI/UX design.
  1. Create a single-page, fully client-side web application using pure HTML, CSS, and vanilla JavaScript only.
  2. Preferably in one HTML file, no backend, no external libraries.
  3. Provide both the raw Base64 Data URL and a ready-to-use HTML <img> tag output.
  4. Include two main flows: Image to Base64 and Base64 to Image Preview.
  5. Header must display the title “Convert images ↔ Base64 with HTML-ready output” and “prompts.chat” in bold, phosphor green color, linking to https://promts.chat.
  6. Footer must replace any default text with “2026” in bold, phosphor green, linking to https://promts.chat.
  7. Use dark black theme with dark orange primary buttons, subtle glow/hover effects, smooth transitions, rounded cards, clear section separation, accessible contrast, copy-success feedback, handling of very long Base64 strings without freezing, perfect usability across devices.

EXPECTED OUTPUT

Format
html
Constraints
  • single HTML file
  • pure HTML/CSS/vanilla JS only
  • no external libraries
  • modern responsive dark black theme
  • dark orange primary buttons
  • image to Base64 and Base64 to image flows
  • copy buttons
  • in-app preview
  • HTML img tag output
  • header and footer with specific links

SUCCESS CRITERIA

  • Convert images (JPG/PNG/WEBP) to Base64 correctly with MIME detection.
  • Generate ready-to-use HTML <img> tag that renders in editors.
  • Implement upload/drag-and-drop for Image to Base64 with preview and copy/download.
  • Implement paste Data URL/raw Base64 preview with validation.
  • Ensure modern responsive dark black UI with specified colors and effects.
  • Include exact header and footer branding.

FAILURE MODES

  • Using backend or external libraries.
  • Freezing on long Base64 strings.
  • Incorrect MIME detection or invalid outputs.
  • Poor responsiveness on mobile/tablet.
  • Missing previews, copy buttons, or error handling.
  • Inadequate contrast or accessibility.

CAVEATS

Missing context
  • Exact color palette definitions (hex codes).
  • Maximum supported image dimensions or file sizes.
  • Detailed accessibility requirements (e.g., ARIA labels).
Ambiguities
  • Unspecified exact hex values for 'phosphor green' and 'dark orange' colors.
  • Vague on exact implementation for 'handling of very long Base64 strings without freezing'.

QUALITY

OVERALL
0.80
CLARITY
0.90
SPECIFICITY
0.95
REUSABILITY
0.20
COMPLETENESS
0.95

IMPROVEMENT SUGGESTIONS

  • Provide hex codes for colors: e.g., phosphor green (#39FF14), dark orange (#E65C00).
  • Add parameters for customization like title, branding URL to make reusable as template.
  • Specify output format for the single HTML file (e.g., minified or readable).
  • Include unit tests or validation criteria for MIME detection and responsiveness.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR MODEL