Подэтап 2.2 — Выбор ролевого интерфейса

Реализовать UI экран “Select Role”.

Подключить список ролей:

Immigrant

Child / Student

Government / Bank / Teacher

При выборе роли → сохранять тип в UserProfile.

Создать RoleRouter — динамическое перенаправление по интерфейсу.

auth.html

@@ -61,14 +61,15 @@
                     </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="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">
@@ -87,11 +88,13 @@
                     <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>
-        </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>
@@ -114,12 +117,12 @@
             e.preventDefault();
             const email = document.getElementById('email').value;
             const password = document.getElementById('password').value;
-            
             auth.signInWithEmailAndPassword(email, password)
                 .then((userCredential) => {
                     // Handle successful login
-                    window.location.href = 'index.html';
-                })
+                    const redirectTo = document.getElementById('redirectTo').value;
+                    window.location.href = redirectTo;
+})
                 .catch((error) => {
                     console.error(error);
                     alert('Authentication failed: ' + error.message);
@@ -131,8 +134,8 @@
             const provider = new firebase.auth.GoogleAuthProvider();
             auth.signInWithPopup(provider)
                 .then((result) => {
-                    window.location.href = 'index.html';
-                }).catch((error) => {
+                    window.location.href = 'select-role.html';
+}).catch((error) => {
                     console.error(error);
                     alert('Google sign-in failed: ' + error.message);
                 });

data-architecture.html

@@ -41,13 +41,14 @@
             <i data-feather="cpu" class="text-indigo-500"></i>
             <span class="text-xl font-bold gradient-text">QuantumCode</span>
         </div>
-        <div class="hidden md:flex space-x-8">
-            <a href="index.html" class="hover:text-indigo-400 transition-colors">Home</a>
-            <a href="index.html#features" class="hover:text-indigo-400 transition-colors">Features</a>
-            <a href="index.html#roadmap" class="hover:text-indigo-400 transition-colors">Roadmap</a>
-            <a href="data-architecture.html" class="text-indigo-400">Data Architecture</a>
-            <a href="auth.html" class="hover:text-indigo-400 transition-colors">Login</a>
-        </div>
+            <div class="hidden md:flex space-x-8">
+                <a href="index.html" class="hover:text-indigo-400 transition-colors">Home</a>
+                <a href="index.html#features" class="hover:text-indigo-400 transition-colors">Features</a>
+                <a href="index.html#roadmap" class="hover:text-indigo-400 transition-colors">Roadmap</a>
+                <a href="data-architecture.html" class="text-indigo-400">Data Architecture</a>
+                <a href="auth.html" class="hover:text-indigo-400 transition-colors">Login</a>
+                <a href="select-role.html" class="hover:text-indigo-400 transition-colors">Roles</a>
+            </div>
 </nav>
     
     <main class="container mx-auto px-4 py-16">

index.html

@@ -45,6 +45,7 @@
                 <a href="#" class="hover:text-indigo-400 transition-colors">Roadmap</a>
                 <a href="data-architecture.html" class="hover:text-indigo-400 transition-colors">Data Architecture</a>
                 <a href="auth.html" class="hover:text-indigo-400 transition-colors">Login</a>
+                <a href="select-role.html" class="hover:text-indigo-400 transition-colors">Roles</a>
                 <a href="#" class="hover:text-indigo-400 transition-colors">Docs</a>
             </div>
 <button class="md:hidden">

select-role.html

@@ -0,0 +1,154 @@
+<!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-center mb-4">
+                    <i data-feather="user" class="text-indigo-500 w-12 h-12"></i>
+                </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';
+            }
+        });
+
+        feather.replace();
+    </script>
+</body>
+</html>