@gemboss/ui 0.7.1 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +88 -6
- package/catalog/index.html +71 -34
- package/gemboss-ui.css +79 -31
- package/package.json +3 -1
- package/src/assistant/dock.ts +19 -18
- package/src/assistant/host.tsx +40 -5
- package/src/assistant/provider.tsx +43 -19
- package/src/kit-plain.css +31 -12
- package/src/portal.css +14 -62
- package/src/portal.tsx +24 -12
- package/src/theme-dark.css +65 -0
- package/src/ui.css +23 -13
package/catalog/index.html
CHANGED
|
@@ -27,7 +27,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
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
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="#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="#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="#assistant">Trợ lý: cột phiên</a><a href="#icons">Icon</a></nav>
|
|
30
|
-
<main><header class="cat-head"><h1>@gemboss/ui 0.
|
|
30
|
+
<main><header class="cat-head"><h1>@gemboss/ui 0.8.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>680adcf8cd14</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 32px dưới chuột (bằng ô nhập và ô chọn), 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>
|
|
@@ -248,7 +248,44 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
248
248
|
<span aria-current="page">2 / 9</span>
|
|
249
249
|
<a href="#" rel="next">Sau <span aria-hidden="true">›</span>
|
|
250
250
|
</a>
|
|
251
|
-
</nav></code></pre></details></figure><figure class="cat-demo"><figcaption>
|
|
251
|
+
</nav></code></pre></details></figure><figure class="cat-demo"><figcaption>Phân trang có số trang (<code>ui-pager</code> + <code>__gap</code> · <code>__range</code>, mép <code><a role=link aria-disabled></code>): danh sách làm việc, vị trí nằm trên URL</figcaption><div class="cat-live"><nav class="ui-pager" aria-label="Pages"><a href="#" rel="prev"><span aria-hidden="true">‹</span> Previous</a><a href="#">1</a><span class="ui-pager__gap" aria-hidden="true">…</span><a href="#">4</a><a href="#" aria-current="page">5</a><a href="#">6</a><span class="ui-pager__gap" aria-hidden="true">…</span><a href="#">14</a><a href="#" rel="next">Next <span aria-hidden="true">›</span></a><span class="ui-pager__range">201–250 of 655</span></nav><nav class="ui-pager" aria-label="Pages"><a role="link" aria-disabled="true"><span aria-hidden="true">‹</span> Previous</a><a href="#" aria-current="page">1</a><a href="#">2</a><a href="#">3</a><a href="#" rel="next">Next <span aria-hidden="true">›</span></a><span class="ui-pager__range">1–50 of 131</span></nav></div><details class="cat-code"><summary>Markup</summary><pre><code><nav class="ui-pager" aria-label="Pages">
|
|
252
|
+
<a href="#" rel="prev">
|
|
253
|
+
<span aria-hidden="true">‹</span> Previous</a>
|
|
254
|
+
<a href="#">1</a>
|
|
255
|
+
<span class="ui-pager__gap" aria-hidden="true">…</span>
|
|
256
|
+
<a href="#">4</a>
|
|
257
|
+
<a href="#" aria-current="page">5</a>
|
|
258
|
+
<a href="#">6</a>
|
|
259
|
+
<span class="ui-pager__gap" aria-hidden="true">…</span>
|
|
260
|
+
<a href="#">14</a>
|
|
261
|
+
<a href="#" rel="next">Next <span aria-hidden="true">›</span>
|
|
262
|
+
</a>
|
|
263
|
+
<span class="ui-pager__range">201–250 of 655</span>
|
|
264
|
+
</nav>
|
|
265
|
+
<nav class="ui-pager" aria-label="Pages">
|
|
266
|
+
<a role="link" aria-disabled="true">
|
|
267
|
+
<span aria-hidden="true">‹</span> Previous</a>
|
|
268
|
+
<a href="#" aria-current="page">1</a>
|
|
269
|
+
<a href="#">2</a>
|
|
270
|
+
<a href="#">3</a>
|
|
271
|
+
<a href="#" rel="next">Next <span aria-hidden="true">›</span>
|
|
272
|
+
</a>
|
|
273
|
+
<span class="ui-pager__range">1–50 of 131</span>
|
|
274
|
+
</nav></code></pre></details></figure><figure class="cat-demo"><figcaption>Tải thêm (<code>ui-more</code>): feed, cột Kanban. Bốn trạng thái: chờ · đang tải · lỗi · hết</figcaption><div class="cat-live"><div class="ui-more"><button type="button" class="ui-btn">Load more</button></div><div class="ui-more"><span class="ui-spinner" aria-hidden="true"></span><span role="status">Loading…</span></div><div class="ui-more"><span role="alert">Couldn't load.</span><button type="button" class="ui-btn">Try again</button></div><div class="ui-more"><span>That's everything</span></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-more">
|
|
275
|
+
<button type="button" class="ui-btn">Load more</button>
|
|
276
|
+
</div>
|
|
277
|
+
<div class="ui-more">
|
|
278
|
+
<span class="ui-spinner" aria-hidden="true">
|
|
279
|
+
</span>
|
|
280
|
+
<span role="status">Loading…</span>
|
|
281
|
+
</div>
|
|
282
|
+
<div class="ui-more">
|
|
283
|
+
<span role="alert">Couldn't load.</span>
|
|
284
|
+
<button type="button" class="ui-btn">Try again</button>
|
|
285
|
+
</div>
|
|
286
|
+
<div class="ui-more">
|
|
287
|
+
<span>That's everything</span>
|
|
288
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Link (<code>ui-link</code>) · HTML sinh ra (<code>ui-prose</code>: mọi <code><a></code> không class bên trong)</figcaption><div class="cat-live"><p>Xem <a class="ui-link" href="#">báo cáo đối thủ</a> trước khi gửi.</p><div class="ui-prose"><p>Đoạn markdown: nguồn ở <a href="#">trang tích hợp của Replo</a>.</p></div></div><details class="cat-code"><summary>Markup</summary><pre><code><p>Xem <a class="ui-link" href="#">báo cáo đối thủ</a> trước khi gửi.</p>
|
|
252
289
|
<div class="ui-prose">
|
|
253
290
|
<p>Đoạn markdown: nguồn ở <a href="#">trang tích hợp của Replo</a>.</p>
|
|
254
291
|
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Thẻ có ảnh (<code>ui-card--media</code>: <code>__media</code> 16:10 · <code>__body</code> · <code>__foot</code>)</figcaption><div class="cat-live"><div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:12px"><article class="ui-card ui-card--media"><button type="button" class="ui-card__media" aria-label="Xem lớn"><img alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Crect width='16' height='10' fill='%23e9e7f7'/%3E%3Crect x='2' y='2' width='7' height='1.2' rx='.4' fill='%235661f5'/%3E%3Crect x='2' y='4.2' width='10' height='.8' rx='.3' fill='%23b9bdf0'/%3E%3C/svg%3E"></button><div class="ui-card__body"><h3 class="ui-card__title" style="margin:0">#392 Thẻ sản phẩm so sánh</h3><span class="ui-tag">comparison-table</span></div><div class="ui-card__foot"><span>Minh Anh · v5</span><span>2 giờ trước</span></div></article></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:12px">
|
|
@@ -715,7 +752,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
715
752
|
</div>
|
|
716
753
|
</main>
|
|
717
754
|
</div></code></pre></details></figure></section>
|
|
718
|
-
<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"></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="ui-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="ui-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="ui-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="ui-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="ui-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="ui-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="ui-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="ui-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="ui-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="ui-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">
|
|
755
|
+
<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"></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">
|
|
719
756
|
<header class="gemboss-platform-topbar">
|
|
720
757
|
<div class="gemboss-topbar-start">
|
|
721
758
|
<a class="gb-brand" href="/" aria-label="GemFeedback home">
|
|
@@ -811,11 +848,11 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
811
848
|
<a href="#portal" class="gb-leaderboard-link">
|
|
812
849
|
<span class="gb-leaderboard-rank">
|
|
813
850
|
<span aria-hidden="true">🥇</span>
|
|
814
|
-
<span class="
|
|
851
|
+
<span class="gb-sr-only">Rank 1: </span>
|
|
815
852
|
</span>
|
|
816
853
|
<span class="gb-avatar gb-avatar--24" data-tone="2" aria-hidden="true">LN</span>
|
|
817
854
|
<span class="gb-leaderboard-name">Lucas Nguyen</span>
|
|
818
|
-
<span class="gb-leaderboard-value">163<span class="
|
|
855
|
+
<span class="gb-leaderboard-value">163<span class="gb-sr-only"> votes</span>
|
|
819
856
|
</span>
|
|
820
857
|
</a>
|
|
821
858
|
</li>
|
|
@@ -823,11 +860,11 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
823
860
|
<a href="#portal" class="gb-leaderboard-link">
|
|
824
861
|
<span class="gb-leaderboard-rank">
|
|
825
862
|
<span aria-hidden="true">🥈</span>
|
|
826
|
-
<span class="
|
|
863
|
+
<span class="gb-sr-only">Rank 2: </span>
|
|
827
864
|
</span>
|
|
828
865
|
<span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">DC</span>
|
|
829
866
|
<span class="gb-leaderboard-name">Dima Chernyshov</span>
|
|
830
|
-
<span class="gb-leaderboard-value">56<span class="
|
|
867
|
+
<span class="gb-leaderboard-value">56<span class="gb-sr-only"> votes</span>
|
|
831
868
|
</span>
|
|
832
869
|
</a>
|
|
833
870
|
</li>
|
|
@@ -835,11 +872,11 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
835
872
|
<a href="#portal" class="gb-leaderboard-link">
|
|
836
873
|
<span class="gb-leaderboard-rank">
|
|
837
874
|
<span aria-hidden="true">🥉</span>
|
|
838
|
-
<span class="
|
|
875
|
+
<span class="gb-sr-only">Rank 3: </span>
|
|
839
876
|
</span>
|
|
840
877
|
<span class="gb-avatar gb-avatar--24" data-tone="5" aria-hidden="true">AR</span>
|
|
841
878
|
<span class="gb-leaderboard-name">Artjom</span>
|
|
842
|
-
<span class="gb-leaderboard-value">55<span class="
|
|
879
|
+
<span class="gb-leaderboard-value">55<span class="gb-sr-only"> votes</span>
|
|
843
880
|
</span>
|
|
844
881
|
</a>
|
|
845
882
|
</li>
|
|
@@ -847,11 +884,11 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
847
884
|
<a href="#portal" class="gb-leaderboard-link">
|
|
848
885
|
<span class="gb-leaderboard-rank is-number">
|
|
849
886
|
<span aria-hidden="true">4</span>
|
|
850
|
-
<span class="
|
|
887
|
+
<span class="gb-sr-only">Rank 4: </span>
|
|
851
888
|
</span>
|
|
852
889
|
<span class="gb-avatar gb-avatar--24" data-tone="4" aria-hidden="true">GU</span>
|
|
853
890
|
<span class="gb-leaderboard-name">GutBrush</span>
|
|
854
|
-
<span class="gb-leaderboard-value">34<span class="
|
|
891
|
+
<span class="gb-leaderboard-value">34<span class="gb-sr-only"> votes</span>
|
|
855
892
|
</span>
|
|
856
893
|
</a>
|
|
857
894
|
</li>
|
|
@@ -859,11 +896,11 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
859
896
|
<a href="#portal" class="gb-leaderboard-link">
|
|
860
897
|
<span class="gb-leaderboard-rank is-number">
|
|
861
898
|
<span aria-hidden="true">5</span>
|
|
862
|
-
<span class="
|
|
899
|
+
<span class="gb-sr-only">Rank 5: </span>
|
|
863
900
|
</span>
|
|
864
901
|
<span class="gb-avatar gb-avatar--24" data-tone="5" aria-hidden="true">WO</span>
|
|
865
902
|
<span class="gb-leaderboard-name">Wondercraft</span>
|
|
866
|
-
<span class="gb-leaderboard-value">30<span class="
|
|
903
|
+
<span class="gb-leaderboard-value">30<span class="gb-sr-only"> votes</span>
|
|
867
904
|
</span>
|
|
868
905
|
</a>
|
|
869
906
|
</li>
|
|
@@ -871,7 +908,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
871
908
|
</section>
|
|
872
909
|
</div>
|
|
873
910
|
</div>
|
|
874
|
-
</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"></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="
|
|
911
|
+
</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"></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">
|
|
875
912
|
<header class="gemboss-platform-topbar">
|
|
876
913
|
<div class="gemboss-topbar-start">
|
|
877
914
|
<a class="gb-brand" href="/" aria-label="GemFeedback home">
|
|
@@ -967,11 +1004,11 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
967
1004
|
<a href="#portal" class="gb-leaderboard-link">
|
|
968
1005
|
<span class="gb-leaderboard-rank">
|
|
969
1006
|
<span aria-hidden="true">🥇</span>
|
|
970
|
-
<span class="
|
|
1007
|
+
<span class="gb-sr-only">Rank 1: </span>
|
|
971
1008
|
</span>
|
|
972
1009
|
<span class="gb-avatar gb-avatar--24" data-tone="2" aria-hidden="true">LN</span>
|
|
973
1010
|
<span class="gb-leaderboard-name">Lucas Nguyen</span>
|
|
974
|
-
<span class="gb-leaderboard-value">163<span class="
|
|
1011
|
+
<span class="gb-leaderboard-value">163<span class="gb-sr-only"> votes</span>
|
|
975
1012
|
</span>
|
|
976
1013
|
</a>
|
|
977
1014
|
</li>
|
|
@@ -979,11 +1016,11 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
979
1016
|
<a href="#portal" class="gb-leaderboard-link">
|
|
980
1017
|
<span class="gb-leaderboard-rank">
|
|
981
1018
|
<span aria-hidden="true">🥈</span>
|
|
982
|
-
<span class="
|
|
1019
|
+
<span class="gb-sr-only">Rank 2: </span>
|
|
983
1020
|
</span>
|
|
984
1021
|
<span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">DC</span>
|
|
985
1022
|
<span class="gb-leaderboard-name">Dima Chernyshov</span>
|
|
986
|
-
<span class="gb-leaderboard-value">56<span class="
|
|
1023
|
+
<span class="gb-leaderboard-value">56<span class="gb-sr-only"> votes</span>
|
|
987
1024
|
</span>
|
|
988
1025
|
</a>
|
|
989
1026
|
</li>
|
|
@@ -991,11 +1028,11 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
991
1028
|
<a href="#portal" class="gb-leaderboard-link">
|
|
992
1029
|
<span class="gb-leaderboard-rank">
|
|
993
1030
|
<span aria-hidden="true">🥉</span>
|
|
994
|
-
<span class="
|
|
1031
|
+
<span class="gb-sr-only">Rank 3: </span>
|
|
995
1032
|
</span>
|
|
996
1033
|
<span class="gb-avatar gb-avatar--24" data-tone="5" aria-hidden="true">AR</span>
|
|
997
1034
|
<span class="gb-leaderboard-name">Artjom</span>
|
|
998
|
-
<span class="gb-leaderboard-value">55<span class="
|
|
1035
|
+
<span class="gb-leaderboard-value">55<span class="gb-sr-only"> votes</span>
|
|
999
1036
|
</span>
|
|
1000
1037
|
</a>
|
|
1001
1038
|
</li>
|
|
@@ -1003,11 +1040,11 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1003
1040
|
<a href="#portal" class="gb-leaderboard-link">
|
|
1004
1041
|
<span class="gb-leaderboard-rank is-number">
|
|
1005
1042
|
<span aria-hidden="true">4</span>
|
|
1006
|
-
<span class="
|
|
1043
|
+
<span class="gb-sr-only">Rank 4: </span>
|
|
1007
1044
|
</span>
|
|
1008
1045
|
<span class="gb-avatar gb-avatar--24" data-tone="4" aria-hidden="true">GU</span>
|
|
1009
1046
|
<span class="gb-leaderboard-name">GutBrush</span>
|
|
1010
|
-
<span class="gb-leaderboard-value">34<span class="
|
|
1047
|
+
<span class="gb-leaderboard-value">34<span class="gb-sr-only"> votes</span>
|
|
1011
1048
|
</span>
|
|
1012
1049
|
</a>
|
|
1013
1050
|
</li>
|
|
@@ -1015,11 +1052,11 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1015
1052
|
<a href="#portal" class="gb-leaderboard-link">
|
|
1016
1053
|
<span class="gb-leaderboard-rank is-number">
|
|
1017
1054
|
<span aria-hidden="true">5</span>
|
|
1018
|
-
<span class="
|
|
1055
|
+
<span class="gb-sr-only">Rank 5: </span>
|
|
1019
1056
|
</span>
|
|
1020
1057
|
<span class="gb-avatar gb-avatar--24" data-tone="5" aria-hidden="true">WO</span>
|
|
1021
1058
|
<span class="gb-leaderboard-name">Wondercraft</span>
|
|
1022
|
-
<span class="gb-leaderboard-value">30<span class="
|
|
1059
|
+
<span class="gb-leaderboard-value">30<span class="gb-sr-only"> votes</span>
|
|
1023
1060
|
</span>
|
|
1024
1061
|
</a>
|
|
1025
1062
|
</li>
|
|
@@ -1033,14 +1070,14 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1033
1070
|
<span class="gb-avatar gb-avatar--40" data-tone="0" aria-hidden="true">GT</span>
|
|
1034
1071
|
<span class="gb-avatar gb-avatar--56" data-tone="1" aria-hidden="true">LA</span>
|
|
1035
1072
|
<span class="gb-avatar gb-avatar--40" data-tone="0" aria-hidden="true">BA</span>
|
|
1036
|
-
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Leaderboard: huy chương 1–3, rồi thứ hạng; số của người đầu màu vàng</figcaption><div class="cat-live"><section class="gb-leaderboard" aria-labelledby="gb-lb-top-contributors-1tvkcn7"><h2 class="gb-leaderboard-title" id="gb-lb-top-contributors-1tvkcn7">Top contributors</h2><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="
|
|
1073
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Leaderboard: huy chương 1–3, rồi thứ hạng; số của người đầu màu vàng</figcaption><div class="cat-live"><section class="gb-leaderboard" aria-labelledby="gb-lb-top-contributors-1tvkcn7"><h2 class="gb-leaderboard-title" id="gb-lb-top-contributors-1tvkcn7">Top contributors</h2><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></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></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></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></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></a></li></ol><a href="#portal" class="gb-leaderboard-all">View all</a></section></div><details class="cat-code"><summary>Markup</summary><pre><code><section class="gb-leaderboard" aria-labelledby="gb-lb-top-contributors-1tvkcn7">
|
|
1037
1074
|
<h2 class="gb-leaderboard-title" id="gb-lb-top-contributors-1tvkcn7">Top contributors</h2>
|
|
1038
1075
|
<ol class="gb-leaderboard-list">
|
|
1039
1076
|
<li class="gb-leaderboard-row is-first">
|
|
1040
1077
|
<a href="#portal" class="gb-leaderboard-link">
|
|
1041
1078
|
<span class="gb-leaderboard-rank">
|
|
1042
1079
|
<span aria-hidden="true">🥇</span>
|
|
1043
|
-
<span class="
|
|
1080
|
+
<span class="gb-sr-only">Rank 1: </span>
|
|
1044
1081
|
</span>
|
|
1045
1082
|
<span class="gb-avatar gb-avatar--24" data-tone="2" aria-hidden="true">LN</span>
|
|
1046
1083
|
<span class="gb-leaderboard-name">Lucas Nguyen</span>
|
|
@@ -1051,7 +1088,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1051
1088
|
<a href="#portal" class="gb-leaderboard-link">
|
|
1052
1089
|
<span class="gb-leaderboard-rank">
|
|
1053
1090
|
<span aria-hidden="true">🥈</span>
|
|
1054
|
-
<span class="
|
|
1091
|
+
<span class="gb-sr-only">Rank 2: </span>
|
|
1055
1092
|
</span>
|
|
1056
1093
|
<span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">DC</span>
|
|
1057
1094
|
<span class="gb-leaderboard-name">Dima Chernyshov</span>
|
|
@@ -1062,7 +1099,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1062
1099
|
<a href="#portal" class="gb-leaderboard-link">
|
|
1063
1100
|
<span class="gb-leaderboard-rank">
|
|
1064
1101
|
<span aria-hidden="true">🥉</span>
|
|
1065
|
-
<span class="
|
|
1102
|
+
<span class="gb-sr-only">Rank 3: </span>
|
|
1066
1103
|
</span>
|
|
1067
1104
|
<span class="gb-avatar gb-avatar--24" data-tone="5" aria-hidden="true">AR</span>
|
|
1068
1105
|
<span class="gb-leaderboard-name">Artjom</span>
|
|
@@ -1073,7 +1110,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1073
1110
|
<a href="#portal" class="gb-leaderboard-link">
|
|
1074
1111
|
<span class="gb-leaderboard-rank is-number">
|
|
1075
1112
|
<span aria-hidden="true">4</span>
|
|
1076
|
-
<span class="
|
|
1113
|
+
<span class="gb-sr-only">Rank 4: </span>
|
|
1077
1114
|
</span>
|
|
1078
1115
|
<span class="gb-avatar gb-avatar--24" data-tone="4" aria-hidden="true">GU</span>
|
|
1079
1116
|
<span class="gb-leaderboard-name">GutBrush</span>
|
|
@@ -1084,7 +1121,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1084
1121
|
<a href="#portal" class="gb-leaderboard-link">
|
|
1085
1122
|
<span class="gb-leaderboard-rank is-number">
|
|
1086
1123
|
<span aria-hidden="true">5</span>
|
|
1087
|
-
<span class="
|
|
1124
|
+
<span class="gb-sr-only">Rank 5: </span>
|
|
1088
1125
|
</span>
|
|
1089
1126
|
<span class="gb-avatar gb-avatar--24" data-tone="5" aria-hidden="true">WO</span>
|
|
1090
1127
|
<span class="gb-leaderboard-name">Wondercraft</span>
|
|
@@ -1093,12 +1130,12 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1093
1130
|
</li>
|
|
1094
1131
|
</ol>
|
|
1095
1132
|
<a href="#portal" class="gb-leaderboard-all">View all</a>
|
|
1096
|
-
</section></code></pre></details></figure><figure class="cat-demo"><figcaption>Podium: nhì · nhất · ba</figcaption><div class="cat-live"><ol class="gb-podium" aria-label="Top three"><li class="gb-podium-slot gb-podium-slot--2"><a href="#portal" class="gb-podium-link"><span class="gb-podium-medal"><span aria-hidden="true">🥈</span><span class="
|
|
1133
|
+
</section></code></pre></details></figure><figure class="cat-demo"><figcaption>Podium: nhì · nhất · ba</figcaption><div class="cat-live"><ol class="gb-podium" aria-label="Top three"><li class="gb-podium-slot gb-podium-slot--2"><a href="#portal" class="gb-podium-link"><span class="gb-podium-medal"><span aria-hidden="true">🥈</span><span class="gb-sr-only">Rank 2: </span></span><span class="gb-avatar gb-avatar--56" data-tone="0" aria-hidden="true">DC</span><span class="gb-podium-name">Dima Chernyshov</span><span class="gb-podium-value">56<span class="gb-podium-unit"> pts</span></span></a></li><li class="gb-podium-slot gb-podium-slot--1"><a href="#portal" class="gb-podium-link"><span class="gb-podium-medal"><span aria-hidden="true">🥇</span><span class="gb-sr-only">Rank 1: </span></span><span class="gb-avatar gb-avatar--56" data-tone="2" aria-hidden="true">LN</span><span class="gb-podium-name">Lucas Nguyen</span><span class="gb-podium-value">163<span class="gb-podium-unit"> pts</span></span></a></li><li class="gb-podium-slot gb-podium-slot--3"><a href="#portal" class="gb-podium-link"><span class="gb-podium-medal"><span aria-hidden="true">🥉</span><span class="gb-sr-only">Rank 3: </span></span><span class="gb-avatar gb-avatar--56" data-tone="5" aria-hidden="true">AR</span><span class="gb-podium-name">Artjom</span><span class="gb-podium-value">55<span class="gb-podium-unit"> pts</span></span></a></li></ol></div><details class="cat-code"><summary>Markup</summary><pre><code><ol class="gb-podium" aria-label="Top three">
|
|
1097
1134
|
<li class="gb-podium-slot gb-podium-slot--2">
|
|
1098
1135
|
<a href="#portal" class="gb-podium-link">
|
|
1099
1136
|
<span class="gb-podium-medal">
|
|
1100
1137
|
<span aria-hidden="true">🥈</span>
|
|
1101
|
-
<span class="
|
|
1138
|
+
<span class="gb-sr-only">Rank 2: </span>
|
|
1102
1139
|
</span>
|
|
1103
1140
|
<span class="gb-avatar gb-avatar--56" data-tone="0" aria-hidden="true">DC</span>
|
|
1104
1141
|
<span class="gb-podium-name">Dima Chernyshov</span>
|
|
@@ -1110,7 +1147,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1110
1147
|
<a href="#portal" class="gb-podium-link">
|
|
1111
1148
|
<span class="gb-podium-medal">
|
|
1112
1149
|
<span aria-hidden="true">🥇</span>
|
|
1113
|
-
<span class="
|
|
1150
|
+
<span class="gb-sr-only">Rank 1: </span>
|
|
1114
1151
|
</span>
|
|
1115
1152
|
<span class="gb-avatar gb-avatar--56" data-tone="2" aria-hidden="true">LN</span>
|
|
1116
1153
|
<span class="gb-podium-name">Lucas Nguyen</span>
|
|
@@ -1122,7 +1159,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
1122
1159
|
<a href="#portal" class="gb-podium-link">
|
|
1123
1160
|
<span class="gb-podium-medal">
|
|
1124
1161
|
<span aria-hidden="true">🥉</span>
|
|
1125
|
-
<span class="
|
|
1162
|
+
<span class="gb-sr-only">Rank 3: </span>
|
|
1126
1163
|
</span>
|
|
1127
1164
|
<span class="gb-avatar gb-avatar--56" data-tone="5" aria-hidden="true">AR</span>
|
|
1128
1165
|
<span class="gb-podium-name">Artjom</span>
|