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