Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GXS QuantumNest | Futuristic System Concepts</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.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> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-12"> | |
| <!-- Hero Section --> | |
| <section id="hero" class="relative h-screen flex items-center justify-center overflow-hidden"> | |
| <div id="vanta-bg" class="absolute inset-0"></div> | |
| <div class="relative z-10 text-center max-w-4xl"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-500"> | |
| GXS QuantumNest | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-8 text-gray-300"> | |
| A kaleidoscope of imagination - 9 ultra-advanced hypothetical system concepts | |
| </p> | |
| <div class="flex justify-center gap-4"> | |
| <a href="#systems" class="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 rounded-lg font-medium hover:opacity-90 transition"> | |
| Explore Systems | |
| </a> | |
| <a href="#elements" class="px-6 py-3 border border-purple-500 rounded-lg font-medium hover:bg-purple-900/30 transition"> | |
| View Elements | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Systems Grid --> | |
| <section id="systems" class="py-20"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center"> | |
| The 9 Hypothetical Systems | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- System 1 --> | |
| <div class="system-card group" onclick="showSystemDetails('quantumnest')"> | |
| <div class="system-icon bg-gradient-to-br from-blue-500 to-purple-600"> | |
| <i data-feather="cpu"></i> | |
| </div> | |
| <h3>GXS QuantumNest</h3> | |
| <p>Generative AI-powered OS for woven smart fabrics</p> | |
| <div class="elements mt-4"> | |
| <span class="bg-blue-800/50">H</span> | |
| <span class="bg-gray-600/50">C</span> | |
| <span class="bg-purple-800/50">N</span> | |
| </div> | |
| </div> | |
| <!-- System 2 --> | |
| <div class="system-card group" onclick="showSystemDetails('thornbridge')"> | |
| <div class="system-icon bg-gradient-to-br from-red-500 to-orange-600"> | |
| <i data-feather="trello"></i> | |
| </div> | |
| <h3>ThornBridge Calculus Engine</h3> | |
| <p>Structural simulation for thorn-inspired bridges</p> | |
| <div class="elements mt-4"> | |
| <span class="bg-gray-600/50">Si</span> | |
| <span class="bg-red-800/50">Fe</span> | |
| <span class="bg-yellow-600/50">O</span> | |
| </div> | |
| </div> | |
| <!-- System 3 --> | |
| <div class="system-card group" onclick="showSystemDetails('deserthydro')"> | |
| <div class="system-icon bg-gradient-to-br from-teal-500 to-green-600"> | |
| <i data-feather="droplet"></i> | |
| </div> | |
| <h3>DesertHydro Dam Intelligence</h3> | |
| <p>Underwater desert dam architecture AI</p> | |
| <div class="elements mt-4"> | |
| <span class="bg-green-800/50">Ca</span> | |
| <span class="bg-teal-800/50">Mg</span> | |
| <span class="bg-blue-800/50">H</span> | |
| </div> | |
| </div> | |
| <!-- System 4 --> | |
| <div class="system-card group" onclick="showSystemDetails('frogbiome')"> | |
| <div class="system-icon bg-gradient-to-br from-green-500 to-lime-600"> | |
| <i data-feather="home"></i> | |
| </div> | |
| <h3>FrogBiome Habitat Synthesizer</h3> | |
| <p>Frog-inspired countryside home design</p> | |
| <div class="elements mt-4"> | |
| <span class="bg-orange-800/50">P</span> | |
| <span class="bg-yellow-800/50">S</span> | |
| <span class="bg-gray-600/50">Zn</span> | |
| </div> | |
| </div> | |
| <!-- System 5 --> | |
| <div class="system-card group" onclick="showSystemDetails('bioweave')"> | |
| <div class="system-icon bg-gradient-to-br from-pink-500 to-rose-600"> | |
| <i data-feather="feather"></i> | |
| </div> | |
| <h3>BioWeave Fashion Compiler</h3> | |
| <p>Generative fashion engine with quantum dots</p> | |
| <div class="elements mt-4"> | |
| <span class="bg-blue-800/50">H</span> | |
| <span class="bg-green-800/50">B</span> | |
| <span class="bg-red-600/50">Cr</span> | |
| </div> | |
| </div> | |
| <!-- System 6 --> | |
| <div class="system-card group" onclick="showSystemDetails('marscycle')"> | |
| <div class="system-icon bg-gradient-to-br from-orange-500 to-red-600"> | |
| <i data-feather="bicycle"></i> | |
| </div> | |
| <h3>MarsCycle Robotics Framework</h3> | |
| <p>Bicycle-robot-spaceship hybrids for Mars</p> | |
| <div class="elements mt-4"> | |
| <span class="bg-gray-600/50">Ti</span> | |
| <span class="bg-purple-800/50">Li</span> | |
| <span class="bg-teal-800/50">Ne</span> | |
| </div> | |
| </div> | |
| <!-- System 7 --> | |
| <div class="system-card group" onclick="showSystemDetails('thornride')"> | |
| <div class="system-icon bg-gradient-to-br from-red-600 to-pink-600"> | |
| <i data-feather="bike"></i> | |
| </div> | |
| <h3>ThornRide Algebraic Designer</h3> | |
| <p>Futuristic bicycle architecture designer</p> | |
| <div class="elements mt-4"> | |
| <span class="bg-gray-600/50">Al</span> | |
| <span class="bg-gray-600/50">C</span> | |
| <span class="bg-green-800/50">F</span> | |
| </div> | |
| </div> | |
| <!-- System 8 --> | |
| <div class="system-card group" onclick="showSystemDetails('exojacket')"> | |
| <div class="system-icon bg-gradient-to-br from-indigo-500 to-violet-600"> | |
| <i data-feather="wind"></i> | |
| </div> | |
| <h3>ExoJacket Physics Tailor</h3> | |
| <p>Fashion system for exoplanet explorers</p> | |
| <div class="elements mt-4"> | |
| <span class="bg-blue-800/50">Ar</span> | |
| <span class="bg-gray-600/50">Pt</span> | |
| <span class="bg-teal-800/50">Te</span> | |
| </div> | |
| </div> | |
| <!-- System 9 --> | |
| <div class="system-card group" onclick="showSystemDetails('tribokitchen')"> | |
| <div class="system-icon bg-gradient-to-br from-amber-500 to-yellow-600"> | |
| <i data-feather="coffee"></i> | |
| </div> | |
| <h3>TriboKitchen Genomic Interior AI</h3> | |
| <p>Kitchen design inspired by tribology and tea</p> | |
| <div class="elements mt-4"> | |
| <span class="bg-red-800/50">Cu</span> | |
| <span class="bg-gray-600/50">Si</span> | |
| <span class="bg-purple-800/50">Bi</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- System Details Modal --> | |
| <div id="systemModal" class="fixed inset-0 bg-black/80 z-50 hidden items-center justify-center p-4"> | |
| <div class="bg-gray-800 rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 id="modalTitle" class="text-2xl font-bold"></h3> | |
| <p id="modalSubtitle" class="text-gray-400"></p> | |
| </div> | |
| <button onclick="hideSystemDetails()" class="text-gray-400 hover:text-white"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-6"> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-3">Concept</h4> | |
| <p id="modalConcept" class="mb-6"></p> | |
| <h4 class="text-lg font-semibold mb-3">Elements</h4> | |
| <div id="modalElements" class="flex gap-2 mb-6"></div> | |
| <h4 class="text-lg font-semibold mb-3">Features</h4> | |
| <ul id="modalFeatures" class="space-y-2"></ul> | |
| </div> | |
| <div> | |
| <div class="aspect-video bg-gray-700 rounded-lg mb-4 flex items-center justify-center"> | |
| <img id="modalImage" src="" alt="" class="w-full h-full object-cover rounded-lg"> | |
| </div> | |
| <div class="bg-gray-700/50 p-4 rounded-lg"> | |
| <h4 class="text-lg font-semibold mb-2">Technical Details</h4> | |
| <p id="modalTech" class="text-sm"></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <fashion-model></fashion-model> | |
| <custom-footer></custom-footer> | |
| <script src="components/fashion-model.js"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| // Initialize Three.js after components are loaded | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const models = document.querySelectorAll('fashion-model'); | |
| models.forEach(model => { | |
| if (model.initModel) model.initModel(); | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| feather.replace(); | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3f3fff, | |
| backgroundColor: 0x111827, | |
| size: 0.8 | |
| }); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |