init
This commit is contained in:
nepiedg
@@ -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&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": "#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>
|
||||
Reference in New Issue
Block a user