Hugging Face's logo

Spaces:
MikeyD333
/
undefined
Running

App Files Community
MikeyD333 commited on
Commit
457f5c6
·
verified ·
1 Parent(s): 2846fbd

remove all motion from current screen make it step 2 in multi step process step 1 bering user enter s their emaul

Browse files
Files changed (3) hide show
  1. README.md +9 -5
  2. index.html +336 -18
  3. step1.html +192 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 😻
4
- colorFrom: blue
5
- colorTo: blue
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: undefined
3
+ colorFrom: yellow
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,337 @@
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>VerifyNow Pro - Email Verification Service</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
13
+ body { font-family: 'Inter', sans-serif; }
14
+
15
+ .gradient-bg {
16
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17
+ }
18
+
19
+ .glass-morphism {
20
+ background: rgba(255, 255, 255, 0.1);
21
+ backdrop-filter: blur(10px);
22
+ border: 1px solid rgba(255, 255, 255, 0.2);
23
+ }
24
+
25
+ .input-digit {
26
+ transition: none;
27
+ }
28
+
29
+ .input-digit:focus {
30
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
31
+ }
32
+
33
+ .pulse-dot {
34
+ position: relative;
35
+ }
36
+
37
+ .pulse-dot::before {
38
+ content: '';
39
+ position: absolute;
40
+ inset: -4px;
41
+ border-radius: 50%;
42
+ background: inherit;
43
+ opacity: 0.3;
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="gradient-bg min-h-screen">
48
+ <!-- Navigation -->
49
+ <nav class="glass-morphism px-6 py-4">
50
+ <div class="max-w-7xl mx-auto flex justify-between items-center">
51
+ <div class="flex items-center space-x-3">
52
+ <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
53
+ <i data-feather="shield" class="w-6 h-6 text-purple-600"></i>
54
+ </div>
55
+ <span class="text-white font-bold text-xl">VerifyNow Pro</span>
56
+ </div>
57
+ <div class="hidden md:flex items-center space-x-6">
58
+ <a href="index.html" class="text-white/80 hover:text-white transition">Home</a>
59
+ <a href="#" class="text-white/80 hover:text-white transition">Features</a>
60
+ <a href="#" class="text-white/80 hover:text-white transition">Pricing</a>
61
+ <a href="#" class="text-white/80 hover:text-white transition">Docs</a>
62
+ <button class="bg-white text-purple-600 px-4 py-2 rounded-lg font-semibold hover:bg-purple-50 transition">
63
+ Sign In
64
+ </button>
65
+ </div>
66
+ <button class="md:hidden text-white" onclick="toggleMobileMenu()">
67
+ <i data-feather="menu" class="w-6 h-6"></i>
68
+ </button>
69
+ </div>
70
+ </nav>
71
+ <!-- Progress Steps -->
72
+ <div class="max-w-4xl mx-auto px-6 pt-8">
73
+ <div class="flex items-center justify-center space-x-4 mb-12">
74
+ <div class="flex items-center">
75
+ <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
76
+ <span class="text-white font-semibold">1</span>
77
+ </div>
78
+ <span class="text-white ml-2">Email</span>
79
+ </div>
80
+ <div class="w-16 h-0.5 bg-white/30"></div>
81
+ <div class="flex items-center">
82
+ <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center">
83
+ <span class="text-purple-600 font-semibold">2</span>
84
+ </div>
85
+ <span class="text-white ml-2 font-semibold">Verify</span>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Hero Section with Verification -->
91
+ <div class="max-w-4xl mx-auto px-6 pb-16">
92
+ <div class="text-center mb-12">
93
+ <h1 class="text-5xl md:text-6xl font-bold text-white mb-6">
94
+ Verify Your Email
95
+ </h1>
96
+ <p class="text-xl text-white/80">
97
+ Enter the 6-digit verification code sent to your email
98
+ </p>
99
+ </div>
100
+
101
+ <!-- Main Verification Card -->
102
+ <div class="glass-morphism rounded-2xl p-8 md:p-12 shadow-2xl">
103
+ <!-- Email Display -->
104
+ <div class="flex items-center justify-center mb-8">
105
+ <div class="bg-white/10 rounded-full px-4 py-2 flex items-center space-x-2">
106
+ <i data-feather="mail" class="w-5 h-5 text-white"></i>
107
+ <span class="text-white font-medium" id="userEmail">[email protected]</span>
108
+ </div>
109
+ </div>
110
+ <!-- 6-Digit Input Fields -->
111
+ <div class="mb-8">
112
+ <div class="flex justify-center space-x-3" id="otpContainer">
113
+ <input type="text" maxlength="1" class="input-digit w-14 h-14 text-center text-2xl font-bold bg-white/20 border-2 border-white/30 rounded-lg text-white focus:outline-none focus:border-white" onkeyup="handleOTPInput(event, 0)">
114
+ <input type="text" maxlength="1" class="input-digit w-14 h-14 text-center text-2xl font-bold bg-white/20 border-2 border-white/30 rounded-lg text-white focus:outline-none focus:border-white" onkeyup="handleOTPInput(event, 1)">
115
+ <input type="text" maxlength="1" class="input-digit w-14 h-14 text-center text-2xl font-bold bg-white/20 border-2 border-white/30 rounded-lg text-white focus:outline-none focus:border-white" onkeyup="handleOTPInput(event, 2)">
116
+ <input type="text" maxlength="1" class="input-digit w-14 h-14 text-center text-2xl font-bold bg-white/20 border-2 border-white/30 rounded-lg text-white focus:outline-none focus:border-white" onkeyup="handleOTPInput(event, 3)">
117
+ <input type="text" maxlength="1" class="input-digit w-14 h-14 text-center text-2xl font-bold bg-white/20 border-2 border-white/30 rounded-lg text-white focus:outline-none focus:border-white" onkeyup="handleOTPInput(event, 4)">
118
+ <input type="text" maxlength="1" class="input-digit w-14 h-14 text-center text-2xl font-bold bg-white/20 border-2 border-white/30 rounded-lg text-white focus:outline-none focus:border-white" onkeyup="handleOTPInput(event, 5)">
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Timer -->
123
+ <div class="text-center mb-6">
124
+ <p class="text-white/70 text-sm">
125
+ Code expires in <span id="timer" class="font-bold text-white">05:00</span>
126
+ </p>
127
+ </div>
128
+ <!-- Action Buttons -->
129
+ <div class="space-y-4">
130
+ <button onclick="verifyCode()" class="w-full bg-white text-purple-600 font-semibold py-3 rounded-lg hover:bg-purple-50 transition">
131
+ Verify Code
132
+ </button>
133
+ <button onclick="resendCode()" class="w-full bg-white/10 text-white font-semibold py-3 rounded-lg hover:bg-white/20 transition">
134
+ Resend Code
135
+ </button>
136
+ </div>
137
+ <!-- Alternative Methods -->
138
+ <div class="mt-8 pt-8 border-t border-white/20">
139
+ <p class="text-center text-white/70 text-sm mb-4">Or verify using:</p>
140
+ <div class="flex justify-center space-x-4">
141
+ <button class="bg-white/10 p-3 rounded-lg hover:bg-white/20 transition">
142
+ <i data-feather="smartphone" class="w-6 h-6 text-white"></i>
143
+ </button>
144
+ <button class="bg-white/10 p-3 rounded-lg hover:bg-white/20 transition">
145
+ <i data-feather="message-circle" class="w-6 h-6 text-white"></i>
146
+ </button>
147
+ <button class="bg-white/10 p-3 rounded-lg hover:bg-white/20 transition">
148
+ <i data-feather="key" class="w-6 h-6 text-white"></i>
149
+ </button>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Security Features -->
155
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
156
+ <div class="glass-morphism rounded-lg p-6 text-center">
157
+ <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-3 pulse-dot">
158
+ <i data-feather="check" class="w-6 h-6 text-white"></i>
159
+ </div>
160
+ <h3 class="text-white font-semibold mb-2">Bank-Level Security</h3>
161
+ <p class="text-white/70 text-sm">256-bit encryption protects your data</p>
162
+ </div>
163
+ <div class="glass-morphism rounded-lg p-6 text-center">
164
+ <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-3 pulse-dot">
165
+ <i data-feather="zap" class="w-6 h-6 text-white"></i>
166
+ </div>
167
+ <h3 class="text-white font-semibold mb-2">Instant Delivery</h3>
168
+ <p class="text-white/70 text-sm">Receive codes in seconds</p>
169
+ </div>
170
+ <div class="glass-morphism rounded-lg p-6 text-center">
171
+ <div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-3 pulse-dot">
172
+ <i data-feather="shield" class="w-6 h-6 text-white"></i>
173
+ </div>
174
+ <h3 class="text-white font-semibold mb-2">Multi-Factor Auth</h3>
175
+ <p class="text-white/70 text-sm">Multiple verification methods</p>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ <!-- Success Modal (Hidden by default) -->
180
+ <div id="successModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden items-center justify-center z-50">
181
+ <div class="bg-white rounded-2xl p-8 max-w-md mx-4" id="modalContent">
182
+ <div class="text-center">
183
+ <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
184
+ <i data-feather="check-circle" class="w-12 h-12 text-green-500"></i>
185
+ </div>
186
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">Verification Successful!</h2>
187
+ <p class="text-gray-600 mb-6">Your account has been successfully verified.</p>
188
+ <button onclick="closeModal()" class="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-700 transition">
189
+ Continue to Dashboard
190
+ </button>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ <script>
195
+ feather.replace();
196
+ // OTP Input Handling
197
+ function handleOTPInput(event, index) {
198
+ const input = event.target;
199
+ const value = input.value;
200
+
201
+ if (value.length === 1) {
202
+ if (index < 5) {
203
+ const nextInput = input.parentElement.children[index + 1];
204
+ nextInput.focus();
205
+ }
206
+ } else if (event.key === 'Backspace' && value.length === 0 && index > 0) {
207
+ const prevInput = input.parentElement.children[index - 1];
208
+ prevInput.focus();
209
+ }
210
+ }
211
+ // Timer Countdown
212
+ let timeLeft = 300; // 5 minutes in seconds
213
+ const timerElement = document.getElementById('timer');
214
+
215
+ const timer = setInterval(() => {
216
+ const minutes = Math.floor(timeLeft / 60);
217
+ const seconds = timeLeft % 60;
218
+ timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
219
+
220
+ if (timeLeft <= 60) {
221
+ timerElement.classList.add('text-red-300');
222
+ }
223
+
224
+ if (timeLeft === 0) {
225
+ clearInterval(timer);
226
+ timerElement.textContent = 'Expired';
227
+ timerElement.classList.add('text-red-400');
228
+ }
229
+
230
+ timeLeft--;
231
+ }, 1000);
232
+
233
+ // Verify Code Function
234
+ function verifyCode() {
235
+ const inputs = document.querySelectorAll('#otpContainer input');
236
+ let code = '';
237
+ inputs.forEach(input => code += input.value);
238
+
239
+ if (code.length !== 6) {
240
+ showError('Please enter all 6 digits');
241
+ return;
242
+ }
243
+
244
+ // Simulate verification
245
+ const button = event.target;
246
+ button.innerHTML = '<i data-feather="loader" class="w-5 h-5 animate-spin inline mr-2"></i>Verifying...';
247
+ button.disabled = true;
248
+ feather.replace();
249
+
250
+ setTimeout(() => {
251
+ button.innerHTML = 'Verify Code';
252
+ button.disabled = false;
253
+ showSuccessModal();
254
+ }, 1500);
255
+ }
256
+
257
+ // Resend Code Function
258
+ function resendCode() {
259
+ const button = event.target;
260
+ button.innerHTML = '<i data-feather="loader" class="w-5 h-5 animate-spin inline mr-2"></i>Sending...';
261
+ button.disabled = true;
262
+ feather.replace();
263
+
264
+ setTimeout(() => {
265
+ button.innerHTML = 'Resend Code';
266
+ button.disabled = false;
267
+
268
+ // Reset timer
269
+ clearInterval(timer);
270
+ timeLeft = 300;
271
+ timerElement.textContent = '05:00';
272
+ timerElement.classList.remove('text-red-300', 'text-red-400');
273
+
274
+ // Clear inputs
275
+ document.querySelectorAll('#otpContainer input').forEach(input => {
276
+ input.value = '';
277
+ });
278
+ document.querySelector('#otpContainer input').focus();
279
+
280
+ // Show notification
281
+ showNotification('New code sent to your email');
282
+ }, 1500);
283
+ }
284
+ // Show Success Modal
285
+ function showSuccessModal() {
286
+ const modal = document.getElementById('successModal');
287
+ modal.classList.remove('hidden');
288
+ modal.classList.add('flex');
289
+ feather.replace();
290
+ }
291
+
292
+ // Close Modal
293
+ function closeModal() {
294
+ const modal = document.getElementById('successModal');
295
+ modal.classList.add('hidden');
296
+ modal.classList.remove('flex');
297
+ }
298
+ // Show Error Message
299
+ function showError(message) {
300
+ const errorDiv = document.createElement('div');
301
+ errorDiv.className = 'fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center space-x-2';
302
+ errorDiv.innerHTML = `<i data-feather="alert-circle" class="w-5 h-5"></i><span>${message}</span>`;
303
+ document.body.appendChild(errorDiv);
304
+ feather.replace();
305
+
306
+ setTimeout(() => {
307
+ errorDiv.remove();
308
+ }, 3000);
309
+ }
310
+
311
+ // Show Notification
312
+ function showNotification(message) {
313
+ const notifDiv = document.createElement('div');
314
+ notifDiv.className = 'fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center space-x-2';
315
+ notifDiv.innerHTML = `<i data-feather="check" class="w-5 h-5"></i><span>${message}</span>`;
316
+ document.body.appendChild(notifDiv);
317
+ feather.replace();
318
+
319
+ setTimeout(() => {
320
+ notifDiv.remove();
321
+ }, 3000);
322
+ }
323
+ // Mobile Menu Toggle
324
+ function toggleMobileMenu() {
325
+ // Implementation for mobile menu
326
+ console.log('Mobile menu toggled');
327
+ }
328
+
329
+ // Get email from URL parameter or localStorage
330
+ window.addEventListener('load', () => {
331
+ const urlParams = new URLSearchParams(window.location.search);
332
+ const email = urlParams.get('email') || localStorage.getItem('userEmail') || '[email protected]';
333
+ document.getElementById('userEmail').textContent = email;
334
+ });
335
+ </script>
336
+ </body>
337
  </html>
step1.html ADDED
@@ -0,0 +1,192 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>VerifyNow Pro - Enter Email</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
12
+ body { font-family: 'Inter', sans-serif; }
13
+
14
+ .gradient-bg {
15
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
16
+ }
17
+
18
+ .glass-morphism {
19
+ background: rgba(255, 255, 255, 0.1);
20
+ backdrop-filter: blur(10px);
21
+ border: 1px solid rgba(255, 255, 255, 0.2);
22
+ }
23
+
24
+ .pulse-dot {
25
+ position: relative;
26
+ }
27
+
28
+ .pulse-dot::before {
29
+ content: '';
30
+ position: absolute;
31
+ inset: -4px;
32
+ border-radius: 50%;
33
+ background: inherit;
34
+ opacity: 0.3;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="gradient-bg min-h-screen">
39
+ <!-- Navigation -->
40
+ <nav class="glass-morphism px-6 py-4">
41
+ <div class="max-w-7xl mx-auto flex justify-between items-center">
42
+ <div class="flex items-center space-x-3">
43
+ <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
44
+ <i data-feather="shield" class="w-6 h-6 text-purple-600"></i>
45
+ </div>
46
+ <span class="text-white font-bold text-xl">VerifyNow Pro</span>
47
+ </div>
48
+ <div class="hidden md:flex items-center space-x-6">
49
+ <a href="step1.html" class="text-white/80 hover:text-white transition">Home</a>
50
+ <a href="#" class="text-white/80 hover:text-white transition">Features</a>
51
+ <a href="#" class="text-white/80 hover:text-white transition">Pricing</a>
52
+ <a href="#" class="text-white/80 hover:text-white transition">Docs</a>
53
+ <button class="bg-white text-purple-600 px-4 py-2 rounded-lg font-semibold hover:bg-purple-50 transition">
54
+ Sign In
55
+ </button>
56
+ </div>
57
+ <button class="md:hidden text-white" onclick="toggleMobileMenu()">
58
+ <i data-feather="menu" class="w-6 h-6"></i>
59
+ </button>
60
+ </div>
61
+ </nav>
62
+
63
+ <!-- Progress Steps -->
64
+ <div class="max-w-4xl mx-auto px-6 pt-8">
65
+ <div class="flex items-center justify-center space-x-4 mb-12">
66
+ <div class="flex items-center">
67
+ <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center">
68
+ <span class="text-purple-600 font-semibold">1</span>
69
+ </div>
70
+ <span class="text-white ml-2 font-semibold">Email</span>
71
+ </div>
72
+ <div class="w-16 h-0.5 bg-white/30"></div>
73
+ <div class="flex items-center">
74
+ <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
75
+ <span class="text-white font-semibold">2</span>
76
+ </div>
77
+ <span class="text-white ml-2">Verify</span>
78
+ </div>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- Hero Section with Email Input -->
83
+ <div class="max-w-4xl mx-auto px-6 pb-16">
84
+ <div class="text-center mb-12">
85
+ <h1 class="text-5xl md:text-6xl font-bold text-white mb-6">
86
+ Enter Your Email
87
+ </h1>
88
+ <p class="text-xl text-white/80">
89
+ We'll send you a verification code to secure your account
90
+ </p>
91
+ </div>
92
+
93
+ <!-- Main Email Card -->
94
+ <div class="glass-morphism rounded-2xl p-8 md:p-12 shadow-2xl max-w-md mx-auto">
95
+ <form onsubmit="submitEmail(event)">
96
+ <!-- Email Input -->
97
+ <div class="mb-6">
98
+ <label for="email" class="block text-white font-medium mb-2">Email Address</label>
99
+ <div class="relative">
100
+ <input
101
+ type="email"
102
+ id="email"
103
+ name="email"
104
+ required
105
+ placeholder="Enter your email"
106
+ class="w-full px-4 py-3 pl-12 bg-white/20 border-2 border-white/30 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-white"
107
+ >
108
+ <i data-feather="mail" class="w-5 h-5 text-white/70 absolute left-4 top-1/2 transform -translate-y-1/2"></i>
109
+ </div>
110
+ </div>
111
+
112
+ <!-- Submit Button -->
113
+ <button type="submit" class="w-full bg-white text-purple-600 font-semibold py-3 rounded-lg hover:bg-purple-50 transition">
114
+ Send Verification Code
115
+ </button>
116
+ </form>
117
+
118
+ <!-- Additional Options -->
119
+ <div class="mt-8 pt-8 border-t border-white/20">
120
+ <p class="text-center text-white/70 text-sm mb-4">Or continue with:</p>
121
+ <div class="flex justify-center space-x-4">
122
+ <button class="bg-white/10 p-3 rounded-lg hover:bg-white/20 transition">
123
+ <i data-feather="smartphone" class="w-6 h-6 text-white"></i>
124
+ </button>
125
+ <button class="bg-white/10 p-3 rounded-lg hover:bg-white/20 transition">
126
+ <i data-feather="message-circle" class="w-6 h-6 text-white"></i>
127
+ </button>
128
+ <button class="bg-white/10 p-3 rounded-lg hover:bg-white/20 transition">
129
+ <i data-feather="key" class="w-6 h-6 text-white"></i>
130
+ </button>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Security Features -->
136
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
137
+ <div class="glass-morphism rounded-lg p-6 text-center">
138
+ <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-3 pulse-dot">
139
+ <i data-feather="check" class="w-6 h-6 text-white"></i>
140
+ </div>
141
+ <h3 class="text-white font-semibold mb-2">Bank-Level Security</h3>
142
+ <p class="text-white/70 text-sm">256-bit encryption protects your data</p>
143
+ </div>
144
+ <div class="glass-morphism rounded-lg p-6 text-center">
145
+ <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-3 pulse-dot">
146
+ <i data-feather="zap" class="w-6 h-6 text-white"></i>
147
+ </div>
148
+ <h3 class="text-white font-semibold mb-2">Instant Delivery</h3>
149
+ <p class="text-white/70 text-sm">Receive codes in seconds</p>
150
+ </div>
151
+ <div class="glass-morphism rounded-lg p-6 text-center">
152
+ <div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-3 pulse-dot">
153
+ <i data-feather="shield" class="w-6 h-6 text-white"></i>
154
+ </div>
155
+ <h3 class="text-white font-semibold mb-2">Multi-Factor Auth</h3>
156
+ <p class="text-white/70 text-sm">Multiple verification methods</p>
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+ <script>
162
+ feather.replace();
163
+
164
+ // Submit Email Function
165
+ function submitEmail(event) {
166
+ event.preventDefault();
167
+ const email = document.getElementById('email').value;
168
+
169
+ // Store email in localStorage
170
+ localStorage.setItem('userEmail', email);
171
+
172
+ // Show loading state
173
+ const button = event.target.querySelector('button[type="submit"]');
174
+ const originalText = button.innerHTML;
175
+ button.innerHTML = '<i data-feather="loader" class="w-5 h-5 animate-spin inline mr-2"></i>Sending...';
176
+ button.disabled = true;
177
+ feather.replace();
178
+
179
+ // Simulate API call
180
+ setTimeout(() => {
181
+ // Redirect to verification page
182
+ window.location.href = `index.html?email=${encodeURIComponent(email)}`;
183
+ }, 1500);
184
+ }
185
+
186
+ // Mobile Menu Toggle
187
+ function toggleMobileMenu() {
188
+ console.log('Mobile menu toggled');
189
+ }
190
+ </script>
191
+ </body>
192
+ </html>