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

267 lines
14 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" 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&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": {
"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>
Reference in New Issue Copy Permalink