wangdl/ios-projects
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
ios-projects/ZhiXi_App/ai_learning_analysis_v2/code.html

306 lines
16 KiB
HTML
Raw Normal View History

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
2026-05-08 09:52:50 +08:00
<!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&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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>
Reference in New Issue Copy Permalink