Hugging Face's logo

Spaces:
jsonet
/
prompt-master-engineer
Running

App Files Community
jsonet commited on
Commit
eadaa4c
·
verified ·
1 Parent(s): 430de98

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +600 -407
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Quantum Box AI Pro Tools 5.0 - Centro de Control</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>
@@ -13,12 +13,17 @@
13
  --primary-green: #00e676;
14
  --secondary-blue: #2962ff;
15
  --accent-pink: #ff4081;
 
16
  }
17
 
18
  .quantum-gradient {
19
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-purple));
20
  }
21
 
 
 
 
 
22
  .quantum-card {
23
  background: rgba(26, 9, 51, 0.7);
24
  backdrop-filter: blur(10px);
@@ -32,10 +37,27 @@
32
  border-color: var(--primary-green);
33
  }
34
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  .glow-effect {
36
  box-shadow: 0 0 15px rgba(110, 45, 229, 0.5);
37
  }
38
 
 
 
 
 
39
  .progress-bar {
40
  transition: width 0.5s ease-in-out;
41
  }
@@ -44,6 +66,10 @@
44
  text-shadow: 0 0 5px rgba(110, 45, 229, 0.8);
45
  }
46
 
 
 
 
 
47
  .quantum-border {
48
  border: 1px solid rgba(110, 45, 229, 0.5);
49
  }
@@ -52,15 +78,28 @@
52
  border: 2px solid var(--primary-purple);
53
  }
54
 
 
 
 
 
55
  @keyframes pulse {
56
  0%, 100% { opacity: 1; }
57
  50% { opacity: 0.7; }
58
  }
59
 
 
 
 
 
 
60
  .animate-pulse {
61
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
62
  }
63
 
 
 
 
 
64
  .tooltip:hover .tooltip-text {
65
  visibility: visible;
66
  opacity: 1;
@@ -72,26 +111,72 @@
72
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
73
  gap: 1.5rem;
74
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
75
  </style>
76
  </head>
77
  <body class="bg-gray-900 text-gray-100 min-h-screen">
78
- <!-- Quantum Command Center Header -->
79
- <header class="quantum-gradient text-white shadow-lg sticky top-0 z-50">
80
  <div class="container mx-auto px-4 py-4">
81
  <div class="flex justify-between items-center">
82
  <div class="flex items-center space-x-3">
83
- <div class="glow-effect bg-purple-600 p-2 rounded-lg">
84
- <i class="fas fa-atom text-2xl"></i>
85
  </div>
86
  <div>
87
- <h1 class="text-2xl font-bold neon-text">QUANTUM BOX AI PRO TOOLS 5.0</h1>
88
- <p class="text-xs text-purple-300">Command Center v5.0.1</p>
89
  </div>
90
  </div>
91
 
92
  <div class="hidden md:flex items-center space-x-6">
93
  <div class="relative group">
94
- <button class="flex items-center space-x-1 hover:text-purple-300 transition">
95
  <span>Herramientas</span>
96
  <i class="fas fa-chevron-down text-xs"></i>
97
  </button>
@@ -100,11 +185,12 @@
100
  <a href="#" class="block px-4 py-2 text-sm hover:bg-purple-900">Code Generator</a>
101
  <a href="#" class="block px-4 py-2 text-sm hover:bg-purple-900">AI Automator</a>
102
  <a href="#" class="block px-4 py-2 text-sm hover:bg-purple-900">Quantum Analyzer</a>
 
103
  </div>
104
  </div>
105
 
106
- <a href="#" class="hover:text-purple-300 transition">Documentación</a>
107
- <a href="#" class="hover:text-purple-300 transition">Soporte</a>
108
 
109
  <div class="flex items-center space-x-2 ml-4">
110
  <div class="relative">
@@ -113,7 +199,7 @@
113
  <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
114
  </button>
115
  </div>
116
- <div class="h-8 w-8 rounded-full bg-purple-600 flex items-center justify-center">
117
  <i class="fas fa-user"></i>
118
  </div>
119
  </div>
@@ -129,6 +215,9 @@
129
  <!-- Mobile Menu -->
130
  <div class="hidden bg-gray-800 shadow-md md:hidden" id="mobile-menu">
131
  <div class="container mx-auto px-4 py-2 flex flex-col">
 
 
 
132
  <a href="#" class="py-3 border-b border-gray-700 flex items-center">
133
  <i class="fas fa-box-open mr-2 text-purple-400"></i> Herramientas
134
  </a>
@@ -144,76 +233,76 @@
144
  </div>
145
  </div>
146
 
147
- <!-- Quantum Dashboard -->
148
  <div class="container mx-auto px-4 py-8">
149
  <!-- Welcome Section -->
150
  <section class="mb-12">
151
- <div class="quantum-card rounded-xl p-6">
152
  <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
153
  <div>
154
- <h2 class="text-2xl font-bold mb-2">Bienvenido al Quantum Command Center</h2>
155
- <p class="text-purple-200 max-w-3xl">Tu centro de control unificado para todas las herramientas de IA y automatización. Conecta, automatiza y potencia tus flujos de trabajo con nuestra suite de herramientas interconectadas.</p>
156
  </div>
157
  <div class="mt-4 md:mt-0 flex items-center space-x-3">
158
  <div class="relative">
159
  <div class="h-3 w-3 rounded-full bg-green-500 animate-pulse absolute -top-1 -right-1"></div>
160
  <div class="h-3 w-3 rounded-full bg-green-500 animate-pulse absolute -top-1 -right-1"></div>
161
- <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Sistema Activo</span>
162
  </div>
163
  <button class="bg-purple-700 hover:bg-purple-600 px-4 py-2 rounded-lg text-sm flex items-center">
164
- <i class="fas fa-rocket mr-2"></i> Modo Turbo
165
  </button>
166
  </div>
167
  </div>
168
  </div>
169
  </section>
170
 
171
- <!-- Quantum Network Status -->
172
  <section class="mb-12">
173
- <div class="quantum-card rounded-xl p-6">
174
  <h3 class="text-xl font-semibold mb-4 flex items-center">
175
- <i class="fas fa-network-wired text-blue-400 mr-2"></i> Estado de la Red Quantum
176
  </h3>
177
 
178
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
179
- <div class="bg-gray-800 rounded-lg p-4 quantum-border">
180
  <div class="flex justify-between items-center mb-2">
181
- <span class="text-sm text-gray-400">Conexión Principal</span>
182
  <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Estable</span>
183
  </div>
184
  <div class="w-full bg-gray-700 rounded-full h-2 mb-1">
185
- <div class="bg-green-500 h-2 rounded-full" style="width: 95%"></div>
186
  </div>
187
  <div class="flex justify-between text-xs text-gray-400">
188
- <span>Latencia: 28ms</span>
189
- <span>95% estabilidad</span>
190
  </div>
191
  </div>
192
 
193
- <div class="bg-gray-800 rounded-lg p-4 quantum-border">
194
  <div class="flex justify-between items-center mb-2">
195
- <span class="text-sm text-gray-400">Sincronización de Herramientas</span>
196
  <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Activa</span>
197
  </div>
198
  <div class="w-full bg-gray-700 rounded-full h-2 mb-1">
199
  <div class="bg-blue-500 h-2 rounded-full" style="width: 100%"></div>
200
  </div>
201
  <div class="flex justify-between text-xs text-gray-400">
202
- <span>12 herramientas conectadas</span>
203
- <span>Ult. sync: 2s</span>
204
  </div>
205
  </div>
206
 
207
- <div class="bg-gray-800 rounded-lg p-4 quantum-border">
208
  <div class="flex justify-between items-center mb-2">
209
- <span class="text-sm text-gray-400">Almacenamiento Quantum</span>
210
- <span class="text-xs bg-yellow-900 text-yellow-300 px-2 py-1 rounded-full">65% usado</span>
211
  </div>
212
  <div class="w-full bg-gray-700 rounded-full h-2 mb-1">
213
- <div class="bg-purple-500 h-2 rounded-full" style="width: 65%"></div>
214
  </div>
215
  <div class="flex justify-between text-xs text-gray-400">
216
- <span>1.3TB/2TB usado</span>
217
  <span>Optimizado</span>
218
  </div>
219
  </div>
@@ -223,21 +312,241 @@
223
  <button class="bg-purple-700 hover:bg-purple-600 px-4 py-2 rounded-lg text-sm flex items-center">
224
  <i class="fas fa-sync-alt mr-2"></i> Reforzar Conexión
225
  </button>
226
- <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg text-sm flex items-center border border-purple-700">
227
- <i class="fas fa-shield-alt mr-2 text-purple-400"></i> Seguridad Avanzada
228
  </button>
229
  <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg text-sm flex items-center border border-blue-700">
230
  <i class="fas fa-cloud-upload-alt mr-2 text-blue-400"></i> Backup Automático
231
  </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
232
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
233
  </div>
234
  </section>
235
 
236
- <!-- Quantum Tools Grid -->
237
  <section class="mb-12">
238
  <div class="flex justify-between items-center mb-6">
239
  <h3 class="text-xl font-semibold flex items-center">
240
- <i class="fas fa-cubes text-purple-400 mr-2"></i> Herramientas Disponibles
241
  </h3>
242
  <div class="relative">
243
  <input type="text" placeholder="Buscar herramienta..." class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-purple-600 w-64">
@@ -246,18 +555,18 @@
246
  </div>
247
 
248
  <div class="quantum-grid">
249
- <!-- Prompt Master -->
250
- <div class="quantum-card rounded-xl p-5 hover:glow-effect cursor-pointer">
251
  <div class="flex items-start mb-4">
252
  <div class="bg-purple-900 p-3 rounded-lg mr-3">
253
  <i class="fas fa-comment-dots text-xl"></i>
254
  </div>
255
  <div>
256
- <h4 class="font-bold">Prompt Master</h4>
257
  <p class="text-xs text-purple-300">Engineer v5.0</p>
258
  </div>
259
  </div>
260
- <p class="text-sm text-gray-300 mb-4">Diseña, gestiona y optimiza prompts de IA con precisión cuántica.</p>
261
  <div class="flex justify-between items-center">
262
  <div class="flex space-x-2">
263
  <span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded-full">IA</span>
@@ -269,18 +578,18 @@
269
  </div>
270
  </div>
271
 
272
- <!-- Code Quantum -->
273
- <div class="quantum-card rounded-xl p-5 hover:glow-effect cursor-pointer">
274
  <div class="flex items-start mb-4">
275
  <div class="bg-green-900 p-3 rounded-lg mr-3">
276
  <i class="fas fa-code text-xl"></i>
277
  </div>
278
  <div>
279
- <h4 class="font-bold">Code Quantum</h4>
280
  <p class="text-xs text-green-300">Generator v5.0</p>
281
  </div>
282
  </div>
283
- <p class="text-sm text-gray-300 mb-4">Generación de código asistida por IA con soporte multi-lenguaje.</p>
284
  <div class="flex justify-between items-center">
285
  <div class="flex space-x-2">
286
  <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Dev</span>
@@ -292,18 +601,18 @@
292
  </div>
293
  </div>
294
 
295
- <!-- AutoFlow -->
296
- <div class="quantum-card rounded-xl p-5 hover:glow-effect cursor-pointer">
297
  <div class="flex items-start mb-4">
298
  <div class="bg-blue-900 p-3 rounded-lg mr-3">
299
  <i class="fas fa-project-diagram text-xl"></i>
300
  </div>
301
  <div>
302
- <h4 class="font-bold">AutoFlow</h4>
303
  <p class="text-xs text-blue-300">Automation v5.0</p>
304
  </div>
305
  </div>
306
- <p class="text-sm text-gray-300 mb-4">Automatización de procesos con conectividad entre herramientas.</p>
307
  <div class="flex justify-between items-center">
308
  <div class="flex space-x-2">
309
  <span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded-full">RPA</span>
@@ -315,18 +624,18 @@
315
  </div>
316
  </div>
317
 
318
- <!-- Data Forge -->
319
- <div class="quantum-card rounded-xl p-5 hover:glow-effect cursor-pointer">
320
  <div class="flex items-start mb-4">
321
  <div class="bg-red-900 p-3 rounded-lg mr-3">
322
  <i class="fas fa-database text-xl"></i>
323
  </div>
324
  <div>
325
- <h4 class="font-bold">Data Forge</h4>
326
  <p class="text-xs text-red-300">Analyzer v5.0</p>
327
  </div>
328
  </div>
329
- <p class="text-sm text-gray-300 mb-4">Análisis y visualización de datos con algoritmos cuánticos.</p>
330
  <div class="flex justify-between items-center">
331
  <div class="flex space-x-2">
332
  <span class="text-xs bg-red-900 text-red-300 px-2 py-1 rounded-full">BI</span>
@@ -338,41 +647,41 @@
338
  </div>
339
  </div>
340
 
341
- <!-- NEW: Quantum Sync -->
342
- <div class="quantum-card rounded-xl p-5 hover:glow-effect cursor-pointer border-2 border-green-500">
343
  <div class="flex items-start mb-4">
344
- <div class="bg-green-900 p-3 rounded-lg mr-3">
345
  <i class="fas fa-sync-alt text-xl"></i>
346
  </div>
347
  <div>
348
- <h4 class="font-bold">Quantum Sync</h4>
349
- <p class="text-xs text-green-300">NEW v5.0</p>
350
  </div>
351
  </div>
352
- <p class="text-sm text-gray-300 mb-4">Sincronización en tiempo real entre todas tus herramientas.</p>
353
  <div class="flex justify-between items-center">
354
  <div class="flex space-x-2">
355
- <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Sync</span>
356
  <span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded-full">Real-time</span>
357
  </div>
358
- <button class="text-green-400 hover:text-green-300">
359
  <i class="fas fa-arrow-right"></i>
360
  </button>
361
  </div>
362
  </div>
363
 
364
- <!-- NEW: AI Orchestrator -->
365
- <div class="quantum-card rounded-xl p-5 hover:glow-effect cursor-pointer border-2 border-purple-500">
366
  <div class="flex items-start mb-4">
367
  <div class="bg-purple-900 p-3 rounded-lg mr-3">
368
  <i class="fas fa-robot text-xl"></i>
369
  </div>
370
  <div>
371
- <h4 class="font-bold">AI Orchestrator</h4>
372
  <p class="text-xs text-purple-300">NEW v5.0</p>
373
  </div>
374
  </div>
375
- <p class="text-sm text-gray-300 mb-4">Coordina múltiples modelos de IA para flujos complejos.</p>
376
  <div class="flex justify-between items-center">
377
  <div class="flex space-x-2">
378
  <span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded-full">Multi-AI</span>
@@ -386,13 +695,106 @@
386
  </div>
387
  </section>
388
 
389
- <!-- Recent Activity & Quick Actions -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
390
  <section class="mb-12">
391
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
392
- <!-- Recent Activity -->
393
- <div class="quantum-card rounded-xl p-6 lg:col-span-2">
394
  <h3 class="text-xl font-semibold mb-4 flex items-center">
395
- <i class="fas fa-history text-purple-400 mr-2"></i> Actividad Reciente
396
  </h3>
397
 
398
  <div class="space-y-4">
@@ -402,13 +804,14 @@
402
  </div>
403
  <div class="flex-1">
404
  <div class="flex justify-between">
405
- <span class="font-medium">Code Quantum</span>
406
- <span class="text-xs text-gray-400">hace 2 min</span>
407
  </div>
408
- <p class="text-sm text-gray-300">Generación de componente React completada</p>
409
  <div class="mt-1 flex space-x-2">
410
  <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">React</span>
411
  <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">TypeScript</span>
 
412
  </div>
413
  </div>
414
  </div>
@@ -419,13 +822,13 @@
419
  </div>
420
  <div class="flex-1">
421
  <div class="flex justify-between">
422
- <span class="font-medium">Prompt Master</span>
423
- <span class="text-xs text-gray-400">hace 15 min</span>
424
  </div>
425
- <p class="text-sm text-gray-300">Optimización de prompt para GPT-4 completada</p>
426
  <div class="mt-1 flex space-x-2">
427
  <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">GPT-4</span>
428
- <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Optimización</span>
429
  </div>
430
  </div>
431
  </div>
@@ -436,30 +839,30 @@
436
  </div>
437
  <div class="flex-1">
438
  <div class="flex justify-between">
439
- <span class="font-medium">AutoFlow</span>
440
- <span class="text-xs text-gray-400">hace 32 min</span>
441
  </div>
442
- <p class="text-sm text-gray-300">Nuevo flujo conectando Prompt Master con Code Quantum</p>
443
  <div class="mt-1 flex space-x-2">
444
  <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Integración</span>
445
- <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Automation</span>
446
  </div>
447
  </div>
448
  </div>
449
 
450
  <div class="flex items-start">
451
- <div class="bg-yellow-600 rounded-full p-2 mr-3">
452
  <i class="fas fa-database text-white text-sm"></i>
453
  </div>
454
  <div class="flex-1">
455
  <div class="flex justify-between">
456
- <span class="font-medium">Data Forge</span>
457
- <span class="text-xs text-gray-400">hace 1 hora</span>
458
  </div>
459
- <p class="text-sm text-gray-300">Análisis de dataset completado - 12 insights encontrados</p>
460
  <div class="mt-1 flex space-x-2">
461
  <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Análisis</span>
462
- <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Visualización</span>
463
  </div>
464
  </div>
465
  </div>
@@ -470,10 +873,10 @@
470
  </button>
471
  </div>
472
 
473
- <!-- Quick Actions -->
474
- <div class="quantum-card rounded-xl p-6">
475
  <h3 class="text-xl font-semibold mb-4 flex items-center">
476
- <i class="fas fa-bolt text-yellow-400 mr-2"></i> Acciones Rápidas
477
  </h3>
478
 
479
  <div class="space-y-3">
@@ -481,14 +884,14 @@
481
  <div class="bg-purple-900 p-2 rounded-lg mr-3">
482
  <i class="fas fa-plus"></i>
483
  </div>
484
- <span>Nuevo Flujo de Automatización</span>
485
  </button>
486
 
487
- <button class="w-full bg-gray-800 hover:bg-gray-700 px-4 py-3 rounded-lg text-left flex items-center border border-green-700">
488
- <div class="bg-green-900 p-2 rounded-lg mr-3">
489
- <i class="fas fa-rocket"></i>
490
  </div>
491
- <span>Optimizar Rendimiento</span>
492
  </button>
493
 
494
  <button class="w-full bg-gray-800 hover:bg-gray-700 px-4 py-3 rounded-lg text-left flex items-center border border-blue-700">
@@ -516,335 +919,125 @@
516
  </div>
517
  </section>
518
 
519
- <!-- NEW: Quantum Integration Hub -->
520
  <section class="mb-12">
521
- <div class="quantum-card rounded-xl p-6">
522
  <div class="flex justify-between items-center mb-6">
523
  <h3 class="text-xl font-semibold flex items-center">
524
- <i class="fas fa-plug text-green-400 mr-2"></i> Quantum Integration Hub
525
  </h3>
526
- <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">NEW in v5.0</span>
527
  </div>
528
 
529
- <p class="text-purple-200 mb-6">Conecta todas tus herramientas en un único flujo de trabajo automatizado. Crea potentes integraciones entre diferentes módulos sin necesidad de código.</p>
530
 
531
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
532
- <div class="bg-gray-800 rounded-lg p-4 quantum-border-thick">
533
  <div class="flex items-center mb-3">
534
  <div class="bg-purple-600 p-2 rounded-full mr-3">
535
- <i class="fas fa-random"></i>
536
  </div>
537
- <h4 class="font-medium">Flujos Cruzados</h4>
538
  </div>
539
- <p class="text-sm text-gray-300 mb-3">Crea conexiones entre diferentes herramientas para automatizar procesos complejos.</p>
540
  <div class="flex space-x-2">
541
- <span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded-full">Ejemplo: Prompt → Code</span>
 
542
  </div>
543
  </div>
544
 
545
- <div class="bg-gray-800 rounded-lg p-4 quantum-border-thick">
546
  <div class="flex items-center mb-3">
547
  <div class="bg-blue-600 p-2 rounded-full mr-3">
548
- <i class="fas fa-bolt"></i>
549
  </div>
550
- <h4 class="font-medium">Triggers & Actions</h4>
551
  </div>
552
- <p class="text-sm text-gray-300 mb-3">Configura disparadores y acciones automáticas entre herramientas.</p>
553
  <div class="flex space-x-2">
554
- <span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded-full">Ejemplo: On Data → Notify</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
555
  </div>
556
  </div>
557
  </div>
558
 
559
- <div class="bg-gray-800 rounded-lg p-4 quantum-border-thick">
560
  <div class="flex items-center justify-between mb-3">
561
  <div class="flex items-center">
562
  <div class="bg-green-600 p-2 rounded-full mr-3">
563
- <i class="fas fa-network-wired"></i>
564
  </div>
565
- <h4 class="font-medium">Visual Integration Builder</h4>
566
  </div>
567
  <button class="text-xs bg-green-900 text-green-300 px-3 py-1 rounded-full hover:bg-green-800">
568
  Probar ahora
569
  </button>
570
  </div>
571
- <p class="text-sm text-gray-300 mb-3">Arrastra y suelta para crear integraciones visualmente. Soporte para condiciones complejas y flujos paralelos.</p>
572
  <div class="bg-gray-900 rounded p-3 text-center text-gray-500 text-sm">
573
- <i class="fas fa-mouse-pointer mr-1"></i> Arrastra herramientas aquí para comenzar a conectar
574
- </div>
575
- </div>
576
- </div>
577
- </section>
578
-
579
- <!-- NEW: AI Model Orchestrator -->
580
- <section class="mb-12">
581
- <div class="quantum-card rounded-xl p-6">
582
- <div class="flex justify-between items-center mb-6">
583
- <h3 class="text-xl font-semibold flex items-center">
584
- <i class="fas fa-robot text-purple-400 mr-2"></i> AI Model Orchestrator
585
- </h3>
586
- <span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded-full">NEW in v5.0</span>
587
- </div>
588
-
589
- <p class="text-purple-200 mb-6">Coordina múltiples modelos de IA en flujos de trabajo secuenciales o paralelos. Combina las fortalezas de diferentes modelos para obtener resultados superiores.</p>
590
-
591
- <div class="overflow-x-auto">
592
- <table class="min-w-full bg-gray-800 rounded-lg overflow-hidden">
593
- <thead class="bg-gray-700">
594
- <tr>
595
- <th class="py-3 px-4 text-left">Modelo</th>
596
- <th class="py-3 px-4 text-left">Tipo</th>
597
- <th class="py-3 px-4 text-left">Estado</th>
598
- <th class="py-3 px-4 text-left">Conexión</th>
599
- <th class="py-3 px-4 text-left"></th>
600
- </tr>
601
- </thead>
602
- <tbody class="divide-y divide-gray-700">
603
- <tr>
604
- <td class="py-3 px-4 flex items-center">
605
- <img src="https://via.placeholder.com/30" class="rounded-full mr-2" alt="GPT-4">
606
- <span>GPT-4</span>
607
- </td>
608
- <td class="py-3 px-4">Texto</td>
609
- <td class="py-3 px-4">
610
- <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Activo</span>
611
- </td>
612
- <td class="py-3 px-4">
613
- <div class="w-full bg-gray-700 rounded-full h-2">
614
- <div class="bg-green-500 h-2 rounded-full" style="width: 92%"></div>
615
- </div>
616
- </td>
617
- <td class="py-3 px-4 text-right">
618
- <button class="text-purple-400 hover:text-purple-300">
619
- <i class="fas fa-cog"></i>
620
- </button>
621
- </td>
622
- </tr>
623
- <tr>
624
- <td class="py-3 px-4 flex items-center">
625
- <img src="https://via.placeholder.com/30" class="rounded-full mr-2" alt="Claude">
626
- <span>Claude 3</span>
627
- </td>
628
- <td class="py-3 px-4">Texto</td>
629
- <td class="py-3 px-4">
630
- <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Activo</span>
631
- </td>
632
- <td class="py-3 px-4">
633
- <div class="w-full bg-gray-700 rounded-full h-2">
634
- <div class="bg-green-500 h-2 rounded-full" style="width: 88%"></div>
635
- </div>
636
- </td>
637
- <td class="py-3 px-4 text-right">
638
- <button class="text-purple-400 hover:text-purple-300">
639
- <i class="fas fa-cog"></i>
640
- </button>
641
- </td>
642
- </tr>
643
- <tr>
644
- <td class="py-3 px-4 flex items-center">
645
- <img src="https://via.placeholder.com/30" class="rounded-full mr-2" alt="Gemini">
646
- <span>Gemini Pro</span>
647
- </td>
648
- <td class="py-3 px-4">Multimodal</td>
649
- <td class="py-3 px-4">
650
- <span class="text-xs bg-yellow-900 text-yellow-300 px-2 py-1 rounded-full">Standby</span>
651
- </td>
652
- <td class="py-3 px-4">
653
- <div class="w-full bg-gray-700 rounded-full h-2">
654
- <div class="bg-yellow-500 h-2 rounded-full" style="width: 65%"></div>
655
- </div>
656
- </td>
657
- <td class="py-3 px-4 text-right">
658
- <button class="text-purple-400 hover:text-purple-300">
659
- <i class="fas fa-cog"></i>
660
- </button>
661
- </td>
662
- </tr>
663
- <tr>
664
- <td class="py-3 px-4 flex items-center">
665
- <img src="https://via.placeholder.com/30" class="rounded-full mr-2" alt="DALL-E">
666
- <span>DALL-E 3</span>
667
- </td>
668
- <td class="py-3 px-4">Imagen</td>
669
- <td class="py-3 px-4">
670
- <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Activo</span>
671
- </td>
672
- <td class="py-3 px-4">
673
- <div class="w-full bg-gray-700 rounded-full h-2">
674
- <div class="bg-green-500 h-2 rounded-full" style="width: 85%"></div>
675
- </div>
676
- </td>
677
- <td class="py-3 px-4 text-right">
678
- <button class="text-purple-400 hover:text-purple-300">
679
- <i class="fas fa-cog"></i>
680
- </button>
681
- </td>
682
- </tr>
683
- </tbody>
684
- </table>
685
- </div>
686
-
687
- <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
688
- <div class="bg-gray-800 rounded-lg p-4 quantum-border">
689
- <h4 class="font-medium mb-2 flex items-center">
690
- <i class="fas fa-random text-purple-400 mr-2"></i> Flujo Secuencial
691
- </h4>
692
- <p class="text-sm text-gray-300">Ejecuta modelos en secuencia, pasando la salida de uno como entrada al siguiente.</p>
693
- </div>
694
-
695
- <div class="bg-gray-800 rounded-lg p-4 quantum-border">
696
- <h4 class="font-medium mb-2 flex items-center">
697
- <i class="fas fa-code-branch text-blue-400 mr-2"></i> Flujo Paralelo
698
- </h4>
699
- <p class="text-sm text-gray-300">Ejecuta múltiples modelos simultáneamente y combina sus resultados.</p>
700
- </div>
701
-
702
- <div class="bg-gray-800 rounded-lg p-4 quantum-border">
703
- <h4 class="font-medium mb-2 flex items-center">
704
- <i class="fas fa-chess-queen text-green-400 mr-2"></i> Flujo de Consenso
705
- </h4>
706
- <p class="text-sm text-gray-300">Compara resultados de múltiples modelos y selecciona el mejor.</p>
707
- </div>
708
- </div>
709
-
710
- <button class="mt-6 bg-purple-700 hover:bg-purple-600 px-6 py-3 rounded-lg font-semibold flex items-center mx-auto">
711
- <i class="fas fa-plus-circle mr-2"></i> Crear Nuevo Flujo de Modelos
712
- </button>
713
- </div>
714
- </section>
715
-
716
- <!-- Performance & Resources -->
717
- <section class="mb-12">
718
- <div class="quantum-card rounded-xl p-6">
719
- <h3 class="text-xl font-semibold mb-6 flex items-center">
720
- <i class="fas fa-tachometer-alt text-red-400 mr-2"></i> Rendimiento & Recursos
721
- </h3>
722
-
723
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
724
- <div class="bg-gray-800 rounded-lg p-4 quantum-border">
725
- <div class="flex justify-between items-start mb-2">
726
- <div>
727
- <h4 class="text-sm text-gray-400">CPU Usage</h4>
728
- <p class="text-2xl font-bold">42%</p>
729
- </div>
730
- <div class="bg-red-900 p-2 rounded-full">
731
- <i class="fas fa-microchip text-red-400"></i>
732
- </div>
733
- </div>
734
- <div class="w-full bg-gray-700 rounded-full h-2">
735
- <div class="bg-red-500 h-2 rounded-full" style="width: 42%"></div>
736
- </div>
737
- </div>
738
-
739
- <div class="bg-gray-800 rounded-lg p-4 quantum-border">
740
- <div class="flex justify-between items-start mb-2">
741
- <div>
742
- <h4 class="text-sm text-gray-400">Memory</h4>
743
- <p class="text-2xl font-bold">3.2/8GB</p>
744
- </div>
745
- <div class="bg-blue-900 p-2 rounded-full">
746
- <i class="fas fa-memory text-blue-400"></i>
747
- </div>
748
- </div>
749
- <div class="w-full bg-gray-700 rounded-full h-2">
750
- <div class="bg-blue-500 h-2 rounded-full" style="width: 40%"></div>
751
- </div>
752
- </div>
753
-
754
- <div class="bg-gray-800 rounded-lg p-4 quantum-border">
755
- <div class="flex justify-between items-start mb-2">
756
- <div>
757
- <h4 class="text-sm text-gray-400">GPU Usage</h4>
758
- <p class="text-2xl font-bold">28%</p>
759
- </div>
760
- <div class="bg-purple-900 p-2 rounded-full">
761
- <i class="fas fa-gamepad text-purple-400"></i>
762
- </div>
763
- </div>
764
- <div class="w-full bg-gray-700 rounded-full h-2">
765
- <div class="bg-purple-500 h-2 rounded-full" style="width: 28%"></div>
766
- </div>
767
- </div>
768
-
769
- <div class="bg-gray-800 rounded-lg p-4 quantum-border">
770
- <div class="flex justify-between items-start mb-2">
771
- <div>
772
- <h4 class="text-sm text-gray-400">Network</h4>
773
- <p class="text-2xl font-bold">5.2MB/s</p>
774
- </div>
775
- <div class="bg-green-900 p-2 rounded-full">
776
- <i class="fas fa-network-wired text-green-400"></i>
777
- </div>
778
- </div>
779
- <div class="w-full bg-gray-700 rounded-full h-2">
780
- <div class="bg-green-500 h-2 rounded-full" style="width: 65%"></div>
781
- </div>
782
- </div>
783
- </div>
784
-
785
- <div class="bg-gray-800 rounded-lg p-4 quantum-border-thick">
786
- <div class="flex justify-between items-center mb-3">
787
- <h4 class="font-medium">Optimización Automática</h4>
788
- <label class="relative inline-flex items-center cursor-pointer">
789
- <input type="checkbox" value="" class="sr-only peer" checked>
790
- <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
791
- </label>
792
- </div>
793
- <p class="text-sm text-gray-300 mb-3">Activa para permitir que Quantum Box optimice automáticamente la asignación de recursos entre herramientas.</p>
794
- <div class="flex space-x-3">
795
- <button class="text-xs bg-purple-900 text-purple-300 px-3 py-1 rounded-full hover:bg-purple-800">
796
- <i class="fas fa-bolt mr-1"></i> Turbo Mode
797
- </button>
798
- <button class="text-xs bg-gray-700 text-gray-300 px-3 py-1 rounded-full hover:bg-gray-600">
799
- <i class="fas fa-chart-line mr-1"></i> Ver Estadísticas
800
- </button>
801
  </div>
802
  </div>
803
  </div>
804
  </section>
805
  </div>
806
 
807
- <!-- Quantum Footer -->
808
  <footer class="bg-gray-800 text-white py-8 border-t border-gray-700">
809
  <div class="container mx-auto px-4">
810
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
811
  <div>
812
  <h3 class="text-lg font-semibold mb-4 flex items-center">
813
- <i class="fas fa-atom text-purple-400 mr-2"></i> Quantum Box
814
  </h3>
815
- <p class="text-sm text-gray-400">La suite definitiva de herramientas de IA e innovación tecnológica. Potencia tus flujos de trabajo con nuestras soluciones integradas.</p>
816
  </div>
817
 
818
  <div>
819
- <h3 class="text-lg font-semibold mb-4">Herramientas</h3>
820
  <ul class="space-y-2 text-sm text-gray-400">
821
- <li><a href="#" class="hover:text-purple-300 transition">Prompt Master</a></li>
822
- <li><a href="#" class="hover:text-purple-300 transition">Code Quantum</a></li>
823
- <li><a href="#" class="hover:text-purple-300 transition">AutoFlow</a></li>
824
- <li><a href="#" class="hover:text-purple-300 transition">Data Forge</a></li>
825
- <li><a href="#" class="hover:text-purple-300 transition">AI Orchestrator</a></li>
826
  </ul>
827
  </div>
828
 
829
  <div>
830
- <h3 class="text-lg font-semibold mb-4">Recursos</h3>
831
  <ul class="space-y-2 text-sm text-gray-400">
832
- <li><a href="#" class="hover:text-purple-300 transition">Documentación</a></li>
833
- <li><a href="#" class="hover:text-purple-300 transition">Tutoriales</a></li>
834
- <li><a href="#" class="hover:text-purple-300 transition">API</a></li>
835
- <li><a href="#" class="hover:text-purple-300 transition">Blog</a></li>
836
- <li><a href="#" class="hover:text-purple-300 transition">Roadmap</a></li>
837
  </ul>
838
  </div>
839
 
840
  <div>
841
- <h3 class="text-lg font-semibold mb-4">Soporte</h3>
842
  <ul class="space-y-2 text-sm text-gray-400">
843
- <li><a href="#" class="hover:text-purple-300 transition">Centro de Ayuda</a></li>
844
- <li><a href="#" class="hover:text-purple-300 transition">Comunidad</a></li>
845
- <li><a href="#" class="hover:text-purple-300 transition">Contacto</a></li>
846
- <li><a href="#" class="hover:text-purple-300 transition">Status</a></li>
847
- <li><a href="#" class="hover:text-purple-300 transition">Feedback</a></li>
848
  </ul>
849
  </div>
850
  </div>
@@ -852,30 +1045,30 @@
852
  <div class="border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center">
853
  <div class="flex items-center space-x-4 mb-4 md:mb-0">
854
  <div class="flex items-center space-x-2">
855
- <i class="fas fa-atom text-purple-400"></i>
856
- <span class="font-bold">QUANTUM BOX AI PRO TOOLS 5.0</span>
857
  </div>
858
  <span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded-full">v5.0.1</span>
859
  </div>
860
 
861
  <div class="flex space-x-6">
862
- <a href="#" class="hover:text-purple-300 transition">
863
  <i class="fab fa-github"></i>
864
  </a>
865
- <a href="#" class="hover:text-purple-300 transition">
866
  <i class="fab fa-twitter"></i>
867
  </a>
868
- <a href="#" class="hover:text-purple-300 transition">
869
  <i class="fab fa-linkedin"></i>
870
  </a>
871
- <a href="#" class="hover:text-purple-300 transition">
872
  <i class="fab fa-discord"></i>
873
  </a>
874
  </div>
875
  </div>
876
 
877
  <div class="mt-8 text-center text-xs text-gray-500">
878
- <p>© 2023 Quantum Box AI Pro Tools. Todos los derechos reservados.</p>
879
  <p class="mt-1">Desarrollado con <i class="fas fa-heart text-red-400"></i> para revolucionar el futuro de la IA y la automatización.</p>
880
  </div>
881
  </div>
@@ -888,74 +1081,74 @@
888
  menu.classList.toggle('hidden');
889
  });
890
 
891
- // Simulate network status updates
892
- function updateNetworkStatus() {
893
- const stabilityElements = document.querySelectorAll('.stability-indicator');
894
  stabilityElements.forEach(el => {
895
- const currentWidth = parseInt(el.style.width) || 90;
896
- const variation = Math.floor(Math.random() * 6) - 3; // -3 to +3
897
  let newWidth = currentWidth + variation;
898
- newWidth = Math.max(85, Math.min(98, newWidth)); // Keep between 85-98%
899
  el.style.width = newWidth + '%';
900
 
901
  // Update color based on value
902
- if (newWidth < 90) {
903
- el.classList.remove('bg-green-500');
904
  el.classList.add('bg-yellow-500');
905
  } else {
906
  el.classList.remove('bg-yellow-500');
907
- el.classList.add('bg-green-500');
908
  }
909
  });
910
 
911
- setTimeout(updateNetworkStatus, 3000);
912
  }
913
 
914
- // Start network simulation
915
- updateNetworkStatus();
916
 
917
- // Simulate resource usage fluctuations
918
- function updateResourceUsage() {
919
- const cpu = document.querySelector('.cpu-usage');
920
- const memory = document.querySelector('.memory-usage');
921
- const gpu = document.querySelector('.gpu-usage');
922
- const network = document.querySelector('.network-usage');
923
 
924
  // Random fluctuations
925
- const cpuVariation = Math.floor(Math.random() * 10) - 5;
926
- const memoryVariation = Math.floor(Math.random() * 8) - 4;
927
- const gpuVariation = Math.floor(Math.random() * 6) - 3;
928
- const networkVariation = Math.floor(Math.random() * 15) - 7;
929
 
930
  // Update CPU
931
- let currentCpu = parseInt(cpu.textContent) || 42;
932
- currentCpu = Math.max(30, Math.min(70, currentCpu + cpuVariation));
933
  cpu.textContent = currentCpu + '%';
934
  cpu.nextElementChild.style.width = currentCpu + '%';
935
 
936
  // Update Memory
937
- let currentMem = parseInt(memory.textContent.split('/')[0]) || 3.2;
938
- currentMem = Math.max(2.5, Math.min(6.5, currentMem + (memoryVariation * 0.1)));
939
- memory.textContent = currentMem.toFixed(1) + '/8GB';
940
- memory.nextElementChild.style.width = ((currentMem / 8) * 100) + '%';
941
 
942
  // Update GPU
943
- let currentGpu = parseInt(gpu.textContent) || 28;
944
- currentGpu = Math.max(20, Math.min(50, currentGpu + gpuVariation));
945
  gpu.textContent = currentGpu + '%';
946
  gpu.nextElementChild.style.width = currentGpu + '%';
947
 
948
  // Update Network
949
- let currentNet = parseInt(network.textContent) || 5.2;
950
- currentNet = Math.max(2, Math.min(8, currentNet + (networkVariation * 0.2)));
951
- network.textContent = currentNet.toFixed(1) + 'MB/s';
952
- network.nextElementChild.style.width = ((currentNet / 8) * 100) + '%';
953
 
954
- setTimeout(updateResourceUsage, 2000);
955
  }
956
 
957
- // Start resource simulation
958
- updateResourceUsage();
959
  </script>
960
  <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=jsonet/prompt-master-engineer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
961
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Quantum Box AI Pro Tools 5.0 - Neural Command Center</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>
 
13
  --primary-green: #00e676;
14
  --secondary-blue: #2962ff;
15
  --accent-pink: #ff4081;
16
+ --quantum-teal: #00e5ff;
17
  }
18
 
19
  .quantum-gradient {
20
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-purple));
21
  }
22
 
23
+ .neural-gradient {
24
+ background: linear-gradient(135deg, var(--primary-dark), #2d0b5e);
25
+ }
26
+
27
  .quantum-card {
28
  background: rgba(26, 9, 51, 0.7);
29
  backdrop-filter: blur(10px);
 
37
  border-color: var(--primary-green);
38
  }
39
 
40
+ .neural-card {
41
+ background: rgba(26, 9, 51, 0.8);
42
+ backdrop-filter: blur(10px);
43
+ border: 1px solid rgba(0, 230, 118, 0.3);
44
+ transition: all 0.3s ease;
45
+ }
46
+
47
+ .neural-card:hover {
48
+ transform: translateY(-5px);
49
+ box-shadow: 0 10px 20px rgba(0, 230, 118, 0.3);
50
+ border-color: var(--quantum-teal);
51
+ }
52
+
53
  .glow-effect {
54
  box-shadow: 0 0 15px rgba(110, 45, 229, 0.5);
55
  }
56
 
57
+ .neural-glow {
58
+ box-shadow: 0 0 15px rgba(0, 229, 255, 0.5);
59
+ }
60
+
61
  .progress-bar {
62
  transition: width 0.5s ease-in-out;
63
  }
 
66
  text-shadow: 0 0 5px rgba(110, 45, 229, 0.8);
67
  }
68
 
69
+ .neural-text {
70
+ text-shadow: 0 0 5px rgba(0, 229, 255, 0.8);
71
+ }
72
+
73
  .quantum-border {
74
  border: 1px solid rgba(110, 45, 229, 0.5);
75
  }
 
78
  border: 2px solid var(--primary-purple);
79
  }
80
 
81
+ .neural-border {
82
+ border: 1px solid rgba(0, 229, 255, 0.5);
83
+ }
84
+
85
  @keyframes pulse {
86
  0%, 100% { opacity: 1; }
87
  50% { opacity: 0.7; }
88
  }
89
 
90
+ @keyframes neural-pulse {
91
+ 0%, 100% { box-shadow: 0 0 10px rgba(0, 229, 255, 0.5); }
92
+ 50% { box-shadow: 0 0 20px rgba(0, 229, 255, 0.8); }
93
+ }
94
+
95
  .animate-pulse {
96
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
97
  }
98
 
99
+ .animate-neural {
100
+ animation: neural-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
101
+ }
102
+
103
  .tooltip:hover .tooltip-text {
104
  visibility: visible;
105
  opacity: 1;
 
111
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
112
  gap: 1.5rem;
113
  }
114
+
115
+ /* Neural Connection Lines */
116
+ .neural-connection {
117
+ position: relative;
118
+ }
119
+
120
+ .neural-connection::after {
121
+ content: '';
122
+ position: absolute;
123
+ top: 0;
124
+ left: 50%;
125
+ width: 2px;
126
+ height: 100%;
127
+ background: linear-gradient(to bottom, transparent, var(--quantum-teal), transparent);
128
+ transform: translateX(-50%);
129
+ z-index: -1;
130
+ }
131
+
132
+ /* Holographic Effect */
133
+ .holographic {
134
+ position: relative;
135
+ overflow: hidden;
136
+ }
137
+
138
+ .holographic::before {
139
+ content: '';
140
+ position: absolute;
141
+ top: -50%;
142
+ left: -50%;
143
+ width: 200%;
144
+ height: 200%;
145
+ background: linear-gradient(
146
+ to bottom right,
147
+ rgba(0, 230, 118, 0.1),
148
+ rgba(110, 45, 229, 0.1),
149
+ rgba(0, 229, 255, 0.1)
150
+ );
151
+ transform: rotate(30deg);
152
+ animation: hologram 6s linear infinite;
153
+ z-index: -1;
154
+ }
155
+
156
+ @keyframes hologram {
157
+ 0% { transform: rotate(30deg) translateY(0); }
158
+ 100% { transform: rotate(30deg) translateY(-50%); }
159
+ }
160
  </style>
161
  </head>
162
  <body class="bg-gray-900 text-gray-100 min-h-screen">
163
+ <!-- Quantum Neural Command Header -->
164
+ <header class="neural-gradient text-white shadow-lg sticky top-0 z-50">
165
  <div class="container mx-auto px-4 py-4">
166
  <div class="flex justify-between items-center">
167
  <div class="flex items-center space-x-3">
168
+ <div class="neural-glow bg-purple-600 p-2 rounded-lg animate-neural">
169
+ <i class="fas fa-brain text-2xl"></i>
170
  </div>
171
  <div>
172
+ <h1 class="text-2xl font-bold neural-text">QUANTUM NEURAL COMMAND CENTER</h1>
173
+ <p class="text-xs text-purple-300">Quantum Box AI Pro Tools 5.0</p>
174
  </div>
175
  </div>
176
 
177
  <div class="hidden md:flex items-center space-x-6">
178
  <div class="relative group">
179
+ <button class="flex items-center space-x-1 hover:text-teal-300 transition">
180
  <span>Herramientas</span>
181
  <i class="fas fa-chevron-down text-xs"></i>
182
  </button>
 
185
  <a href="#" class="block px-4 py-2 text-sm hover:bg-purple-900">Code Generator</a>
186
  <a href="#" class="block px-4 py-2 text-sm hover:bg-purple-900">AI Automator</a>
187
  <a href="#" class="block px-4 py-2 text-sm hover:bg-purple-900">Quantum Analyzer</a>
188
+ <a href="#" class="block px-4 py-2 text-sm hover:bg-purple-900">Neural Networks</a>
189
  </div>
190
  </div>
191
 
192
+ <a href="#" class="hover:text-teal-300 transition">Documentación</a>
193
+ <a href="#" class="hover:text-teal-300 transition">Soporte</a>
194
 
195
  <div class="flex items-center space-x-2 ml-4">
196
  <div class="relative">
 
199
  <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
200
  </button>
201
  </div>
202
+ <div class="h-8 w-8 rounded-full bg-teal-600 flex items-center justify-center">
203
  <i class="fas fa-user"></i>
204
  </div>
205
  </div>
 
215
  <!-- Mobile Menu -->
216
  <div class="hidden bg-gray-800 shadow-md md:hidden" id="mobile-menu">
217
  <div class="container mx-auto px-4 py-2 flex flex-col">
218
+ <a href="#" class="py-3 border-b border-gray-700 flex items-center">
219
+ <i class="fas fa-brain mr-2 text-teal-400"></i> Neural Center
220
+ </a>
221
  <a href="#" class="py-3 border-b border-gray-700 flex items-center">
222
  <i class="fas fa-box-open mr-2 text-purple-400"></i> Herramientas
223
  </a>
 
233
  </div>
234
  </div>
235
 
236
+ <!-- Quantum Neural Dashboard -->
237
  <div class="container mx-auto px-4 py-8">
238
  <!-- Welcome Section -->
239
  <section class="mb-12">
240
+ <div class="neural-card rounded-xl p-6 holographic">
241
  <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
242
  <div>
243
+ <h2 class="text-2xl font-bold mb-2 neural-text">Bienvenido al Quantum Neural Command Center</h2>
244
+ <p class="text-teal-200 max-w-3xl">El núcleo inteligente que conecta y potencia todas tus herramientas de IA. Controla, automatiza y optimiza tus flujos de trabajo con inteligencia artificial avanzada y redes neuronales integradas.</p>
245
  </div>
246
  <div class="mt-4 md:mt-0 flex items-center space-x-3">
247
  <div class="relative">
248
  <div class="h-3 w-3 rounded-full bg-green-500 animate-pulse absolute -top-1 -right-1"></div>
249
  <div class="h-3 w-3 rounded-full bg-green-500 animate-pulse absolute -top-1 -right-1"></div>
250
+ <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Neural Network Active</span>
251
  </div>
252
  <button class="bg-purple-700 hover:bg-purple-600 px-4 py-2 rounded-lg text-sm flex items-center">
253
+ <i class="fas fa-rocket mr-2"></i> Neural Boost
254
  </button>
255
  </div>
256
  </div>
257
  </div>
258
  </section>
259
 
260
+ <!-- Neural Network Status -->
261
  <section class="mb-12">
262
+ <div class="neural-card rounded-xl p-6">
263
  <h3 class="text-xl font-semibold mb-4 flex items-center">
264
+ <i class="fas fa-network-wired text-teal-400 mr-2"></i> Estado de la Red Neuronal
265
  </h3>
266
 
267
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
268
+ <div class="bg-gray-800 rounded-lg p-4 neural-border">
269
  <div class="flex justify-between items-center mb-2">
270
+ <span class="text-sm text-gray-400">Conexión Neural</span>
271
  <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Estable</span>
272
  </div>
273
  <div class="w-full bg-gray-700 rounded-full h-2 mb-1">
274
+ <div class="bg-teal-500 h-2 rounded-full" style="width: 98%"></div>
275
  </div>
276
  <div class="flex justify-between text-xs text-gray-400">
277
+ <span>Latencia: 12ms</span>
278
+ <span>98% estabilidad</span>
279
  </div>
280
  </div>
281
 
282
+ <div class="bg-gray-800 rounded-lg p-4 neural-border">
283
  <div class="flex justify-between items-center mb-2">
284
+ <span class="text-sm text-gray-400">Sincronización de IA</span>
285
  <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Activa</span>
286
  </div>
287
  <div class="w-full bg-gray-700 rounded-full h-2 mb-1">
288
  <div class="bg-blue-500 h-2 rounded-full" style="width: 100%"></div>
289
  </div>
290
  <div class="flex justify-between text-xs text-gray-400">
291
+ <span>18 modelos conectados</span>
292
+ <span>Ult. sync: 0.5s</span>
293
  </div>
294
  </div>
295
 
296
+ <div class="bg-gray-800 rounded-lg p-4 neural-border">
297
  <div class="flex justify-between items-center mb-2">
298
+ <span class="text-sm text-gray-400">Memoria Neural</span>
299
+ <span class="text-xs bg-yellow-900 text-yellow-300 px-2 py-1 rounded-full">45% usado</span>
300
  </div>
301
  <div class="w-full bg-gray-700 rounded-full h-2 mb-1">
302
+ <div class="bg-purple-500 h-2 rounded-full" style="width: 45%"></div>
303
  </div>
304
  <div class="flex justify-between text-xs text-gray-400">
305
+ <span>4.5TB/10TB usado</span>
306
  <span>Optimizado</span>
307
  </div>
308
  </div>
 
312
  <button class="bg-purple-700 hover:bg-purple-600 px-4 py-2 rounded-lg text-sm flex items-center">
313
  <i class="fas fa-sync-alt mr-2"></i> Reforzar Conexión
314
  </button>
315
+ <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg text-sm flex items-center border border-teal-700">
316
+ <i class="fas fa-shield-alt mr-2 text-teal-400"></i> Seguridad Neural
317
  </button>
318
  <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg text-sm flex items-center border border-blue-700">
319
  <i class="fas fa-cloud-upload-alt mr-2 text-blue-400"></i> Backup Automático
320
  </button>
321
+ <button class="bg-teal-900 hover:bg-teal-800 px-4 py-2 rounded-lg text-sm flex items-center">
322
+ <i class="fas fa-brain mr-2"></i> Entrenar Red
323
+ </button>
324
+ </div>
325
+ </div>
326
+ </section>
327
+
328
+ <!-- Neural Tools Integration -->
329
+ <section class="mb-12">
330
+ <div class="neural-card rounded-xl p-6">
331
+ <div class="flex justify-between items-center mb-6">
332
+ <h3 class="text-xl font-semibold flex items-center">
333
+ <i class="fas fa-plug text-teal-400 mr-2"></i> Neural Integration Hub
334
+ </h3>
335
+ <span class="text-xs bg-teal-900 text-teal-300 px-2 py-1 rounded-full">NEW in v5.0</span>
336
+ </div>
337
+
338
+ <p class="text-teal-200 mb-6">Conecta todas tus herramientas en flujos neuronales avanzados. Crea potentes integraciones entre diferentes módulos con aprendizaje automático adaptativo.</p>
339
+
340
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
341
+ <div class="bg-gray-800 rounded-lg p-4 neural-border">
342
+ <div class="flex items-center mb-3">
343
+ <div class="bg-purple-600 p-2 rounded-full mr-3">
344
+ <i class="fas fa-random"></i>
345
+ </div>
346
+ <h4 class="font-medium">Flujos Neuronales</h4>
347
+ </div>
348
+ <p class="text-sm text-gray-300 mb-3">Crea conexiones inteligentes entre herramientas con aprendizaje automático.</p>
349
+ <div class="flex space-x-2">
350
+ <span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded-full">Ejemplo: Prompt → Code</span>
351
+ </div>
352
+ </div>
353
+
354
+ <div class="bg-gray-800 rounded-lg p-4 neural-border">
355
+ <div class="flex items-center mb-3">
356
+ <div class="bg-blue-600 p-2 rounded-full mr-3">
357
+ <i class="fas fa-bolt"></i>
358
+ </div>
359
+ <h4 class="font-medium">Triggers Inteligentes</h4>
360
+ </div>
361
+ <p class="text-sm text-gray-300 mb-3">Configura disparadores neuronales y acciones predictivas entre herramientas.</p>
362
+ <div class="flex space-x-2">
363
+ <span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded-full">Ejemplo: On Data → Notify</span>
364
+ </div>
365
+ </div>
366
+ </div>
367
+
368
+ <div class="bg-gray-800 rounded-lg p-4 neural-border">
369
+ <div class="flex items-center justify-between mb-3">
370
+ <div class="flex items-center">
371
+ <div class="bg-teal-600 p-2 rounded-full mr-3">
372
+ <i class="fas fa-network-wired"></i>
373
+ </div>
374
+ <h4 class="font-medium">Visual Neural Builder</h4>
375
+ </div>
376
+ <button class="text-xs bg-teal-900 text-teal-300 px-3 py-1 rounded-full hover:bg-teal-800">
377
+ Probar ahora
378
+ </button>
379
+ </div>
380
+ <p class="text-sm text-gray-300 mb-3">Arrastra y suelta para crear integraciones neuronales visuales. Soporte para aprendizaje profundo y flujos adaptativos.</p>
381
+ <div class="bg-gray-900 rounded p-3 text-center text-gray-500 text-sm">
382
+ <i class="fas fa-mouse-pointer mr-1"></i> Arrastra herramientas aquí para comenzar a conectar
383
+ </div>
384
+ </div>
385
+ </div>
386
+ </section>
387
+
388
+ <!-- AI Model Orchestrator -->
389
+ <section class="mb-12">
390
+ <div class="neural-card rounded-xl p-6">
391
+ <div class="flex justify-between items-center mb-6">
392
+ <h3 class="text-xl font-semibold flex items-center">
393
+ <i class="fas fa-robot text-purple-400 mr-2"></i> AI Model Orchestrator
394
+ </h3>
395
+ <span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded-full">NEW in v5.0</span>
396
+ </div>
397
+
398
+ <p class="text-purple-200 mb-6">Coordina múltiples modelos de IA en flujos de trabajo neuronales. Combina las fortalezas de diferentes modelos con aprendizaje federado.</p>
399
+
400
+ <div class="overflow-x-auto">
401
+ <table class="min-w-full bg-gray-800 rounded-lg overflow-hidden">
402
+ <thead class="bg-gray-700">
403
+ <tr>
404
+ <th class="py-3 px-4 text-left">Modelo</th>
405
+ <th class="py-3 px-4 text-left">Tipo</th>
406
+ <th class="py-3 px-4 text-left">Estado</th>
407
+ <th class="py-3 px-4 text-left">Conexión</th>
408
+ <th class="py-3 px-4 text-left"></th>
409
+ </tr>
410
+ </thead>
411
+ <tbody class="divide-y divide-gray-700">
412
+ <tr>
413
+ <td class="py-3 px-4 flex items-center">
414
+ <img src="https://via.placeholder.com/30" class="rounded-full mr-2" alt="GPT-4">
415
+ <span>GPT-4 Turbo</span>
416
+ </td>
417
+ <td class="py-3 px-4">Texto</td>
418
+ <td class="py-3 px-4">
419
+ <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Activo</span>
420
+ </td>
421
+ <td class="py-3 px-4">
422
+ <div class="w-full bg-gray-700 rounded-full h-2">
423
+ <div class="bg-green-500 h-2 rounded-full" style="width: 98%"></div>
424
+ </div>
425
+ </td>
426
+ <td class="py-3 px-4 text-right">
427
+ <button class="text-purple-400 hover:text-purple-300">
428
+ <i class="fas fa-cog"></i>
429
+ </button>
430
+ </td>
431
+ </tr>
432
+ <tr>
433
+ <td class="py-3 px-4 flex items-center">
434
+ <img src="https://via.placeholder.com/30" class="rounded-full mr-2" alt="Claude">
435
+ <span>Claude 3 Opus</span>
436
+ </td>
437
+ <td class="py-3 px-4">Texto</td>
438
+ <td class="py-3 px-4">
439
+ <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Activo</span>
440
+ </td>
441
+ <td class="py-3 px-4">
442
+ <div class="w-full bg-gray-700 rounded-full h-2">
443
+ <div class="bg-green-500 h-2 rounded-full" style="width: 95%"></div>
444
+ </div>
445
+ </td>
446
+ <td class="py-3 px-4 text-right">
447
+ <button class="text-purple-400 hover:text-purple-300">
448
+ <i class="fas fa-cog"></i>
449
+ </button>
450
+ </td>
451
+ </tr>
452
+ <tr>
453
+ <td class="py-3 px-4 flex items-center">
454
+ <img src="https://via.placeholder.com/30" class="rounded-full mr-2" alt="Gemini">
455
+ <span>Gemini Ultra</span>
456
+ </td>
457
+ <td class="py-3 px-4">Multimodal</td>
458
+ <td class="py-3 px-4">
459
+ <span class="text-xs bg-yellow-900 text-yellow-300 px-2 py-1 rounded-full">Standby</span>
460
+ </td>
461
+ <td class="py-3 px-4">
462
+ <div class="w-full bg-gray-700 rounded-full h-2">
463
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 75%"></div>
464
+ </div>
465
+ </td>
466
+ <td class="py-3 px-4 text-right">
467
+ <button class="text-purple-400 hover:text-purple-300">
468
+ <i class="fas fa-cog"></i>
469
+ </button>
470
+ </td>
471
+ </tr>
472
+ <tr>
473
+ <td class="py-3 px-4 flex items-center">
474
+ <img src="https://via.placeholder.com/30" class="rounded-full mr-2" alt="DALL-E">
475
+ <span>DALL-E 3</span>
476
+ </td>
477
+ <td class="py-3 px-4">Imagen</td>
478
+ <td class="py-3 px-4">
479
+ <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Activo</span>
480
+ </td>
481
+ <td class="py-3 px-4">
482
+ <div class="w-full bg-gray-700 rounded-full h-2">
483
+ <div class="bg-green-500 h-2 rounded-full" style="width: 90%"></div>
484
+ </div>
485
+ </td>
486
+ <td class="py-3 px-4 text-right">
487
+ <button class="text-purple-400 hover:text-purple-300">
488
+ <i class="fas fa-cog"></i>
489
+ </button>
490
+ </td>
491
+ </tr>
492
+ <tr>
493
+ <td class="py-3 px-4 flex items-center">
494
+ <img src="https://via.placeholder.com/30" class="rounded-full mr-2" alt="LLaMA">
495
+ <span>LLaMA 3</span>
496
+ </td>
497
+ <td class="py-3 px-4">Texto</td>
498
+ <td class="py-3 px-4">
499
+ <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Activo</span>
500
+ </td>
501
+ <td class="py-3 px-4">
502
+ <div class="w-full bg-gray-700 rounded-full h-2">
503
+ <div class="bg-green-500 h-2 rounded-full" style="width: 92%"></div>
504
+ </div>
505
+ </td>
506
+ <td class="py-3 px-4 text-right">
507
+ <button class="text-purple-400 hover:text-purple-300">
508
+ <i class="fas fa-cog"></i>
509
+ </button>
510
+ </td>
511
+ </tr>
512
+ </tbody>
513
+ </table>
514
  </div>
515
+
516
+ <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
517
+ <div class="bg-gray-800 rounded-lg p-4 neural-border">
518
+ <h4 class="font-medium mb-2 flex items-center">
519
+ <i class="fas fa-random text-purple-400 mr-2"></i> Flujo Secuencial
520
+ </h4>
521
+ <p class="text-sm text-gray-300">Ejecuta modelos en secuencia, pasando la salida de uno como entrada al siguiente con aprendizaje contextual.</p>
522
+ </div>
523
+
524
+ <div class="bg-gray-800 rounded-lg p-4 neural-border">
525
+ <h4 class="font-medium mb-2 flex items-center">
526
+ <i class="fas fa-code-branch text-blue-400 mr-2"></i> Flujo Paralelo
527
+ </h4>
528
+ <p class="text-sm text-gray-300">Ejecuta múltiples modelos simultáneamente y combina sus resultados con redes neuronales de consenso.</p>
529
+ </div>
530
+
531
+ <div class="bg-gray-800 rounded-lg p-4 neural-border">
532
+ <h4 class="font-medium mb-2 flex items-center">
533
+ <i class="fas fa-chess-queen text-teal-400 mr-2"></i> Flujo de Consenso
534
+ </h4>
535
+ <p class="text-sm text-gray-300">Compara resultados de múltiples modelos con aprendizaje federado y selecciona el mejor.</p>
536
+ </div>
537
+ </div>
538
+
539
+ <button class="mt-6 bg-purple-700 hover:bg-purple-600 px-6 py-3 rounded-lg font-semibold flex items-center mx-auto">
540
+ <i class="fas fa-plus-circle mr-2"></i> Crear Nuevo Flujo de Modelos
541
+ </button>
542
  </div>
543
  </section>
544
 
545
+ <!-- Neural Tools Grid -->
546
  <section class="mb-12">
547
  <div class="flex justify-between items-center mb-6">
548
  <h3 class="text-xl font-semibold flex items-center">
549
+ <i class="fas fa-cubes text-purple-400 mr-2"></i> Herramientas Neurales
550
  </h3>
551
  <div class="relative">
552
  <input type="text" placeholder="Buscar herramienta..." class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-purple-600 w-64">
 
555
  </div>
556
 
557
  <div class="quantum-grid">
558
+ <!-- Neural Prompt Master -->
559
+ <div class="neural-card rounded-xl p-5 hover:neural-glow cursor-pointer">
560
  <div class="flex items-start mb-4">
561
  <div class="bg-purple-900 p-3 rounded-lg mr-3">
562
  <i class="fas fa-comment-dots text-xl"></i>
563
  </div>
564
  <div>
565
+ <h4 class="font-bold">Neural Prompt Master</h4>
566
  <p class="text-xs text-purple-300">Engineer v5.0</p>
567
  </div>
568
  </div>
569
+ <p class="text-sm text-gray-300 mb-4">Diseña prompts con redes neuronales que aprenden de tus patrones de uso.</p>
570
  <div class="flex justify-between items-center">
571
  <div class="flex space-x-2">
572
  <span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded-full">IA</span>
 
578
  </div>
579
  </div>
580
 
581
+ <!-- Code Neural -->
582
+ <div class="neural-card rounded-xl p-5 hover:neural-glow cursor-pointer">
583
  <div class="flex items-start mb-4">
584
  <div class="bg-green-900 p-3 rounded-lg mr-3">
585
  <i class="fas fa-code text-xl"></i>
586
  </div>
587
  <div>
588
+ <h4 class="font-bold">Code Neural</h4>
589
  <p class="text-xs text-green-300">Generator v5.0</p>
590
  </div>
591
  </div>
592
+ <p class="text-sm text-gray-300 mb-4">Generación de código asistida por redes neuronales con soporte multi-lenguaje.</p>
593
  <div class="flex justify-between items-center">
594
  <div class="flex space-x-2">
595
  <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">Dev</span>
 
601
  </div>
602
  </div>
603
 
604
+ <!-- Neural AutoFlow -->
605
+ <div class="neural-card rounded-xl p-5 hover:neural-glow cursor-pointer">
606
  <div class="flex items-start mb-4">
607
  <div class="bg-blue-900 p-3 rounded-lg mr-3">
608
  <i class="fas fa-project-diagram text-xl"></i>
609
  </div>
610
  <div>
611
+ <h4 class="font-bold">Neural AutoFlow</h4>
612
  <p class="text-xs text-blue-300">Automation v5.0</p>
613
  </div>
614
  </div>
615
+ <p class="text-sm text-gray-300 mb-4">Automatización de procesos con IA predictiva y aprendizaje automático.</p>
616
  <div class="flex justify-between items-center">
617
  <div class="flex space-x-2">
618
  <span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded-full">RPA</span>
 
624
  </div>
625
  </div>
626
 
627
+ <!-- Neural Data Forge -->
628
+ <div class="neural-card rounded-xl p-5 hover:neural-glow cursor-pointer">
629
  <div class="flex items-start mb-4">
630
  <div class="bg-red-900 p-3 rounded-lg mr-3">
631
  <i class="fas fa-database text-xl"></i>
632
  </div>
633
  <div>
634
+ <h4 class="font-bold">Neural Data Forge</h4>
635
  <p class="text-xs text-red-300">Analyzer v5.0</p>
636
  </div>
637
  </div>
638
+ <p class="text-sm text-gray-300 mb-4">Análisis de datos con redes neuronales profundas y visualización predictiva.</p>
639
  <div class="flex justify-between items-center">
640
  <div class="flex space-x-2">
641
  <span class="text-xs bg-red-900 text-red-300 px-2 py-1 rounded-full">BI</span>
 
647
  </div>
648
  </div>
649
 
650
+ <!-- NEW: Quantum Neural Sync -->
651
+ <div class="neural-card rounded-xl p-5 hover:neural-glow cursor-pointer border-2 border-teal-500">
652
  <div class="flex items-start mb-4">
653
+ <div class="bg-teal-900 p-3 rounded-lg mr-3">
654
  <i class="fas fa-sync-alt text-xl"></i>
655
  </div>
656
  <div>
657
+ <h4 class="font-bold">Quantum Neural Sync</h4>
658
+ <p class="text-xs text-teal-300">NEW v5.0</p>
659
  </div>
660
  </div>
661
+ <p class="text-sm text-gray-300 mb-4">Sincronización neuronal en tiempo real entre todas tus herramientas.</p>
662
  <div class="flex justify-between items-center">
663
  <div class="flex space-x-2">
664
+ <span class="text-xs bg-teal-900 text-teal-300 px-2 py-1 rounded-full">Sync</span>
665
  <span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded-full">Real-time</span>
666
  </div>
667
+ <button class="text-teal-400 hover:text-teal-300">
668
  <i class="fas fa-arrow-right"></i>
669
  </button>
670
  </div>
671
  </div>
672
 
673
+ <!-- NEW: Neural Orchestrator -->
674
+ <div class="neural-card rounded-xl p-5 hover:neural-glow cursor-pointer border-2 border-purple-500">
675
  <div class="flex items-start mb-4">
676
  <div class="bg-purple-900 p-3 rounded-lg mr-3">
677
  <i class="fas fa-robot text-xl"></i>
678
  </div>
679
  <div>
680
+ <h4 class="font-bold">Neural Orchestrator</h4>
681
  <p class="text-xs text-purple-300">NEW v5.0</p>
682
  </div>
683
  </div>
684
+ <p class="text-sm text-gray-300 mb-4">Coordina múltiples modelos de IA con redes neuronales para flujos complejos.</p>
685
  <div class="flex justify-between items-center">
686
  <div class="flex space-x-2">
687
  <span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded-full">Multi-AI</span>
 
695
  </div>
696
  </section>
697
 
698
+ <!-- Neural Performance & Resources -->
699
+ <section class="mb-12">
700
+ <div class="neural-card rounded-xl p-6">
701
+ <h3 class="text-xl font-semibold mb-6 flex items-center">
702
+ <i class="fas fa-tachometer-alt text-red-400 mr-2"></i> Rendimiento Neural
703
+ </h3>
704
+
705
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
706
+ <div class="bg-gray-800 rounded-lg p-4 neural-border">
707
+ <div class="flex justify-between items-start mb-2">
708
+ <div>
709
+ <h4 class="text-sm text-gray-400">CPU Neural</h4>
710
+ <p class="text-2xl font-bold">38%</p>
711
+ </div>
712
+ <div class="bg-red-900 p-2 rounded-full">
713
+ <i class="fas fa-microchip text-red-400"></i>
714
+ </div>
715
+ </div>
716
+ <div class="w-full bg-gray-700 rounded-full h-2">
717
+ <div class="bg-red-500 h-2 rounded-full" style="width: 38%"></div>
718
+ </div>
719
+ </div>
720
+
721
+ <div class="bg-gray-800 rounded-lg p-4 neural-border">
722
+ <div class="flex justify-between items-start mb-2">
723
+ <div>
724
+ <h4 class="text-sm text-gray-400">Memory Neural</h4>
725
+ <p class="text-2xl font-bold">5.2/16GB</p>
726
+ </div>
727
+ <div class="bg-blue-900 p-2 rounded-full">
728
+ <i class="fas fa-memory text-blue-400"></i>
729
+ </div>
730
+ </div>
731
+ <div class="w-full bg-gray-700 rounded-full h-2">
732
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 32.5%"></div>
733
+ </div>
734
+ </div>
735
+
736
+ <div class="bg-gray-800 rounded-lg p-4 neural-border">
737
+ <div class="flex justify-between items-start mb-2">
738
+ <div>
739
+ <h4 class="text-sm text-gray-400">GPU Neural</h4>
740
+ <p class="text-2xl font-bold">65%</p>
741
+ </div>
742
+ <div class="bg-purple-900 p-2 rounded-full">
743
+ <i class="fas fa-gamepad text-purple-400"></i>
744
+ </div>
745
+ </div>
746
+ <div class="w-full bg-gray-700 rounded-full h-2">
747
+ <div class="bg-purple-500 h-2 rounded-full" style="width: 65%"></div>
748
+ </div>
749
+ </div>
750
+
751
+ <div class="bg-gray-800 rounded-lg p-4 neural-border">
752
+ <div class="flex justify-between items-start mb-2">
753
+ <div>
754
+ <h4 class="text-sm text-gray-400">Neural Network</h4>
755
+ <p class="text-2xl font-bold">82%</p>
756
+ </div>
757
+ <div class="bg-teal-900 p-2 rounded-full">
758
+ <i class="fas fa-brain text-teal-400"></i>
759
+ </div>
760
+ </div>
761
+ <div class="w-full bg-gray-700 rounded-full h-2">
762
+ <div class="bg-teal-500 h-2 rounded-full" style="width: 82%"></div>
763
+ </div>
764
+ </div>
765
+ </div>
766
+
767
+ <div class="bg-gray-800 rounded-lg p-4 neural-border">
768
+ <div class="flex justify-between items-center mb-3">
769
+ <h4 class="font-medium">Optimización Neural Automática</h4>
770
+ <label class="relative inline-flex items-center cursor-pointer">
771
+ <input type="checkbox" value="" class="sr-only peer" checked>
772
+ <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
773
+ </label>
774
+ </div>
775
+ <p class="text-sm text-gray-300 mb-3">Activa para permitir que el Neural Command Center optimice automáticamente la asignación de recursos entre herramientas usando IA predictiva.</p>
776
+ <div class="flex space-x-3">
777
+ <button class="text-xs bg-purple-900 text-purple-300 px-3 py-1 rounded-full hover:bg-purple-800">
778
+ <i class="fas fa-bolt mr-1"></i> Neural Boost
779
+ </button>
780
+ <button class="text-xs bg-teal-900 text-teal-300 px-3 py-1 rounded-full hover:bg-teal-800">
781
+ <i class="fas fa-brain mr-1"></i> Entrenar Red
782
+ </button>
783
+ <button class="text-xs bg-gray-700 text-gray-300 px-3 py-1 rounded-full hover:bg-gray-600">
784
+ <i class="fas fa-chart-line mr-1"></i> Ver Estadísticas
785
+ </button>
786
+ </div>
787
+ </div>
788
+ </div>
789
+ </section>
790
+
791
+ <!-- Neural Recent Activity & Quick Actions -->
792
  <section class="mb-12">
793
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
794
+ <!-- Neural Recent Activity -->
795
+ <div class="neural-card rounded-xl p-6 lg:col-span-2">
796
  <h3 class="text-xl font-semibold mb-4 flex items-center">
797
+ <i class="fas fa-history text-purple-400 mr-2"></i> Actividad Neural Reciente
798
  </h3>
799
 
800
  <div class="space-y-4">
 
804
  </div>
805
  <div class="flex-1">
806
  <div class="flex justify-between">
807
+ <span class="font-medium">Code Neural</span>
808
+ <span class="text-xs text-gray-400">hace 1 min</span>
809
  </div>
810
+ <p class="text-sm text-gray-300">Generación de componente React con aprendizaje automático completada</p>
811
  <div class="mt-1 flex space-x-2">
812
  <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">React</span>
813
  <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">TypeScript</span>
814
+ <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">AI</span>
815
  </div>
816
  </div>
817
  </div>
 
822
  </div>
823
  <div class="flex-1">
824
  <div class="flex justify-between">
825
+ <span class="font-medium">Neural Prompt</span>
826
+ <span class="text-xs text-gray-400">hace 12 min</span>
827
  </div>
828
+ <p class="text-sm text-gray-300">Optimización de prompt con red neuronal para GPT-4 completada</p>
829
  <div class="mt-1 flex space-x-2">
830
  <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">GPT-4</span>
831
+ <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Neural</span>
832
  </div>
833
  </div>
834
  </div>
 
839
  </div>
840
  <div class="flex-1">
841
  <div class="flex justify-between">
842
+ <span class="font-medium">Neural AutoFlow</span>
843
+ <span class="text-xs text-gray-400">hace 28 min</span>
844
  </div>
845
+ <p class="text-sm text-gray-300">Nuevo flujo neuronal conectando Prompt Master con Code Quantum</p>
846
  <div class="mt-1 flex space-x-2">
847
  <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Integración</span>
848
+ <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Neural</span>
849
  </div>
850
  </div>
851
  </div>
852
 
853
  <div class="flex items-start">
854
+ <div class="bg-teal-600 rounded-full p-2 mr-3">
855
  <i class="fas fa-database text-white text-sm"></i>
856
  </div>
857
  <div class="flex-1">
858
  <div class="flex justify-between">
859
+ <span class="font-medium">Neural Data</span>
860
+ <span class="text-xs text-gray-400">hace 45 min</span>
861
  </div>
862
+ <p class="text-sm text-gray-300">Análisis predictivo de dataset completado - 28 insights neuronales</p>
863
  <div class="mt-1 flex space-x-2">
864
  <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Análisis</span>
865
+ <span class="text-xs bg-gray-800 text-gray-300 px-2 py-1 rounded-full">Neural</span>
866
  </div>
867
  </div>
868
  </div>
 
873
  </button>
874
  </div>
875
 
876
+ <!-- Neural Quick Actions -->
877
+ <div class="neural-card rounded-xl p-6">
878
  <h3 class="text-xl font-semibold mb-4 flex items-center">
879
+ <i class="fas fa-bolt text-yellow-400 mr-2"></i> Acciones Neurales
880
  </h3>
881
 
882
  <div class="space-y-3">
 
884
  <div class="bg-purple-900 p-2 rounded-lg mr-3">
885
  <i class="fas fa-plus"></i>
886
  </div>
887
+ <span>Nuevo Flujo Neuronal</span>
888
  </button>
889
 
890
+ <button class="w-full bg-gray-800 hover:bg-gray-700 px-4 py-3 rounded-lg text-left flex items-center border border-teal-700">
891
+ <div class="bg-teal-900 p-2 rounded-lg mr-3">
892
+ <i class="fas fa-brain"></i>
893
  </div>
894
+ <span>Entrenar Red Neuronal</span>
895
  </button>
896
 
897
  <button class="w-full bg-gray-800 hover:bg-gray-700 px-4 py-3 rounded-lg text-left flex items-center border border-blue-700">
 
919
  </div>
920
  </section>
921
 
922
+ <!-- NEW: Neural Learning Center -->
923
  <section class="mb-12">
924
+ <div class="neural-card rounded-xl p-6">
925
  <div class="flex justify-between items-center mb-6">
926
  <h3 class="text-xl font-semibold flex items-center">
927
+ <i class="fas fa-graduation-cap text-teal-400 mr-2"></i> Neural Learning Center
928
  </h3>
929
+ <span class="text-xs bg-teal-900 text-teal-300 px-2 py-1 rounded-full">NEW in v5.0</span>
930
  </div>
931
 
932
+ <p class="text-teal-200 mb-6">Entrena redes neuronales personalizadas para optimizar tus flujos de trabajo. Aprende de tus patrones de uso y mejora continuamente.</p>
933
 
934
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
935
+ <div class="bg-gray-800 rounded-lg p-4 neural-border">
936
  <div class="flex items-center mb-3">
937
  <div class="bg-purple-600 p-2 rounded-full mr-3">
938
+ <i class="fas fa-chart-line"></i>
939
  </div>
940
+ <h4 class="font-medium">Aprendizaje Automático</h4>
941
  </div>
942
+ <p class="text-sm text-gray-300 mb-3">Entrena modelos para que aprendan de tus patrones de uso y se adapten a tus necesidades.</p>
943
  <div class="flex space-x-2">
944
+ <span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded-full">Supervisado</span>
945
+ <span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded-full">No supervisado</span>
946
  </div>
947
  </div>
948
 
949
+ <div class="bg-gray-800 rounded-lg p-4 neural-border">
950
  <div class="flex items-center mb-3">
951
  <div class="bg-blue-600 p-2 rounded-full mr-3">
952
+ <i class="fas fa-network-wired"></i>
953
  </div>
954
+ <h4 class="font-medium">Redes Neuronales</h4>
955
  </div>
956
+ <p class="text-sm text-gray-300 mb-3">Configura arquitecturas neuronales profundas para tareas complejas.</p>
957
  <div class="flex space-x-2">
958
+ <span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded-full">CNN</span>
959
+ <span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded-full">RNN</span>
960
+ <span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded-full">Transformers</span>
961
+ </div>
962
+ </div>
963
+
964
+ <div class="bg-gray-800 rounded-lg p-4 neural-border">
965
+ <div class="flex items-center mb-3">
966
+ <div class="bg-teal-600 p-2 rounded-full mr-3">
967
+ <i class="fas fa-robot"></i>
968
+ </div>
969
+ <h4 class="font-medium">Aprendizaje Federado</h4>
970
+ </div>
971
+ <p class="text-sm text-gray-300 mb-3">Entrena modelos colaborativos sin compartir datos sensibles.</p>
972
+ <div class="flex space-x-2">
973
+ <span class="text-xs bg-teal-900 text-teal-300 px-2 py-1 rounded-full">Privacidad</span>
974
+ <span class="text-xs bg-teal-900 text-teal-300 px-2 py-1 rounded-full">Colaborativo</span>
975
  </div>
976
  </div>
977
  </div>
978
 
979
+ <div class="bg-gray-800 rounded-lg p-4 neural-border">
980
  <div class="flex items-center justify-between mb-3">
981
  <div class="flex items-center">
982
  <div class="bg-green-600 p-2 rounded-full mr-3">
983
+ <i class="fas fa-magic"></i>
984
  </div>
985
+ <h4 class="font-medium">AutoML Neuronal</h4>
986
  </div>
987
  <button class="text-xs bg-green-900 text-green-300 px-3 py-1 rounded-full hover:bg-green-800">
988
  Probar ahora
989
  </button>
990
  </div>
991
+ <p class="text-sm text-gray-300 mb-3">Automatiza el entrenamiento de modelos de machine learning con solo unos clics.</p>
992
  <div class="bg-gray-900 rounded p-3 text-center text-gray-500 text-sm">
993
+ <i class="fas fa-mouse-pointer mr-1"></i> Selecciona tus datos para comenzar el entrenamiento automático
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
994
  </div>
995
  </div>
996
  </div>
997
  </section>
998
  </div>
999
 
1000
+ <!-- Quantum Neural Footer -->
1001
  <footer class="bg-gray-800 text-white py-8 border-t border-gray-700">
1002
  <div class="container mx-auto px-4">
1003
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
1004
  <div>
1005
  <h3 class="text-lg font-semibold mb-4 flex items-center">
1006
+ <i class="fas fa-brain text-teal-400 mr-2"></i> Quantum Neural
1007
  </h3>
1008
+ <p class="text-sm text-gray-400">El núcleo inteligente del ecosistema Quantum Box. Potencia tus herramientas con redes neuronales avanzadas y aprendizaje automático.</p>
1009
  </div>
1010
 
1011
  <div>
1012
+ <h3 class="text-lg font-semibold mb-4">Herramientas Neurales</h3>
1013
  <ul class="space-y-2 text-sm text-gray-400">
1014
+ <li><a href="#" class="hover:text-teal-300 transition">Neural Prompt</a></li>
1015
+ <li><a href="#" class="hover:text-teal-300 transition">Code Neural</a></li>
1016
+ <li><a href="#" class="hover:text-teal-300 transition">Neural AutoFlow</a></li>
1017
+ <li><a href="#" class="hover:text-teal-300 transition">Neural Data</a></li>
1018
+ <li><a href="#" class="hover:text-teal-300 transition">Neural Orchestrator</a></li>
1019
  </ul>
1020
  </div>
1021
 
1022
  <div>
1023
+ <h3 class="text-lg font-semibold mb-4">Recursos Neurales</h3>
1024
  <ul class="space-y-2 text-sm text-gray-400">
1025
+ <li><a href="#" class="hover:text-teal-300 transition">Documentación</a></li>
1026
+ <li><a href="#" class="hover:text-teal-300 transition">Tutoriales</a></li>
1027
+ <li><a href="#" class="hover:text-teal-300 transition">API Neural</a></li>
1028
+ <li><a href="#" class="hover:text-teal-300 transition">Blog</a></li>
1029
+ <li><a href="#" class="hover:text-teal-300 transition">Roadmap</a></li>
1030
  </ul>
1031
  </div>
1032
 
1033
  <div>
1034
+ <h3 class="text-lg font-semibold mb-4">Soporte Neural</h3>
1035
  <ul class="space-y-2 text-sm text-gray-400">
1036
+ <li><a href="#" class="hover:text-teal-300 transition">Centro de Ayuda</a></li>
1037
+ <li><a href="#" class="hover:text-teal-300 transition">Comunidad</a></li>
1038
+ <li><a href="#" class="hover:text-teal-300 transition">Contacto</a></li>
1039
+ <li><a href="#" class="hover:text-teal-300 transition">Status</a></li>
1040
+ <li><a href="#" class="hover:text-teal-300 transition">Feedback</a></li>
1041
  </ul>
1042
  </div>
1043
  </div>
 
1045
  <div class="border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center">
1046
  <div class="flex items-center space-x-4 mb-4 md:mb-0">
1047
  <div class="flex items-center space-x-2">
1048
+ <i class="fas fa-brain text-teal-400"></i>
1049
+ <span class="font-bold">QUANTUM NEURAL COMMAND CENTER</span>
1050
  </div>
1051
  <span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded-full">v5.0.1</span>
1052
  </div>
1053
 
1054
  <div class="flex space-x-6">
1055
+ <a href="#" class="hover:text-teal-300 transition">
1056
  <i class="fab fa-github"></i>
1057
  </a>
1058
+ <a href="#" class="hover:text-teal-300 transition">
1059
  <i class="fab fa-twitter"></i>
1060
  </a>
1061
+ <a href="#" class="hover:text-teal-300 transition">
1062
  <i class="fab fa-linkedin"></i>
1063
  </a>
1064
+ <a href="#" class="hover:text-teal-300 transition">
1065
  <i class="fab fa-discord"></i>
1066
  </a>
1067
  </div>
1068
  </div>
1069
 
1070
  <div class="mt-8 text-center text-xs text-gray-500">
1071
+ <p>© 2023 Quantum Neural Command Center. Todos los derechos reservados.</p>
1072
  <p class="mt-1">Desarrollado con <i class="fas fa-heart text-red-400"></i> para revolucionar el futuro de la IA y la automatización.</p>
1073
  </div>
1074
  </div>
 
1081
  menu.classList.toggle('hidden');
1082
  });
1083
 
1084
+ // Simulate neural network status updates
1085
+ function updateNeuralStatus() {
1086
+ const stabilityElements = document.querySelectorAll('.neural-stability-indicator');
1087
  stabilityElements.forEach(el => {
1088
+ const currentWidth = parseInt(el.style.width) || 95;
1089
+ const variation = Math.floor(Math.random() * 4) - 2; // -2 to +2
1090
  let newWidth = currentWidth + variation;
1091
+ newWidth = Math.max(92, Math.min(99, newWidth)); // Keep between 92-99%
1092
  el.style.width = newWidth + '%';
1093
 
1094
  // Update color based on value
1095
+ if (newWidth < 95) {
1096
+ el.classList.remove('bg-teal-500');
1097
  el.classList.add('bg-yellow-500');
1098
  } else {
1099
  el.classList.remove('bg-yellow-500');
1100
+ el.classList.add('bg-teal-500');
1101
  }
1102
  });
1103
 
1104
+ setTimeout(updateNeuralStatus, 3000);
1105
  }
1106
 
1107
+ // Start neural network simulation
1108
+ updateNeuralStatus();
1109
 
1110
+ // Simulate neural resource usage fluctuations
1111
+ function updateNeuralResourceUsage() {
1112
+ const cpu = document.querySelector('.neural-cpu-usage');
1113
+ const memory = document.querySelector('.neural-memory-usage');
1114
+ const gpu = document.querySelector('.neural-gpu-usage');
1115
+ const network = document.querySelector('.neural-network-usage');
1116
 
1117
  // Random fluctuations
1118
+ const cpuVariation = Math.floor(Math.random() * 8) - 4;
1119
+ const memoryVariation = Math.floor(Math.random() * 6) - 3;
1120
+ const gpuVariation = Math.floor(Math.random() * 10) - 5;
1121
+ const networkVariation = Math.floor(Math.random() * 12) - 6;
1122
 
1123
  // Update CPU
1124
+ let currentCpu = parseInt(cpu.textContent) || 38;
1125
+ currentCpu = Math.max(25, Math.min(60, currentCpu + cpuVariation));
1126
  cpu.textContent = currentCpu + '%';
1127
  cpu.nextElementChild.style.width = currentCpu + '%';
1128
 
1129
  // Update Memory
1130
+ let currentMem = parseInt(memory.textContent.split('/')[0]) || 5.2;
1131
+ currentMem = Math.max(3.5, Math.min(8.5, currentMem + (memoryVariation * 0.1)));
1132
+ memory.textContent = currentMem.toFixed(1) + '/16GB';
1133
+ memory.nextElementChild.style.width = ((currentMem / 16) * 100) + '%';
1134
 
1135
  // Update GPU
1136
+ let currentGpu = parseInt(gpu.textContent) || 65;
1137
+ currentGpu = Math.max(50, Math.min(80, currentGpu + gpuVariation));
1138
  gpu.textContent = currentGpu + '%';
1139
  gpu.nextElementChild.style.width = currentGpu + '%';
1140
 
1141
  // Update Network
1142
+ let currentNet = parseInt(network.textContent) || 82;
1143
+ currentNet = Math.max(75, Math.min(90, currentNet + (networkVariation * 0.5)));
1144
+ network.textContent = currentNet + '%';
1145
+ network.nextElementChild.style.width = currentNet + '%';
1146
 
1147
+ setTimeout(updateNeuralResourceUsage, 2000);
1148
  }
1149
 
1150
+ // Start neural resource simulation
1151
+ updateNeuralResourceUsage();
1152
  </script>
1153
  <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=jsonet/prompt-master-engineer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1154
  </html>