File size: 7,295 Bytes
8df57b3 949f474 8df57b3 949f474 8df57b3 9e2b812 8df57b3 9e2b812 8df57b3 9e2b812 8df57b3 9e2b812 8df57b3 9e2b812 8df57b3 949f474 8df57b3 949f474 8df57b3 |
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 |
<!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> |