@shun-js/aibaiban-server 0.5.8 → 0.5.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +3 -3
- package/server/controller/IndexController.js +66 -0
- package/views/board.html +60 -0
- package/views/landing-preview.html +127 -0
- package/views/landing-v1.html +106 -0
- package/views/landing-v2.html +171 -0
- package/views/landing-v3.html +146 -0
- package/views/landing-v4.html +228 -0
- package/views/landing-v5.html +284 -0
- package/views/landing.html +284 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shun-js/aibaiban-server",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.9",
|
|
4
4
|
"description": "aibaiban.com server",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ai aibaiban"
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"app.js"
|
|
23
23
|
],
|
|
24
24
|
"scripts": {
|
|
25
|
-
"pack": "cp ./static
|
|
25
|
+
"pack": "cp ./static/*.html ./views",
|
|
26
26
|
"upload": "qcos fo ../../configs/aitubiao-web.json ./static aibaiban/static"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
"access": "public",
|
|
45
45
|
"registry": "https://registry.npmjs.org/"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "ffdb8004f3f084e48f79b9f1245714f4adecdcb9"
|
|
48
48
|
}
|
|
@@ -9,4 +9,70 @@ module.exports = (app) => {
|
|
|
9
9
|
app.get('/', (req, res) => {
|
|
10
10
|
service.index(req, res);
|
|
11
11
|
});
|
|
12
|
+
app.get('/landing-preview.html', async (req, res) => {
|
|
13
|
+
// const
|
|
14
|
+
const pagePath = './views/landing-preview.html';
|
|
15
|
+
|
|
16
|
+
// is static
|
|
17
|
+
const isStatic = await res.staticRender(pagePath);
|
|
18
|
+
if (isStatic) return;
|
|
19
|
+
|
|
20
|
+
// render
|
|
21
|
+
res.render(pagePath, {}, true);
|
|
22
|
+
});
|
|
23
|
+
app.get('/landing-v1.html', async (req, res) => {
|
|
24
|
+
// const
|
|
25
|
+
const pagePath = './views/landing-v1.html';
|
|
26
|
+
|
|
27
|
+
// is static
|
|
28
|
+
const isStatic = await res.staticRender(pagePath);
|
|
29
|
+
if (isStatic) return;
|
|
30
|
+
|
|
31
|
+
// render
|
|
32
|
+
res.render(pagePath, {}, true);
|
|
33
|
+
});
|
|
34
|
+
app.get('/landing-v2.html', async (req, res) => {
|
|
35
|
+
// const
|
|
36
|
+
const pagePath = './views/landing-v2.html';
|
|
37
|
+
|
|
38
|
+
// is static
|
|
39
|
+
const isStatic = await res.staticRender(pagePath);
|
|
40
|
+
if (isStatic) return;
|
|
41
|
+
|
|
42
|
+
// render
|
|
43
|
+
res.render(pagePath, {}, true);
|
|
44
|
+
});
|
|
45
|
+
app.get('/landing-v3.html', async (req, res) => {
|
|
46
|
+
// const
|
|
47
|
+
const pagePath = './views/landing-v3.html';
|
|
48
|
+
|
|
49
|
+
// is static
|
|
50
|
+
const isStatic = await res.staticRender(pagePath);
|
|
51
|
+
if (isStatic) return;
|
|
52
|
+
|
|
53
|
+
// render
|
|
54
|
+
res.render(pagePath, {}, true);
|
|
55
|
+
});
|
|
56
|
+
app.get('/landing-v4.html', async (req, res) => {
|
|
57
|
+
// const
|
|
58
|
+
const pagePath = './views/landing-v4.html';
|
|
59
|
+
|
|
60
|
+
// is static
|
|
61
|
+
const isStatic = await res.staticRender(pagePath);
|
|
62
|
+
if (isStatic) return;
|
|
63
|
+
|
|
64
|
+
// render
|
|
65
|
+
res.render(pagePath, {}, true);
|
|
66
|
+
});
|
|
67
|
+
app.get('/landing-v5.html', async (req, res) => {
|
|
68
|
+
// const
|
|
69
|
+
const pagePath = './views/landing-v5.html';
|
|
70
|
+
|
|
71
|
+
// is static
|
|
72
|
+
const isStatic = await res.staticRender(pagePath);
|
|
73
|
+
if (isStatic) return;
|
|
74
|
+
|
|
75
|
+
// render
|
|
76
|
+
res.render(pagePath, {}, true);
|
|
77
|
+
});
|
|
12
78
|
};
|
package/views/board.html
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
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
|
+
|
|
7
|
+
<!-- Primary Meta Tags -->
|
|
8
|
+
<title>AI白板 - 在线协作白板工具</title>
|
|
9
|
+
<meta name="title" content="AI白板 - 在线协作白板工具" />
|
|
10
|
+
<meta name="description" content="AI白板是专业的在线协作白板软件，AI驱动自动生成流程图、思维导图、架构图。" />
|
|
11
|
+
<meta name="robots" content="noindex, nofollow" />
|
|
12
|
+
|
|
13
|
+
<!-- Theme Color -->
|
|
14
|
+
<meta name="theme-color" content="#6366f1" />
|
|
15
|
+
<meta name="color-scheme" content="light dark" />
|
|
16
|
+
|
|
17
|
+
<!-- Favicon -->
|
|
18
|
+
<link rel="icon" type="image/x-icon" href="https://static-small.vincentqiao.com/aibaiban/static/favicon.ico" />
|
|
19
|
+
<link rel="icon" type="image/svg+xml" href="https://static-small.vincentqiao.com/aibaiban/static/logo.svg" />
|
|
20
|
+
<link rel="apple-touch-icon" href="https://static-small.vincentqiao.com/aibaiban/static/apple-touch-icon.png" />
|
|
21
|
+
<script
|
|
22
|
+
type="module"
|
|
23
|
+
crossorigin
|
|
24
|
+
src="https://static-small.vincentqiao.com/aibaiban/static/board-D1eZx350.js"
|
|
25
|
+
></script>
|
|
26
|
+
<link
|
|
27
|
+
rel="modulepreload"
|
|
28
|
+
crossorigin
|
|
29
|
+
href="https://static-small.vincentqiao.com/aibaiban/static/chunks/react-vendor-3yn_rB-k.js"
|
|
30
|
+
/>
|
|
31
|
+
<link
|
|
32
|
+
rel="modulepreload"
|
|
33
|
+
crossorigin
|
|
34
|
+
href="https://static-small.vincentqiao.com/aibaiban/static/chunks/antd-base-DsOgKHDt.js"
|
|
35
|
+
/>
|
|
36
|
+
<link
|
|
37
|
+
rel="modulepreload"
|
|
38
|
+
crossorigin
|
|
39
|
+
href="https://static-small.vincentqiao.com/aibaiban/static/chunks/antd-icons-CdlvvYvH.js"
|
|
40
|
+
/>
|
|
41
|
+
<link
|
|
42
|
+
rel="modulepreload"
|
|
43
|
+
crossorigin
|
|
44
|
+
href="https://static-small.vincentqiao.com/aibaiban/static/chunks/antd-x-BIAsZ6s9.js"
|
|
45
|
+
/>
|
|
46
|
+
<link
|
|
47
|
+
rel="modulepreload"
|
|
48
|
+
crossorigin
|
|
49
|
+
href="https://static-small.vincentqiao.com/aibaiban/static/chunks/excalidraw-CdtaYyvn.js"
|
|
50
|
+
/>
|
|
51
|
+
<link
|
|
52
|
+
rel="stylesheet"
|
|
53
|
+
crossorigin
|
|
54
|
+
href="https://static-small.vincentqiao.com/aibaiban/static/styles/board-CO-p2sKg.css"
|
|
55
|
+
/>
|
|
56
|
+
</head>
|
|
57
|
+
<body>
|
|
58
|
+
<div id="root"></div>
|
|
59
|
+
</body>
|
|
60
|
+
</html>
|
|
@@ -0,0 +1,127 @@
|
|
|
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>AI 白板 - UI 设计版本预览</title>
|
|
7
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
8
|
+
<style>
|
|
9
|
+
.preview-card {
|
|
10
|
+
transition: all 0.3s;
|
|
11
|
+
}
|
|
12
|
+
.preview-card:hover {
|
|
13
|
+
transform: translateY(-8px);
|
|
14
|
+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
|
15
|
+
}
|
|
16
|
+
</style>
|
|
17
|
+
</head>
|
|
18
|
+
<body class="bg-gray-50 min-h-screen py-12 px-4">
|
|
19
|
+
<div class="max-w-7xl mx-auto">
|
|
20
|
+
<!-- Header -->
|
|
21
|
+
<div class="text-center mb-12">
|
|
22
|
+
<h1 class="text-5xl font-black text-gray-900 mb-4">AI 白板 - UI 设计版本</h1>
|
|
23
|
+
<p class="text-xl text-gray-600">选择你喜欢的设计风格 👇</p>
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
<!-- Version Grid -->
|
|
27
|
+
<div class="grid md:grid-cols-2 gap-8 mb-12">
|
|
28
|
+
<!-- Version 1 - 现代简约 -->
|
|
29
|
+
<a href="landing-v1.html" class="block preview-card bg-white rounded-3xl overflow-hidden shadow-lg">
|
|
30
|
+
<div class="h-64 bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center">
|
|
31
|
+
<div class="text-center">
|
|
32
|
+
<div class="text-6xl mb-4">✨</div>
|
|
33
|
+
<div class="text-2xl font-bold text-gray-900">现代简约</div>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="p-6">
|
|
37
|
+
<h3 class="text-2xl font-bold text-gray-900 mb-3">版本 1：现代简约风格</h3>
|
|
38
|
+
<p class="text-gray-600 mb-4">极简主义设计，大量留白，黑白配色，适合追求简洁专业的用户</p>
|
|
39
|
+
<div class="flex gap-2">
|
|
40
|
+
<span class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm">极简</span>
|
|
41
|
+
<span class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm">大留白</span>
|
|
42
|
+
<span class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm">专业</span>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
</a>
|
|
46
|
+
|
|
47
|
+
<!-- Version 2 - 科技未来 -->
|
|
48
|
+
<a href="landing-v2.html" class="block preview-card bg-white rounded-3xl overflow-hidden shadow-lg">
|
|
49
|
+
<div class="h-64 bg-gradient-to-br from-blue-900 to-purple-900 flex items-center justify-center">
|
|
50
|
+
<div class="text-center text-white">
|
|
51
|
+
<div class="text-6xl mb-4">🚀</div>
|
|
52
|
+
<div class="text-2xl font-bold" style="text-shadow: 0 0 20px rgba(0, 212, 255, 0.8)">科技未来</div>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="p-6">
|
|
56
|
+
<h3 class="text-2xl font-bold text-gray-900 mb-3">版本 2：科技未来风格</h3>
|
|
57
|
+
<p class="text-gray-600 mb-4">深色主题，霓虹渐变，玻璃态效果，充满科技感和未来感</p>
|
|
58
|
+
<div class="flex gap-2">
|
|
59
|
+
<span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">深色</span>
|
|
60
|
+
<span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">霓虹</span>
|
|
61
|
+
<span class="px-3 py-1 bg-pink-100 text-pink-700 rounded-full text-sm">科技</span>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</a>
|
|
65
|
+
|
|
66
|
+
<!-- Version 3 - 卡片网格 -->
|
|
67
|
+
<a href="landing-v3.html" class="block preview-card bg-white rounded-3xl overflow-hidden shadow-lg">
|
|
68
|
+
<div class="h-64 bg-gradient-to-br from-blue-50 to-purple-50 flex items-center justify-center p-4">
|
|
69
|
+
<div class="grid grid-cols-2 gap-2 w-full max-w-xs">
|
|
70
|
+
<div class="h-20 bg-gradient-to-br from-purple-400 to-pink-400 rounded-xl"></div>
|
|
71
|
+
<div class="h-20 bg-gradient-to-br from-blue-400 to-cyan-400 rounded-xl"></div>
|
|
72
|
+
<div class="h-20 bg-gradient-to-br from-green-400 to-emerald-400 rounded-xl"></div>
|
|
73
|
+
<div class="h-20 bg-gradient-to-br from-yellow-400 to-orange-400 rounded-xl"></div>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
<div class="p-6">
|
|
77
|
+
<h3 class="text-2xl font-bold text-gray-900 mb-3">版本 3：卡片网格风格</h3>
|
|
78
|
+
<p class="text-gray-600 mb-4">Bento Box 布局，多彩渐变卡片，Pinterest 风格，视觉丰富</p>
|
|
79
|
+
<div class="flex gap-2">
|
|
80
|
+
<span class="px-3 py-1 bg-orange-100 text-orange-700 rounded-full text-sm">卡片</span>
|
|
81
|
+
<span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm">多彩</span>
|
|
82
|
+
<span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">网格</span>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</a>
|
|
86
|
+
|
|
87
|
+
<!-- Version 4 - 3D 交互 -->
|
|
88
|
+
<a href="landing-v4.html" class="block preview-card bg-white rounded-3xl overflow-hidden shadow-lg">
|
|
89
|
+
<div class="h-64 bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center">
|
|
90
|
+
<div class="text-center text-white">
|
|
91
|
+
<div class="text-6xl mb-4" style="transform: perspective(500px) rotateY(20deg); display: inline-block">
|
|
92
|
+
🎯
|
|
93
|
+
</div>
|
|
94
|
+
<div class="text-2xl font-bold">3D 交互</div>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
<div class="p-6">
|
|
98
|
+
<h3 class="text-2xl font-bold text-gray-900 mb-3">版本 4：3D 交互风格</h3>
|
|
99
|
+
<p class="text-gray-600 mb-4">立体效果，鼠标跟随，视差滚动，卡片倾斜，动态交互体验</p>
|
|
100
|
+
<div class="flex gap-2">
|
|
101
|
+
<span class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm">3D</span>
|
|
102
|
+
<span class="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm">视差</span>
|
|
103
|
+
<span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">交互</span>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</a>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
<!-- Version 5 - Original -->
|
|
110
|
+
<div class="bg-white rounded-3xl p-8 shadow-lg">
|
|
111
|
+
<h3 class="text-2xl font-bold text-gray-900 mb-4">版本 5：原始版本（当前生产版本）</h3>
|
|
112
|
+
<p class="text-gray-600 mb-6">渐变背景 + 浮动装饰 + 左右交替布局</p>
|
|
113
|
+
<a
|
|
114
|
+
href="landing-v5.html"
|
|
115
|
+
class="inline-block px-8 py-3 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 transition-all"
|
|
116
|
+
>
|
|
117
|
+
查看版本 5 →
|
|
118
|
+
</a>
|
|
119
|
+
</div>
|
|
120
|
+
|
|
121
|
+
<!-- Footer -->
|
|
122
|
+
<div class="text-center mt-12 text-gray-500">
|
|
123
|
+
<p>🎨 所有版本均已优化 SEO，支持响应式设计</p>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
</body>
|
|
127
|
+
</html>
|
|
@@ -0,0 +1,106 @@
|
|
|
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>AI白板 - 版本1：现代简约风格</title>
|
|
7
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
8
|
+
<style>
|
|
9
|
+
@keyframes fadeInUp {
|
|
10
|
+
from {
|
|
11
|
+
opacity: 0;
|
|
12
|
+
transform: translateY(30px);
|
|
13
|
+
}
|
|
14
|
+
to {
|
|
15
|
+
opacity: 1;
|
|
16
|
+
transform: translateY(0);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
.fade-in-up {
|
|
20
|
+
animation: fadeInUp 0.8s ease-out forwards;
|
|
21
|
+
}
|
|
22
|
+
.delay-1 {
|
|
23
|
+
animation-delay: 0.1s;
|
|
24
|
+
opacity: 0;
|
|
25
|
+
}
|
|
26
|
+
.delay-2 {
|
|
27
|
+
animation-delay: 0.2s;
|
|
28
|
+
opacity: 0;
|
|
29
|
+
}
|
|
30
|
+
.delay-3 {
|
|
31
|
+
animation-delay: 0.3s;
|
|
32
|
+
opacity: 0;
|
|
33
|
+
}
|
|
34
|
+
</style>
|
|
35
|
+
</head>
|
|
36
|
+
<body class="bg-white">
|
|
37
|
+
<!-- Hero - 极简风格，大量留白 -->
|
|
38
|
+
<div class="min-h-screen flex items-center justify-center px-4 py-20">
|
|
39
|
+
<div class="max-w-4xl mx-auto text-center">
|
|
40
|
+
<div class="fade-in-up delay-1">
|
|
41
|
+
<h1 class="text-6xl sm:text-8xl font-black text-gray-900 mb-8 tracking-tight">AI 白板</h1>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<div class="fade-in-up delay-2">
|
|
45
|
+
<p class="text-xl sm:text-2xl text-gray-600 mb-12 max-w-2xl mx-auto leading-relaxed">
|
|
46
|
+
用自然语言，生成专业图表。<br />让创作回归思考本身。
|
|
47
|
+
</p>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<div class="fade-in-up delay-3">
|
|
51
|
+
<a
|
|
52
|
+
href="/board.html"
|
|
53
|
+
class="inline-block px-12 py-4 bg-black text-white text-lg font-medium rounded-full hover:bg-gray-800 transition-all hover:scale-105"
|
|
54
|
+
>
|
|
55
|
+
开始创作 →
|
|
56
|
+
</a>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<!-- Features - 极简三列 -->
|
|
62
|
+
<div class="bg-gray-50 py-32">
|
|
63
|
+
<div class="max-w-6xl mx-auto px-4">
|
|
64
|
+
<div class="grid md:grid-cols-3 gap-16">
|
|
65
|
+
<!-- Feature 1 -->
|
|
66
|
+
<div class="text-center">
|
|
67
|
+
<div class="text-6xl mb-6">🤖</div>
|
|
68
|
+
<h3 class="text-xl font-bold text-gray-900 mb-3">AI 驱动</h3>
|
|
69
|
+
<p class="text-gray-600 leading-relaxed">自然语言描述，AI 自动生成流程图、思维导图、架构图</p>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<!-- Feature 2 -->
|
|
73
|
+
<div class="text-center">
|
|
74
|
+
<div class="text-6xl mb-6">⚡</div>
|
|
75
|
+
<h3 class="text-xl font-bold text-gray-900 mb-3">实时协作</h3>
|
|
76
|
+
<p class="text-gray-600 leading-relaxed">多人在线协同，所有改动实时同步，让团队沟通零距离</p>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<!-- Feature 3 -->
|
|
80
|
+
<div class="text-center">
|
|
81
|
+
<div class="text-6xl mb-6">✨</div>
|
|
82
|
+
<h3 class="text-xl font-bold text-gray-900 mb-3">简单易用</h3>
|
|
83
|
+
<p class="text-gray-600 leading-relaxed">直观界面，无需学习即可上手，专注于创意而非工具</p>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<!-- CTA -->
|
|
90
|
+
<div class="py-32 text-center">
|
|
91
|
+
<h2 class="text-4xl sm:text-5xl font-bold text-gray-900 mb-6">准备好了吗？</h2>
|
|
92
|
+
<p class="text-xl text-gray-600 mb-8">无需注册，立即开始</p>
|
|
93
|
+
<a
|
|
94
|
+
href="/board.html"
|
|
95
|
+
class="inline-block px-12 py-4 bg-black text-white text-lg font-medium rounded-full hover:bg-gray-800 transition-all hover:scale-105"
|
|
96
|
+
>
|
|
97
|
+
免费使用
|
|
98
|
+
</a>
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
<!-- Footer -->
|
|
102
|
+
<footer class="bg-gray-900 text-gray-400 py-8 text-center">
|
|
103
|
+
<p>© 2026 AI 白板 · aibaiban.com</p>
|
|
104
|
+
</footer>
|
|
105
|
+
</body>
|
|
106
|
+
</html>
|
|
@@ -0,0 +1,171 @@
|
|
|
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>AI白板 - 版本2：科技未来风格</title>
|
|
7
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
8
|
+
<style>
|
|
9
|
+
/* 霓虹渐变背景 */
|
|
10
|
+
body {
|
|
11
|
+
background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
|
|
12
|
+
color: white;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/* 玻璃态效果 */
|
|
16
|
+
.glass {
|
|
17
|
+
background: rgba(255, 255, 255, 0.05);
|
|
18
|
+
backdrop-filter: blur(10px);
|
|
19
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/* 霓虹文字 */
|
|
23
|
+
.neon-text {
|
|
24
|
+
text-shadow:
|
|
25
|
+
0 0 10px #00d4ff,
|
|
26
|
+
0 0 20px #00d4ff,
|
|
27
|
+
0 0 30px #00d4ff;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* 发光按钮 */
|
|
31
|
+
.glow-btn {
|
|
32
|
+
box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
|
|
33
|
+
transition: all 0.3s;
|
|
34
|
+
}
|
|
35
|
+
.glow-btn:hover {
|
|
36
|
+
box-shadow:
|
|
37
|
+
0 0 30px rgba(0, 212, 255, 0.8),
|
|
38
|
+
0 0 60px rgba(0, 212, 255, 0.4);
|
|
39
|
+
transform: translateY(-2px);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* 网格背景 */
|
|
43
|
+
.grid-bg {
|
|
44
|
+
background-image:
|
|
45
|
+
linear-gradient(rgba(0, 212, 255, 0.1) 1px, transparent 1px),
|
|
46
|
+
linear-gradient(90deg, rgba(0, 212, 255, 0.1) 1px, transparent 1px);
|
|
47
|
+
background-size: 50px 50px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* 浮动动画 */
|
|
51
|
+
@keyframes float {
|
|
52
|
+
0%,
|
|
53
|
+
100% {
|
|
54
|
+
transform: translateY(0px);
|
|
55
|
+
}
|
|
56
|
+
50% {
|
|
57
|
+
transform: translateY(-20px);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
.float {
|
|
61
|
+
animation: float 6s ease-in-out infinite;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* 脉冲动画 */
|
|
65
|
+
@keyframes pulse-glow {
|
|
66
|
+
0%,
|
|
67
|
+
100% {
|
|
68
|
+
box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
|
|
69
|
+
}
|
|
70
|
+
50% {
|
|
71
|
+
box-shadow: 0 0 40px rgba(0, 212, 255, 1);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
.pulse-glow {
|
|
75
|
+
animation: pulse-glow 2s ease-in-out infinite;
|
|
76
|
+
}
|
|
77
|
+
</style>
|
|
78
|
+
</head>
|
|
79
|
+
<body class="grid-bg">
|
|
80
|
+
<!-- Hero Section -->
|
|
81
|
+
<div class="min-h-screen flex items-center justify-center px-4 relative overflow-hidden">
|
|
82
|
+
<!-- 装饰性光圈 -->
|
|
83
|
+
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-cyan-500 rounded-full filter blur-3xl opacity-20 float"></div>
|
|
84
|
+
<div
|
|
85
|
+
class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-500 rounded-full filter blur-3xl opacity-20 float"
|
|
86
|
+
style="animation-delay: 1s"
|
|
87
|
+
></div>
|
|
88
|
+
|
|
89
|
+
<div class="relative z-10 max-w-5xl mx-auto text-center">
|
|
90
|
+
<!-- Logo -->
|
|
91
|
+
<div class="inline-block px-6 py-2 glass rounded-full mb-8">
|
|
92
|
+
<span class="text-cyan-400 font-bold">🚀 AI WHITEBOARD</span>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<!-- Title -->
|
|
96
|
+
<h1 class="text-5xl sm:text-7xl font-black mb-6 neon-text">AI 白板</h1>
|
|
97
|
+
<div class="h-1 w-32 mx-auto bg-gradient-to-r from-cyan-400 to-purple-500 mb-8 pulse-glow"></div>
|
|
98
|
+
|
|
99
|
+
<!-- Subtitle -->
|
|
100
|
+
<p class="text-xl sm:text-2xl text-gray-300 mb-12 max-w-3xl mx-auto">
|
|
101
|
+
下一代智能协作平台<br />
|
|
102
|
+
<span class="text-cyan-400">AI 驱动</span> · <span class="text-purple-400">实时协同</span> ·
|
|
103
|
+
<span class="text-pink-400">极速创作</span>
|
|
104
|
+
</p>
|
|
105
|
+
|
|
106
|
+
<!-- CTA -->
|
|
107
|
+
<a
|
|
108
|
+
href="/board.html"
|
|
109
|
+
class="inline-block px-10 py-4 bg-gradient-to-r from-cyan-500 to-purple-500 text-white text-lg font-bold rounded-full glow-btn"
|
|
110
|
+
>
|
|
111
|
+
开始创作 →
|
|
112
|
+
</a>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<!-- Features Section -->
|
|
117
|
+
<div class="py-20 px-4">
|
|
118
|
+
<div class="max-w-6xl mx-auto">
|
|
119
|
+
<h2 class="text-4xl font-bold text-center mb-16 neon-text">核心功能</h2>
|
|
120
|
+
|
|
121
|
+
<div class="grid md:grid-cols-3 gap-8">
|
|
122
|
+
<!-- Feature 1 -->
|
|
123
|
+
<div class="glass rounded-2xl p-8 hover:bg-white/10 transition-all">
|
|
124
|
+
<div class="text-5xl mb-4">🤖</div>
|
|
125
|
+
<h3 class="text-2xl font-bold mb-4 text-cyan-400">AI 智能生成</h3>
|
|
126
|
+
<p class="text-gray-300 leading-relaxed">输入自然语言，AI 自动生成流程图、思维导图、架构图等专业图表</p>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<!-- Feature 2 -->
|
|
130
|
+
<div class="glass rounded-2xl p-8 hover:bg-white/10 transition-all">
|
|
131
|
+
<div class="text-5xl mb-4">⚡</div>
|
|
132
|
+
<h3 class="text-2xl font-bold mb-4 text-purple-400">实时协作</h3>
|
|
133
|
+
<p class="text-gray-300 leading-relaxed">多人同时在线编辑，所有改动实时同步，团队协作零延迟</p>
|
|
134
|
+
</div>
|
|
135
|
+
|
|
136
|
+
<!-- Feature 3 -->
|
|
137
|
+
<div class="glass rounded-2xl p-8 hover:bg-white/10 transition-all">
|
|
138
|
+
<div class="text-5xl mb-4">✨</div>
|
|
139
|
+
<h3 class="text-2xl font-bold mb-4 text-pink-400">极简体验</h3>
|
|
140
|
+
<p class="text-gray-300 leading-relaxed">直观界面设计，无需学习即可上手，让你专注于创意本身</p>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
|
|
146
|
+
<!-- Stats Section -->
|
|
147
|
+
<div class="py-20 px-4">
|
|
148
|
+
<div class="max-w-6xl mx-auto glass rounded-3xl p-12">
|
|
149
|
+
<div class="grid md:grid-cols-3 gap-8 text-center">
|
|
150
|
+
<div>
|
|
151
|
+
<div class="text-5xl font-black text-cyan-400 mb-2">1M+</div>
|
|
152
|
+
<div class="text-gray-400">用户使用</div>
|
|
153
|
+
</div>
|
|
154
|
+
<div>
|
|
155
|
+
<div class="text-5xl font-black text-purple-400 mb-2">10M+</div>
|
|
156
|
+
<div class="text-gray-400">图表生成</div>
|
|
157
|
+
</div>
|
|
158
|
+
<div>
|
|
159
|
+
<div class="text-5xl font-black text-pink-400 mb-2">99.9%</div>
|
|
160
|
+
<div class="text-gray-400">服务可用性</div>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
|
|
166
|
+
<!-- Footer -->
|
|
167
|
+
<footer class="py-8 text-center text-gray-500 border-t border-gray-800">
|
|
168
|
+
<p>© 2026 AI 白板 · 未来从这里开始</p>
|
|
169
|
+
</footer>
|
|
170
|
+
</body>
|
|
171
|
+
</html>
|