feat: 全面优化 UI 样式、动画系统与交互体验
- 新增加载进度条（BaseLayout） - 重构动画系统：修复 fadeInUp、新增 revealUp/pageEnter/blurIn 入场动画 - 添加 IntersectionObserver 滚动揭示机制 - 产品页：修复弹幕滚动效果、统一 Hero 区域样式与首页一致 - 产品理念页：重新设计对比叙事区、学习闭环图、产品原则卡片 - 支持页：完全重构表单布局、设备 pills 选中态、FAQ 双列网格 - 隐私政策页：重构侧边栏导航 - 首页：统一 Portal 三卡片边框、重构 Learning Loop 流程图 - Footer 去除冗余 margin-top、全局 CSS 新增 ethereal-glow 公共样式
This commit is contained in:
WangDL
parent
3c4e0808fc
commit
7590daebc0
2
package-lock.json
generated
2
package-lock.json
generated
@ -3038,7 +3038,6 @@
|
||||
"resolved": "https://registry.npmmirror.com/jiti/-/jiti-2.6.1.tgz",
|
||||
"integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"jiti": "lib/jiti-cli.mjs"
|
||||
}
|
||||
@ -3069,7 +3068,6 @@
|
||||
"resolved": "https://registry.npmmirror.com/lightningcss/-/lightningcss-1.32.0.tgz",
|
||||
"integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
|
||||
"license": "MPL-2.0",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"detect-libc": "^2.0.3"
|
||||
},
|
||||
|
||||
@ -7,7 +7,7 @@ const footerLinks = [
|
||||
];
|
||||
---
|
||||
|
||||
<footer style="width: 100%; margin-top: 128px; background-color: #f8fafc; border-top: 1px solid #e2e8f0;">
|
||||
<footer style="width: 100%; margin-top: 0; background-color: #f8fafc; border-top: 1px solid #e2e8f0;">
|
||||
<div style="max-width: 80rem; margin: 0 auto; padding: 80px 32px;">
|
||||
<div style="display: flex; flex-direction: column; align-items: center; gap: 32px; margin-bottom: 32px;" class="footer-links">
|
||||
<div style="display: flex; align-items: center; gap: 8px; color: #4F7CFF;">
|
||||
|
||||
@ -41,6 +41,29 @@ const ogImageUrl = ogImage || `${siteUrl}/og-default.png`;
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
</head>
|
||||
<body class="antialiased overflow-x-hidden selection:bg-blue-100">
|
||||
<div id="global-progress" class="fixed top-0 left-0 h-[3px] bg-gradient-to-r from-primary via-tech-blue to-secondary z-[9999] transition-[width]" style="width: 0%; border-radius: 0 3px 3px 0; box-shadow: 0 0 8px rgba(21, 80, 211, 0.3);"></div>
|
||||
<slot />
|
||||
</body>
|
||||
<script>
|
||||
const bar = document.getElementById('global-progress');
|
||||
function updateProgress() {
|
||||
const scrollTop = window.scrollY;
|
||||
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
|
||||
const progress = docHeight > 0 ? Math.min((scrollTop / docHeight) * 100, 100) : 0;
|
||||
bar.style.width = progress + '%';
|
||||
}
|
||||
window.addEventListener('scroll', updateProgress, { passive: true });
|
||||
window.addEventListener('resize', updateProgress, { passive: true });
|
||||
updateProgress();
|
||||
|
||||
const revealObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('revealed');
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
|
||||
|
||||
document.querySelectorAll('.animate-reveal-up').forEach(el => revealObserver.observe(el));
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -19,7 +19,7 @@ const changelog = [
|
||||
description="龙德AI学习的最新更新和开发进度。"
|
||||
>
|
||||
<Header />
|
||||
<main>
|
||||
<main class="animate-page-enter">
|
||||
<Hero
|
||||
title="更新日志"
|
||||
subtitle="产品开发进度与更新记录"
|
||||
|
||||
@ -11,7 +11,7 @@ import CTA from '../components/CTA.astro';
|
||||
description="龙德AI学习 Mac 版下载，敬请期待。"
|
||||
>
|
||||
<Header />
|
||||
<main>
|
||||
<main class="animate-page-enter">
|
||||
<Hero
|
||||
title="Mac 应用"
|
||||
subtitle="龙德AI学习 Mac 版正在开发中"
|
||||
|
||||
@ -136,7 +136,7 @@ import Footer from '../components/Footer.astro';
|
||||
</section>
|
||||
|
||||
<!-- Portal Section -->
|
||||
<section class="py-40 px-6 md:px-12 max-w-7xl mx-auto relative z-10">
|
||||
<section class="py-40 px-6 md:px-12 max-w-7xl mx-auto relative z-10 animate-reveal-up">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-navy mb-4" style="font-family: var(--font-manrope); letter-spacing: -0.02em;">今天想从哪里开始？</h2>
|
||||
<p class="text-base text-slate-500">选择一个入口，进入你的专属学习流</p>
|
||||
@ -144,19 +144,19 @@ import Footer from '../components/Footer.astro';
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<a class="glass-card-premium p-10 rounded-3xl flex flex-col items-center text-center gap-6 hover-lift group cursor-pointer" href="#">
|
||||
<div class="w-16 h-16 rounded-2xl bg-slate-50 flex items-center justify-center text-tech-blue border border-slate-100 group-hover:bg-blue-50 transition-colors">
|
||||
<div class="w-16 h-16 rounded-2xl bg-slate-50 flex items-center justify-center text-tech-blue border border-slate-100 group-hover:bg-blue-50 group-hover:border-blue-100 transition-colors">
|
||||
<span class="material-symbols-outlined text-3xl">upload_file</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold text-navy mb-2">导入知识库</h3>
|
||||
<p class="text-sm text-slate-500">上传文档、笔记，让 AI 为你梳理结构。</p>
|
||||
</div>
|
||||
<div class="mt-auto pt-4 text-tech-blue flex items-center gap-1 text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity transform translate-y-2 group-hover:translate-y-0">
|
||||
<div class="mt-auto pt-4 text-tech-blue flex items-center gap-1 text-sm font-medium opacity-0 group-hover:opacity-100 transition-all duration-300 translate-y-2 group-hover:translate-y-0">
|
||||
开始导入 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="glass-card-premium p-10 rounded-3xl flex flex-col items-center text-center gap-6 hover-lift group cursor-pointer border-tech-blue/20" href="#">
|
||||
<a class="glass-card-premium p-10 rounded-3xl flex flex-col items-center text-center gap-6 hover-lift group cursor-pointer" href="#" style="background: rgba(235, 240, 255, 0.65);">
|
||||
<div class="w-16 h-16 rounded-2xl bg-blue-50 flex items-center justify-center text-tech-blue border border-blue-100 group-hover:scale-110 transition-transform">
|
||||
<span class="material-symbols-outlined text-3xl">psychology</span>
|
||||
</div>
|
||||
@ -164,20 +164,20 @@ import Footer from '../components/Footer.astro';
|
||||
<h3 class="text-xl font-semibold text-navy mb-2">开启主动回忆</h3>
|
||||
<p class="text-sm text-slate-500">基于艾宾浩斯曲线，检验你的真实掌握度。</p>
|
||||
</div>
|
||||
<div class="mt-auto pt-4 text-tech-blue flex items-center gap-1 text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity transform translate-y-2 group-hover:translate-y-0">
|
||||
<div class="mt-auto pt-4 text-tech-blue flex items-center gap-1 text-sm font-medium opacity-0 group-hover:opacity-100 transition-all duration-300 translate-y-2 group-hover:translate-y-0">
|
||||
开始测试 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="glass-card-premium p-10 rounded-3xl flex flex-col items-center text-center gap-6 hover-lift group cursor-pointer" href="#">
|
||||
<div class="w-16 h-16 rounded-2xl bg-slate-50 flex items-center justify-center text-tech-blue border border-slate-100 group-hover:bg-blue-50 transition-colors">
|
||||
<div class="w-16 h-16 rounded-2xl bg-slate-50 flex items-center justify-center text-tech-blue border border-slate-100 group-hover:bg-blue-50 group-hover:border-blue-100 transition-colors">
|
||||
<span class="material-symbols-outlined text-3xl">fact_check</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold text-navy mb-2">查看今日复习</h3>
|
||||
<p class="text-sm text-slate-500">AI 为你安排的最优复习路径，高效不遗漏。</p>
|
||||
</div>
|
||||
<div class="mt-auto pt-4 text-tech-blue flex items-center gap-1 text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity transform translate-y-2 group-hover:translate-y-0">
|
||||
<div class="mt-auto pt-4 text-tech-blue flex items-center gap-1 text-sm font-medium opacity-0 group-hover:opacity-100 transition-all duration-300 translate-y-2 group-hover:translate-y-0">
|
||||
查看计划 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</div>
|
||||
</a>
|
||||
@ -185,60 +185,134 @@ import Footer from '../components/Footer.astro';
|
||||
</section>
|
||||
|
||||
<!-- Learning Loop Section -->
|
||||
<section class="py-40 px-6 md:px-12 max-w-7xl mx-auto relative z-10">
|
||||
<div class="text-center mb-24">
|
||||
<section class="py-40 px-6 md:px-12 max-w-7xl mx-auto relative z-10 animate-reveal-up">
|
||||
<div class="text-center mb-20">
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-navy mb-4" style="font-family: var(--font-manrope); letter-spacing: -0.02em;">不是帮你多看一点，而是帮你真正学会</h2>
|
||||
<p class="text-base text-slate-500">构建可持续的闭环学习流</p>
|
||||
</div>
|
||||
|
||||
<div class="relative w-full max-w-4xl mx-auto flex flex-col md:flex-row items-center justify-between gap-12 md:gap-4">
|
||||
<div class="hidden md:block absolute top-1/2 left-[10%] right-[10%] h-0.5 bg-gradient-to-r from-slate-200 via-tech-blue/30 to-slate-200 -translate-y-1/2 z-0"></div>
|
||||
<div class="md:hidden absolute left-1/2 top-[10%] bottom-[10%] w-0.5 bg-gradient-to-b from-slate-200 via-tech-blue/30 to-slate-200 -translate-x-1/2 z-0"></div>
|
||||
<!-- Desktop Flow -->
|
||||
<div class="hidden md:flex items-center justify-center gap-0 max-w-4xl mx-auto relative">
|
||||
<!-- Connecting track -->
|
||||
<div class="absolute top-1/2 left-[8%] right-[8%] h-[6px] bg-slate-100 rounded-full -translate-y-1/2 z-0"></div>
|
||||
<div class="absolute top-1/2 left-[8%] right-[8%] h-[6px] rounded-full -translate-y-1/2 z-0" style="background: linear-gradient(90deg, #e2e8f0 0%, #b5c4ff 50%, #e2e8f0 100%);"></div>
|
||||
|
||||
<div class="relative z-10 flex flex-col items-center text-center gap-4 group cursor-pointer">
|
||||
<div class="w-20 h-20 rounded-full bg-white shadow-xl shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-700 group-hover:text-tech-blue group-hover:scale-110 transition-all duration-300 animate-breathe">
|
||||
<span class="material-symbols-outlined text-3xl">input</span>
|
||||
<!-- Step 1 -->
|
||||
<div class="relative z-10 flex flex-col items-center text-center gap-3 group flex-1">
|
||||
<div class="w-[88px] h-[88px] rounded-2xl bg-white shadow-lg shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-500 group-hover:text-tech-blue group-hover:border-tech-blue/30 group-hover:shadow-xl group-hover:-translate-y-1 transition-all duration-300">
|
||||
<span class="material-symbols-outlined text-[32px]">input</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-navy mb-1">1. 摄入</h4>
|
||||
<p class="text-xs text-slate-500">知识结构化</p>
|
||||
<h4 class="font-bold text-navy text-sm mb-1">摄入</h4>
|
||||
<p class="text-[11px] text-slate-400">知识结构化</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 flex flex-col items-center text-center gap-4 group cursor-pointer">
|
||||
<div class="w-20 h-20 rounded-full bg-white shadow-xl shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-700 group-hover:text-tech-blue group-hover:scale-110 transition-all duration-300 animate-breathe">
|
||||
<span class="material-symbols-outlined text-3xl">memory</span>
|
||||
<!-- Arrow -->
|
||||
<div class="relative z-10 flex items-center justify-center w-10 shrink-0">
|
||||
<span class="material-symbols-outlined text-slate-300 text-xl">arrow_forward</span>
|
||||
</div>
|
||||
|
||||
<!-- Step 2 -->
|
||||
<div class="relative z-10 flex flex-col items-center text-center gap-3 group flex-1">
|
||||
<div class="w-[88px] h-[88px] rounded-2xl bg-white shadow-lg shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-500 group-hover:text-tech-blue group-hover:border-tech-blue/30 group-hover:shadow-xl group-hover:-translate-y-1 transition-all duration-300">
|
||||
<span class="material-symbols-outlined text-[32px]">memory</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-navy mb-1">2. 回忆</h4>
|
||||
<p class="text-xs text-slate-500">主动提取</p>
|
||||
<h4 class="font-bold text-navy text-sm mb-1">回忆</h4>
|
||||
<p class="text-[11px] text-slate-400">主动提取</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 flex flex-col items-center text-center gap-4 group cursor-pointer mt-8 md:mt-0 md:-translate-y-8">
|
||||
<div class="w-24 h-24 rounded-full bg-tech-blue shadow-2xl shadow-blue-500/40 border-4 border-white flex items-center justify-center text-white animate-breathe">
|
||||
<span class="material-symbols-outlined text-4xl">auto_awesome</span>
|
||||
<!-- Arrow -->
|
||||
<div class="relative z-10 flex items-center justify-center w-10 shrink-0">
|
||||
<span class="material-symbols-outlined text-slate-300 text-xl">arrow_forward</span>
|
||||
</div>
|
||||
|
||||
<!-- Step 3 - Elevated center -->
|
||||
<div class="relative z-20 flex flex-col items-center text-center gap-3 group flex-1 -mt-8">
|
||||
<div class="w-[104px] h-[104px] rounded-2xl bg-tech-blue shadow-2xl shadow-blue-500/30 flex items-center justify-center text-white group-hover:scale-105 transition-all duration-300">
|
||||
<span class="material-symbols-outlined text-[40px]">auto_awesome</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-tech-blue mb-1 text-lg">3. AI 分析</h4>
|
||||
<p class="text-xs text-slate-600 font-medium">精准定位薄弱点</p>
|
||||
<h4 class="font-bold text-tech-blue text-base mb-1">AI 分析</h4>
|
||||
<p class="text-[11px] text-slate-500 font-medium">精准定位薄弱点</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 flex flex-col items-center text-center gap-4 group cursor-pointer">
|
||||
<div class="w-20 h-20 rounded-full bg-white shadow-xl shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-700 group-hover:text-tech-blue group-hover:scale-110 transition-all duration-300 animate-breathe">
|
||||
<span class="material-symbols-outlined text-3xl">update</span>
|
||||
<!-- Arrow -->
|
||||
<div class="relative z-10 flex items-center justify-center w-10 shrink-0">
|
||||
<span class="material-symbols-outlined text-slate-300 text-xl">arrow_forward</span>
|
||||
</div>
|
||||
|
||||
<!-- Step 4 -->
|
||||
<div class="relative z-10 flex flex-col items-center text-center gap-3 group flex-1">
|
||||
<div class="w-[88px] h-[88px] rounded-2xl bg-white shadow-lg shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-500 group-hover:text-tech-blue group-hover:border-tech-blue/30 group-hover:shadow-xl group-hover:-translate-y-1 transition-all duration-300">
|
||||
<span class="material-symbols-outlined text-[32px]">update</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-navy mb-1">4. 巩固</h4>
|
||||
<p class="text-xs text-slate-500">动态复习计划</p>
|
||||
<h4 class="font-bold text-navy text-sm mb-1">巩固</h4>
|
||||
<p class="text-[11px] text-slate-400">动态复习计划</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loop back arrow -->
|
||||
<div class="absolute -bottom-4 left-[6%] right-[6%] flex items-center justify-center z-0">
|
||||
<div class="flex items-center gap-1 text-[10px] text-slate-300 font-medium tracking-widest uppercase">
|
||||
<span class="material-symbols-outlined text-xs">replay</span>
|
||||
循环迭代
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Flow -->
|
||||
<div class="flex md:hidden flex-col items-center gap-0 max-w-sm mx-auto relative">
|
||||
<div class="absolute left-1/2 top-[60px] bottom-[60px] w-[4px] rounded-full -translate-x-1/2 z-0" style="background: linear-gradient(180deg, #e2e8f0 0%, #b5c4ff 50%, #e2e8f0 100%);"></div>
|
||||
|
||||
<div class="relative z-10 flex items-center gap-5 w-full py-5 group">
|
||||
<div class="w-14 h-14 rounded-xl bg-white shadow-md shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-500 shrink-0 group-hover:text-tech-blue transition-colors">
|
||||
<span class="material-symbols-outlined text-2xl">input</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-navy text-sm">摄入</h4>
|
||||
<p class="text-xs text-slate-400">知识结构化</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 flex items-center gap-5 w-full py-5 group">
|
||||
<div class="w-14 h-14 rounded-xl bg-white shadow-md shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-500 shrink-0 group-hover:text-tech-blue transition-colors">
|
||||
<span class="material-symbols-outlined text-2xl">memory</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-navy text-sm">回忆</h4>
|
||||
<p class="text-xs text-slate-400">主动提取</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-20 flex items-center gap-5 w-full py-5 group">
|
||||
<div class="w-16 h-16 rounded-xl bg-tech-blue shadow-lg shadow-blue-500/30 flex items-center justify-center text-white shrink-0">
|
||||
<span class="material-symbols-outlined text-[28px]">auto_awesome</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-tech-blue text-sm">AI 分析</h4>
|
||||
<p class="text-xs text-slate-500 font-medium">精准定位薄弱点</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 flex items-center gap-5 w-full py-5 group">
|
||||
<div class="w-14 h-14 rounded-xl bg-white shadow-md shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-500 shrink-0 group-hover:text-tech-blue transition-colors">
|
||||
<span class="material-symbols-outlined text-2xl">update</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-navy text-sm">巩固</h4>
|
||||
<p class="text-xs text-slate-400">动态复习计划</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Preview Section -->
|
||||
<section class="py-40 px-6 md:px-12 max-w-7xl mx-auto relative z-10">
|
||||
<section class="py-40 px-6 md:px-12 max-w-7xl mx-auto relative z-10 animate-reveal-up">
|
||||
<div class="bg-gradient-to-br from-slate-50 to-blue-50 rounded-[3rem] p-8 md:p-16 border border-blue-100/50 overflow-hidden relative shadow-xl shadow-blue-500/5">
|
||||
<div class="absolute top-0 right-0 w-96 h-96 bg-blue-300/10 rounded-full blur-[80px]"></div>
|
||||
|
||||
|
||||
@ -37,116 +37,204 @@ import Footer from '../components/Footer.astro';
|
||||
</header>
|
||||
|
||||
<!-- 2. Contrast Narrative Section -->
|
||||
<section class="py-[120px] z-10 relative px-6 max-w-[1200px] mx-auto">
|
||||
<div class="text-center mb-24">
|
||||
<section class="py-[120px] z-10 relative px-6 max-w-[1200px] mx-auto animate-reveal-up">
|
||||
<div class="text-center mb-20">
|
||||
<h2 class="font-headline-lg text-on-surface">学习最大的敌人，往往不是没有资料。</h2>
|
||||
<p class="font-body-base text-on-surface-variant mt-4">是无序的收集，制造了"我已经懂了"的幻觉。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-16 items-center">
|
||||
<!-- Left Side: Fragmented Chaos -->
|
||||
<div class="col-span-1 md:col-span-5 h-[400px] relative">
|
||||
<div class="absolute top-1/4 left-10 glass-panel px-6 py-3 rounded-full text-on-surface-variant font-label-sm rotate-[-6deg] opacity-70">
|
||||
<span class="material-symbols-outlined align-middle mr-2 text-outline">visibility</span> 看过
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
|
||||
<!-- Left Side: Fragmented Chaos - 散落的伪学习卡片 -->
|
||||
<div class="col-span-1 md:col-span-5 relative h-[480px]">
|
||||
<!-- 背景模糊光圈 -->
|
||||
<div class="absolute inset-0 bg-surface-container-highest/40 blur-3xl rounded-full scale-75"></div>
|
||||
|
||||
<!-- 卡片 1: 看过 - 散落左上 -->
|
||||
<div class="absolute top-0 left-0 w-44 glass-panel rounded-2xl p-4 shadow-lg rotate-[-5deg] hover:rotate-[-2deg] transition-transform duration-300 z-20">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-error-container/60 text-error flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-base">visibility</span>
|
||||
</div>
|
||||
<span class="font-label-sm text-on-surface">看过</span>
|
||||
</div>
|
||||
<p class="text-xs text-on-surface-variant leading-relaxed">快速翻页，扫过即走，<br/>不留印象。</p>
|
||||
<div class="mt-3 h-1 w-full bg-surface-container-highest rounded-full overflow-hidden">
|
||||
<div class="h-full bg-error/20 rounded-full w-[20%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute top-1/2 right-12 glass-panel px-6 py-3 rounded-full text-on-surface-variant font-label-sm rotate-[4deg] opacity-60">
|
||||
<span class="material-symbols-outlined align-middle mr-2 text-outline">bookmark</span> 收藏
|
||||
|
||||
<!-- 卡片 2: 划线 - 散落中间偏右 -->
|
||||
<div class="absolute top-[30%] right-0 w-40 glass-panel rounded-2xl p-4 shadow-lg rotate-[8deg] hover:rotate-[4deg] transition-transform duration-300 z-10">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-primary-fixed/60 text-primary-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-base">edit</span>
|
||||
</div>
|
||||
<span class="font-label-sm text-on-surface">划线</span>
|
||||
</div>
|
||||
<p class="text-xs text-on-surface-variant leading-relaxed">标记很多重点，<br/>事后从不回顾。</p>
|
||||
<div class="mt-3 flex gap-1">
|
||||
<div class="h-1 flex-1 bg-primary-fixed-dim/60 rounded-full"></div>
|
||||
<div class="h-1 w-6 bg-primary-fixed-dim/30 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-1/4 left-20 glass-panel px-6 py-3 rounded-full text-on-surface-variant font-label-sm rotate-[-2deg] opacity-80">
|
||||
<span class="material-symbols-outlined align-middle mr-2 text-outline">edit</span> 划线
|
||||
|
||||
<!-- 卡片 3: 收藏 - 散落底部 -->
|
||||
<div class="absolute bottom-8 left-8 w-48 glass-panel rounded-2xl p-4 shadow-lg rotate-[-8deg] hover:rotate-[-3deg] transition-transform duration-300 z-15">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-secondary-fixed/60 text-secondary-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-base">bookmark</span>
|
||||
</div>
|
||||
<span class="font-label-sm text-on-surface">收藏</span>
|
||||
</div>
|
||||
<p class="text-xs text-on-surface-variant leading-relaxed">先存为敬，再也不点开，<br/>直到遗忘。</p>
|
||||
</div>
|
||||
|
||||
<!-- 装饰虚线圆圈 -->
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 rounded-full border border-dashed border-outline-variant/40 pointer-events-none"></div>
|
||||
|
||||
<!-- "?" 标记表示混乱 -->
|
||||
<div class="absolute bottom-0 right-4 w-10 h-10 rounded-full bg-surface-container-highest/50 border border-outline-variant/30 flex items-center justify-center text-outline-variant text-lg font-light pointer-events-none z-0">
|
||||
?
|
||||
</div>
|
||||
<div class="absolute top-[10%] right-[20%] w-32 h-32 rounded-full border border-dashed border-outline-variant/50"></div>
|
||||
<div class="absolute bottom-[20%] left-[10%] w-48 h-48 rounded-full bg-surface-container-highest/30 blur-2xl"></div>
|
||||
</div>
|
||||
|
||||
<!-- Center Divider -->
|
||||
<div class="col-span-1 md:col-span-2 flex justify-center items-center h-full">
|
||||
<div class="w-px h-32 md:h-full bg-gradient-to-b from-transparent via-outline-variant to-transparent hidden md:block"></div>
|
||||
<div class="col-span-1 md:col-span-2 flex justify-center items-center">
|
||||
<div class="hidden md:flex flex-col items-center gap-3">
|
||||
<div class="w-px h-16 bg-gradient-to-b from-transparent via-outline-variant to-outline-variant"></div>
|
||||
<span class="material-symbols-outlined text-4xl text-primary rotate-90 animate-float-slow">arrow_forward</span>
|
||||
<div class="w-px h-16 bg-gradient-to-b from-outline-variant via-outline-variant to-transparent"></div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-outline-variant text-4xl block md:hidden rotate-90">arrow_forward</span>
|
||||
</div>
|
||||
|
||||
<!-- Right Side: Structured Path -->
|
||||
<div class="col-span-1 md:col-span-5 flex flex-col gap-6 relative">
|
||||
<div class="absolute left-[27px] top-4 bottom-4 w-px bg-primary-fixed-dim z-0"></div>
|
||||
<!-- Right Side: Structured Learning Path -->
|
||||
<div class="col-span-1 md:col-span-5 flex flex-col gap-5 relative">
|
||||
<!-- 纵向连线 -->
|
||||
<div class="absolute left-[31px] top-8 bottom-8 w-0.5 bg-gradient-to-b from-primary-container via-primary-fixed-dim to-primary rounded-full z-0"></div>
|
||||
|
||||
<div class="flex items-center gap-6 relative z-10">
|
||||
<div class="w-14 h-14 rounded-full bg-surface-container-lowest border border-primary-fixed shadow-sm flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined">record_voice_over</span>
|
||||
<div class="flex items-center gap-5 relative z-10 group">
|
||||
<div class="w-16 h-16 rounded-2xl bg-surface-container-lowest border-2 border-primary-fixed shadow-sm flex items-center justify-center text-primary group-hover:scale-105 transition-transform duration-300">
|
||||
<span class="material-symbols-outlined text-2xl">record_voice_over</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-headline-md text-on-surface">复述</span>
|
||||
<p class="text-sm text-on-surface-variant mt-0.5">用自己的话重新表达，检验是否真懂</p>
|
||||
</div>
|
||||
<span class="font-headline-md text-on-surface">复述</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-6 relative z-10">
|
||||
<div class="w-14 h-14 rounded-full bg-surface-container-lowest border border-primary-fixed shadow-sm flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined">output</span>
|
||||
<div class="flex items-center gap-5 relative z-10 group">
|
||||
<div class="w-16 h-16 rounded-2xl bg-surface-container-lowest border-2 border-primary-fixed shadow-sm flex items-center justify-center text-primary group-hover:scale-105 transition-transform duration-300">
|
||||
<span class="material-symbols-outlined text-2xl">output</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-headline-md text-on-surface">输出</span>
|
||||
<p class="text-sm text-on-surface-variant mt-0.5">撰写笔记、绘制图谱，固化为知识资产</p>
|
||||
</div>
|
||||
<span class="font-headline-md text-on-surface">输出</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-6 relative z-10">
|
||||
<div class="w-14 h-14 rounded-full bg-surface-container-lowest border border-primary-fixed shadow-sm flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined">sync_alt</span>
|
||||
<div class="flex items-center gap-5 relative z-10 group">
|
||||
<div class="w-16 h-16 rounded-2xl bg-surface-container-lowest border-2 border-primary-fixed shadow-sm flex items-center justify-center text-primary group-hover:scale-105 transition-transform duration-300">
|
||||
<span class="material-symbols-outlined text-2xl">sync_alt</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-headline-md text-on-surface">反馈</span>
|
||||
<p class="text-sm text-on-surface-variant mt-0.5">AI 即时分析漏洞，精准定位薄弱环节</p>
|
||||
</div>
|
||||
<span class="font-headline-md text-on-surface">反馈</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-6 relative z-10">
|
||||
<div class="w-14 h-14 rounded-full bg-primary shadow-lg shadow-primary/20 flex items-center justify-center text-on-primary">
|
||||
<span class="material-symbols-outlined">model_training</span>
|
||||
<div class="flex items-center gap-5 relative z-10 group">
|
||||
<div class="w-16 h-16 rounded-2xl bg-primary shadow-lg shadow-primary/20 flex items-center justify-center text-on-primary group-hover:scale-105 transition-transform duration-300">
|
||||
<span class="material-symbols-outlined text-2xl">model_training</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-headline-md text-primary font-bold">复习</span>
|
||||
<p class="text-sm text-on-surface-variant mt-0.5">间隔重复 + 主动回忆，对抗遗忘曲线</p>
|
||||
</div>
|
||||
<span class="font-headline-md text-on-surface font-bold text-primary">复习</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3. Core Learning Loop Section -->
|
||||
<section class="py-[120px] z-10 relative bg-surface-container-low/50">
|
||||
<section class="py-[120px] z-10 relative bg-surface-container-low/50 animate-reveal-up">
|
||||
<div class="max-w-[1200px] mx-auto px-6 text-center">
|
||||
<h2 class="font-headline-lg text-on-surface mb-24">真正的学习，是一个闭环。</h2>
|
||||
<h2 class="font-headline-lg text-on-surface mb-20">真正的学习，是一个闭环。</h2>
|
||||
|
||||
<div class="relative w-full max-w-[600px] h-[600px] mx-auto flex items-center justify-center">
|
||||
<!-- Center Core -->
|
||||
<div class="absolute inset-0 bg-primary-fixed opacity-20 blur-3xl rounded-full"></div>
|
||||
<div class="w-32 h-32 rounded-full glass-panel flex flex-col items-center justify-center text-primary z-20 shadow-lg shadow-primary/10">
|
||||
<span class="material-symbols-outlined text-4xl mb-1">person</span>
|
||||
<div class="relative w-full max-w-[540px] h-[540px] mx-auto flex items-center justify-center">
|
||||
<!-- 外圈光晕 -->
|
||||
<div class="absolute inset-0 bg-primary-fixed opacity-15 blur-3xl rounded-full"></div>
|
||||
|
||||
<!-- 轨道环 -->
|
||||
<div class="absolute inset-12 rounded-full border border-primary-fixed-dim/30 z-0"></div>
|
||||
<div class="absolute inset-12 rounded-full border border-primary-fixed-dim border-dashed animate-spin opacity-30 z-0" style="animation-duration: 80s;"></div>
|
||||
|
||||
<!-- 中心节点 -->
|
||||
<div class="w-28 h-28 rounded-full glass-panel flex flex-col items-center justify-center text-primary z-20 shadow-xl shadow-primary/10">
|
||||
<span class="material-symbols-outlined text-3xl mb-1">person</span>
|
||||
<span class="font-label-sm">你</span>
|
||||
</div>
|
||||
|
||||
<!-- Orbital Ring -->
|
||||
<div class="absolute inset-8 rounded-full border border-primary-fixed-dim border-dashed animate-spin opacity-50 z-0" style="animation-duration: 60s;"></div>
|
||||
|
||||
<!-- Nodes positioned pseudo-circularly -->
|
||||
<div class="absolute top-[5%] left-1/2 -translate-x-1/2 glass-panel px-6 py-3 rounded-full flex items-center gap-2 shadow-sm z-10">
|
||||
<span class="material-symbols-outlined text-outline">input</span>
|
||||
<span class="font-label-sm text-on-surface">输入</span>
|
||||
<!-- 轨道节点 - 顶部: 输入 -->
|
||||
<div class="absolute top-4 left-1/2 -translate-x-1/2 glass-panel px-5 py-3 rounded-xl flex items-center gap-3 shadow-md z-10 hover:scale-105 transition-transform duration-300">
|
||||
<div class="w-9 h-9 rounded-full bg-primary-fixed text-primary-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-sm">input</span>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<span class="font-label-sm text-on-surface">输入</span>
|
||||
<p class="text-[11px] text-on-surface-variant leading-tight">阅读 · 收集</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute top-[30%] right-[5%] glass-panel px-6 py-3 rounded-full flex items-center gap-2 shadow-sm z-10">
|
||||
<span class="material-symbols-outlined text-outline">output</span>
|
||||
<span class="font-label-sm text-on-surface">输出</span>
|
||||
<!-- 轨道节点 - 右上: 输出 -->
|
||||
<div class="absolute top-[22%] right-0 glass-panel px-5 py-3 rounded-xl flex items-center gap-3 shadow-md z-10 hover:scale-105 transition-transform duration-300">
|
||||
<div class="w-9 h-9 rounded-full bg-primary-fixed text-primary-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-sm">output</span>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<span class="font-label-sm text-on-surface">输出</span>
|
||||
<p class="text-[11px] text-on-surface-variant leading-tight">复述 · 写作</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-[20%] right-[15%] glass-panel px-6 py-3 rounded-full flex items-center gap-2 shadow-sm z-10">
|
||||
<span class="material-symbols-outlined text-outline">feedback</span>
|
||||
<span class="font-label-sm text-on-surface">反馈</span>
|
||||
<!-- 轨道节点 - 右下: 反馈 -->
|
||||
<div class="absolute bottom-[18%] right-3 glass-panel px-5 py-3 rounded-xl flex items-center gap-3 shadow-md z-10 hover:scale-105 transition-transform duration-300">
|
||||
<div class="w-9 h-9 rounded-full bg-primary-fixed text-primary-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-sm">feedback</span>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<span class="font-label-sm text-on-surface">反馈</span>
|
||||
<p class="text-[11px] text-on-surface-variant leading-tight">分析 · 诊断</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-[20%] left-[15%] glass-panel px-6 py-3 rounded-full flex items-center gap-2 shadow-sm z-10">
|
||||
<span class="material-symbols-outlined text-outline">tune</span>
|
||||
<span class="font-label-sm text-on-surface">调整</span>
|
||||
<!-- 轨道节点 - 左下: 调整 -->
|
||||
<div class="absolute bottom-[18%] left-3 glass-panel px-5 py-3 rounded-xl flex items-center gap-3 shadow-md z-10 hover:scale-105 transition-transform duration-300">
|
||||
<div class="w-9 h-9 rounded-full bg-primary-fixed text-primary-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-sm">tune</span>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<span class="font-label-sm text-on-surface">调整</span>
|
||||
<p class="text-[11px] text-on-surface-variant leading-tight">纠偏 · 优化</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute top-[30%] left-[5%] glass-panel px-6 py-3 rounded-full flex items-center gap-2 shadow-sm z-10">
|
||||
<span class="material-symbols-outlined text-outline">history</span>
|
||||
<span class="font-label-sm text-on-surface">复习</span>
|
||||
<!-- 轨道节点 - 左上: 复习 -->
|
||||
<div class="absolute top-[22%] left-0 glass-panel px-5 py-3 rounded-xl flex items-center gap-3 shadow-md z-10 hover:scale-105 transition-transform duration-300">
|
||||
<div class="w-9 h-9 rounded-full bg-primary-fixed text-primary-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-sm">history</span>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<span class="font-label-sm text-on-surface">复习</span>
|
||||
<p class="text-[11px] text-on-surface-variant leading-tight">间隔 · 回忆</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. AI Feedback System Section (Immersive UI Mockup) -->
|
||||
<section class="py-[120px] z-10 relative px-6">
|
||||
<section class="py-[120px] z-10 relative px-6 animate-reveal-up">
|
||||
<div class="max-w-4xl mx-auto text-center mb-16">
|
||||
<h2 class="font-headline-lg text-on-surface">AI 不应该只是总结工具，<br/>而应该成为学习过程里的反馈系统。</h2>
|
||||
</div>
|
||||
@ -223,55 +311,73 @@ import Footer from '../components/Footer.astro';
|
||||
</section>
|
||||
|
||||
<!-- 5. Principles Manifesto Section -->
|
||||
<section class="py-[120px] z-10 relative px-6 max-w-4xl mx-auto">
|
||||
<h2 class="font-display-xl text-on-surface mb-16">知习 AI 的产品原则</h2>
|
||||
<section class="py-[120px] z-10 relative px-6 max-w-[1200px] mx-auto animate-reveal-up">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="font-display-xl text-on-surface mb-4">知习 AI 的产品原则</h2>
|
||||
<p class="font-body-base text-on-surface-variant">五条核心信念，定义了我们的产品设计哲学</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<!-- Principle 01 -->
|
||||
<div class="border-t border-outline-variant py-10 flex flex-col md:flex-row gap-6 md:gap-12 items-start group">
|
||||
<div class="text-[80px] font-light leading-[0.8] text-tertiary-fixed-dim/40 group-hover:text-primary transition-colors duration-500">01</div>
|
||||
<!-- 原则卡片网格 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
|
||||
<!-- Principle 01 - 全宽 -->
|
||||
<div class="col-span-1 md:col-span-12 glass-panel rounded-2xl p-8 md:p-10 flex flex-col md:flex-row gap-8 items-start group hover:shadow-lg hover:-translate-y-1 transition-all duration-500">
|
||||
<div class="shrink-0 flex items-center gap-5">
|
||||
<span class="text-[64px] font-extrabold leading-none bg-gradient-to-br from-primary to-secondary bg-clip-text text-transparent opacity-60 group-hover:opacity-100 transition-opacity duration-500">01</span>
|
||||
<div class="w-14 h-14 rounded-2xl bg-error-container/40 text-error flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-2xl">tune</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-headline-md text-on-surface mb-3">少一点信息噪音，多一点学习反馈</h3>
|
||||
<p class="font-body-base text-on-surface-variant">信息爆炸的时代，缺的不是内容，而是对内容的深度加工。我们抑制推流，放大反馈，让每一次交互都指向认知升级。</p>
|
||||
<h3 class="font-headline-md text-on-surface mb-2">少一点信息噪音，多一点学习反馈</h3>
|
||||
<p class="font-body-base text-on-surface-variant leading-relaxed">信息爆炸的时代，缺的不是内容，而是对内容的深度加工。我们抑制推流，放大反馈，让每一次交互都指向认知升级。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Principle 02 -->
|
||||
<div class="border-t border-outline-variant py-10 flex flex-col md:flex-row gap-6 md:gap-12 items-start group">
|
||||
<div class="text-[80px] font-light leading-[0.8] text-tertiary-fixed-dim/40 group-hover:text-primary transition-colors duration-500">02</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-headline-md text-on-surface mb-3">知识需要沉淀，而不是被无限折叠</h3>
|
||||
<p class="font-body-base text-on-surface-variant">拒绝复杂的层级树和无底洞般的标签库。知识的结构应该如大脑的神经网络般扁平而互联，易于提取，利于生长。</p>
|
||||
<!-- Principle 02 + 03 并排 -->
|
||||
<div class="col-span-1 md:col-span-6 glass-panel rounded-2xl p-8 group hover:shadow-lg hover:-translate-y-1 transition-all duration-500">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<span class="text-[56px] font-extrabold leading-none bg-gradient-to-br from-secondary to-primary bg-clip-text text-transparent opacity-50 group-hover:opacity-100 transition-opacity duration-500">02</span>
|
||||
<div class="w-12 h-12 rounded-xl bg-secondary-fixed/40 text-secondary flex items-center justify-center ml-auto">
|
||||
<span class="material-symbols-outlined text-xl">psychology</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="font-headline-md text-on-surface mb-3">知识需要沉淀，而不是被无限折叠</h3>
|
||||
<p class="font-body-base text-on-surface-variant leading-relaxed">拒绝复杂的层级树和无底洞般的标签库。知识的结构应该如大脑的神经网络般扁平而互联，易于提取，利于生长。</p>
|
||||
</div>
|
||||
|
||||
<!-- Principle 03 -->
|
||||
<div class="border-t border-outline-variant py-10 flex flex-col md:flex-row gap-6 md:gap-12 items-start group">
|
||||
<div class="text-[80px] font-light leading-[0.8] text-tertiary-fixed-dim/40 group-hover:text-primary transition-colors duration-500">03</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-headline-md text-on-surface mb-3">真正的理解来自于高质量的输出</h3>
|
||||
<p class="font-body-base text-on-surface-variant">费曼技巧的数字化实践。只有当你能向 AI 清晰地复述一个概念，并经受住追问时，这个知识才真正属于你。</p>
|
||||
<div class="col-span-1 md:col-span-6 glass-panel rounded-2xl p-8 group hover:shadow-lg hover:-translate-y-1 transition-all duration-500">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<span class="text-[56px] font-extrabold leading-none bg-gradient-to-br from-primary to-secondary bg-clip-text text-transparent opacity-50 group-hover:opacity-100 transition-opacity duration-500">03</span>
|
||||
<div class="w-12 h-12 rounded-xl bg-primary-fixed/40 text-primary-container flex items-center justify-center ml-auto">
|
||||
<span class="material-symbols-outlined text-xl">record_voice_over</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="font-headline-md text-on-surface mb-3">真正的理解来自于高质量的输出</h3>
|
||||
<p class="font-body-base text-on-surface-variant leading-relaxed">费曼技巧的数字化实践。只有当你能向 AI 清晰地复述一个概念，并经受住追问时，这个知识才真正属于你。</p>
|
||||
</div>
|
||||
|
||||
<!-- Principle 04 -->
|
||||
<div class="border-t border-outline-variant py-10 flex flex-col md:flex-row gap-6 md:gap-12 items-start group">
|
||||
<div class="text-[80px] font-light leading-[0.8] text-tertiary-fixed-dim/40 group-hover:text-primary transition-colors duration-500">04</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-headline-md text-on-surface mb-3">反馈必须即时、精准且具有可操作性</h3>
|
||||
<p class="font-body-base text-on-surface-variant">模糊的赞美毫无意义。系统应指出逻辑断层，补充缺失的背景知识，并提供明确的下一步复习建议。</p>
|
||||
<!-- Principle 04 + 05 并排 -->
|
||||
<div class="col-span-1 md:col-span-6 glass-panel rounded-2xl p-8 group hover:shadow-lg hover:-translate-y-1 transition-all duration-500">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<span class="text-[56px] font-extrabold leading-none bg-gradient-to-br from-tertiary to-primary bg-clip-text text-transparent opacity-50 group-hover:opacity-100 transition-opacity duration-500">04</span>
|
||||
<div class="w-12 h-12 rounded-xl bg-primary-container/20 text-primary flex items-center justify-center ml-auto">
|
||||
<span class="material-symbols-outlined text-xl">analytics</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="font-headline-md text-on-surface mb-3">反馈必须即时、精准且具有可操作性</h3>
|
||||
<p class="font-body-base text-on-surface-variant leading-relaxed">模糊的赞美毫无意义。系统应指出逻辑断层，补充缺失的背景知识，并提供明确的下一步复习建议。</p>
|
||||
</div>
|
||||
|
||||
<!-- Principle 05 -->
|
||||
<div class="border-t border-outline-variant py-10 flex flex-col md:flex-row gap-6 md:gap-12 items-start group">
|
||||
<div class="text-[80px] font-light leading-[0.8] text-tertiary-fixed-dim/40 group-hover:text-primary transition-colors duration-500">05</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-headline-md text-on-surface mb-3">少一点万能承诺，多一点可验证进步</h3>
|
||||
<p class="font-body-base text-on-surface-variant">不承诺能帮你记住一切，但保证让你清楚自己真正掌握了什么。用数据可视化展现认知能力的客观提升。</p>
|
||||
<div class="col-span-1 md:col-span-6 glass-panel rounded-2xl p-8 group hover:shadow-lg hover:-translate-y-1 transition-all duration-500">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<span class="text-[56px] font-extrabold leading-none bg-gradient-to-br from-secondary to-primary bg-clip-text text-transparent opacity-50 group-hover:opacity-100 transition-opacity duration-500">05</span>
|
||||
<div class="w-12 h-12 rounded-xl bg-tertiary-container/20 text-tertiary flex items-center justify-center ml-auto">
|
||||
<span class="material-symbols-outlined text-xl">insights</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="font-headline-md text-on-surface mb-3">少一点万能承诺，多一点可验证进步</h3>
|
||||
<p class="font-body-base text-on-surface-variant leading-relaxed">不承诺能帮你记住一切，但保证让你清楚自己真正掌握了什么。用数据可视化展现认知能力的客观提升。</p>
|
||||
</div>
|
||||
<div class="border-t border-outline-variant"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@ -28,23 +28,23 @@ const lastUpdated = '2026 年 5 月';
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main style="max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; padding-bottom: 120px;">
|
||||
<main class="animate-page-enter" style="max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; padding-bottom: 120px;">
|
||||
<div style="display: flex; flex-direction: column; gap: 64px; position: relative;">
|
||||
|
||||
<!-- Mobile TOC (shown on mobile) -->
|
||||
<div style="display: none;" class="mobile-toc">
|
||||
<details style="background: #f1f3ff; border-radius: 12px; padding: 16px;">
|
||||
<summary style="font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: #1550d3; cursor: pointer;">目录导航</summary>
|
||||
<nav style="display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding-left: 16px; border-left: 2px solid #c3c5d7;">
|
||||
<a href="#section-1" style="font-family: 'Inter', sans-serif; font-size: 13px; color: #434654; text-decoration: none;">我们收集的信息</a>
|
||||
<a href="#section-2" style="font-family: 'Inter', sans-serif; font-size: 13px; color: #434654; text-decoration: none;">我们如何使用这些信息</a>
|
||||
<a href="#section-3" style="font-family: 'Inter', sans-serif; font-size: 13px; color: #434654; text-decoration: none;">AI 服务相关说明</a>
|
||||
<a href="#section-4" style="font-family: 'Inter', sans-serif; font-size: 13px; color: #434654; text-decoration: none;">我们如何保护数据</a>
|
||||
<a href="#section-5" style="font-family: 'Inter', sans-serif; font-size: 13px; color: #434654; text-decoration: none;">第三方服务</a>
|
||||
<a href="#section-6" style="font-family: 'Inter', sans-serif; font-size: 13px; color: #434654; text-decoration: none;">用户权利</a>
|
||||
<a href="#section-7" style="font-family: 'Inter', sans-serif; font-size: 13px; color: #434654; text-decoration: none;">儿童隐私</a>
|
||||
<a href="#section-8" style="font-family: 'Inter', sans-serif; font-size: 13px; color: #434654; text-decoration: none;">政策更新</a>
|
||||
<a href="#section-9" style="font-family: 'Inter', sans-serif; font-size: 13px; color: #434654; text-decoration: none;">联系我们</a>
|
||||
<nav style="display: flex; flex-direction: column; gap: 8px; margin-top: 16px;">
|
||||
<button data-target="section-1" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 8px 12px; border-radius: 8px; text-align: left; width: 100%;">我们收集的信息</button>
|
||||
<button data-target="section-2" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 8px 12px; border-radius: 8px; text-align: left; width: 100%;">我们如何使用这些信息</button>
|
||||
<button data-target="section-3" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 8px 12px; border-radius: 8px; text-align: left; width: 100%;">AI 服务相关说明</button>
|
||||
<button data-target="section-4" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 8px 12px; border-radius: 8px; text-align: left; width: 100%;">我们如何保护数据</button>
|
||||
<button data-target="section-5" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 8px 12px; border-radius: 8px; text-align: left; width: 100%;">第三方服务</button>
|
||||
<button data-target="section-6" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 8px 12px; border-radius: 8px; text-align: left; width: 100%;">用户权利</button>
|
||||
<button data-target="section-7" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 8px 12px; border-radius: 8px; text-align: left; width: 100%;">儿童隐私</button>
|
||||
<button data-target="section-8" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 8px 12px; border-radius: 8px; text-align: left; width: 100%;">政策更新</button>
|
||||
<button data-target="section-9" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 8px 12px; border-radius: 8px; text-align: left; width: 100%;">联系我们</button>
|
||||
</nav>
|
||||
</details>
|
||||
</div>
|
||||
@ -53,16 +53,17 @@ const lastUpdated = '2026 年 5 月';
|
||||
<!-- Sticky Sidebar (Table of Contents) - Desktop Only -->
|
||||
<aside style="width: 25%; display: none;" class="sidebar">
|
||||
<div style="position: sticky; top: 128px;">
|
||||
<nav style="display: flex; flex-direction: column; gap: 16px; padding-left: 24px; border-left: 2px solid #c3c5d7;">
|
||||
<a href="#section-1" class="toc-active active" style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #1550d3; text-decoration: none; transition: color 0.2s;">我们收集的信息</a>
|
||||
<a href="#section-2" style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-decoration: none; transition: color 0.2s;">我们如何使用这些信息</a>
|
||||
<a href="#section-3" style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-decoration: none; transition: color 0.2s;">AI 服务相关说明</a>
|
||||
<a href="#section-4" style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-decoration: none; transition: color 0.2s;">我们如何保护数据</a>
|
||||
<a href="#section-5" style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-decoration: none; transition: color 0.2s;">第三方服务</a>
|
||||
<a href="#section-6" style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-decoration: none; transition: color 0.2s;">用户权利</a>
|
||||
<a href="#section-7" style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-decoration: none; transition: color 0.2s;">儿童隐私</a>
|
||||
<a href="#section-8" style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-decoration: none; transition: color 0.2s;">政策更新</a>
|
||||
<a href="#section-9" style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-decoration: none; transition: color 0.2s;">联系我们</a>
|
||||
<div style="font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.08em; font-weight: 600; color: #737686; text-transform: uppercase; margin-bottom: 20px;">目录</div>
|
||||
<nav style="display: flex; flex-direction: column; gap: 1px;">
|
||||
<button data-target="section-1" class="toc-btn toc-active" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 10px 14px; border-radius: 8px; text-align: left; width: 100%; color: #1550d3; font-weight: 600;">我们收集的信息</button>
|
||||
<button data-target="section-2" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 10px 14px; border-radius: 8px; text-align: left; width: 100%; color: #737686; font-weight: 400;">我们如何使用这些信息</button>
|
||||
<button data-target="section-3" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 10px 14px; border-radius: 8px; text-align: left; width: 100%; color: #737686; font-weight: 400;">AI 服务相关说明</button>
|
||||
<button data-target="section-4" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 10px 14px; border-radius: 8px; text-align: left; width: 100%; color: #737686; font-weight: 400;">我们如何保护数据</button>
|
||||
<button data-target="section-5" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 10px 14px; border-radius: 8px; text-align: left; width: 100%; color: #737686; font-weight: 400;">第三方服务</button>
|
||||
<button data-target="section-6" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 10px 14px; border-radius: 8px; text-align: left; width: 100%; color: #737686; font-weight: 400;">用户权利</button>
|
||||
<button data-target="section-7" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 10px 14px; border-radius: 8px; text-align: left; width: 100%; color: #737686; font-weight: 400;">儿童隐私</button>
|
||||
<button data-target="section-8" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 10px 14px; border-radius: 8px; text-align: left; width: 100%; color: #737686; font-weight: 400;">政策更新</button>
|
||||
<button data-target="section-9" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 10px 14px; border-radius: 8px; text-align: left; width: 100%; color: #737686; font-weight: 400;">联系我们</button>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
@ -183,7 +184,7 @@ const lastUpdated = '2026 年 5 月';
|
||||
|
||||
<Footer />
|
||||
|
||||
<style>
|
||||
<style is:global>
|
||||
@media (min-width: 768px) {
|
||||
.sidebar {
|
||||
display: block !important;
|
||||
@ -212,90 +213,66 @@ const lastUpdated = '2026 年 5 月';
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toc-active {
|
||||
color: #1550d3 !important;
|
||||
.toc-btn {
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.sidebar nav a.active {
|
||||
color: #1550d3 !important;
|
||||
.toc-btn:hover {
|
||||
background: #f1f3ff;
|
||||
}
|
||||
|
||||
.sidebar nav a:not(.active):hover {
|
||||
color: #1550d3;
|
||||
}
|
||||
|
||||
.mobile-toc nav a.active {
|
||||
color: #1550d3 !important;
|
||||
.toc-btn.toc-active {
|
||||
background: #f1f3ff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script is:inline>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const sections = document.querySelectorAll('section[id^="section-"]');
|
||||
const navLinks = document.querySelectorAll('a[href^="#section-"]');
|
||||
let isClickScrolling = false;
|
||||
let clickTimeout = null;
|
||||
(function() {
|
||||
var sections = document.querySelectorAll('section[id^="section-"]');
|
||||
var allBtns = document.querySelectorAll('.toc-btn');
|
||||
var clickLock = false;
|
||||
|
||||
function setActiveLink(targetId) {
|
||||
navLinks.forEach(link => {
|
||||
link.classList.remove('active');
|
||||
function setActive(id) {
|
||||
allBtns.forEach(function(b) {
|
||||
b.style.color = '#737686';
|
||||
b.style.fontWeight = '400';
|
||||
b.classList.remove('toc-active');
|
||||
});
|
||||
|
||||
if (targetId) {
|
||||
const activeLink = document.querySelector(`a[href="#${targetId}"]`);
|
||||
if (activeLink) {
|
||||
activeLink.classList.add('active');
|
||||
}
|
||||
if (!id) return;
|
||||
var btn = document.querySelector('[data-target="' + id + '"]');
|
||||
if (btn) {
|
||||
btn.style.color = '#1550d3';
|
||||
btn.style.fontWeight = '600';
|
||||
btn.classList.add('toc-active');
|
||||
}
|
||||
}
|
||||
|
||||
function updateActiveNav() {
|
||||
if (isClickScrolling) {
|
||||
return;
|
||||
}
|
||||
|
||||
const scrollPos = window.scrollY + 150;
|
||||
let currentSection = '';
|
||||
|
||||
sections.forEach(section => {
|
||||
const sectionTop = section.offsetTop;
|
||||
const sectionHeight = section.offsetHeight;
|
||||
|
||||
if (scrollPos >= sectionTop && scrollPos < sectionTop + sectionHeight) {
|
||||
currentSection = section.getAttribute('id');
|
||||
}
|
||||
});
|
||||
|
||||
setActiveLink(currentSection);
|
||||
}
|
||||
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
const href = this.getAttribute('href');
|
||||
if (href && href.startsWith('#')) {
|
||||
const targetId = href.substring(1);
|
||||
|
||||
setActiveLink(targetId);
|
||||
|
||||
isClickScrolling = true;
|
||||
|
||||
if (clickTimeout) {
|
||||
clearTimeout(clickTimeout);
|
||||
}
|
||||
|
||||
clickTimeout = setTimeout(function() {
|
||||
isClickScrolling = false;
|
||||
updateActiveNav();
|
||||
}, 600);
|
||||
allBtns.forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
var target = this.getAttribute('data-target');
|
||||
setActive(target);
|
||||
var section = document.getElementById(target);
|
||||
if (section) {
|
||||
clickLock = true;
|
||||
section.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
setTimeout(function() { clickLock = false; }, 800);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('scroll', updateActiveNav);
|
||||
setTimeout(function() {
|
||||
setActiveLink('section-1');
|
||||
}, 100);
|
||||
});
|
||||
var observer = new IntersectionObserver(function(entries) {
|
||||
if (clickLock) return;
|
||||
var intersecting = entries.filter(function(e) { return e.isIntersecting; });
|
||||
if (intersecting.length > 0) {
|
||||
var best = intersecting.reduce(function(a, b) {
|
||||
return a.boundingClientRect.top < b.boundingClientRect.top ? a : b;
|
||||
});
|
||||
setActive(best.target.id);
|
||||
}
|
||||
}, { threshold: 0.2, rootMargin: '0px' });
|
||||
|
||||
sections.forEach(function(s) { observer.observe(s); });
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -43,23 +43,25 @@ const painPoints = [
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="pt-40 pb-32 px-6 md:px-12 relative overflow-hidden">
|
||||
<div class="max-w-5xl mx-auto text-center relative z-10">
|
||||
<h1 class="text-5xl md:text-7xl font-extrabold text-navy mb-6 max-w-4xl mx-auto leading-tight" style="font-family: var(--font-manrope); letter-spacing: -0.02em;">
|
||||
更懂你，<span class="text-tech-blue">更会学</span>
|
||||
</h1>
|
||||
<p class="text-lg md:text-xl text-slate-600 max-w-2xl mx-auto mb-10 leading-relaxed">
|
||||
AI 驱动的系统化学习助手，把知识库、主动回忆、AI 分析和复习计划结合起来，帮你从"看过"变成"真正学会"。
|
||||
</p>
|
||||
<section class="min-h-screen flex flex-col items-center justify-start relative px-6 md:px-12 pt-32 pb-24 max-w-7xl mx-auto text-center overflow-visible">
|
||||
<div class="ethereal-glow bg-blue-400/20 w-[600px] h-[600px] top-[-100px] left-1/2 -translate-x-1/2 animate-breathe absolute"></div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-20">
|
||||
<a href="/waitlist" class="w-full sm:w-auto text-white font-medium px-8 py-4 rounded-full hover:shadow-xl transition-all duration-300 hover:-translate-y-1 btn-primary-gradient">
|
||||
加入等待名单
|
||||
</a>
|
||||
<a href="/philosophy" class="w-full sm:w-auto bg-white/50 backdrop-blur-md text-navy font-medium px-8 py-4 rounded-full border border-slate-200 hover:bg-white/80 transition-all duration-300">
|
||||
了解产品理念
|
||||
</a>
|
||||
</div>
|
||||
<h1 class="font-bold text-6xl md:text-8xl text-navy mb-6 max-w-5xl relative z-10 tracking-tight animate-fade-in-up" style="font-family: var(--font-manrope); letter-spacing: -0.04em;">
|
||||
更懂你，<span class="text-tech-blue">更会学</span>
|
||||
</h1>
|
||||
|
||||
<p class="text-lg md:text-xl text-slate-600 max-w-2xl mb-12 relative z-10 animate-fade-in-up" style="animation-delay: 0.2s;">
|
||||
AI 驱动的系统化学习助手，把知识库、主动回忆、AI 分析和复习计划结合起来，帮你从"看过"变成"真正学会"。
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-6 mb-24 relative z-10 animate-fade-in-up" style="animation-delay: 0.3s;">
|
||||
<a href="/waitlist" class="text-white font-medium px-10 py-5 rounded-full shadow-2xl shadow-blue-500/30 hover:shadow-blue-500/50 transition-all hover:-translate-y-1 text-sm btn-primary-gradient">
|
||||
加入等待名单
|
||||
</a>
|
||||
<a href="/philosophy" class="bg-white/80 backdrop-blur-sm text-navy font-medium px-10 py-5 rounded-full hover:bg-white transition-all border border-slate-200 shadow-lg hover:shadow-xl hover:-translate-y-1 text-sm">
|
||||
了解产品理念
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="relative max-w-5xl mx-auto">
|
||||
<div class="absolute inset-0 bg-tech-blue/10 blur-[100px] rounded-full"></div>
|
||||
@ -72,8 +74,8 @@ const painPoints = [
|
||||
|
||||
<!-- 弹幕滚动效果 -->
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<!-- 第一层弹幕 - 从右向左 -->
|
||||
<div class="absolute glass-card-premium rounded-xl shadow-xl animate-scroll-right flex items-center gap-3" style="top: 12%; right: 0; padding: 12px 16px; animation-duration: 12s;">
|
||||
<!-- 从右向左 -->
|
||||
<div class="absolute glass-card-premium rounded-xl shadow-xl animate-danmaku-rtl flex items-center gap-3" style="top: 12%; left: 0; padding: 12px 16px; animation-delay: 0s;">
|
||||
<div class="w-9 h-9 rounded-full bg-blue-100 text-tech-blue flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined text-sm">calendar_today</span>
|
||||
</div>
|
||||
@ -83,7 +85,7 @@ const painPoints = [
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute glass-card-premium rounded-xl shadow-xl animate-scroll-right flex items-center gap-3" style="top: 35%; right: 0; padding: 12px 16px; animation-duration: 14s;">
|
||||
<div class="absolute glass-card-premium rounded-xl shadow-xl animate-danmaku-rtl flex items-center gap-3" style="top: 35%; left: 0; padding: 12px 16px; animation-delay: 5s;">
|
||||
<div class="w-9 h-9 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined text-sm">analytics</span>
|
||||
</div>
|
||||
@ -93,7 +95,7 @@ const painPoints = [
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute glass-card-premium rounded-lg shadow-xl animate-scroll-right flex items-center gap-2" style="top: 58%; right: 0; padding: 10px 14px; animation-duration: 11s;">
|
||||
<div class="absolute glass-card-premium rounded-lg shadow-xl animate-danmaku-rtl flex items-center gap-2" style="top: 58%; left: 0; padding: 10px 14px; animation-delay: 10s;">
|
||||
<div class="w-7 h-7 rounded-full bg-green-100 text-green-600 flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined text-xs">check_circle</span>
|
||||
</div>
|
||||
@ -102,8 +104,8 @@ const painPoints = [
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二层弹幕 - 从左向右 -->
|
||||
<div class="absolute glass-card-premium rounded-xl shadow-xl animate-scroll-left flex items-center gap-3" style="top: 22%; left: 0; padding: 12px 16px; animation-duration: 13s;">
|
||||
<!-- 从左向右 -->
|
||||
<div class="absolute glass-card-premium rounded-xl shadow-xl animate-danmaku-ltr flex items-center gap-3" style="top: 22%; left: 0; padding: 12px 16px; animation-delay: 2s;">
|
||||
<div class="w-9 h-9 rounded-full bg-pink-100 text-pink-600 flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined text-sm">trending_up</span>
|
||||
</div>
|
||||
@ -113,7 +115,7 @@ const painPoints = [
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute glass-card-premium rounded-lg shadow-xl animate-scroll-left flex items-center gap-2" style="top: 48%; left: 0; padding: 10px 14px; animation-duration: 10s;">
|
||||
<div class="absolute glass-card-premium rounded-lg shadow-xl animate-danmaku-ltr flex items-center gap-2" style="top: 48%; left: 0; padding: 10px 14px; animation-delay: 7s;">
|
||||
<div class="w-7 h-7 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined text-xs">school</span>
|
||||
</div>
|
||||
@ -128,7 +130,7 @@ const painPoints = [
|
||||
</section>
|
||||
|
||||
<!-- Pain Points Section -->
|
||||
<section class="py-32 px-6 md:px-12 bg-gradient-to-br from-slate-50 to-blue-50">
|
||||
<section class="pt-32 pb-24 px-6 md:px-12 bg-gradient-to-br from-slate-50 to-blue-50 animate-reveal-up">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-navy mb-4" style="font-family: var(--font-manrope); letter-spacing: -0.01em;">
|
||||
|
||||
@ -18,60 +18,56 @@ import Footer from '../components/Footer.astro';
|
||||
|
||||
<Header />
|
||||
|
||||
<!-- Blueprint Pattern Overlay -->
|
||||
<div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at center, #cbd5e1 1px, transparent 1px); background-size: 24px 24px; opacity: 0.3; pointer-events: none; z-index: -1;"></div>
|
||||
<div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at center, #d2daf1 1px, transparent 1px); background-size: 24px 24px; opacity: 0.25; pointer-events: none; z-index: -1;"></div>
|
||||
|
||||
<!-- Main Content Canvas -->
|
||||
<main style="flex: 1; padding-top: 140px; padding-bottom: 120px; padding-left: 24px; padding-right: 24px;">
|
||||
<main class="animate-page-enter" style="flex: 1; padding-top: 140px; padding-bottom: 0; padding-left: 24px; padding-right: 24px;">
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section style="max-width: 1200px; margin: 0 auto 120px; text-align: center; position: relative;">
|
||||
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, #f1f3ff, transparent); opacity: 0.5; border-radius: 3rem; z-index: -1; transform: translateY(-48px);"></div>
|
||||
<h1 style="font-family: 'Manrope', sans-serif; font-size: 64px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; color: #131b2c; margin-bottom: 24px;">反馈与支持</h1>
|
||||
<p style="font-family: 'Manrope', sans-serif; font-size: 18px; line-height: 1.6; font-weight: 400; color: #434654; max-width: 42rem; margin: 0 auto 64px;">
|
||||
<section style="max-width: 1200px; margin: 0 auto 80px; text-align: center;">
|
||||
<h1 style="font-family: 'Manrope', sans-serif; font-size: 56px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; color: #131b2c; margin-bottom: 20px;">反馈与支持</h1>
|
||||
<p style="font-family: 'Manrope', sans-serif; font-size: 18px; line-height: 1.7; font-weight: 400; color: #434654; max-width: 36rem; margin: 0 auto;">
|
||||
如果你在使用知习 AI 的过程中遇到问题，或者对产品有任何想法，欢迎告诉我们。每一条真实反馈，都会帮助产品变得更好。
|
||||
</p>
|
||||
<div style="position: relative; width: 100%; max-width: 32rem; margin: 0 auto; aspect-ratio: 1; margin-bottom: 48px;">
|
||||
<img alt="A soft, ethereal 3D rendering of a translucent message bubble floating in a bright, minimalist studio environment."
|
||||
style="width: 100%; height: 100%; object-fit: cover; border-radius: 2rem; box-shadow: 0 20px 60px rgba(18, 26, 43, 0.08);"
|
||||
src="https://lh3.googleusercontent.com/aida/ADBb0uiz5ALBcopzHW6YiPJIDzON9d-GOLgDERcajQ5kK6yovNdiJMCmpuZuNlk2C-YswHpOGuS9QyUcXlhEDMo3ciIB-XsCDSeZR93nLEqTGzbBvsjg2oWn5KcH_pkkNe3q_XmhPLokaIzjt-5jnueWgsaYphhUsTmsce36ow9bTQwh3MksP4gKzioKsM5ZrIXXTjFpkDBH1JyvdKZ7hXd7gLYcZEHfCA2wy1QkKFIHnUJzZswW2oTYXSoRlSz65APtSrlIErBY7T9Kqg"/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Form & Contact Layout -->
|
||||
<section style="max-width: 1000px; margin: 0 auto 120px; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start;" class="contact-grid">
|
||||
<!-- Form & Contact Sidebar -->
|
||||
<section style="max-width: 1000px; margin: 0 auto 120px; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start;" class="contact-grid">
|
||||
|
||||
<!-- Feedback Form -->
|
||||
<div style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 1.5rem; padding: 32px; box-shadow: 0 20px 40px rgba(18, 26, 43, 0.04);" class="glass-card">
|
||||
<form style="display: flex; flex-direction: column; gap: 32px;">
|
||||
<div style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 1.5rem; padding: 40px; box-shadow: 0 20px 40px rgba(18, 26, 43, 0.04);" class="glass-card">
|
||||
|
||||
<!-- Name & Email Row -->
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;" class="form-row">
|
||||
<!-- Name -->
|
||||
<div>
|
||||
<label style="display: block; font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; margin-bottom: 8px;" for="name">
|
||||
你的称呼 <span style="color: #595c60; font-weight: 400;">(可选)</span>
|
||||
</label>
|
||||
<input style="width: 100%; background-color: #ffffff; border: 1px solid #c3c5d7; border-radius: 8px; padding: 12px 16px; font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: #131b2c; transition: all 0.2s; outline: none;"
|
||||
id="name" placeholder="例如: 张三" type="text"/>
|
||||
<!-- Section: Basic Info -->
|
||||
<div style="margin-bottom: 36px;">
|
||||
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
|
||||
<div style="width: 32px; height: 32px; border-radius: 10px; background: #f1f3ff; color: #1550d3; display: flex; align-items: center; justify-content: center;">
|
||||
<span class="material-symbols-outlined" style="font-size: 18px;">person</span>
|
||||
</div>
|
||||
<!-- Email -->
|
||||
<span style="font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 700; color: #131b2c;">基本信息</span>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;" class="form-row">
|
||||
<div>
|
||||
<label style="display: block; font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; margin-bottom: 8px;" for="email">
|
||||
电子邮箱 <span style="color: #ba1a1a;">*</span>
|
||||
</label>
|
||||
<input style="width: 100%; background-color: #ffffff; border: 1px solid #c3c5d7; border-radius: 8px; padding: 12px 16px; font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: #131b2c; transition: all 0.2s; outline: none;"
|
||||
id="email" placeholder="your@email.com" required type="email"/>
|
||||
<label class="form-label" for="name">你的称呼 <span style="color: #737686; font-weight: 400;">(可选)</span></label>
|
||||
<input class="form-input" id="name" placeholder="例如: 张三" type="text"/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="email">电子邮箱 <span style="color: #ba1a1a;">*</span></label>
|
||||
<input class="form-input" id="email" placeholder="your@email.com" required type="email"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Type -->
|
||||
<div>
|
||||
<label style="display: block; font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; margin-bottom: 8px;" for="type">
|
||||
反馈类型 <span style="color: #ba1a1a;">*</span>
|
||||
</label>
|
||||
<select style="width: 100%; background-color: #ffffff; border: 1px solid #c3c5d7; border-radius: 8px; padding: 12px 16px; font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: #131b2c; transition: all 0.2s; outline: none; appearance: none;"
|
||||
id="type" required>
|
||||
<!-- Section: Feedback Content -->
|
||||
<div style="margin-bottom: 36px;">
|
||||
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
|
||||
<div style="width: 32px; height: 32px; border-radius: 10px; background: #f1f3ff; color: #1550d3; display: flex; align-items: center; justify-content: center;">
|
||||
<span class="material-symbols-outlined" style="font-size: 18px;">edit</span>
|
||||
</div>
|
||||
<span style="font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 700; color: #131b2c;">反馈内容</span>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 20px;">
|
||||
<label class="form-label" for="type">反馈类型 <span style="color: #ba1a1a;">*</span></label>
|
||||
<select class="form-input" id="type" required>
|
||||
<option disabled selected value="">请选择反馈类型</option>
|
||||
<option value="功能建议">功能建议</option>
|
||||
<option value="问题反馈">问题反馈</option>
|
||||
@ -81,131 +77,136 @@ import Footer from '../components/Footer.astro';
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Message -->
|
||||
<div>
|
||||
<label style="display: block; font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; margin-bottom: 8px;" for="message">
|
||||
反馈内容 <span style="color: #ba1a1a;">*</span>
|
||||
</label>
|
||||
<textarea style="width: 100%; background-color: #ffffff; border: 1px solid #c3c5d7; border-radius: 8px; padding: 12px 16px; font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: #131b2c; transition: all 0.2s; outline: none; resize: vertical;"
|
||||
id="message" placeholder="详细描述你遇到的问题或建议..." required rows="5"></textarea>
|
||||
<label class="form-label" for="message">详细描述 <span style="color: #ba1a1a;">*</span></label>
|
||||
<textarea class="form-input" id="message" placeholder="详细描述你遇到的问题或建议..." required rows="6" style="resize: vertical; min-height: 140px;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Device -->
|
||||
<div>
|
||||
<label style="display: block; font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; margin-bottom: 12px;">
|
||||
使用设备
|
||||
</label>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 12px;">
|
||||
<label style="cursor: pointer;">
|
||||
<input class="peer sr-only" name="device" type="radio" value="iPhone"/>
|
||||
<div style="padding: 10px 20px; border-radius: 9999px; border: 1px solid #c3c5d7; color: #434654; font-family: 'Manrope', sans-serif; font-size: 14px; transition: all 0.2s;">iPhone</div>
|
||||
</label>
|
||||
<label style="cursor: pointer;">
|
||||
<input class="peer sr-only" name="device" type="radio" value="iPad"/>
|
||||
<div style="padding: 10px 20px; border-radius: 9999px; border: 1px solid #c3c5d7; color: #434654; font-family: 'Manrope', sans-serif; font-size: 14px; transition: all 0.2s;">iPad</div>
|
||||
</label>
|
||||
<label style="cursor: pointer;">
|
||||
<input class="peer sr-only" name="device" type="radio" value="Mac"/>
|
||||
<div style="padding: 10px 20px; border-radius: 9999px; border: 1px solid #c3c5d7; color: #434654; font-family: 'Manrope', sans-serif; font-size: 14px; transition: all 0.2s;">Mac</div>
|
||||
</label>
|
||||
<label style="cursor: pointer;">
|
||||
<input class="peer sr-only" name="device" type="radio" value="Web"/>
|
||||
<div style="padding: 10px 20px; border-radius: 9999px; border: 1px solid #c3c5d7; color: #434654; font-family: 'Manrope', sans-serif; font-size: 14px; transition: all 0.2s;">Web</div>
|
||||
</label>
|
||||
<label style="cursor: pointer;">
|
||||
<input class="peer sr-only" name="device" type="radio" value="其他"/>
|
||||
<div style="padding: 10px 20px; border-radius: 9999px; border: 1px solid #c3c5d7; color: #434654; font-family: 'Manrope', sans-serif; font-size: 14px; transition: all 0.2s;">其他</div>
|
||||
</label>
|
||||
<!-- Section: Device -->
|
||||
<div style="margin-bottom: 36px;">
|
||||
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
|
||||
<div style="width: 32px; height: 32px; border-radius: 10px; background: #f1f3ff; color: #1550d3; display: flex; align-items: center; justify-content: center;">
|
||||
<span class="material-symbols-outlined" style="font-size: 18px;">devices</span>
|
||||
</div>
|
||||
<span style="font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 700; color: #131b2c;">使用设备</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 10px;">
|
||||
<label class="device-pill">
|
||||
<input type="radio" name="device" value="iPhone" class="sr-only"/>
|
||||
<span>iPhone</span>
|
||||
</label>
|
||||
<label class="device-pill">
|
||||
<input type="radio" name="device" value="iPad" class="sr-only"/>
|
||||
<span>iPad</span>
|
||||
</label>
|
||||
<label class="device-pill">
|
||||
<input type="radio" name="device" value="Mac" class="sr-only"/>
|
||||
<span>Mac</span>
|
||||
</label>
|
||||
<label class="device-pill">
|
||||
<input type="radio" name="device" value="Web" class="sr-only"/>
|
||||
<span>Web</span>
|
||||
</label>
|
||||
<label class="device-pill">
|
||||
<input type="radio" name="device" value="其他" class="sr-only"/>
|
||||
<span>其他</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit -->
|
||||
<div style="padding-top: 16px;">
|
||||
<button style="width: 100%; background: linear-gradient(to right, #1550d3, #583dde); color: #ffffff; font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; padding: 16px; border-radius: 12px; transition: all 0.3s; box-shadow: 0 10px 20px rgba(21, 80, 211, 0.2); cursor: pointer; border: none;" type="submit">
|
||||
提交反馈
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<!-- Submit -->
|
||||
<button class="submit-btn" type="submit">
|
||||
<span>提交反馈</span>
|
||||
<span class="material-symbols-outlined" style="font-size: 18px;">send</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Contact Info -->
|
||||
<div style="display: flex; flex-direction: column; gap: 24px;">
|
||||
<div style="background-color: #ffffff; border-radius: 1.5rem; padding: 32px; box-shadow: 0 20px 40px rgba(18, 26, 43, 0.04); border: 1px solid rgba(195, 197, 215, 0.3);">
|
||||
<h3 style="font-family: 'Manrope', sans-serif; font-size: 28px; line-height: 1.3; font-weight: 600; color: #131b2c; margin-bottom: 24px;">其他联系方式</h3>
|
||||
<ul style="display: flex; flex-direction: column; gap: 24px; list-style: none; padding: 0; margin: 0;">
|
||||
<li style="display: flex; align-items: flex-start; gap: 16px;">
|
||||
<span style="font-family: 'Material Symbols Outlined'; color: #1550d3; margin-top: 4px;">mail</span>
|
||||
<div>
|
||||
<p style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-transform: uppercase; margin-bottom: 4px;">邮箱</p>
|
||||
<a style="font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: #131b2c; text-decoration: none; transition: color 0.2s;" href="mailto:support@zhixiai.com">support@zhixiai.com</a>
|
||||
<!-- Contact Info Sidebar -->
|
||||
<div style="display: flex; flex-direction: column; gap: 20px;">
|
||||
<div style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 1.5rem; padding: 32px; box-shadow: 0 20px 40px rgba(18, 26, 43, 0.04);">
|
||||
<h3 style="font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 700; color: #131b2c; margin-bottom: 28px;">其他联系方式</h3>
|
||||
<div style="display: flex; flex-direction: column; gap: 24px;">
|
||||
<a href="mailto:support@zhixiai.com" class="contact-item" style="display: flex; align-items: flex-start; gap: 14px; text-decoration: none; padding: 12px; border-radius: 12px; transition: background 0.2s;">
|
||||
<div style="width: 40px; height: 40px; border-radius: 12px; background: #f1f3ff; color: #1550d3; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<span class="material-symbols-outlined" style="font-size: 20px;">mail</span>
|
||||
</div>
|
||||
</li>
|
||||
<li style="display: flex; align-items: flex-start; gap: 16px;">
|
||||
<span style="font-family: 'Material Symbols Outlined'; color: #1550d3; margin-top: 4px;">language</span>
|
||||
<div>
|
||||
<p style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-transform: uppercase; margin-bottom: 4px;">官网</p>
|
||||
<a style="font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: #131b2c; text-decoration: none; transition: color 0.2s;" href="https://zhixiai.com" target="_blank">zhixiai.com</a>
|
||||
<p style="font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: #737686; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px;">邮箱</p>
|
||||
<p style="font-family: 'Manrope', sans-serif; font-size: 15px; color: #131b2c; font-weight: 500;">support@zhixiai.com</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://zhixiai.com" target="_blank" class="contact-item" style="display: flex; align-items: flex-start; gap: 14px; text-decoration: none; padding: 12px; border-radius: 12px; transition: background 0.2s;">
|
||||
<div style="width: 40px; height: 40px; border-radius: 12px; background: #f1f3ff; color: #1550d3; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<span class="material-symbols-outlined" style="font-size: 20px;">language</span>
|
||||
</div>
|
||||
</li>
|
||||
<li style="display: flex; align-items: flex-start; gap: 16px;">
|
||||
<span style="font-family: 'Material Symbols Outlined'; color: #1550d3; margin-top: 4px;">update</span>
|
||||
<div>
|
||||
<p style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-transform: uppercase; margin-bottom: 4px;">更新记录</p>
|
||||
<a style="font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: #131b2c; text-decoration: none; transition: color 0.2s;" href="/changelog">查看日志 →</a>
|
||||
<p style="font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: #737686; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px;">官网</p>
|
||||
<p style="font-family: 'Manrope', sans-serif; font-size: 15px; color: #131b2c; font-weight: 500;">zhixiai.com</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</a>
|
||||
<a href="/changelog" class="contact-item" style="display: flex; align-items: flex-start; gap: 14px; text-decoration: none; padding: 12px; border-radius: 12px; transition: background 0.2s;">
|
||||
<div style="width: 40px; height: 40px; border-radius: 12px; background: #f1f3ff; color: #1550d3; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<span class="material-symbols-outlined" style="font-size: 20px;">update</span>
|
||||
</div>
|
||||
<div>
|
||||
<p style="font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: #737686; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px;">更新记录</p>
|
||||
<p style="font-family: 'Manrope', sans-serif; font-size: 15px; color: #131b2c; font-weight: 500;">查看日志 →</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Note -->
|
||||
<div style="background: linear-gradient(135deg, #f1f3ff, #e9edff); border-radius: 1rem; padding: 20px 24px;">
|
||||
<div style="display: flex; gap: 10px; align-items: flex-start;">
|
||||
<span class="material-symbols-outlined" style="color: #1550d3; font-size: 20px; margin-top: 2px;">schedule</span>
|
||||
<p style="font-family: 'Manrope', sans-serif; font-size: 13px; line-height: 1.6; color: #434654;">
|
||||
我们通常会在 <strong style="color: #131b2c;">24 小时内</strong>回复你的反馈。请确保邮箱填写正确。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section style="max-width: 48rem; margin: 0 auto;">
|
||||
<h2 style="font-family: 'Manrope', sans-serif; font-size: 40px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; color: #131b2c; text-align: center; margin-bottom: 48px;">常见问题</h2>
|
||||
<div style="display: flex; flex-direction: column; gap: 16px;">
|
||||
<section style="max-width: 1000px; margin: 0 auto 120px;">
|
||||
<div style="text-align: center; margin-bottom: 48px;">
|
||||
<h2 style="font-family: 'Manrope', sans-serif; font-size: 36px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; color: #131b2c; margin-bottom: 12px;">常见问题</h2>
|
||||
<p style="font-family: 'Manrope', sans-serif; font-size: 16px; color: #737686;">也许你想要的答案就在这里</p>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;" class="faq-grid">
|
||||
|
||||
<!-- FAQ Item 1 -->
|
||||
<details style="background-color: #ffffff; border-radius: 12px; border: 1px solid rgba(195, 197, 215, 0.5); overflow: hidden; cursor: pointer; box-shadow: 0 2px 8px rgba(18, 26, 43, 0.04); transition: box-shadow 0.2s;">
|
||||
<summary style="display: flex; align-items: center; justify-content: space-between; padding: 24px; font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 600; color: #131b2c; list-style: none;">
|
||||
<details class="faq-item">
|
||||
<summary>
|
||||
知习 AI 现在可以使用了吗?
|
||||
<span style="font-family: 'Material Symbols Outlined'; color: #434654; transition: transform 0.3s;">expand_more</span>
|
||||
<span class="material-symbols-outlined faq-arrow">expand_more</span>
|
||||
</summary>
|
||||
<div style="padding: 0 24px 24px; font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: #434654;">
|
||||
产品还在早期版本开发中，官网会持续更新进展。
|
||||
</div>
|
||||
<div class="faq-answer">产品还在早期版本开发中，官网会持续更新进展。</div>
|
||||
</details>
|
||||
|
||||
<!-- FAQ Item 2 -->
|
||||
<details style="background-color: #ffffff; border-radius: 12px; border: 1px solid rgba(195, 197, 215, 0.5); overflow: hidden; cursor: pointer; box-shadow: 0 2px 8px rgba(18, 26, 43, 0.04); transition: box-shadow 0.2s;">
|
||||
<summary style="display: flex; align-items: center; justify-content: space-between; padding: 24px; font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 600; color: #131b2c; list-style: none;">
|
||||
<details class="faq-item">
|
||||
<summary>
|
||||
知习 AI 支持哪些平台?
|
||||
<span style="font-family: 'Material Symbols Outlined'; color: #434654; transition: transform 0.3s;">expand_more</span>
|
||||
<span class="material-symbols-outlined faq-arrow">expand_more</span>
|
||||
</summary>
|
||||
<div style="padding: 0 24px 24px; font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: #434654;">
|
||||
第一阶段优先支持 iPhone，后续再考虑 iPad、Mac 和其他平台。
|
||||
</div>
|
||||
<div class="faq-answer">第一阶段优先支持 iPhone，后续再考虑 iPad、Mac 和其他平台。</div>
|
||||
</details>
|
||||
|
||||
<!-- FAQ Item 3 -->
|
||||
<details style="background-color: #ffffff; border-radius: 12px; border: 1px solid rgba(195, 197, 215, 0.5); overflow: hidden; cursor: pointer; box-shadow: 0 2px 8px rgba(18, 26, 43, 0.04); transition: box-shadow 0.2s;">
|
||||
<summary style="display: flex; align-items: center; justify-content: space-between; padding: 24px; font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 600; color: #131b2c; list-style: none;">
|
||||
<details class="faq-item">
|
||||
<summary>
|
||||
知习 AI 会保存我的学习内容吗?
|
||||
<span style="font-family: 'Material Symbols Outlined'; color: #434654; transition: transform 0.3s;">expand_more</span>
|
||||
<span class="material-symbols-outlined faq-arrow">expand_more</span>
|
||||
</summary>
|
||||
<div style="padding: 0 24px 24px; font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: #434654;">
|
||||
为了提供学习记录和 AI 分析，产品可能会保存必要的学习数据，具体请查看隐私政策。
|
||||
</div>
|
||||
<div class="faq-answer">为了提供学习记录和 AI 分析，产品可能会保存必要的学习数据，具体请查看隐私政策。</div>
|
||||
</details>
|
||||
|
||||
<!-- FAQ Item 4 -->
|
||||
<details style="background-color: #ffffff; border-radius: 12px; border: 1px solid rgba(195, 197, 215, 0.5); overflow: hidden; cursor: pointer; box-shadow: 0 2px 8px rgba(18, 26, 43, 0.04); transition: box-shadow 0.2s;">
|
||||
<summary style="display: flex; align-items: center; justify-content: space-between; padding: 24px; font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 600; color: #131b2c; list-style: none;">
|
||||
<details class="faq-item">
|
||||
<summary>
|
||||
如何删除我的数据?
|
||||
<span style="font-family: 'Material Symbols Outlined'; color: #434654; transition: transform 0.3s;">expand_more</span>
|
||||
<span class="material-symbols-outlined faq-arrow">expand_more</span>
|
||||
</summary>
|
||||
<div style="padding: 0 24px 24px; font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: #434654;">
|
||||
你可以通过本页面联系我们，我们会根据请求处理相关数据。
|
||||
</div>
|
||||
<div class="faq-answer">你可以通过本页面联系我们，我们会根据请求处理相关数据。</div>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
@ -214,21 +215,169 @@ import Footer from '../components/Footer.astro';
|
||||
|
||||
<Footer />
|
||||
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-family: 'Material Symbols Outlined', sans-serif;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
<style is:global>
|
||||
.form-label {
|
||||
display: block;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 600;
|
||||
color: #434654;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border: 1.5px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
padding: 13px 16px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
color: #131b2c;
|
||||
transition: all 0.2s;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: #b0b8c4;
|
||||
}
|
||||
|
||||
.form-input:hover {
|
||||
border-color: #c3c5d7;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: #1550d3;
|
||||
box-shadow: 0 0 0 3px rgba(21, 80, 211, 0.1);
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.device-pill {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.device-pill span {
|
||||
display: block;
|
||||
padding: 10px 22px;
|
||||
border-radius: 9999px;
|
||||
border: 1.5px solid #e2e8f0;
|
||||
color: #434654;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.device-pill:hover span {
|
||||
border-color: #b5c4ff;
|
||||
background: #f8f9ff;
|
||||
}
|
||||
|
||||
.device-pill input:checked + span {
|
||||
background: #1550d3;
|
||||
border-color: #1550d3;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, #1550d3, #583dde);
|
||||
color: #ffffff;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.03em;
|
||||
font-weight: 600;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 8px 24px rgba(21, 80, 211, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 12px 32px rgba(21, 80, 211, 0.3);
|
||||
}
|
||||
|
||||
.contact-item:hover {
|
||||
background: #f8f9ff;
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
background-color: #ffffff;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(195, 197, 215, 0.5);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.faq-item:hover {
|
||||
box-shadow: 0 6px 20px rgba(18, 26, 43, 0.06);
|
||||
border-color: #b5c4ff;
|
||||
}
|
||||
|
||||
.faq-item summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 24px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #131b2c;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.faq-item summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.faq-arrow {
|
||||
color: #737686;
|
||||
font-size: 20px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.faq-item[open] .faq-arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.faq-item[open] {
|
||||
border-color: #b5c4ff;
|
||||
box-shadow: 0 6px 20px rgba(18, 26, 43, 0.06);
|
||||
}
|
||||
|
||||
.faq-item[open] summary {
|
||||
color: #1550d3;
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
padding: 0 24px 20px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
color: #434654;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
@ -241,35 +390,15 @@ import Footer from '../components/Footer.astro';
|
||||
.form-row {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
.footer-inner {
|
||||
text-align: center;
|
||||
.faq-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
}
|
||||
|
||||
details[open] summary span {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
details:hover {
|
||||
box-shadow: 0 8px 16px rgba(18, 26, 43, 0.08);
|
||||
}
|
||||
|
||||
details summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: #4F7CFF !important;
|
||||
}
|
||||
|
||||
input:focus, select:focus, textarea:focus {
|
||||
border-color: #1550d3;
|
||||
box-shadow: 0 0 0 2px rgba(21, 80, 211, 0.2);
|
||||
}
|
||||
|
||||
input:hover, select:hover, textarea:hover {
|
||||
border-color: #737686;
|
||||
@media (min-width: 769px) {
|
||||
.faq-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
||||
@ -12,7 +12,7 @@ const lastUpdated = '2024年5月4日';
|
||||
description="龙德AI学习的用户协议，明确用户与服务商之间的权利与义务。"
|
||||
>
|
||||
<Header />
|
||||
<main>
|
||||
<main class="animate-page-enter">
|
||||
<Hero
|
||||
title="用户协议"
|
||||
subtitle={`最后更新：${lastUpdated}`}
|
||||
|
||||
@ -11,7 +11,7 @@ import WaitlistForm from '../components/WaitlistForm.astro';
|
||||
description="加入龙德AI学习等待名单抢先体验，获取最新产品资讯和内测资格。"
|
||||
>
|
||||
<Header />
|
||||
<main>
|
||||
<main class="animate-page-enter">
|
||||
<Hero
|
||||
title="加入等待名单"
|
||||
subtitle="留下你的信息，我们会第一时间通知你"
|
||||
|
||||
@ -81,18 +81,18 @@
|
||||
50% { transform: translate(10px, -10px) scale(1.05); }
|
||||
}
|
||||
|
||||
@keyframes scroll-right-to-left {
|
||||
0% { transform: translateX(200%); opacity: 0; }
|
||||
@keyframes danmaku-rtl {
|
||||
0% { transform: translateX(110vw); opacity: 0; }
|
||||
3% { opacity: 1; }
|
||||
97% { opacity: 1; }
|
||||
100% { transform: translateX(-200%); opacity: 0; }
|
||||
90% { opacity: 1; }
|
||||
100% { transform: translateX(-100%); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes scroll-left-to-right {
|
||||
0% { transform: translateX(-200%); opacity: 0; }
|
||||
@keyframes danmaku-ltr {
|
||||
0% { transform: translateX(-100%); opacity: 0; }
|
||||
3% { opacity: 1; }
|
||||
97% { opacity: 1; }
|
||||
100% { transform: translateX(200%); opacity: 0; }
|
||||
90% { opacity: 1; }
|
||||
100% { transform: translateX(110vw); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes breathe {
|
||||
@ -101,10 +101,25 @@
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
0% { opacity: 0; transform: translateY(40px); }
|
||||
0% { opacity: 0; transform: translateY(24px); }
|
||||
100% { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes revealUp {
|
||||
0% { opacity: 0; transform: translateY(20px); }
|
||||
100% { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes pageEnter {
|
||||
0% { opacity: 0; transform: translateY(12px); }
|
||||
100% { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes blurIn {
|
||||
0% { opacity: 0; filter: blur(8px); transform: scale(0.98); }
|
||||
100% { opacity: 1; filter: blur(0); transform: scale(1); }
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.glass-card-premium {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
@ -146,12 +161,12 @@
|
||||
animation: float-fast 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-scroll-right {
|
||||
animation: scroll-right-to-left 15s linear infinite;
|
||||
.animate-danmaku-rtl {
|
||||
animation: danmaku-rtl 15s linear infinite backwards;
|
||||
}
|
||||
|
||||
.animate-scroll-left {
|
||||
animation: scroll-left-to-right 12s linear infinite;
|
||||
.animate-danmaku-ltr {
|
||||
animation: danmaku-ltr 15s linear infinite backwards;
|
||||
}
|
||||
|
||||
.animate-breathe {
|
||||
@ -159,7 +174,23 @@
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp 1s ease-out forwards;
|
||||
animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
.animate-reveal-up {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animate-reveal-up.revealed {
|
||||
animation: revealUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
.animate-page-enter {
|
||||
animation: pageEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
.animate-blur-in {
|
||||
animation: blurIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
}
|
||||
|
||||
@ -203,6 +234,14 @@ body {
|
||||
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
|
||||
.ethereal-glow {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(120px);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.font-display-xl {
|
||||
font-family: var(--font-family-headline);
|
||||
font-size: 64px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user