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.
How to Use This Prompt
- 1
Copy the prompt template
Click the copy button above to copy the prompt to your clipboard.
- 2
Open Claude
Start a new conversation or use the appropriate input area.
- 3
Customize the placeholders
Replace all text in [brackets] with your specific context and requirements.
- 4
Submit and iterate
Review the response and ask follow-up questions to refine the output.
Tips for Better Results
Prompt Variations
Frequently Asked Questions
What makes this Base64 Promt effective?
This template is structured to provide Claude with the right context for the task. It includes placeholders for your project details, clear requirements, and expected output format, helping you get more accurate and useful responses.
How do I customize this prompt for my needs?
Replace all text in [brackets] with your specific information. Include relevant code snippets, describe your tech stack, and specify any constraints or requirements unique to your situation. The more context you provide, the better the results.
Can I save this prompt for quick access?
Yes! Use Retext to save this prompt as a text snippet. Create a trigger like ';prompt' and paste this template as the expansion. Then you can quickly access it anywhere by typing your trigger.
Save This Prompt with Retext
Never copy-paste this prompt again. Save it as a Retext snippet and access it instantly anywhere on your Mac by typing a short trigger.