Hugging Face's logo

Spaces:
Zabihkeraam
/
auth
Running

App Files Community
Zabihkeraam commited on
Commit
5e260ba
·
verified ·
1 Parent(s): 2f26b45

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1185 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Auth
3
- emoji: ⚡
4
- colorFrom: purple
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: auth
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1185 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>MERN Auth System</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .auth-bg {
11
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
12
+ }
13
+ .auth-card {
14
+ backdrop-filter: blur(10px);
15
+ background: rgba(255, 255, 255, 0.1);
16
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
17
+ border: 1px solid rgba(255, 255, 255, 0.18);
18
+ }
19
+ .input-field {
20
+ background: rgba(255, 255, 255, 0.1);
21
+ border: 1px solid rgba(255, 255, 255, 0.2);
22
+ }
23
+ .input-field:focus {
24
+ background: rgba(255, 255, 255, 0.2);
25
+ }
26
+ .sidebar-item:hover {
27
+ background: rgba(255, 255, 255, 0.1);
28
+ }
29
+ .transition-all {
30
+ transition: all 0.3s ease;
31
+ }
32
+ .page {
33
+ display: none;
34
+ }
35
+ .active-page {
36
+ display: block;
37
+ }
38
+ .active-nav {
39
+ color: #4f46e5;
40
+ border-bottom: 2px solid #4f46e5;
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="font-sans bg-gray-100">
45
+ <!-- App Container -->
46
+ <div id="app" class="min-h-screen">
47
+ <!-- Navigation -->
48
+ <nav class="bg-white shadow-sm">
49
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
50
+ <div class="flex justify-between h-16">
51
+ <div class="flex items-center">
52
+ <div class="flex-shrink-0 flex items-center">
53
+ <i class="fas fa-code text-indigo-600 text-2xl mr-2"></i>
54
+ <span class="text-xl font-bold text-gray-900">MERN Auth</span>
55
+ </div>
56
+ </div>
57
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
58
+ <div id="nav-links" class="flex space-x-8">
59
+ <a href="#" onclick="showPage('home')" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-indigo-500 text-sm font-medium active-nav">
60
+ Home
61
+ </a>
62
+ <a href="#" onclick="showPage('features')" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">
63
+ Features
64
+ </a>
65
+ <a href="#" onclick="showPage('about')" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">
66
+ About
67
+ </a>
68
+ </div>
69
+ </div>
70
+ <div id="auth-buttons" class="hidden sm:ml-6 sm:flex sm:items-center">
71
+ <button onclick="showAuthModal('login')" class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
72
+ Login
73
+ </button>
74
+ <button onclick="showAuthModal('register')" class="ml-4 px-4 py-2 border border-transparent text-sm font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
75
+ Register
76
+ </button>
77
+ </div>
78
+ <div id="user-menu" class="hidden ml-3 relative">
79
+ <div>
80
+ <button id="user-menu-button" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
81
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
82
+ </button>
83
+ </div>
84
+ <div id="user-dropdown" class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu">
85
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Your Profile</a>
86
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Settings</a>
87
+ <a href="#" onclick="logout()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Sign out</a>
88
+ </div>
89
+ </div>
90
+ <!-- Mobile menu button -->
91
+ <div class="-mr-2 flex items-center sm:hidden">
92
+ <button id="mobile-menu-button" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
93
+ <span class="sr-only">Open main menu</span>
94
+ <i class="fas fa-bars"></i>
95
+ </button>
96
+ </div>
97
+ </div>
98
+ </div>
99
+
100
+ <!-- Mobile menu, show/hide based on menu state. -->
101
+ <div id="mobile-menu" class="hidden sm:hidden">
102
+ <div class="pt-2 pb-3 space-y-1">
103
+ <a href="#" onclick="showPage('home')" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
104
+ <a href="#" onclick="showPage('features')" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Features</a>
105
+ <a href="#" onclick="showPage('about')" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">About</a>
106
+ </div>
107
+ <div class="pt-4 pb-3 border-t border-gray-200">
108
+ <div id="mobile-auth-buttons" class="mt-3 space-y-1">
109
+ <button onclick="showAuthModal('login')" class="block w-full px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Login</button>
110
+ <button onclick="showAuthModal('register')" class="block w-full px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Register</button>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </nav>
115
+
116
+ <!-- Main Content -->
117
+ <!-- Home Page -->
118
+ <div id="home-page" class="page active-page">
119
+ <!-- Hero Section -->
120
+ <div class="auth-bg">
121
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
122
+ <div class="lg:text-center">
123
+ <h2 class="text-base text-indigo-200 font-semibold tracking-wide uppercase">MERN Stack Authentication</h2>
124
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl">
125
+ Secure your application with ease
126
+ </p>
127
+ <p class="mt-4 max-w-2xl text-xl text-indigo-100 lg:mx-auto">
128
+ A complete authentication system built with MongoDB, Express, React, and Node.js
129
+ </p>
130
+ <div class="mt-8 flex justify-center">
131
+ <div class="inline-flex rounded-md shadow">
132
+ <button onclick="showAuthModal('register')" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50">
133
+ Get started
134
+ </button>
135
+ </div>
136
+ <div class="ml-3 inline-flex">
137
+ <button onclick="showAuthModal('login')" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70">
138
+ Login
139
+ </button>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </div>
145
+
146
+ <!-- Features Preview Section -->
147
+ <div class="py-12 bg-white">
148
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
149
+ <div class="lg:text-center">
150
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2>
151
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
152
+ Everything you need for secure authentication
153
+ </p>
154
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
155
+ Our authentication system provides all the essential features to secure your application.
156
+ </p>
157
+ </div>
158
+
159
+ <div class="mt-10">
160
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10">
161
+ <div class="relative">
162
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
163
+ <i class="fas fa-user-shield"></i>
164
+ </div>
165
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">User Authentication</p>
166
+ <p class="mt-2 ml-16 text-base text-gray-500">
167
+ Secure login and registration with password hashing and JWT tokens.
168
+ </p>
169
+ </div>
170
+
171
+ <div class="relative">
172
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
173
+ <i class="fas fa-shield-alt"></i>
174
+ </div>
175
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Protected Routes</p>
176
+ <p class="mt-2 ml-16 text-base text-gray-500">
177
+ Route protection to ensure only authenticated users can access certain pages.
178
+ </p>
179
+ </div>
180
+
181
+ <div class="relative">
182
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
183
+ <i class="fas fa-user-cog"></i>
184
+ </div>
185
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">User Management</p>
186
+ <p class="mt-2 ml-16 text-base text-gray-500">
187
+ Easy user profile management and role-based access control.
188
+ </p>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Call to Action -->
196
+ <div class="bg-gray-50">
197
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 lg:flex lg:items-center lg:justify-between">
198
+ <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
199
+ <span class="block">Ready to dive in?</span>
200
+ <span class="block text-indigo-600">Start your free trial today.</span>
201
+ </h2>
202
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
203
+ <div class="inline-flex rounded-md shadow">
204
+ <button onclick="showAuthModal('register')" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
205
+ Get started
206
+ </button>
207
+ </div>
208
+ <div class="ml-3 inline-flex rounded-md shadow">
209
+ <a href="#" onclick="showPage('features')" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50">
210
+ Learn more
211
+ </a>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Features Page -->
219
+ <div id="features-page" class="page">
220
+ <div class="bg-white">
221
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
222
+ <div class="text-center">
223
+ <h2 class="text-base font-semibold text-indigo-600 tracking-wide uppercase">Features</h2>
224
+ <p class="mt-1 text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
225
+ Everything you need to secure your app
226
+ </p>
227
+ <p class="max-w-xl mt-5 mx-auto text-xl text-gray-500">
228
+ Our MERN authentication system comes packed with powerful features to protect your users and data.
229
+ </p>
230
+ </div>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Feature Sections -->
235
+ <div class="relative py-16 bg-gray-50 overflow-hidden">
236
+ <div class="hidden lg:block lg:absolute lg:inset-y-0 lg:h-full lg:w-full">
237
+ <div class="relative h-full text-lg max-w-prose mx-auto" aria-hidden="true">
238
+ <svg class="absolute top-12 left-full transform translate-x-32" width="404" height="384" fill="none" viewBox="0 0 404 384">
239
+ <defs>
240
+ <pattern id="74b3fd99-0a6f-4271-bef2-e80eeafdf357" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
241
+ <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
242
+ </pattern>
243
+ </defs>
244
+ <rect width="404" height="384" fill="url(#74b3fd99-0a6f-4271-bef2-e80eeafdf357)" />
245
+ </svg>
246
+ <svg class="absolute top-1/2 right-full transform -translate-y-1/2 -translate-x-32" width="404" height="384" fill="none" viewBox="0 0 404 384">
247
+ <defs>
248
+ <pattern id="f210dbf6-a58d-4871-961e-36d5016a0f49" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
249
+ <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
250
+ </pattern>
251
+ </defs>
252
+ <rect width="404" height="384" fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)" />
253
+ </svg>
254
+ <svg class="absolute bottom-12 left-full transform translate-x-32" width="404" height="384" fill="none" viewBox="0 0 404 384">
255
+ <defs>
256
+ <pattern id="d3eb07ae-5182-43e6-857d-35c643af9034" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
257
+ <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
258
+ </pattern>
259
+ </defs>
260
+ <rect width="404" height="384" fill="url(#d3eb07ae-5182-43e6-857d-35c643af9034)" />
261
+ </svg>
262
+ </div>
263
+ </div>
264
+ <div class="relative px-4 sm:px-6 lg:px-8">
265
+ <div class="text-lg max-w-prose mx-auto">
266
+ <h1>
267
+ <span class="block text-base text-center text-indigo-600 font-semibold tracking-wide uppercase">Core Features</span>
268
+ <span class="mt-2 block text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">Secure Authentication Made Simple</span>
269
+ </h1>
270
+ <p class="mt-8 text-xl text-gray-500 leading-8">
271
+ Our MERN authentication system provides a comprehensive set of features to ensure your application's security while maintaining an excellent user experience.
272
+ </p>
273
+ </div>
274
+ <div class="mt-6 prose prose-indigo prose-lg text-gray-500 mx-auto">
275
+ <div class="mt-10">
276
+ <div class="flex">
277
+ <div class="flex-shrink-0">
278
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
279
+ <i class="fas fa-user-lock"></i>
280
+ </div>
281
+ </div>
282
+ <div class="ml-4">
283
+ <h4 class="text-lg leading-6 font-medium text-gray-900">Secure Authentication</h4>
284
+ <p class="mt-2 text-base text-gray-500">
285
+ Industry-standard JWT (JSON Web Tokens) authentication with secure HTTP-only cookies. Password hashing with bcrypt ensures user credentials are never stored in plain text.
286
+ </p>
287
+ </div>
288
+ </div>
289
+ <div class="flex mt-8">
290
+ <div class="flex-shrink-0">
291
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
292
+ <i class="fas fa-shield-alt"></i>
293
+ </div>
294
+ </div>
295
+ <div class="ml-4">
296
+ <h4 class="text-lg leading-6 font-medium text-gray-900">Role-Based Access Control</h4>
297
+ <p class="mt-2 text-base text-gray-500">
298
+ Define user roles and permissions to control access to different parts of your application. Easily implement admin, moderator, and user roles with different privilege levels.
299
+ </p>
300
+ </div>
301
+ </div>
302
+ <div class="flex mt-8">
303
+ <div class="flex-shrink-0">
304
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
305
+ <i class="fas fa-sync-alt"></i>
306
+ </div>
307
+ </div>
308
+ <div class="ml-4">
309
+ <h4 class="text-lg leading-6 font-medium text-gray-900">Token Refresh & Rotation</h4>
310
+ <p class="mt-2 text-base text-gray-500">
311
+ Automatic token refresh before expiration and token rotation for enhanced security. Short-lived access tokens and long-lived refresh tokens provide both security and convenience.
312
+ </p>
313
+ </div>
314
+ </div>
315
+ <div class="flex mt-8">
316
+ <div class="flex-shrink-0">
317
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
318
+ <i class="fas fa-envelope"></i>
319
+ </div>
320
+ </div>
321
+ <div class="ml-4">
322
+ <h4 class="text-lg leading-6 font-medium text-gray-900">Email Verification</h4>
323
+ <p class="mt-2 text-base text-gray-500">
324
+ Send verification emails to confirm user email addresses. Customizable email templates and SMTP integration make it easy to implement.
325
+ </p>
326
+ </div>
327
+ </div>
328
+ <div class="flex mt-8">
329
+ <div class="flex-shrink-0">
330
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
331
+ <i class="fas fa-key"></i>
332
+ </div>
333
+ </div>
334
+ <div class="ml-4">
335
+ <h4 class="text-lg leading-6 font-medium text-gray-900">Password Reset</h4>
336
+ <p class="mt-2 text-base text-gray-500">
337
+ Secure password reset flow with time-limited tokens sent via email. Includes password strength validation and confirmation requirements.
338
+ </p>
339
+ </div>
340
+ </div>
341
+ <div class="flex mt-8">
342
+ <div class="flex-shrink-0">
343
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
344
+ <i class="fas fa-google"></i>
345
+ </div>
346
+ </div>
347
+ <div class="ml-4">
348
+ <h4 class="text-lg leading-6 font-medium text-gray-900">Social Login</h4>
349
+ <p class="mt-2 text-base text-gray-500">
350
+ OAuth integration with popular providers like Google, Facebook, and GitHub. Users can sign in with their existing social accounts for convenience.
351
+ </p>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <!-- Feature Comparison -->
360
+ <div class="bg-white">
361
+ <div class="max-w-7xl mx-auto py-24 px-4 sm:px-6 lg:px-8">
362
+ <div class="sm:flex sm:flex-col sm:align-center">
363
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-center">Feature Comparison</h2>
364
+ <p class="mt-5 text-xl text-gray-500 sm:text-center">See how our authentication system compares to building your own solution.</p>
365
+ <div class="relative mt-12 bg-white sm:max-w-lg sm:mx-auto lg:max-w-5xl">
366
+ <div class="bg-white shadow-lg rounded-lg overflow-hidden lg:grid lg:grid-cols-2">
367
+ <div class="px-6 py-8 sm:p-10 sm:pb-6">
368
+ <div class="flex items-center">
369
+ <h3 class="inline-flex px-4 py-1 rounded-full text-sm font-semibold tracking-wide uppercase bg-indigo-100 text-indigo-600">
370
+ Our Solution
371
+ </h3>
372
+ </div>
373
+ <div class="mt-4 flex items-baseline text-6xl font-extrabold">
374
+ <span class="mr-1 text-2xl font-medium text-gray-500">$</span>
375
+ <span>0</span>
376
+ <span class="ml-1 text-2xl font-medium text-gray-500">/mo</span>
377
+ </div>
378
+ <p class="mt-5 text-lg text-gray-500">All the authentication features you need, ready to integrate.</p>
379
+ </div>
380
+ <div class="px-6 pt-6 pb-8 bg-gray-50 sm:p-10 sm:pt-6">
381
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Building Your Own</h3>
382
+ <div class="mt-6">
383
+ <div class="flex">
384
+ <div class="flex-shrink-0">
385
+ <i class="fas fa-check-circle text-indigo-500"></i>
386
+ </div>
387
+ <div class="ml-3">
388
+ <p class="text-gray-500">Development time: <span class="font-medium text-gray-900">2-4 weeks</span></p>
389
+ </div>
390
+ </div>
391
+ <div class="mt-4 flex">
392
+ <div class="flex-shrink-0">
393
+ <i class="fas fa-check-circle text-indigo-500"></i>
394
+ </div>
395
+ <div class="ml-3">
396
+ <p class="text-gray-500">Ongoing maintenance</p>
397
+ </div>
398
+ </div>
399
+ <div class="mt-4 flex">
400
+ <div class="flex-shrink-0">
401
+ <i class="fas fa-check-circle text-indigo-500"></i>
402
+ </div>
403
+ <div class="ml-3">
404
+ <p class="text-gray-500">Security risks if implemented incorrectly</p>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ </div>
414
+
415
+ <!-- Call to Action -->
416
+ <div class="bg-indigo-700">
417
+ <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
418
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
419
+ <span class="block">Ready to implement secure authentication?</span>
420
+ <span class="block">Start using our MERN auth system today.</span>
421
+ </h2>
422
+ <button onclick="showAuthModal('register')" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto">
423
+ Get started for free
424
+ </button>
425
+ </div>
426
+ </div>
427
+ </div>
428
+
429
+ <!-- About Page -->
430
+ <div id="about-page" class="page">
431
+ <div class="bg-white">
432
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
433
+ <div class="text-center">
434
+ <h2 class="text-base font-semibold text-indigo-600 tracking-wide uppercase">About</h2>
435
+ <p class="mt-1 text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
436
+ Our mission is simple
437
+ </p>
438
+ <p class="max-w-xl mt-5 mx-auto text-xl text-gray-500">
439
+ Make authentication secure, simple, and accessible for all MERN stack developers.
440
+ </p>
441
+ </div>
442
+ </div>
443
+ </div>
444
+
445
+ <!-- About Content -->
446
+ <div class="relative py-16 bg-white overflow-hidden">
447
+ <div class="hidden lg:block lg:absolute lg:inset-y-0 lg:h-full lg:w-full">
448
+ <div class="relative h-full text-lg max-w-prose mx-auto" aria-hidden="true">
449
+ <svg class="absolute top-12 left-full transform translate-x-32" width="404" height="384" fill="none" viewBox="0 0 404 384">
450
+ <defs>
451
+ <pattern id="74b3fd99-0a6f-4271-bef2-e80eeafdf357" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
452
+ <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
453
+ </pattern>
454
+ </defs>
455
+ <rect width="404" height="384" fill="url(#74b3fd99-0a6f-4271-bef2-e80eeafdf357)" />
456
+ </svg>
457
+ <svg class="absolute top-1/2 right-full transform -translate-y-1/2 -translate-x-32" width="404" height="384" fill="none" viewBox="0 0 404 384">
458
+ <defs>
459
+ <pattern id="f210dbf6-a58d-4871-961e-36d5016a0f49" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
460
+ <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
461
+ </pattern>
462
+ </defs>
463
+ <rect width="404" height="384" fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)" />
464
+ </svg>
465
+ <svg class="absolute bottom-12 left-full transform translate-x-32" width="404" height="384" fill="none" viewBox="0 0 404 384">
466
+ <defs>
467
+ <pattern id="d3eb07ae-5182-43e6-857d-35c643af9034" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
468
+ <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
469
+ </pattern>
470
+ </defs>
471
+ <rect width="404" height="384" fill="url(#d3eb07ae-5182-43e6-857d-35c643af9034)" />
472
+ </svg>
473
+ </div>
474
+ </div>
475
+ <div class="relative px-4 sm:px-6 lg:px-8">
476
+ <div class="text-lg max-w-prose mx-auto">
477
+ <h1>
478
+ <span class="mt-2 block text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">Our Story</span>
479
+ </h1>
480
+ <p class="mt-8 text-xl text-gray-500 leading-8">
481
+ Founded in 2023, our team of passionate developers recognized a common challenge in the MERN stack ecosystem - implementing secure, production-ready authentication was unnecessarily complex and time-consuming.
482
+ </p>
483
+ </div>
484
+ <div class="mt-6 prose prose-indigo prose-lg text-gray-500 mx-auto">
485
+ <p>
486
+ After building dozens of authentication systems for various clients and projects, we decided to create a solution that would save developers countless hours while ensuring their applications remained secure by default.
487
+ </p>
488
+ <p>
489
+ Our MERN authentication system is the culmination of years of experience, best practices, and lessons learned from real-world implementations. We've taken care of all the complex security considerations so you can focus on building your application's core features.
490
+ </p>
491
+
492
+ <h2 class="mt-12">Our Team</h2>
493
+ <div class="mt-8 grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
494
+ <div class="text-center">
495
+ <img class="mx-auto h-40 w-40 rounded-full xl:w-56 xl:h-56" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80" alt="">
496
+ <h3 class="mt-6 text-lg font-medium text-gray-900">Alex Johnson</h3>
497
+ <p class="mt-1 text-indigo-600">Founder & Lead Developer</p>
498
+ <p class="mt-3 text-base text-gray-500">
499
+ Full-stack developer with 10+ years of experience building secure web applications.
500
+ </p>
501
+ </div>
502
+ <div class="text-center">
503
+ <img class="mx-auto h-40 w-40 rounded-full xl:w-56 xl:h-56" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80" alt="">
504
+ <h3 class="mt-6 text-lg font-medium text-gray-900">Sarah Chen</h3>
505
+ <p class="mt-1 text-indigo-600">Security Engineer</p>
506
+ <p class="mt-3 text-base text-gray-500">
507
+ Security specialist focused on authentication protocols and best practices.
508
+ </p>
509
+ </div>
510
+ <div class="text-center">
511
+ <img class="mx-auto h-40 w-40 rounded-full xl:w-56 xl:h-56" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80" alt="">
512
+ <h3 class="mt-6 text-lg font-medium text-gray-900">Michael Rodriguez</h3>
513
+ <p class="mt-1 text-indigo-600">UI/UX Designer</p>
514
+ <p class="mt-3 text-base text-gray-500">
515
+ Designs intuitive user experiences for authentication flows.
516
+ </p>
517
+ </div>
518
+ </div>
519
+
520
+ <h2 class="mt-12">Our Values</h2>
521
+ <ul role="list" class="mt-8 space-y-8 text-gray-500">
522
+ <li class="flex">
523
+ <div class="flex-shrink-0">
524
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
525
+ <i class="fas fa-lock"></i>
526
+ </div>
527
+ </div>
528
+ <div class="ml-4">
529
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Security First</h3>
530
+ <p class="mt-2">
531
+ We prioritize security in everything we build, ensuring your users' data is always protected.
532
+ </p>
533
+ </div>
534
+ </li>
535
+ <li class="flex">
536
+ <div class="flex-shrink-0">
537
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
538
+ <i class="fas fa-heart"></i>
539
+ </div>
540
+ </div>
541
+ <div class="ml-4">
542
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Developer Experience</h3>
543
+ <p class="mt-2">
544
+ We obsess over making our system easy to implement and customize for your specific needs.
545
+ </p>
546
+ </div>
547
+ </li>
548
+ <li class="flex">
549
+ <div class="flex-shrink-0">
550
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
551
+ <i class="fas fa-code"></i>
552
+ </div>
553
+ </div>
554
+ <div class="ml-4">
555
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Open Source</h3>
556
+ <p class="mt-2">
557
+ We believe in transparency and community contributions to make our system even better.
558
+ </p>
559
+ </div>
560
+ </li>
561
+ </ul>
562
+
563
+ <h2 class="mt-12">Join Our Community</h2>
564
+ <p>
565
+ We're building more than just software - we're building a community of developers passionate about security and the MERN stack.
566
+ </p>
567
+ <div class="mt-8 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
568
+ <div class="pt-6">
569
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
570
+ <div class="-mt-6">
571
+ <div>
572
+ <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
573
+ <i class="h-6 w-6 text-white fas fa-users"></i>
574
+ </span>
575
+ </div>
576
+ <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Developer Forum</h3>
577
+ <p class="mt-5 text-base text-gray-500">
578
+ Join discussions with other developers implementing our authentication system.
579
+ </p>
580
+ </div>
581
+ </div>
582
+ </div>
583
+ <div class="pt-6">
584
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
585
+ <div class="-mt-6">
586
+ <div>
587
+ <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
588
+ <i class="h-6 w-6 text-white fas fa-book"></i>
589
+ </span>
590
+ </div>
591
+ <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Documentation</h3>
592
+ <p class="mt-5 text-base text-gray-500">
593
+ Comprehensive guides and API references to help you implement quickly.
594
+ </p>
595
+ </div>
596
+ </div>
597
+ </div>
598
+ <div class="pt-6">
599
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
600
+ <div class="-mt-6">
601
+ <div>
602
+ <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
603
+ <i class="h-6 w-6 text-white fas fa-github"></i>
604
+ </span>
605
+ </div>
606
+ <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">GitHub</h3>
607
+ <p class="mt-5 text-base text-gray-500">
608
+ Contribute to our open-source project and help shape its future.
609
+ </p>
610
+ </div>
611
+ </div>
612
+ </div>
613
+ </div>
614
+ </div>
615
+ </div>
616
+ </div>
617
+
618
+ <!-- Call to Action -->
619
+ <div class="bg-indigo-700">
620
+ <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
621
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
622
+ <span class="block">Ready to dive in?</span>
623
+ <span class="block">Start using our MERN auth system today.</span>
624
+ </h2>
625
+ <button onclick="showAuthModal('register')" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto">
626
+ Get started for free
627
+ </button>
628
+ </div>
629
+ </div>
630
+ </div>
631
+
632
+ <!-- Dashboard Content (Hidden by default) -->
633
+ <div id="dashboard-content" class="hidden min-h-screen bg-gray-100">
634
+ <div class="flex">
635
+ <!-- Sidebar -->
636
+ <div class="hidden md:flex md:flex-shrink-0">
637
+ <div class="flex flex-col w-64 bg-indigo-800">
638
+ <div class="h-0 flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
639
+ <div class="flex items-center flex-shrink-0 px-4">
640
+ <i class="fas fa-code text-white text-2xl mr-2"></i>
641
+ <span class="text-xl font-bold text-white">MERN Dashboard</span>
642
+ </div>
643
+ <nav class="mt-5 flex-1 px-2 space-y-1">
644
+ <a href="#" class="bg-indigo-900 text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md">
645
+ <i class="fas fa-home mr-3"></i>
646
+ Dashboard
647
+ </a>
648
+ <a href="#" class="text-indigo-100 hover:bg-indigo-600 hover:bg-opacity-75 group flex items-center px-2 py-2 text-sm font-medium rounded-md">
649
+ <i class="fas fa-chart-line mr-3"></i>
650
+ Analytics
651
+ </a>
652
+ <a href="#" class="text-indigo-100 hover:bg-indigo-600 hover:bg-opacity-75 group flex items-center px-2 py-2 text-sm font-medium rounded-md">
653
+ <i class="fas fa-envelope mr-3"></i>
654
+ Messages
655
+ </a>
656
+ <a href="#" class="text-indigo-100 hover:bg-indigo-600 hover:bg-opacity-75 group flex items-center px-2 py-2 text-sm font-medium rounded-md">
657
+ <i class="fas fa-cog mr-3"></i>
658
+ Settings
659
+ </a>
660
+ </nav>
661
+ </div>
662
+ <div class="flex-shrink-0 flex bg-indigo-700 p-4">
663
+ <div class="flex items-center">
664
+ <div>
665
+ <img class="inline-block h-9 w-9 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
666
+ </div>
667
+ <div class="ml-3">
668
+ <p class="text-sm font-medium text-white" id="sidebar-username">John Doe</p>
669
+ <a href="#" onclick="logout()" class="text-xs font-medium text-indigo-200 group-hover:text-white">Sign out</a>
670
+ </div>
671
+ </div>
672
+ </div>
673
+ </div>
674
+ </div>
675
+
676
+ <!-- Main Content -->
677
+ <div class="flex-1">
678
+ <div class="border-b border-gray-200 px-4 py-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8">
679
+ <div class="flex-1 min-w-0">
680
+ <h1 class="text-lg font-medium leading-6 text-gray-900 sm:truncate">Welcome back, <span id="dashboard-username">John Doe</span></h1>
681
+ </div>
682
+ <div class="mt-4 flex sm:mt-0 sm:ml-4">
683
+ <button type="button" class="order-0 inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:order-1 sm:ml-3">
684
+ <i class="fas fa-plus mr-2"></i> New Project
685
+ </button>
686
+ </div>
687
+ </div>
688
+
689
+ <div class="px-4 mt-6 sm:px-6 lg:px-8">
690
+ <div class="bg-white shadow overflow-hidden sm:rounded-lg">
691
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
692
+ <h3 class="text-lg leading-6 font-medium text-gray-900">
693
+ User Information
694
+ </h3>
695
+ <p class="mt-1 max-w-2xl text-sm text-gray-500">
696
+ Personal details and account information.
697
+ </p>
698
+ </div>
699
+ <div class="px-4 py-5 sm:p-0">
700
+ <dl class="sm:divide-y sm:divide-gray-200">
701
+ <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
702
+ <dt class="text-sm font-medium text-gray-500">
703
+ Full name
704
+ </dt>
705
+ <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2" id="user-fullname">
706
+ John Doe
707
+ </dd>
708
+ </div>
709
+ <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
710
+ <dt class="text-sm font-medium text-gray-500">
711
+ Email address
712
+ </dt>
713
+ <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2" id="user-email">
714
+ john@example.com
715
+ </dd>
716
+ </div>
717
+ <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
718
+ <dt class="text-sm font-medium text-gray-500">
719
+ Account status
720
+ </dt>
721
+ <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
722
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
723
+ Active
724
+ </span>
725
+ </dd>
726
+ </div>
727
+ <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
728
+ <dt class="text-sm font-medium text-gray-500">
729
+ Member since
730
+ </dt>
731
+ <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2" id="user-created">
732
+ January 10, 2023
733
+ </dd>
734
+ </div>
735
+ </dl>
736
+ </div>
737
+ </div>
738
+ </div>
739
+ </div>
740
+ </div>
741
+ </div>
742
+
743
+ <!-- Auth Modal -->
744
+ <div id="auth-modal" class="hidden fixed z-10 inset-0 overflow-y-auto">
745
+ <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
746
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
747
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
748
+ </div>
749
+
750
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
751
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
752
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
753
+ <div class="sm:flex sm:items-start">
754
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
755
+ <div class="flex justify-between items-center">
756
+ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
757
+ Login to your account
758
+ </h3>
759
+ <button onclick="hideAuthModal()" type="button" class="text-gray-400 hover:text-gray-500">
760
+ <i class="fas fa-times"></i>
761
+ </button>
762
+ </div>
763
+ <div class="mt-4">
764
+ <!-- Login Form -->
765
+ <div id="login-form">
766
+ <div class="space-y-4">
767
+ <div>
768
+ <label for="login-email" class="block text-sm font-medium text-gray-700">Email address</label>
769
+ <div class="mt-1">
770
+ <input id="login-email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
771
+ </div>
772
+ </div>
773
+
774
+ <div>
775
+ <label for="login-password" class="block text-sm font-medium text-gray-700">Password</label>
776
+ <div class="mt-1">
777
+ <input id="login-password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
778
+ </div>
779
+ </div>
780
+
781
+ <div class="flex items-center justify-between">
782
+ <div class="flex items-center">
783
+ <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
784
+ <label for="remember-me" class="ml-2 block text-sm text-gray-900">
785
+ Remember me
786
+ </label>
787
+ </div>
788
+
789
+ <div class="text-sm">
790
+ <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">
791
+ Forgot your password?
792
+ </a>
793
+ </div>
794
+ </div>
795
+ </div>
796
+ </div>
797
+
798
+ <!-- Register Form -->
799
+ <div id="register-form" class="hidden">
800
+ <div class="space-y-4">
801
+ <div class="grid grid-cols-1 gap-y-4 gap-x-4 sm:grid-cols-2">
802
+ <div>
803
+ <label for="first-name" class="block text-sm font-medium text-gray-700">First name</label>
804
+ <div class="mt-1">
805
+ <input type="text" name="first-name" id="first-name" autocomplete="given-name" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
806
+ </div>
807
+ </div>
808
+
809
+ <div>
810
+ <label for="last-name" class="block text-sm font-medium text-gray-700">Last name</label>
811
+ <div class="mt-1">
812
+ <input type="text" name="last-name" id="last-name" autocomplete="family-name" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
813
+ </div>
814
+ </div>
815
+ </div>
816
+
817
+ <div>
818
+ <label for="register-email" class="block text-sm font-medium text-gray-700">Email address</label>
819
+ <div class="mt-1">
820
+ <input id="register-email" name="email" type="email" autocomplete="email" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
821
+ </div>
822
+ </div>
823
+
824
+ <div>
825
+ <label for="register-password" class="block text-sm font-medium text-gray-700">Password</label>
826
+ <div class="mt-1">
827
+ <input id="register-password" name="password" type="password" autocomplete="new-password" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
828
+ </div>
829
+ </div>
830
+
831
+ <div>
832
+ <label for="confirm-password" class="block text-sm font-medium text-gray-700">Confirm Password</label>
833
+ <div class="mt-1">
834
+ <input id="confirm-password" name="confirm-password" type="password" autocomplete="new-password" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
835
+ </div>
836
+ </div>
837
+ </div>
838
+ </div>
839
+ </div>
840
+ </div>
841
+ </div>
842
+ </div>
843
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
844
+ <button id="auth-submit" type="button" onclick="handleAuthSubmit()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
845
+ Login
846
+ </button>
847
+ <button type="button" onclick="hideAuthModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
848
+ Cancel
849
+ </button>
850
+ </div>
851
+ <div class="bg-gray-50 px-4 py-3 border-t border-gray-200">
852
+ <p class="text-sm text-center text-gray-500">
853
+ <span id="auth-switch-text">Don't have an account?</span>
854
+ <button id="auth-switch-btn" onclick="toggleAuthForm()" class="font-medium text-indigo-600 hover:text-indigo-500 ml-1">
855
+ Register
856
+ </button>
857
+ </p>
858
+ </div>
859
+ </div>
860
+ </div>
861
+ </div>
862
+
863
+ <!-- Success Notification -->
864
+ <div id="success-notification" class="hidden fixed bottom-4 right-4">
865
+ <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
866
+ <span class="block sm:inline" id="success-message">Success message here</span>
867
+ <span class="absolute top-0 bottom-0 right-0 px-4 py-3" onclick="hideNotification('success-notification')">
868
+ <i class="fas fa-times"></i>
869
+ </span>
870
+ </div>
871
+ </div>
872
+
873
+ <!-- Error Notification -->
874
+ <div id="error-notification" class="hidden fixed bottom-4 right-4">
875
+ <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
876
+ <span class="block sm:inline" id="error-message">Error message here</span>
877
+ <span class="absolute top-0 bottom-0 right-0 px-4 py-3" onclick="hideNotification('error-notification')">
878
+ <i class="fas fa-times"></i>
879
+ </span>
880
+ </div>
881
+ </div>
882
+ </div>
883
+
884
+ <script>
885
+ // State management
886
+ let currentUser = null;
887
+ let isLoginForm = true;
888
+ let currentPage = 'home';
889
+
890
+ // DOM elements
891
+ const authModal = document.getElementById('auth-modal');
892
+ const loginForm = document.getElementById('login-form');
893
+ const registerForm = document.getElementById('register-form');
894
+ const authSubmit = document.getElementById('auth-submit');
895
+ const authSwitchBtn = document.getElementById('auth-switch-btn');
896
+ const authSwitchText = document.getElementById('auth-switch-text');
897
+ const modalTitle = document.getElementById('modal-title');
898
+ const homePage = document.getElementById('home-page');
899
+ const featuresPage = document.getElementById('features-page');
900
+ const aboutPage = document.getElementById('about-page');
901
+ const dashboardContent = document.getElementById('dashboard-content');
902
+ const authButtons = document.getElementById('auth-buttons');
903
+ const userMenu = document.getElementById('user-menu');
904
+ const mobileAuthButtons = document.getElementById('mobile-auth-buttons');
905
+ const mobileMenu = document.getElementById('mobile-menu');
906
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
907
+ const userDropdown = document.getElementById('user-dropdown');
908
+ const userMenuButton = document.getElementById('user-menu-button');
909
+ const navLinks = document.querySelectorAll('#nav-links a');
910
+
911
+ // Initialize the app
912
+ document.addEventListener('DOMContentLoaded', function() {
913
+ // Check if user is already logged in (from localStorage)
914
+ const user = localStorage.getItem('currentUser');
915
+ if (user) {
916
+ currentUser = JSON.parse(user);
917
+ updateUIForLoggedInUser();
918
+ } else {
919
+ showPage('home');
920
+ }
921
+
922
+ // Mobile menu toggle
923
+ mobileMenuButton.addEventListener('click', function() {
924
+ const isHidden = mobileMenu.classList.contains('hidden');
925
+ if (isHidden) {
926
+ mobileMenu.classList.remove('hidden');
927
+ } else {
928
+ mobileMenu.classList.add('hidden');
929
+ }
930
+ });
931
+
932
+ // User dropdown toggle
933
+ userMenuButton.addEventListener('click', function() {
934
+ const isHidden = userDropdown.classList.contains('hidden');
935
+ if (isHidden) {
936
+ userDropdown.classList.remove('hidden');
937
+ } else {
938
+ userDropdown.classList.add('hidden');
939
+ }
940
+ });
941
+ });
942
+
943
+ // Show a specific page
944
+ function showPage(page) {
945
+ // Hide all pages
946
+ document.querySelectorAll('.page').forEach(el => {
947
+ el.classList.remove('active-page');
948
+ });
949
+
950
+ // Show the selected page
951
+ document.getElementById(`${page}-page`).classList.add('active-page');
952
+
953
+ // Update navigation styling
954
+ navLinks.forEach(link => {
955
+ link.classList.remove('active-nav');
956
+ link.classList.remove('border-indigo-500');
957
+ link.classList.remove('text-gray-900');
958
+ link.classList.add('text-gray-500');
959
+ link.classList.add('border-transparent');
960
+ });
961
+
962
+ // Highlight the active nav link
963
+ if (page === 'home') {
964
+ navLinks[0].classList.add('active-nav');
965
+ navLinks[0].classList.add('border-indigo-500');
966
+ navLinks[0].classList.add('text-gray-900');
967
+ navLinks[0].classList.remove('text-gray-500');
968
+ navLinks[0].classList.remove('border-transparent');
969
+ } else if (page === 'features') {
970
+ navLinks[1].classList.add('active-nav');
971
+ navLinks[1].classList.add('border-indigo-500');
972
+ navLinks[1].classList.add('text-gray-900');
973
+ navLinks[1].classList.remove('text-gray-500');
974
+ navLinks[1].classList.remove('border-transparent');
975
+ } else if (page === 'about') {
976
+ navLinks[2].classList.add('active-nav');
977
+ navLinks[2].classList.add('border-indigo-500');
978
+ navLinks[2].classList.add('text-gray-900');
979
+ navLinks[2].classList.remove('text-gray-500');
980
+ navLinks[2].classList.remove('border-transparent');
981
+ }
982
+
983
+ currentPage = page;
984
+ mobileMenu.classList.add('hidden');
985
+ }
986
+
987
+ // Show auth modal
988
+ function showAuthModal(formType) {
989
+ if (formType === 'login') {
990
+ isLoginForm = true;
991
+ loginForm.classList.remove('hidden');
992
+ registerForm.classList.add('hidden');
993
+ authSubmit.textContent = 'Login';
994
+ modalTitle.textContent = 'Login to your account';
995
+ authSwitchText.textContent = "Don't have an account?";
996
+ authSwitchBtn.textContent = 'Register';
997
+ } else {
998
+ isLoginForm = false;
999
+ loginForm.classList.add('hidden');
1000
+ registerForm.classList.remove('hidden');
1001
+ authSubmit.textContent = 'Register';
1002
+ modalTitle.textContent = 'Create a new account';
1003
+ authSwitchText.textContent = "Already have an account?";
1004
+ authSwitchBtn.textContent = 'Login';
1005
+ }
1006
+ authModal.classList.remove('hidden');
1007
+ mobileMenu.classList.add('hidden');
1008
+ }
1009
+
1010
+ // Hide auth modal
1011
+ function hideAuthModal() {
1012
+ authModal.classList.add('hidden');
1013
+ }
1014
+
1015
+ // Toggle between login and register forms
1016
+ function toggleAuthForm() {
1017
+ isLoginForm = !isLoginForm;
1018
+ if (isLoginForm) {
1019
+ loginForm.classList.remove('hidden');
1020
+ registerForm.classList.add('hidden');
1021
+ authSubmit.textContent = 'Login';
1022
+ modalTitle.textContent = 'Login to your account';
1023
+ authSwitchText.textContent = "Don't have an account?";
1024
+ authSwitchBtn.textContent = 'Register';
1025
+ } else {
1026
+ loginForm.classList.add('hidden');
1027
+ registerForm.classList.remove('hidden');
1028
+ authSubmit.textContent = 'Register';
1029
+ modalTitle.textContent = 'Create a new account';
1030
+ authSwitchText.textContent = "Already have an account?";
1031
+ authSwitchBtn.textContent = 'Login';
1032
+ }
1033
+ }
1034
+
1035
+ // Handle form submission
1036
+ function handleAuthSubmit() {
1037
+ if (isLoginForm) {
1038
+ handleLogin();
1039
+ } else {
1040
+ handleRegister();
1041
+ }
1042
+ }
1043
+
1044
+ // Handle login
1045
+ function handleLogin() {
1046
+ const email = document.getElementById('login-email').value;
1047
+ const password = document.getElementById('login-password').value;
1048
+
1049
+ // Simple validation
1050
+ if (!email || !password) {
1051
+ showNotification('error-notification', 'Please fill in all fields');
1052
+ return;
1053
+ }
1054
+
1055
+ // In a real app, this would be an API call to your backend
1056
+ // Simulating API call with setTimeout
1057
+ showNotification('success-notification', 'Logging in...');
1058
+
1059
+ setTimeout(() => {
1060
+ // Mock user data
1061
+ currentUser = {
1062
+ firstName: 'John',
1063
+ lastName: 'Doe',
1064
+ email: email,
1065
+ createdAt: new Date().toLocaleDateString()
1066
+ };
1067
+
1068
+ // Save to localStorage
1069
+ localStorage.setItem('currentUser', JSON.stringify(currentUser));
1070
+
1071
+ // Update UI
1072
+ updateUIForLoggedInUser();
1073
+ hideAuthModal();
1074
+ showNotification('success-notification', 'Login successful!');
1075
+ }, 1000);
1076
+ }
1077
+
1078
+ // Handle registration
1079
+ function handleRegister() {
1080
+ const firstName = document.getElementById('first-name').value;
1081
+ const lastName = document.getElementById('last-name').value;
1082
+ const email = document.getElementById('register-email').value;
1083
+ const password = document.getElementById('register-password').value;
1084
+ const confirmPassword = document.getElementById('confirm-password').value;
1085
+
1086
+ // Simple validation
1087
+ if (!firstName || !lastName || !email || !password || !confirmPassword) {
1088
+ showNotification('error-notification', 'Please fill in all fields');
1089
+ return;
1090
+ }
1091
+
1092
+ if (password !== confirmPassword) {
1093
+ showNotification('error-notification', 'Passwords do not match');
1094
+ return;
1095
+ }
1096
+
1097
+ // In a real app, this would be an API call to your backend
1098
+ // Simulating API call with setTimeout
1099
+ showNotification('success-notification', 'Creating account...');
1100
+
1101
+ setTimeout(() => {
1102
+ // Mock user data
1103
+ currentUser = {
1104
+ firstName: firstName,
1105
+ lastName: lastName,
1106
+ email: email,
1107
+ createdAt: new Date().toLocaleDateString()
1108
+ };
1109
+
1110
+ // Save to localStorage
1111
+ localStorage.setItem('currentUser', JSON.stringify(currentUser));
1112
+
1113
+ // Update UI
1114
+ updateUIForLoggedInUser();
1115
+ hideAuthModal();
1116
+ showNotification('success-notification', 'Registration successful!');
1117
+ }, 1000);
1118
+ }
1119
+
1120
+ // Logout
1121
+ function logout() {
1122
+ currentUser = null;
1123
+ localStorage.removeItem('currentUser');
1124
+ updateUIForLoggedOutUser();
1125
+ showPage('home');
1126
+ showNotification('success-notification', 'Logged out successfully');
1127
+ }
1128
+
1129
+ // Update UI when user is logged in
1130
+ function updateUIForLoggedInUser() {
1131
+ homePage.classList.add('hidden');
1132
+ featuresPage.classList.add('hidden');
1133
+ aboutPage.classList.add('hidden');
1134
+ dashboardContent.classList.remove('hidden');
1135
+ authButtons.classList.add('hidden');
1136
+ mobileAuthButtons.classList.add('hidden');
1137
+ userMenu.classList.remove('hidden');
1138
+
1139
+ // Update user info in dashboard
1140
+ document.getElementById('sidebar-username').textContent = `${currentUser.firstName} ${currentUser.lastName}`;
1141
+ document.getElementById('dashboard-username').textContent = `${currentUser.firstName} ${currentUser.lastName}`;
1142
+ document.getElementById('user-fullname').textContent = `${currentUser.firstName} ${currentUser.lastName}`;
1143
+ document.getElementById('user-email').textContent = currentUser.email;
1144
+ document.getElementById('user-created').textContent = currentUser.createdAt;
1145
+ }
1146
+
1147
+ // Update UI when user is logged out
1148
+ function updateUIForLoggedOutUser() {
1149
+ dashboardContent.classList.add('hidden');
1150
+ authButtons.classList.remove('hidden');
1151
+ mobileAuthButtons.classList.remove('hidden');
1152
+ userMenu.classList.add('hidden');
1153
+ showPage(currentPage || 'home');
1154
+
1155
+ // Clear form fields
1156
+ document.getElementById('login-email').value = '';
1157
+ document.getElementById('login-password').value = '';
1158
+ document.getElementById('first-name').value = '';
1159
+ document.getElementById('last-name').value = '';
1160
+ document.getElementById('register-email').value = '';
1161
+ document.getElementById('register-password').value = '';
1162
+ document.getElementById('confirm-password').value = '';
1163
+ }
1164
+
1165
+ // Show notification
1166
+ function showNotification(id, message) {
1167
+ const notification = document.getElementById(id);
1168
+ const messageElement = document.getElementById(id === 'success-notification' ? 'success-message' : 'error-message');
1169
+
1170
+ messageElement.textContent = message;
1171
+ notification.classList.remove('hidden');
1172
+
1173
+ // Auto-hide after 5 seconds
1174
+ setTimeout(() => {
1175
+ notification.classList.add('hidden');
1176
+ }, 5000);
1177
+ }
1178
+
1179
+ // Hide notification
1180
+ function hideNotification(id) {
1181
+ document.getElementById(id).classList.add('hidden');
1182
+ }
1183
+ </script>
1184
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Zabihkeraam/auth" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1185
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ Create a complete auth system use MERN stack tech
2
+ generate Feature and About pages as well