# 5 分鐘預測頁 排版優化 spec（給 Web3技術 實作）

- 頁面：`/prediction/`（5 分鐘 BTC 分頁）
- 風格：style 01 曜黑琉璃
- 設計稿：`mockup.html?v=m-bets | m-placed | m-empty | m-states | d-bets | d-placed | d-empty`
- 圖檔：`renders/*.png`（2x）
- 範圍：只改這一頁的排版和元件狀態。合約、資料、API 都不動，也不新增功能。
- 文案：所有字串照舊走 i18n。下面「新增 / 變更字串」那一節列出的是需要新加的 key。

---

## 1. 這次改了什麼、為什麼

| # | 現況 | 新版 | 為什麼 |
|---|---|---|---|
| 1 | 圖表卡底部有一個「進行中 00:24」，下注卡又有一個「距離鎖定 00:24」，兩個倒數長得一樣，很難分 | 圖表卡底部改成一行小字「● 進行中 #612 · 距離結算 00:24」，下面一條白色細進度條。下注卡的倒數放大，是本區唯一的主角，進度條用橘色 | 一眼就分得出「正在結算的回合」和「現在可以下注的回合」 |
| 2 | 下注卡疊了兩條進度條（橘色時間條，下面再一條綠紅比例條） | 時間條（橘）放在卡片頂部。綠紅比例條移到看漲／看跌兩張小卡**下面**，百分比放進小卡右上角 | 兩條線各有位置，不再擠在一起；百分比和倍數放在同一處讀 |
| 3 | 「最近回合」是一張獨立的卡片 | 併進圖表卡的最下方，晶片縮小到只顯示 ▲/▼ 和回合號，最新一顆加框 | 少一張卡；結果和價格走勢放在一起比較合理 |
| 4 | 下注後，頁面中間有「你已預測看漲 10 USDT」，底部又有「已預測看漲 10」加一顆灰色的「本回合已預測另一方」 | 下注卡裡顯示一列「你的預測／預估回報」。底部操作列換成一條狀態列「✓ 已預測看漲 10 USDT · 預估回報 23.00 USDT」，**拿掉灰色的停用按鈕** | 「本回合已預測另一方」讀起來像錯誤訊息，而且是按不了的按鈕；改成告訴使用者能拿回多少 |
| 5 | 手機底部疊了三層浮動列：全部領取、預測按鈕、tab bar，大約佔掉 300px | 「全部領取」併進預測按鈕那一層的玻璃卡，變成卡片頂部一行「可領取 229.65 USDT　全部領取」。只有可以領的時候才出現 | 少一層，內容區多出約 80px |
| 6 | 交易紀錄：每一列右邊都是橘色實心的「領取」，一頁 4 顆以上；「進行中」用藍色 | 只有「全部領取」用橘色實心。單筆的「領取」改成白色半透明的膠囊按鈕。「進行中」改成橘點加白字，藍色拿掉 | 橘色是全頁唯一的強調色，只留給最重要的動作；藍色不在色票裡 |
| 7 | 摘要是三格一樣大（總場次、勝率、累計盈虧），「全部領取」放在標題旁邊 | 累計盈虧當主數字（30px），下面兩格放總場次和勝率（加上「6 勝 2 負」）。下面一張淡橘色的「可領取（含本金）」卡，按鈕放在卡裡 | 使用者最在意的是賺了多少、能領多少 |
| 8 | 每一列第二行都寫一次「10/26」，價格都帶「$」 | 依日期分組（今天／昨天／10月24日），列裡只寫時間；價格拿掉「$」 | 第二行在 390px 寬才放得下時間、開盤→收盤、按鈕 |
| 9 | 盈虧寫成「+6.42 USDT」 | 盈虧只寫數字「+6.42」，第一行的金額保留「10 USDT」 | 「USDT」重複出現，而且會把右欄擠出卡外 |
| 10 | 規則是密密的項目符號，桌面版被底部 tab bar 蓋住 | 每條之間加細線，行高 1.75，桌面版最大寬度 760px。頁面底部留出 tab bar 的高度 | 好讀；不再被 tab bar 蓋住 |
| 11 | 桌面版右欄依序是下注卡、最近回合、交易紀錄，左欄只有圖表和規則 | 左欄：圖表卡（含最近回合），下面是交易紀錄（每筆一行，像表格）。右欄：下注卡（含預測按鈕）、我的成績（摘要和全部領取），右欄 sticky | 下注動作和戰績固定在右邊；紀錄有足夠寬度排成一行 |
| 12 | 數字是等寬字體（mono） | 改成 Inter 加 `font-variant-numeric: tabular-nums` | 數字一樣對齊，視覺上更乾淨。回合號也一樣。若想全站統一，之後再一起換 |

另外加了三個「篩選」膠囊：全部／可領取／進行中（數字是筆數）。這只是在前端用現有資料過濾，不需要新的 API。若暫時不做，整列拿掉即可。

---

## 2. Tokens

```css
--bg:#0B0B0C;          /* 頁面底色，加徑向暈光 radial-gradient(70% 40% at 50% 18%, #18181B, #0B0B0C 70%) */
--raise:#141416;       /* 一般卡片（圖表卡、交易紀錄卡、我的成績） */
--text:#F5F5F7; --text-2:#A1A1A6; --text-3:#6E6E73;
--line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.12);
--accent:#F7931A;      /* 只用在：下注卡時間條、全部領取、進行中小圓點 */
--up:#30D158;  --up-bg:rgba(48,209,88,.12);
--down:#FF453A; --down-bg:rgba(255,69,58,.12);
--r-panel:24px; --r-inner:14px; --r-pill:999px;
font-family: "Inter","Noto Sans CJK TC","Noto Sans TC","PingFang TC",system-ui,sans-serif;
```

- 玻璃只用在兩處：下注卡和底部操作列（含 tab bar）。其他卡片一律是實心的 `--raise`。
  ```css
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 20px 60px rgba(0,0,0,.45);
  ```
- 間距用 8 的倍數：4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 56。
- 綠紅只出現在會變動的數字和方向上，而且一定要搭配 ▲▼、↑↓ 或 + / − 符號，不能只靠顏色。

## 3. 字級

| 角色 | 手機 | 桌面 | 字重 |
|---|---|---|---|
| 頁面標題「預測市場」 | 28 | 34 | 700 |
| 區塊標題（交易紀錄、規則、我的成績） | 17 | 17 | 600 |
| 即時價格 | 36 | 44 | 600 / -0.025em |
| 下注卡倒數 | 30 | 30 | 600 |
| 倍數（2.30x） | 26 | 26 | 600 |
| 累計盈虧 | 30（單位 15） | 30 | 600 |
| 列表第一行 | 15 | 15 | 500 |
| 列表第二行、次要文字 | 13 | 13 | 400 |
| 標籤、說明小字 | 12 | 12 | 400 |
| 規則內文 | 14 / 行高 1.75 | 同左 | 400 |
| 免責聲明 | 12 / 行高 1.7 | 同左 | 400 |

## 4. 版面

### 手機（390）

- 左右邊距 20px，卡片之間 16px。
- 從上到下依序是：
  1. 標題（下面一行「● 測試網示範，不涉及真實資金」，小黃點加灰字，取代原本的黃色膠囊）
  2. 分頁切換（5 分鐘 BTC／事件）
  3. 模擬餘額和「重設示範」
  4. 圖表卡
  5. 下注卡
  6. 交易紀錄卡
  7. 規則和免責聲明
- 底部固定的部分：操作列和 tab bar。內容底部要留出它們的高度加 24px，免得最後的免責聲明被蓋住。

### 桌面（1280）

- 內容最大寬度 1200，左右 padding 40。
- 格線：`grid-template-columns: 1fr 400px; gap: 24px`。
- 右欄 `position: sticky; top: 24px`。
- 桌面版**沒有**底部操作列。預測按鈕放在下注卡最下方。
- 規則在格線下方，跨整個寬度，但文字最寬 760px。
- 頁面底部留出 tab bar 的高度（約 96px）。

## 5. 元件

### 5.1 圖表卡（`--raise`，padding 20）

- 第一列：BTC 圖示、「BTC / USD」、「● 即時」。
- 價格列：左邊是即時價格，下面一行顯示和鎖定價的差距（紅／綠，加 ▼▲）。右邊是小字「鎖定價」，下面是數值。
- K 線圖：高度手機 170、桌面 300。右側留 88px 的價格欄：
  - 「鎖定價」放灰框標籤，上面加 11px 灰色小字「鎖定價」。
  - 即時價格放綠／紅框標籤。
  - 兩個標籤上下距離至少 26px，太近就把即時價格的標籤往下推。
  - 鎖定價的標籤不要蓋在 K 線上（現況是蓋在左邊）。
- 進行中列：上面一條細線分隔。左邊「● 進行中 #612」（橘色圓點），右邊「距離結算 **00:24**」（17px）。下面一條 3px 白色半透明進度條。
- 最近回合：標題列「最近回合」加右邊灰字「最新在右」。7 顆晶片等寬，高 48px，圓角 12；每顆是 ▲ 或 ▼ 加回合號後 3 碼，最新一顆背景較亮。

### 5.2 下注卡（玻璃，padding 20）

| 狀態 | 左上 | 右上 | 時間條 |
|---|---|---|---|
| 開放預測 | 綠色膠囊「● 開放預測 #613」 | 「距離鎖定」加倒數 | 橘色 |
| 已鎖定，等待下一回合 | 灰色膠囊「● 已鎖定」 | 「下一回合開放」 | 灰色滿格 |
| 暫停開放 | 更淡的膠囊「● 暫停開放」 | 「—」 | 灰色 |

- **暫停開放**時，下面直接顯示說明框「目前暫停開放新預測。不影響領取獎勵或退款。」，不顯示看漲／看跌卡。
- 看漲／看跌兩張小卡（圓角 14，padding 14）：
  - 左上「↑ 看漲」，右上百分比
  - 中間倍數（26px，綠或紅）
  - 下面該方獎池「390.56 USDT」（12px，`--text-3`）
- 比例條：4px 高，兩段之間空 2px。
- 底部一列：「獎池 907.17 USDT」，右邊「41 人參與」。
- **已下注本回合**：
  - 自己那一方的小卡加框 `rgba(48,209,88,.45)`，背景 `rgba(48,209,88,.06)`（看跌就用紅色）。
  - 手機：卡片下方加一列「你的預測 ↑ 看漲 10 USDT ｜ 預估回報 23.00 USDT」。
  - 桌面：按鈕位置換成已預測狀態列，和 5.4 相同。

### 5.3 交易紀錄卡（`--raise`；手機左右 padding 16，其他 20）

1. 標題列：「我的交易紀錄」，右邊灰字「10 筆」。
2. 摘要（只在手機顯示；桌面移到右欄的「我的成績」卡）：
   - 「累計盈虧」：數字 30px。正數綠、負數紅、0 用白色。一定要帶 + / − 號。
   - 兩欄，中間細線分隔：「總場次 10」｜「勝率 75%　6 勝 2 負」（勝負數 13px 灰色）。
   - 可領取卡：
     - 外觀：背景 `rgba(247,147,26,.07)`，框 `rgba(247,147,26,.22)`，圓角 14。
     - 內容：左邊「可領取（含本金）」，下面金額；右邊橘色實心按鈕「全部領取」（高 40）。
     - 可領取為 0 時，**整張卡不顯示**。
     - 領取中：按鈕換成轉圈加「領取中」，不能再點。
3. 篩選膠囊（選用）：全部／可領取／進行中。高 32，括號裡是筆數，筆數為 0 時那顆不顯示。
4. 日期分組標題：「今天」「昨天」「10月24日」（12px，`--text-3`）。日期格式走 i18n 的 date formatter。
5. 每一列（`grid: 32px minmax(0,1fr) auto; gap 12`，最小高度 64）：
   - 左邊：方向圖示，32px 圓形。看漲是綠色淡底加 ▲，看跌是紅色淡底加 ▼。
   - 中間第一行：「看漲 10 USDT」加回合號「#5976610」（12px，`--text-3`）。
   - 中間第二行：「10:51 · 79,572.78 → 79,580.52」。收盤價用綠／紅表示漲跌，平盤用灰色。超出寬度時用 ellipsis。
   - 右邊上下兩行，依狀態不同：

| 狀態 | 右上 | 右下 | 第二行左邊 |
|---|---|---|---|
| 待鎖定（下注的回合還沒鎖定） | 「待鎖定」（`--text-2`） | 「00:24 後鎖定」 | 「11:05 · 等待鎖定價」 |
| 進行中（已鎖定，還沒結算） | 「● 進行中」（橘點、白字） | 「00:24 後結算」 | 「11:00 · 鎖定價 79,743.19」 |
| 可領取 | 綠色「+6.42」 | 按鈕「領取」 | 開盤 → 收盤 |
| 領取中 | 綠色「+6.42」 | 按鈕只顯示轉圈，寬度不變，不能點 | 同上 |
| 已領取 | 綠色「+2.68」 | 「✓ 已領取」（`--text-3`） | 同上 |
| 未猜中 | 紅色「−50」 | 「未猜中」（`--text-3`） | 同上 |
| 可退款（平局、單邊、逾時未結算） | 灰色「±0」 | 按鈕「↺ 退款」 | 同上 |
| 已退款 | 灰色「±0」 | 「✓ 已退款」 | 同上 |

   - 「領取」和「退款」按鈕的樣式：高 28、最小寬 58、膠囊形、背景 `rgba(255,255,255,.10)`、框 `rgba(255,255,255,.14)`、白字 600。**不要用橘色**。
     - 按鈕看起來只有 28 高，但點擊範圍要撐到 44：用 `::before` 往外延伸，或給整列 hover。
   - 盈虧的計算和現在一樣（淨盈虧，不含本金）。「可領取」的金額則**含本金**（例如 229.65 = 本金 75 + 盈利 154.64），所以標籤寫「可領取（含本金）」。
6. 預設顯示 8 筆。更多的放在「顯示更早的紀錄」（高 44，框線按鈕）後面，一次再載入 10 筆。
7. 桌面版每筆一行，欄位依序是：圖示 32 ｜ 方向、金額、回合號 1.1fr ｜ 時間、開盤→收盤 1.5fr ｜ 盈虧 120（靠右）｜ 狀態或按鈕 96（靠右）。每列最小高度 56。
8. 空狀態：
   - 48px 圓形底的時鐘圖示，下面「還沒有交易紀錄」（15/600），再下面「預測後，每一筆都會記在這裡。」（13，`--text-2`）。
   - 不顯示摘要、可領取卡和篩選。卡片高度約 220（現況約 340）。
9. 未連接錢包（正式網）：錢包圖示，加「連接錢包後查看紀錄」、「你的每一筆預測都會記在這裡。」，下面一顆框線按鈕「連接錢包」。

### 5.4 底部操作列（只有手機）

- 外觀：玻璃，圓角 24，padding 10，下面接 tab bar，間距 10。上方加一段漸層遮罩 `linear-gradient(transparent, rgba(11,11,12,.92) 30%)`。
- 預設：兩顆按鈕「↑ 預測看漲 2.30x」「↓ 預測看跌 1.74x」，高 52、圓角 16，綠／紅淡底加框，倍數 13px、透明度 .75。
- 有可領取獎勵時：在按鈕上面加一行「可領取 229.65 USDT」，右邊橘色文字按鈕「全部領取」。這一行取代原本那條獨立浮動的領取列。
- 本回合已下注：兩顆按鈕換成一條狀態列（高 52、綠色淡底、綠框），內容是「✓ 已預測看漲 10 USDT」，右邊「預估回報 23.00 USDT」。**不再顯示「本回合已預測另一方」**。
- 暫停開放或已鎖定時，兩顆按鈕變成停用（透明度 .4），上面加一行小字說明狀態。

### 5.5 規則

- 標題「規則」17/600，下面的列表和標題距離 14。
- 每條：14px，行高 1.75，`--text-2`，左邊一顆 4px 灰點，條與條之間用 1px `--line` 分隔，上下 padding 12。
- 規則的字串**完全沿用現有的 i18n key**，不需要重新翻譯。
- 免責聲明：12px，`--text-3`，和規則距離 20。

## 6. i18n 注意事項

- 所有可見文字都走 i18n。新版**不放英文小字**。
- 預留的字串長度：
  - 「預測看漲」「預測看跌」按鈕：英文「Predict Up」、越南文、俄文可能長到中文的 2.5 倍。按鈕裡倍數放在文字右邊，空間不夠時倍數換到第二行（`flex-wrap`），**不要縮小字級**。
  - 列表右欄：「已領取」「未猜中」在德文、俄文會變長。右欄寬度跟著內容走（`auto`），中間欄用 `minmax(0,1fr)` 加 ellipsis 保證不會撐破卡片。按鈕最小寬 58，文字可以把它撐寬。
  - 「可領取（含本金）」：其他語系可以只翻成「可領取」加小字說明，最長預留約 24 字元。
  - 篩選膠囊放不下時，可以橫向捲動（`overflow-x: auto`）。
- 新增／變更的字串：

| key 建議 | 繁中 |
|---|---|
| prediction.history.claimable | 可領取（含本金） |
| prediction.history.claimAll | 全部領取（沿用現有 key） |
| prediction.history.wl | {w} 勝 {l} 負 |
| prediction.history.filter.all / claimable / live | 全部／可領取／進行中 |
| prediction.history.today / yesterday | 今天／昨天 |
| prediction.history.awaitLock | 等待鎖定價 |
| prediction.history.lockedAt | 鎖定價 {price} |
| prediction.history.locksIn / settlesIn | {t} 後鎖定／{t} 後結算 |
| prediction.history.pendingLock | 待鎖定 |
| prediction.history.refund / refunded | 退款／已退款 |
| prediction.history.more | 顯示更早的紀錄 |
| prediction.history.connect | 連接錢包後查看紀錄 |
| prediction.bet.yours / estReturn | 你的預測／預估回報 |
| prediction.bet.placed | 已預測{side} {amount} |
| prediction.round.paused | 暫停開放 |
| prediction.round.pausedNote | 目前暫停開放新預測。不影響領取獎勵或退款。 |
| prediction.round.locked / nextOpen | 已鎖定／下一回合開放 |
| common.demoNote | 測試網示範，不涉及真實資金（原本膠囊的字串可以直接沿用） |

- 要拿掉的字串：「本回合已預測另一方」。
- 數字格式：千分位沿用目前的格式化函式。盈虧的負號用 U+2212「−」，或 locale 的負號。

## 7. 動效與無障礙

- 倒數和進度條用 `transform: scaleX()` 更新，不改 width。
- 「進行中」的橘點可以加 1.6 秒的淡入淡出脈衝；`prefers-reduced-motion` 時關掉。
- 所有按鈕的點擊範圍至少 44px，要有 focus ring（`outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px`）。
- 方向一律同時用圖示、文字和顏色表達。綠紅色盲的使用者也要分得出來。

## 8. 驗收

- 390 和 1280 兩種寬度都對照 `renders/` 的圖片。
- 手機版右欄**不能超出卡片**，最長的情況是「+130.51」加「領取」。
- 桌面版的規則和免責聲明不能被 tab bar 蓋住。
- 8 種列狀態、3 種下注卡狀態、3 種底部列狀態都要能在示範模式中看到。