Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>QUANTUM MAINFRAME | BujuRocks Neural Interface</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/effects/AnaglyphEffect.js"></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;700;900&family=Rajdhani:wght@300;500;700&family=Share+Tech+Mono&display=swap'); | |
| :root { | |
| --neon-cyan: #0ff; | |
| --neon-pink: #f0f; | |
| --matrix-green: #00ff41; | |
| --hologram-blue: #00f7ff; | |
| --mainframe-purple: #6a00ff; | |
| } | |
| body { | |
| margin: 0; | |
| overflow: hidden; | |
| font-family: 'Share Tech Mono', monospace; | |
| background: #000; | |
| color: var(--hologram-blue); | |
| cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="none" stroke="%2300f7ff" stroke-width="1"/><circle cx="8" cy="8" r="1" fill="%2300f7ff"/></svg>'), auto; | |
| } | |
| #canvas-container { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1; | |
| } | |
| .content-overlay { | |
| position: relative; | |
| z-index: 2; | |
| pointer-events: none; | |
| } | |
| .clickable { | |
| pointer-events: auto; | |
| cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="none" stroke="%23f0f" stroke-width="1"/><circle cx="8" cy="8" r="1" fill="%23f0f"/></svg>'), auto; | |
| } | |
| .quantum-text { | |
| text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan); | |
| animation: pulse 1.5s infinite alternate; | |
| letter-spacing: 2px; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.7; text-shadow: 0 0 10px var(--neon-cyan); } | |
| 100% { opacity: 1; text-shadow: 0 0 20px var(--neon-cyan), 0 0 30px var(--neon-pink); } | |
| } | |
| .holographic-border { | |
| border: 1px solid rgba(0, 247, 255, 0.3); | |
| background: rgba(0, 10, 20, 0.3); | |
| box-shadow: 0 0 15px rgba(0, 247, 255, 0.5), | |
| inset 0 0 15px rgba(0, 247, 255, 0.3); | |
| backdrop-filter: blur(5px); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .holographic-border::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient( | |
| 45deg, | |
| transparent 45%, | |
| rgba(0, 247, 255, 0.1) 50%, | |
| transparent 55% | |
| ); | |
| animation: shine 3s infinite linear; | |
| transform: rotate(30deg); | |
| } | |
| @keyframes shine { | |
| 0% { transform: translateX(-100%) rotate(30deg); } | |
| 100% { transform: translateX(100%) rotate(30deg); } | |
| } | |
| .anaglyph { | |
| color: red; | |
| text-shadow: 3px 0 cyan; | |
| } | |
| .hidden-3d { | |
| display: none; | |
| } | |
| .three-d-goggles .hidden-3d { | |
| display: block; | |
| } | |
| .three-d-goggles .hidden-flat { | |
| display: none; | |
| } | |
| .floating-nav { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| z-index: 100; | |
| } | |
| .video-link { | |
| background: radial-gradient(circle, rgba(0,255,255,0.3), rgba(106,0,255,0.5)); | |
| border-radius: 50%; | |
| width: 80px; | |
| height: 80px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| animation: float 3s ease-in-out infinite, pulse-glow 2s infinite alternate; | |
| box-shadow: 0 0 20px var(--neon-cyan); | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| @keyframes pulse-glow { | |
| 0% { box-shadow: 0 0 20px var(--neon-cyan); } | |
| 100% { box-shadow: 0 0 30px var(--neon-pink); } | |
| } | |
| .video-icon { | |
| font-size: 2rem; | |
| color: white; | |
| } | |
| .matrix-fall { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 0; | |
| opacity: 0.1; | |
| pointer-events: none; | |
| } | |
| .cyberpunk-input { | |
| background: rgba(0, 10, 20, 0.5); | |
| border: 1px solid var(--neon-cyan); | |
| color: var(--hologram-blue); | |
| padding: 10px 15px; | |
| font-family: 'Share Tech Mono', monospace; | |
| outline: none; | |
| transition: all 0.3s; | |
| } | |
| .cyberpunk-input:focus { | |
| box-shadow: 0 0 15px var(--neon-cyan); | |
| border-color: var(--neon-pink); | |
| } | |
| .cyberpunk-btn { | |
| background: linear-gradient(135deg, rgba(0,255,255,0.2), rgba(106,0,255,0.4)); | |
| border: 1px solid var(--neon-cyan); | |
| color: white; | |
| padding: 10px 25px; | |
| font-family: 'Share Tech Mono', monospace; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| transition: all 0.3s; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cyberpunk-btn:hover { | |
| background: linear-gradient(135deg, rgba(0,255,255,0.4), rgba(106,0,255,0.6)); | |
| box-shadow: 0 0 20px var(--neon-cyan); | |
| transform: translateY(-2px); | |
| } | |
| .cyberpunk-btn::after { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient( | |
| to bottom, | |
| rgba(255,255,255,0) 0%, | |
| rgba(255,255,255,0.1) 50%, | |
| rgba(255,255,255,0) 100% | |
| ); | |
| transform: rotate(30deg); | |
| animation: shine 3s infinite; | |
| } | |
| .terminal-text { | |
| font-family: 'Share Tech Mono', monospace; | |
| color: var(--matrix-green); | |
| text-shadow: 0 0 5px var(--matrix-green); | |
| line-height: 1.4; | |
| } | |
| .scanline { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient( | |
| to bottom, | |
| rgba(0, 247, 255, 0.03) 0%, | |
| rgba(0, 247, 255, 0.08) 50%, | |
| rgba(0, 247, 255, 0.03) 100% | |
| ); | |
| background-size: 100% 4px; | |
| pointer-events: none; | |
| z-index: 10; | |
| animation: scanline 8s linear infinite; | |
| } | |
| @keyframes scanline { | |
| 0% { background-position: 0 0; } | |
| 100% { background-position: 0 100%; } | |
| } | |
| .hologram-grid { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| linear-gradient(rgba(0, 247, 255, 0.05) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 247, 255, 0.05) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| .circuit-pattern { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| radial-gradient(circle at 10% 20%, rgba(106, 0, 255, 0.03) 0%, transparent 2%), | |
| radial-gradient(circle at 90% 80%, rgba(0, 247, 255, 0.03) 0%, transparent 2%), | |
| radial-gradient(circle at 30% 50%, rgba(255, 0, 255, 0.03) 0%, transparent 3%), | |
| radial-gradient(circle at 70% 30%, rgba(0, 255, 255, 0.03) 0%, transparent 3%); | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| .glitch-effect { | |
| position: relative; | |
| } | |
| .glitch-effect::before, .glitch-effect::after { | |
| content: attr(data-text); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0.8; | |
| } | |
| .glitch-effect::before { | |
| color: #0f0; | |
| z-index: -1; | |
| animation: glitch 3s infinite; | |
| } | |
| .glitch-effect::after { | |
| color: #f0f; | |
| z-index: -2; | |
| animation: glitch 2s infinite reverse; | |
| } | |
| @keyframes glitch { | |
| 0% { transform: translate(0); } | |
| 20% { transform: translate(-3px, 3px); } | |
| 40% { transform: translate(-3px, -3px); } | |
| 60% { transform: translate(3px, 3px); } | |
| 80% { transform: translate(3px, -3px); } | |
| 100% { transform: translate(0); } | |
| } | |
| .binary-rain { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 0; | |
| opacity: 0.05; | |
| pointer-events: none; | |
| background-image: | |
| linear-gradient(transparent 95%, rgba(0, 255, 255, 0.1) 100%); | |
| background-size: 2px 20px; | |
| animation: binaryRain 0.5s linear infinite; | |
| } | |
| @keyframes binaryRain { | |
| 0% { background-position: 0 0; } | |
| 100% { background-position: 0 20px; } | |
| } | |
| .neon-underline { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .neon-underline::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: var(--neon-cyan); | |
| box-shadow: 0 0 10px var(--neon-cyan); | |
| transform: scaleX(0); | |
| transform-origin: left; | |
| transition: transform 0.3s ease; | |
| } | |
| .neon-underline:hover::after { | |
| transform: scaleX(1); | |
| } | |
| .status-indicator { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 8px; | |
| box-shadow: 0 0 5px currentColor; | |
| } | |
| .status-active { | |
| background-color: var(--matrix-green); | |
| animation: pulse 1.5s infinite; | |
| } | |
| .status-warning { | |
| background-color: #ff0; | |
| animation: pulse 1s infinite; | |
| } | |
| .status-critical { | |
| background-color: #f00; | |
| animation: pulse 0.5s infinite; | |
| } | |
| .hexagon { | |
| clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); | |
| } | |
| .dashboard-panel { | |
| background: rgba(0, 5, 15, 0.7); | |
| border: 1px solid rgba(0, 247, 255, 0.2); | |
| box-shadow: 0 0 30px rgba(0, 247, 255, 0.1); | |
| position: relative; | |
| } | |
| .dashboard-panel::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent); | |
| animation: panelGlow 3s infinite; | |
| } | |
| @keyframes panelGlow { | |
| 0% { opacity: 0.3; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.3; } | |
| } | |
| .data-stream { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .data-stream::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(to bottom, transparent 90%, rgba(0, 247, 255, 0.1) 100%); | |
| animation: streamFlow 10s linear infinite; | |
| } | |
| @keyframes streamFlow { | |
| 0% { transform: translateY(-100%); } | |
| 100% { transform: translateY(100%); } | |
| } | |
| </style> | |
| </head> | |
| <body class="three-d-goggles"> | |
| <div id="canvas-container"></div> | |
| <div class="hologram-grid"></div> | |
| <div class="circuit-pattern"></div> | |
| <div class="binary-rain"></div> | |
| <div class="scanline"></div> | |
| <div class="content-overlay min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="py-6 px-8 flex justify-between items-center border-b border-gray-800"> | |
| <div class="text-4xl font-bold font-orbitron quantum-text glitch-effect" data-text="QUANTUM MAINFRAME"> | |
| <span class="hidden-3d">QUANTUM MAINFRAME</span> | |
| <span class="hidden-flat">NEURAL INTERFACE</span> | |
| <span class="text-purple-400">v12.7.5</span> | |
| </div> | |
| <div class="flex space-x-4 items-center"> | |
| <div class="flex items-center mr-4"> | |
| <span class="status-indicator status-active"></span> | |
| <span class="text-xs uppercase tracking-widest">ONLINE</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-xs mr-2">POWER:</span> | |
| <div class="flex space-x-1"> | |
| <div class="w-2 h-4 bg-green-500 animate-pulse"></div> | |
| <div class="w-2 h-4 bg-green-500 animate-pulse delay-75"></div> | |
| <div class="w-2 h-4 bg-green-500 animate-pulse delay-100"></div> | |
| <div class="w-2 h-4 bg-green-500 animate-pulse delay-150"></div> | |
| <div class="w-2 h-4 bg-green-500 animate-pulse delay-200"></div> | |
| </div> | |
| </div> | |
| <button class="px-6 py-2 cyberpunk-btn clickable"> | |
| <span class="hidden-3d">ENGAGE</span> | |
| <span class="hidden-flat">ACCESS</span> | |
| </button> | |
| <button id="toggle3d" class="px-4 py-2 cyberpunk-btn clickable"> | |
| <i class="fas fa-vr-cardboard mr-2"></i>3D MODE | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow container mx-auto px-8 py-8 grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Panel - Quantum Terminal --> | |
| <div class="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Quantum Core Display --> | |
| <div class="dashboard-panel holographic-border p-6 col-span-2"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-orbitron text-cyan-400"> | |
| <i class="fas fa-atom mr-2"></i>QUANTUM CORE STATUS | |
| </h2> | |
| <div class="text-xs font-mono text-green-400"> | |
| <span class="blink">█</span> REAL-TIME MONITORING ACTIVE | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="holographic-border p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm uppercase tracking-wider">Qubits Entangled</span> | |
| <span class="font-mono text-green-400">12,847</span> | |
| </div> | |
| <div class="w-full bg-gray-900 rounded-full h-1.5"> | |
| <div class="bg-gradient-to-r from-cyan-500 to-purple-500 h-1.5 rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| <div class="holographic-border p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm uppercase tracking-wider">Decoherence</span> | |
| <span class="font-mono text-yellow-400">3.2%</span> | |
| </div> | |
| <div class="w-full bg-gray-900 rounded-full h-1.5"> | |
| <div class="bg-gradient-to-r from-yellow-500 to-red-500 h-1.5 rounded-full" style="width: 3.2%"></div> | |
| </div> | |
| </div> | |
| <div class="holographic-border p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm uppercase tracking-wider">Temporal Sync</span> | |
| <span class="font-mono text-purple-400">99.8%</span> | |
| </div> | |
| <div class="w-full bg-gray-900 rounded-full h-1.5"> | |
| <div class="bg-gradient-to-r from-purple-500 to-pink-500 h-1.5 rounded-full" style="width: 99.8%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="holographic-border p-4 mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-mono text-cyan-300"> | |
| <i class="fas fa-project-diagram mr-2"></i>NEURAL NETWORK ACTIVITY | |
| </h3> | |
| <div class="text-xs"> | |
| <span class="text-green-400">▲</span> 12.7% <span class="text-gray-500">from last cycle</span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <div class="flex-1"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>Input Layer</span> | |
| <span>87%</span> | |
| </div> | |
| <div class="w-full bg-gray-900 rounded-full h-1.5"> | |
| <div class="bg-cyan-500 h-1.5 rounded-full" style="width: 87%"></div> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>Hidden Layers</span> | |
| <span>94%</span> | |
| </div> | |
| <div class="w-full bg-gray-900 rounded-full h-1.5"> | |
| <div class="bg-purple-500 h-1.5 rounded-full" style="width: 94%"></div> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>Output</span> | |
| <span>76%</span> | |
| </div> | |
| <div class="w-full bg-gray-900 rounded-full h-1.5"> | |
| <div class="bg-pink-500 h-1.5 rounded-full" style="width: 76%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <a href="https://youtu.be/1ZZtqDB9Fno?si=f1UxhefUOwUzHRDY" target="_blank" class="clickable"> | |
| <div class="holographic-border p-4 hover:bg-cyan-900 transition-all h-full"> | |
| <div class="flex items-center"> | |
| <div class="hexagon bg-gradient-to-br from-cyan-500 to-purple-600 w-12 h-12 flex items-center justify-center mr-3"> | |
| <i class="fas fa-play text-white"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-1 text-white">QUANTUM DEMO</h3> | |
| <p class="text-xs text-cyan-300">Hyperspace traversal protocol</p> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="https://youtube.com/@bujurocks?si=4TGnSQjtNI990ST7" target="_blank" class="clickable"> | |
| <div class="holographic-border p-4 hover:bg-purple-900 transition-all h-full"> | |
| <div class="flex items-center"> | |
| <div class="hexagon bg-gradient-to-br from-purple-500 to-pink-600 w-12 h-12 flex items-center justify-center mr-3"> | |
| <i class="fas fa-music text-white"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-1 text-white">BUJUROCKS</h3> | |
| <p class="text-xs text-purple-300">Music parallelization matrix</p> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Data Stream Console --> | |
| <div class="dashboard-panel holographic-border p-4 data-stream"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-mono text-green-400"> | |
| <i class="fas fa-terminal mr-2"></i>SYSTEM STREAM | |
| </h3> | |
| <div class="text-xs text-gray-500"> | |
| <span class="blink">█</span> LIVE FEED | |
| </div> | |
| </div> | |
| <div class="terminal-text text-xs h-40 overflow-y-auto font-mono"> | |
| <p>> Initializing quantum core... <span class="text-green-400">DONE</span></p> | |
| <p>> Establishing neural network connections... <span class="text-green-400">COMPLETE</span></p> | |
| <p>> Calibrating hyperspace coordinates... <span class="text-yellow-400">WARNING: 0.3% DEVIATION</span></p> | |
| <p>> Loading music synthesis modules... <span class="text-green-400">LOADED</span></p> | |
| <p>> Quantum entanglement stable at 99.7%</p> | |
| <p>> Temporal synchronization within acceptable parameters</p> | |
| <p>> Neural activity spike detected in sector 7</p> | |
| <p>> Processing 1.2 petabyte data stream...</p> | |
| <p>> Analyzing 12.7 million quantum states</p> | |
| <p>> Music tensor flow optimized at 64x compression</p> | |
| <p>> Warning: Minor decoherence detected in qubit cluster 42</p> | |
| <p>> Compensating with auxiliary quantum gates</p> | |
| <p>> System nominal - all parameters within thresholds</p> | |
| <p>> Ready for hyperspace traversal protocol</p> | |
| </div> | |
| </div> | |
| <!-- Quantum Visualization --> | |
| <div class="dashboard-panel holographic-border p-4 flex flex-col"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-mono text-purple-400"> | |
| <i class="fas fa-chart-line mr-2"></i>VISUALIZATION MATRIX | |
| </h3> | |
| <div class="text-xs text-gray-500"> | |
| <span class="blink">█</span> RENDERING | |
| </div> | |
| </div> | |
| <div class="flex-1 bg-black bg-opacity-70 rounded flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="text-5xl mb-2 text-cyan-400 animate-pulse"> | |
| <i class="fas fa-atom"></i> | |
| </div> | |
| <div class="text-xs uppercase tracking-widest text-gray-400"> | |
| QUANTUM STATE VISUALIZER | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Panel - Control Center --> | |
| <div class="space-y-6"> | |
| <!-- User Access Terminal --> | |
| <div class="dashboard-panel holographic-border p-6"> | |
| <h2 class="text-2xl font-orbitron text-pink-400 mb-6"> | |
| <i class="fas fa-user-astronaut mr-2"></i>NEURAL INTERFACE | |
| </h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm uppercase tracking-wider mb-1">Access ID</label> | |
| <input type="text" class="w-full cyberpunk-input" placeholder="Enter quantum signature"> | |
| </div> | |
| <div> | |
| <label class="block text-sm uppercase tracking-wider mb-1">Neural Key</label> | |
| <input type="password" class="w-full cyberpunk-input" placeholder="Biometric encryption"> | |
| </div> | |
| <div class="pt-2"> | |
| <button class="w-full cyberpunk-btn py-3"> | |
| <i class="fas fa-fingerprint mr-2"></i>AUTHENTICATE | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-4 border-t border-gray-800"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm uppercase tracking-wider">Security Level</span> | |
| <span class="font-mono text-yellow-400">QUANTUM ENCRYPTED</span> | |
| </div> | |
| <div class="w-full bg-gray-900 rounded-full h-1.5"> | |
| <div class="bg-gradient-to-r from-green-500 to-blue-500 h-1.5 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quantum Controls --> | |
| <div class="dashboard-panel holographic-border p-6"> | |
| <h2 class="text-2xl font-orbitron text-purple-400 mb-6"> | |
| <i class="fas fa-sliders-h mr-2"></i>CONTROL MATRIX | |
| </h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm uppercase tracking-wider mb-2">Hyperspace Compression</label> | |
| <input type="range" min="0" max="100" value="87" class="w-full h-1.5 bg-gray-900 rounded-full appearance-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-cyan-500"> | |
| <div class="flex justify-between text-xs mt-1"> | |
| <span>0%</span> | |
| <span class="font-mono">87%</span> | |
| <span>100%</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm uppercase tracking-wider mb-2">Music Tensor Flow</label> | |
| <input type="range" min="1" max="128" value="64" class="w-full h-1.5 bg-gray-900 rounded-full appearance-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-pink-500"> | |
| <div class="flex justify-between text-xs mt-1"> | |
| <span>1x</span> | |
| <span class="font-mono">64x</span> | |
| <span>128x</span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3 pt-2"> | |
| <button class="cyberpunk-btn"> | |
| <i class="fas fa-play mr-2"></i>ENGAGE | |
| </button> | |
| <button class="cyberpunk-btn bg-opacity-20 bg-red-900 border-red-500 hover:bg-red-800"> | |
| <i class="fas fa-stop mr-2"></i>ABORT | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video Demo Panel --> | |
| <div class="dashboard-panel holographic-border p-6"> | |
| <h2 class="text-2xl font-orbitron text-cyan-400 mb-4"> | |
| <i class="fas fa-video mr-2"></i>DEMONSTRATION PROTOCOL | |
| </h2> | |
| <p class="text-sm mb-4 text-gray-400"> | |
| Experience quantum reality compression through our latest hyperspace traversal protocol | |
| </p> | |
| <a href="https://youtu.be/1ZZtqDB9Fno?si=f1UxhefUOwUzHRDY" target="_blank" class="clickable block"> | |
| <div class="holographic-border hover:bg-cyan-900 transition-all p-4 flex items-center"> | |
| <div class="bg-black bg-opacity-70 w-16 h-16 flex items-center justify-center mr-4"> | |
| <div class="text-2xl text-white"> | |
| <i class="fas fa-play"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="font-bold text-white">Quantum Reality v12.7</div> | |
| <div class="text-xs text-cyan-300">Click to initiate playback sequence</div> | |
| </div> | |
| </div> | |
| </a> | |
| <div class="mt-4 flex justify-between text-xs"> | |
| <div class="flex items-center"> | |
| <span class="status-indicator status-active mr-1"></span> | |
| <span>STREAM READY</span> | |
| </div> | |
| <div> | |
| <span class="text-gray-500">LATENCY:</span> <span class="font-mono text-green-400">17ms</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Floating Navigation --> | |
| <div class="floating-nav clickable"> | |
| <a href="https://youtu.be/1ZZtqDB9Fno?si=f1UxhefUOwUzHRDY" target="_blank" class="video-link"> | |
| <div class="video-icon"><i class="fas fa-play"></i></div> | |
| </a> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="py-4 px-8 text-center text-xs border-t border-gray-800"> | |
| <p class="uppercase tracking-widest">QUANTUM MAINFRAME INTERFACE v12.7.5 | BUJUROCKS NEURAL SYNTHESIS ENGINE</p> | |
| <p class="mt-1 text-gray-600">WARNING: Unauthorized access may cause quantum decoherence and temporal anomalies</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize Three.js scene | |
| let scene, camera, renderer, effect, particles; | |
| function init() { | |
| // Scene | |
| scene = new THREE.Scene(); | |
| // Camera | |
| camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| camera.position.z = 30; | |
| // Renderer | |
| renderer = new THREE.WebGLRenderer({ | |
| antialias: true, | |
| alpha: true | |
| }); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| document.getElementById('canvas-container').appendChild(renderer.domElement); | |
| // Anaglyph effect for 3D | |
| effect = new THREE.AnaglyphEffect(renderer); | |
| effect.setSize(window.innerWidth, window.innerHeight); | |
| // Create quantum energy field | |
| createQuantumField(); | |
| // Controls | |
| const controls = new THREE.OrbitControls(camera, renderer.domElement); | |
| controls.enableZoom = false; | |
| controls.enablePan = false; | |
| // Handle window resize | |
| window.addEventListener('resize', onWindowResize, false); | |
| // Toggle 3D button | |
| document.getElementById('toggle3d').addEventListener('click', toggle3D); | |
| // Simulate terminal typing | |
| simulateTerminal(); | |
| // Start animation loop | |
| animate(); | |
| } | |
| function createQuantumField() { | |
| // Create central quantum core | |
| const geometry = new THREE.IcosahedronGeometry(10, 3); | |
| const material = new THREE.MeshPhongMaterial({ | |
| color: 0x00ffff, | |
| emissive: 0x0066ff, | |
| specular: 0x00ffff, | |
| shininess: 100, | |
| wireframe: true, | |
| transparent: true, | |
| opacity: 0.7 | |
| }); | |
| const core = new THREE.Mesh(geometry, material); | |
| scene.add(core); | |
| // Add pulsing energy spheres | |
| const sphereGeometry = new THREE.SphereGeometry(3, 32, 32); | |
| const sphereMaterial = new THREE.MeshBasicMaterial({ | |
| color: 0x00ffff, | |
| wireframe: true, | |
| transparent: true, | |
| opacity: 0.5 | |
| }); | |
| const spheres = []; | |
| for (let i = 0; i < 8; i++) { | |
| const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); | |
| sphere.position.x = (Math.random() - 0.5) * 40; | |
| sphere.position.y = (Math.random() - 0.5) * 40; | |
| sphere.position.z = (Math.random() - 0.5) * 40; | |
| spheres.push(sphere); | |
| scene.add(sphere); | |
| } | |
| // Create particle system | |
| const particleCount = 5000; | |
| const particlesGeometry = new THREE.BufferGeometry(); | |
| const posArray = new Float32Array(particleCount * 3); | |
| for (let i = 0; i < particleCount * 3; i++) { | |
| posArray[i] = (Math.random() - 0.5) * 100; | |
| } | |
| particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3)); | |
| const particlesMaterial = new THREE.PointsMaterial({ | |
| size: 0.1, | |
| color: 0x00ffff, | |
| transparent: true, | |
| opacity: 0.8, | |
| blending: THREE.AdditiveBlending | |
| }); | |
| particles = new THREE.Points(particlesGeometry, particlesMaterial); | |
| scene.add(particles); | |
| // Add directional lighting | |
| const light = new THREE.DirectionalLight(0x00ffff, 1); | |
| light.position.set(1, 1, 1); | |
| scene.add(light); | |
| const backLight = new THREE.DirectionalLight(0xff00ff, 0.5); | |
| backLight.position.set(-1, -1, -1); | |
| scene.add(backLight); | |
| // Add ambient light | |
| const ambient = new THREE.AmbientLight(0x404040); | |
| scene.add(ambient); | |
| } | |
| function simulateTerminal() { | |
| const terminal = document.querySelector('.terminal-text'); | |
| const lines = terminal.innerHTML.split('<br>'); | |
| terminal.innerHTML = ''; | |
| let currentLine = 0; | |
| let currentChar = 0; | |
| let typingInterval = setInterval(() => { | |
| if (currentLine < lines.length) { | |
| if (currentChar <= lines[currentLine].length) { | |
| terminal.innerHTML = lines.slice(0, currentLine).join('<br>') + '<br>' + lines[currentLine].substring(0, currentChar) + '<span class="blink">█</span>'; | |
| currentChar++; | |
| } else { | |
| currentLine++; | |
| currentChar = 0; | |
| if (currentLine < lines.length) { | |
| terminal.innerHTML = lines.slice(0, currentLine).join('<br>') + '<br><span class="blink">█</span>'; | |
| } else { | |
| terminal.innerHTML = lines.join('<br>'); | |
| clearInterval(typingInterval); | |
| } | |
| } | |
| } | |
| }, 20); | |
| } | |
| function onWindowResize() { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| effect.setSize(window.innerWidth, window.innerHeight); | |
| } | |
| function toggle3D() { | |
| document.body.classList.toggle('three-d-goggles'); | |
| } | |
| let time = 0; | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| time += 0.01; | |
| // Rotate quantum core | |
| if (scene.children[0]) { | |
| scene.children[0].rotation.x += 0.005; | |
| scene.children[0].rotation.y += 0.007; | |
| // Pulsing effect | |
| const pulse = Math.sin(time) * 0.5 + 0.5; | |
| scene.children[0].material.emissiveIntensity = pulse * 0.5; | |
| } | |
| // Rotate particles | |
| if (particles) { | |
| particles.rotation.x += 0.0005; | |
| particles.rotation.y += 0.0007; | |
| } | |
| // Render scene | |
| if (document.body.classList.contains('three-d-goggles')) { | |
| effect.render(scene, camera); | |
| } else { | |
| renderer.render(scene, camera); | |
| } | |
| } | |
| init(); | |
| </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=Bujurocks/transformer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |