Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>RoboTech - Future of Robotics</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> | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .robot-eye { | |
| transition: all 0.3s ease; | |
| } | |
| .terminal { | |
| font-family: 'Courier New', monospace; | |
| background-color: #1a1a1a; | |
| color: #0f0; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .terminal-header { | |
| background-color: #333; | |
| padding: 6px 12px; | |
| border-top-left-radius: 8px; | |
| border-top-right-radius: 8px; | |
| } | |
| .terminal-body { | |
| padding: 16px; | |
| height: 200px; | |
| overflow-y: auto; | |
| } | |
| .cursor { | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(0, 255, 0, 0.7); | |
| } | |
| .circuit-bg { | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="10" height="10" x="0" y="0" fill="%23ffffff10"/><rect width="10" height="10" x="20" y="0" fill="%23ffffff10"/><rect width="10" height="10" x="40" y="0" fill="%23ffffff10"/><rect width="10" height="10" x="60" y="0" fill="%23ffffff10"/><rect width="10" height="10" x="80" y="0" fill="%23ffffff10"/><rect width="10" height="10" x="0" y="20" fill="%23ffffff10"/><rect width="10" height="10" x="20" y="20" fill="%23ffffff10"/><rect width="10" height="10" x="40" y="20" fill="%23ffffff10"/><rect width="10" height="10" x="60" y="20" fill="%23ffffff10"/><rect width="10" height="10" x="80" y="20" fill="%23ffffff10"/><rect width="10" height="10" x="0" y="40" fill="%23ffffff10"/><rect width="10" height="10" x="20" y="40" fill="%23ffffff10"/><rect width="10" height="10" x="40" y="40" fill="%23ffffff10"/><rect width="10" height="10" x="60" y="40" fill="%23ffffff10"/><rect width="10" height="10" x="80" y="40" fill="%23ffffff10"/><rect width="10" height="10" x="0" y="60" fill="%23ffffff10"/><rect width="10" height="10" x="20" y="60" fill="%23ffffff10"/><rect width="10" height="10" x="40" y="60" fill="%23ffffff10"/><rect width="10" height="10" x="60" y="60" fill="%23ffffff10"/><rect width="10" height="10" x="80" y="60" fill="%23ffffff10"/><rect width="10" height="10" x="0" y="80" fill="%23ffffff10"/><rect width="10" height="10" x="20" y="80" fill="%23ffffff10"/><rect width="10" height="10" x="40" y="80" fill="%23ffffff10"/><rect width="10" height="10" x="60" y="80" fill="%23ffffff10"/><rect width="10" height="10" x="80" y="80" fill="%23ffffff10"/></svg>'); | |
| background-size: 100px 100px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white circuit-bg"> | |
| <!-- Navigation --> | |
| <nav class="bg-gray-800 bg-opacity-90 backdrop-blur-md fixed w-full z-10"> | |
| <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"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-robot text-green-400 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-green-400">RoboTech</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#" class="text-green-400 px-3 py-2 rounded-md text-sm font-medium">Home</a> | |
| <a href="#" class="text-gray-300 hover:text-green-400 px-3 py-2 rounded-md text-sm font-medium">Products</a> | |
| <a href="#" class="text-gray-300 hover:text-green-400 px-3 py-2 rounded-md text-sm font-medium">Services</a> | |
| <a href="#" class="text-gray-300 hover:text-green-400 px-3 py-2 rounded-md text-sm font-medium">About</a> | |
| <a href="#" class="text-gray-300 hover:text-green-400 px-3 py-2 rounded-md text-sm font-medium">Contact</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="hidden md:hidden" id="mobile-menu"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#" class="text-green-400 block px-3 py-2 rounded-md text-base font-medium">Home</a> | |
| <a href="#" class="text-gray-300 hover:text-green-400 block px-3 py-2 rounded-md text-base font-medium">Products</a> | |
| <a href="#" class="text-gray-300 hover:text-green-400 block px-3 py-2 rounded-md text-base font-medium">Services</a> | |
| <a href="#" class="text-gray-300 hover:text-green-400 block px-3 py-2 rounded-md text-base font-medium">About</a> | |
| <a href="#" class="text-gray-300 hover:text-green-400 block px-3 py-2 rounded-md text-base font-medium">Contact</a> | |
| <button class="bg-green-500 hover:bg-green-600 text-white block w-full text-left px-3 py-2 rounded-md text-base font-medium mt-2"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="relative pt-24 pb-20 px-4 sm:px-6 lg:pt-32 lg:pb-28 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0"> | |
| <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-white mb-6"> | |
| The Future of <span class="text-green-400">Robotics</span> is Here | |
| </h1> | |
| <p class="text-lg md:text-xl text-gray-300 mb-8"> | |
| Discover our cutting-edge robotic solutions designed to revolutionize industries and improve everyday life. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-green-500 hover:bg-green-600 text-white px-6 py-3 rounded-lg font-medium text-lg transition duration-300 transform hover:scale-105"> | |
| Explore Products | |
| </button> | |
| <button class="bg-transparent border-2 border-green-400 text-green-400 hover:bg-green-400 hover:text-white px-6 py-3 rounded-lg font-medium text-lg transition duration-300 transform hover:scale-105"> | |
| Watch Demo | |
| </button> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2 relative"> | |
| <div class="floating relative"> | |
| <div class="relative mx-auto" style="width: 300px; height: 400px;"> | |
| <!-- Robot Head --> | |
| <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-48 h-48 bg-gray-700 rounded-full"> | |
| <!-- Eyes --> | |
| <div class="absolute top-12 left-8 w-8 h-8 bg-green-400 rounded-full robot-eye" id="left-eye"></div> | |
| <div class="absolute top-12 right-8 w-8 h-8 bg-green-400 rounded-full robot-eye" id="right-eye"></div> | |
| <!-- Antenna --> | |
| <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 w-2 h-12 bg-gray-600 rounded-full"></div> | |
| <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 -translate-y-2 w-6 h-6 bg-green-400 rounded-full"></div> | |
| </div> | |
| <!-- Robot Body --> | |
| <div class="absolute top-48 left-1/2 transform -translate-x-1/2 w-56 h-48 bg-gray-800 rounded-lg"> | |
| <!-- Chest Panel --> | |
| <div class="absolute top-4 left-1/2 transform -translate-x-1/2 w-40 h-32 bg-gray-900 rounded-lg flex flex-col items-center justify-center"> | |
| <div class="w-32 h-4 bg-green-400 rounded-full mb-2"></div> | |
| <div class="w-28 h-4 bg-green-400 rounded-full mb-2"></div> | |
| <div class="w-24 h-4 bg-green-400 rounded-full"></div> | |
| </div> | |
| <!-- Arms --> | |
| <div class="absolute top-16 -left-6 w-6 h-32 bg-gray-700 rounded-full"></div> | |
| <div class="absolute top-16 -right-6 w-6 h-32 bg-gray-700 rounded-full"></div> | |
| <!-- Hands --> | |
| <div class="absolute top-44 -left-6 w-6 h-4 bg-gray-600 rounded-b-full"></div> | |
| <div class="absolute top-44 -right-6 w-6 h-4 bg-gray-600 rounded-b-full"></div> | |
| </div> | |
| <!-- Robot Base --> | |
| <div class="absolute top-96 left-1/2 transform -translate-x-1/2 w-64 h-8 bg-gray-700 rounded-full"></div> | |
| <div class="absolute top-96 left-1/2 transform -translate-x-1/2 -translate-y-2 w-72 h-4 bg-gray-600 rounded-full"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="py-16 bg-gray-800 bg-opacity-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Advanced Robotic <span class="text-green-400">Technologies</span></h2> | |
| <p class="text-lg text-gray-300 max-w-3xl mx-auto">Our robots are equipped with the latest AI and machine learning capabilities to perform complex tasks with precision.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-gray-800 bg-opacity-70 p-8 rounded-xl hover:bg-gray-700 transition duration-300 transform hover:-translate-y-2"> | |
| <div class="w-16 h-16 bg-green-400 bg-opacity-20 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-brain text-green-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">AI Powered</h3> | |
| <p class="text-gray-300">Our robots learn and adapt to their environment using advanced artificial intelligence algorithms.</p> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-70 p-8 rounded-xl hover:bg-gray-700 transition duration-300 transform hover:-translate-y-2"> | |
| <div class="w-16 h-16 bg-green-400 bg-opacity-20 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-hands-helping text-green-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Human Collaboration</h3> | |
| <p class="text-gray-300">Designed to work safely alongside humans with intuitive interaction capabilities.</p> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-70 p-8 rounded-xl hover:bg-gray-700 transition duration-300 transform hover:-translate-y-2"> | |
| <div class="w-16 h-16 bg-green-400 bg-opacity-20 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-tachometer-alt text-green-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">High Performance</h3> | |
| <p class="text-gray-300">Engineered for maximum efficiency and productivity in industrial applications.</p> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-70 p-8 rounded-xl hover:bg-gray-700 transition duration-300 transform hover:-translate-y-2"> | |
| <div class="w-16 h-16 bg-green-400 bg-opacity-20 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-eye text-green-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Computer Vision</h3> | |
| <p class="text-gray-300">Advanced vision systems enable precise object recognition and manipulation.</p> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-70 p-8 rounded-xl hover:bg-gray-700 transition duration-300 transform hover:-translate-y-2"> | |
| <div class="w-16 h-16 bg-green-400 bg-opacity-20 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-network-wired text-green-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">IoT Integration</h3> | |
| <p class="text-gray-300">Seamless connectivity with IoT devices for smart automation solutions.</p> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-70 p-8 rounded-xl hover:bg-gray-700 transition duration-300 transform hover:-translate-y-2"> | |
| <div class="w-16 h-16 bg-green-400 bg-opacity-20 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-shield-alt text-green-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-3">Secure Systems</h3> | |
| <p class="text-gray-300">Military-grade encryption and security protocols to protect your data.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Demo Section --> | |
| <div class="py-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> | |
| <div class="terminal"> | |
| <div class="terminal-header flex items-center"> | |
| <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div> | |
| <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div> | |
| <div class="w-3 h-3 bg-green-500 rounded-full"></div> | |
| <div class="ml-4 text-sm text-gray-300">robot_control_terminal</div> | |
| </div> | |
| <div class="terminal-body" id="terminal-output"> | |
| <div>> Initializing RoboTech systems...</div> | |
| <div>> Loading AI modules...</div> | |
| <div>> Establishing secure connection...</div> | |
| <div>> Systems ready <span class="text-green-400">✓</span></div> | |
| <div>> Welcome to RoboTech Control Interface</div> | |
| <div>> Type 'help' for command list</div> | |
| <div class="flex items-center"><span>> </span><span class="cursor">_</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Interactive <span class="text-green-400">Control</span> Interface</h2> | |
| <p class="text-lg text-gray-300 mb-6"> | |
| Manage your robotic fleet with our intuitive terminal interface. Monitor status, update firmware, and execute commands with simple text inputs. | |
| </p> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> | |
| <div class="bg-gray-800 p-4 rounded-lg border-l-4 border-green-400"> | |
| <h3 class="font-bold text-white mb-2">Real-time Monitoring</h3> | |
| <p class="text-gray-300 text-sm">Track performance metrics and system health in real-time.</p> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg border-l-4 border-green-400"> | |
| <h3 class="font-bold text-white mb-2">Remote Control</h3> | |
| <p class="text-gray-300 text-sm">Execute commands from anywhere with secure cloud access.</p> | |
| </div> | |
| </div> | |
| <button class="mt-6 bg-green-500 hover:bg-green-600 text-white px-6 py-3 rounded-lg font-medium transition duration-300 flex items-center"> | |
| <i class="fas fa-terminal mr-2"></i> Try Live Demo | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Products Section --> | |
| <div class="py-16 bg-gray-800 bg-opacity-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Our <span class="text-green-400">Robotic</span> Products</h2> | |
| <p class="text-lg text-gray-300 max-w-3xl mx-auto">Explore our range of specialized robots designed for various applications.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-gray-900 rounded-xl overflow-hidden hover:shadow-lg hover:shadow-green-400/20 transition duration-300 transform hover:-translate-y-2"> | |
| <div class="h-48 bg-gray-800 flex items-center justify-center"> | |
| <div class="w-32 h-32 bg-gray-700 rounded-full relative"> | |
| <div class="absolute top-4 left-1/2 transform -translate-x-1/2 w-8 h-8 bg-green-400 rounded-full"></div> | |
| <div class="absolute top-24 left-1/2 transform -translate-x-1/2 w-16 h-4 bg-gray-600 rounded-full"></div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-white mb-2">Home Assistant Bot</h3> | |
| <p class="text-gray-300 mb-4">Your personal domestic helper for household chores and companionship.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-green-400 font-bold">$1,299</span> | |
| <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition duration-300"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl overflow-hidden hover:shadow-lg hover:shadow-green-400/20 transition duration-300 transform hover:-translate-y-2"> | |
| <div class="h-48 bg-gray-800 flex items-center justify-center"> | |
| <div class="w-40 h-32 bg-gray-700 rounded-lg relative"> | |
| <div class="absolute top-4 left-4 w-6 h-6 bg-green-400 rounded-full"></div> | |
| <div class="absolute top-4 right-4 w-6 h-6 bg-green-400 rounded-full"></div> | |
| <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 w-24 h-4 bg-gray-600 rounded-full"></div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-white mb-2">Industrial Arm XR-45</h3> | |
| <p class="text-gray-300 mb-4">Precision robotic arm for manufacturing and assembly lines.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-green-400 font-bold">$8,499</span> | |
| <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition duration-300"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl overflow-hidden hover:shadow-lg hover:shadow-green-400/20 transition duration-300 transform hover:-translate-y-2"> | |
| <div class="h-48 bg-gray-800 flex items-center justify-center"> | |
| <div class="w-32 h-40 bg-gray-700 rounded-lg relative"> | |
| <div class="absolute top-6 left-1/2 transform -translate-x-1/2 w-8 h-8 bg-green-400 rounded-full"></div> | |
| <div class="absolute bottom-6 left-1/2 transform -translate-x-1/2 w-24 h-6 bg-gray-600 rounded-full"></div> | |
| <div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-28 h-2 bg-gray-500 rounded-full"></div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-white mb-2">Explorer Drone Bot</h3> | |
| <p class="text-gray-300 mb-4">Autonomous exploration robot for hazardous environments.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-green-400 font-bold">$3,799</span> | |
| <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition duration-300"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="bg-transparent border-2 border-green-400 text-green-400 hover:bg-green-400 hover:text-white px-8 py-3 rounded-lg font-medium text-lg transition duration-300"> | |
| View All Products | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Newsletter Section --> | |
| <div class="py-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-3xl mx-auto bg-gray-800 rounded-xl p-8 md:p-10 text-center"> | |
| <h2 class="text-3xl font-bold text-white mb-4">Stay Updated</h2> | |
| <p class="text-lg text-gray-300 mb-8">Subscribe to our newsletter for the latest in robotic technology and company updates.</p> | |
| <div class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto"> | |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-green-400"> | |
| <button class="bg-green-500 hover:bg-green-600 text-white px-6 py-3 rounded-lg font-medium transition duration-300"> | |
| Subscribe | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 pt-16 pb-8 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-robot text-green-400 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-green-400">RoboTech</span> | |
| </div> | |
| <p class="text-gray-300 mb-4">Pioneering the future of robotics with innovative solutions for home and industry.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-green-400 transition duration-300"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-green-400 transition duration-300"> | |
| <i class="fab fa-facebook text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-green-400 transition duration-300"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-green-400 transition duration-300"> | |
| <i class="fab fa-linkedin text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-green-400 transition duration-300"> | |
| <i class="fab fa-youtube text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-white mb-4">Products</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-green-400 transition duration-300">Home Robots</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-green-400 transition duration-300">Industrial Robots</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-green-400 transition duration-300">Educational Kits</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-green-400 transition duration-300">AI Software</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-green-400 transition duration-300">Accessories</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-white mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-green-400 transition duration-300">About Us</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-green-400 transition duration-300">Careers</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-green-400 transition duration-300">News</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-green-400 transition duration-300">Partners</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-green-400 transition duration-300">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-white mb-4">Support</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-green-400 transition duration-300">Documentation</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-green-400 transition duration-300">Community</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-green-400 transition duration-300">Tutorials</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-green-400 transition duration-300">API Reference</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-green-400 transition duration-300">Help Center</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 RoboTech. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-green-400 transition duration-300">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-green-400 transition duration-300">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-green-400 transition duration-300">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Robot eye follow mouse | |
| document.addEventListener('mousemove', function(e) { | |
| const leftEye = document.getElementById('left-eye'); | |
| const rightEye = document.getElementById('right-eye'); | |
| // Calculate eye position relative to viewport | |
| const rectLeft = leftEye.getBoundingClientRect(); | |
| const rectRight = rightEye.getBoundingClientRect(); | |
| // Center of eyes | |
| const leftCenterX = rectLeft.left + rectLeft.width / 2; | |
| const leftCenterY = rectLeft.top + rectLeft.height / 2; | |
| const rightCenterX = rectRight.left + rectRight.width / 2; | |
| const rightCenterY = rectRight.top + rectRight.height / 2; | |
| // Calculate angle between eye center and mouse position | |
| const angleLeft = Math.atan2(e.clientY - leftCenterY, e.clientX - leftCenterX); | |
| const angleRight = Math.atan2(e.clientY - rightCenterY, e.clientX - rightCenterX); | |
| // Calculate new pupil position (limited to stay within eye) | |
| const distance = 5; | |
| const leftX = Math.cos(angleLeft) * distance; | |
| const leftY = Math.sin(angleLeft) * distance; | |
| const rightX = Math.cos(angleRight) * distance; | |
| const rightY = Math.sin(angleRight) * distance; | |
| // Apply transform | |
| leftEye.style.transform = `translate(${leftX}px, ${leftY}px)`; | |
| rightEye.style.transform = `translate(${rightX}px, ${rightY}px)`; | |
| }); | |
| // Terminal animation | |
| const terminalLines = [ | |
| "> help", | |
| "Available commands:", | |
| "status - Show system status", | |
| "update - Check for updates", | |
| "run [task] - Execute specified task", | |
| "monitor - Open real-time monitor", | |
| "exit - Close terminal session", | |
| "> ", | |
| "> status", | |
| "System: Online", | |
| "Battery: 98%", | |
| "Tasks: 3 running", | |
| "Memory: 4.2/8.0 GB", | |
| "CPU: 34%", | |
| "Network: Connected", | |
| "> ", | |
| "> monitor", | |
| "Opening real-time monitoring dashboard...", | |
| "> " | |
| ]; | |
| let currentLine = 0; | |
| const terminalOutput = document.getElementById('terminal-output'); | |
| function addTerminalLine() { | |
| if (currentLine < terminalLines.length) { | |
| const line = document.createElement('div'); | |
| line.textContent = terminalLines[currentLine]; | |
| // Remove cursor from previous line | |
| const cursor = terminalOutput.querySelector('.cursor'); | |
| if (cursor) cursor.remove(); | |
| terminalOutput.appendChild(line); | |
| // Add cursor to new line if it ends with "> " | |
| if (terminalLines[currentLine].endsWith("> ")) { | |
| const cursorLine = document.createElement('div'); | |
| cursorLine.className = 'flex items-center'; | |
| cursorLine.innerHTML = '<span>> </span><span class="cursor">_</span>'; | |
| terminalOutput.appendChild(cursorLine); | |
| } | |
| currentLine++; | |
| terminalOutput.scrollTop = terminalOutput.scrollHeight; | |
| // Schedule next line | |
| setTimeout(addTerminalLine, Math.random() * 1000 + 500); | |
| } else { | |
| // Reset animation after a delay | |
| setTimeout(() => { | |
| terminalOutput.innerHTML = ` | |
| <div>> System restarting...</div> | |
| <div>> Reinitializing RoboTech systems...</div> | |
| <div>> Loading AI modules...</div> | |
| <div>> Establishing secure connection...</div> | |
| <div>> Systems ready <span class="text-green-400">✓</span></div> | |
| <div>> Welcome to RoboTech Control Interface</div> | |
| <div>> Type 'help' for command list</div> | |
| <div class="flex items-center"><span>> </span><span class="cursor">_</span></div> | |
| `; | |
| currentLine = 0; | |
| setTimeout(addTerminalLine, 3000); | |
| }, 3000); | |
| } | |
| } | |
| // Start terminal animation after a delay | |
| setTimeout(addTerminalLine, 2000); | |
| // Glow effect on hover for buttons | |
| const buttons = document.querySelectorAll('button'); | |
| buttons.forEach(button => { | |
| button.addEventListener('mouseenter', () => { | |
| if (button.classList.contains('bg-green-500')) { | |
| button.classList.add('glow'); | |
| } | |
| }); | |
| button.addEventListener('mouseleave', () => { | |
| button.classList.remove('glow'); | |
| }); | |
| }); | |
| </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=observabot/robot-website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |