Update templates/generale.html

templates/generale.html

@@ -17,81 +17,167 @@
   <!-- Anime.js -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" defer></script>
   <!-- MathJax -->
-  <script>
-    MathJax = {
-      tex: {
-        inlineMath: [['$', '$'], ['\\(', '\\)']],
-        displayMath: [['$$', '$$'], ['\\[', '\\]']],
-        processEscapes: true
-      },
-      options: {
-        skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']
-      },
-      startup: {
-        pageReady: () => {
-          return MathJax.startup.defaultPageReady().then(() => {
-            console.log('MathJax initial typesetting complete');
-          });
-        }
-      }
-    };
-  </script>
   <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" defer></script>
   <style>
-    /* Bouton animé avec un dégradé pastel */
-    .animated-button {
-      background-image: linear-gradient(to right, #a1c4fd, #c2e9fb);
-      background-size: 200% auto;
-      box-shadow: 0 4px 15px rgba(161, 196, 253, 0.5);
-      transition: background-position 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
-    }
-    .animated-button:hover {
-      background-position: right center;
-      transform: translateY(-2px);
-      box-shadow: 0 6px 20px rgba(161, 196, 253, 0.7);
-    }
-    /* Effet de soulignement sur les champs de saisie */
-    .input-underline {
-      background-image: linear-gradient(to right, #a1c4fd, #c2e9fb);
-      background-size: 0% 2px;
-      background-repeat: no-repeat;
-      background-position: left bottom;
-      transition: background-size 0.3s ease;
-    }
-    .input-underline:focus {
-      background-size: 100% 2px;
+    :root {
+      --primary-color: #008cba;
+      --background-color: #f0f8ff;
+      --animation-timing: 0.3s;
+    }
+
+    body {
+      margin: 0;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
+      background-color: var(--background-color);
+      min-height: 100vh;
+      padding: 20px;
+      box-sizing: border-box;
+      overflow-x: hidden;
+    }
+
+    .navbar {
+      background-color: var(--primary-color);
+      color: white;
+      padding: 15px;
+      width: 100%;
+      text-align: center;
+      font-size: 24px;
+      font-weight: bold;
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 1000;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+      animation: slideDown 0.5s ease-out;
+    }
+
+    .container {
+      margin-top: 80px;
+      max-width: 800px;
+      background-color: white;
+      border-radius: 8px;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+      padding: 20px;
+      animation: fadeInScale 0.5s forwards;
+    }
+
+    .button {
+      background-color: var(--primary-color);
+      color: white;
+      padding: 15px;
+      border: none;
+      border-radius: 8px;
+      font-size: 16px;
+      text-align: center;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      transform: translateZ(0);
+      will-change: transform;
+      transition: all var(--animation-timing) ease;
+    }
+
+    .button:hover {
+      transform: scale(1.05) translateY(-2px);
+      box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+    }
+
+    .button i {
+      margin-right: 10px;
+      transition: transform var(--animation-timing) ease;
+    }
+
+    .input-field {
+      width: 100%;
+      padding: 12px;
+      border: 2px solid var(--primary-color);
+      border-radius: 8px;
+      margin-bottom: 15px;
+      transition: all var(--animation-timing) ease;
+    }
+
+    .input-field:focus {
       outline: none;
+      box-shadow: 0 0 0 3px rgba(0,140,186,0.2);
     }
-    /* Conteneur de réponse */
+
     #response {
-      overflow-x: auto;
-      white-space: pre-wrap;
+      background-color: #f8f9fa;
+      border-radius: 8px;
+      padding: 15px;
+      margin-top: 20px;
+      animation: fadeIn 0.5s ease-out;
+    }
+
+    #loader {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 20px 0;
+    }
+
+    @keyframes float {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-10px); }
+    }
+
+    @keyframes fadeInScale {
+      0% { 
+        opacity: 0; 
+        transform: scale(0.5); 
+      }
+      100% { 
+        opacity: 1; 
+        transform: scale(1); 
+      }
+    }
+
+    @keyframes slideDown {
+      from { transform: translateY(-100%); }
+      to { transform: translateY(0); }
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    .url-item {
+      background-color: #f0f8ff;
+      padding: 10px;
+      border-radius: 6px;
+      margin-bottom: 8px;
+      display: flex;
+      align-items: center;
+      animation: fadeIn 0.3s ease-out;
     }
   </style>
 </head>
-<body class="bg-gradient-to-r from-gray-100 to-gray-200 min-h-screen flex items-center justify-center font-sans">
-  <div class="container mx-auto p-8 bg-white rounded-3xl shadow-2xl max-w-3xl">
+<body>
+  <div class="navbar">Mariam AI</div>
+
+  <div class="container mx-auto">
     <!-- En-tête -->
     <div class="flex flex-col md:flex-row md:justify-between items-start md:items-center mb-6 space-y-4 md:space-y-0">
       <h1 class="text-3xl font-bold text-gray-800">Poser une question générale</h1>
-      <button onclick="showInfo()" class="animated-button text-white px-4 py-2 rounded-lg flex items-center">
-        <i class="fas fa-info-circle mr-2"></i> Info
+      <button onclick="showInfo()" class="button">
+        <i class="fas fa-info-circle"></i> Info
       </button>
     </div>
 
     <!-- Zone de question -->
     <div class="mb-6">
       <label for="questionInput" class="block mb-2 text-lg font-medium text-gray-700">Votre question :</label>
-      <textarea id="questionInput" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-400 input-underline" rows="4" placeholder="Entrez votre question ici..."></textarea>
+      <textarea id="questionInput" class="input-field" rows="4" placeholder="Entrez votre question ici..."></textarea>
     </div>
 
     <!-- Zone d'ajout d'URLs -->
     <div class="mb-6">
       <label for="urlInput" class="block mb-2 text-lg font-medium text-gray-700">URLs (optionnel) :</label>
       <div class="flex">
-        <input type="text" id="urlInput" class="flex-grow p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-blue-400 input-underline" placeholder="Entrez une URL" />
-        <button onclick="addUrl()" class="animated-button text-white px-4 py-2 rounded-r-lg">
-          Ajouter
+        <input type="text" id="urlInput" class="input-field" placeholder="Entrez une URL" />
+        <button onclick="addUrl()" class="button ml-2">
+          <i class="fas fa-plus"></i> Ajouter
         </button>
       </div>
       <div id="urlList" class="mt-2 space-y-2"></div>
@@ -100,29 +186,27 @@
     <!-- Zone d'ajout de fichiers -->
     <div class="mb-6">
       <label for="fileUpload" class="block mb-2 text-lg font-medium text-gray-700">Fichiers (optionnel) :</label>
-      <input type="file" id="fileUpload" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-400 input-underline" multiple />
+      <input type="file" id="fileUpload" class="input-field" multiple />
     </div>
 
     <!-- Bouton de soumission -->
-    <button onclick="submitQuestion()" class="animated-button w-full text-white px-4 py-3 rounded-lg text-lg font-medium">
-      Soumettre
+    <button onclick="submitQuestion()" class="button w-full">
+      <i class="fas fa-paper-plane"></i> Soumettre
     </button>
 
     <!-- Loader -->
-    <div id="loader" class="hidden mt-4">
-      <div class="flex justify-center items-center">
-        <div class="animate-spin rounded-full h-12 w-12 border-t-4 border-b-4 border-blue-500"></div>
-        <p class="ml-2 text-gray-600">Chargement en cours...</p>
-      </div>
+    <div id="loader" class="hidden">
+      <div class="animate-spin rounded-full h-12 w-12 border-t-4 border-b-4 border-blue-500"></div>
+      <p class="ml-2 text-gray-600">Chargement en cours...</p>
     </div>
 
     <!-- Affichage de la réponse -->
-    <div id="response" class="mt-6 p-4 bg-gray-100 rounded-lg shadow-lg"></div>
+    <div id="response" class="hidden"></div>
 
     <!-- Bouton pour copier la réponse -->
     <div id="copyResponseContainer" class="hidden mt-4">
-      <button onclick="copyResponse()" class="animated-button w-full text-white px-4 py-2 rounded-lg flex items-center justify-center">
-        <i class="fas fa-copy mr-2"></i> Copier la réponse
+      <button onclick="copyResponse()" class="button w-full">
+        <i class="fas fa-copy"></i> Copier la réponse
       </button>
     </div>
   </div>