index.html

<!DOCTYPE html>
<html lang="en" class="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login | AuthPortal Pro</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: {
                            500: '#3B82F6',
                            600: '#2563EB',
                        },
                        secondary: {
                            500: '#6366F1',
                            600: '#4F46E5',
                        }
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        html {
            font-family: 'Inter', sans-serif;
        }
        .login-container {
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .dark .login-container {
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
        }
        .input-field:focus {
            border-color: #3B82F6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
        }
        .dark .input-field:focus {
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
        }
    </style>
</head>
<body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-200 min-h-screen flex flex-col">
    <!-- Navigation Bar -->
    <nav class="bg-white dark:bg-gray-800 shadow-sm py-4 px-6">
        <div class="max-w-6xl mx-auto flex justify-between items-center">
            <div class="flex items-center space-x-4">
                <div class="flex items-center">
                    <i data-feather="lock" class="text-primary-500 dark:text-primary-400 w-6 h-6"></i>
                    <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">
                <!-- 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-100 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:bg-gray-700">
                        <option value="en" class="dark:bg-gray-700 dark:text-gray-100">English</option>
                        <option value="es" class="dark:bg-gray-700 dark:text-gray-100">Español</option>
                        <option value="fr" class="dark:bg-gray-700 dark:text-gray-100">Français</option>
                        <option value="de" class="dark:bg-gray-700 dark:text-gray-100">Deutsch</option>
                        <option value="ja" class="dark:bg-gray-700 dark:text-gray-100">日本語</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-300"></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>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="flex-grow flex items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
        <div class="max-w-md w-full space-y-8">
            <div class="text-center">
                <!-- Logo Placeholder -->
                <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" data-i18n="sign_in_title">
                        <span data-i18n="sign_in_button">Sign in</span>
to your account
                </h2>
</div>

            <form class="mt-8 space-y-6 login-container bg-white dark:bg-gray-800 p-8 rounded-lg" action="#" method="POST">
                <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" 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>
                            <input id="username" name="username" type="text" required class="input-field pl-10 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white" placeholder="username@example.com">
                        </div>
                    </div>
                    <div>
                        <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>
                            <input id="password" name="password" type="password" autocomplete="current-password" required class="input-field pl-10 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white" placeholder="••••••••">
                            <div class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer" onclick="togglePasswordVisibility()">
                                <i id="eye-icon" data-feather="eye" class="h-5 w-5 text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <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" data-i18n="remember_me">
                            Remember me
                        </label>
</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">
                            <span data-i18n="forgot_password">Forgot your password?</span>
</a>
                    </div>
                </div>

                <div>
                    <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-800">
                        <span class="absolute left-0 inset-y-0 flex items-center pl-3">
                            <i data-feather="log-in" class="h-5 w-5 text-primary-100 group-hover:text-primary-200"></i>
                        </span>
                        Sign in
                    </button>
                </div>
</form>
</div>
    </main>

    <script>
        // Theme toggle functionality
        const themeToggle = document.getElementById('theme-toggle');
        const themeIcon = document.getElementById('theme-icon');
        const html = document.documentElement;
        
        // Check for saved theme preference or use preferred OS theme
        if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            html.classList.add('dark');
            themeIcon.setAttribute('data-feather', 'sun');
        } else {
            html.classList.remove('dark');
            themeIcon.setAttribute('data-feather', 'moon');
        }
        
        themeToggle.addEventListener('click', () => {
            html.classList.toggle('dark');
            localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
            
            if (html.classList.contains('dark')) {
                themeIcon.setAttribute('data-feather', 'sun');
            } else {
                themeIcon.setAttribute('data-feather', 'moon');
            }
            feather.replace();
        });
// Password visibility toggle
        function togglePasswordVisibility() {
            const passwordInput = document.getElementById('password');
            const eyeIcon = document.getElementById('eye-icon');
            
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                eyeIcon.setAttribute('data-feather', 'eye-off');
            } else {
                passwordInput.type = 'password';
                eyeIcon.setAttribute('data-feather', 'eye');
            }
            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>
</body>
</html>