Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SDGLA | Vietnam</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://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.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=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background-color: #050510; | |
| color: #e0e0ff; | |
| overflow-x: hidden; | |
| background-image: radial-gradient(circle at 50% 50%, rgba(61, 141, 255, 0.06) 0%, transparent 70%); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3d8dff 0%, #8b5cf6 50%, #d946ef 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| font-weight: 700; | |
| } | |
| .glow { | |
| text-shadow: 0 0 15px rgba(61, 141, 255, 0.6); | |
| } | |
| .futuristic-card { | |
| backdrop-filter: blur(16px); | |
| background: rgba(10, 15, 30, 0.8); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| transition: all 0.3s ease; | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); | |
| border-radius: 12px; | |
| } | |
| .futuristic-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 30px rgba(61, 141, 255, 0.15); | |
| border-color: rgba(61, 141, 255, 0.3); | |
| } | |
| .gradient-border { | |
| position: relative; | |
| } | |
| .gradient-border::before { | |
| content: ''; | |
| position: absolute; | |
| top: -1px; | |
| left: -1px; | |
| right: -1px; | |
| bottom: -1px; | |
| border-radius: 0.75rem; | |
| background: linear-gradient(90deg, #3d8dff, #8b5cf6, #d946ef); | |
| z-index: -1; | |
| opacity: 0.6; | |
| transition: opacity 0.3s ease; | |
| } | |
| .gradient-border:hover::before { | |
| opacity: 0.8; | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased"> | |
| <!-- Vanta.js Background --> | |
| <div id="vanta-bg" class="fixed inset-0 -z-10"></div> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full backdrop-blur-md bg-black/50 border-b border-white/10 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <a href="index.html" class="flex-shrink-0 font-bold text-xl gradiant-text glow"> | |
| Sustainable Development Governance and Law<span class="text-white"> Initiative</span> | |
| </a> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-center space-x-8"> | |
| <a href="index.html#home" class="nav-link text-white hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Home</a> | |
| <a href="index.html#vision" class="nav-link text-white hover:text-purple-300 px-3 py-2 rounded-md text-sm font-medium">Vision</a> | |
| <a href="technologies.html" class="nav-link text-white hover:text-pink-300 px-3 py-2 rounded-md text-sm font-medium">Technologies</a> | |
| <a href="index.html#timeline" class="nav-link text-white hover:text-indigo-300 px-3 py-2 rounded-md text-sm font-medium">Timeline</a> | |
| <a href="index.html#contact" class="nav-link text-white hover:text-cyan-300 px-3 py-2 rounded-md text-sm font-medium">Contact</a> | |
| <a href="links.html" class="nav-link text-white hover:text-green-300 px-3 py-2 rounded-md text-sm font-medium">Resources</a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-white hover:text-gray-300 focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-black/90 border-t border-white/10"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="index.html#home" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white/10">Home</a> | |
| <a href="index.html#vision" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white/10">Vision</a> | |
| <a href="technologies.html" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white/10">Technologies</a> | |
| <a href="index.html#timeline" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white/10">Timeline</a> | |
| <a href="index.html#contact" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white/10">Contact</a> | |
| <a href="links.html" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white/10">Resources</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Technologies Main Section --> | |
| <section class="min-h-screen pt-32 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight"> | |
| <span class="gradient-text glow">Advanced</span> | |
| <span class="text-white">Technologies</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-white/90 max-w-3xl mx-auto mb-12"> | |
| The groundbreaking innovations that will shape our future civilization and propel humanity into the cosmos. | |
| </p> | |
| </div> | |
| <!-- Expanded Technologies Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16"> | |
| <div class="gradient-border p-1 rounded-xl"> | |
| <div class="futuristic-card p-8 rounded-lg h-full"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center mb-6 mx-auto"> | |
| <i data-feather="radio" class="w-8 h-8 text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-white mb-4 text-center">Quantum Communication</h3> | |
| <p class="text-white/70 mb-6"> | |
| Instantaneous, unhackable communication networks using quantum entanglement principles for interplanetary data transfer. | |
| </p> | |
| <div class="flex justify-center flex-wrap gap-2"> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-blue-900/30 text-blue-400">Quantum</span> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-purple-900/30 text-purple-400">Networking</span> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-indigo-900/30 text-indigo-400">Space</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="gradient-border p-1 rounded-xl"> | |
| <div class="futuristic-card p-8 rounded-lg h-full"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-600 rounded-lg flex items-center justify-center mb-6 mx-auto"> | |
| <i data-feather="cpu" class="w-8 h-8 text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-white mb-4 text-center">Neural Lace</h3> | |
| <p class="text-white/70 mb-6"> | |
| Nanoscale brain-computer interfaces enabling direct neural communication with AI systems and cloud networks. | |
| </p> | |
| <div class="flex justify-center flex-wrap gap-2"> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-pink-900/30 text-pink-400">Biotech</span> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-fuchsia-900/30 text-fuchsia-400">AI</span> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-violet-900/30 text-violet-400">Neuroscience</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="gradient-border p-1 rounded-xl"> | |
| <div class="futuristic-card p-8 rounded-lg h-full"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-pink-500 to-red-600 rounded-lg flex items-center justify-center mb-6 mx-auto"> | |
| <i data-feather="wind" class="w-8 h-8 text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-white mb-4 text-center">Atmospheric Engineering</h3> | |
| <p class="text-white/70 mb-6"> | |
| Programmable nanobot swarms that modify atmospheric composition for climate control and terraforming. | |
| </p> | |
| <div class="flex justify-center flex-wrap gap-2"> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-red-900/30 text-red-400">Climate</span> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-orange-900/30 text-orange-400">Nano</span> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-amber-900/30 text-amber-400">Geoengineering</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="gradient-border p-1 rounded-xl"> | |
| <div class="futuristic-card p-8 rounded-lg h-full"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-red-500 to-orange-600 rounded-lg flex items-center justify-center mb-6 mx-auto"> | |
| <i data-feather="sun" class="w-8 h-8 text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-white mb-4 text-center">Dyson Swarms</h3> | |
| <p class="text-white/70 mb-6"> | |
| Orbital solar collectors harvesting near-unlimited energy from stars, enabling Kardashev Type II civilization. | |
| </p> | |
| <div class="flex justify-center flex-wrap gap-2"> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-yellow-900/30 text-yellow-400">Energy</span> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-lime-900/30 text-lime-400">Space</span> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-emerald-900/30 text-emerald-400">Megastructures</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="gradient-border p-1 rounded-xl"> | |
| <div class="futuristic-card p-8 rounded-lg h-full"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-orange-500 to-yellow-600 rounded-lg flex items-center justify-center mb-6 mx-auto"> | |
| <i data-feather="dna" class="w-8 h-8 text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-white mb-4 text-center">Genetic Optimization</h3> | |
| <p class="text-white/70 mb-6"> | |
| CRISPR 3.0 and epigenetic reprogramming eliminating genetic diseases and enhancing human capabilities. | |
| </p> | |
| <div class="flex justify-center flex-wrap gap-2"> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-green-900/30 text-green-400">Biotech</span> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-teal-900/30 text-teal-400">Genetics</span> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-cyan-900/30 text-cyan-400">Longevity</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="gradient-border p-1 rounded-xl"> | |
| <div class="futuristic-card p-8 rounded-lg h-full"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-yellow-500 to-green-600 rounded-lg flex items-center justify-center mb-6 mx-auto"> | |
| <i data-feather="atom" class="w-8 h-8 text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-white mb-4 text-center">Quantum AI</h3> | |
| <p class="text-white/70 mb-6"> | |
| Artificial superintelligence running on quantum neural networks solving currently intractable problems. | |
| </p> | |
| <div class="flex justify-center flex-wrap gap-2"> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-blue-900/30 text-blue-400">Quantum</span> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-indigo-900/30 text-indigo-400">AI</span> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-purple-900/30 text-purple-400">Computing</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <a href="index.html" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full text-white bg-gradient-to-r from-blue-500 to-purple-600 hover:opacity-90 shadow-lg"> | |
| Return to Home | |
| <i data-feather="arrow-left" class="mr-2 w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 px-4 sm:px-6 lg:px-8 border-t border-white/10"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <a href="index.html" class="font-bold text-xl gradiant-text glow"> | |
| Singularity<span class="text-white">Horizon</span> | |
| </a> | |
| <p class="text-white/60 mt-2 text-sm"> | |
| Exploring the frontiers of human potential. | |
| </p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-white/60 hover:text-blue-400 transition duration-300"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-white/60 hover:text-purple-400 transition duration-300"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| <a href="#" class="text-white/60 hover:text-pink-400 transition duration-300"> | |
| <i data-feather="github"></i> | |
| </a> | |
| <a href="#" class="text-white/60 hover:text-green-400 transition duration-300"> | |
| <i data-feather="youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-white/50 text-sm text-center md:text-left"> | |
| © 2023 Singularity Horizon. All rights reserved. | |
| </p> | |
| <div class="mt-4 md:mt-0 flex space-x-6"> | |
| <a href="#" class="text-white/60 hover:text-white text-sm">Privacy Policy</a> | |
| <a href="#" class="text-white/60 hover:text-white text-sm">Terms of Service</a> | |
| <a href="index.html#contact" class="text-white/60 hover:text-white text-sm">Contact</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // 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: 0x3d8dff, | |
| backgroundColor: 0x0a0a16, | |
| size: 0.8 | |
| }); | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Animation for futuristic cards on scroll | |
| document.addEventListener('DOMContentLoaded', function() { | |
| anime({ | |
| targets: '.futuristic-card', | |
| translateY: [50, 0], | |
| opacity: [0, 1], | |
| duration: 1000, | |
| delay: anime.stagger(100), | |
| easing: 'easeOutExpo' | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |