490 lines
21 KiB
HTML
490 lines
21 KiB
HTML
<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> |