Hugging Face's logo

Spaces:
maxtom0
/
cybertest1
Running

App Files Community
maxtom0 commited on
Commit
d6722fc
·
verified ·
1 Parent(s): 950202e

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +205 -176
index.html CHANGED
@@ -1,20 +1,22 @@
1
  <!DOCTYPE html>
2
- <html lang="zh-CN">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>CyberOrigin | 智能驱动未来</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
  <style>
9
- /* 全局样式 */
10
  :root {
11
- --primary: #4a35b5;
12
- --secondary: #7a4af7;
13
- --accent: #ff6b00;
14
- --dark: #0f0e17;
15
- --light: #f8f8ff;
 
 
16
  --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
17
- --shadow: 0 10px 30px rgba(74, 53, 181, 0.2);
18
  }
19
 
20
  * {
@@ -24,9 +26,9 @@
24
  }
25
 
26
  body {
27
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
28
- color: var(--dark);
29
- background-color: var(--light);
30
  overflow-x: hidden;
31
  line-height: 1.6;
32
  }
@@ -61,22 +63,22 @@
61
 
62
  .btn-primary:hover {
63
  transform: translateY(-3px);
64
- box-shadow: 0 15px 35px rgba(74, 53, 181, 0.3);
65
  }
66
 
67
  .btn-secondary {
68
- background: white;
69
- color: var(--primary);
70
- border: 1px solid var(--primary);
71
  }
72
 
73
  .btn-secondary:hover {
74
- background: var(--gradient);
75
  color: white;
76
  border-color: transparent;
77
  }
78
 
79
- /* 导航栏 */
80
  header {
81
  position: fixed;
82
  top: 0;
@@ -85,13 +87,13 @@
85
  padding: 20px 0;
86
  z-index: 1000;
87
  transition: all 0.3s ease;
88
- background-color: rgba(255, 255, 255, 0.9);
89
  backdrop-filter: blur(10px);
90
  }
91
 
92
  header.scrolled {
93
  padding: 15px 0;
94
- box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
95
  }
96
 
97
  nav {
@@ -105,7 +107,7 @@
105
  align-items: center;
106
  font-size: 28px;
107
  font-weight: 800;
108
- color: var(--primary);
109
  }
110
 
111
  .logo i {
@@ -125,9 +127,13 @@
125
  }
126
 
127
  .nav-links a {
128
- font-weight: 600;
129
- transition: color 0.3s;
130
- position: relative;
 
 
 
 
131
  }
132
 
133
  .nav-links a:after {
@@ -145,20 +151,16 @@
145
  width: 100%;
146
  }
147
 
148
- .nav-links a:hover {
149
- color: var(--secondary);
150
- }
151
-
152
  .mobile-menu-btn {
153
  display: none;
154
  background: none;
155
  border: none;
156
  font-size: 24px;
157
- color: var(--dark);
158
  cursor: pointer;
159
  }
160
 
161
- /* 英雄区域 */
162
  .hero {
163
  height: 100vh;
164
  display: flex;
@@ -166,6 +168,7 @@
166
  padding-top: 80px;
167
  position: relative;
168
  overflow: hidden;
 
169
  }
170
 
171
  .hero-content {
@@ -189,7 +192,7 @@
189
  font-size: 20px;
190
  margin-bottom: 30px;
191
  max-width: 600px;
192
- color: #555;
193
  animation: fadeInUp 1s ease 0.2s both;
194
  }
195
 
@@ -215,10 +218,12 @@
215
  box-shadow: var(--shadow);
216
  transform: perspective(1000px) rotateY(-5deg);
217
  transition: transform 0.5s ease;
 
218
  }
219
 
220
  .hero-img:hover {
221
  transform: perspective(1000px) rotateY(0deg);
 
222
  }
223
 
224
  .particles {
@@ -230,10 +235,10 @@
230
  z-index: 1;
231
  }
232
 
233
- /* 特点部分 */
234
  .features {
235
  padding: 100px 0;
236
- background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="%23f8f8ff" fill-opacity="0.1" d="M0,256L48,250.7C96,245,192,235,288,229.3C384,224,480,224,576,202.7C672,181,768,139,864,133.3C960,128,1056,160,1152,170.7C1248,181,1344,171,1392,165.3L1440,160L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>') no-repeat top center/cover;
237
  }
238
 
239
  .section-title {
@@ -245,14 +250,14 @@
245
  .section-title h2 {
246
  font-size: 40px;
247
  font-weight: 800;
248
- color: var(--primary);
249
  margin-bottom: 15px;
250
  }
251
 
252
  .section-title p {
253
  max-width: 600px;
254
  margin: 0 auto;
255
- color: #666;
256
  }
257
 
258
  .features-grid {
@@ -262,7 +267,7 @@
262
  }
263
 
264
  .feature-card {
265
- background: white;
266
  border-radius: 20px;
267
  padding: 40px 30px;
268
  box-shadow: var(--shadow);
@@ -270,27 +275,13 @@
270
  position: relative;
271
  overflow: hidden;
272
  z-index: 1;
273
- }
274
-
275
- .feature-card:before {
276
- content: '';
277
- position: absolute;
278
- top: 0;
279
- left: 0;
280
- width: 100%;
281
- height: 100%;
282
- background: var(--gradient);
283
- z-index: -1;
284
- opacity: 0;
285
- transition: opacity 0.3s ease;
286
  }
287
 
288
  .feature-card:hover {
289
  transform: translateY(-10px);
290
- }
291
-
292
- .feature-card:hover:before {
293
- opacity: 0.1;
294
  }
295
 
296
  .feature-icon {
@@ -304,20 +295,20 @@
304
  font-size: 30px;
305
  color: white;
306
  margin-bottom: 25px;
307
- box-shadow: 0 10px 20px rgba(74, 53, 181, 0.2);
308
  }
309
 
310
  .feature-card h3 {
311
  font-size: 22px;
312
  margin-bottom: 15px;
313
- color: var(--dark);
314
  }
315
 
316
  .feature-card p {
317
- color: #666;
318
  }
319
 
320
- /* 统计部分 */
321
  .stats {
322
  padding: 80px 0;
323
  background: var(--gradient);
@@ -339,6 +330,7 @@
339
  border-radius: 15px;
340
  backdrop-filter: blur(5px);
341
  transition: all 0.3s ease;
 
342
  }
343
 
344
  .stat-item:hover {
@@ -364,10 +356,10 @@
364
  opacity: 0.9;
365
  }
366
 
367
- /* 服务部分 */
368
  .services {
369
  padding: 100px 0;
370
- background-color: white;
371
  }
372
 
373
  .services-container {
@@ -379,14 +371,17 @@
379
  .service-card {
380
  border-radius: 20px;
381
  overflow: hidden;
382
- box-shadow: var(--shadow);
383
  transition: all 0.5s ease;
384
- background: white;
 
385
  }
386
 
387
  .service-card:hover {
388
  transform: translateY(-10px);
389
- box-shadow: 0 25px 50px rgba(74, 53, 181, 0.15);
 
 
390
  }
391
 
392
  .service-img {
@@ -413,11 +408,11 @@
413
  .service-content h3 {
414
  font-size: 22px;
415
  margin-bottom: 15px;
416
- color: var(--dark);
417
  }
418
 
419
  .service-content p {
420
- color: #666;
421
  margin-bottom: 20px;
422
  }
423
 
@@ -435,17 +430,17 @@
435
  }
436
 
437
  .service-link:hover {
438
- color: var(--primary);
439
  }
440
 
441
  .service-link:hover i {
442
  transform: translateX(5px);
443
  }
444
 
445
- /* 联系我们部分 */
446
  .contact {
447
  padding: 100px 0;
448
- background: linear-gradient(135deg, rgba(248, 248, 255, 0.9), rgba(248, 248, 255, 0.9)), url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover;
449
  }
450
 
451
  .contact-container {
@@ -481,18 +476,19 @@
481
  .contact-details h3 {
482
  font-size: 22px;
483
  margin-bottom: 10px;
484
- color: var(--dark);
485
  }
486
 
487
  .contact-details p {
488
- color: #666;
489
  }
490
 
491
  .contact-form {
492
- background: white;
493
  padding: 40px;
494
  border-radius: 20px;
495
  box-shadow: var(--shadow);
 
496
  }
497
 
498
  .form-group {
@@ -502,16 +498,23 @@
502
  .form-control {
503
  width: 100%;
504
  padding: 15px 20px;
505
- border: 1px solid #ddd;
506
  border-radius: 10px;
507
  font-size: 16px;
508
  transition: all 0.3s ease;
 
 
 
 
 
 
509
  }
510
 
511
  .form-control:focus {
512
  border-color: var(--secondary);
513
- box-shadow: 0 0 0 3px rgba(122, 74, 247, 0.1);
514
  outline: none;
 
515
  }
516
 
517
  textarea.form-control {
@@ -536,9 +539,9 @@
536
  box-shadow: var(--shadow);
537
  }
538
 
539
- /* 页脚 */
540
  footer {
541
- background: var(--dark);
542
  color: white;
543
  padding: 80px 0 30px;
544
  position: relative;
@@ -555,6 +558,7 @@
555
  font-size: 20px;
556
  margin-bottom: 25px;
557
  position: relative;
 
558
  }
559
 
560
  .footer-col h3:after {
@@ -570,6 +574,7 @@
570
  .footer-col p {
571
  opacity: 0.8;
572
  margin-bottom: 20px;
 
573
  }
574
 
575
  .footer-links {
@@ -585,11 +590,12 @@
585
  transition: all 0.3s ease;
586
  position: relative;
587
  padding-left: 20px;
 
588
  }
589
 
590
  .footer-links a:hover {
591
  opacity: 1;
592
- color: var(--secondary);
593
  padding-left: 25px;
594
  }
595
 
@@ -600,6 +606,7 @@
600
  top: 0;
601
  opacity: 0;
602
  transition: all 0.3s ease;
 
603
  }
604
 
605
  .footer-links a:hover:before {
@@ -617,16 +624,26 @@
617
  width: 40px;
618
  height: 40px;
619
  border-radius: 50%;
620
- background: rgba(255, 255, 255, 0.1);
621
  display: flex;
622
  align-items: center;
623
  justify-content: center;
624
  transition: all 0.3s ease;
 
 
625
  }
626
 
627
  .social-link:hover {
628
  background: var(--secondary);
 
629
  transform: translateY(-5px);
 
 
 
 
 
 
 
630
  }
631
 
632
  .footer-bottom {
@@ -634,9 +651,10 @@
634
  padding-top: 30px;
635
  border-top: 1px solid rgba(255, 255, 255, 0.1);
636
  opacity: 0.7;
 
637
  }
638
 
639
- /* 动画 */
640
  @keyframes fadeIn {
641
  from { opacity: 0; }
642
  to { opacity: 1; }
@@ -662,7 +680,7 @@
662
  animation: float 3s ease-in-out infinite;
663
  }
664
 
665
- /* 响应式设计 */
666
  @media (max-width: 992px) {
667
  .hero h1 {
668
  font-size: 48px;
@@ -684,13 +702,13 @@
684
  right: -100%;
685
  width: 80%;
686
  height: calc(100vh - 80px);
687
- background: white;
688
  flex-direction: column;
689
  align-items: center;
690
  justify-content: flex-start;
691
  padding-top: 50px;
692
  transition: all 0.5s ease;
693
- box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
694
  }
695
 
696
  .nav-links.active {
@@ -747,7 +765,7 @@
747
  </style>
748
  </head>
749
  <body>
750
- <!-- 导航栏 -->
751
  <header id="header">
752
  <div class="container">
753
  <nav>
@@ -757,10 +775,10 @@
757
  </a>
758
 
759
  <ul class="nav-links" id="navLinks">
760
- <li><a href="#home">首页</a></li>
761
- <li><a href="#features">产品特点</a></li>
762
- <li><a href="#services">服务</a></li>
763
- <li><a href="#contact">联系我们</a></li>
764
  </ul>
765
 
766
  <button class="mobile-menu-btn" id="mobileMenuBtn">
@@ -770,30 +788,30 @@
770
  </div>
771
  </header>
772
 
773
- <!-- 英雄区域 -->
774
  <section class="hero" id="home">
775
  <div class="container">
776
  <div class="hero-content">
777
- <h1>智创未来，引领数字革命</h1>
778
- <p>CyberOrigin通过前沿的AI技术，为企业提供智能化的数字化转型解决方案，助力企业在数字经济时代保持竞争优势。</p>
779
  <div class="hero-btns">
780
- <a href="#contact" class="btn btn-primary">免费咨询</a>
781
- <a href="#features" class="btn btn-secondary">了解产品</a>
782
  </div>
783
  </div>
784
  <div class="hero-image">
785
- <img src="https://images.unsplash.com/photo-1617791160536-598cf32026fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" alt="AI Technology" class="hero-img">
786
  <div class="particles" id="particles-js"></div>
787
  </div>
788
  </div>
789
  </section>
790
 
791
- <!-- 特点部分 -->
792
  <section class="features" id="features">
793
  <div class="container">
794
  <div class="section-title">
795
- <h2>我们的独特优势</h2>
796
- <p>CyberOrigin整合了最先进的AI技术，为企业提供全方位的数字解决方案</p>
797
  </div>
798
 
799
  <div class="features-grid">
@@ -801,90 +819,90 @@
801
  <div class="feature-icon">
802
  <i class="fas fa-brain"></i>
803
  </div>
804
- <h3>智能决策系统</h3>
805
- <p>基于深度学习的预测分析引擎，帮助企业快速做出最优决策，缩短决策时间高达70%。</p>
806
  </div>
807
 
808
  <div class="feature-card">
809
  <div class="feature-icon">
810
  <i class="fas fa-chart-line"></i>
811
  </div>
812
- <h3>实时数据分析</h3>
813
- <p>毫秒级数据处理能力，可同时分析上百万数据点，洞察商业趋势，发现隐藏商机。</p>
814
  </div>
815
 
816
  <div class="feature-card">
817
  <div class="feature-icon">
818
  <i class="fas fa-shield-alt"></i>
819
  </div>
820
- <h3>高级安全防护</h3>
821
- <p>多层安全防护系统，AI驱动的异常行为检测，确保企业数据免受各类网络威胁。</p>
822
  </div>
823
 
824
  <div class="feature-card">
825
  <div class="feature-icon">
826
  <i class="fas fa-cogs"></i>
827
  </div>
828
- <h3>自动化流程</h3>
829
- <p>自动化重复性工作流程，减少人工干预，可将运营效率提升40%以上。</p>
830
  </div>
831
 
832
  <div class="feature-card">
833
  <div class="feature-icon">
834
  <i class="fas fa-cloud"></i>
835
  </div>
836
- <h3>云原生架构</h3>
837
- <p>弹性可扩展的云基础设施，支持混合云部署，适应企业不同阶段的业务需求。</p>
838
  </div>
839
 
840
  <div class="feature-card">
841
  <div class="feature-icon">
842
  <i class="fas fa-users"></i>
843
  </div>
844
- <h3>定制化服务</h3>
845
- <p>基于客户需求量身定制的AI解决方案，无缝集成现有系统，提升用户体验。</p>
846
  </div>
847
  </div>
848
  </div>
849
  </section>
850
 
851
- <!-- 统计部分 -->
852
  <section class="stats">
853
  <div class="container">
854
  <div class="stats-container">
855
  <div class="stat-item">
856
  <i class="fas fa-user-plus"></i>
857
  <div class="stat-number" data-count="150">0</div>
858
- <div class="stat-text">企业客户</div>
859
  </div>
860
 
861
  <div class="stat-item">
862
  <i class="fas fa-project-diagram"></i>
863
  <div class="stat-number" data-count="97">0</div>
864
- <div class="stat-text">% 客户满意度</div>
865
  </div>
866
 
867
  <div class="stat-item">
868
  <i class="fas fa-lightbulb"></i>
869
  <div class="stat-number" data-count="50">0</div>
870
- <div class="stat-text">+ 创新专利</div>
871
  </div>
872
 
873
  <div class="stat-item">
874
  <i class="fas fa-globe-americas"></i>
875
  <div class="stat-number" data-count="12">0</div>
876
- <div class="stat-text">国家/地区</div>
877
  </div>
878
  </div>
879
  </div>
880
  </section>
881
 
882
- <!-- 服务部分 -->
883
  <section class="services" id="services">
884
  <div class="container">
885
  <div class="section-title">
886
- <h2>我们的专业服务</h2>
887
- <p>从咨询到实施，我们提供全方位的AI解决方案</p>
888
  </div>
889
 
890
  <div class="services-container">
@@ -893,9 +911,9 @@
893
  <img src="https://images.unsplash.com/photo-1581094794324-aa92be4df258?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="AI Consulting">
894
  </div>
895
  <div class="service-content">
896
- <h3>AI战略咨询</h3>
897
- <p>为企业量身定制AI转型路线图，评估现有系统架构，规划分阶段实施计划，确保投资回报最大化。</p>
898
- <a href="#" class="service-link">了解更多 <i class="fas fa-arrow-right"></i></a>
899
  </div>
900
  </div>
901
 
@@ -904,9 +922,9 @@
904
  <img src="https://images.unsplash.com/photo-1523961131990-5ea7c61b2107?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1474&q=80" alt="Data Analytics">
905
  </div>
906
  <div class="service-content">
907
- <h3>智能数据分析</h3>
908
- <p>构建企业级数据分析平台，集成预测分析和商业智能工具，提供实时业务洞察和决策支持。</p>
909
- <a href="#" class="service-link">了解更多 <i class="fas fa-arrow-right"></i></a>
910
  </div>
911
  </div>
912
 
@@ -915,21 +933,21 @@
915
  <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1026&q=80" alt="AI Development">
916
  </div>
917
  <div class="service-content">
918
- <h3>AI应用开发</h3>
919
- <p>开发定制化AI应用，包括自然语言处理、计算机视觉、智能推荐系统等，解决特定业务场景问题。</p>
920
- <a href="#" class="service-link">了解更多 <i class="fas fa-arrow-right"></i></a>
921
  </div>
922
  </div>
923
  </div>
924
  </div>
925
  </section>
926
 
927
- <!-- 联系我们部分 -->
928
  <section class="contact" id="contact">
929
  <div class="container">
930
  <div class="section-title">
931
- <h2>联系我们</h2>
932
- <p>无论您有任何问题或需求，我们的专家团队都随时准备为您服务</p>
933
  </div>
934
 
935
  <div class="contact-container">
@@ -939,8 +957,8 @@
939
  <i class="fas fa-map-marker-alt"></i>
940
  </div>
941
  <div class="contact-details">
942
- <h3>公司地址</h3>
943
- <p>上海市浦东新区张江高科技园区<br>亮秀路112号Y1座902室</p>
944
  </div>
945
  </div>
946
 
@@ -949,7 +967,7 @@
949
  <i class="fas fa-envelope"></i>
950
  </div>
951
  <div class="contact-details">
952
- <h3>电子邮箱</h3>
953
  <p>[email protected]<br>[email protected]</p>
954
  </div>
955
  </div>
@@ -959,8 +977,8 @@
959
  <i class="fas fa-phone-alt"></i>
960
  </div>
961
  <div class="contact-details">
962
- <h3>联系电话</h3>
963
- <p>+86 21 5036 8888<br>周一至周五 9:00-18:00</p>
964
  </div>
965
  </div>
966
  </div>
@@ -968,81 +986,81 @@
968
  <div class="contact-form">
969
  <form id="contactForm">
970
  <div class="form-group">
971
- <input type="text" class="form-control" placeholder="您的姓名" required>
972
  </div>
973
  <div class="form-group">
974
- <input type="email" class="form-control" placeholder="电子邮箱" required>
975
  </div>
976
  <div class="form-group">
977
- <input type="text" class="form-control" placeholder="公司名称">
978
  </div>
979
  <div class="form-group">
980
- <textarea class="form-control" placeholder="您的需求或问题" required></textarea>
981
  </div>
982
- <button type="submit" class="submit-btn">发送信息 <i class="fas fa-paper-plane"></i></button>
983
  </form>
984
  </div>
985
  </div>
986
  </div>
987
  </section>
988
 
989
- <!-- 页脚 -->
990
  <footer>
991
  <div class="container">
992
  <div class="footer-container">
993
  <div class="footer-col">
994
- <h3>关于我们</h3>
995
- <p>CyberOrigin是一家专注于人工智能和数字化转型的高科技企业，致力于为企业提供前沿的智能解决方案。</p>
996
  <div class="social-links">
997
- <a href="#" class="social-link"><i class="fab fa-weixin"></i></a>
998
- <a href="#" class="social-link"><i class="fab fa-weibo"></i></a>
999
  <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
1000
  <a href="#" class="social-link"><i class="fab fa-github"></i></a>
1001
  </div>
1002
  </div>
1003
 
1004
  <div class="footer-col">
1005
- <h3>快速链接</h3>
1006
  <ul class="footer-links">
1007
- <li><a href="#home">首页</a></li>
1008
- <li><a href="#features">产品特点</a></li>
1009
- <li><a href="#services">服务</a></li>
1010
- <li><a href="#contact">联系我们</a></li>
1011
- <li><a href="#">博客</a></li>
1012
  </ul>
1013
  </div>
1014
 
1015
  <div class="footer-col">
1016
- <h3>解决方案</h3>
1017
  <ul class="footer-links">
1018
- <li><a href="#">金融服务</a></li>
1019
- <li><a href="#">医疗健康</a></li>
1020
- <li><a href="#">零售电商</a></li>
1021
- <li><a href="#">智能制造</a></li>
1022
- <li><a href="#">智慧城市</a></li>
1023
  </ul>
1024
  </div>
1025
 
1026
  <div class="footer-col">
1027
- <h3>新闻订阅</h3>
1028
- <p>订阅我们的电子通讯，获取最新产品动态和行业洞察。</p>
1029
  <form class="subscribe-form">
1030
  <div class="form-group">
1031
- <input type="email" class="form-control" placeholder="请输入邮箱">
1032
  </div>
1033
- <button type="submit" class="submit-btn">订阅</button>
1034
  </form>
1035
  </div>
1036
  </div>
1037
 
1038
  <div class="footer-bottom">
1039
- <p>&copy; 2023 CyberOrigin. 保留所有权利.</p>
1040
  </div>
1041
  </div>
1042
  </footer>
1043
 
1044
  <script>
1045
- // 导航栏滚动效果
1046
  window.addEventListener('scroll', function() {
1047
  const header = document.getElementById('header');
1048
  if (window.scrollY > 100) {
@@ -1052,7 +1070,7 @@
1052
  }
1053
  });
1054
 
1055
- // 移动端菜单切换
1056
  const mobileMenuBtn = document.getElementById('mobileMenuBtn');
1057
  const navLinks = document.getElementById('navLinks');
1058
 
@@ -1062,7 +1080,7 @@
1062
  '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
1063
  });
1064
 
1065
- // 平滑滚动
1066
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1067
  anchor.addEventListener('click', function(e) {
1068
  e.preventDefault();
@@ -1082,7 +1100,7 @@
1082
  });
1083
  });
1084
 
1085
- // 统计数字动画
1086
  function animateStats() {
1087
  const statItems = document.querySelectorAll('.stat-item');
1088
 
@@ -1104,7 +1122,7 @@
1104
  });
1105
  }
1106
 
1107
- // 当统计部分进入视口时触发动画
1108
  const observer = new IntersectionObserver((entries) => {
1109
  entries.forEach(entry => {
1110
  if (entry.isIntersecting) {
@@ -1116,7 +1134,7 @@
1116
 
1117
  observer.observe(document.querySelector('.stats'));
1118
 
1119
- // 粒子效果
1120
  function initParticles() {
1121
  const canvas = document.createElement('canvas');
1122
  const particlesContainer = document.querySelector('.particles');
@@ -1132,7 +1150,7 @@
1132
  const particleCount = 50;
1133
  const particles = [];
1134
 
1135
- // 创建粒子
1136
  for (let i = 0; i < particleCount; i++) {
1137
  particles.push({
1138
  x: Math.random() * canvas.width,
@@ -1140,34 +1158,34 @@
1140
  size: Math.random() * 3 + 1,
1141
  speedX: Math.random() * 0.5 - 0.25,
1142
  speedY: Math.random() * 0.5 - 0.25,
1143
- color: `rgba(122, 74, 247, ${Math.random() * 0.5 + 0.1})`
1144
  });
1145
  }
1146
 
1147
- // 绘制粒子
1148
  function drawParticles() {
1149
  ctx.clearRect(0, 0, canvas.width, canvas.height);
1150
 
1151
- // 绘制粒子
1152
  particles.forEach(p => {
1153
  ctx.fillStyle = p.color;
1154
  ctx.beginPath();
1155
  ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
1156
  ctx.fill();
1157
 
1158
- // 粒子运动
1159
  p.x += p.speedX;
1160
  p.y += p.speedY;
1161
 
1162
- // 边界检查
1163
  if (p.x < 0 || p.x > canvas.width) p.speedX *= -1;
1164
  if (p.y < 0 || p.y > canvas.height) p.speedY *= -1;
1165
 
1166
- // 绘制连接线
1167
  particles.forEach(p2 => {
1168
  const distance = Math.sqrt(Math.pow(p.x - p2.x, 2) + Math.pow(p.y - p2.y, 2));
1169
  if (distance < 100) {
1170
- ctx.strokeStyle = `rgba(122, 74, 247, ${1 - distance / 100})`;
1171
  ctx.lineWidth = 0.5;
1172
  ctx.beginPath();
1173
  ctx.moveTo(p.x, p.y);
@@ -1182,7 +1200,7 @@
1182
 
1183
  drawParticles();
1184
 
1185
- // 响应式调整
1186
  window.addEventListener('resize', () => {
1187
  canvas.width = particlesContainer.offsetWidth;
1188
  canvas.height = particlesContainer.offsetHeight;
@@ -1191,15 +1209,26 @@
1191
 
1192
  initParticles();
1193
 
1194
- // 表单提交
1195
  const contactForm = document.getElementById('contactForm');
1196
  if (contactForm) {
1197
  contactForm.addEventListener('submit', function(e) {
1198
  e.preventDefault();
1199
- alert('感谢您的留言！我们的团队将尽快与您联系。');
1200
  this.reset();
1201
  });
1202
  }
 
 
 
 
 
 
 
 
 
 
 
1203
  </script>
1204
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
1205
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CyberOrigin | AI-Powered Future</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
  <style>
9
+ /* Global Styles */
10
  :root {
11
+ --primary: #6d28d9;
12
+ --secondary: #8b5cf6;
13
+ --accent: #f97316;
14
+ --dark: #0f172a;
15
+ --darker: #020617;
16
+ --light: #f8fafc;
17
+ --gray: #94a3b8;
18
  --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
19
+ --shadow: 0 10px 30px rgba(109, 40, 217, 0.3);
20
  }
21
 
22
  * {
 
26
  }
27
 
28
  body {
29
+ font-family: 'Inter', system-ui, -apple-system, sans-serif;
30
+ color: var(--light);
31
+ background-color: var(--dark);
32
  overflow-x: hidden;
33
  line-height: 1.6;
34
  }
 
63
 
64
  .btn-primary:hover {
65
  transform: translateY(-3px);
66
+ box-shadow: 0 15px 35px rgba(109, 40, 217, 0.4);
67
  }
68
 
69
  .btn-secondary {
70
+ background: transparent;
71
+ color: var(--light);
72
+ border: 2px solid var(--secondary);
73
  }
74
 
75
  .btn-secondary:hover {
76
+ background: var(--secondary);
77
  color: white;
78
  border-color: transparent;
79
  }
80
 
81
+ /* Navigation */
82
  header {
83
  position: fixed;
84
  top: 0;
 
87
  padding: 20px 0;
88
  z-index: 1000;
89
  transition: all 0.3s ease;
90
+ background-color: rgba(15, 23, 42, 0.9);
91
  backdrop-filter: blur(10px);
92
  }
93
 
94
  header.scrolled {
95
  padding: 15px 0;
96
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
97
  }
98
 
99
  nav {
 
107
  align-items: center;
108
  font-size: 28px;
109
  font-weight: 800;
110
+ color: var(--light);
111
  }
112
 
113
  .logo i {
 
127
  }
128
 
129
  .nav-links a {
130
+ font-weight: 500;
131
+ transition: all 0.3s;
132
+ color: var(--gray);
133
+ }
134
+
135
+ .nav-links a:hover {
136
+ color: var(--light);
137
  }
138
 
139
  .nav-links a:after {
 
151
  width: 100%;
152
  }
153
 
 
 
 
 
154
  .mobile-menu-btn {
155
  display: none;
156
  background: none;
157
  border: none;
158
  font-size: 24px;
159
+ color: var(--light);
160
  cursor: pointer;
161
  }
162
 
163
+ /* Hero Section */
164
  .hero {
165
  height: 100vh;
166
  display: flex;
 
168
  padding-top: 80px;
169
  position: relative;
170
  overflow: hidden;
171
+ background: linear-gradient(rgba(2, 6, 23, 0.8), rgba(15, 23, 42, 1)), url('https://images.unsplash.com/photo-1677442135203-9aab5d1da531?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover;
172
  }
173
 
174
  .hero-content {
 
192
  font-size: 20px;
193
  margin-bottom: 30px;
194
  max-width: 600px;
195
+ color: var(--gray);
196
  animation: fadeInUp 1s ease 0.2s both;
197
  }
198
 
 
218
  box-shadow: var(--shadow);
219
  transform: perspective(1000px) rotateY(-5deg);
220
  transition: transform 0.5s ease;
221
+ border: 2px solid rgba(139, 92, 246, 0.3);
222
  }
223
 
224
  .hero-img:hover {
225
  transform: perspective(1000px) rotateY(0deg);
226
+ border-color: var(--secondary);
227
  }
228
 
229
  .particles {
 
235
  z-index: 1;
236
  }
237
 
238
+ /* Features Section */
239
  .features {
240
  padding: 100px 0;
241
+ background: var(--darker);
242
  }
243
 
244
  .section-title {
 
250
  .section-title h2 {
251
  font-size: 40px;
252
  font-weight: 800;
253
+ color: var(--light);
254
  margin-bottom: 15px;
255
  }
256
 
257
  .section-title p {
258
  max-width: 600px;
259
  margin: 0 auto;
260
+ color: var(--gray);
261
  }
262
 
263
  .features-grid {
 
267
  }
268
 
269
  .feature-card {
270
+ background: rgba(30, 41, 59, 0.5);
271
  border-radius: 20px;
272
  padding: 40px 30px;
273
  box-shadow: var(--shadow);
 
275
  position: relative;
276
  overflow: hidden;
277
  z-index: 1;
278
+ border: 1px solid rgba(139, 92, 246, 0.1);
 
 
 
 
 
 
 
 
 
 
 
 
279
  }
280
 
281
  .feature-card:hover {
282
  transform: translateY(-10px);
283
+ background: rgba(30, 41, 59, 0.7);
284
+ border-color: var(--secondary);
 
 
285
  }
286
 
287
  .feature-icon {
 
295
  font-size: 30px;
296
  color: white;
297
  margin-bottom: 25px;
298
+ box-shadow: 0 10px 20px rgba(109, 40, 217, 0.3);
299
  }
300
 
301
  .feature-card h3 {
302
  font-size: 22px;
303
  margin-bottom: 15px;
304
+ color: var(--light);
305
  }
306
 
307
  .feature-card p {
308
+ color: var(--gray);
309
  }
310
 
311
+ /* Stats Section */
312
  .stats {
313
  padding: 80px 0;
314
  background: var(--gradient);
 
330
  border-radius: 15px;
331
  backdrop-filter: blur(5px);
332
  transition: all 0.3s ease;
333
+ border: 1px solid rgba(255, 255, 255, 0.2);
334
  }
335
 
336
  .stat-item:hover {
 
356
  opacity: 0.9;
357
  }
358
 
359
+ /* Services Section */
360
  .services {
361
  padding: 100px 0;
362
+ background: var(--dark);
363
  }
364
 
365
  .services-container {
 
371
  .service-card {
372
  border-radius: 20px;
373
  overflow: hidden;
374
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
375
  transition: all 0.5s ease;
376
+ background: rgba(30, 41, 59, 0.5);
377
+ border: 1px solid rgba(139, 92, 246, 0.1);
378
  }
379
 
380
  .service-card:hover {
381
  transform: translateY(-10px);
382
+ box-shadow: 0 30px 60px rgba(109, 40, 217, 0.3);
383
+ border-color: var(--secondary);
384
+ background: rgba(30, 41, 59, 0.7);
385
  }
386
 
387
  .service-img {
 
408
  .service-content h3 {
409
  font-size: 22px;
410
  margin-bottom: 15px;
411
+ color: var(--light);
412
  }
413
 
414
  .service-content p {
415
+ color: var(--gray);
416
  margin-bottom: 20px;
417
  }
418
 
 
430
  }
431
 
432
  .service-link:hover {
433
+ color: var(--light);
434
  }
435
 
436
  .service-link:hover i {
437
  transform: translateX(5px);
438
  }
439
 
440
+ /* Contact Section */
441
  .contact {
442
  padding: 100px 0;
443
+ background: linear-gradient(rgba(2, 6, 23, 0.9), rgba(2, 6, 23, 0.95)), url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover;
444
  }
445
 
446
  .contact-container {
 
476
  .contact-details h3 {
477
  font-size: 22px;
478
  margin-bottom: 10px;
479
+ color: var(--light);
480
  }
481
 
482
  .contact-details p {
483
+ color: var(--gray);
484
  }
485
 
486
  .contact-form {
487
+ background: rgba(30, 41, 59, 0.7);
488
  padding: 40px;
489
  border-radius: 20px;
490
  box-shadow: var(--shadow);
491
+ border: 1px solid rgba(139, 92, 246, 0.2);
492
  }
493
 
494
  .form-group {
 
498
  .form-control {
499
  width: 100%;
500
  padding: 15px 20px;
501
+ border: 1px solid rgba(139, 92, 246, 0.2);
502
  border-radius: 10px;
503
  font-size: 16px;
504
  transition: all 0.3s ease;
505
+ background: rgba(15, 23, 42, 0.5);
506
+ color: var(--light);
507
+ }
508
+
509
+ .form-control::placeholder {
510
+ color: var(--gray);
511
  }
512
 
513
  .form-control:focus {
514
  border-color: var(--secondary);
515
+ box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
516
  outline: none;
517
+ background: rgba(15, 23, 42, 0.7);
518
  }
519
 
520
  textarea.form-control {
 
539
  box-shadow: var(--shadow);
540
  }
541
 
542
+ /* Footer */
543
  footer {
544
+ background: var(--darker);
545
  color: white;
546
  padding: 80px 0 30px;
547
  position: relative;
 
558
  font-size: 20px;
559
  margin-bottom: 25px;
560
  position: relative;
561
+ color: var(--light);
562
  }
563
 
564
  .footer-col h3:after {
 
574
  .footer-col p {
575
  opacity: 0.8;
576
  margin-bottom: 20px;
577
+ color: var(--gray);
578
  }
579
 
580
  .footer-links {
 
590
  transition: all 0.3s ease;
591
  position: relative;
592
  padding-left: 20px;
593
+ color: var(--gray);
594
  }
595
 
596
  .footer-links a:hover {
597
  opacity: 1;
598
+ color: var(--light);
599
  padding-left: 25px;
600
  }
601
 
 
606
  top: 0;
607
  opacity: 0;
608
  transition: all 0.3s ease;
609
+ color: var(--secondary);
610
  }
611
 
612
  .footer-links a:hover:before {
 
624
  width: 40px;
625
  height: 40px;
626
  border-radius: 50%;
627
+ background: rgba(255, 255, 255, 0.05);
628
  display: flex;
629
  align-items: center;
630
  justify-content: center;
631
  transition: all 0.3s ease;
632
+ color: var(--gray);
633
+ border: 1px solid rgba(255, 255, 255, 0.1);
634
  }
635
 
636
  .social-link:hover {
637
  background: var(--secondary);
638
+ color: white;
639
  transform: translateY(-5px);
640
+ border-color: transparent;
641
+ }
642
+
643
+ .subscribe-form {
644
+ display: flex;
645
+ flex-direction: column;
646
+ gap: 15px;
647
  }
648
 
649
  .footer-bottom {
 
651
  padding-top: 30px;
652
  border-top: 1px solid rgba(255, 255, 255, 0.1);
653
  opacity: 0.7;
654
+ color: var(--gray);
655
  }
656
 
657
+ /* Animations */
658
  @keyframes fadeIn {
659
  from { opacity: 0; }
660
  to { opacity: 1; }
 
680
  animation: float 3s ease-in-out infinite;
681
  }
682
 
683
+ /* Responsive Design */
684
  @media (max-width: 992px) {
685
  .hero h1 {
686
  font-size: 48px;
 
702
  right: -100%;
703
  width: 80%;
704
  height: calc(100vh - 80px);
705
+ background: var(--darker);
706
  flex-direction: column;
707
  align-items: center;
708
  justify-content: flex-start;
709
  padding-top: 50px;
710
  transition: all 0.5s ease;
711
+ box-shadow: -5px 0 20px rgba(0, 0, 0, 0.3);
712
  }
713
 
714
  .nav-links.active {
 
765
  </style>
766
  </head>
767
  <body>
768
+ <!-- Navigation -->
769
  <header id="header">
770
  <div class="container">
771
  <nav>
 
775
  </a>
776
 
777
  <ul class="nav-links" id="navLinks">
778
+ <li><a href="#home">Home</a></li>
779
+ <li><a href="#features">Features</a></li>
780
+ <li><a href="#services">Services</a></li>
781
+ <li><a href="#contact">Contact</a></li>
782
  </ul>
783
 
784
  <button class="mobile-menu-btn" id="mobileMenuBtn">
 
788
  </div>
789
  </header>
790
 
791
+ <!-- Hero Section -->
792
  <section class="hero" id="home">
793
  <div class="container">
794
  <div class="hero-content">
795
+ <h1>AI-Powered Digital Transformation</h1>
796
+ <p>CyberOrigin leverages cutting-edge AI technology to provide intelligent digital transformation solutions that give businesses a competitive edge in the digital economy.</p>
797
  <div class="hero-btns">
798
+ <a href="#contact" class="btn btn-primary">Free Consultation</a>
799
+ <a href="#features" class="btn btn-secondary">Explore Features</a>
800
  </div>
801
  </div>
802
  <div class="hero-image">
803
+ <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" alt="AI Technology" class="hero-img">
804
  <div class="particles" id="particles-js"></div>
805
  </div>
806
  </div>
807
  </section>
808
 
809
+ <!-- Features Section -->
810
  <section class="features" id="features">
811
  <div class="container">
812
  <div class="section-title">
813
+ <h2>Our Core Advantages</h2>
814
+ <p>CyberOrigin combines state-of-the-art AI technologies to deliver comprehensive digital solutions</p>
815
  </div>
816
 
817
  <div class="features-grid">
 
819
  <div class="feature-icon">
820
  <i class="fas fa-brain"></i>
821
  </div>
822
+ <h3>Intelligent Decision System</h3>
823
+ <p>Deep learning-powered predictive analytics engine that accelerates decision-making by up to 70%.</p>
824
  </div>
825
 
826
  <div class="feature-card">
827
  <div class="feature-icon">
828
  <i class="fas fa-chart-line"></i>
829
  </div>
830
+ <h3>Real-time Data Analytics</h3>
831
+ <p>Millisecond-level data processing capable of analyzing millions of data points simultaneously.</p>
832
  </div>
833
 
834
  <div class="feature-card">
835
  <div class="feature-icon">
836
  <i class="fas fa-shield-alt"></i>
837
  </div>
838
+ <h3>Advanced Security</h3>
839
+ <p>Multi-layered security with AI-driven anomaly detection to protect against cyber threats.</p>
840
  </div>
841
 
842
  <div class="feature-card">
843
  <div class="feature-icon">
844
  <i class="fas fa-cogs"></i>
845
  </div>
846
+ <h3>Process Automation</h3>
847
+ <p>Automate repetitive workflows to reduce manual intervention, increasing efficiency by 40%+.</p>
848
  </div>
849
 
850
  <div class="feature-card">
851
  <div class="feature-icon">
852
  <i class="fas fa-cloud"></i>
853
  </div>
854
+ <h3>Cloud-Native Architecture</h3>
855
+ <p>Elastic cloud infrastructure supporting hybrid deployments for evolving business needs.</p>
856
  </div>
857
 
858
  <div class="feature-card">
859
  <div class="feature-icon">
860
  <i class="fas fa-users"></i>
861
  </div>
862
+ <h3>Custom Solutions</h3>
863
+ <p>Tailored AI solutions that integrate seamlessly with existing systems to enhance UX.</p>
864
  </div>
865
  </div>
866
  </div>
867
  </section>
868
 
869
+ <!-- Stats Section -->
870
  <section class="stats">
871
  <div class="container">
872
  <div class="stats-container">
873
  <div class="stat-item">
874
  <i class="fas fa-user-plus"></i>
875
  <div class="stat-number" data-count="150">0</div>
876
+ <div class="stat-text">Enterprise Clients</div>
877
  </div>
878
 
879
  <div class="stat-item">
880
  <i class="fas fa-project-diagram"></i>
881
  <div class="stat-number" data-count="97">0</div>
882
+ <div class="stat-text">% Customer Satisfaction</div>
883
  </div>
884
 
885
  <div class="stat-item">
886
  <i class="fas fa-lightbulb"></i>
887
  <div class="stat-number" data-count="50">0</div>
888
+ <div class="stat-text">+ Patents</div>
889
  </div>
890
 
891
  <div class="stat-item">
892
  <i class="fas fa-globe-americas"></i>
893
  <div class="stat-number" data-count="12">0</div>
894
+ <div class="stat-text">Countries</div>
895
  </div>
896
  </div>
897
  </div>
898
  </section>
899
 
900
+ <!-- Services Section -->
901
  <section class="services" id="services">
902
  <div class="container">
903
  <div class="section-title">
904
+ <h2>Our Professional Services</h2>
905
+ <p>End-to-end AI solutions from consultation to implementation</p>
906
  </div>
907
 
908
  <div class="services-container">
 
911
  <img src="https://images.unsplash.com/photo-1581094794324-aa92be4df258?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="AI Consulting">
912
  </div>
913
  <div class="service-content">
914
+ <h3>AI Strategy Consulting</h3>
915
+ <p>Custom AI transformation roadmap, system architecture assessment, and phased implementation planning for maximum ROI.</p>
916
+ <a href="#" class="service-link">Learn more <i class="fas fa-arrow-right"></i></a>
917
  </div>
918
  </div>
919
 
 
922
  <img src="https://images.unsplash.com/photo-1523961131990-5ea7c61b2107?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1474&q=80" alt="Data Analytics">
923
  </div>
924
  <div class="service-content">
925
+ <h3>Intelligent Analytics</h3>
926
+ <p>Enterprise data analytics platform integrating predictive analytics and BI tools for real-time insights.</p>
927
+ <a href="#" class="service-link">Learn more <i class="fas fa-arrow-right"></i></a>
928
  </div>
929
  </div>
930
 
 
933
  <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1026&q=80" alt="AI Development">
934
  </div>
935
  <div class="service-content">
936
+ <h3>AI Application Development</h3>
937
+ <p>Custom AI apps including NLP, computer vision, and recommendation systems for specific business needs.</p>
938
+ <a href="#" class="service-link">Learn more <i class="fas fa-arrow-right"></i></a>
939
  </div>
940
  </div>
941
  </div>
942
  </div>
943
  </section>
944
 
945
+ <!-- Contact Section -->
946
  <section class="contact" id="contact">
947
  <div class="container">
948
  <div class="section-title">
949
+ <h2>Get In Touch</h2>
950
+ <p>Our team of experts is ready to assist with any questions or requirements</p>
951
  </div>
952
 
953
  <div class="contact-container">
 
957
  <i class="fas fa-map-marker-alt"></i>
958
  </div>
959
  <div class="contact-details">
960
+ <h3>Location</h3>
961
+ <p>123 Tech Boulevard<br>San Francisco, CA 94107</p>
962
  </div>
963
  </div>
964
 
 
967
  <i class="fas fa-envelope"></i>
968
  </div>
969
  <div class="contact-details">
970
+ <h3>Email</h3>
971
  <p>[email protected]<br>[email protected]</p>
972
  </div>
973
  </div>
 
977
  <i class="fas fa-phone-alt"></i>
978
  </div>
979
  <div class="contact-details">
980
+ <h3>Phone</h3>
981
+ <p>+1 (415) 555-0199<br>Monday - Friday, 9AM - 6PM PST</p>
982
  </div>
983
  </div>
984
  </div>
 
986
  <div class="contact-form">
987
  <form id="contactForm">
988
  <div class="form-group">
989
+ <input type="text" class="form-control" placeholder="Your Name" required>
990
  </div>
991
  <div class="form-group">
992
+ <input type="email" class="form-control" placeholder="Email Address" required>
993
  </div>
994
  <div class="form-group">
995
+ <input type="text" class="form-control" placeholder="Company Name">
996
  </div>
997
  <div class="form-group">
998
+ <textarea class="form-control" placeholder="Your Message or Requirements" required></textarea>
999
  </div>
1000
+ <button type="submit" class="submit-btn">Send Message <i class="fas fa-paper-plane"></i></button>
1001
  </form>
1002
  </div>
1003
  </div>
1004
  </div>
1005
  </section>
1006
 
1007
+ <!-- Footer -->
1008
  <footer>
1009
  <div class="container">
1010
  <div class="footer-container">
1011
  <div class="footer-col">
1012
+ <h3>About Us</h3>
1013
+ <p>CyberOrigin is a technology company specializing in AI and digital transformation, providing cutting-edge intelligent solutions for enterprises.</p>
1014
  <div class="social-links">
1015
+ <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
1016
+ <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
1017
  <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
1018
  <a href="#" class="social-link"><i class="fab fa-github"></i></a>
1019
  </div>
1020
  </div>
1021
 
1022
  <div class="footer-col">
1023
+ <h3>Quick Links</h3>
1024
  <ul class="footer-links">
1025
+ <li><a href="#home">Home</a></li>
1026
+ <li><a href="#features">Features</a></li>
1027
+ <li><a href="#services">Services</a></li>
1028
+ <li><a href="#contact">Contact</a></li>
1029
+ <li><a href="#">Blog</a></li>
1030
  </ul>
1031
  </div>
1032
 
1033
  <div class="footer-col">
1034
+ <h3>Solutions</h3>
1035
  <ul class="footer-links">
1036
+ <li><a href="#">Financial Services</a></li>
1037
+ <li><a href="#">Healthcare</a></li>
1038
+ <li><a href="#">Retail & E-commerce</a></li>
1039
+ <li><a href="#">Manufacturing</a></li>
1040
+ <li><a href="#">Smart Cities</a></li>
1041
  </ul>
1042
  </div>
1043
 
1044
  <div class="footer-col">
1045
+ <h3>Newsletter</h3>
1046
+ <p>Subscribe to our newsletter for product updates and industry insights.</p>
1047
  <form class="subscribe-form">
1048
  <div class="form-group">
1049
+ <input type="email" class="form-control" placeholder="Your Email Address">
1050
  </div>
1051
+ <button type="submit" class="submit-btn">Subscribe</button>
1052
  </form>
1053
  </div>
1054
  </div>
1055
 
1056
  <div class="footer-bottom">
1057
+ <p>&copy; 2023 CyberOrigin. All Rights Reserved.</p>
1058
  </div>
1059
  </div>
1060
  </footer>
1061
 
1062
  <script>
1063
+ // Header scroll effect
1064
  window.addEventListener('scroll', function() {
1065
  const header = document.getElementById('header');
1066
  if (window.scrollY > 100) {
 
1070
  }
1071
  });
1072
 
1073
+ // Mobile menu toggle
1074
  const mobileMenuBtn = document.getElementById('mobileMenuBtn');
1075
  const navLinks = document.getElementById('navLinks');
1076
 
 
1080
  '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
1081
  });
1082
 
1083
+ // Smooth scrolling
1084
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1085
  anchor.addEventListener('click', function(e) {
1086
  e.preventDefault();
 
1100
  });
1101
  });
1102
 
1103
+ // Animate stats numbers
1104
  function animateStats() {
1105
  const statItems = document.querySelectorAll('.stat-item');
1106
 
 
1122
  });
1123
  }
1124
 
1125
+ // Trigger stats animation when section is in view
1126
  const observer = new IntersectionObserver((entries) => {
1127
  entries.forEach(entry => {
1128
  if (entry.isIntersecting) {
 
1134
 
1135
  observer.observe(document.querySelector('.stats'));
1136
 
1137
+ // Particle effect
1138
  function initParticles() {
1139
  const canvas = document.createElement('canvas');
1140
  const particlesContainer = document.querySelector('.particles');
 
1150
  const particleCount = 50;
1151
  const particles = [];
1152
 
1153
+ // Create particles
1154
  for (let i = 0; i < particleCount; i++) {
1155
  particles.push({
1156
  x: Math.random() * canvas.width,
 
1158
  size: Math.random() * 3 + 1,
1159
  speedX: Math.random() * 0.5 - 0.25,
1160
  speedY: Math.random() * 0.5 - 0.25,
1161
+ color: `rgba(139, 92, 246, ${Math.random() * 0.5 + 0.1})`
1162
  });
1163
  }
1164
 
1165
+ // Draw particles
1166
  function drawParticles() {
1167
  ctx.clearRect(0, 0, canvas.width, canvas.height);
1168
 
1169
+ // Draw particles
1170
  particles.forEach(p => {
1171
  ctx.fillStyle = p.color;
1172
  ctx.beginPath();
1173
  ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
1174
  ctx.fill();
1175
 
1176
+ // Particle movement
1177
  p.x += p.speedX;
1178
  p.y += p.speedY;
1179
 
1180
+ // Boundary check
1181
  if (p.x < 0 || p.x > canvas.width) p.speedX *= -1;
1182
  if (p.y < 0 || p.y > canvas.height) p.speedY *= -1;
1183
 
1184
+ // Draw connecting lines
1185
  particles.forEach(p2 => {
1186
  const distance = Math.sqrt(Math.pow(p.x - p2.x, 2) + Math.pow(p.y - p2.y, 2));
1187
  if (distance < 100) {
1188
+ ctx.strokeStyle = `rgba(139, 92, 246, ${1 - distance / 100})`;
1189
  ctx.lineWidth = 0.5;
1190
  ctx.beginPath();
1191
  ctx.moveTo(p.x, p.y);
 
1200
 
1201
  drawParticles();
1202
 
1203
+ // Responsive adjustment
1204
  window.addEventListener('resize', () => {
1205
  canvas.width = particlesContainer.offsetWidth;
1206
  canvas.height = particlesContainer.offsetHeight;
 
1209
 
1210
  initParticles();
1211
 
1212
+ // Form submission
1213
  const contactForm = document.getElementById('contactForm');
1214
  if (contactForm) {
1215
  contactForm.addEventListener('submit', function(e) {
1216
  e.preventDefault();
1217
+ alert('Thank you for your message! Our team will contact you shortly.');
1218
  this.reset();
1219
  });
1220
  }
1221
+
1222
+ // Newsletter subscription
1223
+ const subscribeForms = document.querySelectorAll('.subscribe-form');
1224
+ subscribeForms.forEach(form => {
1225
+ form.addEventListener('submit', function(e) {
1226
+ e.preventDefault();
1227
+ const emailInput = this.querySelector('input[type="email"]');
1228
+ alert(`Thank you for subscribing with ${emailInput.value}! You'll receive our updates soon.`);
1229
+ emailInput.value = '';
1230
+ });
1231
+ });
1232
  </script>
1233
+ </body>
1234
  </html>