nepiedg
166 lines
9.2 KiB
HTML
166 lines
9.2 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>
|
|
<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&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&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> |