improvise code explaination part

index.html

@@ -615,70 +615,246 @@ const code = document.getElementById('codeInput').value;
   </script>
   <!-- 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">
+    <div class="text-center mb-12">
       <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
-        <span class="gradient-text">Code Explanation</span>
+        <span class="gradient-text">AI-Powered Code Explanation</span>
       </h2>
       <p class="mt-3 max-w-2xl mx-auto text-lg text-gray-300">
-        Our AI breaks down your code line by line for better understanding and learning.
+        Our AI analyzes your code structure, logic flow, and provides actionable insights.
       </p>
     </div>
     
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-      <div class="code-editor p-4">
-        <div class="flex items-center mb-4">
-          <div class="text-sm text-gray-400">Code Breakdown</div>
+      <!-- Interactive Code Breakdown -->
+      <div class="code-editor p-4 glow">
+        <div class="flex items-center justify-between mb-4">
+          <div class="text-sm text-gray-400">Interactive Code Breakdown</div>
+          <button onclick="toggleComplexity()" class="text-xs bg-gray-700/50 hover:bg-gray-600/70 text-gray-300 px-3 py-1 rounded-full">
+            <span id="complexityToggle">Show Advanced</span>
+          </button>
         </div>
         <div id="codeExplanation" class="text-gray-300 text-sm font-mono space-y-4">
-          <div>
-            <div class="text-primary font-medium">Function Declaration:</div>
-            <div class="text-gray-400 ml-4">Defines a function named 'calculateTotal' that takes an 'items' parameter</div>
-          </div>
-          <div>
-            <div class="text-primary font-medium">Input Validation:</div>
-            <div class="text-gray-400 ml-4">Checks if 'items' is an array, throws error if not</div>
+          <div class="bg-gray-800/50 p-3 rounded-lg border-l-4 border-primary">
+            <div class="flex items-center">
+              <i data-feather="chevron-right" class="text-primary mr-2"></i>
+              <div class="text-primary font-medium">Function Declaration</div>
+            </div>
+            <div class="mt-2 ml-6 text-gray-400">
+              <p>• Public function: calculateTotal(items)</p>
+              <p>• Accepts single parameter: items array</p>
+              <p>• Implicit return type: Number</p>
+            </div>
           </div>
-          <div>
-            <div class="text-primary font-medium">Total Calculation:</div>
-            <div class="text-gray-400 ml-4">Iterates through items array, converts prices to numbers, handles missing quantities</div>
+          <div class="bg-gray-800/50 p-3 rounded-lg border-l-4 border-red-400">
+            <div class="flex items-center">
+              <i data-feather="shield" class="text-red-400 mr-2"></i>
+              <div class="text-red-400 font-medium">Input Validation</div>
+            </div>
+            <div class="mt-2 ml-6 text-gray-400">
+              <p>• Type check: Array.isArray()</p>
+              <p>• Throws Error on invalid input</p>
+              <p>• Missing: Element validation</p>
+            </div>
           </div>
-          <div>
-            <div class="text-primary font-medium">Return Value:</div>
-            <div class="text-gray-400 ml-4">Returns the calculated total after processing all items</div>
+          <div class="bg-gray-800/50 p-3 rounded-lg border-l-4 border-yellow-400">
+            <div class="flex items-center">
+              <i data-feather="repeat" class="text-yellow-400 mr-2"></i>
+              <div class="text-yellow-400 font-medium">Iteration Logic</div>
+            </div>
+            <div class="mt-2 ml-6 text-gray-400">
+              <p>• Array traversal: forEach</p>
+              <p>• Type coercion: Number()</p>
+              <p>• Default quantity: 1</p>
+            </div>
           </div>
         </div>
       </div>
       
-      <div class="code-editor p-4">
-        <div class="flex items-center mb-4">
-          <div class="text-sm text-gray-400">Optimization Tips</div>
+      <!-- Advanced Analysis & Metrics -->
+      <div class="code-editor p-4 glow">
+        <div class="flex items-center justify-between mb-4">
+          <div class="text-sm text-gray-400">Advanced Analysis & Metrics</div>
+          <div class="flex space-x-2">
+            <button onclick="showPerformance()" class="text-xs bg-gray-700/50 hover:bg-gray-600/70 text-gray-300 px-3 py-1 rounded-full">Performance</button>
+            <button onclick="showSecurity()" class="text-xs bg-gray-700/50 hover:bg-gray-600/70 text-gray-300 px-3 py-1 rounded-full">Security</button>
+            <button onclick="showBestPractices()" class="text-xs bg-gray-700/50 hover:bg-gray-600/70 text-gray-300 px-3 py-1 rounded-full">Best Practices</button>
+          </div>
         </div>
-        <div class="text-gray-300 text-sm font-mono space-y-4">
-          <div class="flex items-start">
-            <i data-feather="zap" class="text-yellow-400 mr-2 mt-0.5 flex-shrink-0"></i>
-            <div>
-              <div class="font-medium">Use reduce() instead of forEach:</div>
-              <div class="text-gray-400">Could make the total calculation more concise</div>
+        <div id="analysisMetrics" class="text-gray-300 text-sm font-mono space-y-4">
+          <div class="bg-gray-800/50 p-3 rounded-lg">
+            <div class="flex items-center justify-between">
+              <div class="font-medium flex items-center">
+                <i data-feather="clock" class="text-blue-400 mr-2"></i>
+                <span>Time Complexity</span>
+              </div>
+              <span class="text-green-400 text-xs bg-green-400/10 px-2 py-0.5 rounded-full">O(n)</span>
+            </div>
+            <div class="mt-2 text-gray-400">
+              <p>• Linear time operation based on input size</p>
+              <p>• No nested loops or recursive calls</p>
             </div>
           </div>
-          <div class="flex items-start">
-            <i data-feather="alert-triangle" class="text-red-400 mr-2 mt-0.5 flex-shrink-0"></i>
-            <div>
-              <div class="font-medium">Watch for floating point math:</div>
-              <div class="text-gray-400">Currency calculations should use fixed decimal places</div>
+          <div class="bg-gray-800/50 p-3 rounded-lg">
+            <div class="flex items-center justify-between">
+              <div class="font-medium flex items-center">
+                <i data-feather="cpu" class="text-purple-400 mr-2"></i>
+                <span>Memory Usage</span>
+              </div>
+              <span class="text-yellow-400 text-xs bg-yellow-400/10 px-2 py-0.5 rounded-full">O(1)</span>
+            </div>
+            <div class="mt-2 text-gray-400">
+              <p>• Constant space complexity</p>
+              <p>• Only primitive variables used</p>
             </div>
           </div>
-          <div class="flex items-start">
-            <i data-feather="code" class="text-blue-400 mr-2 mt-0.5 flex-shrink-0"></i>
-            <div>
-              <div class="font-medium">Add TypeScript:</div>
-              <div class="text-gray-400">Would catch type issues at compile time</div>
+          <div class="bg-gray-800/50 p-3 rounded-lg">
+            <div class="flex items-center justify-between">
+              <div class="font-medium flex items-center">
+                <i data-feather="alert-triangle" class="text-red-400 mr-2"></i>
+                <span>Potential Issues</span>
+              </div>
+              <span class="text-red-400 text-xs bg-red-400/10 px-2 py-0.5 rounded-full">2 found</span>
+            </div>
+            <div class="mt-2 text-gray-400">
+              <p>• Floating point precision (currency)</p>
+              <p>• No input sanitization</p>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
+  <script>
+    function toggleComplexity() {
+      const toggle = document.getElementById('complexityToggle');
+      const explanation = document.getElementById('codeExplanation');
+      
+      if (toggle.textContent === 'Show Advanced') {
+        toggle.textContent = 'Show Basic';
+        // Add advanced explanations
+        explanation.innerHTML += `
+          <div class="bg-gray-800/50 p-3 rounded-lg border-l-4 border-green-400">
+            <div class="flex items-center">
+              <i data-feather="code" class="text-green-400 mr-2"></i>
+              <div class="text-green-400 font-medium">Advanced Analysis</div>
+            </div>
+            <div class="mt-2 ml-6 text-gray-400">
+              <p>• Potential race conditions: None</p>
+              <p>• Memory leaks: Unlikely</p>
+              <p>• Side effects: Pure function</p>
+            </div>
+          </div>
+        `;
+      } else {
+        toggle.textContent = 'Show Advanced';
+        // Remove advanced explanations
+        const advanced = explanation.querySelector('.border-l-4.border-green-400');
+        if (advanced) advanced.remove();
+      }
+      feather.replace();
+    }
+
+    function showPerformance() {
+      const metrics = document.getElementById('analysisMetrics');
+      metrics.innerHTML = `
+        <div class="bg-gray-800/50 p-3 rounded-lg">
+          <div class="flex items-center justify-between">
+            <div class="font-medium flex items-center">
+              <i data-feather="clock" class="text-blue-400 mr-2"></i>
+              <span>Time Complexity</span>
+            </div>
+            <span class="text-green-400 text-xs bg-green-400/10 px-2 py-0.5 rounded-full">O(n)</span>
+          </div>
+          <div class="mt-2 text-gray-400">
+            <p>• Linear time operation based on input size</p>
+            <p>• No nested loops or recursive calls</p>
+          </div>
+        </div>
+        <div class="bg-gray-800/50 p-3 rounded-lg">
+          <div class="flex items-center justify-between">
+            <div class="font-medium flex items-center">
+              <i data-feather="cpu" class="text-purple-400 mr-2"></i>
+              <span>Memory Usage</span>
+            </div>
+            <span class="text-yellow-400 text-xs bg-yellow-400/10 px-2 py-0.5 rounded-full">O(1)</span>
+          </div>
+          <div class="mt-2 text-gray-400">
+            <p>• Constant space complexity</p>
+            <p>• Only primitive variables used</p>
+          </div>
+        </div>
+      `;
+      feather.replace();
+    }
+
+    function showSecurity() {
+      const metrics = document.getElementById('analysisMetrics');
+      metrics.innerHTML = `
+        <div class="bg-gray-800/50 p-3 rounded-lg">
+          <div class="flex items-center justify-between">
+            <div class="font-medium flex items-center">
+              <i data-feather="shield" class="text-red-400 mr-2"></i>
+              <span>Security Analysis</span>
+            </div>
+            <span class="text-red-400 text-xs bg-red-400/10 px-2 py-0.5 rounded-full">3 risks</span>
+          </div>
+          <div class="mt-2 text-gray-400">
+            <p>• No input sanitization</p>
+            <p>• Potential type coercion issues</p>
+            <p>• No rate limiting protection</p>
+          </div>
+        </div>
+        <div class="bg-gray-800/50 p-3 rounded-lg">
+          <div class="flex items-center justify-between">
+            <div class="font-medium flex items-center">
+              <i data-feather="lock" class="text-green-400 mr-2"></i>
+              <span>Recommendations</span>
+            </div>
+          </div>
+          <div class="mt-2 text-gray-400">
+            <p>• Add input validation for array elements</p>
+            <p>• Implement proper error handling</p>
+            <p>• Consider using TypeScript</p>
+          </div>
+        </div>
+      `;
+      feather.replace();
+    }
+
+    function showBestPractices() {
+      const metrics = document.getElementById('analysisMetrics');
+      metrics.innerHTML = `
+        <div class="bg-gray-800/50 p-3 rounded-lg">
+          <div class="flex items-center justify-between">
+            <div class="font-medium flex items-center">
+              <i data-feather="award" class="text-yellow-400 mr-2"></i>
+              <span>Code Quality</span>
+            </div>
+            <span class="text-green-400 text-xs bg-green-400/10 px-2 py-0.5 rounded-full">85%</span>
+          </div>
+          <div class="mt-2 text-gray-400">
+            <p>• Good function naming</p>
+            <p>• Clear error handling</p>
+            <p>• Missing JSDoc comments</p>
+          </div>
+        </div>
+        <div class="bg-gray-800/50 p-3 rounded-lg">
+          <div class="flex items-center justify-between">
+            <div class="font-medium flex items-center">
+              <i data-feather="zap" class="text-blue-400 mr-2"></i>
+              <span>Optimizations</span>
+            </div>
+          </div>
+          <div class="mt-2 text-gray-400">
+            <p>• Use reduce() instead of forEach</p>
+            <p>• Add floating point precision</p>
+            <p>• Consider early returns</p>
+          </div>
+        </div>
+      `;
+      feather.replace();
+    }
+  </script>
 
   <!-- CTA Section -->
 <div class="bg-gradient-to-r from-primary/20 to-secondary/20 py-16 px-4 sm:px-6 lg:px-8">