Ivan/petsHero-AI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
petsHero-AI/design/pencil-app-client.pen
ivan cb8f9dc085 隔离：最终版本
2026-05-08 19:21:17 +08:00

5416 lines
176 KiB
Plaintext
Raw Blame History

{
"version": "2.11",
"children": [
{
"type": "frame",
"id": "bi8Au",
"x": 0,
"y": 0,
"name": "AI Video App",
"clip": true,
"width": 390,
"height": 844,
"fill": "#FAFAFA",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "yws6A",
"name": "statusBar",
"width": "fill_container",
"height": 40,
"fill": "#FFFFFF",
"padding": [
0,
12,
0,
20
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "SJ8uY",
"fill": "#18181B",
"content": "9:41",
"fontFamily": "Inter",
"fontSize": 13,
"fontWeight": "600"
},
{
"type": "frame",
"id": "Ngk0s",
"gap": 6,
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "Su7Qu",
"width": 21,
"height": 15,
"iconFontName": "signal",
"iconFontFamily": "lucide",
"fill": "#18181B"
},
{
"type": "icon_font",
"id": "6pO9Y",
"width": 21,
"height": 15,
"iconFontName": "wifi",
"iconFontFamily": "lucide",
"fill": "#18181B"
},
{
"type": "icon_font",
"id": "JKlyx",
"width": 30,
"height": 15,
"iconFontName": "battery-medium",
"iconFontFamily": "lucide",
"fill": "#18181B"
}
]
}
]
},
{
"type": "frame",
"id": "C5k5y",
"name": "topNav",
"width": "fill_container",
"height": 56,
"fill": "#FFFFFF",
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000008",
"offset": {
"x": 0,
"y": 2
},
"blur": 8
},
"padding": [
0,
20
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "MnEWE",
"name": "navTitle",
"fill": "#18181B",
"content": "PetsHero AI",
"fontFamily": "Plus Jakarta Sans",
"fontSize": 20,
"fontWeight": "700"
},
{
"type": "frame",
"id": "k3CQZ",
"name": "creditsBadge",
"height": 32,
"fill": "#8B5CF620",
"cornerRadius": 14,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#8B5CF620",
"offset": {
"x": 0,
"y": 2
},
"blur": 6
},
"gap": 6,
"padding": [
6,
12
],
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "EWt3i",
"name": "creditsIcon",
"width": 16,
"height": 16,
"iconFontName": "sparkles",
"iconFontFamily": "lucide",
"fill": "#8B5CF6"
},
{
"type": "text",
"id": "lqmbX",
"name": "creditsText",
"fill": "#8B5CF6",
"content": "1,280",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "oJ7P2",
"name": "contentArea",
"width": "fill_container",
"height": "fill_container",
"fill": "#FAFAFA",
"layout": "vertical",
"gap": 16,
"padding": [
0,
20,
24,
20
],
"children": [
{
"type": "frame",
"id": "bK6o6",
"name": "tabRow",
"width": "fill_container",
"height": 40,
"gap": 8,
"padding": [
4,
0
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "M6pir",
"name": "tabAll",
"height": 32,
"fill": "#8B5CF6",
"cornerRadius": 20,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#8B5CF630",
"offset": {
"x": 0,
"y": 2
},
"blur": 4
},
"gap": 4,
"padding": [
6,
14
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "dKgTN",
"name": "tabAllText",
"fill": "#FFFFFF",
"content": "All",
"fontFamily": "Inter",
"fontSize": 13,
"fontWeight": "600"
}
]
},
{
"type": "frame",
"id": "cqBRL",
"name": "tabTrending",
"height": 32,
"fill": "#F4F4F5",
"cornerRadius": 20,
"stroke": {
"thickness": 1,
"fill": "#E4E4E7"
},
"gap": 4,
"padding": [
6,
14
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "eLVLh",
"name": "tabTrendingText",
"fill": "#71717A",
"content": "Trending",
"fontFamily": "Inter",
"fontSize": 13,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "Bfa7U",
"name": "tabNew",
"height": 32,
"fill": "#F4F4F5",
"cornerRadius": 20,
"stroke": {
"thickness": 1,
"fill": "#E4E4E7"
},
"gap": 4,
"padding": [
6,
14
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "JEsyS",
"name": "tabNewText",
"fill": "#71717A",
"content": "New",
"fontFamily": "Inter",
"fontSize": 13,
"fontWeight": "500"
}
]
}
]
},
{
"type": "frame",
"id": "2AP4w",
"name": "gridContainer",
"width": "fill_container",
"layout": "vertical",
"gap": 16,
"children": [
{
"type": "frame",
"id": "Ec101",
"name": "row1",
"width": "fill_container",
"gap": 16,
"justifyContent": "center",
"children": [
{
"type": "frame",
"id": "CthJD",
"name": "card1",
"clip": true,
"width": 165,
"height": 248,
"fill": "#00000000",
"cornerRadius": 24,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000D",
"offset": {
"x": 0,
"y": 4
},
"blur": 12
},
"layout": "none",
"children": [
{
"type": "frame",
"id": "Q8BZG",
"x": 0,
"y": 0,
"name": "card1Top",
"metadata": {
"type": "unsplash",
"username": "marcuslcramer",
"link": "https://unsplash.com/@marcuslcramer",
"author": "Marcus Cramer"
},
"width": 165,
"height": 248,
"fill": {
"type": "image",
"enabled": true,
"url": "https://images.unsplash.com/photo-1513350660342-816d92510adf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4NDM0ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NzMxNTYyMTR8&ixlib=rb-4.1.0&q=80&w=1080",
"mode": "fill"
},
"layout": "none",
"children": [
{
"type": "frame",
"id": "C8ERr",
"x": 58.5,
"y": 100,
"name": "card1PlayBtn",
"enabled": false,
"width": 48,
"height": 48,
"fill": "#FFFFFFE6",
"cornerRadius": 24,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000020",
"offset": {
"x": 0,
"y": 2
},
"blur": 8
},
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "GL9ZN",
"name": "card1PlayIcon",
"width": 24,
"height": 24,
"iconFontName": "play",
"iconFontFamily": "lucide",
"fill": "#18181B"
}
]
},
{
"type": "frame",
"id": "XhQqY",
"x": 103,
"y": 12,
"name": "card1Credits",
"height": 24,
"fill": "#00000099",
"cornerRadius": 14,
"gap": 4,
"padding": [
4,
8
],
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "nREv6",
"name": "card1CreditsIcon",
"width": 12,
"height": 12,
"iconFontName": "sparkles",
"iconFontFamily": "lucide",
"fill": "#FFFFFF"
},
{
"type": "text",
"id": "hMnf5",
"name": "card1CreditsText",
"fill": "#FFFFFF",
"content": "50",
"fontFamily": "Inter",
"fontSize": 11,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "8CMbL",
"x": 26,
"y": 208,
"name": "card1Btn",
"width": 114,
"height": 24,
"fill": "#8b5cf6cc",
"cornerRadius": 12,
"stroke": {
"thickness": 1,
"fill": "#8B5CF6"
},
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#8B5CF640",
"offset": {
"x": 0,
"y": 2
},
"blur": 6
},
"padding": [
0,
10
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "UOYDo",
"name": "card1BtnText",
"fill": "#FFFFFF",
"content": "Generate Similar",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "BRpaI",
"name": "card2",
"clip": true,
"width": 165,
"height": 248,
"fill": "#00000000",
"cornerRadius": 24,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000D",
"offset": {
"x": 0,
"y": 4
},
"blur": 12
},
"layout": "none",
"children": [
{
"type": "frame",
"id": "NlQjP",
"x": 0,
"y": 0,
"name": "card1Top",
"width": 165,
"height": 248,
"fill": {
"type": "image",
"enabled": true,
"url": "images/generated-1773156213563.png",
"mode": "fill"
},
"layout": "none",
"children": [
{
"type": "frame",
"id": "u4Uhx",
"x": 58.5,
"y": 100,
"name": "card1PlayBtn",
"enabled": false,
"width": 48,
"height": 48,
"fill": "#FFFFFFE6",
"cornerRadius": 24,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000020",
"offset": {
"x": 0,
"y": 2
},
"blur": 8
},
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "NVypk",
"name": "card1PlayIcon",
"width": 24,
"height": 24,
"iconFontName": "play",
"iconFontFamily": "lucide",
"fill": "#18181B"
}
]
},
{
"type": "frame",
"id": "PMX4R",
"x": 103,
"y": 12,
"name": "card1Credits",
"height": 24,
"fill": "#00000099",
"cornerRadius": 14,
"gap": 4,
"padding": [
4,
8
],
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "Rr2KZ",
"name": "card1CreditsIcon",
"width": 12,
"height": 12,
"iconFontName": "sparkles",
"iconFontFamily": "lucide",
"fill": "#FFFFFF"
},
{
"type": "text",
"id": "SxYvO",
"name": "card1CreditsText",
"fill": "#FFFFFF",
"content": "50",
"fontFamily": "Inter",
"fontSize": 11,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "5Hefn",
"x": 26,
"y": 208,
"name": "card1Btn",
"width": 114,
"height": 24,
"fill": "#8B5CF6CC",
"cornerRadius": 12,
"stroke": {
"thickness": 1,
"fill": "#8B5CF6"
},
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#8B5CF640",
"offset": {
"x": 0,
"y": 2
},
"blur": 6
},
"padding": [
0,
10
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "VR6T8",
"name": "card1BtnText",
"fill": "#FFFFFF",
"content": "Generate Similar",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "600"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "q7PGB",
"name": "row2",
"width": "fill_container",
"gap": 16,
"justifyContent": "center",
"children": [
{
"type": "frame",
"id": "5dW6M",
"name": "card3",
"clip": true,
"width": 165,
"height": 248,
"fill": "#00000000",
"cornerRadius": 24,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000D",
"offset": {
"x": 0,
"y": 4
},
"blur": 12
},
"layout": "none",
"children": [
{
"type": "frame",
"id": "uJwF2",
"x": 0,
"y": 0,
"name": "card3Top",
"width": 165,
"height": 248,
"fill": {
"type": "image",
"enabled": true,
"url": "images/generated-1773156252029.png",
"mode": "fill"
},
"layout": "none",
"children": [
{
"type": "frame",
"id": "6OLca",
"x": 58.5,
"y": 100,
"name": "card3PlayBtn",
"enabled": false,
"width": 48,
"height": 48,
"fill": "#FFFFFFE6",
"cornerRadius": 24,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000020",
"offset": {
"x": 0,
"y": 2
},
"blur": 8
},
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "0M694",
"name": "card3PlayIcon",
"width": 24,
"height": 24,
"iconFontName": "play",
"iconFontFamily": "lucide",
"fill": "#18181B"
}
]
},
{
"type": "frame",
"id": "eeJZ9",
"x": 103,
"y": 12,
"name": "card3Credits",
"height": 24,
"fill": "#00000099",
"cornerRadius": 14,
"gap": 4,
"padding": [
4,
8
],
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "f0no7",
"name": "card3CreditsIcon",
"width": 12,
"height": 12,
"iconFontName": "sparkles",
"iconFontFamily": "lucide",
"fill": "#FFFFFF"
},
{
"type": "text",
"id": "c0zKx",
"name": "card3CreditsText",
"fill": "#FFFFFF",
"content": "80",
"fontFamily": "Inter",
"fontSize": 11,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "aMSxC",
"x": 26,
"y": 208,
"name": "card3Btn",
"width": 114,
"height": 24,
"fill": "#8B5CF6CC",
"cornerRadius": 12,
"stroke": {
"thickness": 1,
"fill": "#8B5CF6"
},
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#8B5CF640",
"offset": {
"x": 0,
"y": 2
},
"blur": 6
},
"padding": [
0,
10
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "DEvyH",
"name": "card3BtnText",
"fill": "#FFFFFF",
"content": "Generate Similar",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "ObYn3",
"name": "card4",
"clip": true,
"width": 165,
"height": 248,
"fill": "#00000000",
"cornerRadius": 24,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000D",
"offset": {
"x": 0,
"y": 4
},
"blur": 12
},
"layout": "none",
"children": [
{
"type": "frame",
"id": "FUx1Q",
"x": 0,
"y": 0,
"name": "card1Top",
"width": 165,
"height": 248,
"fill": {
"type": "image",
"enabled": true,
"url": "images/generated-1773156289353.png",
"mode": "fill"
},
"layout": "none",
"children": [
{
"type": "frame",
"id": "zIoMr",
"x": 58.5,
"y": 100,
"name": "card1PlayBtn",
"enabled": false,
"width": 48,
"height": 48,
"fill": "#FFFFFFE6",
"cornerRadius": 24,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000020",
"offset": {
"x": 0,
"y": 2
},
"blur": 8
},
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "tK64P",
"name": "card1PlayIcon",
"width": 24,
"height": 24,
"iconFontName": "play",
"iconFontFamily": "lucide",
"fill": "#18181B"
}
]
},
{
"type": "frame",
"id": "jFVjQ",
"x": 103,
"y": 12,
"name": "card1Credits",
"height": 24,
"fill": "#00000099",
"cornerRadius": 14,
"gap": 4,
"padding": [
4,
8
],
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "fnoUt",
"name": "card1CreditsIcon",
"width": 12,
"height": 12,
"iconFontName": "sparkles",
"iconFontFamily": "lucide",
"fill": "#FFFFFF"
},
{
"type": "text",
"id": "bkPE5",
"name": "card1CreditsText",
"fill": "#FFFFFF",
"content": "120",
"fontFamily": "Inter",
"fontSize": 11,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "dHeWm",
"x": 26,
"y": 208,
"name": "card1Btn",
"width": 114,
"height": 24,
"fill": "#8B5CF6CC",
"cornerRadius": 12,
"stroke": {
"thickness": 1,
"fill": "#8B5CF6"
},
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#8B5CF640",
"offset": {
"x": 0,
"y": 2
},
"blur": 6
},
"padding": [
0,
10
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "HWGSC",
"name": "card1BtnText",
"fill": "#FFFFFF",
"content": "Generate Similar",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "600"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "1E5nB",
"name": "row3",
"width": "fill_container",
"gap": 16,
"justifyContent": "center",
"children": [
{
"type": "frame",
"id": "vClnh",
"name": "card5",
"clip": true,
"width": 165,
"height": 248,
"fill": "#00000000",
"cornerRadius": 24,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000D",
"offset": {
"x": 0,
"y": 4
},
"blur": 12
},
"layout": "none",
"children": [
{
"type": "frame",
"id": "ZCkHy",
"x": 0,
"y": 0,
"name": "card1Top",
"width": 165,
"height": 248,
"fill": {
"type": "image",
"enabled": true,
"url": "images/generated-1773156316903.png",
"mode": "fill"
},
"layout": "none",
"children": [
{
"type": "frame",
"id": "AckkY",
"x": 58.5,
"y": 100,
"name": "card1PlayBtn",
"enabled": false,
"width": 48,
"height": 48,
"fill": "#FFFFFFE6",
"cornerRadius": 24,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000020",
"offset": {
"x": 0,
"y": 2
},
"blur": 8
},
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "f11MA",
"name": "card1PlayIcon",
"width": 24,
"height": 24,
"iconFontName": "play",
"iconFontFamily": "lucide",
"fill": "#18181B"
}
]
},
{
"type": "frame",
"id": "ewFxH",
"x": 103,
"y": 12,
"name": "card1Credits",
"height": 24,
"fill": "#00000099",
"cornerRadius": 14,
"gap": 4,
"padding": [
4,
8
],
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "FL7O1",
"name": "card1CreditsIcon",
"width": 12,
"height": 12,
"iconFontName": "sparkles",
"iconFontFamily": "lucide",
"fill": "#FFFFFF"
},
{
"type": "text",
"id": "Fz5Rc",
"name": "card1CreditsText",
"fill": "#FFFFFF",
"content": "35",
"fontFamily": "Inter",
"fontSize": 11,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "aRh2M",
"x": 26,
"y": 208,
"name": "card1Btn",
"width": 114,
"height": 24,
"fill": "#8B5CF6CC",
"cornerRadius": 12,
"stroke": {
"thickness": 1,
"fill": "#8B5CF6"
},
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#8B5CF640",
"offset": {
"x": 0,
"y": 2
},
"blur": 6
},
"padding": [
0,
10
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "BqonJ",
"name": "card1BtnText",
"fill": "#FFFFFF",
"content": "Generate Similar",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "9DhBm",
"name": "card6",
"clip": true,
"width": 165,
"height": 248,
"fill": "#00000000",
"cornerRadius": 24,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000D",
"offset": {
"x": 0,
"y": 4
},
"blur": 12
},
"layout": "none",
"children": [
{
"type": "frame",
"id": "WqBrj",
"x": 0,
"y": 0,
"name": "card1Top",
"width": 165,
"height": 248,
"fill": {
"type": "image",
"enabled": true,
"url": "images/generated-1773156352910.png",
"mode": "fill"
},
"layout": "none",
"children": [
{
"type": "frame",
"id": "YgQME",
"x": 58.5,
"y": 100,
"name": "card1PlayBtn",
"enabled": false,
"width": 48,
"height": 48,
"fill": "#FFFFFFE6",
"cornerRadius": 24,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000020",
"offset": {
"x": 0,
"y": 2
},
"blur": 8
},
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "6F1rQ",
"name": "card1PlayIcon",
"width": 24,
"height": 24,
"iconFontName": "play",
"iconFontFamily": "lucide",
"fill": "#18181B"
}
]
},
{
"type": "frame",
"id": "Xpvb9",
"x": 103,
"y": 12,
"name": "card1Credits",
"height": 24,
"fill": "#00000099",
"cornerRadius": 14,
"gap": 4,
"padding": [
4,
8
],
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "oHhXu",
"name": "card1CreditsIcon",
"width": 12,
"height": 12,
"iconFontName": "sparkles",
"iconFontFamily": "lucide",
"fill": "#FFFFFF"
},
{
"type": "text",
"id": "m6O84",
"name": "card1CreditsText",
"fill": "#FFFFFF",
"content": "90",
"fontFamily": "Inter",
"fontSize": 11,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "5qk7r",
"x": 26,
"y": 208,
"name": "card1Btn",
"width": 114,
"height": 24,
"fill": "#8B5CF6CC",
"cornerRadius": 12,
"stroke": {
"thickness": 1,
"fill": "#8B5CF6"
},
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#8B5CF640",
"offset": {
"x": 0,
"y": 2
},
"blur": 6
},
"padding": [
0,
10
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "bEBV9",
"name": "card1BtnText",
"fill": "#FFFFFF",
"content": "Generate Similar",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "600"
}
]
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "2SAja",
"name": "bottomNav",
"width": "fill_container",
"height": 56,
"fill": "#FFFFFF",
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000A",
"offset": {
"x": 0,
"y": -4
},
"blur": 12
},
"padding": 16,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "NB1E6",
"name": "homeTab",
"width": 120,
"height": 41,
"fill": "#8B5CF6",
"cornerRadius": 26,
"layout": "vertical",
"gap": 4,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "i1MCD",
"name": "homeIcon",
"width": 18,
"height": 18,
"iconFontName": "house",
"iconFontFamily": "lucide",
"fill": "#FFFFFF"
},
{
"type": "text",
"id": "UZWIi",
"name": "homeLabel",
"fill": "#FFFFFF",
"content": "HOME",
"fontFamily": "Inter",
"fontSize": 10,
"fontWeight": "600"
}
]
},
{
"type": "frame",
"id": "5Bto3",
"name": "galleryTab",
"width": 120,
"height": 41,
"fill": "#00000000",
"cornerRadius": 26,
"layout": "vertical",
"gap": 4,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "nwW1m",
"name": "galleryIcon",
"width": 18,
"height": 18,
"iconFontName": "images",
"iconFontFamily": "lucide",
"fill": "#A1A1AA"
},
{
"type": "text",
"id": "WhC7U",
"name": "galleryLabel",
"fill": "#A1A1AA",
"content": "GALLERY",
"fontFamily": "Inter",
"fontSize": 10,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "nLNXH",
"name": "profileTab",
"width": 120,
"height": 41,
"fill": "#00000000",
"cornerRadius": 26,
"layout": "vertical",
"gap": 4,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "CovDA",
"name": "profileIcon",
"width": 18,
"height": 18,
"iconFontName": "user",
"iconFontFamily": "lucide",
"fill": "#A1A1AA"
},
{
"type": "text",
"id": "pBcjv",
"name": "profileLabel",
"fill": "#A1A1AA",
"content": "PROFILE",
"fontFamily": "Inter",
"fontSize": 10,
"fontWeight": "500"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "hpwBg",
"x": 440,
"y": 0,
"name": "Gallery Screen",
"clip": true,
"width": 390,
"height": 844,
"fill": "#FAFAFA",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "wKciK",
"name": "statusBar",
"width": "fill_container",
"height": 40,
"fill": "#FFFFFF",
"padding": [
0,
12,
0,
20
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "KbFbB",
"fill": "#18181B",
"content": "9:41",
"fontFamily": "Inter",
"fontSize": 13,
"fontWeight": "600"
},
{
"type": "frame",
"id": "APK18",
"gap": 6,
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "53xNJ",
"width": 21,
"height": 15,
"iconFontName": "signal",
"iconFontFamily": "lucide",
"fill": "#18181B"
},
{
"type": "icon_font",
"id": "ZKW2K",
"width": 21,
"height": 15,
"iconFontName": "wifi",
"iconFontFamily": "lucide",
"fill": "#18181B"
},
{
"type": "icon_font",
"id": "xRujH",
"width": 30,
"height": 15,
"iconFontName": "battery-medium",
"iconFontFamily": "lucide",
"fill": "#18181B"
}
]
}
]
},
{
"type": "frame",
"id": "EEASe",
"name": "topNav",
"width": "fill_container",
"height": 56,
"fill": "#FFFFFF",
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000008",
"offset": {
"x": 0,
"y": 2
},
"blur": 8
},
"padding": [
0,
20
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "2ZFKo",
"name": "navTitle",
"fill": "#18181B",
"content": "Gallery",
"fontFamily": "Plus Jakarta Sans",
"fontSize": 20,
"fontWeight": "700"
},
{
"type": "frame",
"id": "5yFeV",
"name": "creditsBadge",
"height": 32,
"fill": "#8B5CF620",
"cornerRadius": 14,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#8B5CF620",
"offset": {
"x": 0,
"y": 2
},
"blur": 6
},
"gap": 6,
"padding": [
6,
12
],
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "Do6yd",
"name": "creditsIcon",
"width": 16,
"height": 16,
"iconFontName": "sparkles",
"iconFontFamily": "lucide",
"fill": "#8B5CF6"
},
{
"type": "text",
"id": "4UpGk",
"name": "creditsText",
"fill": "#8B5CF6",
"content": "1,280",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "4iOnO",
"name": "contentArea",
"width": "fill_container",
"height": "fill_container",
"fill": "#FAFAFA",
"layout": "vertical",
"gap": 16,
"padding": [
0,
20,
24,
20
],
"children": [
{
"type": "frame",
"id": "vmPs1",
"name": "Retention notice",
"width": "fill_container",
"fill": {
"type": "gradient",
"gradientType": "linear",
"enabled": true,
"rotation": 135,
"size": {
"height": 1
},
"colors": [
{
"color": "#FFFBEB",
"position": 0
},
{
"color": "#FEF3C7",
"position": 1
}
]
},
"cornerRadius": 14,
"stroke": {
"align": "inside",
"thickness": 1,
"fill": "#FBBF24"
},
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#F59E0B22",
"offset": {
"x": 0,
"y": 2
},
"blur": 8
},
"layout": "vertical",
"gap": 6,
"padding": [
14,
16
],
"children": [
{
"type": "frame",
"id": "NI5YU",
"name": "row",
"width": "fill_container",
"gap": 12,
"children": [
{
"type": "icon_font",
"id": "FDa5s",
"name": "icon",
"width": 18,
"height": 18,
"iconFontName": "timer",
"iconFontFamily": "lucide",
"fill": "#D97706"
},
{
"type": "frame",
"id": "pEPL4",
"name": "col",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "text",
"id": "zU1J8",
"name": "hintText",
"fill": "#78350F",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Content is valid for 24 hours. Please s ave it before it expires",
"lineHeight": 1.4,
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "600"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "g1ePM",
"name": "gridContainer",
"width": "fill_container",
"layout": "vertical",
"gap": 16,
"children": [
{
"type": "frame",
"id": "RDTYP",
"name": "row1",
"width": "fill_container",
"gap": 16,
"justifyContent": "center",
"children": [
{
"type": "frame",
"id": "tc8IY",
"name": "card1",
"metadata": {
"type": "unsplash",
"username": "loganvoss",
"link": "https://unsplash.com/@loganvoss",
"author": "Logan Voss"
},
"clip": true,
"width": 165,
"height": 248,
"fill": {
"type": "image",
"enabled": true,
"url": "images/generated-1773156157712.png",
"mode": "fill"
},
"cornerRadius": 24,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000D",
"offset": {
"x": 0,
"y": 4
},
"blur": 12
},
"layout": "none",
"children": [
{
"type": "frame",
"id": "lThZm",
"x": 0,
"y": 176,
"name": "Card meta",
"width": 165,
"height": 72,
"fill": {
"type": "gradient",
"gradientType": "linear",
"enabled": true,
"rotation": 180,
"size": {
"height": 1
},
"colors": [
{
"color": "#00000000",
"position": 0
},
{
"color": "#000000D9",
"position": 1
}
]
},
"layout": "vertical",
"gap": 2,
"padding": [
2,
12,
6,
12
],
"justifyContent": "end",
"children": [
{
"type": "text",
"id": "3RTGn",
"fill": "#FFFFFF",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Created 2026-03-30 09:12",
"lineHeight": 1.25,
"fontFamily": "Inter",
"fontSize": 10,
"fontWeight": "500"
},
{
"type": "text",
"id": "osDVy",
"fill": "#E5E7EB",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "23h 48m left",
"lineHeight": 1.25,
"fontFamily": "Inter",
"fontSize": 9,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "OOmgD",
"name": "card2",
"metadata": {
"type": "unsplash",
"username": "europeana",
"link": "https://unsplash.com/@europeana",
"author": "Europeana"
},
"clip": true,
"width": 165,
"height": 248,
"fill": {
"type": "image",
"enabled": true,
"url": "images/generated-1773156363524.png",
"mode": "fill"
},
"cornerRadius": 24,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000D",
"offset": {
"x": 0,
"y": 4
},
"blur": 12
},
"layout": "none",
"children": [
{
"type": "frame",
"id": "fUbKb",
"x": 0,
"y": 176,
"name": "Card meta",
"width": 165,
"height": 72,
"fill": {
"type": "gradient",
"gradientType": "linear",
"enabled": true,
"rotation": 180,
"size": {
"height": 1
},
"colors": [
{
"color": "#00000000",
"position": 0
},
{
"color": "#000000D9",
"position": 1
}
]
},
"layout": "vertical",
"gap": 2,
"padding": [
2,
12,
6,
12
],
"justifyContent": "end",
"children": [
{
"type": "text",
"id": "co3Aw",
"fill": "#FFFFFF",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Created 2026-03-29 18:05",
"lineHeight": 1.25,
"fontFamily": "Inter",
"fontSize": 10,
"fontWeight": "500"
},
{
"type": "text",
"id": "Gyp3m",
"fill": "#FDE68A",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "7h 12m left",
"lineHeight": 1.25,
"fontFamily": "Inter",
"fontSize": 9,
"fontWeight": "normal"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "pfDBM",
"name": "row2",
"width": "fill_container",
"gap": 16,
"justifyContent": "center",
"children": [
{
"type": "frame",
"id": "rtx0r",
"name": "card3",
"metadata": {
"type": "unsplash",
"username": "anyachernykh",
"link": "https://unsplash.com/@anyachernykh",
"author": "Anya Chernykh"
},
"clip": true,
"width": 165,
"height": 248,
"fill": {
"type": "image",
"enabled": true,
"url": "images/generated-1773156393690.png",
"mode": "fill"
},
"cornerRadius": 24,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000D",
"offset": {
"x": 0,
"y": 4
},
"blur": 12
},
"layout": "none",
"children": [
{
"type": "frame",
"id": "UOw9c",
"x": 0,
"y": 176,
"name": "Card meta",
"width": 165,
"height": 72,
"fill": {
"type": "gradient",
"gradientType": "linear",
"enabled": true,
"rotation": 180,
"size": {
"height": 1
},
"colors": [
{
"color": "#00000000",
"position": 0
},
{
"color": "#000000D9",
"position": 1
}
]
},
"layout": "vertical",
"gap": 2,
"padding": [
2,
12,
6,
12
],
"justifyContent": "end",
"children": [
{
"type": "text",
"id": "8hHai",
"fill": "#FFFFFF",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Created 2026-03-29 02:40",
"lineHeight": 1.25,
"fontFamily": "Inter",
"fontSize": 10,
"fontWeight": "500"
},
{
"type": "text",
"id": "wg34o",
"fill": "#FCD34D",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "2h 5m left",
"lineHeight": 1.25,
"fontFamily": "Inter",
"fontSize": 9,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "5Frvd",
"name": "card4",
"metadata": {
"type": "unsplash",
"username": "ubeyonroad",
"link": "https://unsplash.com/@ubeyonroad",
"author": "ubeyonroad"
},
"clip": true,
"width": 165,
"height": 248,
"fill": {
"type": "image",
"enabled": true,
"url": "images/generated-1773134913667.png",
"mode": "fill"
},
"cornerRadius": 24,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000D",
"offset": {
"x": 0,
"y": 4
},
"blur": 12
},
"layout": "none",
"children": [
{
"type": "frame",
"id": "7D4XR",
"x": 0,
"y": 176,
"name": "Card meta",
"width": 165,
"height": 72,
"fill": {
"type": "gradient",
"gradientType": "linear",
"enabled": true,
"rotation": 180,
"size": {
"height": 1
},
"colors": [
{
"color": "#00000000",
"position": 0
},
{
"color": "#000000D9",
"position": 1
}
]
},
"layout": "vertical",
"gap": 2,
"padding": [
2,
12,
6,
12
],
"justifyContent": "end",
"children": [
{
"type": "text",
"id": "39n7h",
"fill": "#FFFFFF",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Created 2026-03-28 21:08",
"lineHeight": 1.25,
"fontFamily": "Inter",
"fontSize": 10,
"fontWeight": "500"
},
{
"type": "text",
"id": "kH3RX",
"fill": "#FCA5A5",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "32m left",
"lineHeight": 1.25,
"fontFamily": "Inter",
"fontSize": 9,
"fontWeight": "normal"
}
]
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "VI1Dg",
"name": "bottomNav",
"width": "fill_container",
"height": 56,
"fill": "#FFFFFF",
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000A",
"offset": {
"x": 0,
"y": -4
},
"blur": 12
},
"padding": 16,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "IqiVT",
"name": "homeTab",
"width": 120,
"height": 41,
"fill": "#00000000",
"cornerRadius": 26,
"layout": "vertical",
"gap": 4,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "fgjTN",
"width": 18,
"height": 18,
"iconFontName": "house",
"iconFontFamily": "lucide",
"fill": "#A1A1AA"
},
{
"type": "text",
"id": "ykp6l",
"fill": "#A1A1AA",
"content": "HOME",
"fontFamily": "Inter",
"fontSize": 10,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "FKfTO",
"name": "galleryTab",
"width": 120,
"height": 41,
"fill": "#8B5CF6",
"cornerRadius": 26,
"layout": "vertical",
"gap": 4,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "0vHHH",
"width": 18,
"height": 18,
"iconFontName": "images",
"iconFontFamily": "lucide",
"fill": "#FFFFFF"
},
{
"type": "text",
"id": "wndfA",
"fill": "#FFFFFF",
"content": "GALLERY",
"fontFamily": "Inter",
"fontSize": 10,
"fontWeight": "600"
}
]
},
{
"type": "frame",
"id": "4iQrj",
"name": "profileTab",
"width": 120,
"height": 41,
"fill": "#00000000",
"cornerRadius": 26,
"layout": "vertical",
"gap": 4,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "tsHTE",
"width": 18,
"height": 18,
"iconFontName": "user",
"iconFontFamily": "lucide",
"fill": "#A1A1AA"
},
{
"type": "text",
"id": "GikYQ",
"fill": "#A1A1AA",
"content": "PROFILE",
"fontFamily": "Inter",
"fontSize": 10,
"fontWeight": "500"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "KXeow",
"x": 900,
"y": 0,
"name": "Profile Screen",
"clip": true,
"width": 390,
"height": 844,
"fill": "#FAFAFA",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "x197g",
"name": "statusBar",
"width": "fill_container",
"height": 40,
"fill": "#FFFFFF",
"padding": [
0,
12,
0,
20
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "4ZHFM",
"fill": "#18181B",
"content": "9:41",
"fontFamily": "Inter",
"fontSize": 13,
"fontWeight": "600"
},
{
"type": "frame",
"id": "gFIN3",
"gap": 6,
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "9WtWW",
"width": 21,
"height": 15,
"iconFontName": "signal",
"iconFontFamily": "lucide",
"fill": "#18181B"
},
{
"type": "icon_font",
"id": "JMLAT",
"width": 21,
"height": 15,
"iconFontName": "wifi",
"iconFontFamily": "lucide",
"fill": "#18181B"
},
{
"type": "icon_font",
"id": "y57t2",
"width": 30,
"height": 15,
"iconFontName": "battery-medium",
"iconFontFamily": "lucide",
"fill": "#18181B"
}
]
}
]
},
{
"type": "frame",
"id": "ZE4Rm",
"x": 0,
"y": 0,
"name": "topNav",
"enabled": false,
"width": "fill_container(0)",
"height": 56,
"fill": "#FFFFFF",
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000008",
"offset": {
"x": 0,
"y": 2
},
"blur": 8
},
"padding": [
0,
20
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "XAJVJ",
"name": "navTitle",
"fill": "#18181B",
"content": "Profile",
"fontFamily": "Plus Jakarta Sans",
"fontSize": 20,
"fontWeight": "700"
},
{
"type": "frame",
"id": "JkyAf",
"name": "creditsBadge",
"height": 32,
"fill": "#8B5CF620",
"cornerRadius": 14,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#8B5CF620",
"offset": {
"x": 0,
"y": 2
},
"blur": 6
},
"gap": 6,
"padding": [
6,
12
],
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "TEZ9I",
"width": 16,
"height": 16,
"iconFontName": "sparkles",
"iconFontFamily": "lucide",
"fill": "#8B5CF6"
},
{
"type": "text",
"id": "sbbdw",
"fill": "#8B5CF6",
"content": "1,280",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "jCEqg",
"name": "contentArea",
"width": "fill_container",
"height": "fill_container",
"fill": "#FAFAFA",
"layout": "vertical",
"gap": 24,
"padding": [
0,
20,
24,
20
],
"children": [
{
"type": "frame",
"id": "UeFHl",
"name": "profileHeader",
"width": "fill_container",
"height": 220,
"layout": "vertical",
"gap": 12,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "EUNTw",
"name": "avatar",
"width": 80,
"height": 80,
"fill": "#E4E4E7",
"cornerRadius": 40,
"stroke": {
"thickness": 2,
"fill": "#8B5CF640"
},
"layout": "none",
"children": [
{
"type": "icon_font",
"id": "iq2SL",
"x": 20,
"y": 20,
"name": "avatarIcon",
"width": 40,
"height": 40,
"iconFontName": "user",
"iconFontFamily": "lucide",
"fill": "#71717A"
}
]
},
{
"type": "text",
"id": "8S5MJ",
"name": "userName",
"fill": "#18181B",
"content": "Alex Johnson",
"fontFamily": "Inter",
"fontSize": 18,
"fontWeight": "600"
},
{
"type": "frame",
"id": "dR1Sf",
"name": "uidBadge",
"fill": "#F4F4F5",
"cornerRadius": 16,
"stroke": {
"thickness": 1,
"fill": "#E4E4E7"
},
"padding": [
6,
12
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "gbir3",
"fill": "#71717A",
"content": "UID 84920133",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "500"
}
]
}
]
},
{
"type": "frame",
"id": "hOevr",
"name": "balanceSection",
"width": "fill_container",
"layout": "vertical",
"gap": 12,
"children": [
{
"type": "text",
"id": "mOfwH",
"name": "balanceLabel",
"fill": "#71717A",
"content": "AVAILABLE BALANCE",
"fontFamily": "Inter",
"fontSize": 11,
"fontWeight": "500"
},
{
"type": "frame",
"id": "AiFQO",
"name": "balanceCard",
"width": "fill_container",
"fill": "#FFFFFF",
"cornerRadius": 16,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000008",
"offset": {
"x": 0,
"y": 2
},
"blur": 8
},
"padding": [
16,
20
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "MwNHN",
"fill": "#8B5CF6",
"content": "1,280",
"fontFamily": "Inter",
"fontSize": 24,
"fontWeight": "700"
},
{
"type": "frame",
"id": "DuIYs",
"name": "rechargeBtn",
"fill": "#8B5CF6",
"cornerRadius": 12,
"gap": 6,
"padding": [
8,
14
],
"alignItems": "center",
"children": [
{
"type": "text",
"id": "VQdI5",
"fill": "#FFFFFF",
"content": "Recharge",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "600"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "h6zll",
"name": "menuSection",
"width": "fill_container",
"layout": "vertical",
"gap": 8,
"children": [
{
"type": "frame",
"id": "SLZ1a",
"name": "menuItem1",
"width": "fill_container",
"fill": "#FFFFFF",
"cornerRadius": 12,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000008",
"offset": {
"x": 0,
"y": 2
},
"blur": 6
},
"padding": [
14,
16
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "7LawH",
"fill": "#18181B",
"content": "Credit Store",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "500"
},
{
"type": "icon_font",
"id": "sSk3F",
"width": 20,
"height": 20,
"iconFontName": "chevron-right",
"iconFontFamily": "lucide",
"fill": "#A1A1AA"
}
]
},
{
"type": "frame",
"id": "FygC4",
"name": "menuItem2",
"width": "fill_container",
"fill": "#FFFFFF",
"cornerRadius": 12,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000008",
"offset": {
"x": 0,
"y": 2
},
"blur": 6
},
"padding": [
14,
16
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "coRfB",
"fill": "#18181B",
"content": "Privacy Policy",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "500"
},
{
"type": "icon_font",
"id": "F0GlP",
"width": 20,
"height": 20,
"iconFontName": "chevron-right",
"iconFontFamily": "lucide",
"fill": "#A1A1AA"
}
]
},
{
"type": "frame",
"id": "WYY7b",
"name": "menuItem3",
"width": "fill_container",
"fill": "#FFFFFF",
"cornerRadius": 12,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000008",
"offset": {
"x": 0,
"y": 2
},
"blur": 6
},
"padding": [
14,
16
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "P6isW",
"name": "textNode",
"fill": "#DC2626",
"content": "Delete Account",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "500"
},
{
"type": "icon_font",
"id": "8OWH9",
"name": "iconNode",
"width": 20,
"height": 20,
"iconFontName": "trash-2",
"iconFontFamily": "lucide",
"fill": "#DC2626"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "Ava7f",
"name": "bottomNav",
"width": "fill_container",
"height": 56,
"fill": "#FFFFFF",
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000A",
"offset": {
"x": 0,
"y": -4
},
"blur": 12
},
"padding": 16,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "gIvG7",
"width": 120,
"height": 41,
"fill": "#00000000",
"cornerRadius": 26,
"layout": "vertical",
"gap": 4,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "XDqa1",
"width": 18,
"height": 18,
"iconFontName": "house",
"iconFontFamily": "lucide",
"fill": "#A1A1AA"
},
{
"type": "text",
"id": "Z7oTj",
"fill": "#A1A1AA",
"content": "HOME",
"fontFamily": "Inter",
"fontSize": 10,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "7vclf",
"width": 120,
"height": 41,
"fill": "#00000000",
"cornerRadius": 26,
"layout": "vertical",
"gap": 4,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "U67U7",
"width": 18,
"height": 18,
"iconFontName": "images",
"iconFontFamily": "lucide",
"fill": "#A1A1AA"
},
{
"type": "text",
"id": "udpZp",
"fill": "#A1A1AA",
"content": "GALLERY",
"fontFamily": "Inter",
"fontSize": 10,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "1Ynsh",
"width": 120,
"height": 41,
"fill": "#8B5CF6",
"cornerRadius": 26,
"layout": "vertical",
"gap": 4,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "qIEXP",
"width": 18,
"height": 18,
"iconFontName": "user",
"iconFontFamily": "lucide",
"fill": "#FFFFFF"
},
{
"type": "text",
"id": "w9SVq",
"fill": "#FFFFFF",
"content": "PROFILE",
"fontFamily": "Inter",
"fontSize": 10,
"fontWeight": "600"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "tPjdN",
"x": 1340,
"y": 0,
"name": "Recharge Screen",
"clip": true,
"width": 390,
"height": 844,
"fill": "#FAFAFA",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "aYtDK",
"name": "statusBar",
"width": "fill_container",
"height": 40,
"fill": "#FFFFFF",
"padding": [
0,
12,
0,
20
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "kf65I",
"fill": "#18181B",
"content": "9:41",
"fontFamily": "Inter",
"fontSize": 13,
"fontWeight": "600"
},
{
"type": "frame",
"id": "gj2Nh",
"gap": 6,
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "lkKTQ",
"width": 21,
"height": 15,
"iconFontName": "signal",
"iconFontFamily": "lucide",
"fill": "#18181B"
},
{
"type": "icon_font",
"id": "G2bpv",
"width": 21,
"height": 15,
"iconFontName": "wifi",
"iconFontFamily": "lucide",
"fill": "#18181B"
},
{
"type": "icon_font",
"id": "MyA3t",
"width": 30,
"height": 15,
"iconFontName": "battery-medium",
"iconFontFamily": "lucide",
"fill": "#18181B"
}
]
}
]
},
{
"type": "frame",
"id": "6K6zM",
"name": "topNav",
"width": "fill_container",
"height": 56,
"fill": "#FFFFFF",
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000008",
"offset": {
"x": 0,
"y": 2
},
"blur": 8
},
"padding": [
0,
20
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "o6xEI",
"name": "backBtn",
"width": 40,
"height": 40,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "jO9wi",
"width": 24,
"height": 24,
"iconFontName": "arrow-left",
"iconFontFamily": "lucide",
"fill": "#18181B"
}
]
},
{
"type": "text",
"id": "hyvVe",
"name": "navTitle",
"fill": "#18181B",
"content": "Recharge",
"fontFamily": "Plus Jakarta Sans",
"fontSize": 20,
"fontWeight": "700"
},
{
"type": "frame",
"id": "omZCh",
"name": "recordEntry",
"height": 40,
"gap": 4,
"padding": [
0,
4
],
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "X2yWW",
"name": "recordEntryIcon",
"width": 16,
"height": 16,
"iconFontName": "list",
"iconFontFamily": "lucide",
"fill": "#8B5CF6"
},
{
"type": "text",
"id": "fjE0S",
"name": "recordEntryText",
"fill": "#8B5CF6",
"content": "History",
"fontFamily": "Inter",
"fontSize": 13,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "tRdXp",
"name": "tiersSection",
"width": "fill_container",
"height": "fill_container",
"layout": "vertical",
"gap": 16,
"padding": [
24,
20
],
"children": [
{
"type": "frame",
"id": "B0vCq",
"name": "creditsSection",
"width": "fill_container",
"fill": "#8B5CF6",
"cornerRadius": 16,
"stroke": {
"thickness": 1,
"fill": "#8B5CF680"
},
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#8B5CF640",
"offset": {
"x": 0,
"y": 2
},
"blur": 8
},
"layout": "vertical",
"gap": 8,
"padding": [
16,
20
],
"children": [
{
"type": "text",
"id": "xnizd",
"name": "creditsLabel",
"fill": "#FFFFFFCC",
"content": "Current Credits",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "500"
},
{
"type": "frame",
"id": "Y0Od9",
"name": "creditsDisplay",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "ZFHM9",
"width": 28,
"height": 28,
"iconFontName": "sparkles",
"iconFontFamily": "lucide",
"fill": "#FFFFFF"
},
{
"type": "text",
"id": "mzNty",
"fill": "#FFFFFF",
"content": "1,280",
"fontFamily": "Inter",
"fontSize": 32,
"fontWeight": "700"
}
]
}
]
},
{
"type": "text",
"id": "0qaAg",
"name": "tiersLabel",
"fill": "#18181B",
"content": "Select Tier",
"fontFamily": "Inter",
"fontSize": 16,
"fontWeight": "600"
},
{
"type": "frame",
"id": "DC6NS",
"name": "tierNormal",
"width": "fill_container",
"fill": "#FFFFFF",
"cornerRadius": 16,
"stroke": {
"thickness": 1,
"fill": "#E4E4E7"
},
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000008",
"offset": {
"x": 0,
"y": 2
},
"blur": 6
},
"padding": [
16,
20
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "Dx03C",
"name": "tierContent",
"layout": "vertical",
"gap": 4,
"children": [
{
"type": "text",
"id": "YZXkU",
"fill": "#18181B",
"content": "100 Credits",
"fontFamily": "Inter",
"fontSize": 18,
"fontWeight": "600"
},
{
"type": "frame",
"id": "iVYPz",
"name": "priceLine",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "text",
"id": "BO2Is",
"fill": "#71717A",
"content": "$5.99",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "500"
},
{
"type": "text",
"id": "sgYV2",
"fill": "#A1A1AA",
"content": "$6.99",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "500"
},
{
"type": "text",
"id": "1bb2Y",
"fill": "#8B5CF6",
"content": "+10 pts",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "6Uie0",
"name": "buyBtn",
"fill": "#8B5CF6",
"cornerRadius": 12,
"padding": [
8,
16
],
"alignItems": "center",
"children": [
{
"type": "text",
"id": "FmjH7",
"fill": "#FFFFFF",
"content": "Buy",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "YRaOG",
"name": "tierRecommended",
"width": 350,
"height": 80,
"fill": "#00000000",
"stroke": {
"thickness": 0,
"fill": "#00000000"
},
"layout": "none",
"children": [
{
"type": "frame",
"id": "osaPn",
"x": 0,
"y": 0,
"name": "cardContent",
"width": 350,
"height": 80,
"fill": "#FFFFFF",
"cornerRadius": 16,
"stroke": {
"thickness": 1,
"fill": "#E4E4E7"
},
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000008",
"offset": {
"x": 0,
"y": 2
},
"blur": 6
},
"padding": [
16,
20
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "vrUpL",
"name": "tierContent",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "text",
"id": "l4SNq",
"name": "creditsRec",
"fill": "#18181B",
"content": "200 Credits",
"fontFamily": "Inter",
"fontSize": 18,
"fontWeight": "600"
},
{
"type": "frame",
"id": "IAiZI",
"name": "priceLine",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "text",
"id": "oFR6Q",
"fill": "#71717A",
"content": "$9.99",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "500"
},
{
"type": "text",
"id": "bZrc4",
"fill": "#A1A1AA",
"content": "$12.99",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "500"
},
{
"type": "text",
"id": "2oQd4",
"fill": "#8B5CF6",
"content": "+25 pts",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "szJrs",
"name": "btnWrapper",
"layout": "vertical",
"padding": [
15,
0,
0,
0
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "TOcfz",
"name": "buyBtn",
"fill": "#8B5CF6",
"cornerRadius": 12,
"padding": [
8,
16
],
"alignItems": "center",
"children": [
{
"type": "text",
"id": "YB4Yj",
"fill": "#FFFFFF",
"content": "Buy",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "600"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "s95nA",
"x": 254,
"y": 1.7763568394002505e-15,
"name": "badge",
"rotation": -3.975693351829396e-16,
"fill": "#8B5CF620",
"cornerRadius": [
0,
16,
0,
16
],
"padding": [
4,
8
],
"alignItems": "center",
"children": [
{
"type": "text",
"id": "nB0Dm",
"fill": "#8B5CF6",
"content": "Recommended",
"fontFamily": "Inter",
"fontSize": 11,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "QlNz6",
"name": "tierPopular",
"width": 350,
"height": 80,
"fill": "#00000000",
"stroke": {
"thickness": 0,
"fill": "#00000000"
},
"layout": "none",
"children": [
{
"type": "frame",
"id": "IE6aU",
"x": 0,
"y": 0,
"name": "cardContent",
"width": 350,
"height": 80,
"fill": "#FFFFFF",
"cornerRadius": 16,
"stroke": {
"thickness": 1,
"fill": "#E4E4E7"
},
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000008",
"offset": {
"x": 0,
"y": 2
},
"blur": 6
},
"padding": [
16,
20
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "wJBVM",
"name": "tierContent",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "text",
"id": "bDAlg",
"name": "creditsPop",
"fill": "#18181B",
"content": "500 Credits",
"fontFamily": "Inter",
"fontSize": 18,
"fontWeight": "600"
},
{
"type": "frame",
"id": "gSnzm",
"name": "priceLine",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "text",
"id": "g3vvN",
"fill": "#71717A",
"content": "$19.99",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "500"
},
{
"type": "text",
"id": "9DcxP",
"fill": "#A1A1AA",
"content": "$24.99",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "500"
},
{
"type": "text",
"id": "SCF0u",
"fill": "#8B5CF6",
"content": "+80 pts",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "Pi42v",
"name": "btnWrapper",
"layout": "vertical",
"padding": [
15,
0,
0,
0
],
"justifyContent": "center",
"alignItems": "end",
"children": [
{
"type": "frame",
"id": "Yxmfw",
"name": "buyBtn",
"fill": "#8B5CF6",
"cornerRadius": 12,
"padding": [
8,
16
],
"alignItems": "center",
"children": [
{
"type": "text",
"id": "JU1WR",
"fill": "#FFFFFF",
"content": "Buy",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "600"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "yHXJl",
"x": 263,
"y": 0,
"name": "badge",
"width": "fit_content(87)",
"height": "fit_content(21)",
"fill": "#F59E0B20",
"cornerRadius": [
0,
16,
0,
16
],
"layout": "none",
"children": [
{
"type": "text",
"id": "QIebF",
"x": 8,
"y": 4,
"fill": "#F59E0B",
"content": "Most Popular",
"fontFamily": "Inter",
"fontSize": 11,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "y8Ovd",
"name": "tier4",
"width": "fill_container",
"fill": "#FFFFFF",
"cornerRadius": 16,
"stroke": {
"thickness": 1,
"fill": "#E4E4E7"
},
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000008",
"offset": {
"x": 0,
"y": 2
},
"blur": 6
},
"padding": [
16,
20
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "w7wPC",
"name": "tierContent",
"layout": "vertical",
"gap": 4,
"children": [
{
"type": "text",
"id": "iTpew",
"fill": "#18181B",
"content": "1,200 Credits",
"fontFamily": "Inter",
"fontSize": 18,
"fontWeight": "600"
},
{
"type": "frame",
"id": "QcmBX",
"name": "priceLine",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "text",
"id": "QbQa2",
"fill": "#71717A",
"content": "$49.99",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "500"
},
{
"type": "text",
"id": "bvZ8D",
"fill": "#A1A1AA",
"content": "$59.99",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "500"
},
{
"type": "text",
"id": "xKMOi",
"fill": "#8B5CF6",
"content": "+200 pts",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "5te2w",
"name": "buyBtn",
"fill": "#8B5CF6",
"cornerRadius": 12,
"padding": [
8,
16
],
"alignItems": "center",
"children": [
{
"type": "text",
"id": "rMBMk",
"fill": "#FFFFFF",
"content": "Buy",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "W4LDn",
"name": "tier5",
"width": "fill_container",
"fill": "#FFFFFF",
"cornerRadius": 16,
"stroke": {
"thickness": 1,
"fill": "#E4E4E7"
},
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000008",
"offset": {
"x": 0,
"y": 2
},
"blur": 6
},
"padding": [
16,
20
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "qsLVP",
"name": "tierContent",
"layout": "vertical",
"gap": 4,
"children": [
{
"type": "text",
"id": "K3gu7",
"fill": "#18181B",
"content": "3,000 Credits",
"fontFamily": "Inter",
"fontSize": 18,
"fontWeight": "600"
},
{
"type": "frame",
"id": "xMHYZ",
"name": "priceLine",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "text",
"id": "wLYzH",
"fill": "#71717A",
"content": "$99.99",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "500"
},
{
"type": "text",
"id": "ch71f",
"fill": "#A1A1AA",
"content": "$119.99",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "500"
},
{
"type": "text",
"id": "H6lDP",
"fill": "#8B5CF6",
"content": "+500 pts",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "VSmrD",
"name": "buyBtn",
"fill": "#8B5CF6",
"cornerRadius": 12,
"padding": [
8,
16
],
"alignItems": "center",
"children": [
{
"type": "text",
"id": "9IGJL",
"fill": "#FFFFFF",
"content": "Buy",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "600"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "mmLB5",
"x": 1780,
"y": 0,
"name": "Generate Video Screen",
"clip": true,
"width": 390,
"height": 844,
"fill": "#FAFAFA",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "KYAvP",
"name": "statusBar",
"width": "fill_container",
"height": 40,
"fill": "#FFFFFF",
"padding": [
0,
12,
0,
20
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "426Fs",
"fill": "#18181B",
"content": "9:41",
"fontFamily": "Inter",
"fontSize": 13,
"fontWeight": "600"
},
{
"type": "frame",
"id": "hrgVk",
"gap": 6,
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "v7DgT",
"width": 21,
"height": 15,
"iconFontName": "signal",
"iconFontFamily": "lucide",
"fill": "#18181B"
},
{
"type": "icon_font",
"id": "GnkiF",
"width": 21,
"height": 15,
"iconFontName": "wifi",
"iconFontFamily": "lucide",
"fill": "#18181B"
},
{
"type": "icon_font",
"id": "QGqXE",
"width": 30,
"height": 15,
"iconFontName": "battery-medium",
"iconFontFamily": "lucide",
"fill": "#18181B"
}
]
}
]
},
{
"type": "frame",
"id": "p4l77",
"name": "topNav",
"width": "fill_container",
"height": 56,
"fill": "#FFFFFF",
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000008",
"offset": {
"x": 0,
"y": 2
},
"blur": 8
},
"padding": [
0,
20
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "q4LqH",
"name": "backBtn",
"width": 40,
"height": 40,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "uQJ0N",
"width": 24,
"height": 24,
"iconFontName": "arrow-left",
"iconFontFamily": "lucide",
"fill": "#18181B"
}
]
},
{
"type": "text",
"id": "2wKUo",
"name": "navTitle",
"fill": "#18181B",
"content": "Generate Video",
"fontFamily": "Plus Jakarta Sans",
"fontSize": 20,
"fontWeight": "700"
},
{
"type": "frame",
"id": "7F4MA",
"name": "navSpacer",
"width": 40,
"height": 40
}
]
},
{
"type": "frame",
"id": "BNNL5",
"name": "contentArea",
"context": "Content area: creditsCard + videoPreviewArea scrollable; resolutionRow + generateBtn fixed at bottom.",
"width": "fill_container",
"height": "fill_container",
"layout": "vertical",
"gap": 24,
"padding": [
24,
20
],
"children": [
{
"type": "frame",
"id": "ZbYgn",
"name": "creditsCard",
"width": "fill_container",
"fill": "#8B5CF6",
"cornerRadius": 16,
"stroke": {
"thickness": 1,
"fill": "#8B5CF680"
},
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#8B5CF640",
"offset": {
"x": 0,
"y": 2
},
"blur": 8
},
"layout": "vertical",
"gap": 8,
"padding": [
16,
20
],
"children": [
{
"type": "text",
"id": "lSWYi",
"fill": "#FFFFFFCC",
"content": "Available Credits",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "500"
},
{
"type": "frame",
"id": "Vx9RC",
"name": "creditsDisplay",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "UkBge",
"width": 28,
"height": 28,
"iconFontName": "sparkles",
"iconFontFamily": "lucide",
"fill": "#FFFFFF"
},
{
"type": "text",
"id": "AFJOp",
"fill": "#FFFFFF",
"content": "1,280",
"fontFamily": "Inter",
"fontSize": 32,
"fontWeight": "700"
}
]
}
]
},
{
"type": "frame",
"id": "vA8QJ",
"name": "videoPreviewArea",
"context": "Video preview: video URL from card. Auto-load and play. Width: fill container; height: adapt by video aspect ratio. Fit: contain (no crop). Loading animation until ready.",
"width": "fill_container",
"height": 280,
"fill": {
"type": "image",
"enabled": true,
"url": "images/pet-hero-1.png",
"mode": "fill"
},
"cornerRadius": 16,
"stroke": {
"thickness": 1,
"fill": "#E4E4E7"
},
"layout": "none"
},
{
"type": "frame",
"id": "oYwsm",
"name": "resolutionRow",
"context": "Resolution options: 480p/720p. Fixed at screen bottom. When switching, update Generate Video credits (RGKvY).",
"width": "fill_container",
"height": 44,
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "text",
"id": "u1Glf",
"name": "label",
"fill": "#18181B",
"content": "Resolution",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "600"
},
{
"type": "frame",
"id": "i1SM9",
"name": "optWrap",
"height": 36,
"gap": 8,
"children": [
{
"type": "frame",
"id": "ZPZ2X",
"name": "opt480P",
"height": 36,
"fill": "#F4F4F5",
"cornerRadius": 18,
"stroke": {
"thickness": 1,
"fill": "#E4E4E7"
},
"padding": [
8,
16
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "I7ZlT",
"name": "t480",
"fill": "#71717A",
"content": "480P",
"fontFamily": "Inter",
"fontSize": 13,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "xVYjt",
"name": "opt720P",
"height": 36,
"fill": "#8B5CF6",
"cornerRadius": 18,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#8B5CF630",
"offset": {
"x": 0,
"y": 2
},
"blur": 4
},
"padding": [
8,
16
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "UmmhZ",
"name": "t720",
"fill": "#FFFFFF",
"content": "720P",
"fontFamily": "Inter",
"fontSize": 13,
"fontWeight": "600"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "yunXY",
"name": "generateBtn",
"context": "Generate Video button. Fixed at screen bottom. Click flow: image picker -> API. See docs/generate_video.md.",
"width": "fill_container",
"height": 56,
"fill": "#8B5CF6",
"cornerRadius": 16,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#8B5CF640",
"offset": {
"x": 0,
"y": 2
},
"blur": 8
},
"gap": 8,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "94USx",
"fill": "#FFFFFF",
"content": "Generate Video",
"fontFamily": "Inter",
"fontSize": 16,
"fontWeight": "600"
},
{
"type": "frame",
"id": "RGKvY",
"name": "creditsCost",
"context": "Credits cost for current resolution. Updates when resolution (oYwsm) changes.",
"fill": "#FFFFFF30",
"cornerRadius": 8,
"gap": 4,
"padding": [
4,
10
],
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "GKJhs",
"width": 16,
"height": 16,
"iconFontName": "sparkles",
"iconFontFamily": "lucide",
"fill": "#FFFFFF"
},
{
"type": "text",
"id": "XSMlK",
"fill": "#FFFFFF",
"content": "50",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "600"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "qGs6n",
"x": 2220,
"y": 0,
"name": "Generate Video Progress Screen",
"clip": true,
"width": 390,
"height": 844,
"fill": "#FAFAFA",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "nQYw9",
"name": "statusBar",
"width": "fill_container",
"height": 40,
"fill": "#FFFFFF",
"padding": [
0,
12,
0,
20
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "rjKeI",
"fill": "#18181B",
"content": "9:41",
"fontFamily": "Inter",
"fontSize": 13,
"fontWeight": "600"
},
{
"type": "frame",
"id": "w1MGX",
"gap": 6,
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "4R3sR",
"width": 21,
"height": 15,
"iconFontName": "signal",
"iconFontFamily": "lucide",
"fill": "#18181B"
},
{
"type": "icon_font",
"id": "itl77",
"width": 21,
"height": 15,
"iconFontName": "wifi",
"iconFontFamily": "lucide",
"fill": "#18181B"
},
{
"type": "icon_font",
"id": "PZzWw",
"width": 30,
"height": 15,
"iconFontName": "battery-medium",
"iconFontFamily": "lucide",
"fill": "#18181B"
}
]
}
]
},
{
"type": "frame",
"id": "Qi840",
"name": "topNav",
"width": "fill_container",
"height": 56,
"fill": "#FFFFFF",
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000008",
"offset": {
"x": 0,
"y": 2
},
"blur": 8
},
"padding": [
0,
20
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "GrcXB",
"name": "backBtn",
"width": 40,
"height": 40,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "xapUf",
"width": 24,
"height": 24,
"iconFontName": "arrow-left",
"iconFontFamily": "lucide",
"fill": "#18181B"
}
]
},
{
"type": "text",
"id": "jj1wM",
"name": "navTitle",
"fill": "#18181B",
"content": "Generating",
"fontFamily": "Plus Jakarta Sans",
"fontSize": 20,
"fontWeight": "700"
},
{
"type": "frame",
"id": "7yHyL",
"name": "navSpacer",
"width": 40,
"height": 40
}
]
},
{
"type": "frame",
"id": "Gyt2o",
"name": "contentArea",
"width": "fill_container",
"height": "fill_container",
"layout": "vertical",
"gap": 24,
"padding": [
24,
20
],
"children": [
{
"type": "frame",
"id": "rSN3T",
"name": "videoDisplay",
"context": "Video area: display uploaded image with crop (fill/cover). Matches progress screen.",
"clip": true,
"width": "fill_container",
"height": 360,
"fill": {
"type": "image",
"enabled": true,
"url": "images/generated-1773156472555.png",
"mode": "fill"
},
"cornerRadius": 16,
"layout": "vertical",
"justifyContent": "center",
"alignItems": "center"
},
{
"type": "text",
"id": "YqM56",
"name": "hintText",
"fill": "#71717A",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Video generation may take some time. Please wait patiently.",
"textAlign": "center",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "500"
},
{
"type": "frame",
"id": "nQMvt",
"name": "progressSection",
"width": "fill_container",
"layout": "vertical",
"gap": 12,
"children": [
{
"type": "text",
"id": "Eghqc",
"name": "progressLabel",
"context": "Progress label: 1=队列中 2=处理中 3=完成 4=超时 5=错误 6=中止. Updated from /v1/image/progress every 1s.",
"fill": "#18181B",
"content": "Generating...",
"fontFamily": "Inter",
"fontSize": 16,
"fontWeight": "600"
},
{
"type": "frame",
"id": "TYHdm",
"name": "progressBarBg",
"width": "fill_container",
"height": 8,
"fill": "#E4E4E7",
"cornerRadius": 4,
"layout": "none",
"children": [
{
"type": "frame",
"id": "4P4tn",
"x": 0,
"y": 0,
"name": "progressBarFill",
"width": 158,
"height": 8,
"fill": "#8B5CF6",
"cornerRadius": 4,
"layout": "none"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "cFA4T",
"x": 2660,
"y": 0,
"name": "Video Generation Result Screen",
"clip": true,
"width": 390,
"height": 844,
"fill": "#FAFAFA",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "aKXv9",
"name": "statusBar",
"width": "fill_container",
"height": 40,
"fill": "#FFFFFF",
"padding": [
0,
12,
0,
20
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "yDO8H",
"fill": "#18181B",
"content": "9:41",
"fontFamily": "Inter",
"fontSize": 13,
"fontWeight": "600"
},
{
"type": "frame",
"id": "n04mT",
"gap": 6,
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "c5iam",
"width": 21,
"height": 15,
"iconFontName": "signal",
"iconFontFamily": "lucide",
"fill": "#18181B"
},
{
"type": "icon_font",
"id": "OB2sk",
"width": 21,
"height": 15,
"iconFontName": "wifi",
"iconFontFamily": "lucide",
"fill": "#18181B"
},
{
"type": "icon_font",
"id": "nylDb",
"width": 30,
"height": 15,
"iconFontName": "battery-medium",
"iconFontFamily": "lucide",
"fill": "#18181B"
}
]
}
]
},
{
"type": "frame",
"id": "5L8A2",
"name": "topNav",
"width": "fill_container",
"height": 56,
"fill": "#FFFFFF",
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000008",
"offset": {
"x": 0,
"y": 2
},
"blur": 8
},
"padding": [
0,
20
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "Rw61A",
"name": "backBtn",
"width": 40,
"height": 40,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "JTbKe",
"width": 24,
"height": 24,
"iconFontName": "arrow-left",
"iconFontFamily": "lucide",
"fill": "#18181B"
}
]
},
{
"type": "text",
"id": "pAUzD",
"name": "navTitle",
"fill": "#18181B",
"content": "Video Ready",
"fontFamily": "Plus Jakarta Sans",
"fontSize": 20,
"fontWeight": "700"
},
{
"type": "frame",
"id": "RGAdu",
"name": "reportBtn",
"width": 40,
"height": 40,
"justifyContent": "center",
"alignItems": "center"
}
]
},
{
"type": "frame",
"id": "rDzoV",
"name": "contentArea",
"width": "fill_container",
"height": "fill_container",
"layout": "vertical",
"gap": 24,
"padding": [
24,
20
],
"children": [
{
"type": "frame",
"id": "GTuTn",
"name": "videoDisplay",
"clip": true,
"width": "fill_container",
"height": 360,
"fill": {
"type": "image",
"enabled": true,
"url": "images/generated-1773156511265.png",
"mode": "fill"
},
"cornerRadius": 16,
"layout": "vertical",
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "Ne80z",
"name": "topRow",
"width": "fill_container",
"height": 40,
"padding": [
16,
20,
0,
0
],
"justifyContent": "end",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "h2IK3",
"name": "reportBtn",
"width": 44,
"height": 44,
"fill": "#00000099",
"cornerRadius": 8,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "GtWHh",
"width": 24,
"height": 24,
"iconFontName": "triangle-alert",
"iconFontFamily": "lucide",
"fill": "#FFFFFF"
}
]
}
]
},
{
"type": "frame",
"id": "wD2sT",
"name": "centerGroup",
"width": "fill_container",
"layout": "vertical",
"gap": 8,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "a3uQs",
"x": 0,
"y": 0,
"enabled": false,
"width": 72,
"height": 72,
"iconFontName": "play",
"iconFontFamily": "lucide",
"fill": "#FFFFFF80"
},
{
"type": "text",
"id": "SuXL2",
"fill": "#FFFFFF99",
"content": "your work is ready",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "nNSbD",
"name": "watermarkRow",
"width": "fill_container",
"padding": [
0,
20,
20,
0
],
"justifyContent": "end",
"children": [
{
"type": "text",
"id": "BqSHo",
"fill": "#FFFFFF99",
"content": "PetsHero AI",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "500"
}
]
}
]
},
{
"type": "frame",
"id": "jCww0",
"name": "buttonRow",
"width": "fill_container",
"gap": 12,
"children": [
{
"type": "frame",
"id": "En8rQ",
"name": "downloadBtn",
"width": "fill_container",
"height": 52,
"fill": "#8B5CF6",
"cornerRadius": 14,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#8B5CF640",
"offset": {
"x": 0,
"y": 2
},
"blur": 6
},
"gap": 8,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "qSzz1",
"width": 20,
"height": 20,
"iconFontName": "download",
"iconFontFamily": "lucide",
"fill": "#FFFFFF"
},
{
"type": "text",
"id": "KDr4j",
"fill": "#FFFFFF",
"content": "Download",
"fontFamily": "Inter",
"fontSize": 16,
"fontWeight": "600"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "5qKUB",
"x": 3150,
"y": 100,
"name": "Report Dialog",
"width": 342,
"fill": "#FFFFFF",
"cornerRadius": 16,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000026",
"offset": {
"x": 0,
"y": 8
},
"blur": 24
},
"layout": "vertical",
"gap": 20,
"padding": 24,
"children": [
{
"type": "frame",
"id": "6i0Kw",
"name": "dialogHeader",
"width": "fill_container",
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "ISmLf",
"name": "title",
"fill": "#18181B",
"content": "Report",
"fontFamily": "Plus Jakarta Sans",
"fontSize": 20,
"fontWeight": "700"
},
{
"type": "frame",
"id": "yxaWM",
"name": "closeBtn",
"width": 40,
"height": 40,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "g1Nfm",
"width": 24,
"height": 24,
"iconFontName": "x",
"iconFontFamily": "lucide",
"fill": "#71717A"
}
]
}
]
},
{
"type": "frame",
"id": "884m3",
"name": "descriptionInput",
"width": "fill_container",
"height": 120,
"fill": "#FAFAFA",
"cornerRadius": 12,
"stroke": {
"align": "inside",
"thickness": 1,
"fill": "#E4E4E7"
},
"layout": "vertical",
"padding": 16,
"children": [
{
"type": "text",
"id": "JDjJq",
"name": "placeholder",
"fill": "#A1A1AA",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Describe the issue...",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "2ofcH",
"name": "imageUpload",
"width": "fill_container",
"height": 120,
"fill": "#F4F4F5",
"cornerRadius": 12,
"stroke": {
"align": "center",
"thickness": 2,
"fill": "#D4D4D8"
},
"layout": "vertical",
"gap": 8,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "1NYr7",
"name": "uploadIcon",
"width": 32,
"height": 32,
"iconFontName": "image-plus",
"iconFontFamily": "lucide",
"fill": "#A1A1AA"
},
{
"type": "text",
"id": "jnJim",
"name": "uploadLabel",
"fill": "#71717A",
"content": "Tap to upload image",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "ZOA9y",
"name": "submitBtn",
"width": "fill_container",
"height": 52,
"fill": "#7C3AED",
"cornerRadius": 14,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "Jfj7q",
"fill": "#FFFFFF",
"content": "Submit",
"fontFamily": "Inter",
"fontSize": 16,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "Xp6Qz",
"x": 900,
"y": 0,
"name": "Delete Account Overlay",
"width": 390,
"height": 844,
"fill": "#00000080",
"layout": "vertical",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "vFAbj",
"name": "Delete Account Dialog",
"width": 342,
"fill": "#FFFFFF",
"cornerRadius": 16,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000026",
"offset": {
"x": 0,
"y": 8
},
"blur": 24
},
"layout": "vertical",
"gap": 20,
"padding": 24,
"children": [
{
"type": "frame",
"id": "YR8mP",
"name": "header",
"width": "fill_container",
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "Pck1A",
"name": "title",
"fill": "#18181B",
"content": "Delete Account?",
"fontFamily": "Plus Jakarta Sans",
"fontSize": 20,
"fontWeight": "700"
},
{
"type": "frame",
"id": "d8c1P",
"name": "closeBtn",
"width": 40,
"height": 40,
"layout": "vertical",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "l4PfI",
"name": "closeIcon",
"width": 24,
"height": 24,
"iconFontName": "x",
"iconFontFamily": "lucide",
"fill": "#71717A"
}
]
}
]
},
{
"type": "text",
"id": "8K9GG",
"name": "desc",
"fill": "#71717A",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "This action cannot be undone. All your data will be permanently deleted.",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "mIiKO",
"name": "verifyLabel",
"fill": "#71717A",
"content": "Type DELETE to confirm",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "500"
},
{
"type": "frame",
"id": "2XdIX",
"name": "verifyInput",
"width": "fill_container",
"height": 48,
"fill": "#FAFAFA",
"cornerRadius": 12,
"stroke": {
"align": "inside",
"thickness": 1,
"fill": "#E4E4E7"
},
"layout": "vertical",
"padding": 16,
"children": [
{
"type": "text",
"id": "GrZIb",
"name": "placeholderText",
"fill": "#A1A1AA",
"content": "Type DELETE here",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "0HXLh",
"name": "btnRow",
"width": "fill_container",
"gap": 12,
"children": [
{
"type": "frame",
"id": "csIsQ",
"name": "cancelBtn",
"width": "fill_container",
"height": 52,
"fill": "#F4F4F5",
"cornerRadius": 14,
"layout": "vertical",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "yqSEk",
"name": "cancelText",
"fill": "#18181B",
"content": "Cancel",
"fontFamily": "Inter",
"fontSize": 16,
"fontWeight": "600"
}
]
},
{
"type": "frame",
"id": "2r5VL",
"name": "deleteBtn",
"width": "fill_container",
"height": 52,
"fill": "#DC2626",
"cornerRadius": 14,
"layout": "vertical",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "fQlFx",
"name": "deleteText",
"fill": "#FFFFFF",
"content": "Delete",
"fontFamily": "Inter",
"fontSize": 16,
"fontWeight": "600"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "HhcCM",
"x": 3560,
"y": 0,
"name": "积分记录页面",
"clip": true,
"width": 390,
"height": 844,
"fill": "#FAFAFA",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "QtoLk",
"name": "statusBar",
"width": "fill_container",
"height": 40,
"fill": "#FFFFFF",
"padding": [
0,
12,
0,
20
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "b5Ogx",
"name": "recordTime",
"fill": "#18181B",
"content": "9:41",
"fontFamily": "Inter",
"fontSize": 13,
"fontWeight": "600"
},
{
"type": "frame",
"id": "Su906",
"name": "recordStatusIcons",
"gap": 6,
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "MTrqx",
"name": "recordSignal",
"width": 21,
"height": 15,
"iconFontName": "signal",
"iconFontFamily": "lucide",
"fill": "#18181B"
},
{
"type": "icon_font",
"id": "fnm42",
"name": "recordWifi",
"width": 21,
"height": 15,
"iconFontName": "wifi",
"iconFontFamily": "lucide",
"fill": "#18181B"
},
{
"type": "icon_font",
"id": "nx60Z",
"name": "recordBattery",
"width": 30,
"height": 15,
"iconFontName": "battery-medium",
"iconFontFamily": "lucide",
"fill": "#18181B"
}
]
}
]
},
{
"type": "frame",
"id": "YfTGP",
"name": "topNav",
"width": "fill_container",
"height": 56,
"fill": "#FFFFFF",
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000008",
"offset": {
"x": 0,
"y": 2
},
"blur": 8
},
"padding": [
0,
20
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "Napgn",
"name": "backBtn",
"width": 40,
"height": 40,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "JQ8oi",
"name": "recordBackIcon",
"width": 24,
"height": 24,
"iconFontName": "arrow-left",
"iconFontFamily": "lucide",
"fill": "#18181B"
}
]
},
{
"type": "text",
"id": "vRkK0",
"name": "recordTitle",
"fill": "#18181B",
"content": "Points History",
"fontFamily": "Plus Jakarta Sans",
"fontSize": 20,
"fontWeight": "700"
},
{
"type": "frame",
"id": "hyBiG",
"name": "recordSpacer",
"width": 40,
"height": 40
}
]
},
{
"type": "frame",
"id": "yc0Rz",
"name": "content",
"width": "fill_container",
"height": "fill_container",
"fill": "#FAFAFA",
"layout": "vertical",
"gap": 16,
"padding": [
20,
20,
24,
20
],
"children": [
{
"type": "frame",
"id": "pBfPr",
"name": "summaryCard",
"width": "fill_container",
"fill": "#FFFFFF",
"cornerRadius": 16,
"stroke": {
"thickness": 1,
"fill": "#E4E4E7"
},
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000008",
"offset": {
"x": 0,
"y": 2
},
"blur": 6
},
"layout": "vertical",
"gap": 8,
"padding": [
16,
18
],
"children": [
{
"type": "text",
"id": "aNlTU",
"name": "recordSummaryTitle",
"fill": "#71717A",
"content": "Current Points",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "500"
},
{
"type": "text",
"id": "Od6F1",
"name": "recordSummaryValue",
"fill": "#18181B",
"content": "1,280",
"fontFamily": "Inter",
"fontSize": 30,
"fontWeight": "700"
}
]
},
{
"type": "frame",
"id": "v25H1",
"name": "recordList",
"width": "fill_container",
"layout": "vertical",
"gap": 8,
"children": [
{
"type": "frame",
"id": "BzXpQ",
"name": "recordItem1",
"width": "fill_container",
"fill": "#FFFFFF",
"cornerRadius": 12,
"stroke": {
"thickness": 1,
"fill": "#E4E4E7"
},
"padding": [
14,
16
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "r3dpe",
"name": "recordItem1Left",
"layout": "vertical",
"gap": 4,
"children": [
{
"type": "text",
"id": "py0Ct",
"name": "recordItem1Time",
"fill": "#71717A",
"content": "2026-04-28 09:12",
"fontFamily": "Inter",
"fontSize": 12
}
]
},
{
"type": "text",
"id": "tWrM8",
"name": "recordItem1Change",
"fill": "#16A34A",
"content": "+20",
"fontFamily": "Inter",
"fontSize": 16,
"fontWeight": "700"
}
]
},
{
"type": "frame",
"id": "Jb2ZB",
"name": "recordItem2",
"width": "fill_container",
"fill": "#FFFFFF",
"cornerRadius": 12,
"stroke": {
"thickness": 1,
"fill": "#E4E4E7"
},
"padding": [
14,
16
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "elr68",
"name": "recordItem2Left",
"layout": "vertical",
"gap": 4,
"children": [
{
"type": "text",
"id": "riFsx",
"name": "recordItem2Time",
"fill": "#71717A",
"content": "2026-04-27 22:45",
"fontFamily": "Inter",
"fontSize": 12
}
]
},
{
"type": "text",
"id": "j8PFQw",
"name": "recordItem2Change",
"fill": "#DC2626",
"content": "-120",
"fontFamily": "Inter",
"fontSize": 16,
"fontWeight": "700"
}
]
},
{
"type": "frame",
"id": "gIDh0",
"name": "recordItem3",
"width": "fill_container",
"fill": "#FFFFFF",
"cornerRadius": 12,
"stroke": {
"thickness": 1,
"fill": "#E4E4E7"
},
"padding": [
14,
16
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "q8BKB8",
"name": "recordItem3Left",
"layout": "vertical",
"gap": 4,
"children": [
{
"type": "text",
"id": "q7lwb",
"name": "recordItem3Time",
"fill": "#71717A",
"content": "2026-04-26 14:08",
"fontFamily": "Inter",
"fontSize": 12
}
]
},
{
"type": "text",
"id": "zskzV",
"name": "recordItem3Change",
"fill": "#16A34A",
"content": "+500",
"fontFamily": "Inter",
"fontSize": 16,
"fontWeight": "700"
}
]
}
]
}
]
}
]
}
]
}
Reference in New Issue View Git Blame Copy Permalink