feat: add ZhiXi_App screen designs
- AI home screen - Learning workspace - AI assistant - Learning analysis - Knowledge journey - Active recall lesson - Growth profile - Ethereal intelligence design
This commit is contained in:
parent
5f1930be40
commit
6062077e97
282
ZhiXi_App/ai_assistant_workspace_v2/code.html
Normal file
282
ZhiXi_App/ai_assistant_workspace_v2/code.html
Normal file
@ -0,0 +1,282 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html class="light" lang="zh-CN"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport"/>
|
||||||
|
<title>AI 助手 - 知习</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",
|
||||||
|
"safe-bottom": "env(safe-area-inset-bottom)",
|
||||||
|
"safe-top": "env(safe-area-inset-top)"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"h3": ["Manrope", "sans-serif"],
|
||||||
|
"h2": ["Manrope", "sans-serif"],
|
||||||
|
"label-caps": ["Manrope", "sans-serif"],
|
||||||
|
"body-md": ["Manrope", "sans-serif"],
|
||||||
|
"body-lg": ["Manrope", "sans-serif"],
|
||||||
|
"h1": ["Manrope", "sans-serif"]
|
||||||
|
},
|
||||||
|
"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 {
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
/* Custom scrollbar for web view */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #e2e2e6;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
/* Ambient AI Glow */
|
||||||
|
.ai-glow {
|
||||||
|
background: radial-gradient(circle at top right, rgba(129, 53, 197, 0.08) 0%, rgba(0, 93, 167, 0.05) 40%, rgba(249, 249, 253, 0) 70%);
|
||||||
|
}
|
||||||
|
.ai-message-gradient {
|
||||||
|
background: linear-gradient(135deg, rgba(212, 227, 255, 0.3) 0%, rgba(225, 224, 255, 0.3) 100%);
|
||||||
|
}
|
||||||
|
.glass-input {
|
||||||
|
background: rgba(255, 255, 255, 0.6);
|
||||||
|
backdrop-filter: blur(24px);
|
||||||
|
-webkit-backdrop-filter: blur(24px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 93, 167, 0.04), inset 0 1px 2px rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
.btn-press:active {
|
||||||
|
transform: scale(0.96);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
min-height: max(884px, 100dvh);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-background text-on-background min-h-screen flex flex-col font-body-md overflow-hidden relative">
|
||||||
|
<!-- Ambient Background Glow -->
|
||||||
|
<div class="fixed inset-0 pointer-events-none ai-glow z-0"></div>
|
||||||
|
<!-- 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="w-8 h-8 flex items-center justify-center text-on-surface hover:bg-surface-variant/50 rounded-full transition-colors btn-press -ml-1">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'wght' 400;">arrow_back_ios_new</span>
|
||||||
|
</button>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<span class="font-['Manrope'] font-bold text-xl text-slate-900 dark:text-slate-50 tracking-tight leading-none">AI 助手</span>
|
||||||
|
<span class="text-[11px] text-outline font-medium mt-0.5 flex items-center gap-1">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span>
|
||||||
|
当前学习：认知心理学 · 记忆的编码与提取
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="w-10 h-10 flex items-center justify-center text-outline hover:opacity-80 transition-opacity Active: scale-95 transition-transform duration-150 rounded-full hover:bg-surface-variant/50">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'wght' 300;">settings</span>
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
<!-- Main Chat Canvas -->
|
||||||
|
<main class="flex-1 overflow-y-auto px-container-margin pt-md pb-32 z-10 relative scroll-smooth flex flex-col gap-xl">
|
||||||
|
<!-- Welcome / Context Intro -->
|
||||||
|
<div class="flex flex-col items-center justify-center mt-lg mb-md text-center">
|
||||||
|
<div class="w-16 h-16 rounded-2xl ai-message-gradient flex items-center justify-center mb-sm shadow-[0_8px_24px_rgba(70,72,212,0.12)]">
|
||||||
|
<span class="material-symbols-outlined text-tertiary text-3xl" style="font-variation-settings: 'wght' 200;">auto_awesome</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="font-h2 text-h2 text-on-surface mb-2">准备好深入探索了吗？</h2>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant max-w-[280px]">针对「认知心理学 · 记忆的编码与提取」，我可以为你提供更深度的解析或测验。</p>
|
||||||
|
</div>
|
||||||
|
<!-- Dialogue Area -->
|
||||||
|
<div class="flex flex-col gap-lg">
|
||||||
|
<!-- User Message -->
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<div class="max-w-[85%] bg-surface-container-high text-on-surface px-sm py-sm rounded-2xl rounded-tr-sm shadow-[0_2px_12px_rgba(0,0,0,0.02)]">
|
||||||
|
<p class="font-body-md text-body-md">关于“情境依存性记忆”，如果我在图书馆复习，考试时在教室，是不是会影响提取？</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- AI Message -->
|
||||||
|
<div class="flex justify-start items-start gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full ai-message-gradient flex items-center justify-center flex-shrink-0 mt-1 border border-white/50">
|
||||||
|
<span class="material-symbols-outlined text-tertiary text-[18px]" style="font-variation-settings: 'wght' 300;">colors_spark</span>
|
||||||
|
</div>
|
||||||
|
<div class="max-w-[85%]">
|
||||||
|
<div class="bg-white/60 backdrop-blur-md px-md py-sm rounded-3xl rounded-tl-sm shadow-[0_4px_24px_rgba(0,93,167,0.03)] border border-white/40">
|
||||||
|
<p class="font-body-md text-body-md text-on-surface leading-relaxed mb-4">
|
||||||
|
这是一个非常经典的问题！是的，根据**情境依存性记忆 (Context-Dependent Memory)** 的原理，外部环境线索确实会影响记忆的提取。
|
||||||
|
</p>
|
||||||
|
<!-- Structured Content inside AI response -->
|
||||||
|
<div class="bg-surface-container-lowest/50 rounded-xl p-3 border border-surface-variant/50 mb-3">
|
||||||
|
<h4 class="font-label-caps text-label-caps text-primary mb-1 uppercase tracking-wider">核心机制</h4>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant text-[14px]">
|
||||||
|
当你编码（学习）信息时，周围的环境（如气味、光线、声音，甚至背景音乐）会一并被编码为提取线索。如果提取（考试）时的环境与编码时一致，这些线索能帮助你更容易地唤起记忆。这就是著名的“潜水员实验”所证明的。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant text-[14px] leading-relaxed">
|
||||||
|
为了克服这种环境差异带来的影响，你可以尝试**多情境复习**，或者在脑海中**主动重构**学习时的情境。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- Feedback actions -->
|
||||||
|
<div class="flex items-center gap-2 mt-2 ml-2">
|
||||||
|
<button class="text-outline-variant hover:text-primary transition-colors btn-press flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">thumb_up</span>
|
||||||
|
</button>
|
||||||
|
<button class="text-outline-variant hover:text-error transition-colors btn-press flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">thumb_down</span>
|
||||||
|
</button>
|
||||||
|
<button class="text-outline-variant hover:text-tertiary transition-colors btn-press flex items-center gap-1 ml-2">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">content_copy</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- Bottom Interaction Area -->
|
||||||
|
<div class="fixed bottom-[88px] left-0 w-full px-container-margin z-30 pointer-events-none flex flex-col gap-4">
|
||||||
|
<!-- Quick Actions (Scrollable) -->
|
||||||
|
<div class="overflow-x-auto no-scrollbar pointer-events-auto -mx-container-margin px-container-margin pb-2">
|
||||||
|
<div class="flex gap-2 w-max">
|
||||||
|
<button class="px-4 py-2 rounded-full bg-surface-container-lowest/80 backdrop-blur-md border border-outline-variant/30 text-[13px] font-medium text-on-surface-variant whitespace-nowrap btn-press shadow-sm hover:bg-white transition-colors">
|
||||||
|
用更简单的话解释
|
||||||
|
</button>
|
||||||
|
<button class="px-4 py-2 rounded-full bg-surface-container-lowest/80 backdrop-blur-md border border-outline-variant/30 text-[13px] font-medium text-on-surface-variant whitespace-nowrap btn-press shadow-sm hover:bg-white transition-colors">
|
||||||
|
给我举个例子
|
||||||
|
</button>
|
||||||
|
<button class="px-4 py-2 rounded-full bg-surface-container-lowest/80 backdrop-blur-md border border-outline-variant/30 text-[13px] font-medium text-on-surface-variant whitespace-nowrap btn-press shadow-sm hover:bg-white transition-colors">
|
||||||
|
我哪里理解错了？
|
||||||
|
</button>
|
||||||
|
<button class="px-4 py-2 rounded-full bg-surface-container-lowest/80 backdrop-blur-md border border-outline-variant/30 text-[13px] font-medium text-on-surface-variant whitespace-nowrap btn-press shadow-sm hover:bg-white transition-colors flex items-center gap-1">
|
||||||
|
<span class="material-symbols-outlined text-[14px] text-tertiary">school</span>
|
||||||
|
用费曼方式讲给我听
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Input Area -->
|
||||||
|
<div class="pointer-events-auto glass-input rounded-3xl p-2 flex items-end gap-2 mb-safe-bottom">
|
||||||
|
<button class="w-10 h-10 rounded-full flex items-center justify-center text-on-surface-variant hover:bg-surface-variant/50 transition-colors btn-press shrink-0 mb-1">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'wght' 300;">add_circle</span>
|
||||||
|
</button>
|
||||||
|
<div class="flex-1 relative flex items-center min-h-[48px]">
|
||||||
|
<textarea class="w-full bg-transparent border-none focus:ring-0 resize-none font-body-md text-body-md text-on-surface placeholder:text-outline-variant py-3 px-2 max-h-[120px] overflow-y-auto" placeholder="继续追问，或输入新问题..." rows="1" style="caret-color: #005da7;"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1 shrink-0 mb-1">
|
||||||
|
<button class="w-10 h-10 rounded-full flex items-center justify-center text-on-surface-variant hover:bg-surface-variant/50 transition-colors btn-press">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'wght' 300;">mic</span>
|
||||||
|
</button>
|
||||||
|
<button class="w-10 h-10 rounded-full bg-primary text-white shadow-md flex items-center justify-center btn-press">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'wght' 400;">arrow_upward</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 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-[env(safe-area-inset-bottom)] 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 Active: scale-90 transition-transform duration-200 p-2 rounded-xl" href="#">
|
||||||
|
<span class="material-symbols-outlined mb-1" style="font-variation-settings: 'wght' 300;">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 Active: scale-90 transition-transform duration-200 p-2 rounded-xl" href="#">
|
||||||
|
<span class="material-symbols-outlined mb-1" style="font-variation-settings: 'wght' 300;">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 Active: scale-90 transition-transform duration-200 p-2 rounded-xl" href="#">
|
||||||
|
<span class="material-symbols-outlined mb-1" style="font-variation-settings: 'FILL' 1, 'wght' 400;">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 Active: scale-90 transition-transform duration-200 p-2 rounded-xl" href="#">
|
||||||
|
<span class="material-symbols-outlined mb-1" style="font-variation-settings: 'wght' 300;">person</span>
|
||||||
|
<span class="font-['Manrope'] text-[10px] font-medium tracking-wide">我的</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<!-- Web Navigation Cluster (Hidden on Mobile) -->
|
||||||
|
<nav class="hidden md:flex fixed top-0 right-5 h-[64px] items-center gap-6 z-50">
|
||||||
|
<a class="font-body-md text-slate-400 hover:text-slate-900 transition-colors" href="#">学习</a>
|
||||||
|
<a class="font-body-md text-slate-400 hover:text-slate-900 transition-colors" href="#">知识库</a>
|
||||||
|
<a class="font-body-md text-blue-600 font-semibold transition-colors" href="#">AI 助手</a>
|
||||||
|
<a class="font-body-md text-slate-400 hover:text-slate-900 transition-colors" href="#">我的</a>
|
||||||
|
</nav>
|
||||||
|
</body></html>
|
||||||
BIN
ZhiXi_App/ai_assistant_workspace_v2/screen.png
Normal file
BIN
ZhiXi_App/ai_assistant_workspace_v2/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 429 KiB |
306
ZhiXi_App/ai_learning_analysis_v2/code.html
Normal file
306
ZhiXi_App/ai_learning_analysis_v2/code.html
Normal file
@ -0,0 +1,306 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="zh-CN"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" 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"/>
|
||||||
|
<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>
|
||||||
|
.glass-panel {
|
||||||
|
background: rgba(255, 255, 255, 0.7);
|
||||||
|
backdrop-filter: blur(24px);
|
||||||
|
-webkit-backdrop-filter: blur(24px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||||
|
box-shadow: 0 40px 60px -15px rgba(0, 93, 167, 0.05);
|
||||||
|
}
|
||||||
|
.ai-glow-text {
|
||||||
|
background: linear-gradient(135deg, #005da7 0%, #8135c5 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
.ai-glow-bg {
|
||||||
|
background: linear-gradient(135deg, #005da7 0%, #8135c5 100%);
|
||||||
|
}
|
||||||
|
.progress-ring-circle {
|
||||||
|
transition: stroke-dashoffset 1s ease-in-out;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
transform-origin: 50% 50%;
|
||||||
|
}
|
||||||
|
.mesh-bg {
|
||||||
|
background-color: #f9f9fd;
|
||||||
|
background-image: radial-gradient(at 80% 0%, hsla(289,85%,88%,0.3) 0px, transparent 50%),
|
||||||
|
radial-gradient(at 0% 50%, hsla(211,85%,88%,0.3) 0px, transparent 50%);
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
.premium-tab-bar {
|
||||||
|
background: rgba(255, 255, 255, 0.85);
|
||||||
|
backdrop-filter: blur(32px);
|
||||||
|
-webkit-backdrop-filter: blur(32px);
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.5);
|
||||||
|
box-shadow: 0 -4px 24px -8px rgba(0, 93, 167, 0.08);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
min-height: max(884px, 100dvh);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="mesh-bg text-on-background font-body-md min-h-screen flex flex-col pb-[100px]">
|
||||||
|
<!-- 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 flex justify-between items-center w-full px-6 py-4">
|
||||||
|
<div class="flex items-center gap-sm">
|
||||||
|
<button class="text-primary active:scale-95 transition-transform duration-200">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">arrow_back</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<h1 class="font-manrope font-bold text-lg tracking-tight text-primary-container">本次学习分析</h1>
|
||||||
|
<div class="flex items-center gap-sm">
|
||||||
|
<button class="text-primary active:scale-95 transition-transform duration-200">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">ios_share</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Main Content Canvas -->
|
||||||
|
<main class="flex-grow flex flex-col items-center px-container-margin pt-md pb-xl gap-md max-w-3xl mx-auto w-full">
|
||||||
|
<!-- AI Summary Card -->
|
||||||
|
<section class="glass-panel rounded-xl p-md w-full flex flex-col gap-sm relative overflow-hidden">
|
||||||
|
<div class="absolute top-0 left-0 w-full h-1 ai-glow-bg opacity-70"></div>
|
||||||
|
<div class="flex items-center gap-xs mb-xs">
|
||||||
|
<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||||||
|
<span class="font-label-caps text-label-caps text-secondary uppercase tracking-widest">AI Insight</span>
|
||||||
|
</div>
|
||||||
|
<p class="font-h3 text-h3 text-on-surface leading-relaxed font-bold">
|
||||||
|
你已经初步掌握了神经网络的基础架构，但在激活函数的作用上还有待加强。
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<!-- Bento Grid Layout for Stats and Details -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-md w-full">
|
||||||
|
<!-- Mastery Score (Premium Ring) -->
|
||||||
|
<section class="glass-panel rounded-xl p-md flex flex-col items-center justify-center gap-base relative">
|
||||||
|
<h2 class="font-label-caps text-label-caps text-on-surface-variant uppercase tracking-widest absolute top-md left-md">掌握度</h2>
|
||||||
|
<div class="relative w-32 h-32 mt-sm">
|
||||||
|
<svg class="w-full h-full" viewbox="0 0 100 100">
|
||||||
|
<!-- Background track -->
|
||||||
|
<circle class="text-surface-variant stroke-current opacity-30" cx="50" cy="50" fill="transparent" r="40" stroke-width="8"></circle>
|
||||||
|
<!-- Gradient definitions -->
|
||||||
|
<defs>
|
||||||
|
<lineargradient id="ringGradient" x1="0%" x2="100%" y1="0%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#005da7"></stop>
|
||||||
|
<stop offset="100%" stop-color="#8135c5"></stop>
|
||||||
|
</lineargradient>
|
||||||
|
</defs>
|
||||||
|
<!-- Progress track (85%) -->
|
||||||
|
<circle class="progress-ring-circle" cx="50" cy="50" fill="transparent" r="40" stroke="url(#ringGradient)" stroke-dasharray="251.2" stroke-dashoffset="37.68" stroke-linecap="round" stroke-width="8"></circle>
|
||||||
|
</svg>
|
||||||
|
<div class="absolute inset-0 flex items-center justify-center flex-col">
|
||||||
|
<span class="font-h2 text-h2 text-primary font-bold">85%</span>
|
||||||
|
<span class="font-label-caps text-label-caps text-on-surface-variant mt-1">优秀</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Next Review Suggestion -->
|
||||||
|
<section class="glass-panel rounded-xl p-md flex flex-col justify-between gap-sm">
|
||||||
|
<div class="flex items-center gap-xs">
|
||||||
|
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 0;">update</span>
|
||||||
|
<h2 class="font-label-caps text-label-caps text-on-surface-variant uppercase tracking-widest">下一次复习建议</h2>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow flex items-center">
|
||||||
|
<div>
|
||||||
|
<p class="font-h2 text-h2 text-on-surface mb-xs font-bold">明天上午 10:00</p>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant">根据艾宾浩斯遗忘曲线，此时复习效果最佳。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Strengths & Weaknesses -->
|
||||||
|
<section class="glass-panel rounded-xl p-md w-full md:col-span-2 flex flex-col md:flex-row gap-lg">
|
||||||
|
<!-- Strengths -->
|
||||||
|
<div class="flex-1 flex flex-col gap-sm">
|
||||||
|
<div class="flex items-center gap-xs">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-primary-fixed flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-primary text-[14px]" style="font-variation-settings: 'FILL' 1;">check</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-h3 text-h3 text-on-surface text-[18px]">优势</h3>
|
||||||
|
</div>
|
||||||
|
<ul class="flex flex-col gap-xs pl-8">
|
||||||
|
<li class="font-body-md text-body-md text-on-surface-variant flex items-center gap-xs">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
|
||||||
|
概念回忆清晰
|
||||||
|
</li>
|
||||||
|
<li class="font-body-md text-body-md text-on-surface-variant flex items-center gap-xs">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
|
||||||
|
架构逻辑准确
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- Weaknesses -->
|
||||||
|
<div class="flex-1 flex flex-col gap-sm">
|
||||||
|
<div class="flex items-center gap-xs">
|
||||||
|
<div class="w-6 h-6 rounded-full bg-error-container flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-error text-[14px]" style="font-variation-settings: 'FILL' 1;">priority_high</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-h3 text-h3 text-on-surface text-[18px]">薄弱点</h3>
|
||||||
|
</div>
|
||||||
|
<ul class="flex flex-col gap-xs pl-8">
|
||||||
|
<li class="font-body-md text-body-md text-on-surface-variant flex items-center gap-xs">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-error"></span>
|
||||||
|
ReLU 与 Sigmoid 的差异理解
|
||||||
|
</li>
|
||||||
|
<li class="font-body-md text-body-md text-on-surface-variant flex items-center gap-xs">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-error"></span>
|
||||||
|
反向传播推导细节
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Improvement Suggestions -->
|
||||||
|
<section class="glass-panel rounded-xl p-md w-full md:col-span-2 flex flex-col gap-sm">
|
||||||
|
<div class="flex items-center gap-xs mb-xs">
|
||||||
|
<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 0;">lightbulb</span>
|
||||||
|
<h3 class="font-h3 text-h3 text-on-surface text-[18px]">改进建议</h3>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-sm">
|
||||||
|
<div class="bg-surface rounded-lg p-sm border border-outline-variant flex items-start gap-sm">
|
||||||
|
<span class="material-symbols-outlined text-primary mt-1" style="font-variation-settings: 'FILL' 0;">menu_book</span>
|
||||||
|
<div>
|
||||||
|
<p class="font-body-lg text-body-lg text-on-surface font-medium">重读章节 4.2 (间隔复习)</p>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant text-[13px] mt-1">深入理解激活函数的非线性特征，建议使用费曼技巧向自己解释。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface rounded-lg p-sm border border-outline-variant flex items-start gap-sm">
|
||||||
|
<span class="material-symbols-outlined text-primary mt-1" style="font-variation-settings: 'FILL' 0;">quiz</span>
|
||||||
|
<div>
|
||||||
|
<p class="font-body-lg text-body-lg text-on-surface font-medium">尝试一次练习测验</p>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant text-[13px] mt-1">通过 5 道针对性题目巩固记忆。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<!-- Action Buttons Layout -->
|
||||||
|
<div class="w-full flex flex-col gap-sm mt-lg">
|
||||||
|
<button class="w-full py-4 px-6 rounded-full border border-primary text-primary font-body-lg font-bold shadow-sm active:scale-95 transition-transform duration-200 flex items-center justify-center gap-xs hover:bg-surface-container-highest bg-transparent">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">forum</span>
|
||||||
|
继续追问
|
||||||
|
</button>
|
||||||
|
<button class="w-full py-4 px-6 rounded-full ai-glow-bg text-white font-body-lg font-bold shadow-md active:scale-95 transition-transform duration-200 flex items-center justify-center gap-xs hover:opacity-90">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">add_task</span>
|
||||||
|
加入复习
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- Bottom Navigation -->
|
||||||
|
<nav class="premium-tab-bar fixed bottom-0 w-full px-6 py-4 pb-8 z-50 flex justify-between items-center rounded-t-3xl">
|
||||||
|
<div class="flex flex-col items-center gap-1 cursor-pointer text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-[28px]" style="font-variation-settings: 'FILL' 0;">auto_awesome</span>
|
||||||
|
<span class="text-[10px] font-semibold">AI</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center gap-1 cursor-pointer text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-[28px]" style="font-variation-settings: 'FILL' 0;">auto_stories</span>
|
||||||
|
<span class="text-[10px] font-semibold">知识库</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center gap-1 cursor-pointer text-primary">
|
||||||
|
<div class="relative">
|
||||||
|
<span class="material-symbols-outlined text-[28px]" style="font-variation-settings: 'FILL' 1;">school</span>
|
||||||
|
<div class="absolute -top-1 -right-1 w-2.5 h-2.5 bg-error rounded-full border-2 border-white"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-[10px] font-semibold">学习</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center gap-1 cursor-pointer text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-[28px]" style="font-variation-settings: 'FILL' 0;">person</span>
|
||||||
|
<span class="text-[10px] font-semibold">我的</span>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</body></html>
|
||||||
BIN
ZhiXi_App/ai_learning_analysis_v2/screen.png
Normal file
BIN
ZhiXi_App/ai_learning_analysis_v2/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
145
ZhiXi_App/ethereal_intelligence/DESIGN.md
Normal file
145
ZhiXi_App/ethereal_intelligence/DESIGN.md
Normal file
@ -0,0 +1,145 @@
|
|||||||
|
---
|
||||||
|
name: Ethereal Intelligence
|
||||||
|
colors:
|
||||||
|
surface: '#f9f9fd'
|
||||||
|
surface-dim: '#d9dade'
|
||||||
|
surface-bright: '#f9f9fd'
|
||||||
|
surface-container-lowest: '#ffffff'
|
||||||
|
surface-container-low: '#f3f3f7'
|
||||||
|
surface-container: '#ededf1'
|
||||||
|
surface-container-high: '#e8e8ec'
|
||||||
|
surface-container-highest: '#e2e2e6'
|
||||||
|
on-surface: '#1a1c1f'
|
||||||
|
on-surface-variant: '#414751'
|
||||||
|
inverse-surface: '#2e3034'
|
||||||
|
inverse-on-surface: '#f0f0f4'
|
||||||
|
outline: '#717783'
|
||||||
|
outline-variant: '#c1c7d3'
|
||||||
|
surface-tint: '#0060ac'
|
||||||
|
primary: '#005da7'
|
||||||
|
on-primary: '#ffffff'
|
||||||
|
primary-container: '#2976c7'
|
||||||
|
on-primary-container: '#fdfcff'
|
||||||
|
inverse-primary: '#a4c9ff'
|
||||||
|
secondary: '#8135c5'
|
||||||
|
on-secondary: '#ffffff'
|
||||||
|
secondary-container: '#ba70ff'
|
||||||
|
on-secondary-container: '#440076'
|
||||||
|
tertiary: '#4648d4'
|
||||||
|
on-tertiary: '#ffffff'
|
||||||
|
tertiary-container: '#6063ee'
|
||||||
|
on-tertiary-container: '#fffbff'
|
||||||
|
error: '#ba1a1a'
|
||||||
|
on-error: '#ffffff'
|
||||||
|
error-container: '#ffdad6'
|
||||||
|
on-error-container: '#93000a'
|
||||||
|
primary-fixed: '#d4e3ff'
|
||||||
|
primary-fixed-dim: '#a4c9ff'
|
||||||
|
on-primary-fixed: '#001c39'
|
||||||
|
on-primary-fixed-variant: '#004883'
|
||||||
|
secondary-fixed: '#f0dbff'
|
||||||
|
secondary-fixed-dim: '#deb7ff'
|
||||||
|
on-secondary-fixed: '#2c0050'
|
||||||
|
on-secondary-fixed-variant: '#670fac'
|
||||||
|
tertiary-fixed: '#e1e0ff'
|
||||||
|
tertiary-fixed-dim: '#c0c1ff'
|
||||||
|
on-tertiary-fixed: '#07006c'
|
||||||
|
on-tertiary-fixed-variant: '#2f2ebe'
|
||||||
|
background: '#f9f9fd'
|
||||||
|
on-background: '#1a1c1f'
|
||||||
|
surface-variant: '#e2e2e6'
|
||||||
|
typography:
|
||||||
|
h1:
|
||||||
|
fontFamily: Manrope
|
||||||
|
fontSize: 34px
|
||||||
|
fontWeight: '700'
|
||||||
|
lineHeight: '1.2'
|
||||||
|
letterSpacing: -0.02em
|
||||||
|
h2:
|
||||||
|
fontFamily: Manrope
|
||||||
|
fontSize: 28px
|
||||||
|
fontWeight: '600'
|
||||||
|
lineHeight: '1.3'
|
||||||
|
letterSpacing: -0.01em
|
||||||
|
h3:
|
||||||
|
fontFamily: Manrope
|
||||||
|
fontSize: 22px
|
||||||
|
fontWeight: '600'
|
||||||
|
lineHeight: '1.3'
|
||||||
|
letterSpacing: '0'
|
||||||
|
body-lg:
|
||||||
|
fontFamily: Manrope
|
||||||
|
fontSize: 17px
|
||||||
|
fontWeight: '400'
|
||||||
|
lineHeight: '1.6'
|
||||||
|
letterSpacing: -0.01em
|
||||||
|
body-md:
|
||||||
|
fontFamily: Manrope
|
||||||
|
fontSize: 15px
|
||||||
|
fontWeight: '400'
|
||||||
|
lineHeight: '1.5'
|
||||||
|
letterSpacing: '0'
|
||||||
|
label-caps:
|
||||||
|
fontFamily: Manrope
|
||||||
|
fontSize: 12px
|
||||||
|
fontWeight: '600'
|
||||||
|
lineHeight: '1.0'
|
||||||
|
letterSpacing: 0.05em
|
||||||
|
rounded:
|
||||||
|
sm: 0.25rem
|
||||||
|
DEFAULT: 0.5rem
|
||||||
|
md: 0.75rem
|
||||||
|
lg: 1rem
|
||||||
|
xl: 1.5rem
|
||||||
|
full: 9999px
|
||||||
|
spacing:
|
||||||
|
base: 8px
|
||||||
|
xs: 4px
|
||||||
|
sm: 12px
|
||||||
|
md: 24px
|
||||||
|
lg: 40px
|
||||||
|
xl: 64px
|
||||||
|
container-margin: 20px
|
||||||
|
gutter: 16px
|
||||||
|
---
|
||||||
|
|
||||||
|
## Brand & Style
|
||||||
|
The brand personality is centered on "Enlightened Learning"—a synthesis of high-tech AI capabilities and human-centric intuition. This design system targets a young, intellectually curious demographic that values depth over speed.
|
||||||
|
|
||||||
|
The visual style merges **Apple Minimalism** with **Futuristic Glassmorphism**. It prioritizes extreme "breathability" and a sense of calm focus. The UI should feel like a quiet, high-tech sanctuary for thought. Key attributes include high-blur translucency, expansive negative space, and a "light-as-air" depth model that avoids heavy physical metaphors in favor of ethereal, glowing digital surfaces.
|
||||||
|
|
||||||
|
## Colors
|
||||||
|
The palette is anchored by a luminous off-white background to reduce eye strain and establish a premium feel. The primary and secondary colors are used sparingly for interactive elements and brand accents.
|
||||||
|
|
||||||
|
To represent the "AI-first" nature of the product, use a signature gradient (the "AI Glow") for progress indicators, active states, and special AI-driven insights. Functional neutrals follow Apple’s grayscale hierarchy but use a slight blue tint in the shadows to maintain the cool, sophisticated atmosphere.
|
||||||
|
|
||||||
|
## Typography
|
||||||
|
Manrope provides a modern, geometric clarity that feels more "tech-forward" than standard San Francisco while maintaining excellent legibility.
|
||||||
|
|
||||||
|
The typographic hierarchy emphasizes whitespace through generous line heights (1.5x - 1.6x for body text). Headlines use slightly tighter tracking to feel "locked" and authoritative, while labels use expanded tracking for a premium, airy feel. Use "Ink-Black" (#1D1D1F) for primary text to ensure high contrast without the harshness of pure black.
|
||||||
|
|
||||||
|
## Layout & Spacing
|
||||||
|
The layout follows a fluid, safe-area-driven model typical of iOS, but with significantly increased vertical margins to promote the "calm" atmosphere.
|
||||||
|
|
||||||
|
A 4-column grid is used for mobile portrait views. Elements should never feel "packed." Use the `lg` (40px) and `xl` (64px) spacing units to separate major content sections, creating a sense of luxury and focus. Component internal padding should be generous, typically starting at `md` (24px) for cards and containers.
|
||||||
|
|
||||||
|
## Elevation & Depth
|
||||||
|
This design system utilizes **Luminous Stratification** rather than traditional heavy shadows.
|
||||||
|
|
||||||
|
- **The Base:** The #FBFBFF background acts as the canvas.
|
||||||
|
- **Glassmorphism:** AI-interaction zones and input fields use a high-saturation backdrop blur (20px-30px) with a 1px semi-transparent white border (0.1 opacity) to simulate frosted glass.
|
||||||
|
- **Gentle Shadows:** Floating cards use "Ambient Shadows"—extremely diffused (40px-60px blur), low-opacity (5%) shadows with a subtle tint of the primary blue to prevent a "dirty" look.
|
||||||
|
- **AI Glow:** The highest level of depth is reserved for active AI processes, which emit a soft, localized outer glow using the signature gradient.
|
||||||
|
|
||||||
|
## Shapes
|
||||||
|
Shapes follow a "Squircle" logic to align with Apple’s hardware and software aesthetic.
|
||||||
|
|
||||||
|
Standard components (buttons, small cards) use a 16px (1rem) radius. Larger container cards use a 24px (1.5rem) radius. Interactive inputs use a fully rounded "pill" shape or the 16px standard to maintain consistency. The goal is to avoid sharp corners entirely, reinforcing the "human-centric" and "soft" brand personality.
|
||||||
|
|
||||||
|
## Components
|
||||||
|
- **Buttons:** Primary buttons use the AI Glow gradient with white text. Secondary buttons are glass-morphic with a 1px border. All buttons have a high-press scale effect (shrink to 0.96) for tactile feedback.
|
||||||
|
- **Input Fields:** These are the centerpiece of the "AI-first" experience. Use a high-blur glass background with a subtle inner shadow. Place the cursor/caret in the primary blue.
|
||||||
|
- **Cards:** Content is housed in "Floating Containers"—white or ultra-light gray backgrounds with the previously defined ambient shadows and no visible border.
|
||||||
|
- **Thin-Stroke Icons:** Use a consistent 1.5pt or 2pt stroke weight. Icons should be open-ended and minimalist, avoiding fills unless in an active state.
|
||||||
|
- **AI Learning Progress:** Use a custom "Liquid Trace" component—a thin, glowing gradient line that pulses gently as the user moves through deep-learning modules.
|
||||||
|
- **Chips/Tags:** Small, pill-shaped elements with light blue or violet tinted backgrounds (0.1 opacity) and matching colored text.
|
||||||
275
ZhiXi_App/knowledge_journey_v2/code.html
Normal file
275
ZhiXi_App/knowledge_journey_v2/code.html
Normal file
@ -0,0 +1,275 @@
|
|||||||
|
<!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>
|
||||||
BIN
ZhiXi_App/knowledge_journey_v2/screen.png
Normal file
BIN
ZhiXi_App/knowledge_journey_v2/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 265 KiB |
322
ZhiXi_App/learning_workspace_v2/code.html
Normal file
322
ZhiXi_App/learning_workspace_v2/code.html
Normal file
@ -0,0 +1,322 @@
|
|||||||
|
<!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>
|
||||||
BIN
ZhiXi_App/learning_workspace_v2/screen.png
Normal file
BIN
ZhiXi_App/learning_workspace_v2/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
239
ZhiXi_App/lesson_active_recall/code.html
Normal file
239
ZhiXi_App/lesson_active_recall/code.html
Normal file
@ -0,0 +1,239 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="zh-CN"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" 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-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 {
|
||||||
|
font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||||
|
background-color: #f9f9fd;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
.ai-glow-btn {
|
||||||
|
background: linear-gradient(135deg, #005da7 0%, #4648d4 100%);
|
||||||
|
box-shadow: 0 8px 24px rgba(70, 72, 212, 0.25);
|
||||||
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||||
|
}
|
||||||
|
.ai-glow-btn:active {
|
||||||
|
transform: scale(0.96);
|
||||||
|
box-shadow: 0 4px 12px rgba(70, 72, 212, 0.15);
|
||||||
|
}
|
||||||
|
.glass-panel {
|
||||||
|
background: rgba(255, 255, 255, 0.7);
|
||||||
|
backdrop-filter: blur(24px);
|
||||||
|
-webkit-backdrop-filter: blur(24px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
.ambient-shadow {
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 93, 167, 0.04);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
min-height: max(884px, 100dvh);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="text-on-background bg-background min-h-screen flex flex-col pb-safe">
|
||||||
|
<!-- Top Navigation (Task-Focused Context: No Bottom Nav or global TopAppBar) -->
|
||||||
|
<header class="sticky top-0 z-40 bg-surface/80 backdrop-blur-xl border-b border-surface-container-high px-5 py-3 flex justify-between items-center w-full transition-all duration-300">
|
||||||
|
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container transition-colors active:scale-95 text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined">arrow_back</span>
|
||||||
|
</button>
|
||||||
|
<div class="flex-1 text-center">
|
||||||
|
<h1 class="font-h3 text-h3 text-on-background tracking-tight">认知心理学 · 记忆</h1>
|
||||||
|
</div>
|
||||||
|
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container transition-colors active:scale-95 text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined">more_horiz</span>
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
<main class="flex-1 px-5 lg:px-10 max-w-3xl mx-auto w-full pt-6 pb-24 flex flex-col gap-xl">
|
||||||
|
<!-- Reading Area -->
|
||||||
|
<section class="flex flex-col gap-lg animate-fade-in-up">
|
||||||
|
<header>
|
||||||
|
<h2 class="font-h1 text-h1 text-on-background mb-4">理解编码与提取</h2>
|
||||||
|
</header>
|
||||||
|
<!-- Learning Objectives -->
|
||||||
|
<div class="glass-panel ambient-shadow rounded-xl p-md">
|
||||||
|
<h3 class="font-label-caps text-label-caps text-primary mb-3 uppercase flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">flag</span>
|
||||||
|
本节目标
|
||||||
|
</h3>
|
||||||
|
<ul class="flex flex-col gap-2">
|
||||||
|
<li class="flex items-start gap-3">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-primary mt-2 flex-shrink-0"></div>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant">区分记忆的三个主要阶段：编码、存储和提取。</p>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-3">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-primary mt-2 flex-shrink-0"></div>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant">解释“深度加工”理论如何影响信息留存率。</p>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-3">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-primary mt-2 flex-shrink-0"></div>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant">掌握至少两种利用上下文线索促进记忆提取的方法。</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- Reading Content -->
|
||||||
|
<article class="font-body-lg text-body-lg text-on-background leading-relaxed space-y-6">
|
||||||
|
<p>
|
||||||
|
在认知心理学中，记忆通常被概念化为一个信息处理系统，类似于计算机。这个过程可以划分为三个基本且连续的阶段：编码（Encoding）、存储（Storage）和提取（Retrieval）。
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong class="text-on-primary-fixed-variant">编码</strong>是将外部感官信息转化为大脑能够处理和存储的神经表征的过程。这就如同我们在键盘上输入文字，将其转化为计算机能识别的代码。编码的质量直接决定了后续记忆的牢固程度。
|
||||||
|
</p>
|
||||||
|
<!-- Key Knowledge Highlight -->
|
||||||
|
<div class="my-6 bg-surface-container-lowest border-l-4 border-tertiary rounded-r-xl p-5 ambient-shadow">
|
||||||
|
<div class="flex items-center gap-2 mb-2 text-tertiary">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">lightbulb</span>
|
||||||
|
<span class="font-label-caps text-label-caps uppercase">核心概念 : 深度加工理论 (Levels of Processing)</span>
|
||||||
|
</div>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant m-0">
|
||||||
|
由 Craik 和 Lockhart (1972) 提出，该理论认为信息的留存不仅仅取决于我们重复它的次数，更取决于我们加工它的“深度”。关注词语的含义（语义加工）比仅仅关注它的声音或外观能产生更强韧的记忆痕迹。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
当我们试图回想某事时，我们进入了<strong class="text-on-primary-fixed-variant">提取</strong>阶段。提取是从记忆库中搜寻并唤起已存储信息的过程。提取的成功不仅依赖于信息是否完好地存储，还很大程度上依赖于是否存在合适的“提取线索”（Retrieval Cues）。
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
<hr class="border-surface-container-high"/>
|
||||||
|
<!-- Active Recall Area -->
|
||||||
|
<section class="flex flex-col gap-6" id="active-recall-section">
|
||||||
|
<header class="text-center">
|
||||||
|
<h2 class="font-h2 text-h2 text-on-background mb-2">现在试着回忆一下</h2>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant">请不用翻看上面的内容，尝试用自己的话解释刚刚的知识点。</p>
|
||||||
|
</header>
|
||||||
|
<!-- Recall Input Area -->
|
||||||
|
<div class="relative w-full rounded-xl glass-panel ambient-shadow overflow-hidden transition-all focus-within:ring-2 focus-within:ring-primary focus-within:border-transparent">
|
||||||
|
<textarea class="w-full min-h-[200px] p-6 bg-transparent border-none resize-none focus:ring-0 font-body-md text-body-md text-on-background placeholder:text-outline-variant" placeholder="例如：记忆分为三个步骤... 深度加工是指..."></textarea>
|
||||||
|
<!-- Voice Input & Controls -->
|
||||||
|
<div class="absolute bottom-4 right-4 flex items-center gap-3">
|
||||||
|
<button class="w-12 h-12 rounded-full bg-surface-container hover:bg-surface-container-high transition-colors flex items-center justify-center text-primary active:scale-95 shadow-sm">
|
||||||
|
<span class="material-symbols-outlined">mic</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Methodological Shortcuts -->
|
||||||
|
<div class="flex flex-wrap gap-3 justify-center">
|
||||||
|
<button class="px-4 py-2 rounded-full border border-surface-container-highest bg-surface-container-lowest text-on-surface-variant font-body-md text-[14px] hover:bg-surface-container transition-colors flex items-center gap-2 active:scale-95">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">psychology</span>
|
||||||
|
用更简单的话解释
|
||||||
|
</button>
|
||||||
|
<button class="px-4 py-2 rounded-full border border-surface-container-highest bg-surface-container-lowest text-on-surface-variant font-body-md text-[14px] hover:bg-surface-container transition-colors flex items-center gap-2 active:scale-95">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">extension</span>
|
||||||
|
给我一个例子
|
||||||
|
</button>
|
||||||
|
<button class="px-4 py-2 rounded-full border border-surface-container-highest bg-surface-container-lowest text-on-surface-variant font-body-md text-[14px] hover:bg-surface-container transition-colors flex items-center gap-2 active:scale-95">
|
||||||
|
<span class="material-symbols-outlined text-[18px]">search_insights</span>
|
||||||
|
提示我遗漏了什么
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Primary Action -->
|
||||||
|
<div class="mt-4 flex justify-center">
|
||||||
|
<button class="ai-glow-btn px-8 py-4 rounded-xl text-on-primary font-h3 text-[18px] w-full max-w-md flex items-center justify-center gap-2">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||||||
|
交给 AI 分析
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</body></html>
|
||||||
BIN
ZhiXi_App/lesson_active_recall/screen.png
Normal file
BIN
ZhiXi_App/lesson_active_recall/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 225 KiB |
394
ZhiXi_App/my_learning_growth_profile/code.html
Normal file
394
ZhiXi_App/my_learning_growth_profile/code.html
Normal file
@ -0,0 +1,394 @@
|
|||||||
|
<!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>
|
||||||
BIN
ZhiXi_App/my_learning_growth_profile/screen.png
Normal file
BIN
ZhiXi_App/my_learning_growth_profile/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
267
ZhiXi_App/zhixi_ai_home_v2/code.html
Normal file
267
ZhiXi_App/zhixi_ai_home_v2/code.html
Normal file
@ -0,0 +1,267 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="zh-CN"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>知习 - AI-First Learning Home</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"/>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
"colors": {
|
||||||
|
"primary-container": "#2976c7",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"on-primary-container": "#fdfcff",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"primary-fixed": "#d4e3ff",
|
||||||
|
"primary-fixed-dim": "#a4c9ff",
|
||||||
|
"on-tertiary-container": "#fffbff",
|
||||||
|
"on-primary-fixed-variant": "#004883",
|
||||||
|
"outline": "#717783",
|
||||||
|
"tertiary-fixed-dim": "#c0c1ff",
|
||||||
|
"on-background": "#1a1c1f",
|
||||||
|
"on-surface-variant": "#414751",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"on-secondary-fixed-variant": "#670fac",
|
||||||
|
"secondary-fixed-dim": "#deb7ff",
|
||||||
|
"tertiary": "#4648d4",
|
||||||
|
"surface-container-highest": "#e2e2e6",
|
||||||
|
"surface-container-high": "#e8e8ec",
|
||||||
|
"on-secondary-container": "#440076",
|
||||||
|
"on-tertiary-fixed-variant": "#2f2ebe",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"on-tertiary-fixed": "#07006c",
|
||||||
|
"on-surface": "#1a1c1f",
|
||||||
|
"surface-tint": "#0060ac",
|
||||||
|
"surface-container": "#ededf1",
|
||||||
|
"secondary-fixed": "#f0dbff",
|
||||||
|
"inverse-on-surface": "#f0f0f4",
|
||||||
|
"surface-container-low": "#f3f3f7",
|
||||||
|
"on-secondary-fixed": "#2c0050",
|
||||||
|
"inverse-primary": "#a4c9ff",
|
||||||
|
"primary": "#005da7",
|
||||||
|
"surface-variant": "#e2e2e6",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"surface-bright": "#f9f9fd",
|
||||||
|
"tertiary-fixed": "#e1e0ff",
|
||||||
|
"surface": "#f9f9fd",
|
||||||
|
"outline-variant": "#c1c7d3",
|
||||||
|
"surface-dim": "#d9dade",
|
||||||
|
"tertiary-container": "#6063ee",
|
||||||
|
"secondary": "#8135c5",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"secondary-container": "#ba70ff",
|
||||||
|
"background": "#f9f9fd",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"on-primary-fixed": "#001c39",
|
||||||
|
"inverse-surface": "#2e3034",
|
||||||
|
"on-tertiary": "#ffffff"
|
||||||
|
},
|
||||||
|
"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: #FAFAFC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mesh-bg {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: -2;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 15% 50%, rgba(41, 118, 199, 0.04) 0%, transparent 50%),
|
||||||
|
radial-gradient(circle at 85% 30%, rgba(129, 53, 197, 0.03) 0%, transparent 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.geometric-lines {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: -1;
|
||||||
|
opacity: 0.4;
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgba(41, 118, 199, 0.05) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(41, 118, 199, 0.05) 1px, transparent 1px);
|
||||||
|
background-size: 40px 40px;
|
||||||
|
mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
|
||||||
|
-webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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.8);
|
||||||
|
box-shadow: 0 10px 40px -10px rgba(0, 93, 167, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes breathe {
|
||||||
|
0%, 100% { box-shadow: 0 0 20px rgba(41, 118, 199, 0.1), 0 0 40px rgba(129, 53, 197, 0.05); }
|
||||||
|
50% { box-shadow: 0 0 30px rgba(41, 118, 199, 0.2), 0 0 50px rgba(129, 53, 197, 0.1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-input-glow {
|
||||||
|
animation: breathe 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-shadow {
|
||||||
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-nav {
|
||||||
|
background: rgba(255, 255, 255, 0.85);
|
||||||
|
backdrop-filter: blur(32px);
|
||||||
|
-webkit-backdrop-filter: blur(32px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||||
|
box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
min-height: max(884px, 100dvh);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="font-body-md text-body-md text-on-surface antialiased min-h-screen relative pb-[120px]">
|
||||||
|
<!-- Decorative Background Elements -->
|
||||||
|
<div class="mesh-bg"></div>
|
||||||
|
<div class="geometric-lines"></div>
|
||||||
|
<!-- TopAppBar -->
|
||||||
|
<header class="w-full pt-16 pb-6 px-6 z-40 relative">
|
||||||
|
<div class="flex flex-col items-center justify-center w-full">
|
||||||
|
<h1 class="font-h1 text-h1 text-primary tracking-tight">知习</h1>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant mt-2 text-center opacity-80">今天想把哪块知识变清楚？</p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="px-container-margin w-full max-w-2xl mx-auto flex flex-col gap-12 items-center relative z-10">
|
||||||
|
<!-- AI Input Area -->
|
||||||
|
<div class="w-full glass-card rounded-[32px] p-2 flex flex-col ai-input-glow transition-all duration-300">
|
||||||
|
<div class="px-md py-4 w-full">
|
||||||
|
<textarea class="w-full bg-transparent border-none focus:ring-0 resize-none font-body-lg text-body-lg text-on-surface placeholder:text-outline-variant h-28 caret-primary" placeholder="问我知识点、上传资料，或开始一次主动回忆"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center px-4 pb-2 pt-2">
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button aria-label="Upload" class="p-2.5 rounded-full hover:bg-surface-container-highest/50 text-outline transition-colors">
|
||||||
|
<span class="material-symbols-outlined" style='font-variation-settings: "wght" 300;'>attach_file</span>
|
||||||
|
</button>
|
||||||
|
<button aria-label="Voice" class="p-2.5 rounded-full hover:bg-surface-container-highest/50 text-outline transition-colors">
|
||||||
|
<span class="material-symbols-outlined" style='font-variation-settings: "wght" 300;'>mic</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button aria-label="Send" class="bg-primary hover:bg-primary/90 text-on-primary rounded-full w-12 h-12 flex items-center justify-center active:scale-95 transition-all shadow-lg shadow-primary/20">
|
||||||
|
<span class="material-symbols-outlined" style='font-variation-settings: "wght" 400, "FILL" 1;'>arrow_upward</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Quick Actions Grid -->
|
||||||
|
<div class="grid grid-cols-4 gap-4 w-full px-2">
|
||||||
|
<button class="flex flex-col items-center gap-3 group active:scale-95 transition-transform">
|
||||||
|
<div class="w-16 h-16 rounded-2xl bg-white light-shadow flex items-center justify-center text-secondary group-hover:bg-secondary/5 transition-colors border border-white/50">
|
||||||
|
<span class="material-symbols-outlined text-[28px]" style='font-variation-settings: "wght" 300;'>psychology</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-label-caps text-label-caps text-on-surface-variant opacity-80">主动回忆</span>
|
||||||
|
</button>
|
||||||
|
<button class="flex flex-col items-center gap-3 group active:scale-95 transition-transform">
|
||||||
|
<div class="w-16 h-16 rounded-2xl bg-white light-shadow flex items-center justify-center text-primary group-hover:bg-primary/5 transition-colors border border-white/50">
|
||||||
|
<span class="material-symbols-outlined text-[28px]" style='font-variation-settings: "wght" 300;'>upload_file</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-label-caps text-label-caps text-on-surface-variant opacity-80">导入资料</span>
|
||||||
|
</button>
|
||||||
|
<button class="flex flex-col items-center gap-3 group active:scale-95 transition-transform">
|
||||||
|
<div class="w-16 h-16 rounded-2xl bg-white light-shadow flex items-center justify-center text-tertiary group-hover:bg-tertiary/5 transition-colors border border-white/50">
|
||||||
|
<span class="material-symbols-outlined text-[28px]" style='font-variation-settings: "wght" 300;'>history</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-label-caps text-label-caps text-on-surface-variant opacity-80">复习一下</span>
|
||||||
|
</button>
|
||||||
|
<button class="flex flex-col items-center gap-3 group active:scale-95 transition-transform">
|
||||||
|
<div class="w-16 h-16 rounded-2xl bg-white light-shadow flex items-center justify-center text-primary-container group-hover:bg-primary-container/5 transition-colors border border-white/50">
|
||||||
|
<span class="material-symbols-outlined text-[28px]" style='font-variation-settings: "wght" 300;'>auto_awesome</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-label-caps text-label-caps text-on-surface-variant opacity-80">AI 分析</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Current Learning Card -->
|
||||||
|
<div class="w-full mt-4">
|
||||||
|
<div class="bg-white/90 rounded-[28px] p-6 light-shadow flex flex-col gap-5 relative overflow-hidden border border-white/60"><div class="absolute left-0 top-0 bottom-0 w-1.5 bg-gradient-to-b from-primary via-primary to-secondary"></div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="font-label-caps text-[11px] text-outline uppercase tracking-[0.1em]">Current Learning</span>
|
||||||
|
<span class="material-symbols-outlined text-outline-variant" style='font-variation-settings: "wght" 300;'>more_horiz</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-h3 text-[24px] text-on-surface leading-tight font-bold">认知心理学基础</h3>
|
||||||
|
<div class="bg-primary/5 rounded-[20px] p-5 flex gap-4 items-start border border-primary/10">
|
||||||
|
<span class="material-symbols-outlined text-primary mt-0.5" style='font-variation-settings: "wght" 400, "FILL" 1;'>lightbulb</span>
|
||||||
|
<div>
|
||||||
|
<span class="font-label-caps text-[13px] text-primary block mb-1.5 font-bold">AI Suggestion</span>
|
||||||
|
<p class="font-body-md text-[15px] text-on-surface-variant leading-relaxed">建议今天先复习记忆编码部分</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- Premium Apple-style BottomNavBar -->
|
||||||
|
<div class="fixed bottom-6 left-1/2 -translate-x-1/2 w-[90%] max-w-sm z-50">
|
||||||
|
<nav class="floating-nav rounded-full px-2 py-2 flex justify-between items-center">
|
||||||
|
<!-- Active Tab: AI -->
|
||||||
|
<button class="flex flex-col items-center justify-center text-primary bg-primary/10 rounded-full px-5 py-2.5 active:scale-95 transition-all duration-300">
|
||||||
|
<span class="material-symbols-outlined mb-0.5 text-[22px]" style='font-variation-settings: "wght" 400, "FILL" 1;'>smart_toy</span>
|
||||||
|
<span class="font-manrope text-[10px] font-bold tracking-wide">AI</span>
|
||||||
|
</button>
|
||||||
|
<button class="flex flex-col items-center justify-center text-outline px-4 py-2 hover:text-primary transition-colors active:scale-95 duration-300">
|
||||||
|
<span class="material-symbols-outlined mb-0.5 text-[22px]" style='font-variation-settings: "wght" 300;'>database</span>
|
||||||
|
<span class="font-manrope text-[10px] font-medium tracking-wide">知识库</span>
|
||||||
|
</button>
|
||||||
|
<button class="flex flex-col items-center justify-center text-outline px-4 py-2 hover:text-primary transition-colors active:scale-95 duration-300">
|
||||||
|
<span class="material-symbols-outlined mb-0.5 text-[22px]" style='font-variation-settings: "wght" 300;'>school</span>
|
||||||
|
<span class="font-manrope text-[10px] font-medium tracking-wide">学习</span>
|
||||||
|
</button>
|
||||||
|
<button class="flex flex-col items-center justify-center text-outline px-4 py-2 hover:text-primary transition-colors active:scale-95 duration-300">
|
||||||
|
<span class="material-symbols-outlined mb-0.5 text-[22px]" style='font-variation-settings: "wght" 300;'>person</span>
|
||||||
|
<span class="font-manrope text-[10px] font-medium tracking-wide">我的</span>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
BIN
ZhiXi_App/zhixi_ai_home_v2/screen.png
Normal file
BIN
ZhiXi_App/zhixi_ai_home_v2/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 340 KiB |
Loading…
x
Reference in New Issue
Block a user