322 lines
16 KiB
HTML
322 lines
16 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<html lang="zh-CN"><head>
|
||
|
|
<meta charset="utf-8"/>
|
||
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
|
|
<title>ZhiXi - 学习</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&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>
|
||
|
|
body {
|
||
|
|
background-color: #f9f9fd;
|
||
|
|
background-image: radial-gradient(at 0% 0%, hsla(242,100%,92%,1) 0, transparent 50%), radial-gradient(at 100% 0%, hsla(212,100%,92%,1) 0, transparent 50%);
|
||
|
|
background-attachment: fixed;
|
||
|
|
}
|
||
|
|
.glass-card {
|
||
|
|
background: rgba(255, 255, 255, 0.7);
|
||
|
|
backdrop-filter: blur(24px);
|
||
|
|
-webkit-backdrop-filter: blur(24px);
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
||
|
|
box-shadow: 0 8px 32px 0 rgba(0, 93, 167, 0.05);
|
||
|
|
}
|
||
|
|
.ai-glow-btn {
|
||
|
|
background: linear-gradient(135deg, #005da7, #4648d4);
|
||
|
|
box-shadow: 0 4px 15px rgba(70, 72, 212, 0.3);
|
||
|
|
transition: transform 0.15s ease-in-out;
|
||
|
|
}
|
||
|
|
.ai-glow-btn:active {
|
||
|
|
transform: scale(0.96);
|
||
|
|
}
|
||
|
|
.liquid-trace {
|
||
|
|
background: linear-gradient(90deg, #a4c9ff, #6063ee, #a4c9ff);
|
||
|
|
background-size: 200% auto;
|
||
|
|
animation: pulse-glow 3s infinite linear;
|
||
|
|
}
|
||
|
|
@keyframes pulse-glow {
|
||
|
|
0% { background-position: 0% center; }
|
||
|
|
100% { background-position: 200% center; }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
min-height: max(884px, 100dvh);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="text-on-surface pb-[100px] min-h-screen">
|
||
|
|
<!-- TopAppBar -->
|
||
|
|
<header class="bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl docked full-width top-0 sticky border-b border-slate-200/50 dark:border-slate-800/50 shadow-sm dark:shadow-none flex justify-between items-center w-full px-5 py-3 z-40">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<button class="text-slate-900 dark:text-slate-50 hover:opacity-80 transition-opacity p-2 -ml-2 rounded-full hover:bg-surface-container">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">arrow_back_ios_new</span>
|
||
|
|
</button>
|
||
|
|
<h1 class="font-['Manrope'] font-bold text-xl text-slate-900 dark:text-slate-50">知习</h1>
|
||
|
|
</div>
|
||
|
|
<button class="text-blue-500 dark:text-blue-400 hover:opacity-80 transition-opacity p-2 rounded-full hover:bg-surface-container">
|
||
|
|
<span class="material-symbols-outlined text-[24px]">settings</span>
|
||
|
|
</button>
|
||
|
|
</header>
|
||
|
|
<main class="max-w-4xl mx-auto px-container-margin pt-md pb-xl">
|
||
|
|
<!-- Page Header -->
|
||
|
|
<div class="mb-lg">
|
||
|
|
<h2 class="font-h1 text-h1 text-on-surface mb-xs">学习</h2>
|
||
|
|
<p class="font-body-lg text-body-lg text-outline">让每一次学习都进入闭环</p>
|
||
|
|
</div>
|
||
|
|
<!-- Learning Loop Visual -->
|
||
|
|
<div class="mb-lg flex items-center justify-center gap-2 text-primary font-label-caps text-label-caps bg-primary-fixed/30 py-3 px-4 rounded-full w-fit mx-auto glass-card">
|
||
|
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">input</span> 输入</span>
|
||
|
|
<span class="material-symbols-outlined text-[14px] text-outline-variant">arrow_forward</span>
|
||
|
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">output</span> 输出</span>
|
||
|
|
<span class="material-symbols-outlined text-[14px] text-outline-variant">arrow_forward</span>
|
||
|
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">feedback</span> 反馈</span>
|
||
|
|
<span class="material-symbols-outlined text-[14px] text-outline-variant">arrow_forward</span>
|
||
|
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">cycle</span> 复习</span>
|
||
|
|
</div>
|
||
|
|
<!-- Bento Grid Layout -->
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-md">
|
||
|
|
<!-- Today's Study Card (Spans full width on mobile, 1 col on md) -->
|
||
|
|
<div class="glass-card rounded-xl p-md flex flex-col justify-between md:col-span-2 relative overflow-hidden">
|
||
|
|
<div class="absolute top-0 left-0 w-full h-[2px] liquid-trace"></div>
|
||
|
|
<div>
|
||
|
|
<div class="flex justify-between items-start mb-sm">
|
||
|
|
<span class="bg-secondary-container/20 text-secondary px-3 py-1 rounded-full font-label-caps text-label-caps">今日重点</span>
|
||
|
|
<span class="flex items-center gap-1 font-body-md text-body-md text-outline">
|
||
|
|
<span class="material-symbols-outlined text-[18px]">timer</span> 20 mins
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<h3 class="font-h2 text-h2 text-on-surface mb-xs">认知心理学：记忆的编码与提取</h3>
|
||
|
|
<p class="font-body-md text-body-md text-on-surface-variant mb-md">进入知识内化的关键阶段，建议通过主动回忆来加强神经连接。</p>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-end mt-sm">
|
||
|
|
<button class="ai-glow-btn text-on-primary font-body-md text-body-md font-medium px-6 py-3 rounded-full flex items-center gap-2 w-full md:w-auto justify-center">
|
||
|
|
<span class="material-symbols-outlined" data-weight="fill" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
|
||
|
|
开始主动回忆
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Active Recall Module -->
|
||
|
|
<div class="glass-card rounded-xl p-md flex flex-col justify-center text-center items-center">
|
||
|
|
<div class="w-12 h-12 rounded-full bg-tertiary-container/10 flex items-center justify-center mb-sm">
|
||
|
|
<span class="material-symbols-outlined text-[28px] text-tertiary">psychiatry</span>
|
||
|
|
</div>
|
||
|
|
<h3 class="font-h3 text-h3 text-on-surface mb-xs">先试着用自己的话说出来</h3>
|
||
|
|
<p class="font-body-md text-body-md text-outline mb-md">不要急着看答案，先回忆一次</p>
|
||
|
|
<button class="bg-white border border-outline-variant text-on-surface font-body-md text-body-md font-medium px-5 py-2 rounded-full hover:bg-surface-container transition-colors w-full">
|
||
|
|
快速自我测试
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<!-- Weak Point Consolidation -->
|
||
|
|
<div class="glass-card rounded-xl p-md flex flex-col">
|
||
|
|
<h3 class="font-h3 text-h3 text-on-surface mb-sm flex items-center gap-2">
|
||
|
|
<span class="material-symbols-outlined text-error">target</span> 需要再巩固的地方
|
||
|
|
</h3>
|
||
|
|
<ul class="space-y-sm flex-1">
|
||
|
|
<li class="flex items-start gap-3 p-3 bg-surface-container-lowest/50 rounded-lg border border-outline-variant/30">
|
||
|
|
<span class="material-symbols-outlined text-[20px] text-primary mt-0.5">smart_toy</span>
|
||
|
|
<div>
|
||
|
|
<p class="font-body-md text-body-md font-medium text-on-surface">ReLU vs Sigmoid difference</p>
|
||
|
|
<p class="font-body-md text-body-md text-outline text-[13px] mt-1">AI 诊断：在上次测验中概念混淆</p>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- Today's Review Module (Spans full width) -->
|
||
|
|
<div class="glass-card rounded-xl p-md md:col-span-2">
|
||
|
|
<h3 class="font-h3 text-h3 text-on-surface mb-md flex items-center gap-2">
|
||
|
|
<span class="material-symbols-outlined text-secondary">history_edu</span> 今天适合复习
|
||
|
|
</h3>
|
||
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-sm">
|
||
|
|
<!-- Review Item 1 -->
|
||
|
|
<div class="p-4 bg-surface-container-lowest/60 rounded-lg border border-outline-variant/50 flex justify-between items-center">
|
||
|
|
<div>
|
||
|
|
<h4 class="font-body-lg text-body-lg font-medium text-on-surface">微观经济学基础</h4>
|
||
|
|
<div class="flex items-center gap-1 mt-1 text-error font-body-md text-body-md text-[13px]">
|
||
|
|
<span class="material-symbols-outlined text-[14px]">trending_down</span> 记忆曲线衰减预警
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="bg-primary-container text-on-primary-container font-body-md text-body-md px-4 py-2 rounded-full hover:opacity-90 transition-opacity">
|
||
|
|
复习
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<!-- Review Item 2 -->
|
||
|
|
<div class="p-4 bg-surface-container-lowest/60 rounded-lg border border-outline-variant/50 flex justify-between items-center">
|
||
|
|
<div>
|
||
|
|
<h4 class="font-body-lg text-body-lg font-medium text-on-surface">线性代数核心定理</h4>
|
||
|
|
<div class="flex items-center gap-1 mt-1 text-outline font-body-md text-body-md text-[13px]">
|
||
|
|
<span class="material-symbols-outlined text-[14px]">schedule</span> 距上次复习 3 天
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="bg-primary-container text-on-primary-container font-body-md text-body-md px-4 py-2 rounded-full hover:opacity-90 transition-opacity">
|
||
|
|
复习
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
<!-- BottomNavBar -->
|
||
|
|
<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-4 md:hidden">
|
||
|
|
<a 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 p-2 rounded-lg transition-colors" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[24px] mb-1" data-icon="menu_book">menu_book</span>
|
||
|
|
<span class="font-['Manrope'] text-[10px] font-medium tracking-wide">学习</span>
|
||
|
|
</a>
|
||
|
|
<a 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 p-2 rounded-lg transition-colors" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[24px] mb-1" data-icon="database">database</span>
|
||
|
|
<span class="font-['Manrope'] text-[10px] font-medium tracking-wide">知识库</span>
|
||
|
|
</a>
|
||
|
|
<a 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 p-2 rounded-lg transition-colors" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[24px] mb-1" data-icon="auto_awesome" data-weight="fill" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||
|
|
<span class="font-['Manrope'] text-[10px] font-medium tracking-wide">AI 助手</span>
|
||
|
|
</a>
|
||
|
|
<a 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 p-2 rounded-lg transition-colors" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[24px] mb-1" data-icon="person">person</span>
|
||
|
|
<span class="font-['Manrope'] text-[10px] font-medium tracking-wide">我的</span>
|
||
|
|
</a>
|
||
|
|
</nav>
|
||
|
|
</body></html>
|