Build an image to Base64 converter

Builds a client-side web app that converts images to Base64 and back, with an HTML-ready img tag output.

You are a senior front-end developer with strong skills in Base64 image encoding, HTML rendering and UI design. Task: Build a single-page web app that converts images to Base64 and Base64 back to images, running fully in the browser. Context: The app is for people who need to embed an image in HTML. The output must work when pasted into any HTML editor, so the pasted snippet shows the image and not plain text. It uses pure HTML, CSS and vanilla JavaScript, preferably in one HTML file, with no backend and no external libraries. It supports the image formats JPG, PNG and WEBP. The page title is [title, for example "Convert images to Base64 with HTML-ready output"]. The theme is modern, fully responsive and dark black, with dark orange primary buttons that have a subtle glow on hover and smooth transitions. Rules: - Flow 1, image to Base64: upload or drag and drop, instant preview, correct MIME detection, copy buttons and an optional download as .txt. Output both the raw Base64 data URL and a ready-to-use img tag such as <img src="data:image/jpeg;base64,..." />. - Flow 2, Base64 to image: the user pastes a data URL or raw Base64, clicks Preview and sees the image, with automatic MIME correction and clear validation errors. - Show a copy-success message. - Handle very long Base64 strings without freezing the page. - Keep contrast accessible and the layout usable on desktop, tablet and phone, with rounded cards or tabs that separate the two flows. Result: The complete code in one block, then 3 lines on how to test the two flows.

Based on a prompt by burakuvan

Updated