1<!doctype html> 2<html lang="zh-CN"> 3 4<head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>Why Arcrobo - Arcrobo</title> 8 <link rel="shortcut icon" href="./images/favicon.jpg" type="image/x-icon" /> 9 <!-- Tailwind CSS --> 10 <!--
10<script src="https://cdn.tailwindcss.com"></script>
10 --> 11
11<script src="./js/3.4.17.js"></script>
11 12 <!-- Font Awesome --> 13 <!-- <link 14 rel="stylesheet" 15 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" 16 /> --> 17 <link rel="stylesheet" href="./css/all.min.css" /> 18 <!-- Three.js --> 19 <!--
19<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
19 --> 20
20<script src="./js/three.min.js"></script>
20 21 <!-- GSAP å¨ç»åº --> 22 <!--
22<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
22 --> 23
23<script src="./js/gsap.min.js"></script>
23 24 <!--
24<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
24 --> 25
25<script src="./js/ScrollTrigger.min.js"></script>
25 26
26<script src="./js/fetchAPI.js"></script>
26 27 <link rel="stylesheet" href="./css/index.css" /> 28 29
29<script> 30 tailwind.config = { 31 theme: { 32 extend: { 33 colors: { 34 primary: { 35 50: "#e6f1ff", 36 100: "#cce3ff", 37 200: "#99c7ff", 38 300: "#66abff", 39 400: "#338fff", 40 500: "#0073ff", 41 600: "#005ccc", 42 700: "#004599", 43 800: "#002e66", 44 900: "#001733", 45 }, 46 secondary: { 47 50: "#f3e6ff", 48 100: "#e7ccff", 49 200: "#cf99ff", 50 300: "#b766ff", 51 400: "#9f33ff", 52 500: "#8700ff", 53 600: "#6e00cc", 54 700: "#560099", 55 800: "#3d0066", 56 900: "#1f0033", 57 }, 58 }, 59 fontFamily: { 60 sans: ["Inter", "sans-serif"], 61 }, 62 }, 63 }, 64 }; 65 </script>
65 66 67 <style> 68 @import url("./css/css2?family=Inter:wght@300;400;500;600;700&display=swap"); 69 70 /* å ¥åºå¨ç»åå§ç¶æ */ 71 .animate-in { 72 opacity: 0; 73 transform: translateY(50px); 74 } 75 76 .animate-in-left { 77 opacity: 0; 78 transform: translateX(-50px); 79 } 80 81 .animate-in-right { 82 opacity: 0; 83 transform: translateX(50px); 84 } 85 86 .animate-in-scale { 87 opacity: 0; 88 transform: scale(0.8); 89 } 90 91 .animate-in-fade { 92 opacity: 0; 93 } 94 95 html { 96 scroll-behavior: smooth; 97 } 98 99 body { 100 font-family: "Inter", sans-serif; 101 overflow-x: hidden; 102 } 103 104 #canvas-container { 105 position: fixed; 106 top: 0; 107 left: 0; 108 width: 100%; 109 height: 100%; 110 z-index: -1; 111 } 112 113 .gradient-text { 114 background: linear-gradient(90deg, #0073ff, #8700ff); 115 -webkit-background-clip: text; 116 background-clip: text; 117 color: transparent; 118 } 119 120 .card { 121 background: rgba(13, 17, 23, 0.7); 122 backdrop-filter: blur(10px); 123 border: 1px solid rgba(255, 255, 255, 0.1); 124 transition: all 0.3s ease; 125 } 126 127 .card:hover { 128 transform: translateY(-5px); 129 box-shadow: 0 10px 20px rgba(0, 115, 255, 0.2); 130 border: 1px solid rgba(0, 115, 255, 0.3); 131 } 132 133 .btn-primary { 134 background: linear-gradient(90deg, #0073ff, #8700ff); 135 transition: all 0.3s ease; 136 position: relative; 137 overflow: hidden; 138 } 139 140 .btn-primary:hover { 141 transform: translateY(-2px); 142 box-shadow: 0 5px 15px rgba(0, 115, 255, 0.4); 143 } 144 145 .btn-primary::after { 146 content: ""; 147 position: absolute; 148 top: 50%; 149 left: 50%; 150 width: 0; 151 height: 0; 152 background: rgba(255, 255, 255, 0.2); 153 border-radius: 50%; 154 transform: translate(-50%, -50%); 155 transition: 156 width 0.6s, 157 height 0.6s; 158 } 159 160 .btn-primary:hover::after { 161 width: 300px; 162 height: 300px; 163 } 164 165 .nav-link { 166 position: relative; 167 transition: all 0.3s ease; 168 } 169 170 .nav-link::after { 171 content: ""; 172 position: absolute; 173 bottom: -5px; 174 left: 0; 175 width: 0; 176 height: 2px; 177 background: linear-gradient(90deg, #0073ff, #8700ff); 178 transition: width 0.3s ease; 179 } 180 181 .nav-link-active::after { 182 width: 100%; 183 } 184 185 .nav-link:hover::after { 186 width: 100%; 187 } 188 189 .animate-float { 190 animation: float 6s ease-in-out infinite; 191 } 192 193 @keyframes float { 194 0% { 195 transform: translateY(0px); 196 } 197 198 50% { 199 transform: translateY(-20px); 200 } 201 202 100% { 203 transform: translateY(0px); 204 } 205 } 206 207 .glow { 208 box-shadow: 0 0 15px rgba(0, 115, 255, 0.5); 209 } 210 211 .tech-pattern { 212 background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230073ff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); 213 } 214 215 /* ååºå¼è°æ´ */ 216 @media (max-width: 768px) { 217 .hero-content { 218 padding-top: 6rem; 219 padding-bottom: 3rem; 220 } 221 222 .hero-title { 223 font-size: 2.5rem; 224 } 225 } 226 227 /* å è½½å¨ç» */ 228 .loader { 229 position: fixed; 230 top: 0; 231 left: 0; 232 width: 100%; 233 height: 100%; 234 background: #0d1117; 235 display: flex; 236 justify-content: center; 237 align-items: center; 238 z-index: 9999; 239 transition: 240 opacity 0.5s ease, 241 visibility 0.5s ease; 242 } 243 244 .loader.hidden { 245 opacity: 0; 246 visibility: hidden; 247 } 248 249 .loader-circle { 250 width: 50px; 251 height: 50px; 252 border: 3px solid rgba(0, 115, 255, 0.3); 253 border-top: 3px solid #0073ff; 254 border-radius: 50%; 255 animation: spin 1s linear infinite; 256 } 257 258 @keyframes spin { 259 0% { 260 transform: rotate(0deg); 261 } 262 263 100% { 264 transform: rotate(360deg); 265 } 266 } 267 </style> 268</head> 269 270<body class="bg-gray-900 text-white"> 271 <!-- å è½½å¨ç» --> 272 <div class="loader"> 273 <div class="loader-circle"></div> 274 </div> 275 276 <!-- 3Dèæ¯å®¹å¨ --> 277 <div id="canvas-container"></div> 278 279 <!-- å¯¼èªæ --> 280 <nav class="fixed top-0 left-0 w-full z-50 bg-opacity-80 bg-gray-900 backdrop-blur-md border-b border-gray-800"> 281 <div class="container mx-auto px-4 py-3"> 282 <div class="flex justify-between items-center"> 283 <!-- Logo --> 284 <div class="flex items-center"> 285 <img src="./images/logo.png" alt="Arcrobo Logo" class="h-10 w-auto" /> 286 <!-- <span class="ml-3 text-xl font-bold gradient-text hidden md:block" 287 >Arcrobo</span 288 > --> 289 </div> 290 291 <!-- æ¡é¢å¯¼èªé¾æ¥ --> 292 <div class="hidden md:flex space-x-8"> 293 <a href="./index.html" class="nav-link nav-link-active text-gray-300 hover:text-white">Why Arcrobo</a> 294 <!-- <a 295 href="./companyHistory.html"
296 class="nav-link text-gray-300 hover:text-white" 297 >å ¬å¸åå²</a 298 > --> 299 <a href="./product.html" class="nav-link text-gray-300 hover:text-white">Product</a> 300 <a href="/ourPartners.html" class="nav-link text-gray-300 hover:text-white">Our Partners</a> 301 <a href="./contact.html" class="nav-link text-gray-300 hover:text-white">Contact</a> 302 </div> 303 304 <!-- ç§»å¨ç«¯èåæé® --> 305 <div class="md:hidden"> 306 <button id="menu-toggle" class="text-gray-300 hover:text-white focus:outline-none"> 307 <i class="fas fa-bars text-xl"></i> 308 </button> 309 </div> 310 </div> 311 312 <!-- ç§»å¨ç«¯å¯¼èªèå --> 313 <div id="mobile-menu" 314 class="md:hidden overflow-hidden transition-all duration-300 ease-in-out transform opacity-0 h-0 mt-4 pb-0"> 315 <div class="py-2 space-y-2"> 316 <a href="./index.html" 317 class="block py-2 text-gray-300 hover:text-white transform transition-transform duration-300 hover:translate-x-2">Why 318 Arcrobo</a> 319 <!-- <a 320 href="./companyHistory.html" 321 class="block py-2 text-gray-300 hover:text-white transform transition-transform duration-300 hover:translate-x-2" 322 >å ¬å¸åå²</a 323 > --> 324 <a href="./product.html" 325 class="block py-2 text-gray-300 hover:text-white transform transition-transform duration-300 hover:translate-x-2">Product</a> 326 <a href="./ourPartners.html" 327 class="block py-2 text-gray-300 hover:text-white transform transition-transform duration-300 hover:translate-x-2">Our 328 Partners</a> 329 <a href="./contact.html" 330 class="block py-2 text-gray-300 hover:text-white transform transition-transform duration-300 hover:translate-x-2">Contact</a> 331 </div> 332 </div> 333 </div> 334 </nav> 335 336 <!-- è±éåºå --> 337 <section id="home" class="min-h-screen flex items-center pt-16 tech-pattern"> 338 <div class="container mx-auto px-4 py-16"> 339 <div class="flex flex-col md:flex-row items-center"> 340 <!-- 左侧å 容 --> 341 <div class="md:w-1/2 mb-10 md:mb-0 hero-content"> 342 <h1 class="hero-title text-4xl md:text-6xl font-bold mb-6 leading-tight animate-in-left" data-delay="0.2"> 343 <span class="gradient-text">Leading Technologyï¼</span><br /> 344 Creating the Future 345 </h1> 346 <p class="text-xl text-gray-300 mb-8 max-w-lg animate-in-left" data-delay="0.4">
347 We provide cutting-edge technology and solutions, empowering 348 drones, robots, and smart devices to create a smarter, more 349 efficient future world. 350 </p> 351 <div class="flex flex-wrap gap-4 animate-in-left" data-delay="0.6"> 352 <a href="#products" class="btn-primary px-8 py-3 rounded-full font-medium text-white"> 353 Explore Products 354 </a> 355 <a href="#contact" 356 class="px-8 py-3 rounded-full font-medium border border-primary-500 text-primary-500 hover:bg-primary-500 hover:text-white transition duration-300"> 357 Contact Us 358 </a> 359 </div> 360 </div> 361 362 <!-- å³ä¾§å¾ç --> 363 <div class="md:w-1/2 flex justify-center animate-in-right" data-delay="0.4"> 364 <img src="./images/index/index1.jfif" alt="æ 人æºä¸æºå¨äºº" 365 class="w-full max-w-lg rounded-lg shadow-2xl animate-float glow" /> 366 </div> 367 </div> 368 </div> 369 </section> 370 371 <!-- 产åå±ç¤ºåºå --> 372 <!-- <section id="products" class="py-20 bg-gray-900 relative overflow-hidden"> 373 <div class="absolute inset-0 opacity-10"> 374 <img 375 src="./images/indexBG1.jpg" 376 alt="èæ¯" 377 class="w-full h-full object-cover" 378 /> 379 </div> 380 381 <div class="container mx-auto px-4 relative z-10"> 382 <div class="text-center mb-16 animate-in-fade" data-delay="0.2"> 383 <h2 class="text-3xl md:text-5xl font-bold mb-4"> 384 <span class="gradient-text">Cutting-Edge Tech</span> Products 385 </h2> 386 <p class="text-xl text-gray-300 max-w-3xl mx-auto"> 387 We offer a diverse range of products and solutions to meet the 388 intelligent device needs in various fields. 389 </p> 390 </div> 391 392 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> 393 <div 394 class="card rounded-xl overflow-hidden animate-in-scale" 395 data-delay="0.4" 396 > 397 <div class="h-48 overflow-hidden"> 398 <img 399 src="./images/indexBG2.jpg" 400 alt="髿§è½è¯ç" 401 class="w-full h-full object-cover transition-transform duration-500 hover:scale-110" 402 /> 403 </div> 404 <div class="p-6"> 405 <div class="flex items-center mb-4"> 406 <div 407 class="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center mr-3" 408 > 409 <i class="fas fa-microchip text-white"></i> 410 </div> 411 <h3 class="text-xl font-semibold">髿§è½è¯ç</h3> 412 </div> 413 <p class="text-gray-400 mb-4"> 414 éç¨å è¿å·¥èºå¶ç¨ï¼æä¾åè¶ç计ç®è½ååè½ææ¯ï¼éç¨äºåç±»é«ç«¯æºè½è®¾å¤ã 415 </p> 416 <div class="flex justify-between items-center"> 417 <span class="text-sm text-primary-400">äºè§£æ´å¤</span> 418 <i class="fas fa-arrow-right text-primary-400"></i> 419 </div> 420 </div> 421 </div> 422 423 <div 424 class="card rounded-xl overflow-hidden animate-in-scale" 425 data-delay="0.6" 426 > 427 <div class="h-48 overflow-hidden"> 428 <img 429 src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/e020aad2e38b4a03a75795f9589b2de3~tplv-a9rns2rl98-image.image?lk3s=8e244e95&rcl=2026012615543169494D2E1A884E172CBC&rrcfp=f06b921b&x-expires=1772006099&x-signature=HvDMGwclC%2F%2Fy6%2BlET4cGOic18gM%3D" 430 alt="æ 人æºè§£å³æ¹æ¡" 431 class="w-full h-full object-cover transition-transform duration-500 hover:scale-110" 432 /> 433 </div> 434 <div class="p-6"> 435 <div class="flex items-center mb-4"> 436 <div 437 class="w-10 h-10 rounded-full bg-secondary-500 flex items-center justify-center mr-3" 438 > 439 <i class="fas fa-plane text-white"></i> 440 </div> 441 <h3 class="text-xl font-semibold">æ 人æºè§£å³æ¹æ¡</h3> 442 </div> 443 <p class="text-gray-400 mb-4"> 444 ä¸ä¸ºæ 人æºè®¾è®¡çè¯çç»ï¼æä¾ç¨³å®ç飿§ç³»ç»ã髿¸ å¾åå¤çåæºè½é¿éåè½ã 445 </p> 446 <div class="flex justify-between items-center">
447 <span class="text-sm text-secondary-400">äºè§£æ´å¤</span> 448 <i class="fas fa-arrow-right text-secondary-400"></i> 449 </div> 450 </div> 451 </div> 452 453 <div 454 class="card rounded-xl overflow-hidden animate-in-scale" 455 data-delay="0.8" 456 > 457 <div class="h-48 overflow-hidden"> 458 <img 459 src="./images/indexBG1.jpg" 460 alt="æºè½æºå¨äººè¯ç" 461 class="w-full h-full object-cover transition-transform duration-500 hover:scale-110" 462 /> 463 </div> 464 <div class="p-6"> 465 <div class="flex items-center mb-4"> 466 <div 467 class="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center mr-3" 468 > 469 <i class="fas fa-robot text-white"></i> 470 </div> 471 <h3 class="text-xl font-semibold">æºè½æºå¨äººè¯ç</h3> 472 </div> 473 <p class="text-gray-400 mb-4"> 474 为åç±»æºå¨äººæä¾å¼ºå¤§çAI计ç®è½åï¼æ¯æå¤æç¯å¢æç¥ãå³çåæ§è¡ä»»å¡ã 475 </p> 476 <div class="flex justify-between items-center"> 477 <span class="text-sm text-primary-400">äºè§£æ´å¤</span> 478 <i class="fas fa-arrow-right text-primary-400"></i> 479 </div> 480 </div> 481 </div> 482 </div> 483 484 <div class="text-center mt-12"> 485 <a 486 href="#contact" 487 class="btn-primary px-8 py-3 rounded-full font-medium text-white inline-block" 488 > 489 Consulting Solutions 490 </a> 491 </div> 492 </div> 493 </section> --> 494 <!-- 产åå±ç¤ºåºå --> 495 <section id="products" class="py-20 bg-gray-900 relative overflow-hidden"> 496 <div class="absolute inset-0 opacity-10"> 497 <img src="./images/indexBG1.jpg" alt="èæ¯" class="w-full h-full object-cover" /> 498 </div> 499 500 <div class="container mx-auto px-4 relative z-10"> 501 <div class="text-center mb-16 animate-in-fade" data-delay="0.2"> 502 <h2 class="text-3xl md:text-5xl font-bold mb-4"> 503 <span class="gradient-text">Cutting-Edge Tech</span> Products 504 </h2> 505 <p class="text-xl text-gray-300 max-w-3xl mx-auto"> 506 We offer a diverse range of products and solutions to meet the 507 intelligent device needs in various fields. 508 </p> 509 </div> 510 511 <!-- 产åå¡çç½æ ¼å®¹å¨ï¼æ¸ 空åºå®å¡çï¼ç空ç¨äºJS渲æï¼ --> 512 <div id="productGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> 513 <!-- 卿å 容å°å¨è¿éæå ¥ --> 514 </div> 515 516 <div class="text-center mt-12"> 517 <a href="#contact" class="btn-primary px-8 py-3 rounded-full font-medium text-white inline-block"> 518 Consulting Solutions 519 </a> 520 </div> 521 </div> 522 </section> 523 524 <!-- Our Solutions Design Process 模å --> 525 <section id="process" class="py-20 relative overflow-hidden"> 526 <div class="absolute inset-0 opacity-5"> 527 <div class="tech-pattern w-full h-full"></div> 528 </div> 529 530 <div class="container mx-auto px-4 relative z-10"> 531 <div class="text-center mb-16 animate-in-fade" data-delay="0.2"> 532 <h2 class="text-3xl md:text-5xl font-bold mb-4"> 533 Our Solutions <span class="gradient-text">Design Process</span> 534 </h2> 535 <p class="text-xl text-gray-300 max-w-3xl mx-auto"> 536 We adopt a systematic design process to ensure we provide our 537 clients with the highest quality solutions. 538 </p> 539 </div> 540 541 <!-- æ¶é´è½´æµç¨ --> 542 <div class="relative max-w-4xl mx-auto mt-12"> 543 <!-- ä¸å¤®æ¶é´è½´çº¿ --> 544 <div 545 class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-primary-500 to-secondary-500 z-0 hidden md:block"> 546 </div> 547 548 <!-- æ¶é´è½´æ¥éª¤ --> 549 <div class="space-y-16 relative z-10"> 550 <!-- æ¥éª¤1: Idea --> 551 <div class="flex items-center animate-in md:flex-row flex-col" data-delay="0.2"> 552 <!-- 左侧å 容 --> 553 <div class="w-full md:w-1/2 md:pr-12 text-center md:text-right mb-4 md:mb-0"> 554 <h3 class="text-xl font-semibold text-white mb-2">01. Idea</h3> 555 <!-- <p class="text-gray-300 mb-4"> 556 åæææä¸éæ±æ¶éï¼ç¡®å®é¡¹ç®ç®æ å忥æ¹å 557 </p> --> 558 <div class="card rounded-xl overflow-hidden"> 559 <img src="./images/index/our1.png" alt="Idea" 560 class="w-full h-40 object-cover hover:scale-105 transition-transform duration-500" /> 561 </div> 562 </div> 563 564 <!-- ä¸å¤®èç¹ --> 565 <div class="z-20 my-4 md:my-0 hidden md:block"> 566 <div 567 class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center text-2xl font-bold text-white border-4 border-gray-900 shadow-lg shadow-primary-500/30"> 568 <i class="fas fa-lightbulb"></i> 569 </div> 570 </div> 571 572 <!-- å³ä¾§ç©ºç½ --> 573 <div class="w-1/2 pl-12"></div> 574 </div> 575 576 <!-- æ¥éª¤2: Design Concept --> 577 <div class="flex items-center animate-in md:flex-row flex-col" data-delay="0.3"> 578 <!-- å·¦ä¾§ç©ºç½ --> 579 <div class="w-1/2 pr-12"></div> 580 581 <!-- ä¸å¤®èç¹ --> 582 <div class="z-20 my-4 md:my-0 hidden md:block"> 583 <div 584 class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center text-2xl font-bold text-white border-4 border-gray-900 shadow-lg shadow-primary-500/30"> 585 <i class="fas fa-pencil-ruler"></i> 586 </div> 587 </div> 588 589 <!-- å³ä¾§å 容 --> 590 <div class="w-full md:w-1/2 md:pl-12 text-center md:text-left"> 591 <h3 class="text-xl font-semibold text-white mb-2"> 592 02. Design Concept 593 </h3> 594 <!-- <p class="text-gray-300 mb-4"> 595 åæææä¸éæ±æ¶éï¼ç¡®å®é¡¹ç®ç®æ å忥æ¹å 596 </p> --> 597 <div class="card rounded-xl overflow-hidden"> 598 <img src="./images/index/our2.png" alt="Idea" 599 class="w-full h-40 object-cover hover:scale-105 transition-transform duration-500" /> 600 </div> 601 </div> 602 </div> 603 604 <!-- æ¥éª¤3: System Design --> 605 <div class="flex items-center animate-in md:flex-row flex-col" data-delay="0.4"> 606 <!-- 左侧å 容 --> 607 <div class="w-full md:w-1/2 md:pr-12 text-center md:text-right mb-4 md:mb-0"> 608 <h3 class="text-xl font-semibold text-white mb-2"> 609 03. System Design 610 </h3> 611 <!-- <p class="text-gray-300 mb-4"> 612 åæææä¸éæ±æ¶éï¼ç¡®å®é¡¹ç®ç®æ å忥æ¹å 613 </p> --> 614 <div class="card rounded-xl overflow-hidden"> 615 <img src="./images/index/our3.png" alt="System Design" 616 class="w-full h-40 object-cover hover:scale-105 transition-transform duration-500" /> 617 </div> 618 </div> 619 620 <!-- ä¸å¤®èç¹ ææºç«¯éè--> 621 <div class="z-20 my-4 md:my-0 hidden md:block"> 622 <div 623 class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center text-2xl font-bold text-white border-4 border-gray-900 shadow-lg shadow-primary-500/30"> 624 <i class="fas fa-sitemap"></i> 625 </div> 626 </div> 627 628 <!-- å³ä¾§ç©ºç½ --> 629 <div class="w-1/2 pl-12"></div> 630 </div> 631 632 <!-- æ¥éª¤4: Hardware/Software Design --> 633 <div class="flex items-center animate-in md:flex-row flex-col" data-delay="0.5"> 634 <!-- å·¦ä¾§ç©ºç½ --> 635 <div class="w-1/2 pr-12"></div> 636 637 <!-- ä¸å¤®èç¹ --> 638 <div class="z-20 my-4 md:my-0 hidden md:block"> 639 <div 640 class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center text-2xl font-bold text-white border-4 border-gray-900 shadow-lg shadow-primary-500/30"> 641 <i class="fas fa-microchip"></i> 642 </div> 643 </div> 644 645 <!-- å³ä¾§å 容 --> 646 <div class="w-full md:w-1/2 md:pl-12 text-center md:text-left"> 647 <h3 class="text-xl font-semibold text-white mb-2"> 648 04. Hardware/Software Design 649 </h3> 650 <!-- <p class="text-gray-300 mb-4"> 651 åæææä¸éæ±æ¶éï¼ç¡®å®é¡¹ç®ç®æ å忥æ¹å 652 </p> --> 653 <div class="card rounded-xl overflow-hidden"> 654 <img src="./images/index/our4.png" alt="Hardware/Software Design" 655 class="w-full h-40 object-cover hover:scale-105 transition-transform duration-500" /> 656 </div> 657 </div> 658 </div> 659 660 <!-- æ¥éª¤5: Circuit Board Production --> 661 <div class="flex items-center animate-in md:flex-row flex-col" data-delay="0.6"> 662 <!-- 左侧å 容 --> 663 <div class="w-full md:w-1/2 md:pr-12 text-center md:text-right mb-4 md:mb-0"> 664 <h3 class="text-xl font-semibold text-white mb-2"> 665 05. Circuit Board Production 666 </h3> 667 <!-- <p class="text-gray-300 mb-4"> 668 åæææä¸éæ±æ¶éï¼ç¡®å®é¡¹ç®ç®æ å忥æ¹å 669 </p> --> 670 <div class="card rounded-xl overflow-hidden"> 671 <img src="./images/index/our5.png" 672 class="w-full h-40 object-cover hover:scale-105 transition-transform duration-500" /> 673 </div> 674 </div> 675 676 <!-- ä¸å¤®èç¹ --> 677 <div class="z-20 my-4 md:my-0 hidden md:block"> 678 <div 679 class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center text-2xl font-bold text-white border-4 border-gray-900 shadow-lg shadow-primary-500/30"> 680 <i class="fas fa-book"></i> 681 </div> 682 </div> 683 684 <!-- å³ä¾§ç©ºç½ --> 685 <div class="w-1/2 pl-12"></div> 686 </div> 687 688 <!-- æ¥éª¤6: Verification/Certification --> 689 <div class="flex items-center animate-in md:flex-row flex-col" data-delay="0.7"> 690 <!-- å·¦ä¾§ç©ºç½ --> 691 <div class="w-1/2 pr-12"></div> 692 693 <!-- ä¸å¤®èç¹ --> 694 <div class="z-20 my-4 md:my-0 hidden md:block"> 695 <div 696 class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center text-2xl font-bold text-white border-4 border-gray-900 shadow-lg shadow-primary-500/30"> 697 <i class="fas fa-check-circle"></i> 698 </div> 699 </div> 700 701 <!-- å³ä¾§å 容 --> 702 <div class="w-full md:w-1/2 md:pl-12 text-center md:text-left"> 703 <h3 class="text-xl font-semibold text-white mb-2"> 704 06. Verification/Certification 705 </h3> 706 <!-- <p class="text-gray-300 mb-4"> 707 åæææä¸éæ±æ¶éï¼ç¡®å®é¡¹ç®ç®æ å忥æ¹å 708 </p> --> 709 <div class="card rounded-xl overflow-hidden"> 710 <img src="./images/index/our6.png" alt="Verification/Certification" 711 class="w-full h-40 object-cover hover:scale-105 transition-transform duration-500" /> 712 </div> 713 </div> 714 </div> 715 716 <!-- æ¥éª¤7: Mass Production --> 717 <div class="flex items-center animate-in md:flex-row flex-col" data-delay="0.8"> 718 <!-- 左侧å 容 --> 719 <div class="w-full md:w-1/2 md:pr-12 text-center md:text-right mb-4 md:mb-0"> 720 <h3 class="text-xl font-semibold text-white mb-2"> 721 07. Mass Production 722 </h3> 723 <!-- <p class="text-gray-300 mb-4"> 724 åæææä¸éæ±æ¶éï¼ç¡®å®é¡¹ç®ç®æ å忥æ¹å 725 </p> --> 726 <div class="card rounded-xl overflow-hidden"> 727 <img src="./images/index/our7.png" alt="Mass Production" 728 class="w-full h-40 object-cover hover:scale-105 transition-transform duration-500" /> 729 </div> 730 </div> 731 732 <!-- ä¸å¤®èç¹ --> 733 <div class="z-20 my-4 md:my-0 hidden md:block"> 734 <div 735 class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center text-2xl font-bold text-white border-4 border-gray-900 shadow-lg shadow-primary-500/30"> 736 <i class="fas fa-industry"></i> 737 </div> 738 </div> 739 740 <!-- å³ä¾§ç©ºç½ --> 741 <div class="w-1/2 pl-12"></div> 742 </div> 743 </div> 744 </div> 745 746 <!-- æµç¨ä¼å¿ --> 747 <div class="mt-20 grid grid-cols-1 md:grid-cols-3 gap-8"> 748 <!-- ä¼å¿1 --> 749 <div class="card p-8 rounded-xl animate-in-left" data-delay="1.2"> 750 <div class="w-12 h-12 mb-6 rounded-lg bg-primary-500 flex items-center justify-center"> 751 <i class="fas fa-cogs text-2xl text-white"></i> 752 </div> 753 <h3 class="text-xl font-semibold mb-4 text-white"> 754 Standardized process 755 </h3> 756 <p class="text-gray-300"> 757 Adopting industry-standard development processes to ensure the 758 project is completed on time, with high quality, and to the 759 required quantity 760 </p> 761 </div> 762 763 <!-- ä¼å¿2 --> 764 <div class="card p-8 rounded-xl animate-in" data-delay="1.4"> 765 <div class="w-12 h-12 mb-6 rounded-lg bg-primary-500 flex items-center justify-center"> 766 <i class="fas fa-users text-2xl text-white"></i> 767 </div> 768 <h3 class="text-xl font-semibold mb-4 text-white"> 769 Professional team 770 </h3> 771 <p class="text-gray-300"> 772 An experienced development team capable of tackling various 773 complex technical challenges 774 </p> 775 </div> 776 777 <!-- ä¼å¿3 --> 778 <div class="card p-8 rounded-xl animate-in-right" data-delay="1.6"> 779 <div class="w-12 h-12 mb-6 rounded-lg bg-primary-500 flex items-center justify-center"> 780 <i class="fas fa-chart-line text-2xl text-white"></i> 781 </div> 782 <h3 class="text-xl font-semibold mb-4 text-white"> 783 Continuous improvement 784 </h3> 785 <p class="text-gray-300"> 786 Providing continuous technical support and performance 787 optimization services after project completion 788 </p> 789 </div> 790 </div> 791 792 <!-- èç³»æä»¬æé® --> 793 <div class="text-center mt-16 animate-in-fade" data-delay="1.8"> 794 <a href="#contact" class="btn-primary inline-block px-8 py-4 rounded-lg font-medium text-white"> 795 Start your project <i class="fas fa-arrow-right ml-2"></i> 796 </a> 797 </div> 798 </div> 799 </section> 800 801 <!-- Design Capability 模å --> 802 <section id="capability" class="py-20 bg-gray-900 relative overflow-hidden"> 803 <div class="absolute inset-0 opacity-5"> 804 <div class="tech-pattern w-full h-full"></div> 805 </div> 806 807 <div class="container mx-auto px-4 relative z-10"> 808 <div class="text-center mb-16 animate-in-fade" data-delay="0.2"> 809 <h2 class="text-3xl md:text-5xl font-bold mb-4">
810 <span class="gradient-text">Design Capability</span> 811 </h2> 812 <p class="text-xl text-gray-300 max-w-3xl mx-auto"> 813 We possess comprehensive design capabilities, covering everything 814 from hardware to software, and from concept to mass production, to 815 provide you with complete solutions. 816 </p> 817 </div> 818 819 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> 820 <!-- Engineering Services --> 821 <div 822 class="card bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-xl p-6 hover:border-primary-500 transition-all duration-300 animate-in" 823 data-delay="0.1"> 824 <div class="flex items-start mb-4"> 825 <div class="w-16 h-16 bg-blue-600/20 rounded-lg flex items-center justify-center mr-4"> 826 <img src="./images/index/design1.png" alt="硬件设计" class="w-10 h-10 object-contain" /> 827 </div> 828 <div> 829 <h3 class="text-xl font-semibold text-white mb-1"> 830 Engineering Services 831 </h3> 832 <!-- <p class="text-gray-400 text-sm">XXXXX</p> --> 833 </div> 834 </div> 835 <ul class="space-y-2 text-gray-300"> 836 <li class="flex items-center"> 837 <i class="fas fa-check text-primary-500 mr-2"></i> 838 <span>Turn-key Embedded System Design</span> 839 </li> 840 <li class="flex items-center"> 841 <i class="fas fa-check text-primary-500 mr-2"></i> 842 <span>ARM-based MCU/MPU/DSP/FPGA Developmen</span> 843 </li> 844 <li class="flex items-center"> 845 <i class="fas fa-check text-primary-500 mr-2"></i> 846 <span>PWR /ETH /CAN /EMC /WiFi /BT /MIPI /LVDS /TP Module and 847 Accessories</span> 848 </li> 849 <li class="flex items-center"> 850 <i class="fas fa-check text-primary-500 mr-2"></i> 851 <span>SoMs (System on Module)</span> 852 </li> 853 <li class="flex items-center"> 854 <i class="fas fa-check text-primary-500 mr-2"></i> 855 <span>Customized EVKs (Evaluation Kits)</span> 856 </li> 857 </ul> 858 </div> 859 860 <!-- PCB Layout --> 861 <div 862 class="card bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-xl p-6 hover:border-primary-500 transition-all duration-300 animate-in" 863 data-delay="0.2"> 864 <div class="flex items-start mb-4"> 865 <div class="w-16 h-16 bg-blue-600/20 rounded-lg flex items-center justify-center mr-4"> 866 <img src="./images/index/design2.png" alt="æºæ¢°è®¾è®¡" class="w-10 h-10 object-contain" /> 867 </div> 868 <div> 869 <h3 class="text-xl font-semibold text-white mb-1"> 870 PCB Layout 871 </h3> 872 <!-- <p class="text-gray-400 text-sm">XXXXXX</p> --> 873 </div> 874 </div> 875 <ul class="space-y-2 text-gray-300"> 876 <li class="flex items-center"> 877 <i class="fas fa-check text-primary-500 mr-2"></i> 878 <span>Custom PCB Design (High-Speed, High-Density, Multi-Layer, and 879 Flexible Boards)</span> 880 </li> 881 <li class="flex items-center"> 882 <i class="fas fa-check text-primary-500 mr-2"></i> 883 <span>Design for Manufacturability(DFM) & Compliance</span> 884 </li> 885 <li class="flex items-center"> 886 <i class="fas fa-check text-primary-500 mr-2"></i> 887 <span>Thermal Management & Signal Integrity Analysis</span> 888 </li> 889 <li class="flex items-center"> 890 <i class="fas fa-check text-primary-500 mr-2"></i> 891 <span>Rapid Prototyping & Testing</span> 892 </li> 893 <li class="flex items-center"> 894 <i class="fas fa-check text-primary-500 mr-2"></i> 895 <span>Collaborative Design Process</span> 896 </li> 897 </ul> 898 </div> 899 900 <!-- Mechanical Design --> 901 <div 902 class="card bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-xl p-6 hover:border-primary-500 transition-all duration-300 animate-in" 903 data-delay="0.3"> 904 <div class="flex items-start mb-4"> 905 <div class="w-16 h-16 bg-blue-600/20 rounded-lg flex items-center justify-center mr-4"> 906 <img src="./images/index/design3.png" alt="çµæ°è®¾è®¡" class="w-10 h-10 object-contain" /> 907 </div> 908 <div> 909 <h3 class="text-xl font-semibold text-white mb-1"> 910 Mechanical Design 911 </h3> 912 <!-- <p class="text-gray-400 text-sm">XXXXXX</p> --> 913 </div> 914 </div> 915 <ul class="space-y-2 text-gray-300"> 916 <li class="flex items-center"> 917 <i class="fas fa-check text-primary-500 mr-2"></i>
918 <span>ID/Mechanical Design</span> 919 </li> 920 <li class="flex items-center"> 921 <i class="fas fa-check text-primary-500 mr-2"></i> 922 <span>Thermal Simulations/Cooling/Packaging solutions</span> 923 </li> 924 <li class="flex items-center"> 925 <i class="fas fa-check text-primary-500 mr-2"></i> 926 <span>Accessory design (power supply, cables connector...)</span> 927 </li> 928 <li class="flex items-center"> 929 <i class="fas fa-check text-primary-500 mr-2"></i> 930 <span>Molding Design</span> 931 </li> 932 </ul> 933 </div> 934 935 <!-- Software Design --> 936 <div 937 class="card bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-xl p-6 hover:border-primary-500 transition-all duration-300 animate-in" 938 data-delay="0.4"> 939 <div class="flex items-start mb-4"> 940 <div class="w-16 h-16 bg-blue-600/20 rounded-lg flex items-center justify-center mr-4"> 941 <img src="./images/index/design4.png" alt="仿çåæ" class="w-10 h-10 object-contain" /> 942 </div> 943 <div> 944 <h3 class="text-xl font-semibold text-white mb-1"> 945 Software Design 946 </h3> 947 <!-- <p class="text-gray-400 text-sm">XXXXX</p> --> 948 </div> 949 </div> 950 <ul class="space-y-2 text-gray-300"> 951 <li class="flex items-center"> 952 <i class="fas fa-check text-primary-500 mr-2"></i> 953 <span>Edge Computing</span> 954 </li> 955 <li class="flex items-center"> 956 <i class="fas fa-check text-primary-500 mr-2"></i> 957 <span>MCU /RTOS /Linux /Android /IOs system</span> 958 </li> 959 <li class="flex items-center"> 960 <i class="fas fa-check text-primary-500 mr-2"></i> 961 <span>Embedded software design</span> 962 </li> 963 <li class="flex items-center"> 964 <i class="fas fa-check text-primary-500 mr-2"></i> 965 <span>Saas Cloud Platform Server</span> 966 </li> 967 <li class="flex items-center"> 968 <i class="fas fa-check text-primary-500 mr-2"></i> 969 <span>IOT Architecture and software & Al software and model 970 design</span> 971 </li> 972 </ul> 973 </div> 974 975 <!-- Compliance Testing --> 976 <div 977 class="card bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-xl p-6 hover:border-primary-500 transition-all duration-300 animate-in" 978 data-delay="0.5"> 979 <div class="flex items-start mb-4"> 980 <div class="w-16 h-16 bg-blue-600/20 rounded-lg flex items-center justify-center mr-4"> 981 <img src="./images/index/design5.png" alt="è®¤è¯æµè¯" class="w-10 h-10 object-contain" /> 982 </div> 983 <div> 984 <h3 class="text-xl font-semibold text-white mb-1"> 985 Compliance Testing 986 </h3> 987 <!-- <p class="text-gray-400 text-sm">XXXXXX</p> --> 988 </div> 989 </div> 990 <ul class="space-y-2 text-gray-300"> 991 <li class="flex items-center"> 992 <i class="fas fa-check text-primary-500 mr-2"></i> 993 <span>Regulatory Compliance:CE, FCC, 3C,UL certification</span> 994 </li> 995 <li class="flex items-center"> 996 <i class="fas fa-check text-primary-500 mr-2"></i> 997 <span>Pre-Scan & Environmental Testing: EMC, ESD,themmal, 998 vibration; RoHS & REACH compliant</span> 999 </li> 1000 <li class="flex items-center"> 1001 <i class="fas fa-check text-primary-500 mr-2"></i> 1002 <span>Electrical & Functional Testing: Performance verification and 1003 reliability assessments</span> 1004 </li> 1005 <li class="flex items-center"> 1006 <i class="fas fa-check text-primary-500 mr-2"></i>
1007 <span>Quality Assurance:Rigorous QA protocols and comprehensive 1008 reporting</span> 1009 </li> 1010 </ul> 1011 </div> 1012 1013 <!-- RMA Services --> 1014 <div 1015 class="card bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-xl p-6 hover:border-primary-500 transition-all duration-300 animate-in" 1016 data-delay="0.6"> 1017 <div class="flex items-start mb-4"> 1018 <div class="w-16 h-16 bg-blue-600/20 rounded-lg flex items-center justify-center mr-4"> 1019 <img src="./images/index/design6.png" alt="è®¤è¯æµè¯" class="w-10 h-10 object-contain" /> 1020 </div> 1021 <div> 1022 <h3 class="text-xl font-semibold text-white mb-1"> 1023 RMA Services 1024 </h3> 1025 <!-- <p class="text-gray-400 text-sm">XXXXX</p> --> 1026 </div> 1027 </div> 1028 <ul class="space-y-2 text-gray-300"> 1029 <li class="flex items-center"> 1030 <i class="fas fa-check text-primary-500 mr-2"></i> 1031 <span>Custom PCB Design (High-Speed, High-Density, Multi-Layer, and 1032 Flexible Boards)</span> 1033 </li> 1034 <li class="flex items-center"> 1035 <i class="fas fa-check text-primary-500 mr-2"></i> 1036 <span>Design for Manufacturability (DFM) &Compliance</span> 1037 </li> 1038 <li class="flex items-center"> 1039 <i class="fas fa-check text-primary-500 mr-2"></i> 1040 <span>Thermal Management & Signal Integrity Analysis</span> 1041 </li> 1042 </ul> 1043 </div> 1044 </div> 1045 </div> 1046 </section> 1047 1048 <!-- å ³äºæä»¬ --> 1049 <section id="about" class="py-20 bg-gray-800 relative"> 1050 <div class="container mx-auto px-4"> 1051 <div class="text-center mb-16 animate-in-fade" data-delay="0.2"> 1052 <h2 class="text-3xl md:text-5xl font-bold mb-4"> 1053 About <span class="gradient-text">Arcrobo</span> 1054 </h2> 1055 <!-- <p class="text-xl text-gray-300 max-w-3xl mx-auto"> 1056 We are a high-tech enterprise specializing in research and 1057 development, dedicated to providing core computing power support for 1058 intelligent devices 1059 </p> --> 1060 </div> 1061 1062 <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> 1063 <div class="animate-in-left" data-delay="0.4"> 1064 <!-- <h3 class="text-2xl font-semibold mb-6 gradient-text"> 1065 Our Mission 1066 </h3> --> 1067 <p class="text-gray-300 mb-6 text-lg"> 1068 <!-- Through innovative technology, we empower intelligent 1069 devices, driving the development of Artificial Intelligence, the 1070 Internet of Things, and automation, thereby creating a smarter and 1071 more convenient lifestyle for humanity. --> 1072 </p> 1073 1074 <!-- <h3 class="text-2xl font-semibold mb-6 gradient-text"> 1075 Core Advantages 1076 </h3> --> 1077 <div class="space-y-4"> 1078 <div class="flex items-start animate-in-left" data-delay="0.6"> 1079 <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center mr-3 mt-1 flex-shrink-0"> 1080 <i class="fas fa-lightbulb text-white"></i> 1081 </div> 1082 <p class="text-gray-300"> 1083 1084 Arcrobo is a leading Edge AI solution provider with deep expertise in advanced embedded computing 1085 architectures. We work closely with global semiconductor leaders across AI MCUs, FPGAs, and 1086 heterogeneous computing platforms, enabling next-generation intelligent applications at the edge. 1087 </p> 1088 </div> 1089 <div class="flex items-start animate-in-left" data-delay="1.0"> 1090 <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center mr-3 mt-1 flex-shrink-0"> 1091 <i class="fas fa-lightbulb text-white"></i> 1092 </div> 1093 <p class="text-gray-300"> 1094 1095 Our core capabilities span the entire technology stack, including custom hardware design, low-level 1096 firmware and driver development, AI algorithm integration, and system-level software optimization. By 1097 tightly coupling hardware and software design, Arcrobo delivers high-performance, power-efficient, and 1098 scalable Edge AI platforms tailored to complex real-world applications. 1099 </p> 1100 </div> 1101 <div class="flex items-start animate-in-left" data-delay="1.0"> 1102 <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center mr-3 mt-1 flex-shrink-0"> 1103 <i class="fas fa-lightbulb text-white"></i> 1104 </div> 1105 <p class="text-gray-300"> 1106
1107 In addition, Arcrobo provides end-to-end engineering and manufacturing support, from prototype 1108 development and validation to mass production and global deployment. Our vertically integrated approach 1109 allows customers to accelerate innovation while reducing development risk and time-to-market. 1110 </p> 1111 </div> 1112 </div> 1113 </div> 1114 1115 <div class="relative animate-in-right" data-delay="0.6"> 1116 <div class="absolute -top-10 -left-10 w-40 h-40 bg-primary-500 rounded-full filter blur-3xl opacity-20"></div> 1117 <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-secondary-500 rounded-full filter blur-3xl opacity-20"> 1118 </div> 1119 1120 <div class="card p-8 rounded-xl relative z-10"> 1121 <h3 class="text-2xl font-semibold mb-6 gradient-text"> 1122 Company Data 1123 </h3> 1124 1125 <div class="grid grid-cols-2 gap-6"> 1126 <div class="text-center animate-in-scale" data-delay="0.8"> 1127 <div class="text-4xl font-bold text-primary-400 mb-2 counter" data-target="50"> 1128 50 1129 </div> 1130 <p class="text-gray-400">R&D Patents</p> 1131 </div> 1132 <div class="text-center animate-in-scale" data-delay="1.0"> 1133 <div class="text-4xl font-bold text-secondary-400 mb-2 counter" data-target="200"> 1134 200 1135 </div> 1136 <p class="text-gray-400">Global Customers</p> 1137 </div> 1138 <div class="text-center animate-in-scale" data-delay="1.2"> 1139 <div class="text-4xl font-bold text-primary-400 mb-2 counter" data-target="150"> 1140 150 1141 </div> 1142 <p class="text-gray-400">R&D Staff</p> 1143 </div> 1144 <div class="text-center animate-in-scale" data-delay="1.4"> 1145 <div class="text-4xl font-bold text-secondary-400 mb-2 counter" data-target="98"> 1146 98 1147 </div> 1148 <p class="text-gray-400">Customer Satisfaction %</p> 1149 </div> 1150 </div> 1151 </div> 1152 </div> 1153 </div> 1154 </div> 1155 </section> 1156 1157 <!-- èç³»æä»¬ --> 1158 <section id="contact" class="py-20 bg-gray-900 relative overflow-hidden"> 1159 <div class="absolute inset-0 opacity-10"> 1160 <img src="./images/indexBG2.jpg" alt="èæ¯" class="w-full h-full object-cover" /> 1161 </div> 1162 1163 <div class="container mx-auto px-4 relative z-10"> 1164 <div class="text-center mb-16 animate-in-fade" data-delay="0.2"> 1165 <h2 class="text-3xl md:text-5xl font-bold mb-4"> 1166 Contact <span class="gradient-text">Us</span> 1167 </h2> 1168 <p class="text-xl text-gray-300 max-w-3xl mx-auto"> 1169 Whatever your questions or needs, our team is always ready to 1170 support you 1171 </p> 1172 </div> 1173 1174 <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> 1175 <!-- è系表å --> 1176 <div class="card p-8 rounded-xl animate-in-left" data-delay="0.4"> 1177 <h3 class="text-2xl font-semibold mb-6 gradient-text"> 1178 Send Message 1179 </h3> 1180 1181 <form id="contact-form" class="space-y-6"> 1182 <div> 1183 <label for="name" class="block text-gray-300 mb-2">Name</label> 1184 <input type="text" id="name" 1185 class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 text-white" /> 1186 </div> 1187 1188 <div> 1189 <label for="email" class="block text-gray-300 mb-2">Email</label> 1190 <input type="email" id="email" required 1191 class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 text-white" /> 1192 </div> 1193 1194 <div> 1195 <label for="company" class="block text-gray-300 mb-2">Company</label> 1196 <input type="company" id="company" 1197 class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 text-white" /> 1198 </div> 1199 1200 <div> 1201 <label for="phone" class="block text-gray-300 mb-2">Phone</label> 1202 <input type="text" id="phone" required 1203 class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 text-white" /> 1204 </div> 1205 1206 <div class="form-group"> 1207 <label for="product" class="block text-gray-300 mb-2"> 1208 <!-- 产å --> 1209 Product 1210 </label> 1211 <select id="product" 1212 class="form-input w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none text-white appearance-none"> 1213 <option value="" disabled selected> 1214 <!-- è¯·éæ©äº§å --> 1215 Please select a product 1216 </option> 1217 <!-- <option value="sales"> 1218 Sales product 1219 </option> 1220 <option value="tech"> 1221 Technical Support 1222 </option> 1223 <option value="hr"> 1224 Human Resources 1225 </option> 1226 <option value="marketing"> 1227 Marketing product 1228 </option> 1229 <option value="other"> 1230 Other 1231 </option> --> 1232 </select> 1233 </div> 1234 1235 <div> 1236 <label for="message" class="block text-gray-300 mb-2">Message</label> 1237 <textarea id="message" rows="5" 1238 class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 text-white"></textarea> 1239 </div> 1240 1241 <div class="flex items-center"> 1242 <input type="checkbox" id="privacy" 1243 class="w-4 h-4 text-primary-500 border-gray-700 rounded focus:ring-primary-500" required /> 1244 <label for="privacy" class="ml-2 text-gray-300">I agree to Arcrobo's<a href="#" 1245 class="text-primary-400 hover:underline">Privacy Policy</a></label> 1246 </div> 1247 1248 <button type="submit" class="btn-primary w-full py-3 rounded-lg font-medium text-white"> 1249 Send Message 1250 </button> 1251 </form> 1252 </div> 1253 1254 <!-- èç³»ä¿¡æ¯ --> 1255 <div> 1256 <div class="card p-8 rounded-xl mb-8 animate-in-right" data-delay="0.6"> 1257 <h3 class="text-2xl font-semibold mb-6 gradient-text"> 1258 Contact Us 1259 </h3> 1260 1261 <div class="space-y-6"> 1262 <div class="flex items-start animate-in-right" data-delay="1.0"> 1263 <div class="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center mr-4 flex-shrink-0"> 1264 <i class="fas fa-map-marker-alt text-white"></i> 1265 </div> 1266 <div> 1267 <h4 class="font-semibold text-white mb-1">Add</h4> 1268 <p class="text-gray-300"> 1269 17 Tractor Road Singapore 627975 1270 </p> 1271 </div> 1272 </div> 1273 1274 <div class="flex items-start animate-in-right" data-delay="1.2"> 1275 <div class="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center mr-4 flex-shrink-0"> 1276 <i class="fas fa-phone-alt text-white"></i> 1277 </div> 1278 <div> 1279 <h4 class="font-semibold text-white mb-1">Tel</h4> 1280 <p class="text-gray-300">(+ 65)8153 3313</p> 1281 </div> 1282 </div> 1283 1284 <div class="flex items-start animate-in-right" data-delay="1.4"> 1285 <div class="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center mr-4 flex-shrink-0"> 1286 <i class="fas fa-envelope text-white"></i> 1287 </div> 1288 <div> 1289 <h4 class="font-semibold text-white mb-1">Email</h4> 1290 <p class="text-gray-300">[email protected]</p> 1291 </div> 1292 </div> 1293 </div> 1294 </div> 1295 1296 <!-- AI婿 --> 1297 <div class="card p-8 rounded-xl animate-in-right" data-delay="0.8"> 1298 <h3 class="text-2xl font-semibold mb-6 gradient-text"> 1299 AI Smart Assistant 1300 </h3> 1301 1302 <div class="bg-gray-800 rounded-lg p-4 mb-4 h-64 overflow-y-auto" id="chat-container"> 1303 <div class="flex mb-4"> 1304 <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center mr-2 flex-shrink-0"> 1305 <i class="fas fa-robot text-white text-sm"></i> 1306 </div> 1307 <div class="bg-gray-700 rounded-lg py-2 px-4 max-w-[80%]"> 1308 <p class="text-gray-300"> 1309 Hello! I am Arcrobo's AI assistant, how can I help you? 1310 </p> 1311 </div> 1312 </div> 1313 </div> 1314 1315 <div class="flex"> 1316 <input type="text" id="ai-input" 1317 class="flex-1 px-4 py-3 bg-gray-800 border border-gray-700 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary-500 text-white" 1318 placeholder="Enter your question..." /> 1319 <button id="ai-send" class="btn-primary px-6 py-3 rounded-r-lg"> 1320 <i class="fas fa-paper-plane"></i> 1321 </button> 1322 </div> 1323 </div> 1324 </div> 1325 </div> 1326 </div> 1327 </section> 1328 1329 <!-- 页è --> 1330 <footer class="bg-gray-900 border-t border-gray-800 py-12"> 1331 <div class="container mx-auto px-4"> 1332 <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> 1333 <!-- Logoåç®ä» --> 1334 <div class="md:col-span-1"> 1335 <div class="flex items-center mb-4"> 1336 <img src="./images/logo.png" alt="Arcrobo Logo" class="h-4 w-auto" />
1337 <span class="ml-2 text-lg font-bold gradient-text">Arcrobo</span> 1338 </div> 1339 <p class="text-gray-400 mb-4"> 1340 Leading Technologyï¼creating the Future 1341 </p> 1342 <div class="flex space-x-4"> 1343 1344 </div> 1345 </div> 1346 1347 <!-- å¿«é龿¥ --> 1348 <div> 1349 <h4 class="text-lg font-semibold mb-4 text-white">Quick Link</h4> 1350 <ul class="space-y-2"> 1351 <li> 1352 <a href="./index.html" class="text-gray-400 hover:text-primary-500">Homepage</a> 1353 </li> 1354 <li> 1355 <a href="./product.html" class="text-gray-400 hover:text-primary-500">Product</a> 1356 </li> 1357 <li> 1358 <a href="./ourPartners.html" class="text-gray-400 hover:text-primary-500">About us</a> 1359 </li> 1360 <li> 1361 <a href="./contact.html" class="text-gray-400 hover:text-primary-500">Contact us</a> 1362 </li> 1363 </ul> 1364 </div> 1365 1366 <!-- 产å --> 1367 <div> 1368 <h4 class="text-lg font-semibold mb-4 text-white">Product</h4> 1369 <ul class="space-y-2"> 1370 <li> 1371 <a href="#" class="text-gray-400 hover:text-primary-500">High-Performance Product</a> 1372 </li> 1373 <li> 1374 <a href="#" class="text-gray-400 hover:text-primary-500">Drone Solutions</a> 1375 </li> 1376 <li> 1377 <a href="#" class="text-gray-400 hover:text-primary-500">Smart Robot Product</a> 1378 </li> 1379 <li> 1380 <a href="#" class="text-gray-400 hover:text-primary-500">Customized Service</a> 1381 </li> 1382 </ul> 1383 </div> 1384 1385 <!-- 订é --> 1386 <div> 1387 <h4 class="text-lg font-semibold mb-4 text-white"> 1388 Subscribe to us 1389 </h4> 1390 <p class="text-gray-400 mb-4"> 1391 Subscribe to our newsletter to get the latest product and 1392 technology news 1393 </p> 1394 <form id="footerForm" class="flex"> 1395 <input style="width: 100%" type="email" id="footerEmail" required placeholder="Your Email" 1396 class="flex-1 px-4 py-2 bg-gray-800 border border-gray-700 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary-500 text-white" /> 1397 <button type="submit" class="btn-primary px-4 py-2 rounded-r-lg"> 1398 <i class="fas fa-arrow-right"></i> 1399 </button> 1400 </form> 1401 </div> 1402 </div> 1403 1404 <div class="border-t border-gray-800 mt-12 pt-8 text-center"> 1405 <p class="text-gray-400">© 2026 Arcrobo.All rights reserved.</p> 1406 </div> 1407 </div> 1408 </footer> 1409
1409<script src="./js/footer.js"></script>
1409 1410 1411
1411<script src="./js/index.js"></script>
1411 1412
1412<script src="./js/qaDatabase.js"></script>
1412 1413
1413<script> 1414 // 页é¢å è½½å®æåæ§è¡ 1415 document.addEventListener("DOMContentLoaded", function () { 1416 // å è½½å¨ç» 1417 setTimeout(function () { 1418 document.querySelector(".loader").classList.add("hidden"); 1419 1420 // åå§åå ¥åºå¨ç» 1421 initScrollAnimations(); 1422 }, 1500); 1423 1424 // å ¥åºå¨ç»å½æ° 1425 function initScrollAnimations() { 1426 // è·åææéè¦å¨ç»çå ç´ 1427 const animatedElements = document.querySelectorAll( 1428 ".animate-in, .animate-in-left, .animate-in-right, .animate-in-scale, .animate-in-fade", 1429 ); 1430 1431 // å建Intersection Observer 1432 const observer = new IntersectionObserver( 1433 (entries) => { 1434 entries.forEach((entry) => { 1435 if (entry.isIntersecting) { 1436 // è·åå»¶è¿æ¶é´ 1437 const delay = entry.target.getAttribute("data-delay") || 0; 1438 1439 // 设置延è¿å¨ç» 1440 setTimeout(() => { 1441 // æ·»å å¨ç»ç±» 1442 entry.target.style.transition = 1443 "all 0.8s cubic-bezier(0.16, 1, 0.3, 1)"; 1444 entry.target.style.opacity = "1"; 1445 1446 // æ ¹æ®ä¸åçå¨ç»ç±»å设置ä¸åçtransform 1447 if (entry.target.classList.contains("animate-in")) { 1448 entry.target.style.transform = "translateY(0)"; 1449 } else if ( 1450 entry.target.classList.contains("animate-in-left") 1451 ) { 1452 entry.target.style.transform = "translateX(0)"; 1453 } else if ( 1454 entry.target.classList.contains("animate-in-right") 1455 ) { 1456 entry.target.style.transform = "translateX(0)"; 1457 } else if ( 1458 entry.target.classList.contains("animate-in-scale") 1459 ) { 1460 entry.target.style.transform = "scale(1)"; 1461 } 1462 1463 // æ·»å 强è°å¨ç»ææ 1464 if (entry.target.querySelector(".gradient-text")) { 1465 const gradientText = 1466 entry.target.querySelector(".gradient-text"); 1467 gradientText.style.transition = "all 1s ease"; 1468 gradientText.style.textShadow = 1469 "0 0 15px rgba(0, 115, 255, 0.7)"; 1470 } 1471 }, delay * 500); 1472 1473 // 忢è§å¯è¯¥å ç´ 1474 observer.unobserve(entry.target); 1475 } 1476 }); 1477 }, 1478 { 1479 threshold: 0.1, // å½å ç´ 10%è¿å ¥è§å£æ¶è§¦å 1480 rootMargin: "0px 0px -50px 0px", // æå50px触å 1481 }, 1482 ); 1483 1484 // è§å¯ææå¨ç»å ç´ 1485 animatedElements.forEach((el) => { 1486 observer.observe(el); 1487 }); 1488 } 1489 1490 // ç§»å¨ç«¯èå忢 1491 const menuToggle = document.getElementById("menu-toggle"); 1492 const mobileMenu = document.getElementById("mobile-menu"); 1493 let menuOpen = false; 1494 1495 menuToggle.addEventListener("click", function () { 1496 if (!menuOpen) { 1497 // æå¼èå 1498 mobileMenu.style.height = "auto"; 1499 const height = mobileMenu.offsetHeight + "px"; 1500 mobileMenu.style.height = "0px"; 1501 1502 // 触åéæ 1503 mobileMenu.offsetHeight; 1504 1505 // åºç¨è¿æ¸¡å¨ç» 1506 mobileMenu.style.height = height; 1507 mobileMenu.style.opacity = "1"; 1508 mobileMenu.style.transform = "translateY(0)"; 1509 1510 // æ´æ¹å¾æ 1511 menuToggle.innerHTML = '<i class="fas fa-times text-xl"></i>'; 1512 } else { 1513 // å ³éèå 1514 mobileMenu.style.height = "0px"; 1515 mobileMenu.style.opacity = "0"; 1516 mobileMenu.style.transform = "translateY(-10px)"; 1517 1518 // æ´æ¹å¾æ 1519 menuToggle.innerHTML = '<i class="fas fa-bars text-xl"></i>'; 1520 } 1521 1522 menuOpen = !menuOpen; 1523 }); 1524 1525 // ç¹å»èå项åå ³éèå 1526 const mobileMenuItems = mobileMenu.querySelectorAll("a");
1527 mobileMenuItems.forEach((item) => { 1528 item.addEventListener("click", function () { 1529 if (menuOpen) { 1530 mobileMenu.style.height = "0px"; 1531 mobileMenu.style.opacity = "0"; 1532 mobileMenu.style.transform = "translateY(-10px)"; 1533 menuToggle.innerHTML = '<i class="fas fa-bars text-xl"></i>'; 1534 menuOpen = false; 1535 } 1536 }); 1537 }); 1538 1539 // å¹³æ»æ»å¨ 1540 document.querySelectorAll('a[href^="#"]').forEach((anchor) => { 1541 anchor.addEventListener("click", function (e) { 1542 e.preventDefault(); 1543 1544 const targetId = this.getAttribute("href"); 1545 const targetElement = document.querySelector(targetId); 1546 1547 if (targetElement) { 1548 window.scrollTo({ 1549 top: targetElement.offsetTop - 80, 1550 behavior: "smooth", 1551 }); 1552 1553 // 妿æ¯ç§»å¨ç«¯ï¼ç¹å»åå ³éèå 1554 if (window.innerWidth < 768) { 1555 mobileMenu.classList.add("hidden"); 1556 } 1557 } 1558 }); 1559 }); 1560 1561 // æ°åå¢é¿å¨ç» 1562 const counters = document.querySelectorAll(".counter"); 1563 const speed = 200; // å¨ç»é度 1564 1565 const animateCounters = () => { 1566 counters.forEach((counter) => { 1567 const target = +counter.getAttribute("data-target"); 1568 const count = +counter.innerText; 1569 const increment = target / speed; 1570 1571 if (count < target) { 1572 counter.innerText = Math.ceil(count + increment); 1573 setTimeout(animateCounters, 1); 1574 } else { 1575 counter.innerText = target; 1576 } 1577 }); 1578 }; 1579 1580 // ç嬿»å¨ï¼å½å ç´ è¿å ¥è§å£æ¶å¼å§å¨ç» 1581 const observer = new IntersectionObserver((entries) => { 1582 entries.forEach((entry) => { 1583 if (entry.isIntersecting) { 1584 animateCounters(); 1585 observer.unobserve(entry.target); 1586 } 1587 }); 1588 }); 1589 1590 counters.forEach((counter) => { 1591 observer.observe(counter); 1592 }); 1593 1594 // è系表åæäº¤ 1595 const contactForm = document.getElementById("contact-form"); 1596 1597 contactForm.addEventListener("submit", function (e) { 1598 e.preventDefault(); 1599 1600 const name = document.getElementById("name").value; 1601 const email = document.getElementById("email").value; 1602 const company = document.getElementById("company").value; 1603 const phone = document.getElementById("phone").value; 1604 const product = document.getElementById("product").value; 1605 const message = document.getElementById("message").value; 1606 1607 async function submitForm() { 1608 await window.http.post("/user/contactForm/save", { 1609 name: name || "", 1610 email: email || "", 1611 company: company || "", 1612 telephone: phone || "", 1613 productName: product || "", 1614 messageContent: message || "", 1615 }); 1616 } 1617 submitForm(); 1618 // 模æè¡¨åæäº¤ 1619 alert( 1620 "Thank you for your message! We will get back to you as soon as possible.", 1621 ); 1622 contactForm.reset(); 1623 }); 1624 1625 // AI婿åè½ 1626 const aiInput = document.getElementById("ai-input"); 1627 const aiSend = document.getElementById("ai-send"); 1628 const chatContainer = document.getElementById("chat-container"); 1629 1630 // åéæ¶æ¯å½æ° 1631 const sendMessage = () => { 1632 const message = aiInput.value.trim(); 1633 1634 if (!message) return; 1635 1636 // æ·»å ç¨æ·æ¶æ¯ 1637 addMessage(message, "user"); 1638 aiInput.value = ""; 1639 1640 // 模æAIæè 1641 setTimeout(() => { 1642 const response = getAIResponse(message); 1643 addMessage(response, "ai"); 1644 }, 1000); 1645 }; 1646 1647 // æ·»å æ¶æ¯å°è天çªå£ 1648 const addMessage = (message, sender) => { 1649 const messageDiv = document.createElement("div"); 1650 messageDiv.className = 1651 "flex mb-4" + (sender === "user" ? " justify-end" : ""); 1652 1653 if (sender === "user") { 1654 messageDiv.innerHTML = ` 1655 <div class="bg-primary-500 rounded-lg py-2 px-4 max-w-[80%]"> 1656 <p class="text-white">${message}</p> 1657 </div> 1658 <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center ml-2 flex-shrink-0"> 1659 <i class="fas fa-user text-white text-sm"></i> 1660 </div> 1661 `; 1662 } else { 1663 messageDiv.innerHTML = ` 1664 <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center mr-2 flex-shrink-0"> 1665 <i class="fas fa-robot text-white text-sm"></i> 1666 </div> 1667 <div class="bg-gray-700 rounded-lg py-2 px-4 max-w-[80%]"> 1668 <p class="text-gray-300">${message}</p> 1669 </div> 1670 `; 1671 } 1672 1673 chatContainer.appendChild(messageDiv); 1674 chatContainer.scrollTop = chatContainer.scrollHeight; 1675 }; 1676 1677 // è·åAIååº 1678 const getAIResponse = (message) => { 1679 // 转æ¢ä¸ºå°åç¨äºå¹é 1680 const lowerMessage = message.toLowerCase(); 1681 1682 // æ£æ¥æ¯å¦å¹é é¢è®¾é®ç 1683 for (const qa of qaDatabase) { 1684 for (const keyword of qa.keywords) { 1685 if (lowerMessage.includes(keyword)) { 1686 return qa.response; 1687 } 1688 } 1689 } 1690 1691 // é»è®¤åå¤ 1692 return "Thank you for your inquiry! This is a great question. Our professional team will provide you with a detailed answer. Please leave your contact information, and we will c
1692ontact you as soon as possible."; 1693 }; 1694 1695 // åéæé®ç¹å»äºä»¶ 1696 aiSend.addEventListener("click", sendMessage); 1697 1698 // è¾å ¥æ¡å车äºä»¶ 1699 aiInput.addEventListener("keypress", function (e) { 1700 if (e.key === "Enter") { 1701 sendMessage(); 1702 } 1703 }); 1704 1705 // åå§åThree.jsåºæ¯ 1706 initThreeScene(); 1707 }); 1708 1709 // Three.js 3Dèæ¯ 1710 function initThreeScene() { 1711 const container = document.getElementById("canvas-container"); 1712 1713 // åå»ºåºæ¯ 1714 const scene = new THREE.Scene(); 1715 1716 // åå»ºç¸æº 1717 const camera = new THREE.PerspectiveCamera( 1718 75, 1719 window.innerWidth / window.innerHeight, 1720 0.1, 1721 1000, 1722 ); 1723 camera.position.z = 5; 1724 1725 // å建渲æå¨ 1726 const renderer = new THREE.WebGLRenderer({ alpha: true }); 1727 renderer.setSize(window.innerWidth, window.innerHeight); 1728 renderer.setClearColor(0x000000, 0); // éæèæ¯ 1729 container.appendChild(renderer.domElement); 1730 1731 // å建ç²åç³»ç» 1732 const particlesGeometry = new THREE.BufferGeometry(); 1733 const particlesCount = 1500; 1734 1735 const posArray = new Float32Array(particlesCount * 3); 1736 1737 for (let i = 0; i < particlesCount * 3; i++) { 1738 posArray[i] = (Math.random() - 0.5) * 15; 1739 } 1740 1741 particlesGeometry.setAttribute( 1742 "position", 1743 new THREE.BufferAttribute(posArray, 3), 1744 ); 1745 1746 // å建æè´¨ 1747 const particlesMaterial = new THREE.PointsMaterial({ 1748 size: 0.02, 1749 color: 0x0073ff, 1750 transparent: true, 1751 opacity: 0.8, 1752 }); 1753 1754 // å建ç²åç³»ç» 1755 const particlesMesh = new THREE.Points( 1756 particlesGeometry, 1757 particlesMaterial, 1758 ); 1759 scene.add(particlesMesh); 1760 1761 // æ·»å è¿çº¿ 1762 const lineMaterial = new THREE.LineBasicMaterial({ 1763 color: 0x0073ff, 1764 transparent: true, 1765 opacity: 0.2, 1766 }); 1767 1768 const lineGeometry = new THREE.BufferGeometry(); 1769 const linePositions = new Float32Array(particlesCount * 6); // æ¯æ¡çº¿ä¸¤ä¸ªç¹ï¼æ¯ä¸ªç¹xyzä¸ä¸ªåæ 1770 lineGeometry.setAttribute( 1771 "position", 1772 new THREE.BufferAttribute(linePositions, 3), 1773 ); 1774 1775 const lineMesh = new THREE.LineSegments(lineGeometry, lineMaterial); 1776 scene.add(lineMesh); 1777 1778 // é¼ æ ç§»å¨ææ 1779 let mouseX = 0; 1780 let mouseY = 0; 1781 1782 document.addEventListener("mousemove", (event) => { 1783 mouseX = (event.clientX / window.innerWidth) * 2 - 1; 1784 mouseY = -(event.clientY / window.innerHeight) * 2 + 1; 1785 }); 1786 1787 // çªå£å¤§å°è°æ´ 1788 window.addEventListener("resize", () => { 1789 camera.aspect = window.innerWidth / window.innerHeight; 1790 camera.updateProjectionMatrix(); 1791 renderer.setSize(window.innerWidth, window.innerHeight); 1792 }); 1793 1794 // å¨ç»å¾ªç¯ 1795 const animate = () => { 1796 requestAnimationFrame(animate); 1797 1798 // æè½¬ç²åç³»ç» 1799 particlesMesh.rotation.y += 0.001; 1800 particlesMesh.rotation.x += 0.0005; 1801 1802 // æ ¹æ®é¼ æ ä½ç½®è°æ´æè½¬ 1803 particlesMesh.rotation.y += mouseX * 0.0005; 1804 particlesMesh.rotation.x += mouseY * 0.0005; 1805 1806 // æ´æ°è¿çº¿ 1807 const positions = particlesMesh.geometry.attributes.position.array; 1808 let lineIndex = 0; 1809 1810 // å¯»æ¾æè¿çç²åå¹¶è¿çº¿ 1811 for (let i = 0; i < particlesCount; i++) { 1812 const x1 = positions[i * 3]; 1813 const y1 = positions[i * 3 + 1]; 1814 const z1 = positions[i * 3 + 2]; 1815 1816 let minDist = 2; // æå¤§è¿çº¿è·ç¦» 1817 let closestParticle = null; 1818 1819 for (let j = i + 1; j < particlesCount; j++) { 1820 const x2 = positions[j * 3]; 1821 const y2 = positions[j * 3 + 1]; 1822 const z2 = positions[j * 3 + 2]; 1823 1824 const dist = Math.sqrt( 1825 Math.pow(x2 - x1, 2) + 1826 Math.pow(y2 - y1, 2) + 1827 Math.pow(z2 - z1, 2), 1828 ); 1829 1830 if (dist < minDist) { 1831 minDist = dist; 1832 closestParticle = j; 1833 } 1834 } 1835 1836 // 妿æ¾å°æè¿çç²åï¼æ·»å è¿çº¿ 1837 if ( 1838 closestParticle !== null && 1839 lineIndex < linePositions.length - 6 1840 ) { 1841 const j = closestParticle; 1842 1843 linePositions[lineIndex++] = positions[i * 3]; 1844 linePositions[lineIndex++] = positions[i * 3 + 1]; 1845 linePositions[lineIndex++] = positions[i * 3 + 2]; 1846 1847 linePositions[lineIndex++] = positions[j * 3]; 1848 linePositions[lineIndex++] = positions[j * 3 + 1]; 1849 linePositions[lineIndex++] = positions[j * 3 + 2]; 1850 } 1851 } 1852 1853 // æ´æ°çº¿æ¡å ä½ä½ 1854 lineGeometry.attributes.position.needsUpdate = true; 1855 1856 renderer.render(scene, camera); 1857 }; 1858 1859 animate(); 1860 } 1861 </script>
1861 1862</body> 1863 1864</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.