Hugging Face's logo

Spaces:
gallabs
/
msidentity-profile
Running

App Files Community
gallabs commited on
Commit
e1234a0
·
verified ·
1 Parent(s): 0a2bd22

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +462 -160
  2. prompts.txt +1 -0
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>MS Identity - User Management</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
  <script>
@@ -67,31 +67,32 @@
67
  }
68
  </style>
69
  </head>
70
- <body class="bg-gray-100 dark:bg-dark-900 text-gray-800 dark:text-gray-200 min-h-screen">
71
  <div class="container mx-auto px-4 py-8">
72
- <!-- Header -->
73
  <div class="flex justify-between items-center mb-8">
74
  <div>
75
  <h1 class="text-3xl font-bold">MS Identity</h1>
76
- <p class="text-gray-500 dark:text-gray-400">User Management Portal</p>
77
  </div>
78
  <div class="flex items-center space-x-4">
79
- <button class="p-2 rounded-full bg-gray-200 dark:bg-dark-800 hover:bg-gray-300 dark:hover:bg-gray-700">
80
- <i class="fas fa-bell text-gray-600 dark:text-gray-300"></i>
 
81
  </button>
82
  <div class="flex items-center space-x-2">
83
- <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full">
84
  <span class="font-medium">Admin User</span>
85
  </div>
86
  </div>
87
  </div>
88
 
89
- <!-- User Profile Card -->
90
- <div class="bg-white dark:bg-dark-800 rounded-xl card-shadow mb-8 overflow-hidden">
91
  <div class="gradient-bg h-32"></div>
92
  <div class="px-6 pb-6 relative">
93
  <div class="avatar-upload absolute -top-16 left-6">
94
- <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-32 h-32 rounded-full border-4 border-white dark:border-dark-800">
95
  <input type="file" id="avatar" class="hidden">
96
  <label for="avatar" class="absolute bottom-2 right-2 bg-primary-500 text-white p-2 rounded-full cursor-pointer hover:bg-primary-600">
97
  <i class="fas fa-camera"></i>
@@ -101,233 +102,243 @@
101
  <div class="flex justify-end mt-4">
102
  <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg flex items-center space-x-2">
103
  <i class="fas fa-edit"></i>
104
- <span>Edit Profile</span>
105
  </button>
106
  </div>
107
 
108
  <div class="mt-8">
109
- <h2 class="text-2xl font-bold">John Doe</h2>
110
- <p class="text-gray-500 dark:text-gray-400">john.doe@example.com</p>
111
  <div class="flex items-center mt-2">
112
- <span class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded text-xs">Active</span>
113
- <span class="ml-2 text-gray-500 dark:text-gray-400 text-sm">Last login: 2 hours ago</span>
114
  </div>
115
  </div>
116
  </div>
117
  </div>
118
 
119
- <!-- Tabs -->
120
- <div class="mb-8 border-b border-gray-200 dark:border-gray-700">
121
  <ul class="flex flex-wrap -mb-px" id="profileTabs">
122
  <li class="mr-2">
123
  <button class="inline-block p-4 font-medium tab-active" id="personal-tab" data-tab="personal">
124
- <i class="fas fa-user mr-2"></i>Personal Information
125
  </button>
126
  </li>
127
  <li class="mr-2">
128
- <button class="inline-block p-4 font-medium text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" id="security-tab" data-tab="security">
129
- <i class="fas fa-shield-alt mr-2"></i>Security
 
 
 
 
 
 
 
 
 
 
130
  </button>
131
  </li>
132
  </ul>
133
  </div>
134
 
135
- <!-- Tab Content -->
136
  <div id="personal-content" class="tab-content active">
137
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
138
- <!-- Personal Info -->
139
- <div class="bg-white dark:bg-dark-800 rounded-xl card-shadow p-6">
140
  <h3 class="text-xl font-bold mb-4 flex items-center">
141
- <i class="fas fa-info-circle mr-2 text-primary-500"></i> Basic Information
142
  </h3>
143
 
144
  <div class="space-y-4">
145
  <div>
146
- <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Full Name</label>
147
- <p class="font-medium">John Doe</p>
148
  </div>
149
  <div>
150
- <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Email</label>
151
- <p class="font-medium">john.doe@example.com</p>
152
- <span class="text-xs text-green-500 dark:text-green-400 flex items-center mt-1">
153
- <i class="fas fa-check-circle mr-1"></i> Verified
154
  </span>
155
  </div>
156
  <div>
157
- <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Phone Number</label>
158
  <div class="flex items-center justify-between">
159
- <p class="font-medium">+1 (555) 123-4567</p>
160
  <button class="text-primary-500 hover:text-primary-600 text-sm font-medium">
161
- Change
162
  </button>
163
  </div>
164
  </div>
165
  <div>
166
- <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Birth Date</label>
167
- <p class="font-medium">January 15, 1985</p>
168
  </div>
169
  </div>
170
 
171
  <button class="mt-6 px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg flex items-center space-x-2">
172
  <i class="fas fa-save mr-2"></i>
173
- <span>Save Changes</span>
174
  </button>
175
  </div>
176
 
177
- <!-- Address -->
178
- <div class="bg-white dark:bg-dark-800 rounded-xl card-shadow p-6">
179
  <h3 class="text-xl font-bold mb-4 flex items-center">
180
- <i class="fas fa-map-marker-alt mr-2 text-primary-500"></i> Address
181
  </h3>
182
 
183
  <div class="space-y-4">
184
  <div>
185
- <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Street</label>
186
- <p class="font-medium">123 Main St</p>
187
  </div>
188
  <div>
189
- <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">City</label>
190
- <p class="font-medium">New York</p>
191
  </div>
192
  <div>
193
- <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">State/Province</label>
194
- <p class="font-medium">NY</p>
195
  </div>
196
  <div>
197
- <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">ZIP/Postal Code</label>
198
- <p class="font-medium">10001</p>
199
  </div>
200
  <div>
201
- <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Country</label>
202
- <p class="font-medium">United States</p>
203
  </div>
204
  </div>
205
 
206
  <button class="mt-6 px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg flex items-center space-x-2">
207
  <i class="fas fa-save mr-2"></i>
208
- <span>Save Changes</span>
209
  </button>
210
  </div>
211
 
212
- <!-- Social Accounts -->
213
- <div class="bg-white dark:bg-dark-800 rounded-xl card-shadow p-6">
214
  <h3 class="text-xl font-bold mb-4 flex items-center">
215
- <i class="fas fa-share-alt mr-2 text-primary-500"></i> Social Accounts
216
  </h3>
217
 
218
  <div class="space-y-4">
219
- <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
220
  <div class="flex items-center">
221
  <div class="w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center">
222
  <i class="fab fa-facebook-f"></i>
223
  </div>
224
  <div class="ml-3">
225
  <p class="font-medium">Facebook</p>
226
- <p class="text-sm text-gray-500 dark:text-gray-400">Connected</p>
227
  </div>
228
  </div>
229
  <button class="text-red-500 hover:text-red-600 text-sm font-medium">
230
- Disconnect
231
  </button>
232
  </div>
233
 
234
- <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
235
  <div class="flex items-center">
236
  <div class="w-10 h-10 rounded-full bg-red-500 text-white flex items-center justify-center">
237
  <i class="fab fa-google"></i>
238
  </div>
239
  <div class="ml-3">
240
  <p class="font-medium">Google</p>
241
- <p class="text-sm text-gray-500 dark:text-gray-400">Connected</p>
242
  </div>
243
  </div>
244
  <button class="text-red-500 hover:text-red-600 text-sm font-medium">
245
- Disconnect
246
  </button>
247
  </div>
248
 
249
- <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
250
  <div class="flex items-center">
251
  <div class="w-10 h-10 rounded-full bg-blue-400 text-white flex items-center justify-center">
252
  <i class="fab fa-twitter"></i>
253
  </div>
254
  <div class="ml-3">
255
  <p class="font-medium">Twitter</p>
256
- <p class="text-sm text-gray-500 dark:text-gray-400">Not connected</p>
257
  </div>
258
  </div>
259
  <button class="text-primary-500 hover:text-primary-600 text-sm font-medium">
260
- Connect
261
  </button>
262
  </div>
263
 
264
- <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
265
  <div class="flex items-center">
266
  <div class="w-10 h-10 rounded-full bg-gray-800 text-white flex items-center justify-center">
267
  <i class="fab fa-github"></i>
268
  </div>
269
  <div class="ml-3">
270
  <p class="font-medium">GitHub</p>
271
- <p class="text-sm text-gray-500 dark:text-gray-400">Not connected</p>
272
  </div>
273
  </div>
274
  <button class="text-primary-500 hover:text-primary-600 text-sm font-medium">
275
- Connect
276
  </button>
277
  </div>
278
  </div>
279
  </div>
280
 
281
- <!-- Preferences -->
282
- <div class="bg-white dark:bg-dark-800 rounded-xl card-shadow p-6">
283
  <h3 class="text-xl font-bold mb-4 flex items-center">
284
- <i class="fas fa-cog mr-2 text-primary-500"></i> Preferences
285
  </h3>
286
 
287
  <div class="space-y-4">
288
  <div class="flex items-center justify-between">
289
  <div>
290
- <p class="font-medium">Dark Mode</p>
291
- <p class="text-sm text-gray-500 dark:text-gray-400">Switch between light and dark theme</p>
292
  </div>
293
  <label class="relative inline-flex items-center cursor-pointer">
294
  <input type="checkbox" class="sr-only peer" checked>
295
- <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary-500"></div>
296
  </label>
297
  </div>
298
 
299
  <div class="flex items-center justify-between">
300
  <div>
301
- <p class="font-medium">Email Notifications</p>
302
- <p class="text-sm text-gray-500 dark:text-gray-400">Receive email notifications</p>
303
  </div>
304
  <label class="relative inline-flex items-center cursor-pointer">
305
  <input type="checkbox" class="sr-only peer" checked>
306
- <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary-500"></div>
307
  </label>
308
  </div>
309
 
310
  <div class="flex items-center justify-between">
311
  <div>
312
- <p class="font-medium">SMS Notifications</p>
313
- <p class="text-sm text-gray-500 dark:text-gray-400">Receive SMS notifications</p>
314
  </div>
315
  <label class="relative inline-flex items-center cursor-pointer">
316
  <input type="checkbox" class="sr-only peer">
317
- <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary-500"></div>
318
  </label>
319
  </div>
320
 
321
  <div class="flex items-center justify-between">
322
  <div>
323
- <p class="font-medium">Language</p>
324
- <p class="text-sm text-gray-500 dark:text-gray-400">Interface language</p>
325
- </div>
326
- <select class="bg-gray-50 dark:bg-dark-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-32 p-2">
327
- <option selected>English</option>
328
- <option>Portuguese</option>
329
- <option>Spanish</option>
330
- <option>French</option>
331
  </select>
332
  </div>
333
  </div>
@@ -337,39 +348,39 @@
337
 
338
  <div id="security-content" class="tab-content hidden">
339
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
340
- <!-- Password -->
341
- <div class="bg-white dark:bg-dark-800 rounded-xl card-shadow p-6">
342
  <h3 class="text-xl font-bold mb-4 flex items-center">
343
- <i class="fas fa-key mr-2 text-primary-500"></i> Password
344
  </h3>
345
 
346
  <div class="space-y-4">
347
  <div>
348
- <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Current Password</label>
349
  <div class="relative">
350
- <input type="password" class="bg-gray-50 dark:bg-dark-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5" placeholder="••••••••">
351
- <button class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
352
  <i class="fas fa-eye"></i>
353
  </button>
354
  </div>
355
  </div>
356
 
357
  <div>
358
- <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">New Password</label>
359
  <div class="relative">
360
- <input type="password" class="bg-gray-50 dark:bg-dark-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5" placeholder="••••••••">
361
- <button class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
362
  <i class="fas fa-eye"></i>
363
  </button>
364
  </div>
365
- <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Must be at least 8 characters</p>
366
  </div>
367
 
368
  <div>
369
- <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Confirm New Password</label>
370
  <div class="relative">
371
- <input type="password" class="bg-gray-50 dark:bg-dark-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5" placeholder="••••••••">
372
- <button class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
373
  <i class="fas fa-eye"></i>
374
  </button>
375
  </div>
@@ -378,150 +389,425 @@
378
 
379
  <button class="mt-6 px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg flex items-center space-x-2">
380
  <i class="fas fa-save mr-2"></i>
381
- <span>Change Password</span>
382
  </button>
383
  </div>
384
 
385
- <!-- Two-Factor Authentication -->
386
- <div class="bg-white dark:bg-dark-800 rounded-xl card-shadow p-6">
387
  <h3 class="text-xl font-bold mb-4 flex items-center">
388
- <i class="fas fa-lock mr-2 text-primary-500"></i> Two-Factor Authentication
389
  </h3>
390
 
391
  <div class="space-y-6">
392
  <div class="flex items-start">
393
  <div class="flex items-center h-5">
394
- <input id="2fa-toggle" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800">
395
  </div>
396
- <label for="2fa-toggle" class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">
397
- <span class="block font-semibold">Enable Two-Factor Authentication</span>
398
- <span class="block text-gray-500 dark:text-gray-400 mt-1">Add an extra layer of security to your account by requiring more than just a password to log in.</span>
399
  </label>
400
  </div>
401
 
402
- <div class="border-t border-gray-200 dark:border-gray-700 pt-4">
403
- <h4 class="font-semibold mb-3">Authentication Methods</h4>
404
 
405
- <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-dark-700 rounded-lg mb-3">
406
  <div class="flex items-center">
407
  <div class="w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center">
408
  <i class="fas fa-mobile-alt"></i>
409
  </div>
410
  <div class="ml-3">
411
- <p class="font-medium">Authenticator App</p>
412
- <p class="text-sm text-gray-500 dark:text-gray-400">Set up using an app like Google Authenticator or Microsoft Authenticator</p>
413
  </div>
414
  </div>
415
  <button class="text-primary-500 hover:text-primary-600 text-sm font-medium">
416
- Set up
417
  </button>
418
  </div>
419
 
420
- <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
421
  <div class="flex items-center">
422
  <div class="w-10 h-10 rounded-full bg-green-500 text-white flex items-center justify-center">
423
  <i class="fas fa-sms"></i>
424
  </div>
425
  <div class="ml-3">
426
- <p class="font-medium">SMS Text Message</p>
427
- <p class="text-sm text-gray-500 dark:text-gray-400">Use your mobile phone to receive verification codes</p>
428
  </div>
429
  </div>
430
  <button class="text-primary-500 hover:text-primary-600 text-sm font-medium">
431
- Set up
432
  </button>
433
  </div>
434
  </div>
435
  </div>
436
  </div>
437
 
438
- <!-- Login Activity -->
439
- <div class="bg-white dark:bg-dark-800 rounded-xl card-shadow p-6">
440
  <h3 class="text-xl font-bold mb-4 flex items-center">
441
- <i class="fas fa-history mr-2 text-primary-500"></i> Login Activity
442
  </h3>
443
 
444
  <div class="space-y-4">
445
- <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
446
  <div>
447
- <p class="font-medium">New York, US</p>
448
- <p class="text-sm text-gray-500 dark:text-gray-400">Chrome on Windows • 2 hours ago</p>
449
  </div>
450
- <span class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded text-xs">Current</span>
451
  </div>
452
 
453
- <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
454
  <div>
455
- <p class="font-medium">San Francisco, US</p>
456
- <p class="text-sm text-gray-500 dark:text-gray-400">Safari on Mac • 1 day ago</p>
457
  </div>
458
  </div>
459
 
460
- <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
461
  <div>
462
- <p class="font-medium">London, UK</p>
463
- <p class="text-sm text-gray-500 dark:text-gray-400">Firefox on Linux • 1 week ago</p>
464
  </div>
465
  <button class="text-red-500 hover:text-red-600 text-sm font-medium">
466
- Revoke
467
  </button>
468
  </div>
469
 
470
- <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
471
  <div>
472
- <p class="font-medium">Tokyo, Japan</p>
473
- <p class="text-sm text-gray-500 dark:text-gray-400">Chrome on Android • 2 weeks ago</p>
474
  </div>
475
  <button class="text-red-500 hover:text-red-600 text-sm font-medium">
476
- Revoke
477
  </button>
478
  </div>
479
  </div>
480
 
481
  <button class="mt-4 text-primary-500 hover:text-primary-600 text-sm font-medium">
482
- View all activity
483
  </button>
484
  </div>
485
 
486
- <!-- Security Questions -->
487
- <div class="bg-white dark:bg-dark-800 rounded-xl card-shadow p-6">
488
  <h3 class="text-xl font-bold mb-4 flex items-center">
489
- <i class="fas fa-question-circle mr-2 text-primary-500"></i> Security Questions
490
  </h3>
491
 
492
  <div class="space-y-4">
493
  <div>
494
- <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Question 1</label>
495
- <select class="bg-gray-50 dark:bg-dark-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 mb-2">
496
- <option selected>What was your first pet's name?</option>
497
- <option>What was your mother's maiden name?</option>
498
- <option>What city were you born in?</option>
499
  </select>
500
- <input type="text" class="bg-gray-50 dark:bg-dark-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5" placeholder="Your answer">
501
  </div>
502
 
503
  <div>
504
- <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Question 2</label>
505
- <select class="bg-gray-50 dark:bg-dark-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 mb-2">
506
- <option>What was your first pet's name?</option>
507
- <option selected>What was your mother's maiden name?</option>
508
- <option>What city were you born in?</option>
509
  </select>
510
- <input type="text" class="bg-gray-50 dark:bg-dark-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5" placeholder="Your answer">
511
  </div>
512
  </div>
513
 
514
  <button class="mt-6 px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg flex items-center space-x-2">
515
  <i class="fas fa-save mr-2"></i>
516
- <span>Save Questions</span>
517
  </button>
518
  </div>
519
  </div>
520
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
521
  </div>
522
 
523
  <script>
524
- // Tab switching functionality
525
  document.addEventListener('DOMContentLoaded', function() {
526
  const tabs = document.querySelectorAll('[data-tab]');
527
 
@@ -529,16 +815,16 @@
529
  tab.addEventListener('click', function() {
530
  const tabId = this.getAttribute('data-tab');
531
 
532
- // Update active tab
533
  document.querySelectorAll('[data-tab]').forEach(t => {
534
  t.classList.remove('tab-active');
535
- t.classList.add('text-gray-500', 'dark:text-gray-400', 'hover:text-gray-600', 'dark:hover:text-gray-300');
536
  });
537
 
538
  this.classList.add('tab-active');
539
- this.classList.remove('text-gray-500', 'dark:text-gray-400', 'hover:text-gray-600', 'dark:hover:text-gray-300');
540
 
541
- // Update active content
542
  document.querySelectorAll('.tab-content').forEach(content => {
543
  content.classList.add('hidden');
544
  content.classList.remove('active');
@@ -549,8 +835,8 @@
549
  });
550
  });
551
 
552
- // Toggle dark mode
553
- const darkModeToggle = document.getElementById('dark-mode-toggle');
554
  if (darkModeToggle) {
555
  darkModeToggle.addEventListener('change', function() {
556
  if (this.checked) {
@@ -561,8 +847,8 @@
561
  });
562
  }
563
 
564
- // Password visibility toggle
565
- document.querySelectorAll('[type="password"]').forEach(passwordInput => {
566
  const eyeButton = passwordInput.nextElementSibling;
567
  if (eyeButton && eyeButton.classList.contains('fa-eye')) {
568
  eyeButton.addEventListener('click', function() {
@@ -579,6 +865,22 @@
579
  });
580
  }
581
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
582
  });
583
  </script>
584
  <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=gallabs/msidentity-profile" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MS Identity - Gerenciamento de Usuários</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
  <script>
 
67
  }
68
  </style>
69
  </head>
70
+ <body class="bg-dark-900 text-gray-200 min-h-screen">
71
  <div class="container mx-auto px-4 py-8">
72
+ <!-- Cabeçalho -->
73
  <div class="flex justify-between items-center mb-8">
74
  <div>
75
  <h1 class="text-3xl font-bold">MS Identity</h1>
76
+ <p class="text-gray-400">Portal de Gerenciamento de Usuários</p>
77
  </div>
78
  <div class="flex items-center space-x-4">
79
+ <button class="p-2 rounded-full bg-dark-800 hover:bg-gray-700">
80
+ <i class="fas fa-bell text-gray-300"></i>
81
+ <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
82
  </button>
83
  <div class="flex items-center space-x-2">
84
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Perfil" class="w-10 h-10 rounded-full">
85
  <span class="font-medium">Admin User</span>
86
  </div>
87
  </div>
88
  </div>
89
 
90
+ <!-- Cartão de Perfil do Usuário -->
91
+ <div class="bg-dark-800 rounded-xl card-shadow mb-8 overflow-hidden">
92
  <div class="gradient-bg h-32"></div>
93
  <div class="px-6 pb-6 relative">
94
  <div class="avatar-upload absolute -top-16 left-6">
95
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Perfil" class="w-32 h-32 rounded-full border-4 border-dark-800">
96
  <input type="file" id="avatar" class="hidden">
97
  <label for="avatar" class="absolute bottom-2 right-2 bg-primary-500 text-white p-2 rounded-full cursor-pointer hover:bg-primary-600">
98
  <i class="fas fa-camera"></i>
 
102
  <div class="flex justify-end mt-4">
103
  <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg flex items-center space-x-2">
104
  <i class="fas fa-edit"></i>
105
+ <span>Editar Perfil</span>
106
  </button>
107
  </div>
108
 
109
  <div class="mt-8">
110
+ <h2 class="text-2xl font-bold">João Silva</h2>
111
+ <p class="text-gray-400">joao.silva@exemplo.com</p>
112
  <div class="flex items-center mt-2">
113
+ <span class="bg-green-900 text-green-200 px-2 py-1 rounded text-xs">Ativo</span>
114
+ <span class="ml-2 text-gray-400 text-sm">Último login: 2 horas atrás</span>
115
  </div>
116
  </div>
117
  </div>
118
  </div>
119
 
120
+ <!-- Abas -->
121
+ <div class="mb-8 border-b border-gray-700">
122
  <ul class="flex flex-wrap -mb-px" id="profileTabs">
123
  <li class="mr-2">
124
  <button class="inline-block p-4 font-medium tab-active" id="personal-tab" data-tab="personal">
125
+ <i class="fas fa-user mr-2"></i>Informações Pessoais
126
  </button>
127
  </li>
128
  <li class="mr-2">
129
+ <button class="inline-block p-4 font-medium text-gray-400 hover:text-gray-300" id="security-tab" data-tab="security">
130
+ <i class="fas fa-shield-alt mr-2"></i>Segurança
131
+ </button>
132
+ </li>
133
+ <li class="mr-2">
134
+ <button class="inline-block p-4 font-medium text-gray-400 hover:text-gray-300" id="notifications-tab" data-tab="notifications">
135
+ <i class="fas fa-bell mr-2"></i>Notificações
136
+ </button>
137
+ </li>
138
+ <li class="mr-2">
139
+ <button class="inline-block p-4 font-medium text-gray-400 hover:text-gray-300" id="tasks-tab" data-tab="tasks">
140
+ <i class="fas fa-tasks mr-2"></i>Tarefas
141
  </button>
142
  </li>
143
  </ul>
144
  </div>
145
 
146
+ <!-- Conteúdo das Abas -->
147
  <div id="personal-content" class="tab-content active">
148
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
149
+ <!-- Informações Pessoais -->
150
+ <div class="bg-dark-800 rounded-xl card-shadow p-6">
151
  <h3 class="text-xl font-bold mb-4 flex items-center">
152
+ <i class="fas fa-info-circle mr-2 text-primary-500"></i> Informações Básicas
153
  </h3>
154
 
155
  <div class="space-y-4">
156
  <div>
157
+ <label class="block text-sm font-medium text-gray-400 mb-1">Nome Completo</label>
158
+ <p class="font-medium">João Silva</p>
159
  </div>
160
  <div>
161
+ <label class="block text-sm font-medium text-gray-400 mb-1">Email</label>
162
+ <p class="font-medium">joao.silva@exemplo.com</p>
163
+ <span class="text-xs text-green-400 flex items-center mt-1">
164
+ <i class="fas fa-check-circle mr-1"></i> Verificado
165
  </span>
166
  </div>
167
  <div>
168
+ <label class="block text-sm font-medium text-gray-400 mb-1">Telefone</label>
169
  <div class="flex items-center justify-between">
170
+ <p class="font-medium">+55 (11) 98765-4321</p>
171
  <button class="text-primary-500 hover:text-primary-600 text-sm font-medium">
172
+ Alterar
173
  </button>
174
  </div>
175
  </div>
176
  <div>
177
+ <label class="block text-sm font-medium text-gray-400 mb-1">Data de Nascimento</label>
178
+ <p class="font-medium">15 de Janeiro, 1985</p>
179
  </div>
180
  </div>
181
 
182
  <button class="mt-6 px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg flex items-center space-x-2">
183
  <i class="fas fa-save mr-2"></i>
184
+ <span>Salvar Alterações</span>
185
  </button>
186
  </div>
187
 
188
+ <!-- Endereço -->
189
+ <div class="bg-dark-800 rounded-xl card-shadow p-6">
190
  <h3 class="text-xl font-bold mb-4 flex items-center">
191
+ <i class="fas fa-map-marker-alt mr-2 text-primary-500"></i> Endereço
192
  </h3>
193
 
194
  <div class="space-y-4">
195
  <div>
196
+ <label class="block text-sm font-medium text-gray-400 mb-1">Rua</label>
197
+ <p class="font-medium">Rua Principal, 123</p>
198
  </div>
199
  <div>
200
+ <label class="block text-sm font-medium text-gray-400 mb-1">Cidade</label>
201
+ <p class="font-medium">São Paulo</p>
202
  </div>
203
  <div>
204
+ <label class="block text-sm font-medium text-gray-400 mb-1">Estado</label>
205
+ <p class="font-medium">SP</p>
206
  </div>
207
  <div>
208
+ <label class="block text-sm font-medium text-gray-400 mb-1">CEP</label>
209
+ <p class="font-medium">01234-567</p>
210
  </div>
211
  <div>
212
+ <label class="block text-sm font-medium text-gray-400 mb-1">País</label>
213
+ <p class="font-medium">Brasil</p>
214
  </div>
215
  </div>
216
 
217
  <button class="mt-6 px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg flex items-center space-x-2">
218
  <i class="fas fa-save mr-2"></i>
219
+ <span>Salvar Alterações</span>
220
  </button>
221
  </div>
222
 
223
+ <!-- Redes Sociais -->
224
+ <div class="bg-dark-800 rounded-xl card-shadow p-6">
225
  <h3 class="text-xl font-bold mb-4 flex items-center">
226
+ <i class="fas fa-share-alt mr-2 text-primary-500"></i> Redes Sociais
227
  </h3>
228
 
229
  <div class="space-y-4">
230
+ <div class="flex items-center justify-between p-3 bg-dark-700 rounded-lg">
231
  <div class="flex items-center">
232
  <div class="w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center">
233
  <i class="fab fa-facebook-f"></i>
234
  </div>
235
  <div class="ml-3">
236
  <p class="font-medium">Facebook</p>
237
+ <p class="text-sm text-gray-400">Conectado</p>
238
  </div>
239
  </div>
240
  <button class="text-red-500 hover:text-red-600 text-sm font-medium">
241
+ Desconectar
242
  </button>
243
  </div>
244
 
245
+ <div class="flex items-center justify-between p-3 bg-dark-700 rounded-lg">
246
  <div class="flex items-center">
247
  <div class="w-10 h-10 rounded-full bg-red-500 text-white flex items-center justify-center">
248
  <i class="fab fa-google"></i>
249
  </div>
250
  <div class="ml-3">
251
  <p class="font-medium">Google</p>
252
+ <p class="text-sm text-gray-400">Conectado</p>
253
  </div>
254
  </div>
255
  <button class="text-red-500 hover:text-red-600 text-sm font-medium">
256
+ Desconectar
257
  </button>
258
  </div>
259
 
260
+ <div class="flex items-center justify-between p-3 bg-dark-700 rounded-lg">
261
  <div class="flex items-center">
262
  <div class="w-10 h-10 rounded-full bg-blue-400 text-white flex items-center justify-center">
263
  <i class="fab fa-twitter"></i>
264
  </div>
265
  <div class="ml-3">
266
  <p class="font-medium">Twitter</p>
267
+ <p class="text-sm text-gray-400">Não conectado</p>
268
  </div>
269
  </div>
270
  <button class="text-primary-500 hover:text-primary-600 text-sm font-medium">
271
+ Conectar
272
  </button>
273
  </div>
274
 
275
+ <div class="flex items-center justify-between p-3 bg-dark-700 rounded-lg">
276
  <div class="flex items-center">
277
  <div class="w-10 h-10 rounded-full bg-gray-800 text-white flex items-center justify-center">
278
  <i class="fab fa-github"></i>
279
  </div>
280
  <div class="ml-3">
281
  <p class="font-medium">GitHub</p>
282
+ <p class="text-sm text-gray-400">Não conectado</p>
283
  </div>
284
  </div>
285
  <button class="text-primary-500 hover:text-primary-600 text-sm font-medium">
286
+ Conectar
287
  </button>
288
  </div>
289
  </div>
290
  </div>
291
 
292
+ <!-- Preferências -->
293
+ <div class="bg-dark-800 rounded-xl card-shadow p-6">
294
  <h3 class="text-xl font-bold mb-4 flex items-center">
295
+ <i class="fas fa-cog mr-2 text-primary-500"></i> Preferências
296
  </h3>
297
 
298
  <div class="space-y-4">
299
  <div class="flex items-center justify-between">
300
  <div>
301
+ <p class="font-medium">Modo Escuro</p>
302
+ <p class="text-sm text-gray-400">Alternar entre tema claro e escuro</p>
303
  </div>
304
  <label class="relative inline-flex items-center cursor-pointer">
305
  <input type="checkbox" class="sr-only peer" checked>
306
+ <div class="w-11 h-6 bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-600 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-500"></div>
307
  </label>
308
  </div>
309
 
310
  <div class="flex items-center justify-between">
311
  <div>
312
+ <p class="font-medium">Notificações por Email</p>
313
+ <p class="text-sm text-gray-400">Receber notificações por email</p>
314
  </div>
315
  <label class="relative inline-flex items-center cursor-pointer">
316
  <input type="checkbox" class="sr-only peer" checked>
317
+ <div class="w-11 h-6 bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-600 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-500"></div>
318
  </label>
319
  </div>
320
 
321
  <div class="flex items-center justify-between">
322
  <div>
323
+ <p class="font-medium">Notificações por SMS</p>
324
+ <p class="text-sm text-gray-400">Receber notificações por SMS</p>
325
  </div>
326
  <label class="relative inline-flex items-center cursor-pointer">
327
  <input type="checkbox" class="sr-only peer">
328
+ <div class="w-11 h-6 bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-600 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-500"></div>
329
  </label>
330
  </div>
331
 
332
  <div class="flex items-center justify-between">
333
  <div>
334
+ <p class="font-medium">Idioma</p>
335
+ <p class="text-sm text-gray-400">Idioma da interface</p>
336
+ </div>
337
+ <select class="bg-dark-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-32 p-2">
338
+ <option>Português</option>
339
+ <option selected>Inglês</option>
340
+ <option>Espanhol</option>
341
+ <option>Francês</option>
342
  </select>
343
  </div>
344
  </div>
 
348
 
349
  <div id="security-content" class="tab-content hidden">
350
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
351
+ <!-- Senha -->
352
+ <div class="bg-dark-800 rounded-xl card-shadow p-6">
353
  <h3 class="text-xl font-bold mb-4 flex items-center">
354
+ <i class="fas fa-key mr-2 text-primary-500"></i> Senha
355
  </h3>
356
 
357
  <div class="space-y-4">
358
  <div>
359
+ <label class="block text-sm font-medium text-gray-400 mb-1">Senha Atual</label>
360
  <div class="relative">
361
+ <input type="password" class="bg-dark-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5" placeholder="••••••••">
362
+ <button class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-300">
363
  <i class="fas fa-eye"></i>
364
  </button>
365
  </div>
366
  </div>
367
 
368
  <div>
369
+ <label class="block text-sm font-medium text-gray-400 mb-1">Nova Senha</label>
370
  <div class="relative">
371
+ <input type="password" class="bg-dark-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5" placeholder="••••••••">
372
+ <button class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-300">
373
  <i class="fas fa-eye"></i>
374
  </button>
375
  </div>
376
+ <p class="mt-1 text-xs text-gray-400">Deve ter pelo menos 8 caracteres</p>
377
  </div>
378
 
379
  <div>
380
+ <label class="block text-sm font-medium text-gray-400 mb-1">Confirmar Nova Senha</label>
381
  <div class="relative">
382
+ <input type="password" class="bg-dark-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5" placeholder="••••••••">
383
+ <button class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-300">
384
  <i class="fas fa-eye"></i>
385
  </button>
386
  </div>
 
389
 
390
  <button class="mt-6 px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg flex items-center space-x-2">
391
  <i class="fas fa-save mr-2"></i>
392
+ <span>Alterar Senha</span>
393
  </button>
394
  </div>
395
 
396
+ <!-- Autenticação de Dois Fatores -->
397
+ <div class="bg-dark-800 rounded-xl card-shadow p-6">
398
  <h3 class="text-xl font-bold mb-4 flex items-center">
399
+ <i class="fas fa-lock mr-2 text-primary-500"></i> Autenticação de Dois Fatores
400
  </h3>
401
 
402
  <div class="space-y-6">
403
  <div class="flex items-start">
404
  <div class="flex items-center h-5">
405
+ <input id="2fa-toggle" type="checkbox" class="w-4 h-4 border border-gray-600 rounded bg-dark-700 focus:ring-3 focus:ring-primary-600 ring-offset-gray-800">
406
  </div>
407
+ <label for="2fa-toggle" class="ml-3 text-sm font-medium text-gray-300">
408
+ <span class="block font-semibold">Ativar Autenticação de Dois Fatores</span>
409
+ <span class="block text-gray-400 mt-1">Adicione uma camada extra de segurança à sua conta exigindo mais do que apenas uma senha para fazer login.</span>
410
  </label>
411
  </div>
412
 
413
+ <div class="border-t border-gray-700 pt-4">
414
+ <h4 class="font-semibold mb-3">Métodos de Autenticação</h4>
415
 
416
+ <div class="flex items-center justify-between p-3 bg-dark-700 rounded-lg mb-3">
417
  <div class="flex items-center">
418
  <div class="w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center">
419
  <i class="fas fa-mobile-alt"></i>
420
  </div>
421
  <div class="ml-3">
422
+ <p class="font-medium">Aplicativo Autenticador</p>
423
+ <p class="text-sm text-gray-400">Configure usando um aplicativo como Google Authenticator ou Microsoft Authenticator</p>
424
  </div>
425
  </div>
426
  <button class="text-primary-500 hover:text-primary-600 text-sm font-medium">
427
+ Configurar
428
  </button>
429
  </div>
430
 
431
+ <div class="flex items-center justify-between p-3 bg-dark-700 rounded-lg">
432
  <div class="flex items-center">
433
  <div class="w-10 h-10 rounded-full bg-green-500 text-white flex items-center justify-center">
434
  <i class="fas fa-sms"></i>
435
  </div>
436
  <div class="ml-3">
437
+ <p class="font-medium">Mensagem SMS</p>
438
+ <p class="text-sm text-gray-400">Use seu celular para receber códigos de verificação</p>
439
  </div>
440
  </div>
441
  <button class="text-primary-500 hover:text-primary-600 text-sm font-medium">
442
+ Configurar
443
  </button>
444
  </div>
445
  </div>
446
  </div>
447
  </div>
448
 
449
+ <!-- Atividade de Login -->
450
+ <div class="bg-dark-800 rounded-xl card-shadow p-6">
451
  <h3 class="text-xl font-bold mb-4 flex items-center">
452
+ <i class="fas fa-history mr-2 text-primary-500"></i> Atividade de Login
453
  </h3>
454
 
455
  <div class="space-y-4">
456
+ <div class="flex items-center justify-between p-3 bg-dark-700 rounded-lg">
457
  <div>
458
+ <p class="font-medium">São Paulo, BR</p>
459
+ <p class="text-sm text-gray-400">Chrome no Windows • 2 horas atrás</p>
460
  </div>
461
+ <span class="bg-green-900 text-green-200 px-2 py-1 rounded text-xs">Atual</span>
462
  </div>
463
 
464
+ <div class="flex items-center justify-between p-3 bg-dark-700 rounded-lg">
465
  <div>
466
+ <p class="font-medium">Rio de Janeiro, BR</p>
467
+ <p class="text-sm text-gray-400">Safari no Mac • 1 dia atrás</p>
468
  </div>
469
  </div>
470
 
471
+ <div class="flex items-center justify-between p-3 bg-dark-700 rounded-lg">
472
  <div>
473
+ <p class="font-medium">Nova York, EUA</p>
474
+ <p class="text-sm text-gray-400">Firefox no Linux • 1 semana atrás</p>
475
  </div>
476
  <button class="text-red-500 hover:text-red-600 text-sm font-medium">
477
+ Revogar
478
  </button>
479
  </div>
480
 
481
+ <div class="flex items-center justify-between p-3 bg-dark-700 rounded-lg">
482
  <div>
483
+ <p class="font-medium">Tóquio, Japão</p>
484
+ <p class="text-sm text-gray-400">Chrome no Android • 2 semanas atrás</p>
485
  </div>
486
  <button class="text-red-500 hover:text-red-600 text-sm font-medium">
487
+ Revogar
488
  </button>
489
  </div>
490
  </div>
491
 
492
  <button class="mt-4 text-primary-500 hover:text-primary-600 text-sm font-medium">
493
+ Ver toda atividade
494
  </button>
495
  </div>
496
 
497
+ <!-- Perguntas de Segurança -->
498
+ <div class="bg-dark-800 rounded-xl card-shadow p-6">
499
  <h3 class="text-xl font-bold mb-4 flex items-center">
500
+ <i class="fas fa-question-circle mr-2 text-primary-500"></i> Perguntas de Segurança
501
  </h3>
502
 
503
  <div class="space-y-4">
504
  <div>
505
+ <label class="block text-sm font-medium text-gray-400 mb-1">Pergunta 1</label>
506
+ <select class="bg-dark-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 mb-2">
507
+ <option selected>Qual era o nome do seu primeiro animal de estimação?</option>
508
+ <option>Qual era o nome de solteira da sua mãe?</option>
509
+ <option>Em que cidade você nasceu?</option>
510
  </select>
511
+ <input type="text" class="bg-dark-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5" placeholder="Sua resposta">
512
  </div>
513
 
514
  <div>
515
+ <label class="block text-sm font-medium text-gray-400 mb-1">Pergunta 2</label>
516
+ <select class="bg-dark-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 mb-2">
517
+ <option>Qual era o nome do seu primeiro animal de estimação?</option>
518
+ <option selected>Qual era o nome de solteira da sua mãe?</option>
519
+ <option>Em que cidade você nasceu?</option>
520
  </select>
521
+ <input type="text" class="bg-dark-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5" placeholder="Sua resposta">
522
  </div>
523
  </div>
524
 
525
  <button class="mt-6 px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg flex items-center space-x-2">
526
  <i class="fas fa-save mr-2"></i>
527
+ <span>Salvar Perguntas</span>
528
  </button>
529
  </div>
530
  </div>
531
  </div>
532
+
533
+ <!-- Nova Aba de Notificações -->
534
+ <div id="notifications-content" class="tab-content hidden">
535
+ <div class="grid grid-cols-1 gap-6">
536
+ <!-- Configurações de Notificação -->
537
+ <div class="bg-dark-800 rounded-xl card-shadow p-6">
538
+ <h3 class="text-xl font-bold mb-4 flex items-center">
539
+ <i class="fas fa-bell mr-2 text-primary-500"></i> Configurações de Notificação
540
+ </h3>
541
+
542
+ <div class="space-y-6">
543
+ <div class="flex items-start">
544
+ <div class="flex items-center h-5">
545
+ <input id="email-notifications" type="checkbox" class="w-4 h-4 border border-gray-600 rounded bg-dark-700 focus:ring-3 focus:ring-primary-600 ring-offset-gray-800" checked>
546
+ </div>
547
+ <label for="email-notifications" class="ml-3 text-sm font-medium text-gray-300">
548
+ <span class="block font-semibold">Notificações por Email</span>
549
+ <span class="block text-gray-400 mt-1">Receber notificações importantes por email</span>
550
+ </label>
551
+ </div>
552
+
553
+ <div class="flex items-start">
554
+ <div class="flex items-center h-5">
555
+ <input id="push-notifications" type="checkbox" class="w-4 h-4 border border-gray-600 rounded bg-dark-700 focus:ring-3 focus:ring-primary-600 ring-offset-gray-800" checked>
556
+ </div>
557
+ <label for="push-notifications" class="ml-3 text-sm font-medium text-gray-300">
558
+ <span class="block font-semibold">Notificações Push</span>
559
+ <span class="block text-gray-400 mt-1">Receber notificações no seu dispositivo</span>
560
+ </label>
561
+ </div>
562
+
563
+ <div class="flex items-start">
564
+ <div class="flex items-center h-5">
565
+ <input id="sms-notifications" type="checkbox" class="w-4 h-4 border border-gray-600 rounded bg-dark-700 focus:ring-3 focus:ring-primary-600 ring-offset-gray-800">
566
+ </div>
567
+ <label for="sms-notifications" class="ml-3 text-sm font-medium text-gray-300">
568
+ <span class="block font-semibold">Notificações por SMS</span>
569
+ <span class="block text-gray-400 mt-1">Receber notificações por mensagem de texto</span>
570
+ </label>
571
+ </div>
572
+ </div>
573
+ </div>
574
+
575
+ <!-- Histórico de Notificações -->
576
+ <div class="bg-dark-800 rounded-xl card-shadow p-6">
577
+ <h3 class="text-xl font-bold mb-4 flex items-center">
578
+ <i class="fas fa-history mr-2 text-primary-500"></i> Histórico de Notificações
579
+ </h3>
580
+
581
+ <div class="space-y-4">
582
+ <div class="p-4 bg-dark-700 rounded-lg flex items-start">
583
+ <div class="bg-primary-500 text-white p-2 rounded-full mr-4">
584
+ <i class="fas fa-user-shield"></i>
585
+ </div>
586
+ <div class="flex-1">
587
+ <div class="flex justify-between items-center">
588
+ <h4 class="font-semibold">Atividade suspeita detectada</h4>
589
+ <span class="text-xs text-gray-400">Hoje, 14:30</span>
590
+ </div>
591
+ <p class="text-sm text-gray-400 mt-1">Detectamos um login suspeito na sua conta a partir de um novo dispositivo.</p>
592
+ <button class="mt-2 text-primary-500 hover:text-primary-600 text-sm font-medium">
593
+ Ver detalhes
594
+ </button>
595
+ </div>
596
+ </div>
597
+
598
+ <div class="p-4 bg-dark-700 rounded-lg flex items-start">
599
+ <div class="bg-green-500 text-white p-2 rounded-full mr-4">
600
+ <i class="fas fa-check-circle"></i>
601
+ </div>
602
+ <div class="flex-1">
603
+ <div class="flex justify-between items-center">
604
+ <h4 class="font-semibold">Senha alterada com sucesso</h4>
605
+ <span class="text-xs text-gray-400">Ontem, 09:15</span>
606
+ </div>
607
+ <p class="text-sm text-gray-400 mt-1">Sua senha foi alterada com sucesso. Se você não fez essa alteração, entre em contato conosco imediatamente.</p>
608
+ </div>
609
+ </div>
610
+
611
+ <div class="p-4 bg-dark-700 rounded-lg flex items-start">
612
+ <div class="bg-blue-500 text-white p-2 rounded-full mr-4">
613
+ <i class="fas fa-info-circle"></i>
614
+ </div>
615
+ <div class="flex-1">
616
+ <div class="flex justify-between items-center">
617
+ <h4 class="font-semibold">Atualização do sistema</h4>
618
+ <span class="text-xs text-gray-400">3 dias atrás</span>
619
+ </div>
620
+ <p class="text-sm text-gray-400 mt-1">Uma nova atualização do sistema está disponível. Recomendamos que você atualize para a versão mais recente.</p>
621
+ <button class="mt-2 text-primary-500 hover:text-primary-600 text-sm font-medium">
622
+ Atualizar agora
623
+ </button>
624
+ </div>
625
+ </div>
626
+
627
+ <button class="w-full mt-4 px-4 py-2 bg-dark-700 hover:bg-dark-600 text-gray-300 rounded-lg">
628
+ Carregar mais notificações
629
+ </button>
630
+ </div>
631
+ </div>
632
+ </div>
633
+ </div>
634
+
635
+ <!-- Nova Aba de Tarefas -->
636
+ <div id="tasks-content" class="tab-content hidden">
637
+ <div class="grid grid-cols-1 gap-6">
638
+ <!-- Criar Nova Tarefa -->
639
+ <div class="bg-dark-800 rounded-xl card-shadow p-6">
640
+ <h3 class="text-xl font-bold mb-4 flex items-center">
641
+ <i class="fas fa-plus-circle mr-2 text-primary-500"></i> Criar Nova Tarefa
642
+ </h3>
643
+
644
+ <div class="space-y-4">
645
+ <div>
646
+ <label class="block text-sm font-medium text-gray-400 mb-1">Título da Tarefa</label>
647
+ <input type="text" class="bg-dark-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5" placeholder="Digite o título da tarefa">
648
+ </div>
649
+
650
+ <div>
651
+ <label class="block text-sm font-medium text-gray-400 mb-1">Descrição</label>
652
+ <textarea class="bg-dark-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5" rows="3" placeholder="Digite a descrição da tarefa"></textarea>
653
+ </div>
654
+
655
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
656
+ <div>
657
+ <label class="block text-sm font-medium text-gray-400 mb-1">Data de Vencimento</label>
658
+ <input type="date" class="bg-dark-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5">
659
+ </div>
660
+
661
+ <div>
662
+ <label class="block text-sm font-medium text-gray-400 mb-1">Prioridade</label>
663
+ <select class="bg-dark-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5">
664
+ <option>Baixa</option>
665
+ <option selected>Média</option>
666
+ <option>Alta</option>
667
+ <option>Urgente</option>
668
+ </select>
669
+ </div>
670
+ </div>
671
+
672
+ <button class="mt-4 px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg flex items-center space-x-2">
673
+ <i class="fas fa-save mr-2"></i>
674
+ <span>Criar Tarefa</span>
675
+ </button>
676
+ </div>
677
+ </div>
678
+
679
+ <!-- Lista de Tarefas -->
680
+ <div class="bg-dark-800 rounded-xl card-shadow p-6">
681
+ <h3 class="text-xl font-bold mb-4 flex items-center">
682
+ <i class="fas fa-tasks mr-2 text-primary-500"></i> Minhas Tarefas
683
+ </h3>
684
+
685
+ <div class="space-y-4">
686
+ <!-- Filtros -->
687
+ <div class="flex flex-wrap gap-2 mb-4">
688
+ <button class="px-3 py-1 bg-primary-500 text-white rounded-full text-sm">Todas</button>
689
+ <button class="px-3 py-1 bg-dark-700 hover:bg-dark-600 text-gray-300 rounded-full text-sm">Pendentes</button>
690
+ <button class="px-3 py-1 bg-dark-700 hover:bg-dark-600 text-gray-300 rounded-full text-sm">Concluídas</button>
691
+ <button class="px-3 py-1 bg-dark-700 hover:bg-dark-600 text-gray-300 rounded-full text-sm">Atrasadas</button>
692
+ </div>
693
+
694
+ <!-- Tarefas -->
695
+ <div class="space-y-3">
696
+ <!-- Tarefa 1 -->
697
+ <div class="p-4 bg-dark-700 rounded-lg border-l-4 border-red-500">
698
+ <div class="flex justify-between items-start">
699
+ <div class="flex items-start">
700
+ <input type="checkbox" class="mt-1 mr-3 w-4 h-4 border border-gray-600 rounded bg-dark-800 focus:ring-3 focus:ring-primary-600 ring-offset-gray-800">
701
+ <div>
702
+ <h4 class="font-semibold">Revisar configurações de segurança</h4>
703
+ <p class="text-sm text-gray-400 mt-1">Verificar todas as configurações de segurança e atualizar conforme necessário.</p>
704
+ <div class="flex flex-wrap gap-2 mt-2">
705
+ <span class="px-2 py-1 bg-red-900 text-red-200 rounded-full text-xs">Alta Prioridade</span>
706
+ <span class="px-2 py-1 bg-dark-600 text-gray-400 rounded-full text-xs">Vence hoje</span>
707
+ </div>
708
+ </div>
709
+ </div>
710
+ <div class="flex space-x-2">
711
+ <button class="text-gray-400 hover:text-primary-500">
712
+ <i class="fas fa-edit"></i>
713
+ </button>
714
+ <button class="text-gray-400 hover:text-red-500">
715
+ <i class="fas fa-trash-alt"></i>
716
+ </button>
717
+ </div>
718
+ </div>
719
+ </div>
720
+
721
+ <!-- Tarefa 2 -->
722
+ <div class="p-4 bg-dark-700 rounded-lg border-l-4 border-yellow-500">
723
+ <div class="flex justify-between items-start">
724
+ <div class="flex items-start">
725
+ <input type="checkbox" class="mt-1 mr-3 w-4 h-4 border border-gray-600 rounded bg-dark-800 focus:ring-3 focus:ring-primary-600 ring-offset-gray-800">
726
+ <div>
727
+ <h4 class="font-semibold">Atualizar informações do perfil</h4>
728
+ <p class="text-sm text-gray-400 mt-1">Adicionar foto e atualizar informações pessoais no perfil.</p>
729
+ <div class="flex flex-wrap gap-2 mt-2">
730
+ <span class="px-2 py-1 bg-yellow-900 text-yellow-200 rounded-full text-xs">Média Prioridade</span>
731
+ <span class="px-2 py-1 bg-dark-600 text-gray-400 rounded-full text-xs">Vence em 2 dias</span>
732
+ </div>
733
+ </div>
734
+ </div>
735
+ <div class="flex space-x-2">
736
+ <button class="text-gray-400 hover:text-primary-500">
737
+ <i class="fas fa-edit"></i>
738
+ </button>
739
+ <button class="text-gray-400 hover:text-red-500">
740
+ <i class="fas fa-trash-alt"></i>
741
+ </button>
742
+ </div>
743
+ </div>
744
+ </div>
745
+
746
+ <!-- Tarefa 3 -->
747
+ <div class="p-4 bg-dark-700 rounded-lg border-l-4 border-green-500 opacity-70">
748
+ <div class="flex justify-between items-start">
749
+ <div class="flex items-start">
750
+ <input type="checkbox" class="mt-1 mr-3 w-4 h-4 border border-gray-600 rounded bg-dark-800 focus:ring-3 focus:ring-primary-600 ring-offset-gray-800" checked>
751
+ <div>
752
+ <h4 class="font-semibold line-through">Configurar autenticação de dois fatores</h4>
753
+ <p class="text-sm text-gray-400 mt-1 line-through">Ativar autenticação de dois fatores para maior segurança.</p>
754
+ <div class="flex flex-wrap gap-2 mt-2">
755
+ <span class="px-2 py-1 bg-green-900 text-green-200 rounded-full text-xs">Concluída</span>
756
+ <span class="px-2 py-1 bg-dark-600 text-gray-400 rounded-full text-xs">Concluída ontem</span>
757
+ </div>
758
+ </div>
759
+ </div>
760
+ <div class="flex space-x-2">
761
+ <button class="text-gray-400 hover:text-primary-500">
762
+ <i class="fas fa-edit"></i>
763
+ </button>
764
+ <button class="text-gray-400 hover:text-red-500">
765
+ <i class="fas fa-trash-alt"></i>
766
+ </button>
767
+ </div>
768
+ </div>
769
+ </div>
770
+
771
+ <!-- Tarefa 4 -->
772
+ <div class="p-4 bg-dark-700 rounded-lg border-l-4 border-blue-500">
773
+ <div class="flex justify-between items-start">
774
+ <div class="flex items-start">
775
+ <input type="checkbox" class="mt-1 mr-3 w-4 h-4 border border-gray-600 rounded bg-dark-800 focus:ring-3 focus:ring-primary-600 ring-offset-gray-800">
776
+ <div>
777
+ <h4 class="font-semibold">Revisar notificações pendentes</h4>
778
+ <p class="text-sm text-gray-400 mt-1">Verificar todas as notificações não lidas e tomar as ações necessárias.</p>
779
+ <div class="flex flex-wrap gap-2 mt-2">
780
+ <span class="px-2 py-1 bg-blue-900 text-blue-200 rounded-full text-xs">Baixa Prioridade</span>
781
+ <span class="px-2 py-1 bg-dark-600 text-gray-400 rounded-full text-xs">Sem data de vencimento</span>
782
+ </div>
783
+ </div>
784
+ </div>
785
+ <div class="flex space-x-2">
786
+ <button class="text-gray-400 hover:text-primary-500">
787
+ <i class="fas fa-edit"></i>
788
+ </button>
789
+ <button class="text-gray-400 hover:text-red-500">
790
+ <i class="fas fa-trash-alt"></i>
791
+ </button>
792
+ </div>
793
+ </div>
794
+ </div>
795
+ </div>
796
+
797
+ <div class="flex justify-between items-center mt-6">
798
+ <span class="text-sm text-gray-400">Mostrando 4 de 12 tarefas</span>
799
+ <button class="px-4 py-2 bg-dark-700 hover:bg-dark-600 text-gray-300 rounded-lg">
800
+ Carregar mais tarefas
801
+ </button>
802
+ </div>
803
+ </div>
804
+ </div>
805
+ </div>
806
+ </div>
807
  </div>
808
 
809
  <script>
810
+ // Função para alternar entre abas
811
  document.addEventListener('DOMContentLoaded', function() {
812
  const tabs = document.querySelectorAll('[data-tab]');
813
 
 
815
  tab.addEventListener('click', function() {
816
  const tabId = this.getAttribute('data-tab');
817
 
818
+ // Atualizar aba ativa
819
  document.querySelectorAll('[data-tab]').forEach(t => {
820
  t.classList.remove('tab-active');
821
+ t.classList.add('text-gray-400', 'hover:text-gray-300');
822
  });
823
 
824
  this.classList.add('tab-active');
825
+ this.classList.remove('text-gray-400', 'hover:text-gray-300');
826
 
827
+ // Atualizar conteúdo ativo
828
  document.querySelectorAll('.tab-content').forEach(content => {
829
  content.classList.add('hidden');
830
  content.classList.remove('active');
 
835
  });
836
  });
837
 
838
+ // Alternar modo escuro (já está ativo por padrão)
839
+ const darkModeToggle = document.querySelector('input[type="checkbox"]');
840
  if (darkModeToggle) {
841
  darkModeToggle.addEventListener('change', function() {
842
  if (this.checked) {
 
847
  });
848
  }
849
 
850
+ // Alternar visibilidade da senha
851
+ document.querySelectorAll('input[type="password"]').forEach(passwordInput => {
852
  const eyeButton = passwordInput.nextElementSibling;
853
  if (eyeButton && eyeButton.classList.contains('fa-eye')) {
854
  eyeButton.addEventListener('click', function() {
 
865
  });
866
  }
867
  });
868
+
869
+ // Marcar/desmarcar tarefas
870
+ document.querySelectorAll('#tasks-content input[type="checkbox"]').forEach(checkbox => {
871
+ checkbox.addEventListener('change', function() {
872
+ const taskItem = this.closest('.bg-dark-700');
873
+ if (this.checked) {
874
+ taskItem.classList.add('opacity-70');
875
+ taskItem.querySelector('h4').classList.add('line-through');
876
+ taskItem.querySelector('p').classList.add('line-through');
877
+ } else {
878
+ taskItem.classList.remove('opacity-70');
879
+ taskItem.querySelector('h4').classList.remove('line-through');
880
+ taskItem.querySelector('p').classList.remove('line-through');
881
+ }
882
+ });
883
+ });
884
  });
885
  </script>
886
  <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=gallabs/msidentity-profile" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
prompts.txt CHANGED
@@ -0,0 +1 @@
 
 
1
+ Traduza para o português do brasil. Mude o tema para Dark Mode, crie mais uma aba para notificações e tarefas.