Hugging Face's logo

Spaces:
muboboev
/
quantumcode-ai-architect
Running

App Files Community
muboboev commited on
Commit
8df57b3
·
verified ·
1 Parent(s): 4bd35f1

🧍‍♂️ ЭТАП 2. Onboarding & Role Selection (Sprint 2–3)

Browse files

Подэтап 2.1 — Регистрация и авторизация

Реализовать регистрацию по email, Google, Telegram, Apple ID.

Создать JWT / Firebase аутентификацию.

Подключить многофакторную авторизацию (SMS/email).

Files changed (3) hide show
  1. auth.html +144 -0
  2. data-architecture.html +2 -2
  3. index.html +1 -1
auth.html ADDED
@@ -0,0 +1,144 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Authentication | QuantumCode</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
11
+ <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
14
+
15
+ body {
16
+ font-family: 'Space Grotesk', sans-serif;
17
+ background-color: #0f172a;
18
+ color: #e2e8f0;
19
+ }
20
+
21
+ .gradient-text {
22
+ background: linear-gradient(90deg, #7c3aed 0%, #2563eb 100%);
23
+ -webkit-background-clip: text;
24
+ background-clip: text;
25
+ color: transparent;
26
+ }
27
+
28
+ .glass-card {
29
+ background: rgba(15, 23, 42, 0.7);
30
+ backdrop-filter: blur(10px);
31
+ border: 1px solid rgba(255, 255, 255, 0.1);
32
+ border-radius: 1rem;
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="min-h-screen flex items-center justify-center">
37
+ <div class="container mx-auto px-4 py-12">
38
+ <div class="max-w-md mx-auto glass-card p-8">
39
+ <div class="text-center mb-8">
40
+ <div class="flex justify-center mb-4">
41
+ <i data-feather="cpu" class="text-indigo-500 w-12 h-12"></i>
42
+ </div>
43
+ <h1 class="text-3xl font-bold gradient-text mb-2">Welcome to QuantumCode</h1>
44
+ <p class="text-slate-300">Sign in to continue</p>
45
+ </div>
46
+
47
+ <form id="authForm" class="space-y-4">
48
+ <div>
49
+ <label for="email" class="block text-sm font-medium mb-1">Email</label>
50
+ <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">
51
+ </div>
52
+ <div>
53
+ <label for="password" class="block text-sm font-medium mb-1">Password</label>
54
+ <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">
55
+ </div>
56
+
57
+ <div class="flex items-center justify-between">
58
+ <div class="flex items-center">
59
+ <input id="remember" type="checkbox" class="w-4 h-4 text-indigo-600 bg-slate-800 border-slate-700 rounded focus:ring-indigo-500">
60
+ <label for="remember" class="ml-2 text-sm">Remember me</label>
61
+ </div>
62
+ <a href="#" class="text-sm text-indigo-400 hover:underline">Forgot password?</a>
63
+ </div>
64
+
65
+ <button type="submit" class="w-full py-3 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-medium transition-colors">
66
+ Sign In
67
+ </button>
68
+ </form>
69
+
70
+ <div class="relative my-6">
71
+ <div class="absolute inset-0 flex items-center">
72
+ <div class="w-full border-t border-slate-700"></div>
73
+ </div>
74
+ <div class="relative flex justify-center text-sm">
75
+ <span class="px-2 bg-slate-800 text-slate-400">Or continue with</span>
76
+ </div>
77
+ </div>
78
+
79
+ <div class="grid grid-cols-3 gap-4">
80
+ <button class="flex items-center justify-center py-2 px-4 border border-slate-700 rounded-lg hover:bg-slate-800 transition-colors">
81
+ <i data-feather="mail" class="text-red-500"></i>
82
+ </button>
83
+ <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">
84
+ <i data-feather="github" class="text-slate-300"></i>
85
+ </button>
86
+ <button class="flex items-center justify-center py-2 px-4 border border-slate-700 rounded-lg hover:bg-slate-800 transition-colors">
87
+ <i data-feather="smartphone" class="text-blue-400"></i>
88
+ </button>
89
+ </div>
90
+
91
+ <p class="mt-6 text-center text-sm text-slate-400">
92
+ Don't have an account? <a href="#" class="text-indigo-400 hover:underline">Register</a>
93
+ </p>
94
+ </div>
95
+ </div>
96
+
97
+ <script>
98
+ // Firebase configuration
99
+ const firebaseConfig = {
100
+ apiKey: "YOUR_API_KEY",
101
+ authDomain: "YOUR_AUTH_DOMAIN",
102
+ projectId: "YOUR_PROJECT_ID",
103
+ storageBucket: "YOUR_STORAGE_BUCKET",
104
+ messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
105
+ appId: "YOUR_APP_ID"
106
+ };
107
+
108
+ // Initialize Firebase
109
+ firebase.initializeApp(firebaseConfig);
110
+ const auth = firebase.auth();
111
+
112
+ // Handle sign-in
113
+ document.getElementById('authForm').addEventListener('submit', (e) => {
114
+ e.preventDefault();
115
+ const email = document.getElementById('email').value;
116
+ const password = document.getElementById('password').value;
117
+
118
+ auth.signInWithEmailAndPassword(email, password)
119
+ .then((userCredential) => {
120
+ // Handle successful login
121
+ window.location.href = 'index.html';
122
+ })
123
+ .catch((error) => {
124
+ console.error(error);
125
+ alert('Authentication failed: ' + error.message);
126
+ });
127
+ });
128
+
129
+ // Handle Google sign-in
130
+ document.getElementById('googleSignIn').addEventListener('click', () => {
131
+ const provider = new firebase.auth.GoogleAuthProvider();
132
+ auth.signInWithPopup(provider)
133
+ .then((result) => {
134
+ window.location.href = 'index.html';
135
+ }).catch((error) => {
136
+ console.error(error);
137
+ alert('Google sign-in failed: ' + error.message);
138
+ });
139
+ });
140
+
141
+ feather.replace();
142
+ </script>
143
+ </body>
144
+ </html>
data-architecture.html CHANGED
@@ -41,14 +41,14 @@
41
  <i data-feather="cpu" class="text-indigo-500"></i>
42
  <span class="text-xl font-bold gradient-text">QuantumCode</span>
43
  </div>
44
-
45
  <div class="hidden md:flex space-x-8">
46
  <a href="index.html" class="hover:text-indigo-400 transition-colors">Home</a>
47
  <a href="index.html#features" class="hover:text-indigo-400 transition-colors">Features</a>
48
  <a href="index.html#roadmap" class="hover:text-indigo-400 transition-colors">Roadmap</a>
49
  <a href="data-architecture.html" class="text-indigo-400">Data Architecture</a>
 
50
  </div>
51
- </nav>
52
 
53
  <main class="container mx-auto px-4 py-16">
54
  <section class="max-w-6xl mx-auto mb-20">
 
41
  <i data-feather="cpu" class="text-indigo-500"></i>
42
  <span class="text-xl font-bold gradient-text">QuantumCode</span>
43
  </div>
 
44
  <div class="hidden md:flex space-x-8">
45
  <a href="index.html" class="hover:text-indigo-400 transition-colors">Home</a>
46
  <a href="index.html#features" class="hover:text-indigo-400 transition-colors">Features</a>
47
  <a href="index.html#roadmap" class="hover:text-indigo-400 transition-colors">Roadmap</a>
48
  <a href="data-architecture.html" class="text-indigo-400">Data Architecture</a>
49
+ <a href="auth.html" class="hover:text-indigo-400 transition-colors">Login</a>
50
  </div>
51
+ </nav>
52
 
53
  <main class="container mx-auto px-4 py-16">
54
  <section class="max-w-6xl mx-auto mb-20">
index.html CHANGED
@@ -44,8 +44,8 @@
44
  <a href="#" class="hover:text-indigo-400 transition-colors">Features</a>
45
  <a href="#" class="hover:text-indigo-400 transition-colors">Roadmap</a>
46
  <a href="data-architecture.html" class="hover:text-indigo-400 transition-colors">Data Architecture</a>
 
47
  <a href="#" class="hover:text-indigo-400 transition-colors">Docs</a>
48
- <a href="#" class="hover:text-indigo-400 transition-colors">Team</a>
49
  </div>
50
  <button class="md:hidden">
51
  <i data-feather="menu"></i>
 
44
  <a href="#" class="hover:text-indigo-400 transition-colors">Features</a>
45
  <a href="#" class="hover:text-indigo-400 transition-colors">Roadmap</a>
46
  <a href="data-architecture.html" class="hover:text-indigo-400 transition-colors">Data Architecture</a>
47
+ <a href="auth.html" class="hover:text-indigo-400 transition-colors">Login</a>
48
  <a href="#" class="hover:text-indigo-400 transition-colors">Docs</a>
 
49
  </div>
50
  <button class="md:hidden">
51
  <i data-feather="menu"></i>