add the option to download and copy the code nd also add buutton to fix the code and make code explainer more aprearing and good

index.html

@@ -206,7 +206,7 @@
     <div class="grid grid-cols-1 gap-8">
       <!-- 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 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>
@@ -216,12 +216,17 @@
             <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">
+            <button onclick="copyCode()" class="group relative text-gray-400 hover:text-white p-1.5 rounded hover:bg-gray-700/50 transition-all duration-200" title="Copy Code">
+              <i data-feather="copy" class="w-4 h-4"></i>
+              <span class="absolute top-full left-1/2 transform -translate-x-1/2 mt-1 px-2 py-1 text-xs text-white bg-gray-800 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200">Copy</span>
+            </button>
+            <button onclick="downloadCode()" class="group relative text-gray-400 hover:text-white p-1.5 rounded hover:bg-gray-700/50 transition-all duration-200" title="Download Code">
               <i data-feather="download" class="w-4 h-4"></i>
+              <span class="absolute top-full left-1/2 transform -translate-x-1/2 mt-1 px-2 py-1 text-xs text-white bg-gray-800 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200">Download</span>
             </button>
           </div>
         </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 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>
@@ -246,7 +251,7 @@
             <div class="text-gray-400 ml-4">}</div>
           </div>
         </div>
-        <div class="grid grid-cols-4 gap-3 mt-4">
+        <div class="grid grid-cols-5 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> 
@@ -267,6 +272,11 @@
             <i data-feather="file-text" class="mr-2 w-4 h-4 text-green-400"></i> 
             <span class="relative">Document</span>
           </button>
+          <button onclick="fixCode()" class="group relative bg-gray-700/70 hover:bg-gray-600/80 border border-gray-600 hover:border-indigo-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-indigo-500/20">
+            <div class="absolute inset-0 bg-indigo-500/10 group-hover:bg-indigo-500/20 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+            <i data-feather="wrench" class="mr-2 w-4 h-4 text-indigo-400"></i> 
+            <span class="relative">Fix Code</span>
+          </button>
         </div>
 </div>
     </div>
@@ -353,10 +363,45 @@
       </div>
     </div>
 </div>
-
   <script>
+    function copyCode() {
+      const code = document.getElementById('codeEditor').textContent;
+      navigator.clipboard.writeText(code);
+      
+      // Show copied notification
+      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 = 'Code copied to clipboard!';
+      document.body.appendChild(notification);
+      
+      setTimeout(() => {
+        notification.remove();
+      }, 2000);
+    }
+
+    function downloadCode() {
+      const code = document.getElementById('codeEditor').textContent;
+      const blob = new Blob([code], { type: 'text/javascript' });
+      const url = URL.createObjectURL(blob);
+      
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'code.js';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    }
+
+    function fixCode() {
+      analyzeCode();
+      setTimeout(() => {
+        applyFix();
+      }, 2000);
+    }
+
     function analyzeCode() {
-      const code = document.getElementById('codeInput').value;
+const code = document.getElementById('codeInput').value;
       const bugTerminal = document.getElementById('bugTerminal');
       
       // Clear terminal
@@ -411,9 +456,9 @@
       `;
     }
   </script>
-  <!-- Code Explanation Section -->
-  <div class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gray-800/50 rounded-lg">
-    <div class="text-center mb-12">
+  <!-- Enhanced Code Explanation Section -->
+  <div class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gradient-to-br from-gray-800/50 to-gray-900/60 rounded-lg border border-gray-700/50">
+<div class="text-center mb-12">
       <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
         <span class="gradient-text">Code Explanation</span>
       </h2>