394 lines
24 KiB
HTML
394 lines
24 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<html class="light" lang="en"><head>
|
||
|
|
<meta charset="utf-8"/>
|
||
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
|
|
<title>ZhiXi - Profile & Settings</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
|
|
<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"/>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
|
|
<script id="tailwind-config">
|
||
|
|
tailwind.config = {
|
||
|
|
darkMode: "class",
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
"colors": {
|
||
|
|
"on-secondary-fixed": "#2c0050",
|
||
|
|
"background": "#f9f9fd",
|
||
|
|
"secondary-fixed": "#f0dbff",
|
||
|
|
"on-secondary": "#ffffff",
|
||
|
|
"tertiary-fixed": "#e1e0ff",
|
||
|
|
"error-container": "#ffdad6",
|
||
|
|
"inverse-surface": "#2e3034",
|
||
|
|
"tertiary-fixed-dim": "#c0c1ff",
|
||
|
|
"on-primary-fixed": "#001c39",
|
||
|
|
"surface-bright": "#f9f9fd",
|
||
|
|
"on-secondary-container": "#440076",
|
||
|
|
"tertiary": "#4648d4",
|
||
|
|
"primary-fixed-dim": "#a4c9ff",
|
||
|
|
"outline": "#717783",
|
||
|
|
"on-tertiary-fixed-variant": "#2f2ebe",
|
||
|
|
"on-tertiary-container": "#fffbff",
|
||
|
|
"primary": "#005da7",
|
||
|
|
"secondary-fixed-dim": "#deb7ff",
|
||
|
|
"on-primary-fixed-variant": "#004883",
|
||
|
|
"inverse-on-surface": "#f0f0f4",
|
||
|
|
"error": "#ba1a1a",
|
||
|
|
"on-primary-container": "#fdfcff",
|
||
|
|
"on-primary": "#ffffff",
|
||
|
|
"surface-container-low": "#f3f3f7",
|
||
|
|
"surface-container-highest": "#e2e2e6",
|
||
|
|
"on-tertiary-fixed": "#07006c",
|
||
|
|
"surface-dim": "#d9dade",
|
||
|
|
"inverse-primary": "#a4c9ff",
|
||
|
|
"surface-variant": "#e2e2e6",
|
||
|
|
"surface-container-lowest": "#ffffff",
|
||
|
|
"surface-tint": "#0060ac",
|
||
|
|
"primary-container": "#2976c7",
|
||
|
|
"surface": "#f9f9fd",
|
||
|
|
"on-surface-variant": "#414751",
|
||
|
|
"on-background": "#1a1c1f",
|
||
|
|
"surface-container-high": "#e8e8ec",
|
||
|
|
"on-error-container": "#93000a",
|
||
|
|
"secondary": "#8135c5",
|
||
|
|
"on-secondary-fixed-variant": "#670fac",
|
||
|
|
"outline-variant": "#c1c7d3",
|
||
|
|
"on-tertiary": "#ffffff",
|
||
|
|
"on-surface": "#1a1c1f",
|
||
|
|
"on-error": "#ffffff",
|
||
|
|
"secondary-container": "#ba70ff",
|
||
|
|
"primary-fixed": "#d4e3ff",
|
||
|
|
"tertiary-container": "#6063ee",
|
||
|
|
"surface-container": "#ededf1"
|
||
|
|
},
|
||
|
|
"borderRadius": {
|
||
|
|
"DEFAULT": "0.25rem",
|
||
|
|
"lg": "0.5rem",
|
||
|
|
"xl": "0.75rem",
|
||
|
|
"full": "9999px"
|
||
|
|
},
|
||
|
|
"spacing": {
|
||
|
|
"xl": "64px",
|
||
|
|
"md": "24px",
|
||
|
|
"container-margin": "20px",
|
||
|
|
"base": "8px",
|
||
|
|
"sm": "12px",
|
||
|
|
"lg": "40px",
|
||
|
|
"xs": "4px",
|
||
|
|
"gutter": "16px"
|
||
|
|
},
|
||
|
|
"fontFamily": {
|
||
|
|
"h3": ["Manrope"],
|
||
|
|
"h2": ["Manrope"],
|
||
|
|
"label-caps": ["Manrope"],
|
||
|
|
"body-md": ["Manrope"],
|
||
|
|
"body-lg": ["Manrope"],
|
||
|
|
"h1": ["Manrope"]
|
||
|
|
},
|
||
|
|
"fontSize": {
|
||
|
|
"h3": ["22px", { "lineHeight": "1.3", "letterSpacing": "0", "fontWeight": "600" }],
|
||
|
|
"h2": ["28px", { "lineHeight": "1.3", "letterSpacing": "-0.01em", "fontWeight": "600" }],
|
||
|
|
"label-caps": ["12px", { "lineHeight": "1.0", "letterSpacing": "0.05em", "fontWeight": "600" }],
|
||
|
|
"body-md": ["15px", { "lineHeight": "1.5", "letterSpacing": "0", "fontWeight": "400" }],
|
||
|
|
"body-lg": ["17px", { "lineHeight": "1.6", "letterSpacing": "-0.01em", "fontWeight": "400" }],
|
||
|
|
"h1": ["34px", { "lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "700" }]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.material-symbols-outlined {
|
||
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||
|
|
}
|
||
|
|
.material-symbols-outlined.filled {
|
||
|
|
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
min-height: max(884px, 100dvh);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="bg-gradient-to-br from-surface via-surface to-primary-fixed-dim/20 text-on-surface antialiased font-body-md selection:bg-primary-fixed selection:text-on-primary-fixed relative">
|
||
|
|
<!-- Decorative Background Paths -->
|
||
|
|
<div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
|
||
|
|
<svg class="absolute top-0 right-0 w-full h-[600px] opacity-30 mix-blend-multiply dark:opacity-20 dark:mix-blend-screen" fill="none" viewbox="0 0 400 600" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path d="M400 0H0V100C100 100 200 200 200 300C200 400 300 500 400 500V0Z" fill="url(#paint0_linear)"></path>
|
||
|
|
<path d="M400 600C300 600 200 500 200 400C200 300 100 200 0 200V600H400Z" fill="url(#paint1_linear)"></path>
|
||
|
|
<defs>
|
||
|
|
<lineargradient gradientunits="userSpaceOnUse" id="paint0_linear" x1="200" x2="200" y1="0" y2="500">
|
||
|
|
<stop stop-color="#D4E3FF"></stop>
|
||
|
|
<stop offset="1" stop-color="#D4E3FF" stop-opacity="0"></stop>
|
||
|
|
</lineargradient>
|
||
|
|
<lineargradient gradientunits="userSpaceOnUse" id="paint1_linear" x1="200" x2="200" y1="200" y2="600">
|
||
|
|
<stop stop-color="#F0DBFF"></stop>
|
||
|
|
<stop offset="1" stop-color="#F0DBFF" stop-opacity="0"></stop>
|
||
|
|
</lineargradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<!-- TopAppBar from JSON -->
|
||
|
|
<header class="bg-white/60 dark:bg-slate-900/60 backdrop-blur-xl docked full-width top-0 sticky z-40 border-b border-white/20">
|
||
|
|
<div class="flex justify-between items-center w-full px-5 py-3">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<div class="w-8 h-8 rounded-full bg-primary-fixed flex items-center justify-center overflow-hidden">
|
||
|
|
<span class="material-symbols-outlined text-on-primary-fixed text-[20px]">person</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="font-['Manrope'] font-bold text-xl text-slate-900 dark:text-slate-50">知习</div>
|
||
|
|
<button class="hover:opacity-80 transition-opacity Active: scale-95 transition-transform duration-150 text-blue-500 dark:text-blue-400">
|
||
|
|
<span class="material-symbols-outlined">settings</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<main class="max-w-md mx-auto pt-lg pb-32">
|
||
|
|
<!-- Profile Header -->
|
||
|
|
<section class="flex flex-col items-center px-container-margin">
|
||
|
|
<div class="relative w-24 h-24 rounded-full overflow-hidden shadow-[0_8px_30px_rgba(0,0,0,0.08)] mb-sm border-2 border-surface-container-lowest">
|
||
|
|
<img alt="Profile Photo" class="w-full h-full object-cover" data-alt="A highly detailed, cinematic headshot of a young professional male in his late 20s, featuring short dark hair and a calm, intellectual expression. The lighting is high-key and airy, creating a minimalist, Apple-like aesthetic with soft, diffused white light. The background is an abstract, ultra-clean light gray gradient with a subtle hint of cool blue, reflecting a serene, high-tech sanctuary environment." src="https://lh3.googleusercontent.com/aida-public/AB6AXuC7e2iYy788XFD3zf_LHXlcz18RJtJnMI5w5265E_gCfKXn2fSX_tLmHLFtOdZr4Tg2gUQSIc6JkJ3C_Rj-VraIbN2usG-JRaSqjM_fQmHorg9pkboW8Nk7eU7_mMX3OnjiBf5PnjCdQZQKVmEFP5hhrjVwR_f-G4RqURKr0E6Cgsub5bHs_Abj1yS_0t9PO3aojNwoavgqBqtmk0ZTa-RkArjCDkf4WHKH0JDnwOYoaPq9ZRlhizxqFWqHepccEnVrBgPK3iFo"/>
|
||
|
|
</div>
|
||
|
|
<h1 class="font-h2 text-h2 text-on-surface">Alex Mercer</h1>
|
||
|
|
<p class="font-body-md text-body-md text-on-surface-variant mt-xs bg-surface-container-lowest/80 backdrop-blur-md border border-white/40 px-3 py-1 rounded-full shadow-sm">今天也在把知识变清楚</p>
|
||
|
|
</section>
|
||
|
|
<!-- Learning Overview Stats -->
|
||
|
|
<section class="grid grid-cols-2 gap-sm px-container-margin mt-lg">
|
||
|
|
<div class="bg-surface-container-lowest/80 backdrop-blur-xl rounded-xl p-md shadow-[0_4px_40px_rgba(0,0,0,0.03)] border border-white/40 flex flex-col items-start">
|
||
|
|
<div class="w-8 h-8 rounded-full bg-primary-fixed/50 flex items-center justify-center text-primary mb-sm">
|
||
|
|
<span class="material-symbols-outlined text-[18px]">local_fire_department</span>
|
||
|
|
</div>
|
||
|
|
<h3 class="font-h2 text-h2 text-on-surface mb-1">14 <span class="font-body-md text-body-md text-on-surface-variant">天</span></h3>
|
||
|
|
<p class="font-label-caps text-label-caps text-outline uppercase tracking-wider">Learning Streak</p>
|
||
|
|
</div>
|
||
|
|
<div class="bg-surface-container-lowest/80 backdrop-blur-xl rounded-xl p-md shadow-[0_4px_40px_rgba(0,0,0,0.03)] border border-white/40 flex flex-col items-start">
|
||
|
|
<div class="w-8 h-8 rounded-full bg-secondary-fixed/50 flex items-center justify-center text-secondary mb-sm">
|
||
|
|
<span class="material-symbols-outlined text-[18px]">calendar_month</span>
|
||
|
|
</div>
|
||
|
|
<h3 class="font-h2 text-h2 text-on-surface mb-1">24 <span class="font-body-md text-body-md text-on-surface-variant">次</span></h3>
|
||
|
|
<p class="font-label-caps text-label-caps text-outline uppercase tracking-wider">Studies this Month</p>
|
||
|
|
</div>
|
||
|
|
<div class="bg-surface-container-lowest/80 backdrop-blur-xl rounded-xl p-md shadow-[0_4px_40px_rgba(0,0,0,0.03)] border border-white/40 flex flex-col items-start">
|
||
|
|
<div class="w-8 h-8 rounded-full bg-tertiary-fixed/50 flex items-center justify-center text-tertiary mb-sm">
|
||
|
|
<span class="material-symbols-outlined text-[18px]">all_inclusive</span>
|
||
|
|
</div>
|
||
|
|
<h3 class="font-h2 text-h2 text-on-surface mb-1">12 <span class="font-body-md text-body-md text-on-surface-variant">个</span></h3>
|
||
|
|
<p class="font-label-caps text-label-caps text-outline uppercase tracking-wider">Closed Loops</p>
|
||
|
|
</div>
|
||
|
|
<div class="bg-surface-container-lowest/80 backdrop-blur-xl rounded-xl p-md shadow-[0_4px_40px_rgba(0,0,0,0.03)] border border-white/40 flex flex-col items-start">
|
||
|
|
<div class="w-8 h-8 rounded-full bg-primary-fixed/30 flex items-center justify-center text-primary mb-sm">
|
||
|
|
<span class="material-symbols-outlined text-[18px]">schedule</span>
|
||
|
|
</div>
|
||
|
|
<h3 class="font-h2 text-h2 text-on-surface mb-1">128 <span class="font-body-md text-body-md text-on-surface-variant">hrs</span></h3>
|
||
|
|
<p class="font-label-caps text-label-caps text-outline uppercase tracking-wider">Total Study</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<!-- Blue Learning Activity Map -->
|
||
|
|
<section class="mx-container-margin mt-lg bg-surface-container-lowest/80 backdrop-blur-xl rounded-xl shadow-[0_4px_40px_rgba(0,0,0,0.03)] border border-white/40 p-md">
|
||
|
|
<div class="flex justify-between items-end mb-sm">
|
||
|
|
<div>
|
||
|
|
<h2 class="font-h3 text-h3 text-on-surface">学习活跃图</h2>
|
||
|
|
<p class="font-body-md text-body-md text-on-surface-variant mt-1">过去 90 天，你的学习投入记录</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-wrap gap-1 mt-md">
|
||
|
|
<!-- Simulated 90 day grid squares with varying activity -->
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-container"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-container"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-container"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-secondary text-white"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-container"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-secondary text-white"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-container"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-container"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-container"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-container"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-secondary text-white"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-container"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-secondary text-white"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-container"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-container"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-container"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-container"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-secondary text-white"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-container"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-secondary text-white"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-container"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-container"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-container"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-container"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-secondary text-white"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-3 h-3 rounded-[3px] bg-surface-container-highest"></div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center justify-end gap-2 mt-sm">
|
||
|
|
<span class="font-label-caps text-[10px] text-outline">Less</span>
|
||
|
|
<div class="flex gap-[2px]">
|
||
|
|
<div class="w-2.5 h-2.5 rounded-[2px] bg-surface-container-highest"></div>
|
||
|
|
<div class="w-2.5 h-2.5 rounded-[2px] bg-primary-fixed"></div>
|
||
|
|
<div class="w-2.5 h-2.5 rounded-[2px] bg-primary-container"></div>
|
||
|
|
<div class="w-2.5 h-2.5 rounded-[2px] bg-primary"></div>
|
||
|
|
<div class="w-2.5 h-2.5 rounded-[2px] bg-secondary"></div>
|
||
|
|
</div>
|
||
|
|
<span class="font-label-caps text-[10px] text-outline">More</span>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<!-- Items to Consolidate -->
|
||
|
|
<h2 class="px-container-margin mt-xl mb-sm font-label-caps text-label-caps text-outline uppercase tracking-wider">待巩固项</h2>
|
||
|
|
<section class="flex flex-col gap-sm px-container-margin">
|
||
|
|
<div class="bg-surface-container-lowest/80 backdrop-blur-xl rounded-xl p-md shadow-[0_4px_40px_rgba(0,0,0,0.03)] border border-white/40">
|
||
|
|
<div class="flex justify-between items-start mb-sm">
|
||
|
|
<div>
|
||
|
|
<h3 class="font-h3 text-h3 text-on-surface">记忆曲线</h3>
|
||
|
|
<p class="font-body-md text-sm text-outline mt-1">认知心理学基础</p>
|
||
|
|
</div>
|
||
|
|
<span class="bg-error-container text-on-error-container font-label-caps text-[10px] px-2 py-1 rounded-md uppercase tracking-wide">Pending</span>
|
||
|
|
</div>
|
||
|
|
<div class="bg-surface-container-low rounded-lg p-sm mb-sm border border-surface-container-highest">
|
||
|
|
<div class="flex gap-2">
|
||
|
|
<span class="material-symbols-outlined text-tertiary text-[18px]">auto_awesome</span>
|
||
|
|
<p class="font-body-md text-[14px] text-on-surface-variant leading-relaxed">今晚复习一次，并尝试主动回忆</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="w-full py-2 bg-primary text-on-primary font-body-md rounded-lg shadow-sm hover:bg-surface-tint transition-colors active:scale-[0.98]">
|
||
|
|
Go Consolidate
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="bg-surface-container-lowest/80 backdrop-blur-xl rounded-xl p-md shadow-[0_4px_40px_rgba(0,0,0,0.03)] border border-white/40">
|
||
|
|
<div class="flex justify-between items-start mb-sm">
|
||
|
|
<div>
|
||
|
|
<h3 class="font-h3 text-h3 text-on-surface">激活函数的作用</h3>
|
||
|
|
<p class="font-body-md text-sm text-outline mt-1">高级神经网络</p>
|
||
|
|
</div>
|
||
|
|
<span class="bg-surface-container-high text-on-surface-variant font-label-caps text-[10px] px-2 py-1 rounded-md uppercase tracking-wide">Added to Review</span>
|
||
|
|
</div>
|
||
|
|
<div class="bg-surface-container-low rounded-lg p-sm mb-sm border border-surface-container-highest">
|
||
|
|
<div class="flex gap-2">
|
||
|
|
<span class="material-symbols-outlined text-tertiary text-[18px]">auto_awesome</span>
|
||
|
|
<p class="font-body-md text-[14px] text-on-surface-variant leading-relaxed">用一个例子解释它为什么必要</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="w-full py-2 bg-primary/10 text-primary font-body-md rounded-lg border border-primary/20 hover:bg-primary/20 transition-colors active:scale-[0.98]">
|
||
|
|
Review Again
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<!-- Recent Learning History -->
|
||
|
|
<h2 class="px-container-margin mt-xl mb-sm font-label-caps text-label-caps text-outline uppercase tracking-wider">最近学习记录</h2>
|
||
|
|
<section class="mx-container-margin bg-surface-container-lowest/80 backdrop-blur-xl rounded-xl shadow-[0_4px_40px_rgba(0,0,0,0.03)] border border-white/40 p-md relative overflow-hidden">
|
||
|
|
<div class="absolute left-6 top-6 bottom-6 w-px bg-surface-container-highest"></div>
|
||
|
|
<div class="flex flex-col gap-md relative z-10">
|
||
|
|
<div class="flex gap-sm items-start">
|
||
|
|
<div class="w-8 h-8 rounded-full bg-primary flex-shrink-0 flex items-center justify-center text-white border-2 border-surface-container-lowest shadow-sm z-10">
|
||
|
|
<span class="material-symbols-outlined text-[16px]">check_circle</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="font-body-md text-on-surface font-medium">完成一次主动回忆</p>
|
||
|
|
<p class="font-body-md text-sm text-outline mt-1">认知心理学 · 23 分钟</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex gap-sm items-start">
|
||
|
|
<div class="w-8 h-8 rounded-full bg-surface-container-high flex-shrink-0 flex items-center justify-center text-on-surface-variant border-2 border-surface-container-lowest shadow-sm z-10">
|
||
|
|
<span class="material-symbols-outlined text-[16px]">analytics</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="font-body-md text-on-surface font-medium">生成 AI 分析</p>
|
||
|
|
<p class="font-body-md text-sm text-outline mt-1">神经网络基础</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex gap-sm items-start">
|
||
|
|
<div class="w-8 h-8 rounded-full bg-surface-container-high flex-shrink-0 flex items-center justify-center text-on-surface-variant border-2 border-surface-container-lowest shadow-sm z-10">
|
||
|
|
<span class="material-symbols-outlined text-[16px]">history_edu</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="font-body-md text-on-surface font-medium">复习了 2 个待巩固项</p>
|
||
|
|
<p class="font-body-md text-sm text-outline mt-1">微积分速成</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
<!-- BottomNavBar from JSON -->
|
||
|
|
<nav class="bg-white/80 dark:bg-slate-900/80 backdrop-blur-2xl fixed bottom-0 w-full z-50 rounded-t-none border-t border-slate-200/50 dark:border-slate-800/50 shadow-[0_-4px_24px_rgba(0,0,0,0.04)] fixed bottom-0 left-0 w-full flex justify-around items-center px-4 pt-2 pb-safe-offset-2 pb-6">
|
||
|
|
<button class="flex flex-col items-center justify-center text-slate-400 dark:text-slate-500 hover:bg-slate-50/50 dark:hover:bg-slate-800/50 Active: scale-90 transition-transform duration-200 p-2 rounded-lg">
|
||
|
|
<span class="material-symbols-outlined text-[24px] mb-1">menu_book</span>
|
||
|
|
<span class="font-['Manrope'] text-[10px] font-medium tracking-wide">学习</span>
|
||
|
|
</button>
|
||
|
|
<button class="flex flex-col items-center justify-center text-slate-400 dark:text-slate-500 hover:bg-slate-50/50 dark:hover:bg-slate-800/50 Active: scale-90 transition-transform duration-200 p-2 rounded-lg">
|
||
|
|
<span class="material-symbols-outlined text-[24px] mb-1">database</span>
|
||
|
|
<span class="font-['Manrope'] text-[10px] font-medium tracking-wide">知识库</span>
|
||
|
|
</button>
|
||
|
|
<button class="flex flex-col items-center justify-center text-slate-400 dark:text-slate-500 hover:bg-slate-50/50 dark:hover:bg-slate-800/50 Active: scale-90 transition-transform duration-200 p-2 rounded-lg">
|
||
|
|
<span class="material-symbols-outlined text-[24px] mb-1">auto_awesome</span>
|
||
|
|
<span class="font-['Manrope'] text-[10px] font-medium tracking-wide">AI 助手</span>
|
||
|
|
</button>
|
||
|
|
<button class="flex flex-col items-center justify-center text-blue-500 dark:text-blue-400 font-bold hover:bg-slate-50/50 dark:hover:bg-slate-800/50 Active: scale-90 transition-transform duration-200 p-2 rounded-lg">
|
||
|
|
<span class="material-symbols-outlined filled text-[24px] mb-1">person</span>
|
||
|
|
<span class="font-['Manrope'] text-[10px] font-medium tracking-wide">我的</span>
|
||
|
|
</button>
|
||
|
|
</nav>
|
||
|
|
</body></html>
|