wangdl/web-projects
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Phase 1-3 UI/UX audit fixes
All checks were successful
Deploy Website / build-and-deploy (push) Successful in 13s
Details

Browse Source 
Phase 1 — Accessibility:
- z-index system: BaseLayout z-[9999]→z-50, Header→z-30, floating cards→z-20
- prefers-reduced-motion: disable all animations/transitions when user prefers
- Focus-visible: global ring indicator on all interactive elements
- Text contrast: slate-500→600, slate-400→500, slate-300→400 across all pages
  Footer ICP备案, Header nav links, index/product/philosophy sections

Phase 2 — Interaction:
- Waitlist form: loading spinner state, API submission, error handling, debounce
- Scroll progress: requestAnimationFrame throttle
- Footer: inline onmouseover→CSS :hover
- Removed unused WaitlistForm.astro (dead code, styles duplicated in waitlist.astro)

Phase 3 — Visual polish:
- Glass-card: opacity 0.6→0.8 for better text contrast
- Animations: reduced 4 infinite float to 2, changed 2 to hover-only
- Danmaku: hidden on mobile (hidden md:block)
- product.astro: removed 2 extra </div> tags, fixed HTML structure
- product.astro: added width/height to images
- philosophy.astro: added width/height to images
- CTA.astro: unified with btn-primary-gradient style system

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
WangDL 2026-05-19 09:37:36 +08:00
parent 47566cd51d
commit 4a7348c5d5
10 changed files with 194 additions and 327 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/CTA.astro
View File

@ -21,40 +21,48 @@ const { title, description, href, variant = 'primary' } = Astro.props;
.button { .button {
display: inline-block; display: inline-block;
padding: 0.75rem 1.5rem; padding: 0.75rem 2rem;
font-size: 1rem; font-size: 0.875rem;
font-weight: 500; font-weight: 600;
text-decoration: none; text-decoration: none;
border-radius: 8px; border-radius: 9999px;
transition: all 0.2s ease; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-family: var(--font-family-inter);
letter-spacing: 0.03em;
} }
.button.primary { .button.primary {
background: var(--color-accent); background: linear-gradient(135deg, #4F7CFF 0%, #7861FF 100%);
color: #ffffff; color: #ffffff;
border: none; border: none;
box-shadow: 0 8px 24px rgba(21, 80, 211, 0.2);
} }
.button.primary:hover { .button.primary:hover {
background: var(--color-accent-hover); transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(79, 124, 255, 0.3);
filter: brightness(1.1);
text-decoration: none; text-decoration: none;
} }
.button.secondary { .button.secondary {
background: transparent; background: rgba(255, 255, 255, 0.8);
color: var(--color-accent); backdrop-filter: blur(12px);
border: 1px solid var(--color-accent); color: #131b2c;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 12px rgba(18, 26, 43, 0.06);
} }
.button.secondary:hover { .button.secondary:hover {
background: var(--color-accent); background: #ffffff;
color: #ffffff; transform: translateY(-1px);
box-shadow: 0 12px 24px rgba(18, 26, 43, 0.08);
text-decoration: none; text-decoration: none;
} }
.description { .description {
margin-top: 0.75rem; margin-top: 0.75rem;
font-size: 0.875rem; font-size: 0.875rem;
color: var(--color-text-secondary); color: var(--color-on-surface-variant);
} }
</style> </style>

25
src/components/Footer.astro
View File

@ -15,23 +15,38 @@ const footerLinks = [
<span style="font-size: 18px; font-weight: 600;">知习</span> <span style="font-size: 18px; font-weight: 600;">知习</span>
</div> </div>
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; font-size: 12px; color: #64748b;"> <div class="footer-nav-links">
{footerLinks.map(link => ( {footerLinks.map(link => (
<a href={link.href} style="color: #64748b; text-decoration: none; transition: color 0.2s;" onmouseover="this.style.color='#4F7CFF'" onmouseout="this.style.color='#64748b'">{link.label}</a> <a href={link.href} class="footer-link">{link.label}</a>
))} ))}
</div> </div>
</div> </div>
<p style="font-size: 12px; color: #64748b; text-align: center;"> <p style="font-size: 12px; color: #475569; text-align: center;">
© {currentYear} 知习 (ZhiXi AI). Structured learning for the digital age. © {currentYear} 知习 (ZhiXi AI). Structured learning for the digital age.
</p> </p>
<p style="font-size: 12px; color: #94a3b8; text-align: center; margin-top: 8px;"> <p style="font-size: 12px; color: #64748b; text-align: center; margin-top: 8px;">
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" style="color: #94a3b8; text-decoration: none;">冀ICP备2026016484号</a> <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" class="footer-link">冀ICP备2026016484号</a>
</p> </p>
</div> </div>
</footer> </footer>
<style> <style>
.footer-nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
font-size: 12px;
}
.footer-link {
color: #475569;
text-decoration: none;
transition: color 0.2s;
}
.footer-link:hover {
color: #4F7CFF;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.footer-links { .footer-links {
align-items: center !important; align-items: center !important;

6
src/components/Header.astro
View File

@ -15,7 +15,7 @@ const isActive = (href: string) => {
}; };
--- ---
<header style="position: fixed; top: 0; left: 0; right: 0; z-index: 50; background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 8px 32px 0 rgba(18, 26, 43, 0.03);"> <header style="position: fixed; top: 0; left: 0; right: 0; z-index: 30; background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 8px 32px 0 rgba(18, 26, 43, 0.03);">
<nav style="display: flex; justify-content: space-between; align-items: center; height: 64px; padding-left: 24px; padding-right: 24px; max-width: 1280px; margin: 0 auto;"> <nav style="display: flex; justify-content: space-between; align-items: center; height: 64px; padding-left: 24px; padding-right: 24px; max-width: 1280px; margin: 0 auto;">
<a href="/" style="display: flex; align-items: center; gap: 8px; text-decoration: none;"> <a href="/" style="display: flex; align-items: center; gap: 8px; text-decoration: none;">
<img src="/logo.png" alt="知习" style="height: 32px; width: auto;" /> <img src="/logo.png" alt="知习" style="height: 32px; width: auto;" />
@ -27,7 +27,7 @@ const isActive = (href: string) => {
<a <a
href={item.href} href={item.href}
style={{ style={{
color: isActive(item.href) ? '#4F7CFF' : '#64748b', color: isActive(item.href) ? '#4F7CFF' : '#475569',
'border-bottom': isActive(item.href) ? '2px solid #4F7CFF' : 'none', 'border-bottom': isActive(item.href) ? '2px solid #4F7CFF' : 'none',
'padding-bottom': '4px', 'padding-bottom': '4px',
transition: 'all 0.3s', transition: 'all 0.3s',
@ -63,7 +63,7 @@ const isActive = (href: string) => {
} }
.desktop-nav a { .desktop-nav a {
color: #64748b; color: #475569;
transition: all 0.3s; transition: all 0.3s;
} }

254
src/components/WaitlistForm.astro
View File

@ -1,254 +0,0 @@
---
interface Props {
title?: string;
description?: string;
}
const {
title = "加入等待名单",
description = "留下你的邮箱，我们会第一时间通知你"
} = Astro.props;
---
<div class="waitlist-form-container">
<form id="waitlist-form" class="waitlist-form">
<div class="form-header">
<h2 class="title">{title}</h2>
<p class="description">{description}</p>
</div>
<div class="form-fields">
<div class="field">
<label for="nickname">昵称（可选）</label>
<input type="text" id="nickname" name="nickname" placeholder="你的昵称" />
</div>
<div class="field required">
<label for="email">邮箱</label>
<input type="email" id="email" name="email" placeholder="your@email.com" required />
</div>
<div class="field">
<label for="device">使用设备</label>
<select id="device" name="device">
<option value="">请选择</option>
<option value="iphone">iPhone</option>
<option value="android">Android</option>
<option value="ipad">iPad</option>
<option value="mac">Mac</option>
</select>
</div>
<div class="field">
<label for="interest">感兴趣的方向</label>
<select id="interest" name="interest">
<option value="">请选择</option>
<option value="gongkai">公考申论 AI 学习教练</option>
<option value="ai-tools">AI 工具学习知识库</option>
<option value="frontend-interview">程序员前端面试学习助手</option>
<option value="other">其他</option>
</select>
</div>
<div class="field">
<label for="pain-point">当前最大痛点</label>
<textarea id="pain-point" name="pain-point" rows="3" placeholder="描述你当前学习中遇到的最大困难..."></textarea>
</div>
<div class="field checkbox-field">
<label class="checkbox-label">
<input type="checkbox" name="beta" value="yes" />
<span>愿意参加内测</span>
</label>
</div>
<div class="field checkbox-field">
<label class="checkbox-label">
<input type="checkbox" name="notify" value="yes" checked />
<span>接受后续邮件通知</span>
</label>
</div>
</div>
<button type="submit" class="submit-button">提交</button>
</form>
<div id="success-message" class="success-message" hidden>
<div class="success-icon">✓</div>
<h3>提交成功！</h3>
<p>感谢你的关注，我们会在产品上线后第一时间通知你。</p>
</div>
</div>
<script>
const form = document.getElementById('waitlist-form') as HTMLFormElement;
const successMessage = document.getElementById('success-message');
form?.addEventListener('submit', (e) => {
e.preventDefault();
// Mock successful submission
form.hidden = true;
if (successMessage) {
successMessage.hidden = false;
}
});
</script>
<style>
.waitlist-form-container {
max-width: 480px;
margin: 0 auto;
padding: 2rem;
background: var(--color-bg-secondary);
border-radius: 16px;
}
.form-header {
text-align: center;
margin-bottom: 2rem;
}
.title {
font-size: 1.5rem;
font-weight: 600;
color: var(--color-text);
}
.description {
margin-top: 0.5rem;
font-size: 0.9375rem;
color: var(--color-text-secondary);
}
.form-fields {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.field {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.field.required label::after {
content: " *";
color: var(--color-text-secondary);
}
label {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text);
}
input[type="text"],
input[type="email"],
select,
textarea {
padding: 0.75rem 1rem;
font-size: 1rem;
font-family: inherit;
color: var(--color-text);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 8px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);
}
select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2386868b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.5rem;
}
textarea {
resize: vertical;
min-height: 80px;
}
.checkbox-field {
flex-direction: row;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-weight: 400;
}
.checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--color-accent);
}
.submit-button {
margin-top: 1.5rem;
width: 100%;
padding: 0.875rem 1.5rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
background: var(--color-accent);
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s ease;
}
.submit-button:hover {
background: var(--color-accent-hover);
}
.submit-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.success-message {
text-align: center;
padding: 2rem;
}
.success-icon {
width: 48px;
height: 48px;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #ffffff;
background: #34c759;
border-radius: 50%;
}
.success-message h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 0.5rem;
}
.success-message p {
font-size: 0.9375rem;
color: var(--color-text-secondary);
}
</style>

11
src/layouts/BaseLayout.astro
View File

@ -41,18 +41,25 @@ const ogImageUrl = ogImage || `${siteUrl}/og-default.png`;
<link rel="icon" type="image/png" href="/logo.png" /> <link rel="icon" type="image/png" href="/logo.png" />
</head> </head>
<body class="antialiased overflow-x-hidden selection:bg-blue-100"> <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> <div id="global-progress" class="fixed top-0 left-0 h-[3px] bg-gradient-to-r from-primary via-tech-blue to-secondary z-50 transition-[width]" style="width: 0%; border-radius: 0 3px 3px 0; box-shadow: 0 0 8px rgba(21, 80, 211, 0.3);"></div>
<slot /> <slot />
</body> </body>
<script> <script>
const bar = document.getElementById('global-progress'); const bar = document.getElementById('global-progress');
let ticking = false;
function updateProgress() { function updateProgress() {
const scrollTop = window.scrollY; const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight - window.innerHeight; const docHeight = document.documentElement.scrollHeight - window.innerHeight;
const progress = docHeight > 0 ? Math.min((scrollTop / docHeight) * 100, 100) : 0; const progress = docHeight > 0 ? Math.min((scrollTop / docHeight) * 100, 100) : 0;
bar.style.width = progress + '%'; bar.style.width = progress + '%';
} }
window.addEventListener('scroll', updateProgress, { passive: true }); function onScroll() {
if (!ticking) {
requestAnimationFrame(() => { updateProgress(); ticking = false; });
ticking = true;
}
}
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', updateProgress, { passive: true }); window.addEventListener('resize', updateProgress, { passive: true });
updateProgress(); updateProgress();

66
src/pages/index.astro
View File

@ -93,42 +93,42 @@ import Footer from '../components/Footer.astro';
</div> </div>
<!-- Floating Learning Cards --> <!-- Floating Learning Cards -->
<div class="absolute left-[15%] top-[-20px] z-50 glass-card-premium p-4 rounded-2xl shadow-2xl animate-float-slow flex items-center gap-3 border-white/40 hidden md:flex"> <div class="absolute left-[15%] top-[-20px] z-20 glass-card-premium p-4 rounded-2xl shadow-2xl animate-float-slow flex items-center gap-3 border-white/40 hidden md:flex">
<div class="w-8 h-8 rounded-lg bg-amber-50 flex items-center justify-center text-amber-500"> <div class="w-8 h-8 rounded-lg bg-amber-50 flex items-center justify-center text-amber-500">
<span class="material-symbols-outlined text-xl">event_note</span> <span class="material-symbols-outlined text-xl">event_note</span>
</div> </div>
<div class="text-left"> <div class="text-left">
<div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">今日任务</div> <div class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">今日任务</div>
<div class="text-sm font-bold text-navy">复习 12 个知识点</div> <div class="text-sm font-bold text-navy">复习 12 个知识点</div>
</div> </div>
</div> </div>
<div class="absolute right-[15%] bottom-[20%] z-50 glass-card-premium p-4 rounded-2xl shadow-2xl animate-float-medium flex items-center gap-3 border-white/40 hidden md:flex"> <div class="absolute right-[15%] bottom-[20%] z-20 glass-card-premium p-4 rounded-2xl shadow-2xl hover:-translate-y-2 hover:scale-105 transition-all duration-700 flex items-center gap-3 border-white/40 hidden md:flex">
<div class="w-8 h-8 rounded-lg bg-emerald-50 flex items-center justify-center text-emerald-500"> <div class="w-8 h-8 rounded-lg bg-emerald-50 flex items-center justify-center text-emerald-500">
<span class="material-symbols-outlined text-xl">psychology</span> <span class="material-symbols-outlined text-xl">psychology</span>
</div> </div>
<div class="text-left"> <div class="text-left">
<div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">主动回忆</div> <div class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">主动回忆</div>
<div class="text-sm font-bold text-navy">准确率提升 15%</div> <div class="text-sm font-bold text-navy">准确率提升 15%</div>
</div> </div>
</div> </div>
<div class="absolute left-[5%] bottom-[15%] z-50 glass-card-premium p-4 rounded-2xl shadow-2xl animate-float-fast flex items-center gap-3 border-white/40 hidden md:flex"> <div class="absolute left-[5%] bottom-[15%] z-20 glass-card-premium p-4 rounded-2xl shadow-2xl hover:-translate-y-2 hover:scale-105 transition-all duration-700 flex items-center gap-3 border-white/40 hidden md:flex">
<div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center text-tech-blue"> <div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center text-tech-blue">
<span class="material-symbols-outlined text-xl">auto_awesome</span> <span class="material-symbols-outlined text-xl">auto_awesome</span>
</div> </div>
<div class="text-left"> <div class="text-left">
<div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">AI 分析</div> <div class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">AI 分析</div>
<div class="text-sm font-bold text-navy">发现 2 个薄弱环节</div> <div class="text-sm font-bold text-navy">发现 2 个薄弱环节</div>
</div> </div>
</div> </div>
<div class="absolute right-[10%] top-[40px] z-50 glass-card-premium p-4 rounded-2xl shadow-2xl animate-float-slow flex items-center gap-3 border-white/40 hidden md:flex"> <div class="absolute right-[10%] top-[40px] z-20 glass-card-premium p-4 rounded-2xl shadow-2xl animate-float-slow flex items-center gap-3 border-white/40 hidden md:flex">
<div class="w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center text-indigo-500"> <div class="w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center text-indigo-500">
<span class="material-symbols-outlined text-xl">rebase_edit</span> <span class="material-symbols-outlined text-xl">rebase_edit</span>
</div> </div>
<div class="text-left"> <div class="text-left">
<div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">复习计划</div> <div class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">复习计划</div>
<div class="text-sm font-bold text-navy">动态调整已生效</div> <div class="text-sm font-bold text-navy">动态调整已生效</div>
</div> </div>
</div> </div>
@ -139,7 +139,7 @@ import Footer from '../components/Footer.astro';
<section class="py-40 px-6 md:px-12 max-w-7xl mx-auto relative z-10 animate-reveal-up"> <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"> <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> <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> <p class="text-base text-slate-600">选择一个入口，进入你的专属学习流</p>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
@ -149,7 +149,7 @@ import Footer from '../components/Footer.astro';
</div> </div>
<div> <div>
<h3 class="text-xl font-semibold text-navy mb-2">导入知识库</h3> <h3 class="text-xl font-semibold text-navy mb-2">导入知识库</h3>
<p class="text-sm text-slate-500">上传文档、笔记，让 AI 为你梳理结构。</p> <p class="text-sm text-slate-600">上传文档、笔记，让 AI 为你梳理结构。</p>
</div> </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-all duration-300 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> 开始导入 <span class="material-symbols-outlined text-sm">arrow_forward</span>
@ -162,7 +162,7 @@ import Footer from '../components/Footer.astro';
</div> </div>
<div> <div>
<h3 class="text-xl font-semibold text-navy mb-2">开启主动回忆</h3> <h3 class="text-xl font-semibold text-navy mb-2">开启主动回忆</h3>
<p class="text-sm text-slate-500">基于艾宾浩斯曲线，检验你的真实掌握度。</p> <p class="text-sm text-slate-600">基于艾宾浩斯曲线，检验你的真实掌握度。</p>
</div> </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-all duration-300 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> 开始测试 <span class="material-symbols-outlined text-sm">arrow_forward</span>
@ -175,7 +175,7 @@ import Footer from '../components/Footer.astro';
</div> </div>
<div> <div>
<h3 class="text-xl font-semibold text-navy mb-2">查看今日复习</h3> <h3 class="text-xl font-semibold text-navy mb-2">查看今日复习</h3>
<p class="text-sm text-slate-500">AI 为你安排的最优复习路径，高效不遗漏。</p> <p class="text-sm text-slate-600">AI 为你安排的最优复习路径，高效不遗漏。</p>
</div> </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-all duration-300 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> 查看计划 <span class="material-symbols-outlined text-sm">arrow_forward</span>
@ -188,7 +188,7 @@ import Footer from '../components/Footer.astro';
<section class="py-40 px-6 md:px-12 max-w-7xl mx-auto relative z-10 animate-reveal-up"> <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"> <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> <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> <p class="text-base text-slate-600">构建可持续的闭环学习流</p>
</div> </div>
<!-- Desktop Flow --> <!-- Desktop Flow -->
@ -199,34 +199,34 @@ import Footer from '../components/Footer.astro';
<!-- Step 1 --> <!-- Step 1 -->
<div class="relative z-10 flex flex-col items-center text-center gap-3 group flex-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"> <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-600 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> <span class="material-symbols-outlined text-[32px]">input</span>
</div> </div>
<div> <div>
<h4 class="font-bold text-navy text-sm mb-1">摄入</h4> <h4 class="font-bold text-navy text-sm mb-1">摄入</h4>
<p class="text-[11px] text-slate-400">知识结构化</p> <p class="text-[11px] text-slate-500">知识结构化</p>
</div> </div>
</div> </div>
<!-- Arrow --> <!-- Arrow -->
<div class="relative z-10 flex items-center justify-center w-10 shrink-0"> <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> <span class="material-symbols-outlined text-slate-400 text-xl">arrow_forward</span>
</div> </div>
<!-- Step 2 --> <!-- Step 2 -->
<div class="relative z-10 flex flex-col items-center text-center gap-3 group flex-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"> <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-600 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> <span class="material-symbols-outlined text-[32px]">memory</span>
</div> </div>
<div> <div>
<h4 class="font-bold text-navy text-sm mb-1">回忆</h4> <h4 class="font-bold text-navy text-sm mb-1">回忆</h4>
<p class="text-[11px] text-slate-400">主动提取</p> <p class="text-[11px] text-slate-500">主动提取</p>
</div> </div>
</div> </div>
<!-- Arrow --> <!-- Arrow -->
<div class="relative z-10 flex items-center justify-center w-10 shrink-0"> <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> <span class="material-symbols-outlined text-slate-400 text-xl">arrow_forward</span>
</div> </div>
<!-- Step 3 - Elevated center --> <!-- Step 3 - Elevated center -->
@ -236,29 +236,29 @@ import Footer from '../components/Footer.astro';
</div> </div>
<div> <div>
<h4 class="font-bold text-tech-blue text-base mb-1">AI 分析</h4> <h4 class="font-bold text-tech-blue text-base mb-1">AI 分析</h4>
<p class="text-[11px] text-slate-500 font-medium">精准定位薄弱点</p> <p class="text-[11px] text-slate-600 font-medium">精准定位薄弱点</p>
</div> </div>
</div> </div>
<!-- Arrow --> <!-- Arrow -->
<div class="relative z-10 flex items-center justify-center w-10 shrink-0"> <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> <span class="material-symbols-outlined text-slate-400 text-xl">arrow_forward</span>
</div> </div>
<!-- Step 4 --> <!-- Step 4 -->
<div class="relative z-10 flex flex-col items-center text-center gap-3 group flex-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"> <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-600 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> <span class="material-symbols-outlined text-[32px]">update</span>
</div> </div>
<div> <div>
<h4 class="font-bold text-navy text-sm mb-1">巩固</h4> <h4 class="font-bold text-navy text-sm mb-1">巩固</h4>
<p class="text-[11px] text-slate-400">动态复习计划</p> <p class="text-[11px] text-slate-500">动态复习计划</p>
</div> </div>
</div> </div>
<!-- Loop back arrow --> <!-- Loop back arrow -->
<div class="absolute -bottom-4 left-[6%] right-[6%] flex items-center justify-center z-0"> <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"> <div class="flex items-center gap-1 text-[10px] text-slate-400 font-medium tracking-widest uppercase">
<span class="material-symbols-outlined text-xs">replay</span> <span class="material-symbols-outlined text-xs">replay</span>
循环迭代 循环迭代
</div> </div>
@ -270,22 +270,22 @@ import Footer from '../components/Footer.astro';
<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="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="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"> <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-600 shrink-0 group-hover:text-tech-blue transition-colors">
<span class="material-symbols-outlined text-2xl">input</span> <span class="material-symbols-outlined text-2xl">input</span>
</div> </div>
<div> <div>
<h4 class="font-bold text-navy text-sm">摄入</h4> <h4 class="font-bold text-navy text-sm">摄入</h4>
<p class="text-xs text-slate-400">知识结构化</p> <p class="text-xs text-slate-500">知识结构化</p>
</div> </div>
</div> </div>
<div class="relative z-10 flex items-center gap-5 w-full py-5 group"> <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"> <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-600 shrink-0 group-hover:text-tech-blue transition-colors">
<span class="material-symbols-outlined text-2xl">memory</span> <span class="material-symbols-outlined text-2xl">memory</span>
</div> </div>
<div> <div>
<h4 class="font-bold text-navy text-sm">回忆</h4> <h4 class="font-bold text-navy text-sm">回忆</h4>
<p class="text-xs text-slate-400">主动提取</p> <p class="text-xs text-slate-500">主动提取</p>
</div> </div>
</div> </div>
@ -295,17 +295,17 @@ import Footer from '../components/Footer.astro';
</div> </div>
<div> <div>
<h4 class="font-bold text-tech-blue text-sm">AI 分析</h4> <h4 class="font-bold text-tech-blue text-sm">AI 分析</h4>
<p class="text-xs text-slate-500 font-medium">精准定位薄弱点</p> <p class="text-xs text-slate-600 font-medium">精准定位薄弱点</p>
</div> </div>
</div> </div>
<div class="relative z-10 flex items-center gap-5 w-full py-5 group"> <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"> <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-600 shrink-0 group-hover:text-tech-blue transition-colors">
<span class="material-symbols-outlined text-2xl">update</span> <span class="material-symbols-outlined text-2xl">update</span>
</div> </div>
<div> <div>
<h4 class="font-bold text-navy text-sm">巩固</h4> <h4 class="font-bold text-navy text-sm">巩固</h4>
<p class="text-xs text-slate-400">动态复习计划</p> <p class="text-xs text-slate-500">动态复习计划</p>
</div> </div>
</div> </div>
</div> </div>
@ -342,7 +342,7 @@ import Footer from '../components/Footer.astro';
<div class="h-32 w-full bg-slate-100 rounded-xl"></div> <div class="h-32 w-full bg-slate-100 rounded-xl"></div>
<div class="h-24 w-full bg-slate-100 rounded-xl"></div> <div class="h-24 w-full bg-slate-100 rounded-xl"></div>
</div> </div>
<div class="absolute z-20 right-[-20px] top-[10%] w-[320px] glass-card-premium rounded-2xl p-6 shadow-2xl animate-float-slow"> <div class="absolute z-20 right-[-20px] top-[10%] w-[320px] glass-card-premium rounded-2xl p-6 shadow-2xl hover:-translate-y-2 transition-transform duration-500">
<div class="flex items-center gap-3 mb-4"> <div class="flex items-center gap-3 mb-4">
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-tech-blue"> <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-tech-blue">
<span class="material-symbols-outlined text-sm">auto_awesome</span> <span class="material-symbols-outlined text-sm">auto_awesome</span>
@ -355,7 +355,7 @@ import Footer from '../components/Footer.astro';
<div class="w-full bg-slate-100 rounded-full h-1.5 mb-2"> <div class="w-full bg-slate-100 rounded-full h-1.5 mb-2">
<div class="bg-tech-blue h-1.5 rounded-full w-[75%]"></div> <div class="bg-tech-blue h-1.5 rounded-full w-[75%]"></div>
</div> </div>
<div class="flex justify-between text-[10px] text-slate-400"> <div class="flex justify-between text-[10px] text-slate-500">
<span>整体掌握度</span> <span>整体掌握度</span>
<span>75%</span> <span>75%</span>
</div> </div>

4
src/pages/philosophy.astro
View File

@ -30,7 +30,7 @@ import Footer from '../components/Footer.astro';
<!-- Cinematic Abstract Visual --> <!-- Cinematic Abstract Visual -->
<div class="mt-24 w-full max-w-5xl mx-auto relative glass-panel rounded-2xl p-2"> <div class="mt-24 w-full max-w-5xl mx-auto relative glass-panel rounded-2xl p-2">
<div class="relative w-full aspect-video rounded-xl overflow-hidden bg-surface-container-high border border-white/50"> <div class="relative w-full aspect-video rounded-xl overflow-hidden bg-surface-container-high border border-white/50">
<img alt="Knowledge Path" class="w-full h-full object-cover mix-blend-multiply opacity-90" src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1200&h=675&fit=crop" /> <img alt="Knowledge Path" width="1200" height="675" class="w-full h-full object-cover mix-blend-multiply opacity-90" src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1200&h=675&fit=crop" />
<div class="absolute inset-0 bg-gradient-to-t from-surface-container-lowest/80 to-transparent"></div> <div class="absolute inset-0 bg-gradient-to-t from-surface-container-lowest/80 to-transparent"></div>
</div> </div>
</div> </div>
@ -385,7 +385,7 @@ import Footer from '../components/Footer.astro';
<section class="py-[160px] z-10 relative px-6 text-center"> <section class="py-[160px] z-10 relative px-6 text-center">
<h2 class="font-headline-lg text-on-surface max-w-2xl mx-auto mb-10">如果你也厌倦了"看过就算学过"，<br/>欢迎继续了解知习。</h2> <h2 class="font-headline-lg text-on-surface max-w-2xl mx-auto mb-10">如果你也厌倦了"看过就算学过"，<br/>欢迎继续了解知习。</h2>
<div class="flex items-center justify-center gap-6"> <div class="flex items-center justify-center gap-6">
<a href="/product" class="bg-primary text-white px-8 py-4 rounded-full font-semibold shadow-[0_10px_20px_rgba(21,80,211,0.2)] hover:-translate-y-1 transition-transform duration-300"> <a href="/product" class="btn-primary-gradient text-white px-8 py-4 rounded-full font-semibold shadow-2xl shadow-blue-500/30 hover:shadow-blue-500/50 hover:-translate-y-1 transition-all text-sm">
查看产品 查看产品
</a> </a>
<a href="/waitlist" class="glass-panel text-on-surface px-8 py-4 rounded-full font-semibold hover:bg-white transition-colors duration-300"> <a href="/waitlist" class="glass-panel text-on-surface px-8 py-4 rounded-full font-semibold hover:bg-white transition-colors duration-300">

11
src/pages/product.astro
View File

@ -69,11 +69,12 @@ const painPoints = [
<img <img
alt="知习 产品界面展示" alt="知习 产品界面展示"
src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1200&h=800&fit=crop" src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1200&h=800&fit=crop"
width="1200" height="800"
class="w-full h-auto rounded-xl shadow-sm object-cover max-h-[600px]" class="w-full h-auto rounded-xl shadow-sm object-cover max-h-[600px]"
/> />
<!-- 弹幕滚动效果 --> <!-- 弹幕滚动效果 -->
<div class="absolute inset-0 overflow-hidden pointer-events-none"> <div class="absolute inset-0 overflow-hidden pointer-events-none hidden md:block">
<!-- 从右向左 --> <!-- 从右向左 -->
<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="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"> <div class="w-9 h-9 rounded-full bg-blue-100 text-tech-blue flex items-center justify-center shrink-0">
@ -81,7 +82,7 @@ const painPoints = [
</div> </div>
<div class="text-left whitespace-nowrap"> <div class="text-left whitespace-nowrap">
<div class="text-sm font-semibold text-navy">今日学习任务</div> <div class="text-sm font-semibold text-navy">今日学习任务</div>
<div class="text-xs text-slate-500">3 个待复习</div> <div class="text-xs text-slate-600">3 个待复习</div>
</div> </div>
</div> </div>
@ -91,7 +92,7 @@ const painPoints = [
</div> </div>
<div class="text-left whitespace-nowrap"> <div class="text-left whitespace-nowrap">
<div class="text-sm font-semibold text-navy">AI 分析反馈</div> <div class="text-sm font-semibold text-navy">AI 分析反馈</div>
<div class="text-xs text-slate-500">掌握度提升 15%</div> <div class="text-xs text-slate-600">掌握度提升 15%</div>
</div> </div>
</div> </div>
@ -111,7 +112,7 @@ const painPoints = [
</div> </div>
<div class="text-left whitespace-nowrap"> <div class="text-left whitespace-nowrap">
<div class="text-sm font-semibold text-navy">进度提升</div> <div class="text-sm font-semibold text-navy">进度提升</div>
<div class="text-xs text-slate-500">+23%</div> <div class="text-xs text-slate-600">+23%</div>
</div> </div>
</div> </div>
@ -125,8 +126,6 @@ const painPoints = [
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</section> </section>
<!-- Pain Points Section --> <!-- Pain Points Section -->

73
src/pages/waitlist.astro
View File

@ -242,17 +242,82 @@ import Footer from '../components/Footer.astro';
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 12px 32px rgba(21, 80, 211, 0.3); box-shadow: 0 12px 32px rgba(21, 80, 211, 0.3);
} }
.wl-submit-btn:disabled,
.wl-submit-loading {
opacity: 0.65;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.wl-submit-loading .material-symbols-outlined {
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style> </style>
<script> <script>
const form = document.getElementById('waitlist-form') as HTMLFormElement; const form = document.getElementById('waitlist-form') as HTMLFormElement;
const successMessage = document.getElementById('success-message'); const successMessage = document.getElementById('success-message');
const submitBtn = form?.querySelector('.wl-submit-btn') as HTMLButtonElement;
let submitting = false;
form?.addEventListener('submit', (e) => { form?.addEventListener('submit', async (e) => {
e.preventDefault(); e.preventDefault();
form.hidden = true; if (submitting) return;
if (successMessage) { submitting = true;
successMessage.hidden = false;
// Show loading state
const btnText = submitBtn?.querySelector('span');
const btnIcon = submitBtn?.querySelector('.material-symbols-outlined');
const originalText = btnText?.textContent || '提交';
if (btnText) btnText.textContent = '提交中…';
if (btnIcon) btnIcon.textContent = 'hourglass';
submitBtn?.setAttribute('disabled', '');
submitBtn?.classList.add('wl-submit-loading');
try {
const formData = new FormData(form!);
const body = {
nickname: formData.get('nickname') || undefined,
email: formData.get('email'),
devices: [formData.get('device')].filter(Boolean),
interests: [formData.get('interest')].filter(Boolean),
painpoint: formData.get('pain-point') || undefined,
willingBeta: formData.get('beta') === 'yes',
};
const resp = await fetch('/api/waitlist', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
});
if (!resp.ok) {
const err = await resp.json().catch(() => ({ message: '提交失败' }));
throw new Error(err.message || '提交失败，请稍后重试');
}
// Success
form!.hidden = true;
if (successMessage) successMessage.hidden = false;
} catch (err) {
// Show error inline
const existing = document.getElementById('wl-error');
if (existing) existing.remove();
const msg = document.createElement('p');
msg.id = 'wl-error';
msg.textContent = err instanceof Error ? err.message : '网络错误，请稍后重试';
msg.style.cssText = 'color:#ba1a1a;font-size:13px;text-align:center;margin-top:12px;';
submitBtn?.after(msg);
// Reset button
if (btnText) btnText.textContent = originalText;
if (btnIcon) btnIcon.textContent = 'send';
submitBtn?.removeAttribute('disabled');
submitBtn?.classList.remove('wl-submit-loading');
submitting = false;
} }
}); });
</script> </script>

29
src/styles/global.css
View File

@ -1,5 +1,12 @@
@import "tailwindcss"; @import "tailwindcss";
/* Z-index scale: z-10 content → z-20 float → z-30 header → z-40 overlay → z-50 progress/toast */
@custom-variant prefers-reduced-motion {
@media (prefers-reduced-motion: reduce) {
@slot;
}
}
@theme { @theme {
--color-tech-blue: #4F7CFF; --color-tech-blue: #4F7CFF;
--color-navy: #121A2B; --color-navy: #121A2B;
@ -122,7 +129,7 @@
@layer components { @layer components {
.glass-card-premium { .glass-card-premium {
background: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(24px); backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.8); border: 1px solid rgba(255, 255, 255, 0.8);
@ -194,6 +201,26 @@
} }
} }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.animate-reveal-up:focus-visible {
outline: 2px solid var(--color-tech-blue);
outline-offset: 2px;
border-radius: 4px;
}
body { body {
font-family: var(--font-family-headline); font-family: var(--font-family-headline);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;