Hugging Face's logo

Spaces:
itnvijay
/
deepsite-project-jb062
Running

App Files Community
itnvijay commited on
Commit
cbe60b1
·
verified ·
1 Parent(s): c121bbc

🐳 27/02 - 16:48 - Add Signin, Signup and logout options, create the user signin and signup pages.

Browse files
Files changed (4) hide show
  1. index.html +71 -4
  2. js/app.js +68 -0
  3. signin.html +221 -0
  4. signup.html +269 -0
index.html CHANGED
@@ -99,9 +99,53 @@
99
  radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.3) 0%, transparent 50%),
100
  radial-gradient(circle at 50% 50%, rgba(17, 24, 39, 1) 0%, rgba(0, 0, 0, 1) 100%);
101
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
102
  </style>
103
  </head>
104
- <body class="bg-gray-900 text-gray-100 font-sans overflow-x-hidden" data-role="developer">
105
  <div class="gradient-mesh" id="bgMesh"></div>
106
 
107
  <!-- Header -->
@@ -138,9 +182,32 @@
138
  <span class="text-sm font-mono">2,450 credits</span>
139
  </div>
140
 
141
- <!-- User -->
142
- <div class="w-10 h-10 rounded-full accent-bg/20 border-2 accent-border flex items-center justify-center cursor-pointer hover:scale-105 transition-transform">
143
- <span class="font-bold accent-text">JD</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
144
  </div>
145
  </div>
146
  </div>
 
99
  radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.3) 0%, transparent 50%),
100
  radial-gradient(circle at 50% 50%, rgba(17, 24, 39, 1) 0%, rgba(0, 0, 0, 1) 100%);
101
  }
102
+
103
+ /* Light Theme Styles */
104
+ html.light body {
105
+ background-color: #f8fafc;
106
+ color: #1e293b;
107
+ }
108
+
109
+ html.light .glass-panel {
110
+ background: rgba(255, 255, 255, 0.8);
111
+ border-color: rgba(0, 0, 0, 0.1);
112
+ }
113
+
114
+ html.light .gradient-mesh {
115
+ opacity: 0.15;
116
+ background: radial-gradient(circle at 20% 50%, var(--accent, #3b82f6) 0%, transparent 50%),
117
+ radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.2) 0%, transparent 50%),
118
+ radial-gradient(circle at 50% 50%, rgba(241, 245, 249, 1) 0%, rgba(226, 232, 240, 1) 100%);
119
+ }
120
+
121
+ html.light textarea {
122
+ color: #334155;
123
+ }
124
+
125
+ html.light textarea::placeholder {
126
+ color: #94a3b8;
127
+ }
128
+
129
+ html.light .text-gray-100 { color: #1e293b; }
130
+ html.light .text-gray-200 { color: #334155; }
131
+ html.light .text-gray-300 { color: #475569; }
132
+ html.light .text-gray-400 { color: #64748b; }
133
+ html.light .text-gray-500 { color: #94a3b8; }
134
+ html.light .text-gray-600 { color: #cbd5e1; }
135
+
136
+ html.light .border-white\/10 { border-color: rgba(0,0,0,0.1); }
137
+ html.light .border-white\/5 { border-color: rgba(0,0,0,0.05); }
138
+ html.light .border-white\/20 { border-color: rgba(0,0,0,0.2); }
139
+
140
+ html.light .bg-white\/5 { background-color: rgba(0,0,0,0.03); }
141
+ html.light .bg-white\/10 { background-color: rgba(0,0,0,0.05); }
142
+ html.light .hover\:bg-white\/5:hover { background-color: rgba(0,0,0,0.05); }
143
+ html.light .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,0.1); }
144
+
145
+ html.light .bg-gray-950\/50 { background-color: rgba(241, 245, 249, 0.5); }
146
  </style>
147
  </head>
148
+ <body class="bg-gray-900 text-gray-100 font-sans overflow-x-hidden transition-colors duration-300" data-role="developer">
149
  <div class="gradient-mesh" id="bgMesh"></div>
150
 
151
  <!-- Header -->
 
182
  <span class="text-sm font-mono">2,450 credits</span>
183
  </div>
184
 
185
+ <!-- Theme Toggle -->
186
+ <button id="themeToggle" class="p-2 rounded-lg bg-white/5 border border-white/10 hover:bg-white/10 transition-colors" onclick="toggleTheme()" title="Toggle Theme">
187
+ <i data-lucide="moon" class="w-5 h-5" id="themeIcon"></i>
188
+ </button>
189
+
190
+ <!-- User Menu -->
191
+ <div class="relative group">
192
+ <button class="w-10 h-10 rounded-full accent-bg/20 border-2 accent-border flex items-center justify-center cursor-pointer hover:scale-105 transition-transform">
193
+ <span class="font-bold accent-text" id="userInitials">JD</span>
194
+ </button>
195
+ <div class="absolute top-full right-0 mt-2 w-48 glass-panel rounded-xl shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all transform origin-top scale-95 group-hover:scale-100 z-50">
196
+ <div class="p-2 space-y-1">
197
+ <div class="px-3 py-2 border-b border-white/10">
198
+ <p class="text-sm font-medium" id="userName">John Doe</p>
199
+ <p class="text-xs text-gray-400" id="userEmail">john@example.com</p>
200
+ </div>
201
+ <a href="signin.html" id="authLink" class="w-full flex items-center gap-3 p-2 rounded-lg hover:bg-white/5 transition-colors text-left">
202
+ <i data-lucide="log-in" class="w-4 h-4"></i>
203
+ <span class="text-sm">Sign In</span>
204
+ </a>
205
+ <button onclick="logout()" id="logoutBtn" class="w-full flex items-center gap-3 p-2 rounded-lg hover:bg-white/5 transition-colors text-left text-red-400 hidden">
206
+ <i data-lucide="log-out" class="w-4 h-4"></i>
207
+ <span class="text-sm">Logout</span>
208
+ </button>
209
+ </div>
210
+ </div>
211
  </div>
212
  </div>
213
  </div>
js/app.js CHANGED
@@ -97,6 +97,8 @@ document.addEventListener('DOMContentLoaded', () => {
97
  lucide.createIcons();
98
  renderRoleMenu();
99
  renderTools();
 
 
100
  loadRole(currentRole);
101
 
102
  // Tab switching
@@ -104,6 +106,72 @@ document.addEventListener('DOMContentLoaded', () => {
104
  document.getElementById('outputTabBtn').addEventListener('click', () => showTab('output'));
105
  });
106
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
107
  // Role Management
108
  function renderRoleMenu() {
109
  const menu = document.getElementById('roleMenu');
 
97
  lucide.createIcons();
98
  renderRoleMenu();
99
  renderTools();
100
+ initTheme();
101
+ initAuth();
102
  loadRole(currentRole);
103
 
104
  // Tab switching
 
106
  document.getElementById('outputTabBtn').addEventListener('click', () => showTab('output'));
107
  });
108
 
109
+ // Theme Management
110
+ function initTheme() {
111
+ const savedTheme = localStorage.getItem('theme') || 'dark';
112
+ if (savedTheme === 'light') {
113
+ document.documentElement.classList.add('light');
114
+ updateThemeIcon('sun');
115
+ } else {
116
+ updateThemeIcon('moon');
117
+ }
118
+ }
119
+
120
+ function toggleTheme() {
121
+ const isLight = document.documentElement.classList.toggle('light');
122
+ const theme = isLight ? 'light' : 'dark';
123
+ localStorage.setItem('theme', theme);
124
+ updateThemeIcon(isLight ? 'sun' : 'moon');
125
+ }
126
+
127
+ function updateThemeIcon(icon) {
128
+ const themeIcon = document.getElementById('themeIcon');
129
+ if (themeIcon) {
130
+ themeIcon.setAttribute('data-lucide', icon);
131
+ lucide.createIcons();
132
+ }
133
+ }
134
+
135
+ // Auth Management
136
+ function initAuth() {
137
+ const user = getCurrentUser();
138
+ const authLink = document.getElementById('authLink');
139
+ const logoutBtn = document.getElementById('logoutBtn');
140
+ const userInitials = document.getElementById('userInitials');
141
+ const userName = document.getElementById('userName');
142
+ const userEmail = document.getElementById('userEmail');
143
+
144
+ if (user && user.isLoggedIn) {
145
+ if (authLink) authLink.classList.add('hidden');
146
+ if (logoutBtn) logoutBtn.classList.remove('hidden');
147
+ if (userInitials) userInitials.textContent = user.initials || 'U';
148
+ if (userName) userName.textContent = user.name || 'User';
149
+ if (userEmail) userEmail.textContent = user.email || '';
150
+
151
+ // Load user's preferred role if exists
152
+ if (user.role) {
153
+ currentRole = user.role;
154
+ loadRole(currentRole);
155
+ }
156
+ } else {
157
+ if (authLink) authLink.classList.remove('hidden');
158
+ if (logoutBtn) logoutBtn.classList.add('hidden');
159
+ }
160
+ }
161
+
162
+ function getCurrentUser() {
163
+ try {
164
+ return JSON.parse(localStorage.getItem('promptforge_user')) || null;
165
+ } catch (e) {
166
+ return null;
167
+ }
168
+ }
169
+
170
+ function logout() {
171
+ localStorage.removeItem('promptforge_user');
172
+ window.location.href = 'signin.html';
173
+ }
174
+
175
  // Role Management
176
  function renderRoleMenu() {
177
  const menu = document.getElementById('roleMenu');
signin.html ADDED
@@ -0,0 +1,221 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Sign In - PromptForge AI</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
12
+ <script>
13
+ tailwind.config = {
14
+ darkMode: 'class',
15
+ theme: {
16
+ extend: {
17
+ fontFamily: {
18
+ sans: ['Inter', 'sans-serif'],
19
+ mono: ['JetBrains Mono', 'monospace'],
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ .glass-panel {
27
+ background: rgba(17, 24, 39, 0.7);
28
+ backdrop-filter: blur(12px);
29
+ border: 1px solid rgba(255, 255, 255, 0.1);
30
+ }
31
+
32
+ html.light .glass-panel {
33
+ background: rgba(255, 255, 255, 0.8);
34
+ border-color: rgba(0, 0, 0, 0.1);
35
+ }
36
+
37
+ html.light body {
38
+ background-color: #f8fafc;
39
+ color: #1e293b;
40
+ }
41
+
42
+ .gradient-bg {
43
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
44
+ }
45
+
46
+ html.light .text-gray-100 { color: #1e293b; }
47
+ html.light .text-gray-200 { color: #334155; }
48
+ html.light .text-gray-300 { color: #475569; }
49
+ html.light .text-gray-400 { color: #64748b; }
50
+ html.light .border-white\/10 { border-color: rgba(0,0,0,0.1); }
51
+ html.light .bg-white\/5 { background-color: rgba(0,0,0,0.03); }
52
+ </style>
53
+ </head>
54
+ <body class="bg-gray-900 text-gray-100 font-sans min-h-screen flex items-center justify-center p-4 transition-colors duration-300" data-role="developer">
55
+ <!-- Background -->
56
+ <div class="fixed inset-0 z-0 opacity-30">
57
+ <div class="absolute inset-0 bg-gradient-to-br from-blue-900/40 via-purple-900/40 to-pink-900/40"></div>
58
+ <div class="absolute top-0 left-0 w-full h-full" style="background: radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.3) 0%, transparent 50%);"></div>
59
+ </div>
60
+
61
+ <div id="bgMesh" class="fixed inset-0 -z-10" style="--accent: #3b82f6;"></div>
62
+
63
+ <!-- Main Container -->
64
+ <div class="w-full max-w-md relative z-10">
65
+ <!-- Logo -->
66
+ <div class="text-center mb-8">
67
+ <div class="w-16 h-16 rounded-2xl bg-blue-500 flex items-center justify-center mx-auto mb-4 shadow-lg shadow-blue-500/30">
68
+ <i data-lucide="cpu" class="w-8 h-8 text-white"></i>
69
+ </div>
70
+ <h1 class="text-2xl font-bold">Welcome back</h1>
71
+ <p class="text-gray-400 mt-2">Sign in to continue to PromptForge AI</p>
72
+ </div>
73
+
74
+ <!-- Sign In Card -->
75
+ <div class="glass-panel rounded-2xl p-8 shadow-2xl">
76
+ <form id="signinForm" onsubmit="handleSignIn(event)">
77
+ <div class="space-y-5">
78
+ <div>
79
+ <label class="block text-sm font-medium text-gray-300 mb-2">Email Address</label>
80
+ <div class="relative">
81
+ <i data-lucide="mail" class="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
82
+ <input type="email" id="email" required class="w-full pl-10 pr-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors" placeholder="you@example.com">
83
+ </div>
84
+ </div>
85
+
86
+ <div>
87
+ <label class="block text-sm font-medium text-gray-300 mb-2">Password</label>
88
+ <div class="relative">
89
+ <i data-lucide="lock" class="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
90
+ <input type="password" id="password" required class="w-full pl-10 pr-12 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors" placeholder="••••••••">
91
+ <button type="button" onclick="togglePassword()" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white transition-colors">
92
+ <i data-lucide="eye" class="w-5 h-5" id="eyeIcon"></i>
93
+ </button>
94
+ </div>
95
+ </div>
96
+
97
+ <div class="flex items-center justify-between">
98
+ <label class="flex items-center gap-2 cursor-pointer">
99
+ <input type="checkbox" id="remember" class="w-4 h-4 rounded border-white/10 bg-white/5 text-blue-500 focus:ring-blue-500">
100
+ <span class="text-sm text-gray-400">Remember me</span>
101
+ </label>
102
+ <a href="#" class="text-sm text-blue-400 hover:text-blue-300 transition-colors">Forgot password?</a>
103
+ </div>
104
+
105
+ <button type="submit" class="w-full py-3 rounded-lg bg-blue-500 text-white font-medium hover:bg-blue-600 transition-colors shadow-lg shadow-blue-500/30 flex items-center justify-center gap-2">
106
+ <i data-lucide="log-in" class="w-4 h-4"></i>
107
+ Sign In
108
+ </button>
109
+ </div>
110
+ </form>
111
+
112
+ <div class="mt-6">
113
+ <div class="relative">
114
+ <div class="absolute inset-0 flex items-center">
115
+ <div class="w-full border-t border-white/10"></div>
116
+ </div>
117
+ <div class="relative flex justify-center text-sm">
118
+ <span class="px-2 bg-gray-900/50 text-gray-400">Or continue with</span>
119
+ </div>
120
+ </div>
121
+
122
+ <div class="grid grid-cols-3 gap-3 mt-6">
123
+ <button onclick="socialSignIn('google')" class="flex items-center justify-center py-2.5 rounded-lg bg-white/5 border border-white/10 hover:bg-white/10 transition-colors">
124
+ <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
125
+ <path d="M12.545,10.239v3.821h5.445c-0.712,2.315-2.647,3.972-5.445,3.972c-3.332,0-6.033-2.701-6.033-6.032s2.701-6.032,6.033-6.032c1.498,0,2.866,0.549,3.921,1.453l2.814-2.814C17.503,2.988,15.139,2,12.545,2C7.021,2,2.543,6.477,2.543,12s4.478,10,10.002,10c8.396,0,10.249-7.85,9.426-11.748L12.545,10.239z"/>
126
+ </svg>
127
+ </button>
128
+ <button onclick="socialSignIn('github')" class="flex items-center justify-center py-2.5 rounded-lg bg-white/5 border border-white/10 hover:bg-white/10 transition-colors">
129
+ <i data-lucide="github" class="w-5 h-5"></i>
130
+ </button>
131
+ <button onclick="socialSignIn('twitter')" class="flex items-center justify-center py-2.5 rounded-lg bg-white/5 border border-white/10 hover:bg-white/10 transition-colors">
132
+ <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
133
+ <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
134
+ </svg>
135
+ </button>
136
+ </div>
137
+ </div>
138
+ </div>
139
+
140
+ <!-- Sign Up Link -->
141
+ <p class="text-center mt-6 text-gray-400">
142
+ Don't have an account?
143
+ <a href="signup.html" class="text-blue-400 hover:text-blue-300 font-medium transition-colors">Sign up</a>
144
+ </p>
145
+
146
+ <!-- Back Home -->
147
+ <div class="text-center mt-4">
148
+ <a href="index.html" class="text-sm text-gray-500 hover:text-gray-400 flex items-center justify-center gap-1 transition-colors">
149
+ <i data-lucide="arrow-left" class="w-4 h-4"></i>
150
+ Back to home
151
+ </a>
152
+ </div>
153
+ </div>
154
+
155
+ <script src="https://unpkg.com/lucide@latest"></script>
156
+ <script>
157
+ lucide.createIcons();
158
+
159
+ // Theme handling
160
+ const savedTheme = localStorage.getItem('theme') || 'dark';
161
+ if (savedTheme === 'light') {
162
+ document.documentElement.classList.add('light');
163
+ }
164
+
165
+ // Update bgMesh accent
166
+ const savedRole = localStorage.getItem('currentRole') || 'developer';
167
+ const roleColors = {
168
+ developer: '#3b82f6',
169
+ ux: '#8b5cf6',
170
+ marketing: '#f59e0b',
171
+ content: '#10b981',
172
+ data: '#ec4899'
173
+ };
174
+ document.getElementById('bgMesh').style.setProperty('--accent', roleColors[savedRole] || '#3b82f6');
175
+
176
+ function togglePassword() {
177
+ const password = document.getElementById('password');
178
+ const eyeIcon = document.getElementById('eyeIcon');
179
+ if (password.type === 'password') {
180
+ password.type = 'text';
181
+ eyeIcon.setAttribute('data-lucide', 'eye-off');
182
+ } else {
183
+ password.type = 'password';
184
+ eyeIcon.setAttribute('data-lucide', 'eye');
185
+ }
186
+ lucide.createIcons();
187
+ }
188
+
189
+ function handleSignIn(e) {
190
+ e.preventDefault();
191
+ const email = document.getElementById('email').value;
192
+ const remember = document.getElementById('remember').checked;
193
+
194
+ // Store user session
195
+ const user = {
196
+ email: email,
197
+ name: email.split('@')[0],
198
+ initials: email.substring(0, 2).toUpperCase(),
199
+ isLoggedIn: true,
200
+ remember: remember
201
+ };
202
+
203
+ localStorage.setItem('promptforge_user', JSON.stringify(user));
204
+ window.location.href = 'index.html';
205
+ }
206
+
207
+ function socialSignIn(provider) {
208
+ // Mock social sign in
209
+ const user = {
210
+ email: `user@${provider}.com`,
211
+ name: 'Social User',
212
+ initials: 'SU',
213
+ isLoggedIn: true,
214
+ provider: provider
215
+ };
216
+ localStorage.setItem('promptforge_user', JSON.stringify(user));
217
+ window.location.href = 'index.html';
218
+ }
219
+ </script>
220
+ </body>
221
+ </html>
signup.html ADDED
@@ -0,0 +1,269 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Sign Up - PromptForge AI</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
12
+ <script>
13
+ tailwind.config = {
14
+ darkMode: 'class',
15
+ theme: {
16
+ extend: {
17
+ fontFamily: {
18
+ sans: ['Inter', 'sans-serif'],
19
+ mono: ['JetBrains Mono', 'monospace'],
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ .glass-panel {
27
+ background: rgba(17, 24, 39, 0.7);
28
+ backdrop-filter: blur(12px);
29
+ border: 1px solid rgba(255, 255, 255, 0.1);
30
+ }
31
+
32
+ html.light .glass-panel {
33
+ background: rgba(255, 255, 255, 0.8);
34
+ border-color: rgba(0, 0, 0, 0.1);
35
+ }
36
+
37
+ html.light body {
38
+ background-color: #f8fafc;
39
+ color: #1e293b;
40
+ }
41
+
42
+ html.light .text-gray-100 { color: #1e293b; }
43
+ html.light .text-gray-200 { color: #334155; }
44
+ html.light .text-gray-300 { color: #475569; }
45
+ html.light .text-gray-400 { color: #64748b; }
46
+ html.light .border-white\/10 { border-color: rgba(0,0,0,0.1); }
47
+ html.light .bg-white\/5 { background-color: rgba(0,0,0,0.03); }
48
+ html.light .bg-white\/10 { background-color: rgba(0,0,0,0.05); }
49
+ </style>
50
+ </head>
51
+ <body class="bg-gray-900 text-gray-100 font-sans min-h-screen flex items-center justify-center p-4 transition-colors duration-300" data-role="developer">
52
+ <!-- Background -->
53
+ <div class="fixed inset-0 z-0 opacity-30">
54
+ <div class="absolute inset-0 bg-gradient-to-br from-blue-900/40 via-purple-900/40 to-pink-900/40"></div>
55
+ <div class="absolute top-0 left-0 w-full h-full" style="background: radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.3) 0%, transparent 50%);"></div>
56
+ </div>
57
+
58
+ <div id="bgMesh" class="fixed inset-0 -z-10" style="--accent: #3b82f6;"></div>
59
+
60
+ <!-- Progress Steps -->
61
+ <div class="absolute top-8 left-1/2 transform -translate-x-1/2 w-full max-w-md px-8">
62
+ <div class="flex items-center justify-between mb-4">
63
+ <div class="flex items-center gap-2">
64
+ <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-sm font-medium">1</div>
65
+ <span class="text-sm font-medium text-blue-400">Account</span>
66
+ </div>
67
+ <div class="flex-1 h-0.5 bg-blue-500 mx-4"></div>
68
+ <div class="flex items-center gap-2">
69
+ <div class="w-8 h-8 rounded-full bg-white/10 border border-white/20 flex items-center justify-center text-sm font-medium text-gray-400">2</div>
70
+ <span class="text-sm text-gray-500">Workspace</span>
71
+ </div>
72
+ </div>
73
+ </div>
74
+
75
+ <!-- Main Container -->
76
+ <div class="w-full max-w-md relative z-10 mt-16">
77
+ <!-- Logo -->
78
+ <div class="text-center mb-6">
79
+ <h1 class="text-2xl font-bold">Create your account</h1>
80
+ <p class="text-gray-400 mt-2">Start your AI workflow journey today</p>
81
+ </div>
82
+
83
+ <!-- Sign Up Card -->
84
+ <div class="glass-panel rounded-2xl p-8 shadow-2xl">
85
+ <form id="signupForm" onsubmit="handleSignUp(event)">
86
+ <div class="space-y-4">
87
+ <div class="grid grid-cols-2 gap-4">
88
+ <div>
89
+ <label class="block text-sm font-medium text-gray-300 mb-2">First Name</label>
90
+ <input type="text" id="firstName" required class="w-full px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors" placeholder="John">
91
+ </div>
92
+ <div>
93
+ <label class="block text-sm font-medium text-gray-300 mb-2">Last Name</label>
94
+ <input type="text" id="lastName" required class="w-full px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors" placeholder="Doe">
95
+ </div>
96
+ </div>
97
+
98
+ <div>
99
+ <label class="block text-sm font-medium text-gray-300 mb-2">Email Address</label>
100
+ <div class="relative">
101
+ <i data-lucide="mail" class="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
102
+ <input type="email" id="email" required class="w-full pl-10 pr-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors" placeholder="you@example.com">
103
+ </div>
104
+ </div>
105
+
106
+ <div>
107
+ <label class="block text-sm font-medium text-gray-300 mb-2">Role / Profession</label>
108
+ <div class="grid grid-cols-2 gap-2">
109
+ <label class="flex items-center gap-2 p-3 rounded-lg bg-white/5 border border-white/10 cursor-pointer hover:bg-white/10 transition-colors">
110
+ <input type="radio" name="role" value="developer" checked class="text-blue-500">
111
+ <span class="text-sm">Developer</span>
112
+ </label>
113
+ <label class="flex items-center gap-2 p-3 rounded-lg bg-white/5 border border-white/10 cursor-pointer hover:bg-white/10 transition-colors">
114
+ <input type="radio" name="role" value="ux" class="text-blue-500">
115
+ <span class="text-sm">UX Designer</span>
116
+ </label>
117
+ <label class="flex items-center gap-2 p-3 rounded-lg bg-white/5 border border-white/10 cursor-pointer hover:bg-white/10 transition-colors">
118
+ <input type="radio" name="role" value="marketing" class="text-blue-500">
119
+ <span class="text-sm">Marketing</span>
120
+ </label>
121
+ <label class="flex items-center gap-2 p-3 rounded-lg bg-white/5 border border-white/10 cursor-pointer hover:bg-white/10 transition-colors">
122
+ <input type="radio" name="role" value="content" class="text-blue-500">
123
+ <span class="text-sm">Content Writer</span>
124
+ </label>
125
+ <label class="flex items-center gap-2 p-3 rounded-lg bg-white/5 border border-white/10 cursor-pointer hover:bg-white/10 transition-colors col-span-2">
126
+ <input type="radio" name="role" value="data" class="text-blue-500">
127
+ <span class="text-sm">Data Analyst</span>
128
+ </label>
129
+ </div>
130
+ </div>
131
+
132
+ <div>
133
+ <label class="block text-sm font-medium text-gray-300 mb-2">Password</label>
134
+ <div class="relative">
135
+ <i data-lucide="lock" class="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
136
+ <input type="password" id="password" required minlength="8" class="w-full pl-10 pr-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors" placeholder="At least 8 characters">
137
+ </div>
138
+ <div class="mt-2 flex gap-1">
139
+ <div class="flex-1 h-1 rounded-full bg-white/10" id="strength1"></div>
140
+ <div class="flex-1 h-1 rounded-full bg-white/10" id="strength2"></div>
141
+ <div class="flex-1 h-1 rounded-full bg-white/10" id="strength3"></div>
142
+ <div class="flex-1 h-1 rounded-full bg-white/10" id="strength4"></div>
143
+ </div>
144
+ <p class="text-xs text-gray-500 mt-1" id="strengthText">Password strength</p>
145
+ </div>
146
+
147
+ <div class="flex items-start gap-2">
148
+ <input type="checkbox" id="terms" required class="w-4 h-4 mt-1 rounded border-white/10 bg-white/5 text-blue-500 focus:ring-blue-500">
149
+ <label for="terms" class="text-sm text-gray-400">
150
+ I agree to the <a href="#" class="text-blue-400 hover:text-blue-300">Terms of Service</a> and <a href="#" class="text-blue-400 hover:text-blue-300">Privacy Policy</a>
151
+ </label>
152
+ </div>
153
+
154
+ <button type="submit" class="w-full py-3 rounded-lg bg-blue-500 text-white font-medium hover:bg-blue-600 transition-colors shadow-lg shadow-blue-500/30 flex items-center justify-center gap-2">
155
+ <i data-lucide="user-plus" class="w-4 h-4"></i>
156
+ Create Account
157
+ </button>
158
+ </div>
159
+ </form>
160
+ </div>
161
+
162
+ <!-- Sign In Link -->
163
+ <p class="text-center mt-6 text-gray-400">
164
+ Already have an account?
165
+ <a href="signin.html" class="text-blue-400 hover:text-blue-300 font-medium transition-colors">Sign in</a>
166
+ </p>
167
+
168
+ <!-- Back Home -->
169
+ <div class="text-center mt-4">
170
+ <a href="index.html" class="text-sm text-gray-500 hover:text-gray-400 flex items-center justify-center gap-1 transition-colors">
171
+ <i data-lucide="arrow-left" class="w-4 h-4"></i>
172
+ Back to home
173
+ </a>
174
+ </div>
175
+ </div>
176
+
177
+ <script src="https://unpkg.com/lucide@latest"></script>
178
+ <script>
179
+ lucide.createIcons();
180
+
181
+ // Theme handling
182
+ const savedTheme = localStorage.getItem('theme') || 'dark';
183
+ if (savedTheme === 'light') {
184
+ document.documentElement.classList.add('light');
185
+ }
186
+
187
+ // Update bgMesh accent
188
+ const savedRole = localStorage.getItem('currentRole') || 'developer';
189
+ const roleColors = {
190
+ developer: '#3b82f6',
191
+ ux: '#8b5cf6',
192
+ marketing: '#f59e0b',
193
+ content: '#10b981',
194
+ data: '#ec4899'
195
+ };
196
+ document.getElementById('bgMesh').style.setProperty('--accent', roleColors[savedRole] || '#3b82f6');
197
+
198
+ // Password strength indicator
199
+ document.getElementById('password').addEventListener('input', function(e) {
200
+ const password = e.target.value;
201
+ const indicators = [
202
+ document.getElementById('strength1'),
203
+ document.getElementById('strength2'),
204
+ document.getElementById('strength3'),
205
+ document.getElementById('strength4')
206
+ ];
207
+ const strengthText = document.getElementById('strengthText');
208
+
209
+ let strength = 0;
210
+ if (password.length > 7) strength++;
211
+ if (password.match(/[a-z]/) && password.match(/[A-Z]/)) strength++;
212
+ if (password.match(/[0-9]/)) strength++;
213
+ if (password.match(/[^a-zA-Z0-9]/)) strength++;
214
+
215
+ const colors = ['bg-red-500', 'bg-yellow-500', 'bg-blue-500', 'bg-green-500'];
216
+ const texts = ['Weak', 'Fair', 'Good', 'Strong'];
217
+
218
+ indicators.forEach((ind, i) => {
219
+ if (i < strength) {
220
+ ind.className = `flex-1 h-1 rounded-full ${colors[strength-1]}`;
221
+ } else {
222
+ ind.className = 'flex-1 h-1 rounded-full bg-white/10';
223
+ }
224
+ });
225
+
226
+ strengthText.textContent = strength > 0 ? `Password strength: ${texts[strength-1]}` : 'Password strength';
227
+ strengthText.className = `text-xs mt-1 ${strength > 0 ? 'text-' + ['red','yellow','blue','green'][strength-1] + '-400' : 'text-gray-500'}`;
228
+ });
229
+
230
+ function handleSignUp(e) {
231
+ e.preventDefault();
232
+
233
+ const firstName = document.getElementById('firstName').value;
234
+ const lastName = document.getElementById('lastName').value;
235
+ const email = document.getElementById('email').value;
236
+ const password = document.getElementById('password').value;
237
+ const role = document.querySelector('input[name="role"]:checked').value;
238
+
239
+ // Create user
240
+ const user = {
241
+ name: `${firstName} ${lastName}`,
242
+ email: email,
243
+ initials: (firstName[0] + lastName[0]).toUpperCase(),
244
+ role: role,
245
+ isLoggedIn: true
246
+ };
247
+
248
+ // Save role preference
249
+ localStorage.setItem('currentRole', role);
250
+ localStorage.setItem('promptforge_user', JSON.stringify(user));
251
+
252
+ // Create demo workflow
253
+ const demoWorkflow = {
254
+ role: role,
255
+ chain: [{
256
+ id: Date.now(),
257
+ tool: { id: 'content', name: 'Content Creator', icon: 'file-text', desc: 'Generate original content', color: 'blue' },
258
+ config: { tone: 'professional', length: 'medium', creativity: 0.8 },
259
+ position: 0
260
+ }],
261
+ timestamp: new Date().toISOString()
262
+ };
263
+ localStorage.setItem('promptforge_workflow', JSON.stringify(demoWorkflow));
264
+
265
+ window.location.href = 'index.html';
266
+ }
267
+ </script>
268
+ </body>
269
+ </html>