优化调整
This commit is contained in:
@@ -0,0 +1,153 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN" class="scroll-smooth">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>用户中心 - 开心APP</title>
|
||||
<link rel="icon" href="https://r2.flowith.net/files/o/1752574406770-thoughtful_kaikai_character_generation_index_1@1024x1024.png">
|
||||
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body class="bg-light-gray font-sans text-text-dark">
|
||||
|
||||
<div id="app-container" class="antialiased">
|
||||
<!-- App Header -->
|
||||
<header class="fixed top-0 left-0 right-0 z-40 bg-white/90 backdrop-blur-md border-b border-gray-200/80">
|
||||
<div class="container mx-auto px-4 h-16 flex items-center justify-between relative">
|
||||
<a href="javascript:history.back()" class="text-text-medium hover:text-tech-blue transition-colors">
|
||||
<i data-lucide="chevron-left" class="w-6 h-6"></i>
|
||||
</a>
|
||||
<h1 class="text-lg font-semibold text-text-dark absolute left-1/2 -translate-x-1/2">用户中心</h1>
|
||||
<a href="index.html" class="text-text-medium hover:text-tech-blue transition-colors">
|
||||
<i data-lucide="home" class="w-6 h-6"></i>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="pt-20 pb-8 bg-light-gray min-h-screen">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="max-w-4xl mx-auto space-y-10">
|
||||
<!-- 个人资料管理 -->
|
||||
<section class="bg-white p-8 rounded-2xl shadow-lg border border-gray-200/50 animate-fade-in-up" style="animation-delay: 0.2s;">
|
||||
<div class="flex items-center mb-6 space-x-3">
|
||||
<i data-lucide="user-cog" class="w-7 h-7 text-tech-blue"></i>
|
||||
<h2 class="text-2xl font-bold text-text-dark">个人资料管理</h2>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center space-x-6">
|
||||
<img src="https://r2.flowith.net/files/o/1752574572161-kaikai_character_energetic_animation_index_2@1024x1024.png" alt="User Avatar" class="w-20 h-20 rounded-full object-cover border-4 border-white shadow">
|
||||
<button class="text-sm font-semibold text-tech-blue hover:underline">更换头像</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-text-medium mb-1">昵称</label>
|
||||
<input type="text" value="小明" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-tech-blue focus:border-transparent transition">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-text-medium mb-1">邮箱</label>
|
||||
<input type="email" value="user@example.com" disabled class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-100 text-text-medium cursor-not-allowed">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-text-medium mb-1">MBTI</label>
|
||||
<input type="text" placeholder="例如: INFP" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-tech-blue focus:border-transparent transition">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-text-medium mb-1">星座</label>
|
||||
<input type="text" placeholder="例如: 双子座" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-tech-blue focus:border-transparent transition">
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 border-t border-gray-200 flex justify-end">
|
||||
<button class="bg-tech-blue text-white px-6 py-2.5 rounded-lg font-semibold hover:bg-blue-600 transition-all duration-300 transform hover:scale-105">保存更改</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 会员订阅 -->
|
||||
<section class="bg-white p-8 rounded-2xl shadow-lg border border-gray-200/50 animate-fade-in-up" style="animation-delay: 0.4s;">
|
||||
<div class="flex items-center mb-6 space-x-3">
|
||||
<i data-lucide="gem" class="w-7 h-7 text-warm-orange"></i>
|
||||
<h2 class="text-2xl font-bold text-text-dark">会员订阅</h2>
|
||||
</div>
|
||||
<div class="flex items-center justify-between bg-light-gray p-6 rounded-lg">
|
||||
<div>
|
||||
<p class="text-text-medium">当前状态</p>
|
||||
<p class="text-xl font-bold text-tech-blue">免费会员</p>
|
||||
</div>
|
||||
<button class="bg-warm-orange text-white px-6 py-2.5 rounded-lg font-semibold hover:bg-orange-600 transition-all duration-300 transform hover:scale-105">升级到 Pro</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- AI聊天偏好设置 -->
|
||||
<section class="bg-white p-8 rounded-2xl shadow-lg border border-gray-200/50 animate-fade-in-up" style="animation-delay: 0.6s;">
|
||||
<div class="flex items-center mb-6 space-x-3">
|
||||
<i data-lucide="bot" class="w-7 h-7 text-green-500"></i>
|
||||
<h2 class="text-2xl font-bold text-text-dark">AI 聊天偏好设置</h2>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h4 class="font-semibold text-text-dark">开启每日心情总结</h4>
|
||||
<p class="text-sm text-text-medium">开开会在每天晚上为你发送一份心情总结。</p>
|
||||
</div>
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<div class="relative">
|
||||
<input type="checkbox" class="sr-only toggle-checkbox" checked>
|
||||
<div class="block bg-gray-200 w-14 h-8 rounded-full toggle-label transition"></div>
|
||||
<div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h4 class="font-semibold text-text-dark">接收主动问候</h4>
|
||||
<p class="text-sm text-text-medium">允许开开在你长时间未上线时主动关心你。</p>
|
||||
</div>
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<div class="relative">
|
||||
<input type="checkbox" class="sr-only toggle-checkbox">
|
||||
<div class="block bg-gray-200 w-14 h-8 rounded-full toggle-label transition"></div>
|
||||
<div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-text-dark mb-2">对话风格</h4>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<label class="flex-1 flex items-center p-3 border rounded-lg cursor-pointer hover:bg-light-gray transition">
|
||||
<input type="radio" name="style" class="form-radio text-tech-blue" checked>
|
||||
<span class="ml-3 text-text-dark">温柔鼓励</span>
|
||||
</label>
|
||||
<label class="flex-1 flex items-center p-3 border rounded-lg cursor-pointer hover:bg-light-gray transition">
|
||||
<input type="radio" name="style" class="form-radio text-tech-blue">
|
||||
<span class="ml-3 text-text-dark">幽默风趣</span>
|
||||
</label>
|
||||
<label class="flex-1 flex items-center p-3 border rounded-lg cursor-pointer hover:bg-light-gray transition">
|
||||
<input type="radio" name="style" class="form-radio text-tech-blue">
|
||||
<span class="ml-3 text-text-dark">深度思辨</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="module" src="settings.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
if (typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user