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>è¡ä¸è§£å³æ¹æ¡ - MizarVision</title> 8 <!-- Keep previous fonts --> 9 <link 10 href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Inter:wght@300;400;500&display=swap" 11 rel="stylesheet"> 12 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet"> 13 <link 14 href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,[email protected],300;6..72,400;6..72,500&display=swap" 15 rel="stylesheet"> 16 17 <style> 18 :root { 19 --primary-bg: #16161a; 20 /* Lighter Zinc setting */ 21 --nav-bg: rgba(9, 9, 11, 0.7); 22 --border-color: rgba(255, 255, 255, 0.08); 23 --text-main: #f4f4f5; 24 /* Zinc 50 */ 25 --text-muted: #a1a1aa; 26 /* Zinc 400 */ 27 --accent-blue: #2158E9; 28 } 29 30 body { 31 margin: 0; 32 background-color: var(--primary-bg); 33 font-family: 'Inter', sans-serif; 34 color: var(--text-main); 35 overflow-x: hidden; 36 -webkit-font-smoothing: antialiased; 37 -moz-osx-font-smoothing: grayscale; 38 transition: background-color 1.5s ease; 39 } 40 41 body.portfolio-active { 42 background-color: #121215; 43 } 44 45 /* Navbar */ 46 .navbar { 47 position: fixed; 48 top: 0; 49 left: 0; 50 width: 100%; 51 height: 60px; 52 background: var(--nav-bg); 53 display: flex; 54 align-items: center; 55 justify-content: space-between; 56 padding: 0 40px; 57 box-sizing: border-box; 58 border-bottom: 1px solid var(--border-color); 59 pointer-events: auto; 60 backdrop-filter: blur(20px); 61 z-index: 100; 62 } 63 64 .nav-logo { 65 display: flex; 66 align-items: center; 67 height: 100%; 68 cursor: pointer; 69 text-decoration: none; 70 } 71 72 .nav-logo img { 73 height: 35px; 74 width: auto; 75 margin-right: 15px; 76 } 77 78 .nav-links { 79 display: flex; 80 height: 100%; 81 } 82 83 .nav-item { 84 display: flex; 85 align-items: center; 86 padding: 0 25px; 87 font-family: 'Inter', sans-serif; 88 font-weight: 400; 89 font-size: 14px; 90 color: var(--text-muted); 91 cursor: pointer; 92 transition: all 0.3s ease; 93 height: 100%; 94 text-decoration: none; 95 } 96 97 .nav-item:hover, 98 .nav-item.active { 99 background: rgba(33, 88, 233, 0.15); 100 color: #fff; 101 border-bottom: 2px solid var(--accent-blue); 102 } 103 104 /* Scroll Layout */ 105 .container { 106 width: 100%; 107 max-width: 1600px; 108 margin: 0 auto; 109 padding-top: 60px; 110 } 111 112 .section { 113 display: flex; 114 align-items: center; 115 padding: 80px 10%; 116 margin-bottom: 60px; 117 box-sizing: border-box; 118 opacity: 0; 119 transform: translateY(40px); 120 transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); 121 } 122 123 .section.visible { 124 opacity: 1; 125 transform: translateY(0); 126 } 127 128 .content-col { 129 flex: 1; 130 padding-right: 80px; 131 display: flex; 132 flex-direction: column; 133 justify-content: space-between; 134 align-self: stretch; 135 padding-top: 0; 136 padding-bottom: 0; 137 } 138 139 .image-col { 140 flex: 1.2; 141 display: flex; 142 justify-content: flex-end; 143 position: relative; 144 } 145 146 .image-col video { 147 width: 100%; 148 max-width: 800px; 149 height: auto; 150 border-radius: 6px; 151 box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); 152 transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); 153 } 154 155 .section:hover .image-col video { 156 transform: scale(1.02); 157 } 158 159 .title { 160 font-family: 'Newsreader', serif; 161 font-size: 37px; 162 font-weight: 400; 163 color: var(--text-main); 164 margin-top: -0.16em; 165 /* æµæ¶è±æåä½é¡¶é¨ççç½é´è· */ 166 margin-bottom: 0; 167 line-height: 1.3; 168 letter-spacing: -0.01em; 169 } 170 171 .subtitle { 172 font-family: 'Inter', sans-serif; 173 font-size: 25px; 174 color: var(--text-muted); 175 line-height: 1.8; 176 font-weight: 300; 177 margin-bottom: -0.3em; 178 /* æµæ¶è±æåä½åºé¨ççç½é´è· */ 179 } 180 181 /* Divider Design */ 182 .divider { 183 width: 80%; 184 max-width: 1400px; 185 height: 1px; 186 margin: -20px auto 60px auto; 187 background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.12), transparent); 188 position: relative; 189 transform: scaleX(0); 190 opacity: 0; 191 transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.5s ease; 192 } 193 194 .divider.visible { 195 transform: scaleX(1); 196 opacity: 1; 197 } 198 199 .divider::after { 200 content: ''; 201 position: absolute; 202 top: 50%; 203 left: 50%; 204 transform: translate(-50%, -50%); 205 width: 4px; 206 height: 4px; 207 border-radius: 50%; 208 background: var(--accent-blue); 209 box-shadow: 0 0 12px 2px var(--accent-blue); 210 } 211 212 /* Scanlines & Retro Grid */ 213 .scanlines { 214 position: fixed; 215 top: 0; 216 left: 0; 217 width: 100vw; 218 height: 100vh; 219 /* 使ç¨ç¥å¸¦æè°çæ³é»è±¡çç½ä½ä¸ºç½æ ¼çº¿è²å½©ï¼å¢æ·»éæ§ç¬è®°æ¬ç¬è§¦æ */ 220 background: 221 linear-gradient(to right, rgba(235, 225, 210, 0.06) 1px, transparent 1px), 222 linear-gradient(to bottom, rgba(235, 225, 210, 0.06) 1px, transparent 1px); 223 background-size: 32px 32px; 224 pointer-events: none; 225 z-index: 99; 226 transition: opacity 1.5s ease; 227 } 228 229 body.portfolio-active .scanlines { 230 opacity: 0; 231 } 232 233 /* è¶ç/æ§çº¸å¼ çåªç¹é¢ç²è´¨æå å */ 234 .scanlines::after { 235 content: ''; 236 position: absolute; 237 top: 0; 238 left: 0; 239 width: 100%; 240 height: 100%; 241 background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); 242 opacity: 0.04; 243 /* è°å¾éå¸¸å¾®å¼±ä»¥å æ¢ç¼ */ 244 pointer-events: none; 245 mix-blend-mode: overlay; 246 } 247 248 .gradient-backdrop { 249 position: fixed; 250 top: -50%; 251 left: -50%; 252 width: 200%; 253 height: 200%; 254 background: radial-gradient(circle at 50% 50%, rgba(33, 88, 233, 0.04) 0%, transparent 60%); 255 z-index: -1; 256 pointer-events: none; 257 } 258 259 /* Portfolio Section */ 260 .portfolio-section { 261 width: 100%; 262 padding: 40px 5% 120px 5%; 263 box-sizing: border-box; 264 text-align: center; 265 overflow-x: hidden; 266 } 267 268 .portfolio-title { 269 font-family: 'Poppins', sans-serif; 270 font-size: 48px; 271 font-weight: 700; 272 color: var(--text-main); 273 margin-bottom: 80px; 274 opacity: 0; 275 transform: translateY(40px); 276 transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); 277 } 278 279 .portfolio-title.visible { 280 opacity: 1; 281 transform: translateY(0); 282 } 283
284 .portfolio-grid { 285 display: flex; 286 justify-content: center; 287 gap: 40px; 288 max-width: 1400px; 289 margin: 0 auto; 290 flex-wrap: wrap; 291 } 292 293 .portfolio-card { 294 width: 270px; 295 box-sizing: border-box; 296 background: rgba(43, 51, 62, 0.3); 297 border-radius: 0; 298 padding: 70px 40px; 299 display: flex; 300 flex-direction: column; 301 align-items: center; 302 justify-content: space-between; 303 position: relative; 304 backdrop-filter: blur(50px); 305 opacity: 0; 306 transform: translateX(100px); 307 /* 横ååå¤å¼¹åº */ 308 transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); 309 } 310 311 /* äº¤éæ¨ªåæ·¡å ¥å¨ç» */ 312 .portfolio-card:nth-child(1) { 313 transition-delay: 0.1s; 314 } 315 316 .portfolio-card:nth-child(2) { 317 transition-delay: 0.3s; 318 } 319 320 .portfolio-card:nth-child(3) { 321 transition-delay: 0.5s; 322 } 323 324 .portfolio-card.visible { 325 opacity: 1; 326 transform: translateX(0); 327 } 328 329 /* å©ç¨å夿¡ç¬ç«æ¿æ¥æ¬æµ®ç¹æï¼å½»åºå离è¿åºå»¶è¿ */ 330 .card-hover-fx { 331 position: absolute; 332 inset: 0; 333 border-radius: 0; 334 border: 2px solid rgba(105, 183, 245, 0.15); 335 transition: border-color 0.4s, box-shadow 0.4s; 336 pointer-events: none; 337 z-index: -1; 338 } 339 340 .portfolio-card:hover .card-hover-fx { 341 border-color: rgba(58, 103, 207, 0.65); 342 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); 343 } 344 345 .card-logo { 346 height: 72px; 347 width: auto; 348 max-width: 100%; 349 object-fit: contain; 350 margin-bottom: 60px; 351 } 352 353 .card-btn { 354 display: inline-block; 355 padding: 12px 20px; 356 border-radius: 40px; 357 font-family: 'Poppins', sans-serif; 358 font-size: 14px; 359 font-weight: 500; 360 text-transform: uppercase; 361 text-decoration: none; 362 letter-spacing: 1px; 363 transition: all 0.3s ease; 364 width: 130px; 365 box-sizing: border-box; 366 text-align: center; 367 } 368 369 .btn-explore { 370 background: var(--accent-blue); 371 color: #fff; 372 box-shadow: 0 4px 15px rgba(33, 88, 233, 0.3); 373 border: 1px solid transparent; 374 } 375 376 .btn-explore:hover { 377 background: #1d4cd3; 378 box-shadow: 0 6px 20px rgba(33, 88, 233, 0.6); 379 transform: scale(1.05); 380 /* Exploreç¹æ®æ¾ç¼© */ 381 } 382 383 .btn-disabled { 384 background: transparent; 385 color: var(--text-muted); 386 border: none; 387 font-weight: 300; 388 white-space: nowrap; 389 width: auto; 390 pointer-events: none; 391 } 392 393 /* Spark Extended Product Page Panel */ 394 #spark-extended { 395 display: none; 396 width: 100%; 397 max-width: 1600px; 398 margin: 0 auto; 399 padding: 75px 10% 150px 10%; 400 box-sizing: border-box; 401 opacity: 0; 402 transition: opacity 1s ease; 403 scroll-margin-top: 60px; 404 /* è¡¥å¿åºå®å¯¼èªæ çé«åº¦ */ 405 } 406 407 #spark-extended.active { 408 opacity: 1; 409 } 410 411 .spark-header { 412 text-align: center; 413 margin-bottom: 200px; 414 } 415 416 .spark-headline { 417 display: flex; 418 align-items: center; 419 justify-content: flex-start; 420 gap: 18px; 421 margin-bottom: 190px; 422 } 423 424 .spark-headline img { 425 height: 56px; 426 width: auto; 427 } 428 429 .spark-headline span { 430 font-family: 'Poppins', sans-serif; 431 font-size: 32px; 432 font-weight: 500; 433 color: var(--text-main); 434 letter-spacing: 1.5px; 435 } 436 437 .spark-subheadline { 438 font-family: 'Poppins', sans-serif; 439 font-size: 50px; 440 font-weight: 700; 441 color: var(--text-main); 442 letter-spacing: -0.02em; 443 } 444 445 .spark-row-split { 446 display: flex; 447 align-items: stretch; 448 /* Ensure text column stretches to height of image */ 449 gap: 60px; 450 margin-bottom: 180px; 451 } 452 453 .spark-row-split.reverse { 454 flex-direction: row-reverse; 455 } 456 457 .spark-row-split:last-of-type { 458 margin-bottom: 0; 459 } 460 461 .spark-split-text { 462 flex: 1.2; 463 display: flex; 464 flex-direction: column; 465 justify-content: space-between; 466 /* Top Title, Bottom Content */ 467 } 468 469 .spark-img-wrapper { 470 flex: 1.4; 471 position: relative; 472 display: flex; 473 align-items: flex-start; 474 /* Ensure img starts at the top edge */ 475 } 476 477 .spark-img-wrapper .base-img { 478 width: 100%; 479 height: auto; 480 border-radius: 12px; 481 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); 482 opacity: 0; 483 transform: translateY(40px) scale(0.9); 484 } 485 486 .spark-split-title { 487 font-family: 'Newsreader', serif; 488 font-size: 32px; 489 font-weight: 300; 490 margin: 0; 491 line-height: 1.3; 492 white-space: nowrap; 493 } 494 495 .spark-split-content { 496 font-family: 'Inter', sans-serif; 497 font-size: 18px; 498 color: var(--text-muted); 499 line-height: 1.5; 500 margin-bottom: 5px; 501 font-weight: 300; 502 } 503 504 .spark-split-content p { 505 margin-bottom: 20px; 506 color: var(--text-muted); 507 } 508 509 .spark-split-content ul { 510 list-style: none; 511 padding-left: 0; 512 margin: 0; 513 } 514 515 .spark-split-content ul li { 516 position: relative; 517 padding-left: 20px; 518 margin-bottom: 10px; 519 color: var(--text-muted); 520 } 521 522 .spark-split-content ul li::before { 523 content: ''; 524 position: absolute; 525 left: 0; 526 top: 10px; 527 width: 6px; 528 height: 6px; 529 border-radius: 50%; 530 background: var(--text-muted); 531 } 532 533 /* Floating Items config */ 534 .f-item { 535 position: absolute; 536 opacity: 0; 537 transform: translateY(30px) scale(0.9); 538 box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6); 539 border-radius: 8px; 540 border: 1px solid rgba(255, 255, 255, 0.1); 541 background-color: var(--primary-bg); 542 /* Match bg acting as card */ 543 } 544 545 /* Part 1 absolute pos */ 546 .p1-1 { 547 width: 35%; 548 top: -8%; 549 left: -6%; 550 } 551 552 .p1-2 { 553 width: 30%; 554 top: 12%; 555 right: -8%; 556 } 557 558 .p1-3 { 559 width: 45%; 560 bottom: -12%; 561 left: 8%; 562 } 563 564 .p1-4 { 565 width: 25%; 566 bottom: 20%; 567 right: -5%; 568 } 569 570 .p1-5 { 571 width: 32%; 572 top: 35%; 573 left: -5%; 574 } 575 576 .p1-6 { 577 width: 28%; 578 top: 2%; 579 left: 30%; 580 } 581 582 /* Part 2 absolute pos */ 583 .p2-1 { 584 width: 40%; 585 top: -6%; 586 left: -10%; 587 } 588 589 .p2-2 { 590 width: 50%; 591 bottom: -8%; 592 right: -5%; 593 } 594 595 /* Bottom CTA Button */ 596 .bottom-cta-wrapper { 597 width: 100%; 598 display: flex; 599 justify-content: center; 600 align-items: center; 601 margin-top: 15px; 602 padding-bottom: 95px; 603 } 604 605 .book-a-demo-btn { 606 display: inline-block; 607 opacity: 0; 608 transform: translateY(30px); 609 /* ready to pop up */ 610 padding: 16px 40px; 611 border-radius: 40px; 612 background: #fff; 613 color: #121215; 614 font-family: 'Poppins', sans-serif; 615 font-size: 16px; 616 font-weight: 600; 617 text-transform: uppercase; 618 text-decoration: none; 619 letter-spacing: 1px; 620 box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1); 621 transition: all 0.3s ease; 622 } 623 624 .book-a-demo-btn:hover { 625 transform: translateY(0px) scale(1.05) !important; 626 box-shadow: 0 15px 40px rgba(255, 255, 255, 0.2); 627 } 628 629 /* Demo Modal Styles */ 630 .demo-modal-overlay { 631 position: fixed; 632 top: 0; 633 left: 0; 634 width: 100vw; 635 height: 100vh; 636 background: rgba(0, 0, 0, 0.4); 637 backdrop-filter: blur(20px); 638 z-index: 1000; 639 display: flex; 640 justify-content: center; 641 align-items: center; 642 opacity: 0; 643 visibility: hidden; 644 transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 645 } 646 647 .demo-modal-overlay.active { 648 opacity: 1; 649 visibility: visible; 650 } 651 652 .demo-modal { 653 background: #1c1c21; 654 border: 1px solid rgba(255, 255, 255, 0.1); 655 border-radius: 16px; 656 padding: 40px; 657 width: 90%; 658 max-width: 460px; 659 box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5); 660 transform: scale(0.95) translateY(20px); 661 transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 662 position: relative; 663 } 664 665 .demo-modal-overlay.active .demo-modal { 666 transform: scale(1) translateY(0); 667 } 668 669 .demo-modal-close { 670 position: absolute; 671 top: 20px; 672 right: 20px; 673 background: none; 674 border: none; 675 color: var(--text-muted); 676 font-size: 28px; 677 cursor: pointer; 678 line-height: 1; 679 transition: color 0.3s; 680 } 681
682 .demo-modal-close:hover { 683 color: #fff; 684 } 685 686 .demo-modal-title { 687 font-family: 'Poppins', sans-serif; 688 font-size: 24px; 689 color: #fff; 690 margin-top: 0; 691 margin-bottom: 8px; 692 } 693 694 .demo-modal-subtitle { 695 font-size: 14px; 696 color: var(--text-muted); 697 margin-bottom: 30px; 698 } 699 700 .demo-form .form-group { 701 margin-bottom: 18px; 702 text-align: left; 703 } 704 705 .demo-form label { 706 display: block; 707 font-size: 13px; 708 color: var(--text-muted); 709 margin-bottom: 8px; 710 font-weight: 500; 711 } 712 713 .demo-form input, 714 .demo-form textarea { 715 width: 100%; 716 background: rgba(255, 255, 255, 0.05); 717 border: 1px solid rgba(255, 255, 255, 0.1); 718 border-radius: 8px; 719 padding: 12px 14px; 720 color: #fff; 721 font-family: 'Inter', sans-serif; 722 font-size: 14px; 723 box-sizing: border-box; 724 transition: all 0.3s; 725 } 726 727 .demo-form input:focus, 728 .demo-form textarea:focus { 729 outline: none; 730 border-color: var(--accent-blue); 731 background: rgba(255, 255, 255, 0.08); 732 } 733 734 .demo-form textarea { 735 resize: vertical; 736 } 737 738 .demo-submit-btn { 739 width: 100%; 740 background: var(--accent-blue); 741 color: #fff; 742 border: none; 743 border-radius: 8px; 744 padding: 14px; 745 font-family: 'Inter', sans-serif; 746 font-size: 15px; 747 font-weight: 500; 748 cursor: pointer; 749 transition: all 0.3s; 750 margin-top: 10px; 751 } 752 753 .demo-submit-btn:hover { 754 background: #1d4cd3; 755 box-shadow: 0 4px 15px rgba(33, 88, 233, 0.4); 756 } 757 </style> 758</head> 759 760<body> 761 <div class="scanlines"></div> 762 <div class="gradient-backdrop"></div> 763 764 <nav class="navbar"> 765 <a href="index.html" class="nav-logo"> 766 <img src="./logo-white.png" alt="MIZAR" 767 onerror="this.onerror=null;this.parentElement.innerText='MIZAR VISION';this.parentElement.style.color='white';this.parentElement.style.fontFamily='Orbitron';"> 768 </a> 769 <div class="nav-links"> 770 <a href="index.html" class="nav-item">é¦é¡µ</a> 771 <a href="solutions.html" class="nav-item active">è¡ä¸è§£å³æ¹æ¡</a> 772 <a href="newsroom.html" class="nav-item">è§ çµæ°é»</a> 773 <a href="careers.html" class="nav-item">è䏿ºä¼</a> 774 <a href="about.html" class="nav-item">å ³äºè§ çµ</a> 775 </div> 776 </nav> 777 778 <div class="container"> 779 <!-- Section 1 --> 780 <div class="section"> 781 <div class="content-col"> 782 <div class="title">å ¨ç夿ºä¼ æå¨åºåº§</div> 783 <div class="subtitle">è§ çµå¤æºä¼ æå¨æ°æ®åºåº§ï¼<br>ä¸ç«å¼çºµè§å ¨ç弿ºæ°æ®</div> 784 </div> 785 <div class="image-col"> 786 <video src="./è§£å³æ¹æ¡/01.mp4" autoplay loop muted playsinline></video> 787 </div> 788 </div> 789 790 <div class="divider"></div> 791 792 <!-- Section 2 --> 793 <div class="section"> 794 <div class="content-col"> 795 <div class="title">è¡ä¸çº§ç®æ æ°æ®èå</div> 796 <div class="subtitle">é¢åæ¨çè¡ä¸ï¼<br>è§ çµç夿¨¡æèåï¼å©æ¨å®æ´è·è¸ªç®æ </div> 797 </div> 798 <div class="image-col"> 799 <video src="./è§£å³æ¹æ¡/03.mp4" autoplay loop muted playsinline></video> 800 </div> 801 </div> 802 803 <div class="divider"></div> 804 805 <!-- Section 3 --> 806 <div class="section"> 807 <div class="content-col"> 808 <div class="title">宿¶æ æ¥çº¿ç´¢æå¡</div> 809 <div class="subtitle">宿¶ææ¡å ¨çèå´çãç»æçº§ãæ æ¥ï¼<br>ä¸åå¤çï¼æ æ¥æ°¸è¿å¿«äººä¸æ¥</div> 810 </div> 811 <div class="image-col"> 812 <video src="./è§£å³æ¹æ¡/02.mp4" autoplay loop muted playsinline></video> 813 </div> 814 </div> 815 816 <div class="divider"></div> 817 818 <!-- Portfolio Section --> 819 <div class="portfolio-section"> 820 <div class="portfolio-title">MizarVision Portfolio</div>
821 <div class="portfolio-grid"> 822 <!-- Card 1 --> 823 <div class="portfolio-card"> 824 <div class="card-hover-fx"></div> 825 <img src="./产å䏿»é¡µ/spark-徿 .png" alt="Spark" class="card-logo"> 826 <a href="#" class="card-btn btn-explore">Explore</a> 827 </div> 828 <!-- Card 2 --> 829 <div class="portfolio-card"> 830 <div class="card-hover-fx"></div> 831 <img src="./产å䏿»é¡µ/frame-徿 .png" alt="Frame" class="card-logo"> 832 <a href="#" class="card-btn btn-disabled">Coming soon...</a> 833 </div> 834 <!-- Card 3 --> 835 <div class="portfolio-card"> 836 <div class="card-hover-fx"></div> 837 <img src="./产å䏿»é¡µ/pharos-徿 .png" alt="Pharos" class="card-logo" style="height: 68px;"> 838 <a href="#" class="card-btn btn-disabled">Coming soon...</a> 839 </div> 840 </div> 841 </div> 842 </div> 843 844 <!-- NEW SPARK EXPANDED SECTION --> 845 <div id="spark-extended"> 846 <div class="spark-header"> 847 <div class="spark-headline"> 848 <img src="./产å䏿»é¡µ/spark-徿 .png" alt="Spark Logo"> 849 <span>å ¨çæ æ¥é¨æ·</span> 850 </div> 851 <div class="spark-subheadline">é¢å 䏿¥ï¼æç¥ä¸ç</div> 852 </div> 853 854 <!-- Part 1 --> 855 <div class="spark-row-split"> 856 <div class="spark-img-wrapper sf-img"> 857 <img src="https://pic1.imgdb.cn/item/69aeccabafde4f1fb1c81f9e.png" class="base-img" alt="Base 1" 858 onerror="this.src='./logo-white.png'; this.style.opacity=0.1;"> 859 </div> 860 <div class="spark-split-text"> 861 <h3 class="spark-split-title">å¿«éè·åå ¨çèå´æ æ¥ç»æ</h3> 862 <div class="spark-split-content"> 863 <p>è§ çµåºäºå¼ºå¤§çå ¨ç弿ºæ°æ®ééç½ç»ãèªç æ æ¥æææ¨¡åï¼å©æ¨å¿«éææ¡æ æ¥ç»æ</p> 864 <ul> 865 <li>ç»æçº§äº¤ä»æ æ¥ç»æï¼ç®åæç¨</li> 866 <li>å¿«éææ¡å ¨çå¨åï¼æç ´åºåæç¥éå¶</li> 867 <li>对æå¿é£é©æåæç¥ï¼ä¸åäºåå¤ç</li> 868 <li>丰å¯çæ æ¥ç±»åï¼ä»å®è§æå¿å°åºåå®å ¨ï¼ä»å°ç¼å°éèé£é©</li> 869 </ul> 870 </div> 871 </div> 872 </div> 873 874 <!-- Part 2 --> 875 <div class="spark-row-split reverse"> 876 <div class="spark-img-wrapper sf-img"> 877 <img src="https://pic1.imgdb.cn/item/69aecce1afde4f1fb1c81fd4.png" class="base-img" alt="Demo 1"> 878 </div> 879 <div class="spark-split-text"> 880 <h3 class="spark-split-title" style="margin-top: 30px;">é¢åæ æ¥çAIåçè¾ å©å·¥å ·</h3> 881 <div class="spark-split-content" style="margin-bottom: 30px;"> 882 <p>é¢å¯¹ä»»ä½æ æ¥ç±»åãé¢å¯¹ä½ç§å¤æåºæ¯ï¼æä»¬æä¾æ·±åº¦è¦åæ æ¥è¡ä¸çAIæå¡ï¼è®©æ¨å¯ä»¥è¿ éææååæ ¸å¿</p> 883 <ul> 884 <li>å®åæ æ¥åæçAIè¯å«ï¼èªå¨è¯å«åæ æ³¨ç®æ 䏿´»å¨</li> 885 <li>é¢åæ æ¥ç深度解读ï¼é«æ¶ææ§æ´åæ æ¥ç»æä¸ç½è·¯å¨å</li> 886 </ul> 887 </div> 888 </div> 889 </div> 890 891 <!-- Part 3 --> 892 <div class="spark-row-split"> 893 <div class="spark-img-wrapper sf-img"> 894 <img src="https://pic1.imgdb.cn/item/69aecd74afde4f1fb1c8206a.jpg" class="base-img" alt="Part 3 Placeholder"> 895 </div> 896 <div class="spark-split-text"> 897 <h3 class="spark-split-title">å ¼å¤å¹¿åº¦ä¸æ·±åº¦çæ æ¥åææå¡</h3> 898 <div class="spark-split-content"> 899 <p>ä¾æè§ çµæ æ¥è¯å«æ¨¡åä¸ç¬å®¶çæ æ¥æ°æ®åºï¼æä»¬å 置丰å¯çæ æ¥æ°æ®å ³èè½åï¼å©åæ¨ä»¥ä¸åæ´å¯å ¨å±</p> 900 <ul> 901 <li>ä¸é¢åºæ¯çé¿æè·è¸ª</li> 902 <li>ç¸å ³æ æ¥çå ¨èªå¨æ¨è</li> 903 <li>æ½å¨å ³èèæ çæºè½æ¨è</li> 904 </ul> 905 </div> 906 </div> 907 </div> 908 </div> 909 910 <div class="bottom-cta-wrapper"> 911 <a href="#" class="book-a-demo-btn">Book a Demo</a> 912 </div> 913 </div> 914 915 <!-- Book a demo Modal --> 916 <div class="demo-modal-overlay" id="demoModal"> 917 <div class="demo-modal"> 918 <button class="demo-modal-close" id="demoCloseBtn">×</button> 919 <h2 class="demo-modal-title">Book a Demo</h2> 920 <p class="demo-modal-subtitle">请填å以ä¸ä¿¡æ¯ï¼æä»¬çä¸å®¶å°å°½å¿«ä¸æ¨èç³»ã</p> 921 <form class="demo-form" id="demoSubmitForm"> 922 <div class="form-group"> 923 <label>å§å Name</label> 924 <input type="text" id="demoName" placeholder="æ¨çç§°å¼" required> 925 </div> 926 <div class="form-group"> 927 <label>é®ç®± Email</label> 928 <input type="email" id="demoEmail" placeholder="æ¨çå·¥ä½é®ç®±" required> 929 </div> 930 <div class="form-group"> 931 <label>å ¬å¸åç§° Company</label> 932 <input type="text" id="demoCompany" placeholder="æ¨æå¨çå ¬å¸" required> 933 </div> 934 <div class="form-group"> 935 <label>çµè¯ Phone</label> 936 <input type="tel" id="demoPhone" placeholder="æ¨çèç³»çµè¯ (éå¡«)"> 937 </div> 938 <div class="form-group"> 939 <label>å¨è¯¢çè¨ Message</label> 940 <textarea rows="4" id="demoMessage" placeholder="请ç®è¦æè¿°æ¨çéæ± (éå¡«)"></textarea> 941 </div> 942 <button type="submit" class="demo-submit-btn">æäº¤ç³è¯· Submit</button> 943 </form> 944 </div> 945 </div> 946 947 <!-- GSAP for Smooth Drop Actions --> 948
948<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
948 949
949<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
949 950 951
951<script> 952 gsap.registerPlugin(ScrollTrigger); 953 954 document.addEventListener("DOMContentLoaded", function () { 955 // Select sections, dividers, portfolio title and cards for animation 956 const targets = document.querySelectorAll('.section, .divider, .portfolio-title, .portfolio-card'); 957 958 const observer = new IntersectionObserver((entries) => { 959 entries.forEach(entry => { 960 if (entry.isIntersecting) { 961 entry.target.classList.add('visible'); 962 } 963 }); 964 }, { 965 threshold: 0.3 // 30% å¯è§æ¶è§¦åå¨ç» 966 }); 967 968 targets.forEach(target => { 969 observer.observe(target); 970 }); 971 972 // ä¸å±çèæ¯åè²ä¸ç½æ ¼æ·¡åºçå¬å¨ 973 const checkBgColor = () => { 974 const portfolioTop = document.querySelector('.portfolio-section').getBoundingClientRect().top; 975 // å½å¡çåºè¿å ¥è§å£çº¦15%æ¶ï¼å³è·ç¦»é¡¶é¨å°äºå±å¹é«åº¦ç85%ï¼ï¼ä¿æé»åç¶æ 976 if (portfolioTop < window.innerHeight * 0.85) { 977 document.body.classList.add('portfolio-active'); 978 } else { 979 document.body.classList.remove('portfolio-active'); 980 } 981 }; 982 window.addEventListener('scroll', checkBgColor); 983 window.addEventListener('resize', checkBgColor); 984 checkBgColor(); /* åå§æ£æ¥ */ 985 986 // EXPLORE BUTTON CLICK & GSAP SETUP 987 const exploreBtn = document.querySelector('.btn-explore'); 988 const sparkSection = document.getElementById('spark-extended'); 989 990 exploreBtn.addEventListener('click', function (e) { 991 e.preventDefault(); 992 sparkSection.style.display = 'block'; 993 void sparkSection.offsetWidth; // Force Reflow 994 995 sparkSection.classList.add('active'); 996 997 // Smooth down scroll 998 setTimeout(() => { 999 sparkSection.scrollIntoView({ behavior: 'smooth', block: 'start' }); 1000 }, 100); 1001 1002 // Re-initialize GSAP Floating item popups just for newly displayed elements 1003 const floatContainers = document.querySelectorAll('.sf-img'); 1004 floatContainers.forEach(container => { 1005 const items = container.querySelectorAll('.f-item'); 1006 if (items.length > 0) { 1007 gsap.to(items, { 1008 scrollTrigger: { 1009 trigger: container, 1010 start: "top 75%" 1011 }, 1012 opacity: 1, 1013 y: 0, 1014 scale: 1, 1015 duration: 1.0, 1016 ease: "back.out(1.5)", 1017 stagger: 0.15, 1018 onComplete: () => { 1019 // Add gentle infinite floating after entry 1020 gsap.to(items, { 1021 y: "-=15", 1022 duration: 3, 1023 ease: "sine.inOut", 1024 yoyo: true, 1025 repeat: -1, 1026 stagger: { 1027 each: 0.4, 1028 from: "random" 1029 } 1030 }); 1031 } 1032 }); 1033 } 1034 }); 1035 1036 // Animate base-images (the main 3 big images in Spark section) 1037 const baseImages = document.querySelectorAll('.spark-row-split .base-img'); 1038 baseImages.forEach(img => { 1039 gsap.to(img, { 1040 scrollTrigger: { 1041 trigger: img.closest('.spark-row-split'), 1042 start: "top 80%" 1043 }, 1044 opacity: 1, 1045 y: 0, 1046 scale: 1, 1047 duration: 1.2, 1048 ease: "back.out(1.5)" 1049 }); 1050 }); 1051 1052 // Animate bottom CTA 1053 const bottomCta = document.querySelector('.book-a-demo-btn'); 1054 if (bottomCta) { 1055 gsap.to(bottomCta, { 1056 scrollTrigger: { 1057 trigger: ".bottom-cta-wrapper", 1058 start: "top 95%", // triggers when CTA container is entering screen 1059 }, 1060 opacity: 1, 1061 y: 0, 1062 duration: 0.8, 1063 ease: "power3.out" 1064 }); 1065 } 1066 1067 ScrollTrigger.refresh(); 1068 }); 1069 1070 // Modal Logic 1071 const demoBtn = document.querySelector('.book-a-demo-btn'); 1072 const demoModal = document.getElementById('demoModal'); 1073 const closeBtn = document.getElementById('demoCloseBtn'); 1074 1075 if (demoBtn && demoModal && closeBtn) { 1076 demoBtn.addEventListener('click', (e) => { 1077 e.preventDefault(); 1078 demoModal.classList.add('active'); 1079 }); 1080 1081 closeBtn.addEventListener('click', () => { 1082 demoModal.classList.remove('active'); 1083 }); 1084 1085 demoModal.addEventListener('click', (e) => { 1086 // close modal when clicking outside the modal box 1087 if (e.target === demoModal) { 1088 demoModal.classList.remove('active'); 1089 } 1090 }); 1091 1092 const API_URL = '/sendmail.php'; // ååç¸å¯¹è·¯å¾ï¼æ é localhost:8000 1093 1094const demoSubmitForm = document.getElementById('demoSubmitForm'); 1095if (demoSubmitForm) { 1096 demoSubmitForm.addEventListener('submit', async (e) => { 1097 e.preventDefault(); 1098 1099 const submitBtn = demoSubmitForm.querySelector('.demo-submit-btn'); 1100 const originalText = submitBtn.textContent; 1101 1102 // ä½¿ç¨ FormData è䏿¯ JSONï¼é¿å CORS 颿£ï¼ 1103 const formData = new FormData(); 1104 formData.append('name', document.getElementById('demoName').value.trim()); 1105 formData.append('email', document.getElementById('demoEmail').value.trim()); 1106 formData.append('company', document.getElementById('demoCompany').value.trim()); 1107 formData.append('phone', document.getElementById('demoPhone').value.trim()); 1108 formData.append('message', document.getElementById('demoMessage').value.trim()); 1109 1110 // ç®åéªè¯ 1111 if (!formData.get('name') || !formData.get('email') || !formData.get('company')) { 1112 alert('请填åå¿ å¡«é¡¹ï¼å§åãé®ç®±ãå ¬å¸ï¼'); 1113 return; 1114 } 1115 1116 submitBtn.disabled = true; 1117 submitBtn.textContent = 'æäº¤ä¸...'; 1118 1119 try { 1120 // å ³é®ï¼ä¸è®¾ç½® Content-Typeï¼è®©æµè§å¨èªå¨è®¾ç½® multipart/form-data 1121 const response = await fetch(API_URL, { 1122 method: 'POST', 1123 body: formData 1124 // 注æï¼æ²¡æ headers: { 'Content-Type': ... }ï¼æ²¡æ mode: 'cors' 1125 }); 1126 1127 const result = await response.json(); 1128 1129 if (result.status === 'success') { 1130 alert('æäº¤æåï¼æä»¬ä¼å°½å¿«ä¸æ¨èç³»ã'); 1131 demoSubmitForm.reset(); 1132 demoModal.classList.remove('active'); 1133 } else { 1134 alert('æäº¤å¤±è´¥ï¼' + result.message); 1135 } 1136 } catch (error) { 1137 console.error('Error:', error); 1138 alert('ç½ç»é误ï¼è¯·ç´æ¥èç³»é®ç®±ï¼[email protected]'); 1139 } finally { 1140 submitBtn.disabled = false;
1141 submitBtn.textContent = originalText; 1142 } 1143 }); 1144} 1145 } 1146 1147 }); 1148 </script>
1148 1149</body> 1150 1151</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.