Hugging Face's logo

Spaces:
docto41
/
quantum-control
Running

App Files Community
docto41 commited on
Commit
2d34fd3
·
verified ·
1 Parent(s): 9edbbda

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +405 -553
  2. prompts.txt +2 -1
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 SITE BUILDER 9000 - Powered by 360K AI</title>
7
  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
@@ -55,10 +55,25 @@
55
  transform: translateY(-5px);
56
  box-shadow: 0 10px 20px rgba(0, 228, 255, 0.3);
57
  }
58
- .description-input {
59
- min-height: 150px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
60
  }
61
- .modal {
62
  display: none;
63
  position: fixed;
64
  top: 0;
@@ -69,59 +84,23 @@
69
  z-index: 1000;
70
  overflow-y: auto;
71
  }
72
- .modal-content {
73
  background: #111827;
74
  margin: 5% auto;
75
- padding: 20px;
76
  width: 90%;
77
- max-width: 1200px;
78
  border-radius: 10px;
79
  max-height: 80vh;
80
  overflow-y: auto;
81
  }
82
- .code-block {
83
- background: #1e293b;
84
- padding: 15px;
85
- border-radius: 5px;
86
- font-family: monospace;
87
- white-space: pre-wrap;
88
- max-height: 60vh;
89
- overflow-y: auto;
90
- }
91
- .close-modal {
92
  color: #aaa;
93
  float: right;
94
  font-size: 28px;
95
  font-weight: bold;
96
  cursor: pointer;
97
  }
98
- .site-preview {
99
- border: 1px solid #334155;
100
- min-height: 300px;
101
- margin-top: 20px;
102
- }
103
- .tab {
104
- padding: 10px 20px;
105
- cursor: pointer;
106
- border-bottom: 2px solid transparent;
107
- }
108
- .tab.active {
109
- border-bottom: 2px solid #3b82f6;
110
- color: #3b82f6;
111
- }
112
- .tool-category {
113
- position: relative;
114
- overflow: hidden;
115
- }
116
- .tool-category::after {
117
- content: "";
118
- position: absolute;
119
- top: 0;
120
- left: 0;
121
- right: 0;
122
- height: 1px;
123
- background: linear-gradient(90deg, transparent, rgba(0, 228, 255, 0.5), transparent);
124
- }
125
  </style>
126
  </head>
127
  <body class="bg-black text-gray-100 min-h-screen overflow-x-hidden">
@@ -214,211 +193,46 @@
214
  </div>
215
  </div>
216
 
217
- <!-- Main Builder Interface -->
218
  <div class="lg:col-span-3 bg-gray-900 rounded-xl p-6 border border-gray-800 relative overflow-hidden">
219
  <!-- Quantum Particles Background -->
220
  <div id="quantum-particles"></div>
221
 
222
  <div class="relative z-10">
223
  <div class="flex justify-between items-center mb-6">
224
- <h2 class="text-2xl font-bold neon-text">QUANTUM SITE BUILDER 9000</h2>
225
  <div class="flex space-x-3">
226
- <button id="generate-btn" class="quantum-field py-2 px-4 rounded-lg flex items-center">
227
- <i class="fas fa-rocket mr-2"></i> GENERATE
228
- </button>
229
- <button class="bg-purple-900 hover:bg-purple-800 py-2 px-4 rounded-lg flex items-center transition">
230
- <i class="fas fa-cog mr-2"></i> SETTINGS
 
231
  </button>
232
  </div>
233
  </div>
234
 
235
- <!-- Quantum Creation Zone -->
236
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
237
- <!-- Input Panel -->
238
- <div class="lg:col-span-1 holographic rounded-lg p-4">
239
- <h3 class="font-semibold mb-4 flex items-center">
240
- <i class="fas fa-keyboard mr-2"></i> DESCRIPTION INPUT
241
- </h3>
242
-
243
- <div class="space-y-4">
244
- <div>
245
- <label class="text-xs block mb-1">DESCRIBE YOUR SITE</label>
246
- <textarea id="site-description" class="quantum-field w-full p-3 rounded-lg text-sm description-input" placeholder="Décrivez votre site en détail..."></textarea>
247
- </div>
248
-
249
- <div>
250
- <label class="text-xs block mb-1">STYLE PREFERENCE</label>
251
- <select id="style-preference" class="quantum-field w-full p-2 rounded-lg text-sm">
252
- <option>Modern</option>
253
- <option>Minimalist</option>
254
- <option>Futuristic</option>
255
- <option>Elegant</option>
256
- <option>Bold</option>
257
- </select>
258
- </div>
259
-
260
- <div>
261
- <label class="text-xs block mb-1">COLOR SCHEME</label>
262
- <select id="color-scheme" class="quantum-field w-full p-2 rounded-lg text-sm">
263
- <option>Dark Theme</option>
264
- <option>Light Theme</option>
265
- <option>Colorful</option>
266
- <option>Monochrome</option>
267
- </select>
268
- </div>
269
-
270
- <div class="pt-4">
271
- <button id="generate-from-description" class="w-full quantum-field py-3 rounded-lg font-semibold flex items-center justify-center">
272
- <i class="fas fa-atom mr-2"></i> GENERATE FROM DESCRIPTION
273
- </button>
274
- </div>
275
- </div>
276
- </div>
277
-
278
- <!-- Preview Panel -->
279
- <div class="lg:col-span-2">
280
- <div class="holographic rounded-lg p-4 h-full">
281
- <div class="flex justify-between items-center mb-4">
282
- <h3 class="font-semibold flex items-center">
283
- <i class="fas fa-eye mr-2"></i> QUANTUM PREVIEW
284
- </h3>
285
- <div class="flex space-x-2">
286
- <button class="bg-gray-800 hover:bg-gray-700 p-2 rounded-lg">
287
- <i class="fas fa-desktop text-xs"></i>
288
- </button>
289
- <button class="bg-gray-800 hover:bg-gray-700 p-2 rounded-lg">
290
- <i class="fas fa-mobile-alt text-xs"></i>
291
- </button>
292
- <button class="bg-gray-800 hover:bg-gray-700 p-2 rounded-lg">
293
- <i class="fas fa-tablet-alt text-xs"></i>
294
- </button>
295
- </div>
296
- </div>
297
-
298
- <!-- Quantum Preview Display -->
299
- <div id="preview-container" class="bg-black border border-gray-800 rounded-lg h-96 flex items-center justify-center relative overflow-hidden">
300
- <!-- Quantum Orb Animation -->
301
- <div class="quantum-orb absolute w-24 h-24 rounded-full bg-gradient-to-r from-blue-500 to-teal-500 opacity-20"></div>
302
-
303
- <div id="default-preview" class="text-center z-10 p-6">
304
- <div class="w-16 h-16 bg-blue-900 rounded-full flex items-center justify-center mx-auto mb-4">
305
- <i class="fas fa-atom text-2xl text-blue-400"></i>
306
- </div>
307
- <h3 class="text-xl font-bold mb-2">QUANTUM BUILDER</h3>
308
- <p class="text-gray-400 text-sm max-w-md mx-auto">
309
- Décrivez votre site et nos 360,000 IA quantiques généreront une prévisualisation instantanée.
310
- </p>
311
- <div id="loader" class="mt-6 flex justify-center hidden">
312
- <div class="quantum-loader w-8 h-8 rounded-full"></div>
313
- </div>
314
- </div>
315
-
316
- <div id="generated-preview" class="hidden w-full h-full"></div>
317
- </div>
318
-
319
- <div class="mt-4 grid grid-cols-4 gap-2">
320
- <button class="bg-gray-800 hover:bg-gray-700 py-2 rounded-lg text-xs">
321
- <i class="fas fa-palette mr-1"></i> DESIGN
322
- </button>
323
- <button class="bg-gray-800 hover:bg-gray-700 py-2 rounded-lg text-xs">
324
- <i class="fas fa-code mr-1"></i> CODE
325
- </button>
326
- <button class="bg-gray-800 hover:bg-gray-700 py-2 rounded-lg text-xs">
327
- <i class="fas fa-search mr-1"></i> SEO
328
- </button>
329
- <button class="bg-gray-800 hover:bg-gray-700 py-2 rounded-lg text-xs">
330
- <i class="fas fa-bolt mr-1"></i> OPTIMIZE
331
- </button>
332
- </div>
333
- </div>
334
- </div>
335
  </div>
336
- </div>
337
- </div>
338
- </div>
339
-
340
- <!-- AI Tool Matrix - Full 20,000 Tools -->
341
- <div class="bg-gray-900 rounded-xl p-6 border border-gray-800 mb-8">
342
- <div class="flex justify-between items-center mb-6">
343
- <h2 class="text-2xl font-bold neon-text">20,000 AI TOOLS MATRIX</h2>
344
- <div class="flex items-center space-x-3">
345
- <div class="relative">
346
- <input type="text" id="tool-search" placeholder="Search 20K tools..." class="quantum-field px-4 py-2 pr-8 rounded-lg text-sm w-64">
347
- <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i>
348
  </div>
349
- <button class="quantum-field py-2 px-3 rounded-lg">
350
- <i class="fas fa-sliders-h"></i>
351
- </button>
352
  </div>
353
  </div>
354
-
355
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 gap-4" id="tools-container">
356
- <!-- Tools will be inserted here by JavaScript -->
357
- </div>
358
-
359
- <div class="mt-6 flex justify-center">
360
- <button id="load-more-tools" class="quantum-field px-6 py-2 rounded-lg">
361
- <i class="fas fa-sync-alt mr-2"></i> LOAD MORE TOOLS
362
- </button>
363
- </div>
364
  </div>
365
-
366
- <!-- Quantum AI Army Visualization -->
367
- <div class="bg-gray-900 rounded-xl p-6 border border-gray-800 mb-8">
368
- <div class="flex justify-between items-center mb-6">
369
- <h2 class="text-2xl font-bold neon-text">360,000 AI ARMY DEPLOYMENT</h2>
370
- <div class="flex items-center space-x-2">
371
- <span class="text-xs bg-green-900 px-2 py-1 rounded">LIVE FEED</span>
372
- <div class="w-3 h-3 rounded-full bg-green-500"></div>
373
- </div>
374
- </div>
375
-
376
- <div class="h-96 bg-black rounded-lg border border-gray-800 relative overflow-hidden">
377
- <!-- AI Army Visualization -->
378
- <div id="ai-visualization" class="absolute inset-0">
379
- <!-- This will be populated with JavaScript -->
380
- </div>
381
-
382
- <div class="absolute bottom-4 left-4 right-4 bg-gray-900 bg-opacity-80 p-4 rounded-lg">
383
- <div class="grid grid-cols-4 gap-4">
384
- <div>
385
- <div class="text-xs text-gray-400 mb-1">DESIGN BOTS</div>
386
- <div class="flex items-center">
387
- <div class="w-full bg-gray-800 rounded-full h-2 mr-2">
388
- <div class="bg-blue-500 h-2 rounded-full" style="width: 72%"></div>
389
- </div>
390
- <span class="text-xs">72K</span>
391
- </div>
392
- </div>
393
- <div>
394
- <div class="text-xs text-gray-400 mb-1">CODE BOTS</div>
395
- <div class="flex items-center">
396
- <div class="w-full bg-gray-800 rounded-full h-2 mr-2">
397
- <div class="bg-purple-500 h-2 rounded-full" style="width: 100%"></div>
398
- </div>
399
- <span class="text-xs">108K</span>
400
- </div>
401
- </div>
402
- <div>
403
- <div class="text-xs text-gray-400 mb-1">SEO BOTS</div>
404
- <div class="flex items-center">
405
- <div class="w-full bg-gray-800 rounded-full h-2 mr-2">
406
- <div class="bg-green-500 h-2 rounded-full" style="width: 36%"></div>
407
- </div>
408
- <span class="text-xs">36K</span>
409
- </div>
410
- </div>
411
- <div>
412
- <div class="text-xs text-gray-400 mb-1">QUANTUM BOTS</div>
413
- <div class="flex items-center">
414
- <div class="w-full bg-gray-800 rounded-full h-2 mr-2">
415
- <div class="bg-teal-500 h-2 rounded-full" style="width: 40%"></div>
416
- </div>
417
- <span class="text-xs">144K</span>
418
- </div>
419
- </div>
420
- </div>
421
- </div>
422
  </div>
423
  </div>
424
  </div>
@@ -429,7 +243,7 @@
429
  <div class="flex flex-col md:flex-row justify-between items-center">
430
  <div class="flex items-center space-x-4 mb-4 md:mb-0">
431
  <i class="fas fa-atom text-blue-400 text-2xl"></i>
432
- <span class="text-xl font-bold">QUANTUM SITE BUILDER 9000</span>
433
  </div>
434
  <div class="flex space-x-6">
435
  <span class="text-xs text-gray-400">v12.8.9 QUANTUM EDITION</span>
@@ -441,46 +255,6 @@
441
  </div>
442
  </footer>
443
 
444
- <!-- Code Modal -->
445
- <div id="code-modal" class="modal">
446
- <div class="modal-content">
447
- <span class="close-modal">&times;</span>
448
- <h2 class="text-2xl font-bold mb-4">CODE GENERATED BY QUANTUM AI</h2>
449
-
450
- <div class="flex border-b border-gray-700 mb-4">
451
- <div class="tab active" data-tab="html">HTML</div>
452
- <div class="tab" data-tab="css">CSS</div>
453
- <div class="tab" data-tab="js">JavaScript</div>
454
- <div class="tab" data-tab="preview">Preview</div>
455
- </div>
456
-
457
- <div id="html-tab" class="tab-content">
458
- <div class="code-block" id="html-code"></div>
459
- </div>
460
-
461
- <div id="css-tab" class="tab-content hidden">
462
- <div class="code-block" id="css-code"></div>
463
- </div>
464
-
465
- <div id="js-tab" class="tab-content hidden">
466
- <div class="code-block" id="js-code"></div>
467
- </div>
468
-
469
- <div id="preview-tab" class="tab-content hidden">
470
- <div class="site-preview" id="site-preview"></div>
471
- </div>
472
-
473
- <div class="mt-4 flex justify-end space-x-3">
474
- <button id="copy-html" class="quantum-field px-4 py-2 rounded-lg">
475
- <i class="fas fa-copy mr-2"></i> Copy HTML
476
- </button>
477
- <button id="download-all" class="quantum-field px-4 py-2 rounded-lg">
478
- <i class="fas fa-download mr-2"></i> Download All
479
- </button>
480
- </div>
481
- </div>
482
- </div>
483
-
484
  <script>
485
  // Quantum Time Display
486
  function updateQuantumTime() {
@@ -541,309 +315,387 @@
541
  document.head.appendChild(style);
542
  }
543
 
544
- // Visualize AI army
545
- function visualizeAIArmy() {
546
- const container = document.getElementById('ai-visualization');
547
- const aiCount = 360; // Representing 360,000 AIs (1 dot = 1000 AIs)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
548
 
549
- for (let i = 0; i < aiCount; i++) {
550
- const aiDot = document.createElement('div');
551
- aiDot.className = 'absolute rounded-full';
552
-
553
- // Random size between 2px and 6px
554
- const size = Math.random() * 4 + 2;
555
- aiDot.style.width = `${size}px`;
556
- aiDot.style.height = `${size}px`;
557
-
558
- // Random position
559
- aiDot.style.left = `${Math.random() * 100}%`;
560
- aiDot.style.top = `${Math.random() * 100}%`;
561
-
562
- // Random color based on AI type
563
- const aiType = Math.floor(Math.random() * 4);
564
- if (aiType === 0) aiDot.style.backgroundColor = '#3B82F6'; // Design (blue)
565
- else if (aiType === 1) aiDot.style.backgroundColor = '#8B5CF6'; // Code (purple)
566
- else if (aiType === 2) aiDot.style.backgroundColor = '#10B981'; // SEO (green)
567
- else aiDot.style.backgroundColor = '#06B6D4'; // Quantum (teal)
568
-
569
- // Pulsing animation
570
- aiDot.style.animation = `pulse ${Math.random() * 2 + 1}s infinite alternate`;
571
-
572
- container.appendChild(aiDot);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
573
  }
574
- }
575
-
576
- // Generate all 20,000 AI tools
577
- function generateAllTools() {
578
  const container = document.getElementById('tools-container');
579
- const categories = [
580
- { name: "Design", color: "bg-blue-600", icon: "fa-paint-brush" },
581
- { name: "Development", color: "bg-purple-600", icon: "fa-code" },
582
- { name: "SEO", color: "bg-green-600", icon: "fa-search" },
583
- { name: "Content", color: "bg-yellow-600", icon: "fa-pen" },
584
- { name: "Marketing", color: "bg-red-600", icon: "fa-bullhorn" },
585
- { name: "Analytics", color: "bg-indigo-600", icon: "fa-chart-line" },
586
- { name: "Security", color: "bg-gray-600", icon: "fa-shield-alt" },
587
- { name: "Quantum", color: "bg-teal-600", icon: "fa-atom" }
588
- ];
589
 
590
- // Generate 20,000 tools (2500 per category)
591
- for (let catIndex = 0; catIndex < categories.length; catIndex++) {
592
- const category = categories[catIndex];
593
-
594
- // Add category header
595
- const categoryHeader = document.createElement('div');
596
- categoryHeader.className = 'col-span-full tool-category py-4';
597
- categoryHeader.innerHTML = `
598
- <div class="flex items-center">
599
- <div class="w-8 h-8 ${category.color} rounded-full flex items-center justify-center mr-3">
600
- <i class="fas ${category.icon} text-white"></i>
601
  </div>
602
- <h3 class="text-xl font-bold">${category.name} TOOLS (2,500)</h3>
 
 
 
603
  </div>
604
  `;
605
- container.appendChild(categoryHeader);
606
 
607
- // Generate 2500 tools for this category
608
- for (let i = 0; i < 2500; i++) {
609
- const toolNumber = (catIndex * 2500) + i + 1;
610
- const toolCard = document.createElement('div');
611
- toolCard.className = 'tool-card bg-gray-800 rounded-lg p-4 hover:bg-gray-700 transition cursor-pointer';
612
- toolCard.innerHTML = `
613
- <div class="flex items-start mb-3">
614
- <div class="w-10 h-10 ${category.color} rounded-full flex items-center justify-center mr-3">
615
- <i class="fas ${category.icon} text-white"></i>
616
- </div>
617
- <div>
618
- <h4 class="font-semibold">${category.name} Tool ${toolNumber}</h4>
619
- <p class="text-xs text-gray-400">Quantum-powered ${category.name.toLowerCase()} solution</p>
620
- </div>
621
- </div>
622
- <div class="flex justify-between items-center text-xs">
623
- <span class="bg-gray-700 px-2 py-1 rounded">v${Math.floor(Math.random() * 10)}.${Math.floor(Math.random() * 10)}</span>
624
- <span class="text-gray-400">${Math.floor(Math.random() * 1000)}K users</span>
625
- </div>
626
- `;
627
- container.appendChild(toolCard);
628
- }
629
- }
630
  }
631
-
632
- // Generate a complex website with 1200+ lines of code
633
- function generateComplexSite(description, style, colorScheme) {
634
- // Generate HTML
635
- const htmlCode = `<!DOCTYPE html>
636
- <html lang="fr">
637
- <head>
638
- <meta charset="UTF-8">
639
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
640
- <title>${description.substring(0, 30)} | Quantum Generated Site</title>
641
- <meta name="description" content="${description}">
642
- <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
643
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
644
- <link rel="stylesheet" href="styles.css">
645
- </head>
646
- <body class="${colorScheme === 'Light Theme' ? 'bg-gray-100 text-gray-900' : 'bg-gray-900 text-gray-100'} min-h-screen">
647
- <!-- Quantum Navigation -->
648
- <nav class="${style === 'Futuristic' ? 'bg-gradient-to-r from-blue-900 to-purple-900' : 'bg-gray-800'} py-4 px-6 shadow-lg">
649
- <div class="container mx-auto flex justify-between items-center">
650
- <div class="flex items-center space-x-2">
651
- <i class="fas fa-atom text-2xl ${style === 'Futuristic' ? 'text-blue-400' : 'text-white'}"></i>
652
- <span class="text-xl font-bold">QUANTUM SITE</span>
653
- </div>
654
- <div class="hidden md:flex space-x-6">
655
- <a href="#" class="hover:text-blue-400 transition">Home</a>
656
- <a href="#" class="hover:text-blue-400 transition">Features</a>
657
- <a href="#" class="hover:text-blue-400 transition">About</a>
658
- <a href="#" class="hover:text-blue-400 transition">Contact</a>
659
- </div>
660
- <button class="md:hidden text-xl">
661
- <i class="fas fa-bars"></i>
662
- </button>
663
- </div>
664
- </nav>
665
 
666
- <!-- Hero Section -->
667
- <section class="py-20 ${style === 'Minimalist' ? 'bg-white text-gray-900' : style === 'Futuristic' ? 'bg-gradient-to-br from-gray-900 to-blue-900' : 'bg-gray-800'}">
668
- <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
669
- <div class="md:w-1/2 mb-10 md:mb-0">
670
- <h1 class="text-4xl md:text-6xl font-bold mb-6">${description.substring(0, 50)}</h1>
671
- <p class="text-xl mb-8">${description}</p>
672
- <div class="flex space-x-4">
673
- <button class="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-semibold transition">Get Started</button>
674
- <button class="px-6 py-3 border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white rounded-lg font-semibold transition">Learn More</button>
675
- </div>
676
- </div>
677
- <div class="md:w-1/2 flex justify-center">
678
- <div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full ${style === 'Futuristic' ? 'bg-gradient-to-r from-blue-500 to-purple-600' : 'bg-blue-600'} flex items-center justify-center">
679
- <i class="fas fa-atom text-6xl md:text-8xl text-white"></i>
680
- <div class="absolute inset-0 rounded-full border-4 border-blue-400 animate-ping opacity-20"></div>
681
- </div>
682
- </div>
683
- </div>
684
- </section>
685
-
686
- <!-- Features Section -->
687
- <section class="py-16 ${colorScheme === 'Light Theme' ? 'bg-gray-50' : 'bg-gray-800'}">
688
- <div class="container mx-auto px-4">
689
- <h2 class="text-3xl font-bold text-center mb-12">Advanced Features</h2>
690
 
691
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
692
- <!-- Feature 1 -->
693
- <div class="bg-white bg-opacity-5 p-6 rounded-xl shadow-lg hover:shadow-xl transition">
694
- <div class="w-16 h-16 ${style === 'Futuristic' ? 'bg-gradient-to-r from-blue-600 to-purple-600' : 'bg-blue-600'} rounded-full flex items-center justify-center mb-4">
695
- <i class="fas fa-bolt text-2xl text-white"></i>
696
  </div>
697
- <h3 class="text-xl font-semibold mb-3">Quantum Speed</h3>
698
- <p>Our technology leverages quantum computing principles to deliver unprecedented performance.</p>
699
- </div>
700
-
701
- <!-- Feature 2 -->
702
- <div class="bg-white bg-opacity-5 p-6 rounded-xl shadow-lg hover:shadow-xl transition">
703
- <div class="w-16 h-16 ${style === 'Futuristic' ? 'bg-gradient-to-r from-blue-600 to-purple-600' : 'bg-blue-600'} rounded-full flex items-center justify-center mb-4">
704
- <i class="fas fa-shield-alt text-2xl text-white"></i>
705
  </div>
706
- <h3 class="text-xl font-semibold mb-3">Advanced Security</h3>
707
- <p>Military-grade encryption and quantum-resistant algorithms protect your data.</p>
708
  </div>
709
 
710
- <!-- Feature 3 -->
711
- <div class="bg-white bg-opacity-5 p-6 rounded-xl shadow-lg hover:shadow-xl transition">
712
- <div class="w-16 h-16 ${style === 'Futuristic' ? 'bg-gradient-to-r from-blue-600 to-purple-600' : 'bg-blue-600'} rounded-full flex items-center justify-center mb-4">
713
- <i class="fas fa-infinity text-2xl text-white"></i>
714
  </div>
715
- <h3 class="text-xl font-semibold mb-3">Limitless Scaling</h3>
716
- <p>Our quantum architecture scales infinitely to meet your growing demands.</p>
717
- </div>
718
- </div>
719
- </div>
720
- </section>
721
-
722
- <!-- Stats Section -->
723
- <section class="py-16 ${style === 'Futuristic' ? 'bg-gradient-to-r from-blue-900 to-purple-900' : 'bg-gray-900'}">
724
- <div class="container mx-auto px-4">
725
- <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
726
- <div>
727
- <div class="text-4xl md:text-6xl font-bold mb-2">360K</div>
728
- <div class="text-sm uppercase tracking-wider">AI Cores</div>
729
- </div>
730
- <div>
731
- <div class="text-4xl md:text-6xl font-bold mb-2">20K</div>
732
- <div class="text-sm uppercase tracking-wider">Tools</div>
733
- </div>
734
- <div>
735
- <div class="text-4xl md:text-6xl font-bold mb-2">0.002s</div>
736
- <div class="text-sm uppercase tracking-wider">Response Time</div>
737
- </div>
738
- <div>
739
- <div class="text-4xl md:text-6xl font-bold mb-2">∞</div>
740
- <div class="text-sm uppercase tracking-wider">Possibilities</div>
741
- </div>
742
- </div>
743
- </div>
744
- </section>
745
-
746
- <!-- Testimonials -->
747
- <section class="py-16 ${colorScheme === 'Light Theme' ? 'bg-white' : 'bg-gray-800'}">
748
- <div class="container mx-auto px-4">
749
- <h2 class="text-3xl font-bold text-center mb-12">What Our Users Say</h2>
750
-
751
- <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
752
- <!-- Testimonial 1 -->
753
- <div class="bg-white bg-opacity-5 p-6 rounded-xl">
754
- <div class="flex items-center mb-4">
755
- <div class="w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold mr-4">JD</div>
756
- <div>
757
- <h4 class="font-semibold">John Doe</h4>
758
- <p class="text-sm text-gray-400">CEO, Quantum Tech</p>
759
- </div>
760
  </div>
761
- <p>"This technology has completely transformed our business. The speed and efficiency are unlike anything we've seen before."</p>
762
- </div>
763
-
764
- <!-- Testimonial 2 -->
765
- <div class="bg-white bg-opacity-5 p-6 rounded-xl">
766
- <div class="flex items-center mb-4">
767
- <div class="w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center text-white font-bold mr-4">JS</div>
768
- <div>
769
- <h4 class="font-semibold">Jane Smith</h4>
770
- <p class="text-sm text-gray-400">CTO, Future Labs</p>
771
- </div>
772
  </div>
773
- <p>"The AI capabilities are mind-blowing. We've reduced our development time by 90% while increasing quality."</p>
774
- </div>
775
- </div>
776
- </div>
777
- </section>
778
-
779
- <!-- CTA Section -->
780
- <section class="py-20 ${style === 'Futuristic' ? 'bg-gradient-to-br from-gray-900 to-blue-900' : 'bg-gray-900'}">
781
- <div class="container mx-auto px-4 text-center">
782
- <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Experience the Quantum Future?</h2>
783
- <p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of businesses leveraging our quantum-powered platform.</p>
784
- <button class="px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 rounded-lg font-semibold text-lg transition shadow-lg">
785
- Start Your Quantum Journey Today
786
- </button>
787
- </div>
788
- </section>
789
-
790
- <!-- Footer -->
791
- <footer class="py-8 ${style === 'Minimalist' ? 'bg-white text-gray-900' : 'bg-gray-900'} border-t border-gray-800">
792
- <div class="container mx-auto px-4">
793
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
794
- <div>
795
- <div class="flex items-center space-x-2 mb-4">
796
- <i class="fas fa-atom text-2xl text-blue-400"></i>
797
- <span class="text-xl font-bold">QUANTUM</span>
798
  </div>
799
- <p class="text-sm">The future of web technology, powered by 360,000 quantum AI cores.</p>
800
  </div>
801
 
802
- <div>
803
- <h4 class="font-semibold mb-4">Quick Links</h4>
804
- <ul class="space-y-2">
805
- <li><a href="#" class="hover:text-blue-400 transition">Home</a></li>
806
- <li><a href="#" class="hover:text-blue-400 transition">Features</a></li>
807
- <li><a href="#" class="hover:text-blue-400 transition">Pricing</a></li>
808
- <li><a href="#" class="hover:text-blue-400 transition">About</a></li>
809
- </ul>
810
- </div>
811
 
812
- <div>
813
- <h4 class="font-semibold mb-4">Resources</h4>
814
- <ul class="space-y-2">
815
- <li><a href="#" class="hover:text-blue-400 transition">Documentation</a></li>
816
- <li><a href="#" class="hover:text-blue-400 transition">API Reference</a></li>
817
- <li><a href="#" class="hover:text-blue-400 transition">Tutorials</a></li>
818
- <li><a href="#" class="hover:text-blue-400 transition">Blog</a></li>
819
- </ul>
820
- </div>
821
-
822
- <div>
823
- <h4 class="font-semibold mb-4">Connect</h4>
824
- <div class="flex space-x-4">
825
- <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-blue-600 rounded-full flex items-center justify-center transition">
826
- <i class="fab fa-twitter"></i>
827
- </a>
828
- <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-blue-600 rounded-full flex items-center justify-center transition">
829
- <i class="fab fa-linkedin"></i>
830
- </a>
831
- <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-blue-600 rounded-full flex items-center justify-center transition">
832
- <i class="fab fa-github"></i>
833
- </a>
834
- <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-blue-600 rounded-full flex items-center justify-center transition">
835
- <i class="fab fa-discord"></i>
836
- </a>
837
- </div>
838
  </div>
839
- </div>
840
 
841
- <div class="border-t border-gray-800 mt-8 pt-8 text-center text-sm">
842
- <p>&copy; ${new Date().getFullYear()} Quantum Site Builder 9000. All rights reserved.</p>
843
- </div>
844
- </div>
845
- </footer>
846
 
847
- <script src="script.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
848
  <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=docto41/quantum-control" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
849
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>QUANTUM CONTROL - All Tools</title>
7
  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
 
55
  transform: translateY(-5px);
56
  box-shadow: 0 10px 20px rgba(0, 228, 255, 0.3);
57
  }
58
+ .tool-category {
59
+ position: relative;
60
+ overflow: hidden;
61
+ }
62
+ .tool-category::after {
63
+ content: "";
64
+ position: absolute;
65
+ top: 0;
66
+ left: 0;
67
+ right: 0;
68
+ height: 1px;
69
+ background: linear-gradient(90deg, transparent, rgba(0, 228, 255, 0.5), transparent);
70
+ }
71
+ .tool-grid {
72
+ display: grid;
73
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
74
+ gap: 1.5rem;
75
  }
76
+ .tool-modal {
77
  display: none;
78
  position: fixed;
79
  top: 0;
 
84
  z-index: 1000;
85
  overflow-y: auto;
86
  }
87
+ .tool-modal-content {
88
  background: #111827;
89
  margin: 5% auto;
90
+ padding: 2rem;
91
  width: 90%;
92
+ max-width: 800px;
93
  border-radius: 10px;
94
  max-height: 80vh;
95
  overflow-y: auto;
96
  }
97
+ .close-tool-modal {
 
 
 
 
 
 
 
 
 
98
  color: #aaa;
99
  float: right;
100
  font-size: 28px;
101
  font-weight: bold;
102
  cursor: pointer;
103
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
104
  </style>
105
  </head>
106
  <body class="bg-black text-gray-100 min-h-screen overflow-x-hidden">
 
193
  </div>
194
  </div>
195
 
196
+ <!-- Main Tools Interface -->
197
  <div class="lg:col-span-3 bg-gray-900 rounded-xl p-6 border border-gray-800 relative overflow-hidden">
198
  <!-- Quantum Particles Background -->
199
  <div id="quantum-particles"></div>
200
 
201
  <div class="relative z-10">
202
  <div class="flex justify-between items-center mb-6">
203
+ <h2 class="text-2xl font-bold neon-text">QUANTUM CONTROL - ALL TOOLS</h2>
204
  <div class="flex space-x-3">
205
+ <div class="relative">
206
+ <input type="text" id="tool-search" placeholder="Search 20K tools..." class="quantum-field px-4 py-2 pr-8 rounded-lg text-sm w-64">
207
+ <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i>
208
+ </div>
209
+ <button class="quantum-field py-2 px-3 rounded-lg">
210
+ <i class="fas fa-sliders-h"></i>
211
  </button>
212
  </div>
213
  </div>
214
 
215
+ <!-- Tools Grid -->
216
+ <div id="tools-container" class="tool-grid">
217
+ <!-- Tools will be inserted here by JavaScript -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
218
  </div>
219
+
220
+ <div class="mt-6 flex justify-center">
221
+ <button id="load-more-tools" class="quantum-field px-6 py-2 rounded-lg">
222
+ <i class="fas fa-sync-alt mr-2"></i> LOAD MORE TOOLS
223
+ </button>
 
 
 
 
 
 
 
224
  </div>
 
 
 
225
  </div>
226
  </div>
 
 
 
 
 
 
 
 
 
 
227
  </div>
228
+ </div>
229
+
230
+ <!-- Tool Details Modal -->
231
+ <div id="tool-modal" class="tool-modal">
232
+ <div class="tool-modal-content">
233
+ <span class="close-tool-modal">&times;</span>
234
+ <div id="tool-modal-content">
235
+ <!-- Tool details will be inserted here -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
236
  </div>
237
  </div>
238
  </div>
 
243
  <div class="flex flex-col md:flex-row justify-between items-center">
244
  <div class="flex items-center space-x-4 mb-4 md:mb-0">
245
  <i class="fas fa-atom text-blue-400 text-2xl"></i>
246
+ <span class="text-xl font-bold">QUANTUM CONTROL</span>
247
  </div>
248
  <div class="flex space-x-6">
249
  <span class="text-xs text-gray-400">v12.8.9 QUANTUM EDITION</span>
 
255
  </div>
256
  </footer>
257
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
258
  <script>
259
  // Quantum Time Display
260
  function updateQuantumTime() {
 
315
  document.head.appendChild(style);
316
  }
317
 
318
+ // All Quantum Control Tools
319
+ const quantumTools = [
320
+ // Quantum Core Tools
321
+ {
322
+ name: "Quantum Core",
323
+ category: "Core",
324
+ icon: "fa-atom",
325
+ color: "bg-teal-600",
326
+ description: "Central quantum processing unit that powers all operations",
327
+ version: "v12.8.9",
328
+ users: "360K",
329
+ features: [
330
+ "Multi-dimensional processing",
331
+ "Quantum entanglement networking",
332
+ "Temporal computation",
333
+ "Parallel universe synchronization"
334
+ ]
335
+ },
336
+ {
337
+ name: "Neural Matrix",
338
+ category: "Core",
339
+ icon: "fa-brain",
340
+ color: "bg-blue-600",
341
+ description: "Advanced neural network with quantum learning capabilities",
342
+ version: "v8.4.2",
343
+ users: "250K",
344
+ features: [
345
+ "Self-evolving architecture",
346
+ "Instant knowledge assimilation",
347
+ "Predictive modeling",
348
+ "Consciousness simulation"
349
+ ]
350
+ },
351
 
352
+ // Design Tools
353
+ {
354
+ name: "Quantum Designer",
355
+ category: "Design",
356
+ icon: "fa-paint-brush",
357
+ color: "bg-purple-600",
358
+ description: "AI-powered design system with quantum aesthetics",
359
+ version: "v5.1.3",
360
+ users: "180K",
361
+ features: [
362
+ "Multi-dimensional UI creation",
363
+ "Quantum color theory",
364
+ "Temporal design patterns",
365
+ "Entangled component systems"
366
+ ]
367
+ },
368
+ {
369
+ name: "Holographic Renderer",
370
+ category: "Design",
371
+ icon: "fa-cube",
372
+ color: "bg-indigo-600",
373
+ description: "Real-time 3D/4D rendering with quantum light fields",
374
+ version: "v3.7.8",
375
+ users: "95K",
376
+ features: [
377
+ "Photorealistic holograms",
378
+ "Quantum particle effects",
379
+ "Neural style transfer",
380
+ "Temporal animation"
381
+ ]
382
+ },
383
+
384
+ // Development Tools
385
+ {
386
+ name: "Quantum Compiler",
387
+ category: "Development",
388
+ icon: "fa-code",
389
+ color: "bg-green-600",
390
+ description: "Next-generation compiler that understands quantum syntax",
391
+ version: "v9.2.1",
392
+ users: "210K",
393
+ features: [
394
+ "Multi-language quantum transpilation",
395
+ "Temporal code optimization",
396
+ "Parallel execution planning",
397
+ "Error-free quantum debugging"
398
+ ]
399
+ },
400
+ {
401
+ name: "Entangled IDE",
402
+ category: "Development",
403
+ icon: "fa-laptop-code",
404
+ color: "bg-yellow-600",
405
+ description: "Integrated development environment with quantum features",
406
+ version: "v7.5.4",
407
+ users: "175K",
408
+ features: [
409
+ "Multi-dimensional code editing",
410
+ "Quantum code prediction",
411
+ "Temporal version control",
412
+ "Entangled pair programming"
413
+ ]
414
+ },
415
+
416
+ // Data Tools
417
+ {
418
+ name: "Quantum Database",
419
+ category: "Data",
420
+ icon: "fa-database",
421
+ color: "bg-red-600",
422
+ description: "Multi-dimensional data storage with quantum indexing",
423
+ version: "v6.3.9",
424
+ users: "150K",
425
+ features: [
426
+ "Infinite scalability",
427
+ "Temporal data queries",
428
+ "Quantum encryption",
429
+ "Parallel universe sync"
430
+ ]
431
+ },
432
+ {
433
+ name: "Neural Analyzer",
434
+ category: "Data",
435
+ icon: "fa-chart-line",
436
+ color: "bg-pink-600",
437
+ description: "Advanced analytics with quantum pattern recognition",
438
+ version: "v4.2.7",
439
+ users: "120K",
440
+ features: [
441
+ "Multi-dimensional insights",
442
+ "Quantum probability modeling",
443
+ "Temporal forecasting",
444
+ "Entangled data visualization"
445
+ ]
446
+ },
447
+
448
+ // Security Tools
449
+ {
450
+ name: "Quantum Firewall",
451
+ category: "Security",
452
+ icon: "fa-shield-alt",
453
+ color: "bg-amber-600",
454
+ description: "Unbreakable security system using quantum principles",
455
+ version: "v8.1.5",
456
+ users: "200K",
457
+ features: [
458
+ "Quantum encryption",
459
+ "Temporal threat detection",
460
+ "Multi-dimensional access control",
461
+ "Entangled authentication"
462
+ ]
463
+ },
464
+ {
465
+ name: "Neural Guardian",
466
+ category: "Security",
467
+ icon: "fa-user-shield",
468
+ color: "bg-emerald-600",
469
+ description: "AI security agent with quantum learning capabilities",
470
+ version: "v5.7.2",
471
+ users: "160K",
472
+ features: [
473
+ "Adaptive threat response",
474
+ "Quantum behavior analysis",
475
+ "Temporal anomaly detection",
476
+ "Entangled security protocols"
477
+ ]
478
+ },
479
+
480
+ // AI Tools
481
+ {
482
+ name: "Quantum Mind",
483
+ category: "AI",
484
+ icon: "fa-robot",
485
+ color: "bg-cyan-600",
486
+ description: "Artificial general intelligence with quantum consciousness",
487
+ version: "v10.3.1",
488
+ users: "300K",
489
+ features: [
490
+ "Multi-dimensional reasoning",
491
+ "Quantum creativity",
492
+ "Temporal planning",
493
+ "Entangled knowledge"
494
+ ]
495
+ },
496
+ {
497
+ name: "Neural Creator",
498
+ category: "AI",
499
+ icon: "fa-network-wired",
500
+ color: "bg-violet-600",
501
+ description: "AI model generator with quantum architecture",
502
+ version: "v7.4.6",
503
+ users: "220K",
504
+ features: [
505
+ "Self-evolving models",
506
+ "Quantum learning algorithms",
507
+ "Temporal training",
508
+ "Entangled neural networks"
509
+ ]
510
+ },
511
+
512
+ // Communication Tools
513
+ {
514
+ name: "Quantum Link",
515
+ category: "Communication",
516
+ icon: "fa-satellite-dish",
517
+ color: "bg-fuchsia-600",
518
+ description: "Instant communication across space-time",
519
+ version: "v6.5.8",
520
+ users: "140K",
521
+ features: [
522
+ "Zero-latency messaging",
523
+ "Quantum entanglement networking",
524
+ "Temporal synchronization",
525
+ "Multi-dimensional channels"
526
+ ]
527
+ },
528
+ {
529
+ name: "Holographic Chat",
530
+ category: "Communication",
531
+ icon: "fa-comments",
532
+ color: "bg-rose-600",
533
+ description: "Fully immersive 3D/4D communication platform",
534
+ version: "v4.3.7",
535
+ users: "110K",
536
+ features: [
537
+ "Photorealistic avatars",
538
+ "Quantum presence simulation",
539
+ "Temporal message recall",
540
+ "Entangled group spaces"
541
+ ]
542
+ },
543
+
544
+ // Utility Tools
545
+ {
546
+ name: "Quantum Converter",
547
+ category: "Utility",
548
+ icon: "fa-exchange-alt",
549
+ color: "bg-lime-600",
550
+ description: "Universal data transformation with quantum precision",
551
+ version: "v5.9.2",
552
+ users: "130K",
553
+ features: [
554
+ "Multi-format processing",
555
+ "Quantum data reshaping",
556
+ "Temporal version conversion",
557
+ "Entangled format bridges"
558
+ ]
559
+ },
560
+ {
561
+ name: "Temporal Scheduler",
562
+ category: "Utility",
563
+ icon: "fa-clock",
564
+ color: "bg-orange-600",
565
+ description: "Multi-dimensional task management across time",
566
+ version: "v3.8.5",
567
+ users: "90K",
568
+ features: [
569
+ "Parallel timeline planning",
570
+ "Quantum priority calculation",
571
+ "Temporal reminders",
572
+ "Entangled task dependencies"
573
+ ]
574
  }
575
+ ];
576
+
577
+ // Generate tool cards
578
+ function generateToolCards(tools) {
579
  const container = document.getElementById('tools-container');
580
+ container.innerHTML = '';
 
 
 
 
 
 
 
 
 
581
 
582
+ tools.forEach(tool => {
583
+ const toolCard = document.createElement('div');
584
+ toolCard.className = 'tool-card bg-gray-800 rounded-lg p-4 hover:bg-gray-700 transition cursor-pointer';
585
+ toolCard.innerHTML = `
586
+ <div class="flex items-start mb-3">
587
+ <div class="w-10 h-10 ${tool.color} rounded-full flex items-center justify-center mr-3">
588
+ <i class="fas ${tool.icon} text-white"></i>
589
+ </div>
590
+ <div>
591
+ <h4 class="font-semibold">${tool.name}</h4>
592
+ <p class="text-xs text-gray-400">${tool.description}</p>
593
  </div>
594
+ </div>
595
+ <div class="flex justify-between items-center text-xs">
596
+ <span class="bg-gray-700 px-2 py-1 rounded">${tool.version}</span>
597
+ <span class="text-gray-400">${tool.users} users</span>
598
  </div>
599
  `;
 
600
 
601
+ toolCard.addEventListener('click', () => openToolModal(tool));
602
+ container.appendChild(toolCard);
603
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
604
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
605
 
606
+ // Open tool modal
607
+ function openToolModal(tool) {
608
+ const modal = document.getElementById('tool-modal');
609
+ const content = document.getElementById('tool-modal-content');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
610
 
611
+ content.innerHTML = `
612
+ <div class="flex items-start mb-6">
613
+ <div class="w-16 h-16 ${tool.color} rounded-full flex items-center justify-center mr-4">
614
+ <i class="fas ${tool.icon} text-2xl text-white"></i>
 
615
  </div>
616
+ <div>
617
+ <h2 class="text-2xl font-bold">${tool.name}</h2>
618
+ <p class="text-gray-400">${tool.description}</p>
 
 
 
 
 
619
  </div>
 
 
620
  </div>
621
 
622
+ <div class="grid grid-cols-2 gap-4 mb-6">
623
+ <div class="bg-gray-800 p-3 rounded-lg">
624
+ <div class="text-xs text-gray-400 mb-1">CATEGORY</div>
625
+ <div class="font-semibold">${tool.category}</div>
626
  </div>
627
+ <div class="bg-gray-800 p-3 rounded-lg">
628
+ <div class="text-xs text-gray-400 mb-1">VERSION</div>
629
+ <div class="font-semibold">${tool.version}</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
630
  </div>
631
+ <div class="bg-gray-800 p-3 rounded-lg">
632
+ <div class="text-xs text-gray-400 mb-1">ACTIVE USERS</div>
633
+ <div class="font-semibold">${tool.users}</div>
 
 
 
 
 
 
 
 
634
  </div>
635
+ <div class="bg-gray-800 p-3 rounded-lg">
636
+ <div class="text-xs text-gray-400 mb-1">STATUS</div>
637
+ <div class="font-semibold text-green-400">QUANTUM ACTIVE</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
638
  </div>
 
639
  </div>
640
 
641
+ <h3 class="text-lg font-semibold mb-3">KEY FEATURES</h3>
642
+ <ul class="space-y-2 mb-6">
643
+ ${tool.features.map(feature => `
644
+ <li class="flex items-start">
645
+ <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
646
+ <span>${feature}</span>
647
+ </li>
648
+ `).join('')}
649
+ </ul>
650
 
651
+ <div class="flex space-x-3">
652
+ <button class="quantum-field px-4 py-2 rounded-lg flex items-center">
653
+ <i class="fas fa-play mr-2"></i> LAUNCH TOOL
654
+ </button>
655
+ <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg flex items-center transition">
656
+ <i class="fas fa-book mr-2"></i> DOCUMENTATION
657
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
658
  </div>
659
+ `;
660
 
661
+ modal.style.display = "block";
662
+ }
 
 
 
663
 
664
+ // Close tool modal
665
+ document.querySelector('.close-tool-modal').addEventListener('click', function() {
666
+ document.getElementById('tool-modal').style.display = "none";
667
+ });
668
+
669
+ // Close modal when clicking outside
670
+ window.addEventListener('click', function(event) {
671
+ const modal = document.getElementById('tool-modal');
672
+ if (event.target == modal) {
673
+ modal.style.display = "none";
674
+ }
675
+ });
676
+
677
+ // Initialize
678
+ document.addEventListener('DOMContentLoaded', function() {
679
+ createParticles();
680
+ generateToolCards(quantumTools);
681
+
682
+ // Search functionality
683
+ document.getElementById('tool-search').addEventListener('input', function(e) {
684
+ const searchTerm = e.target.value.toLowerCase();
685
+ const filteredTools = quantumTools.filter(tool =>
686
+ tool.name.toLowerCase().includes(searchTerm) ||
687
+ tool.description.toLowerCase().includes(searchTerm) ||
688
+ tool.category.toLowerCase().includes(searchTerm)
689
+ );
690
+ generateToolCards(filteredTools);
691
+ });
692
+
693
+ // Load more tools (simulated)
694
+ document.getElementById('load-more-tools').addEventListener('click', function() {
695
+ // In a real implementation, this would load more tools from an API
696
+ alert('Loading additional quantum tools...');
697
+ });
698
+ });
699
+ </script>
700
  <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=docto41/quantum-control" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
701
  </html>
prompts.txt CHANGED
@@ -5,4 +5,5 @@ les bouton ne fonctionne pas reconfigue toute le site et faire une mise a jour
5
  accompagner d'une armées de 360000 INTELIGENCES ARTIFICIEL les plus puissant je veux creer la copie du site de DeepSite mais en 100000 fois plus rapide , plus performant , plus sofistiqué , plus robotisé , que par systeme de description uniquement avec visuel de la creeation du site , je veux 20000 fois plus d'outil que DeepSite avec toute les derniére technonogie
6
  AFFICHER TOUTES LES OUTILS . TOUTES LES BOUTON NE FOCTIONE PAS JE VEUT QUE GENERATEUR PAR DESGRIPTION.
7
  toutes les boutons des 20,000 AI TOOLS MATRIX : ne fonctionne pas , je veux un vrait generateur des sies epoustouflan et gros site yper puissant de plus de 1200 ligne de code , je veux quon montre le site creer de pas en bas
8
- afficher toutes les outils
 
 
5
  accompagner d'une armées de 360000 INTELIGENCES ARTIFICIEL les plus puissant je veux creer la copie du site de DeepSite mais en 100000 fois plus rapide , plus performant , plus sofistiqué , plus robotisé , que par systeme de description uniquement avec visuel de la creeation du site , je veux 20000 fois plus d'outil que DeepSite avec toute les derniére technonogie
6
  AFFICHER TOUTES LES OUTILS . TOUTES LES BOUTON NE FOCTIONE PAS JE VEUT QUE GENERATEUR PAR DESGRIPTION.
7
  toutes les boutons des 20,000 AI TOOLS MATRIX : ne fonctionne pas , je veux un vrait generateur des sies epoustouflan et gros site yper puissant de plus de 1200 ligne de code , je veux quon montre le site creer de pas en bas
8
+ afficher toutes les outils
9
+ https://huggingface.co/spaces/docto41/quantum-control