Update templates/index.html

templates/index.html

@@ -4,32 +4,59 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mariam AI - Analyse d'Image</title>
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
-    <style>
-        @layer utilities {
-            .markdown-content {
-                @apply prose prose-sm md:prose-base lg:prose-lg mx-auto;
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    typography: {
+                        DEFAULT: {
+                            css: {
+                                maxWidth: 'none',
+                                table: {
+                                    width: '100%'
+                                }
+                            }
+                        }
+                    }
+                }
             }
+        }
+    </script>
 
-            .markdown-content table {
-                @apply w-full table-auto border-collapse my-4;
-            }
+    <!-- Autres CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
 
-            .markdown-content th,
-            .markdown-content td {
-                @apply border border-gray-300 p-2 text-left align-top break-words;
-                min-width: auto;
-                white-space: normal;
-            }
+    <style>
+        /* Base styles */
+        .markdown-content {
+            width: 100%;
+            max-width: 100%;
+            overflow-x: auto;
+        }
 
-            .markdown-content pre {
-                @apply overflow-x-auto p-4 rounded-lg bg-gray-100;
-            }
+        .markdown-content table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 1rem 0;
+        }
+
+        .markdown-content th,
+        .markdown-content td {
+            border: 1px solid #e5e7eb;
+            padding: 0.75rem;
+            text-align: left;
         }
 
+        .markdown-content th {
+            background-color: #f9fafb;
+        }
+
+        /* Loader */
         .loader {
             width: 48px;
             height: 48px;
@@ -46,6 +73,7 @@
             100% { transform: rotate(360deg); }
         }
 
+        /* Animations */
         .fade-in {
             animation: fadeIn 0.3s ease-in;
         }
@@ -55,119 +83,130 @@
             100% { opacity: 1; }
         }
 
+        /* Upload zone styles */
         .upload-zone {
-            @apply relative border-2 border-dashed border-indigo-500 rounded-lg p-8 transition-all duration-300 ease-in-out;
-        }
-
-        .upload-zone.drag-over {
-            @apply border-indigo-600 bg-indigo-50;
-        }
-
-        .tab-button {
-            @apply px-4 py-2 rounded-lg transition-all duration-200 text-sm md:text-base;
+            border: 2px dashed #6366F1;
+            border-radius: 0.5rem;
+            padding: 2rem;
+            transition: all 0.3s ease;
         }
 
-        .tab-button:not(.active) {
-            @apply bg-white text-indigo-600 hover:bg-indigo-50;
+        .upload-zone:hover {
+            border-color: #4F46E5;
+            background-color: #EEF2FF;
         }
 
-        .tab-button.active {
-            @apply bg-indigo-600 text-white;
-        }
-
-        .backup-item {
-            @apply flex flex-col md:flex-row justify-between items-start md:items-center gap-2 p-4 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors duration-200;
-        }
-
-        .backup-actions {
-            @apply flex gap-2 w-full md:w-auto justify-end;
+        /* SweetAlert customization */
+        .swal2-popup {
+            font-size: 0.875rem;
         }
     </style>
 </head>
 
 <body class="min-h-screen bg-gray-50">
-    <header class="bg-white shadow-sm sticky top-0 z-50">
+    <header class="bg-white shadow-sm">
         <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8">
             <h1 class="text-2xl md:text-3xl font-bold text-indigo-600">Mariam AI</h1>
             <p class="mt-1 text-sm text-gray-500">Assistant pour commentaire composé</p>
         </div>
     </header>
 
-    <main class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8 space-y-8">
-        <form id="uploadForm" class="bg-white rounded-xl shadow-sm p-6">
-            <div class="upload-zone" id="dropZone">
-                <input type="file" id="imageInput" accept="image/*" class="hidden" />
-                <label for="imageInput" class="block text-center cursor-pointer">
-                    <svg class="mx-auto h-12 w-12 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                    </svg>
-                    <p id="fileName" class="mt-2 text-sm text-gray-500">
-                        Cliquez ou glissez une image ici
-                    </p>
-                </label>
-            </div>
-
-            <div id="imagePreview" class="hidden mt-6">
-                <div class="relative max-w-md mx-auto">
-                    <img id="preview" src="#" alt="Prévisualisation" class="rounded-lg shadow-md max-h-[400px] w-full object-contain" />
-                    <button type="button" onclick="removeImage()" class="absolute top-2 right-2 p-2 rounded-full bg-white/90 hover:bg-red-500 hover:text-white transition-colors duration-200">
-                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+    <main class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
+        <div class="bg-white rounded-lg shadow p-6 mb-8">
+            <form id="uploadForm" class="space-y-6">
+                <div class="upload-zone" id="dropZone">
+                    <input type="file" id="imageInput" accept="image/*" class="hidden">
+                    <label for="imageInput" class="block text-center cursor-pointer">
+                        <svg class="mx-auto h-12 w-12 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+                                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                         </svg>
-                    </button>
+                        <p id="fileName" class="mt-2 text-sm text-gray-500">
+                            Cliquez ou glissez une image ici
+                        </p>
+                    </label>
                 </div>
-            </div>
 
-            <div class="mt-6 flex justify-center">
-                <button type="submit" class="inline-flex items-center px-6 py-3 rounded-lg bg-indigo-600 text-white font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
-                    Analyser l'image
-                </button>
-            </div>
-        </form>
+                <div id="imagePreview" class="hidden">
+                    <div class="relative max-w-lg mx-auto">
+                        <img id="preview" src="#" alt="Prévisualisation" 
+                             class="rounded-lg shadow-md max-h-[400px] w-full object-contain">
+                        <button type="button" onclick="removeImage()" 
+                                class="absolute top-2 right-2 p-2 rounded-full bg-white/90 hover:bg-red-500 hover:text-white
+                                       transition-colors duration-200">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+                                      d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="flex justify-center">
+                    <button type="submit" 
+                            class="px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg
+                                   hover:bg-indigo-700 focus:outline-none focus:ring-2 
+                                   focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
+                        Analyser l'image
+                    </button>
+                </div>
+            </form>
+        </div>
 
         <div id="loading" class="hidden">
-            <div class="flex flex-col items-center justify-center gap-4">
+            <div class="flex flex-col items-center justify-center space-y-4">
                 <span class="loader"></span>
                 <p class="text-gray-500">Analyse en cours, veuillez patienter...</p>
             </div>
         </div>
 
-        <div id="results" class="hidden space-y-6">
-            <div class="flex justify-center gap-2">
-                <button id="showDissertation" class="tab-button active">Dissertation</button>
-                <button id="showTableau" class="tab-button">Tableau</button>
-                <button id="showBackups" class="tab-button">Sauvegardes</button>
+        <div id="results" class="space-y-8 hidden">
+            <div class="flex justify-center space-x-4">
+                <button id="showDissertation" 
+                        class="px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700
+                               transition-colors duration-200">
+                    Dissertation
+                </button>
+                <button id="showTableau" 
+                        class="px-4 py-2 rounded-lg bg-white text-indigo-600 hover:bg-indigo-50
+                               transition-colors duration-200">
+                    Tableau
+                </button>
+                <button id="showBackups" 
+                        class="px-4 py-2 rounded-lg bg-white text-indigo-600 hover:bg-indigo-50
+                               transition-colors duration-200">
+                    Sauvegardes
+                </button>
             </div>
 
-            <div id="dissertationTab" class="tab-content active">
-                <div class="bg-white rounded-xl shadow-sm p-6">
-                    <h2 class="text-xl md:text-2xl font-bold text-gray-900 mb-4">Dissertation</h2>
-                    <div id="dissertationResult" class="markdown-content"></div>
-                    <button id="saveDissertation" class="mt-6 px-4 py-2 rounded-lg bg-green-600 text-white hover:bg-green-700 transition-colors duration-200">
-                        Sauvegarder la dissertation
-                    </button>
-                </div>
+            <div id="dissertationTab" class="tab-content bg-white rounded-lg shadow p-6">
+                <h2 class="text-xl font-bold text-gray-900 mb-4">Dissertation</h2>
+                <div id="dissertationResult" class="markdown-content"></div>
+                <button id="saveDissertation" 
+                        class="mt-4 px-6 py-2 bg-green-600 text-white rounded-lg
+                               hover:bg-green-700 transition-colors duration-200">
+                    Sauvegarder la dissertation
+                </button>
             </div>
 
-            <div id="tableauTab" class="tab-content hidden">
-                <div class="bg-white rounded-xl shadow-sm p-6">
-                    <h2 class="text-xl md:text-2xl font-bold text-gray-900 mb-4">Tableau d'analyse</h2>
-                    <div id="tableauResult" class="markdown-content"></div>
-                    <button id="saveTableau" class="mt-6 px-4 py-2 rounded-lg bg-green-600 text-white hover:bg-green-700 transition-colors duration-200">
-                        Sauvegarder le tableau
-                    </button>
-                </div>
+            <div id="tableauTab" class="tab-content bg-white rounded-lg shadow p-6 hidden">
+                <h2 class="text-xl font-bold text-gray-900 mb-4">Tableau d'analyse</h2>
+                <div id="tableauResult" class="markdown-content"></div>
+                <button id="saveTableau" 
+                        class="mt-4 px-6 py-2 bg-green-600 text-white rounded-lg
+                               hover:bg-green-700 transition-colors duration-200">
+                    Sauvegarder le tableau
+                </button>
             </div>
 
-            <div id="backupsTab" class="tab-content hidden">
-                <div class="bg-white rounded-xl shadow-sm p-6">
-                    <h2 class="text-xl md:text-2xl font-bold text-gray-900 mb-4">Sauvegardes locales</h2>
-                    <div id="backupList" class="space-y-3"></div>
-                </div>
+            <div id="backupsTab" class="tab-content bg-white rounded-lg shadow p-6 hidden">
+                <h2 class="text-xl font-bold text-gray-900 mb-4">Sauvegardes locales</h2>
+                <div id="backupList" class="space-y-3"></div>
             </div>
         </div>
     </main>
 
+
     <script>
         let tableauContent = '';
         let dissertationContent = '';