feat(header): update NemoClaw Logo SVG with ceramic3d arms and LED core
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -284,3 +284,13 @@
|
|||||||
from { transform: rotate(0deg); }
|
from { transform: rotate(0deg); }
|
||||||
to { transform: rotate(360deg); }
|
to { transform: rotate(360deg); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes ring-spin {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes orb-pulse {
|
||||||
|
0%, 100% { transform: scale(1); opacity: 1; }
|
||||||
|
50% { transform: scale(1.08); opacity: 0.85; }
|
||||||
|
}
|
||||||
|
|||||||
@@ -82,11 +82,60 @@ export function Header({
|
|||||||
)}
|
)}
|
||||||
style={{ zIndex: Z_INDEX.HEADER }}
|
style={{ zIndex: Z_INDEX.HEADER }}
|
||||||
>
|
>
|
||||||
{/* Left: Page Title / Breadcrumb */}
|
{/* 左側 Logo */}
|
||||||
<div className="flex items-center gap-4">
|
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||||
<h1 className="font-heading text-xl font-bold text-nothing-black tracking-tight">
|
{/* NemoClaw Logo SVG (34×34,viewBox 0 0 140 140,深色底) */}
|
||||||
{tDashboard('title')}
|
<div style={{
|
||||||
</h1>
|
width: 34, height: 34,
|
||||||
|
background: '#0d1117',
|
||||||
|
borderRadius: 6,
|
||||||
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||||
|
flexShrink: 0,
|
||||||
|
}}>
|
||||||
|
<svg width="28" height="28" viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="ceramic3d" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stopColor="#e8eef5" />
|
||||||
|
<stop offset="50%" stopColor="#c8d8e8" />
|
||||||
|
<stop offset="100%" stopColor="#8aaac8" />
|
||||||
|
</linearGradient>
|
||||||
|
<radialGradient id="ledCore" cx="40%" cy="35%" r="60%">
|
||||||
|
<stop offset="0%" stopColor="#7AB8F5" />
|
||||||
|
<stop offset="100%" stopColor="#2B6CB0" />
|
||||||
|
</radialGradient>
|
||||||
|
</defs>
|
||||||
|
{/* 5 主臂(白瓷 ceramic3d)*/}
|
||||||
|
<line x1="70" y1="70" x2="70" y2="18" stroke="url(#ceramic3d)" strokeWidth="8" strokeLinecap="round"/>
|
||||||
|
<line x1="70" y1="70" x2="120" y2="95" stroke="url(#ceramic3d)" strokeWidth="8" strokeLinecap="round"/>
|
||||||
|
<line x1="70" y1="70" x2="99" y2="128" stroke="url(#ceramic3d)" strokeWidth="8" strokeLinecap="round"/>
|
||||||
|
<line x1="70" y1="70" x2="41" y2="128" stroke="url(#ceramic3d)" strokeWidth="8" strokeLinecap="round"/>
|
||||||
|
<line x1="70" y1="70" x2="20" y2="95" stroke="url(#ceramic3d)" strokeWidth="8" strokeLinecap="round"/>
|
||||||
|
{/* 爪尖 */}
|
||||||
|
<circle cx="70" cy="18" r="5" fill="#c8d8e8" />
|
||||||
|
<circle cx="120" cy="95" r="5" fill="#c8d8e8" />
|
||||||
|
<circle cx="99" cy="128" r="5" fill="#c8d8e8" />
|
||||||
|
<circle cx="41" cy="128" r="5" fill="#c8d8e8" />
|
||||||
|
<circle cx="20" cy="95" r="5" fill="#c8d8e8" />
|
||||||
|
{/* 旋轉虛線軌道 */}
|
||||||
|
<circle cx="70" cy="70" r="42" fill="none" stroke="#4A90D9"
|
||||||
|
strokeWidth="1" strokeDasharray="6 6" opacity="0.5"
|
||||||
|
style={{ animation: 'ring-spin 8s linear infinite', transformOrigin: '70px 70px' }}
|
||||||
|
/>
|
||||||
|
{/* LED 核心脈動 */}
|
||||||
|
<circle cx="70" cy="70" r="16" fill="url(#ledCore)"
|
||||||
|
style={{ animation: 'orb-pulse 1.5s ease-in-out infinite', transformOrigin: '70px 70px' }}
|
||||||
|
/>
|
||||||
|
<circle cx="65" cy="65" r="5" fill="white" opacity="0.4" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontSize: 13, fontWeight: 800, color: '#141413', letterSpacing: '2px', fontFamily: 'monospace' }}>
|
||||||
|
AWOOOI
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: 8, color: '#87867f', letterSpacing: '1px' }}>
|
||||||
|
{tDashboard('title')} · AI OPERATIONS
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Right: Status + Locale + User */}
|
{/* Right: Status + Locale + User */}
|
||||||
|
|||||||
Reference in New Issue
Block a user