Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MS Identity - Gerenciamento de Usuários</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| dark: { | |
| 800: '#1e293b', | |
| 900: '#0f172a', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #0ea5e9 0%, #0c4a6e 100%); | |
| } | |
| .card-shadow { | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1); | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #0ea5e9; | |
| color: #0ea5e9; | |
| } | |
| .avatar-upload { | |
| position: relative; | |
| overflow: hidden; | |
| display: inline-block; | |
| } | |
| .avatar-upload input[type="file"] { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| opacity: 0; | |
| width: 100%; | |
| height: 100%; | |
| cursor: pointer; | |
| } | |
| .toggle-checkbox:checked { | |
| right: 0; | |
| border-color: #0ea5e9; | |
| } | |
| .toggle-checkbox:checked + .toggle-label { | |
| background-color: #0ea5e9; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-dark-900 text-gray-200 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Cabeçalho --> | |
| <div class="flex justify-between items-center mb-8"> | |
| <div> | |
| <h1 class="text-3xl font-bold">MS Identity</h1> | |
| <p class="text-gray-400">Portal de Gerenciamento de Usuários</p> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-full bg-dark-800 hover:bg-gray-700"> | |
| <i class="fas fa-bell text-gray-300"></i> | |
| <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> | |
| </button> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Perfil" class="w-10 h-10 rounded-full"> | |
| <span class="font-medium">Admin User</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cartão de Perfil do Usuário --> | |
| <div class="bg-dark-800 rounded-xl card-shadow mb-8 overflow-hidden"> | |
| <div class="gradient-bg h-32"></div> | |
| <div class="px-6 pb-6 relative"> | |
| <div class="avatar-upload absolute -top-16 left-6"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Perfil" class="w-32 h-32 rounded-full border-4 border-dark-800"> | |
| <input type="file" id="avatar" class="hidden"> | |
| <label for="avatar" class="absolute bottom-2 right-2 bg-primary-500 text-white p-2 rounded-full cursor-pointer hover:bg-primary-600"> | |
| <i class="fas fa-camera"></i> | |
| </label> | |
| </div> | |
| <div class="flex justify-end mt-4"> | |
| <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg flex items-center space-x-2"> | |
| <i class="fas fa-edit"></i> | |
| <span>Editar Perfil</span> | |
| </button> | |
| </div> | |
| <div class="mt-8"> | |
| <h2 class="text-2xl font-bold">João Silva</h2> | |
| <p class="text-gray-400">joao.silva@exemplo.com</p> | |
| <div class="flex items-center mt-2"> | |
| <span class="bg-green-900 text-green-200 px-2 py-1 rounded text-xs">Ativo</span> | |
| <span class="ml-2 text-gray-400 text-sm">Último login: 2 horas atrás</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Abas --> | |
| <div class="mb-8 border-b border-gray-700"> | |
| <ul class="flex flex-wrap -mb-px" id="profileTabs"> | |
| <li class="mr-2"> | |
| <button class="inline-block p-4 font-medium tab-active" id="personal-tab" data-tab="personal"> | |
| <i class="fas fa-user mr-2"></i>Informações Pessoais | |
| </button> | |
| </li> | |
| <li class="mr-2"> | |
| <button class="inline-block p-4 font-medium text-gray-400 hover:text-gray-300" id="security-tab" data-tab="security"> | |
| <i class="fas fa-shield-alt mr-2"></i>Segurança | |
| </button> | |
| </li> | |
| <li class="mr-2"> | |
| <button class="inline-block p-4 font-medium text-gray-400 hover:text-gray-300" id="notifications-tab" data-tab="notifications"> | |
| <i class="fas fa-bell mr-2"></i>Notificações | |
| </button> | |
| </li> | |
| <li class="mr-2"> | |
| <button class="inline-block p-4 font-medium text-gray-400 hover:text-gray-300" id="tasks-tab" data-tab="tasks"> | |
| <i class="fas fa-tasks mr-2"></i>Tarefas | |
| </button> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Conteúdo das Abas --> | |
| <div id="personal-content" class="tab-content active"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Informações Pessoais --> | |
| <div class="bg-dark-800 rounded-xl card-shadow p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-info-circle mr-2 text-primary-500"></i> Informações Básicas | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Nome Completo</label> | |
| <p class="font-medium">João Silva</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Email</label> | |
| <p class="font-medium">joao.silva@exemplo.com</p> | |
| <span class="text-xs text-green-400 flex items-center mt-1"> | |
| <i class="fas fa-check-circle mr-1"></i> Verificado | |
| </span> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Telefone</label> | |
| <div class="flex items-center justify-between"> | |
| <p class="font-medium">+55 (11) 98765-4321</p> | |
| <button class="text-primary-500 hover:text-primary-600 text-sm font-medium"> | |
| Alterar | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Data de Nascimento</label> | |
| <p class="font-medium">15 de Janeiro, 1985</p> | |
| </div> | |
| </div> | |
| <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"> | |
| <i class="fas fa-save mr-2"></i> | |
| <span>Salvar Alterações</span> | |
| </button> | |
| </div> | |
| <!-- Endereço --> | |
| <div class="bg-dark-800 rounded-xl card-shadow p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-map-marker-alt mr-2 text-primary-500"></i> Endereço | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Rua</label> | |
| <p class="font-medium">Rua Principal, 123</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Cidade</label> | |
| <p class="font-medium">São Paulo</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Estado</label> | |
| <p class="font-medium">SP</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">CEP</label> | |
| <p class="font-medium">01234-567</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">País</label> | |
| <p class="font-medium">Brasil</p> | |
| </div> | |
| </div> | |
| <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"> | |
| <i class="fas fa-save mr-2"></i> | |
| <span>Salvar Alterações</span> | |
| </button> | |
| </div> | |
| <!-- Redes Sociais --> | |
| <div class="bg-dark-800 rounded-xl card-shadow p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-share-alt mr-2 text-primary-500"></i> Redes Sociais | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between p-3 bg-dark-700 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center"> | |
| <i class="fab fa-facebook-f"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-medium">Facebook</p> | |
| <p class="text-sm text-gray-400">Conectado</p> | |
| </div> | |
| </div> | |
| <button class="text-red-500 hover:text-red-600 text-sm font-medium"> | |
| Desconectar | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-dark-700 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-red-500 text-white flex items-center justify-center"> | |
| <i class="fab fa-google"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-medium">Google</p> | |
| <p class="text-sm text-gray-400">Conectado</p> | |
| </div> | |
| </div> | |
| <button class="text-red-500 hover:text-red-600 text-sm font-medium"> | |
| Desconectar | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-dark-700 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-blue-400 text-white flex items-center justify-center"> | |
| <i class="fab fa-twitter"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-medium">Twitter</p> | |
| <p class="text-sm text-gray-400">Não conectado</p> | |
| </div> | |
| </div> | |
| <button class="text-primary-500 hover:text-primary-600 text-sm font-medium"> | |
| Conectar | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-dark-700 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-800 text-white flex items-center justify-center"> | |
| <i class="fab fa-github"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-medium">GitHub</p> | |
| <p class="text-sm text-gray-400">Não conectado</p> | |
| </div> | |
| </div> | |
| <button class="text-primary-500 hover:text-primary-600 text-sm font-medium"> | |
| Conectar | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Preferências --> | |
| <div class="bg-dark-800 rounded-xl card-shadow p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-cog mr-2 text-primary-500"></i> Preferências | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="font-medium">Modo Escuro</p> | |
| <p class="text-sm text-gray-400">Alternar entre tema claro e escuro</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <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> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="font-medium">Notificações por Email</p> | |
| <p class="text-sm text-gray-400">Receber notificações por email</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <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> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="font-medium">Notificações por SMS</p> | |
| <p class="text-sm text-gray-400">Receber notificações por SMS</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer"> | |
| <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> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="font-medium">Idioma</p> | |
| <p class="text-sm text-gray-400">Idioma da interface</p> | |
| </div> | |
| <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"> | |
| <option>Português</option> | |
| <option selected>Inglês</option> | |
| <option>Espanhol</option> | |
| <option>Francês</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="security-content" class="tab-content hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Senha --> | |
| <div class="bg-dark-800 rounded-xl card-shadow p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-key mr-2 text-primary-500"></i> Senha | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Senha Atual</label> | |
| <div class="relative"> | |
| <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="••••••••"> | |
| <button class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-300"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Nova Senha</label> | |
| <div class="relative"> | |
| <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="••••••••"> | |
| <button class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-300"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| <p class="mt-1 text-xs text-gray-400">Deve ter pelo menos 8 caracteres</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Confirmar Nova Senha</label> | |
| <div class="relative"> | |
| <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="••••••••"> | |
| <button class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-300"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <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"> | |
| <i class="fas fa-save mr-2"></i> | |
| <span>Alterar Senha</span> | |
| </button> | |
| </div> | |
| <!-- Autenticação de Dois Fatores --> | |
| <div class="bg-dark-800 rounded-xl card-shadow p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-lock mr-2 text-primary-500"></i> Autenticação de Dois Fatores | |
| </h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <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"> | |
| </div> | |
| <label for="2fa-toggle" class="ml-3 text-sm font-medium text-gray-300"> | |
| <span class="block font-semibold">Ativar Autenticação de Dois Fatores</span> | |
| <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> | |
| </label> | |
| </div> | |
| <div class="border-t border-gray-700 pt-4"> | |
| <h4 class="font-semibold mb-3">Métodos de Autenticação</h4> | |
| <div class="flex items-center justify-between p-3 bg-dark-700 rounded-lg mb-3"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-medium">Aplicativo Autenticador</p> | |
| <p class="text-sm text-gray-400">Configure usando um aplicativo como Google Authenticator ou Microsoft Authenticator</p> | |
| </div> | |
| </div> | |
| <button class="text-primary-500 hover:text-primary-600 text-sm font-medium"> | |
| Configurar | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-dark-700 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-green-500 text-white flex items-center justify-center"> | |
| <i class="fas fa-sms"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-medium">Mensagem SMS</p> | |
| <p class="text-sm text-gray-400">Use seu celular para receber códigos de verificação</p> | |
| </div> | |
| </div> | |
| <button class="text-primary-500 hover:text-primary-600 text-sm font-medium"> | |
| Configurar | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Atividade de Login --> | |
| <div class="bg-dark-800 rounded-xl card-shadow p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-history mr-2 text-primary-500"></i> Atividade de Login | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between p-3 bg-dark-700 rounded-lg"> | |
| <div> | |
| <p class="font-medium">São Paulo, BR</p> | |
| <p class="text-sm text-gray-400">Chrome no Windows • 2 horas atrás</p> | |
| </div> | |
| <span class="bg-green-900 text-green-200 px-2 py-1 rounded text-xs">Atual</span> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-dark-700 rounded-lg"> | |
| <div> | |
| <p class="font-medium">Rio de Janeiro, BR</p> | |
| <p class="text-sm text-gray-400">Safari no Mac • 1 dia atrás</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-dark-700 rounded-lg"> | |
| <div> | |
| <p class="font-medium">Nova York, EUA</p> | |
| <p class="text-sm text-gray-400">Firefox no Linux • 1 semana atrás</p> | |
| </div> | |
| <button class="text-red-500 hover:text-red-600 text-sm font-medium"> | |
| Revogar | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-dark-700 rounded-lg"> | |
| <div> | |
| <p class="font-medium">Tóquio, Japão</p> | |
| <p class="text-sm text-gray-400">Chrome no Android • 2 semanas atrás</p> | |
| </div> | |
| <button class="text-red-500 hover:text-red-600 text-sm font-medium"> | |
| Revogar | |
| </button> | |
| </div> | |
| </div> | |
| <button class="mt-4 text-primary-500 hover:text-primary-600 text-sm font-medium"> | |
| Ver toda atividade | |
| </button> | |
| </div> | |
| <!-- Perguntas de Segurança --> | |
| <div class="bg-dark-800 rounded-xl card-shadow p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-question-circle mr-2 text-primary-500"></i> Perguntas de Segurança | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Pergunta 1</label> | |
| <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"> | |
| <option selected>Qual era o nome do seu primeiro animal de estimação?</option> | |
| <option>Qual era o nome de solteira da sua mãe?</option> | |
| <option>Em que cidade você nasceu?</option> | |
| </select> | |
| <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"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Pergunta 2</label> | |
| <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"> | |
| <option>Qual era o nome do seu primeiro animal de estimação?</option> | |
| <option selected>Qual era o nome de solteira da sua mãe?</option> | |
| <option>Em que cidade você nasceu?</option> | |
| </select> | |
| <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"> | |
| </div> | |
| </div> | |
| <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"> | |
| <i class="fas fa-save mr-2"></i> | |
| <span>Salvar Perguntas</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Nova Aba de Notificações --> | |
| <div id="notifications-content" class="tab-content hidden"> | |
| <div class="grid grid-cols-1 gap-6"> | |
| <!-- Configurações de Notificação --> | |
| <div class="bg-dark-800 rounded-xl card-shadow p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-bell mr-2 text-primary-500"></i> Configurações de Notificação | |
| </h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <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> | |
| </div> | |
| <label for="email-notifications" class="ml-3 text-sm font-medium text-gray-300"> | |
| <span class="block font-semibold">Notificações por Email</span> | |
| <span class="block text-gray-400 mt-1">Receber notificações importantes por email</span> | |
| </label> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <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> | |
| </div> | |
| <label for="push-notifications" class="ml-3 text-sm font-medium text-gray-300"> | |
| <span class="block font-semibold">Notificações Push</span> | |
| <span class="block text-gray-400 mt-1">Receber notificações no seu dispositivo</span> | |
| </label> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <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"> | |
| </div> | |
| <label for="sms-notifications" class="ml-3 text-sm font-medium text-gray-300"> | |
| <span class="block font-semibold">Notificações por SMS</span> | |
| <span class="block text-gray-400 mt-1">Receber notificações por mensagem de texto</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Histórico de Notificações --> | |
| <div class="bg-dark-800 rounded-xl card-shadow p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-history mr-2 text-primary-500"></i> Histórico de Notificações | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="p-4 bg-dark-700 rounded-lg flex items-start"> | |
| <div class="bg-primary-500 text-white p-2 rounded-full mr-4"> | |
| <i class="fas fa-user-shield"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-semibold">Atividade suspeita detectada</h4> | |
| <span class="text-xs text-gray-400">Hoje, 14:30</span> | |
| </div> | |
| <p class="text-sm text-gray-400 mt-1">Detectamos um login suspeito na sua conta a partir de um novo dispositivo.</p> | |
| <button class="mt-2 text-primary-500 hover:text-primary-600 text-sm font-medium"> | |
| Ver detalhes | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-dark-700 rounded-lg flex items-start"> | |
| <div class="bg-green-500 text-white p-2 rounded-full mr-4"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-semibold">Senha alterada com sucesso</h4> | |
| <span class="text-xs text-gray-400">Ontem, 09:15</span> | |
| </div> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-dark-700 rounded-lg flex items-start"> | |
| <div class="bg-blue-500 text-white p-2 rounded-full mr-4"> | |
| <i class="fas fa-info-circle"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-semibold">Atualização do sistema</h4> | |
| <span class="text-xs text-gray-400">3 dias atrás</span> | |
| </div> | |
| <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> | |
| <button class="mt-2 text-primary-500 hover:text-primary-600 text-sm font-medium"> | |
| Atualizar agora | |
| </button> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 px-4 py-2 bg-dark-700 hover:bg-dark-600 text-gray-300 rounded-lg"> | |
| Carregar mais notificações | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Nova Aba de Tarefas --> | |
| <div id="tasks-content" class="tab-content hidden"> | |
| <div class="grid grid-cols-1 gap-6"> | |
| <!-- Criar Nova Tarefa --> | |
| <div class="bg-dark-800 rounded-xl card-shadow p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-plus-circle mr-2 text-primary-500"></i> Criar Nova Tarefa | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Título da Tarefa</label> | |
| <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"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Descrição</label> | |
| <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> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Data de Vencimento</label> | |
| <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"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Prioridade</label> | |
| <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"> | |
| <option>Baixa</option> | |
| <option selected>Média</option> | |
| <option>Alta</option> | |
| <option>Urgente</option> | |
| </select> | |
| </div> | |
| </div> | |
| <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"> | |
| <i class="fas fa-save mr-2"></i> | |
| <span>Criar Tarefa</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Lista de Tarefas --> | |
| <div class="bg-dark-800 rounded-xl card-shadow p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-tasks mr-2 text-primary-500"></i> Minhas Tarefas | |
| </h3> | |
| <div class="space-y-4"> | |
| <!-- Filtros --> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <button class="px-3 py-1 bg-primary-500 text-white rounded-full text-sm">Todas</button> | |
| <button class="px-3 py-1 bg-dark-700 hover:bg-dark-600 text-gray-300 rounded-full text-sm">Pendentes</button> | |
| <button class="px-3 py-1 bg-dark-700 hover:bg-dark-600 text-gray-300 rounded-full text-sm">Concluídas</button> | |
| <button class="px-3 py-1 bg-dark-700 hover:bg-dark-600 text-gray-300 rounded-full text-sm">Atrasadas</button> | |
| </div> | |
| <!-- Tarefas --> | |
| <div class="space-y-3"> | |
| <!-- Tarefa 1 --> | |
| <div class="p-4 bg-dark-700 rounded-lg border-l-4 border-red-500"> | |
| <div class="flex justify-between items-start"> | |
| <div class="flex items-start"> | |
| <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"> | |
| <div> | |
| <h4 class="font-semibold">Revisar configurações de segurança</h4> | |
| <p class="text-sm text-gray-400 mt-1">Verificar todas as configurações de segurança e atualizar conforme necessário.</p> | |
| <div class="flex flex-wrap gap-2 mt-2"> | |
| <span class="px-2 py-1 bg-red-900 text-red-200 rounded-full text-xs">Alta Prioridade</span> | |
| <span class="px-2 py-1 bg-dark-600 text-gray-400 rounded-full text-xs">Vence hoje</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-primary-500"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i class="fas fa-trash-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tarefa 2 --> | |
| <div class="p-4 bg-dark-700 rounded-lg border-l-4 border-yellow-500"> | |
| <div class="flex justify-between items-start"> | |
| <div class="flex items-start"> | |
| <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"> | |
| <div> | |
| <h4 class="font-semibold">Atualizar informações do perfil</h4> | |
| <p class="text-sm text-gray-400 mt-1">Adicionar foto e atualizar informações pessoais no perfil.</p> | |
| <div class="flex flex-wrap gap-2 mt-2"> | |
| <span class="px-2 py-1 bg-yellow-900 text-yellow-200 rounded-full text-xs">Média Prioridade</span> | |
| <span class="px-2 py-1 bg-dark-600 text-gray-400 rounded-full text-xs">Vence em 2 dias</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-primary-500"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i class="fas fa-trash-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tarefa 3 --> | |
| <div class="p-4 bg-dark-700 rounded-lg border-l-4 border-green-500 opacity-70"> | |
| <div class="flex justify-between items-start"> | |
| <div class="flex items-start"> | |
| <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> | |
| <div> | |
| <h4 class="font-semibold line-through">Configurar autenticação de dois fatores</h4> | |
| <p class="text-sm text-gray-400 mt-1 line-through">Ativar autenticação de dois fatores para maior segurança.</p> | |
| <div class="flex flex-wrap gap-2 mt-2"> | |
| <span class="px-2 py-1 bg-green-900 text-green-200 rounded-full text-xs">Concluída</span> | |
| <span class="px-2 py-1 bg-dark-600 text-gray-400 rounded-full text-xs">Concluída ontem</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-primary-500"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i class="fas fa-trash-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tarefa 4 --> | |
| <div class="p-4 bg-dark-700 rounded-lg border-l-4 border-blue-500"> | |
| <div class="flex justify-between items-start"> | |
| <div class="flex items-start"> | |
| <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"> | |
| <div> | |
| <h4 class="font-semibold">Revisar notificações pendentes</h4> | |
| <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> | |
| <div class="flex flex-wrap gap-2 mt-2"> | |
| <span class="px-2 py-1 bg-blue-900 text-blue-200 rounded-full text-xs">Baixa Prioridade</span> | |
| <span class="px-2 py-1 bg-dark-600 text-gray-400 rounded-full text-xs">Sem data de vencimento</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-primary-500"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i class="fas fa-trash-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center mt-6"> | |
| <span class="text-sm text-gray-400">Mostrando 4 de 12 tarefas</span> | |
| <button class="px-4 py-2 bg-dark-700 hover:bg-dark-600 text-gray-300 rounded-lg"> | |
| Carregar mais tarefas | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Função para alternar entre abas | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const tabs = document.querySelectorAll('[data-tab]'); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| const tabId = this.getAttribute('data-tab'); | |
| // Atualizar aba ativa | |
| document.querySelectorAll('[data-tab]').forEach(t => { | |
| t.classList.remove('tab-active'); | |
| t.classList.add('text-gray-400', 'hover:text-gray-300'); | |
| }); | |
| this.classList.add('tab-active'); | |
| this.classList.remove('text-gray-400', 'hover:text-gray-300'); | |
| // Atualizar conteúdo ativo | |
| document.querySelectorAll('.tab-content').forEach(content => { | |
| content.classList.add('hidden'); | |
| content.classList.remove('active'); | |
| }); | |
| document.getElementById(`${tabId}-content`).classList.remove('hidden'); | |
| document.getElementById(`${tabId}-content`).classList.add('active'); | |
| }); | |
| }); | |
| // Alternar modo escuro (já está ativo por padrão) | |
| const darkModeToggle = document.querySelector('input[type="checkbox"]'); | |
| if (darkModeToggle) { | |
| darkModeToggle.addEventListener('change', function() { | |
| if (this.checked) { | |
| document.documentElement.classList.add('dark'); | |
| } else { | |
| document.documentElement.classList.remove('dark'); | |
| } | |
| }); | |
| } | |
| // Alternar visibilidade da senha | |
| document.querySelectorAll('input[type="password"]').forEach(passwordInput => { | |
| const eyeButton = passwordInput.nextElementSibling; | |
| if (eyeButton && eyeButton.classList.contains('fa-eye')) { | |
| eyeButton.addEventListener('click', function() { | |
| const input = this.parentNode.querySelector('input'); | |
| if (input.type === 'password') { | |
| input.type = 'text'; | |
| this.classList.remove('fa-eye'); | |
| this.classList.add('fa-eye-slash'); | |
| } else { | |
| input.type = 'password'; | |
| this.classList.remove('fa-eye-slash'); | |
| this.classList.add('fa-eye'); | |
| } | |
| }); | |
| } | |
| }); | |
| // Marcar/desmarcar tarefas | |
| document.querySelectorAll('#tasks-content input[type="checkbox"]').forEach(checkbox => { | |
| checkbox.addEventListener('change', function() { | |
| const taskItem = this.closest('.bg-dark-700'); | |
| if (this.checked) { | |
| taskItem.classList.add('opacity-70'); | |
| taskItem.querySelector('h4').classList.add('line-through'); | |
| taskItem.querySelector('p').classList.add('line-through'); | |
| } else { | |
| taskItem.classList.remove('opacity-70'); | |
| taskItem.querySelector('h4').classList.remove('line-through'); | |
| taskItem.querySelector('p').classList.remove('line-through'); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <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> | |
| </html> |