Skip to content

Commit 2f0b0cb

Browse files
committed
feat: update NavBar logo with ZZzz sws zzZZ wave style
1 parent 9cddf6e commit 2f0b0cb

2 files changed

Lines changed: 131 additions & 187 deletions

File tree

logo-preview.html

Lines changed: 117 additions & 175 deletions
Original file line numberDiff line numberDiff line change
@@ -3,196 +3,138 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Logo 预览 - zzZZswszzZZ</title>
6+
<title>Logo 预览 - 连贯起伏</title>
77
<style>
88
* { margin: 0; padding: 0; box-sizing: border-box; }
99
body { background: #0a0a0a; color: #e2e8f0; font-family: system-ui, sans-serif; padding: 40px; }
10-
h1 { font-size: 20px; color: #888; margin-bottom: 40px; text-align: center; }
11-
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; max-width: 1000px; margin: 0 auto; }
12-
.card { background: #111; border: 1px solid #222; border-radius: 12px; padding: 32px; display: flex; flex-direction: column; align-items: center; gap: 16px; cursor: pointer; transition: border-color .2s; }
10+
h1 { font-size: 20px; color: #888; margin-bottom: 12px; text-align: center; }
11+
p { font-size: 14px; color: #666; margin-bottom: 40px; text-align: center; }
12+
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; max-width: 1100px; margin: 0 auto; }
13+
.card { background: #111; border: 1px solid #222; border-radius: 12px; padding: 32px; display: flex; flex-direction: column; align-items: center; gap: 16px; transition: border-color .2s; }
1314
.card:hover { border-color: #444; }
14-
.card svg { display: block; }
15-
.label { font-size: 12px; color: #666; text-align: center; }
15+
.card.selected { border-color: #3b82f6 !important; }
16+
.label { font-size: 13px; color: #888; text-align: center; }
17+
.desc { font-size: 11px; color: #555; text-align: center; }
1618
.use-btn { background: #222; border: 1px solid #333; color: #aaa; border-radius: 6px; padding: 6px 16px; font-size: 12px; cursor: pointer; transition: all .2s; }
1719
.use-btn:hover { background: #333; color: #fff; border-color: #555; }
18-
.selected { border-color: #3b82f6 !important; }
19-
.selected .use-btn { background: #3b82f6; color: #fff; border-color: #3b82f6; }
20+
.card.selected .use-btn { background: #3b82f6; color: #fff; border-color: #3b82f6; }
2021
</style>
2122
</head>
2223
<body>
23-
<h1>⌄ 点击选择一个 Logo 方案 ⌄</h1>
24-
<div class="grid" id="grid"></div>
24+
<h1>Zz 起伏变体</h1>
25+
<p>中间 zswsz 有连贯波浪起伏感</p>
26+
<div class="grid">
2527

26-
<script>
27-
const logos = [
28-
// ─── 方案 1: 月牙 + 漂浮 zZ ───
29-
{
30-
name: '方案 1: 月牙睡眠',
31-
svg: `<svg width="80" height="80" viewBox="0 0 80 80" fill="none">
32-
<!-- 月牙 -->
33-
<path d="M50 16C40 20 33 30 33 40C33 50 40 60 50 64C42 62 36 54 36 44C36 34 42 24 50 16Z" fill="#60a5fa" opacity="0.9"/>
34-
<!-- zZ -->
35-
<text x="54" y="36" font-family="monospace" font-size="16" fill="#60a5fa" opacity="0.6">z</text>
36-
<text x="60" y="28" font-family="monospace" font-size="20" fill="#60a5fa" opacity="0.8">Z</text>
37-
<text x="56" y="16" font-family="monospace" font-size="26" fill="#60a5fa">Z</text>
38-
</svg>`,
39-
40-
code: `<svg width="40" height="40" viewBox="0 0 80 80" fill="none">
41-
<path d="M50 16C40 20 33 30 33 40C33 50 40 60 50 64C42 62 36 54 36 44C36 34 42 24 50 16Z" fill="#60a5fa" opacity="0.9"/>
42-
<text x="54" y="36" font-family="monospace" font-size="16" fill="#60a5fa" opacity="0.6">z</text>
43-
<text x="60" y="28" font-family="monospace" font-size="20" fill="#60a5fa" opacity="0.8">Z</text>
44-
<text x="56" y="16" font-family="monospace" font-size="26" fill="#60a5fa">Z</text>
45-
</svg>`
46-
},
47-
48-
// ─── 方案 2: Z 字母堆叠 + 月牙 ───
49-
{
50-
name: '方案 2: Z 堆叠',
51-
svg: `<svg width="80" height="80" viewBox="0 0 80 80" fill="none">
52-
<!-- 底部底座 -->
53-
<rect x="16" y="56" width="48" height="4" rx="2" fill="#3b82f6" opacity="0.3"/>
54-
<!-- 三个 Z 堆叠 -->
55-
<text x="24" y="54" font-family="monospace" font-size="18" font-weight="bold" fill="#3b82f6" opacity="0.5">z</text>
56-
<text x="28" y="42" font-family="monospace" font-size="22" font-weight="bold" fill="#3b82f6" opacity="0.75">Z</text>
57-
<text x="24" y="26" font-family="monospace" font-size="30" font-weight="bold" fill="#60a5fa">Z</text>
58-
<!-- 小星星 -->
59-
<circle cx="56" cy="18" r="3" fill="#60a5fa" opacity="0.4"/>
60-
<circle cx="50" cy="10" r="2" fill="#60a5fa" opacity="0.3"/>
61-
<circle cx="62" cy="12" r="2" fill="#60a5fa" opacity="0.3"/>
62-
</svg>`,
63-
64-
code: `<svg width="40" height="40" viewBox="0 0 80 80" fill="none">
65-
<rect x="16" y="56" width="48" height="4" rx="2" fill="#3b82f6" opacity="0.3"/>
66-
<text x="24" y="54" font-family="monospace" font-size="18" font-weight="bold" fill="#3b82f6" opacity="0.5">z</text>
67-
<text x="28" y="42" font-family="monospace" font-size="22" font-weight="bold" fill="#3b82f6" opacity="0.75">Z</text>
68-
<text x="24" y="26" font-family="monospace" font-size="30" font-weight="bold" fill="#60a5fa">Z</text>
69-
<circle cx="56" cy="18" r="3" fill="#60a5fa" opacity="0.4"/>
70-
<circle cx="50" cy="10" r="2" fill="#60a5fa" opacity="0.3"/>
71-
<circle cx="62" cy="12" r="2" fill="#60a5fa" opacity="0.3"/>
72-
</svg>`
73-
},
74-
75-
// ─── 方案 3: 极简单行文本徽标 ───
76-
{
77-
name: '方案 3: 极简文字标',
78-
svg: `<svg width="140" height="40" viewBox="0 0 140 40" fill="none">
79-
<text x="0" y="26" font-family="monospace" font-size="20" font-weight="bold" fill="#60a5fa">Z</text>
80-
<text x="20" y="26" font-family="monospace" font-size="16" fill="#60a5fa" opacity="0.8">z</text>
81-
<text x="34" y="26" font-family="monospace" font-size="12" fill="#60a5fa" opacity="0.5">z</text>
82-
<text x="48" y="22" font-family="monospace" font-size="13" fill="#666">sws</text>
83-
<text x="82" y="28" font-family="monospace" font-size="12" fill="#60a5fa" opacity="0.5">z</text>
84-
<text x="94" y="26" font-family="monospace" font-size="16" fill="#60a5fa" opacity="0.8">z</text>
85-
<text x="108" y="26" font-family="monospace" font-size="20" font-weight="bold" fill="#60a5fa">Z</text>
86-
<text x="128" y="26" font-family="monospace" font-size="20" font-weight="bold" fill="#60a5fa">Z</text>
87-
<!-- 装饰线 -->
88-
<line x1="0" y1="34" x2="140" y2="34" stroke="#3b82f6" stroke-width="1" opacity="0.3"/>
89-
</svg>`,
90-
91-
code: `<svg width="140" height="40" viewBox="0 0 140 40" fill="none">
92-
<text x="0" y="26" font-family="monospace" font-size="20" font-weight="bold" fill="#60a5fa">Z</text>
93-
<text x="20" y="26" font-family="monospace" font-size="16" fill="#60a5fa" opacity="0.8">z</text>
94-
<text x="34" y="26" font-family="monospace" font-size="12" fill="#60a5fa" opacity="0.5">z</text>
95-
<text x="48" y="22" font-family="monospace" font-size="13" fill="#666">sws</text>
96-
<text x="82" y="28" font-family="monospace" font-size="12" fill="#60a5fa" opacity="0.5">z</text>
97-
<text x="94" y="26" font-family="monospace" font-size="16" fill="#60a5fa" opacity="0.8">z</text>
98-
<text x="108" y="26" font-family="monospace" font-size="20" font-weight="bold" fill="#60a5fa">Z</text>
99-
<text x="128" y="26" font-family="monospace" font-size="20" font-weight="bold" fill="#60a5fa">Z</text>
100-
<line x1="0" y1="34" x2="140" y2="34" stroke="#3b82f6" stroke-width="1" opacity="0.3"/>
101-
</svg>`
102-
},
28+
<!-- A: 整体正弦波 y 起伏,字号不变 -->
29+
<div class="card" data-idx="A">
30+
<svg width="200" height="40" viewBox="0 0 200 40" fill="none">
31+
<!-- 左侧 ZZzz:强到弱 -->
32+
<text x="0" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
33+
<text x="22" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
34+
<text x="44" y="22" font-family="monospace" font-size="15" fill="#60a5fa" opacity="0.7">z</text>
35+
<!-- 中间 zswsz:连贯波浪起伏 -->
36+
<text x="74" y="16" font-family="monospace" font-size="10" fill="#60a5fa" opacity="0.35">z</text>
37+
<text x="86" y="19" font-family="monospace" font-size="12" fill="#3b82f6" opacity="0.4">s</text>
38+
<text x="98" y="24" font-family="monospace" font-size="14" fill="#3b82f6" opacity="0.45">w</text>
39+
<text x="114" y="19" font-family="monospace" font-size="12" fill="#3b82f6" opacity="0.4">s</text>
40+
<text x="126" y="16" font-family="monospace" font-size="10" fill="#60a5fa" opacity="0.35">z</text>
41+
<!-- 右侧 zZ:弱到强 -->
42+
<text x="154" y="22" font-family="monospace" font-size="15" fill="#60a5fa" opacity="0.7">z</text>
43+
<text x="172" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
44+
<text x="194" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
45+
</svg>
46+
<span class="label">A: 对称波浪</span>
47+
<span class="desc">z↘sws↗z,中间 w 最深,两侧对称升起</span>
48+
<button class="use-btn">选择此方案</button>
49+
</div>
10350

104-
// ─── 方案 4: 月牙包裹 Z ───
105-
{
106-
name: '方案 4: 月牙抱 Z',
107-
svg: `<svg width="80" height="80" viewBox="0 0 80 80" fill="none">
108-
<!-- 月牙 -->
109-
<path d="M56 14C44 20 36 32 36 44C36 56 44 66 56 70C46 66 40 56 40 44C40 32 46 20 56 14Z" fill="#3b82f6"/>
110-
<!-- 主 Z -->
111-
<text x="42" y="48" font-family="monospace" font-size="28" font-weight="bold" fill="#0a0a0a">Z</text>
112-
<!-- 小 z -->
113-
<text x="46" y="34" font-family="monospace" font-size="14" fill="#60a5fa" opacity="0.8">z</text>
114-
<text x="50" y="20" font-family="monospace" font-size="18" fill="#93bbfd" opacity="0.9">Z</text>
115-
</svg>`,
51+
<!-- B: 中间更平滑的渐变,字号也跟起伏联动 -->
52+
<div class="card" data-idx="B">
53+
<svg width="200" height="40" viewBox="0 0 200 40" fill="none">
54+
<!-- 左 ZZzz -->
55+
<text x="0" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
56+
<text x="22" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
57+
<text x="44" y="23" font-family="monospace" font-size="16" fill="#60a5fa" opacity="0.7">z</text>
58+
<text x="60" y="20" font-family="monospace" font-size="12" fill="#60a5fa" opacity="0.5">z</text>
59+
<!-- 中间 zswsz:字号也随波浪渐变 -->
60+
<text x="74" y="17" font-family="monospace" font-size="9" fill="#60a5fa" opacity="0.38">z</text>
61+
<text x="84" y="19" font-family="monospace" font-size="10" fill="#3b82f6" opacity="0.38">s</text>
62+
<text x="96" y="24" font-family="monospace" font-size="14" fill="#3b82f6" opacity="0.45">w</text>
63+
<text x="112" y="19" font-family="monospace" font-size="10" fill="#3b82f6" opacity="0.38">s</text>
64+
<text x="124" y="17" font-family="monospace" font-size="9" fill="#60a5fa" opacity="0.38">z</text>
65+
<!-- 右 zzZ Z -->
66+
<text x="136" y="20" font-family="monospace" font-size="12" fill="#60a5fa" opacity="0.5">z</text>
67+
<text x="152" y="23" font-family="monospace" font-size="16" fill="#60a5fa" opacity="0.7">z</text>
68+
<text x="172" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
69+
<text x="194" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
70+
</svg>
71+
<span class="label">B: 字号联动波浪</span>
72+
<span class="desc">字号大小也随 y 起伏变化,更有机</span>
73+
<button class="use-btn">选择此方案</button>
74+
</div>
11675

117-
code: `<svg width="40" height="40" viewBox="0 0 80 80" fill="none">
118-
<path d="M56 14C44 20 36 32 36 44C36 56 44 66 56 70C46 66 40 56 40 44C40 32 46 20 56 14Z" fill="#3b82f6"/>
119-
<text x="42" y="48" font-family="monospace" font-size="28" font-weight="bold" fill="#0a0a0a">Z</text>
120-
<text x="46" y="34" font-family="monospace" font-size="14" fill="#60a5fa" opacity="0.8">z</text>
121-
<text x="50" y="20" font-family="monospace" font-size="18" fill="#93bbfd" opacity="0.9">Z</text>
122-
</svg>`
123-
},
76+
<!-- C: 中间加一条淡色波浪线贯穿 zswsz -->
77+
<div class="card" data-idx="C">
78+
<svg width="200" height="44" viewBox="0 0 200 44" fill="none">
79+
<!-- 背景波浪线贯穿全程 -->
80+
<path d="M0 28 Q30 28, 50 24 Q70 20, 90 20 Q110 20, 130 24 Q150 28, 170 28 Q190 28, 200 28" stroke="#3b82f6" stroke-width="0.6" fill="none" opacity="0.15"/>
81+
<!-- 左 ZZzz -->
82+
<text x="0" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
83+
<text x="22" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
84+
<text x="44" y="22" font-family="monospace" font-size="15" fill="#60a5fa" opacity="0.7">z</text>
85+
<text x="60" y="19" font-family="monospace" font-size="11" fill="#60a5fa" opacity="0.5">z</text>
86+
<!-- 中间 zswsz -->
87+
<text x="74" y="17" font-family="monospace" font-size="10" fill="#60a5fa" opacity="0.4">z</text>
88+
<text x="86" y="20" font-family="monospace" font-size="12" fill="#3b82f6" opacity="0.42">s</text>
89+
<text x="98" y="25" font-family="monospace" font-size="14" fill="#3b82f6" opacity="0.48">w</text>
90+
<text x="114" y="20" font-family="monospace" font-size="12" fill="#3b82f6" opacity="0.42">s</text>
91+
<text x="126" y="17" font-family="monospace" font-size="10" fill="#60a5fa" opacity="0.4">z</text>
92+
<!-- 右 zzZ Z -->
93+
<text x="138" y="19" font-family="monospace" font-size="11" fill="#60a5fa" opacity="0.5">z</text>
94+
<text x="154" y="22" font-family="monospace" font-size="15" fill="#60a5fa" opacity="0.7">z</text>
95+
<text x="172" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
96+
<text x="194" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa">Z</text>
97+
</svg>
98+
<span class="label">C: 波浪线托底</span>
99+
<span class="desc">一条淡色波浪线贯穿,视觉串联所有字母</span>
100+
<button class="use-btn">选择此方案</button>
101+
</div>
124102

125-
// ─── 方案 5: 闪电 Z ───
126-
{
127-
name: '方案 5: 闪电 Z',
128-
svg: `<svg width="80" height="80" viewBox="0 0 80 80" fill="none">
129-
<!-- 闪电 + Z 混合 -->
130-
<path d="M44 8L24 44H38L34 72L60 34H46L50 8H44Z" fill="#60a5fa"/>
131-
<!-- 小 z 漂浮 -->
132-
<text x="30" y="16" font-family="monospace" font-size="11" fill="#60a5fa" opacity="0.6">z</text>
133-
<text x="54" y="10" font-family="monospace" font-size="14" fill="#60a5fa" opacity="0.7">Z</text>
134-
<text x="62" y="22" font-family="monospace" font-size="10" fill="#60a5fa" opacity="0.5">z</text>
135-
</svg>`,
103+
<!-- D: 完全同色同系,靠字号+透明度区分 -->
104+
<div class="card" data-idx="D">
105+
<svg width="200" height="40" viewBox="0 0 200 40" fill="none">
106+
<text x="0" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa" opacity="1">Z</text>
107+
<text x="22" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa" opacity="0.9">Z</text>
108+
<text x="44" y="22" font-family="monospace" font-size="15" fill="#60a5fa" opacity="0.65">z</text>
109+
<text x="60" y="19" font-family="monospace" font-size="11" fill="#60a5fa" opacity="0.45">z</text>
110+
<text x="74" y="16" font-family="monospace" font-size="9" fill="#60a5fa" opacity="0.32">z</text>
111+
<text x="84" y="18" font-family="monospace" font-size="10" fill="#60a5fa" opacity="0.32">s</text>
112+
<text x="96" y="22" font-family="monospace" font-size="13" fill="#60a5fa" opacity="0.38">w</text>
113+
<text x="112" y="18" font-family="monospace" font-size="10" fill="#60a5fa" opacity="0.32">s</text>
114+
<text x="124" y="16" font-family="monospace" font-size="9" fill="#60a5fa" opacity="0.32">z</text>
115+
<text x="138" y="19" font-family="monospace" font-size="11" fill="#60a5fa" opacity="0.45">z</text>
116+
<text x="154" y="22" font-family="monospace" font-size="15" fill="#60a5fa" opacity="0.65">z</text>
117+
<text x="172" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa" opacity="0.9">Z</text>
118+
<text x="194" y="26" font-family="monospace" font-size="22" font-weight="bold" fill="#60a5fa" opacity="1">Z</text>
119+
</svg>
120+
<span class="label">D: 纯同色渐变</span>
121+
<span class="desc">全部同色,靠字号+透明度连续渐变,最统一</span>
122+
<button class="use-btn">选择此方案</button>
123+
</div>
136124

137-
code: `<svg width="40" height="40" viewBox="0 0 80 80" fill="none">
138-
<path d="M44 8L24 44H38L34 72L60 34H46L50 8H44Z" fill="#60a5fa"/>
139-
<text x="30" y="16" font-family="monospace" font-size="11" fill="#60a5fa" opacity="0.6">z</text>
140-
<text x="54" y="10" font-family="monospace" font-size="14" fill="#60a5fa" opacity="0.7">Z</text>
141-
<text x="62" y="22" font-family="monospace" font-size="10" fill="#60a5fa" opacity="0.5">z</text>
142-
</svg>`
143-
},
125+
</div>
144126

145-
// ─── 方案 6: 纯字母 Logo ───
146-
{
147-
name: '方案 6: 纯字母韵律',
148-
svg: `<svg width="120" height="40" viewBox="0 0 120 40" fill="none">
149-
<!-- 大小交错 Z/z -->
150-
<text x="0" y="24" font-family="monospace" font-size="24" font-weight="bold" fill="#60a5fa">Z</text>
151-
<text x="24" y="20" font-family="monospace" font-size="14" fill="#3b82f6" opacity="0.7">z</text>
152-
<text x="38" y="16" font-family="monospace" font-size="10" fill="#3b82f6" opacity="0.4">z</text>
153-
<text x="50" y="24" font-family="monospace" font-size="12" fill="#555">sws</text>
154-
<text x="80" y="16" font-family="monospace" font-size="10" fill="#3b82f6" opacity="0.4">z</text>
155-
<text x="90" y="20" font-family="monospace" font-size="14" fill="#3b82f6" opacity="0.7">z</text>
156-
<text x="104" y="24" font-family="monospace" font-size="24" font-weight="bold" fill="#60a5fa">Z</text>
157-
<!-- 装饰圆点 -->
158-
<circle cx="100" cy="10" r="2" fill="#60a5fa" opacity="0.25"/>
159-
</svg>`,
160-
161-
code: `<svg width="120" height="40" viewBox="0 0 120 40" fill="none">
162-
<text x="0" y="24" font-family="monospace" font-size="24" font-weight="bold" fill="#60a5fa">Z</text>
163-
<text x="24" y="20" font-family="monospace" font-size="14" fill="#3b82f6" opacity="0.7">z</text>
164-
<text x="38" y="16" font-family="monospace" font-size="10" fill="#3b82f6" opacity="0.4">z</text>
165-
<text x="50" y="24" font-family="monospace" font-size="12" fill="#555">sws</text>
166-
<text x="80" y="16" font-family="monospace" font-size="10" fill="#3b82f6" opacity="0.4">z</text>
167-
<text x="90" y="20" font-family="monospace" font-size="14" fill="#3b82f6" opacity="0.7">z</text>
168-
<text x="104" y="24" font-family="monospace" font-size="24" font-weight="bold" fill="#60a5fa">Z</text>
169-
<circle cx="100" cy="10" r="2" fill="#60a5fa" opacity="0.25"/>
170-
</svg>`
171-
},
172-
]
173-
174-
const grid = document.getElementById('grid')
175-
let selectedIndex = -1
176-
177-
logos.forEach((logo, i) => {
178-
const card = document.createElement('div')
179-
card.className = 'card'
180-
card.innerHTML = \`
181-
\${logo.svg}
182-
<span class="label">\${logo.name}</span>
183-
<button class="use-btn" data-index="\${i}">选择此方案</button>
184-
\`
185-
card.addEventListener('click', (e) => {
186-
if (e.target.tagName !== 'BUTTON') return
187-
document.querySelectorAll('.card').forEach(c => c.classList.remove('selected'))
188-
card.classList.add('selected')
189-
selectedIndex = i
190-
alert(\`已选择 \${logo.name},SVG 代码已复制到剪贴板\`)
191-
navigator.clipboard.writeText(logo.code)
192-
})
193-
grid.appendChild(card)
194-
})
127+
<script>
128+
var cards = document.querySelectorAll('.card');
129+
cards.forEach(function(card) {
130+
var btn = card.querySelector('.use-btn');
131+
btn.addEventListener('click', function() {
132+
cards.forEach(function(c) { c.classList.remove('selected'); });
133+
card.classList.add('selected');
134+
var label = card.querySelector('.label').textContent;
135+
alert('已选择 ' + label);
136+
});
137+
});
195138
</script>
196-
197139
</body>
198140
</html>

0 commit comments

Comments
 (0)