<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSV Upload</title> <!-- Подключение стилей Notyf --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf/notyf.min.css"> <style> body { font-family: Arial, sans-serif; text-align: center; background-color: #f0f0f0; margin: 0; padding: 0; } h1 { background-color: #4CAF50; color: white; padding: 20px; margin: 0; border-bottom: 2px solid #388E3C; } .input-row { display: flex; justify-content: center; gap: 10px; margin-top: 20px; } .input-row input[type="file"] { padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; } .input-row input[type="checkbox"] { margin-top: 5px; } .input-row label { display: flex; align-items: center; color: #4CAF50; font-size: 16px; } #uploadButton { color: white; background-color: #4CAF50; border: none; cursor: pointer; padding: 10px 20px; font-size: 16px; border-radius: 5px; margin-top: 20px; } #uploadButton:hover { background-color: #388E3C; } </style> </head> <body> <h1>Upload CSV File</h1> <form id="uploadForm" enctype="multipart/form-data" method="post"> <div class="input-row"> <input type="file" name="file" accept=".csv"> </div> <div class="input-row"> <label> <input type="checkbox" name="verify_phone" value="1"> Verify Phone </label> <label> <input type="checkbox" name="add_curator" value="1"> Add Curator </label> </div> <input id="uploadButton" type="submit" value="Upload"> </form> <div id="result"></div> <!-- Подключение скрипта Notyf --> <script src="https://cdn.jsdelivr.net/npm/notyf/notyf.min.js"></script> <script> document.getElementById('uploadForm').addEventListener('submit', function(event) { event.preventDefault(); const form = new FormData(this); // Показываем сообщение "Загрузка началась, пожалуйста, подождите" const notyf = new Notyf({ duration: 5000, // Длительность показа уведомления position: { x: 'right', y: 'top' }, types: [ { type: 'info', background: 'green', icon: { className: 'notyf__icon--info', tagName: 'span', text: '' } } ] }); notyf.open({ type: 'info', message: 'Загрузка началась, пожалуйста, подождите' }); fetch('/upload_csv', { method: 'POST', body: form }) .then(response => response.json()) .then(data => { notyf.open({ type: 'success', message: data.message }); }) .catch(error => { console.error('Error:', error); notyf.open({ type: 'error', message: 'An error occurred while uploading the file.' }); }); }); </script> </body> </html>