make the input js div same just as code explain div

index.html

@@ -221,37 +221,48 @@
             </button>
           </div>
         </div>
-        <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>);
-  }
-
-  <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>);
-  });
-
-  <span class="text-green-400">return</span> total;
-}</div>
+        <div id="codeEditor" class="w-full h-80 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-2 gap-3 mt-4">
-          <button onclick="explainCode()" class="group relative bg-gray-800/50 hover:bg-gray-700/70 border border-gray-700 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">
+          <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-800/50 hover:bg-gray-700/70 border border-gray-700 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">
+          <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-800/50 hover:bg-gray-700/70 border border-gray-700 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">
+          <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-800/50 hover:bg-gray-700/70 border border-gray-700 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">
+          <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>