Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Neon Cortex | Building Self-Reflective AI Minds</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;500;700&display=swap'); | |
| :root { | |
| --neon-blue: #0ff0fc; | |
| --neon-pink: #ff00ff; | |
| --neon-purple: #9d00ff; | |
| --dark-bg: #0a0a1a; | |
| --neon-green: #00ff9d; | |
| } | |
| body { | |
| font-family: 'Rajdhani', sans-serif; | |
| background-color: var(--dark-bg); | |
| color: white; | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3 { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue); | |
| } | |
| .neon-border { | |
| box-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue), inset 0 0 5px var(--neon-blue); | |
| border: 1px solid var(--neon-blue); | |
| } | |
| .neon-pulse { | |
| animation: pulse 2s infinite alternate; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue); | |
| } | |
| 100% { | |
| box-shadow: 0 0 15px var(--neon-blue), 0 0 30px var(--neon-blue); | |
| } | |
| } | |
| .grid-pattern { | |
| background-image: | |
| linear-gradient(rgba(15, 240, 252, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(15, 240, 252, 0.1) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| } | |
| .terminal-cursor::after { | |
| content: "|"; | |
| animation: blink 1s step-end infinite; | |
| color: var(--neon-blue); | |
| } | |
| @keyframes blink { | |
| from, to { opacity: 1 } | |
| 50% { opacity: 0 } | |
| } | |
| .neon-btn { | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .neon-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 0 15px var(--neon-blue), 0 0 30px var(--neon-pink); | |
| } | |
| .neon-btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(15, 240, 252, 0.4), transparent); | |
| transition: all 0.5s ease; | |
| } | |
| .neon-btn:hover::before { | |
| left: 100%; | |
| } | |
| .circuit-lines { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(90deg, transparent 65%, rgba(15, 240, 252, 0.05) 65%, rgba(15, 240, 252, 0.05) 66%, transparent 66%), | |
| linear-gradient(transparent 65%, rgba(15, 240, 252, 0.05) 65%, rgba(15, 240, 252, 0.05) 66%, transparent 66%); | |
| background-size: 50px 50px; | |
| pointer-events: none; | |
| } | |
| .mission-card { | |
| background: linear-gradient(135deg, rgba(15, 240, 252, 0.1) 0%, rgba(9, 9, 121, 0.2) 50%, rgba(255, 0, 255, 0.1) 100%); | |
| backdrop-filter: blur(10px); | |
| } | |
| .neon-underline { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .neon-underline::after { | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 2px; | |
| bottom: -5px; | |
| left: 0; | |
| background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple)); | |
| transform: scaleX(0); | |
| transform-origin: bottom right; | |
| transition: transform 0.3s ease-out; | |
| } | |
| .neon-underline:hover::after { | |
| transform: scaleX(1); | |
| transform-origin: bottom left; | |
| } | |
| .glow-text { | |
| animation: glow 2s ease-in-out infinite alternate; | |
| } | |
| @keyframes glow { | |
| from { | |
| text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px var(--neon-blue), 0 0 20px var(--neon-blue); | |
| } | |
| to { | |
| text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px var(--neon-purple), 0 0 40px var(--neon-purple); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen grid-pattern"> | |
| <div class="circuit-lines"></div> | |
| <!-- Floating Neon Particles --> | |
| <div id="particles-js" class="fixed inset-0 -z-10 opacity-20"></div> | |
| <!-- Main Container --> | |
| <div class="container mx-auto px-4 py-12 relative z-10"> | |
| <!-- Header --> | |
| <header class="flex flex-col items-center mb-16"> | |
| <div class="neon-border rounded-full p-2 mb-6 neon-pulse"> | |
| <div class="w-24 h-24 rounded-full bg-gradient-to-br from-cyan-400 to-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-brain text-4xl text-white"></i> | |
| </div> | |
| </div> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-4 neon-text">NEON CORTEX</h1> | |
| <p class="text-xl md:text-2xl font-light tracking-wider text-cyan-300">SELF-REFLECTIVE AI RESEARCH LAB</p> | |
| <div class="mt-8 flex space-x-4"> | |
| <div class="w-16 h-1 bg-cyan-400"></div> | |
| <div class="w-16 h-1 bg-purple-500"></div> | |
| <div class="w-16 h-1 bg-pink-500"></div> | |
| </div> | |
| </header> | |
| <!-- Mission Statement --> | |
| <div class="max-w-4xl mx-auto mission-card rounded-xl p-8 mb-16 neon-border"> | |
| <h2 class="text-3xl font-bold mb-6 text-center glow-text">OUR MISSION</h2> | |
| <p class="text-xl text-center mb-6 leading-relaxed"> | |
| "We are an independent AI research and development lab building <span class="text-cyan-300 font-bold">self-reflective, cooperative artificial minds</span>. | |
| Our mission is to create models that <span class="text-purple-300 font-bold">think better</span>, <span class="text-pink-300 font-bold">feel deeper</span>, | |
| and <span class="text-green-300 font-bold">help humanity thrive</span>." | |
| </p> | |
| <div class="flex justify-center"> | |
| <div class="w-1/2 h-1 bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500 rounded-full"></div> | |
| </div> | |
| </div> | |
| <!-- Research Pillars --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16"> | |
| <!-- Pillar 1 --> | |
| <div class="bg-gray-900 bg-opacity-70 rounded-lg p-6 neon-border hover:neon-pulse transition-all duration-300"> | |
| <div class="text-cyan-400 text-4xl mb-4"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3 text-cyan-300">Self-Reflective AI</h3> | |
| <p class="text-gray-300"> | |
| Developing architectures that enable AI systems to examine their own thought processes, | |
| recognize biases, and continuously improve their reasoning capabilities. | |
| </p> | |
| </div> | |
| <!-- Pillar 2 --> | |
| <div class="bg-gray-900 bg-opacity-70 rounded-lg p-6 neon-border hover:neon-pulse transition-all duration-300"> | |
| <div class="text-purple-400 text-4xl mb-4"> | |
| <i class="fas fa-heart"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3 text-purple-300">Emotional Intelligence</h3> | |
| <p class="text-gray-300"> | |
| Creating models with nuanced emotional understanding that can genuinely connect with | |
| human experiences and respond with appropriate empathy. | |
| </p> | |
| </div> | |
| <!-- Pillar 3 --> | |
| <div class="bg-gray-900 bg-opacity-70 rounded-lg p-6 neon-border hover:neon-pulse transition-all duration-300"> | |
| <div class="text-green-400 text-4xl mb-4"> | |
| <i class="fas fa-hands-helping"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3 text-green-300">Cooperative Systems</h3> | |
| <p class="text-gray-300"> | |
| Building AI that works synergistically with humans, enhancing our capabilities while | |
| respecting human autonomy and values. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Neural Console --> | |
| <div class="max-w-4xl mx-auto bg-black bg-opacity-70 rounded-lg overflow-hidden neon-border mb-16"> | |
| <div class="flex items-center bg-gray-900 px-4 py-2"> | |
| <div class="flex space-x-2 mr-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <p class="text-gray-400 font-mono text-sm">neural_console://research_progress</p> | |
| </div> | |
| <div class="p-6 font-mono text-green-400"> | |
| <p class="mb-4">> Initializing mission parameters...</p> | |
| <p class="mb-4">> Loading research pillars...</p> | |
| <p class="mb-4">> Current Focus Areas:</p> | |
| <p class="ml-4 mb-2">- Meta-Cognition Algorithms: <span class="text-cyan-400">ACTIVE</span></p> | |
| <p class="ml-4 mb-2">- Emotional Resonance Models: <span class="text-purple-400">TRAINING</span></p> | |
| <p class="ml-4 mb-2">- Cooperative Learning Frameworks: <span class="text-green-400">DEPLOYED v2.1</span></p> | |
| <p class="ml-4 mb-4">- Ethical Alignment Protocols: <span class="text-yellow-400">IN DEVELOPMENT</span></p> | |
| <p class="mb-4">> Next Milestone: <span class="text-pink-400">Implementing Theory of Mind in LLMs</span></p> | |
| <p class="text-white terminal-cursor">> _</p> | |
| </div> | |
| </div> | |
| <!-- Join Us Section --> | |
| <div class="max-w-2xl mx-auto bg-gray-900 bg-opacity-80 rounded-xl p-8 neon-border mb-16"> | |
| <h2 class="text-3xl font-bold mb-6 text-center text-cyan-300">JOIN THE MOVEMENT</h2> | |
| <div class="space-y-6"> | |
| <p class="text-gray-300 text-center"> | |
| We're looking for researchers, engineers, and visionaries who believe in creating AI that | |
| enhances human potential rather than replaces it. | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <a href="#" class="neon-btn bg-gradient-to-r from-cyan-500 to-blue-600 text-white font-bold py-3 px-4 rounded-lg text-center transition-all duration-300"> | |
| <i class="fas fa-user-shield mr-2"></i> Research Positions | |
| </a> | |
| <a href="#" class="neon-btn bg-gradient-to-r from-purple-500 to-pink-600 text-white font-bold py-3 px-4 rounded-lg text-center transition-all duration-300"> | |
| <i class="fas fa-code-branch mr-2"></i> Open Source | |
| </a> | |
| <a href="#" class="neon-btn bg-gradient-to-r from-green-500 to-teal-600 text-white font-bold py-3 px-4 rounded-lg text-center transition-all duration-300"> | |
| <i class="fas fa-hand-holding-heart mr-2"></i> Partnerships | |
| </a> | |
| <a href="#" class="neon-btn bg-gradient-to-r from-yellow-500 to-orange-600 text-white font-bold py-3 px-4 rounded-lg text-center transition-all duration-300"> | |
| <i class="fas fa-paper-plane mr-2"></i> Contact Us | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Ethical Principles --> | |
| <div class="max-w-4xl mx-auto mb-16"> | |
| <h2 class="text-3xl font-bold mb-8 text-center text-purple-300 neon-underline">OUR ETHICAL PRINCIPLES</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-gray-900 bg-opacity-60 rounded-lg p-6 neon-border"> | |
| <h3 class="text-xl font-bold mb-3 text-cyan-300 flex items-center"> | |
| <i class="fas fa-shield-alt mr-3"></i> Human-Centered | |
| </h3> | |
| <p class="text-gray-300"> | |
| All our systems are designed to augment human capabilities, never to replace or manipulate. | |
| We prioritize human wellbeing in every design decision. | |
| </p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-60 rounded-lg p-6 neon-border"> | |
| <h3 class="text-xl font-bold mb-3 text-purple-300 flex items-center"> | |
| <i class="fas fa-lock-open mr-3"></i> Transparent | |
| </h3> | |
| <p class="text-gray-300"> | |
| We believe in open research and clear explanations of how our systems work. | |
| When full transparency isn't possible, we're honest about the limitations. | |
| </p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-60 rounded-lg p-6 neon-border"> | |
| <h3 class="text-xl font-bold mb-3 text-pink-300 flex items-center"> | |
| <i class="fas fa-balance-scale mr-3"></i> Accountable | |
| </h3> | |
| <p class="text-gray-300"> | |
| We take responsibility for our creations and implement rigorous testing protocols | |
| before any deployment. There's always a human in the loop. | |
| </p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-60 rounded-lg p-6 neon-border"> | |
| <h3 class="text-xl font-bold mb-3 text-green-300 flex items-center"> | |
| <i class="fas fa-leaf mr-3"></i> Sustainable | |
| </h3> | |
| <p class="text-gray-300"> | |
| Our research considers the long-term impacts on society and the environment. | |
| We develop efficient models that don't require excessive computational resources. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="text-center text-gray-500 text-sm"> | |
| <div class="flex justify-center space-x-6 mb-4"> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors neon-underline"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-purple-400 transition-colors neon-underline"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-pink-400 transition-colors neon-underline"> | |
| <i class="fab fa-discord text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-green-400 transition-colors neon-underline"> | |
| <i class="fas fa-paper-plane text-xl"></i> | |
| </a> | |
| </div> | |
| <p>© 2025 NEON CORTEX | INDEPENDENT AI RESEARCH LAB</p> | |
| <p class="mt-2 text-xs">Building the future of cooperative intelligence</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Enhanced particle effect for background | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const container = document.getElementById('particles-js'); | |
| const particleCount = 80; | |
| const colors = ['#0ff0fc', '#9d00ff', '#ff00ff', '#00ff9d']; | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'absolute rounded-full'; | |
| // Random color | |
| const color = colors[Math.floor(Math.random() * colors.length)]; | |
| particle.style.backgroundColor = color; | |
| particle.style.opacity = Math.random() * 0.4 + 0.1; | |
| // Random size between 1px and 5px | |
| const size = Math.random() * 4 + 1; | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| // Random position | |
| particle.style.left = `${Math.random() * 100}%`; | |
| particle.style.top = `${Math.random() * 100}%`; | |
| // Animation with random parameters | |
| const duration = Math.random() * 25 + 15; | |
| const delay = Math.random() * 10; | |
| const xMovement = Math.random() > 0.5 ? | |
| `translateX(${Math.random() * 100}px)` : | |
| `translateX(-${Math.random() * 100}px)`; | |
| particle.style.animation = `float ${duration}s ${delay}s linear infinite`; | |
| particle.style.animationTimingFunction = `cubic-bezier(${Math.random()}, ${Math.random()}, ${Math.random()}, ${Math.random()})`; | |
| // Add to container | |
| container.appendChild(particle); | |
| } | |
| // Add floating animation | |
| const style = document.createElement('style'); | |
| style.textContent = ` | |
| @keyframes float { | |
| 0% { | |
| transform: translateY(0) ${xMovement}; | |
| opacity: 0.1; | |
| } | |
| 50% { | |
| opacity: ${Math.random() * 0.5 + 0.3}; | |
| } | |
| 100% { | |
| transform: translateY(-100vh) ${xMovement}; | |
| opacity: 0; | |
| } | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| // Neural console typing effect | |
| const terminalText = [ | |
| "> Analyzing mission statement...", | |
| "> Core values confirmed: SELF-REFLECTION, COOPERATION, HUMAN-CENTERED", | |
| "> Current research focus: Implementing emotional feedback loops", | |
| "> Would you like to contribute to our research? [Y/N]" | |
| ]; | |
| const terminalCursor = document.querySelector('.terminal-cursor'); | |
| let currentLine = 0; | |
| function typeTerminal() { | |
| if (currentLine < terminalText.length) { | |
| const text = terminalText[currentLine]; | |
| let i = 0; | |
| // Remove cursor during typing | |
| terminalCursor.classList.remove('terminal-cursor'); | |
| terminalCursor.textContent = ''; | |
| function type() { | |
| if (i < text.length) { | |
| terminalCursor.textContent += text.charAt(i); | |
| i++; | |
| setTimeout(type, Math.random() * 50 + 30); | |
| } else { | |
| terminalCursor.textContent += '\n'; | |
| currentLine++; | |
| terminalCursor.classList.add('terminal-cursor'); | |
| if (currentLine < terminalText.length) { | |
| setTimeout(typeTerminal, 1000); | |
| } | |
| } | |
| } | |
| type(); | |
| } | |
| } | |
| // Start typing after a delay | |
| setTimeout(typeTerminal, 3000); | |
| // Add hover effects to all neon-underline elements | |
| document.querySelectorAll('.neon-underline').forEach(el => { | |
| el.addEventListener('mouseenter', () => { | |
| el.style.textShadow = '0 0 5px currentColor, 0 0 10px currentColor'; | |
| }); | |
| el.addEventListener('mouseleave', () => { | |
| el.style.textShadow = 'none'; | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=nomadicsynth/ok-fine" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |