Spaces:
Running
Running
File size: 9,022 Bytes
dcdefe2 d482bcf f65cca9 59c2b00 d482bcf dcdefe2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quantum Lab | CodeWizard</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Fira Code', monospace;
color: white;
overflow-x: hidden;
}
.quantum-card {
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(16px);
border: 1px solid rgba(124, 58, 237, 0.3);
transition: all 0.3s ease;
}
.quantum-card:hover {
border-color: rgba(124, 58, 237, 0.6);
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(124, 58, 237, 0.2);
}
.quantum-pulse {
animation: pulse 4s infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.7); }
50% { box-shadow: 0 0 0 20px rgba(124, 58, 237, 0); }
}
.quantum-spin {
animation: spin 10s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
</style>
</head>
<body id="quantum-bg">
<!-- Navigation -->
<nav class="relative z-10 py-6 px-6 md:px-12 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i data-feather="atom" class="text-purple-400"></i>
<span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-500">Quantum Lab</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="index.html" class="hover:text-purple-300 transition">Back to Main</a>
<a href="visual.html" class="hover:text-purple-300 transition">Visual Orchestrator</a>
<a href="hexa.html" class="hover:text-purple-300 transition">HEXA Modularizer</a>
<a href="game.html" class="hover:text-purple-300 transition">Game Lab</a>
</div>
</nav>
<!-- Main Content -->
<main class="relative z-10 container mx-auto px-6 md:px-12 py-16">
<div class="text-center mb-20">
<h1 class="text-5xl md:text-7xl font-bold mb-6">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-500">Quantum</span> Computing Lab
</h1>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Experimental quantum computing interface with real-time qubit visualization and quantum circuit simulation.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
<!-- Qubit Visualizer -->
<div class="quantum-card rounded-xl p-8">
<div class="flex justify-center mb-6">
<div class="w-24 h-24 rounded-full quantum-pulse flex items-center justify-center bg-gradient-to-br from-purple-900 to-blue-900">
<div class="w-16 h-16 rounded-full bg-white/10 flex items-center justify-center quantum-spin">
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-400 to-blue-400"></div>
</div>
</div>
</div>
<h3 class="text-2xl font-bold text-center mb-4">Qubit Visualizer</h3>
<p class="text-gray-300 mb-6">Real-time visualization of qubit superposition and entanglement states.</p>
<button class="w-full py-3 rounded-lg bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 transition font-medium">
Initialize Qubits
</button>
</div>
<!-- Quantum Circuit -->
<div class="quantum-card rounded-xl p-8">
<div class="flex justify-center mb-6">
<div class="relative w-24 h-24">
<div class="absolute inset-0 bg-gradient-to-br from-purple-900 to-blue-900 rounded-lg opacity-80"></div>
<div class="absolute inset-2 grid grid-cols-3 grid-rows-3 gap-1">
<div class="bg-purple-400 rounded-sm"></div>
<div class="bg-blue-400 rounded-sm"></div>
<div class="bg-purple-400 rounded-sm"></div>
<div class="bg-blue-400 rounded-sm"></div>
<div class="bg-purple-400 rounded-sm"></div>
<div class="bg-blue-400 rounded-sm"></div>
<div class="bg-purple-400 rounded-sm"></div>
<div class="bg-blue-400 rounded-sm"></div>
<div class="bg-purple-400 rounded-sm"></div>
</div>
</div>
</div>
<h3 class="text-2xl font-bold text-center mb-4">Circuit Designer</h3>
<p class="text-gray-300 mb-6">Drag-and-drop interface for building quantum circuits with gates and measurements.</p>
<button class="w-full py-3 rounded-lg bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 transition font-medium">
Design Circuit
</button>
</div>
<!-- Quantum API -->
<div class="quantum-card rounded-xl p-8">
<div class="flex justify-center mb-6">
<div class="w-24 h-24 rounded-lg bg-gradient-to-br from-purple-900 to-blue-900 flex items-center justify-center">
<div class="text-4xl font-mono">{ }</div>
</div>
</div>
<h3 class="text-2xl font-bold text-center mb-4">Quantum API</h3>
<p class="text-gray-300 mb-6">Connect to real quantum computers via our API and run experiments remotely.</p>
<button class="w-full py-3 rounded-lg bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 transition font-medium">
API Documentation
</button>
</div>
</div>
<!-- Quantum Terminal -->
<div class="quantum-card rounded-xl p-8 max-w-4xl mx-auto">
<div class="flex mb-6">
<div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div>
<div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
<div class="w-3 h-3 rounded-full bg-pink-500"></div>
</div>
<div class="font-mono">
<div class="flex items-center mb-4">
<span class="text-purple-400 mr-2">quantum></span>
<span class="text-white">initialize --qubits=5 --entanglement=full</span>
</div>
<div class="text-blue-300 mb-2">> Initializing 5-qubit quantum register</div>
<div class="text-blue-300 mb-2">> Creating full entanglement network</div>
<div class="text-purple-300 mb-2">> Quantum state: |ψ⟩ = (|00000⟩ + |11111⟩)/√2</div>
<div class="text-green-300 mb-4">> Ready for quantum operations</div>
<div class="flex items-center">
<span class="text-purple-400 mr-2">quantum></span>
<span class="text-white flex-1 border-b border-purple-400">_</span>
</div>
</div>
</div>
</main>
<footer class="relative z-10 py-12 px-6 md:px-12 bg-gray-900/50 mt-20">
<div class="container mx-auto text-center">
<p class="text-gray-400">© 2023 CodeWizard Quantum Lab. All quantum states are probabilistic.</p>
</div>
</footer>
<script>
// Initialize Vanta.js quantum network background
VANTA.NET({
el: "#quantum-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x7b5bfb,
backgroundColor: 0x0,
points: 12.00,
maxDistance: 22.00,
spacing: 18.00
});
// Initialize feather icons
document.addEventListener('DOMContentLoaded', () => {
feather.replace();
});
</script>
</body>
</html> |