make input js at the top and refine the code explainer

index.html

@@ -273,8 +273,84 @@ 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">
+        <!-- Input JS 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">input.js</div>
+            </div>
+            <div class="flex space-x-2">
+              <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>
+              <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>
+            <div class="mt-2">
+              <div class="text-primary font-medium">Input Validation:</div>
+              <div class="text-gray-400 ml-4"><span class="text-green-400">if</span> (!Array.isArray(<span class="text-blue-400">items</span>)) {</div>
+              <div class="text-gray-400 ml-8"><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>);</div>
+              <div class="text-gray-400 ml-4">}</div>
+            </div>
+            <div class="mt-2">
+              <div class="text-primary font-medium">Total Calculation:</div>
+              <div class="text-gray-400 ml-4"><span class="text-purple-400">let</span> total = <span class="text-blue-400">0</span>;</div>
+              <div class="text-gray-400 ml-4"><span class="text-blue-400">items</span>.forEach(<span class="text-blue-400">item</span> => {</div>
+              <div class="text-gray-400 ml-8"><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>;</div>
+              <div class="text-gray-400 ml-8">total += price * (<span class="text-blue-400">item</span>.quantity || <span class="text-blue-400">1</span>);</div>
+              <div class="text-gray-400 ml-4">});</div>
+            </div>
+            <div class="mt-2">
+              <div class="text-primary font-medium">Return Value:</div>
+              <div class="text-gray-400 ml-4"><span class="text-green-400">return</span> total;</div>
+              <div class="text-gray-400 ml-4">}</div>
+            </div>
+          </div>
+          <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> 
+              <span class="relative">Explain</span>
+            </button>
+            <button onclick="commentCode()" class="group relative bg-gray-700/70 hover:bg-gray-600/80 border border-gray-600 hover:border-purple-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-purple-500/20">
+              <div class="absolute inset-0 bg-purple-500/10 group-hover:bg-purple-500/20 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+              <i data-feather="message-square" class="mr-2 w-4 h-4 text-purple-400"></i> 
+              <span class="relative">Comment</span>
+            </button>
+            <button onclick="analyzeCode()" class="group relative bg-gray-700/70 hover:bg-gray-600/80 border border-gray-600 hover:border-red-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-red-500/20">
+              <div class="absolute inset-0 bg-red-500/10 group-hover:bg-red-500/20 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+              <i data-feather="bug" class="mr-2 w-4 h-4 text-red-400"></i> 
+              <span class="relative">Find Bugs</span>
+            </button>
+            <button onclick="documentCode()" class="group relative bg-gray-700/70 hover:bg-gray-600/80 border border-gray-600 hover:border-green-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-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="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>
+
         <!-- Combined Analysis Panel -->
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+<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 -->