|
|
<!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> |
