we still need multi-lingual options, so put it back

index.html

@@ -56,10 +56,22 @@
                     <span class="ml-2 font-semibold text-gray-800 dark:text-white">AuthPortal Pro</span>
                 </div>
             </div>
-            
             <div class="flex items-center space-x-4">
-<!-- Dark Mode Toggle -->
-                <button id="theme-toggle" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2">
+                <!-- Language Selector -->
+                <div class="relative">
+                    <select class="appearance-none bg-transparent border border-gray-300 dark:border-gray-600 rounded px-3 py-1 pr-8 text-sm text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-1 focus:ring-primary-500">
+                        <option value="en">English</option>
+                        <option value="es">Español</option>
+                        <option value="fr">Français</option>
+                        <option value="de">Deutsch</option>
+                        <option value="ja">日本語</option>
+                    </select>
+                    <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+                        <i data-feather="globe" class="h-4 w-4 text-gray-400 dark:text-gray-500"></i>
+                    </div>
+                </div>
+                <!-- Dark Mode Toggle -->
+<button id="theme-toggle" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2">
                     <i id="theme-icon" data-feather="moon" class="w-5 h-5"></i>
                 </button>
             </div>
@@ -74,8 +86,9 @@
                 <div class="mx-auto flex items-center justify-center h-32 w-32 rounded-full bg-primary-100 dark:bg-primary-900/30 p-4">
                     <i data-feather="shield" class="h-20 w-20 text-primary-500 dark:text-primary-400"></i>
                 </div>
-                <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
-                    Sign in to your account
+                <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white" data-i18n="sign_in_title">
+                        <span data-i18n="sign_in_button">Sign in</span>
+to your account
                 </h2>
 </div>
 
@@ -83,8 +96,8 @@
                 <input type="hidden" name="remember" value="true">
                 <div class="rounded-md shadow-sm space-y-4">
                     <div>
-                        <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Username or Email</label>
-                        <div class="relative">
+                        <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" data-i18n="username_label">Username or Email</label>
+<div class="relative">
                             <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                 <i data-feather="user" class="h-5 w-5 text-gray-400 dark:text-gray-500"></i>
                             </div>
@@ -92,8 +105,8 @@
                         </div>
                     </div>
                     <div>
-                        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
-                        <div class="relative">
+                        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" data-i18n="password_label">Password</label>
+<div class="relative">
                             <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                 <i data-feather="lock" class="h-5 w-5 text-gray-400 dark:text-gray-500"></i>
                             </div>
@@ -108,15 +121,15 @@
                 <div class="flex items-center justify-between">
                     <div class="flex items-center">
                         <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-primary-500 focus:ring-primary-400 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
-                        <label for="remember-me" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
+                        <label for="remember-me" class="ml-2 block text-sm text-gray-700 dark:text-gray-300" data-i18n="remember_me">
                             Remember me
                         </label>
-                    </div>
+</div>
 
                     <div class="text-sm">
                         <a href="#" class="font-medium text-primary-500 dark:text-primary-400 hover:text-primary-600 dark:hover:text-primary-300">
-                            Forgot your password?
-                        </a>
+                            <span data-i18n="forgot_password">Forgot your password?</span>
+</a>
                     </div>
                 </div>
 
@@ -172,9 +185,16 @@
             }
             feather.replace();
         }
-        
+        // Language change handler
+        document.querySelector('select').addEventListener('change', function() {
+            const lang = this.value;
+            // In a real app, you would load translations here
+            // For demo purposes, we'll just show the selected language
+            console.log('Language changed to:', lang);
+        });
+
         // Initialize feather icons
         feather.replace();
-    </script>
+</script>
 </body>
 </html>