Technical Specification: Base64 to Image & PDF Converter

Overview

A high-performance, single-file browser utility designed to help developers and designers decode Base64 strings into downloadable files. The application provides instant previewing and reliable conversion for various file types including images and PDFs.

Core Features

• Instant Decoding: Real-time conversion logic using JavaScript Blob and URL.createObjectURL APIs.
• Smart MIME Detection: Automatically parses Data URI headers to determine file type; provides fallback options for raw Base64 strings.
• Responsive Preview Engine: Renders image previews directly in the browser; provides specialized PDF download handlers.
• Security-First Architecture: Zero server-side interaction. No data leaves the user's browser.
• Clean Interaction: Clear "Copy to Clipboard" and "Download" actions with visual success states.

UI/UX Design

• Layout: Centered, single-column interface.
  • Header: Simple title and one-line functional description.
  • Input Area: Large, resizable textarea with monospaced font for pasting Base64 strings.
  • Control Bar: Primary 'Convert' button (Primary Blue) and 'Clear' button (Neutral Ghost).
  • Results Area: A dynamic card that appears after conversion, featuring a thumbnail/icon, file name info, and a 'Download File' button.
• Aesthetics: Vibrant light-mode only. Use of #F9FAFB for background, #FFFFFF for input cards, and #2563EB as the primary interaction color.
• Transitions: Smooth fade-in/out animations when the results card is generated.

Technical Implementation Requirements

• Architecture: One single .html file containing embedded CSS and JS.
• Storage Constraint: STRICTLY NO localStorage, sessionStorage, or cookies. All input state must be managed via standard JavaScript variables.
• Security: Use Blob and URL.createObjectURL() for downloading. Prevent XSS by sanitizing inputs when displaying data.
• Sandbox Compatibility: Ensure no scripts attempt to access parent windows, cookies, or restricted browser storage APIs.
• Error Handling: Implement a custom 'Invalid Base64' modal/notification within the UI rather than using browser alert() calls.

Responsive Breakpoints

• Mobile: Textarea fills width with 16px padding. Action buttons stack vertically.
• Desktop: Container max-width of 800px. Textarea includes auto-resize or fixed large height for usability.