{"id":1627,"date":"2025-07-29T15:04:14","date_gmt":"2025-07-29T07:04:14","guid":{"rendered":"https:\/\/www.affectivechain.com\/?page_id=1627"},"modified":"2025-07-29T15:26:37","modified_gmt":"2025-07-29T07:26:37","slug":"xin","status":"publish","type":"page","link":"https:\/\/www.affectivechain.com\/index.php\/xin\/","title":{"rendered":"Xin"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.8\/dist\/chart.umd.min.js\"><\/script>\n  \n  <!-- Tailwind\u914d\u7f6e -->\n  <script>\n    tailwind.config = {\n      theme: {\n        extend: {\n          colors: {\n            primary: '#FF7A9C',\n            secondary: '#FFE6EC',\n            accent: '#FF5C8A',\n            neutral: '#333333',\n            light: '#F9F9F9'\n          },\n          fontFamily: {\n            sans: ['Inter', 'system-ui', 'sans-serif'],\n          },\n        },\n      }\n    }\n  <\/script>\n  \n  <style type=\"text\/tailwindcss\">\n    @layer utilities {\n      .content-auto {\n        content-visibility: auto;\n      }\n      .text-shadow {\n        text-shadow: 0 2px 4px rgba(0,0,0,0.1);\n      }\n      .gradient-overlay {\n        background: linear-gradient(135deg, rgba(255,122,156,0.9) 0%, rgba(255,92,138,0.9) 100%);\n      }\n      .card-hover {\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n      }\n      .card-hover:hover {\n        transform: translateY(-5px);\n        box-shadow: 0 15px 30px rgba(255,122,156,0.15);\n      }\n      .nav-link {\n        @apply text-gray-600 hover:text-primary transition-colors duration-200;\n      }\n      .btn-primary {\n        @apply bg-primary text-white px-5 py-2 rounded-full text-sm font-medium hover:bg-accent transition-all duration-200;\n      }\n      .btn-secondary {\n        @apply bg-white text-primary px-5 py-2 rounded-full text-sm font-medium hover:shadow-md transition-all duration-200;\n      }\n    }\n  <\/style>\n  \n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&#038;display=swap\" rel=\"stylesheet\">\n<\/head>\n<body class=\"bg-light font-sans text-neutral\">\n  <!-- \u9876\u90e8\u5bfc\u822a -->\n  <nav class=\"fixed top-0 left-0 right-0 bg-white\/90 backdrop-blur-sm shadow-sm z-50 transition-all duration-300\">\n    <div class=\"container mx-auto px-4 py-3 flex justify-between items-center\">\n      <div class=\"flex items-center gap-2\">\n        <img decoding=\"async\" src=\"https:\/\/www.affectivechain.com\/wp-content\/uploads\/2025\/05\/\u957f\u65b9\u5f62-1.jpg\" alt=\"\u5fc3\u8c10LOGO\" class=\"w-8 h-8 object-contain\">\n        <span class=\"font-bold text-primary text-lg\">\u5fc3\u8c10XinSync<\/span>\n      <\/div>\n      \n      <!-- \u684c\u9762\u7aef\u5bfc\u822a -->\n      <div class=\"hidden md:flex items-center gap-8\">\n        <a href=\"#value\" class=\"nav-link\">\u793e\u4f1a\u4ef7\u503c<\/a>\n        <a href=\"#solve\" class=\"nav-link\">\u89e3\u51b3\u95ee\u9898<\/a>\n        <a href=\"#process\" class=\"nav-link\">\u4f7f\u7528\u6d41\u7a0b<\/a>\n        <a href=\"#features\" class=\"nav-link\">\u6838\u5fc3\u529f\u80fd<\/a>\n        <a href=\"https:\/\/www.affectivechain.com\/\" class=\"btn-primary\">\u7acb\u5373\u4f53\u9a8c<\/a>\n      <\/div>\n      \n      <!-- \u79fb\u52a8\u7aef\u83dc\u5355\u6309\u94ae -->\n      <button id=\"menuBtn\" class=\"md:hidden text-neutral p-2 focus:outline-none\">\n        <i class=\"fa fa-bars text-xl\"><\/i>\n      <\/button>\n    <\/div>\n    \n    <!-- \u79fb\u52a8\u7aef\u5bfc\u822a\u83dc\u5355 -->\n    <div id=\"mobileMenu\" class=\"md:hidden hidden bg-white border-t animate-fadeIn\">\n      <div class=\"container mx-auto px-4 py-3 flex flex-col gap-4\">\n        <a href=\"#value\" class=\"nav-link py-2\">\u793e\u4f1a\u4ef7\u503c<\/a>\n        <a href=\"#solve\" class=\"nav-link py-2\">\u89e3\u51b3\u95ee\u9898<\/a>\n        <a href=\"#process\" class=\"nav-link py-2\">\u4f7f\u7528\u6d41\u7a0b<\/a>\n        <a href=\"#features\" class=\"nav-link py-2\">\u6838\u5fc3\u529f\u80fd<\/a>\n        <a href=\"https:\/\/www.affectivechain.com\/\" class=\"btn-primary text-center\">\u7acb\u5373\u4f53\u9a8c<\/a>\n      <\/div>\n    <\/div>\n  <\/nav>\n\n  <!-- \u82f1\u96c4\u533a\u57df -->\n  <section class=\"pt-24 pb-16 md:pt-36 md:pb-28 gradient-overlay text-white\">\n    <div class=\"container mx-auto px-4\">\n      <div class=\"max-w-4xl mx-auto text-center\">\n        <h1 class=\"text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight mb-6 text-shadow\">\n          \u7528\u79d1\u6280\u8bfb\u61c2\u60c5\u611f<br>\u8ba9\u5173\u7cfb\u66f4\u548c\u8c10\n        <\/h1>\n        <p class=\"text-[clamp(1rem,2vw,1.25rem)] opacity-90 mb-10 max-w-2xl mx-auto\">\n          \u5fc3\u8c10XinSync\u2014\u2014\u56fd\u5185\u9996\u4e2a\u60c5\u611f\u5173\u7cfb\u667a\u80fd\u7ba1\u7406\u5e73\u53f0\uff0c\u901a\u8fc7AI\u5206\u6790\u4e0e\u4e13\u4e1a\u5fc3\u7406\u6307\u5bfc\uff0c\n          \u5e2e\u52a9\u5343\u4e07\u5bb6\u5ead\u89e3\u51b3\u60c5\u611f\u6c9f\u901a\u96be\u9898\n        <\/p>\n        <div class=\"flex flex-col sm:flex-row gap-4 justify-center\">\n          <a href=\"https:\/\/www.affectivechain.com\/index.php\/heartsync\/datafamily\/\" class=\"inline-block bg-white text-primary px-8 py-3 rounded-full font-semibold text-lg hover:shadow-lg transition-all duration-200\">\n            \u5f00\u59cb\u4f7f\u7528\n          <\/a>\n          <a href=\"https:\/\/www.affectivechain.com\/index.php\/heart%E6%96%B9%E6%A1%88\/syncapp\/\" class=\"inline-block bg-transparent border-2 border-white text-white px-8 py-3 rounded-full font-semibold text-lg hover:bg-white\/10 transition-all duration-200\">\n            \u4e86\u89e3\u66f4\u591a\n          <\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n    \n    <!-- \u88c5\u9970\u56fe\u5f62 -->\n    <div class=\"absolute bottom-0 left-0 right-0 h-16 bg-light\" style=\"clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 100%)\"><\/div>\n  <\/section>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>XinSync &#8211; APP\u539f\u578b\u5c55\u793a<\/title>\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/font-awesome@4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.8\/dist\/chart.umd.min.js\"><\/script>\n  \n  <!-- Tailwind\u914d\u7f6e -->\n  <script>\n    tailwind.config = {\n      theme: {\n        extend: {\n          colors: {\n            primary: '#FF7A9C',\n            secondary: '#FFE6EC',\n            accent: '#FF5C8A',\n            neutral: '#333333',\n            light: '#F9F9F9'\n          },\n          fontFamily: {\n            sans: ['Inter', 'system-ui', 'sans-serif'],\n          },\n        },\n      }\n    }\n  <\/script>\n  \n  <style type=\"text\/tailwindcss\">\n    @layer utilities {\n      .content-auto {\n        content-visibility: auto;\n      }\n      .phone-frame {\n        width: 320px;\n        height: 650px;\n        border: 12px solid #1a1a1a;\n        border-radius: 48px;\n        position: relative;\n        overflow: hidden;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.2);\n      }\n      .phone-screen {\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n        position: relative;\n        background-color: white;\n      }\n      .phone-notch {\n        position: absolute;\n        top: 0;\n        left: 50%;\n        transform: translateX(-50%);\n        width: 160px;\n        height: 24px;\n        background-color: #1a1a1a;\n        border-bottom-left-radius: 16px;\n        border-bottom-right-radius: 16px;\n        z-index: 10;\n      }\n      .app-page {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        overflow-y: auto;\n        transition: transform 0.3s ease;\n      }\n      .page-hidden {\n        transform: translateX(100%);\n      }\n      .page-active {\n        transform: translateX(0);\n        z-index: 5;\n      }\n      .page-prev {\n        transform: translateX(-100%);\n      }\n      .nav-dot {\n        width: 8px;\n        height: 8px;\n        border-radius: 50%;\n        background-color: #ddd;\n        transition: background-color 0.3s ease;\n      }\n      .nav-dot.active {\n        background-color: #FF7A9C;\n        width: 24px;\n        border-radius: 4px;\n      }\n      .card-hover {\n        transition: transform 0.2s ease;\n      }\n      .card-hover:hover {\n        transform: translateY(-2px);\n      }\n    }\n  <\/style>\n  \n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\n<\/head>\n<body class=\"bg-light font-sans text-neutral min-h-screen\">\n  <div class=\"container mx-auto px-4 py-12\">\n    <div class=\"text-center mb-10\">\n      <h1 class=\"text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-neutral\">XinSync &#8211; APP\u539f\u578b\u5c55\u793a<\/h1>\n      <p class=\"text-gray-600 max-w-2xl mx-auto\">\u70b9\u51fb\u4e0b\u65b9\u6309\u94ae\u6216\u5bfc\u822a\u70b9\u5207\u6362\u4e0d\u540c\u9875\u9762\uff0c\u4f53\u9a8c\u6838\u5fc3\u529f\u80fd<\/p>\n    <\/div>\n    \n    <div class=\"flex flex-col items-center\">\n      <!-- \u624b\u673a\u539f\u578b\u5c55\u793a -->\n      <div class=\"phone-frame mb-8\">\n        <div class=\"phone-notch\"><\/div>\n        <div class=\"phone-screen pt-24 pb-20\">\n          <!-- 1. \u9996\u9875 -->\n          <div id=\"page1\" class=\"app-page page-active\">\n            <!-- \u9876\u90e8\u6b22\u8fce\u533a -->\n            <div class=\"px-6 py-4\">\n              <div class=\"flex justify-between items-center\">\n                <div>\n                  <h2 class=\"text-lg font-medium\">\u55e8\uff0cChris \ud83d\udc4b<\/h2>\n                  <p class=\"text-gray-500 text-sm\">\u4eca\u5929\u611f\u89c9\u600e\u4e48\u6837\uff1f<\/p>\n                <\/div>\n                <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/profile\/60\/60\" alt=\"\u7528\u6237\u5934\u50cf\" class=\"w-10 h-10 rounded-full object-cover border-2 border-primary\">\n              <\/div>\n            <\/div>\n            \n            <!-- \u5feb\u6377\u529f\u80fd -->\n            <div class=\"px-6 mb-6\">\n              <div class=\"grid grid-cols-2 gap-3\">\n                <button class=\"bg-primary text-white py-3 px-4 rounded-xl font-medium text-sm flex items-center justify-center card-hover\" onclick=\"navigateTo(4)\">\n                  <i class=\"fa fa-pencil-square-o mr-2\"><\/i> \u8bb0\u5f55\u5fc3\u60c5\n                <\/button>\n                <button class=\"bg-white border border-gray-200 text-neutral py-3 px-4 rounded-xl font-medium text-sm flex items-center justify-center card-hover\">\n                  <i class=\"fa fa-comments-o mr-2\"><\/i> \u60c5\u611f\u5bf9\u8bdd\n                <\/button>\n              <\/div>\n            <\/div>\n            \n            <!-- \u4eca\u65e5\u63a8\u8350 -->\n            <div class=\"px-6 mb-6\">\n              <div class=\"flex justify-between items-center mb-3\">\n                <h3 class=\"font-semibold\">\u4eca\u65e5\u63a8\u8350<\/h3>\n                <span class=\"text-primary text-xs\">\u67e5\u770b\u66f4\u591a<\/span>\n              <\/div>\n              \n              <div class=\"bg-gradient-to-r from-primary\/10 to-purple-100 rounded-xl p-4 card-hover\">\n                <div class=\"flex items-start gap-3\">\n                  <div class=\"w-12 h-12 rounded-lg bg-white flex items-center justify-center text-primary flex-shrink-0\">\n                    <i class=\"fa fa-heart-o text-xl\"><\/i>\n                  <\/div>\n                  <div>\n                    <h4 class=\"font-medium text-sm mb-1\">5\u5206\u949f\u60c5\u7eea\u51a5\u60f3<\/h4>\n                    <p class=\"text-gray-600 text-xs mb-2\">\u7f13\u89e3\u538b\u529b\uff0c\u627e\u56de\u5185\u5fc3\u5e73\u9759<\/p>\n                    <button class=\"text-xs bg-primary text-white py-1 px-3 rounded-full\">\n                      \u7acb\u5373\u5f00\u59cb\n                    <\/button>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n            \n            <!-- \u529f\u80fd\u6a21\u5757 -->\n            <div class=\"px-6 mb-6\">\n              <h3 class=\"font-semibold mb-3\">\u529f\u80fd\u4e2d\u5fc3<\/h3>\n              \n              <div class=\"grid grid-cols-3 gap-3\">\n                <div class=\"bg-white border border-gray-100 rounded-xl p-3 text-center card-hover\" onclick=\"navigateTo(2)\">\n                  <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n                    <i class=\"fa fa-line-chart\"><\/i>\n                  <\/div>\n                  <p class=\"text-xs\">\u60c5\u611f\u5206\u6790<\/p>\n                <\/div>\n                \n                <div class=\"bg-white border border-gray-100 rounded-xl p-3 text-center card-hover\">\n                  <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n                    <i class=\"fa fa-book\"><\/i>\n                  <\/div>\n                  <p class=\"text-xs\">\u60c5\u611f\u8bfe\u7a0b<\/p>\n                <\/div>\n                \n                <div class=\"bg-white border border-gray-100 rounded-xl p-3 text-center card-hover\">\n                  <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n                    <i class=\"fa fa-users\"><\/i>\n                  <\/div>\n                  <p class=\"text-xs\">\u5173\u7cfb\u6d4b\u8bc4<\/p>\n                <\/div>\n                \n                <div class=\"bg-white border border-gray-100 rounded-xl p-3 text-center card-hover\">\n                  <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n                    <i class=\"fa fa-calendar\"><\/i>\n                  <\/div>\n                  <p class=\"text-xs\">\u5fc3\u60c5\u65e5\u5386<\/p>\n                <\/div>\n                \n                <div class=\"bg-white border border-gray-100 rounded-xl p-3 text-center card-hover\">\n                  <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n                    <i class=\"fa fa-comments\"><\/i>\n                  <\/div>\n                  <p class=\"text-xs\">\u6c9f\u901a\u6280\u5de7<\/p>\n                <\/div>\n                \n                <div class=\"bg-white border border-gray-100 rounded-xl p-3 text-center card-hover\">\n                  <div class=\"w-10 h-10 rounded-full bg-primary\/10 flex items-center justify-center text-primary mx-auto mb-2\">\n                    <i class=\"fa fa-ellipsis-h\"><\/i>\n                  <\/div>\n                  <p class=\"text-xs\">\u66f4\u591a<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n            \n            <!-- \u5e95\u90e8\u5bfc\u822a\u680f -->\n            <div class=\"absolute bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-4 py-2\">\n              <div class=\"flex justify-around\">\n                <div class=\"flex flex-col items-center text-primary\">\n                  <i class=\"fa fa-home text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n                <\/div>\n                <div class=\"flex flex-col items-center text-gray-400\">\n                  <i class=\"fa fa-piggy-bank text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u60c5\u611f\u8d26\u6237<\/span>\n                <\/div>\n                <div class=\"flex flex-col items-center text-gray-400\">\n                  <i class=\"fa fa-compass text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n                <\/div>\n                <div class=\"flex flex-col items-center text-gray-400\">\n                  <i class=\"fa fa-history text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u4ee3\u9645\u4f20\u627f<\/span>\n                <\/div>\n                <div class=\"flex flex-col items-center text-gray-400\" onclick=\"navigateTo(5)\">\n                  <i class=\"fa fa-user-o text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <!-- 2. \u60c5\u611f\u5206\u6790\u9875\u9762 -->\n          <div id=\"page2\" class=\"app-page page-hidden\">\n            <!-- \u9876\u90e8\u6807\u9898\u533a -->\n            <div class=\"px-6 py-4 border-b border-gray-100\">\n              <div class=\"flex items-center justify-between\">\n                <button class=\"text-gray-500\" onclick=\"navigateTo(1)\">\n                  <i class=\"fa fa-arrow-left\"><\/i>\n                <\/button>\n                <h2 class=\"text-lg font-semibold\">\u60c5\u611f\u5206\u6790<\/h2>\n                <div class=\"w-6\"><\/div>\n              <\/div>\n            <\/div>\n            \n            <!-- \u4e0a\u4f20\u533a\u57df -->\n            <div class=\"px-6 py-5\">\n              <div class=\"bg-gray-50 border-2 border-dashed border-gray-300 rounded-xl p-6 text-center mb-6 card-hover\" onclick=\"navigateTo(3)\">\n                <i class=\"fa fa-cloud-upload text-3xl text-gray-400 mb-3\"><\/i>\n                <p class=\"text-gray-600 mb-2\">\u4e0a\u4f20\u6c9f\u901a\u8bb0\u5f55<\/p>\n                <p class=\"text-xs text-gray-500\">\u652f\u6301\u804a\u5929\u8bb0\u5f55\u3001\u901a\u8bdd\u5f55\u97f3\u6216\u624b\u52a8\u8f93\u5165<\/p>\n              <\/div>\n              \n              <h3 class=\"font-semibold mb-3\">\u6700\u8fd1\u5206\u6790<\/h3>\n              \n              <div class=\"space-y-3\">\n                <div class=\"bg-white border border-gray-100 rounded-xl p-3 card-hover\">\n                  <div class=\"flex justify-between items-center\">\n                    <div>\n                      <h4 class=\"font-medium text-sm\">\u4e0e\u4f34\u4fa3\u7684\u5bf9\u8bdd<\/h4>\n                      <p class=\"text-gray-500 text-xs\">\u4eca\u5929 14:30 \u00b7 3\u5206\u949f\u5206\u6790<\/p>\n                    <\/div>\n                    <button class=\"text-primary text-sm\">\u67e5\u770b<\/button>\n                  <\/div>\n                <\/div>\n                \n                <div class=\"bg-white border border-gray-100 rounded-xl p-3 card-hover\">\n                  <div class=\"flex justify-between items-center\">\n                    <div>\n                      <h4 class=\"font-medium text-sm\">\u5bb6\u5ead\u805a\u4f1a\u8c08\u8bdd<\/h4>\n                      <p class=\"text-gray-500 text-xs\">\u6628\u5929 20:15 \u00b7 5\u5206\u949f\u5206\u6790<\/p>\n                    <\/div>\n                    <button class=\"text-primary text-sm\">\u67e5\u770b<\/button>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n            \n            <!-- \u5e95\u90e8\u5bfc\u822a\u680f -->\n            <div class=\"absolute bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-4 py-2\">\n              <div class=\"flex justify-around\">\n                <div class=\"flex flex-col items-center text-gray-400\" onclick=\"navigateTo(1)\">\n                  <i class=\"fa fa-home text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n                <\/div>\n                <div class=\"flex flex-col items-center text-gray-400\">\n                  <i class=\"fa fa-piggy-bank text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u60c5\u611f\u8d26\u6237<\/span>\n                <\/div>\n                <div class=\"flex flex-col items-center text-gray-400\">\n                  <i class=\"fa fa-compass text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n                <\/div>\n                <div class=\"flex flex-col items-center text-gray-400\">\n                  <i class=\"fa fa-history text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u4ee3\u9645\u4f20\u627f<\/span>\n                <\/div>\n                <div class=\"flex flex-col items-center text-gray-400\" onclick=\"navigateTo(5)\">\n                  <i class=\"fa fa-user-o text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <!-- 3. \u60c5\u611f\u70ed\u529b\u56fe\u548c\u9884\u8b66\u96f7\u8fbe\u9875\u9762 -->\n          <div id=\"page3\" class=\"app-page page-hidden\">\n            <!-- \u9876\u90e8\u6807\u9898\u533a -->\n            <div class=\"px-6 py-4 border-b border-gray-100\">\n              <div class=\"flex items-center justify-between\">\n                <button class=\"text-gray-500\" onclick=\"navigateTo(2)\">\n                  <i class=\"fa fa-arrow-left\"><\/i>\n                <\/button>\n                <h2 class=\"text-lg font-semibold\">\u5206\u6790\u7ed3\u679c<\/h2>\n                <button class=\"text-gray-500\">\n                  <i class=\"fa fa-share-alt\"><\/i>\n                <\/button>\n              <\/div>\n            <\/div>\n            \n            <!-- \u5206\u6790\u6982\u89c8 -->\n            <div class=\"px-6 py-4\">\n              <div class=\"flex justify-between items-center mb-4\">\n                <div>\n                  <h3 class=\"font-medium\">\u4e0e\u4f34\u4fa3\u7684\u5bf9\u8bdd\u5206\u6790<\/h3>\n                  <p class=\"text-gray-500 text-xs\">\u4eca\u5929 14:30 \u00b7 \u517128\u5206\u949f<\/p>\n                <\/div>\n                <div class=\"bg-green-100 text-green-600 text-xs py-1 px-3 rounded-full\">\n                  \u6574\u4f53\u548c\u8c10\n                <\/div>\n              <\/div>\n              \n              <!-- \u60c5\u611f\u70ed\u529b\u56fe -->\n              <div class=\"bg-white border border-gray-100 rounded-xl p-4 mb-6\">\n                <h4 class=\"font-medium text-sm mb-3\">\u60c5\u611f\u70ed\u529b\u56fe<\/h4>\n                <div class=\"h-40\">\n                  <canvas id=\"heatmapChart\"><\/canvas>\n                <\/div>\n                <p class=\"text-xs text-gray-500 mt-2\">\n                  \u7ea2\u8272\u533a\u57df\u8868\u793a\u60c5\u7eea\u6fc0\u52a8\u70b9\uff0c\u84dd\u8272\u8868\u793a\u60c5\u611f\u5e73\u6de1\u533a\n                <\/p>\n              <\/div>\n              \n              <!-- \u9884\u8b66\u96f7\u8fbe\u56fe -->\n              <div class=\"bg-white border border-gray-100 rounded-xl p-4 mb-6\">\n                <h4 class=\"font-medium text-sm mb-3\">\u60c5\u611f\u98ce\u9669\u96f7\u8fbe<\/h4>\n                <div class=\"h-48\">\n                  <canvas id=\"radarChart\"><\/canvas>\n                <\/div>\n                <p class=\"text-xs text-gray-500 mt-2\">\n                  \u4f4e\u4e8e60\u5206\u7684\u7ef4\u5ea6\u9700\u8981\u5173\u6ce8\u548c\u6539\u5584\n                <\/p>\n              <\/div>\n              \n              <!-- \u6539\u5584\u5efa\u8bae -->\n              <button class=\"w-full bg-primary text-white py-3 rounded-xl text-sm font-medium card-hover\">\n                \u83b7\u53d6\u4e2a\u6027\u5316\u6539\u5584\u5efa\u8bae\n              <\/button>\n            <\/div>\n            \n            <!-- \u5e95\u90e8\u5bfc\u822a\u680f -->\n            <div class=\"absolute bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-4 py-2\">\n              <div class=\"flex justify-around\">\n                <div class=\"flex flex-col items-center text-gray-400\" onclick=\"navigateTo(1)\">\n                  <i class=\"fa fa-home text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n                <\/div>\n                <div class=\"flex flex-col items-center text-gray-400\">\n                  <i class=\"fa fa-piggy-bank text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u60c5\u611f\u8d26\u6237<\/span>\n                <\/div>\n                <div class=\"flex flex-col items-center text-gray-400\">\n                  <i class=\"fa fa-compass text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n                <\/div>\n                <div class=\"flex flex-col items-center text-gray-400\">\n                  <i class=\"fa fa-history text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u4ee3\u9645\u4f20\u627f<\/span>\n                <\/div>\n                <div class=\"flex flex-col items-center text-gray-400\" onclick=\"navigateTo(5)\">\n                  <i class=\"fa fa-user-o text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <!-- 4. \u8bb0\u5f55\u5fc3\u60c5\u9875\u9762 -->\n          <div id=\"page4\" class=\"app-page page-hidden\">\n            <!-- \u9876\u90e8\u6807\u9898\u533a -->\n            <div class=\"px-6 py-4 border-b border-gray-100\">\n              <div class=\"flex items-center justify-between\">\n                <button class=\"text-gray-500\" onclick=\"navigateTo(1)\">\n                  <i class=\"fa fa-arrow-left\"><\/i>\n                <\/button>\n                <h2 class=\"text-lg font-semibold\">\u8bb0\u5f55\u5fc3\u60c5<\/h2>\n                <div class=\"w-6\"><\/div>\n              <\/div>\n            <\/div>\n            \n            <!-- \u5fc3\u60c5\u9009\u62e9 -->\n            <div class=\"px-6 py-5\">\n              <h3 class=\"font-semibold mb-4\">\u4eca\u5929\u611f\u89c9\u600e\u4e48\u6837\uff1f<\/h3>\n              \n              <div class=\"grid grid-cols-5 gap-2 mb-8\">\n                <div class=\"flex flex-col items-center p-3 bg-green-50 rounded-xl card-hover\">\n                  <div class=\"w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 mb-2\">\n                    \ud83d\ude0a\n                  <\/div>\n                  <span class=\"text-xs\">\u7f8e\u597d<\/span>\n                <\/div>\n                \n                <div class=\"flex flex-col items-center p-3 bg-green-50\/50 rounded-xl card-hover\">\n                  <div class=\"w-12 h-12 rounded-full bg-green-100\/50 flex items-center justify-center text-green-600 mb-2\">\n                    \ud83d\ude42\n                  <\/div>\n                  <span class=\"text-xs\">\u597d<\/span>\n                <\/div>\n                \n                <div class=\"flex flex-col items-center p-3 bg-gray-50 rounded-xl card-hover\">\n                  <div class=\"w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 mb-2\">\n                    \ud83d\ude10\n                  <\/div>\n                  <span class=\"text-xs\">\u4e00\u822c<\/span>\n                <\/div>\n                \n                <div class=\"flex flex-col items-center p-3 bg-red-50\/50 rounded-xl card-hover\">\n                  <div class=\"w-12 h-12 rounded-full bg-red-100\/50 flex items-center justify-center text-red-600 mb-2\">\n                    \ud83d\ude41\n                  <\/div>\n                  <span class=\"text-xs\">\u4e0d\u597d<\/span>\n                <\/div>\n                \n                <div class=\"flex flex-col items-center p-3 bg-red-50 rounded-xl card-hover\">\n                  <div class=\"w-12 h-12 rounded-full bg-red-100 flex items-center justify-center text-red-600 mb-2\">\n                    \ud83d\ude22\n                  <\/div>\n                  <span class=\"text-xs\">\u5f88\u4e0d\u597d<\/span>\n                <\/div>\n              <\/div>\n              \n              <!-- \u60c5\u7eea\u6807\u7b7e -->\n              <div>\n                <h3 class=\"font-semibold mb-3\">\u53ef\u4ee5\u63cf\u8ff0\u4e00\u4e0b\u5417\uff1f<\/h3>\n                \n                <div class=\"flex flex-wrap gap-2 mb-5\">\n                  <span class=\"bg-primary\/10 text-primary text-xs py-1.5 px-3 rounded-full\">\u5f00\u5fc3<\/span>\n                  <span class=\"bg-gray-100 text-gray-600 text-xs py-1.5 px-3 rounded-full\">\u5e73\u9759<\/span>\n                  <span class=\"bg-gray-100 text-gray-600 text-xs py-1.5 px-3 rounded-full\">\u75b2\u60eb<\/span>\n                  <span class=\"bg-gray-100 text-gray-600 text-xs py-1.5 px-3 rounded-full\">\u7126\u8651<\/span>\n                  <span class=\"bg-gray-100 text-gray-600 text-xs py-1.5 px-3 rounded-full\">\u6124\u6012<\/span>\n                  <span class=\"bg-gray-100 text-gray-600 text-xs py-1.5 px-3 rounded-full\">\u6cae\u4e27<\/span>\n                  <span class=\"bg-gray-100 text-gray-600 text-xs py-1.5 px-3 rounded-full\">\u6dfb\u52a0\u6807\u7b7e<\/span>\n                <\/div>\n                \n                <!-- \u8be6\u7ec6\u63cf\u8ff0 -->\n                <div>\n                  <textarea \n                    class=\"w-full border border-gray-200 rounded-xl p-3 text-sm placeholder-gray-400 resize-none h-32\"\n                    placeholder=\"\u8be6\u7ec6\u63cf\u8ff0\u4e00\u4e0b\u4eca\u5929\u7684\u5fc3\u60c5\u548c\u611f\u53d7\u5427...\"\n                  ><\/textarea>\n                <\/div>\n              <\/div>\n            <\/div>\n            \n            <!-- \u63d0\u4ea4\u6309\u94ae -->\n            <div class=\"px-6 pb-6\">\n              <button class=\"w-full bg-primary text-white py-3 rounded-xl font-medium text-sm card-hover\">\n                \u4fdd\u5b58\u8bb0\u5f55\n              <\/button>\n              <p class=\"text-center text-xs text-gray-400 mt-3\">\n                \u6bcf\u6b21\u8bb0\u5f55\u53ef\u83b7\u5f975\u60c5\u611f\u503c\n              <\/p>\n            <\/div>\n            \n            <!-- \u5e95\u90e8\u5bfc\u822a\u680f -->\n            <div class=\"absolute bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-4 py-2\">\n              <div class=\"flex justify-around\">\n                <div class=\"flex flex-col items-center text-gray-400\" onclick=\"navigateTo(1)\">\n                  <i class=\"fa fa-home text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n                <\/div>\n                <div class=\"flex flex-col items-center text-gray-400\">\n                  <i class=\"fa fa-piggy-bank text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u60c5\u611f\u8d26\u6237<\/span>\n                <\/div>\n                <div class=\"flex flex-col items-center text-gray-400\">\n                  <i class=\"fa fa-compass text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n                <\/div>\n                <div class=\"flex flex-col items-center text-gray-400\">\n                  <i class=\"fa fa-history text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u4ee3\u9645\u4f20\u627f<\/span>\n                <\/div>\n                <div class=\"flex flex-col items-center text-gray-400\" onclick=\"navigateTo(5)\">\n                  <i class=\"fa fa-user-o text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <!-- 5. \u6211\u7684\u9875\u9762 -->\n          <div id=\"page5\" class=\"app-page page-hidden\">\n            <!-- \u4e2a\u4eba\u4fe1\u606f\u533a -->\n            <div class=\"bg-gradient-to-b from-primary\/10 to-white pt-6 pb-4\">\n              <div class=\"px-6 flex items-center gap-4\">\n                <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/profile\/100\/100\" alt=\"\u7528\u6237\u5934\u50cf\" class=\"w-16 h-16 rounded-full object-cover border-2 border-white shadow-sm\">\n                <div>\n                  <h2 class=\"text-lg font-semibold\">Chris<\/h2>\n                  <p class=\"text-gray-500 text-sm\">\u60c5\u611f\u8d26\u6237\u4f1a\u5458 \u00b7 128\u5929<\/p>\n                  <button class=\"mt-2 text-xs bg-primary text-white py-1 px-3 rounded-full\">\n                    \u7f16\u8f91\u8d44\u6599\n                  <\/button>\n                <\/div>\n              <\/div>\n              \n              <!-- \u6570\u636e\u7edf\u8ba1 -->\n              <div class=\"px-6 mt-6 grid grid-cols-3 gap-2\">\n                <div class=\"text-center\">\n                  <p class=\"text-xl font-bold\">42<\/p>\n                  <p class=\"text-gray-500 text-xs\">\u5fc3\u60c5\u8bb0\u5f55<\/p>\n                <\/div>\n                <div class=\"text-center\">\n                  <p class=\"text-xl font-bold\">8<\/p>\n                  <p class=\"text-gray-500 text-xs\">\u5b8c\u6210\u6d4b\u8bc4<\/p>\n                <\/div>\n                <div class=\"text-center\">\n                  <p class=\"text-xl font-bold\">4<\/p>\n                  <p class=\"text-gray-500 text-xs\">\u6210\u5c31\u52cb\u7ae0<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n            \n            <!-- \u529f\u80fd\u83dc\u5355 -->\n            <div class=\"px-6 py-4\">\n              <div class=\"space-y-1\">\n                <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-xl text-left border border-gray-100 card-hover\">\n                  <div class=\"flex items-center gap-3\">\n                    <div class=\"w-9 h-9 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n                      <i class=\"fa fa-calendar\"><\/i>\n                    <\/div>\n                    <span class=\"font-medium\">\u6211\u7684\u8bb0\u5f55<\/span>\n                  <\/div>\n                  <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n                <\/button>\n                \n                <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-xl text-left border border-gray-100 card-hover\">\n                  <div class=\"flex items-center gap-3\">\n                    <div class=\"w-9 h-9 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n                      <i class=\"fa fa-trophy\"><\/i>\n                    <\/div>\n                    <span class=\"font-medium\">\u6211\u7684\u6d4b\u8bc4<\/span>\n                  <\/div>\n                  <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n                <\/button>\n                \n                <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-xl text-left border border-gray-100 card-hover\">\n                  <div class=\"flex items-center gap-3\">\n                    <div class=\"w-9 h-9 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n                      <i class=\"fa fa-bookmark-o\"><\/i>\n                    <\/div>\n                    <span class=\"font-medium\">\u6211\u7684\u6536\u85cf<\/span>\n                  <\/div>\n                  <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n                <\/button>\n                \n                <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-xl text-left border border-gray-100 card-hover\">\n                  <div class=\"flex items-center gap-3\">\n                    <div class=\"w-9 h-9 rounded-full bg-primary\/10 flex items-center justify-center text-primary\">\n                      <i class=\"fa fa-line-chart\"><\/i>\n                    <\/div>\n                    <span class=\"font-medium\">\u5206\u6790\u62a5\u544a<\/span>\n                  <\/div>\n                  <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n                <\/button>\n              <\/div>\n              \n              <div class=\"mt-6 space-y-1\">\n                <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-xl text-left border border-gray-100 card-hover\">\n                  <div class=\"flex items-center gap-3\">\n                    <div class=\"w-9 h-9 rounded-full bg-gray-100 flex items-center justify-center text-gray-600\">\n                      <i class=\"fa fa-cog\"><\/i>\n                    <\/div>\n                    <span class=\"font-medium\">\u8bbe\u7f6e<\/span>\n                  <\/div>\n                  <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n                <\/button>\n                \n                <button class=\"w-full flex items-center justify-between p-3 bg-white rounded-xl text-left border border-gray-100 card-hover\">\n                  <div class=\"flex items-center gap-3\">\n                    <div class=\"w-9 h-9 rounded-full bg-gray-100 flex items-center justify-center text-gray-600\">\n                      <i class=\"fa fa-question-circle-o\"><\/i>\n                    <\/div>\n                    <span class=\"font-medium\">\u5e2e\u52a9\u4e0e\u53cd\u9988<\/span>\n                  <\/div>\n                  <i class=\"fa fa-angle-right text-gray-400\"><\/i>\n                <\/button>\n              <\/div>\n              \n              <div class=\"mt-8\">\n                <button class=\"w-full flex items-center justify-center gap-2 p-3 bg-red-50 rounded-xl text-red-600 border border-red-100 card-hover\">\n                  <i class=\"fa fa-sign-out\"><\/i>\n                  <span class=\"font-medium\">\u9000\u51fa\u767b\u5f55<\/span>\n                <\/button>\n              <\/div>\n            <\/div>\n            \n            <!-- \u5e95\u90e8\u5bfc\u822a\u680f -->\n            <div class=\"absolute bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-4 py-2\">\n              <div class=\"flex justify-around\">\n                <div class=\"flex flex-col items-center text-gray-400\" onclick=\"navigateTo(1)\">\n                  <i class=\"fa fa-home text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u9996\u9875<\/span>\n                <\/div>\n                <div class=\"flex flex-col items-center text-gray-400\">\n                  <i class=\"fa fa-piggy-bank text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u60c5\u611f\u8d26\u6237<\/span>\n                <\/div>\n                <div class=\"flex flex-col items-center text-gray-400\">\n                  <i class=\"fa fa-compass text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u53d1\u73b0<\/span>\n                <\/div>\n                <div class=\"flex flex-col items-center text-gray-400\">\n                  <i class=\"fa fa-history text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u4ee3\u9645\u4f20\u627f<\/span>\n                <\/div>\n                <div class=\"flex flex-col items-center text-primary\">\n                  <i class=\"fa fa-user-o text-lg\"><\/i>\n                  <span class=\"text-xs mt-1\">\u6211\u7684<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      \n      <!-- \u5bfc\u822a\u63a7\u5236 -->\n      <div class=\"flex flex-col items-center\">\n        <div class=\"flex gap-2 mb-6\">\n          <div class=\"nav-dot active\" onclick=\"navigateTo(1)\"><\/div>\n          <div class=\"nav-dot\" onclick=\"navigateTo(2)\"><\/div>\n          <div class=\"nav-dot\" onclick=\"navigateTo(3)\"><\/div>\n          <div class=\"nav-dot\" onclick=\"navigateTo(4)\"><\/div>\n          <div class=\"nav-dot\" onclick=\"navigateTo(5)\"><\/div>\n        <\/div>\n        \n        <div class=\"flex gap-4\">\n          <button id=\"prevBtn\" class=\"bg-white border border-gray-200 text-neutral px-6 py-2 rounded-full text-sm font-medium hover:bg-gray-50 transition\" onclick=\"prevPage()\">\n            <i class=\"fa fa-arrow-left mr-1\"><\/i> \u4e0a\u4e00\u9875\n          <\/button>\n          <button id=\"nextBtn\" class=\"bg-primary text-white px-6 py-2 rounded-full text-sm font-medium hover:bg-accent transition\" onclick=\"nextPage()\">\n            \u4e0b\u4e00\u9875 <i class=\"fa fa-arrow-right ml-1\"><\/i>\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n  \n  <script>\n    \/\/ \u5f53\u524d\u9875\u9762\u7d22\u5f15\n    let currentPage = 1;\n    const totalPages = 5;\n    \n    \/\/ \u521d\u59cb\u5316\u56fe\u8868\n    document.addEventListener('DOMContentLoaded', function() {\n      \/\/ \u60c5\u611f\u70ed\u529b\u56fe\n      const heatmapCtx = document.getElementById('heatmapChart').getContext('2d');\n      new Chart(heatmapCtx, {\n        type: 'line',\n        data: {\n          labels: ['5min', '10min', '15min', '20min', '25min'],\n          datasets: [{\n            label: '\u60c5\u611f\u5f3a\u5ea6',\n            data: [30, 80, 45, 90, 60],\n            borderColor: '#FF7A9C',\n            backgroundColor: 'rgba(255, 122, 156, 0.1)',\n            fill: true,\n            tension: 0.4,\n            pointBackgroundColor: '#FF7A9C',\n            pointRadius: 4\n          }]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          scales: {\n            y: {\n              beginAtZero: true,\n              max: 100,\n              display: false\n            },\n            x: {\n              grid: {\n                display: false\n              }\n            }\n          },\n          plugins: {\n            legend: {\n              display: false\n            }\n          }\n        }\n      });\n      \n      \/\/ \u60c5\u611f\u9884\u8b66\u96f7\u8fbe\u56fe\n      const radarCtx = document.getElementById('radarChart').getContext('2d');\n      new Chart(radarCtx, {\n        type: 'radar',\n        data: {\n          labels: ['\u6c9f\u901a\u9891\u7387', '\u60c5\u611f\u5171\u9e23', '\u77db\u76fe\u89e3\u51b3', '\u76f8\u4e92\u652f\u6301', '\u4fe1\u4efb\u5ea6'],\n          datasets: [{\n            label: '\u5f53\u524d\u72b6\u6001',\n            data: [75, 58, 45, 80, 70],\n            backgroundColor: 'rgba(255, 122, 156, 0.2)',\n            borderColor: '#FF7A9C',\n            pointBackgroundColor: '#FF7A9C'\n          }, {\n            label: '\u5065\u5eb7\u6807\u51c6',\n            data: [80, 75, 70, 80, 85],\n            backgroundColor: 'rgba(75, 192, 192, 0.2)',\n            borderColor: 'rgba(75, 192, 192, 1)',\n            pointBackgroundColor: 'rgba(75, 192, 192, 1)',\n            borderDash: [5, 5]\n          }]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          scales: {\n            r: {\n              beginAtZero: true,\n              max: 100,\n              ticks: {\n                display: false\n              }\n            }\n          },\n          plugins: {\n            legend: {\n              position: 'bottom',\n              labels: {\n                boxWidth: 12,\n                font: {\n                  size: 10\n                }\n              }\n            }\n          }\n        }\n      });\n    });\n    \n    \/\/ \u5bfc\u822a\u5230\u6307\u5b9a\u9875\u9762\n    function navigateTo(pageNum) {\n      if (pageNum < 1 || pageNum > totalPages) return;\n      \n      \/\/ \u66f4\u65b0\u9875\u9762\u72b6\u6001\n      document.getElementById(`page${currentPage}`).classList.remove('page-active');\n      document.getElementById(`page${currentPage}`).classList.add('page-hidden');\n      document.getElementById(`page${pageNum}`).classList.remove('page-hidden');\n      document.getElementById(`page${pageNum}`).classList.add('page-active');\n      \n      \/\/ \u66f4\u65b0\u5bfc\u822a\u70b9\n      document.querySelectorAll('.nav-dot').forEach((dot, index) => {\n        if (index + 1 === pageNum) {\n          dot.classList.add('active');\n        } else {\n          dot.classList.remove('active');\n        }\n      });\n      \n      currentPage = pageNum;\n      updateNavButtons();\n    }\n    \n    \/\/ \u4e0a\u4e00\u9875\n    function prevPage() {\n      if (currentPage > 1) {\n        navigateTo(currentPage - 1);\n      }\n    }\n    \n    \/\/ \u4e0b\u4e00\u9875\n    function nextPage() {\n      if (currentPage < totalPages) {\n        navigateTo(currentPage + 1);\n      }\n    }\n    \n    \/\/ \u66f4\u65b0\u5bfc\u822a\u6309\u94ae\u72b6\u6001\n    function updateNavButtons() {\n      const prevBtn = document.getElementById('prevBtn');\n      const nextBtn = document.getElementById('nextBtn');\n      \n      if (currentPage === 1) {\n        prevBtn.disabled = true;\n        prevBtn.classList.add('opacity-50', 'cursor-not-allowed');\n      } else {\n        prevBtn.disabled = false;\n        prevBtn.classList.remove('opacity-50', 'cursor-not-allowed');\n      }\n      \n      if (currentPage === totalPages) {\n        nextBtn.disabled = true;\n        nextBtn.classList.add('opacity-50', 'cursor-not-allowed');\n      } else {\n        nextBtn.disabled = false;\n        nextBtn.classList.remove('opacity-50', 'cursor-not-allowed');\n      }\n    }\n    \n    \/\/ \u952e\u76d8\u5bfc\u822a\n    document.addEventListener('keydown', function(e) {\n      if (e.key === 'ArrowLeft') {\n        prevPage();\n      } else if (e.key === 'ArrowRight') {\n        nextPage();\n      }\n    });\n  <\/script>\n<\/body>\n<\/html>\n  <!-- \u793e\u4f1a\u4ef7\u503c -->\n  <section id=\"value\" class=\"py-16 md:py-24 bg-light\">\n    <div class=\"container mx-auto px-4\">\n      <div class=\"text-center mb-12 md:mb-16\">\n        <h2 class=\"text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4\">\u793e\u4f1a\u4ef7\u503c<\/h2>\n        <p class=\"text-gray-600 max-w-2xl mx-auto\">\u5fc3\u8c10XinSync\u4e0d\u4ec5\u662f\u4e00\u6b3e\u5de5\u5177\uff0c\u66f4\u662f\u60c5\u611f\u5173\u7cfb\u7684\u5b88\u62a4\u8005\u4e0e\u5f15\u5bfc\u8005<\/p>\n      <\/div>\n      \n      <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n        <div class=\"bg-white rounded-2xl p-6 md:p-8 shadow-sm card-hover\">\n          <div class=\"w-16 h-16 bg-secondary rounded-full flex items-center justify-center text-primary mb-6\">\n            <i class=\"fa fa-heart-o text-2xl\"><\/i>\n          <\/div>\n          <h3 class=\"text-xl font-bold mb-3\">\u964d\u4f4e\u5bb6\u5ead\u77db\u76fe\u7387<\/h3>\n          <p class=\"text-gray-600\">\n            \u901a\u8fc7\u63d0\u524d\u8bc6\u522b\u60c5\u611f\u98ce\u9669\u70b9\uff0c\u63d0\u4f9b\u79d1\u5b66\u6c9f\u901a\u5efa\u8bae\uff0c\u5e2e\u52a9\u5bb6\u5ead\u51cf\u5c1172%\u7684\u65e0\u6548\u4e89\u5435\uff0c\n            \u4ece\u6839\u6e90\u4e0a\u964d\u4f4e\u5bb6\u5ead\u77db\u76fe\u53d1\u751f\u7387\n          <\/p>\n        <\/div>\n        \n        <div class=\"bg-white rounded-2xl p-6 md:p-8 shadow-sm card-hover\">\n          <div class=\"w-16 h-16 bg-secondary rounded-full flex items-center justify-center text-primary mb-6\">\n            <i class=\"fa fa-users text-2xl\"><\/i>\n          <\/div>\n          <h3 class=\"text-xl font-bold mb-3\">\u63d0\u5347\u60c5\u611f\u6c9f\u901a\u8d28\u91cf<\/h3>\n          <p class=\"text-gray-600\">\n            \u57fa\u4e8e300\u4e07+\u60c5\u611f\u6570\u636e\u8bad\u7ec3\u7684AI\u6a21\u578b\uff0c\u80fd\u7cbe\u51c6\u89e3\u8bfb\u6c9f\u901a\u4e2d\u7684\u60c5\u611f\u4fe1\u53f7\uff0c\n            \u5e2e\u52a9\u7528\u6237\u63d0\u5347\u6c9f\u901a\u6548\u7387\uff0c\u51cf\u5c1180%\u7684\u60c5\u611f\u8bef\u89e3\n          <\/p>\n        <\/div>\n        \n        <div class=\"bg-white rounded-2xl p-6 md:p-8 shadow-sm card-hover\">\n          <div class=\"w-16 h-16 bg-secondary rounded-full flex items-center justify-center text-primary mb-6\">\n            <i class=\"fa fa-hand-peace-o text-2xl\"><\/i>\n          <\/div>\n          <h3 class=\"text-xl font-bold mb-3\">\u4fc3\u8fdb\u793e\u4f1a\u60c5\u611f\u5065\u5eb7<\/h3>\n          <p class=\"text-gray-600\">\n            \u901a\u8fc7\u666e\u53ca\u60c5\u611f\u7ba1\u7406\u77e5\u8bc6\u4e0e\u6280\u80fd\uff0c\u6784\u5efa\u548c\u8c10\u5bb6\u5ead\u5173\u7cfb\uff0c\n            \u4ece\u5fae\u89c2\u5c42\u9762\u63a8\u52a8\u793e\u4f1a\u60c5\u611f\u5065\u5eb7\u751f\u6001\u5efa\u8bbe\n          <\/p>\n        <\/div>\n      <\/div>\n      \n      <!-- \u6570\u636e\u5c55\u793a -->\n      <div class=\"mt-16 md:mt-20 bg-white rounded-2xl p-6 md:p-10 shadow-sm\">\n        <div class=\"grid grid-cols-2 md:grid-cols-4 gap-6 text-center\">\n          <div class=\"p-4\">\n            <p class=\"text-3xl md:text-4xl lg:text-5xl font-bold text-primary mb-2\">300\u4e07+<\/p>\n            <p class=\"text-gray-600 text-sm md:text-base\">\u60c5\u611f\u6570\u636e\u6837\u672c<\/p>\n          <\/div>\n          <div class=\"p-4\">\n            <p class=\"text-3xl md:text-4xl lg:text-5xl font-bold text-primary mb-2\">86%<\/p>\n            <p class=\"text-gray-600 text-sm md:text-base\">\u7528\u6237\u6ee1\u610f\u5ea6<\/p>\n          <\/div>\n          <div class=\"p-4\">\n            <p class=\"text-3xl md:text-4xl lg:text-5xl font-bold text-primary mb-2\">12\u4e07+<\/p>\n            <p class=\"text-gray-600 text-sm md:text-base\">\u6d3b\u8dc3\u5bb6\u5ead\u7528\u6237<\/p>\n          <\/div>\n          <div class=\"p-4\">\n            <p class=\"text-3xl md:text-4xl lg:text-5xl font-bold text-primary mb-2\">42%<\/p>\n            <p class=\"text-gray-600 text-sm md:text-base\">\u5173\u7cfb\u6539\u5584\u7387<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u89e3\u51b3\u7684\u95ee\u9898 -->\n  <section id=\"solve\" class=\"py-16 md:py-24 bg-white\">\n    <div class=\"container mx-auto px-4\">\n      <div class=\"text-center mb-12 md:mb-16\">\n        <h2 class=\"text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4\">\u89e3\u51b3\u60c5\u611f\u5173\u7cfb\u6838\u5fc3\u95ee\u9898<\/h2>\n        <p class=\"text-gray-600 max-w-2xl mx-auto\">\u6211\u4eec\u6df1\u5165\u6d1e\u5bdf\u73b0\u4ee3\u4eba\u9645\u5173\u7cfb\u75db\u70b9\uff0c\u63d0\u4f9b\u9488\u5bf9\u6027\u89e3\u51b3\u65b9\u6848<\/p>\n      <\/div>\n      \n      <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8\">\n        <div class=\"bg-light rounded-2xl p-6 card-hover\">\n          <div class=\"w-12 h-12 bg-primary\/10 rounded-full flex items-center justify-center text-primary mb-5\">\n            <i class=\"fa fa-comments-o text-xl\"><\/i>\n          <\/div>\n          <h3 class=\"text-lg font-bold mb-3\">\u6c9f\u901a\u4e0d\u7545\u4e0e\u8bef\u89e3<\/h3>\n          <p class=\"text-gray-600 mb-4\">\n            \u89e3\u51b3\u592b\u59bb\u3001\u4eb2\u5b50\u95f4\"\u8bf4\u4e86\u7b49\u4e8e\u6ca1\u8bf4\"\u7684\u6c9f\u901a\u56f0\u5883\uff0c\n            \u8bc6\u522b\u8bed\u8a00\u80cc\u540e\u7684\u771f\u5b9e\u9700\u6c42\u4e0e\u60c5\u611f\n          <\/p>\n          <span class=\"text-primary font-medium\">AI\u60c5\u611f\u89e3\u8bfb \u2192<\/span>\n        <\/div>\n        \n        <div class=\"bg-light rounded-2xl p-6 card-hover\">\n          <div class=\"w-12 h-12 bg-primary\/10 rounded-full flex items-center justify-center text-primary mb-5\">\n            <i class=\"fa fa-exclamation-triangle text-xl\"><\/i>\n          <\/div>\n          <h3 class=\"text-lg font-bold mb-3\">\u60c5\u611f\u5371\u673a\u9884\u8b66<\/h3>\n          <p class=\"text-gray-600 mb-4\">\n            \u63d0\u524d\u53d1\u73b0\u5173\u7cfb\u4e2d\u7684\u98ce\u9669\u4fe1\u53f7\uff0c\u5728\u77db\u76fe\u6fc0\u5316\u524d\n            \u53d1\u51fa\u9884\u8b66\u5e76\u63d0\u4f9b\u5e72\u9884\u65b9\u6848\n          <\/p>\n          <span class=\"text-primary font-medium\">\u60c5\u611f\u98ce\u9669\u96f7\u8fbe \u2192<\/span>\n        <\/div>\n        \n        <div class=\"bg-light rounded-2xl p-6 card-hover\">\n          <div class=\"w-12 h-12 bg-primary\/10 rounded-full flex items-center justify-center text-primary mb-5\">\n            <i class=\"fa fa-history text-xl\"><\/i>\n          <\/div>\n          <h3 class=\"text-lg font-bold mb-3\">\u4ee3\u9645\u89c2\u5ff5\u51b2\u7a81<\/h3>\n          <p class=\"text-gray-600 mb-4\">\n            \u5316\u89e3\u957f\u8f88\u4e0e\u665a\u8f88\u95f4\u7684\u89c2\u5ff5\u5dee\u5f02\uff0c\n            \u6784\u5efa\u76f8\u4e92\u7406\u89e3\u7684\u6c9f\u901a\u6865\u6881\n          <\/p>\n          <span class=\"text-primary font-medium\">\u4ee3\u9645\u9002\u914d\u65b9\u6848 \u2192<\/span>\n        <\/div>\n        \n        <div class=\"bg-light rounded-2xl p-6 card-hover\">\n          <div class=\"w-12 h-12 bg-primary\/10 rounded-full flex items-center justify-center text-primary mb-5\">\n            <i class=\"fa fa-meh-o text-xl\"><\/i>\n          <\/div>\n          <h3 class=\"text-lg font-bold mb-3\">\u60c5\u611f\u8868\u8fbe\u969c\u788d<\/h3>\n          <p class=\"text-gray-600 mb-4\">\n            \u5e2e\u52a9\u4e0d\u64c5\u957f\u8868\u8fbe\u60c5\u611f\u7684\u4eba\u627e\u5230\u5408\u9002\u7684\u8868\u8fbe\u65b9\u5f0f\uff0c\n            \u8ba9\u7231\u610f\u4e0e\u5173\u5fc3\u88ab\u6b63\u786e\u611f\u77e5\n          <\/p>\n          <span class=\"text-primary font-medium\">\u8868\u8fbe\u6307\u5bfc\u5de5\u5177 \u2192<\/span>\n        <\/div>\n        \n        <div class=\"bg-light rounded-2xl p-6 card-hover\">\n          <div class=\"w-12 h-12 bg-primary\/10 rounded-full flex items-center justify-center text-primary mb-5\">\n            <i class=\"fa fa-child text-xl\"><\/i>\n          <\/div>\n          <h3 class=\"text-lg font-bold mb-3\">\u4eb2\u5b50\u5173\u7cfb\u758f\u79bb<\/h3>\n          <p class=\"text-gray-600 mb-4\">\n            \u9488\u5bf9\u9752\u6625\u671f\u4eb2\u5b50\u6c9f\u901a\u96be\u9898\uff0c\u63d0\u4f9b\u79d1\u5b66\u5f15\u5bfc\uff0c\n            \u91cd\u5efa\u4fe1\u4efb\u4e0e\u4eb2\u5bc6\u611f\n          <\/p>\n          <span class=\"text-primary font-medium\">\u4eb2\u5b50\u5173\u7cfb\u4fee\u590d \u2192<\/span>\n        <\/div>\n        \n        <div class=\"bg-light rounded-2xl p-6 card-hover\">\n          <div class=\"w-12 h-12 bg-primary\/10 rounded-full flex items-center justify-center text-primary mb-5\">\n            <i class=\"fa fa-line-chart text-xl\"><\/i>\n          <\/div>\n          <h3 class=\"text-lg font-bold mb-3\">\u5173\u7cfb\u53d1\u5c55\u76f2\u533a<\/h3>\n          <p class=\"text-gray-600 mb-4\">\n            \u901a\u8fc7\u6570\u636e\u53ef\u89c6\u5316\u5c55\u793a\u5173\u7cfb\u53d1\u5c55\u8d8b\u52bf\uff0c\n            \u53d1\u73b0\u6f5c\u5728\u95ee\u9898\u4e0e\u63d0\u5347\u7a7a\u95f4\n          <\/p>\n          <span class=\"text-primary font-medium\">\u5173\u7cfb\u8d8b\u52bf\u5206\u6790 \u2192<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u4e0a\u4f20\u5206\u6790\u6d41\u7a0b -->\n  <section id=\"process\" class=\"py-16 md:py-24 bg-light\">\n    <div class=\"container mx-auto px-4\">\n      <div class=\"text-center mb-12 md:mb-16\">\n        <h2 class=\"text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4\">\u7b80\u5355\u56db\u6b65\uff0c\u8bfb\u61c2\u60c5\u611f<\/h2>\n        <p class=\"text-gray-600 max-w-2xl mx-auto\">\u5fc3\u8c10XinSync\u8ba9\u4e13\u4e1a\u60c5\u611f\u5206\u6790\u53d8\u5f97\u7b80\u5355\u6613\u884c<\/p>\n      <\/div>\n      \n      <div class=\"max-w-5xl mx-auto\">\n        <!-- \u6d41\u7a0b\u7ebf - \u4ec5\u5728\u4e2d\u7b49\u4ee5\u4e0a\u5c4f\u5e55\u663e\u793a -->\n        <div class=\"hidden md:block absolute left-1\/2 top-0 bottom-0 w-0.5 bg-primary\/20 transform -translate-x-1\/2\"><\/div>\n        \n        <div class=\"relative\">\n          <!-- \u6b65\u9aa41 -->\n          <div class=\"flex flex-col md:flex-row items-center mb-12 md:mb-20 relative\">\n            <div class=\"md:w-1\/2 md:pr-12 md:text-right mb-6 md:mb-0\">\n              <h3 class=\"text-xl font-bold mb-3\">\u4e0a\u4f20\u6c9f\u901a\u8bb0\u5f55<\/h3>\n              <p class=\"text-gray-600\">\n                \u8f7b\u677e\u4e0a\u4f20\u804a\u5929\u8bb0\u5f55\u3001\u901a\u8bdd\u5f55\u97f3\uff08\u9700\u6388\u6743\uff09\u6216\u624b\u52a8\u8f93\u5165\u5bf9\u8bdd\u5185\u5bb9\uff0c\n                \u6240\u6709\u6570\u636e\u91c7\u7528\u94f6\u884c\u7ea7\u52a0\u5bc6\u4fdd\u62a4\n              <\/p>\n            <\/div>\n            \n            <div class=\"md:w-12 z-10\">\n              <div class=\"w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center font-bold mx-auto\">1<\/div>\n            <\/div>\n            \n            <div class=\"md:w-1\/2 md:pl-12\">\n              <div class=\"bg-white rounded-xl p-3 shadow-sm overflow-hidden\">\n                <img decoding=\"async\" src=\"https:\/\/www.affectivechain.com\/wp-content\/uploads\/2025\/07\/12111.png\" alt=\"\u4e0a\u4f20\u6c9f\u901a\u8bb0\u5f55\" class=\"w-full h-auto rounded-lg object-cover\">\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <!-- \u6b65\u9aa42 -->\n          <div class=\"flex flex-col md:flex-row items-center mb-12 md:mb-20 relative\">\n            <div class=\"md:w-1\/2 md:pr-12 order-1 md:order-1\">\n              <div class=\"bg-white rounded-xl p-3 shadow-sm overflow-hidden\">\n                <img decoding=\"async\" src=\"https:\/\/www.affectivechain.com\/wp-content\/uploads\/2025\/07\/\u60c5\u611f\u8bb0\u5f55\u6dfb\u52a0\u9875\u9762.png\" alt=\"AI\u60c5\u611f\u5206\u6790\" class=\"w-full h-auto rounded-lg object-cover\">\n              <\/div>\n            <\/div>\n            \n            <div class=\"md:w-12 z-10 order-0 md:order-2\">\n              <div class=\"w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center font-bold mx-auto\">2<\/div>\n            <\/div>\n            \n            <div class=\"md:w-1\/2 md:pl-12 order-2 md:order-3 mt-6 md:mt-0\">\n              <h3 class=\"text-xl font-bold mb-3\">AI\u60c5\u611f\u5206\u6790<\/h3>\n              <p class=\"text-gray-600\">\n                \u57fa\u4e8eNLP\u60c5\u611f\u8bc6\u522b\u6280\u672f\u4e0e300\u4e07+\u60c5\u611f\u6570\u636e\u8bad\u7ec3\u7684AI\u6a21\u578b\uff0c\n                \u6df1\u5ea6\u89e3\u6790\u5bf9\u8bdd\u4e2d\u7684\u60c5\u611f\u503e\u5411\u3001\u6f5c\u5728\u9700\u6c42\u4e0e\u6c9f\u901a\u6a21\u5f0f\n              <\/p>\n            <\/div>\n          <\/div>\n          \n          <!-- \u6b65\u9aa43 -->\n          <div class=\"flex flex-col md:flex-row items-center mb-12 md:mb-20 relative\">\n            <div class=\"md:w-1\/2 md:pr-12 md:text-right mb-6 md:mb-0\">\n              <h3 class=\"text-xl font-bold mb-3\">\u751f\u6210\u5206\u6790\u62a5\u544a<\/h3>\n              <p class=\"text-gray-600\">\n                \u81ea\u52a8\u751f\u6210\u53ef\u89c6\u5316\u5206\u6790\u62a5\u544a\uff0c\u5305\u542b\u60c5\u611f\u70ed\u529b\u56fe\u3001\u6c9f\u901a\u8d28\u91cf\u8bc4\u5206\u3001\n                \u6f5c\u5728\u95ee\u9898\u63d0\u793a\u7b49\u4e13\u4e1a\u5185\u5bb9\n              <\/p>\n            <\/div>\n            \n            <div class=\"md:w-12 z-10\">\n              <div class=\"w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center font-bold mx-auto\">3<\/div>\n            <\/div>\n            \n            <div class=\"md:w-1\/2 md:pl-12\">\n              <div class=\"bg-white rounded-xl p-3 shadow-sm overflow-hidden\">\n                <img decoding=\"async\" src=\"https:\/\/www.affectivechain.com\/wp-content\/uploads\/2025\/07\/\u60c5\u611f\u5206\u6790.png\" alt=\"\u751f\u6210\u5206\u6790\u62a5\u544a\" class=\"w-full h-auto rounded-lg object-cover\">\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <!-- \u6b65\u9aa44 -->\n          <div class=\"flex flex-col md:flex-row items-center relative\">\n            <div class=\"md:w-1\/2 md:pr-12 order-1 md:order-1\">\n              <div class=\"bg-white rounded-xl p-3 shadow-sm overflow-hidden\">\n                <img decoding=\"async\" src=\"https:\/\/www.affectivechain.com\/wp-content\/uploads\/2025\/07\/12111-1.png\" alt=\"\u83b7\u53d6\u6539\u5584\u5efa\u8bae\" class=\"w-full h-auto rounded-lg object-cover\">\n              <\/div>\n            <\/div>\n            \n            <div class=\"md:w-12 z-10 order-0 md:order-2\">\n              <div class=\"w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center font-bold mx-auto\">4<\/div>\n            <\/div>\n            \n            <div class=\"md:w-1\/2 md:pl-12 order-2 md:order-3 mt-6 md:mt-0\">\n              <h3 class=\"text-xl font-bold mb-3\">\u83b7\u53d6\u6539\u5584\u5efa\u8bae<\/h3>\n              <p class=\"text-gray-600\">\n                \u6839\u636e\u5206\u6790\u7ed3\u679c\u63d0\u4f9b\u4e2a\u6027\u5316\u6539\u5584\u65b9\u6848\uff0c\u5305\u542b\u6c9f\u901a\u6280\u5de7\u3001\n                \u60c5\u611f\u8868\u8fbe\u65b9\u6cd5\u548c\u5173\u7cfb\u5347\u6e29\u5efa\u8bae\uff0c\u7531\u4e13\u4e1a\u5fc3\u7406\u54a8\u8be2\u5e08\u5ba1\u6838\n              <\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u6838\u5fc3\u529f\u80fd\u5c55\u793a -->\n  <section id=\"features\" class=\"py-16 md:py-24 bg-white\">\n    <div class=\"container mx-auto px-4\">\n      <div class=\"text-center mb-12 md:mb-16\">\n        <h2 class=\"text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4\">\u6838\u5fc3\u529f\u80fd\u5c55\u793a<\/h2>\n        <p class=\"text-gray-600 max-w-2xl mx-auto\">\u7528\u79d1\u6280\u8d4b\u80fd\u60c5\u611f\u5173\u7cfb\u7ba1\u7406\uff0c\u8ba9\u4e13\u4e1a\u53d8\u5f97\u89e6\u624b\u53ef\u53ca<\/p>\n      <\/div>\n      \n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl mx-auto\">\n        <!-- \u60c5\u611f\u70ed\u529b\u56fe -->\n        <div class=\"bg-light rounded-2xl p-6 md:p-8 card-hover\">\n          <h3 class=\"text-xl font-bold mb-6\">\u60c5\u611f\u70ed\u529b\u56fe\u5206\u6790<\/h3>\n          <div class=\"bg-white rounded-xl p-4 mb-6 h-64\">\n            <canvas id=\"emotionHeatmap\"><\/canvas>\n          <\/div>\n          <p class=\"text-gray-600\">\n            \u76f4\u89c2\u5c55\u793a\u5bf9\u8bdd\u4e2d\u7684\u60c5\u611f\u6ce2\u52a8\u4e0e\u5173\u952e\u8282\u70b9\uff0c\u7ea2\u8272\u533a\u57df\u8868\u793a\u60c5\u7eea\u6fc0\u52a8\u70b9\uff0c\n            \u84dd\u8272\u533a\u57df\u8868\u793a\u60c5\u611f\u5e73\u6de1\u533a\uff0c\u5e2e\u52a9\u8bc6\u522b\u6c9f\u901a\u4e2d\u7684\u60c5\u611f\u9ad8\u6f6e\u4e0e\u4f4e\u8c37\n          <\/p>\n        <\/div>\n        \n        <!-- \u60c5\u611f\u9884\u8b66\u96f7\u8fbe -->\n        <div class=\"bg-light rounded-2xl p-6 md:p-8 card-hover\">\n          <h3 class=\"text-xl font-bold mb-6\">\u60c5\u611f\u98ce\u9669\u9884\u8b66\u96f7\u8fbe<\/h3>\n          <div class=\"bg-white rounded-xl p-4 mb-6 h-64\">\n            <canvas id=\"emotionRadar\"><\/canvas>\n          <\/div>\n          <p class=\"text-gray-600\">\n            \u591a\u7ef4\u5ea6\u8bc4\u4f30\u5173\u7cfb\u5065\u5eb7\u5ea6\uff0c\u5305\u542b\u6c9f\u901a\u9891\u7387\u3001\u60c5\u611f\u5171\u9e23\u3001\u77db\u76fe\u89e3\u51b3\u7b495\u5927\u7ef4\u5ea6\uff0c\n            \u6570\u503c\u4f4e\u4e8e60\u5206\u5c06\u53d1\u51fa\u9884\u8b66\u5e76\u63d0\u4f9b\u6539\u5584\u5efa\u8bae\n          <\/p>\n        <\/div>\n        \n        <!-- \u6c9f\u901a\u6a21\u5f0f\u5206\u6790 -->\n        <div class=\"bg-light rounded-2xl p-6 md:p-8 card-hover\">\n          <h3 class=\"text-xl font-bold mb-6\">\u6c9f\u901a\u6a21\u5f0f\u5206\u6790<\/h3>\n          <div class=\"bg-white rounded-xl p-4 mb-6 h-64\">\n            <canvas id=\"communicationChart\"><\/canvas>\n          <\/div>\n          <p class=\"text-gray-600\">\n            \u5206\u6790\u53cc\u65b9\u7684\u6c9f\u901a\u98ce\u683c\u4e0e\u4e92\u52a8\u6a21\u5f0f\uff0c\u8bc6\u522b\u79ef\u6781\u6c9f\u901a\u4e0e\u6d88\u6781\u6c9f\u901a\u7684\u5360\u6bd4\uff0c\n            \u63d0\u4f9b\u4e2a\u6027\u5316\u6c9f\u901a\u4f18\u5316\u65b9\u6848\n          <\/p>\n        <\/div>\n        \n        <!-- \u5173\u7cfb\u8d8b\u52bf\u8ffd\u8e2a -->\n        <div class=\"bg-light rounded-2xl p-6 md:p-8 card-hover\">\n          <h3 class=\"text-xl font-bold mb-6\">\u5173\u7cfb\u8d8b\u52bf\u8ffd\u8e2a<\/h3>\n          <div class=\"bg-white rounded-xl p-4 mb-6 h-64\">\n            <canvas id=\"relationshipTrend\"><\/canvas>\n          <\/div>\n          <p class=\"text-gray-600\">\n            \u957f\u671f\u8ffd\u8e2a\u5173\u7cfb\u53d1\u5c55\u8d8b\u52bf\uff0c\u901a\u8fc7\u5386\u53f2\u6570\u636e\u5206\u6790\u5173\u7cfb\u53d8\u5316\u89c4\u5f8b\uff0c\n            \u63d0\u524d\u53d1\u73b0\u6f5c\u5728\u95ee\u9898\u5e76\u53ca\u65f6\u5e72\u9884\n          <\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u884c\u52a8\u53f7\u53ec -->\n  <section class=\"py-16 md:py-24 gradient-overlay text-white\">\n    <div class=\"container mx-auto px-4 text-center\">\n      <h2 class=\"text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-6\">\n        \u5f00\u59cb\u4f60\u7684\u60c5\u611f\u548c\u8c10\u4e4b\u65c5\n      <\/h2>\n      <p class=\"text-lg opacity-90 mb-10 max-w-2xl mx-auto\">\n        \u73b0\u5728\u6ce8\u518c\u5373\u53ef\u83b7\u5f973\u6b21\u514d\u8d39\u4e13\u4e1a\u60c5\u611f\u5206\u6790\u670d\u52a1\uff0c\n        \u524d1000\u540d\u7528\u6237\u989d\u5916\u8d60\u9001\u4ef7\u503c1999\u5143\u7684\u60c5\u611f\u6d4b\u8bc4\u62a5\u544a\n      <\/p>\n      <a href=\"https:\/\/www.affectivechain.com\/index.php\/heart%e6%96%b9%e6%a1%88\/multi-modal-emotion-analysis\/\" class=\"inline-block bg-white text-primary px-10 py-4 rounded-full font-semibold text-xl hover:shadow-lg transition-all duration-200\">\n        \u7acb\u5373\u6ce8\u518c\uff0c\u514d\u8d39\u4f53\u9a8c\n      <\/a>\n      \n      <div class=\"mt-12 flex flex-wrap justify-center gap-6 md:gap-8\">\n        <div class=\"flex items-center gap-2\">\n          <i class=\"fa fa-shield text-xl\"><\/i>\n          <span>\u9690\u79c1\u5b89\u5168\u4fdd\u969c<\/span>\n        <\/div>\n        <div class=\"flex items-center gap-2\">\n          <i class=\"fa fa-user-md text-xl\"><\/i>\n          <span>\u4e13\u4e1a\u5fc3\u7406\u652f\u6301<\/span>\n        <\/div>\n        <div class=\"flex items-center gap-2\">\n          <i class=\"fa fa-refresh text-xl\"><\/i>\n          <span>7\u5929\u65e0\u7406\u7531\u9000\u6b3e<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u9875\u811a -->\n  <footer class=\"bg-neutral text-white py-12\">\n    <div class=\"container mx-auto px-4\">\n      <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8\">\n        <div>\n          <div class=\"flex items-center gap-2 mb-6\">\n            <img decoding=\"async\" src=\"https:\/\/www.affectivechain.com\/wp-content\/uploads\/2025\/05\/\u957f\u65b9\u5f62-1.jpg\" alt=\"\u5fc3\u8c10LOGO\" class=\"w-8 h-8 object-contain bg-white p-1 rounded\">\n            <span class=\"font-bold text-lg\">\u5fc3\u8c10XinSync<\/span>\n          <\/div>\n          <p class=\"text-gray-400 mb-6\">\n            \u7528\u79d1\u6280\u8d4b\u80fd\u60c5\u611f\u5173\u7cfb\uff0c\n            \u8ba9\u6bcf\u4e2a\u5bb6\u5ead\u90fd\u80fd\u62e5\u6709\u548c\u8c10\u7684\u60c5\u611f\u6c9f\u901a\n          <\/p>\n          <div class=\"flex gap-4\">\n            <a href=\"https:\/\/work.weixin.qq.com\/kfid\/kfc2e44535ead9f74e5\" class=\"text-gray-400 hover:text-white transition-colors duration-200\">\n              <i class=\"fa fa-weixin text-xl\"><\/i>\n            <\/a>\n            <a href=\"https:\/\/weibo.com\/u\/3893680390\" class=\"text-gray-400 hover:text-white transition-colors duration-200\">\n              <i class=\"fa fa-weibo text-xl\"><\/i>\n            <\/a>\n            <a href=\"#\" class=\"text-gray-400 hover:text-white transition-colors duration-200\">\n              <i class=\"fa fa-qq text-xl\"><\/i>\n            <\/a>\n          <\/div>\n        <\/div>\n        \n        <div>\n          <h4 class=\"font-bold text-lg mb-6\">\u4ea7\u54c1\u670d\u52a1<\/h4>\n          <ul class=\"space-y-3\">\n            <li><a href=\"https:\/\/www.affectivechain.com\/index.php\/heartsync\/data-tou\/\" class=\"text-gray-400 hover:text-white transition-colors duration-200\">\u60c5\u611f\u5206\u6790<\/a><\/li>\n            <li><a href=\"https:\/\/jsj.top\/f\/ffZBsf\" class=\"text-gray-400 hover:text-white transition-colors duration-200\">\u5173\u7cfb\u6d4b\u8bc4<\/a><\/li>\n            <li><a href=\"https:\/\/www.affectivechain.com\/index.php\/heart%E6%96%B9%E6%A1%88\/syncapp\/\" class=\"text-gray-400 hover:text-white transition-colors duration-200\">\u4ea7\u54c1\u65b9\u6848<\/a><\/li>\n            <li><a href=\"https:\/\/www.affectivechain.com\/index.php\/counseling\/\" class=\"text-gray-400 hover:text-white transition-colors duration-200\">\u5fc3\u7406\u54a8\u8be2<\/a><\/li>\n          <\/ul>\n        <\/div>\n        \n        <div>\n          <h4 class=\"font-bold text-lg mb-6\">\u5173\u4e8e\u6211\u4eec<\/h4>\n          <ul class=\"space-y-3\">\n            <li><a href=\"https:\/\/www.affectivechain.com\/index.php\/%E5%85%AC%E5%8F%B8%E7%AE%80%E4%BB%8B\/\" class=\"text-gray-400 hover:text-white transition-colors duration-200\">\u516c\u53f8\u4ecb\u7ecd<\/a><\/li>\n            <li><a href=\"https:\/\/www.affectivechain.com\/index.php\/customer-service\/\" class=\"text-gray-400 hover:text-white transition-colors duration-200\">\u8054\u7cfb\u6211\u4eec<\/a><\/li>\n            <li><a href=\"https:\/\/www.affectivechain.com\/index.php\/%E6%9C%80%E6%96%B0%E5%8A%A8%E6%80%81-2\/\" class=\"text-gray-400 hover:text-white transition-colors duration-200\">\u5a92\u4f53\u62a5\u9053<\/a><\/li>\n            <li><a href=\"https:\/\/www.affectivechain.com\/index.php\/recruitment\/\" class=\"text-gray-400 hover:text-white transition-colors duration-200\">\u52a0\u5165\u6211\u4eec<\/a><\/li>\n          <\/ul>\n        <\/div>\n        \n        <div>\n          <h4 class=\"font-bold text-lg mb-6\">\u8054\u7cfb\u6211\u4eec<\/h4>\n          <ul class=\"space-y-3\">\n            <li class=\"flex items-center gap-2\">\n              <i class=\"fa fa-phone\"><\/i>\n              <span>130-6193-3371<\/span>\n            <\/li>\n            <li class=\"flex items-center gap-2\">\n              <i class=\"fa fa-envelope-o\"><\/i>\n              <span>chris@heartchain.cn<\/span>\n            <\/li>\n            <li class=\"flex items-center gap-2\">\n              <i class=\"fa fa-map-marker\"><\/i>\n              <span>\u4e0a\u6d77\u5e02\u6d66\u4e1c\u65b0\u533a\u5f20\u6c5f\u9ad8\u79d1\u6280\u56ed\u533a<\/span>\n            <\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n      \n      <div class=\"border-t border-gray-700 mt-10 pt-6 text-center text-gray-400 text-sm\">\n        <p>\u00a9 2025 \u5fc3\u94fe\u60c5\u667a\u6570\u636e\u79d1\u6280(\u4e0a\u6d77)\u6709\u9650\u516c\u53f8 \u7248\u6743\u6240\u6709 | \u6caaICP\u59072025120520-6\u53f7<\/p>\n      <\/div>\n    <\/div>\n  <\/footer>\n\n  <!-- \u56fe\u8868\u811a\u672c\u548c\u4ea4\u4e92\u811a\u672c -->\n  <script>\n    \/\/ \u79fb\u52a8\u7aef\u83dc\u5355\u4ea4\u4e92\n    document.addEventListener('DOMContentLoaded', function() {\n      const menuBtn = document.getElementById('menuBtn');\n      const mobileMenu = document.getElementById('mobileMenu');\n      \n      menuBtn.addEventListener('click', function() {\n        mobileMenu.classList.toggle('hidden');\n        \/\/ \u5207\u6362\u56fe\u6807\n        const icon = menuBtn.querySelector('i');\n        if (mobileMenu.classList.contains('hidden')) {\n          icon.classList.remove('fa-times');\n          icon.classList.add('fa-bars');\n        } else {\n          icon.classList.remove('fa-bars');\n          icon.classList.add('fa-times');\n        }\n      });\n      \n      \/\/ \u70b9\u51fb\u5bfc\u822a\u94fe\u63a5\u540e\u5173\u95ed\u79fb\u52a8\u83dc\u5355\n      const mobileLinks = mobileMenu.querySelectorAll('a');\n      mobileLinks.forEach(link => {\n        link.addEventListener('click', function() {\n          mobileMenu.classList.add('hidden');\n          const icon = menuBtn.querySelector('i');\n          icon.classList.remove('fa-times');\n          icon.classList.add('fa-bars');\n        });\n      });\n      \n      \/\/ \u6eda\u52a8\u65f6\u5bfc\u822a\u680f\u6837\u5f0f\u53d8\u5316\n      window.addEventListener('scroll', function() {\n        const nav = document.querySelector('nav');\n        if (window.scrollY > 50) {\n          nav.classList.add('py-2', 'shadow');\n          nav.classList.remove('py-3');\n        } else {\n          nav.classList.add('py-3');\n          nav.classList.remove('py-2', 'shadow');\n        }\n      });\n      \n      \/\/ \u5e73\u6ed1\u6eda\u52a8\n      document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n        anchor.addEventListener('click', function(e) {\n          e.preventDefault();\n          const targetId = this.getAttribute('href');\n          const targetElement = document.querySelector(targetId);\n          \n          if (targetElement) {\n            window.scrollTo({\n              top: targetElement.offsetTop - 80,\n              behavior: 'smooth'\n            });\n          }\n        });\n      });\n      \n      \/\/ \u56fe\u8868\u521d\u59cb\u5316\n      initCharts();\n    });\n    \n    \/\/ \u521d\u59cb\u5316\u6240\u6709\u56fe\u8868\n    function initCharts() {\n      \/\/ \u60c5\u611f\u70ed\u529b\u56fe\n      const heatmapCtx = document.getElementById('emotionHeatmap').getContext('2d');\n      new Chart(heatmapCtx, {\n        type: 'line',\n        data: {\n          labels: ['0min', '5min', '10min', '15min', '20min', '25min', '30min'],\n          datasets: [{\n            label: '\u60c5\u611f\u5f3a\u5ea6',\n            data: [30, 45, 80, 65, 90, 40, 60],\n            borderColor: '#FF7A9C',\n            backgroundColor: 'rgba(255, 122, 156, 0.1)',\n            fill: true,\n            tension: 0.4,\n            pointBackgroundColor: '#FF7A9C',\n            pointRadius: 4\n          }]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          scales: {\n            y: {\n              beginAtZero: true,\n              max: 100,\n              title: {\n                display: true,\n                text: '\u60c5\u611f\u5f3a\u5ea6'\n              }\n            }\n          }\n        }\n      });\n      \n      \/\/ \u60c5\u611f\u9884\u8b66\u96f7\u8fbe\u56fe\n      const radarCtx = document.getElementById('emotionRadar').getContext('2d');\n      new Chart(radarCtx, {\n        type: 'radar',\n        data: {\n          labels: ['\u6c9f\u901a\u9891\u7387', '\u60c5\u611f\u5171\u9e23', '\u77db\u76fe\u89e3\u51b3', '\u76f8\u4e92\u652f\u6301', '\u4fe1\u4efb\u5ea6'],\n          datasets: [{\n            label: '\u5f53\u524d\u72b6\u6001',\n            data: [75, 60, 45, 80, 70],\n            backgroundColor: 'rgba(255, 122, 156, 0.2)',\n            borderColor: '#FF7A9C',\n            pointBackgroundColor: '#FF7A9C'\n          }, {\n            label: '\u5065\u5eb7\u6807\u51c6',\n            data: [80, 75, 70, 80, 85],\n            backgroundColor: 'rgba(75, 192, 192, 0.2)',\n            borderColor: 'rgba(75, 192, 192, 1)',\n            pointBackgroundColor: 'rgba(75, 192, 192, 1)',\n            borderDash: [5, 5]\n          }]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          scales: {\n            r: {\n              beginAtZero: true,\n              max: 100,\n              ticks: {\n                stepSize: 20\n              }\n            }\n          }\n        }\n      });\n      \n      \/\/ \u6c9f\u901a\u6a21\u5f0f\u5206\u6790\u56fe\n      const commCtx = document.getElementById('communicationChart').getContext('2d');\n      new Chart(commCtx, {\n        type: 'doughnut',\n        data: {\n          labels: ['\u79ef\u6781\u503e\u542c', '\u8868\u8fbe\u8d5e\u8d4f', '\u95ee\u9898\u63d0\u51fa', '\u6d88\u6781\u56de\u5e94', '\u6307\u8d23\u6279\u8bc4'],\n          datasets: [{\n            data: [30, 20, 15, 25, 10],\n            backgroundColor: [\n              '#4CAF50',\n              '#8BC34A',\n              '#FFC107',\n              '#FF9800',\n              '#F44336'\n            ]\n          }]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false\n        }\n      });\n      \n      \/\/ \u5173\u7cfb\u8d8b\u52bf\u56fe\n      const trendCtx = document.getElementById('relationshipTrend').getContext('2d');\n      new Chart(trendCtx, {\n        type: 'line',\n        data: {\n          labels: ['1\u6708', '2\u6708', '3\u6708', '4\u6708', '5\u6708', '6\u6708'],\n          datasets: [{\n            label: '\u5173\u7cfb\u5065\u5eb7\u5ea6',\n            data: [65, 60, 55, 62, 70, 75],\n            borderColor: '#FF7A9C',\n            backgroundColor: 'rgba(255, 122, 156, 0.1)',\n            fill: true,\n            tension: 0.4\n          }]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          scales: {\n            y: {\n              beginAtZero: false,\n              min: 50,\n              max: 100\n            }\n          }\n        }\n      });\n    }\n  <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u5fc3\u8c10XinSync \u793e\u4f1a\u4ef7\u503c \u89e3\u51b3\u95ee\u9898 \u4f7f\u7528\u6d41\u7a0b \u6838\u5fc3\u529f\u80fd \u7acb\u5373\u4f53\u9a8c \u793e\u4f1a\u4ef7\u503c \u89e3\u51b3\u95ee\u9898 \u4f7f\u7528\u6d41\u7a0b \u6838\u5fc3\u529f\u80fd  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1627","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/1627","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/comments?post=1627"}],"version-history":[{"count":3,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/1627\/revisions"}],"predecessor-version":[{"id":1636,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/1627\/revisions\/1636"}],"wp:attachment":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/media?parent=1627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}