Upload philosophie.html

templates/philosophie.html

@@ -28,51 +28,62 @@
       justify-content: space-between;
       align-items: center;
     }
+
     /* Nouveaux styles pour le Markdown responsive */
     .prose {
       max-width: 100% !important;
     }
+
     .prose p {
       margin-top: 1.25em;
       margin-bottom: 1.25em;
       line-height: 1.75;
     }
+
     .prose ul {
       margin-top: 1.25em;
       margin-bottom: 1.25em;
       padding-left: 1.625em;
     }
+
     .prose li {
       margin-top: 0.5em;
       margin-bottom: 0.5em;
       padding-left: 0.375em;
     }
+
     .prose h1, .prose h2, .prose h3 {
       margin-top: 2em;
       margin-bottom: 1em;
       line-height: 1.3;
     }
+
     /* Styles spécifiques pour mobile */
     @media (max-width: 640px) {
       .prose {
         font-size: 0.95rem;
       }
+
       .prose p {
         margin-top: 1em;
         margin-bottom: 1em;
       }
+
       .prose ul {
         padding-left: 1.25em;
       }
+
       .prose li {
         margin-top: 0.375em;
         margin-bottom: 0.375em;
       }
+
       .prose h1, .prose h2, .prose h3 {
         margin-top: 1.5em;
         margin-bottom: 0.75em;
       }
     }
+
     /* Styles pour améliorer la lisibilité du texte */
     #response .prose {
       color: #374151;
@@ -80,24 +91,29 @@
       overflow-wrap: break-word;
       hyphens: auto;
     }
+
     #response .prose > * + * {
       margin-top: 1em;
     }
+
     #response .prose blockquote {
       margin: 1.5em 0;
       padding-left: 1em;
       border-left: 4px solid #e5e7eb;
       font-style: italic;
     }
+
     #response .prose code {
       background-color: #f3f4f6;
       padding: 0.2em 0.4em;
       border-radius: 0.25em;
       font-size: 0.875em;
     }
+
     .active, .collapsible:hover {
       background-color: #ddd;
     }
+
     .content {
       padding: 0 18px;
       display: none;
@@ -126,7 +142,8 @@
       25% { transform: translateX(-5px); }
       75% { transform: translateX(5px); }
     }
-    /* Styles pour Select2 */
+
+    /* Ajout du style pour Select2 */
     .select2-container--default .select2-selection--single {
       border: 1px solid #e5e7eb;
       border-radius: 0.75rem;
@@ -164,7 +181,7 @@
     .select2-results__option {
       padding: 0.5rem 0.75rem;
     }
-    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
+    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
       background-color: #ede9fe;
       color:#374151;
     }
@@ -308,20 +325,7 @@
   </div>
 
   <!-- Bouton flottant DeepThink -->
-  <button id="deepthink-btn" style="
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    z-index: 1000;
-    background-color: #4f46e5;
-    color: white;
-    border: none;
-    border-radius: 50px;
-    padding: 15px 20px;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-    cursor: pointer;
-    transition: background-color 0.3s;
-  ">
+  <button id="deepthink-btn" class="fixed bottom-6 right-6 z-50 bg-indigo-600 text-white px-4 py-2 rounded-full shadow-lg hover:bg-indigo-700 focus:outline-none">
     DeepThink
   </button>
 
@@ -342,7 +346,7 @@
         },
         templateSelection: function (course) {
           return course.text;
-        }
+        },
       });
 
       // Configuration de marked
@@ -357,7 +361,7 @@
 
       moment.locale('fr');
 
-      // Configuration des notifications
+      // Configuration des notifications SweetAlert2
       const Toast = Swal.mixin({
         toast: true,
         position: 'top-end',
@@ -380,13 +384,13 @@
       addButtonAnimation('submit-btn');
       addButtonAnimation('copy-btn');
 
-      // Gestion du changement de type avec affichage personnalisé
+      // Gestion du changement de type
       $('#type-select').change(function() {
         const selectedOption = $(this).find('option:selected');
         const typeLabel = selectedOption.text();
         const type = $(this).val();
         let labelText;
-        if(type === '3') {
+        if (type === '3') {
           labelText = 'S - Synthèse';
         } else {
           labelText = `Type ${type} - ${typeLabel}`;
@@ -394,7 +398,7 @@
         $('#current-type-label').text(labelText);
       });
 
-      // Chargement des cours avec animation
+      // Chargement des cours
       function loadCourses() {
         return $.ajax({
           url: '/api/philosophy/courses',
@@ -408,23 +412,23 @@
         });
       }
       loadCourses()
-        .done(function(courses) {
-          const select = $('#course-select');
-          courses.forEach(course => {
-            const newOption = new Option(course.title, course.id, false, false);
-            $(newOption).data('author', course.author);
-            select.append(newOption);
-          });
-        })
-        .fail(function() {
-          Toast.fire({
-            icon: 'error',
-            title: 'Erreur de chargement des cours',
-            text: 'Veuillez réessayer ultérieurement'
-          });
+      .done(function(courses) {
+        const select = $('#course-select');
+        courses.forEach(course => {
+          const newOption = new Option(course.title, course.id, false, false);
+          $(newOption).data('author', course.author);
+          select.append(newOption);
         });
+      })
+      .fail(function() {
+        Toast.fire({
+          icon: 'error',
+          title: 'Erreur de chargement des cours',
+          text: 'Veuillez réessayer ultérieurement'
+        });
+      });
 
-      // Gestion du changement de cours avec animations
+      // Gestion du changement de cours
       $('#course-select').on('change', function() {
         const courseId = $(this).val();
         if (courseId) {
@@ -435,7 +439,8 @@
               $('.course-meta').addClass('animate-pulse');
             },
             success: function(course) {
-              $('.course-meta').removeClass('hidden animate-pulse').addClass('animate-fadeIn');
+              $('.course-meta').removeClass('hidden animate-pulse')
+                .addClass('animate-fadeIn');
               $('#course-author span').text(`Pr. ${course.author}`);
               $('#course-date span').text(new Date(course.updated_at).toLocaleDateString('fr-FR', {
                 day: 'numeric',
@@ -462,7 +467,7 @@
         }
       });
 
-      // Gestion de la soumission
+      // Gestion de la soumission standard
       $('#submit-btn').click(function() {
         const question = $('#question').val().trim();
         if (!question) {
@@ -600,7 +605,8 @@
         $(this).addClass('scale-95 bg-violet-100');
         navigator.clipboard.writeText(textToCopy)
           .then(() => {
-            $(this).removeClass('scale-95 bg-violet-100').addClass('bg-green-50 text-green-700');
+            $(this).removeClass('scale-95 bg-violet-100')
+              .addClass('bg-green-50 text-green-700');
             setTimeout(() => {
               $(this).removeClass('bg-green-50 text-green-700');
             }, 1000);
@@ -621,7 +627,8 @@
               textarea.select();
               document.execCommand('copy');
               document.body.removeChild(textarea);
-              $(this).removeClass('scale-95 bg-violet-100').addClass('bg-green-50 text-green-700');
+              $(this).removeClass('scale-95 bg-violet-100')
+                .addClass('bg-green-50 text-green-700');
               setTimeout(() => {
                 $(this).removeClass('bg-green-50 text-green-700');
               }, 1000);
@@ -631,7 +638,8 @@
                 timer: 2000
               });
             } catch (fallbackErr) {
-              $(this).removeClass('scale-95 bg-violet-100').addClass('bg-red-50 text-red-700');
+              $(this).removeClass('scale-95 bg-violet-100')
+                .addClass('bg-red-50 text-red-700');
               setTimeout(() => {
                 $(this).removeClass('bg-red-50 text-red-700');
               }, 1000);
@@ -645,138 +653,89 @@
           });
       });
 
-      // Ajout des styles d'animation personnalisés
-      const style = document.createElement('style');
-      style.textContent = `
-        @keyframes fadeIn {
-          from { opacity: 0; transform: translateY(10px); }
-          to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes slideUp {
-          from { opacity: 0; transform: translateY(20px); }
-          to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes shake {
-          0%, 100% { transform: translateX(0); }
-          25% { transform: translateX(-5px); }
-          75% { transform: translateX(5px); }
-        }
-        .animate-fadeIn {
-          animation: fadeIn 0.5s ease-out forwards;
-        }
-        .animate-slideUp {
-          animation: slideUp 0.5s ease-out forwards;
-        }
-        .animate-shake {
-          animation: shake 0.5s ease-in-out;
-        }
-      `;
-      document.head.appendChild(style);
-      const initialSelectValue = $('#type-select').val();
-      const initialSelectedText = $('#type-select option:selected').text();
-      let initialLabelText;
-      if(initialSelectValue === '3') {
-        initialLabelText = 'S - Synthèse';
-      } else {
-        initialLabelText = `Type ${initialSelectValue} - ${initialSelectedText}`;
-      }
-      $('#current-type-label').text(initialLabelText);
-
-      /* --- Code pour le bouton DeepThink --- */
-      // Vérifie si DeepThink a déjà été utilisé aujourd'hui
-      function canUseDeepThink() {
-        const lastUsed = localStorage.getItem('deepthink_last_used');
-        if (!lastUsed) return true;
-        const lastDate = new Date(lastUsed);
-        const now = new Date();
-        return (now - lastDate) > (24 * 60 * 60 * 1000);
+      // Bouton flottant DeepThink
+      // Vérification de la limite d'une utilisation par jour via localStorage
+      function isToday(dateStr) {
+        const today = new Date();
+        const date = new Date(dateStr);
+        return date.getFullYear() === today.getFullYear() &&
+               date.getMonth() === today.getMonth() &&
+               date.getDate() === today.getDate();
       }
 
-      // Met �� jour la date d'utilisation de DeepThink dans localStorage
-      function updateDeepThinkUsage() {
-        localStorage.setItem('deepthink_last_used', new Date().toISOString());
-      }
-
-      // Fonction d'appel à la route DeepThink
-      function callDeepThink(question, type, courseId) {
-        const data = {
-          question: question,
-          type: type,
-          courseId: courseId
-        };
+      $('#deepthink-btn').click(function() {
+        const lastUsed = localStorage.getItem('deepThinkLastUsed');
+        if (lastUsed && isToday(lastUsed)) {
+          Swal.fire({
+            icon: 'warning',
+            title: "Limite quotidienne",
+            text: "Vous ne pouvez utiliser DeepThink qu'une seule fois par jour."
+          });
+          return;
+        }
+        const question = $('#question').val().trim();
+        const type = $('#type-select').val();
+        const courseId = $('#course-select').val() || null;
+        if (!question) {
+          Swal.fire({
+            icon: 'error',
+            title: "Sujet manquant",
+            text: "Veuillez saisir un sujet dans le champ principal."
+          });
+          return;
+        }
+        Swal.fire({
+          title: 'DeepThink en cours',
+          html: `
+            <div class="flex justify-center">
+              <div class="w-16 h-16 relative">
+                <div class="absolute inset-0 rounded-full border-4 border-indigo-200 animate-ping"></div>
+                <div class="absolute inset-0 rounded-full border-4 border-indigo-500 animate-pulse"></div>
+              </div>
+            </div>
+            <p class="mt-4 text-gray-600">Veuillez patienter quelques instants...</p>
+          `,
+          allowOutsideClick: false,
+          showConfirmButton: false,
+          customClass: {
+            popup: 'rounded-2xl'
+          }
+        });
+        const data = { question, type, courseId };
         $.ajax({
           url: '/submit_philo_deepthink',
           method: 'POST',
           contentType: 'application/json',
           data: JSON.stringify(data),
-          beforeSend: function() {
-            Swal.fire({
-              title: 'Génération DeepThink en cours',
-              html: 'Veuillez patienter...',
-              allowOutsideClick: false,
-              didOpen: () => {
-                Swal.showLoading();
-              }
-            });
-          },
           success: function(response) {
             Swal.close();
+            const htmlContent = marked.parse(response.response);
+            $('#response > div').html(htmlContent);
+            $('#response').removeClass('hidden').addClass('animate-fadeIn');
+            $('#copy-btn').removeClass('hidden').addClass('animate-slideUp');
+            saveDissertation(question, response.response);
+            localStorage.setItem('deepThinkLastUsed', new Date().toISOString());
             Swal.fire({
-              title: 'DeepThink',
-              html: `<div style="text-align: left; max-height: 300px; overflow-y: auto;">${response.response}</div>`,
-              width: '600px'
+              icon: 'success',
+              title: 'DeepThink généré avec succès',
+              timer: 2000,
+              showConfirmButton: false
             });
-            updateDeepThinkUsage();
           },
           error: function() {
-            Swal.close();
             Swal.fire({
               icon: 'error',
-              title: 'Erreur',
-              text: 'Une erreur est survenue lors de l\'appel de DeepThink.'
+              title: 'Erreur DeepThink',
+              text: 'Une erreur est survenue lors de la génération DeepThink.',
+              customClass: {
+                popup: 'rounded-2xl'
+              }
             });
           }
         });
-      }
-
-      // Action du clic sur le bouton DeepThink
-      $('#deepthink-btn').click(function(){
-        if (!canUseDeepThink()) {
-          Swal.fire({
-            icon: 'warning',
-            title: 'Limite atteinte',
-            text: 'Vous ne pouvez utiliser DeepThink qu\'une seule fois par jour.'
-          });
-          return;
-        }
-        Swal.fire({
-          title: 'DeepThink',
-          input: 'textarea',
-          inputLabel: 'Saisissez votre sujet pour DeepThink',
-          inputPlaceholder: 'Entrez ici votre sujet...',
-          inputAttributes: {
-            'aria-label': 'Saisissez votre sujet pour DeepThink'
-          },
-          showCancelButton: true,
-          confirmButtonText: 'Valider',
-          cancelButtonText: 'Annuler',
-          preConfirm: (question) => {
-            if (!question || question.trim() === '') {
-              Swal.showValidationMessage('Veuillez saisir un sujet');
-            }
-            return question;
-          }
-        }).then((result) => {
-          if (result.isConfirmed) {
-            const question = result.value;
-            const type = '1';
-            const courseId = $('#course-select').val() || null;
-            callDeepThink(question, type, courseId);
-          }
-        });
       });
-      /* --- Fin du code DeepThink --- */
     });
   </script>
 </body>
 </html>
+