feat: Add initial pages for the Eggymon Kitchen landing page application across loyalty, admin, POS, and authentication modules, and update font families in existing tPOS admin pages.
This commit is contained in:
Ho Ngoc Hai
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,306 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderScreen",
|
||||
"name": "Admin/OrderManagement",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"layout": "horizontal",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SidebarOrder",
|
||||
"name": "Sidebar",
|
||||
"width": 260,
|
||||
"height": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"layout": "vertical",
|
||||
"stroke": {"align": "inside", "fill": "$border-default", "thickness": {"right": 1}},
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LogoAreaOrd",
|
||||
"width": "fill_container",
|
||||
"fill": {"type": "linear_gradient", "stops": [{"color": "#6B4423", "position": 0}, {"color": "#FF6B35", "position": 1}]},
|
||||
"padding": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "LogoIconOrd", "width": 48, "height": 48, "cornerRadius": 24, "fill": "#FFFFFF33", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "LogoTxOrd", "content": "EK", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 20, "fontWeight": "bold"}]},
|
||||
{"type": "text", "id": "BrandNameOrd", "content": "EggyMon Kitchen", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "bold"},
|
||||
{"type": "text", "id": "BrandSubOrd", "content": "Quản lý cửa hàng", "fill": "#FFFFFFB3", "fontFamily": "Poppins", "fontSize": 11}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NavAreaOrd",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"padding": [16, 12],
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{"type": "text", "id": "NvLblOvOrd", "content": "TỔNG QUAN", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1, "padding": [12, 8]},
|
||||
{"type": "frame", "id": "NvDashOrd", "width": "fill_container", "cornerRadius": 10, "padding": [12, 20], "layout": "horizontal", "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "IcDshOrd", "iconFontFamily": "lucide", "iconFontName": "layout-dashboard", "width": 20, "height": 20, "fill": "$text-secondary"}, {"type": "text", "id": "TxDshOrd", "content": "Dashboard", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "text", "id": "NvLblStOrd", "content": "CỬA HÀNG", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1, "padding": [16, 8, 12, 8]},
|
||||
{"type": "frame", "id": "NvOrdActive", "width": "fill_container", "fill": "$orange-primary", "cornerRadius": 10, "padding": [12, 20], "layout": "horizontal", "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "IcOrdAct", "iconFontFamily": "lucide", "iconFontName": "shopping-bag", "width": 20, "height": 20, "fill": "#FFFFFF"}, {"type": "text", "id": "TxOrdAct", "content": "Quản lý đơn hàng", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "NvStfOrd", "width": "fill_container", "cornerRadius": 10, "padding": [12, 20], "layout": "horizontal", "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "IcStfOrd", "iconFontFamily": "lucide", "iconFontName": "users", "width": 20, "height": 20, "fill": "$text-secondary"}, {"type": "text", "id": "TxStfOrd", "content": "Nhân sự", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "NvSetOrd", "width": "fill_container", "cornerRadius": 10, "padding": [12, 20], "layout": "horizontal", "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "IcSetOrd", "iconFontFamily": "lucide", "iconFontName": "settings-2", "width": 20, "height": 20, "fill": "$text-secondary"}, {"type": "text", "id": "TxSetOrd", "content": "Cài đặt", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "text", "id": "NvLblBzOrd", "content": "KINH DOANH", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1, "padding": [16, 8, 12, 8]},
|
||||
{"type": "frame", "id": "NvRptOrd", "width": "fill_container", "cornerRadius": 10, "padding": [12, 20], "layout": "horizontal", "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "IcRptOrd", "iconFontFamily": "lucide", "iconFontName": "bar-chart-2", "width": 20, "height": 20, "fill": "$text-secondary"}, {"type": "text", "id": "TxRptOrd", "content": "Báo cáo", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "NvLoyOrd", "width": "fill_container", "cornerRadius": 10, "padding": [12, 20], "layout": "horizontal", "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "IcLoyOrd", "iconFontFamily": "lucide", "iconFontName": "gift", "width": 20, "height": 20, "fill": "$text-secondary"}, {"type": "text", "id": "TxLoyOrd", "content": "Loyalty", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "UserAreaOrd",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "DividerOrd", "width": "fill_container", "height": 1, "fill": "$border-default"},
|
||||
{"type": "frame", "id": "UserRowOrd", "width": "fill_container", "padding": [16, 20], "layout": "horizontal", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "AvatarOrd", "width": 40, "height": 40, "cornerRadius": 20, "fill": "$orange-primary", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "AvTxOrd", "content": "TN", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "bold"}]},
|
||||
{"type": "frame", "id": "UsrInfoOrd", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "UsrNmOrd", "content": "Trần Nhật", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "600"}, {"type": "text", "id": "UsrRlOrd", "content": "Store Manager", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 12}]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MainContentOrd",
|
||||
"name": "Main Content",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"padding": 32,
|
||||
"gap": 20,
|
||||
"children": [
|
||||
{"type": "text", "id": "TitleOrd", "content": "Quản lý đơn hàng", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 24, "fontWeight": "bold"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StatusTabs",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"padding": 4,
|
||||
"layout": "horizontal",
|
||||
"gap": 0,
|
||||
"children": [
|
||||
{"type": "frame", "id": "TabAll", "fill": "$orange-primary", "cornerRadius": 10, "padding": [8, 16], "children": [{"type": "text", "id": "TabAllTx", "content": "Tất cả (87)", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "TabPending", "padding": [8, 16], "children": [{"type": "text", "id": "TabPendTx", "content": "Chờ xác nhận (5)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "TabCooking", "padding": [8, 16], "children": [{"type": "text", "id": "TabCookTx", "content": "Đang chế biến (12)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "TabReady", "padding": [8, 16], "children": [{"type": "text", "id": "TabReadyTx", "content": "Chờ lấy (8)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "TabDone", "padding": [8, 16], "children": [{"type": "text", "id": "TabDoneTx", "content": "Hoàn thành (58)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "TabCancel", "padding": [8, 16], "children": [{"type": "text", "id": "TabCancelTx", "content": "Đã hủy (4)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FilterBarOrd",
|
||||
"width": "fill_container",
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "SearchOrd", "width": 300, "height": 42, "fill": "$bg-surface", "cornerRadius": 10, "stroke": {"align": "inside", "fill": "$border-default", "thickness": 1}, "padding": [0, 16], "layout": "horizontal", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "IcSrchOrd", "iconFontFamily": "lucide", "iconFontName": "search", "width": 18, "height": 18, "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "SrchPlcOrd", "content": "Tìm đơn hàng...", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "DateFilterOrd", "width": 200, "height": 42, "fill": "$bg-surface", "cornerRadius": 10, "stroke": {"align": "inside", "fill": "$border-default", "thickness": 1}, "padding": [0, 16], "layout": "horizontal", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "IcCalOrd", "iconFontFamily": "lucide", "iconFontName": "calendar", "width": 18, "height": 18, "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "DateTxOrd", "content": "Hôm nay", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrdersTable",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 14,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrdTblHeader",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": [14, 14, 0, 0],
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "OThCode", "content": "Mã đơn", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 110},
|
||||
{"type": "text", "id": "OThTime", "content": "Thời gian", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 90},
|
||||
{"type": "text", "id": "OThCust", "content": "Khách hàng", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 150},
|
||||
{"type": "text", "id": "OThItems", "content": "Món", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": "fill_container"},
|
||||
{"type": "text", "id": "OThTotal", "content": "Tổng", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 120},
|
||||
{"type": "text", "id": "OThStatus", "content": "Trạng thái", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 140},
|
||||
{"type": "text", "id": "OThAction", "content": "Hành động", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 90}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrdRow1",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
|
||||
"children": [
|
||||
{"type": "text", "id": "Or1Code", "content": "#EK-0087", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 110},
|
||||
{"type": "text", "id": "Or1Time", "content": "14:32", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": 90},
|
||||
{"type": "text", "id": "Or1Cust", "content": "Nguyễn Văn B", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "width": 150},
|
||||
{"type": "text", "id": "Or1Items", "content": "Combo bánh mì x2, Trà sữa x1", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "Or1Total", "content": "185,000₫", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 120},
|
||||
{"type": "frame", "id": "Or1Stat", "width": 140, "children": [{"type": "frame", "id": "Or1Badge", "fill": "#FEF3C7", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "Or1BdgTx", "content": "Chờ xác nhận", "fill": "#D97706", "fontFamily": "Poppins", "fontSize": 12}]}]},
|
||||
{"type": "frame", "id": "Or1Acts", "width": 90, "layout": "horizontal", "gap": 8, "children": [
|
||||
{"type": "icon_font", "id": "Or1Eye", "iconFontFamily": "lucide", "iconFontName": "eye", "width": 18, "height": 18, "fill": "$text-secondary"},
|
||||
{"type": "icon_font", "id": "Or1More", "iconFontFamily": "lucide", "iconFontName": "more-vertical", "width": 18, "height": 18, "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrdRow2",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
|
||||
"children": [
|
||||
{"type": "text", "id": "Or2Code", "content": "#EK-0086", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 110},
|
||||
{"type": "text", "id": "Or2Time", "content": "14:15", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": 90},
|
||||
{"type": "text", "id": "Or2Cust", "content": "Walk-in", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "width": 150},
|
||||
{"type": "text", "id": "Or2Items", "content": "Cơm trưa đặc biệt x1", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "Or2Total", "content": "55,000₫", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 120},
|
||||
{"type": "frame", "id": "Or2Stat", "width": 140, "children": [{"type": "frame", "id": "Or2Badge", "fill": "#DBEAFE", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "Or2BdgTx", "content": "Đang chế biến", "fill": "#2563EB", "fontFamily": "Poppins", "fontSize": 12}]}]},
|
||||
{"type": "frame", "id": "Or2Acts", "width": 90, "layout": "horizontal", "gap": 8, "children": [
|
||||
{"type": "icon_font", "id": "Or2Eye", "iconFontFamily": "lucide", "iconFontName": "eye", "width": 18, "height": 18, "fill": "$text-secondary"},
|
||||
{"type": "icon_font", "id": "Or2More", "iconFontFamily": "lucide", "iconFontName": "more-vertical", "width": 18, "height": 18, "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrdRow3",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
|
||||
"children": [
|
||||
{"type": "text", "id": "Or3Code", "content": "#EK-0085", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 110},
|
||||
{"type": "text", "id": "Or3Time", "content": "13:50", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": 90},
|
||||
{"type": "text", "id": "Or3Cust", "content": "Trần Thị C", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "width": 150},
|
||||
{"type": "text", "id": "Or3Items", "content": "Omelette phô mai x2", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "Or3Total", "content": "120,000₫", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 120},
|
||||
{"type": "frame", "id": "Or3Stat", "width": 140, "children": [{"type": "frame", "id": "Or3Badge", "fill": "#FFEDD5", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "Or3BdgTx", "content": "Chờ lấy", "fill": "#EA580C", "fontFamily": "Poppins", "fontSize": 12}]}]},
|
||||
{"type": "frame", "id": "Or3Acts", "width": 90, "layout": "horizontal", "gap": 8, "children": [
|
||||
{"type": "icon_font", "id": "Or3Eye", "iconFontFamily": "lucide", "iconFontName": "eye", "width": 18, "height": 18, "fill": "$text-secondary"},
|
||||
{"type": "icon_font", "id": "Or3More", "iconFontFamily": "lucide", "iconFontName": "more-vertical", "width": 18, "height": 18, "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrdRow4",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
|
||||
"children": [
|
||||
{"type": "text", "id": "Or4Code", "content": "#EK-0084", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 110},
|
||||
{"type": "text", "id": "Or4Time", "content": "13:30", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": 90},
|
||||
{"type": "text", "id": "Or4Cust", "content": "App - Lê D", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "width": 150},
|
||||
{"type": "text", "id": "Or4Items", "content": "Bánh mì trứng x3", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "Or4Total", "content": "90,000₫", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 120},
|
||||
{"type": "frame", "id": "Or4Stat", "width": 140, "children": [{"type": "frame", "id": "Or4Badge", "fill": "#DCFCE7", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "Or4BdgTx", "content": "Hoàn thành", "fill": "#16A34A", "fontFamily": "Poppins", "fontSize": 12}]}]},
|
||||
{"type": "frame", "id": "Or4Acts", "width": 90, "layout": "horizontal", "gap": 8, "children": [
|
||||
{"type": "icon_font", "id": "Or4Eye", "iconFontFamily": "lucide", "iconFontName": "eye", "width": 18, "height": 18, "fill": "$text-secondary"},
|
||||
{"type": "icon_font", "id": "Or4More", "iconFontFamily": "lucide", "iconFontName": "more-vertical", "width": 18, "height": 18, "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrdRow5",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
|
||||
"children": [
|
||||
{"type": "text", "id": "Or5Code", "content": "#EK-0083", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 110},
|
||||
{"type": "text", "id": "Or5Time", "content": "12:45", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": 90},
|
||||
{"type": "text", "id": "Or5Cust", "content": "Walk-in", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "width": 150},
|
||||
{"type": "text", "id": "Or5Items", "content": "Trà sữa oolong x2", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "width": "fill_container"},
|
||||
{"type": "text", "id": "Or5Total", "content": "70,000₫", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500", "width": 120},
|
||||
{"type": "frame", "id": "Or5Stat", "width": 140, "children": [{"type": "frame", "id": "Or5Badge", "fill": "#FEE2E2", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "Or5BdgTx", "content": "Đã hủy", "fill": "#DC2626", "fontFamily": "Poppins", "fontSize": 12}]}]},
|
||||
{"type": "frame", "id": "Or5Acts", "width": 90, "layout": "horizontal", "gap": 8, "children": [
|
||||
{"type": "icon_font", "id": "Or5Eye", "iconFontFamily": "lucide", "iconFontName": "eye", "width": 18, "height": 18, "fill": "$text-secondary"},
|
||||
{"type": "icon_font", "id": "Or5More", "iconFontFamily": "lucide", "iconFontName": "more-vertical", "width": 18, "height": 18, "fill": "$text-secondary"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaginationOrd",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "PagInfoOrd", "content": "Hiển thị 1-5 / 87 đơn hàng", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PagCtrlOrd",
|
||||
"layout": "horizontal",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "PgPrevOrd", "width": 32, "height": 32, "cornerRadius": 8, "fill": "$bg-interactive", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "IcPvOrd", "iconFontFamily": "lucide", "iconFontName": "chevron-left", "width": 16, "height": 16, "fill": "$text-secondary"}]},
|
||||
{"type": "frame", "id": "PgP1Ord", "width": 32, "height": 32, "cornerRadius": 8, "fill": "$orange-primary", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "P1TxOrd", "content": "1", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "PgP2Ord", "width": 32, "height": 32, "cornerRadius": 8, "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "P2TxOrd", "content": "2", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "PgP3Ord", "width": 32, "height": 32, "cornerRadius": 8, "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "P3TxOrd", "content": "3", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "PgElOrd", "width": 32, "height": 32, "cornerRadius": 8, "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ElTxOrd", "content": "...", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "PgP18Ord", "width": 32, "height": 32, "cornerRadius": 8, "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "P18TxOrd", "content": "18", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "PgNxtOrd", "width": 32, "height": 32, "cornerRadius": 8, "fill": "$bg-interactive", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "IcNxOrd", "iconFontFamily": "lucide", "iconFontName": "chevron-right", "width": 16, "height": 16, "fill": "$text-secondary"}]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {"type": "color", "value": "#FAF8F4"},
|
||||
"bg-surface": {"type": "color", "value": "#FFFFFF"},
|
||||
"bg-elevated": {"type": "color", "value": "#FFF8F0"},
|
||||
"bg-interactive": {"type": "color", "value": "#F5EDE4"},
|
||||
"brown-primary": {"type": "color", "value": "#6B4423"},
|
||||
"brown-dark": {"type": "color", "value": "#4A2E15"},
|
||||
"orange-primary": {"type": "color", "value": "#FF6B35"},
|
||||
"orange-light": {"type": "color", "value": "#FF8A5C"},
|
||||
"text-primary": {"type": "color", "value": "#2C2C2C"},
|
||||
"text-secondary": {"type": "color", "value": "#6B6B6B"},
|
||||
"text-tertiary": {"type": "color", "value": "#9B9B9B"},
|
||||
"border-default": {"type": "color", "value": "#E5DDD4"},
|
||||
"border-subtle": {"type": "color", "value": "#F0EAE2"},
|
||||
"success": {"type": "color", "value": "#22C55E"},
|
||||
"warning": {"type": "color", "value": "#F59E0B"},
|
||||
"error": {"type": "color", "value": "#EF4444"}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,506 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StaffScreen",
|
||||
"name": "Admin/StaffManagement",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "$bg-page",
|
||||
"layout": "horizontal",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SidebarStaff",
|
||||
"name": "Sidebar",
|
||||
"width": 260,
|
||||
"height": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"layout": "vertical",
|
||||
"stroke": {"align": "inside", "fill": "$border-default", "thickness": {"right": 1}},
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LogoAreaStaff",
|
||||
"name": "Logo Area",
|
||||
"width": "fill_container",
|
||||
"fill": {"type": "linear_gradient", "stops": [{"color": "#6B4423", "position": 0}, {"color": "#FF6B35", "position": 1}]},
|
||||
"padding": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LogoIconStaff",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"cornerRadius": 24,
|
||||
"fill": "#FFFFFF33",
|
||||
"layout": "horizontal",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "LogoTextStaff", "content": "EK", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 20, "fontWeight": "bold"}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "BrandNameStaff", "content": "EggyMon Kitchen", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "bold"},
|
||||
{"type": "text", "id": "BrandSubStaff", "content": "Quản lý cửa hàng", "fill": "#FFFFFFB3", "fontFamily": "Poppins", "fontSize": 11}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NavAreaStaff",
|
||||
"name": "Navigation",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"padding": [16, 12],
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{"type": "text", "id": "NavLblOverviewSt", "content": "TỔNG QUAN", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1, "padding": [12, 8]},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NavDashSt",
|
||||
"width": "fill_container",
|
||||
"cornerRadius": 10,
|
||||
"padding": [12, 20],
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "IcDashSt", "iconFontFamily": "lucide", "iconFontName": "layout-dashboard", "width": 20, "height": 20, "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "TxDashSt", "content": "Dashboard", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "NavLblStoreSt", "content": "CỬA HÀNG", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1, "padding": [16, 8, 12, 8]},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NavOrdersSt",
|
||||
"width": "fill_container",
|
||||
"cornerRadius": 10,
|
||||
"padding": [12, 20],
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "IcOrdersSt", "iconFontFamily": "lucide", "iconFontName": "shopping-bag", "width": 20, "height": 20, "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "TxOrdersSt", "content": "Quản lý đơn hàng", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NavStaffActive",
|
||||
"name": "Nav Staff Active",
|
||||
"width": "fill_container",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 10,
|
||||
"padding": [12, 20],
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "IcStaffSt", "iconFontFamily": "lucide", "iconFontName": "users", "width": 20, "height": 20, "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "TxStaffSt", "content": "Nhân sự", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NavSettingsSt",
|
||||
"width": "fill_container",
|
||||
"cornerRadius": 10,
|
||||
"padding": [12, 20],
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "IcSettingsSt", "iconFontFamily": "lucide", "iconFontName": "settings-2", "width": 20, "height": 20, "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "TxSettingsSt", "content": "Cài đặt", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "NavLblBizSt", "content": "KINH DOANH", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1, "padding": [16, 8, 12, 8]},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NavReportSt",
|
||||
"width": "fill_container",
|
||||
"cornerRadius": 10,
|
||||
"padding": [12, 20],
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "IcReportSt", "iconFontFamily": "lucide", "iconFontName": "bar-chart-2", "width": 20, "height": 20, "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "TxReportSt", "content": "Báo cáo", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NavLoyaltySt",
|
||||
"width": "fill_container",
|
||||
"cornerRadius": 10,
|
||||
"padding": [12, 20],
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "IcLoyaltySt", "iconFontFamily": "lucide", "iconFontName": "gift", "width": 20, "height": 20, "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "TxLoyaltySt", "content": "Loyalty", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "UserAreaStaff",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "DividerStaff", "width": "fill_container", "height": 1, "fill": "$border-default"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "UserRowStaff",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AvatarStaff",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"cornerRadius": 20,
|
||||
"fill": "$orange-primary",
|
||||
"layout": "horizontal",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [{"type": "text", "id": "AvTextStaff", "content": "TN", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "bold"}]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "UserInfoStaff",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{"type": "text", "id": "UserNameStaff", "content": "Trần Nhật", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "text", "id": "UserRoleStaff", "content": "Store Manager", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 12}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MainContentStaff",
|
||||
"name": "Main Content",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"padding": 32,
|
||||
"gap": 24,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "HeaderStaff",
|
||||
"width": "fill_container",
|
||||
"layout": "horizontal",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "TitleStaff", "content": "Quản lý nhân sự", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 24, "fontWeight": "bold"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddStaffBtn",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 10,
|
||||
"padding": [10, 20],
|
||||
"layout": "horizontal",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "IcPlusStaff", "iconFontFamily": "lucide", "iconFontName": "plus", "width": 18, "height": 18, "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "BtnTextStaff", "content": "Thêm nhân viên", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 14, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FilterBarStaff",
|
||||
"width": "fill_container",
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SearchStaff",
|
||||
"width": 300,
|
||||
"height": 42,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 10,
|
||||
"stroke": {"align": "inside", "fill": "$border-default", "thickness": 1},
|
||||
"padding": [0, 16],
|
||||
"layout": "horizontal",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "IcSearchStaff", "iconFontFamily": "lucide", "iconFontName": "search", "width": 18, "height": 18, "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "SearchPlcStaff", "content": "Tìm kiếm nhân viên...", "fill": "$text-tertiary", "fontFamily": "Poppins", "fontSize": 14}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FilterPosition",
|
||||
"width": 160,
|
||||
"height": 42,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 10,
|
||||
"stroke": {"align": "inside", "fill": "$border-default", "thickness": 1},
|
||||
"padding": [0, 16],
|
||||
"layout": "horizontal",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "FilterPosText", "content": "Vị trí", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14},
|
||||
{"type": "icon_font", "id": "IcChevPos", "iconFontFamily": "lucide", "iconFontName": "chevron-down", "width": 16, "height": 16, "fill": "$text-tertiary"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FilterStatus",
|
||||
"width": 160,
|
||||
"height": 42,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 10,
|
||||
"stroke": {"align": "inside", "fill": "$border-default", "thickness": 1},
|
||||
"padding": [0, 16],
|
||||
"layout": "horizontal",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "FilterStatText", "content": "Trạng thái", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14},
|
||||
{"type": "icon_font", "id": "IcChevStat", "iconFontFamily": "lucide", "iconFontName": "chevron-down", "width": 16, "height": 16, "fill": "$text-tertiary"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StaffTableCard",
|
||||
"name": "Staff Table",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 14,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StaffTableHeader",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": [14, 14, 0, 0],
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "StThEmployee", "content": "Nhân viên", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 220},
|
||||
{"type": "text", "id": "StThPosition", "content": "Vị trí", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 150},
|
||||
{"type": "text", "id": "StThPhone", "content": "SĐT", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 150},
|
||||
{"type": "text", "id": "StThShift", "content": "Ca làm", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": 180},
|
||||
{"type": "text", "id": "StThStatus", "content": "Trạng thái", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "600", "width": "fill_container"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StRow1",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StEmp1Cell",
|
||||
"width": 220,
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "StAv1", "width": 32, "height": 32, "cornerRadius": 16, "fill": "#E8D5C4", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "StAv1Tx", "content": "NT", "fill": "$brown-primary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "bold"}]},
|
||||
{"type": "text", "id": "StName1", "content": "Nguyễn Thu", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "StPos1", "content": "Pha chế", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
|
||||
{"type": "text", "id": "StPhone1", "content": "0912 345 678", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
|
||||
{"type": "text", "id": "StShift1", "content": "Sáng (7-14h)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 180},
|
||||
{"type": "frame", "id": "StStat1", "width": "fill_container", "children": [{"type": "frame", "id": "StBadge1", "fill": "#DCFCE7", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "StBdgTx1", "content": "Đang làm", "fill": "#16A34A", "fontFamily": "Poppins", "fontSize": 12}]}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StRow2",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StEmp2Cell",
|
||||
"width": 220,
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "StAv2", "width": 32, "height": 32, "cornerRadius": 16, "fill": "#D4E0ED", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "StAv2Tx", "content": "LH", "fill": "#2563EB", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "bold"}]},
|
||||
{"type": "text", "id": "StName2", "content": "Lê Hoàng", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "StPos2", "content": "Thu ngân", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
|
||||
{"type": "text", "id": "StPhone2", "content": "0903 456 789", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
|
||||
{"type": "text", "id": "StShift2", "content": "Chiều (14-21h)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 180},
|
||||
{"type": "frame", "id": "StStat2", "width": "fill_container", "children": [{"type": "frame", "id": "StBadge2", "fill": "#DCFCE7", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "StBdgTx2", "content": "Đang làm", "fill": "#16A34A", "fontFamily": "Poppins", "fontSize": 12}]}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StRow3",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StEmp3Cell",
|
||||
"width": 220,
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "StAv3", "width": 32, "height": 32, "cornerRadius": 16, "fill": "#FEF3C7", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "StAv3Tx", "content": "PL", "fill": "#D97706", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "bold"}]},
|
||||
{"type": "text", "id": "StName3", "content": "Phạm Linh", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "StPos3", "content": "Phục vụ", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
|
||||
{"type": "text", "id": "StPhone3", "content": "0987 654 321", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
|
||||
{"type": "text", "id": "StShift3", "content": "Tối (17-23h)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 180},
|
||||
{"type": "frame", "id": "StStat3", "width": "fill_container", "children": [{"type": "frame", "id": "StBadge3", "fill": "#FEF3C7", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "StBdgTx3", "content": "Nghỉ phép", "fill": "#D97706", "fontFamily": "Poppins", "fontSize": 12}]}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StRow4",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StEmp4Cell",
|
||||
"width": 220,
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "StAv4", "width": 32, "height": 32, "cornerRadius": 16, "fill": "#E8D5C4", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "StAv4Tx", "content": "TK", "fill": "$brown-primary", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "bold"}]},
|
||||
{"type": "text", "id": "StName4", "content": "Trần Kiên", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "StPos4", "content": "Bếp trưởng", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
|
||||
{"type": "text", "id": "StPhone4", "content": "0934 567 890", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
|
||||
{"type": "text", "id": "StShift4", "content": "Sáng (7-14h)", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 180},
|
||||
{"type": "frame", "id": "StStat4", "width": "fill_container", "children": [{"type": "frame", "id": "StBadge4", "fill": "#DCFCE7", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "StBdgTx4", "content": "Đang làm", "fill": "#16A34A", "fontFamily": "Poppins", "fontSize": 12}]}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StRow5",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"stroke": {"align": "inside", "fill": "$border-subtle", "thickness": {"bottom": 1}},
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StEmp5Cell",
|
||||
"width": 220,
|
||||
"layout": "horizontal",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "StAv5", "width": 32, "height": 32, "cornerRadius": 16, "fill": "#DBEAFE", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "StAv5Tx", "content": "NN", "fill": "#2563EB", "fontFamily": "Poppins", "fontSize": 11, "fontWeight": "bold"}]},
|
||||
{"type": "text", "id": "StName5", "content": "Ngô Ngọc", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "StPos5", "content": "Phục vụ", "fill": "$text-primary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
|
||||
{"type": "text", "id": "StPhone5", "content": "0967 890 123", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 150},
|
||||
{"type": "text", "id": "StShift5", "content": "Toàn thời gian", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 14, "width": 180},
|
||||
{"type": "frame", "id": "StStat5", "width": "fill_container", "children": [{"type": "frame", "id": "StBadge5", "fill": "#DBEAFE", "cornerRadius": 20, "padding": [4, 12], "children": [{"type": "text", "id": "StBdgTx5", "content": "Thử việc", "fill": "#2563EB", "fontFamily": "Poppins", "fontSize": 12}]}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaginationStaff",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"layout": "horizontal",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "PagInfoStaff", "content": "Hiển thị 1-5 / 12 nhân viên", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PagCtrlStaff",
|
||||
"layout": "horizontal",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "PagPrevSt", "width": 32, "height": 32, "cornerRadius": 8, "fill": "$bg-interactive", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "IcPrevSt", "iconFontFamily": "lucide", "iconFontName": "chevron-left", "width": 16, "height": 16, "fill": "$text-secondary"}]},
|
||||
{"type": "frame", "id": "PagPage1St", "width": 32, "height": 32, "cornerRadius": 8, "fill": "$orange-primary", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Pg1TxSt", "content": "1", "fill": "#FFFFFF", "fontFamily": "Poppins", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "PagPage2St", "width": 32, "height": 32, "cornerRadius": 8, "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Pg2TxSt", "content": "2", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "PagPage3St", "width": 32, "height": 32, "cornerRadius": 8, "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Pg3TxSt", "content": "3", "fill": "$text-secondary", "fontFamily": "Poppins", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "PagNextSt", "width": 32, "height": 32, "cornerRadius": 8, "fill": "$bg-interactive", "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "IcNextSt", "iconFontFamily": "lucide", "iconFontName": "chevron-right", "width": 16, "height": 16, "fill": "$text-secondary"}]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {"type": "color", "value": "#FAF8F4"},
|
||||
"bg-surface": {"type": "color", "value": "#FFFFFF"},
|
||||
"bg-elevated": {"type": "color", "value": "#FFF8F0"},
|
||||
"bg-interactive": {"type": "color", "value": "#F5EDE4"},
|
||||
"brown-primary": {"type": "color", "value": "#6B4423"},
|
||||
"brown-dark": {"type": "color", "value": "#4A2E15"},
|
||||
"orange-primary": {"type": "color", "value": "#FF6B35"},
|
||||
"orange-light": {"type": "color", "value": "#FF8A5C"},
|
||||
"text-primary": {"type": "color", "value": "#2C2C2C"},
|
||||
"text-secondary": {"type": "color", "value": "#6B6B6B"},
|
||||
"text-tertiary": {"type": "color", "value": "#9B9B9B"},
|
||||
"border-default": {"type": "color", "value": "#E5DDD4"},
|
||||
"border-subtle": {"type": "color", "value": "#F0EAE2"},
|
||||
"success": {"type": "color", "value": "#22C55E"},
|
||||
"warning": {"type": "color", "value": "#F59E0B"},
|
||||
"error": {"type": "color", "value": "#EF4444"}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,259 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ForgotScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Auth/ForgotPassword",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 844,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"padding": [
|
||||
56,
|
||||
24,
|
||||
32,
|
||||
24
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ForgotTopBar",
|
||||
"width": "fill_container",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ForgotBackBtn",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ForgotBackIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "arrow-left",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ForgotContent",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
0,
|
||||
32
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ForgotIconWrap",
|
||||
"width": 80,
|
||||
"height": 80,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 20,
|
||||
"layout": "vertical",
|
||||
"padding": 20,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ForgotKeyIcon",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"iconFontName": "key",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ForgotTitle",
|
||||
"fill": "$text-primary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container",
|
||||
"content": "Quên mật khẩu?",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 26,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ForgotSubtitle",
|
||||
"fill": "$text-secondary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container",
|
||||
"content": "Nhập email hoặc số điện thoại để nhận mã xác nhận",
|
||||
"lineHeight": 1.4,
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ForgotForm",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ForgotEmailField",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ForgotEmailIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "mail",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ForgotEmailPlaceholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Email hoặc số điện thoại",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ForgotButton",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 30,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ForgotButtonText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Gửi mã xác nhận",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ForgotSpacer",
|
||||
"width": 1,
|
||||
"height": "fill_container"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ForgotFooterLink",
|
||||
"fill": "$orange-primary",
|
||||
"content": "Quay lại đăng nhập",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,429 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Auth/Login",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 844,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": [
|
||||
56,
|
||||
24,
|
||||
32,
|
||||
24
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginHeader",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginLogo",
|
||||
"width": 64,
|
||||
"height": 64,
|
||||
"fill": "$brown-primary",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "LoginLogoText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "EK",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "LoginTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Chào mừng trở lại!",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 26,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "LoginSubtitle",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Đăng nhập vào EggyMon Kitchen",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginForm",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 14,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginEmailField",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "LoginEmailIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "mail",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "LoginEmailPlaceholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Email hoặc số điện thoại",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginPasswordField",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "LoginPasswordIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "lock",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "LoginPasswordPlaceholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Mật khẩu",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "LoginPasswordEye",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "eye-off",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "LoginForgotLink",
|
||||
"fill": "$orange-primary",
|
||||
"content": "Quên mật khẩu?",
|
||||
"textAlign": "right",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginActions",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginButton",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 30,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "LoginButtonText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Đăng nhập",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginDivider",
|
||||
"width": "fill_container",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginDividerLeft",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "LoginDividerText",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "hoặc",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginDividerRight",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"fill": "$border-default"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginSocialRow",
|
||||
"width": "fill_container",
|
||||
"gap": 16,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginGoogleBtn",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "#FFFFFF",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "kUZ2H",
|
||||
"name": "googleG",
|
||||
"fill": "#EA4335",
|
||||
"content": "G",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginFacebookBtn",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "#FFFFFF",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Ul8Tr",
|
||||
"name": "facebookIcon",
|
||||
"width": 22,
|
||||
"height": 22,
|
||||
"iconFontName": "facebook",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#1877F2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginAppleBtn",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "#FFFFFF",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "d2CMB",
|
||||
"name": "appleIcon",
|
||||
"width": 22,
|
||||
"height": 22,
|
||||
"iconFontName": "apple",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginSpacer",
|
||||
"width": 1,
|
||||
"height": "fill_container"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "LoginFooter",
|
||||
"gap": 4,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "LoginFooterText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Chưa có tài khoản?",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "LoginFooterLink",
|
||||
"fill": "$orange-primary",
|
||||
"content": "Đăng ký ngay",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,357 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Auth/OtpVerify",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 844,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": [
|
||||
56,
|
||||
24,
|
||||
32,
|
||||
24
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpTopBar",
|
||||
"width": "fill_container",
|
||||
"padding": [
|
||||
0,
|
||||
0,
|
||||
16,
|
||||
0
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpBackBtn",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "#000000"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "OtpBackIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "chevron-left",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpContent",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpIconWrap",
|
||||
"width": 80,
|
||||
"height": 80,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 20,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "OtpShieldIcon",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"iconFontName": "shield-check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OtpTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Nhập mã xác nhận",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 26,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OtpSubtitle",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Mã OTP đã được gửi đến 0912***456",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpInputRow",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpBox1",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "$orange-primary"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OtpDigit1",
|
||||
"fill": "$text-primary",
|
||||
"content": "4",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpBox2",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "$orange-primary"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OtpDigit2",
|
||||
"fill": "$text-primary",
|
||||
"content": "7",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpBox3",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "$orange-primary"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OtpDigit3",
|
||||
"fill": "$text-primary",
|
||||
"content": "2",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpBox4",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 1.5,
|
||||
"fill": "#000000"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpBox5",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 1.5,
|
||||
"fill": "#000000"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpBox6",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 1.5,
|
||||
"fill": "#000000"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OtpTimer",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Gửi lại mã sau 00:45",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpButton",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 30,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OtpButtonText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Xác nhận",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OtpResendLink",
|
||||
"fill": "$orange-primary",
|
||||
"content": "Gửi lại mã OTP",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OtpSpacer",
|
||||
"width": 1,
|
||||
"height": "fill_container"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,562 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Auth/PinEntry",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 844,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"padding": [
|
||||
56,
|
||||
24,
|
||||
32,
|
||||
24
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinHeader",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinLogo",
|
||||
"width": 64,
|
||||
"height": 64,
|
||||
"fill": "$brown-primary",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PinLogoText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "EK",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PinTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Nhập mã PIN",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 26,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PinSubtitle",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Nhập mã PIN 6 số để truy cập",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinDotsRow",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinDot1",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 8
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinDot2",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 8
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinDot3",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 8
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinDot4",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"fill": "$border-default",
|
||||
"cornerRadius": 8,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 2,
|
||||
"fill": "$border-default"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinDot5",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"fill": "$border-default",
|
||||
"cornerRadius": 8,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 2,
|
||||
"fill": "$border-default"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinDot6",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"fill": "$border-default",
|
||||
"cornerRadius": 8,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 2,
|
||||
"fill": "$border-default"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinSpacer",
|
||||
"width": 1,
|
||||
"height": "fill_container"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinNumpad",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinRow1",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKey1",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "3UVCU",
|
||||
"name": "num1",
|
||||
"fill": "$text-primary",
|
||||
"content": "1",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKey2",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "q1PUd",
|
||||
"name": "num2",
|
||||
"fill": "$text-primary",
|
||||
"content": "2",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKey3",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Fq93Z",
|
||||
"name": "num3",
|
||||
"fill": "$text-primary",
|
||||
"content": "3",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinRow2",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKey4",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "GUYyP",
|
||||
"name": "num4",
|
||||
"fill": "$text-primary",
|
||||
"content": "4",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKey5",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ryXMU",
|
||||
"name": "num5",
|
||||
"fill": "$text-primary",
|
||||
"content": "5",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKey6",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "KEWRy",
|
||||
"name": "num6",
|
||||
"fill": "$text-primary",
|
||||
"content": "6",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinRow3",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKey7",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "dyDQH",
|
||||
"name": "num7",
|
||||
"fill": "$text-primary",
|
||||
"content": "7",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKey8",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Kzfef",
|
||||
"name": "num8",
|
||||
"fill": "$text-primary",
|
||||
"content": "8",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKey9",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "bXeXd",
|
||||
"name": "num9",
|
||||
"fill": "$text-primary",
|
||||
"content": "9",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinRow4",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKeyDelete",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "xjJtr",
|
||||
"name": "delIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "delete",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKey0",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Ra3cU",
|
||||
"name": "num0",
|
||||
"fill": "$text-primary",
|
||||
"content": "0",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinKeyEnter",
|
||||
"width": 72,
|
||||
"height": 72,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "hzhLh",
|
||||
"name": "enterIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#FFFFFF"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinFooter",
|
||||
"gap": 16,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PinSwitchUser",
|
||||
"fill": "$orange-primary",
|
||||
"content": "Đổi người dùng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PinFooterDivider",
|
||||
"width": 1,
|
||||
"height": 16,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PinForgotPin",
|
||||
"fill": "$orange-primary",
|
||||
"content": "Quên PIN?",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,415 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Auth/Register",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 844,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": [
|
||||
48,
|
||||
24,
|
||||
32,
|
||||
24
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterHeader",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterLogo",
|
||||
"width": 64,
|
||||
"height": 64,
|
||||
"fill": "$brown-primary",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterLogoText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "EK",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Tạo tài khoản",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 26,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterSubtitle",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Đăng ký để nhận ưu đãi đặc biệt",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterForm",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterNameField",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RegisterNameIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "user",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterNamePlaceholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Họ và tên",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterEmailField",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RegisterEmailIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "mail",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterEmailPlaceholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Email",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterPhoneField",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RegisterPhoneIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "phone",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterPhonePlaceholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Số điện thoại",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterPasswordField",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"gap": 8,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RegisterPasswordIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "lock",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterPasswordPlaceholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Mật khẩu",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RegisterPasswordEye",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "eye-off",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterConfirmField",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"gap": 8,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RegisterConfirmIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "lock",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterConfirmPlaceholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Xác nhận mật khẩu",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RegisterConfirmEye",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "eye-off",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterTermsRow",
|
||||
"width": "fill_container",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterCheckbox",
|
||||
"width": 22,
|
||||
"height": 22,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 4,
|
||||
"stroke": {
|
||||
"thickness": 1.5,
|
||||
"fill": "$text-tertiary"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterTermsText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Tôi đồng ý với Điều khoản sử dụng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterButton",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 30,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterButtonText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Đăng ký",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterSpacer",
|
||||
"width": 1,
|
||||
"height": "fill_container"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RegisterFooter",
|
||||
"gap": 4,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterFooterText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Đã có tài khoản?",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RegisterFooterLink",
|
||||
"fill": "$orange-primary",
|
||||
"content": "Đăng nhập",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,940 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MembershipCardScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Screen/MembershipCard",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 844,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MemberCardTopBar",
|
||||
"name": "TopBar",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-surface",
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "MemberCardBackIcon",
|
||||
"name": "BackIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "arrow-left",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "MemberCardTitle",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"content": "Thẻ thành viên",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "MemberCardSettingsIcon",
|
||||
"name": "SettingsIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "settings",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MemberCardContent",
|
||||
"name": "Content",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": [
|
||||
12,
|
||||
0
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MembershipCardFrame",
|
||||
"name": "MembershipCard",
|
||||
"width": "fill_container",
|
||||
"height": 190,
|
||||
"fill": "$brown-primary",
|
||||
"cornerRadius": 20,
|
||||
"effect": {
|
||||
"type": "shadow",
|
||||
"shadowType": "outer",
|
||||
"color": "#00000020",
|
||||
"offset": {
|
||||
"x": 0,
|
||||
"y": 4
|
||||
},
|
||||
"blur": 16,
|
||||
"spread": -2
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 14,
|
||||
"padding": [
|
||||
22,
|
||||
20
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CardTopRow",
|
||||
"name": "CardTopRow",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CardLogoRow",
|
||||
"name": "LogoRow",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CardLogo",
|
||||
"name": "Logo",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "#FFFFFF",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CardLogoText",
|
||||
"name": "LogoText",
|
||||
"content": "EK",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CardBrandName",
|
||||
"name": "BrandName",
|
||||
"content": "EggyMon Kitchen",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "GV2KT",
|
||||
"name": "logoIcon",
|
||||
"width": 28,
|
||||
"height": 28,
|
||||
"iconFontName": "coffee",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Pd7fO",
|
||||
"name": "logoText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Eggymon Kitchen",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierBadge",
|
||||
"name": "TierBadge",
|
||||
"fill": {
|
||||
"type": "gradient",
|
||||
"gradientType": "linear",
|
||||
"enabled": true,
|
||||
"rotation": 135,
|
||||
"size": {
|
||||
"height": 1
|
||||
},
|
||||
"colors": [
|
||||
{
|
||||
"color": "#FFD700",
|
||||
"position": 0
|
||||
},
|
||||
{
|
||||
"color": "#FFC700",
|
||||
"position": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
"cornerRadius": 12,
|
||||
"effect": {
|
||||
"type": "shadow",
|
||||
"shadowType": "outer",
|
||||
"color": "#00000010",
|
||||
"offset": {
|
||||
"x": 0,
|
||||
"y": 2
|
||||
},
|
||||
"blur": 4
|
||||
},
|
||||
"gap": 4,
|
||||
"padding": [
|
||||
5,
|
||||
10
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TierBadgeIcon",
|
||||
"name": "TierIcon",
|
||||
"width": 0,
|
||||
"height": 0,
|
||||
"iconFontFamily": "lucide"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TierBadgeText",
|
||||
"name": "TierText",
|
||||
"content": "Gold Member",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "8eSos",
|
||||
"name": "tierIcon",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "star",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#8B6914"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "fANNn",
|
||||
"name": "tierText",
|
||||
"fill": "#8B6914",
|
||||
"content": "Vàng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CardMiddleSection",
|
||||
"name": "MiddleSection",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "MemberName",
|
||||
"name": "MemberName",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Nguyễn Văn A",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "MemberId",
|
||||
"name": "MemberId",
|
||||
"fill": "#DCC8AF",
|
||||
"content": "EK-2024-001234",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CardBottomRow",
|
||||
"name": "BottomRow",
|
||||
"width": "fill_container",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CardPoints",
|
||||
"name": "Points",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "2,450 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "YKSsI",
|
||||
"name": "pointsLabel",
|
||||
"fill": "#D4C4B0",
|
||||
"content": "Điểm tích lũy",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "O4mLl",
|
||||
"name": "pointsIcon",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "zap",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#FFD700"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QRCodeSection",
|
||||
"name": "QRCodeSection",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": [
|
||||
8,
|
||||
0,
|
||||
0,
|
||||
0
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QRCodeFrame",
|
||||
"name": "QRCodeFrame",
|
||||
"width": 160,
|
||||
"height": 160,
|
||||
"fill": "#FFFFFF",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"effect": {
|
||||
"type": "shadow",
|
||||
"shadowType": "outer",
|
||||
"color": "#00000008",
|
||||
"offset": {
|
||||
"x": 0,
|
||||
"y": 2
|
||||
},
|
||||
"blur": 8
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"padding": 16,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "QRCodeIcon",
|
||||
"name": "QRIcon",
|
||||
"width": 90,
|
||||
"height": 90,
|
||||
"iconFontName": "qr-code",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QRCodeLabel",
|
||||
"name": "QRLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "QR Code",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QRScanText",
|
||||
"name": "ScanText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Quét mã để tích điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QuickActionsRow",
|
||||
"name": "QuickActions",
|
||||
"width": "fill_container",
|
||||
"gap": 20,
|
||||
"padding": [
|
||||
0,
|
||||
20
|
||||
],
|
||||
"justifyContent": "space_around",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ActionHistory",
|
||||
"name": "ActionHistory",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ActionHistoryIconBg",
|
||||
"name": "IconBg",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ActionHistoryIcon",
|
||||
"name": "Icon",
|
||||
"width": 0,
|
||||
"height": 0,
|
||||
"iconFontFamily": "lucide"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "j5qFJ",
|
||||
"name": "historyIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "history",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$brown-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ActionHistoryLabel",
|
||||
"name": "Label",
|
||||
"fill": "$text-primary",
|
||||
"content": "Lịch sử",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ActionRewards",
|
||||
"name": "ActionRewards",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ActionRewardsIconBg",
|
||||
"name": "IconBg",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ActionRewardsIcon",
|
||||
"name": "Icon",
|
||||
"width": 0,
|
||||
"height": 0,
|
||||
"iconFontFamily": "lucide"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "jyeYW",
|
||||
"name": "rewardsIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "gift",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ActionRewardsLabel",
|
||||
"name": "Label",
|
||||
"fill": "$text-primary",
|
||||
"content": "Ưu đãi",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ActionReferral",
|
||||
"name": "ActionReferral",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ActionReferralIconBg",
|
||||
"name": "IconBg",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ActionReferralIcon",
|
||||
"name": "Icon",
|
||||
"width": 0,
|
||||
"height": 0,
|
||||
"iconFontFamily": "lucide"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "641iq",
|
||||
"name": "referralIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "users",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$brown-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ActionReferralLabel",
|
||||
"name": "Label",
|
||||
"fill": "$text-primary",
|
||||
"content": "Giới thiệu",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RecentActivitySection",
|
||||
"name": "RecentActivity",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"padding": [
|
||||
0,
|
||||
20,
|
||||
20,
|
||||
20
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RecentActivityTitle",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"content": "Hoạt động gần đây",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ActivityItem1",
|
||||
"name": "ActivityItem1",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 10,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
10,
|
||||
14
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Activity1IconBg",
|
||||
"name": "IconBg",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "#DCFCE7",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Activity1Icon",
|
||||
"name": "Icon",
|
||||
"width": 0,
|
||||
"height": 0,
|
||||
"iconFontFamily": "lucide"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "lCR3h",
|
||||
"name": "activity1Icon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "shopping-bag",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$success"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Activity1Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Activity1Desc",
|
||||
"name": "Description",
|
||||
"fill": "$text-primary",
|
||||
"content": "Mua hàng - Combo bánh mì",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Activity1Date",
|
||||
"name": "Date",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "10/02/2025",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Activity1Points",
|
||||
"name": "Points",
|
||||
"fill": "$success",
|
||||
"content": "+50 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ActivityItem2",
|
||||
"name": "ActivityItem2",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 10,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
10,
|
||||
14
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Activity2IconBg",
|
||||
"name": "IconBg",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "#FFF3E0",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Activity2Icon",
|
||||
"name": "Icon",
|
||||
"width": 0,
|
||||
"height": 0,
|
||||
"iconFontFamily": "lucide"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "cDqsu",
|
||||
"name": "activity2Icon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "gift",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$warning"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Activity2Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Activity2Desc",
|
||||
"name": "Description",
|
||||
"fill": "$text-primary",
|
||||
"content": "Đổi ưu đãi - Giảm 20%",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Activity2Date",
|
||||
"name": "Date",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "08/02/2025",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Activity2Points",
|
||||
"name": "Points",
|
||||
"fill": "$error",
|
||||
"content": "-100 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ActivityItem3",
|
||||
"name": "ActivityItem3",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 10,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
10,
|
||||
14
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Activity3IconBg",
|
||||
"name": "IconBg",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "#DCFCE7",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Activity3Icon",
|
||||
"name": "Icon",
|
||||
"width": 0,
|
||||
"height": 0,
|
||||
"iconFontFamily": "lucide"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "DDn1O",
|
||||
"name": "activity3Icon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "shopping-bag",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$success"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Activity3Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Activity3Desc",
|
||||
"name": "Description",
|
||||
"fill": "$text-primary",
|
||||
"content": "Mua hàng - Trà sữa",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Activity3Date",
|
||||
"name": "Date",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "05/02/2025",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Activity3Points",
|
||||
"name": "Points",
|
||||
"fill": "$success",
|
||||
"content": "+30 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"warning": {
|
||||
"type": "color",
|
||||
"value": "#F59E0B"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,799 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PointsHistoryScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Screen/PointsHistory",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 844,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PointsTopBar",
|
||||
"name": "TopBar",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-surface",
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PointsBackIcon",
|
||||
"name": "BackIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "arrow-left",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PointsTitle",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"content": "Lịch sử điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PointsFilterIcon",
|
||||
"name": "FilterIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "sliders-horizontal",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PointsScrollContent",
|
||||
"name": "ScrollContent",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PointsSummaryCard",
|
||||
"name": "SummaryCard",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SummaryLabel",
|
||||
"name": "Label",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Tổng điểm hiện tại",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SummaryTotal",
|
||||
"name": "TotalPoints",
|
||||
"fill": "$orange-primary",
|
||||
"content": "2,450",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 36,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SummaryStatsRow",
|
||||
"name": "StatsRow",
|
||||
"width": "fill_container",
|
||||
"gap": 20,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SummaryEarned",
|
||||
"name": "Earned",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EarnedLabel",
|
||||
"name": "Label",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Đã tích",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EarnedValue",
|
||||
"name": "Value",
|
||||
"fill": "$success",
|
||||
"content": "3,200",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SummaryDivider",
|
||||
"name": "Divider",
|
||||
"width": 1,
|
||||
"height": 40,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SummaryUsed",
|
||||
"name": "Used",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "UsedLabel",
|
||||
"name": "Label",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Đã dùng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "UsedValue",
|
||||
"name": "Value",
|
||||
"fill": "$text-secondary",
|
||||
"content": "750",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MonthFilterTabs",
|
||||
"name": "MonthFilter",
|
||||
"width": "fill_container",
|
||||
"gap": 8,
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MonthTab1",
|
||||
"name": "TabT1",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 8,
|
||||
"padding": [
|
||||
6,
|
||||
12
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "MonthTab1Text",
|
||||
"fill": "$text-secondary",
|
||||
"content": "T1",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MonthTab2",
|
||||
"name": "TabT2",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 8,
|
||||
"padding": [
|
||||
6,
|
||||
12
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "MonthTab2Text",
|
||||
"fill": "$bg-surface",
|
||||
"content": "T2",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MonthTab3",
|
||||
"name": "TabT3",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 8,
|
||||
"padding": [
|
||||
6,
|
||||
12
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "MonthTab3Text",
|
||||
"fill": "$text-secondary",
|
||||
"content": "T3",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MonthTab4",
|
||||
"name": "TabT4",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 8,
|
||||
"padding": [
|
||||
6,
|
||||
12
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "MonthTab4Text",
|
||||
"fill": "$text-secondary",
|
||||
"content": "T4",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MonthTab5",
|
||||
"name": "TabT5",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 8,
|
||||
"padding": [
|
||||
6,
|
||||
12
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "MonthTab5Text",
|
||||
"fill": "$text-secondary",
|
||||
"content": "T5",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "MonthTab6",
|
||||
"name": "TabT6",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 8,
|
||||
"padding": [
|
||||
6,
|
||||
12
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "MonthTab6Text",
|
||||
"fill": "$text-secondary",
|
||||
"content": "T6",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TransactionList",
|
||||
"name": "TransactionList",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TxItem1",
|
||||
"name": "Transaction1",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
14,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Tx1IconBg",
|
||||
"name": "IconBg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#DCFCE7",
|
||||
"cornerRadius": 10,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Tx1Icon",
|
||||
"name": "Icon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "shopping-bag",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$success"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Tx1Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx1Desc",
|
||||
"name": "Description",
|
||||
"fill": "$text-primary",
|
||||
"content": "Mua hàng - Combo bánh mì",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx1Date",
|
||||
"name": "Date",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "10/02/2025",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx1Points",
|
||||
"name": "Points",
|
||||
"fill": "$success",
|
||||
"content": "+50 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TxItem2",
|
||||
"name": "Transaction2",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
14,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Tx2IconBg",
|
||||
"name": "IconBg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#FFF3E0",
|
||||
"cornerRadius": 10,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Tx2Icon",
|
||||
"name": "Icon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "gift",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$warning"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Tx2Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx2Desc",
|
||||
"name": "Description",
|
||||
"fill": "$text-primary",
|
||||
"content": "Đổi ưu đãi - Giảm 20%",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx2Date",
|
||||
"name": "Date",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "08/02/2025",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx2Points",
|
||||
"name": "Points",
|
||||
"fill": "$orange-primary",
|
||||
"content": "-100 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TxItem3",
|
||||
"name": "Transaction3",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
14,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Tx3IconBg",
|
||||
"name": "IconBg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#DCFCE7",
|
||||
"cornerRadius": 10,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Tx3Icon",
|
||||
"name": "Icon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "coffee",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$success"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Tx3Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx3Desc",
|
||||
"name": "Description",
|
||||
"fill": "$text-primary",
|
||||
"content": "Mua hàng - Trà sữa",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx3Date",
|
||||
"name": "Date",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "05/02/2025",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx3Points",
|
||||
"name": "Points",
|
||||
"fill": "$success",
|
||||
"content": "+30 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TxItem4",
|
||||
"name": "Transaction4",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
14,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Tx4IconBg",
|
||||
"name": "IconBg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#FFF3E0",
|
||||
"cornerRadius": 10,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Tx4Icon",
|
||||
"name": "Icon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "cake",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$warning"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Tx4Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx4Desc",
|
||||
"name": "Description",
|
||||
"fill": "$text-primary",
|
||||
"content": "Thưởng sinh nhật",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx4Date",
|
||||
"name": "Date",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "01/02/2025",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx4Points",
|
||||
"name": "Points",
|
||||
"fill": "$success",
|
||||
"content": "+200 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TxItem5",
|
||||
"name": "Transaction5",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
14,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Tx5IconBg",
|
||||
"name": "IconBg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#DCFCE7",
|
||||
"cornerRadius": 10,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Tx5Icon",
|
||||
"name": "Icon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "utensils",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$success"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Tx5Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx5Desc",
|
||||
"name": "Description",
|
||||
"fill": "$text-primary",
|
||||
"content": "Mua hàng - Cơm trưa",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx5Date",
|
||||
"name": "Date",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "28/01/2025",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Tx5Points",
|
||||
"name": "Points",
|
||||
"fill": "$success",
|
||||
"content": "+45 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"warning": {
|
||||
"type": "color",
|
||||
"value": "#F59E0B"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,997 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReferralProgramScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Screen/ReferralProgram",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 1022,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReferralTopBar",
|
||||
"name": "TopBar",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-surface",
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ReferralBackIcon",
|
||||
"name": "BackIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "arrow-left",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ReferralScreenTitle",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"content": "Giới thiệu bạn bè",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReferralTopBarSpacer",
|
||||
"name": "Spacer",
|
||||
"width": "fill_container",
|
||||
"height": 24
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReferralScrollContent",
|
||||
"name": "ScrollContent",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 14,
|
||||
"padding": [
|
||||
16,
|
||||
16,
|
||||
32,
|
||||
16
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReferralHeroBanner",
|
||||
"name": "HeroBanner",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 20,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": 18,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "HeroIconBg",
|
||||
"name": "IconBg",
|
||||
"width": 56,
|
||||
"height": 56,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 28,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "HeroUsersIcon",
|
||||
"name": "Icon",
|
||||
"width": 28,
|
||||
"height": 28,
|
||||
"iconFontName": "users",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$brown-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "HeroTitle",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container",
|
||||
"content": "Giới thiệu bạn bè",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 19,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "HeroSubtitle",
|
||||
"name": "Subtitle",
|
||||
"fill": "$text-secondary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container",
|
||||
"content": "Nhận 100 điểm cho mỗi bạn bè đăng ký!",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReferralCodeCard",
|
||||
"name": "ReferralCodeCard",
|
||||
"width": "fill_container",
|
||||
"fill": "$brown-primary",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "#FFFFFF33"
|
||||
},
|
||||
"effect": {
|
||||
"type": "shadow",
|
||||
"shadowType": "outer",
|
||||
"color": "#6B442320",
|
||||
"offset": {
|
||||
"x": 0,
|
||||
"y": 4
|
||||
},
|
||||
"blur": 12
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 14,
|
||||
"padding": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CodeLabel",
|
||||
"name": "Label",
|
||||
"fill": "#FFFFFFCC",
|
||||
"content": "Mã giới thiệu của bạn",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600",
|
||||
"letterSpacing": 0.3
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CodeBox",
|
||||
"name": "CodeBox",
|
||||
"width": "fill_container",
|
||||
"fill": "#FFFFFF1A",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "#FFFFFF1A"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"padding": [
|
||||
14,
|
||||
16
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CodeValue",
|
||||
"name": "Code",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "EGGY-VAN-A2024",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 20,
|
||||
"fontWeight": "700",
|
||||
"letterSpacing": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CodeActionRow",
|
||||
"name": "ActionRow",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CopyButton",
|
||||
"name": "CopyButton",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"fill": "#FFFFFF1A",
|
||||
"cornerRadius": 10,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "#FFFFFF1A"
|
||||
},
|
||||
"gap": 6,
|
||||
"padding": [
|
||||
12,
|
||||
0
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "CopyIcon",
|
||||
"name": "Icon",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"iconFontName": "copy",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CopyText",
|
||||
"name": "Text",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Sao chép",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ShareButton",
|
||||
"name": "ShareButton",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 10,
|
||||
"effect": {
|
||||
"type": "shadow",
|
||||
"shadowType": "outer",
|
||||
"color": "#FF6B3533",
|
||||
"offset": {
|
||||
"x": 0,
|
||||
"y": 2
|
||||
},
|
||||
"blur": 4
|
||||
},
|
||||
"gap": 6,
|
||||
"padding": [
|
||||
12,
|
||||
0
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "ShareIcon",
|
||||
"name": "Icon",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"iconFontName": "share-2",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#FFFFFF"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ShareText",
|
||||
"name": "Text",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Chia sẻ",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ReferralStatsRow",
|
||||
"name": "StatsRow",
|
||||
"width": "fill_container",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StatReferred",
|
||||
"name": "Referred",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"effect": {
|
||||
"type": "shadow",
|
||||
"shadowType": "outer",
|
||||
"color": "#00000008",
|
||||
"offset": {
|
||||
"x": 0,
|
||||
"y": 1
|
||||
},
|
||||
"blur": 3
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"padding": 16,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "StatReferredLabel",
|
||||
"name": "Label",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Đã giới thiệu",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "StatReferredValue",
|
||||
"name": "Value",
|
||||
"fill": "$text-primary",
|
||||
"content": "5",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StatPointsEarned",
|
||||
"name": "PointsEarned",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"effect": {
|
||||
"type": "shadow",
|
||||
"shadowType": "outer",
|
||||
"color": "#00000008",
|
||||
"offset": {
|
||||
"x": 0,
|
||||
"y": 1
|
||||
},
|
||||
"blur": 3
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"padding": 16,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "StatPointsLabel",
|
||||
"name": "Label",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Điểm nhận",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "StatPointsValue",
|
||||
"name": "Value",
|
||||
"fill": "$orange-primary",
|
||||
"content": "500",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "HowItWorksSection",
|
||||
"name": "HowItWorks",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"padding": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "HowItWorksTitle",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"content": "Cách thức hoạt động",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600",
|
||||
"letterSpacing": 0.2
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step1",
|
||||
"name": "Step1",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step1IconBg",
|
||||
"name": "IconBg",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Step1Icon",
|
||||
"name": "Icon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "share",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step1Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step1Label",
|
||||
"name": "Label",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Bước 1",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 0.5
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step1Text",
|
||||
"name": "Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "Chia sẻ mã cho bạn bè",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step2",
|
||||
"name": "Step2",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step2IconBg",
|
||||
"name": "IconBg",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Step2Icon",
|
||||
"name": "Icon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "user-plus",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step2Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step2Label",
|
||||
"name": "Label",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Bước 2",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 0.5
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step2Text",
|
||||
"name": "Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "Bạn bè đăng ký & mua hàng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step3",
|
||||
"name": "Step3",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step3IconBg",
|
||||
"name": "IconBg",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Step3Icon",
|
||||
"name": "Icon",
|
||||
"width": 18,
|
||||
"height": 18,
|
||||
"iconFontName": "gift",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step3Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step3Label",
|
||||
"name": "Label",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Bước 3",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 0.5
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step3Text",
|
||||
"name": "Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "Cả hai nhận 100 điểm!",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FriendsListSection",
|
||||
"name": "FriendsList",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "FriendsListTitle",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"content": "Bạn bè đã giới thiệu",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600",
|
||||
"letterSpacing": 0.2
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FriendItem1",
|
||||
"name": "Friend1",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"gap": 10,
|
||||
"padding": [
|
||||
10,
|
||||
14
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Friend1Avatar",
|
||||
"name": "Avatar",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend1Initial",
|
||||
"name": "Initial",
|
||||
"fill": "$brown-primary",
|
||||
"content": "TB",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Friend1Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend1Name",
|
||||
"name": "Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Trần Bình",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend1Date",
|
||||
"name": "Date",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Tham gia 05/01/2025",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend1Points",
|
||||
"name": "Points",
|
||||
"fill": "$success",
|
||||
"content": "+100 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FriendItem2",
|
||||
"name": "Friend2",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"gap": 10,
|
||||
"padding": [
|
||||
10,
|
||||
14
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Friend2Avatar",
|
||||
"name": "Avatar",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend2Initial",
|
||||
"name": "Initial",
|
||||
"fill": "$brown-primary",
|
||||
"content": "LH",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Friend2Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend2Name",
|
||||
"name": "Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Lê Hương",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend2Date",
|
||||
"name": "Date",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Tham gia 20/12/2024",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend2Points",
|
||||
"name": "Points",
|
||||
"fill": "$success",
|
||||
"content": "+100 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "FriendItem3",
|
||||
"name": "Friend3",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
"gap": 10,
|
||||
"padding": [
|
||||
10,
|
||||
14
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Friend3Avatar",
|
||||
"name": "Avatar",
|
||||
"width": 44,
|
||||
"height": 44,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 24,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend3Initial",
|
||||
"name": "Initial",
|
||||
"fill": "$brown-primary",
|
||||
"content": "PM",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Friend3Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend3Name",
|
||||
"name": "Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Phạm Minh",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend3Date",
|
||||
"name": "Date",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Tham gia 15/11/2024",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 11
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Friend3Points",
|
||||
"name": "Points",
|
||||
"fill": "$success",
|
||||
"content": "+100 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"warning": {
|
||||
"type": "color",
|
||||
"value": "#F59E0B"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,979 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardsCatalogScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Screen/RewardsCatalog",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 911,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardsTopBar",
|
||||
"name": "TopBar",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-surface",
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RewardsBackIcon",
|
||||
"name": "BackIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "chevron-left",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "wU2Gs",
|
||||
"name": "titleWrapper",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RewardsScreenTitle",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"content": "Đổi thưởng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RewardsFilterIcon",
|
||||
"name": "FilterIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "sliders-horizontal",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardsScrollContent",
|
||||
"name": "ScrollContent",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": [
|
||||
16,
|
||||
20,
|
||||
20,
|
||||
20
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PointsBalanceBar",
|
||||
"name": "PointsBalance",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"padding": [
|
||||
14,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "BalanceLeft",
|
||||
"name": "Left",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "BalanceIcon",
|
||||
"name": "Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "coins",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "BalanceText",
|
||||
"name": "Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "Bạn có 2,450 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "BalanceArrow",
|
||||
"name": "Arrow",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "chevron-right",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CategoryTabs",
|
||||
"name": "CategoryTabs",
|
||||
"width": "fill_container",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CatTabAll",
|
||||
"name": "TabAll",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 20,
|
||||
"padding": [
|
||||
8,
|
||||
14
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CatTabAllText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Tất cả",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CatTabDiscount",
|
||||
"name": "TabDiscount",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 20,
|
||||
"padding": [
|
||||
8,
|
||||
14
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CatTabDiscountText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Giảm giá",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CatTabFree",
|
||||
"name": "TabFree",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 20,
|
||||
"padding": [
|
||||
8,
|
||||
14
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CatTabFreeText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Miễn phí",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CatTabGifts",
|
||||
"name": "TabGifts",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 20,
|
||||
"padding": [
|
||||
8,
|
||||
14
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CatTabGiftsText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Quà tặng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardsGrid",
|
||||
"name": "RewardsGrid",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "4yWVT",
|
||||
"name": "row1",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardCard1",
|
||||
"name": "RewardCoffee",
|
||||
"width": 166,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward1ImageArea",
|
||||
"name": "ImageArea",
|
||||
"width": "fill_container",
|
||||
"height": 100,
|
||||
"fill": "#FFE5D9",
|
||||
"cornerRadius": [
|
||||
16,
|
||||
16,
|
||||
0,
|
||||
0
|
||||
],
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Reward1Icon",
|
||||
"name": "Icon",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"iconFontName": "coffee",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward1Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward1Title",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container",
|
||||
"content": "1 ly cà phê miễn phí",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward1Points",
|
||||
"name": "Points",
|
||||
"fill": "$orange-primary",
|
||||
"content": "200 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward1Button",
|
||||
"name": "Button",
|
||||
"width": "fill_container",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"padding": [
|
||||
8,
|
||||
0
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward1BtnText",
|
||||
"name": "BtnText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Đổi ngay",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardCard2",
|
||||
"name": "RewardDiscount",
|
||||
"width": 166,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward2ImageArea",
|
||||
"name": "ImageArea",
|
||||
"width": "fill_container",
|
||||
"height": 100,
|
||||
"fill": "#FFE5D9",
|
||||
"cornerRadius": [
|
||||
16,
|
||||
16,
|
||||
0,
|
||||
0
|
||||
],
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Reward2Icon",
|
||||
"name": "Icon",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"iconFontName": "percent",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward2Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward2Title",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container",
|
||||
"content": "Giảm 20% đơn tiếp theo",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward2Points",
|
||||
"name": "Points",
|
||||
"fill": "$orange-primary",
|
||||
"content": "100 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward2Button",
|
||||
"name": "Button",
|
||||
"width": "fill_container",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"padding": [
|
||||
8,
|
||||
0
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward2BtnText",
|
||||
"name": "BtnText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Đổi ngay",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Dw1Yp",
|
||||
"name": "row2",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardCard3",
|
||||
"name": "RewardCombo",
|
||||
"width": 166,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward3ImageArea",
|
||||
"name": "ImageArea",
|
||||
"width": "fill_container",
|
||||
"height": 100,
|
||||
"fill": "#FFE5D9",
|
||||
"cornerRadius": [
|
||||
16,
|
||||
16,
|
||||
0,
|
||||
0
|
||||
],
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Reward3Icon",
|
||||
"name": "Icon",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"iconFontName": "sandwich",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward3Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward3Title",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container",
|
||||
"content": "Combo bánh + nước -50%",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward3Points",
|
||||
"name": "Points",
|
||||
"fill": "$orange-primary",
|
||||
"content": "350 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward3Button",
|
||||
"name": "Button",
|
||||
"width": "fill_container",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"padding": [
|
||||
8,
|
||||
0
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward3BtnText",
|
||||
"name": "BtnText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Đổi ngay",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardCard4",
|
||||
"name": "RewardShirt",
|
||||
"width": 166,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward4ImageArea",
|
||||
"name": "ImageArea",
|
||||
"width": "fill_container",
|
||||
"height": 100,
|
||||
"fill": "#FFE5D9",
|
||||
"cornerRadius": [
|
||||
16,
|
||||
16,
|
||||
0,
|
||||
0
|
||||
],
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Reward4Icon",
|
||||
"name": "Icon",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"iconFontName": "shirt",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward4Tag",
|
||||
"name": "Tag",
|
||||
"fill": "$error",
|
||||
"cornerRadius": 6,
|
||||
"padding": [
|
||||
3,
|
||||
8
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward4TagText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Sắp hết",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 10,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward4Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward4Title",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container",
|
||||
"content": "Áo thun EggyMon",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward4Points",
|
||||
"name": "Points",
|
||||
"fill": "$orange-primary",
|
||||
"content": "500 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward4Button",
|
||||
"name": "Button",
|
||||
"width": "fill_container",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"padding": [
|
||||
8,
|
||||
0
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward4BtnText",
|
||||
"name": "BtnText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Đổi ngay",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "x81EV",
|
||||
"name": "row3",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardCard5",
|
||||
"name": "RewardMealSet",
|
||||
"width": 166,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward5ImageArea",
|
||||
"name": "ImageArea",
|
||||
"width": "fill_container",
|
||||
"height": 100,
|
||||
"fill": "#FFE5D9",
|
||||
"cornerRadius": [
|
||||
16,
|
||||
16,
|
||||
0,
|
||||
0
|
||||
],
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Reward5Icon",
|
||||
"name": "Icon",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"iconFontName": "utensils",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward5Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward5Title",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container",
|
||||
"content": "Set ăn miễn phí",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward5Points",
|
||||
"name": "Points",
|
||||
"fill": "$orange-primary",
|
||||
"content": "800 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward5Button",
|
||||
"name": "Button",
|
||||
"width": "fill_container",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"padding": [
|
||||
8,
|
||||
0
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward5BtnText",
|
||||
"name": "BtnText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Đổi ngay",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RewardCard6",
|
||||
"name": "RewardVIP",
|
||||
"width": 166,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward6ImageArea",
|
||||
"name": "ImageArea",
|
||||
"width": "fill_container",
|
||||
"height": 100,
|
||||
"fill": "#FFE5D9",
|
||||
"cornerRadius": [
|
||||
16,
|
||||
16,
|
||||
0,
|
||||
0
|
||||
],
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Reward6Icon",
|
||||
"name": "Icon",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"iconFontName": "crown",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward6Info",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward6Title",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container",
|
||||
"content": "Nâng hạng VIP",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward6Points",
|
||||
"name": "Points",
|
||||
"fill": "$orange-primary",
|
||||
"content": "1000 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Reward6Button",
|
||||
"name": "Button",
|
||||
"width": "fill_container",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 8,
|
||||
"layout": "vertical",
|
||||
"padding": [
|
||||
8,
|
||||
0
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Reward6BtnText",
|
||||
"name": "BtnText",
|
||||
"fill": "#FFFFFF",
|
||||
"content": "Đổi ngay",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"warning": {
|
||||
"type": "color",
|
||||
"value": "#F59E0B"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,693 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierProgressScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Screen/TierProgress",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierTopBar",
|
||||
"name": "TopBar",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-surface",
|
||||
"gap": 8,
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TierBackIcon",
|
||||
"name": "BackIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "arrow-left",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TierScreenTitle",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"content": "Hạng thành viên",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierScrollContent",
|
||||
"name": "ScrollContent",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CurrentTierCard",
|
||||
"name": "CurrentTierCard",
|
||||
"width": "fill_container",
|
||||
"fill": "#FFD700",
|
||||
"cornerRadius": 20,
|
||||
"effect": {
|
||||
"type": "shadow",
|
||||
"shadowType": "outer",
|
||||
"color": "#00000015",
|
||||
"offset": {
|
||||
"x": 0,
|
||||
"y": 4
|
||||
},
|
||||
"blur": 12
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": 24,
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TierCrownIcon",
|
||||
"name": "CrownIcon",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"iconFontName": "crown",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#1F2937"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TierCurrentLabel",
|
||||
"name": "TierLabel",
|
||||
"fill": "#1F2937",
|
||||
"content": "Gold Member",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TierMemberName",
|
||||
"name": "MemberName",
|
||||
"fill": "#374151",
|
||||
"content": "Nguyễn Văn A",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TierPointsProgress",
|
||||
"name": "PointsProgress",
|
||||
"fill": "#4B5563",
|
||||
"content": "2,450 / 5,000 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierProgressBarBg",
|
||||
"name": "ProgressBarBg",
|
||||
"width": "fill_container",
|
||||
"height": 12,
|
||||
"fill": "#FFFFFF66",
|
||||
"cornerRadius": 6,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierProgressBarFill",
|
||||
"name": "ProgressBarFill",
|
||||
"width": 148,
|
||||
"height": 12,
|
||||
"fill": "#FFFFFF",
|
||||
"cornerRadius": 6
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TierRemainingText",
|
||||
"name": "RemainingText",
|
||||
"fill": "#6B7280",
|
||||
"content": "Còn 2,550 điểm để lên Platinum",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierRoadmapSection",
|
||||
"name": "TierRoadmap",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierRoadmapBronze",
|
||||
"name": "BronzeTier",
|
||||
"width": "fill_container",
|
||||
"fill": "#F9FAFB",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "#E5E7EB"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "BronzeIconBg",
|
||||
"name": "IconBg",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "#CD7F32",
|
||||
"cornerRadius": 18,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "BronzeCheckIcon",
|
||||
"name": "Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#FFFFFF"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "BronzeInfo",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "BronzeName",
|
||||
"name": "Name",
|
||||
"fill": "#1F2937",
|
||||
"content": "Bronze",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "BronzeDesc",
|
||||
"name": "Description",
|
||||
"fill": "#6B7280",
|
||||
"content": "0 điểm - Tích điểm cơ bản",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierConnectorLine1",
|
||||
"name": "Connector1",
|
||||
"width": 2,
|
||||
"height": 20,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierRoadmapSilver",
|
||||
"name": "SilverTier",
|
||||
"width": "fill_container",
|
||||
"fill": "#F9FAFB",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "#E5E7EB"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SilverIconBg",
|
||||
"name": "IconBg",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "#C0C0C0",
|
||||
"cornerRadius": 18,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "SilverCheckIcon",
|
||||
"name": "Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#FFFFFF"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SilverInfo",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SilverName",
|
||||
"name": "Name",
|
||||
"fill": "#1F2937",
|
||||
"content": "Silver",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SilverDesc",
|
||||
"name": "Description",
|
||||
"fill": "#6B7280",
|
||||
"content": "500 điểm - Giảm 5% mọi đơn",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierConnectorLine2",
|
||||
"name": "Connector2",
|
||||
"width": 2,
|
||||
"height": 20,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierRoadmapGold",
|
||||
"name": "GoldTier",
|
||||
"width": "fill_container",
|
||||
"fill": "#FFF8E1",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 2,
|
||||
"fill": "#FFD700"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "GoldIconBg",
|
||||
"name": "IconBg",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "#FFD700",
|
||||
"cornerRadius": 18,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "GoldStarIcon",
|
||||
"name": "Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "star",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#1F2937"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "GoldInfo",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "GoldName",
|
||||
"name": "Name",
|
||||
"fill": "#1F2937",
|
||||
"content": "Gold (Hiện tại)",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "GoldDesc",
|
||||
"name": "Description",
|
||||
"fill": "#1F2937",
|
||||
"content": "2,000 điểm - Giảm 10%, x2 điểm",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierConnectorLine3",
|
||||
"name": "Connector3",
|
||||
"width": 2,
|
||||
"height": 20,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TierRoadmapPlatinum",
|
||||
"name": "PlatinumTier",
|
||||
"opacity": 0.6,
|
||||
"width": "fill_container",
|
||||
"fill": "#F9FAFB",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "#E5E7EB"
|
||||
},
|
||||
"gap": 12,
|
||||
"padding": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PlatinumIconBg",
|
||||
"name": "IconBg",
|
||||
"width": 36,
|
||||
"height": 36,
|
||||
"fill": "#A78BFA",
|
||||
"cornerRadius": 18,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "PlatinumLockIcon",
|
||||
"name": "Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "lock",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#FFFFFF"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PlatinumInfo",
|
||||
"name": "Info",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PlatinumName",
|
||||
"name": "Name",
|
||||
"fill": "#1F2937",
|
||||
"content": "Platinum",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PlatinumDesc",
|
||||
"name": "Description",
|
||||
"fill": "#6B7280",
|
||||
"content": "5,000 điểm - Giảm 15%, x3 điểm, VIP",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "GoldBenefitsSection",
|
||||
"name": "GoldBenefits",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"effect": {
|
||||
"type": "shadow",
|
||||
"shadowType": "outer",
|
||||
"color": "#00000010",
|
||||
"offset": {
|
||||
"x": 0,
|
||||
"y": 2
|
||||
},
|
||||
"blur": 8
|
||||
},
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "BenefitsTitle",
|
||||
"name": "Title",
|
||||
"fill": "$text-primary",
|
||||
"content": "Quyền lợi Gold",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Benefit1",
|
||||
"name": "Benefit1",
|
||||
"width": "fill_container",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Benefit1Icon",
|
||||
"name": "Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "tag",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#10B981"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Benefit1Text",
|
||||
"name": "Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "Giảm 10% tất cả đơn hàng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Benefit2",
|
||||
"name": "Benefit2",
|
||||
"width": "fill_container",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Benefit2Icon",
|
||||
"name": "Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "zap",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#F59E0B"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Benefit2Text",
|
||||
"name": "Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "Tích điểm x2",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Benefit3",
|
||||
"name": "Benefit3",
|
||||
"width": "fill_container",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Benefit3Icon",
|
||||
"name": "Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "gift",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#EC4899"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Benefit3Text",
|
||||
"name": "Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "Ưu đãi sinh nhật đặc biệt",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Benefit4",
|
||||
"name": "Benefit4",
|
||||
"width": "fill_container",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Benefit4Icon",
|
||||
"name": "Icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "star",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "#8B5CF6"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Benefit4Text",
|
||||
"name": "Text",
|
||||
"fill": "$text-primary",
|
||||
"content": "Ưu tiên phục vụ",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"warning": {
|
||||
"type": "color",
|
||||
"value": "#F59E0B"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,854 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ItemDetailScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "POS/ItemDetail",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 1176,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DetailTopBar",
|
||||
"name": "DetailTopBar",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-surface",
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "DetailBackIcon",
|
||||
"name": "DetailBackIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "chevron-left",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DetailTopTitle",
|
||||
"name": "DetailTopTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Chi tiết món",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "DetailFavIcon",
|
||||
"name": "DetailFavIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "heart",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DetailScrollContent",
|
||||
"name": "DetailScrollContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DetailImageArea",
|
||||
"name": "DetailImageArea",
|
||||
"metadata": {
|
||||
"type": "unsplash",
|
||||
"username": "madeline_sd",
|
||||
"link": "https://unsplash.com/@madeline_sd",
|
||||
"author": "Madeline Liu"
|
||||
},
|
||||
"width": "fill_container",
|
||||
"height": 240,
|
||||
"fill": {
|
||||
"type": "image",
|
||||
"enabled": true,
|
||||
"url": "https://images.unsplash.com/photo-1717749790652-f3db782af52e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4NDM0ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NzA4MjA1ODV8&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
"mode": "fill"
|
||||
},
|
||||
"cornerRadius": [
|
||||
0,
|
||||
0,
|
||||
24,
|
||||
24
|
||||
],
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DetailInfoSection",
|
||||
"name": "DetailInfoSection",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DetailItemTitle",
|
||||
"name": "DetailItemTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Cơm trứng chiên đặc biệt",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DetailMetaRow",
|
||||
"name": "DetailMetaRow",
|
||||
"width": "fill_container",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DetailRatingGroup",
|
||||
"name": "DetailRatingGroup",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "jItXZ",
|
||||
"name": "DetailStarIcon",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "star",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$warning"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "aTYHX",
|
||||
"name": "DetailRatingText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "4.8",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DetailTimeGroup",
|
||||
"name": "DetailTimeGroup",
|
||||
"gap": 4,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "su4KQ",
|
||||
"name": "DetailClockIcon",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "clock-3",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "KK8z7",
|
||||
"name": "DetailTimeText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "15-20 phút",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DetailPrice",
|
||||
"name": "DetailPrice",
|
||||
"fill": "$orange-primary",
|
||||
"content": "45,000d",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DetailDesc",
|
||||
"name": "DetailDesc",
|
||||
"fill": "$text-secondary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": "fill_container",
|
||||
"content": "Cơm trắng dẻo thơm với trứng chiên vàng giòn, kèm xúc xích, rau xà lách và nước tương đặc biệt.",
|
||||
"lineHeight": 1.5,
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SizeSection",
|
||||
"name": "SizeSection",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
12,
|
||||
20
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "SizeLabel",
|
||||
"name": "SizeLabel",
|
||||
"fill": "$text-primary",
|
||||
"content": "Kích cỡ",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SizeOptions",
|
||||
"name": "SizeOptions",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SizeSmall",
|
||||
"name": "SizeSmall",
|
||||
"width": "fill_container",
|
||||
"height": 42,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "8sOQJ",
|
||||
"name": "SizeSmallText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Nhỏ",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SizeMedium",
|
||||
"name": "SizeMedium",
|
||||
"width": "fill_container",
|
||||
"height": 42,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "LsatE",
|
||||
"name": "SizeMediumText",
|
||||
"fill": "$bg-surface",
|
||||
"content": "Vừa",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SizeLarge",
|
||||
"name": "SizeLarge",
|
||||
"width": "fill_container",
|
||||
"height": 42,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "C5HoM",
|
||||
"name": "SizeLargeText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Lớn +10,000đ",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ToppingSection",
|
||||
"name": "ToppingSection",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 14,
|
||||
"padding": [
|
||||
12,
|
||||
20
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ToppingLabel",
|
||||
"name": "ToppingLabel",
|
||||
"fill": "$text-primary",
|
||||
"content": "Thêm topping",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Topping1",
|
||||
"name": "Topping1",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"padding": [
|
||||
0,
|
||||
4
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Topping1Left",
|
||||
"name": "Topping1Left",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "82R7Z",
|
||||
"name": "Topping1Check",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"cornerRadius": 6,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "$border-default"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "shhUO",
|
||||
"name": "Topping1Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Trứng ốp la",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Topping1Price",
|
||||
"name": "Topping1Price",
|
||||
"fill": "$text-secondary",
|
||||
"content": "+5,000d",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Topping2",
|
||||
"name": "Topping2",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"padding": [
|
||||
0,
|
||||
4
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Topping2Left",
|
||||
"name": "Topping2Left",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "V0gge",
|
||||
"name": "Topping2Check",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 6,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "6UlRe",
|
||||
"name": "t2Icon",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$bg-surface"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "hHSLJ",
|
||||
"name": "Topping2Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Phô mai",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Topping2Price",
|
||||
"name": "Topping2Price",
|
||||
"fill": "$text-secondary",
|
||||
"content": "+8,000d",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Topping3",
|
||||
"name": "Topping3",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"padding": [
|
||||
0,
|
||||
4
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Topping3Left",
|
||||
"name": "Topping3Left",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "raejk",
|
||||
"name": "Topping3Check",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"cornerRadius": 6,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "$border-default"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "j1UGc",
|
||||
"name": "Topping3Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Xúc xích",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Topping3Price",
|
||||
"name": "Topping3Price",
|
||||
"fill": "$text-secondary",
|
||||
"content": "+6,000d",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Topping4",
|
||||
"name": "Topping4",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"padding": [
|
||||
0,
|
||||
4
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Topping4Left",
|
||||
"name": "Topping4Left",
|
||||
"gap": 10,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RrI77",
|
||||
"name": "Topping4Check",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"cornerRadius": 6,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "$border-default"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "GjPTt",
|
||||
"name": "Topping4Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Rau củ",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Topping4Price",
|
||||
"name": "Topping4Price",
|
||||
"fill": "$text-secondary",
|
||||
"content": "+3,000d",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NoteSection",
|
||||
"name": "NoteSection",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"padding": [
|
||||
12,
|
||||
20,
|
||||
20,
|
||||
20
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "NoteLabel",
|
||||
"name": "NoteLabel",
|
||||
"fill": "$text-primary",
|
||||
"content": "Ghi chú đặc biệt",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NoteInput",
|
||||
"name": "NoteInput",
|
||||
"width": "fill_container",
|
||||
"height": 72,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 1.5,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"padding": [
|
||||
12,
|
||||
14
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "NotePlaceholder",
|
||||
"name": "NotePlaceholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "VD: Ít muối, không hành...",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtySection",
|
||||
"name": "QtySection",
|
||||
"width": "fill_container",
|
||||
"gap": 20,
|
||||
"padding": [
|
||||
12,
|
||||
20,
|
||||
20,
|
||||
20
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyMinus",
|
||||
"name": "QtyMinus",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "QtyMinusIcon",
|
||||
"name": "QtyMinusIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "minus",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QtyValue",
|
||||
"name": "QtyValue",
|
||||
"fill": "$text-primary",
|
||||
"content": "1",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 20,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyPlus",
|
||||
"name": "QtyPlus",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "QtyPlusIcon",
|
||||
"name": "QtyPlusIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "plus",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$bg-surface"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DetailBottomBar",
|
||||
"name": "DetailBottomBar",
|
||||
"width": "fill_container",
|
||||
"height": 80,
|
||||
"fill": "$bg-surface",
|
||||
"padding": [
|
||||
16,
|
||||
20
|
||||
],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DetailTotalGroup",
|
||||
"name": "DetailTotalGroup",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DetailTotalLabel",
|
||||
"name": "DetailTotalLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Tổng cộng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DetailTotalPrice",
|
||||
"name": "DetailTotalPrice",
|
||||
"fill": "$text-primary",
|
||||
"content": "55,000d",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 20,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AddToCartBtn",
|
||||
"name": "AddToCartBtn",
|
||||
"width": 200,
|
||||
"height": 50,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 30,
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "AddToCartIcon",
|
||||
"name": "AddToCartIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "shopping-cart",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$bg-surface"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "AddToCartText",
|
||||
"name": "AddToCartText",
|
||||
"fill": "$bg-surface",
|
||||
"content": "Thêm vào giỏ",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"warning": {
|
||||
"type": "color",
|
||||
"value": "#F59E0B"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,483 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderCompleteScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "POS/OrderComplete",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 952,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CompleteScrollContent",
|
||||
"name": "CompleteScrollContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": [
|
||||
40,
|
||||
20,
|
||||
20,
|
||||
20
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SuccessIconWrap",
|
||||
"name": "SuccessIconWrap",
|
||||
"width": 100,
|
||||
"height": 100,
|
||||
"fill": "#22C55E20",
|
||||
"cornerRadius": 50,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "SuccessCheckIcon",
|
||||
"name": "SuccessCheckIcon",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$success"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CompleteTitle",
|
||||
"name": "CompleteTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Đơn hàng sẵn sàng!",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CompleteSubtitle",
|
||||
"name": "CompleteSubtitle",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Vui lòng đến quầy nhận món",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderInfoCard",
|
||||
"name": "OrderInfoCard",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"padding": 24,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderInfoLabel",
|
||||
"name": "OrderInfoLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Mã đơn hàng",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderInfoId",
|
||||
"name": "OrderInfoId",
|
||||
"fill": "$text-primary",
|
||||
"content": "#EK-0087",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 28,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerNameRow",
|
||||
"name": "CustomerNameRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CustomerNameLabel",
|
||||
"name": "CustomerNameLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Tên khách",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CustomerNameValue",
|
||||
"name": "CustomerNameValue",
|
||||
"fill": "$text-primary",
|
||||
"content": "Nguyễn Văn A",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderTypeRow",
|
||||
"name": "OrderTypeRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderTypeLabel",
|
||||
"name": "OrderTypeLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Hình thức",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderTypeValue",
|
||||
"name": "OrderTypeValue",
|
||||
"fill": "$text-primary",
|
||||
"content": "Tại quán",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderInfoDivider",
|
||||
"name": "OrderInfoDivider",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ItemsSummary",
|
||||
"name": "ItemsSummary",
|
||||
"fill": "$text-primary",
|
||||
"content": "3 mon - 130,000d",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PickupNumberCard",
|
||||
"name": "PickupNumberCard",
|
||||
"width": "fill_container",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 20,
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": [
|
||||
24,
|
||||
20
|
||||
],
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PickupNumberLabel",
|
||||
"name": "PickupNumberLabel",
|
||||
"fill": "$bg-surface",
|
||||
"content": "Số thứ tự",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PickupNumberValue",
|
||||
"name": "PickupNumberValue",
|
||||
"fill": "$bg-surface",
|
||||
"content": "087",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 64,
|
||||
"fontWeight": "800"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RatingSection",
|
||||
"name": "RatingSection",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"padding": 20,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RatingSectionTitle",
|
||||
"name": "RatingSectionTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Đánh giá trải nghiệm",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StarRow",
|
||||
"name": "StarRow",
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RatingStar1",
|
||||
"name": "RatingStar1",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"iconFontName": "star",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RatingStar2",
|
||||
"name": "RatingStar2",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"iconFontName": "star",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RatingStar3",
|
||||
"name": "RatingStar3",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"iconFontName": "star",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RatingStar4",
|
||||
"name": "RatingStar4",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"iconFontName": "star",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "RatingStar5",
|
||||
"name": "RatingStar5",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"iconFontName": "star",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-tertiary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RatingTextArea",
|
||||
"name": "RatingTextArea",
|
||||
"width": "fill_container",
|
||||
"height": 72,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"padding": [
|
||||
12,
|
||||
14
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "RatingPlaceholder",
|
||||
"name": "RatingPlaceholder",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Chia sẻ cảm nhận của bạn...",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CompleteBottomBar",
|
||||
"name": "CompleteBottomBar",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"padding": [
|
||||
12,
|
||||
20,
|
||||
20,
|
||||
20
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderMoreBtn",
|
||||
"name": "OrderMoreBtn",
|
||||
"width": "fill_container",
|
||||
"height": 52,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 30,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderMoreText",
|
||||
"name": "OrderMoreText",
|
||||
"fill": "$bg-surface",
|
||||
"content": "Đặt thêm món",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "GoHomeBtn",
|
||||
"name": "GoHomeBtn",
|
||||
"width": "fill_container",
|
||||
"height": 44,
|
||||
"stroke": {
|
||||
"align": "inside",
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "GoHomeText",
|
||||
"name": "GoHomeText",
|
||||
"fill": "$text-primary",
|
||||
"content": "Về trang chủ",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Inter",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"warning": {
|
||||
"type": "color",
|
||||
"value": "#F59E0B"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,787 @@
|
||||
{
|
||||
"version": "2.7",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderTrackingScreen",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "POS/OrderTracking",
|
||||
"reusable": true,
|
||||
"width": 390,
|
||||
"height": 903,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrackTopBar",
|
||||
"name": "TrackTopBar",
|
||||
"width": "fill_container",
|
||||
"height": 56,
|
||||
"fill": "$bg-surface",
|
||||
"padding": [
|
||||
0,
|
||||
16
|
||||
],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TrackBackIcon",
|
||||
"name": "TrackBackIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "chevron-left",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "TrackTopTitle",
|
||||
"name": "TrackTopTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Theo dõi đơn hàng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "TrackPhoneIcon",
|
||||
"name": "TrackPhoneIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "phone",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TrackScrollContent",
|
||||
"name": "TrackScrollContent",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": [
|
||||
16,
|
||||
16,
|
||||
24,
|
||||
16
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderIdRow",
|
||||
"name": "OrderIdRow",
|
||||
"width": "fill_container",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderIdText",
|
||||
"name": "OrderIdText",
|
||||
"fill": "$text-primary",
|
||||
"content": "#EK-0087",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 20,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderTimeText",
|
||||
"name": "OrderTimeText",
|
||||
"fill": "$text-secondary",
|
||||
"content": "14:32 - 10/02/2025",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StatusTimeline",
|
||||
"name": "StatusTimeline",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"padding": 20,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step1",
|
||||
"name": "Step1",
|
||||
"width": "fill_container",
|
||||
"gap": 14,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step1DotCol",
|
||||
"name": "Step1DotCol",
|
||||
"width": 24,
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step1Dot",
|
||||
"name": "Step1Dot",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"fill": "$success",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Step1Check",
|
||||
"name": "Step1Check",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$bg-surface"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step1Line",
|
||||
"name": "Step1Line",
|
||||
"width": 2,
|
||||
"height": 28,
|
||||
"fill": "$success"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step1Content",
|
||||
"name": "Step1Content",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step1Title",
|
||||
"name": "Step1Title",
|
||||
"fill": "$text-primary",
|
||||
"content": "Đã nhận đơn",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step1Time",
|
||||
"name": "Step1Time",
|
||||
"fill": "$text-secondary",
|
||||
"content": "14:32",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step2",
|
||||
"name": "Step2",
|
||||
"width": "fill_container",
|
||||
"gap": 14,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step2DotCol",
|
||||
"name": "Step2DotCol",
|
||||
"width": 24,
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step2Dot",
|
||||
"name": "Step2Dot",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"fill": "$success",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Step2Check",
|
||||
"name": "Step2Check",
|
||||
"width": 14,
|
||||
"height": 14,
|
||||
"iconFontName": "check",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$bg-surface"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step2Line",
|
||||
"name": "Step2Line",
|
||||
"width": 2,
|
||||
"height": 28,
|
||||
"fill": "$success"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step2Content",
|
||||
"name": "Step2Content",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step2Title",
|
||||
"name": "Step2Title",
|
||||
"fill": "$text-primary",
|
||||
"content": "Đã xác nhận",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step2Time",
|
||||
"name": "Step2Time",
|
||||
"fill": "$text-secondary",
|
||||
"content": "14:33",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step3",
|
||||
"name": "Step3",
|
||||
"width": "fill_container",
|
||||
"gap": 14,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step3DotCol",
|
||||
"name": "Step3DotCol",
|
||||
"width": 24,
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step3Dot",
|
||||
"name": "Step3Dot",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 12,
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "Step3ActiveIcon",
|
||||
"name": "Step3ActiveIcon",
|
||||
"width": 16,
|
||||
"height": 16,
|
||||
"iconFontName": "loader",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$bg-surface"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step3Line",
|
||||
"name": "Step3Line",
|
||||
"width": 2,
|
||||
"height": 28,
|
||||
"fill": "$border-default"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step3Content",
|
||||
"name": "Step3Content",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step3Title",
|
||||
"name": "Step3Title",
|
||||
"fill": "$orange-primary",
|
||||
"content": "Đang chế biến",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step3Time",
|
||||
"name": "Step3Time",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Dự kiến 10-15 phút",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step4",
|
||||
"name": "Step4",
|
||||
"width": "fill_container",
|
||||
"gap": 14,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step4DotCol",
|
||||
"name": "Step4DotCol",
|
||||
"width": 24,
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step4Dot",
|
||||
"name": "Step4Dot",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step4Line",
|
||||
"name": "Step4Line",
|
||||
"width": 2,
|
||||
"height": 28,
|
||||
"fill": "$border-default"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step4Content",
|
||||
"name": "Step4Content",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step4Title",
|
||||
"name": "Step4Title",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Sẵn sàng lấy",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step5",
|
||||
"name": "Step5",
|
||||
"width": "fill_container",
|
||||
"gap": 14,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step5DotCol",
|
||||
"name": "Step5DotCol",
|
||||
"width": 24,
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step5Dot",
|
||||
"name": "Step5Dot",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 2,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "Step5Content",
|
||||
"name": "Step5Content",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "Step5Title",
|
||||
"name": "Step5Title",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Hoàn thành",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "EstimatedTimeCard",
|
||||
"name": "EstimatedTimeCard",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": 20,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "EstClockIcon",
|
||||
"name": "EstClockIcon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "timer",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EstLabel",
|
||||
"name": "EstLabel",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Dự kiến hoàn thành",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EstTime",
|
||||
"name": "EstTime",
|
||||
"fill": "$orange-primary",
|
||||
"content": "14:47",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 36,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "EstRemaining",
|
||||
"name": "EstRemaining",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Còn khoảng 12 phút",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProgressBarBg",
|
||||
"name": "ProgressBarBg",
|
||||
"width": "fill_container",
|
||||
"height": 6,
|
||||
"fill": "$border-subtle",
|
||||
"cornerRadius": 3,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProgressBarFill",
|
||||
"name": "ProgressBarFill",
|
||||
"width": "fill_container",
|
||||
"height": 6,
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 3
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderDetailsCard",
|
||||
"name": "OrderDetailsCard",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"padding": [
|
||||
16,
|
||||
20
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderDetailsTitle",
|
||||
"name": "OrderDetailsTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Chi tiết đơn hàng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderDetailItem1",
|
||||
"name": "OrderDetailItem1",
|
||||
"width": "fill_container",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ODItem1Name",
|
||||
"name": "ODItem1Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Cơm trứng chiên x2",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ODItem1Price",
|
||||
"name": "ODItem1Price",
|
||||
"fill": "$text-primary",
|
||||
"content": "100,000d",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderDetailItem2",
|
||||
"name": "OrderDetailItem2",
|
||||
"width": "fill_container",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ODItem2Name",
|
||||
"name": "ODItem2Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Trà sữa oolong x1",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ODItem2Price",
|
||||
"name": "ODItem2Price",
|
||||
"fill": "$text-primary",
|
||||
"content": "40,000d",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderDetailItem3",
|
||||
"name": "OrderDetailItem3",
|
||||
"width": "fill_container",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ODItem3Name",
|
||||
"name": "ODItem3Name",
|
||||
"fill": "$text-primary",
|
||||
"content": "Bánh mì trứng ốp la x1",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ODItem3Price",
|
||||
"name": "ODItem3Price",
|
||||
"fill": "$text-primary",
|
||||
"content": "25,000d",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderDetailDivider",
|
||||
"name": "OrderDetailDivider",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderDetailTotal",
|
||||
"name": "OrderDetailTotal",
|
||||
"width": "fill_container",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ODTotalLabel",
|
||||
"name": "ODTotalLabel",
|
||||
"fill": "$text-primary",
|
||||
"content": "Tổng cộng",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "700"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ODTotalValue",
|
||||
"name": "ODTotalValue",
|
||||
"fill": "$orange-primary",
|
||||
"content": "130,000d",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CancelOrderBtn",
|
||||
"name": "CancelOrderBtn",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {
|
||||
"thickness": 1,
|
||||
"fill": "$border-default"
|
||||
},
|
||||
"layout": "vertical",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "CancelOrderText",
|
||||
"name": "CancelOrderText",
|
||||
"fill": "$error",
|
||||
"content": "Hủy đơn",
|
||||
"fontFamily": "Poppins",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-page": {
|
||||
"type": "color",
|
||||
"value": "#FAF8F4"
|
||||
},
|
||||
"bg-surface": {
|
||||
"type": "color",
|
||||
"value": "#FFFFFF"
|
||||
},
|
||||
"bg-elevated": {
|
||||
"type": "color",
|
||||
"value": "#FFF8F0"
|
||||
},
|
||||
"bg-interactive": {
|
||||
"type": "color",
|
||||
"value": "#F5EDE4"
|
||||
},
|
||||
"brown-primary": {
|
||||
"type": "color",
|
||||
"value": "#6B4423"
|
||||
},
|
||||
"brown-dark": {
|
||||
"type": "color",
|
||||
"value": "#4A2E15"
|
||||
},
|
||||
"orange-primary": {
|
||||
"type": "color",
|
||||
"value": "#FF6B35"
|
||||
},
|
||||
"orange-light": {
|
||||
"type": "color",
|
||||
"value": "#FF8A5C"
|
||||
},
|
||||
"text-primary": {
|
||||
"type": "color",
|
||||
"value": "#2C2C2C"
|
||||
},
|
||||
"text-secondary": {
|
||||
"type": "color",
|
||||
"value": "#6B6B6B"
|
||||
},
|
||||
"text-tertiary": {
|
||||
"type": "color",
|
||||
"value": "#9B9B9B"
|
||||
},
|
||||
"border-default": {
|
||||
"type": "color",
|
||||
"value": "#E5DDD4"
|
||||
},
|
||||
"border-subtle": {
|
||||
"type": "color",
|
||||
"value": "#F0EAE2"
|
||||
},
|
||||
"success": {
|
||||
"type": "color",
|
||||
"value": "#22C55E"
|
||||
},
|
||||
"warning": {
|
||||
"type": "color",
|
||||
"value": "#F59E0B"
|
||||
},
|
||||
"error": {
|
||||
"type": "color",
|
||||
"value": "#EF4444"
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -938,7 +938,8 @@
|
||||
"type": "text",
|
||||
"id": "PCCat1Emoji",
|
||||
"content": "☕",
|
||||
"fontSize": 16
|
||||
"fontSize": 16,
|
||||
"fontFamily": "Roboto"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
@@ -986,7 +987,8 @@
|
||||
"type": "text",
|
||||
"id": "PCCat2Emoji",
|
||||
"content": "🧋",
|
||||
"fontSize": 16
|
||||
"fontSize": 16,
|
||||
"fontFamily": "Roboto"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
@@ -1033,7 +1035,8 @@
|
||||
"type": "text",
|
||||
"id": "PCCat3Emoji",
|
||||
"content": "🧃",
|
||||
"fontSize": 16
|
||||
"fontSize": 16,
|
||||
"fontFamily": "Roboto"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
@@ -1080,7 +1083,8 @@
|
||||
"type": "text",
|
||||
"id": "PCCat4Emoji",
|
||||
"content": "🍰",
|
||||
"fontSize": 16
|
||||
"fontSize": 16,
|
||||
"fontFamily": "Roboto"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
@@ -1127,7 +1131,8 @@
|
||||
"type": "text",
|
||||
"id": "PCCat5Emoji",
|
||||
"content": "🧊",
|
||||
"fontSize": 16
|
||||
"fontSize": 16,
|
||||
"fontFamily": "Roboto"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
@@ -1174,7 +1179,8 @@
|
||||
"type": "text",
|
||||
"id": "PCCat6Emoji",
|
||||
"content": "🍕",
|
||||
"fontSize": 16
|
||||
"fontSize": 16,
|
||||
"fontFamily": "Roboto"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
@@ -1314,7 +1320,8 @@
|
||||
"type": "text",
|
||||
"id": "PCP1ImgT",
|
||||
"content": "☕",
|
||||
"fontSize": 48
|
||||
"fontSize": 48,
|
||||
"fontFamily": "Roboto"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -1416,7 +1423,8 @@
|
||||
"type": "text",
|
||||
"id": "PCP2ImgT",
|
||||
"content": "🍵",
|
||||
"fontSize": 48
|
||||
"fontSize": 48,
|
||||
"fontFamily": "Roboto"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -1518,7 +1526,8 @@
|
||||
"type": "text",
|
||||
"id": "PCP3ImgT",
|
||||
"content": "🥤",
|
||||
"fontSize": 48
|
||||
"fontSize": 48,
|
||||
"fontFamily": "Roboto"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -1620,7 +1629,8 @@
|
||||
"type": "text",
|
||||
"id": "PCP4ImgT",
|
||||
"content": "🍫",
|
||||
"fontSize": 48
|
||||
"fontSize": 48,
|
||||
"fontFamily": "Roboto"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -1314,7 +1314,8 @@
|
||||
"type": "text",
|
||||
"id": "SCBiz1E",
|
||||
"content": "☕",
|
||||
"fontSize": 24
|
||||
"fontSize": 24,
|
||||
"fontFamily": "Roboto"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
@@ -1343,7 +1344,8 @@
|
||||
"type": "text",
|
||||
"id": "SCBiz2E",
|
||||
"content": "🍽️",
|
||||
"fontSize": 24
|
||||
"fontSize": 24,
|
||||
"fontFamily": "Roboto"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
@@ -1372,7 +1374,8 @@
|
||||
"type": "text",
|
||||
"id": "SCBiz3E",
|
||||
"content": "🎤",
|
||||
"fontSize": 24
|
||||
"fontSize": 24,
|
||||
"fontFamily": "Roboto"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
@@ -1401,7 +1404,8 @@
|
||||
"type": "text",
|
||||
"id": "SCBiz4E",
|
||||
"content": "💆",
|
||||
"fontSize": 24
|
||||
"fontSize": 24,
|
||||
"fontFamily": "Roboto"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
@@ -1430,7 +1434,8 @@
|
||||
"type": "text",
|
||||
"id": "SCBiz5E",
|
||||
"content": "🛒",
|
||||
"fontSize": 24
|
||||
"fontSize": 24,
|
||||
"fontFamily": "Roboto"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
|
||||
Reference in New Issue
Block a user