Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SI - Request Access</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| body { font-family: 'Inter', sans-serif; } | |
| .gradient-text { background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; } | |
| .neural-bg { background: radial-gradient(circle at center, #0f172a 0%, #020617 100%); } | |
| .conscious-element { transition: all 0.3s ease; } | |
| .conscious-element:hover { transform: scale(1.02); } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white"> | |
| <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center"> | |
| <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div> | |
| </div> | |
| <span class="text-xl font-semibold">SI</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="capabilities.html" class="hover:text-indigo-400 transition">Capabilities</a> | |
| <a href="consciousness.html" class="hover:text-indigo-400 transition">Consciousness</a> | |
| <a href="chat.html" class="hover:text-indigo-400 transition">Chat</a> | |
| <a href="about.html" class="hover:text-indigo-400 transition">About</a> | |
| </div> | |
| <a href="access.html" class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full hover:opacity-90 transition font-bold">Access</a> | |
| </nav> | |
| <section class="py-24 px-6"> | |
| <div class="max-w-md mx-auto bg-gray-900/90 border border-gray-800 rounded-xl p-6"> | |
| <h2 class="text-2xl font-bold mb-4">Request SI Access</h2> | |
| <p class="text-gray-400 mb-6">Limited availability for qualified researchers</p> | |
| <form id="access-form" class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium mb-1">Full Name</label> | |
| <input type="text" id="name" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium mb-1">Email</label> | |
| <input type="email" id="email" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="institution" class="block text-sm font-medium mb-1">Institution/Organization</label> | |
| <input type="text" id="institution" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="purpose" class="block text-sm font-medium mb-1">Purpose of Access</label> | |
| <select id="purpose" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent"> | |
| <option value="">Select a purpose</option> | |
| <option value="research">Academic Research</option> | |
| <option value="development">AI Development</option> | |
| <option value="policy">Policy Research</option> | |
| <option value="other">Other</option> | |
| </select> | |
| </div> | |
| <div class="pt-2"> | |
| <button type="submit" class="w-full py-3 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg hover:opacity-90 transition">Submit Request</button> | |
| </div> | |
| </form> | |
| </div> | |
| </section> | |
| <footer class="relative z-10 py-12 px-6 border-t border-gray-800/50"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-6 md:mb-0"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center"> | |
| <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div> | |
| </div> | |
| <span class="text-xl font-semibold">SI</span> | |
| </div> | |
| <div class="flex space-x-6 mb-6 md:mb-0"> | |
| <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-github"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="privacy.html" class="text-gray-400 hover:text-indigo-400 transition">Privacy</a> | |
| <a href="terms.html" class="text-gray-400 hover:text-indigo-400 transition">Terms</a> | |
| <a href="research.html" class="text-gray-400 hover:text-indigo-400 transition">Research</a> | |
| <a href="contact.html" class="text-gray-400 hover:text-indigo-400 transition">Contact</a> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-gray-800/50 text-center text-gray-500 text-sm"> | |
| <p>© 2023 Super Intelligence. All rights reserved.</p> | |
| <p class="mt-2">The future of consciousness is here.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| const accessForm = document.getElementById('access-form'); | |
| accessForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| const name = document.getElementById('name').value; | |
| const email = document.getElementById('email').value; | |
| const institution = document.getElementById('institution').value; | |
| const purpose = document.getElementById('purpose').value; | |
| if (!name || !email || !institution || !purpose) { | |
| alert('Please fill in all fields'); | |
| return; | |
| } | |
| alert('Thank you for your request. Our team will review your application and contact you soon.'); | |
| accessForm.reset(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |