用户指出点击按钮没有界面跳转。这意味着用户希望功能卡片能够点击并跳转到对应的功能页面。当前的实现只是静态展示，没有添加跳转功能。
我需要修改代码，为每个功能卡片添加点击事件和界面跳转。由于这是一个微信小程序模拟，我需要在HTML中实现页面跳转效果。考虑到是单页面应用，我可以使用简单的显示/隐藏不同页面的方式，或者使用路由模拟。
更好的方法是：为每个功能创建一个对应的详细页面，点击卡片时切换到该页面。使用JavaScript控制页面切换。这样可以模拟小程序的多页面导航体验。
我需要重新设计结构：
1. 主页面（首页）：展示所有功能卡片
2. 六个功能页面：每个功能对应的详细页面
3. 添加导航栏，可以返回首页
这样用户点击卡片时就会跳转到对应的功能页面。同时需要保持相同的设计风格。
现在修改HTML代码，添加页面结构和导航逻辑。使用CSS控制页面显示/隐藏，JavaScript处理页面切换。
还需要考虑移动端返回按钮的处理。添加一个统一的标题栏，包含返回按钮和页面标题。
让我修改代码，添加页面跳转功能。首先修改HTML结构，然后添加CSS样式控制页面切换，最后添加JavaScript处理导航。由于用户要求微信小程序端，界面应该保持简洁，导航流畅。
开始修改代码。我需要保持现有的设计风格，同时添加页面跳转功能。每个功能页面应该有具体的内容展示，即使是模拟的。
考虑到时间，我可以为每个功能页面添加简单的内容占位符，展示该功能的基本界面。
现在开始修改代码。我将重新构建HTML结构，添加多个页面，并确保点击卡片时能正确跳转。同时添加返回功能。
另外，我需要确保深色/浅色模式在所有页面上都有效。使用CSS变量和类名控制。
现在开始修改代码。我需要生成完整的HTML代码，包含页面跳转功能。```json{
"summary": "为小程序添加了完整的页面跳转功能，每个功能卡片现在可以点击并跳转到对应的详细页面。实现了多页面导航架构，包含六个功能页面和统一的返回导航。保持了原有的清新温馨治愈风格，并增强了交互体验。",
"widget": {"type":"full-html","html":"<!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, maximum-scale=1.0, user-scalable=no\">\n <title>区区三万天 - 人生时间可视化</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link href=\"https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.c…\">\n <style>\n :root {\n --color-primary-light: #ffb6c1;\n --color-primary-dark: #b19cd9;\n --color-bg-light: #fef7f5;\n --color-bg-dark: #1a1a2e;\n --color-card-light: rgba(255, 255, 255, 0.7);\n --color-card-dark: rgba(30, 30, 50, 0.7);\n --color-text-light: #5a5a72;\n --color-text-dark: #e0e0e8;\n --radius-large: 24px;\n --radius-medium: 20px;\n --radius-small: 16px;\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n transition: background-color 0.3s ease, color 0.3s ease;\n }\n \n body {\n font-family: 'Nunito', sans-serif;\n background-color: var(--color-bg-light);\n color: var(--color-text-light);\n min-height: 100vh;\n position: relative;\n overflow-x: hidden;\n }\n \n body.dark-mode {\n background-color: var(--color-bg-dark);\n color: var(--color-text-dark);\n }\n \n /* 页面容器 */\n .page-container {\n position: relative;\n width: 100%;\n max-width: 430px;\n margin: 0 auto;\n min-height: 100vh;\n padding: 20px;\n }\n \n /* 页面切换效果 */\n .page {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n padding: 20px;\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;\n pointer-events: none;\n }\n \n .page.active {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n pointer-events: all;\n position: relative;\n }\n \n /* 导航栏 */\n .nav-bar {\n display: flex;\n align-items: center;\n margin-bottom: 25px;\n padding-top: 10px;\n }\n \n .back-btn {\n width: 44px;\n height: 44px;\n border-radius: 50%;\n background: var(--color-card-light);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-right: 15px;\n flex-shrink: 0;\n }\n \n .dark-mode .back-btn {\n background: var(--color-card-dark);\n border: 1px solid rgba(255, 255, 255, 0.05);\n }\n \n .back-btn i {\n font-size: 20px;\n color: #ff9a9e;\n }\n \n .dark-mode .back-btn i {\n color: #b19cd9;\n }\n \n .page-title {\n font-family: 'Quicksand', sans-serif;\n font-weight: 600;\n font-size: 24px;\n background: linear-gradient(135deg, #ff9a9e, #fad0c4);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n \n .dark-mode .page-title {\n background: linear-gradient(135deg, #a8c0ff, #ffd3b6);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n \n /* 背景装饰元素 */\n .bg-decoration {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: -1;\n overflow: hidden;\n pointer-events: none;\n }\n \n .bg-circle {\n position: absolute;\n border-radius: 50%;\n filter: blur(60px);\n opacity: 0.15;\n }\n \n .circle-1 {\n width: 300px;\n height: 300px;\n background: linear-gradient(135deg, #ffb6c1, #b19cd9);\n top: -100px;\n right: -100px;\n }\n \n .circle-2 {\n width: 250px;\n height: 250px;\n background: linear-gradient(135deg, #a8e6cf, #ffd3b6);\n bottom: -80px;\n left: -80px;\n }\n \n .circle-3 {\n width: 200px;\n height: 200px;\n background: linear-gradient(135deg, #b5ead7, #c7ceea);\n top: 40%;\n left: 10%;\n }\n \n /* 磨砂玻璃卡片 */\n .glass-card {\n background: var(--color-card-light);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border-radius: var(--radius-large);\n border: 1px solid rgba(255, 255, 255, 0.2);\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);\n padding: 24px;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n cursor: pointer;\n }\n \n .dark-mode .glass-card {\n background: var(--color-card-dark);\n border: 1px solid rgba(255, 255, 255, 0.05);\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n }\n \n .glass-card:active {\n transform: translateY(-3px);\n box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);\n }\n \n .dark-mode .glass-card:active {\n box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);\n }\n \n /* 首页样式 */\n .app-title {\n font-family: 'Quicksand', sans-serif;\n font-weight: 600;\n font-size: 28px;\n text-align: center;\n margin-bottom: 8px;\n background: linear-gradient(135deg, #ff9a9e, #fad0c4);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n \n .dark-mode .app-title {\n background: linear-gradient(135deg, #a8c0ff, #ffd3b6);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n \n .app-subtitle {\n font-size: 16px;\n text-align: center;\n opacity: 0.7;\n margin-bottom: 30px;\n }\n \n /* 功能卡片网格 */\n .features-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 20px;\n }\n \n /* 单个功能卡片 */\n .feature-card {\n display: flex;\n align-items: center;\n padding: 20px;\n }\n \n .feature-icon {\n width: 56px;\n height: 56px;\n border-radius: var(--radius-medium);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 18px;\n flex-shrink: 0;\n font-size: 24px;\n color: white;\n }\n \n .feature-content h3 {\n font-family: 'Quicksand', sans-serif;\n font-weight: 600;\n font-size: 18px;\n margin-bottom: 6px;\n }\n \n .feature-content p {\n font-size: 14px;\n opacity: 0.8;\n line-height: 1.5;\n }\n \n /* 主题切换按钮 */\n .theme-toggle {\n position: fixed;\n top: 20px;\n right: 20px;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background: var(--color-card-light);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 1000;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);\n }\n \n .dark-mode .theme-toggle {\n background: var(--color-card-dark);\n border: 1px solid rgba(255, 255, 255, 0.05);\n }\n \n .theme-toggle i {\n font-size: 22px;\n color: #ffb6c1;\n }\n \n .dark-mode .theme-toggle i {\n color: #b19cd9;\n }\n \n /* 详情页面内容 */\n .page-content {\n margin-top: 20px;\n }\n \n .detail-card {\n margin-bottom: 25px;\n }\n \n .detail-card h2 {\n font-family: 'Quicksand', sans-serif;\n font-weight: 600;\n font-size: 20px;\n margin-bottom: 15px;\n color: #ff9a9e;\n }\n \n .dark-mode .detail-card h2 {\n color: #b19cd9;\n }\n \n .detail-card p {\n font-size: 16px;\n line-height: 1.6;\n margin-bottom: 20px;\n opacity: 0.9;\n }\n \n .visualization {\n height: 200px;\n border-radius: var(--radius-medium);\n background: linear-gradient(135deg, rgba(255, 154, 158, 0.1), rgba(250, 208, 196, 0.1));\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 25px 0;\n }\n \n .dark-mode .visualization {\n background: linear-gradient(135deg, rgba(168, 192, 255, 0.1), rgba(255, 211, 182, 0.1));\n }\n \n .visualization i {\n font-size: 60px;\n color: rgba(255, 154, 158, 0.3);\n }\n \n .dark-mode .visualization i {\n color: rgba(168, 192, 255, 0.3);\n }\n \n .action-btn {\n width: 100%;\n padding: 18px;\n border-radius: var(--radius-medium);\n background: linear-gradient(135deg, #ff9a9e, #fad0c4);\n border: none;\n color: white;\n font-family: 'Quicksand', sans-serif;\n font-weight: 600;\n font-size: 18px;\n cursor: pointer;\n margin-top: 20px;\n box-shadow: 0 6px 20px rgba(255, 154, 158, 0.3);\n }\n \n .dark-mode .action-btn {\n background: linear-gradient(135deg, #a8c0ff, #ffd3b6);\n box-shadow: 0 6px 20px rgba(168, 192, 255, 0.3);\n }\n \n /* 当前时间显示 */\n .current-time {\n text-align: center;\n margin-top: 30px;\n padding: 16px;\n font-size: 15px;\n opacity: 0.8;\n }\n \n /* 响应式调整 */\n @media (max-width: 430px) {\n .glass-card {\n padding: 20px;\n }\n \n .feature-card {\n padding: 18px;\n }\n \n .feature-icon {\n width: 50px;\n height: 50px;\n font-size: 22px;\n }\n \n .page-container {\n padding: 15px;\n }\n }\n \n @media (max-width: 375px) {\n .app-title {\n font-size: 24px;\n }\n \n .app-subtitle {\n font-size: 14px;\n }\n \n .feature-content h3 {\n font-size: 16px;\n }\n \n .feature-content p {\n font-size: 13px;\n }\n \n .page-title {\n font-size: 20px;\n }\n }\n \n /* 动画效果 */\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n .animate-fade-in {\n animation: fadeInUp 0.6s ease forwards;\n }\n \n .delay-1 { animation-delay: 0.1s; }\n .delay-2 { animation-delay: 0.2s; }\n .delay-3 { animation-delay: 0.3s; }\n .delay-4 { animation-delay: 0.4s; }\n .delay-5 { animation-delay: 0.5s; }\n .delay-6 { animation-delay: 0.6s; }\n </style>\n</head>\n<body class=\"light-mode\">\n <!-- 背景装饰元素 -->\n <div class=\"bg-decoration\">\n <div class=\"bg-circle circle-1\"></div>\n <div class=\"bg-circle circle-2\"></div>\n <div class=\"bg-circle circle-3\"></div>\n </div>\n \n <!-- 主题切换按钮 -->\n <div class=\"theme-toggle\" id=\"themeToggle\">\n <i class=\"fas fa-moon\"></i>\n </div>\n \n <!-- 页面容器 -->\n <div class=\"page-container\">\n <!-- 首页 -->\n <div class=\"page active\" id=\"homePage\">\n <!-- 应用标题 -->\n <div class=\"glass-card mb-8 animate-fade-in\">\n <h1 class=\"app-title\">区区三万天</h1>\n <p class=\"app-subtitle\">人生时间可视化 · 温柔记录每一刻</p>\n \n <div class=\"text-center mt-4 text-sm opacity-80\">\n <i class=\"fas fa-heart mr-2\" style=\"color: #ff9a9e;\"></i>\n 生命是一场温柔旅行，不必焦虑，只需珍惜\n </div>\n </div>\n \n <!-- 功能卡片网格 -->\n <div class=\"features-grid\">\n <!-- 三万格生命日历 -->\n <div class=\"glass-card feature-card animate-fade-in delay-1\" data-page=\"calendarPage\">\n <div class=\"feature-icon\" style=\"background: linear-gradient(135deg, #ff9a9e, #fad0c4);\">\n <i class=\"fas fa-calendar-alt\"></i>\n </div>\n <div class=\"feature-content\">\n <h3>三万格生命日历</h3>\n <p>将人生三万天视觉化为网格，每一天都是一个小格子，温柔记录已过和剩余时光</p>\n </div>\n </div>\n \n <!-- 人生年轮 -->\n <div class=\"glass-card feature-card animate-fade-in delay-2\" data-page=\"treePage\">\n <div class=\"feature-icon\" style=\"background: linear-gradient(135deg, #a8e6cf, #d4f1f9);\">\n <i class=\"fas fa-tree\"></i>\n </div>\n <div class=\"feature-content\">\n <h3>人生年轮</h3>\n <p>像树木年轮一样记录人生轨迹，每一圈代表一年，标记重要时刻与成长</p>\n </div>\n </div>\n \n <!-- 阶段倒计时 -->\n <div class=\"glass-card feature-card animate-fade-in delay-3\" data-page=\"countdownPage\">\n <div class=\"feature-icon\" style=\"background: linear-gradient(135deg, #b5ead7, #c7ceea);\">\n <i class=\"fas fa-hourglass-half\"></i>\n </div>\n <div class=\"feature-content\">\n <h3>阶段倒计时</h3>\n <p>为人生重要阶段设置倒计时：职业生涯、学习成长、家庭计划等</p>\n </div>\n </div>\n \n <!-- 反向愿望清单 -->\n <div class=\"glass-card feature-card animate-fade-in delay-4\" data-page=\"wishPage\">\n <div class=\"feature-icon\" style=\"background: linear-gradient(135deg, #ffd3b6, #ffaaa5);\">\n <i class=\"fas fa-star\"></i>\n </div>\n <div class=\"feature-content\">\n <h3>反向愿望清单</h3>\n <p>记录已经实现的幸福小事，而非未完成的愿望，培养感恩之心</p>\n </div>\n </div>\n \n <!-- 重要之人陪伴倒计时 -->\n <div class=\"glass-card feature-card animate-fade-in delay-5\" data-page=\"peoplePage\">\n <div class=\"feature-icon\" style=\"background: linear-gradient(135deg, #a8c0ff, #ffd3b6);\">\n <i class=\"fas fa-users\"></i>\n </div>\n <div class=\"feature-content\">\n <h3>重要之人陪伴倒计时</h3>\n <p>计算与父母、伴侣、挚友等重要之人的预计陪伴时间，珍惜当下</p>\n </div>\n </div>\n \n <!-- AI 人生总结 -->\n <div class=\"glass-card feature-card animate-fade-in delay-6\" data-page=\"aiPage\">\n <div class=\"feature-icon\" style=\"background: linear-gradient(135deg, #b19cd9, #ffb6c1);\">\n <i class=\"fas fa-robot\"></i>\n </div>\n <div class=\"feature-content\">\n <h3>AI 人生总结</h3>\n <p>一键生成指定时间段的人生复盘，温柔回顾成长轨迹与珍贵时刻</p>\n </div>\n </div>\n </div>\n \n <!-- 当前时间显示 -->\n <div class=\"current-time glass-card mt-8\">\n <i class=\"fas fa-clock mr-2\"></i>\n 此刻时间：<span id=\"currentTime\">2026年4月10日 10:25</span>\n <div class=\"text-xs mt-2 opacity-70\">每一天都是独一无二的礼物</div>\n </div>\n </div>\n \n <!-- 三万格生命日历页面 -->\n <div class=\"page\" id=\"calendarPage\">\n <div class=\"nav-bar\">\n <div class=\"back-btn\" data-back=\"homePage\">\n <i class=\"fas fa-arrow-left\"></i>\n </div>\n <h1 class=\"page-title\">三万格生命日历</h1>\n </div>\n \n <div class=\"page-content\">\n <div class=\"glass-card detail-card\">\n <h2>你的生命可视化日历</h2>\n <p>将人生约30000天（约82年）视觉化为一个个小格子，每一天都是生命拼图中不可或缺的一块。</p>\n \n <div class=\"visualization\">\n <i class=\"fas fa-calendar-alt\"></i>\n </div>\n \n <p><strong>已过天数：</strong> <span id=\"daysLived\">...</span> 天</p>\n <p><strong>剩余天数：</strong> <span id=\"daysLeft\">...</span> 天</p>\n <p><strong>完成度：</strong> <span id=\"completionRate\">...</span>%</p>\n \n <button class=\"action-btn\">查看完整日历</button>\n </div>\n </div>\n </div>\n \n <!-- 人生年轮页面 -->\n <div class=\"page\" id=\"treePage\">\n <div class=\"nav-bar\">\n <div class=\"back-btn\" data-back=\"homePage\">\n <i class=\"fas fa-arrow-left\"></i>\n </div>\n <h1 class=\"page-title\">人生年轮</h1>\n </div>\n \n <div class=\"page-content\">\n <div class=\"glass-card detail-card\">\n <h2>你的人生轨迹图</h2>\n <p>像树木年轮一样记录成长，每一圈代表一年，标记那些改变你的重要时刻。</p>\n \n <div class=\"visualization\">\n <i class=\"fas fa-tree\"></i>\n </div>\n \n <p><strong>当前年龄：</strong> <span id=\"currentAge\">...</span> 岁</p>\n <p><strong>年轮圈数：</strong> <span id=\"treeRings\">...</span> 圈</p>\n <p><strong>标记时刻：</strong> 已记录 <span id=\"markedMoments\">12</span> 个重要时刻</p>\n \n <button class=\"action-btn\">添加重要时刻</button>\n </div>\n </div>\n </div>\n \n <!-- 阶段倒计时页面 -->\n <div class=\"page\" id=\"countdownPage\">\n <div class=\"nav-bar\">\n <div class=\"back-btn\" data-back=\"homePage\">\n <i class=\"fas fa-arrow-left\"></i>\n </div>\n <h1 class=\"page-title\">阶段倒计时</h1>\n </div>\n \n <div class=\"page-content\">\n <div class=\"glass-card detail-card\">\n <h2>人生阶段规划</h2>\n <p>为不同人生阶段设置温柔的提醒，帮助你有意识地为重要目标做准备。</p>\n \n <div class=\"visualization\">\n <i class=\"fas fa-hourglass-half\"></i>\n </div>\n \n <p><strong>职业生涯发展：</strong> 剩余 <span id=\"careerDays\">...</span> 天</p>\n <p><strong>学习成长计划：</strong> 剩余 <span id=\"studyDays\">...</span> 天</p>\n <p><strong>家庭生活目标：</strong> 剩余 <span id=\"familyDays\">...</span> 天</p>\n \n <button class=\"action-btn\">添加新阶段</button>\n </div>\n </div>\n </div>\n \n <!-- 反向愿望清单页面 -->\n <div class=\"page\" id=\"wishPage\">\n <div class=\"nav-bar\">\n <div class=\"back-btn\" data-back=\"homePage\">\n <i class=\"fas fa-arrow-left\"></i>\n </div>\n <h1 class=\"page-title\">反向愿望清单</h1>\n </div>\n \n <div class=\"page-content\">\n <div class=\"glass-card detail-card\">\n <h2>已实现的幸福小事</h2>\n <p>记录那些已经发生的美好，培养感恩之心，发现生活中的小确幸。</p>\n \n <div class=\"visualization\">\n <i class=\"fas fa-star\"></i>\n </div>\n \n <p><strong>本周幸福时刻：</strong> 早晨的阳光、朋友的问候、一杯热茶</p>\n <p><strong>本月感恩记录：</strong> 已完成 <span id=\"gratefulItems\">8</span> 项</p>\n <p><strong>年度小成就：</strong> 学会了新技能、认识了新朋友、读完5本书</p>\n \n <button class=\"action-btn\">记录新幸福</button>\n </div>\n </div>\n </div>\n \n <!-- 重要之人陪伴倒计时页面 -->\n <div class=\"page\" id=\"peoplePage\">\n <div class=\"nav-bar\">\n <div class=\"back-btn\" data-back=\"homePage\">\n <i class=\"fas fa-arrow-left\"></i>\n </div>\n <h1 class=\"page-title\">重要之人陪伴</h1>\n </div>\n \n <div class=\"page-content\">\n <div class=\"glass-card detail-card\">\n <h2>珍惜与重要之人的时光</h2>\n <p>计算与父母、伴侣、挚友等重要之人的预计陪伴时间，提醒自己珍惜当下每一刻。</p>\n \n <div class=\"visualization\">\n <i class=\"fas fa-users\"></i>\n </div>\n \n <p><strong>父母陪伴时间：</strong> 预计剩余 <span id=\"parentsDays\">...</span> 天</p>\n <p><strong>伴侣相处时间：</strong> 预计剩余 <span id=\"partnerDays\">...</span> 天</p>\n <p><strong>挚友相聚时间：</strong> 预计剩余 <span id=\"friendsDays\">...</span> 天</p>\n \n <button class=\"action-btn\">联系重要之人</button>\n </div>\n </div>\n </div>\n \n <!-- AI 人生总结页面 -->\n <div class=\"page\" id=\"aiPage\">\n <div class=\"nav-bar\">\n <div class=\"back-btn\" data-back=\"homePage\">\n <i class=\"fas fa-arrow-left\"></i>\n </div>\n <h1 class=\"page-title\">AI 人生总结</h1>\n </div>\n \n <div class=\"page-content\">\n <div class=\"glass-card detail-card\">\n <h2>温柔的人生复盘</h2>\n <p>选择时间段，让AI为你生成温暖的人生总结，回顾成长轨迹与珍贵时刻。</p>\n \n <div class=\"visualization\">\n <i class=\"fas fa-robot\"></i>\n </div>\n \n <p><strong>可总结时间段：</strong></p>\n <ul style=\"padding-left: 20px; margin-bottom: 20px;\">\n <li>过去一周的温柔时刻</li>\n <li>过去一个月的成长轨迹</li>\n <li>过去一年的生活变化</li>\n <li>自定义任意时间段</li>\n </ul>\n \n <button class=\"action-btn\">生成人生总结</button>\n </div>\n </div>\n </div>\n </div>\n \n <script>\n // 页面导航功能\n const pages = document.querySelectorAll('.page');\n const featureCards = document.querySelectorAll('.glass-card[data-page]');\n const backButtons = document.querySelectorAll('.back-btn');\n \n // 功能卡片点击事件\n featureCards.forEach(card => {\n card.addEventListener('click', function() {\n const targetPageId = this.getAttribute('data-page');\n navigateToPage(targetPageId);\n });\n });\n \n // 返回按钮点击事件\n backButtons.forEach(button => {\n button.addEventListener('click', function() {\n const targetPageId = this.getAttribute('data-back');\n navigateToPage(targetPageId);\n });\n });\n \n // 页面导航函数\n function navigateToPage(pageId) {\n // 隐藏所有页面\n pages.forEach(page => {\n page.classList.remove('active');\n });\n \n // 显示目标页面\n const targetPage = document.getElementById(pageId);\n if (targetPage) {\n targetPage.classList.add('active');\n // 更新页面数据\n updatePageData(pageId);\n }\n }\n \n // 更新页面数据\n function updatePageData(pageId) {\n const now = new Date();\n const birthDate = new Date(1995, 5, 15); // 示例出生日期：1995年6月15日\n const daysLived = Math.floor((now - birthDate) / (1000 * 60 * 60 * 24));\n const totalDays = 30000;\n const daysLeft = totalDays - daysLived;\n const completionRate = ((daysLived / totalDays) * 100).toFixed(1);\n const currentAge = Math.floor(daysLived / 365.25);\n \n switch(pageId) {\n case 'calendarPage':\n document.getElementById('daysLived').textContent = daysLived.toLocaleString();\n document.getElementById('daysLeft').textContent = daysLeft.toLocaleString();\n document.getElementById('completionRate').textContent = completionRate;\n break;\n case 'treePage':\n document.getElementById('currentAge').textContent = currentAge;\n document.getElementById('treeRings').textContent = currentAge;\n break;\n case 'countdownPage':\n // 示例倒计时数据\n const careerTarget = new Date(now.getFullYear() + 5, now.getMonth(), now.getDate());\n const studyTarget = new Date(now.getFullYear() + 1, now.getMonth(), now.getDate());\n const familyTarget = new Date(now.getFullYear() + 3, now.getMonth(), now.getDate());\n \n const careerDays = Math.floor((careerTarget - now) / (1000 * 60 * 60 * 24));\n const studyDays = Math.floor((studyTarget - now) / (1000 * 60 * 60 * 24));\n const familyDays = Math.floor((familyTarget - now) / (1000 * 60 * 60 * 24));\n \n document.getElementById('careerDays').textContent = careerDays;\n document.getElementById('studyDays').textContent = studyDays;\n document.getElementById('familyDays').textContent = familyDays;\n break;\n case 'peoplePage':\n // 示例陪伴时间数据\n const parentsTarget = new Date(now.getFullYear() + 20, now.getMonth(), now.getDate());\n const partnerTarget = new Date(now.getFullYear() + 50, now.getMonth(), now.getDate());\n const friendsTarget = new Date(now.getFullYear() + 2, now.getMonth(), now.getDate());\n \n const parentsDays = Math.floor((parentsTarget - now) / (1000 * 60 * 60 * 24));\n const partnerDays = Math.floor((partnerTarget - now) / (1000 * 60 * 60 * 24));\n const friendsDays = Math.floor((friendsTarget - now) / (1000 * 60 * 60 * 24));\n \n document.getElementById('parentsDays').textContent = parentsDays;\n document.getElementById('partnerDays').textContent = partnerDays;\n document.getElementById('friendsDays').textContent = friendsDays;\n break;\n }\n }\n \n // 主题切换功能\n const themeToggle = document.getElementById('themeToggle');\n const body = document.body;\n const themeIcon = themeToggle.querySelector('i');\n \n const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');\n const savedTheme = localStorage.getItem('theme');\n \n if (savedTheme === 'dark' || (!savedTheme && prefersDarkScheme.matches)) {\n enableDarkMode();\n }\n \n themeToggle.addEventListener('click', () => {\n if (body.classList.contains('dark-mode')) {\n disableDarkMode();\n } else {\n enableDarkMode();\n }\n });\n \n function enableDarkMode() {\n body.classList.remove('light-mode');\n body.classList.add('dark-mode');\n themeIcon.classList.remove('fa-moon');\n themeIcon.classList.add('fa-sun');\n localStorage.setItem('theme', 'dark');\n }\n \n function disableDarkMode() {\n body.classList.remove('dark-mode');\n body.classList.add('light-mode');\n themeIcon.classList.remove('fa-sun');\n themeIcon.classList.add('fa-moon');\n localStorage.setItem('theme', 'light');\n }\n \n // 更新当前时间\n function updateCurrentTime() {\n const now = new Date();\n const options = { \n year: 'numeric', \n month: 'long', \n day: 'numeric',\n hour: '2-digit',\n minute: '2-digit'\n };\n const timeString = now.toLocaleDateString('zh-CN', options);\n document.getElementById('currentTime').textContent = timeString;\n }\n \n // 初始更新时间\n updateCurrentTime();\n \n // 每分钟更新时间\n setInterval(updateCurrentTime, 60000);\n \n // 系统主题变化监听\n prefersDarkScheme.addEventListener('change', (e) => {\n if (!localStorage.getItem('theme')) {\n if (e.matches) {\n enableDarkMode();\n } else {\n disableDarkMode();\n }\n }\n });\n \n // 初始数据加载\n updatePageData('calendarPage');\n </script>\n</body>\n</html>"},
"next": ["添加数据可视化图表","实现用户数据存储","增加个性化设置","优化动画过渡效果","添加分享功能"],
"breakpoint": "xs"
}```