make the bug anlysis and fixed .js and doccumentation and comment together only 4 divs in a box

index.html

@@ -273,55 +273,113 @@ tailwind.config = {
     <!-- Interactive Code Section -->
     <div class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
       <div class="grid grid-cols-1 gap-8">
-        <!-- Bug Analysis and Fixed Code Section -->
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-          <!-- Bug Explanation Terminal -->
-          <div class="code-editor p-4 glow">
-            <div class="flex items-center justify-between mb-4">
-              <div class="flex items-center">
-                <div class="flex space-x-2 mr-4">
-                  <div class="w-3 h-3 rounded-full bg-red-500"></div>
-                  <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
-                  <div class="w-3 h-3 rounded-full bg-green-500"></div>
+        <!-- Combined Analysis Panel -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <!-- Left Column - Bug Analysis and Fixed Code -->
+          <div class="space-y-8">
+            <!-- Bug Analysis -->
+            <div class="code-editor p-4 glow">
+              <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center">
+                  <div class="flex space-x-2 mr-4">
+                    <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                    <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                  </div>
+                  <div class="text-sm text-gray-400">Bug Analysis</div>
                 </div>
-                <div class="text-sm text-gray-400">Bug Analysis</div>
+                <button onclick="downloadBugAnalysis()" class="text-gray-400 hover:text-white p-1 rounded hover:bg-gray-700/50 transition-all duration-200" title="Download Analysis">
+                  <i data-feather="download" class="w-4 h-4"></i>
+                </button>
+              </div>
+              <div id="bugTerminal" class="w-full h-48 bg-gray-800 text-gray-300 font-mono text-sm p-4 rounded overflow-y-auto">
+                <div class="text-green-400">$ Waiting for code analysis...</div>
               </div>
-              <button onclick="downloadBugAnalysis()" class="text-gray-400 hover:text-white p-1 rounded hover:bg-gray-700/50 transition-all duration-200" title="Download Analysis">
-                <i data-feather="download" class="w-4 h-4"></i>
-              </button>
             </div>
-            <div id="bugTerminal" class="w-full h-64 bg-gray-800 text-gray-300 font-mono text-sm p-4 rounded overflow-y-auto">
-              <div class="text-green-400">$ Waiting for code analysis...</div>
+
+            <!-- Fixed Code -->
+            <div class="code-editor p-4 glow">
+              <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center">
+                  <div class="flex space-x-2 mr-4">
+                    <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                    <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                  </div>
+                  <div class="text-sm text-gray-400">fixed.js</div>
+                </div>
+                <div class="flex space-x-2">
+                  <button onclick="copyFixedCode()" class="text-gray-400 hover:text-white p-1 rounded hover:bg-gray-700/50 transition-all duration-200" title="Copy Code">
+                    <i data-feather="copy" class="w-4 h-4"></i>
+                  </button>
+                  <button onclick="downloadFixedCode()" class="text-gray-400 hover:text-white p-1 rounded hover:bg-gray-700/50 transition-all duration-200" title="Download Code">
+                    <i data-feather="download" class="w-4 h-4"></i>
+                  </button>
+                </div>
+              </div>
+              <pre id="fixedCode" class="text-gray-300 text-sm font-mono h-48 overflow-auto bg-gray-800 p-4 rounded">
+<span class="text-gray-500">// Fixed code will appear here after analysis</span></pre>
+              <button onclick="applyFix()" class="group relative mt-4 w-full bg-gray-800/50 hover:bg-gray-700/70 border border-gray-700 hover:border-green-500 text-white py-2 px-4 rounded-md font-medium flex items-center justify-center transition-all duration-200 shadow-md hover:shadow-green-500/20">
+                <div class="absolute inset-0 bg-green-500/10 group-hover:bg-green-500/20 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                <i data-feather="check-circle" class="mr-2 text-green-400 w-4 h-4"></i> 
+                <span class="relative">Apply Fix</span>
+              </button>
             </div>
           </div>
 
-          <!-- Fixed Code Editor -->
-          <div class="code-editor p-4 glow">
-            <div class="flex items-center justify-between mb-4">
-              <div class="flex items-center">
-                <div class="flex space-x-2 mr-4">
-                  <div class="w-3 h-3 rounded-full bg-red-500"></div>
-                  <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
-                  <div class="w-3 h-3 rounded-full bg-green-500"></div>
+          <!-- Right Column - Documentation and Comments -->
+          <div class="space-y-8">
+            <!-- Documentation -->
+            <div class="code-editor p-4 glow">
+              <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center">
+                  <div class="flex space-x-2 mr-4">
+                    <div class="w-3 h-3 rounded-full bg-blue-500"></div>
+                    <div class="w-3 h-3 rounded-full bg-purple-500"></div>
+                    <div class="w-3 h-3 rounded-full bg-pink-500"></div>
+                  </div>
+                  <div class="text-sm text-gray-400">Documentation</div>
                 </div>
-                <div class="text-sm text-gray-400">fixed.js</div>
-              </div>
-              <div class="flex space-x-2">
-                <button onclick="copyFixedCode()" class="text-gray-400 hover:text-white p-1 rounded hover:bg-gray-700/50 transition-all duration-200" title="Copy Code">
-                  <i data-feather="copy" class="w-4 h-4"></i>
+                <button onclick="downloadDocumentation()" class="text-gray-400 hover:text-white p-1 rounded hover:bg-gray-700/50 transition-all duration-200" title="Download Documentation">
+                  <i data-feather="download" class="w-4 h-4"></i>
                 </button>
-                <button onclick="downloadFixedCode()" class="text-gray-400 hover:text-white p-1 rounded hover:bg-gray-700/50 transition-all duration-200" title="Download Code">
+              </div>
+              <div id="documentationPanel" class="w-full h-48 bg-gray-800 text-gray-300 font-mono text-sm p-4 rounded overflow-y-auto">
+                <div class="text-blue-400">/**
+                 * <span class="text-purple-400">@function</span> calculateTotal
+                 * <span class="text-purple-400">@description</span> Calculates the total price of items in a shopping cart
+                 * <span class="text-purple-400">@param</span> {Array} items - Array of item objects with price and quantity
+                 * <span class="text-purple-400">@returns</span> {Number} Total calculated amount
+                 * <span class="text-purple-400">@throws</span> {Error} If items is not an array
+                 */</div>
+              </div>
+            </div>
+
+            <!-- Comments -->
+            <div class="code-editor p-4 glow">
+              <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center">
+                  <div class="flex space-x-2 mr-4">
+                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                    <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                    <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                  </div>
+                  <div class="text-sm text-gray-400">Comments</div>
+                </div>
+                <button onclick="downloadComments()" class="text-gray-400 hover:text-white p-1 rounded hover:bg-gray-700/50 transition-all duration-200" title="Download Comments">
                   <i data-feather="download" class="w-4 h-4"></i>
                 </button>
               </div>
+              <div id="commentsPanel" class="w-full h-48 bg-gray-800 text-gray-300 font-mono text-sm p-4 rounded overflow-y-auto">
+                <div class="text-green-400">// Function declaration with items parameter</div>
+                <div class="text-green-400 mt-2">// Input validation - checks if items is an array</div>
+                <div class="text-green-400 mt-2">// Initialize total to 0</div>
+                <div class="text-green-400 mt-2">// Loop through each item in the array</div>
+                <div class="text-green-400 mt-2">// Convert price to number, default to 0 if invalid</div>
+                <div class="text-green-400 mt-2">// Calculate line total (price * quantity)</div>
+                <div class="text-green-400 mt-2">// Return the calculated total</div>
+              </div>
             </div>
-            <pre id="fixedCode" class="text-gray-300 text-sm font-mono h-64 overflow-auto bg-gray-800 p-4 rounded">
-<span class="text-gray-500">// Fixed code will appear here after analysis</span></pre>
-            <button onclick="applyFix()" class="group relative mt-4 w-full bg-gray-800/50 hover:bg-gray-700/70 border border-gray-700 hover:border-green-500 text-white py-3 px-4 rounded-lg font-medium flex items-center justify-center transition-all duration-200 shadow-md hover:shadow-green-500/20">
-              <div class="absolute inset-0 bg-green-500/10 group-hover:bg-green-500/20 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-              <i data-feather="check-circle" class="mr-2 text-green-400"></i> 
-              <span class="relative">Apply Fix</span>
-            </button>
           </div>
         </div>
 <!-- Enhanced Code Editor with VS Code-like styling -->
@@ -400,102 +458,6 @@ tailwind.config = {
         </div>
 </div>
     </div>
-<!-- Documentation Panel -->
-      <div class="code-editor p-4 glow">
-        <div class="flex items-center mb-4">
-          <div class="flex space-x-2 mr-4">
-            <div class="w-3 h-3 rounded-full bg-blue-500"></div>
-            <div class="w-3 h-3 rounded-full bg-purple-500"></div>
-            <div class="w-3 h-3 rounded-full bg-pink-500"></div>
-          </div>
-          <div class="text-sm text-gray-400">Documentation</div>
-        </div>
-        <div id="documentationPanel" class="w-full h-64 bg-gray-800 text-gray-300 font-mono text-sm p-4 rounded overflow-y-auto">
-          <div class="text-blue-400">/**
-           * <span class="text-purple-400">@function</span> calculateTotal
-           * <span class="text-purple-400">@description</span> Calculates the total price of items in a shopping cart
-           * <span class="text-purple-400">@param</span> {Array} items - Array of item objects with price and quantity
-           * <span class="text-purple-400">@returns</span> {Number} Total calculated amount
-           * <span class="text-purple-400">@throws</span> {Error} If items is not an array
-           */</div>
-        </div>
-      </div>
-
-      <!-- Comments Panel -->
-      <div class="code-editor p-4 glow">
-        <div class="flex items-center mb-4">
-          <div class="flex space-x-2 mr-4">
-            <div class="w-3 h-3 rounded-full bg-green-500"></div>
-            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
-            <div class="w-3 h-3 rounded-full bg-red-500"></div>
-          </div>
-          <div class="text-sm text-gray-400">Comments</div>
-        </div>
-        <div id="commentsPanel" class="w-full h-64 bg-gray-800 text-gray-300 font-mono text-sm p-4 rounded overflow-y-auto">
-          <div class="text-green-400">// Function declaration with items parameter</div>
-          <div class="text-green-400 mt-2">// Input validation - checks if items is an array</div>
-          <div class="text-green-400 mt-2">// Initialize total to 0</div>
-          <div class="text-green-400 mt-2">// Loop through each item in the array</div>
-          <div class="text-green-400 mt-2">// Convert price to number, default to 0 if invalid</div>
-          <div class="text-green-400 mt-2">// Calculate line total (price * quantity)</div>
-          <div class="text-green-400 mt-2">// Return the calculated total</div>
-        </div>
-      </div>
-    </div>
-    <!-- Documentation and Comments Section -->
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
-      <!-- Documentation Panel -->
-      <div class="code-editor p-4 glow">
-        <div class="flex items-center justify-between mb-4">
-          <div class="flex items-center">
-            <div class="flex space-x-2 mr-4">
-              <div class="w-3 h-3 rounded-full bg-blue-500"></div>
-              <div class="w-3 h-3 rounded-full bg-purple-500"></div>
-              <div class="w-3 h-3 rounded-full bg-pink-500"></div>
-            </div>
-            <div class="text-sm text-gray-400">Documentation</div>
-          </div>
-          <button onclick="downloadDocumentation()" class="text-gray-400 hover:text-white p-1 rounded hover:bg-gray-700/50 transition-all duration-200" title="Download Documentation">
-            <i data-feather="download" class="w-4 h-4"></i>
-          </button>
-        </div>
-        <div id="documentationPanel" class="w-full h-64 bg-gray-800 text-gray-300 font-mono text-sm p-4 rounded overflow-y-auto">
-          <div class="text-blue-400">/**
-           * <span class="text-purple-400">@function</span> calculateTotal
-           * <span class="text-purple-400">@description</span> Calculates the total price of items in a shopping cart
-           * <span class="text-purple-400">@param</span> {Array} items - Array of item objects with price and quantity
-           * <span class="text-purple-400">@returns</span> {Number} Total calculated amount
-           * <span class="text-purple-400">@throws</span> {Error} If items is not an array
-           */</div>
-        </div>
-      </div>
-
-      <!-- Comments Panel -->
-      <div class="code-editor p-4 glow">
-        <div class="flex items-center justify-between mb-4">
-          <div class="flex items-center">
-            <div class="flex space-x-2 mr-4">
-              <div class="w-3 h-3 rounded-full bg-green-500"></div>
-              <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
-              <div class="w-3 h-3 rounded-full bg-red-500"></div>
-            </div>
-            <div class="text-sm text-gray-400">Comments</div>
-          </div>
-          <button onclick="downloadComments()" class="text-gray-400 hover:text-white p-1 rounded hover:bg-gray-700/50 transition-all duration-200" title="Download Comments">
-            <i data-feather="download" class="w-4 h-4"></i>
-          </button>
-        </div>
-        <div id="commentsPanel" class="w-full h-64 bg-gray-800 text-gray-300 font-mono text-sm p-4 rounded overflow-y-auto">
-          <div class="text-green-400">// Function declaration with items parameter</div>
-          <div class="text-green-400 mt-2">// Input validation - checks if items is an array</div>
-          <div class="text-green-400 mt-2">// Initialize total to 0</div>
-          <div class="text-green-400 mt-2">// Loop through each item in the array</div>
-          <div class="text-green-400 mt-2">// Convert price to number, default to 0 if invalid</div>
-          <div class="text-green-400 mt-2">// Calculate line total (price * quantity)</div>
-          <div class="text-green-400 mt-2">// Return the calculated total</div>
-        </div>
-      </div>
-    </div>
 </div>
   <script>
     function copyCode() {