<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSV to OpenOffice XML</title>
<style>
  body {
    background-color: yellow;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
  }
  textarea {
    width: 500px;
    height: 200px;
    margin: 10px;
    padding: 10px;
    font-size: 16px;
  }
  button {
    padding: 10px 20px;
    font-size: 16px;
    margin: 10px;
  }
</style>
</head>
<body>
<input type="file" id="file-selector" >
<textarea id="csvInput" placeholder="Paste CSV content here"></textarea>
<textarea id="xmlOutput" placeholder="XML output will appear here"></textarea>
<button id="convertButton">Convert to XML</button>
<button id="saves">save</button>
<script>
document.getElementById('convertButton').addEventListener('click', () => {
  const csvInput = document.getElementById('csvInput').value.trim();
  const xmlOutput = document.getElementById('xmlOutput');

  if (!csvInput) {
    alert('Please paste the CSV content in the input area.');
    return;
  }

  const lines = csvInput.split('\n');
  let xmlContent = `<?xml version=\"1.0\" encoding=\"UTF-8\"?>
  <?mso-application progid=\"Excel.Sheet\"?>
  <Workbook xmlns=\"urn:schemas-microsoft-com:office:spreadsheet\" xmlns:c=\"urn:schemas-microsoft-com:office:component:spreadsheet\" xmlns:html=\"http://www.w3.org/TR/REC-html40\" xmlns:o=\"urn:schemas-microsoft-com:office:office\" xmlns:ss=\"urn:schemas-microsoft-com:office:spreadsheet\" xmlns:x2=\"http://schemas.microsoft.com/office/excel/2003/xml\" xmlns:x=\"urn:schemas-microsoft-com:office:excel\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\">"
  <ss:Worksheet>
  <Table>
    `;

  lines.forEach((line, rowIndex) => {
    const cells = line.split(',');
    xmlContent += `
 <Row ss:Height=\"12,8126\">
        `
      

    cells.forEach((cell, colIndex) => {
      xmlContent += `
      <Cell>
      <Data ss:Type=\"String\">
          ${cell}
        </Data>
      </Cell>`;
    });

    xmlContent += `
  </Row>
  `;
  });

  xmlContent += `
</Table>
<x:WorksheetOptions/>  
</ss:Worksheet>
</Workbook>"
</xml>`;

  xmlOutput.value = xmlContent;
});
</script>
<script>
    codeInput = document.getElementById('csvInput');
    const fileSelector = document.getElementById('file-selector');
    fileSelector.addEventListener('change', (event) => {
        const fileList = event.target.files[0];
        
      var reader = new FileReader();
      reader.readAsText(fileList);
    reader.onload =readerEvent => {
        var values=readerEvent.target.result;
        codeInput.value=values;
    }
     
    });
  
  </script>
  <script>
    const saveBtn = document.getElementById('saves');
    
    
    saveBtn.addEventListener('click', function(){
       let name =prompt("filename","new");
       var tempLink = document.createElement("a");
  
       var codeInput = document.getElementById("xmlOutput");
       var outputs = codeInput.value;
       var taBlob = new Blob([ outputs], {type: 'text/plain'});
       tempLink.setAttribute('href', URL.createObjectURL(taBlob));
    tempLink.setAttribute('download', `${name.toLowerCase()}.xml`);
    tempLink.click();
  
    URL.revokeObjectURL(tempLink.href);
  });
  </script>
</body>
</html>