<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudBase AI-Deploy MCP - GitHub Header</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: transparent;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
body::before {
display: none;
}
.github-header {
width: 1200px;
height: 600px;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.98) 100%);
border-radius: 20px;
/* box-shadow:
0 25px 50px rgba(0, 0, 0, 0.8),
inset 0 1px 0 rgba(255, 255, 255, 0.1); */
display: flex;
align-items: center;
position: relative;
overflow: hidden;
backdrop-filter: blur(20px);
border: 2px solid rgba(255, 255, 255, 0.15);
}
.github-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: 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;
pointer-events: none;
}
.left-section {
flex: 1;
padding: 60px;
z-index: 2;
position: relative;
}
.project-title {
font-size: 3.8rem;
font-weight: 800;
color: #ffffff;
line-height: 1.1;
margin-bottom: 20px;
background: linear-gradient(135deg, #3b82f6 0%, #10b981 50%, #8b5cf6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
}
.project-subtitle {
font-size: 1.4rem;
font-weight: 600;
color: #10b981;
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 12px;
}
.ai-icon {
width: 36px;
height: 36px;
background: linear-gradient(135deg, #10b981 0%, #06d6a0 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
}
.slogan {
font-size: 1.3rem;
color: #ffffff;
font-weight: 600;
padding: 20px 28px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(16, 185, 129, 0.2) 100%);
border-radius: 16px;
border: 2px solid transparent;
background-clip: padding-box;
position: relative;
overflow: hidden;
}
.right-section {
flex: 1.2;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 2;
position: relative;
}
.workflow-title {
font-size: 1.3rem;
font-weight: 700;
color: #ffffff;
text-align: center;
margin-bottom: 25px;
font-family: 'JetBrains Mono', monospace;
}
.workflow-container {
position: relative;
height: 380px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.workflow-step {
position: relative;
display: flex;
align-items: center;
z-index: 3;
}
.workflow-step.core-product {
padding: 12px 16px;
background: rgba(59, 130, 246, 0.08);
border-radius: 16px;
border: 2px solid rgba(59, 130, 246, 0.3);
margin: 8px 0;
position: relative;
}
.workflow-step.core-product::before {
content: '核心';
position: absolute;
top: -8px;
right: 10px;
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white;
padding: 2px 8px;
border-radius: 8px;
font-size: 0.6rem;
font-weight: 700;
font-family: 'JetBrains Mono', monospace;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}
.workflow-step.core-product .step-node {
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.4);
border: 2px solid rgba(255, 255, 255, 0.2);
}
.workflow-step.core-product .step-title {
color: #60a5fa;
}
.step-node {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
position: relative;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}
.step-node.cursor {
background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}
.step-node.ai {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}
.step-node.mcp {
background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}
.step-node.platform {
background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);
}
.step-content {
margin-left: 15px;
flex: 1;
}
.step-title {
font-size: 0.95rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 4px;
font-family: 'JetBrains Mono', monospace;
}
.step-desc {
font-size: 0.8rem;
color: #94a3b8;
line-height: 1.3;
}
.step-tools {
font-size: 0.7rem;
color: #10b981;
font-weight: 600;
margin-top: 3px;
font-family: 'JetBrains Mono', monospace;
}
/* 静态箭头连接 */
.workflow-step:not(:last-child)::after {
content: '';
position: absolute;
left: 30px;
bottom: -20px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 12px solid #3b82f6;
z-index: 2;
}
.workflow-step:first-child::after {
border-top-color: #6b7280;
}
/* 连接线 */
.workflow-step:not(:last-child) {
position: relative;
}
.workflow-step:not(:last-child) .step-content::after {
content: '';
position: absolute;
left: -45px;
bottom: -28px;
width: 2px;
height: 16px;
background: linear-gradient(to bottom, transparent, #3b82f6);
z-index: 1;
}
.workflow-step:first-child .step-content::after {
background: linear-gradient(to bottom, transparent, #6b7280);
}
.final-apps {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 25px;
padding: 15px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.app-item {
text-align: center;
padding: 12px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
min-width: 70px;
}
.app-item:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.app-icon {
font-size: 20px;
margin-bottom: 6px;
}
.app-icon.web { color: #3b82f6; }
.app-icon.mini { color: #10b981; }
.app-icon.api { color: #8b5cf6; }
.app-label {
font-size: 0.7rem;
font-weight: 600;
color: #ffffff;
font-family: 'JetBrains Mono', monospace;
}
.time-badge {
position: absolute;
top: 30px;
right: 30px;
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: white;
padding: 14px 28px;
border-radius: 30px;
font-weight: 700;
font-size: 1.2rem;
box-shadow: 0 8px 32px rgba(245, 158, 11, 0.4);
z-index: 3;
border: 2px solid rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body>
<div class="github-header">
<div class="left-section">
<h1 class="project-title">CloudBase<br>AI ToolKit</h1>
<div class="project-subtitle">
<div class="ai-icon">
<i class="fas fa-robot"></i>
</div>
AI驱动的云开发解决方案
</div>
<div class="slogan">
<i class="fas fa-magic"></i> 用AI说话，10分钟搞定全栈应用！
</div>
</div>
<div class="right-section">
<h3 class="workflow-title">
<i class="fas fa-project-diagram"></i> 架构流程图
</h3>
<div class="workflow-container">
<div class="workflow-step">
<div class="step-node cursor">
<i class="fas fa-code"></i>
</div>
<div class="step-content">
<div class="step-title">AI编程环境</div>
<div class="step-desc">开发者使用的IDE工具</div>
<div class="step-tools">Cursor • VScode • CodeBuddy</div>
</div>
</div>
<div class="workflow-step core-product">
<div class="step-node ai">
<i class="fas fa-brain"></i>
</div>
<div class="step-content">
<div class="step-title">CloudBase AI 提示词规则</div>
<div class="step-desc">专门适配AI IDE的云开发规则</div>
<div class="step-tools">智能代码生成 • 架构设计 • 最佳实践</div>
</div>
</div>
<div class="workflow-step core-product">
<div class="step-node mcp">
<i class="fas fa-cogs"></i>
</div>
<div class="step-content">
<div class="step-title">CloudBase MCP</div>
<div class="step-desc">AI自动化部署管理</div>
<div class="step-tools">自动部署 • 日志监控 • 资源管理</div>
</div>
</div>
<div class="workflow-step core-product">
<div class="step-node platform">
<i class="fas fa-cloud"></i>
</div>
<div class="step-content">
<div class="step-title">CloudBase 云开发平台</div>
<div class="step-desc">已有330万开发者选择的 Serverless平台</div>
<div class="step-tools">云函数 • 云数据库 • 静态托管 • CDN</div>
</div>
</div>
</div>
<div class="final-apps">
<div class="app-item">
<div class="app-icon web">
<i class="fas fa-globe"></i>
</div>
<div class="app-label">Web应用</div>
</div>
<div class="app-item">
<div class="app-icon mini">
<i class="fas fa-mobile-alt"></i>
</div>
<div class="app-label">小程序</div>
</div>
<div class="app-item">
<div class="app-icon api">
<i class="fas fa-database"></i>
</div>
<div class="app-label">数据库+后端服务</div>
</div>
</div>
</div>
</div>
</body>
</html>
