Tolong letakkan tombol "unduh CSV" di kanan atas (tetap di tengah-tengah dan stylenya diperbagus). Tambahkan juga input kosong di kiri atas (tetap di tengah-tengah dan stylenya diperbagus) untuk mengisi nama orang yang akan melabeli dan buat validasi agar pengguna tidak bisa menekan tombol yang ada di dalam kelas button-container dan tidak bisa menekan tombol unduh CSV sebelum mengisi input nama tersebut.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Analisis Sentimen Berita Politik</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #90AFC5;
            color: #2A3132;
            padding: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h1 {
            font-size: 36px;
            margin: 0 0 30px;
            font-weight: bold;
        }

        h2 {
            font-size: 24px;
            margin: 0 0 10px;
            font-weight: bold;
        }

        p {
            font-size: 18px;
            margin: 0 0 20px;
            line-height: 1.5;
            text-align: justify;
        }

        #jumlahBelumDilabeli {
            font-weight: bold;
            font-size: 18px;
            color: #336B87;
            margin-bottom: 30px;
            text-align: center;
        }

        button {
            border: none;
            border-radius: 3px;
            background-color: #336B87;
            color: #FFF;
            margin: 0 10px;
            padding: 10px 20px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        #positif:hover {
            background-color: #2ECC71;
        }

        #negatif:hover {
            background-color: #E74C3C;
        }

        #netral:hover {
            background-color: #BDC3C7;
        }

        .button-container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        .content-box {
            background-color: #FFF;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
            max-width: 800px;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.min.js"></script>
</head>
<body>
    <div class="content-box">
        <h1>Analisis Sentimen Berita</h1>
        <h2 id="judulBerita">Judul Berita</h2>
        <p id="isiBerita">Isi Berita</p>
        <p id="jumlahBelumDilabeli">Belum Dilabeli: …</p>
        <p id="allDone" style="display: none;">Semua berita telah selesai dilabeli!</p>
        <div class="button-container">
            <button id="positif" onclick="labelBerita('Positif')">Positif</button>
            <button id="netral" onclick="labelBerita('Netral')">Netral</button>
            <button id="negatif" onclick="labelBerita('Negatif')">Negatif</button>
        </div>
        <button onclick="downloadCSV()">Unduh CSV</button>
    </div>
    <script>
        let originalData = [];
        let dataCSV = [];
        let displayedIndex = -1;

        function parseAndShuffleCSV(csv) {
            let data = Papa.parse(csv, {
                header: true,
                skipEmptyLines: true,
                delimiter: ';'
            }).data;

            // Simpan data asli sebelum diacak
            originalData = JSON.parse(JSON.stringify(data));
            console.log(originalData)

            // Acak urutan data
            for (let i = data.length - 1; i > 0; i--) {
                let j = Math.floor(Math.random() * (i + 1));
                let temp = data[i];
                data[i] = data[j];
                data[j] = temp;
            }

            return data;
        }

        fetch('data.csv')
            .then(response => response.text())
            .then(csv => {
                dataCSV = parseAndShuffleCSV(csv);
                tampilkanBeritaSelanjutnya();
                tampilkanJumlahBelumDilabeli();
            });

        function tampilkanBeritaSelanjutnya() {
            let nextIndex = displayedIndex;
            do {
                nextIndex = (nextIndex + 1) % dataCSV.length;
            } while (nextIndex !== displayedIndex && dataCSV[nextIndex].Label);
            if (nextIndex === displayedIndex) { 
                document.getElementById('judulBerita').style.display = 'none';
                document.getElementById('isiBerita').style.display = 'none';
                document.getElementById('jumlahBelumDilabeli').style.display = 'none';
                document.querySelector('.button-container').style.display = 'none';
                document.getElementById('allDone').style.display = 'block';
                return;
            }
            displayedIndex = nextIndex;
            document.getElementById('judulBerita').innerText = dataCSV[displayedIndex].Judul;
            document.getElementById('isiBerita').innerText = dataCSV[displayedIndex].Isi_Berita;
        }

        function labelBerita(label) {
            dataCSV[displayedIndex].Label = label;
            const originalIndex = originalData.findIndex(berita => berita.Judul === dataCSV[displayedIndex].Judul);
            originalData[originalIndex].Label = label;
            tampilkanBeritaSelanjutnya();
            tampilkanJumlahBelumDilabeli();
        }

        function tampilkanJumlahBelumDilabeli() {
            const jumlahBelumDilabeli = dataCSV.filter(berita => !berita.Label).length;
            document.getElementById('jumlahBelumDilabeli').innerText = 'Belum Dilabeli: ' + jumlahBelumDilabeli;
        }

        function JSONToCSV(jsonData, delimiter = ';') {
            if (!jsonData || jsonData.length === 0) {
                return '';
            }

            let keys = Object.keys(jsonData[0]);
            let csvContent = '';

            csvContent += keys.join(delimiter) + '\n';

            jsonData.forEach(row => {
                let rowData = [];
                keys.forEach(key => {
                    rowData.push(row[key]);
                });
                csvContent += rowData.join(delimiter) + '\n';
            });

            return csvContent;
        }

        function escapeHashSymbol(jsonData) {
            return JSON.parse(JSON.stringify(jsonData).replace(/#/g, 'hashtag'));
        }

        function downloadCSV() {
            let escapedData = escapeHashSymbol(originalData);
            console.log(escapedData)
            let updatedCSV = JSONToCSV(escapedData);

            console.log(updatedCSV);

            let hiddenLink = document.createElement('a');
            hiddenLink.href = 'data:text/csv;charset=utf-8,' + encodeURI(updatedCSV);
            hiddenLink.target = '_blank';
            hiddenLink.download = 'data_labeled.csv';
            hiddenLink.click();
        }
    </script>
</body>
</html>