wangjia
a642bf16a2
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
53 lines
3.2 KiB
HTML
53 lines
3.2 KiB
HTML
<!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>
|