|
|
|
|
@ -1,625 +0,0 @@
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>灵简 - Windows 轻量化学习辅助软件</title>
|
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
|
|
|
|
|
<!-- Tailwind配置：自定义颜色与字体 -->
|
|
|
|
|
<script>
|
|
|
|
|
tailwind.config = {
|
|
|
|
|
theme: {
|
|
|
|
|
extend: {
|
|
|
|
|
colors: {
|
|
|
|
|
primary: '#165DFF', // 主蓝色
|
|
|
|
|
secondary: '#36CFC9', // 辅助蓝绿色
|
|
|
|
|
neutral: '#F5F7FA', // 中性背景色
|
|
|
|
|
dark: '#1D2129', // 深色文本
|
|
|
|
|
},
|
|
|
|
|
fontFamily: {
|
|
|
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style type="text/tailwindcss">
|
|
|
|
|
@layer utilities {
|
|
|
|
|
.content-auto {
|
|
|
|
|
content-visibility: auto;
|
|
|
|
|
}
|
|
|
|
|
.text-shadow {
|
|
|
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
|
|
|
}
|
|
|
|
|
.card-hover {
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
}
|
|
|
|
|
.card-hover:hover {
|
|
|
|
|
transform: translateY(-5px);
|
|
|
|
|
box-shadow: 0 10px 20px rgba(22, 93, 255, 0.15);
|
|
|
|
|
}
|
|
|
|
|
.windows-badge {
|
|
|
|
|
background-color: #00A4EF;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body class="font-sans text-dark bg-white">
|
|
|
|
|
<!-- 导航栏 -->
|
|
|
|
|
<header id="navbar" class="fixed w-full top-0 z-50 transition-all 0.3s ease bg-white/90 backdrop-blur-sm shadow-sm">
|
|
|
|
|
<div class="container mx-auto px-4 md:px-8 py-4 flex justify-between items-center">
|
|
|
|
|
<!-- Logo -->
|
|
|
|
|
<a href="#" class="flex items-center gap-2">
|
|
|
|
|
<img src="https://picsum.photos/200/200" alt="灵简软件图标" class="w-10 h-10 rounded-lg">
|
|
|
|
|
<span class="text-xl font-bold text-dark">灵简</span>
|
|
|
|
|
<span class="windows-badge text-white text-xs px-2 py-1 rounded-full">Windows</span>
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<!-- 导航菜单 - 桌面端 -->
|
|
|
|
|
<nav class="hidden md:flex items-center gap-8">
|
|
|
|
|
<a href="#features" class="text-dark/80 hover:text-primary transition-colors">核心功能</a>
|
|
|
|
|
<a href="#tech" class="text-dark/80 hover:text-primary transition-colors">技术特色</a>
|
|
|
|
|
<a href="#deployment" class="text-dark/80 hover:text-primary transition-colors">部署方式</a>
|
|
|
|
|
<a href="#download" class="text-dark/80 hover:text-primary transition-colors">下载使用</a>
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
<!-- 下载按钮 -->
|
|
|
|
|
<a href="#download" class="hidden md:block px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
|
|
|
|
|
立即下载
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<!-- 移动端菜单按钮 -->
|
|
|
|
|
<button id="menuBtn" class="md:hidden text-dark text-xl">
|
|
|
|
|
<i class="fa fa-bars"></i>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 移动端导航菜单 -->
|
|
|
|
|
<div id="mobileMenu" class="md:hidden hidden bg-white border-t border-gray-100">
|
|
|
|
|
<div class="container mx-auto px-4 py-3 flex flex-col gap-3">
|
|
|
|
|
<a href="#features" class="py-2 text-dark/80 hover:text-primary transition-colors">核心功能</a>
|
|
|
|
|
<a href="#tech" class="py-2 text-dark/80 hover:text-primary transition-colors">技术特色</a>
|
|
|
|
|
<a href="#deployment" class="py-2 text-dark/80 hover:text-primary transition-colors">部署方式</a>
|
|
|
|
|
<a href="#download" class="py-2 text-dark/80 hover:text-primary transition-colors">下载使用</a>
|
|
|
|
|
<a href="#download" class="py-2 bg-primary text-white rounded-lg text-center hover:bg-primary/90 transition-colors">
|
|
|
|
|
立即下载
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<main class="pt-24">
|
|
|
|
|
<!-- 英雄区 -->
|
|
|
|
|
<section class="container mx-auto px-4 md:px-8 py-12 md:py-20">
|
|
|
|
|
<div class="flex flex-col md:flex-row items-center gap-10">
|
|
|
|
|
<div class="md:w-1/2 space-y-6">
|
|
|
|
|
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-shadow">
|
|
|
|
|
告别笔记碎片化<br>
|
|
|
|
|
<span class="text-primary">AI 助力高效学习</span>
|
|
|
|
|
</h1>
|
|
|
|
|
<div class="flex items-center gap-3 bg-primary/10 text-primary px-4 py-2 rounded-lg inline-block">
|
|
|
|
|
<i class="fa fa-windows"></i>
|
|
|
|
|
<span>专为 Windows 系统优化</span>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="text-lg text-dark/70 max-w-lg">
|
|
|
|
|
灵简聚焦学生“笔记管理-知识点检索-即时答疑-学习反馈”全流程需求，结合RAG与大模型技术，让学习更轻量、更高效。
|
|
|
|
|
</p>
|
|
|
|
|
<div class="flex flex-wrap gap-4 pt-4">
|
|
|
|
|
<a href="#download" class="px-8 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center gap-2">
|
|
|
|
|
<i class="fa fa-download"></i> Windows 版
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#features" class="px-8 py-3 border border-primary text-primary rounded-lg hover:bg-primary/5 transition-colors flex items-center gap-2">
|
|
|
|
|
<i class="fa fa-info-circle"></i> 了解更多
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 信任标识 -->
|
|
|
|
|
<div class="pt-6 space-y-3">
|
|
|
|
|
<p class="text-sm text-dark/50">已被全国多所高校学生使用</p>
|
|
|
|
|
<div class="flex items-center gap-6 text-dark/40">
|
|
|
|
|
<span class="text-lg">中国民航大学</span>
|
|
|
|
|
<span class="text-lg">北京大学</span>
|
|
|
|
|
<span class="text-lg">清华大学</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 产品截图 -->
|
|
|
|
|
<div class="md:w-1/2 relative">
|
|
|
|
|
<div class="absolute -top-10 -left-10 w-64 h-64 bg-primary/5 rounded-full filter blur-3xl"></div>
|
|
|
|
|
<div class="absolute -bottom-10 -right-10 w-80 h-80 bg-secondary/5 rounded-full filter blur-3xl"></div>
|
|
|
|
|
<img src="https://picsum.photos/id/0/600/400" alt="灵简软件Windows界面截图" class="w-full h-auto rounded-xl shadow-xl relative z-10">
|
|
|
|
|
<div class="absolute top-4 right-4 bg-white/90 backdrop-blur-sm px-3 py-1 rounded-full text-sm shadow-md flex items-center gap-2">
|
|
|
|
|
<i class="fa fa-windows text-blue-500"></i>
|
|
|
|
|
<span>Windows 10/11 兼容</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- 核心功能 -->
|
|
|
|
|
<section id="features" class="container mx-auto px-4 md:px-8 py-16 bg-neutral rounded-3xl my-16">
|
|
|
|
|
<div class="text-center max-w-3xl mx-auto mb-16">
|
|
|
|
|
<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">四大核心功能，解决学习痛点</h2>
|
|
|
|
|
<p class="text-dark/70 text-lg">从笔记管理到学习反馈，覆盖学生全场景学习需求，让每一次学习都有价值</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
|
|
|
<!-- 功能1：多格式笔记管理 -->
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md card-hover">
|
|
|
|
|
<div class="w-12 h-12 bg-primary/10 text-primary rounded-lg flex items-center justify-center mb-5">
|
|
|
|
|
<i class="fa fa-files-o text-xl"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<h3 class="text-xl font-semibold mb-3">多格式笔记统一管理</h3>
|
|
|
|
|
<p class="text-dark/70 mb-4">支持PDF、Word、手写拍照（JPG/PNG）上传解析，无需切换软件，统一预览编辑。</p>
|
|
|
|
|
<ul class="space-y-2 text-dark/60">
|
|
|
|
|
<li class="flex items-start gap-2">
|
|
|
|
|
<i class="fa fa-check text-secondary mt-1"></i>
|
|
|
|
|
<span>结构化提取文本与公式</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="flex items-start gap-2">
|
|
|
|
|
<i class="fa fa-check text-secondary mt-1"></i>
|
|
|
|
|
<span>按科目/标签智能分类</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="flex items-start gap-2">
|
|
|
|
|
<i class="fa fa-check text-secondary mt-1"></i>
|
|
|
|
|
<span>本地/云端双重备份</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 功能2：RAG语义检索 -->
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md card-hover">
|
|
|
|
|
<div class="w-12 h-12 bg-primary/10 text-primary rounded-lg flex items-center justify-center mb-5">
|
|
|
|
|
<i class="fa fa-search text-xl"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<h3 class="text-xl font-semibold mb-3">RAG语义检索</h3>
|
|
|
|
|
<p class="text-dark/70 mb-4">输入自然语言即可定位相关知识点，告别“文件名关键词”检索的局限性。</p>
|
|
|
|
|
<ul class="space-y-2 text-dark/60">
|
|
|
|
|
<li class="flex items-start gap-2">
|
|
|
|
|
<i class="fa fa-check text-secondary mt-1"></i>
|
|
|
|
|
<span>支持“关键词+语义”双模式</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="flex items-start gap-2">
|
|
|
|
|
<i class="fa fa-check text-secondary mt-1"></i>
|
|
|
|
|
<span>教育领域词库优化</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="flex items-start gap-2">
|
|
|
|
|
<i class="fa fa-check text-secondary mt-1"></i>
|
|
|
|
|
<span>检索结果智能排序</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 功能3：大模型答疑 -->
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md card-hover">
|
|
|
|
|
<div class="w-12 h-12 bg-primary/10 text-primary rounded-lg flex items-center justify-center mb-5">
|
|
|
|
|
<i class="fa fa-comments-o text-xl"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<h3 class="text-xl font-semibold mb-3">结合笔记的大模型答疑</h3>
|
|
|
|
|
<p class="text-dark/70 mb-4">优先基于你的笔记生成答案，补充通用知识，确保与课堂重点一致。</p>
|
|
|
|
|
<ul class="space-y-2 text-dark/60">
|
|
|
|
|
<li class="flex items-start gap-2">
|
|
|
|
|
<i class="fa fa-check text-secondary mt-1"></i>
|
|
|
|
|
<span>标注答案来源（如“2023高数笔记P5”）</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="flex items-start gap-2">
|
|
|
|
|
<i class="fa fa-check text-secondary mt-1"></i>
|
|
|
|
|
<span>支持“基于笔记片段提问”</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="flex items-start gap-2">
|
|
|
|
|
<i class="fa fa-check text-secondary mt-1"></i>
|
|
|
|
|
<span>开源/云端模型灵活切换</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 功能4：学习数据反馈 -->
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md card-hover">
|
|
|
|
|
<div class="w-12 h-12 bg-primary/10 text-primary rounded-lg flex items-center justify-center mb-5">
|
|
|
|
|
<i class="fa fa-bar-chart text-xl"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<h3 class="text-xl font-semibold mb-3">学习数据可视化反馈</h3>
|
|
|
|
|
<p class="text-dark/70 mb-4">统计检索频次与答疑主题，生成薄弱知识点报告，辅助制定复习计划。</p>
|
|
|
|
|
<ul class="space-y-2 text-dark/60">
|
|
|
|
|
<li class="flex items-start gap-2">
|
|
|
|
|
<i class="fa fa-check text-secondary mt-1"></i>
|
|
|
|
|
<span>多维度图表展示（饼图/折线图）</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="flex items-start gap-2">
|
|
|
|
|
<i class="fa fa-check text-secondary mt-1"></i>
|
|
|
|
|
<span>自动生成薄弱点分析</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="flex items-start gap-2">
|
|
|
|
|
<i class="fa fa-check text-secondary mt-1"></i>
|
|
|
|
|
<span>数据支持Excel导出</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 功能演示图表 -->
|
|
|
|
|
<div class="mt-16 bg-white p-6 md:p-8 rounded-xl shadow-md">
|
|
|
|
|
<h3 class="text-xl font-semibold mb-6 text-center">学习数据反馈示例</h3>
|
|
|
|
|
<div class="w-full h-80">
|
|
|
|
|
<canvas id="studyChart"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- 技术特色 -->
|
|
|
|
|
<section id="tech" class="container mx-auto px-4 md:px-8 py-16">
|
|
|
|
|
<div class="text-center max-w-3xl mx-auto mb-16">
|
|
|
|
|
<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">三大技术特色，保障体验</h2>
|
|
|
|
|
<p class="text-dark/70 text-lg">Windows 平台深度优化，兼顾性能与隐私保护</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
|
|
|
<!-- 特色1：多格式智能解析 -->
|
|
|
|
|
<div class="border border-gray-100 rounded-xl p-6 bg-white shadow-md card-hover">
|
|
|
|
|
<div class="mb-6 flex justify-center">
|
|
|
|
|
<div class="w-16 h-16 bg-primary/10 text-primary rounded-full flex items-center justify-center">
|
|
|
|
|
<i class="fa fa-magic text-2xl"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<h3 class="text-xl font-semibold mb-3 text-center">多格式笔记智能解析</h3>
|
|
|
|
|
<p class="text-dark/70 text-center mb-4">不仅是文件存储，更是结构化处理，为检索与答疑提供高质量数据基础。</p>
|
|
|
|
|
<div class="space-y-3 text-dark/60">
|
|
|
|
|
<div class="flex items-center gap-3 p-3 bg-neutral rounded-lg">
|
|
|
|
|
<i class="fa fa-file-pdf-o text-red-500"></i>
|
|
|
|
|
<span>PDF/Word：提取文本、公式（Mathpix API）、图片文字（OCR）</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center gap-3 p-3 bg-neutral rounded-lg">
|
|
|
|
|
<i class="fa fa-camera text-green-500"></i>
|
|
|
|
|
<span>手写拍照：场景化OCR，支持手动修正识别错误</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 特色2：检索-答疑-笔记联动 -->
|
|
|
|
|
<div class="border border-gray-100 rounded-xl p-6 bg-white shadow-md card-hover">
|
|
|
|
|
<div class="mb-6 flex justify-center">
|
|
|
|
|
<div class="w-16 h-16 bg-primary/10 text-primary rounded-full flex items-center justify-center">
|
|
|
|
|
<i class="fa fa-link text-2xl"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<h3 class="text-xl font-semibold mb-3 text-center">“检索-答疑-笔记”联动</h3>
|
|
|
|
|
<p class="text-dark/70 text-center mb-4">打破功能壁垒，形成学习闭环，减少操作成本，提升效率。</p>
|
|
|
|
|
<div class="space-y-3 text-dark/60">
|
|
|
|
|
<div class="flex items-start gap-3 p-3 bg-neutral rounded-lg">
|
|
|
|
|
<i class="fa fa-angle-right text-primary mt-1"></i>
|
|
|
|
|
<span>检索结果页可直接发起答疑，基于片段生成针对性答案</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-start gap-3 p-3 bg-neutral rounded-lg">
|
|
|
|
|
<i class="fa fa-angle-right text-primary mt-1"></i>
|
|
|
|
|
<span>答疑补充的知识点，可一键添加到对应笔记，动态完善</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 特色3：Windows平台优化 -->
|
|
|
|
|
<div class="border border-gray-100 rounded-xl p-6 bg-white shadow-md card-hover">
|
|
|
|
|
<div class="mb-6 flex justify-center">
|
|
|
|
|
<div class="w-16 h-16 bg-primary/10 text-primary rounded-full flex items-center justify-center">
|
|
|
|
|
<i class="fa fa-windows text-2xl"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<h3 class="text-xl font-semibold mb-3 text-center">Windows 平台深度优化</h3>
|
|
|
|
|
<p class="text-dark/70 text-center mb-4">针对 Windows 系统特性优化性能，提供最佳使用体验。</p>
|
|
|
|
|
<div class="space-y-3 text-dark/60">
|
|
|
|
|
<div class="flex items-start gap-3 p-3 bg-neutral rounded-lg">
|
|
|
|
|
<i class="fa fa-check text-primary mt-1"></i>
|
|
|
|
|
<span>支持 Windows 10/11 系统，兼容触控屏操作</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-start gap-3 p-3 bg-neutral rounded-lg">
|
|
|
|
|
<i class="fa fa-check text-primary mt-1"></i>
|
|
|
|
|
<span>低资源占用设计，适配主流笔记本电脑</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-start gap-3 p-3 bg-neutral rounded-lg">
|
|
|
|
|
<i class="fa fa-check text-primary mt-1"></i>
|
|
|
|
|
<span>支持 Windows Hello 快速登录，保护隐私</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- 部署方式 -->
|
|
|
|
|
<section id="deployment" class="container mx-auto px-4 md:px-8 py-16 bg-neutral rounded-3xl my-16">
|
|
|
|
|
<div class="text-center max-w-3xl mx-auto mb-16">
|
|
|
|
|
<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">灵活部署方式，适应不同场景</h2>
|
|
|
|
|
<p class="text-dark/70 text-lg">针对 Windows 平台特点，提供两种部署选择</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
|
|
|
|
|
<!-- 本地部署 -->
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
|
|
|
|
|
<div class="bg-primary/10 p-6">
|
|
|
|
|
<h3 class="text-2xl font-semibold text-primary flex items-center gap-2">
|
|
|
|
|
<i class="fa fa-desktop"></i> 本地部署
|
|
|
|
|
</h3>
|
|
|
|
|
<p class="text-dark/60 mt-2">适合个人使用、敏感笔记管理（如考研真题）</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-6 space-y-4">
|
|
|
|
|
<h4 class="font-semibold text-lg">适用场景</h4>
|
|
|
|
|
<ul class="space-y-2 text-dark/70">
|
|
|
|
|
<li class="flex items-start gap-2">
|
|
|
|
|
<i class="fa fa-check-circle text-secondary mt-1"></i>
|
|
|
|
|
<span>个人学习，需保护笔记隐私</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="flex items-start gap-2">
|
|
|
|
|
<i class="fa fa-check-circle text-secondary mt-1"></i>
|
|
|
|
|
<span>设备配置较高（8GB内存+GTX1050及以上显卡）</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="flex items-start gap-2">
|
|
|
|
|
<i class="fa fa-check-circle text-secondary mt-1"></i>
|
|
|
|
|
<span>无稳定网络环境（本地部署无需联网）</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<h4 class="font-semibold text-lg mt-6">部署步骤</h4>
|
|
|
|
|
<ol class="space-y-2 text-dark/70 list-decimal list-inside">
|
|
|
|
|
<li>下载 Windows 客户端安装包（.exe）</li>
|
|
|
|
|
<li>双击安装，支持自定义安装路径</li>
|
|
|
|
|
<li>内置FAISS向量数据库自动初始化</li>
|
|
|
|
|
<li>一键式安装开源大模型（如Llama 2-7B）</li>
|
|
|
|
|
<li>直接使用，数据存储在本地</li>
|
|
|
|
|
</ol>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 云端部署 -->
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
|
|
|
|
|
<div class="bg-secondary/10 p-6">
|
|
|
|
|
<h3 class="text-2xl font-semibold text-secondary flex items-center gap-2">
|
|
|
|
|
<i class="fa fa-cloud"></i> 云端部署
|
|
|
|
|
</h3>
|
|
|
|
|
<p class="text-dark/60 mt-2">适合小组共享（如班级）、低配置PC使用</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-6 space-y-4">
|
|
|
|
|
<h4 class="font-semibold text-lg">适用场景</h4>
|
|
|
|
|
<ul class="space-y-2 text-dark/70">
|
|
|
|
|
<li class="flex items-start gap-2">
|
|
|
|
|
<i class="fa fa-check-circle text-secondary mt-1"></i>
|
|
|
|
|
<span>小组协作，需共享部分笔记资源</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="flex items-start gap-2">
|
|
|
|
|
<i class="fa fa-check-circle text-secondary mt-1"></i>
|
|
|
|
|
<span>设备配置较低（无独立显卡、4GB内存）</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="flex items-start gap-2">
|
|
|
|
|
<i class="fa fa-check-circle text-secondary mt-1"></i>
|
|
|
|
|
<span>需多设备同步笔记（如PC+平板）</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<h4 class="font-semibold text-lg mt-6">部署步骤</h4>
|
|
|
|
|
<ol class="space-y-2 text-dark/70 list-decimal list-inside">
|
|
|
|
|
<li>下载 Windows 轻量客户端（.exe）</li>
|
|
|
|
|
<li>安装后输入团队提供的服务器地址</li>
|
|
|
|
|
<li>通过 Windows 账户授权登录</li>
|
|
|
|
|
<li>笔记加密存储在云端，本地仅缓存</li>
|
|
|
|
|
<li>检索/答疑在服务端处理，结果实时返回</li>
|
|
|
|
|
</ol>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- 下载入口 -->
|
|
|
|
|
<section id="download" class="container mx-auto px-4 md:px-8 py-16">
|
|
|
|
|
<div class="max-w-4xl mx-auto bg-gradient-to-r from-primary/90 to-primary rounded-2xl overflow-hidden shadow-xl">
|
|
|
|
|
<div class="flex flex-col md:flex-row items-center">
|
|
|
|
|
<div class="md:w-1/2 p-8 md:p-12 text-white">
|
|
|
|
|
<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">开始你的高效学习之旅</h2>
|
|
|
|
|
<p class="text-white/80 text-lg mb-8">专为 Windows 系统打造，下载后即可免费使用全部核心功能，无广告、无订阅。</p>
|
|
|
|
|
<div class="flex flex-wrap gap-4">
|
|
|
|
|
<a href="#" class="flex items-center gap-2 px-6 py-3 bg-white text-primary rounded-lg hover:bg-white/90 transition-colors">
|
|
|
|
|
<i class="fa fa-windows text-xl"></i>
|
|
|
|
|
<span>Windows 版 (.exe)</span>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mt-6 flex items-center gap-4 text-white/80">
|
|
|
|
|
<div class="flex items-center gap-1">
|
|
|
|
|
<i class="fa fa-check-circle"></i>
|
|
|
|
|
<span>支持 Win 10/11</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center gap-1">
|
|
|
|
|
<i class="fa fa-check-circle"></i>
|
|
|
|
|
<span>大小：286 MB</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="text-white/60 text-sm mt-6">当前版本：v1.0.0 | 更新时间：2025.09</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="md:w-1/2 p-8 md:p-12 bg-white/10 backdrop-blur-sm">
|
|
|
|
|
<div class="bg-white rounded-xl p-6 shadow-md">
|
|
|
|
|
<h3 class="text-xl font-semibold mb-4 text-dark">需要帮助？联系我们</h3>
|
|
|
|
|
<form class="space-y-4">
|
|
|
|
|
<div>
|
|
|
|
|
<label class="block text-dark/80 mb-2 text-sm">你的邮箱</label>
|
|
|
|
|
<input type="email" placeholder="请输入你的邮箱" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<label class="block text-dark/80 mb-2 text-sm">问题描述</label>
|
|
|
|
|
<textarea rows="3" placeholder="请描述你的问题或需求" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
<button type="submit" class="w-full px-4 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
|
|
|
|
|
提交反馈
|
|
|
|
|
</button>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
<!-- 页脚 -->
|
|
|
|
|
<footer class="bg-dark text-white py-12">
|
|
|
|
|
<div class="container mx-auto px-4 md:px-8">
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="flex items-center gap-2 mb-4">
|
|
|
|
|
<img src="https://picsum.photos/200/200" alt="灵简软件图标" class="w-10 h-10 rounded-lg">
|
|
|
|
|
<span class="text-xl font-bold">灵简</span>
|
|
|
|
|
<span class="windows-badge text-white text-xs px-2 py-1 rounded-full">Windows</span>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="text-white/60 mb-4">专为 Windows 系统打造的轻量化学习辅助工具，让笔记管理更简单，知识点应用更高效。</p>
|
|
|
|
|
<div class="flex gap-4">
|
|
|
|
|
<a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
|
|
|
|
|
<i class="fa fa-weixin"></i>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
|
|
|
|
|
<i class="fa fa-github"></i>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
|
|
|
|
|
<i class="fa fa-envelope"></i>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<h4 class="text-lg font-semibold mb-4">产品</h4>
|
|
|
|
|
<ul class="space-y-2">
|
|
|
|
|
<li><a href="#features" class="text-white/60 hover:text-white transition-colors">核心功能</a></li>
|
|
|
|
|
<li><a href="#tech" class="text-white/60 hover:text-white transition-colors">技术特色</a></li>
|
|
|
|
|
<li><a href="#deployment" class="text-white/60 hover:text-white transition-colors">部署方式</a></li>
|
|
|
|
|
<li><a href="#" class="text-white/60 hover:text-white transition-colors">更新日志</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<h4 class="text-lg font-semibold mb-4">支持</h4>
|
|
|
|
|
<ul class="space-y-2">
|
|
|
|
|
<li><a href="#" class="text-white/60 hover:text-white transition-colors">Windows 版帮助中心</a></li>
|
|
|
|
|
<li><a href="#" class="text-white/60 hover:text-white transition-colors">安装教程</a></li>
|
|
|
|
|
<li><a href="#" class="text-white/60 hover:text-white transition-colors">常见问题</a></li>
|
|
|
|
|
<li><a href="#" class="text-white/60 hover:text-white transition-colors">联系我们</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<h4 class="text-lg font-semibold mb-4">关于</h4>
|
|
|
|
|
<ul class="space-y-2">
|
|
|
|
|
<li><a href="#" class="text-white/60 hover:text-white transition-colors">团队介绍</a></li>
|
|
|
|
|
<li><a href="#" class="text-white/60 hover:text-white transition-colors">隐私政策</a></li>
|
|
|
|
|
<li><a href="#" class="text-white/60 hover:text-white transition-colors">用户协议</a></li>
|
|
|
|
|
<li><a href="#" class="text-white/60 hover:text-white transition-colors">版权声明</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="border-t border-white/10 pt-8 text-center text-white/40 text-sm">
|
|
|
|
|
<p>© 2025 灵简学习辅助软件 版权所有 | 专为 Windows 系统优化</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
<!-- JavaScript -->
|
|
|
|
|
<script>
|
|
|
|
|
// 移动端菜单切换
|
|
|
|
|
const menuBtn = document.getElementById('menuBtn');
|
|
|
|
|
const mobileMenu = document.getElementById('mobileMenu');
|
|
|
|
|
menuBtn.addEventListener('click', () => {
|
|
|
|
|
mobileMenu.classList.toggle('hidden');
|
|
|
|
|
menuBtn.innerHTML = mobileMenu.classList.contains('hidden')
|
|
|
|
|
? '<i class="fa fa-bars"></i>'
|
|
|
|
|
: '<i class="fa fa-times"></i>';
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 导航栏滚动效果
|
|
|
|
|
const navbar = document.getElementById('navbar');
|
|
|
|
|
window.addEventListener('scroll', () => {
|
|
|
|
|
if (window.scrollY > 50) {
|
|
|
|
|
navbar.classList.add('py-2', 'shadow');
|
|
|
|
|
navbar.classList.remove('py-4');
|
|
|
|
|
} else {
|
|
|
|
|
navbar.classList.add('py-4');
|
|
|
|
|
navbar.classList.remove('py-2', 'shadow');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 平滑滚动
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
|
|
|
anchor.addEventListener('click', function(e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
const targetId = this.getAttribute('href');
|
|
|
|
|
const targetElement = document.querySelector(targetId);
|
|
|
|
|
if (targetElement) {
|
|
|
|
|
window.scrollTo({
|
|
|
|
|
top: targetElement.offsetTop - 80,
|
|
|
|
|
behavior: 'smooth'
|
|
|
|
|
});
|
|
|
|
|
// 关闭移动端菜单
|
|
|
|
|
if (!mobileMenu.classList.contains('hidden')) {
|
|
|
|
|
mobileMenu.classList.add('hidden');
|
|
|
|
|
menuBtn.innerHTML = '<i class="fa fa-bars"></i>';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 学习数据图表
|
|
|
|
|
const ctx = document.getElementById('studyChart').getContext('2d');
|
|
|
|
|
const studyChart = new Chart(ctx, {
|
|
|
|
|
type: 'bar',
|
|
|
|
|
data: {
|
|
|
|
|
labels: ['微积分', '线性代数', '概率论', '大学物理', '程序设计'],
|
|
|
|
|
datasets: [
|
|
|
|
|
{
|
|
|
|
|
label: '检索频次',
|
|
|
|
|
data: [28, 15, 12, 8, 22],
|
|
|
|
|
backgroundColor: 'rgba(22, 93, 255, 0.7)',
|
|
|
|
|
borderColor: 'rgba(22, 93, 255, 1)',
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
borderRadius: 4
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '答疑次数',
|
|
|
|
|
data: [18, 10, 8, 5, 15],
|
|
|
|
|
backgroundColor: 'rgba(54, 207, 201, 0.7)',
|
|
|
|
|
borderColor: 'rgba(54, 207, 201, 1)',
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
borderRadius: 4
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
options: {
|
|
|
|
|
responsive: true,
|
|
|
|
|
maintainAspectRatio: false,
|
|
|
|
|
plugins: {
|
|
|
|
|
legend: {
|
|
|
|
|
position: 'top',
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
mode: 'index',
|
|
|
|
|
intersect: false
|
|
|
|
|
},
|
|
|
|
|
title: {
|
|
|
|
|
display: true,
|
|
|
|
|
text: '各科目检索与答疑统计（近30天）',
|
|
|
|
|
font: {
|
|
|
|
|
size: 16
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
scales: {
|
|
|
|
|
y: {
|
|
|
|
|
beginAtZero: true,
|
|
|
|
|
title: {
|
|
|
|
|
display: true,
|
|
|
|
|
text: '次数'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
x: {
|
|
|
|
|
title: {
|
|
|
|
|
display: true,
|
|
|
|
|
text: '科目'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
