feat: 完成隐私政策、支持、理念页面还原，优化导航栏和Footer组件
This commit is contained in:
parent
bd570d5fb3
commit
3c4e0808fc
522
ZhiXi_Web/landing/code.html
Normal file
522
ZhiXi_Web/landing/code.html
Normal file
@ -0,0 +1,522 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="zh-CN"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>知习 AI - 更懂你，更会学</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tech-blue": "#4F7CFF",
|
||||
"navy": "#121A2B",
|
||||
"outline-variant": "#c3c5d7",
|
||||
"surface-container-low": "#f1f3ff",
|
||||
"on-tertiary-fixed": "#181c1f",
|
||||
"inverse-primary": "#b5c4ff",
|
||||
"on-tertiary-fixed-variant": "#44474a",
|
||||
"surface-bright": "#faf9ff",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary-fixed": "#190064",
|
||||
"on-surface": "#121A2B",
|
||||
"on-primary": "#ffffff",
|
||||
"tertiary-container": "#727578",
|
||||
"background": "#ffffff",
|
||||
"tertiary-fixed-dim": "#c4c7ca",
|
||||
"primary-fixed-dim": "#b5c4ff",
|
||||
"inverse-surface": "#283042",
|
||||
"inverse-on-surface": "#edf0ff",
|
||||
"error": "#ba1a1a",
|
||||
"surface-variant": "#dbe2fa",
|
||||
"error-container": "#ffdad6",
|
||||
"secondary-fixed-dim": "#c8bfff",
|
||||
"secondary-fixed": "#e5deff",
|
||||
"on-surface-variant": "#434654",
|
||||
"primary-fixed": "#dce1ff",
|
||||
"primary-container": "#e6ecff",
|
||||
"surface-container-high": "#e1e8ff",
|
||||
"on-error": "#ffffff",
|
||||
"outline": "#737686",
|
||||
"surface-dim": "#d2daf1",
|
||||
"on-primary-fixed": "#00164d",
|
||||
"tertiary": "#595c60",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-tint": "#4F7CFF",
|
||||
"on-background": "#121A2B",
|
||||
"tertiary-fixed": "#e0e3e6",
|
||||
"on-tertiary-container": "#fcfcff",
|
||||
"secondary": "#583dde",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface": "#ffffff",
|
||||
"primary": "#4F7CFF",
|
||||
"surface-container": "#e9edff",
|
||||
"on-primary-container": "#4F7CFF",
|
||||
"secondary-container": "#715af8",
|
||||
"surface-container-highest": "#dbe2fa",
|
||||
"on-primary-fixed-variant": "#003cad",
|
||||
"on-secondary-fixed-variant": "#421dc9",
|
||||
"on-secondary-container": "#fffbff",
|
||||
"on-error-container": "#93000a"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px",
|
||||
"2xl": "1rem",
|
||||
"3xl": "1.5rem",
|
||||
"4xl": "2rem"
|
||||
},
|
||||
"spacing": {
|
||||
"container-max": "1200px",
|
||||
"section-padding": "160px",
|
||||
"unit": "8px",
|
||||
"card-padding": "40px",
|
||||
"gutter": "32px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-md": ["Manrope", "sans-serif"],
|
||||
"headline-lg": ["Manrope", "sans-serif"],
|
||||
"display-xl": ["Manrope", "sans-serif"],
|
||||
"display-2xl": ["Manrope", "sans-serif"],
|
||||
"body-lg": ["Manrope", "sans-serif"],
|
||||
"body-base": ["Manrope", "sans-serif"],
|
||||
"label-sm": ["Inter", "sans-serif"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-md": ["28px", { "lineHeight": "1.3", "fontWeight": "600" }],
|
||||
"headline-lg": ["48px", { "lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700" }],
|
||||
"display-xl": ["64px", { "lineHeight": "1.1", "letterSpacing": "-0.03em", "fontWeight": "800" }],
|
||||
"display-2xl": ["80px", { "lineHeight": "1", "letterSpacing": "-0.04em", "fontWeight": "800" }],
|
||||
"body-lg": ["20px", { "lineHeight": "1.6", "fontWeight": "400" }],
|
||||
"body-base": ["16px", { "lineHeight": "1.6", "fontWeight": "400" }],
|
||||
"label-sm": ["14px", { "lineHeight": "1", "letterSpacing": "0.02em", "fontWeight": "600" }]
|
||||
},
|
||||
"animation": {
|
||||
'float-slow': 'float 8s ease-in-out infinite',
|
||||
'float-medium': 'float 6s ease-in-out infinite',
|
||||
'float-fast': 'float 4s ease-in-out infinite',
|
||||
'breathe': 'breathe 4s ease-in-out infinite',
|
||||
'fade-in-up': 'fadeInUp 1s ease-out forwards',
|
||||
},
|
||||
"keyframes": {
|
||||
float: {
|
||||
'0%, 100%': { transform: 'translateY(0)' },
|
||||
'50%': { transform: 'translateY(-20px)' },
|
||||
},
|
||||
breathe: {
|
||||
'0%, 100%': { transform: 'scale(1)', opacity: '0.8' },
|
||||
'50%': { transform: 'scale(1.05)', opacity: '1' },
|
||||
},
|
||||
fadeInUp: {
|
||||
'0%': { opacity: '0', transform: 'translateY(40px)' },
|
||||
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #ffffff;
|
||||
color: #121A2B;
|
||||
}
|
||||
|
||||
/* Subtle large-scale grid */
|
||||
.bg-grid {
|
||||
background-size: 60px 60px;
|
||||
background-image: radial-gradient(circle, rgba(79, 124, 255, 0.08) 1px, transparent 1px);
|
||||
mask-image: radial-gradient(ellipse at center, black 30%, transparent 90%);
|
||||
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 90%);
|
||||
}
|
||||
|
||||
.glass-card-premium {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 30px 60px rgba(18, 26, 43, 0.05), 0 0 0 1px rgba(79, 124, 255, 0.05) inset;
|
||||
}
|
||||
|
||||
.hover-lift {
|
||||
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 40px 80px rgba(79, 124, 255, 0.12);
|
||||
}
|
||||
|
||||
.ethereal-glow {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(120px);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.animate-on-scroll.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Primary Gradient Button */
|
||||
.btn-primary-gradient {
|
||||
background: linear-gradient(135deg, #4F7CFF 0%, #7861FF 100%);
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.btn-primary-gradient:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 24px rgba(79, 124, 255, 0.3);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
/* Blur layers for depth */
|
||||
.depth-1 { filter: blur(0px); z-index: 20; }
|
||||
.depth-2 { filter: blur(2px); z-index: 15; transform: scale(0.95); opacity: 0.9;}
|
||||
.depth-3 { filter: blur(6px); z-index: 10; transform: scale(0.9); opacity: 0.7;}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased overflow-x-hidden selection:bg-primary-container selection:text-primary relative">
|
||||
<!-- Global Grid Background -->
|
||||
<div class="fixed inset-0 bg-grid pointer-events-none z-0"></div>
|
||||
<div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
|
||||
<div class="absolute top-[-10%] left-[-10%] w-[60%] h-[60%] rounded-full bg-[#4F7CFF]/5 blur-[120px] animate-float-slow"></div>
|
||||
<div class="absolute bottom-[10%] right-[-5%] w-[50%] h-[50%] rounded-full bg-[#7861FF]/5 blur-[120px] animate-float-medium"></div>
|
||||
<div class="absolute top-[40%] right-[15%] w-[30%] h-[30%] rounded-full bg-[#4F7CFF]/3 blur-[100px] animate-float-fast"></div>
|
||||
</div>
|
||||
<!-- TopAppBar -->
|
||||
<nav class="fixed top-0 w-full z-50 bg-white/70 backdrop-blur-xl border-b border-black/5 shadow-[0_8px_32px_0_rgba(18,26,43,0.03)]">
|
||||
<div class="flex justify-between items-center h-16 px-6 md:px-12 max-w-7xl mx-auto">
|
||||
<div class="flex items-center gap-2 text-tech-blue">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">psychology</span>
|
||||
<span class="text-xl font-extrabold text-navy tracking-tighter">知习 AI</span>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-8 font-manrope tracking-tight text-sm font-medium">
|
||||
<a class="text-tech-blue border-b-2 border-tech-blue pb-1 ease-out hover:opacity-80 transition-all duration-300" href="#">首页</a>
|
||||
<a class="text-slate-500 hover:text-tech-blue ease-out hover:opacity-80 transition-all duration-300" href="#">产品</a>
|
||||
<a class="text-slate-500 hover:text-tech-blue ease-out hover:opacity-80 transition-all duration-300" href="#">理念</a>
|
||||
<a class="text-slate-500 hover:text-tech-blue ease-out hover:opacity-80 transition-all duration-300" href="#">等待名单</a>
|
||||
</div>
|
||||
<button class="text-white font-label-sm px-6 py-2 rounded-full hover:bg-blue-600 hover:shadow-lg transition-all ease-out hover:-translate-y-0.5 btn-primary-gradient">立即加入</button>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="pt-20 relative z-10">
|
||||
<!-- Cinematic Hero -->
|
||||
<section class="min-h-[100vh] flex flex-col items-center justify-start relative px-6 md:px-12 pt-32 pb-24 max-w-container-max mx-auto text-center overflow-visible">
|
||||
<!-- Ethereal Glows -->
|
||||
<div class="ethereal-glow bg-blue-400/20 w-[600px] h-[600px] top-[-100px] left-1/2 -translate-x-1/2 animate-breathe"></div>
|
||||
<h1 class="font-display-2xl text-display-2xl text-navy mb-6 max-w-5xl relative z-10 tracking-tight animate-fade-in-up" style="animation-delay: 0.1s;">
|
||||
更懂你，更会学
|
||||
</h1>
|
||||
<p class="font-body-lg text-body-lg 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;">
|
||||
<button class="text-white font-label-sm px-10 py-5 rounded-full shadow-2xl shadow-blue-500/30 hover:shadow-blue-500/50 transition-all hover:-translate-y-1 text-base btn-primary-gradient">
|
||||
进入产品
|
||||
</button>
|
||||
<button class="bg-white/80 backdrop-blur-sm text-navy font-label-sm px-10 py-5 rounded-full hover:bg-white transition-all border border-slate-200 shadow-[0_4px_12px_rgba(0,0,0,0.03)] hover:shadow-[0_8px_24px_rgba(0,0,0,0.06)] hover:-translate-y-1 text-base">
|
||||
加入等待名单
|
||||
</button>
|
||||
</div>
|
||||
<!-- Cinematic Mockup Area -->
|
||||
<div class="relative w-full max-w-6xl mt-12 z-0 flex items-center justify-center animate-fade-in-up" style="animation-delay: 0.5s;"><!-- MacBook Pro High-Fidelity Mockup -->
|
||||
<div class="relative z-20 w-[700px] h-[450px] transition-transform duration-700 hover:scale-[1.02]">
|
||||
<!-- MacBook Screen/Lid -->
|
||||
<div class="relative w-full h-[430px] bg-slate-900 rounded-2xl p-3 shadow-2xl overflow-hidden border border-slate-700/50">
|
||||
<div class="absolute top-0 inset-x-0 h-6 flex justify-center items-center">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-slate-700"></div>
|
||||
</div>
|
||||
<div class="w-full h-full bg-white rounded-lg overflow-hidden flex flex-col">
|
||||
<div class="h-10 border-b border-slate-100 flex items-center px-4 gap-2 bg-slate-50/50">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-400"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-amber-400"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-emerald-400"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 p-6 flex flex-col gap-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center text-tech-blue">
|
||||
<span class="material-symbols-outlined">account_circle</span>
|
||||
</div>
|
||||
<div class="h-2 w-32 bg-slate-100 rounded"></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-6 flex-1">
|
||||
<div class="col-span-2 space-y-4">
|
||||
<div class="h-40 bg-slate-50 rounded-xl border border-dashed border-slate-200"></div>
|
||||
<div class="h-20 bg-slate-50 rounded-xl"></div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="h-full bg-blue-50/30 rounded-xl border border-blue-100/20"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- MacBook Base/Keyboard -->
|
||||
<div class="absolute bottom-[-20px] left-[-40px] right-[-40px] h-[40px] bg-slate-800 rounded-b-3xl transform perspective-1000 rotateX-30 shadow-2xl flex justify-center">
|
||||
<div class="w-1/3 h-1 bg-slate-700 rounded-full mt-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- iPad Pro (Left Layer) -->
|
||||
<div class="absolute left-[-5%] bottom-[-10%] z-30 w-[340px] h-[240px] glass-card-premium rounded-3xl border-[8px] border-slate-800 shadow-2xl overflow-hidden transform -rotate-12 hover:rotate-0 transition-transform duration-700 hidden md:block">
|
||||
<div class="w-full h-full bg-white p-4">
|
||||
<div class="w-full h-full bg-slate-50 rounded-xl p-4">
|
||||
<div class="h-4 w-24 bg-slate-200 rounded mb-4"></div>
|
||||
<div class="space-y-3">
|
||||
<div class="h-2 bg-slate-200 rounded w-full"></div>
|
||||
<div class="h-2 bg-slate-200 rounded w-5/6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- iPhone (Right Layer) -->
|
||||
<div class="absolute right-[-5%] top-[5%] z-40 w-[180px] h-[360px] glass-card-premium rounded-[3rem] border-[8px] border-slate-900 shadow-2xl overflow-hidden transform rotate-12 hover:rotate-0 transition-transform duration-700 hidden lg:block">
|
||||
<div class="w-full h-full bg-white p-4 flex flex-col gap-4">
|
||||
<div class="w-12 h-1 bg-slate-100 rounded-full mx-auto mb-4"></div>
|
||||
<div class="h-full bg-blue-50/20 rounded-2xl border border-blue-100/30"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Floating Learning Cards -->
|
||||
<!-- Card 1: Today's Tasks -->
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">今日任务</div>
|
||||
<div class="text-sm font-bold text-navy">复习 12 个知识点</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 2: Active Recall -->
|
||||
<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 delay-700">
|
||||
<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>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">主动回忆</div>
|
||||
<div class="text-sm font-bold text-navy">准确率提升 15%</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 3: AI Analysis -->
|
||||
<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 delay-300">
|
||||
<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>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">AI 分析</div>
|
||||
<div class="text-sm font-bold text-navy">发现 2 个薄弱环节</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 4: Review Plan -->
|
||||
<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 delay-1000">
|
||||
<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>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">复习计划</div>
|
||||
<div class="text-sm font-bold text-navy">动态调整已生效</div>
|
||||
</div>
|
||||
</div></div>
|
||||
</section>
|
||||
<!-- 'How do you want to start?' Portal Area -->
|
||||
<section class="py-section-padding px-6 md:px-12 max-w-container-max mx-auto relative z-10 animate-on-scroll" id="portal-section">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="font-headline-lg text-headline-lg text-navy mb-4">今天想从哪里开始？</h2>
|
||||
<p class="font-body-base text-slate-500">选择一个入口，进入你的专属学习流</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<a class="glass-card-premium p-card-padding 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">
|
||||
<span class="material-symbols-outlined text-3xl">upload_file</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline-md text-xl text-navy mb-2">导入知识库</h3>
|
||||
<p class="font-body-base text-sm text-slate-500">上传文档、笔记，让 AI 为你梳理结构。</p>
|
||||
</div>
|
||||
<div class="mt-auto pt-4 text-tech-blue flex items-center gap-1 font-label-sm opacity-0 group-hover:opacity-100 transition-opacity transform 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-card-padding rounded-3xl flex flex-col items-center text-center gap-6 hover-lift group cursor-pointer border-tech-blue/20" href="#">
|
||||
<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>
|
||||
<div>
|
||||
<h3 class="font-headline-md text-xl text-navy mb-2">开启主动回忆</h3>
|
||||
<p class="font-body-base text-sm text-slate-500">基于艾宾浩斯曲线，检验你的真实掌握度。</p>
|
||||
</div>
|
||||
<div class="mt-auto pt-4 text-tech-blue flex items-center gap-1 font-label-sm opacity-0 group-hover:opacity-100 transition-opacity transform 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-card-padding 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">
|
||||
<span class="material-symbols-outlined text-3xl">fact_check</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline-md text-xl text-navy mb-2">查看今日复习</h3>
|
||||
<p class="font-body-base text-sm text-slate-500">AI 为你安排的最优复习路径，高效不遗漏。</p>
|
||||
</div>
|
||||
<div class="mt-auto pt-4 text-tech-blue flex items-center gap-1 font-label-sm opacity-0 group-hover:opacity-100 transition-opacity transform translate-y-2 group-hover:translate-y-0">
|
||||
查看计划 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 'Sustainable Learning Loop' Interactive Zone -->
|
||||
<section class="py-section-padding px-6 md:px-12 max-w-container-max mx-auto relative z-10 animate-on-scroll">
|
||||
<div class="text-center mb-24">
|
||||
<h2 class="font-headline-lg text-headline-lg text-navy mb-4">不是帮你多看一点，而是帮你真正学会</h2>
|
||||
<p class="font-body-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">
|
||||
<!-- Connecting Line Desktop -->
|
||||
<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>
|
||||
<!-- Connecting Line Mobile -->
|
||||
<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>
|
||||
<!-- Loop Item 1 -->
|
||||
<div class="relative z-10 flex flex-col items-center text-center gap-4 group">
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-navy mb-1">1. 摄入</h4>
|
||||
<p class="text-xs text-slate-500">知识结构化</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Loop Item 2 -->
|
||||
<div class="relative z-10 flex flex-col items-center text-center gap-4 group">
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-navy mb-1">2. 回忆</h4>
|
||||
<p class="text-xs text-slate-500">主动提取</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Loop Item 3 -->
|
||||
<div class="relative z-10 flex flex-col items-center text-center gap-4 group mt-8 md:mt-0 md:-translate-y-8"> <!-- Staggered visually -->
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Loop Item 4 -->
|
||||
<div class="relative z-10 flex flex-col items-center text-center gap-4 group">
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-navy mb-1">4. 巩固</h4>
|
||||
<p class="text-xs text-slate-500">动态复习计划</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 'Feedback in Every Step' Dynamic Preview -->
|
||||
<section class="py-section-padding px-6 md:px-12 max-w-container-max mx-auto relative z-10 animate-on-scroll">
|
||||
<div class="bg-slate-50 rounded-[3rem] p-8 md:p-16 border border-slate-100 overflow-hidden relative">
|
||||
<!-- Inner ethereal glow -->
|
||||
<div class="absolute top-0 right-0 w-96 h-96 bg-blue-300/10 rounded-full blur-[80px]"></div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="relative z-10">
|
||||
<h2 class="font-headline-lg text-4xl text-navy mb-6">看得见的进步轨迹</h2>
|
||||
<p class="font-body-base text-slate-600 mb-8 leading-relaxed">
|
||||
告别盲目刷题。知习 AI 在你每次主动回忆后，实时生成多维度的掌握度分析，动态调整你的下一步学习路径。
|
||||
</p>
|
||||
<ul class="space-y-4 mb-8">
|
||||
<li class="flex items-center gap-3 text-sm text-slate-700">
|
||||
<span class="material-symbols-outlined text-tech-blue text-lg">check_circle</span> 知识点图谱实时更新
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-slate-700">
|
||||
<span class="material-symbols-outlined text-tech-blue text-lg">check_circle</span> 遗忘曲线精准预测
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-slate-700">
|
||||
<span class="material-symbols-outlined text-tech-blue text-lg">check_circle</span> 个性化干预建议
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Multi-layered dynamic preview -->
|
||||
<div class="relative h-[400px] w-full flex items-center justify-center">
|
||||
<!-- Background blurry UI -->
|
||||
<div class="absolute inset-0 bg-white/40 backdrop-blur-sm rounded-2xl border border-white/60 shadow-lg transform scale-95 opacity-50 z-0"></div>
|
||||
<div class="absolute inset-4 bg-white/60 backdrop-blur-md rounded-2xl border border-white/80 shadow-xl transform scale-100 opacity-80 z-10 flex flex-col p-6 gap-4">
|
||||
<div class="h-6 w-1/3 bg-slate-200 rounded"></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>
|
||||
<!-- Foreground floating Analysis Card -->
|
||||
<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="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">
|
||||
<span class="material-symbols-outlined text-sm">auto_awesome</span>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-navy">AI 深度分析</span>
|
||||
</div>
|
||||
<p class="text-xs text-slate-600 mb-4 leading-relaxed">
|
||||
你在「宏观经济学」章节的「通货膨胀」概念上表现出轻微遗忘，已自动加入明日优先复习队列。
|
||||
</p>
|
||||
<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>
|
||||
<div class="flex justify-between text-[10px] text-slate-400">
|
||||
<span>整体掌握度</span>
|
||||
<span>75%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="w-full mt-32 bg-slate-50 border-t border-slate-200 fade-in transition-opacity relative z-10">
|
||||
<div class="max-w-7xl mx-auto py-20 px-8 flex flex-col md:flex-row justify-between items-center gap-8">
|
||||
<div class="text-lg font-bold text-navy flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-tech-blue" style="font-variation-settings: 'FILL' 1;">psychology</span>
|
||||
知习 AI
|
||||
</div>
|
||||
<p class="font-manrope text-xs text-slate-500">
|
||||
© 2024 知习 AI (ZhiXi AI). Structured learning for the digital age.
|
||||
</p>
|
||||
<div class="flex gap-6 font-manrope text-xs text-slate-500">
|
||||
<a class="hover:text-tech-blue underline-offset-4 hover:underline transition-colors" href="#">隐私政策</a>
|
||||
<a class="hover:text-tech-blue underline-offset-4 hover:underline transition-colors" href="#">服务条款</a>
|
||||
<a class="hover:text-tech-blue underline-offset-4 hover:underline transition-colors" href="#">关于我们</a>
|
||||
<a class="hover:text-tech-blue underline-offset-4 hover:underline transition-colors" href="#">联系支持</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
// Simple intersection observer for scroll animations
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1 });
|
||||
|
||||
document.querySelectorAll('.animate-on-scroll').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
BIN
ZhiXi_Web/landing/screen.png
Normal file
BIN
ZhiXi_Web/landing/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 200 KiB |
137
ZhiXi_Web/luminous_clarity/DESIGN.md
Normal file
137
ZhiXi_Web/luminous_clarity/DESIGN.md
Normal file
@ -0,0 +1,137 @@
|
||||
---
|
||||
name: Luminous Clarity
|
||||
colors:
|
||||
surface: '#faf9ff'
|
||||
surface-dim: '#d2daf1'
|
||||
surface-bright: '#faf9ff'
|
||||
surface-container-lowest: '#ffffff'
|
||||
surface-container-low: '#f1f3ff'
|
||||
surface-container: '#e9edff'
|
||||
surface-container-high: '#e1e8ff'
|
||||
surface-container-highest: '#dbe2fa'
|
||||
on-surface: '#131b2c'
|
||||
on-surface-variant: '#434654'
|
||||
inverse-surface: '#283042'
|
||||
inverse-on-surface: '#edf0ff'
|
||||
outline: '#737686'
|
||||
outline-variant: '#c3c5d7'
|
||||
surface-tint: '#1a53d6'
|
||||
primary: '#1550d3'
|
||||
on-primary: '#ffffff'
|
||||
primary-container: '#3c6bed'
|
||||
on-primary-container: '#fffbff'
|
||||
inverse-primary: '#b5c4ff'
|
||||
secondary: '#583dde'
|
||||
on-secondary: '#ffffff'
|
||||
secondary-container: '#715af8'
|
||||
on-secondary-container: '#fffbff'
|
||||
tertiary: '#595c60'
|
||||
on-tertiary: '#ffffff'
|
||||
tertiary-container: '#727578'
|
||||
on-tertiary-container: '#fcfcff'
|
||||
error: '#ba1a1a'
|
||||
on-error: '#ffffff'
|
||||
error-container: '#ffdad6'
|
||||
on-error-container: '#93000a'
|
||||
primary-fixed: '#dce1ff'
|
||||
primary-fixed-dim: '#b5c4ff'
|
||||
on-primary-fixed: '#00164d'
|
||||
on-primary-fixed-variant: '#003cad'
|
||||
secondary-fixed: '#e5deff'
|
||||
secondary-fixed-dim: '#c8bfff'
|
||||
on-secondary-fixed: '#190064'
|
||||
on-secondary-fixed-variant: '#421dc9'
|
||||
tertiary-fixed: '#e0e3e6'
|
||||
tertiary-fixed-dim: '#c4c7ca'
|
||||
on-tertiary-fixed: '#181c1f'
|
||||
on-tertiary-fixed-variant: '#44474a'
|
||||
background: '#faf9ff'
|
||||
on-background: '#131b2c'
|
||||
surface-variant: '#dbe2fa'
|
||||
typography:
|
||||
display-xl:
|
||||
fontFamily: Manrope
|
||||
fontSize: 64px
|
||||
fontWeight: '800'
|
||||
lineHeight: '1.1'
|
||||
letterSpacing: -0.02em
|
||||
headline-lg:
|
||||
fontFamily: Manrope
|
||||
fontSize: 40px
|
||||
fontWeight: '700'
|
||||
lineHeight: '1.2'
|
||||
letterSpacing: -0.01em
|
||||
headline-md:
|
||||
fontFamily: Manrope
|
||||
fontSize: 28px
|
||||
fontWeight: '600'
|
||||
lineHeight: '1.3'
|
||||
body-lg:
|
||||
fontFamily: Manrope
|
||||
fontSize: 18px
|
||||
fontWeight: '400'
|
||||
lineHeight: '1.6'
|
||||
body-base:
|
||||
fontFamily: Manrope
|
||||
fontSize: 16px
|
||||
fontWeight: '400'
|
||||
lineHeight: '1.6'
|
||||
label-sm:
|
||||
fontFamily: Inter
|
||||
fontSize: 13px
|
||||
fontWeight: '600'
|
||||
lineHeight: '1'
|
||||
letterSpacing: 0.05em
|
||||
rounded:
|
||||
sm: 0.25rem
|
||||
DEFAULT: 0.5rem
|
||||
md: 0.75rem
|
||||
lg: 1rem
|
||||
xl: 1.5rem
|
||||
full: 9999px
|
||||
spacing:
|
||||
unit: 8px
|
||||
container-max: 1200px
|
||||
gutter: 24px
|
||||
section-padding: 120px
|
||||
card-padding: 32px
|
||||
---
|
||||
|
||||
## Brand & Style
|
||||
The design system is anchored in the concept of "Intellectual Serenity." It aims to evoke the feeling of a focused, high-end study environment—quiet, organized, and filled with natural light. The target audience consists of lifelong learners and professionals who value structured knowledge over chaotic information.
|
||||
|
||||
The visual style is a fusion of **Apple-inspired Minimalism** and **Glassmorphism**. It prioritizes extreme legibility and breathability, using negative space not just as a gap, but as a structural element that reduces cognitive load. The aesthetic avoids the "aggressive" tropes of AI (heavy glows and dark modes) in favor of a "Calm Tech" approach that feels like a premium productivity tool rather than a futuristic novelty.
|
||||
|
||||
## Colors
|
||||
The color palette uses a "High-Key" approach. The primary **Calm Technology Blue** serves as the anchor for interactive elements, while the **Subtle Blue-Purple** accent is reserved for AI-assisted features and high-value highlights.
|
||||
|
||||
Backgrounds transition between pure white and a soft blue-white to define different content zones without needing heavy borders. Text utilizes a Deep Navy rather than pure black to maintain a softer, more premium contrast ratio that is easier on the eyes during long learning sessions.
|
||||
|
||||
## Typography
|
||||
This design system employs **Manrope** for its geometric yet warm characteristics, echoing the polished look of high-end consumer tech landing pages. For Chinese typesetting, pair this with a high-quality, weighted Sans-Serif (like PingFang SC) using optical kerning.
|
||||
|
||||
The hierarchy is dramatic; large display headings create an editorial feel, while body text maintains generous line-heights to ensure the "structured learning" content remains approachable and digestible.
|
||||
|
||||
## Layout & Spacing
|
||||
The layout follows a **Fixed Grid** philosophy for desktop (12 columns) to maintain the "launch page" precision, transitioning to a fluid model for mobile.
|
||||
|
||||
Spacing is intentionally oversized. Sections should be separated by significant vertical gaps (120px+) to allow the user's mind to reset between concepts. Within components, use a consistent 8px base grid. Content should be centered with wide margins, creating a "gallery" feel where every piece of information feels curated and important.
|
||||
|
||||
## Elevation & Depth
|
||||
Depth is created through **Glassmorphism** and **Ambient Shadows** rather than traditional layers.
|
||||
- **Surface Level 0:** The soft blue-white canvas (#F6F8FC).
|
||||
- **Surface Level 1 (Floating Cards):** Pure white background with a very soft, high-blur shadow (0px 20px 40px rgba(18, 26, 43, 0.04)).
|
||||
- **Surface Level 2 (Glass Overlays):** Semi-transparent white (rgba(255, 255, 255, 0.7)) with a 20px backdrop-blur and a subtle 1px white border.
|
||||
|
||||
Incorporate a subtle geometric dot-grid pattern in the background of Level 0 to provide a "blueprint" or "structured" feel to the learning environment.
|
||||
|
||||
## Shapes
|
||||
The shape language is strictly "iOS-style" squircle-adjacent. Use a base radius of 16px (1rem) for standard components and 24px-32px for large containers. This high level of roundedness removes "visual sharpness," reinforcing the calm and friendly nature of the AI assistant. Interactive elements like buttons should feel tactile and "pill-like" when small, or softly rectangular when large.
|
||||
|
||||
## Components
|
||||
- **Primary Buttons:** Use the accent gradient with white text. Apply a subtle lift effect (shadow increases) on hover.
|
||||
- **Glass Cards:** Used for "Learning Modules." Feature a 1px white inner stroke to catch the light, mimicking physical glass.
|
||||
- **AI Input Field:** A floating, pill-shaped bar with a soft inner shadow and a subtle blue-purple glow when focused, signaling "AI Activity."
|
||||
- **Progress Indicators:** Use thin, elegant lines with rounded caps. The "filled" state should use the primary blue.
|
||||
- **Micro-interactions:** Elements should fade and slide upward 10px when appearing, mimicking the smooth motion of a premium OS.
|
||||
- **Chips/Tags:** Small, semi-transparent blue fills with Deep Navy text, used for categorizing learning topics.
|
||||
443
ZhiXi_Web/philosophy/code.html
Normal file
443
ZhiXi_Web/philosophy/code.html
Normal file
@ -0,0 +1,443 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="zh-CN"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>知习 AI - 产品理念</title>
|
||||
<!-- Google Fonts: Manrope & Inter -->
|
||||
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
||||
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<!-- Material Symbols -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<!-- Tailwind Config -->
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"primary-fixed": "#dce1ff",
|
||||
"surface-container-high": "#e1e8ff",
|
||||
"on-error": "#ffffff",
|
||||
"primary-container": "#3c6bed",
|
||||
"inverse-on-surface": "#edf0ff",
|
||||
"inverse-surface": "#283042",
|
||||
"on-surface-variant": "#434654",
|
||||
"secondary-fixed-dim": "#c8bfff",
|
||||
"secondary-fixed": "#e5deff",
|
||||
"surface-variant": "#dbe2fa",
|
||||
"error-container": "#ffdad6",
|
||||
"error": "#ba1a1a",
|
||||
"on-primary": "#ffffff",
|
||||
"on-surface": "#131b2c",
|
||||
"primary-fixed-dim": "#b5c4ff",
|
||||
"tertiary-fixed-dim": "#c4c7ca",
|
||||
"tertiary-container": "#727578",
|
||||
"background": "#faf9ff",
|
||||
"on-tertiary-fixed-variant": "#44474a",
|
||||
"surface-container-low": "#f1f3ff",
|
||||
"on-tertiary-fixed": "#181c1f",
|
||||
"inverse-primary": "#b5c4ff",
|
||||
"outline-variant": "#c3c5d7",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary-fixed": "#190064",
|
||||
"surface-bright": "#faf9ff",
|
||||
"surface-container": "#e9edff",
|
||||
"on-primary-container": "#fffbff",
|
||||
"on-secondary-fixed-variant": "#421dc9",
|
||||
"on-secondary-container": "#fffbff",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-container-highest": "#dbe2fa",
|
||||
"on-primary-fixed-variant": "#003cad",
|
||||
"secondary-container": "#715af8",
|
||||
"secondary": "#583dde",
|
||||
"surface": "#faf9ff",
|
||||
"primary": "#1550d3",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary-fixed": "#e0e3e6",
|
||||
"on-tertiary-container": "#fcfcff",
|
||||
"on-background": "#131b2c",
|
||||
"tertiary": "#595c60",
|
||||
"on-primary-fixed": "#00164d",
|
||||
"surface-dim": "#d2daf1",
|
||||
"outline": "#737686",
|
||||
"surface-tint": "#1a53d6",
|
||||
"on-secondary": "#ffffff"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"section-padding": "120px",
|
||||
"container-max": "1200px",
|
||||
"card-padding": "32px",
|
||||
"gutter": "24px",
|
||||
"unit": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"display-xl": ["Manrope"],
|
||||
"body-lg": ["Manrope"],
|
||||
"body-base": ["Manrope"],
|
||||
"label-sm": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-md": ["28px", { "lineHeight": "1.3", "fontWeight": "600" }],
|
||||
"headline-lg": ["40px", { "lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "700" }],
|
||||
"display-xl": ["64px", { "lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "800" }],
|
||||
"body-lg": ["18px", { "lineHeight": "1.6", "fontWeight": "400" }],
|
||||
"body-base": ["16px", { "lineHeight": "1.6", "fontWeight": "400" }],
|
||||
"label-sm": ["13px", { "lineHeight": "1", "letterSpacing": "0.05em", "fontWeight": "600" }]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
/* Ambient Blueprint Grid Pattern */
|
||||
.bg-blueprint {
|
||||
background-image: radial-gradient(var(--tw-colors-outline-variant) 1px, transparent 1px);
|
||||
background-size: 32px 32px;
|
||||
background-position: -1px -1px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* Glassmorphism Utilities */
|
||||
.glass-panel {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 20px 40px rgba(18, 26, 43, 0.04);
|
||||
}
|
||||
|
||||
/* Ambient Glow */
|
||||
.ambient-glow {
|
||||
position: absolute;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, var(--tw-colors-primary-fixed) 0%, transparent 70%);
|
||||
opacity: 0.5;
|
||||
filter: blur(80px);
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Material Icons setup */
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.icon-fill {
|
||||
font-variation-settings: 'FILL' 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body-base antialiased relative min-h-screen">
|
||||
<!-- Global Blueprint Background -->
|
||||
<div class="fixed inset-0 bg-blueprint pointer-events-none z-0"></div>
|
||||
<!-- 1. TopAppBar (Shared Component Implementation) -->
|
||||
<!-- Applying explicit style_ keys from JSON alongside layout requirements -->
|
||||
<nav class="bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl fixed top-0 w-full z-50 border-b border-white/20 dark:border-slate-800/50 shadow-[0_20px_40px_rgba(18,26,43,0.04)]">
|
||||
<div class="max-w-7xl mx-auto px-8 h-20 flex items-center justify-between">
|
||||
<!-- Brand Logo -->
|
||||
<div class="text-xl font-bold tracking-tighter text-slate-900 dark:text-white flex items-center gap-2">
|
||||
<span class="material-symbols-outlined icon-fill text-blue-600 dark:text-blue-400">psychology</span>
|
||||
知习 AI
|
||||
</div>
|
||||
<!-- Navigation Links -->
|
||||
<div class="hidden md:flex items-center gap-8 font-manrope tracking-tight text-sm font-medium">
|
||||
<!-- Inactive Tab -->
|
||||
<a class="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 transition-colors" href="#">
|
||||
首页
|
||||
</a>
|
||||
<!-- Inactive Tab -->
|
||||
<a class="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 transition-colors" href="#">
|
||||
产品
|
||||
</a>
|
||||
<!-- Active Tab (Based on Philosophy Page Context) -->
|
||||
<a class="text-blue-600 dark:text-blue-400 font-semibold border-b-2 border-blue-600 pb-1" href="#">
|
||||
理念
|
||||
</a>
|
||||
</div>
|
||||
<!-- Trailing Action -->
|
||||
<button class="bg-gradient-to-r from-blue-600 to-blue-500 text-white px-6 py-2.5 rounded-full font-label-sm hover:opacity-80 transition-all duration-300 scale-95 duration-200 ease-out shadow-md">
|
||||
等待名单
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- 2. Hero Section: The Knowledge Path -->
|
||||
<header class="relative pt-[200px] pb-section-padding z-10 flex flex-col items-center justify-center text-center px-gutter overflow-hidden">
|
||||
<div class="ambient-glow top-[10%] left-1/2 -translate-x-1/2"></div>
|
||||
<div class="max-w-4xl mx-auto space-y-6">
|
||||
<h1 class="font-display-xl text-on-surface text-balance">
|
||||
我们不想让 AI 帮你看更多，<br/>而是帮你真正学会。
|
||||
</h1>
|
||||
<p class="font-body-lg text-on-surface-variant max-w-2xl mx-auto">
|
||||
Intellectual Serenity for Lifelong Learners. Build your knowledge architecture, not just a digital hoarding space. A quiet environment for deep understanding.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Cinematic Abstract Visual (Image Integration) -->
|
||||
<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">
|
||||
<img alt="" class="w-full h-full object-cover mix-blend-multiply opacity-90" data-alt="A cinematic, abstract 3D rendering representing a 'Knowledge Path' within a pristine, light-mode environment. A glowing, soft-blue digital track winds smoothly forward, flanked by floating, translucent glass fragments and elegant geometric shapes that symbolize structured information. The background features a subtle, breathable dot-grid pattern and high-key, airy lighting. The overall color palette is dominated by pure whites, serene pale blues, and soft shadows, embodying an Apple-inspired minimalist aesthetic and a calm, intellectual atmosphere." src="https://lh3.googleusercontent.com/aida/ADBb0uiz5ALBcopzHW6YiPJIDzON9d-GOLgDERcajQ5kK6yovNdiJMCmpuZuNlk2C-YswHpOGuS9QyUcXlhEDMo3ciIB-XsCDSeZR93nLEqTGzbBvsjg2oWn5KcH_pkkNe3q_XmhPLokaIzjt-5jnueWgsaYphhUsTmsce36ow9bTQwh3MksP4gKzioKsM5ZrIXXTjFpkDBH1JyvdKZ7hXd7gLYcZEHfCA2wy1QkKFIHnUJzZswW2oTYXSoRlSz65APtSrlIErBY7T9Kqg"/>
|
||||
<!-- Inner Light Overlay to enhance the ethereal feel -->
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-surface-container-lowest/80 to-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- 3. Contrast Narrative Section -->
|
||||
<section class="py-section-padding z-10 relative px-gutter max-w-container-max mx-auto">
|
||||
<div class="text-center mb-24">
|
||||
<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>
|
||||
<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> 收藏
|
||||
</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> 划线
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<span class="font-headline-md text-on-surface font-bold text-primary">复习</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 4. Core Learning Loop Section -->
|
||||
<section class="py-section-padding z-10 relative bg-surface-container-low/50">
|
||||
<div class="max-w-container-max mx-auto px-gutter text-center">
|
||||
<h2 class="font-headline-lg text-on-surface mb-24">真正的学习，是一个闭环。</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>
|
||||
<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_60s_linear_infinite] opacity-50 z-0"></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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 5. AI Feedback System Section (Immersive UI Mockup) -->
|
||||
<section class="py-section-padding z-10 relative px-gutter">
|
||||
<div class="max-w-4xl mx-auto text-center mb-16">
|
||||
<h2 class="font-headline-lg text-on-surface">AI 不应该只是总结工具，<br/>而应该成为学习过程里的反馈系统。</h2>
|
||||
</div>
|
||||
<!-- UI Mockup Canvas -->
|
||||
<div class="max-w-[1000px] mx-auto bg-surface-container-lowest rounded-2xl shadow-[0_30px_60px_rgba(18,26,43,0.08)] border border-white/80 overflow-hidden flex flex-col md:flex-row relative">
|
||||
<!-- Sidebar/Context -->
|
||||
<div class="w-full md:w-64 bg-surface-container-low border-r border-outline-variant/30 p-6 flex flex-col gap-6">
|
||||
<div class="font-label-sm text-on-surface-variant uppercase tracking-wider">Analysis Report</div>
|
||||
<div class="space-y-4">
|
||||
<div class="p-3 rounded-lg bg-surface-container-highest/50 cursor-pointer border border-outline-variant/20">
|
||||
<div class="text-sm font-semibold text-on-surface">《查拉图斯特拉如是说》笔记</div>
|
||||
<div class="text-xs text-on-surface-variant mt-1">2小时前分析</div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg hover:bg-surface-container-highest/30 cursor-pointer transition-colors text-on-surface-variant">
|
||||
<div class="text-sm">系统思考基础模型</div>
|
||||
<div class="text-xs mt-1">昨天</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Analysis Area -->
|
||||
<div class="flex-1 p-10 bg-white relative">
|
||||
<!-- Top Status -->
|
||||
<div class="flex justify-between items-end border-b border-outline-variant/20 pb-6 mb-8">
|
||||
<div>
|
||||
<h3 class="font-headline-md text-on-surface">概念掌握度评估</h3>
|
||||
<p class="text-sm text-on-surface-variant mt-1">基于您的复述与提问记录生成</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-4xl font-light text-primary">84<span class="text-xl">%</span></div>
|
||||
<div class="text-xs font-semibold text-on-surface-variant uppercase">综合理解率</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Metrics Grid -->
|
||||
<div class="grid grid-cols-2 gap-8 mb-10">
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-2">
|
||||
<span class="text-on-surface font-medium">核心逻辑自洽性</span>
|
||||
<span class="text-on-surface-variant">92%</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-surface-container-highest rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary rounded-full w-[92%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-2">
|
||||
<span class="text-on-surface font-medium">边缘概念连结</span>
|
||||
<span class="text-on-surface-variant">65%</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-surface-container-highest rounded-full overflow-hidden">
|
||||
<div class="h-full bg-secondary-container rounded-full w-[65%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- AI Insight Card -->
|
||||
<div class="bg-primary-fixed/30 border border-primary-fixed-dim/50 rounded-xl p-6 flex gap-4">
|
||||
<span class="material-symbols-outlined text-primary mt-1">lightbulb</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-on-surface mb-2">反馈与建议</h4>
|
||||
<p class="text-sm text-on-surface-variant leading-relaxed">
|
||||
您对“超人”概念的阐述非常清晰，但在将其与“永恒轮回”理论结合时存在逻辑跳跃。建议复习第三章节，并尝试用自己的话写一段连接这两个概念的短文。
|
||||
</p>
|
||||
<div class="mt-4 flex gap-2">
|
||||
<button class="px-4 py-1.5 bg-primary text-white rounded-full text-xs font-medium shadow-sm hover:opacity-90">生成复习卡片</button>
|
||||
<button class="px-4 py-1.5 bg-white border border-outline-variant text-on-surface rounded-full text-xs font-medium hover:bg-surface-container-low">查看原文出处</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 6. Principles Manifesto Section -->
|
||||
<section class="py-section-padding z-10 relative px-gutter max-w-4xl mx-auto">
|
||||
<h2 class="font-display-xl text-on-surface mb-16">知习 AI 的产品原则</h2>
|
||||
<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="flex-1">
|
||||
<h3 class="font-headline-md text-on-surface mb-3">少一点信息噪音，多一点学习反馈</h3>
|
||||
<p class="font-body-base text-on-surface-variant">信息爆炸的时代，缺的不是内容，而是对内容的深度加工。我们抑制推流，放大反馈，让每一次交互都指向认知升级。</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>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
<div class="border-t border-outline-variant"></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 7. Footer CTA Section -->
|
||||
<section class="py-[160px] z-10 relative px-gutter text-center">
|
||||
<h2 class="font-headline-lg text-on-surface max-w-2xl mx-auto mb-10">如果你也厌倦了“看过就算学过”，<br/>欢迎继续了解知习 AI。</h2>
|
||||
<div class="flex items-center justify-center gap-6">
|
||||
<button 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">
|
||||
查看产品
|
||||
</button>
|
||||
<button class="glass-panel text-on-surface px-8 py-4 rounded-full font-semibold hover:bg-white transition-colors duration-300">
|
||||
关注更新
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 8. Footer (Shared Component Implementation) -->
|
||||
<!-- Applying exact JSON instructions -->
|
||||
<footer class="bg-[#F6F8FC] dark:bg-slate-950 w-full py-20 border-t border-slate-200 dark:border-slate-800 fade-in transition-opacity">
|
||||
<div class="max-w-7xl mx-auto px-12 grid grid-cols-1 md:grid-cols-2 items-center gap-8">
|
||||
<!-- Left: Brand & Copyright -->
|
||||
<div class="flex flex-col gap-2 text-center md:text-left">
|
||||
<div class="text-lg font-black text-slate-900 dark:text-white flex items-center justify-center md:justify-start gap-2">
|
||||
<span class="material-symbols-outlined icon-fill text-blue-600 dark:text-blue-400">psychology</span>
|
||||
知习 AI
|
||||
</div>
|
||||
<p class="font-manrope text-xs tracking-wide uppercase font-semibold text-slate-400">
|
||||
© 2024 知习 AI. Intellectual Serenity for Lifelong Learners.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Right: Links -->
|
||||
<div class="flex flex-wrap justify-center md:justify-end gap-6 font-manrope text-xs tracking-wide uppercase font-semibold text-slate-400">
|
||||
<a class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="#">隐私政策</a>
|
||||
<a class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="#">服务条款</a>
|
||||
<a class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="#">联系我们</a>
|
||||
<a class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="#">关于我们</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
BIN
ZhiXi_Web/philosophy/screen.png
Normal file
BIN
ZhiXi_Web/philosophy/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
248
ZhiXi_Web/privacy/code.html
Normal file
248
ZhiXi_Web/privacy/code.html
Normal file
@ -0,0 +1,248 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="zh-CN"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>隐私政策 - 知习 AI</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
||||
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-family: 'Material Symbols Outlined', sans-serif;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"secondary-fixed-dim": "#c8bfff",
|
||||
"on-surface": "#131b2c",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-tertiary": "#ffffff",
|
||||
"primary-fixed": "#dce1ff",
|
||||
"on-tertiary-fixed-variant": "#44474a",
|
||||
"outline": "#737686",
|
||||
"on-primary-fixed-variant": "#003cad",
|
||||
"on-background": "#131b2c",
|
||||
"secondary-container": "#715af8",
|
||||
"tertiary-container": "#727578",
|
||||
"background": "#faf9ff",
|
||||
"inverse-on-surface": "#edf0ff",
|
||||
"surface-container-highest": "#dbe2fa",
|
||||
"inverse-surface": "#283042",
|
||||
"error": "#ba1a1a",
|
||||
"on-secondary-fixed": "#190064",
|
||||
"surface-variant": "#dbe2fa",
|
||||
"on-tertiary-fixed": "#181c1f",
|
||||
"primary-fixed-dim": "#b5c4ff",
|
||||
"on-surface-variant": "#434654",
|
||||
"on-primary-fixed": "#00164d",
|
||||
"primary": "#1550d3",
|
||||
"surface-tint": "#1a53d6",
|
||||
"tertiary-fixed-dim": "#c4c7ca",
|
||||
"tertiary": "#595c60",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-dim": "#d2daf1",
|
||||
"surface-container-low": "#f1f3ff",
|
||||
"secondary-fixed": "#e5deff",
|
||||
"on-primary": "#ffffff",
|
||||
"surface": "#faf9ff",
|
||||
"on-secondary-fixed-variant": "#421dc9",
|
||||
"surface-bright": "#faf9ff",
|
||||
"primary-container": "#3c6bed",
|
||||
"on-secondary-container": "#fffbff",
|
||||
"on-primary-container": "#fffbff",
|
||||
"on-error": "#ffffff",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"secondary": "#583dde",
|
||||
"inverse-primary": "#b5c4ff",
|
||||
"tertiary-fixed": "#e0e3e6",
|
||||
"surface-container-high": "#e1e8ff",
|
||||
"on-tertiary-container": "#fcfcff",
|
||||
"outline-variant": "#c3c5d7",
|
||||
"surface-container": "#e9edff",
|
||||
"on-error-container": "#93000a"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"section-padding": "120px",
|
||||
"unit": "8px",
|
||||
"container-max": "1200px",
|
||||
"gutter": "24px",
|
||||
"card-padding": "32px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg": ["Manrope"],
|
||||
"display-xl": ["Manrope"],
|
||||
"label-sm": ["Inter"],
|
||||
"body-lg": ["Manrope"],
|
||||
"body-base": ["Manrope"],
|
||||
"headline-md": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg": ["40px", { "lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "700" }],
|
||||
"display-xl": ["64px", { "lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "800" }],
|
||||
"label-sm": ["13px", { "lineHeight": "1", "letterSpacing": "0.05em", "fontWeight": "600" }],
|
||||
"body-lg": ["18px", { "lineHeight": "1.6", "fontWeight": "400" }],
|
||||
"body-base": ["16px", { "lineHeight": "1.6", "fontWeight": "400" }],
|
||||
"headline-md": ["28px", { "lineHeight": "1.3", "fontWeight": "600" }]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-background text-on-background min-h-screen relative font-body-base antialiased" style="background-image: radial-gradient(circle at 1px 1px, #d2daf1 1px, transparent 0); background-size: 24px 24px;">
|
||||
<!-- TopNavBar -->
|
||||
<!-- Suppressed TopNavBar due to Privacy Policy page intent (Content Canvas Priority) -->
|
||||
<!-- Hero Section -->
|
||||
<header class="pt-section-padding pb-20 px-gutter max-w-container-max mx-auto text-center">
|
||||
<h1 class="font-display-xl text-display-xl text-on-surface mb-6">隐私政策</h1>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-3xl mx-auto mb-8">我们重视你的学习数据和个人隐私。知习 AI 会尽可能清晰地说明我们收集什么、为什么收集，以及如何保护你的信息。</p>
|
||||
<div class="inline-block px-4 py-2 bg-surface-container-low rounded-full">
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider">最后更新：2026 年 5 月</span>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content -->
|
||||
<main class="max-w-container-max mx-auto px-gutter pb-section-padding">
|
||||
<div class="flex flex-col md:flex-row gap-16 relative">
|
||||
<!-- Sticky Sidebar (Table of Contents) -->
|
||||
<aside class="md:w-1/4 hidden md:block">
|
||||
<div class="sticky top-32">
|
||||
<nav class="flex flex-col gap-4 border-l border-outline-variant pl-6">
|
||||
<a class="font-label-sm text-label-sm text-primary transition-colors hover:text-primary-container" href="#section-1">我们收集的信息</a>
|
||||
<a class="font-label-sm text-label-sm text-on-surface-variant transition-colors hover:text-primary" href="#section-2">我们如何使用这些信息</a>
|
||||
<a class="font-label-sm text-label-sm text-on-surface-variant transition-colors hover:text-primary" href="#section-3">AI 服务相关说明</a>
|
||||
<a class="font-label-sm text-label-sm text-on-surface-variant transition-colors hover:text-primary" href="#section-4">我们如何保护数据</a>
|
||||
<a class="font-label-sm text-label-sm text-on-surface-variant transition-colors hover:text-primary" href="#section-5">第三方服务</a>
|
||||
<a class="font-label-sm text-label-sm text-on-surface-variant transition-colors hover:text-primary" href="#section-6">用户权利</a>
|
||||
<a class="font-label-sm text-label-sm text-on-surface-variant transition-colors hover:text-primary" href="#section-7">儿童隐私</a>
|
||||
<a class="font-label-sm text-label-sm text-on-surface-variant transition-colors hover:text-primary" href="#section-8">政策更新</a>
|
||||
<a class="font-label-sm text-label-sm text-on-surface-variant transition-colors hover:text-primary" href="#section-9">联系我们</a>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Policy Text -->
|
||||
<article class="md:w-3/4 max-w-3xl">
|
||||
<div class="space-y-16">
|
||||
<section id="section-1">
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface mb-6">我们收集的信息</h2>
|
||||
<p class="font-body-base text-body-base text-on-surface-variant mb-4">
|
||||
为了提供优质的学习体验，我们在您使用知习 AI 时收集以下类型的信息：
|
||||
</p>
|
||||
<ul class="list-disc pl-6 space-y-3 font-body-base text-body-base text-on-surface-variant">
|
||||
<li><strong class="text-on-surface">账户信息：</strong>包括您的姓名、电子邮件地址以及您在注册时提供的其他必要信息。</li>
|
||||
<li><strong class="text-on-surface">学习数据：</strong>您在平台上的学习记录、互动内容、笔记和进度，以帮助优化推荐和学习路径。</li>
|
||||
<li><strong class="text-on-surface">设备与日志信息：</strong>IP 地址、浏览器类型、设备标识符及操作日志，用于保障服务安全和改进技术性能。</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section id="section-2">
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface mb-6">我们如何使用这些信息</h2>
|
||||
<p class="font-body-base text-body-base text-on-surface-variant mb-4">
|
||||
我们收集的信息主要用于以下目的：
|
||||
</p>
|
||||
<ul class="list-disc pl-6 space-y-3 font-body-base text-body-base text-on-surface-variant">
|
||||
<li>提供、维护和改进知习 AI 的核心学习功能。</li>
|
||||
<li>通过 AI 分析您的学习习惯，提供个性化的内容推荐。</li>
|
||||
<li>发送重要的账户通知、服务更新及安全提醒。</li>
|
||||
<li>进行内部数据分析和研究，以提升产品体验。</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section id="section-3">
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface mb-6">AI 服务相关说明</h2>
|
||||
<div class="bg-surface-container-low rounded-xl p-card-padding border border-outline-variant/30">
|
||||
<p class="font-body-base text-body-base text-on-surface-variant">
|
||||
知习 AI 的核心在于人工智能辅助学习。您的部分互动数据可能会经过匿名化处理后，用于训练和优化我们的 AI 模型，以提供更精准的学习辅导。我们承诺，绝不使用包含可识别个人身份的信息进行模型训练。您可以随时在隐私设置中选择退出数据贡献计划。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section id="section-4">
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface mb-6">我们如何保护数据</h2>
|
||||
<p class="font-body-base text-body-base text-on-surface-variant">
|
||||
我们采用业界领先的安全标准，包括数据加密（传输和存储阶段）、严格的访问控制以及定期的安全审计，以保护您的个人信息免受未经授权的访问、使用或泄露。
|
||||
</p>
|
||||
</section>
|
||||
<section id="section-5">
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface mb-6">第三方服务</h2>
|
||||
<p class="font-body-base text-body-base text-on-surface-variant">
|
||||
我们可能会聘请第三方服务提供商协助我们提供服务（例如云存储、数据分析）。这些第三方仅在代表我们执行任务且遵守类似保密义务的前提下，才能访问您的个人信息。
|
||||
</p>
|
||||
</section>
|
||||
<section id="section-6">
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface mb-6">用户权利</h2>
|
||||
<p class="font-body-base text-body-base text-on-surface-variant mb-4">
|
||||
您对自己的个人信息拥有完全的控制权。您有权：
|
||||
</p>
|
||||
<ul class="list-disc pl-6 space-y-3 font-body-base text-body-base text-on-surface-variant">
|
||||
<li>访问、更正或更新您的账户信息。</li>
|
||||
<li>请求删除您的账户及相关个人数据。</li>
|
||||
<li>限制或反对我们处理您的个人信息。</li>
|
||||
<li>获取您数据的结构化副本。</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section id="section-7">
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface mb-6">儿童隐私</h2>
|
||||
<p class="font-body-base text-body-base text-on-surface-variant">
|
||||
知习 AI 并非专为未满 13 岁的儿童设计。我们不会有意收集未满 13 岁儿童的个人信息。如果我们发现无意中收集了此类信息，将采取措施尽快删除。
|
||||
</p>
|
||||
</section>
|
||||
<section id="section-8">
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface mb-6">政策更新</h2>
|
||||
<p class="font-body-base text-body-base text-on-surface-variant">
|
||||
我们可能会不时更新本隐私政策。任何重大变更都将通过电子邮件或平台通知等方式提前告知。继续使用我们的服务即表示您接受更新后的政策。
|
||||
</p>
|
||||
</section>
|
||||
<section id="section-9">
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface mb-6">联系我们</h2>
|
||||
<p class="font-body-base text-body-base text-on-surface-variant">
|
||||
如果您对本隐私政策或您的数据有任何疑问，请通过以下方式联系我们：privacy@zhixiai.com。
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
<!-- CTA Section -->
|
||||
<section class="max-w-container-max mx-auto px-gutter pb-section-padding">
|
||||
<div class="bg-surface-container rounded-2xl p-16 text-center shadow-[0px_20px_40px_rgba(18,26,43,0.04)]">
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-4">还有隐私相关问题？</h3>
|
||||
<p class="font-body-base text-body-base text-on-surface-variant mb-8 max-w-lg mx-auto">我们的支持团队随时准备解答您关于数据安全和隐私保护的任何疑问。</p>
|
||||
<button class="bg-primary text-on-primary font-label-sm text-label-sm px-8 py-4 rounded-full hover:shadow-[0px_10px_20px_rgba(21,80,211,0.2)] transition-all duration-300">联系支持</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Footer -->
|
||||
<footer class="w-full py-20 border-t border-slate-200 dark:border-slate-800 bg-[#F6F8FC] dark:bg-slate-950 mt-section-padding">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center px-12 max-w-7xl mx-auto gap-8 hover:opacity-80 transition-all duration-300">
|
||||
<div class="text-lg font-semibold text-slate-400 font-['Manrope'] tracking-tighter">知习 AI</div>
|
||||
<div class="flex flex-wrap justify-center gap-6 font-['Manrope'] text-xs text-slate-500 dark:text-slate-400">
|
||||
<a class="text-[#4F7CFF] underline" href="#">Privacy Policy</a>
|
||||
<a class="text-slate-400 hover:text-slate-600 transition-colors" href="#">Terms of Service</a>
|
||||
<a class="text-slate-400 hover:text-slate-600 transition-colors" href="#">Cookie Settings</a>
|
||||
</div>
|
||||
<div class="font-['Manrope'] text-xs text-slate-500 dark:text-slate-400">© 2024 知习 AI. Intellectual Serenity.</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
BIN
ZhiXi_Web/privacy/screen.png
Normal file
BIN
ZhiXi_Web/privacy/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 258 KiB |
295
ZhiXi_Web/product/code.html
Normal file
295
ZhiXi_Web/product/code.html
Normal file
@ -0,0 +1,295 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="zh-CN"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>知习 AI - 更懂你，更会学</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"error-container": "#ffdad6",
|
||||
"tertiary": "#595c60",
|
||||
"primary-fixed-dim": "#b5c4ff",
|
||||
"background": "#faf9ff",
|
||||
"surface-dim": "#d2daf1",
|
||||
"on-tertiary-fixed": "#181c1f",
|
||||
"primary-fixed": "#dce1ff",
|
||||
"surface-container-low": "#f1f3ff",
|
||||
"on-secondary-fixed-variant": "#421dc9",
|
||||
"outline": "#737686",
|
||||
"surface-bright": "#faf9ff",
|
||||
"surface-container": "#e9edff",
|
||||
"secondary-fixed": "#e5deff",
|
||||
"surface-variant": "#dbe2fa",
|
||||
"surface-container-high": "#e1e8ff",
|
||||
"inverse-surface": "#283042",
|
||||
"primary-container": "#3c6bed",
|
||||
"surface-container-highest": "#dbe2fa",
|
||||
"primary": "#1550d3",
|
||||
"surface": "#faf9ff",
|
||||
"secondary": "#583dde",
|
||||
"on-primary-container": "#fffbff",
|
||||
"inverse-primary": "#b5c4ff",
|
||||
"on-secondary-container": "#fffbff",
|
||||
"surface-tint": "#1a53d6",
|
||||
"tertiary-container": "#727578",
|
||||
"on-background": "#131b2c",
|
||||
"on-secondary": "#ffffff",
|
||||
"outline-variant": "#c3c5d7",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary-fixed-dim": "#c4c7ca",
|
||||
"secondary-container": "#715af8",
|
||||
"on-primary": "#ffffff",
|
||||
"on-surface": "#131b2c",
|
||||
"on-secondary-fixed": "#190064",
|
||||
"inverse-on-surface": "#edf0ff",
|
||||
"tertiary-fixed": "#e0e3e6",
|
||||
"on-tertiary-fixed-variant": "#44474a",
|
||||
"on-primary-fixed-variant": "#003cad",
|
||||
"error": "#ba1a1a",
|
||||
"on-error-container": "#93000a",
|
||||
"secondary-fixed-dim": "#c8bfff",
|
||||
"on-surface-variant": "#434654",
|
||||
"on-primary-fixed": "#00164d",
|
||||
"on-tertiary-container": "#fcfcff",
|
||||
"on-error": "#ffffff"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter": "24px",
|
||||
"container-max": "1200px",
|
||||
"card-padding": "32px",
|
||||
"section-padding": "120px",
|
||||
"unit": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg": [
|
||||
"Manrope"
|
||||
],
|
||||
"label-sm": [
|
||||
"Inter"
|
||||
],
|
||||
"display-xl": [
|
||||
"Manrope"
|
||||
],
|
||||
"body-base": [
|
||||
"Manrope"
|
||||
],
|
||||
"body-lg": [
|
||||
"Manrope"
|
||||
],
|
||||
"headline-md": [
|
||||
"Manrope"
|
||||
]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg": [
|
||||
"40px",
|
||||
{
|
||||
"lineHeight": "1.2",
|
||||
"letterSpacing": "-0.01em",
|
||||
"fontWeight": "700"
|
||||
}
|
||||
],
|
||||
"label-sm": [
|
||||
"13px",
|
||||
{
|
||||
"lineHeight": "1",
|
||||
"letterSpacing": "0.05em",
|
||||
"fontWeight": "600"
|
||||
}
|
||||
],
|
||||
"display-xl": [
|
||||
"64px",
|
||||
{
|
||||
"lineHeight": "1.1",
|
||||
"letterSpacing": "-0.02em",
|
||||
"fontWeight": "800"
|
||||
}
|
||||
],
|
||||
"body-base": [
|
||||
"16px",
|
||||
{
|
||||
"lineHeight": "1.6",
|
||||
"fontWeight": "400"
|
||||
}
|
||||
],
|
||||
"body-lg": [
|
||||
"18px",
|
||||
{
|
||||
"lineHeight": "1.6",
|
||||
"fontWeight": "400"
|
||||
}
|
||||
],
|
||||
"headline-md": [
|
||||
"28px",
|
||||
{
|
||||
"lineHeight": "1.3",
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0px 20px 40px rgba(18, 26, 43, 0.04);
|
||||
}
|
||||
.dot-grid {
|
||||
background-image: radial-gradient(rgba(18, 26, 43, 0.05) 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, #1550d3, #583dde);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.bg-gradient-primary {
|
||||
background: linear-gradient(135deg, #1550d3, #583dde);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#F6F8FC] text-on-surface font-body-base antialiased relative min-h-screen selection:bg-primary-container selection:text-on-primary-container dot-grid">
|
||||
<!-- TopNavBar -->
|
||||
<nav class="fixed top-0 w-full z-50 border-b border-white/20 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl shadow-[0px_20px_40px_rgba(18,26,43,0.04)]">
|
||||
<div class="flex justify-between items-center max-w-7xl mx-auto px-8 h-20">
|
||||
<div class="text-xl font-bold tracking-tighter text-slate-900 dark:text-white flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||||
知习 AI
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-8 font-['Manrope'] text-sm tracking-tight font-medium">
|
||||
<a class="text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300 scale-95 active:scale-90 transition-transform" href="#">产品</a>
|
||||
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300 scale-95 active:scale-90 transition-transform" href="#">功能</a>
|
||||
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300 scale-95 active:scale-90 transition-transform" href="#">理念</a>
|
||||
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300 scale-95 active:scale-90 transition-transform" href="#">等待名单</a>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<button class="bg-gradient-primary text-on-primary font-label-sm text-label-sm px-6 py-2.5 rounded-full hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5">
|
||||
加入等待名单
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Hero Section -->
|
||||
<header class="pt-40 pb-section-padding px-gutter relative overflow-hidden">
|
||||
<div class="max-w-container-max mx-auto text-center relative z-10">
|
||||
<h1 class="font-display-xl text-display-xl text-on-surface mb-6 max-w-4xl mx-auto leading-tight">
|
||||
更懂你，<span class="text-gradient">更会学</span>
|
||||
</h1>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mx-auto mb-10 leading-relaxed">
|
||||
AI 驱动的系统化学习助手，把知识库、主动回忆、AI 分析和复习计划结合起来，帮你从"看过"变成"真正学会"。
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-20">
|
||||
<button class="w-full sm:w-auto bg-gradient-primary text-on-primary font-label-sm text-label-sm px-8 py-4 rounded-full hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
||||
加入等待名单
|
||||
</button>
|
||||
<button class="w-full sm:w-auto bg-white/50 backdrop-blur-md text-on-surface font-label-sm text-label-sm px-8 py-4 rounded-full border border-outline-variant hover:bg-white/80 transition-all duration-300">
|
||||
了解产品理念
|
||||
</button>
|
||||
</div>
|
||||
<div class="relative max-w-5xl mx-auto">
|
||||
<div class="absolute inset-0 bg-primary/10 blur-[100px] rounded-full"></div>
|
||||
<div class="relative glass-card rounded-[2rem] p-4 mx-auto overflow-hidden border border-white/60 shadow-2xl">
|
||||
<img alt="Product Interface Mockup" class="w-full h-auto rounded-xl shadow-sm object-cover max-h-[600px]" data-alt="A clean, highly realistic 3D mockup of a modern iOS application interface floating over a serene, light blue background. The app features layered glassmorphism cards showing learning tasks and AI feedback. The design is Apple-inspired, minimalist, with soft shadows and glowing accents in primary blue and purple. The overall mood is calm, focused, and intellectually rigorous." src="https://lh3.googleusercontent.com/aida-public/AB6AXuABIO0hqNMx47nzGMCqnM20f-oy378eGOwyO-sbkL1uPU_mUzuMkDEg6TdI_iMb_JQ57EF53skumy8ss29x8QXVx5TzCU-3_t2SIBN_5FyQQbA6H_7W26jP4NVZ5ro3VY4C-i4CfiaxEsjRgIoYsT7pAVwJB9FWNAEZV2nrtYiIlhNGobVsxQIxLK1cHC90tJ2M9O7fP5jaPHnY9gv9WRKGYtzXKZn-PAzxI34O5xZcrd9t4PB2qXfxJva3ouyeBpb_lmanIT6TNXu6"/>
|
||||
<!-- Floating UI Elements -->
|
||||
<div class="absolute top-10 -left-8 glass-card p-4 rounded-2xl shadow-xl hidden md:flex items-center gap-3 animate-[bounce_5s_infinite]">
|
||||
<div class="w-10 h-10 rounded-full bg-primary-container text-on-primary-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined">calendar_today</span>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<div class="font-label-sm text-label-sm text-on-surface">今日学习任务</div>
|
||||
<div class="text-xs text-on-surface-variant">3 个待复习</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-20 -right-8 glass-card p-4 rounded-2xl shadow-xl hidden md:flex items-center gap-3 animate-[bounce_6s_infinite_reverse]">
|
||||
<div class="w-10 h-10 rounded-full bg-secondary-container text-on-secondary-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined">analytics</span>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<div class="font-label-sm text-label-sm text-on-surface">AI 分析反馈</div>
|
||||
<div class="text-xs text-on-surface-variant">掌握度提升 15%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Pain Points -->
|
||||
<section class="py-section-padding px-gutter bg-surface-container-low">
|
||||
<div class="max-w-container-max mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="font-headline-lg text-headline-lg text-on-surface mb-4">很多学习，其实只是<span class="text-gradient">"看过"</span></h2>
|
||||
<p class="font-body-base text-body-base text-on-surface-variant">传统学习方式面临的挑战</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div class="glass-card rounded-2xl p-card-padding hover:-translate-y-1 transition-transform duration-300">
|
||||
<div class="w-12 h-12 rounded-xl bg-error-container text-on-error-container flex items-center justify-center mb-6">
|
||||
<span class="material-symbols-outlined">library_books</span>
|
||||
</div>
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-3">资料很多，但不知道先学什么</h3>
|
||||
<p class="font-body-base text-body-base text-on-surface-variant">信息过载导致无从下手，缺乏系统性的指引。</p>
|
||||
</div>
|
||||
<div class="glass-card rounded-2xl p-card-padding hover:-translate-y-1 transition-transform duration-300">
|
||||
<div class="w-12 h-12 rounded-xl bg-surface-variant text-on-surface-variant flex items-center justify-center mb-6">
|
||||
<span class="material-symbols-outlined">edit_note</span>
|
||||
</div>
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-3">笔记写了，却很少真正复习</h3>
|
||||
<p class="font-body-base text-body-base text-on-surface-variant">收藏即学习的错觉，遗忘曲线无人对抗。</p>
|
||||
</div>
|
||||
<div class="glass-card rounded-2xl p-card-padding hover:-translate-y-1 transition-transform duration-300">
|
||||
<div class="w-12 h-12 rounded-xl bg-primary-container text-on-primary-container flex items-center justify-center mb-6">
|
||||
<span class="material-symbols-outlined">record_voice_over</span>
|
||||
</div>
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-3">看懂了内容，却说不出来</h3>
|
||||
<p class="font-body-base text-body-base text-on-surface-variant">缺乏输出环节，知识停留在浅层认知。</p>
|
||||
</div>
|
||||
<div class="glass-card rounded-2xl p-card-padding hover:-translate-y-1 transition-transform duration-300">
|
||||
<div class="w-12 h-12 rounded-xl bg-secondary-container text-on-secondary-container flex items-center justify-center mb-6">
|
||||
<span class="material-symbols-outlined">feedback</span>
|
||||
</div>
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-3">没有及时反馈，不知道自己哪里薄弱</h3>
|
||||
<p class="font-body-base text-body-base text-on-surface-variant">盲目学习，无法进行针对性的强化训练。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Footer -->
|
||||
<footer class="w-full py-20 border-t border-slate-200 dark:border-slate-800 bg-[#F6F8FC] dark:bg-slate-950">
|
||||
<div class="max-w-7xl mx-auto px-8 grid grid-cols-1 md:grid-cols-2 items-center gap-8">
|
||||
<div>
|
||||
<div class="text-lg font-bold text-slate-900 dark:text-white mb-2 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||||
知习 AI
|
||||
</div>
|
||||
<div class="font-['Manrope'] text-sm text-slate-500 dark:text-slate-400">
|
||||
© 2024 Longde Technology. Intellectual Serenity for Lifelong Learners.
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-6 md:justify-end font-['Manrope'] text-sm">
|
||||
<a class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 underline-offset-4 hover:underline transition-colors" href="#">隐私政策</a>
|
||||
<a class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 underline-offset-4 hover:underline transition-colors" href="#">服务条款</a>
|
||||
<a class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 underline-offset-4 hover:underline transition-colors" href="#">关于我们</a>
|
||||
<a class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 underline-offset-4 hover:underline transition-colors" href="#">联系支持</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
BIN
ZhiXi_Web/product/screen.png
Normal file
BIN
ZhiXi_Web/product/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 440 KiB |
356
ZhiXi_Web/support/code.html
Normal file
356
ZhiXi_Web/support/code.html
Normal file
@ -0,0 +1,356 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="zh-CN"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Feedback & Support - 知习 AI</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-secondary-fixed-variant": "#421dc9",
|
||||
"primary-fixed": "#dce1ff",
|
||||
"on-tertiary-fixed-variant": "#44474a",
|
||||
"secondary-fixed": "#e5deff",
|
||||
"surface-tint": "#1a53d6",
|
||||
"secondary-container": "#715af8",
|
||||
"error": "#ba1a1a",
|
||||
"on-error-container": "#93000a",
|
||||
"on-tertiary-fixed": "#181c1f",
|
||||
"outline-variant": "#c3c5d7",
|
||||
"on-tertiary-container": "#fcfcff",
|
||||
"on-primary-fixed-variant": "#003cad",
|
||||
"tertiary": "#595c60",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-tertiary": "#ffffff",
|
||||
"background": "#faf9ff",
|
||||
"tertiary-fixed": "#e0e3e6",
|
||||
"on-surface-variant": "#434654",
|
||||
"inverse-on-surface": "#edf0ff",
|
||||
"inverse-surface": "#283042",
|
||||
"surface-container-low": "#f1f3ff",
|
||||
"on-surface": "#131b2c",
|
||||
"secondary-fixed-dim": "#c8bfff",
|
||||
"on-primary": "#ffffff",
|
||||
"on-primary-fixed": "#00164d",
|
||||
"surface-variant": "#dbe2fa",
|
||||
"surface-bright": "#faf9ff",
|
||||
"on-background": "#131b2c",
|
||||
"tertiary-container": "#727578",
|
||||
"surface-dim": "#d2daf1",
|
||||
"secondary": "#583dde",
|
||||
"on-error": "#ffffff",
|
||||
"on-primary-container": "#fffbff",
|
||||
"surface": "#faf9ff",
|
||||
"on-secondary-container": "#fffbff",
|
||||
"on-secondary": "#ffffff",
|
||||
"primary-container": "#3c6bed",
|
||||
"outline": "#737686",
|
||||
"error-container": "#ffdad6",
|
||||
"primary": "#1550d3",
|
||||
"on-secondary-fixed": "#190064",
|
||||
"tertiary-fixed-dim": "#c4c7ca",
|
||||
"surface-container-highest": "#dbe2fa",
|
||||
"surface-container-high": "#e1e8ff",
|
||||
"surface-container": "#e9edff",
|
||||
"primary-fixed-dim": "#b5c4ff",
|
||||
"inverse-primary": "#b5c4ff"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"container-max": "1200px",
|
||||
"unit": "8px",
|
||||
"section-padding": "120px",
|
||||
"card-padding": "32px",
|
||||
"gutter": "24px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg": [
|
||||
"Manrope"
|
||||
],
|
||||
"label-sm": [
|
||||
"Inter"
|
||||
],
|
||||
"headline-md": [
|
||||
"Manrope"
|
||||
],
|
||||
"display-xl": [
|
||||
"Manrope"
|
||||
],
|
||||
"body-lg": [
|
||||
"Manrope"
|
||||
],
|
||||
"body-base": [
|
||||
"Manrope"
|
||||
]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg": [
|
||||
"40px",
|
||||
{
|
||||
"lineHeight": "1.2",
|
||||
"letterSpacing": "-0.01em",
|
||||
"fontWeight": "700"
|
||||
}
|
||||
],
|
||||
"label-sm": [
|
||||
"13px",
|
||||
{
|
||||
"lineHeight": "1",
|
||||
"letterSpacing": "0.05em",
|
||||
"fontWeight": "600"
|
||||
}
|
||||
],
|
||||
"headline-md": [
|
||||
"28px",
|
||||
{
|
||||
"lineHeight": "1.3",
|
||||
"fontWeight": "600"
|
||||
}
|
||||
],
|
||||
"display-xl": [
|
||||
"64px",
|
||||
{
|
||||
"lineHeight": "1.1",
|
||||
"letterSpacing": "-0.02em",
|
||||
"fontWeight": "800"
|
||||
}
|
||||
],
|
||||
"body-lg": [
|
||||
"18px",
|
||||
{
|
||||
"lineHeight": "1.6",
|
||||
"fontWeight": "400"
|
||||
}
|
||||
],
|
||||
"body-base": [
|
||||
"16px",
|
||||
{
|
||||
"lineHeight": "1.6",
|
||||
"fontWeight": "400"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.glass-card {
|
||||
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);
|
||||
}
|
||||
.dot-grid {
|
||||
background-image: radial-gradient(circle at center, #cbd5e1 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background min-h-screen flex flex-col font-body-base antialiased relative">
|
||||
<!-- Blueprint Pattern Overlay -->
|
||||
<div class="fixed inset-0 dot-grid opacity-30 pointer-events-none z-[-1]"></div>
|
||||
<!-- TopNavBar -->
|
||||
<nav class="bg-white/70 backdrop-blur-2xl dark:bg-slate-900/70 text-blue-600 dark:text-blue-400 font-manrope tracking-tight text-sm font-medium fixed top-0 w-full z-50 border-b border-white/20 dark:border-slate-800/50 shadow-[0_20_40px_rgba(18,26,43,0.04)] ease-out scale-active:95">
|
||||
<div class="flex items-center justify-between px-8 h-20 max-w-screen-2xl mx-auto">
|
||||
<div class="text-xl font-extrabold tracking-tighter text-slate-900 dark:text-white">知习 AI</div>
|
||||
<div class="hidden md:flex items-center gap-8">
|
||||
<a class="text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100 hover:opacity-80 transition-all duration-300" href="#">Explore</a>
|
||||
<a class="text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100 hover:opacity-80 transition-all duration-300" href="#">Curriculum</a>
|
||||
<a class="text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100 hover:opacity-80 transition-all duration-300" href="#">Library</a>
|
||||
<a class="text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 pb-1 hover:opacity-80 transition-all duration-300" href="#">Support</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="hover:opacity-80 transition-all duration-300 text-slate-500 dark:text-slate-400">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="hover:opacity-80 transition-all duration-300 text-slate-500 dark:text-slate-400">
|
||||
<span class="material-symbols-outlined" data-icon="account_circle">account_circle</span>
|
||||
</button>
|
||||
<button class="bg-primary text-on-primary px-5 py-2.5 rounded-full text-sm font-semibold hover:opacity-80 transition-all duration-300 shadow-md">Get Started</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="flex-grow pt-[140px] pb-section-padding px-6">
|
||||
<!-- Hero Section -->
|
||||
<section class="max-w-container-max mx-auto mb-section-padding text-center relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-surface-container-low to-transparent opacity-50 rounded-[3rem] z-[-1] pointer-events-none transform -translate-y-12"></div>
|
||||
<h1 class="font-display-xl text-display-xl text-on-surface mb-6">反馈与支持</h1>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mx-auto mb-16 leading-relaxed">
|
||||
如果你在使用知习 AI 的过程中遇到问题，或者对产品有任何想法，欢迎告诉我们。每一条真实反馈，都会帮助产品变得更好。
|
||||
</p>
|
||||
<div class="relative w-full max-w-lg mx-auto aspect-square mb-12">
|
||||
<img alt="A soft, ethereal 3D rendering of a translucent message bubble floating in a bright, minimalist studio environment. The light is diffused and high-key, casting very soft shadows on a pristine white floor. Subtle hints of calm blue and purple are visible within the glass-like structure of the bubble, reflecting the 'Intellectual Serenity' aesthetic. The mood is calm, modern, and trustworthy." class="w-full h-full object-cover rounded-[2rem] shadow-[0_20px_60px_rgba(18,26,43,0.08)]" data-alt="A soft, ethereal 3D rendering of a translucent message bubble floating in a bright, minimalist studio environment. The light is diffused and high-key, casting very soft shadows on a pristine white floor. Subtle hints of calm blue and purple are visible within the glass-like structure of the bubble, reflecting the 'Intellectual Serenity' aesthetic. The mood is calm, modern, and trustworthy." src="https://lh3.googleusercontent.com/aida/ADBb0uiz5ALBcopzHW6YiPJIDzON9d-GOLgDERcajQ5kK6yovNdiJMCmpuZuNlk2C-YswHpOGuS9QyUcXlhEDMo3ciIB-XsCDSeZR93nLEqTGzbBvsjg2oWn5KcH_pkkNe3q_XmhPLokaIzjt-5jnueWgsaYphhUsTmsce36ow9bTQwh3MksP4gKzioKsM5ZrIXXTjFpkDBH1JyvdKZ7hXd7gLYcZEHfCA2wy1QkKFIHnUJzZswW2oTYXSoRlSz65APtSrlIErBY7T9Kqg"/>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Form & Contact Layout -->
|
||||
<section class="max-w-[1000px] mx-auto grid grid-cols-1 lg:grid-cols-12 gap-12 items-start mb-section-padding">
|
||||
<!-- Feedback Form -->
|
||||
<div class="lg:col-span-8 glass-card rounded-[1.5rem] p-8 md:p-10 shadow-[0_20px_40px_rgba(18,26,43,0.04)]">
|
||||
<form class="space-y-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Name -->
|
||||
<div>
|
||||
<label class="block font-label-sm text-label-sm text-on-surface-variant mb-2" for="name">你的称呼 <span class="text-tertiary font-normal">(可选)</span></label>
|
||||
<input class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg px-4 py-3 font-body-base text-on-surface focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200 outline-none placeholder:text-outline" id="name" placeholder="例如: 张三" type="text"/>
|
||||
</div>
|
||||
<!-- Email -->
|
||||
<div>
|
||||
<label class="block font-label-sm text-label-sm text-on-surface-variant mb-2" for="email">电子邮箱 <span class="text-error">*</span></label>
|
||||
<input class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg px-4 py-3 font-body-base text-on-surface focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200 outline-none placeholder:text-outline" id="email" placeholder="your@email.com" required="" type="email"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Type -->
|
||||
<div>
|
||||
<label class="block font-label-sm text-label-sm text-on-surface-variant mb-2" for="type">反馈类型 <span class="text-error">*</span></label>
|
||||
<select class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg px-4 py-3 font-body-base text-on-surface focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200 outline-none appearance-none" id="type" required="">
|
||||
<option disabled="" selected="" value="">请选择反馈类型</option>
|
||||
<option value="功能建议">功能建议</option>
|
||||
<option value="问题反馈">问题反馈</option>
|
||||
<option value="使用体验">使用体验</option>
|
||||
<option value="隐私与账号">隐私与账号</option>
|
||||
<option value="其他">其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Message -->
|
||||
<div>
|
||||
<label class="block font-label-sm text-label-sm text-on-surface-variant mb-2" for="message">反馈内容 <span class="text-error">*</span></label>
|
||||
<textarea class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg px-4 py-3 font-body-base text-on-surface focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200 outline-none placeholder:text-outline resize-y" id="message" placeholder="详细描述你遇到的问题或建议..." required="" rows="5"></textarea>
|
||||
</div>
|
||||
<!-- Device -->
|
||||
<div>
|
||||
<label class="block font-label-sm text-label-sm text-on-surface-variant mb-3">使用设备</label>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<label class="cursor-pointer">
|
||||
<input class="peer sr-only" name="device" type="radio" value="iPhone"/>
|
||||
<div class="px-5 py-2 rounded-full border border-outline-variant text-on-surface-variant font-body-base text-sm hover:bg-surface-container-low peer-checked:bg-primary-container peer-checked:text-on-primary-container peer-checked:border-primary-container transition-all">iPhone</div>
|
||||
</label>
|
||||
<label class="cursor-pointer">
|
||||
<input class="peer sr-only" name="device" type="radio" value="iPad"/>
|
||||
<div class="px-5 py-2 rounded-full border border-outline-variant text-on-surface-variant font-body-base text-sm hover:bg-surface-container-low peer-checked:bg-primary-container peer-checked:text-on-primary-container peer-checked:border-primary-container transition-all">iPad</div>
|
||||
</label>
|
||||
<label class="cursor-pointer">
|
||||
<input class="peer sr-only" name="device" type="radio" value="Mac"/>
|
||||
<div class="px-5 py-2 rounded-full border border-outline-variant text-on-surface-variant font-body-base text-sm hover:bg-surface-container-low peer-checked:bg-primary-container peer-checked:text-on-primary-container peer-checked:border-primary-container transition-all">Mac</div>
|
||||
</label>
|
||||
<label class="cursor-pointer">
|
||||
<input class="peer sr-only" name="device" type="radio" value="Web"/>
|
||||
<div class="px-5 py-2 rounded-full border border-outline-variant text-on-surface-variant font-body-base text-sm hover:bg-surface-container-low peer-checked:bg-primary-container peer-checked:text-on-primary-container peer-checked:border-primary-container transition-all">Web</div>
|
||||
</label>
|
||||
<label class="cursor-pointer">
|
||||
<input class="peer sr-only" name="device" type="radio" value="其他"/>
|
||||
<div class="px-5 py-2 rounded-full border border-outline-variant text-on-surface-variant font-body-base text-sm hover:bg-surface-container-low peer-checked:bg-primary-container peer-checked:text-on-primary-container peer-checked:border-primary-container transition-all">其他</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Submit -->
|
||||
<div class="pt-4">
|
||||
<button class="w-full bg-gradient-to-r from-primary to-secondary text-on-primary font-label-sm text-label-sm py-4 rounded-xl hover:shadow-[0_10px_20px_rgba(21,80,211,0.2)] transition-all duration-300 transform hover:-translate-y-0.5" type="submit">
|
||||
提交反馈
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Contact Info -->
|
||||
<div class="lg:col-span-4 space-y-6">
|
||||
<div class="bg-surface-container-lowest rounded-[1.5rem] p-8 shadow-[0_20px_40px_rgba(18,26,43,0.04)] border border-outline-variant/30">
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-6">其他联系方式</h3>
|
||||
<ul class="space-y-6">
|
||||
<li class="flex items-start gap-4">
|
||||
<span class="material-symbols-outlined text-primary mt-1" data-icon="mail">mail</span>
|
||||
<div>
|
||||
<p class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider mb-1">邮箱</p>
|
||||
<a class="font-body-base text-body-base text-on-surface hover:text-primary transition-colors" href="mailto:support@longde.cloud">support@longde.cloud</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<span class="material-symbols-outlined text-primary mt-1" data-icon="language">language</span>
|
||||
<div>
|
||||
<p class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider mb-1">官网</p>
|
||||
<a class="font-body-base text-body-base text-on-surface hover:text-primary transition-colors" href="https://longde.cloud" target="_blank">longde.cloud</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<span class="material-symbols-outlined text-primary mt-1" data-icon="update">update</span>
|
||||
<div>
|
||||
<p class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider mb-1">更新记录</p>
|
||||
<a class="font-body-base text-body-base text-on-surface hover:text-primary transition-colors" href="/changelog">查看日志 →</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- FAQ Section -->
|
||||
<section class="max-w-3xl mx-auto">
|
||||
<h2 class="font-headline-lg text-headline-lg text-on-surface text-center mb-12">常见问题</h2>
|
||||
<div class="space-y-4">
|
||||
<!-- FAQ Item 1 -->
|
||||
<details class="group bg-surface-container-lowest rounded-xl border border-outline-variant/50 overflow-hidden cursor-pointer shadow-sm hover:shadow-md transition-shadow">
|
||||
<summary class="flex items-center justify-between p-6 font-headline-md text-lg text-on-surface font-medium list-none outline-none">
|
||||
知习 AI 现在可以使用了吗?
|
||||
<span class="material-symbols-outlined text-on-surface-variant group-open:rotate-180 transition-transform duration-300" data-icon="expand_more">expand_more</span>
|
||||
</summary>
|
||||
<div class="px-6 pb-6 pt-0 font-body-base text-body-base text-on-surface-variant">
|
||||
产品还在早期版本开发中，官网会持续更新进展。
|
||||
</div>
|
||||
</details>
|
||||
<!-- FAQ Item 2 -->
|
||||
<details class="group bg-surface-container-lowest rounded-xl border border-outline-variant/50 overflow-hidden cursor-pointer shadow-sm hover:shadow-md transition-shadow">
|
||||
<summary class="flex items-center justify-between p-6 font-headline-md text-lg text-on-surface font-medium list-none outline-none">
|
||||
知习 AI 支持哪些平台?
|
||||
<span class="material-symbols-outlined text-on-surface-variant group-open:rotate-180 transition-transform duration-300" data-icon="expand_more">expand_more</span>
|
||||
</summary>
|
||||
<div class="px-6 pb-6 pt-0 font-body-base text-body-base text-on-surface-variant">
|
||||
第一阶段优先支持 iPhone，后续再考虑 iPad、Mac 和其他平台。
|
||||
</div>
|
||||
</details>
|
||||
<!-- FAQ Item 3 -->
|
||||
<details class="group bg-surface-container-lowest rounded-xl border border-outline-variant/50 overflow-hidden cursor-pointer shadow-sm hover:shadow-md transition-shadow">
|
||||
<summary class="flex items-center justify-between p-6 font-headline-md text-lg text-on-surface font-medium list-none outline-none">
|
||||
知习 AI 会保存我的学习内容吗?
|
||||
<span class="material-symbols-outlined text-on-surface-variant group-open:rotate-180 transition-transform duration-300" data-icon="expand_more">expand_more</span>
|
||||
</summary>
|
||||
<div class="px-6 pb-6 pt-0 font-body-base text-body-base text-on-surface-variant">
|
||||
为了提供学习记录和 AI 分析，产品可能会保存必要的学习数据，具体请查看隐私政策。
|
||||
</div>
|
||||
</details>
|
||||
<!-- FAQ Item 4 -->
|
||||
<details class="group bg-surface-container-lowest rounded-xl border border-outline-variant/50 overflow-hidden cursor-pointer shadow-sm hover:shadow-md transition-shadow">
|
||||
<summary class="flex items-center justify-between p-6 font-headline-md text-lg text-on-surface font-medium list-none outline-none">
|
||||
如何删除我的数据?
|
||||
<span class="material-symbols-outlined text-on-surface-variant group-open:rotate-180 transition-transform duration-300" data-icon="expand_more">expand_more</span>
|
||||
</summary>
|
||||
<div class="px-6 pb-6 pt-0 font-body-base text-body-base text-on-surface-variant">
|
||||
你可以通过本页面联系我们，我们会根据请求处理相关数据。
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="bg-[#F6F8FC] dark:bg-slate-950 text-blue-600 dark:text-blue-400 font-manrope text-xs tracking-wide uppercase font-semibold w-full py-16 mt-32 border-t border-slate-200 dark:border-slate-800 opacity-hover:70 flex flex-col md:flex-row justify-between items-center px-12 gap-8">
|
||||
<div class="text-lg font-bold text-slate-400 dark:text-slate-600">
|
||||
© 2024 知习 AI. Intellectual Serenity in Learning.
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-6 justify-center">
|
||||
<a class="text-slate-400 dark:text-slate-500 hover:text-blue-500 dark:hover:text-blue-300 transition-colors duration-200" href="#">Privacy Policy</a>
|
||||
<a class="text-slate-400 dark:text-slate-500 hover:text-blue-500 dark:hover:text-blue-300 transition-colors duration-200" href="#">Terms of Service</a>
|
||||
<a class="text-slate-400 dark:text-slate-500 hover:text-blue-500 dark:hover:text-blue-300 transition-colors duration-200" href="#">Help Center</a>
|
||||
<a class="text-slate-400 dark:text-slate-500 hover:text-blue-500 dark:hover:text-blue-300 transition-colors duration-200" href="#">Feedback</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
BIN
ZhiXi_Web/support/screen.png
Normal file
BIN
ZhiXi_Web/support/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 237 KiB |
@ -1,12 +1,19 @@
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
|
||||
const host = process.env.HOST || 'localhost';
|
||||
const port = process.env.PORT || '4321';
|
||||
|
||||
export default defineConfig({
|
||||
site: process.env.SITE_URL || `http://${host}:${port}`,
|
||||
|
||||
server: {
|
||||
host,
|
||||
port: parseInt(port, 10),
|
||||
},
|
||||
|
||||
vite: {
|
||||
plugins: [tailwindcss()],
|
||||
},
|
||||
});
|
||||
600
package-lock.json
generated
600
package-lock.json
generated
@ -8,7 +8,9 @@
|
||||
"name": "longde-website",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"astro": "^5.0.0"
|
||||
"@tailwindcss/vite": "^4.2.4",
|
||||
"astro": "^5.0.0",
|
||||
"tailwindcss": "^4.2.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@astrojs/compiler": {
|
||||
@ -1032,12 +1034,51 @@
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/gen-mapping": {
|
||||
"version": "0.3.13",
|
||||
"resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
|
||||
"integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@jridgewell/sourcemap-codec": "^1.5.0",
|
||||
"@jridgewell/trace-mapping": "^0.3.24"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/remapping": {
|
||||
"version": "2.3.5",
|
||||
"resolved": "https://registry.npmmirror.com/@jridgewell/remapping/-/remapping-2.3.5.tgz",
|
||||
"integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@jridgewell/gen-mapping": "^0.3.5",
|
||||
"@jridgewell/trace-mapping": "^0.3.24"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/resolve-uri": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
|
||||
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/sourcemap-codec": {
|
||||
"version": "1.5.5",
|
||||
"resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
|
||||
"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@jridgewell/trace-mapping": {
|
||||
"version": "0.3.31",
|
||||
"resolved": "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
|
||||
"integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@jridgewell/resolve-uri": "^3.1.0",
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@oslojs/encoding": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/@oslojs/encoding/-/encoding-1.1.0.tgz",
|
||||
@ -1464,6 +1505,263 @@
|
||||
"integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@tailwindcss/node": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmmirror.com/@tailwindcss/node/-/node-4.2.4.tgz",
|
||||
"integrity": "sha512-Ai7+yQPxz3ddrDQzFfBKdHEVBg0w3Zl83jnjuwxnZOsnH9pGn93QHQtpU0p/8rYWxvbFZHneni6p1BSLK4DkGA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@jridgewell/remapping": "^2.3.5",
|
||||
"enhanced-resolve": "^5.19.0",
|
||||
"jiti": "^2.6.1",
|
||||
"lightningcss": "1.32.0",
|
||||
"magic-string": "^0.30.21",
|
||||
"source-map-js": "^1.2.1",
|
||||
"tailwindcss": "4.2.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmmirror.com/@tailwindcss/oxide/-/oxide-4.2.4.tgz",
|
||||
"integrity": "sha512-9El/iI069DKDSXwTvB9J4BwdO5JhRrOweGaK25taBAvBXyXqJAX+Jqdvs8r8gKpsI/1m0LeJLyQYTf/WLrBT1Q==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 20"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@tailwindcss/oxide-android-arm64": "4.2.4",
|
||||
"@tailwindcss/oxide-darwin-arm64": "4.2.4",
|
||||
"@tailwindcss/oxide-darwin-x64": "4.2.4",
|
||||
"@tailwindcss/oxide-freebsd-x64": "4.2.4",
|
||||
"@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.4",
|
||||
"@tailwindcss/oxide-linux-arm64-gnu": "4.2.4",
|
||||
"@tailwindcss/oxide-linux-arm64-musl": "4.2.4",
|
||||
"@tailwindcss/oxide-linux-x64-gnu": "4.2.4",
|
||||
"@tailwindcss/oxide-linux-x64-musl": "4.2.4",
|
||||
"@tailwindcss/oxide-wasm32-wasi": "4.2.4",
|
||||
"@tailwindcss/oxide-win32-arm64-msvc": "4.2.4",
|
||||
"@tailwindcss/oxide-win32-x64-msvc": "4.2.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-android-arm64": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.2.4.tgz",
|
||||
"integrity": "sha512-e7MOr1SAn9U8KlZzPi1ZXGZHeC5anY36qjNwmZv9pOJ8E4Q6jmD1vyEHkQFmNOIN7twGPEMXRHmitN4zCMN03g==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 20"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-darwin-arm64": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.2.4.tgz",
|
||||
"integrity": "sha512-tSC/Kbqpz/5/o/C2sG7QvOxAKqyd10bq+ypZNf+9Fi2TvbVbv1zNpcEptcsU7DPROaSbVgUXmrzKhurFvo5eDg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 20"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-darwin-x64": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.2.4.tgz",
|
||||
"integrity": "sha512-yPyUXn3yO/ufR6+Kzv0t4fCg2qNr90jxXc5QqBpjlPNd0NqyDXcmQb/6weunH/MEDXW5dhyEi+agTDiqa3WsGg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 20"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-freebsd-x64": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.2.4.tgz",
|
||||
"integrity": "sha512-BoMIB4vMQtZsXdGLVc2z+P9DbETkiopogfWZKbWwM8b/1Vinbs4YcUwo+kM/KeLkX3Ygrf4/PsRndKaYhS8Eiw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 20"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.2.4.tgz",
|
||||
"integrity": "sha512-7pIHBLTHYRAlS7V22JNuTh33yLH4VElwKtB3bwchK/UaKUPpQ0lPQiOWcbm4V3WP2I6fNIJ23vABIvoy2izdwA==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 20"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.2.4.tgz",
|
||||
"integrity": "sha512-+E4wxJ0ZGOzSH325reXTWB48l42i93kQqMvDyz5gqfRzRZ7faNhnmvlV4EPGJU3QJM/3Ab5jhJ5pCRUsKn6OQw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 20"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-linux-arm64-musl": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.2.4.tgz",
|
||||
"integrity": "sha512-bBADEGAbo4ASnppIziaQJelekCxdMaxisrk+fB7Thit72IBnALp9K6ffA2G4ruj90G9XRS2VQ6q2bCKbfFV82g==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 20"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-linux-x64-gnu": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.2.4.tgz",
|
||||
"integrity": "sha512-7Mx25E4WTfnht0TVRTyC00j3i0M+EeFe7wguMDTlX4mRxafznw0CA8WJkFjWYH5BlgELd1kSjuU2JiPnNZbJDA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 20"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-linux-x64-musl": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.2.4.tgz",
|
||||
"integrity": "sha512-2wwJRF7nyhOR0hhHoChc04xngV3iS+akccHTGtz965FwF0up4b2lOdo6kI1EbDaEXKgvcrFBYcYQQ/rrnWFVfA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 20"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-wasm32-wasi": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.2.4.tgz",
|
||||
"integrity": "sha512-FQsqApeor8Fo6gUEklzmaa9994orJZZDBAlQpK2Mq+DslRKFJeD6AjHpBQ0kZFQohVr8o85PPh8eOy86VlSCmw==",
|
||||
"bundleDependencies": [
|
||||
"@napi-rs/wasm-runtime",
|
||||
"@emnapi/core",
|
||||
"@emnapi/runtime",
|
||||
"@tybys/wasm-util",
|
||||
"@emnapi/wasi-threads",
|
||||
"tslib"
|
||||
],
|
||||
"cpu": [
|
||||
"wasm32"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"@emnapi/core": "^1.8.1",
|
||||
"@emnapi/runtime": "^1.8.1",
|
||||
"@emnapi/wasi-threads": "^1.1.0",
|
||||
"@napi-rs/wasm-runtime": "^1.1.1",
|
||||
"@tybys/wasm-util": "^0.10.1",
|
||||
"tslib": "^2.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.2.4.tgz",
|
||||
"integrity": "sha512-L9BXqxC4ToVgwMFqj3pmZRqyHEztulpUJzCxUtLjobMCzTPsGt1Fa9enKbOpY2iIyVtaHNeNvAK8ERP/64sqGQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 20"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-win32-x64-msvc": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmmirror.com/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.2.4.tgz",
|
||||
"integrity": "sha512-ESlKG0EpVJQwRjXDDa9rLvhEAh0mhP1sF7sap9dNZT0yyl9SAG6T7gdP09EH0vIv0UNTlo6jPWyujD6559fZvw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 20"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/vite": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmmirror.com/@tailwindcss/vite/-/vite-4.2.4.tgz",
|
||||
"integrity": "sha512-pCvohwOCspk3ZFn6eJzrrX3g4n2JY73H6MmYC87XfGPyTty4YsCjYTMArRZm/zOI8dIt3+EcrLHAFPe5A4bgtw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tailwindcss/node": "4.2.4",
|
||||
"@tailwindcss/oxide": "4.2.4",
|
||||
"tailwindcss": "4.2.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vite": "^5.2.0 || ^6 || ^7 || ^8"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/debug": {
|
||||
"version": "4.1.13",
|
||||
"resolved": "https://registry.npmmirror.com/@types/debug/-/debug-4.1.13.tgz",
|
||||
@ -2109,7 +2407,6 @@
|
||||
"resolved": "https://registry.npmmirror.com/detect-libc/-/detect-libc-2.1.2.tgz",
|
||||
"integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
@ -2242,6 +2539,19 @@
|
||||
"integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/enhanced-resolve": {
|
||||
"version": "5.21.0",
|
||||
"resolved": "https://registry.npmmirror.com/enhanced-resolve/-/enhanced-resolve-5.21.0.tgz",
|
||||
"integrity": "sha512-otxSQPw4lkOZWkHpB3zaEQs6gWYEsmX4xQF68ElXC/TWvGxGMSGOvoNbaLXm6/cS/fSfHtsEdw90y20PCd+sCA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"graceful-fs": "^4.2.4",
|
||||
"tapable": "^2.3.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/entities": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/entities/-/entities-6.0.1.tgz",
|
||||
@ -2413,6 +2723,12 @@
|
||||
"integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/graceful-fs": {
|
||||
"version": "4.2.11",
|
||||
"resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
|
||||
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/h3": {
|
||||
"version": "1.15.11",
|
||||
"resolved": "https://registry.npmmirror.com/h3/-/h3-1.15.11.tgz",
|
||||
@ -2717,6 +3033,16 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/jiti": {
|
||||
"version": "2.6.1",
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"node_modules/js-yaml": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/js-yaml/-/js-yaml-4.1.1.tgz",
|
||||
@ -2738,6 +3064,256 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss": {
|
||||
"version": "1.32.0",
|
||||
"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"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"lightningcss-android-arm64": "1.32.0",
|
||||
"lightningcss-darwin-arm64": "1.32.0",
|
||||
"lightningcss-darwin-x64": "1.32.0",
|
||||
"lightningcss-freebsd-x64": "1.32.0",
|
||||
"lightningcss-linux-arm-gnueabihf": "1.32.0",
|
||||
"lightningcss-linux-arm64-gnu": "1.32.0",
|
||||
"lightningcss-linux-arm64-musl": "1.32.0",
|
||||
"lightningcss-linux-x64-gnu": "1.32.0",
|
||||
"lightningcss-linux-x64-musl": "1.32.0",
|
||||
"lightningcss-win32-arm64-msvc": "1.32.0",
|
||||
"lightningcss-win32-x64-msvc": "1.32.0"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-android-arm64": {
|
||||
"version": "1.32.0",
|
||||
"resolved": "https://registry.npmmirror.com/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
|
||||
"integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-darwin-arm64": {
|
||||
"version": "1.32.0",
|
||||
"resolved": "https://registry.npmmirror.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
|
||||
"integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-darwin-x64": {
|
||||
"version": "1.32.0",
|
||||
"resolved": "https://registry.npmmirror.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
|
||||
"integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-freebsd-x64": {
|
||||
"version": "1.32.0",
|
||||
"resolved": "https://registry.npmmirror.com/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
|
||||
"integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-linux-arm-gnueabihf": {
|
||||
"version": "1.32.0",
|
||||
"resolved": "https://registry.npmmirror.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
|
||||
"integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-linux-arm64-gnu": {
|
||||
"version": "1.32.0",
|
||||
"resolved": "https://registry.npmmirror.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
|
||||
"integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-linux-arm64-musl": {
|
||||
"version": "1.32.0",
|
||||
"resolved": "https://registry.npmmirror.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
|
||||
"integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-linux-x64-gnu": {
|
||||
"version": "1.32.0",
|
||||
"resolved": "https://registry.npmmirror.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
|
||||
"integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-linux-x64-musl": {
|
||||
"version": "1.32.0",
|
||||
"resolved": "https://registry.npmmirror.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
|
||||
"integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-win32-arm64-msvc": {
|
||||
"version": "1.32.0",
|
||||
"resolved": "https://registry.npmmirror.com/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
|
||||
"integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-win32-x64-msvc": {
|
||||
"version": "1.32.0",
|
||||
"resolved": "https://registry.npmmirror.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
|
||||
"integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/longest-streak": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/longest-streak/-/longest-streak-3.1.0.tgz",
|
||||
@ -4347,6 +4923,25 @@
|
||||
"url": "https://opencollective.com/svgo"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-4.2.4.tgz",
|
||||
"integrity": "sha512-HhKppgO81FQof5m6TEnuBWCZGgfRAWbaeOaGT00KOy/Pf/j6oUihdvBpA7ltCeAvZpFhW3j0PTclkxsd4IXYDA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tapable": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmmirror.com/tapable/-/tapable-2.3.3.tgz",
|
||||
"integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/webpack"
|
||||
}
|
||||
},
|
||||
"node_modules/tiny-inflate": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
|
||||
@ -4765,6 +5360,7 @@
|
||||
"resolved": "https://registry.npmmirror.com/vite/-/vite-6.4.2.tgz",
|
||||
"integrity": "sha512-2N/55r4JDJ4gdrCvGgINMy+HH3iRpNIz8K6SFwVsA+JbQScLiC+clmAxBgwiSPgcG9U15QmvqCGWzMbqda5zGQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.25.0",
|
||||
"fdir": "^6.4.4",
|
||||
|
||||
@ -10,6 +10,8 @@
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"astro": "^5.0.0"
|
||||
"@tailwindcss/vite": "^4.2.4",
|
||||
"astro": "^5.0.0",
|
||||
"tailwindcss": "^4.2.4"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
BIN
public/logo.png
Normal file
BIN
public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
@ -3,69 +3,35 @@ const currentYear = new Date().getFullYear();
|
||||
|
||||
const footerLinks = [
|
||||
{ href: '/privacy', label: '隐私政策' },
|
||||
{ href: '/terms', label: '用户协议' },
|
||||
{ href: '/support', label: '支持与反馈' },
|
||||
{ href: '/support', label: '反馈建议' },
|
||||
];
|
||||
---
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-brand">
|
||||
<span class="copyright">© {currentYear} 龙德AI学习</span>
|
||||
<footer style="width: 100%; margin-top: 128px; 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;">
|
||||
<img src="/logo.png" alt="知习 AI" style="height: 24px; width: auto;" />
|
||||
<span style="font-size: 18px; font-weight: 600;">知习 AI</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; font-size: 12px; color: #64748b;">
|
||||
{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>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="footer-links">
|
||||
{footerLinks.map(link => (
|
||||
<a href={link.href} class="footer-link">{link.label}</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<p style="font-size: 12px; color: #64748b; text-align: center;">
|
||||
© {currentYear} 知习 AI (ZhiXi AI). Structured learning for the digital age.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
padding: 2rem var(--page-padding);
|
||||
border-top: 1px solid var(--color-border);
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.footer-content {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
@media (max-width: 768px) {
|
||||
.footer-links {
|
||||
align-items: center !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -2,98 +2,77 @@
|
||||
const pathname = Astro.url.pathname;
|
||||
|
||||
const navItems = [
|
||||
{ href: '/waitlist', label: '等待名单' },
|
||||
{ href: '/changelog', label: '更新日志' },
|
||||
{ href: '/support', label: '支持' },
|
||||
{ href: '/', label: '首页' },
|
||||
{ href: '/product', label: '产品' },
|
||||
{ href: '/philosophy', label: '理念' },
|
||||
];
|
||||
|
||||
const isActive = (href: string) => {
|
||||
if (href === '/') {
|
||||
return pathname === '/';
|
||||
}
|
||||
return pathname.startsWith(href);
|
||||
};
|
||||
---
|
||||
|
||||
<header class="header">
|
||||
<nav class="nav">
|
||||
<a href="/" class="logo">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/>
|
||||
<path d="M8 12h8M12 8v8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span>龙德</span>
|
||||
<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);">
|
||||
<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;">
|
||||
<img src="/logo.png" alt="知习 AI" style="height: 32px; width: auto;" />
|
||||
<span style="color: #4F7CFF; font-size: 20px; font-weight: 800; letter-spacing: -0.02em;" class="desktop-text">知习 AI</span>
|
||||
</a>
|
||||
<div class="nav-links">
|
||||
|
||||
<div class="desktop-nav">
|
||||
{navItems.map(item => (
|
||||
<a
|
||||
href={item.href}
|
||||
class:list={['nav-link', { active: pathname === item.href }]}
|
||||
style={{
|
||||
color: isActive(item.href) ? '#4F7CFF' : '#64748b',
|
||||
'border-bottom': isActive(item.href) ? '2px solid #4F7CFF' : 'none',
|
||||
'padding-bottom': '4px',
|
||||
transition: 'all 0.3s'
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<a href="/waitlist" style="color: #ffffff; font-weight: 500; padding: 8px 24px; border-radius: 9999px; background: linear-gradient(135deg, #4F7CFF 0%, #7861FF 100%); transition: all 0.3s; font-size: 14px;">
|
||||
立即加入
|
||||
</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
.desktop-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav {
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--page-padding);
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.desktop-nav {
|
||||
display: none;
|
||||
gap: 32px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
|
||||
.desktop-nav a {
|
||||
color: #64748b;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
text-decoration: none;
|
||||
|
||||
.desktop-nav a:hover {
|
||||
color: #4F7CFF;
|
||||
}
|
||||
|
||||
.logo svg {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-secondary);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link.active {
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.nav-links {
|
||||
gap: 1rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.desktop-text {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 0.8125rem;
|
||||
|
||||
.desktop-nav {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
---
|
||||
import '../styles/global.css';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
@ -19,12 +21,17 @@ const ogImageUrl = ogImage || `${siteUrl}/og-default.png`;
|
||||
<meta name="robots" content="index, follow" />
|
||||
<link rel="canonical" href={Astro.url.href} />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:url" content={Astro.url.href} />
|
||||
<meta property="og:image" content={ogImageUrl} />
|
||||
<meta property="og:site_name" content="龙德AI学习" />
|
||||
<meta property="og:site_name" content="知习 AI" />
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={title} />
|
||||
@ -33,75 +40,7 @@ const ogImageUrl = ogImage || `${siteUrl}/og-default.png`;
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
</head>
|
||||
<body>
|
||||
<body class="antialiased overflow-x-hidden selection:bg-blue-100">
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style is:global>
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-bg: #ffffff;
|
||||
--color-bg-secondary: #f5f5f7;
|
||||
--color-text: #1d1d1f;
|
||||
--color-text-secondary: #86868b;
|
||||
--color-accent: #0071e3;
|
||||
--color-accent-hover: #0077ed;
|
||||
--color-border: #d2d2d7;
|
||||
--font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", monospace;
|
||||
--max-width: 980px;
|
||||
--page-padding: clamp(1rem, 5vw, 2rem);
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: var(--font-family);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: var(--color-text);
|
||||
background: var(--color-bg);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.2;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
</style>
|
||||
@ -2,69 +2,305 @@
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import Hero from '../components/Hero.astro';
|
||||
import FeatureCard from '../components/FeatureCard.astro';
|
||||
import CTA from '../components/CTA.astro';
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="龙德AI学习 - 智能学习助手"
|
||||
description="龙德AI学习，专注公考申论、AI工具学习、前端面试的智能学习助手，让学习更高效。"
|
||||
title="知习 AI - 更懂你，更会学"
|
||||
description="一个围绕你成长的 AI 学习空间。把知识库、主动回忆、AI 分析和复习计划连接起来，让每一次学习都留下痕迹。"
|
||||
>
|
||||
<Header />
|
||||
|
||||
<main>
|
||||
<Hero
|
||||
title="让学习更高效"
|
||||
subtitle="智能学习助手，专注于公考申论、AI工具学习、前端面试等领域"
|
||||
/>
|
||||
<!-- Cinematic Hero -->
|
||||
<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>
|
||||
|
||||
<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;">
|
||||
更懂你，更会学
|
||||
</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="/product" 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="/waitlist" 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>
|
||||
|
||||
<!-- Cinematic Mockup Area -->
|
||||
<div class="relative w-full max-w-6xl mt-12 z-0 flex items-center justify-center animate-fade-in-up" style="animation-delay: 0.5s;">
|
||||
<div class="relative z-20 w-[700px] h-[450px] transition-transform duration-700 hover:scale-[1.02]">
|
||||
<div class="relative w-full h-[430px] bg-slate-900 rounded-2xl p-3 shadow-2xl overflow-hidden border border-slate-700/50">
|
||||
<div class="absolute top-0 inset-x-0 h-6 flex justify-center items-center">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-slate-700"></div>
|
||||
</div>
|
||||
<div class="w-full h-full bg-white rounded-lg overflow-hidden flex flex-col">
|
||||
<div class="h-10 border-b border-slate-100 flex items-center px-4 gap-2 bg-slate-50/50">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-400"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-amber-400"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-emerald-400"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 p-6 flex flex-col gap-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center text-tech-blue">
|
||||
<span class="material-symbols-outlined">account_circle</span>
|
||||
</div>
|
||||
<div class="h-2 w-32 bg-slate-100 rounded"></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-6 flex-1">
|
||||
<div class="col-span-2 space-y-4">
|
||||
<div class="h-40 bg-slate-50 rounded-xl border-2 border-dashed border-slate-200"></div>
|
||||
<div class="h-20 bg-slate-50 rounded-xl"></div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="h-full bg-blue-50/30 rounded-xl border border-blue-100/20"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-[-20px] left-[-40px] right-[-40px] h-[40px] bg-slate-800 rounded-b-3xl shadow-2xl flex justify-center" style="transform: perspective(1000px) rotateX(30deg);">
|
||||
<div class="w-1/3 h-1 bg-slate-700 rounded-full mt-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="features">
|
||||
<div class="features-container">
|
||||
<FeatureCard
|
||||
title="公考申论 AI 教练"
|
||||
description="基于 AI 的申论批改与反馈，帮你找到提升空间，提高考试成绩。"
|
||||
icon="📝"
|
||||
/>
|
||||
<FeatureCard
|
||||
title="AI 工具知识库"
|
||||
description="系统整理 AI 工具使用技巧，让你在工作和学习中快人一步。"
|
||||
icon="🛠️"
|
||||
/>
|
||||
<FeatureCard
|
||||
title="前端面试助手"
|
||||
description="针对程序员的前端面试准备工具，模拟真实面试场景。"
|
||||
icon="💻"
|
||||
/>
|
||||
<!-- iPad Pro (Left Layer) -->
|
||||
<div class="absolute left-[-5%] bottom-[-10%] z-30 w-[340px] h-[240px] glass-card-premium rounded-3xl border-[8px] border-slate-800 shadow-2xl overflow-hidden transform -rotate-12 hover:rotate-0 transition-transform duration-700 hidden md:block">
|
||||
<div class="w-full h-full bg-white p-4">
|
||||
<div class="w-full h-full bg-slate-50 rounded-xl p-4">
|
||||
<div class="h-4 w-24 bg-slate-200 rounded mb-4"></div>
|
||||
<div class="space-y-3">
|
||||
<div class="h-2 bg-slate-200 rounded w-full"></div>
|
||||
<div class="h-2 bg-slate-200 rounded w-5/6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- iPhone (Right Layer) -->
|
||||
<div class="absolute right-[-5%] top-[5%] z-40 w-[180px] h-[360px] glass-card-premium rounded-[3rem] border-[8px] border-slate-900 shadow-2xl overflow-hidden transform rotate-12 hover:rotate-0 transition-transform duration-700 hidden lg:block">
|
||||
<div class="w-full h-full bg-white p-4 flex flex-col gap-4">
|
||||
<div class="w-12 h-1 bg-slate-100 rounded-full mx-auto mb-4"></div>
|
||||
<div class="h-full bg-blue-50/20 rounded-2xl border border-blue-100/30"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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="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>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">今日任务</div>
|
||||
<div class="text-sm font-bold text-navy">复习 12 个知识点</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="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>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">主动回忆</div>
|
||||
<div class="text-sm font-bold text-navy">准确率提升 15%</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="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>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">AI 分析</div>
|
||||
<div class="text-sm font-bold text-navy">发现 2 个薄弱环节</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="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>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">复习计划</div>
|
||||
<div class="text-sm font-bold text-navy">动态调整已生效</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-section">
|
||||
<CTA
|
||||
title="加入等待名单"
|
||||
description="抢先体验更多功能"
|
||||
href="/waitlist"
|
||||
variant="primary"
|
||||
/>
|
||||
<!-- Portal Section -->
|
||||
<section class="py-40 px-6 md:px-12 max-w-7xl mx-auto relative z-10">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<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">
|
||||
开始导入 <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="#">
|
||||
<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>
|
||||
<div>
|
||||
<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">
|
||||
开始测试 <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">
|
||||
<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">
|
||||
查看计划 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</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">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-navy mb-1">1. 摄入</h4>
|
||||
<p class="text-xs text-slate-500">知识结构化</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>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-navy mb-1">2. 回忆</h4>
|
||||
<p class="text-xs text-slate-500">主动提取</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-navy mb-1">4. 巩固</h4>
|
||||
<p class="text-xs text-slate-500">动态复习计划</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Preview Section -->
|
||||
<section class="py-40 px-6 md:px-12 max-w-7xl mx-auto relative z-10">
|
||||
<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>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center relative z-10">
|
||||
<div class="relative z-10">
|
||||
<h2 class="text-4xl text-navy mb-6 font-bold">看得见的进步轨迹</h2>
|
||||
<p class="text-slate-600 mb-8 leading-relaxed">
|
||||
告别盲目刷题。知习 AI 在你每次主动回忆后，实时生成多维度的掌握度分析，动态调整你的下一步学习路径。
|
||||
</p>
|
||||
<ul class="space-y-4 mb-8">
|
||||
<li class="flex items-center gap-3 text-sm text-slate-700">
|
||||
<span class="material-symbols-outlined text-tech-blue text-lg">check_circle</span> 知识点图谱实时更新
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-slate-700">
|
||||
<span class="material-symbols-outlined text-tech-blue text-lg">check_circle</span> 遗忘曲线精准预测
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-slate-700">
|
||||
<span class="material-symbols-outlined text-tech-blue text-lg">check_circle</span> 个性化干预建议
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="relative h-[400px] w-full flex items-center justify-center">
|
||||
<div class="absolute inset-0 bg-white/40 backdrop-blur-sm rounded-2xl border border-white/60 shadow-lg transform scale-95 opacity-50 z-0"></div>
|
||||
<div class="absolute inset-4 bg-white/60 backdrop-blur-md rounded-2xl border border-white/80 shadow-xl transform scale-100 opacity-80 z-10 flex flex-col p-6 gap-4">
|
||||
<div class="h-6 w-1/3 bg-slate-200 rounded"></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>
|
||||
<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="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">
|
||||
<span class="material-symbols-outlined text-sm">auto_awesome</span>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-navy">AI 深度分析</span>
|
||||
</div>
|
||||
<p class="text-xs text-slate-600 mb-4 leading-relaxed">
|
||||
你在「宏观经济学」章节的「通货膨胀」概念上表现出轻微遗忘，已自动加入明日优先复习队列。
|
||||
</p>
|
||||
<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>
|
||||
<div class="flex justify-between text-[10px] text-slate-400">
|
||||
<span>整体掌握度</span>
|
||||
<span>75%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.features {
|
||||
padding: 4rem var(--page-padding);
|
||||
.ethereal-glow {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(120px);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.features-container {
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.cta-section {
|
||||
padding: 2rem var(--page-padding) 4rem;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
293
src/pages/philosophy.astro
Normal file
293
src/pages/philosophy.astro
Normal file
@ -0,0 +1,293 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="知习 AI - 产品理念"
|
||||
description="知习 AI 关注的是学习过程本身：理解、输出、反馈、复习，以及一次次变得更清晰的自己。"
|
||||
>
|
||||
<Header />
|
||||
|
||||
<main class="relative min-h-screen">
|
||||
<!-- Global Blueprint Background -->
|
||||
<div class="fixed inset-0 bg-blueprint pointer-events-none z-0"></div>
|
||||
|
||||
<!-- 1. Hero Section: The Knowledge Path -->
|
||||
<header class="relative pt-[200px] pb-[120px] z-10 flex flex-col items-center justify-center text-center px-6 overflow-hidden">
|
||||
<div class="ambient-glow top-[10%] left-1/2 -translate-x-1/2"></div>
|
||||
|
||||
<div class="max-w-4xl mx-auto space-y-6">
|
||||
<h1 class="font-display-xl text-on-surface">
|
||||
我们不想让 AI 帮你看更多，<br/>而是帮你真正学会。
|
||||
</h1>
|
||||
<p class="font-body-lg text-on-surface-variant max-w-2xl mx-auto">
|
||||
Intellectual Serenity for Lifelong Learners. Build your knowledge architecture, not just a digital hoarding space. A quiet environment for deep understanding.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Cinematic Abstract Visual -->
|
||||
<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">
|
||||
<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" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-surface-container-lowest/80 to-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<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>
|
||||
<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> 收藏
|
||||
</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> 划线
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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">
|
||||
<div class="max-w-[1200px] mx-auto px-6 text-center">
|
||||
<h2 class="font-headline-lg text-on-surface mb-24">真正的学习，是一个闭环。</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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. AI Feedback System Section (Immersive UI Mockup) -->
|
||||
<section class="py-[120px] z-10 relative px-6">
|
||||
<div class="max-w-4xl mx-auto text-center mb-16">
|
||||
<h2 class="font-headline-lg text-on-surface">AI 不应该只是总结工具，<br/>而应该成为学习过程里的反馈系统。</h2>
|
||||
</div>
|
||||
|
||||
<!-- UI Mockup Canvas -->
|
||||
<div class="max-w-[1000px] mx-auto bg-surface-container-lowest rounded-2xl shadow-[0_30px_60px_rgba(18,26,43,0.08)] border border-white/80 overflow-hidden flex flex-col md:flex-row relative">
|
||||
<!-- Sidebar/Context -->
|
||||
<div class="w-full md:w-64 bg-surface-container-low border-r border-outline-variant/30 p-6 flex flex-col gap-6">
|
||||
<div class="font-label-sm text-on-surface-variant uppercase tracking-wider">Analysis Report</div>
|
||||
<div class="space-y-4">
|
||||
<div class="p-3 rounded-lg bg-surface-container-highest/50 cursor-pointer border border-outline-variant/20">
|
||||
<div class="text-sm font-semibold text-on-surface">《查拉图斯特拉如是说》笔记</div>
|
||||
<div class="text-xs text-on-surface-variant mt-1">2小时前分析</div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg hover:bg-surface-container-highest/30 cursor-pointer transition-colors text-on-surface-variant">
|
||||
<div class="text-sm">系统思考基础模型</div>
|
||||
<div class="text-xs mt-1">昨天</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Analysis Area -->
|
||||
<div class="flex-1 p-10 bg-white relative">
|
||||
<!-- Top Status -->
|
||||
<div class="flex justify-between items-end border-b border-outline-variant/20 pb-6 mb-8">
|
||||
<div>
|
||||
<h3 class="font-headline-md text-on-surface">概念掌握度评估</h3>
|
||||
<p class="text-sm text-on-surface-variant mt-1">基于您的复述与提问记录生成</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-4xl font-light text-primary">84<span class="text-xl">%</span></div>
|
||||
<div class="text-xs font-semibold text-on-surface-variant uppercase">综合理解率</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Metrics Grid -->
|
||||
<div class="grid grid-cols-2 gap-8 mb-10">
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-2">
|
||||
<span class="text-on-surface font-medium">核心逻辑自洽性</span>
|
||||
<span class="text-on-surface-variant">92%</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-surface-container-highest rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary rounded-full" style="width: 92%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-2">
|
||||
<span class="text-on-surface font-medium">边缘概念连结</span>
|
||||
<span class="text-on-surface-variant">65%</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-surface-container-highest rounded-full overflow-hidden">
|
||||
<div class="h-full bg-secondary-container rounded-full" style="width: 65%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI Insight Card -->
|
||||
<div class="bg-primary-fixed/30 border border-primary-fixed-dim/50 rounded-xl p-6 flex gap-4">
|
||||
<span class="material-symbols-outlined text-primary mt-1">lightbulb</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-on-surface mb-2">反馈与建议</h4>
|
||||
<p class="text-sm text-on-surface-variant leading-relaxed">
|
||||
您对"超人"概念的阐述非常清晰，但在将其与"永恒轮回"理论结合时存在逻辑跳跃。建议复习第三章节，并尝试用自己的话写一段连接这两个概念的短文。
|
||||
</p>
|
||||
<div class="mt-4 flex gap-2">
|
||||
<button class="px-4 py-1.5 bg-primary text-white rounded-full text-xs font-medium shadow-sm hover:opacity-90">生成复习卡片</button>
|
||||
<button class="px-4 py-1.5 bg-white border border-outline-variant text-on-surface rounded-full text-xs font-medium hover:bg-surface-container-low">查看原文出处</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<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="flex-1">
|
||||
<h3 class="font-headline-md text-on-surface mb-3">少一点信息噪音，多一点学习反馈</h3>
|
||||
<p class="font-body-base text-on-surface-variant">信息爆炸的时代，缺的不是内容，而是对内容的深度加工。我们抑制推流，放大反馈，让每一次交互都指向认知升级。</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>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
<div class="border-t border-outline-variant"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6. Footer CTA Section -->
|
||||
<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/>欢迎继续了解知习 AI。</h2>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
@ -1,94 +1,301 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import Hero from '../components/Hero.astro';
|
||||
|
||||
const lastUpdated = '2024年5月4日';
|
||||
const lastUpdated = '2026 年 5 月';
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="隐私政策 - 龙德AI学习"
|
||||
description="龙德AI学习的隐私政策，说明我们如何收集、使用和保护您的个人信息。"
|
||||
>
|
||||
<Header />
|
||||
<main>
|
||||
<Hero
|
||||
title="隐私政策"
|
||||
subtitle={`最后更新：${lastUpdated}`}
|
||||
/>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>隐私政策 - 知习 AI</title>
|
||||
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
||||
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
</head>
|
||||
<body class="min-h-screen relative antialiased" style="background-color: #faf9ff; background-image: radial-gradient(circle at 1px 1px, #d2daf1 1px, transparent 0); background-size: 24px 24px; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'SF Pro Text', Helvetica, Arial, sans-serif;">
|
||||
|
||||
<!-- Hero Section -->
|
||||
<header style="padding-top: 120px; padding-bottom: 80px; padding-left: 24px; padding-right: 24px; max-width: 1200px; margin: 0 auto; text-align: center;">
|
||||
<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: 48rem; margin: 0 auto 32px;">
|
||||
我们重视你的学习数据和个人隐私。知习 AI 会尽可能清晰地说明我们收集什么、为什么收集，以及如何保护你的信息。
|
||||
</p>
|
||||
<div style="display: inline-block; padding: 8px 16px; background-color: #f1f3ff; border-radius: 9999px;">
|
||||
<span style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-transform: uppercase;">最后更新：{lastUpdated}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<article class="content">
|
||||
<div class="content-inner">
|
||||
<section class="section">
|
||||
<h2>信息收集</h2>
|
||||
<p>我们收集您主动提供的信息，包括但不限于：昵称、邮箱地址、设备类型、使用偏好等。这些信息仅用于改进我们的服务和向您提供相关更新。</p>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>信息使用</h2>
|
||||
<p>我们使用收集的信息用于：提供和维护服务、发送产品更新和通知、改进产品功能、分析服务使用情况。您可以随时选择退出邮件通知。</p>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>信息保护</h2>
|
||||
<p>我们采取合理的安全措施保护您的个人信息，防止未经授权的访问、使用或泄露。但互联网传输无法保证100%安全，我们会持续努力保护您的数据。</p>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>Cookie 使用</h2>
|
||||
<p>我们的网站可能使用 Cookie 来改善用户体验。您可以通过浏览器设置禁用 Cookie，但这可能影响部分功能。</p>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>第三方服务</h2>
|
||||
<p>我们可能使用第三方服务提供商来辅助运营服务，他们会按照各自的隐私政策处理您的信息。</p>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>用户权利</h2>
|
||||
<p>您有权访问、更正或删除您的个人信息。如有任何疑问，请通过支持页面联系我们。</p>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>政策更新</h2>
|
||||
<p>我们可能会不时更新本隐私政策。更新后我们会通过网站公告或邮件通知您。</p>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>联系我们</h2>
|
||||
<p>如对本隐私政策有任何疑问，请访问我们的 <a href="/support">支持页面</a>。</p>
|
||||
</section>
|
||||
<!-- Main Content -->
|
||||
<main 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>
|
||||
</details>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 64px; position: relative;" class="desktop-layout">
|
||||
<!-- 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>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Policy Text -->
|
||||
<article style="width: 75%; max-width: 48rem;">
|
||||
<div style="display: flex; flex-direction: column; gap: 64px;">
|
||||
|
||||
<!-- Section 1 -->
|
||||
<section id="section-1">
|
||||
<h2 style="font-family: 'Manrope', sans-serif; font-size: 28px; line-height: 1.3; font-weight: 600; color: #131b2c; margin-bottom: 24px;">我们收集的信息</h2>
|
||||
<p style="font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; font-weight: 400; color: #434654; margin-bottom: 16px;">
|
||||
为了提供优质的学习体验，我们在您使用知习 AI 时收集以下类型的信息：
|
||||
</p>
|
||||
<ul style="list-style-type: disc; padding-left: 24px; display: flex; flex-direction: column; gap: 12px; font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; font-weight: 400; color: #434654;">
|
||||
<li><strong style="font-weight: 600; color: #131b2c;">账户信息：</strong>包括您的姓名、电子邮件地址以及您在注册时提供的其他必要信息。</li>
|
||||
<li><strong style="font-weight: 600; color: #131b2c;">学习数据：</strong>您在平台上的学习记录、互动内容、笔记和进度，以帮助优化推荐和学习路径。</li>
|
||||
<li><strong style="font-weight: 600; color: #131b2c;">设备与日志信息：</strong>IP 地址、浏览器类型、设备标识符及操作日志，用于保障服务安全和改进技术性能。</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Section 2 -->
|
||||
<section id="section-2">
|
||||
<h2 style="font-family: 'Manrope', sans-serif; font-size: 28px; line-height: 1.3; font-weight: 600; color: #131b2c; margin-bottom: 24px;">我们如何使用这些信息</h2>
|
||||
<p style="font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; font-weight: 400; color: #434654; margin-bottom: 16px;">
|
||||
我们收集的信息主要用于以下目的：
|
||||
</p>
|
||||
<ul style="list-style-type: disc; padding-left: 24px; display: flex; flex-direction: column; gap: 12px; font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; font-weight: 400; color: #434654;">
|
||||
<li>提供、维护和改进知习 AI 的核心学习功能。</li>
|
||||
<li>通过 AI 分析您的学习习惯，提供个性化的内容推荐。</li>
|
||||
<li>发送重要的账户通知、服务更新及安全提醒。</li>
|
||||
<li>进行内部数据分析和研究，以提升产品体验。</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Section 3 -->
|
||||
<section id="section-3">
|
||||
<h2 style="font-family: 'Manrope', sans-serif; font-size: 28px; line-height: 1.3; font-weight: 600; color: #131b2c; margin-bottom: 24px;">AI 服务相关说明</h2>
|
||||
<div style="background-color: #f1f3ff; border-radius: 12px; padding: 32px; border: 1px solid rgba(195, 197, 215, 0.3);">
|
||||
<p style="font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; font-weight: 400; color: #434654;">
|
||||
知习 AI 的核心在于人工智能辅助学习。您的部分互动数据可能会经过匿名化处理后，用于训练和优化我们的 AI 模型，以提供更精准的学习辅导。我们承诺，绝不使用包含可识别个人身份的信息进行模型训练。您可以随时在隐私设置中选择退出数据贡献计划。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 4 -->
|
||||
<section id="section-4">
|
||||
<h2 style="font-family: 'Manrope', sans-serif; font-size: 28px; line-height: 1.3; font-weight: 600; color: #131b2c; margin-bottom: 24px;">我们如何保护数据</h2>
|
||||
<p style="font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; font-weight: 400; color: #434654;">
|
||||
我们采用业界领先的安全标准，包括数据加密（传输和存储阶段）、严格的访问控制以及定期的安全审计，以保护您的个人信息免受未经授权的访问、使用或泄露。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Section 5 -->
|
||||
<section id="section-5">
|
||||
<h2 style="font-family: 'Manrope', sans-serif; font-size: 28px; line-height: 1.3; font-weight: 600; color: #131b2c; margin-bottom: 24px;">第三方服务</h2>
|
||||
<p style="font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; font-weight: 400; color: #434654;">
|
||||
我们可能会聘请第三方服务提供商协助我们提供服务（例如云存储、数据分析）。这些第三方仅在代表我们执行任务且遵守类似保密义务的前提下，才能访问您的个人信息。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Section 6 -->
|
||||
<section id="section-6">
|
||||
<h2 style="font-family: 'Manrope', sans-serif; font-size: 28px; line-height: 1.3; font-weight: 600; color: #131b2c; margin-bottom: 24px;">用户权利</h2>
|
||||
<p style="font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; font-weight: 400; color: #434654; margin-bottom: 16px;">
|
||||
您对自己的个人信息拥有完全的控制权。您有权：
|
||||
</p>
|
||||
<ul style="list-style-type: disc; padding-left: 24px; display: flex; flex-direction: column; gap: 12px; font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; font-weight: 400; color: #434654;">
|
||||
<li>访问、更正或更新您的账户信息。</li>
|
||||
<li>请求删除您的账户及相关个人数据。</li>
|
||||
<li>限制或反对我们处理您的个人信息。</li>
|
||||
<li>获取您数据的结构化副本。</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Section 7 -->
|
||||
<section id="section-7">
|
||||
<h2 style="font-family: 'Manrope', sans-serif; font-size: 28px; line-height: 1.3; font-weight: 600; color: #131b2c; margin-bottom: 24px;">儿童隐私</h2>
|
||||
<p style="font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; font-weight: 400; color: #434654;">
|
||||
知习 AI 并非专为未满 13 岁的儿童设计。我们不会有意收集未满 13 岁儿童的个人信息。如果我们发现无意中收集了此类信息，将采取措施尽快删除。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Section 8 -->
|
||||
<section id="section-8">
|
||||
<h2 style="font-family: 'Manrope', sans-serif; font-size: 28px; line-height: 1.3; font-weight: 600; color: #131b2c; margin-bottom: 24px;">政策更新</h2>
|
||||
<p style="font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; font-weight: 400; color: #434654;">
|
||||
我们可能会不时更新本隐私政策。任何重大变更都将通过电子邮件或平台通知等方式提前告知。继续使用我们的服务即表示您接受更新后的政策。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Section 9 -->
|
||||
<section id="section-9">
|
||||
<h2 style="font-family: 'Manrope', sans-serif; font-size: 28px; line-height: 1.3; font-weight: 600; color: #131b2c; margin-bottom: 24px;">联系我们</h2>
|
||||
<p style="font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; font-weight: 400; color: #434654;">
|
||||
如果您对本隐私政策或您的数据有任何疑问，请通过以下方式联系我们：<a href="mailto:privacy@zhixiai.com" style="color: #1550d3; text-decoration: none; hover: underline;">privacy@zhixiai.com</a>。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section style="max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; padding-bottom: 120px;">
|
||||
<div style="background-color: #e9edff; border-radius: 16px; padding: 64px; text-align: center; box-shadow: 0px 20px 40px rgba(18, 26, 43, 0.04);">
|
||||
<h3 style="font-family: 'Manrope', sans-serif; font-size: 28px; line-height: 1.3; font-weight: 600; color: #131b2c; margin-bottom: 16px;">还有隐私相关问题？</h3>
|
||||
<p style="font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; font-weight: 400; color: #434654; margin-bottom: 32px; max-width: 32rem; margin-left: auto; margin-right: auto;">
|
||||
我们的支持团队随时准备解答您关于数据安全和隐私保护的任何疑问。
|
||||
</p>
|
||||
<a href="/support" style="display: inline-block; background-color: #1550d3; color: #ffffff; font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; padding: 16px 32px; border-radius: 9999px; text-decoration: none; transition: all 0.3s; box-shadow: 0px 10px 20px rgba(21, 80, 211, 0.2);">
|
||||
联系支持
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
padding: 0 var(--page-padding) 4rem;
|
||||
}
|
||||
<style>
|
||||
@media (min-width: 768px) {
|
||||
.sidebar {
|
||||
display: block !important;
|
||||
}
|
||||
.mobile-toc {
|
||||
display: none !important;
|
||||
}
|
||||
.desktop-layout {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sidebar {
|
||||
display: none !important;
|
||||
}
|
||||
.mobile-toc {
|
||||
display: block !important;
|
||||
}
|
||||
.desktop-layout {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
}
|
||||
|
||||
.content-inner {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
details summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.toc-active {
|
||||
color: #1550d3 !important;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.sidebar nav a.active {
|
||||
color: #1550d3 !important;
|
||||
}
|
||||
|
||||
.section p {
|
||||
font-size: 0.9375rem;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.7;
|
||||
}
|
||||
</style>
|
||||
.sidebar nav a:not(.active):hover {
|
||||
color: #1550d3;
|
||||
}
|
||||
|
||||
.mobile-toc nav a.active {
|
||||
color: #1550d3 !important;
|
||||
}
|
||||
</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 setActiveLink(targetId) {
|
||||
navLinks.forEach(link => {
|
||||
link.classList.remove('active');
|
||||
});
|
||||
|
||||
if (targetId) {
|
||||
const activeLink = document.querySelector(`a[href="#${targetId}"]`);
|
||||
if (activeLink) {
|
||||
activeLink.classList.add('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);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('scroll', updateActiveNav);
|
||||
setTimeout(function() {
|
||||
setActiveLink('section-1');
|
||||
}, 100);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
156
src/pages/product.astro
Normal file
156
src/pages/product.astro
Normal file
@ -0,0 +1,156 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
|
||||
const painPoints = [
|
||||
{
|
||||
icon: 'library_books',
|
||||
title: '资料很多，但不知道先学什么',
|
||||
description: '信息过载导致无从下手，缺乏系统性的指引。',
|
||||
bgColor: 'bg-red-100',
|
||||
textColor: 'text-red-600',
|
||||
},
|
||||
{
|
||||
icon: 'edit_note',
|
||||
title: '笔记写了，却很少真正复习',
|
||||
description: '收藏即学习的错觉，遗忘曲线无人对抗。',
|
||||
bgColor: 'bg-slate-100',
|
||||
textColor: 'text-slate-600',
|
||||
},
|
||||
{
|
||||
icon: 'record_voice_over',
|
||||
title: '看懂了内容，却说不出来',
|
||||
description: '缺乏输出环节，知识停留在浅层认知。',
|
||||
bgColor: 'bg-blue-100',
|
||||
textColor: 'text-blue-600',
|
||||
},
|
||||
{
|
||||
icon: 'feedback',
|
||||
title: '没有及时反馈，不知道自己哪里薄弱',
|
||||
description: '盲目学习，无法进行针对性的强化训练。',
|
||||
bgColor: 'bg-purple-100',
|
||||
textColor: 'text-purple-600',
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="知习 AI - 产品介绍"
|
||||
description="AI 驱动的系统化学习助手，把知识库、主动回忆、AI 分析和复习计划结合起来，帮你从'看过'变成'真正学会'。"
|
||||
>
|
||||
<Header />
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="relative max-w-5xl mx-auto">
|
||||
<div class="absolute inset-0 bg-tech-blue/10 blur-[100px] rounded-full"></div>
|
||||
<div class="relative glass-card-premium rounded-[2rem] p-4 mx-auto overflow-hidden border border-white/60 shadow-2xl">
|
||||
<img
|
||||
alt="知习 AI 产品界面展示"
|
||||
src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1200&h=800&fit=crop"
|
||||
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 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="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>
|
||||
<div class="text-left whitespace-nowrap">
|
||||
<div class="text-sm font-semibold text-navy">今日学习任务</div>
|
||||
<div class="text-xs text-slate-500">3 个待复习</div>
|
||||
</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="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>
|
||||
<div class="text-left whitespace-nowrap">
|
||||
<div class="text-sm font-semibold text-navy">AI 分析反馈</div>
|
||||
<div class="text-xs text-slate-500">掌握度提升 15%</div>
|
||||
</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="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>
|
||||
<div class="text-left whitespace-nowrap">
|
||||
<div class="text-xs font-semibold text-navy">记忆曲线已优化</div>
|
||||
</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="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>
|
||||
<div class="text-left whitespace-nowrap">
|
||||
<div class="text-sm font-semibold text-navy">进度提升</div>
|
||||
<div class="text-xs text-slate-500">+23%</div>
|
||||
</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="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>
|
||||
<div class="text-left whitespace-nowrap">
|
||||
<div class="text-xs font-semibold text-navy">学习专注 2小时</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pain Points Section -->
|
||||
<section class="py-32 px-6 md:px-12 bg-gradient-to-br from-slate-50 to-blue-50">
|
||||
<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;">
|
||||
很多学习，其实只是<span class="text-tech-blue">"看过"</span>
|
||||
</h2>
|
||||
<p class="text-base text-slate-600">传统学习方式面临的挑战</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{painPoints.map((point) => (
|
||||
<div class="glass-card-premium rounded-2xl p-8 hover:-translate-y-1 transition-transform duration-300">
|
||||
<div class={`w-12 h-12 rounded-xl ${point.bgColor} ${point.textColor} flex items-center justify-center mb-6`}>
|
||||
<span class="material-symbols-outlined">{point.icon}</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-navy mb-3" style="font-family: var(--font-manrope);">{point.title}</h3>
|
||||
<p class="text-base text-slate-600">{point.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
@ -1,151 +1,276 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import Hero from '../components/Hero.astro';
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="支持与反馈 - 龙德AI学习"
|
||||
description="获取龙德AI学习的帮助与支持，反馈问题或建议。"
|
||||
>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>反馈与支持 - 知习 AI</title>
|
||||
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
||||
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
</head>
|
||||
<body style="background-color: #faf9ff; color: #131b2c; min-height: 100vh; display: flex; flex-direction: column; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'SF Pro Text', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; position: relative;">
|
||||
|
||||
<Header />
|
||||
<main>
|
||||
<Hero
|
||||
title="支持与反馈"
|
||||
subtitle="我们随时为您服务"
|
||||
/>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<section class="content">
|
||||
<div class="content-inner">
|
||||
<div class="support-card">
|
||||
<div class="icon">💬</div>
|
||||
<h2>联系我们</h2>
|
||||
<p>有问题或建议？我们很乐意听到您的声音。</p>
|
||||
<a href="mailto:support@longde.cloud" class="contact-link">support@longde.cloud</a>
|
||||
</div>
|
||||
<!-- Main Content Canvas -->
|
||||
<main style="flex: 1; padding-top: 140px; padding-bottom: 120px; 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;">
|
||||
如果你在使用知习 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>
|
||||
|
||||
<div class="faq-section">
|
||||
<h3>常见问题</h3>
|
||||
<div class="faq-list">
|
||||
<details class="faq-item">
|
||||
<summary>龙德AI学习是什么？</summary>
|
||||
<p>龙德AI学习是一个专注于公考申论、AI工具学习、前端面试的智能学习助手。</p>
|
||||
</details>
|
||||
<details class="faq-item">
|
||||
<summary>产品什么时候上线？</summary>
|
||||
<p>我们正在积极开发中，可以加入等待名单获取最新消息。</p>
|
||||
</details>
|
||||
<details class="faq-item">
|
||||
<summary>支持哪些平台？</summary>
|
||||
<p>我们计划支持 Web、iOS、Android、Mac 等平台。</p>
|
||||
</details>
|
||||
<details class="faq-item">
|
||||
<summary>如何反馈问题？</summary>
|
||||
<p>请发送邮件至 support@longde.cloud，我们会尽快回复。</p>
|
||||
</details>
|
||||
<!-- 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">
|
||||
|
||||
<!-- 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;">
|
||||
|
||||
<!-- 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"/>
|
||||
</div>
|
||||
<!-- Email -->
|
||||
<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"/>
|
||||
</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>
|
||||
<option disabled selected value="">请选择反馈类型</option>
|
||||
<option value="功能建议">功能建议</option>
|
||||
<option value="问题反馈">问题反馈</option>
|
||||
<option value="使用体验">使用体验</option>
|
||||
<option value="隐私与账号">隐私与账号</option>
|
||||
<option value="其他">其他</option>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</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;">
|
||||
|
||||
<!-- 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;">
|
||||
知习 AI 现在可以使用了吗?
|
||||
<span style="font-family: 'Material Symbols Outlined'; color: #434654; transition: transform 0.3s;">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>
|
||||
</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;">
|
||||
知习 AI 支持哪些平台?
|
||||
<span style="font-family: 'Material Symbols Outlined'; color: #434654; transition: transform 0.3s;">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>
|
||||
</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;">
|
||||
知习 AI 会保存我的学习内容吗?
|
||||
<span style="font-family: 'Material Symbols Outlined'; color: #434654; transition: transform 0.3s;">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>
|
||||
</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;">
|
||||
如何删除我的数据?
|
||||
<span style="font-family: 'Material Symbols Outlined'; color: #434654; transition: transform 0.3s;">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>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
padding: 0 var(--page-padding) 4rem;
|
||||
}
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-family: 'Material Symbols Outlined', sans-serif;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
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;
|
||||
}
|
||||
|
||||
.content-inner {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3rem;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.contact-grid {
|
||||
grid-template-columns: 2fr 1fr !important;
|
||||
}
|
||||
}
|
||||
|
||||
.support-card {
|
||||
text-align: center;
|
||||
padding: 3rem 2rem;
|
||||
background: var(--color-bg-secondary);
|
||||
border-radius: 16px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.form-row {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
.footer-inner {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
details[open] summary span {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.support-card h2 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
details:hover {
|
||||
box-shadow: 0 8px 16px rgba(18, 26, 43, 0.08);
|
||||
}
|
||||
|
||||
.support-card p {
|
||||
font-size: 0.9375rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
details summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.contact-link {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-accent);
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-accent);
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
footer a:hover {
|
||||
color: #4F7CFF !important;
|
||||
}
|
||||
|
||||
.contact-link:hover {
|
||||
background: var(--color-accent);
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
input:focus, select:focus, textarea:focus {
|
||||
border-color: #1550d3;
|
||||
box-shadow: 0 0 0 2px rgba(21, 80, 211, 0.2);
|
||||
}
|
||||
|
||||
.faq-section h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.faq-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
padding: 1rem 1.25rem;
|
||||
background: var(--color-bg-secondary);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.faq-item summary {
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.faq-item summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.faq-item[open] summary {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.faq-item p {
|
||||
font-size: 0.9375rem;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
input:hover, select:hover, textarea:hover {
|
||||
border-color: #737686;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
249
src/styles/global.css
Normal file
249
src/styles/global.css
Normal file
@ -0,0 +1,249 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-tech-blue: #4F7CFF;
|
||||
--color-navy: #121A2B;
|
||||
|
||||
--color-primary-fixed: #dce1ff;
|
||||
--color-surface-container-high: #e1e8ff;
|
||||
--color-on-error: #ffffff;
|
||||
--color-primary-container: #3c6bed;
|
||||
--color-inverse-on-surface: #edf0ff;
|
||||
--color-inverse-surface: #283042;
|
||||
--color-on-surface-variant: #434654;
|
||||
--color-secondary-fixed-dim: #c8bfff;
|
||||
--color-secondary-fixed: #e5deff;
|
||||
--color-surface-variant: #dbe2fa;
|
||||
--color-error-container: #ffdad6;
|
||||
--color-error: #ba1a1a;
|
||||
--color-on-primary: #ffffff;
|
||||
--color-on-surface: #131b2c;
|
||||
--color-primary-fixed-dim: #b5c4ff;
|
||||
--color-tertiary-fixed-dim: #c4c7ca;
|
||||
--color-tertiary-container: #727578;
|
||||
--color-background: #faf9ff;
|
||||
--color-on-tertiary-fixed-variant: #44474a;
|
||||
--color-surface-container-low: #f1f3ff;
|
||||
--color-on-tertiary-fixed: #181c1f;
|
||||
--color-inverse-primary: #b5c4ff;
|
||||
--color-outline-variant: #c3c5d7;
|
||||
--color-on-tertiary: #ffffff;
|
||||
--color-on-secondary-fixed: #190064;
|
||||
--color-surface-bright: #faf9ff;
|
||||
--color-surface-container: #e9edff;
|
||||
--color-on-primary-container: #fffbff;
|
||||
--color-on-secondary-fixed-variant: #421dc9;
|
||||
--color-on-secondary-container: #fffbff;
|
||||
--color-on-error-container: #93000a;
|
||||
--color-surface-container-highest: #dbe2fa;
|
||||
--color-on-primary-fixed-variant: #003cad;
|
||||
--color-secondary-container: #715af8;
|
||||
--color-secondary: #583dde;
|
||||
--color-surface: #faf9ff;
|
||||
--color-primary: #1550d3;
|
||||
--color-surface-container-lowest: #ffffff;
|
||||
--color-tertiary-fixed: #e0e3e6;
|
||||
--color-on-tertiary-container: #fcfcff;
|
||||
--color-on-background: #131b2c;
|
||||
--color-tertiary: #595c60;
|
||||
--color-on-primary-fixed: #00164d;
|
||||
--color-surface-dim: #d2daf1;
|
||||
--color-outline: #737686;
|
||||
--color-surface-tint: #1a53d6;
|
||||
--color-on-secondary: #ffffff;
|
||||
|
||||
--font-family-headline: 'Manrope', -apple-system, BlinkMacSystemFont, "SF Pro Display", Helvetica, Arial, sans-serif;
|
||||
--font-family-inter: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", Helvetica, Arial, sans-serif;
|
||||
|
||||
--spacing-section: 120px;
|
||||
--spacing-gutter: 24px;
|
||||
|
||||
--font-size-headline-md: 28px;
|
||||
--font-size-headline-lg: 40px;
|
||||
--font-size-display-xl: 64px;
|
||||
--font-size-body-lg: 18px;
|
||||
--font-size-body-base: 16px;
|
||||
--font-size-label-sm: 13px;
|
||||
}
|
||||
|
||||
@keyframes float-slow {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
50% { transform: translate(20px, -20px) scale(1.05); }
|
||||
}
|
||||
|
||||
@keyframes float-medium {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
50% { transform: translate(-15px, 15px) scale(1.05); }
|
||||
}
|
||||
|
||||
@keyframes float-fast {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
50% { transform: translate(10px, -10px) scale(1.05); }
|
||||
}
|
||||
|
||||
@keyframes scroll-right-to-left {
|
||||
0% { transform: translateX(200%); opacity: 0; }
|
||||
3% { opacity: 1; }
|
||||
97% { opacity: 1; }
|
||||
100% { transform: translateX(-200%); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes scroll-left-to-right {
|
||||
0% { transform: translateX(-200%); opacity: 0; }
|
||||
3% { opacity: 1; }
|
||||
97% { opacity: 1; }
|
||||
100% { transform: translateX(200%); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes breathe {
|
||||
0%, 100% { opacity: 0.8; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.05); }
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
0% { opacity: 0; transform: translateY(40px); }
|
||||
100% { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.glass-card-premium {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 30px 60px rgba(18, 26, 43, 0.05), 0 0 0 1px rgba(79, 124, 255, 0.05) inset;
|
||||
}
|
||||
|
||||
.btn-primary-gradient {
|
||||
background: linear-gradient(135deg, #4F7CFF 0%, #7861FF 100%);
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.btn-primary-gradient:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 24px rgba(79, 124, 255, 0.3);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.hover-lift {
|
||||
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 40px 80px rgba(79, 124, 255, 0.12);
|
||||
}
|
||||
|
||||
.animate-float-slow {
|
||||
animation: float-slow 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-float-medium {
|
||||
animation: float-medium 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-float-fast {
|
||||
animation: float-fast 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-scroll-right {
|
||||
animation: scroll-right-to-left 15s linear infinite;
|
||||
}
|
||||
|
||||
.animate-scroll-left {
|
||||
animation: scroll-left-to-right 12s linear infinite;
|
||||
}
|
||||
|
||||
.animate-breathe {
|
||||
animation: breathe 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp 1s ease-out forwards;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-family-headline);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
|
||||
.glass-panel {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 20px 40px rgba(18, 26, 43, 0.04);
|
||||
}
|
||||
|
||||
.bg-blueprint {
|
||||
background-image: radial-gradient(c3c5d7 1px, transparent 1px);
|
||||
background-size: 32px 32px;
|
||||
background-position: -1px -1px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.ambient-glow {
|
||||
position: absolute;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, #dce1ff 0%, transparent 70%);
|
||||
opacity: 0.5;
|
||||
filter: blur(80px);
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.icon-fill {
|
||||
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
|
||||
.font-display-xl {
|
||||
font-family: var(--font-family-headline);
|
||||
font-size: 64px;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.02em;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.font-headline-lg {
|
||||
font-family: var(--font-family-headline);
|
||||
font-size: 40px;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.01em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.font-headline-md {
|
||||
font-family: var(--font-family-headline);
|
||||
font-size: 28px;
|
||||
line-height: 1.3;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.font-body-lg {
|
||||
font-family: var(--font-family-headline);
|
||||
font-size: 18px;
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.font-body-base {
|
||||
font-family: var(--font-family-headline);
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.font-label-sm {
|
||||
font-family: var(--font-family-inter);
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 600;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user