Spaces:

Docfile
/

M-anglais

Running

App Files Files Community

kuro223 commited on 20 days ago

Commit

fb2aa34

1 Parent(s): f1f6d47

o

Browse files

Files changed (1) hide show

templates/index.html +43 -59

templates/index.html CHANGED Viewed

@@ -46,11 +46,7 @@
     }
   </script>
   <style>
-    .gradient-bg {
-      background: linear-gradient(-45deg, #4CAF50, #81C784, #2E7D32, #1B5E20);
-      background-size: 400% 400%;
-      animation: gradient 8s ease infinite;
-    }
     .markdown-content {
       width: 100%;
       overflow-wrap: break-word;
@@ -125,54 +121,42 @@
     .animate-fade-in {
       animation: fadeIn 1s ease-out;
     }
-    .card {
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-      backdrop-filter: blur(8px);
-      transition: all 0.3s ease;
-    }
-    .card:hover {
-      transform: translateY(-4px);
-      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
-    }
-    .glass-effect {
-      background: rgba(255, 255, 255, 0.95);
-      backdrop-filter: blur(10px);
-    }
   </style>
 </head>
-<body class="gradient-bg min-h-screen font-sans">
   <div class="container mx-auto px-4 py-12 max-w-6xl">
-    <!-- Header -->
-    <header class="text-center mb-16 animate-fade-in">
-      <h1 class="text-6xl font-bold text-white mb-4 drop-shadow-lg animate-float">
-        ✨ Mariam Anglais ✨
-      </h1>
-      <p class="text-white text-xl font-light tracking-wide">
-        Téléchargez vos images, choisissez votre type d'analyse et laissez la magie opérer.
-      </p>
-    </header>
     <!-- Main Content -->
     <div class="grid md:grid-cols-2 gap-12">
-      <!-- Upload Section -->
-      <div class="glass-effect rounded-2xl card p-8">
         <h2 class="text-2xl font-semibold text-primary mb-6 flex items-center gap-2">
           <svg class="h-8 w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
           </svg>
           Téléchargement d'images
         </h2>
-        <div
-          class="upload-zone border-3 border-dashed border-primary/50 rounded-lg p-10 text-center cursor-pointer hover:bg-white/50 transition-all duration-300"
-          onclick="document.getElementById('image-upload').click()">
           <input type="file" id="image-upload" multiple accept="image/*" class="hidden" />
           <p class="text-gray-600 font-medium">Cliquez ou glissez vos images ici</p>
         </div>
         <div id="preview-container" class="mt-6 grid grid-cols-2 gap-4"></div>
       </div>
-      <!-- Analysis Type Section -->
-      <div class="glass-effect rounded-2xl card p-8">
         <h2 class="text-2xl font-semibold text-primary mb-6 flex items-center gap-2">
           <svg class="h-8 w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2a4 4 0 00-4-4H3"></path>
@@ -181,7 +165,7 @@
           Choix du type d'analyse
         </h2>
         <div class="space-y-6">
-          <label class="flex flex-col p-5 rounded-lg border-2 border-gray-200 cursor-pointer hover:border-primary/50 hover:bg-white/50 transition-all duration-300">
             <div class="flex items-center">
               <input type="radio" name="analysis_type" value="text" class="h-5 w-5 text-primary" />
               <span class="ml-3 text-lg font-medium text-secondary">🔍 Analyse de Texte</span>
@@ -190,7 +174,7 @@
               Analyse de texte détaillée comprenant INTRODUCTION, SUMMARY, COMMENTARY et EVALUATION.
             </p>
           </label>
-          <label class="flex flex-col p-5 rounded-lg border-2 border-gray-200 cursor-pointer hover:border-primary/50 hover:bg-white/50 transition-all duration-300">
             <div class="flex items-center">
               <input type="radio" name="analysis_type" value="icon" class="h-5 w-5 text-primary" />
               <span class="ml-3 text-lg font-medium text-secondary">🧠 Document iconographique</span>
@@ -200,14 +184,14 @@
             </p>
           </label>
         </div>
-        <button id="submit-btn" class="w-full mt-8 bg-primary hover:bg-primary-dark text-white font-bold py-4 px-6 rounded-xl transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed">
           🚀 Soumettre
         </button>
       </div>
     </div>
-    <!-- Results Section -->
-    <div id="results" class="mt-16 glass-effect rounded-2xl card p-8 hidden animate-fade-in">
       <div class="flex justify-between items-center mb-6">
         <h2 class="text-2xl font-semibold text-primary">📝 Résultat de l'analyse</h2>
         <button onclick="copyResults()" class="flex items-center gap-2 bg-primary/10 hover:bg-primary/20 text-primary px-4 py-2 rounded-lg transition-all duration-300">
@@ -220,11 +204,11 @@
       <div id="analysis-result" class="markdown-content prose max-w-none"></div>
     </div>
-    <!-- Footer -->
-    <footer class="mt-16 text-center text-white">
-      <hr class="my-6 border-white/20" />
-      <p>© 2025 Mariam AI - Tous droits réservés.</p>
-    </footer>
   </div>
   <script>
@@ -252,21 +236,21 @@
       const uploadZone = document.querySelector('.upload-zone');
-      uploadZone.addEventListener('dragover', (e) => {
-        e.preventDefault();
-        uploadZone.classList.add('bg-white/50');
-      });
-      uploadZone.addEventListener('dragleave', () => {
-        uploadZone.classList.remove('bg-white/50');
-      });
-      uploadZone.addEventListener('drop', (e) => {
-        e.preventDefault();
-        uploadZone.classList.remove('bg-white/50');
-        uploadedFiles = Array.from(e.dataTransfer.files).filter(file => file.type.startsWith('image/'));
-        updatePreview();
-      });
       function handleFileSelect(event) {
         uploadedFiles = Array.from(event.target.files);

     }
   </script>
   <style>
     .markdown-content {
       width: 100%;
       overflow-wrap: break-word;
     .animate-fade-in {
       animation: fadeIn 1s ease-out;
     }
   </style>
 </head>
+ <body class="bg-white min-h-screen font-sans">
   <div class="container mx-auto px-4 py-12 max-w-6xl">
+    <!-- Header -->
+    <header class="text-center mb-16 animate-fade-in">
+      <h1 class="text-6xl font-bold text-gray-900 mb-4">
+        ✨ Mariam Anglais ✨
+      </h1>
+      <p class="text-gray-600 text-xl font-light tracking-wide">
+        Téléchargez vos images, choisissez votre type d'analyse et laissez la magie opérer.
+      </p>
+    </header>
     <!-- Main Content -->
     <div class="grid md:grid-cols-2 gap-12">
+      <!-- Upload Section -->
+      <div class="bg-gray-50 p-8">
         <h2 class="text-2xl font-semibold text-primary mb-6 flex items-center gap-2">
           <svg class="h-8 w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
           </svg>
           Téléchargement d'images
         </h2>
+        <div
+          class="upload-zone bg-gray-100 p-10 text-center cursor-pointer hover:bg-gray-200 transition-colors duration-300"
+          onclick="document.getElementById('image-upload').click()">
           <input type="file" id="image-upload" multiple accept="image/*" class="hidden" />
           <p class="text-gray-600 font-medium">Cliquez ou glissez vos images ici</p>
         </div>
         <div id="preview-container" class="mt-6 grid grid-cols-2 gap-4"></div>
       </div>
+      <!-- Analysis Type Section -->
+      <div class="bg-gray-50 p-8">
         <h2 class="text-2xl font-semibold text-primary mb-6 flex items-center gap-2">
           <svg class="h-8 w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2a4 4 0 00-4-4H3"></path>
           Choix du type d'analyse
         </h2>
         <div class="space-y-6">
+          <label class="flex flex-col p-5 bg-white cursor-pointer hover:bg-gray-100 transition-colors duration-300">
             <div class="flex items-center">
               <input type="radio" name="analysis_type" value="text" class="h-5 w-5 text-primary" />
               <span class="ml-3 text-lg font-medium text-secondary">🔍 Analyse de Texte</span>
               Analyse de texte détaillée comprenant INTRODUCTION, SUMMARY, COMMENTARY et EVALUATION.
             </p>
           </label>
+          <label class="flex flex-col p-5 bg-white cursor-pointer hover:bg-gray-100 transition-colors duration-300">
             <div class="flex items-center">
               <input type="radio" name="analysis_type" value="icon" class="h-5 w-5 text-primary" />
               <span class="ml-3 text-lg font-medium text-secondary">🧠 Document iconographique</span>
             </p>
           </label>
         </div>
+        <button id="submit-btn" class="w-full mt-8 bg-primary hover:bg-primary-dark text-white font-bold py-4 px-6 transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed">
           🚀 Soumettre
         </button>
       </div>
     </div>
+    <!-- Results Section -->
+    <div id="results" class="mt-16 bg-gray-50 p-8 hidden animate-fade-in">
       <div class="flex justify-between items-center mb-6">
         <h2 class="text-2xl font-semibold text-primary">📝 Résultat de l'analyse</h2>
         <button onclick="copyResults()" class="flex items-center gap-2 bg-primary/10 hover:bg-primary/20 text-primary px-4 py-2 rounded-lg transition-all duration-300">
       <div id="analysis-result" class="markdown-content prose max-w-none"></div>
     </div>
+    <!-- Footer -->
+    <footer class="mt-16 text-center text-gray-600">
+      <hr class="my-6 border-gray-300" />
+      <p>© 2025 Mariam AI - Tous droits réservés.</p>
+    </footer>
   </div>
   <script>
       const uploadZone = document.querySelector('.upload-zone');
+       uploadZone.addEventListener('dragover', (e) => {
+         e.preventDefault();
+         uploadZone.classList.add('bg-gray-200');
+       });
+       uploadZone.addEventListener('dragleave', () => {
+         uploadZone.classList.remove('bg-gray-200');
+       });
+       uploadZone.addEventListener('drop', (e) => {
+         e.preventDefault();
+         uploadZone.classList.remove('bg-gray-200');
+         uploadedFiles = Array.from(e.dataTransfer.files).filter(file => file.type.startsWith('image/'));
+         updatePreview();
+       });
       function handleFileSelect(event) {
         uploadedFiles = Array.from(event.target.files);