|
3 | 3 | <head> |
4 | 4 | <meta charset="UTF-8"> |
5 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
6 | | -<title>Logo 预览 - zzZZswszzZZ</title> |
| 6 | +<title>Logo 预览 - 连贯起伏</title> |
7 | 7 | <style> |
8 | 8 | * { margin: 0; padding: 0; box-sizing: border-box; } |
9 | 9 | 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; } |
13 | 14 | .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; } |
16 | 18 | .use-btn { background: #222; border: 1px solid #333; color: #aaa; border-radius: 6px; padding: 6px 16px; font-size: 12px; cursor: pointer; transition: all .2s; } |
17 | 19 | .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; } |
20 | 21 | </style> |
21 | 22 | </head> |
22 | 23 | <body> |
23 | | -<h1>⌄ 点击选择一个 Logo 方案 ⌄</h1> |
24 | | -<div class="grid" id="grid"></div> |
| 24 | +<h1>Zz 起伏变体</h1> |
| 25 | +<p>中间 zswsz 有连贯波浪起伏感</p> |
| 26 | +<div class="grid"> |
25 | 27 |
|
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> |
103 | 50 |
|
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> |
116 | 75 |
|
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> |
124 | 102 |
|
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> |
136 | 124 |
|
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> |
144 | 126 |
|
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 | +}); |
195 | 138 | </script> |
196 | | - |
197 | 139 | </body> |
198 | 140 | </html> |
0 commit comments