auth.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Authentication | QuantumCode</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Space Grotesk', sans-serif;
            background-color: #0f172a;
            color: #e2e8f0;
        }
        
        .gradient-text {
            background: linear-gradient(90deg, #7c3aed 0%, #2563eb 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .glass-card {
            background: rgba(15, 23, 42, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 1rem;
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center">
    <div class="container mx-auto px-4 py-12">
        <div class="max-w-md mx-auto glass-card p-8">
            <div class="text-center mb-8">
                <div class="flex justify-between items-center mb-4">
                    <div class="flex items-center">
                        <i data-feather="cpu" class="text-indigo-500 w-12 h-12"></i>
                    </div>
                    <a href="i18n-setup.html" class="flex items-center text-sm hover:text-indigo-400 transition-colors">
                        <i data-feather="globe" class="w-4 h-4 mr-1"></i>
                        <span id="currentLang">EN</span>
                    </a>
                </div>
<h1 class="text-3xl font-bold gradient-text mb-2">Welcome to QuantumCode</h1>
                <p class="text-slate-300">Sign in to continue</p>
            </div>

            <form id="authForm" class="space-y-4">
                <div>
                    <label for="email" class="block text-sm font-medium mb-1">Email</label>
                    <input type="email" id="email" required class="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                </div>
                <div>
                    <label for="password" class="block text-sm font-medium mb-1">Password</label>
                    <input type="password" id="password" required class="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                </div>

                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input id="remember" type="checkbox" class="w-4 h-4 text-indigo-600 bg-slate-800 border-slate-700 rounded focus:ring-indigo-500">
                        <label for="remember" class="ml-2 text-sm">Remember me</label>
                    </div>
                    <a href="#" class="text-sm text-indigo-400 hover:underline">Forgot password?</a>
                </div>
                <button type="submit" class="w-full py-3 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-medium transition-colors">
                    Sign In
                </button>
            </form>

            <input type="hidden" id="redirectTo" name="redirectTo" value="select-role.html">

            <div class="relative my-6">
<div class="absolute inset-0 flex items-center">
                    <div class="w-full border-t border-slate-700"></div>
                </div>
                <div class="relative flex justify-center text-sm">
                    <span class="px-2 bg-slate-800 text-slate-400">Or continue with</span>
                </div>
            </div>

            <div class="grid grid-cols-3 gap-4">
                <button class="flex items-center justify-center py-2 px-4 border border-slate-700 rounded-lg hover:bg-slate-800 transition-colors">
                    <i data-feather="mail" class="text-red-500"></i>
                </button>
                <button id="googleSignIn" class="flex items-center justify-center py-2 px-4 border border-slate-700 rounded-lg hover:bg-slate-800 transition-colors">
                    <i data-feather="github" class="text-slate-300"></i>
                </button>
                <button class="flex items-center justify-center py-2 px-4 border border-slate-700 rounded-lg hover:bg-slate-800 transition-colors">
                    <i data-feather="smartphone" class="text-blue-400"></i>
                </button>
            </div>
                <p class="mt-6 text-center text-sm text-slate-400">
                    Don't have an account? <a href="#" class="text-indigo-400 hover:underline">Register</a>
                </p>
                <p class="mt-2 text-center text-xs text-slate-500">
                    By signing in, you agree to our Terms of Service and Privacy Policy
                </p>
</div>
    </div>

    <script>
        // Firebase configuration
        const firebaseConfig = {
            apiKey: "YOUR_API_KEY",
            authDomain: "YOUR_AUTH_DOMAIN",
            projectId: "YOUR_PROJECT_ID",
            storageBucket: "YOUR_STORAGE_BUCKET",
            messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
            appId: "YOUR_APP_ID"
        };

        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        const auth = firebase.auth();

        // Handle sign-in
        document.getElementById('authForm').addEventListener('submit', (e) => {
            e.preventDefault();
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            auth.signInWithEmailAndPassword(email, password)
                .then((userCredential) => {
                    // Handle successful login
                    const redirectTo = document.getElementById('redirectTo').value;
                    window.location.href = redirectTo;
})
                .catch((error) => {
                    console.error(error);
                    alert('Authentication failed: ' + error.message);
                });
        });

        // Handle Google sign-in
        document.getElementById('googleSignIn').addEventListener('click', () => {
            const provider = new firebase.auth.GoogleAuthProvider();
            auth.signInWithPopup(provider)
                .then((result) => {
                    window.location.href = 'select-role.html';
}).catch((error) => {
                    console.error(error);
                    alert('Google sign-in failed: ' + error.message);
                });
        });
        // Set initial language
        document.getElementById('currentLang').textContent = 
            document.cookie.match('(^|;)\\s*NEXT_LOCALE\\s*=\\s*([^;]+)')?.pop() || 'EN';

        feather.replace();
</script>
</body>
</html>