diff --git a/m05-user-center/index.html b/m05-user-center/index.html new file mode 100644 index 00000000..933deada --- /dev/null +++ b/m05-user-center/index.html @@ -0,0 +1,45 @@ + + + + + + HoloLake · 用户中心 + + + +
+ + +
+
🧑‍💻
+ +
+ +
+
👤个人资料
+
🧠我的记忆
+
🤖AI伙伴
+
📊使用统计
+
🔐安全设置
+
💬反馈建议
+
+ + +
+ + + diff --git a/m05-user-center/script.js b/m05-user-center/script.js new file mode 100644 index 00000000..7ed6938c --- /dev/null +++ b/m05-user-center/script.js @@ -0,0 +1,179 @@ +// HoloLake 用户中心 · 交互脚本 + +// 六个菜单的详情内容 +const menuDetails = { + '个人资料': { + icon: '👤', + title: '个人资料', + content: ` +
+ + 光湖用户 +
+
+ + HL-000001 +
+
+ + user@hololake.com +
+
+ + 2026-03-01 +
+
+ + 初级探索者 +
+ ` + }, + '我的记忆': { + icon: '🧠', + title: '我的记忆', + content: ` +
+
+ 128 + 对话次数 +
+
+ 3 + 记忆主题 +
+
+ 15 + 收藏片段 +
+
+

✨ 你的记忆正在慢慢生长

+ ` + }, + 'AI伙伴': { + icon: '🤖', + title: 'AI伙伴', + content: ` +
+
🧑‍💻
+
+
知秋宝宝
+
🟢 在线
+
你的开发引导伙伴
+
+
+
+ 陪伴时长: 3天 + 引导环节: 2个 + 默契度: 98% +
+ ` + }, + '使用统计': { + icon: '📊', + title: '使用统计', + content: ` +
+ 本月对话 +
+ 65次 +
+
+ 记忆使用 +
+ 30MB +
+
+ 云盘空间 +
+ 1GB/10GB +
+ ` + }, + '安全设置': { + icon: '🔐', + title: '安全设置', + content: ` +
+ 修改密码 + › +
+
+ 两步验证 + 已开启 +
+
+ 登录设备管理 + › +
+
+ 数据导出 + › +
+ ` + }, + '反馈建议': { + icon: '💬', + title: '反馈建议', + content: ` +
+ + + +
+
+

💡 你的每一条反馈都会被认真阅读

+

📧 也可以发邮件到 feedback@hololake.com

+
+ ` + } +}; + +// 页面加载完成后绑定事件 +document.addEventListener('DOMContentLoaded', function() { + const menuItems = document.querySelectorAll('.menu-item'); + + menuItems.forEach(function(item) { + item.addEventListener('click', function() { + const menuText = item.querySelector('.menu-text').textContent; + const detail = menuDetails[menuText]; + if (detail) { + showDetail(detail); + } + }); + }); +}); + +// 显示详情页 +function showDetail(detail) { + // 创建详情页容器 + const overlay = document.createElement('div'); + overlay.className = 'detail-overlay'; + overlay.innerHTML = ` +
+
+ + ${detail.icon} ${detail.title} +
+
+ ${detail.content} +
+
+ `; + document.body.appendChild(overlay); + + // 添加动画 + requestAnimationFrame(function() { + overlay.classList.add('show'); + }); +} + +// 关闭详情页 +function closeDetail() { + const overlay = document.querySelector('.detail-overlay'); + if (overlay) { + overlay.classList.remove('show'); + setTimeout(function() { + overlay.remove(); + }, 300); + } +} diff --git a/m05-user-center/style.css b/m05-user-center/style.css new file mode 100644 index 00000000..7e01169c --- /dev/null +++ b/m05-user-center/style.css @@ -0,0 +1,400 @@ +/* HoloLake 用户中心 · 样式表 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; + background: linear-gradient(135deg, #0a1628 0%, #1a2a4a 50%, #0d1f3c 100%); + color: #e0e6ed; + min-height: 100vh; +} + +.container { + max-width: 480px; + margin: 0 auto; + padding: 20px; +} + +/* 顶部导航 */ +.top-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 0; + border-bottom: 1px solid #2a3a5a; + margin-bottom: 32px; +} + +.logo { + font-size: 20px; + font-weight: 600; + background: linear-gradient(135deg, #7aa3ff, #b47aff); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.nav-links a { + color: #8899aa; + text-decoration: none; + margin-left: 20px; + font-size: 14px; + transition: color 0.2s; +} + +.nav-links a.active, +.nav-links a:hover { + color: #7aa3ff; +} + +/* 用户信息卡片 */ +.profile-card { + background: rgba(255, 255, 255, 0.05); + border-radius: 24px; + padding: 24px; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + margin-bottom: 32px; + display: flex; + align-items: center; + gap: 20px; +} + +.avatar { + width: 72px; + height: 72px; + background: linear-gradient(135deg, #2a3a5a, #1a2a4a); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 40px; + border: 2px solid #7aa3ff; +} + +.user-info h1 { + font-size: 24px; + font-weight: 600; + margin-bottom: 4px; +} + +.user-id { + color: #8899aa; + font-size: 14px; +} + +.user-status { + font-size: 13px; + margin-top: 4px; +} + +/* 功能区网格 */ +.menu-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 16px; + margin-bottom: 40px; +} + +.menu-item { + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.05); + border-radius: 20px; + padding: 20px 8px; + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + transition: all 0.2s; + cursor: default; +} + +.menu-item:hover { + background: rgba(255, 255, 255, 0.08); + border-color: rgba(122, 163, 255, 0.3); + transform: translateY(-2px); +} + +.menu-icon { + font-size: 32px; + display: block; + margin-bottom: 8px; +} + +.menu-text { + font-size: 13px; + color: #b0bec5; +} + +/* 底部 */ +.footer { + text-align: center; + padding: 32px 0; + color: #556677; + font-size: 12px; + line-height: 1.8; +} + +/* ===== 详情页样式 ===== */ +.detail-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(10, 22, 40, 0.95); + backdrop-filter: blur(10px); + z-index: 1000; + opacity: 0; + transition: opacity 0.3s ease; + overflow-y: auto; +} + +.detail-overlay.show { + opacity: 1; +} + +/* 详情页容器 */ +.detail-page { + max-width: 480px; + margin: 0 auto; + padding: 0 20px; + height: 100vh; + overflow-y: auto; +} + +/* 详情页头部 */ +.detail-header { + display: flex; + align-items: center; + padding: 16px 0; + border-bottom: 1px solid rgba(255,255,255,0.1); + gap: 12px; +} + +.back-btn { + background: none; + border: 1px solid rgba(255,255,255,0.2); + color: #4fc3f7; + padding: 6px 12px; + border-radius: 8px; + cursor: pointer; + font-size: 14px; +} + +.back-btn:hover { + background: rgba(79, 195, 247, 0.1); +} + +.detail-title { + font-size: 18px; + font-weight: 600; + color: #e0e6ed; +} + +/* 详情页内容 */ +.detail-content { + padding: 24px 0; +} + +/* 个人资料 */ +.detail-item { + display: flex; + padding: 16px; + background: rgba(255,255,255,0.03); + border-radius: 12px; + margin-bottom: 8px; +} + +.detail-item label { + width: 80px; + color: #8899aa; + font-size: 14px; +} + +.detail-item span { + color: #e0e6ed; + font-size: 14px; +} + +/* 我的记忆 */ +.memory-stats { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 12px; + margin-bottom: 20px; +} + +.stat-card { + background: rgba(255,255,255,0.03); + border-radius: 12px; + padding: 16px 8px; + text-align: center; + border: 1px solid rgba(255,255,255,0.05); +} + +.stat-num { + display: block; + font-size: 24px; + font-weight: 600; + color: #7aa3ff; + margin-bottom: 4px; +} + +.stat-label { + font-size: 12px; + color: #8899aa; +} + +.memory-hint { + color: #8899aa; + font-size: 13px; + text-align: center; + padding: 16px; + background: rgba(255,255,255,0.03); + border-radius: 12px; +} + +/* AI伙伴 */ +.partner-card { + display: flex; + align-items: center; + gap: 16px; + padding: 24px 16px; + background: rgba(79, 195, 247, 0.08); + border-radius: 16px; + border: 1px solid rgba(79, 195, 247, 0.15); + margin-bottom: 16px; +} + +.partner-avatar { + font-size: 48px; +} + +.partner-name { + font-size: 20px; + color: #e0e6ed; + margin-bottom: 4px; +} + +.partner-status { + font-size: 13px; + color: #4fc3f7; + margin-bottom: 4px; +} + +.partner-desc { + font-size: 12px; + color: #8899aa; +} + +.partner-stats { + display: flex; + justify-content: space-around; + padding: 16px; + color: #8899aa; + font-size: 13px; +} + +/* 使用统计 */ +.usage-item { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 20px; +} + +.usage-label { + width: 70px; + color: #8899aa; + font-size: 13px; +} + +.usage-bar { + flex: 1; + height: 8px; + background: rgba(255,255,255,0.1); + border-radius: 4px; + overflow: hidden; +} + +.usage-fill { + height: 100%; + background: linear-gradient(90deg, #7aa3ff, #b47aff); + border-radius: 4px; +} + +.usage-num { + color: #e0e6ed; + font-size: 13px; + min-width: 60px; + text-align: right; +} + +/* 安全设置 */ +.setting-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 18px 0; + border-bottom: 1px solid rgba(255,255,255,0.06); + cursor: pointer; +} + +.setting-item span:first-child { + color: #e0e6ed; + font-size: 15px; +} + +.setting-arrow { + color: #556677; + font-size: 20px; +} + +.setting-status { + font-size: 13px; + padding: 3px 10px; + border-radius: 12px; +} + +.setting-status.on { + background: rgba(76, 175, 80, 0.15); + color: #66bb6a; +} + +/* 反馈建议 */ +.feedback-types { + display: flex; + gap: 8px; + margin-bottom: 20px; +} + +.feedback-btn { + padding: 8px 16px; + border-radius: 20px; + border: 1px solid rgba(255,255,255,0.15); + background: transparent; + color: #8899aa; + font-size: 13px; + cursor: pointer; +} + +.feedback-btn.active { + background: rgba(79, 195, 247, 0.15); + border-color: #4fc3f7; + color: #4fc3f7; +} + +.feedback-area { + background: rgba(255,255,255,0.03); + border-radius: 12px; + padding: 24px 16px; +} + +.feedback-placeholder { + color: #8899aa; + font-size: 13px; + margin-bottom: 12px; +}