Hugging Face's logo

Spaces:
dandydow
/
frontbotcontrol
Running

App Files Community
dandydow commited on
Commit
5ce3ff6
·
verified ·
1 Parent(s): 3a4fd26

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +604 -556
  2. prompts.txt +1 -0
index.html CHANGED
@@ -1,603 +1,508 @@
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>BotMaster - Dashboard de Controle</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  <style>
10
- .sidebar {
11
  transition: all 0.3s ease;
12
  }
13
-
14
- .card-hover {
15
- transition: all 0.3s ease;
16
  }
17
-
18
- .card-hover:hover {
19
- transform: translateY(-5px);
20
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 
 
 
 
21
  }
22
-
23
- .progress-bar {
24
- transition: width 1s ease-in-out;
 
 
25
  }
26
-
27
- .glow-on-active {
28
- box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
29
  }
30
-
31
- .social-icon {
32
- transition: all 0.3s ease;
 
33
  }
34
-
35
- .social-icon:hover {
36
- transform: scale(1.1);
 
 
37
  }
38
  </style>
39
  </head>
40
- <body class="bg-gray-100 font-sans">
41
  <div class="flex h-screen overflow-hidden">
42
  <!-- Sidebar -->
43
- <div class="sidebar bg-gray-800 text-white w-64 flex-shrink-0">
44
  <div class="p-4 border-b border-gray-700">
45
- <div class="flex items-center space-x-2">
46
- <i class="fas fa-robot text-blue-400 text-2xl"></i>
47
- <h1 class="text-xl font-bold">Sonny Inc.</h1>
48
- </div>
49
  </div>
50
- <nav class="p-4">
51
- <div class="mb-8">
52
- <h3 class="text-xs uppercase text-gray-400 font-semibold mb-4">Menu Principal</h3>
53
- <ul class="space-y-2">
54
- <li>
55
- <a href="#" class="flex items-center space-x-2 p-2 rounded bg-gray-700 text-blue-300">
56
- <i class="fas fa-tachometer-alt w-5"></i>
57
- <span>Dashboard</span>
58
- </a>
59
- </li>
60
- <li>
61
- <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-700">
62
- <i class="fas fa-robot w-5"></i>
63
- <span>Meus Bots</span>
64
- </a>
65
- </li>
66
- <li>
67
- <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-700">
68
- <i class="fas fa-globe w-5"></i>
69
- <span>Proxies</span>
70
- </a>
71
- </li>
72
- <li>
73
- <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-700">
74
- <i class="fab fa-facebook w-5"></i>
75
- <span>Redes Sociais</span>
76
- </a>
77
- </li>
78
- <li>
79
- <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-700">
80
- <i class="fas fa-tasks w-5"></i>
81
- <span>Tarefas</span>
82
- </a>
83
- </li>
84
- </ul>
85
- </div>
86
-
87
- <div class="mb-8">
88
- <h3 class="text-xs uppercase text-gray-400 font-semibold mb-4">Configurações</h3>
89
- <ul class="space-y-2">
90
- <li>
91
- <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-700">
92
- <i class="fas fa-cog w-5"></i>
93
- <span>Configurações</span>
94
- </a>
95
- </li>
96
- <li>
97
- <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-700">
98
- <i class="fas fa-shield-alt w-5"></i>
99
- <span>Segurança</span>
100
- </a>
101
- </li>
102
- <li>
103
- <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-700">
104
- <i class="fas fa-users w-5"></i>
105
- <span>Usuários</span>
106
- </a>
107
- </li>
108
- </ul>
109
- </div>
110
-
111
- <div class="p-4 bg-gray-700 rounded-lg">
112
- <div class="flex items-center space-x-3 mb-3">
113
- <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
114
- <i class="fas fa-user"></i>
115
- </div>
116
- <div>
117
- <p class="font-medium">Admin User</p>
118
- <p class="text-xs text-gray-300">admin@botmaster.com</p>
119
- </div>
 
 
 
 
 
 
 
 
 
 
 
120
  </div>
121
- <button class="w-full bg-gray-600 hover:bg-gray-500 text-white py-1 rounded text-sm">
122
- <i class="fas fa-sign-out-alt mr-1"></i> Sair
123
- </button>
124
  </div>
125
- </nav>
126
  </div>
127
-
128
  <!-- Main Content -->
129
  <div class="flex-1 overflow-auto">
130
- <!-- Top Navigation -->
131
- <header class="bg-white shadow-sm p-4 flex justify-between items-center">
132
- <div class="flex items-center space-x-4">
133
- <button class="text-gray-500 hover:text-gray-700">
134
- <i class="fas fa-bars"></i>
135
- </button>
136
- <h2 class="text-xl font-semibold text-gray-800">Dashboard de Controle</h2>
137
- </div>
138
  <div class="flex items-center space-x-4">
139
  <div class="relative">
140
- <button class="text-gray-500 hover:text-gray-700">
141
- <i class="fas fa-bell"></i>
142
- </button>
143
- <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
144
- </div>
145
- <div class="relative">
146
- <button class="text-gray-500 hover:text-gray-700">
147
- <i class="fas fa-envelope"></i>
148
- </button>
149
- <span class="absolute top-0 right-0 w-2 h-2 bg-blue-500 rounded-full"></span>
150
  </div>
 
 
 
 
151
  </div>
152
  </header>
153
-
154
- <!-- Main Content Area -->
155
  <main class="p-6">
156
  <!-- Stats Cards -->
157
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
158
- <div class="card-hover bg-white rounded-lg shadow p-6">
159
- <div class="flex items-center justify-between">
160
  <div>
161
- <p class="text-gray-500 text-sm">Bots Ativos</p>
162
- <h3 class="text-2xl font-bold">142</h3>
163
  </div>
164
- <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
165
- <i class="fas fa-robot text-blue-500"></i>
166
  </div>
167
  </div>
168
  <div class="mt-4">
169
- <div class="flex justify-between text-sm mb-1">
170
- <span>Online</span>
171
- <span>87%</span>
172
- </div>
173
- <div class="w-full bg-gray-200 rounded-full h-2">
174
- <div class="bg-blue-500 h-2 rounded-full progress-bar" style="width: 87%"></div>
175
  </div>
176
  </div>
177
  </div>
178
-
179
- <div class="card-hover bg-white rounded-lg shadow p-6">
180
- <div class="flex items-center justify-between">
181
  <div>
182
- <p class="text-gray-500 text-sm">Proxies Ativos</p>
183
- <h3 class="text-2xl font-bold">256</h3>
184
  </div>
185
- <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
186
- <i class="fas fa-globe text-green-500"></i>
187
  </div>
188
  </div>
189
  <div class="mt-4">
190
- <div class="flex justify-between text-sm mb-1">
191
- <span>Funcionando</span>
192
- <span>92%</span>
193
- </div>
194
- <div class="w-full bg-gray-200 rounded-full h-2">
195
- <div class="bg-green-500 h-2 rounded-full progress-bar" style="width: 92%"></div>
196
  </div>
197
  </div>
198
  </div>
199
-
200
- <div class="card-hover bg-white rounded-lg shadow p-6">
201
- <div class="flex items-center justify-between">
202
  <div>
203
- <p class="text-gray-500 text-sm">Tarefas Hoje</p>
204
- <h3 class="text-2xl font-bold">1,284</h3>
205
  </div>
206
- <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
207
- <i class="fas fa-tasks text-purple-500"></i>
208
  </div>
209
  </div>
210
  <div class="mt-4">
211
- <div class="flex justify-between text-sm mb-1">
212
- <span>Concluídas</span>
213
- <span>64%</span>
214
- </div>
215
- <div class="w-full bg-gray-200 rounded-full h-2">
216
- <div class="bg-purple-500 h-2 rounded-full progress-bar" style="width: 64%"></div>
217
  </div>
218
  </div>
219
  </div>
220
-
221
- <div class="card-hover bg-white rounded-lg shadow p-6">
222
- <div class="flex items-center justify-between">
223
  <div>
224
- <p class="text-gray-500 text-sm">Alertas</p>
225
- <h3 class="text-2xl font-bold">8</h3>
226
  </div>
227
- <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
228
- <i class="fas fa-exclamation-triangle text-red-500"></i>
229
  </div>
230
  </div>
231
  <div class="mt-4">
232
- <div class="flex justify-between text-sm mb-1">
233
- <span>Críticos</span>
234
- <span>3</span>
235
- </div>
236
- <div class="w-full bg-gray-200 rounded-full h-2">
237
- <div class="bg-red-500 h-2 rounded-full progress-bar" style="width: 37.5%"></div>
238
  </div>
239
  </div>
240
  </div>
241
  </div>
242
-
243
- <!-- Bot Control Section -->
244
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
245
- <!-- Bot List -->
246
- <div class="lg:col-span-2 bg-white rounded-lg shadow overflow-hidden">
247
- <div class="p-4 border-b flex justify-between items-center">
248
- <h3 class="font-semibold text-lg">Controle de Bots</h3>
249
- <button class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-sm">
250
- <i class="fas fa-plus mr-1"></i> Novo Bot
 
 
251
  </button>
252
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
253
  <div class="overflow-x-auto">
254
- <table class="min-w-full divide-y divide-gray-200">
255
- <thead class="bg-gray-50">
256
  <tr>
257
- <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
258
- <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
259
- <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rede Social</th>
260
- <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>
 
261
  </tr>
262
  </thead>
263
- <tbody class="bg-white divide-y divide-gray-200">
264
  <tr>
265
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">#BOT001</td>
266
- <td class="px-4 py-3 whitespace-nowrap">
 
 
 
 
 
 
 
 
 
 
267
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
268
  Online
269
  </span>
270
  </td>
271
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
272
- <i class="fab fa-facebook mr-2 text-blue-600"></i> Facebook
 
 
273
  </td>
274
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
275
- <button class="text-blue-500 hover:text-blue-700 mr-2">
276
- <i class="fas fa-play"></i>
277
- </button>
278
- <button class="text-yellow-500 hover:text-yellow-700 mr-2">
279
- <i class="fas fa-pause"></i>
280
- </button>
281
- <button class="text-red-500 hover:text-red-700">
282
- <i class="fas fa-stop"></i>
283
- </button>
284
  </td>
285
  </tr>
286
  <tr>
287
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">#BOT002</td>
288
- <td class="px-4 py-3 whitespace-nowrap">
289
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
290
- Pausado
291
- </span>
292
- </td>
293
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
294
- <i class="fab fa-instagram mr-2 text-pink-600"></i> Instagram
295
- </td>
296
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
297
- <button class="text-blue-500 hover:text-blue-700 mr-2">
298
- <i class="fas fa-play"></i>
299
- </button>
300
- <button class="text-yellow-500 hover:text-yellow-700 mr-2">
301
- <i class="fas fa-pause"></i>
302
- </button>
303
- <button class="text-red-500 hover:text-red-700">
304
- <i class="fas fa-stop"></i>
305
- </button>
306
  </td>
307
- </tr>
308
- <tr>
309
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">#BOT003</td>
310
- <td class="px-4 py-3 whitespace-nowrap">
311
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
312
  Online
313
  </span>
314
  </td>
315
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
316
- <i class="fab fa-twitter mr-2 text-blue-400"></i> Twitter
 
 
317
  </td>
318
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
319
- <button class="text-blue-500 hover:text-blue-700 mr-2">
320
- <i class="fas fa-play"></i>
321
- </button>
322
- <button class="text-yellow-500 hover:text-yellow-700 mr-2">
323
- <i class="fas fa-pause"></i>
324
- </button>
325
- <button class="text-red-500 hover:text-red-700">
326
- <i class="fas fa-stop"></i>
327
- </button>
328
  </td>
329
  </tr>
330
  <tr>
331
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">#BOT004</td>
332
- <td class="px-4 py-3 whitespace-nowrap">
333
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
334
- Offline
 
 
 
 
 
 
 
 
 
 
335
  </span>
336
  </td>
337
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
338
- <i class="fab fa-youtube mr-2 text-red-600"></i> YouTube
 
 
339
  </td>
340
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
341
- <button class="text-blue-500 hover:text-blue-700 mr-2">
342
- <i class="fas fa-play"></i>
343
- </button>
344
- <button class="text-yellow-500 hover:text-yellow-700 mr-2">
345
- <i class="fas fa-pause"></i>
346
- </button>
347
- <button class="text-red-500 hover:text-red-700">
348
- <i class="fas fa-stop"></i>
349
- </button>
350
  </td>
351
  </tr>
352
  </tbody>
353
  </table>
354
  </div>
355
- <div class="p-4 border-t flex justify-between items-center bg-gray-50">
356
- <span class="text-sm text-gray-500">Mostrando 4 de 142 bots</span>
357
- <div class="flex space-x-2">
358
- <button class="px-3 py-1 border rounded text-sm text-gray-700 hover:bg-gray-100">Anterior</button>
359
- <button class="px-3 py-1 border rounded text-sm bg-blue-500 text-white hover:bg-blue-600">Próxima</button>
360
- </div>
361
- </div>
362
- </div>
363
-
364
- <!-- Proxy Management -->
365
- <div class="bg-white rounded-lg shadow overflow-hidden">
366
- <div class="p-4 border-b">
367
- <h3 class="font-semibold text-lg">Gerenciamento de Proxies</h3>
368
- </div>
369
- <div class="p-4">
370
- <div class="mb-4">
371
- <label class="block text-gray-700 text-sm font-medium mb-2">Adicionar Proxy</label>
372
- <div class="flex">
373
- <input type="text" class="flex-1 border rounded-l px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500" placeholder="IP:Porta">
374
- <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-r text-sm">
375
- <i class="fas fa-plus"></i>
376
- </button>
377
- </div>
378
- </div>
379
-
380
- <div class="mb-4">
381
- <label class="block text-gray-700 text-sm font-medium mb-2">Tipo de Proxy</label>
382
- <div class="grid grid-cols-3 gap-2">
383
- <button class="proxy-type-btn bg-blue-500 text-white py-2 rounded text-sm" data-type="http">
384
- HTTP
385
- </button>
386
- <button class="proxy-type-btn bg-gray-200 hover:bg-gray-300 py-2 rounded text-sm" data-type="socks4">
387
- SOCKS4
388
- </button>
389
- <button class="proxy-type-btn bg-gray-200 hover:bg-gray-300 py-2 rounded text-sm" data-type="socks5">
390
- SOCKS5
391
- </button>
392
- </div>
393
- </div>
394
-
395
- <div class="mb-4">
396
- <label class="block text-gray-700 text-sm font-medium mb-2">Testar Proxies</label>
397
- <div class="flex items-center">
398
- <input type="number" class="w-20 border rounded px-3 py-2 text-sm mr-2 focus:outline-none focus:ring-1 focus:ring-blue-500" value="10">
399
- <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded text-sm">
400
- <i class="fas fa-play mr-1"></i> Testar
401
- </button>
402
- </div>
403
- </div>
404
-
405
- <div class="border-t pt-4">
406
- <h4 class="text-sm font-medium text-gray-700 mb-2">Status dos Proxies</h4>
407
- <div class="space-y-2">
408
- <div>
409
- <div class="flex justify-between text-sm mb-1">
410
- <span>Funcionando</span>
411
- <span>236 (92%)</span>
412
- </div>
413
- <div class="w-full bg-gray-200 rounded-full h-2">
414
- <div class="bg-green-500 h-2 rounded-full" style="width: 92%"></div>
415
- </div>
416
- </div>
417
- <div>
418
- <div class="flex justify-between text-sm mb-1">
419
- <span>Lentos</span>
420
- <span>12 (5%)</span>
421
- </div>
422
- <div class="w-full bg-gray-200 rounded-full h-2">
423
- <div class="bg-yellow-500 h-2 rounded-full" style="width: 5%"></div>
424
- </div>
425
- </div>
426
- <div>
427
- <div class="flex justify-between text-sm mb-1">
428
- <span>Inativos</span>
429
- <span>8 (3%)</span>
430
- </div>
431
- <div class="w-full bg-gray-200 rounded-full h-2">
432
- <div class="bg-red-500 h-2 rounded-full" style="width: 3%"></div>
433
- </div>
434
- </div>
435
- </div>
436
- </div>
437
- </div>
438
  </div>
439
  </div>
440
-
441
- <!-- Social Media Tasks -->
442
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
443
- <!-- Task Queue -->
444
- <div class="bg-white rounded-lg shadow overflow-hidden">
445
- <div class="p-4 border-b flex justify-between items-center">
446
- <h3 class="font-semibold text-lg">Fila de Tarefas</h3>
447
- <button class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-sm">
448
- <i class="fas fa-plus mr-1"></i> Nova Tarefa
 
 
449
  </button>
450
  </div>
451
- <div class="p-4">
452
- <div class="space-y-4">
453
- <div class="flex items-center justify-between p-3 border rounded hover:bg-gray-50">
454
- <div class="flex items-center">
455
- <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
456
- <i class="fab fa-facebook text-blue-600"></i>
457
- </div>
458
- <div>
459
- <h4 class="font-medium">Curtir Página</h4>
460
- <p class="text-xs text-gray-500">Facebook - #BOT001</p>
461
- </div>
462
- </div>
463
- <div class="text-right">
464
- <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Em execução</span>
465
- <p class="text-xs text-gray-500 mt-1">10/50 concluído</p>
466
- </div>
467
- </div>
468
-
469
- <div class="flex items-center justify-between p-3 border rounded hover:bg-gray-50">
470
- <div class="flex items-center">
471
- <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center mr-3">
472
- <i class="fab fa-instagram text-pink-600"></i>
473
- </div>
474
- <div>
475
- <h4 class="font-medium">Seguir Usuários</h4>
476
- <p class="text-xs text-gray-500">Instagram - #BOT002</p>
477
- </div>
478
- </div>
479
- <div class="text-right">
480
- <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">Pausado</span>
481
- <p class="text-xs text-gray-500 mt-1">25/100 concluído</p>
482
- </div>
483
- </div>
484
-
485
- <div class="flex items-center justify-between p-3 border rounded hover:bg-gray-50">
486
- <div class="flex items-center">
487
- <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
488
- <i class="fab fa-twitter text-blue-400"></i>
489
- </div>
490
- <div>
491
- <h4 class="font-medium">Retweetar</h4>
492
- <p class="text-xs text-gray-500">Twitter - #BOT003</p>
493
- </div>
494
- </div>
495
- <div class="text-right">
496
- <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Concluído</span>
497
- <p class="text-xs text-gray-500 mt-1">100/100 concluído</p>
498
- </div>
499
- </div>
500
- </div>
501
- </div>
502
- </div>
503
-
504
- <!-- Social Media Stats -->
505
- <div class="bg-white rounded-lg shadow overflow-hidden">
506
- <div class="p-4 border-b">
507
- <h3 class="font-semibold text-lg">Estatísticas das Redes Sociais</h3>
508
- </div>
509
- <div class="p-4">
510
- <div class="grid grid-cols-2 gap-4 mb-6">
511
- <div class="p-3 border rounded text-center">
512
- <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-2">
513
- <i class="fab fa-facebook text-blue-600 text-xl"></i>
514
- </div>
515
- <h4 class="font-medium">Facebook</h4>
516
- <p class="text-sm text-gray-500">1,240 ações</p>
517
- </div>
518
- <div class="p-3 border rounded text-center">
519
- <div class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center mx-auto mb-2">
520
- <i class="fab fa-instagram text-pink-600 text-xl"></i>
521
- </div>
522
- <h4 class="font-medium">Instagram</h4>
523
- <p class="text-sm text-gray-500">980 ações</p>
524
- </div>
525
- <div class="p-3 border rounded text-center">
526
- <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-2">
527
- <i class="fab fa-twitter text-blue-400 text-xl"></i>
528
- </div>
529
- <h4 class="font-medium">Twitter</h4>
530
- <p class="text-sm text-gray-500">750 ações</p>
531
- </div>
532
- <div class="p-3 border rounded text-center">
533
- <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-2">
534
- <i class="fab fa-youtube text-red-600 text-xl"></i>
535
- </div>
536
- <h4 class="font-medium">YouTube</h4>
537
- <p class="text-sm text-gray-500">320 ações</p>
538
- </div>
539
- </div>
540
-
541
- <div>
542
- <h4 class="font-medium mb-3">Ações por Dia</h4>
543
- <div class="h-40">
544
- <!-- Placeholder for chart -->
545
- <div class="bg-gray-100 rounded h-full flex items-center justify-center text-gray-400">
546
- <i class="fas fa-chart-bar text-2xl mr-2"></i>
547
- Gráfico de Ações
548
- </div>
549
- </div>
550
- </div>
551
- </div>
552
- </div>
553
- </div>
554
-
555
- <!-- Recent Activity -->
556
- <div class="bg-white rounded-lg shadow overflow-hidden">
557
- <div class="p-4 border-b">
558
- <h3 class="font-semibold text-lg">Atividade Recente</h3>
559
  </div>
560
  <div class="p-4">
561
- <div class="space-y-4">
562
- <div class="flex items-start">
563
- <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3 mt-1">
564
- <i class="fas fa-check text-green-500"></i>
565
- </div>
566
- <div>
567
- <p class="text-sm"><span class="font-medium">Bot #BOT003</span> completou 50 retweets no Twitter</p>
568
- <p class="text-xs text-gray-500">5 minutos atrás</p>
569
- </div>
570
- </div>
571
-
572
- <div class="flex items-start">
573
- <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-3 mt-1">
574
- <i class="fas fa-exclamation text-red-500"></i>
575
- </div>
576
- <div>
577
- <p class="text-sm"><span class="font-medium">Bot #BOT002</span> encontrou um erro ao seguir no Instagram</p>
578
- <p class="text-xs text-gray-500">15 minutos atrás</p>
579
- </div>
580
- </div>
581
-
582
- <div class="flex items-start">
583
- <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3 mt-1">
584
- <i class="fas fa-info-circle text-blue-500"></i>
585
- </div>
586
- <div>
587
- <p class="text-sm"><span class="font-medium">Bot #BOT001</span> iniciou nova tarefa de curtidas no Facebook</p>
588
- <p class="text-xs text-gray-500">30 minutos atrás</p>
589
- </div>
590
- </div>
591
-
592
- <div class="flex items-start">
593
- <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-3 mt-1">
594
- <i class="fas fa-sync-alt text-yellow-500"></i>
595
- </div>
596
- <div>
597
- <p class="text-sm"><span class="font-medium">Sistema</span> atualizou 12 proxies no banco de dados</p>
598
- <p class="text-xs text-gray-500">1 hora atrás</p>
599
- </div>
600
- </div>
601
  </div>
602
  </div>
603
  </div>
@@ -606,72 +511,215 @@
606
  </div>
607
 
608
  <script>
609
- // Proxy type selection
610
- document.querySelectorAll('.proxy-type-btn').forEach(btn => {
611
- btn.addEventListener('click', function() {
612
- document.querySelectorAll('.proxy-type-btn').forEach(b => {
613
- b.classList.remove('bg-blue-500', 'text-white');
614
- b.classList.add('bg-gray-200', 'hover:bg-gray-300');
615
- });
616
-
617
- this.classList.remove('bg-gray-200', 'hover:bg-gray-300');
618
- this.classList.add('bg-blue-500', 'text-white');
619
-
620
- // You would add logic here to handle the proxy type selection
621
- console.log('Proxy type selected:', this.dataset.type);
622
  });
623
- });
624
-
625
- // Bot control buttons
626
- document.querySelectorAll('button[class*="fa-play"]').forEach(btn => {
627
- btn.addEventListener('click', function() {
628
- const row = this.closest('tr');
629
- const statusCell = row.querySelector('td:nth-child(2) span');
630
-
631
- statusCell.classList.remove('bg-yellow-100', 'text-yellow-800', 'bg-red-100', 'text-red-800');
632
- statusCell.classList.add('bg-green-100', 'text-green-800');
633
- statusCell.textContent = 'Online';
634
-
635
- // You would add logic here to start the bot
636
- console.log('Starting bot:', row.querySelector('td:first-child').textContent);
637
  });
638
  });
639
 
640
- document.querySelectorAll('button[class*="fa-pause"]').forEach(btn => {
641
- btn.addEventListener('click', function() {
642
- const row = this.closest('tr');
643
- const statusCell = row.querySelector('td:nth-child(2) span');
644
-
645
- statusCell.classList.remove('bg-green-100', 'text-green-800', 'bg-red-100', 'text-red-800');
646
- statusCell.classList.add('bg-yellow-100', 'text-yellow-800');
647
- statusCell.textContent = 'Pausado';
648
-
649
- // You would add logic here to pause the bot
650
- console.log('Pausing bot:', row.querySelector('td:first-child').textContent);
651
- });
652
- });
 
 
 
 
 
 
 
 
 
 
 
653
 
654
- document.querySelectorAll('button[class*="fa-stop"]').forEach(btn => {
655
- btn.addEventListener('click', function() {
656
- const row = this.closest('tr');
657
- const statusCell = row.querySelector('td:nth-child(2) span');
658
-
659
- statusCell.classList.remove('bg-green-100', 'text-green-800', 'bg-yellow-100', 'text-yellow-800');
660
- statusCell.classList.add('bg-red-100', 'text-red-800');
661
- statusCell.textContent = 'Offline';
662
-
663
- // You would add logic here to stop the bot
664
- console.log('Stopping bot:', row.querySelector('td:first-child').textContent);
665
- });
666
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
667
 
668
- // Simulate progress bar animation
669
- setTimeout(() => {
670
- document.querySelectorAll('.progress-bar').forEach(bar => {
671
- const currentWidth = parseInt(bar.style.width);
672
- bar.style.width = (currentWidth + 5) + '%';
673
- });
674
- }, 1000);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
675
  </script>
676
  <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=dandydow/frontbotcontrol" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
677
  </html>
 
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>VPS Control Panel</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ darkMode: 'class',
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#3B82F6',
17
+ secondary: '#6366F1',
18
+ danger: '#EF4444',
19
+ dark: {
20
+ 800: '#1E293B',
21
+ 900: '#0F172A',
22
+ }
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
  <style>
29
+ .draggable-item {
30
  transition: all 0.3s ease;
31
  }
32
+ .draggable-item:hover {
33
+ transform: translateY(-2px);
34
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
35
  }
36
+ .resize-handle {
37
+ width: 10px;
38
+ height: 10px;
39
+ background-color: #3B82F6;
40
+ position: absolute;
41
+ right: 0;
42
+ bottom: 0;
43
+ cursor: nwse-resize;
44
  }
45
+ .editor-toolbar {
46
+ position: sticky;
47
+ top: 0;
48
+ z-index: 10;
49
+ background-color: #1E293B;
50
  }
51
+ .editor-content {
52
+ min-height: 300px;
53
+ border: 1px solid #334155;
54
  }
55
+ .file-upload {
56
+ position: relative;
57
+ overflow: hidden;
58
+ display: inline-block;
59
  }
60
+ .file-upload input[type="file"] {
61
+ position: absolute;
62
+ left: 0;
63
+ top: 0;
64
+ opacity: 0;
65
  }
66
  </style>
67
  </head>
68
+ <body class="bg-gray-900 text-gray-200 min-h-screen">
69
  <div class="flex h-screen overflow-hidden">
70
  <!-- Sidebar -->
71
+ <div class="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">
72
  <div class="p-4 border-b border-gray-700">
73
+ <h1 class="text-xl font-bold text-white flex items-center">
74
+ <i class="fas fa-server mr-2 text-blue-500"></i>
75
+ VPS Control
76
+ </h1>
77
  </div>
78
+ <div class="flex-1 overflow-y-auto">
79
+ <nav class="p-4">
80
+ <div class="mb-6">
81
+ <h3 class="text-xs uppercase font-semibold text-gray-400 mb-3">GERAL</h3>
82
+ <ul>
83
+ <li class="mb-2">
84
+ <a href="#" class="flex items-center p-2 rounded-lg bg-gray-700 text-white">
85
+ <i class="fas fa-tachometer-alt mr-3 text-blue-400"></i>
86
+ Dashboard
87
+ </a>
88
+ </li>
89
+ <li class="mb-2">
90
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-700">
91
+ <i class="fas fa-chart-line mr-3 text-purple-400"></i>
92
+ Estatísticas
93
+ </a>
94
+ </li>
95
+ <li class="mb-2">
96
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-700">
97
+ <i class="fas fa-shield-alt mr-3 text-yellow-400"></i>
98
+ Segurança
99
+ </a>
100
+ </li>
101
+ </ul>
102
+ </div>
103
+ <div class="mb-6">
104
+ <h3 class="text-xs uppercase font-semibold text-gray-400 mb-3">SITES</h3>
105
+ <ul>
106
+ <li class="mb-2">
107
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-700">
108
+ <i class="fas fa-globe mr-3 text-green-400"></i>
109
+ Todos os Sites
110
+ </a>
111
+ </li>
112
+ <li class="mb-2">
113
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-700">
114
+ <i class="fas fa-plus-circle mr-3 text-red-400"></i>
115
+ Adicionar Site
116
+ </a>
117
+ </li>
118
+ <li class="mb-2">
119
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-700">
120
+ <i class="fas fa-database mr-3 text-indigo-400"></i>
121
+ Bancos de Dados
122
+ </a>
123
+ </li>
124
+ </ul>
125
+ </div>
126
+ <div class="mb-6">
127
+ <h3 class="text-xs uppercase font-semibold text-gray-400 mb-3">SERVIDOR</h3>
128
+ <ul>
129
+ <li class="mb-2">
130
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-700">
131
+ <i class="fas fa-terminal mr-3 text-blue-400"></i>
132
+ Terminal
133
+ </a>
134
+ </li>
135
+ <li class="mb-2">
136
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-700">
137
+ <i class="fas fa-cogs mr-3 text-orange-400"></i>
138
+ Configurações
139
+ </a>
140
+ </li>
141
+ <li class="mb-2">
142
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-700">
143
+ <i class="fas fa-cloud-upload-alt mr-3 text-teal-400"></i>
144
+ Backups
145
+ </a>
146
+ </li>
147
+ </ul>
148
+ </div>
149
+ </nav>
150
+ </div>
151
+ <div class="p-4 border-t border-gray-700">
152
+ <div class="flex items-center">
153
+ <div class="w-10 h-10 rounded-full bg-gray-600 flex items-center justify-center">
154
+ <i class="fas fa-user text-white"></i>
155
+ </div>
156
+ <div class="ml-3">
157
+ <p class="text-sm font-medium text-white">Admin</p>
158
+ <p class="text-xs text-gray-400">Super Admin</p>
159
  </div>
 
 
 
160
  </div>
161
+ </div>
162
  </div>
163
+
164
  <!-- Main Content -->
165
  <div class="flex-1 overflow-auto">
166
+ <!-- Header -->
167
+ <header class="bg-gray-800 border-b border-gray-700 p-4 flex justify-between items-center">
168
+ <h2 class="text-xl font-semibold">Dashboard</h2>
 
 
 
 
 
169
  <div class="flex items-center space-x-4">
170
  <div class="relative">
171
+ <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
172
+ <input type="text" placeholder="Pesquisar..." class="bg-gray-700 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
 
 
 
 
 
 
 
 
173
  </div>
174
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
175
+ <i class="fas fa-plus mr-2"></i>
176
+ Novo Site
177
+ </button>
178
  </div>
179
  </header>
180
+
181
+ <!-- Dashboard Content -->
182
  <main class="p-6">
183
  <!-- Stats Cards -->
184
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
185
+ <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
186
+ <div class="flex justify-between items-start">
187
  <div>
188
+ <p class="text-gray-400">Uso de CPU</p>
189
+ <h3 class="text-2xl font-bold mt-1">24%</h3>
190
  </div>
191
+ <div class="bg-blue-500/10 p-3 rounded-full">
192
+ <i class="fas fa-microchip text-blue-500"></i>
193
  </div>
194
  </div>
195
  <div class="mt-4">
196
+ <div class="h-1 w-full bg-gray-700 rounded-full">
197
+ <div class="h-1 bg-blue-500 rounded-full" style="width: 24%"></div>
 
 
 
 
198
  </div>
199
  </div>
200
  </div>
201
+ <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
202
+ <div class="flex justify-between items-start">
 
203
  <div>
204
+ <p class="text-gray-400">Uso de Memória</p>
205
+ <h3 class="text-2xl font-bold mt-1">3.2/8GB</h3>
206
  </div>
207
+ <div class="bg-purple-500/10 p-3 rounded-full">
208
+ <i class="fas fa-memory text-purple-500"></i>
209
  </div>
210
  </div>
211
  <div class="mt-4">
212
+ <div class="h-1 w-full bg-gray-700 rounded-full">
213
+ <div class="h-1 bg-purple-500 rounded-full" style="width: 40%"></div>
 
 
 
 
214
  </div>
215
  </div>
216
  </div>
217
+ <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
218
+ <div class="flex justify-between items-start">
 
219
  <div>
220
+ <p class="text-gray-400">Armazenamento</p>
221
+ <h3 class="text-2xl font-bold mt-1">120/500GB</h3>
222
  </div>
223
+ <div class="bg-yellow-500/10 p-3 rounded-full">
224
+ <i class="fas fa-hdd text-yellow-500"></i>
225
  </div>
226
  </div>
227
  <div class="mt-4">
228
+ <div class="h-1 w-full bg-gray-700 rounded-full">
229
+ <div class="h-1 bg-yellow-500 rounded-full" style="width: 24%"></div>
 
 
 
 
230
  </div>
231
  </div>
232
  </div>
233
+ <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
234
+ <div class="flex justify-between items-start">
 
235
  <div>
236
+ <p class="text-gray-400">Sites Ativos</p>
237
+ <h3 class="text-2xl font-bold mt-1">8</h3>
238
  </div>
239
+ <div class="bg-red-500/10 p-3 rounded-full">
240
+ <i class="fas fa-globe text-red-500"></i>
241
  </div>
242
  </div>
243
  <div class="mt-4">
244
+ <div class="h-1 w-full bg-gray-700 rounded-full">
245
+ <div class="h-1 bg-red-500 rounded-full" style="width: 80%"></div>
 
 
 
 
246
  </div>
247
  </div>
248
  </div>
249
  </div>
250
+
251
+ <!-- Editor de Notícias -->
252
+ <div class="bg-gray-800 rounded-lg border border-gray-700 mb-8">
253
+ <div class="border-b border-gray-700 p-4 flex justify-between items-center">
254
+ <h3 class="font-semibold">Editor de Notícias</h3>
255
+ <div class="flex space-x-2">
256
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">
257
+ <i class="fas fa-save mr-1"></i> Salvar
258
+ </button>
259
+ <button class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm">
260
+ <i class="fas fa-eye mr-1"></i> Visualizar
261
  </button>
262
  </div>
263
+ </div>
264
+ <div class="p-4">
265
+ <div class="mb-4">
266
+ <input type="text" placeholder="Título da Matéria" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
267
+ </div>
268
+ <div class="mb-4">
269
+ <textarea placeholder="Resumo da Matéria" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" rows="2"></textarea>
270
+ </div>
271
+
272
+ <!-- Editor de Blocos Arrastáveis -->
273
+ <div id="blocks-container" class="space-y-4">
274
+ <!-- Bloco de Texto -->
275
+ <div class="draggable-item bg-gray-700 rounded-lg border border-gray-600 p-4 relative" draggable="true">
276
+ <div class="flex justify-between items-center mb-2">
277
+ <span class="text-sm font-medium text-gray-300">Bloco de Texto</span>
278
+ <div class="flex space-x-2">
279
+ <button class="text-gray-400 hover:text-white">
280
+ <i class="fas fa-cog"></i>
281
+ </button>
282
+ <button class="text-gray-400 hover:text-white">
283
+ <i class="fas fa-trash"></i>
284
+ </button>
285
+ </div>
286
+ </div>
287
+ <textarea class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500" rows="4">Digite seu conteúdo de texto aqui...</textarea>
288
+ <div class="resize-handle"></div>
289
+ </div>
290
+
291
+ <!-- Bloco de Imagem -->
292
+ <div class="draggable-item bg-gray-700 rounded-lg border border-gray-600 p-4 relative" draggable="true">
293
+ <div class="flex justify-between items-center mb-2">
294
+ <span class="text-sm font-medium text-gray-300">Bloco de Imagem</span>
295
+ <div class="flex space-x-2">
296
+ <button class="text-gray-400 hover:text-white">
297
+ <i class="fas fa-cog"></i>
298
+ </button>
299
+ <button class="text-gray-400 hover:text-white">
300
+ <i class="fas fa-trash"></i>
301
+ </button>
302
+ </div>
303
+ </div>
304
+ <div class="file-upload">
305
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm mb-2">
306
+ <i class="fas fa-upload mr-1"></i> Enviar Imagem
307
+ </button>
308
+ <input type="file" accept="image/*">
309
+ </div>
310
+ <div class="border border-dashed border-gray-600 rounded-lg p-4 text-center">
311
+ <i class="fas fa-image text-gray-500 text-4xl mb-2"></i>
312
+ <p class="text-gray-400 text-sm">Nenhuma imagem selecionada</p>
313
+ </div>
314
+ <div class="mt-2">
315
+ <input type="text" placeholder="Legenda da imagem" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
316
+ </div>
317
+ <div class="resize-handle"></div>
318
+ </div>
319
+
320
+ <!-- Bloco de Vídeo -->
321
+ <div class="draggable-item bg-gray-700 rounded-lg border border-gray-600 p-4 relative" draggable="true">
322
+ <div class="flex justify-between items-center mb-2">
323
+ <span class="text-sm font-medium text-gray-300">Bloco de Vídeo</span>
324
+ <div class="flex space-x-2">
325
+ <button class="text-gray-400 hover:text-white">
326
+ <i class="fas fa-cog"></i>
327
+ </button>
328
+ <button class="text-gray-400 hover:text-white">
329
+ <i class="fas fa-trash"></i>
330
+ </button>
331
+ </div>
332
+ </div>
333
+ <div class="file-upload">
334
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm mb-2">
335
+ <i class="fas fa-upload mr-1"></i> Enviar Vídeo
336
+ </button>
337
+ <input type="file" accept="video/*">
338
+ </div>
339
+ <div class="border border-dashed border-gray-600 rounded-lg p-4 text-center">
340
+ <i class="fas fa-video text-gray-500 text-4xl mb-2"></i>
341
+ <p class="text-gray-400 text-sm">Nenhum vídeo selecionado</p>
342
+ </div>
343
+ <div class="mt-2">
344
+ <input type="text" placeholder="Título do vídeo" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
345
+ </div>
346
+ <div class="resize-handle"></div>
347
+ </div>
348
+ </div>
349
+
350
+ <!-- Botões para adicionar novos blocos -->
351
+ <div class="mt-4 flex flex-wrap gap-2">
352
+ <button onclick="addTextBlock()" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm flex items-center">
353
+ <i class="fas fa-font mr-1"></i> Texto
354
+ </button>
355
+ <button onclick="addImageBlock()" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm flex items-center">
356
+ <i class="fas fa-image mr-1"></i> Imagem
357
+ </button>
358
+ <button onclick="addVideoBlock()" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm flex items-center">
359
+ <i class="fas fa-video mr-1"></i> Vídeo
360
+ </button>
361
+ <button onclick="addGalleryBlock()" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm flex items-center">
362
+ <i class="fas fa-images mr-1"></i> Galeria
363
+ </button>
364
+ <button onclick="addQuoteBlock()" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm flex items-center">
365
+ <i class="fas fa-quote-right mr-1"></i> Citação
366
+ </button>
367
+ </div>
368
+ </div>
369
+ </div>
370
+
371
+ <!-- Sites Ativos -->
372
+ <div class="bg-gray-800 rounded-lg border border-gray-700 mb-8">
373
+ <div class="border-b border-gray-700 p-4">
374
+ <h3 class="font-semibold">Sites Ativos</h3>
375
+ </div>
376
+ <div class="p-4">
377
  <div class="overflow-x-auto">
378
+ <table class="min-w-full divide-y divide-gray-700">
379
+ <thead>
380
  <tr>
381
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Site</th>
382
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Status</th>
383
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Uso</th>
384
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Última Atualização</th>
385
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Ações</th>
386
  </tr>
387
  </thead>
388
+ <tbody class="divide-y divide-gray-700">
389
  <tr>
390
+ <td class="px-6 py-4 whitespace-nowrap">
391
+ <div class="flex items-center">
392
+ <div class="flex-shrink-0 h-10 w-10 bg-blue-500 rounded-full flex items-center justify-center">
393
+ <i class="fas fa-globe text-white"></i>
394
+ </div>
395
+ <div class="ml-4">
396
+ <div class="text-sm font-medium text-white">meusite.com.br</div>
397
+ <div class="text-sm text-gray-400">PHP 8.1</div>
398
+ </div>
399
+ </div>
400
+ </td>
401
+ <td class="px-6 py-4 whitespace-nowrap">
402
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
403
  Online
404
  </span>
405
  </td>
406
+ <td class="px-6 py-4 whitespace-nowrap">
407
+ <div class="w-full bg-gray-700 rounded-full h-2">
408
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 45%"></div>
409
+ </div>
410
  </td>
411
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">2 horas atrás</td>
412
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
413
+ <button class="text-blue-500 hover:text-blue-700 mr-3"><i class="fas fa-cog"></i></button>
414
+ <button class="text-purple-500 hover:text-purple-700 mr-3"><i class="fas fa-terminal"></i></button>
415
+ <button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
 
 
 
 
 
416
  </td>
417
  </tr>
418
  <tr>
419
+ <td class="px-6 py-4 whitespace-nowrap">
420
+ <div class="flex items-center">
421
+ <div class="flex-shrink-0 h-10 w-10 bg-purple-500 rounded-full flex items-center justify-center">
422
+ <i class="fas fa-newspaper text-white"></i>
423
+ </div>
424
+ <div class="ml-4">
425
+ <div class="text-sm font-medium text-white">noticias.com.br</div>
426
+ <div class="text-sm text-gray-400">Node.js</div>
427
+ </div>
428
+ </div>
 
 
 
 
 
 
 
 
 
429
  </td>
430
+ <td class="px-6 py-4 whitespace-nowrap">
 
 
 
431
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
432
  Online
433
  </span>
434
  </td>
435
+ <td class="px-6 py-4 whitespace-nowrap">
436
+ <div class="w-full bg-gray-700 rounded-full h-2">
437
+ <div class="bg-purple-500 h-2 rounded-full" style="width: 72%"></div>
438
+ </div>
439
  </td>
440
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">15 minutos atrás</td>
441
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
442
+ <button class="text-blue-500 hover:text-blue-700 mr-3"><i class="fas fa-cog"></i></button>
443
+ <button class="text-purple-500 hover:text-purple-700 mr-3"><i class="fas fa-terminal"></i></button>
444
+ <button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
 
 
 
 
 
445
  </td>
446
  </tr>
447
  <tr>
448
+ <td class="px-6 py-4 whitespace-nowrap">
449
+ <div class="flex items-center">
450
+ <div class="flex-shrink-0 h-10 w-10 bg-red-500 rounded-full flex items-center justify-center">
451
+ <i class="fas fa-shopping-cart text-white"></i>
452
+ </div>
453
+ <div class="ml-4">
454
+ <div class="text-sm font-medium text-white">loja.com.br</div>
455
+ <div class="text-sm text-gray-400">PHP 7.4</div>
456
+ </div>
457
+ </div>
458
+ </td>
459
+ <td class="px-6 py-4 whitespace-nowrap">
460
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
461
+ Manutenção
462
  </span>
463
  </td>
464
+ <td class="px-6 py-4 whitespace-nowrap">
465
+ <div class="w-full bg-gray-700 rounded-full h-2">
466
+ <div class="bg-red-500 h-2 rounded-full" style="width: 18%"></div>
467
+ </div>
468
  </td>
469
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">1 dia atrás</td>
470
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
471
+ <button class="text-blue-500 hover:text-blue-700 mr-3"><i class="fas fa-cog"></i></button>
472
+ <button class="text-purple-500 hover:text-purple-700 mr-3"><i class="fas fa-terminal"></i></button>
473
+ <button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
 
 
 
 
 
474
  </td>
475
  </tr>
476
  </tbody>
477
  </table>
478
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
479
  </div>
480
  </div>
481
+
482
+ <!-- Terminal Virtual -->
483
+ <div class="bg-gray-800 rounded-lg border border-gray-700">
484
+ <div class="border-b border-gray-700 p-4 flex justify-between items-center">
485
+ <h3 class="font-semibold">Terminal SSH</h3>
486
+ <div class="flex space-x-2">
487
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">
488
+ <i class="fas fa-play mr-1"></i> Conectar
489
+ </button>
490
+ <button class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm">
491
+ <i class="fas fa-stop mr-1"></i> Parar
492
  </button>
493
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
494
  </div>
495
  <div class="p-4">
496
+ <div class="bg-black rounded-lg p-4 font-mono text-sm h-64 overflow-y-auto">
497
+ <div class="text-green-400">user@vps:~$ <span class="text-white">sudo apt update</span></div>
498
+ <div class="text-gray-400 mt-2">Hit:1 http://archive.ubuntu.com/ubuntu focal InRelease</div>
499
+ <div class="text-gray-400">Get:2 http://archive.ubuntu.com/ubuntu focal-updates InRelease [114 kB]</div>
500
+ <div class="text-gray-400">Get:3 http://security.ubuntu.com/ubuntu focal-security InRelease [114 kB]</div>
501
+ <div class="text-gray-400">Fetched 228 kB in 1s (214 kB/s)</div>
502
+ <div class="text-gray-400">Reading package lists... Done</div>
503
+ <div class="text-gray-400">Building dependency tree</div>
504
+ <div class="text-gray-400">Reading state information... Done</div>
505
+ <div class="text-green-400 mt-2">user@vps:~$ <span class="text-white blink">_</span></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
506
  </div>
507
  </div>
508
  </div>
 
511
  </div>
512
 
513
  <script>
514
+ // Inicializar arrastar e soltar
515
+ document.addEventListener('DOMContentLoaded', function() {
516
+ new Sortable(document.getElementById('blocks-container'), {
517
+ animation: 150,
518
+ handle: '.draggable-item',
519
+ ghostClass: 'bg-blue-500/10'
 
 
 
 
 
 
 
520
  });
521
+
522
+ // Tornar os blocos redimensionáveis
523
+ document.querySelectorAll('.resize-handle').forEach(handle => {
524
+ handle.addEventListener('mousedown', initResize);
 
 
 
 
 
 
 
 
 
 
525
  });
526
  });
527
 
528
+ // Funções para adicionar novos blocos
529
+ function addTextBlock() {
530
+ const container = document.getElementById('blocks-container');
531
+ const newBlock = document.createElement('div');
532
+ newBlock.className = 'draggable-item bg-gray-700 rounded-lg border border-gray-600 p-4 relative';
533
+ newBlock.setAttribute('draggable', 'true');
534
+ newBlock.innerHTML = `
535
+ <div class="flex justify-between items-center mb-2">
536
+ <span class="text-sm font-medium text-gray-300">Bloco de Texto</span>
537
+ <div class="flex space-x-2">
538
+ <button class="text-gray-400 hover:text-white">
539
+ <i class="fas fa-cog"></i>
540
+ </button>
541
+ <button class="text-gray-400 hover:text-white">
542
+ <i class="fas fa-trash"></i>
543
+ </button>
544
+ </div>
545
+ </div>
546
+ <textarea class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500" rows="4">Digite seu conteúdo de texto aqui...</textarea>
547
+ <div class="resize-handle"></div>
548
+ `;
549
+ container.appendChild(newBlock);
550
+ newBlock.querySelector('.resize-handle').addEventListener('mousedown', initResize);
551
+ }
552
 
553
+ function addImageBlock() {
554
+ const container = document.getElementById('blocks-container');
555
+ const newBlock = document.createElement('div');
556
+ newBlock.className = 'draggable-item bg-gray-700 rounded-lg border border-gray-600 p-4 relative';
557
+ newBlock.setAttribute('draggable', 'true');
558
+ newBlock.innerHTML = `
559
+ <div class="flex justify-between items-center mb-2">
560
+ <span class="text-sm font-medium text-gray-300">Bloco de Imagem</span>
561
+ <div class="flex space-x-2">
562
+ <button class="text-gray-400 hover:text-white">
563
+ <i class="fas fa-cog"></i>
564
+ </button>
565
+ <button class="text-gray-400 hover:text-white">
566
+ <i class="fas fa-trash"></i>
567
+ </button>
568
+ </div>
569
+ </div>
570
+ <div class="file-upload">
571
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm mb-2">
572
+ <i class="fas fa-upload mr-1"></i> Enviar Imagem
573
+ </button>
574
+ <input type="file" accept="image/*">
575
+ </div>
576
+ <div class="border border-dashed border-gray-600 rounded-lg p-4 text-center">
577
+ <i class="fas fa-image text-gray-500 text-4xl mb-2"></i>
578
+ <p class="text-gray-400 text-sm">Nenhuma imagem selecionada</p>
579
+ </div>
580
+ <div class="mt-2">
581
+ <input type="text" placeholder="Legenda da imagem" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
582
+ </div>
583
+ <div class="resize-handle"></div>
584
+ `;
585
+ container.appendChild(newBlock);
586
+ newBlock.querySelector('.resize-handle').addEventListener('mousedown', initResize);
587
+ }
588
 
589
+ function addVideoBlock() {
590
+ const container = document.getElementById('blocks-container');
591
+ const newBlock = document.createElement('div');
592
+ newBlock.className = 'draggable-item bg-gray-700 rounded-lg border border-gray-600 p-4 relative';
593
+ newBlock.setAttribute('draggable', 'true');
594
+ newBlock.innerHTML = `
595
+ <div class="flex justify-between items-center mb-2">
596
+ <span class="text-sm font-medium text-gray-300">Bloco de Vídeo</span>
597
+ <div class="flex space-x-2">
598
+ <button class="text-gray-400 hover:text-white">
599
+ <i class="fas fa-cog"></i>
600
+ </button>
601
+ <button class="text-gray-400 hover:text-white">
602
+ <i class="fas fa-trash"></i>
603
+ </button>
604
+ </div>
605
+ </div>
606
+ <div class="file-upload">
607
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm mb-2">
608
+ <i class="fas fa-upload mr-1"></i> Enviar Vídeo
609
+ </button>
610
+ <input type="file" accept="video/*">
611
+ </div>
612
+ <div class="border border-dashed border-gray-600 rounded-lg p-4 text-center">
613
+ <i class="fas fa-video text-gray-500 text-4xl mb-2"></i>
614
+ <p class="text-gray-400 text-sm">Nenhum vídeo selecionado</p>
615
+ </div>
616
+ <div class="mt-2">
617
+ <input type="text" placeholder="Título do vídeo" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
618
+ </div>
619
+ <div class="resize-handle"></div>
620
+ `;
621
+ container.appendChild(newBlock);
622
+ newBlock.querySelector('.resize-handle').addEventListener('mousedown', initResize);
623
+ }
624
+
625
+ function addGalleryBlock() {
626
+ const container = document.getElementById('blocks-container');
627
+ const newBlock = document.createElement('div');
628
+ newBlock.className = 'draggable-item bg-gray-700 rounded-lg border border-gray-600 p-4 relative';
629
+ newBlock.setAttribute('draggable', 'true');
630
+ newBlock.innerHTML = `
631
+ <div class="flex justify-between items-center mb-2">
632
+ <span class="text-sm font-medium text-gray-300">Bloco de Galeria</span>
633
+ <div class="flex space-x-2">
634
+ <button class="text-gray-400 hover:text-white">
635
+ <i class="fas fa-cog"></i>
636
+ </button>
637
+ <button class="text-gray-400 hover:text-white">
638
+ <i class="fas fa-trash"></i>
639
+ </button>
640
+ </div>
641
+ </div>
642
+ <div class="file-upload">
643
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm mb-2">
644
+ <i class="fas fa-upload mr-1"></i> Adicionar Imagens
645
+ </button>
646
+ <input type="file" accept="image/*" multiple>
647
+ </div>
648
+ <div class="border border-dashed border-gray-600 rounded-lg p-4 text-center">
649
+ <i class="fas fa-images text-gray-500 text-4xl mb-2"></i>
650
+ <p class="text-gray-400 text-sm">Nenhuma imagem na galeria</p>
651
+ </div>
652
+ <div class="mt-2">
653
+ <input type="text" placeholder="Título da galeria" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
654
+ </div>
655
+ <div class="resize-handle"></div>
656
+ `;
657
+ container.appendChild(newBlock);
658
+ newBlock.querySelector('.resize-handle').addEventListener('mousedown', initResize);
659
+ }
660
+
661
+ function addQuoteBlock() {
662
+ const container = document.getElementById('blocks-container');
663
+ const newBlock = document.createElement('div');
664
+ newBlock.className = 'draggable-item bg-gray-700 rounded-lg border border-gray-600 p-4 relative';
665
+ newBlock.setAttribute('draggable', 'true');
666
+ newBlock.innerHTML = `
667
+ <div class="flex justify-between items-center mb-2">
668
+ <span class="text-sm font-medium text-gray-300">Bloco de Citação</span>
669
+ <div class="flex space-x-2">
670
+ <button class="text-gray-400 hover:text-white">
671
+ <i class="fas fa-cog"></i>
672
+ </button>
673
+ <button class="text-gray-400 hover:text-white">
674
+ <i class="fas fa-trash"></i>
675
+ </button>
676
+ </div>
677
+ </div>
678
+ <textarea class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500" rows="2" placeholder="Digite a citação..."></textarea>
679
+ <div class="mt-2">
680
+ <input type="text" placeholder="Autor" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
681
+ </div>
682
+ <div class="resize-handle"></div>
683
+ `;
684
+ container.appendChild(newBlock);
685
+ newBlock.querySelector('.resize-handle').addEventListener('mousedown', initResize);
686
+ }
687
+
688
+ // Função para redimensionar blocos
689
+ function initResize(e) {
690
+ e.preventDefault();
691
+
692
+ const element = e.target.parentElement;
693
+ const startX = e.clientX;
694
+ const startY = e.clientY;
695
+ const startWidth = parseInt(document.defaultView.getComputedStyle(element).width, 10);
696
+ const startHeight = parseInt(document.defaultView.getComputedStyle(element).height, 10);
697
+
698
+ function doResize(e) {
699
+ element.style.width = (startWidth + e.clientX - startX) + 'px';
700
+ element.style.height = (startHeight + e.clientY - startY) + 'px';
701
+ }
702
+
703
+ function stopResize() {
704
+ window.removeEventListener('mousemove', doResize, false);
705
+ window.removeEventListener('mouseup', stopResize, false);
706
+ }
707
+
708
+ window.addEventListener('mousemove', doResize, false);
709
+ window.addEventListener('mouseup', stopResize, false);
710
+ }
711
+
712
+ // Efeito de cursor piscante no terminal
713
+ function blinkCursor() {
714
+ const cursor = document.querySelector('.blink');
715
+ if (cursor) {
716
+ setInterval(() => {
717
+ cursor.style.visibility = (cursor.style.visibility === 'hidden' ? '' : 'hidden');
718
+ }, 500);
719
+ }
720
+ }
721
+
722
+ blinkCursor();
723
  </script>
724
  <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=dandydow/frontbotcontrol" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
725
  </html>
prompts.txt CHANGED
@@ -0,0 +1 @@
 
 
1
+ Criar um dashboad Panel para controlar minha VPS e os sites hospedados nela. Front e backand funcional e poderoso. Cores escuras e destaques importantes. Edição rapida de sites de noticas, como criar materia, subir videos, fotos, redemencionar os blocks com arrasta e solta. não usar verde..