Pro

2026-06-03 10:27:17 +08:00
parent 6a26e2209e
commit c66fa890dd
114 changed files with 2032 additions and 1054 deletions
@@ -22,7 +22,7 @@
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
        background: var(--bg);
        color: var(--text);
-        width: 100vw;
+        width: 100%;
        overflow-x: hidden;
        line-height: 1.6;
      }
@@ -508,14 +508,14 @@
    <nav class="navbar" style="opacity:0">
      <div class="navbar-inner">
        <a href="../index.html" class="navbar-logo">
-          <img src="../images/logo.png" alt="Chookoo" />
+          <img src="../images/白字logo.png" alt="Chookoo" />
        </a>
        <div class="navbar-menu">
-          <a href="../index.html" class="navbar-link">首页</a>
-          <a href="products.html" class="navbar-link">产品</a>
-          <a href="stories.html" class="navbar-link">故事</a>
-          <a href="app.html" class="navbar-link">App</a>
-          <a href="company.html?article=201" class="navbar-link active">关于我们</a>
+          <a href="../index.html" class="navbar-link"><span data-i18n="nav_home">首页</span></a>
+          <a href="products.html" class="navbar-link"><span data-i18n="nav_products">产品</span></a>
+          <a href="stories.html" class="navbar-link"><span data-i18n="nav_stories">故事</span></a>
+          <a href="app.html" class="navbar-link"><span data-i18n="nav_app">App</span></a>
+          <a href="company.html?article=201" class="navbar-link active"><span data-i18n="nav_about">关于我们</span></a>
        </div>
        <div class="navbar-actions">
          <a href="help.html" class="navbar-btn" aria-label="Search">
@@ -527,9 +527,8 @@
          <select id="langSelect" aria-label="Language" class="lang-select-hero">
            <option value="zh">中文</option>
            <option value="en">EN</option>
-            <option value="ja">日本語</option>
          </select>
-          <a href="../index.html#contact" class="navbar-cta">联系我们</a>
+          <a href="../index.html#contact" class="navbar-cta"><span data-i18n="nav_contact">联系我们</span></a>
          <button class="navbar-btn mobile-menu-btn" aria-label="Menu">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h16"></path></svg>
          </button>
@@ -549,22 +548,19 @@
        <div class="articles-list-view" id="articlesListView">
          <!-- 搜索区域 -->
          <section class="search-section">
-            <h1 class="search-title">公司介绍</h1>
-            <p class="search-subtitle">搜索您想了解的问题，或浏览下方分类</p>
+            <h1 class="search-title" data-i18n="page_title">公司介绍</h1>
+            <p class="search-subtitle" data-i18n="search_subtitle">搜索您想了解的问题，或浏览下方分类</p>
            <div class="search-box">
              <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
-              <input type="text" class="search-input" id="searchInput" placeholder="搜索问题..." />
+              <input type="text" class="search-input" id="searchInput" placeholder="搜索问题..." data-i18n-placeholder="search_placeholder" />
              <div class="search-results" id="searchResults"></div>
            </div>
          </section>

          <!-- 分类标签 -->
          <div class="category-tabs" id="categoryTabs">
-            <div class="category-tab active" data-category="all">全部</div>
-            <div class="category-tab" data-category="about">关于我们</div>
-            <div class="category-tab" data-category="careers">加入我们</div>
-            <div class="category-tab" data-category="news">新闻动态</div>
-            <div class="category-tab" data-category="brand">品牌故事</div>
+            <div class="category-tab active" data-category="all"><span data-i18n="cat_all">全部</span></div>
+            <div class="category-tab" data-category="about"><span data-i18n="cat_about">关于我们</span></div>
          </div>

          <!-- 文章分类列表 -->
@@ -575,7 +571,7 @@
        <div class="article-detail" id="articleDetail">
          <button class="back-btn" id="backToList">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
-            返回列表
+            <span data-i18n="back_to_list">返回列表</span>
          </button>
          <div id="articleContent"></div>
        </div>
@@ -584,8 +580,8 @@

    <!-- 页脚 -->
    <footer class="footer">
-      <img src="../images/logo.png" alt="Chookoo" class="footer-logo" />
-      <p class="footer-text">© 2025 宠科智能科技（苏州）有限公司 保留所有权利</p>
+      <img src="../images/白字logo.png" alt="Chookoo" class="footer-logo" />
+      <p class="footer-text">© 2025 宠小科智能科技（苏州）有限公司 保留所有权利</p>
    </footer>

    <script>
@@ -642,28 +638,24 @@
        window.addEventListener('resize', scale);
        window.addEventListener('load', fixLayout);
        setTimeout(fixLayout, 2000);
+        new MutationObserver(() => requestAnimationFrame(fixLayout)).observe(content, { childList: true, subtree: true, attributes: true });
+        document.querySelectorAll('img').forEach(img => { if (!img.complete) img.addEventListener('load', fixLayout); });
      })();
    </script>
    <script>
      // 页面类型
      const PAGE_TYPE = 'company';

-      // 分类配置
+      // 分类配置（加入我们、新闻动态、品牌故事待正式内容后恢复）
      const categories = {
-        all: { name: '全部', icon: '📋' },
-        about: { name: '关于我们', icon: '🏠' },
-        careers: { name: '加入我们', icon: '💼' },
-        news: { name: '新闻动态', icon: '📰' },
-        brand: { name: '品牌故事', icon: '📖' }
+        all: { name: '全部', nameEn: 'All', icon: '📋' },
+        about: { name: '关于我们', nameEn: 'About Us', icon: '🏠' }
      };

      // 默认文章数据（公司介绍）
      const defaultArticles = [
-        { id: 201, pageType: 'company', category: 'about', categoryName: '关于我们', title: '关于Chookoo宠科', content: '<h2>关于Chookoo宠科</h2><p>宠小科智能科技 (CHOOKOO) 成立于中国苏州，是一家专注于构建预防式主动健康生态的科技企业。我们深度融合人工智能、物联网与多模态生物传感技术，依托苏州长三角地区世界级的精密制造与跨学科研发能力，聚焦宠物与长者两大生命关爱场景，致力于让健康管理从"被动应对"走向"主动预见"。</p><p>通过智能设备 (如 AkiWell™智能健康猫厕所) 无感采集生命体征与行为数据，结合自研 AkiWell™主动健康预警算法，将日常细微变化转化为精准的健康洞察与温情提醒。我们的技术已实现对宠物泌尿系统疾病的提前48-72小时预警，并与高校共建联合实验室，持续提升医学级数据的严谨性。</p><p>宠小科以"宠爱生命，科技赋能"为使命，构建硬件入口+AI分析+数据服务+生态互联的闭环平台，让每一份关爱都有据可依，让每一个生命都能被真正理解与守护。我们期待与您携手，共同迈向更安心、更具预见性的健康生活。</p>', views: 1234, date: '2025-01-15' },
-        { id: 202, pageType: 'company', category: 'about', categoryName: '关于我们', title: '我们的使命', content: '<h2>我们的使命</h2><p><strong>愿景：</strong>成为全球宠物家庭最信赖的智能健康伙伴，定义主动健康管理新范式</p><p><strong>使命：</strong>让健康可见，让需求可解，让宠爱无间</p><p><strong>价值观：</strong>始于生命关怀，成于科技向善，归于商业远见</p>', views: 876, date: '2025-01-14' },
-        { id: 203, pageType: 'company', category: 'careers', categoryName: '加入我们', title: '热招职位', content: '<h2>热招职位</h2><ul><li>产品经理</li><li>嵌入式工程师</li><li>UI设计师</li><li>运营专员</li></ul><p>简历请投递至：hr@chookoo.com</p>', views: 567, date: '2025-01-13' },
-        { id: 204, pageType: 'company', category: 'news', categoryName: '新闻动态', title: 'Chookoo获得A轮融资', content: '<h2>融资新闻</h2><p>Chookoo宠科智能科技宣布完成数千万元A轮融资，将用于产品研发和市场拓展。</p>', views: 2345, date: '2025-01-12' },
-        { id: 205, pageType: 'company', category: 'brand', categoryName: '品牌故事', title: '品牌起源', content: '<h2>品牌故事</h2><p>Chookoo创立于2020年，源于创始人对自己宠物的一份热爱。我们相信，科技可以让养宠变得更简单。</p>', views: 789, date: '2025-01-11' }
+        { id: 201, pageType: 'company', category: 'about', categoryName: '关于我们', title: '关于Chookoo宠小科', en: { title: 'About Chookoo Petcare', categoryName: 'About Us', content: '<h2>About Chookoo Petcare</h2><p>Chookoo Petcare (CHOOKOO) was founded in Suzhou, China, as a technology enterprise focused on building a proactive health ecosystem. We deeply integrate artificial intelligence, IoT, and multimodal biosensing technologies, leveraging the world-class precision manufacturing and interdisciplinary R&D capabilities of the Yangtze River Delta region. We focus on pet and elder care scenarios, dedicated to transforming health management from "passive response" to "proactive prevention."</p><p>Through smart devices (such as the AkiWell Smart Health Cat Toilet), we seamlessly collect vital signs and behavioral data. Combined with our proprietary AkiWell proactive health alert algorithm, we transform subtle daily changes into precise health insights and caring reminders. Our technology achieves 48-72 hour early warnings for pet urinary system conditions, and we co-build joint laboratories with universities to continuously enhance the rigor of medical-grade data.</p><p>Chookoo\'s mission is "cherishing life through technology empowerment," building a closed-loop platform of hardware entry + AI analysis + data services + ecosystem interconnection, so that every act of care is evidence-based, and every life is truly understood and protected.</p>' }, content: '<h2>关于Chookoo宠小科</h2><p>宠小科智能科技 (CHOOKOO) 成立于中国苏州，是一家专注于构建预防式主动健康生态的科技企业。我们深度融合人工智能、物联网与多模态生物传感技术，依托苏州长三角地区世界级的精密制造与跨学科研发能力，聚焦宠物与长者两大生命关爱场景，致力于让健康管理从"被动应对"走向"主动预见"。</p><p>通过智能设备 (如 AkiWell™智能健康猫厕所) 无感采集生命体征与行为数据，结合自研 AkiWell™主动健康预警算法，将日常细微变化转化为精准的健康洞察与温情提醒。我们的技术已实现对宠物泌尿系统疾病的提前48-72小时预警，并与高校共建联合实验室，持续提升医学级数据的严谨性。</p><p>宠小科以"宠爱生命，科技赋能"为使命，构建硬件入口+AI分析+数据服务+生态互联的闭环平台，让每一份关爱都有据可依，让每一个生命都能被真正理解与守护。我们期待与您携手，共同迈向更安心、更具预见性的健康生活。</p>', views: 1234, date: '2025-01-15' },
+        { id: 202, pageType: 'company', category: 'about', categoryName: '关于我们', title: '我们的使命', en: { title: 'Our Mission', categoryName: 'About Us', content: '<h2>Our Mission</h2><p><strong>Vision:</strong> To become the world\'s most trusted smart health partner for pet families, defining a new paradigm of proactive health management.</p><p><strong>Mission:</strong> Make health visible, make needs solvable, and make care seamless.</p><p><strong>Values:</strong> Tech for good, care-first approach, extreme innovation, and lasting companionship.</p>' }, content: '<h2>我们的使命</h2><p><strong>愿景：</strong>成为全球宠物家庭最信赖的智能健康伙伴，定义主动健康管理新范式</p><p><strong>使命：</strong>让健康可见，让需求可解，让宠爱无间</p><p><strong>价值观：</strong>始于生命关怀，成于科技向善，归于商业远见</p>', views: 876, date: '2025-01-14' }
      ];

      // 文章数据
@@ -673,6 +665,11 @@
      let currentCategory = 'all';
      let collapsedSections = {};

+      // Get current language
+      function getLang() {
+        return document.getElementById('langSelect')?.value || ((navigator.language||'').toLowerCase().startsWith('zh') ? 'zh' : 'en');
+      }
+
      // 初始化
      document.addEventListener('DOMContentLoaded', function() {
        // 清除旧缓存，确保使用代码中的最新文章数据
@@ -708,10 +705,11 @@

      // 渲染文章列表
      function renderArticles() {
+        const lang = getLang();
        const container = document.getElementById('articlesContainer');
        let html = '';

-        const categoryOrder = ['about', 'careers', 'news', 'brand'];
+        const categoryOrder = ['about'];

        categoryOrder.forEach(cat => {
          if (currentCategory !== 'all' && currentCategory !== cat) return;
@@ -721,23 +719,27 @@

          const isCollapsed = collapsedSections[cat];
          const catInfo = categories[cat];
+          const catName = lang === 'en' && catInfo.nameEn ? catInfo.nameEn : catInfo.name;
+          const articlesLabel = lang === 'en' ? ' articles' : ' 篇文章';

          html += `
            <section class="articles-section" data-category="${cat}">
              <div class="section-header ${isCollapsed ? 'collapsed' : ''}" onclick="toggleSection('${cat}')">
                <div class="section-icon ${cat}">${catInfo.icon}</div>
-                <h2 class="section-title">${catInfo.name}</h2>
-                <span class="section-count">${catArticles.length} 篇文章</span>
+                <h2 class="section-title">${catName}</h2>
+                <span class="section-count">${catArticles.length}${articlesLabel}</span>
                <svg class="section-toggle" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
              </div>
              <div class="article-list ${isCollapsed ? 'hidden' : ''}">
-                ${catArticles.map(article => `
+                ${catArticles.map(article => {
+                  const aTitle = (lang === 'en' && article.en) ? article.en.title : article.title;
+                  return `
                  <div class="article-item" onclick="showArticle(${article.id})">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
-                    <span class="article-title">${article.title}</span>
+                    <span class="article-title">${aTitle}</span>
                    <svg class="article-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
                  </div>
-                `).join('')}
+                `}).join('')}
              </div>
            </section>
          `;
@@ -754,23 +756,31 @@

      // 显示文章详情
      function showArticle(id) {
+        const lang = getLang();
        const article = articles.find(a => a.id === id);
        if (!article) return;

+        const aTitle = (lang === 'en' && article.en) ? article.en.title : article.title;
+        const aCatName = (lang === 'en' && article.en) ? (article.en.categoryName || article.categoryName) : article.categoryName;
+        const aContent = (lang === 'en' && article.en && article.en.content) ? article.en.content : article.content;
+        const pageTitle = lang === 'en' ? 'Company Introduction' : '公司介绍';
+        const viewsLabel = lang === 'en' ? ' views' : ' 次阅读';
+        const relatedLabel = lang === 'en' ? 'Related Articles' : '相关文章';
+
        const content = document.getElementById('articleContent');
        content.innerHTML = `
          <div class="article-breadcrumb">
-            <a href="#" onclick="backToList(); return false;">公司介绍</a>
+            <a href="#" onclick="backToList(); return false;">${pageTitle}</a>
            <span>/</span>
-            <span>${article.categoryName}</span>
+            <span>${aCatName}</span>
          </div>
          <div class="article-detail-inner">
-            <h1 class="article-title">${article.title}</h1>
+            <h1 class="article-title">${aTitle}</h1>
            <div class="article-meta">
              <span class="article-date">${article.date}</span>
-              <span class="article-views">${article.views} 次阅读</span>
+              <span class="article-views">${article.views}${viewsLabel}</span>
            </div>
-            <div class="article-body">${article.content}</div>
+            <div class="article-body">${aContent}</div>
            ${renderRelatedArticles(id, article.category)}
          </div>
        `;
@@ -904,5 +914,45 @@
        document.addEventListener('keydown',function(e){if(e.key==='Escape'&&shopModal&&shopModal.style.visibility==='visible'){shopModal.style.opacity='0';shopModal.style.visibility='hidden';shopModal.querySelector('div').style.transform='scale(0.9) translateY(20px)';document.body.style.overflow='';}});
      })();
    </script>
+  <script>
+(() => {
+  const t = {
+    zh: {
+      nav_home: "棣栭〉", nav_products: "浜у搧", nav_stories: "鏁呬簨",
+      nav_app: "App", nav_about: "鍏充簬鎴戜滑", nav_contact: "鑱旂郴鎴戜滑",
+      footer_desc: "AIoT 涓诲姩寮忓疇鐗╁仴搴风鐞嗗紑鍒涜€咃紝璁╁仴搴峰彲瑙併€侀渶姹傚彲瑙ｃ€佸疇鐖辨棤闂淬€?,
+      footer_products: "浜у搧", footer_support: "鏀寔", footer_contact: "鑱旂郴鎴戜滑",
+      footer_cat: "鏅鸿兘鐚帟鎵€", footer_feeder: "鏅鸿兘鍠傞鍣?,
+      footer_fountain: "鏅鸿兘楗按鏈?, footer_camera: "AI 鎽勫儚澶?,
+      footer_help: "甯姪涓績", footer_faq: "甯歌闂",
+      footer_warranty: "淇濅慨鏀跨瓥", footer_returns: "閫€鎹㈣揣",
+      footer_privacy: "闅愮鏀跨瓥", footer_terms: "鏈嶅姟鏉℃",
+      footer_copyright: "漏 2025 Chookoo. All rights reserved."
+    },
+    en: {
+      nav_home: "Home", nav_products: "Products", nav_stories: "Stories",
+      nav_app: "App", nav_about: "About Us", nav_contact: "Contact Us",
+      footer_desc: "AIoT Pioneer in Proactive Pet Health Management 鈥?making health visible, needs understood, and care seamless.",
+      footer_products: "Products", footer_support: "Support", footer_contact: "Contact Us",
+      footer_cat: "Smart Cat Litter", footer_feeder: "Smart Feeder",
+      footer_fountain: "Smart Fountain", footer_camera: "AI Camera",
+      footer_help: "Help Center", footer_faq: "FAQ",
+      footer_warranty: "Warranty", footer_returns: "Returns",
+      footer_privacy: "Privacy Policy", footer_terms: "Terms of Service",
+      footer_copyright: "漏 2025 Chookoo. All rights reserved."
+    }
+  };
+  const els = document.querySelectorAll("[data-i18n]");
+  const s = document.getElementById("langSelect");
+  const apply = (l) => {
+    const d = t[l] || t.zh;
+    els.forEach(el => { const k = el.dataset.i18n; if (d[k]) el.textContent = d[k]; });
+    if (s) s.value = l;
+  };
+  const lang = (navigator.language||"").toLowerCase().startsWith("zh") ? "zh" : "en";
+  apply(lang);
+  if (s) s.addEventListener("change", e => apply(e.target.value));
+})();
+</script>
  </body>
 </html>