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 cacb32c25f 打包：版本发布1.1.1
2026-03-21 23:39:28 +08:00

4629 lines
150 KiB
Plaintext
Raw Blame History

{
"version": "2.8",
"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": "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"
},
{
"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"
}
]
},
{
"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"
},
{
"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"
}
]
}
]
}
]
},
{
"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",
"name": "topNav",
"enabled": false,
"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": "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": "Lt3TV",
"name": "navSpacer",
"width": 40,
"height": 40
}
]
},
{
"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",
"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": "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"
}
]
}
]
}
]
}
]
}
]
}
Reference in New Issue View Git Blame Copy Permalink