nepiedg
243 lines
14 KiB
HTML
243 lines
14 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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&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> |