index.html

<style>
    .loader { border-top-color: #06b6d4; animation: spinner 1.5s linear infinite; }
    @keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    #log-console { display: none; }
</style>

<form id="scrape-form" class="flex gap-2">
    <input id="target-url" name="url" placeholder="Link Anichin.cafe..." class="bg-gray-800 px-4 py-2 rounded-md border border-gray-700 outline-none w-96">
    <button type="submit" id="btn-submit" class="bg-cyan-600 hover:bg-cyan-500 px-6 py-2 rounded-md font-bold transition flex items-center gap-2">
        <div id="loader-icon" class="hidden loader w-4 h-4 border-2 border-white rounded-full"></div>
        <span>TARIK DATA</span>
    </button>
</form>

<div id="log-console" class="mx-8 mt-4 p-4 bg-black border border-gray-800 rounded-lg font-mono text-xs text-green-400 h-40 overflow-y-auto">
    <div class="text-gray-500 border-b border-gray-800 mb-2 pb-1">REAL-TIME LOGS:</div>
    <div id="log-content"></div>
</div>

<script>
    const form = document.getElementById('scrape-form');
    const logConsole = document.getElementById('log-console');
    const logContent = document.getElementById('log-content');
    const btnSubmit = document.getElementById('btn-submit');
    const loader = document.getElementById('loader-icon');

    form.onsubmit = async (e) => {
        e.preventDefault();
        const url = document.getElementById('target-url').value;
        
        // UI Reset
        logConsole.style.display = 'block';
        logContent.innerHTML = '';
        btnSubmit.disabled = true;
        loader.classList.remove('hidden');

        const formData = new FormData();
        formData.append('url', url);

        const response = await fetch('/add_anime', { method: 'POST', body: formData });
        const reader = response.body.getReader();
        const decoder = new TextDecoder();

        while (true) {
            const { value, done } = await reader.read();
            if (done) break;
            const chunk = decoder.decode(value);
            // Bersihkan data: prefix
            const cleanLog = chunk.replace(/data: /g, '');
            logContent.innerHTML += `<div>> ${cleanLog}</div>`;
            logConsole.scrollTop = logConsole.scrollHeight;
        }

        btnSubmit.disabled = false;
        loader.classList.add('hidden');
        // Auto refresh setelah 2 detik selesai
        setTimeout(() => { window.location.reload(); }, 2000);
    };
              </script>