Spaces:

Docfile
/

Mariam-cc

Running

App Files Files Community

Docfile commited on Nov 24, 2024

Commit

ec7cc8e

verified ·

1 Parent(s): 811a2c3

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +131 -32

templates/index.html CHANGED Viewed

@@ -43,20 +43,88 @@
             background-color: #EEF2FF;
         }
-        .preview-container {
-            margin-top: 1rem;
-            display: none; /* Par défaut, masqué */
         }
-        .preview-container img {
-            max-width: 100%;
-            max-height: 300px;
-            border-radius: 8px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
     </style>
 </head>
 <body class="bg-gray-50">
     <div class="min-h-screen">
         <!-- Header -->
         <header class="bg-white shadow-sm">
@@ -73,7 +141,7 @@
                 <form id="uploadForm" class="space-y-6">
                     <div class="upload-zone rounded-lg p-8 text-center">
                         <input type="file" id="imageInput" accept="image/*" required
-                               class="hidden" onchange="updatePreview()">
                         <label for="imageInput" class="cursor-pointer">
                             <div class="space-y-2">
                                 <svg class="mx-auto h-12 w-12 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -86,13 +154,6 @@
                             </div>
                         </label>
                     </div>
-                    <!-- Image Preview -->
-                    <div class="preview-container text-center" id="previewContainer">
-                        <p class="text-gray-500 text-sm mb-2">Prévisualisation de l'image :</p>
-                        <img id="imagePreview" alt="Prévisualisation de l'image">
-                    </div>
                     <div class="flex justify-center">
                         <button type="submit"
                                 class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
@@ -133,29 +194,67 @@
     <script>
         let tableauContent = '';
-        function updatePreview() {
             const input = document.getElementById('imageInput');
-            const previewContainer = document.getElementById('previewContainer');
-            const imagePreview = document.getElementById('imagePreview');
             const fileName = document.getElementById('fileName');
-            if (input.files && input.files[0]) {
-                const file = input.files[0];
-                fileName.textContent = file.name;
-                // Prévisualisation de l'image
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    imagePreview.src = e.target.result;
-                    previewContainer.style.display = 'block'; // Afficher la prévisualisation
-                };
-                reader.readAsDataURL(file);
             } else {
                 fileName.textContent = 'Cliquez ou glissez une image ici';
-                previewContainer.style.display = 'none'; // Cacher la prévisualisation
             }
         }
         document.getElementById('uploadForm').addEventListener('submit', async (e) => {
             e.preventDefault();

             background-color: #EEF2FF;
         }
+        /* Styles améliorés pour le tableau avec scroll horizontal */
+        .markdown-content {
+            overflow-x: auto;
+            padding-bottom: 1rem; /* Espace pour la scrollbar */
         }
+        .markdown-content table {
+            border-collapse: collapse;
+            min-width: 100%;
+            width: max-content; /* Permet au tableau de dépasser si nécessaire */
+            margin: 1rem 0;
+        }
+        .markdown-content th,
+        .markdown-content td {
+            border: 1px solid #e5e7eb;
+            padding: 0.75rem;
+            text-align: left;
+            white-space: nowrap; /* Empêche le retour à la ligne */
+            min-width: 150px; /* Largeur minimum pour chaque cellule */
+        }
+        .markdown-content th {
+            background-color: #f9fafb;
+            position: sticky;
+            top: 0;
+            z-index: 10;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+        }
+        /* Style pour la scrollbar horizontale */
+        .markdown-content::-webkit-scrollbar {
+            height: 8px;
+        }
+        .markdown-content::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 4px;
+        }
+        .markdown-content::-webkit-scrollbar-thumb {
+            background: #6366F1;
+            border-radius: 4px;
+        }
+        .markdown-content::-webkit-scrollbar-thumb:hover {
+            background: #4F46E5;
+        }
+        /* Styles pour SweetAlert2 */
+        .swal2-popup {
+            width: 90% !important;
+            max-width: 1200px !important;
+        }
+        .swal2-html-container {
+            max-height: 80vh !important;
+            overflow-y: auto !important;
+        }
+        /* Indicateur de défilement */
+        .scroll-indicator {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            background: rgba(99, 102, 241, 0.9);
+            color: white;
+            padding: 8px 12px;
+            border-radius: 4px;
+            font-size: 0.875rem;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            pointer-events: none;
+        }
+        .scroll-indicator.visible {
+            opacity: 1;
         }
     </style>
 </head>
 <body class="bg-gray-50">
+    <!-- [Le reste du HTML reste identique jusqu'au script] -->
     <div class="min-h-screen">
         <!-- Header -->
         <header class="bg-white shadow-sm">
                 <form id="uploadForm" class="space-y-6">
                     <div class="upload-zone rounded-lg p-8 text-center">
                         <input type="file" id="imageInput" accept="image/*" required
+                               class="hidden" onchange="updateFileName()">
                         <label for="imageInput" class="cursor-pointer">
                             <div class="space-y-2">
                                 <svg class="mx-auto h-12 w-12 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             </div>
                         </label>
                     </div>
                     <div class="flex justify-center">
                         <button type="submit"
                                 class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
     <script>
         let tableauContent = '';
+        function updateFileName() {
             const input = document.getElementById('imageInput');
             const fileName = document.getElementById('fileName');
+            if (input.files.length > 0) {
+                fileName.textContent = input.files[0].name;
             } else {
                 fileName.textContent = 'Cliquez ou glissez une image ici';
             }
         }
+        function showScrollIndicator(container) {
+            if (container.scrollWidth > container.clientWidth) {
+                const indicator = document.createElement('div');
+                indicator.className = 'scroll-indicator visible';
+                indicator.textContent = '← Faites défiler →';
+                container.parentElement.appendChild(indicator);
+                setTimeout(() => {
+                    indicator.classList.remove('visible');
+                }, 3000);
+                container.addEventListener('scroll', () => {
+                    if (container.scrollLeft > 0) {
+                        indicator.classList.add('visible');
+                    } else {
+                        indicator.classList.remove('visible');
+                    }
+                    // Cache l'indicateur après 1 seconde de scroll
+                    clearTimeout(container.scrollTimeout);
+                    container.scrollTimeout = setTimeout(() => {
+                        indicator.classList.remove('visible');
+                    }, 1000);
+                });
+            }
+        }
+        document.getElementById('showTableau').addEventListener('click', () => {
+            Swal.fire({
+                title: 'Tableau d\'analyse',
+                html: marked.parse(tableauContent),
+                width: '90%',
+                customClass: {
+                    htmlContainer: 'markdown-content'
+                },
+                didRender: () => {
+                    const container = document.querySelector('.markdown-content');
+                    showScrollIndicator(container);
+                    // Ajout des ombres de défilement
+                    container.addEventListener('scroll', () => {
+                        const maxScroll = container.scrollWidth - container.clientWidth;
+                        container.style.boxShadow = container.scrollLeft > 0 ?
+                            'inset 10px 0 5px -5px rgba(0,0,0,0.1)' : '';
+                        container.style.boxShadow += container.scrollLeft < maxScroll ?
+                            ', inset -10px 0 5px -5px rgba(0,0,0,0.1)' : '';
+                    });
+                }
+            });
+        });
         document.getElementById('uploadForm').addEventListener('submit', async (e) => {
             e.preventDefault();