ok
Mini Shell
<?php
include "header.php";
$ids = $_SESSION['astrologer']['id'];
$query = "SELECT * FROM tbl_astrologer where id = ".$ids;
$prepared = $pdo->prepare($query);
$prepared->execute();
$result = $prepared->fetchAll(PDO::FETCH_ASSOC);
?>
<style>
.intro{
background: #fff;
padding: 60px 30px;
color: #333;
margin-bottom: 15px;
line-height: 1.5;
text-align: center;
}
.intro h1 {
font-size: 18pt;
padding-bottom: 15px;
}
.intro p{
font-size: 14px;
}
.container{
display:block;
}
.action{
text-align: center;
display: block;
margin-top: 20px;
}
a.btn {
text-decoration: none;
color: #666;
border: 2px solid #666;
padding: 10px 15px;
display: inline-block;
margin-left: 5px;
}
a.btn:hover{
background: #666;
color: #fff;
transition: .3s;
-webkit-transition: .3s;
}
.btn:before{
font-family: FontAwesome;
font-weight: normal;
margin-right: 10px;
}
.github:before{content: "\f09b"}
.down:before{content: "\f019"}
.back:before{content:"\f112"}
.credit{
background: #fff;
padding: 12px;
font-size: 9pt;
text-align: center;
color: #333;
margin-top: 40px;
}
.credit span:before{
font-family: FontAwesome;
color: #e41b17;
content: "\f004";
}
.credit a{
color: #333;
text-decoration: none;
}
.credit a:hover{
color: #1DBF73;
}
.credit a:hover:after{
font-family: FontAwesome;
content: "\f08e";
font-size: 9pt;
position: absolute;
margin: 3px;
}
main{
background: #fff;
padding:: 20px;
}
article li{
color: #444;
font-size: 15px;
margin-left: 33px;
line-height: 1.5;
padding: 5px;
}
article h1,
article h2,
article h3,
article h4,
article p{
padding: 14px;
color: #333;
}
:root {
--prm-color: #0381ff;
--prm-gray: #b1b1b1;
}
/* CSS */
.steps {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
position: relative;
/*z-index: -1;*/
}
.test{
display:block;
}
main{
display:block;
}
.step-button {
width: 25px;
height: 25px;
border-radius: 50%;
border: none;
background-color: var(--prm-gray);
transition: .4s;
}
.step-button[aria-expanded="true"] {
width: 30px;
height: 30px;
background-color: var(--prm-color);
color: #fff;
}
.done {
background-color: var(--prm-color);
color: #fff;
}
.step-item {
z-index: 10;
text-align: center;
}
#progress {
-webkit-appearance:none;
position: absolute;
width: 88%;
z-index: 5;
height: 5px;
margin-left: 18px;
margin-bottom: 18px;
}
#content{
display:none;
}
/* to customize progress bar */
#progress::-webkit-progress-value {
background-color: var(--prm-color);
transition: .5s ease;
}
#progress::-webkit-progress-bar {
background-color: var(--prm-gray);
}
</style>
<div id="content">
<!-- login section start -->
<section class="form-section px-15 section-b-space">
<div class="row"
style="margin-top: 50px;">
<div class="col-12 col-sm-12">
<center><h1>Alliance Register Form</h1></center>
</div>
</div>
<!-- Start Stepper HTML -->
<div class="container">
<div class="accordion" id="accordionExample">
<div hidden class="card">
<div id="headingOne">
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
data-bs-parent="#accordionExample">
<div class="card-body">
</div>
</div>
</div>
<div hidden class="card">
<div id="headingTwo">
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="card-body">
</div>
</div>
</div>
<div hidden class="card">
<div id="headingThree">
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree"
data-bs-parent="#accordionExample">
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
<form id="verification">
<div id="verification_proof">
<center><h3><b>Verification Proof</b></h3></center><br>
<div class="form-group">
<!-- <label for="profileImage" class="form-label">Profile Image</label>-->
<!-- <input type="file" class="form-control-file" id="profileImage" name="profileImage" accept="image/*" onchange="displaySelectedImage(this, 'previewImage');" />-->
<!-- <small class="form-text text-muted"> Upload a profile image (JPEG or JPG).</small>-->
<!--</div>-->
<div class="form-group">
<img id="previewImage" src="" alt="Preview" class="img-fluid" style="max-width: 200px; margin-top: 10px; display: none;">
</div>
<label for="age">Profile Photos</label>
<div class="row mb-4" style="padding:10px;">
<div class="col-12" style="border:1px solid gray;padding:10px;border-radius:10px;">
<div class="row">
<div class="col-8"><img src="images/icon/star.png" style="margin-bottom:10px;">Choose the Your Profile Photos from your <span style="color:blue;">computer / phone's gallery</span><br><img src="images/icon/star.png" style="margin-bottom:10px;">Take a Your Profile Photos using <span style="color:blue;">mobile camera.</span></div>
<div class="col-2" style="text-align:center;align-items:center;"><img src="images/icon/no-img.png" style="width:100%;height:30px;"></div>
<div class="col-2" style="text-align:center;align-items:center;"><img src="images/icon/no-camera.png" style="width:100%;height:30px;"></div>
<!--testing-->
<div class="col-md-12">
<!--<label for="proof_first" class="form-label">Profile Image</label>-->
<input type="file" class="form-control-file" <?=$input_style?> name="proof_first" id="proof_first" onchange="displaySelectedImage(this, 'blah_bus_one');" /><br>
<input type="hidden" name="oldfileInput_first" value="<?=$result[0]['v_photos']?>" class="form-control tip" id="oldfileInput_first" />
<small class="form-text text-muted"> Upload a profile image (JPEG or JPG).</small>
<center><img id="blah_bus_one" src="<?=$result[0]['v_photos']?>" style="width: 150px; padding: 10px;"></center>
</div>
<!--Testing end-->
</div>
</div>
</div>
<div class="form-floating mb-4">
<input type="text" class="form-control" name="verified_aadhar_name" id="verified_aadhar_name" value="<?=$result[0]['name']?>" placeholder="Enter Aadhar No"/>
<label for="age">Enter Applicant's Aadhar Name</label>
</div>
<div class="form-floating mb-4">
<input type="text" class="form-control" name="verified_aadhar_no" id="verified_aadhar_no" value="<?=$result[0]['v_aadhar_no']?>" placeholder="Enter Aadhar No"/>
<label for="age">Enter Applicant's Aadhar No</label>
</div>
<div class="form-floating mb-4">
<input type="text" class="form-control" name="verified_aadhar_mobile_no" value="<?=$result[0]['v_aadhar_mobile']?>" id="verified_aadhar_mobile_no" />
<label for="age">Enter Applicant's Aadhar Mobile No</label>
</div>
<div class="row mb-4" style="padding:10px;">
<div class="col-12" style="border:1px solid gray;padding:10px;border-radius:10px;">
<div class="row">
<div class="col-8"><img src="images/icon/star.png" style="margin-bottom:10px;">Choose the image of Aadhaar card from your <span style="color:blue;">computer / phone's gallery</span><br><img src="images/icon/star.png" style="margin-bottom:10px;">Take a image of Aadhaar card using<span style="color:blue;">mobile camera.</span></div>
<div class="col-2" style="text-align:center;align-items:center;"><img src="images/icon/no-img.png" style="width:100%;height:30px;"></div>
<div class="col-2" style="text-align:center;align-items:center;"><img src="images/icon/no-camera.png" style="width:100%;height:30px;"></div>
<!--testing-->
<div class="col-md-12">
<!--<label for="proof_zero" class="form-label">Aadhar</label>-->
<input type="file" class="form-control-file" <?=$input_style?> name="proof_zero" id="proof_zero" onchange="displaySelectedImage(this, 'blah_bus_zero');" /><br>
<input type="hidden" name="oldfileInput_zero" value="<?=$result[0]['v_aadhar']?>" class="form-control tip" id="oldfileInput_zero" />
<small class="form-text text-muted"> Upload a Aadhar image (JPEG or JPG).</small>
<center><img id="blah_bus_zero" src="<?=$result[0]['v_aadhar']?>" style="width: 150px; padding: 10px;"></center>
</div>
<!--Testing end-->
</div>
</div>
</div>
<div class="form-floating mb-4">
<input type="text" class="form-control" name="birth_certificatenumber" value="<?=$result[0]['v_birth_cert_no']?>" id="birth_certificatenumber" />
<label for="age">Birth Certificate Number</label>
</div>
<div class="row mb-4" style="padding:10px;">
<div class="col-12" style="border:1px solid gray;padding:10px;border-radius:10px;">
<div class="row">
<div class="col-8"><img src="images/icon/star.png" style="margin-bottom:10px;">Choose the image of Birth Certificate from your <span style="color:blue;">computer / phone's gallery</span><br><img src="images/icon/star.png" style="margin-bottom:10px;">Take a image of Aadhaar card using<span style="color:blue;">mobile camera.</span></div>
<div class="col-2" style="text-align:center;align-items:center;"><img src="images/icon/no-img.png" style="width:100%;height:30px;"></div>
<div class="col-2" style="text-align:center;align-items:center;"><img src="images/icon/no-camera.png" style="width:100%;height:30px;"></div>
<!--testing-->
<div class="col-md-12">
<!--<label for="proof_two" class="form-label">Birth Certificate</label>-->
<input type="file" class="form-control-file" <?=$input_style?> name="proof_two" id="proof_two" onchange="displaySelectedImage(this, 'blah_bus_two');" /><br>
<small class="form-text text-muted"> Upload a Birth Certificate image (JPEG or JPG).</small>
<input type="hidden" name="oldfileInput_two" value="<?=$result[0]['v_birthcert']?>" class="form-control tip" id="oldfileInput_two" />
<center><img id="blah_bus_two" src="<?=$result[0]['v_birthcert']?>" style="width: 150px; padding: 10px;"></center>
</div>
<!--Testng end-->
</div>
</div>
</div>
<div class="form-floating mb-4">
<input type="text" class="form-control" name="communication_certificate" value="<?=$result[0]['h_communication_no']?>" id="communication_certificate" />
<label for="age">Communication Certificate</label>
</div>
<div class="row mb-4" style="padding:10px;">
<div class="col-12" style="border:1px solid gray;padding:10px;border-radius:10px;">
<div class="row">
<div class="col-8"><img src="images/icon/star.png" style="margin-bottom:10px;">Choose the image of Communication from your <span style="color:blue;">computer / phone's gallery</span><br><img src="images/icon/star.png" style="margin-bottom:10px;">Take a image of Aadhaar card using<span style="color:blue;">mobile camera.</span></div>
<div class="col-2" style="text-align:center;align-items:center;"><img src="images/icon/no-img.png" style="width:100%;height:30px;"></div>
<div class="col-2" style="text-align:center;align-items:center;"><img src="images/icon/no-camera.png" style="width:100%;height:30px;"></div>
<!--testing-->
<div class="col-md-12">
<!--<label for="proof_two" class="form-label">Communication</label>-->
<input type="file" class="form-control-file" <?=$input_style?> name="proof_three" id="proof_three" onchange="displaySelectedImage(this, 'blah_bus_three');" /><br>
<small class="form-text text-muted"> Upload a Communication Certificate image (JPEG or JPG).</small>
<input type="hidden" name="oldfileInput_three" value="" class="form-control tip" id="oldfileInput_three" />
<center><img id="blah_bus_three" src="<?=$result[0]['h_communication']?>" style="width: 150px; padding: 10px;"></center>
</div>
<input type="hidden" name="ids" value="<?=$ids?>" />
<!--Testing end-->
</div>
</div>
</div>
<b>Agreement :</b><br
<input type="checkbox" name="agreement" id="agreement"><span>I have read and agree to comply with and/or be bound by the <span style="color:violet">Weddinfo</span> Alliance <span style="color:violet">Terms & Conditions.</span> </span><br>
</div>
<button class="btn btn-solid w-100"> Sign UP</button>
</form>
</section>
<!-- login section end -->
<!-- panel space start -->
<section class="panel-space"></section>
<!-- panel space end -->
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<script>
<script>
var input = document.querySelector("#mobile_no");
window.intlTelInput(input, {
separateDialCode: true,
excludeCountries: ["il"],
preferredCountries: ["in"]
});
var alter_input = document.querySelector("#alter_mobile_no");
window.intlTelInput(alter_input, {
separateDialCode: true,
excludeCountries: ["il"],
preferredCountries: ["in"]
});
</script>
<script>
$(document).ready(function() {
// Hide the loader and show the content after 5 seconds
setTimeout(function() {
$('.loader').hide();
$('#content').show();
}, 2000); // 5000 milliseconds = 5 seconds
});
function displaySelectedImage(input, imgId) {
const imgElement = document.getElementById(imgId);
if (input.files && input.files[0]) {
const reader = new FileReader();
reader.onload = function(e) {
imgElement.src = e.target.result;
};
reader.readAsDataURL(input.files[0]);
} else {
imgElement.src = '';
}
}
</script>
<script>
const stepButtons = document.querySelectorAll('.step-button');
const progress = document.querySelector('#progress');
Array.from(stepButtons).forEach((button,index) => {
button.addEventListener('click', () => {
progress.setAttribute('value', index * 100 /(stepButtons.length - 1) );//there are 3 buttons. 2 spaces.
stepButtons.forEach((item, secindex)=>{
if(index > secindex){
item.classList.add('done');
}
if(index < secindex){
item.classList.remove('done');
}
})
})
})
</script>
<script>
$(document).ready(function() {
// $(document).ready(function(){
// // Show the loader and hide content when the page starts loading
// $("#loader").show();
// $("#content").hide();
// // Simulate loading content (you can replace this with your actual content loading logic)
// setTimeout(function(){
// // Hide the loader and show content when the content has finished loading
// $("#loader").hide();
// $("#content").show();
// }, 2000); // 2000 milliseconds (2 seconds) is just an example; adjust as needed
// });
$('#verification').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
formData.append('type', 'verification');
console.log(formData);
$.ajax({
url: 'api/astrologer_add.php',
type: 'post',
dataType: 'json',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(response) {
console.log(response);
if (response['status'] == 200) {
alert(response['message']);
$(this).trigger("reset");
window.location.href = 'index.php';
} else {
alert(response['message']);
}
}
});
});
});
</script>
<?php
include "footer.php"; ?>
Zerion Mini Shell 1.0