@gemboss/ui 0.21.0 → 0.25.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/CHANGELOG.md +150 -0
- package/README.md +177 -6
- package/catalog/editor.html +426 -10
- package/catalog/index.html +184 -32
- package/gemboss-ui.css +3 -3
- package/package.json +11 -3
- package/parts/components.css +5 -0
- package/parts/core.css +5 -0
- package/parts/shell.css +5 -0
- package/src/app-shell.css +1 -1
- package/src/assistant/engine.tsx +607 -0
- package/src/assistant/host.tsx +1 -0
- package/src/assistant/index.ts +1 -0
- package/src/assistant-engine.css +1 -0
- package/src/auth.tsx +1 -0
- package/src/collections.tsx +1 -0
- package/src/dialog.tsx +3 -135
- package/src/editor/controls.tsx +1 -0
- package/src/editor/frame.tsx +1 -0
- package/src/editor/index.ts +9 -0
- package/src/editor/layers.tsx +136 -0
- package/src/editor/panel.tsx +1 -0
- package/src/editor/panes.tsx +4 -3
- package/src/editor/sortable.tsx +79 -0
- package/src/editor/tree.tsx +61 -0
- package/src/editor-layers-plain.js +1 -0
- package/src/editor.css +1 -1
- package/src/index-table.tsx +1 -0
- package/src/index.ts +4 -2
- package/src/kit-plain.css +1 -1
- package/src/launcher.tsx +1 -0
- package/src/menu-layer.ts +9 -2
- package/src/portal.tsx +1 -0
- package/src/reactions.tsx +1 -0
- package/src/resource-list-select.tsx +1 -0
- package/src/search-dialog.tsx +146 -0
- package/src/selection.tsx +1 -0
- package/src/theme-script.ts +10 -0
- package/src/theme.tsx +5 -5
package/catalog/index.html
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><style>
|
|
2
|
+
<title>@gemboss/ui catalog</title><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><style>
|
|
3
3
|
body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text);font-family:var(--gemboss-font-sans)}
|
|
4
4
|
.cat{display:grid;grid-template-columns:220px minmax(0,1fr);max-width:1180px;margin:0 auto;gap:32px;padding:32px 24px}
|
|
5
5
|
.cat-nav{position:sticky;top:24px;align-self:start;display:flex;flex-direction:column;gap:2px}
|
|
@@ -26,8 +26,8 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
26
26
|
|
|
27
27
|
@media (max-width:760px){.cat{grid-template-columns:1fr;padding:16px}.cat-nav{position:static;flex-direction:row;flex-wrap:wrap}}
|
|
28
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="#report">Báo cáo</a><a href="#collections">Bảng, list, lưới, board</a><a href="#resizer">Thanh kéo giữa hai cột</a><a href="#modal">Hộp thoại, toast, menu (JS thuần)</a><a href="#shell">Khung app</a><a href="#nav">Chờ điều hướng</a><a href="#page">Bề rộng nội dung</a><a href="#portal">Cổng công khai: tab trên topbar, tìm kiếm, sáng / tối, người dẫn đầu</a><a href="#auth">Đăng nhập</a><a href="#chat">Thân chat</a><a href="#reactions">Reactions</a><a href="#assistant">Trợ lý: cột phiên</a><a href="#icons">Icon</a><a href="#editor">Editor</a></nav>
|
|
30
|
-
<main><header class="cat-head"><h1>@gemboss/ui 0.
|
|
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="#report">Báo cáo</a><a href="#collections">Bảng, list, lưới, board</a><a href="#resizer">Thanh kéo giữa hai cột</a><a href="#modal">Hộp thoại, toast, menu (JS thuần)</a><a href="#shell">Khung app</a><a href="#nav">Chờ điều hướng</a><a href="#page">Bề rộng nội dung</a><a href="#portal">Cổng công khai: tab trên topbar, tìm kiếm, sáng / tối, người dẫn đầu</a><a href="#auth">Đăng nhập</a><a href="#chat">Thân chat</a><a href="#reactions">Reactions</a><a href="#assistant-engine">Trợ lý: chọn engine</a><a href="#assistant">Trợ lý: cột phiên</a><a href="#icons">Icon</a><a href="#editor">Editor</a></nav>
|
|
30
|
+
<main><header class="cat-head"><h1>@gemboss/ui 0.25.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>884d1aacfac5</code>.</p></header>
|
|
31
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
32
|
<section id="buttons"><h2>Nút</h2><p>Một lớp <code>ui-btn</code>, ba biến thể, tông đỏ, một cỡ nhỏ. Cao 28px dưới chuột như Button của Polaris (ô nhập và ô chọn 32, như TextField), 44px dưới ngón tay và ở khổ điện thoại, cỡ nhỏ cũng vậy. 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
33
|
<button type="button" class="ui-btn">Lưu nháp</button>
|
|
@@ -743,7 +743,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
743
743
|
</tbody>
|
|
744
744
|
</table>
|
|
745
745
|
</div>
|
|
746
|
-
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>1 · Data table ở 390px: vẫn là bảng, cuộn ngang, cột đầu dính</figcaption><div class="cat-wide"><iframe title="1 · Data table ở 390px: vẫn là bảng, cuộn ngang, cột đầu dính" style="height:300px;width:390px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div style="padding:16px"><div class="ui-table-wrap"><table class="ui-table ui-table--sticky-first"><caption class="ui-sr-only">Pages captured per day</caption><thead><tr><th scope="col">Store</th><th scope="col" class="is-num">Mon</th><th scope="col" class="is-num">Tue</th><th scope="col" class="is-num">Wed</th><th scope="col" class="is-num">Thu</th><th scope="col" class="is-num">Fri</th><th scope="col" class="is-num">Sat</th><th scope="col" class="is-num">Sun</th><th scope="col" class="is-num">Week</th><th scope="col" class="is-num">Prev</th><th scope="col" class="is-num">Δ</th></tr></thead><tbody><tr><th scope="row" class="ui-table__rowhead">glowrecipe.com</th><td class="is-num">102</td><td class="is-num">136</td><td class="is-num">170</td><td class="is-num">204</td><td class="is-num">238</td><td class="is-num">272</td><td class="is-num">306</td><td class="is-num">340</td><td class="is-num">374</td><td class="is-num">408</td></tr><tr><th scope="row" class="ui-table__rowhead">fluke.com</th><td class="is-num">153</td><td class="is-num">204</td><td class="is-num">255</td><td class="is-num">306</td><td class="is-num">357</td><td class="is-num">408</td><td class="is-num">459</td><td class="is-num">510</td><td class="is-num">561</td><td class="is-num">612</td></tr><tr><th scope="row" class="ui-table__rowhead">ruggable.com</th><td class="is-num">204</td><td class="is-num">272</td><td class="is-num">340</td><td class="is-num">408</td><td class="is-num">476</td><td class="is-num">544</td><td class="is-num">612</td><td class="is-num">680</td><td class="is-num">748</td><td class="is-num">816</td></tr><tr><th scope="row" class="ui-table__rowhead">allbirds.com</th><td class="is-num">255</td><td class="is-num">340</td><td class="is-num">425</td><td class="is-num">510</td><td class="is-num">595</td><td class="is-num">680</td><td class="is-num">765</td><td class="is-num">850</td><td class="is-num">935</td><td class="is-num">1020</td></tr></tbody></table></div></div><script src="../src/kit-plain.js"></script></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
746
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>1 · Data table ở 390px: vẫn là bảng, cuộn ngang, cột đầu dính</figcaption><div class="cat-wide"><iframe title="1 · Data table ở 390px: vẫn là bảng, cuộn ngang, cột đầu dính" style="height:300px;width:390px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"></head><body><div style="padding:16px"><div class="ui-table-wrap"><table class="ui-table ui-table--sticky-first"><caption class="ui-sr-only">Pages captured per day</caption><thead><tr><th scope="col">Store</th><th scope="col" class="is-num">Mon</th><th scope="col" class="is-num">Tue</th><th scope="col" class="is-num">Wed</th><th scope="col" class="is-num">Thu</th><th scope="col" class="is-num">Fri</th><th scope="col" class="is-num">Sat</th><th scope="col" class="is-num">Sun</th><th scope="col" class="is-num">Week</th><th scope="col" class="is-num">Prev</th><th scope="col" class="is-num">Δ</th></tr></thead><tbody><tr><th scope="row" class="ui-table__rowhead">glowrecipe.com</th><td class="is-num">102</td><td class="is-num">136</td><td class="is-num">170</td><td class="is-num">204</td><td class="is-num">238</td><td class="is-num">272</td><td class="is-num">306</td><td class="is-num">340</td><td class="is-num">374</td><td class="is-num">408</td></tr><tr><th scope="row" class="ui-table__rowhead">fluke.com</th><td class="is-num">153</td><td class="is-num">204</td><td class="is-num">255</td><td class="is-num">306</td><td class="is-num">357</td><td class="is-num">408</td><td class="is-num">459</td><td class="is-num">510</td><td class="is-num">561</td><td class="is-num">612</td></tr><tr><th scope="row" class="ui-table__rowhead">ruggable.com</th><td class="is-num">204</td><td class="is-num">272</td><td class="is-num">340</td><td class="is-num">408</td><td class="is-num">476</td><td class="is-num">544</td><td class="is-num">612</td><td class="is-num">680</td><td class="is-num">748</td><td class="is-num">816</td></tr><tr><th scope="row" class="ui-table__rowhead">allbirds.com</th><td class="is-num">255</td><td class="is-num">340</td><td class="is-num">425</td><td class="is-num">510</td><td class="is-num">595</td><td class="is-num">680</td><td class="is-num">765</td><td class="is-num">850</td><td class="is-num">935</td><td class="is-num">1020</td></tr></tbody></table></div></div><script src="../src/kit-plain.js"></script></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
747
747
|
<div class="ui-table-wrap">
|
|
748
748
|
<table class="ui-table ui-table--sticky-first">
|
|
749
749
|
<caption class="ui-sr-only">Pages captured per day</caption>
|
|
@@ -875,7 +875,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
875
875
|
</tr>
|
|
876
876
|
</tbody>
|
|
877
877
|
</table>
|
|
878
|
-
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>1 · Data table nhiều dòng ở 390px: vẫn cuộn ngang, cột đầu dính và xuống dòng</figcaption><div class="cat-wide"><iframe title="1 · Data table nhiều dòng ở 390px: vẫn cuộn ngang, cột đầu dính và xuống dòng" style="height:320px;width:390px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div style="padding:16px"><div class="ui-table-wrap"><table class="ui-table ui-table--sticky-first"><caption class="ui-sr-only">Jobs</caption><thead><tr><th scope="col">Job</th><th scope="col">State</th><th scope="col">Source</th><th scope="col">Last run</th><th scope="col" class="is-num">Runs</th></tr></thead><tbody><tr><th scope="row" class="ui-table__rowhead"><a href="#job0">Weekly integrations crawl</a><span class="ui-sub">PageFly, GemPages, Replo, Shogun, EComposer and 14 more partner page builders · every Monday 08:00 UTC</span></th><td><span class="ui-tag ui-tag--success">OK</span></td><td><a href="#src0">sitemap</a></td><td>2h ago</td><td class="is-num">1,204</td></tr><tr><th scope="row" class="ui-table__rowhead"><a href="#job1">StoreLeads refresh</a><span class="ui-sub">Apps with a GemPages mention, ranked by install growth · daily</span></th><td><span class="ui-tag ui-tag--warning">Late</span></td><td><a href="#src1">api</a></td><td>26h ago</td><td class="is-num">311</td></tr><tr><th scope="row" class="ui-table__rowhead"><a href="#job2">LinkedIn people at Shopify</a><span class="ui-sub">367 profiles · Find people on the organization page</span></th><td><span class="ui-tag ui-tag--success">OK</span></td><td><a href="#src2">apify</a></td><td>3d ago</td><td class="is-num">18</td></tr></tbody></table></div></div><script src="../src/kit-plain.js"></script></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
878
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>1 · Data table nhiều dòng ở 390px: vẫn cuộn ngang, cột đầu dính và xuống dòng</figcaption><div class="cat-wide"><iframe title="1 · Data table nhiều dòng ở 390px: vẫn cuộn ngang, cột đầu dính và xuống dòng" style="height:320px;width:390px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"></head><body><div style="padding:16px"><div class="ui-table-wrap"><table class="ui-table ui-table--sticky-first"><caption class="ui-sr-only">Jobs</caption><thead><tr><th scope="col">Job</th><th scope="col">State</th><th scope="col">Source</th><th scope="col">Last run</th><th scope="col" class="is-num">Runs</th></tr></thead><tbody><tr><th scope="row" class="ui-table__rowhead"><a href="#job0">Weekly integrations crawl</a><span class="ui-sub">PageFly, GemPages, Replo, Shogun, EComposer and 14 more partner page builders · every Monday 08:00 UTC</span></th><td><span class="ui-tag ui-tag--success">OK</span></td><td><a href="#src0">sitemap</a></td><td>2h ago</td><td class="is-num">1,204</td></tr><tr><th scope="row" class="ui-table__rowhead"><a href="#job1">StoreLeads refresh</a><span class="ui-sub">Apps with a GemPages mention, ranked by install growth · daily</span></th><td><span class="ui-tag ui-tag--warning">Late</span></td><td><a href="#src1">api</a></td><td>26h ago</td><td class="is-num">311</td></tr><tr><th scope="row" class="ui-table__rowhead"><a href="#job2">LinkedIn people at Shopify</a><span class="ui-sub">367 profiles · Find people on the organization page</span></th><td><span class="ui-tag ui-tag--success">OK</span></td><td><a href="#src2">apify</a></td><td>3d ago</td><td class="is-num">18</td></tr></tbody></table></div></div><script src="../src/kit-plain.js"></script></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
879
879
|
<div class="ui-table-wrap">
|
|
880
880
|
<table class="ui-table ui-table--sticky-first">
|
|
881
881
|
<caption class="ui-sr-only">Jobs</caption>
|
|
@@ -1301,7 +1301,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1301
1301
|
</tbody>
|
|
1302
1302
|
</table>
|
|
1303
1303
|
</div>
|
|
1304
|
-
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>2 · Index table ở 390px: ĐỔI thành list (container ≤ 768): tiêu đề, dòng phụ, các ô còn lại trên một dòng chữ nhỏ, checkbox + hành động giữ chỗ</figcaption><div class="cat-wide"><iframe title="2 · Index table ở 390px: ĐỔI thành list (container ≤ 768): tiêu đề, dòng phụ, các ô còn lại trên một dòng chữ nhỏ, checkbox + hành động giữ chỗ" style="height:460px;width:390px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div style="padding:16px"><div class="ui-index"><div class="ui-index__sortbar" role="group" aria-label="Sort"><span aria-hidden="true">Sort</span><a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a><a class="ui-chip" href="#collections">Score</a></div><div class="ui-bulkbar" hidden><label class="ui-table__checkbox"><input type="checkbox" data-gb-select-all aria-label="Select all"></label><span class="ui-bulkbar__count" data-gb-count="{n} selected" aria-live="polite">0 selected</span><span class="ui-bulkbar__actions"><button type="button" class="ui-btn ui-btn--sm">Add to outreach</button><button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Archive</button></span></div><div class="ui-table-wrap"><table class="ui-table ui-table--index" data-gb-sort="client"><caption class="ui-sr-only">Suppliers</caption><thead><tr><th class="ui-table__check" scope="col"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select-all aria-label="Select all"></label></th><th class="ui-table__primary" scope="col" aria-sort="ascending"><button type="button" class="ui-table__sort">Supplier</button></th><th scope="col">Location</th><th scope="col">Verdict</th><th scope="col" class="is-num" aria-sort="none"><button type="button" class="ui-table__sort">Score</button></th><th scope="col">Ads</th><th class="ui-table__actions" scope="col"><span class="ui-sr-only">Actions</span></th></tr></thead><tbody><tr data-href="#c1"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c1" aria-label="Select Guangzhou Yanmei Cosmetics"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a><span class="ui-sub">OEM · Skincare</span></td><td data-label="In">Guangzhou</td><td><span class="ui-tag ui-tag--success">Likely factory</span></td><td class="is-num" data-label="Score" data-sort-value="86">86</td><td data-condensed="hide">TikTok</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Guangzhou Yanmei Cosmetics"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr><tr data-href="#c2"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c2" aria-label="Select Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c2" title="Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)</a><span class="ui-sub">ODM · Haircare</span></td><td data-label="In">Shantou</td><td><span class="ui-tag ui-tag--warning">Maybe</span></td><td class="is-num" data-label="Score" data-sort-value="64">64</td><td data-condensed="hide">Meta</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr><tr data-href="#c3"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c3" aria-label="Select Yiwu Bloom Packaging"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c3" title="Yiwu Bloom Packaging">Yiwu Bloom Packaging</a><span class="ui-sub">Trader · Packaging</span></td><td data-label="In">Yiwu</td><td><span class="ui-tag ui-tag--danger">Trader</span></td><td class="is-num" data-label="Score" data-sort-value="31">31</td><td data-condensed="hide">—</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Yiwu Bloom Packaging"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr><tr data-href="#c4"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c4" aria-label="Select Shanghai Kerui Labs"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c4" title="Shanghai Kerui Labs">Shanghai Kerui Labs</a><span class="ui-sub">OEM · Serums</span></td><td data-label="In">Shanghai</td><td><span class="ui-tag ui-tag--success">Likely factory</span></td><td class="is-num" data-label="Score" data-sort-value="91">91</td><td data-condensed="hide">Google</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Shanghai Kerui Labs"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr></tbody></table></div></div></div><script src="../src/kit-plain.js"></script></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
1304
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>2 · Index table ở 390px: ĐỔI thành list (container ≤ 768): tiêu đề, dòng phụ, các ô còn lại trên một dòng chữ nhỏ, checkbox + hành động giữ chỗ</figcaption><div class="cat-wide"><iframe title="2 · Index table ở 390px: ĐỔI thành list (container ≤ 768): tiêu đề, dòng phụ, các ô còn lại trên một dòng chữ nhỏ, checkbox + hành động giữ chỗ" style="height:460px;width:390px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"></head><body><div style="padding:16px"><div class="ui-index"><div class="ui-index__sortbar" role="group" aria-label="Sort"><span aria-hidden="true">Sort</span><a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a><a class="ui-chip" href="#collections">Score</a></div><div class="ui-bulkbar" hidden><label class="ui-table__checkbox"><input type="checkbox" data-gb-select-all aria-label="Select all"></label><span class="ui-bulkbar__count" data-gb-count="{n} selected" aria-live="polite">0 selected</span><span class="ui-bulkbar__actions"><button type="button" class="ui-btn ui-btn--sm">Add to outreach</button><button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Archive</button></span></div><div class="ui-table-wrap"><table class="ui-table ui-table--index" data-gb-sort="client"><caption class="ui-sr-only">Suppliers</caption><thead><tr><th class="ui-table__check" scope="col"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select-all aria-label="Select all"></label></th><th class="ui-table__primary" scope="col" aria-sort="ascending"><button type="button" class="ui-table__sort">Supplier</button></th><th scope="col">Location</th><th scope="col">Verdict</th><th scope="col" class="is-num" aria-sort="none"><button type="button" class="ui-table__sort">Score</button></th><th scope="col">Ads</th><th class="ui-table__actions" scope="col"><span class="ui-sr-only">Actions</span></th></tr></thead><tbody><tr data-href="#c1"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c1" aria-label="Select Guangzhou Yanmei Cosmetics"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a><span class="ui-sub">OEM · Skincare</span></td><td data-label="In">Guangzhou</td><td><span class="ui-tag ui-tag--success">Likely factory</span></td><td class="is-num" data-label="Score" data-sort-value="86">86</td><td data-condensed="hide">TikTok</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Guangzhou Yanmei Cosmetics"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr><tr data-href="#c2"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c2" aria-label="Select Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c2" title="Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)</a><span class="ui-sub">ODM · Haircare</span></td><td data-label="In">Shantou</td><td><span class="ui-tag ui-tag--warning">Maybe</span></td><td class="is-num" data-label="Score" data-sort-value="64">64</td><td data-condensed="hide">Meta</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr><tr data-href="#c3"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c3" aria-label="Select Yiwu Bloom Packaging"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c3" title="Yiwu Bloom Packaging">Yiwu Bloom Packaging</a><span class="ui-sub">Trader · Packaging</span></td><td data-label="In">Yiwu</td><td><span class="ui-tag ui-tag--danger">Trader</span></td><td class="is-num" data-label="Score" data-sort-value="31">31</td><td data-condensed="hide">—</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Yiwu Bloom Packaging"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr><tr data-href="#c4"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c4" aria-label="Select Shanghai Kerui Labs"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c4" title="Shanghai Kerui Labs">Shanghai Kerui Labs</a><span class="ui-sub">OEM · Serums</span></td><td data-label="In">Shanghai</td><td><span class="ui-tag ui-tag--success">Likely factory</span></td><td class="is-num" data-label="Score" data-sort-value="91">91</td><td data-condensed="hide">Google</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Shanghai Kerui Labs"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr></tbody></table></div></div></div><script src="../src/kit-plain.js"></script></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
1305
1305
|
<div class="ui-index">
|
|
1306
1306
|
<div class="ui-index__sortbar" role="group" aria-label="Sort">
|
|
1307
1307
|
<span aria-hidden="true">Sort</span>
|
|
@@ -1743,7 +1743,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1743
1743
|
</div>
|
|
1744
1744
|
</li>
|
|
1745
1745
|
</ul>
|
|
1746
|
-
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>3 · Resource list chọn được ở 390px: ô chọn 44 (điều khiển dưới ngón tay) kéo vào lề hàng, ảnh không bị đẩy</figcaption><div class="cat-wide"><iframe title="3 · Resource list chọn được ở 390px: ô chọn 44 (điều khiển dưới ngón tay) kéo vào lề hàng, ảnh không bị đẩy" style="height:420px;width:390px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div style="padding:16px"><div class="ui-resource"><div class="ui-bulkbar"><label class="ui-table__checkbox"><input type="checkbox" aria-label="Select all"/></label><span class="ui-bulkbar__count" aria-live="polite">0 selected</span><span class="ui-bulkbar__actions"><button type="button" class="ui-btn ui-btn--sm" disabled="">Shortlist</button><button type="button" class="ui-btn ui-btn--sm" disabled="">Compare</button><button type="button" class="ui-btn ui-btn--sm ui-btn--critical" disabled="">Not fit</button></span></div><ul class="ui-list" aria-label="Candidates"><li class="ui-list__item"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Lily Tran"/></label><span class="gb-avatar gb-avatar--32" data-tone="1" aria-hidden="true">LT</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s0">Lily Tran</a><p class="ui-list__sub">Head of CRO at Ruggable</p><p class="ui-list__meta">Replied 2 days ago</p><div class="ui-list__badges"><span class="ui-badge">CRO</span><span class="ui-badge">Plus</span></div></div><div class="ui-list__aside"><b>82</b></div></li><li class="ui-list__item"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Marcus Bell"/></label><span class="gb-avatar gb-avatar--32" data-tone="0" aria-hidden="true">MB</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s1">Marcus Bell</a><p class="ui-list__sub">Founder, Bell &amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.</p><p class="ui-list__meta">New</p><div class="ui-list__badges"><span class="ui-badge">Media buyer</span></div></div><div class="ui-list__aside"><b>77</b></div></li><li class="ui-list__item"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Aiko Sato"/></label><span class="gb-avatar gb-avatar--32" data-tone="5" aria-hidden="true">AS</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s2">Aiko Sato</a><p class="ui-list__sub">Shopify app founder (reviews)</p><p class="ui-list__meta">Waiting on intro</p><div class="ui-list__badges"><span class="ui-badge">App</span><span class="ui-badge">Japan</span><span class="ui-badge">Plus</span><span class="ui-badge">+1</span></div></div><div class="ui-list__aside"><b>64</b></div></li></ul></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
1746
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>3 · Resource list chọn được ở 390px: ô chọn 44 (điều khiển dưới ngón tay) kéo vào lề hàng, ảnh không bị đẩy</figcaption><div class="cat-wide"><iframe title="3 · Resource list chọn được ở 390px: ô chọn 44 (điều khiển dưới ngón tay) kéo vào lề hàng, ảnh không bị đẩy" style="height:420px;width:390px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"></head><body><div style="padding:16px"><div class="ui-resource"><div class="ui-bulkbar"><label class="ui-table__checkbox"><input type="checkbox" aria-label="Select all"/></label><span class="ui-bulkbar__count" aria-live="polite">0 selected</span><span class="ui-bulkbar__actions"><button type="button" class="ui-btn ui-btn--sm" disabled="">Shortlist</button><button type="button" class="ui-btn ui-btn--sm" disabled="">Compare</button><button type="button" class="ui-btn ui-btn--sm ui-btn--critical" disabled="">Not fit</button></span></div><ul class="ui-list" aria-label="Candidates"><li class="ui-list__item"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Lily Tran"/></label><span class="gb-avatar gb-avatar--32" data-tone="1" aria-hidden="true">LT</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s0">Lily Tran</a><p class="ui-list__sub">Head of CRO at Ruggable</p><p class="ui-list__meta">Replied 2 days ago</p><div class="ui-list__badges"><span class="ui-badge">CRO</span><span class="ui-badge">Plus</span></div></div><div class="ui-list__aside"><b>82</b></div></li><li class="ui-list__item"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Marcus Bell"/></label><span class="gb-avatar gb-avatar--32" data-tone="0" aria-hidden="true">MB</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s1">Marcus Bell</a><p class="ui-list__sub">Founder, Bell &amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.</p><p class="ui-list__meta">New</p><div class="ui-list__badges"><span class="ui-badge">Media buyer</span></div></div><div class="ui-list__aside"><b>77</b></div></li><li class="ui-list__item"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Aiko Sato"/></label><span class="gb-avatar gb-avatar--32" data-tone="5" aria-hidden="true">AS</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s2">Aiko Sato</a><p class="ui-list__sub">Shopify app founder (reviews)</p><p class="ui-list__meta">Waiting on intro</p><div class="ui-list__badges"><span class="ui-badge">App</span><span class="ui-badge">Japan</span><span class="ui-badge">Plus</span><span class="ui-badge">+1</span></div></div><div class="ui-list__aside"><b>64</b></div></li></ul></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
1747
1747
|
<div class="ui-resource">
|
|
1748
1748
|
<div class="ui-bulkbar">
|
|
1749
1749
|
<label class="ui-table__checkbox">
|
|
@@ -1820,7 +1820,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1820
1820
|
</li>
|
|
1821
1821
|
</ul>
|
|
1822
1822
|
</div>
|
|
1823
|
-
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>3 · Resource list trong khung ≤ 400 (0.15.0): thân luôn cạnh ảnh và lấy hết bề ngang còn lại; aside + hành động chung MỘT dòng dưới thân (aside trái, hành động phải); hàng không ảnh thì thân rộng hết hàng</figcaption><div class="cat-wide"><iframe title="3 · Resource list trong khung ≤ 400 (0.15.0): thân luôn cạnh ảnh và lấy hết bề ngang còn lại; aside + hành động chung MỘT dòng dưới thân (aside trái, hành động phải); hàng không ảnh thì thân rộng hết hàng" style="height:420px;width:390px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div style="padding:16px"><ul class="ui-list" aria-label="People"><li class="ui-list__item"><div class="ui-list__media"><span class="gb-avatar gb-avatar--40" data-tone="1" aria-hidden="true">LT</span></div><div class="ui-list__body"><a class="ui-list__title" href="#n1">Lily Tran</a><p class="ui-list__sub">Head of CRO at Ruggable. I help Shopify Plus brands turn traffic into revenue with landing pages, offers and A/B tests</p><p class="ui-list__meta">linkedin · cro-agency · Austin, TX · posted 2d ago</p></div><div class="ui-list__aside"><span class="ui-tag ui-tag--success">82</span></div><div class="ui-list__actions"><a href="#orig" aria-label="Open original profile" style="display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px">↗</a></div></li><li class="ui-list__item"><div class="ui-list__body"><a class="ui-list__title" href="#n2">Marcus Bell</a><p class="ui-list__sub">Founder, Bell UGC Studio · 12,400 followers</p><p class="ui-list__meta"><span>Runs the ads himself<span style="display:block;margin-top:4px">Signals: arcads · heygen · veo 3 · capcut</span></span></p><div class="ui-list__badges"><span class="ui-tag">Hands-on</span><span class="ui-tag ui-tag--success">Email verified</span></div></div><div class="ui-list__aside"><span><span class="ui-tag ui-tag--success">91</span><span class="ui-sub">Unverified</span></span></div><div class="ui-list__actions"><span><button type="button" class="ui-btn ui-btn--ghost">Evidence (3)</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More profiles">⋯</summary><div class="ui-menu__list gemboss-popover-surface"><a class="ui-menu__item" href="#x">X ↗</a></div></details></span></div></li></ul></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
1823
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>3 · Resource list trong khung ≤ 400 (0.15.0): thân luôn cạnh ảnh và lấy hết bề ngang còn lại; aside + hành động chung MỘT dòng dưới thân (aside trái, hành động phải); hàng không ảnh thì thân rộng hết hàng</figcaption><div class="cat-wide"><iframe title="3 · Resource list trong khung ≤ 400 (0.15.0): thân luôn cạnh ảnh và lấy hết bề ngang còn lại; aside + hành động chung MỘT dòng dưới thân (aside trái, hành động phải); hàng không ảnh thì thân rộng hết hàng" style="height:420px;width:390px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"></head><body><div style="padding:16px"><ul class="ui-list" aria-label="People"><li class="ui-list__item"><div class="ui-list__media"><span class="gb-avatar gb-avatar--40" data-tone="1" aria-hidden="true">LT</span></div><div class="ui-list__body"><a class="ui-list__title" href="#n1">Lily Tran</a><p class="ui-list__sub">Head of CRO at Ruggable. I help Shopify Plus brands turn traffic into revenue with landing pages, offers and A/B tests</p><p class="ui-list__meta">linkedin · cro-agency · Austin, TX · posted 2d ago</p></div><div class="ui-list__aside"><span class="ui-tag ui-tag--success">82</span></div><div class="ui-list__actions"><a href="#orig" aria-label="Open original profile" style="display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px">↗</a></div></li><li class="ui-list__item"><div class="ui-list__body"><a class="ui-list__title" href="#n2">Marcus Bell</a><p class="ui-list__sub">Founder, Bell UGC Studio · 12,400 followers</p><p class="ui-list__meta"><span>Runs the ads himself<span style="display:block;margin-top:4px">Signals: arcads · heygen · veo 3 · capcut</span></span></p><div class="ui-list__badges"><span class="ui-tag">Hands-on</span><span class="ui-tag ui-tag--success">Email verified</span></div></div><div class="ui-list__aside"><span><span class="ui-tag ui-tag--success">91</span><span class="ui-sub">Unverified</span></span></div><div class="ui-list__actions"><span><button type="button" class="ui-btn ui-btn--ghost">Evidence (3)</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More profiles">⋯</summary><div class="ui-menu__list gemboss-popover-surface"><a class="ui-menu__item" href="#x">X ↗</a></div></details></span></div></li></ul></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
1824
1824
|
<ul class="ui-list" aria-label="People">
|
|
1825
1825
|
<li class="ui-list__item">
|
|
1826
1826
|
<div class="ui-list__media">
|
|
@@ -1935,7 +1935,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1935
1935
|
<time class="ui-list__time">Yesterday</time>
|
|
1936
1936
|
</li>
|
|
1937
1937
|
</ul>
|
|
1938
|
-
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>4 · <code>--activity</code> + <code>body</code> + <code>wrap</code> (0.15.0): nhãn và chi tiết xuống dòng thay vì "…" (title không đọc được trên màn chạm), thân (<code>.ui-list__content</code>) cỡ chữ thân, không cắt</figcaption><div class="cat-wide"><iframe title="4 · <code>--activity</code> + <code>body</code> + <code>wrap</code> (0.15.0): nhãn và chi tiết xuống dòng thay vì "…" (title không đọc được trên màn chạm), thân (<code>.ui-list__content</code>) cỡ chữ thân, không cắt" style="height:360px;width:390px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div style="padding:16px"><ul class="ui-list ui-list--compact ui-list--activity ui-list--wrap" aria-label="Relationship history"><li class="ui-list__item"><span class="ui-list__dot ui-list__dot--info" aria-hidden="true"></span><div><span class="ui-list__label"><span>Intro call with <a href="#org">Ruggable</a>&#x27;s growth team</span></span><span class="ui-list__detail">by Lily Tran · with Marcus Bell and Aiko Sato</span><div class="ui-list__content"><p>They want a landing page per ad set and asked whether the agency plan covers four stores; send the pricing sheet by Friday.</p></div></div><time class="ui-list__time" dateTime="2026-10-03">Oct 3</time></li><li class="ui-list__item"><span class="ui-list__dot ui-list__dot--warning" aria-hidden="true"></span><div><span class="ui-list__label">No reply to the follow-up</span><span class="ui-list__detail">sent by Lily Tran</span></div><time class="ui-list__time">Sep 28</time></li><li class="ui-list__item"><span class="ui-list__dot ui-list__dot--success" aria-hidden="true"></span><div><span class="ui-list__label">Signed the agency plan</span><span class="ui-list__detail">4 stores · Shopify Plus</span><div class="ui-list__content"><p>Starts Monday; the first store is the Austin one.</p></div></div><time class="ui-list__time">Sep 20</time></li></ul></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
1938
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>4 · <code>--activity</code> + <code>body</code> + <code>wrap</code> (0.15.0): nhãn và chi tiết xuống dòng thay vì "…" (title không đọc được trên màn chạm), thân (<code>.ui-list__content</code>) cỡ chữ thân, không cắt</figcaption><div class="cat-wide"><iframe title="4 · <code>--activity</code> + <code>body</code> + <code>wrap</code> (0.15.0): nhãn và chi tiết xuống dòng thay vì "…" (title không đọc được trên màn chạm), thân (<code>.ui-list__content</code>) cỡ chữ thân, không cắt" style="height:360px;width:390px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"></head><body><div style="padding:16px"><ul class="ui-list ui-list--compact ui-list--activity ui-list--wrap" aria-label="Relationship history"><li class="ui-list__item"><span class="ui-list__dot ui-list__dot--info" aria-hidden="true"></span><div><span class="ui-list__label"><span>Intro call with <a href="#org">Ruggable</a>&#x27;s growth team</span></span><span class="ui-list__detail">by Lily Tran · with Marcus Bell and Aiko Sato</span><div class="ui-list__content"><p>They want a landing page per ad set and asked whether the agency plan covers four stores; send the pricing sheet by Friday.</p></div></div><time class="ui-list__time" dateTime="2026-10-03">Oct 3</time></li><li class="ui-list__item"><span class="ui-list__dot ui-list__dot--warning" aria-hidden="true"></span><div><span class="ui-list__label">No reply to the follow-up</span><span class="ui-list__detail">sent by Lily Tran</span></div><time class="ui-list__time">Sep 28</time></li><li class="ui-list__item"><span class="ui-list__dot ui-list__dot--success" aria-hidden="true"></span><div><span class="ui-list__label">Signed the agency plan</span><span class="ui-list__detail">4 stores · Shopify Plus</span><div class="ui-list__content"><p>Starts Monday; the first store is the Austin one.</p></div></div><time class="ui-list__time">Sep 20</time></li></ul></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
1939
1939
|
<ul class="ui-list ui-list--compact ui-list--activity ui-list--wrap" aria-label="Relationship history">
|
|
1940
1940
|
<li class="ui-list__item">
|
|
1941
1941
|
<span class="ui-list__dot ui-list__dot--info" aria-hidden="true">
|
|
@@ -2378,7 +2378,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
2378
2378
|
</header>
|
|
2379
2379
|
<p class="ui-board__empty">Nothing here</p>
|
|
2380
2380
|
</section>
|
|
2381
|
-
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>6 · Board ở 390px: cột 78% bề ngang, cuộn ngang có snap, không xếp chồng</figcaption><div class="cat-wide"><iframe title="6 · Board ở 390px: cột 78% bề ngang, cuộn ngang có snap, không xếp chồng" style="height:520px;width:390px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div style="padding:16px"><div class="ui-board" role="region" aria-label="Element pipeline"><section class="ui-board__col" data-col="todo" aria-labelledby="ui-board-todo"><header class="ui-board__head"><span class="ui-board__dot" aria-hidden="true"></span><span class="ui-board__name" id="ui-board-todo">To do</span><span class="ui-board__count">14</span></header><ol class="ui-board__list"><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b0">Popup variant 1</a><span class="ui-card__meta">#120 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b1">Popup variant 2</a><span class="ui-card__meta">#121 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b2">Popup variant 3</a><span class="ui-card__meta">#122 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b3">Popup variant 4</a><span class="ui-card__meta">#123 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b4">Popup variant 5</a><span class="ui-card__meta">#124 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b5">Popup variant 6</a><span class="ui-card__meta">#125 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b6">Popup variant 7</a><span class="ui-card__meta">#126 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b7">Popup variant 8</a><span class="ui-card__meta">#127 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b8">Popup variant 9</a><span class="ui-card__meta">#128 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b9">Popup variant 10</a><span class="ui-card__meta">#129 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b10">Popup variant 11</a><span class="ui-card__meta">#130 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b11">Popup variant 12</a><span class="ui-card__meta">#131 · 2 errors</span></div></article></li></ol><details class="ui-board__more"><summary class="ui-btn ui-btn--sm">Show 2 more</summary><ol class="ui-board__list"><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b12">Popup variant 13</a><span class="ui-card__meta">#132 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b13">Popup variant 14</a><span class="ui-card__meta">#133 · 2 errors</span></div></article></li></ol></details></section><section class="ui-board__col" data-col="review" aria-labelledby="ui-board-review"><header class="ui-board__head"><span class="ui-board__dot ui-board__dot--info" aria-hidden="true"></span><span class="ui-board__name" id="ui-board-review">Review</span><span class="ui-board__count">2</span></header><ol class="ui-board__list"><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b40">Countdown bar, 6 frames</a><span class="ui-card__meta">#160 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b41">Spin to win, no bait</a><span class="ui-card__meta">#161 · 2 errors</span></div></article></li></ol></section><section class="ui-board__col" data-col="done" aria-labelledby="ui-board-done"><header class="ui-board__head"><span class="ui-board__dot ui-board__dot--success" aria-hidden="true"></span><span class="ui-board__name" id="ui-board-done">Done</span><span class="ui-board__count">0</span></header><p class="ui-board__empty">Nothing here</p></section></div></div><script src="../src/kit-plain.js"></script></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
2381
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>6 · Board ở 390px: cột 78% bề ngang, cuộn ngang có snap, không xếp chồng</figcaption><div class="cat-wide"><iframe title="6 · Board ở 390px: cột 78% bề ngang, cuộn ngang có snap, không xếp chồng" style="height:520px;width:390px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"></head><body><div style="padding:16px"><div class="ui-board" role="region" aria-label="Element pipeline"><section class="ui-board__col" data-col="todo" aria-labelledby="ui-board-todo"><header class="ui-board__head"><span class="ui-board__dot" aria-hidden="true"></span><span class="ui-board__name" id="ui-board-todo">To do</span><span class="ui-board__count">14</span></header><ol class="ui-board__list"><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b0">Popup variant 1</a><span class="ui-card__meta">#120 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b1">Popup variant 2</a><span class="ui-card__meta">#121 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b2">Popup variant 3</a><span class="ui-card__meta">#122 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b3">Popup variant 4</a><span class="ui-card__meta">#123 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b4">Popup variant 5</a><span class="ui-card__meta">#124 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b5">Popup variant 6</a><span class="ui-card__meta">#125 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b6">Popup variant 7</a><span class="ui-card__meta">#126 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b7">Popup variant 8</a><span class="ui-card__meta">#127 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b8">Popup variant 9</a><span class="ui-card__meta">#128 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b9">Popup variant 10</a><span class="ui-card__meta">#129 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b10">Popup variant 11</a><span class="ui-card__meta">#130 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b11">Popup variant 12</a><span class="ui-card__meta">#131 · 2 errors</span></div></article></li></ol><details class="ui-board__more"><summary class="ui-btn ui-btn--sm">Show 2 more</summary><ol class="ui-board__list"><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b12">Popup variant 13</a><span class="ui-card__meta">#132 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b13">Popup variant 14</a><span class="ui-card__meta">#133 · 2 errors</span></div></article></li></ol></details></section><section class="ui-board__col" data-col="review" aria-labelledby="ui-board-review"><header class="ui-board__head"><span class="ui-board__dot ui-board__dot--info" aria-hidden="true"></span><span class="ui-board__name" id="ui-board-review">Review</span><span class="ui-board__count">2</span></header><ol class="ui-board__list"><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b40">Countdown bar, 6 frames</a><span class="ui-card__meta">#160 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b41">Spin to win, no bait</a><span class="ui-card__meta">#161 · 2 errors</span></div></article></li></ol></section><section class="ui-board__col" data-col="done" aria-labelledby="ui-board-done"><header class="ui-board__head"><span class="ui-board__dot ui-board__dot--success" aria-hidden="true"></span><span class="ui-board__name" id="ui-board-done">Done</span><span class="ui-board__count">0</span></header><p class="ui-board__empty">Nothing here</p></section></div></div><script src="../src/kit-plain.js"></script></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
2382
2382
|
<div class="ui-board" role="region" aria-label="Element pipeline">
|
|
2383
2383
|
<section class="ui-board__col" data-col="todo" aria-labelledby="ui-board-todo">
|
|
2384
2384
|
<header class="ui-board__head">
|
|
@@ -2608,7 +2608,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
2608
2608
|
</header>
|
|
2609
2609
|
<p class="ui-board__empty">Nothing here</p>
|
|
2610
2610
|
</section>
|
|
2611
|
-
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>6 · Board phân trang THEO SERVER (0.18.0, <code>hasMore</code> + <code>moreHref</code>): mỗi cột chỉ có 12 thẻ trong HTML, MỘT link "Show 24 more" (<code>?col=x&amp;page=2</code>); kit-plain.js tải trang đó và nối thẻ mới tại chỗ, React dùng <code>onLoadMore</code> hoặc <code>linkAs</code></figcaption><div class="cat-wide"><iframe title="6 · Board phân trang THEO SERVER (0.18.0, <code>hasMore</code> + <code>moreHref</code>): mỗi cột chỉ có 12 thẻ trong HTML, MỘT link "Show 24 more" (<code>?col=x&amp;page=2</code>); kit-plain.js tải trang đó và nối thẻ mới tại chỗ, React dùng <code>onLoadMore</code> hoặc <code>linkAs</code>" style="height:560px;width:900px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div style="padding:16px"><div class="ui-board" id="catalog-paged" role="region" aria-label="Ideas"><section class="ui-board__col" data-col="enough" aria-labelledby="catalog-paged-enough"><header class="ui-board__head"><span class="ui-board__dot ui-board__dot--success" aria-hidden="true"></span><span class="ui-board__name" id="catalog-paged-enough">Ready to write</span><span class="ui-board__count">412</span></header><ol class="ui-board__list"><li data-id="i0" data-name="Idea 1"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i0">Idea 1</a><span class="ui-card__meta">#0 · Section</span></div></article></li><li data-id="i1" data-name="Idea 2"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i1">Idea 2</a><span class="ui-card__meta">#1 · Section</span></div></article></li><li data-id="i2" data-name="Idea 3"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i2">Idea 3</a><span class="ui-card__meta">#2 · Section</span></div></article></li><li data-id="i3" data-name="Idea 4"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i3">Idea 4</a><span class="ui-card__meta">#3 · Section</span></div></article></li><li data-id="i4" data-name="Idea 5"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i4">Idea 5</a><span class="ui-card__meta">#4 · Section</span></div></article></li><li data-id="i5" data-name="Idea 6"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i5">Idea 6</a><span class="ui-card__meta">#5 · Section</span></div></article></li><li data-id="i6" data-name="Idea 7"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i6">Idea 7</a><span class="ui-card__meta">#6 · Section</span></div></article></li><li data-id="i7" data-name="Idea 8"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i7">Idea 8</a><span class="ui-card__meta">#7 · Section</span></div></article></li><li data-id="i8" data-name="Idea 9"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i8">Idea 9</a><span class="ui-card__meta">#8 · Section</span></div></article></li><li data-id="i9" data-name="Idea 10"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i9">Idea 10</a><span class="ui-card__meta">#9 · Section</span></div></article></li><li data-id="i10" data-name="Idea 11"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i10">Idea 11</a><span class="ui-card__meta">#10 · Section</span></div></article></li><li data-id="i11" data-name="Idea 12"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i11">Idea 12</a><span class="ui-card__meta">#11 · Section</span></div></article></li></ol><div class="ui-more ui-board__next"><a class="ui-btn ui-btn--sm" href="#collections">Show 24 more</a></div></section><section class="ui-board__col" data-col="partial" aria-labelledby="catalog-paged-partial"><header class="ui-board__head"><span class="ui-board__dot ui-board__dot--warning" aria-hidden="true"></span><span class="ui-board__name" id="catalog-paged-partial">Needs more</span><span class="ui-board__count">9</span></header><ol class="ui-board__list"><li data-id="p0" data-name="Idea 100"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p0">Idea 100</a><span class="ui-card__meta">#0 · Section</span></div></article></li><li data-id="p1" data-name="Idea 101"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p1">Idea 101</a><span class="ui-card__meta">#1 · Section</span></div></article></li><li data-id="p2" data-name="Idea 102"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p2">Idea 102</a><span class="ui-card__meta">#2 · Section</span></div></article></li><li data-id="p3" data-name="Idea 103"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p3">Idea 103</a><span class="ui-card__meta">#3 · Section</span></div></article></li><li data-id="p4" data-name="Idea 104"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p4">Idea 104</a><span class="ui-card__meta">#4 · Section</span></div></article></li><li data-id="p5" data-name="Idea 105"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p5">Idea 105</a><span class="ui-card__meta">#5 · Section</span></div></article></li><li data-id="p6" data-name="Idea 106"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p6">Idea 106</a><span class="ui-card__meta">#6 · Section</span></div></article></li><li data-id="p7" data-name="Idea 107"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p7">Idea 107</a><span class="ui-card__meta">#7 · Section</span></div></article></li><li data-id="p8" data-name="Idea 108"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p8">Idea 108</a><span class="ui-card__meta">#8 · Section</span></div></article></li></ol></section></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
2611
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>6 · Board phân trang THEO SERVER (0.18.0, <code>hasMore</code> + <code>moreHref</code>): mỗi cột chỉ có 12 thẻ trong HTML, MỘT link "Show 24 more" (<code>?col=x&amp;page=2</code>); kit-plain.js tải trang đó và nối thẻ mới tại chỗ, React dùng <code>onLoadMore</code> hoặc <code>linkAs</code></figcaption><div class="cat-wide"><iframe title="6 · Board phân trang THEO SERVER (0.18.0, <code>hasMore</code> + <code>moreHref</code>): mỗi cột chỉ có 12 thẻ trong HTML, MỘT link "Show 24 more" (<code>?col=x&amp;page=2</code>); kit-plain.js tải trang đó và nối thẻ mới tại chỗ, React dùng <code>onLoadMore</code> hoặc <code>linkAs</code>" style="height:560px;width:900px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"></head><body><div style="padding:16px"><div class="ui-board" id="catalog-paged" role="region" aria-label="Ideas"><section class="ui-board__col" data-col="enough" aria-labelledby="catalog-paged-enough"><header class="ui-board__head"><span class="ui-board__dot ui-board__dot--success" aria-hidden="true"></span><span class="ui-board__name" id="catalog-paged-enough">Ready to write</span><span class="ui-board__count">412</span></header><ol class="ui-board__list"><li data-id="i0" data-name="Idea 1"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i0">Idea 1</a><span class="ui-card__meta">#0 · Section</span></div></article></li><li data-id="i1" data-name="Idea 2"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i1">Idea 2</a><span class="ui-card__meta">#1 · Section</span></div></article></li><li data-id="i2" data-name="Idea 3"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i2">Idea 3</a><span class="ui-card__meta">#2 · Section</span></div></article></li><li data-id="i3" data-name="Idea 4"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i3">Idea 4</a><span class="ui-card__meta">#3 · Section</span></div></article></li><li data-id="i4" data-name="Idea 5"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i4">Idea 5</a><span class="ui-card__meta">#4 · Section</span></div></article></li><li data-id="i5" data-name="Idea 6"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i5">Idea 6</a><span class="ui-card__meta">#5 · Section</span></div></article></li><li data-id="i6" data-name="Idea 7"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i6">Idea 7</a><span class="ui-card__meta">#6 · Section</span></div></article></li><li data-id="i7" data-name="Idea 8"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i7">Idea 8</a><span class="ui-card__meta">#7 · Section</span></div></article></li><li data-id="i8" data-name="Idea 9"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i8">Idea 9</a><span class="ui-card__meta">#8 · Section</span></div></article></li><li data-id="i9" data-name="Idea 10"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i9">Idea 10</a><span class="ui-card__meta">#9 · Section</span></div></article></li><li data-id="i10" data-name="Idea 11"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i10">Idea 11</a><span class="ui-card__meta">#10 · Section</span></div></article></li><li data-id="i11" data-name="Idea 12"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#i11">Idea 12</a><span class="ui-card__meta">#11 · Section</span></div></article></li></ol><div class="ui-more ui-board__next"><a class="ui-btn ui-btn--sm" href="#collections">Show 24 more</a></div></section><section class="ui-board__col" data-col="partial" aria-labelledby="catalog-paged-partial"><header class="ui-board__head"><span class="ui-board__dot ui-board__dot--warning" aria-hidden="true"></span><span class="ui-board__name" id="catalog-paged-partial">Needs more</span><span class="ui-board__count">9</span></header><ol class="ui-board__list"><li data-id="p0" data-name="Idea 100"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p0">Idea 100</a><span class="ui-card__meta">#0 · Section</span></div></article></li><li data-id="p1" data-name="Idea 101"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p1">Idea 101</a><span class="ui-card__meta">#1 · Section</span></div></article></li><li data-id="p2" data-name="Idea 102"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p2">Idea 102</a><span class="ui-card__meta">#2 · Section</span></div></article></li><li data-id="p3" data-name="Idea 103"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p3">Idea 103</a><span class="ui-card__meta">#3 · Section</span></div></article></li><li data-id="p4" data-name="Idea 104"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p4">Idea 104</a><span class="ui-card__meta">#4 · Section</span></div></article></li><li data-id="p5" data-name="Idea 105"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p5">Idea 105</a><span class="ui-card__meta">#5 · Section</span></div></article></li><li data-id="p6" data-name="Idea 106"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p6">Idea 106</a><span class="ui-card__meta">#6 · Section</span></div></article></li><li data-id="p7" data-name="Idea 107"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p7">Idea 107</a><span class="ui-card__meta">#7 · Section</span></div></article></li><li data-id="p8" data-name="Idea 108"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#p8">Idea 108</a><span class="ui-card__meta">#8 · Section</span></div></article></li></ol></section></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="padding:16px">
|
|
2612
2612
|
<div class="ui-board" id="catalog-paged" role="region" aria-label="Ideas">
|
|
2613
2613
|
<section class="ui-board__col" data-col="enough" aria-labelledby="catalog-paged-enough">
|
|
2614
2614
|
<header class="ui-board__head">
|
|
@@ -3545,10 +3545,10 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
3545
3545
|
<button type="button" class="ui-btn ui-btn--primary">Xoá</button>
|
|
3546
3546
|
</div>
|
|
3547
3547
|
</div></code></pre></details></figure></section>
|
|
3548
|
-
<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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.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" data-label-open="Mở menu" data-label-close="Đóng menu" aria-controls=":R0:"><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"><form role="search" method="get" action="#" class="gemboss-topbar-search"><svg viewBox="0 0 20 20" width="18" height="18" class="gemboss-topbar-search-icon" 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-topbar-search-input" type="search" name="q" placeholder="Search by #ID, name or key" aria-label="Search by #ID, name or key" autoComplete="off" enterKeyHint="search"/><kbd class="gemboss-topbar-search-kbd" aria-hidden="true">⌘K</kbd></form></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" id=":R0:"><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">
|
|
3548
|
+
<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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.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" data-label-open="Mở menu" data-label-close="Đóng menu" aria-controls=":c52-R0:"><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"><form role="search" method="get" action="#" class="gemboss-topbar-search"><svg viewBox="0 0 20 20" width="18" height="18" class="gemboss-topbar-search-icon" 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-topbar-search-input" type="search" name="q" placeholder="Search by #ID, name or key" aria-label="Search by #ID, name or key" autoComplete="off" enterKeyHint="search"/><kbd class="gemboss-topbar-search-kbd" aria-hidden="true">⌘K</kbd></form></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" id=":c52-R0:"><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">
|
|
3549
3549
|
<header class="gemboss-platform-topbar">
|
|
3550
3550
|
<div class="gemboss-topbar-start">
|
|
3551
|
-
<button type="button" class="gemboss-mobile-menu-btn" aria-label="Mở menu" aria-expanded="false" data-label-open="Mở menu" data-label-close="Đóng menu" aria-controls=":R0:">
|
|
3551
|
+
<button type="button" class="gemboss-mobile-menu-btn" aria-label="Mở menu" aria-expanded="false" data-label-open="Mở menu" data-label-close="Đóng menu" aria-controls=":c52-R0:">
|
|
3552
3552
|
<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
|
|
3553
3553
|
<path d="M3 5.5h14M3 10h14M3 14.5h14" stroke="currentColor" stroke-width="1.7" stroke-linecap="round">
|
|
3554
3554
|
</path>
|
|
@@ -3599,7 +3599,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
3599
3599
|
</details>
|
|
3600
3600
|
</div>
|
|
3601
3601
|
</header>
|
|
3602
|
-
<nav class="icon-nav" aria-label="Main navigation" id=":R0:">
|
|
3602
|
+
<nav class="icon-nav" aria-label="Main navigation" id=":c52-R0:">
|
|
3603
3603
|
<div class="gnav-scroll">
|
|
3604
3604
|
<div class="gnav-heading">Kho</div>
|
|
3605
3605
|
<div class="gnav-group active">
|
|
@@ -3677,10 +3677,10 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
3677
3677
|
</div>
|
|
3678
3678
|
</main>
|
|
3679
3679
|
</div></code></pre></details></figure></section>
|
|
3680
|
-
<section id="nav"><h2>Chờ điều hướng</h2><p>Bấm một mục rail là có phản hồi ở khung hình đầu tiên: icon thành spinner trong đúng ô 20px (chữ không xê dịch), mục con có spinner 12px ở phần thụt lề ngay trước chữ, con trỏ chờ. Một trạng thái, ba cách đặt: <code>RailItem pending</code> / <code>RailSubItem pending</code> (React, thành <code>aria-busy="true"</code>); <code>RailItem as={NavLink}</code> của <code>@gemboss/ui/next</code> (đọc <code>useLinkStatus</code> của Next, tải trước khi chuột hoặc focus bàn phím dừng 120 ms, hoặc khi chạm); trang HTML thuần nạp <code>kit-plain.js</code> là tự có, kể cả tải trước (speculation rules ở Chromium, không có thì <code><link rel="prefetch"></code>). Link trong nội dung trang thêm <code>data-gb-pending</code> ("inline" hoặc "corner").</p><figure class="cat-demo cat-screen"><figcaption>RailItem pending + RailSubItem pending</figcaption><iframe title="RailItem pending + RailSubItem pending" style="height:300px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.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="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" aria-controls=":R0:"><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"></div></header><nav class="icon-nav" aria-label="Main navigation" id=":R0:"><div class="gnav-scroll"><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" 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" aria-busy="true" 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 (đang mở)</span></a></div><div class="gnav-group active has-active-child"><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"><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></span><span class="gnav-label">Báo cáo</span></a><ul class="gnav-sub"><li><a class="gnav-subitem active" aria-current="page" href="#">Tổng quan</a></li><li><a class="gnav-subitem" aria-busy="true" href="#">Theo kênh (đang mở)</a></li></ul></div></div></nav><button type="button" class="gemboss-mobile-nav-backdrop" aria-label="Close menu" tabindex="-1"></button><main class="gemboss-platform-main"><div style="padding:24px"><h1 style="margin:0">Tổng quan</h1></div></main></div></body></html>"></iframe><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
3680
|
+
<section id="nav"><h2>Chờ điều hướng</h2><p>Bấm một mục rail là có phản hồi ở khung hình đầu tiên: icon thành spinner trong đúng ô 20px (chữ không xê dịch), mục con có spinner 12px ở phần thụt lề ngay trước chữ, con trỏ chờ. Một trạng thái, ba cách đặt: <code>RailItem pending</code> / <code>RailSubItem pending</code> (React, thành <code>aria-busy="true"</code>); <code>RailItem as={NavLink}</code> của <code>@gemboss/ui/next</code> (đọc <code>useLinkStatus</code> của Next, tải trước khi chuột hoặc focus bàn phím dừng 120 ms, hoặc khi chạm); trang HTML thuần nạp <code>kit-plain.js</code> là tự có, kể cả tải trước (speculation rules ở Chromium, không có thì <code><link rel="prefetch"></code>). Link trong nội dung trang thêm <code>data-gb-pending</code> ("inline" hoặc "corner").</p><figure class="cat-demo cat-screen"><figcaption>RailItem pending + RailSubItem pending</figcaption><iframe title="RailItem pending + RailSubItem pending" style="height:300px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.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="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" aria-controls=":c53-R0:"><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"></div></header><nav class="icon-nav" aria-label="Main navigation" id=":c53-R0:"><div class="gnav-scroll"><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" 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" aria-busy="true" 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 (đang mở)</span></a></div><div class="gnav-group active has-active-child"><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"><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></span><span class="gnav-label">Báo cáo</span></a><ul class="gnav-sub"><li><a class="gnav-subitem active" aria-current="page" href="#">Tổng quan</a></li><li><a class="gnav-subitem" aria-busy="true" href="#">Theo kênh (đang mở)</a></li></ul></div></div></nav><button type="button" class="gemboss-mobile-nav-backdrop" aria-label="Close menu" tabindex="-1"></button><main class="gemboss-platform-main"><div style="padding:24px"><h1 style="margin:0">Tổng quan</h1></div></main></div></body></html>"></iframe><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
3681
3681
|
<header class="gemboss-platform-topbar">
|
|
3682
3682
|
<div class="gemboss-topbar-start">
|
|
3683
|
-
<button type="button" class="gemboss-mobile-menu-btn" aria-label="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" aria-controls=":R0:">
|
|
3683
|
+
<button type="button" class="gemboss-mobile-menu-btn" aria-label="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" aria-controls=":c53-R0:">
|
|
3684
3684
|
<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
|
|
3685
3685
|
<path d="M3 5.5h14M3 10h14M3 14.5h14" stroke="currentColor" stroke-width="1.7" stroke-linecap="round">
|
|
3686
3686
|
</path>
|
|
@@ -3705,7 +3705,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
3705
3705
|
<div class="gemboss-topbar-end">
|
|
3706
3706
|
</div>
|
|
3707
3707
|
</header>
|
|
3708
|
-
<nav class="icon-nav" aria-label="Main navigation" id=":R0:">
|
|
3708
|
+
<nav class="icon-nav" aria-label="Main navigation" id=":c53-R0:">
|
|
3709
3709
|
<div class="gnav-scroll">
|
|
3710
3710
|
<div class="gnav-group">
|
|
3711
3711
|
<a class="gnav-item" href="#">
|
|
@@ -3797,10 +3797,10 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
3797
3797
|
</span>
|
|
3798
3798
|
</div>
|
|
3799
3799
|
</div></code></pre></details></figure></section>
|
|
3800
|
-
<section id="page"><h2>Bề rộng nội dung</h2><p>Rail bên trái, bên phải là một cột có bề rộng tối đa theo bậc của admin: <code>ui-page</code> 900px (<code>--ui-content-max</code>: danh sách, bảng, lưới card, dashboard), <code>--feed</code> 720, <code>--form</code> 662, <code>--canvas</code> 1440 (chỉ khi nội dung đo được là rộng hơn một cột chữ), <code>--full</code> không giới hạn (board, editor; ghi lý do). React: một <code>PageContainer width="form"</code> ngay trong <code>AppShell</code>. Một cap chỉ có tác dụng khi nó NHỎ HƠN chỗ trống thật: ở 1280 chỗ trống là 992. Hai khung dưới vẽ ở 1440, kéo ngang để xem hết.</p><figure class="cat-demo cat-screen"><figcaption>PageContainer width="default" ở 1440: cột 900</figcaption><div class="cat-wide"><iframe title="PageContainer width="default" ở 1440: cột 900" style="height:300px;width:1440px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.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="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" aria-controls=":R0:"><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"></div></header><nav class="icon-nav" aria-label="Main navigation" id=":R0:"><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></nav><button type="button" class="gemboss-mobile-nav-backdrop" aria-label="Close menu" tabindex="-1"></button><main class="gemboss-platform-main"><div class="ui-page"><h1 style="margin:0 0 16px">Board</h1><div class="ui-card"><div class="ui-card__title">#412 Hero split</div><p class="ui-muted">Cột 900px, căn giữa trong chỗ trống bên phải rail.</p></div></div></main></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
3800
|
+
<section id="page"><h2>Bề rộng nội dung</h2><p>Rail bên trái, bên phải là một cột có bề rộng tối đa theo bậc của admin: <code>ui-page</code> 900px (<code>--ui-content-max</code>: danh sách, bảng, lưới card, dashboard), <code>--feed</code> 720, <code>--form</code> 662, <code>--canvas</code> 1440 (chỉ khi nội dung đo được là rộng hơn một cột chữ), <code>--full</code> không giới hạn (board, editor; ghi lý do). React: một <code>PageContainer width="form"</code> ngay trong <code>AppShell</code>. Một cap chỉ có tác dụng khi nó NHỎ HƠN chỗ trống thật: ở 1280 chỗ trống là 992. Hai khung dưới vẽ ở 1440, kéo ngang để xem hết.</p><figure class="cat-demo cat-screen"><figcaption>PageContainer width="default" ở 1440: cột 900</figcaption><div class="cat-wide"><iframe title="PageContainer width="default" ở 1440: cột 900" style="height:300px;width:1440px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.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="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" aria-controls=":c55-R0:"><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"></div></header><nav class="icon-nav" aria-label="Main navigation" id=":c55-R0:"><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></nav><button type="button" class="gemboss-mobile-nav-backdrop" aria-label="Close menu" tabindex="-1"></button><main class="gemboss-platform-main"><div class="ui-page"><h1 style="margin:0 0 16px">Board</h1><div class="ui-card"><div class="ui-card__title">#412 Hero split</div><p class="ui-muted">Cột 900px, căn giữa trong chỗ trống bên phải rail.</p></div></div></main></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
3801
3801
|
<header class="gemboss-platform-topbar">
|
|
3802
3802
|
<div class="gemboss-topbar-start">
|
|
3803
|
-
<button type="button" class="gemboss-mobile-menu-btn" aria-label="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" aria-controls=":R0:">
|
|
3803
|
+
<button type="button" class="gemboss-mobile-menu-btn" aria-label="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" aria-controls=":c55-R0:">
|
|
3804
3804
|
<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
|
|
3805
3805
|
<path d="M3 5.5h14M3 10h14M3 14.5h14" stroke="currentColor" stroke-width="1.7" stroke-linecap="round">
|
|
3806
3806
|
</path>
|
|
@@ -3825,7 +3825,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
3825
3825
|
<div class="gemboss-topbar-end">
|
|
3826
3826
|
</div>
|
|
3827
3827
|
</header>
|
|
3828
|
-
<nav class="icon-nav" aria-label="Main navigation" id=":R0:">
|
|
3828
|
+
<nav class="icon-nav" aria-label="Main navigation" id=":c55-R0:">
|
|
3829
3829
|
<div class="gnav-scroll">
|
|
3830
3830
|
<div class="gnav-heading">Kho</div>
|
|
3831
3831
|
<div class="gnav-group active">
|
|
@@ -3891,10 +3891,10 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
3891
3891
|
</div>
|
|
3892
3892
|
</div>
|
|
3893
3893
|
</main>
|
|
3894
|
-
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>PageContainer width="form" ở 1440: cột 662</figcaption><div class="cat-wide"><iframe title="PageContainer width="form" ở 1440: cột 662" style="height:300px;width:1440px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.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="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" aria-controls=":R0:"><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"></div></header><nav class="icon-nav" aria-label="Main navigation" id=":R0:"><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></nav><button type="button" class="gemboss-mobile-nav-backdrop" aria-label="Close menu" tabindex="-1"></button><main class="gemboss-platform-main"><div class="ui-page ui-page--form"><h1 style="margin:0 0 16px">Settings</h1><div class="ui-card" style="display:grid;gap:6px"><label for="cat-pw-name">Tên hiển thị</label><input id="cat-pw-name" class="gemboss-field" value="Minh Anh"></div></div></main></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
3894
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>PageContainer width="form" ở 1440: cột 662</figcaption><div class="cat-wide"><iframe title="PageContainer width="form" ở 1440: cột 662" style="height:300px;width:1440px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.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="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" aria-controls=":c56-R0:"><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"></div></header><nav class="icon-nav" aria-label="Main navigation" id=":c56-R0:"><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></nav><button type="button" class="gemboss-mobile-nav-backdrop" aria-label="Close menu" tabindex="-1"></button><main class="gemboss-platform-main"><div class="ui-page ui-page--form"><h1 style="margin:0 0 16px">Settings</h1><div class="ui-card" style="display:grid;gap:6px"><label for="cat-pw-name">Tên hiển thị</label><input id="cat-pw-name" class="gemboss-field" value="Minh Anh"></div></div></main></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
3895
3895
|
<header class="gemboss-platform-topbar">
|
|
3896
3896
|
<div class="gemboss-topbar-start">
|
|
3897
|
-
<button type="button" class="gemboss-mobile-menu-btn" aria-label="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" aria-controls=":R0:">
|
|
3897
|
+
<button type="button" class="gemboss-mobile-menu-btn" aria-label="Open menu" aria-expanded="false" data-label-open="Open menu" data-label-close="Close menu" aria-controls=":c56-R0:">
|
|
3898
3898
|
<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
|
|
3899
3899
|
<path d="M3 5.5h14M3 10h14M3 14.5h14" stroke="currentColor" stroke-width="1.7" stroke-linecap="round">
|
|
3900
3900
|
</path>
|
|
@@ -3919,7 +3919,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
3919
3919
|
<div class="gemboss-topbar-end">
|
|
3920
3920
|
</div>
|
|
3921
3921
|
</header>
|
|
3922
|
-
<nav class="icon-nav" aria-label="Main navigation" id=":R0:">
|
|
3922
|
+
<nav class="icon-nav" aria-label="Main navigation" id=":c56-R0:">
|
|
3923
3923
|
<div class="gnav-scroll">
|
|
3924
3924
|
<div class="gnav-heading">Kho</div>
|
|
3925
3925
|
<div class="gnav-group active">
|
|
@@ -3988,7 +3988,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
3988
3988
|
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>HTML thuần: một lớp bọc là con đầu tiên của main</figcaption><div class="cat-live"><div class="ui-page ui-page--feed"><div class="ui-card">Một mục trong feed, cột 720px.</div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-page ui-page--feed">
|
|
3989
3989
|
<div class="ui-card">Một mục trong feed, cột 720px.</div>
|
|
3990
3990
|
</div></code></pre></details></figure></section>
|
|
3991
|
-
<section id="portal"><h2>Cổng công khai: tab trên topbar, tìm kiếm, sáng / tối, người dẫn đầu</h2><p>Cho bề mặt công khai kiểu bảng Featurebase (GemFeedback) và cộng đồng (GemCommunity). <code>TopbarNav</code> đặt tab mục ngay trên topbar cạnh logo; <code>SearchDialog</code> là popup tìm (⌘K, gõ là ra); <code>ThemeToggle</code> + <code>themeScript</code> bật bảng màu tối (chỉ đổi token, mọi class theo); <code>Avatar</code> ảnh hoặc chữ viết tắt trên một tông lấy theo tên; <code>Leaderboard</code> huy chương 1–3 rồi thứ hạng; <code>Podium</code> ba người đầu.</p><figure class="cat-demo cat-screen"><figcaption>TopbarNav + SearchDialog + ThemeToggle, sáng</figcaption><iframe title="TopbarNav + SearchDialog + ThemeToggle, sáng" style="height:360px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div class="gemboss-platform-shell"><header class="gemboss-platform-topbar"><div class="gemboss-topbar-start"><a class="gb-brand" href="/" aria-label="GemFeedback 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">GemFeedback</span></a><nav class="gb-topnav" aria-label="Sections"><div class="gb-topnav-row"><a href="#portal" class="gb-topnav-link" aria-current="page">Feedback</a><a href="#portal" class="gb-topnav-link">Roadmap</a><a href="#portal" class="gb-topnav-link">Changelog</a></div><details class="gb-topnav-fold"><summary class="gb-topnav-link gb-topnav-fold-btn" aria-current="page">Feedback<svg class="gb-topnav-chevron" width="12" height="12" viewBox="0 0 12 12" aria-hidden="true" focusable="false"><path d="M3 4.5 6 7.5 9 4.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></summary><div class="gb-topnav-pop gemboss-popover-surface"><a href="#portal" class="gb-topnav-item" aria-current="page">Feedback</a><a href="#portal" class="gb-topnav-item">Roadmap</a><a href="#portal" class="gb-topnav-item">Changelog</a></div></details></nav></div><div class="gemboss-topbar-center"></div><div class="gemboss-topbar-end"><a class="gb-search-trigger" href="#portal" aria-label="Search" aria-haspopup="dialog"><svg viewBox="0 0 20 20" width="18" height="18" 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></a><dialog class="ui-modal gb-search" aria-label="Search"><div class="gb-search-box"><svg viewBox="0 0 20 20" width="18" height="18" class="gb-search-icon" 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="gb-search-input" type="search" placeholder="Search…" aria-label="Search" role="combobox" aria-expanded="true" aria-controls=":Rt:" autoComplete="off" value=""/></div><p class="gb-search-empty" aria-live="polite"></p><div class="gb-search-results" id=":Rt:" role="listbox" aria-busy="false"></div><div class="gb-search-foot" aria-hidden="true"><span>↵ open</span><span>↑↓ move</span><span>esc</span></div></dialog><button type="button" class="gb-theme-toggle" aria-label="Switch to dark mode" title="Switch to dark mode"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z"></path></g></svg></button><a class="ui-btn ui-btn--primary" href="#portal">Sign in</a></div></header><div><div style="padding:72px 24px 24px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px"><div class="ui-card"><b>Have something to say?</b><p class="ui-muted">Tell us what to build next.</p></div><section class="gb-leaderboard" aria-labelledby="gb-lb-most-helpful-1wqxo9r"><h2 class="gb-leaderboard-title" id="gb-lb-most-helpful-1wqxo9r">Most helpful</h2><p class="gb-leaderboard-caption">By votes on their comments.</p><ol class="gb-leaderboard-list"><li class="gb-leaderboard-row is-first"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥇</span><span class="gb-sr-only">Rank 1: </span></span><span class="gb-avatar gb-avatar--24" data-tone="2" aria-hidden="true">LN</span><span class="gb-leaderboard-name">Lucas Nguyen</span><span class="gb-leaderboard-value">163<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥈</span><span class="gb-sr-only">Rank 2: </span></span><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">DC</span><span class="gb-leaderboard-name">Dima Chernyshov</span><span class="gb-leaderboard-value">56<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥉</span><span class="gb-sr-only">Rank 3: </span></span><span class="gb-avatar gb-avatar--24" data-tone="5" aria-hidden="true">AR</span><span class="gb-leaderboard-name">Artjom</span><span class="gb-leaderboard-value">55<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank is-number"><span aria-hidden="true">4</span><span class="gb-sr-only">Rank 4: </span></span><span class="gb-avatar gb-avatar--24" data-tone="4" aria-hidden="true">GU</span><span class="gb-leaderboard-name">GutBrush</span><span class="gb-leaderboard-value">34<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank is-number"><span aria-hidden="true">5</span><span class="gb-sr-only">Rank 5: </span></span><span class="gb-avatar gb-avatar--24" data-tone="5" aria-hidden="true">WO</span><span class="gb-leaderboard-name">Wondercraft</span><span class="gb-leaderboard-value">30<span class="gb-sr-only"> votes</span></span></a></li></ol></section></div></div></div></body></html>"></iframe><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
3991
|
+
<section id="portal"><h2>Cổng công khai: tab trên topbar, tìm kiếm, sáng / tối, người dẫn đầu</h2><p>Cho bề mặt công khai kiểu bảng Featurebase (GemFeedback) và cộng đồng (GemCommunity). <code>TopbarNav</code> đặt tab mục ngay trên topbar cạnh logo; <code>SearchDialog</code> là popup tìm (⌘K, gõ là ra); <code>ThemeToggle</code> + <code>themeScript</code> bật bảng màu tối (chỉ đổi token, mọi class theo); <code>Avatar</code> ảnh hoặc chữ viết tắt trên một tông lấy theo tên; <code>Leaderboard</code> huy chương 1–3 rồi thứ hạng; <code>Podium</code> ba người đầu.</p><figure class="cat-demo cat-screen"><figcaption>TopbarNav + SearchDialog + ThemeToggle, sáng</figcaption><iframe title="TopbarNav + SearchDialog + ThemeToggle, sáng" style="height:360px" 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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"></head><body><div class="gemboss-platform-shell"><header class="gemboss-platform-topbar"><div class="gemboss-topbar-start"><a class="gb-brand" href="/" aria-label="GemFeedback 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">GemFeedback</span></a><nav class="gb-topnav" aria-label="Sections"><div class="gb-topnav-row"><a href="#portal" class="gb-topnav-link" aria-current="page">Feedback</a><a href="#portal" class="gb-topnav-link">Roadmap</a><a href="#portal" class="gb-topnav-link">Changelog</a></div><details class="gb-topnav-fold"><summary class="gb-topnav-link gb-topnav-fold-btn" aria-current="page">Feedback<svg class="gb-topnav-chevron" width="12" height="12" viewBox="0 0 12 12" aria-hidden="true" focusable="false"><path d="M3 4.5 6 7.5 9 4.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></summary><div class="gb-topnav-pop gemboss-popover-surface"><a href="#portal" class="gb-topnav-item" aria-current="page">Feedback</a><a href="#portal" class="gb-topnav-item">Roadmap</a><a href="#portal" class="gb-topnav-item">Changelog</a></div></details></nav></div><div class="gemboss-topbar-center"></div><div class="gemboss-topbar-end"><a class="gb-search-trigger" href="#portal" aria-label="Search" aria-haspopup="dialog"><svg viewBox="0 0 20 20" width="18" height="18" 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></a><dialog class="ui-modal gb-search" aria-label="Search"><div class="gb-search-box"><svg viewBox="0 0 20 20" width="18" height="18" class="gb-search-icon" 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="gb-search-input" type="search" placeholder="Search…" aria-label="Search" role="combobox" aria-expanded="true" aria-controls=":c59-Rt:" autoComplete="off" value=""/></div><p class="gb-search-empty" aria-live="polite"></p><div class="gb-search-results" id=":c59-Rt:" role="listbox" aria-busy="false"></div><div class="gb-search-foot" aria-hidden="true"><span>↵ open</span><span>↑↓ move</span><span>esc</span></div></dialog><button type="button" class="gb-theme-toggle" aria-label="Switch to dark mode" title="Switch to dark mode"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z"></path></g></svg></button><a class="ui-btn ui-btn--primary" href="#portal">Sign in</a></div></header><div><div style="padding:72px 24px 24px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px"><div class="ui-card"><b>Have something to say?</b><p class="ui-muted">Tell us what to build next.</p></div><section class="gb-leaderboard" aria-labelledby="gb-lb-most-helpful-1wqxo9r"><h2 class="gb-leaderboard-title" id="gb-lb-most-helpful-1wqxo9r">Most helpful</h2><p class="gb-leaderboard-caption">By votes on their comments.</p><ol class="gb-leaderboard-list"><li class="gb-leaderboard-row is-first"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥇</span><span class="gb-sr-only">Rank 1: </span></span><span class="gb-avatar gb-avatar--24" data-tone="2" aria-hidden="true">LN</span><span class="gb-leaderboard-name">Lucas Nguyen</span><span class="gb-leaderboard-value">163<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥈</span><span class="gb-sr-only">Rank 2: </span></span><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">DC</span><span class="gb-leaderboard-name">Dima Chernyshov</span><span class="gb-leaderboard-value">56<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥉</span><span class="gb-sr-only">Rank 3: </span></span><span class="gb-avatar gb-avatar--24" data-tone="5" aria-hidden="true">AR</span><span class="gb-leaderboard-name">Artjom</span><span class="gb-leaderboard-value">55<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank is-number"><span aria-hidden="true">4</span><span class="gb-sr-only">Rank 4: </span></span><span class="gb-avatar gb-avatar--24" data-tone="4" aria-hidden="true">GU</span><span class="gb-leaderboard-name">GutBrush</span><span class="gb-leaderboard-value">34<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank is-number"><span aria-hidden="true">5</span><span class="gb-sr-only">Rank 5: </span></span><span class="gb-avatar gb-avatar--24" data-tone="5" aria-hidden="true">WO</span><span class="gb-leaderboard-name">Wondercraft</span><span class="gb-leaderboard-value">30<span class="gb-sr-only"> votes</span></span></a></li></ol></section></div></div></div></body></html>"></iframe><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
3992
3992
|
<header class="gemboss-platform-topbar">
|
|
3993
3993
|
<div class="gemboss-topbar-start">
|
|
3994
3994
|
<a class="gb-brand" href="/" aria-label="GemFeedback home">
|
|
@@ -4047,11 +4047,11 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
4047
4047
|
</path>
|
|
4048
4048
|
</g>
|
|
4049
4049
|
</svg>
|
|
4050
|
-
<input class="gb-search-input" type="search" placeholder="Search…" aria-label="Search" role="combobox" aria-expanded="true" aria-controls=":Rt:" autoComplete="off" value=""/>
|
|
4050
|
+
<input class="gb-search-input" type="search" placeholder="Search…" aria-label="Search" role="combobox" aria-expanded="true" aria-controls=":c59-Rt:" autoComplete="off" value=""/>
|
|
4051
4051
|
</div>
|
|
4052
4052
|
<p class="gb-search-empty" aria-live="polite">
|
|
4053
4053
|
</p>
|
|
4054
|
-
<div class="gb-search-results" id=":Rt:" role="listbox" aria-busy="false">
|
|
4054
|
+
<div class="gb-search-results" id=":c59-Rt:" role="listbox" aria-busy="false">
|
|
4055
4055
|
</div>
|
|
4056
4056
|
<div class="gb-search-foot" aria-hidden="true">
|
|
4057
4057
|
<span>↵ open</span>
|
|
@@ -4144,7 +4144,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
4144
4144
|
</section>
|
|
4145
4145
|
</div>
|
|
4146
4146
|
</div>
|
|
4147
|
-
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Cùng trang, tối (data-theme="dark")</figcaption><iframe title="Cùng trang, tối (data-theme="dark")" style="height:360px" srcdoc="<!doctype html><html data-theme="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"></head><body><div class="gemboss-platform-shell"><header class="gemboss-platform-topbar"><div class="gemboss-topbar-start"><a class="gb-brand" href="/" aria-label="GemFeedback 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">GemFeedback</span></a><nav class="gb-topnav" aria-label="Sections"><div class="gb-topnav-row"><a href="#portal" class="gb-topnav-link" aria-current="page">Feedback</a><a href="#portal" class="gb-topnav-link">Roadmap</a><a href="#portal" class="gb-topnav-link">Changelog</a></div><details class="gb-topnav-fold"><summary class="gb-topnav-link gb-topnav-fold-btn" aria-current="page">Feedback<svg class="gb-topnav-chevron" width="12" height="12" viewBox="0 0 12 12" aria-hidden="true" focusable="false"><path d="M3 4.5 6 7.5 9 4.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></summary><div class="gb-topnav-pop gemboss-popover-surface"><a href="#portal" class="gb-topnav-item" aria-current="page">Feedback</a><a href="#portal" class="gb-topnav-item">Roadmap</a><a href="#portal" class="gb-topnav-item">Changelog</a></div></details></nav></div><div class="gemboss-topbar-center"></div><div class="gemboss-topbar-end"><a class="gb-search-trigger" href="#portal" aria-label="Search" aria-haspopup="dialog"><svg viewBox="0 0 20 20" width="18" height="18" 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></a><dialog class="ui-modal gb-search" aria-label="Search"><div class="gb-search-box"><svg viewBox="0 0 20 20" width="18" height="18" class="gb-search-icon" 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="gb-search-input" type="search" placeholder="Search…" aria-label="Search" role="combobox" aria-expanded="true" aria-controls=":Rt:" autoComplete="off" value=""/></div><p class="gb-search-empty" aria-live="polite"></p><div class="gb-search-results" id=":Rt:" role="listbox" aria-busy="false"></div><div class="gb-search-foot" aria-hidden="true"><span>↵ open</span><span>↑↓ move</span><span>esc</span></div></dialog><button type="button" class="gb-theme-toggle" aria-label="Switch to dark mode" title="Switch to dark mode"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z"></path></g></svg></button><a class="ui-btn ui-btn--primary" href="#portal">Sign in</a></div></header><div><div style="padding:72px 24px 24px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px"><div class="ui-card"><b>Have something to say?</b><p class="ui-muted">Tell us what to build next.</p></div><section class="gb-leaderboard" aria-labelledby="gb-lb-most-helpful-1wqxo9r"><h2 class="gb-leaderboard-title" id="gb-lb-most-helpful-1wqxo9r">Most helpful</h2><p class="gb-leaderboard-caption">By votes on their comments.</p><ol class="gb-leaderboard-list"><li class="gb-leaderboard-row is-first"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥇</span><span class="gb-sr-only">Rank 1: </span></span><span class="gb-avatar gb-avatar--24" data-tone="2" aria-hidden="true">LN</span><span class="gb-leaderboard-name">Lucas Nguyen</span><span class="gb-leaderboard-value">163<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥈</span><span class="gb-sr-only">Rank 2: </span></span><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">DC</span><span class="gb-leaderboard-name">Dima Chernyshov</span><span class="gb-leaderboard-value">56<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥉</span><span class="gb-sr-only">Rank 3: </span></span><span class="gb-avatar gb-avatar--24" data-tone="5" aria-hidden="true">AR</span><span class="gb-leaderboard-name">Artjom</span><span class="gb-leaderboard-value">55<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank is-number"><span aria-hidden="true">4</span><span class="gb-sr-only">Rank 4: </span></span><span class="gb-avatar gb-avatar--24" data-tone="4" aria-hidden="true">GU</span><span class="gb-leaderboard-name">GutBrush</span><span class="gb-leaderboard-value">34<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank is-number"><span aria-hidden="true">5</span><span class="gb-sr-only">Rank 5: </span></span><span class="gb-avatar gb-avatar--24" data-tone="5" aria-hidden="true">WO</span><span class="gb-leaderboard-name">Wondercraft</span><span class="gb-leaderboard-value">30<span class="gb-sr-only"> votes</span></span></a></li></ol></section></div></div></div></body></html>"></iframe><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
4147
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Cùng trang, tối (data-theme="dark")</figcaption><iframe title="Cùng trang, tối (data-theme="dark")" style="height:360px" srcdoc="<!doctype html><html data-theme="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"></head><body><div class="gemboss-platform-shell"><header class="gemboss-platform-topbar"><div class="gemboss-topbar-start"><a class="gb-brand" href="/" aria-label="GemFeedback 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">GemFeedback</span></a><nav class="gb-topnav" aria-label="Sections"><div class="gb-topnav-row"><a href="#portal" class="gb-topnav-link" aria-current="page">Feedback</a><a href="#portal" class="gb-topnav-link">Roadmap</a><a href="#portal" class="gb-topnav-link">Changelog</a></div><details class="gb-topnav-fold"><summary class="gb-topnav-link gb-topnav-fold-btn" aria-current="page">Feedback<svg class="gb-topnav-chevron" width="12" height="12" viewBox="0 0 12 12" aria-hidden="true" focusable="false"><path d="M3 4.5 6 7.5 9 4.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></summary><div class="gb-topnav-pop gemboss-popover-surface"><a href="#portal" class="gb-topnav-item" aria-current="page">Feedback</a><a href="#portal" class="gb-topnav-item">Roadmap</a><a href="#portal" class="gb-topnav-item">Changelog</a></div></details></nav></div><div class="gemboss-topbar-center"></div><div class="gemboss-topbar-end"><a class="gb-search-trigger" href="#portal" aria-label="Search" aria-haspopup="dialog"><svg viewBox="0 0 20 20" width="18" height="18" 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></a><dialog class="ui-modal gb-search" aria-label="Search"><div class="gb-search-box"><svg viewBox="0 0 20 20" width="18" height="18" class="gb-search-icon" 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="gb-search-input" type="search" placeholder="Search…" aria-label="Search" role="combobox" aria-expanded="true" aria-controls=":c59-Rt:" autoComplete="off" value=""/></div><p class="gb-search-empty" aria-live="polite"></p><div class="gb-search-results" id=":c59-Rt:" role="listbox" aria-busy="false"></div><div class="gb-search-foot" aria-hidden="true"><span>↵ open</span><span>↑↓ move</span><span>esc</span></div></dialog><button type="button" class="gb-theme-toggle" aria-label="Switch to dark mode" title="Switch to dark mode"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z"></path></g></svg></button><a class="ui-btn ui-btn--primary" href="#portal">Sign in</a></div></header><div><div style="padding:72px 24px 24px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px"><div class="ui-card"><b>Have something to say?</b><p class="ui-muted">Tell us what to build next.</p></div><section class="gb-leaderboard" aria-labelledby="gb-lb-most-helpful-1wqxo9r"><h2 class="gb-leaderboard-title" id="gb-lb-most-helpful-1wqxo9r">Most helpful</h2><p class="gb-leaderboard-caption">By votes on their comments.</p><ol class="gb-leaderboard-list"><li class="gb-leaderboard-row is-first"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥇</span><span class="gb-sr-only">Rank 1: </span></span><span class="gb-avatar gb-avatar--24" data-tone="2" aria-hidden="true">LN</span><span class="gb-leaderboard-name">Lucas Nguyen</span><span class="gb-leaderboard-value">163<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥈</span><span class="gb-sr-only">Rank 2: </span></span><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">DC</span><span class="gb-leaderboard-name">Dima Chernyshov</span><span class="gb-leaderboard-value">56<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank"><span aria-hidden="true">🥉</span><span class="gb-sr-only">Rank 3: </span></span><span class="gb-avatar gb-avatar--24" data-tone="5" aria-hidden="true">AR</span><span class="gb-leaderboard-name">Artjom</span><span class="gb-leaderboard-value">55<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank is-number"><span aria-hidden="true">4</span><span class="gb-sr-only">Rank 4: </span></span><span class="gb-avatar gb-avatar--24" data-tone="4" aria-hidden="true">GU</span><span class="gb-leaderboard-name">GutBrush</span><span class="gb-leaderboard-value">34<span class="gb-sr-only"> votes</span></span></a></li><li class="gb-leaderboard-row"><a href="#portal" class="gb-leaderboard-link"><span class="gb-leaderboard-rank is-number"><span aria-hidden="true">5</span><span class="gb-sr-only">Rank 5: </span></span><span class="gb-avatar gb-avatar--24" data-tone="5" aria-hidden="true">WO</span><span class="gb-leaderboard-name">Wondercraft</span><span class="gb-leaderboard-value">30<span class="gb-sr-only"> votes</span></span></a></li></ol></section></div></div></div></body></html>"></iframe><details class="cat-code"><summary>Markup</summary><pre><code><div class="gemboss-platform-shell">
|
|
4148
4148
|
<header class="gemboss-platform-topbar">
|
|
4149
4149
|
<div class="gemboss-topbar-start">
|
|
4150
4150
|
<a class="gb-brand" href="/" aria-label="GemFeedback home">
|
|
@@ -4203,11 +4203,11 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
4203
4203
|
</path>
|
|
4204
4204
|
</g>
|
|
4205
4205
|
</svg>
|
|
4206
|
-
<input class="gb-search-input" type="search" placeholder="Search…" aria-label="Search" role="combobox" aria-expanded="true" aria-controls=":Rt:" autoComplete="off" value=""/>
|
|
4206
|
+
<input class="gb-search-input" type="search" placeholder="Search…" aria-label="Search" role="combobox" aria-expanded="true" aria-controls=":c59-Rt:" autoComplete="off" value=""/>
|
|
4207
4207
|
</div>
|
|
4208
4208
|
<p class="gb-search-empty" aria-live="polite">
|
|
4209
4209
|
</p>
|
|
4210
|
-
<div class="gb-search-results" id=":Rt:" role="listbox" aria-busy="false">
|
|
4210
|
+
<div class="gb-search-results" id=":c59-Rt:" role="listbox" aria-busy="false">
|
|
4211
4211
|
</div>
|
|
4212
4212
|
<div class="gb-search-foot" aria-hidden="true">
|
|
4213
4213
|
<span>↵ open</span>
|
|
@@ -4404,7 +4404,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
4404
4404
|
</a>
|
|
4405
4405
|
</li>
|
|
4406
4406
|
</ol></code></pre></details></figure></section>
|
|
4407
|
-
<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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.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" data-label-show="Hiện" data-label-hide="Ẩ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">
|
|
4407
|
+
<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"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.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" data-label-show="Hiện" data-label-hide="Ẩ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">
|
|
4408
4408
|
<div class="gb-auth-split">
|
|
4409
4409
|
<div class="gb-auth-stage">
|
|
4410
4410
|
<div class="gb-auth-card">
|
|
@@ -4690,7 +4690,159 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
4690
4690
|
</div>
|
|
4691
4691
|
</div>
|
|
4692
4692
|
</div></code></pre></details></figure></section>
|
|
4693
|
-
<section id="assistant"><h2>Trợ lý:
|
|
4693
|
+
<section id="assistant-engine"><h2>Trợ lý: chọn engine</h2><p><code>EnginePicker</code> (<code>@gemboss/ui/assistant</code>, CSS <code>assistant-engine.css</code> do component tự nạp). Một chip ở hàng soạn tin như admin: tên engine, model nếu khác mặc định, chấm cầu nối (xanh chạy, vàng lỗi thời, đỏ mất kết nối, rỗng đang kiểm). Bấm mở popup ở top layer với ba tab: Engine (engine, model, effort), Setup (lệnh cài/cập nhật + Copy, mã ghép nối), Status (trạng thái, phiên bản, tự khởi động). Không chèn khối nào vào khung chat; lượt hỏng vì cầu nối hiện MỘT dòng <code>BridgeNotice</code> có "Open setup" mở đúng tab Setup. Dữ liệu và logic cầu nối là của bề mặt.</p><figure class="cat-demo"><figcaption>Chip theo trạng thái cầu nối: chạy, lỗi thời, mất kết nối, đang kiểm</figcaption><div class="cat-live"><div class="cat-row"><span class="gb-engine"><button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c70-R0:" aria-label="Engine: Claude Code · Opus" title="Engine: Claude Code · Opus"><span class="gb-engine-dot gb-engine-dot--ok" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span></button><div id=":c70-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span><span class="gb-engine"><button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c71-R0:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Outdated" title="Engine: Claude Code · Opus. Bridge on your machine: Outdated"><span class="gb-engine-dot gb-engine-dot--warn" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span></button><div id=":c71-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span><span class="gb-engine"><button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c72-R0:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Not connected" title="Engine: Claude Code · Opus. Bridge on your machine: Not connected"><span class="gb-engine-dot gb-engine-dot--down" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span></button><div id=":c72-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span><span class="gb-engine"><button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c73-R0:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Checking" title="Engine: Claude Code · Opus. Bridge on your machine: Checking"><span class="gb-engine-dot gb-engine-dot--idle" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span></button><div id=":c73-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="cat-row">
|
|
4694
|
+
<span class="gb-engine">
|
|
4695
|
+
<button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c70-R0:" aria-label="Engine: Claude Code · Opus" title="Engine: Claude Code · Opus">
|
|
4696
|
+
<span class="gb-engine-dot gb-engine-dot--ok" aria-hidden="true">
|
|
4697
|
+
</span>
|
|
4698
|
+
<span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span>
|
|
4699
|
+
</span>
|
|
4700
|
+
</button>
|
|
4701
|
+
<div id=":c70-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden="">
|
|
4702
|
+
</div>
|
|
4703
|
+
</span>
|
|
4704
|
+
<span class="gb-engine">
|
|
4705
|
+
<button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c71-R0:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Outdated" title="Engine: Claude Code · Opus. Bridge on your machine: Outdated">
|
|
4706
|
+
<span class="gb-engine-dot gb-engine-dot--warn" aria-hidden="true">
|
|
4707
|
+
</span>
|
|
4708
|
+
<span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span>
|
|
4709
|
+
</span>
|
|
4710
|
+
</button>
|
|
4711
|
+
<div id=":c71-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden="">
|
|
4712
|
+
</div>
|
|
4713
|
+
</span>
|
|
4714
|
+
<span class="gb-engine">
|
|
4715
|
+
<button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c72-R0:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Not connected" title="Engine: Claude Code · Opus. Bridge on your machine: Not connected">
|
|
4716
|
+
<span class="gb-engine-dot gb-engine-dot--down" aria-hidden="true">
|
|
4717
|
+
</span>
|
|
4718
|
+
<span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span>
|
|
4719
|
+
</span>
|
|
4720
|
+
</button>
|
|
4721
|
+
<div id=":c72-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden="">
|
|
4722
|
+
</div>
|
|
4723
|
+
</span>
|
|
4724
|
+
<span class="gb-engine">
|
|
4725
|
+
<button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c73-R0:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Checking" title="Engine: Claude Code · Opus. Bridge on your machine: Checking">
|
|
4726
|
+
<span class="gb-engine-dot gb-engine-dot--idle" aria-hidden="true">
|
|
4727
|
+
</span>
|
|
4728
|
+
<span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span>
|
|
4729
|
+
</span>
|
|
4730
|
+
</button>
|
|
4731
|
+
<div id=":c73-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden="">
|
|
4732
|
+
</div>
|
|
4733
|
+
</span>
|
|
4734
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Popup, tab Engine</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c74-R0:-tab-engine" aria-controls=":c74-R0:-pane-engine" aria-selected="true" tabindex="0">Engine</button><button type="button" role="tab" id=":c74-R0:-tab-setup" aria-controls=":c74-R0:-pane-setup" aria-selected="false" tabindex="-1">Setup<span class="gb-engine-dot gb-engine-dot--warn" role="img" aria-label="Update available"></span></button><button type="button" role="tab" id=":c74-R0:-tab-status" aria-controls=":c74-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c74-R0:-pane-engine" aria-labelledby=":c74-R0:-tab-engine"><div class="gb-engine-field"><span class="gb-engine-label" id=":c74-Rd:">Engine</span><div class="gb-engine-list" role="radiogroup" aria-labelledby=":c74-Rd:"><button type="button" role="radio" aria-checked="true" data-engine="claude" tabindex="0" class="gb-engine-row"><span class="gb-engine-rowhead"><span class="gb-engine-rowname">Claude Code</span><span class="ui-badge ui-badge--success">your plan</span></span><span class="gb-engine-note">Your Claude subscription, through the bridge on your machine</span></button><button type="button" role="radio" aria-checked="false" data-engine="codex" tabindex="-1" class="gb-engine-row" disabled=""><span class="gb-engine-rowhead"><span class="gb-engine-rowname">Codex</span><span class="ui-badge ui-badge--warning">not installed</span></span><span class="gb-engine-note">Install Codex on that machine, then reopen this</span></button><button type="button" role="radio" aria-checked="false" data-engine="server" tabindex="-1" class="gb-engine-row"><span class="gb-engine-rowhead"><span class="gb-engine-rowname">Server</span></span><span class="gb-engine-note">Content Radar's own capacity</span></button></div></div><div class="gb-engine-field"><span class="gb-engine-label" id=":c74-R5d:">Model</span><div class="gb-engine-opts" role="group" aria-labelledby=":c74-R5d:"><button type="button" class="gb-engine-opt" aria-pressed="false">Default</button><button type="button" class="gb-engine-opt" aria-pressed="true">Opus</button><button type="button" class="gb-engine-opt" aria-pressed="false">Sonnet</button><button type="button" class="gb-engine-opt" aria-pressed="false">Haiku</button></div></div><div class="gb-engine-field"><span class="gb-engine-label" id=":c74-R7d:">Effort</span><div class="gb-engine-opts" role="group" aria-labelledby=":c74-R7d:"><button type="button" class="gb-engine-opt" aria-pressed="true">Default</button><button type="button" class="gb-engine-opt" aria-pressed="false">Low</button><button type="button" class="gb-engine-opt" aria-pressed="false">Medium</button><button type="button" class="gb-engine-opt" aria-pressed="false">High</button><button type="button" class="gb-engine-opt" aria-pressed="false">Max</button></div></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="max-width:360px">
|
|
4735
|
+
<div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine">
|
|
4736
|
+
<div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status">
|
|
4737
|
+
<button type="button" role="tab" id=":c74-R0:-tab-engine" aria-controls=":c74-R0:-pane-engine" aria-selected="true" tabindex="0">Engine</button>
|
|
4738
|
+
<button type="button" role="tab" id=":c74-R0:-tab-setup" aria-controls=":c74-R0:-pane-setup" aria-selected="false" tabindex="-1">Setup<span class="gb-engine-dot gb-engine-dot--warn" role="img" aria-label="Update available">
|
|
4739
|
+
</span>
|
|
4740
|
+
</button>
|
|
4741
|
+
<button type="button" role="tab" id=":c74-R0:-tab-status" aria-controls=":c74-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button>
|
|
4742
|
+
</div>
|
|
4743
|
+
<div class="gb-engine-pane" role="tabpanel" id=":c74-R0:-pane-engine" aria-labelledby=":c74-R0:-tab-engine">
|
|
4744
|
+
<div class="gb-engine-field">
|
|
4745
|
+
<span class="gb-engine-label" id=":c74-Rd:">Engine</span>
|
|
4746
|
+
<div class="gb-engine-list" role="radiogroup" aria-labelledby=":c74-Rd:">
|
|
4747
|
+
<button type="button" role="radio" aria-checked="true" data-engine="claude" tabindex="0" class="gb-engine-row">
|
|
4748
|
+
<span class="gb-engine-rowhead">
|
|
4749
|
+
<span class="gb-engine-rowname">Claude Code</span>
|
|
4750
|
+
<span class="ui-badge ui-badge--success">your plan</span>
|
|
4751
|
+
</span>
|
|
4752
|
+
<span class="gb-engine-note">Your Claude subscription, through the bridge on your machine</span>
|
|
4753
|
+
</button>
|
|
4754
|
+
<button type="button" role="radio" aria-checked="false" data-engine="codex" tabindex="-1" class="gb-engine-row" disabled="">
|
|
4755
|
+
<span class="gb-engine-rowhead">
|
|
4756
|
+
<span class="gb-engine-rowname">Codex</span>
|
|
4757
|
+
<span class="ui-badge ui-badge--warning">not installed</span>
|
|
4758
|
+
</span>
|
|
4759
|
+
<span class="gb-engine-note">Install Codex on that machine, then reopen this</span>
|
|
4760
|
+
</button>
|
|
4761
|
+
<button type="button" role="radio" aria-checked="false" data-engine="server" tabindex="-1" class="gb-engine-row">
|
|
4762
|
+
<span class="gb-engine-rowhead">
|
|
4763
|
+
<span class="gb-engine-rowname">Server</span>
|
|
4764
|
+
</span>
|
|
4765
|
+
<span class="gb-engine-note">Content Radar&#x27;s own capacity</span>
|
|
4766
|
+
</button>
|
|
4767
|
+
</div>
|
|
4768
|
+
</div>
|
|
4769
|
+
<div class="gb-engine-field">
|
|
4770
|
+
<span class="gb-engine-label" id=":c74-R5d:">Model</span>
|
|
4771
|
+
<div class="gb-engine-opts" role="group" aria-labelledby=":c74-R5d:">
|
|
4772
|
+
<button type="button" class="gb-engine-opt" aria-pressed="false">Default</button>
|
|
4773
|
+
<button type="button" class="gb-engine-opt" aria-pressed="true">Opus</button>
|
|
4774
|
+
<button type="button" class="gb-engine-opt" aria-pressed="false">Sonnet</button>
|
|
4775
|
+
<button type="button" class="gb-engine-opt" aria-pressed="false">Haiku</button>
|
|
4776
|
+
</div>
|
|
4777
|
+
</div>
|
|
4778
|
+
<div class="gb-engine-field">
|
|
4779
|
+
<span class="gb-engine-label" id=":c74-R7d:">Effort</span>
|
|
4780
|
+
<div class="gb-engine-opts" role="group" aria-labelledby=":c74-R7d:">
|
|
4781
|
+
<button type="button" class="gb-engine-opt" aria-pressed="true">Default</button>
|
|
4782
|
+
<button type="button" class="gb-engine-opt" aria-pressed="false">Low</button>
|
|
4783
|
+
<button type="button" class="gb-engine-opt" aria-pressed="false">Medium</button>
|
|
4784
|
+
<button type="button" class="gb-engine-opt" aria-pressed="false">High</button>
|
|
4785
|
+
<button type="button" class="gb-engine-opt" aria-pressed="false">Max</button>
|
|
4786
|
+
</div>
|
|
4787
|
+
</div>
|
|
4788
|
+
</div>
|
|
4789
|
+
</div>
|
|
4790
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Popup, tab Setup (cầu nối lỗi thời)</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c75-R0:-tab-engine" aria-controls=":c75-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c75-R0:-tab-setup" aria-controls=":c75-R0:-pane-setup" aria-selected="true" tabindex="0">Setup<span class="gb-engine-dot gb-engine-dot--warn" role="img" aria-label="Update available"></span></button><button type="button" role="tab" id=":c75-R0:-tab-status" aria-controls=":c75-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c75-R0:-pane-setup" aria-labelledby=":c75-R0:-tab-setup"><p class="gb-engine-callout gb-engine-callout--warn"><strong>Bridge on your machine: outdated.</strong> A turn can fail with "The bridge has no data token", and Codex cannot see the radar tools.</p><div class="gb-engine-steps"><p>Paste the command into Terminal, then press Enter.</p></div><pre class="gb-engine-cmd"><code>curl -fsSL https://content-radar.ops.gemboss.ai/bridge/install.sh | sh -s -- --code 5PQFMWW9 --autostart</code></pre><div class="gb-engine-actions"><button type="button" class="ui-btn ui-btn--primary">Copy command</button><span class="gb-engine-said" role="status"></span></div><p class="gb-engine-note">The pairing code stays the same: the panel reconnects in a few seconds.</p></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="max-width:360px">
|
|
4791
|
+
<div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine">
|
|
4792
|
+
<div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status">
|
|
4793
|
+
<button type="button" role="tab" id=":c75-R0:-tab-engine" aria-controls=":c75-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button>
|
|
4794
|
+
<button type="button" role="tab" id=":c75-R0:-tab-setup" aria-controls=":c75-R0:-pane-setup" aria-selected="true" tabindex="0">Setup<span class="gb-engine-dot gb-engine-dot--warn" role="img" aria-label="Update available">
|
|
4795
|
+
</span>
|
|
4796
|
+
</button>
|
|
4797
|
+
<button type="button" role="tab" id=":c75-R0:-tab-status" aria-controls=":c75-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button>
|
|
4798
|
+
</div>
|
|
4799
|
+
<div class="gb-engine-pane" role="tabpanel" id=":c75-R0:-pane-setup" aria-labelledby=":c75-R0:-tab-setup">
|
|
4800
|
+
<p class="gb-engine-callout gb-engine-callout--warn">
|
|
4801
|
+
<strong>Bridge on your machine: outdated.</strong> A turn can fail with &quot;The bridge has no data token&quot;, and Codex cannot see the radar tools.</p>
|
|
4802
|
+
<div class="gb-engine-steps">
|
|
4803
|
+
<p>Paste the command into Terminal, then press Enter.</p>
|
|
4804
|
+
</div>
|
|
4805
|
+
<pre class="gb-engine-cmd">
|
|
4806
|
+
<code>curl -fsSL https://content-radar.ops.gemboss.ai/bridge/install.sh | sh -s -- --code 5PQFMWW9 --autostart</code>
|
|
4807
|
+
</pre>
|
|
4808
|
+
<div class="gb-engine-actions">
|
|
4809
|
+
<button type="button" class="ui-btn ui-btn--primary">Copy command</button>
|
|
4810
|
+
<span class="gb-engine-said" role="status">
|
|
4811
|
+
</span>
|
|
4812
|
+
</div>
|
|
4813
|
+
<p class="gb-engine-note">The pairing code stays the same: the panel reconnects in a few seconds.</p>
|
|
4814
|
+
</div>
|
|
4815
|
+
</div>
|
|
4816
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Popup, tab Status</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c76-R0:-tab-engine" aria-controls=":c76-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c76-R0:-tab-setup" aria-controls=":c76-R0:-pane-setup" aria-selected="false" tabindex="-1">Setup<span class="gb-engine-dot gb-engine-dot--warn" role="img" aria-label="Update available"></span></button><button type="button" role="tab" id=":c76-R0:-tab-status" aria-controls=":c76-R0:-pane-status" aria-selected="true" tabindex="0">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c76-R0:-pane-status" aria-labelledby=":c76-R0:-tab-status"><dl class="gb-engine-rows"><dt>Bridge on your machine</dt><dd><span class="gb-engine-dot gb-engine-dot--warn" aria-hidden="true"></span> Outdated</dd><dt>Version</dt><dd>8 · Latest 10</dd><dt>Starts at sign-in</dt><dd>Yes</dd></dl><p class="gb-engine-note">A turn can fail with "The bridge has no data token", and Codex cannot see the radar tools.</p></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="max-width:360px">
|
|
4817
|
+
<div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine">
|
|
4818
|
+
<div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status">
|
|
4819
|
+
<button type="button" role="tab" id=":c76-R0:-tab-engine" aria-controls=":c76-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button>
|
|
4820
|
+
<button type="button" role="tab" id=":c76-R0:-tab-setup" aria-controls=":c76-R0:-pane-setup" aria-selected="false" tabindex="-1">Setup<span class="gb-engine-dot gb-engine-dot--warn" role="img" aria-label="Update available">
|
|
4821
|
+
</span>
|
|
4822
|
+
</button>
|
|
4823
|
+
<button type="button" role="tab" id=":c76-R0:-tab-status" aria-controls=":c76-R0:-pane-status" aria-selected="true" tabindex="0">Status</button>
|
|
4824
|
+
</div>
|
|
4825
|
+
<div class="gb-engine-pane" role="tabpanel" id=":c76-R0:-pane-status" aria-labelledby=":c76-R0:-tab-status">
|
|
4826
|
+
<dl class="gb-engine-rows">
|
|
4827
|
+
<dt>Bridge on your machine</dt>
|
|
4828
|
+
<dd>
|
|
4829
|
+
<span class="gb-engine-dot gb-engine-dot--warn" aria-hidden="true">
|
|
4830
|
+
</span> Outdated</dd>
|
|
4831
|
+
<dt>Version</dt>
|
|
4832
|
+
<dd>8 · Latest 10</dd>
|
|
4833
|
+
<dt>Starts at sign-in</dt>
|
|
4834
|
+
<dd>Yes</dd>
|
|
4835
|
+
</dl>
|
|
4836
|
+
<p class="gb-engine-note">A turn can fail with &quot;The bridge has no data token&quot;, and Codex cannot see the radar tools.</p>
|
|
4837
|
+
</div>
|
|
4838
|
+
</div>
|
|
4839
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>BridgeNotice: một dòng trong luồng chat khi lượt hỏng vì cầu nối</figcaption><div class="cat-live"><p class="gb-engine-notice gb-engine-notice--down" role="status"><span class="gb-engine-dot gb-engine-dot--down" aria-hidden="true"></span><span class="gb-engine-notice-text">The bridge on your machine is not responding: it was stopped, or the machine slept.</span><button type="button" class="gb-engine-notice-link">Open setup</button></p></div><details class="cat-code"><summary>Markup</summary><pre><code><p class="gb-engine-notice gb-engine-notice--down" role="status">
|
|
4840
|
+
<span class="gb-engine-dot gb-engine-dot--down" aria-hidden="true">
|
|
4841
|
+
</span>
|
|
4842
|
+
<span class="gb-engine-notice-text">The bridge on your machine is not responding: it was stopped, or the machine slept.</span>
|
|
4843
|
+
<button type="button" class="gb-engine-notice-link">Open setup</button>
|
|
4844
|
+
</p></code></pre></details></figure></section>
|
|
4845
|
+
<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 / cột phải cao hết màn (<code>allowSide</code>) / 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">29/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">
|
|
4694
4846
|
<aside class="gemboss-assistant-rail">
|
|
4695
4847
|
<div class="gemboss-assistant-rail-top">
|
|
4696
4848
|
<button type="button" class="gemboss-assistant-newchat" title="Phiên mới">
|
|
@@ -4739,7 +4891,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
4739
4891
|
</svg>
|
|
4740
4892
|
<span class="gemboss-assistant-thread-title">So sánh advertorial với listicle</span>
|
|
4741
4893
|
</span>
|
|
4742
|
-
<span class="gemboss-assistant-thread-meta">
|
|
4894
|
+
<span class="gemboss-assistant-thread-meta">29/8/2026</span>
|
|
4743
4895
|
</button>
|
|
4744
4896
|
<div class="gemboss-assistant-thread-actions">
|
|
4745
4897
|
<button type="button" class="gemboss-assistant-thread-act" aria-label="Options">
|