PageSourceSearch

https://mizarvision.com/solutions.html

html mizarvision.com collected 2026-10-02 16:48:29 UTC 38,344 bytes, 1,151 lines download raw bytes

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">&times;</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.