Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nexus Robotics - Humanoid Robots of Tomorrow</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> | |
| .video-container { | |
| position: relative; | |
| padding-bottom: 56.25%; /* 16:9 aspect ratio */ | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| .video-container iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #10b981); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| text-shadow: 0 0 8px rgba(255,255,255,0.3); | |
| } | |
| .join-btn { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(5, 150, 105, 0.3); | |
| } | |
| .join-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 8px rgba(5, 150, 105, 0.4); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen flex flex-col"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-10 py-4"> | |
| <div class="container mx-auto px-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-robot text-2xl mr-2 text-white"></i> | |
| <span class="text-xl font-bold text-white">NEXUS<span class="gradient-text">ROBOTICS</span></span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#about" class="text-white hover:text-blue-300 transition-colors">About Us</a> | |
| <a href="#robots" class="text-white hover:text-blue-300 transition-colors">Our Robots</a> | |
| <a href="#technology" class="text-white hover:text-blue-300 transition-colors">Technology</a> | |
| <a href="#contact" class="text-white hover:text-blue-300 transition-colors">Contact</a> | |
| </div> | |
| <button class="md:hidden text-white"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Video Background --> | |
| <div class="fixed inset-0 -z-10 overflow-hidden"> | |
| <div id="videoFallback" class="hidden w-full h-full bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-robot text-6xl text-white/50 mb-4"></i> | |
| <p class="text-white/70 text-xl">Loading Nexus Robotics Experience</p> | |
| </div> | |
| </div> | |
| <div id="mobilePlayOverlay" class="md:hidden absolute inset-0 flex items-center justify-center z-20 bg-black/30"> | |
| <button class="bg-white/20 backdrop-blur-sm rounded-full p-4 border-2 border-white/30"> | |
| <i class="fas fa-play text-white text-4xl"></i> | |
| </button> | |
| </div> | |
| <video id="bgVideo" autoplay loop playsinline muted class="w-full h-full object-cover" preload="auto" poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="> | |
| <source src="https://huggingface.co/spaces/akhaliq/nexusrobotics/resolve/main/Video_of_Robot_Washing_Dishes.mp4" type="video/mp4"> | |
| <source src="https://huggingface.co/spaces/akhaliq/nexusrobotics/resolve/main/Video_of_Robot_Washing_Dishes.webm" type="video/webm"> | |
| </video> | |
| <div class="absolute inset-0 bg-black/30"></div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="flex-grow flex flex-col items-center justify-center min-h-screen text-center px-4"> | |
| <div class="relative z-10"> | |
| <h1 class="text-5xl md:text-7xl font-bold text-white mb-8"> | |
| NEXUS<span class="gradient-text">ROBOTICS</span> | |
| </h1> | |
| <button class="join-btn bg-gradient-to-r from-blue-500 to-emerald-500 text-white px-8 py-4 rounded-full font-medium text-xl"> | |
| <i class="fas fa-user-plus mr-2"></i> Join Us | |
| </button> | |
| </div> | |
| </main> | |
| <!-- Company Information Section --> | |
| <section class="relative z-10 bg-white/90 backdrop-blur-sm py-16 px-4"> | |
| <div class="container mx-auto max-w-4xl"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-8 text-center">About Nexus Robotics</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-2xl font-semibold text-gray-800 mb-4">Our Mission</h3> | |
| <p class="text-gray-600 mb-6"> | |
| At Nexus Robotics, we're pioneering the next generation of humanoid robots designed to seamlessly integrate into human environments. Our mission is to create intelligent, adaptable machines that enhance productivity and quality of life. | |
| </p> | |
| <h3 class="text-2xl font-semibold text-gray-800 mb-4">Core Technology</h3> | |
| <p class="text-gray-600"> | |
| We combine cutting-edge AI with advanced robotics to create systems capable of learning, adapting, and performing complex tasks in real-world settings. | |
| </p> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-semibold text-gray-800 mb-4">Key Features</h3> | |
| <ul class="space-y-3 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-brain text-emerald-500 mt-1 mr-3"></i> | |
| <span>Advanced neural networks for real-time decision making</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-hands-helping text-blue-500 mt-1 mr-3"></i> | |
| <span>Human-like dexterity and manipulation capabilities</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-eye text-purple-500 mt-1 mr-3"></i> | |
| <span>Multi-modal sensory perception systems</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-bolt text-yellow-500 mt-1 mr-3"></i> | |
| <span>Energy-efficient designs with extended operation times</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| // Enhanced video handling with mobile support | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const video = document.getElementById('bgVideo'); | |
| const fallback = document.getElementById('videoFallback'); | |
| const mobileOverlay = document.getElementById('mobilePlayOverlay'); | |
| const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); | |
| // Show loading state initially | |
| fallback.classList.remove('hidden'); | |
| // Check if video can play | |
| const canPlay = video.canPlayType('video/mp4') || video.canPlayType('video/webm'); | |
| // Handle mobile devices differently | |
| if (isMobile) { | |
| mobileOverlay.classList.remove('hidden'); | |
| video.muted = true; | |
| video.autoplay = false; | |
| video.removeAttribute('playsinline'); | |
| if (!canPlay) { | |
| // No video support at all | |
| video.style.display = 'none'; | |
| if (isMobile) mobileOverlay.style.display = 'none'; | |
| return; | |
| } | |
| // Try to play video with audio handling | |
| const tryPlay = () => { | |
| if (isMobile) return; | |
| const playPromise = video.play(); | |
| if (playPromise !== undefined) { | |
| playPromise.then(() => { | |
| // Video playing successfully | |
| fallback.classList.add('hidden'); | |
| if (isMobile) mobileOverlay.classList.add('hidden'); | |
| }).catch(error => { | |
| // Final fallback if video can't play | |
| video.style.display = 'none'; | |
| fallback.classList.remove('hidden'); | |
| if (isMobile) mobileOverlay.classList.add('hidden'); | |
| }); | |
| } | |
| }; | |
| // Start with muted video for autoplay compliance but unmute immediately | |
| if (!isMobile) { | |
| video.muted = true; | |
| tryPlay(); | |
| video.muted = false; | |
| } | |
| // Fallback if video doesn't load within 5 seconds | |
| setTimeout(() => { | |
| if (video.readyState < 3) { // 3 = HAVE_FUTURE_DATA | |
| video.style.display = 'none'; | |
| fallback.classList.remove('hidden'); | |
| if (isMobile) mobileOverlay.classList.add('hidden'); | |
| } | |
| }, 5000); | |
| // Mobile play button handler | |
| if (isMobile) { | |
| mobileOverlay.querySelector('button').addEventListener('click', () => { | |
| video.play() | |
| .then(() => { | |
| mobileOverlay.classList.add('hidden'); | |
| fallback.classList.add('hidden'); | |
| }) | |
| .catch(e => { | |
| mobileOverlay.querySelector('i').className = 'fas fa-exclamation-triangle text-red-500 text-4xl'; | |
| mobileOverlay.querySelector('button').classList.add('bg-red-500/20', 'border-red-500/30'); | |
| }); | |
| }); | |
| } | |
| }); | |
| // Simple animation for the join button | |
| document.querySelectorAll('.join-btn').forEach(button => { | |
| button.addEventListener('mouseenter', () => { | |
| button.classList.add('shadow-lg'); | |
| }); | |
| button.addEventListener('mouseleave', () => { | |
| button.classList.remove('shadow-lg'); | |
| }); | |
| }); | |
| </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=akhaliq/nexusrobotics" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |