Spaces:
Running
Running
| <html><head><base href="https://websim.ai/csv-converter"><title>CSV Converter: Transform Data Formats with Ease</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script> | |
| <style> | |
| @keyframes dataFlow { | |
| 0% { transform: translateY(-100%); opacity: 0; } | |
| 100% { transform: translateY(0); opacity: 1; } | |
| } | |
| .data-flow { | |
| animation: dataFlow 1s ease-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-blue-900 to-teal-900 text-white min-h-screen font-sans"> | |
| <header class="py-6 relative"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-4xl font-bold text-center text-blue-300">CSV Converter</h1> | |
| <p class="mt-2 text-center text-teal-200">Transform Data Formats with Ease</p> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="bg-gray-800 rounded-lg shadow-lg p-6 mb-8"> | |
| <h2 class="text-2xl font-semibold mb-4 text-blue-300">Convert Your Data</h2> | |
| <form id="converter-form" class="space-y-4"> | |
| <div> | |
| <label for="input-format" class="block text-sm font-medium text-teal-200">Input Format:</label> | |
| <select id="input-format" name="format" class="mt-1 block w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-white"> | |
| <option value="json">JSON</option> | |
| <option value="xml">XML</option> | |
| <option value="yaml">YAML</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="input-data" class="block text-sm font-medium text-teal-200">Input Data:</label> | |
| <textarea id="input-data" name="data" rows="10" class="mt-1 block w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-white font-mono" placeholder="Paste your data here..."></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-gray-900 bg-blue-500 hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Convert to CSV | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div id="result-container" class="bg-gray-800 rounded-lg shadow-lg p-6 hidden"> | |
| <h2 class="text-2xl font-semibold mb-4 text-blue-300">Converted CSV</h2> | |
| <div id="csv-result" class="space-y-4"> | |
| <!-- Converted CSV will be inserted here --> | |
| </div> | |
| <div class="mt-4"> | |
| <button id="download-csv" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-gray-900 bg-teal-500 hover:bg-teal-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500"> | |
| Download CSV | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-gray-800 rounded-lg shadow-lg p-6"> | |
| <h2 class="text-2xl font-semibold mb-4 text-blue-300">Supported Formats</h2> | |
| <ul class="list-disc list-inside space-y-2 text-teal-200"> | |
| <li>JSON (JavaScript Object Notation)</li> | |
| <li>XML (eXtensible Markup Language)</li> | |
| <li>YAML (YAML Ain't Markup Language)</li> | |
| </ul> | |
| </div> | |
| </main> | |
| <script> | |
| const converterForm = document.getElementById('converter-form'); | |
| const resultContainer = document.getElementById('result-container'); | |
| const csvResult = document.getElementById('csv-result'); | |
| const downloadButton = document.getElementById('download-csv'); | |
| converterForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const inputFormat = document.getElementById('input-format').value; | |
| const inputData = document.getElementById('input-data').value.trim(); | |
| if (!inputData) { | |
| alert('Please provide input data to convert.'); | |
| return; | |
| } | |
| convertToCSV(inputFormat, inputData); | |
| }); | |
| function convertToCSV(format, data) { | |
| // Show loading state | |
| resultContainer.classList.remove('hidden'); | |
| csvResult.innerHTML = '<p class="text-teal-200">Converting your data...</p>'; | |
| // Simulate API call with setTimeout | |
| setTimeout(() => { | |
| let jsonData; | |
| try { | |
| switch (format) { | |
| case 'json': | |
| jsonData = JSON.parse(data); | |
| break; | |
| case 'xml': | |
| jsonData = convertXMLtoJSON(data); | |
| break; | |
| case 'yaml': | |
| jsonData = convertYAMLtoJSON(data); | |
| break; | |
| default: | |
| throw new Error('Unsupported format'); | |
| } | |
| const csv = Papa.unparse(jsonData); | |
| displayCSVResult(csv); | |
| } catch (error) { | |
| displayError(error.message); | |
| } | |
| }, 1000); | |
| } | |
| function convertXMLtoJSON(xml) { | |
| // This is a placeholder function. In a real application, you would use a proper XML to JSON converter. | |
| return [{ "note": "XML conversion is not implemented in this demo" }]; | |
| } | |
| function convertYAMLtoJSON(yaml) { | |
| // This is a placeholder function. In a real application, you would use a proper YAML to JSON converter. | |
| return [{ "note": "YAML conversion is not implemented in this demo" }]; | |
| } | |
| function displayCSVResult(csv) { | |
| const csvLines = csv.split('\n').slice(0, 10); // Display first 10 lines | |
| let csvHTML = ` | |
| <div class="space-y-4"> | |
| <pre class="bg-gray-900 p-4 rounded-lg overflow-x-auto data-flow"><code class="text-teal-200 font-mono text-sm">${csvLines.join('\n')}</code></pre> | |
| ${csvLines.length < csv.split('\n').length ? '<p class="text-teal-300 text-sm">Showing first 10 lines...</p>' : ''} | |
| </div> | |
| `; | |
| csvResult.innerHTML = csvHTML; | |
| // Enable download button | |
| downloadButton.onclick = () => downloadCSV(csv); | |
| } | |
| function displayError(message) { | |
| csvResult.innerHTML = `<p class="text-red-500">Error: ${message}</p>`; | |
| } | |
| function downloadCSV(csv) { | |
| const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); | |
| const link = document.createElement("a"); | |
| if (link.download !== undefined) { | |
| const url = URL.createObjectURL(blob); | |
| link.setAttribute("href", url); | |
| link.setAttribute("download", "converted_data.csv"); | |
| link.style.visibility = 'hidden'; | |
| document.body.appendChild(link); | |
| link.click(); | |
| document.body.removeChild(link); | |
| } | |
| } | |
| </script> | |
| </body></html> |