Hugging Face's logo

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

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

faça a página de histórico

Browse files
Files changed (2) hide show
  1. components/sidebar.js +2 -3
  2. historico.html +331 -0
components/sidebar.js CHANGED
@@ -162,12 +162,11 @@ class CustomSidebar extends HTMLElement {
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>
169
-
170
- <a href="#" class="nav-item">
171
  <i data-feather="pie-chart"></i>
172
  <span>Relatórios</span>
173
  </a>
 
162
  <i data-feather="activity"></i>
163
  <span>Testes Ativos</span>
164
  </a>
165
+ <a href="historico.html" class="nav-item">
166
  <i data-feather="clock"></i>
167
  <span>Histórico</span>
168
  </a>
169
+ <a href="#" class="nav-item">
 
170
  <i data-feather="pie-chart"></i>
171
  <span>Relatórios</span>
172
  </a>
historico.html ADDED
@@ -0,0 +1,331 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Histórico - 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">Histórico de Testes</h1>
32
+ <p class="text-gray-300">Visualize todos os testes realizados anteriormente</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
+ <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg flex items-center gap-2">
44
+ <i data-feather="download" class="w-4 h-4"></i>
45
+ Exportar
46
+ </button>
47
+ </div>
48
+ </div>
49
+
50
+ <!-- Estatísticas -->
51
+ <div class="grid grid-cols-4 gap-6 mb-8">
52
+ <div class="bg-gray-800 p-6 rounded-2xl border border-gray-700">
53
+ <div class="flex items-center justify-between">
54
+ <div>
55
+ <p class="text-gray-400 text-sm">Total de Testes</p>
56
+ <p class="text-2xl font-bold">156</p>
57
+ </div>
58
+ <div class="w-12 h-12 bg-secondary bg-opacity-20 rounded-full flex items-center justify-center">
59
+ <i data-feather="clock" class="text-secondary"></i>
60
+ </div>
61
+ </div>
62
+ </div>
63
+
64
+ <div class="bg-gray-800 p-6 rounded-2xl border border-gray-700">
65
+ <div class="flex items-center justify-between">
66
+ <div>
67
+ <p class="text-gray-400 text-sm">Concluídos</p>
68
+ <p class="text-2xl font-bold text-green-400">142</p>
69
+ </div>
70
+ <div class="w-12 h-12 bg-green-500 bg-opacity-20 rounded-full flex items-center justify-center">
71
+ <i data-feather="check-circle" class="text-green-400"></i>
72
+ </div>
73
+ </div>
74
+ </div>
75
+
76
+ <div class="bg-gray-800 p-6 rounded-2xl border border-gray-700">
77
+ <div class="flex items-center justify-between">
78
+ <div>
79
+ <p class="text-gray-400 text-sm">Com Falhas</p>
80
+ <p class="text-2xl font-bold text-red-400">14</p>
81
+ </div>
82
+ <div class="w-12 h-12 bg-red-500 bg-opacity-20 rounded-full flex items-center justify-center">
83
+ <i data-feather="x-circle" class="text-red-400"></i>
84
+ </div>
85
+ </div>
86
+ </div>
87
+
88
+ <div class="bg-gray-800 p-6 rounded-2xl border border-gray-700">
89
+ <div class="flex items-center justify-between">
90
+ <div>
91
+ <p class="text-gray-400 text-sm">Tempo Médio</p>
92
+ <p class="text-2xl font-bold text-blue-400">32min</p>
93
+ </div>
94
+ <div class="w-12 h-12 bg-blue-500 bg-opacity-20 rounded-full flex items-center justify-center">
95
+ <i data-feather="watch" class="text-blue-400"></i>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Lista de Histórico -->
102
+ <div class="bg-primary rounded-2xl border border-gray-700 p-6 shadow-2xl">
103
+ <div class="overflow-x-auto">
104
+ <table class="w-full">
105
+ <thead>
106
+ <tr class="border-b border-gray-700">
107
+ <th class="text-left py-3 px-4">Aplicativo</th>
108
+ <th class="text-left py-3 px-4">Plataforma</th>
109
+ <th class="text-left py-3 px-4">Data</th>
110
+ <th class="text-left py-3 px-4">Duração</th>
111
+ <th class="text-left py-3 px-4">Status</th>
112
+ <th class="text-left py-3 px-4">Ações</th>
113
+ </tr>
114
+ </thead>
115
+ <tbody>
116
+ <tr class="border-b border-gray-700 hover:bg-gray-800 transition-colors">
117
+ <td class="py-4 px-4">
118
+ <div class="flex items-center gap-3">
119
+ <div class="w-10 h-10 bg-secondary bg-opacity-20 rounded-lg flex items-center justify-center">
120
+ <i data-feather="smartphone" class="text-secondary"></i>
121
+ </div>
122
+ <div>
123
+ <p class="font-semibold">App Banking</p>
124
+ <p class="text-sm text-gray-400">v1.2.3</p>
125
+ </div>
126
+ </div>
127
+ </td>
128
+ <td class="py-4 px-4">
129
+ <span class="bg-green-500 text-white px-2 py-1 rounded-full text-xs">Android</span>
130
+ </td>
131
+ <td class="py-4 px-4">
132
+ <p class="text-sm">15/12/2024</p>
133
+ <p class="text-xs text-gray-400">14:30</p>
134
+ </td>
135
+ <td class="py-4 px-4">
136
+ <p class="text-sm">45 min</p>
137
+ </td>
138
+ <td class="py-4 px-4">
139
+ <span class="text-green-400 flex items-center gap-2">
140
+ <i data-feather="check-circle" class="w-4 h-4"></i>
141
+ Concluído
142
+ </span>
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 Detalhes">
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="Download Relatório">
150
+ <i data-feather="download" class="w-4 h-4"></i>
151
+ </button>
152
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Executar Novamente">
153
+ <i data-feather="repeat" 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
+ <p class="text-sm">14/12/2024</p>
176
+ <p class="text-xs text-gray-400">11:15</p>
177
+ </td>
178
+ <td class="py-4 px-4">
179
+ <p class="text-sm">1h 20min</p>
180
+ </td>
181
+ <td class="py-4 px-4">
182
+ <span class="text-green-400 flex items-center gap-2">
183
+ <i data-feather="check-circle" class="w-4 h-4"></i>
184
+ Concluído
185
+ </span>
186
+ </td>
187
+ <td class="py-4 px-4">
188
+ <div class="flex gap-2">
189
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Visualizar Detalhes">
190
+ <i data-feather="eye" class="w-4 h-4"></i>
191
+ </button>
192
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Download Relatório">
193
+ <i data-feather="download" class="w-4 h-4"></i>
194
+ </button>
195
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Executar Novamente">
196
+ <i data-feather="repeat" class="w-4 h-4"></i>
197
+ </button>
198
+ </div>
199
+ </td>
200
+ </tr>
201
+
202
+ <tr class="border-b border-gray-700 hover:bg-gray-800 transition-colors">
203
+ <td class="py-4 px-4">
204
+ <div class="flex items-center gap-3">
205
+ <div class="w-10 h-10 bg-red-500 bg-opacity-20 rounded-lg flex items-center justify-center">
206
+ <i data-feather="map" class="text-red-400"></i>
207
+ </div>
208
+ <div>
209
+ <p class="font-semibold">Navigation App</p>
210
+ <p class="text-sm text-gray-400">v3.1.0</p>
211
+ </div>
212
+ </div>
213
+ </td>
214
+ <td class="py-4 px-4">
215
+ <span class="bg-red-500 text-white px-2 py-1 rounded-full text-xs">Android</span>
216
+ </td>
217
+ <td class="py-4 px-4">
218
+ <p class="text-sm">13/12/2024</p>
219
+ <p class="text-xs text-gray-400">16:45</p>
220
+ </td>
221
+ <td class="py-4 px-4">
222
+ <p class="text-sm">15 min</p>
223
+ </td>
224
+ <td class="py-4 px-4">
225
+ <span class="text-red-400 flex items-center gap-2">
226
+ <i data-feather="x-circle" class="w-4 h-4"></i>
227
+ Falhou
228
+ </span>
229
+ </td>
230
+ <td class="py-4 px-4">
231
+ <div class="flex gap-2">
232
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Visualizar Detalhes">
233
+ <i data-feather="eye" class="w-4 h-4"></i>
234
+ </button>
235
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Download Relatório">
236
+ <i data-feather="download" class="w-4 h-4"></i>
237
+ </button>
238
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Executar Novamente">
239
+ <i data-feather="repeat" class="w-4 h-4"></i>
240
+ </button>
241
+ </div>
242
+ </td>
243
+ </tr>
244
+
245
+ <tr class="hover:bg-gray-800 transition-colors">
246
+ <td class="py-4 px-4">
247
+ <div class="flex items-center gap-3">
248
+ <div class="w-10 h-10 bg-yellow-500 bg-opacity-20 rounded-lg flex items-center justify-center">
249
+ <i data-feather="video" class="text-yellow-400"></i>
250
+ </div>
251
+ <div>
252
+ <p class="font-semibold">Streaming App</p>
253
+ <p class="text-sm text-gray-400">v1.5.0</p>
254
+ </div>
255
+ </div>
256
+ </td>
257
+ <td class="py-4 px-4">
258
+ <span class="bg-green-500 text-white px-2 py-1 rounded-full text-xs">Android</span>
259
+ </td>
260
+ <td class="py-4 px-4">
261
+ <p class="text-sm">12/12/2024</p>
262
+ <p class="text-xs text-gray-400">09:30</p>
263
+ </td>
264
+ <td class="py-4 px-4">
265
+ <p class="text-sm">30 min</p>
266
+ </td>
267
+ <td class="py-4 px-4">
268
+ <span class="text-green-400 flex items-center gap-2">
269
+ <i data-feather="check-circle" class="w-4 h-4"></i>
270
+ Concluído
271
+ </span>
272
+ </td>
273
+ <td class="py-4 px-4">
274
+ <div class="flex gap-2">
275
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Visualizar Detalhes">
276
+ <i data-feather="eye" class="w-4 h-4"></i>
277
+ </button>
278
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Download Relatório">
279
+ <i data-feather="download" class="w-4 h-4"></i>
280
+ </button>
281
+ <button class="p-2 hover:bg-gray-700 rounded-lg transition-colors" title="Executar Novamente">
282
+ <i data-feather="repeat" class="w-4 h-4"></i>
283
+ </button>
284
+ </div>
285
+ </td>
286
+ </tr>
287
+ </tbody>
288
+ </table>
289
+ </div>
290
+
291
+ <!-- Paginação -->
292
+ <div class="flex items-center justify-between mt-6 pt-6 border-t border-gray-700">
293
+ <p class="text-sm text-gray-400">Mostrando 4 de 156 testes</p>
294
+ <div class="flex gap-2">
295
+ <button class="px-3 py-1 border border-gray-700 rounded-lg text-gray-400 hover:bg-gray-800">
296
+ <i data-feather="chevron-left" class="w-4 h-4"></i>
297
+ </button>
298
+ <button class="px-3 py-1 bg-secondary text-white rounded-lg">1</button>
299
+ <button class="px-3 py-1 border border-gray-700 rounded-lg text-gray-400 hover:bg-gray-800">2</button>
300
+ <button class="px-3 py-1 border border-gray-700 rounded-lg text-gray-400 hover:bg-gray-800">3</button>
301
+ <button class="px-3 py-1 border border-gray-700 rounded-lg text-gray-400 hover:bg-gray-800">
302
+ <i data-feather="chevron-right" class="w-4 h-4"></i>
303
+ </button>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </main>
309
+
310
+ <script src="components/sidebar.js"></script>
311
+ <script src="script.js"></script>
312
+ <script>
313
+ feather.replace();
314
+
315
+ // Atualizar sidebar para marcar a página ativa
316
+ document.addEventListener('DOMContentLoaded', function() {
317
+ const sidebar = document.querySelector('custom-sidebar');
318
+ if (sidebar) {
319
+ const navItems = sidebar.shadowRoot.querySelectorAll('.nav-item');
320
+ navItems.forEach(item => {
321
+ if (item.querySelector('span').textContent === 'Histórico') {
322
+ item.classList.add('active');
323
+ } else {
324
+ item.classList.remove('active');
325
+ }
326
+ });
327
+ }
328
+ });
329
+ </script>
330
+ </body>
331
+ </html>