make the terminal for input js bigger and color full like vs code codding leeters as code explainer and near the terminal add the button explain , comment in the lines ,find bugs and doccumentation maker and donload option in every function

index.html

@@ -204,36 +204,53 @@
   <!-- 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">
-      <!-- Original Code Editor -->
+      <!-- Enhanced Code Editor with VS Code-like styling -->
       <div class="code-editor p-4 glow lg:col-span-1">
-        <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>
-            <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 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">input.js</div>
+          </div>
+          <div class="flex space-x-2">
+            <button onclick="downloadCode()" class="text-gray-400 hover:text-white p-1">
+              <i data-feather="download" class="w-4 h-4"></i>
+            </button>
           </div>
-          <div class="text-sm text-gray-400">input.js</div>
         </div>
-        <textarea id="codeInput" class="w-full h-64 bg-gray-800 text-gray-300 font-mono text-sm p-4 rounded focus:outline-none focus:ring-2 focus:ring-primary" spellcheck="false">
-function calculateTotal(items) {
-  if (!Array.isArray(items)) {
-    throw new Error('Items must be an array');
+        <div id="codeEditor" class="w-full h-80 bg-gray-900 text-gray-100 font-mono text-sm p-4 rounded overflow-auto focus:outline-none focus:ring-2 focus:ring-primary" contenteditable="true" spellcheck="false">
+<span class="text-purple-400">function</span> <span class="text-yellow-300">calculateTotal</span>(<span class="text-blue-400">items</span>) {
+  <span class="text-green-400">if</span> (!Array.isArray(<span class="text-blue-400">items</span>)) {
+    <span class="text-green-400">throw</span> <span class="text-purple-400">new</span> <span class="text-blue-400">Error</span>(<span class="text-orange-300">'Items must be an array'</span>);
   }
 
-  let total = 0;
-  items.forEach(item => {
-    const price = Number(item.price) || 0;
-    total += price * (item.quantity || 1);
+  <span class="text-purple-400">let</span> total = <span class="text-blue-400">0</span>;
+  <span class="text-blue-400">items</span>.forEach(<span class="text-blue-400">item</span> => {
+    <span class="text-purple-400">const</span> price = <span class="text-blue-400">Number</span>(<span class="text-blue-400">item</span>.price) || <span class="text-blue-400">0</span>;
+    total += price * (<span class="text-blue-400">item</span>.quantity || <span class="text-blue-400">1</span>);
   });
 
-  return total;
-}</textarea>
-        <button onclick="analyzeCode()" class="mt-4 w-full bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-md font-medium">
-          Analyze Code
-        </button>
+  <span class="text-green-400">return</span> total;
+}</div>
+        <div class="grid grid-cols-2 gap-2 mt-4">
+          <button onclick="explainCode()" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-3 rounded-md text-sm font-medium flex items-center justify-center">
+            <i data-feather="book-open" class="mr-1 w-4 h-4"></i> Explain
+          </button>
+          <button onclick="commentCode()" class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-3 rounded-md text-sm font-medium flex items-center justify-center">
+            <i data-feather="message-square" class="mr-1 w-4 h-4"></i> Comment
+          </button>
+          <button onclick="analyzeCode()" class="bg-red-600 hover:bg-red-700 text-white py-2 px-3 rounded-md text-sm font-medium flex items-center justify-center">
+            <i data-feather="bug" class="mr-1 w-4 h-4"></i> Find Bugs
+          </button>
+          <button onclick="documentCode()" class="bg-green-600 hover:bg-green-700 text-white py-2 px-3 rounded-md text-sm font-medium flex items-center justify-center">
+            <i data-feather="file-text" class="mr-1 w-4 h-4"></i> Document
+          </button>
+        </div>
       </div>
-
-      <!-- Bug Explanation Terminal -->
+<!-- Bug Explanation Terminal -->
       <div class="code-editor p-4 glow lg:col-span-1">
         <div class="flex items-center mb-4">
           <div class="flex space-x-2 mr-4">