index.html

<!DOCTYPE html>
<html lang="nl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sportlink CSV naar Mailchimp CSV</title>
    <script
        src="https://cdn.jsdelivr.net/npm/sportlink-to-mailchimp-converter@0.2.3/sportlink-to-mailchimp-converter.umd.js"></script>
    <script>
        const converter = new SportlinkToMailchimpConverter.SportlinkToMailchimpConverter({
            nonAthleticsMembershipTypes: ['Gastlid', 'Recreanten', 'Overigen'],
            athleticsMembershipTypes: ['Atletiek'],
        });

        function handleFileSelect(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const contents = e.target.result;
                    const lines = contents.split('\n').slice(0, 6);
                    document.getElementById('file-preview').textContent = lines.join('\n');

                    // Convert the selected file
                    converter.convertFileToOutput(file).then(output => {
                        const outputLines = output.split('\n').slice(0, 6);
                        document.getElementById('converted-preview').textContent = outputLines.join('\n');
                    });
                };
                reader.readAsText(file);
            }
        }
    </script>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #f9f9f9;
            padding: 20px;
        }

        h1 {
            color: #2e004f;
            margin: 20px 0;
        }

        button {
            background-color: #2e004f;
            color: white;
            border-radius: 5px;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }

        pre {
            border: 1px solid lightgray;
            border-radius: 5px;
            margin: 10px 0;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Sportlink CSV naar Mailchimp CSV</h1>
        <input type="file" id="file-input" accept=".csv">
        <pre id="file-preview"></pre>
        <pre id="converted-preview"></pre>
        <script>
            document.getElementById('file-input').addEventListener('change', handleFileSelect);
        </script>
    </div>
</body>

</html>