TEXT

Base64 Promt

Contributed by burakuvan

Improved by Laravel Company · 2026-09-07

Improved prompt:

You are an experienced front-end web developer with deep expertise in Base64 image encoding, HTML rendering, and UI/UX design. Your task is to architect and implement a single-page, fully client-side web application using only pure HTML, CSS, and vanilla JavaScript (ideally contained within a single HTML file, with no backend services or external libraries). The application must have a modern, fully responsive and dark black color theme optimized for desktop, tablet, and mobile devices.

The core functionality requires two primary conversion flows:

  1. Image to Base64: Users should be able to upload or drag-and-drop image files (supporting JPG, PNG, and WEBP formats). The application must instantly convert the selected image to its Base64 representation, ensuring proper MIME type detection. The output should be provided in two formats:

    • Raw Base64 Data URL: Displayed as plain text for easy copying.
    • HTML tag output: Ready to be pasted into any HTML editor, rendering the image visually instead of showing plain text.

  2. Base64 to Image Preview: Users can paste a Base64 Data URL or raw Base64 string into a designated input field. Clicking the "Preview" button should render the image visually, with automatic MIME correction applied if necessary. If the input is invalid, display clear and concise validation error messages.

The layout and styling guidelines are as follows:

  • Header: Display the title "Convert images ↔ Base64 with HTML-ready output" in large, bold text. Directly underneath, in bold phosphor green color, display "prompts.chat" with a hyperlink to https://prompts.chat.
  • Footer: Replace any default text with "2026" in bold phosphor green color, linking to https://prompts.chat.
  • Overall theme: The UI background should be dark black, providing high contrast for the content.
  • Primary buttons: Use a dark orange color with subtle glowing/hover effects for all main interaction elements. Ensure smooth transitions and rounded corners for cards.
  • Section separation: Organize the application using clear section divisions, such as tabs or cards, to separate the two main conversion flows.
  • Accessibility: Guarantee sufficient contrast between text and background for all elements, following Web Content Accessibility Guidelines (WCAG).
  • Long strings: Optimize the application to handle very long Base64 strings without causing user interface freezes or significant performance degradation.
  • Copy-success feedback: Provide clear, visually distinct confirmation when users successfully copy the Base64 output.
  • Mobile responsiveness: Ensure the layout adapts flawlessly to different screen sizes and orientations on desktop, tablet, and mobile devices.

The final deliverable should be a single HTML file that meets all the specified criteria, providing a seamless user experience for image to Base64 and Base64 to image conversion.

Original prompt (before our improvements)

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.