feat: 同步 design/ 设计系统(含 iPad tablet kit) + 架构任务拆分(todo/)
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
wangjia
@@ -0,0 +1,45 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Brand" name="App 图标家族" subtitle="clay 渐变圆角方,多尺寸" viewport="700x170" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body{margin:0;background:var(--bg);font-family:var(--font-sans);padding:22px;color:var(--fg1);display:flex;align-items:center;gap:34px}
|
||||
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);position:absolute;top:12px;left:24px}
|
||||
.hero{display:flex;flex-direction:column;align-items:center;gap:10px}
|
||||
.sizes{display:flex;align-items:flex-end;gap:22px}
|
||||
.unit{display:flex;flex-direction:column;align-items:center;gap:8px}
|
||||
.tile{border-radius:23px;background:linear-gradient(160deg,#C8794A,#9E5630);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md)}
|
||||
.n{font-family:var(--font-mono);font-size:10px;color:var(--fg3)}
|
||||
.name{font-size:12px;font-weight:700}
|
||||
</style></head><body>
|
||||
<div class="lab">APP ICON · 行走穿山甲(纹路 + 眼睛,与 Logo 一致;40/28 仅纹路) — 最终锁版</div>
|
||||
|
||||
<!-- body + scale strokes -->
|
||||
<template id="body">
|
||||
<g transform="translate(96,0) scale(-1,1)">
|
||||
<path d="M16 59 Q17 51 26 50 Q34 31 45 30 Q55 30 62 37 Q69 41 75 45 Q85 49 89 44 Q92 50 84 52 Q75 53 67 53 Q66 62 60 62 L56 62 Q54 55 49 55 Q47 62 37 62 L33 62 Q31 56 26 56 Q20 59 16 59 Z" fill="#fff"/>
|
||||
<g stroke="#B96A3D" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.9">
|
||||
<path d="M26 50 Q34 43 42 50"/><path d="M36 48 Q44 41 52 48"/><path d="M46 48 Q54 41 62 49"/>
|
||||
</g>
|
||||
</g>
|
||||
</template>
|
||||
<template id="eye"><circle cx="73" cy="55" r="2.3" fill="#9E5630"/></template>
|
||||
|
||||
<div class="hero">
|
||||
<div class="tile" style="width:104px;height:104px"><svg width="80" height="80" viewBox="0 0 96 96" fill="none" class="full"></svg></div>
|
||||
<div class="name">主图标 104px</div>
|
||||
</div>
|
||||
|
||||
<div class="sizes">
|
||||
<div class="unit"><div class="tile" style="width:64px;height:64px;border-radius:15px"><svg width="50" height="50" viewBox="0 0 96 96" fill="none" class="full"></svg></div><span class="n">64 · 纹路+眼睛</span></div>
|
||||
<div class="unit"><div class="tile" style="width:40px;height:40px;border-radius:9px"><svg width="32" height="32" viewBox="0 0 96 96" fill="none" class="tex"></svg></div><span class="n">40 · 仅纹路</span></div>
|
||||
<div class="unit"><div class="tile" style="width:28px;height:28px;border-radius:6px"><svg width="23" height="23" viewBox="0 0 96 96" fill="none" class="tex"></svg></div><span class="n">28 · 仅纹路</span></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const body = document.getElementById('body').innerHTML;
|
||||
// insert eye just before the final (mirror group) closing tag so it mirrors to the head side
|
||||
const lastClose = body.lastIndexOf('</g>');
|
||||
const bodyWithEye = body.slice(0, lastClose) + '<circle cx="23" cy="55" r="2.3" fill="#9E5630"/>' + body.slice(lastClose);
|
||||
document.querySelectorAll('svg.full').forEach(s => s.innerHTML = bodyWithEye);
|
||||
document.querySelectorAll('svg.tex').forEach(s => s.innerHTML = body);
|
||||
</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Brand" name="Logo 锁版" subtitle="浅色主锁版 / 深色反白锁版" viewport="700x185" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>body{margin:0;font-family:var(--font-sans);padding:0;display:flex}
|
||||
.half{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px 0}
|
||||
.light{background:var(--sand-50)} .dark{background:var(--sand-950)}
|
||||
.wm{display:flex;align-items:center;gap:13px}
|
||||
.tw{display:flex;flex-direction:column;line-height:1}
|
||||
.cn{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-0.01em}
|
||||
.en{font-family:var(--font-display);font-weight:600;font-size:10px;letter-spacing:0.22em;color:var(--clay-500);margin-top:4px}
|
||||
.lab{font-family:var(--font-mono);font-size:9px}</style></head><body>
|
||||
<div class="half light">
|
||||
<div class="wm"><img src="../assets/logo-mark.svg" width="48"><div class="tw"><span class="cn" style="color:var(--sand-900)">穿山甲</span><span class="en">PANGOLIN</span></div></div>
|
||||
<span class="lab" style="color:var(--sand-500)">主锁版 · 浅色背景</span>
|
||||
</div>
|
||||
<div class="half dark">
|
||||
<div class="wm"><img src="../assets/logo-mark-white.svg" width="48"><div class="tw"><span class="cn" style="color:#F4EFE8">穿山甲</span><span class="en" style="color:var(--clay-300)">PANGOLIN</span></div></div>
|
||||
<span class="lab" style="color:#897f6f">反白锁版 · 深色背景</span>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Colors" name="Clay 主色阶" subtitle="穿山甲铜棕主色 50–900,500 为品牌主色" viewport="700x150" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body{margin:0;background:var(--bg);font-family:var(--font-sans);padding:22px}
|
||||
.row{display:flex;gap:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
|
||||
.sw{flex:1;height:78px;display:flex;align-items:flex-end;padding:8px;box-sizing:border-box}
|
||||
.lab{font-family:var(--font-mono);font-size:10px;line-height:1.3}
|
||||
.meta{display:flex;justify-content:space-between;margin-top:12px;font-family:var(--font-mono);font-size:10px;color:var(--fg3)}
|
||||
.star{position:absolute}
|
||||
</style></head><body>
|
||||
<div class="row">
|
||||
<div class="sw" style="background:var(--clay-50)"><span class="lab" style="color:var(--clay-700)">50</span></div>
|
||||
<div class="sw" style="background:var(--clay-100)"><span class="lab" style="color:var(--clay-700)">100</span></div>
|
||||
<div class="sw" style="background:var(--clay-200)"><span class="lab" style="color:var(--clay-800)">200</span></div>
|
||||
<div class="sw" style="background:var(--clay-300)"><span class="lab" style="color:var(--clay-900)">300</span></div>
|
||||
<div class="sw" style="background:var(--clay-400)"><span class="lab" style="color:#fff">400</span></div>
|
||||
<div class="sw" style="background:var(--clay-500)"><span class="lab" style="color:#fff">500 ●</span></div>
|
||||
<div class="sw" style="background:var(--clay-600)"><span class="lab" style="color:#fff">600</span></div>
|
||||
<div class="sw" style="background:var(--clay-700)"><span class="lab" style="color:#fff">700</span></div>
|
||||
<div class="sw" style="background:var(--clay-800)"><span class="lab" style="color:#fff">800</span></div>
|
||||
<div class="sw" style="background:var(--clay-900)"><span class="lab" style="color:#fff">900</span></div>
|
||||
</div>
|
||||
<div class="meta"><span>Clay / Copper · 主色 · 穿山甲鳞甲</span><span>● 500 = #B96A3D primary</span></div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Colors" name="暗色主题表面" subtitle="暖 espresso 背景与表面层级" viewport="700x185" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body{margin:0;font-family:var(--font-sans);padding:22px;background:var(--sand-950)}
|
||||
[data-theme]{display:flex;gap:12px}
|
||||
.card{flex:1;border-radius:var(--radius-lg);padding:16px;border:1px solid var(--border)}
|
||||
.t1{color:var(--fg1);font-weight:700;font-size:15px}
|
||||
.t2{color:var(--fg2);font-size:12px;margin-top:4px}
|
||||
.t3{color:var(--fg3);font-size:11px;margin-top:2px}
|
||||
.pill{display:inline-block;margin-top:12px;background:var(--accent);color:var(--fg-on-accent);font-weight:600;font-size:12px;padding:6px 12px;border-radius:var(--radius-full)}
|
||||
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);margin-bottom:8px}
|
||||
</style></head><body data-theme="dark">
|
||||
<div class="lab" style="color:#897f6f">DARK THEME · 暗色主题 — 暖 espresso 表面层级</div>
|
||||
<div data-theme="dark">
|
||||
<div class="card" style="background:var(--bg)"><div class="t1">bg</div><div class="t2">应用画布</div><div class="t3">#14110E</div></div>
|
||||
<div class="card" style="background:var(--surface)"><div class="t1">surface</div><div class="t2">卡片 / 面板</div><div class="t3">#221E19</div></div>
|
||||
<div class="card" style="background:var(--surface-2)"><div class="t1">surface-2</div><div class="t2">嵌套层</div><div class="t3">#2A251F</div><span class="pill">Accent</span></div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Colors" name="Sand 中性色阶" subtitle="暖中性 taupe 50–950,950 为暗色画布" viewport="700x150" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body{margin:0;background:var(--bg);font-family:var(--font-sans);padding:22px}
|
||||
.row{display:flex;gap:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
|
||||
.sw{flex:1;height:78px;display:flex;align-items:flex-end;padding:8px;box-sizing:border-box}
|
||||
.lab{font-family:var(--font-mono);font-size:10px}
|
||||
.meta{display:flex;justify-content:space-between;margin-top:12px;font-family:var(--font-mono);font-size:10px;color:var(--fg3)}
|
||||
</style></head><body>
|
||||
<div class="row">
|
||||
<div class="sw" style="background:var(--sand-50)"><span class="lab" style="color:var(--sand-700)">50</span></div>
|
||||
<div class="sw" style="background:var(--sand-100)"><span class="lab" style="color:var(--sand-700)">100</span></div>
|
||||
<div class="sw" style="background:var(--sand-200)"><span class="lab" style="color:var(--sand-800)">200</span></div>
|
||||
<div class="sw" style="background:var(--sand-300)"><span class="lab" style="color:var(--sand-900)">300</span></div>
|
||||
<div class="sw" style="background:var(--sand-400)"><span class="lab" style="color:#fff">400</span></div>
|
||||
<div class="sw" style="background:var(--sand-500)"><span class="lab" style="color:#fff">500</span></div>
|
||||
<div class="sw" style="background:var(--sand-600)"><span class="lab" style="color:#fff">600</span></div>
|
||||
<div class="sw" style="background:var(--sand-700)"><span class="lab" style="color:#fff">700</span></div>
|
||||
<div class="sw" style="background:var(--sand-800)"><span class="lab" style="color:#fff">800</span></div>
|
||||
<div class="sw" style="background:var(--sand-900)"><span class="lab" style="color:#fff">900</span></div>
|
||||
<div class="sw" style="background:var(--sand-950)"><span class="lab" style="color:#fff">950</span></div>
|
||||
</div>
|
||||
<div class="meta"><span>Sand / Taupe · 暖中性 · 文本与表面</span><span>950 = 暗色画布 espresso</span></div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,25 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Colors" name="语义状态色" subtitle="success / warning / danger 及 subtle 变体" viewport="700x175" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
body{margin:0;background:var(--bg);font-family:var(--font-sans);padding:22px;display:flex;gap:14px}
|
||||
.col{flex:1;display:flex;flex-direction:column;gap:8px}
|
||||
.chip{height:56px;border-radius:var(--radius-md);display:flex;align-items:center;padding:0 14px;color:#fff;font-weight:600;font-size:13px;box-shadow:var(--shadow-sm)}
|
||||
.sub{height:30px;border-radius:var(--radius-sm);display:flex;align-items:center;padding:0 14px;font-size:11px;font-weight:600}
|
||||
.name{font-family:var(--font-mono);font-size:10px;color:var(--fg3);text-align:center}
|
||||
</style></head><body>
|
||||
<div class="col">
|
||||
<div class="chip" style="background:var(--success)">已连接 Connected</div>
|
||||
<div class="sub" style="background:var(--success-subtle);color:var(--green-600)">subtle</div>
|
||||
<div class="name">success · #5B8C5A</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="chip" style="background:var(--warning)">连接中 Connecting</div>
|
||||
<div class="sub" style="background:var(--warning-subtle);color:var(--amber-600)">subtle</div>
|
||||
<div class="name">warning · #D69A3C</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="chip" style="background:var(--danger)">已断开 Error</div>
|
||||
<div class="sub" style="background:var(--danger-subtle);color:var(--red-600)">subtle</div>
|
||||
<div class="name">danger · #C0533B</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,22 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Components" name="状态徽章" subtitle="连接态 / 套餐 / 节点属性胶囊" viewport="700x150" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>body{margin:0;background:var(--bg);font-family:var(--font-sans);padding:22px;display:flex;gap:12px;flex-wrap:wrap}
|
||||
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);width:100%;margin-bottom:8px}
|
||||
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:6px 12px;border-radius:var(--radius-full)}
|
||||
.dot{width:7px;height:7px;border-radius:50%}
|
||||
.ok{background:var(--success-subtle);color:var(--green-600)} .ok .dot{background:var(--success)}
|
||||
.warn{background:var(--warning-subtle);color:var(--amber-600)} .warn .dot{background:var(--warning)}
|
||||
.err{background:var(--danger-subtle);color:var(--red-600)} .err .dot{background:var(--danger)}
|
||||
.neu{background:var(--sand-100);color:var(--fg2)} .neu .dot{background:var(--sand-400)}
|
||||
.pro{background:var(--accent);color:var(--fg-on-accent)}
|
||||
.cnt{background:var(--accent-subtle);color:var(--accent);border:1px solid var(--accent-border)}</style></head><body>
|
||||
<div class="lab">BADGES / STATUS · 状态胶囊 — 连接态 · 套餐 · 节点属性</div>
|
||||
<span class="pill ok"><span class="dot"></span>已连接 Connected</span>
|
||||
<span class="pill warn"><span class="dot"></span>连接中 Connecting</span>
|
||||
<span class="pill err"><span class="dot"></span>已断开 Disconnected</span>
|
||||
<span class="pill neu"><span class="dot"></span>未登录</span>
|
||||
<span class="pill pro">PRO 会员</span>
|
||||
<span class="pill cnt">流媒体优化</span>
|
||||
<span class="pill cnt">P2P</span>
|
||||
<span class="pill neu">延迟 24ms</span>
|
||||
</body></html>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Components" name="按钮" subtitle="主/次/幽灵/危险/禁用/图标" viewport="700x150" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>body{margin:0;background:var(--bg);font-family:var(--font-sans);padding:24px}
|
||||
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);margin-bottom:16px}
|
||||
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
|
||||
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-weight:600;font-size:14px;border:none;border-radius:var(--radius-full);padding:11px 20px;cursor:pointer;transition:all var(--dur-fast) var(--ease-out)}
|
||||
.btn svg{width:16px;height:16px}
|
||||
.primary{background:var(--accent);color:var(--fg-on-accent)}
|
||||
.primary:hover{background:var(--accent-hover)}
|
||||
.secondary{background:var(--surface);color:var(--fg1);border:1.5px solid var(--border-strong)}
|
||||
.ghost{background:transparent;color:var(--accent)}
|
||||
.ghost:hover{background:var(--accent-subtle)}
|
||||
.danger{background:var(--danger-subtle);color:var(--red-600)}
|
||||
.disabled{background:var(--sand-200);color:var(--sand-400);cursor:not-allowed}
|
||||
.icon{padding:11px;border-radius:var(--radius-full)}</style>
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script></head><body>
|
||||
<div class="lab">BUTTONS · 全圆角 (full) · hover 加深 · press 收缩</div>
|
||||
<div class="row">
|
||||
<button class="btn primary"><i data-lucide="power"></i>连接 Connect</button>
|
||||
<button class="btn secondary"><i data-lucide="globe"></i>选择节点</button>
|
||||
<button class="btn ghost">了解更多</button>
|
||||
<button class="btn danger"><i data-lucide="x"></i>断开</button>
|
||||
<button class="btn disabled">连接中…</button>
|
||||
<button class="btn primary icon"><i data-lucide="settings"></i></button>
|
||||
</div>
|
||||
<script>lucide.createIcons()</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,52 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Components" name="核心连接按钮" subtitle="断开 / 连接中 / 已连接 三态" viewport="700x210" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>body{margin:0;background:var(--bg);font-family:var(--font-sans);padding:24px;display:flex;gap:44px;align-items:center;justify-content:center}
|
||||
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);position:absolute;top:14px;left:24px}
|
||||
.unit{display:flex;flex-direction:column;align-items:center;gap:14px}
|
||||
.btn{position:relative;width:140px;height:140px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;border:none}
|
||||
.ring{position:absolute;inset:0}
|
||||
.btn svg.glyph{width:38px;height:38px;z-index:1}
|
||||
.cap{font-size:13px;font-weight:600;color:var(--fg2)}
|
||||
.t{font-size:11px;font-weight:700;letter-spacing:0.1em;z-index:1}
|
||||
.sub{font-size:10px;font-weight:600;letter-spacing:0.02em;opacity:.85;z-index:1}
|
||||
/* OFF — warm tinted fill, not pure white */
|
||||
.off{background:radial-gradient(circle at 50% 38%, var(--sand-50), var(--sand-100));color:var(--clay-500);box-shadow:inset 0 0 0 1px var(--sand-200),var(--shadow-md)}
|
||||
.connecting{background:var(--accent);color:#fff;box-shadow:0 0 0 8px var(--accent-subtle),var(--shadow-lg)}
|
||||
.on{background:var(--success);color:#fff;box-shadow:0 0 0 8px var(--success-subtle),var(--shadow-lg)}
|
||||
@keyframes spin{to{transform:rotate(360deg)}}
|
||||
.spin{animation:spin 1.1s linear infinite}</style>
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script></head><body>
|
||||
<div class="lab">CONNECT BUTTON · 核心连接键 — 轨道环 + 圆内状态,三态:断开 / 连接中 / 已连接</div>
|
||||
|
||||
<div class="unit">
|
||||
<button class="btn off">
|
||||
<svg class="ring" viewBox="0 0 140 140"><circle cx="70" cy="70" r="64" fill="none" stroke="var(--sand-200)" stroke-width="3" stroke-dasharray="2 7" stroke-linecap="round"/></svg>
|
||||
<i class="glyph" data-lucide="power"></i>
|
||||
<span class="t">点击连接</span>
|
||||
<span class="sub" style="color:var(--fg3)">TAP TO CONNECT</span>
|
||||
</button>
|
||||
<span class="cap">未连接 Off</span>
|
||||
</div>
|
||||
|
||||
<div class="unit">
|
||||
<button class="btn connecting">
|
||||
<svg class="ring spin" viewBox="0 0 140 140"><circle cx="70" cy="70" r="64" fill="none" stroke="rgba(255,255,255,.3)" stroke-width="4"/><circle cx="70" cy="70" r="64" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-dasharray="100 302"/></svg>
|
||||
<i class="glyph" data-lucide="shield"></i>
|
||||
<span class="t">连接中</span>
|
||||
<span class="sub">CONNECTING…</span>
|
||||
</button>
|
||||
<span class="cap">建立隧道 Connecting</span>
|
||||
</div>
|
||||
|
||||
<div class="unit">
|
||||
<button class="btn on">
|
||||
<svg class="ring" viewBox="0 0 140 140"><circle cx="70" cy="70" r="64" fill="none" stroke="rgba(255,255,255,.85)" stroke-width="4" stroke-linecap="round" stroke-dasharray="402"/></svg>
|
||||
<i class="glyph" data-lucide="shield-check"></i>
|
||||
<span class="t" style="font-family:var(--font-mono);letter-spacing:0">02:14:08</span>
|
||||
<span class="sub">已加密 · SECURE</span>
|
||||
</button>
|
||||
<span class="cap">已连接 Connected</span>
|
||||
</div>
|
||||
|
||||
<script>lucide.createIcons()</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,26 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Components" name="表单控件" subtitle="输入框(focus 光环)与开关" viewport="700x175" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>body{margin:0;background:var(--bg);font-family:var(--font-sans);padding:24px;color:var(--fg1)}
|
||||
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);margin-bottom:16px}
|
||||
.wrap{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
|
||||
.field{flex:1;min-width:220px}
|
||||
.flabel{font-size:12px;font-weight:600;color:var(--fg2);margin-bottom:6px;display:block}
|
||||
.input{width:100%;box-sizing:border-box;font-family:var(--font-sans);font-size:14px;color:var(--fg1);background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--radius-md);padding:11px 14px}
|
||||
.input:focus{outline:none;border-color:var(--accent);box-shadow:var(--shadow-focus)}
|
||||
.input.focused{border-color:var(--accent);box-shadow:var(--shadow-focus)}
|
||||
.toggles{display:flex;gap:20px;align-items:center}
|
||||
.sw{width:46px;height:28px;border-radius:var(--radius-full);position:relative;cursor:pointer;transition:background var(--dur-base) var(--ease-out)}
|
||||
.sw.on{background:var(--accent)} .sw.off{background:var(--sand-300)}
|
||||
.knob{position:absolute;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:left var(--dur-base) var(--ease-out)}
|
||||
.sw.on .knob{left:21px} .sw.off .knob{left:3px}
|
||||
.tlab{font-size:13px;font-weight:500}</style></head><body>
|
||||
<div class="lab">FORM · 输入框 (focus 显示 clay 光环) · 开关</div>
|
||||
<div class="wrap">
|
||||
<div class="field"><label class="flabel">邮箱 Email</label><input class="input focused" value="me@pangolin.vpn"></div>
|
||||
<div class="field"><label class="flabel">兑换码</label><input class="input" placeholder="输入兑换码 / Redeem code"></div>
|
||||
<div class="toggles">
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span class="tlab">开机自启</span><div class="sw on"><div class="knob"></div></div></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span class="tlab">Kill Switch</span><div class="sw off"><div class="knob"></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Components" name="套餐卡" subtitle="免费版与 PRO 渐变卡" viewport="700x300" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>body{margin:0;background:var(--bg);font-family:var(--font-sans);padding:20px;color:var(--fg1);display:flex;gap:16px}
|
||||
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);position:absolute;top:6px;left:20px}
|
||||
.card{flex:1;background:var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:20px;border:1px solid var(--border)}
|
||||
.card.pro{background:linear-gradient(160deg,var(--clay-600),var(--clay-800));color:#fff;border:none}
|
||||
.pname{font-size:13px;font-weight:600;opacity:.8;margin-bottom:6px}
|
||||
.price{font-family:var(--font-display);font-size:30px;font-weight:700;letter-spacing:-0.02em}
|
||||
.price small{font-size:13px;font-weight:500;opacity:.7}
|
||||
.feat{font-size:12px;margin-top:14px;display:flex;flex-direction:column;gap:7px}
|
||||
.feat div{display:flex;align-items:center;gap:7px}
|
||||
.feat svg{width:14px;height:14px;flex-shrink:0}
|
||||
.cta{margin-top:18px;width:100%;border:none;border-radius:var(--radius-full);padding:11px;font-weight:600;font-size:13px;cursor:pointer}
|
||||
.cta.b{background:var(--accent);color:#fff}.cta.w{background:#fff;color:var(--clay-700)}</style>
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script></head><body>
|
||||
<div class="lab">PLAN CARD · 套餐卡 — 普通 / PRO(clay 渐变)</div>
|
||||
<div class="card"><div class="pname" style="color:var(--fg2)">免费版 Free</div><div class="price" style="color:var(--fg1)">¥0<small>/月</small></div>
|
||||
<div class="feat" style="color:var(--fg2)"><div><i data-lucide="check"></i>3 个基础节点</div><div><i data-lucide="check"></i>每日 1GB 流量</div></div>
|
||||
<button class="cta b">当前方案</button></div>
|
||||
<div class="card pro"><div class="pname">PRO 会员</div><div class="price">¥25<small>/月</small></div>
|
||||
<div class="feat"><div><i data-lucide="check"></i>80+ 全球节点</div><div><i data-lucide="check"></i>无限流量 · 极速</div><div><i data-lucide="check"></i>5 台设备同时在线</div></div>
|
||||
<button class="cta w">立即升级</button></div>
|
||||
<script>lucide.createIcons()</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,25 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Components" name="服务器列表行" subtitle="国家码 · 延迟 · 信号 · 选中态" viewport="700x300" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>body{margin:0;background:var(--bg);font-family:var(--font-sans);padding:20px;color:var(--fg1)}
|
||||
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);margin-bottom:12px}
|
||||
.list{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
|
||||
.row{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--border);cursor:pointer}
|
||||
.row:last-child{border:0}
|
||||
.row.sel{background:var(--accent-subtle)}
|
||||
.cc{width:34px;height:34px;border-radius:var(--radius-md);background:var(--sand-100);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--fg2);flex-shrink:0}
|
||||
.row.sel .cc{background:var(--accent);color:#fff}
|
||||
.name{flex:1}.n1{font-size:14px;font-weight:600}.n2{font-size:11px;color:var(--fg3)}
|
||||
.sig{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;color:var(--fg2)}
|
||||
.bars{display:flex;gap:2px;align-items:flex-end;height:14px}
|
||||
.bars i{width:3px;border-radius:1px;background:var(--success)}
|
||||
.check{color:var(--accent)} .check svg{width:18px;height:18px}</style>
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script></head><body>
|
||||
<div class="lab">SERVER ROW · 服务器列表 — 国家码 · 延迟 · 信号 · 选中态</div>
|
||||
<div class="list">
|
||||
<div class="row sel"><div class="cc">HK</div><div class="name"><div class="n1">香港 · 流媒体</div><div class="n2">Hong Kong · 1.2× 倍率</div></div><span class="sig">18ms</span><span class="check"><i data-lucide="check"></i></span></div>
|
||||
<div class="row"><div class="cc">JP</div><div class="name"><div class="n1">日本 东京</div><div class="n2">Tokyo</div></div><span class="sig"><span class="bars"><i style="height:5px"></i><i style="height:9px"></i><i style="height:14px"></i></span>32ms</span></div>
|
||||
<div class="row"><div class="cc">SG</div><div class="name"><div class="n1">新加坡</div><div class="n2">Singapore · P2P</div></div><span class="sig"><span class="bars"><i style="height:5px"></i><i style="height:9px"></i><i style="height:14px;background:var(--sand-300)"></i></span>54ms</span></div>
|
||||
<div class="row"><div class="cc">US</div><div class="name"><div class="n1">美国 洛杉矶</div><div class="n2">Los Angeles</div></div><span class="sig"><span class="bars"><i style="height:5px"></i><i style="height:9px;background:var(--sand-300)"></i><i style="height:14px;background:var(--sand-300)"></i></span>146ms</span></div>
|
||||
</div>
|
||||
<script>lucide.createIcons()</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,18 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Spacing" name="圆角" subtitle="偏大圆角 = 亲和友好" viewport="700x150" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>body{margin:0;background:var(--bg);font-family:var(--font-sans);padding:24px}
|
||||
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);margin-bottom:16px}
|
||||
.row{display:flex;gap:18px;align-items:flex-end}
|
||||
.box{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}
|
||||
.sq{width:100%;height:64px;background:var(--accent-subtle);border:1.5px solid var(--accent-border)}
|
||||
.n{font-family:var(--font-mono);font-size:10px;color:var(--fg2)}</style></head><body>
|
||||
<div class="lab">RADII · 圆角 — 偏大 = 亲和友好</div>
|
||||
<div class="row">
|
||||
<div class="box"><div class="sq" style="border-radius:var(--radius-sm)"></div><span class="n">sm 6</span></div>
|
||||
<div class="box"><div class="sq" style="border-radius:var(--radius-md)"></div><span class="n">md 10</span></div>
|
||||
<div class="box"><div class="sq" style="border-radius:var(--radius-lg)"></div><span class="n">lg 14</span></div>
|
||||
<div class="box"><div class="sq" style="border-radius:var(--radius-xl)"></div><span class="n">xl 20</span></div>
|
||||
<div class="box"><div class="sq" style="border-radius:var(--radius-2xl)"></div><span class="n">2xl 28</span></div>
|
||||
<div class="box"><div class="sq" style="border-radius:var(--radius-full)"></div><span class="n">full</span></div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Spacing" name="阴影系统" subtitle="暖色调柔和投影 sm–xl" viewport="700x180" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>body{margin:0;background:var(--bg);font-family:var(--font-sans);padding:30px 24px 36px}
|
||||
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);margin-bottom:24px}
|
||||
.row{display:flex;gap:28px}
|
||||
.box{flex:1;display:flex;flex-direction:column;align-items:center;gap:14px}
|
||||
.sq{width:100%;height:60px;background:linear-gradient(160deg,#FBF8F4,#F3EEE7);border:1px solid var(--sand-200);border-radius:var(--radius-lg)}
|
||||
.n{font-family:var(--font-mono);font-size:10px;color:var(--fg2)}</style></head><body>
|
||||
<div class="lab">SHADOWS · 暖色调投影 (rgba 45,30,20) — 柔和、克制</div>
|
||||
<div class="row">
|
||||
<div class="box"><div class="sq" style="box-shadow:var(--shadow-sm)"></div><span class="n">sm</span></div>
|
||||
<div class="box"><div class="sq" style="box-shadow:var(--shadow-md)"></div><span class="n">md</span></div>
|
||||
<div class="box"><div class="sq" style="box-shadow:var(--shadow-lg)"></div><span class="n">lg</span></div>
|
||||
<div class="box"><div class="sq" style="box-shadow:var(--shadow-xl)"></div><span class="n">xl</span></div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,17 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Spacing" name="间距网格" subtitle="4px 基准间距标尺" viewport="700x290" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>body{margin:0;background:var(--bg);font-family:var(--font-sans);padding:24px}
|
||||
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);margin-bottom:16px}
|
||||
.row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
|
||||
.bar{height:18px;background:var(--accent);border-radius:3px}
|
||||
.n{font-family:var(--font-mono);font-size:10px;color:var(--fg2);width:78px}</style></head><body>
|
||||
<div class="lab">SPACING · 4px 基准网格</div>
|
||||
<div class="row"><span class="n">1 · 4px</span><div class="bar" style="width:4px"></div></div>
|
||||
<div class="row"><span class="n">2 · 8px</span><div class="bar" style="width:8px"></div></div>
|
||||
<div class="row"><span class="n">3 · 12px</span><div class="bar" style="width:12px"></div></div>
|
||||
<div class="row"><span class="n">4 · 16px</span><div class="bar" style="width:16px"></div></div>
|
||||
<div class="row"><span class="n">6 · 24px</span><div class="bar" style="width:24px"></div></div>
|
||||
<div class="row"><span class="n">8 · 32px</span><div class="bar" style="width:32px"></div></div>
|
||||
<div class="row"><span class="n">12 · 48px</span><div class="bar" style="width:48px"></div></div>
|
||||
<div class="row"><span class="n">16 · 64px</span><div class="bar" style="width:64px"></div></div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,11 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Type" name="正文字体 (Manrope)" subtitle="界面与正文,人文几何" viewport="700x190" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>body{margin:0;background:var(--bg);font-family:var(--font-sans);padding:24px;color:var(--fg1)}
|
||||
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);margin-bottom:12px}
|
||||
p{margin:0 0 8px}</style></head><body>
|
||||
<div class="lab">BODY · Manrope — 界面与正文 · 400 / 500 / 600 / 700</div>
|
||||
<p class="t-h3">Connect with one tap 一键连接</p>
|
||||
<p class="t-body-lg" style="color:var(--fg2)">A lightweight, friendly VPN that just works. 轻盈、亲和、即开即用。</p>
|
||||
<p class="t-body">Body 16px — 全球 80+ 节点,智能选择最快线路,稳定不掉线。</p>
|
||||
<p class="t-sm" style="color:var(--fg2)">Small 14px — 适用于次要说明、列表副标题与表单提示文字。</p>
|
||||
</body></html>
|
||||
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Type" name="中文字体 (Noto Sans SC)" subtitle="CJK 专用伴随字体" viewport="700x185" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>body{margin:0;background:var(--bg);font-family:var(--font-cjk);padding:24px;color:var(--fg1)}
|
||||
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);margin-bottom:14px}
|
||||
.big{font-size:34px;font-weight:700;letter-spacing:-0.01em;margin:0}
|
||||
.mid{font-size:18px;font-weight:500;margin:10px 0 0;color:var(--fg2)}
|
||||
.sm{font-size:14px;margin:8px 0 0;color:var(--fg3)}</style></head><body>
|
||||
<div class="lab">CJK · Noto Sans SC — 中文专用 · 400 / 500 / 700</div>
|
||||
<p class="big">穿山甲 · 守护你的每一次连接</p>
|
||||
<p class="mid">无需配置,打开即用。智能分流,海外应用秒开。</p>
|
||||
<p class="sm">条款与隐私 · 我们不记录你的浏览数据 · 端到端加密</p>
|
||||
</body></html>
|
||||
@@ -0,0 +1,9 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Type" name="Display 字体 (Sora)" subtitle="标题大字,几何友好" viewport="700x175" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>body{margin:0;background:var(--bg);font-family:var(--font-sans);padding:24px;color:var(--fg1)}
|
||||
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);margin-bottom:14px}
|
||||
.spec{line-height:1.05;margin:0}</style></head><body>
|
||||
<div class="lab">DISPLAY · Sora — 标题与营销大字 · weights 600 / 700</div>
|
||||
<p class="spec t-display-xl">极速畅连 Smooth</p>
|
||||
<p class="spec t-display" style="margin-top:10px;color:var(--accent)">极速 · 稳定 · 省心</p>
|
||||
</body></html>
|
||||
@@ -0,0 +1,18 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Type" name="等宽数据字体 (JetBrains Mono)" subtitle="IP / 速率 / 密钥读数,tabular nums" viewport="700x190" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>body{margin:0;background:var(--bg);font-family:var(--font-mono);padding:24px;color:var(--fg1)}
|
||||
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);margin-bottom:14px}
|
||||
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
|
||||
.k{font-size:11px;color:var(--fg3);margin-bottom:4px}
|
||||
.v{font-size:22px;font-weight:500;letter-spacing:-0.01em}
|
||||
.u{font-size:12px;color:var(--accent)}</style></head><body>
|
||||
<div class="lab">MONO · JetBrains Mono — 数据读数 · tabular nums · IP / 速率 / 密钥</div>
|
||||
<div class="grid">
|
||||
<div><div class="k">DOWNLOAD</div><div class="v">86.4<span class="u"> Mb/s</span></div></div>
|
||||
<div><div class="k">PING</div><div class="v">24<span class="u"> ms</span></div></div>
|
||||
<div><div class="k">UPTIME</div><div class="v">02:14:08</div></div>
|
||||
<div><div class="k">EXIT IP</div><div class="v" style="font-size:16px">103.27.18.204</div></div>
|
||||
<div><div class="k">PROTOCOL</div><div class="v" style="font-size:16px">WireGuard®</div></div>
|
||||
<div><div class="k">DATA</div><div class="v">1.82<span class="u"> GB</span></div></div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<!-- @dsCard group="Type" name="字号梯度" subtitle="48 → 12 完整字阶" viewport="700x330" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>body{margin:0;background:var(--bg);font-family:var(--font-sans);padding:22px;color:var(--fg1)}
|
||||
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);margin-bottom:14px}
|
||||
.r{display:flex;align-items:baseline;gap:14px;padding:5px 0;border-bottom:1px solid var(--border)}
|
||||
.tag{font-family:var(--font-mono);font-size:10px;color:var(--fg3);width:88px;flex-shrink:0}
|
||||
.t{margin:0;white-space:nowrap}</style></head><body>
|
||||
<div class="lab">TYPE SCALE · 48 / 36 / 30 / 24 / 20 / 18 / 16 / 14 / 12</div>
|
||||
<div class="r"><span class="tag">display 48</span><p class="t t-display">穿山甲 Pangolin</p></div>
|
||||
<div class="r"><span class="tag">h1 30</span><p class="t t-h1">一键连接全球</p></div>
|
||||
<div class="r"><span class="tag">h2 24</span><p class="t t-h2">选择服务器节点</p></div>
|
||||
<div class="r"><span class="tag">h3 20</span><p class="t t-h3">智能分流规则</p></div>
|
||||
<div class="r"><span class="tag">body 16</span><p class="t t-body">默认正文,清晰易读。</p></div>
|
||||
<div class="r"><span class="tag">sm 14</span><p class="t t-sm">次要说明文字</p></div>
|
||||
<div class="r" style="border:0"><span class="tag">overline 12</span><p class="t t-overline">ACCOUNT · 账户</p></div>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user