Obanana.Corporation
/
obananapay_admin
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added modal image on edit-kyc

This commit is contained in:
gelonspr 2024-03-08 10:34:02 +08:00
parent 27197918b6
commit fd058edfd0
2 changed files with 176 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

205
users/edit-kyc.css
View File

@ -1,80 +1,157 @@
body { body {
justify-content: space-between; justify-content: space-between;
margin: 0; margin: 0;
} }
h1 { h1 {
margin: 0; margin: 0;
} }
.mainContainer { .mainContainer {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-left: 10rem; padding-left: 10rem;
padding-right: 10rem; padding-right: 10rem;
} }
.section { .section {
width: 45%; width: 45%;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
} }
.section h2 { .section h2 {
margin-bottom: 10px; margin-bottom: 10px;
} }
.form-container { .form-container {
margin-bottom: 20px; margin-bottom: 20px;
padding-top: 0px; padding-top: 0px;
} }
form { form {
width: 100%; width: 100%;
} }
label { label {
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
} }
input { input {
width: 100%; width: 100%;
padding: 8px; padding: 8px;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 10px; margin-bottom: 10px;
} }
.image-container { .image-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
} }
img { img {
width: 48%; width: 48%;
height: auto; height: auto;
max-height: 200px; max-height: 200px;
object-fit: cover; object-fit: cover;
margin-bottom: 10px; margin-bottom: 10px;
} }
.checkboxFormContainer { .checkboxFormContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.checkbox-container { .checkbox-container {
margin-bottom: 10px; margin-bottom: 10px;
/* Adjust the margin as needed */ /* Adjust the margin as needed */
} }
.checkbox-label { .checkbox-label {
display: block; display: block;
} }
.kycImg , .selfieImg{
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.kycImg:hover , .selfieImg:hover{
box-shadow: 5px 10px 5px lightblue;
opacity: 0.7;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
height: auto;
max-width: 700px;
}
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}

38
users/edit-kyc.php
View File

@ -6,6 +6,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="edit-kyc.css"> <link rel="stylesheet" href="edit-kyc.css">
</head> </head>
<body> <body>
@ -32,12 +34,17 @@
<?php <?php
// Display selfie image // Display selfie image
if (!empty($array['selfie'])) { if (!empty($array['selfie'])) {
echo '<img src="' . $array['selfie'] . '" alt="Selfie Image">'; echo '<img src="' . $array['selfie'] . '" alt="Selfie Image" id="kycImg" class="selfieImg" onclick="trigger(\'kycImg\', \'Selfie Image\');">';
} else { } else {
echo '<p>No selfie available.</p>'; echo '<p>No selfie available.</p>';
} }
?> ?>
</div> </div>
<div id="myModal" class="modal">
<span class="close" onclick="closeModal()">&times;</span>
<img class="modal-content" id="img01" style="max-width: 100%; max-height: 80vh; width: auto; height: auto; margin: auto; display: block;">
</div>
<h3>User Information</h3> <h3>User Information</h3>
<div class="form-container"> <div class="form-container">
<fieldset disabled> <fieldset disabled>
@ -69,13 +76,19 @@
<?php <?php
if (!empty($array['images'])) { if (!empty($array['images'])) {
foreach ($array['images'] as $image) { foreach ($array['images'] as $image) {
echo '<img src="' . $image['link'] . '" alt="KYC Image">';
$img = $image['link'] ;
echo '<img src="' . $img . '" alt="KYC Image" id="'. $img . '" class="kycImg" onclick="trigger(\''. $img . '\', \'KYC Image\');">';
} }
} else { } else {
echo '<p>No images available.</p>'; echo '<p>No images available.</p>';
} }
?> ?>
</div> </div>
<div id="myModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img01">
</div>
<h3>KYC Information</h3> <h3>KYC Information</h3>
<div class="form-container"> <div class="form-container">
<form> <form>
@ -136,7 +149,7 @@
</div> </div>
</div> </div>
<script> <script type="text/javascript">
function handleCheckboxChange() { function handleCheckboxChange() {
// Check the status of checkboxes and enable/disable the "Accept" button // Check the status of checkboxes and enable/disable the "Accept" button
var areAllChecked = document.querySelectorAll('#checkboxForm input[type="checkbox"]:checked').length === 4; var areAllChecked = document.querySelectorAll('#checkboxForm input[type="checkbox"]:checked').length === 4;
@ -178,6 +191,25 @@
alert("Please provide a valid reason for rejection."); alert("Please provide a valid reason for rejection.");
} }
} }
var captionText = document.getElementById("captionText");
function trigger(var1, caption) {
var modal = document.getElementById("myModal");
var modalImg = document.getElementById("img01");
modal.style.display = "block";
modalImg.src = document.getElementById(var1).src;
captionText.innerHTML = caption;
}
var span = document.getElementsByClassName("close")[0];
function closeModal() {
var modal = document.getElementById("myModal");
modal.style.display = "none";
}
</script> </script>
<div class="modal fade" id="rejectModal" tabindex="-1" role="dialog" aria-labelledby="rejectModalLabel" aria-hidden="true"> <div class="modal fade" id="rejectModal" tabindex="-1" role="dialog" aria-labelledby="rejectModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">