Build a Base64 Encoder/Decoder with AI

Build a single-page Base64 Encoder/Decoder as a static HTML file with embedded CSS and JavaScript. No frameworks or dependencies. LAYOUT: - Dark theme (background #0d1117, text #c9d1d9) - Header: "Base64 Encoder/Decoder" title with subtitle "Encode text and files to Base64, or decode Base64 back to original" - Two mode tabs at the top: "Text Mode" and "File Mode" - Options bar below tabs with toggle switches - Two large textareas stacked vertically with action buttons between them - Stats bar at the bottom TEXT MODE: - Top textarea (input): large monospace textarea, 200px min height - Placeholder: "Paste text or Base64 to encode/decode..." - Label: "Input" with character count and byte size on the right - Between textareas, a row of buttons: - "Encode" (arrow pointing down) — converts input text to Base64 output - "Decode" (arrow pointing up) — converts Base64 input to decoded text output - "Swap" (double arrow) — swaps the contents of input and output - "Clear" (X) — clears both textareas - Bottom textarea (output): large monospace textarea, 200px min height, read-only - Label: "Output" with character count and byte size on the right - "Copy" button in the top-right corner of the textarea - Auto-detect mode: when user types/pastes in the input, attempt to detect if it's valid Base64 (matches ^[A-Za-z0-9+/=\s]+$ and decodes without errors). If yes, show a subtle hint: "Looks like Base64 — click Decode" in blue below the input. OPTIONS BAR: - Toggle switch: "URL-Safe Base64" — when enabled, uses - instead of + and _ instead of /, and strips = padding - Label explains: "Uses -_ instead of +/ (RFC 4648 Section 5)" - Toggle switch: "Line breaks every 76 chars" — wraps output at 76 characters per MIME standard - Encoding selector dropdown: UTF-8 (default), ASCII, ISO-8859-1 - Affects how text bytes are interpreted before encoding FILE MODE: - Drag-and-drop zone: 250px tall dashed border area - Text: "Drop a file here or click to browse" - Accepts any file type - Shows file icon, name, size, and MIME type after dropping - Or a file input button: "Choose File" - After file is dropped/selected: - Show file info: name, size (formatted: KB/MB), MIME type - "Encode File" button - Output textarea shows the Base64 string - If the file is an image (image/*), show an additional output box: - Data URI string: data:image/png;base64,iVBORw0KGgo... - "Copy Data URI" button - Small preview of the image rendered from the data URI (max 200px) - "Download Decoded" button that reverses the process: paste Base64 in input, click download, get the original file back - Max file size: 10MB (show error for larger files) DECODE FILE MODE: - In file mode, add a separate section: "Decode Base64 to File" - Textarea to paste Base64 string - Filename input field - MIME type dropdown or text input (auto-detect from data URI if pasted) - "Download as File" button that creates a blob and triggers download STATS BAR: - Shows for current operation: - Input size in bytes - Output size in bytes - Size increase percentage (Base64 is ~33% larger) - Encoding time in milliseconds ERROR HANDLING: - If decode fails (invalid Base64): show red error message below output "Invalid Base64: contains characters outside the Base64 alphabet" or "Invalid Base64: incorrect padding" - If file too large: "File exceeds 10MB limit" - If encoding selector causes character loss: warning "Some characters may not be representable in ASCII" KEYBOARD SHORTCUTS: - Ctrl+Enter: Encode - Ctrl+Shift+Enter: Decode - Ctrl+Shift+S: Swap input/output - Ctrl+Shift+X: Clear all VISUAL DETAILS: - Textareas have a subtle inner shadow and monospace font - Buttons have hover states and active press states - Toggle switches animate smoothly - Copy button shows "Copied!" tooltip for 1.5 seconds Make it responsive: on mobile, textareas take full width, buttons stack vertically, drag-drop zone fills width. Options bar wraps to two lines.