nepiedg
196 lines
10 KiB
HTML
196 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" 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=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": "#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> |