JSON to CSV Converter Landing Page Creation Prompt
Create a simple but professional-looking landing page that converts JSON files to CSV format. The page should offer a drag-and-drop interface and work entirely in the browser without requiring server-side processing.
Specific Requirements
User Interface:
A clean, minimalist design with a professional color scheme
A clear header/title at the top
A prominent drag-and-drop zone that accepts JSON files
A "select file" option for users who prefer clicking
A textarea to display the resulting CSV
"Convert" and "Download" buttons
A debug/information section
Functionality:
Allow dragging and dropping JSON files
Parse the uploaded JSON file in the browser
Find the first array in the JSON structure automatically
Convert the array to CSV format using PapaParse library
Display the CSV in a textarea
Enable downloading the CSV file
Provide clear error messages for invalid files
Show debug information to help troubleshoot issues
Technical Requirements:
Use only HTML, CSS, and JavaScript (no frameworks required)
Include the PapaParse library for reliable JSON to CSV conversion
Handle JSON files with nested object structures
Properly handle script loading to prevent dependency errors
Work with large JSON files efficiently
Include proper error handling for all operations
Ensure all UI interactions have visual feedback
Make sure the page works entirely client-side without needing a server
Implementation Notes:
Use inline CSS for styling to keep everything in a single file
Add visual feedback for drag operations (highlighting)
Include a loading indicator while processing large files
Add detailed debug information that logs all operations
Ensure proper error handling for malformed JSON, conversion issues, etc.
Handle browser compatibility issues