admin/smt
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
nepiedg
2026-01-25 11:45:16 +08:00
commit c883ae7b17
44 changed files with 5945 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/activity_history/code.html
+196
View File
@@ -0,0 +1,196 @@
<!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" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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": "#1a2e22",
},
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' 1,
'wght' 400,
'GRAD' 0,
'opsz' 24
}.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</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 text-slate-900 dark:text-white antialiased selection:bg-primary selection:text-black">
<div class="relative flex min-h-screen w-full flex-col max-w-md mx-auto overflow-hidden shadow-2xl bg-background-light dark:bg-background-dark border-x border-white/5">
<header class="sticky top-0 z-20 flex items-center justify-between p-4 bg-background-light/95 dark:bg-background-dark/95 backdrop-blur-md border-b border-black/5 dark:border-white/5">
<h2 class="text-xl font-bold leading-tight tracking-tight flex-1">历史记录</h2>
<button class="flex items-center justify-center w-10 h-10 rounded-full hover:bg-black/5 dark:hover:bg-white/10 transition-colors">
<span class="material-symbols-outlined text-slate-900 dark:text-white">tune</span>
</button>
</header>
<div class="sticky top-[72px] z-10 bg-background-light dark:bg-background-dark pt-2 pb-4">
<div class="flex gap-3 px-4 overflow-x-auto no-scrollbar">
<button class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-primary px-5 transition-transform active:scale-95">
<span class="text-black text-sm font-bold">全部</span>
</button>
<button class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-gray-200 dark:bg-surface-dark border border-transparent dark:border-white/5 px-5 transition-transform active:scale-95">
<span class="text-slate-600 dark:text-gray-300 text-sm font-medium">已抽烟</span>
</button>
<button class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-full bg-gray-200 dark:bg-surface-dark border border-transparent dark:border-white/5 px-5 transition-transform active:scale-95">
<span class="text-slate-600 dark:text-gray-300 text-sm font-medium">已忍住</span>
</button>
</div>
<div class="absolute right-0 top-2 bottom-4 w-8 bg-gradient-to-l from-background-light dark:from-background-dark to-transparent pointer-events-none"></div>
</div>
<main class="flex-1 flex flex-col relative w-full">
<div class="absolute left-[27px] top-0 bottom-0 w-[2px] bg-gray-200 dark:bg-white/10 z-0"></div>
<div class="relative z-0 pb-2">
<div class="sticky top-[130px] z-10 bg-background-light dark:bg-background-dark py-2 px-4 mb-2 border-b border-transparent">
<h4 class="text-primary text-xs font-bold uppercase tracking-wider bg-surface-dark/50 dark:bg-surface-dark backdrop-blur px-3 py-1 rounded-full inline-block">今天, 11月14日</h4>
</div>
<div class="group relative grid grid-cols-[56px_1fr] px-4 py-3">
<div class="flex flex-col items-center h-full relative">
<div class="relative z-10 flex h-10 w-10 items-center justify-center rounded-full bg-primary shadow-[0_0_15px_rgba(43,238,121,0.3)] border-4 border-background-light dark:border-background-dark">
<span class="material-symbols-outlined text-black text-[20px]">shield</span>
</div>
<div class="w-[2px] bg-primary/50 h-full absolute top-5 -z-10"></div>
</div>
<div class="flex flex-col ml-1 bg-white dark:bg-surface-dark rounded-xl p-4 shadow-sm border border-gray-100 dark:border-white/5">
<div class="flex justify-between items-start mb-1">
<p class="text-slate-900 dark:text-white text-base font-bold">已忍住</p>
<span class="text-xs font-medium text-primary bg-primary/10 px-2 py-0.5 rounded-full">成功</span>
</div>
<p class="text-slate-500 dark:text-gray-400 text-sm mb-3">4:20 PM</p>
<div class="flex items-center gap-2">
<span class="inline-flex items-center gap-1 rounded-md bg-gray-100 dark:bg-white/10 px-2.5 py-1 text-xs font-medium text-slate-600 dark:text-gray-300">
<span class="material-symbols-outlined text-[14px]">sentiment_stressed</span>
压力大
</span>
</div>
</div>
</div>
<div class="group relative grid grid-cols-[56px_1fr] px-4 py-3">
<div class="flex flex-col items-center h-full relative">
<div class="relative z-10 flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 dark:bg-surface-dark border-4 border-background-light dark:border-background-dark">
<span class="material-symbols-outlined text-slate-500 dark:text-gray-400 text-[20px]">smoking_rooms</span>
</div>
</div>
<div class="flex flex-col ml-1 bg-white dark:bg-surface-dark rounded-xl p-4 shadow-sm border border-gray-100 dark:border-white/5">
<div class="flex justify-between items-start mb-1">
<p class="text-slate-900 dark:text-white text-base font-bold">已抽烟</p>
<span class="text-xs text-slate-400 dark:text-gray-500 font-mono">间隔 1小时30分</span>
</div>
<p class="text-slate-500 dark:text-gray-400 text-sm mb-3">1:15 PM</p>
<div class="flex items-center gap-2">
<span class="inline-flex items-center gap-1 rounded-md bg-gray-100 dark:bg-white/10 px-2.5 py-1 text-xs font-medium text-slate-600 dark:text-gray-300">
<span class="material-symbols-outlined text-[14px]">mood_bad</span>
无聊
</span>
</div>
</div>
</div>
<div class="group relative grid grid-cols-[56px_1fr] px-4 py-3">
<div class="flex flex-col items-center h-full relative">
<div class="relative z-10 flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 dark:bg-surface-dark border-4 border-background-light dark:border-background-dark">
<span class="material-symbols-outlined text-slate-500 dark:text-gray-400 text-[20px]">smoking_rooms</span>
</div>
</div>
<div class="flex flex-col ml-1 bg-white dark:bg-surface-dark rounded-xl p-4 shadow-sm border border-gray-100 dark:border-white/5">
<div class="flex justify-between items-start mb-1">
<p class="text-slate-900 dark:text-white text-base font-bold">已抽烟</p>
<span class="text-xs text-slate-400 dark:text-gray-500">今日第一支</span>
</div>
<p class="text-slate-500 dark:text-gray-400 text-sm mb-3">11:45 AM</p>
<div class="flex items-center gap-2">
<span class="inline-flex items-center gap-1 rounded-md bg-gray-100 dark:bg-white/10 px-2.5 py-1 text-xs font-medium text-slate-600 dark:text-gray-300">
<span class="material-symbols-outlined text-[14px]">sunny</span>
晨间习惯
</span>
</div>
</div>
</div>
</div>
<div class="relative z-0 pb-10">
<div class="sticky top-[130px] z-10 bg-background-light dark:bg-background-dark py-2 px-4 mb-2">
<h4 class="text-slate-500 dark:text-gray-400 text-xs font-bold uppercase tracking-wider bg-gray-200/50 dark:bg-surface-dark backdrop-blur px-3 py-1 rounded-full inline-block">昨天, 11月13日</h4>
</div>
<div class="group relative grid grid-cols-[56px_1fr] px-4 py-3 overflow-hidden">
<div class="flex flex-col items-center h-full relative">
<div class="relative z-10 flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 dark:bg-surface-dark border-4 border-background-light dark:border-background-dark">
<span class="material-symbols-outlined text-slate-500 dark:text-gray-400 text-[20px]">smoking_rooms</span>
</div>
</div>
<div class="relative ml-1 h-full">
<div class="absolute inset-y-0 right-0 flex items-center gap-2 pl-4">
<button class="flex flex-col items-center justify-center h-full w-16 bg-slate-200 dark:bg-gray-700 rounded-lg text-slate-600 dark:text-gray-200">
<span class="material-symbols-outlined text-[20px]">edit</span>
<span class="text-[10px] font-bold mt-1">编辑</span>
</button>
<button class="flex flex-col items-center justify-center h-full w-16 bg-red-500/10 dark:bg-red-500/20 rounded-lg text-red-600 dark:text-red-400">
<span class="material-symbols-outlined text-[20px]">delete</span>
<span class="text-[10px] font-bold mt-1">删除</span>
</button>
</div>
<div class="relative z-10 flex flex-col bg-white dark:bg-surface-dark rounded-xl p-4 shadow-sm border border-gray-100 dark:border-white/5 -translate-x-36 transition-transform">
<div class="flex justify-between items-start mb-1">
<p class="text-slate-900 dark:text-white text-base font-bold">已抽烟</p>
<span class="text-xs text-slate-400 dark:text-gray-500 font-mono">间隔 4小时12分</span>
</div>
<p class="text-slate-500 dark:text-gray-400 text-sm mb-3">9:30 PM</p>
<div class="flex items-center gap-2">
<span class="inline-flex items-center gap-1 rounded-md bg-gray-100 dark:bg-white/10 px-2.5 py-1 text-xs font-medium text-slate-600 dark:text-gray-300">
<span class="material-symbols-outlined text-[14px]">local_bar</span>
社交
</span>
</div>
</div>
</div>
</div>
</div>
</main>
<div class="fixed bottom-6 right-6 z-30">
<button class="flex items-center justify-center w-14 h-14 bg-primary rounded-full shadow-lg shadow-primary/20 hover:scale-105 active:scale-95 transition-transform">
<span class="material-symbols-outlined text-black text-[28px]">add</span>
</button>
</div>
</div>
</body></html>
UI/activity_history/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

UI/ai_quit_assistant/code.html
+159
View File
@@ -0,0 +1,159 @@
<!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>AI 戒烟助手</title>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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": "#1A2C22",
},
fontFamily: {
"display": ["Manrope", "sans-serif"]
},
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
},
},
}
</script>
<style>.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</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 text-[#111518] dark:text-white font-display overflow-x-hidden pb-24">
<div class="sticky top-0 z-50 flex items-center bg-background-light dark:bg-background-dark p-4 pb-2 justify-between border-b border-gray-200 dark:border-white/5">
<div class="flex size-10 shrink-0 items-center justify-center rounded-full bg-surface-dark/10 dark:bg-white/10">
<span class="material-symbols-outlined text-xl">menu</span>
</div>
<div class="flex flex-col items-center">
<h2 class="text-lg font-bold leading-tight tracking-[-0.015em]">AI 戒烟助手</h2>
<div class="flex items-center gap-1">
<span class="size-2 rounded-full bg-primary animate-pulse"></span>
<span class="text-xs font-medium text-primary">在线</span>
</div>
</div>
<div class="flex size-10 shrink-0 items-center justify-center">
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-9 ring-2 ring-primary/20" data-alt="User profile photo showing a smiling person" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDM8IThj2i4rSpw3zTFeUkIzSyzfxTqwPUWf1hrOwomNIYRMZumn7Q5uth0PuVsnx3lGvWpwcTXScnMsgelTu3BStuJUKxc7y5nj8OWLLI71ztgrzXmuOxF1FDNC1KqRGgcmS0rxvp7w6-gptXquAbY8pEF07lI9h7zqz79QoMGKI8pXhi-dk07tBkZNn3548ALBv4c2fppi1nOOQfzf3LT05cgeQlngaLZ8qoWm3zVnhBpxlGwJihwAxdHLHJap8QpkMvn5KNhKajn");'>
</div>
</div>
</div>
<div class="flex flex-col gap-6 p-4">
<div class="relative overflow-hidden rounded-xl bg-surface-dark shadow-lg">
<div class="bg-cover bg-center flex flex-col items-stretch justify-end pt-[140px] relative" data-alt="Abstract calming green smoke dispersion pattern" style='background-image: linear-gradient(0deg, rgba(16, 34, 23, 0.9) 0%, rgba(16, 34, 23, 0.4) 60%, rgba(16, 34, 23, 0) 100%), url("https://lh3.googleusercontent.com/aida-public/AB6AXuDDHunxB0JmkAwXkaRbAmb88-JbOO7dNx8SOPqCLFYHQ_5KA7NCE8y2DANgb4SM9fIj5GXRA_4ey1viKp7EhaJBCv1wTfdJUhLNvkdf0SSuWsnPsqYLymiZvmrSblGy2C-TeMdvRk8wiLiimRs353N2cLYfdYA-E7YzU_MKMFg6AiBJucASwVqk0fFuMfJHb0kxLG5lvjsn0q8VNZSrar6qWgOdS9CMgXyd2QCQFI6oTiOdKJ1SH0GMlH7b9gZAeMcc4EKoy0Pq6kVA");'>
<div class="absolute top-4 right-4 bg-black/40 backdrop-blur-md px-3 py-1 rounded-full border border-white/10">
<p class="text-xs font-bold text-primary uppercase tracking-wider">第 18/30 天</p>
</div>
<div class="flex w-full flex-col gap-4 p-5">
<div class="flex flex-col gap-1">
<p class="text-primary/80 text-sm font-semibold uppercase tracking-widest">当前减量计划阶段</p>
<h2 class="text-white text-3xl font-bold leading-tight">阶段 2：减量期</h2>
<p class="text-gray-300 text-sm font-medium leading-normal mt-1">本阶段还剩 12 天</p>
</div>
<div class="flex flex-col gap-2 mt-2">
<div class="flex justify-between items-end">
<span class="text-xs text-gray-400">阶段进度</span>
<span class="text-sm font-bold text-primary">40%</span>
</div>
<div class="h-2 w-full rounded-full bg-white/10 overflow-hidden">
<div class="h-full rounded-full bg-primary shadow-[0_0_10px_rgba(43,238,121,0.5)]" style="width: 40%"></div>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-2">
<div class="flex items-center gap-2 px-1">
<span class="material-symbols-outlined text-primary text-[20px]">smart_toy</span>
<h2 class="text-[18px] font-bold leading-tight tracking-tight">每日 AI 分析</h2>
</div>
<div class="flex items-end gap-3 rounded-xl bg-surface-dark p-4 border border-white/5">
<div class="flex-shrink-0 relative">
<div class="bg-center bg-no-repeat bg-cover rounded-full w-10 h-10 ring-2 ring-primary/20" data-alt="AI robot avatar face icon" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCOq8r_M2hN_HE2acoNyZDBbM1X1bgiY2hsLJa7dv6__8B4wmrn6fWs26NzDmIwCqhrCC4gcWxNpiX37ONaVgjKcC-xQ2xdAM1VlK9GJZqaoquebmtf0Ilstx9umIcIfJDq2lAV7ZJGObgeUNLPZkmq-9nr1Fg1NJghMYG1325WsQ6jrlQiRXjg4hFXrc62Sf7Cz9AgwE1GKlJyBsQJSbkMu5UUVNDk6SyAbpbEBUbFejdxWEtLQMfpzaPMtxQBssb35k3RwdL8RRmx");'></div>
<div class="absolute -bottom-1 -right-1 bg-background-dark rounded-full p-0.5">
<div class="bg-primary size-2.5 rounded-full border-2 border-background-dark"></div>
</div>
</div>
<div class="flex flex-1 flex-col gap-1 items-start">
<div class="flex items-center gap-2 mb-1">
<p class="text-primary text-xs font-bold uppercase tracking-wide">AI 教练</p>
<span class="text-gray-500 text-[10px]">• 刚刚</span>
</div>
<div class="relative bg-[#233329] text-gray-100 text-sm leading-relaxed rounded-2xl rounded-tl-none px-4 py-3 shadow-sm border border-white/5">
<p>早上好 Alex。昨天你的吸烟量比限额少了 2 支。这是一个巨大的胜利！🏆</p>
<p class="mt-2 text-gray-300">数据显示你的烟瘾在下午 2 点左右达到顶峰——今天试着那个时候去散散步。</p>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-3">
<div class="flex justify-between items-center px-1">
<h2 class="text-[18px] font-bold leading-tight tracking-tight">今日目标</h2>
<span class="text-xs font-medium text-primary bg-primary/10 px-2 py-1 rounded-md">已完成 1/3</span>
</div>
<label class="group flex items-center gap-4 p-4 rounded-xl bg-surface-dark border border-white/5 transition-all active:scale-[0.99]">
<div class="relative flex items-center justify-center">
<input checked="" class="peer h-6 w-6 cursor-pointer appearance-none rounded-full border-2 border-primary bg-primary transition-all checked:border-primary checked:bg-primary" type="checkbox"/>
<span class="material-symbols-outlined absolute pointer-events-none text-black text-sm opacity-0 peer-checked:opacity-100 font-bold">check</span>
</div>
<div class="flex flex-col flex-1 opacity-50">
<p class="text-sm font-medium line-through decoration-white/50">喝 2 升水</p>
</div>
<span class="material-symbols-outlined text-primary/50 text-[20px]">local_drink</span>
</label>
<label class="group flex items-center gap-4 p-4 rounded-xl bg-surface-dark border border-white/5 transition-all active:scale-[0.99]">
<div class="relative flex items-center justify-center">
<input class="peer h-6 w-6 cursor-pointer appearance-none rounded-full border-2 border-gray-600 bg-transparent transition-all checked:border-primary checked:bg-primary hover:border-primary/50" type="checkbox"/>
<span class="material-symbols-outlined absolute pointer-events-none text-black text-sm opacity-0 peer-checked:opacity-100 font-bold">check</span>
</div>
<div class="flex flex-col flex-1">
<p class="text-sm font-medium text-white">控制在 5 支烟以内</p>
<p class="text-xs text-gray-400">当前：2/5</p>
</div>
<span class="material-symbols-outlined text-gray-500 text-[20px]">smoke_free</span>
</label>
<label class="group flex items-center gap-4 p-4 rounded-xl bg-surface-dark border border-white/5 transition-all active:scale-[0.99]">
<div class="relative flex items-center justify-center">
<input class="peer h-6 w-6 cursor-pointer appearance-none rounded-full border-2 border-gray-600 bg-transparent transition-all checked:border-primary checked:bg-primary hover:border-primary/50" type="checkbox"/>
<span class="material-symbols-outlined absolute pointer-events-none text-black text-sm opacity-0 peer-checked:opacity-100 font-bold">check</span>
</div>
<div class="flex flex-col flex-1">
<p class="text-sm font-medium text-white">阅读激励卡片</p>
</div>
<span class="material-symbols-outlined text-gray-500 text-[20px]">style</span>
</label>
</div>
</div>
<div class="fixed bottom-0 left-0 w-full bg-gradient-to-t from-background-dark via-background-dark/95 to-transparent pb-6 pt-12 px-4 flex justify-center pointer-events-none">
<button class="pointer-events-auto shadow-[0_0_20px_rgba(43,238,121,0.3)] hover:shadow-[0_0_25px_rgba(43,238,121,0.5)] active:scale-95 transition-all w-full max-w-sm flex items-center justify-center gap-3 bg-primary hover:bg-[#22d86c] text-[#0a160f] h-14 rounded-xl font-bold text-base">
<span class="material-symbols-outlined text-[24px]">add_circle</span>
记录吸烟或烟瘾
</button>
</div>
</body></html>
UI/ai_quit_assistant/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 467 KiB

UI/home_dashboard/code.html
+166
View File
@@ -0,0 +1,166 @@
<!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>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#4ade80", // Fresher Green (Tailwind green-400)
"background-light": "#f6f8f7",
"background-dark": "#102217",
"surface-dark": "#1a2c22",
},
fontFamily: {
"display": ["Manrope", "system-ui", "-apple-system", "sans-serif"]
},
borderRadius: {
"DEFAULT": "0.5rem",
"lg": "0.75rem",
"xl": "1rem",
"2xl": "1.5rem",
"full": "9999px"
},
},
},
}
</script>
<style>
.progress-ring__circle {
transition: stroke-dashoffset 0.35s;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
</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 text-slate-900 dark:text-white antialiased overflow-hidden h-screen flex flex-col">
<header class="flex items-center justify-between p-4 pt-12 pb-2 bg-background-light dark:bg-background-dark sticky top-0 z-10">
<div class="flex items-center gap-3">
<div class="relative">
<div class="bg-center bg-no-repeat bg-cover rounded-full h-10 w-10 border-2 border-primary/20" data-alt="User profile picture showing a smiling person" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAIHl8GS-f8DS3Xr7-eJu0ZXf5318wkaD17rc2oQ6YJYetbmb5bn8Qu7M_zZ9YdaYe5nvCZkibjS1xl9gd8lTyBhH3Bd6tD0_LrkITJBPz2Z-_yh47FN0CaOJ9ul0USESMUsH1oubTbh4dTfChxO4mdgjfkvMqfcNZC3Pgczkf4VlO7BmZ-YVdoGWy5ihjcWPXnrhxoTz42BzWzxQW0-z6WbriZuKYwFAf4eP6uR3wiVYYz3u921jS_RWpv2hPp5dcnLMSIsmWuizN4");'>
</div>
<div class="absolute bottom-0 right-0 h-3 w-3 bg-primary rounded-full border-2 border-background-dark"></div>
</div>
<div class="flex flex-col">
<h2 class="text-slate-900 dark:text-white text-lg font-bold leading-tight tracking-tight">早上好，Alex</h2>
<span class="text-xs text-slate-500 dark:text-slate-400 font-medium">保持连胜纪录！🔥</span>
</div>
</div>
<button class="flex items-center justify-center rounded-full h-10 w-10 hover:bg-black/5 dark:hover:bg-white/5 transition-colors text-slate-900 dark:text-white">
<span class="material-symbols-outlined">settings</span>
</button>
</header>
<main class="flex-1 overflow-y-auto px-4 pb-32">
<div class="mt-4 mb-6 relative overflow-hidden rounded-xl bg-gradient-to-r from-emerald-900/40 to-primary/10 border border-primary/20 p-4">
<div class="flex items-start gap-3">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/20 text-primary">
<span class="material-symbols-outlined text-[20px]">psychology</span>
</div>
<div class="flex-1">
<h3 class="text-sm font-bold text-slate-900 dark:text-white mb-1">发现规律</h3>
<p class="text-xs text-slate-600 dark:text-slate-300 leading-relaxed">你的烟瘾通常在下午2点达到高峰。我们为你准备了一个快速呼吸练习。</p>
</div>
<button class="text-slate-400 hover:text-white">
<span class="material-symbols-outlined text-[18px]">close</span>
</button>
</div>
</div>
<div class="flex flex-col items-center justify-center py-6 relative">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-primary/5 rounded-full blur-3xl pointer-events-none"></div>
<div class="relative h-72 w-72 flex items-center justify-center">
<svg class="h-full w-full transform" viewBox="0 0 100 100">
<circle class="text-slate-200 dark:text-surface-dark stroke-current" cx="50" cy="50" fill="transparent" r="45" stroke-width="6"></circle>
<circle class="text-primary progress-ring__circle stroke-current drop-shadow-[0_0_10px_rgba(74,222,128,0.5)]" cx="50" cy="50" fill="transparent" r="45" stroke-linecap="round" stroke-width="6" style="stroke-dasharray: 282.743; stroke-dashoffset: 70;"></circle>
</svg>
<div class="absolute inset-0 flex flex-col items-center justify-center text-center z-10">
<span class="text-slate-500 dark:text-slate-400 text-sm font-medium mb-1">距上次抽烟</span>
<h1 class="text-slate-900 dark:text-white text-4xl font-extrabold tracking-tight tabular-nums">02:45:12</h1>
<div class="mt-4 flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-dark border border-white/5">
<span class="material-symbols-outlined text-primary text-[14px]">auto_awesome</span>
<p class="text-primary text-xs font-semibold">下次建议: 16:30</p>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-3 mt-2">
<div class="flex flex-col p-4 rounded-xl bg-white dark:bg-surface-dark border border-slate-100 dark:border-white/5 shadow-sm">
<div class="flex items-center gap-2 mb-2">
<div class="h-2 w-2 rounded-full bg-red-400"></div>
<span class="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">今日已抽</span>
</div>
<div class="flex items-end justify-between">
<span class="text-2xl font-bold text-slate-900 dark:text-white">3 <span class="text-base font-normal text-slate-400">/ 10</span></span>
<span class="text-xs font-medium text-primary bg-primary/10 px-2 py-1 rounded">较昨日 -2</span>
</div>
<div class="mt-3 h-1.5 w-full bg-slate-100 dark:bg-black/20 rounded-full overflow-hidden">
<div class="h-full bg-red-400 rounded-full" style="width: 30%"></div>
</div>
</div>
<div class="flex flex-col p-4 rounded-xl bg-white dark:bg-surface-dark border border-slate-100 dark:border-white/5 shadow-sm">
<div class="flex items-center gap-2 mb-2">
<div class="h-2 w-2 rounded-full bg-primary"></div>
<span class="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">烟瘾发作</span>
</div>
<div class="flex items-end justify-between">
<span class="text-2xl font-bold text-slate-900 dark:text-white">5</span>
<span class="text-xs font-medium text-slate-400">已抵抗</span>
</div>
<div class="mt-3 h-1.5 w-full bg-slate-100 dark:bg-black/20 rounded-full overflow-hidden">
<div class="h-full bg-primary rounded-full" style="width: 80%"></div>
</div>
</div>
</div>
<div class="h-8"></div>
</main>
<div class="fixed bottom-[84px] left-0 right-0 p-4 z-20 bg-gradient-to-t from-background-light dark:from-background-dark via-background-light/90 dark:via-background-dark/90 to-transparent pt-8">
<div class="flex gap-3 w-full max-w-md mx-auto">
<button class="flex-1 h-14 rounded-xl border border-slate-300 dark:border-white/10 bg-white dark:bg-surface-dark hover:bg-slate-50 dark:hover:bg-white/5 text-slate-700 dark:text-slate-200 font-bold text-base flex items-center justify-center gap-2 transition-all active:scale-95 shadow-sm">
<span class="material-symbols-outlined">smoking_rooms</span>
记录抽烟
</button>
<button class="flex-[1.5] h-14 rounded-xl bg-primary hover:bg-primary/90 text-background-dark font-extrabold text-base flex items-center justify-center gap-2 shadow-[0_4px_20px_rgba(74,222,128,0.3)] transition-all active:scale-95">
<span class="material-symbols-outlined filled">verified_user</span>
想抽忍住了
</button>
</div>
</div>
<nav class="fixed bottom-0 w-full bg-white/80 dark:bg-[#0f1a14]/90 backdrop-blur-md border-t border-slate-200 dark:border-white/5 pb-5 pt-3 px-4 flex justify-between items-center z-30">
<button class="flex flex-col items-center gap-1 text-primary w-12 group">
<span class="material-symbols-outlined filled">home</span>
<span class="text-[10px] font-medium">首页</span>
</button>
<button class="flex flex-col items-center gap-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 w-12 group transition-colors">
<span class="material-symbols-outlined">bar_chart</span>
<span class="text-[10px] font-medium">统计</span>
</button>
<button class="flex flex-col items-center gap-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 w-12 group transition-colors">
<span class="material-symbols-outlined">smart_toy</span>
<span class="text-[10px] font-medium">AI助手</span>
</button>
<button class="flex flex-col items-center gap-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 w-12 group transition-colors">
<span class="material-symbols-outlined">history</span>
<span class="text-[10px] font-medium">记录</span>
</button>
<button class="flex flex-col items-center gap-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 w-12 group transition-colors">
<span class="material-symbols-outlined">person</span>
<span class="text-[10px] font-medium">我的</span>
</button>
</nav>
</body></html>
UI/home_dashboard/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 286 KiB

UI/profile_&_settings/code.html
+178
View File
@@ -0,0 +1,178 @@
<!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&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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>
UI/profile_&_settings/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 131 KiB

UI/smoking_statistics/code.html
+243
View File
@@ -0,0 +1,243 @@
<!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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&amp;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": "#1A3325",
},
fontFamily: {
"display": ["Manrope", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "sans-serif"]
},
borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "2xl": "1rem", "full": "9999px" },
},
},
}
</script>
<style>.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</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 antialiased text-slate-900 dark:text-white transition-colors duration-200">
<div class="relative flex h-full min-h-screen w-full flex-col overflow-x-hidden max-w-md mx-auto shadow-2xl bg-background-light dark:bg-background-dark pb-24">
<header class="sticky top-0 z-20 bg-background-light/90 dark:bg-background-dark/90 backdrop-blur-md px-4 py-3 flex items-center justify-between border-b border-gray-200 dark:border-white/5">
<button class="flex size-10 shrink-0 items-center justify-center rounded-full hover:bg-black/5 dark:hover:bg-white/10 transition-colors">
<span class="material-symbols-outlined text-2xl dark:text-white">arrow_back</span>
</button>
<h2 class="text-lg font-bold leading-tight tracking-tight flex-1 text-center">数据统计分析</h2>
<button class="flex size-10 shrink-0 items-center justify-center rounded-full hover:bg-black/5 dark:hover:bg-white/10 transition-colors">
<span class="material-symbols-outlined text-2xl dark:text-white">settings</span>
</button>
</header>
<main class="flex-1 flex flex-col gap-6 p-4">
<div class="w-full">
<div class="flex h-12 w-full items-center justify-center rounded-xl bg-gray-200 dark:bg-surface-dark p-1">
<label class="flex-1 h-full cursor-pointer relative">
<input checked="" class="peer sr-only" name="date-toggle" type="radio" value="Week"/>
<div class="flex h-full w-full items-center justify-center rounded-lg text-sm font-semibold text-gray-500 dark:text-gray-400 transition-all peer-checked:bg-white dark:peer-checked:bg-primary peer-checked:text-black dark:peer-checked:text-[#102217] peer-checked:shadow-sm">
周
</div>
</label>
<label class="flex-1 h-full cursor-pointer relative">
<input class="peer sr-only" name="date-toggle" type="radio" value="Month"/>
<div class="flex h-full w-full items-center justify-center rounded-lg text-sm font-semibold text-gray-500 dark:text-gray-400 transition-all peer-checked:bg-white dark:peer-checked:bg-primary peer-checked:text-black dark:peer-checked:text-[#102217] peer-checked:shadow-sm">
月
</div>
</label>
<label class="flex-1 h-full cursor-pointer relative">
<input class="peer sr-only" name="date-toggle" type="radio" value="Year"/>
<div class="flex h-full w-full items-center justify-center rounded-lg text-sm font-semibold text-gray-500 dark:text-gray-400 transition-all peer-checked:bg-white dark:peer-checked:bg-primary peer-checked:text-black dark:peer-checked:text-[#102217] peer-checked:shadow-sm">
年
</div>
</label>
</div>
</div>
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-r from-primary/20 to-primary/5 p-4 border border-primary/20">
<div class="flex gap-3 items-start">
<div class="bg-primary/20 p-2 rounded-full text-primary shrink-0">
<span class="material-symbols-outlined text-xl">auto_awesome</span>
</div>
<div>
<h4 class="text-sm font-bold text-slate-900 dark:text-white mb-1">每周洞察</h4>
<p class="text-xs text-slate-600 dark:text-gray-300 leading-relaxed">你在周末的吸烟量明显减少。非常棒！试着在这周一保持这个良好的势头。</p>
</div>
</div>
</div>
<section class="flex flex-col gap-4">
<div class="flex items-end justify-between px-1">
<h3 class="text-xl font-bold tracking-tight">吸烟趋势</h3>
<div class="flex items-center gap-1 text-sm font-medium text-emerald-500">
<span class="material-symbols-outlined text-base">trending_down</span>
<span>减少 20%</span>
</div>
</div>
<div class="rounded-3xl bg-white dark:bg-surface-dark p-5 shadow-sm border border-gray-100 dark:border-white/5">
<div class="flex flex-col gap-1 mb-6">
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">日均吸烟量</p>
<div class="flex items-baseline gap-2">
<span class="text-3xl font-bold text-slate-900 dark:text-white">4</span>
<span class="text-sm text-gray-400">支 / 天</span>
</div>
</div>
<div class="w-full h-[200px] flex flex-col justify-end">
<div class="flex items-end justify-between h-[180px] w-full gap-2 sm:gap-4">
<div class="flex flex-col items-center gap-2 h-full justify-end flex-1 group">
<div class="w-full max-w-[24px] bg-gray-200 dark:bg-white/10 rounded-t-sm h-[90%] relative overflow-hidden transition-all duration-300 group-hover:opacity-80">
<div class="absolute bottom-0 left-0 w-full bg-primary h-full"></div>
</div>
<span class="text-xs font-medium text-gray-400">一</span>
</div>
<div class="flex flex-col items-center gap-2 h-full justify-end flex-1 group">
<div class="w-full max-w-[24px] bg-gray-200 dark:bg-white/10 rounded-t-sm h-[50%] relative overflow-hidden transition-all duration-300 group-hover:opacity-80">
<div class="absolute bottom-0 left-0 w-full bg-primary h-full"></div>
</div>
<span class="text-xs font-medium text-gray-400">二</span>
</div>
<div class="flex flex-col items-center gap-2 h-full justify-end flex-1 group">
<div class="w-full max-w-[24px] bg-gray-200 dark:bg-white/10 rounded-t-sm h-[80%] relative overflow-hidden transition-all duration-300 group-hover:opacity-80">
<div class="absolute bottom-0 left-0 w-full bg-primary h-full"></div>
</div>
<span class="text-xs font-medium text-gray-400">三</span>
</div>
<div class="flex flex-col items-center gap-2 h-full justify-end flex-1 group">
<div class="w-full max-w-[24px] bg-gray-200 dark:bg-white/10 rounded-t-sm h-[80%] relative overflow-hidden transition-all duration-300 group-hover:opacity-80">
<div class="absolute bottom-0 left-0 w-full bg-primary h-full"></div>
</div>
<span class="text-xs font-medium text-gray-400 text-primary font-bold">四</span>
</div>
<div class="flex flex-col items-center gap-2 h-full justify-end flex-1 group">
<div class="w-full max-w-[24px] bg-gray-200 dark:bg-white/10 rounded-t-sm h-[70%] relative overflow-hidden transition-all duration-300 group-hover:opacity-80">
<div class="absolute bottom-0 left-0 w-full bg-primary h-full opacity-50"></div>
</div>
<span class="text-xs font-medium text-gray-400">五</span>
</div>
<div class="flex flex-col items-center gap-2 h-full justify-end flex-1 group">
<div class="w-full max-w-[24px] bg-gray-200 dark:bg-white/10 rounded-t-sm h-[10%] relative overflow-hidden transition-all duration-300 group-hover:opacity-80">
<div class="absolute bottom-0 left-0 w-full bg-primary h-full opacity-50"></div>
</div>
<span class="text-xs font-medium text-gray-400">六</span>
</div>
<div class="flex flex-col items-center gap-2 h-full justify-end flex-1 group">
<div class="w-full max-w-[24px] bg-gray-200 dark:bg-white/10 rounded-t-sm h-[40%] relative overflow-hidden transition-all duration-300 group-hover:opacity-80">
<div class="absolute bottom-0 left-0 w-full bg-primary h-full opacity-50"></div>
</div>
<span class="text-xs font-medium text-gray-400">日</span>
</div>
</div>
</div>
</div>
</section>
<section class="flex flex-col gap-4">
<h3 class="text-xl font-bold tracking-tight px-1">健康与储蓄</h3>
<div class="grid grid-cols-2 gap-4">
<div class="rounded-3xl bg-white dark:bg-surface-dark p-5 shadow-sm border border-gray-100 dark:border-white/5 flex flex-col items-center justify-center gap-4 relative overflow-hidden">
<div class="absolute top-0 right-0 p-3 opacity-10">
<span class="material-symbols-outlined text-4xl text-primary">savings</span>
</div>
<div class="relative size-24">
<svg class="size-full -rotate-90" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<path class="text-gray-200 dark:text-white/10" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3.5"></path>
<path class="text-primary drop-shadow-[0_0_4px_rgba(43,238,121,0.5)]" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-dasharray="75, 100" stroke-linecap="round" stroke-width="3.5"></path>
</svg>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
<span class="text-[10px] font-medium text-gray-400 uppercase tracking-wider">已省</span>
<span class="text-sm font-bold text-slate-900 dark:text-white">¥145</span>
</div>
</div>
<div class="text-center">
<p class="text-sm font-bold dark:text-white">节省金额</p>
<p class="text-xs text-gray-400 mt-1">目标 ¥200</p>
</div>
</div>
<div class="rounded-3xl bg-white dark:bg-surface-dark p-5 shadow-sm border border-gray-100 dark:border-white/5 flex flex-col items-center justify-center gap-4 relative overflow-hidden">
<div class="absolute top-0 right-0 p-3 opacity-10">
<span class="material-symbols-outlined text-4xl text-blue-400">pulmonology</span>
</div>
<div class="relative size-24">
<svg class="size-full -rotate-90" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<path class="text-gray-200 dark:text-white/10" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3.5"></path>
<path class="text-blue-400 drop-shadow-[0_0_4px_rgba(96,165,250,0.5)]" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-dasharray="40, 100" stroke-linecap="round" stroke-width="3.5"></path>
</svg>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
<span class="text-sm font-bold text-slate-900 dark:text-white">40%</span>
</div>
</div>
<div class="text-center">
<p class="text-sm font-bold dark:text-white">肺部功能恢复</p>
<p class="text-xs text-gray-400 mt-1">当前进度</p>
</div>
</div>
</div>
</section>
<section class="grid grid-cols-2 gap-3 mb-6">
<div class="rounded-2xl bg-white dark:bg-surface-dark p-4 flex flex-col gap-1 border border-gray-100 dark:border-white/5">
<div class="flex items-center gap-2 mb-1">
<span class="material-symbols-outlined text-orange-400 text-lg">local_fire_department</span>
<span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">连续记录</span>
</div>
<p class="text-2xl font-bold dark:text-white">12 天</p>
<p class="text-xs text-gray-400">未吸烟</p>
</div>
<div class="rounded-2xl bg-white dark:bg-surface-dark p-4 flex flex-col gap-1 border border-gray-100 dark:border-white/5">
<div class="flex items-center gap-2 mb-1">
<span class="material-symbols-outlined text-purple-400 text-lg">block</span>
<span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">已拒绝</span>
</div>
<p class="text-2xl font-bold dark:text-white">24 次</p>
<p class="text-xs text-gray-400">对抗烟瘾</p>
</div>
</section>
</main>
<nav class="fixed bottom-0 w-full max-w-md bg-background-light/95 dark:bg-background-dark/95 backdrop-blur-lg border-t border-gray-200 dark:border-white/5 pb-5 pt-3 px-6 flex justify-between items-center z-50">
<button class="flex flex-col items-center gap-1 text-gray-400 hover:text-slate-900 dark:hover:text-white transition-colors">
<span class="material-symbols-outlined text-2xl">home</span>
<span class="text-[10px] font-medium">首页</span>
</button>
<button class="flex flex-col items-center gap-1 text-primary transition-colors">
<span class="material-symbols-outlined text-2xl filled">bar_chart</span>
<span class="text-[10px] font-medium">统计</span>
</button>
<div class="size-12 rounded-full bg-primary flex items-center justify-center -mt-8 shadow-[0_0_15px_rgba(43,238,121,0.4)] border-4 border-background-light dark:border-background-dark cursor-pointer">
<span class="material-symbols-outlined text-background-dark text-2xl font-bold">add</span>
</div>
<button class="flex flex-col items-center gap-1 text-gray-400 hover:text-slate-900 dark:hover:text-white transition-colors">
<span class="material-symbols-outlined text-2xl">sticky_note_2</span>
<span class="text-[10px] font-medium">计划</span>
</button>
<button class="flex flex-col items-center gap-1 text-gray-400 hover:text-slate-900 dark:hover:text-white transition-colors">
<span class="material-symbols-outlined text-2xl">person</span>
<span class="text-[10px] font-medium">我的</span>
</button>
</nav>
</div>
</body></html>
UI/smoking_statistics/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 183 KiB