Upload index.html

templates/index.html

@@ -9,6 +9,9 @@
   <!-- Tailwind CSS -->
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
   
+  <!-- SweetAlert2 -->
+  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
   <!-- Configuration de MathJax -->
   <script>
     window.MathJax = {
@@ -33,16 +36,20 @@
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');
     body { font-family: 'Space Grotesk', sans-serif; }
+    
     .uploadArea {
       background: #f3f4f6;
       border: 2px dashed #d1d5db;
       transition: border-color 0.2s ease;
     }
     .uploadArea:hover { border-color: #3b82f6; }
+    
     .blue-button { background: #3b82f6; transition: background-color 0.2s ease; }
     .blue-button:hover { background: #2563eb; }
+    
     .loader {
-      width: 48px; height: 48px;
+      width: 48px;
+      height: 48px;
       border: 3px solid #3b82f6;
       border-bottom-color: transparent;
       border-radius: 50%;
@@ -50,24 +57,48 @@
       animation: rotation 1s linear infinite;
     }
     @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+    
     .thought-box {
       transition: max-height 0.3s ease-out;
       max-height: 0;
       overflow: hidden;
     }
     .thought-box.open { max-height: 500px; }
+    
     #thoughtsContent, #answerContent {
       max-height: 500px;
       overflow-y: auto;
       scroll-behavior: smooth;
       white-space: pre-wrap;
     }
+    
     .preview-image { max-width: 300px; max-height: 300px; object-fit: contain; }
+    
     .timestamp { color: #3b82f6; font-size: 0.9em; margin-left: 8px; }
-    table { border-collapse: collapse; width: 100%; margin-bottom: 1rem; }
-    th, td { border: 1px solid #d1d5db; padding: 0.5rem; text-align: left; }
+    
+    table {
+      border-collapse: collapse;
+      width: 100%;
+      margin-bottom: 1rem;
+    }
+    th, td {
+      border: 1px solid #d1d5db;
+      padding: 0.5rem;
+      text-align: left;
+    }
     th { background-color: #f3f4f6; font-weight: 600; }
     .table-responsive { overflow-x: auto; }
+    
+    /* Style pour le bouton Sauvegarder afin de le mettre en évidence */
+    #saveButton {
+      background: #3b82f6;
+      color: white;
+      padding: 0.5rem 1rem;
+      border-radius: 0.375rem;
+      transition: background-color 0.2s ease;
+    }
+    #saveButton:hover { background: #2563eb; }
+    
     /* Modal plein écran pour les sauvegardes */
     #savedModal {
       display: none;
@@ -140,8 +171,8 @@
         <div class="border-t pt-6">
           <div class="flex justify-between items-center">
             <h3 class="text-xl font-bold text-gray-800 mb-4">Solution</h3>
-            <!-- Bouton Sauvegarder repositionné et discret -->
-            <button id="saveButton" class="text-sm text-blue-600 hover:underline">Sauvegarder</button>
+            <!-- Bouton Sauvegarder mis en évidence -->
+            <button id="saveButton">Sauvegarder</button>
           </div>
           <div id="answerContent" class="text-gray-700 table-responsive"></div>
         </div>
@@ -311,7 +342,7 @@
         }
       });
 
-      // Sauvegarde de la solution
+      // Sauvegarde de la solution avec SweetAlert2
       saveButton.addEventListener('click', () => {
         const saveName = prompt("Entrez un nom pour la sauvegarde :");
         if (!saveName) return;
@@ -323,7 +354,13 @@
         let savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
         savedExercises[saveName] = saveData;
         localStorage.setItem('savedExercises', JSON.stringify(savedExercises));
-        alert("Solution sauvegardée !");
+        Swal.fire({
+          icon: 'success',
+          title: 'Sauvegarde réussie',
+          text: 'Votre solution a bien été sauvegardée !',
+          timer: 2000,
+          showConfirmButton: false
+        });
       });
 
       // Chargement des sauvegardes dans le modal