Update templates/index.html

templates/index.html

@@ -7,7 +7,6 @@
     <title>Mariam AI - Assistant Français Intelligent</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
-    <!-- MathJax retiré -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
@@ -29,48 +28,48 @@
             font-family: 'Plus Jakarta Sans', sans-serif;
             background-color: #fafafa;
             scroll-behavior: smooth;
-            -webkit-tap-highlight-color: transparent; /* Remove blue tap highlight on mobile */
+            -webkit-tap-highlight-color: transparent;
+            /* MODIFICATION: Empêcher la sélection de texte par défaut */
+            -webkit-user-select: none; /* Safari */
+            -moz-user-select: none;    /* Firefox */
+            -ms-user-select: none;     /* IE/Edge */
+            user-select: none;         /* Standard */
         }
 
+        /* MODIFICATION: Réactiver la sélection pour les champs modifiables */
+        input, textarea {
+            -webkit-user-select: text; /* Safari */
+            -moz-user-select: text;    /* Firefox */
+            -ms-user-select: text;     /* IE/Edge */
+            user-select: text;         /* Standard */
+        }
+        /* Optionnel: Si vous voulez autoriser la sélection dans les zones de sortie */
+        /* #francais-output, #etude-texte-output, .backup-content {
+            -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
+        } */
+
+
         .glassmorphism {
             background: rgba(255, 255, 255, 0.95);
             backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px); /* Safari */
+            -webkit-backdrop-filter: blur(10px);
             border: 1px solid rgba(255, 255, 255, 0.3);
             box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
         }
 
-        .card-hover {
-            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        .card-hover:hover {
-            transform: translateY(-4px);
-            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
-        }
+        .card-hover { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
+        .card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); }
 
-        .gradient-text {
-            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
-            -webkit-background-clip: text;
-            background-clip: text;
-            -webkit-text-fill-color: transparent;
-            text-fill-color: transparent; /* Standard property */
-        }
+        .gradient-text { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; }
 
-        .loading-dot {
-            animation: bounce 1.4s infinite;
-        }
+        .loading-dot { animation: bounce 1.4s infinite; }
         .loading-dot:nth-child(2) { animation-delay: 0.2s; }
         .loading-dot:nth-child(3) { animation-delay: 0.4s; }
         @keyframes bounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }
 
-        .custom-radio:checked+span {
-            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
-            color: white;
-            border-color: var(--primary);
-        }
+        .custom-radio:checked+span { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%); color: white; border-color: var(--primary); }
 
-        /* Styles pour les messages d'alerte */
+        /* Styles alertes */
         .alert-message { display: flex; align-items: flex-start; padding: 1rem; border-radius: 0.5rem; border-width: 1px; border-style: solid; }
         .alert-message i { margin-right: 0.75rem; font-size: 1.25rem; margin-top: 0.125rem; flex-shrink: 0; }
         .alert-message div p:first-child { font-weight: 500; }
@@ -103,19 +102,19 @@
         .image-preview-item:hover .remove-image { opacity: 1; }
         .remove-image:hover { background-color: rgba(0, 0, 0, 0.8); transform: scale(1.1); }
 
-        /* Style Prose (Zone de sortie) */
-        .prose { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; color: #2d3748; line-height: 1.7; font-size: 0.95rem; /* légèrement plus petit par défaut */ }
-        @media (min-width: 640px) { .prose { font-size: 1rem; } } /* Taille normale sur sm+ */
+        /* Style Prose */
+        .prose { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; color: #2d3748; line-height: 1.7; font-size: 0.95rem; }
+        @media (min-width: 640px) { .prose { font-size: 1rem; } }
         .prose h1, .prose h2, .prose h3, .prose h4 { color: var(--primary-dark); margin-top: 1.5em; margin-bottom: 0.5em; font-weight: 600; }
         .prose p { margin-bottom: 1em; }
         .prose ul, .prose ol { padding-left: 1.5em; margin-bottom: 1em; }
         .prose blockquote { border-left: 4px solid var(--primary); padding-left: 1em; font-style: italic; color: var(--secondary); margin: 1em 0; }
-        .prose code { background-color: #edf2f7; /* gray-200 */ padding: 0.2em 0.4em; border-radius: 0.25rem; font-size: 0.9em; }
-        .prose pre { background-color: #1a202c; /* gray-900 */ color: #e2e8f0; /* gray-200 */ padding: 1em; border-radius: 0.375rem; overflow-x: auto; }
+        .prose code { background-color: #edf2f7; padding: 0.2em 0.4em; border-radius: 0.25rem; font-size: 0.9em; }
+        .prose pre { background-color: #1a202c; color: #e2e8f0; padding: 1em; border-radius: 0.375rem; overflow-x: auto; }
         .prose pre code { background-color: transparent; padding: 0; border-radius: 0; font-size: 0.875em; }
 
         /* Loader */
-        .loader { display: inline-block; position: relative; width: 64px; height: 16px; /* Smaller */ }
+        .loader { display: inline-block; position: relative; width: 64px; height: 16px; }
         .loader div { position: absolute; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); animation-timing-function: cubic-bezier(0, 1, 1, 0); }
         .loader div:nth-child(1) { left: 6px; animation: loader1 0.6s infinite; }
         .loader div:nth-child(2) { left: 6px; animation: loader2 0.6s infinite; }
@@ -150,36 +149,32 @@
 
 <body class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 text-gray-800">
     <nav class="glassmorphism sticky top-0 z-50 border-b border-blue-100">
-        <!-- CORRECTION: Remplacement {* *} par <!-- -->
-        <div class="container mx-auto px-4 sm:px-6 py-3 sm:py-4"> <!-- Ajustement padding nav -->
+        <div class="container mx-auto px-4 sm:px-6 py-3 sm:py-4">
             <div class="flex items-center justify-between">
                 <div class="flex items-center space-x-3 sm:space-x-4">
                     <div class="bg-gradient-to-r from-blue-600 to-blue-800 rounded-lg p-2 shadow-lg transform hover:scale-110 transition-transform duration-300">
-                        <i class="fas fa-robot text-white text-lg sm:text-xl"></i> <!-- Taille icône -->
+                        <i class="fas fa-robot text-white text-lg sm:text-xl"></i>
                     </div>
-                    <h1 class="text-xl sm:text-2xl font-bold gradient-text">Mariam AI</h1> <!-- Taille titre -->
+                    <h1 class="text-xl sm:text-2xl font-bold gradient-text">Mariam AI</h1>
                 </div>
-                <div class="text-xs sm:text-sm text-blue-900 font-medium bg-blue-50 py-1 px-3 sm:px-4 rounded-full shadow-sm hidden sm:block">Assistant Français</div> <!-- Masqué sur xs -->
-                <div class="text-xs text-blue-900 font-medium bg-blue-50 py-1 px-3 rounded-full shadow-sm sm:hidden">Assistant</div> <!-- Version courte pour xs -->
+                <div class="text-xs sm:text-sm text-blue-900 font-medium bg-blue-50 py-1 px-3 sm:px-4 rounded-full shadow-sm hidden sm:block">Assistant Français</div>
+                <div class="text-xs text-blue-900 font-medium bg-blue-50 py-1 px-3 rounded-full shadow-sm sm:hidden">Assistant</div>
             </div>
         </div>
     </nav>
 
-    <!-- CORRECTION: Remplacement {* *} par <!-- -->
-    <main class="container mx-auto px-4 sm:px-6 py-8 sm:py-12"> <!-- Ajustement padding main -->
+    <main class="container mx-auto px-4 sm:px-6 py-8 sm:py-12">
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8">
             <!-- Section Travail Argumentatif -->
             <div class="card-hover glassmorphism rounded-2xl overflow-hidden scale-in">
-                 <!-- CORRECTION: Remplacement {* *} par <!-- -->
-                <div class="p-6 sm:p-8"> <!-- Ajustement padding carte -->
+                <div class="p-6 sm:p-8">
                     <div class="flex items-center space-x-3 sm:space-x-4 mb-6 sm:mb-8">
                         <div class="bg-blue-100 rounded-lg p-2 sm:p-3 transform rotate-3">
                             <i class="fas fa-pen-fancy text-blue-600 text-lg sm:text-xl"></i>
                         </div>
                         <h2 class="text-xl sm:text-2xl font-bold text-gray-800">Travail Argumentatif</h2>
                     </div>
-                    <!-- CORRECTION: Remplacement {* *} par <!-- -->
-                    <form id="francais-form" class="space-y-6 sm:space-y-8"> <!-- Ajustement espacement -->
+                    <form id="francais-form" class="space-y-6 sm:space-y-8">
                         <div class="space-y-2">
                             <label for="sujet-francais" class="block text-sm font-medium text-gray-700 flex items-center">
                                 <i class="fas fa-book-open mr-2 text-blue-500"></i>Sujet <span class="text-red-500 ml-1">*</span>
@@ -189,14 +184,13 @@
                                     class="w-full px-3 py-2 sm:px-4 sm:py-3 rounded-xl border-2 border-gray-200 focus:border-blue-500 focus:outline-none transition-all duration-200 resize-none text-base"
                                     placeholder="Entrez votre sujet ici..." required></textarea>
                             </div>
-                            <div class="text-xs text-gray-400 text-right" id="character-count">0 caractères</div>
+                            <div class="text-xs text-gray-400 text-right" id="character-count">0c</div>
                         </div>
 
                         <div class="space-y-3">
                             <label class="block text-sm font-medium text-gray-700 flex items-center">
                                 <i class="fas fa-tasks mr-2 text-blue-500"></i>Type d'argumentation
                             </label>
-                            <!-- Grid s'adapte déjà bien (2 cols par défaut, 4 sur sm+) -->
                             <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
                                 <label class="relative">
                                     <input type="radio" name="choix" value="Etaye" class="custom-radio absolute opacity-0 w-full h-full cursor-pointer" checked>
@@ -239,7 +233,7 @@
                                <span class="text-sm">Utiliser DeepThink</span>
                                <div class="deepthink-tooltip">
                                    <i class="fas fa-info-circle text-gray-400 ml-1"></i>
-                                   <span class="tooltip-text">Modèle avancé (Pro). Plus lent, meilleure qualité. Limité: 1/jour.</span>
+                                   <span class="tooltip-text">Modèle avancé (Gemini Pro). Plus lent, meilleure qualité. Limité: 1/jour.</span>
                                </div>
                            </label>
                             <span id="deepthink-status" class="text-xs text-gray-500 ml-2"></span>
@@ -253,8 +247,7 @@
                             </div>
                         </button>
                     </form>
-                     <!-- CORRECTION: Remplacement {* *} par <!-- -->
-                    <div id="francais-output" class="mt-6 sm:mt-8 p-4 sm:p-6 bg-blue-50 rounded-xl prose max-w-none shadow-inner min-h-[150px]"> <!-- Ajustement padding et min-height -->
+                    <div id="francais-output" class="mt-6 sm:mt-8 p-4 sm:p-6 bg-blue-50 rounded-xl prose max-w-none shadow-inner min-h-[150px]">
                         <!-- Le contenu généré sera inséré ici -->
                     </div>
                 </div>
@@ -262,8 +255,7 @@
 
             <!-- Section Étude de texte -->
             <div class="card-hover glassmorphism rounded-2xl overflow-hidden scale-in" style="animation-delay: 0.1s;">
-                 <!-- CORRECTION: Remplacement {* *} par <!-- -->
-                 <div class="p-6 sm:p-8"> <!-- Ajustement padding carte -->
+                 <div class="p-6 sm:p-8">
                     <div class="flex items-center space-x-3 sm:space-x-4 mb-6 sm:mb-8">
                         <div class="bg-blue-100 rounded-lg p-2 sm:p-3 transform -rotate-3">
                             <i class="fas fa-file-alt text-blue-600 text-lg sm:text-xl"></i>
@@ -297,8 +289,7 @@
                             </div>
                         </button>
                     </form>
-                     <!-- CORRECTION: Remplacement {* *} par <!-- -->
-                     <div id="etude-texte-output" class="mt-6 sm:mt-8 p-4 sm:p-6 bg-blue-50 rounded-xl prose max-w-none shadow-inner min-h-[150px]"> <!-- Ajustement padding et min-height -->
+                     <div id="etude-texte-output" class="mt-6 sm:mt-8 p-4 sm:p-6 bg-blue-50 rounded-xl prose max-w-none shadow-inner min-h-[150px]">
                         <!-- Le contenu analysé sera inséré ici -->
                     </div>
                 </div>
@@ -452,10 +443,10 @@
                 return;
             }
 
-            sauvegardes.forEach((sauvegarde) => { // Removed unused index
+            sauvegardes.forEach((sauvegarde) => {
                 const date = new Date(sauvegarde.date);
-                const formattedDate = date.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' }); // Shorter date
-                const displayTitle = (sauvegarde.titre || "Sans titre").length > 40 ? sauvegarde.titre.substring(0, 37) + '...' : (sauvegarde.titre || "Sans titre"); // Shorter title
+                const formattedDate = date.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' });
+                const displayTitle = (sauvegarde.titre || "Sans titre").length > 40 ? sauvegarde.titre.substring(0, 37) + '...' : (sauvegarde.titre || "Sans titre");
 
                 const sauvegardeDiv = document.createElement('div');
                 sauvegardeDiv.dataset.originalDate = sauvegarde.date;
@@ -490,7 +481,7 @@
                 sauvegardeDiv.querySelector('.copy-btn').addEventListener('click', (e) => {
                     e.stopPropagation();
                     navigator.clipboard.writeText(sauvegarde.contenu || '').then(() => {
-                        const icon = e.currentTarget.querySelector('i'); icon.className = 'fas fa-check text-green-500 text-xs sm:text-sm'; setTimeout(() => { icon.className = 'fas fa-copy text-xs sm:text-sm'; }, 1500); // Shorter duration
+                        const icon = e.currentTarget.querySelector('i'); icon.className = 'fas fa-check text-green-500 text-xs sm:text-sm'; setTimeout(() => { icon.className = 'fas fa-copy text-xs sm:text-sm'; }, 1500);
                     }).catch(err => { console.error('Copy error:', err); displayNotification("Erreur copie", "error"); });
                 });
 
@@ -548,7 +539,7 @@
                 e.preventDefault();
                 const originalButtonContent = submitButton.innerHTML;
                 submitButton.disabled = true;
-                submitButton.innerHTML = `<div class="flex items-center justify-center"><div class="loader"><div></div><div></div><div></div><div></div></div><span class="ml-2 text-sm sm:text-base">Génération...</span></div>`; // Responsive text
+                submitButton.innerHTML = `<div class="flex items-center justify-center"><div class="loader"><div></div><div></div><div></div><div></div></div><span class="ml-2 text-sm sm:text-base">Génération...</span></div>`;
 
                 const sujetValue = sujetTextarea.value.trim();
                 const isDeepThinkChecked = deepThinkCheckbox.checked;
@@ -564,10 +555,10 @@
                         const lastUsedDateStr = localStorage.getItem(DEEPTHINK_STORAGE_KEY);
                         const todayStr = new Date().toISOString().split('T')[0];
                         if (lastUsedDateStr === todayStr) {
-                            output.innerHTML = `<div class="alert-message alert-warning"><i class="fas fa-exclamation-triangle"></i><div><p>Limite atteinte</p><p>DeepThink déjà utilisé.</p></div></div>`; // Shorter message
+                            output.innerHTML = `<div class="alert-message alert-warning"><i class="fas fa-exclamation-triangle"></i><div><p>Limite atteinte</p><p>DeepThink déjà utilisé.</p></div></div>`;
                             checkDeepThinkAvailability(); submitButton.disabled = false; submitButton.innerHTML = originalButtonContent; return;
                         }
-                    } catch(e) { /* Proceed without check if localStorage fails */ }
+                    } catch(e) { /* Proceed without check */ }
                 }
                 output.innerHTML = `<div class="flex justify-center items-center p-6"><div class="loader"><div></div><div></div><div></div><div></div></div></div>`;
 
@@ -579,8 +570,8 @@
 
                     try { output.innerHTML = marked.parse(result.output || ''); } catch (e) { output.innerHTML = "Erreur d'affichage."; console.error(e); }
 
-                    const titreSauvegarde = sujetValue.substring(0, 40) + (sujetValue.length > 40 ? '...' : ''); // Even shorter title
-                    const deepThinkSuffix = isDeepThinkChecked ? ' [DT]' : ''; // Shorter suffix
+                    const titreSauvegarde = sujetValue.substring(0, 40) + (sujetValue.length > 40 ? '...' : '');
+                    const deepThinkSuffix = isDeepThinkChecked ? ' [DT]' : '';
                     sauvegarderReponse(titreSauvegarde + deepThinkSuffix, result.output);
 
                     if (isDeepThinkChecked) {
@@ -605,7 +596,7 @@
                 e.preventDefault();
                 const originalButtonContent = submitButton.innerHTML;
                 submitButton.disabled = true;
-                submitButton.innerHTML = `<div class="flex items-center justify-center"><div class="loader"><div></div><div></div><div></div><div></div></div><span class="ml-2 text-sm sm:text-base">Analyse...</span></div>`; // Responsive text
+                submitButton.innerHTML = `<div class="flex items-center justify-center"><div class="loader"><div></div><div></div><div></div><div></div></div><span class="ml-2 text-sm sm:text-base">Analyse...</span></div>`;
 
                  if (uploadedFiles.size === 0) {
                      output.innerHTML = `<div class="alert-message alert-warning"><i class="fas fa-exclamation-triangle"></i><div><p>Aucune image</p><p>Ajoutez au moins une image.</p></div></div>`;
@@ -621,7 +612,7 @@
 
                     try { output.innerHTML = marked.parse(result.output || ''); } catch (e) { output.innerHTML = "Erreur d'affichage."; console.error(e); }
 
-                    const titre = `Analyse img ${new Date().toLocaleDateString('fr-FR', { month: 'short', day: 'numeric' })}`; // Shorter title
+                    const titre = `Analyse img ${new Date().toLocaleDateString('fr-FR', { month: 'short', day: 'numeric' })}`;
                     sauvegarderReponse(titre, result.output);
                 } catch (error) {
                      console.error("Erreur soumission (img):", error);
@@ -641,7 +632,7 @@
         }
         function enhanceTextareaFocus() {
             const textarea = document.getElementById('sujet-francais'); const counter = document.getElementById('character-count'); if(!textarea || !counter) return;
-            textarea.addEventListener('input', () => { const length = textarea.value.length; counter.textContent = `${length}c`; textarea.classList.remove('border-red-500'); }); // Shorter counter
+            textarea.addEventListener('input', () => { const length = textarea.value.length; counter.textContent = `${length}c`; textarea.classList.remove('border-red-500'); });
         }
         function enhanceRadioButtons() {
              document.querySelectorAll('input[type="radio"] + span').forEach(label => {
@@ -669,6 +660,35 @@
             checkDeepThinkAvailability();
             afficherSauvegardes();
 
+            // MODIFICATION: Empêcher le menu contextuel (clic droit)
+            document.addEventListener('contextmenu', function(event) {
+                // Optionnel: Autoriser le clic droit sur les inputs/textareas
+                // if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
+                //    return;
+                // }
+                event.preventDefault();
+            });
+
+             // MODIFICATION: Empêcher le début de sélection (complément CSS)
+             document.addEventListener('selectstart', function(event) {
+                 // Autoriser la sélection dans les inputs et textareas
+                 if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
+                     return;
+                 }
+                 // Optionnel: Autoriser la sélection dans les zones de sortie générées
+                 // const outputIds = ['francais-output', 'etude-texte-output'];
+                 // let parent = event.target.closest('.prose'); // Check if selection starts within a prose element
+                 // if (parent && outputIds.includes(parent.id)) {
+                 //     return;
+                 // }
+                 // Optionnel: Autoriser la sélection dans les sauvegardes affichées
+                 // if (event.target.closest('.backup-content')) {
+                 //      return;
+                 // }
+
+                 event.preventDefault();
+             });
+
             // Welcome Message
             try {
                 const showWelcome = sessionStorage.getItem('welcomeShown') !== 'true';
@@ -679,7 +699,7 @@
                     const welcomeMsg = welcomeContainer.firstElementChild;
                     setTimeout(() => { welcomeMsg.classList.remove('opacity-0', 'translate-y-4'); }, 500);
                     welcomeMsg.querySelector('.close-welcome').addEventListener('click', () => closeWelcomeMessage(welcomeMsg));
-                    setTimeout(() => { if (document.body.contains(welcomeMsg)) closeWelcomeMessage(welcomeMsg); }, 6000); // Shorter duration
+                    setTimeout(() => { if (document.body.contains(welcomeMsg)) closeWelcomeMessage(welcomeMsg); }, 6000);
                     sessionStorage.setItem('welcomeShown', 'true');
                 }
             } catch(e) { console.warn("SessionStorage (Welcome):", e); }