nepiedg
178 lines
10 KiB
HTML
178 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html class="dark" lang="zh-CN"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>个人中心</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"primary": "#2bee79",
|
|
"background-light": "#f6f8f7",
|
|
"background-dark": "#102217",
|
|
"surface-dark": "#182F22",
|
|
},
|
|
fontFamily: {
|
|
"display": ["Manrope", "sans-serif"]
|
|
},
|
|
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #2bee79;
|
|
border-radius: 20px;
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background-light dark:bg-background-dark font-display min-h-screen flex flex-col items-center justify-center">
|
|
<div class="relative flex h-full min-h-screen w-full max-w-md flex-col bg-background-light dark:bg-background-dark overflow-x-hidden shadow-xl mx-auto border-x border-white/5">
|
|
<div class="flex items-center px-4 py-3 justify-between sticky top-0 z-10 bg-background-light/95 dark:bg-background-dark/95 backdrop-blur-md">
|
|
<div class="text-neutral-900 dark:text-white flex size-12 shrink-0 items-center justify-start cursor-pointer transition-colors hover:text-primary">
|
|
<span class="material-symbols-outlined text-[28px]">arrow_back</span>
|
|
</div>
|
|
<h2 class="text-neutral-900 dark:text-white text-lg font-bold leading-tight tracking-tight flex-1 text-center">个人中心</h2>
|
|
<div class="flex w-12 items-center justify-end cursor-pointer group">
|
|
<p class="text-primary text-base font-bold leading-normal tracking-wide shrink-0 group-hover:underline">编辑</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col items-center pt-2 pb-8 px-4">
|
|
<div class="relative mb-4 group cursor-pointer">
|
|
<div class="bg-center bg-no-repeat bg-cover rounded-full h-28 w-28 ring-4 ring-primary/20 group-hover:ring-primary/40 transition-all duration-300" data-alt="User avatar profile picture showing a smiling person" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDRcwO-G-6ngTwN8RGruCqWHpKLri2LWwDM9ctJFxkXhcZkB8lzQADi5lnMOyHarcYK52qxv4pF1y0M7TWi3t9BSwVpdMdwcXv6vxwzxf1em-a9jVjBhVoCo3zVZuHvUvFELAmTEzB_uyZ9Phj6N9NZzGcwr_CMuhsn-KoxMFdczs5S1HHRXyCT2BJfXOziwaV7amfAbTrfvlDdursp_FkbNh1SvCh9Ru8L8U9nMz0tWg_qIvM--leuSJwbdLg0xdpVZ-tS0Z7z_RLF");'>
|
|
</div>
|
|
<div class="absolute bottom-0 right-0 bg-surface-dark p-1.5 rounded-full border border-primary/30 shadow-lg">
|
|
<span class="material-symbols-outlined text-primary text-[18px] block">photo_camera</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center gap-1">
|
|
<h1 class="text-neutral-900 dark:text-white text-2xl font-extrabold leading-tight tracking-tight text-center">Alex Doe</h1>
|
|
<div class="flex items-center gap-2 mt-1">
|
|
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-bold border border-primary/20">
|
|
目标：12月1日戒烟 🎯
|
|
</span>
|
|
</div>
|
|
<p class="text-neutral-500 dark:text-neutral-400 text-sm font-medium mt-1">已连续戒烟 12 天 🔥</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 w-full px-4 pb-10 space-y-6">
|
|
<section>
|
|
<h3 class="text-neutral-500 dark:text-neutral-400 text-xs font-bold uppercase tracking-wider px-2 mb-2 ml-1">我的进程</h3>
|
|
<div class="bg-white dark:bg-surface-dark rounded-xl overflow-hidden shadow-sm border border-neutral-200 dark:border-white/5">
|
|
<div class="group relative flex items-center gap-4 p-4 cursor-pointer hover:bg-neutral-50 dark:hover:bg-white/5 transition-colors border-b border-neutral-100 dark:border-white/5">
|
|
<div class="flex items-center justify-center rounded-lg bg-primary/20 text-primary shrink-0 size-10">
|
|
<span class="material-symbols-outlined">track_changes</span>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-neutral-900 dark:text-white text-base font-semibold leading-normal truncate">目标设定</p>
|
|
<p class="text-neutral-500 dark:text-neutral-400 text-xs font-normal truncate">调整每日限额与戒烟日期</p>
|
|
</div>
|
|
<span class="material-symbols-outlined text-neutral-400 dark:text-neutral-500">chevron_right</span>
|
|
</div>
|
|
<div class="group relative flex items-center gap-4 p-4 cursor-pointer hover:bg-neutral-50 dark:hover:bg-white/5 transition-colors">
|
|
<div class="flex items-center justify-center rounded-lg bg-indigo-500/20 text-indigo-400 shrink-0 size-10">
|
|
<span class="material-symbols-outlined">psychology</span>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-neutral-900 dark:text-white text-base font-semibold leading-normal truncate">AI 计划调整</p>
|
|
<p class="text-neutral-500 dark:text-neutral-400 text-xs font-normal truncate">个性化辅导风格</p>
|
|
</div>
|
|
<span class="material-symbols-outlined text-neutral-400 dark:text-neutral-500">chevron_right</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<h3 class="text-neutral-500 dark:text-neutral-400 text-xs font-bold uppercase tracking-wider px-2 mb-2 ml-1">偏好设置</h3>
|
|
<div class="bg-white dark:bg-surface-dark rounded-xl overflow-hidden shadow-sm border border-neutral-200 dark:border-white/5">
|
|
<div class="group relative flex items-center gap-4 p-4 cursor-pointer hover:bg-neutral-50 dark:hover:bg-white/5 transition-colors border-b border-neutral-100 dark:border-white/5">
|
|
<div class="flex items-center justify-center rounded-lg bg-orange-500/20 text-orange-400 shrink-0 size-10">
|
|
<span class="material-symbols-outlined">notifications</span>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-neutral-900 dark:text-white text-base font-semibold leading-normal truncate">通知设置</p>
|
|
</div>
|
|
<span class="material-symbols-outlined text-neutral-400 dark:text-neutral-500">chevron_right</span>
|
|
</div>
|
|
<div class="group relative flex items-center gap-4 p-4 cursor-pointer hover:bg-neutral-50 dark:hover:bg-white/5 transition-colors">
|
|
<div class="flex items-center justify-center rounded-lg bg-yellow-500/20 text-yellow-400 shrink-0 size-10">
|
|
<span class="material-symbols-outlined">diamond</span>
|
|
</div>
|
|
<div class="flex-1 min-w-0 flex items-center gap-2">
|
|
<p class="text-neutral-900 dark:text-white text-base font-semibold leading-normal truncate">解锁会员</p>
|
|
<span class="bg-primary text-background-dark text-[10px] font-extrabold px-1.5 py-0.5 rounded uppercase">PRO</span>
|
|
</div>
|
|
<span class="material-symbols-outlined text-neutral-400 dark:text-neutral-500">chevron_right</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<h3 class="text-neutral-500 dark:text-neutral-400 text-xs font-bold uppercase tracking-wider px-2 mb-2 ml-1">通用</h3>
|
|
<div class="bg-white dark:bg-surface-dark rounded-xl overflow-hidden shadow-sm border border-neutral-200 dark:border-white/5">
|
|
<div class="group relative flex items-center gap-4 p-4 cursor-pointer hover:bg-neutral-50 dark:hover:bg-white/5 transition-colors border-b border-neutral-100 dark:border-white/5">
|
|
<div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-white/10 text-neutral-600 dark:text-neutral-300 shrink-0 size-10">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-neutral-900 dark:text-white text-base font-semibold leading-normal truncate">基础设置</p>
|
|
</div>
|
|
<span class="material-symbols-outlined text-neutral-400 dark:text-neutral-500">chevron_right</span>
|
|
</div>
|
|
<div class="group relative flex items-center gap-4 p-4 cursor-pointer hover:bg-neutral-50 dark:hover:bg-white/5 transition-colors">
|
|
<div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-white/10 text-neutral-600 dark:text-neutral-300 shrink-0 size-10">
|
|
<span class="material-symbols-outlined">security</span>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-neutral-900 dark:text-white text-base font-semibold leading-normal truncate">隐私与数据</p>
|
|
</div>
|
|
<span class="material-symbols-outlined text-neutral-400 dark:text-neutral-500">chevron_right</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="pt-4 flex flex-col items-center">
|
|
<button class="w-full py-4 text-red-500 font-bold hover:bg-red-500/10 rounded-xl transition-colors text-center">
|
|
退出登录
|
|
</button>
|
|
<p class="text-neutral-500 text-xs mt-4">版本 1.0.2</p>
|
|
</div>
|
|
</div>
|
|
<div class="sticky bottom-0 w-full bg-background-light/90 dark:bg-background-dark/95 backdrop-blur-lg border-t border-neutral-200 dark:border-white/5 flex justify-around items-center py-3 pb-6 px-2 z-20">
|
|
<div class="flex flex-col items-center gap-1 opacity-50 cursor-pointer hover:opacity-80 transition-opacity">
|
|
<span class="material-symbols-outlined text-2xl">home</span>
|
|
<span class="text-[10px] font-medium">首页</span>
|
|
</div>
|
|
<div class="flex flex-col items-center gap-1 opacity-50 cursor-pointer hover:opacity-80 transition-opacity">
|
|
<span class="material-symbols-outlined text-2xl">bar_chart</span>
|
|
<span class="text-[10px] font-medium">追踪</span>
|
|
</div>
|
|
<div class="flex flex-col items-center gap-1 text-primary cursor-pointer">
|
|
<span class="material-symbols-outlined text-2xl fill-1">person</span>
|
|
<span class="text-[10px] font-bold">我的</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body></html> |