Skip to content

Commit 40e5532

Browse files
bingggbinggg
committed
chore: add product-banner
1 parent fd11d16 commit 40e5532

1 file changed

Lines changed: 308 additions & 0 deletions

File tree

‎scripts/product-banner.html‎

Lines changed: 308 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,308 @@
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>CloudBase AI ToolKit - Product Update</title>
7+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
8+
<style>
9+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap');
10+
11+
* {
12+
margin: 0;
13+
padding: 0;
14+
box-sizing: border-box;
15+
}
16+
17+
body {
18+
font-family: 'Inter', sans-serif;
19+
background: transparent;
20+
min-height: 100vh;
21+
display: flex;
22+
align-items: center;
23+
justify-content: center;
24+
overflow: hidden;
25+
position: relative;
26+
}
27+
28+
.product-banner {
29+
width: 732px;
30+
height: 446px;
31+
background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.98) 100%);
32+
border-radius: 16px;
33+
display: flex;
34+
flex-direction: column;
35+
position: relative;
36+
overflow: hidden;
37+
backdrop-filter: blur(20px);
38+
border: 2px solid rgba(255, 255, 255, 0.15);
39+
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
40+
}
41+
42+
.product-banner::before {
43+
content: '';
44+
position: absolute;
45+
top: 0;
46+
left: 0;
47+
right: 0;
48+
bottom: 0;
49+
background:
50+
radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
51+
radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
52+
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(59,130,246,0.2)" stroke-width="1"/></pattern></defs><rect width="200" height="200" fill="url(%23grid)"/></svg>') repeat;
53+
pointer-events: none;
54+
}
55+
56+
.title-section {
57+
padding: 60px 40px 0px;
58+
/* text-align: center; */
59+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
60+
}
61+
62+
.title {
63+
font-size: 2.2rem;
64+
font-weight: 800;
65+
color: #ffffff;
66+
line-height: 1.2;
67+
background: linear-gradient(135deg, #3b82f6 0%, #10b981 50%, #8b5cf6 100%);
68+
-webkit-background-clip: text;
69+
-webkit-text-fill-color: transparent;
70+
background-clip: text;
71+
text-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
72+
}
73+
74+
.subtitle {
75+
font-size: 1.1rem;
76+
color: #94a3b8;
77+
line-height: 1.5;
78+
}
79+
80+
.content-section {
81+
flex: 1;
82+
display: flex;
83+
padding: 20px 40px 40px;
84+
}
85+
86+
.left-section {
87+
flex: 1.2;
88+
padding-right: 30px;
89+
z-index: 2;
90+
position: relative;
91+
}
92+
93+
.right-section {
94+
top: -100px;
95+
flex: 0.8;
96+
z-index: 2;
97+
position: relative;
98+
}
99+
100+
.features {
101+
display: flex;
102+
flex-direction: column;
103+
gap: 12px;
104+
margin-top: 20px;
105+
}
106+
107+
.feature-item {
108+
display: flex;
109+
align-items: center;
110+
gap: 12px;
111+
color: #ffffff;
112+
font-size: 0.95rem;
113+
padding: 8px 12px;
114+
background: rgba(255, 255, 255, 0.05);
115+
border-radius: 8px;
116+
border: 1px solid rgba(255, 255, 255, 0.1);
117+
transition: all 0.3s ease;
118+
}
119+
120+
.feature-item:hover {
121+
background: rgba(255, 255, 255, 0.08);
122+
transform: translateX(4px);
123+
}
124+
125+
.feature-icon {
126+
width: 24px;
127+
height: 24px;
128+
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
129+
border-radius: 6px;
130+
display: flex;
131+
align-items: center;
132+
justify-content: center;
133+
color: white;
134+
font-size: 12px;
135+
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
136+
}
137+
138+
.ide-section {
139+
flex: 1;
140+
background: rgba(255, 255, 255, 0.05);
141+
border-radius: 12px;
142+
padding: 20px;
143+
border: 1px solid rgba(255, 255, 255, 0.1);
144+
display: flex;
145+
flex-direction: column;
146+
}
147+
148+
.ide-grid {
149+
display: grid;
150+
grid-template-columns: repeat(2, 1fr);
151+
gap: 12px;
152+
margin-bottom: 16px;
153+
}
154+
155+
.ide-item {
156+
background: rgba(255, 255, 255, 0.03);
157+
border-radius: 8px;
158+
padding: 12px;
159+
display: flex;
160+
align-items: center;
161+
gap: 10px;
162+
border: 1px solid rgba(255, 255, 255, 0.05);
163+
transition: all 0.3s ease;
164+
}
165+
166+
.ide-item:hover {
167+
background: rgba(255, 255, 255, 0.08);
168+
transform: translateY(-2px);
169+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
170+
}
171+
172+
.ide-icon {
173+
width: 28px;
174+
height: 28px;
175+
background: rgba(59, 130, 246, 0.1);
176+
border-radius: 6px;
177+
display: flex;
178+
align-items: center;
179+
justify-content: center;
180+
color: #3b82f6;
181+
font-size: 14px;
182+
}
183+
184+
.ide-name {
185+
color: #ffffff;
186+
font-size: 0.85rem;
187+
font-weight: 500;
188+
}
189+
190+
.more-ides {
191+
color: #94a3b8;
192+
font-size: 0.9rem;
193+
line-height: 1.5;
194+
padding: 12px;
195+
background: rgba(255, 255, 255, 0.03);
196+
border-radius: 8px;
197+
border: 1px solid rgba(255, 255, 255, 0.05);
198+
}
199+
200+
strong {
201+
color: #3b82f6;
202+
font-weight: 600;
203+
}
204+
205+
.cta-button {
206+
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
207+
color: white;
208+
padding: 12px 24px;
209+
border-radius: 12px;
210+
font-weight: 600;
211+
font-size: 0.95rem;
212+
text-align: center;
213+
text-decoration: none;
214+
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
215+
transition: all 0.3s ease;
216+
margin-top: 16px;
217+
}
218+
219+
.cta-button:hover {
220+
transform: translateY(-2px);
221+
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
222+
}
223+
224+
.time-badge {
225+
position: absolute;
226+
top: 20px;
227+
right: 20px;
228+
background: rgba(255, 255, 255, 0.1);
229+
color: #94a3b8;
230+
padding: 6px 12px;
231+
border-radius: 20px;
232+
font-size: 0.8rem;
233+
font-weight: 600;
234+
backdrop-filter: blur(4px);
235+
}
236+
</style>
237+
</head>
238+
<body>
239+
<div class="product-banner">
240+
<div class="title-section">
241+
<h1 class="title">AI IDE 集成<br>开发效率提升 10 倍</h1>
242+
</div>
243+
244+
<div class="content-section">
245+
<div class="left-section">
246+
<p class="subtitle"><strong>CloudBase AI ToolKit </strong> 现已支持主流 AI IDE，让开发更智能、更高效</p>
247+
<div class="features">
248+
<div class="feature-item">
249+
<div class="feature-icon">
250+
<i class="fas fa-magic"></i>
251+
</div>
252+
<span>AI 自动生成前后端代码</span>
253+
</div>
254+
<div class="feature-item">
255+
<div class="feature-icon">
256+
<i class="fas fa-rocket"></i>
257+
</div>
258+
<span>一键部署到云开发平台</span>
259+
</div>
260+
<div class="feature-item">
261+
<div class="feature-icon">
262+
<i class="fas fa-robot"></i>
263+
</div>
264+
<span>智能问题诊断与修复</span>
265+
</div>
266+
</div>
267+
</div>
268+
269+
<div class="right-section">
270+
<div class="ide-section">
271+
<div class="ide-grid">
272+
<div class="ide-item">
273+
<div class="ide-icon">
274+
<i class="fas fa-code"></i>
275+
</div>
276+
<span class="ide-name">Cursor</span>
277+
</div>
278+
<div class="ide-item">
279+
<div class="ide-icon">
280+
<i class="fas fa-wind"></i>
281+
</div>
282+
<span class="ide-name">WindSurf</span>
283+
</div>
284+
<div class="ide-item">
285+
<div class="ide-icon">
286+
<i class="fas fa-robot"></i>
287+
</div>
288+
<span class="ide-name">CodeBuddy</span>
289+
</div>
290+
<div class="ide-item">
291+
<div class="ide-icon">
292+
<i class="fas fa-terminal"></i>
293+
</div>
294+
<span class="ide-name">CLINE</span>
295+
</div>
296+
</div>
297+
<div class="more-ides">
298+
同时支持 <strong>Github Copilot</strong>、 <strong>Trae</strong>、<strong>通义灵码</strong>、<strong>RooCode</strong>、<strong>文心快码</strong> 等多款 AI IDE 和 VSCode 插件
299+
</div>
300+
<a href="https://github.com/TencentCloudBase/CloudBase-AI-ToolKit" class="cta-button">
301+
<i class="fas fa-star"></i> 立即体验
302+
</a>
303+
</div>
304+
</div>
305+
</div>
306+
</div>
307+
</body>
308+
</html>

0 commit comments

Comments
 (0)