make input.js div in a sigle colum in a row and the size of input dive should be bigger and also add small divs where person can see doccumentation and comments in the code

index.html

@@ -203,10 +203,10 @@
   </div>
   <!-- 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 lg:grid-cols-3 gap-8">
+    <div class="grid grid-cols-1 gap-8">
       <!-- Enhanced Code Editor with VS Code-like styling -->
-      <div class="code-editor p-4 glow lg:col-span-1">
-        <div class="flex items-center justify-between mb-4">
+      <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>
@@ -221,8 +221,8 @@
             </button>
           </div>
         </div>
-        <div id="codeEditor" class="w-full h-80 bg-gray-800 text-gray-300 font-mono text-sm p-4 rounded overflow-auto">
-          <div>
+        <div id="codeEditor" class="w-full h-96 bg-gray-800 text-gray-300 font-mono text-sm p-4 rounded overflow-auto">
+<div>
             <div class="text-primary font-medium">Function Declaration:</div>
             <div class="text-gray-400 ml-4"><span class="text-purple-400">function</span> <span class="text-yellow-300">calculateTotal</span>(<span class="text-blue-400">items</span>) {</div>
           </div>
@@ -246,8 +246,8 @@
             <div class="text-gray-400 ml-4">}</div>
           </div>
         </div>
-        <div class="grid grid-cols-2 gap-3 mt-4">
-          <button onclick="explainCode()" class="group relative bg-gray-700/70 hover:bg-gray-600/80 border border-gray-600 hover:border-blue-500 text-white py-2.5 px-3 rounded-lg text-sm font-medium flex items-center justify-center transition-all duration-200 shadow-md hover:shadow-blue-500/20">
+        <div class="grid grid-cols-4 gap-3 mt-4">
+<button onclick="explainCode()" class="group relative bg-gray-700/70 hover:bg-gray-600/80 border border-gray-600 hover:border-blue-500 text-white py-2.5 px-3 rounded-lg text-sm font-medium flex items-center justify-center transition-all duration-200 shadow-md hover:shadow-blue-500/20">
             <div class="absolute inset-0 bg-blue-500/10 group-hover:bg-blue-500/20 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
             <i data-feather="book-open" class="mr-2 w-4 h-4 text-blue-400"></i> 
             <span class="relative">Explain</span>
@@ -269,8 +269,57 @@
           </button>
         </div>
 </div>
-<!-- Bug Explanation Terminal -->
-      <div class="code-editor p-4 glow lg:col-span-1">
+    </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 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>
+
+    <!-- Bug Analysis and Fixed Code Section -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
+      <!-- Bug Explanation Terminal -->
+      <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-red-500"></div>
@@ -282,18 +331,10 @@
         <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>
         </div>
-        <div class="mt-4 p-3 bg-gray-800 rounded text-sm text-gray-300">
-          <div class="flex items-start">
-            <i data-feather="info" class="text-blue-400 mr-2 mt-0.5 flex-shrink-0"></i>
-            <div>
-              <span class="font-medium">AI Insights:</span> The analyzer will detect potential bugs, security issues, and optimization opportunities.
-            </div>
-          </div>
-        </div>
       </div>
 
       <!-- Fixed Code Editor -->
-      <div class="code-editor p-4 glow lg:col-span-1">
+      <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-red-500"></div>
@@ -309,9 +350,9 @@
           <i data-feather="check-circle" class="mr-2 text-green-400"></i> 
           <span class="relative">Apply Fix</span>
         </button>
-</div>
+      </div>
     </div>
-  </div>
+</div>
 
   <script>
     function analyzeCode() {