Update templates/index.html

templates/index.html

@@ -121,147 +121,110 @@
 
         #solution {
             background: #fff;
-            padding: 20px;
+            padding: 0; /* Remove padding from the container */
             border-radius: 8px;
             text-align: left;
             line-height: 1.8;
             font-size: 16px;
+            overflow: hidden; /* Clip child border-radius */
+            box-shadow: var(--box-shadow); /* Add shadow to the main container */
         }
 
-        /* Modified styles for continuous flow */
         .step-section, .code-section, .output-section {
             margin: 0; /* Remove vertical margins between blocks */
-            padding: 15px; /* Keep internal padding */
+            padding: 15px 20px; /* Add padding inside each block, matching original #solution padding */
             border-radius: 0; /* Remove rounded corners between blocks */
-            border-left: none; /* Remove left border */
+            border-left: none; /* Remove default left border */
             overflow-x: auto;
-            white-space: pre-wrap;
-            background-color: transparent; /* Ensure consistent background or use #fff from parent */
+            white-space: pre-wrap; /* Preserve white space and line breaks */
+            background-color: transparent; /* Ensure consistent background */
         }
 
         .step-section {
-             /* If you want a subtle indicator without making it a block */
-             border-left: 4px solid var(--primary-color);
-             padding-left: calc(15px - 4px); /* Adjust padding to keep content aligned */
-             background-color: #f9f9f9; /* Background for step sections */
+            border-left: 4px solid var(--primary-color); /* Keep the left border as a visual cue */
+            padding-left: calc(20px - 4px); /* Adjust padding to maintain alignment */
+            background-color: #f9f9f9; /* Subtle background for text steps */
         }
 
-
         .code-section {
-            /* Code section has its own internal padding and background */
+            /* Code section internal elements handle their own padding and background */
         }
 
         .code-header {
-             background-color: #343a40;
-             color: white;
-             padding: 8px 15px;
-             font-size: 14px;
-             font-family: 'Courier New', monospace;
-             display: flex;
-             justify-content: space-between;
-             align-items: center;
-             border-top-left-radius: 8px; /* Keep top radius for first code block */
-             border-top-right-radius: 8px;
-         }
+            background-color: #343a40;
+            color: white;
+            padding: 8px 20px; /* Match horizontal padding */
+            font-size: 14px;
+            font-family: 'Courier New', monospace;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-top-left-radius: 8px;
+            border-top-right-radius: 8px;
+        }
 
         .code-content {
             margin: 0;
-            padding: 15px;
+            padding: 15px 20px; /* Match horizontal padding */
             background-color: var(--code-bg);
             color: #e6e6e6;
             overflow-x: auto;
             font-family: 'Courier New', monospace;
             font-size: 14px;
             line-height: 1.5;
-            /* No border-radius here, managed by parent or siblings */
         }
 
         .output-section {
             background-color: var(--output-bg);
-            padding: 15px;
-            border-top: 1px solid #ddd; /* Separator from code */
+            padding: 15px 20px; /* Match horizontal padding */
+            border-top: 1px solid #ddd;
             color: #333;
             font-family: 'Courier New', monospace;
             font-size: 14px;
             white-space: pre-wrap;
             overflow-x: auto;
-            border-bottom-left-radius: 8px; /* Keep bottom radius for last output block */
+            border-bottom-left-radius: 8px;
             border-bottom-right-radius: 8px;
         }
 
-        /* Add border-radius back to the very first and very last child inside #solution */
+        /* Apply border-radius to the very first and very last child inside #solution */
         #solution > div:first-child {
             border-top-left-radius: 8px;
             border-top-right-radius: 8px;
         }
-         /* Special case for first code header */
-        #solution .code-section:first-child .code-header {
-             border-top-left-radius: 8px;
-             border-top-right-radius: 8px;
-        }
-
 
-        #solution > div:last-child {
+         #solution > div:last-child {
             border-bottom-left-radius: 8px;
             border-bottom-right-radius: 8px;
         }
-        /* Special case for last code content (if not followed by output) */
-         #solution .code-section:last-child .code-content:last-child:not(+.output-section) {
-             border-bottom-left-radius: 8px;
-             border-bottom-right-radius: 8px;
-         }
 
-
-        .latex-display {
-            overflow-x: auto;
-            padding: 10px 0;
-            margin: 15px 0;
-            text-align: center;
-        }
-
-        .thinking-indicator, .executing-indicator, .answering-indicator {
-            display: flex;
-            align-items: center;
-            padding: 10px;
-            margin: 10px 0;
-            border-radius: 8px;
-            font-size: 0.9rem;
-        }
-
-        .thinking-indicator {
-            background-color: #e3f2fd;
-            color: #1565c0;
-        }
-
-        .executing-indicator {
-            background-color: #ede7f6;
-            color: #5e35b1;
-        }
-
-        .answering-indicator {
-            background-color: #e8f5e9;
-            color: #2e7d32;
-        }
-
-        .indicator-icon {
-            margin-right: 10px;
-            animation: pulse 1.5s infinite ease-in-out;
+        /* Special case for first code header within the first child */
+        #solution > .code-section:first-child .code-header {
+             border-top-left-radius: 8px;
+             border-top-right-radius: 8px;
         }
 
-        @keyframes pulse {
-            0% { opacity: 0.6; }
-            50% { opacity: 1; }
-            100% { opacity: 0.6; }
-        }
+        /* Special case for last code content if it's the very last child and not followed by output */
+         #solution > .code-section:last-child .code-content:last-child:not(+.output-section) {
+             border-bottom-left-radius: 8px;
+             border-bottom-right-radius: 8px;
+         }
 
+         /* MathJax rendering output styles */
         mjx-container {
             overflow-x: auto;
             overflow-y: hidden;
-            display: block;
-            margin: 1em 0;
+            display: block; /* Block math */
+            margin: 1em 0; /* Vertical spacing for block math */
             text-align: initial;
             padding: 0 !important;
         }
+         /* Inline math container */
+        mjx-container[display="inline"] {
+            display: inline-block; /* Inline math behaves like text */
+            margin: 0 !important; /* No vertical margin for inline math */
+        }
+
         mjx-assistive-mml {
              display: none !important;
         }
@@ -323,7 +286,7 @@
                     <i class="fas fa-brain indicator-icon"></i>
                     <span>Je réfléchis au problème...</span>
                 </div>
-                <div id="solution" style="background: #fff; padding: 20px; border-radius: 8px;"></div>
+                <div id="solution"></div>
             </div>
 
             <div class="upgrade-section">
@@ -353,7 +316,7 @@
             options: {
                 enableMenu: false,
                 ignoreHtmlClass: 'code-content',
-                processHtmlClass: 'step-section|latex-display',
+                processHtmlClass: 'step-section', /* Process step-section for Math */
                 skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
             },
             loader: {