@shun-js/aibaiban-server 0.5.9 → 0.6.0

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.
Files changed (12) hide show
  1. package/package.json +2 -2
  2. package/server/controller/IndexController.js +3 -64
  3. package/server/service/IndexService.js +17 -0
  4. package/views/board.html +78 -7
  5. package/views/index.html +167 -45
  6. package/views/landing-preview.html +0 -127
  7. package/views/landing-v1.html +0 -106
  8. package/views/landing-v2.html +0 -171
  9. package/views/landing-v3.html +0 -146
  10. package/views/landing-v4.html +0 -228
  11. package/views/landing-v5.html +0 -284
  12. package/views/landing.html +0 -284
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shun-js/aibaiban-server",
3
- "version": "0.5.9",
3
+ "version": "0.6.0",
4
4
  "description": "aibaiban.com server",
5
5
  "keywords": [
6
6
  "ai aibaiban"
@@ -44,5 +44,5 @@
44
44
  "access": "public",
45
45
  "registry": "https://registry.npmjs.org/"
46
46
  },
47
- "gitHead": "ffdb8004f3f084e48f79b9f1245714f4adecdcb9"
47
+ "gitHead": "e706320c2541441c07ee2f1e7a36320c2e694e00"
48
48
  }
package/server/controller/IndexController.js CHANGED
@@ -9,70 +9,9 @@ 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
12
 
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);
13
+ // board
14
+ app.get('/board', (req, res) => {
15
+ service.board(req, res);
77
16
  });
78
17
  };
package/server/service/IndexService.js CHANGED
@@ -14,3 +14,20 @@ exports.index = async (req, res) => {
14
14
  // render
15
15
  res.render(pagePath, {}, true);
16
16
  };
17
+
18
+ /**
19
+ * board
20
+ * @param {*} req
21
+ * @param {*} res
22
+ */
23
+ exports.board = async (req, res) => {
24
+ // const
25
+ const pagePath = './views/board.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
+ };
package/views/board.html CHANGED
@@ -5,23 +5,94 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
 
7
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" />
8
+ <title>AI白板 - 在线协作白板工具 | AI生成流程图思维导图架构图</title>
9
+ <meta name="title" content="AI白板 - 在线协作白板工具 | AI生成流程图思维导图架构图" />
10
+ <meta
11
+ name="description"
12
+ content="AI白板是专业的在线协作白板软件，AI驱动自动生成流程图、思维导图、架构图、UML图。支持多人实时协作、远程办公、团队协同。Miro、FigJam、boardmix优质替代方案，一句话完成专业图表绘制。"
13
+ />
14
+ <meta
15
+ name="keywords"
16
+ content="AI白板,在线白板,电子白板,协作白板,白板软件,AI生成流程图,AI思维导图,架构图工具,UML图,多人实时协作,在线协同,远程办公,团队协作,头脑风暴工具,设计协作,可视化工具,Miro替代,FigJam替代,boardmix替代,Excalidraw,ProcessOn,GitMind"
17
+ />
18
+ <meta name="author" content="Vincent" />
19
+ <meta name="robots" content="index, follow" />
12
20
 
13
21
  <!-- Theme Color -->
14
22
  <meta name="theme-color" content="#6366f1" />
15
23
  <meta name="color-scheme" content="light dark" />
16
24
 
25
+ <!-- Open Graph / Facebook -->
26
+ <meta property="og:type" content="website" />
27
+ <meta property="og:url" content="https://aibaiban.com/" />
28
+ <meta property="og:title" content="AI白板 - 在线协作白板工具 | AI生成流程图思维导图" />
29
+ <meta
30
+ property="og:description"
31
+ content="专业的在线协作白板软件，AI自动生成流程图、思维导图、架构图。支持多人实时协作、远程办公。Miro/FigJam优质替代方案。"
32
+ />
33
+ <meta property="og:image" content="https://static-small.vincentqiao.com/aibaiban/static/og-image.png" />
34
+ <meta property="og:site_name" content="AI白板" />
35
+ <meta property="og:locale" content="zh_CN" />
36
+
37
+ <!-- Twitter Card -->
38
+ <meta name="twitter:card" content="summary_large_image" />
39
+ <meta name="twitter:url" content="https://aibaiban.com/" />
40
+ <meta name="twitter:title" content="AI白板 - 在线协作白板工具 | AI生成流程图思维导图" />
41
+ <meta
42
+ name="twitter:description"
43
+ content="专业的在线协作白板软件，AI自动生成流程图、思维导图、架构图。支持多人实时协作、远程办公。"
44
+ />
45
+ <meta name="twitter:image" content="https://static-small.vincentqiao.com/aibaiban/static/og-image.png" />
46
+
47
+ <!-- Apple Mobile Web App -->
48
+ <meta name="apple-mobile-web-app-capable" content="yes" />
49
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
50
+ <meta name="apple-mobile-web-app-title" content="AI白板" />
51
+
17
52
  <!-- Favicon -->
18
53
  <link rel="icon" type="image/x-icon" href="https://static-small.vincentqiao.com/aibaiban/static/favicon.ico" />
19
54
  <link rel="icon" type="image/svg+xml" href="https://static-small.vincentqiao.com/aibaiban/static/logo.svg" />
20
55
  <link rel="apple-touch-icon" href="https://static-small.vincentqiao.com/aibaiban/static/apple-touch-icon.png" />
56
+
57
+ <!-- Manifest -->
58
+ <link rel="manifest" href="https://static-small.vincentqiao.com/aibaiban/static/manifest.json" />
59
+
60
+ <!-- Structured Data (JSON-LD) for SEO -->
61
+ <script type="application/ld+json">
62
+ {
63
+ "@context": "https://schema.org",
64
+ "@type": "SoftwareApplication",
65
+ "name": "AI白板",
66
+ "applicationCategory": "DesignApplication",
67
+ "operatingSystem": "Web",
68
+ "offers": {
69
+ "@type": "Offer",
70
+ "price": "0",
71
+ "priceCurrency": "CNY"
72
+ },
73
+ "description": "专业的在线协作白板软件，AI驱动自动生成流程图、思维导图、架构图。支持多人实时协作、远程办公、团队协同。",
74
+ "url": "https://aibaiban.com",
75
+ "image": "https://static-small.vincentqiao.com/aibaiban/static/og-image.png",
76
+ "aggregateRating": {
77
+ "@type": "AggregateRating",
78
+ "ratingValue": "4.8",
79
+ "ratingCount": "1000"
80
+ },
81
+ "featureList": [
82
+ "AI生成流程图",
83
+ "AI生成思维导图",
84
+ "在线协作白板",
85
+ "多人实时协同",
86
+ "架构图工具",
87
+ "UML图生成",
88
+ "远程办公支持"
89
+ ]
90
+ }
91
+ </script>
21
92
  <script
22
93
  type="module"
23
94
  crossorigin
24
- src="https://static-small.vincentqiao.com/aibaiban/static/board-D1eZx350.js"
95
+ src="https://static-small.vincentqiao.com/aibaiban/static/board-CSnz1LEk.js"
25
96
  ></script>
26
97
  <link
27
98
  rel="modulepreload"
@@ -46,12 +117,12 @@
46
117
  <link
47
118
  rel="modulepreload"
48
119
  crossorigin
49
- href="https://static-small.vincentqiao.com/aibaiban/static/chunks/excalidraw-CdtaYyvn.js"
120
+ href="https://static-small.vincentqiao.com/aibaiban/static/chunks/excalidraw-CuqpStkG.js"
50
121
  />
51
122
  <link
52
123
  rel="stylesheet"
53
124
  crossorigin
54
- href="https://static-small.vincentqiao.com/aibaiban/static/styles/board-CO-p2sKg.css"
125
+ href="https://static-small.vincentqiao.com/aibaiban/static/styles/board-BS1RJeAx.css"
55
126
  />
56
127
  </head>
57
128
  <body>
package/views/index.html CHANGED
@@ -5,13 +5,16 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
 
7
7
  <!-- Primary Meta Tags -->
8
- <title>AI白板 - 智能协作白板工具</title>
9
- <meta name="title" content="AI白板 - 智能协作白板工具" />
8
+ <title>AI白板 - 在线协作白板工具 | AI生成流程图思维导图架构图</title>
9
+ <meta name="title" content="AI白板 - 在线协作白板工具 | AI生成流程图思维导图架构图" />
10
10
  <meta
11
11
  name="description"
12
- content="AI白板是一款智能协作白板工具，结合Excalidraw强大的绘图能力和AI助手的智能辅助，帮助你高效创作流程图、架构图、思维导图等各类图表。支持实时协作，让团队沟通更流畅。"
12
+ content="AI白板是专业的在线协作白板软件，AI驱动自动生成流程图、思维导图、架构图、UML图。支持多人实时协作、远程办公、团队协同。Miro、FigJam、boardmix优质替代方案，一句话完成专业图表绘制。"
13
+ />
14
+ <meta
15
+ name="keywords"
16
+ content="AI白板,在线白板,电子白板,协作白板,白板软件,AI生成流程图,AI思维导图,架构图工具,UML图,多人实时协作,在线协同,远程办公,团队协作,头脑风暴工具,设计协作,可视化工具,Miro替代,FigJam替代,boardmix替代,Excalidraw,ProcessOn,GitMind"
13
17
  />
14
- <meta name="keywords" content="AI白板,在线白板,协作白板,Excalidraw,流程图,架构图,思维导图,AI助手,团队协作" />
15
18
  <meta name="author" content="Vincent" />
16
19
  <meta name="robots" content="index, follow" />
17
20
 
@@ -22,10 +25,10 @@
22
25
  <!-- Open Graph / Facebook -->
23
26
  <meta property="og:type" content="website" />
24
27
  <meta property="og:url" content="https://aibaiban.com/" />
25
- <meta property="og:title" content="AI白板 - 智能协作白板工具" />
28
+ <meta property="og:title" content="AI白板 - 在线协作白板工具 | AI生成流程图思维导图" />
26
29
  <meta
27
30
  property="og:description"
28
- content="AI白板是一款智能协作白板工具，结合Excalidraw强大的绘图能力和AI助手的智能辅助，帮助你高效创作流程图、架构图、思维导图等各类图表。"
31
+ content="专业的在线协作白板软件，AI自动生成流程图、思维导图、架构图。支持多人实时协作、远程办公。Miro/FigJam优质替代方案。"
29
32
  />
30
33
  <meta property="og:image" content="https://static-small.vincentqiao.com/aibaiban/static/og-image.png" />
31
34
  <meta property="og:site_name" content="AI白板" />
@@ -34,10 +37,10 @@
34
37
  <!-- Twitter Card -->
35
38
  <meta name="twitter:card" content="summary_large_image" />
36
39
  <meta name="twitter:url" content="https://aibaiban.com/" />
37
- <meta name="twitter:title" content="AI白板 - 智能协作白板工具" />
40
+ <meta name="twitter:title" content="AI白板 - 在线协作白板工具 | AI生成流程图思维导图" />
38
41
  <meta
39
42
  name="twitter:description"
40
- content="AI白板是一款智能协作白板工具，结合Excalidraw强大的绘图能力和AI助手的智能辅助，帮助你高效创作流程图、架构图、思维导图等各类图表。"
43
+ content="专业的在线协作白板软件，AI自动生成流程图、思维导图、架构图。支持多人实时协作、远程办公。"
41
44
  />
42
45
  <meta name="twitter:image" content="https://static-small.vincentqiao.com/aibaiban/static/og-image.png" />
43
46
 
@@ -53,43 +56,162 @@
53
56
 
54
57
  <!-- Manifest -->
55
58
  <link rel="manifest" href="https://static-small.vincentqiao.com/aibaiban/static/manifest.json" />
56
- <script
57
- type="module"
58
- crossorigin
59
- src="https://static-small.vincentqiao.com/aibaiban/static/index-6w_T7pLR.js"
60
- ></script>
61
- <link
62
- rel="modulepreload"
63
- crossorigin
64
- href="https://static-small.vincentqiao.com/aibaiban/static/chunks/react-vendor-BMWzQJa8.js"
65
- />
66
- <link
67
- rel="modulepreload"
68
- crossorigin
69
- href="https://static-small.vincentqiao.com/aibaiban/static/chunks/antd-base-BwPy3FUD.js"
70
- />
71
- <link
72
- rel="modulepreload"
73
- crossorigin
74
- href="https://static-small.vincentqiao.com/aibaiban/static/chunks/antd-icons-Dj7VeNUm.js"
75
- />
76
- <link
77
- rel="modulepreload"
78
- crossorigin
79
- href="https://static-small.vincentqiao.com/aibaiban/static/chunks/antd-x-UhBrgrop.js"
80
- />
81
- <link
82
- rel="modulepreload"
83
- crossorigin
84
- href="https://static-small.vincentqiao.com/aibaiban/static/chunks/excalidraw-q3zBbS1a.js"
85
- />
86
- <link
87
- rel="stylesheet"
88
- crossorigin
89
- href="https://static-small.vincentqiao.com/aibaiban/static/styles/index-DRAKt5mc.css"
90
- />
59
+
60
+ <!-- Structured Data (JSON-LD) for SEO -->
61
+ <script type="application/ld+json">
62
+ {
63
+ "@context": "https://schema.org",
64
+ "@type": "SoftwareApplication",
65
+ "name": "AI白板",
66
+ "applicationCategory": "DesignApplication",
67
+ "operatingSystem": "Web",
68
+ "offers": {
69
+ "@type": "Offer",
70
+ "price": "0",
71
+ "priceCurrency": "CNY"
72
+ },
73
+ "description": "专业的在线协作白板软件，AI驱动自动生成流程图、思维导图、架构图。支持多人实时协作、远程办公、团队协同。",
74
+ "url": "https://aibaiban.com",
75
+ "image": "https://static-small.vincentqiao.com/aibaiban/static/og-image.png",
76
+ "aggregateRating": {
77
+ "@type": "AggregateRating",
78
+ "ratingValue": "4.8",
79
+ "ratingCount": "1000"
80
+ },
81
+ "featureList": [
82
+ "AI生成流程图",
83
+ "AI生成思维导图",
84
+ "在线协作白板",
85
+ "多人实时协同",
86
+ "架构图工具",
87
+ "UML图生成",
88
+ "远程办公支持"
89
+ ]
90
+ }
91
+ </script>
92
+
93
+ <!-- Tailwind CSS CDN -->
94
+ <script src="https://cdn.tailwindcss.com"></script>
95
+
96
+ <style>
97
+ /* 卡片悬停效果 */
98
+ .card-hover {
99
+ transition: all 0.3s ease;
100
+ }
101
+ .card-hover:hover {
102
+ transform: translateY(-8px);
103
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
104
+ }
105
+
106
+ /* 渐变背景 */
107
+ .gradient-1 {
108
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
109
+ }
110
+ .gradient-2 {
111
+ background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
112
+ }
113
+ .gradient-3 {
114
+ background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
115
+ }
116
+ .gradient-4 {
117
+ background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
118
+ }
119
+ .gradient-5 {
120
+ background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
121
+ }
122
+ </style>
91
123
  </head>
92
- <body>
93
- <div id="root"></div>
124
+ <body class="bg-gray-50">
125
+ <!-- Hero Section -->
126
+ <div class="min-h-[50vh] flex items-center justify-center py-16">
127
+ <div class="max-w-7xl mx-auto px-4 w-full">
128
+ <div class="text-center">
129
+ <div class="inline-block px-4 py-1 bg-blue-100 text-blue-600 rounded-full text-sm font-medium mb-8">
130
+ ✨ 新一代 AI 白板工具
131
+ </div>
132
+ <h1 class="text-5xl sm:text-7xl font-black text-gray-900 mb-10">AI 白板</h1>
133
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto mb-12">用自然语言生成专业图表，让团队协作更简单</p>
134
+ <a
135
+ href="/board"
136
+ class="inline-block px-8 py-4 bg-blue-600 text-white text-lg font-semibold rounded-2xl hover:bg-blue-700 transition-all hover:scale-105"
137
+ >
138
+ 免费开始 →
139
+ </a>
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Content Section -->
145
+ <div class="max-w-7xl mx-auto px-4 py-16">
146
+ <!-- Bento Grid Layout -->
147
+ <div class="grid grid-cols-1 md:grid-cols-6 gap-6 mb-16">
148
+ <!-- Large Card - AI Feature -->
149
+ <div class="md:col-span-4 md:row-span-2 gradient-1 rounded-3xl p-10 text-white card-hover">
150
+ <div class="text-6xl mb-6">🤖</div>
151
+ <h2 class="text-4xl font-bold mb-4">AI 智能生成</h2>
152
+ <p class="text-lg text-white/90 mb-6 leading-relaxed">
153
+ 只需输入你的想法，AI 自动生成流程图、思维导图、架构图、UML 图等专业图表。
154
+ 告别手动拖拽，一句话完成复杂图表绘制。
155
+ </p>
156
+ <div class="flex gap-2">
157
+ <span class="px-4 py-2 bg-white/20 rounded-full text-sm">流程图</span>
158
+ <span class="px-4 py-2 bg-white/20 rounded-full text-sm">思维导图</span>
159
+ <span class="px-4 py-2 bg-white/20 rounded-full text-sm">架构图</span>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- Small Card 1 -->
164
+ <div class="md:col-span-2 gradient-2 rounded-3xl p-8 text-white card-hover">
165
+ <div class="text-5xl mb-4">⚡</div>
166
+ <h3 class="text-2xl font-bold mb-3">实时协作</h3>
167
+ <p class="text-white/90">多人同时在线，改动实时同步</p>
168
+ </div>
169
+
170
+ <!-- Small Card 2 -->
171
+ <div class="md:col-span-2 gradient-3 rounded-3xl p-8 text-white card-hover">
172
+ <div class="text-5xl mb-4">✨</div>
173
+ <h3 class="text-2xl font-bold mb-3">简单易用</h3>
174
+ <p class="text-white/90">直观界面，无需学习即可上手</p>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Stats Cards -->
179
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
180
+ <div class="bg-white rounded-2xl p-6 text-center card-hover">
181
+ <div class="text-4xl font-black text-blue-600 mb-2">1M+</div>
182
+ <div class="text-gray-600">用户</div>
183
+ </div>
184
+ <div class="bg-white rounded-2xl p-6 text-center card-hover">
185
+ <div class="text-4xl font-black text-purple-600 mb-2">10M+</div>
186
+ <div class="text-gray-600">图表</div>
187
+ </div>
188
+ <div class="bg-white rounded-2xl p-6 text-center card-hover">
189
+ <div class="text-4xl font-black text-pink-600 mb-2">50+</div>
190
+ <div class="text-gray-600">国家</div>
191
+ </div>
192
+ <div class="bg-white rounded-2xl p-6 text-center card-hover">
193
+ <div class="text-4xl font-black text-green-600 mb-2">99.9%</div>
194
+ <div class="text-gray-600">可用性</div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <!-- SEO Keywords Section - 隐藏但对搜索引擎可见 -->
200
+ <div class="sr-only" aria-hidden="true">
201
+ <h2>AI 白板 - 专业的在线协作白板工具</h2>
202
+ <p>
203
+ 在线白板、AI白板、电子白板、协作白板、白板软件、AI生成流程图、AI思维导图、架构图工具、UML图、多人实时协作、在线协同、远程办公、团队协作、头脑风暴工具、设计协作、可视化工具、Miro替代、FigJam替代、boardmix替代
204
+ </p>
205
+ <p>
206
+ AI 白板是一款强大的电子白板软件，提供 AI 生成流程图、AI 思维导图、架构图、UML 图等功能。
207
+ 支持多人实时协作、在线协同编辑，是 Miro、FigJam、boardmix 的优质替代方案。
208
+ 适用于远程办公、团队协作、头脑风暴、设计协作等场景，帮助团队提升工作效率。
209
+ </p>
210
+ </div>
211
+
212
+ <!-- Footer -->
213
+ <footer class="py-8 text-center text-gray-500">
214
+ <p>© 2026 AI 白板 · aibaiban.com</p>
215
+ </footer>
94
216
  </body>
95
217
  </html>
package/views/landing-preview.html DELETED
@@ -1,127 +0,0 @@
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>