wangjia
5a1e185b1a
phosphor console v1.1 设计系统（从现网 web/style.css 演化）：tokens(colors/effects/ typography/fonts) + components(core/forms/surfaces .jsx) + ui_kits(console + console_mobile) + assets/icons(15 双色 SVG) + guidelines + CLAUDE/SKILL/readme。供 B1–B6 重构任务对照实现。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
65 lines
2.4 KiB
HTML
65 lines
2.4 KiB
HTML
<!-- @dsCard group="Brand" viewport="700x230" subtitle="像素章鱼图案：一脑多臂 · 横排锁定 + 独立方形徽标" name="Logo" -->
|
|
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
|
|
<link rel="stylesheet" href="../styles.css">
|
|
<style>
|
|
body{margin:0;background:var(--bg-deep);font-family:var(--mono);height:230px;display:flex;align-items:center;justify-content:center;gap:56px}
|
|
canvas{image-rendering:pixelated;filter:drop-shadow(0 0 7px rgba(95,221,125,.4))}
|
|
.lockup{display:flex;align-items:center;gap:16px}
|
|
.logo-word{font-size:24px;font-weight:700;letter-spacing:.28em;color:var(--green);text-shadow:0 0 12px rgba(95,221,125,.45)}
|
|
.cursor{animation:maestro-blink 1.1s steps(1) infinite;margin-left:1px}
|
|
.logo-sub{margin-top:3px;font-size:11px;color:var(--muted);letter-spacing:.35em}
|
|
.badge{width:108px;height:108px;border:1px solid var(--green-dim);border-radius:10px;display:flex;align-items:center;justify-content:center}
|
|
.lab{font-size:10px;color:var(--faint);letter-spacing:.1em;text-align:center;margin-top:10px;white-space:nowrap}
|
|
.col{text-align:center}
|
|
.divider{width:1px;height:120px;background:var(--line-soft)}
|
|
</style></head><body>
|
|
|
|
<div class="col">
|
|
<div class="lockup">
|
|
<canvas id="markA" width="15" height="12"></canvas>
|
|
<div>
|
|
<div class="logo-word">MAESTRO<span class="cursor">▮</span></div>
|
|
<div class="logo-sub">多项目任务调度台</div>
|
|
</div>
|
|
</div>
|
|
<div class="lab">横排锁定 · 侧栏 / 文档页眉</div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="col">
|
|
<div class="badge"><canvas id="markB" width="15" height="12"></canvas></div>
|
|
<div class="lab">方形徽标 · favicon / 头像</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 像素章鱼 15×12 — L 高光 / G 磷光绿 / D 暗位 / E 眼
|
|
const MAP = [
|
|
'.....LLLLL.....',
|
|
'...LLLLLLLLL...',
|
|
'..GGGGGGGGGGG..',
|
|
'..GGEEGGGEEGG..',
|
|
'..GGEEGGGEEGG..',
|
|
'..GGGGGGGGGGG..',
|
|
'...GGGGGGGGG...',
|
|
'...G..G.G..G...',
|
|
'...G..G.G..G...',
|
|
'..G...G.G...G..',
|
|
'..D...D.D...D..',
|
|
'.D...D...D...D.',
|
|
];
|
|
const INK = { L: '#79ec94', G: '#5fdd7d', D: '#2e6b3d', E: '#070908' };
|
|
function draw(id, scale) {
|
|
const c = document.getElementById(id);
|
|
const ctx = c.getContext('2d');
|
|
MAP.forEach((row, y) => [...row].forEach((ch, x) => {
|
|
if (INK[ch]) { ctx.fillStyle = INK[ch]; ctx.fillRect(x, y, 1, 1); }
|
|
}));
|
|
c.style.width = (15 * scale) + 'px';
|
|
c.style.height = (12 * scale) + 'px';
|
|
}
|
|
draw('markA', 4.4);
|
|
draw('markB', 5.6);
|
|
</script>
|
|
</body></html>
|