Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="GXS Quantum Hub - Premier quantum computing and AI innovation synergies"> | |
| <meta name="keywords" content="quantum computing, AI, innovation, competition, technology"> | |
| <meta property="og:title" content="GXS Quantum Hub"> | |
| <meta property="og:description" content="Pushing the boundaries of quantum computing and AI innovation"> | |
| <meta property="og:type" content="website"> | |
| <meta property="og:url" content="https://chuyendoixanh.org/gxs-ai-governance-lab"> | |
| <meta property="og:image" content="https://quantumsyntharena.tech/static/og-image.jpg"> | |
| <title>GXS Quantum Hub | Quantum Computing & AI Innovation Synergies</title> | |
| <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://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/loaders/GLTFLoader.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&family=Major+Mono+Display&display=swap'); | |
| @keyframes scanline { | |
| 0% { transform: translateY(-100%); } | |
| 100% { transform: translateY(100vh); } | |
| } | |
| @keyframes glitch { | |
| 0%, 80% { text-shadow: none; } | |
| 85% { text-shadow: -1px 0 var(--neon-purple), 1px 0 var(--neon-blue); } | |
| 90% { text-shadow: 1px 0 var(--neon-purple), -1px 0 var(--neon-blue); } | |
| 95% { text-shadow: none; } | |
| 100% { text-shadow: none; } | |
| } | |
| :root { | |
| --neon-blue: #0ff0fc; | |
| --neon-purple: #9d00ff; | |
| --dark-space: #0a0a20; | |
| } | |
| body { | |
| font-family: 'Rajdhani', sans-serif; | |
| background-color: var(--dark-space); | |
| color: white; | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3, h4, .nav-item { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .neon-text-blue { | |
| text-shadow: 0 0 10px rgba(15, 240, 252, 0.8), | |
| 0 0 20px rgba(15, 240, 252, 0.6), | |
| 0 0 30px rgba(15, 240, 252, 0.4); | |
| color: var(--neon-blue); | |
| position: relative; | |
| } | |
| .neon-text-blue::after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| bottom: -2px; | |
| width: 100%; | |
| height: 1px; | |
| background: var(--neon-blue); | |
| box-shadow: 0 0 5px var(--neon-blue); | |
| animation: pulse 2s infinite; | |
| } | |
| .neon-text-purple { | |
| text-shadow: 0 0 10px rgba(157, 0, 255, 0.8), | |
| 0 0 20px rgba(157, 0, 255, 0.6), | |
| 0 0 30px rgba(157, 0, 255, 0.4); | |
| color: var(--neon-purple); | |
| animation: glitch 5s infinite; | |
| } | |
| .neon-border-blue { | |
| box-shadow: 0 0 15px rgba(15, 240, 252, 0.6); | |
| border: 1px solid var(--neon-blue); | |
| } | |
| .neon-border-purple { | |
| box-shadow: 0 0 15px rgba(157, 0, 255, 0.6); | |
| border: 1px solid var(--neon-purple); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 0 30px rgba(15, 240, 252, 0.4); | |
| } | |
| .nav-item { | |
| position: relative; | |
| } | |
| .nav-item::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -5px; | |
| left: 0; | |
| background-color: var(--neon-blue); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-item:hover::after { | |
| width: 100%; | |
| } | |
| .section-divider { | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--neon-blue), transparent); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="vanta-bg" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;"></div> | |
| <div class="fixed inset-0 pointer-events-none" style=" | |
| background: | |
| radial-gradient(circle at center, rgba(15,240,252,0.02) 0%, transparent 70%), | |
| linear-gradient(rgba(10,10,32,0.1) 1px, transparent 1px); | |
| background-size: 100% 3px, 100% 100%; | |
| z-index: 0; | |
| animation: scanline 8s linear infinite; | |
| "></div> | |
| <div class="fixed inset-0 pointer-events-none z-10" style=" | |
| background: | |
| linear-gradient(135deg, rgba(15,240,252,0.03) 0%, transparent 20%, transparent 80%, rgba(157,0,255,0.03) 100%); | |
| "></div> | |
| <!-- Main Container --> | |
| <div class="relative min-h-screen flex flex-col"> | |
| <!-- Navigation --> | |
| <nav class="py-6 px-4 md:px-12 backdrop-blur-md bg-opacity-50 bg-black z-50"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-3 neon-text-blue group"> | |
| <div class="w-8 h-8 relative"> | |
| <div class="absolute inset-0 rounded-full border-2 border-blue-400 animate-pulse"></div> | |
| <div class="absolute inset-1 rounded-full border-2 border-purple-400 animate-pulse" style="animation-delay: 0.5s"></div> | |
| <div class="absolute inset-0.5 rounded-full border border-white/30 animate-ping" style="animation-delay: 1s"></div> | |
| </div> | |
| <span class="text-2xl font-bold tracking-tighter" style="font-family: 'Major Mono Display', monospace;">SUSTAINABLE_HORIZON</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#challenges" class="nav-item text-lg uppercase tracking-wider hover:text-white transition-colors neon-text-purple">Challenges</a> | |
| <a href="#timeline" class="nav-item text-lg uppercase tracking-wider hover:text-white transition-colors neon-text-blue">Timeline</a> | |
| <a href="#judges" class="nav-item text-lg uppercase tracking-wider hover:text-white transition-colors neon-text-purple">Judges</a> | |
| <a href="#prizes" class="nav-item text-lg uppercase tracking-wider hover:text-white transition-colors neon-text-blue">Prizes</a> | |
| <a href="#register" class="nav-item px-4 py-2 bg-blue-900/30 rounded-full neon-border-blue hover:bg-blue-900/50 transition-all">Register</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none" id="mobile-menu-button"> | |
| <i data-feather="menu" class="w-8 h-8 neon-text-blue"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden hidden py-4 px-4 bg-black bg-opacity-90 mt-2 rounded-lg" id="mobile-menu"> | |
| <div class="flex flex-col space-y-4"> | |
| <a href="#challenges" class="nav-item text-lg uppercase tracking-wider neon-text-purple">Challenges</a> | |
| <a href="#timeline" class="nav-item text-lg uppercase tracking-wider neon-text-blue">Timeline</a> | |
| <a href="#judges" class="nav-item text-lg uppercase tracking-wider neon-text-purple">Judges</a> | |
| <a href="#prizes" class="nav-item text-lg uppercase tracking-wider neon-text-blue">Prizes</a> | |
| <a href="#register" class="nav-item px-4 py-2 mt-4 bg-blue-900/30 rounded-full neon-border-blue hover:bg-blue-900/50 transition-all text-center">Register Now</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="flex-grow flex items-center justify-center py-20 px-4 md:px-12 relative z-10"> | |
| <div class="container mx-auto text-center"> | |
| <div class="relative"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-600/20 blur-3xl -z-10"></div> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 font-mono tracking-tighter"> | |
| <div class="neon-text-blue inline-block relative"> | |
| <span class="absolute -left-3 -top-3 text-xs opacity-70 font-mono">[SINGULARITY_ID]</span> | |
| <span class="blinking-cursor">GXS QUANTUM_</span>HUB | |
| <span class="absolute -right-3 -bottom-3 text-xs opacity-70 font-mono">[2025]</span> | |
| </div> | |
| <div class="neon-text-purple inline-block relative ml-4"> | |
| <span class="absolute -left-3 -top-3 text-xs opacity-70 font-mono">[YEAR]</span> | |
| SUSTAINABLE_SYNERGY_ | |
| <span class="absolute -right-3 -bottom-3 text-xs opacity-70 font-mono">[ROUND_1]</span> | |
| </div> | |
| <div class="neon-text-blue inline-block relative ml-4"> | |
| <span class="absolute -left-3 -top-3 text-xs opacity-70 font-mono">[T+1]</span> | |
| HUMANITY[BEYOND] | |
| <span class="absolute -right-3 -bottom-3 text-xs opacity-70 font-mono">[FINAL_STAGE]</span> | |
| </div> | |
| </h1> | |
| </div> | |
| <div class="relative max-w-3xl mx-auto mb-10"> | |
| <div class="relative bg-black/90 p-8 rounded-lg border border-gray-800 backdrop-blur-sm neon-border-blue"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="p-4 bg-black/50 rounded-lg neon-border-purple"> | |
| <div class="text-4xl font-bold neon-text-purple mb-2">Quantum</div> | |
| <div class="text-sm uppercase tracking-wider">Innovation Breakthrough</div> | |
| <div class="text-xs neon-text-blue mt-1">xxx</div> | |
| </div> | |
| <div class="p-4 bg-black/50 rounded-lg neon-border-blue"> | |
| <div class="text-4xl font-bold neon-text-blue mb-2">Elevate</div> | |
| <div class="text-sm uppercase tracking-wider">Thinking Beyond</div> | |
| <div class="text-xs neon-text-purple mt-1">xxx</div> | |
| </div> | |
| <div class="p-4 bg-black/50 rounded-lg neon-border-purple"> | |
| <div class="text-4xl font-bold neon-text-purple mb-2">Deep</div> | |
| <div class="text-sm uppercase tracking-wider">Exploration</div> | |
| <div class="text-xs neon-text-blue mt-1">xxx</div> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-6 border-t border-gray-800"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <div class="h-2 w-2 rounded-full bg-green-500 animate-pulse mr-2 inline-block"></div> | |
| <span class="text-xs font-mono text-green-400">OPEN_PLATFORM</span> | |
| </div> | |
| <a href="#register" class="text-xs font-mono neon-text-blue hover:text-white transition-colors"> | |
| GET INVOLVED → | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <div class="relative group"> | |
| <div class="absolute -inset-1 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full blur-md opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div> | |
| <a href="#register" class="relative px-8 py-3 bg-black/80 neon-border-blue rounded-full text-lg uppercase tracking-wider neon-text-blue hover:bg-opacity-100 transition-all cursor-pointer inline-block"> | |
| REGISTER NOW | |
| </a> | |
| </div> | |
| <div class="relative group"> | |
| <div class="absolute -inset-1 bg-gradient-to-r from-purple-500 to-blue-600 rounded-full blur-md opacity-50 group-hover:opacity-75 transition-opacity duration-300"></div> | |
| <a href="#challenges" class="relative px-8 py-3 bg-black/80 neon-border-purple rounded-full text-lg uppercase tracking-wider neon-text-purple hover:bg-opacity-100 transition-all cursor-pointer inline-block"> | |
| VIEW CHALLENGES | |
| </a> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Challenges Section --> | |
| <section id="challenges" class="py-20 px-4 md:px-12 bg-black bg-opacity-70 relative section-focus"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center mb-16"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <div class="relative"> | |
| <div class="absolute -left-8 -top-4 w-16 h-16 bg-blue-500/20 rounded-full filter blur-xl"></div> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-6 neon-text-purple relative"> | |
| <span class="absolute -left-6 top-1/2 transform -translate-y-1/2 text-2xl opacity-70">[TECH]</span> | |
| INNOVATION_CHALLENGE | |
| </h2> | |
| </div> | |
| <p class="text-lg md:text-xl mb-6 bg-black/50 p-4 rounded-lg border border-gray-800 backdrop-blur-sm"> | |
| <span class="neon-text-blue">[MISSION]</span> Envision the future at the edge of technological singularity<br> | |
| <span class="neon-text-purple">[PRIZE]</span> $50,000 and access to quantum computing resources | |
| </p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="w-5 h-5 mr-3 neon-text-blue mt-1"></i> | |
| <span>Post-singularity civilization designs</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="w-5 h-5 mr-3 neon-text-blue mt-1"></i> | |
| <span>Interplanetary communication systems</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="w-5 h-5 mr-3 neon-text-blue mt-1"></i> | |
| <span>Climate reversal technologies</span> | |
| </li> | |
| </ul> | |
| <div class="relative group"> | |
| <div class="absolute -inset-0.5 bg-blue-500/30 rounded-full blur-sm group-hover:blur-md transition-all duration-300"></div> | |
| <a href="/aifuture.html" class="relative px-6 py-2 bg-black/80 border border-blue-400 rounded-full text-sm uppercase tracking-wider text-blue-400 hover:bg-blue-900/30 transition-all inline-block"> | |
| VIEW_CHALLENGES | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-lg"> | |
| <img src="http://static.photos/technology/1024x576/1" alt="AI City" class="rounded-lg neon-border-blue w-full h-auto"> | |
| <div class="absolute -bottom-5 -right-5 bg-black bg-opacity-80 neon-border-purple p-4 rounded-lg w-48"> | |
| <h4 class="text-sm font-bold neon-text-purple mb-2">Singularity Nexus</h4> | |
| <p class="text-xs">Human-machine civilization (est. 2045)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16"> | |
| <div class="bg-black bg-opacity-50 p-6 rounded-lg neon-border-blue transition-all duration-300 card-hover"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-full bg-blue-900 bg-opacity-40 mr-4"> | |
| <i data-feather="activity" class="w-6 h-6 neon-text-blue"></i> | |
| </div> | |
| <h3 class="text-xl font-bold neon-text-blue">Dyson Swarms</h3> | |
| </div> | |
| <p class="text-sm"> | |
| Harnessing stellar energy through orbiting solar collectors to power post-singularity | |
| civilizations across the solar system. | |
| </p> | |
| </div> | |
| <div class="bg-black bg-opacity-50 p-6 rounded-lg neon-border-purple transition-all duration-300 card-hover"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-full bg-purple-900 bg-opacity-40 mr-4"> | |
| <i data-feather="users" class="w-6 h-6 neon-text-purple"></i> | |
| </div> | |
| <h3 class="text-xl font-bold neon-text-purple">Mind Uploading</h3> | |
| </div> | |
| <p class="text-sm"> | |
| Digital consciousness transfer allowing humans to transcend biological limits and | |
| explore the universe as pure information. | |
| </p> | |
| </div> | |
| <div class="bg-black bg-opacity-50 p-6 rounded-lg neon-border-blue transition-all duration-300 card-hover"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-full bg-blue-900 bg-opacity-40 mr-4"> | |
| <i data-feather="brain" class="w-6 h-6 neon-text-blue"></i> | |
| </div> | |
| <h3 class="text-xl font-bold neon-text-blue">Terraforming</h3> | |
| </div> | |
| <p class="text-sm"> | |
| Climate engineering at planetary scales to make Mars and other worlds habitable | |
| for post-human civilizations. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="section-divider"></div> | |
| <!-- Timeline Section --> | |
| <section id="timeline" class="py-20 px-4 md:px-12 bg-black bg-opacity-70 relative section-focus"> | |
| <div class="container mx-auto"> | |
| <div class="text-center mb-16"> | |
| <div class="relative"> | |
| <div class="absolute -right-8 -top-4 w-16 h-16 bg-purple-500/20 rounded-full filter blur-xl"></div> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-6 neon-text-blue"> | |
| <span class="text-base align-top mr-2 opacity-70">[EVENT]</span>COMPETITION_TIMELINE | |
| </h2> | |
| </div> | |
| <p class="text-lg md:text-xl max-w-4xl mx-auto bg-black/50 p-4 rounded-lg border border-gray-800 backdrop-blur-sm"> | |
| <span class="neon-text-purple">[PHASE_1]</span> Prototype future civilization models<br> | |
| <span class="neon-text-blue">[PHASE_2]</span> Simulation testing with quantum computers | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="bg-black bg-opacity-50 p-6 rounded-lg neon-border-purple h-full transition-all duration-300 card-hover"> | |
| <div class="mb-4 relative h-40"> | |
| <img src="http://static.photos/space/640x360/1" alt="Mars Colony" class="w-full h-full object-cover rounded-lg"> | |
| <div class="absolute top-2 left-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-blue"> | |
| Singularity Phase 1 | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold neon-text-purple mb-2">Vision Submission</h3> | |
| <p class="text-sm mb-4"> | |
| Present your future civilization model through interactive simulations and documentation. | |
| </p> | |
| <div class="flex justify-between text-xs neon-text-blue"> | |
| <span>Deadline: June 15</span> | |
| <span>Teams: 24</span> | |
| </div> | |
| </div> | |
| <div class="bg-black bg-opacity-50 p-6 rounded-lg neon-border-blue h-full transition-all duration-300 card-hover"> | |
| <div class="mb-4 relative h-40"> | |
| <img src="http://static.photos/space/640x360/2" alt="Space Elevator" class="w-full h-full object-cover rounded-lg"> | |
| <div class="absolute top-2 left-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-purple"> | |
| Online Consciousness | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold neon-text-blue mb-2">Quantum Simulation</h3> | |
| <p class="text-sm mb-4"> | |
| Test your models on quantum computers to validate future viability. | |
| </p> | |
| <div class="flex justify-between text-xs neon-text-purple"> | |
| <span>Date: July 20</span> | |
| <span>Teams: 12</span> | |
| </div> | |
| </div> | |
| <div class="bg-black bg-opacity-50 p-6 rounded-lg neon-border-purple h-full transition-all duration-300 card-hover"> | |
| <div class="mb-4 relative h-40"> | |
| <img src="http://static.photos/space/640x360/3" alt="Generation Ship" class="w-full h-full object-cover rounded-lg"> | |
| <div class="absolute top-2 left-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-blue"> | |
| Post-Human Expansion | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold neon-text-purple mb-2">Singularity Showcase</h3> | |
| <p class="text-sm mb-4"> | |
| Demonstrate your future civilization to the AI review panel. | |
| </p> | |
| <div class="flex justify-between text-xs neon-text-blue"> | |
| <span>Date: August 15</span> | |
| <span>Teams: 6</span> | |
| </div> | |
| </div> | |
| <div class="bg-black bg-opacity-50 p-6 rounded-lg neon-border-blue h-full transition-all duration-300 card-hover"> | |
| <div class="mb-4 relative h-40"> | |
| <img src="http://static.photos/space/640x360/4" alt="Dyson Swarm" class="w-full h-full object-cover rounded-lg"> | |
| <div class="absolute top-2 left-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs neon-text-purple"> | |
| Civilization Phase 3 | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold neon-text-blue mb-2">Future Integration</h3> | |
| <p class="text-sm mb-4"> | |
| Winning models enter the global future planning database. | |
| </p> | |
| <div class="flex justify-between text-xs neon-text-purple"> | |
| <span>Date: August 16</span> | |
| <span>Prize: $50,000</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="section-divider"></div> | |
| <!-- Judges Section --> | |
| <section id="judges" class="py-20 px-4 md:px-12 bg-black bg-opacity-70 relative section-focus"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center mb-16"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <div class="relative"> | |
| <div class="absolute -left-8 -top-4 w-16 h-16 bg-blue-500/20 rounded-full filter blur-xl"></div> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-6 neon-text-purple"> | |
| <span class="text-base align-top mr-2 opacity-70">[JUDGES]</span>EXPERT_PANEL | |
| </h2> | |
| </div> | |
| <p class="text-lg md:text-xl mb-6 bg-black/50 p-4 rounded-lg border border-gray-800 backdrop-blur-sm"> | |
| <span class="neon-text-blue">[CRITERIA]</span> Visionary scope, technological plausibility, and human benefit<br> | |
| <span class="neon-text-purple">[PANEL]</span> Advanced AI systems and futurists from leading institutions. | |
| </p> | |
| <div class="grid grid-cols-2 gap-4 mb-8"> | |
| <div class="p-4 bg-black bg-opacity-40 rounded-lg neon-border-blue"> | |
| <div class="text-3xl font-bold neon-text-blue mb-2">6</div> | |
| <div class="text-sm">AI Evaluators</div> | |
| <div class="text-xs neon-text-purple">Judges</div> | |
| </div> | |
| <div class="p-4 bg-black bg-opacity-40 rounded-lg neon-border-purple"> | |
| <div class="text-3xl font-bold neon-text-purple mb-2">3</div> | |
| <div class="text-sm">Simulation</div> | |
| <div class="text-xs neon-text-blue">Rounds</div> | |
| </div> | |
| </div> | |
| <a href="/aifuture.html#timeline" class="px-6 py-2 bg-transparent border border-blue-400 rounded-full text-sm uppercase tracking-wider text-blue-400 hover:bg-opacity-20 hover:bg-blue-900 transition-all inline-block"> | |
| MEET_COUNCIL | |
| </a> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-lg"> | |
| <div class="aspect-w-16 aspect-h-9"> | |
| <img src="http://static.photos/technology/1024x576/2" alt="Quantum Computer" class="rounded-lg neon-border-purple w-full h-auto"> | |
| </div> | |
| <div class="absolute -bottom-5 -left-5 bg-black bg-opacity-80 neon-border-blue p-4 rounded-lg w-48"> | |
| <h4 class="text-sm font-bold neon-text-blue mb-2">Singularity Core</h4> | |
| <p class="text-xs">Global Future Simulation</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-gradient-to-br from-blue-900 to-purple-900 bg-opacity-40 p-6 rounded-lg neon-border-blue transition-all duration-300 card-hover"> | |
| <h3 class="text-xl font-bold neon-text-blue mb-4">Future Viability</h3> | |
| <p class="mb-4"> | |
| Models will be evaluated based on scientific plausibility, | |
| technological pathways, and scalability across centuries. | |
| </p> | |
| <div class="flex items-center text-sm"> | |
| <i data-feather="code" class="w-4 h-4 mr-2 neon-text-purple"></i> | |
| <span>Weight: 40%</span> | |
| <span class="mx-2">|</span> | |
| <span>Criteria #1</span> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-purple-900 to-blue-900 bg-opacity-40 p-6 rounded-lg neon-border-purple transition-all duration-300 card-hover"> | |
| <h3 class="text-xl font-bold neon-text-purple mb-4">Human Benefit</h3> | |
| <p class="mb-4"> | |
| Solutions will be assessed for their potential to enhance and preserve | |
| human consciousness and quality of life in post-singularity eras. | |
| </p> | |
| <div class="flex items-center text-sm"> | |
| <i data-feather="award" class="w-4 h-4 mr-2 neon-text-blue"></i> | |
| <span>Weight: 30%</span> | |
| <span class="mx-2">|</span> | |
| <span>Criteria #2</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="section-divider"></div> | |
| <!-- Prizes Section --> | |
| <section id="prizes" class="py-20 px-4 md:px-12 bg-black bg-opacity-70 relative section-focus"> | |
| <div class="container mx-auto"> | |
| <div class="text-center mb-16"> | |
| <div class="relative"> | |
| <div class="absolute -right-8 -top-4 w-16 h-16 bg-purple-500/20 rounded-full filter blur-xl"></div> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-6 neon-text-blue"> | |
| <span class="text-base align-top mr-2 opacity-70">[FUTURE]</span>RESOURCES_ACCESS | |
| </h2> | |
| </div> | |
| <p class="text-lg md:text-xl max-w-4xl mx-auto bg-black/50 p-4 rounded-lg border border-gray-800 backdrop-blur-sm"> | |
| <span class="neon-text-purple">[GRANT]</span> $50,000 and quantum computing resources,<br> | |
| <span class="neon-text-blue">[BENEFIT]</span> Winning models integrated into global future planning. | |
| </p> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-stretch gap-8"> | |
| <div class="md:w-1/3 bg-black bg-opacity-50 p-6 rounded-lg neon-border-purple transition-all duration-300 card-hover"> | |
| <div class="mb-4 h-40 bg-gradient-to-b from-blue-900 to-purple-900 rounded-lg flex items-center justify-center"> | |
| <i data-feather="wind" class="w-16 h-16 neon-text-blue"></i> | |
| </div> | |
| <h3 class="text-xl font-bold neon-text-purple mb-3">Singularity Grant</h3> | |
| <p class="text-sm mb-4"> | |
| $50,000 development grant, 1000 hours of quantum computing access, | |
| and integration with global future planning initiatives. | |
| </p> | |
| <div class="w-full bg-gray-800 rounded-full h-2 mb-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 95%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs neon-text-blue"> | |
| <span>Teams</span> | |
| <span>1 Winner</span> | |
| </div> | |
| </div> | |
| <div class="md:w-1/3 bg-black bg-opacity-50 p-6 rounded-lg neon-border-blue transition-all duration-300 card-hover"> | |
| <div class="mb-4 h-40 bg-gradient-to-b from-purple-900 to-blue-900 rounded-lg flex items-center justify-center"> | |
| <i data-feather="droplet" class="w-16 h-16 neon-text-purple"></i> | |
| </div> | |
| <h3 class="text-xl font-bold neon-text-blue mb-3">Future Vision</h3> | |
| <p class="text-sm mb-4"> | |
| $15,000 grant, 500 quantum computing hours, and inclusion in | |
| the interplanetary development database. | |
| </p> | |
| <div class="w-full bg-gray-800 rounded-full h-2 mb-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs neon-text-purple"> | |
| <span>Teams</span> | |
| <span>2 Winners</span> | |
| </div> | |
| </div> | |
| <div class="md:w-1/3 bg-black bg-opacity-50 p-6 rounded-lg neon-border-purple transition-all duration-300 card-hover"> | |
| <div class="mb-4 h-40 bg-gradient-to-b from-blue-900 to-purple-900 rounded-lg flex items-center justify-center"> | |
| <i data-feather="sun" class="w-16 h-16 neon-text-blue"></i> | |
| </div> | |
| <h3 class="text-xl font-bold neon-text-purple mb-3">Horizon Awards</h3> | |
| <p class="text-sm mb-4"> | |
| All finalists receive $5,000, 100 quantum hours, and their models | |
| archived in the Civilization Futures Library. | |
| </p> | |
| <div class="w-full bg-gray-800 rounded-full h-2 mb-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 75%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs neon-text-blue"> | |
| <span>Teams</span> | |
| <span>6 Finalists</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Registration Section --> | |
| <section id="register" class="py-20 px-4 md:px-12 bg-gradient-to-b from-blue-900 to-purple-900 bg-opacity-70 relative section-focus"> | |
| <div class="container mx-auto text-center"> | |
| <div class="relative"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-600/20 blur-3xl -z-10"></div> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-6 neon-text-blue"> | |
| <span class="text-base align-top mr-2 opacity-70">[JOIN]</span>FUTURE_DESIGN | |
| </h2> | |
| </div> | |
| <p class="text-lg md:text-2xl max-w-3xl mx-auto mb-10 bg-black/50 p-6 rounded-lg border border-gray-800 backdrop-blur-sm"> | |
| <span class="neon-text-purple">[DEADLINE]</span> Vision submissions close June 1, 2024<br> | |
| <span class="neon-text-blue">[REQUIREMENTS]</span> Interdisciplinary teams of 3-5 future thinkers. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-10 px-4 md:px-12 bg-black bg-opacity-90"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="flex items-center space-x-2 neon-text-blue group"> | |
| <div class="relative"> | |
| <i data-feather="globe" class="w-6 h-6 group-hover:text-purple-400 transition-colors"></i> | |
| <div class="absolute -inset-1 rounded-full bg-blue-500/10 blur-sm group-hover:bg-purple-500/10 transition-all"></div> | |
| </div> | |
| <span class="text-xl font-bold">SINGULARITY_HORIZON</span> | |
| </div> | |
| <p class="text-sm mt-2 max-w-md"> | |
| Envisioning humanity's future beyond the technological singularity | |
| through interdisciplinary collaboration and foresight. | |
| </p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="https://www.dwarkainternationalschool.com/" target="_blank" class="neon-text-blue hover:text-white transition-colors"> | |
| <i data-feather="globe" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center"> | |
| <p class="text-sm neon-text-purple"> | |
| <span class="opacity-70">Singularity Horizon</span> © 2025-2035<br> | |
| <span class="opacity-70">Contact:</span> contact@p4cng.biz.vn<br> | |
| <span class="opacity-70">Location:</span> Metaverse | |
| </p> | |
| <div class="mt-4"> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#" class="neon-text-blue hover:text-white transition-colors"> | |
| <i data-feather="github" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="neon-text-purple hover:text-white transition-colors"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="neon-text-blue hover:text-white transition-colors"> | |
| <i data-feather="linkedin" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="neon-text-purple hover:text-white transition-colors"> | |
| <i data-feather="mail" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| <p class="text-xs mt-4 neon-text-blue"> | |
| "Designing civilizations for the post-human future." | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <style> | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: var(--neon-blue) } | |
| } | |
| .blinking-cursor { | |
| border-right: 3px solid var(--neon-blue); | |
| animation: blink-caret 0.75s step-end infinite; | |
| } | |
| .terminal-line { | |
| overflow: hidden; | |
| white-space: nowrap; | |
| margin: 0 0 10px; | |
| } | |
| .typing-text { | |
| display: inline-block; | |
| overflow: hidden; | |
| animation: typing 3s steps(40, end); | |
| } | |
| .delay-500 { | |
| animation-delay: 1.5s; | |
| } | |
| .delay-1000 { | |
| animation-delay: 3s; | |
| } | |
| /* New scroll animation styles */ | |
| .section-focus { | |
| opacity: 0.4; | |
| filter: blur(2px); | |
| transform: scale(0.95); | |
| transition: all 0.6s ease-out; | |
| } | |
| .section-active { | |
| opacity: 1; | |
| filter: blur(0); | |
| transform: scale(1); | |
| } | |
| .section-next { | |
| opacity: 0.5; | |
| filter: blur(1px); | |
| transform: scale(0.98); | |
| } | |
| </style> | |
| <script> | |
| // Three.js 3D Scene with Scroll Animation | |
| let scene, camera, renderer, controls; | |
| let scrollY = 0; | |
| let nodes = []; | |
| let lines = []; | |
| function init3D() { | |
| // Create scene | |
| scene = new THREE.Scene(); | |
| scene.background = new THREE.Color(0x0a0a20); | |
| // Add ambient and directional lights | |
| const ambientLight = new THREE.AmbientLight(0x9d00ff, 0.5); | |
| scene.add(ambientLight); | |
| const directionalLight = new THREE.DirectionalLight(0x0ff0fc, 1); | |
| directionalLight.position.set(1, 1, 1); | |
| scene.add(directionalLight); | |
| // Create camera | |
| camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| camera.position.z = 5; | |
| // Create renderer | |
| renderer = new THREE.WebGLRenderer({ antialias: true }); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| document.getElementById('vanta-bg').appendChild(renderer.domElement); | |
| // Add orbit controls | |
| controls = new THREE.OrbitControls(camera, renderer.domElement); | |
| controls.enableDamping = true; | |
| controls.dampingFactor = 0.25; | |
| controls.enableZoom = false; | |
| // Create 3D objects | |
| create3DScene(); | |
| // Handle window resize | |
| window.addEventListener('resize', onWindowResize); | |
| // Start animation loop | |
| animate(); | |
| } | |
| function create3DScene() { | |
| // Create floating neural network nodes | |
| const geometry = new THREE.SphereGeometry(0.1, 32, 32); | |
| const material = new THREE.MeshBasicMaterial({ | |
| color: 0x9d00ff, | |
| transparent: true, | |
| opacity: 0.8 | |
| }); | |
| // Create nodes and connections | |
| nodes = []; | |
| lines = []; | |
| for (let i = 0; i < 50; i++) { | |
| const node = new THREE.Mesh(geometry, material.clone()); | |
| node.position.set( | |
| (Math.random() - 0.5) * 10, | |
| (Math.random() - 0.5) * 10, | |
| (Math.random() - 0.5) * 10 | |
| ); | |
| node.userData.speed = Math.random() * 0.01 + 0.005; | |
| node.userData.direction = new THREE.Vector3( | |
| Math.random() - 0.5, | |
| Math.random() - 0.5, | |
| Math.random() - 0.5 | |
| ).normalize(); | |
| scene.add(node); | |
| nodes.push(node); | |
| // Add connections | |
| if (i > 0) { | |
| const lineMaterial = new THREE.LineBasicMaterial({ | |
| color: 0x0ff0fc, | |
| transparent: true, | |
| opacity: 0.3 | |
| }); | |
| const lineGeometry = new THREE.BufferGeometry().setFromPoints([ | |
| nodes[Math.floor(Math.random() * i)].position, | |
| node.position | |
| ]); | |
| const line = new THREE.Line(lineGeometry, lineMaterial); | |
| scene.add(line); | |
| lines.push(line); | |
| } | |
| } | |
| // Add central glowing sphere | |
| const centerSphere = new THREE.Mesh( | |
| new THREE.SphereGeometry(0.5, 32, 32), | |
| new THREE.MeshBasicMaterial({ | |
| color: 0x0ff0fc, | |
| transparent: true, | |
| opacity: 0.7 | |
| }) | |
| ); | |
| centerSphere.userData.isCenter = true; | |
| scene.add(centerSphere); | |
| } | |
| function onWindowResize() { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| } | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| // Calculate scroll progress (0 to 1) | |
| const scrollProgress = scrollY / (document.body.scrollHeight - window.innerHeight); | |
| // Update nodes based on scroll | |
| nodes.forEach((node, i) => { | |
| const scrollEffect = 1 + Math.sin(scrollProgress * Math.PI * 2 + i * 0.1) * 0.5; | |
| node.scale.set(scrollEffect, scrollEffect, scrollEffect); | |
| // Add some subtle movement | |
| const time = Date.now() * 0.001; | |
| node.position.x += Math.sin(time * 0.1 + i) * 0.01; | |
| node.position.y += Math.cos(time * 0.15 + i) * 0.01; | |
| node.position.z += Math.sin(time * 0.2 + i) * 0.01; | |
| }); | |
| // Update lines opacity based on scroll | |
| lines.forEach(line => { | |
| line.material.opacity = 0.3 + Math.sin(scrollProgress * Math.PI) * 0.2; | |
| }); | |
| // Rotate central sphere based on scroll | |
| scene.traverse(obj => { | |
| if (obj.userData.isCenter) { | |
| obj.rotation.y = scrollProgress * Math.PI * 2; | |
| } | |
| }); | |
| // Update camera position based on scroll | |
| camera.position.z = 5 + Math.sin(scrollProgress * Math.PI) * 3; | |
| camera.position.y = Math.sin(scrollProgress * Math.PI) * 2; | |
| controls.update(); | |
| renderer.render(scene, camera); | |
| } | |
| // Track scroll position | |
| window.addEventListener('scroll', () => { | |
| scrollY = window.scrollY; | |
| }); | |
| // Initialize 3D scene and other effects | |
| document.addEventListener('DOMContentLoaded', function() { | |
| init3D(); | |
| // Set up scroll animations | |
| const sections = document.querySelectorAll('section'); | |
| function checkScroll() { | |
| const middleOfViewport = window.innerHeight / 2; | |
| sections.forEach(section => { | |
| const rect = section.getBoundingClientRect(); | |
| const sectionMiddle = rect.top + rect.height / 2; | |
| const distanceFromCenter = Math.abs(middleOfViewport - sectionMiddle); | |
| if (distanceFromCenter < window.innerHeight * 0.3) { | |
| // Active section | |
| section.classList.add('section-active'); | |
| section.classList.remove('section-focus', 'section-next'); | |
| } else if (distanceFromCenter < window.innerHeight * 0.6) { | |
| // Next section (semi-focused) | |
| section.classList.add('section-next'); | |
| section.classList.remove('section-active', 'section-focus'); | |
| } else { | |
| // Distant sections (blurred) | |
| section.classList.add('section-focus'); | |
| section.classList.remove('section-active', 'section-next'); | |
| } | |
| }); | |
| } | |
| // Initial check | |
| checkScroll(); | |
| // Check on scroll | |
| window.addEventListener('scroll', checkScroll); | |
| const typingElements = document.querySelectorAll('.typing-text'); | |
| typingElements.forEach(el => { | |
| const text = el.getAttribute('data-text'); | |
| el.style.width = '0'; | |
| el.textContent = text; | |
| setTimeout(() => { | |
| el.style.animation = `typing 3s steps(${text.length}, end)`; | |
| el.style.width = '100%'; | |
| }, 100); | |
| }); | |
| // Initialize other components | |
| feather.replace(); | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ behavior: 'smooth' }); | |
| document.getElementById('mobile-menu').classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // Intersection Observer for animations | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-fadeInUp'); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| document.querySelectorAll('.card-hover').forEach(card => { | |
| observer.observe(card); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |