143 lines
5.3 KiB
HTML
143 lines
5.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>掘金专栏封面 - Bookworm</title>
|
||
|
|
<style>
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
body { background: #111; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
|
||
|
|
.cover {
|
||
|
|
width: 480px; height: 270px;
|
||
|
|
border-radius: 8px; overflow: hidden;
|
||
|
|
position: relative; display: flex;
|
||
|
|
align-items: center; padding: 0 40px;
|
||
|
|
background: linear-gradient(135deg, #0f0c29 0%, #1a1040 40%, #302b63 100%);
|
||
|
|
}
|
||
|
|
.cover::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
||
|
|
background:
|
||
|
|
radial-gradient(circle at 85% 25%, rgba(139, 92, 246, 0.25) 0%, transparent 45%),
|
||
|
|
radial-gradient(circle at 15% 75%, rgba(34, 211, 238, 0.15) 0%, transparent 45%);
|
||
|
|
}
|
||
|
|
.cover::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
||
|
|
background: repeating-linear-gradient(
|
||
|
|
0deg, transparent, transparent 53px,
|
||
|
|
rgba(255,255,255,0.02) 53px, rgba(255,255,255,0.02) 54px
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
.left { position: relative; z-index: 1; flex: 1; }
|
||
|
|
.logo-icon {
|
||
|
|
width: 44px; height: 44px; border-radius: 10px;
|
||
|
|
background: linear-gradient(135deg, #8b5cf6, #6366f1);
|
||
|
|
display: flex; align-items: center; justify-content: center;
|
||
|
|
font-size: 22px; margin-bottom: 14px;
|
||
|
|
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
|
||
|
|
}
|
||
|
|
.title {
|
||
|
|
font-family: 'Segoe UI', -apple-system, sans-serif;
|
||
|
|
font-size: 26px; font-weight: 800; color: #fff;
|
||
|
|
line-height: 1.25; letter-spacing: -0.5px;
|
||
|
|
}
|
||
|
|
.title span { color: #a78bfa; }
|
||
|
|
.subtitle {
|
||
|
|
font-size: 13px; color: rgba(255,255,255,0.5);
|
||
|
|
margin-top: 8px; line-height: 1.5;
|
||
|
|
font-family: 'Segoe UI', sans-serif;
|
||
|
|
}
|
||
|
|
.tags {
|
||
|
|
display: flex; gap: 6px; margin-top: 12px;
|
||
|
|
}
|
||
|
|
.tag {
|
||
|
|
font-size: 10px; color: rgba(255,255,255,0.7);
|
||
|
|
background: rgba(255,255,255,0.08);
|
||
|
|
border: 1px solid rgba(255,255,255,0.12);
|
||
|
|
padding: 3px 8px; border-radius: 4px;
|
||
|
|
font-family: 'Segoe UI', sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right {
|
||
|
|
position: relative; z-index: 1;
|
||
|
|
width: 150px; display: flex; flex-direction: column;
|
||
|
|
align-items: center; gap: 6px;
|
||
|
|
}
|
||
|
|
.node-graph {
|
||
|
|
width: 150px; height: 150px; position: relative;
|
||
|
|
}
|
||
|
|
.node {
|
||
|
|
position: absolute; border-radius: 50%;
|
||
|
|
display: flex; align-items: center; justify-content: center;
|
||
|
|
font-size: 9px; font-weight: 600; color: #fff;
|
||
|
|
font-family: 'Segoe UI', sans-serif;
|
||
|
|
}
|
||
|
|
.node-center {
|
||
|
|
width: 50px; height: 50px;
|
||
|
|
background: linear-gradient(135deg, #8b5cf6, #6366f1);
|
||
|
|
top: 50px; left: 50px;
|
||
|
|
box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
|
||
|
|
font-size: 8px; text-align: center; line-height: 1.2;
|
||
|
|
}
|
||
|
|
.node-1 { width: 34px; height: 34px; background: rgba(34,211,238,0.6); top: 8px; left: 30px; font-size: 7px; }
|
||
|
|
.node-2 { width: 34px; height: 34px; background: rgba(251,146,60,0.6); top: 8px; left: 90px; font-size: 7px; }
|
||
|
|
.node-3 { width: 34px; height: 34px; background: rgba(34,197,94,0.6); top: 60px; left: 110px; font-size: 7px; }
|
||
|
|
.node-4 { width: 34px; height: 34px; background: rgba(244,63,94,0.6); top: 110px; left: 90px; font-size: 7px; }
|
||
|
|
.node-5 { width: 34px; height: 34px; background: rgba(168,85,247,0.6); top: 110px; left: 30px; font-size: 7px; }
|
||
|
|
.node-6 { width: 34px; height: 34px; background: rgba(14,165,233,0.6); top: 60px; left: 10px; font-size: 7px; }
|
||
|
|
|
||
|
|
/* connection lines via SVG */
|
||
|
|
.lines {
|
||
|
|
position: absolute; top: 0; left: 0; width: 150px; height: 150px;
|
||
|
|
}
|
||
|
|
.lines line {
|
||
|
|
stroke: rgba(255,255,255,0.1); stroke-width: 1;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="cover">
|
||
|
|
<div class="left">
|
||
|
|
<div class="logo-icon">📚</div>
|
||
|
|
<div class="title"><span>Bookworm</span><br>Smart Assistant</div>
|
||
|
|
<div class="subtitle">Claude Code 自进化智能路由系统</div>
|
||
|
|
<div class="tags">
|
||
|
|
<span class="tag">50 Skills</span>
|
||
|
|
<span class="tag">10 Agents</span>
|
||
|
|
<span class="tag">BM25</span>
|
||
|
|
<span class="tag">v5.6</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="right">
|
||
|
|
<div class="node-graph">
|
||
|
|
<svg class="lines" viewBox="0 0 150 150">
|
||
|
|
<line x1="75" y1="75" x2="47" y2="25" />
|
||
|
|
<line x1="75" y1="75" x2="107" y2="25" />
|
||
|
|
<line x1="75" y1="75" x2="127" y2="77" />
|
||
|
|
<line x1="75" y1="75" x2="107" y2="127" />
|
||
|
|
<line x1="75" y1="75" x2="47" y2="127" />
|
||
|
|
<line x1="75" y1="75" x2="27" y2="77" />
|
||
|
|
<!-- outer ring connections -->
|
||
|
|
<line x1="47" y1="25" x2="107" y2="25" opacity="0.5" />
|
||
|
|
<line x1="107" y1="25" x2="127" y2="77" opacity="0.5" />
|
||
|
|
<line x1="127" y1="77" x2="107" y2="127" opacity="0.5" />
|
||
|
|
<line x1="107" y1="127" x2="47" y2="127" opacity="0.5" />
|
||
|
|
<line x1="47" y1="127" x2="27" y2="77" opacity="0.5" />
|
||
|
|
<line x1="27" y1="77" x2="47" y2="25" opacity="0.5" />
|
||
|
|
</svg>
|
||
|
|
<div class="node node-center">Neural<br>Gateway</div>
|
||
|
|
<div class="node node-1">前端</div>
|
||
|
|
<div class="node node-2">后端</div>
|
||
|
|
<div class="node node-3">安全</div>
|
||
|
|
<div class="node node-4">DevOps</div>
|
||
|
|
<div class="node node-5">AI/ML</div>
|
||
|
|
<div class="node node-6">架构</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|