Update templates/index.html

templates/index.html

@@ -7,14 +7,14 @@
     <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
     <style>
         .loader {
-            border: 5px solid #f3f3f3; /* Light grey */
-            border-top: 5px solid #3498db; /* Blue */
+            border: 5px solid #f3f3f3;
+            border-top: 5px solid #3498db;
             border-radius: 50%;
             width: 30px;
             height: 30px;
             animation: spin 1s linear infinite;
             margin: 20px auto;
-            display: none; /* Initialement caché */
+            display: none;
         }
 
         @keyframes spin {
@@ -51,7 +51,7 @@
                  <div class="col-md-4">
                     <h2>Structures chimiques:</h2>
                     {% for image_path in image_paths %}
-                        <img src="{{ image_path }}" alt="Structure Chimique" style="width:100%; height:auto;"><br>
+                        <img src="{{ image_path }}" alt="Structure Chimique" style="max-width:100%; height:auto;"><br>
                     {% endfor %}
                 </div>
             </div>
@@ -64,6 +64,12 @@
         function showLoader() {
             document.getElementById('loader').style.display = 'block';
         }
+
+        // Optionnel : cacher le loader après le chargement de la page
+        window.onload = function() {
+            document.getElementById('loader').style.display = 'none';
+        };
+
     </script>
 </body>
 </html>