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>Resource Links | SDGLIV</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> | |
| <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: #0a0a16; | |
| color: #e0e0ff; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3d8dff 0%, #8b5cf6 50%, #ec4899 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .futuristic-card { | |
| backdrop-filter: blur(16px); | |
| background: rgba(15, 23, 42, 0.7); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .futuristic-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(61, 141, 255, 0.2); | |
| } | |
| .link-card:hover .link-icon { | |
| transform: translateX(5px); | |
| } | |
| </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"> | |
| Singularity<span class="text-white">Horizon</span> | |
| </a> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-center space-x-8"> | |
| <a href="index.html" class="text-white hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Home</a> | |
| <a href="links.html" class="text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Links</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> | |
| </nav> | |
| <!-- Main Content --> | |
| <section class="min-h-screen pt-32 pb-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6"> | |
| <span class="gradient-text">Resource</span> | |
| <span class="text-white">Links</span> | |
| </h1> | |
| <p class="text-xl text-white/80 max-w-3xl mx-auto"> | |
| Curated collection of valuable resources about the technological singularity and future technologies. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- AI/ML Section --> | |
| <div class="futuristic-card p-6 rounded-xl"> | |
| <h3 class="text-xl font-bold text-white mb-4 flex items-center"> | |
| <i data-feather="cpu" class="mr-2 text-blue-400"></i> | |
| AI & Machine Learning | |
| </h3> | |
| <div class="space-y-3"> | |
| <a href="https://openai.com/research" class="link-card flex items-center text-white/80 hover:text-white transition"> | |
| <span>OpenAI Research</span> | |
| <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i> | |
| </a> | |
| <a href="https://deepmind.com/research" class="link-card flex items-center text-white/80 hover:text-white transition"> | |
| <span>DeepMind Research</span> | |
| <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i> | |
| </a> | |
| <a href="https://futureoflife.org" class="link-card flex items-center text-white/80 hover:text-white transition"> | |
| <span>Future of Life Institute</span> | |
| <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Space Exploration --> | |
| <div class="futuristic-card p-6 rounded-xl"> | |
| <h3 class="text-xl font-bold text-white mb-4 flex items-center"> | |
| <i data-feather="globe" class="mr-2 text-purple-400"></i> | |
| Space Exploration | |
| </h3> | |
| <div class="space-y-3"> | |
| <a href="https://www.nasa.gov" class="link-card flex items-center text-white/80 hover:text-white transition"> | |
| <span>NASA Official Site</span> | |
| <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i> | |
| </a> | |
| <a href="https://www.spacex.com" class="link-card flex items-center text-white/80 hover:text-white transition"> | |
| <span>SpaceX</span> | |
| <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i> | |
| </a> | |
| <a href="https://mars.nasa.gov" class="link-card flex items-center text-white/80 hover:text-white transition"> | |
| <span>Mars Exploration Program</span> | |
| <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Quantum Computing --> | |
| <div class="futuristic-card p-6 rounded-xl"> | |
| <h3 class="text-xl font-bold text-white mb-4 flex items-center"> | |
| <i data-feather="activity" class="mr-2 text-pink-400"></i> | |
| Quantum Computing | |
| </h3> | |
| <div class="space-y-3"> | |
| <a href="https://quantum-computing.ibm.com" class="link-card flex items-center text-white/80 hover:text-white transition"> | |
| <span>IBM Quantum</span> | |
| <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i> | |
| </a> | |
| <a href="https://quantumai.google" class="link-card flex items-center text-white/80 hover:text-white transition"> | |
| <span>Google Quantum AI</span> | |
| <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i> | |
| </a> | |
| <a href="https://www.quantum.gov" class="link-card flex items-center text-white/80 hover:text-white transition"> | |
| <span>National Quantum Initiative</span> | |
| <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Futurism & Ethics --> | |
| <div class="futuristic-card p-6 rounded-xl"> | |
| <h3 class="text-xl font-bold text-white mb-4 flex items-center"> | |
| <i data-feather="zap" class="mr-2 text-yellow-400"></i> | |
| Futurism & Ethics | |
| </h3> | |
| <div class="space-y-3"> | |
| <a href="https://www.singularityweblog.com" class="link-card flex items-center text-white/80 hover:text-white transition"> | |
| <span>Singularity Weblog</span> | |
| <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i> | |
| </a> | |
| <a href="https://www.kurzweilai.net" class="link-card flex items-center text-white/80 hover:text-white transition"> | |
| <span>KurzweilAI</span> | |
| <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i> | |
| </a> | |
| <a href="https://futureoflife.org" class="link-card flex items-center text-white/80 hover:text-white transition"> | |
| <span>Future of Humanity Institute</span> | |
| <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Neuroscience --> | |
| <div class="futuristic-card p-6 rounded-xl"> | |
| <h3 class="text-xl font-bold text-white mb-4 flex items-center"> | |
| <i data-feather="brain" class="mr-2 text-green-400"></i> | |
| Neuroscience | |
| </h3> | |
| <div class="space-y-3"> | |
| <a href="https://www.braininitiative.org" class="link-card flex items-center text-white/80 hover:text-white transition"> | |
| <span>BRAIN Initiative</span> | |
| <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i> | |
| </a> | |
| <a href="https://neuralink.com" class="link-card flex items-center text-white/80 hover:text-white transition"> | |
| <span>Neuralink</span> | |
| <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i> | |
| </a> | |
| <a href="https://www.neuroscienceblueprint.nih.gov" class="link-card flex items-center text-white/80 hover:text-white transition"> | |
| <span>NIH Neuroscience</span> | |
| <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Energy & Environment --> | |
| <div class="futuristic-card p-6 rounded-xl"> | |
| <h3 class="text-xl font-bold text-white mb-4 flex items-center"> | |
| <i data-feather="wind" class="mr-2 text-cyan-400"></i> | |
| Energy & Environment | |
| </h3> | |
| <div class="space-y-3"> | |
| <a href="https://www.iter.org" class="link-card flex items-center text-white/80 hover:text-white transition"> | |
| <span>ITER Fusion Project</span> | |
| <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i> | |
| </a> | |
| <a href="https://www.climate.gov" class="link-card flex items-center text-white/80 hover:text-white transition"> | |
| <span>Climate.gov</span> | |
| <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i> | |
| </a> | |
| <a href="https://www.drawdown.org" class="link-card flex items-center text-white/80 hover:text-white transition"> | |
| <span>Project Drawdown</span> | |
| <i data-feather="arrow-up-right" class="link-icon ml-2 w-4 h-4 transition-transform"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </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"> | |
| <div class="font-bold text-xl gradiant-text"> | |
| Singularity<span class="text-white">Horizon</span> | |
| </div> | |
| <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"> | |
| © 2025 Sustainable Development Governance and Law Association – Vietnam National Branch. 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="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 | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |