Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GXS QuantumOS | Futuristic Quantum Experience</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://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></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.globe.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Orbitron', sans-serif; | |
| overflow-x: hidden; | |
| } | |
| #vanta-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .card-3d { | |
| transform-style: preserve-3d; | |
| transition: all 0.5s ease; | |
| } | |
| .card-3d:hover { | |
| transform: rotateY(10deg) rotateX(5deg) translateY(-10px) scale(1.03); | |
| box-shadow: 0 25px 50px rgba(0, 255, 255, 0.3); | |
| } | |
| #3d-model { | |
| transition: all 0.5s ease; | |
| } | |
| #3d-model:hover { | |
| filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.5)); | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 10px rgba(0, 255, 255, 0.7), | |
| 0 0 20px rgba(0, 255, 255, 0.5), | |
| 0 0 30px rgba(0, 255, 255, 0.3); | |
| } | |
| .glow-hover:hover { | |
| filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.7)); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-cyan-100"> | |
| <div id="vanta-bg"></div> | |
| <!-- Floating Navbar --> | |
| <nav class="fixed top-0 left-0 right-0 z-50 backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-800 border-b border-cyan-500 border-opacity-20"> | |
| <div class="container mx-auto px-6 py-3 flex justify-between items-center"> | |
| <div class="text-2xl font-bold neon-text"> | |
| <span class="text-cyan-400">GXS Q</span>uantum<span class="text-cyan-400">OS</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="hover:text-cyan-400 transition duration-300">Home</a> | |
| <a href="#projects" class="hover:text-cyan-400 transition duration-300">Projects</a> | |
| <a href="#skills" class="hover:text-cyan-400 transition duration-300">Skills</a> | |
| <a href="#about" class="hover:text-cyan-400 transition duration-300">About</a> | |
| <a href="#contact" class="hover:text-cyan-400 transition duration-300">Contact</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <i data-feather="menu"></i> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="min-h-screen flex items-center justify-center pt-20"> | |
| <div class="container mx-auto px-6 py-16 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 neon-text"> | |
| The Future of <span class="text-cyan-400">Quantum</span> Experience | |
| </h1> | |
| <h2 class="text-2xl md:text-3xl mb-8 text-cyan-300"> | |
| Where Quantum Computing Meets Minimalist Design | |
| </h2> | |
| <div class="flex space-x-4"> | |
| <a href="#projects" class="px-8 py-3 bg-cyan-600 hover:bg-cyan-700 rounded-full font-bold transition duration-300 glow-hover"> | |
| Explore Demo | |
| </a> | |
| <a href="#products" class="px-8 py-3 border-2 border-cyan-400 hover:bg-cyan-900 rounded-full font-bold transition duration-300 glow-hover"> | |
| View Products | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 relative"> | |
| <!-- Interactive 3D Model --> | |
| <div class="w-full h-96 bg-transparent flex items-center justify-center"> | |
| <canvas id="3d-model" class="w-full h-full"></canvas> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Scene setup | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('3d-model'), alpha: true }); | |
| renderer.setSize(document.querySelector('#3d-model').parentElement.clientWidth, document.querySelector('#3d-model').parentElement.clientHeight); | |
| // Lighting | |
| const ambientLight = new THREE.AmbientLight(0x00ffff, 0.5); | |
| scene.add(ambientLight); | |
| const directionalLight = new THREE.DirectionalLight(0x00ffff, 0.8); | |
| directionalLight.position.set(1, 1, 1); | |
| scene.add(directionalLight); | |
| const pointLight = new THREE.PointLight(0x00ffff, 1, 100); | |
| pointLight.position.set(5, 5, 5); | |
| scene.add(pointLight); | |
| // Model loader | |
| const loader = new THREE.GLTFLoader(); | |
| let model; | |
| loader.load( | |
| 'https://cdn.jsdelivr.net/gh/mrdoob/three.js/examples/models/gltf/LittlestTokyo.glb', | |
| (gltf) => { | |
| model = gltf.scene; | |
| model.scale.set(0.5, 0.5, 0.5); | |
| model.position.y = -1; | |
| scene.add(model); | |
| }, | |
| undefined, | |
| (error) => { | |
| console.error('Error loading 3D model:', error); | |
| // Fallback sphere | |
| const geometry = new THREE.SphereGeometry(1, 32, 32); | |
| const material = new THREE.MeshPhongMaterial({ | |
| color: 0x00ffff, | |
| transparent: true, | |
| opacity: 0.8, | |
| shininess: 100 | |
| }); | |
| model = new THREE.Mesh(geometry, material); | |
| scene.add(model); | |
| } | |
| ); | |
| camera.position.z = 5; | |
| // Animation loop | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| if (model) { | |
| model.rotation.y += 0.005; | |
| } | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| // Responsive resize | |
| window.addEventListener('resize', () => { | |
| camera.aspect = document.querySelector('#3d-model').parentElement.clientWidth / document.querySelector('#3d-model').parentElement.clientHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(document.querySelector('#3d-model').parentElement.clientWidth, document.querySelector('#3d-model').parentElement.clientHeight); | |
| }); | |
| }); | |
| </script> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Products Section --> | |
| <section id="products" class="py-20 bg-gray-900 bg-opacity-80"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center mb-16 neon-text"> | |
| Quantum<span class="text-cyan-400">OS</span> Ecosystem | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="card-3d bg-black rounded-xl overflow-hidden border border-gray-700 transition duration-500 hover:border-cyan-400"> | |
| <div class="relative h-64 flex items-center justify-center bg-gradient-to-b from-gray-900 to-black"> | |
| <div class="absolute inset-0 bg-[url('http://static.photos/minimal/640x360/10')] bg-cover bg-center opacity-20"></div> | |
| <div class="relative z-10 text-center p-6"> | |
| <h3 class="text-2xl font-bold text-white mb-2">QuantumPhone</h3> | |
| <p class="text-sm text-cyan-300">Next-gen holographic device</p> | |
| <div class="mt-8"> | |
| <img src="http://static.photos/technology/640x360/11" alt="QuantumPhone" class="w-full h-32 object-contain"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6 border-t border-gray-800"> | |
| <p class="text-gray-400 mb-4">Experience the future with our seamless holographic interface powered by quantum computing.</p> | |
| <button class="w-full py-2 bg-cyan-600 hover:bg-cyan-700 rounded-lg font-medium transition duration-300 text-white"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="card-3d bg-black rounded-xl overflow-hidden border border-gray-700 transition duration-500 hover:border-cyan-400"> | |
| <div class="relative h-64 flex items-center justify-center bg-gradient-to-b from-gray-900 to-black"> | |
| <div class="absolute inset-0 bg-[url('http://static.photos/technology/640x360/12')] bg-cover bg-center opacity-20"></div> | |
| <div class="relative z-10 text-center p-6"> | |
| <h3 class="text-2xl font-bold text-white mb-2">QuantumVision Pro</h3> | |
| <p class="text-sm text-cyan-300">Spatial computing redefined</p> | |
| <div class="mt-8"> | |
| <img src="http://static.photos/technology/640x360/13" alt="QuantumVision Pro" class="w-full h-32 object-contain"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6 border-t border-gray-800"> | |
| <p class="text-gray-400 mb-4">Our most advanced spatial computer with quantum-level processing and photorealistic displays.</p> | |
| <button class="w-full py-2 bg-cyan-600 hover:bg-cyan-700 rounded-lg font-medium transition duration-300 text-white"> | |
| Pre-order Now | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="card-3d bg-black rounded-xl overflow-hidden border border-gray-700 transition duration-500 hover:border-cyan-400"> | |
| <div class="relative h-64 flex items-center justify-center bg-gradient-to-b from-gray-900 to-black"> | |
| <div class="absolute inset-0 bg-[url('http://static.photos/abstract/640x360/14')] bg-cover bg-center opacity-20"></div> | |
| <div class="relative z-10 text-center p-6"> | |
| <h3 class="text-2xl font-bold text-white mb-2">QuantumOS 2.0</h3> | |
| <p class="text-sm text-cyan-300">The operating system of tomorrow</p> | |
| <div class="mt-8"> | |
| <img src="http://static.photos/technology/640x360/15" alt="QuantumOS" class="w-full h-32 object-contain"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6 border-t border-gray-800"> | |
| <p class="text-gray-400 mb-4">Experience unprecedented speed and security with our quantum-powered operating system.</p> | |
| <button class="w-full py-2 bg-cyan-600 hover:bg-cyan-700 rounded-lg font-medium transition duration-300 text-white"> | |
| Download Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-gradient-to-b from-gray-900 to-black"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center mb-16 neon-text"> | |
| Quantum<span class="text-cyan-400">OS</span> Innovations | |
| </h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="card-3d bg-gray-900 rounded-xl p-8 border border-gray-700 transition duration-500 hover:border-cyan-400"> | |
| <div class="w-20 h-20 mb-6 bg-gradient-to-br from-cyan-900 to-black rounded-full flex items-center justify-center mx-auto"> | |
| <i data-feather="zap" class="text-cyan-400 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white text-center mb-3">Quantum Speed</h3> | |
| <p class="text-gray-400 text-center">Experience processing speeds that defy conventional limitations with our quantum architecture.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="card-3d bg-gray-900 rounded-xl p-8 border border-gray-700 transition duration-500 hover:border-cyan-400"> | |
| <div class="w-20 h-20 mb-6 bg-gradient-to-br from-cyan-900 to-black rounded-full flex items-center justify-center mx-auto"> | |
| <i data-feather="lock" class="text-cyan-400 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white text-center mb-3">Unbreakable Security</h3> | |
| <p class="text-gray-400 text-center">Quantum encryption makes your data fundamentally unhackable by conventional means.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="card-3d bg-gray-900 rounded-xl p-8 border border-gray-700 transition duration-500 hover:border-cyan-400"> | |
| <div class="w-20 h-20 mb-6 bg-gradient-to-br from-cyan-900 to-black rounded-full flex items-center justify-center mx-auto"> | |
| <i data-feather="cpu" class="text-cyan-400 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white text-center mb-3">Neural Interface</h3> | |
| <p class="text-gray-400 text-center">Control your devices with thought alone through our breakthrough neural network integration.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="card-3d bg-gray-900 rounded-xl p-8 border border-gray-700 transition duration-500 hover:border-cyan-400"> | |
| <div class="w-20 h-20 mb-6 bg-gradient-to-br from-cyan-900 to-black rounded-full flex items-center justify-center mx-auto"> | |
| <i data-feather="monitor" class="text-cyan-400 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white text-center mb-3">Photonic Display</h3> | |
| <p class="text-gray-400 text-center">Our quantum dot displays achieve perfect color accuracy and infinite contrast.</p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="card-3d bg-gray-900 rounded-xl p-8 border border-gray-700 transition duration-500 hover:border-cyan-400"> | |
| <div class="w-20 h-20 mb-6 bg-gradient-to-br from-cyan-900 to-black rounded-full flex items-center justify-center mx-auto"> | |
| <i data-feather="battery-charging" class="text-cyan-400 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white text-center mb-3">Zero-Point Energy</h3> | |
| <p class="text-gray-400 text-center">Harness quantum vacuum fluctuations for near-infinite battery life.</p> | |
| </div> | |
| </body> | |
| </html> |