/* ===== CLIENT PLATFORM PAGE ===== */ /* Login/Register card */ .auth-card { max-width: 480px; margin: 0 auto; background: white; border: 1px solid var(--line); border-radius: 28px; padding: 48px 40px; box-shadow: 0 16px 48px rgba(30, 27, 50, 0.08); } .auth-card.wide { max-width: 580px; } .auth-title { font-size: 24px; font-weight: 510; color: var(--indigo); margin-bottom: 8px; letter-spacing: -0.02em; } .auth-subtitle { font-size: 14px; color: var(--charcoal); opacity: 0.65; margin-bottom: 32px; line-height: 1.5; } .auth-form { display: flex; flex-direction: column; gap: 16px; } .auth-form .form-row { display: flex; flex-direction: column; gap: 6px; } .auth-form label { font-size: 12px; font-weight: 510; color: var(--charcoal); opacity: 0.7; letter-spacing: 0.02em; } .auth-form input, .auth-form select { height: 52px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: white; font-size: 15px; color: var(--indigo); font-family: inherit; transition: all 0.2s ease; } .auth-form input:focus, .auth-form select:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); } .auth-form .password-wrap { position: relative; } .auth-form .password-toggle { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: transparent; border: none; cursor: pointer; font-size: 18px; opacity: 0.4; padding: 4px 8px; } .auth-form .password-toggle:hover { opacity: 0.8; } .auth-form .checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--charcoal); opacity: 0.7; } .auth-form .checkbox-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; } .auth-form .btn-submit { height: 52px; background: var(--indigo); color: white; border: none; border-radius: 14px; font-size: 15px; font-weight: 510; cursor: pointer; font-family: inherit; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; } .auth-form .btn-submit:hover { background: var(--violet); transform: translateY(-1px); box-shadow: 0 8px 24px var(--violet-glow); } .auth-form .forgot-link { font-size: 13px; color: var(--violet); text-decoration: none; font-weight: 510; align-self: flex-end; } .auth-form .forgot-link:hover { text-decoration: underline; } .auth-card .auth-divider { height: 1px; background: var(--line); margin: 24px 0; } .auth-card .auth-hint { font-size: 13px; color: var(--charcoal); opacity: 0.65; text-align: center; line-height: 1.6; } .auth-card .auth-hint a { color: var(--violet); text-decoration: none; font-weight: 510; } .auth-2fa-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--violet-soft); color: var(--violet); border-radius: 999px; font-size: 12px; font-weight: 510; margin-top: 16px; } /* Dashboard browser mockup */ .dashboard-mock { background: white; border-radius: 16px; box-shadow: 0 24px 64px rgba(30, 27, 50, 0.16); overflow: hidden; margin: 32px 0; } .dashboard-chrome { display: flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--oat); border-bottom: 1px solid var(--line); } .dashboard-chrome .dot { width: 12px; height: 12px; border-radius: 50%; } .dashboard-chrome .dot.r { background: #FF5F57; } .dashboard-chrome .dot.y { background: #FEBC2E; } .dashboard-chrome .dot.g { background: #28C840; } .dashboard-chrome .url-bar { flex: 1; margin-left: 16px; padding: 6px 14px; background: white; border-radius: 8px; font-size: 12px; color: var(--charcoal); opacity: 0.55; font-family: var(--font-mono); } .dashboard-body { padding: 32px; background: var(--oat-warm); min-height: 400px; } .dashboard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .dash-card { background: white; border: 1px solid var(--line); border-radius: 18px; padding: 24px; } .dash-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .dash-card-title { font-size: 13px; font-weight: 510; color: var(--indigo); letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px; } .dash-card-count { font-size: 11px; color: var(--charcoal); opacity: 0.5; font-family: var(--font-mono); } .dash-item { padding: 10px 0; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--indigo); } .dash-item:last-child { border-bottom: none; } .dash-progress { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--violet); font-weight: 510; font-family: var(--font-mono); } .dash-progress-bar { width: 60px; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; } .dash-progress-bar > div { height: 100%; background: var(--violet); border-radius: 2px; } .dash-link { margin-top: 12px; font-size: 12px; color: var(--violet); text-decoration: none; font-weight: 510; display: inline-block; } .dash-link:hover { text-decoration: underline; } .dash-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 510; } .dash-status.on { color: #2D7A4E; } .dash-status.off { color: var(--charcoal); opacity: 0.4; } .dash-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .dash-status.off::before { background: var(--line-strong); } /* Order stepper */ .order-stepper { display: flex; align-items: flex-start; justify-content: space-between; gap: 0; margin: 40px 0; position: relative; } .order-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; } .order-step-circle { width: 56px; height: 56px; border-radius: 50%; background: white; border: 2px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--charcoal); opacity: 0.4; z-index: 2; position: relative; transition: all 0.3s; } .order-step.completed .order-step-circle { background: var(--indigo); border-color: var(--indigo); color: white; opacity: 1; } .order-step.current .order-step-circle { background: var(--violet); border-color: var(--violet); color: white; opacity: 1; box-shadow: 0 0 0 6px var(--violet-soft); } .order-step-label { margin-top: 12px; font-size: 13px; font-weight: 510; color: var(--indigo); opacity: 0.5; line-height: 1.3; } .order-step.completed .order-step-label, .order-step.current .order-step-label { opacity: 1; } .order-step-meta { font-size: 11px; color: var(--charcoal); opacity: 0.5; margin-top: 4px; font-family: var(--font-mono); } .order-step:not(:last-child)::after { content: ''; position: absolute; top: 28px; left: calc(50% + 28px); right: calc(-50% + 28px); height: 2px; background: var(--line); z-index: 1; } .order-step.completed:not(:last-child)::after { background: var(--indigo); } /* Saved designs grid */ .saved-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; } .saved-card { background: white; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: all 0.3s; cursor: pointer; } .saved-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(140, 99, 232, 0.15); border-color: var(--violet); } .saved-thumb { height: 140px; background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); position: relative; display: flex; align-items: center; justify-content: center; font-size: 40px; } .sd-apparel { --gradient-start: #F5F1EA; --gradient-end: #ECE6D9; } .sd-uniform { --gradient-start: #DDD6CC; --gradient-end: #999084; } .sd-d2c { --gradient-start: #E8E0F0; --gradient-end: #A892C4; } .sd-vip { --gradient-start: #F8E5D2; --gradient-end: #E8C8A3; } .sd-fashion { --gradient-start: #F0D8E8; --gradient-end: #C490A8; } .sd-event { --gradient-start: #DDD8E8; --gradient-end: #9890C4; } .sd-gift { --gradient-start: #D4AF37; --gradient-end: #8B7320; } .sd-tech { --gradient-start: #B0D8E8; --gradient-end: #5A8FA8; } .sd-reunion { --gradient-start: #D8E5F0; --gradient-end: #95B5D4; } .saved-tag { position: absolute; top: 12px; right: 12px; padding: 4px 10px; background: rgba(255, 255, 255, 0.92); color: var(--indigo); border-radius: 999px; font-size: 10px; font-weight: 510; letter-spacing: 0.05em; } .saved-info { padding: 16px; } .saved-name { font-size: 14px; font-weight: 510; color: var(--indigo); margin-bottom: 4px; line-height: 1.3; } .saved-meta { font-size: 11px; color: var(--charcoal); opacity: 0.5; font-family: var(--font-mono); display: flex; justify-content: space-between; } .saved-cta { padding: 12px 16px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--violet); font-weight: 510; text-align: center; } /* Re-order flow */ .reorder-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 40px 0; } .reorder-step { text-align: center; padding: 32px 24px; background: white; border: 1px solid var(--line); border-radius: 18px; position: relative; } .reorder-step-icon { width: 64px; height: 64px; margin: 0 auto 20px; background: var(--violet-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; } .reorder-step-num { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; background: var(--indigo); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 510; } .reorder-step h4 { font-size: 18px; font-weight: 510; color: var(--indigo); margin-bottom: 8px; letter-spacing: -0.01em; } .reorder-step p { font-size: 13px; color: var(--charcoal); opacity: 0.65; line-height: 1.6; } /* E-com platforms table */ .ecom-platforms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 32px 0; } .ecom-card { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 24px; text-align: center; } .ecom-logo { font-size: 36px; margin-bottom: 12px; } .ecom-name { font-size: 15px; font-weight: 510; color: var(--indigo); margin-bottom: 4px; } .ecom-status { font-size: 11px; color: var(--charcoal); opacity: 0.55; font-family: var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 12px; } .ecom-status.connected { color: #2D7A4E; opacity: 1; } /* Privacy badges */ .privacy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 32px 0; } .privacy-badge { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px; text-align: center; } .privacy-icon { font-size: 36px; margin-bottom: 12px; display: block; } .privacy-title { font-size: 16px; font-weight: 510; color: var(--indigo); margin-bottom: 4px; letter-spacing: -0.01em; } .privacy-desc { font-size: 12px; color: var(--charcoal); opacity: 0.65; line-height: 1.5; } /* Two-col hero variant */ .dual-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } @media (max-width: 960px) { .auth-card { padding: 32px 24px; } .dashboard-grid { grid-template-columns: 1fr; } .saved-grid { grid-template-columns: repeat(2, 1fr); } .reorder-flow { grid-template-columns: 1fr; } .ecom-platforms { grid-template-columns: repeat(2, 1fr); } .privacy-grid { grid-template-columns: repeat(2, 1fr); } .dual-col { grid-template-columns: 1fr; gap: 24px; } .order-stepper { overflow-x: auto; padding: 20px 0; } .order-step { min-width: 120px; } } @media (max-width: 560px) { .saved-grid { grid-template-columns: 1fr; } .ecom-platforms { grid-template-columns: 1fr; } .privacy-grid { grid-template-columns: 1fr; } }
Client Platform · 客戶平台

你嘅 品牌服飾後台。

訂單狀態、Saved Designs、返單備貨、e-com 整合 — 一個 dashboard 全包。
由 WhatsApp 第一句 message 到 50 次返單,全程陪你。

🔐 TLS 1.3 · 2FA · AES-256 · 🇭🇰 PDPO 合規
01 · Login

登入 客戶後台

已係 PERSON.TEES 客戶?即時登入查訂單、Saved Designs、返單備貨。

登入
使用你嘅公司 email 同密碼登入。
忘記密碼?
🔐 啟用兩步驗證 · 首次登入會要求 SMS code
未係客戶?申請賬號 →
1 個工作天內 WhatsApp 確認
02 · Register

申請 客戶賬號

填寫以下資料,我哋 1 個工作天內 WhatsApp 確認 + setup 賬號。

申請賬號
5 個欄位,2 分鐘搞掂。
提交後我哋 1 個工作天內聯絡你 setup 賬號。
申請後 email 會收到 setup link。
03 · Dashboard Preview

登入後 睇到咩

4 個核心 card,覆蓋訂單、Saved Designs、返單、e-com 整合狀態。

app.persontees.com/dashboard
📦 訂單狀態
3 active
POLO-2024-Q4 制服
80%
Spring Tee 2026
35%
Holiday Gift VIP
15%
查看全部訂單 →
🎨 Saved Designs
12 projects
Spring 2025 Tee2025-04-12
Holiday Gift Set 20242024-12-20
Corporate Uniform 20242024-09-08
Client Uniform Set2024-07-15
查看 library →
♾️ 返單準備
3 ready
⚡ Karen Polo Set v3 一 click
⚡ Holiday Gift Box 一 click
⚡ Custom Polo 2025 一 click
ΔE ≤ 1.5 保證 · 24h 出貨 →
🛒 E-com 整合
1/3 connected
Shopify 已連接
Shopline 未連接
WooCommerce 未連接
連接新平台 →
04 · Order Tracking

訂單 5 個階段 一目了然

由確認稿到送達,每個階段狀態都即時更新。

確認稿
設計稿已 final
採購
布料已訂
🏭
生產
進度 70%
🔍
QC
AQL 2.5 待驗
📦
送達
順豐 / Alfred
每個階段都會自動 update · 你唔使 query · 你睇到嘅永遠係 latest status。
緊急情況會主動 push notification + WhatsApp 提示。
05 · Saved Designs Library

永久 存檔唔會過期

所有過去 project 嘅規格永久存檔 — 面料、克重、色號、size 分配、Logo 位置 — 一 click 復現。

Apparel 👕
Spring 2025 Tee
80 件2025-04-12
查看詳情 →
Gift Box 🎁
Holiday Gift Set 2024
50 件2024-12-20
查看詳情 →
Uniform 👔
Corporate Uniform 2024
200 件2024-09-08
查看詳情 →
Uniform 👕
Client Uniform Set
60 件2024-07-15
查看詳情 →
D2C 💻
Tech Startup Tee
100 件2024-05-22
查看詳情 →
VIP
VIP Gift Box 真絲
30 件2024-03-30
查看詳情 →
Fashion 👗
Fashion Drop SS24
80 件2024-02-14
查看詳情 →
Event 🎪
School Reunion Tee
150 件2023-11-20
查看詳情 →
D2C 🚀
Brand Tee Launch
500 件2023-09-05
查看詳情 →
永久存檔 · 唔會過期 · 唔會被刪除 · 你隨時可以一 click 返單。
06 · Re-order

返單 一 click

上次做好嘅嘢,下次一 click 出 — 唔使再 send 設計稿。

1

一 click 按掣

返單準備 list 入面 click「出貨」

2
📋

自動 fetch 規格

面料、克重、色號、size 分配、Logo 位置 — 自動 pull 上次數據

3
📦

24h 出貨

ΔE ≤ 1.5 色差保證 · 24h 出貨 · 1 工作天到港

一 click = 永久復現

廠商冇存檔 → 返單當新單計 → 顏色同上次差一啲 → Logo 位置偏咗少少。
PERSON.TEES 平台永久存檔 → 一 click 復現 → ΔE ≤ 1.5 保證。

07 · E-com Integration

E-com 整合狀態

Shopify / Shopline / WooCommerce 一 click 連接 · 訂單自動流入 · 即時出貨。

Shopify
✓ Connected
REST API · Webhook
即時 sync · 5 min setup
Shopline
○ Not Connected
REST API
即時 sync · 5 min setup
WooCommerce
○ Not Connected
REST API · Webhook
即時 sync · 10 min setup
其他
客製
Shopify Plus · BigCommerce
自訂 API · WhatsApp 傾
08 · Privacy & Security

私隱 4 個保證

客戶資料嘅加密、認證、合規 — 一個都不能少。

🔐
TLS 1.3
全站 HTTPS · 傳輸加密 · 防止中間人攻擊
🔑
2FA 兩步驗證
SMS / Google Authenticator · 強制啟用
🛡️
AES-256
資料儲存加密 · industry standard · bank-grade
🇭🇰
PDPO 合規
香港個人資料(私隱)條例 第 486 章
09 · FAQ

客戶平台 常見問題

忘記密碼點做?

登入頁按「忘記密碼?」,輸入你嘅公司 email,我哋會 send 一個 reset link。24 小時內有效。緊急情況 WhatsApp 我哋客服 (852) 5209 6722 直接 reset。

可以改 email 嗎?

可以。賬號設定 → 個人資料 → 改 email。新 email 會收到驗證 link,7 日內 click 確認就完成。確認前舊 email 仍然可以登入。

點樣啟用 2FA?

賬號設定 → 安全 → 兩步驗證。支援 SMS 或者 Google Authenticator / Authy。我哋建議用 Authenticator app,更安全。

其他同事可以 share 賬號嗎?

可以。賬號設定 → 團隊 → 邀請 teammate。每個 teammate 有自己嘅 sub-account + 2FA。可以設權限 (Admin / Read-only / Billing only)。

賬號可以刪除嗎?

可以。賬號設定 → 賬號 → 刪除賬號。我哋畀 30 日 grace period 反悔。30 日後所有資料永久刪除 (除咁 PDPO 要求保留嘅 audit log)。

Saved designs 會過期嗎?

唔會。永久存檔。已客嘅所有 past projects 都會永久保存,包括面料規格、色號、size 分配、Logo 位置 — 一 click 復現返單。

可以 import 過去嘅訂單嗎?

可以。WhatsApp 聯絡我哋客服,提供舊 supplier 嘅 invoice / spec sheet,我哋會手動 upload 入你嘅 platform library。免費。

私隱政策喺邊?

Footer link 「私隱政策」。我哋遵守香港 PDPO 第 486 章。資料只用於訂單處理、e-com 整合、客戶服務 — 唔會 share 第三方 (除咁法律要求或者你 explicit consent)。

申請客戶賬號

1 個工作天內 WhatsApp 確認 · 永久免費 · 唔使信用卡