<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4 formDesign">
<!-- ********** Facebook ********* -->
<div class="fbbody mt-4">
<a href="index.php"> <button class="noticebtn"><i class="fa fa-facebook-square" ></i>Login With Facebook</button></a>
</div>
<!-- ******* Form Header ******** -->
<div class="formHeader">
<div>
<div class="loginHeader formActiveBorder" id="loginfornlink">Login</div>
<div class="signupHeader" id="signupforlinkm">Sign up</div>
</div>
</div>
<!-- ******* End Form Header ******** -->
<!-- ************** login form ********* -->
<div class="logincontain" id="loginforn">
<form method="post" action="login.php">
<div class="form-group">
<!-- user name -->
<input type="text" class="form-control" placeholder="USERNAME" name="usernameLogin" id="username" required>
</div>
<div class="form-group">
<!-- password -->
<input type="password" class="form-control" placeholder="PASSWORD" name="passwordLogin" id="password" required>
</div>
<div class="form-group form-check">
<label class="formResetPass">
<!-- Reset password -->
<a href="#" data-toggle="modal" data-target="#resetModal">Reset Password</a>
</label>
</div>
<!-- login btn -->
<button type="submit" name="login" class="loginBtn formBtn">Login</button>
</form>
</div>
<!-- ******************* Reset Password Model ************* -->
<!-- reset modal -->
<div id="resetModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Reset Password</h4>
</div>
<div class="modal-body">
<div class="text-center">
<p>Enter Your Email And Reset Your Password</p>
<form method="post" action="">
<input class="login-input" type="email" name="resetEmail" placeholder="Your email address" style="width: 70%; border-radius: 5px; border: 1px solid black;">
<br>
<input type="submit" value="Reset Password" class="btn btn-primary">
</form>
</div>
</div>
<!-- cancel btn -->
<div class="modal-footer"><button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button></div>
</div>
</div>
</div><!-- ./ reset modal -->
<!-- ***************** end Login form *********** -->
<!-- ************** Sign up form ********* -->
<div class="signupcontain" id="signupform">
<form method="post" action="login.php">
<!-- *************** First View *************** -->
<div class="firstview">
<p class="text-center mt-4">Login Time This Details Verify</p>
<div class="form-group" style="margin-top: -20px !important;">
<!-- user name -->
<input type="text" class="form-control" placeholder="LOGIN USERNAME" name="username" id="username" required>
</div>
<div class="form-group">
<!-- password -->
<input type="password" class="form-control" placeholder="LOGIN PASSWORD" name="password" id="password" required>
</div>
<div class="form-group">
<select name="status" class="custom-select form-control" required>
<option value="" disabled selected>SELECT IDENTITY</option>
<option value="ADMIN">STUDENT</option>
<option value="COMPUTER">TEACHER</option>
<option value="CIVIL">ADMIN</option>
</select>
</div>
<style type="text/css">
::-webkit-file-upload-button {
background: #f6f6f68f !important;
color: #495057;
padding: 0.5em;
}
.file-profilr{
padding-top: 10px;
content: 'Select Profile';
}
</style>
<div class="form-group">
<!-- file -->
<input type="file" class="file-profilr" name="upload_image" id="upload_image" required/>
<br />
<div id="uploaded_image"></div>
</div>
<!-- ******* img pop pop ****** -->
<div id="uploadimageModal" class="modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a type="button" class="close" data-dismiss="modal">×</a>
<h4 class="modal-title">Upload & Crop Image</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8 text-center">
<div id="image_demo" style="width:350px; margin-top:30px"></div>
</div>
<div class="col-md-4" style="padding-top:30px;">
<br />
<br />
<br/>
<a class="btn btn-success crop_image">Crop & Upload Image</a>
</div>
</div>
</div>
<div class="modal-footer">
<a type="button" class="btn btn-default" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
<!-- ************ end pop pop ****** -->
</div>
<!-- *************** second View *************** -->
<div class="secondview">
<div class="form-group">
<!-- user name -->
<input type="email" class="form-control" placeholder="E-MAIL" name="email" id="email" required>
</div>
<div class="form-group">
<!-- password -->
<input type="number" class="form-control" placeholder="MOBILE NO" name="mobile" id="mobile" required>
</div>
<div class="form-group">
<select name="branch" class="custom-select form-control" required>
<option value="" disabled selected>SELECT BRANCH</option>
<option value="ADMIN">ADMIN</option>
<option value="COMPUTER">COMPUTER</option>
<option value="CIVIL">CIVIL</option>
<option value="ELECTRICAL">ELECTRICAL</option>
</select>
</div>
<div class="form-group">
<!-- Erno -->
<input type="number" class="form-control" placeholder="ENROOLMENT NO" name="erno" id="erno" required>
</div>
</div> <br>
<!-- Next btn -->
<p id="next" class="nextBtn btn">Next</p>
<p id="previous" class="previous btn">Previous</p>
<button id="submit" name="signup" class="nextBtn">Submit</button>
<br><br>
</form>
</div>
<!-- ***************** end Sign up form *********** -->
</div>
</div>
</div>
*,
*::before,
*::after{
box-sizing: border-box;
}
:root{
--hd-ft-bgcolor: #40baff;
--hd-ft-fontcolor: #6c6363eb;
--hd-ft-hoverheaderBg:#40baff;
--hd-ft-hoverheaderfont: #fff;
--hd-ft-header:#3b5998;
}
/*var(--hd-ft-bgcolor); */
body{
background-color: #fbfbfb;
}
/********* login gesign ***********/
.formDesign{
margin-top: 6%;
background-color: #fff;
padding: 0px !important;
border-radius: 10px;
}
.formActiveBorder{
border-bottom: 3px solid var(--hd-ft-bgcolor);
}
.loginHeader{
color: var(--hd-ft-fontcolor);
padding: 5px;
text-align: center;
width: 50%;
float: left;
font-weight: bold;
cursor: pointer;
}
.signupHeader{
color: var(--hd-ft-fontcolor);
padding: 5px;
text-align: center;
width: 50%;
float: left;
font-weight: bold;
cursor: pointer;
}
.signupHeader:hover,.loginHeader:hover{
background-color: var(--hd-ft-hoverheaderBg);
color: var(--hd-ft-hoverheaderfont);
}
.formHeader{
display: flow-root;
border-bottom: 1px solid var(--hd-ft-hoverheaderBg);
padding: 15px 0 0 0;
font-size: 16px;
}
.fbbody{
padding: 15px 30px;
text-align: center;
}
.fbbody button{
border-radius: 5px;
border: 2px solid #e5d7d761;
cursor: pointer;
font-weight: bold;
padding: 5px;
width: 100%;
}
.noticebtn{
background-color: var(--hd-ft-header);
color: #fff;
}
.fa-facebook-square{
color: #3b5998;
width: 35px;
}
.leftBoarder{
border-bottom: 1px solid var(--hd-ft-bgcolor);
width: 44%;
float: left;
margin-top: 10px;
}
.rightBoarder{
border-bottom: 1px solid var(--hd-ft-bgcolor);
width: 44%;
float: right;
margin-top: 10px;
}
.or{
margin-left: 3%;
}
.logincontain,.signupcontain{
padding: 0px 45px 45px 45px;
display: flow-root;
}
input[type=select],input[type=number],input[type=text],input[type=email], input[type=password] {
width: 100%;
padding: 6px;
background-color: #f6f6f68f !important;
margin-top: 16px;
margin-bottom: 16px;
resize: vertical;
}
.form-control{
margin-top: 40px !important
}
.formResetPass{
color: #a3a39f;
}
.loginBtn,.regnBtn{
width: 100%;
padding: 5px;
font-size: 20px;
background-color: var(--hd-ft-bgcolor);
color: #fff;
border-radius: 5px;
border: 0px;
margin:10px auto 10px auto !important;
}
.formBtn:hover{
background-color: #3b5998;
cursor: pointer;
}
.checkboxReg{
zoom:1 ;
margin-left: 0px !important;
margin-top: 1rem !important;
}
.nextBtn{
width: 30%;
padding: 5px;
font-size: 20px;
background-color: var(--hd-ft-bgcolor);
color: #fff;
border-radius: 5px;
border: 0px;
margin:10px auto 10px auto !important;
float: right;
}
.nextBtn:hover{
background-color: #3b5998;
color: #fff;
}
.previous{
width: 35%;
padding: 5px;
font-size: 20px;
background-color: #d1d1d1 ;
border-radius: 5px;
border: 0px;
margin:10px auto 10px auto !important;
float: left;
}
.previous:hover{
background-color: #3b5998;
color: #fff;
}
#signupform{
display: none;
}
.firstview,#previous,#submit{
display: none;
}
/*the container must be positioned relative:*/
.custom-select {
width: 100%;
padding: 6px;
background-color: #f6f6f68f !important;
resize: vertical;
margin-top: 25px !important;
}
.form-fileDesign{
/*opacity: 0;*/
}
.fileDiv{
border: 1px solid #ced4da;
border-radius: 5px;
padding: 5px 31% 5px 32%;
margin-top: -14%;
background-color: #f6f6f68f !important;
}
.fileUpd{
border: 1px solid #ced4da;
border-radius: 5px;
padding: 5px 31% 5px 32%;
margin-top: -8%;
background-color: #f6f6f68f !important;
z-index: -1;
}
.custom-file-input {
color: transparent;
}
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select some files';
color: black;
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active {
outline: 0;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
//************** FORM HEADER SELECT LOGIN/SINGUP FORM *****************
$("#loginfornlink").click(function () {
$(this).addClass('formActiveBorder');
$("#signupforlinkm").removeClass('formActiveBorder');
$("#signupform").hide();
$("#loginforn").fadeIn(500);
});
$("#signupforlinkm").click(function () {
$(this).addClass('formActiveBorder');
$("#loginfornlink").removeClass('formActiveBorder');
$("#loginforn").hide();
$("#signupform").fadeIn(500);
});
//************ signup html view ***********
$("#next").click(function () {
$(".secondview").hide();
$(".firstview").show(300);
$(this).hide();
$("#previous").show();
$("#submit").show();
});
$("#previous").click(function () {
$(".firstview").hide();
$(".secondview").show(300);
$(this).hide();
$("#next").show();
$("#submit").hide();
});
$(".close").click(function () {
$(".error").hide(200);
});
$(document).ready(function(){
$image_crop = $('#image_demo').croppie({
enableExif: true,
viewport: {
width:200,
height:200,
type:'square' //circle
},
boundary:{
width:300,
height:300
}
});
$('#upload_image').on('change', function(){
var reader = new FileReader();
reader.onload = function (event) {
$image_crop.croppie('bind', {
url: event.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
$('#uploadimageModal').modal('show');
});
$('.crop_image').click(function(event){
$image_crop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(response){
$.ajax({
url:"upload.php",
type: "POST",
data:{"image": response},
success:function(data)
{
$('#uploadimageModal').modal('hide');
$('#uploaded_image').html(data);
}
});
})
});
});
