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.
This commit is contained in:
Ho Ngoc Hai
325
pencil-design/docs/auth-workflow-guide.md
Normal file
325
pencil-design/docs/auth-workflow-guide.md
Normal file
@@ -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)
|
||||
406
pencil-design/docs/pos-workflow-guide.md
Normal file
406
pencil-design/docs/pos-workflow-guide.md
Normal file
@@ -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<br/>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)
|
||||
461
pencil-design/src/atoms/auth-buttons.pen
Normal file
461
pencil-design/src/atoms/auth-buttons.pen
Normal file
@@ -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" }
|
||||
}
|
||||
}
|
||||
782
pencil-design/src/atoms/auth-inputs.pen
Normal file
782
pencil-design/src/atoms/auth-inputs.pen
Normal file
@@ -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" }
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
743
pencil-design/src/molecules/auth-form-field.pen
Normal file
743
pencil-design/src/molecules/auth-form-field.pen
Normal file
@@ -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" }
|
||||
}
|
||||
}
|
||||
386
pencil-design/src/molecules/social-login-row.pen
Normal file
386
pencil-design/src/molecules/social-login-row.pen
Normal file
@@ -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" }
|
||||
}
|
||||
}
|
||||
1114
pencil-design/src/organisms/auth/login-card.pen
Normal file
1114
pencil-design/src/organisms/auth/login-card.pen
Normal file
File diff suppressed because it is too large
Load Diff
542
pencil-design/src/organisms/auth/otp-verify.pen
Normal file
542
pencil-design/src/organisms/auth/otp-verify.pen
Normal file
@@ -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" }
|
||||
}
|
||||
}
|
||||
372
pencil-design/src/pages/auth/forgot-password/desktop.pen
Normal file
372
pencil-design/src/pages/auth/forgot-password/desktop.pen
Normal file
@@ -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" }
|
||||
}
|
||||
}
|
||||
112
pencil-design/src/pages/auth/forgot-password/mobile.pen
Normal file
112
pencil-design/src/pages/auth/forgot-password/mobile.pen
Normal file
@@ -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" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
107
pencil-design/src/pages/auth/forgot-password/tablet.pen
Normal file
107
pencil-design/src/pages/auth/forgot-password/tablet.pen
Normal file
@@ -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" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
306
pencil-design/src/pages/auth/login/admin-desktop.pen
Normal file
306
pencil-design/src/pages/auth/login/admin-desktop.pen
Normal file
@@ -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" }
|
||||
}
|
||||
}
|
||||
149
pencil-design/src/pages/auth/login/admin-mobile.pen
Normal file
149
pencil-design/src/pages/auth/login/admin-mobile.pen
Normal file
@@ -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" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
151
pencil-design/src/pages/auth/login/admin-tablet.pen
Normal file
151
pencil-design/src/pages/auth/login/admin-tablet.pen
Normal file
@@ -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" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
413
pencil-design/src/pages/auth/login/branch-desktop.pen
Normal file
413
pencil-design/src/pages/auth/login/branch-desktop.pen
Normal file
@@ -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" }
|
||||
}
|
||||
}
|
||||
160
pencil-design/src/pages/auth/login/branch-mobile.pen
Normal file
160
pencil-design/src/pages/auth/login/branch-mobile.pen
Normal file
@@ -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" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
146
pencil-design/src/pages/auth/login/branch-tablet.pen
Normal file
146
pencil-design/src/pages/auth/login/branch-tablet.pen
Normal file
@@ -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" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
532
pencil-design/src/pages/auth/login/customer-desktop.pen
Normal file
532
pencil-design/src/pages/auth/login/customer-desktop.pen
Normal file
@@ -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" }
|
||||
}
|
||||
}
|
||||
358
pencil-design/src/pages/auth/login/customer-mobile.pen
Normal file
358
pencil-design/src/pages/auth/login/customer-mobile.pen
Normal file
@@ -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" }
|
||||
}
|
||||
}
|
||||
328
pencil-design/src/pages/auth/login/customer-tablet.pen
Normal file
328
pencil-design/src/pages/auth/login/customer-tablet.pen
Normal file
@@ -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" }
|
||||
}
|
||||
}
|
||||
302
pencil-design/src/pages/auth/login/staff-desktop.pen
Normal file
302
pencil-design/src/pages/auth/login/staff-desktop.pen
Normal file
@@ -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" }
|
||||
}
|
||||
}
|
||||
291
pencil-design/src/pages/auth/login/staff-mobile.pen
Normal file
291
pencil-design/src/pages/auth/login/staff-mobile.pen
Normal file
@@ -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" }
|
||||
}
|
||||
}
|
||||
170
pencil-design/src/pages/auth/login/staff-tablet.pen
Normal file
170
pencil-design/src/pages/auth/login/staff-tablet.pen
Normal file
@@ -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" }
|
||||
}
|
||||
}
|
||||
592
pencil-design/src/pages/auth/register/customer-desktop.pen
Normal file
592
pencil-design/src/pages/auth/register/customer-desktop.pen
Normal file
@@ -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" }
|
||||
}
|
||||
}
|
||||
241
pencil-design/src/pages/auth/register/customer-mobile.pen
Normal file
241
pencil-design/src/pages/auth/register/customer-mobile.pen
Normal file
@@ -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" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
253
pencil-design/src/pages/auth/register/customer-tablet.pen
Normal file
253
pencil-design/src/pages/auth/register/customer-tablet.pen
Normal file
@@ -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" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
117
pencil-design/src/pages/auth/workflow/email-sent.pen
Normal file
117
pencil-design/src/pages/auth/workflow/email-sent.pen
Normal file
@@ -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 }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
187
pencil-design/src/pages/auth/workflow/otp-verify.pen
Normal file
187
pencil-design/src/pages/auth/workflow/otp-verify.pen
Normal file
@@ -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 }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
254
pencil-design/src/pages/auth/workflow/password-reset.pen
Normal file
254
pencil-design/src/pages/auth/workflow/password-reset.pen
Normal file
@@ -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" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
105
pencil-design/src/pages/auth/workflow/two-factor-auth.pen
Normal file
105
pencil-design/src/pages/auth/workflow/two-factor-auth.pen
Normal file
@@ -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" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
123
pencil-design/src/pages/tPOS/pos/cafe/mobile.pen
Normal file
123
pencil-design/src/pages/tPOS/pos/cafe/mobile.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
126
pencil-design/src/pages/tPOS/pos/cafe/tablet.pen
Normal file
126
pencil-design/src/pages/tPOS/pos/cafe/tablet.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
102
pencil-design/src/pages/tPOS/pos/cafe/workflow/queue-display.pen
Normal file
102
pencil-design/src/pages/tPOS/pos/cafe/workflow/queue-display.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
132
pencil-design/src/pages/tPOS/pos/karaoke/mobile.pen
Normal file
132
pencil-design/src/pages/tPOS/pos/karaoke/mobile.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
127
pencil-design/src/pages/tPOS/pos/karaoke/tablet.pen
Normal file
127
pencil-design/src/pages/tPOS/pos/karaoke/tablet.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
130
pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-map.pen
Normal file
130
pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-map.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
@@ -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"}
|
||||
}
|
||||
}
|
||||
128
pencil-design/src/pages/tPOS/pos/restaurant/mobile.pen
Normal file
128
pencil-design/src/pages/tPOS/pos/restaurant/mobile.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
130
pencil-design/src/pages/tPOS/pos/restaurant/tablet.pen
Normal file
130
pencil-design/src/pages/tPOS/pos/restaurant/tablet.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
@@ -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"}
|
||||
}
|
||||
}
|
||||
@@ -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"}
|
||||
}
|
||||
}
|
||||
102
pencil-design/src/pages/tPOS/pos/shared/payment/cash.pen
Normal file
102
pencil-design/src/pages/tPOS/pos/shared/payment/cash.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
@@ -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"}
|
||||
}
|
||||
}
|
||||
101
pencil-design/src/pages/tPOS/pos/shared/payment/qr.pen
Normal file
101
pencil-design/src/pages/tPOS/pos/shared/payment/qr.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
196
pencil-design/src/pages/tPOS/pos/shared/payment/receipt.pen
Normal file
196
pencil-design/src/pages/tPOS/pos/shared/payment/receipt.pen
Normal file
@@ -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": {}
|
||||
}
|
||||
95
pencil-design/src/pages/tPOS/pos/shared/payment/success.pen
Normal file
95
pencil-design/src/pages/tPOS/pos/shared/payment/success.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
132
pencil-design/src/pages/tPOS/pos/spa/mobile.pen
Normal file
132
pencil-design/src/pages/tPOS/pos/spa/mobile.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
128
pencil-design/src/pages/tPOS/pos/spa/tablet.pen
Normal file
128
pencil-design/src/pages/tPOS/pos/spa/tablet.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
@@ -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"}
|
||||
}
|
||||
}
|
||||
180
pencil-design/src/pages/tPOS/pos/spa/workflow/staff-assign.pen
Normal file
180
pencil-design/src/pages/tPOS/pos/spa/workflow/staff-assign.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
160
pencil-design/src/pages/tPOS/pos/workflows/cafe-workflow.pen
Normal file
160
pencil-design/src/pages/tPOS/pos/workflows/cafe-workflow.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
158
pencil-design/src/pages/tPOS/pos/workflows/karaoke-workflow.pen
Normal file
158
pencil-design/src/pages/tPOS/pos/workflows/karaoke-workflow.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
@@ -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"}
|
||||
}
|
||||
}
|
||||
173
pencil-design/src/pages/tPOS/pos/workflows/spa-workflow.pen
Normal file
173
pencil-design/src/pages/tPOS/pos/workflows/spa-workflow.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user