feat: Implement admin dashboard and page collection

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.
2025-06-29 23:33:46 +07:00
parent 718ae8be96
commit 4d81bb4621
7 changed files with 651 additions and 0 deletions
--- a/design-styles.json
+++ b/design-styles.json
@@ -0,0 +1,190 @@
+{
+  "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)"
+  ]
+}