Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>QUANTUM CONTROL - All Tools</title> | |
| <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .quantum-field { | |
| background: linear-gradient(90deg, #000428, #004e92); | |
| border: 1px solid rgba(0, 228, 255, 0.3); | |
| box-shadow: 0 0 15px rgba(0, 228, 255, 0.5); | |
| } | |
| .ai-core { | |
| background: radial-gradient(circle, #0f2027, #203a43, #2c5364); | |
| } | |
| .quantum-glow { | |
| box-shadow: 0 0 25px rgba(0, 228, 255, 0.7); | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 10px #00f7ff, 0 0 20px #00f7ff; | |
| } | |
| .holographic { | |
| background: linear-gradient(135deg, rgba(0,255,255,0.1), rgba(138,43,226,0.1)); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(138, 43, 226, 0.3); | |
| } | |
| .quantum-loader { | |
| border: 3px solid rgba(0, 228, 255, 0.3); | |
| border-top: 3px solid #00e4ff; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .particle { | |
| position: absolute; | |
| background-color: #00e4ff; | |
| border-radius: 50%; | |
| pointer-events: none; | |
| } | |
| .quantum-orb { | |
| animation: pulse 3s infinite alternate; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(0, 228, 255, 0.7); } | |
| 100% { box-shadow: 0 0 0 15px rgba(0, 228, 255, 0); } | |
| } | |
| .tool-card { | |
| transition: all 0.3s ease; | |
| } | |
| .tool-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 228, 255, 0.3); | |
| } | |
| .tool-category { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .tool-category::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(0, 228, 255, 0.5), transparent); | |
| } | |
| .tool-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .tool-modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.9); | |
| z-index: 1000; | |
| overflow-y: auto; | |
| } | |
| .tool-modal-content { | |
| background: #111827; | |
| margin: 5% auto; | |
| padding: 2rem; | |
| width: 90%; | |
| max-width: 800px; | |
| border-radius: 10px; | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| } | |
| .close-tool-modal { | |
| color: #aaa; | |
| float: right; | |
| font-size: 28px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-gray-100 min-h-screen overflow-x-hidden"> | |
| <!-- AI Army Status Bar --> | |
| <div class="bg-gray-900 py-2 px-4 flex justify-between items-center border-b border-gray-800"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <span class="text-sm">360K IA ACTIVES</span> | |
| </div> | |
| <div class="text-xs bg-blue-900 px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-brain mr-1"></i> QUANTUM NEURAL NETWORK | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="text-xs"> | |
| <span id="quantum-time" class="font-mono"></span> | |
| </div> | |
| <div class="text-xs bg-purple-900 px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-atom mr-1"></i> 20000x DEEPSITE | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Quantum Interface --> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Quantum Core --> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-8"> | |
| <!-- AI Command Center --> | |
| <div class="lg:col-span-1 ai-core rounded-xl p-6 border border-gray-800 quantum-glow"> | |
| <h2 class="text-xl font-bold mb-6 neon-text">QUANTUM CONTROL</h2> | |
| <div class="space-y-4"> | |
| <div class="p-4 bg-gray-900 rounded-lg"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm">AI POWER</span> | |
| <span class="text-xs bg-green-900 px-2 py-1 rounded">MAX</span> | |
| </div> | |
| <div class="h-2 bg-gray-800 rounded-full overflow-hidden"> | |
| <div class="h-full bg-gradient-to-r from-green-400 to-blue-500" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-gray-900 rounded-lg"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm">PROCESSING SPEED</span> | |
| <span class="text-xs bg-blue-900 px-2 py-1 rounded">100000x</span> | |
| </div> | |
| <div class="h-2 bg-gray-800 rounded-full overflow-hidden"> | |
| <div class="h-full bg-gradient-to-r from-blue-400 to-purple-500" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3 mt-6"> | |
| <button class="quantum-field py-2 px-3 rounded-lg text-sm flex items-center justify-center"> | |
| <i class="fas fa-bolt mr-2"></i> BOOST | |
| </button> | |
| <button class="quantum-field py-2 px-3 rounded-lg text-sm flex items-center justify-center"> | |
| <i class="fas fa-robot mr-2"></i> AUTO | |
| </button> | |
| <button class="quantum-field py-2 px-3 rounded-lg text-sm flex items-center justify-center"> | |
| <i class="fas fa-layer-group mr-2"></i> STACK | |
| </button> | |
| <button class="quantum-field py-2 px-3 rounded-lg text-sm flex items-center justify-center"> | |
| <i class="fas fa-infinity mr-2"></i> LOOP | |
| </button> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-sm font-semibold mb-2">AI ARMY STATUS</h3> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between text-xs"> | |
| <span>Design Bots</span> | |
| <span>72,000 <span class="text-green-400">ACTIVE</span></span> | |
| </div> | |
| <div class="flex justify-between text-xs"> | |
| <span>Code Bots</span> | |
| <span>108,000 <span class="text-green-400">ACTIVE</span></span> | |
| </div> | |
| <div class="flex justify-between text-xs"> | |
| <span>SEO Bots</span> | |
| <span>36,000 <span class="text-green-400">ACTIVE</span></span> | |
| </div> | |
| <div class="flex justify-between text-xs"> | |
| <span>Quantum Bots</span> | |
| <span>144,000 <span class="text-purple-400">HYPER</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Tools Interface --> | |
| <div class="lg:col-span-3 bg-gray-900 rounded-xl p-6 border border-gray-800 relative overflow-hidden"> | |
| <!-- Quantum Particles Background --> | |
| <div id="quantum-particles"></div> | |
| <div class="relative z-10"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold neon-text">QUANTUM CONTROL - ALL TOOLS</h2> | |
| <div class="flex space-x-3"> | |
| <div class="relative"> | |
| <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"> | |
| <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| <button class="quantum-field py-2 px-3 rounded-lg"> | |
| <i class="fas fa-sliders-h"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Tools Grid --> | |
| <div id="tools-container" class="tool-grid"> | |
| <!-- Tools will be inserted here by JavaScript --> | |
| </div> | |
| <div class="mt-6 flex justify-center"> | |
| <button id="load-more-tools" class="quantum-field px-6 py-2 rounded-lg"> | |
| <i class="fas fa-sync-alt mr-2"></i> LOAD MORE TOOLS | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tool Details Modal --> | |
| <div id="tool-modal" class="tool-modal"> | |
| <div class="tool-modal-content"> | |
| <span class="close-tool-modal">×</span> | |
| <div id="tool-modal-content"> | |
| <!-- Tool details will be inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quantum Footer --> | |
| <footer class="bg-gray-900 border-t border-gray-800 py-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-4 mb-4 md:mb-0"> | |
| <i class="fas fa-atom text-blue-400 text-2xl"></i> | |
| <span class="text-xl font-bold">QUANTUM CONTROL</span> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <span class="text-xs text-gray-400">v12.8.9 QUANTUM EDITION</span> | |
| <span class="text-xs text-gray-400">360,000 AI CORES ACTIVE</span> | |
| <span class="text-xs text-gray-400">20,000 TOOLS ONLINE</span> | |
| <span class="text-xs text-gray-400">100,000x DEEPSITE</span> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Quantum Time Display | |
| function updateQuantumTime() { | |
| const now = new Date(); | |
| const timeString = now.toISOString().replace('T', ' ').replace(/\.\d+Z/, '') + ' QUANTUM'; | |
| document.getElementById('quantum-time').textContent = timeString; | |
| } | |
| setInterval(updateQuantumTime, 1000); | |
| updateQuantumTime(); | |
| // Create quantum particles | |
| function createParticles() { | |
| const container = document.getElementById('quantum-particles'); | |
| const particleCount = 50; | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'particle'; | |
| // Random size between 1px and 3px | |
| const size = Math.random() * 2 + 1; | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| // Random position | |
| particle.style.left = `${Math.random() * 100}%`; | |
| particle.style.top = `${Math.random() * 100}%`; | |
| // Random animation | |
| particle.style.animation = `move${Math.floor(Math.random() * 4) + 1} ${Math.random() * 20 + 10}s linear infinite`; | |
| // Random opacity | |
| particle.style.opacity = Math.random() * 0.5 + 0.1; | |
| container.appendChild(particle); | |
| } | |
| // Add animation styles | |
| const style = document.createElement('style'); | |
| style.innerHTML = ` | |
| @keyframes move1 { | |
| 0% { transform: translate(0, 0); } | |
| 100% { transform: translate(${Math.random() * 200 - 100}px, ${Math.random() * 200 - 100}px); } | |
| } | |
| @keyframes move2 { | |
| 0% { transform: translate(0, 0); } | |
| 100% { transform: translate(${Math.random() * 200 - 100}px, ${Math.random() * 200 - 100}px); } | |
| } | |
| @keyframes move3 { | |
| 0% { transform: translate(0, 0); } | |
| 100% { transform: translate(${Math.random() * 200 - 100}px, ${Math.random() * 200 - 100}px); } | |
| } | |
| @keyframes move4 { | |
| 0% { transform: translate(0, 0); } | |
| 100% { transform: translate(${Math.random() * 200 - 100}px, ${Math.random() * 200 - 100}px); } | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| } | |
| // All Quantum Control Tools | |
| const quantumTools = [ | |
| // Quantum Core Tools | |
| { | |
| name: "Quantum Core", | |
| category: "Core", | |
| icon: "fa-atom", | |
| color: "bg-teal-600", | |
| description: "Central quantum processing unit that powers all operations", | |
| version: "v12.8.9", | |
| users: "360K", | |
| features: [ | |
| "Multi-dimensional processing", | |
| "Quantum entanglement networking", | |
| "Temporal computation", | |
| "Parallel universe synchronization" | |
| ] | |
| }, | |
| { | |
| name: "Neural Matrix", | |
| category: "Core", | |
| icon: "fa-brain", | |
| color: "bg-blue-600", | |
| description: "Advanced neural network with quantum learning capabilities", | |
| version: "v8.4.2", | |
| users: "250K", | |
| features: [ | |
| "Self-evolving architecture", | |
| "Instant knowledge assimilation", | |
| "Predictive modeling", | |
| "Consciousness simulation" | |
| ] | |
| }, | |
| // Design Tools | |
| { | |
| name: "Quantum Designer", | |
| category: "Design", | |
| icon: "fa-paint-brush", | |
| color: "bg-purple-600", | |
| description: "AI-powered design system with quantum aesthetics", | |
| version: "v5.1.3", | |
| users: "180K", | |
| features: [ | |
| "Multi-dimensional UI creation", | |
| "Quantum color theory", | |
| "Temporal design patterns", | |
| "Entangled component systems" | |
| ] | |
| }, | |
| { | |
| name: "Holographic Renderer", | |
| category: "Design", | |
| icon: "fa-cube", | |
| color: "bg-indigo-600", | |
| description: "Real-time 3D/4D rendering with quantum light fields", | |
| version: "v3.7.8", | |
| users: "95K", | |
| features: [ | |
| "Photorealistic holograms", | |
| "Quantum particle effects", | |
| "Neural style transfer", | |
| "Temporal animation" | |
| ] | |
| }, | |
| // Development Tools | |
| { | |
| name: "Quantum Compiler", | |
| category: "Development", | |
| icon: "fa-code", | |
| color: "bg-green-600", | |
| description: "Next-generation compiler that understands quantum syntax", | |
| version: "v9.2.1", | |
| users: "210K", | |
| features: [ | |
| "Multi-language quantum transpilation", | |
| "Temporal code optimization", | |
| "Parallel execution planning", | |
| "Error-free quantum debugging" | |
| ] | |
| }, | |
| { | |
| name: "Entangled IDE", | |
| category: "Development", | |
| icon: "fa-laptop-code", | |
| color: "bg-yellow-600", | |
| description: "Integrated development environment with quantum features", | |
| version: "v7.5.4", | |
| users: "175K", | |
| features: [ | |
| "Multi-dimensional code editing", | |
| "Quantum code prediction", | |
| "Temporal version control", | |
| "Entangled pair programming" | |
| ] | |
| }, | |
| // Data Tools | |
| { | |
| name: "Quantum Database", | |
| category: "Data", | |
| icon: "fa-database", | |
| color: "bg-red-600", | |
| description: "Multi-dimensional data storage with quantum indexing", | |
| version: "v6.3.9", | |
| users: "150K", | |
| features: [ | |
| "Infinite scalability", | |
| "Temporal data queries", | |
| "Quantum encryption", | |
| "Parallel universe sync" | |
| ] | |
| }, | |
| { | |
| name: "Neural Analyzer", | |
| category: "Data", | |
| icon: "fa-chart-line", | |
| color: "bg-pink-600", | |
| description: "Advanced analytics with quantum pattern recognition", | |
| version: "v4.2.7", | |
| users: "120K", | |
| features: [ | |
| "Multi-dimensional insights", | |
| "Quantum probability modeling", | |
| "Temporal forecasting", | |
| "Entangled data visualization" | |
| ] | |
| }, | |
| // Security Tools | |
| { | |
| name: "Quantum Firewall", | |
| category: "Security", | |
| icon: "fa-shield-alt", | |
| color: "bg-amber-600", | |
| description: "Unbreakable security system using quantum principles", | |
| version: "v8.1.5", | |
| users: "200K", | |
| features: [ | |
| "Quantum encryption", | |
| "Temporal threat detection", | |
| "Multi-dimensional access control", | |
| "Entangled authentication" | |
| ] | |
| }, | |
| { | |
| name: "Neural Guardian", | |
| category: "Security", | |
| icon: "fa-user-shield", | |
| color: "bg-emerald-600", | |
| description: "AI security agent with quantum learning capabilities", | |
| version: "v5.7.2", | |
| users: "160K", | |
| features: [ | |
| "Adaptive threat response", | |
| "Quantum behavior analysis", | |
| "Temporal anomaly detection", | |
| "Entangled security protocols" | |
| ] | |
| }, | |
| // AI Tools | |
| { | |
| name: "Quantum Mind", | |
| category: "AI", | |
| icon: "fa-robot", | |
| color: "bg-cyan-600", | |
| description: "Artificial general intelligence with quantum consciousness", | |
| version: "v10.3.1", | |
| users: "300K", | |
| features: [ | |
| "Multi-dimensional reasoning", | |
| "Quantum creativity", | |
| "Temporal planning", | |
| "Entangled knowledge" | |
| ] | |
| }, | |
| { | |
| name: "Neural Creator", | |
| category: "AI", | |
| icon: "fa-network-wired", | |
| color: "bg-violet-600", | |
| description: "AI model generator with quantum architecture", | |
| version: "v7.4.6", | |
| users: "220K", | |
| features: [ | |
| "Self-evolving models", | |
| "Quantum learning algorithms", | |
| "Temporal training", | |
| "Entangled neural networks" | |
| ] | |
| }, | |
| // Communication Tools | |
| { | |
| name: "Quantum Link", | |
| category: "Communication", | |
| icon: "fa-satellite-dish", | |
| color: "bg-fuchsia-600", | |
| description: "Instant communication across space-time", | |
| version: "v6.5.8", | |
| users: "140K", | |
| features: [ | |
| "Zero-latency messaging", | |
| "Quantum entanglement networking", | |
| "Temporal synchronization", | |
| "Multi-dimensional channels" | |
| ] | |
| }, | |
| { | |
| name: "Holographic Chat", | |
| category: "Communication", | |
| icon: "fa-comments", | |
| color: "bg-rose-600", | |
| description: "Fully immersive 3D/4D communication platform", | |
| version: "v4.3.7", | |
| users: "110K", | |
| features: [ | |
| "Photorealistic avatars", | |
| "Quantum presence simulation", | |
| "Temporal message recall", | |
| "Entangled group spaces" | |
| ] | |
| }, | |
| // Utility Tools | |
| { | |
| name: "Quantum Converter", | |
| category: "Utility", | |
| icon: "fa-exchange-alt", | |
| color: "bg-lime-600", | |
| description: "Universal data transformation with quantum precision", | |
| version: "v5.9.2", | |
| users: "130K", | |
| features: [ | |
| "Multi-format processing", | |
| "Quantum data reshaping", | |
| "Temporal version conversion", | |
| "Entangled format bridges" | |
| ] | |
| }, | |
| { | |
| name: "Temporal Scheduler", | |
| category: "Utility", | |
| icon: "fa-clock", | |
| color: "bg-orange-600", | |
| description: "Multi-dimensional task management across time", | |
| version: "v3.8.5", | |
| users: "90K", | |
| features: [ | |
| "Parallel timeline planning", | |
| "Quantum priority calculation", | |
| "Temporal reminders", | |
| "Entangled task dependencies" | |
| ] | |
| } | |
| ]; | |
| // Generate tool cards | |
| function generateToolCards(tools) { | |
| const container = document.getElementById('tools-container'); | |
| container.innerHTML = ''; | |
| tools.forEach(tool => { | |
| const toolCard = document.createElement('div'); | |
| toolCard.className = 'tool-card bg-gray-800 rounded-lg p-4 hover:bg-gray-700 transition cursor-pointer'; | |
| toolCard.innerHTML = ` | |
| <div class="flex items-start mb-3"> | |
| <div class="w-10 h-10 ${tool.color} rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas ${tool.icon} text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">${tool.name}</h4> | |
| <p class="text-xs text-gray-400">${tool.description}</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span class="bg-gray-700 px-2 py-1 rounded">${tool.version}</span> | |
| <span class="text-gray-400">${tool.users} users</span> | |
| </div> | |
| `; | |
| toolCard.addEventListener('click', () => openToolModal(tool)); | |
| container.appendChild(toolCard); | |
| }); | |
| } | |
| // Open tool modal | |
| function openToolModal(tool) { | |
| const modal = document.getElementById('tool-modal'); | |
| const content = document.getElementById('tool-modal-content'); | |
| content.innerHTML = ` | |
| <div class="flex items-start mb-6"> | |
| <div class="w-16 h-16 ${tool.color} rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas ${tool.icon} text-2xl text-white"></i> | |
| </div> | |
| <div> | |
| <h2 class="text-2xl font-bold">${tool.name}</h2> | |
| <p class="text-gray-400">${tool.description}</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div class="bg-gray-800 p-3 rounded-lg"> | |
| <div class="text-xs text-gray-400 mb-1">CATEGORY</div> | |
| <div class="font-semibold">${tool.category}</div> | |
| </div> | |
| <div class="bg-gray-800 p-3 rounded-lg"> | |
| <div class="text-xs text-gray-400 mb-1">VERSION</div> | |
| <div class="font-semibold">${tool.version}</div> | |
| </div> | |
| <div class="bg-gray-800 p-3 rounded-lg"> | |
| <div class="text-xs text-gray-400 mb-1">ACTIVE USERS</div> | |
| <div class="font-semibold">${tool.users}</div> | |
| </div> | |
| <div class="bg-gray-800 p-3 rounded-lg"> | |
| <div class="text-xs text-gray-400 mb-1">STATUS</div> | |
| <div class="font-semibold text-green-400">QUANTUM ACTIVE</div> | |
| </div> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-3">KEY FEATURES</h3> | |
| <ul class="space-y-2 mb-6"> | |
| ${tool.features.map(feature => ` | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>${feature}</span> | |
| </li> | |
| `).join('')} | |
| </ul> | |
| <div class="flex space-x-3"> | |
| <button class="quantum-field px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-play mr-2"></i> LAUNCH TOOL | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg flex items-center transition"> | |
| <i class="fas fa-book mr-2"></i> DOCUMENTATION | |
| </button> | |
| </div> | |
| `; | |
| modal.style.display = "block"; | |
| } | |
| // Close tool modal | |
| document.querySelector('.close-tool-modal').addEventListener('click', function() { | |
| document.getElementById('tool-modal').style.display = "none"; | |
| }); | |
| // Close modal when clicking outside | |
| window.addEventListener('click', function(event) { | |
| const modal = document.getElementById('tool-modal'); | |
| if (event.target == modal) { | |
| modal.style.display = "none"; | |
| } | |
| }); | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', function() { | |
| createParticles(); | |
| generateToolCards(quantumTools); | |
| // Search functionality | |
| document.getElementById('tool-search').addEventListener('input', function(e) { | |
| const searchTerm = e.target.value.toLowerCase(); | |
| const filteredTools = quantumTools.filter(tool => | |
| tool.name.toLowerCase().includes(searchTerm) || | |
| tool.description.toLowerCase().includes(searchTerm) || | |
| tool.category.toLowerCase().includes(searchTerm) | |
| ); | |
| generateToolCards(filteredTools); | |
| }); | |
| // Load more tools (simulated) | |
| document.getElementById('load-more-tools').addEventListener('click', function() { | |
| // In a real implementation, this would load more tools from an API | |
| alert('Loading additional quantum tools...'); | |
| }); | |
| }); | |
| </script> | |
| <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> | |
| </html> |