Update templates/index.html

templates/index.html

@@ -4,275 +4,119 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Générateur de Données Synthétiques</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 20px;
-        }
-
-        .container {
-            background: white;
-            border-radius: 20px;
-            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
-            padding: 40px;
-            max-width: 800px;
-            width: 100%;
-        }
-
-        .header {
-            text-align: center;
-            margin-bottom: 40px;
-        }
-
-        .header h1 {
-            color: #333;
-            font-size: 2.5em;
-            margin-bottom: 10px;
-            background: linear-gradient(135deg, #667eea, #764ba2);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-
-        .header p {
-            color: #666;
-            font-size: 1.1em;
-        }
-
-        .upload-section {
-            border: 3px dashed #ddd;
-            border-radius: 15px;
-            padding: 40px;
-            text-align: center;
-            margin-bottom: 30px;
-            transition: all 0.3s ease;
-        }
-
-        .upload-section:hover {
-            border-color: #667eea;
-            background: #f8f9ff;
-        }
-
-        .upload-section.dragover {
-            border-color: #667eea;
-            background: #f0f4ff;
-        }
-
-        input[type="file"] {
-            display: none;
-        }
-
-        .upload-btn {
-            background: linear-gradient(135deg, #667eea, #764ba2);
-            color: white;
-            padding: 15px 30px;
-            border: none;
-            border-radius: 50px;
-            cursor: pointer;
-            font-size: 1.1em;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            margin: 10px;
-        }
-
-        .upload-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
-        }
-
-        .progress-section {
-            display: none;
-            margin-top: 30px;
-        }
-
-        .progress-bar {
-            width: 100%;
-            height: 20px;
-            background: #f0f0f0;
-            border-radius: 10px;
-            overflow: hidden;
-            margin: 20px 0;
-        }
-
-        .progress-fill {
-            height: 100%;
-            background: linear-gradient(90deg, #667eea, #764ba2);
-            width: 0%;
-            transition: width 0.3s ease;
-            position: relative;
-        }
-
-        .progress-fill::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
-            animation: shimmer 2s infinite;
-        }
-
-        @keyframes shimmer {
-            0% { transform: translateX(-100%); }
-            100% { transform: translateX(100%); }
-        }
-
-        .status-info {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 20px;
-            margin: 20px 0;
-        }
-
-        .status-card {
-            background: #f8f9ff;
-            padding: 20px;
-            border-radius: 10px;
-            text-align: center;
-            border-left: 4px solid #667eea;
-        }
-
-        .status-card h3 {
-            color: #333;
-            margin-bottom: 10px;
-        }
-
-        .status-card p {
-            color: #666;
-            font-size: 1.2em;
-            font-weight: bold;
-        }
-
-        .download-btn {
-            background: linear-gradient(135deg, #28a745, #20c997);
-            color: white;
-            padding: 15px 30px;
-            border: none;
-            border-radius: 50px;
-            cursor: pointer;
-            font-size: 1.1em;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            margin: 20px 10px;
-            display: none;
-        }
-
-        .download-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
-        }
-
-        .tasks-section {
-            margin-top: 30px;
-            padding-top: 30px;
-            border-top: 2px solid #eee;
-        }
-
-        .task-item {
-            background: #f8f9ff;
-            padding: 15px;
-            border-radius: 10px;
-            margin: 10px 0;
-            border-left: 4px solid #667eea;
-        }
-
-        .task-item.completed {
-            border-left-color: #28a745;
-        }
-
-        .notification {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            padding: 15px 25px;
-            border-radius: 10px;
-            color: white;
-            font-weight: 600;
-            transform: translateX(100%);
-            transition: transform 0.3s ease;
-            z-index: 1000;
-        }
-
-        .notification.success {
-            background: linear-gradient(135deg, #28a745, #20c997);
-        }
-
-        .notification.error {
-            background: linear-gradient(135deg, #dc3545, #c82333);
-        }
-
-        .notification.show {
-            transform: translateX(0);
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    animation: {
+                        'shimmer': 'shimmer 2s infinite',
+                        'bounce-in': 'bounceIn 0.5s ease-out',
+                        'slide-in': 'slideIn 0.3s ease-out'
+                    },
+                    keyframes: {
+                        shimmer: {
+                            '0%': { transform: 'translateX(-100%)' },
+                            '100%': { transform: 'translateX(100%)' }
+                        },
+                        bounceIn: {
+                            '0%': { transform: 'scale(0.3)', opacity: '0' },
+                            '50%': { transform: 'scale(1.05)' },
+                            '100%': { transform: 'scale(1)', opacity: '1' }
+                        },
+                        slideIn: {
+                            '0%': { transform: 'translateX(100%)', opacity: '0' },
+                            '100%': { transform: 'translateX(0)', opacity: '1' }
+                        }
+                    }
+                }
+            }
         }
-    </style>
+    </script>
 </head>
-<body>
-    <div class="container">
-        <div class="header">
-            <h1>🤖 Générateur de Données Synthétiques</h1>
-            <p>Uploadez votre fichier pour générer 470 jeux de données synthétiques</p>
+<body class="min-h-screen bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 flex items-center justify-center p-5">
+    <div class="bg-white rounded-3xl shadow-2xl p-8 max-w-4xl w-full backdrop-blur-sm">
+        <!-- Header -->
+        <div class="text-center mb-10">
+            <h1 class="text-4xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent mb-3">
+                🤖 Générateur de Données Synthétiques
+            </h1>
+            <p class="text-gray-600 text-lg">Uploadez votre fichier pour générer 470 jeux de données synthétiques</p>
         </div>
 
-        <div class="upload-section" id="uploadSection">
-            <h3>📁 Sélectionnez votre fichier</h3>
-            <p>Glissez-déposez votre fichier ici ou cliquez pour sélectionner</p>
-            <input type="file" id="fileInput" accept=".txt">
-            <button class="upload-btn" onclick="document.getElementById('fileInput').click()">
-                Choisir le fichier
-            </button>
-            <button class="upload-btn" id="startBtn" onclick="startGeneration()" style="display: none;">
-                🚀 Démarrer la génération
-            </button>
+        <!-- Upload Section -->
+        <div id="uploadSection" class="border-3 border-dashed border-gray-300 rounded-2xl p-10 text-center mb-8 transition-all duration-300 hover:border-indigo-500 hover:bg-indigo-50/30">
+            <div class="space-y-4">
+                <h3 class="text-xl font-semibold text-gray-700">📁 Sélectionnez votre fichier</h3>
+                <p class="text-gray-500">Glissez-déposez votre fichier ici ou cliquez pour sélectionner</p>
+                <input type="file" id="fileInput" accept=".txt" class="hidden">
+                <div class="space-x-4">
+                    <button onclick="document.getElementById('fileInput').click()" 
+                            class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-8 py-3 rounded-full font-semibold transition-all duration-300 hover:scale-105 hover:shadow-lg">
+                        Choisir le fichier
+                    </button>
+                    <button id="startBtn" onclick="startGeneration()" 
+                            class="hidden bg-gradient-to-r from-green-500 to-emerald-600 text-white px-8 py-3 rounded-full font-semibold transition-all duration-300 hover:scale-105 hover:shadow-lg">
+                        🚀 Démarrer la génération
+                    </button>
+                </div>
+            </div>
         </div>
 
-        <div class="progress-section" id="progressSection">
-            <h3>⏳ Génération en cours...</h3>
-            <div class="progress-bar">
-                <div class="progress-fill" id="progressFill"></div>
+        <!-- Progress Section -->
+        <div id="progressSection" class="hidden space-y-6">
+            <div class="text-center">
+                <h3 class="text-2xl font-bold text-gray-800 mb-4">⏳ Génération en cours...</h3>
+                <div class="w-full bg-gray-200 rounded-full h-6 overflow-hidden">
+                    <div id="progressFill" class="h-full bg-gradient-to-r from-indigo-500 to-purple-600 transition-all duration-500 relative">
+                        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-shimmer"></div>
+                    </div>
+                </div>
             </div>
-            <div class="status-info">
-                <div class="status-card">
-                    <h3>Progrès</h3>
-                    <p id="progressText">0 / 470</p>
+
+            <!-- Status Cards -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                <div class="bg-gradient-to-br from-blue-50 to-indigo-100 p-6 rounded-xl border-l-4 border-indigo-500">
+                    <h4 class="font-semibold text-gray-700 mb-2">Progrès</h4>
+                    <p id="progressText" class="text-2xl font-bold text-indigo-600">0 / 470</p>
                 </div>
-                <div class="status-card">
-                    <h3>Pourcentage</h3>
-                    <p id="percentageText">0%</p>
+                <div class="bg-gradient-to-br from-green-50 to-emerald-100 p-6 rounded-xl border-l-4 border-emerald-500">
+                    <h4 class="font-semibold text-gray-700 mb-2">Pourcentage</h4>
+                    <p id="percentageText" class="text-2xl font-bold text-emerald-600">0%</p>
                 </div>
-                <div class="status-card">
-                    <h3>Statut</h3>
-                    <p id="statusText">En attente</p>
+                <div class="bg-gradient-to-br from-purple-50 to-violet-100 p-6 rounded-xl border-l-4 border-violet-500">
+                    <h4 class="font-semibold text-gray-700 mb-2">Statut</h4>
+                    <p id="statusText" class="text-lg font-bold text-violet-600">En attente</p>
                 </div>
-                <div class="status-card">
-                    <h3>Heure de début</h3>
-                    <p id="startTimeText">-</p>
+                <div class="bg-gradient-to-br from-orange-50 to-amber-100 p-6 rounded-xl border-l-4 border-amber-500">
+                    <h4 class="font-semibold text-gray-700 mb-2">Heure de début</h4>
+                    <p id="startTimeText" class="text-lg font-bold text-amber-600">-</p>
                 </div>
             </div>
-            
-            <button class="download-btn" id="downloadBtn" onclick="downloadResults()">
-                📥 Télécharger les résultats
-            </button>
+
+            <!-- Download Button -->
+            <div class="text-center">
+                <button id="downloadBtn" onclick="downloadResults()" 
+                        class="hidden bg-gradient-to-r from-green-500 to-emerald-600 text-white px-8 py-3 rounded-full font-semibold transition-all duration-300 hover:scale-105 hover:shadow-lg">
+                    📥 Télécharger les résultats
+                </button>
+                <!-- Bouton de téléchargement en cours -->
+                <button id="downloadProgressBtn" onclick="downloadCurrentResults()" 
+                        class="hidden bg-gradient-to-r from-yellow-500 to-orange-500 text-white px-8 py-3 rounded-full font-semibold transition-all duration-300 hover:scale-105 hover:shadow-lg">
+                    📥 Télécharger les données actuelles
+                </button>
+            </div>
         </div>
 
-        <div class="tasks-section">
-            <h3>📋 Tâches précédentes</h3>
-            <div id="tasksList"></div>
+        <!-- Tasks Section -->
+        <div class="mt-10 pt-8 border-t-2 border-gray-200">
+            <h3 class="text-xl font-bold text-gray-800 mb-6">📋 Tâches précédentes</h3>
+            <div id="tasksList" class="space-y-4"></div>
         </div>
     </div>
 
-    <div class="notification" id="notification"></div>
+    <!-- Notification -->
+    <div id="notification" class="fixed top-5 right-5 px-6 py-4 rounded-xl text-white font-semibold transform translate-x-full transition-transform duration-300 z-50"></div>
 
     <script>
         let currentTaskId = null;
@@ -284,16 +128,16 @@
 
         uploadSection.addEventListener('dragover', (e) => {
             e.preventDefault();
-            uploadSection.classList.add('dragover');
+            uploadSection.classList.add('border-indigo-500', 'bg-indigo-50/50');
         });
 
         uploadSection.addEventListener('dragleave', () => {
-            uploadSection.classList.remove('dragover');
+            uploadSection.classList.remove('border-indigo-500', 'bg-indigo-50/50');
         });
 
         uploadSection.addEventListener('drop', (e) => {
             e.preventDefault();
-            uploadSection.classList.remove('dragover');
+            uploadSection.classList.remove('border-indigo-500', 'bg-indigo-50/50');
             
             const files = e.dataTransfer.files;
             if (files.length > 0) {
@@ -307,7 +151,8 @@
         function handleFileSelect() {
             const file = fileInput.files[0];
             if (file) {
-                document.getElementById('startBtn').style.display = 'inline-block';
+                document.getElementById('startBtn').classList.remove('hidden');
+                document.getElementById('startBtn').classList.add('animate-bounce-in');
                 showNotification(`Fichier sélectionné: ${file.name}`, 'success');
             }
         }
@@ -332,7 +177,8 @@
                     showNotification(data.error, 'error');
                 } else {
                     currentTaskId = data.task_id;
-                    document.getElementById('progressSection').style.display = 'block';
+                    document.getElementById('progressSection').classList.remove('hidden');
+                    document.getElementById('downloadProgressBtn').classList.remove('hidden');
                     startStatusPolling();
                     showNotification('Génération démarrée!', 'success');
                 }
@@ -354,7 +200,8 @@
                         updateProgress(data);
                         if (data.status === 'completed') {
                             clearInterval(statusInterval);
-                            document.getElementById('downloadBtn').style.display = 'inline-block';
+                            document.getElementById('downloadBtn').classList.remove('hidden');
+                            document.getElementById('downloadProgressBtn').classList.add('hidden');
                             showNotification('Génération terminée!', 'success');
                         }
                     })
@@ -384,14 +231,36 @@
             }
         }
 
+        function downloadCurrentResults() {
+            if (currentTaskId) {
+                window.location.href = `/download/${currentTaskId}?partial=true`;
+                showNotification('Téléchargement des données actuelles...', 'success');
+            }
+        }
+
         function showNotification(message, type) {
             const notification = document.getElementById('notification');
             notification.textContent = message;
-            notification.className = `notification ${type}`;
-            notification.classList.add('show');
+            
+            // Reset classes
+            notification.className = 'fixed top-5 right-5 px-6 py-4 rounded-xl text-white font-semibold transform translate-x-full transition-transform duration-300 z-50';
+            
+            // Add type-specific classes
+            if (type === 'success') {
+                notification.classList.add('bg-gradient-to-r', 'from-green-500', 'to-emerald-600');
+            } else if (type === 'error') {
+                notification.classList.add('bg-gradient-to-r', 'from-red-500', 'to-rose-600');
+            }
+            
+            // Show notification
+            setTimeout(() => {
+                notification.classList.remove('translate-x-full');
+                notification.classList.add('animate-slide-in');
+            }, 100);
 
+            // Hide notification after 3 seconds
             setTimeout(() => {
-                notification.classList.remove('show');
+                notification.classList.add('translate-x-full');
             }, 3000);
         }
 
@@ -404,17 +273,41 @@
 
                 tasks.forEach(task => {
                     const taskItem = document.createElement('div');
-                    taskItem.className = `task-item ${task.status}`;
+                    taskItem.className = `bg-gradient-to-r from-gray-50 to-gray-100 p-6 rounded-xl border-l-4 ${
+                        task.status === 'completed' ? 'border-green-500' : 
+                        task.status === 'running' ? 'border-blue-500' : 'border-gray-400'
+                    } transition-all duration-300 hover:shadow-md`;
+                    
                     taskItem.innerHTML = `
-                        <div style="display: flex; justify-content: space-between; align-items: center;">
-                            <div>
-                                <strong>Tâche ${task.id.substring(0, 8)}...</strong><br>
-                                <small>Démarré: ${task.start_time} | Progrès: ${task.progress}/${task.total} (${task.percentage}%)</small>
+                        <div class="flex justify-between items-center">
+                            <div class="space-y-2">
+                                <div class="flex items-center space-x-3">
+                                    <span class="font-bold text-gray-800">Tâche ${task.id.substring(0, 8)}...</span>
+                                    <span class="px-3 py-1 rounded-full text-sm font-medium ${
+                                        task.status === 'completed' ? 'bg-green-100 text-green-800' :
+                                        task.status === 'running' ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800'
+                                    }">
+                                        ${task.status === 'completed' ? 'Terminé' : 
+                                          task.status === 'running' ? 'En cours' : task.status}
+                                    </span>
+                                </div>
+                                <div class="text-sm text-gray-600">
+                                    <span>Démarré: ${task.start_time}</span> | 
+                                    <span>Progrès: ${task.progress}/${task.total} (${task.percentage}%)</span>
+                                </div>
                             </div>
-                            <div>
+                            <div class="space-x-2">
                                 ${task.status === 'completed' ? 
-                                    `<button class="download-btn" style="display: inline-block; margin: 0;" onclick="window.location.href='/download/${task.id}'">Télécharger</button>` : 
-                                    `<span style="color: #667eea; font-weight: bold;">${task.status}</span>`
+                                    `<button onclick="window.location.href='/download/${task.id}'" 
+                                             class="bg-gradient-to-r from-green-500 to-emerald-600 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:scale-105">
+                                        Télécharger
+                                     </button>` : 
+                                    task.status === 'running' ?
+                                    `<button onclick="window.location.href='/download/${task.id}?partial=true'" 
+                                             class="bg-gradient-to-r from-yellow-500 to-orange-500 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:scale-105">
+                                        Télécharger actuel
+                                     </button>` :
+                                    `<span class="text-gray-500 font-medium">${task.status}</span>`
                                 }
                             </div>
                         </div>