ai favicon

src/components/AiorzWebARLanding.tsx

@@ -307,7 +307,9 @@ const AiorzWebARLanding = () => {
   // ==================== 2.5. Meteor System ====================
   const createMeteors = (THREE: any) => {
     console.log('[Meteor] createMeteors called');
-    const meteorCount = 250; // 大量流星数量
+    // 根据设备类型调整流星数量：移动端减少数量以提升性能
+    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) || window.innerWidth < 768;
+    const meteorCount = isMobile ? 80 : 250; // 移动端减少到80个，桌面端保持250个
     
     const camera = cameraRef.current;
     if (!camera) {
@@ -376,8 +378,12 @@ const AiorzWebARLanding = () => {
       const headPositions = new Float32Array([startX, startY, startZ]);
       headGeometry.setAttribute('position', new THREE.BufferAttribute(headPositions, 3));
       
+      // 移动端调整流星尺寸，使其更小更精致
+      const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) || window.innerWidth < 768;
+      const headSize = isMobile ? 2.0 : 3.0; // 移动端更小的头部
+      
       const headMaterial = new THREE.PointsMaterial({
-        size: 3.0, // 参考 liuxing.html：头部光点较小（1.5像素半径，这里用3.0）
+        size: headSize, // 移动端使用更小的尺寸
         map: headTexture,
         transparent: true,
         opacity: 1.0,
@@ -1112,13 +1118,15 @@ const AiorzWebARLanding = () => {
       <video ref={videoRef} className="hidden" playsInline></video>
       <canvas ref={canvasRef} className="absolute top-0 left-0 w-full h-full z-0" />
       <div className="absolute inset-0 bg-gradient-to-b from-gray-950/50 via-transparent to-gray-950/80 pointer-events-none z-10"></div>
+      {/* 移动端增强文字可读性的背景遮罩 */}
+      <div className="absolute inset-0 bg-gradient-to-b from-gray-950/70 via-gray-950/40 to-gray-950/90 pointer-events-none z-[15] md:hidden"></div>
 
-      <nav className="relative z-20 flex justify-between items-center px-6 py-6 max-w-7xl mx-auto">
+      <nav className="relative z-20 flex justify-between items-center px-4 sm:px-6 py-4 sm:py-6 max-w-7xl mx-auto">
         <div className="flex items-center gap-2 group cursor-pointer">
-          <div className="w-8 h-8 bg-emerald-500/10 border border-emerald-500/50 rounded flex items-center justify-center group-hover:bg-emerald-500/20 transition-all duration-300">
-            <Cpu size={18} className="text-emerald-400" />
+          <div className="w-7 h-7 sm:w-8 sm:h-8 bg-emerald-500/10 border border-emerald-500/50 rounded flex items-center justify-center group-hover:bg-emerald-500/20 transition-all duration-300">
+            <Cpu size={16} className="sm:w-[18px] sm:h-[18px] text-emerald-400" />
           </div>
-          <span className="text-xl font-bold tracking-wider text-white group-hover:text-emerald-400 transition-colors text-glow">AIORZ</span>
+          <span className="text-lg sm:text-xl font-bold tracking-wider text-white group-hover:text-emerald-400 transition-colors text-glow">AIORZ</span>
         </div>
         <div className="hidden md:flex gap-6 text-sm items-center">
           <div className="flex items-center gap-2 text-emerald-500/80">
@@ -1136,43 +1144,44 @@ const AiorzWebARLanding = () => {
         </div>
       </nav>
 
-      <main className="relative z-20 max-w-7xl mx-auto px-6 pt-16 h-[calc(100vh-100px)]">
+      <main className="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 pt-8 sm:pt-16 pb-24 sm:pb-0 min-h-[calc(100vh-100px)]">
         {/* 左侧主要内容区域 */}
-        <div className="max-w-2xl space-y-8">
-          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-900/30 border border-emerald-500/30 text-emerald-400 text-xs font-bold uppercase tracking-widest text-pulse-glow">
-            <span className={`w-2 h-2 rounded-full ${cameraActive ? 'bg-emerald-400 animate-ping' : 'bg-gray-500'}`}></span>
-            {cameraActive ? 'Neural Link Active' : 'System Standby'}
+        <div className="max-w-2xl space-y-4 sm:space-y-8 relative z-30">
+          <div className="inline-flex items-center gap-2 px-2.5 sm:px-3 py-1 rounded-full bg-emerald-900/30 border border-emerald-500/30 text-emerald-400 text-[10px] sm:text-xs font-bold uppercase tracking-widest text-pulse-glow">
+            <span className={`w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full ${cameraActive ? 'bg-emerald-400 animate-ping' : 'bg-gray-500'}`}></span>
+            <span className="hidden sm:inline">{cameraActive ? 'Neural Link Active' : 'System Standby'}</span>
+            <span className="sm:hidden">{cameraActive ? 'Active' : 'Standby'}</span>
           </div>
           
-          <h1 className="text-5xl md:text-7xl font-black text-white leading-tight">
+          <h1 className="text-3xl sm:text-5xl md:text-7xl font-black text-white leading-[1.1] sm:leading-tight relative z-30">
             <span className="text-glow">Don't Kneel</span> <br />
             <span className="gradient-animated">
               To Complexity.
             </span>
           </h1>
           
-          <p className="text-lg text-gray-400 max-w-lg leading-relaxed border-l-2 border-emerald-500/50 pl-6">
+          <p className="text-sm sm:text-lg text-gray-300 sm:text-gray-400 max-w-lg leading-relaxed border-l-2 border-emerald-500/50 pl-4 sm:pl-6 relative z-30">
             <span className="text-pulse-glow">We are on the verge of creating a great AI era.</span> <br/>
             Unleash the power of <span className="text-shimmer font-bold">Spatial Computing</span>.
           </p>
 
-          <div className="pt-4">
+          <div className="pt-2 sm:pt-4 relative z-30">
             {!cameraActive ? (
               <button 
                 onClick={startCameraSystem}
                 disabled={loading}
-                className="group relative bg-emerald-600 hover:bg-emerald-500 text-white px-8 py-4 rounded font-bold transition-all flex items-center gap-3 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed"
+                className="group relative bg-emerald-600 hover:bg-emerald-500 text-white px-4 sm:px-8 py-3 sm:py-4 rounded font-bold transition-all flex items-center gap-2 sm:gap-3 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed text-sm sm:text-base w-full sm:w-auto justify-center sm:justify-start"
               >
                 <div className="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
-                <Camera size={20} />
-                <span>{loading ? 'LOADING ENGINE...' : 'INITIALIZE NEURAL LINK'}</span>
-                <ChevronRight size={18} className="group-hover:translate-x-1 transition-transform" />
+                <Camera size={18} className="sm:w-5 sm:h-5 flex-shrink-0" />
+                <span className="whitespace-nowrap">{loading ? 'LOADING...' : 'INITIALIZE NEURAL LINK'}</span>
+                <ChevronRight size={16} className="sm:w-[18px] sm:h-[18px] group-hover:translate-x-1 transition-transform flex-shrink-0" />
               </button>
             ) : (
               <div className="flex gap-4">
-                <div className="p-4 bg-emerald-950/50 border border-emerald-500/30 rounded-lg backdrop-blur-sm">
-                   <div className="text-xs text-gray-400 mb-1">CURRENT GESTURE</div>
-                   <div className="text-xl font-bold text-white tracking-widest text-glow">{gestureMode}</div>
+                <div className="p-3 sm:p-4 bg-emerald-950/50 border border-emerald-500/30 rounded-lg backdrop-blur-sm">
+                   <div className="text-[10px] sm:text-xs text-gray-400 mb-1">CURRENT GESTURE</div>
+                   <div className="text-lg sm:text-xl font-bold text-white tracking-widest text-glow">{gestureMode}</div>
                 </div>
               </div>
             )}
@@ -1276,58 +1285,58 @@ const AiorzWebARLanding = () => {
             </div>
           </div>
 
-        {/* 移动端手势提示框 - 绝对定位在右下角 */}
-        <div className="absolute bottom-6 right-6 lg:hidden max-w-xs">
-           <div className="relative bg-gray-900/60 backdrop-blur-sm border border-gray-700/40 rounded-lg p-4 font-mono text-xs shadow-xl">
-              <div className="flex items-center gap-2 mb-3 border-b border-gray-700/50 pb-2">
-                 <Terminal size={12} className="text-emerald-500" />
-                 <span className="text-gray-400 text-xs">interaction_guide.md</span>
+        {/* 移动端手势提示框 - 优化位置和大小，避免遮挡主要内容 */}
+        <div className="fixed bottom-4 left-4 right-4 lg:hidden z-40 max-w-sm mx-auto">
+           <div className="relative bg-gray-900/80 backdrop-blur-md border border-gray-700/60 rounded-lg p-3 font-mono text-[10px] sm:text-xs shadow-2xl">
+              <div className="flex items-center gap-2 mb-2 border-b border-gray-700/50 pb-1.5">
+                 <Terminal size={10} className="text-emerald-500 flex-shrink-0" />
+                 <span className="text-gray-400 text-[10px]">interaction_guide.md</span>
               </div>
-              <div className="space-y-2.5 text-gray-300">
-                 <div className="flex items-center gap-2">
-                    <div className="w-6 h-6 rounded bg-gray-800/50 flex items-center justify-center text-sm flex-shrink-0">🖐️</div>
+              <div className="grid grid-cols-2 gap-2 text-gray-300">
+                 <div className="flex items-center gap-1.5">
+                    <div className="w-5 h-5 rounded bg-gray-800/50 flex items-center justify-center text-xs flex-shrink-0">🖐️</div>
                     <div className="min-w-0">
-                       <div className="text-orange-400 font-bold text-xs">SATURN</div>
-                       <div className="text-[10px] text-gray-500 leading-tight">Open hand</div>
+                       <div className="text-orange-400 font-bold text-[10px]">SATURN</div>
+                       <div className="text-[9px] text-gray-500 leading-tight">Open hand</div>
                     </div>
                  </div>
-                 <div className="flex items-center gap-2">
-                    <div className="w-6 h-6 rounded bg-gray-800/50 flex items-center justify-center text-sm flex-shrink-0">✊</div>
+                 <div className="flex items-center gap-1.5">
+                    <div className="w-5 h-5 rounded bg-gray-800/50 flex items-center justify-center text-xs flex-shrink-0">✊</div>
                     <div className="min-w-0">
-                       <div className="text-emerald-400 font-bold text-xs">SPHERE</div>
-                       <div className="text-[10px] text-gray-500 leading-tight">Close fist</div>
+                       <div className="text-emerald-400 font-bold text-[10px]">SPHERE</div>
+                       <div className="text-[9px] text-gray-500 leading-tight">Close fist</div>
                     </div>
                  </div>
-                 <div className="flex items-center gap-2">
-                    <div className="w-6 h-6 rounded bg-gray-800/50 flex items-center justify-center text-sm flex-shrink-0">✌️</div>
+                 <div className="flex items-center gap-1.5">
+                    <div className="w-5 h-5 rounded bg-gray-800/50 flex items-center justify-center text-xs flex-shrink-0">✌️</div>
                     <div className="min-w-0">
-                       <div className="text-cyan-400 font-bold text-xs">IDENTITY</div>
-                       <div className="text-[10px] text-gray-500 leading-tight">Victory sign</div>
+                       <div className="text-cyan-400 font-bold text-[10px]">IDENTITY</div>
+                       <div className="text-[9px] text-gray-500 leading-tight">Victory sign</div>
                     </div>
                  </div>
-                 <div className="flex items-center gap-2">
-                    <div className="w-6 h-6 rounded bg-gray-800/50 flex items-center justify-center text-sm flex-shrink-0">☝️</div>
+                 <div className="flex items-center gap-1.5">
+                    <div className="w-5 h-5 rounded bg-gray-800/50 flex items-center justify-center text-xs flex-shrink-0">☝️</div>
                     <div className="min-w-0">
-                       <div className="text-gray-200 font-bold text-xs">MECHA</div>
-                       <div className="text-[10px] text-gray-500 leading-tight">Index finger</div>
+                       <div className="text-gray-200 font-bold text-[10px]">MECHA</div>
+                       <div className="text-[9px] text-gray-500 leading-tight">Index finger</div>
                     </div>
                  </div>
-                 <div className="mt-3 pt-2 border-t border-gray-700/50 text-[10px] text-gray-500 leading-tight">
-                    &gt; tracking: {cameraActive ? <span className="text-green-500">ON</span> : <span className="text-red-500">OFF</span>} <br/>
-                    &gt; latency: {latency}ms
-                 </div>
+              </div>
+              <div className="mt-2 pt-1.5 border-t border-gray-700/50 text-[9px] text-gray-500 leading-tight flex justify-between">
+                 <span>&gt; tracking: {cameraActive ? <span className="text-green-500">ON</span> : <span className="text-red-500">OFF</span>}</span>
+                 <span>&gt; latency: {latency}ms</span>
               </div>
            </div>
         </div>
       </main>
 
-      {/* 移动端联系方式 - 底部显示 */}
-      <footer className="relative z-20 md:hidden px-6 py-4 border-t border-gray-800/50">
+      {/* 移动端联系方式 - 底部显示，避免与手势提示框重叠 */}
+      <footer className="relative z-20 md:hidden px-4 py-3 border-t border-gray-800/50 pb-20">
         <a 
           href="mailto:[email protected]" 
-          className="flex items-center justify-center gap-2 text-xs text-gray-500 hover:text-emerald-400 transition-colors"
+          className="flex items-center justify-center gap-2 text-[10px] sm:text-xs text-gray-500 hover:text-emerald-400 transition-colors"
         >
-          <Mail size={12} />
+          <Mail size={10} className="sm:w-3 sm:h-3" />
           <span className="font-mono">[email protected]</span>
         </a>
       </footer>