Emmanuel Rizky
4d81bb4621
This commit introduces a new admin dashboard and a page collection feature. The admin dashboard allows for managing KTP data, including viewing details and exporting data. The page collection provides a structure for organizing different pages within the application. The following files were added: - `dashboard-admin-ktp/index.html`: HTML structure for the admin dashboard. - `dashboard-admin-ktp/script.js`: JavaScript logic for the admin dashboard. - `dashboard-admin-ktp/style.css`: Styling for the admin dashboard. - `page-collection/index.html`: HTML structure for a sample page collection. - `page-collection/script.js`: JavaScript logic for the sample page collection. - `page-collection/style.css`: Styling for the sample page collection. - `design-styles.json`: JSON file to store design styles.
190 lines
4.7 KiB
JSON
190 lines
4.7 KiB
JSON
{
|
|
"designName": "BankingApp",
|
|
"designType": "Mobile App UI",
|
|
"targetPlatform": "Website (responsive adaptation)",
|
|
"colorPalette": {
|
|
"primaryBlue": "#2A64FC",
|
|
"lightBlueBackground": "#F0F5FF",
|
|
"white": "#FFFFFF",
|
|
"grayText": "#6B7280",
|
|
"darkText": "#1F2937",
|
|
"successGreen": "#4CAF50",
|
|
"gradientBlue": "linear-gradient(90deg, #2A64FC 0%, #6E94F8 100%)",
|
|
"pinkPiggyBank": "#FF6B8B",
|
|
"goldCoin": "#FFD700"
|
|
},
|
|
"typography": {
|
|
"fontFamily": "Inter, sans-serif",
|
|
"heading1": {
|
|
"fontSize": "28px",
|
|
"fontWeight": "700",
|
|
"lineHeight": "1.2"
|
|
},
|
|
"heading2": {
|
|
"fontSize": "20px",
|
|
"fontWeight": "600",
|
|
"lineHeight": "1.3"
|
|
},
|
|
"bodyText": {
|
|
"fontSize": "16px",
|
|
"fontWeight": "400",
|
|
"lineHeight": "1.5"
|
|
},
|
|
"smallText": {
|
|
"fontSize": "14px",
|
|
"fontWeight": "400",
|
|
"lineHeight": "1.4"
|
|
},
|
|
"captionText": {
|
|
"fontSize": "12px",
|
|
"fontWeight": "400",
|
|
"lineHeight": "1.3"
|
|
}
|
|
},
|
|
"components": {
|
|
"global": {
|
|
"borderRadius": "16px",
|
|
"shadow": "0px 4px 20px rgba(0, 0, 0, 0.05)"
|
|
},
|
|
"buttons": {
|
|
"primaryButton": {
|
|
"backgroundColor": "#2A64FC",
|
|
"color": "#FFFFFF",
|
|
"padding": "12px 24px",
|
|
"borderRadius": "24px",
|
|
"fontSize": "18px",
|
|
"fontWeight": "600",
|
|
"hover": {
|
|
"backgroundColor": "#1E4CD6"
|
|
}
|
|
},
|
|
"secondaryButton": {
|
|
"backgroundColor": "#EEF5FF",
|
|
"color": "#2A64FC",
|
|
"padding": "10px 20px",
|
|
"borderRadius": "20px",
|
|
"fontSize": "16px",
|
|
"fontWeight": "500",
|
|
"hover": {
|
|
"backgroundColor": "#D6E9FF"
|
|
}
|
|
},
|
|
"iconButton": {
|
|
"backgroundColor": "transparent",
|
|
"color": "#6B7280",
|
|
"padding": "8px",
|
|
"borderRadius": "50%",
|
|
"hover": {
|
|
"backgroundColor": "#F0F2F5"
|
|
}
|
|
}
|
|
},
|
|
"cards": {
|
|
"baseCard": {
|
|
"backgroundColor": "#FFFFFF",
|
|
"borderRadius": "16px",
|
|
"padding": "20px",
|
|
"boxShadow": "0px 4px 15px rgba(0, 0, 0, 0.05)"
|
|
},
|
|
"balanceDisplayCard": {
|
|
"backgroundColor": "#EEF5FF",
|
|
"padding": "20px",
|
|
"borderRadius": "16px"
|
|
},
|
|
"successMessageCard": {
|
|
"backgroundColor": "#FFFFFF",
|
|
"borderRadius": "20px",
|
|
"padding": "30px 20px",
|
|
"textAlign": "center",
|
|
"boxShadow": "0px 8px 30px rgba(0, 0, 0, 0.1)"
|
|
},
|
|
"cardDetailsInputCard": {
|
|
"backgroundColor": "#FFFFFF",
|
|
"borderRadius": "16px",
|
|
"padding": "20px",
|
|
"boxShadow": "0px 4px 15px rgba(0, 0, 0, 0.05)"
|
|
}
|
|
},
|
|
"navigation": {
|
|
"topHeader": {
|
|
"backgroundColor": "transparent",
|
|
"padding": "20px",
|
|
"display": "flex",
|
|
"justifyContent": "space-between",
|
|
"alignItems": "center",
|
|
"color": "#1F2937"
|
|
}
|
|
},
|
|
"forms": {
|
|
"inputField": {
|
|
"backgroundColor": "#F8F9FA",
|
|
"border": "1px solid #D1D5DB",
|
|
"borderRadius": "8px",
|
|
"padding": "12px 15px",
|
|
"fontSize": "16px",
|
|
"color": "#1F2937",
|
|
"placeholderColor": "#9CA3AF"
|
|
},
|
|
"dropdown": {
|
|
"backgroundColor": "#F8F9FA",
|
|
"border": "1px solid #D1D5DB",
|
|
"borderRadius": "8px",
|
|
"padding": "10px 15px",
|
|
"fontSize": "14px"
|
|
}
|
|
},
|
|
"charts": {
|
|
"lineChart": {
|
|
"lineColor": "#2A64FC",
|
|
"fillColor": "rgba(42, 100, 252, 0.1)",
|
|
"gridColor": "#E5E7EB",
|
|
"labelColor": "#6B7280",
|
|
"tooltipBackgroundColor": "#1F2937",
|
|
"tooltipTextColor": "#FFFFFF"
|
|
},
|
|
"barChart": {
|
|
"barColor": "#2A64FC",
|
|
"labelColor": "#6B7280",
|
|
"increaseColor": "#4CAF50"
|
|
}
|
|
},
|
|
"illustrations": {
|
|
"piggyBank": {
|
|
"width": "200px",
|
|
"height": "auto",
|
|
"shadow": "0px 10px 30px rgba(0, 0, 0, 0.15)"
|
|
}
|
|
}
|
|
},
|
|
"layouts": {
|
|
"activityScreen": {
|
|
"backgroundColor": "#F0F5FF",
|
|
"paddingTop": "20px",
|
|
"paddingHorizontal": "20px",
|
|
"sectionsGap": "25px"
|
|
},
|
|
"successScreen": {
|
|
"backgroundColor": "#2A64FC",
|
|
"paddingTop": "80px",
|
|
"paddingHorizontal": "20px",
|
|
"contentVerticalAlign": "center",
|
|
"imageContainerFlex": "1",
|
|
"cardContainerFlex": "1.5"
|
|
},
|
|
"cardDetailsScreen": {
|
|
"backgroundColor": "#F0F5FF",
|
|
"paddingTop": "20px",
|
|
"paddingHorizontal": "20px",
|
|
"sectionsGap": "20px"
|
|
}
|
|
},
|
|
"icons": [
|
|
"Left arrow (back)",
|
|
"Share",
|
|
"Calendar",
|
|
"Credit Card (Mastercard/Visa)",
|
|
"Eye (show/hide CVC)",
|
|
"Checkmark (success message)",
|
|
"Credit Card Placeholder (for Add Now button)"
|
|
]
|
|
} |