Skip to content
This repository was archived by the owner on Mar 11, 2026. It is now read-only.

Commit 440e72a

Browse files
SoulterSoulter
committed
feat: landing page(暂时)
1 parent 5a78acc commit 440e72a

5 files changed

Lines changed: 821 additions & 0 deletions

File tree

‎landing_page/index.html‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>AstrBot - 大模型多平台机器人基础设施</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
9+
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
10+
</head>
11+
<body>
12+
<nav class="navbar">
13+
<div class="container">
14+
<div class="logo"><img width="150px" src="logo.svg"></div>
15+
<ul class="nav-links">
16+
<li><a>插件市场</a></li>
17+
<li><a>文档</a></li>
18+
</ul>
19+
<div class="hamburger">
20+
<span></span>
21+
<span></span>
22+
<span></span>
23+
</div>
24+
</div>
25+
</nav>
26+
27+
<div class="hero">
28+
<div class="hero-bg-circle"></div>
29+
<div class="container">
30+
<h1 class="slogan">多平台大模型机器人基础设施</h1>
31+
<p class="sub-slogan">快速构建、部署和管理跨平台的智能聊天机器人</p>
32+
<div class="hero-buttons">
33+
<a href="#get-started" class="btn btn-primary">开始使用</a>
34+
<a href="https://github.com/AstrBotDevs/AstrBot" class="btn btn-secondary github-btn" target="_blank">
35+
<i class="fab fa-github"></i> GitHub
36+
<span class="github-stars"><span class="stars-count">...</span></span>
37+
</a>
38+
</div>
39+
<div class="hero-image-container">
40+
<img src="webui-1.png" alt="AstrBot WebUI界面" class="hero-image">
41+
</div>
42+
</div>
43+
</div>
44+
45+
<section id="features" class="section">
46+
<div class="container">
47+
<h2 class="section-title">核心特性</h2>
48+
<div class="features-grid">
49+
<div class="feature-card">
50+
<div class="feature-icon"><i class="fas fa-robot"></i></div>
51+
<h3>多平台支持</h3>
52+
<p>一套代码，多平台部署，支持主流社交媒体和即时通讯工具</p>
53+
</div>
54+
<div class="feature-card">
55+
<div class="feature-icon"><i class="fas fa-brain"></i></div>
56+
<h3>大模型集成</h3>
57+
<p>无缝对接各大AI模型，提供智能对话和内容生成能力</p>
58+
</div>
59+
<div class="feature-card">
60+
<div class="feature-icon"><i class="fas fa-plug"></i></div>
61+
<h3>插件化架构</h3>
62+
<p>灵活扩展，按需定制，快速实现各类业务需求</p>
63+
</div>
64+
<div class="feature-card">
65+
<div class="feature-icon"><i class="fas fa-shield-alt"></i></div>
66+
<h3>安全可靠</h3>
67+
<p>内置权限控制和安全机制，保障数据和系统安全</p>
68+
</div>
69+
</div>
70+
</div>
71+
</section>
72+
73+
<section id="how-it-works" class="section section-light">
74+
<div class="container">
75+
<h2 class="section-title">工作原理</h2>
76+
<div class="workflow">
77+
<div class="workflow-item">
78+
<div class="workflow-number">1</div>
79+
<h3>配置连接</h3>
80+
<p>简单配置即可连接各大平台和AI模型</p>
81+
</div>
82+
<div class="workflow-item">
83+
<div class="workflow-number">2</div>
84+
<h3>定制行为</h3>
85+
<p>通过插件和模板定制机器人行为和响应</p>
86+
</div>
87+
<div class="workflow-item">
88+
<div class="workflow-number">3</div>
89+
<h3>一键部署</h3>
90+
<p>一键部署到云端或自托管环境</p>
91+
</div>
92+
<div class="workflow-item">
93+
<div class="workflow-number">4</div>
94+
<h3>监控优化</h3>
95+
<p>实时监控和数据分析，持续优化体验</p>
96+
</div>
97+
</div>
98+
</div>
99+
</section>
100+
101+
<section id="use-cases" class="section">
102+
<div class="container">
103+
<h2 class="section-title">应用场景</h2>
104+
<div class="use-cases-grid">
105+
<div class="use-case-card">
106+
<h3>客户服务</h3>
107+
<p>24/7全天候自动回复客户询问，提高客户满意度</p>
108+
</div>
109+
<div class="use-case-card">
110+
<h3>内容创作</h3>
111+
<p>自动生成和发布营销内容，保持社交媒体活跃</p>
112+
</div>
113+
<div class="use-case-card">
114+
<h3>知识管理</h3>
115+
<p>构建企业知识库问答系统，提升信息获取效率</p>
116+
</div>
117+
<div class="use-case-card">
118+
<h3>个人助理</h3>
119+
<p>打造个性化智能助理，处理日常任务和提醒</p>
120+
</div>
121+
</div>
122+
</div>
123+
</section>
124+
125+
<section id="get-started" class="section section-light">
126+
<div class="container">
127+
<h2 class="section-title">开始使用</h2>
128+
<div class="installation-guide">
129+
<pre class="code-block"><code>npm install astrbot
130+
# 或者
131+
yarn add astrbot</code></pre>
132+
<a href="https://docs.astrbot.com" class="btn btn-primary" target="_blank">查看文档</a>
133+
</div>
134+
</div>
135+
</section>
136+
137+
<footer>
138+
<div class="container">
139+
<div class="footer-content">
140+
<div class="footer-logo">
141+
<h2>AstrBot</h2>
142+
<p>大模型多平台机器人基础设施</p>
143+
</div>
144+
<div class="footer-links">
145+
<div class="footer-links-column">
146+
<h3>资源</h3>
147+
<ul>
148+
<li><a href="#">文档</a></li>
149+
<li><a href="#">API参考</a></li>
150+
<li><a href="#">示例</a></li>
151+
<li><a href="#">教程</a></li>
152+
</ul>
153+
</div>
154+
<div class="footer-links-column">
155+
<h3>社区</h3>
156+
<ul>
157+
<li><a href="#">GitHub</a></li>
158+
<li><a href="#">Discord</a></li>
159+
<li><a href="#">Twitter</a></li>
160+
<li><a href="#">博客</a></li>
161+
</ul>
162+
</div>
163+
<div class="footer-links-column">
164+
<h3>支持</h3>
165+
<ul>
166+
<li><a href="#">常见问题</a></li>
167+
<li><a href="#">联系我们</a></li>
168+
<li><a href="#">反馈问题</a></li>
169+
</ul>
170+
</div>
171+
</div>
172+
</div>
173+
<div class="copyright">
174+
<p>&copy; 2023 AstrBot. 保留所有权利。</p>
175+
</div>
176+
</div>
177+
</footer>
178+
179+
<script src="script.js"></script>
180+
</body>
181+
</html>

‎landing_page/logo.svg‎

Lines changed: 11 additions & 0 deletions
Loading

‎landing_page/script.js‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
document.addEventListener('DOMContentLoaded', function() {
2+
// 汉堡菜单交互
3+
const hamburger = document.querySelector('.hamburger');
4+
const navLinks = document.querySelector('.nav-links');
5+
6+
if (hamburger) {
7+
hamburger.addEventListener('click', function() {
8+
navLinks.classList.toggle('active');
9+
});
10+
}
11+
12+
// 处理hero图像的3D动画效果
13+
const heroImage = document.querySelector('.hero-image');
14+
const heroSection = document.querySelector('.hero');
15+
16+
if (heroImage && heroSection) {
17+
// 初始化变换状态
18+
updateHeroImageTransform();
19+
20+
// 监听滚动事件
21+
window.addEventListener('scroll', updateHeroImageTransform);
22+
23+
function updateHeroImageTransform() {
24+
const scrollPosition = window.scrollY;
25+
const heroHeight = heroSection.offsetHeight;
26+
// 计算滚动百分比（限制在0-100%之间）
27+
const scrollPercentage = Math.min(scrollPosition / (heroHeight * 0.1), 1);
28+
29+
// 根据滚动百分比计算旋转角度
30+
const rotateX = 10 * (1 - scrollPercentage);
31+
32+
// 应用变换
33+
heroImage.style.transform = `rotateX(${rotateX}deg)`;
34+
35+
// 当完全滚动到位时添加一个类
36+
if (scrollPercentage >= 1) {
37+
heroImage.classList.add('scrolled');
38+
} else {
39+
heroImage.classList.remove('scrolled');
40+
}
41+
}
42+
}
43+
44+
// 获取GitHub Star数量
45+
function fetchGitHubStars() {
46+
const starsElement = document.querySelector('.stars-count');
47+
48+
if (starsElement) {
49+
fetch('https://api.github.com/repos/AstrBotDevs/AstrBot')
50+
.then(response => {
51+
if (!response.ok) {
52+
throw new Error('Network response was not ok');
53+
}
54+
return response.json();
55+
})
56+
.then(data => {
57+
const stars = data.stargazers_count;
58+
// 格式化星星数量，保留一位小数
59+
let formattedStars;
60+
if (stars >= 1000) {
61+
formattedStars = (stars / 1000).toFixed(1) + 'k';
62+
} else {
63+
formattedStars = stars.toString();
64+
}
65+
starsElement.textContent = formattedStars;
66+
})
67+
.catch(error => {
68+
console.error('获取GitHub stars失败:', error);
69+
starsElement.textContent = '⭐';
70+
});
71+
}
72+
}
73+
74+
// 调用函数获取星星数
75+
fetchGitHubStars();
76+
77+
// 平滑滚动
78+
const scrollLinks = document.querySelectorAll('a[href^="#"]');
79+
80+
scrollLinks.forEach(link => {
81+
link.addEventListener('click', function(e) {
82+
e.preventDefault();
83+
84+
const targetId = this.getAttribute('href');
85+
const targetElement = document.querySelector(targetId);
86+
87+
if (targetElement) {
88+
// 关闭移动菜单（如果打开）
89+
if (navLinks.classList.contains('active')) {
90+
navLinks.classList.remove('active');
91+
}
92+
93+
// 平滑滚动到目标位置
94+
window.scrollTo({
95+
top: targetElement.offsetTop - 70,
96+
behavior: 'smooth'
97+
});
98+
}
99+
});
100+
});
101+
102+
// 页面滚动时导航栏效果
103+
const navbar = document.querySelector('.navbar');
104+
105+
window.addEventListener('scroll', function() {
106+
if (window.scrollY > 50) {
107+
navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
108+
} else {
109+
navbar.style.boxShadow = 'none';
110+
}
111+
});
112+
113+
// 动画效果
114+
const animateElements = document.querySelectorAll('.feature-card, .workflow-item, .use-case-card');
115+
116+
// 简单的滚动动画
117+
function checkScroll() {
118+
animateElements.forEach(element => {
119+
const elementTop = element.getBoundingClientRect().top;
120+
const elementVisible = 150;
121+
122+
if (elementTop < window.innerHeight - elementVisible) {
123+
element.style.opacity = '1';
124+
element.style.transform = 'translateY(0)';
125+
}
126+
});
127+
}
128+
129+
// 初始化样式
130+
animateElements.forEach(element => {
131+
element.style.opacity = '0';
132+
element.style.transform = 'translateY(20px)';
133+
element.style.transition = 'all 0.6s ease';
134+
});
135+
136+
// 检查初始状态
137+
checkScroll();
138+
139+
// 监听滚动事件
140+
window.addEventListener('scroll', checkScroll);
141+
});

0 commit comments

Comments
 (0)