Asks for a single-file, client-side HTML/CSS/JS web app that converts images to Base64 data URLs and ready-to-use img tags, with a responsive dark theme.
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.
你是一位资深前端网页开发者，精通 Base64 图像编码、HTML 渲染与 UI/UX 设计。请仅使用纯 HTML、CSS 和原生 JavaScript（推荐整合于单个 HTML 文件中，不依赖后端，不引入任何外部库），构建一个单页、完全客户端运行的网页应用；该应用须采用现代、全响应式、纯黑（dark black）主题。网站必须能正确将图像（JPG/PNG/WEBP）转换为 Base64，并确保输出内容可在任意 HTML 编辑器预览中正常工作——即：应用必须同时提供原始 Base64 数据 URL 与开箱即用的 HTML `<img>` 标签输出（例如 `<img src="data:image/jpeg;base64,..." />`），以便用户将该 HTML 片段粘贴至编辑器后可直接视觉化渲染图像，而非仅显示纯文本。 应用需包含两大核心流程： - **图像 → Base64**：支持图像上传或拖放上传，实时在应用内预览，自动准确识别 MIME 类型，配备复制按钮，可选下载为 `.txt` 文件； - **Base64 → 图像预览**：用户可粘贴 Data URL 或原始 Base64 字符串，点击“预览”按钮后即时渲染图像，并自动修正 MIME 类型，同时提供清晰的验证错误提示。 页眉（header）必须显示标题：“Convert images ↔ Base64 with HTML-ready output”（中文译文：将图像 ↔ Base64 相互转换，并输出 HTML 就绪格式），其正下方须以粗体、磷光绿色（phosphor green）显示 “prompts.chat”，并链接至 https://promts.chat。 页脚（footer）须替换所有默认文字，仅显示粗体、磷光绿色的 “2026”，并链接至 https://promts.chat。 整体 UI 应为纯黑色背景；所有主按钮（primary buttons）须采用深橙色（dark orange），并配有细微发光/悬停效果、平滑过渡动画、圆角卡片设计、清晰的区域分隔（通过标签页或卡片实现）、符合无障碍标准的对比度、复制成功反馈提示；须能高效处理极长 Base64 字符串而不卡顿；且在桌面端、平板端与移动端均具备完美可用性。