4277 lines
140 KiB
Plaintext
4277 lines
140 KiB
Plaintext
{
|
|
"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": "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"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
} |