-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathprototype.html
More file actions
73 lines (66 loc) · 8.7 KB
/
Copy pathprototype.html
File metadata and controls
73 lines (66 loc) · 8.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<div style="padding: 0.5rem 0;">
<h2 class="sr-only">IconKit v1 三栏布局线框：左侧多图标库、中间画布与多尺寸预览、右侧预设与导出</h2>
<div style="border: 0.5px solid var(--color-border-secondary); border-radius: var(--border-radius-lg); overflow: hidden; background: var(--color-background-primary);">
<div style="display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:0.5px solid var(--color-border-tertiary); background:var(--color-background-secondary);">
<div style="display:flex; align-items:center; gap:10px;">
<i class="ti ti-square-rounded" style="font-size:18px; color:var(--color-text-secondary);" aria-hidden="true"></i>
<span style="font-weight:500; font-size:14px;">IconKit</span>
<span style="font-size:12px; color:var(--color-text-tertiary);">my-app-icon.png</span>
</div>
<div style="display:flex; align-items:center; gap:6px;">
<span style="background:#1D9E75; color:#fff; font-size:11px; padding:3px 8px; border-radius:var(--border-radius-md);">新</span>
<span style="border:0.5px solid var(--color-border-secondary); border-radius:var(--border-radius-md); font-size:12px; padding:5px 10px; display:flex; align-items:center; gap:6px;"><i class="ti ti-download" style="font-size:14px;" aria-hidden="true"></i> 导出整套 ▾</span>
</div>
</div>
<div style="display:grid; grid-template-columns: 190px minmax(0,1fr) 215px; min-height:330px;">
<div style="border-right:0.5px solid var(--color-border-tertiary); padding:12px;">
<div style="display:flex; gap:6px; margin-bottom:10px;">
<div style="flex:1; border:0.5px solid var(--color-border-tertiary); border-radius:var(--border-radius-md); padding:6px 8px; font-size:12px; color:var(--color-text-tertiary); display:flex; align-items:center; gap:6px;"><i class="ti ti-search" style="font-size:13px;" aria-hidden="true"></i>搜索图标</div>
</div>
<div style="display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px;">
<span style="font-size:11px; padding:3px 7px; border-radius:var(--border-radius-md); background:var(--color-background-info); color:var(--color-text-info);">Lucide</span>
<span style="font-size:11px; padding:3px 7px; border-radius:var(--border-radius-md); border:0.5px solid var(--color-border-tertiary); color:var(--color-text-secondary);">Tabler</span>
<span style="font-size:11px; padding:3px 7px; border-radius:var(--border-radius-md); border:0.5px solid var(--color-border-tertiary); color:var(--color-text-secondary);">Phosphor</span>
<span style="font-size:11px; padding:3px 7px; border-radius:var(--border-radius-md); border:0.5px solid var(--color-border-tertiary); color:var(--color-text-secondary);">Simple</span>
<span style="font-size:11px; padding:3px 7px; border-radius:var(--border-radius-md); border:0.5px solid var(--color-border-tertiary); color:var(--color-text-secondary);"><i class="ti ti-upload" style="font-size:12px;" aria-hidden="true"></i> SVG</span>
</div>
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:6px;">
<div style="aspect-ratio:1; border:0.5px solid var(--color-border-info); border-radius:var(--border-radius-md); display:flex; align-items:center; justify-content:center;"><i class="ti ti-rocket" style="font-size:16px;" aria-hidden="true"></i></div>
<div style="aspect-ratio:1; border:0.5px solid var(--color-border-tertiary); border-radius:var(--border-radius-md); display:flex; align-items:center; justify-content:center; color:var(--color-text-secondary);"><i class="ti ti-bolt" style="font-size:16px;" aria-hidden="true"></i></div>
<div style="aspect-ratio:1; border:0.5px solid var(--color-border-tertiary); border-radius:var(--border-radius-md); display:flex; align-items:center; justify-content:center; color:var(--color-text-secondary);"><i class="ti ti-heart" style="font-size:16px;" aria-hidden="true"></i></div>
<div style="aspect-ratio:1; border:0.5px solid var(--color-border-tertiary); border-radius:var(--border-radius-md); display:flex; align-items:center; justify-content:center; color:var(--color-text-secondary);"><i class="ti ti-camera" style="font-size:16px;" aria-hidden="true"></i></div>
<div style="aspect-ratio:1; border:0.5px solid var(--color-border-tertiary); border-radius:var(--border-radius-md); display:flex; align-items:center; justify-content:center; color:var(--color-text-secondary);"><i class="ti ti-code" style="font-size:16px;" aria-hidden="true"></i></div>
<div style="aspect-ratio:1; border:0.5px solid var(--color-border-tertiary); border-radius:var(--border-radius-md); display:flex; align-items:center; justify-content:center; color:var(--color-text-secondary);"><i class="ti ti-cloud" style="font-size:16px;" aria-hidden="true"></i></div>
<div style="aspect-ratio:1; border:0.5px solid var(--color-border-tertiary); border-radius:var(--border-radius-md); display:flex; align-items:center; justify-content:center; color:var(--color-text-secondary);"><i class="ti ti-music" style="font-size:16px;" aria-hidden="true"></i></div>
<div style="aspect-ratio:1; border:0.5px solid var(--color-border-tertiary); border-radius:var(--border-radius-md); display:flex; align-items:center; justify-content:center; color:var(--color-text-secondary);"><i class="ti ti-flame" style="font-size:16px;" aria-hidden="true"></i></div>
</div>
<div style="margin-top:10px; font-size:11px; color:#0F6E56;">新增：多图标库 + 上传 SVG</div>
</div>
<div style="display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:16px; border-right:0.5px solid var(--color-border-tertiary);">
<div style="width:150px; height:150px; border-radius:34px; background:#7F77DD; display:flex; align-items:center; justify-content:center;">
<i class="ti ti-rocket" style="font-size:70px; color:#fff;" aria-hidden="true"></i>
</div>
<div style="display:flex; align-items:flex-end; gap:14px;">
<div style="text-align:center;"><div style="width:16px; height:16px; border-radius:4px; background:#7F77DD; margin:0 auto;"></div><div style="font-size:10px; color:var(--color-text-tertiary); margin-top:3px;">16</div></div>
<div style="text-align:center;"><div style="width:24px; height:24px; border-radius:6px; background:#7F77DD; margin:0 auto;"></div><div style="font-size:10px; color:var(--color-text-tertiary); margin-top:3px;">32</div></div>
<div style="text-align:center;"><div style="width:40px; height:40px; border-radius:9px; background:#7F77DD; margin:0 auto;"></div><div style="font-size:10px; color:var(--color-text-tertiary); margin-top:3px;">180</div></div>
<div style="text-align:center;"><div style="width:52px; height:52px; border-radius:12px; background:#7F77DD; margin:0 auto;"></div><div style="font-size:10px; color:var(--color-text-tertiary); margin-top:3px;">512</div></div>
</div>
<div style="font-size:11px; color:#0F6E56;">新增：多尺寸实时预览（一眼看清小尺寸糊不糊）</div>
</div>
<div style="padding:12px; display:flex; flex-direction:column; gap:8px;">
<div style="display:flex; align-items:center; justify-content:space-between; padding:7px 10px; border-radius:var(--border-radius-md); background:var(--color-background-secondary); font-size:12px;"><span>Presets</span><span style="font-size:10px; color:var(--color-text-tertiary);">复刻</span></div>
<div style="display:flex; gap:5px;">
<div style="width:22px; height:22px; border-radius:6px; background:#7F77DD;"></div>
<div style="width:22px; height:22px; border-radius:6px; background:#1D9E75;"></div>
<div style="width:22px; height:22px; border-radius:6px; background:#D4537E;"></div>
<div style="width:22px; height:22px; border-radius:6px; background:#378ADD;"></div>
<div style="width:22px; height:22px; border-radius:6px; background:#EF9F27;"></div>
</div>
<div style="display:flex; align-items:center; justify-content:space-between; padding:7px 10px; border-radius:var(--border-radius-md); background:var(--color-background-secondary); font-size:12px;"><span>Fill / Background / Icon</span><span style="font-size:10px; color:var(--color-text-tertiary);">复刻</span></div>
<div style="display:flex; align-items:center; justify-content:space-between; padding:7px 10px; border-radius:var(--border-radius-md); border:0.5px solid #1D9E75; font-size:12px;"><span>iOS 背景预设</span><span style="font-size:10px; color:#0F6E56;">新</span></div>
<div style="font-size:11px; color:var(--color-text-tertiary); line-height:1.6; margin-top:2px;">右栏整体复刻 ray.so，<br/>加一组 iOS 风格 squircle 背景。</div>
</div>
</div>
</div>
</div>