Update templates/index.html

templates/index.html

@@ -32,7 +32,73 @@
     <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.min.js"></script>
 
     <style>
-        /* ... (style non modifié) ... */
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');
+
+        body {
+            font-family: 'Space Grotesk', sans-serif;
+        }
+
+        .uploadArea {
+            background: #f3f4f6;
+            border: 2px dashed #d1d5db;
+            transition: border-color 0.2s ease;
+        }
+
+        .uploadArea:hover {
+            border-color: #3b82f6;
+        }
+
+        .blue-button {
+            background: #3b82f6;
+            transition: background-color 0.2s ease;
+        }
+
+        .blue-button:hover {
+            background: #2563eb;
+        }
+
+        .loader {
+            width: 48px;
+            height: 48px;
+            border: 3px solid #3b82f6;
+            border-bottom-color: transparent;
+            border-radius: 50%;
+            display: inline-block;
+            animation: rotation 1s linear infinite;
+        }
+
+        @keyframes rotation {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .thought-box {
+            transition: max-height 0.3s ease-out;
+            max-height: 0;
+            overflow: hidden;
+        }
+
+        .thought-box.open {
+            max-height: 500px;
+        }
+
+        #thoughtsContent, #answerContent {
+            max-height: 500px;
+            overflow-y: auto;
+            scroll-behavior: smooth;
+        }
+
+        .preview-image {
+            max-width: 300px;
+            max-height: 300px;
+            object-fit: contain;
+        }
+
+        .timestamp {
+            color: #3b82f6;
+            font-size: 0.9em;
+            margin-left: 8px;
+        }
     </style>
 
 </head>