Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Quantum Nexus - Futuristic Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Roboto:wght@300;400;500&display=swap'); | |
| :root { | |
| --primary: #00f0ff; | |
| --secondary: #7b2dff; | |
| --dark: #0a0a1a; | |
| --light: #f0f0ff; | |
| } | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| background-color: var(--dark); | |
| color: var(--light); | |
| overflow-x: hidden; | |
| } | |
| .font-orbitron { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .glow-effect { | |
| box-shadow: 0 0 15px rgba(0, 240, 255, 0.5); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 240, 255, 0.3); | |
| } | |
| .neon-border { | |
| position: relative; | |
| } | |
| .neon-border::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: 0.5rem; | |
| padding: 2px; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| pointer-events: none; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .animate-pulse-slow { | |
| animation: pulse 3s infinite; | |
| } | |
| #particles-js { | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| top: 0; | |
| left: 0; | |
| } | |
| .terminal { | |
| background-color: rgba(10, 10, 26, 0.8); | |
| border: 1px solid rgba(0, 240, 255, 0.3); | |
| font-family: 'Courier New', monospace; | |
| height: 300px; | |
| overflow-y: auto; | |
| } | |
| .terminal-line { | |
| margin: 0; | |
| line-height: 1.5; | |
| white-space: pre-wrap; | |
| } | |
| .command { | |
| color: var(--primary); | |
| } | |
| .response { | |
| color: var(--light); | |
| } | |
| .error { | |
| color: #ff5555; | |
| } | |
| .success { | |
| color: #55ff55; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Particle.js Background --> | |
| <div id="particles-js"></div> | |
| <!-- Main Container --> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex flex-col md:flex-row justify-between items-center mb-12"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center mr-4 glow-effect"> | |
| <i class="fas fa-atom text-white text-xl"></i> | |
| </div> | |
| <h1 class="text-3xl md:text-4xl font-bold font-orbitron gradient-text">QUANTUM NEXUS</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative group"> | |
| <button class="px-4 py-2 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg font-orbitron text-sm flex items-center"> | |
| <i class="fas fa-user-astronaut mr-2"></i> | |
| <span>USER_ACCESS</span> | |
| </button> | |
| <div class="absolute right-0 mt-2 w-48 bg-gray-900 rounded-md shadow-lg z-10 hidden group-hover:block neon-border"> | |
| <div class="py-1"> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-800">Profile Settings</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-800">Notifications</a> | |
| <div class="border-t border-gray-700"></div> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-800 text-red-400">Logout</a> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition-colors"> | |
| <i class="fas fa-cog text-blue-400"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Dashboard Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"> | |
| <!-- Status Card --> | |
| <div class="bg-gray-900 rounded-xl p-6 neon-border card-hover"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h2 class="text-xl font-orbitron text-blue-400">SYSTEM STATUS</h2> | |
| <div class="w-3 h-3 rounded-full bg-green-500 animate-pulse-slow"></div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Quantum Processor</span> | |
| <span>78%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-500 to-purple-600 h-2 rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Neural Network</span> | |
| <span>92%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-500 to-purple-600 h-2 rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Data Storage</span> | |
| <span>64%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-500 to-purple-600 h-2 rounded-full" style="width: 64%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Analytics Card --> | |
| <div class="bg-gray-900 rounded-xl p-6 neon-border card-hover"> | |
| <h2 class="text-xl font-orbitron text-blue-400 mb-4">ANALYTICS DASHBOARD</h2> | |
| <div class="flex items-center justify-between mb-6"> | |
| <div> | |
| <p class="text-sm text-gray-400">Total Queries</p> | |
| <p class="text-2xl font-bold">12,847</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Success Rate</p> | |
| <p class="text-2xl font-bold text-green-400">98.7%</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Avg. Response</p> | |
| <p class="text-2xl font-bold">0.42s</p> | |
| </div> | |
| </div> | |
| <div class="h-32 bg-gray-800 rounded-lg flex items-center justify-center"> | |
| <p class="text-gray-500">[Graph Visualization]</p> | |
| </div> | |
| </div> | |
| <!-- Quick Actions Card --> | |
| <div class="bg-gray-900 rounded-xl p-6 neon-border card-hover"> | |
| <h2 class="text-xl font-orbitron text-blue-400 mb-4">QUICK ACTIONS</h2> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button class="bg-gray-800 hover:bg-gray-700 rounded-lg p-3 flex flex-col items-center transition-colors"> | |
| <i class="fas fa-bolt text-yellow-400 text-xl mb-2"></i> | |
| <span class="text-xs">Optimize</span> | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 rounded-lg p-3 flex flex-col items-center transition-colors"> | |
| <i class="fas fa-shield-alt text-green-400 text-xl mb-2"></i> | |
| <span class="text-xs">Secure</span> | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 rounded-lg p-3 flex flex-col items-center transition-colors"> | |
| <i class="fas fa-chart-line text-purple-400 text-xl mb-2"></i> | |
| <span class="text-xs">Analyze</span> | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 rounded-lg p-3 flex flex-col items-center transition-colors"> | |
| <i class="fas fa-database text-blue-400 text-xl mb-2"></i> | |
| <span class="text-xs">Backup</span> | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 rounded-lg p-3 flex flex-col items-center transition-colors"> | |
| <i class="fas fa-robot text-pink-400 text-xl mb-2"></i> | |
| <span class="text-xs">Train AI</span> | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 rounded-lg p-3 flex flex-col items-center transition-colors"> | |
| <i class="fas fa-cog text-gray-400 text-xl mb-2"></i> | |
| <span class="text-xs">Settings</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Terminal Section --> | |
| <div class="bg-gray-900 rounded-xl overflow-hidden neon-border mb-8"> | |
| <div class="bg-gray-800 px-4 py-2 flex items-center"> | |
| <div class="flex space-x-2 mr-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <h3 class="font-orbitron text-sm">QUANTUM_TERMINAL</h3> | |
| </div> | |
| <div class="terminal p-4" id="terminal"> | |
| <p class="terminal-line"><span class="command">user@quantum-nexus:~$</span> <span class="response">Welcome to Quantum Nexus Terminal v6.0</span></p> | |
| <p class="terminal-line"><span class="command">user@quantum-nexus:~$</span> <span class="response">Initializing quantum subsystems...</span></p> | |
| <p class="terminal-line"><span class="success">✓ Quantum processors online</span></p> | |
| <p class="terminal-line"><span class="success">✓ Neural network synchronized</span></p> | |
| <p class="terminal-line"><span class="success">✓ Data streams established</span></p> | |
| <p class="terminal-line"><span class="command">user@quantum-nexus:~$</span> _</p> | |
| </div> | |
| </div> | |
| <!-- Data Visualization Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> | |
| <!-- Quantum Processing --> | |
| <div class="bg-gray-900 rounded-xl p-6 neon-border card-hover"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-orbitron text-blue-400">QUANTUM PROCESSING</h2> | |
| <div class="flex space-x-2"> | |
| <button class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition-colors"> | |
| <i class="fas fa-play text-green-400 text-xs"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition-colors"> | |
| <i class="fas fa-pause text-yellow-400 text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="h-64 bg-gray-800 rounded-lg flex items-center justify-center relative"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-32 h-32 rounded-full border-4 border-blue-500 border-opacity-30 absolute"></div> | |
| <div class="w-24 h-24 rounded-full border-4 border-purple-500 border-opacity-30 absolute animate-spin" style="animation-duration: 8s;"></div> | |
| <div class="w-16 h-16 rounded-full border-4 border-blue-400 border-opacity-50 absolute animate-spin" style="animation-duration: 5s;"></div> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 absolute animate-pulse"></div> | |
| </div> | |
| <div class="relative z-10 text-center"> | |
| <p class="text-3xl font-bold font-orbitron gradient-text">87 QUBITS</p> | |
| <p class="text-sm text-gray-400">ACTIVE PROCESSING</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Neural Network Activity --> | |
| <div class="bg-gray-900 rounded-xl p-6 neon-border card-hover"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-orbitron text-blue-400">NEURAL NETWORK</h2> | |
| <div class="flex items-center"> | |
| <span class="text-xs text-gray-400 mr-2">TRAINING</span> | |
| <div class="w-3 h-3 rounded-full bg-green-500 animate-pulse-slow"></div> | |
| </div> | |
| </div> | |
| <div class="h-64 bg-gray-800 rounded-lg flex items-center justify-center relative overflow-hidden"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <!-- Neural network visualization --> | |
| <div class="grid grid-cols-5 gap-4"> | |
| <div class="flex flex-col items-center space-y-4"> | |
| <div class="w-4 h-4 rounded-full bg-blue-400 animate-pulse" style="animation-delay: 0.1s;"></div> | |
| <div class="w-4 h-4 rounded-full bg-blue-400 animate-pulse" style="animation-delay: 0.3s;"></div> | |
| <div class="w-4 h-4 rounded-full bg-blue-400 animate-pulse" style="animation-delay: 0.5s;"></div> | |
| </div> | |
| <div class="flex flex-col items-center space-y-4"> | |
| <div class="w-4 h-4 rounded-full bg-purple-400 animate-pulse" style="animation-delay: 0.2s;"></div> | |
| <div class="w-4 h-4 rounded-full bg-purple-400 animate-pulse" style="animation-delay: 0.4s;"></div> | |
| <div class="w-4 h-4 rounded-full bg-purple-400 animate-pulse" style="animation-delay: 0.6s;"></div> | |
| </div> | |
| <div class="flex flex-col items-center space-y-4"> | |
| <div class="w-4 h-4 rounded-full bg-pink-400 animate-pulse" style="animation-delay: 0.15s;"></div> | |
| <div class="w-4 h-4 rounded-full bg-pink-400 animate-pulse" style="animation-delay: 0.35s;"></div> | |
| <div class="w-4 h-4 rounded-full bg-pink-400 animate-pulse" style="animation-delay: 0.55s;"></div> | |
| </div> | |
| <div class="flex flex-col items-center space-y-4"> | |
| <div class="w-4 h-4 rounded-full bg-green-400 animate-pulse" style="animation-delay: 0.25s;"></div> | |
| <div class="w-4 h-4 rounded-full bg-green-400 animate-pulse" style="animation-delay: 0.45s;"></div> | |
| <div class="w-4 h-4 rounded-full bg-green-400 animate-pulse" style="animation-delay: 0.65s;"></div> | |
| </div> | |
| <div class="flex flex-col items-center space-y-4"> | |
| <div class="w-4 h-4 rounded-full bg-yellow-400 animate-pulse" style="animation-delay: 0.05s;"></div> | |
| <div class="w-4 h-4 rounded-full bg-yellow-400 animate-pulse" style="animation-delay: 0.3s;"></div> | |
| <div class="w-4 h-4 rounded-full bg-yellow-400 animate-pulse" style="animation-delay: 0.55s;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-4 left-0 right-0 text-center"> | |
| <p class="text-sm font-orbitron">TRAINING EPOCH: <span class="text-blue-400">142/500</span></p> | |
| <div class="w-full bg-gray-700 rounded-full h-1.5 mt-2 mx-auto" style="max-width: 80%;"> | |
| <div class="bg-gradient-to-r from-blue-500 to-purple-600 h-1.5 rounded-full" style="width: 28.4%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="bg-gray-900 rounded-xl p-6 neon-border mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-orbitron text-blue-400">RECENT ACTIVITY</h2> | |
| <button class="text-xs text-gray-400 hover:text-blue-400 transition-colors">VIEW ALL</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-blue-900 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-database text-blue-400 text-xs"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium">Data synchronization completed</p> | |
| <p class="text-xs text-gray-400">Quantum database updated with 12,847 new entries</p> | |
| </div> | |
| <span class="text-xs text-gray-500">2 min ago</span> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-purple-900 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-robot text-purple-400 text-xs"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium">Neural network training</p> | |
| <p class="text-xs text-gray-400">Epoch 142 completed with 98.7% accuracy</p> | |
| </div> | |
| <span class="text-xs text-gray-500">15 min ago</span> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-green-900 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-shield-alt text-green-400 text-xs"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium">Security audit passed</p> | |
| <p class="text-xs text-gray-400">All quantum encryption layers verified</p> | |
| </div> | |
| <span class="text-xs text-gray-500">1 hour ago</span> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-900 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-bolt text-yellow-400 text-xs"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium">Performance optimized</p> | |
| <p class="text-xs text-gray-400">Quantum processing speed increased by 12%</p> | |
| </div> | |
| <span class="text-xs text-gray-500">3 hours ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="text-center py-6 text-gray-500 text-sm"> | |
| <p>QUANTUM NEXUS v6.0 | © 2023 Quantum Computing Technologies</p> | |
| <p class="mt-1">All quantum operations are monitored and secured</p> | |
| </footer> | |
| </div> | |
| <!-- Scripts --> | |
| <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> | |
| <script> | |
| // Initialize particles.js | |
| document.addEventListener('DOMContentLoaded', function() { | |
| particlesJS('particles-js', { | |
| "particles": { | |
| "number": { | |
| "value": 80, | |
| "density": { | |
| "enable": true, | |
| "value_area": 800 | |
| } | |
| }, | |
| "color": { | |
| "value": "#00f0ff" | |
| }, | |
| "shape": { | |
| "type": "circle", | |
| "stroke": { | |
| "width": 0, | |
| "color": "#000000" | |
| }, | |
| "polygon": { | |
| "nb_sides": 5 | |
| } | |
| }, | |
| "opacity": { | |
| "value": 0.3, | |
| "random": false, | |
| "anim": { | |
| "enable": false, | |
| "speed": 1, | |
| "opacity_min": 0.1, | |
| "sync": false | |
| } | |
| }, | |
| "size": { | |
| "value": 3, | |
| "random": true, | |
| "anim": { | |
| "enable": false, | |
| "speed": 40, | |
| "size_min": 0.1, | |
| "sync": false | |
| } | |
| }, | |
| "line_linked": { | |
| "enable": true, | |
| "distance": 150, | |
| "color": "#7b2dff", | |
| "opacity": 0.2, | |
| "width": 1 | |
| }, | |
| "move": { | |
| "enable": true, | |
| "speed": 2, | |
| "direction": "none", | |
| "random": false, | |
| "straight": false, | |
| "out_mode": "out", | |
| "bounce": false, | |
| "attract": { | |
| "enable": false, | |
| "rotateX": 600, | |
| "rotateY": 1200 | |
| } | |
| } | |
| }, | |
| "interactivity": { | |
| "detect_on": "canvas", | |
| "events": { | |
| "onhover": { | |
| "enable": true, | |
| "mode": "grab" | |
| }, | |
| "onclick": { | |
| "enable": true, | |
| "mode": "push" | |
| }, | |
| "resize": true | |
| }, | |
| "modes": { | |
| "grab": { | |
| "distance": 140, | |
| "line_linked": { | |
| "opacity": 1 | |
| } | |
| }, | |
| "bubble": { | |
| "distance": 400, | |
| "size": 40, | |
| "duration": 2, | |
| "opacity": 8, | |
| "speed": 3 | |
| }, | |
| "repulse": { | |
| "distance": 200, | |
| "duration": 0.4 | |
| }, | |
| "push": { | |
| "particles_nb": 4 | |
| }, | |
| "remove": { | |
| "particles_nb": 2 | |
| } | |
| } | |
| }, | |
| "retina_detect": true | |
| }); | |
| // Terminal simulation | |
| const terminal = document.getElementById('terminal'); | |
| const commands = [ | |
| "analyze --quantum --depth=5", | |
| "optimize --neural --precision=ultra", | |
| "secure --encryption=quantum", | |
| "train --epochs=500 --dataset=quantum-ai-v3" | |
| ]; | |
| const responses = [ | |
| "Analysis complete. Quantum probability matrix generated.", | |
| "Optimization successful. Neural throughput increased by 18.7%", | |
| "Security layers updated. Quantum encryption active.", | |
| "Training initiated. Estimated completion in 2.4 hours." | |
| ]; | |
| let lineCount = 0; | |
| function addTerminalLine() { | |
| if (lineCount < commands.length) { | |
| const line = document.createElement('p'); | |
| line.className = 'terminal-line'; | |
| line.innerHTML = `<span class="command">user@quantum-nexus:~$</span> ${commands[lineCount]}`; | |
| terminal.appendChild(line); | |
| terminal.scrollTop = terminal.scrollHeight; | |
| setTimeout(() => { | |
| const responseLine = document.createElement('p'); | |
| responseLine.className = 'terminal-line'; | |
| responseLine.innerHTML = `<span class="response">${responses[lineCount]}</span>`; | |
| terminal.appendChild(responseLine); | |
| const promptLine = document.createElement('p'); | |
| promptLine.className = 'terminal-line'; | |
| promptLine.innerHTML = `<span class="command">user@quantum-nexus:~$</span> _`; | |
| terminal.appendChild(promptLine); | |
| terminal.scrollTop = terminal.scrollHeight; | |
| lineCount++; | |
| if (lineCount < commands.length) { | |
| setTimeout(addTerminalLine, 1500); | |
| } | |
| }, 800); | |
| } | |
| } | |
| // Start terminal simulation after initial delay | |
| setTimeout(addTerminalLine, 2000); | |
| // Animate quantum processing circles | |
| const circles = document.querySelectorAll('.animate-spin'); | |
| circles.forEach(circle => { | |
| circle.style.transform = `rotate(${Math.random() * 360}deg)`; | |
| }); | |
| }); | |
| </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=jsonet/quantum-nexus-2-0" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |