Hugging Face's logo

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

App Files Community
FourLabs-UN2 commited on
Commit
8cd240c
·
verified ·
1 Parent(s): 61c91b5

faça a página de testes ativos

Browse files
Files changed (4) hide show
  1. active-tests.html +343 -0
  2. chatbot.html +0 -1
  3. components/sidebar.js +3 -4
  4. style.css +35 -0
active-tests.html ADDED
@@ -0,0 +1,343 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Testes Ativos - 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-7xl mx-auto">
29
+ <div class="flex items-center justify-between mb-8">
30
+ <div>
31
+ <h1 class="text-3xl font-bold mb-2">Testes Ativos</h1>
32
+ <p class="text-gray-300">Monitore e gerencie todos os testes em andamento</p>
33
+ </div>
34
+ <div class="flex items-center gap-4">
35
+ <div class="relative">
36
+ <input type="text" placeholder="Buscar teste..." class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 pl-10 text-white focus:border-secondary focus:ring-2 focus:ring-secondary focus:ring-opacity-50">
37
+ <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4"></i>
38
+ </div>
39
+ <button class="bg-secondary hover:bg-orange-600 text-white px-4 py-2 rounded-lg flex items-center gap-2">
40
+ <i data-feather="filter" class="w-4 h-4"></i>
41
+ Filtrar
42
+ </button>
43
+ </div>
44
+ </div>
45
+
46
+ <!-- Estatísticas -->
47
+ <div class="grid grid-cols-4 gap-6 mb-8">
48
+ <div class="bg-gray-800 p-6 rounded-2xl border border-gray-700">
49
+ <div class="flex items-center justify-between">
50
+ <div>
51
+ <p class="text-gray-400 text-sm">Total de Testes</p>
52
+ <p class="text-2xl font-bold">12</p>
53
+ </div>
54
+ <div class="w-12 h-12 bg-secondary bg-opacity-20 rounded-full flex items-center justify-center">
55
+ <i data-feather="activity" class="text-secondary"></i>
56
+ </div>
57
+ </div>
58
+ </div>
59
+
60
+ <div class="bg-gray-800 p-6 rounded-2xl border border-gray-700">
61
+ <div class="flex items-center justify-between">
62
+ <div>
63
+ <p class="text-gray-400 text-sm">Em Execução</p>
64
+ <p class="text-2xl font-bold text-green-400">8</p>
65
+ </div>
66
+ <div class="w-12 h-12 bg-green-500 bg-opacity-20 rounded-full flex items-center justify-center">
67
+ <i data-feather="play" class="text-green-400"></i>
68
+ </div>
69
+ </div>
70
+ </div>
71
+
72
+ <div class="bg-gray-800 p-6 rounded-2xl border border-gray-700">
73
+ <div class="flex items-center justify-between">
74
+ <div>
75
+ <p class="text-gray-400 text-sm">Pausados</p>
76
+ <p class="text-2xl font-bold text-yellow-400">3</p>
77
+ </div>
78
+ <div class="w-12 h-12 bg-yellow-500 bg-opacity-20 rounded-full flex items-center justify-center">
79
+ <i data-feather="pause" class="text-yellow-400"></i>
80
+ </div>
81
+ </div>
82
+ </div>
83
+
84
+ <div class="bg-gray-800 p-6 rounded-2xl border border-gray-700">
85
+ <div class="flex items-center justify-between">
86
+ <div>
87
+ <p class="text-gray-400 text-sm">Com Erros</p>
88
+ <p class="text-2xl font-bold text-red-400">1</p>
89
+ </div>
90
+ <div class="w-12 h-12 bg-red-500 bg-opacity-20 rounded-full flex items-center justify-center">
91
+ <i data-feather="alert-circle" class="text-red-400"></i>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- Lista de Testes Ativos -->
98
+ <div class="bg-primary rounded-2xl border border-gray-700 p-6 shadow-2xl">
99
+ <div class="overflow-x-auto">
100
+ <table class="w-full">
101
+ <thead>
102
+ <tr class="border-b border-gray-700">
103
+ <th class="text-left py-3 px-4">Teste</th>
104
+ <th class="text-left py-3 px-4">Plataforma</th>
105
+ <th class="text-left py-3 px-4">Status</th>
106
+ <th class="text-left py-3 px-4">Tempo</th>
107
+ <th class="text-left py-3 px-4">Progresso</th>
108
+ <th class="text-left py-3 px-4">Ações</th>
109
+ </tr>
110
+ </thead>
111
+ <tbody>
112
+ <tr class="border-b border-gray-700 hover:bg-gray-800 transition-colors">
113
+ <td class="py-4 px-4">
114
+ <div class="flex items-center gap-3">
115
+ <div class="w-10 h-10 bg-secondary bg-opacity-20 rounded-lg flex items-center justify-center">
116
+ <i data-feather="smartphone" class="text-secondary"></i>
117
+ </div>
118
+ <div>
119
+ <p class="font-semibold">App Banking</p>
120
+ <p class="text-sm text-gray-400">v1.2.3</p>
121
+ </div>
122
+ </div>
123
+ </td>
124
+ <td class="py-4 px-4">
125
+ <span class="bg-green-500 text-white px-2 py-1 rounded-full text-xs">Android</span>
126
+ </td>
127
+ <td class="py-4 px-4">
128
+ <span class="text-green-400 flex items-center gap-2">
129
+ <i data-feather="play" class="w-4 h-4"></i>
130
+ Executando
131
+ </span>
132
+ </td>
133
+ <td class="py-4 px-4">
134
+ <p class="text-sm">45 min</p>
135
+ </td>
136
+ <td class="py-4 px-4">
137
+ <div class="w-32">
138
+ <div class="bg-gray-700 rounded-full h-2">
139
+ <div class="bg-secondary h-2 rounded-full" style="width: 75%"></div>
140
+ </div>
141
+ <p class="text-xs text-gray-400 mt-1">75% completo</p>
142
+ </div>
143
+ </td>
144
+ <td class="py-4 px-4">
145
+ <div class="flex gap-2">
146
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Visualizar">
147
+ <i data-feather="eye" class="w-4 h-4"></i>
148
+ </button>
149
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Pausar">
150
+ <i data-feather="pause" class="w-4 h-4"></i>
151
+ </button>
152
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Parar">
153
+ <i data-feather="square" class="w-4 h-4"></i>
154
+ </button>
155
+ </div>
156
+ </td>
157
+ </tr>
158
+
159
+ <tr class="border-b border-gray-700 hover:bg-gray-800 transition-colors">
160
+ <td class="py-4 px-4">
161
+ <div class="flex items-center gap-3">
162
+ <div class="w-10 h-10 bg-blue-500 bg-opacity-20 rounded-lg flex items-center justify-center">
163
+ <i data-feather="shopping-cart" class="text-blue-400"></i>
164
+ </div>
165
+ <div>
166
+ <p class="font-semibold">E-commerce App</p>
167
+ <p class="text-sm text-gray-400">v2.0.1</p>
168
+ </div>
169
+ </div>
170
+ </td>
171
+ <td class="py-4 px-4">
172
+ <span class="bg-blue-500 text-white px-2 py-1 rounded-full text-xs">iOS</span>
173
+ </td>
174
+ <td class="py-4 px-4">
175
+ <span class="text-green-400 flex items-center gap-2">
176
+ <i data-feather="play" class="w-4 h-4"></i>
177
+ Executando
178
+ </span>
179
+ </td>
180
+ <td class="py-4 px-4">
181
+ <p class="text-sm">1h 20min</p>
182
+ </td>
183
+ <td class="py-4 px-4">
184
+ <div class="w-32">
185
+ <div class="bg-gray-700 rounded-full h-2">
186
+ <div class="bg-secondary h-2 rounded-full" style="width: 60%"></div>
187
+ </div>
188
+ <p class="text-xs text-gray-400 mt-1">60% completo</p>
189
+ </div>
190
+ </td>
191
+ <td class="py-4 px-4">
192
+ <div class="flex gap-2">
193
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Visualizar">
194
+ <i data-feather="eye" class="w-4 h-4"></i>
195
+ </button>
196
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Pausar">
197
+ <i data-feather="pause" class="w-4 h-4"></i>
198
+ </button>
199
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Parar">
200
+ <i data-feather="square" class="w-4 h-4"></i>
201
+ </button>
202
+ </div>
203
+ </td>
204
+ </tr>
205
+
206
+ <tr class="border-b border-gray-700 hover:bg-gray-800 transition-colors">
207
+ <td class="py-4 px-4">
208
+ <div class="flex items-center gap-3">
209
+ <div class="w-10 h-10 bg-yellow-500 bg-opacity-20 rounded-lg flex items-center justify-center">
210
+ <i data-feather="video" class="text-yellow-400"></i>
211
+ </div>
212
+ <div>
213
+ <p class="font-semibold">Streaming App</p>
214
+ <p class="text-sm text-gray-400">v1.5.0</p>
215
+ </div>
216
+ </div>
217
+ </td>
218
+ <td class="py-4 px-4">
219
+ <span class="bg-green-500 text-white px-2 py-1 rounded-full text-xs">Android</span>
220
+ </td>
221
+ <td class="py-4 px-4">
222
+ <span class="text-yellow-400 flex items-center gap-2">
223
+ <i data-feather="pause" class="w-4 h-4"></i>
224
+ Pausado
225
+ </span>
226
+ </td>
227
+ <td class="py-4 px-4">
228
+ <p class="text-sm">30 min</p>
229
+ </td>
230
+ <td class="py-4 px-4">
231
+ <div class="w-32">
232
+ <div class="bg-gray-700 rounded-full h-2">
233
+ <div class="bg-secondary h-2 rounded-full" style="width: 25%"></div>
234
+ </div>
235
+ <p class="text-xs text-gray-400 mt-1">25% completo</p>
236
+ </div>
237
+ </td>
238
+ <td class="py-4 px-4">
239
+ <div class="flex gap-2">
240
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Visualizar">
241
+ <i data-feather="eye" class="w-4 h-4"></i>
242
+ </button>
243
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Continuar">
244
+ <i data-feather="play" class="w-4 h-4"></i>
245
+ </button>
246
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Parar">
247
+ <i data-feather="square" class="w-4 h-4"></i>
248
+ </button>
249
+ </div>
250
+ </td>
251
+ </tr>
252
+
253
+ <tr class="hover:bg-gray-800 transition-colors">
254
+ <td class="py-4 px-4">
255
+ <div class="flex items-center gap-3">
256
+ <div class="w-10 h-10 bg-red-500 bg-opacity-20 rounded-lg flex items-center justify-center">
257
+ <i data-feather="map" class="text-red-400"></i>
258
+ </div>
259
+ <div>
260
+ <p class="font-semibold">Navigation App</p>
261
+ <p class="text-sm text-gray-400">v3.1.0</p>
262
+ </div>
263
+ </div>
264
+ </td>
265
+ <td class="py-4 px-4">
266
+ <span class="bg-red-500 text-white px-2 py-1 rounded-full text-xs">Android</span>
267
+ </td>
268
+ <td class="py-4 px-4">
269
+ <span class="text-red-400 flex items-center gap-2">
270
+ <i data-feather="alert-circle" class="w-4 h-4"></i>
271
+ Com Erros
272
+ </span>
273
+ </td>
274
+ <td class="py-4 px-4">
275
+ <p class="text-sm">15 min</p>
276
+ </td>
277
+ <td class="py-4 px-4">
278
+ <div class="w-32">
279
+ <div class="bg-gray-700 rounded-full h-2">
280
+ <div class="bg-red-500 h-2 rounded-full" style="width: 10%"></div>
281
+ </div>
282
+ <p class="text-xs text-gray-400 mt-1">10% completo</p>
283
+ </div>
284
+ </td>
285
+ <td class="py-4 px-4">
286
+ <div class="flex gap-2">
287
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Visualizar">
288
+ <i data-feather="eye" class="w-4 h-4"></i>
289
+ </button>
290
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Reiniciar">
291
+ <i data-feather="refresh-cw" class="w-4 h-4"></i>
292
+ </button>
293
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Parar">
294
+ <i data-feather="square" class="w-4 h-4"></i>
295
+ </button>
296
+ </div>
297
+ </td>
298
+ </tr>
299
+ </tbody>
300
+ </table>
301
+ </div>
302
+
303
+ <!-- Paginação -->
304
+ <div class="flex items-center justify-between mt-6 pt-6 border-t border-gray-700">
305
+ <p class="text-sm text-gray-400">Mostrando 4 de 12 testes ativos</p>
306
+ <div class="flex gap-2">
307
+ <button class="px-3 py-1 border border-gray-700 rounded-lg text-gray-400 hover:bg-gray-800">
308
+ <i data-feather="chevron-left" class="w-4 h-4"></i>
309
+ </button>
310
+ <button class="px-3 py-1 bg-secondary text-white rounded-lg">1</button>
311
+ <button class="px-3 py-1 border border-gray-700 rounded-lg text-gray-400 hover:bg-gray-800">2</button>
312
+ <button class="px-3 py-1 border border-gray-700 rounded-lg text-gray-400 hover:bg-gray-800">3</button>
313
+ <button class="px-3 py-1 border border-gray-700 rounded-lg text-gray-400 hover:bg-gray-800">
314
+ <i data-feather="chevron-right" class="w-4 h-4"></i>
315
+ </button>
316
+ </div>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </main>
321
+
322
+ <script src="components/sidebar.js"></script>
323
+ <script src="script.js"></script>
324
+ <script>
325
+ feather.replace();
326
+
327
+ // Atualizar sidebar para marcar a página ativa
328
+ document.addEventListener('DOMContentLoaded', function() {
329
+ const sidebar = document.querySelector('custom-sidebar');
330
+ if (sidebar) {
331
+ const navItems = sidebar.shadowRoot.querySelectorAll('.nav-item');
332
+ navItems.forEach(item => {
333
+ if (item.querySelector('span').textContent === 'Testes Ativos') {
334
+ item.classList.add('active');
335
+ } else {
336
+ item.classList.remove('active');
337
+ }
338
+ });
339
+ }
340
+ });
341
+ </script>
342
+ </body>
343
+ </html>
chatbot.html CHANGED
@@ -93,7 +93,6 @@
93
  <div class="w-20">
94
  <div class="bg-gray-800 rounded-2xl p-4 border border-gray-700 h-[600px]">
95
  <h3 class="text-lg font-semibold mb-4 flex items-center gap-2 justify-center">
96
- <i data-feather="zap" class="w-5 h-5 text-secondary"></i>
97
  </h3>
98
  <div class="space-y-3">
99
  <button class="w-full bg-secondary bg-opacity-20 hover:bg-opacity-30 text-secondary p-3 rounded-lg flex items-center justify-center transition-all" title="Instalar App">
 
93
  <div class="w-20">
94
  <div class="bg-gray-800 rounded-2xl p-4 border border-gray-700 h-[600px]">
95
  <h3 class="text-lg font-semibold mb-4 flex items-center gap-2 justify-center">
 
96
  </h3>
97
  <div class="space-y-3">
98
  <button class="w-full bg-secondary bg-opacity-20 hover:bg-opacity-30 text-secondary p-3 rounded-lg flex items-center justify-center transition-all" title="Instalar App">
components/sidebar.js CHANGED
@@ -148,7 +148,7 @@ class CustomSidebar extends HTMLElement {
148
  <div class="logo-text">Mobile Test Pilot</div>
149
  </div>
150
  <nav class="nav-items">
151
- <a href="index.html" class="nav-item active">
152
  <i data-feather="home"></i>
153
  <span>Dashboard</span>
154
  </a>
@@ -158,12 +158,11 @@ class CustomSidebar extends HTMLElement {
158
  <span>Chatbot</span>
159
  </a>
160
 
161
- <a href="#" class="nav-item">
162
  <i data-feather="activity"></i>
163
  <span>Testes Ativos</span>
164
  </a>
165
-
166
- <a href="#" class="nav-item">
167
  <i data-feather="clock"></i>
168
  <span>Histórico</span>
169
  </a>
 
148
  <div class="logo-text">Mobile Test Pilot</div>
149
  </div>
150
  <nav class="nav-items">
151
+ <a href="index.html" class="nav-item">
152
  <i data-feather="home"></i>
153
  <span>Dashboard</span>
154
  </a>
 
158
  <span>Chatbot</span>
159
  </a>
160
 
161
+ <a href="active-tests.html" class="nav-item">
162
  <i data-feather="activity"></i>
163
  <span>Testes Ativos</span>
164
  </a>
165
+ <a href="#" class="nav-item">
 
166
  <i data-feather="clock"></i>
167
  <span>Histórico</span>
168
  </a>
style.css CHANGED
@@ -126,6 +126,26 @@ body {
126
  .bot-message .message-time {
127
  text-align: left;
128
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
129
 
130
  /* Responsividade */
131
  @media (max-width: 768px) {
@@ -137,4 +157,19 @@ body {
137
  .message-content {
138
  width: 100%;
139
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
140
  }
 
126
  .bot-message .message-time {
127
  text-align: left;
128
  }
129
+ /* Estilos para tabelas */
130
+ table {
131
+ border-collapse: separate;
132
+ border-spacing: 0;
133
+ }
134
+
135
+ th {
136
+ font-weight: 600;
137
+ color: #a0aec0;
138
+ font-size: 0.875rem;
139
+ }
140
+
141
+ td {
142
+ font-size: 0.875rem;
143
+ }
144
+
145
+ /* Progress bars */
146
+ .progress-bar {
147
+ transition: width 0.3s ease;
148
+ }
149
 
150
  /* Responsividade */
151
  @media (max-width: 768px) {
 
157
  .message-content {
158
  width: 100%;
159
  }
160
+
161
+ .grid-cols-4 {
162
+ grid-template-columns: repeat(2, 1fr);
163
+ }
164
+ }
165
+
166
+ @media (max-width: 640px) {
167
+ .grid-cols-4 {
168
+ grid-template-columns: 1fr;
169
+ }
170
+
171
+ table {
172
+ display: block;
173
+ overflow-x: auto;
174
+ }
175
  }