select-role.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Select Role | 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>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.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;
        }
        
        .role-card {
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .role-card:hover {
            transform: translateY(-5px);
            border-color: #7c3aed;
        }
        
        .role-card.selected {
            border-color: #7c3aed;
            background: rgba(124, 58, 237, 0.1);
        }
    </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-2xl 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="user" 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">Select Your Role</h1>
                <p class="text-slate-300">Choose how you'll use QuantumCode</p>
            </div>

            <div class="grid md:grid-cols-3 gap-6 mb-8">
                <div class="role-card glass-card p-6 text-center cursor-pointer" data-role="immigrant">
                    <i data-feather="globe" class="w-10 h-10 mx-auto text-indigo-400 mb-4"></i>
                    <h3 class="text-xl font-bold mb-2">Immigrant</h3>
                    <p class="text-slate-300 text-sm">Access language learning and integration resources</p>
                </div>
                
                <div class="role-card glass-card p-6 text-center cursor-pointer" data-role="student">
                    <i data-feather="book" class="w-10 h-10 mx-auto text-indigo-400 mb-4"></i>
                    <h3 class="text-xl font-bold mb-2">Student</h3>
                    <p class="text-slate-300 text-sm">Learn programming and technology skills</p>
                </div>
                
                <div class="role-card glass-card p-6 text-center cursor-pointer" data-role="teacher">
                    <i data-feather="users" class="w-10 h-10 mx-auto text-indigo-400 mb-4"></i>
                    <h3 class="text-xl font-bold mb-2">Teacher/Admin</h3>
                    <p class="text-slate-300 text-sm">Manage courses and student progress</p>
                </div>
            </div>

            <button id="confirmRole" class="w-full py-3 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-medium transition-colors opacity-50 cursor-not-allowed" disabled>
                Confirm Role
            </button>
        </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();
        const database = firebase.database();

        let selectedRole = null;

        // Role selection
        document.querySelectorAll('.role-card').forEach(card => {
            card.addEventListener('click', () => {
                document.querySelectorAll('.role-card').forEach(c => c.classList.remove('selected'));
                card.classList.add('selected');
                selectedRole = card.getAttribute('data-role');
                document.getElementById('confirmRole').disabled = false;
                document.getElementById('confirmRole').classList.remove('opacity-50', 'cursor-not-allowed');
            });
        });

        // Save role and redirect
        document.getElementById('confirmRole').addEventListener('click', () => {
            if (!selectedRole) return;
            
            const user = auth.currentUser;
            if (user) {
                database.ref('users/' + user.uid).update({
                    role: selectedRole
                }).then(() => {
                    // Redirect based on role
                    switch(selectedRole) {
                        case 'immigrant':
                            window.location.href = 'immigrant-dashboard.html';
                            break;
                        case 'student':
                            window.location.href = 'student-dashboard.html';
                            break;
                        case 'teacher':
                            window.location.href = 'teacher-dashboard.html';
                            break;
                        default:
                            window.location.href = 'index.html';
                    }
                }).catch(error => {
                    console.error('Error saving role:', error);
                    alert('Error saving your role. Please try again.');
                });
            } else {
                alert('You must be logged in to select a role.');
                window.location.href = 'auth.html';
            }
        });
        // Set initial language
        document.getElementById('currentLang').textContent = 
            document.cookie.match('(^|;)\\s*NEXT_LOCALE\\s*=\\s*([^;]+)')?.pop() || 'EN';

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