now add donload button to all the function and move bug analysis and fixed js at the top and doccumetion and comment in the bootom

index.html

@@ -6,8 +6,77 @@
     <title>CodeGenius AI - Smart Coding Companion</title>
     <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <script src="https://cdn.tailwindcss.com"></script>
-    <script>
-      tailwind.config = {
+  <script>
+    function downloadBugAnalysis() {
+      const content = document.getElementById('bugTerminal').textContent;
+      const blob = new Blob([content], { type: 'text/plain' });
+      const url = URL.createObjectURL(blob);
+      
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'bug-analysis.txt';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    }
+
+    function copyFixedCode() {
+      const code = document.getElementById('fixedCode').textContent;
+      navigator.clipboard.writeText(code);
+      
+      const notification = document.createElement('div');
+      notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg';
+      notification.textContent = 'Fixed code copied to clipboard!';
+      document.body.appendChild(notification);
+      
+      setTimeout(() => {
+        notification.remove();
+      }, 2000);
+    }
+
+    function downloadFixedCode() {
+      const code = document.getElementById('fixedCode').textContent;
+      const blob = new Blob([code], { type: 'text/javascript' });
+      const url = URL.createObjectURL(blob);
+      
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'fixed-code.js';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    }
+
+    function downloadDocumentation() {
+      const content = document.getElementById('documentationPanel').textContent;
+      const blob = new Blob([content], { type: 'text/plain' });
+      const url = URL.createObjectURL(blob);
+      
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'documentation.txt';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    }
+
+    function downloadComments() {
+      const content = document.getElementById('commentsPanel').textContent;
+      const blob = new Blob([content], { type: 'text/plain' });
+      const url = URL.createObjectURL(blob);
+      
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'code-comments.txt';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    }
+tailwind.config = {
         theme: {
           extend: {
             colors: {
@@ -201,10 +270,61 @@
       </div>
     </div>
   </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 gap-8">
-      <!-- Enhanced Code Editor with VS Code-like styling -->
+    <!-- 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>
+                </div>
+                <div class="text-sm text-gray-400">Bug 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>
+            </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>
+                </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-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 -->
       <div class="code-editor p-4 glow">
         <div class="flex items-center justify-between mb-4">
           <div class="flex items-center">
@@ -280,10 +400,7 @@
         </div>
 </div>
     </div>
-
-    <!-- Documentation and Comments Section -->
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
-      <!-- Documentation Panel -->
+<!-- Documentation Panel -->
       <div class="code-editor p-4 glow">
         <div class="flex items-center mb-4">
           <div class="flex space-x-2 mr-4">
@@ -325,41 +442,58 @@
         </div>
       </div>
     </div>
-
-    <!-- Bug Analysis and Fixed Code Section -->
+    <!-- Documentation and Comments Section -->
     <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
-      <!-- Bug Explanation Terminal -->
+      <!-- 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-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-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">Bug Analysis</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="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 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>
 
-      <!-- Fixed Code Editor -->
+      <!-- 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-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-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 class="text-sm text-gray-400">fixed.js</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>
-        <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>
 </div>