398 lines
19 KiB
HTML
398 lines
19 KiB
HTML
<!DOCTYPE html><html lang="zh-CN" style=""><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;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": {
|
|
"on-error-container": "#93000a",
|
|
"on-secondary-fixed-variant": "#3e4943",
|
|
"on-background": "#161d19",
|
|
"error-container": "#ffdad6",
|
|
"surface-container-highest": "#dde4dd",
|
|
"surface-container-high": "#e3eae3",
|
|
"primary-fixed-dim": "#4edea3",
|
|
"on-secondary-container": "#5b6760",
|
|
"on-primary": "#ffffff",
|
|
"inverse-surface": "#2b322d",
|
|
"tertiary-fixed-dim": "#ffb3af",
|
|
"primary": "#006c49",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-primary-fixed-variant": "#005236",
|
|
"on-surface-variant": "#3c4a42",
|
|
"surface-container": "#e8f0e9",
|
|
"tertiary-container": "#fc7c78",
|
|
"on-tertiary": "#ffffff",
|
|
"on-tertiary-container": "#711419",
|
|
"surface-container-low": "#eef6ee",
|
|
"on-secondary-fixed": "#131e19",
|
|
"inverse-primary": "#4edea3",
|
|
"surface-tint": "#006c49",
|
|
"secondary-fixed-dim": "#bdcac1",
|
|
"on-primary-container": "#00422b",
|
|
"on-secondary": "#ffffff",
|
|
"secondary-container": "#d9e6dd",
|
|
"tertiary": "#a43a3a",
|
|
"on-error": "#ffffff",
|
|
"secondary-fixed": "#d9e6dd",
|
|
"background": "#f4fbf4",
|
|
"tertiary-fixed": "#ffdad7",
|
|
"outline": "#6c7a71",
|
|
"primary-fixed": "#6ffbbe",
|
|
"on-tertiary-fixed": "#410005",
|
|
"outline-variant": "#bbcabf",
|
|
"primary-container": "#10b981",
|
|
"on-tertiary-fixed-variant": "#842225",
|
|
"surface-variant": "#dde4dd",
|
|
"on-primary-fixed": "#002113",
|
|
"on-surface": "#161d19",
|
|
"surface-bright": "#f4fbf4",
|
|
"inverse-on-surface": "#ebf3eb",
|
|
"surface": "#f4fbf4",
|
|
"surface-dim": "#d4dcd5",
|
|
"secondary": "#55615a",
|
|
"error": "#ba1a1a"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px",
|
|
"2xl": "1.5rem",
|
|
"3xl": "2rem"
|
|
},
|
|
"spacing": {
|
|
"container-margin": "20px",
|
|
"stack-gap": "16px",
|
|
"section-margin": "32px",
|
|
"inline-gap": "12px",
|
|
"card-padding": "20px"
|
|
},
|
|
"fontFamily": {
|
|
"body-lg": [
|
|
"Manrope"
|
|
],
|
|
"headline-lg": [
|
|
"Manrope"
|
|
],
|
|
"headline-md": [
|
|
"Manrope"
|
|
],
|
|
"display-lg": [
|
|
"Manrope"
|
|
],
|
|
"headline-lg-mobile": [
|
|
"Manrope"
|
|
],
|
|
"label-md": [
|
|
"Manrope"
|
|
],
|
|
"body-md": [
|
|
"Manrope"
|
|
]
|
|
},
|
|
"fontSize": {
|
|
"body-lg": [
|
|
"16px",
|
|
{
|
|
"lineHeight": "24px",
|
|
"fontWeight": "500"
|
|
}
|
|
],
|
|
"headline-lg": [
|
|
"24px",
|
|
{
|
|
"lineHeight": "32px",
|
|
"letterSpacing": "-0.01em",
|
|
"fontWeight": "700"
|
|
}
|
|
],
|
|
"headline-md": [
|
|
"20px",
|
|
{
|
|
"lineHeight": "28px",
|
|
"fontWeight": "700"
|
|
}
|
|
],
|
|
"display-lg": [
|
|
"32px",
|
|
{
|
|
"lineHeight": "40px",
|
|
"letterSpacing": "-0.02em",
|
|
"fontWeight": "800"
|
|
}
|
|
],
|
|
"headline-lg-mobile": [
|
|
"22px",
|
|
{
|
|
"lineHeight": "28px",
|
|
"fontWeight": "700"
|
|
}
|
|
],
|
|
"label-md": [
|
|
"12px",
|
|
{
|
|
"lineHeight": "16px",
|
|
"letterSpacing": "0.02em",
|
|
"fontWeight": "600"
|
|
}
|
|
],
|
|
"body-md": [
|
|
"14px",
|
|
{
|
|
"lineHeight": "20px",
|
|
"fontWeight": "400"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.icon-fill {
|
|
font-variation-settings: 'FILL' 1;
|
|
}
|
|
|
|
.ambient-shadow {
|
|
box-shadow: 0 12px 30px -10px rgba(0, 108, 73, 0.08), 0 4px 10px -4px rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
.btn-press:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-surface font-body-lg antialiased pb-24 md:pb-0 min-h-screen">
|
|
<!-- Desktop Sidebar Shell (Hidden on Mobile) -->
|
|
<div class="hidden md:flex fixed left-0 top-0 h-full w-64 bg-surface-container-lowest border-r border-surface-dim z-50 flex-col">
|
|
<div class="p-6">
|
|
<h1 class="text-headline-lg font-headline-lg text-primary">VitalMint</h1>
|
|
</div>
|
|
<nav class="flex-1 px-4 flex flex-col gap-2 mt-4">
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-xl bg-primary-container text-on-primary-container font-bold" href="#">
|
|
<span class="material-symbols-outlined icon-fill">home</span>
|
|
<span class="">首页</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-xl text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
|
<span class="material-symbols-outlined">add_circle</span>
|
|
<span class="">记录</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-xl text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
|
<span class="material-symbols-outlined">analytics</span>
|
|
<span class="">动态</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-xl text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
|
<span class="material-symbols-outlined">person</span>
|
|
<span class="">我的</span>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
<!-- Main Content Area -->
|
|
<main class="md:ml-64 w-full max-w-[1200px] mx-auto min-h-screen flex flex-col md:flex-row">
|
|
<!-- Left/Main Column: Dashboard -->
|
|
<div class="flex-1 w-full">
|
|
<!-- TopAppBar -->
|
|
<header class="bg-surface dark:bg-surface-dim docked full-width top-0 flex justify-between items-center px-container-margin py-4 w-full sticky z-40">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center overflow-hidden border-2 border-surface-container-lowest">
|
|
<span class="material-symbols-outlined text-primary">person</span>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-headline-lg-mobile font-headline-lg-mobile text-on-surface dark:text-on-background">下午好，用户16295733</h1>
|
|
<p class="text-label-md font-label-md text-on-surface-variant opacity-80">今日血糖已记录</p>
|
|
</div>
|
|
</div>
|
|
<button class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-surface-container dark:hover:bg-surface-container-high transition-colors text-primary dark:text-primary-fixed-dim">
|
|
<span class="material-symbols-outlined" data-icon="volume_up">volume_up</span>
|
|
</button>
|
|
</header>
|
|
<!-- Content Canvas -->
|
|
<div class="px-container-margin pb-section-margin flex flex-col gap-6 mt-2">
|
|
<!-- 1. Primary Action (Prominent) -->
|
|
<section>
|
|
<button class="w-full bg-primary text-on-primary h-14 rounded-2xl flex items-center justify-center gap-2 text-body-lg font-bold btn-press shadow-[0_8px_16px_rgba(0,108,73,0.2)] transition-all">
|
|
<span class="material-symbols-outlined icon-fill">add</span>
|
|
录入今日血糖
|
|
</button>
|
|
</section>
|
|
<!-- 2. 血糖趋势 (Trends) - Moved to top -->
|
|
<section class="bg-surface-container-lowest rounded-3xl p-5 ambient-shadow border border-surface-container-highest/30">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<div>
|
|
<h2 class="text-headline-md font-headline-md text-on-surface">血糖趋势</h2>
|
|
<p class="text-label-md font-label-md text-on-surface-variant">最近 7 天 · mmol/L</p>
|
|
</div>
|
|
<div class="flex items-center gap-3 text-label-md font-label-md text-on-surface-variant">
|
|
<div class="flex items-center gap-1"><div class="w-2 h-2 rounded-full bg-primary"></div>空腹</div>
|
|
<div class="flex items-center gap-1"><div class="w-2 h-2 rounded-full bg-tertiary"></div>餐后</div>
|
|
</div>
|
|
</div>
|
|
<!-- Stats Row -->
|
|
<div class="flex justify-between items-center bg-surface-container-low rounded-xl p-4 mb-6">
|
|
<div class="flex flex-col items-center flex-1 border-r border-surface-container-highest">
|
|
<span class="text-headline-md font-headline-md text-tertiary">1</span>
|
|
<span class="text-label-md font-label-md text-on-surface-variant mt-1">天偏高</span>
|
|
</div>
|
|
<div class="flex flex-col items-center flex-1 border-r border-surface-container-highest">
|
|
<span class="text-headline-md font-headline-md text-primary">1</span>
|
|
<span class="text-label-md font-label-md text-on-surface-variant mt-1">天正常</span>
|
|
</div>
|
|
<div class="flex flex-col items-center flex-1">
|
|
<span class="text-headline-md font-headline-md text-on-surface">2</span>
|
|
<span class="text-label-md font-label-md text-on-surface-variant mt-1">天有记录</span>
|
|
</div>
|
|
</div>
|
|
<!-- Faux Chart Area -->
|
|
<div class="h-[180px] w-full relative flex items-end pt-4 pb-6 border-b border-surface-container-highest border-dashed">
|
|
<!-- Y Axis -->
|
|
<div class="absolute left-0 top-0 bottom-6 flex flex-col justify-between text-[10px] text-on-surface-variant">
|
|
<span class="">23.0</span>
|
|
<span class="">18.0</span>
|
|
<span class="">13.0</span>
|
|
<span class="">8.0</span>
|
|
<span class="">3.0</span>
|
|
</div>
|
|
<!-- Target Line -->
|
|
<div class="absolute left-6 right-0 bottom-12 border-b border-tertiary border-dashed opacity-30"></div>
|
|
<span class="absolute left-6 bottom-12 text-[10px] text-tertiary -translate-y-full mb-1">空腹阈 7</span>
|
|
<!-- Chart Lines -->
|
|
<div class="absolute inset-0 left-8 overflow-hidden">
|
|
<div class="absolute bottom-6 right-8 w-1 h-[100px] bg-primary/20 rounded-t-full transform rotate-45 origin-bottom"></div>
|
|
<div class="absolute bottom-[80px] right-2 w-1 h-[60px] bg-tertiary/20 rounded-t-full transform rotate-12 origin-bottom"></div>
|
|
<div class="absolute right-[15%] bottom-[15%] w-2 h-2 rounded-full border-[1.5px] border-primary bg-white z-10"></div>
|
|
<div class="absolute right-[5%] bottom-[75%] w-2 h-2 rounded-full border-[1.5px] border-tertiary bg-white z-10"></div>
|
|
<!-- Tooltips -->
|
|
<div class="absolute right-[2%] bottom-[85%] bg-tertiary text-white text-[10px] px-1.5 py-0.5 rounded font-bold">18</div>
|
|
<div class="absolute right-[2%] bottom-[65%] bg-tertiary text-white text-[10px] px-1.5 py-0.5 rounded font-bold">20</div>
|
|
</div>
|
|
<!-- X Axis -->
|
|
<div class="absolute left-8 right-0 bottom-0 flex justify-between text-[10px] text-on-surface-variant translate-y-full pt-2">
|
|
<span class="">05-23</span>
|
|
<span class="">05-25</span>
|
|
<span class="">05-27</span>
|
|
<span class="">05-29</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- 3. 最新测量 & 概览 (Combined Section) -->
|
|
<section class="flex flex-col gap-4">
|
|
<!-- Latest Reading -->
|
|
<div class="bg-error-container text-on-error-container rounded-3xl p-6 ambient-shadow relative overflow-hidden flex flex-col items-center text-center justify-center min-h-[160px]">
|
|
<div class="absolute inset-0 opacity-10 pointer-events-none" style="background-image: radial-gradient(circle at 2px 2px, currentColor 1px, transparent 0); background-size: 16px 16px;"></div>
|
|
<span class="text-label-md font-label-md uppercase tracking-wider mb-1 opacity-90 z-10">最新测量 · 餐后</span>
|
|
<div class="flex items-baseline gap-1 z-10">
|
|
<span class="text-[56px] font-extrabold leading-none tracking-tighter">20.00</span>
|
|
<span class="text-body-lg font-body-lg opacity-80 font-medium">mmol/L</span>
|
|
</div>
|
|
<div class="mt-3 inline-flex items-center gap-1.5 bg-white/30 backdrop-blur-sm px-3 py-1 rounded-full z-10">
|
|
<span class="material-symbols-outlined text-[16px] icon-fill">warning</span>
|
|
<span class="text-label-md font-label-md font-bold">偏高，请遵医嘱</span>
|
|
</div>
|
|
</div>
|
|
<!-- Today's Summary -->
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div class="bg-surface-container-lowest rounded-2xl p-4 ambient-shadow flex flex-col gap-2 border border-surface-container-highest/50">
|
|
<span class="text-label-md font-label-md text-on-surface-variant">空腹</span>
|
|
<div class="flex items-baseline gap-1 text-tertiary">
|
|
<span class="text-headline-lg font-headline-lg">18.00</span>
|
|
</div>
|
|
<span class="text-[10px] text-tertiary bg-error-container/50 px-2 py-0.5 rounded-sm inline-block w-fit">偏高</span>
|
|
</div>
|
|
<div class="bg-surface-container-lowest rounded-2xl p-4 ambient-shadow flex flex-col gap-2 border border-surface-container-highest/50">
|
|
<span class="text-label-md font-label-md text-on-surface-variant">餐后</span>
|
|
<div class="flex items-baseline gap-1 text-tertiary">
|
|
<span class="text-headline-lg font-headline-lg">20.00</span>
|
|
</div>
|
|
<span class="text-[10px] text-tertiary bg-error-container/50 px-2 py-0.5 rounded-sm inline-block w-fit">偏高</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- 4. AI 饮食建议 -->
|
|
<section class="bg-gradient-to-br from-primary/10 to-primary/5 rounded-3xl p-5 border border-primary/10 relative overflow-hidden">
|
|
<div class="absolute -right-8 -top-8 w-32 h-32 bg-primary-fixed-dim/20 rounded-full blur-2xl"></div>
|
|
<div class="flex justify-between items-center mb-4 relative z-10">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-[18px]">temp_preferences_custom</span>
|
|
</div>
|
|
<h3 class="text-headline-md font-headline-md text-on-surface">AI 饮食建议</h3>
|
|
</div>
|
|
<button class="text-label-md font-label-md text-primary flex items-center gap-1 bg-white/50 px-3 py-1.5 rounded-full hover:bg-white transition-colors">
|
|
<span class="material-symbols-outlined text-[14px]">refresh</span>
|
|
换一换
|
|
</button>
|
|
</div>
|
|
<p class="text-body-md font-body-md text-on-surface-variant mb-4 relative z-10">读您近 7 天 · 30 天血糖，定制今日三餐</p>
|
|
<div class="flex flex-col gap-3 relative z-10">
|
|
<div class="bg-white/80 backdrop-blur-md rounded-2xl p-4 shadow-sm border border-white">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span class="material-symbols-outlined text-orange-400">light_mode</span>
|
|
<span class="font-bold text-on-surface">早餐</span>
|
|
</div>
|
|
<p class="text-body-md font-body-md text-on-surface-variant">小米粥（少米多水）加煮鸡蛋一个</p>
|
|
</div>
|
|
<div class="bg-white/80 backdrop-blur-md rounded-2xl p-4 shadow-sm border border-white">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span class="material-symbols-outlined text-primary">eco</span>
|
|
<span class="font-bold text-on-surface">午餐</span>
|
|
</div>
|
|
<p class="text-body-md font-body-md text-on-surface-variant">清蒸鱼块、蒜蓉炒苋菜、二米饭（小米掺大米）</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Spacer for bottom nav on mobile -->
|
|
<section class="sticky bottom-20 md:bottom-6 z-30 px-container-margin md:px-0 mb-4">
|
|
<div class="bg-white/90 backdrop-blur-md rounded-full p-2 pl-5 flex items-center gap-3 shadow-[0_8px_32px_rgba(0,108,73,0.15)] border border-primary/10">
|
|
<div class="w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center">
|
|
<span class="material-symbols-outlined icon-fill text-[18px]">sparkles</span>
|
|
</div>
|
|
<input type="text" placeholder="输入食物名称或健康疑问，咨询 AI..." class="flex-1 bg-transparent border-none focus:ring-0 text-body-md placeholder:text-on-surface-variant/60 py-2">
|
|
<button class="bg-primary text-on-primary h-10 w-10 rounded-full flex items-center justify-center btn-press shadow-sm">
|
|
<span class="material-symbols-outlined">send</span>
|
|
</button>
|
|
</div>
|
|
</section><div class="h-8 md:hidden"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Right Column: Secondary Info (Visible on Tablet/Desktop) -->
|
|
<aside class="hidden lg:flex w-80 flex-col gap-section-margin pt-4 pr-container-margin">
|
|
<div class="bg-surface-container-lowest rounded-3xl p-6 ambient-shadow">
|
|
<h3 class="text-headline-md font-headline-md text-on-surface mb-4">运动降糖</h3>
|
|
<div class="bg-error-container/30 rounded-xl p-4 mb-4">
|
|
<p class="text-body-md font-body-md text-on-surface">近期血糖偏高，三顿饭后都动一动，最能帮着把糖降下来。</p>
|
|
</div>
|
|
<ul class="flex flex-col gap-3 text-body-md text-on-surface-variant">
|
|
<li class="flex gap-2"><span class="font-bold text-tertiary">1</span> <span class="">早饭后快走 15 分钟</span></li>
|
|
<li class="flex gap-2"><span class="font-bold text-tertiary">2</span> <span class="">午饭后原地踏步 20-30 分钟</span></li>
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
<!-- BottomNavBar (Mobile Only) -->
|
|
|
|
|
|
|
|
|
|
|
|
</body></html> |