Spaces:
Running
Running
File size: 11,371 Bytes
225fbb1 8aa3a5a 225fbb1 e2cdc43 658235d 9392d90 df5734e e2cdc43 225fbb1 df5734e 225fbb1 658235d 008fa79 e2cdc43 658235d e2cdc43 658235d e2cdc43 658235d e2cdc43 7492b32 658235d 7492b32 658235d 7492b32 9392d90 658235d 7492b32 008fa79 9392d90 658235d e2cdc43 658235d e2cdc43 658235d 008fa79 225fbb1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 |
<!DOCTYPE html>
<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> |