WangDL
6062077e97
- AI home screen - Learning workspace - AI assistant - Learning analysis - Knowledge journey - Active recall lesson - Growth profile - Ethereal intelligence design
282 lines
17 KiB
HTML
282 lines
17 KiB
HTML
<!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> |