improve this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="CSV to JSON Converter - Convert CSV data to JSON format effortlessly."
/>
<meta name="author" content="Exxeer" />
<meta name="robots" content="index, follow" />
<meta property="og:title" content="CSV to JSON Converter" />
<meta
property="og:description"
content="Convert CSV data into JSON format quickly and easily with this tool."
/>
<meta property="og:type" content="website" />
<meta
property="og:url"
content="https://developer.exxeer.com/csv-to-json"
/>
<meta
property="og:image"
content="https://developer.exxeer.com/assets/images/csv-to-json-thumbnail.png"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="CSV to JSON Converter" />
<meta
name="twitter:description"
content="Convert CSV data into JSON format quickly and easily with this tool."
/>
<meta
name="twitter:image"
content="https://developer.exxeer.com/assets/images/csv-to-json-thumbnail.png"
/>
<meta name="theme-color" content="#1D4ED8" />
<meta name="application-name" content="Exxeer Developer Tools" />
<link
rel="icon"
href="https://developer.exxeer.com/assets/images/favicon.ico"
type="image/x-icon"
/>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
rel="stylesheet"
/>

<link rel="stylesheet" href="../../../public/css/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<title>CSV to JSON Converter | Exxeer Developer Tools</title>
</head>

<body class="font-sans antialiased bg-gray-100">
<div class="max-w-5xl mx-auto py-10 px-5">
<div
class="bg-white p-8 rounded-lg shadow-xl grid grid-cols-1 md:grid-cols-2 gap-6"
>
<!-- Left Section: Upload CSV and Input -->
<div>
<h1 class="text-4xl font-bold text-center text-blue-600">
CSV to JSON Converter
</h1>
<p class="text-center text-gray-700 mt-3 mb-8">
Convert your CSV data to JSON format easily
</p>

<div class="mb-6">
<label
for="csvInput"
class="block text-lg font-medium text-gray-700"
>Upload your CSV file:</label
>
<label
for="csvInput"
class="w-full my-4 text-2xl flex items-center justify-center cursor-pointer text-blue-500 hover:text-blue-600"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-12 h-12 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="2"
>
<path
d="M12 5v14M5 12l7 7 7-7"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
Choose File
<input type="file" id="csvInput" class="hidden" />
</label>
<p id="fileName" class="text-center text-gray-600">
No file selected
</p>
</div>

<div class="mb-6">
<label for="csvData" class="block text-lg font-medium text-gray-700"
>Or paste CSV data:</label
>
<textarea
id="csvData"
rows="6"
class="mt-2 p-4 border border-gray-300 rounded-lg w-full resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Paste your CSV data here"
></textarea>
</div>
</div>

<!-- Right Section: JSON Output and Actions -->
<div>
<h2 class="text-2xl font-semibold text-blue-600 mb-4">
Converted JSON Output:
</h2>
<pre
class="json-output bg-gray-800 text-gray-100 p-4 rounded-lg overflow-auto shadow-lg"
>
<code id="jsonOutput" class="language-json"></code>
</pre>

<div class="flex justify-between gap-4 mt-6">
<button
id="copyBtn"
class="flex items-center bg-blue-600 text-white py-3 px-5 rounded-lg hover:bg-blue-700 transition duration-300 disabled:opacity-50"
disabled
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="2"
>
<path
d="M10 9h6M10 15h6M4 4h16M4 20h16"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
Copy to Clipboard
</button>
<button
id="downloadBtn"
class="flex items-center bg-green-600 text-white py-3 px-5 rounded-lg hover:bg-green-700 transition duration-300 disabled:opacity-50"
disabled
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="2"
>
<path
d="M12 5v14M5 12l7 7 7-7"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
Download JSON
</button>
</div>
</div>
</div>
</div>

<script>
const jsonText = document.getElementById("jsonOutput").textContent;
const output = document.getElementById("jsonOutput");
document
.getElementById("csvInput")
.addEventListener("change", handleFileSelect);
document.getElementById("csvData").addEventListener("input", function () {
convertCsvToJson(this.value);
});

function handleFileSelect(event) {
const file = event.target.files[0];
document.getElementById("fileName").textContent = file.name;
const reader = new FileReader();
reader.onload = function (e) {
convertCsvToJson(e.target.result);
};
reader.readAsText(file);
}

function convertCsvToJson(csv) {
const lines = csv.trim().split("\n");
const headers = lines[0].split(",");
const jsonResult = [];

for (let i = 1; i < lines.length; i++) {
const currentLine = lines[i].split(",");
const jsonObject = {};

headers.forEach((header, index) => {
jsonObject[header.trim()] = currentLine[index].trim();
});

jsonResult.push(jsonObject);
}

const formattedJson = JSON.stringify(jsonResult, null, 2);
displayJson(formattedJson);
}

function displayJson(json) {
output.textContent = json;

output.dataset.highlighted = "";
hljs.highlightElement(output);

document.getElementById("copyBtn").disabled = false;
document.getElementById("downloadBtn").disabled = false;
}

document.getElementById("copyBtn").addEventListener("click", function () {
navigator.clipboard.writeText(jsonText).then(
function () {
alert("JSON copied to clipboard!");
},
function (err) {
alert("Failed to copy text: ", err);
}
);
});

document
.getElementById("downloadBtn")
.addEventListener("click", function () {
const blob = new Blob([jsonText], { type: "application/json" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
const originalFileName = document
.getElementById("csvInput")
.files[0].name.replace(".csv", ".json");
a.href = url;
a.download = originalFileName;
a.click();
URL.revokeObjectURL(url);
});
</script>
</body>
</html>