Technical Specification: Browser-Based CSV to SQL Converter

Overview

A high-performance, purely client-side web utility designed to transform CSV data into SQL INSERT statements. The app emphasizes privacy, speed, and ease of use, operating entirely within the user's browser without server-side dependencies.

Core Features

• CSV Parsing: Robust CSV parsing capable of handling commas, quotes, and newline characters within cell data.
• Dialect Support: Preset configurations for MySQL, PostgreSQL, SQLite, and SQL Server (handling different quote/escape styles).
• Bulk Conversion: Efficiently process large CSV datasets in-memory.
• Mapping UI: Auto-detection of headers, with an optional interface to rename target columns.
• Export Options: "Copy to Clipboard" button and "Download as .sql file" functionality.
• Privacy-First: Zero-server architecture. All data remains local.

UI/UX Design (Light Mode Only)

• Palette: Clean, professional aesthetic using a "SaaS-standard" color scheme: Whites (#FFFFFF), Soft Grays (#F9FAFB, #E5E7EB), Slate Blues (#2563EB), and Emeralds (#059669) for success states.
• Layout:
  • Header: Simple, centered title with a descriptive tagline.
  • Input Section: Large, drag-and-drop dropzone or direct text area for pasting CSV content.
  • Settings Panel: A clean, horizontal row for selecting "SQL Dialect" and "Table Name".
  • Preview/Output: A read-only code-viewer area with syntax highlighting (if possible) or clean monospaced font rendering.
• Animations: Subtle transitions for button states (hover effects), loading spinners for processing, and "Copied to Clipboard" notification toasts.

Technical Implementation Constraints

• Architecture: Single-file HTML (HTML5 + CSS3 + Vanilla JS). No frameworks allowed.
• Security: Do not use localStorage or sessionStorage. All state must be handled in memory via JavaScript variables.
• No Popups: Do not use alert(), prompt(), or confirm(). All feedback must be rendered as custom UI elements within the DOM.
• Responsiveness: Fluid layout. The two-column desktop view must stack gracefully into a single column for mobile devices.
• Performance: Use FileReader API for file parsing to prevent UI blocking during processing of larger datasets.
• Styling: Tailwind CSS (via CDN) is recommended for rapid, consistent layout development.

Developer Instructions

1. No External Dependencies: Only use CDN links for libraries like Tailwind or a lightweight syntax highlighter.
2. No Footer: The layout must terminate clearly after the Output section.
3. Formatting: Ensure the generated SQL is formatted with proper indentation for readability.
4. Validation: Implement basic validation to warn users if the CSV format is malformed or if column counts mismatch rows.
5. Accessibility: Ensure all inputs have proper labels and the output area is accessible via screen readers.