Update templates/philosophie.html

templates/philosophie.html

@@ -141,150 +141,265 @@
         </div>
     </div>
 
-    <script>
-    
-    
+  <script>
     $(document).ready(function() {
-    // Configuration de marked avec support de la syntaxe GFM
-    marked.setOptions({
-        breaks: true,
-        gfm: true,
-        headerIds: true,
-        langPrefix: 'language-',
-        smartLists: true,
-        smartypants: true
-    });
+        // Configuration de marked avec support de la syntaxe GFM
+        marked.setOptions({
+            breaks: true,
+            gfm: true,
+            headerIds: true,
+            langPrefix: 'language-',
+            smartLists: true,
+            smartypants: true
+        });
+
+        // Configuration des notifications
+        const Toast = Swal.mixin({
+            toast: true,
+            position: 'top-end',
+            showConfirmButton: false,
+            timer: 3000,
+            timerProgressBar: true,
+            customClass: {
+                popup: 'rounded-lg shadow-xl border border-gray-100'
+            }
+        });
 
-    // Configuration des notifications
-    const Toast = Swal.mixin({
-        toast: true,
-        position: 'top-end',
-        showConfirmButton: false,
-        timer: 3000,
-        timerProgressBar: true,
-        customClass: {
-            popup: 'rounded-lg shadow-xl border border-gray-100'
+        // Animation des boutons
+        function addButtonAnimation(buttonId) {
+            $(`#${buttonId}`).on('mousedown', function() {
+                $(this).addClass('scale-95');
+            }).on('mouseup mouseleave', function() {
+                $(this).removeClass('scale-95');
+            });
         }
-    });
+        addButtonAnimation('submit-btn');
+        addButtonAnimation('copy-btn');
 
-    // Gestion du changement de cours
-    $('#course-select').change(function() {
-        const courseId = $(this).val();
-        if (courseId) {
-            $.ajax({
-                url: `/api/philosophy/courses/${courseId}`,
+        // Gestion du changement de type
+        $('#type-select').change(function() {
+            const type = $(this).val();
+            const labels = {
+                '1': 'Dissertation classique',
+                '2': 'Analyse comparative'
+            };
+            $('#current-type-label').text(`Type ${type} - ${labels[type]}`);
+        });
+
+        // Chargement des cours avec animation
+        function loadCourses() {
+            return $.ajax({
+                url: '/api/philosophy/courses',
                 method: 'GET',
                 beforeSend: function() {
-                    $('.course-meta').addClass('animate-pulse');
+                    $('#course-select').addClass('animate-pulse');
                 },
-                success: function(course) {
-                    $('.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',
-                        month: 'long',
-                        year: 'numeric' }));
-
-                    // Afficher une notification de succès
-                    Toast.fire({
-                        icon: 'success',
-                        title: 'Cours chargé avec succès'
-                    });
-                },
-                error: function() {
-                    Toast.fire({
-                        icon: 'error',
-                        title: 'Erreur',
-                        text: 'Impossible de charger les détails du cours'
-                    });
+                complete: function() {
+                    $('#course-select').removeClass('animate-pulse');
                 }
             });
-        } else {
-            $('.course-meta').addClass('animate-fadeOut').on('animationend', function() {
-                $(this).addClass('hidden').removeClass('animate-fadeOut');
-            });
         }
-    });
 
-    // Gestion de la soumission avec conversion en Markdown
-    $('#submit-btn').click(function() {
-        const question = $('#question').val().trim();
-
-        if (!question) {
-            $('#question').addClass('animate-shake border-red-300');
-            setTimeout(() => {
-                $('#question').removeClass('animate-shake border-red-300');
-            }, 1000);
-
-            Swal.fire({
-                icon: 'warning',
-                title: 'Champ requis',
-                text: 'Veuillez saisir votre sujet de dissertation',
-                showClass: {
-                    popup: 'animate__animated animate__fadeInDown'
-                },
-                hideClass: {
-                    popup: 'animate__animated animate__fadeOutUp'
-                },
-                customClass: {
-                    popup: 'rounded-2xl',
-                    confirmButton: 'bg-violet-600 hover:bg-violet-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200'
-                }
+        loadCourses()
+            .done(function(courses) {
+                const select = $('#course-select');
+                courses.forEach(course => {
+                    select.append(`<option value="${course.id}">${course.title}</option>`);
+                });
+            })
+            .fail(function() {
+                Toast.fire({
+                    icon: 'error',
+                    title: 'Erreur de chargement des cours',
+                    text: 'Veuillez réessayer ultérieurement'
+                });
             });
-            return;
-        }
 
-        Swal.fire({
-            title: 'Génération en cours',
-            html: `<div class="animate-pulse">Veuillez patienter quelques instants...</div>`,
-            allowOutsideClick: false,
-            showConfirmButton: false
+        // Gestion du changement de cours avec animations
+        $('#course-select').change(function() {
+            const courseId = $(this).val();
+            if (courseId) {
+                $.ajax({
+                    url: `/api/philosophy/courses/${courseId}`,
+                    method: 'GET',
+                    beforeSend: function() {
+                        $('.course-meta').addClass('animate-pulse');
+                    },
+                    success: function(course) {
+                        $('.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',
+                            month: 'long',
+                            year: 'numeric' }));
+
+                        // Afficher une notification de succès
+                        Toast.fire({
+                            icon: 'success',
+                            title: 'Cours chargé avec succès'
+                        });
+                    },
+                    error: function() {
+                        Toast.fire({
+                            icon: 'error',
+                            title: 'Erreur',
+                            text: 'Impossible de charger les détails du cours'
+                        });
+                    }
+                });
+            } else {
+                $('.course-meta').addClass('animate-fadeOut').on('animationend', function() {
+                    $(this).addClass('hidden').removeClass('animate-fadeOut');
+                });
+            }
         });
 
-        const data = {
-            question: question,
-            type: $('#type-select').val(),
-            courseId: $('#course-select').val() || null
-        };
-
-        $.ajax({
-            url: '/submit_philo',
-            method: 'POST',
-            contentType: 'application/json',
-            data: JSON.stringify(data),
-            success: function(data) {
-                Swal.close();
-
-                // Conversion et affichage en Markdown
-                const htmlContent = marked.parse(data.response);
-                $('#response > div').html(htmlContent);
-                $('#response').removeClass('hidden').addClass('animate-fadeIn');
+        // Gestion de la soumission avec conversion en Markdown
+        $('#submit-btn').click(function() {
+            const question = $('#question').val().trim();
 
-                Toast.fire({
-                    icon: 'success',
-                    title: 'Dissertation générée avec succès',
-                    timer: 2000
-                });
+            if (!question) {
+                $('#question').addClass('animate-shake border-red-300');
+                setTimeout(() => {
+                    $('#question').removeClass('animate-shake border-red-300');
+                }, 1000);
 
-                // Afficher le bouton de copie
-                $('#copy-btn').removeClass('hidden').addClass('animate-slideUp');
-            },
-            error: function() {
                 Swal.fire({
-                    icon: 'error',
-                    title: 'Erreur de génération',
-                    text: 'Une erreur est survenue lors de la génération de votre dissertation.',
+                    icon: 'warning',
+                    title: 'Champ requis',
+                    text: 'Veuillez saisir votre sujet de dissertation',
+                    showClass: {
+                        popup: 'animate__animated animate__fadeInDown'
+                    },
+                    hideClass: {
+                        popup: 'animate__animated animate__fadeOutUp'
+                    },
                     customClass: {
                         popup: 'rounded-2xl',
                         confirmButton: 'bg-violet-600 hover:bg-violet-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200'
                     }
                 });
+                return;
             }
+
+            Swal.fire({
+                title: 'Génération en cours',
+                html: `<div class="animate-pulse">Veuillez patienter quelques instants...</div>`,
+                allowOutsideClick: false,
+                showConfirmButton: false
+            });
+
+            const data = {
+                question: question,
+                type: $('#type-select').val(),
+                courseId: $('#course-select').val() || null
+            };
+
+            $.ajax({
+                url: '/submit_philo',
+                method: 'POST',
+                contentType: 'application/json',
+                data: JSON.stringify(data),
+                success: function(data) {
+                    Swal.close();
+
+                    // Conversion et affichage en Markdown
+                    const htmlContent = marked.parse(data.response);
+                    $('#response > div').html(htmlContent);
+                    $('#response').removeClass('hidden').addClass('animate-fadeIn');
+
+                    Toast.fire({
+                        icon: 'success',
+                        title: 'Dissertation générée avec succès',
+                        timer: 2000
+                    });
+
+                    // Afficher le bouton de copie
+                    $('#copy-btn').removeClass('hidden').addClass('animate-slideUp');
+                },
+                error: function() {
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Erreur de génération',
+                        text: 'Une erreur est survenue lors de la génération de votre dissertation.',
+                        customClass: {
+                            popup: 'rounded-2xl',
+                            confirmButton: 'bg-violet-600 hover:bg-violet-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200'
+                        }
+                    });
+                }
+            });
         });
+
+        // Gestion de la copie avec retour visuel amélioré
+        $('#copy-btn').click(function() {
+            const response = $('#response').text();
+
+            $(this).addClass('scale-95 bg-violet-100');
+            navigator.clipboard.writeText(response)
+                .then(() => {
+                    $(this).removeClass('scale-95 bg-violet-100')
+                        .addClass('bg-green-50 text-green-700');
+
+                    setTimeout(() => {
+                        $(this).removeClass('bg-green-50 text-green-700');
+                    }, 1000);
+
+                    Toast.fire({
+                        icon: 'success',
+                        title: 'Copié avec succès',
+                        text: 'Le contenu a été copié dans votre presse-papiers',
+                        timer: 2000
+                    });
+                })
+                .catch(() => {
+                    $(this).removeClass('scale-95 bg-violet-100')
+                        .addClass('bg-red-50 text-red-700');
+
+                    setTimeout(() => {
+                        $(this).removeClass('bg-red-50 text-red-700');
+                    }, 1000);
+
+                    Toast.fire({
+                        icon: 'error',
+                        title: 'Erreur de copie',
+                        text: 'Impossible de copier le contenu',
+                        timer: 3000
+                    });
+                });
+        });
+
+        // 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);
     });
-});
-        
-    </script>
+                      </script>
+
+      
 </body>
 </html>