From 1221a19e980e95a4a6446a5e1cdefd31c5b94497 Mon Sep 17 00:00:00 2001 From: Ho Ngoc Hai Date: Fri, 6 Feb 2026 00:38:32 +0700 Subject: [PATCH] feat: Revamp tPOS UI kit by removing outdated badge components and introducing new social button designs for Google, Apple, Zalo, and Facebook, enhancing user interface and functionality. --- pencil-design/docs/auth-workflow-guide.md | 325 ++ pencil-design/docs/pos-workflow-guide.md | 406 ++ pencil-design/src/atoms/auth-buttons.pen | 461 +++ pencil-design/src/atoms/auth-inputs.pen | 782 ++++ pencil-design/src/components/tPOS-ui-kit.pen | 3626 +++++++++++++++++ .../src/molecules/auth-form-field.pen | 743 ++++ .../src/molecules/social-login-row.pen | 386 ++ .../src/organisms/auth/login-card.pen | 1114 +++++ .../src/organisms/auth/otp-verify.pen | 542 +++ .../pages/auth/forgot-password/desktop.pen | 372 ++ .../src/pages/auth/forgot-password/mobile.pen | 112 + .../src/pages/auth/forgot-password/tablet.pen | 107 + .../src/pages/auth/login/admin-desktop.pen | 306 ++ .../src/pages/auth/login/admin-mobile.pen | 149 + .../src/pages/auth/login/admin-tablet.pen | 151 + .../src/pages/auth/login/branch-desktop.pen | 413 ++ .../src/pages/auth/login/branch-mobile.pen | 160 + .../src/pages/auth/login/branch-tablet.pen | 146 + .../src/pages/auth/login/customer-desktop.pen | 532 +++ .../src/pages/auth/login/customer-mobile.pen | 358 ++ .../src/pages/auth/login/customer-tablet.pen | 328 ++ .../src/pages/auth/login/staff-desktop.pen | 302 ++ .../src/pages/auth/login/staff-mobile.pen | 291 ++ .../src/pages/auth/login/staff-tablet.pen | 170 + .../pages/auth/register/customer-desktop.pen | 592 +++ .../pages/auth/register/customer-mobile.pen | 241 ++ .../pages/auth/register/customer-tablet.pen | 253 ++ .../src/pages/auth/workflow/email-sent.pen | 117 + .../src/pages/auth/workflow/otp-verify.pen | 187 + .../pages/auth/workflow/password-reset.pen | 254 ++ .../pages/auth/workflow/two-factor-auth.pen | 105 + .../tPOS/pos/{cafe.pen => cafe/desktop.pen} | 0 .../src/pages/tPOS/pos/cafe/mobile.pen | 123 + .../src/pages/tPOS/pos/cafe/tablet.pen | 126 + .../tPOS/pos/cafe/workflow/queue-display.pen | 102 + .../pos/{karaoke.pen => karaoke/desktop.pen} | 0 .../src/pages/tPOS/pos/karaoke/mobile.pen | 132 + .../src/pages/tPOS/pos/karaoke/tablet.pen | 127 + .../tPOS/pos/karaoke/workflow/room-map.pen | 130 + .../pos/karaoke/workflow/room-session.pen | 131 + .../desktop.pen} | 0 .../src/pages/tPOS/pos/restaurant/mobile.pen | 128 + .../src/pages/tPOS/pos/restaurant/tablet.pen | 130 + .../restaurant/workflow/kitchen-display.pen | 105 + .../pos/restaurant/workflow/table-map.pen | 101 + .../pages/tPOS/pos/shared/payment/cash.pen | 102 + .../tPOS/pos/shared/payment/method-select.pen | 161 + .../src/pages/tPOS/pos/shared/payment/qr.pen | 101 + .../pages/tPOS/pos/shared/payment/receipt.pen | 196 + .../pages/tPOS/pos/shared/payment/success.pen | 95 + .../tPOS/pos/{spa.pen => spa/desktop.pen} | 0 .../src/pages/tPOS/pos/spa/mobile.pen | 132 + .../src/pages/tPOS/pos/spa/tablet.pen | 128 + .../tPOS/pos/spa/workflow/customer-lookup.pen | 170 + .../tPOS/pos/spa/workflow/staff-assign.pen | 180 + .../tPOS/pos/workflows/cafe-workflow.pen | 160 + .../tPOS/pos/workflows/karaoke-workflow.pen | 158 + .../pos/workflows/restaurant-workflow.pen | 146 + .../pages/tPOS/pos/workflows/spa-workflow.pen | 173 + 59 files changed, 17268 insertions(+) create mode 100644 pencil-design/docs/auth-workflow-guide.md create mode 100644 pencil-design/docs/pos-workflow-guide.md create mode 100644 pencil-design/src/atoms/auth-buttons.pen create mode 100644 pencil-design/src/atoms/auth-inputs.pen create mode 100644 pencil-design/src/molecules/auth-form-field.pen create mode 100644 pencil-design/src/molecules/social-login-row.pen create mode 100644 pencil-design/src/organisms/auth/login-card.pen create mode 100644 pencil-design/src/organisms/auth/otp-verify.pen create mode 100644 pencil-design/src/pages/auth/forgot-password/desktop.pen create mode 100644 pencil-design/src/pages/auth/forgot-password/mobile.pen create mode 100644 pencil-design/src/pages/auth/forgot-password/tablet.pen create mode 100644 pencil-design/src/pages/auth/login/admin-desktop.pen create mode 100644 pencil-design/src/pages/auth/login/admin-mobile.pen create mode 100644 pencil-design/src/pages/auth/login/admin-tablet.pen create mode 100644 pencil-design/src/pages/auth/login/branch-desktop.pen create mode 100644 pencil-design/src/pages/auth/login/branch-mobile.pen create mode 100644 pencil-design/src/pages/auth/login/branch-tablet.pen create mode 100644 pencil-design/src/pages/auth/login/customer-desktop.pen create mode 100644 pencil-design/src/pages/auth/login/customer-mobile.pen create mode 100644 pencil-design/src/pages/auth/login/customer-tablet.pen create mode 100644 pencil-design/src/pages/auth/login/staff-desktop.pen create mode 100644 pencil-design/src/pages/auth/login/staff-mobile.pen create mode 100644 pencil-design/src/pages/auth/login/staff-tablet.pen create mode 100644 pencil-design/src/pages/auth/register/customer-desktop.pen create mode 100644 pencil-design/src/pages/auth/register/customer-mobile.pen create mode 100644 pencil-design/src/pages/auth/register/customer-tablet.pen create mode 100644 pencil-design/src/pages/auth/workflow/email-sent.pen create mode 100644 pencil-design/src/pages/auth/workflow/otp-verify.pen create mode 100644 pencil-design/src/pages/auth/workflow/password-reset.pen create mode 100644 pencil-design/src/pages/auth/workflow/two-factor-auth.pen rename pencil-design/src/pages/tPOS/pos/{cafe.pen => cafe/desktop.pen} (100%) create mode 100644 pencil-design/src/pages/tPOS/pos/cafe/mobile.pen create mode 100644 pencil-design/src/pages/tPOS/pos/cafe/tablet.pen create mode 100644 pencil-design/src/pages/tPOS/pos/cafe/workflow/queue-display.pen rename pencil-design/src/pages/tPOS/pos/{karaoke.pen => karaoke/desktop.pen} (100%) create mode 100644 pencil-design/src/pages/tPOS/pos/karaoke/mobile.pen create mode 100644 pencil-design/src/pages/tPOS/pos/karaoke/tablet.pen create mode 100644 pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-map.pen create mode 100644 pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-session.pen rename pencil-design/src/pages/tPOS/pos/{restaurant.pen => restaurant/desktop.pen} (100%) create mode 100644 pencil-design/src/pages/tPOS/pos/restaurant/mobile.pen create mode 100644 pencil-design/src/pages/tPOS/pos/restaurant/tablet.pen create mode 100644 pencil-design/src/pages/tPOS/pos/restaurant/workflow/kitchen-display.pen create mode 100644 pencil-design/src/pages/tPOS/pos/restaurant/workflow/table-map.pen create mode 100644 pencil-design/src/pages/tPOS/pos/shared/payment/cash.pen create mode 100644 pencil-design/src/pages/tPOS/pos/shared/payment/method-select.pen create mode 100644 pencil-design/src/pages/tPOS/pos/shared/payment/qr.pen create mode 100644 pencil-design/src/pages/tPOS/pos/shared/payment/receipt.pen create mode 100644 pencil-design/src/pages/tPOS/pos/shared/payment/success.pen rename pencil-design/src/pages/tPOS/pos/{spa.pen => spa/desktop.pen} (100%) create mode 100644 pencil-design/src/pages/tPOS/pos/spa/mobile.pen create mode 100644 pencil-design/src/pages/tPOS/pos/spa/tablet.pen create mode 100644 pencil-design/src/pages/tPOS/pos/spa/workflow/customer-lookup.pen create mode 100644 pencil-design/src/pages/tPOS/pos/spa/workflow/staff-assign.pen create mode 100644 pencil-design/src/pages/tPOS/pos/workflows/cafe-workflow.pen create mode 100644 pencil-design/src/pages/tPOS/pos/workflows/karaoke-workflow.pen create mode 100644 pencil-design/src/pages/tPOS/pos/workflows/restaurant-workflow.pen create mode 100644 pencil-design/src/pages/tPOS/pos/workflows/spa-workflow.pen diff --git a/pencil-design/docs/auth-workflow-guide.md b/pencil-design/docs/auth-workflow-guide.md new file mode 100644 index 00000000..39fa06aa --- /dev/null +++ b/pencil-design/docs/auth-workflow-guide.md @@ -0,0 +1,325 @@ +# Auth Workflow Documentation | Tài liệu Quy trình Xác thực + +## Mục lục +1. [Tổng quan](#1-tổng-quan) +2. [Customer Authentication](#2-customer-authentication) +3. [Staff Authentication](#3-staff-authentication) +4. [Admin Authentication](#4-admin-authentication) +5. [Branch Authentication](#5-branch-authentication) +6. [Password Recovery](#6-password-recovery) + +--- + +## 1. Tổng Quan + +### So sánh 4 vai trò + +| Yếu tố | Customer | Staff | Admin | Branch | +|--------|----------|-------|-------|--------| +| **Phương thức** | Phone + OTP | Email/Phone + Password | Email + Password | Email/Phone + Password | +| **Social Login** | ✅ Có | ❌ Không | ❌ Không | ❌ Không | +| **Đăng ký** | Tự đăng ký | Admin cấp | System cấp | Admin cấp | +| **2FA** | OTP | Tùy chọn | Bắt buộc | Tùy chọn | +| **Theme** | 🟠 Orange | 🟢 Green | 🔵 Blue | 🟠 Orange | + +### Responsive Breakpoints + +| Device | Width | Layout | +|--------|-------|--------| +| Desktop | 1440px | Split screen hoặc Centered card | +| Tablet | 1024px | Centered card (landscape) | +| Mobile | 390px | Full-width vertical | + +--- + +## 2. Customer Authentication + +### 2.1 Login Flow +```mermaid +flowchart TB + subgraph START["👤 KHÁCH HÀNG"] + A1[Mở app/web] + end + + subgraph INPUT["📱 NHẬP SĐT"] + B1[Chọn quốc gia] + B2[Nhập số điện thoại] + B3[Gửi OTP] + end + + subgraph OTP["🔢 XÁC THỰC OTP"] + C1[Nhận SMS] + C2[Nhập 6 số OTP] + C3{OTP đúng?} + C4[❌ Sai - Nhập lại] + C5[⏱️ Gửi lại sau 60s] + end + + subgraph SUCCESS["✅ THÀNH CÔNG"] + D1[Xác thực OK] + D2[Chuyển trang chính] + end + + A1 --> B1 --> B2 --> B3 + B3 --> C1 --> C2 --> C3 + C3 -->|Sai| C4 --> C2 + C3 -->|Hết lần| C5 --> B3 + C3 -->|Đúng| D1 --> D2 +``` + +### 2.2 Social Login Flow +```mermaid +flowchart LR + A[Chọn mạng xã hội] --> B{Loại?} + B -->|Google| C[Google OAuth] + B -->|Apple| D[Apple Sign-in] + B -->|Zalo| E[Zalo OAuth] + B -->|Facebook| F[Facebook OAuth] + C & D & E & F --> G[Lấy profile] + G --> H{Đã có tài khoản?} + H -->|Có| I[Liên kết & Đăng nhập] + H -->|Không| J[Tạo mới & Đăng nhập] + I & J --> K[✅ Thành công] +``` + +### 2.3 Register Flow +```mermaid +flowchart TB + subgraph INFO["📝 THÔNG TIN"] + A1[Nhập họ tên] + A2[Nhập SĐT] + A3[Nhập email - tùy chọn] + A4[Đồng ý điều khoản] + end + + subgraph VERIFY["🔐 XÁC THỰC"] + B1[Gửi OTP] + B2[Nhập OTP] + B3{Xác thực OK?} + end + + subgraph COMPLETE["🎉 HOÀN TẤT"] + C1[Tạo tài khoản] + C2[Chuyển trang chính] + end + + A1 --> A2 --> A3 --> A4 + A4 --> B1 --> B2 --> B3 + B3 -->|Thất bại| B1 + B3 -->|Thành công| C1 --> C2 +``` + +### Screens + +| Bước | Screen | Files | +|------|--------|-------| +| Login | Phone input | `customer-desktop.pen`, `customer-tablet.pen`, `customer-mobile.pen` | +| OTP | OTP verify | Tích hợp trong login page | +| Register | Form đăng ký | `register/customer-*.pen` | + +--- + +## 3. Staff Authentication + +### Login Flow +```mermaid +flowchart TB + subgraph START["👨‍💼 NHÂN VIÊN"] + A1[Mở app POS] + end + + subgraph LOGIN["🔐 ĐĂNG NHẬP"] + B1[Nhập tài khoản được cấp] + B2[Nhập mật khẩu] + B3{Xác thực?} + B4[❌ Sai - Thử lại] + end + + subgraph SHIFT["⏰ CA LÀM"] + C1[Chọn chi nhánh] + C2[Bắt đầu ca] + C3[Vào POS chính] + end + + A1 --> B1 --> B2 --> B3 + B3 -->|Sai| B4 --> B1 + B3 -->|Đúng| C1 --> C2 --> C3 +``` + +### Screens + +| Bước | Screen | Files | +|------|--------|-------| +| Login | Email/Password | `staff-desktop.pen`, `staff-tablet.pen`, `staff-mobile.pen` | + +--- + +## 4. Admin Authentication + +### Login Flow +```mermaid +flowchart TB + subgraph START["🔒 ADMIN"] + A1[Truy cập admin panel] + end + + subgraph AUTH["🛡️ BẢO MẬT CAO"] + B1[Nhập email admin] + B2[Nhập mật khẩu] + B3{Xác thực?} + B4[❌ Sai - 5 lần khóa 30p] + end + + subgraph 2FA["🔐 XÁC THỰC 2 LỚP"] + C1[Nhập mã 2FA] + C2[Authenticator App] + C3{Mã đúng?} + end + + subgraph SUCCESS["✅ ĐĂNG NHẬP"] + D1[Ghi log audit] + D2[Vào dashboard admin] + end + + A1 --> B1 --> B2 --> B3 + B3 -->|Sai| B4 --> B1 + B3 -->|Đúng| C1 + C1 --> C2 --> C3 + C3 -->|Sai| C1 + C3 -->|Đúng| D1 --> D2 +``` + +### Security Features +- 🔒 Khóa sau 5 lần nhập sai (30 phút) +- 🛡️ Bắt buộc 2FA +- 📝 Ghi log đăng nhập +- ⏱️ Session timeout 30 phút + +### Screens + +| Bước | Screen | Files | +|------|--------|-------| +| Login | Email/Password + 2FA | `admin-desktop.pen`, `admin-tablet.pen`, `admin-mobile.pen` | + +--- + +## 5. Branch Authentication + +### Login Flow +```mermaid +flowchart TB + subgraph START["🏪 CHI NHÁNH"] + A1[Truy cập portal] + end + + subgraph AUTH["🔐 ĐĂNG NHẬP"] + B1[Nhập email chi nhánh] + B2[Nhập mật khẩu] + B3{Xác thực?} + end + + subgraph DASHBOARD["📊 QUẢN LÝ"] + C1[Xem thống kê] + C2[Quản lý nhân viên] + C3[Báo cáo doanh thu] + end + + A1 --> B1 --> B2 --> B3 + B3 -->|Sai| B1 + B3 -->|Đúng| C1 + C1 --> C2 --> C3 +``` + +### Screens + +| Bước | Screen | Files | +|------|--------|-------| +| Login | Email/Password | `branch-desktop.pen`, `branch-tablet.pen`, `branch-mobile.pen` | + +--- + +## 6. Password Recovery + +### Forgot Password Flow +```mermaid +flowchart TB + subgraph REQUEST["📧 YÊU CẦU"] + A1[Nhấn Quên mật khẩu] + A2[Nhập email/SĐT] + A3[Gửi yêu cầu] + end + + subgraph VERIFY["✉️ XÁC MINH"] + B1[Nhận email/SMS] + B2[Click link reset] + B3[Hoặc nhập code] + end + + subgraph RESET["🔄 ĐẶT LẠI"] + C1[Nhập mật khẩu mới] + C2[Xác nhận mật khẩu] + C3{Hợp lệ?} + C4[❌ Không đủ mạnh] + end + + subgraph DONE["✅ HOÀN TẤT"] + D1[Cập nhật thành công] + D2[Chuyển trang login] + end + + A1 --> A2 --> A3 + A3 --> B1 --> B2 --> C1 + B1 --> B3 --> C1 + C1 --> C2 --> C3 + C3 -->|Yếu| C4 --> C1 + C3 -->|Mạnh| D1 --> D2 +``` + +### Password Requirements +``` +Yêu cầu mật khẩu: +- Tối thiểu 8 ký tự +- Có chữ hoa (A-Z) +- Có chữ thường (a-z) +- Có số (0-9) +- Có ký tự đặc biệt (!@#$%^&*) +``` + +### Screens + +| Bước | Screen | Files | +|------|--------|-------| +| Request | Form nhập email | `forgot-password/desktop.pen`, `tablet.pen`, `mobile.pen` | +| Confirm | Thông báo đã gửi | Tích hợp trong forgot-password | +| Reset | Form đặt lại | (Cần tạo thêm) | + +--- + +## Tổng hợp Files + +``` +src/pages/auth/ +├── login/ +│ ├── customer-desktop.pen +│ ├── customer-tablet.pen +│ ├── customer-mobile.pen +│ ├── staff-desktop.pen +│ ├── staff-tablet.pen +│ ├── staff-mobile.pen +│ ├── admin-desktop.pen +│ ├── admin-tablet.pen +│ ├── admin-mobile.pen +│ ├── branch-desktop.pen +│ ├── branch-tablet.pen +│ └── branch-mobile.pen +├── register/ +│ ├── customer-desktop.pen +│ ├── customer-tablet.pen +│ └── customer-mobile.pen +└── forgot-password/ + ├── desktop.pen + ├── tablet.pen + └── mobile.pen +``` + +**Tổng: 18 files** (4 roles × 3 devices + 3 register + 3 forgot-password) diff --git a/pencil-design/docs/pos-workflow-guide.md b/pencil-design/docs/pos-workflow-guide.md new file mode 100644 index 00000000..fc5cba98 --- /dev/null +++ b/pencil-design/docs/pos-workflow-guide.md @@ -0,0 +1,406 @@ +# POS Workflow Documentation | Tài liệu Quy trình POS + +## Mục lục +1. [Tổng quan](#1-tổng-quan) +2. [Café - Quick Service](#2-café---quick-service) +3. [Restaurant - Full Service](#3-restaurant---full-service) +4. [Karaoke - Time-Based](#4-karaoke---time-based) +5. [Spa - Appointment Service](#5-spa---appointment-service) +6. [Payment Flow](#6-payment-flow) + +--- + +## 1. Tổng Quan + +### So sánh 4 mô hình + +| Yếu tố | Café | Restaurant | Karaoke | Spa | +|--------|------|------------|---------|-----| +| **Thanh toán** | Trước | Sau | Sau | Sau | +| **Thời gian** | 5-10 phút | 30-90 phút | 1-4 giờ | 30-120 phút | +| **Đối tượng** | Counter | Bàn | Phòng | Khách + NV | +| **Tính năng đặc biệt** | Queue | Kitchen | Timer | Loyalty | + +--- + +## 2. Café - Quick Service + +### Workflow Diagram +```mermaid +flowchart TB + subgraph CUSTOMER["👤 KHÁCH HÀNG"] + A1[Đến quầy] + end + + subgraph ORDER["📝 ORDER"] + B1[Xem menu] + B2[Chọn món] + B3[Tùy chỉnh
Size/Topping] + end + + subgraph PAYMENT["💳 THANH TOÁN"] + C1{Phương thức?} + C2[Tiền mặt] + C3[QR/Chuyển khoản] + C4[Thẻ] + C5[In bill + Số thứ tự] + end + + subgraph PREPARE["☕ PHA CHẾ"] + D1[Barista nhận order] + D2[Pha chế] + D3[Hoàn thành] + end + + subgraph SERVE["🎉 PHỤC VỤ"] + E1[Gọi số] + E2[Khách nhận đồ] + E3[Ra về] + end + + A1 --> B1 --> B2 --> B3 + B3 --> C1 + C1 --> C2 & C3 & C4 + C2 & C3 & C4 --> C5 + C5 --> D1 --> D2 --> D3 + D3 --> E1 --> E2 --> E3 +``` + +### Screens theo bước + +| Bước | Screen | File | +|------|--------|------| +| Order | POS chính | `cafe/desktop.pen` | +| Payment | Chọn phương thức | `shared/payment/method-select.pen` | +| Payment | Tiền mặt | `shared/payment/cash.pen` | +| Payment | QR | `shared/payment/qr.pen` | +| Payment | Thành công | `shared/payment/success.pen` | +| Serve | Màn hình gọi số | `cafe/workflow/queue-display.pen` | + +--- + +## 3. Restaurant - Full Service + +### Workflow Diagram +```mermaid +flowchart TB + subgraph ARRIVE["👤 KHÁCH ĐẾN"] + A1[Vào nhà hàng] + A2{Đặt bàn trước?} + A3[Check-in đặt bàn] + A4[Chọn bàn trống] + end + + subgraph SEAT["🪑 NGỒI BÀN"] + B1[Nhân viên dẫn bàn] + B2[Mở order bàn] + end + + subgraph ORDER["📝 ORDER ĐỢT 1"] + C1[Xem menu] + C2[Chọn món] + C3[Gửi bếp] + end + + subgraph KITCHEN["👨‍🍳 BẾP"] + D1[Bếp nhận order] + D2[Nấu món] + D3[Món sẵn sàng] + D4[Phục vụ ra bàn] + end + + subgraph CONTINUE["🔄 TIẾP TỤC"] + E1{Thêm món?} + E2[Order đợt 2+] + end + + subgraph CHECKOUT["💳 TÍNH TIỀN"] + F1[Khách yêu cầu bill] + F2[Xem lại bill] + F3{Thanh toán} + F4[Tiền mặt/QR/Thẻ] + F5[In hóa đơn] + end + + subgraph LEAVE["👋 RA VỀ"] + G1[Đóng bàn] + G2[Khách ra về] + end + + A1 --> A2 + A2 -->|Có| A3 + A2 -->|Không| A4 + A3 & A4 --> B1 --> B2 + B2 --> C1 --> C2 --> C3 + C3 --> D1 --> D2 --> D3 --> D4 + D4 --> E1 + E1 -->|Có| E2 --> C2 + E1 -->|Không| F1 + F1 --> F2 --> F3 --> F4 --> F5 + F5 --> G1 --> G2 +``` + +### Screens theo bước + +| Bước | Screen | File | +|------|--------|------| +| Arrive | Sơ đồ bàn | `restaurant/workflow/table-map.pen` | +| Order | POS order bàn | `restaurant/desktop.pen` | +| Kitchen | Màn hình bếp | `restaurant/workflow/kitchen-display.pen` | +| Payment | Các màn thanh toán | `shared/payment/*.pen` | + +### Trạng thái Order Item +- 🟡 **Chờ** - Vừa gửi bếp +- 🔵 **Đang làm** - Bếp nhận +- 🟢 **Xong** - Sẵn sàng phục vụ +- ✅ **Đã phục vụ** - Ra bàn + +--- + +## 4. Karaoke - Time-Based + +### Workflow Diagram +```mermaid +flowchart TB + subgraph ARRIVE["👤 KHÁCH ĐẾN"] + A1[Vào quán] + A2[Xem sơ đồ phòng] + A3[Chọn phòng trống] + end + + subgraph OPEN["🚪 MỞ PHÒNG"] + B1[Chọn thời lượng] + B2[Mở phòng] + B3[⏱️ Timer bắt đầu] + end + + subgraph SESSION["🎤 TRONG PHÒNG"] + C1[Hát karaoke] + C2{Order đồ?} + C3[Chọn đồ uống/ăn] + C4[Gửi order] + end + + subgraph EXTEND["⏰ GIA HẠN"] + D1{Timer sắp hết?} + D2[Thông báo 10p trước] + D3{Gia hạn?} + D4[Thêm thời gian] + end + + subgraph CLOSE["🔒 ĐÓNG PHÒNG"] + E1[Kết thúc session] + E2[⏱️ Timer dừng] + E3[Xem bill tổng] + end + + subgraph PAYMENT["💳 THANH TOÁN"] + F1[Tiền phòng + F&B] + F2{Thanh toán} + F3[Tiền mặt/QR/Thẻ] + F4[In hóa đơn] + end + + subgraph LEAVE["👋 RA VỀ"] + G1[Reset phòng] + G2[Khách ra về] + end + + A1 --> A2 --> A3 + A3 --> B1 --> B2 --> B3 + B3 --> C1 + C1 --> C2 + C2 -->|Có| C3 --> C4 --> C1 + C2 -->|Không| D1 + D1 -->|Có| D2 --> D3 + D3 -->|Có| D4 --> C1 + D3 -->|Không| E1 + D1 -->|Không| C1 + E1 --> E2 --> E3 + E3 --> F1 --> F2 --> F3 --> F4 + F4 --> G1 --> G2 +``` + +### Screens theo bước + +| Bước | Screen | File | +|------|--------|------| +| Arrive | Sơ đồ phòng | `karaoke/workflow/room-map.pen` | +| Session | Chi tiết phòng + timer | `karaoke/workflow/room-session.pen` | +| Order | POS order đồ | `karaoke/desktop.pen` | +| Payment | Các màn thanh toán | `shared/payment/*.pen` | + +### Tính giá phòng +``` +Tiền phòng = Giá/giờ × Số giờ thực tế +- Block đầu: 2 giờ minimum +- Block sau: +30 phút/lần +- Peak hours (18h-22h T6-CN): ×1.5 +- Happy hour (14h-17h T2-T5): -30% +``` + +--- + +## 5. Spa - Appointment Service + +### Workflow Diagram +```mermaid +flowchart TB + subgraph ARRIVE["👤 KHÁCH ĐẾN"] + A1[Vào spa] + A2{Có đặt lịch?} + A3[Tìm khách hàng] + A4[Check-in lịch hẹn] + A5[Walk-in mới] + end + + subgraph CUSTOMER["👥 KHÁCH HÀNG"] + B1{Khách cũ?} + B2[Tìm trong hệ thống] + B3[Tạo khách mới] + B4[Xem thông tin + VIP tier] + end + + subgraph SERVICE["💆 CHỌN DỊCH VỤ"] + C1[Xem danh sách dịch vụ] + C2[Chọn dịch vụ] + C3[Chọn nhân viên] + end + + subgraph PERFORM["✨ THỰC HIỆN"] + D1[Bắt đầu dịch vụ] + D2[Thực hiện] + D3[Hoàn thành] + end + + subgraph CONTINUE["🔄 TIẾP TỤC"] + E1{Thêm dịch vụ?} + E2[Chọn dịch vụ tiếp] + end + + subgraph CHECKOUT["💳 THANH TOÁN"] + F1[Xem bill] + F2{Dùng điểm?} + F3[Trừ điểm loyalty] + F4{Thanh toán} + F5[Tiền mặt/QR/Thẻ] + F6[+Tích điểm mới] + end + + subgraph LEAVE["👋 RA VỀ"] + G1{Đặt lịch lần sau?} + G2[Tạo lịch hẹn] + G3[Khách ra về] + end + + A1 --> A2 + A2 -->|Có| A3 --> A4 + A2 -->|Không| A5 + A4 & A5 --> B1 + B1 -->|Có| B2 --> B4 + B1 -->|Không| B3 --> B4 + B4 --> C1 --> C2 --> C3 + C3 --> D1 --> D2 --> D3 + D3 --> E1 + E1 -->|Có| E2 --> C2 + E1 -->|Không| F1 + F1 --> F2 + F2 -->|Có| F3 --> F4 + F2 -->|Không| F4 + F4 --> F5 --> F6 + F6 --> G1 + G1 -->|Có| G2 --> G3 + G1 -->|Không| G3 +``` + +### Screens theo bước + +| Bước | Screen | File | +|------|--------|------| +| Customer | Tìm khách | `spa/workflow/customer-lookup.pen` | +| Service | POS chọn dịch vụ | `spa/desktop.pen` | +| Staff | Chọn nhân viên | `spa/workflow/staff-assign.pen` | +| Payment | Các màn thanh toán | `shared/payment/*.pen` | + +### Loyalty System +``` +Tích điểm: 1 điểm / 10,000₫ +Đổi điểm: 100 điểm = 10,000₫ + +VIP Tiers: +- Silver: 500 điểm (giảm 5%) +- Gold: 2,000 điểm (giảm 10%) +- Platinum: 5,000 điểm (giảm 15%) +``` + +--- + +## 6. Payment Flow + +### Shared Payment Workflow +```mermaid +flowchart LR + A[Chọn phương thức] --> B{Loại?} + B -->|Tiền mặt| C[Nhập số tiền] + B -->|QR| D[Hiển thị QR] + B -->|Thẻ| E[Quẹt thẻ] + C --> F[Tính tiền thối] + D --> G[Chờ xác nhận] + E --> H[Chờ máy POS] + F & G & H --> I[Thành công] + I --> J[In/Gửi hóa đơn] + J --> K[Hoàn tất] +``` + +### Payment Screens + +| Screen | Mô tả | File | +|--------|-------|------| +| Method Select | Chọn Cash/QR/Card | `method-select.pen` | +| Cash | Tính tiền thối | `cash.pen` | +| QR | VietQR/MoMo/ZaloPay | `qr.pen` | +| Success | Xác nhận thành công | `success.pen` | +| Receipt | Mẫu hóa đơn 80mm | `receipt.pen` | + +--- + +## Tổng hợp Files + +``` +src/pages/tPOS/pos/ +├── shared/payment/ # Dùng chung +│ ├── method-select.pen +│ ├── cash.pen +│ ├── qr.pen +│ ├── success.pen +│ └── receipt.pen +├── cafe/ +│ ├── desktop.pen +│ ├── tablet.pen +│ ├── mobile.pen +│ └── workflow/ +│ └── queue-display.pen +├── restaurant/ +│ ├── desktop.pen +│ ├── tablet.pen +│ ├── mobile.pen +│ └── workflow/ +│ ├── table-map.pen +│ └── kitchen-display.pen +├── karaoke/ +│ ├── desktop.pen +│ ├── tablet.pen +│ ├── mobile.pen +│ └── workflow/ +│ ├── room-map.pen +│ └── room-session.pen +└── spa/ + ├── desktop.pen + ├── tablet.pen + ├── mobile.pen + └── workflow/ + ├── customer-lookup.pen + └── staff-assign.pen +``` + +**Tổng: 24 files** (12 device variants + 12 workflow screens) diff --git a/pencil-design/src/atoms/auth-buttons.pen b/pencil-design/src/atoms/auth-buttons.pen new file mode 100644 index 00000000..e876954c --- /dev/null +++ b/pencil-design/src/atoms/auth-buttons.pen @@ -0,0 +1,461 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "name": "Auth Buttons Showcase", + "width": 1440, + "fill": "$bg-page", + "layout": "vertical", + "gap": 80, + "padding": [80, 120], + "children": [ + { + "type": "frame", + "id": "AuthButtonSection", + "name": "Auth Buttons Section", + "width": "fill_container", + "layout": "vertical", + "gap": 48, + "children": [ + { + "type": "frame", + "name": "sectionHeader", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [6, 14], + "children": [ + { + "type": "text", + "name": "badgeText", + "fill": "$orange-primary", + "content": "AUTH BUTTONS", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "text", + "name": "shTitle", + "fill": "$text-primary", + "content": "Social Login Buttons", + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 42, + "fontWeight": "normal", + "letterSpacing": -1 + }, + { + "type": "text", + "name": "shDesc", + "fill": "$text-tertiary", + "textGrowth": "fixed-width", + "width": 600, + "content": "Social authentication buttons for customer login and registration.", + "lineHeight": 1.6, + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 16 + } + ] + }, + { + "type": "frame", + "name": "buttonsGrid", + "width": "fill_container", + "layout": "vertical", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "SocialButtonsRow", + "name": "Social Buttons Row", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 24, + "padding": 40, + "children": [ + { + "type": "text", + "name": "rowLabel", + "fill": "$text-secondary", + "content": "Social Login Buttons", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "buttonsContainer", + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "SocialBtn_Google", + "name": "Atom/SocialButton/Google", + "reusable": true, + "width": 320, + "height": 48, + "fill": "#FFFFFF", + "cornerRadius": 10, + "gap": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "googleIcon", + "width": 20, + "height": 20, + "children": [ + { + "type": "text", + "fill": "#4285F4", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "name": "btnLabel", + "fill": "#1F1F1F", + "content": "Đăng nhập với Google", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SocialBtn_Apple", + "name": "Atom/SocialButton/Apple", + "reusable": true, + "width": 320, + "height": 48, + "fill": "#000000", + "cornerRadius": 10, + "gap": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "appleIcon", + "width": 20, + "height": 20, + "iconFontName": "apple", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "name": "btnLabel", + "fill": "#FFFFFF", + "content": "Đăng nhập với Apple", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SocialBtn_Zalo", + "name": "Atom/SocialButton/Zalo", + "reusable": true, + "width": 320, + "height": 48, + "fill": "#0068FF", + "cornerRadius": 10, + "gap": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "zaloIcon", + "fill": "#FFFFFF", + "content": "Z", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "700" + }, + { + "type": "text", + "name": "btnLabel", + "fill": "#FFFFFF", + "content": "Đăng nhập với Zalo", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SocialBtn_Facebook", + "name": "Atom/SocialButton/Facebook", + "reusable": true, + "width": 320, + "height": 48, + "fill": "#1877F2", + "cornerRadius": 10, + "gap": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "fbIcon", + "width": 20, + "height": 20, + "iconFontName": "facebook", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "name": "btnLabel", + "fill": "#FFFFFF", + "content": "Đăng nhập với Facebook", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "AuthActionButtonsRow", + "name": "Auth Action Buttons Row", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 24, + "padding": 40, + "children": [ + { + "type": "text", + "name": "rowLabel", + "fill": "$text-secondary", + "content": "Auth Action Buttons", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "buttonsContainer", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "AuthBtn_Login", + "name": "Atom/AuthButton/Login", + "reusable": true, + "width": 320, + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { "color": "#FF5C00", "position": 0 }, + { "color": "#FF8A4C", "position": 1 } + ] + }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "btnLabel", + "fill": "$text-primary", + "content": "Đăng nhập", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "AuthBtn_Register", + "name": "Atom/AuthButton/Register", + "reusable": true, + "width": 320, + "height": 48, + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "btnLabel", + "fill": "$text-primary", + "content": "Đăng ký", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "AuthBtn_ForgotPassword", + "name": "Atom/AuthButton/ForgotPassword", + "reusable": true, + "height": 48, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "btnLabel", + "fill": "$orange-primary", + "content": "Quên mật khẩu?", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "LoadingStatesRow", + "name": "Loading States Row", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 24, + "padding": 40, + "children": [ + { + "type": "text", + "name": "rowLabel", + "fill": "$text-secondary", + "content": "Button States", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "statesContainer", + "gap": 16, + "children": [ + { + "type": "frame", + "id": "AuthBtn_Loading", + "name": "Atom/AuthButton/Loading", + "reusable": true, + "width": 320, + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 10, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "loadingIcon", + "width": 18, + "height": 18, + "iconFontName": "loader-2", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "name": "btnLabel", + "fill": "$text-muted", + "content": "Đang xử lý...", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "AuthBtn_Disabled", + "name": "Atom/AuthButton/Disabled", + "reusable": true, + "width": 320, + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "btnLabel", + "fill": "$text-disabled", + "content": "Đăng nhập", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { "type": "color", "value": "#0A0A0B" }, + "bg-surface": { "type": "color", "value": "#111113" }, + "bg-elevated": { "type": "color", "value": "#1A1A1D" }, + "bg-interactive": { "type": "color", "value": "#2A2A2E" }, + "border-default": { "type": "color", "value": "#2A2A2E" }, + "border-subtle": { "type": "color", "value": "#1F1F23" }, + "orange-primary": { "type": "color", "value": "#FF5C00" }, + "text-primary": { "type": "color", "value": "#FFFFFF" }, + "text-secondary": { "type": "color", "value": "#ADADB0" }, + "text-tertiary": { "type": "color", "value": "#8B8B90" }, + "text-muted": { "type": "color", "value": "#6B6B70" }, + "text-disabled": { "type": "color", "value": "#4B4B50" } + } +} diff --git a/pencil-design/src/atoms/auth-inputs.pen b/pencil-design/src/atoms/auth-inputs.pen new file mode 100644 index 00000000..fbf4c6f4 --- /dev/null +++ b/pencil-design/src/atoms/auth-inputs.pen @@ -0,0 +1,782 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "name": "Auth Inputs Showcase", + "width": 1440, + "fill": "$bg-page", + "layout": "vertical", + "gap": 80, + "padding": [80, 120], + "children": [ + { + "type": "frame", + "id": "AuthInputSection", + "name": "Auth Inputs Section", + "width": "fill_container", + "layout": "vertical", + "gap": 48, + "children": [ + { + "type": "frame", + "name": "sectionHeader", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [6, 14], + "children": [ + { + "type": "text", + "name": "badgeText", + "fill": "$orange-primary", + "content": "AUTH INPUTS", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "text", + "name": "shTitle", + "fill": "$text-primary", + "content": "Authentication Inputs", + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 42, + "fontWeight": "normal", + "letterSpacing": -1 + }, + { + "type": "text", + "name": "shDesc", + "fill": "$text-tertiary", + "textGrowth": "fixed-width", + "width": 600, + "content": "Form inputs for login, registration, and verification flows.", + "lineHeight": 1.6, + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 16 + } + ] + }, + { + "type": "frame", + "name": "inputsGrid", + "width": "fill_container", + "layout": "vertical", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "TextInputRow", + "name": "Text Inputs Row", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 24, + "padding": 40, + "children": [ + { + "type": "text", + "name": "rowLabel", + "fill": "$text-secondary", + "content": "Text Inputs", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputsContainer", + "gap": 24, + "children": [ + { + "type": "frame", + "id": "AuthInput_Text_Default", + "name": "Atom/AuthInput/Text/Default", + "reusable": true, + "width": 320, + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "padding": [0, 16], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "AuthInput_Text_Placeholder", + "name": "placeholder", + "fill": "$text-muted", + "content": "Email hoặc số điện thoại", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "id": "AuthInput_Text_Filled", + "name": "Atom/AuthInput/Text/Filled", + "reusable": true, + "width": 320, + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-focus" }, + "padding": [0, 16], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "AuthInput_Text_Value", + "name": "value", + "fill": "$text-primary", + "content": "0912345678", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "id": "AuthInput_Text_Error", + "name": "Atom/AuthInput/Text/Error", + "reusable": true, + "width": 320, + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$status-error" }, + "padding": [0, 16], + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "value", + "fill": "$text-primary", + "content": "invalid@email", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "text", + "name": "errorText", + "fill": "$status-error", + "content": "Email không hợp lệ", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PasswordInputRow", + "name": "Password Inputs Row", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 24, + "padding": 40, + "children": [ + { + "type": "text", + "name": "rowLabel", + "fill": "$text-secondary", + "content": "Password Inputs", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputsContainer", + "gap": 24, + "children": [ + { + "type": "frame", + "id": "AuthInput_Password_Default", + "name": "Atom/AuthInput/Password/Default", + "reusable": true, + "width": 320, + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "AuthInput_Password_Placeholder", + "name": "placeholder", + "fill": "$text-muted", + "content": "Mật khẩu", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "icon_font", + "name": "toggleIcon", + "width": 18, + "height": 18, + "iconFontName": "eye-off", + "iconFontFamily": "lucide", + "fill": "$text-muted" + } + ] + }, + { + "type": "frame", + "id": "AuthInput_Password_Visible", + "name": "Atom/AuthInput/Password/Visible", + "reusable": true, + "width": 320, + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-focus" }, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "value", + "fill": "$text-primary", + "content": "myPassword123", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "icon_font", + "name": "toggleIcon", + "width": 18, + "height": 18, + "iconFontName": "eye", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + } + ] + }, + { + "type": "frame", + "id": "AuthInput_Password_Hidden", + "name": "Atom/AuthInput/Password/Hidden", + "reusable": true, + "width": 320, + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-focus" }, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "masked", + "fill": "$text-primary", + "content": "••••••••••••", + "fontFamily": "Roboto", + "fontSize": 14, + "letterSpacing": 2 + }, + { + "type": "icon_font", + "name": "toggleIcon", + "width": 18, + "height": 18, + "iconFontName": "eye-off", + "iconFontFamily": "lucide", + "fill": "$text-muted" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PINInputRow", + "name": "PIN Inputs Row", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 24, + "padding": 40, + "children": [ + { + "type": "text", + "name": "rowLabel", + "fill": "$text-secondary", + "content": "PIN Inputs (Cashier/Staff)", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputsContainer", + "gap": 24, + "alignItems": "start", + "children": [ + { + "type": "frame", + "id": "AuthInput_PIN_Empty", + "name": "Atom/AuthInput/PIN/Empty", + "reusable": true, + "gap": 12, + "children": [ + { + "type": "frame", + "name": "digit1", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "digit2", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "digit3", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "digit4", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "digit5", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "digit6", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + } + ] + }, + { + "type": "frame", + "id": "AuthInput_PIN_Partial", + "name": "Atom/AuthInput/PIN/Partial", + "reusable": true, + "gap": 12, + "children": [ + { + "type": "frame", + "name": "digit1", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "$border-focus" }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "dot", + "width": 12, + "height": 12, + "fill": "$orange-primary", + "cornerRadius": 6 + } + ] + }, + { + "type": "frame", + "name": "digit2", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "$border-focus" }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "dot", + "width": 12, + "height": 12, + "fill": "$orange-primary", + "cornerRadius": 6 + } + ] + }, + { + "type": "frame", + "name": "digit3", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { "thickness": 2, "fill": "$orange-primary" }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "digit4", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "digit5", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "digit6", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "OTPInputRow", + "name": "OTP Inputs Row", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 24, + "padding": 40, + "children": [ + { + "type": "text", + "name": "rowLabel", + "fill": "$text-secondary", + "content": "OTP Inputs (Customer Verification)", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputsContainer", + "gap": 24, + "alignItems": "start", + "children": [ + { + "type": "frame", + "id": "AuthInput_OTP_Empty", + "name": "Atom/AuthInput/OTP/Empty", + "reusable": true, + "gap": 8, + "children": [ + { + "type": "frame", + "name": "d1", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "d2", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "d3", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "text", + "name": "separator", + "fill": "$text-muted", + "content": "—", + "fontFamily": "Roboto", + "fontSize": 20 + }, + { + "type": "frame", + "name": "d4", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "d5", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "d6", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + } + ] + }, + { + "type": "frame", + "id": "AuthInput_OTP_Filled", + "name": "Atom/AuthInput/OTP/Filled", + "reusable": true, + "gap": 8, + "children": [ + { + "type": "frame", + "name": "d1", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$status-success" }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } + ] + }, + { + "type": "frame", + "name": "d2", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$status-success" }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } + ] + }, + { + "type": "frame", + "name": "d3", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$status-success" }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } + ] + }, + { + "type": "text", + "name": "separator", + "fill": "$status-success", + "content": "—", + "fontFamily": "Roboto", + "fontSize": 20 + }, + { + "type": "frame", + "name": "d4", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$status-success" }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } + ] + }, + { + "type": "frame", + "name": "d5", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$status-success" }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } + ] + }, + { + "type": "frame", + "name": "d6", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$status-success" }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { "type": "color", "value": "#0A0A0B" }, + "bg-surface": { "type": "color", "value": "#111113" }, + "bg-elevated": { "type": "color", "value": "#1A1A1D" }, + "border-default": { "type": "color", "value": "#2A2A2E" }, + "border-subtle": { "type": "color", "value": "#1F1F23" }, + "border-focus": { "type": "color", "value": "#FF5C00" }, + "orange-primary": { "type": "color", "value": "#FF5C00" }, + "text-primary": { "type": "color", "value": "#FFFFFF" }, + "text-secondary": { "type": "color", "value": "#ADADB0" }, + "text-tertiary": { "type": "color", "value": "#8B8B90" }, + "text-muted": { "type": "color", "value": "#6B6B70" }, + "status-error": { "type": "color", "value": "#EF4444" }, + "status-success": { "type": "color", "value": "#22C55E" } + } +} diff --git a/pencil-design/src/components/tPOS-ui-kit.pen b/pencil-design/src/components/tPOS-ui-kit.pen index 72008346..cc79fecf 100644 --- a/pencil-design/src/components/tPOS-ui-kit.pen +++ b/pencil-design/src/components/tPOS-ui-kit.pen @@ -10,6 +10,1038 @@ "gap": 40, "padding": 40, "children": [ + { + "type": "frame", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [ + 6, + 14 + ], + "children": [ + { + "type": "text", + "name": "badgeText", + "fill": "$orange-primary", + "content": "AUTH BUTTONS", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "frame", + "id": "SocialBtn_Google", + "name": "Atom/SocialButton/Google", + "reusable": true, + "width": 320, + "height": 48, + "fill": "#FFFFFF", + "cornerRadius": 10, + "gap": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "googleIcon", + "width": 20, + "height": 20, + "children": [ + { + "type": "text", + "fill": "#4285F4", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "name": "btnLabel", + "fill": "#1F1F1F", + "content": "\u0110\u0103ng nh\u1eadp v\u1edbi Google", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SocialBtn_Apple", + "name": "Atom/SocialButton/Apple", + "reusable": true, + "width": 320, + "height": 48, + "fill": "#000000", + "cornerRadius": 10, + "gap": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "appleIcon", + "width": 20, + "height": 20, + "iconFontName": "apple", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "name": "btnLabel", + "fill": "#FFFFFF", + "content": "\u0110\u0103ng nh\u1eadp v\u1edbi Apple", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SocialBtn_Zalo", + "name": "Atom/SocialButton/Zalo", + "reusable": true, + "width": 320, + "height": 48, + "fill": "#0068FF", + "cornerRadius": 10, + "gap": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "zaloIcon", + "fill": "#FFFFFF", + "content": "Z", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "700" + }, + { + "type": "text", + "name": "btnLabel", + "fill": "#FFFFFF", + "content": "\u0110\u0103ng nh\u1eadp v\u1edbi Zalo", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "SocialBtn_Facebook", + "name": "Atom/SocialButton/Facebook", + "reusable": true, + "width": 320, + "height": 48, + "fill": "#1877F2", + "cornerRadius": 10, + "gap": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "fbIcon", + "width": 20, + "height": 20, + "iconFontName": "facebook", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "name": "btnLabel", + "fill": "#FFFFFF", + "content": "\u0110\u0103ng nh\u1eadp v\u1edbi Facebook", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "AuthBtn_Login", + "name": "Atom/AuthButton/Login", + "reusable": true, + "width": 320, + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "btnLabel", + "fill": "$text-primary", + "content": "\u0110\u0103ng nh\u1eadp", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "AuthBtn_Register", + "name": "Atom/AuthButton/Register", + "reusable": true, + "width": 320, + "height": 48, + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "btnLabel", + "fill": "$text-primary", + "content": "\u0110\u0103ng k\u00fd", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "AuthBtn_ForgotPassword", + "name": "Atom/AuthButton/ForgotPassword", + "reusable": true, + "height": 48, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "btnLabel", + "fill": "$orange-primary", + "content": "Qu\u00ean m\u1eadt kh\u1ea9u?", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "AuthBtn_Loading", + "name": "Atom/AuthButton/Loading", + "reusable": true, + "width": 320, + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 10, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "loadingIcon", + "width": 18, + "height": 18, + "iconFontName": "loader-2", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "name": "btnLabel", + "fill": "$text-muted", + "content": "\u0110ang x\u1eed l\u00fd...", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "AuthBtn_Disabled", + "name": "Atom/AuthButton/Disabled", + "reusable": true, + "width": 320, + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "btnLabel", + "fill": "$text-disabled", + "content": "\u0110\u0103ng nh\u1eadp", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [ + 6, + 14 + ], + "children": [ + { + "type": "text", + "name": "badgeText", + "fill": "$orange-primary", + "content": "AUTH INPUTS", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "frame", + "id": "AuthInput_Text_Default", + "name": "Atom/AuthInput/Text/Default", + "reusable": true, + "width": 320, + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "AuthInput_Text_Placeholder", + "name": "placeholder", + "fill": "$text-muted", + "content": "Email ho\u1eb7c s\u1ed1 \u0111i\u1ec7n tho\u1ea1i", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "id": "AuthInput_Text_Filled", + "name": "Atom/AuthInput/Text/Filled", + "reusable": true, + "width": 320, + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-focus" + }, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "AuthInput_Text_Value", + "name": "value", + "fill": "$text-primary", + "content": "0912345678", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "id": "AuthInput_Text_Error", + "name": "Atom/AuthInput/Text/Error", + "reusable": true, + "width": 320, + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$status-error" + }, + "padding": [ + 0, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "value", + "fill": "$text-primary", + "content": "invalid@email", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "text", + "name": "errorText", + "fill": "$status-error", + "content": "Email kh\u00f4ng h\u1ee3p l\u1ec7", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "id": "AuthInput_Password_Default", + "name": "Atom/AuthInput/Password/Default", + "reusable": true, + "width": 320, + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "AuthInput_Password_Placeholder", + "name": "placeholder", + "fill": "$text-muted", + "content": "M\u1eadt kh\u1ea9u", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "icon_font", + "name": "toggleIcon", + "width": 18, + "height": 18, + "iconFontName": "eye-off", + "iconFontFamily": "lucide", + "fill": "$text-muted" + } + ] + }, + { + "type": "frame", + "id": "AuthInput_Password_Visible", + "name": "Atom/AuthInput/Password/Visible", + "reusable": true, + "width": 320, + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-focus" + }, + "padding": [ + 0, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "value", + "fill": "$text-primary", + "content": "myPassword123", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "icon_font", + "name": "toggleIcon", + "width": 18, + "height": 18, + "iconFontName": "eye", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + } + ] + }, + { + "type": "frame", + "id": "AuthInput_Password_Hidden", + "name": "Atom/AuthInput/Password/Hidden", + "reusable": true, + "width": 320, + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-focus" + }, + "padding": [ + 0, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "masked", + "fill": "$text-primary", + "content": "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", + "fontFamily": "Roboto", + "fontSize": 14, + "letterSpacing": 2 + }, + { + "type": "icon_font", + "name": "toggleIcon", + "width": 18, + "height": 18, + "iconFontName": "eye-off", + "iconFontFamily": "lucide", + "fill": "$text-muted" + } + ] + }, + { + "type": "frame", + "id": "AuthInput_PIN_Empty", + "name": "Atom/AuthInput/PIN/Empty", + "reusable": true, + "gap": 12, + "children": [ + { + "type": "frame", + "name": "digit1", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "digit2", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "digit3", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "digit4", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "digit5", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "digit6", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + } + ] + }, + { + "type": "frame", + "id": "AuthInput_PIN_Partial", + "name": "Atom/AuthInput/PIN/Partial", + "reusable": true, + "gap": 12, + "children": [ + { + "type": "frame", + "name": "digit1", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-focus" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "dot", + "width": 12, + "height": 12, + "fill": "$orange-primary", + "cornerRadius": 6 + } + ] + }, + { + "type": "frame", + "name": "digit2", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-focus" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "dot", + "width": 12, + "height": 12, + "fill": "$orange-primary", + "cornerRadius": 6 + } + ] + }, + { + "type": "frame", + "name": "digit3", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 2, + "fill": "$orange-primary" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "digit4", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "digit5", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "digit6", + "width": 56, + "height": 64, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + } + ] + }, + { + "type": "frame", + "id": "AuthInput_OTP_Empty", + "name": "Atom/AuthInput/OTP/Empty", + "reusable": true, + "gap": 8, + "children": [ + { + "type": "frame", + "name": "d1", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "d2", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "d3", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "text", + "name": "separator", + "fill": "$text-muted", + "content": "\u2014", + "fontFamily": "Roboto", + "fontSize": 20 + }, + { + "type": "frame", + "name": "d4", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "d5", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "d6", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + } + ] + }, + { + "type": "frame", + "id": "AuthInput_OTP_Filled", + "name": "Atom/AuthInput/OTP/Filled", + "reusable": true, + "gap": 8, + "children": [ + { + "type": "frame", + "name": "d1", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$status-success" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "1", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "d2", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$status-success" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "2", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "d3", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$status-success" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "name": "separator", + "fill": "$status-success", + "content": "\u2014", + "fontFamily": "Roboto", + "fontSize": 20 + }, + { + "type": "frame", + "name": "d4", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$status-success" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "4", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "d5", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$status-success" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "5", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "d6", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$status-success" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "6", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + } + ] + } + ] + }, { "type": "frame", "id": "sokxt", @@ -663,6 +1695,636 @@ } ] }, + { + "type": "frame", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [ + 6, + 14 + ], + "children": [ + { + "type": "text", + "name": "badgeText", + "fill": "$orange-primary", + "content": "FORM FIELDS", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "frame", + "id": "FormField_Email_Default", + "name": "Molecule/FormField/Email/Default", + "reusable": true, + "width": 360, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "FormField_Email_Label", + "name": "label", + "fill": "$text-secondary", + "content": "Email", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 16 + ], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "inputIcon", + "width": 18, + "height": 18, + "iconFontName": "mail", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "id": "FormField_Email_Placeholder", + "name": "placeholder", + "fill": "$text-muted", + "content": "email@example.com", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "id": "FormField_Email_Filled", + "name": "Molecule/FormField/Email/Filled", + "reusable": true, + "width": 360, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "Email", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-focus" + }, + "padding": [ + 0, + 16 + ], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "inputIcon", + "width": 18, + "height": 18, + "iconFontName": "mail", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "name": "value", + "fill": "$text-primary", + "content": "user@goodgo.vn", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "id": "FormField_Email_Error", + "name": "Molecule/FormField/Email/Error", + "reusable": true, + "width": 360, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "Email", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$status-error" + }, + "padding": [ + 0, + 16 + ], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "inputIcon", + "width": 18, + "height": 18, + "iconFontName": "mail", + "iconFontFamily": "lucide", + "fill": "$status-error" + }, + { + "type": "text", + "name": "value", + "fill": "$text-primary", + "content": "invalid-email", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "name": "errorRow", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "errorIcon", + "width": 14, + "height": 14, + "iconFontName": "alert-circle", + "iconFontFamily": "lucide", + "fill": "$status-error" + }, + { + "type": "text", + "id": "FormField_Email_ErrorText", + "name": "errorText", + "fill": "$status-error", + "content": "\u0110\u1ecbnh d\u1ea1ng email kh\u00f4ng h\u1ee3p l\u1ec7", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, + { + "type": "frame", + "id": "FormField_Phone_Default", + "name": "Molecule/FormField/Phone/Default", + "reusable": true, + "width": 360, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "S\u1ed1 \u0111i\u1ec7n tho\u1ea1i", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 0, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "countryCode", + "height": "fill_container", + "fill": "$bg-interactive", + "cornerRadius": [ + 10, + 0, + 0, + 10 + ], + "padding": [ + 0, + 12 + ], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "flag", + "content": "\ud83c\uddfb\ud83c\uddf3", + "fontSize": 16 + }, + { + "type": "text", + "name": "code", + "fill": "$text-secondary", + "content": "+84", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "icon_font", + "name": "chevron", + "width": 14, + "height": 14, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-muted" + } + ] + }, + { + "type": "frame", + "name": "inputField", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 0, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "FormField_Phone_Placeholder", + "name": "placeholder", + "fill": "$text-muted", + "content": "912 345 678", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "FormField_Phone_Filled", + "name": "Molecule/FormField/Phone/Filled", + "reusable": true, + "width": 360, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "S\u1ed1 \u0111i\u1ec7n tho\u1ea1i", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-focus" + }, + "gap": 0, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "countryCode", + "height": "fill_container", + "fill": "$bg-interactive", + "cornerRadius": [ + 10, + 0, + 0, + 10 + ], + "padding": [ + 0, + 12 + ], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "flag", + "content": "\ud83c\uddfb\ud83c\uddf3", + "fontSize": 16 + }, + { + "type": "text", + "name": "code", + "fill": "$text-secondary", + "content": "+84", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "icon_font", + "name": "chevron", + "width": 14, + "height": 14, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-muted" + } + ] + }, + { + "type": "frame", + "name": "inputField", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 0, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "value", + "fill": "$text-primary", + "content": "912 345 678", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "FormField_Password_Default", + "name": "Molecule/FormField/Password/Default", + "reusable": true, + "width": 360, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "M\u1eadt kh\u1ea9u", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "inputContent", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "inputIcon", + "width": 18, + "height": 18, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "name": "placeholder", + "fill": "$text-muted", + "content": "Nh\u1eadp m\u1eadt kh\u1ea9u", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "icon_font", + "name": "toggleIcon", + "width": 18, + "height": 18, + "iconFontName": "eye-off", + "iconFontFamily": "lucide", + "fill": "$text-muted" + } + ] + } + ] + }, + { + "type": "frame", + "id": "FormField_Password_WithStrength", + "name": "Molecule/FormField/Password/WithStrength", + "reusable": true, + "width": 360, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "M\u1eadt kh\u1ea9u m\u1edbi", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-focus" + }, + "padding": [ + 0, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "inputContent", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "inputIcon", + "width": 18, + "height": 18, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "name": "masked", + "fill": "$text-primary", + "content": "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", + "fontFamily": "Roboto", + "fontSize": 14, + "letterSpacing": 2 + } + ] + }, + { + "type": "icon_font", + "name": "toggleIcon", + "width": 18, + "height": 18, + "iconFontName": "eye-off", + "iconFontFamily": "lucide", + "fill": "$text-muted" + } + ] + }, + { + "type": "frame", + "name": "strengthMeter", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "name": "strengthBars", + "width": "fill_container", + "gap": 4, + "children": [ + { + "type": "frame", + "name": "bar1", + "width": "fill_container", + "height": 4, + "fill": "$status-success", + "cornerRadius": 2 + }, + { + "type": "frame", + "name": "bar2", + "width": "fill_container", + "height": 4, + "fill": "$status-success", + "cornerRadius": 2 + }, + { + "type": "frame", + "name": "bar3", + "width": "fill_container", + "height": 4, + "fill": "$status-success", + "cornerRadius": 2 + }, + { + "type": "frame", + "name": "bar4", + "width": "fill_container", + "height": 4, + "fill": "$bg-interactive", + "cornerRadius": 2 + } + ] + }, + { + "type": "text", + "name": "strengthLabel", + "fill": "$status-success", + "content": "Kh\u00e1 m\u1ea1nh", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + }, { "type": "frame", "id": "ModeSwitchContainer", @@ -1532,6 +3194,1970 @@ } ] }, + { + "type": "frame", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [ + 6, + 14 + ], + "children": [ + { + "type": "text", + "name": "badgeText", + "fill": "$orange-primary", + "content": "SOCIAL LOGIN", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "frame", + "id": "SocialRow_Full", + "name": "Molecule/SocialLoginRow/Full", + "reusable": true, + "width": 360, + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "name": "dividerRow", + "width": "fill_container", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "line1", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + }, + { + "type": "text", + "name": "orText", + "fill": "$text-muted", + "content": "ho\u1eb7c", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "name": "line2", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + } + ] + }, + { + "type": "frame", + "name": "socialButtons", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "frame", + "name": "googleBtn", + "width": "fill_container", + "height": 48, + "fill": "#FFFFFF", + "cornerRadius": 10, + "gap": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "googleIcon", + "fill": "#4285F4", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "name": "btnLabel", + "fill": "#1F1F1F", + "content": "\u0110\u0103ng nh\u1eadp v\u1edbi Google", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "name": "appleBtn", + "width": "fill_container", + "height": 48, + "fill": "#000000", + "cornerRadius": 10, + "gap": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "appleIcon", + "width": 20, + "height": 20, + "iconFontName": "apple", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "name": "btnLabel", + "fill": "#FFFFFF", + "content": "\u0110\u0103ng nh\u1eadp v\u1edbi Apple", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "name": "zaloBtn", + "width": "fill_container", + "height": 48, + "fill": "#0068FF", + "cornerRadius": 10, + "gap": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "zaloIcon", + "fill": "#FFFFFF", + "content": "Z", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "700" + }, + { + "type": "text", + "name": "btnLabel", + "fill": "#FFFFFF", + "content": "\u0110\u0103ng nh\u1eadp v\u1edbi Zalo", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SocialRow_Compact", + "name": "Molecule/SocialLoginRow/Compact", + "reusable": true, + "width": 360, + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "name": "dividerRow", + "width": "fill_container", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "line1", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + }, + { + "type": "text", + "name": "orText", + "fill": "$text-muted", + "content": "ho\u1eb7c ti\u1ebfp t\u1ee5c v\u1edbi", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "name": "line2", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + } + ] + }, + { + "type": "frame", + "name": "socialIconsRow", + "width": "fill_container", + "justifyContent": "center", + "gap": 16, + "children": [ + { + "type": "frame", + "name": "googleIcon", + "width": 48, + "height": 48, + "fill": "#FFFFFF", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "#4285F4", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "name": "appleIcon", + "width": 48, + "height": 48, + "fill": "#000000", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 22, + "height": 22, + "iconFontName": "apple", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + } + ] + }, + { + "type": "frame", + "name": "zaloIcon", + "width": 48, + "height": 48, + "fill": "#0068FF", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "#FFFFFF", + "content": "Z", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "name": "facebookIcon", + "width": 48, + "height": 48, + "fill": "#1877F2", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 22, + "height": 22, + "iconFontName": "facebook", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [ + 6, + 14 + ], + "children": [ + { + "type": "text", + "name": "badgeText", + "fill": "$orange-primary", + "content": "LOGIN CARDS", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "frame", + "id": "LoginCard_Standard", + "name": "Organism/LoginCard/Standard", + "reusable": true, + "width": 420, + "fill": "$bg-surface", + "cornerRadius": 20, + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "layout": "vertical", + "gap": 32, + "padding": 40, + "children": [ + { + "type": "frame", + "name": "cardHeader", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "logoContainer", + "width": 48, + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "logoText", + "fill": "$text-primary", + "content": "a", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "LoginCard_Title", + "name": "cardTitle", + "fill": "$text-primary", + "content": "\u0110\u0103ng nh\u1eadp", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + }, + { + "type": "text", + "id": "LoginCard_Subtitle", + "name": "cardSubtitle", + "fill": "$text-tertiary", + "content": "Ch\u00e0o m\u1eebng quay tr\u1edf l\u1ea1i", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "name": "formSection", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "name": "emailField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "Email ho\u1eb7c s\u1ed1 \u0111i\u1ec7n tho\u1ea1i", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 16 + ], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "inputIcon", + "width": 18, + "height": 18, + "iconFontName": "user", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "name": "placeholder", + "fill": "$text-muted", + "content": "email@example.com", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "name": "passwordField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "frame", + "name": "labelRow", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "M\u1eadt kh\u1ea9u", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "name": "forgotLink", + "fill": "$orange-primary", + "content": "Qu\u00ean m\u1eadt kh\u1ea9u?", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "inputContent", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "inputIcon", + "width": 18, + "height": 18, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "name": "placeholder", + "fill": "$text-muted", + "content": "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "icon_font", + "name": "toggleIcon", + "width": 18, + "height": 18, + "iconFontName": "eye-off", + "iconFontFamily": "lucide", + "fill": "$text-muted" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "submitButton", + "width": "fill_container", + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "btnLabel", + "fill": "$text-primary", + "content": "\u0110\u0103ng nh\u1eadp", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "footerLinks", + "width": "fill_container", + "justifyContent": "center", + "gap": 4, + "children": [ + { + "type": "text", + "name": "text", + "fill": "$text-tertiary", + "content": "Ch\u01b0a c\u00f3 t\u00e0i kho\u1ea3n?", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "text", + "name": "link", + "fill": "$orange-primary", + "content": "\u0110\u0103ng k\u00fd ngay", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "LoginCard_WithSocial", + "name": "Organism/LoginCard/WithSocial", + "reusable": true, + "width": 420, + "fill": "$bg-surface", + "cornerRadius": 20, + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "layout": "vertical", + "gap": 24, + "padding": 40, + "children": [ + { + "type": "frame", + "name": "cardHeader", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "logoContainer", + "width": 48, + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "logoText", + "fill": "$text-primary", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "name": "cardTitle", + "fill": "$text-primary", + "content": "\u0110\u0103ng nh\u1eadp", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + }, + { + "type": "text", + "name": "cardSubtitle", + "fill": "$text-tertiary", + "content": "\u0110\u1eb7t h\u00e0ng v\u00e0 t\u00edch \u0111i\u1ec3m", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "name": "formSection", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "name": "phoneField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "S\u1ed1 \u0111i\u1ec7n tho\u1ea1i", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "gap": 0, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "countryCode", + "height": "fill_container", + "fill": "$bg-interactive", + "cornerRadius": [ + 10, + 0, + 0, + 10 + ], + "padding": [ + 0, + 12 + ], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "flag", + "content": "\ud83c\uddfb\ud83c\uddf3", + "fontSize": 16 + }, + { + "type": "text", + "name": "code", + "fill": "$text-secondary", + "content": "+84", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "name": "inputField", + "width": "fill_container", + "height": "fill_container", + "padding": [ + 0, + 12 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "placeholder", + "fill": "$text-muted", + "content": "Nh\u1eadp s\u1ed1 \u0111i\u1ec7n tho\u1ea1i", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "submitButton", + "width": "fill_container", + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "btnLabel", + "fill": "$text-primary", + "content": "G\u1eedi m\u00e3 OTP", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "socialDivider", + "width": "fill_container", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "line1", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + }, + { + "type": "text", + "name": "orText", + "fill": "$text-muted", + "content": "ho\u1eb7c", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "name": "line2", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + } + ] + }, + { + "type": "frame", + "name": "socialIconsRow", + "width": "fill_container", + "justifyContent": "center", + "gap": 16, + "children": [ + { + "type": "frame", + "name": "googleIcon", + "width": 48, + "height": 48, + "fill": "#FFFFFF", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "#4285F4", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "name": "appleIcon", + "width": 48, + "height": 48, + "fill": "#000000", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 22, + "height": 22, + "iconFontName": "apple", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + } + ] + }, + { + "type": "frame", + "name": "zaloIcon", + "width": 48, + "height": 48, + "fill": "#0068FF", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "#FFFFFF", + "content": "Z", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "name": "footerLinks", + "width": "fill_container", + "justifyContent": "center", + "gap": 4, + "children": [ + { + "type": "text", + "name": "text", + "fill": "$text-tertiary", + "content": "L\u1ea7n \u0111\u1ea7u s\u1eed d\u1ee5ng?", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "text", + "name": "link", + "fill": "$orange-primary", + "content": "T\u1ea1o t\u00e0i kho\u1ea3n", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "LoginCard_Staff", + "name": "Organism/LoginCard/Staff", + "reusable": true, + "width": 420, + "fill": "$bg-surface", + "cornerRadius": 20, + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "layout": "vertical", + "gap": 32, + "padding": 40, + "children": [ + { + "type": "frame", + "name": "cardHeader", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "roleBadge", + "fill": "$status-success-bg", + "cornerRadius": 100, + "padding": [ + 6, + 14 + ], + "children": [ + { + "type": "text", + "name": "roleText", + "fill": "$status-success", + "content": "NH\u00c2N VI\u00caN", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 1 + } + ] + }, + { + "type": "text", + "name": "cardTitle", + "fill": "$text-primary", + "content": "\u0110\u0103ng nh\u1eadp h\u1ec7 th\u1ed1ng", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + }, + { + "type": "text", + "name": "cardSubtitle", + "fill": "$text-tertiary", + "content": "D\u00e0nh cho nh\u00e2n vi\u00ean ph\u1ee5c v\u1ee5", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "name": "formSection", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "name": "emailField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "Email ho\u1eb7c s\u1ed1 \u0111i\u1ec7n tho\u1ea1i", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 16 + ], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "inputIcon", + "width": 18, + "height": 18, + "iconFontName": "user", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "name": "placeholder", + "fill": "$text-muted", + "content": "T\u00e0i kho\u1ea3n \u0111\u01b0\u1ee3c c\u1ea5p", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "name": "passwordField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "M\u1eadt kh\u1ea9u", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "inputContent", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "inputIcon", + "width": 18, + "height": 18, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "name": "placeholder", + "fill": "$text-muted", + "content": "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "icon_font", + "name": "toggleIcon", + "width": 18, + "height": 18, + "iconFontName": "eye-off", + "iconFontFamily": "lucide", + "fill": "$text-muted" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "submitButton", + "width": "fill_container", + "height": 48, + "fill": "$status-success", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "btnLabel", + "fill": "$text-primary", + "content": "\u0110\u0103ng nh\u1eadp", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "LoginCard_Admin", + "name": "Organism/LoginCard/Admin", + "reusable": true, + "width": 420, + "fill": "$bg-surface", + "cornerRadius": 20, + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "layout": "vertical", + "gap": 32, + "padding": 40, + "children": [ + { + "type": "frame", + "name": "cardHeader", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "roleBadge", + "fill": "$status-info-bg", + "cornerRadius": 100, + "padding": [ + 6, + 14 + ], + "children": [ + { + "type": "text", + "name": "roleText", + "fill": "$status-info", + "content": "ADMIN", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 1 + } + ] + }, + { + "type": "text", + "name": "cardTitle", + "fill": "$text-primary", + "content": "\u0110\u0103ng nh\u1eadp qu\u1ea3n tr\u1ecb", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + }, + { + "type": "text", + "name": "cardSubtitle", + "fill": "$text-tertiary", + "content": "B\u1ea3ng \u0111i\u1ec1u khi\u1ec3n h\u1ec7 th\u1ed1ng", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "name": "formSection", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "name": "emailField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "Email ho\u1eb7c s\u1ed1 \u0111i\u1ec7n tho\u1ea1i", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 16 + ], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "inputIcon", + "width": 18, + "height": 18, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "name": "placeholder", + "fill": "$text-muted", + "content": "admin@company.com", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "name": "passwordField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "M\u1eadt kh\u1ea9u", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 0, + 16 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "inputContent", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "inputIcon", + "width": 18, + "height": 18, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "name": "placeholder", + "fill": "$text-muted", + "content": "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "icon_font", + "name": "toggleIcon", + "width": 18, + "height": 18, + "iconFontName": "eye-off", + "iconFontFamily": "lucide", + "fill": "$text-muted" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "submitButton", + "width": "fill_container", + "height": 48, + "fill": "$status-info", + "cornerRadius": 10, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "btnIcon", + "width": 18, + "height": 18, + "iconFontName": "shield-check", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "name": "btnLabel", + "fill": "$text-primary", + "content": "\u0110\u0103ng nh\u1eadp b\u1ea3o m\u1eadt", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [ + 6, + 14 + ], + "children": [ + { + "type": "text", + "name": "badgeText", + "fill": "$orange-primary", + "content": "OTP VERIFICATION", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "frame", + "id": "OTPCard_Default", + "name": "Organism/OTPVerify/Default", + "reusable": true, + "width": 420, + "fill": "$bg-surface", + "cornerRadius": 20, + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "layout": "vertical", + "gap": 32, + "padding": 40, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "cardHeader", + "layout": "vertical", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "iconContainer", + "width": 64, + "height": 64, + "fill": "$status-info-bg", + "cornerRadius": 32, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "phoneIcon", + "width": 28, + "height": 28, + "iconFontName": "smartphone", + "iconFontFamily": "lucide", + "fill": "$status-info" + } + ] + }, + { + "type": "text", + "name": "cardTitle", + "fill": "$text-primary", + "content": "X\u00e1c th\u1ef1c OTP", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + }, + { + "type": "text", + "name": "cardSubtitle", + "fill": "$text-tertiary", + "textGrowth": "fixed-width", + "width": 300, + "content": "Nh\u1eadp m\u00e3 6 ch\u1eef s\u1ed1 \u0111\u00e3 g\u1eedi \u0111\u1ebfn s\u1ed1 \u0111i\u1ec7n tho\u1ea1i c\u1ee7a b\u1ea1n", + "lineHeight": 1.5, + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "text", + "id": "OTP_PhoneNumber", + "name": "phoneNumber", + "fill": "$orange-primary", + "content": "+84 912 ***678", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "otpInputs", + "gap": 8, + "children": [ + { + "type": "frame", + "name": "d1", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "d2", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "d3", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "text", + "name": "separator", + "fill": "$text-muted", + "content": "\u2014", + "fontFamily": "Roboto", + "fontSize": 20 + }, + { + "type": "frame", + "name": "d4", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "d5", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "d6", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$border-default" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + } + ] + }, + { + "type": "frame", + "name": "timerRow", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "timerText", + "fill": "$text-tertiary", + "content": "M\u00e3 h\u1ebft h\u1ea1n sau", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "text", + "id": "OTP_Timer", + "name": "timerValue", + "fill": "$orange-primary", + "content": "02:45", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "submitButton", + "width": "fill_container", + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "btnLabel", + "fill": "$text-disabled", + "content": "X\u00e1c nh\u1eadn", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "footerLinks", + "gap": 4, + "children": [ + { + "type": "text", + "name": "text", + "fill": "$text-tertiary", + "content": "Kh\u00f4ng nh\u1eadn \u0111\u01b0\u1ee3c m\u00e3?", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "text", + "name": "link", + "fill": "$orange-primary", + "content": "G\u1eedi l\u1ea1i", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "OTPCard_Filled", + "name": "Organism/OTPVerify/Filled", + "reusable": true, + "width": 420, + "fill": "$bg-surface", + "cornerRadius": 20, + "stroke": { + "thickness": 1, + "fill": "$border-subtle" + }, + "layout": "vertical", + "gap": 32, + "padding": 40, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "cardHeader", + "layout": "vertical", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "iconContainer", + "width": 64, + "height": 64, + "fill": "$status-success-bg", + "cornerRadius": 32, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "checkIcon", + "width": 28, + "height": 28, + "iconFontName": "check-circle", + "iconFontFamily": "lucide", + "fill": "$status-success" + } + ] + }, + { + "type": "text", + "name": "cardTitle", + "fill": "$text-primary", + "content": "X\u00e1c th\u1ef1c OTP", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + }, + { + "type": "text", + "name": "cardSubtitle", + "fill": "$text-tertiary", + "textGrowth": "fixed-width", + "width": 300, + "content": "Nh\u1eadp m\u00e3 6 ch\u1eef s\u1ed1 \u0111\u00e3 g\u1eedi \u0111\u1ebfn s\u1ed1 \u0111i\u1ec7n tho\u1ea1i c\u1ee7a b\u1ea1n", + "lineHeight": 1.5, + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "text", + "name": "phoneNumber", + "fill": "$orange-primary", + "content": "+84 912 ***678", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "otpInputs", + "gap": 8, + "children": [ + { + "type": "frame", + "name": "d1", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$status-success" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "1", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "d2", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$status-success" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "2", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "d3", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$status-success" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "3", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "name": "separator", + "fill": "$status-success", + "content": "\u2014", + "fontFamily": "Roboto", + "fontSize": 20 + }, + { + "type": "frame", + "name": "d4", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$status-success" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "4", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "d5", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$status-success" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "5", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "d6", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { + "thickness": 1, + "fill": "$status-success" + }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "6", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "name": "submitButton", + "width": "fill_container", + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { + "color": "#FF5C00", + "position": 0 + }, + { + "color": "#FF8A4C", + "position": 1 + } + ] + }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "btnLabel", + "fill": "$text-primary", + "content": "X\u00e1c nh\u1eadn", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + }, { "type": "frame", "id": "WocUJ", diff --git a/pencil-design/src/molecules/auth-form-field.pen b/pencil-design/src/molecules/auth-form-field.pen new file mode 100644 index 00000000..22152e3f --- /dev/null +++ b/pencil-design/src/molecules/auth-form-field.pen @@ -0,0 +1,743 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "name": "Auth Form Fields Showcase", + "width": 1440, + "fill": "$bg-page", + "layout": "vertical", + "gap": 80, + "padding": [80, 120], + "children": [ + { + "type": "frame", + "id": "FormFieldSection", + "name": "Form Fields Section", + "width": "fill_container", + "layout": "vertical", + "gap": 48, + "children": [ + { + "type": "frame", + "name": "sectionHeader", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [6, 14], + "children": [ + { + "type": "text", + "name": "badgeText", + "fill": "$orange-primary", + "content": "FORM FIELDS", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "text", + "name": "shTitle", + "fill": "$text-primary", + "content": "Authentication Form Fields", + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 42, + "fontWeight": "normal", + "letterSpacing": -1 + }, + { + "type": "text", + "name": "shDesc", + "fill": "$text-tertiary", + "textGrowth": "fixed-width", + "width": 600, + "content": "Complete form fields with labels, inputs, validation, and helper text.", + "lineHeight": 1.6, + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 16 + } + ] + }, + { + "type": "frame", + "name": "fieldsGrid", + "width": "fill_container", + "layout": "vertical", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "EmailFieldRow", + "name": "Email Fields Row", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 24, + "padding": 40, + "children": [ + { + "type": "text", + "name": "rowLabel", + "fill": "$text-secondary", + "content": "Email Form Field", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "fieldsContainer", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "FormField_Email_Default", + "name": "Molecule/FormField/Email/Default", + "reusable": true, + "width": 360, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "FormField_Email_Label", + "name": "label", + "fill": "$text-secondary", + "content": "Email", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "inputIcon", + "width": 18, + "height": 18, + "iconFontName": "mail", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "id": "FormField_Email_Placeholder", + "name": "placeholder", + "fill": "$text-muted", + "content": "email@example.com", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "id": "FormField_Email_Filled", + "name": "Molecule/FormField/Email/Filled", + "reusable": true, + "width": 360, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "Email", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-focus" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "inputIcon", + "width": 18, + "height": 18, + "iconFontName": "mail", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "name": "value", + "fill": "$text-primary", + "content": "user@goodgo.vn", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "id": "FormField_Email_Error", + "name": "Molecule/FormField/Email/Error", + "reusable": true, + "width": 360, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "Email", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$status-error" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "inputIcon", + "width": 18, + "height": 18, + "iconFontName": "mail", + "iconFontFamily": "lucide", + "fill": "$status-error" + }, + { + "type": "text", + "name": "value", + "fill": "$text-primary", + "content": "invalid-email", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "name": "errorRow", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "errorIcon", + "width": 14, + "height": 14, + "iconFontName": "alert-circle", + "iconFontFamily": "lucide", + "fill": "$status-error" + }, + { + "type": "text", + "id": "FormField_Email_ErrorText", + "name": "errorText", + "fill": "$status-error", + "content": "Định dạng email không hợp lệ", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PhoneFieldRow", + "name": "Phone Fields Row", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 24, + "padding": 40, + "children": [ + { + "type": "text", + "name": "rowLabel", + "fill": "$text-secondary", + "content": "Phone Form Field", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "fieldsContainer", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "FormField_Phone_Default", + "name": "Molecule/FormField/Phone/Default", + "reusable": true, + "width": 360, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "Số điện thoại", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "gap": 0, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "countryCode", + "height": "fill_container", + "fill": "$bg-interactive", + "cornerRadius": [10, 0, 0, 10], + "padding": [0, 12], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "flag", + "content": "🇻🇳", + "fontSize": 16 + }, + { + "type": "text", + "name": "code", + "fill": "$text-secondary", + "content": "+84", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "icon_font", + "name": "chevron", + "width": 14, + "height": 14, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-muted" + } + ] + }, + { + "type": "frame", + "name": "inputField", + "width": "fill_container", + "height": "fill_container", + "padding": [0, 12], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "FormField_Phone_Placeholder", + "name": "placeholder", + "fill": "$text-muted", + "content": "912 345 678", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "FormField_Phone_Filled", + "name": "Molecule/FormField/Phone/Filled", + "reusable": true, + "width": 360, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "Số điện thoại", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-focus" }, + "gap": 0, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "countryCode", + "height": "fill_container", + "fill": "$bg-interactive", + "cornerRadius": [10, 0, 0, 10], + "padding": [0, 12], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "flag", + "content": "🇻🇳", + "fontSize": 16 + }, + { + "type": "text", + "name": "code", + "fill": "$text-secondary", + "content": "+84", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "icon_font", + "name": "chevron", + "width": 14, + "height": 14, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-muted" + } + ] + }, + { + "type": "frame", + "name": "inputField", + "width": "fill_container", + "height": "fill_container", + "padding": [0, 12], + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "value", + "fill": "$text-primary", + "content": "912 345 678", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PasswordFieldRow", + "name": "Password Fields Row", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 24, + "padding": 40, + "children": [ + { + "type": "text", + "name": "rowLabel", + "fill": "$text-secondary", + "content": "Password Form Field with Strength Meter", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "fieldsContainer", + "gap": 32, + "alignItems": "start", + "children": [ + { + "type": "frame", + "id": "FormField_Password_Default", + "name": "Molecule/FormField/Password/Default", + "reusable": true, + "width": 360, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "Mật khẩu", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "inputContent", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "inputIcon", + "width": 18, + "height": 18, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "name": "placeholder", + "fill": "$text-muted", + "content": "Nhập mật khẩu", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "icon_font", + "name": "toggleIcon", + "width": 18, + "height": 18, + "iconFontName": "eye-off", + "iconFontFamily": "lucide", + "fill": "$text-muted" + } + ] + } + ] + }, + { + "type": "frame", + "id": "FormField_Password_WithStrength", + "name": "Molecule/FormField/Password/WithStrength", + "reusable": true, + "width": 360, + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "Mật khẩu mới", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-focus" }, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "inputContent", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "inputIcon", + "width": 18, + "height": 18, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "name": "masked", + "fill": "$text-primary", + "content": "••••••••", + "fontFamily": "Roboto", + "fontSize": 14, + "letterSpacing": 2 + } + ] + }, + { + "type": "icon_font", + "name": "toggleIcon", + "width": 18, + "height": 18, + "iconFontName": "eye-off", + "iconFontFamily": "lucide", + "fill": "$text-muted" + } + ] + }, + { + "type": "frame", + "name": "strengthMeter", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "name": "strengthBars", + "width": "fill_container", + "gap": 4, + "children": [ + { + "type": "frame", + "name": "bar1", + "width": "fill_container", + "height": 4, + "fill": "$status-success", + "cornerRadius": 2 + }, + { + "type": "frame", + "name": "bar2", + "width": "fill_container", + "height": 4, + "fill": "$status-success", + "cornerRadius": 2 + }, + { + "type": "frame", + "name": "bar3", + "width": "fill_container", + "height": 4, + "fill": "$status-success", + "cornerRadius": 2 + }, + { + "type": "frame", + "name": "bar4", + "width": "fill_container", + "height": 4, + "fill": "$bg-interactive", + "cornerRadius": 2 + } + ] + }, + { + "type": "text", + "name": "strengthLabel", + "fill": "$status-success", + "content": "Khá mạnh", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { "type": "color", "value": "#0A0A0B" }, + "bg-surface": { "type": "color", "value": "#111113" }, + "bg-elevated": { "type": "color", "value": "#1A1A1D" }, + "bg-interactive": { "type": "color", "value": "#2A2A2E" }, + "border-default": { "type": "color", "value": "#2A2A2E" }, + "border-subtle": { "type": "color", "value": "#1F1F23" }, + "border-focus": { "type": "color", "value": "#FF5C00" }, + "orange-primary": { "type": "color", "value": "#FF5C00" }, + "text-primary": { "type": "color", "value": "#FFFFFF" }, + "text-secondary": { "type": "color", "value": "#ADADB0" }, + "text-tertiary": { "type": "color", "value": "#8B8B90" }, + "text-muted": { "type": "color", "value": "#6B6B70" }, + "status-error": { "type": "color", "value": "#EF4444" }, + "status-success": { "type": "color", "value": "#22C55E" } + } +} diff --git a/pencil-design/src/molecules/social-login-row.pen b/pencil-design/src/molecules/social-login-row.pen new file mode 100644 index 00000000..47de8d91 --- /dev/null +++ b/pencil-design/src/molecules/social-login-row.pen @@ -0,0 +1,386 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "name": "Social Login Rows Showcase", + "width": 1440, + "fill": "$bg-page", + "layout": "vertical", + "gap": 80, + "padding": [80, 120], + "children": [ + { + "type": "frame", + "id": "SocialRowSection", + "name": "Social Login Section", + "width": "fill_container", + "layout": "vertical", + "gap": 48, + "children": [ + { + "type": "frame", + "name": "sectionHeader", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [6, 14], + "children": [ + { + "type": "text", + "name": "badgeText", + "fill": "$orange-primary", + "content": "SOCIAL LOGIN", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "text", + "name": "shTitle", + "fill": "$text-primary", + "content": "Social Login Rows", + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 42, + "fontWeight": "normal", + "letterSpacing": -1 + }, + { + "type": "text", + "name": "shDesc", + "fill": "$text-tertiary", + "textGrowth": "fixed-width", + "width": 600, + "content": "Social login button groups with dividers for customer authentication.", + "lineHeight": 1.6, + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 16 + } + ] + }, + { + "type": "frame", + "name": "rowsGrid", + "width": "fill_container", + "layout": "vertical", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "SocialRowCard", + "name": "Social Rows Card", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 16, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 40, + "padding": 40, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SocialRow_Full", + "name": "Molecule/SocialLoginRow/Full", + "reusable": true, + "width": 360, + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "name": "dividerRow", + "width": "fill_container", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "line1", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + }, + { + "type": "text", + "name": "orText", + "fill": "$text-muted", + "content": "hoặc", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "name": "line2", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + } + ] + }, + { + "type": "frame", + "name": "socialButtons", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "frame", + "name": "googleBtn", + "width": "fill_container", + "height": 48, + "fill": "#FFFFFF", + "cornerRadius": 10, + "gap": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "googleIcon", + "fill": "#4285F4", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "700" + }, + { + "type": "text", + "name": "btnLabel", + "fill": "#1F1F1F", + "content": "Đăng nhập với Google", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "name": "appleBtn", + "width": "fill_container", + "height": 48, + "fill": "#000000", + "cornerRadius": 10, + "gap": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "appleIcon", + "width": 20, + "height": 20, + "iconFontName": "apple", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + }, + { + "type": "text", + "name": "btnLabel", + "fill": "#FFFFFF", + "content": "Đăng nhập với Apple", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "name": "zaloBtn", + "width": "fill_container", + "height": 48, + "fill": "#0068FF", + "cornerRadius": 10, + "gap": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "zaloIcon", + "fill": "#FFFFFF", + "content": "Z", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "700" + }, + { + "type": "text", + "name": "btnLabel", + "fill": "#FFFFFF", + "content": "Đăng nhập với Zalo", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "SocialRow_Compact", + "name": "Molecule/SocialLoginRow/Compact", + "reusable": true, + "width": 360, + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "name": "dividerRow", + "width": "fill_container", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "line1", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + }, + { + "type": "text", + "name": "orText", + "fill": "$text-muted", + "content": "hoặc tiếp tục với", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "name": "line2", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + } + ] + }, + { + "type": "frame", + "name": "socialIconsRow", + "width": "fill_container", + "justifyContent": "center", + "gap": 16, + "children": [ + { + "type": "frame", + "name": "googleIcon", + "width": 48, + "height": 48, + "fill": "#FFFFFF", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "#4285F4", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "name": "appleIcon", + "width": 48, + "height": 48, + "fill": "#000000", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 22, + "height": 22, + "iconFontName": "apple", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + } + ] + }, + { + "type": "frame", + "name": "zaloIcon", + "width": 48, + "height": 48, + "fill": "#0068FF", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "#FFFFFF", + "content": "Z", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "name": "facebookIcon", + "width": 48, + "height": 48, + "fill": "#1877F2", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 22, + "height": 22, + "iconFontName": "facebook", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { "type": "color", "value": "#0A0A0B" }, + "bg-surface": { "type": "color", "value": "#111113" }, + "border-default": { "type": "color", "value": "#2A2A2E" }, + "border-subtle": { "type": "color", "value": "#1F1F23" }, + "orange-primary": { "type": "color", "value": "#FF5C00" }, + "text-primary": { "type": "color", "value": "#FFFFFF" }, + "text-tertiary": { "type": "color", "value": "#8B8B90" }, + "text-muted": { "type": "color", "value": "#6B6B70" } + } +} diff --git a/pencil-design/src/organisms/auth/login-card.pen b/pencil-design/src/organisms/auth/login-card.pen new file mode 100644 index 00000000..0a8106eb --- /dev/null +++ b/pencil-design/src/organisms/auth/login-card.pen @@ -0,0 +1,1114 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "name": "Login Cards Showcase", + "width": 1440, + "fill": "$bg-page", + "layout": "vertical", + "gap": 80, + "padding": [80, 120], + "children": [ + { + "type": "frame", + "id": "LoginCardSection", + "name": "Login Cards Section", + "width": "fill_container", + "layout": "vertical", + "gap": 48, + "children": [ + { + "type": "frame", + "name": "sectionHeader", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [6, 14], + "children": [ + { + "type": "text", + "name": "badgeText", + "fill": "$orange-primary", + "content": "LOGIN CARDS", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "text", + "name": "shTitle", + "fill": "$text-primary", + "content": "Authentication Login Cards", + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 42, + "fontWeight": "normal", + "letterSpacing": -1 + }, + { + "type": "text", + "name": "shDesc", + "fill": "$text-tertiary", + "textGrowth": "fixed-width", + "width": 700, + "content": "Complete login card organisms for different user roles: Branch, Admin, Cashier, Staff, Kitchen, Delivery, Customer.", + "lineHeight": 1.6, + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 16 + } + ] + }, + { + "type": "frame", + "name": "cardsGrid", + "width": "fill_container", + "gap": 32, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "LoginCard_Standard", + "name": "Organism/LoginCard/Standard", + "reusable": true, + "width": 420, + "fill": "$bg-surface", + "cornerRadius": 20, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 32, + "padding": 40, + "children": [ + { + "type": "frame", + "name": "cardHeader", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "logoContainer", + "width": 48, + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { "color": "#FF5C00", "position": 0 }, + { "color": "#FF8A4C", "position": 1 } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "logoText", + "fill": "$text-primary", + "content": "a", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "id": "LoginCard_Title", + "name": "cardTitle", + "fill": "$text-primary", + "content": "Đăng nhập", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + }, + { + "type": "text", + "id": "LoginCard_Subtitle", + "name": "cardSubtitle", + "fill": "$text-tertiary", + "content": "Chào mừng quay trở lại", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "name": "formSection", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "name": "emailField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "Email hoặc số điện thoại", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "inputIcon", + "width": 18, + "height": 18, + "iconFontName": "user", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "name": "placeholder", + "fill": "$text-muted", + "content": "email@example.com", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "name": "passwordField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "frame", + "name": "labelRow", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "Mật khẩu", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "name": "forgotLink", + "fill": "$orange-primary", + "content": "Quên mật khẩu?", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "inputContent", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "inputIcon", + "width": 18, + "height": 18, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "name": "placeholder", + "fill": "$text-muted", + "content": "••••••••", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "icon_font", + "name": "toggleIcon", + "width": 18, + "height": 18, + "iconFontName": "eye-off", + "iconFontFamily": "lucide", + "fill": "$text-muted" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "submitButton", + "width": "fill_container", + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { "color": "#FF5C00", "position": 0 }, + { "color": "#FF8A4C", "position": 1 } + ] + }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "btnLabel", + "fill": "$text-primary", + "content": "Đăng nhập", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "footerLinks", + "width": "fill_container", + "justifyContent": "center", + "gap": 4, + "children": [ + { + "type": "text", + "name": "text", + "fill": "$text-tertiary", + "content": "Chưa có tài khoản?", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "text", + "name": "link", + "fill": "$orange-primary", + "content": "Đăng ký ngay", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "LoginCard_WithSocial", + "name": "Organism/LoginCard/WithSocial", + "reusable": true, + "width": 420, + "fill": "$bg-surface", + "cornerRadius": 20, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 24, + "padding": 40, + "children": [ + { + "type": "frame", + "name": "cardHeader", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "logoContainer", + "width": 48, + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { "color": "#FF5C00", "position": 0 }, + { "color": "#FF8A4C", "position": 1 } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "logoText", + "fill": "$text-primary", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "name": "cardTitle", + "fill": "$text-primary", + "content": "Đăng nhập", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + }, + { + "type": "text", + "name": "cardSubtitle", + "fill": "$text-tertiary", + "content": "Đặt hàng và tích điểm", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "name": "formSection", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "name": "phoneField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "Số điện thoại", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "gap": 0, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "countryCode", + "height": "fill_container", + "fill": "$bg-interactive", + "cornerRadius": [10, 0, 0, 10], + "padding": [0, 12], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "flag", + "content": "🇻🇳", + "fontSize": 16 + }, + { + "type": "text", + "name": "code", + "fill": "$text-secondary", + "content": "+84", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "name": "inputField", + "width": "fill_container", + "height": "fill_container", + "padding": [0, 12], + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "placeholder", + "fill": "$text-muted", + "content": "Nhập số điện thoại", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "submitButton", + "width": "fill_container", + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { "color": "#FF5C00", "position": 0 }, + { "color": "#FF8A4C", "position": 1 } + ] + }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "btnLabel", + "fill": "$text-primary", + "content": "Gửi mã OTP", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "socialDivider", + "width": "fill_container", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "line1", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + }, + { + "type": "text", + "name": "orText", + "fill": "$text-muted", + "content": "hoặc", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "name": "line2", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + } + ] + }, + { + "type": "frame", + "name": "socialIconsRow", + "width": "fill_container", + "justifyContent": "center", + "gap": 16, + "children": [ + { + "type": "frame", + "name": "googleIcon", + "width": 48, + "height": 48, + "fill": "#FFFFFF", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "#4285F4", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "name": "appleIcon", + "width": 48, + "height": 48, + "fill": "#000000", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 22, + "height": 22, + "iconFontName": "apple", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + } + ] + }, + { + "type": "frame", + "name": "zaloIcon", + "width": 48, + "height": 48, + "fill": "#0068FF", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "#FFFFFF", + "content": "Z", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "name": "footerLinks", + "width": "fill_container", + "justifyContent": "center", + "gap": 4, + "children": [ + { + "type": "text", + "name": "text", + "fill": "$text-tertiary", + "content": "Lần đầu sử dụng?", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "text", + "name": "link", + "fill": "$orange-primary", + "content": "Tạo tài khoản", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "staffCardsRow", + "width": "fill_container", + "gap": 32, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "LoginCard_Staff", + "name": "Organism/LoginCard/Staff", + "reusable": true, + "width": 420, + "fill": "$bg-surface", + "cornerRadius": 20, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 32, + "padding": 40, + "children": [ + { + "type": "frame", + "name": "cardHeader", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "roleBadge", + "fill": "$status-success-bg", + "cornerRadius": 100, + "padding": [6, 14], + "children": [ + { + "type": "text", + "name": "roleText", + "fill": "$status-success", + "content": "NHÂN VIÊN", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 1 + } + ] + }, + { + "type": "text", + "name": "cardTitle", + "fill": "$text-primary", + "content": "Đăng nhập hệ thống", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + }, + { + "type": "text", + "name": "cardSubtitle", + "fill": "$text-tertiary", + "content": "Dành cho nhân viên phục vụ", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "name": "formSection", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "name": "emailField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "Email hoặc số điện thoại", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "inputIcon", + "width": 18, + "height": 18, + "iconFontName": "user", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "name": "placeholder", + "fill": "$text-muted", + "content": "Tài khoản được cấp", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "name": "passwordField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "Mật khẩu", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "inputContent", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "inputIcon", + "width": 18, + "height": 18, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "name": "placeholder", + "fill": "$text-muted", + "content": "••••••••", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "icon_font", + "name": "toggleIcon", + "width": 18, + "height": 18, + "iconFontName": "eye-off", + "iconFontFamily": "lucide", + "fill": "$text-muted" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "submitButton", + "width": "fill_container", + "height": 48, + "fill": "$status-success", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "btnLabel", + "fill": "$text-primary", + "content": "Đăng nhập", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "LoginCard_Admin", + "name": "Organism/LoginCard/Admin", + "reusable": true, + "width": 420, + "fill": "$bg-surface", + "cornerRadius": 20, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 32, + "padding": 40, + "children": [ + { + "type": "frame", + "name": "cardHeader", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "roleBadge", + "fill": "$status-info-bg", + "cornerRadius": 100, + "padding": [6, 14], + "children": [ + { + "type": "text", + "name": "roleText", + "fill": "$status-info", + "content": "ADMIN", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 1 + } + ] + }, + { + "type": "text", + "name": "cardTitle", + "fill": "$text-primary", + "content": "Đăng nhập quản trị", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + }, + { + "type": "text", + "name": "cardSubtitle", + "fill": "$text-tertiary", + "content": "Bảng điều khiển hệ thống", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "name": "formSection", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "name": "emailField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "Email hoặc số điện thoại", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "inputIcon", + "width": 18, + "height": 18, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "name": "placeholder", + "fill": "$text-muted", + "content": "admin@company.com", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "name": "passwordField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "Mật khẩu", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "inputContent", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "inputIcon", + "width": 18, + "height": 18, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "name": "placeholder", + "fill": "$text-muted", + "content": "••••••••", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "icon_font", + "name": "toggleIcon", + "width": 18, + "height": 18, + "iconFontName": "eye-off", + "iconFontFamily": "lucide", + "fill": "$text-muted" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "submitButton", + "width": "fill_container", + "height": 48, + "fill": "$status-info", + "cornerRadius": 10, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "btnIcon", + "width": 18, + "height": 18, + "iconFontName": "shield-check", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "name": "btnLabel", + "fill": "$text-primary", + "content": "Đăng nhập bảo mật", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { "type": "color", "value": "#0A0A0B" }, + "bg-surface": { "type": "color", "value": "#111113" }, + "bg-elevated": { "type": "color", "value": "#1A1A1D" }, + "bg-interactive": { "type": "color", "value": "#2A2A2E" }, + "border-default": { "type": "color", "value": "#2A2A2E" }, + "border-subtle": { "type": "color", "value": "#1F1F23" }, + "orange-primary": { "type": "color", "value": "#FF5C00" }, + "text-primary": { "type": "color", "value": "#FFFFFF" }, + "text-secondary": { "type": "color", "value": "#ADADB0" }, + "text-tertiary": { "type": "color", "value": "#8B8B90" }, + "text-muted": { "type": "color", "value": "#6B6B70" }, + "status-success": { "type": "color", "value": "#22C55E" }, + "status-success-bg": { "type": "color", "value": "#22C55E1A" }, + "status-info": { "type": "color", "value": "#3B82F6" }, + "status-info-bg": { "type": "color", "value": "#3B82F61A" } + } +} diff --git a/pencil-design/src/organisms/auth/otp-verify.pen b/pencil-design/src/organisms/auth/otp-verify.pen new file mode 100644 index 00000000..67db00a0 --- /dev/null +++ b/pencil-design/src/organisms/auth/otp-verify.pen @@ -0,0 +1,542 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "name": "OTP Verify Showcase", + "width": 1440, + "fill": "$bg-page", + "layout": "vertical", + "gap": 80, + "padding": [80, 120], + "children": [ + { + "type": "frame", + "id": "OTPSection", + "name": "OTP Verification Section", + "width": "fill_container", + "layout": "vertical", + "gap": 48, + "children": [ + { + "type": "frame", + "name": "sectionHeader", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "shBadge", + "fill": "#FF5C0018", + "cornerRadius": 100, + "padding": [6, 14], + "children": [ + { + "type": "text", + "name": "badgeText", + "fill": "$orange-primary", + "content": "OTP VERIFICATION", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "500", + "letterSpacing": 2 + } + ] + }, + { + "type": "text", + "name": "shTitle", + "fill": "$text-primary", + "content": "OTP Verification Cards", + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 42, + "fontWeight": "normal", + "letterSpacing": -1 + }, + { + "type": "text", + "name": "shDesc", + "fill": "$text-tertiary", + "textGrowth": "fixed-width", + "width": 600, + "content": "OTP verification screens for phone authentication and password reset.", + "lineHeight": 1.6, + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 16 + } + ] + }, + { + "type": "frame", + "name": "cardsGrid", + "width": "fill_container", + "gap": 32, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "OTPCard_Default", + "name": "Organism/OTPVerify/Default", + "reusable": true, + "width": 420, + "fill": "$bg-surface", + "cornerRadius": 20, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 32, + "padding": 40, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "cardHeader", + "layout": "vertical", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "iconContainer", + "width": 64, + "height": 64, + "fill": "$status-info-bg", + "cornerRadius": 32, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "phoneIcon", + "width": 28, + "height": 28, + "iconFontName": "smartphone", + "iconFontFamily": "lucide", + "fill": "$status-info" + } + ] + }, + { + "type": "text", + "name": "cardTitle", + "fill": "$text-primary", + "content": "Xác thực OTP", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + }, + { + "type": "text", + "name": "cardSubtitle", + "fill": "$text-tertiary", + "textGrowth": "fixed-width", + "width": 300, + "content": "Nhập mã 6 chữ số đã gửi đến số điện thoại của bạn", + "lineHeight": 1.5, + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "text", + "id": "OTP_PhoneNumber", + "name": "phoneNumber", + "fill": "$orange-primary", + "content": "+84 912 ***678", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "otpInputs", + "gap": 8, + "children": [ + { + "type": "frame", + "name": "d1", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "d2", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "d3", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "text", + "name": "separator", + "fill": "$text-muted", + "content": "—", + "fontFamily": "Roboto", + "fontSize": 20 + }, + { + "type": "frame", + "name": "d4", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "d5", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + }, + { + "type": "frame", + "name": "d6", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [] + } + ] + }, + { + "type": "frame", + "name": "timerRow", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "timerText", + "fill": "$text-tertiary", + "content": "Mã hết hạn sau", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "text", + "id": "OTP_Timer", + "name": "timerValue", + "fill": "$orange-primary", + "content": "02:45", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "submitButton", + "width": "fill_container", + "height": 48, + "fill": "$bg-interactive", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "btnLabel", + "fill": "$text-disabled", + "content": "Xác nhận", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "footerLinks", + "gap": 4, + "children": [ + { + "type": "text", + "name": "text", + "fill": "$text-tertiary", + "content": "Không nhận được mã?", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "text", + "name": "link", + "fill": "$orange-primary", + "content": "Gửi lại", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "OTPCard_Filled", + "name": "Organism/OTPVerify/Filled", + "reusable": true, + "width": 420, + "fill": "$bg-surface", + "cornerRadius": 20, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 32, + "padding": 40, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "cardHeader", + "layout": "vertical", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "iconContainer", + "width": 64, + "height": 64, + "fill": "$status-success-bg", + "cornerRadius": 32, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "name": "checkIcon", + "width": 28, + "height": 28, + "iconFontName": "check-circle", + "iconFontFamily": "lucide", + "fill": "$status-success" + } + ] + }, + { + "type": "text", + "name": "cardTitle", + "fill": "$text-primary", + "content": "Xác thực OTP", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + }, + { + "type": "text", + "name": "cardSubtitle", + "fill": "$text-tertiary", + "textGrowth": "fixed-width", + "width": 300, + "content": "Nhập mã 6 chữ số đã gửi đến số điện thoại của bạn", + "lineHeight": 1.5, + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "text", + "name": "phoneNumber", + "fill": "$orange-primary", + "content": "+84 912 ***678", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "otpInputs", + "gap": 8, + "children": [ + { + "type": "frame", + "name": "d1", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$status-success" }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } + ] + }, + { + "type": "frame", + "name": "d2", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$status-success" }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } + ] + }, + { + "type": "frame", + "name": "d3", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$status-success" }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } + ] + }, + { + "type": "text", + "name": "separator", + "fill": "$status-success", + "content": "—", + "fontFamily": "Roboto", + "fontSize": 20 + }, + { + "type": "frame", + "name": "d4", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$status-success" }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } + ] + }, + { + "type": "frame", + "name": "d5", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$status-success" }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } + ] + }, + { + "type": "frame", + "name": "d6", + "width": 48, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$status-success" }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } + ] + } + ] + }, + { + "type": "frame", + "name": "submitButton", + "width": "fill_container", + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { "color": "#FF5C00", "position": 0 }, + { "color": "#FF8A4C", "position": 1 } + ] + }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "btnLabel", + "fill": "$text-primary", + "content": "Xác nhận", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { "type": "color", "value": "#0A0A0B" }, + "bg-surface": { "type": "color", "value": "#111113" }, + "bg-elevated": { "type": "color", "value": "#1A1A1D" }, + "bg-interactive": { "type": "color", "value": "#2A2A2E" }, + "border-default": { "type": "color", "value": "#2A2A2E" }, + "border-subtle": { "type": "color", "value": "#1F1F23" }, + "orange-primary": { "type": "color", "value": "#FF5C00" }, + "text-primary": { "type": "color", "value": "#FFFFFF" }, + "text-tertiary": { "type": "color", "value": "#8B8B90" }, + "text-muted": { "type": "color", "value": "#6B6B70" }, + "text-disabled": { "type": "color", "value": "#4B4B50" }, + "status-success": { "type": "color", "value": "#22C55E" }, + "status-success-bg": { "type": "color", "value": "#22C55E1A" }, + "status-info": { "type": "color", "value": "#3B82F6" }, + "status-info-bg": { "type": "color", "value": "#3B82F61A" } + } +} diff --git a/pencil-design/src/pages/auth/forgot-password/desktop.pen b/pencil-design/src/pages/auth/forgot-password/desktop.pen new file mode 100644 index 00000000..ee3aabbf --- /dev/null +++ b/pencil-design/src/pages/auth/forgot-password/desktop.pen @@ -0,0 +1,372 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "ForgotPasswordPage", + "name": "Forgot Password Page - Desktop", + "width": 1440, + "height": 900, + "fill": "$bg-page", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "forgotCard", + "width": 440, + "fill": "$bg-surface", + "cornerRadius": 24, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 32, + "padding": 48, + "children": [ + { + "type": "frame", + "name": "backLink", + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 16, + "height": 16, + "iconFontName": "arrow-left", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "fill": "$text-tertiary", + "content": "Quay lại đăng nhập", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "name": "cardHeader", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "iconContainer", + "width": 64, + "height": 64, + "fill": "$status-warning-bg", + "cornerRadius": 32, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 28, + "height": 28, + "iconFontName": "key", + "iconFontFamily": "lucide", + "fill": "$status-warning" + } + ] + }, + { + "type": "text", + "fill": "$text-primary", + "content": "Quên mật khẩu?", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + }, + { + "type": "text", + "fill": "$text-tertiary", + "textGrowth": "fixed-width", + "width": 320, + "content": "Nhập email hoặc số điện thoại để nhận đường dẫn đặt lại mật khẩu.", + "lineHeight": 1.5, + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "name": "formSection", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "name": "emailField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "fill": "$text-secondary", + "content": "Email hoặc số điện thoại", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 18, + "height": 18, + "iconFontName": "mail", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "fill": "$text-muted", + "content": "Nhập email hoặc số điện thoại", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "submitButton", + "width": "fill_container", + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { "color": "#FF5C00", "position": 0 }, + { "color": "#FF8A4C", "position": 1 } + ] + }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "Gửi yêu cầu", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "ResetSentPage", + "name": "Reset Sent Confirmation - Desktop", + "width": 1440, + "height": 900, + "fill": "$bg-page", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "confirmCard", + "width": 440, + "fill": "$bg-surface", + "cornerRadius": 24, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 32, + "padding": 48, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "successIcon", + "width": 80, + "height": 80, + "fill": "$status-success-bg", + "cornerRadius": 40, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 36, + "height": 36, + "iconFontName": "mail-check", + "iconFontFamily": "lucide", + "fill": "$status-success" + } + ] + }, + { + "type": "frame", + "name": "textContent", + "layout": "vertical", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "Kiểm tra hộp thư", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + }, + { + "type": "text", + "fill": "$text-tertiary", + "textGrowth": "fixed-width", + "width": 320, + "content": "Chúng tôi đã gửi đường dẫn đặt lại mật khẩu đến:", + "lineHeight": 1.5, + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "text", + "fill": "$orange-primary", + "content": "user@example.com", + "fontFamily": "Roboto", + "fontSize": 16, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "actions", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "children": [ + { + "type": "frame", + "name": "openEmailBtn", + "width": "fill_container", + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { "color": "#FF5C00", "position": 0 }, + { "color": "#FF8A4C", "position": 1 } + ] + }, + "cornerRadius": 10, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 18, + "height": 18, + "iconFontName": "external-link", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "fill": "$text-primary", + "content": "Mở ứng dụng email", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "resendBtn", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-secondary", + "content": "Gửi lại email", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "name": "helpText", + "layout": "vertical", + "gap": 4, + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-muted", + "content": "Không nhận được email?", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "fill": "$text-muted", + "content": "Kiểm tra thư mục spam hoặc liên hệ hỗ trợ", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { "type": "color", "value": "#0A0A0B" }, + "bg-surface": { "type": "color", "value": "#111113" }, + "bg-elevated": { "type": "color", "value": "#1A1A1D" }, + "border-default": { "type": "color", "value": "#2A2A2E" }, + "border-subtle": { "type": "color", "value": "#1F1F23" }, + "orange-primary": { "type": "color", "value": "#FF5C00" }, + "text-primary": { "type": "color", "value": "#FFFFFF" }, + "text-secondary": { "type": "color", "value": "#ADADB0" }, + "text-tertiary": { "type": "color", "value": "#8B8B90" }, + "text-muted": { "type": "color", "value": "#6B6B70" }, + "status-success": { "type": "color", "value": "#22C55E" }, + "status-success-bg": { "type": "color", "value": "#22C55E1A" }, + "status-warning": { "type": "color", "value": "#F59E0B" }, + "status-warning-bg": { "type": "color", "value": "#F59E0B1A" } + } +} diff --git a/pencil-design/src/pages/auth/forgot-password/mobile.pen b/pencil-design/src/pages/auth/forgot-password/mobile.pen new file mode 100644 index 00000000..419c2037 --- /dev/null +++ b/pencil-design/src/pages/auth/forgot-password/mobile.pen @@ -0,0 +1,112 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "ForgotPasswordMobile", + "name": "Forgot Password - Mobile", + "width": 390, + "height": 844, + "fill": "#0A0A0B", + "layout": "vertical", + "children": [ + { + "type": "frame", + "width": "fill_container", + "padding": [16, 24], + "children": [ + { + "type": "frame", + "gap": 6, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "#8B8B90" }, + { "type": "text", "fill": "#8B8B90", "content": "Quay lại", "fontFamily": "Roboto", "fontSize": 14 } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "justifyContent": "center", + "padding": 24, + "gap": 28, + "children": [ + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 72, + "height": 72, + "fill": "#F59E0B1A", + "cornerRadius": 36, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 32, "height": 32, "iconFontName": "key", "iconFontFamily": "lucide", "fill": "#F59E0B" } + ] + }, + { "type": "text", "fill": "#FFFFFF", "content": "Quên mật khẩu?", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }, + { + "type": "text", + "fill": "#8B8B90", + "textGrowth": "fixed-width", + "width": 300, + "content": "Nhập email hoặc số điện thoại để nhận đường dẫn đặt lại mật khẩu.", + "lineHeight": 1.5, + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { "type": "text", "fill": "#ADADB0", "content": "Email hoặc số điện thoại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, + { + "type": "frame", + "width": "fill_container", + "height": 52, + "fill": "#1A1A1D", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "#2A2A2E" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 20, "height": 20, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "#6B6B70" }, + { "type": "text", "fill": "#6B6B70", "content": "Nhập email hoặc số điện thoại", "fontFamily": "Roboto", "fontSize": 15 } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": 52, + "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#FFFFFF", "content": "Gửi yêu cầu", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600" } + ] + } + ] + } + ] + } + ] +} diff --git a/pencil-design/src/pages/auth/forgot-password/tablet.pen b/pencil-design/src/pages/auth/forgot-password/tablet.pen new file mode 100644 index 00000000..077fb134 --- /dev/null +++ b/pencil-design/src/pages/auth/forgot-password/tablet.pen @@ -0,0 +1,107 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "ForgotPasswordTablet", + "name": "Forgot Password - Tablet", + "width": 1024, + "height": 768, + "fill": "#0A0A0B", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 440, + "fill": "#111113", + "cornerRadius": 24, + "stroke": { "thickness": 1, "fill": "#1F1F23" }, + "layout": "vertical", + "gap": 28, + "padding": 44, + "children": [ + { + "type": "frame", + "gap": 6, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 16, "height": 16, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "#8B8B90" }, + { "type": "text", "fill": "#8B8B90", "content": "Quay lại đăng nhập", "fontFamily": "Roboto", "fontSize": 13 } + ] + }, + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 64, + "height": 64, + "fill": "#F59E0B1A", + "cornerRadius": 32, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 28, "height": 28, "iconFontName": "key", "iconFontFamily": "lucide", "fill": "#F59E0B" } + ] + }, + { "type": "text", "fill": "#FFFFFF", "content": "Quên mật khẩu?", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }, + { + "type": "text", + "fill": "#8B8B90", + "textGrowth": "fixed-width", + "width": 320, + "content": "Nhập email hoặc số điện thoại để nhận đường dẫn đặt lại mật khẩu.", + "lineHeight": 1.5, + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { "type": "text", "fill": "#ADADB0", "content": "Email hoặc số điện thoại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, + { + "type": "frame", + "width": "fill_container", + "height": 50, + "fill": "#1A1A1D", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "#2A2A2E" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "#6B6B70" }, + { "type": "text", "fill": "#6B6B70", "content": "Nhập email hoặc số điện thoại", "fontFamily": "Roboto", "fontSize": 14 } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": 50, + "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#FFFFFF", "content": "Gửi yêu cầu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600" } + ] + } + ] + } + ] + } + ] +} diff --git a/pencil-design/src/pages/auth/login/admin-desktop.pen b/pencil-design/src/pages/auth/login/admin-desktop.pen new file mode 100644 index 00000000..60ac7316 --- /dev/null +++ b/pencil-design/src/pages/auth/login/admin-desktop.pen @@ -0,0 +1,306 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "AdminLoginPage", + "name": "Admin Login Page - Desktop", + "width": 1440, + "height": 900, + "fill": "$bg-page", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "loginCard", + "width": 440, + "fill": "$bg-surface", + "cornerRadius": 24, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 32, + "padding": 48, + "children": [ + { + "type": "frame", + "name": "cardHeader", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "logoContainer", + "width": 64, + "height": 64, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { "color": "#3B82F6", "position": 0 }, + { "color": "#60A5FA", "position": 1 } + ] + }, + "cornerRadius": 16, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 28, + "height": 28, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-primary" + } + ] + }, + { + "type": "frame", + "name": "roleBadge", + "fill": "$status-info-bg", + "cornerRadius": 100, + "padding": [6, 16], + "children": [ + { + "type": "text", + "fill": "$status-info", + "content": "QUẢN TRỊ HỆ THỐNG", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 1 + } + ] + }, + { + "type": "text", + "fill": "$text-primary", + "content": "Đăng nhập Admin", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + }, + { + "type": "text", + "fill": "$text-tertiary", + "content": "Bảng điều khiển quản trị viên", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "name": "securityNotice", + "width": "fill_container", + "fill": "$status-warning-bg", + "cornerRadius": 8, + "padding": 12, + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 16, + "height": 16, + "iconFontName": "shield-alert", + "iconFontFamily": "lucide", + "fill": "$status-warning" + }, + { + "type": "text", + "fill": "$status-warning", + "content": "Khu vực bảo mật cao - Chỉ dành cho quản trị viên", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "name": "formSection", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "name": "emailField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "fill": "$text-secondary", + "content": "Email quản trị viên", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 18, + "height": 18, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "fill": "$text-muted", + "content": "admin@company.com", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "name": "passwordField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "fill": "$text-secondary", + "content": "Mật khẩu", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 18, + "height": 18, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "fill": "$text-muted", + "content": "••••••••••••", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "icon_font", + "width": 18, + "height": 18, + "iconFontName": "eye-off", + "iconFontFamily": "lucide", + "fill": "$text-muted" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "submitButton", + "width": "fill_container", + "height": 48, + "fill": "$status-info", + "cornerRadius": 10, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 18, + "height": 18, + "iconFontName": "shield-check", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "fill": "$text-primary", + "content": "Đăng nhập bảo mật", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "footer", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-muted", + "content": "Phiên làm việc sẽ tự động kết thúc sau 30 phút không hoạt động", + "fontFamily": "Roboto", + "fontSize": 11 + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { "type": "color", "value": "#0A0A0B" }, + "bg-surface": { "type": "color", "value": "#111113" }, + "bg-elevated": { "type": "color", "value": "#1A1A1D" }, + "border-default": { "type": "color", "value": "#2A2A2E" }, + "border-subtle": { "type": "color", "value": "#1F1F23" }, + "text-primary": { "type": "color", "value": "#FFFFFF" }, + "text-secondary": { "type": "color", "value": "#ADADB0" }, + "text-tertiary": { "type": "color", "value": "#8B8B90" }, + "text-muted": { "type": "color", "value": "#6B6B70" }, + "status-info": { "type": "color", "value": "#3B82F6" }, + "status-info-bg": { "type": "color", "value": "#3B82F61A" }, + "status-warning": { "type": "color", "value": "#F59E0B" }, + "status-warning-bg": { "type": "color", "value": "#F59E0B1A" } + } +} diff --git a/pencil-design/src/pages/auth/login/admin-mobile.pen b/pencil-design/src/pages/auth/login/admin-mobile.pen new file mode 100644 index 00000000..ed6d9f3e --- /dev/null +++ b/pencil-design/src/pages/auth/login/admin-mobile.pen @@ -0,0 +1,149 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "AdminLoginMobile", + "name": "Admin Login - Mobile", + "width": 390, + "height": 844, + "fill": "#0A0A0B", + "layout": "vertical", + "children": [ + { + "type": "frame", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "justifyContent": "center", + "padding": 24, + "gap": 28, + "children": [ + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 64, + "height": 64, + "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#3B82F6", "position": 0 }, { "color": "#60A5FA", "position": 1 }] }, + "cornerRadius": 16, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 28, "height": 28, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "#FFFFFF" } + ] + }, + { + "type": "frame", + "fill": "#3B82F61A", + "cornerRadius": 100, + "padding": [8, 16], + "children": [ + { "type": "text", "fill": "#3B82F6", "content": "QUẢN TRỊ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1 } + ] + }, + { "type": "text", "fill": "#FFFFFF", "content": "Đăng nhập Admin", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } + ] + }, + { + "type": "frame", + "width": "fill_container", + "fill": "#F59E0B1A", + "cornerRadius": 10, + "padding": 14, + "gap": 10, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "shield-alert", "iconFontFamily": "lucide", "fill": "#F59E0B" }, + { "type": "text", "fill": "#F59E0B", "content": "Khu vực bảo mật cao", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500" } + ] + }, + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { "type": "text", "fill": "#ADADB0", "content": "Email quản trị viên", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, + { + "type": "frame", + "width": "fill_container", + "height": 52, + "fill": "#1A1A1D", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "#2A2A2E" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "#6B6B70" }, + { "type": "text", "fill": "#6B6B70", "content": "admin@company.com", "fontFamily": "Roboto", "fontSize": 15 } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { "type": "text", "fill": "#ADADB0", "content": "Mật khẩu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, + { + "type": "frame", + "width": "fill_container", + "height": 52, + "fill": "#1A1A1D", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "#2A2A2E" }, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "gap": 10, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 20, "height": 20, "iconFontName": "lock", "iconFontFamily": "lucide", "fill": "#6B6B70" }, + { "type": "text", "fill": "#6B6B70", "content": "••••••••••••", "fontFamily": "Roboto", "fontSize": 15 } + ] + }, + { "type": "icon_font", "width": 20, "height": 20, "iconFontName": "eye-off", "iconFontFamily": "lucide", "fill": "#6B6B70" } + ] + } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": 52, + "fill": "#3B82F6", + "cornerRadius": 12, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 20, "height": 20, "iconFontName": "shield-check", "iconFontFamily": "lucide", "fill": "#FFFFFF" }, + { "type": "text", "fill": "#FFFFFF", "content": "Đăng nhập bảo mật", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600" } + ] + } + ] + } + ] + } + ] +} diff --git a/pencil-design/src/pages/auth/login/admin-tablet.pen b/pencil-design/src/pages/auth/login/admin-tablet.pen new file mode 100644 index 00000000..3eace6e8 --- /dev/null +++ b/pencil-design/src/pages/auth/login/admin-tablet.pen @@ -0,0 +1,151 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "AdminLoginTablet", + "name": "Admin Login - Tablet", + "width": 1024, + "height": 768, + "fill": "#0A0A0B", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 460, + "fill": "#111113", + "cornerRadius": 24, + "stroke": { "thickness": 1, "fill": "#1F1F23" }, + "layout": "vertical", + "gap": 28, + "padding": 44, + "children": [ + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 56, + "height": 56, + "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#3B82F6", "position": 0 }, { "color": "#60A5FA", "position": 1 }] }, + "cornerRadius": 14, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 26, "height": 26, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "#FFFFFF" } + ] + }, + { + "type": "frame", + "fill": "#3B82F61A", + "cornerRadius": 100, + "padding": [6, 16], + "children": [ + { "type": "text", "fill": "#3B82F6", "content": "QUẢN TRỊ HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1 } + ] + }, + { "type": "text", "fill": "#FFFFFF", "content": "Đăng nhập Admin", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } + ] + }, + { + "type": "frame", + "width": "fill_container", + "fill": "#F59E0B1A", + "cornerRadius": 8, + "padding": 12, + "gap": 10, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 16, "height": 16, "iconFontName": "shield-alert", "iconFontFamily": "lucide", "fill": "#F59E0B" }, + { "type": "text", "fill": "#F59E0B", "content": "Khu vực bảo mật cao", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500" } + ] + }, + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { "type": "text", "fill": "#ADADB0", "content": "Email quản trị viên", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, + { + "type": "frame", + "width": "fill_container", + "height": 50, + "fill": "#1A1A1D", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "#2A2A2E" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "#6B6B70" }, + { "type": "text", "fill": "#6B6B70", "content": "admin@company.com", "fontFamily": "Roboto", "fontSize": 14 } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { "type": "text", "fill": "#ADADB0", "content": "Mật khẩu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, + { + "type": "frame", + "width": "fill_container", + "height": 50, + "fill": "#1A1A1D", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "#2A2A2E" }, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "gap": 10, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "lock", "iconFontFamily": "lucide", "fill": "#6B6B70" }, + { "type": "text", "fill": "#6B6B70", "content": "••••••••••••", "fontFamily": "Roboto", "fontSize": 14 } + ] + }, + { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "eye-off", "iconFontFamily": "lucide", "fill": "#6B6B70" } + ] + } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": 50, + "fill": "#3B82F6", + "cornerRadius": 10, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "shield-check", "iconFontFamily": "lucide", "fill": "#FFFFFF" }, + { "type": "text", "fill": "#FFFFFF", "content": "Đăng nhập bảo mật", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600" } + ] + } + ] + } + ] + } + ] +} diff --git a/pencil-design/src/pages/auth/login/branch-desktop.pen b/pencil-design/src/pages/auth/login/branch-desktop.pen new file mode 100644 index 00000000..5287be46 --- /dev/null +++ b/pencil-design/src/pages/auth/login/branch-desktop.pen @@ -0,0 +1,413 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "BranchLoginPage", + "name": "Branch Login Page - Desktop", + "width": 1440, + "height": 900, + "fill": "$bg-page", + "layout": "horizontal", + "children": [ + { + "type": "frame", + "name": "brandPanel", + "width": 640, + "height": "fill_container", + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 180, + "colors": [ + { "color": "#FF5C00", "position": 0 }, + { "color": "#FF8A4C", "position": 0.5 }, + { "color": "#FFB347", "position": 1 } + ] + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "padding": 80, + "children": [ + { + "type": "frame", + "name": "brandContent", + "layout": "vertical", + "gap": 32, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "logoContainer", + "width": 100, + "height": 100, + "fill": "#FFFFFF20", + "cornerRadius": 24, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "a", + "fontFamily": "Roboto", + "fontSize": 56, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "name": "textContent", + "layout": "vertical", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "aPOS Branch Portal", + "fontFamily": "Roboto", + "fontSize": 32, + "fontWeight": "700" + }, + { + "type": "text", + "fill": "#FFFFFFCC", + "textGrowth": "fixed-width", + "width": 380, + "content": "Quản lý chi nhánh chuyên nghiệp, báo cáo thời gian thực, kiểm soát vận hành hiệu quả.", + "lineHeight": 1.6, + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 16 + } + ] + }, + { + "type": "frame", + "name": "stats", + "gap": 40, + "padding": [24, 0, 0, 0], + "children": [ + { + "type": "frame", + "layout": "vertical", + "alignItems": "center", + "gap": 4, + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "1,200+", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "700" + }, + { + "type": "text", + "fill": "#FFFFFFAA", + "content": "Chi nhánh", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "layout": "vertical", + "alignItems": "center", + "gap": 4, + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "50K+", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "700" + }, + { + "type": "text", + "fill": "#FFFFFFAA", + "content": "Đơn/ngày", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "layout": "vertical", + "alignItems": "center", + "gap": 4, + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "99.9%", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "700" + }, + { + "type": "text", + "fill": "#FFFFFFAA", + "content": "Uptime", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "authPanel", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-surface", + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "padding": 60, + "children": [ + { + "type": "frame", + "name": "loginCard", + "width": 400, + "layout": "vertical", + "gap": 32, + "children": [ + { + "type": "frame", + "name": "cardHeader", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "Đăng nhập Chi nhánh", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "600" + }, + { + "type": "text", + "fill": "$text-tertiary", + "content": "Quản lý và theo dõi chi nhánh của bạn", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "name": "formSection", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "name": "emailField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "fill": "$text-secondary", + "content": "Email hoặc số điện thoại", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 18, + "height": 18, + "iconFontName": "building-2", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "fill": "$text-muted", + "content": "branch@company.com", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "name": "passwordField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "frame", + "name": "labelRow", + "width": "fill_container", + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-secondary", + "content": "Mật khẩu", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "fill": "$orange-primary", + "content": "Quên mật khẩu?", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 18, + "height": 18, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "fill": "$text-muted", + "content": "••••••••", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "icon_font", + "width": 18, + "height": 18, + "iconFontName": "eye-off", + "iconFontFamily": "lucide", + "fill": "$text-muted" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "submitButton", + "width": "fill_container", + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { "color": "#FF5C00", "position": 0 }, + { "color": "#FF8A4C", "position": 1 } + ] + }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "Đăng nhập", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "footerLinks", + "width": "fill_container", + "justifyContent": "center", + "gap": 4, + "children": [ + { + "type": "text", + "fill": "$text-tertiary", + "content": "Chưa có tài khoản chi nhánh?", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "text", + "fill": "$orange-primary", + "content": "Liên hệ", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { "type": "color", "value": "#0A0A0B" }, + "bg-surface": { "type": "color", "value": "#111113" }, + "bg-elevated": { "type": "color", "value": "#1A1A1D" }, + "border-default": { "type": "color", "value": "#2A2A2E" }, + "orange-primary": { "type": "color", "value": "#FF5C00" }, + "text-primary": { "type": "color", "value": "#FFFFFF" }, + "text-secondary": { "type": "color", "value": "#ADADB0" }, + "text-tertiary": { "type": "color", "value": "#8B8B90" }, + "text-muted": { "type": "color", "value": "#6B6B70" } + } +} diff --git a/pencil-design/src/pages/auth/login/branch-mobile.pen b/pencil-design/src/pages/auth/login/branch-mobile.pen new file mode 100644 index 00000000..ee080a50 --- /dev/null +++ b/pencil-design/src/pages/auth/login/branch-mobile.pen @@ -0,0 +1,160 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "BranchLoginMobile", + "name": "Branch Login - Mobile", + "width": 390, + "height": 844, + "fill": "#0A0A0B", + "layout": "vertical", + "children": [ + { + "type": "frame", + "width": "fill_container", + "padding": [16, 24], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 40, + "height": 40, + "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#FFFFFF", "content": "a", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700" } + ] + }, + { "type": "text", "fill": "#FFFFFF", "content": "aPOS Branch", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700" } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "justifyContent": "center", + "padding": 24, + "gap": 28, + "children": [ + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { "type": "text", "fill": "#FFFFFF", "content": "Đăng nhập Chi nhánh", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }, + { "type": "text", "fill": "#8B8B90", "content": "Quản lý và theo dõi chi nhánh của bạn", "fontFamily": "Roboto", "fontSize": 14 } + ] + }, + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { "type": "text", "fill": "#ADADB0", "content": "Email hoặc số điện thoại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, + { + "type": "frame", + "width": "fill_container", + "height": 52, + "fill": "#1A1A1D", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "#2A2A2E" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 20, "height": 20, "iconFontName": "building-2", "iconFontFamily": "lucide", "fill": "#6B6B70" }, + { "type": "text", "fill": "#6B6B70", "content": "branch@company.com", "fontFamily": "Roboto", "fontSize": 15 } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "frame", + "width": "fill_container", + "justifyContent": "space_between", + "children": [ + { "type": "text", "fill": "#ADADB0", "content": "Mật khẩu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, + { "type": "text", "fill": "#FF5C00", "content": "Quên mật khẩu?", "fontFamily": "Roboto", "fontSize": 13 } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": 52, + "fill": "#1A1A1D", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "#2A2A2E" }, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "gap": 10, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 20, "height": 20, "iconFontName": "lock", "iconFontFamily": "lucide", "fill": "#6B6B70" }, + { "type": "text", "fill": "#6B6B70", "content": "••••••••", "fontFamily": "Roboto", "fontSize": 15 } + ] + }, + { "type": "icon_font", "width": 20, "height": 20, "iconFontName": "eye-off", "iconFontFamily": "lucide", "fill": "#6B6B70" } + ] + } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": 52, + "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#FFFFFF", "content": "Đăng nhập", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600" } + ] + }, + { + "type": "frame", + "width": "fill_container", + "justifyContent": "center", + "gap": 4, + "children": [ + { "type": "text", "fill": "#8B8B90", "content": "Chưa có tài khoản?", "fontFamily": "Roboto", "fontSize": 14 }, + { "type": "text", "fill": "#FF5C00", "content": "Liên hệ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" } + ] + } + ] + } + ] + } + ] +} diff --git a/pencil-design/src/pages/auth/login/branch-tablet.pen b/pencil-design/src/pages/auth/login/branch-tablet.pen new file mode 100644 index 00000000..b0d8d2ee --- /dev/null +++ b/pencil-design/src/pages/auth/login/branch-tablet.pen @@ -0,0 +1,146 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "BranchLoginTablet", + "name": "Branch Login - Tablet", + "width": 1024, + "height": 768, + "fill": "#0A0A0B", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 480, + "fill": "#111113", + "cornerRadius": 24, + "stroke": { "thickness": 1, "fill": "#1F1F23" }, + "layout": "vertical", + "gap": 28, + "padding": 44, + "children": [ + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 56, + "height": 56, + "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, + "cornerRadius": 14, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#FFFFFF", "content": "a", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700" } + ] + }, + { "type": "text", "fill": "#FFFFFF", "content": "aPOS Branch Portal", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }, + { "type": "text", "fill": "#8B8B90", "content": "Quản lý và theo dõi chi nhánh", "fontFamily": "Roboto", "fontSize": 14 } + ] + }, + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { "type": "text", "fill": "#ADADB0", "content": "Email hoặc số điện thoại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, + { + "type": "frame", + "width": "fill_container", + "height": 50, + "fill": "#1A1A1D", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "#2A2A2E" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "building-2", "iconFontFamily": "lucide", "fill": "#6B6B70" }, + { "type": "text", "fill": "#6B6B70", "content": "branch@company.com", "fontFamily": "Roboto", "fontSize": 14 } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "frame", + "width": "fill_container", + "justifyContent": "space_between", + "children": [ + { "type": "text", "fill": "#ADADB0", "content": "Mật khẩu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, + { "type": "text", "fill": "#FF5C00", "content": "Quên mật khẩu?", "fontFamily": "Roboto", "fontSize": 13 } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": 50, + "fill": "#1A1A1D", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "#2A2A2E" }, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "gap": 10, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "lock", "iconFontFamily": "lucide", "fill": "#6B6B70" }, + { "type": "text", "fill": "#6B6B70", "content": "••••••••", "fontFamily": "Roboto", "fontSize": 14 } + ] + }, + { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "eye-off", "iconFontFamily": "lucide", "fill": "#6B6B70" } + ] + } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": 50, + "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#FFFFFF", "content": "Đăng nhập", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600" } + ] + }, + { + "type": "frame", + "width": "fill_container", + "justifyContent": "center", + "gap": 4, + "children": [ + { "type": "text", "fill": "#8B8B90", "content": "Chưa có tài khoản?", "fontFamily": "Roboto", "fontSize": 14 }, + { "type": "text", "fill": "#FF5C00", "content": "Liên hệ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" } + ] + } + ] + } + ] + } + ] +} diff --git a/pencil-design/src/pages/auth/login/customer-desktop.pen b/pencil-design/src/pages/auth/login/customer-desktop.pen new file mode 100644 index 00000000..e88720a2 --- /dev/null +++ b/pencil-design/src/pages/auth/login/customer-desktop.pen @@ -0,0 +1,532 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "CustomerLoginPage", + "name": "Customer Login Page - Desktop", + "width": 1440, + "height": 900, + "fill": "$bg-page", + "layout": "horizontal", + "children": [ + { + "type": "frame", + "name": "brandPanel", + "width": 800, + "height": "fill_container", + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { "color": "#0A0A0B", "position": 0 }, + { "color": "#1A1A1D", "position": 0.5 }, + { "color": "#0A0A0B", "position": 1 } + ] + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "padding": 80, + "children": [ + { + "type": "frame", + "name": "brandContent", + "layout": "vertical", + "gap": 40, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "logoContainer", + "width": 80, + "height": 80, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { "color": "#FF5C00", "position": 0 }, + { "color": "#FF8A4C", "position": 1 } + ] + }, + "cornerRadius": 20, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "logoText", + "fill": "$text-primary", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 40, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "name": "textContent", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "brandName", + "fill": "$text-primary", + "content": "GoodGo", + "fontFamily": "Roboto", + "fontSize": 48, + "fontWeight": "700", + "letterSpacing": -1 + }, + { + "type": "text", + "name": "tagline", + "fill": "$text-tertiary", + "textGrowth": "fixed-width", + "width": 400, + "content": "Đặt hàng dễ dàng, tích điểm nhanh chóng, nhận ưu đãi hấp dẫn.", + "lineHeight": 1.6, + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 18 + } + ] + }, + { + "type": "frame", + "name": "features", + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "name": "feature1", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 20, + "height": 20, + "iconFontName": "check-circle", + "iconFontFamily": "lucide", + "fill": "$status-success" + }, + { + "type": "text", + "fill": "$text-secondary", + "content": "Đặt hàng online 24/7", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "name": "feature2", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 20, + "height": 20, + "iconFontName": "check-circle", + "iconFontFamily": "lucide", + "fill": "$status-success" + }, + { + "type": "text", + "fill": "$text-secondary", + "content": "Tích điểm mỗi đơn hàng", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "name": "feature3", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 20, + "height": 20, + "iconFontName": "check-circle", + "iconFontFamily": "lucide", + "fill": "$status-success" + }, + { + "type": "text", + "fill": "$text-secondary", + "content": "Ưu đãi độc quyền cho thành viên", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "authPanel", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-surface", + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "padding": 60, + "children": [ + { + "type": "frame", + "name": "loginCard", + "width": 400, + "layout": "vertical", + "gap": 32, + "children": [ + { + "type": "frame", + "name": "cardHeader", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "cardTitle", + "fill": "$text-primary", + "content": "Đăng nhập", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "600" + }, + { + "type": "text", + "name": "cardSubtitle", + "fill": "$text-tertiary", + "content": "Đăng nhập để tiếp tục đặt hàng", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "name": "formSection", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "name": "phoneField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "name": "label", + "fill": "$text-secondary", + "content": "Số điện thoại", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "gap": 0, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "countryCode", + "height": "fill_container", + "fill": "$bg-interactive", + "cornerRadius": [10, 0, 0, 10], + "padding": [0, 12], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "flag", + "content": "🇻🇳", + "fontSize": 16 + }, + { + "type": "text", + "name": "code", + "fill": "$text-secondary", + "content": "+84", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "name": "inputField", + "width": "fill_container", + "height": "fill_container", + "padding": [0, 12], + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "placeholder", + "fill": "$text-muted", + "content": "Nhập số điện thoại", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "submitButton", + "width": "fill_container", + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { "color": "#FF5C00", "position": 0 }, + { "color": "#FF8A4C", "position": 1 } + ] + }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "name": "btnLabel", + "fill": "$text-primary", + "content": "Gửi mã OTP", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "socialDivider", + "width": "fill_container", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "line1", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + }, + { + "type": "text", + "name": "orText", + "fill": "$text-muted", + "content": "hoặc tiếp tục với", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "name": "line2", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + } + ] + }, + { + "type": "frame", + "name": "socialIconsRow", + "width": "fill_container", + "justifyContent": "center", + "gap": 16, + "children": [ + { + "type": "frame", + "name": "googleIcon", + "width": 56, + "height": 56, + "fill": "#FFFFFF", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "#4285F4", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "name": "appleIcon", + "width": 56, + "height": 56, + "fill": "#000000", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 26, + "height": 26, + "iconFontName": "apple", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + } + ] + }, + { + "type": "frame", + "name": "zaloIcon", + "width": 56, + "height": 56, + "fill": "#0068FF", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "#FFFFFF", + "content": "Z", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "name": "footerLinks", + "width": "fill_container", + "justifyContent": "center", + "gap": 4, + "children": [ + { + "type": "text", + "name": "text", + "fill": "$text-tertiary", + "content": "Lần đầu sử dụng?", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "text", + "name": "link", + "fill": "$orange-primary", + "content": "Tạo tài khoản", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "name": "footer", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "padding": [40, 0, 0, 0], + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-muted", + "content": "Bằng việc đăng nhập, bạn đồng ý với", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "name": "legalLinks", + "gap": 8, + "children": [ + { + "type": "text", + "fill": "$text-tertiary", + "content": "Điều khoản dịch vụ", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "fill": "$text-muted", + "content": "và", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "text", + "fill": "$text-tertiary", + "content": "Chính sách bảo mật", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { "type": "color", "value": "#0A0A0B" }, + "bg-surface": { "type": "color", "value": "#111113" }, + "bg-elevated": { "type": "color", "value": "#1A1A1D" }, + "bg-interactive": { "type": "color", "value": "#2A2A2E" }, + "border-default": { "type": "color", "value": "#2A2A2E" }, + "orange-primary": { "type": "color", "value": "#FF5C00" }, + "text-primary": { "type": "color", "value": "#FFFFFF" }, + "text-secondary": { "type": "color", "value": "#ADADB0" }, + "text-tertiary": { "type": "color", "value": "#8B8B90" }, + "text-muted": { "type": "color", "value": "#6B6B70" }, + "status-success": { "type": "color", "value": "#22C55E" } + } +} diff --git a/pencil-design/src/pages/auth/login/customer-mobile.pen b/pencil-design/src/pages/auth/login/customer-mobile.pen new file mode 100644 index 00000000..2a2f2cdd --- /dev/null +++ b/pencil-design/src/pages/auth/login/customer-mobile.pen @@ -0,0 +1,358 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "CustomerLoginMobile", + "name": "Customer Login - Mobile", + "width": 390, + "height": 844, + "fill": "$bg-page", + "layout": "vertical", + "children": [ + { + "type": "frame", + "name": "header", + "width": "fill_container", + "padding": [16, 24], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "logoRow", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "logoContainer", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { "color": "#FF5C00", "position": 0 }, + { "color": "#FF8A4C", "position": 1 } + ] + }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "fill": "$text-primary", + "content": "GoodGo", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "name": "content", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "justifyContent": "space_between", + "padding": 24, + "children": [ + { + "type": "frame", + "name": "formArea", + "width": "fill_container", + "layout": "vertical", + "gap": 24, + "children": [ + { + "type": "frame", + "name": "headerText", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "Đăng nhập", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "600" + }, + { + "type": "text", + "fill": "$text-tertiary", + "content": "Đăng nhập để tiếp tục đặt hàng", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "name": "phoneField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "fill": "$text-secondary", + "content": "Số điện thoại", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "width": "fill_container", + "height": 52, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "gap": 0, + "alignItems": "center", + "children": [ + { + "type": "frame", + "height": "fill_container", + "fill": "$bg-interactive", + "cornerRadius": [12, 0, 0, 12], + "padding": [0, 14], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "content": "🇻🇳", + "fontSize": 18 + }, + { + "type": "text", + "fill": "$text-secondary", + "content": "+84", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": "fill_container", + "padding": [0, 14], + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-muted", + "content": "Nhập số điện thoại", + "fontFamily": "Roboto", + "fontSize": 15 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "submitButton", + "width": "fill_container", + "height": 52, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { "color": "#FF5C00", "position": 0 }, + { "color": "#FF8A4C", "position": 1 } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "Gửi mã OTP", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "socialDivider", + "width": "fill_container", + "gap": 14, + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + }, + { + "type": "text", + "fill": "$text-muted", + "content": "hoặc", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + } + ] + }, + { + "type": "frame", + "name": "socialRow", + "width": "fill_container", + "justifyContent": "center", + "gap": 16, + "children": [ + { + "type": "frame", + "width": 60, + "height": 60, + "fill": "#FFFFFF", + "cornerRadius": 16, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "#4285F4", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 26, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "width": 60, + "height": 60, + "fill": "#000000", + "cornerRadius": 16, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 28, + "height": 28, + "iconFontName": "apple", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + } + ] + }, + { + "type": "frame", + "width": 60, + "height": 60, + "fill": "#0068FF", + "cornerRadius": 16, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "#FFFFFF", + "content": "Z", + "fontFamily": "Roboto", + "fontSize": 26, + "fontWeight": "700" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "footer", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "gap": 4, + "children": [ + { + "type": "text", + "fill": "$text-tertiary", + "content": "Lần đầu sử dụng?", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "text", + "fill": "$orange-primary", + "content": "Tạo tài khoản", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "fill": "$text-muted", + "textGrowth": "fixed-width", + "width": 280, + "content": "Bằng việc đăng nhập, bạn đồng ý với Điều khoản dịch vụ", + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 11, + "lineHeight": 1.4 + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { "type": "color", "value": "#0A0A0B" }, + "bg-elevated": { "type": "color", "value": "#1A1A1D" }, + "bg-interactive": { "type": "color", "value": "#2A2A2E" }, + "border-default": { "type": "color", "value": "#2A2A2E" }, + "orange-primary": { "type": "color", "value": "#FF5C00" }, + "text-primary": { "type": "color", "value": "#FFFFFF" }, + "text-secondary": { "type": "color", "value": "#ADADB0" }, + "text-tertiary": { "type": "color", "value": "#8B8B90" }, + "text-muted": { "type": "color", "value": "#6B6B70" } + } +} diff --git a/pencil-design/src/pages/auth/login/customer-tablet.pen b/pencil-design/src/pages/auth/login/customer-tablet.pen new file mode 100644 index 00000000..075c0470 --- /dev/null +++ b/pencil-design/src/pages/auth/login/customer-tablet.pen @@ -0,0 +1,328 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "CustomerLoginTablet", + "name": "Customer Login - Tablet", + "width": 1024, + "height": 768, + "fill": "$bg-page", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "loginCard", + "width": 480, + "fill": "$bg-surface", + "cornerRadius": 24, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 28, + "padding": 40, + "children": [ + { + "type": "frame", + "name": "cardHeader", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "logoContainer", + "width": 56, + "height": 56, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { "color": "#FF5C00", "position": 0 }, + { "color": "#FF8A4C", "position": 1 } + ] + }, + "cornerRadius": 14, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "fill": "$text-primary", + "content": "Đăng nhập GoodGo", + "fontFamily": "Roboto", + "fontSize": 26, + "fontWeight": "600" + }, + { + "type": "text", + "fill": "$text-tertiary", + "content": "Đặt hàng dễ dàng, tích điểm nhanh chóng", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "name": "formSection", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "name": "phoneField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "fill": "$text-secondary", + "content": "Số điện thoại", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "width": "fill_container", + "height": 50, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "gap": 0, + "alignItems": "center", + "children": [ + { + "type": "frame", + "height": "fill_container", + "fill": "$bg-interactive", + "cornerRadius": [10, 0, 0, 10], + "padding": [0, 14], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "content": "🇻🇳", + "fontSize": 16 + }, + { + "type": "text", + "fill": "$text-secondary", + "content": "+84", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": "fill_container", + "padding": [0, 14], + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-muted", + "content": "Nhập số điện thoại", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "submitButton", + "width": "fill_container", + "height": 50, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { "color": "#FF5C00", "position": 0 }, + { "color": "#FF8A4C", "position": 1 } + ] + }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "Gửi mã OTP", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "socialDivider", + "width": "fill_container", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + }, + { + "type": "text", + "fill": "$text-muted", + "content": "hoặc tiếp tục với", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + } + ] + }, + { + "type": "frame", + "name": "socialRow", + "width": "fill_container", + "justifyContent": "center", + "gap": 16, + "children": [ + { + "type": "frame", + "width": 54, + "height": 54, + "fill": "#FFFFFF", + "cornerRadius": 14, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "#4285F4", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "width": 54, + "height": 54, + "fill": "#000000", + "cornerRadius": 14, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 26, + "height": 26, + "iconFontName": "apple", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + } + ] + }, + { + "type": "frame", + "width": 54, + "height": 54, + "fill": "#0068FF", + "cornerRadius": 14, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "#FFFFFF", + "content": "Z", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "name": "footer", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "gap": 4, + "children": [ + { + "type": "text", + "fill": "$text-tertiary", + "content": "Lần đầu sử dụng?", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "text", + "fill": "$orange-primary", + "content": "Tạo tài khoản", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { "type": "color", "value": "#0A0A0B" }, + "bg-surface": { "type": "color", "value": "#111113" }, + "bg-elevated": { "type": "color", "value": "#1A1A1D" }, + "bg-interactive": { "type": "color", "value": "#2A2A2E" }, + "border-default": { "type": "color", "value": "#2A2A2E" }, + "border-subtle": { "type": "color", "value": "#1F1F23" }, + "orange-primary": { "type": "color", "value": "#FF5C00" }, + "text-primary": { "type": "color", "value": "#FFFFFF" }, + "text-secondary": { "type": "color", "value": "#ADADB0" }, + "text-tertiary": { "type": "color", "value": "#8B8B90" }, + "text-muted": { "type": "color", "value": "#6B6B70" } + } +} diff --git a/pencil-design/src/pages/auth/login/staff-desktop.pen b/pencil-design/src/pages/auth/login/staff-desktop.pen new file mode 100644 index 00000000..461d3029 --- /dev/null +++ b/pencil-design/src/pages/auth/login/staff-desktop.pen @@ -0,0 +1,302 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "StaffLoginPage", + "name": "Staff Login Page - Desktop", + "width": 1440, + "height": 900, + "fill": "$bg-page", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "loginCard", + "width": 440, + "fill": "$bg-surface", + "cornerRadius": 24, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 32, + "padding": 48, + "children": [ + { + "type": "frame", + "name": "cardHeader", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "logoRow", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "logoContainer", + "width": 48, + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { "color": "#FF5C00", "position": 0 }, + { "color": "#FF8A4C", "position": 1 } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "a", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "fill": "$text-primary", + "content": "aPOS", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "name": "roleBadge", + "fill": "$status-success-bg", + "cornerRadius": 100, + "padding": [6, 16], + "children": [ + { + "type": "text", + "fill": "$status-success", + "content": "NHÂN VIÊN", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 1 + } + ] + }, + { + "type": "text", + "fill": "$text-tertiary", + "content": "Đăng nhập để bắt đầu ca làm việc", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "name": "formSection", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "name": "emailField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "fill": "$text-secondary", + "content": "Email hoặc số điện thoại", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 18, + "height": 18, + "iconFontName": "user", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "fill": "$text-muted", + "content": "Tài khoản được cấp", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "name": "passwordField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "fill": "$text-secondary", + "content": "Mật khẩu", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "name": "inputWrapper", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 18, + "height": 18, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "fill": "$text-muted", + "content": "••••••••", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "icon_font", + "width": 18, + "height": 18, + "iconFontName": "eye-off", + "iconFontFamily": "lucide", + "fill": "$text-muted" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "submitButton", + "width": "fill_container", + "height": 48, + "fill": "$status-success", + "cornerRadius": 10, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 18, + "height": 18, + "iconFontName": "log-in", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "fill": "$text-primary", + "content": "Bắt đầu ca", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "helpLink", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "text", + "fill": "$text-tertiary", + "content": "Quên mật khẩu? Liên hệ quản lý", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + } + ] + }, + { + "type": "frame", + "name": "roleHint", + "layout": "vertical", + "gap": 8, + "padding": [40, 0, 0, 0], + "alignItems": "center", + "position": "absolute", + "x": 500, + "y": 780, + "children": [ + { + "type": "text", + "fill": "$text-muted", + "content": "Cũng dùng cho: Thu ngân · Bếp · Giao hàng · Kho", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + } + ] + } + ], + "variables": { + "bg-page": { "type": "color", "value": "#0A0A0B" }, + "bg-surface": { "type": "color", "value": "#111113" }, + "bg-elevated": { "type": "color", "value": "#1A1A1D" }, + "border-default": { "type": "color", "value": "#2A2A2E" }, + "border-subtle": { "type": "color", "value": "#1F1F23" }, + "text-primary": { "type": "color", "value": "#FFFFFF" }, + "text-secondary": { "type": "color", "value": "#ADADB0" }, + "text-tertiary": { "type": "color", "value": "#8B8B90" }, + "text-muted": { "type": "color", "value": "#6B6B70" }, + "status-success": { "type": "color", "value": "#22C55E" }, + "status-success-bg": { "type": "color", "value": "#22C55E1A" } + } +} diff --git a/pencil-design/src/pages/auth/login/staff-mobile.pen b/pencil-design/src/pages/auth/login/staff-mobile.pen new file mode 100644 index 00000000..dd5651fc --- /dev/null +++ b/pencil-design/src/pages/auth/login/staff-mobile.pen @@ -0,0 +1,291 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "StaffLoginMobile", + "name": "Staff Login - Mobile", + "width": 390, + "height": 844, + "fill": "$bg-page", + "layout": "vertical", + "children": [ + { + "type": "frame", + "name": "header", + "width": "fill_container", + "padding": [16, 24], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 40, + "height": 40, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { "color": "#FF5C00", "position": 0 }, + { "color": "#FF8A4C", "position": 1 } + ] + }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "a", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + } + ] + }, + { + "type": "text", + "fill": "$text-primary", + "content": "aPOS", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "name": "content", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "justifyContent": "center", + "padding": 24, + "gap": 28, + "children": [ + { + "type": "frame", + "name": "headerContent", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "fill": "$status-success-bg", + "cornerRadius": 100, + "padding": [8, 16], + "children": [ + { + "type": "text", + "fill": "$status-success", + "content": "NHÂN VIÊN", + "fontFamily": "Roboto", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 1 + } + ] + }, + { + "type": "text", + "fill": "$text-primary", + "content": "Đăng nhập hệ thống", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "600" + }, + { + "type": "text", + "fill": "$text-tertiary", + "content": "Đăng nhập để bắt đầu ca làm việc", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "name": "formSection", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "name": "emailField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "fill": "$text-secondary", + "content": "Email hoặc số điện thoại", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "width": "fill_container", + "height": 52, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 20, + "height": 20, + "iconFontName": "user", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "fill": "$text-muted", + "content": "Tài khoản được cấp", + "fontFamily": "Roboto", + "fontSize": 15 + } + ] + } + ] + }, + { + "type": "frame", + "name": "passwordField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "fill": "$text-secondary", + "content": "Mật khẩu", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "width": "fill_container", + "height": 52, + "fill": "$bg-elevated", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 20, + "height": 20, + "iconFontName": "lock", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "fill": "$text-muted", + "content": "••••••••", + "fontFamily": "Roboto", + "fontSize": 15 + } + ] + }, + { + "type": "icon_font", + "width": 20, + "height": 20, + "iconFontName": "eye-off", + "iconFontFamily": "lucide", + "fill": "$text-muted" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "submitButton", + "width": "fill_container", + "height": 52, + "fill": "$status-success", + "cornerRadius": 12, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 20, + "height": 20, + "iconFontName": "log-in", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "fill": "$text-primary", + "content": "Bắt đầu ca", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "helpLink", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { + "type": "text", + "fill": "$text-tertiary", + "content": "Quên mật khẩu? Liên hệ quản lý", + "fontFamily": "Roboto", + "fontSize": 13 + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { "type": "color", "value": "#0A0A0B" }, + "bg-elevated": { "type": "color", "value": "#1A1A1D" }, + "border-default": { "type": "color", "value": "#2A2A2E" }, + "text-primary": { "type": "color", "value": "#FFFFFF" }, + "text-secondary": { "type": "color", "value": "#ADADB0" }, + "text-tertiary": { "type": "color", "value": "#8B8B90" }, + "text-muted": { "type": "color", "value": "#6B6B70" }, + "status-success": { "type": "color", "value": "#22C55E" }, + "status-success-bg": { "type": "color", "value": "#22C55E1A" } + } +} diff --git a/pencil-design/src/pages/auth/login/staff-tablet.pen b/pencil-design/src/pages/auth/login/staff-tablet.pen new file mode 100644 index 00000000..1294208e --- /dev/null +++ b/pencil-design/src/pages/auth/login/staff-tablet.pen @@ -0,0 +1,170 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "StaffLoginTablet", + "name": "Staff Login - Tablet", + "width": 1024, + "height": 768, + "fill": "$bg-page", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "loginCard", + "width": 460, + "fill": "$bg-surface", + "cornerRadius": 24, + "stroke": { "thickness": 1, "fill": "$border-subtle" }, + "layout": "vertical", + "gap": 32, + "padding": 44, + "children": [ + { + "type": "frame", + "name": "cardHeader", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 48, + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { "color": "#FF5C00", "position": 0 }, + { "color": "#FF8A4C", "position": 1 } + ] + }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#FFFFFF", "content": "a", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700" } + ] + }, + { "type": "text", "fill": "#FFFFFF", "content": "aPOS", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700" } + ] + }, + { + "type": "frame", + "fill": "#22C55E1A", + "cornerRadius": 100, + "padding": [6, 16], + "children": [ + { "type": "text", "fill": "#22C55E", "content": "NHÂN VIÊN", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1 } + ] + }, + { "type": "text", "fill": "#8B8B90", "content": "Đăng nhập để bắt đầu ca làm việc", "fontFamily": "Roboto", "fontSize": 14 } + ] + }, + { + "type": "frame", + "name": "formSection", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { "type": "text", "fill": "#ADADB0", "content": "Email hoặc số điện thoại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, + { + "type": "frame", + "width": "fill_container", + "height": 50, + "fill": "#1A1A1D", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "#2A2A2E" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#6B6B70" }, + { "type": "text", "fill": "#6B6B70", "content": "Tài khoản được cấp", "fontFamily": "Roboto", "fontSize": 14 } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { "type": "text", "fill": "#ADADB0", "content": "Mật khẩu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, + { + "type": "frame", + "width": "fill_container", + "height": 50, + "fill": "#1A1A1D", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "#2A2A2E" }, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "gap": 10, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "lock", "iconFontFamily": "lucide", "fill": "#6B6B70" }, + { "type": "text", "fill": "#6B6B70", "content": "••••••••", "fontFamily": "Roboto", "fontSize": 14 } + ] + }, + { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "eye-off", "iconFontFamily": "lucide", "fill": "#6B6B70" } + ] + } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": 50, + "fill": "#22C55E", + "cornerRadius": 10, + "gap": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "log-in", "iconFontFamily": "lucide", "fill": "#FFFFFF" }, + { "type": "text", "fill": "#FFFFFF", "content": "Bắt đầu ca", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600" } + ] + }, + { + "type": "frame", + "width": "fill_container", + "justifyContent": "center", + "children": [ + { "type": "text", "fill": "#8B8B90", "content": "Quên mật khẩu? Liên hệ quản lý", "fontFamily": "Roboto", "fontSize": 13 } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { "type": "color", "value": "#0A0A0B" }, + "bg-surface": { "type": "color", "value": "#111113" }, + "border-subtle": { "type": "color", "value": "#1F1F23" } + } +} diff --git a/pencil-design/src/pages/auth/register/customer-desktop.pen b/pencil-design/src/pages/auth/register/customer-desktop.pen new file mode 100644 index 00000000..3a07899b --- /dev/null +++ b/pencil-design/src/pages/auth/register/customer-desktop.pen @@ -0,0 +1,592 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "RegisterPage", + "name": "Customer Register Page - Desktop", + "width": 1440, + "height": 1000, + "fill": "$bg-page", + "layout": "horizontal", + "children": [ + { + "type": "frame", + "name": "brandPanel", + "width": 640, + "height": "fill_container", + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { "color": "#0A0A0B", "position": 0 }, + { "color": "#1A1A1D", "position": 0.5 }, + { "color": "#0A0A0B", "position": 1 } + ] + }, + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "padding": 80, + "children": [ + { + "type": "frame", + "name": "brandContent", + "layout": "vertical", + "gap": 40, + "alignItems": "center", + "children": [ + { + "type": "frame", + "name": "logoContainer", + "width": 80, + "height": 80, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { "color": "#FF5C00", "position": 0 }, + { "color": "#FF8A4C", "position": 1 } + ] + }, + "cornerRadius": 20, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 40, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "Tham gia GoodGo", + "fontFamily": "Roboto", + "fontSize": 36, + "fontWeight": "700" + }, + { + "type": "text", + "fill": "$text-tertiary", + "textGrowth": "fixed-width", + "width": 380, + "content": "Đăng ký miễn phí để nhận ưu đãi độc quyền và tích điểm cho mọi đơn hàng.", + "lineHeight": 1.6, + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 16 + } + ] + }, + { + "type": "frame", + "name": "benefits", + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 20, + "height": 20, + "iconFontName": "gift", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "fill": "$text-secondary", + "content": "Ưu đãi 50K cho đơn hàng đầu tiên", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 20, + "height": 20, + "iconFontName": "coins", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "fill": "$text-secondary", + "content": "Tích 1 điểm cho mỗi 10.000đ", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 20, + "height": 20, + "iconFontName": "zap", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "fill": "$text-secondary", + "content": "Flash sale độc quyền hàng tuần", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "authPanel", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-surface", + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "padding": 60, + "children": [ + { + "type": "frame", + "name": "registerCard", + "width": 400, + "layout": "vertical", + "gap": 28, + "children": [ + { + "type": "frame", + "name": "cardHeader", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "Tạo tài khoản", + "fontFamily": "Roboto", + "fontSize": 28, + "fontWeight": "600" + }, + { + "type": "text", + "fill": "$text-tertiary", + "content": "Điền thông tin để đăng ký", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "name": "formSection", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "name": "nameField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "fill": "$text-secondary", + "content": "Họ và tên", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 18, + "height": 18, + "iconFontName": "user", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "fill": "$text-muted", + "content": "Nguyễn Văn A", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + }, + { + "type": "frame", + "name": "phoneField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "fill": "$text-secondary", + "content": "Số điện thoại", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "frame", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "gap": 0, + "alignItems": "center", + "children": [ + { + "type": "frame", + "height": "fill_container", + "fill": "$bg-interactive", + "cornerRadius": [10, 0, 0, 10], + "padding": [0, 12], + "gap": 6, + "alignItems": "center", + "children": [ + { + "type": "text", + "content": "🇻🇳", + "fontSize": 16 + }, + { + "type": "text", + "fill": "$text-secondary", + "content": "+84", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": "fill_container", + "padding": [0, 12], + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-muted", + "content": "Nhập số điện thoại", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "emailField", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "frame", + "width": "fill_container", + "justifyContent": "space_between", + "children": [ + { + "type": "text", + "fill": "$text-secondary", + "content": "Email", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + }, + { + "type": "text", + "fill": "$text-muted", + "content": "(Tùy chọn)", + "fontFamily": "Roboto", + "fontSize": 12 + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": 48, + "fill": "$bg-elevated", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 18, + "height": 18, + "iconFontName": "mail", + "iconFontFamily": "lucide", + "fill": "$text-muted" + }, + { + "type": "text", + "fill": "$text-muted", + "content": "email@example.com", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "name": "termsCheckbox", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 20, + "height": 20, + "fill": "$bg-elevated", + "cornerRadius": 4, + "stroke": { "thickness": 1, "fill": "$border-default" } + }, + { + "type": "frame", + "width": 280, + "children": [ + { + "type": "text", + "fill": "$text-tertiary", + "content": "Tôi đồng ý với Điều khoản dịch vụ và Chính sách bảo mật", + "fontFamily": "Roboto", + "fontSize": 13, + "lineHeight": 1.4 + } + ] + } + ] + }, + { + "type": "frame", + "name": "submitButton", + "width": "fill_container", + "height": 48, + "fill": { + "type": "gradient", + "gradientType": "linear", + "rotation": 135, + "colors": [ + { "color": "#FF5C00", "position": 0 }, + { "color": "#FF8A4C", "position": 1 } + ] + }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "$text-primary", + "content": "Đăng ký", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "name": "socialDivider", + "width": "fill_container", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + }, + { + "type": "text", + "fill": "$text-muted", + "content": "hoặc đăng ký với", + "fontFamily": "Roboto", + "fontSize": 12 + }, + { + "type": "frame", + "width": "fill_container", + "height": 1, + "fill": "$border-default" + } + ] + }, + { + "type": "frame", + "name": "socialIconsRow", + "width": "fill_container", + "justifyContent": "center", + "gap": 16, + "children": [ + { + "type": "frame", + "width": 56, + "height": 56, + "fill": "#FFFFFF", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "#4285F4", + "content": "G", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "700" + } + ] + }, + { + "type": "frame", + "width": 56, + "height": 56, + "fill": "#000000", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "$border-default" }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "width": 26, + "height": 26, + "iconFontName": "apple", + "iconFontFamily": "lucide", + "fill": "#FFFFFF" + } + ] + }, + { + "type": "frame", + "width": 56, + "height": 56, + "fill": "#0068FF", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "fill": "#FFFFFF", + "content": "Z", + "fontFamily": "Roboto", + "fontSize": 24, + "fontWeight": "700" + } + ] + } + ] + }, + { + "type": "frame", + "name": "footerLinks", + "width": "fill_container", + "justifyContent": "center", + "gap": 4, + "children": [ + { + "type": "text", + "fill": "$text-tertiary", + "content": "Đã có tài khoản?", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { + "type": "text", + "fill": "$orange-primary", + "content": "Đăng nhập", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "500" + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-page": { "type": "color", "value": "#0A0A0B" }, + "bg-surface": { "type": "color", "value": "#111113" }, + "bg-elevated": { "type": "color", "value": "#1A1A1D" }, + "bg-interactive": { "type": "color", "value": "#2A2A2E" }, + "border-default": { "type": "color", "value": "#2A2A2E" }, + "orange-primary": { "type": "color", "value": "#FF5C00" }, + "text-primary": { "type": "color", "value": "#FFFFFF" }, + "text-secondary": { "type": "color", "value": "#ADADB0" }, + "text-tertiary": { "type": "color", "value": "#8B8B90" }, + "text-muted": { "type": "color", "value": "#6B6B70" } + } +} diff --git a/pencil-design/src/pages/auth/register/customer-mobile.pen b/pencil-design/src/pages/auth/register/customer-mobile.pen new file mode 100644 index 00000000..440324d7 --- /dev/null +++ b/pencil-design/src/pages/auth/register/customer-mobile.pen @@ -0,0 +1,241 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "RegisterMobile", + "name": "Customer Register - Mobile", + "width": 390, + "height": 844, + "fill": "#0A0A0B", + "layout": "vertical", + "children": [ + { + "type": "frame", + "width": "fill_container", + "padding": [16, 24], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 40, + "height": 40, + "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700" } + ] + }, + { "type": "text", "fill": "#FFFFFF", "content": "GoodGo", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700" } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "justifyContent": "space_between", + "padding": 24, + "children": [ + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 24, + "children": [ + { + "type": "frame", + "layout": "vertical", + "gap": 8, + "children": [ + { "type": "text", "fill": "#FFFFFF", "content": "Tạo tài khoản", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "600" }, + { "type": "text", "fill": "#8B8B90", "content": "Đăng ký miễn phí để nhận ưu đãi", "fontFamily": "Roboto", "fontSize": 14 } + ] + }, + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { "type": "text", "fill": "#ADADB0", "content": "Họ và tên", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, + { + "type": "frame", + "width": "fill_container", + "height": 52, + "fill": "#1A1A1D", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "#2A2A2E" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 20, "height": 20, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#6B6B70" }, + { "type": "text", "fill": "#6B6B70", "content": "Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 15 } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { "type": "text", "fill": "#ADADB0", "content": "Số điện thoại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, + { + "type": "frame", + "width": "fill_container", + "height": 52, + "fill": "#1A1A1D", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "#2A2A2E" }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "height": "fill_container", + "fill": "#2A2A2E", + "cornerRadius": [12, 0, 0, 12], + "padding": [0, 14], + "gap": 6, + "alignItems": "center", + "children": [ + { "type": "text", "content": "🇻🇳", "fontSize": 18 }, + { "type": "text", "fill": "#ADADB0", "content": "+84", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500" } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": "fill_container", + "padding": [0, 14], + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#6B6B70", "content": "Nhập số điện thoại", "fontFamily": "Roboto", "fontSize": 15 } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 22, + "height": 22, + "fill": "#1A1A1D", + "cornerRadius": 4, + "stroke": { "thickness": 1, "fill": "#2A2A2E" } + }, + { "type": "text", "fill": "#8B8B90", "content": "Tôi đồng ý với Điều khoản dịch vụ", "fontFamily": "Roboto", "fontSize": 13 } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": 52, + "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#FFFFFF", "content": "Đăng ký", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600" } + ] + }, + { + "type": "frame", + "width": "fill_container", + "gap": 14, + "alignItems": "center", + "children": [ + { "type": "frame", "width": "fill_container", "height": 1, "fill": "#2A2A2E" }, + { "type": "text", "fill": "#6B6B70", "content": "hoặc", "fontFamily": "Roboto", "fontSize": 12 }, + { "type": "frame", "width": "fill_container", "height": 1, "fill": "#2A2A2E" } + ] + }, + { + "type": "frame", + "width": "fill_container", + "justifyContent": "center", + "gap": 16, + "children": [ + { + "type": "frame", + "width": 60, + "height": 60, + "fill": "#FFFFFF", + "cornerRadius": 16, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#4285F4", "content": "G", "fontFamily": "Roboto", "fontSize": 26, "fontWeight": "700" } + ] + }, + { + "type": "frame", + "width": 60, + "height": 60, + "fill": "#000000", + "cornerRadius": 16, + "stroke": { "thickness": 1, "fill": "#2A2A2E" }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 28, "height": 28, "iconFontName": "apple", "iconFontFamily": "lucide", "fill": "#FFFFFF" } + ] + }, + { + "type": "frame", + "width": 60, + "height": 60, + "fill": "#0068FF", + "cornerRadius": 16, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#FFFFFF", "content": "Z", "fontFamily": "Roboto", "fontSize": 26, "fontWeight": "700" } + ] + } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "justifyContent": "center", + "gap": 4, + "children": [ + { "type": "text", "fill": "#8B8B90", "content": "Đã có tài khoản?", "fontFamily": "Roboto", "fontSize": 14 }, + { "type": "text", "fill": "#FF5C00", "content": "Đăng nhập", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" } + ] + } + ] + } + ] + } + ] +} diff --git a/pencil-design/src/pages/auth/register/customer-tablet.pen b/pencil-design/src/pages/auth/register/customer-tablet.pen new file mode 100644 index 00000000..28976671 --- /dev/null +++ b/pencil-design/src/pages/auth/register/customer-tablet.pen @@ -0,0 +1,253 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "RegisterTablet", + "name": "Customer Register - Tablet", + "width": 1024, + "height": 768, + "fill": "#0A0A0B", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 480, + "fill": "#111113", + "cornerRadius": 24, + "stroke": { "thickness": 1, "fill": "#1F1F23" }, + "layout": "vertical", + "gap": 24, + "padding": 40, + "children": [ + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 56, + "height": 56, + "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, + "cornerRadius": 14, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700" } + ] + }, + { "type": "text", "fill": "#FFFFFF", "content": "Tạo tài khoản GoodGo", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }, + { "type": "text", "fill": "#8B8B90", "content": "Đăng ký miễn phí để nhận ưu đãi", "fontFamily": "Roboto", "fontSize": 14 } + ] + }, + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "children": [ + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { "type": "text", "fill": "#ADADB0", "content": "Họ và tên", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, + { + "type": "frame", + "width": "fill_container", + "height": 48, + "fill": "#1A1A1D", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "#2A2A2E" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#6B6B70" }, + { "type": "text", "fill": "#6B6B70", "content": "Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 14 } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { "type": "text", "fill": "#ADADB0", "content": "Số điện thoại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, + { + "type": "frame", + "width": "fill_container", + "height": 48, + "fill": "#1A1A1D", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "#2A2A2E" }, + "alignItems": "center", + "children": [ + { + "type": "frame", + "height": "fill_container", + "fill": "#2A2A2E", + "cornerRadius": [10, 0, 0, 10], + "padding": [0, 12], + "gap": 6, + "alignItems": "center", + "children": [ + { "type": "text", "content": "🇻🇳", "fontSize": 16 }, + { "type": "text", "fill": "#ADADB0", "content": "+84", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": "fill_container", + "padding": [0, 12], + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#6B6B70", "content": "Nhập số điện thoại", "fontFamily": "Roboto", "fontSize": 14 } + ] + } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 6, + "children": [ + { + "type": "frame", + "width": "fill_container", + "justifyContent": "space_between", + "children": [ + { "type": "text", "fill": "#ADADB0", "content": "Email", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, + { "type": "text", "fill": "#6B6B70", "content": "(Tùy chọn)", "fontFamily": "Roboto", "fontSize": 12 } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": 48, + "fill": "#1A1A1D", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "#2A2A2E" }, + "padding": [0, 16], + "gap": 10, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "#6B6B70" }, + { "type": "text", "fill": "#6B6B70", "content": "email@example.com", "fontFamily": "Roboto", "fontSize": 14 } + ] + } + ] + } + ] + }, + { + "type": "frame", + "gap": 10, + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 20, + "height": 20, + "fill": "#1A1A1D", + "cornerRadius": 4, + "stroke": { "thickness": 1, "fill": "#2A2A2E" } + }, + { "type": "text", "fill": "#8B8B90", "content": "Tôi đồng ý với Điều khoản dịch vụ", "fontFamily": "Roboto", "fontSize": 13 } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": 48, + "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#FFFFFF", "content": "Đăng ký", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600" } + ] + }, + { + "type": "frame", + "width": "fill_container", + "gap": 16, + "alignItems": "center", + "children": [ + { "type": "frame", "width": "fill_container", "height": 1, "fill": "#2A2A2E" }, + { "type": "text", "fill": "#6B6B70", "content": "hoặc", "fontFamily": "Roboto", "fontSize": 12 }, + { "type": "frame", "width": "fill_container", "height": 1, "fill": "#2A2A2E" } + ] + }, + { + "type": "frame", + "width": "fill_container", + "justifyContent": "center", + "gap": 16, + "children": [ + { + "type": "frame", + "width": 52, + "height": 52, + "fill": "#FFFFFF", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#4285F4", "content": "G", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700" } + ] + }, + { + "type": "frame", + "width": 52, + "height": 52, + "fill": "#000000", + "cornerRadius": 12, + "stroke": { "thickness": 1, "fill": "#2A2A2E" }, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 24, "height": 24, "iconFontName": "apple", "iconFontFamily": "lucide", "fill": "#FFFFFF" } + ] + }, + { + "type": "frame", + "width": 52, + "height": 52, + "fill": "#0068FF", + "cornerRadius": 12, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#FFFFFF", "content": "Z", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700" } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "justifyContent": "center", + "gap": 4, + "children": [ + { "type": "text", "fill": "#8B8B90", "content": "Đã có tài khoản?", "fontFamily": "Roboto", "fontSize": 14 }, + { "type": "text", "fill": "#FF5C00", "content": "Đăng nhập", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" } + ] + } + ] + } + ] + } + ] +} diff --git a/pencil-design/src/pages/auth/workflow/email-sent.pen b/pencil-design/src/pages/auth/workflow/email-sent.pen new file mode 100644 index 00000000..77f3a822 --- /dev/null +++ b/pencil-design/src/pages/auth/workflow/email-sent.pen @@ -0,0 +1,117 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "EmailSent", + "name": "Email Sent Confirmation", + "width": 1440, + "height": 900, + "fill": "#0A0A0B", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 440, + "fill": "#111113", + "cornerRadius": 24, + "stroke": { "thickness": 1, "fill": "#1F1F23" }, + "layout": "vertical", + "gap": 28, + "padding": 48, + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 88, + "height": 88, + "fill": "#22C55E1A", + "cornerRadius": 44, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 40, "height": 40, "iconFontName": "mail-check", "iconFontFamily": "lucide", "fill": "#22C55E" } + ] + }, + { + "type": "frame", + "layout": "vertical", + "gap": 12, + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#FFFFFF", "content": "Kiểm tra email của bạn", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }, + { + "type": "text", + "fill": "#8B8B90", + "textGrowth": "fixed-width", + "width": 320, + "content": "Chúng tôi đã gửi đường dẫn đặt lại mật khẩu đến:", + "lineHeight": 1.5, + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 14 + }, + { "type": "text", "fill": "#FFFFFF", "content": "n****a@gmail.com", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "500" } + ] + }, + { + "type": "frame", + "width": "fill_container", + "fill": "#F59E0B1A", + "cornerRadius": 10, + "padding": 16, + "gap": 10, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "info", "iconFontFamily": "lucide", "fill": "#F59E0B" }, + { "type": "text", "fill": "#F59E0B", "content": "Link có hiệu lực trong 15 phút", "fontFamily": "Roboto", "fontSize": 13 } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": 50, + "fill": "#1A1A1D", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "#2A2A2E" }, + "justifyContent": "center", + "alignItems": "center", + "gap": 8, + "children": [ + { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "#FFFFFF" }, + { "type": "text", "fill": "#FFFFFF", "content": "Mở ứng dụng Email", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" } + ] + }, + { + "type": "frame", + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#8B8B90", "content": "Không nhận được email?", "fontFamily": "Roboto", "fontSize": 13 }, + { + "type": "frame", + "gap": 4, + "children": [ + { "type": "text", "fill": "#8B8B90", "content": "Kiểm tra spam hoặc", "fontFamily": "Roboto", "fontSize": 13 }, + { "type": "text", "fill": "#FF5C00", "content": "gửi lại", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500" } + ] + } + ] + }, + { + "type": "frame", + "gap": 6, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 16, "height": 16, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "#8B8B90" }, + { "type": "text", "fill": "#8B8B90", "content": "Quay lại đăng nhập", "fontFamily": "Roboto", "fontSize": 13 } + ] + } + ] + } + ] + } + ] +} diff --git a/pencil-design/src/pages/auth/workflow/otp-verify.pen b/pencil-design/src/pages/auth/workflow/otp-verify.pen new file mode 100644 index 00000000..b77f5f80 --- /dev/null +++ b/pencil-design/src/pages/auth/workflow/otp-verify.pen @@ -0,0 +1,187 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "OTPVerifyDesktop", + "name": "OTP Verify - Desktop", + "width": 1440, + "height": 900, + "fill": "#0A0A0B", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 440, + "fill": "#111113", + "cornerRadius": 24, + "stroke": { "thickness": 1, "fill": "#1F1F23" }, + "layout": "vertical", + "gap": 32, + "padding": 48, + "children": [ + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 72, + "height": 72, + "fill": "#22C55E1A", + "cornerRadius": 36, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 32, "height": 32, "iconFontName": "smartphone", "iconFontFamily": "lucide", "fill": "#22C55E" } + ] + }, + { "type": "text", "fill": "#FFFFFF", "content": "Xác thực OTP", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }, + { + "type": "text", + "fill": "#8B8B90", + "textGrowth": "fixed-width", + "width": 320, + "content": "Nhập mã 6 số đã gửi đến số điện thoại +84 ••• ••• 678", + "lineHeight": 1.5, + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "justifyContent": "center", + "gap": 12, + "children": [ + { "type": "frame", "width": 48, "height": 56, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#2A2A2E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#6B6B70", "content": "•", "fontFamily": "Roboto", "fontSize": 24 }] }, + { "type": "frame", "width": 48, "height": 56, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#2A2A2E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#6B6B70", "content": "•", "fontFamily": "Roboto", "fontSize": 24 }] }, + { "type": "frame", "width": 48, "height": 56, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#2A2A2E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#6B6B70", "content": "•", "fontFamily": "Roboto", "fontSize": 24 }] }, + { "type": "frame", "width": 48, "height": 56, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#2A2A2E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#6B6B70", "content": "•", "fontFamily": "Roboto", "fontSize": 24 }] }, + { "type": "frame", "width": 48, "height": 56, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#2A2A2E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#6B6B70", "content": "•", "fontFamily": "Roboto", "fontSize": 24 }] }, + { "type": "frame", "width": 48, "height": 56, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#2A2A2E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#6B6B70", "content": "•", "fontFamily": "Roboto", "fontSize": 24 }] } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": 50, + "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#FFFFFF", "content": "Xác nhận", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600" } + ] + }, + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "gap": 8, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 16, "height": 16, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B8B90" }, + { "type": "text", "fill": "#8B8B90", "content": "Mã hết hạn sau", "fontFamily": "Roboto", "fontSize": 13 }, + { "type": "text", "fill": "#FF5C00", "content": "04:32", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600" } + ] + }, + { + "type": "frame", + "gap": 4, + "children": [ + { "type": "text", "fill": "#8B8B90", "content": "Không nhận được mã?", "fontFamily": "Roboto", "fontSize": 13 }, + { "type": "text", "fill": "#FF5C00", "content": "Gửi lại", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500" } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "OTPVerifyFilled", + "name": "OTP Verify - Filled", + "x": 1540, + "width": 1440, + "height": 900, + "fill": "#0A0A0B", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 440, + "fill": "#111113", + "cornerRadius": 24, + "stroke": { "thickness": 1, "fill": "#1F1F23" }, + "layout": "vertical", + "gap": 32, + "padding": 48, + "children": [ + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 72, + "height": 72, + "fill": "#22C55E1A", + "cornerRadius": 36, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 32, "height": 32, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E" } + ] + }, + { "type": "text", "fill": "#FFFFFF", "content": "Xác thực thành công!", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }, + { "type": "text", "fill": "#22C55E", "content": "Đang chuyển hướng...", "fontFamily": "Roboto", "fontSize": 14 } + ] + }, + { + "type": "frame", + "width": "fill_container", + "justifyContent": "center", + "gap": 12, + "children": [ + { "type": "frame", "width": 48, "height": 56, "fill": "#22C55E1A", "cornerRadius": 10, "stroke": { "thickness": 2, "fill": "#22C55E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#22C55E", "content": "1", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600" }] }, + { "type": "frame", "width": 48, "height": 56, "fill": "#22C55E1A", "cornerRadius": 10, "stroke": { "thickness": 2, "fill": "#22C55E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#22C55E", "content": "2", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600" }] }, + { "type": "frame", "width": 48, "height": 56, "fill": "#22C55E1A", "cornerRadius": 10, "stroke": { "thickness": 2, "fill": "#22C55E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#22C55E", "content": "3", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600" }] }, + { "type": "frame", "width": 48, "height": 56, "fill": "#22C55E1A", "cornerRadius": 10, "stroke": { "thickness": 2, "fill": "#22C55E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#22C55E", "content": "4", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600" }] }, + { "type": "frame", "width": 48, "height": 56, "fill": "#22C55E1A", "cornerRadius": 10, "stroke": { "thickness": 2, "fill": "#22C55E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#22C55E", "content": "5", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600" }] }, + { "type": "frame", "width": 48, "height": 56, "fill": "#22C55E1A", "cornerRadius": 10, "stroke": { "thickness": 2, "fill": "#22C55E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#22C55E", "content": "6", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600" }] } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": 4, + "fill": "#1A1A1D", + "cornerRadius": 2, + "children": [ + { "type": "frame", "width": "70%", "height": "fill_container", "fill": "#22C55E", "cornerRadius": 2 } + ] + } + ] + } + ] + } + ] +} diff --git a/pencil-design/src/pages/auth/workflow/password-reset.pen b/pencil-design/src/pages/auth/workflow/password-reset.pen new file mode 100644 index 00000000..8d25adfe --- /dev/null +++ b/pencil-design/src/pages/auth/workflow/password-reset.pen @@ -0,0 +1,254 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "PasswordReset", + "name": "Password Reset - Desktop", + "width": 1440, + "height": 900, + "fill": "#0A0A0B", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 460, + "fill": "#111113", + "cornerRadius": 24, + "stroke": { "thickness": 1, "fill": "#1F1F23" }, + "layout": "vertical", + "gap": 28, + "padding": 48, + "children": [ + { + "type": "frame", + "gap": 6, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 16, "height": 16, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "#8B8B90" }, + { "type": "text", "fill": "#8B8B90", "content": "Quay lại đăng nhập", "fontFamily": "Roboto", "fontSize": 13 } + ] + }, + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 72, + "height": 72, + "fill": "#3B82F61A", + "cornerRadius": 36, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 32, "height": 32, "iconFontName": "lock", "iconFontFamily": "lucide", "fill": "#3B82F6" } + ] + }, + { "type": "text", "fill": "#FFFFFF", "content": "Đặt lại mật khẩu", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }, + { "type": "text", "fill": "#8B8B90", "content": "Tạo mật khẩu mới cho tài khoản của bạn", "fontFamily": "Roboto", "fontSize": 14 } + ] + }, + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 20, + "children": [ + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { "type": "text", "fill": "#ADADB0", "content": "Mật khẩu mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, + { + "type": "frame", + "width": "fill_container", + "height": 50, + "fill": "#1A1A1D", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "#2A2A2E" }, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "gap": 10, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "lock", "iconFontFamily": "lucide", "fill": "#6B6B70" }, + { "type": "text", "fill": "#6B6B70", "content": "Tối thiểu 8 ký tự", "fontFamily": "Roboto", "fontSize": 14 } + ] + }, + { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "eye-off", "iconFontFamily": "lucide", "fill": "#6B6B70" } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { "type": "text", "fill": "#ADADB0", "content": "Xác nhận mật khẩu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, + { + "type": "frame", + "width": "fill_container", + "height": 50, + "fill": "#1A1A1D", + "cornerRadius": 10, + "stroke": { "thickness": 1, "fill": "#2A2A2E" }, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "gap": 10, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "lock", "iconFontFamily": "lucide", "fill": "#6B6B70" }, + { "type": "text", "fill": "#6B6B70", "content": "Nhập lại mật khẩu", "fontFamily": "Roboto", "fontSize": 14 } + ] + }, + { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "eye-off", "iconFontFamily": "lucide", "fill": "#6B6B70" } + ] + } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "fill": "#1A1A1D", + "cornerRadius": 10, + "padding": 16, + "layout": "vertical", + "gap": 10, + "children": [ + { "type": "text", "fill": "#ADADB0", "content": "Yêu cầu mật khẩu:", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500" }, + { + "type": "frame", + "gap": 8, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 14, "height": 14, "iconFontName": "circle", "iconFontFamily": "lucide", "fill": "#6B6B70" }, + { "type": "text", "fill": "#8B8B90", "content": "Tối thiểu 8 ký tự", "fontFamily": "Roboto", "fontSize": 12 } + ] + }, + { + "type": "frame", + "gap": 8, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 14, "height": 14, "iconFontName": "circle", "iconFontFamily": "lucide", "fill": "#6B6B70" }, + { "type": "text", "fill": "#8B8B90", "content": "Chữ hoa (A-Z) và chữ thường (a-z)", "fontFamily": "Roboto", "fontSize": 12 } + ] + }, + { + "type": "frame", + "gap": 8, + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 14, "height": 14, "iconFontName": "circle", "iconFontFamily": "lucide", "fill": "#6B6B70" }, + { "type": "text", "fill": "#8B8B90", "content": "Số (0-9) và ký tự đặc biệt", "fontFamily": "Roboto", "fontSize": 12 } + ] + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": 50, + "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#FFFFFF", "content": "Đặt lại mật khẩu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600" } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "PasswordResetSuccess", + "name": "Password Reset - Success", + "x": 1540, + "width": 1440, + "height": 900, + "fill": "#0A0A0B", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 440, + "fill": "#111113", + "cornerRadius": 24, + "stroke": { "thickness": 1, "fill": "#1F1F23" }, + "layout": "vertical", + "gap": 28, + "padding": 48, + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 88, + "height": 88, + "fill": "#22C55E1A", + "cornerRadius": 44, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 40, "height": 40, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E" } + ] + }, + { + "type": "frame", + "layout": "vertical", + "gap": 12, + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#FFFFFF", "content": "Đặt lại thành công!", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }, + { + "type": "text", + "fill": "#8B8B90", + "textGrowth": "fixed-width", + "width": 300, + "content": "Mật khẩu của bạn đã được cập nhật. Bạn có thể đăng nhập với mật khẩu mới.", + "lineHeight": 1.5, + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": 50, + "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#FFFFFF", "content": "Đăng nhập ngay", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600" } + ] + } + ] + } + ] + } + ] +} diff --git a/pencil-design/src/pages/auth/workflow/two-factor-auth.pen b/pencil-design/src/pages/auth/workflow/two-factor-auth.pen new file mode 100644 index 00000000..4c01ffef --- /dev/null +++ b/pencil-design/src/pages/auth/workflow/two-factor-auth.pen @@ -0,0 +1,105 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "TwoFactorAuth", + "name": "2FA Authenticator - Desktop", + "width": 1440, + "height": 900, + "fill": "#0A0A0B", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 440, + "fill": "#111113", + "cornerRadius": 24, + "stroke": { "thickness": 1, "fill": "#1F1F23" }, + "layout": "vertical", + "gap": 28, + "padding": 48, + "children": [ + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + { + "type": "frame", + "width": 72, + "height": 72, + "fill": "#3B82F61A", + "cornerRadius": 36, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "icon_font", "width": 32, "height": 32, "iconFontName": "shield-check", "iconFontFamily": "lucide", "fill": "#3B82F6" } + ] + }, + { "type": "text", "fill": "#FFFFFF", "content": "Xác thực 2 lớp", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }, + { + "type": "text", + "fill": "#8B8B90", + "textGrowth": "fixed-width", + "width": 320, + "content": "Nhập mã 6 số từ ứng dụng Google Authenticator hoặc Authy", + "lineHeight": 1.5, + "textAlign": "center", + "fontFamily": "Roboto", + "fontSize": 14 + } + ] + }, + { + "type": "frame", + "width": "fill_container", + "justifyContent": "center", + "gap": 10, + "children": [ + { "type": "frame", "width": 52, "height": 60, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#3B82F6" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#FFFFFF", "content": "4", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }] }, + { "type": "frame", "width": 52, "height": 60, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#3B82F6" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#FFFFFF", "content": "7", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }] }, + { "type": "frame", "width": 52, "height": 60, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#3B82F6" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#FFFFFF", "content": "2", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }] }, + { "type": "frame", "width": 52, "height": 60, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#2A2A2E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#6B6B70", "content": "•", "fontFamily": "Roboto", "fontSize": 24 }] }, + { "type": "frame", "width": 52, "height": 60, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#2A2A2E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#6B6B70", "content": "•", "fontFamily": "Roboto", "fontSize": 24 }] }, + { "type": "frame", "width": 52, "height": 60, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#2A2A2E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#6B6B70", "content": "•", "fontFamily": "Roboto", "fontSize": 24 }] } + ] + }, + { + "type": "frame", + "width": "fill_container", + "height": 50, + "fill": "#3B82F6", + "cornerRadius": 10, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { "type": "text", "fill": "#FFFFFF", "content": "Xác nhận", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600" } + ] + }, + { + "type": "frame", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "gap": 4, + "children": [ + { "type": "text", "fill": "#8B8B90", "content": "Không thể truy cập authenticator?", "fontFamily": "Roboto", "fontSize": 13 }, + { "type": "text", "fill": "#3B82F6", "content": "Dùng backup code", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500" } + ] + } + ] + } + ] + } + ] + } + ] +} diff --git a/pencil-design/src/pages/tPOS/pos/cafe.pen b/pencil-design/src/pages/tPOS/pos/cafe/desktop.pen similarity index 100% rename from pencil-design/src/pages/tPOS/pos/cafe.pen rename to pencil-design/src/pages/tPOS/pos/cafe/desktop.pen diff --git a/pencil-design/src/pages/tPOS/pos/cafe/mobile.pen b/pencil-design/src/pages/tPOS/pos/cafe/mobile.pen new file mode 100644 index 00000000..1dac536b --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/cafe/mobile.pen @@ -0,0 +1,123 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "POSCafeMobile", + "name": "POS Cafe Mobile", + "reusable": true, + "width": 390, + "height": 844, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "CafeMobHeader", + "width": "fill_container", + "height": 56, + "fill": "$bg-elevated", + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "CafeMobLogo", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "CafeMobLogoIcon", "width": 32, "height": 32, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CafeMobLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]}, + {"type": "text", "id": "CafeMobStoreName", "fill": "$text-primary", "content": "GoodGo Café", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "CafeMobCartBtn", "width": 44, "height": 44, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "CafeMobCartIcon", "width": 22, "height": 22, "iconFontName": "shopping-cart", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "frame", "id": "CafeMobCartBadge", "width": 18, "height": 18, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "position": "absolute", "top": -4, "right": -4, "children": [{"type": "text", "id": "CafeMobCartBadgeText", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}]} + ]} + ] + }, + { + "type": "frame", + "id": "CafeMobSearch", + "width": "fill_container", + "padding": [12, 16], + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "children": [ + {"type": "frame", "id": "CafeMobSearchBox", "width": "fill_container", "height": 44, "fill": "$bg-surface", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "CafeMobSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "CafeMobSearchText", "fill": "$text-tertiary", "content": "Tìm món...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"} + ]} + ] + }, + { + "type": "frame", + "id": "CafeMobCategories", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "padding": [10, 16], + "gap": 8, + "children": [ + {"type": "frame", "id": "CafeMobCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "CafeMobCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "frame", "id": "CafeMobCatCoffee", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "CafeMobCatCoffeeText", "fill": "$text-secondary", "content": "Cà phê", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "frame", "id": "CafeMobCatTea", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "CafeMobCatTeaText", "fill": "$text-secondary", "content": "Trà", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "frame", "id": "CafeMobCatSnack", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "CafeMobCatSnackText", "fill": "$text-secondary", "content": "Bánh", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} + ] + }, + { + "type": "frame", + "id": "CafeMobProducts", + "width": "fill_container", + "height": "fill_container", + "padding": 12, + "layout": "vertical", + "gap": 12, + "clip": true, + "children": [ + {"type": "frame", "id": "CafeMobProdRow1", "width": "fill_container", "gap": 12, "children": [ + {"type": "frame", "id": "CafeMobProd1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeMobProd1Img", "width": "fill_container", "height": 100, "fill": "#8B4513"}, {"type": "frame", "id": "CafeMobProd1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeMobProd1Name", "fill": "$text-primary", "content": "Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "CafeMobProd1Price", "fill": "$orange-primary", "content": "29,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "CafeMobProd2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeMobProd2Img", "width": "fill_container", "height": 100, "fill": "#654321"}, {"type": "frame", "id": "CafeMobProd2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeMobProd2Name", "fill": "$text-primary", "content": "Bạc Xỉu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "CafeMobProd2Price", "fill": "$orange-primary", "content": "32,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]} + ]}, + {"type": "frame", "id": "CafeMobProdRow2", "width": "fill_container", "gap": 12, "children": [ + {"type": "frame", "id": "CafeMobProd3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeMobProd3Img", "width": "fill_container", "height": 100, "fill": "#FFA500"}, {"type": "frame", "id": "CafeMobProd3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeMobProd3Name", "fill": "$text-primary", "content": "Trà Đào", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "CafeMobProd3Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "CafeMobProd4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeMobProd4Img", "width": "fill_container", "height": 100, "fill": "#90EE90"}, {"type": "frame", "id": "CafeMobProd4Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeMobProd4Name", "fill": "$text-primary", "content": "Matcha Latte", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "CafeMobProd4Price", "fill": "$orange-primary", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]} + ]}, + {"type": "frame", "id": "CafeMobProdRow3", "width": "fill_container", "gap": 12, "children": [ + {"type": "frame", "id": "CafeMobProd5", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeMobProd5Img", "width": "fill_container", "height": 100, "fill": "#D2691E"}, {"type": "frame", "id": "CafeMobProd5Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeMobProd5Name", "fill": "$text-primary", "content": "Bánh Mì", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "CafeMobProd5Price", "fill": "$orange-primary", "content": "25,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "CafeMobProd6", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeMobProd6Img", "width": "fill_container", "height": 100, "fill": "#FFD700"}, {"type": "frame", "id": "CafeMobProd6Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeMobProd6Name", "fill": "$text-primary", "content": "Croissant", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "CafeMobProd6Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]} + ]} + ] + }, + { + "type": "frame", + "id": "CafeMobBottomBar", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, + "padding": [12, 16], + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "CafeMobCartSummary", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "CafeMobCartItems", "fill": "$text-secondary", "content": "3 món", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, + {"type": "text", "id": "CafeMobCartTotal", "fill": "$text-primary", "content": "90,000₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "CafeMobPayBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "CafeMobPayIcon", "width": 20, "height": 20, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "CafeMobPayText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "bg-surface": {"type": "color", "value": "#111113"}, + "border-default": {"type": "color", "value": "#2A2A2E"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/cafe/tablet.pen b/pencil-design/src/pages/tPOS/pos/cafe/tablet.pen new file mode 100644 index 00000000..f187ff62 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/cafe/tablet.pen @@ -0,0 +1,126 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "POSCafeTablet", + "name": "POS Cafe Tablet", + "reusable": true, + "width": 1024, + "height": 768, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "CafeTabHeader", + "width": "fill_container", + "height": 56, + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "CafeTabLogo", "gap": 10, "alignItems": "center", "children": [ + {"type": "frame", "id": "CafeTabLogoIcon", "width": 36, "height": 36, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CafeTabLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, + {"type": "text", "id": "CafeTabStoreName", "fill": "$text-primary", "content": "GoodGo Café", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "CafeTabSearch", "width": 280, "height": 40, "fill": "$bg-surface", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 12], "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "CafeTabSearchIcon", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "CafeTabSearchText", "fill": "$text-tertiary", "content": "Tìm món...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "CafeTabRight", "gap": 12, "alignItems": "center", "children": [ + {"type": "text", "id": "CafeTabTime", "fill": "$text-primary", "content": "23:48", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "frame", "id": "CafeTabAvatar", "width": 36, "height": 36, "fill": "#22C55E30", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CafeTabAvatarText", "fill": "#22C55E", "content": "M", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} + ]} + ] + }, + { + "type": "frame", + "id": "CafeTabCategories", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "padding": [10, 16], + "gap": 8, + "children": [ + {"type": "frame", "id": "CafeTabCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "CafeTabCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, + {"type": "frame", "id": "CafeTabCatCoffee", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "CafeTabCatCoffeeText", "fill": "$text-secondary", "content": "Cà phê", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "CafeTabCatTea", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "CafeTabCatTeaText", "fill": "$text-secondary", "content": "Trà", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "CafeTabCatSnack", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "CafeTabCatSnackText", "fill": "$text-secondary", "content": "Bánh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} + ] + }, + { + "type": "frame", + "id": "CafeTabMain", + "width": "fill_container", + "height": "fill_container", + "children": [ + { + "type": "frame", + "id": "CafeTabProducts", + "width": "fill_container", + "height": "fill_container", + "padding": 16, + "layout": "vertical", + "gap": 12, + "clip": true, + "children": [ + {"type": "frame", "id": "CafeTabProdRow1", "width": "fill_container", "gap": 12, "children": [ + {"type": "frame", "id": "CafeTabProd1", "width": 150, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeTabProd1Img", "width": "fill_container", "height": 90, "fill": "#8B4513"}, {"type": "frame", "id": "CafeTabProd1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeTabProd1Name", "fill": "$text-primary", "content": "Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "CafeTabProd1Price", "fill": "$orange-primary", "content": "29,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "CafeTabProd2", "width": 150, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeTabProd2Img", "width": "fill_container", "height": 90, "fill": "#654321"}, {"type": "frame", "id": "CafeTabProd2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeTabProd2Name", "fill": "$text-primary", "content": "Bạc Xỉu", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "CafeTabProd2Price", "fill": "$orange-primary", "content": "32,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "CafeTabProd3", "width": 150, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeTabProd3Img", "width": "fill_container", "height": 90, "fill": "#FFA500"}, {"type": "frame", "id": "CafeTabProd3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeTabProd3Name", "fill": "$text-primary", "content": "Trà Đào", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "CafeTabProd3Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "CafeTabProd4", "width": 150, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeTabProd4Img", "width": "fill_container", "height": 90, "fill": "#90EE90"}, {"type": "frame", "id": "CafeTabProd4Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeTabProd4Name", "fill": "$text-primary", "content": "Matcha Latte", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "CafeTabProd4Price", "fill": "$orange-primary", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]} + ]}, + {"type": "frame", "id": "CafeTabProdRow2", "width": "fill_container", "gap": 12, "children": [ + {"type": "frame", "id": "CafeTabProd5", "width": 150, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeTabProd5Img", "width": "fill_container", "height": 90, "fill": "#D2691E"}, {"type": "frame", "id": "CafeTabProd5Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeTabProd5Name", "fill": "$text-primary", "content": "Bánh Mì Ốp La", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "CafeTabProd5Price", "fill": "$orange-primary", "content": "25,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "CafeTabProd6", "width": 150, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeTabProd6Img", "width": "fill_container", "height": 90, "fill": "#FFD700"}, {"type": "frame", "id": "CafeTabProd6Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeTabProd6Name", "fill": "$text-primary", "content": "Croissant", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "CafeTabProd6Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]} + ]} + ] + }, + { + "type": "frame", + "id": "CafeTabCart", + "width": 320, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, + "layout": "vertical", + "children": [ + {"type": "frame", "id": "CafeTabCartHeader", "width": "fill_container", "padding": [12, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "text", "id": "CafeTabCartTitle", "fill": "$text-primary", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, + {"type": "text", "id": "CafeTabCartCount", "fill": "$text-secondary", "content": "3 món", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "CafeTabCartItems", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ + {"type": "frame", "id": "CafeTabCartItem1", "width": "fill_container", "padding": [10, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "CafeTabCartItem1Left", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "CafeTabCartItem1Qty", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CafeTabCartItem1QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "text", "id": "CafeTabCartItem1Name", "fill": "$text-primary", "content": "Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "text", "id": "CafeTabCartItem1Price", "fill": "$text-primary", "content": "58,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, + {"type": "frame", "id": "CafeTabCartItem2", "width": "fill_container", "padding": [10, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "CafeTabCartItem2Left", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "CafeTabCartItem2Qty", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CafeTabCartItem2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "text", "id": "CafeTabCartItem2Name", "fill": "$text-primary", "content": "Bạc Xỉu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "text", "id": "CafeTabCartItem2Price", "fill": "$text-primary", "content": "32,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]} + ]}, + {"type": "frame", "id": "CafeTabCartSummary", "width": "fill_container", "fill": "$bg-surface", "layout": "vertical", "padding": 16, "gap": 8, "children": [ + {"type": "frame", "id": "CafeTabCartTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "CafeTabCartTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "CafeTabCartTotalValue", "fill": "$orange-primary", "content": "90,000₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]} + ]}, + {"type": "frame", "id": "CafeTabPayBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "CafeTabPayIcon", "width": 20, "height": 20, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "CafeTabPayText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ]} + ] + } + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "bg-surface": {"type": "color", "value": "#111113"}, + "border-default": {"type": "color", "value": "#2A2A2E"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/cafe/workflow/queue-display.pen b/pencil-design/src/pages/tPOS/pos/cafe/workflow/queue-display.pen new file mode 100644 index 00000000..c0d1735d --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/cafe/workflow/queue-display.pen @@ -0,0 +1,102 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "CafeQueueDisplay", + "name": "Cafe/Queue Display", + "reusable": true, + "width": 1920, + "height": 1080, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "QueueHeader", + "width": "fill_container", + "height": 120, + "fill": "$bg-elevated", + "padding": [0, 60], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "QueueLogo", "gap": 20, "alignItems": "center", "children": [ + {"type": "frame", "id": "QueueLogoIcon", "width": 60, "height": 60, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "QueueLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}]}, + {"type": "text", "id": "QueueStoreName", "fill": "$text-primary", "content": "GOODGO CAFÉ", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "QueueTime", "gap": 16, "alignItems": "center", "children": [ + {"type": "text", "id": "QueueTimeValue", "fill": "$text-primary", "content": "00:05", "fontFamily": "Roboto", "fontSize": 48, "fontWeight": "700"}, + {"type": "text", "id": "QueueDate", "fill": "$text-secondary", "content": "06/02/2026", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "normal"} + ]} + ] + }, + { + "type": "frame", + "id": "QueueMain", + "width": "fill_container", + "height": "fill_container", + "padding": 60, + "gap": 60, + "children": [ + { + "type": "frame", + "id": "QueueNowServing", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 32, + "layout": "vertical", + "alignItems": "center", + "justifyContent": "center", + "gap": 24, + "children": [ + {"type": "text", "id": "QueueNowLabel", "fill": "$text-secondary", "content": "ĐANG PHỤC VỤ", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "600"}, + {"type": "frame", "id": "QueueNowNumbers", "gap": 40, "alignItems": "center", "children": [ + {"type": "frame", "id": "QueueNow1", "width": 180, "height": 180, "fill": "#22C55E", "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "QueueNow1Text", "fill": "$text-primary", "content": "042", "fontFamily": "Roboto", "fontSize": 72, "fontWeight": "700"}]}, + {"type": "frame", "id": "QueueNow2", "width": 180, "height": 180, "fill": "#22C55E", "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "QueueNow2Text", "fill": "$text-primary", "content": "043", "fontFamily": "Roboto", "fontSize": 72, "fontWeight": "700"}]}, + {"type": "frame", "id": "QueueNow3", "width": 180, "height": 180, "fill": "#22C55E", "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "QueueNow3Text", "fill": "$text-primary", "content": "044", "fontFamily": "Roboto", "fontSize": 72, "fontWeight": "700"}]} + ]}, + {"type": "text", "id": "QueueNowHint", "fill": "$text-tertiary", "content": "Vui lòng đến quầy nhận đồ", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "normal"} + ] + }, + { + "type": "frame", + "id": "QueuePreparing", + "width": 480, + "height": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 32, + "layout": "vertical", + "clip": true, + "children": [ + {"type": "frame", "id": "QueuePrepHeader", "width": "fill_container", "padding": [24, 32], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ + {"type": "text", "id": "QueuePrepTitle", "fill": "#F59E0B", "content": "ĐANG PHA CHẾ", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "QueuePrepList", "width": "fill_container", "height": "fill_container", "padding": 32, "layout": "vertical", "gap": 20, "children": [ + {"type": "frame", "id": "QueuePrep1", "width": "fill_container", "fill": "#F59E0B20", "cornerRadius": 16, "padding": [16, 24], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "QueuePrep1Num", "fill": "#F59E0B", "content": "#045", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "QueuePrep1Items", "fill": "$text-secondary", "content": "2 món", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "normal"}]}, + {"type": "frame", "id": "QueuePrep2", "width": "fill_container", "fill": "#F59E0B20", "cornerRadius": 16, "padding": [16, 24], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "QueuePrep2Num", "fill": "#F59E0B", "content": "#046", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "QueuePrep2Items", "fill": "$text-secondary", "content": "1 món", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "normal"}]}, + {"type": "frame", "id": "QueuePrep3", "width": "fill_container", "fill": "#F59E0B20", "cornerRadius": 16, "padding": [16, 24], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "QueuePrep3Num", "fill": "#F59E0B", "content": "#047", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "QueuePrep3Items", "fill": "$text-secondary", "content": "3 món", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "normal"}]}, + {"type": "frame", "id": "QueuePrep4", "width": "fill_container", "fill": "#F59E0B20", "cornerRadius": 16, "padding": [16, 24], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "QueuePrep4Num", "fill": "#F59E0B", "content": "#048", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "QueuePrep4Items", "fill": "$text-secondary", "content": "2 món", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "normal"}]}, + {"type": "frame", "id": "QueuePrep5", "width": "fill_container", "fill": "#F59E0B20", "cornerRadius": 16, "padding": [16, 24], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "QueuePrep5Num", "fill": "#F59E0B", "content": "#049", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "QueuePrep5Items", "fill": "$text-secondary", "content": "1 món", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "normal"}]} + ]} + ] + } + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "border-default": {"type": "color", "value": "#2A2A2E"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/karaoke.pen b/pencil-design/src/pages/tPOS/pos/karaoke/desktop.pen similarity index 100% rename from pencil-design/src/pages/tPOS/pos/karaoke.pen rename to pencil-design/src/pages/tPOS/pos/karaoke/desktop.pen diff --git a/pencil-design/src/pages/tPOS/pos/karaoke/mobile.pen b/pencil-design/src/pages/tPOS/pos/karaoke/mobile.pen new file mode 100644 index 00000000..c88daf12 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/karaoke/mobile.pen @@ -0,0 +1,132 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "POSKaraokeMobile", + "name": "POS Karaoke Mobile", + "reusable": true, + "width": 390, + "height": 844, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "KarMobHeader", + "width": "fill_container", + "height": 56, + "fill": "$bg-elevated", + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "KarMobLeft", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "KarMobRoomBadge", "fill": "#8B5CF6", "cornerRadius": 8, "padding": [6, 10], "children": [{"type": "text", "id": "KarMobRoomText", "fill": "$text-primary", "content": "VIP 01", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, + {"type": "frame", "id": "KarMobTimer", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "gap": 4, "alignItems": "center", "children": [{"type": "icon_font", "id": "KarMobTimerIcon", "width": 12, "height": 12, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "KarMobTimerText", "fill": "#22C55E", "content": "01:45", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} + ]}, + {"type": "frame", "id": "KarMobRight", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "KarMobExtendBtn", "width": 40, "height": 40, "fill": "#F59E0B", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KarMobExtendIcon", "width": 20, "height": 20, "iconFontName": "plus-circle", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, + {"type": "frame", "id": "KarMobCartBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "KarMobCartIcon", "width": 20, "height": 20, "iconFontName": "shopping-cart", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "frame", "id": "KarMobCartBadge", "width": 18, "height": 18, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "position": "absolute", "top": -4, "right": -4, "children": [{"type": "text", "id": "KarMobCartBadgeText", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}]} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "KarMobSearch", + "width": "fill_container", + "padding": [12, 16], + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "children": [ + {"type": "frame", "id": "KarMobSearchBox", "width": "fill_container", "height": 44, "fill": "$bg-surface", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "KarMobSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "KarMobSearchText", "fill": "$text-tertiary", "content": "Tìm đồ uống, snack...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"} + ]} + ] + }, + { + "type": "frame", + "id": "KarMobCategories", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "padding": [10, 16], + "gap": 8, + "children": [ + {"type": "frame", "id": "KarMobCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "KarMobCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "frame", "id": "KarMobCatBeer", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "KarMobCatBeerText", "fill": "$text-secondary", "content": "Bia", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "frame", "id": "KarMobCatSoft", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "KarMobCatSoftText", "fill": "$text-secondary", "content": "Nước", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "frame", "id": "KarMobCatSnack", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "KarMobCatSnackText", "fill": "$text-secondary", "content": "Snack", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} + ] + }, + { + "type": "frame", + "id": "KarMobProducts", + "width": "fill_container", + "height": "fill_container", + "padding": 12, + "layout": "vertical", + "gap": 12, + "clip": true, + "children": [ + {"type": "frame", "id": "KarMobProdRow1", "width": "fill_container", "gap": 12, "children": [ + {"type": "frame", "id": "KarMobProd1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KarMobProd1Img", "width": "fill_container", "height": 100, "fill": "#F59E0B30"}, {"type": "frame", "id": "KarMobProd1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "KarMobProd1Name", "fill": "$text-primary", "content": "Heineken", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "KarMobProd1Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "KarMobProd2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KarMobProd2Img", "width": "fill_container", "height": 100, "fill": "#EF444430"}, {"type": "frame", "id": "KarMobProd2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "KarMobProd2Name", "fill": "$text-primary", "content": "Coca Cola", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "KarMobProd2Price", "fill": "$orange-primary", "content": "20,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]} + ]}, + {"type": "frame", "id": "KarMobProdRow2", "width": "fill_container", "gap": 12, "children": [ + {"type": "frame", "id": "KarMobProd3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KarMobProd3Img", "width": "fill_container", "height": 100, "fill": "#22C55E30"}, {"type": "frame", "id": "KarMobProd3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "KarMobProd3Name", "fill": "$text-primary", "content": "Trái cây tổng hợp", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "KarMobProd3Price", "fill": "$orange-primary", "content": "120,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "KarMobProd4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KarMobProd4Img", "width": "fill_container", "height": 100, "fill": "#8B5CF630"}, {"type": "frame", "id": "KarMobProd4Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "KarMobProd4Name", "fill": "$text-primary", "content": "Combo VIP", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "KarMobProd4Price", "fill": "$orange-primary", "content": "599,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]} + ]}, + {"type": "frame", "id": "KarMobProdRow3", "width": "fill_container", "gap": 12, "children": [ + {"type": "frame", "id": "KarMobProd5", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KarMobProd5Img", "width": "fill_container", "height": 100, "fill": "#F59E0B30"}, {"type": "frame", "id": "KarMobProd5Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "KarMobProd5Name", "fill": "$text-primary", "content": "Tiger", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "KarMobProd5Price", "fill": "$orange-primary", "content": "30,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "KarMobProd6", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KarMobProd6Img", "width": "fill_container", "height": 100, "fill": "#3B82F630"}, {"type": "frame", "id": "KarMobProd6Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "KarMobProd6Name", "fill": "$text-primary", "content": "Snack tổng hợp", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "KarMobProd6Price", "fill": "$orange-primary", "content": "85,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]} + ]} + ] + }, + { + "type": "frame", + "id": "KarMobBottomBar", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, + "padding": [12, 16], + "layout": "vertical", + "gap": 8, + "children": [ + {"type": "frame", "id": "KarMobBillSplit", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "frame", "id": "KarMobRoomFee", "gap": 4, "alignItems": "center", "children": [{"type": "icon_font", "id": "KarMobRoomIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, {"type": "text", "id": "KarMobRoomLabel", "fill": "$text-secondary", "content": "Phòng 1.8h:", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, {"type": "text", "id": "KarMobRoomValue", "fill": "#8B5CF6", "content": "270K", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "frame", "id": "KarMobFoodFee", "gap": 4, "alignItems": "center", "children": [{"type": "text", "id": "KarMobFoodLabel", "fill": "$text-secondary", "content": "Đồ uống:", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, {"type": "text", "id": "KarMobFoodValue", "fill": "$text-primary", "content": "290K", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} + ]}, + {"type": "frame", "id": "KarMobPayRow", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "KarMobTotal", "layout": "vertical", "gap": 0, "children": [ + {"type": "text", "id": "KarMobTotalLabel", "fill": "$text-secondary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, + {"type": "text", "id": "KarMobTotalValue", "fill": "$text-primary", "content": "560,000₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "KarMobPayBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "KarMobPayIcon", "width": 20, "height": 20, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "KarMobPayText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ]} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "bg-surface": {"type": "color", "value": "#111113"}, + "border-default": {"type": "color", "value": "#2A2A2E"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/karaoke/tablet.pen b/pencil-design/src/pages/tPOS/pos/karaoke/tablet.pen new file mode 100644 index 00000000..8d8894eb --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/karaoke/tablet.pen @@ -0,0 +1,127 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "POSKaraokeTablet", + "name": "POS Karaoke Tablet", + "reusable": true, + "width": 1024, + "height": 768, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "KarTabHeader", + "width": "fill_container", + "height": 56, + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "KarTabLeft", "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "KarTabLogoIcon", "width": 36, "height": 36, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KarTabLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, + {"type": "frame", "id": "KarTabRoomBadge", "fill": "#8B5CF6", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "KarTabRoomText", "fill": "$text-primary", "content": "Phòng VIP 01", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, + {"type": "frame", "id": "KarTabTimer", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [6, 12], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "KarTabTimerIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "KarTabTimerText", "fill": "#22C55E", "content": "01:45:30", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} + ]}, + {"type": "frame", "id": "KarTabSearch", "width": 220, "height": 40, "fill": "$bg-surface", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 12], "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "KarTabSearchIcon", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "KarTabSearchText", "fill": "$text-tertiary", "content": "Tìm món...", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "KarTabRight", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "KarTabExtendBtn", "height": 36, "fill": "#F59E0B", "cornerRadius": 8, "padding": [0, 12], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "KarTabExtendIcon", "width": 16, "height": 16, "iconFontName": "plus-circle", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "KarTabExtendText", "fill": "$text-primary", "content": "Gia hạn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, + {"type": "text", "id": "KarTabTime", "fill": "$text-primary", "content": "23:48", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + }, + { + "type": "frame", + "id": "KarTabCategories", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "padding": [10, 16], + "gap": 8, + "children": [ + {"type": "frame", "id": "KarTabCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "KarTabCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, + {"type": "frame", "id": "KarTabCatBeer", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "KarTabCatBeerText", "fill": "$text-secondary", "content": "Bia", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "KarTabCatSoft", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "KarTabCatSoftText", "fill": "$text-secondary", "content": "Nước ngọt", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "KarTabCatSnack", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "KarTabCatSnackText", "fill": "$text-secondary", "content": "Snack", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "KarTabCatCombo", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "KarTabCatComboText", "fill": "$text-secondary", "content": "Combo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} + ] + }, + { + "type": "frame", + "id": "KarTabMain", + "width": "fill_container", + "height": "fill_container", + "children": [ + { + "type": "frame", + "id": "KarTabProducts", + "width": "fill_container", + "height": "fill_container", + "padding": 16, + "layout": "vertical", + "gap": 12, + "clip": true, + "children": [ + {"type": "frame", "id": "KarTabProdRow1", "width": "fill_container", "gap": 12, "children": [ + {"type": "frame", "id": "KarTabProd1", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KarTabProd1Img", "width": "fill_container", "height": 85, "fill": "#F59E0B30"}, {"type": "frame", "id": "KarTabProd1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "KarTabProd1Name", "fill": "$text-primary", "content": "Heineken", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "KarTabProd1Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "KarTabProd2", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KarTabProd2Img", "width": "fill_container", "height": 85, "fill": "#EF444430"}, {"type": "frame", "id": "KarTabProd2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "KarTabProd2Name", "fill": "$text-primary", "content": "Coca Cola", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "KarTabProd2Price", "fill": "$orange-primary", "content": "20,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "KarTabProd3", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KarTabProd3Img", "width": "fill_container", "height": 85, "fill": "#22C55E30"}, {"type": "frame", "id": "KarTabProd3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "KarTabProd3Name", "fill": "$text-primary", "content": "Trái cây", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "KarTabProd3Price", "fill": "$orange-primary", "content": "120,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "KarTabProd4", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KarTabProd4Img", "width": "fill_container", "height": 85, "fill": "#8B5CF630"}, {"type": "frame", "id": "KarTabProd4Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "KarTabProd4Name", "fill": "$text-primary", "content": "Combo VIP", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "KarTabProd4Price", "fill": "$orange-primary", "content": "599,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]} + ]} + ] + }, + { + "type": "frame", + "id": "KarTabCart", + "width": 300, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, + "layout": "vertical", + "children": [ + {"type": "frame", "id": "KarTabCartHeader", "width": "fill_container", "padding": [12, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "text", "id": "KarTabCartTitle", "fill": "$text-primary", "content": "Phòng VIP 01", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "KarTabCartItems", "fill": "$text-secondary", "content": "5 món", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "KarTabCartItems2", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ + {"type": "frame", "id": "KarTabRoomFee", "width": "fill_container", "padding": [10, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "fill": "#8B5CF610", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KarTabRoomFeeLeft", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "KarTabRoomFeeIcon", "width": 16, "height": 16, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, {"type": "text", "id": "KarTabRoomFeeName", "fill": "$text-primary", "content": "Giờ phòng VIP", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "text", "id": "KarTabRoomFeePrice", "fill": "#8B5CF6", "content": "270,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "frame", "id": "KarTabCartItem1", "width": "fill_container", "padding": [10, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KarTabCartItem1Left", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "KarTabCartItem1Qty", "width": 26, "height": 26, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KarTabCartItem1QtyText", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, {"type": "text", "id": "KarTabCartItem1Name", "fill": "$text-primary", "content": "Heineken", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "text", "id": "KarTabCartItem1Price", "fill": "$text-primary", "content": "210,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "frame", "id": "KarTabCartItem2", "width": "fill_container", "padding": [10, 16], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KarTabCartItem2Left", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "KarTabCartItem2Qty", "width": 26, "height": 26, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KarTabCartItem2QtyText", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, {"type": "text", "id": "KarTabCartItem2Name", "fill": "$text-primary", "content": "Coca Cola", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "text", "id": "KarTabCartItem2Price", "fill": "$text-primary", "content": "80,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} + ]}, + {"type": "frame", "id": "KarTabCartSummary", "width": "fill_container", "fill": "$bg-surface", "layout": "vertical", "padding": 14, "gap": 6, "children": [ + {"type": "frame", "id": "KarTabCartRoom", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KarTabCartRoomLabel", "fill": "$text-secondary", "content": "Tiền phòng (1.8h)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, {"type": "text", "id": "KarTabCartRoomValue", "fill": "#8B5CF6", "content": "270,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "frame", "id": "KarTabCartFood", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KarTabCartFoodLabel", "fill": "$text-secondary", "content": "Đồ ăn/uống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, {"type": "text", "id": "KarTabCartFoodValue", "fill": "$text-primary", "content": "290,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "frame", "id": "KarTabCartTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KarTabCartTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "text", "id": "KarTabCartTotalValue", "fill": "$orange-primary", "content": "560,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]} + ]}, + {"type": "frame", "id": "KarTabPayBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "KarTabPayIcon", "width": 18, "height": 18, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "KarTabPayText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + } + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "bg-surface": {"type": "color", "value": "#111113"}, + "border-default": {"type": "color", "value": "#2A2A2E"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-map.pen b/pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-map.pen new file mode 100644 index 00000000..b99b75c5 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-map.pen @@ -0,0 +1,130 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "KaraokeRoomMap", + "name": "Karaoke/Room Map", + "reusable": true, + "width": 1024, + "height": 768, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "RoomMapHeader", + "width": "fill_container", + "height": 64, + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "padding": [0, 24], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "RoomMapLeft", "gap": 16, "alignItems": "center", "children": [ + {"type": "frame", "id": "RoomMapLogo", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RoomMapLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}]}, + {"type": "text", "id": "RoomMapTitle", "fill": "$text-primary", "content": "Sơ đồ phòng", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "RoomMapLegend", "gap": 20, "alignItems": "center", "children": [ + {"type": "frame", "id": "LegendEmpty", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "LegendEmptyDot", "width": 16, "height": 16, "fill": "#22C55E", "cornerRadius": 4}, {"type": "text", "id": "LegendEmptyText", "fill": "$text-secondary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, + {"type": "frame", "id": "LegendActive", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "LegendActiveDot", "width": 16, "height": 16, "fill": "#8B5CF6", "cornerRadius": 4}, {"type": "text", "id": "LegendActiveText", "fill": "$text-secondary", "content": "Đang hát", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, + {"type": "frame", "id": "LegendWarning", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "LegendWarningDot", "width": 16, "height": 16, "fill": "#F59E0B", "cornerRadius": 4}, {"type": "text", "id": "LegendWarningText", "fill": "$text-secondary", "content": "Sắp hết giờ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]} + ]}, + {"type": "frame", "id": "RoomMapTime", "gap": 8, "alignItems": "center", "children": [ + {"type": "text", "id": "RoomMapTimeValue", "fill": "$text-primary", "content": "00:15", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} + ]} + ] + }, + { + "type": "frame", + "id": "RoomMapFloors", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "padding": [12, 24], + "gap": 8, + "children": [ + {"type": "frame", "id": "Floor1Tab", "fill": "$orange-primary", "cornerRadius": 8, "padding": [10, 20], "children": [{"type": "text", "id": "Floor1Text", "fill": "$text-primary", "content": "Tầng 1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, + {"type": "frame", "id": "Floor2Tab", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [10, 20], "children": [{"type": "text", "id": "Floor2Text", "fill": "$text-secondary", "content": "Tầng 2", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "FloorVIPTab", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [10, 20], "children": [{"type": "text", "id": "FloorVIPText", "fill": "$text-secondary", "content": "VIP", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} + ] + }, + { + "type": "frame", + "id": "RoomMapGrid", + "width": "fill_container", + "height": "fill_container", + "padding": 32, + "layout": "vertical", + "gap": 24, + "clip": true, + "children": [ + {"type": "frame", "id": "RoomRow1", "width": "fill_container", "gap": 24, "children": [ + {"type": "frame", "id": "Room01", "width": 180, "height": 150, "fill": "#8B5CF615", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Room01Label", "fill": "#8B5CF6", "content": "P.01", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, + {"type": "frame", "id": "Room01Timer", "fill": "#8B5CF630", "cornerRadius": 8, "padding": [6, 12], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "Room01TimerIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, {"type": "text", "id": "Room01TimerText", "fill": "#8B5CF6", "content": "1:45 còn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "text", "id": "Room01Price", "fill": "$text-tertiary", "content": "120K/h • Small", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "Room02", "width": 180, "height": 150, "fill": "#22C55E15", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#22C55E"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Room02Label", "fill": "#22C55E", "content": "P.02", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, + {"type": "text", "id": "Room02Status", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "Room02Price", "fill": "$text-tertiary", "content": "120K/h • Small", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "Room03", "width": 180, "height": 150, "fill": "#F59E0B15", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#F59E0B"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Room03Label", "fill": "#F59E0B", "content": "P.03", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, + {"type": "frame", "id": "Room03Timer", "fill": "#F59E0B30", "cornerRadius": 8, "padding": [6, 12], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "Room03TimerIcon", "width": 14, "height": 14, "iconFontName": "alarm-clock", "iconFontFamily": "lucide", "fill": "#F59E0B"}, {"type": "text", "id": "Room03TimerText", "fill": "#F59E0B", "content": "10p còn!", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "text", "id": "Room03Price", "fill": "$text-tertiary", "content": "180K/h • Medium", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "Room04", "width": 180, "height": 150, "fill": "#8B5CF615", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Room04Label", "fill": "$orange-primary", "content": "P.04", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, + {"type": "frame", "id": "Room04Selected", "fill": "$orange-primary", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "Room04SelectedText", "fill": "$text-primary", "content": "ĐANG CHỌN", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "text", "id": "Room04Price", "fill": "$text-tertiary", "content": "180K/h • Medium", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]} + ]}, + {"type": "frame", "id": "RoomRow2", "width": "fill_container", "gap": 24, "children": [ + {"type": "frame", "id": "Room05", "width": 180, "height": 150, "fill": "#8B5CF615", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Room05Label", "fill": "#8B5CF6", "content": "P.05", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, + {"type": "frame", "id": "Room05Timer", "fill": "#8B5CF630", "cornerRadius": 8, "padding": [6, 12], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "Room05TimerIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, {"type": "text", "id": "Room05TimerText", "fill": "#8B5CF6", "content": "2:30 còn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "text", "id": "Room05Price", "fill": "$text-tertiary", "content": "250K/h • Large", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "Room06", "width": 180, "height": 150, "fill": "#22C55E15", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#22C55E"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Room06Label", "fill": "#22C55E", "content": "P.06", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, + {"type": "text", "id": "Room06Status", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "Room06Price", "fill": "$text-tertiary", "content": "250K/h • Large", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "Room07", "width": 180, "height": 150, "fill": "#22C55E15", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#22C55E"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Room07Label", "fill": "#22C55E", "content": "VIP 01", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, + {"type": "text", "id": "Room07Status", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "Room07Price", "fill": "$text-tertiary", "content": "450K/h • VIP", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "Room08", "width": 180, "height": 150, "fill": "#8B5CF615", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "Room08Label", "fill": "#8B5CF6", "content": "VIP 02", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, + {"type": "frame", "id": "Room08Timer", "fill": "#8B5CF630", "cornerRadius": 8, "padding": [6, 12], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "Room08TimerIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, {"type": "text", "id": "Room08TimerText", "fill": "#8B5CF6", "content": "3:15 còn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "text", "id": "Room08Price", "fill": "$text-tertiary", "content": "450K/h • VIP", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]} + ]}, + {"type": "frame", "id": "RoomMapStats", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": [16, 24], "gap": 40, "justifyContent": "center", "children": [ + {"type": "frame", "id": "StatTotal", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [{"type": "text", "id": "StatTotalValue", "fill": "$text-primary", "content": "8", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "StatTotalLabel", "fill": "$text-tertiary", "content": "Tổng phòng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, + {"type": "frame", "id": "StatEmpty", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [{"type": "text", "id": "StatEmptyValue", "fill": "#22C55E", "content": "3", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "StatEmptyLabel", "fill": "$text-tertiary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, + {"type": "frame", "id": "StatActive", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [{"type": "text", "id": "StatActiveValue", "fill": "#8B5CF6", "content": "4", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "StatActiveLabel", "fill": "$text-tertiary", "content": "Đang hát", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, + {"type": "frame", "id": "StatWarning", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [{"type": "text", "id": "StatWarningValue", "fill": "#F59E0B", "content": "1", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "StatWarningLabel", "fill": "$text-tertiary", "content": "Sắp hết giờ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "border-default": {"type": "color", "value": "#2A2A2E"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-session.pen b/pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-session.pen new file mode 100644 index 00000000..128f2685 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-session.pen @@ -0,0 +1,131 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "KaraokeRoomSession", + "name": "Karaoke/Room Session", + "reusable": true, + "width": 480, + "height": 720, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "SessionHeader", + "width": "fill_container", + "padding": [20, 24], + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "SessionLeft", "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "SessionBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SessionBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]}, + {"type": "frame", "id": "SessionRoomInfo", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "SessionRoomName", "fill": "$text-primary", "content": "Phòng 03", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, + {"type": "text", "id": "SessionRoomType", "fill": "$text-tertiary", "content": "Medium • 180K/h", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} + ]} + ]}, + {"type": "frame", "id": "SessionStatus", "fill": "#8B5CF620", "cornerRadius": 8, "padding": [8, 14], "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "SessionStatusDot", "width": 10, "height": 10, "fill": "#8B5CF6", "cornerRadius": 100}, + {"type": "text", "id": "SessionStatusText", "fill": "#8B5CF6", "content": "Đang hát", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]} + ] + }, + { + "type": "frame", + "id": "SessionTimer", + "width": "fill_container", + "fill": "#8B5CF615", + "padding": 24, + "layout": "vertical", + "gap": 16, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "TimerDisplay", "gap": 8, "alignItems": "baseline", "children": [ + {"type": "text", "id": "TimerValue", "fill": "#8B5CF6", "content": "01:45:32", "fontFamily": "Roboto", "fontSize": 48, "fontWeight": "700"}, + {"type": "text", "id": "TimerTotal", "fill": "$text-tertiary", "content": "/ 2:00:00", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "TimerBar", "width": "fill_container", "height": 8, "fill": "$bg-interactive", "cornerRadius": 100, "children": [ + {"type": "frame", "id": "TimerBarFill", "width": "87%", "height": "fill_container", "fill": "#8B5CF6", "cornerRadius": 100} + ]}, + {"type": "frame", "id": "TimerInfo", "gap": 24, "children": [ + {"type": "frame", "id": "TimerStart", "layout": "vertical", "gap": 2, "alignItems": "center", "children": [{"type": "text", "id": "TimerStartLabel", "fill": "$text-tertiary", "content": "Bắt đầu", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "text", "id": "TimerStartValue", "fill": "$text-primary", "content": "22:30", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, + {"type": "frame", "id": "TimerEnd", "layout": "vertical", "gap": 2, "alignItems": "center", "children": [{"type": "text", "id": "TimerEndLabel", "fill": "$text-tertiary", "content": "Kết thúc", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "text", "id": "TimerEndValue", "fill": "$text-primary", "content": "00:30", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, + {"type": "frame", "id": "TimerGuests", "layout": "vertical", "gap": 2, "alignItems": "center", "children": [{"type": "text", "id": "TimerGuestsLabel", "fill": "$text-tertiary", "content": "Số khách", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "text", "id": "TimerGuestsValue", "fill": "$text-primary", "content": "6 người", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} + ]} + ] + }, + { + "type": "frame", + "id": "SessionBill", + "width": "fill_container", + "height": "fill_container", + "fill": "$bg-elevated", + "layout": "vertical", + "children": [ + {"type": "frame", "id": "BillHeader", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "text", "id": "BillTitle", "fill": "$text-primary", "content": "Chi tiết hóa đơn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "frame", "id": "BillAddBtn", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 14], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "BillAddIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "BillAddText", "fill": "$text-primary", "content": "Thêm đồ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]} + ]}, + {"type": "frame", "id": "BillItems", "width": "fill_container", "height": "fill_container", "padding": [12, 24], "layout": "vertical", "gap": 0, "children": [ + {"type": "frame", "id": "BillItem1", "width": "fill_container", "padding": [12, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "BillItem1Left", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "BillItem1Name", "fill": "$text-primary", "content": "⏱️ Tiền phòng (2h)", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "BillItem1Note", "fill": "$text-tertiary", "content": "Medium • 180K/h", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}, + {"type": "text", "id": "BillItem1Price", "fill": "$text-primary", "content": "360,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "BillItem2", "width": "fill_container", "padding": [12, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "BillItem2Left", "gap": 14, "alignItems": "center", "children": [{"type": "frame", "id": "BillItem2Qty", "gap": 8, "children": [{"type": "frame", "id": "BillItem2Minus", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "BillItem2MinusIcon", "width": 14, "height": 14, "iconFontName": "minus", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}, {"type": "text", "id": "BillItem2QtyText", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "BillItem2Plus", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "BillItem2PlusIcon", "width": 14, "height": 14, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}]}, {"type": "text", "id": "BillItem2Name", "fill": "$text-primary", "content": "Tiger lon", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, + {"type": "text", "id": "BillItem2Price", "fill": "$text-primary", "content": "210,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "BillItem3", "width": "fill_container", "padding": [12, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "BillItem3Left", "gap": 14, "alignItems": "center", "children": [{"type": "frame", "id": "BillItem3Qty", "gap": 8, "children": [{"type": "frame", "id": "BillItem3Minus", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "BillItem3MinusIcon", "width": 14, "height": 14, "iconFontName": "minus", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}, {"type": "text", "id": "BillItem3QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "BillItem3Plus", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "BillItem3PlusIcon", "width": 14, "height": 14, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}]}, {"type": "text", "id": "BillItem3Name", "fill": "$text-primary", "content": "Trái cây dĩa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, + {"type": "text", "id": "BillItem3Price", "fill": "$text-primary", "content": "100,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ]}, + {"type": "frame", "id": "BillSummary", "width": "fill_container", "fill": "$bg-surface", "padding": [14, 24], "layout": "vertical", "gap": 8, "children": [ + {"type": "frame", "id": "BillRoomTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "BillRoomLabel", "fill": "$text-secondary", "content": "Tiền phòng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, {"type": "text", "id": "BillRoomValue", "fill": "$text-primary", "content": "360,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "BillFBTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "BillFBLabel", "fill": "$text-secondary", "content": "Đồ uống/ăn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, {"type": "text", "id": "BillFBValue", "fill": "$text-primary", "content": "310,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "BillTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "BillTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "BillTotalValue", "fill": "$orange-primary", "content": "670,000₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]} + ]} + ] + }, + { + "type": "frame", + "id": "SessionFooter", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [16, 24], + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, + "gap": 12, + "children": [ + {"type": "frame", "id": "SessionExtendBtn", "width": "fill_container", "height": 48, "fill": "#8B5CF6", "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SessionExtendIcon", "width": 18, "height": 18, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "SessionExtendText", "fill": "$text-primary", "content": "Gia hạn", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "SessionCloseBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SessionCloseIcon", "width": 18, "height": 18, "iconFontName": "log-out", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "SessionCloseText", "fill": "$text-primary", "content": "Kết thúc & Thanh toán", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "bg-surface": {"type": "color", "value": "#111113"}, + "border-default": {"type": "color", "value": "#2A2A2E"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/restaurant.pen b/pencil-design/src/pages/tPOS/pos/restaurant/desktop.pen similarity index 100% rename from pencil-design/src/pages/tPOS/pos/restaurant.pen rename to pencil-design/src/pages/tPOS/pos/restaurant/desktop.pen diff --git a/pencil-design/src/pages/tPOS/pos/restaurant/mobile.pen b/pencil-design/src/pages/tPOS/pos/restaurant/mobile.pen new file mode 100644 index 00000000..4ad16980 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/restaurant/mobile.pen @@ -0,0 +1,128 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "POSRestaurantMobile", + "name": "POS Restaurant Mobile", + "reusable": true, + "width": 390, + "height": 844, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "RestMobHeader", + "width": "fill_container", + "height": 56, + "fill": "$bg-elevated", + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "RestMobLeft", "gap": 10, "alignItems": "center", "children": [ + {"type": "frame", "id": "RestMobTableBadge", "fill": "$orange-primary", "cornerRadius": 8, "padding": [6, 10], "children": [{"type": "text", "id": "RestMobTableText", "fill": "$text-primary", "content": "Bàn 01", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, + {"type": "text", "id": "RestMobGuestInfo", "fill": "$text-secondary", "content": "2 khách", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "RestMobRight", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "RestMobKitchenBtn", "width": 40, "height": 40, "fill": "#22C55E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "RestMobKitchenIcon", "width": 20, "height": 20, "iconFontName": "chef-hat", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, + {"type": "frame", "id": "RestMobCartBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "RestMobCartIcon", "width": 20, "height": 20, "iconFontName": "shopping-cart", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "frame", "id": "RestMobCartBadge", "width": 18, "height": 18, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "position": "absolute", "top": -4, "right": -4, "children": [{"type": "text", "id": "RestMobCartBadgeText", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}]} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "RestMobSearch", + "width": "fill_container", + "padding": [12, 16], + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "children": [ + {"type": "frame", "id": "RestMobSearchBox", "width": "fill_container", "height": 44, "fill": "$bg-surface", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "RestMobSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "RestMobSearchText", "fill": "$text-tertiary", "content": "Tìm món ăn, đồ uống...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"} + ]} + ] + }, + { + "type": "frame", + "id": "RestMobCategories", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "padding": [10, 16], + "gap": 8, + "children": [ + {"type": "frame", "id": "RestMobCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "RestMobCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "frame", "id": "RestMobCatMain", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "RestMobCatMainText", "fill": "$text-secondary", "content": "Món chính", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "frame", "id": "RestMobCatDrinks", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "RestMobCatDrinksText", "fill": "$text-secondary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} + ] + }, + { + "type": "frame", + "id": "RestMobProducts", + "width": "fill_container", + "height": "fill_container", + "padding": 12, + "layout": "vertical", + "gap": 12, + "clip": true, + "children": [ + {"type": "frame", "id": "RestMobProdRow1", "width": "fill_container", "gap": 12, "children": [ + {"type": "frame", "id": "RestMobProd1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestMobProd1Img", "width": "fill_container", "height": 100, "fill": "#EF444418"}, {"type": "frame", "id": "RestMobProd1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestMobProd1Name", "fill": "$text-primary", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "RestMobProd1Price", "fill": "$orange-primary", "content": "185,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "RestMobProd2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestMobProd2Img", "width": "fill_container", "height": 100, "fill": "#F59E0B18"}, {"type": "frame", "id": "RestMobProd2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestMobProd2Name", "fill": "$text-primary", "content": "Gà Nướng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "RestMobProd2Price", "fill": "$orange-primary", "content": "165,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]} + ]}, + {"type": "frame", "id": "RestMobProdRow2", "width": "fill_container", "gap": 12, "children": [ + {"type": "frame", "id": "RestMobProd3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestMobProd3Img", "width": "fill_container", "height": 100, "fill": "#3B82F618"}, {"type": "frame", "id": "RestMobProd3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestMobProd3Name", "fill": "$text-primary", "content": "Cá Hồi Sốt Cam", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "RestMobProd3Price", "fill": "$orange-primary", "content": "220,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "RestMobProd4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestMobProd4Img", "width": "fill_container", "height": 100, "fill": "#22C55E18"}, {"type": "frame", "id": "RestMobProd4Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestMobProd4Name", "fill": "$text-primary", "content": "Salad Caesar", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "RestMobProd4Price", "fill": "$orange-primary", "content": "85,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]} + ]}, + {"type": "frame", "id": "RestMobProdRow3", "width": "fill_container", "gap": 12, "children": [ + {"type": "frame", "id": "RestMobProd5", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestMobProd5Img", "width": "fill_container", "height": 100, "fill": "#8B5CF618"}, {"type": "frame", "id": "RestMobProd5Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestMobProd5Name", "fill": "$text-primary", "content": "Rượu Vang Đỏ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "RestMobProd5Price", "fill": "$orange-primary", "content": "450,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "RestMobProd6", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestMobProd6Img", "width": "fill_container", "height": 100, "fill": "#F59E0B18"}, {"type": "frame", "id": "RestMobProd6Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestMobProd6Name", "fill": "$text-primary", "content": "Bia Tiger", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "RestMobProd6Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]} + ]} + ] + }, + { + "type": "frame", + "id": "RestMobBottomBar", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, + "padding": [12, 16], + "gap": 12, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "RestMobCartSummary", "layout": "vertical", "gap": 2, "children": [ + {"type": "frame", "id": "RestMobCartStatus", "gap": 6, "alignItems": "center", "children": [ + {"type": "text", "id": "RestMobCartItems", "fill": "$text-secondary", "content": "4 món", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, + {"type": "frame", "id": "RestMobCartPending", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "RestMobCartPendingText", "fill": "#F59E0B", "content": "2 chờ", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]} + ]}, + {"type": "text", "id": "RestMobCartTotal", "fill": "$text-primary", "content": "530,250₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "RestMobPayBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "RestMobPayIcon", "width": 20, "height": 20, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "RestMobPayText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "bg-surface": {"type": "color", "value": "#111113"}, + "border-default": {"type": "color", "value": "#2A2A2E"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/restaurant/tablet.pen b/pencil-design/src/pages/tPOS/pos/restaurant/tablet.pen new file mode 100644 index 00000000..99f03de9 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/restaurant/tablet.pen @@ -0,0 +1,130 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "POSRestaurantTablet", + "name": "POS Restaurant Tablet", + "reusable": true, + "width": 1024, + "height": 768, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "RestTabHeader", + "width": "fill_container", + "height": 56, + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "RestTabLeft", "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "RestTabLogoIcon", "width": 36, "height": 36, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTabLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, + {"type": "frame", "id": "RestTabTableBadge", "fill": "$orange-primary", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "RestTabTableText", "fill": "$text-primary", "content": "Bàn 01", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, + {"type": "text", "id": "RestTabGuestInfo", "fill": "$text-secondary", "content": "2 khách • 45 phút", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "RestTabSearch", "width": 240, "height": 40, "fill": "$bg-surface", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 12], "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "RestTabSearchIcon", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "RestTabSearchText", "fill": "$text-tertiary", "content": "Tìm món...", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "RestTabRight", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "RestTabKitchenBtn", "height": 36, "fill": "#22C55E", "cornerRadius": 8, "padding": [0, 12], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestTabKitchenIcon", "width": 16, "height": 16, "iconFontName": "chef-hat", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "RestTabKitchenText", "fill": "$text-primary", "content": "Gửi bếp", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, + {"type": "text", "id": "RestTabTime", "fill": "$text-primary", "content": "23:48", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + }, + { + "type": "frame", + "id": "RestTabCategories", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "padding": [10, 16], + "gap": 8, + "children": [ + {"type": "frame", "id": "RestTabCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "RestTabCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, + {"type": "frame", "id": "RestTabCatAppetizer", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "RestTabCatAppetizerText", "fill": "$text-secondary", "content": "Khai vị", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "RestTabCatMain", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "RestTabCatMainText", "fill": "$text-secondary", "content": "Món chính", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "RestTabCatSeafood", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "RestTabCatSeafoodText", "fill": "$text-secondary", "content": "Hải sản", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "RestTabCatDrinks", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "RestTabCatDrinksText", "fill": "$text-secondary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} + ] + }, + { + "type": "frame", + "id": "RestTabMain", + "width": "fill_container", + "height": "fill_container", + "children": [ + { + "type": "frame", + "id": "RestTabProducts", + "width": "fill_container", + "height": "fill_container", + "padding": 16, + "layout": "vertical", + "gap": 12, + "clip": true, + "children": [ + {"type": "frame", "id": "RestTabProdRow1", "width": "fill_container", "gap": 12, "children": [ + {"type": "frame", "id": "RestTabProd1", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestTabProd1Img", "width": "fill_container", "height": 85, "fill": "#EF444418"}, {"type": "frame", "id": "RestTabProd1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestTabProd1Name", "fill": "$text-primary", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "RestTabProd1Price", "fill": "$orange-primary", "content": "185,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "RestTabProd2", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestTabProd2Img", "width": "fill_container", "height": 85, "fill": "#F59E0B18"}, {"type": "frame", "id": "RestTabProd2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestTabProd2Name", "fill": "$text-primary", "content": "Gà Nướng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "RestTabProd2Price", "fill": "$orange-primary", "content": "165,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "RestTabProd3", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestTabProd3Img", "width": "fill_container", "height": 85, "fill": "#3B82F618"}, {"type": "frame", "id": "RestTabProd3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestTabProd3Name", "fill": "$text-primary", "content": "Cá Hồi", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "RestTabProd3Price", "fill": "$orange-primary", "content": "220,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "RestTabProd4", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestTabProd4Img", "width": "fill_container", "height": 85, "fill": "#22C55E18"}, {"type": "frame", "id": "RestTabProd4Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestTabProd4Name", "fill": "$text-primary", "content": "Salad", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "RestTabProd4Price", "fill": "$orange-primary", "content": "85,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]} + ]}, + {"type": "frame", "id": "RestTabProdRow2", "width": "fill_container", "gap": 12, "children": [ + {"type": "frame", "id": "RestTabProd5", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestTabProd5Img", "width": "fill_container", "height": 85, "fill": "#8B5CF618"}, {"type": "frame", "id": "RestTabProd5Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestTabProd5Name", "fill": "$text-primary", "content": "Rượu Vang", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "RestTabProd5Price", "fill": "$orange-primary", "content": "450,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "RestTabProd6", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestTabProd6Img", "width": "fill_container", "height": 85, "fill": "#F59E0B18"}, {"type": "frame", "id": "RestTabProd6Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestTabProd6Name", "fill": "$text-primary", "content": "Bia Tiger", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "RestTabProd6Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]} + ]} + ] + }, + { + "type": "frame", + "id": "RestTabCart", + "width": 300, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, + "layout": "vertical", + "children": [ + {"type": "frame", "id": "RestTabCartHeader", "width": "fill_container", "padding": [12, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "text", "id": "RestTabCartTitle", "fill": "$text-primary", "content": "Đơn hàng #0089", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "RestTabCartStatus", "fill": "#F59E0B", "content": "2 chờ bếp", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "RestTabCartItems", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ + {"type": "frame", "id": "RestTabCartItem1", "width": "fill_container", "padding": [10, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "RestTabCartItem1Left", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "RestTabCartItem1Qty", "width": 26, "height": 26, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTabCartItem1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, {"type": "frame", "id": "RestTabCartItem1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "RestTabCartItem1Name", "fill": "$text-primary", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "RestTabCartItem1Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "RestTabCartItem1StatusText", "fill": "#22C55E", "content": "Đã phục vụ", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "RestTabCartItem1Price", "fill": "$text-primary", "content": "185,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "frame", "id": "RestTabCartItem2", "width": "fill_container", "padding": [10, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "RestTabCartItem2Left", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "RestTabCartItem2Qty", "width": 26, "height": 26, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTabCartItem2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, {"type": "frame", "id": "RestTabCartItem2Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "RestTabCartItem2Name", "fill": "$text-primary", "content": "Gà Nướng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "RestTabCartItem2Status", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "RestTabCartItem2StatusText", "fill": "#F59E0B", "content": "Chờ bếp", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "RestTabCartItem2Price", "fill": "$text-primary", "content": "165,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} + ]}, + {"type": "frame", "id": "RestTabCartSummary", "width": "fill_container", "fill": "$bg-surface", "layout": "vertical", "padding": 14, "gap": 6, "children": [ + {"type": "frame", "id": "RestTabCartSubtotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RestTabCartSubtotalLabel", "fill": "$text-secondary", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, {"type": "text", "id": "RestTabCartSubtotalValue", "fill": "$text-primary", "content": "505,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "frame", "id": "RestTabCartService", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RestTabCartServiceLabel", "fill": "$text-secondary", "content": "Phí dịch vụ 5%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, {"type": "text", "id": "RestTabCartServiceValue", "fill": "$text-primary", "content": "25,250₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "frame", "id": "RestTabCartTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RestTabCartTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "text", "id": "RestTabCartTotalValue", "fill": "$orange-primary", "content": "530,250₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]} + ]}, + {"type": "frame", "id": "RestTabPayBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "RestTabPayIcon", "width": 18, "height": 18, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "RestTabPayText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + } + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "bg-surface": {"type": "color", "value": "#111113"}, + "border-default": {"type": "color", "value": "#2A2A2E"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/kitchen-display.pen b/pencil-design/src/pages/tPOS/pos/restaurant/workflow/kitchen-display.pen new file mode 100644 index 00000000..8d69b020 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/restaurant/workflow/kitchen-display.pen @@ -0,0 +1,105 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "KitchenDisplay", + "name": "Restaurant/Kitchen Display", + "reusable": true, + "width": 1920, + "height": 1080, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "KitchenHeader", + "width": "fill_container", + "height": 80, + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "padding": [0, 40], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "KitchenLeft", "gap": 20, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "KitchenIcon", "width": 36, "height": 36, "iconFontName": "chef-hat", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "text", "id": "KitchenTitle", "fill": "$text-primary", "content": "MÀN HÌNH BẾP", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "KitchenStats", "gap": 32, "alignItems": "center", "children": [ + {"type": "frame", "id": "StatPending", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "StatPendingDot", "width": 16, "height": 16, "fill": "#F59E0B", "cornerRadius": 100}, {"type": "text", "id": "StatPendingText", "fill": "$text-primary", "content": "Chờ: 8", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}, + {"type": "frame", "id": "StatCooking", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "StatCookingDot", "width": 16, "height": 16, "fill": "#3B82F6", "cornerRadius": 100}, {"type": "text", "id": "StatCookingText", "fill": "$text-primary", "content": "Đang làm: 4", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]} + ]}, + {"type": "text", "id": "KitchenTime", "fill": "$text-primary", "content": "00:10", "fontFamily": "Roboto", "fontSize": 36, "fontWeight": "700"} + ] + }, + { + "type": "frame", + "id": "KitchenGrid", + "width": "fill_container", + "height": "fill_container", + "padding": 32, + "gap": 24, + "children": [ + {"type": "frame", "id": "KitchenCol1", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 24, "children": [ + {"type": "frame", "id": "Order1", "width": "fill_container", "fill": "#F59E0B15", "cornerRadius": 20, "stroke": {"thickness": 3, "fill": "#F59E0B"}, "layout": "vertical", "clip": true, "children": [ + {"type": "frame", "id": "Order1Header", "width": "fill_container", "fill": "#F59E0B", "padding": [16, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "Order1Table", "fill": "$text-primary", "content": "BÀN 01", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, {"type": "text", "id": "Order1Time", "fill": "$text-primary", "content": "5 phút", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}, + {"type": "frame", "id": "Order1Items", "width": "fill_container", "padding": 20, "layout": "vertical", "gap": 12, "children": [ + {"type": "frame", "id": "Order1Item1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "Order1Item1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "Order1Item1Qty", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Order1Item1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, {"type": "text", "id": "Order1Item1Name", "fill": "$text-primary", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]}, {"type": "frame", "id": "Order1Item1Status", "fill": "#F59E0B30", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "Order1Item1StatusText", "fill": "#F59E0B", "content": "CHỜ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}]}, + {"type": "frame", "id": "Order1Item2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "Order1Item2Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "Order1Item2Qty", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Order1Item2QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, {"type": "text", "id": "Order1Item2Name", "fill": "$text-primary", "content": "Cơm Trắng", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]}, {"type": "frame", "id": "Order1Item2Status", "fill": "#F59E0B30", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "Order1Item2StatusText", "fill": "#F59E0B", "content": "CHỜ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}]} + ]}, + {"type": "frame", "id": "Order1Actions", "width": "fill_container", "padding": [12, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "children": [ + {"type": "frame", "id": "Order1StartBtn", "width": "fill_container", "height": 48, "fill": "#3B82F6", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Order1StartText", "fill": "$text-primary", "content": "Bắt đầu làm", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]} + ]} + ]}, + {"type": "frame", "id": "Order2", "width": "fill_container", "fill": "#F59E0B15", "cornerRadius": 20, "stroke": {"thickness": 2, "fill": "#F59E0B"}, "layout": "vertical", "clip": true, "children": [ + {"type": "frame", "id": "Order2Header", "width": "fill_container", "fill": "#F59E0B", "padding": [16, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "Order2Table", "fill": "$text-primary", "content": "BÀN 06", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, {"type": "text", "id": "Order2Time", "fill": "$text-primary", "content": "3 phút", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}, + {"type": "frame", "id": "Order2Items", "width": "fill_container", "padding": 20, "layout": "vertical", "gap": 12, "children": [ + {"type": "frame", "id": "Order2Item1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "Order2Item1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "Order2Item1Qty", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Order2Item1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, {"type": "text", "id": "Order2Item1Name", "fill": "$text-primary", "content": "Cá Hồi Sốt Cam", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]}, {"type": "frame", "id": "Order2Item1Status", "fill": "#F59E0B30", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "Order2Item1StatusText", "fill": "#F59E0B", "content": "CHỜ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}]} + ]}, + {"type": "frame", "id": "Order2Actions", "width": "fill_container", "padding": [12, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "children": [ + {"type": "frame", "id": "Order2StartBtn", "width": "fill_container", "height": 48, "fill": "#3B82F6", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Order2StartText", "fill": "$text-primary", "content": "Bắt đầu làm", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]} + ]} + ]} + ]}, + {"type": "frame", "id": "KitchenCol2", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 24, "children": [ + {"type": "frame", "id": "Order3", "width": "fill_container", "fill": "#3B82F615", "cornerRadius": 20, "stroke": {"thickness": 3, "fill": "#3B82F6"}, "layout": "vertical", "clip": true, "children": [ + {"type": "frame", "id": "Order3Header", "width": "fill_container", "fill": "#3B82F6", "padding": [16, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "Order3Table", "fill": "$text-primary", "content": "BÀN 07", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, {"type": "text", "id": "Order3Time", "fill": "$text-primary", "content": "8 phút", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}, + {"type": "frame", "id": "Order3Items", "width": "fill_container", "padding": 20, "layout": "vertical", "gap": 12, "children": [ + {"type": "frame", "id": "Order3Item1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "Order3Item1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "Order3Item1Qty", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Order3Item1QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, {"type": "text", "id": "Order3Item1Name", "fill": "$text-primary", "content": "Gà Nướng Mật Ong", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]}, {"type": "frame", "id": "Order3Item1Status", "fill": "#3B82F630", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "Order3Item1StatusText", "fill": "#3B82F6", "content": "ĐANG LÀM", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}]}, + {"type": "frame", "id": "Order3Item2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "Order3Item2Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "Order3Item2Qty", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Order3Item2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, {"type": "text", "id": "Order3Item2Name", "fill": "$text-primary", "content": "Salad Caesar", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]}, {"type": "frame", "id": "Order3Item2Status", "fill": "#22C55E30", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "Order3Item2StatusText", "fill": "#22C55E", "content": "XONG", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}]} + ]}, + {"type": "frame", "id": "Order3Actions", "width": "fill_container", "padding": [12, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "children": [ + {"type": "frame", "id": "Order3DoneBtn", "width": "fill_container", "height": 48, "fill": "#22C55E", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Order3DoneText", "fill": "$text-primary", "content": "Hoàn thành tất cả", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]} + ]} + ]} + ]}, + {"type": "frame", "id": "KitchenCol3", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 24, "children": [ + {"type": "frame", "id": "Order4", "width": "fill_container", "fill": "#22C55E15", "cornerRadius": 20, "stroke": {"thickness": 2, "fill": "#22C55E"}, "layout": "vertical", "clip": true, "children": [ + {"type": "frame", "id": "Order4Header", "width": "fill_container", "fill": "#22C55E", "padding": [16, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "Order4Table", "fill": "$text-primary", "content": "BÀN 10", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, {"type": "text", "id": "Order4Status", "fill": "$text-primary", "content": "SẴN SÀNG", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, + {"type": "frame", "id": "Order4Items", "width": "fill_container", "padding": 20, "layout": "vertical", "gap": 12, "children": [ + {"type": "frame", "id": "Order4Item1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "Order4Item1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "Order4Item1Qty", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Order4Item1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, {"type": "text", "id": "Order4Item1Name", "fill": "$text-primary", "content": "Tôm Hùm Nướng", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]}, {"type": "frame", "id": "Order4Item1Status", "fill": "#22C55E30", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "Order4Item1StatusText", "fill": "#22C55E", "content": "XONG", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}]} + ]}, + {"type": "frame", "id": "Order4Actions", "width": "fill_container", "padding": [12, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "children": [ + {"type": "frame", "id": "Order4ServeBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Order4ServeText", "fill": "$text-primary", "content": "Đã phục vụ", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]} + ]} + ]} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "border-default": {"type": "color", "value": "#2A2A2E"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/table-map.pen b/pencil-design/src/pages/tPOS/pos/restaurant/workflow/table-map.pen new file mode 100644 index 00000000..960a19fe --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/restaurant/workflow/table-map.pen @@ -0,0 +1,101 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "RestaurantTableMap", + "name": "Restaurant/Table Map", + "reusable": true, + "width": 1024, + "height": 768, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "TableMapHeader", + "width": "fill_container", + "height": 64, + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "padding": [0, 24], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "TableMapLeft", "gap": 16, "alignItems": "center", "children": [ + {"type": "frame", "id": "TableMapLogo", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "TableMapLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}]}, + {"type": "text", "id": "TableMapTitle", "fill": "$text-primary", "content": "Sơ đồ bàn", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "TableMapLegend", "gap": 20, "alignItems": "center", "children": [ + {"type": "frame", "id": "LegendEmpty", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "LegendEmptyDot", "width": 16, "height": 16, "fill": "#22C55E", "cornerRadius": 4}, {"type": "text", "id": "LegendEmptyText", "fill": "$text-secondary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, + {"type": "frame", "id": "LegendOccupied", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "LegendOccupiedDot", "width": 16, "height": 16, "fill": "#EF4444", "cornerRadius": 4}, {"type": "text", "id": "LegendOccupiedText", "fill": "$text-secondary", "content": "Có khách", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, + {"type": "frame", "id": "LegendReserved", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "LegendReservedDot", "width": 16, "height": 16, "fill": "#F59E0B", "cornerRadius": 4}, {"type": "text", "id": "LegendReservedText", "fill": "$text-secondary", "content": "Đặt trước", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]} + ]}, + {"type": "frame", "id": "TableMapRight", "gap": 12, "children": [ + {"type": "frame", "id": "TableMapAddBtn", "height": 40, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "TableMapAddIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "TableMapAddText", "fill": "$text-primary", "content": "Mở bàn mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} + ]} + ] + }, + { + "type": "frame", + "id": "TableMapFloors", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "padding": [12, 24], + "gap": 8, + "children": [ + {"type": "frame", "id": "Floor1Tab", "fill": "$orange-primary", "cornerRadius": 8, "padding": [10, 20], "children": [{"type": "text", "id": "Floor1Text", "fill": "$text-primary", "content": "Tầng 1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, + {"type": "frame", "id": "Floor2Tab", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [10, 20], "children": [{"type": "text", "id": "Floor2Text", "fill": "$text-secondary", "content": "Tầng 2", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "FloorVIPTab", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [10, 20], "children": [{"type": "text", "id": "FloorVIPText", "fill": "$text-secondary", "content": "VIP", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "FloorOutdoorTab", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [10, 20], "children": [{"type": "text", "id": "FloorOutdoorText", "fill": "$text-secondary", "content": "Ngoài trời", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} + ] + }, + { + "type": "frame", + "id": "TableMapGrid", + "width": "fill_container", + "height": "fill_container", + "padding": 32, + "layout": "vertical", + "gap": 24, + "clip": true, + "children": [ + {"type": "frame", "id": "TableRow1", "width": "fill_container", "gap": 24, "children": [ + {"type": "frame", "id": "Table01", "width": 140, "height": 120, "fill": "#EF444415", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#EF4444"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Table01Label", "fill": "#EF4444", "content": "01", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, {"type": "frame", "id": "Table01Info", "fill": "#EF444430", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "Table01InfoText", "fill": "#EF4444", "content": "4 khách • 45p", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "Table02", "width": 140, "height": 120, "fill": "#22C55E15", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#22C55E"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Table02Label", "fill": "#22C55E", "content": "02", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, {"type": "text", "id": "Table02Status", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "frame", "id": "Table03", "width": 140, "height": 120, "fill": "#EF444415", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Table03Label", "fill": "$orange-primary", "content": "03", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, {"type": "frame", "id": "Table03Info", "fill": "$orange-primary", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "Table03InfoText", "fill": "$text-primary", "content": "ĐANG CHỌN", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "Table04", "width": 140, "height": 120, "fill": "#F59E0B15", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#F59E0B"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Table04Label", "fill": "#F59E0B", "content": "04", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, {"type": "frame", "id": "Table04Info", "fill": "#F59E0B30", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "Table04InfoText", "fill": "#F59E0B", "content": "Đặt 19:00", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "Table05", "width": 140, "height": 120, "fill": "#22C55E15", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#22C55E"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Table05Label", "fill": "#22C55E", "content": "05", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, {"type": "text", "id": "Table05Status", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} + ]}, + {"type": "frame", "id": "TableRow2", "width": "fill_container", "gap": 24, "children": [ + {"type": "frame", "id": "Table06", "width": 140, "height": 120, "fill": "#EF444415", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#EF4444"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Table06Label", "fill": "#EF4444", "content": "06", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, {"type": "frame", "id": "Table06Info", "fill": "#EF444430", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "Table06InfoText", "fill": "#EF4444", "content": "2 khách • 30p", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "Table07", "width": 140, "height": 120, "fill": "#EF444415", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#EF4444"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Table07Label", "fill": "#EF4444", "content": "07", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, {"type": "frame", "id": "Table07Info", "fill": "#EF444430", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "Table07InfoText", "fill": "#EF4444", "content": "6 khách • 1h20", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, + {"type": "frame", "id": "Table08", "width": 140, "height": 120, "fill": "#22C55E15", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#22C55E"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Table08Label", "fill": "#22C55E", "content": "08", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, {"type": "text", "id": "Table08Status", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "frame", "id": "Table09", "width": 140, "height": 120, "fill": "#22C55E15", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#22C55E"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Table09Label", "fill": "#22C55E", "content": "09", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, {"type": "text", "id": "Table09Status", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "frame", "id": "Table10", "width": 140, "height": 120, "fill": "#EF444415", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#EF4444"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Table10Label", "fill": "#EF4444", "content": "10", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, {"type": "frame", "id": "Table10Info", "fill": "#EF444430", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "Table10InfoText", "fill": "#EF4444", "content": "3 khách • 20p", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]} + ]}, + {"type": "frame", "id": "TableMapStats", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": [16, 24], "gap": 40, "justifyContent": "center", "children": [ + {"type": "frame", "id": "StatTotal", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [{"type": "text", "id": "StatTotalValue", "fill": "$text-primary", "content": "10", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "StatTotalLabel", "fill": "$text-tertiary", "content": "Tổng bàn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, + {"type": "frame", "id": "StatEmpty", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [{"type": "text", "id": "StatEmptyValue", "fill": "#22C55E", "content": "4", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "StatEmptyLabel", "fill": "$text-tertiary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, + {"type": "frame", "id": "StatOccupied", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [{"type": "text", "id": "StatOccupiedValue", "fill": "#EF4444", "content": "5", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "StatOccupiedLabel", "fill": "$text-tertiary", "content": "Có khách", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, + {"type": "frame", "id": "StatReserved", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [{"type": "text", "id": "StatReservedValue", "fill": "#F59E0B", "content": "1", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "StatReservedLabel", "fill": "$text-tertiary", "content": "Đặt trước", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "border-default": {"type": "color", "value": "#2A2A2E"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/payment/cash.pen b/pencil-design/src/pages/tPOS/pos/shared/payment/cash.pen new file mode 100644 index 00000000..f54bbb9d --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/payment/cash.pen @@ -0,0 +1,102 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "PaymentCashScreen", + "name": "Payment/Cash", + "reusable": true, + "width": 480, + "height": 640, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "CashHeader", + "width": "fill_container", + "padding": [20, 24], + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "CashHeaderLeft", "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "CashBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "CashBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]}, + {"type": "text", "id": "CashTitle", "fill": "$text-primary", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "CashTotalBadge", "fill": "#22C55E20", "cornerRadius": 10, "padding": [8, 14], "children": [ + {"type": "text", "id": "CashTotalText", "fill": "#22C55E", "content": "530,250₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} + ]} + ] + }, + { + "type": "frame", + "id": "CashContent", + "width": "fill_container", + "height": "fill_container", + "padding": 24, + "layout": "vertical", + "gap": 24, + "children": [ + {"type": "frame", "id": "CashInputSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ + {"type": "text", "id": "CashInputLabel", "fill": "$text-secondary", "content": "Số tiền khách đưa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "frame", "id": "CashInputBox", "width": "fill_container", "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": [0, 20], "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "text", "id": "CashInputValue", "fill": "$text-primary", "content": "600,000", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, + {"type": "text", "id": "CashInputCurrency", "fill": "$text-tertiary", "content": "₫", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "500"} + ]} + ]}, + {"type": "frame", "id": "CashQuickAmounts", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ + {"type": "text", "id": "CashQuickLabel", "fill": "$text-secondary", "content": "Số tiền nhanh", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "frame", "id": "CashQuickRow1", "width": "fill_container", "gap": 10, "children": [ + {"type": "frame", "id": "CashQuick1", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CashQuick1Text", "fill": "$text-primary", "content": "550K", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}, + {"type": "frame", "id": "CashQuick2", "width": "fill_container", "height": 48, "fill": "$orange-primary", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CashQuick2Text", "fill": "$text-primary", "content": "600K", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}, + {"type": "frame", "id": "CashQuick3", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CashQuick3Text", "fill": "$text-primary", "content": "700K", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]} + ]}, + {"type": "frame", "id": "CashQuickRow2", "width": "fill_container", "gap": 10, "children": [ + {"type": "frame", "id": "CashQuick4", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CashQuick4Text", "fill": "$text-primary", "content": "1M", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}, + {"type": "frame", "id": "CashQuick5", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CashQuick5Text", "fill": "$text-primary", "content": "Đúng tiền", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]} + ]} + ]}, + {"type": "frame", "id": "CashChangeSection", "width": "fill_container", "fill": "#22C55E15", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ + {"type": "text", "id": "CashChangeLabel", "fill": "$text-secondary", "content": "Tiền thối lại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "CashChangeValue", "fill": "#22C55E", "content": "69,750₫", "fontFamily": "Roboto", "fontSize": 36, "fontWeight": "700"}, + {"type": "frame", "id": "CashChangeBreakdown", "gap": 8, "alignItems": "center", "children": [ + {"type": "text", "id": "CashChangeCalc", "fill": "$text-tertiary", "content": "600,000 - 530,250 =", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, + {"type": "text", "id": "CashChangeResult", "fill": "#22C55E", "content": "69,750₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "CashFooter", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [16, 24], + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, + "children": [ + {"type": "frame", "id": "CashConfirmBtn", "width": "fill_container", "height": 56, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#22C55E", "position": 0}, {"color": "#16A34A", "position": 1}]}, "cornerRadius": 14, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "CashConfirmIcon", "width": 22, "height": 22, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "CashConfirmText", "fill": "$text-primary", "content": "Xác nhận thanh toán", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "border-default": {"type": "color", "value": "#2A2A2E"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/payment/method-select.pen b/pencil-design/src/pages/tPOS/pos/shared/payment/method-select.pen new file mode 100644 index 00000000..4329a6fa --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/payment/method-select.pen @@ -0,0 +1,161 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "PaymentMethodScreen", + "name": "Payment/Method Select", + "reusable": true, + "width": 480, + "height": 640, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "PayHeader", + "width": "fill_container", + "padding": [20, 24], + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "PayHeaderLeft", "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "PayCloseBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "PayCloseIcon", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]}, + {"type": "text", "id": "PayTitle", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "PayOrderInfo", "layout": "vertical", "alignItems": "flex_end", "gap": 2, "children": [ + {"type": "text", "id": "PayOrderLabel", "fill": "$text-tertiary", "content": "Đơn hàng #0089", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, + {"type": "text", "id": "PayOrderTotal", "fill": "$orange-primary", "content": "530,250₫", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} + ]} + ] + }, + { + "type": "frame", + "id": "PayMethods", + "width": "fill_container", + "height": "fill_container", + "padding": 24, + "layout": "vertical", + "gap": 16, + "children": [ + {"type": "text", "id": "PayMethodsTitle", "fill": "$text-secondary", "content": "Chọn phương thức thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + { + "type": "frame", + "id": "PayMethodCash", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": {"thickness": 2, "fill": "$orange-primary"}, + "padding": 20, + "gap": 16, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "PayCashIcon", "width": 52, "height": 52, "fill": "#22C55E20", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "PayCashIconInner", "width": 26, "height": 26, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#22C55E"} + ]}, + {"type": "frame", "id": "PayCashInfo", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "PayCashTitle", "fill": "$text-primary", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, + {"type": "text", "id": "PayCashDesc", "fill": "$text-secondary", "content": "Nhận tiền và thối lại", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} + ]}, + {"type": "icon_font", "id": "PayCashCheck", "width": 24, "height": 24, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "$orange-primary"} + ] + }, + { + "type": "frame", + "id": "PayMethodQR", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "padding": 20, + "gap": 16, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "PayQRIcon", "width": 52, "height": 52, "fill": "#3B82F620", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "PayQRIconInner", "width": 26, "height": 26, "iconFontName": "qr-code", "iconFontFamily": "lucide", "fill": "#3B82F6"} + ]}, + {"type": "frame", "id": "PayQRInfo", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "PayQRTitle", "fill": "$text-primary", "content": "Quét mã QR", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, + {"type": "text", "id": "PayQRDesc", "fill": "$text-secondary", "content": "VietQR, MoMo, ZaloPay", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} + ]}, + {"type": "icon_font", "id": "PayQRArrow", "width": 20, "height": 20, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ] + }, + { + "type": "frame", + "id": "PayMethodBank", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "padding": 20, + "gap": 16, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "PayBankIcon", "width": 52, "height": 52, "fill": "#8B5CF620", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "PayBankIconInner", "width": 26, "height": 26, "iconFontName": "landmark", "iconFontFamily": "lucide", "fill": "#8B5CF6"} + ]}, + {"type": "frame", "id": "PayBankInfo", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "PayBankTitle", "fill": "$text-primary", "content": "Chuyển khoản", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, + {"type": "text", "id": "PayBankDesc", "fill": "$text-secondary", "content": "Hiển thị thông tin tài khoản", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} + ]}, + {"type": "icon_font", "id": "PayBankArrow", "width": 20, "height": 20, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ] + }, + { + "type": "frame", + "id": "PayMethodCard", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "padding": 20, + "gap": 16, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "PayCardIcon", "width": 52, "height": 52, "fill": "#F59E0B20", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "PayCardIconInner", "width": 26, "height": 26, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#F59E0B"} + ]}, + {"type": "frame", "id": "PayCardInfo", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "PayCardTitle", "fill": "$text-primary", "content": "Thẻ ATM/Visa", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, + {"type": "text", "id": "PayCardDesc", "fill": "$text-secondary", "content": "Quẹt thẻ qua máy POS", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} + ]}, + {"type": "icon_font", "id": "PayCardArrow", "width": 20, "height": 20, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ] + } + ] + }, + { + "type": "frame", + "id": "PayFooter", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [16, 24], + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, + "children": [ + {"type": "frame", "id": "PayConfirmBtn", "width": "fill_container", "height": 56, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 14, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "PayConfirmIcon", "width": 22, "height": 22, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "PayConfirmText", "fill": "$text-primary", "content": "Nhận tiền mặt 530,250₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "border-default": {"type": "color", "value": "#2A2A2E"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/payment/qr.pen b/pencil-design/src/pages/tPOS/pos/shared/payment/qr.pen new file mode 100644 index 00000000..c9bae849 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/payment/qr.pen @@ -0,0 +1,101 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "PaymentQRScreen", + "name": "Payment/QR", + "reusable": true, + "width": 480, + "height": 640, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "QRHeader", + "width": "fill_container", + "padding": [20, 24], + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "QRHeaderLeft", "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "QRBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "QRBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]}, + {"type": "text", "id": "QRTitle", "fill": "$text-primary", "content": "Quét mã QR", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "QRTotalBadge", "fill": "#3B82F620", "cornerRadius": 10, "padding": [8, 14], "children": [ + {"type": "text", "id": "QRTotalText", "fill": "#3B82F6", "content": "530,250₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} + ]} + ] + }, + { + "type": "frame", + "id": "QRContent", + "width": "fill_container", + "height": "fill_container", + "padding": 24, + "layout": "vertical", + "gap": 24, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "QRTabs", "gap": 8, "children": [ + {"type": "frame", "id": "QRTabVietQR", "fill": "$orange-primary", "cornerRadius": 100, "padding": [10, 18], "children": [{"type": "text", "id": "QRTabVietQRText", "fill": "$text-primary", "content": "VietQR", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, + {"type": "frame", "id": "QRTabMomo", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 18], "children": [{"type": "text", "id": "QRTabMomoText", "fill": "$text-secondary", "content": "MoMo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "QRTabZalo", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 18], "children": [{"type": "text", "id": "QRTabZaloText", "fill": "$text-secondary", "content": "ZaloPay", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} + ]}, + {"type": "frame", "id": "QRCodeBox", "width": 280, "height": 280, "fill": "#FFFFFF", "cornerRadius": 20, "padding": 20, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "frame", "id": "QRCodeInner", "width": 220, "height": 220, "fill": "$bg-page", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "QRPlaceholder", "fill": "$text-tertiary", "content": "QR CODE", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"} + ]} + ]}, + {"type": "frame", "id": "QRBankInfo", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ + {"type": "text", "id": "QRBankName", "fill": "$text-primary", "content": "Vietcombank", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, + {"type": "text", "id": "QRAccountNo", "fill": "$text-secondary", "content": "0123 4567 8910", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, + {"type": "text", "id": "QRAccountName", "fill": "$text-tertiary", "content": "CONG TY TNHH GOODGO", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "QRStatus", "width": "fill_container", "fill": "#F59E0B15", "cornerRadius": 12, "padding": [14, 20], "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "QRSpinner", "width": 24, "height": 24, "cornerRadius": 100, "stroke": {"thickness": 3, "fill": "#F59E0B"}, "children": []}, + {"type": "frame", "id": "QRStatusInfo", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "QRStatusTitle", "fill": "#F59E0B", "content": "Đang chờ thanh toán...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "QRStatusDesc", "fill": "$text-secondary", "content": "Quét mã QR bằng app ngân hàng hoặc ví điện tử", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "QRFooter", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [16, 24], + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, + "gap": 12, + "children": [ + {"type": "frame", "id": "QRCancelBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "QRCancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "QRManualBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "QRManualText", "fill": "$text-primary", "content": "Xác nhận thủ công", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "border-default": {"type": "color", "value": "#2A2A2E"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/payment/receipt.pen b/pencil-design/src/pages/tPOS/pos/shared/payment/receipt.pen new file mode 100644 index 00000000..f28528c4 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/payment/receipt.pen @@ -0,0 +1,196 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "ReceiptScreen", + "name": "Payment/Receipt", + "reusable": true, + "width": 320, + "height": 540, + "fill": "#FFFFFF", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "ReceiptHeader", + "width": "fill_container", + "padding": [24, 20], + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "ReceiptLogo", "width": 48, "height": 48, "fill": "#FF5C00", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "ReceiptLogoText", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"} + ]}, + {"type": "text", "id": "ReceiptStoreName", "fill": "#111111", "content": "GOODGO RESTAURANT", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, + {"type": "text", "id": "ReceiptAddress", "fill": "#666666", "content": "123 Nguyễn Huệ, Q.1, TP.HCM", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, + {"type": "text", "id": "ReceiptPhone", "fill": "#666666", "content": "Tel: 028 1234 5678", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ] + }, + { + "type": "frame", + "id": "ReceiptDivider1", + "width": "fill_container", + "height": 1, + "fill": "#E5E5E5", + "children": [] + }, + { + "type": "frame", + "id": "ReceiptInfo", + "width": "fill_container", + "padding": [12, 20], + "layout": "vertical", + "gap": 6, + "children": [ + {"type": "frame", "id": "ReceiptInfoRow1", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "text", "id": "ReceiptOrderLabel", "fill": "#666666", "content": "Hóa đơn:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, + {"type": "text", "id": "ReceiptOrderValue", "fill": "#111111", "content": "#0089", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "ReceiptInfoRow2", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "text", "id": "ReceiptDateLabel", "fill": "#666666", "content": "Ngày:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, + {"type": "text", "id": "ReceiptDateValue", "fill": "#111111", "content": "06/02/2026 00:05", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "ReceiptInfoRow3", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "text", "id": "ReceiptTableLabel", "fill": "#666666", "content": "Bàn:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, + {"type": "text", "id": "ReceiptTableValue", "fill": "#111111", "content": "01", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "ReceiptInfoRow4", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "text", "id": "ReceiptCashierLabel", "fill": "#666666", "content": "Thu ngân:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, + {"type": "text", "id": "ReceiptCashierValue", "fill": "#111111", "content": "Minh Tuấn", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]} + ] + }, + { + "type": "frame", + "id": "ReceiptDivider2", + "width": "fill_container", + "height": 1, + "fill": "#E5E5E5", + "children": [] + }, + { + "type": "frame", + "id": "ReceiptItems", + "width": "fill_container", + "padding": [12, 20], + "layout": "vertical", + "gap": 8, + "children": [ + {"type": "frame", "id": "ReceiptItem1", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "frame", "id": "ReceiptItem1Left", "gap": 8, "children": [ + {"type": "text", "id": "ReceiptItem1Qty", "fill": "#111111", "content": "1x", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, + {"type": "text", "id": "ReceiptItem1Name", "fill": "#111111", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]}, + {"type": "text", "id": "ReceiptItem1Price", "fill": "#111111", "content": "185,000", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "ReceiptItem2", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "frame", "id": "ReceiptItem2Left", "gap": 8, "children": [ + {"type": "text", "id": "ReceiptItem2Qty", "fill": "#111111", "content": "1x", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, + {"type": "text", "id": "ReceiptItem2Name", "fill": "#111111", "content": "Gà Nướng Mật Ong", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]}, + {"type": "text", "id": "ReceiptItem2Price", "fill": "#111111", "content": "165,000", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "ReceiptItem3", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "frame", "id": "ReceiptItem3Left", "gap": 8, "children": [ + {"type": "text", "id": "ReceiptItem3Qty", "fill": "#111111", "content": "2x", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, + {"type": "text", "id": "ReceiptItem3Name", "fill": "#111111", "content": "Cơm Trắng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]}, + {"type": "text", "id": "ReceiptItem3Price", "fill": "#111111", "content": "20,000", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "ReceiptItem4", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "frame", "id": "ReceiptItem4Left", "gap": 8, "children": [ + {"type": "text", "id": "ReceiptItem4Qty", "fill": "#111111", "content": "2x", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, + {"type": "text", "id": "ReceiptItem4Name", "fill": "#111111", "content": "Tiger", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]}, + {"type": "text", "id": "ReceiptItem4Price", "fill": "#111111", "content": "70,000", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "ReceiptItem5", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "frame", "id": "ReceiptItem5Left", "gap": 8, "children": [ + {"type": "text", "id": "ReceiptItem5Qty", "fill": "#111111", "content": "1x", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, + {"type": "text", "id": "ReceiptItem5Name", "fill": "#111111", "content": "Nước Suối", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]}, + {"type": "text", "id": "ReceiptItem5Price", "fill": "#111111", "content": "15,000", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]} + ] + }, + { + "type": "frame", + "id": "ReceiptDivider3", + "width": "fill_container", + "height": 1, + "fill": "#E5E5E5", + "children": [] + }, + { + "type": "frame", + "id": "ReceiptTotals", + "width": "fill_container", + "padding": [12, 20], + "layout": "vertical", + "gap": 6, + "children": [ + {"type": "frame", "id": "ReceiptSubtotal", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "text", "id": "ReceiptSubtotalLabel", "fill": "#666666", "content": "Tạm tính:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, + {"type": "text", "id": "ReceiptSubtotalValue", "fill": "#111111", "content": "455,000", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "ReceiptVAT", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "text", "id": "ReceiptVATLabel", "fill": "#666666", "content": "VAT 10%:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, + {"type": "text", "id": "ReceiptVATValue", "fill": "#111111", "content": "45,500", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "ReceiptService", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "text", "id": "ReceiptServiceLabel", "fill": "#666666", "content": "Phí DV 5%:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, + {"type": "text", "id": "ReceiptServiceValue", "fill": "#111111", "content": "29,750", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "ReceiptTotal", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "text", "id": "ReceiptTotalLabel", "fill": "#111111", "content": "TỔNG CỘNG:", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}, + {"type": "text", "id": "ReceiptTotalValue", "fill": "#111111", "content": "530,250₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} + ]} + ] + }, + { + "type": "frame", + "id": "ReceiptDivider4", + "width": "fill_container", + "height": 1, + "fill": "#E5E5E5", + "children": [] + }, + { + "type": "frame", + "id": "ReceiptPayment", + "width": "fill_container", + "padding": [12, 20], + "layout": "vertical", + "gap": 6, + "children": [ + {"type": "frame", "id": "ReceiptPaid", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "text", "id": "ReceiptPaidLabel", "fill": "#666666", "content": "Tiền mặt:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, + {"type": "text", "id": "ReceiptPaidValue", "fill": "#111111", "content": "600,000", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "ReceiptChange", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "text", "id": "ReceiptChangeLabel", "fill": "#666666", "content": "Tiền thối:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, + {"type": "text", "id": "ReceiptChangeValue", "fill": "#111111", "content": "69,750", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} + ]} + ] + }, + { + "type": "frame", + "id": "ReceiptFooter", + "width": "fill_container", + "padding": [16, 20], + "layout": "vertical", + "gap": 8, + "alignItems": "center", + "children": [ + {"type": "text", "id": "ReceiptThanks", "fill": "#111111", "content": "Cảm ơn quý khách!", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "ReceiptWeb", "fill": "#666666", "content": "www.goodgo.vn", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} + ] + } + ] + } + ], + "variables": {} +} diff --git a/pencil-design/src/pages/tPOS/pos/shared/payment/success.pen b/pencil-design/src/pages/tPOS/pos/shared/payment/success.pen new file mode 100644 index 00000000..e942e600 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/shared/payment/success.pen @@ -0,0 +1,95 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "PaymentSuccessScreen", + "name": "Payment/Success", + "reusable": true, + "width": 480, + "height": 640, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "SuccessContent", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "justifyContent": "center", + "alignItems": "center", + "gap": 32, + "padding": 40, + "children": [ + {"type": "frame", "id": "SuccessIconOuter", "width": 120, "height": 120, "fill": "#22C55E20", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "frame", "id": "SuccessIconInner", "width": 80, "height": 80, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SuccessCheck", "width": 40, "height": 40, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"} + ]} + ]}, + {"type": "frame", "id": "SuccessInfo", "layout": "vertical", "gap": 12, "alignItems": "center", "children": [ + {"type": "text", "id": "SuccessTitle", "fill": "#22C55E", "content": "Thanh toán thành công!", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, + {"type": "text", "id": "SuccessAmount", "fill": "$text-primary", "content": "530,250₫", "fontFamily": "Roboto", "fontSize": 36, "fontWeight": "700"}, + {"type": "frame", "id": "SuccessMethod", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 14], "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SuccessMethodIcon", "width": 16, "height": 16, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#22C55E"}, + {"type": "text", "id": "SuccessMethodText", "fill": "$text-secondary", "content": "Tiền mặt • Thối 69,750₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} + ]} + ]}, + {"type": "frame", "id": "SuccessOrderInfo", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 12, "children": [ + {"type": "frame", "id": "SuccessOrderRow1", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "text", "id": "SuccessOrderLabel", "fill": "$text-tertiary", "content": "Mã đơn hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, + {"type": "text", "id": "SuccessOrderId", "fill": "$text-primary", "content": "#0089", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "SuccessOrderRow2", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "text", "id": "SuccessTimeLabel", "fill": "$text-tertiary", "content": "Thời gian", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, + {"type": "text", "id": "SuccessTimeValue", "fill": "$text-primary", "content": "06/02/2026 00:05", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "SuccessOrderRow3", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "text", "id": "SuccessCashierLabel", "fill": "$text-tertiary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, + {"type": "text", "id": "SuccessCashierValue", "fill": "$text-primary", "content": "Minh Tuấn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "SuccessFooter", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [20, 24], + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, + "layout": "vertical", + "gap": 12, + "children": [ + {"type": "frame", "id": "SuccessActions", "width": "fill_container", "gap": 12, "children": [ + {"type": "frame", "id": "SuccessPrintBtn", "width": "fill_container", "height": 52, "fill": "$bg-interactive", "cornerRadius": 14, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SuccessPrintIcon", "width": 20, "height": 20, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "SuccessPrintText", "fill": "$text-primary", "content": "In hóa đơn", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "SuccessSendBtn", "width": "fill_container", "height": 52, "fill": "$bg-interactive", "cornerRadius": 14, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SuccessSendIcon", "width": 20, "height": 20, "iconFontName": "send", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "SuccessSendText", "fill": "$text-primary", "content": "Gửi email", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ]} + ]}, + {"type": "frame", "id": "SuccessNewOrderBtn", "width": "fill_container", "height": 56, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 14, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SuccessNewIcon", "width": 22, "height": 22, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "SuccessNewText", "fill": "$text-primary", "content": "Đơn hàng mới", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "border-default": {"type": "color", "value": "#2A2A2E"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/spa.pen b/pencil-design/src/pages/tPOS/pos/spa/desktop.pen similarity index 100% rename from pencil-design/src/pages/tPOS/pos/spa.pen rename to pencil-design/src/pages/tPOS/pos/spa/desktop.pen diff --git a/pencil-design/src/pages/tPOS/pos/spa/mobile.pen b/pencil-design/src/pages/tPOS/pos/spa/mobile.pen new file mode 100644 index 00000000..58d2ef35 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/spa/mobile.pen @@ -0,0 +1,132 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "POSSpaMobile", + "name": "POS Spa Mobile", + "reusable": true, + "width": 390, + "height": 844, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "SpaMobHeader", + "width": "fill_container", + "height": 56, + "fill": "$bg-elevated", + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "SpaMobLeft", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "SpaMobAvatar", "width": 32, "height": 32, "fill": "#EC489920", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaMobAvatarText", "fill": "#EC4899", "content": "L", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, + {"type": "frame", "id": "SpaMobCustInfo", "layout": "vertical", "gap": 0, "children": [{"type": "text", "id": "SpaMobCustName", "fill": "$text-primary", "content": "Nguyễn Thị Lan", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, {"type": "frame", "id": "SpaMobCustVIP", "gap": 4, "alignItems": "center", "children": [{"type": "frame", "id": "SpaMobVIPBadge", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "SpaMobVIPText", "fill": "#F59E0B", "content": "VIP", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}]}, {"type": "text", "id": "SpaMobPoints", "fill": "$text-secondary", "content": "1,250 điểm", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}]}]} + ]}, + {"type": "frame", "id": "SpaMobRight", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "SpaMobStaffBtn", "width": 40, "height": 40, "fill": "#EC4899", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaMobStaffIcon", "width": 20, "height": 20, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, + {"type": "frame", "id": "SpaMobCartBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SpaMobCartIcon", "width": 20, "height": 20, "iconFontName": "shopping-cart", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "frame", "id": "SpaMobCartBadge", "width": 18, "height": 18, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "position": "absolute", "top": -4, "right": -4, "children": [{"type": "text", "id": "SpaMobCartBadgeText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}]} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "SpaMobSearch", + "width": "fill_container", + "padding": [12, 16], + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "children": [ + {"type": "frame", "id": "SpaMobSearchBox", "width": "fill_container", "height": 44, "fill": "$bg-surface", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SpaMobSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "SpaMobSearchText", "fill": "$text-tertiary", "content": "Tìm dịch vụ...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"} + ]} + ] + }, + { + "type": "frame", + "id": "SpaMobCategories", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "padding": [10, 16], + "gap": 8, + "children": [ + {"type": "frame", "id": "SpaMobCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "SpaMobCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "frame", "id": "SpaMobCatSkin", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "SpaMobCatSkinText", "fill": "$text-secondary", "content": "Da", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "frame", "id": "SpaMobCatMassage", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "SpaMobCatMassageText", "fill": "$text-secondary", "content": "Massage", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "frame", "id": "SpaMobCatNail", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "SpaMobCatNailText", "fill": "$text-secondary", "content": "Nail", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} + ] + }, + { + "type": "frame", + "id": "SpaMobProducts", + "width": "fill_container", + "height": "fill_container", + "padding": 12, + "layout": "vertical", + "gap": 12, + "clip": true, + "children": [ + {"type": "frame", "id": "SpaMobProdRow1", "width": "fill_container", "gap": 12, "children": [ + {"type": "frame", "id": "SpaMobProd1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaMobProd1Img", "width": "fill_container", "height": 100, "fill": "#EC489930"}, {"type": "frame", "id": "SpaMobProd1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "SpaMobProd1Name", "fill": "$text-primary", "content": "Facial Cơ Bản", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "frame", "id": "SpaMobProd1Meta", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "SpaMobProd1Duration", "fill": "$text-tertiary", "content": "60 phút", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "text", "id": "SpaMobProd1Price", "fill": "$orange-primary", "content": "350,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}]}, + {"type": "frame", "id": "SpaMobProd2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaMobProd2Img", "width": "fill_container", "height": 100, "fill": "#8B5CF630"}, {"type": "frame", "id": "SpaMobProd2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "SpaMobProd2Name", "fill": "$text-primary", "content": "Massage Body", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "frame", "id": "SpaMobProd2Meta", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "SpaMobProd2Duration", "fill": "$text-tertiary", "content": "90 phút", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "text", "id": "SpaMobProd2Price", "fill": "$orange-primary", "content": "550,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}]} + ]}, + {"type": "frame", "id": "SpaMobProdRow2", "width": "fill_container", "gap": 12, "children": [ + {"type": "frame", "id": "SpaMobProd3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaMobProd3Img", "width": "fill_container", "height": 100, "fill": "#F59E0B30"}, {"type": "frame", "id": "SpaMobProd3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "SpaMobProd3Name", "fill": "$text-primary", "content": "Nail Gel", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "frame", "id": "SpaMobProd3Meta", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "SpaMobProd3Duration", "fill": "$text-tertiary", "content": "45 phút", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "text", "id": "SpaMobProd3Price", "fill": "$orange-primary", "content": "200,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}]}, + {"type": "frame", "id": "SpaMobProd4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaMobProd4Img", "width": "fill_container", "height": 100, "fill": "#22C55E30"}, {"type": "frame", "id": "SpaMobProd4Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "SpaMobProd4Name", "fill": "$text-primary", "content": "Gội Đầu Dưỡng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "frame", "id": "SpaMobProd4Meta", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "SpaMobProd4Duration", "fill": "$text-tertiary", "content": "30 phút", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "text", "id": "SpaMobProd4Price", "fill": "$orange-primary", "content": "150,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}]} + ]}, + {"type": "frame", "id": "SpaMobProdRow3", "width": "fill_container", "gap": 12, "children": [ + {"type": "frame", "id": "SpaMobProd5", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaMobProd5Img", "width": "fill_container", "height": 100, "fill": "#3B82F630"}, {"type": "frame", "id": "SpaMobProd5Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "SpaMobProd5Name", "fill": "$text-primary", "content": "Tẩy Tế Bào Chết", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "frame", "id": "SpaMobProd5Meta", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "SpaMobProd5Duration", "fill": "$text-tertiary", "content": "45 phút", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "text", "id": "SpaMobProd5Price", "fill": "$orange-primary", "content": "280,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}]}, + {"type": "frame", "id": "SpaMobProd6", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaMobProd6Img", "width": "fill_container", "height": 100, "fill": "#EC489930"}, {"type": "frame", "id": "SpaMobProd6Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "SpaMobProd6Name", "fill": "$text-primary", "content": "Facial Nâng Cao", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "frame", "id": "SpaMobProd6Meta", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "SpaMobProd6Duration", "fill": "$text-tertiary", "content": "90 phút", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "text", "id": "SpaMobProd6Price", "fill": "$orange-primary", "content": "650,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}]} + ]} + ] + }, + { + "type": "frame", + "id": "SpaMobBottomBar", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, + "padding": [12, 16], + "layout": "vertical", + "gap": 8, + "children": [ + {"type": "frame", "id": "SpaMobPointsRow", "width": "fill_container", "justifyContent": "space_between", "children": [ + {"type": "frame", "id": "SpaMobPointsUse", "gap": 4, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaMobPointsIcon", "width": 14, "height": 14, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "SpaMobPointsLabel", "fill": "#22C55E", "content": "Dùng 500 điểm: -50K", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "text", "id": "SpaMobPointsEarn", "fill": "#F59E0B", "content": "+85 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} + ]}, + {"type": "frame", "id": "SpaMobPayRow", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "SpaMobTotal", "layout": "vertical", "gap": 0, "children": [ + {"type": "text", "id": "SpaMobTotalLabel", "fill": "$text-secondary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, + {"type": "text", "id": "SpaMobTotalValue", "fill": "$text-primary", "content": "850,000₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "SpaMobPayBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SpaMobPayIcon", "width": 20, "height": 20, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "SpaMobPayText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ]} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "bg-surface": {"type": "color", "value": "#111113"}, + "border-default": {"type": "color", "value": "#2A2A2E"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/spa/tablet.pen b/pencil-design/src/pages/tPOS/pos/spa/tablet.pen new file mode 100644 index 00000000..7957c021 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/spa/tablet.pen @@ -0,0 +1,128 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "POSSpaTablet", + "name": "POS Spa Tablet", + "reusable": true, + "width": 1024, + "height": 768, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "SpaTabHeader", + "width": "fill_container", + "height": 56, + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "padding": [0, 16], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "SpaTabLeft", "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "SpaTabLogoIcon", "width": 36, "height": 36, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaTabLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, + {"type": "frame", "id": "SpaTabCustomer", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "SpaTabAvatar", "width": 32, "height": 32, "fill": "#EC489920", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaTabAvatarText", "fill": "#EC4899", "content": "L", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, + {"type": "frame", "id": "SpaTabCustInfo", "layout": "vertical", "gap": 0, "children": [{"type": "text", "id": "SpaTabCustName", "fill": "$text-primary", "content": "Nguyễn Thị Lan", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "SpaTabCustVIP", "gap": 4, "alignItems": "center", "children": [{"type": "frame", "id": "SpaTabVIPBadge", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "SpaTabVIPText", "fill": "#F59E0B", "content": "VIP Gold", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}, {"type": "text", "id": "SpaTabPoints", "fill": "$text-secondary", "content": "1,250 điểm", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}]} + ]} + ]}, + {"type": "frame", "id": "SpaTabSearch", "width": 220, "height": 40, "fill": "$bg-surface", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 12], "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SpaTabSearchIcon", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "SpaTabSearchText", "fill": "$text-tertiary", "content": "Tìm dịch vụ...", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "SpaTabRight", "gap": 8, "alignItems": "center", "children": [ + {"type": "frame", "id": "SpaTabStaffBtn", "height": 36, "fill": "#EC4899", "cornerRadius": 8, "padding": [0, 12], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaTabStaffIcon", "width": 16, "height": 16, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "SpaTabStaffText", "fill": "$text-primary", "content": "Chọn NV", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, + {"type": "text", "id": "SpaTabTime", "fill": "$text-primary", "content": "23:48", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + }, + { + "type": "frame", + "id": "SpaTabCategories", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "padding": [10, 16], + "gap": 8, + "children": [ + {"type": "frame", "id": "SpaTabCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "SpaTabCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, + {"type": "frame", "id": "SpaTabCatSkin", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "SpaTabCatSkinText", "fill": "$text-secondary", "content": "Chăm sóc da", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "SpaTabCatMassage", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "SpaTabCatMassageText", "fill": "$text-secondary", "content": "Massage", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "SpaTabCatNail", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "SpaTabCatNailText", "fill": "$text-secondary", "content": "Nail", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "SpaTabCatHair", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "SpaTabCatHairText", "fill": "$text-secondary", "content": "Tóc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} + ] + }, + { + "type": "frame", + "id": "SpaTabMain", + "width": "fill_container", + "height": "fill_container", + "children": [ + { + "type": "frame", + "id": "SpaTabProducts", + "width": "fill_container", + "height": "fill_container", + "padding": 16, + "layout": "vertical", + "gap": 12, + "clip": true, + "children": [ + {"type": "frame", "id": "SpaTabProdRow1", "width": "fill_container", "gap": 12, "children": [ + {"type": "frame", "id": "SpaTabProd1", "width": 160, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaTabProd1Img", "width": "fill_container", "height": 85, "fill": "#EC489930"}, {"type": "frame", "id": "SpaTabProd1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "SpaTabProd1Name", "fill": "$text-primary", "content": "Facial Cơ Bản", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "SpaTabProd1Meta", "gap": 6, "alignItems": "center", "children": [{"type": "text", "id": "SpaTabProd1Duration", "fill": "$text-tertiary", "content": "60 phút", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}, {"type": "text", "id": "SpaTabProd1Price", "fill": "$orange-primary", "content": "350,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}]}]}, + {"type": "frame", "id": "SpaTabProd2", "width": 160, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaTabProd2Img", "width": "fill_container", "height": 85, "fill": "#8B5CF630"}, {"type": "frame", "id": "SpaTabProd2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "SpaTabProd2Name", "fill": "$text-primary", "content": "Massage Body", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "SpaTabProd2Meta", "gap": 6, "alignItems": "center", "children": [{"type": "text", "id": "SpaTabProd2Duration", "fill": "$text-tertiary", "content": "90 phút", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}, {"type": "text", "id": "SpaTabProd2Price", "fill": "$orange-primary", "content": "550,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}]}]}, + {"type": "frame", "id": "SpaTabProd3", "width": 160, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaTabProd3Img", "width": "fill_container", "height": 85, "fill": "#F59E0B30"}, {"type": "frame", "id": "SpaTabProd3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "SpaTabProd3Name", "fill": "$text-primary", "content": "Nail Gel", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "SpaTabProd3Meta", "gap": 6, "alignItems": "center", "children": [{"type": "text", "id": "SpaTabProd3Duration", "fill": "$text-tertiary", "content": "45 phút", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}, {"type": "text", "id": "SpaTabProd3Price", "fill": "$orange-primary", "content": "200,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}]}]} + ]} + ] + }, + { + "type": "frame", + "id": "SpaTabCart", + "width": 300, + "height": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, + "layout": "vertical", + "children": [ + {"type": "frame", "id": "SpaTabCartHeader", "width": "fill_container", "padding": [12, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "text", "id": "SpaTabCartTitle", "fill": "$text-primary", "content": "Dịch vụ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "SpaTabCartItems", "fill": "$text-secondary", "content": "2 dịch vụ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "SpaTabCartItems2", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ + {"type": "frame", "id": "SpaTabCartItem1", "width": "fill_container", "padding": [10, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaTabCartItem1Left", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaTabCartItem1Name", "fill": "$text-primary", "content": "Facial Cơ Bản", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "SpaTabCartItem1Staff", "gap": 4, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaTabCartItem1StaffIcon", "width": 12, "height": 12, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#EC4899"}, {"type": "text", "id": "SpaTabCartItem1StaffName", "fill": "#EC4899", "content": "Hồng Nhung", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]}]}, {"type": "text", "id": "SpaTabCartItem1Price", "fill": "$text-primary", "content": "350,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "frame", "id": "SpaTabCartItem2", "width": "fill_container", "padding": [10, 16], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaTabCartItem2Left", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaTabCartItem2Name", "fill": "$text-primary", "content": "Massage Body", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "SpaTabCartItem2Staff", "gap": 4, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaTabCartItem2StaffIcon", "width": 12, "height": 12, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#EC4899"}, {"type": "text", "id": "SpaTabCartItem2StaffName", "fill": "#EC4899", "content": "Minh Tâm", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]}]}, {"type": "text", "id": "SpaTabCartItem2Price", "fill": "$text-primary", "content": "550,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} + ]}, + {"type": "frame", "id": "SpaTabCartSummary", "width": "fill_container", "fill": "$bg-surface", "layout": "vertical", "padding": 14, "gap": 6, "children": [ + {"type": "frame", "id": "SpaTabCartSubtotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SpaTabCartSubtotalLabel", "fill": "$text-secondary", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, {"type": "text", "id": "SpaTabCartSubtotalValue", "fill": "$text-primary", "content": "900,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "frame", "id": "SpaTabCartPoints", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SpaTabCartPointsLabel", "fill": "#22C55E", "content": "Dùng 500 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "SpaTabCartPointsValue", "fill": "#22C55E", "content": "-50,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "frame", "id": "SpaTabCartTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SpaTabCartTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "text", "id": "SpaTabCartTotalValue", "fill": "$orange-primary", "content": "850,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]}, + {"type": "frame", "id": "SpaTabCartEarn", "width": "fill_container", "justifyContent": "center", "children": [{"type": "text", "id": "SpaTabCartEarnText", "fill": "#F59E0B", "content": "+85 điểm sau thanh toán", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}]} + ]}, + {"type": "frame", "id": "SpaTabPayBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "SpaTabPayIcon", "width": 18, "height": 18, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "SpaTabPayText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + } + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "bg-surface": {"type": "color", "value": "#111113"}, + "border-default": {"type": "color", "value": "#2A2A2E"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/spa/workflow/customer-lookup.pen b/pencil-design/src/pages/tPOS/pos/spa/workflow/customer-lookup.pen new file mode 100644 index 00000000..26483978 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/spa/workflow/customer-lookup.pen @@ -0,0 +1,170 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "SpaCustomerLookup", + "name": "Spa/Customer Lookup", + "reusable": true, + "width": 480, + "height": 640, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "LookupHeader", + "width": "fill_container", + "padding": [20, 24], + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "LookupLeft", "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "LookupCloseBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "LookupCloseIcon", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]}, + {"type": "text", "id": "LookupTitle", "fill": "$text-primary", "content": "Tìm khách hàng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} + ]}, + {"type": "frame", "id": "LookupNewBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "LookupNewIcon", "width": 18, "height": 18, "iconFontName": "user-plus", "iconFontFamily": "lucide", "fill": "$text-primary"}, + {"type": "text", "id": "LookupNewText", "fill": "$text-primary", "content": "Tạo mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + }, + { + "type": "frame", + "id": "LookupSearch", + "width": "fill_container", + "padding": [16, 24], + "fill": "$bg-elevated", + "children": [ + {"type": "frame", "id": "LookupSearchBox", "width": "fill_container", "height": 52, "fill": "$bg-surface", "cornerRadius": 14, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 16], "gap": 12, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "LookupSearchIcon", "width": 22, "height": 22, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "text", "id": "LookupSearchText", "fill": "$text-primary", "content": "Nguyễn", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "normal"}, + {"type": "frame", "id": "LookupSearchClear", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "LookupSearchClearIcon", "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "LookupResults", + "width": "fill_container", + "height": "fill_container", + "padding": 24, + "layout": "vertical", + "gap": 12, + "clip": true, + "children": [ + {"type": "text", "id": "ResultsCount", "fill": "$text-tertiary", "content": "3 kết quả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, + { + "type": "frame", + "id": "Customer1", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": {"thickness": 2, "fill": "$orange-primary"}, + "padding": 16, + "gap": 16, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "Customer1Avatar", "width": 56, "height": 56, "fill": "#EC489920", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Customer1AvatarText", "fill": "#EC4899", "content": "NL", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}, + {"type": "frame", "id": "Customer1Info", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ + {"type": "frame", "id": "Customer1NameRow", "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "Customer1Name", "fill": "$text-primary", "content": "Nguyễn Thị Lan", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, + {"type": "frame", "id": "Customer1VIP", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "Customer1VIPText", "fill": "#F59E0B", "content": "VIP Gold", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]} + ]}, + {"type": "text", "id": "Customer1Phone", "fill": "$text-secondary", "content": "0901 234 567", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, + {"type": "frame", "id": "Customer1Stats", "gap": 16, "children": [ + {"type": "text", "id": "Customer1Points", "fill": "#22C55E", "content": "1,250 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, + {"type": "text", "id": "Customer1Visits", "fill": "$text-tertiary", "content": "28 lượt", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} + ]} + ]}, + {"type": "icon_font", "id": "Customer1Check", "width": 24, "height": 24, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "$orange-primary"} + ] + }, + { + "type": "frame", + "id": "Customer2", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "padding": 16, + "gap": 16, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "Customer2Avatar", "width": 56, "height": 56, "fill": "#3B82F620", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Customer2AvatarText", "fill": "#3B82F6", "content": "NH", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}, + {"type": "frame", "id": "Customer2Info", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ + {"type": "text", "id": "Customer2Name", "fill": "$text-primary", "content": "Nguyễn Hoàng Anh", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, + {"type": "text", "id": "Customer2Phone", "fill": "$text-secondary", "content": "0912 345 678", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, + {"type": "frame", "id": "Customer2Stats", "gap": 16, "children": [ + {"type": "text", "id": "Customer2Points", "fill": "#22C55E", "content": "320 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, + {"type": "text", "id": "Customer2Visits", "fill": "$text-tertiary", "content": "5 lượt", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} + ]} + ]}, + {"type": "icon_font", "id": "Customer2Arrow", "width": 20, "height": 20, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ] + }, + { + "type": "frame", + "id": "Customer3", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "padding": 16, + "gap": 16, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "Customer3Avatar", "width": 56, "height": 56, "fill": "#22C55E20", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Customer3AvatarText", "fill": "#22C55E", "content": "NM", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}, + {"type": "frame", "id": "Customer3Info", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ + {"type": "text", "id": "Customer3Name", "fill": "$text-primary", "content": "Nguyễn Minh Châu", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, + {"type": "text", "id": "Customer3Phone", "fill": "$text-secondary", "content": "0987 654 321", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, + {"type": "frame", "id": "Customer3Stats", "gap": 16, "children": [ + {"type": "text", "id": "Customer3Points", "fill": "#22C55E", "content": "85 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, + {"type": "text", "id": "Customer3Visits", "fill": "$text-tertiary", "content": "2 lượt", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} + ]} + ]}, + {"type": "icon_font", "id": "Customer3Arrow", "width": 20, "height": 20, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ] + } + ] + }, + { + "type": "frame", + "id": "LookupFooter", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [16, 24], + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, + "gap": 12, + "children": [ + {"type": "frame", "id": "LookupSkipBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "LookupSkipText", "fill": "$text-secondary", "content": "Bỏ qua", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ]}, + {"type": "frame", "id": "LookupSelectBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "LookupSelectText", "fill": "$text-primary", "content": "Chọn khách hàng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "bg-surface": {"type": "color", "value": "#111113"}, + "border-default": {"type": "color", "value": "#2A2A2E"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/spa/workflow/staff-assign.pen b/pencil-design/src/pages/tPOS/pos/spa/workflow/staff-assign.pen new file mode 100644 index 00000000..1672e2bc --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/spa/workflow/staff-assign.pen @@ -0,0 +1,180 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "SpaStaffAssign", + "name": "Spa/Staff Assignment", + "reusable": true, + "width": 480, + "height": 640, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "StaffHeader", + "width": "fill_container", + "padding": [20, 24], + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "StaffLeft", "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "StaffBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "icon_font", "id": "StaffBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"} + ]}, + {"type": "frame", "id": "StaffTitleInfo", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "StaffTitle", "fill": "$text-primary", "content": "Chọn nhân viên", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, + {"type": "text", "id": "StaffService", "fill": "$text-tertiary", "content": "Facial Cơ Bản • 60 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "StaffFilters", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "padding": [12, 24], + "gap": 8, + "children": [ + {"type": "frame", "id": "FilterAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "FilterAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, + {"type": "frame", "id": "FilterAvailable", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "FilterAvailableText", "fill": "$text-secondary", "content": "Đang rảnh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "FilterSkilled", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "FilterSkilledText", "fill": "$text-secondary", "content": "Chuyên môn cao", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} + ] + }, + { + "type": "frame", + "id": "StaffList", + "width": "fill_container", + "height": "fill_container", + "padding": 24, + "layout": "vertical", + "gap": 12, + "clip": true, + "children": [ + { + "type": "frame", + "id": "Staff1", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": {"thickness": 2, "fill": "$orange-primary"}, + "padding": 16, + "gap": 16, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "Staff1Avatar", "width": 60, "height": 60, "fill": "#EC489930", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Staff1AvatarText", "fill": "#EC4899", "content": "HN", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]}, + {"type": "frame", "id": "Staff1Info", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ + {"type": "frame", "id": "Staff1NameRow", "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "Staff1Name", "fill": "$text-primary", "content": "Hồng Nhung", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, + {"type": "frame", "id": "Staff1StatusBadge", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "children": [{"type": "text", "id": "Staff1StatusText", "fill": "#22C55E", "content": "Rảnh", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]} + ]}, + {"type": "frame", "id": "Staff1Skills", "gap": 8, "children": [ + {"type": "frame", "id": "Staff1Skill1", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "Staff1Skill1Text", "fill": "$text-secondary", "content": "Facial", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]}, + {"type": "frame", "id": "Staff1Skill2", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "Staff1Skill2Text", "fill": "$text-secondary", "content": "Massage", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]} + ]}, + {"type": "frame", "id": "Staff1Rating", "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Staff1Star", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, + {"type": "text", "id": "Staff1RatingValue", "fill": "#F59E0B", "content": "4.9", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "text", "id": "Staff1Reviews", "fill": "$text-tertiary", "content": "(128 đánh giá)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} + ]} + ]}, + {"type": "icon_font", "id": "Staff1Check", "width": 24, "height": 24, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "$orange-primary"} + ] + }, + { + "type": "frame", + "id": "Staff2", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "padding": 16, + "gap": 16, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "Staff2Avatar", "width": 60, "height": 60, "fill": "#8B5CF630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Staff2AvatarText", "fill": "#8B5CF6", "content": "MT", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]}, + {"type": "frame", "id": "Staff2Info", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ + {"type": "frame", "id": "Staff2NameRow", "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "Staff2Name", "fill": "$text-primary", "content": "Minh Tâm", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, + {"type": "frame", "id": "Staff2StatusBadge", "fill": "#F59E0B20", "cornerRadius": 100, "padding": [4, 10], "children": [{"type": "text", "id": "Staff2StatusText", "fill": "#F59E0B", "content": "Bận đến 14:30", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]} + ]}, + {"type": "frame", "id": "Staff2Skills", "gap": 8, "children": [ + {"type": "frame", "id": "Staff2Skill1", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "Staff2Skill1Text", "fill": "$text-secondary", "content": "Massage", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]}, + {"type": "frame", "id": "Staff2Skill2", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "Staff2Skill2Text", "fill": "$text-secondary", "content": "Body", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]} + ]}, + {"type": "frame", "id": "Staff2Rating", "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Staff2Star", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, + {"type": "text", "id": "Staff2RatingValue", "fill": "#F59E0B", "content": "4.8", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "text", "id": "Staff2Reviews", "fill": "$text-tertiary", "content": "(95 đánh giá)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} + ]} + ]}, + {"type": "icon_font", "id": "Staff2Arrow", "width": 20, "height": 20, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ] + }, + { + "type": "frame", + "id": "Staff3", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 16, + "stroke": {"thickness": 1, "fill": "$border-default"}, + "padding": 16, + "gap": 16, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "Staff3Avatar", "width": 60, "height": 60, "fill": "#3B82F630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Staff3AvatarText", "fill": "#3B82F6", "content": "TL", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]}, + {"type": "frame", "id": "Staff3Info", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ + {"type": "frame", "id": "Staff3NameRow", "gap": 10, "alignItems": "center", "children": [ + {"type": "text", "id": "Staff3Name", "fill": "$text-primary", "content": "Thanh Lan", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, + {"type": "frame", "id": "Staff3StatusBadge", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "children": [{"type": "text", "id": "Staff3StatusText", "fill": "#22C55E", "content": "Rảnh", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]} + ]}, + {"type": "frame", "id": "Staff3Skills", "gap": 8, "children": [ + {"type": "frame", "id": "Staff3Skill1", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "Staff3Skill1Text", "fill": "$text-secondary", "content": "Nail", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]}, + {"type": "frame", "id": "Staff3Skill2", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "Staff3Skill2Text", "fill": "$text-secondary", "content": "Facial", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]} + ]}, + {"type": "frame", "id": "Staff3Rating", "gap": 8, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Staff3Star", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, + {"type": "text", "id": "Staff3RatingValue", "fill": "#F59E0B", "content": "4.7", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "text", "id": "Staff3Reviews", "fill": "$text-tertiary", "content": "(62 đánh giá)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} + ]} + ]}, + {"type": "icon_font", "id": "Staff3Arrow", "width": 20, "height": 20, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} + ] + } + ] + }, + { + "type": "frame", + "id": "StaffFooter", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [16, 24], + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, + "children": [ + {"type": "frame", "id": "StaffConfirmBtn", "width": "fill_container", "height": 56, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [ + {"type": "text", "id": "StaffConfirmText", "fill": "$text-primary", "content": "Xác nhận • Hồng Nhung", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "bg-surface": {"type": "color", "value": "#111113"}, + "border-default": {"type": "color", "value": "#2A2A2E"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/workflows/cafe-workflow.pen b/pencil-design/src/pages/tPOS/pos/workflows/cafe-workflow.pen new file mode 100644 index 00000000..16fd1462 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/workflows/cafe-workflow.pen @@ -0,0 +1,160 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "CafeWorkflow", + "name": "Workflow/Cafe", + "reusable": true, + "width": 1400, + "height": 900, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "WFHeader", + "width": "fill_container", + "padding": [20, 32], + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "WFTitle", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "WFTitleText", "fill": "$text-primary", "content": "☕ CAFÉ WORKFLOW", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, + {"type": "text", "id": "WFSubtitle", "fill": "$text-secondary", "content": "Quick Service • Pre-Pay Model", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "WFBadges", "gap": 12, "children": [ + {"type": "frame", "id": "WFBadge1", "fill": "#F59E0B20", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge1Text", "fill": "#F59E0B", "content": "💳 Loyalty", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "frame", "id": "WFBadge2", "fill": "#EC489920", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge2Text", "fill": "#EC4899", "content": "🏷️ Discount", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "frame", "id": "WFBadge3", "fill": "#22C55E20", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge3Text", "fill": "#22C55E", "content": "5-10 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} + ]} + ] + }, + { + "type": "frame", + "id": "WFContent", + "width": "fill_container", + "height": "fill_container", + "padding": [32, 40], + "layout": "vertical", + "gap": 24, + "justifyContent": "center", + "alignItems": "center", + "clip": true, + "children": [ + {"type": "frame", "id": "WFRow1", "gap": 16, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep1", "width": 140, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep1Icon", "width": "fill_container", "height": 70, "fill": "#3B82F620", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep1Ic", "width": 32, "height": 32, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#3B82F6"}]}, + {"type": "frame", "id": "WFStep1Info", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep1Num", "width": 24, "height": 24, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep1NumT", "fill": "#FFF", "content": "1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep1Title", "fill": "$text-primary", "content": "Khách đến", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow1", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep2", "width": 140, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#EC4899"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep2Icon", "width": "fill_container", "height": 70, "fill": "#EC4899", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep2Ic", "width": 32, "height": 32, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "#FFF"}]}, + {"type": "frame", "id": "WFStep2Info", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep2Num", "width": 24, "height": 24, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep2NumT", "fill": "#FFF", "content": "2", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep2Title", "fill": "$text-primary", "content": "Tìm KH?", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "text", "id": "WFStep2Desc", "fill": "$text-tertiary", "content": "Optional", "fontFamily": "Roboto", "fontSize": 10} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow2", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep3", "width": 140, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep3Icon", "width": "fill_container", "height": 70, "fill": "$orange-primary", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep3Ic", "width": 32, "height": 32, "iconFontName": "clipboard-list", "iconFontFamily": "lucide", "fill": "#FFF"}]}, + {"type": "frame", "id": "WFStep3Info", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep3Num", "width": 24, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep3NumT", "fill": "#FFF", "content": "3", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep3Title", "fill": "$text-primary", "content": "Chọn món", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "frame", "id": "WFStep3Scr", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "WFStep3ScrT", "fill": "$text-secondary", "content": "desktop.pen", "fontFamily": "Roboto", "fontSize": 9}]} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow3", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep4", "width": 140, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#F59E0B"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep4Icon", "width": "fill_container", "height": 70, "fill": "#F59E0B", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep4Ic", "width": 32, "height": 32, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "#FFF"}]}, + {"type": "frame", "id": "WFStep4Info", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep4Num", "width": 24, "height": 24, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep4NumT", "fill": "#FFF", "content": "4", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep4Title", "fill": "$text-primary", "content": "Giảm giá?", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "frame", "id": "WFStep4Scr", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "WFStep4ScrT", "fill": "$text-secondary", "content": "discount.pen", "fontFamily": "Roboto", "fontSize": 9}]} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow4", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep5", "width": 140, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#22C55E"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep5Icon", "width": "fill_container", "height": 70, "fill": "#22C55E", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep5Ic", "width": 32, "height": 32, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#FFF"}]}, + {"type": "frame", "id": "WFStep5Info", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep5Num", "width": 24, "height": 24, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep5NumT", "fill": "#FFF", "content": "5", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep5Title", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}, + {"type": "frame", "id": "WFStep5Scr", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "WFStep5ScrT", "fill": "$text-secondary", "content": "payment/*.pen", "fontFamily": "Roboto", "fontSize": 9}]} + ]} + ]} + ]}, + {"type": "frame", "id": "WFRow2", "gap": 16, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep6", "width": 140, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#14B8A6"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep6Icon", "width": "fill_container", "height": 70, "fill": "#14B8A6", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep6Ic", "width": 32, "height": 32, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#FFF"}]}, + {"type": "frame", "id": "WFStep6Info", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep6Num", "width": 24, "height": 24, "fill": "#14B8A6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep6NumT", "fill": "#FFF", "content": "6", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep6Title", "fill": "$text-primary", "content": "+Tích điểm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "text", "id": "WFStep6Desc", "fill": "$text-tertiary", "content": "1đ / 10K", "fontFamily": "Roboto", "fontSize": 10} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow6", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep7", "width": 140, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep7Icon", "width": "fill_container", "height": 70, "fill": "#8B5CF620", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep7Ic", "width": 32, "height": 32, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#8B5CF6"}]}, + {"type": "frame", "id": "WFStep7Info", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep7Num", "width": 24, "height": 24, "fill": "#8B5CF6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep7NumT", "fill": "#FFF", "content": "7", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep7Title", "fill": "$text-primary", "content": "Pha chế", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "frame", "id": "WFStep7Scr", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "WFStep7ScrT", "fill": "$text-secondary", "content": "barista.pen", "fontFamily": "Roboto", "fontSize": 9}]} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow7", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep8", "width": 140, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#06B6D4"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep8Icon", "width": "fill_container", "height": 70, "fill": "#06B6D4", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep8Ic", "width": 32, "height": 32, "iconFontName": "bell", "iconFontFamily": "lucide", "fill": "#FFF"}]}, + {"type": "frame", "id": "WFStep8Info", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep8Num", "width": 24, "height": 24, "fill": "#06B6D4", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep8NumT", "fill": "#FFF", "content": "8", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep8Title", "fill": "$text-primary", "content": "Gọi số", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "frame", "id": "WFStep8Scr", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "WFStep8ScrT", "fill": "$text-secondary", "content": "queue.pen", "fontFamily": "Roboto", "fontSize": 9}]} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow8", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep9", "width": 140, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep9Icon", "width": "fill_container", "height": 70, "fill": "#6B728020", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep9Ic", "width": 32, "height": 32, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, + {"type": "frame", "id": "WFStep9Info", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep9Num", "width": 24, "height": 24, "fill": "#6B7280", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep9NumT", "fill": "#FFF", "content": "9", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep9Title", "fill": "$text-primary", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "WFFooter", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [16, 32], + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, + "gap": 24, + "justifyContent": "center", + "children": [ + {"type": "frame", "id": "WFL1", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "WFL1D", "width": 16, "height": 16, "fill": "#22C55E", "cornerRadius": 4}, {"type": "text", "id": "WFL1T", "fill": "$text-secondary", "content": "Thanh toán (PRE-PAY)", "fontFamily": "Roboto", "fontSize": 11}]}, + {"type": "frame", "id": "WFL2", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "WFL2D", "width": 16, "height": 16, "fill": "#F59E0B", "cornerRadius": 4}, {"type": "text", "id": "WFL2T", "fill": "$text-secondary", "content": "Discount", "fontFamily": "Roboto", "fontSize": 11}]}, + {"type": "frame", "id": "WFL3", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "WFL3D", "width": 16, "height": 16, "fill": "#14B8A6", "cornerRadius": 4}, {"type": "text", "id": "WFL3T", "fill": "$text-secondary", "content": "Loyalty Points", "fontFamily": "Roboto", "fontSize": 11}]}, + {"type": "frame", "id": "WFL4", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "WFL4D", "width": 16, "height": 16, "fill": "#EC4899", "cornerRadius": 4}, {"type": "text", "id": "WFL4T", "fill": "$text-secondary", "content": "Customer Lookup", "fontFamily": "Roboto", "fontSize": 11}]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/workflows/karaoke-workflow.pen b/pencil-design/src/pages/tPOS/pos/workflows/karaoke-workflow.pen new file mode 100644 index 00000000..f1870fa6 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/workflows/karaoke-workflow.pen @@ -0,0 +1,158 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "KaraokeWorkflow", + "name": "Workflow/Karaoke", + "reusable": true, + "width": 1400, + "height": 1000, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "WFHeader", + "width": "fill_container", + "padding": [24, 40], + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "WFTitle", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "WFTitleText", "fill": "$text-primary", "content": "🎤 KARAOKE WORKFLOW", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, + {"type": "text", "id": "WFSubtitle", "fill": "$text-secondary", "content": "Time-Based Service • Post-Pay Model", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "WFBadge", "fill": "#8B5CF620", "cornerRadius": 12, "padding": [10, 20], "children": [ + {"type": "text", "id": "WFBadgeText", "fill": "#8B5CF6", "content": "1-4 giờ / phòng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + }, + { + "type": "frame", + "id": "WFContent", + "width": "fill_container", + "height": "fill_container", + "padding": 40, + "layout": "vertical", + "gap": 32, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "WFRow1", "gap": 24, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep1", "width": 170, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep1Icon", "width": "fill_container", "height": 70, "fill": "#3B82F620", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep1IconInner", "width": 32, "height": 32, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#3B82F6"}]}, + {"type": "frame", "id": "WFStep1Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep1Num", "width": 26, "height": 26, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep1NumText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep1Title", "fill": "$text-primary", "content": "Khách đến", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow1", "width": 22, "height": 22, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep2", "width": 170, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep2Icon", "width": "fill_container", "height": 70, "fill": "#8B5CF6", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep2IconInner", "width": 32, "height": 32, "iconFontName": "door-open", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, + {"type": "frame", "id": "WFStep2Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep2Num", "width": 26, "height": 26, "fill": "#8B5CF6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep2NumText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep2Title", "fill": "$text-primary", "content": "Chọn phòng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "frame", "id": "WFStep2Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFStep2ScreenText", "fill": "$text-secondary", "content": "room-map.pen", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"}]} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow2", "width": 22, "height": 22, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep3", "width": 170, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#F59E0B"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep3Icon", "width": "fill_container", "height": 70, "fill": "#F59E0B", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep3IconInner", "width": 32, "height": 32, "iconFontName": "play", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, + {"type": "frame", "id": "WFStep3Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep3Num", "width": 26, "height": 26, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep3NumText", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep3Title", "fill": "$text-primary", "content": "⏱️ Mở phòng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "text", "id": "WFStep3Desc", "fill": "$text-tertiary", "content": "Timer bắt đầu", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow3", "width": 22, "height": 22, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep4", "width": 170, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep4Icon", "width": "fill_container", "height": 70, "fill": "#EC489920", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep4IconInner", "width": 32, "height": 32, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#EC4899"}]}, + {"type": "frame", "id": "WFStep4Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep4Num", "width": 26, "height": 26, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep4NumText", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep4Title", "fill": "$text-primary", "content": "Hát karaoke", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]} + ]} + ]}, + {"type": "frame", "id": "WFLoopBox", "fill": "#8B5CF610", "cornerRadius": 20, "stroke": {"thickness": 2, "fill": "#8B5CF6", "dashArray": [8, 4]}, "padding": [24, 40], "layout": "vertical", "gap": 20, "alignItems": "center", "children": [ + {"type": "text", "id": "WFLoopLabel", "fill": "#8B5CF6", "content": "🔄 TRONG PHÒNG", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "frame", "id": "WFLoopSteps", "gap": 20, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFLoopStep1", "width": 150, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "WFLoopStep1Icon", "width": 28, "height": 28, "iconFontName": "beer", "iconFontFamily": "lucide", "fill": "$orange-primary"}, {"type": "text", "id": "WFLoopStep1Title", "fill": "$text-primary", "content": "Order đồ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "WFLoopStep1Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFLoopStep1ScreenText", "fill": "$text-secondary", "content": "desktop.pen", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"}]}]}, + {"type": "icon_font", "id": "WFLoopArrow1", "width": 18, "height": 18, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "frame", "id": "WFLoopStep2", "width": 150, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "#F59E0B"}, "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "WFLoopStep2Icon", "width": 28, "height": 28, "iconFontName": "alarm-clock", "iconFontFamily": "lucide", "fill": "#F59E0B"}, {"type": "text", "id": "WFLoopStep2Title", "fill": "$text-primary", "content": "Sắp hết giờ?", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "WFLoopStep2Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFLoopStep2ScreenText", "fill": "$text-secondary", "content": "room-session.pen", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"}]}]}, + {"type": "icon_font", "id": "WFLoopArrow2", "width": 18, "height": 18, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "frame", "id": "WFLoopStep3", "width": 150, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "WFLoopStep3Icon", "width": 28, "height": 28, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, {"type": "text", "id": "WFLoopStep3Title", "fill": "$text-primary", "content": "Gia hạn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "icon_font", "id": "WFLoopArrow3", "width": 18, "height": 18, "iconFontName": "corner-up-left", "iconFontFamily": "lucide", "fill": "#8B5CF6"} + ]} + ]}, + {"type": "frame", "id": "WFRow2", "gap": 24, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep5", "width": 170, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#EF4444"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep5Icon", "width": "fill_container", "height": 70, "fill": "#EF4444", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep5IconInner", "width": 32, "height": 32, "iconFontName": "square", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, + {"type": "frame", "id": "WFStep5Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep5Num", "width": 26, "height": 26, "fill": "#EF4444", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep5NumText", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep5Title", "fill": "$text-primary", "content": "⏹️ Kết thúc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "text", "id": "WFStep5Desc", "fill": "$text-tertiary", "content": "Timer dừng", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow5", "width": 22, "height": 22, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep6", "width": 170, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep6Icon", "width": "fill_container", "height": 70, "fill": "#EC489920", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep6IconInner", "width": 32, "height": 32, "iconFontName": "receipt", "iconFontFamily": "lucide", "fill": "#EC4899"}]}, + {"type": "frame", "id": "WFStep6Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep6Num", "width": 26, "height": 26, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep6NumText", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep6Title", "fill": "$text-primary", "content": "Xem bill", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "text", "id": "WFStep6Desc", "fill": "$text-tertiary", "content": "Phòng + F&B", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow6", "width": 22, "height": 22, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep7", "width": 170, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#22C55E"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep7Icon", "width": "fill_container", "height": 70, "fill": "#22C55E", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep7IconInner", "width": 32, "height": 32, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, + {"type": "frame", "id": "WFStep7Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep7Num", "width": 26, "height": 26, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep7NumText", "fill": "$text-primary", "content": "7", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep7Title", "fill": "$text-primary", "content": "THANH TOÁN", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}, + {"type": "frame", "id": "WFStep7Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFStep7ScreenText", "fill": "$text-secondary", "content": "payment/*.pen", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"}]} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow7", "width": 22, "height": 22, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep8", "width": 170, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep8Icon", "width": "fill_container", "height": 70, "fill": "#6B728020", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep8IconInner", "width": 32, "height": 32, "iconFontName": "log-out", "iconFontFamily": "lucide", "fill": "#6B7280"}]}, + {"type": "frame", "id": "WFStep8Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep8Num", "width": 26, "height": 26, "fill": "#6B7280", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep8NumText", "fill": "$text-primary", "content": "8", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep8Title", "fill": "$text-primary", "content": "Ra về", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "WFFooter", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [20, 40], + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, + "gap": 32, + "justifyContent": "center", + "children": [ + {"type": "frame", "id": "WFLegend1", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend1Dot", "width": 18, "height": 18, "fill": "#F59E0B", "cornerRadius": 6}, {"type": "text", "id": "WFLegend1Text", "fill": "$text-secondary", "content": "Timer chạy", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "frame", "id": "WFLegend2", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend2Dot", "width": 18, "height": 18, "fill": "#EF4444", "cornerRadius": 6}, {"type": "text", "id": "WFLegend2Text", "fill": "$text-secondary", "content": "Timer dừng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "frame", "id": "WFLegend3", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend3Dot", "width": 18, "height": 18, "fill": "#22C55E", "cornerRadius": 6}, {"type": "text", "id": "WFLegend3Text", "fill": "$text-secondary", "content": "Thanh toán (POST-PAY)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "frame", "id": "WFLegend4", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend4Dot", "width": 18, "height": 18, "fill": "#8B5CF6", "cornerRadius": 100, "stroke": {"thickness": 2, "fill": "#8B5CF6", "dashArray": [4, 2]}}, {"type": "text", "id": "WFLegend4Text", "fill": "$text-secondary", "content": "Loop (trong phòng)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "border-default": {"type": "color", "value": "#2A2A2E"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/workflows/restaurant-workflow.pen b/pencil-design/src/pages/tPOS/pos/workflows/restaurant-workflow.pen new file mode 100644 index 00000000..dad058ca --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/workflows/restaurant-workflow.pen @@ -0,0 +1,146 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "RestaurantWorkflow", + "name": "Workflow/Restaurant", + "reusable": true, + "width": 1400, + "height": 1000, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "WFHeader", + "width": "fill_container", + "padding": [24, 40], + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "WFTitle", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "WFTitleText", "fill": "$text-primary", "content": "🍽️ RESTAURANT WORKFLOW", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, + {"type": "text", "id": "WFSubtitle", "fill": "$text-secondary", "content": "Full Service • Post-Pay Model", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "WFBadge", "fill": "#EF444420", "cornerRadius": 12, "padding": [10, 20], "children": [ + {"type": "text", "id": "WFBadgeText", "fill": "#EF4444", "content": "30-90 phút / bàn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + }, + { + "type": "frame", + "id": "WFContent", + "width": "fill_container", + "height": "fill_container", + "padding": 40, + "layout": "vertical", + "gap": 32, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "WFRow1", "gap": 24, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep1", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep1Icon", "width": "fill_container", "height": 80, "fill": "#3B82F620", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep1IconInner", "width": 36, "height": 36, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#3B82F6"}]}, + {"type": "frame", "id": "WFStep1Info", "width": "fill_container", "padding": 16, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep1Num", "width": 28, "height": 28, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep1NumText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep1Title", "fill": "$text-primary", "content": "Khách đến", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow1", "width": 24, "height": 24, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep2", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep2Icon", "width": "fill_container", "height": 80, "fill": "#8B5CF6", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep2IconInner", "width": 36, "height": 36, "iconFontName": "layout-grid", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, + {"type": "frame", "id": "WFStep2Info", "width": "fill_container", "padding": 16, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep2Num", "width": 28, "height": 28, "fill": "#8B5CF6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep2NumText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep2Title", "fill": "$text-primary", "content": "Chọn bàn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "frame", "id": "WFStep2Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFStep2ScreenText", "fill": "$text-secondary", "content": "table-map.pen", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"}]} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow2", "width": 24, "height": 24, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep3", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep3Icon", "width": "fill_container", "height": 80, "fill": "$orange-primary", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep3IconInner", "width": 36, "height": 36, "iconFontName": "clipboard-list", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, + {"type": "frame", "id": "WFStep3Info", "width": "fill_container", "padding": 16, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep3Num", "width": 28, "height": 28, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep3NumText", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep3Title", "fill": "$text-primary", "content": "Order món", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "frame", "id": "WFStep3Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFStep3ScreenText", "fill": "$text-secondary", "content": "desktop.pen", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"}]} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow3", "width": 24, "height": 24, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep4", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#F59E0B"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep4Icon", "width": "fill_container", "height": 80, "fill": "#F59E0B", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep4IconInner", "width": 36, "height": 36, "iconFontName": "chef-hat", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, + {"type": "frame", "id": "WFStep4Info", "width": "fill_container", "padding": 16, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep4Num", "width": 28, "height": 28, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep4NumText", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep4Title", "fill": "$text-primary", "content": "Bếp nấu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "frame", "id": "WFStep4Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFStep4ScreenText", "fill": "$text-secondary", "content": "kitchen-display.pen", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"}]} + ]} + ]} + ]}, + {"type": "frame", "id": "WFLoopBox", "fill": "#3B82F610", "cornerRadius": 20, "stroke": {"thickness": 2, "fill": "#3B82F6", "dashArray": [8, 4]}, "padding": [24, 40], "layout": "vertical", "gap": 16, "alignItems": "center", "children": [ + {"type": "text", "id": "WFLoopLabel", "fill": "#3B82F6", "content": "🔄 LẶP LẠI: Order thêm món", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "frame", "id": "WFLoopSteps", "gap": 24, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep5", "width": 160, "fill": "$bg-elevated", "cornerRadius": 12, "padding": 16, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep5Icon", "width": 28, "height": 28, "iconFontName": "utensils", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "WFStep5Title", "fill": "$text-primary", "content": "Phục vụ món", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "icon_font", "id": "WFArrow5", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "frame", "id": "WFStep6", "width": 160, "fill": "$bg-elevated", "cornerRadius": 12, "padding": 16, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep6Icon", "width": 28, "height": 28, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$orange-primary"}, {"type": "text", "id": "WFStep6Title", "fill": "$text-primary", "content": "Thêm món?", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "icon_font", "id": "WFArrow6", "width": 20, "height": 20, "iconFontName": "corner-up-left", "iconFontFamily": "lucide", "fill": "#3B82F6"} + ]} + ]}, + {"type": "frame", "id": "WFRow2", "gap": 24, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep7", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep7Icon", "width": "fill_container", "height": 80, "fill": "#EC489920", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep7IconInner", "width": 36, "height": 36, "iconFontName": "receipt", "iconFontFamily": "lucide", "fill": "#EC4899"}]}, + {"type": "frame", "id": "WFStep7Info", "width": "fill_container", "padding": 16, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep7Num", "width": 28, "height": 28, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep7NumText", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep7Title", "fill": "$text-primary", "content": "Tính tiền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow7", "width": 24, "height": 24, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep8", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#22C55E"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep8Icon", "width": "fill_container", "height": 80, "fill": "#22C55E", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep8IconInner", "width": 36, "height": 36, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, + {"type": "frame", "id": "WFStep8Info", "width": "fill_container", "padding": 16, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep8Num", "width": 28, "height": 28, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep8NumText", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep8Title", "fill": "$text-primary", "content": "THANH TOÁN", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}, + {"type": "frame", "id": "WFStep8Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFStep8ScreenText", "fill": "$text-secondary", "content": "payment/*.pen", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"}]} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow8", "width": 24, "height": 24, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep9", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep9Icon", "width": "fill_container", "height": 80, "fill": "#6B728020", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep9IconInner", "width": 36, "height": 36, "iconFontName": "log-out", "iconFontFamily": "lucide", "fill": "#6B7280"}]}, + {"type": "frame", "id": "WFStep9Info", "width": "fill_container", "padding": 16, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep9Num", "width": 28, "height": 28, "fill": "#6B7280", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep9NumText", "fill": "$text-primary", "content": "7", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep9Title", "fill": "$text-primary", "content": "Ra về", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "WFFooter", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [20, 40], + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, + "gap": 40, + "justifyContent": "center", + "children": [ + {"type": "frame", "id": "WFLegend1", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend1Dot", "width": 20, "height": 20, "fill": "#22C55E", "cornerRadius": 6}, {"type": "text", "id": "WFLegend1Text", "fill": "$text-secondary", "content": "Điểm thanh toán (POST-PAY)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "WFLegend2", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend2Dot", "width": 20, "height": 20, "fill": "#F59E0B", "cornerRadius": 6}, {"type": "text", "id": "WFLegend2Text", "fill": "$text-secondary", "content": "Kitchen Display", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, + {"type": "frame", "id": "WFLegend3", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend3Dot", "width": 20, "height": 20, "fill": "#3B82F6", "cornerRadius": 100, "stroke": {"thickness": 2, "fill": "#3B82F6", "dashArray": [4, 2]}}, {"type": "text", "id": "WFLegend3Text", "fill": "$text-secondary", "content": "Loop (thêm món)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "border-default": {"type": "color", "value": "#2A2A2E"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} diff --git a/pencil-design/src/pages/tPOS/pos/workflows/spa-workflow.pen b/pencil-design/src/pages/tPOS/pos/workflows/spa-workflow.pen new file mode 100644 index 00000000..c311f809 --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/workflows/spa-workflow.pen @@ -0,0 +1,173 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "SpaWorkflow", + "name": "Workflow/Spa", + "reusable": true, + "width": 1400, + "height": 1000, + "fill": "$bg-page", + "layout": "vertical", + "clip": true, + "children": [ + { + "type": "frame", + "id": "WFHeader", + "width": "fill_container", + "padding": [24, 40], + "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + {"type": "frame", "id": "WFTitle", "layout": "vertical", "gap": 4, "children": [ + {"type": "text", "id": "WFTitleText", "fill": "$text-primary", "content": "💆 SPA WORKFLOW", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, + {"type": "text", "id": "WFSubtitle", "fill": "$text-secondary", "content": "Appointment Service • Post-Pay + Loyalty", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal"} + ]}, + {"type": "frame", "id": "WFBadge", "fill": "#EC489920", "cornerRadius": 12, "padding": [10, 20], "children": [ + {"type": "text", "id": "WFBadgeText", "fill": "#EC4899", "content": "30-120 phút / dịch vụ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]} + ] + }, + { + "type": "frame", + "id": "WFContent", + "width": "fill_container", + "height": "fill_container", + "padding": 40, + "layout": "vertical", + "gap": 32, + "alignItems": "center", + "children": [ + {"type": "frame", "id": "WFRow1", "gap": 20, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep1", "width": 160, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep1Icon", "width": "fill_container", "height": 70, "fill": "#3B82F620", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep1IconInner", "width": 32, "height": 32, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#3B82F6"}]}, + {"type": "frame", "id": "WFStep1Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep1Num", "width": 26, "height": 26, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep1NumText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep1Title", "fill": "$text-primary", "content": "Khách đến", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow1", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep2", "width": 160, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#EC4899"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep2Icon", "width": "fill_container", "height": 70, "fill": "#EC4899", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep2IconInner", "width": 32, "height": 32, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, + {"type": "frame", "id": "WFStep2Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep2Num", "width": 26, "height": 26, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep2NumText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep2Title", "fill": "$text-primary", "content": "Tìm khách", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "frame", "id": "WFStep2Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFStep2ScreenText", "fill": "$text-secondary", "content": "customer-lookup.pen", "fontFamily": "Roboto", "fontSize": 8, "fontWeight": "500"}]} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow2", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep3", "width": 160, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep3Icon", "width": "fill_container", "height": 70, "fill": "$orange-primary", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep3IconInner", "width": 32, "height": 32, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, + {"type": "frame", "id": "WFStep3Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep3Num", "width": 26, "height": 26, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep3NumText", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep3Title", "fill": "$text-primary", "content": "Chọn dịch vụ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "frame", "id": "WFStep3Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFStep3ScreenText", "fill": "$text-secondary", "content": "desktop.pen", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"}]} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow3", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep4", "width": 160, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep4Icon", "width": "fill_container", "height": 70, "fill": "#8B5CF6", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep4IconInner", "width": 32, "height": 32, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, + {"type": "frame", "id": "WFStep4Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep4Num", "width": 26, "height": 26, "fill": "#8B5CF6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep4NumText", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep4Title", "fill": "$text-primary", "content": "Chọn NV", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "frame", "id": "WFStep4Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFStep4ScreenText", "fill": "$text-secondary", "content": "staff-assign.pen", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"}]} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow4", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep5", "width": 160, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep5Icon", "width": "fill_container", "height": 70, "fill": "#F59E0B20", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep5IconInner", "width": 32, "height": 32, "iconFontName": "heart-handshake", "iconFontFamily": "lucide", "fill": "#F59E0B"}]}, + {"type": "frame", "id": "WFStep5Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep5Num", "width": 26, "height": 26, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep5NumText", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep5Title", "fill": "$text-primary", "content": "Thực hiện", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]} + ]} + ]}, + {"type": "frame", "id": "WFLoopBox", "fill": "#EC489910", "cornerRadius": 20, "stroke": {"thickness": 2, "fill": "#EC4899", "dashArray": [8, 4]}, "padding": [24, 40], "layout": "vertical", "gap": 16, "alignItems": "center", "children": [ + {"type": "text", "id": "WFLoopLabel", "fill": "#EC4899", "content": "🔄 LẶP LẠI: Thêm dịch vụ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "frame", "id": "WFLoopSteps", "gap": 20, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFLoopStep1", "width": 150, "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "WFLoopStep1Icon", "width": 28, "height": 28, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "WFLoopStep1Title", "fill": "$text-primary", "content": "Hoàn thành DV", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "icon_font", "id": "WFLoopArrow1", "width": 18, "height": 18, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, + {"type": "frame", "id": "WFLoopStep2", "width": 150, "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "WFLoopStep2Icon", "width": 28, "height": 28, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$orange-primary"}, {"type": "text", "id": "WFLoopStep2Title", "fill": "$text-primary", "content": "Thêm DV?", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "icon_font", "id": "WFLoopArrow2", "width": 18, "height": 18, "iconFontName": "corner-up-left", "iconFontFamily": "lucide", "fill": "#EC4899"} + ]} + ]}, + {"type": "frame", "id": "WFRow2", "gap": 20, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep6", "width": 160, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep6Icon", "width": "fill_container", "height": 70, "fill": "#14B8A620", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep6IconInner", "width": 32, "height": 32, "iconFontName": "receipt", "iconFontFamily": "lucide", "fill": "#14B8A6"}]}, + {"type": "frame", "id": "WFStep6Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep6Num", "width": 26, "height": 26, "fill": "#14B8A6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep6NumText", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep6Title", "fill": "$text-primary", "content": "Xem bill", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow6", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep7", "width": 180, "fill": "#F59E0B10", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#F59E0B"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep7Icon", "width": "fill_container", "height": 70, "fill": "#F59E0B", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep7IconInner", "width": 32, "height": 32, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, + {"type": "frame", "id": "WFStep7Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep7Num", "width": 26, "height": 26, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep7NumText", "fill": "$text-primary", "content": "7", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep7Title", "fill": "$text-primary", "content": "Đổi điểm?", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "text", "id": "WFStep7Desc", "fill": "$text-tertiary", "content": "Loyalty Points", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow7", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep8", "width": 160, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#22C55E"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep8Icon", "width": "fill_container", "height": 70, "fill": "#22C55E", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep8IconInner", "width": 32, "height": 32, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, + {"type": "frame", "id": "WFStep8Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep8Num", "width": 26, "height": 26, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep8NumText", "fill": "$text-primary", "content": "8", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep8Title", "fill": "$text-primary", "content": "THANH TOÁN", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}, + {"type": "frame", "id": "WFStep8Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFStep8ScreenText", "fill": "$text-secondary", "content": "payment/*.pen", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"}]} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow8", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep9", "width": 180, "fill": "#22C55E10", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#22C55E"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep9Icon", "width": "fill_container", "height": 70, "fill": "#22C55E20", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep9IconInner", "width": 32, "height": 32, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, + {"type": "frame", "id": "WFStep9Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep9Num", "width": 26, "height": 26, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep9NumText", "fill": "$text-primary", "content": "9", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep9Title", "fill": "$text-primary", "content": "+Tích điểm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "text", "id": "WFStep9Desc", "fill": "$text-tertiary", "content": "1đ / 10,000₫", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow9", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep10", "width": 160, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep10Icon", "width": "fill_container", "height": 70, "fill": "#6B728020", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep10IconInner", "width": 32, "height": 32, "iconFontName": "calendar-plus", "iconFontFamily": "lucide", "fill": "#6B7280"}]}, + {"type": "frame", "id": "WFStep10Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep10Num", "width": 26, "height": 26, "fill": "#6B7280", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep10NumText", "fill": "$text-primary", "content": "10", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]}, + {"type": "text", "id": "WFStep10Title", "fill": "$text-primary", "content": "Đặt lịch?", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + ]} + ]} + ]} + ] + }, + { + "type": "frame", + "id": "WFFooter", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [20, 40], + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, + "gap": 32, + "justifyContent": "center", + "children": [ + {"type": "frame", "id": "WFLegend1", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend1Dot", "width": 18, "height": 18, "fill": "#EC4899", "cornerRadius": 6}, {"type": "text", "id": "WFLegend1Text", "fill": "$text-secondary", "content": "Customer Screen", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "frame", "id": "WFLegend2", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend2Dot", "width": 18, "height": 18, "fill": "#8B5CF6", "cornerRadius": 6}, {"type": "text", "id": "WFLegend2Text", "fill": "$text-secondary", "content": "Staff Screen", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "frame", "id": "WFLegend3", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend3Dot", "width": 18, "height": 18, "fill": "#F59E0B", "cornerRadius": 6}, {"type": "text", "id": "WFLegend3Text", "fill": "$text-secondary", "content": "Loyalty Points", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, + {"type": "frame", "id": "WFLegend4", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend4Dot", "width": 18, "height": 18, "fill": "#22C55E", "cornerRadius": 6}, {"type": "text", "id": "WFLegend4Text", "fill": "$text-secondary", "content": "Thanh toán (POST-PAY)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "border-default": {"type": "color", "value": "#2A2A2E"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +}