WangDL
6062077e97
- AI home screen - Learning workspace - AI assistant - Learning analysis - Knowledge journey - Active recall lesson - Growth profile - Ethereal intelligence design
275 lines
16 KiB
HTML
275 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="zh-CN"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>知习 - 知识库</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-surface-variant": "#414751",
|
|
"surface-container-lowest": "#ffffff",
|
|
"error-container": "#ffdad6",
|
|
"on-tertiary": "#ffffff",
|
|
"primary-container": "#2976c7",
|
|
"on-surface": "#1a1c1f",
|
|
"on-error-container": "#93000a",
|
|
"secondary-fixed": "#f0dbff",
|
|
"surface-container-high": "#e8e8ec",
|
|
"primary": "#005da7",
|
|
"on-secondary": "#ffffff",
|
|
"on-error": "#ffffff",
|
|
"on-primary-fixed-variant": "#004883",
|
|
"outline": "#717783",
|
|
"on-secondary-fixed-variant": "#670fac",
|
|
"surface-container-highest": "#e2e2e6",
|
|
"on-tertiary-fixed-variant": "#2f2ebe",
|
|
"secondary-fixed-dim": "#deb7ff",
|
|
"surface-variant": "#e2e2e6",
|
|
"outline-variant": "#c1c7d3",
|
|
"inverse-on-surface": "#f0f0f4",
|
|
"surface-container": "#ededf1",
|
|
"surface-dim": "#d9dade",
|
|
"tertiary-fixed": "#e1e0ff",
|
|
"surface-bright": "#f9f9fd",
|
|
"tertiary": "#4648d4",
|
|
"surface": "#f9f9fd",
|
|
"on-tertiary-container": "#fffbff",
|
|
"on-secondary-fixed": "#2c0050",
|
|
"primary-fixed": "#d4e3ff",
|
|
"on-primary-container": "#fdfcff",
|
|
"inverse-surface": "#2e3034",
|
|
"on-primary-fixed": "#001c39",
|
|
"primary-fixed-dim": "#a4c9ff",
|
|
"on-tertiary-fixed": "#07006c",
|
|
"surface-tint": "#0060ac",
|
|
"secondary-container": "#ba70ff",
|
|
"tertiary-container": "#6063ee",
|
|
"error": "#ba1a1a",
|
|
"tertiary-fixed-dim": "#c0c1ff",
|
|
"background": "#f9f9fd",
|
|
"on-background": "#1a1c1f",
|
|
"on-secondary-container": "#440076",
|
|
"inverse-primary": "#a4c9ff",
|
|
"surface-container-low": "#f3f3f7",
|
|
"on-primary": "#ffffff",
|
|
"secondary": "#8135c5"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"sm": "12px",
|
|
"xs": "4px",
|
|
"xl": "64px",
|
|
"base": "8px",
|
|
"lg": "40px",
|
|
"gutter": "16px",
|
|
"md": "24px",
|
|
"container-margin": "20px"
|
|
},
|
|
"fontFamily": {
|
|
"h3": ["Manrope"],
|
|
"label-caps": ["Manrope"],
|
|
"body-md": ["Manrope"],
|
|
"body-lg": ["Manrope"],
|
|
"h2": ["Manrope"],
|
|
"h1": ["Manrope"]
|
|
},
|
|
"fontSize": {
|
|
"h3": ["22px", {"lineHeight": "1.3", "letterSpacing": "0", "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"}],
|
|
"h2": ["28px", {"lineHeight": "1.3", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
"h1": ["34px", {"lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "700"}]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
background-color: #f9f9fd;
|
|
background-image:
|
|
radial-gradient(circle at 10% 0%, rgba(212, 227, 255, 0.4) 0%, transparent 50%),
|
|
radial-gradient(circle at 90% 20%, rgba(240, 219, 255, 0.4) 0%, transparent 50%);
|
|
background-attachment: fixed;
|
|
}
|
|
.glass-panel {
|
|
background: rgba(255, 255, 255, 0.6);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
}
|
|
.ambient-shadow {
|
|
box-shadow: 0 20px 40px rgba(0, 93, 167, 0.05);
|
|
}
|
|
.ai-glow {
|
|
box-shadow: 0 0 20px rgba(0, 93, 167, 0.2);
|
|
}
|
|
.liquid-trace {
|
|
background: linear-gradient(180deg, #a4c9ff 0%, #005da7 50%, #f3f3f7 100%);
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="text-on-background font-body-md antialiased pb-24 selection:bg-primary-container selection:text-on-primary-container">
|
|
<!-- TopAppBar -->
|
|
<header class="bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl docked full-width top-0 sticky border-b border-white/10 shadow-[0_8px_32px_0_rgba(74,144,226,0.05)] z-40">
|
|
<div class="flex justify-between items-center w-full px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<img alt="User profile avatar" class="w-10 h-10 rounded-full object-cover border border-outline-variant/30" data-alt="A clean, modern headshot of an individual used as a digital profile avatar. The portrait should be warmly lit against a minimal, soft background, embodying a friendly and professional digital presence suitable for a high-tech application. The aesthetic should be clean, approachable, and high-resolution." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCE677kHSGjU2L-VHPtfs3Ww2mO5xxYtBs0TMFQPzuR0xAE4OQdDOR07COZAlc3jpQ1ZU4BsitmVXwN9_ytDnrQqxU7xWKVRd2Q0jD0fR8eN82t2l4ZcYRX-0QRbUuxrm87NM7Qp9r1CZsvM1fsCs1T7pNw8l68Ev2FzcYIqPmaNAwoe7vleEkNwM8l5q0bpNkwR_vowqDOUFfte0X6g4up7nfIgpTx8UgLYN_sOzT2hdsBVZ_D7JzHti8l3KbP3usPTXodT7xZ"/>
|
|
</div>
|
|
<h1 class="font-manrope font-bold text-lg tracking-tight text-blue-600 dark:text-blue-400">知习</h1>
|
|
<button class="text-slate-400 hover:opacity-80 transition-opacity active:scale-95 transition-transform duration-200">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0, 'wght' 300;">notifications</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<main class="px-container-margin pt-md flex flex-col gap-lg max-w-2xl mx-auto">
|
|
<!-- Header & Search Section -->
|
|
<section class="flex flex-col gap-md">
|
|
<div>
|
|
<h2 class="font-h2 text-h2 text-on-surface mb-xs">知识库</h2>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">探索您的学习路径与认知架构</p>
|
|
</div>
|
|
<!-- Search Bar -->
|
|
<div class="relative glass-panel rounded-full flex items-center px-4 py-3 ambient-shadow">
|
|
<span class="material-symbols-outlined text-outline mr-3" style="font-variation-settings: 'wght' 300;">search</span>
|
|
<input class="bg-transparent border-none focus:ring-0 text-on-surface w-full font-body-md placeholder:text-outline-variant" placeholder="搜索概念、课程或笔记..." type="text"/>
|
|
</div>
|
|
</section>
|
|
<!-- Current Knowledge Base Card (Bento Style) -->
|
|
<section>
|
|
<div class="glass-panel rounded-[32px] p-md ambient-shadow relative overflow-hidden group">
|
|
<!-- Decorative Glow -->
|
|
<div class="absolute -top-20 -right-20 w-64 h-64 bg-primary-fixed-dim/30 rounded-full blur-[60px] pointer-events-none"></div>
|
|
<div class="flex justify-between items-start relative z-10">
|
|
<div class="flex flex-col gap-2">
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full bg-primary-fixed/50 text-on-primary-fixed-variant font-label-caps text-label-caps w-fit">当前焦点</span>
|
|
<h3 class="font-h1 text-h1 text-on-surface tracking-tight mt-1">认知心理学</h3>
|
|
<p class="font-body-md text-body-md text-on-surface-variant max-w-[80%]">深入理解人类心智的信息处理机制，掌握高效学习的底层逻辑。</p>
|
|
</div>
|
|
<div class="w-16 h-16 rounded-2xl bg-surface-container-highest flex items-center justify-center shrink-0">
|
|
<span class="material-symbols-outlined text-primary text-3xl" style="font-variation-settings: 'wght' 300;">psychology</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-8 flex items-center gap-4 relative z-10">
|
|
<div class="flex-1 h-1.5 bg-surface-variant rounded-full overflow-hidden">
|
|
<div class="h-full bg-primary w-[35%] rounded-full relative">
|
|
<div class="absolute right-0 top-0 h-full w-4 bg-white/50 blur-[2px]"></div>
|
|
</div>
|
|
</div>
|
|
<span class="font-label-caps text-label-caps text-on-surface-variant">35% 完成</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Learning Journey Path -->
|
|
<section class="pl-4 pb-12">
|
|
<h3 class="font-h3 text-h3 text-on-surface mb-8">学习旅程</h3>
|
|
<div class="relative">
|
|
<!-- The Liquid Trace Line -->
|
|
<div class="absolute left-[27px] top-4 bottom-0 w-1 rounded-full liquid-trace opacity-50"></div>
|
|
<div class="flex flex-col gap-xl">
|
|
<!-- Completed Node -->
|
|
<div class="flex items-start gap-md group">
|
|
<div class="relative z-10 flex flex-col items-center shrink-0 w-14">
|
|
<div class="w-14 h-14 rounded-full bg-surface-container-highest flex items-center justify-center border-4 border-surface-bright transition-transform group-hover:scale-105">
|
|
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1, 'wght' 400;">check_circle</span>
|
|
</div>
|
|
</div>
|
|
<div class="pt-3 flex-1">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<span class="font-label-caps text-label-caps text-outline block">第 1 天</span>
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-surface-variant text-on-surface-variant font-label-caps text-[10px]">主动回忆</span>
|
|
</div>
|
|
<h4 class="font-h3 text-h3 text-on-surface-variant">认知基础：感知与模式识别</h4>
|
|
</div>
|
|
</div>
|
|
<!-- Active Node -->
|
|
<div class="flex items-start gap-md group">
|
|
<div class="relative z-10 flex flex-col items-center shrink-0 w-14">
|
|
<!-- Pulse effect -->
|
|
<div class="absolute inset-0 bg-primary-fixed rounded-full animate-ping opacity-20"></div>
|
|
<div class="w-14 h-14 rounded-full bg-primary flex items-center justify-center border-4 border-surface-bright ai-glow shadow-lg relative z-10">
|
|
<span class="material-symbols-outlined text-on-primary" style="font-variation-settings: 'FILL' 1, 'wght' 300;">target</span>
|
|
</div>
|
|
</div>
|
|
<div class="pt-1 flex-1">
|
|
<div class="glass-panel p-4 rounded-2xl ambient-shadow border border-primary-fixed">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<span class="font-label-caps text-label-caps text-primary block">第 2 天 • 当前</span>
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-primary-fixed/50 text-on-primary-fixed-variant font-label-caps text-[10px]">检索练习</span>
|
|
</div>
|
|
<h4 class="font-h3 text-h3 text-on-surface mb-2">注意力机制：焦点与过滤</h4>
|
|
<p class="font-body-md text-body-md text-on-surface-variant mb-4 text-sm">探讨选择性注意和分配性注意，理解多任务处理的神话与现实。</p>
|
|
<button class="w-full py-3 rounded-xl bg-gradient-to-r from-primary to-primary-container text-white font-body-md font-medium flex items-center justify-center gap-2 hover:opacity-90 active:scale-[0.98] transition-all">
|
|
<span class="material-symbols-outlined text-sm" style="font-variation-settings: 'wght' 300;">play_arrow</span>
|
|
继续学习
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Future Node 1 -->
|
|
<div class="flex items-start gap-md group opacity-60">
|
|
<div class="relative z-10 flex flex-col items-center shrink-0 w-14">
|
|
<div class="w-12 h-12 rounded-full bg-surface-container flex items-center justify-center border-4 border-surface-bright mt-1">
|
|
<span class="material-symbols-outlined text-outline-variant" style="font-variation-settings: 'wght' 300;">lock</span>
|
|
</div>
|
|
</div>
|
|
<div class="pt-3 flex-1">
|
|
<span class="font-label-caps text-label-caps text-outline-variant mb-1 block">第 3 天</span>
|
|
<h4 class="font-h3 text-h3 text-outline">记忆模型：工作与长期记忆</h4>
|
|
</div>
|
|
</div>
|
|
<!-- Future Node 2 -->
|
|
<div class="flex items-start gap-md group opacity-40">
|
|
<div class="relative z-10 flex flex-col items-center shrink-0 w-14">
|
|
<div class="w-10 h-10 rounded-full bg-surface-container-low flex items-center justify-center border-4 border-surface-bright mt-2">
|
|
<div class="w-2 h-2 rounded-full bg-outline-variant"></div>
|
|
</div>
|
|
</div>
|
|
<div class="pt-3 flex-1">
|
|
<span class="font-label-caps text-label-caps text-outline-variant mb-1 block">第 4 天</span>
|
|
<h4 class="font-h3 text-h3 text-outline">知识表征：心智模型</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- BottomNavBar -->
|
|
<nav class="bg-white/80 dark:bg-slate-950/80 backdrop-blur-2xl docked full-width bottom-0 fixed rounded-t-[32px] border-t border-white/20 shadow-[0_-10px_40px_rgba(74,144,226,0.1)] fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-4 pb-8 pt-4">
|
|
<a class="flex flex-col items-center justify-center text-slate-400 dark:text-slate-500 px-4 py-2 hover:text-blue-500 transition-colors active:scale-90 transition-all duration-300 ease-out" href="#">
|
|
<span class="material-symbols-outlined mb-1" style="font-variation-settings: 'wght' 300;">school</span>
|
|
<span class="font-manrope text-[11px] font-medium tracking-wide">学习</span>
|
|
</a>
|
|
<a class="flex flex-col items-center justify-center text-blue-600 dark:text-blue-400 bg-blue-50/50 dark:bg-blue-900/20 rounded-2xl px-4 py-2 hover:text-blue-500 transition-colors active:scale-90 transition-all duration-300 ease-out" href="#">
|
|
<span class="material-symbols-outlined mb-1" style="font-variation-settings: 'FILL' 1, 'wght' 400;">database</span>
|
|
<span class="font-manrope text-[11px] font-medium tracking-wide">知识库</span>
|
|
</a>
|
|
<a class="flex flex-col items-center justify-center text-slate-400 dark:text-slate-500 px-4 py-2 hover:text-blue-500 transition-colors active:scale-90 transition-all duration-300 ease-out" href="#">
|
|
<span class="material-symbols-outlined mb-1" style="font-variation-settings: 'wght' 300;">smart_toy</span>
|
|
<span class="font-manrope text-[11px] font-medium tracking-wide">AI 助手</span>
|
|
</a>
|
|
<a class="flex flex-col items-center justify-center text-slate-400 dark:text-slate-500 px-4 py-2 hover:text-blue-500 transition-colors active:scale-90 transition-all duration-300 ease-out" href="#">
|
|
<span class="material-symbols-outlined mb-1" style="font-variation-settings: 'wght' 300;">person</span>
|
|
<span class="font-manrope text-[11px] font-medium tracking-wide">我的</span>
|
|
</a>
|
|
</nav>
|
|
</body></html> |