Hugging Face's logo

Spaces:
FourLabs-UN2
/
android-test-pilot
Running

App Files Community
FourLabs-UN2 commited on
Commit
d58e69d
·
verified ·
1 Parent(s): 7520416

faça a página de configurações

Browse files
Files changed (2) hide show
  1. components/sidebar.js +4 -5
  2. configuracao.html +318 -0
components/sidebar.js CHANGED
@@ -154,8 +154,8 @@ class CustomSidebar extends HTMLElement {
154
  </a>
155
 
156
  <a href="chatbot.html" class="nav-item">
157
- <i data-feather="message-square"></i>
158
- <span>Chatbot</span>
159
  </a>
160
 
161
  <a href="active-tests.html" class="nav-item">
@@ -176,12 +176,11 @@ class CustomSidebar extends HTMLElement {
176
  <i data-feather="pie-chart"></i>
177
  <span>Relatórios</span>
178
  </a>
179
- <a href="#" class="nav-item">
180
  <i data-feather="sliders"></i>
181
  <span>Configurações</span>
182
  </a>
183
-
184
- <a href="#" class="nav-item">
185
  <i data-feather="help-circle"></i>
186
  <span>Ajuda</span>
187
  </a>
 
154
  </a>
155
 
156
  <a href="chatbot.html" class="nav-item">
157
+ <i data-feather="home"></i>
158
+ <span>Dashboard</span>
159
  </a>
160
 
161
  <a href="active-tests.html" class="nav-item">
 
176
  <i data-feather="pie-chart"></i>
177
  <span>Relatórios</span>
178
  </a>
179
+ <a href="configuracao.html" class="nav-item">
180
  <i data-feather="sliders"></i>
181
  <span>Configurações</span>
182
  </a>
183
+ <a href="#" class="nav-item">
 
184
  <i data-feather="help-circle"></i>
185
  <span>Ajuda</span>
186
  </a>
configuracao.html ADDED
@@ -0,0 +1,318 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Configurações - Mobile Test Pilot</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#21223a',
17
+ secondary: '#ff580f',
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ </head>
24
+ <body class="bg-primary min-h-screen text-white">
25
+ <custom-sidebar></custom-sidebar>
26
+
27
+ <main class="ml-64 p-8">
28
+ <div class="max-w-4xl mx-auto">
29
+ <div class="flex items-center justify-between mb-8">
30
+ <div>
31
+ <h1 class="text-3xl font-bold mb-2">Configurações</h1>
32
+ <p class="text-gray-300">Gerencie as configurações da sua conta e plataforma</p>
33
+ </div>
34
+ <div class="flex items-center gap-4">
35
+ <button onclick="saveSettings()" class="bg-secondary hover:bg-orange-600 text-white px-6 py-3 rounded-lg flex items-center gap-2">
36
+ <i data-feather="save" class="w-4 h-4"></i>
37
+ Salvar Alterações
38
+ </button>
39
+ </div>
40
+ </div>
41
+
42
+ <!-- Configurações da Conta -->
43
+ <div class="bg-primary rounded-2xl border border-gray-700 p-6 shadow-2xl mb-8">
44
+ <h3 class="text-xl font-semibold mb-6 flex items-center gap-3">
45
+ <div class="w-12 h-12 bg-secondary bg-opacity-20 rounded-xl flex items-center justify-center">
46
+ <i data-feather="user" class="text-secondary"></i>
47
+ </div>
48
+ <h3 class="text-xl font-semibold">Configurações da Conta</h3>
49
+ </div>
50
+
51
+ <div class="grid grid-cols-2 gap-6">
52
+ <div>
53
+ <label class="block text-sm font-medium mb-2">Nome Completo</label>
54
+ <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">
55
+ </div>
56
+
57
+ <div>
58
+ <label class="block text-sm font-medium mb-2">Email</label>
59
+ <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">
60
+ </div>
61
+
62
+ <div>
63
+ <label class="block text-sm font-medium mb-2">Cargo</label>
64
+ <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">
65
+ </div>
66
+
67
+ <div>
68
+ <label class="block text-sm font-medium mb-2">Empresa</label>
69
+ <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">
70
+ </div>
71
+ </div>
72
+ </div>
73
+
74
+ <!-- Configurações da Plataforma -->
75
+ <div class="bg-primary rounded-2xl border border-gray-700 p-6 shadow-2xl mb-8">
76
+ <h3 class="text-xl font-semibold mb-6">Configurações da Plataforma</h3>
77
+
78
+ <div class="space-y-6">
79
+ <div class="flex items-center justify-between">
80
+ <div>
81
+ <h4 class="font-semibold mb-2">Notificações</h4>
82
+ <p class="text-sm text-gray-400">Receber notificações por email</p>
83
+ </div>
84
+ <div class="flex items-center">
85
+ <input type="checkbox" id="emailNotifications" class="w-4 h-4 text-secondary bg-gray-800 border-gray-700 rounded focus:ring-secondary">
86
+ </div>
87
+
88
+ <div class="flex items-center justify-between">
89
+ <div>
90
+ <h4 class="font-semibold mb-2">Tema Escuro</h4>
91
+ <p class="text-sm text-gray-400">Interface em tema escuro</p>
92
+ <label class="relative inline-flex items-center cursor-pointer">
93
+ <input type="checkbox" id="darkTheme" class="sr-only" checked>
94
+ <div class="block bg-gray-600 w-14 h-8 rounded-full">
95
+ <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
96
+ </div>
97
+ <div class="ml-3">
98
+ <span class="text-sm font-medium text-gray-300">Ativado</span>
99
+ </label>
100
+ </div>
101
+
102
+ <div class="flex items-center justify-between">
103
+ <div>
104
+ <h4 class="font-semibold mb-2">Idioma</h4>
105
+ <p class="text-sm text-gray-400">Idioma da interface</p>
106
+ <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">
107
+ <option value="pt">Português</option>
108
+ <option value="en">English</option>
109
+ <option value="es">Español</option>
110
+ </select>
111
+ </div>
112
+
113
+ <div class="flex items-center justify-between">
114
+ <div>
115
+ <h4 class="font-semibold mb-2">Fuso Horário</h4>
116
+ <p class="text-sm text-gray-400">Selecione seu fuso horário</p>
117
+ <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">
118
+ <option value="America/Sao_Paulo">Brasília (UTC-3)</option>
119
+ <option value="UTC">UTC</option>
120
+ <option value="America/New_York">New York (UTC-5)</option>
121
+ <option value="Europe/London">Londres (UTC+0)</option>
122
+ <option value="Asia/Tokyo">Tóquio (UTC+9)</option>
123
+ </select>
124
+ </div>
125
+
126
+ <div class="flex items-center justify-between">
127
+ <div>
128
+ <h4 class="font-semibold mb-2">Limite de Upload</h4>
129
+ <p class="text-sm text-gray-400">Tamanho máximo de arquivo</p>
130
+ <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">
131
+ <option value="100">100 MB</option>
132
+ <option value="500">500 MB</option>
133
+ <option value="1000">1 GB</option>
134
+ </select>
135
+ </div>
136
+ </div>
137
+ </div>
138
+
139
+ <!-- Configurações de Emuladores -->
140
+ <div class="bg-primary rounded-2xl border border-gray-700 p-6 shadow-2xl mb-8">
141
+ <h3 class="text-xl font-semibold mb-6">Configurações de Emuladores</h3>
142
+
143
+ <div class="space-y-6">
144
+ <div class="flex items-center justify-between">
145
+ <div>
146
+ <h4 class="font-semibold mb-2">Emuladores Android</h4>
147
+ <p class="text-sm text-gray-400">Configurações padrão para emuladores Android</h4>
148
+ </div>
149
+
150
+ <div class="flex items-center justify-between">
151
+ <div>
152
+ <h4 class="font-semibold mb-2">Tempo de Timeout</h4>
153
+ <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">
154
+ <p class="text-sm text-gray-400">Tempo máximo de execução (minutos)</p>
155
+ </div>
156
+
157
+ <div class="flex items-center justify-between">
158
+ <div>
159
+ <h4 class="font-semibold mb-2">Memória RAM</h4>
160
+ <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">
161
+ <option value="2048">2 GB</option>
162
+ <option value="4096">4 GB</option>
163
+ <option value="8192">8 GB</option>
164
+ </select>
165
+ </div>
166
+
167
+ <div class="flex items-center justify-between">
168
+ <div>
169
+ <h4 class="font-semibold mb-2">Resolução de Tela</h4>
170
+ <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">
171
+ <option value="1080x1920">1080x1920</option>
172
+ <option value="1440x2560">1440x2560</option>
173
+ <option value="720x1280">720x1280</option>
174
+ </select>
175
+ </div>
176
+
177
+ <div class="flex items-center justify-between">
178
+ <div>
179
+ <h4 class="font-semibold mb-2">Armazenamento Interno</h4>
180
+ <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">
181
+ <p class="text-sm text-gray-400">Capacidade em GB</p>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Configurações de Segurança -->
187
+ <div class="bg-primary rounded-2xl border border-gray-700 p-6 shadow-2xl mb-8">
188
+ <h3 class="text-xl font-semibold mb-6">Configurações de Segurança</h3>
189
+
190
+ <div class="space-y-6">
191
+ <div class="flex items-center justify-between">
192
+ <div>
193
+ <h4 class="font-semibold mb-2">Autenticação de Dois Fatores</h3>
194
+ <div class="flex items-center justify-between">
195
+ <div>
196
+ <h4 class="font-semibold mb-2">Alterar Senha</h4>
197
+ <p class="text-sm text-gray-400">Atualize sua senha regularmente</p>
198
+ <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">
199
+ Ativar 2FA
200
+ </button>
201
+ </div>
202
+ </div>
203
+
204
+ <div class="flex items-center justify-between">
205
+ <div>
206
+ <h4 class="font-semibold mb-2">Sessões Ativas</h4>
207
+ <p class="text-sm text-gray-400">Gerencie suas sessões ativas</p>
208
+ <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">
209
+ Gerenciar Sessões
210
+ </button>
211
+ </div>
212
+ </div>
213
+
214
+ <div class="flex items-center justify-between">
215
+ <div>
216
+ <h4 class="font-semibold mb-2">Exportar Dados</h4>
217
+ <p class="text-sm text-gray-400">Exporte todos os seus dados</p>
218
+ <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg">
219
+ Exportar Dados
220
+ </button>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+
226
+ <!-- Configurações de API -->
227
+ <div class="bg-primary rounded-2xl border border-gray-700 p-6 shadow-2xl">
228
+ <h3 class="text-xl font-semibold mb-6">Configurações de API</h3>
229
+
230
+ <div class="space-y-4">
231
+ <div class="flex items-center justify-between">
232
+ <div>
233
+ <h4 class="font-semibold mb-2">Chave da API</h3>
234
+ <p class="text-sm text-gray-400">Sua chave de API para integrações</p>
235
+ <div class="flex items-center gap-3">
236
+ <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>
237
+ <button onclick="copyApiKey()" class="bg-secondary hover:bg-orange-600 text-white px-4 py-2 rounded-lg">
238
+ Copiar Chave
239
+ </button>
240
+ </div>
241
+ </div>
242
+
243
+ <div class="flex items-center justify-between">
244
+ <div>
245
+ <h4 class="font-semibold mb-2">Regenerar Chave</h4>
246
+ <button onclick="regenerateApiKey()" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg">
247
+ Regenerar
248
+ </button>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </main>
255
+
256
+ <script src="components/sidebar.js"></script>
257
+ <script src="script.js"></script>
258
+ <script>
259
+ feather.replace();
260
+
261
+ function saveSettings() {
262
+ // Simular salvamento das configurações
263
+ const userName = document.getElementById('userName').value;
264
+ const userEmail = document.getElementById('userEmail').value;
265
+ const userRole = document.getElementById('userRole').value;
266
+ const userCompany = document.getElementById('userCompany').value;
267
+
268
+ // Mostrar mensagem de sucesso
269
+ showNotification('Configurações salvas com sucesso!', 'success');
270
+ }
271
+
272
+ function copyApiKey() {
273
+ const apiKeyInput = document.getElementById('apiKey');
274
+ apiKeyInput.select();
275
+ document.execCommand('copy');
276
+
277
+ showNotification('Chave de API copiada para a área de transferência!', 'success');
278
+ }
279
+
280
+ function regenerateApiKey() {
281
+ if (confirm('Tem certeza que deseja regenerar a chave da API? A chave atual será invalidada.', 'success');
282
+ }
283
+
284
+ function showNotification(message, type) {
285
+ // Criar elemento de notificação
286
+ const notification = document.createElement('div');
287
+ notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg ${
288
+ type === 'success' ? 'bg-green-600' : 'bg-red-600'
289
+ } text-white rounded-lg flex items-center gap-2 z-50`;
290
+ notification.innerHTML = `
291
+ <i data-feather="${type === 'success' ? 'check-circle' : 'alert-circle'}" class="w-4 h-4"></i> ${message}
292
+ `;
293
+
294
+ document.body.appendChild(notification);
295
+ feather.replace();
296
+
297
+ // Remover após 3 segundos
298
+ setTimeout(() => {
299
+ notification.remove();
300
+ }, 3000);
301
+ }
302
+
303
+ // Atualizar sidebar para marcar a página ativa
304
+ document.addEventListener('DOMContentLoaded', function() {
305
+ const sidebar = document.querySelector('custom-sidebar');
306
+ if (sidebar) {
307
+ const navItems = sidebar.shadowRoot.querySelectorAll('.nav-item');
308
+ navItems.forEach(item => {
309
+ if (item.querySelector('span').textContent === 'Configurações') {
310
+ item.classList.add('active');
311
+ } else {
312
+ item.classList.remove('active');
313
+ }
314
+ });
315
+ });
316
+ </script>
317
+ </body>
318
+ </html>