File size: 6,962 Bytes
9e2b812 949f474 9e2b812 949f474 9e2b812 949f474 9e2b812 949f474 9e2b812 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 |
<!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> |