| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Neon Robotics AI</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&display=swap'); |
| |
| body { |
| font-family: 'Orbitron', sans-serif; |
| overflow-x: hidden; |
| color: #00f7ff; |
| } |
| |
| .cyber-text { |
| text-shadow: 0 0 5px #00f7ff, 0 0 10px #00f7ff, 0 0 15px #00f7ff; |
| } |
| |
| .cyber-border { |
| border: 1px solid #00f7ff; |
| box-shadow: 0 0 10px #00f7ff, inset 0 0 10px #00f7ff; |
| } |
| |
| .cyber-glow { |
| box-shadow: 0 0 20px #00f7ff; |
| } |
| |
| .cyber-btn { |
| transition: all 0.3s ease; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .cyber-btn:hover { |
| box-shadow: 0 0 15px #00f7ff, 0 0 30px #00f7ff; |
| transform: translateY(-3px); |
| } |
| |
| .cyber-btn::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: -100%; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(90deg, transparent, rgba(0, 247, 255, 0.4), transparent); |
| transition: all 0.5s ease; |
| } |
| |
| .cyber-btn:hover::before { |
| left: 100%; |
| } |
| |
| .robot-head { |
| perspective: 1000px; |
| } |
| |
| .robot-eye { |
| animation: eye-glow 2s infinite alternate; |
| } |
| |
| @keyframes eye-glow { |
| 0% { box-shadow: 0 0 5px #ff00e6; } |
| 100% { box-shadow: 0 0 20px #ff00e6, 0 0 30px #ff00e6; } |
| } |
| |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); opacity: 1; } |
| 50% { transform: scale(1.05); opacity: 0.7; } |
| 100% { transform: scale(1); opacity: 1; } |
| } |
| |
| .scan-line { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(to bottom, |
| transparent 0%, |
| rgba(0, 247, 255, 0.1) 50%, |
| transparent 100%); |
| background-size: 100% 8px; |
| animation: scan 8s linear infinite; |
| pointer-events: none; |
| } |
| |
| @keyframes scan { |
| 0% { background-position: 0 -50px; } |
| 100% { background-position: 0 calc(100% + 50px); } |
| } |
| |
| .hologram { |
| position: relative; |
| background: rgba(0, 10, 20, 0.7); |
| border: 1px solid #00f7ff; |
| box-shadow: 0 0 20px #00f7ff, inset 0 0 20px #00f7ff; |
| } |
| |
| .hologram::before { |
| content: ''; |
| position: absolute; |
| top: -5px; |
| left: -5px; |
| right: -5px; |
| bottom: -5px; |
| background: linear-gradient(45deg, #00f7ff, #ff00e6, #00f7ff); |
| background-size: 400% 400%; |
| z-index: -1; |
| animation: gradient 15s ease infinite; |
| filter: blur(10px); |
| opacity: 0.7; |
| } |
| |
| @keyframes gradient { |
| 0% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
| |
| .terminal { |
| background-color: rgba(0, 20, 30, 0.9); |
| border: 1px solid #00f7ff; |
| box-shadow: 0 0 15px #00f7ff, inset 0 0 15px #00f7ff; |
| } |
| |
| .terminal-header { |
| background: linear-gradient(to right, #001a33, #003366); |
| border-bottom: 1px solid #00f7ff; |
| } |
| |
| .terminal-body { |
| font-family: 'Courier New', monospace; |
| text-shadow: 0 0 5px #00ff88; |
| } |
| |
| .typewriter { |
| overflow: hidden; |
| border-right: 3px solid #00f7ff; |
| white-space: nowrap; |
| animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; |
| } |
| |
| @keyframes typing { |
| from { width: 0 } |
| to { width: 100% } |
| } |
| |
| @keyframes blink-caret { |
| from, to { border-color: transparent } |
| 50% { border-color: #00f7ff } |
| } |
| |
| .circuit-board { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background-image: |
| linear-gradient(to right, rgba(0, 247, 255, 0.1) 1px, transparent 1px), |
| linear-gradient(to bottom, rgba(0, 247, 255, 0.1) 1px, transparent 1px); |
| background-size: 30px 30px; |
| z-index: -1; |
| } |
| |
| .grid-dots { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background-image: radial-gradient(rgba(0, 247, 255, 0.2) 1px, transparent 1px); |
| background-size: 15px 15px; |
| z-index: -1; |
| } |
| </style> |
| </head> |
| <body class="bg-black min-h-screen relative"> |
| <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div> |
| <div class="circuit-board"></div> |
| <div class="grid-dots"></div> |
| <div class="scan-line"></div> |
| |
| <div class="relative z-10 container mx-auto px-4"> |
| |
| <header class="py-6 flex justify-between items-center border-b border-cyan-400 border-opacity-30"> |
| <div class="flex items-center"> |
| <div class="robot-head mr-4"> |
| <div class="w-12 h-12 bg-gray-800 rounded-full relative cyber-border"> |
| <div class="robot-eye absolute top-3 left-3 w-3 h-3 bg-pink-500 rounded-full"></div> |
| <div class="robot-eye absolute top-3 right-3 w-3 h-3 bg-pink-500 rounded-full"></div> |
| <div class="absolute bottom-3 left-1/2 transform -translate-x-1/2 w-6 h-1 bg-gray-400 rounded-full"></div> |
| </div> |
| </div> |
| <h1 class="text-2xl font-bold cyber-text">NEO<span class="text-pink-500">ROBOTICS</span> AI</h1> |
| </div> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#" class="text-cyan-400 hover:text-pink-500 transition duration-300">HOME</a> |
| <a href="#" class="text-cyan-400 hover:text-pink-500 transition duration-300">SERVICES</a> |
| <a href="#" class="text-cyan-400 hover:text-pink-500 transition duration-300">TECHNOLOGY</a> |
| <a href="#" class="text-cyan-400 hover:text-pink-500 transition duration-300">CONTACT</a> |
| </nav> |
| <button class="md:hidden text-cyan-400"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </header> |
| |
| |
| <section class="py-20 md:py-32 relative"> |
| <div class="absolute -top-20 -left-20 w-64 h-64 bg-cyan-400 rounded-full filter blur-3xl opacity-10"></div> |
| <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-pink-500 rounded-full filter blur-3xl opacity-10"></div> |
| |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-12 md:mb-0"> |
| <h2 class="text-4xl md:text-6xl font-bold mb-6 cyber-text"> |
| <span class="block">THE FUTURE OF</span> |
| <span class="text-pink-500">ROBOTIC INTELLIGENCE</span> |
| </h2> |
| <p class="text-gray-300 mb-8 text-lg leading-relaxed"> |
| Harnessing quantum computing and neural networks to create the next generation of autonomous robotic systems. Our AI learns, adapts, and evolves in real-time. |
| </p> |
| <div class="flex space-x-4"> |
| <button class="cyber-btn bg-transparent border border-cyan-400 text-cyan-400 px-8 py-3 rounded-md font-bold"> |
| EXPLORE |
| </button> |
| <button class="cyber-btn bg-gradient-to-r from-cyan-400 to-pink-500 text-black px-8 py-3 rounded-md font-bold"> |
| DEMO |
| </button> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <div class="relative w-64 h-64 md:w-80 md:h-80"> |
| <div id="robot-container" class="w-full h-full"></div> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <div class="w-16 h-16 md:w-20 md:h-20 bg-black rounded-full border-4 border-cyan-400 flex items-center justify-center pulse"> |
| <i class="fas fa-robot text-cyan-400 text-3xl md:text-4xl"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-16"> |
| <h2 class="text-3xl font-bold text-center mb-16 cyber-text">CORE <span class="text-pink-500">TECHNOLOGIES</span></h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="hologram p-6 rounded-lg relative overflow-hidden"> |
| <div class="absolute top-0 right-0 w-16 h-16 bg-pink-500 transform translate-x-8 -translate-y-8 rotate-45 opacity-20"></div> |
| <div class="flex items-center mb-4"> |
| <div class="mr-4 w-12 h-12 bg-gray-900 rounded-full flex items-center justify-center cyber-border"> |
| <i class="fas fa-brain text-cyan-400 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold cyber-text">NEURAL NETWORKS</h3> |
| </div> |
| <p class="text-gray-300"> |
| Our proprietary neural architecture mimics human brain functions with 10x the processing speed of conventional AI systems. |
| </p> |
| <div class="mt-4 text-pink-500 flex items-center"> |
| <span class="mr-2">LEARN MORE</span> |
| <i class="fas fa-arrow-right"></i> |
| </div> |
| </div> |
| |
| |
| <div class="hologram p-6 rounded-lg relative overflow-hidden"> |
| <div class="absolute top-0 right-0 w-16 h-16 bg-cyan-400 transform translate-x-8 -translate-y-8 rotate-45 opacity-20"></div> |
| <div class="flex items-center mb-4"> |
| <div class="mr-4 w-12 h-12 bg-gray-900 rounded-full flex items-center justify-center cyber-border"> |
| <i class="fas fa-atom text-pink-500 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold cyber-text">QUANTUM COMPUTING</h3> |
| </div> |
| <p class="text-gray-300"> |
| Leveraging quantum bits for unprecedented computational power, solving problems in seconds that would take years. |
| </p> |
| <div class="mt-4 text-cyan-400 flex items-center"> |
| <span class="mr-2">LEARN MORE</span> |
| <i class="fas fa-arrow-right"></i> |
| </div> |
| </div> |
| |
| |
| <div class="hologram p-6 rounded-lg relative overflow-hidden"> |
| <div class="absolute top-0 right-0 w-16 h-16 bg-purple-500 transform translate-x-8 -translate-y-8 rotate-45 opacity-20"></div> |
| <div class="flex items-center mb-4"> |
| <div class="mr-4 w-12 h-12 bg-gray-900 rounded-full flex items-center justify-center cyber-border"> |
| <i class="fas fa-robot text-purple-400 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold cyber-text">AUTONOMOUS SYSTEMS</h3> |
| </div> |
| <p class="text-gray-300"> |
| Self-learning robots that adapt to dynamic environments with human-like decision-making capabilities. |
| </p> |
| <div class="mt-4 text-purple-400 flex items-center"> |
| <span class="mr-2">LEARN MORE</span> |
| <i class="fas fa-arrow-right"></i> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-16"> |
| <div class="terminal rounded-lg overflow-hidden"> |
| <div class="terminal-header px-4 py-2 flex items-center"> |
| <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> |
| <div class="text-gray-300 text-sm">neorobotics-ai-terminal</div> |
| </div> |
| <div class="terminal-body p-4"> |
| <div class="mb-4"> |
| <span class="text-green-400">user@neorobotics:~$</span> |
| <span class="typewriter">initialize_system --ai-core=quantum_neural_network</span> |
| </div> |
| <div class="text-cyan-300 mb-2">> SYSTEM INITIALIZATION SEQUENCE STARTED...</div> |
| <div class="text-cyan-300 mb-2">> LOADING QUANTUM PROCESSORS... <span class="text-green-400">DONE</span></div> |
| <div class="text-cyan-300 mb-2">> CONNECTING NEURAL NODES... <span class="text-green-400">DONE</span></div> |
| <div class="text-cyan-300 mb-2">> SYNCHRONIZING AI CORES... <span class="text-green-400">DONE</span></div> |
| <div class="text-cyan-300 mb-4">> SYSTEM READY. AWAITING COMMANDS...</div> |
| <div> |
| <span class="text-green-400">user@neorobotics:~$</span> |
| <span class="text-white">_</span> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-16"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> |
| <div class="cyber-border p-6 rounded-lg"> |
| <div class="text-4xl font-bold text-cyan-400 mb-2">15.7<span class="text-pink-500">x</span></div> |
| <div class="text-gray-300">FASTER PROCESSING</div> |
| </div> |
| <div class="cyber-border p-6 rounded-lg"> |
| <div class="text-4xl font-bold text-pink-500 mb-2">99.9<span class="text-cyan-400">%</span></div> |
| <div class="text-gray-300">ACCURACY RATE</div> |
| </div> |
| <div class="cyber-border p-6 rounded-lg"> |
| <div class="text-4xl font-bold text-cyan-400 mb-2">128<span class="text-pink-500">TB</span></div> |
| <div class="text-gray-300">NEURAL CAPACITY</div> |
| </div> |
| <div class="cyber-border p-6 rounded-lg"> |
| <div class="text-4xl font-bold text-pink-500 mb-2">24/7</div> |
| <div class="text-gray-300">OPERATIONAL UPTIME</div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-16 text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6 cyber-text">READY TO INTEGRATE <span class="text-pink-500">ROBOTIC AI</span> INTO YOUR SYSTEMS?</h2> |
| <p class="text-gray-300 mb-8 max-w-2xl mx-auto"> |
| Join over 500 industry leaders who are already transforming their operations with our cutting-edge robotic intelligence solutions. |
| </p> |
| <button class="cyber-btn bg-gradient-to-r from-cyan-400 to-pink-500 text-black px-12 py-4 rounded-md font-bold text-lg cyber-glow"> |
| REQUEST DEMO |
| </button> |
| </section> |
| |
| |
| <footer class="py-8 border-t border-cyan-400 border-opacity-20"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0"> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 bg-gray-800 rounded-full mr-2 cyber-border flex items-center justify-center"> |
| <i class="fas fa-robot text-cyan-400"></i> |
| </div> |
| <span class="font-bold cyber-text">NEO<span class="text-pink-500">ROBOTICS</span> AI</span> |
| </div> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition duration-300"> |
| <i class="fab fa-twitter text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition duration-300"> |
| <i class="fab fa-github text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition duration-300"> |
| <i class="fab fa-linkedin text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition duration-300"> |
| <i class="fab fa-youtube text-xl"></i> |
| </a> |
| </div> |
| </div> |
| <div class="mt-8 text-center text-gray-500 text-sm"> |
| © 2023 NeoRobotics AI. All systems operational. |
| </div> |
| </footer> |
| </div> |
|
|
| <script> |
| |
| VANTA.NET({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0x00f7ff, |
| backgroundColor: 0x0, |
| points: 10.00, |
| maxDistance: 20.00, |
| spacing: 15.00 |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const container = document.getElementById('robot-container'); |
| |
| |
| if (container && typeof THREE !== 'undefined') { |
| const scene = new THREE.Scene(); |
| const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000); |
| const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); |
| |
| renderer.setSize(container.offsetWidth, container.offsetHeight); |
| container.appendChild(renderer.domElement); |
| |
| |
| const headGeometry = new THREE.SphereGeometry(1, 32, 32); |
| const headMaterial = new THREE.MeshPhongMaterial({ |
| color: 0x222222, |
| emissive: 0x111111, |
| specular: 0x00ffff, |
| shininess: 30, |
| wireframe: false |
| }); |
| const head = new THREE.Mesh(headGeometry, headMaterial); |
| scene.add(head); |
| |
| |
| const eyeGeometry = new THREE.SphereGeometry(0.15, 16, 16); |
| const eyeMaterial = new THREE.MeshPhongMaterial({ |
| color: 0x111111, |
| emissive: 0xff00ff, |
| emissiveIntensity: 0.5 |
| }); |
| |
| const leftEye = new THREE.Mesh(eyeGeometry, eyeMaterial); |
| leftEye.position.set(-0.3, 0.2, 0.8); |
| head.add(leftEye); |
| |
| const rightEye = new THREE.Mesh(eyeGeometry, eyeMaterial); |
| rightEye.position.set(0.3, 0.2, 0.8); |
| head.add(rightEye); |
| |
| |
| const antennaGeometry = new THREE.CylinderGeometry(0.03, 0.03, 0.5, 8); |
| const antennaMaterial = new THREE.MeshPhongMaterial({ |
| color: 0x444444, |
| emissive: 0x00ffff, |
| emissiveIntensity: 0.2 |
| }); |
| const antenna = new THREE.Mesh(antennaGeometry, antennaMaterial); |
| antenna.position.set(0, 0.8, 0); |
| antenna.rotation.x = Math.PI / 4; |
| head.add(antenna); |
| |
| |
| const tipGeometry = new THREE.SphereGeometry(0.07, 16, 16); |
| const tipMaterial = new THREE.MeshPhongMaterial({ |
| color: 0x00ffff, |
| emissive: 0x00ffff, |
| emissiveIntensity: 0.7 |
| }); |
| const tip = new THREE.Mesh(tipGeometry, tipMaterial); |
| tip.position.set(0, 1.1, -0.2); |
| head.add(tip); |
| |
| |
| const ambientLight = new THREE.AmbientLight(0x404040); |
| scene.add(ambientLight); |
| |
| const directionalLight = new THREE.DirectionalLight(0x00ffff, 0.8); |
| directionalLight.position.set(1, 1, 1); |
| scene.add(directionalLight); |
| |
| const pointLight = new THREE.PointLight(0xff00ff, 0.5, 10); |
| pointLight.position.set(-1, -1, 1); |
| scene.add(pointLight); |
| |
| camera.position.z = 3; |
| |
| |
| function animate() { |
| requestAnimationFrame(animate); |
| |
| head.rotation.y += 0.005; |
| tipMaterial.emissiveIntensity = 0.7 + Math.sin(Date.now() * 0.002) * 0.3; |
| eyeMaterial.emissiveIntensity = 0.5 + Math.sin(Date.now() * 0.003) * 0.3; |
| |
| renderer.render(scene, camera); |
| } |
| |
| animate(); |
| |
| |
| window.addEventListener('resize', function() { |
| const width = container.offsetWidth; |
| const height = container.offsetHeight; |
| renderer.setSize(width, height); |
| camera.aspect = width / height; |
| camera.updateProjectionMatrix(); |
| }); |
| } |
| |
| |
| const terminalTexts = [ |
| "run_diagnostics --full-system", |
| "analyze_data --source=quantum_sensors", |
| "initiate_learning_sequence --depth=5", |
| "connect_to_neural_network --nodes=all", |
| "calculate_optimal_path --environment=dynamic" |
| ]; |
| |
| let currentTerminalText = 0; |
| |
| function typeTerminalCommand() { |
| const terminalInput = document.querySelector('.terminal-body div:last-child span:last-child'); |
| if (!terminalInput) return; |
| |
| let text = terminalTexts[currentTerminalText]; |
| let i = 0; |
| |
| terminalInput.textContent = ''; |
| |
| function type() { |
| if (i < text.length) { |
| terminalInput.textContent += text.charAt(i); |
| i++; |
| setTimeout(type, 50 + Math.random() * 50); |
| } else { |
| setTimeout(erase, 2000); |
| } |
| } |
| |
| function erase() { |
| if (i > 0) { |
| terminalInput.textContent = text.substring(0, i-1); |
| i--; |
| setTimeout(erase, 30); |
| } else { |
| currentTerminalText = (currentTerminalText + 1) % terminalTexts.length; |
| setTimeout(typeTerminalCommand, 500); |
| } |
| } |
| |
| type(); |
| } |
| |
| |
| setTimeout(typeTerminalCommand, 4000); |
| |
| |
| const cyberButtons = document.querySelectorAll('.cyber-btn'); |
| cyberButtons.forEach(button => { |
| button.addEventListener('mouseenter', function() { |
| this.style.transform = 'translateY(-3px)'; |
| }); |
| |
| button.addEventListener('mouseleave', function() { |
| this.style.transform = 'translateY(0)'; |
| }); |
| }); |
| }); |
| </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=yfyangd/roboticai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
