@gemboss/ui 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +208 -0
- package/catalog/index.html +423 -0
- package/gemboss-ui.css +2889 -0
- package/package.json +51 -0
- package/src/GemMark.tsx +22 -0
- package/src/account.tsx +88 -0
- package/src/app-shell.css +65 -0
- package/src/assistant/dock.ts +142 -0
- package/src/assistant/host.tsx +371 -0
- package/src/assistant/index.ts +6 -0
- package/src/assistant/provider.tsx +269 -0
- package/src/assistant/sessions.tsx +450 -0
- package/src/assistant.css +407 -0
- package/src/auth.css +606 -0
- package/src/auth.tsx +202 -0
- package/src/brand.tsx +31 -0
- package/src/gemboss-field.css +108 -0
- package/src/gemboss-tokens.css +164 -0
- package/src/icons.tsx +75 -0
- package/src/index.ts +9 -0
- package/src/shell.css +1069 -0
- package/src/shell.tsx +212 -0
- package/src/ui.css +403 -0
|
@@ -0,0 +1,423 @@
|
|
|
1
|
+
<!doctype html><html lang="vi"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
|
2
|
+
<title>@gemboss/ui catalog</title><link rel="stylesheet" href="../gemboss-ui.css"><style>
|
|
3
|
+
body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text);font-family:var(--gemboss-font-sans)}
|
|
4
|
+
.cat{display:grid;grid-template-columns:220px minmax(0,1fr);max-width:1180px;margin:0 auto;gap:32px;padding:32px 24px}
|
|
5
|
+
.cat-nav{position:sticky;top:24px;align-self:start;display:flex;flex-direction:column;gap:2px}
|
|
6
|
+
.cat-nav a{padding:8px 12px;border-radius:var(--gemboss-radius-md);color:var(--gemboss-text);text-decoration:none;min-height:24px}
|
|
7
|
+
.cat-nav a:hover{background:var(--gemboss-hover)}
|
|
8
|
+
.cat-head h1{margin:0 0 4px;font-size:28px}.cat-head p{margin:0 0 24px;color:var(--gemboss-text-muted)}
|
|
9
|
+
.cat section{margin:0 0 48px}.cat h2{margin:0 0 6px;font-size:20px}.cat section>p{margin:0 0 16px;color:var(--gemboss-text-muted)}
|
|
10
|
+
.cat-demo{margin:0 0 16px;background:var(--gemboss-surface);border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden}
|
|
11
|
+
.cat-demo figcaption{padding:10px 16px;font-size:13px;font-weight:600;border-bottom:1px solid var(--gemboss-divider)}
|
|
12
|
+
.cat-demo figcaption span{font-weight:400;color:var(--gemboss-text-muted)}
|
|
13
|
+
.cat-live{padding:20px 16px}.cat-screen iframe{display:block;width:100%;border:0}
|
|
14
|
+
.cat-code summary{padding:10px 16px;font-size:13px;cursor:pointer;color:var(--gemboss-text-muted);border-top:1px solid var(--gemboss-divider);min-height:24px}
|
|
15
|
+
.cat-code pre{margin:0;padding:12px 16px;overflow:auto;background:#0f1012;color:#e8e8e6;font-size:12px;line-height:1.5}
|
|
16
|
+
.cat-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.cat-stack{display:grid;gap:10px;max-width:420px}
|
|
17
|
+
.cat-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:8px;margin:0 0 16px}
|
|
18
|
+
.cat-swatch{display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:8px;background:var(--gemboss-surface);border:1px solid var(--gemboss-divider);border-radius:8px}
|
|
19
|
+
.cat-swatch i{grid-row:1/3;width:32px;height:32px;border-radius:6px;border:1px solid rgba(0,0,0,.08)}
|
|
20
|
+
.cat-swatch code{font-size:12px;overflow-wrap:anywhere}.cat-swatch span{font-size:12px;color:var(--gemboss-text-muted)}
|
|
21
|
+
.cat-scale{background:var(--gemboss-surface)}.cat-small{font-size:11px;max-width:260px;overflow-wrap:anywhere}
|
|
22
|
+
.cat-radius{display:inline-block;width:48px;height:28px;border:1px solid var(--gemboss-text-muted);background:var(--gemboss-surface)}
|
|
23
|
+
.cat-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(120px,100%),1fr));gap:4px;margin:0 0 16px}
|
|
24
|
+
.cat-icon{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--gemboss-surface);border-radius:8px;border:1px solid var(--gemboss-divider)}
|
|
25
|
+
.cat-icon code{font-size:12px}
|
|
26
|
+
|
|
27
|
+
@media (max-width:760px){.cat{grid-template-columns:1fr;padding:16px}.cat-nav{position:static;flex-direction:row;flex-wrap:wrap}}
|
|
28
|
+
</style></head><body>
|
|
29
|
+
<div class="cat"><nav class="cat-nav" aria-label="Mục"><a href="#tokens">Token</a><a href="#buttons">Nút</a><a href="#fields">Ô nhập</a><a href="#choice">Tab, nhóm nút, thẻ</a><a href="#surfaces">Thẻ, số liệu, bảng, trạng thái trống</a><a href="#modal">Hộp thoại</a><a href="#shell">Khung app</a><a href="#auth">Đăng nhập</a><a href="#assistant">Trợ lý: cột phiên</a><a href="#icons">Icon</a></nav>
|
|
30
|
+
<main><header class="cat-head"><h1>@gemboss/ui 0.1.0</h1><p>Ngôn ngữ thiết kế chung của các công cụ GemBoss. Markup dưới mỗi ví dụ là đúng thứ package render ra; bề mặt không dùng React (HTML tĩnh, Python) chép markup này và nạp <code>gemboss-ui.css</code>. Dựng từ gemboss <code>cf59218eb5d0</code>.</p></header>
|
|
31
|
+
<section id="tokens"><h2>Token</h2><p>Đổi giao diện một bề mặt bằng cách đặt lại token, không viết đè class. Tên và giá trị đọc thẳng từ gemboss-ui.css.</p><div class="cat-swatches"><div class="cat-swatch"><i style="background:var(--gemboss-primary)"></i><code>--gemboss-primary</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-primary-dark)"></i><code>--gemboss-primary-dark</code><span>#000000</span></div><div class="cat-swatch"><i style="background:var(--gemboss-primary-soft)"></i><code>--gemboss-primary-soft</code><span>#f2f3f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent)"></i><code>--gemboss-accent</code><span>#5661f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-strong)"></i><code>--gemboss-accent-strong</code><span>#3a44de</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-soft)"></i><code>--gemboss-accent-soft</code><span>#eef0fe</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text-strong)"></i><code>--gemboss-text-strong</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text)"></i><code>--gemboss-text</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text-muted)"></i><code>--gemboss-text-muted</code><span>#686b71</span></div><div class="cat-swatch"><i style="background:var(--gemboss-surface)"></i><code>--gemboss-surface</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-canvas)"></i><code>--gemboss-canvas</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-preview-canvas)"></i><code>--gemboss-preview-canvas</code><span>#eceef1</span></div><div class="cat-swatch"><i style="background:var(--gemboss-rail-bg)"></i><code>--gemboss-rail-bg</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-panel-bg)"></i><code>--gemboss-panel-bg</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-divider)"></i><code>--gemboss-divider</code><span>#e5e7ea</span></div><div class="cat-swatch"><i style="background:var(--gemboss-divider-soft)"></i><code>--gemboss-divider-soft</code><span>#edeff2</span></div><div class="cat-swatch"><i style="background:var(--gemboss-hover)"></i><code>--gemboss-hover</code><span>#eceef2</span></div><div class="cat-swatch"><i style="background:var(--gemboss-active-bg)"></i><code>--gemboss-active-bg</code><span>#f0f1f4</span></div><div class="cat-swatch"><i style="background:var(--gemboss-active-fg)"></i><code>--gemboss-active-fg</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger)"></i><code>--gemboss-danger</code><span>#d72c0d</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-strong)"></i><code>--gemboss-danger-strong</code><span>#b42318</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-soft)"></i><code>--gemboss-danger-soft</code><span>#fff0e9</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-border)"></i><code>--gemboss-danger-border</code><span>#f5c9bc</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success)"></i><code>--gemboss-success</code><span>#007f5f</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-strong)"></i><code>--gemboss-success-strong</code><span>#0a6a4c</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-soft)"></i><code>--gemboss-success-soft</code><span>#e3f1df</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-border)"></i><code>--gemboss-success-border</code><span>#b7dfcd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning)"></i><code>--gemboss-warning</code><span>#9a6700</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning-soft)"></i><code>--gemboss-warning-soft</code><span>#fff8e0</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning-border)"></i><code>--gemboss-warning-border</code><span>#f5d569</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-bg)"></i><code>--gemboss-dark-bg</code><span>#0a0a0c</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-rail)"></i><code>--gemboss-dark-rail</code><span>#0e0e11</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-surface)"></i><code>--gemboss-dark-surface</code><span>#16161a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-surface-2)"></i><code>--gemboss-dark-surface-2</code><span>#1e1e24</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-divider)"></i><code>--gemboss-dark-divider</code><span>#2a2a31</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-text)"></i><code>--gemboss-dark-text</code><span>#ededf0</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-muted)"></i><code>--gemboss-dark-muted</code><span>#9a9aa4</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-bg)"></i><code>--gemboss-field-bg</code><span>#fdfdfd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-bg-hover)"></i><code>--gemboss-field-bg-hover</code><span>#fafafa</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-ink)"></i><code>--gemboss-field-ink</code><span>#303030</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-placeholder)"></i><code>--gemboss-field-placeholder</code><span>#616161</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line)"></i><code>--gemboss-field-line</code><span>#8a8a8a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line-hover)"></i><code>--gemboss-field-line-hover</code><span>#616161</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line-active)"></i><code>--gemboss-field-line-active</code><span>#1a1a1a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-ink)"></i><code>--gemboss-chip-ink</code><span>#303633</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-line)"></i><code>--gemboss-chip-line</code><span>#cfd6ce</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-line-hover)"></i><code>--gemboss-chip-line-hover</code><span>#aab4ad</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-bg-hover)"></i><code>--gemboss-chip-bg-hover</code><span>#f6f7f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-on-primary)"></i><code>--gemboss-on-primary</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-app-bg)"></i><code>--gemboss-app-bg</code><span>#ffffff</span></div></div><table class="ui-table cat-scale"><thead><tr><th>Token</th><th>Giá trị</th><th>Mẫu</th></tr></thead><tbody><tr><td><code>--gemboss-fs-micro</code></td><td>11px</td><td style="font-size:var(--gemboss-fs-micro)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-caption</code></td><td>12px</td><td style="font-size:var(--gemboss-fs-caption)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-body</code></td><td>14px</td><td style="font-size:var(--gemboss-fs-body)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-body-lg</code></td><td>16px</td><td style="font-size:var(--gemboss-fs-body-lg)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h3</code></td><td>16px</td><td style="font-size:var(--gemboss-fs-h3)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h2</code></td><td>20px</td><td style="font-size:var(--gemboss-fs-h2)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h1</code></td><td>24px</td><td style="font-size:var(--gemboss-fs-h1)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-display</code></td><td>30px</td><td style="font-size:var(--gemboss-fs-display)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-radius-xs</code></td><td>4px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-xs)"></i></td></tr><tr><td><code>--gemboss-radius-sm</code></td><td>6px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-sm)"></i></td></tr><tr><td><code>--gemboss-radius-md</code></td><td>8px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-md)"></i></td></tr><tr><td><code>--gemboss-radius-lg</code></td><td>12px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-lg)"></i></td></tr><tr><td><code>--gemboss-radius-xl</code></td><td>16px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-xl)"></i></td></tr><tr><td><code>--gemboss-radius-2xl</code></td><td>20px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-2xl)"></i></td></tr><tr><td><code>--gemboss-radius-full</code></td><td>999px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-full)"></i></td></tr><tr><td><code>--gemboss-shadow-resting</code></td><td class="cat-small">0 1px 2px rgba(31, 30, 29, 0.04), 0 2px 6px rgba(31, 30, 29, 0.06)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-resting);border:0"></i></td></tr><tr><td><code>--gemboss-shadow-raised</code></td><td class="cat-small">0 4px 16px rgba(31, 30, 29, 0.10)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-raised);border:0"></i></td></tr><tr><td><code>--gemboss-shadow-overlay</code></td><td class="cat-small">0 16px 48px rgba(31, 30, 29, 0.18)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-overlay);border:0"></i></td></tr></tbody></table></section>
|
|
32
|
+
<section id="buttons"><h2>Nút</h2><p>Một lớp <code>ui-btn</code>, ba biến thể, một cỡ nhỏ. Dùng được trên <code><button></code> lẫn <code><a></code> (căn giữa sẵn).</p><figure class="cat-demo"><figcaption>Mặc định · chính · ghost · nhỏ · tắt</figcaption><div class="cat-live"><div class="cat-row"><button type="button" class="ui-btn">Lưu nháp</button><button type="button" class="ui-btn ui-btn--primary">Xuất bản</button><button type="button" class="ui-btn ui-btn--ghost">Huỷ</button><button type="button" class="ui-btn ui-btn--sm">Nhỏ</button><button type="button" class="ui-btn ui-btn--primary" disabled>Đang lưu…</button><a class="ui-btn" href="#buttons">Link dạng nút</a></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="cat-row">
|
|
33
|
+
<button type="button" class="ui-btn">Lưu nháp</button>
|
|
34
|
+
<button type="button" class="ui-btn ui-btn--primary">Xuất bản</button>
|
|
35
|
+
<button type="button" class="ui-btn ui-btn--ghost">Huỷ</button>
|
|
36
|
+
<button type="button" class="ui-btn ui-btn--sm">Nhỏ</button>
|
|
37
|
+
<button type="button" class="ui-btn ui-btn--primary" disabled>Đang lưu…</button>
|
|
38
|
+
<a class="ui-btn" href="#buttons">Link dạng nút</a>
|
|
39
|
+
</div></code></pre></details></figure></section>
|
|
40
|
+
<section id="fields"><h2>Ô nhập</h2><p>Mọi ô chữ dùng <code>gemboss-field</code>: cùng viền, cùng focus, 44px trên màn chạm.</p><figure class="cat-demo"><figcaption>Ô chữ · ô có biểu tượng · chọn · vùng chữ</figcaption><div class="cat-live"><div class="cat-stack"><input class="gemboss-field" placeholder="Tên chiến dịch"><label class="gemboss-field gemboss-field--group"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg><input class="gemboss-field__bare" placeholder="Tìm store theo domain…"></label><select class="ui-select"><option>Mọi ngành</option><option>Mỹ phẩm</option></select><textarea class="gemboss-field" rows="4" placeholder="Ghi chú"></textarea></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="cat-stack">
|
|
41
|
+
<input class="gemboss-field" placeholder="Tên chiến dịch">
|
|
42
|
+
<label class="gemboss-field gemboss-field--group">
|
|
43
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
44
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
45
|
+
<circle cx="8.8" cy="8.8" r="5.3">
|
|
46
|
+
</circle>
|
|
47
|
+
<path d="M12.8 12.8 17 17">
|
|
48
|
+
</path>
|
|
49
|
+
</g>
|
|
50
|
+
</svg>
|
|
51
|
+
<input class="gemboss-field__bare" placeholder="Tìm store theo domain…">
|
|
52
|
+
</label>
|
|
53
|
+
<select class="ui-select">
|
|
54
|
+
<option>Mọi ngành</option>
|
|
55
|
+
<option>Mỹ phẩm</option>
|
|
56
|
+
</select>
|
|
57
|
+
<textarea class="gemboss-field" rows="4" placeholder="Ghi chú">
|
|
58
|
+
</textarea>
|
|
59
|
+
</div></code></pre></details></figure></section>
|
|
60
|
+
<section id="choice"><h2>Tab, nhóm nút, thẻ</h2><figure class="cat-demo"><figcaption>Tab (<code>aria-selected</code> quyết định tab đang chọn)</figcaption><div class="cat-live"><div class="ui-tabs" role="tablist"><button type="button" role="tab" aria-selected="true">Tổng quan</button><button type="button" role="tab" aria-selected="false">Chi tiết</button><button type="button" role="tab" aria-selected="false" disabled>Sắp có</button></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-tabs" role="tablist">
|
|
61
|
+
<button type="button" role="tab" aria-selected="true">Tổng quan</button>
|
|
62
|
+
<button type="button" role="tab" aria-selected="false">Chi tiết</button>
|
|
63
|
+
<button type="button" role="tab" aria-selected="false" disabled>Sắp có</button>
|
|
64
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Nhóm nút (<code>ui-seg</code>)</figcaption><div class="cat-live"><div class="ui-seg" role="group" aria-label="Kiểu xem"><button type="button" aria-pressed="true" class="is-text active">Kanban</button><button type="button" aria-pressed="false" class="is-text">Nhóm</button><button type="button" aria-pressed="false" class="is-text">Danh sách</button></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-seg" role="group" aria-label="Kiểu xem">
|
|
65
|
+
<button type="button" aria-pressed="true" class="is-text active">Kanban</button>
|
|
66
|
+
<button type="button" aria-pressed="false" class="is-text">Nhóm</button>
|
|
67
|
+
<button type="button" aria-pressed="false" class="is-text">Danh sách</button>
|
|
68
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Thẻ · nhãn đếm</figcaption><div class="cat-live"><div class="cat-row"><span class="ui-tag">Nháp</span><span class="ui-tag ui-tag--accent">Đã duyệt</span><span class="ui-tag ui-tag--chip">SECTION</span><span class="ui-badge">12</span></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="cat-row">
|
|
69
|
+
<span class="ui-tag">Nháp</span>
|
|
70
|
+
<span class="ui-tag ui-tag--accent">Đã duyệt</span>
|
|
71
|
+
<span class="ui-tag ui-tag--chip">SECTION</span>
|
|
72
|
+
<span class="ui-badge">12</span>
|
|
73
|
+
</div></code></pre></details></figure></section>
|
|
74
|
+
<section id="surfaces"><h2>Thẻ, số liệu, bảng, trạng thái trống</h2><figure class="cat-demo"><figcaption>Card</figcaption><div class="cat-live"><div class="ui-card" style="padding:16px">Một khối nội dung. Nền, viền, bo góc và bóng lấy từ token.</div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-card" style="padding:16px">Một khối nội dung. Nền, viền, bo góc và bóng lấy từ token.</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Số liệu (<code>ui-stats</code> / <code>ui-stat</code>)</figcaption><div class="cat-live"><div class="ui-stats"><div class="ui-stat"><b>17</b> Nháp</div><div class="ui-stat is-clickable active"><b>4</b> Đang duyệt</div><div class="ui-stat is-clickable"><b>0</b> Loại</div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-stats">
|
|
75
|
+
<div class="ui-stat">
|
|
76
|
+
<b>17</b> Nháp</div>
|
|
77
|
+
<div class="ui-stat is-clickable active">
|
|
78
|
+
<b>4</b> Đang duyệt</div>
|
|
79
|
+
<div class="ui-stat is-clickable">
|
|
80
|
+
<b>0</b> Loại</div>
|
|
81
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Bảng (<code>is-num</code> căn phải, số đều cột)</figcaption><div class="cat-live"><div class="ui-table-wrap"><table class="ui-table"><thead><tr><th>Store</th><th>Ngành</th><th class="is-num">Trang</th></tr></thead><tbody><tr><td>fluke.com</td><td>Audio</td><td class="is-num">1.284</td></tr><tr><td>glowrecipe.com</td><td>Mỹ phẩm</td><td class="is-num">312</td></tr></tbody></table></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-table-wrap">
|
|
82
|
+
<table class="ui-table">
|
|
83
|
+
<thead>
|
|
84
|
+
<tr>
|
|
85
|
+
<th>Store</th>
|
|
86
|
+
<th>Ngành</th>
|
|
87
|
+
<th class="is-num">Trang</th>
|
|
88
|
+
</tr>
|
|
89
|
+
</thead>
|
|
90
|
+
<tbody>
|
|
91
|
+
<tr>
|
|
92
|
+
<td>fluke.com</td>
|
|
93
|
+
<td>Audio</td>
|
|
94
|
+
<td class="is-num">1.284</td>
|
|
95
|
+
</tr>
|
|
96
|
+
<tr>
|
|
97
|
+
<td>glowrecipe.com</td>
|
|
98
|
+
<td>Mỹ phẩm</td>
|
|
99
|
+
<td class="is-num">312</td>
|
|
100
|
+
</tr>
|
|
101
|
+
</tbody>
|
|
102
|
+
</table>
|
|
103
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Trống</figcaption><div class="cat-live"><div class="ui-empty">Chưa có gì ở đây.<button type="button" class="ui-btn ui-btn--primary">Tạo mục đầu tiên</button></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-empty">Chưa có gì ở đây.<button type="button" class="ui-btn ui-btn--primary">Tạo mục đầu tiên</button>
|
|
104
|
+
</div></code></pre></details></figure></section>
|
|
105
|
+
<section id="modal"><h2>Hộp thoại</h2><p>Lớp phủ <code>ui-overlay</code> + hộp <code>ui-modal</code> (ở đây vẽ không có lớp phủ để xem được trong trang). Thân hộp thoại tự đệm: <code>ui-modal__body</code> / <code>__foot</code> chưa có CSS nào, kể cả trong admin.</p><figure class="cat-demo"><figcaption>Hộp thoại (<code>ui-modal__head</code> có nút đóng 44px)</figcaption><div class="cat-live"><div class="ui-modal" role="dialog" aria-modal="true" aria-labelledby="cat-m"><div class="ui-modal__head"><div class="ui-modal__title" id="cat-m">Xoá phiên này?</div><button type="button" class="ui-modal__close" aria-label="Đóng"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg></button></div><div style="padding:16px 20px">Lịch sử vẫn còn trong sổ; phiên chỉ ẩn khỏi danh sách.<div class="cat-row" style="justify-content:flex-end;margin-top:16px"><button type="button" class="ui-btn ui-btn--ghost">Huỷ</button><button type="button" class="ui-btn ui-btn--primary">Xoá</button></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-modal" role="dialog" aria-modal="true" aria-labelledby="cat-m">
|
|
106
|
+
<div class="ui-modal__head">
|
|
107
|
+
<div class="ui-modal__title" id="cat-m">Xoá phiên này?</div>
|
|
108
|
+
<button type="button" class="ui-modal__close" aria-label="Đóng">
|
|
109
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
110
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
111
|
+
<path d="M5 5l10 10M15 5 5 15">
|
|
112
|
+
</path>
|
|
113
|
+
</g>
|
|
114
|
+
</svg>
|
|
115
|
+
</button>
|
|
116
|
+
</div>
|
|
117
|
+
<div style="padding:16px 20px">Lịch sử vẫn còn trong sổ; phiên chỉ ẩn khỏi danh sách.<div class="cat-row" style="justify-content:flex-end;margin-top:16px">
|
|
118
|
+
<button type="button" class="ui-btn ui-btn--ghost">Huỷ</button>
|
|
119
|
+
<button type="button" class="ui-btn ui-btn--primary">Xoá</button>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
</div></code></pre></details></figure></section>
|
|
123
|
+
<section id="shell"><h2>Khung app</h2><p>Topbar 56px, rail 240px, ≤760px thành ngăn kéo. Logo <code>BrandLockup</code>, tài khoản <code>AccountMenu</code> (bấm chữ viết tắt), mục Trợ lý ở chân rail có class <code>gnav-assistant</code>.</p><figure class="cat-demo cat-screen"><figcaption>AppShell + BrandLockup + AccountMenu + Icon</figcaption><iframe title="AppShell + BrandLockup + AccountMenu + Icon" style="height:460px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"></head><body><div class="gemboss-platform-shell"><header class="gemboss-platform-topbar"><div class="gemboss-topbar-start"><button type="button" class="gemboss-mobile-menu-btn" aria-label="Mở menu" aria-expanded="false"><svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 5.5h14M3 10h14M3 14.5h14" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path></svg></button><a class="gb-brand" href="#" aria-label="GemFactory home"><svg class="gb-brand-gem" viewBox="0 0 32 40" width="20.8" height="26" aria-hidden="true" focusable="false"><g transform="translate(0,0.8) scale(0.31)"><polygon points="26,14 74,14 66,50 34,50" fill="#5661F5" fill-opacity="0.92"></polygon><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="8.75" stroke-linejoin="round"></path><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.45" stroke-linejoin="round"></path></g></svg><span class="gb-brand-name">GemFactory</span></a></div><div class="gemboss-topbar-center"></div><div class="gemboss-topbar-end"><details class="gb-account"><summary class="gemboss-account-chip" aria-label="Account · Minh Anh" title="Minh Anh">MA</summary><div role="menu" class="gemboss-popover-surface gemboss-account-menu"><div class="gb-account-head"><div class="gb-account-name">Minh Anh</div><div class="gb-account-email">ma@gemboss.ai</div><div class="gb-account-role">Designer</div></div><a role="menuitem" class="gemboss-account-menu-item" href="#">Cài đặt</a><form method="post" action="#" class="gb-account-form"><button role="menuitem" type="submit" class="gemboss-account-menu-item danger">Đăng xuất</button></form></div></details></div></header><nav class="icon-nav" aria-label="Main navigation"><div class="gnav-scroll"><div class="gnav-heading">Kho</div><div class="gnav-group active"><a class="gnav-item active" aria-current="page" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></span><span class="gnav-label">Board</span></a></div><div class="gnav-group"><a class="gnav-item" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg></span><span class="gnav-label">Ghép trang</span></a></div><div class="gnav-group"><a class="gnav-item" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.2 17.3 16H2.7z"></path><path d="M10 8.2v3.6M10 13.9v.1"></path></g></svg></span><span class="gnav-label">Framework thiếu</span><span class="gnav-count" aria-label="3 mục đang mở">3</span></a></div></div><div class="gnav-bottom"><div class="gnav-sep"></div><a class="gnav-item gnav-assistant" href="#"><span class="gnav-ico"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path></g></svg></span><span class="gnav-label">Trợ lý</span></a></div></nav><button type="button" class="gemboss-mobile-nav-backdrop" aria-label="Đóng menu" tabindex="-1"></button><main class="gemboss-platform-main"><div style="padding:24px"><h1 style="margin:0">Nội dung màn</h1></div></main></div></body></html>"></iframe><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
124
|
+
<header class="gemboss-platform-topbar">
|
|
125
|
+
<div class="gemboss-topbar-start">
|
|
126
|
+
<button type="button" class="gemboss-mobile-menu-btn" aria-label="Mở menu" aria-expanded="false">
|
|
127
|
+
<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
|
|
128
|
+
<path d="M3 5.5h14M3 10h14M3 14.5h14" stroke="currentColor" stroke-width="1.7" stroke-linecap="round">
|
|
129
|
+
</path>
|
|
130
|
+
</svg>
|
|
131
|
+
</button>
|
|
132
|
+
<a class="gb-brand" href="#" aria-label="GemFactory home">
|
|
133
|
+
<svg class="gb-brand-gem" viewBox="0 0 32 40" width="20.8" height="26" aria-hidden="true" focusable="false">
|
|
134
|
+
<g transform="translate(0,0.8) scale(0.31)">
|
|
135
|
+
<polygon points="26,14 74,14 66,50 34,50" fill="#5661F5" fill-opacity="0.92">
|
|
136
|
+
</polygon>
|
|
137
|
+
<path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="8.75" stroke-linejoin="round">
|
|
138
|
+
</path>
|
|
139
|
+
<path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.45" stroke-linejoin="round">
|
|
140
|
+
</path>
|
|
141
|
+
</g>
|
|
142
|
+
</svg>
|
|
143
|
+
<span class="gb-brand-name">GemFactory</span>
|
|
144
|
+
</a>
|
|
145
|
+
</div>
|
|
146
|
+
<div class="gemboss-topbar-center">
|
|
147
|
+
</div>
|
|
148
|
+
<div class="gemboss-topbar-end">
|
|
149
|
+
<details class="gb-account">
|
|
150
|
+
<summary class="gemboss-account-chip" aria-label="Account · Minh Anh" title="Minh Anh">MA</summary>
|
|
151
|
+
<div role="menu" class="gemboss-popover-surface gemboss-account-menu">
|
|
152
|
+
<div class="gb-account-head">
|
|
153
|
+
<div class="gb-account-name">Minh Anh</div>
|
|
154
|
+
<div class="gb-account-email">ma@gemboss.ai</div>
|
|
155
|
+
<div class="gb-account-role">Designer</div>
|
|
156
|
+
</div>
|
|
157
|
+
<a role="menuitem" class="gemboss-account-menu-item" href="#">Cài đặt</a>
|
|
158
|
+
<form method="post" action="#" class="gb-account-form">
|
|
159
|
+
<button role="menuitem" type="submit" class="gemboss-account-menu-item danger">Đăng xuất</button>
|
|
160
|
+
</form>
|
|
161
|
+
</div>
|
|
162
|
+
</details>
|
|
163
|
+
</div>
|
|
164
|
+
</header>
|
|
165
|
+
<nav class="icon-nav" aria-label="Main navigation">
|
|
166
|
+
<div class="gnav-scroll">
|
|
167
|
+
<div class="gnav-heading">Kho</div>
|
|
168
|
+
<div class="gnav-group active">
|
|
169
|
+
<a class="gnav-item active" aria-current="page" href="#">
|
|
170
|
+
<span class="gnav-ico">
|
|
171
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
172
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
173
|
+
<rect x="3" y="3.5" width="4" height="13" rx="1.2">
|
|
174
|
+
</rect>
|
|
175
|
+
<rect x="8" y="3.5" width="4" height="9" rx="1.2">
|
|
176
|
+
</rect>
|
|
177
|
+
<rect x="13" y="3.5" width="4" height="6" rx="1.2">
|
|
178
|
+
</rect>
|
|
179
|
+
</g>
|
|
180
|
+
</svg>
|
|
181
|
+
</span>
|
|
182
|
+
<span class="gnav-label">Board</span>
|
|
183
|
+
</a>
|
|
184
|
+
</div>
|
|
185
|
+
<div class="gnav-group">
|
|
186
|
+
<a class="gnav-item" href="#">
|
|
187
|
+
<span class="gnav-ico">
|
|
188
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
189
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
190
|
+
<rect x="3.5" y="3" width="13" height="3.5" rx="1">
|
|
191
|
+
</rect>
|
|
192
|
+
<rect x="3.5" y="8.25" width="13" height="3.5" rx="1">
|
|
193
|
+
</rect>
|
|
194
|
+
<rect x="3.5" y="13.5" width="13" height="3.5" rx="1">
|
|
195
|
+
</rect>
|
|
196
|
+
</g>
|
|
197
|
+
</svg>
|
|
198
|
+
</span>
|
|
199
|
+
<span class="gnav-label">Ghép trang</span>
|
|
200
|
+
</a>
|
|
201
|
+
</div>
|
|
202
|
+
<div class="gnav-group">
|
|
203
|
+
<a class="gnav-item" href="#">
|
|
204
|
+
<span class="gnav-ico">
|
|
205
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
206
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
207
|
+
<path d="M10 3.2 17.3 16H2.7z">
|
|
208
|
+
</path>
|
|
209
|
+
<path d="M10 8.2v3.6M10 13.9v.1">
|
|
210
|
+
</path>
|
|
211
|
+
</g>
|
|
212
|
+
</svg>
|
|
213
|
+
</span>
|
|
214
|
+
<span class="gnav-label">Framework thiếu</span>
|
|
215
|
+
<span class="gnav-count" aria-label="3 mục đang mở">3</span>
|
|
216
|
+
</a>
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
<div class="gnav-bottom">
|
|
220
|
+
<div class="gnav-sep">
|
|
221
|
+
</div>
|
|
222
|
+
<a class="gnav-item gnav-assistant" href="#">
|
|
223
|
+
<span class="gnav-ico">
|
|
224
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
225
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
226
|
+
<path d="M3 4.5h14v9H8.5L5 16.5v-3H3z">
|
|
227
|
+
</path>
|
|
228
|
+
</g>
|
|
229
|
+
</svg>
|
|
230
|
+
</span>
|
|
231
|
+
<span class="gnav-label">Trợ lý</span>
|
|
232
|
+
</a>
|
|
233
|
+
</div>
|
|
234
|
+
</nav>
|
|
235
|
+
<button type="button" class="gemboss-mobile-nav-backdrop" aria-label="Đóng menu" tabindex="-1">
|
|
236
|
+
</button>
|
|
237
|
+
<main class="gemboss-platform-main">
|
|
238
|
+
<div style="padding:24px">
|
|
239
|
+
<h1 style="margin:0">Nội dung màn</h1>
|
|
240
|
+
</div>
|
|
241
|
+
</main>
|
|
242
|
+
</div></code></pre></details></figure></section>
|
|
243
|
+
<section id="auth"><h2>Đăng nhập</h2><figure class="cat-demo cat-screen"><figcaption>AuthLayout + PasswordField</figcaption><iframe title="AuthLayout + PasswordField" style="height:620px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"></head><body><main class="gb-auth"><div class="gb-auth-split"><div class="gb-auth-stage"><div class="gb-auth-card"><header class="gb-auth-header"><span class="gb-auth-mark" aria-hidden="true"><svg viewBox="0 0 32 32" width="56" height="56" aria-hidden="true" focusable="false"><rect width="32" height="32" rx="7" style="fill:var(--gb-mark-bg)"></rect><g transform="translate(16,16) scale(0.24) translate(-50,-62)"><polygon points="26,14 74,14 66,50 34,50" fill="#8a93ff"></polygon><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="#f4f4f2" stroke-width="5" stroke-linejoin="round"></path><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="#f4f4f2" stroke-opacity="0.72" stroke-width="3" stroke-linejoin="round"></path></g></svg></span><h1>GemFactory</h1><p>Kho section của GemBoss</p></header><form class="gb-auth-form" method="post" action="#"><div class="gb-auth-field"><label for="pw">Mật khẩu</label><div class="gb-auth-pw"><input class="gb-auth-input" id="pw" type="password"/><button type="button" aria-controls="pw" aria-label="Hiện" title="Hiện" class="gb-auth-pw-toggle"><svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M1.5 10S4.6 4.5 10 4.5 18.5 10 18.5 10 15.4 15.5 10 15.5 1.5 10 1.5 10Z"></path><circle cx="10" cy="10" r="2.6"></circle></svg></button></div></div><button type="submit" class="gb-auth-submit">Đăng nhập</button></form></div></div><aside class="gb-auth-panel"><div class="gb-auth-panel-in"><p class="gb-auth-eyebrow">GemBoss</p><h2 class="gb-auth-panel-h">Một ngôn ngữ thiết kế cho mọi công cụ</h2><p class="gb-auth-panel-p">Đăng nhập bằng mật khẩu đội đã gửi riêng.</p></div></aside></div></main></body></html>"></iframe><details class="cat-code"><summary>Markup</summary><pre><code><main class="gb-auth">
|
|
244
|
+
<div class="gb-auth-split">
|
|
245
|
+
<div class="gb-auth-stage">
|
|
246
|
+
<div class="gb-auth-card">
|
|
247
|
+
<header class="gb-auth-header">
|
|
248
|
+
<span class="gb-auth-mark" aria-hidden="true">
|
|
249
|
+
<svg viewBox="0 0 32 32" width="56" height="56" aria-hidden="true" focusable="false">
|
|
250
|
+
<rect width="32" height="32" rx="7" style="fill:var(--gb-mark-bg)">
|
|
251
|
+
</rect>
|
|
252
|
+
<g transform="translate(16,16) scale(0.24) translate(-50,-62)">
|
|
253
|
+
<polygon points="26,14 74,14 66,50 34,50" fill="#8a93ff">
|
|
254
|
+
</polygon>
|
|
255
|
+
<path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="#f4f4f2" stroke-width="5" stroke-linejoin="round">
|
|
256
|
+
</path>
|
|
257
|
+
<path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="#f4f4f2" stroke-opacity="0.72" stroke-width="3" stroke-linejoin="round">
|
|
258
|
+
</path>
|
|
259
|
+
</g>
|
|
260
|
+
</svg>
|
|
261
|
+
</span>
|
|
262
|
+
<h1>GemFactory</h1>
|
|
263
|
+
<p>Kho section của GemBoss</p>
|
|
264
|
+
</header>
|
|
265
|
+
<form class="gb-auth-form" method="post" action="#">
|
|
266
|
+
<div class="gb-auth-field">
|
|
267
|
+
<label for="pw">Mật khẩu</label>
|
|
268
|
+
<div class="gb-auth-pw">
|
|
269
|
+
<input class="gb-auth-input" id="pw" type="password"/>
|
|
270
|
+
<button type="button" aria-controls="pw" aria-label="Hiện" title="Hiện" class="gb-auth-pw-toggle">
|
|
271
|
+
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
|
|
272
|
+
<path d="M1.5 10S4.6 4.5 10 4.5 18.5 10 18.5 10 15.4 15.5 10 15.5 1.5 10 1.5 10Z">
|
|
273
|
+
</path>
|
|
274
|
+
<circle cx="10" cy="10" r="2.6">
|
|
275
|
+
</circle>
|
|
276
|
+
</svg>
|
|
277
|
+
</button>
|
|
278
|
+
</div>
|
|
279
|
+
</div>
|
|
280
|
+
<button type="submit" class="gb-auth-submit">Đăng nhập</button>
|
|
281
|
+
</form>
|
|
282
|
+
</div>
|
|
283
|
+
</div>
|
|
284
|
+
<aside class="gb-auth-panel">
|
|
285
|
+
<div class="gb-auth-panel-in">
|
|
286
|
+
<p class="gb-auth-eyebrow">GemBoss</p>
|
|
287
|
+
<h2 class="gb-auth-panel-h">Một ngôn ngữ thiết kế cho mọi công cụ</h2>
|
|
288
|
+
<p class="gb-auth-panel-p">Đăng nhập bằng mật khẩu đội đã gửi riêng.</p>
|
|
289
|
+
</div>
|
|
290
|
+
</aside>
|
|
291
|
+
</div>
|
|
292
|
+
</main></code></pre></details></figure></section>
|
|
293
|
+
<section id="assistant"><h2>Trợ lý: cột phiên</h2><p><code>SessionRail</code> (React). Khung toàn màn hình / cửa sổ nổi / thanh là <code>AssistantHost</code>, cần React vì có trạng thái.</p><figure class="cat-demo"><figcaption>SessionRail</figcaption><div class="cat-live"><div style="height:360px;display:flex"><aside class="gemboss-assistant-rail"><div class="gemboss-assistant-rail-top"><button type="button" class="gemboss-assistant-newchat" title="Phiên mới"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H5.5A1.5 1.5 0 0 0 4 5.5v9A1.5 1.5 0 0 0 5.5 16h9a1.5 1.5 0 0 0 1.5-1.5V9"></path><path d="M14.5 3.5l2 2L10 12H8v-2z"></path></g></svg><span>Phiên mới</span></button><button type="button" class="gemboss-assistant-collapse" aria-label="Collapse sidebar" title="Collapse"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5l-5 5 5 5"></path></g></svg></button></div><div class="gemboss-assistant-search gemboss-field gemboss-field--group"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="5"></circle><path d="M13 13l3.5 3.5"></path></g></svg><input class="gemboss-field__bare" placeholder="Tìm phiên…" aria-label="Search history" value=""/><kbd class="gemboss-assistant-kbd">/</kbd></div><div class="gemboss-assistant-threads"><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Đã ghim</div><div class="gemboss-assistant-thread"><button type="button" class="gemboss-assistant-thread-main" title="So sánh advertorial với listicle"><span class="gemboss-assistant-thread-titlerow"><svg viewBox="0 0 20 20" class="gemboss-assistant-pin-dot" aria-hidden="true" focusable="false"><path d="M8 3.5h4l-.5 5 2.5 2.5H6l2.5-2.5z" fill="currentColor"></path><path d="M10 11v5.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path></svg><span class="gemboss-assistant-thread-title">So sánh advertorial với listicle</span></span><span class="gemboss-assistant-thread-meta">20/8/2026</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Hôm nay</div><div class="gemboss-assistant-thread active"><button type="button" class="gemboss-assistant-thread-main" title="Store nào đang dựng loạt landing?"><span class="gemboss-assistant-thread-titlerow"><span class="gemboss-assistant-thread-title">Store nào đang dựng loạt landing?</span></span><span class="gemboss-assistant-thread-meta">3 giờ trước</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Hôm qua</div><div class="gemboss-assistant-thread"><button type="button" class="gemboss-assistant-thread-main" title="Landing điểm cao nhất của corpus"><span class="gemboss-assistant-thread-titlerow"><span class="gemboss-assistant-thread-title">Landing điểm cao nhất của corpus</span></span><span class="gemboss-assistant-thread-meta">1 ngày trước</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div></div></aside></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="height:360px;display:flex">
|
|
294
|
+
<aside class="gemboss-assistant-rail">
|
|
295
|
+
<div class="gemboss-assistant-rail-top">
|
|
296
|
+
<button type="button" class="gemboss-assistant-newchat" title="Phiên mới">
|
|
297
|
+
<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
|
|
298
|
+
<g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
|
299
|
+
<path d="M11 4H5.5A1.5 1.5 0 0 0 4 5.5v9A1.5 1.5 0 0 0 5.5 16h9a1.5 1.5 0 0 0 1.5-1.5V9">
|
|
300
|
+
</path>
|
|
301
|
+
<path d="M14.5 3.5l2 2L10 12H8v-2z">
|
|
302
|
+
</path>
|
|
303
|
+
</g>
|
|
304
|
+
</svg>
|
|
305
|
+
<span>Phiên mới</span>
|
|
306
|
+
</button>
|
|
307
|
+
<button type="button" class="gemboss-assistant-collapse" aria-label="Collapse sidebar" title="Collapse">
|
|
308
|
+
<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
|
|
309
|
+
<g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
|
310
|
+
<path d="M12 5l-5 5 5 5">
|
|
311
|
+
</path>
|
|
312
|
+
</g>
|
|
313
|
+
</svg>
|
|
314
|
+
</button>
|
|
315
|
+
</div>
|
|
316
|
+
<div class="gemboss-assistant-search gemboss-field gemboss-field--group">
|
|
317
|
+
<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
|
|
318
|
+
<g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
|
319
|
+
<circle cx="9" cy="9" r="5">
|
|
320
|
+
</circle>
|
|
321
|
+
<path d="M13 13l3.5 3.5">
|
|
322
|
+
</path>
|
|
323
|
+
</g>
|
|
324
|
+
</svg>
|
|
325
|
+
<input class="gemboss-field__bare" placeholder="Tìm phiên…" aria-label="Search history" value=""/>
|
|
326
|
+
<kbd class="gemboss-assistant-kbd">/</kbd>
|
|
327
|
+
</div>
|
|
328
|
+
<div class="gemboss-assistant-threads">
|
|
329
|
+
<div class="gemboss-assistant-group">
|
|
330
|
+
<div class="gemboss-assistant-group-label">Đã ghim</div>
|
|
331
|
+
<div class="gemboss-assistant-thread">
|
|
332
|
+
<button type="button" class="gemboss-assistant-thread-main" title="So sánh advertorial với listicle">
|
|
333
|
+
<span class="gemboss-assistant-thread-titlerow">
|
|
334
|
+
<svg viewBox="0 0 20 20" class="gemboss-assistant-pin-dot" aria-hidden="true" focusable="false">
|
|
335
|
+
<path d="M8 3.5h4l-.5 5 2.5 2.5H6l2.5-2.5z" fill="currentColor">
|
|
336
|
+
</path>
|
|
337
|
+
<path d="M10 11v5.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
|
|
338
|
+
</path>
|
|
339
|
+
</svg>
|
|
340
|
+
<span class="gemboss-assistant-thread-title">So sánh advertorial với listicle</span>
|
|
341
|
+
</span>
|
|
342
|
+
<span class="gemboss-assistant-thread-meta">20/8/2026</span>
|
|
343
|
+
</button>
|
|
344
|
+
<div class="gemboss-assistant-thread-actions">
|
|
345
|
+
<button type="button" class="gemboss-assistant-thread-act" aria-label="Options">
|
|
346
|
+
<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
|
|
347
|
+
<g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
|
348
|
+
<circle cx="5" cy="10" r=".8">
|
|
349
|
+
</circle>
|
|
350
|
+
<circle cx="10" cy="10" r=".8">
|
|
351
|
+
</circle>
|
|
352
|
+
<circle cx="15" cy="10" r=".8">
|
|
353
|
+
</circle>
|
|
354
|
+
</g>
|
|
355
|
+
</svg>
|
|
356
|
+
</button>
|
|
357
|
+
</div>
|
|
358
|
+
</div>
|
|
359
|
+
</div>
|
|
360
|
+
<div class="gemboss-assistant-group">
|
|
361
|
+
<div class="gemboss-assistant-group-label">Hôm nay</div>
|
|
362
|
+
<div class="gemboss-assistant-thread active">
|
|
363
|
+
<button type="button" class="gemboss-assistant-thread-main" title="Store nào đang dựng loạt landing?">
|
|
364
|
+
<span class="gemboss-assistant-thread-titlerow">
|
|
365
|
+
<span class="gemboss-assistant-thread-title">Store nào đang dựng loạt landing?</span>
|
|
366
|
+
</span>
|
|
367
|
+
<span class="gemboss-assistant-thread-meta">3 giờ trước</span>
|
|
368
|
+
</button>
|
|
369
|
+
<div class="gemboss-assistant-thread-actions">
|
|
370
|
+
<button type="button" class="gemboss-assistant-thread-act" aria-label="Options">
|
|
371
|
+
<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
|
|
372
|
+
<g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
|
373
|
+
<circle cx="5" cy="10" r=".8">
|
|
374
|
+
</circle>
|
|
375
|
+
<circle cx="10" cy="10" r=".8">
|
|
376
|
+
</circle>
|
|
377
|
+
<circle cx="15" cy="10" r=".8">
|
|
378
|
+
</circle>
|
|
379
|
+
</g>
|
|
380
|
+
</svg>
|
|
381
|
+
</button>
|
|
382
|
+
</div>
|
|
383
|
+
</div>
|
|
384
|
+
</div>
|
|
385
|
+
<div class="gemboss-assistant-group">
|
|
386
|
+
<div class="gemboss-assistant-group-label">Hôm qua</div>
|
|
387
|
+
<div class="gemboss-assistant-thread">
|
|
388
|
+
<button type="button" class="gemboss-assistant-thread-main" title="Landing điểm cao nhất của corpus">
|
|
389
|
+
<span class="gemboss-assistant-thread-titlerow">
|
|
390
|
+
<span class="gemboss-assistant-thread-title">Landing điểm cao nhất của corpus</span>
|
|
391
|
+
</span>
|
|
392
|
+
<span class="gemboss-assistant-thread-meta">1 ngày trước</span>
|
|
393
|
+
</button>
|
|
394
|
+
<div class="gemboss-assistant-thread-actions">
|
|
395
|
+
<button type="button" class="gemboss-assistant-thread-act" aria-label="Options">
|
|
396
|
+
<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
|
|
397
|
+
<g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
|
398
|
+
<circle cx="5" cy="10" r=".8">
|
|
399
|
+
</circle>
|
|
400
|
+
<circle cx="10" cy="10" r=".8">
|
|
401
|
+
</circle>
|
|
402
|
+
<circle cx="15" cy="10" r=".8">
|
|
403
|
+
</circle>
|
|
404
|
+
</g>
|
|
405
|
+
</svg>
|
|
406
|
+
</button>
|
|
407
|
+
</div>
|
|
408
|
+
</div>
|
|
409
|
+
</div>
|
|
410
|
+
</div>
|
|
411
|
+
</aside>
|
|
412
|
+
</div></code></pre></details></figure></section>
|
|
413
|
+
<section id="icons"><h2>Icon</h2><p>Bộ icon GemBoss: 39 icon, lưới 20px, nét 1.5. <code>fill="none"</code> nằm trên <code><g></code>, không trên <code><svg></code>.</p><div class="cat-icons"><div class="gnav-ico cat-icon" title="home"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 9 10 3.5 16.5 9"></path><path d="M5 7.8v8.7h10V7.8"></path><path d="M8.5 16.5v-4h3v4"></path></g></svg><code>home</code></div><div class="gnav-ico cat-icon" title="dashboard"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="6" height="6" rx="1.3"></rect><rect x="11" y="3" width="6" height="6" rx="1.3"></rect><rect x="3" y="11" width="6" height="6" rx="1.3"></rect><rect x="11" y="11" width="6" height="6" rx="1.3"></rect></g></svg><code>dashboard</code></div><div class="gnav-ico cat-icon" title="board"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg><code>board</code></div><div class="gnav-ico cat-icon" title="layout"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg><code>layout</code></div><div class="gnav-ico cat-icon" title="layers"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3 17 6.8 10 10.6 3 6.8z"></path><path d="M3 10.1l7 3.8 7-3.8"></path><path d="M3 13.4l7 3.8 7-3.8"></path></g></svg><code>layers</code></div><div class="gnav-ico cat-icon" title="document"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 2.8h6.8l3.2 3.2v11.2H5z"></path><path d="M11.8 2.8V6H15M7.5 10h5M7.5 13h5"></path></g></svg><code>document</code></div><div class="gnav-ico cat-icon" title="article"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.5"></rect><path d="M6 7h8M6 10h8M6 13h5"></path></g></svg><code>article</code></div><div class="gnav-ico cat-icon" title="page"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="3.5" width="15" height="13" rx="2"></rect><path d="M2.5 7.5h15M6 11h8M6 13.5h5"></path></g></svg><code>page</code></div><div class="gnav-ico cat-icon" title="image"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.8"></rect><circle cx="7.3" cy="7.8" r="1.3"></circle><path d="M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6"></path></g></svg><code>image</code></div><div class="gnav-ico cat-icon" title="folder"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.8 5.3c0-.8.6-1.3 1.3-1.3h3.4l1.8 2h6.6c.8 0 1.3.6 1.3 1.3v7.7c0 .8-.6 1.3-1.3 1.3H4.1c-.8 0-1.3-.6-1.3-1.3z"></path></g></svg><code>folder</code></div><div class="gnav-ico cat-icon" title="list"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5h9M8 10h9M8 15h9"></path><circle cx="4" cy="5" r=".9"></circle><circle cx="4" cy="10" r=".9"></circle><circle cx="4" cy="15" r=".9"></circle></g></svg><code>list</code></div><div class="gnav-ico cat-icon" title="activity"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 10h3l2-5 3 10 2-5h5"></path></g></svg><code>activity</code></div><div class="gnav-ico cat-icon" title="chart"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 16.5h14"></path><rect x="4.5" y="9" width="2.8" height="5.5" rx=".7"></rect><rect x="8.6" y="5" width="2.8" height="9.5" rx=".7"></rect><rect x="12.7" y="11" width="2.8" height="3.5" rx=".7"></rect></g></svg><code>chart</code></div><div class="gnav-ico cat-icon" title="radar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><circle cx="10" cy="10" r="3.5"></circle><path d="M10 10l5-5"></path></g></svg><code>radar</code></div><div class="gnav-ico cat-icon" title="map"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="14" height="14" rx="2"></rect><path d="M3 7.7h14M3 12.3h14M7.7 3v14M12.3 3v14"></path></g></svg><code>map</code></div><div class="gnav-ico cat-icon" title="globe"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M3 10h14M10 3c2 2 2.8 4.3 2.8 7s-.8 5-2.8 7c-2-2-2.8-4.3-2.8-7s.8-5 2.8-7z"></path></g></svg><code>globe</code></div><div class="gnav-ico cat-icon" title="megaphone"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8v4h3l6 4V4L6 8H3z"></path><path d="M15 7.5a3.5 3.5 0 0 1 0 5"></path></g></svg><code>megaphone</code></div><div class="gnav-ico cat-icon" title="star"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2.8l2.2 4.5 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5L2.8 8l5-.7z"></path></g></svg><code>star</code></div><div class="gnav-ico cat-icon" title="eye"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1.8 10S4.7 4.8 10 4.8 18.2 10 18.2 10 15.3 15.2 10 15.2 1.8 10 1.8 10z"></path><circle cx="10" cy="10" r="2.5"></circle></g></svg><code>eye</code></div><div class="gnav-ico cat-icon" title="inbox"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l2-7h10l2 7v5H3z"></path><path d="M3 11h4l1 2h4l1-2h4"></path></g></svg><code>inbox</code></div><div class="gnav-ico cat-icon" title="bell"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13.5V9a5 5 0 0 1 10 0v4.5l1.3 1.5H3.7z"></path><path d="M8.3 17.2a1.9 1.9 0 0 0 3.4 0"></path></g></svg><code>bell</code></div><div class="gnav-ico cat-icon" title="chat"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path></g></svg><code>chat</code></div><div class="gnav-ico cat-icon" title="money"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M12 7.6c-.5-.7-1.2-1-2-1-1.1 0-2 .7-2 1.6 0 2.1 4 1.2 4 3.4 0 .9-.9 1.6-2 1.6-.8 0-1.6-.3-2.1-1M10 5v1.6M10 13.2V15"></path></g></svg><code>money</code></div><div class="gnav-ico cat-icon" title="store"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.2 7.5 4.5 3.5h11l1.3 4"></path><path d="M3.2 7.5c0 1.3 1 2.2 2.3 2.2s2.2-1 2.2-2.2c0 1.3 1 2.2 2.3 2.2s2.3-1 2.3-2.2c0 1.3.9 2.2 2.2 2.2s2.3-.9 2.3-2.2"></path><path d="M4.5 9.5v7h11v-7M8.5 16.5v-3.5h3v3.5"></path></g></svg><code>store</code></div><div class="gnav-ico cat-icon" title="user"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><code>user</code></div><div class="gnav-ico cat-icon" title="users"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><code>users</code></div><div class="gnav-ico cat-icon" title="calendar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="14" height="12.5" rx="1.8"></rect><path d="M3 8.5h14M7 3v3M13 3v3"></path></g></svg><code>calendar</code></div><div class="gnav-ico cat-icon" title="clock"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 6v4l2.8 1.8"></path></g></svg><code>clock</code></div><div class="gnav-ico cat-icon" title="search"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg><code>search</code></div><div class="gnav-ico cat-icon" title="link"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.6 11.4a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1"></path><path d="M11.4 8.6a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1"></path></g></svg><code>link</code></div><div class="gnav-ico cat-icon" title="sliders"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h14M3 10h14M3 15h14"></path><circle cx="7" cy="5" r="1.6"></circle><circle cx="13" cy="10" r="1.6"></circle><circle cx="9" cy="15" r="1.6"></circle></g></svg><code>sliders</code></div><div class="gnav-ico cat-icon" title="settings"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.52 9.08 17.15 9.15 17.15 10.85 15.52 10.92 14.56 13.26 15.66 14.45 14.45 15.66 13.26 14.56 10.92 15.52 10.85 17.15 9.15 17.15 9.08 15.52 6.74 14.56 5.55 15.66 4.34 14.45 5.44 13.26 4.48 10.92 2.85 10.85 2.85 9.15 4.48 9.08 5.44 6.74 4.34 5.55 5.55 4.34 6.74 5.44 9.08 4.48 9.15 2.85 10.85 2.85 10.92 4.48 13.26 5.44 14.45 4.34 15.66 5.55 14.56 6.74Z"></path><circle cx="10" cy="10" r="2.4"></circle></g></svg><code>settings</code></div><div class="gnav-ico cat-icon" title="alert"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.2 17.3 16H2.7z"></path><path d="M10 8.2v3.6M10 13.9v.1"></path></g></svg><code>alert</code></div><div class="gnav-ico cat-icon" title="info"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 9v4.5M10 6.4v.1"></path></g></svg><code>info</code></div><div class="gnav-ico cat-icon" title="check"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10.5 8 14.5 16 5.5"></path></g></svg><code>check</code></div><div class="gnav-ico cat-icon" title="plus"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg><code>plus</code></div><div class="gnav-ico cat-icon" title="close"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg><code>close</code></div><div class="gnav-ico cat-icon" title="utensils"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v5a2 2 0 0 0 4 0V3M8 3v14"></path><path d="M15 3c-1.6 1.4-2.5 3.6-2.5 6.5H15V17"></path></g></svg><code>utensils</code></div><div class="gnav-ico cat-icon" title="signOut"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5H4v13h4M12.5 6.5 16 10l-3.5 3.5M16 10H8"></path></g></svg><code>signOut</code></div></div><figure class="cat-demo"><figcaption>Một icon (markup)</figcaption><div class="cat-live"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></div><details class="cat-code"><summary>Markup</summary><pre><code><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
414
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
415
|
+
<rect x="3" y="3.5" width="4" height="13" rx="1.2">
|
|
416
|
+
</rect>
|
|
417
|
+
<rect x="8" y="3.5" width="4" height="9" rx="1.2">
|
|
418
|
+
</rect>
|
|
419
|
+
<rect x="13" y="3.5" width="4" height="6" rx="1.2">
|
|
420
|
+
</rect>
|
|
421
|
+
</g>
|
|
422
|
+
</svg></code></pre></details></figure></section>
|
|
423
|
+
</main></div></body></html>
|