feat: Introduce new customer interaction features in tPOS UI, including enhanced loyalty information and updated buttons for improved user engagement across cafe, karaoke, and restaurant workflows.
This commit is contained in:
Ho Ngoc Hai
340
pencil-design/src/pages/tPOS/pos/cafe/workflow/cafe-journey.pen
Normal file
340
pencil-design/src/pages/tPOS/pos/cafe/workflow/cafe-journey.pen
Normal file
@@ -0,0 +1,340 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CafeJourney1",
|
||||
"name": "Café Journey/1-Welcome",
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CJ1Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": 32,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CJ1Step", "fill": "#3B82F620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "CJ1StepT", "fill": "#3B82F6", "content": "Bước 1/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "CJ1Icon", "width": 72, "height": 72, "fill": "#3B82F61A", "cornerRadius": 36, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CJ1IconI", "width": 32, "height": 32, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#3B82F6"}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ1Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CJ1TitleT", "fill": "#FFFFFF", "content": "Xin chào!", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CJ1Desc", "fill": "#8B8B90", "content": "Bạn muốn dùng tại quán hay mang đi?", "fontFamily": "Roboto", "fontSize": 14, "textAlign": "center"}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ1Options", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "CJ1Opt1", "width": "fill_container", "height": 56, "fill": "#3B82F620", "stroke": {"thickness": 2, "fill": "#3B82F6"}, "cornerRadius": 12, "gap": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CJ1Opt1I", "width": 22, "height": 22, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "#3B82F6"},
|
||||
{"type": "text", "id": "CJ1Opt1T", "fill": "#3B82F6", "content": "Dùng tại quán", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ1Opt2", "width": "fill_container", "height": 56, "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "gap": 12, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CJ1Opt2I", "width": 22, "height": 22, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "#8B8B90"},
|
||||
{"type": "text", "id": "CJ1Opt2T", "fill": "#8B8B90", "content": "Mang đi", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CafeJourney2",
|
||||
"name": "Café Journey/2-Order",
|
||||
"x": 540,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CJ2Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 28,
|
||||
"children": [
|
||||
{"type": "frame", "id": "CJ2Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CJ2Step", "fill": "#FF5C0020", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "CJ2StepT", "fill": "#FF5C00", "content": "Bước 2/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "text", "id": "CJ2Table", "fill": "#8B8B90", "content": "🪑 Tại quán", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ2Title", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "CJ2TitleT", "fill": "#FFFFFF", "content": "Xác nhận đơn hàng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CJ2Count", "fill": "#8B8B90", "content": "3 món", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ2Items", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "CJ2Item1", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "frame", "id": "CJ2Item1L", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CJ2Item1Qty", "fill": "#FF5C00", "content": "2x", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CJ2Item1N", "fill": "#FFFFFF", "content": "Cappuccino M", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "CJ2Item1P", "fill": "#FFFFFF", "content": "110,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ2Item2", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "frame", "id": "CJ2Item2L", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CJ2Item2Qty", "fill": "#FF5C00", "content": "1x", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CJ2Item2N", "fill": "#FFFFFF", "content": "Bánh Croissant", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "CJ2Item2P", "fill": "#FFFFFF", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ2Divider", "width": "fill_container", "height": 1, "fill": "#2A2A2E"},
|
||||
{"type": "frame", "id": "CJ2Total", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "text", "id": "CJ2TotalL", "fill": "#8B8B90", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "text", "id": "CJ2TotalV", "fill": "#FF5C00", "content": "145,000₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ2Customer", "width": "fill_container", "fill": "#14B8A610", "cornerRadius": 10, "padding": 12, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CJ2CustAvt", "width": 32, "height": 32, "fill": "#14B8A630", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CJ2CustInit", "fill": "#14B8A6", "content": "N", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "CJ2CustInfo", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "CJ2CustN", "fill": "#14B8A6", "content": "Nguyễn Văn A • Gold", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CJ2CustP", "fill": "#8B8B90", "content": "+14 điểm tích lũy", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ2Actions", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "CJ2Back", "width": 48, "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CJ2BackI", "width": 18, "height": 18, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "#ADADB0"}]},
|
||||
{"type": "frame", "id": "CJ2Confirm", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CJ2ConfirmT", "fill": "#FFFFFF", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "icon_font", "id": "CJ2ConfirmI", "width": 16, "height": 16, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#FFFFFF"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CafeJourney3",
|
||||
"name": "Café Journey/3-Payment",
|
||||
"x": 1080,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CJ3Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 28,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CJ3Step", "fill": "#22C55E20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "CJ3StepT", "fill": "#22C55E", "content": "Bước 3/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "CJ3Icon", "width": 64, "height": 64, "fill": "#22C55E1A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CJ3IconI", "width": 28, "height": 28, "iconFontName": "wallet", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ3Title", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CJ3TitleT", "fill": "#FFFFFF", "content": "Chọn thanh toán", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CJ3Amount", "fill": "#22C55E", "content": "145,000₫", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ3Methods", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "CJ3M1", "width": "fill_container", "fill": "#22C55E10", "stroke": {"thickness": 2, "fill": "#22C55E"}, "cornerRadius": 12, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CJ3M1L", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CJ3M1Icon", "width": 40, "height": 40, "fill": "#22C55E30", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CJ3M1I", "width": 20, "height": 20, "iconFontName": "qr-code", "iconFontFamily": "lucide", "fill": "#22C55E"}]},
|
||||
{"type": "frame", "id": "CJ3M1Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "CJ3M1N", "fill": "#FFFFFF", "content": "Quét QR", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "CJ3M1D", "fill": "#8B8B90", "content": "VNPay, MoMo, ZaloPay", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "icon_font", "id": "CJ3M1Check", "width": 20, "height": 20, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ3M2", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CJ3M2L", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CJ3M2Icon", "width": 40, "height": 40, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CJ3M2I", "width": 20, "height": 20, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#8B8B90"}]},
|
||||
{"type": "text", "id": "CJ3M2N", "fill": "#FFFFFF", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ3M3", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CJ3M3L", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CJ3M3Icon", "width": 40, "height": 40, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CJ3M3I", "width": 20, "height": 20, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#8B8B90"}]},
|
||||
{"type": "text", "id": "CJ3M3N", "fill": "#FFFFFF", "content": "Thẻ ngân hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ3Confirm", "width": "fill_container", "height": 50, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CJ3ConfirmI", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "CJ3ConfirmT", "fill": "#FFFFFF", "content": "Xác nhận thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CafeJourney4",
|
||||
"name": "Café Journey/4-Processing",
|
||||
"x": 1620,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CJ4Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": 36,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CJ4Step", "fill": "#F59E0B20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "CJ4StepT", "fill": "#F59E0B", "content": "Bước 4/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "CJ4Queue", "width": 120, "height": 120, "fill": "#F59E0B1A", "cornerRadius": 60, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 4, "children": [
|
||||
{"type": "text", "id": "CJ4QueueLabel", "fill": "#F59E0B", "content": "SỐ THỨ TỰ", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CJ4QueueNum", "fill": "#F59E0B", "content": "42", "fontFamily": "Roboto", "fontSize": 48, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ4Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CJ4TitleT", "fill": "#FFFFFF", "content": "Đang pha chế", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CJ4Desc", "fill": "#8B8B90", "content": "Vui lòng chờ gọi số", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ4Progress", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "CJ4Bar", "width": "fill_container", "height": 6, "fill": "#1A1A1D", "cornerRadius": 3, "children": [
|
||||
{"type": "frame", "id": "CJ4BarFill", "width": "60%", "height": 6, "fill": "#F59E0B", "cornerRadius": 3}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ4Time", "width": "fill_container", "justifyContent": "center", "children": [
|
||||
{"type": "text", "id": "CJ4TimeT", "fill": "#8B8B90", "content": "⏱️ Ước tính: 3-5 phút", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ4Items", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "CJ4Item1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CJ4Item1N", "fill": "#FFFFFF", "content": "2x Cappuccino M", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "CJ4Item1Status", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [4, 8], "children": [{"type": "text", "id": "CJ4Item1StatusT", "fill": "#F59E0B", "content": "Đang pha", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ4Item2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CJ4Item2N", "fill": "#FFFFFF", "content": "1x Bánh Croissant", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "CJ4Item2Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [4, 8], "children": [{"type": "text", "id": "CJ4Item2StatusT", "fill": "#22C55E", "content": "Sẵn sàng", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CafeJourney5",
|
||||
"name": "Café Journey/5-Ready",
|
||||
"x": 2160,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CJ5Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 2, "fill": "#22C55E"},
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": 36,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CJ5Step", "fill": "#22C55E20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "CJ5StepT", "fill": "#22C55E", "content": "Bước 5/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "CJ5Icon", "width": 100, "height": 100, "fill": "#22C55E1A", "cornerRadius": 50, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CJ5IconI", "width": 48, "height": 48, "iconFontName": "bell-ring", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ5Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CJ5TitleT", "fill": "#22C55E", "content": "SỐ 42 - SẴN SÀNG!", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"},
|
||||
{"type": "text", "id": "CJ5Desc", "fill": "#FFFFFF", "content": "Vui lòng đến quầy nhận đồ", "fontFamily": "Roboto", "fontSize": 15}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ5Items", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "CJ5Item1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CJ5Item1N", "fill": "#FFFFFF", "content": "2x Cappuccino M", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "icon_font", "id": "CJ5Item1Check", "width": 18, "height": 18, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ5Item2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CJ5Item2N", "fill": "#FFFFFF", "content": "1x Bánh Croissant", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "icon_font", "id": "CJ5Item2Check", "width": 18, "height": 18, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ5Received", "width": "fill_container", "height": 50, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CJ5ReceivedI", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "CJ5ReceivedT", "fill": "#FFFFFF", "content": "Đã nhận đồ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CafeJourney6",
|
||||
"name": "Café Journey/6-Complete",
|
||||
"x": 2700,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CJ6Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": 36,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CJ6Step", "fill": "#14B8A620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "CJ6StepT", "fill": "#14B8A6", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "CJ6Icon", "width": 88, "height": 88, "fill": "#14B8A61A", "cornerRadius": 44, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CJ6IconI", "width": 40, "height": 40, "iconFontName": "heart", "iconFontFamily": "lucide", "fill": "#14B8A6"}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ6Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CJ6TitleT", "fill": "#FFFFFF", "content": "Cảm ơn bạn!", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CJ6Desc", "fill": "#8B8B90", "content": "Hẹn gặp lại lần sau nhé ☕", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ6Points", "width": "fill_container", "fill": "#14B8A610", "cornerRadius": 14, "padding": 18, "layout": "vertical", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CJ6PointsIcon", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CJ6PointsI", "width": 20, "height": 20, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"},
|
||||
{"type": "text", "id": "CJ6PointsLabel", "fill": "#14B8A6", "content": "Điểm tích lũy", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "CJ6PointsValue", "fill": "#14B8A6", "content": "+14 điểm", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"},
|
||||
{"type": "text", "id": "CJ6PointsTotal", "fill": "#8B8B90", "content": "Tổng: 2,534 điểm", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ6Rating", "width": "fill_container", "layout": "vertical", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CJ6RatingLabel", "fill": "#8B8B90", "content": "Đánh giá trải nghiệm", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "CJ6Stars", "gap": 8, "children": [
|
||||
{"type": "icon_font", "id": "CJ6Star1", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "CJ6Star2", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "CJ6Star3", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "CJ6Star4", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "CJ6Star5", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#2A2A2E"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CJ6Done", "width": "fill_container", "height": 50, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CJ6DoneT", "fill": "#FFFFFF", "content": "Đóng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderCustomizeDialog",
|
||||
"name": "Dialog/Order Customize",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "#0A0A0B80",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomizeModal",
|
||||
"width": 420,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomizeProduct",
|
||||
"width": "fill_container",
|
||||
"height": 120,
|
||||
"fill": "#FF5C0020",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CustomizeProductImg", "width": 100, "height": 100, "fill": "#FF5C0030", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CustomizeProductIcon", "width": 48, "height": 48, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#FF5C00"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomizeContent",
|
||||
"width": "fill_container",
|
||||
"padding": 24,
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"children": [
|
||||
{"type": "frame", "id": "CustomizeHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "flex-start", "children": [
|
||||
{"type": "frame", "id": "CustomizeHeaderLeft", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "CustomizeName", "fill": "#FFFFFF", "content": "Cappuccino", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CustomizeDesc", "fill": "#8B8B90", "content": "Espresso + Sữa tươi + Foam", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "CustomizeClose", "width": 32, "height": 32, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CustomizeCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#8B8B90"}
|
||||
]}
|
||||
]},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomizeSize",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{"type": "text", "id": "CustomizeSizeLabel", "fill": "#8B8B90", "content": "Kích cỡ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "CustomizeSizeOptions", "width": "fill_container", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "CustomizeSizeS", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [12, 0], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CustomizeSizeSLabel", "fill": "#8B8B90", "content": "S", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CustomizeSizeSPrice", "fill": "#6B6B70", "content": "+0₫", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]},
|
||||
{"type": "frame", "id": "CustomizeSizeM", "width": "fill_container", "fill": "#FF5C0020", "stroke": {"thickness": 2, "fill": "#FF5C00"}, "cornerRadius": 10, "padding": [12, 0], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CustomizeSizeMLabel", "fill": "#FF5C00", "content": "M", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CustomizeSizeMPrice", "fill": "#FF5C00", "content": "+10K", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "CustomizeSizeL", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [12, 0], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CustomizeSizeLLabel", "fill": "#8B8B90", "content": "L", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CustomizeSizeLPrice", "fill": "#6B6B70", "content": "+20K", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomizeSugar",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{"type": "text", "id": "CustomizeSugarLabel", "fill": "#8B8B90", "content": "Độ ngọt", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "CustomizeSugarOptions", "width": "fill_container", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "CustomizeSugar0", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "CustomizeSugar0T", "fill": "#8B8B90", "content": "0%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "CustomizeSugar30", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "CustomizeSugar30T", "fill": "#8B8B90", "content": "30%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "CustomizeSugar50", "fill": "#FF5C0020", "stroke": {"thickness": 2, "fill": "#FF5C00"}, "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "CustomizeSugar50T", "fill": "#FF5C00", "content": "50%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "CustomizeSugar70", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "CustomizeSugar70T", "fill": "#8B8B90", "content": "70%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "CustomizeSugar100", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "CustomizeSugar100T", "fill": "#8B8B90", "content": "100%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomizeTopping",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{"type": "text", "id": "CustomizeToppingLabel", "fill": "#8B8B90", "content": "Topping", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "CustomizeToppingOptions", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "CustomizeTopping1", "width": "fill_container", "fill": "#22C55E10", "stroke": {"thickness": 1, "fill": "#22C55E"}, "cornerRadius": 10, "padding": [10, 14], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CustomizeTopping1Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CustomizeTopping1Check", "width": 20, "height": 20, "fill": "#22C55E", "cornerRadius": 4, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CustomizeTopping1CheckI", "width": 12, "height": 12, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFF"}]},
|
||||
{"type": "text", "id": "CustomizeTopping1Name", "fill": "#FFFFFF", "content": "Trân châu đen", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "CustomizeTopping1Price", "fill": "#22C55E", "content": "+10,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "CustomizeTopping2", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [10, 14], "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CustomizeTopping2Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CustomizeTopping2Check", "width": 20, "height": 20, "fill": "transparent", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 4},
|
||||
{"type": "text", "id": "CustomizeTopping2Name", "fill": "#8B8B90", "content": "Thạch dừa", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "CustomizeTopping2Price", "fill": "#6B6B70", "content": "+8,000₫", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{"type": "frame", "id": "CustomizeDivider", "width": "fill_container", "height": 1, "fill": "#1F1F23"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomizeFooter",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CustomizeQty", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CustomizeQtyMinus", "width": 36, "height": 36, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CustomizeQtyMinusI", "width": 18, "height": 18, "iconFontName": "minus", "iconFontFamily": "lucide", "fill": "#ADADB0"}]},
|
||||
{"type": "text", "id": "CustomizeQtyNum", "fill": "#FFFFFF", "content": "2", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "CustomizeQtyPlus", "width": 36, "height": 36, "fill": "#FF5C00", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CustomizeQtyPlusI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "CustomizeAddBtn", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "padding": [0, 24], "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CustomizeAddIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "CustomizeAddText", "fill": "#FFFFFF", "content": "Thêm 150,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,346 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "KaraokeJourney1",
|
||||
"name": "Karaoke Journey/1-Room",
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "KJ1Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 28,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "KJ1Step", "fill": "#8B5CF620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "KJ1StepT", "fill": "#8B5CF6", "content": "Bước 1/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "KJ1Icon", "width": 64, "height": 64, "fill": "#8B5CF61A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "KJ1IconI", "width": 28, "height": 28, "iconFontName": "mic-2", "iconFontFamily": "lucide", "fill": "#8B5CF6"}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ1Title", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "KJ1TitleT", "fill": "#FFFFFF", "content": "Chọn phòng", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{"type": "text", "id": "KJ1Desc", "fill": "#8B8B90", "content": "Quý khách có mấy người?", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ1Rooms", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "KJ1Room1", "width": "fill_container", "fill": "#8B5CF610", "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "cornerRadius": 14, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "KJ1Room1L", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "KJ1Room1Icon", "width": 44, "height": 44, "fill": "#8B5CF630", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KJ1Room1Num", "fill": "#8B5CF6", "content": "VIP", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]},
|
||||
{"type": "frame", "id": "KJ1Room1Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "KJ1Room1N", "fill": "#FFFFFF", "content": "Phòng VIP 01", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "KJ1Room1D", "fill": "#8B8B90", "content": "6-10 người • 100m²", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ1Room1R", "layout": "vertical", "alignItems": "flex-end", "gap": 2, "children": [
|
||||
{"type": "text", "id": "KJ1Room1P", "fill": "#8B5CF6", "content": "250,000₫/h", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "icon_font", "id": "KJ1Room1Check", "width": 18, "height": 18, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#8B5CF6"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ1Room2", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 14, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "KJ1Room2L", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "KJ1Room2Icon", "width": 44, "height": 44, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KJ1Room2Num", "fill": "#8B8B90", "content": "M", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "KJ1Room2Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "KJ1Room2N", "fill": "#FFFFFF", "content": "Phòng Medium", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "KJ1Room2D", "fill": "#8B8B90", "content": "4-6 người • 50m²", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "KJ1Room2P", "fill": "#8B8B90", "content": "150,000₫/h", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ1Room3", "width": "fill_container", "fill": "#1A1A1D40", "cornerRadius": 14, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "KJ1Room3L", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "KJ1Room3Icon", "width": 44, "height": 44, "fill": "#2A2A2E40", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KJ1Room3Num", "fill": "#6B6B70", "content": "S", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "KJ1Room3Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "KJ1Room3N", "fill": "#6B6B70", "content": "Phòng Small", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "KJ1Room3D", "fill": "#4A4A4E", "content": "Đang sử dụng", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ1Room3S", "fill": "#EF444420", "cornerRadius": 4, "padding": [4, 8], "children": [{"type": "text", "id": "KJ1Room3ST", "fill": "#EF4444", "content": "Hết phòng", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ1Confirm", "width": "fill_container", "height": 50, "fill": "#8B5CF6", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "KJ1ConfirmT", "fill": "#FFFFFF", "content": "Đặt phòng VIP 01", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "KaraokeJourney2",
|
||||
"name": "Karaoke Journey/2-CheckIn",
|
||||
"x": 540,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "KJ2Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": 32,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "KJ2Step", "fill": "#3B82F620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "KJ2StepT", "fill": "#3B82F6", "content": "Bước 2/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "KJ2Icon", "width": 72, "height": 72, "fill": "#3B82F61A", "cornerRadius": 36, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "KJ2IconI", "width": 32, "height": 32, "iconFontName": "door-open", "iconFontFamily": "lucide", "fill": "#3B82F6"}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ2Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "KJ2TitleT", "fill": "#FFFFFF", "content": "Check-in thành công!", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{"type": "text", "id": "KJ2Desc", "fill": "#8B8B90", "content": "Phòng VIP 01 sẵn sàng", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ2Info", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "KJ2InfoRow1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KJ2InfoL1", "fill": "#8B8B90", "content": "Loại phòng", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "KJ2InfoV1", "fill": "#FFFFFF", "content": "VIP 01", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "KJ2InfoRow2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KJ2InfoL2", "fill": "#8B8B90", "content": "Giá phòng", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "KJ2InfoV2", "fill": "#FFFFFF", "content": "250,000₫/giờ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "KJ2InfoRow3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KJ2InfoL3", "fill": "#8B8B90", "content": "Thời gian đặt", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "KJ2InfoV3", "fill": "#3B82F6", "content": "2 giờ (500,000₫)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ2Timer", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 12, "padding": 16, "justifyContent": "center", "alignItems": "center", "gap": 10, "children": [
|
||||
{"type": "icon_font", "id": "KJ2TimerI", "width": 20, "height": 20, "iconFontName": "timer", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "KJ2TimerT", "fill": "#22C55E", "content": "Bắt đầu tính giờ: 20:00", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ2Start", "width": "fill_container", "height": 50, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "KJ2StartI", "width": 18, "height": 18, "iconFontName": "play", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "KJ2StartT", "fill": "#FFFFFF", "content": "Bắt đầu hát", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "KaraokeJourney3",
|
||||
"name": "Karaoke Journey/3-InSession",
|
||||
"x": 1080,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "KJ3Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 24,
|
||||
"children": [
|
||||
{"type": "frame", "id": "KJ3Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "KJ3Step", "fill": "#FF5C0020", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "KJ3StepT", "fill": "#FF5C00", "content": "Bước 3/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "text", "id": "KJ3Room", "fill": "#8B8B90", "content": "🎤 VIP 01", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ3Timer", "width": "fill_container", "fill": "#FF5C0010", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "KJ3TimerLabel", "fill": "#FF5C00", "content": "THỜI GIAN CÒN LẠI", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"},
|
||||
{"type": "text", "id": "KJ3TimerValue", "fill": "#FF5C00", "content": "01:23:45", "fontFamily": "Roboto", "fontSize": 40, "fontWeight": "700"},
|
||||
{"type": "text", "id": "KJ3TimerEnd", "fill": "#8B8B90", "content": "Kết thúc lúc 22:00", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ3Orders", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "KJ3OrdersTitle", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KJ3OrdersTitleT", "fill": "#FFFFFF", "content": "Đồ uống & Snacks", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "text", "id": "KJ3OrdersAdd", "fill": "#FF5C00", "content": "+ Thêm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "KJ3Order1", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "children": [
|
||||
{"type": "frame", "id": "KJ3Order1L", "gap": 8, "children": [{"type": "text", "id": "KJ3Order1Q", "fill": "#FF5C00", "content": "6x", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "KJ3Order1N", "fill": "#FFFFFF", "content": "Bia Tiger", "fontFamily": "Roboto", "fontSize": 12}]},
|
||||
{"type": "text", "id": "KJ3Order1P", "fill": "#FFFFFF", "content": "180,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ3Order2", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "children": [
|
||||
{"type": "frame", "id": "KJ3Order2L", "gap": 8, "children": [{"type": "text", "id": "KJ3Order2Q", "fill": "#FF5C00", "content": "2x", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "KJ3Order2N", "fill": "#FFFFFF", "content": "Dĩa trái cây", "fontFamily": "Roboto", "fontSize": 12}]},
|
||||
{"type": "text", "id": "KJ3Order2P", "fill": "#FFFFFF", "content": "200,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ3Divider", "width": "fill_container", "height": 1, "fill": "#1F1F23"},
|
||||
{"type": "frame", "id": "KJ3Total", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KJ3TotalL", "fill": "#8B8B90", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14}, {"type": "text", "id": "KJ3TotalV", "fill": "#FF5C00", "content": "880,000₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]},
|
||||
{"type": "frame", "id": "KJ3Actions", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "KJ3Extend", "width": "fill_container", "height": 44, "fill": "#8B5CF6", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "KJ3ExtendI", "width": 16, "height": 16, "iconFontName": "timer", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "KJ3ExtendT", "fill": "#FFFFFF", "content": "Gia hạn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ3End", "width": "fill_container", "height": 44, "fill": "#2A2A2E", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "KJ3EndI", "width": 16, "height": 16, "iconFontName": "log-out", "iconFontFamily": "lucide", "fill": "#ADADB0"},
|
||||
{"type": "text", "id": "KJ3EndT", "fill": "#ADADB0", "content": "Kết thúc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "KaraokeJourney4",
|
||||
"name": "Karaoke Journey/4-Extend",
|
||||
"x": 1620,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "KJ4Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 2, "fill": "#F59E0B"},
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": 32,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "KJ4Step", "fill": "#F59E0B20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "KJ4StepT", "fill": "#F59E0B", "content": "Bước 4/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "KJ4Icon", "width": 80, "height": 80, "fill": "#F59E0B1A", "cornerRadius": 40, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "KJ4IconI", "width": 36, "height": 36, "iconFontName": "alarm-clock", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ4Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "KJ4TitleT", "fill": "#F59E0B", "content": "Sắp hết giờ!", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{"type": "text", "id": "KJ4Desc", "fill": "#8B8B90", "content": "Còn 15 phút • Bạn muốn gia hạn?", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ4Options", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "KJ4Opt1", "width": "fill_container", "fill": "#F59E0B10", "stroke": {"thickness": 2, "fill": "#F59E0B"}, "cornerRadius": 12, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "KJ4Opt1L", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "KJ4Opt1I", "width": 20, "height": 20, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "text", "id": "KJ4Opt1T", "fill": "#FFFFFF", "content": "Thêm 1 giờ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "KJ4Opt1P", "fill": "#F59E0B", "content": "+250,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ4Opt2", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "KJ4Opt2L", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "KJ4Opt2I", "width": 20, "height": 20, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B8B90"},
|
||||
{"type": "text", "id": "KJ4Opt2T", "fill": "#FFFFFF", "content": "Thêm 30 phút", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "KJ4Opt2P", "fill": "#8B8B90", "content": "+130,000₫", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ4Actions", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "KJ4Skip", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KJ4SkipT", "fill": "#ADADB0", "content": "Không, cảm ơn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "KJ4Confirm", "width": "fill_container", "height": 48, "fill": "#F59E0B", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "KJ4ConfirmI", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#000"},
|
||||
{"type": "text", "id": "KJ4ConfirmT", "fill": "#000000", "content": "Gia hạn 1 giờ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "KaraokeJourney5",
|
||||
"name": "Karaoke Journey/5-Checkout",
|
||||
"x": 2160,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "KJ5Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": 24,
|
||||
"children": [
|
||||
{"type": "frame", "id": "KJ5Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "KJ5Step", "fill": "#22C55E20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "KJ5StepT", "fill": "#22C55E", "content": "Bước 5/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "text", "id": "KJ5Time", "fill": "#8B8B90", "content": "3 giờ • VIP 01", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ5Title", "width": "fill_container", "children": [{"type": "text", "id": "KJ5TitleT", "fill": "#FFFFFF", "content": "Tổng kết hóa đơn", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "KJ5Bill", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "KJ5BillRoom", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KJ5BillRoomL", "fill": "#8B8B90", "content": "Phòng VIP 01 (3h)", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "KJ5BillRoomV", "fill": "#FFFFFF", "content": "750,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "KJ5BillBeer", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KJ5BillBeerL", "fill": "#8B8B90", "content": "6x Bia Tiger", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "KJ5BillBeerV", "fill": "#FFFFFF", "content": "180,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "KJ5BillFruit", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KJ5BillFruitL", "fill": "#8B8B90", "content": "2x Dĩa trái cây", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "KJ5BillFruitV", "fill": "#FFFFFF", "content": "200,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ5Summary", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "KJ5Sub", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KJ5SubL", "fill": "#8B8B90", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "KJ5SubV", "fill": "#FFFFFF", "content": "1,130,000₫", "fontFamily": "Roboto", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "KJ5Discount", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "frame", "id": "KJ5DiscountL", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "KJ5DiscountI", "width": 12, "height": 12, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "#EC4899"}, {"type": "text", "id": "KJ5DiscountT", "fill": "#EC4899", "content": "Happy Hour -15%", "fontFamily": "Roboto", "fontSize": 13}]},
|
||||
{"type": "text", "id": "KJ5DiscountV", "fill": "#EC4899", "content": "-169,500₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ5DividerB", "width": "fill_container", "height": 1, "fill": "#2A2A2E"},
|
||||
{"type": "frame", "id": "KJ5Total", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KJ5TotalL", "fill": "#FFFFFF", "content": "Tổng thanh toán", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "KJ5TotalV", "fill": "#22C55E", "content": "960,500₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ5Pay", "width": "fill_container", "height": 50, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "KJ5PayI", "width": 18, "height": 18, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "KJ5PayT", "fill": "#FFFFFF", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "KaraokeJourney6",
|
||||
"name": "Karaoke Journey/6-Complete",
|
||||
"x": 2700,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "KJ6Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": 36,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "KJ6Step", "fill": "#14B8A620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "KJ6StepT", "fill": "#14B8A6", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "KJ6Icon", "width": 88, "height": 88, "fill": "#14B8A61A", "cornerRadius": 44, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "KJ6IconI", "width": 40, "height": 40, "iconFontName": "party-popper", "iconFontFamily": "lucide", "fill": "#14B8A6"}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ6Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "KJ6TitleT", "fill": "#FFFFFF", "content": "Cảm ơn quý khách!", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{"type": "text", "id": "KJ6Desc", "fill": "#8B8B90", "content": "Hẹn gặp lại 🎤", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ6Points", "width": "fill_container", "fill": "#14B8A610", "cornerRadius": 14, "padding": 18, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "KJ6PointsRow", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "KJ6PointsI", "width": 18, "height": 18, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"},
|
||||
{"type": "text", "id": "KJ6PointsLabel", "fill": "#14B8A6", "content": "Điểm tích lũy", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "KJ6PointsValue", "fill": "#14B8A6", "content": "+96 điểm", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"},
|
||||
{"type": "text", "id": "KJ6PointsTotal", "fill": "#8B8B90", "content": "Tổng: 5,420 điểm", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ6Rating", "width": "fill_container", "layout": "vertical", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "KJ6RatingLabel", "fill": "#8B8B90", "content": "Đánh giá trải nghiệm", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "KJ6Stars", "gap": 8, "children": [
|
||||
{"type": "icon_font", "id": "KJ6Star1", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "KJ6Star2", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "KJ6Star3", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "KJ6Star4", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "KJ6Star5", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#2A2A2E"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "KJ6Done", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "KJ6DoneT", "fill": "#FFFFFF", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RoomExtendDialog",
|
||||
"name": "Dialog/Room Extend",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "#0A0A0B80",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ExtendModal",
|
||||
"width": 420,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": 28,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ExtendHeader",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "ExtendIcon", "width": 64, "height": 64, "fill": "#F59E0B1A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ExtendIconI", "width": 28, "height": 28, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]},
|
||||
{"type": "text", "id": "ExtendTitle", "fill": "#FFFFFF", "content": "Gia hạn thời gian", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{"type": "text", "id": "ExtendRoom", "fill": "#8B8B90", "content": "Phòng VIP 01", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ExtendCurrent",
|
||||
"width": "fill_container",
|
||||
"fill": "#F59E0B10",
|
||||
"cornerRadius": 14,
|
||||
"padding": 16,
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "ExtendCurrentLeft", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "ExtendCurrentLabel", "fill": "#8B8B90", "content": "Thời gian còn lại", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "ExtendCurrentTime", "fill": "#F59E0B", "content": "00:12:45", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "ExtendCurrentRight", "layout": "vertical", "gap": 4, "alignItems": "flex-end", "children": [
|
||||
{"type": "text", "id": "ExtendCurrentUsed", "fill": "#8B8B90", "content": "Đã dùng", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "text", "id": "ExtendCurrentUsedTime", "fill": "#FFFFFF", "content": "1h 47'", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ExtendOptions",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{"type": "text", "id": "ExtendOptionsLabel", "fill": "#8B8B90", "content": "Chọn thời gian gia hạn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "ExtendOptionsRow", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "ExtendOpt30", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "padding": [14, 0], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ExtendOpt30Time", "fill": "#8B8B90", "content": "+30 phút", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "text", "id": "ExtendOpt30Price", "fill": "#6B6B70", "content": "75,000₫", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "ExtendOpt60", "width": "fill_container", "fill": "#F59E0B20", "stroke": {"thickness": 2, "fill": "#F59E0B"}, "cornerRadius": 12, "padding": [14, 0], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ExtendOpt60Time", "fill": "#F59E0B", "content": "+1 giờ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "text", "id": "ExtendOpt60Price", "fill": "#F59E0B", "content": "150,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "ExtendOpt120", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "padding": [14, 0], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "ExtendOpt120Time", "fill": "#8B8B90", "content": "+2 giờ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "text", "id": "ExtendOpt120Price", "fill": "#6B6B70", "content": "280,000₫", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{"type": "frame", "id": "ExtendDivider", "width": "fill_container", "height": 1, "fill": "#1F1F23"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ExtendSummary",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{"type": "frame", "id": "ExtendSumRow1", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "text", "id": "ExtendSumLabel1", "fill": "#8B8B90", "content": "Thời gian mới", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ExtendSumValue1", "fill": "#FFFFFF", "content": "01:12:45", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "ExtendSumRow2", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "text", "id": "ExtendSumLabel2", "fill": "#8B8B90", "content": "Phí gia hạn", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "text", "id": "ExtendSumValue2", "fill": "#F59E0B", "content": "+150,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "ExtendSumRow3", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "text", "id": "ExtendSumLabel3", "fill": "#FFFFFF", "content": "Tổng bill hiện tại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "text", "id": "ExtendSumValue3", "fill": "#FF5C00", "content": "560,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{"type": "frame", "id": "ExtendActions", "width": "fill_container", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "ExtendCancel", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ExtendCancelT", "fill": "#ADADB0", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "ExtendConfirm", "width": "fill_container", "height": 48, "fill": "#F59E0B", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "ExtendConfirmIcon", "width": 18, "height": 18, "iconFontName": "timer", "iconFontFamily": "lucide", "fill": "#000"}, {"type": "text", "id": "ExtendConfirmT", "fill": "#000", "content": "Xác nhận gia hạn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RoomSelectDialog",
|
||||
"name": "Dialog/Room Select",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "#0A0A0B80",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RoomModal",
|
||||
"width": 520,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 28,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RoomHeader",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "RoomHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RoomIcon", "width": 44, "height": 44, "fill": "#8B5CF61A", "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RoomIconI", "width": 22, "height": 22, "iconFontName": "door-open", "iconFontFamily": "lucide", "fill": "#8B5CF6"}
|
||||
]},
|
||||
{"type": "frame", "id": "RoomTitleBlock", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "RoomTitle", "fill": "#FFFFFF", "content": "Chọn phòng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
|
||||
{"type": "text", "id": "RoomDesc", "fill": "#8B8B90", "content": "5 phòng trống", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "RoomClose", "width": 32, "height": 32, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RoomCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#8B8B90"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RoomTypes",
|
||||
"width": "fill_container",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{"type": "frame", "id": "RoomTypeAll", "fill": "#8B5CF6", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "RoomTypeAllT", "fill": "#FFF", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "RoomTypeStd", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "RoomTypeStdT", "fill": "#8B8B90", "content": "Standard", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "RoomTypeVIP", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "RoomTypeVIPT", "fill": "#8B8B90", "content": "VIP", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "RoomTypePre", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "RoomTypePreT", "fill": "#8B8B90", "content": "Premium", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RoomList",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{"type": "frame", "id": "Room1", "width": "fill_container", "fill": "#8B5CF610", "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "cornerRadius": 14, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "Room1Left", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "Room1Img", "width": 48, "height": 48, "fill": "#8B5CF630", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "Room1Icon", "width": 24, "height": 24, "iconFontName": "mic-2", "iconFontFamily": "lucide", "fill": "#8B5CF6"}]},
|
||||
{"type": "frame", "id": "Room1Info", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "Room1NameRow", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Room1Name", "fill": "#FFFFFF", "content": "Phòng VIP 01", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "Room1Badge", "fill": "#22C55E", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "Room1BadgeT", "fill": "#FFF", "content": "Trống", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}]}
|
||||
]},
|
||||
{"type": "text", "id": "Room1Cap", "fill": "#8B8B90", "content": "8-12 người • Màn hình lớn", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "Room1Right", "layout": "vertical", "gap": 2, "alignItems": "flex-end", "children": [
|
||||
{"type": "text", "id": "Room1Price", "fill": "#8B5CF6", "content": "150,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"},
|
||||
{"type": "text", "id": "Room1Unit", "fill": "#6B6B70", "content": "/giờ", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "Room2", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 14, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "Room2Left", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "Room2Img", "width": 48, "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "Room2Icon", "width": 24, "height": 24, "iconFontName": "mic-2", "iconFontFamily": "lucide", "fill": "#6B6B70"}]},
|
||||
{"type": "frame", "id": "Room2Info", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "Room2NameRow", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Room2Name", "fill": "#FFFFFF", "content": "Phòng Standard 02", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "Room2Badge", "fill": "#22C55E", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "Room2BadgeT", "fill": "#FFF", "content": "Trống", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}]}
|
||||
]},
|
||||
{"type": "text", "id": "Room2Cap", "fill": "#8B8B90", "content": "4-6 người", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "Room2Right", "layout": "vertical", "gap": 2, "alignItems": "flex-end", "children": [
|
||||
{"type": "text", "id": "Room2Price", "fill": "#FFFFFF", "content": "80,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "text", "id": "Room2Unit", "fill": "#6B6B70", "content": "/giờ", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "Room3", "width": "fill_container", "fill": "#FF5C0010", "stroke": {"thickness": 1, "fill": "#FF5C0050"}, "cornerRadius": 14, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "Room3Left", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "Room3Img", "width": 48, "height": 48, "fill": "#FF5C0030", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "Room3Icon", "width": 24, "height": 24, "iconFontName": "mic-2", "iconFontFamily": "lucide", "fill": "#FF5C00"}]},
|
||||
{"type": "frame", "id": "Room3Info", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "Room3NameRow", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Room3Name", "fill": "#8B8B90", "content": "Phòng VIP 02", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "Room3Badge", "fill": "#FF5C00", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "Room3BadgeT", "fill": "#FFF", "content": "Đang dùng", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}]}
|
||||
]},
|
||||
{"type": "text", "id": "Room3Cap", "fill": "#6B6B70", "content": "8-12 người • Còn 45 phút", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "text", "id": "Room3Price", "fill": "#6B6B70", "content": "150,000₫/giờ", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{"type": "frame", "id": "RoomActions", "width": "fill_container", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "RoomCancel", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RoomCancelT", "fill": "#ADADB0", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "RoomConfirm", "width": "fill_container", "height": 48, "fill": "#8B5CF6", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "RoomConfirmIcon", "width": 18, "height": 18, "iconFontName": "door-open", "iconFontFamily": "lucide", "fill": "#FFF"}, {"type": "text", "id": "RoomConfirmT", "fill": "#FFF", "content": "Mở phòng VIP 01", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderNoteDialog",
|
||||
"name": "Dialog/Order Note",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "#0A0A0B80",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NoteModal",
|
||||
"width": 440,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 28,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NoteHeader",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "NoteHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "NoteIcon", "width": 44, "height": 44, "fill": "#EC48991A", "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "NoteIconI", "width": 22, "height": 22, "iconFontName": "message-square", "iconFontFamily": "lucide", "fill": "#EC4899"}
|
||||
]},
|
||||
{"type": "frame", "id": "NoteTitleBlock", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "NoteTitle", "fill": "#FFFFFF", "content": "Ghi chú cho bếp", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
|
||||
{"type": "text", "id": "NoteItem", "fill": "#8B8B90", "content": "Phở bò tái chín", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "NoteClose", "width": 32, "height": 32, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "NoteCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#8B8B90"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NoteQuickTags",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{"type": "text", "id": "NoteQuickLabel", "fill": "#8B8B90", "content": "Ghi chú nhanh", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "NoteQuickRow1", "width": "fill_container", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "NoteTag1", "fill": "#EC48991A", "stroke": {"thickness": 1, "fill": "#EC4899"}, "cornerRadius": 8, "padding": [8, 12], "children": [{"type": "text", "id": "NoteTag1T", "fill": "#EC4899", "content": "Không hành", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "NoteTag2", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 12], "children": [{"type": "text", "id": "NoteTag2T", "fill": "#8B8B90", "content": "Ít cay", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "NoteTag3", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 12], "children": [{"type": "text", "id": "NoteTag3T", "fill": "#8B8B90", "content": "Cay nhiều", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "NoteQuickRow2", "width": "fill_container", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "NoteTag4", "fill": "#EC48991A", "stroke": {"thickness": 1, "fill": "#EC4899"}, "cornerRadius": 8, "padding": [8, 12], "children": [{"type": "text", "id": "NoteTag4T", "fill": "#EC4899", "content": "Không ngò", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "NoteTag5", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 12], "children": [{"type": "text", "id": "NoteTag5T", "fill": "#8B8B90", "content": "Chín kỹ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "NoteTag6", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 12], "children": [{"type": "text", "id": "NoteTag6T", "fill": "#8B8B90", "content": "Tái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "NoteQuickRow3", "width": "fill_container", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "NoteTag7", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 12], "children": [{"type": "text", "id": "NoteTag7T", "fill": "#8B8B90", "content": "Không đá", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "NoteTag8", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 12], "children": [{"type": "text", "id": "NoteTag8T", "fill": "#8B8B90", "content": "Thêm rau", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "NoteTag9", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 12], "children": [{"type": "text", "id": "NoteTag9T", "fill": "#8B8B90", "content": "Dị ứng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NoteTextArea",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{"type": "text", "id": "NoteTextLabel", "fill": "#8B8B90", "content": "Ghi chú thêm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "NoteInput", "width": "fill_container", "height": 100, "fill": "#1A1A1D", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "padding": 14, "layout": "vertical", "children": [
|
||||
{"type": "text", "id": "NoteInputText", "fill": "#FFFFFF", "content": "Không hành, không ngò. Thêm giá sống.", "fontFamily": "Roboto", "fontSize": 14, "lineHeight": 1.5}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{"type": "frame", "id": "NoteActions", "width": "fill_container", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "NoteCancel", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NoteCancelT", "fill": "#ADADB0", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "NoteConfirm", "width": "fill_container", "height": 48, "fill": "#EC4899", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "NoteConfirmIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFF"}, {"type": "text", "id": "NoteConfirmT", "fill": "#FFF", "content": "Lưu ghi chú", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,364 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RestJourney1",
|
||||
"name": "Restaurant Journey/1-Table",
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RJ1Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 28,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "RJ1Step", "fill": "#3B82F620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "RJ1StepT", "fill": "#3B82F6", "content": "Bước 1/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "RJ1Icon", "width": 64, "height": 64, "fill": "#3B82F61A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RJ1IconI", "width": 28, "height": 28, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#3B82F6"}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ1Title", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RJ1TitleT", "fill": "#FFFFFF", "content": "Chào mừng!", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{"type": "text", "id": "RJ1Desc", "fill": "#8B8B90", "content": "Quý khách có mấy người?", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ1People", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "RJ1P2", "width": 56, "height": 56, "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RJ1P2T", "fill": "#8B8B90", "content": "2", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "RJ1P4", "width": 56, "height": 56, "fill": "#3B82F620", "stroke": {"thickness": 2, "fill": "#3B82F6"}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RJ1P4T", "fill": "#3B82F6", "content": "4", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}]},
|
||||
{"type": "frame", "id": "RJ1P6", "width": 56, "height": 56, "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RJ1P6T", "fill": "#8B8B90", "content": "6", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "RJ1P8", "width": 56, "height": 56, "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RJ1P8T", "fill": "#8B8B90", "content": "8+", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ1Table", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 12, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RJ1TableL", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RJ1TableIcon", "width": 40, "height": 40, "fill": "#22C55E30", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RJ1TableNum", "fill": "#22C55E", "content": "05", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]},
|
||||
{"type": "frame", "id": "RJ1TableInfo", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "RJ1TableN", "fill": "#FFFFFF", "content": "Bàn 05 - Tầng 1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "RJ1TableCap", "fill": "#8B8B90", "content": "4 ghế • Cạnh cửa sổ", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "icon_font", "id": "RJ1TableCheck", "width": 20, "height": 20, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ1Confirm", "width": "fill_container", "height": 50, "fill": "#3B82F6", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RJ1ConfirmT", "fill": "#FFFFFF", "content": "Xác nhận bàn 05", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RestJourney2",
|
||||
"name": "Restaurant Journey/2-Menu",
|
||||
"x": 540,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RJ2Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 18,
|
||||
"padding": 24,
|
||||
"children": [
|
||||
{"type": "frame", "id": "RJ2Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RJ2Step", "fill": "#FF5C0020", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "RJ2StepT", "fill": "#FF5C00", "content": "Bước 2/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "text", "id": "RJ2Table", "fill": "#8B8B90", "content": "🪑 Bàn 05", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ2Title", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "RJ2TitleT", "fill": "#FFFFFF", "content": "Order đang chọn", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
|
||||
{"type": "text", "id": "RJ2Count", "fill": "#8B8B90", "content": "5 món • 4 người", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ2Items", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 12, "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "RJ2Item1", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "frame", "id": "RJ2Item1L", "gap": 8, "children": [
|
||||
{"type": "text", "id": "RJ2Item1Q", "fill": "#FF5C00", "content": "2x", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "RJ2Item1N", "fill": "#FFFFFF", "content": "Phở bò tái chín", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "text", "id": "RJ2Item1P", "fill": "#FFFFFF", "content": "130,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ2Item2", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "frame", "id": "RJ2Item2L", "gap": 8, "children": [
|
||||
{"type": "text", "id": "RJ2Item2Q", "fill": "#FF5C00", "content": "1x", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "RJ2Item2N", "fill": "#FFFFFF", "content": "Bún chả Hà Nội", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "text", "id": "RJ2Item2P", "fill": "#FFFFFF", "content": "75,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ2Item3", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "frame", "id": "RJ2Item3L", "gap": 8, "children": [
|
||||
{"type": "text", "id": "RJ2Item3Q", "fill": "#FF5C00", "content": "2x", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"},
|
||||
{"type": "text", "id": "RJ2Item3N", "fill": "#FFFFFF", "content": "Gỏi cuốn tôm thịt", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "text", "id": "RJ2Item3P", "fill": "#FFFFFF", "content": "50,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ2Note", "width": "fill_container", "fill": "#EC489910", "cornerRadius": 8, "padding": 10, "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RJ2NoteI", "width": 14, "height": 14, "iconFontName": "message-square", "iconFontFamily": "lucide", "fill": "#EC4899"},
|
||||
{"type": "text", "id": "RJ2NoteT", "fill": "#EC4899", "content": "Không hành, ít cay", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ2Divider", "width": "fill_container", "height": 1, "fill": "#1F1F23"},
|
||||
{"type": "frame", "id": "RJ2Total", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "text", "id": "RJ2TotalL", "fill": "#8B8B90", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "text", "id": "RJ2TotalV", "fill": "#FF5C00", "content": "255,000₫", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ2Actions", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "RJ2Add", "width": 48, "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "RJ2AddI", "width": 20, "height": 20, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#ADADB0"}]},
|
||||
{"type": "frame", "id": "RJ2Send", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RJ2SendI", "width": 16, "height": 16, "iconFontName": "send", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "RJ2SendT", "fill": "#FFFFFF", "content": "Gửi bếp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RestJourney3",
|
||||
"name": "Restaurant Journey/3-Kitchen",
|
||||
"x": 1080,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RJ3Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": 32,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "RJ3Step", "fill": "#EC489920", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "RJ3StepT", "fill": "#EC4899", "content": "Bước 3/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "RJ3Icon", "width": 80, "height": 80, "fill": "#EC48991A", "cornerRadius": 40, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RJ3IconI", "width": 36, "height": 36, "iconFontName": "chef-hat", "iconFontFamily": "lucide", "fill": "#EC4899"}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ3Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RJ3TitleT", "fill": "#FFFFFF", "content": "Bếp đang nấu", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{"type": "text", "id": "RJ3Desc", "fill": "#8B8B90", "content": "Order đã gửi thành công", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ3Progress", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "RJ3Item1", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RJ3Item1N", "fill": "#FFFFFF", "content": "2x Phở bò tái chín", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "RJ3Item1S", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [4, 8], "children": [{"type": "text", "id": "RJ3Item1ST", "fill": "#F59E0B", "content": "Đang nấu", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ3Item2", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RJ3Item2N", "fill": "#FFFFFF", "content": "1x Bún chả Hà Nội", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "RJ3Item2S", "fill": "#3B82F620", "cornerRadius": 4, "padding": [4, 8], "children": [{"type": "text", "id": "RJ3Item2ST", "fill": "#3B82F6", "content": "Chờ", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ3Item3", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RJ3Item3N", "fill": "#FFFFFF", "content": "2x Gỏi cuốn tôm thịt", "fontFamily": "Roboto", "fontSize": 13},
|
||||
{"type": "frame", "id": "RJ3Item3S", "fill": "#22C55E20", "cornerRadius": 4, "padding": [4, 8], "children": [{"type": "text", "id": "RJ3Item3ST", "fill": "#22C55E", "content": "Xong", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ3Time", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RJ3TimeI", "width": 16, "height": 16, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B8B90"},
|
||||
{"type": "text", "id": "RJ3TimeT", "fill": "#8B8B90", "content": "Ước tính: 10-15 phút", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ3AddMore", "width": "fill_container", "height": 44, "fill": "#2A2A2E", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RJ3AddI", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#ADADB0"},
|
||||
{"type": "text", "id": "RJ3AddT", "fill": "#ADADB0", "content": "Gọi thêm món", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RestJourney4",
|
||||
"name": "Restaurant Journey/4-Serving",
|
||||
"x": 1620,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RJ4Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": 32,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "RJ4Step", "fill": "#F59E0B20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "RJ4StepT", "fill": "#F59E0B", "content": "Bước 4/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "RJ4Icon", "width": 80, "height": 80, "fill": "#F59E0B1A", "cornerRadius": 40, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RJ4IconI", "width": 36, "height": 36, "iconFontName": "utensils", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ4Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RJ4TitleT", "fill": "#FFFFFF", "content": "Đang phục vụ", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{"type": "text", "id": "RJ4Desc", "fill": "#8B8B90", "content": "3/5 món đã lên bàn", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ4Items", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "RJ4Item1", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RJ4Item1L", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RJ4Item1Check", "width": 16, "height": 16, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "RJ4Item1N", "fill": "#FFFFFF", "content": "2x Gỏi cuốn tôm thịt", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "RJ4Item1S", "fill": "#22C55E", "content": "Đã phục vụ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ4Item2", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RJ4Item2L", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RJ4Item2Check", "width": 16, "height": 16, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "RJ4Item2N", "fill": "#FFFFFF", "content": "2x Phở bò tái chín", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "RJ4Item2S", "fill": "#22C55E", "content": "Đã phục vụ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ4Item3", "width": "fill_container", "fill": "#F59E0B10", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RJ4Item3L", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RJ4Item3Wait", "width": 16, "height": 16, "iconFontName": "loader", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "text", "id": "RJ4Item3N", "fill": "#FFFFFF", "content": "1x Bún chả Hà Nội", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "RJ4Item3S", "fill": "#F59E0B", "content": "Sắp lên", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ4Actions", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "RJ4Add", "width": "fill_container", "height": 44, "fill": "#2A2A2E", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RJ4AddI", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#ADADB0"},
|
||||
{"type": "text", "id": "RJ4AddT", "fill": "#ADADB0", "content": "Gọi thêm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ4Bill", "width": "fill_container", "height": 44, "fill": "#22C55E", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RJ4BillI", "width": 16, "height": 16, "iconFontName": "receipt", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "RJ4BillT", "fill": "#FFFFFF", "content": "Xem bill", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RestJourney5",
|
||||
"name": "Restaurant Journey/5-Bill",
|
||||
"x": 2160,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RJ5Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 18,
|
||||
"padding": 24,
|
||||
"children": [
|
||||
{"type": "frame", "id": "RJ5Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "RJ5Step", "fill": "#22C55E20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "RJ5StepT", "fill": "#22C55E", "content": "Bước 5/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "text", "id": "RJ5Table", "fill": "#8B8B90", "content": "Bàn 05 • 45 phút", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ5Title", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "RJ5TitleT", "fill": "#FFFFFF", "content": "Tính tiền", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ5Items", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 12, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "RJ5Item1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RJ5Item1N", "fill": "#FFFFFF", "content": "2x Phở bò tái chín", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "RJ5Item1P", "fill": "#FFFFFF", "content": "130,000₫", "fontFamily": "Roboto", "fontSize": 12}]},
|
||||
{"type": "frame", "id": "RJ5Item2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RJ5Item2N", "fill": "#FFFFFF", "content": "1x Bún chả Hà Nội", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "RJ5Item2P", "fill": "#FFFFFF", "content": "75,000₫", "fontFamily": "Roboto", "fontSize": 12}]},
|
||||
{"type": "frame", "id": "RJ5Item3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RJ5Item3N", "fill": "#FFFFFF", "content": "2x Gỏi cuốn tôm thịt", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "RJ5Item3P", "fill": "#FFFFFF", "content": "50,000₫", "fontFamily": "Roboto", "fontSize": 12}]}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ5Summary", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "RJ5Sub", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RJ5SubL", "fill": "#8B8B90", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "RJ5SubV", "fill": "#FFFFFF", "content": "255,000₫", "fontFamily": "Roboto", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "RJ5Discount", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "frame", "id": "RJ5DiscountL", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "RJ5DiscountI", "width": 12, "height": 12, "iconFontName": "tag", "iconFontFamily": "lucide", "fill": "#EC4899"}, {"type": "text", "id": "RJ5DiscountT", "fill": "#EC4899", "content": "Giảm 10%", "fontFamily": "Roboto", "fontSize": 13}]},
|
||||
{"type": "text", "id": "RJ5DiscountV", "fill": "#EC4899", "content": "-25,500₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ5Loyalty", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "frame", "id": "RJ5LoyaltyL", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "RJ5LoyaltyI", "width": 12, "height": 12, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"}, {"type": "text", "id": "RJ5LoyaltyT", "fill": "#14B8A6", "content": "Dùng 50 điểm", "fontFamily": "Roboto", "fontSize": 13}]},
|
||||
{"type": "text", "id": "RJ5LoyaltyV", "fill": "#14B8A6", "content": "-5,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ5DividerB", "width": "fill_container", "height": 1, "fill": "#2A2A2E"},
|
||||
{"type": "frame", "id": "RJ5Total", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RJ5TotalL", "fill": "#FFFFFF", "content": "Tổng thanh toán", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "RJ5TotalV", "fill": "#22C55E", "content": "224,500₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ5Pay", "width": "fill_container", "height": 50, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RJ5PayI", "width": 18, "height": 18, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "RJ5PayT", "fill": "#FFFFFF", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RestJourney6",
|
||||
"name": "Restaurant Journey/6-Complete",
|
||||
"x": 2700,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RJ6Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": 36,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "RJ6Step", "fill": "#14B8A620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "RJ6StepT", "fill": "#14B8A6", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "RJ6Icon", "width": 88, "height": 88, "fill": "#14B8A61A", "cornerRadius": 44, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "RJ6IconI", "width": 40, "height": 40, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#14B8A6"}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ6Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RJ6TitleT", "fill": "#FFFFFF", "content": "Thanh toán thành công!", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{"type": "text", "id": "RJ6Desc", "fill": "#8B8B90", "content": "Cảm ơn quý khách 🍜", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ6Receipt", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 16, "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "RJ6ReceiptRow1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RJ6ReceiptL1", "fill": "#8B8B90", "content": "Số hóa đơn", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "RJ6ReceiptV1", "fill": "#FFFFFF", "content": "#HD-20260206-042", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "RJ6ReceiptRow2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RJ6ReceiptL2", "fill": "#8B8B90", "content": "Tổng tiền", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "RJ6ReceiptV2", "fill": "#14B8A6", "content": "224,500₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "RJ6ReceiptRow3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RJ6ReceiptL3", "fill": "#8B8B90", "content": "Điểm tích lũy", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "RJ6ReceiptV3", "fill": "#14B8A6", "content": "+22 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ6Rating", "width": "fill_container", "layout": "vertical", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RJ6RatingLabel", "fill": "#8B8B90", "content": "Đánh giá bữa ăn", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "RJ6Stars", "gap": 8, "children": [
|
||||
{"type": "icon_font", "id": "RJ6Star1", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "RJ6Star2", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "RJ6Star3", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "RJ6Star4", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "RJ6Star5", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "RJ6Done", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "RJ6DoneT", "fill": "#FFFFFF", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TableSelectDialog",
|
||||
"name": "Dialog/Table Select",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "#0A0A0B80",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TableModal",
|
||||
"width": 560,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 28,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TableHeader",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "TableHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "TableIcon", "width": 44, "height": 44, "fill": "#3B82F61A", "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TableIconI", "width": 22, "height": 22, "iconFontName": "layout-grid", "iconFontFamily": "lucide", "fill": "#3B82F6"}
|
||||
]},
|
||||
{"type": "frame", "id": "TableTitleBlock", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "TableTitle", "fill": "#FFFFFF", "content": "Chọn bàn", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
|
||||
{"type": "text", "id": "TableDesc", "fill": "#8B8B90", "content": "Tầng 1 • 8/12 bàn trống", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "TableClose", "width": 32, "height": 32, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "TableCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#8B8B90"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TableFloors",
|
||||
"width": "fill_container",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{"type": "frame", "id": "TableFloor1", "fill": "#3B82F6", "cornerRadius": 8, "padding": [8, 16], "children": [{"type": "text", "id": "TableFloor1T", "fill": "#FFF", "content": "Tầng 1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "TableFloor2", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 16], "children": [{"type": "text", "id": "TableFloor2T", "fill": "#8B8B90", "content": "Tầng 2", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "TableFloorVIP", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 16], "children": [{"type": "text", "id": "TableFloorVIPT", "fill": "#8B8B90", "content": "Phòng VIP", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TableGrid",
|
||||
"width": "fill_container",
|
||||
"fill": "#0A0A0B",
|
||||
"cornerRadius": 16,
|
||||
"padding": 20,
|
||||
"gap": 12,
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "TableRow1", "width": "fill_container", "gap": 12, "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "Table1", "width": 72, "height": 72, "fill": "#22C55E20", "stroke": {"thickness": 2, "fill": "#22C55E"}, "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 2, "children": [{"type": "text", "id": "Table1Num", "fill": "#22C55E", "content": "01", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "Table1Cap", "fill": "#22C55E", "content": "4 ghế", "fontFamily": "Roboto", "fontSize": 10}]},
|
||||
{"type": "frame", "id": "Table2", "width": 72, "height": 72, "fill": "#FF5C0020", "stroke": {"thickness": 2, "fill": "#FF5C00"}, "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 2, "children": [{"type": "text", "id": "Table2Num", "fill": "#FF5C00", "content": "02", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "Table2Time", "fill": "#FF5C00", "content": "45'", "fontFamily": "Roboto", "fontSize": 10}]},
|
||||
{"type": "frame", "id": "Table3", "width": 72, "height": 72, "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 2, "children": [{"type": "text", "id": "Table3Num", "fill": "#8B8B90", "content": "03", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "Table3Cap", "fill": "#6B6B70", "content": "2 ghế", "fontFamily": "Roboto", "fontSize": 10}]},
|
||||
{"type": "frame", "id": "Table4", "width": 72, "height": 72, "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 2, "children": [{"type": "text", "id": "Table4Num", "fill": "#8B8B90", "content": "04", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "Table4Cap", "fill": "#6B6B70", "content": "4 ghế", "fontFamily": "Roboto", "fontSize": 10}]}
|
||||
]},
|
||||
{"type": "frame", "id": "TableRow2", "width": "fill_container", "gap": 12, "justifyContent": "center", "children": [
|
||||
{"type": "frame", "id": "Table5", "width": 72, "height": 72, "fill": "#3B82F620", "stroke": {"thickness": 2, "fill": "#3B82F6"}, "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 2, "children": [{"type": "text", "id": "Table5Num", "fill": "#3B82F6", "content": "05", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "icon_font", "id": "Table5Check", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#3B82F6"}]},
|
||||
{"type": "frame", "id": "Table6", "width": 72, "height": 72, "fill": "#FF5C0020", "stroke": {"thickness": 2, "fill": "#FF5C00"}, "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 2, "children": [{"type": "text", "id": "Table6Num", "fill": "#FF5C00", "content": "06", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "Table6Time", "fill": "#FF5C00", "content": "20'", "fontFamily": "Roboto", "fontSize": 10}]},
|
||||
{"type": "frame", "id": "Table7", "width": 72, "height": 72, "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 2, "children": [{"type": "text", "id": "Table7Num", "fill": "#8B8B90", "content": "07", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "Table7Cap", "fill": "#6B6B70", "content": "6 ghế", "fontFamily": "Roboto", "fontSize": 10}]},
|
||||
{"type": "frame", "id": "Table8", "width": 72, "height": 72, "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 2, "children": [{"type": "text", "id": "Table8Num", "fill": "#8B8B90", "content": "08", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "Table8Cap", "fill": "#6B6B70", "content": "8 ghế", "fontFamily": "Roboto", "fontSize": 10}]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "TableLegend",
|
||||
"width": "fill_container",
|
||||
"gap": 16,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "TableLegend1", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "TableLegend1Dot", "width": 12, "height": 12, "fill": "#22C55E", "cornerRadius": 3}, {"type": "text", "id": "TableLegend1T", "fill": "#8B8B90", "content": "Trống", "fontFamily": "Roboto", "fontSize": 11}]},
|
||||
{"type": "frame", "id": "TableLegend2", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "TableLegend2Dot", "width": 12, "height": 12, "fill": "#FF5C00", "cornerRadius": 3}, {"type": "text", "id": "TableLegend2T", "fill": "#8B8B90", "content": "Đang dùng", "fontFamily": "Roboto", "fontSize": 11}]},
|
||||
{"type": "frame", "id": "TableLegend3", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "TableLegend3Dot", "width": 12, "height": 12, "fill": "#3B82F6", "cornerRadius": 3}, {"type": "text", "id": "TableLegend3T", "fill": "#8B8B90", "content": "Đã chọn", "fontFamily": "Roboto", "fontSize": 11}]}
|
||||
]
|
||||
},
|
||||
{"type": "frame", "id": "TableActions", "width": "fill_container", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "TableCancel", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "TableCancelT", "fill": "#ADADB0", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "TableConfirm", "width": "fill_container", "height": 48, "fill": "#3B82F6", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "TableConfirmIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFF"}, {"type": "text", "id": "TableConfirmT", "fill": "#FFF", "content": "Xác nhận Bàn 05", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerSearchDialog",
|
||||
"name": "Dialog/Customer Search",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "#0A0A0B80",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerModal",
|
||||
"width": 480,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 28,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerHeader",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "CustomerHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CustomerIcon", "width": 44, "height": 44, "fill": "#14B8A61A", "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CustomerIconI", "width": 22, "height": 22, "iconFontName": "user-search", "iconFontFamily": "lucide", "fill": "#14B8A6"}
|
||||
]},
|
||||
{"type": "frame", "id": "CustomerTitleBlock", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "CustomerTitle", "fill": "#FFFFFF", "content": "Tìm khách hàng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
|
||||
{"type": "text", "id": "CustomerDesc", "fill": "#8B8B90", "content": "SĐT hoặc tên thành viên", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CustomerClose", "width": 32, "height": 32, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CustomerCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#8B8B90"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{"type": "frame", "id": "CustomerSearch", "width": "fill_container", "height": 48, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "#14B8A6"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CustomerSearchIcon", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "#14B8A6"},
|
||||
{"type": "text", "id": "CustomerSearchText", "fill": "#FFFFFF", "content": "0901", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "frame", "id": "CustomerSearchClear", "width": 20, "height": 20, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CustomerSearchClearI", "width": 12, "height": 12, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#6B6B70"}]}
|
||||
]},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "CustomerResults",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{"type": "text", "id": "CustomerResultsTitle", "fill": "#6B6B70", "content": "Kết quả (3)", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "CustomerResult1", "width": "fill_container", "fill": "#14B8A610", "stroke": {"thickness": 1, "fill": "#14B8A6"}, "cornerRadius": 12, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CustomerResult1Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CustomerResult1Avatar", "width": 40, "height": 40, "fill": "#14B8A630", "cornerRadius": 20, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CustomerResult1Initial", "fill": "#14B8A6", "content": "N", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "CustomerResult1Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "frame", "id": "CustomerResult1Row", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "CustomerResult1Name", "fill": "#FFFFFF", "content": "Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "CustomerResult1VIP", "fill": "#F59E0B", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "CustomerResult1VIPText", "fill": "#000", "content": "Gold", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}]}
|
||||
]},
|
||||
{"type": "text", "id": "CustomerResult1Phone", "fill": "#8B8B90", "content": "0901***234 • 2,520 điểm", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "icon_font", "id": "CustomerResult1Check", "width": 20, "height": 20, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#14B8A6"}
|
||||
]},
|
||||
{"type": "frame", "id": "CustomerResult2", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CustomerResult2Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CustomerResult2Avatar", "width": 40, "height": 40, "fill": "#2A2A2E", "cornerRadius": 20, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CustomerResult2Initial", "fill": "#8B8B90", "content": "T", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "CustomerResult2Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "CustomerResult2Name", "fill": "#FFFFFF", "content": "Trần Thị B", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "CustomerResult2Phone", "fill": "#8B8B90", "content": "0901***567 • 850 điểm", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CustomerResult2Btn", "fill": "#2A2A2E", "cornerRadius": 6, "padding": [6, 10], "children": [{"type": "text", "id": "CustomerResult2BtnT", "fill": "#ADADB0", "content": "Chọn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "CustomerResult3", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CustomerResult3Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "CustomerResult3Avatar", "width": 40, "height": 40, "fill": "#2A2A2E", "cornerRadius": 20, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CustomerResult3Initial", "fill": "#8B8B90", "content": "L", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "CustomerResult3Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "CustomerResult3Name", "fill": "#FFFFFF", "content": "Lê Văn C", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "CustomerResult3Phone", "fill": "#8B8B90", "content": "0901***891 • 150 điểm", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "CustomerResult3Btn", "fill": "#2A2A2E", "cornerRadius": 6, "padding": [6, 10], "children": [{"type": "text", "id": "CustomerResult3BtnT", "fill": "#ADADB0", "content": "Chọn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{"type": "frame", "id": "CustomerDivider", "width": "fill_container", "height": 1, "fill": "#1F1F23"},
|
||||
{"type": "frame", "id": "CustomerNewBtn", "width": "fill_container", "height": 44, "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E", "style": "dashed"}, "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "CustomerNewIcon", "width": 16, "height": 16, "iconFontName": "user-plus", "iconFontFamily": "lucide", "fill": "#8B8B90"},
|
||||
{"type": "text", "id": "CustomerNewText", "fill": "#8B8B90", "content": "Tạo khách hàng mới", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DiscountApplyDialog",
|
||||
"name": "Dialog/Discount Apply",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "#0A0A0B80",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DiscountModal",
|
||||
"width": 440,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": 32,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DiscountHeader",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "DiscountIcon", "width": 64, "height": 64, "fill": "#F59E0B1A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DiscountIconI", "width": 28, "height": 28, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]},
|
||||
{"type": "text", "id": "DiscountTitle", "fill": "#FFFFFF", "content": "Áp dụng giảm giá", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{"type": "text", "id": "DiscountDesc", "fill": "#8B8B90", "content": "Nhập mã voucher hoặc chọn khuyến mãi", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DiscountInput",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{"type": "frame", "id": "DiscountInputRow", "width": "fill_container", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "DiscountInputField", "width": "fill_container", "height": 48, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "padding": [0, 16], "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DiscountInputIcon", "width": 18, "height": 18, "iconFontName": "ticket", "iconFontFamily": "lucide", "fill": "#6B6B70"},
|
||||
{"type": "text", "id": "DiscountInputText", "fill": "#FFFFFF", "content": "GOODGO50", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "DiscountApplyBtn", "height": 48, "fill": "#F59E0B", "cornerRadius": 10, "padding": [0, 16], "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DiscountApplyText", "fill": "#000", "content": "Áp dụng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "DiscountSuccess", "width": "fill_container", "fill": "#22C55E1A", "cornerRadius": 10, "padding": 12, "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "DiscountSuccessIcon", "width": 18, "height": 18, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "DiscountSuccessText", "fill": "#22C55E", "content": "Giảm 50,000₫ cho đơn từ 200K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{"type": "frame", "id": "DiscountDivider", "width": "fill_container", "height": 1, "fill": "#1F1F23"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DiscountPromos",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{"type": "text", "id": "DiscountPromosTitle", "fill": "#8B8B90", "content": "Khuyến mãi đang có", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "DiscountPromo1", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DiscountPromo1Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DiscountPromo1Icon", "width": 36, "height": 36, "fill": "#EC48991A", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "DiscountPromo1Pct", "fill": "#EC4899", "content": "20%", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]},
|
||||
{"type": "frame", "id": "DiscountPromo1Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "DiscountPromo1Name", "fill": "#FFFFFF", "content": "Giảm 20% Happy Hour", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "text", "id": "DiscountPromo1Cond", "fill": "#6B6B70", "content": "14h-17h • Áp dụng tất cả", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "DiscountPromo1Btn", "fill": "#2A2A2E", "cornerRadius": 6, "padding": [6, 10], "children": [{"type": "text", "id": "DiscountPromo1BtnT", "fill": "#ADADB0", "content": "Chọn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "DiscountPromo2", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DiscountPromo2Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "DiscountPromo2Icon", "width": 36, "height": 36, "fill": "#3B82F61A", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "DiscountPromo2Pct", "fill": "#3B82F6", "content": "30K", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]},
|
||||
{"type": "frame", "id": "DiscountPromo2Info", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "DiscountPromo2Name", "fill": "#FFFFFF", "content": "Giảm 30K cho thành viên", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{"type": "text", "id": "DiscountPromo2Cond", "fill": "#6B6B70", "content": "VIP Gold trở lên • Đơn từ 100K", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "DiscountPromo2Btn", "fill": "#2A2A2E", "cornerRadius": 6, "padding": [6, 10], "children": [{"type": "text", "id": "DiscountPromo2BtnT", "fill": "#ADADB0", "content": "Chọn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DiscountActions",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "DiscountCancel", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DiscountCancelText", "fill": "#ADADB0", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "DiscountConfirm", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "DiscountConfirmText", "fill": "#FFFFFF", "content": "Xác nhận -50,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
132
pencil-design/src/pages/tPOS/pos/shared/dialogs/split-bill.pen
Normal file
132
pencil-design/src/pages/tPOS/pos/shared/dialogs/split-bill.pen
Normal file
@@ -0,0 +1,132 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SplitBillDialog",
|
||||
"name": "Dialog/Split Bill",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "#0A0A0B80",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SplitModal",
|
||||
"width": 500,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": 28,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SplitHeader",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "SplitHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SplitIcon", "width": 44, "height": 44, "fill": "#8B5CF61A", "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SplitIconI", "width": 22, "height": 22, "iconFontName": "split", "iconFontFamily": "lucide", "fill": "#8B5CF6"}
|
||||
]},
|
||||
{"type": "frame", "id": "SplitTitleBlock", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "SplitTitle", "fill": "#FFFFFF", "content": "Chia bill", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SplitTotal", "fill": "#8B8B90", "content": "Tổng: 650,000₫", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SplitClose", "width": 32, "height": 32, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SplitCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#8B8B90"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SplitOptions",
|
||||
"width": "fill_container",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{"type": "frame", "id": "SplitOptEqual", "width": "fill_container", "fill": "#8B5CF620", "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "cornerRadius": 10, "padding": [12, 16], "gap": 8, "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "icon_font", "id": "SplitOptEqualIcon", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#8B5CF6"},
|
||||
{"type": "text", "id": "SplitOptEqualText", "fill": "#8B5CF6", "content": "Chia đều", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "SplitOptCustom", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [12, 16], "gap": 8, "alignItems": "center", "justifyContent": "center", "children": [
|
||||
{"type": "icon_font", "id": "SplitOptCustomIcon", "width": 18, "height": 18, "iconFontName": "sliders", "iconFontFamily": "lucide", "fill": "#8B8B90"},
|
||||
{"type": "text", "id": "SplitOptCustomText", "fill": "#8B8B90", "content": "Tùy chỉnh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SplitPeople",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "SplitPeopleHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SplitPeopleLabel", "fill": "#8B8B90", "content": "Số người", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "SplitPeopleStepper", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SplitPeopleMinus", "width": 36, "height": 36, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "SplitPeopleMinusI", "width": 18, "height": 18, "iconFontName": "minus", "iconFontFamily": "lucide", "fill": "#ADADB0"}]},
|
||||
{"type": "text", "id": "SplitPeopleCount", "fill": "#FFFFFF", "content": "4", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "SplitPeoplePlus", "width": 36, "height": 36, "fill": "#8B5CF6", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "SplitPeoplePlusI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SplitPerPerson", "width": "fill_container", "fill": "#8B5CF610", "cornerRadius": 12, "padding": 16, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SplitPerPersonLabel", "fill": "#8B8B90", "content": "Mỗi người trả", "fontFamily": "Roboto", "fontSize": 14},
|
||||
{"type": "text", "id": "SplitPerPersonValue", "fill": "#8B5CF6", "content": "162,500₫", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SplitBreakdown",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{"type": "frame", "id": "SplitPerson1", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SplitPerson1Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SplitPerson1Num", "width": 28, "height": 28, "fill": "#22C55E", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SplitPerson1NumT", "fill": "#FFF", "content": "1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]},
|
||||
{"type": "text", "id": "SplitPerson1Label", "fill": "#FFFFFF", "content": "Người 1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SplitPerson1Right", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SplitPerson1Amount", "fill": "#FFFFFF", "content": "162,500₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "SplitPerson1Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [4, 8], "children": [{"type": "text", "id": "SplitPerson1StatusT", "fill": "#22C55E", "content": "Đã trả", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SplitPerson2", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SplitPerson2Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SplitPerson2Num", "width": 28, "height": 28, "fill": "#8B5CF6", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SplitPerson2NumT", "fill": "#FFF", "content": "2", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]},
|
||||
{"type": "text", "id": "SplitPerson2Label", "fill": "#FFFFFF", "content": "Người 2", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SplitPerson2Right", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SplitPerson2Amount", "fill": "#FFFFFF", "content": "162,500₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "SplitPerson2Pay", "fill": "#FF5C00", "cornerRadius": 6, "padding": [6, 12], "children": [{"type": "text", "id": "SplitPerson2PayT", "fill": "#FFF", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SplitPerson3", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SplitPerson3Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SplitPerson3Num", "width": 28, "height": 28, "fill": "#2A2A2E", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SplitPerson3NumT", "fill": "#8B8B90", "content": "3", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]},
|
||||
{"type": "text", "id": "SplitPerson3Label", "fill": "#8B8B90", "content": "Người 3", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "SplitPerson3Amount", "fill": "#8B8B90", "content": "162,500₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SplitPerson4", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SplitPerson4Left", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SplitPerson4Num", "width": 28, "height": 28, "fill": "#2A2A2E", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SplitPerson4NumT", "fill": "#8B8B90", "content": "4", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]},
|
||||
{"type": "text", "id": "SplitPerson4Label", "fill": "#8B8B90", "content": "Người 4", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "SplitPerson4Amount", "fill": "#8B8B90", "content": "162,500₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AppointmentBookDialog",
|
||||
"name": "Dialog/Appointment Book",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "#0A0A0B80",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AppointmentModal",
|
||||
"width": 520,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 28,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AppHeader",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "AppHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "AppIcon", "width": 44, "height": 44, "fill": "#22C55E1A", "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "AppIconI", "width": 22, "height": 22, "iconFontName": "calendar-plus", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]},
|
||||
{"type": "frame", "id": "AppTitleBlock", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "AppTitle", "fill": "#FFFFFF", "content": "Đặt lịch hẹn", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
|
||||
{"type": "text", "id": "AppDesc", "fill": "#8B8B90", "content": "Massage toàn thân 90'", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "AppClose", "width": 32, "height": 32, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "AppCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#8B8B90"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AppDatePicker",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "text", "id": "AppDateLabel", "fill": "#8B8B90", "content": "Chọn ngày", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "AppDates", "width": "fill_container", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "AppDate1", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [10, 0], "layout": "vertical", "gap": 2, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "AppDate1Day", "fill": "#6B6B70", "content": "T2", "fontFamily": "Roboto", "fontSize": 11},
|
||||
{"type": "text", "id": "AppDate1Num", "fill": "#8B8B90", "content": "10", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "AppDate2", "width": "fill_container", "fill": "#22C55E20", "stroke": {"thickness": 2, "fill": "#22C55E"}, "cornerRadius": 10, "padding": [10, 0], "layout": "vertical", "gap": 2, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "AppDate2Day", "fill": "#22C55E", "content": "T3", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"},
|
||||
{"type": "text", "id": "AppDate2Num", "fill": "#22C55E", "content": "11", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
|
||||
]},
|
||||
{"type": "frame", "id": "AppDate3", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [10, 0], "layout": "vertical", "gap": 2, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "AppDate3Day", "fill": "#6B6B70", "content": "T4", "fontFamily": "Roboto", "fontSize": 11},
|
||||
{"type": "text", "id": "AppDate3Num", "fill": "#8B8B90", "content": "12", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "AppDate4", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [10, 0], "layout": "vertical", "gap": 2, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "AppDate4Day", "fill": "#6B6B70", "content": "T5", "fontFamily": "Roboto", "fontSize": 11},
|
||||
{"type": "text", "id": "AppDate4Num", "fill": "#8B8B90", "content": "13", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "AppDate5", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [10, 0], "layout": "vertical", "gap": 2, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "AppDate5Day", "fill": "#6B6B70", "content": "T6", "fontFamily": "Roboto", "fontSize": 11},
|
||||
{"type": "text", "id": "AppDate5Num", "fill": "#8B8B90", "content": "14", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "AppDate6", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [10, 0], "layout": "vertical", "gap": 2, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "AppDate6Day", "fill": "#EC4899", "content": "T7", "fontFamily": "Roboto", "fontSize": 11},
|
||||
{"type": "text", "id": "AppDate6Num", "fill": "#8B8B90", "content": "15", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]},
|
||||
{"type": "frame", "id": "AppDate7", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [10, 0], "layout": "vertical", "gap": 2, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "AppDate7Day", "fill": "#EF4444", "content": "CN", "fontFamily": "Roboto", "fontSize": 11},
|
||||
{"type": "text", "id": "AppDate7Num", "fill": "#8B8B90", "content": "16", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AppTimePicker",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "AppTimeHeader", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "text", "id": "AppTimeLabel", "fill": "#8B8B90", "content": "Chọn giờ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "text", "id": "AppTimeAvail", "fill": "#22C55E", "content": "6 slot trống", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "AppTimes", "width": "fill_container", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "AppTime1", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "AppTime1T", "fill": "#8B8B90", "content": "09:00", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "AppTime2", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "AppTime2T", "fill": "#8B8B90", "content": "10:30", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "AppTime3", "fill": "#22C55E20", "stroke": {"thickness": 2, "fill": "#22C55E"}, "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "AppTime3T", "fill": "#22C55E", "content": "14:00", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "AppTime4", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "AppTime4T", "fill": "#8B8B90", "content": "15:30", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "AppTimes2", "width": "fill_container", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "AppTime5", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "AppTime5T", "fill": "#8B8B90", "content": "17:00", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "AppTime6", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "AppTime6T", "fill": "#8B8B90", "content": "19:00", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "AppTimeDisabled", "fill": "#1A1A1D40", "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "AppTimeDisabledT", "fill": "#3A3A3E", "content": "20:30", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AppStaff",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{"type": "text", "id": "AppStaffLabel", "fill": "#8B8B90", "content": "Nhân viên phục vụ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "AppStaffSelected", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#22C55E"}, "cornerRadius": 12, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "AppStaffLeft", "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "AppStaffAvatar", "width": 36, "height": 36, "fill": "#22C55E30", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "AppStaffInitial", "fill": "#22C55E", "content": "H", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "AppStaffInfo", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "AppStaffName", "fill": "#FFFFFF", "content": "Hương", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "AppStaffRating", "gap": 4, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "AppStaffStar", "width": 12, "height": 12, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "text", "id": "AppStaffRatingT", "fill": "#8B8B90", "content": "4.9 • 5 năm KN", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "icon_font", "id": "AppStaffCheck", "width": 20, "height": 20, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{"type": "frame", "id": "AppDivider", "width": "fill_container", "height": 1, "fill": "#1F1F23"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "AppSummary",
|
||||
"width": "fill_container",
|
||||
"fill": "#22C55E10",
|
||||
"cornerRadius": 12,
|
||||
"padding": 14,
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "AppSumIcon", "width": 20, "height": 20, "iconFontName": "calendar-check", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "AppSumText", "fill": "#22C55E", "content": "T3, 11/02 lúc 14:00 • NV Hương", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]
|
||||
},
|
||||
{"type": "frame", "id": "AppActions", "width": "fill_container", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "AppCancel", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "AppCancelT", "fill": "#ADADB0", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "AppConfirm", "width": "fill_container", "height": 48, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "AppConfirmIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFF"}, {"type": "text", "id": "AppConfirmT", "fill": "#FFF", "content": "Xác nhận đặt lịch", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
116
pencil-design/src/pages/tPOS/pos/spa/workflow/service-combo.pen
Normal file
116
pencil-design/src/pages/tPOS/pos/spa/workflow/service-combo.pen
Normal file
@@ -0,0 +1,116 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ServiceComboDialog",
|
||||
"name": "Dialog/Service Combo",
|
||||
"reusable": true,
|
||||
"width": 1440,
|
||||
"height": 900,
|
||||
"fill": "#0A0A0B80",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ComboModal",
|
||||
"width": 480,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 28,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ComboHeader",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "ComboHeaderLeft", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "ComboIcon", "width": 44, "height": 44, "fill": "#EC48991A", "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ComboIconI", "width": 22, "height": 22, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#EC4899"}
|
||||
]},
|
||||
{"type": "frame", "id": "ComboTitleBlock", "layout": "vertical", "gap": 2, "children": [
|
||||
{"type": "text", "id": "ComboTitle", "fill": "#FFFFFF", "content": "Combo dịch vụ", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
|
||||
{"type": "text", "id": "ComboDesc", "fill": "#8B8B90", "content": "Tiết kiệm đến 30%", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "ComboClose", "width": 32, "height": 32, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "ComboCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#8B8B90"}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ComboList",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "Combo1", "width": "fill_container", "fill": "#EC489910", "stroke": {"thickness": 2, "fill": "#EC4899"}, "cornerRadius": 16, "padding": 16, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "Combo1Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "flex-start", "children": [
|
||||
{"type": "frame", "id": "Combo1Left", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "Combo1NameRow", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Combo1Name", "fill": "#FFFFFF", "content": "Combo Relax", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "Combo1Badge", "fill": "#EC4899", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "Combo1BadgeT", "fill": "#FFF", "content": "HOT", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}]}
|
||||
]},
|
||||
{"type": "text", "id": "Combo1Duration", "fill": "#8B8B90", "content": "120 phút", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "icon_font", "id": "Combo1Check", "width": 22, "height": 22, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#EC4899"}
|
||||
]},
|
||||
{"type": "frame", "id": "Combo1Services", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [
|
||||
{"type": "frame", "id": "Combo1Svc1", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "Combo1Svc1I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "Combo1Svc1T", "fill": "#ADADB0", "content": "Massage toàn thân 60'", "fontFamily": "Roboto", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "Combo1Svc2", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "Combo1Svc2I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "Combo1Svc2T", "fill": "#ADADB0", "content": "Xông hơi 30'", "fontFamily": "Roboto", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "Combo1Svc3", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "Combo1Svc3I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "Combo1Svc3T", "fill": "#ADADB0", "content": "Đắp mặt nạ 30'", "fontFamily": "Roboto", "fontSize": 13}]}
|
||||
]},
|
||||
{"type": "frame", "id": "Combo1Price", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "Combo1PriceLeft", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Combo1OldPrice", "fill": "#6B6B70", "content": "750,000₫", "fontFamily": "Roboto", "fontSize": 13, "textDecoration": "line-through"},
|
||||
{"type": "frame", "id": "Combo1Save", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "Combo1SaveT", "fill": "#22C55E", "content": "-20%", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}
|
||||
]},
|
||||
{"type": "text", "id": "Combo1NewPrice", "fill": "#EC4899", "content": "599,000₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "Combo2", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 16, "padding": 16, "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "Combo2Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "Combo2Left", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "frame", "id": "Combo2NameRow", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "Combo2Name", "fill": "#FFFFFF", "content": "Combo Premium", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "Combo2Badge", "fill": "#F59E0B", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "Combo2BadgeT", "fill": "#000", "content": "VIP", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}]}
|
||||
]},
|
||||
{"type": "text", "id": "Combo2Duration", "fill": "#8B8B90", "content": "180 phút • 5 dịch vụ", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "Combo2PriceBlock", "layout": "vertical", "gap": 2, "alignItems": "flex-end", "children": [
|
||||
{"type": "text", "id": "Combo2OldPrice", "fill": "#6B6B70", "content": "1,200,000₫", "fontFamily": "Roboto", "fontSize": 11, "textDecoration": "line-through"},
|
||||
{"type": "text", "id": "Combo2NewPrice", "fill": "#FFFFFF", "content": "899,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "Combo3", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 16, "padding": 16, "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "Combo3Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "Combo3Left", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "Combo3Name", "fill": "#FFFFFF", "content": "Combo Basic", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "500"},
|
||||
{"type": "text", "id": "Combo3Duration", "fill": "#8B8B90", "content": "60 phút • 2 dịch vụ", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "Combo3PriceBlock", "layout": "vertical", "gap": 2, "alignItems": "flex-end", "children": [
|
||||
{"type": "text", "id": "Combo3OldPrice", "fill": "#6B6B70", "content": "400,000₫", "fontFamily": "Roboto", "fontSize": 11, "textDecoration": "line-through"},
|
||||
{"type": "text", "id": "Combo3NewPrice", "fill": "#FFFFFF", "content": "299,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{"type": "frame", "id": "ComboActions", "width": "fill_container", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "ComboCustomize", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "ComboCustomizeIcon", "width": 16, "height": 16, "iconFontName": "sliders", "iconFontFamily": "lucide", "fill": "#ADADB0"}, {"type": "text", "id": "ComboCustomizeT", "fill": "#ADADB0", "content": "Tùy chỉnh", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "ComboConfirm", "width": "fill_container", "height": 48, "fill": "#EC4899", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "ComboConfirmIcon", "width": 18, "height": 18, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#FFF"}, {"type": "text", "id": "ComboConfirmT", "fill": "#FFF", "content": "Chọn Combo Relax", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
342
pencil-design/src/pages/tPOS/pos/spa/workflow/spa-journey.pen
Normal file
342
pencil-design/src/pages/tPOS/pos/spa/workflow/spa-journey.pen
Normal file
@@ -0,0 +1,342 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SpaJourney1",
|
||||
"name": "Spa Journey/1-Booking",
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SJ1Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 28,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "SJ1Step", "fill": "#22C55E20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "SJ1StepT", "fill": "#22C55E", "content": "Bước 1/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "SJ1Icon", "width": 64, "height": 64, "fill": "#22C55E1A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SJ1IconI", "width": 28, "height": 28, "iconFontName": "calendar-check", "iconFontFamily": "lucide", "fill": "#22C55E"}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ1Title", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SJ1TitleT", "fill": "#FFFFFF", "content": "Xác nhận lịch hẹn", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SJ1Desc", "fill": "#8B8B90", "content": "Chào mừng chị Ngọc Anh!", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ1Booking", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "SJ1BookingRow1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SJ1BookingL1", "fill": "#8B8B90", "content": "Dịch vụ", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "SJ1BookingV1", "fill": "#FFFFFF", "content": "Combo Relax 120'", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "SJ1BookingRow2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SJ1BookingL2", "fill": "#8B8B90", "content": "Ngày giờ", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "SJ1BookingV2", "fill": "#22C55E", "content": "Hôm nay, 14:00", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "SJ1BookingRow3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SJ1BookingL3", "fill": "#8B8B90", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "SJ1BookingV3", "fill": "#FFFFFF", "content": "Chị Hương ⭐ 4.9", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "SJ1Divider", "width": "fill_container", "height": 1, "fill": "#22C55E30"},
|
||||
{"type": "frame", "id": "SJ1BookingRow4", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SJ1BookingL4", "fill": "#8B8B90", "content": "Giá dịch vụ", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "SJ1BookingV4", "fill": "#22C55E", "content": "599,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ1Actions", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "SJ1Change", "width": 48, "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "SJ1ChangeI", "width": 18, "height": 18, "iconFontName": "edit-3", "iconFontFamily": "lucide", "fill": "#ADADB0"}]},
|
||||
{"type": "frame", "id": "SJ1Confirm", "width": "fill_container", "height": 48, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SJ1ConfirmI", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "SJ1ConfirmT", "fill": "#FFFFFF", "content": "Check-in ngay", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SpaJourney2",
|
||||
"name": "Spa Journey/2-CheckIn",
|
||||
"x": 540,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SJ2Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": 32,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "SJ2Step", "fill": "#3B82F620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "SJ2StepT", "fill": "#3B82F6", "content": "Bước 2/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "SJ2Icon", "width": 72, "height": 72, "fill": "#3B82F61A", "cornerRadius": 36, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SJ2IconI", "width": 32, "height": 32, "iconFontName": "user-check", "iconFontFamily": "lucide", "fill": "#3B82F6"}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ2Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SJ2TitleT", "fill": "#FFFFFF", "content": "Check-in thành công!", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SJ2Desc", "fill": "#8B8B90", "content": "Vui lòng vào phòng thay đồ", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ2Staff", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 14, "padding": 16, "gap": 14, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SJ2StaffAvatar", "width": 56, "height": 56, "fill": "#EC489930", "cornerRadius": 28, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SJ2StaffInitial", "fill": "#EC4899", "content": "H", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "SJ2StaffInfo", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "SJ2StaffName", "fill": "#FFFFFF", "content": "Chị Hương", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "frame", "id": "SJ2StaffRating", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SJ2StaffStar", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "text", "id": "SJ2StaffRatingT", "fill": "#8B8B90", "content": "4.9 • 5 năm kinh nghiệm", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "text", "id": "SJ2StaffStatus", "fill": "#22C55E", "content": "Sẵn sàng phục vụ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ2Room", "width": "fill_container", "fill": "#EC489910", "cornerRadius": 10, "padding": 12, "gap": 10, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SJ2RoomI", "width": 18, "height": 18, "iconFontName": "door-open", "iconFontFamily": "lucide", "fill": "#EC4899"},
|
||||
{"type": "text", "id": "SJ2RoomT", "fill": "#EC4899", "content": "Phòng VIP 03 đã sẵn sàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ2Next", "width": "fill_container", "height": 48, "fill": "#3B82F6", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SJ2NextT", "fill": "#FFFFFF", "content": "Bắt đầu dịch vụ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
|
||||
{"type": "icon_font", "id": "SJ2NextI", "width": 16, "height": 16, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#FFFFFF"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SpaJourney3",
|
||||
"name": "Spa Journey/3-Service",
|
||||
"x": 1080,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SJ3Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 28,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "SJ3Step", "fill": "#EC489920", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "SJ3StepT", "fill": "#EC4899", "content": "Bước 3/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "SJ3Timer", "width": "fill_container", "fill": "#EC48991A", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SJ3TimerLabel", "fill": "#EC4899", "content": "ĐANG THỰC HIỆN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SJ3TimerValue", "fill": "#EC4899", "content": "45:23", "fontFamily": "Roboto", "fontSize": 44, "fontWeight": "700"},
|
||||
{"type": "text", "id": "SJ3TimerRemain", "fill": "#8B8B90", "content": "Còn 75 phút", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ3Progress", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [
|
||||
{"type": "frame", "id": "SJ3Service1", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SJ3Service1L", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SJ3Service1Check", "width": 16, "height": 16, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"},
|
||||
{"type": "text", "id": "SJ3Service1N", "fill": "#FFFFFF", "content": "Massage đầu vai gáy", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "SJ3Service1S", "fill": "#22C55E", "content": "Hoàn thành", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ3Service2", "width": "fill_container", "fill": "#EC489910", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SJ3Service2L", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SJ3Service2Wait", "width": 16, "height": 16, "iconFontName": "loader-2", "iconFontFamily": "lucide", "fill": "#EC4899"},
|
||||
{"type": "text", "id": "SJ3Service2N", "fill": "#FFFFFF", "content": "Massage toàn thân", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "SJ3Service2S", "fill": "#EC4899", "content": "Đang thực hiện", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ3Service3", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SJ3Service3L", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SJ3Service3Wait", "width": 16, "height": 16, "iconFontName": "circle", "iconFontFamily": "lucide", "fill": "#6B6B70"},
|
||||
{"type": "text", "id": "SJ3Service3N", "fill": "#8B8B90", "content": "Xông hơi + Đắp mặt nạ", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "text", "id": "SJ3Service3S", "fill": "#6B6B70", "content": "Chờ", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ3Actions", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "SJ3Add", "width": "fill_container", "height": 44, "fill": "#2A2A2E", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SJ3AddI", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#ADADB0"},
|
||||
{"type": "text", "id": "SJ3AddT", "fill": "#ADADB0", "content": "Thêm dịch vụ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ3Drink", "width": "fill_container", "height": 44, "fill": "#2A2A2E", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SJ3DrinkI", "width": 16, "height": 16, "iconFontName": "cup-soda", "iconFontFamily": "lucide", "fill": "#ADADB0"},
|
||||
{"type": "text", "id": "SJ3DrinkT", "fill": "#ADADB0", "content": "Gọi nước", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SpaJourney4",
|
||||
"name": "Spa Journey/4-Upsell",
|
||||
"x": 1620,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SJ4Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 20,
|
||||
"padding": 28,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "SJ4Step", "fill": "#8B5CF620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "SJ4StepT", "fill": "#8B5CF6", "content": "Bước 4/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "SJ4Icon", "width": 64, "height": 64, "fill": "#8B5CF61A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SJ4IconI", "width": 28, "height": 28, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#8B5CF6"}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ4Title", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SJ4TitleT", "fill": "#FFFFFF", "content": "Gợi ý cho bạn", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SJ4Desc", "fill": "#8B8B90", "content": "Nâng cấp trải nghiệm của bạn", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ4Offers", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "SJ4Offer1", "width": "fill_container", "fill": "#8B5CF610", "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "SJ4Offer1Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SJ4Offer1L", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SJ4Offer1N", "fill": "#FFFFFF", "content": "Đắp mặt nạ cao cấp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "frame", "id": "SJ4Offer1Badge", "fill": "#22C55E", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "SJ4Offer1BadgeT", "fill": "#FFF", "content": "-30%", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}]}
|
||||
]},
|
||||
{"type": "icon_font", "id": "SJ4Offer1Check", "width": 18, "height": 18, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#8B5CF6"}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ4Offer1Price", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SJ4Offer1Old", "fill": "#6B6B70", "content": "150,000₫", "fontFamily": "Roboto", "fontSize": 12, "textDecoration": "line-through"},
|
||||
{"type": "text", "id": "SJ4Offer1New", "fill": "#8B5CF6", "content": "99,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ4Offer2", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SJ4Offer2L", "layout": "vertical", "gap": 4, "children": [
|
||||
{"type": "text", "id": "SJ4Offer2N", "fill": "#FFFFFF", "content": "Thêm 30 phút massage", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "SJ4Offer2P", "fill": "#8B8B90", "content": "+120,000₫", "fontFamily": "Roboto", "fontSize": 13}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ4Actions", "width": "fill_container", "gap": 10, "children": [
|
||||
{"type": "frame", "id": "SJ4Skip", "width": "fill_container", "height": 44, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SJ4SkipT", "fill": "#ADADB0", "content": "Bỏ qua", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "SJ4Add", "width": "fill_container", "height": 44, "fill": "#8B5CF6", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SJ4AddI", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "SJ4AddT", "fill": "#FFFFFF", "content": "Thêm +99,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SpaJourney5",
|
||||
"name": "Spa Journey/5-Payment",
|
||||
"x": 2160,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SJ5Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"padding": 24,
|
||||
"children": [
|
||||
{"type": "frame", "id": "SJ5Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SJ5Step", "fill": "#FF5C0020", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "SJ5StepT", "fill": "#FF5C00", "content": "Bước 5/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "text", "id": "SJ5Time", "fill": "#8B8B90", "content": "120 phút", "fontFamily": "Roboto", "fontSize": 12}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ5Title", "width": "fill_container", "children": [{"type": "text", "id": "SJ5TitleT", "fill": "#FFFFFF", "content": "Tính tiền", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "SJ5Bill", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "SJ5BillRow1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SJ5BillL1", "fill": "#8B8B90", "content": "Combo Relax 120'", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "SJ5BillV1", "fill": "#FFFFFF", "content": "599,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "SJ5BillRow2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SJ5BillL2", "fill": "#8B8B90", "content": "Đắp mặt nạ cao cấp", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "SJ5BillV2", "fill": "#FFFFFF", "content": "99,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "SJ5BillRow3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SJ5BillL3", "fill": "#8B8B90", "content": "Trà hoa cúc", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "SJ5BillV3", "fill": "#FFFFFF", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ5Summary", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
|
||||
{"type": "frame", "id": "SJ5Sub", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SJ5SubL", "fill": "#8B8B90", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "SJ5SubV", "fill": "#FFFFFF", "content": "733,000₫", "fontFamily": "Roboto", "fontSize": 13}]},
|
||||
{"type": "frame", "id": "SJ5Loyalty", "width": "fill_container", "justifyContent": "space_between", "children": [
|
||||
{"type": "frame", "id": "SJ5LoyaltyL", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SJ5LoyaltyI", "width": 12, "height": 12, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"}, {"type": "text", "id": "SJ5LoyaltyT", "fill": "#14B8A6", "content": "Dùng 200 điểm", "fontFamily": "Roboto", "fontSize": 13}]},
|
||||
{"type": "text", "id": "SJ5LoyaltyV", "fill": "#14B8A6", "content": "-20,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ5DividerB", "width": "fill_container", "height": 1, "fill": "#2A2A2E"},
|
||||
{"type": "frame", "id": "SJ5Total", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SJ5TotalL", "fill": "#FFFFFF", "content": "Tổng thanh toán", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "SJ5TotalV", "fill": "#FF5C00", "content": "713,000₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ5Pay", "width": "fill_container", "height": 50, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SJ5PayI", "width": 18, "height": 18, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "SJ5PayT", "fill": "#FFFFFF", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SpaJourney6",
|
||||
"name": "Spa Journey/6-Feedback",
|
||||
"x": 2700,
|
||||
"width": 440,
|
||||
"height": 700,
|
||||
"fill": "#0A0A0B",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SJ6Modal",
|
||||
"width": 380,
|
||||
"fill": "#111113",
|
||||
"cornerRadius": 24,
|
||||
"stroke": {"thickness": 1, "fill": "#1F1F23"},
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": 36,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "SJ6Step", "fill": "#14B8A620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "SJ6StepT", "fill": "#14B8A6", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "SJ6Icon", "width": 88, "height": 88, "fill": "#14B8A61A", "cornerRadius": 44, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SJ6IconI", "width": 40, "height": 40, "iconFontName": "heart", "iconFontFamily": "lucide", "fill": "#14B8A6"}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ6Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SJ6TitleT", "fill": "#FFFFFF", "content": "Cảm ơn chị Ngọc Anh!", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
|
||||
{"type": "text", "id": "SJ6Desc", "fill": "#8B8B90", "content": "Hẹn gặp lại lần sau 💆♀️", "fontFamily": "Roboto", "fontSize": 14}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ6Points", "width": "fill_container", "fill": "#14B8A610", "cornerRadius": 14, "padding": 18, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "frame", "id": "SJ6PointsRow", "gap": 8, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SJ6PointsI", "width": 18, "height": 18, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"},
|
||||
{"type": "text", "id": "SJ6PointsLabel", "fill": "#14B8A6", "content": "Điểm tích lũy", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "text", "id": "SJ6PointsValue", "fill": "#14B8A6", "content": "+71 điểm", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"},
|
||||
{"type": "text", "id": "SJ6PointsTotal", "fill": "#8B8B90", "content": "Tổng: 3,891 điểm", "fontFamily": "Roboto", "fontSize": 11}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ6Rating", "width": "fill_container", "layout": "vertical", "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SJ6RatingLabel", "fill": "#8B8B90", "content": "Đánh giá dịch vụ hôm nay", "fontFamily": "Roboto", "fontSize": 12},
|
||||
{"type": "frame", "id": "SJ6Stars", "gap": 10, "children": [
|
||||
{"type": "icon_font", "id": "SJ6Star1", "width": 32, "height": 32, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SJ6Star2", "width": 32, "height": 32, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SJ6Star3", "width": 32, "height": 32, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SJ6Star4", "width": 32, "height": 32, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
|
||||
{"type": "icon_font", "id": "SJ6Star5", "width": 32, "height": 32, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}
|
||||
]},
|
||||
{"type": "text", "id": "SJ6RatingText", "fill": "#F59E0B", "content": "Tuyệt vời!", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]},
|
||||
{"type": "frame", "id": "SJ6Done", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
|
||||
{"type": "text", "id": "SJ6DoneT", "fill": "#FFFFFF", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user