fix my index

index.html

@@ -22,10 +22,9 @@
             <p class="text-lg text-gray-400">Test your coding language typing speed & accuracy</p>
                 </div>
 <div class="bg-gray-800 rounded-xl p-6 shadow-lg mb-8">
-            
-            <div class="flex justify-between items-center mb-6">
-                <div class="flex space-x-4">
-                    <div class="bg-gray-700 px-4 py-2 rounded-lg">
+            <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
+                <div class="flex flex-wrap gap-4">
+<div class="bg-gray-700 px-4 py-2 rounded-lg">
                         <span class="text-indigo-300">Language:</span>
                         <select id="language-select" class="ml-2 bg-gray-800 text-gray-100 border-none focus:ring-2 focus:ring-indigo-500 rounded">
                             <option value="all">All Languages</option>
@@ -49,8 +48,8 @@
                     <div class="bg-gray-700 px-4 py-2 rounded-lg">
                         <span class="text-indigo-300">Speed:</span>
                         <span id="speed" class="ml-2">0 WPM</span>
-                    </div>
                 </div>
+            </div>
 </div>
             <div id="typing-area" class="bg-gray-900 rounded-lg p-6 mb-6 h-48 overflow-y-auto">
                 <div id="code-display" class="font-mono text-lg leading-relaxed"></div>
@@ -66,7 +65,7 @@
         <div id="results" class="hidden bg-gray-800 rounded-xl p-6 shadow-lg">
             <h2 class="text-2xl font-bold mb-6 text-center text-indigo-400">Your Results</h2>
             
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                 <div class="bg-gray-900 p-4 rounded-lg text-center">
                     <div class="text-4xl font-bold text-indigo-400 mb-2" id="final-wpm">0</div>
                     <div class="text-gray-400">Words Per Minute</div>
@@ -76,30 +75,33 @@
                     <div class="text-4xl font-bold text-indigo-400 mb-2" id="final-accuracy">0%</div>
                     <div class="text-gray-400">Accuracy</div>
                 </div>
+                
+                <div class="bg-gray-900 p-4 rounded-lg text-center">
+                    <div class="text-4xl font-bold text-indigo-400 mb-2" id="final-time">0s</div>
+                    <div class="text-gray-400">Time Taken</div>
+                </div>
             </div>
-            
-            <div class="mt-8 text-center">
+<div class="mt-8 text-center">
                 <button id="try-again-btn" class="bg-indigo-600 hover:bg-indigo-700 px-6 py-3 rounded-lg text-lg transition">
                     <i data-feather="repeat" class="inline mr-2"></i>Try Again
                 </button>
-            </div>
+</div>
         </div>
     </main>
 
     <custom-footer></custom-footer>
     <script src="components/header.js"></script>
     <script src="components/footer.js"></script>
-    <script>
-        // Check if user is logged in
-        if (!localStorage.getItem('userData')) {
-            window.location.href = 'login.html';
-        }
-    </script>
     <script src="script.js"></script>
-<script>
+    <script>
         feather.replace();
+        
+        // Check if user is logged in
+        document.addEventListener('DOMContentLoaded', () => {
+            if (!localStorage.getItem('userData')) {
+                window.location.href = 'login.html';
+            }
+        });
     </script>
-    
-    <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>