Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Configurações - Mobile Test Pilot</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#21223a', | |
| secondary: '#ff580f', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-primary min-h-screen text-white"> | |
| <custom-sidebar></custom-sidebar> | |
| <main class="ml-64 p-8"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="flex items-center justify-between mb-8"> | |
| <div> | |
| <h1 class="text-3xl font-bold mb-2">Configurações</h1> | |
| <p class="text-gray-300">Gerencie as configurações da sua conta e plataforma</p> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <button onclick="saveSettings()" class="bg-secondary hover:bg-orange-600 text-white px-6 py-3 rounded-lg flex items-center gap-2"> | |
| <i data-feather="save" class="w-4 h-4"></i> | |
| Salvar Alterações | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Configurações da Conta --> | |
| <div class="bg-primary rounded-2xl border border-gray-700 p-6 shadow-2xl mb-8"> | |
| <h3 class="text-xl font-semibold mb-6 flex items-center gap-3"> | |
| <div class="w-12 h-12 bg-secondary bg-opacity-20 rounded-xl flex items-center justify-center"> | |
| <i data-feather="user" class="text-secondary"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">Configurações da Conta</h3> | |
| </div> | |
| <div class="grid grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Nome Completo</label> | |
| <input type="text" id="userName" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:border-secondary focus:ring-2 focus:ring-secondary focus:ring-opacity-50" value="Carlos Silva"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Email</label> | |
| <input type="email" id="userEmail" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:border-secondary focus:ring-2 focus:ring-secondary focus:ring-opacity-50" value="carlos.silva@empresa.com"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Cargo</label> | |
| <input type="text" id="userRole" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:border-secondary focus:ring-2 focus:ring-secondary focus:ring-opacity-50" value="QA Engineer"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Empresa</label> | |
| <input type="text" id="userCompany" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:border-secondary focus:ring-2 focus:ring-secondary focus:ring-opacity-50" value="Tech Solutions Ltda"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Configurações da Plataforma --> | |
| <div class="bg-primary rounded-2xl border border-gray-700 p-6 shadow-2xl mb-8"> | |
| <h3 class="text-xl font-semibold mb-6">Configurações da Plataforma</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-semibold mb-2">Notificações</h4> | |
| <p class="text-sm text-gray-400">Receber notificações por email</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="emailNotifications" class="w-4 h-4 text-secondary bg-gray-800 border-gray-700 rounded focus:ring-secondary"> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-semibold mb-2">Tema Escuro</h4> | |
| <p class="text-sm text-gray-400">Interface em tema escuro</p> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" id="darkTheme" class="sr-only" checked> | |
| <div class="block bg-gray-600 w-14 h-8 rounded-full"> | |
| <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div> | |
| </div> | |
| <div class="ml-3"> | |
| <span class="text-sm font-medium text-gray-300">Ativado</span> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-semibold mb-2">Idioma</h4> | |
| <p class="text-sm text-gray-400">Idioma da interface</p> | |
| <select id="language" class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:border-secondary focus:ring-2 focus:ring-secondary focus:ring-opacity-50"> | |
| <option value="pt">Português</option> | |
| <option value="en">English</option> | |
| <option value="es">Español</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-semibold mb-2">Fuso Horário</h4> | |
| <p class="text-sm text-gray-400">Selecione seu fuso horário</p> | |
| <select id="timezone" class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:border-secondary focus:ring-2 focus:ring-secondary focus:ring-opacity-50"> | |
| <option value="America/Sao_Paulo">Brasília (UTC-3)</option> | |
| <option value="UTC">UTC</option> | |
| <option value="America/New_York">New York (UTC-5)</option> | |
| <option value="Europe/London">Londres (UTC+0)</option> | |
| <option value="Asia/Tokyo">Tóquio (UTC+9)</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-semibold mb-2">Limite de Upload</h4> | |
| <p class="text-sm text-gray-400">Tamanho máximo de arquivo</p> | |
| <select id="uploadLimit" class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:border-secondary focus:ring-2 focus:ring-secondary focus:ring-opacity-50"> | |
| <option value="100">100 MB</option> | |
| <option value="500">500 MB</option> | |
| <option value="1000">1 GB</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Configurações de Emuladores --> | |
| <div class="bg-primary rounded-2xl border border-gray-700 p-6 shadow-2xl mb-8"> | |
| <h3 class="text-xl font-semibold mb-6">Configurações de Emuladores</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-semibold mb-2">Emuladores Android</h4> | |
| <p class="text-sm text-gray-400">Configurações padrão para emuladores Android</h4> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-semibold mb-2">Tempo de Timeout</h4> | |
| <input type="number" id="androidTimeout" class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:border-secondary focus:ring-2 focus:ring-secondary focus:ring-opacity-50" value="30" min="5" max="300"> | |
| <p class="text-sm text-gray-400">Tempo máximo de execução (minutos)</p> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-semibold mb-2">Memória RAM</h4> | |
| <select id="androidMemory" class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:border-secondary focus:ring-2 focus:ring-secondary focus:ring-opacity-50"> | |
| <option value="2048">2 GB</option> | |
| <option value="4096">4 GB</option> | |
| <option value="8192">8 GB</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-semibold mb-2">Resolução de Tela</h4> | |
| <select id="androidResolution" class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:border-secondary focus:ring-2 focus:ring-secondary focus:ring-opacity-50"> | |
| <option value="1080x1920">1080x1920</option> | |
| <option value="1440x2560">1440x2560</option> | |
| <option value="720x1280">720x1280</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-semibold mb-2">Armazenamento Interno</h4> | |
| <input type="number" id="androidStorage" class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:border-secondary focus:ring-2 focus:ring-secondary focus:ring-opacity-50" value="16" min="8" max="64"> | |
| <p class="text-sm text-gray-400">Capacidade em GB</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Configurações de Segurança --> | |
| <div class="bg-primary rounded-2xl border border-gray-700 p-6 shadow-2xl mb-8"> | |
| <h3 class="text-xl font-semibold mb-6">Configurações de Segurança</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-semibold mb-2">Autenticação de Dois Fatores</h3> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-semibold mb-2">Alterar Senha</h4> | |
| <p class="text-sm text-gray-400">Atualize sua senha regularmente</p> | |
| <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg"> | |
| Ativar 2FA | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-semibold mb-2">Sessões Ativas</h4> | |
| <p class="text-sm text-gray-400">Gerencie suas sessões ativas</p> | |
| <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg"> | |
| Gerenciar Sessões | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-semibold mb-2">Exportar Dados</h4> | |
| <p class="text-sm text-gray-400">Exporte todos os seus dados</p> | |
| <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg"> | |
| Exportar Dados | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Configurações de API --> | |
| <div class="bg-primary rounded-2xl border border-gray-700 p-6 shadow-2xl"> | |
| <h3 class="text-xl font-semibold mb-6">Configurações de API</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-semibold mb-2">Chave da API</h3> | |
| <p class="text-sm text-gray-400">Sua chave de API para integrações</p> | |
| <div class="flex items-center gap-3"> | |
| <input type="text" id="apiKey" class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:border-secondary focus:ring-2 focus:ring-secondary focus:ring-opacity-50" value="mtp_sk_1234567890abcdef" readonly> | |
| <button onclick="copyApiKey()" class="bg-secondary hover:bg-orange-600 text-white px-4 py-2 rounded-lg"> | |
| Copiar Chave | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h4 class="font-semibold mb-2">Regenerar Chave</h4> | |
| <button onclick="regenerateApiKey()" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg"> | |
| Regenerar | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script src="components/sidebar.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| function saveSettings() { | |
| // Simular salvamento das configurações | |
| const userName = document.getElementById('userName').value; | |
| const userEmail = document.getElementById('userEmail').value; | |
| const userRole = document.getElementById('userRole').value; | |
| const userCompany = document.getElementById('userCompany').value; | |
| // Mostrar mensagem de sucesso | |
| showNotification('Configurações salvas com sucesso!', 'success'); | |
| } | |
| function copyApiKey() { | |
| const apiKeyInput = document.getElementById('apiKey'); | |
| apiKeyInput.select(); | |
| document.execCommand('copy'); | |
| showNotification('Chave de API copiada para a área de transferência!', 'success'); | |
| } | |
| function regenerateApiKey() { | |
| if (confirm('Tem certeza que deseja regenerar a chave da API? A chave atual será invalidada.', 'success'); | |
| } | |
| function showNotification(message, type) { | |
| // Criar elemento de notificação | |
| const notification = document.createElement('div'); | |
| notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg ${ | |
| type === 'success' ? 'bg-green-600' : 'bg-red-600' | |
| } text-white rounded-lg flex items-center gap-2 z-50`; | |
| notification.innerHTML = ` | |
| <i data-feather="${type === 'success' ? 'check-circle' : 'alert-circle'}" class="w-4 h-4"></i> ${message} | |
| `; | |
| document.body.appendChild(notification); | |
| feather.replace(); | |
| // Remover após 3 segundos | |
| setTimeout(() => { | |
| notification.remove(); | |
| }, 3000); | |
| } | |
| // Atualizar sidebar para marcar a página ativa | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const sidebar = document.querySelector('custom-sidebar'); | |
| if (sidebar) { | |
| const navItems = sidebar.shadowRoot.querySelectorAll('.nav-item'); | |
| navItems.forEach(item => { | |
| if (item.querySelector('span').textContent === 'Configurações') { | |
| item.classList.add('active'); | |
| } else { | |
| item.classList.remove('active'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |