feat: adopt monochrome topological lock brand icon (Option D)
This commit is contained in:
weidu12123 committed
1 parent
ace7e83f58
commit
ac92ac981a
8 files changed
+2302
-63
No files matched your search
@@ -0,0 +1,477 @@
|
||||
<title>VPS Switch 视觉图标方案</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg-ground: #f8fafc;
|
||||
--surface-card: #ffffff;
|
||||
--border-subtle: #e2e8f0;
|
||||
--text-primary: #0f172a;
|
||||
--text-muted: #64748b;
|
||||
--accent-orange: #f97316;
|
||||
--accent-emerald: #10b981;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--bg-ground: #0b0f17;
|
||||
--surface-card: #151d2a;
|
||||
--border-subtle: #243144;
|
||||
--text-primary: #f8fafc;
|
||||
--text-muted: #94a3b8;
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--bg-ground: #0b0f17;
|
||||
--surface-card: #151d2a;
|
||||
--border-subtle: #243144;
|
||||
--text-primary: #f8fafc;
|
||||
--text-muted: #94a3b8;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--bg-ground);
|
||||
color: var(--text-primary);
|
||||
padding: 32px 20px;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1120px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
.header h1 {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 8px 0;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.header p {
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 24px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 20px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.badge-rec {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
background: rgba(249, 115, 22, 0.12);
|
||||
color: var(--accent-orange);
|
||||
border: 1px solid rgba(249, 115, 22, 0.3);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
.card-subtitle {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.hero-icon-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 28px 0;
|
||||
background: radial-gradient(circle at 50% 50%, rgba(241, 245, 249, 0.8), transparent 70%);
|
||||
border-radius: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hero-svg {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.12));
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.hero-svg:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.scale-preview {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.scale-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.scale-caption {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.taskbar-sim {
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.taskbar-dark {
|
||||
background: #1e1e24;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
.taskbar-light {
|
||||
background: #f1f3f9;
|
||||
color: #1e293b;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
.taskbar-sim-title {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.taskbar-sim-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 16px 0 0 0;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.feature-list li {
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
}
|
||||
.feature-list li::before {
|
||||
content: "•";
|
||||
color: var(--accent-orange);
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>VPS Switch 品牌图标视觉重构</h1>
|
||||
<p>彻底告别纯黑死板底色与通用命令行符，带来富有生命力、辨识度极高且深度贴合产品本质的原创品牌印记。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<!-- 方向 1 -->
|
||||
<div class="card">
|
||||
<span class="badge-rec">首推方向</span>
|
||||
<h2 class="card-title">方向 1 · 日落暖橙穿梭 S 轨</h2>
|
||||
<p class="card-subtitle">活力炽热 · 现代基建软件质感 · 极高辨识度</p>
|
||||
|
||||
<div class="hero-icon-box">
|
||||
<svg class="hero-svg" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="g1" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FF5722"/>
|
||||
<stop offset="50%" stop-color="#F97316"/>
|
||||
<stop offset="100%" stop-color="#EA580C"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="hl1" x1="0" y1="0" x2="0" y2="64" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.45"/>
|
||||
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0.05"/>
|
||||
</linearGradient>
|
||||
<filter id="sd1" x="-10%" y="-10%" width="130%" height="130%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="2.5" flood-color="#7C2D12" flood-opacity="0.35"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<rect width="64" height="64" rx="16" fill="url(#g1)"/>
|
||||
<rect x="0.75" y="0.75" width="62.5" height="62.5" rx="15.25" stroke="url(#hl1)" stroke-width="1.5"/>
|
||||
<g filter="url(#sd1)">
|
||||
<rect x="14" y="16" width="22" height="7" rx="3.5" fill="#FFFFFF"/>
|
||||
<rect x="28" y="41" width="22" height="7" rx="3.5" fill="#FFFFFF"/>
|
||||
<path d="M30 19.5 H37 C41 19.5 44 22.5 44 26.5 C44 30.5 41 33.5 37 33.5 H27 C23 33.5 20 36.5 20 40.5 C20 44.5 23 44.5 27 44.5 H34" stroke="#FFFFFF" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<circle cx="48" cy="19.5" r="3.5" fill="#10B981"/>
|
||||
<circle cx="48" cy="19.5" r="4.5" stroke="#FFFFFF" stroke-width="1.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="section-label">不同系统尺寸实测</div>
|
||||
<div class="scale-preview">
|
||||
<div class="scale-item">
|
||||
<svg width="48" height="48" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="url(#g1)"/>
|
||||
<rect x="14" y="16" width="22" height="7" rx="3.5" fill="#FFFFFF"/>
|
||||
<rect x="28" y="41" width="22" height="7" rx="3.5" fill="#FFFFFF"/>
|
||||
<path d="M30 19.5 H37 C41 19.5 44 22.5 44 26.5 C44 30.5 41 33.5 37 33.5 H27 C23 33.5 20 36.5 20 40.5 C20 44.5 23 44.5 27 44.5 H34" stroke="#FFFFFF" stroke-width="4.5" stroke-linecap="round"/>
|
||||
<circle cx="48" cy="19.5" r="3.5" fill="#10B981"/>
|
||||
</svg>
|
||||
<span class="scale-caption">48px 窗口</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="32" height="32" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="url(#g1)"/>
|
||||
<rect x="14" y="16" width="22" height="7" rx="3.5" fill="#FFFFFF"/>
|
||||
<rect x="28" y="41" width="22" height="7" rx="3.5" fill="#FFFFFF"/>
|
||||
<path d="M30 19.5 H37 C41 19.5 44 22.5 44 26.5 C44 30.5 41 33.5 37 33.5 H27 C23 33.5 20 36.5 20 40.5 C20 44.5 23 44.5 27 44.5 H34" stroke="#FFFFFF" stroke-width="4.5" stroke-linecap="round"/>
|
||||
<circle cx="48" cy="19.5" r="3.5" fill="#10B981"/>
|
||||
</svg>
|
||||
<span class="scale-caption">32px 任务栏</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="20" height="20" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="url(#g1)"/>
|
||||
<rect x="14" y="16" width="22" height="7" rx="3.5" fill="#FFFFFF"/>
|
||||
<rect x="28" y="41" width="22" height="7" rx="3.5" fill="#FFFFFF"/>
|
||||
<path d="M30 19.5 H37 C41 19.5 44 22.5 44 26.5 C44 30.5 41 33.5 37 33.5 H27 C23 33.5 20 36.5 20 40.5 C20 44.5 23 44.5 27 44.5 H34" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round"/>
|
||||
<circle cx="48" cy="19.5" r="3.5" fill="#10B981"/>
|
||||
</svg>
|
||||
<span class="scale-caption">20px 托盘</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-label">Windows 任务栏环境模拟</div>
|
||||
<div class="taskbar-sim taskbar-dark">
|
||||
<span class="taskbar-sim-title">深色任务栏</span>
|
||||
<div class="taskbar-sim-icons">
|
||||
<svg width="24" height="24" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="url(#g1)"/><rect x="14" y="16" width="22" height="7" rx="3.5" fill="#FFFFFF"/><rect x="28" y="41" width="22" height="7" rx="3.5" fill="#FFFFFF"/><circle cx="48" cy="19.5" r="4" fill="#10B981"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="taskbar-sim taskbar-light">
|
||||
<span class="taskbar-sim-title">浅色任务栏</span>
|
||||
<div class="taskbar-sim-icons">
|
||||
<svg width="24" height="24" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="url(#g1)"/><rect x="14" y="16" width="22" height="7" rx="3.5" fill="#FFFFFF"/><rect x="28" y="41" width="22" height="7" rx="3.5" fill="#FFFFFF"/><circle cx="48" cy="19.5" r="4" fill="#10B981"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="feature-list">
|
||||
<li><strong>品牌张力</strong>：彻底消灭压抑黑底，暖橙珊瑚底色像一把利刃切出辨识度。</li>
|
||||
<li><strong>意象</strong>：双层服务器切片被一道流线 S 串联，直观表达「在 VPS 之间极速切换」。</li>
|
||||
<li><strong>微点</strong>：右上角常亮翡翠绿点，象征 29 台云端主机全天候在线守护。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 方向 2 -->
|
||||
<div class="card">
|
||||
<h2 class="card-title">方向 2 · 白瓷微光双色咬合 S 标</h2>
|
||||
<p class="card-subtitle">极简克制 · 浑然一体 · 与毛玻璃界面完美呼应</p>
|
||||
|
||||
<div class="hero-icon-box">
|
||||
<svg class="hero-svg" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="g2" x1="0" y1="0" x2="0" y2="64" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FFFFFF"/>
|
||||
<stop offset="100%" stop-color="#F1F5F9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="org2" x1="12" y1="14" x2="52" y2="34" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FF6B35"/>
|
||||
<stop offset="100%" stop-color="#F97316"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="emd2" x1="12" y1="30" x2="52" y2="50" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#10B981"/>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<filter id="sd2" x="-10%" y="-10%" width="130%" height="130%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#0F172A" flood-opacity="0.08"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<rect width="64" height="64" rx="16" fill="url(#g2)"/>
|
||||
<rect x="0.75" y="0.75" width="62.5" height="62.5" rx="15.25" stroke="#CBD5E1" stroke-width="1.2"/>
|
||||
<g filter="url(#sd2)">
|
||||
<path d="M20 30 C20 20.5 25.5 16 34 16 C43 16 47 21 47 27 C47 33 41 35 32 35" stroke="url(#org2)" stroke-width="5.5" stroke-linecap="round"/>
|
||||
<path d="M44 34 C44 43.5 38.5 48 30 48 C21 48 17 43 17 37 C17 31 23 29 32 29" stroke="url(#emd2)" stroke-width="5.5" stroke-linecap="round"/>
|
||||
<circle cx="32" cy="32" r="3.2" fill="#FFFFFF" stroke="#0F172A" stroke-width="1.2"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="section-label">不同系统尺寸实测</div>
|
||||
<div class="scale-preview">
|
||||
<div class="scale-item">
|
||||
<svg width="48" height="48" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="url(#g2)" stroke="#CBD5E1" stroke-width="1.2"/>
|
||||
<path d="M20 30 C20 20.5 25.5 16 34 16 C43 16 47 21 47 27 C47 33 41 35 32 35" stroke="url(#org2)" stroke-width="5.5" stroke-linecap="round"/>
|
||||
<path d="M44 34 C44 43.5 38.5 48 30 48 C21 48 17 43 17 37 C17 31 23 29 32 29" stroke="url(#emd2)" stroke-width="5.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">48px 窗口</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="32" height="32" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="url(#g2)" stroke="#CBD5E1" stroke-width="1.2"/>
|
||||
<path d="M20 30 C20 20.5 25.5 16 34 16 C43 16 47 21 47 27 C47 33 41 35 32 35" stroke="url(#org2)" stroke-width="5.5" stroke-linecap="round"/>
|
||||
<path d="M44 34 C44 43.5 38.5 48 30 48 C21 48 17 43 17 37 C17 31 23 29 32 29" stroke="url(#emd2)" stroke-width="5.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">32px 任务栏</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="20" height="20" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="url(#g2)" stroke="#CBD5E1" stroke-width="1.2"/>
|
||||
<path d="M20 30 C20 20.5 25.5 16 34 16 C43 16 47 21 47 27 C47 33 41 35 32 35" stroke="url(#org2)" stroke-width="6" stroke-linecap="round"/>
|
||||
<path d="M44 34 C44 43.5 38.5 48 30 48 C21 48 17 43 17 37 C21 31 23 29 32 29" stroke="url(#emd2)" stroke-width="6" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">20px 托盘</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-label">Windows 任务栏环境模拟</div>
|
||||
<div class="taskbar-sim taskbar-dark">
|
||||
<span class="taskbar-sim-title">深色任务栏</span>
|
||||
<div class="taskbar-sim-icons">
|
||||
<svg width="24" height="24" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="url(#g2)"/><path d="M20 30 C20 20.5 25.5 16 34 16 C43 16 47 21 47 27 C47 33 41 35 32 35" stroke="url(#org2)" stroke-width="6" stroke-linecap="round"/><path d="M44 34 C44 43.5 38.5 48 30 48 C21 48 17 43 17 37" stroke="url(#emd2)" stroke-width="6" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="taskbar-sim taskbar-light">
|
||||
<span class="taskbar-sim-title">浅色任务栏</span>
|
||||
<div class="taskbar-sim-icons">
|
||||
<svg width="24" height="24" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="url(#g2)" stroke="#CBD5E1" stroke-width="1.2"/><path d="M20 30 C20 20.5 25.5 16 34 16 C43 16 47 21 47 27 C47 33 41 35 32 35" stroke="url(#org2)" stroke-width="6" stroke-linecap="round"/><path d="M44 34 C44 43.5 38.5 48 30 48 C21 48 17 43 17 37" stroke="url(#emd2)" stroke-width="6" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="feature-list">
|
||||
<li><strong>白瓷通透</strong>：零黑色，纯白与微冷灰的浮雕质感，与软件界面 Reflex 风格完美呼应。</li>
|
||||
<li><strong>双色环抱</strong>：橙色（命令与切换）与绿色（在线守护）咬合为一个莫比乌斯 S 环。</li>
|
||||
<li><strong>现代优雅</strong>：类似 Linear / Raycast 团队的极简排版克制美学。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 方向 3 -->
|
||||
<div class="card">
|
||||
<h2 class="card-title">方向 3 · 等轴测多维晶体机架与光柱</h2>
|
||||
<p class="card-subtitle">工程硬核 · 立体立体切面 · 极客象征</p>
|
||||
|
||||
<div class="hero-icon-box">
|
||||
<svg class="hero-svg" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="g3" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FFFFFF"/>
|
||||
<stop offset="100%" stop-color="#E2E8F0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="bm3" x1="32" y1="10" x2="32" y2="50" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FF5722"/>
|
||||
<stop offset="45%" stop-color="#F97316"/>
|
||||
<stop offset="100%" stop-color="#10B981"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="64" height="64" rx="16" fill="url(#g3)"/>
|
||||
<rect x="0.75" y="0.75" width="62.5" height="62.5" rx="15.25" stroke="#94A3B8" stroke-width="1.2"/>
|
||||
|
||||
<!-- 下层机架底盘 -->
|
||||
<path d="M32 38 L48 29 L32 20 L16 29 Z" fill="#FFFFFF" fill-opacity="0.85" stroke="#64748B" stroke-width="1.6" stroke-linejoin="round"/>
|
||||
<path d="M16 29 L32 38 V44 L16 35 Z" fill="#CBD5E1" stroke="#64748B" stroke-width="1.6" stroke-linejoin="round"/>
|
||||
<path d="M48 29 L32 38 V44 L48 35 Z" fill="#94A3B8" stroke="#64748B" stroke-width="1.6" stroke-linejoin="round"/>
|
||||
|
||||
<!-- 贯穿两层的核心切换光柱 -->
|
||||
<line x1="32" y1="9" x2="32" y2="47" stroke="url(#bm3)" stroke-width="5" stroke-linecap="round"/>
|
||||
|
||||
<!-- 上层悬浮晶体切面 -->
|
||||
<path d="M32 24 L48 15 L32 6 L16 15 Z" fill="#FFFFFF" fill-opacity="0.9" stroke="#64748B" stroke-width="1.6" stroke-linejoin="round"/>
|
||||
<path d="M16 15 L32 24 V27 L16 18 Z" fill="#E2E8F0" stroke="#64748B" stroke-width="1.6" stroke-linejoin="round"/>
|
||||
<path d="M48 15 L32 24 V27 L48 18 Z" fill="#CBD5E1" stroke="#64748B" stroke-width="1.6" stroke-linejoin="round"/>
|
||||
|
||||
<!-- 光核节点 -->
|
||||
<circle cx="32" cy="15" r="3.2" fill="#FF5722"/>
|
||||
<circle cx="32" cy="38" r="3.2" fill="#10B981"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="section-label">不同系统尺寸实测</div>
|
||||
<div class="scale-preview">
|
||||
<div class="scale-item">
|
||||
<svg width="48" height="48" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="url(#g3)" stroke="#94A3B8" stroke-width="1.2"/>
|
||||
<path d="M32 38 L48 29 L32 20 L16 29 Z" fill="#FFFFFF" stroke="#64748B" stroke-width="1.6"/>
|
||||
<line x1="32" y1="9" x2="32" y2="47" stroke="url(#bm3)" stroke-width="5" stroke-linecap="round"/>
|
||||
<path d="M32 24 L48 15 L32 6 L16 15 Z" fill="#FFFFFF" stroke="#64748B" stroke-width="1.6"/>
|
||||
</svg>
|
||||
<span class="scale-caption">48px 窗口</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="32" height="32" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="url(#g3)" stroke="#94A3B8" stroke-width="1.2"/>
|
||||
<path d="M32 38 L48 29 L32 20 L16 29 Z" fill="#FFFFFF" stroke="#64748B" stroke-width="1.6"/>
|
||||
<line x1="32" y1="9" x2="32" y2="47" stroke="url(#bm3)" stroke-width="5" stroke-linecap="round"/>
|
||||
<path d="M32 24 L48 15 L32 6 L16 15 Z" fill="#FFFFFF" stroke="#64748B" stroke-width="1.6"/>
|
||||
</svg>
|
||||
<span class="scale-caption">32px 任务栏</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="20" height="20" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="url(#g3)" stroke="#94A3B8" stroke-width="1.2"/>
|
||||
<line x1="32" y1="9" x2="32" y2="47" stroke="url(#bm3)" stroke-width="6" stroke-linecap="round"/>
|
||||
<circle cx="32" cy="15" r="3.5" fill="#FF5722"/>
|
||||
<circle cx="32" cy="38" r="3.5" fill="#10B981"/>
|
||||
</svg>
|
||||
<span class="scale-caption">20px 托盘</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-label">Windows 任务栏环境模拟</div>
|
||||
<div class="taskbar-sim taskbar-dark">
|
||||
<span class="taskbar-sim-title">深色任务栏</span>
|
||||
<div class="taskbar-sim-icons">
|
||||
<svg width="24" height="24" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="url(#g3)"/><line x1="32" y1="9" x2="32" y2="47" stroke="url(#bm3)" stroke-width="6" stroke-linecap="round"/><circle cx="32" cy="15" r="3.5" fill="#FF5722"/><circle cx="32" cy="38" r="3.5" fill="#10B981"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="taskbar-sim taskbar-light">
|
||||
<span class="taskbar-sim-title">浅色任务栏</span>
|
||||
<div class="taskbar-sim-icons">
|
||||
<svg width="24" height="24" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="url(#g3)" stroke="#94A3B8"/><line x1="32" y1="9" x2="32" y2="47" stroke="url(#bm3)" stroke-width="6" stroke-linecap="round"/><circle cx="32" cy="15" r="3.5" fill="#FF5722"/><circle cx="32" cy="38" r="3.5" fill="#10B981"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="feature-list">
|
||||
<li><strong>3D 空间感</strong>：等轴测视角呈现服务器机柜切片，透视感鲜明。</li>
|
||||
<li><strong>纵向贯穿</strong>：激光瞬切光柱连通上下双层，体现「从本机穿透到远端」。</li>
|
||||
<li><strong>极客属性</strong>：工业硬核感强，适合偏爱纯技术图腾的审美。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,413 @@
|
||||
<title>VPS Switch 纯粹黑白图标方案</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg-ground: #f8fafc;
|
||||
--surface-card: #ffffff;
|
||||
--border-subtle: #e2e8f0;
|
||||
--text-primary: #000000;
|
||||
--text-muted: #64748b;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--bg-ground: #0a0a0c;
|
||||
--surface-card: #141417;
|
||||
--border-subtle: #27272a;
|
||||
--text-primary: #ffffff;
|
||||
--text-muted: #a1a1aa;
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--bg-ground: #0a0a0c;
|
||||
--surface-card: #141417;
|
||||
--border-subtle: #27272a;
|
||||
--text-primary: #ffffff;
|
||||
--text-muted: #a1a1aa;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--bg-ground);
|
||||
color: var(--text-primary);
|
||||
padding: 36px 20px;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1040px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
.header h1 {
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
margin: 0 0 8px 0;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
.header p {
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
|
||||
gap: 24px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 20px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.badge-tag {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
background: #000000;
|
||||
color: #ffffff;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.badge-tag {
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
margin: 0 0 4px 0;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.card-subtitle {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.hero-icon-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 28px 0;
|
||||
background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.04), transparent 70%);
|
||||
border-radius: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hero-svg {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.18));
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.hero-svg:hover {
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.scale-preview {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.scale-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.scale-caption {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.taskbar-sim {
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.taskbar-dark {
|
||||
background: #000000;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
.taskbar-light {
|
||||
background: #ffffff;
|
||||
color: #0f172a;
|
||||
border: 1px solid #cbd5e1;
|
||||
}
|
||||
.taskbar-sim-title {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 14px 0 0 0;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.feature-list li {
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
}
|
||||
.feature-list li::before {
|
||||
content: "■";
|
||||
font-size: 8px;
|
||||
color: var(--text-primary);
|
||||
margin-top: 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>VPS Switch 纯粹黑白（Monochrome）方案</h1>
|
||||
<p>剥除所有杂色干扰。黑白是最高级的克制，以纯粹的高对比线条与负空间，雕琢终极耐看的 SSH 工具徽记。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<!-- 方案 1：Termius 式黑白经典云端与终端 -->
|
||||
<div class="card">
|
||||
<span class="badge-tag">首推 · Termius 纯黑白神韵</span>
|
||||
<h2 class="card-title">方案 1 · 云端终端符（Termius 单色重构）</h2>
|
||||
<p class="card-subtitle">纯黑底块 · 纯白云端负空间 · 洗练终端光标 > _</p>
|
||||
|
||||
<div class="hero-icon-box">
|
||||
<!-- SVG 1: Termius 式纯黑白 -->
|
||||
<svg class="hero-svg" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 纯黑圆角基底 -->
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<!-- 微光白边，在深色背景下轮廓分明 -->
|
||||
<rect x="0.75" y="0.75" width="62.5" height="62.5" rx="15.25" stroke="#FFFFFF" stroke-opacity="0.2" stroke-width="1.5"/>
|
||||
|
||||
<!-- Termius 式极简云朵剪影轮廓 (VPS 云端) -->
|
||||
<path d="M20 41 H44 C48.5 41 51 37.5 50 33.5 C49.5 30 46 28 42.5 28.5 C41.5 23 37.5 19 32 19 C27.5 19 23.5 22 22 26.5 C17.5 27 14.5 31 15 35 C15.5 39 18 41 20 41 Z" stroke="#FFFFFF" stroke-width="2.8" stroke-linejoin="round" fill="none"/>
|
||||
|
||||
<!-- 内部核心：极致干脆的终端提示符 > _ -->
|
||||
<path d="M26 27 L32 32 L26 37" stroke="#FFFFFF" stroke-width="4.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<line x1="35" y1="37" x2="41" y2="37" stroke="#FFFFFF" stroke-width="4.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="section-label">不同尺寸实测</div>
|
||||
<div class="scale-preview">
|
||||
<div class="scale-item">
|
||||
<svg width="48" height="48" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M20 41 H44 C48.5 41 51 37.5 50 33.5 C49.5 30 46 28 42.5 28.5 C41.5 23 37.5 19 32 19 C27.5 19 23.5 22 22 26.5 C17.5 27 14.5 31 15 35 C15.5 39 18 41 20 41 Z" stroke="#FFFFFF" stroke-width="2.8" stroke-linejoin="round" fill="none"/>
|
||||
<path d="M26 27 L32 32 L26 37" stroke="#FFFFFF" stroke-width="4.2" stroke-linecap="round"/>
|
||||
<line x1="35" y1="37" x2="41" y2="37" stroke="#FFFFFF" stroke-width="4.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">48px 窗口</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="32" height="32" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M26 27 L32 32 L26 37" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round"/>
|
||||
<line x1="35" y1="37" x2="41" y2="37" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">32px 任务栏</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="20" height="20" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M23 26 L31 32 L23 38" stroke="#FFFFFF" stroke-width="5.5" stroke-linecap="round"/>
|
||||
<line x1="33" y1="38" x2="41" y2="38" stroke="#FFFFFF" stroke-width="5.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">20px 托盘</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-label">Windows 任务栏环境模拟</div>
|
||||
<div class="taskbar-sim taskbar-dark">
|
||||
<span class="taskbar-sim-title">深色任务栏</span>
|
||||
<svg width="24" height="24" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="#000000" stroke="#FFFFFF" stroke-opacity="0.3"/><path d="M24 26 L31 32 L24 38" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round"/><line x1="34" y1="38" x2="40" y2="38" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
<div class="taskbar-sim taskbar-light">
|
||||
<span class="taskbar-sim-title">浅色任务栏</span>
|
||||
<svg width="24" height="24" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="#000000"/><path d="M24 26 L31 32 L24 38" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round"/><line x1="34" y1="38" x2="40" y2="38" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
|
||||
<ul class="feature-list">
|
||||
<li><strong>就是 Termius 的纯粹黑白形态</strong>：云朵轮廓（云端 VPS）+ 终端字符 <code>> _</code>，绝无多余点缀。</li>
|
||||
<li><strong>零杂色</strong>：纯黑与纯白的最高对比，小到托盘就是一个清晰的白光终端符。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 方案 2：黑白极简折角穿梭 Switch (纯几何力量感) -->
|
||||
<div class="card">
|
||||
<span class="badge-tag">对标 Vercel / Next.js 极简刀锋</span>
|
||||
<h2 class="card-title">方案 2 · 对冲穿梭折角（双向 Switch）</h2>
|
||||
<p class="card-subtitle">极简双向命令提示符 · 纯黑底白光雕 · 锐利有力</p>
|
||||
|
||||
<div class="hero-icon-box">
|
||||
<!-- SVG 2: 纯黑白对冲穿梭折角 -->
|
||||
<svg class="hero-svg" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<rect x="0.75" y="0.75" width="62.5" height="62.5" rx="15.25" stroke="#FFFFFF" stroke-opacity="0.2" stroke-width="1.5"/>
|
||||
|
||||
<!-- 两个粗壮有力的对冲折角，形成极具动势的 Switch 负空间通道 -->
|
||||
<!-- 左折角 > (实心粗体) -->
|
||||
<path d="M17 19 L30 32 L17 45" stroke="#FFFFFF" stroke-width="6.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<!-- 右反向折角 < (半透明负空间白) -->
|
||||
<path d="M47 45 L34 32 L47 19" stroke="#FFFFFF" stroke-opacity="0.45" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<!-- 中央连通核点 -->
|
||||
<circle cx="32" cy="32" r="3.5" fill="#FFFFFF"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="section-label">不同尺寸实测</div>
|
||||
<div class="scale-preview">
|
||||
<div class="scale-item">
|
||||
<svg width="48" height="48" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M17 19 L30 32 L17 45" stroke="#FFFFFF" stroke-width="6.5" stroke-linecap="round"/>
|
||||
<path d="M47 45 L34 32 L47 19" stroke="#FFFFFF" stroke-opacity="0.45" stroke-width="4.5" stroke-linecap="round"/>
|
||||
<circle cx="32" cy="32" r="3.5" fill="#FFFFFF"/>
|
||||
</svg>
|
||||
<span class="scale-caption">48px 窗口</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="32" height="32" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M17 19 L30 32 L17 45" stroke="#FFFFFF" stroke-width="6.5" stroke-linecap="round"/>
|
||||
<path d="M47 45 L34 32 L47 19" stroke="#FFFFFF" stroke-opacity="0.45" stroke-width="4.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">32px 任务栏</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="20" height="20" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M18 19 L31 32 L18 45" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round"/>
|
||||
<circle cx="44" cy="32" r="4.5" fill="#FFFFFF"/>
|
||||
</svg>
|
||||
<span class="scale-caption">20px 托盘</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-label">Windows 任务栏环境模拟</div>
|
||||
<div class="taskbar-sim taskbar-dark">
|
||||
<span class="taskbar-sim-title">深色任务栏</span>
|
||||
<svg width="24" height="24" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="#000000" stroke="#FFFFFF" stroke-opacity="0.3"/><path d="M18 20 L30 32 L18 44" stroke="#FFFFFF" stroke-width="6.5" stroke-linecap="round"/><circle cx="43" cy="32" r="4" fill="#FFFFFF"/></svg>
|
||||
</div>
|
||||
<div class="taskbar-sim taskbar-light">
|
||||
<span class="taskbar-sim-title">浅色任务栏</span>
|
||||
<svg width="24" height="24" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="#000000"/><path d="M18 20 L30 32 L18 44" stroke="#FFFFFF" stroke-width="6.5" stroke-linecap="round"/><circle cx="43" cy="32" r="4" fill="#FFFFFF"/></svg>
|
||||
</div>
|
||||
|
||||
<ul class="feature-list">
|
||||
<li><strong>极简几何动势</strong>：主折角 <code>></code> 搭配反向虚角，直接用终端字符构成极速切换（Switch）的节奏。</li>
|
||||
<li><strong>高密度力量感</strong>：线条粗壮自信，没有任何轻飘飘的杂质。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 方案 3：纯白底瓷白 · 纯黑雕刻印章 (完全反色款) -->
|
||||
<div class="card">
|
||||
<span class="badge-tag">纯白底 · 黑标微浮雕</span>
|
||||
<h2 class="card-title">方案 3 · 瓷白反色 · 极简黑印章</h2>
|
||||
<p class="card-subtitle">纯白基底 · 纯黑雕刻印记 · 与浅色毛玻璃完美一体</p>
|
||||
|
||||
<div class="hero-icon-box">
|
||||
<!-- SVG 3: 纯白底黑标 -->
|
||||
<svg class="hero-svg" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 纯白圆角基底，带微冷灰边框 -->
|
||||
<rect width="64" height="64" rx="16" fill="#FFFFFF"/>
|
||||
<rect x="0.75" y="0.75" width="62.5" height="62.5" rx="15.25" stroke="#CBD5E1" stroke-width="1.5"/>
|
||||
|
||||
<!-- 内部纯黑 Termius 云端终端图腾 -->
|
||||
<path d="M20 41 H44 C48.5 41 51 37.5 50 33.5 C49.5 30 46 28 42.5 28.5 C41.5 23 37.5 19 32 19 C27.5 19 23.5 22 22 26.5 C17.5 27 14.5 31 15 35 C15.5 39 18 41 20 41 Z" stroke="#000000" stroke-width="2.8" stroke-linejoin="round" fill="none"/>
|
||||
|
||||
<path d="M26 27 L32 32 L26 37" stroke="#000000" stroke-width="4.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<line x1="35" y1="37" x2="41" y2="37" stroke="#000000" stroke-width="4.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="section-label">不同尺寸实测</div>
|
||||
<div class="scale-preview">
|
||||
<div class="scale-item">
|
||||
<svg width="48" height="48" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="1.5"/>
|
||||
<path d="M20 41 H44 C48.5 41 51 37.5 50 33.5 C49.5 30 46 28 42.5 28.5 C41.5 23 37.5 19 32 19 C27.5 19 23.5 22 22 26.5 C17.5 27 14.5 31 15 35 C15.5 39 18 41 20 41 Z" stroke="#000000" stroke-width="2.8" stroke-linejoin="round" fill="none"/>
|
||||
<path d="M26 27 L32 32 L26 37" stroke="#000000" stroke-width="4.2" stroke-linecap="round"/>
|
||||
<line x1="35" y1="37" x2="41" y2="37" stroke="#000000" stroke-width="4.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">48px 窗口</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="32" height="32" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="1.5"/>
|
||||
<path d="M26 27 L32 32 L26 37" stroke="#000000" stroke-width="5" stroke-linecap="round"/>
|
||||
<line x1="35" y1="37" x2="41" y2="37" stroke="#000000" stroke-width="5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">32px 任务栏</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="20" height="20" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#FFFFFF" stroke="#CBD5E1" stroke-width="1.5"/>
|
||||
<path d="M23 26 L31 32 L23 38" stroke="#000000" stroke-width="5.5" stroke-linecap="round"/>
|
||||
<line x1="33" y1="38" x2="41" y2="38" stroke="#000000" stroke-width="5.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">20px 托盘</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-label">Windows 任务栏环境模拟</div>
|
||||
<div class="taskbar-sim taskbar-dark">
|
||||
<span class="taskbar-sim-title">深色任务栏</span>
|
||||
<svg width="24" height="24" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="#FFFFFF"/><path d="M24 26 L31 32 L24 38" stroke="#000000" stroke-width="5" stroke-linecap="round"/><line x1="34" y1="38" x2="40" y2="38" stroke="#000000" stroke-width="5" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
<div class="taskbar-sim taskbar-light">
|
||||
<span class="taskbar-sim-title">浅色任务栏</span>
|
||||
<svg width="24" height="24" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="#FFFFFF" stroke="#94A3B8"/><path d="M24 26 L31 32 L24 38" stroke="#000000" stroke-width="5" stroke-linecap="round"/><line x1="34" y1="38" x2="40" y2="38" stroke="#000000" stroke-width="5" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
|
||||
<ul class="feature-list">
|
||||
<li><strong>白底黑标</strong>：专为偏好浅色系、白瓷美学的用户打造。</li>
|
||||
<li><strong>如印章般醒目</strong>：在深色任务栏上如一块纯净白玉，极为吸睛。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,421 @@
|
||||
<title>方案 2 深度微调与进化</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg-ground: #0a0a0c;
|
||||
--surface-card: #141417;
|
||||
--border-subtle: #27272a;
|
||||
--text-primary: #ffffff;
|
||||
--text-muted: #a1a1aa;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--bg-ground);
|
||||
color: var(--text-primary);
|
||||
padding: 36px 20px;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.header h1 {
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
margin: 0 0 8px 0;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
.header p {
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
max-width: 620px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.diagnosis-box {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
padding: 16px 20px;
|
||||
margin-bottom: 32px;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.diagnosis-box strong {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 20px;
|
||||
padding: 22px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
transition: border-color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
.card:hover {
|
||||
border-color: #52525b;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.badge-tag {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
padding: 2px 8px;
|
||||
border-radius: 20px;
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
margin: 0 0 4px 0;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.card-subtitle {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
.hero-icon-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 24px 0;
|
||||
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05), transparent 70%);
|
||||
border-radius: 14px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.hero-svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.hero-svg:hover {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.scale-preview {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
padding: 12px 14px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.scale-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.scale-caption {
|
||||
font-size: 9px;
|
||||
color: var(--text-muted);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.taskbar-sim {
|
||||
padding: 10px 14px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
background: #000000;
|
||||
border: 1px solid #27272a;
|
||||
}
|
||||
.taskbar-sim-title {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #a1a1aa;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 12px 0 0 0;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.feature-list li {
|
||||
margin-bottom: 4px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 5px;
|
||||
}
|
||||
.feature-list li::before {
|
||||
content: "■";
|
||||
font-size: 7px;
|
||||
color: #ffffff;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>方案 2「折角穿梭」精准手术级微调</h1>
|
||||
<p>第二套为什么你觉得「有点感觉，但总感觉差点」？因为抓住了黑白对冲动势的胚子，但细节被中间多余的圆点和生硬的粗细断层破坏了呼吸感。</p>
|
||||
</div>
|
||||
|
||||
<div class="diagnosis-box">
|
||||
<strong>🎯 病因诊断：为什么之前差点意思？</strong><br>
|
||||
1. <strong>中间那个圆点是多余的</strong>：在 <code>></code> 和 <code><</code> 中间放一个点，远看像个颜文字表情包 <code>>·<</code>，破坏了严肃的工程张力。<br>
|
||||
2. <strong>两条折角各玩各的</strong>：左边实心右边半透明，没有真正<strong>咬合交织</strong>，缺乏顶级品牌（如 Linear、Next.js）那种呼之欲出的整体性。
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<!-- 2A：双折角错位咬合通道 -->
|
||||
<div class="card">
|
||||
<span class="badge-tag">力荐 · 呼吸负空间</span>
|
||||
<h2 class="card-title">2A · 刀锋交错咬合</h2>
|
||||
<p class="card-subtitle">去掉多余圆点 · 几何刀锋对咬 · 纯粹张力</p>
|
||||
|
||||
<div class="hero-icon-box">
|
||||
<svg class="hero-svg" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<rect x="0.75" y="0.75" width="62.5" height="62.5" rx="15.25" stroke="#FFFFFF" stroke-opacity="0.18" stroke-width="1.5"/>
|
||||
<!-- 左右两个折角在中央优雅穿插，形成极速 Switch 的流转感 -->
|
||||
<path d="M15 18 L31 32 L15 46" stroke="#FFFFFF" stroke-width="6.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M49 46 L33 32 L49 18" stroke="#FFFFFF" stroke-width="6.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="section-label">不同尺寸实测</div>
|
||||
<div class="scale-preview">
|
||||
<div class="scale-item">
|
||||
<svg width="40" height="40" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M15 18 L31 32 L15 46" stroke="#FFFFFF" stroke-width="6.5" stroke-linecap="round"/>
|
||||
<path d="M49 46 L33 32 L49 18" stroke="#FFFFFF" stroke-width="6.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">40px</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="28" height="28" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M15 18 L31 32 L15 46" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round"/>
|
||||
<path d="M49 46 L33 32 L49 18" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">28px</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="18" height="18" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M15 17 L32 32 L15 47" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round"/>
|
||||
<path d="M49 47 L32 32 L49 17" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">18px 托盘</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="taskbar-sim">
|
||||
<span class="taskbar-sim-title">Windows 任务栏</span>
|
||||
<svg width="22" height="22" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="#000000" stroke="#FFFFFF" stroke-opacity="0.3"/><path d="M15 18 L31 32 L15 46" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round"/><path d="M49 46 L33 32 L49 18" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
|
||||
<ul class="feature-list">
|
||||
<li><strong>改动精髓</strong>：彻底删掉弱智圆点，左右两条主折角同等粗壮对称咬合。</li>
|
||||
<li><strong>视觉意象</strong>：像两个交错的纯白刀锋，中间留出一道呼吸负空间，极具现代张力。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 2B：双层追加穿梭 >> (Shell 重定向与极速跳转) -->
|
||||
<div class="card">
|
||||
<span class="badge-tag">Shell 本质 · 瞬切速度</span>
|
||||
<h2 class="card-title">2B · 极速重定向 >></h2>
|
||||
<p class="card-subtitle">Shell 终端重定向符号 >> · 绝对速度与瞬连</p>
|
||||
|
||||
<div class="hero-icon-box">
|
||||
<svg class="hero-svg" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<rect x="0.75" y="0.75" width="62.5" height="62.5" rx="15.25" stroke="#FFFFFF" stroke-opacity="0.18" stroke-width="1.5"/>
|
||||
<!-- 前后叠进的两个粗壮命令符 >> (Shell 开发者心智最深处的符号) -->
|
||||
<path d="M16 19 L29 32 L16 45" stroke="#FFFFFF" stroke-opacity="0.45" stroke-width="6.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M32 19 L45 32 L32 45" stroke="#FFFFFF" stroke-width="6.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="section-label">不同尺寸实测</div>
|
||||
<div class="scale-preview">
|
||||
<div class="scale-item">
|
||||
<svg width="40" height="40" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M16 19 L29 32 L16 45" stroke="#FFFFFF" stroke-opacity="0.45" stroke-width="6.5" stroke-linecap="round"/>
|
||||
<path d="M32 19 L45 32 L32 45" stroke="#FFFFFF" stroke-width="6.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">40px</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="28" height="28" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M16 19 L29 32 L16 45" stroke="#FFFFFF" stroke-opacity="0.45" stroke-width="7" stroke-linecap="round"/>
|
||||
<path d="M32 19 L45 32 L32 45" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">28px</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="18" height="18" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M16 18 L29 32 L16 46" stroke="#FFFFFF" stroke-opacity="0.5" stroke-width="7.5" stroke-linecap="round"/>
|
||||
<path d="M33 18 L46 32 L33 46" stroke="#FFFFFF" stroke-width="7.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">18px 托盘</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="taskbar-sim">
|
||||
<span class="taskbar-sim-title">Windows 任务栏</span>
|
||||
<svg width="22" height="22" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="#000000" stroke="#FFFFFF" stroke-opacity="0.3"/><path d="M16 19 L29 32 L16 45" stroke="#FFFFFF" stroke-opacity="0.45" stroke-width="6.5" stroke-linecap="round"/><path d="M32 19 L45 32 L32 45" stroke="#FFFFFF" stroke-width="6.5" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
|
||||
<ul class="feature-list">
|
||||
<li><strong>开发者共鸣</strong>：<code>>></code> 是 Linux Shell 里最熟悉不过的输出重定向符，也是快速穿梭（Fast Forward）的象征。</li>
|
||||
<li><strong>层次感强</strong>：前亮后暗，充满冲破屏幕的速度感。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 2C：终极黄金比例 > 与光标折线 -->
|
||||
<div class="card">
|
||||
<span class="badge-tag">黄金比例 · 极致干脆</span>
|
||||
<h2 class="card-title">2C · 纯粹主折角 > _</h2>
|
||||
<p class="card-subtitle">单体粗壮霸道命令符 > · 搭配水平光标下划线</p>
|
||||
|
||||
<div class="hero-icon-box">
|
||||
<svg class="hero-svg" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<rect x="0.75" y="0.75" width="62.5" height="62.5" rx="15.25" stroke="#FFFFFF" stroke-opacity="0.18" stroke-width="1.5"/>
|
||||
<!-- 一个比例极度协调的大号粗终端折角 > 与实心下划线 _ -->
|
||||
<path d="M16 18 L31 32 L16 46" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<line x1="36" y1="46" x2="48" y2="46" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="section-label">不同尺寸实测</div>
|
||||
<div class="scale-preview">
|
||||
<div class="scale-item">
|
||||
<svg width="40" height="40" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M16 18 L31 32 L16 46" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round"/>
|
||||
<line x1="36" y1="46" x2="48" y2="46" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">40px</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="28" height="28" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M16 18 L31 32 L16 46" stroke="#FFFFFF" stroke-width="7.5" stroke-linecap="round"/>
|
||||
<line x1="36" y1="46" x2="48" y2="46" stroke="#FFFFFF" stroke-width="7.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">28px</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="18" height="18" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M15 17 L31 32 L15 47" stroke="#FFFFFF" stroke-width="8.5" stroke-linecap="round"/>
|
||||
<line x1="36" y1="47" x2="49" y2="47" stroke="#FFFFFF" stroke-width="8.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">18px 托盘</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="taskbar-sim">
|
||||
<span class="taskbar-sim-title">Windows 任务栏</span>
|
||||
<svg width="22" height="22" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="#000000" stroke="#FFFFFF" stroke-opacity="0.3"/><path d="M16 18 L31 32 L16 46" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round"/><line x1="36" y1="46" x2="48" y2="46" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
|
||||
<ul class="feature-list">
|
||||
<li><strong>纯粹终端自信</strong>：对标 Apple 和 Vercel 的单体标志逻辑，纯粹靠粗壮的黄金分割笔触说话。</li>
|
||||
<li><strong>无论多小都清晰</strong>：下划线 <code>_</code> 像基座一样托住折角，端庄沉稳。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 2D：S 型回路折角 (真正的 Switch 意象) -->
|
||||
<div class="card">
|
||||
<span class="badge-tag">Switch 概念正宗</span>
|
||||
<h2 class="card-title">2D · 闭合 S 轨回折</h2>
|
||||
<p class="card-subtitle">两条终端折线相互勾结 · 抽象构成字母 S</p>
|
||||
|
||||
<div class="hero-icon-box">
|
||||
<svg class="hero-svg" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<rect x="0.75" y="0.75" width="62.5" height="62.5" rx="15.25" stroke="#FFFFFF" stroke-opacity="0.18" stroke-width="1.5"/>
|
||||
<!-- 纯白一体式 S 型折线回路：上折向右，下折向左，中央闭环 -->
|
||||
<path d="M43 20 H25 C19.5 20 17 24 19 28 L27 34 H39 C45 34 47 38 45 42 L39 46 H21" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="section-label">不同尺寸实测</div>
|
||||
<div class="scale-preview">
|
||||
<div class="scale-item">
|
||||
<svg width="40" height="40" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M43 20 H25 C19.5 20 17 24 19 28 L27 34 H39 C45 34 47 38 45 42 L39 46 H21" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">40px</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="28" height="28" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M43 20 H25 C19.5 20 17 24 19 28 L27 34 H39 C45 34 47 38 45 42 L39 46 H21" stroke="#FFFFFF" stroke-width="6.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">28px</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="18" height="18" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M43 20 H25 C19.5 20 17 24 19 28 L27 34 H39 C45 34 47 38 45 42 L39 46 H21" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">18px 托盘</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="taskbar-sim">
|
||||
<span class="taskbar-sim-title">Windows 任务栏</span>
|
||||
<svg width="22" height="22" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="#000000" stroke="#FFFFFF" stroke-opacity="0.3"/><path d="M43 20 H25 C19.5 20 17 24 19 28 L27 34 H39 C45 34 47 38 45 42 L39 46 H21" stroke="#FFFFFF" stroke-width="6.5" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
|
||||
<ul class="feature-list">
|
||||
<li><strong>字标 Monogram</strong>：将 Switch 的字母 <code>S</code> 融入终端折角，一条连续的纯白光带一气呵成。</li>
|
||||
<li><strong>标志性极强</strong>：类似高端汽车车标或现代框架的几何剪影。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,456 @@
|
||||
<title>VPS Switch 深度黑白实体设计</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg-ground: #0a0a0c;
|
||||
--surface-card: #141417;
|
||||
--border-subtle: #27272a;
|
||||
--text-primary: #ffffff;
|
||||
--text-muted: #a1a1aa;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--bg-ground);
|
||||
color: var(--text-primary);
|
||||
padding: 36px 20px;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.header h1 {
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
margin: 0 0 8px 0;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
.header p {
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.critique-box {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
padding: 16px 20px;
|
||||
margin-bottom: 32px;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.critique-box strong {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 20px;
|
||||
padding: 22px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
|
||||
position: relative;
|
||||
transition: border-color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
.card:hover {
|
||||
border-color: #52525b;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.badge-tag {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
padding: 2px 8px;
|
||||
border-radius: 20px;
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
margin: 0 0 4px 0;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.card-subtitle {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
.hero-icon-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 26px 0;
|
||||
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.06), transparent 70%);
|
||||
border-radius: 14px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.hero-svg {
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.4));
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.hero-svg:hover {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.scale-preview {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
padding: 12px 14px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.scale-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.scale-caption {
|
||||
font-size: 9px;
|
||||
color: var(--text-muted);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.taskbar-sim {
|
||||
padding: 10px 14px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
background: #000000;
|
||||
border: 1px solid #27272a;
|
||||
}
|
||||
.taskbar-sim-title {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #a1a1aa;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 12px 0 0 0;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.feature-list li {
|
||||
margin-bottom: 4px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 5px;
|
||||
}
|
||||
.feature-list li::before {
|
||||
content: "■";
|
||||
font-size: 7px;
|
||||
color: #ffffff;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>告别单线条交叉 · 真正的实体级黑白徽记</h1>
|
||||
<p>你说得太对了：两条简单的单线条一交错就成了一个 ×，根本谈不上设计。真正的黑白设计靠的是实体几何切面、负空间剪影与有辨识度的专属图腾。</p>
|
||||
</div>
|
||||
|
||||
<div class="critique-box">
|
||||
<strong>💡 重新审视「为什么 Termius 好看」以及「方案 2 原本的感觉在哪」：</strong><br>
|
||||
• 方案 2 最初吸引你的是<strong>「一个带有机械感的开关机构动势（Switch Mechanism）」</strong>，而不是两条光秃秃的线条。<br>
|
||||
• Termius 好看是因为它有<strong>具象饱满的实体剪影</strong>（云朵外轮廓 + 终端字符构成的整体印章）。<br>
|
||||
以下 4 套方案全部采用<strong>实心雕刻几何（Solid Glyph）+ 负空间切面</strong>，彻底告别单线条与 × 的尴尬。
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<!-- 设计 1：实体双向穿梭滑块 (真正的 Switch 机械机构) -->
|
||||
<div class="card">
|
||||
<span class="badge-tag">机械动势 · 实体剪影</span>
|
||||
<h2 class="card-title">方案 A · 机械实体滑阀 Switch</h2>
|
||||
<p class="card-subtitle">实心跑道滑轨 · 双向互锁滑块 · 机械穿梭感</p>
|
||||
|
||||
<div class="hero-icon-box">
|
||||
<!-- SVG A: 实心 Switch 滑阀机构 -->
|
||||
<svg class="hero-svg" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<rect x="0.75" y="0.75" width="62.5" height="62.5" rx="15.25" stroke="#FFFFFF" stroke-opacity="0.18" stroke-width="1.5"/>
|
||||
|
||||
<!-- 实心外框导轨 (纯白跑道) -->
|
||||
<rect x="12" y="19" width="40" height="26" rx="13" stroke="#FFFFFF" stroke-width="3" fill="none"/>
|
||||
|
||||
<!-- 内部实体滑块：向右冲锋的实心纯白终端块，带有精密的负空间切口 -->
|
||||
<!-- 左侧待机圆孔 (负空间) -->
|
||||
<circle cx="25" cy="32" r="5" stroke="#FFFFFF" stroke-width="2.5" fill="none"/>
|
||||
|
||||
<!-- 右侧实心激活滑块：一个饱满有力的圆形实体，内部镂空一记向右的尖锐终端折角 > -->
|
||||
<circle cx="39" cy="32" r="9" fill="#FFFFFF"/>
|
||||
<path d="M37 27.5 L42.5 32 L37 36.5" stroke="#000000" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="section-label">不同尺寸实测</div>
|
||||
<div class="scale-preview">
|
||||
<div class="scale-item">
|
||||
<svg width="40" height="40" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<rect x="12" y="19" width="40" height="26" rx="13" stroke="#FFFFFF" stroke-width="3"/>
|
||||
<circle cx="25" cy="32" r="5" stroke="#FFFFFF" stroke-width="2.5"/>
|
||||
<circle cx="39" cy="32" r="9" fill="#FFFFFF"/>
|
||||
<path d="M37 27.5 L42.5 32 L37 36.5" stroke="#000000" stroke-width="2.8" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">40px</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="28" height="28" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<rect x="12" y="19" width="40" height="26" rx="13" stroke="#FFFFFF" stroke-width="3.5"/>
|
||||
<circle cx="25" cy="32" r="5" stroke="#FFFFFF" stroke-width="3"/>
|
||||
<circle cx="39" cy="32" r="9" fill="#FFFFFF"/>
|
||||
<path d="M37 27.5 L42.5 32 L37 36.5" stroke="#000000" stroke-width="3" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">28px</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="18" height="18" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<rect x="12" y="19" width="40" height="26" rx="13" stroke="#FFFFFF" stroke-width="4"/>
|
||||
<circle cx="39" cy="32" r="9" fill="#FFFFFF"/>
|
||||
<path d="M37 27 L43 32 L37 37" stroke="#000000" stroke-width="3.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">18px 托盘</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="taskbar-sim">
|
||||
<span class="taskbar-sim-title">Windows 任务栏</span>
|
||||
<svg width="22" height="22" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="#000000" stroke="#FFFFFF" stroke-opacity="0.3"/><rect x="12" y="19" width="40" height="26" rx="13" stroke="#FFFFFF" stroke-width="3.5"/><circle cx="39" cy="32" r="9" fill="#FFFFFF"/><path d="M37 27.5 L42.5 32 L37 36.5" stroke="#000000" stroke-width="3" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
|
||||
<ul class="feature-list">
|
||||
<li><strong>机械实体感</strong>：不是简单的线条，是一个真正的实体开关滑道，有厚重沉稳的工业质感。</li>
|
||||
<li><strong>精巧内嵌</strong>：右侧实心滑块内镂空终端命令符 <code>></code>，完美诠释「终端与开关」合二为一。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 设计 2：实体双折刃负空间穿梭 (重塑方案 2 的真正霸道力量) -->
|
||||
<div class="card">
|
||||
<span class="badge-tag">实心刀锋 · 绝非细线交叉</span>
|
||||
<h2 class="card-title">方案 B · 实体错位穿梭折刃</h2>
|
||||
<p class="card-subtitle">实心多边形厚重刀锋 · 错位不对称穿梭 · 绝对不是×</p>
|
||||
|
||||
<div class="hero-icon-box">
|
||||
<!-- SVG B: 实心多边形厚重双刃，带有切面厚度 -->
|
||||
<svg class="hero-svg" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<rect x="0.75" y="0.75" width="62.5" height="62.5" rx="15.25" stroke="#FFFFFF" stroke-opacity="0.18" stroke-width="1.5"/>
|
||||
|
||||
<!-- 主实体粗刃 (像一个实心的立体几何终端符 >) -->
|
||||
<path d="M15 17 L29 17 L44 32 L29 47 L15 47 L27 32 Z" fill="#FFFFFF"/>
|
||||
|
||||
<!-- 穿梭反向回路：一个粗实心长条下划线与次级反向折刃，形成错落的工业层次 -->
|
||||
<rect x="33" y="42" width="16" height="5" rx="2.5" fill="#FFFFFF"/>
|
||||
<circle cx="36" cy="22" r="3.5" fill="#FFFFFF"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="section-label">不同尺寸实测</div>
|
||||
<div class="scale-preview">
|
||||
<div class="scale-item">
|
||||
<svg width="40" height="40" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M15 17 L29 17 L44 32 L29 47 L15 47 L27 32 Z" fill="#FFFFFF"/>
|
||||
<rect x="33" y="42" width="16" height="5" rx="2.5" fill="#FFFFFF"/>
|
||||
<circle cx="36" cy="22" r="3.5" fill="#FFFFFF"/>
|
||||
</svg>
|
||||
<span class="scale-caption">40px</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="28" height="28" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M15 17 L29 17 L44 32 L29 47 L15 47 L27 32 Z" fill="#FFFFFF"/>
|
||||
<rect x="33" y="42" width="16" height="5" rx="2.5" fill="#FFFFFF"/>
|
||||
</svg>
|
||||
<span class="scale-caption">28px</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="18" height="18" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M14 16 L29 16 L45 32 L29 48 L14 48 L27 32 Z" fill="#FFFFFF"/>
|
||||
</svg>
|
||||
<span class="scale-caption">18px 托盘</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="taskbar-sim">
|
||||
<span class="taskbar-sim-title">Windows 任务栏</span>
|
||||
<svg width="22" height="22" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="#000000" stroke="#FFFFFF" stroke-opacity="0.3"/><path d="M15 17 L29 17 L44 32 L29 47 L15 47 L27 32 Z" fill="#FFFFFF"/><rect x="33" y="42" width="16" height="5" rx="2.5" fill="#FFFFFF"/></svg>
|
||||
</div>
|
||||
|
||||
<ul class="feature-list">
|
||||
<li><strong>实心填充几何</strong>：绝不是单线条，是具有面积感的厚重实心折刃，锐利且极具分量。</li>
|
||||
<li><strong>绝对不撞脸 ×</strong>：主刀锋向右推进，搭配下部的命令光标基座，霸道清晰。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 设计 3：Termius 风格重构 · 实心云端嵌 Switch 拨杆 -->
|
||||
<div class="card">
|
||||
<span class="badge-tag">Termius 精髓 · 原创结合</span>
|
||||
<h2 class="card-title">方案 C · 实心云端 · 实体 Switch 终端</h2>
|
||||
<p class="card-subtitle">对标 Termius 饱满云轮廓 · 内部雕刻双向穿梭拨杆</p>
|
||||
|
||||
<div class="hero-icon-box">
|
||||
<!-- SVG C: 饱满 Termius 式云廓 + 实体拨动开关 -->
|
||||
<svg class="hero-svg" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<rect x="0.75" y="0.75" width="62.5" height="62.5" rx="15.25" stroke="#FFFFFF" stroke-opacity="0.18" stroke-width="1.5"/>
|
||||
|
||||
<!-- 实心饱满的纯白云朵 (VPS 云端之海) -->
|
||||
<path d="M21 44 H44 C49.5 44 53 39.5 52 34.5 C51.2 30.5 47.5 28 43 28.5 C42 22 37.5 17.5 31.5 17.5 C26 17.5 21.5 21 20 26 C15 26.5 11.5 31 12 36 C12.5 41 16 44 21 44 Z" fill="#FFFFFF"/>
|
||||
|
||||
<!-- 内部黑色负空间雕刻：一个精密的 Switch 穿梭拨动开关 (左节点 + 右冲锋命令符) -->
|
||||
<circle cx="25" cy="33" r="3.2" fill="#000000"/>
|
||||
<path d="M28 33 H34" stroke="#000000" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<path d="M35 27.5 L40.5 33 L35 38.5" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="section-label">不同尺寸实测</div>
|
||||
<div class="scale-preview">
|
||||
<div class="scale-item">
|
||||
<svg width="40" height="40" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M21 44 H44 C49.5 44 53 39.5 52 34.5 C51.2 30.5 47.5 28 43 28.5 C42 22 37.5 17.5 31.5 17.5 C26 17.5 21.5 21 20 26 C15 26.5 11.5 31 12 36 C12.5 41 16 44 21 44 Z" fill="#FFFFFF"/>
|
||||
<circle cx="25" cy="33" r="3.2" fill="#000000"/>
|
||||
<path d="M28 33 H34" stroke="#000000" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<path d="M35 27.5 L40.5 33 L35 38.5" stroke="#000000" stroke-width="3" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">40px</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="28" height="28" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M21 44 H44 C49.5 44 53 39.5 52 34.5 C51.2 30.5 47.5 28 43 28.5 C42 22 37.5 17.5 31.5 17.5 C26 17.5 21.5 21 20 26 C15 26.5 11.5 31 12 36 C12.5 41 16 44 21 44 Z" fill="#FFFFFF"/>
|
||||
<path d="M35 27.5 L40.5 33 L35 38.5" stroke="#000000" stroke-width="3.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">28px</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="18" height="18" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M21 44 H44 C49.5 44 53 39.5 52 34.5 C51.2 30.5 47.5 28 43 28.5 C42 22 37.5 17.5 31.5 17.5 C26 17.5 21.5 21 20 26 C15 26.5 11.5 31 12 36 C12.5 41 16 44 21 44 Z" fill="#FFFFFF"/>
|
||||
</svg>
|
||||
<span class="scale-caption">18px 托盘</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="taskbar-sim">
|
||||
<span class="taskbar-sim-title">Windows 任务栏</span>
|
||||
<svg width="22" height="22" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="#000000" stroke="#FFFFFF" stroke-opacity="0.3"/><path d="M21 44 H44 C49.5 44 53 39.5 52 34.5 C51.2 30.5 47.5 28 43 28.5 C42 22 37.5 17.5 31.5 17.5 C26 17.5 21.5 21 20 26 C15 26.5 11.5 31 12 36 C12.5 41 16 44 21 44 Z" fill="#FFFFFF"/><path d="M35 28 L40 33 L35 38" stroke="#000000" stroke-width="3" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
|
||||
<ul class="feature-list">
|
||||
<li><strong>实心剪影印章</strong>：纯白实心云朵极具视觉体量感，在黑色任务栏上像一个发光的浮雕印记。</li>
|
||||
<li><strong>黑白负空间雕刻</strong>：内部黑色的穿梭滑块极其醒目，既有 Termius 的云端神髓，又有 Switch 的专属基因。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 设计 4：极简正负形交错开关闸刀 -->
|
||||
<div class="card">
|
||||
<span class="badge-tag">双色负形 · 工业闸刀</span>
|
||||
<h2 class="card-title">方案 D · 拓扑穿梭网格锁</h2>
|
||||
<p class="card-subtitle">两个实心 L 型几何咬合 · 形成流动互通隧道</p>
|
||||
|
||||
<div class="hero-icon-box">
|
||||
<svg class="hero-svg" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<rect x="0.75" y="0.75" width="62.5" height="62.5" rx="15.25" stroke="#FFFFFF" stroke-opacity="0.18" stroke-width="1.5"/>
|
||||
|
||||
<!-- 两个实心交错的直角滑块（互锁又互通） -->
|
||||
<path d="M16 18 H38 V26 H24 V40 H16 Z" fill="#FFFFFF"/>
|
||||
<path d="M48 46 H26 V38 H40 V24 H48 Z" fill="#FFFFFF"/>
|
||||
<!-- 中央穿透的瞬切光核 -->
|
||||
<circle cx="32" cy="32" r="3.5" fill="#FFFFFF"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="section-label">不同尺寸实测</div>
|
||||
<div class="scale-preview">
|
||||
<div class="scale-item">
|
||||
<svg width="40" height="40" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M16 18 H38 V26 H24 V40 H16 Z" fill="#FFFFFF"/>
|
||||
<path d="M48 46 H26 V38 H40 V24 H48 Z" fill="#FFFFFF"/>
|
||||
<circle cx="32" cy="32" r="3.5" fill="#FFFFFF"/>
|
||||
</svg>
|
||||
<span class="scale-caption">40px</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="28" height="28" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M16 18 H38 V26 H24 V40 H16 Z" fill="#FFFFFF"/>
|
||||
<path d="M48 46 H26 V38 H40 V24 H48 Z" fill="#FFFFFF"/>
|
||||
</svg>
|
||||
<span class="scale-caption">28px</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="18" height="18" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<path d="M16 18 H38 V26 H24 V40 H16 Z" fill="#FFFFFF"/>
|
||||
<path d="M48 46 H26 V38 H40 V24 H48 Z" fill="#FFFFFF"/>
|
||||
</svg>
|
||||
<span class="scale-caption">18px 托盘</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="taskbar-sim">
|
||||
<span class="taskbar-sim-title">Windows 任务栏</span>
|
||||
<svg width="22" height="22" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="#000000" stroke="#FFFFFF" stroke-opacity="0.3"/><path d="M16 18 H38 V26 H24 V40 H16 Z" fill="#FFFFFF"/><path d="M48 46 H26 V38 H40 V24 H48 Z" fill="#FFFFFF"/></svg>
|
||||
</div>
|
||||
|
||||
<ul class="feature-list">
|
||||
<li><strong>正负形互锁</strong>：两个实体角块彼此咬合，勾勒出电路与交换机的逻辑结构。</li>
|
||||
<li><strong>厚实块面</strong>：纯色块面填充，在微小托盘尺寸下绝不会糊掉。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,490 @@
|
||||
<title>Termius 风格 VPS Switch 图标方案</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg-ground: #f8fafc;
|
||||
--surface-card: #ffffff;
|
||||
--border-subtle: #e2e8f0;
|
||||
--text-primary: #0f172a;
|
||||
--text-muted: #64748b;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--bg-ground: #0b0f17;
|
||||
--surface-card: #151d2a;
|
||||
--border-subtle: #243144;
|
||||
--text-primary: #f8fafc;
|
||||
--text-muted: #94a3b8;
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--bg-ground: #0b0f17;
|
||||
--surface-card: #151d2a;
|
||||
--border-subtle: #243144;
|
||||
--text-primary: #f8fafc;
|
||||
--text-muted: #94a3b8;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--bg-ground);
|
||||
color: var(--text-primary);
|
||||
padding: 36px 20px;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1040px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
.header h1 {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 8px 0;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.header p {
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.insight-banner {
|
||||
background: rgba(124, 58, 237, 0.08);
|
||||
border: 1px solid rgba(124, 58, 237, 0.2);
|
||||
border-radius: 16px;
|
||||
padding: 16px 20px;
|
||||
margin-bottom: 32px;
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.insight-banner strong {
|
||||
color: #7c3aed;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
|
||||
gap: 24px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 20px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.badge-tag {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.tag-purple {
|
||||
background: rgba(124, 58, 237, 0.12);
|
||||
color: #7c3aed;
|
||||
border: 1px solid rgba(124, 58, 237, 0.25);
|
||||
}
|
||||
.tag-coral {
|
||||
background: rgba(249, 115, 22, 0.12);
|
||||
color: #ea580c;
|
||||
border: 1px solid rgba(249, 115, 22, 0.25);
|
||||
}
|
||||
.tag-emerald {
|
||||
background: rgba(16, 185, 129, 0.12);
|
||||
color: #059669;
|
||||
border: 1px solid rgba(16, 185, 129, 0.25);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
.card-subtitle {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.hero-icon-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 28px 0;
|
||||
background: radial-gradient(circle at 50% 50%, rgba(241, 245, 249, 0.8), transparent 70%);
|
||||
border-radius: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hero-svg {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.16));
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.hero-svg:hover {
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.scale-preview {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.scale-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.scale-caption {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.taskbar-sim {
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.taskbar-dark {
|
||||
background: #1e1e24;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
.taskbar-light {
|
||||
background: #f1f3f9;
|
||||
color: #1e293b;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
.taskbar-sim-title {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 14px 0 0 0;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.feature-list li {
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
}
|
||||
.feature-list li::before {
|
||||
content: "•";
|
||||
color: #7c3aed;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>向 Termius 级别的纯粹极简致敬</h1>
|
||||
<p>Termius 之所以好看，是因为它从不堆砌服务器抽屉和网线，而是把「纯粹外形」与「终端本质（>_）」做到了极致的减法融合。</p>
|
||||
</div>
|
||||
|
||||
<div class="insight-banner">
|
||||
<strong>💡 为什么 Termius 这么抓人：</strong>
|
||||
它只有两样东西：<strong>一个极简现代的高饱和渐变圆角底</strong> + <strong>一个利落的终端字符</strong>。没有琐碎的小零件，小到 16px 托盘、大到 512px 视网膜屏都极其清晰有力。<br>
|
||||
针对 <code>VPS Switch</code>，我们同样只抓两样最纯粹的灵魂：<strong>「云端 VPS」</strong> + <strong>「Switch 穿梭」</strong>，完全告别黑色。
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<!-- 方案 A：Termius 经典紫罗兰 · Switch 终端光标 -->
|
||||
<div class="card">
|
||||
<span class="badge-tag tag-purple">Termius 原生神韵</span>
|
||||
<h2 class="card-title">方案 A · 极光紫 · 终端滑轨 Switch</h2>
|
||||
<p class="card-subtitle">Termius 标志性高饱和电紫渐变 · 极简 Switch 轨道</p>
|
||||
|
||||
<div class="hero-icon-box">
|
||||
<!-- SVG A -->
|
||||
<svg class="hero-svg" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="gp_a" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#9333EA"/>
|
||||
<stop offset="50%" stop-color="#7C3AED"/>
|
||||
<stop offset="100%" stop-color="#581C87"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="hl_a" x1="0" y1="0" x2="0" y2="64" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.5"/>
|
||||
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0.08"/>
|
||||
</linearGradient>
|
||||
<filter id="sd_a" x="-10%" y="-10%" width="130%" height="130%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="2.5" flood-color="#3B0764" flood-opacity="0.4"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<!-- 底块 -->
|
||||
<rect width="64" height="64" rx="16" fill="url(#gp_a)"/>
|
||||
<rect x="0.75" y="0.75" width="62.5" height="62.5" rx="15.25" stroke="url(#hl_a)" stroke-width="1.5"/>
|
||||
|
||||
<!-- 图标图形：极简胶囊滑轨 + 穿梭终端光标 > -->
|
||||
<g filter="url(#sd_a)">
|
||||
<!-- 胶囊滑道 (Switch Track) -->
|
||||
<rect x="13" y="21" width="38" height="22" rx="11" fill="#FFFFFF" fill-opacity="0.18" stroke="#FFFFFF" stroke-opacity="0.45" stroke-width="2"/>
|
||||
<!-- 左侧静止节点 -->
|
||||
<circle cx="24" cy="32" r="3.5" fill="#FFFFFF" fill-opacity="0.6"/>
|
||||
<!-- 连通流线 -->
|
||||
<line x1="28" y1="32" x2="36" y2="32" stroke="#FFFFFF" stroke-opacity="0.6" stroke-width="2" stroke-linecap="round"/>
|
||||
<!-- 右侧激活滑块：终端冲刺光标 > (自带 Switch 开启与终端双重隐喻) -->
|
||||
<path d="M37 25.5 L43.5 32 L37 38.5" stroke="#FFFFFF" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="section-label">不同系统尺寸实测</div>
|
||||
<div class="scale-preview">
|
||||
<div class="scale-item">
|
||||
<svg width="48" height="48" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="url(#gp_a)"/>
|
||||
<rect x="13" y="21" width="38" height="22" rx="11" fill="#FFFFFF" fill-opacity="0.18" stroke="#FFFFFF" stroke-opacity="0.45" stroke-width="2"/>
|
||||
<circle cx="24" cy="32" r="3.5" fill="#FFFFFF" fill-opacity="0.6"/>
|
||||
<line x1="28" y1="32" x2="36" y2="32" stroke="#FFFFFF" stroke-opacity="0.6" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M37 25.5 L43.5 32 L37 38.5" stroke="#FFFFFF" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">48px 窗口</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="32" height="32" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="url(#gp_a)"/>
|
||||
<rect x="13" y="21" width="38" height="22" rx="11" fill="#FFFFFF" fill-opacity="0.2" stroke="#FFFFFF" stroke-width="2"/>
|
||||
<circle cx="24" cy="32" r="3.5" fill="#FFFFFF"/>
|
||||
<path d="M37 25.5 L43.5 32 L37 38.5" stroke="#FFFFFF" stroke-width="4.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">32px 任务栏</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="20" height="20" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="url(#gp_a)"/>
|
||||
<circle cx="24" cy="32" r="4.5" fill="#FFFFFF"/>
|
||||
<path d="M36 24 L44 32 L36 40" stroke="#FFFFFF" stroke-width="5.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">20px 托盘</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-label">Windows 任务栏环境模拟</div>
|
||||
<div class="taskbar-sim taskbar-dark">
|
||||
<span class="taskbar-sim-title">深色任务栏</span>
|
||||
<svg width="24" height="24" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="url(#gp_a)"/><circle cx="24" cy="32" r="4" fill="#FFFFFF"/><path d="M36 25 L43 32 L36 39" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
<div class="taskbar-sim taskbar-light">
|
||||
<span class="taskbar-sim-title">浅色任务栏</span>
|
||||
<svg width="24" height="24" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="url(#gp_a)"/><circle cx="24" cy="32" r="4" fill="#FFFFFF"/><path d="M36 25 L43 32 L36 39" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
|
||||
<ul class="feature-list">
|
||||
<li><strong>神韵同频</strong>：采用与 Termius 同样摄人心魄的高级电紫渐变，深邃又极具科技感。</li>
|
||||
<li><strong>核心隐喻</strong>：一个 Switch 滑轨，滑块本身就是一个向右冲锋的终端符号 <code>></code>，完美呼应「VPS 终端 + Switch」。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 方案 B：云端穿梭终端符 (Termius 标志性 Cloud + Chevron 变形) -->
|
||||
<div class="card">
|
||||
<span class="badge-tag tag-coral">活力与极简平衡</span>
|
||||
<h2 class="card-title">方案 B · 极简云端折线 · 珊瑚暖橙</h2>
|
||||
<p class="card-subtitle">对标 Termius 云朵剪影 · 融入活力暖橙与对冲穿梭符</p>
|
||||
|
||||
<div class="hero-icon-box">
|
||||
<!-- SVG B -->
|
||||
<svg class="hero-svg" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="gp_b" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FF6B35"/>
|
||||
<stop offset="50%" stop-color="#F97316"/>
|
||||
<stop offset="100%" stop-color="#C2410C"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="hl_b" x1="0" y1="0" x2="0" y2="64" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.45"/>
|
||||
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0.05"/>
|
||||
</linearGradient>
|
||||
<filter id="sd_b" x="-10%" y="-10%" width="130%" height="130%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="2.5" flood-color="#7C2D12" flood-opacity="0.35"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<rect width="64" height="64" rx="16" fill="url(#gp_b)"/>
|
||||
<rect x="0.75" y="0.75" width="62.5" height="62.5" rx="15.25" stroke="url(#hl_b)" stroke-width="1.5"/>
|
||||
|
||||
<!-- 极度纯粹的终端对冲穿梭符：左入右出，像 Termius 那个 >_ 一样洗练 -->
|
||||
<g filter="url(#sd_b)">
|
||||
<!-- 主终端折线 > -->
|
||||
<path d="M18 20 L29 31 L18 42" stroke="#FFFFFF" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<!-- 穿梭反向回流线 (Switch 互切动势) -->
|
||||
<path d="M46 44 L35 33 L46 22" stroke="#FFFFFF" stroke-opacity="0.45" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<!-- 激活高光指示微点 -->
|
||||
<circle cx="34" cy="32" r="3.2" fill="#FFFFFF"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="section-label">不同系统尺寸实测</div>
|
||||
<div class="scale-preview">
|
||||
<div class="scale-item">
|
||||
<svg width="48" height="48" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="url(#gp_b)"/>
|
||||
<path d="M18 20 L29 31 L18 42" stroke="#FFFFFF" stroke-width="5.5" stroke-linecap="round"/>
|
||||
<path d="M46 44 L35 33 L46 22" stroke="#FFFFFF" stroke-opacity="0.45" stroke-width="4" stroke-linecap="round"/>
|
||||
<circle cx="34" cy="32" r="3.2" fill="#FFFFFF"/>
|
||||
</svg>
|
||||
<span class="scale-caption">48px 窗口</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="32" height="32" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="url(#gp_b)"/>
|
||||
<path d="M18 20 L29 31 L18 42" stroke="#FFFFFF" stroke-width="5.5" stroke-linecap="round"/>
|
||||
<path d="M46 44 L35 33 L46 22" stroke="#FFFFFF" stroke-opacity="0.45" stroke-width="4" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">32px 任务栏</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="20" height="20" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="url(#gp_b)"/>
|
||||
<path d="M17 19 L30 32 L17 45" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round"/>
|
||||
<circle cx="43" cy="32" r="4.5" fill="#FFFFFF"/>
|
||||
</svg>
|
||||
<span class="scale-caption">20px 托盘</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-label">Windows 任务栏环境模拟</div>
|
||||
<div class="taskbar-sim taskbar-dark">
|
||||
<span class="taskbar-sim-title">深色任务栏</span>
|
||||
<svg width="24" height="24" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="url(#gp_b)"/><path d="M18 20 L29 31 L18 42" stroke="#FFFFFF" stroke-width="5.5" stroke-linecap="round"/><circle cx="42" cy="32" r="4" fill="#FFFFFF"/></svg>
|
||||
</div>
|
||||
<div class="taskbar-sim taskbar-light">
|
||||
<span class="taskbar-sim-title">浅色任务栏</span>
|
||||
<svg width="24" height="24" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="url(#gp_b)"/><path d="M18 20 L29 31 L18 42" stroke="#FFFFFF" stroke-width="5.5" stroke-linecap="round"/><circle cx="42" cy="32" r="4" fill="#FFFFFF"/></svg>
|
||||
</div>
|
||||
|
||||
<ul class="feature-list">
|
||||
<li><strong>对冲双折角</strong>：就像按 Tab 快速切歌的标志一样，两个对冲的 <code>></code> 表达无缝切换。</li>
|
||||
<li><strong>温暖炽热</strong>：延续软件界面里最提神的心智橙色，在任务栏上一眼吸睛。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 方案 C：纯粹云端 Termius 式轮廓徽章 -->
|
||||
<div class="card">
|
||||
<span class="badge-tag tag-emerald">纯正云端终端</span>
|
||||
<h2 class="card-title">方案 C · 翡翠极光 · 云端极简终端符</h2>
|
||||
<p class="card-subtitle">直接继承 Termius 的经典公式：极简云轮廓 + 纯粹终端光标</p>
|
||||
|
||||
<div class="hero-icon-box">
|
||||
<!-- SVG C -->
|
||||
<svg class="hero-svg" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="gp_c" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#059669"/>
|
||||
<stop offset="50%" stop-color="#10B981"/>
|
||||
<stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="hl_c" x1="0" y1="0" x2="0" y2="64" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.45"/>
|
||||
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0.05"/>
|
||||
</linearGradient>
|
||||
<filter id="sd_c" x="-10%" y="-10%" width="130%" height="130%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="2.5" flood-color="#064E3B" flood-opacity="0.35"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<rect width="64" height="64" rx="16" fill="url(#gp_c)"/>
|
||||
<rect x="0.75" y="0.75" width="62.5" height="62.5" rx="15.25" stroke="url(#hl_c)" stroke-width="1.5"/>
|
||||
|
||||
<g filter="url(#sd_c)">
|
||||
<!-- 极简云轮廓 (象征 Remote VPS) -->
|
||||
<path d="M21 40 H43 C47.5 40 50 36.5 49 32.5 C48.5 29.5 45.5 27.5 42 28 C41 23 37 19.5 32 19.5 C27.5 19.5 24 22.5 22.5 26.5 C18.5 27 15.5 30.5 16 34.5 C16.5 38.5 19 40 21 40 Z" fill="#FFFFFF" fill-opacity="0.18" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round"/>
|
||||
<!-- 云中央嵌一个洗练的终端命令符 > -->
|
||||
<path d="M26 27 L32 32 L26 37" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<!-- 终端光标 _ (呼应 Termius 的灵魂) -->
|
||||
<line x1="35" y1="36" x2="41" y2="36" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="section-label">不同系统尺寸实测</div>
|
||||
<div class="scale-preview">
|
||||
<div class="scale-item">
|
||||
<svg width="48" height="48" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="url(#gp_c)"/>
|
||||
<path d="M21 40 H43 C47.5 40 50 36.5 49 32.5 C48.5 29.5 45.5 27.5 42 28 C41 23 37 19.5 32 19.5 C27.5 19.5 24 22.5 22.5 26.5 C18.5 27 15.5 30.5 16 34.5 C16.5 38.5 19 40 21 40 Z" fill="#FFFFFF" fill-opacity="0.18" stroke="#FFFFFF" stroke-width="2"/>
|
||||
<path d="M26 27 L32 32 L26 37" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>
|
||||
<line x1="35" y1="36" x2="41" y2="36" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">48px 窗口</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="32" height="32" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="url(#gp_c)"/>
|
||||
<path d="M26 27 L32 32 L26 37" stroke="#FFFFFF" stroke-width="4.5" stroke-linecap="round"/>
|
||||
<line x1="35" y1="36" x2="41" y2="36" stroke="#FFFFFF" stroke-width="4.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">32px 任务栏</span>
|
||||
</div>
|
||||
<div class="scale-item">
|
||||
<svg width="20" height="20" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="16" fill="url(#gp_c)"/>
|
||||
<path d="M24 26 L31 32 L24 38" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round"/>
|
||||
<line x1="34" y1="37" x2="40" y2="37" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="scale-caption">20px 托盘</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-label">Windows 任务栏环境模拟</div>
|
||||
<div class="taskbar-sim taskbar-dark">
|
||||
<span class="taskbar-sim-title">深色任务栏</span>
|
||||
<svg width="24" height="24" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="url(#gp_c)"/><path d="M25 27 L31 32 L25 37" stroke="#FFFFFF" stroke-width="4.5" stroke-linecap="round"/><line x1="34" y1="37" x2="40" y2="37" stroke="#FFFFFF" stroke-width="4.5" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
<div class="taskbar-sim taskbar-light">
|
||||
<span class="taskbar-sim-title">浅色任务栏</span>
|
||||
<svg width="24" height="24" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="url(#gp_c)"/><path d="M25 27 L31 32 L25 37" stroke="#FFFFFF" stroke-width="4.5" stroke-linecap="round"/><line x1="34" y1="37" x2="40" y2="37" stroke="#FFFFFF" stroke-width="4.5" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
|
||||
<ul class="feature-list">
|
||||
<li><strong>经典公式</strong>：直接借鉴 Termius 的最核心构图：云朵外形（VPS 云端）+ 纯粹的 <code>> _</code>。</li>
|
||||
<li><strong>翡翠极光绿</strong>：象征着永远在线（Online）与安全健康，清新自然。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,9 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
|
||||
<rect width="64" height="64" rx="16" fill="#18181B"/>
|
||||
<rect x="2" y="2" width="60" height="60" rx="14" stroke="white" stroke-opacity="0.1" stroke-width="2"/>
|
||||
<!-- 终端折线 > -->
|
||||
<path d="M17 21L28 32L17 43" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<!-- Switch 轨道与高光橙色节点 -->
|
||||
<rect x="33" y="25" width="16" height="14" rx="7" fill="#27272A" stroke="#52525B" stroke-width="2"/>
|
||||
<circle cx="42" cy="32" r="4.5" fill="#F97316"/>
|
||||
<rect width="64" height="64" rx="16" fill="#000000"/>
|
||||
<rect x="0.75" y="0.75" width="62.5" height="62.5" rx="15.25" stroke="#FFFFFF" stroke-opacity="0.18" stroke-width="1.5"/>
|
||||
<path d="M16 18 H38 V26 H24 V40 H16 Z" fill="#FFFFFF"/>
|
||||
<path d="M48 46 H26 V38 H40 V24 H48 Z" fill="#FFFFFF"/>
|
||||
<circle cx="32" cy="32" r="3.5" fill="#FFFFFF"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 580 B After Width: | Height: | Size: 427 B |
@@ -6,7 +6,7 @@ defineProps<{
|
||||
|
||||
<template>
|
||||
<div
|
||||
class=" relative inline-flex shrink-0 items-center justify-center overflow-hidden bg-zinc-900 shadow-[0_2px_8px_rgba(24,24,27,0.18)] ring-1 ring-black/5 dark:bg-zinc-100 dark:ring-white/10"
|
||||
class="relative inline-flex shrink-0 items-center justify-center overflow-hidden bg-black shadow-[0_2px_8px_rgba(0,0,0,0.3)] ring-1 ring-white/15 dark:bg-black dark:ring-white/20"
|
||||
:class="{
|
||||
'h-7 w-7 rounded-lg': !size || size === 'sm',
|
||||
'h-9 w-9 rounded-xl': size === 'md',
|
||||
@@ -14,31 +14,14 @@ defineProps<{
|
||||
}"
|
||||
>
|
||||
<svg
|
||||
class="h-[72%] w-[72%]"
|
||||
viewBox="0 0 40 40"
|
||||
class="h-[75%] w-[75%]"
|
||||
viewBox="0 0 64 64"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<!-- 左侧终端命令符 > -->
|
||||
<path
|
||||
d="M8.5 12.5L16.5 20L8.5 27.5"
|
||||
class="stroke-white dark:stroke-zinc-900"
|
||||
stroke-width="3.4"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<!-- 右侧 Switch 胶囊拨杆轨道 -->
|
||||
<rect
|
||||
x="19.5"
|
||||
y="14.5"
|
||||
width="13"
|
||||
height="11"
|
||||
rx="5.5"
|
||||
class="stroke-white/35 fill-white/10 dark:stroke-zinc-900/35 dark:fill-zinc-900/10"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<!-- 激活态活力橙圆点（呼应右上角 + 与 Switch 概念） -->
|
||||
<circle cx="27" cy="20" r="3.4" fill="#F97316" />
|
||||
<path d="M16 18 H38 V26 H24 V40 H16 Z" fill="#FFFFFF" />
|
||||
<path d="M48 46 H26 V38 H40 V24 H48 Z" fill="#FFFFFF" />
|
||||
<circle cx="32" cy="32" r="3.5" fill="#FFFFFF" />
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
+34
-33
@@ -34,7 +34,7 @@ const MENU_ID_SHOW: &str = "app:show";
|
||||
const MENU_ID_QUIT: &str = "app:quit";
|
||||
const MENU_HOST_PREFIX: &str = "host:";
|
||||
|
||||
/// 纯代码光栅化生成 64x64 高清抗锯齿 VPS Switch 图标（深色圆角矩形 + 白色 > 终端符 + 活力橙圆点）
|
||||
/// 纯代码光栅化生成 64x64 高清抗锯齿 VPS Switch 纯黑白拓扑互锁图标
|
||||
pub fn render_brand_icon_rgba(size: u32) -> Vec<u8> {
|
||||
let mut buf = vec![0u8; (size * size * 4) as usize];
|
||||
let s = size as f32;
|
||||
@@ -44,41 +44,51 @@ pub fn render_brand_icon_rgba(size: u32) -> Vec<u8> {
|
||||
let fx = (x as f32 + 0.5) / s * 64.0;
|
||||
let fy = (y as f32 + 0.5) / s * 64.0;
|
||||
|
||||
// 1. 圆角方块底 (64x64, rx=15)
|
||||
// 1. 纯黑圆角方块基底 (64x64, rx=14)
|
||||
let bg_dist = sd_rounded_box(fx - 32.0, fy - 32.0, 29.0, 29.0, 14.0);
|
||||
if bg_dist > 1.0 {
|
||||
continue;
|
||||
}
|
||||
let bg_alpha = (0.5 - bg_dist).clamp(0.0, 1.0);
|
||||
|
||||
let mut r = 24.0;
|
||||
let mut g = 24.0;
|
||||
let mut b = 27.0;
|
||||
let mut r = 0.0;
|
||||
let mut g = 0.0;
|
||||
let mut b = 0.0;
|
||||
|
||||
// 2. 左侧白色终端折线 > : (16, 20) -> (28, 32) -> (16, 44)
|
||||
let d_seg1 = sd_segment(fx, fy, 16.0, 20.0, 27.5, 32.0) - 2.7;
|
||||
let d_seg2 = sd_segment(fx, fy, 27.5, 32.0, 16.0, 44.0) - 2.7;
|
||||
let d_chevron = d_seg1.min(d_seg2);
|
||||
if d_chevron < 0.8 {
|
||||
let w = (0.5 - d_chevron).clamp(0.0, 1.0);
|
||||
r = r * (1.0 - w) + 250.0 * w;
|
||||
g = g * (1.0 - w) + 250.0 * w;
|
||||
b = b * (1.0 - w) + 250.0 * w;
|
||||
// 外围 1px 微弱白光边框，在深色任务栏上保持轮廓分明
|
||||
if bg_dist > -1.2 && bg_dist < 0.2 {
|
||||
let border_w = (1.0 - (bg_dist + 0.5).abs()).clamp(0.0, 1.0) * 0.22;
|
||||
r += 255.0 * border_w;
|
||||
g += 255.0 * border_w;
|
||||
b += 255.0 * border_w;
|
||||
}
|
||||
|
||||
// 3. 右侧活力橙 Switch 节点圆 (cx=43, cy=32, r=6.8)
|
||||
let d_dot = ((fx - 43.0).powi(2) + (fy - 32.0).powi(2)).sqrt() - 6.8;
|
||||
if d_dot < 0.8 {
|
||||
let w = (0.5 - d_dot).clamp(0.0, 1.0);
|
||||
r = r * (1.0 - w) + 249.0 * w;
|
||||
g = g * (1.0 - w) + 115.0 * w;
|
||||
b = b * (1.0 - w) + 22.0 * w;
|
||||
// 2. 左上实心 L 型滑块 (M16 18 H38 V26 H24 V40 H16 Z)
|
||||
let d_b1_horiz = sd_rounded_box(fx - 27.0, fy - 22.0, 11.0, 4.0, 1.5);
|
||||
let d_b1_vert = sd_rounded_box(fx - 20.0, fy - 29.0, 4.0, 11.0, 1.5);
|
||||
let d_b1 = d_b1_horiz.min(d_b1_vert);
|
||||
|
||||
// 3. 右下实心 L 型滑块 (M48 46 H26 V38 H40 V24 H48 Z)
|
||||
let d_b2_horiz = sd_rounded_box(fx - 37.0, fy - 42.0, 11.0, 4.0, 1.5);
|
||||
let d_b2_vert = sd_rounded_box(fx - 44.0, fy - 35.0, 4.0, 11.0, 1.5);
|
||||
let d_b2 = d_b2_horiz.min(d_b2_vert);
|
||||
|
||||
// 4. 中央穿透的瞬切光核 (cx=32, cy=32, r=3.5)
|
||||
let d_dot = ((fx - 32.0).powi(2) + (fy - 32.0).powi(2)).sqrt() - 3.5;
|
||||
|
||||
// 综合计算纯白图形距离场
|
||||
let d_glyph = d_b1.min(d_b2).min(d_dot);
|
||||
if d_glyph < 0.8 {
|
||||
let w = (0.5 - d_glyph).clamp(0.0, 1.0);
|
||||
r = r * (1.0 - w) + 255.0 * w;
|
||||
g = g * (1.0 - w) + 255.0 * w;
|
||||
b = b * (1.0 - w) + 255.0 * w;
|
||||
}
|
||||
|
||||
let idx = ((y * size + x) * 4) as usize;
|
||||
buf[idx] = r as u8;
|
||||
buf[idx + 1] = g as u8;
|
||||
buf[idx + 2] = b as u8;
|
||||
buf[idx] = r.min(255.0) as u8;
|
||||
buf[idx + 1] = g.min(255.0) as u8;
|
||||
buf[idx + 2] = b.min(255.0) as u8;
|
||||
buf[idx + 3] = (bg_alpha * 255.0) as u8;
|
||||
}
|
||||
}
|
||||
@@ -91,15 +101,6 @@ fn sd_rounded_box(px: f32, py: f32, bx: f32, by: f32, r: f32) -> f32 {
|
||||
(qx.max(0.0).powi(2) + qy.max(0.0).powi(2)).sqrt() + qx.max(qy).min(0.0) - r
|
||||
}
|
||||
|
||||
fn sd_segment(px: f32, py: f32, ax: f32, ay: f32, bx: f32, by: f32) -> f32 {
|
||||
let pax = px - ax;
|
||||
let pay = py - ay;
|
||||
let bax = bx - ax;
|
||||
let bay = by - ay;
|
||||
let h = ((pax * bax + pay * bay) / (bax * bax + bay * bay)).clamp(0.0, 1.0);
|
||||
((pax - bax * h).powi(2) + (pay - bay * h).powi(2)).sqrt()
|
||||
}
|
||||
|
||||
fn build_tray_menu(state: &Arc<AppState>) -> Result<Menu> {
|
||||
let menu = Menu::new();
|
||||
let show_item = MenuItem::with_id(MENU_ID_SHOW, "打开 VPS Switch 主界面", true, None);
|
||||
|
||||
Reference in new issue
Block a user