add language

config/card-en.json

@@ -0,0 +1,36 @@
+[
+    {
+        "src": "img/card/3D互动展示.png",
+        "title": "3D Interactive Display",
+        "desc": "Create engaging 3D interactive experiences that bring your products to life."
+    },
+    {
+        "src": "img/card/VR展厅制作.png",
+        "title": "VR Exhibition Hall Production",
+        "desc": "Build virtual reality exhibition halls, allowing customers to visit your display space anytime, anywhere."
+    },
+    {
+        "src": "img/card/XR大空间文旅制作-唯有大秦.png",
+        "title": "XR Large Space Cultural Tourism - Only Qin Dynasty",
+        "desc": "Xi'an Lintong District Terracotta Warriors Museum Only Qin Dynasty offline XR plot interpretation experience store, using the most advanced<br>MR technology to provide immersive experience combining virtual and reality.",
+        "url":"https://www.bilibili.com/video/BV1vVx4zUEqp/"
+    },
+    {
+        "src": "img/card/XR开发者教育-SpatialXR社区.png",
+        "title": "XR Developer Education - SpatialXR Community",
+        "desc": "Providing basic entry-level and advanced developer training tutorials, developer community, and product incubation.",
+        "url": "https://www.spatialxr.tech/"
+    },
+    {
+        "src": "img/card/XR应用发行-桌鼓达人.png",
+        "title": "XR Application Publishing - Table Drum Master",
+        "desc": "Technical support and industry resources to incubate the product 'Table Drum Master': as one of the MR escort experience works for Vivo Vision glasses.",
+        "url":"https://www.bilibili.com/video/BV1SfeJzVELc/"
+    },
+    {
+        "src": "img/card/XR游戏制作-SubspaceHunter.png",
+        "title": "XR Game Development - SubspaceHunter",
+        "desc": "A phenomenal hit for Meta Quest3 MR glasses in 2023.",
+        "url": "https://sh.xuking.tech/"
+    }
+]

config/lang-cn.json

@@ -0,0 +1,83 @@
+{
+    "nav": {
+        "home": "首页",
+        "services": "业务范围",
+        "partners": "合作伙伴",
+        "cases": "行业方案",
+        "about": "关于我们",
+        "contact": "联系我们"
+    },
+    "hero": {
+        "title": "虚境起源",
+        "subtitle": "Xuking Origin",
+        "slogan": "虚境起源"
+    },
+    "features": {
+        "title": "我们的核心优势",
+        "feature1": {
+            "title": "开发周期短",
+            "desc": "开发周期短，保证您的项目按时完成，24小时快速响应。"
+        },
+        "feature2": {
+            "title": "技术质量保证",
+            "desc": "通过专业的检测技术，保证您的项目在开发过程中随时都能保持高质量。"
+        },
+        "feature3": {
+            "title": "技术方案完善",
+            "desc": "从方案设计到开发的各个环节都有详细的设计和方案，确保项目顺利进行。"
+        }
+    },
+    "services": {
+        "title": "我们的业务范围"
+    },
+    "partners": {
+        "title": "合作伙伴"
+    },
+    "cases": {
+        "title": "行业方案案例"
+    },
+    "about": {
+        "title": "公司介绍",
+        "companyName": "广州市虚境起源科技有限公司",
+        "desc1": "我们主要提供虚拟现实与混合现实应用开发技术服务、技术服务、技术人员等服务均具备落地开发能力。",
+        "desc2": "成立时间：2023年",
+        "desc3": "已为数十家上市企业提供技术服务，培训虚拟现实开发者上万名。",
+        "stat1": {
+            "number": "100+",
+            "text": "成功项目"
+        },
+        "stat2": {
+            "number": "98%",
+            "text": "客户满意度"
+        },
+        "stat3": {
+            "number": "50+",
+            "text": "专业团队"
+        },
+        "stat4": {
+            "number": "20+",
+            "text": "行业经验"
+        }
+    },
+    "contact": {
+        "title": "联系我们",
+        "address": {
+            "title": "地址",
+            "content": "广东省广州市黄浦区科学城产业总部港A2栋1008"
+        },
+        "phone": {
+            "title": "电话",
+            "content": "13368952691"
+        },
+        "email": {
+            "title": "邮件",
+            "content": "w858626244@gmail.com"
+        }
+    },
+    "footer": {
+        "companyName": "虚境网络科技有限公司",
+        "desc": "我们专注于虚拟现实与混合现实应用开发，为客户提供高质量的技术解决方案。",
+        "contactInfo": "联系信息",
+        "copyright": "Copyright 广州市虚境起源科技有限公司"
+    }
+}

config/lang-en.json

@@ -0,0 +1,83 @@
+{
+    "nav": {
+        "home": "Home",
+        "services": "Services",
+        "partners": "Partners",
+        "cases": "Cases",
+        "about": "About",
+        "contact": "Contact"
+    },
+    "hero": {
+        "title": "Xuking Origin",
+        "subtitle": "Xuking Origin",
+        "slogan": "虚境起源"
+    },
+    "features": {
+        "title": "Our Core Advantages",
+        "feature1": {
+            "title": "Short Development Cycle",
+            "desc": "Fast development cycle ensures your project is completed on time with 24-hour quick response."
+        },
+        "feature2": {
+            "title": "Technical Quality Assurance",
+            "desc": "Through professional testing technology, we ensure your project maintains high quality throughout the development process."
+        },
+        "feature3": {
+            "title": "Comprehensive Technical Solutions",
+            "desc": "Detailed design and solutions at every stage from planning to development to ensure smooth project progress."
+        }
+    },
+    "services": {
+        "title": "Our Services"
+    },
+    "partners": {
+        "title": "Our Partners"
+    },
+    "cases": {
+        "title": "Industry Solutions & Cases"
+    },
+    "about": {
+        "title": "About Us",
+        "companyName": "Guangzhou Xuking Origin Technology Co., Ltd.",
+        "desc1": "We mainly provide virtual reality and mixed reality application development technology services, with full capability for implementation and development.",
+        "desc2": "Established: 2023",
+        "desc3": "We have provided technical services for dozens of listed companies and trained tens of thousands of virtual reality developers.",
+        "stat1": {
+            "number": "100+",
+            "text": "Successful Projects"
+        },
+        "stat2": {
+            "number": "98%",
+            "text": "Customer Satisfaction"
+        },
+        "stat3": {
+            "number": "50+",
+            "text": "Professional Team"
+        },
+        "stat4": {
+            "number": "20+",
+            "text": "Years of Experience"
+        }
+    },
+    "contact": {
+        "title": "Contact Us",
+        "address": {
+            "title": "Address",
+            "content": "A2-1008, Industrial Headquarters Port, Science City, Huangpu District, Guangzhou, Guangdong, China"
+        },
+        "phone": {
+            "title": "Phone",
+            "content": "13368952691"
+        },
+        "email": {
+            "title": "Email",
+            "content": "w858626244@gmail.com"
+        }
+    },
+    "footer": {
+        "companyName": "Xuking Network Technology Co., Ltd.",
+        "desc": "We focus on virtual reality and mixed reality application development, providing high-quality technical solutions for our clients.",
+        "contactInfo": "Contact Information",
+        "copyright": "Copyright Guangzhou Xuking Origin Technology Co., Ltd."
+    }
+}

config/video-cn.json

@@ -1,121 +1,145 @@
 [
   {
     "src": "video/数字企业-MR园区展示制作.mp4",
+    "preview": "数字企业-MR园区展示制作",
     "title": "数字企业-MR园区展示制作",
     "desc": "合作客户案例"
   },
   {
     "src": "video/智慧文旅-MR大空间制作.mp4",
+    "preview": "智慧文旅-MR大空间制作",
     "title": "智慧文旅-MR大空间制作",
     "desc": "合作客户案例"
   },
   {
     "src": "video/XR游戏-定制游戏制作.mp4",
+    "preview": "XR游戏-定制游戏制作",
     "title": "XR游戏-定制游戏制作",
     "desc": "合作客户案例"
   },
   {
     "src": "video/房产土地-VR可移动观览制作.mp4",
+    "preview": "房产土地-VR可移动观览制作",
     "title": "房产土地-VR可移动观览制作",
     "desc": "合作客户案例"
   },
   {
     "src": "video/MR古建筑.mp4",
+    "preview": "MR古建筑",
     "title": "MR古建筑",
     "desc": "合作客户案例"
   },
   {
     "src": "video/国博MR展示.mp4",
+    "preview": "国博MR展示",
     "title": "国博MR展示",
     "desc": "合作客户案例"
   },
   {
     "src": "video/传统复兴-文化传承教育.mp4",
+    "preview": "传统复兴-文化传承教育",
     "title": "传统复兴-文化传承教育",
     "desc": "合作客户案例"
   },
   {
     "src": "video/生产制造工农业-展示制作.mp4",
+    "preview": "生产制造工农业-展示制作",
     "title": "生产制造工农业-展示制作",
     "desc": "合作客户案例"
   },
   {
     "src": "video/建筑家庭·实景装修制作.mp4",
+    "preview": "建筑家庭·实景装修制作",
     "title": "建筑家庭·实景装修制作",
     "desc": "合作客户案例"
   },
   {
     "src": "video/Mobile应用移植.mp4",
+    "preview": "Mobile应用移植",
     "title": "Mobile应用移植",
     "desc": "合作客户案例"
   },
   {
     "src": "video/VR博物馆-互动式展示制作.mp4",
+    "preview": "VR博物馆-互动式展示制作",
     "title": "VR博物馆-互动式展示制作",
     "desc": "合作客户案例"
   },
   {
     "src": "video/XR课件-生物课程教学.mp4",
+    "preview": "XR课件-生物课程教学",
     "title": "XR课件-生物课程教学",
     "desc": "合作客户案例"
   },
   {
     "src": "video/游戏定制-XR塔防游戏.mp4",
+    "preview": "游戏定制-XR塔防游戏",
     "title": "游戏定制-XR塔防游戏",
     "desc": "合作客户案例"
   },
   {
     "src": "video/3D数字人-AR全息演绎.mp4",
+    "preview": "3D数字人-AR全息演绎",
     "title": "3D数字人-AR全息演绎",
     "desc": "合作客户案例"
   },
   {
     "src": "video/AR桌游-线下社交.mp4",
+    "preview": "AR桌游-线下社交",
     "title": "AR桌游-线下社交",
     "desc": "合作客户案例"
   },
   {
     "src": "video/VIVO-桌鼓达人.mp4",
+    "preview": "VIVO-桌鼓达人",
     "title": "VIVO-桌鼓达人",
     "desc": "合作客户案例"
   },
   {
     "src": "video/兵马俑博物馆-青铜车马复原.mp4",
+    "preview": "兵马俑博物馆-青铜车马复原",
     "title": "兵马俑博物馆-青铜车马复原",
     "desc": "合作客户案例"
   },
   {
     "src": "video/大空间侏罗纪-MR虚拟实结合.mp4",
+    "preview": "大空间侏罗纪-MR虚拟实结合",
     "title": "大空间侏罗纪-MR虚拟实结合",
     "desc": "合作客户案例"
   },
   {
     "src": "video/山海经-灵气复苏.mp4",
+    "preview": "山海经-灵气复苏",
     "title": "山海经-灵气复苏",
     "desc": "合作客户案例"
   },
-    {
+  {
     "src": "video/VR大空间-秦始皇陵.mp4",
+    "preview": "大空间-秦始皇陵",
     "title": "大空间-秦始皇陵",
     "desc": "合作客户案例"
   },
-    {
+  {
     "src": "video/MR丧尸入侵现实.mp4",
+    "preview": "MR丧尸入侵现实",
     "title": "MR丧尸入侵现实",
     "desc": "合作客户案例"
   },
-    {
+  {
     "src": "video/游船MR-大空间娱乐.mp4",
+    "preview": "游船MR-大空间娱乐",
     "title": "游船MR-大空间娱乐",
     "desc": "合作客户案例"
   },
-    {
+  {
     "src": "video/XR多人互动展览馆.mp4",
+    "preview": "XR多人互动展览馆",
     "title": "XR多人互动展览馆",
     "desc": "XR多人互动展览馆"
   },
-    {
+  {
     "src": "video/大空间-中国家风.mp4",
+    "preview": "大空间-传统家风文明化",
     "title": "大空间-传统家风文明化",
     "desc": "大空间-传统家风文明化"
   }

config/video-en.json

@@ -0,0 +1,146 @@
+[
+  {
+    "src": "video/数字企业-MR园区展示制作.mp4",
+    "preview": "数字企业-MR园区展示制作",
+    "title": "Digital Enterprise - MR Park Display Production",
+    "desc": "Client Case Study"
+  },
+  {
+    "src": "video/智慧文旅-MR大空间制作.mp4",
+    "preview": "智慧文旅-MR大空间制作",
+    "title": "Smart Cultural Tourism - MR Large Space Production",
+    "desc": "Client Case Study"
+  },
+  {
+    "src": "video/XR游戏-定制游戏制作.mp4",
+    "preview": "XR游戏-定制游戏制作",
+    "title": "XR Game - Custom Game Production",
+    "desc": "Client Case Study"
+  },
+  {
+    "src": "video/房产土地-VR可移动观览制作.mp4",
+    "preview": "房产土地-VR可移动观览制作",
+    "title": "Real Estate - VR Mobile Viewing Production",
+    "desc": "Client Case Study"
+  },
+  {
+    "src": "video/MR古建筑.mp4",
+    "preview": "MR古建筑",
+    "title": "MR Ancient Architecture",
+    "desc": "Client Case Study"
+  },
+  {
+    "src": "video/国博MR展示.mp4",
+    "preview": "国博MR展示",
+    "title": "National Museum MR Display",
+    "desc": "Client Case Study"
+  },
+  {
+    "src": "video/传统复兴-文化传承教育.mp4",
+    "preview": "传统复兴-文化传承教育",
+    "title": "Traditional Revival - Cultural Heritage Education",
+    "desc": "Client Case Study"
+  },
+  {
+    "src": "video/生产制造工农业-展示制作.mp4",
+    "preview": "生产制造工农业-展示制作",
+    "title": "Manufacturing & Agriculture - Display Production",
+    "desc": "Client Case Study"
+  },
+  {
+    "src": "video/建筑家庭·实景装修制作.mp4",
+    "preview": "建筑家庭·实景装修制作",
+    "title": "Architecture & Home - Real Scene Decoration",
+    "desc": "Client Case Study"
+  },
+  {
+    "src": "video/Mobile应用移植.mp4",
+    "preview": "Mobile应用移植",
+    "title": "Mobile Application Porting",
+    "desc": "Client Case Study"
+  },
+  {
+    "src": "video/VR博物馆-互动式展示制作.mp4",
+    "preview": "VR博物馆-互动式展示制作",
+    "title": "VR Museum - Interactive Display Production",
+    "desc": "Client Case Study"
+  },
+  {
+    "src": "video/XR课件-生物课程教学.mp4",
+    "preview": "XR课件-生物课程教学",
+    "title": "XR Courseware - Biology Teaching",
+    "desc": "Client Case Study"
+  },
+  {
+    "src": "video/游戏定制-XR塔防游戏.mp4",
+    "preview": "游戏定制-XR塔防游戏",
+    "title": "Game Customization - XR Tower Defense",
+    "desc": "Client Case Study"
+  },
+  {
+    "src": "video/3D数字人-AR全息演绎.mp4",
+    "preview": "3D数字人-AR全息演绎",
+    "title": "3D Digital Human - AR Holographic Performance",
+    "desc": "Client Case Study"
+  },
+  {
+    "src": "video/AR桌游-线下社交.mp4",
+    "preview": "AR桌游-线下社交",
+    "title": "AR Board Game - Offline Social",
+    "desc": "Client Case Study"
+  },
+  {
+    "src": "video/VIVO-桌鼓达人.mp4",
+    "preview": "VIVO-桌鼓达人",
+    "title": "VIVO - Table Drum Master",
+    "desc": "Client Case Study"
+  },
+  {
+    "src": "video/兵马俑博物馆-青铜车马复原.mp4",
+    "preview": "兵马俑博物馆-青铜车马复原",
+    "title": "Terracotta Warriors Museum - Bronze Chariot Restoration",
+    "desc": "Client Case Study"
+  },
+  {
+    "src": "video/大空间侏罗纪-MR虚拟实结合.mp4",
+    "preview": "大空间侏罗纪-MR虚拟实结合",
+    "title": "Large Space Jurassic - MR Virtual-Reality Fusion",
+    "desc": "Client Case Study"
+  },
+  {
+    "src": "video/山海经-灵气复苏.mp4",
+    "preview": "山海经-灵气复苏",
+    "title": "Classic of Mountains and Seas - Spiritual Revival",
+    "desc": "Client Case Study"
+  },
+  {
+    "src": "video/VR大空间-秦始皇陵.mp4",
+    "preview": "大空间-秦始皇陵",
+    "title": "Large Space - Mausoleum of the First Qin Emperor",
+    "desc": "Client Case Study"
+  },
+  {
+    "src": "video/MR丧尸入侵现实.mp4",
+    "preview": "MR丧尸入侵现实",
+    "title": "MR Zombie Invasion Reality",
+    "desc": "Client Case Study"
+  },
+  {
+    "src": "video/游船MR-大空间娱乐.mp4",
+    "preview": "游船MR-大空间娱乐",
+    "title": "Cruise Ship MR - Large Space Entertainment",
+    "desc": "Client Case Study"
+  },
+  {
+    "src": "video/XR多人互动展览馆.mp4",
+    "preview": "XR多人互动展览馆",
+    "title": "XR Multiplayer Interactive Exhibition Hall",
+    "desc": "XR Multiplayer Interactive Exhibition Hall"
+  },
+  {
+    "src": "video/大空间-中国家风.mp4",
+    "preview": "大空间-传统家风文明化",
+    "title": "Large Space - Traditional Chinese Family Values",
+    "desc": "Large Space - Traditional Chinese Family Values"
+  }
+]

css/style.css

@@ -167,6 +167,46 @@ header.scrolled {
     cursor: pointer;
 }
 
+.lang-toggle {
+    margin-left: 20px;
+}
+
+.lang-btn {
+    padding: 8px 16px;
+    background: transparent;
+    color: var(--dark);
+    border: 2px solid var(--primary);
+    border-radius: var(--radius);
+    font-weight: 600;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: var(--transition);
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.lang-btn:hover {
+    border-color: var(--secondary);
+    box-shadow: 0 4px 10px rgba(74, 63, 224, 0.2);
+}
+
+.lang-option {
+    transition: var(--transition);
+    color: rgba(0, 0, 0, 0.4);
+    cursor: pointer;
+}
+
+.lang-option.active {
+    color: var(--primary);
+    font-weight: 700;
+}
+
+.lang-separator {
+    color: rgba(0, 0, 0, 0.3);
+    margin: 0 2px;
+}
+
 /* Hero Section */
 .hero {
     min-height: 100vh;
@@ -637,4 +677,13 @@ footer {
         display: block;
     }
 
+    .lang-toggle {
+        margin-left: 10px;
+    }
+
+    .lang-btn {
+        padding: 6px 12px;
+        font-size: 0.85rem;
+    }
+
 }

index.html

@@ -20,13 +20,20 @@
                     <img src="img/logo.png" alt="Logo" style="height: 50px;">
                 </a>
                 <ul class="nav-links">
-                    <li><a href="#home">首页</a></li>
+                    <li><a href="#home" data-i18n="nav.home">首页</a></li>
-                    <li><a href="#services">业务范围</a></li>
+                    <li><a href="#services" data-i18n="nav.services">业务范围</a></li>
-                    <li><a href="#advantages">合作伙伴</a></li>
+                    <li><a href="#advantages" data-i18n="nav.partners">合作伙伴</a></li>
-                    <li><a href="#cases">行业方案</a></li>
+                    <li><a href="#cases" data-i18n="nav.cases">行业方案</a></li>
-                    <li><a href="#about">关于我们</a></li>
+                    <li><a href="#about" data-i18n="nav.about">关于我们</a></li>
-                    <li><a href="#contact">联系我们</a></li>
+                    <li><a href="#contact" data-i18n="nav.contact">联系我们</a></li>
                 </ul>
+                <div class="lang-toggle">
+                    <button id="langToggle" class="lang-btn">
+                        <span class="lang-option active" data-lang="cn">CN</span>
+                        <span class="lang-separator">/</span>
+                        <span class="lang-option" data-lang="en">EN</span>
+                    </button>
+                </div>
                 <div class="hamburger">
                     <i class="fas fa-bars"></i>
                 </div>
@@ -38,9 +45,9 @@
     <!-- Hero Section -->
     <section class="hero" id="home">
         <div class="hero-content">
-            <h1 class="hero-title">虚境起源</h1>
+            <h1 class="hero-title" data-i18n="hero.title">虚境起源</h1>
-            <h2 class="hero-subtitle">Xuking Origin</h2>
+            <h2 class="hero-subtitle" data-i18n="hero.subtitle">Xuking Origin</h2>
-            <div class="slogan-zh">虚境起源</div>
+            <div class="slogan-zh" data-i18n="hero.slogan">虚境起源</div>
         </div>
     </section>
 
@@ -49,29 +56,29 @@
     <section class="section">
         <div class="container">
             <div class="section-title">
-                <h2>我们的核心优势</h2>
+                <h2 data-i18n="features.title">我们的核心优势</h2>
             </div>
             <div class="features-grid">
                 <div class="feature-card">
                     <div class="feature-icon">
                         <i class="fas fa-rocket"></i>
                     </div>
-                    <h3>开发周期短</h3>
+                    <h3 data-i18n="features.feature1.title">开发周期短</h3>
-                    <p>开发周期短，保证您的项目按时完成，24小时快速响应。</p>
+                    <p data-i18n="features.feature1.desc">开发周期短，保证您的项目按时完成，24小时快速响应。</p>
                 </div>
                 <div class="feature-card">
                     <div class="feature-icon">
                         <i class="fas fa-gem"></i>
                     </div>
-                    <h3>技术质量保证</h3>
+                    <h3 data-i18n="features.feature2.title">技术质量保证</h3>
-                    <p>通过专业的检测技术，保证您的项目在开发过程中随时都能保持高质量。</p>
+                    <p data-i18n="features.feature2.desc">通过专业的检测技术，保证您的项目在开发过程中随时都能保持高质量。</p>
                 </div>
                 <div class="feature-card">
                     <div class="feature-icon">
                         <i class="fas fa-cogs"></i>
                     </div>
-                    <h3>技术方案完善</h3>
+                    <h3 data-i18n="features.feature3.title">技术方案完善</h3>
-                    <p>从方案设计到开发的各个环节都有详细的设计和方案，确保项目顺利进行。</p>
+                    <p data-i18n="features.feature3.desc">从方案设计到开发的各个环节都有详细的设计和方案，确保项目顺利进行。</p>
                 </div>
             </div>
         </div>
@@ -81,7 +88,7 @@
     <section class="section services" id="services">
         <div class="container">
             <div class="section-title">
-                <h2>我们的业务范围</h2>
+                <h2 data-i18n="services.title">我们的业务范围</h2>
             </div>
             <div class="services-grid" id="servicesGrid">
 
@@ -94,7 +101,7 @@
     <section class="section" id="advantages">
         <div class="container">
             <div class="section-title">
-                <h2>合作伙伴</h2>
+                <h2 data-i18n="partners.title">合作伙伴</h2>
             </div>
             <div class="partners-grid" id="partnersGrid">
 
@@ -105,7 +112,7 @@
     <section class="section cases" id="cases">
         <div class="container">
             <div class="section-title">
-                <h2>行业方案案例</h2>
+                <h2 data-i18n="cases.title">行业方案案例</h2>
             </div>
             <div class="cases-grid" id="casesGrid">
 
@@ -127,32 +134,32 @@
     <section class="section" id="about">
         <div class="container">
             <div class="section-title">
-                <h2>公司介绍</h2>
+                <h2 data-i18n="about.title">公司介绍</h2>
             </div>
             <div class="about-content">
                 <div class="about-text">
                     <h4>
-                        广州市虚境起源科技有限公司
+                        <span data-i18n="about.companyName">广州市虚境起源科技有限公司</span>
-                        <p>我们主要提供虚拟现实与混合现实应用开发技术服务、技术服务、技术人员等服务均具备落地开发能力。</p>
+                        <p data-i18n="about.desc1">我们主要提供虚拟现实与混合现实应用开发技术服务、技术服务、技术人员等服务均具备落地开发能力。</p>
-                        <p>成立时间：2023年</p>
+                        <p data-i18n="about.desc2">成立时间：2023年</p>
-                        已为数十家上市企业提供技术服务，培训虚拟现实开发者上万名。
+                        <span data-i18n="about.desc3">已为数十家上市企业提供技术服务，培训虚拟现实开发者上万名。</span>
                     </h4>
                     <div class="about-stats">
                         <div class="stat">
-                            <div class="stat-number">100+</div>
+                            <div class="stat-number" data-i18n="about.stat1.number">100+</div>
-                            <div class="stat-text">成功项目</div>
+                            <div class="stat-text" data-i18n="about.stat1.text">成功项目</div>
                         </div>
                         <div class="stat">
-                            <div class="stat-number">98%</div>
+                            <div class="stat-number" data-i18n="about.stat2.number">98%</div>
-                            <div class="stat-text">客户满意度</div>
+                            <div class="stat-text" data-i18n="about.stat2.text">客户满意度</div>
                         </div>
                         <div class="stat">
-                            <div class="stat-number">50+</div>
+                            <div class="stat-number" data-i18n="about.stat3.number">50+</div>
-                            <div class="stat-text">专业团队</div>
+                            <div class="stat-text" data-i18n="about.stat3.text">专业团队</div>
                         </div>
                         <div class="stat">
-                            <div class="stat-number">20+</div>
+                            <div class="stat-number" data-i18n="about.stat4.number">20+</div>
-                            <div class="stat-text">行业经验</div>
+                            <div class="stat-text" data-i18n="about.stat4.text">行业经验</div>
                         </div>
                     </div>
                 </div>
@@ -167,7 +174,7 @@
     <section class="section contact" id="contact">
         <div class="container">
             <div class="section-title">
-                <h2>联系我们</h2>
+                <h2 data-i18n="contact.title">联系我们</h2>
             </div>
             <div class="contact-grid">
                 <div class="contact-info">
@@ -176,8 +183,8 @@
                             <i class="fas fa-map-marker-alt"></i>
                         </div>
                         <div>
-                            <h3>地址</h3>
+                            <h3 data-i18n="contact.address.title">地址</h3>
-                            <p>广东省广州市黄浦区科学城产业总部港A2栋1008</p>
+                            <p data-i18n="contact.address.content">广东省广州市黄浦区科学城产业总部港A2栋1008</p>
                         </div>
                     </div>
                     <div class="contact-item">
@@ -185,8 +192,8 @@
                             <i class="fas fa-phone"></i>
                         </div>
                         <div>
-                            <h3>电话</h3>
+                            <h3 data-i18n="contact.phone.title">电话</h3>
-                            <p>13368952691</p>
+                            <p data-i18n="contact.phone.content">13368952691</p>
                         </div>
                     </div>
                     <div class="contact-item">
@@ -194,8 +201,8 @@
                             <i class="fas fa-globe"></i>
                         </div>
                         <div>
-                            <h3>邮件</h3>
+                            <h3 data-i18n="contact.email.title">邮件</h3>
-                            <p>w858626244@gmail.com</p>
+                            <p data-i18n="contact.email.content">w858626244@gmail.com</p>
                         </div>
                     </div>
                 </div>
@@ -210,8 +217,8 @@
         <div class="container">
             <div class="footer-content">
                 <div class="footer-column">
-                    <h3>虚境网络科技有限公司</h3>
+                    <h3 data-i18n="footer.companyName">虚境网络科技有限公司</h3>
-                    <p>我们专注于虚拟现实与混合现实应用开发，为客户提供高质量的技术解决方案。</p>
+                    <p data-i18n="footer.desc">我们专注于虚拟现实与混合现实应用开发，为客户提供高质量的技术解决方案。</p>
                     <div class="social-links">
                         <a href="#"><i class="fab fa-weixin"></i></a>
                         <a href="#"><i class="fab fa-discord"></i></a>
@@ -220,16 +227,16 @@
                     </div>
                 </div>
                 <div class="footer-column">
-                    <h3>联系信息</h3>
+                    <h3 data-i18n="footer.contactInfo">联系信息</h3>
                     <div class="footer-links">
-                        <a href="#"><i class="fas fa-map-marker-alt"></i> 广东省广州市黄浦区科学城产业总部港A2栋1008</a>
+                        <a href="#"><i class="fas fa-map-marker-alt"></i> <span data-i18n="contact.address.content">广东省广州市黄浦区科学城产业总部港A2栋1008</span></a>
-                        <a href="#"><i class="fas fa-phone"></i>13368952691</a>
+                        <a href="#"><i class="fas fa-phone"></i><span data-i18n="contact.phone.content">13368952691</span></a>
-                        <a href="#"><i class="fas fa-envelope"></i>w858626244@gmail.com</a>
+                        <a href="#"><i class="fas fa-envelope"></i><span data-i18n="contact.email.content">w858626244@gmail.com</span></a>
                     </div>
                 </div>
             </div>
             <div class="copyright">
-                <p>&copy; Copyright 广州市虚境起源科技有限公司</p>
+                <p>&copy; <span data-i18n="footer.copyright">Copyright 广州市虚境起源科技有限公司</span></p>
             </div>
         </div>
     </footer>

js/main.js

@@ -1,10 +1,54 @@
+// Language switching functionality
+let currentLang = localStorage.getItem('language') || 'cn';
+let langData = {};
+
+async function loadLanguage(lang) {
+    try {
+        const res = await fetch(`config/lang-${lang}.json`);
+        langData = await res.json();
+        updatePageLanguage();
+        localStorage.setItem('language', lang);
+        currentLang = lang;
+
+        // Update active state for language options
+        document.querySelectorAll('.lang-option').forEach(option => {
+            if (option.getAttribute('data-lang') === lang) {
+                option.classList.add('active');
+            } else {
+                option.classList.remove('active');
+            }
+        });
+
+        // Reload services and cases with new language
+        loadServices();
+        loadCases();
+    } catch (err) {
+        console.error("加载语言文件失败:", err);
+    }
+}
+
+function updatePageLanguage() {
+    // Update all elements with data-i18n attribute
+    document.querySelectorAll('[data-i18n]').forEach(element => {
+        const key = element.getAttribute('data-i18n');
+        const translation = getNestedTranslation(langData, key);
+        if (translation) {
+            element.textContent = translation;
+        }
+    });
+}
+
+function getNestedTranslation(obj, path) {
+    return path.split('.').reduce((current, key) => current?.[key], obj);
+}
 
 async function loadServices() {
     try {
-        const res = await fetch("config/card.json");
+        const res = await fetch(`config/card-${currentLang}.json`);
         const cards = await res.json();
 
         const grid = document.getElementById("servicesGrid");
+        grid.innerHTML = ''; // Clear existing content
 
         cards.forEach(item => {
             const card = document.createElement("div");
@@ -85,6 +129,23 @@ document.addEventListener("DOMContentLoaded", () => {
     loadCases();
     loadServices();
     loadPartners();
+
+    // Load initial language
+    loadLanguage(currentLang);
+
+    // Language toggle button event - handle clicks on language options
+    const langBtn = document.getElementById('langToggle');
+    if (langBtn) {
+        langBtn.addEventListener('click', (e) => {
+            const target = e.target;
+            if (target.classList.contains('lang-option')) {
+                const selectedLang = target.getAttribute('data-lang');
+                if (selectedLang !== currentLang) {
+                    loadLanguage(selectedLang);
+                }
+            }
+        });
+    }
 });
 
 
@@ -92,17 +153,18 @@ document.addEventListener("DOMContentLoaded", () => {
 
 async function loadCases() {
     try {
-        // 读取 config/video.json
+        // 读取 config/video-{lang}.json
-        const res = await fetch("config/video.json");
+        const res = await fetch(`config/video-${currentLang}.json`);
         const cases = await res.json();
 
         const grid = document.getElementById("casesGrid");
+        grid.innerHTML = ''; // Clear existing content
 
         cases.forEach(item => {
             const card = document.createElement("div");
             card.className = "case-card";
             card.setAttribute("data-video", item.src);
-            const previewPath = "img/preview/" + item.title + ".png";
+            const previewPath = "img/preview/" + item.preview + ".png";
             // 用 preview 图片当封面
             card.innerHTML = `
                 <img src="${previewPath}" alt="${item.title}" class="case-preview">