0% found this document useful (0 votes)
22 views48 pages

E011 - Devanshi Chauhan - Lab 9 - ES

This document outlines the coding of functionalities for an admin login and dashboard page for a human resource management system. It includes HTML, CSS, JavaScript code for an admin login page with form validation and password hiding features. It also includes code for an admin dashboard page with navigation menu.

Uploaded by

preetidharm203
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
22 views48 pages

E011 - Devanshi Chauhan - Lab 9 - ES

This document outlines the coding of functionalities for an admin login and dashboard page for a human resource management system. It includes HTML, CSS, JavaScript code for an admin login page with form validation and password hiding features. It also includes code for an admin dashboard page with navigation menu.

Uploaded by

preetidharm203
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 48

Lab 9 – Coding the functionalities of the project

Admin Login

<!DOCTYPE HTML>
<html>
<head>
<title>Login Page - HRM</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Pooled Responsive web template, Bootstrap Web Templates,
Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson,
Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() {
setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
</script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="css/morris.css" type="text/css"/>
<!-- Graph CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="css/jquery-ui.css">
<!-- jQuery -->
<script src="js/jquery-2.1.4.min.js"></script>
<!-- //jQuery -->
<link href='//fonts.googleapis.com/css?family=Roboto:700,500,300,100italic,100,400'
rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet'
type='text/css'>
<!-- lined-icons -->
<link rel="stylesheet" href="css/icon-font.min.css" type='text/css' />
<!-- //lined-icons -->
<style>
html{
min-height: calc(100%);
width:calc(100%);
}
body, .main-wthree{
width:calc(100%);
min-height: 100vh;
}
.main-wthree{
padding-bottom:2em;
display:flex;
flex-direction: column;
align-items:center;
justify-content:center;
}
.footer{
width:100%;
position:fixed;
bottom:0;
left:0
}
.sin-w3-agile{
padding:0;
}
.login{
background-color: #010101;
background-image: linear-gradient(160deg, #010101 0%, #4e6865 100%);
}
.login-w3 {
width: 100%;
float: unset;
text-align: center;
}
.main-wthree input[type="submit"]:hover {
background: #3e5250;
}
</style>
</head>
<body>
<div class="main-wthree">
<div class="container">
<h1 class="text-center text-white">Human Resource Management System</h1>
<div class="sin-w3-agile">
<h2>Login In</h2>
<form action="controller/login.php" method="post">
<div class="email">
<span class="email">Email:</span>
<input type="Email" name="name" class="name" placeholder="Enter Email
Address">
<div class="clearfix"></div>
</div>
<div class="password-agileits">
<span class="username">Password: <i class="fa fa-eye-slash" aria-
hidden="false" style="padding-left: 20px;" onclick="passwordeyes(this);"></i></span>
<input type="password" name="password" id="Psw" class="password"
placeholder="Enter Password">
<div class="clearfix"></div>
</div>
<h4 style="color: #F1C40F;"></h4>

<div class="login-w3">
<input type="submit" name="submit" class="login" value="Sign In">
</div>
<div class="clearfix"></div>
<h5 class="text-center"><a href="./user" class="text-white" >Login as an
Employee</a></h5>
<div class="clearfix"></div>
</form>
<!-- <div class="back">
<a href="index.php">Back to home</a>
</div> -->
<div class="footer">
<p>Human Resource Managemant System. All Rights Reserved &copy;
2024 </p>
</div>
</div>
</div>
</div>
<script>
function passwordeyes(_this) {
var x = document.getElementById("Psw").type;
if(x=="password"){
document.getElementById("Psw").type="text";
_this.setAttribute('class', "fa fa-eye")
}else{
document.getElementById("Psw").type="password";
_this.setAttribute('class', "fa fa-eye-slash")
}
}
</script>
</body>
</html>

Admin Dashboard

<!DOCTYPE HTML>
<html>
<head>
<title>Home - HRM</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content=" Bootstrap Web Templates, Flat Web Templates, Android
Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson,
Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() {
setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
</script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="css/morris.css" type="text/css"/>
<!-- Graph CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery-2.1.4.min.js"></script>
<!-- //jQuery -->
<link href='//fonts.googleapis.com/css?family=Roboto:700,500,300,100italic,100,400'
rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet'
type='text/css'>
<!-- lined-icons -->
<link rel="stylesheet" href="css/icon-font.min.css" type='text/css' />
<!-- //lined-icons -->

<!-- datepicker-->
<link rel="stylesheet" type="text/css" href="dp/jquery.datetimepicker.css"/>
<script src="dp/jquery.datetimepicker.full.js"></script>

<!--Image Popup-->
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */


.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */


.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 20%;
}

/* Caption of Modal Image */


#caption {
margin: auto;
display: block;
width: 80%;
max-width: 70%;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}

/* Add Animation */
.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)}
}

/* The Close Button */


.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;
}

/* 100% Image Width on Smaller Screens */


@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
<!-- End image popup -->

</head>
<body>
<div class="page-container">
<!--/content-inner-->
<div class="left-content">
<div class="mother-grid-inner">
<!--header start here-->
<div class="header-main">
<div style="padding: 1.15em; margin-right: 0%; width: 70%;"
class="logo-w3-agile">
<h1 clas><a href="index.php">HRM</a></h1>
</div>
<div class="profile_details w3l" style="float: right; width: 29%;">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img
src="image/images (2).jpg" alt=""> </span>
<div class="user-name">
<p>admin&nbsp;admin</p>
<span>admin</span>
</div>
<i class="fa fa-angle-down"></i>
<i class="fa fa-angle-up"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="profile.php"><i class="fa fa-
user"></i> Profile</a> </li>
<li> <a href="controller/logout.php"><i
class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>

<div class="clearfix"> </div>


</div>

<ol class="breadcrumb" style="margin: 10px 0px ! important;">


<li class="breadcrumb-item" title="Home"><a href="index.php">Home</a></li>
</ol>
<!--four-grids here-->
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="panel panel-default bg-light dash-summary">
<div class="panel-body">
<a href="employeeview.php">
<div class="icon">
<i class="glyphicon glyphicon-user" aria-
hidden="true"></i>
</div>
<div class="four-text">
<h3>Employee</h3>
<h4>2</h4>
</div>
</a>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="panel panel-default bg-light dash-summary">
<div class="panel-body">
<a href="leaverequest.php">
<div class="icon">
<i class="glyphicon glyphicon-list-alt" aria-
hidden="true"></i>
</div>
<div class="four-text">
<h3>Leave Request</h3>
<h4>0</h4>
</div>
</a>
</div>
</div>
</div>
<!-- <div class="col-md-3 four-grid">
<div class="four-w3ls">
<div class="icon">
<i class="glyphicon glyphicon-folder-open" aria-
hidden="true"></i>
</div>
<div class="four-text">
<h3>Projects</h3>
<h4>12,430</h4>

</div>

</div>
</div> -->
<!-- <div class="col-md-3 four-grid">
<div class="four-wthree">
<div class="icon">
<i class="glyphicon glyphicon-briefcase" aria-
hidden="true"></i>
</div>
<div class="four-text">
<h3>Old Projects</h3>
<h4>14,430</h4>

</div>

</div>
</div> -->
<div class="clearfix"></div>
</div>
<!--//four-grids here-->

<!-- script-for sticky-nav -->


<script>
$(document).ready(function() {
var navoffeset=$(".header-main").offset().top;
$(window).scroll(function(){
var scrollpos=$(window).scrollTop();
if(scrollpos >=navoffeset){
$(".header-main").addClass("fixed");
}else{
$(".header-main").removeClass("fixed");
}
});

});
</script>
<!-- /script-for sticky-nav -->
<!--inner block start here-->

<!--inner block end here-->


<!--copy rights start here-->
<div style="margin-top: -20px;" class="copyrights">
<p>All Rights Reserved © 2024 Human Resource Management System </p>
</div>
<!--COPY rights end here-->
</div>
</div>
<!--//content-inner-->
<!--/sidebar-menu-->
<div class="sidebar-menu">
<header class="logo1">
<a href="#" class="sidebar-icon"> <span class="fa fa-bars"></span>
</a>
</header>
<div style="border-top:1px ridge rgba(255, 255, 255, 0.15)"></div>
<div class="menu">
<ul id="menu" >
<li><a href="home.php"><i class="fa fa-
tachometer"></i> <span>Dashboard </span><div class="clearfix"></div></a></li>

<li><a href="#"><i class="fa fa-


user"></i><span>Employee</span><span class="fa fa-angle-right" style="float:
right"></span><div class="clearfix"></div></a>
<ul>
<li><a href="employeeadd.php">Add
Employee</a></li>
<li><a href="employeeview.php">Employee
View</a></li>
<!-- <li><a href="atten.php">Attendece
Details</a></li>
<li><a href="modifiedlogout.php">Modified
Logout Time</a></li>
<li><a href="inquiry.php">Inquiry</a></li>
-->
</ul>
</li>
<li><a href="leaverequest.php"><i class="fa fa-
pagelines"></i><span>Leave</span></a>

</li>

<li id="menu-academico" ><a


href="changepassword.php"><i class="fa fa-cogs"></i><span>Change Password</span></a> <!--
<span class="fa fa-angle-right" style="float: right"></span><div class="clearfix"></div>
<ul id="menu-academico-sub">
<li id="menu-academico-avaliacoes" ><a
href="changepassword.php">Change Password</a></li>

</ul> -->
</li>

<!-- <li><a href="#"><i class="fa fa-check-square-o


nav_icon"></i><span>Forms</span> <span class="fa fa-angle-right" style="float:
right"></span><div class="clearfix"></div></a>
<ul>
<li><a href="employeeadd.php">All
Employee</a></li>
</ul>
</li> -->

<li><a href="#"><i class="fa fa-


list"></i><span>Master List</span> <span class="fa fa-angle-right" style="float:
right"></span><div class="clearfix"></div></a>
<ul>
<li><a href="city.php">City</a></li>
<li><a href="state.php">State</a></li>
<li><a href="country.php">Country</a></li>
<li><a
href="position.php">Position</a></li>
</ul>
</li>

</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
<script>
var toggle = true;

$(".sidebar-icon").click(function() {
if (toggle)
{
$(".page-container").addClass("sidebar-
collapsed").removeClass("sidebar-collapsed-back");
$("#menu span").css({"position":"absolute"});
}
else
{
$(".page-container").removeClass("sidebar-
collapsed").addClass("sidebar-collapsed-back");
setTimeout(function() {
$("#menu span").css({"position":"relative"});
}, 400);
}

toggle = !toggle;
});
</script>
<!--js -->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- /Bootstrap Core JavaScript -->

</body>
</html>

Add Employee Details

<!DOCTYPE HTML>
<html>
<head>
<title>HRM</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content=" Bootstrap Web Templates, Flat Web Templates, Android
Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson,
Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() {
setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
</script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="css/morris.css" type="text/css"/>
<!-- Graph CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery-2.1.4.min.js"></script>
<!-- //jQuery -->
<link href='//fonts.googleapis.com/css?family=Roboto:700,500,300,100italic,100,400'
rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet'
type='text/css'>
<!-- lined-icons -->
<link rel="stylesheet" href="css/icon-font.min.css" type='text/css' />
<!-- //lined-icons -->

<!-- datepicker-->
<link rel="stylesheet" type="text/css" href="dp/jquery.datetimepicker.css"/>
<script src="dp/jquery.datetimepicker.full.js"></script>

<!--Image Popup-->
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */


.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */


.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 20%;
}

/* Caption of Modal Image */


#caption {
margin: auto;
display: block;
width: 80%;
max-width: 70%;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.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)}
}

/* The Close Button */


.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;
}

/* 100% Image Width on Smaller Screens */


@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
<!-- End image popup -->

</head>
<body>
<div class="page-container">
<!--/content-inner-->
<div class="left-content">
<div class="mother-grid-inner">
<!--header start here-->
<div class="header-main">
<div style="padding: 1.15em; margin-right: 0%; width: 70%;"
class="logo-w3-agile">
<h1 clas><a href="index.php">HRM</a></h1>
</div>
<div class="profile_details w3l" style="float: right; width: 29%;">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img
src="image/images (2).jpg" alt=""> </span>
<div class="user-name">
<p>admin&nbsp;admin</p>
<span>admin</span>
</div>
<i class="fa fa-angle-down"></i>
<i class="fa fa-angle-up"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="profile.php"><i class="fa fa-
user"></i> Profile</a> </li>
<li> <a href="controller/logout.php"><i
class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>

<div class="clearfix"> </div>


</div>
<ol class="breadcrumb" style="margin: 10px 0px ! important;">
<li class="breadcrumb-item"><a href="Home.php">Home</a><i class="fa fa-angle-
right"></i>Employee<i class="fa fa-angle-right"></i> Employee Add</li>
</ol>
<!--grid-->
<div class="validation-system" style="margin-top: 0;">

<div class="validation-form">
<!---->
<form method="POST" action="controller/employee.php?empedit="
enctype="multipart/form-data">
<h4 style="color: #008000;"></h4> <div class="vali-form-group">
<div class="col-md-4 control-label">
<label class="control-label">Employee ID*</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user" aria-hidden="true"></i>
</span>
<input type="text" name="empid" title="Employee ID" value="" class="form-
control" placeholder="Employee ID" required="">
</div>
</div>

<div class="col-md-4 control-label">


<label class="control-label">Profile Image*</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-picture-o" aria-hidden="true"></i>
</span>
<input type="file" name="pfimg" title="Profile Image" class="form-control"
name="fileupload" >
</div>
</div>

<div class="col-md-4 control-label">


<label class="control-label">Gender*</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-male" aria-hidden="true"></i>
</span>
<select name="gender" title="Gender" required="" style="padding: 5px 5px;
text-transform: capitalize;"">
<option value="">-- Select Gender --</option>

<option value="2" > female </option>

<option value="1" > male </option>


</select>
</div>
</div>
</div>
<div class="clearfix"> </div>

<div class="vali-form-group">
<div class="col-md-4 control-label">
<label class="control-label">First Name*</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user" aria-hidden="true"></i>
</span>
<input type="text" name="fname" title="First Name" value="" class="form-
control" placeholder="First Name" required="">
</div>
</div>

<div class="col-md-4 control-label">


<label class="control-label">Middel Name*</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user" aria-hidden="true"></i>
</span>
<input type="text" name="mname" title="Middel Name" value="" class="form-
control" placeholder="Middel Name" required="">
</div>
</div>

<div class="col-md-4 control-label">


<label class="control-label">Last Name*</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user" aria-hidden="true"></i>
</span>
<input type="text" name="lname" title="Last Name" value="" class="form-
control" placeholder="Last Name" required="">
</div>
</div>
<div class="clearfix"> </div>
</div>

<div class="vali-form-group">
<div class="col-md-4 control-label">
<label class="control-label">Birth Date*</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
<input type="text" id="Birthdate" title="Birth Date" name="bdate"
placeholder="Birth Date" onkeyup="if (/\D/g.test(this.value)) this.value =
this.value.replace(/\D/g,'')" value="" class="form-control" required="">
</div>
</div>

<div class="col-md-4 control-label">


<label class="control-label">Marital*</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user" aria-hidden="true"></i>
</span>
<select name="marital" title="Marital" required="" style="text-transform:
capitalize;">
<option value="">-- Select Marital --</option>

<option value="1" > Married </option>

<option value="2" > Unmarried </option>


</select>
</div>
</div>

<div class="col-md-4 control-label">


<label class="control-label">Mobile Number*</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-mobile" aria-hidden="true"></i>
</span>
<input type="text" name="mnumber" title="Mobile Number" value="" class="form-
control" placeholder="Mobile Number" min="10" maxlength="10" onkeyup="if (/\
D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" required="">
</div>
</div>

</div>
<div class="clearfix"> </div>

<div class="col-md-12 control-label">


<label class="control-label">Address 1*</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-pencil " aria-hidden="true"></i>
</span>
<input type="text" name="address1" title="Address 1" value="" class="form-
control" placeholder="Address Line 1" required="">
</div>
</div>
<div class="clearfix"> </div>

<div class="col-md-12 control-label">


<label class="control-label">Address 2*</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-pencil " aria-hidden="true"></i>
</span>

<input type="text" name="address2" title="Address 2" value="" class="form-


control" placeholder="Address Line 2" required="">
</div>
</div>
<div class="clearfix"> </div>
<div class="col-md-12 control-label">
<label class="control-label">Address 3</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-pencil " aria-hidden="true"></i>
</span>
<input type="text" name="address3" title="Address 3" value="" class="form-
control" placeholder="Address Line 3">
</div>
</div>
<div class="clearfix"> </div>

<div class="vali-form-group">
<div class="col-md-3 control-label">
<label class="control-label">Country*</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-globe" aria-hidden="true"></i>
</span>
<select name="country" id="contryid" title="Country" required=""
onchange="contrychange()" style="text-transform: capitalize;">
<option value="">-- Select Country --</option>

<option value="11" > India </option>

<option value="1" > Philippines </option>

<option value="12" > Singapore </option>

<option value="9" > USA </option>


</select>
</div>
</div>

<div class="col-md-3 control-label">


<label class="control-label">State*</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-map-marker" aria-hidden="true"></i>
</span>
<select name="state" id="stateid" title="State" onchange="statechange()"
required="" style="text-transform: capitalize;">
<option value="">-- Select State --</option>
</select>
</div>
</div>

<div class="col-md-3 control-label">


<label class="control-label">City*</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-map-marker" aria-hidden="true"></i>
</span>
<select name="city" id="cityid" title="City" required="" style="text-
transform: capitalize;">
<option value="">-- Select City --</option>
</select>
</div>
</div>
<div class="clearfix"> </div>
</div>

<div class="vali-form-group">
<div class="col-md-3 control-label">
<label class="control-label">Join Date*</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
<input type="text" id="JoinDate" title="Join Date" name="joindate"
placeholder="Join Date" value="" class="form-control" required="" onkeyup="if (/\
D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">
</div>
</div>

<div class="col-md-3 control-label">


<label class="control-label">Leave Date</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
<input type="text" id="LeaveDate" title="Leave Date" name="leavedate"
placeholder="Leave Date" value="" class="form-control" onkeyup="if (/\D/g.test(this.value))
this.value = this.value.replace(/\D/g,'')">
</div>
</div>

<div class="col-md-3 control-label">


<label class="control-label">Status</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-map-marker" aria-hidden="true"></i>
</span>
<select name="status" title="Status" required="" style="text-transform:
capitalize;">
<option value="">-- Select Status --</option>

<option value="1" > active </option>

<option value="2" > inactive </option>


</select>
</div>
</div>

<div class="col-md-3 control-label">


<label class="control-label">Role*</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user" aria-hidden="true"></i>
</span>
<select name="role" required="" title="Role" style="text-transform:
capitalize;" >
<option value="">-- Select Role --</option>

<option value="1" > admin </option>

<option value="2" > admin-hr </option>

<option value="3" > employee </option>


</select>
</div>
</div>
<div class="clearfix"> </div>
</div>

<div class="vali-form-group">
<div class="col-md-3 control-label">
<label class="control-label">Position*</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-language" aria-hidden="true"></i>
</span>
<select name="position" title="Position" style="text-transform: capitalize;"
required="">
<option value="">-- Select Position --</option>

<option value="3" > Fullstack PHP Developer </option>

<option value="1" > HR </option>

<option value="2" > Web Developer </option>


</select>
</div>
</div>

<div class="col-md-3 control-label">


<label class="control-label">Email*</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-envelope" aria-hidden="true"></i>
</span>
<input type="email" name="email" title="Email" value="" class="form-control"
placeholder="Email Address" required="">
</div>
</div>

<div class="col-md-3 control-label">


<label class="control-label">Password*</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-pencil" aria-hidden="true"></i>
</span>
<input type="password" id="Psw" title="Password" value="" name="password"
placeholder="Password " class="form-control" required="">
<span class="input-group-addon">
<a><i class='fa fa-eye' aria-hidden='false' onclick="passwordeyes()"></i></a>
</span>
</div>
</div>

<div class="clearfix"> </div>


</div>
<div class="col-md-12 form-group">
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
<input type="text" name="imagefilename" hidden="" value="">
</div>
<div class="clearfix"> </div>
</form>
<!---->
</div>
</div>
<script>
function passwordeyes() {
var x = document.getElementById("Psw").type;
if(x=="password")
document.getElementById("Psw").type="text";
else
document.getElementById("Psw").type="password";
}

</script>
<script>
var OneStepBack;
function nmac(val,e){
if(e.keyCode!=8)
{
if(val.length==2)
document.getElementById("mac").value = val+"-";
if(val.length==5)
document.getElementById("mac").value = val+"-";
if(val.length==8)
document.getElementById("mac").value = val+"-";
if(val.length==11)
document.getElementById("mac").value = val+"-";
if(val.length==14)
{
document.getElementById("mac").value = val+"-";
}
}
}

function nmac1(val,e){
if(e.keyCode==32){
return false;
}

if(e.keyCode!=8){

if(val.length==2)
document.getElementById("mac").value = val+"-";
if(val.length==5)
document.getElementById("mac").value = val+"-";
if(val.length==8)
document.getElementById("mac").value = val+"-";
if(val.length==11)
document.getElementById("mac").value = val+"-";
if(val.length==14){
document.getElementById("mac").value = val+"-";
}

if(val.length==17){
return false;
}
}
}
</script>
<script>
contrychange();
function contrychange()
{
var selectedstateid = "0";
var selectedstateid = parseInt(selectedstateid);

var selectedcountry = $('#contryid').val();


$.get("controller/getstatecity.php?
Type=s&ci="+selectedcountry+"&ss="+selectedstateid,function(data,status){
$("#stateid").html(data);
});
statechange(selectedstateid);
}
function statechange(si)
{

var selectedstate = $('#stateid').val();


if(si!=undefined)
selectedstate=si;

var selectedcityid = "0";


selectedcityid = parseInt(selectedcityid);

$.get("controller/getstatecity.php?
Type=c&si="+selectedstate+"&sc="+selectedcityid,function(data,status){
$("#cityid").html(data);
});
}
</script>

<script>

var birthdate = $('#Birthdate').val();


var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
var yy = today.getFullYear();
var tdate = yy+"/"+mm+"/"+dd;

$('#Birthdate').datetimepicker({
yearOffset:0,
lang:'ch',
timepicker:false,
format:'Y/m/d',
formatDate:'Y/m/d',
//minDate:'-1980/01/01', // yesterday is minimum date
maxDate: tdate // and tommorow is maximum date calendar
});

$('#JoinDate').datetimepicker({
yearOffset:0,
lang:'ch',
timepicker:false,
format:'Y/m/d',
formatDate:'Y/m/d',
//minDate:'-1980/01/01', // yesterday is minimum date
//maxDate: tdate // and tommorow is maximum date calendar
});

$('#LeaveDate').datetimepicker({
yearOffset:0,
lang:'ch',
timepicker:false,
format:'Y/m/d',
formatDate:'Y/m/d',
//minDate:'-1980/01/01', // yesterday is minimum date
//maxDate: tdate // and tommorow is maximum date calendar
});

</script>
<!-- script-for sticky-nav -->
<script>
$(document).ready(function() {
var navoffeset=$(".header-main").offset().top;
$(window).scroll(function(){
var scrollpos=$(window).scrollTop();
if(scrollpos >=navoffeset){
$(".header-main").addClass("fixed");
}else{
$(".header-main").removeClass("fixed");
}
});

});
</script>
<!-- /script-for sticky-nav -->
<!--inner block start here-->

<!--inner block end here-->


<!--copy rights start here-->
<div style="margin-top: -20px;" class="copyrights">
<p>All Rights Reserved © 2024 Human Resource Management System </p>
</div>
<!--COPY rights end here-->
</div>
</div>
<!--//content-inner-->
<!--/sidebar-menu-->
<div class="sidebar-menu">
<header class="logo1">
<a href="#" class="sidebar-icon"> <span class="fa fa-bars"></span>
</a>
</header>
<div style="border-top:1px ridge rgba(255, 255, 255, 0.15)"></div>
<div class="menu">
<ul id="menu" >
<li><a href="home.php"><i class="fa fa-
tachometer"></i> <span>Dashboard </span><div class="clearfix"></div></a></li>

<li><a href="#"><i class="fa fa-


user"></i><span>Employee</span><span class="fa fa-angle-right" style="float:
right"></span><div class="clearfix"></div></a>
<ul>
<li><a href="employeeadd.php">Add
Employee</a></li>
<li><a href="employeeview.php">Employee
View</a></li>
<!-- <li><a href="atten.php">Attendece
Details</a></li>
<li><a href="modifiedlogout.php">Modified
Logout Time</a></li>
<li><a href="inquiry.php">Inquiry</a></li>
-->
</ul>
</li>
<li><a href="leaverequest.php"><i class="fa fa-
pagelines"></i><span>Leave</span></a>

</li>

<li id="menu-academico" ><a


href="changepassword.php"><i class="fa fa-cogs"></i><span>Change Password</span></a> <!--
<span class="fa fa-angle-right" style="float: right"></span><div class="clearfix"></div>
<ul id="menu-academico-sub">
<li id="menu-academico-avaliacoes" ><a
href="changepassword.php">Change Password</a></li>

</ul> -->
</li>

<!-- <li><a href="#"><i class="fa fa-check-square-o


nav_icon"></i><span>Forms</span> <span class="fa fa-angle-right" style="float:
right"></span><div class="clearfix"></div></a>
<ul>
<li><a href="employeeadd.php">All
Employee</a></li>
</ul>
</li> -->

<li><a href="#"><i class="fa fa-


list"></i><span>Master List</span> <span class="fa fa-angle-right" style="float:
right"></span><div class="clearfix"></div></a>
<ul>
<li><a href="city.php">City</a></li>
<li><a href="state.php">State</a></li>
<li><a href="country.php">Country</a></li>
<li><a
href="position.php">Position</a></li>
</ul>
</li>

</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
<script>
var toggle = true;

$(".sidebar-icon").click(function() {
if (toggle)
{
$(".page-container").addClass("sidebar-
collapsed").removeClass("sidebar-collapsed-back");
$("#menu span").css({"position":"absolute"});
}
else
{
$(".page-container").removeClass("sidebar-
collapsed").addClass("sidebar-collapsed-back");
setTimeout(function() {
$("#menu span").css({"position":"relative"});
}, 400);
}

toggle = !toggle;
});
</script>
<!--js -->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- /Bootstrap Core JavaScript -->

</body>
</html>
Employee View

<!DOCTYPE HTML>
<html>
<head>
<title>HRM</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content=" Bootstrap Web Templates, Flat Web Templates, Android
Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson,
Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() {
setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
</script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="css/morris.css" type="text/css"/>
<!-- Graph CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery-2.1.4.min.js"></script>
<!-- //jQuery -->
<link href='//fonts.googleapis.com/css?family=Roboto:700,500,300,100italic,100,400'
rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet'
type='text/css'>
<!-- lined-icons -->
<link rel="stylesheet" href="css/icon-font.min.css" type='text/css' />
<!-- //lined-icons -->

<!-- datepicker-->
<link rel="stylesheet" type="text/css" href="dp/jquery.datetimepicker.css"/>
<script src="dp/jquery.datetimepicker.full.js"></script>

<!--Image Popup-->
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */


.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */


.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 20%;
}

/* Caption of Modal Image */


#caption {
margin: auto;
display: block;
width: 80%;
max-width: 70%;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}

/* Add Animation */
.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)}
}

/* The Close Button */


.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;
}

/* 100% Image Width on Smaller Screens */


@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
<!-- End image popup -->

</head>
<body>
<div class="page-container">
<!--/content-inner-->
<div class="left-content">
<div class="mother-grid-inner">
<!--header start here-->
<div class="header-main">
<div style="padding: 1.15em; margin-right: 0%; width: 70%;"
class="logo-w3-agile">
<h1 clas><a href="index.php">HRM</a></h1>
</div>
<div class="profile_details w3l" style="float: right; width: 29%;">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img
src="image/images (2).jpg" alt=""> </span>
<div class="user-name">
<p>admin&nbsp;admin</p>
<span>admin</span>
</div>
<i class="fa fa-angle-down"></i>
<i class="fa fa-angle-up"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="profile.php"><i class="fa fa-
user"></i> Profile</a> </li>
<li> <a href="controller/logout.php"><i
class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>

<div class="clearfix"> </div>


</div>
<link rel="stylesheet" type="text/css" href="css/table-style.css" />
<!-- <link rel="stylesheet" type="text/css" href="css/basictable.css" /> -->
<script type="text/javascript" src="js/jquery.basictable.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#table').basictable();

$('#table-breakpoint').basictable({
breakpoint: 768
});

$('#table-swap-axis').basictable({
swapAxis: true
});

$('#table-force-off').basictable({
forceResponsive: false
});

$('#table-no-resize').basictable({
noResize: true
});

$('#table-two-axis').basictable();

$('#table-max-height').basictable({
tableWrapper: true
});
});
</script>
<ol class="breadcrumb" style="margin: 10px 0px ! important;">
<li class="breadcrumb-item"><a href="Home.php">Home</a><i class="fa fa-angle-
right"></i>Employee<i class="fa fa-angle-right"></i>Employee View</li>
</ol>

<div class="validation-system" style="margin-top: 0;">


<div class="validation-form">
<div>
<div class="w3l-table-info">
<h2>Employee View</h2>
<br>
<form method="GET" action="#">
<input style="float: right;" type="submit" name="searchview">
<input style="float: right;" placeholder="Search" value="" type="search-box"
name="search"><br>
</form>
<table id="table">
<thead>
<tr>
<th style="text-transform: capitalize;">Profile Photo</th>
<th style="text-transform: capitalize;">Name</th>
<th style="text-transform: capitalize; text-align: center;">Employee
Id</th>
<th style="text-transform: capitalize; text-align: center;">Full
Detail</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 140px;"><img id="myImg" alt="Mark&nbsp;D&nbsp;Cooper"
src="image/33615user.png" style="width: 50px;height: 50px;object-fit: cover;border-radius:
100%;border: 1px solid"></td>

<td>Mark&nbsp;D&nbsp;Cooper</td>

<td style="width: 105px;"><center>6231415</center></td>


<td style="text-align: center;"><a href="detailview.php?
employeeid=2"><u>View</u></a></td>
</tr>
<tr>
<td style="width: 140px;"><img id="myImg" alt="Jane&nbsp;Marie&nbsp;Cooper"
src="image/142339images.png" style="width: 50px;height: 50px;object-fit: cover;border-
radius: 100%;border: 1px solid"></td>

<td>Jane&nbsp;Marie&nbsp;Cooper</td>

<td style="width: 105px;"><center>12345</center></td>


<td style="text-align: center;"><a href="detailview.php?
employeeid=3"><u>View</u></a></td>
</tr>
</tbody>
</table>
<div><a href='?bn=1'>1</a>&nbsp &nbsp &nbsp</div>
</div>
</div>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

<!-- script-for sticky-nav -->


<script>
$(document).ready(function() {
var navoffeset=$(".header-main").offset().top;
$(window).scroll(function(){
var scrollpos=$(window).scrollTop();
if(scrollpos >=navoffeset){
$(".header-main").addClass("fixed");
}else{
$(".header-main").removeClass("fixed");
}
});

});
</script>
<!-- /script-for sticky-nav -->
<!--inner block start here-->

<!--inner block end here-->


<!--copy rights start here-->
<div style="margin-top: -20px;" class="copyrights">
<p>All Rights Reserved © 2024 Human Resource Management System </p>
</div>
<!--COPY rights end here-->
</div>
</div>
<!--//content-inner-->
<!--/sidebar-menu-->
<div class="sidebar-menu">
<header class="logo1">
<a href="#" class="sidebar-icon"> <span class="fa fa-bars"></span>
</a>
</header>
<div style="border-top:1px ridge rgba(255, 255, 255, 0.15)"></div>
<div class="menu">
<ul id="menu" >
<li><a href="home.php"><i class="fa fa-
tachometer"></i> <span>Dashboard </span><div class="clearfix"></div></a></li>

<li><a href="#"><i class="fa fa-


user"></i><span>Employee</span><span class="fa fa-angle-right" style="float:
right"></span><div class="clearfix"></div></a>
<ul>
<li><a href="employeeadd.php">Add
Employee</a></li>
<li><a href="employeeview.php">Employee
View</a></li>
<!-- <li><a href="atten.php">Attendece
Details</a></li>
<li><a href="modifiedlogout.php">Modified
Logout Time</a></li>
<li><a href="inquiry.php">Inquiry</a></li>
-->
</ul>
</li>
<li><a href="leaverequest.php"><i class="fa fa-
pagelines"></i><span>Leave</span></a>

</li>

<li id="menu-academico" ><a


href="changepassword.php"><i class="fa fa-cogs"></i><span>Change Password</span></a> <!--
<span class="fa fa-angle-right" style="float: right"></span><div class="clearfix"></div>
<ul id="menu-academico-sub">
<li id="menu-academico-avaliacoes" ><a
href="changepassword.php">Change Password</a></li>

</ul> -->
</li>

<!-- <li><a href="#"><i class="fa fa-check-square-o


nav_icon"></i><span>Forms</span> <span class="fa fa-angle-right" style="float:
right"></span><div class="clearfix"></div></a>
<ul>
<li><a href="employeeadd.php">All
Employee</a></li>
</ul>
</li> -->

<li><a href="#"><i class="fa fa-


list"></i><span>Master List</span> <span class="fa fa-angle-right" style="float:
right"></span><div class="clearfix"></div></a>
<ul>
<li><a href="city.php">City</a></li>
<li><a href="state.php">State</a></li>
<li><a href="country.php">Country</a></li>
<li><a
href="position.php">Position</a></li>
</ul>
</li>

</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
<script>
var toggle = true;

$(".sidebar-icon").click(function() {
if (toggle)
{
$(".page-container").addClass("sidebar-
collapsed").removeClass("sidebar-collapsed-back");
$("#menu span").css({"position":"absolute"});
}
else
{
$(".page-container").removeClass("sidebar-
collapsed").addClass("sidebar-collapsed-back");
setTimeout(function() {
$("#menu span").css({"position":"relative"});
}, 400);
}

toggle = !toggle;
});
</script>
<!--js -->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- /Bootstrap Core JavaScript -->

</body>
</html>

<!--image Popup-->
<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal


var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal


span.onclick = function() {
modal.style.display = "none";
}
</script>
<!--End image Popup -->
Leave

<!DOCTYPE HTML>
<html>
<head>
<title>HRM</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content=" Bootstrap Web Templates, Flat Web Templates, Android
Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson,
Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() {
setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
</script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="css/morris.css" type="text/css"/>
<!-- Graph CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery-2.1.4.min.js"></script>
<!-- //jQuery -->
<link href='//fonts.googleapis.com/css?family=Roboto:700,500,300,100italic,100,400'
rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet'
type='text/css'>
<!-- lined-icons -->
<link rel="stylesheet" href="css/icon-font.min.css" type='text/css' />
<!-- //lined-icons -->

<!-- datepicker-->
<link rel="stylesheet" type="text/css" href="dp/jquery.datetimepicker.css"/>
<script src="dp/jquery.datetimepicker.full.js"></script>

<!--Image Popup-->
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */


.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */


.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 20%;
}

/* Caption of Modal Image */


#caption {
margin: auto;
display: block;
width: 80%;
max-width: 70%;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}

/* Add Animation */
.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)}
}

/* The Close Button */


.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;
}

/* 100% Image Width on Smaller Screens */


@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
<!-- End image popup -->

</head>
<body>
<div class="page-container">
<!--/content-inner-->
<div class="left-content">
<div class="mother-grid-inner">
<!--header start here-->
<div class="header-main">
<div style="padding: 1.15em; margin-right: 0%; width: 70%;"
class="logo-w3-agile">
<h1 clas><a href="index.php">HRM</a></h1>
</div>
<div class="profile_details w3l" style="float: right; width: 29%;">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img
src="image/images (2).jpg" alt=""> </span>
<div class="user-name">
<p>admin&nbsp;admin</p>
<span>admin</span>
</div>
<i class="fa fa-angle-down"></i>
<i class="fa fa-angle-up"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="profile.php"><i class="fa fa-
user"></i> Profile</a> </li>
<li> <a href="controller/logout.php"><i
class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>

<div class="clearfix"> </div>


</div>
<ol class="breadcrumb" style="margin: 10px 0px ! important;">
<li class="breadcrumb-item"><a href="Home.php">Home</a><i class="fa fa-angle-
right"></i>Leave<i class="fa fa-angle-right"></i>Leave</li>
</ol>
<form method="POST">
<div class="validation-form">
<h2>Request Leave</h2>
<div class="row" style="color: white; margin-right: 0; margin-left: 0;">
<div style="background: #202a29;" class="col-md-1 control-label">
<h5>ID</h5>
</div>
<div style="background: #202a29;" class="col-md-2 control-label">
<h5>Name</h5>
</div>
<div style="background: #202a29; text-align: center;" class="col-md-1 control-
label">
<h5>Emp ID</h5>
</div>
<div style="background: #202a29;" class="col-md-2 control-label">
<h5>Leave Status</h5>
</div>
<div style="background: #202a29; " class="col-md-1 control-label">
<h5>Reason</h5>
</div>
<div style="background: #202a29; text-align: center;" class="col-md-2 control-
label">
<h5>StartDate</h5>
</div>
<div style="background: #202a29; text-align: center;" class="col-md-2 control-
label">
<h5>EndDate</h5>
</div>
<div style="background: #202a29; text-align: center;" class="col-md-1 control-
label">
<h5>Action</h5>
</div>
</div>

</div>

<div class="validation-form" style="margin-bottom: 0px;margin-top: 10px;">


<h2>Accepted Leave</h2>
<div class="row" style="color: white; margin-right: 0; margin-left: 0;">
<div class="col-md-1" style="background-color: #202a29;">
<h5>ID</h5>
</div>
<div class="col-md-4" style="background-color: #202a29;">
<h5>Name</h5>
</div>
<div class="col-md-3" style="background-color: #202a29;">
<h5>Leave Type</h5>
</div>
<div class="col-md-2" style="background-color: #202a29;">
<h5>Start Date</h5>
</div>
<div class="col-md-2" style="background-color: #202a29;">
<h5>End Date</h5>
</div>
</div>

<div class="row" style="margin-right: 0; margin-left: 0;">


<div class="col-md-1">
<h5>1</h5>
</div>
<div class="col-md-4">
<h5>Mark Cooper</h5>
</div>
<div class="col-md-3">
<h5>casual leave</h5>
</div>
<div class="col-md-2">
<h5>2022-10-12</h5>
</div>
<div class="col-md-2">
<h5>2022-10-14</h5>
</div>
</div><hr style="margin-bottom: 0px;margin-top: 0px;border-top: 1px solid #eee;">
<div class="row" style="margin-right: 0; margin-left: 0;">
<div class="col-md-1">
<h5>2</h5>
</div>
<div class="col-md-4">
<h5>Jane Cooper</h5>
</div>
<div class="col-md-3">
<h5>privilege leave</h5>
</div>
<div class="col-md-2">
<h5>2024-03-22</h5>
</div>
<div class="col-md-2">
<h5>2024-07-25</h5>
</div>
</div><hr style="margin-bottom: 0px;margin-top: 0px;border-top: 1px solid #eee;">
<div class="clearfix"></div>
</div>

<div class="validation-form" style="margin-bottom: 30px;margin-top: 10px;">


<h2>Denied Leave</h2>
<div class="row" style="color: white; margin-right: 0; margin-left: 0;">
<div class="col-md-1" style="background-color: #202a29;">
<h5>ID</h5>
</div>
<div class="col-md-4" style="background-color: #202a29;">
<h5>Name</h5>
</div>
<div class="col-md-3" style="background-color: #202a29;">
<h5>Leave Type</h5>
</div>
<div class="col-md-2" style="background-color: #202a29;">
<h5>Start Date</h5>
</div>
<div class="col-md-2" style="background-color: #202a29;">
<h5>End Date</h5>
</div>
</div>

<div class="row" style="margin-right: 0; margin-left: 0;">


<div class="col-md-1">
<h5>1</h5>
</div>
<div class="col-md-4">
<h5>Jane Cooper</h5>
</div>
<div class="col-md-3">
<h5>sick leave</h5>
</div>
<div class="col-md-2">
<h5>2024-03-28</h5>
</div>
<div class="col-md-2">
<h5>2024-03-30</h5>
</div>
</div><hr style="margin-bottom: 0px;margin-top: 0px;border-top: 1px solid #eee;">
</div>
<div class="clearfix"></div>
</form>
<!-- script-for sticky-nav -->
<script>
$(document).ready(function() {
var navoffeset=$(".header-main").offset().top;
$(window).scroll(function(){
var scrollpos=$(window).scrollTop();
if(scrollpos >=navoffeset){
$(".header-main").addClass("fixed");
}else{
$(".header-main").removeClass("fixed");
}
});

});
</script>
<!-- /script-for sticky-nav -->
<!--inner block start here-->

<!--inner block end here-->


<!--copy rights start here-->
<div style="margin-top: -20px;" class="copyrights">
<p>All Rights Reserved © 2024 Human Resource Management System </p>
</div>
<!--COPY rights end here-->
</div>
</div>
<!--//content-inner-->
<!--/sidebar-menu-->
<div class="sidebar-menu">
<header class="logo1">
<a href="#" class="sidebar-icon"> <span class="fa fa-bars"></span>
</a>
</header>
<div style="border-top:1px ridge rgba(255, 255, 255, 0.15)"></div>
<div class="menu">
<ul id="menu" >
<li><a href="home.php"><i class="fa fa-
tachometer"></i> <span>Dashboard </span><div class="clearfix"></div></a></li>

<li><a href="#"><i class="fa fa-


user"></i><span>Employee</span><span class="fa fa-angle-right" style="float:
right"></span><div class="clearfix"></div></a>
<ul>
<li><a href="employeeadd.php">Add
Employee</a></li>
<li><a href="employeeview.php">Employee
View</a></li>
<!-- <li><a href="atten.php">Attendece
Details</a></li>
<li><a href="modifiedlogout.php">Modified
Logout Time</a></li>
<li><a href="inquiry.php">Inquiry</a></li>
-->
</ul>
</li>
<li><a href="leaverequest.php"><i class="fa fa-
pagelines"></i><span>Leave</span></a>

</li>
<li id="menu-academico" ><a
href="changepassword.php"><i class="fa fa-cogs"></i><span>Change Password</span></a> <!--
<span class="fa fa-angle-right" style="float: right"></span><div class="clearfix"></div>
<ul id="menu-academico-sub">
<li id="menu-academico-avaliacoes" ><a
href="changepassword.php">Change Password</a></li>

</ul> -->
</li>

<!-- <li><a href="#"><i class="fa fa-check-square-o


nav_icon"></i><span>Forms</span> <span class="fa fa-angle-right" style="float:
right"></span><div class="clearfix"></div></a>
<ul>
<li><a href="employeeadd.php">All
Employee</a></li>
</ul>
</li> -->

<li><a href="#"><i class="fa fa-


list"></i><span>Master List</span> <span class="fa fa-angle-right" style="float:
right"></span><div class="clearfix"></div></a>
<ul>
<li><a href="city.php">City</a></li>
<li><a href="state.php">State</a></li>
<li><a href="country.php">Country</a></li>
<li><a
href="position.php">Position</a></li>
</ul>
</li>

</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
<script>
var toggle = true;

$(".sidebar-icon").click(function() {
if (toggle)
{
$(".page-container").addClass("sidebar-
collapsed").removeClass("sidebar-collapsed-back");
$("#menu span").css({"position":"absolute"});
}
else
{
$(".page-container").removeClass("sidebar-
collapsed").addClass("sidebar-collapsed-back");
setTimeout(function() {
$("#menu span").css({"position":"relative"});
}, 400);
}

toggle = !toggle;
});
</script>
<!--js -->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- /Bootstrap Core JavaScript -->

</body>
</html>

Change Password

<!DOCTYPE HTML>
<html>
<head>
<title>HRM</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content=" Bootstrap Web Templates, Flat Web Templates, Android
Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson,
Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() {
setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
</script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="css/morris.css" type="text/css"/>
<!-- Graph CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery-2.1.4.min.js"></script>
<!-- //jQuery -->
<link href='//fonts.googleapis.com/css?family=Roboto:700,500,300,100italic,100,400'
rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet'
type='text/css'>
<!-- lined-icons -->
<link rel="stylesheet" href="css/icon-font.min.css" type='text/css' />
<!-- //lined-icons -->

<!-- datepicker-->
<link rel="stylesheet" type="text/css" href="dp/jquery.datetimepicker.css"/>
<script src="dp/jquery.datetimepicker.full.js"></script>
<!--Image Popup-->
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */


.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */


.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 20%;
}

/* Caption of Modal Image */


#caption {
margin: auto;
display: block;
width: 80%;
max-width: 70%;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}

/* Add Animation */
.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)}
}

/* The Close Button */


.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;
}

/* 100% Image Width on Smaller Screens */


@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
<!-- End image popup -->

</head>
<body>
<div class="page-container">
<!--/content-inner-->
<div class="left-content">
<div class="mother-grid-inner">
<!--header start here-->
<div class="header-main">
<div style="padding: 1.15em; margin-right: 0%; width: 70%;"
class="logo-w3-agile">
<h1 clas><a href="index.php">HRM</a></h1>
</div>
<div class="profile_details w3l" style="float: right; width: 29%;">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img
src="image/images (2).jpg" alt=""> </span>
<div class="user-name">
<p>admin&nbsp;admin</p>
<span>admin</span>
</div>
<i class="fa fa-angle-down"></i>
<i class="fa fa-angle-up"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="profile.php"><i class="fa fa-
user"></i> Profile</a> </li>
<li> <a href="controller/logout.php"><i
class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>

<div class="clearfix"> </div>


</div>

<ol class="breadcrumb" style="margin: 10px 0px ! important;">


<li class="breadcrumb-item"><a href="Home.php">Home</a><i class="fa fa-angle-
right"></i>Change Password</li>
</ol>
<form method="POST" action="controller/login.php">
<div class="container-fluid" style="margin-bottom: 30px;margin-top: 10px; background:
white;">
<div class="row">
<h2 style="color: #1abc9c;">Change Password</h2><hr>
<div class="col-md-5 control-label">
<label class="control-label">Old Password</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-pencil" aria-hidden="true"></i>
</span>
<input type="password" name="oldpass" title="Old Password" placeholder="Old
Password" class="form-control">
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="row">
<div class="col-md-5 control-label">
<label class="control-label">New Password</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-pencil" aria-hidden="true"></i>
</span>
<input type="password" title="New Password" name="npassword" placeholder="New
Password" class="form-control">
</div>
</div>
<div class="clearfix"> </div>
</div>

<div class="row">
<div class="col-md-5 control-label">
<label class="control-label">Confirm Password</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-pencil" aria-hidden="true"></i>
</span>
<input type="password" name="cpassword" title="Confirm Password"
placeholder="Confirm Password" class="form-control" >
</div>
</div>
<div class="clearfix"> </div>
</div>
<h4 style="color: #F1C40F;"></h4>
<div class="row">
<div class="col-md-3 form-group">
<button type="submit" name="save" title="Save" class="btn btn-
primary">Save</button>
<button type="reset" class="btn btn-default" title="Reset">Reset</button>
</div>
<div class="clearfix"> </div>
</div>
</div>

</form>

<!-- script-for sticky-nav -->


<script>
$(document).ready(function() {
var navoffeset=$(".header-main").offset().top;
$(window).scroll(function(){
var scrollpos=$(window).scrollTop();
if(scrollpos >=navoffeset){
$(".header-main").addClass("fixed");
}else{
$(".header-main").removeClass("fixed");
}
});

});
</script>
<!-- /script-for sticky-nav -->
<!--inner block start here-->
<!--inner block end here-->
<!--copy rights start here-->
<div style="margin-top: -20px;" class="copyrights">
<p>All Rights Reserved © 2024 Human Resource Management System </p>
</div>
<!--COPY rights end here-->
</div>
</div>
<!--//content-inner-->
<!--/sidebar-menu-->
<div class="sidebar-menu">
<header class="logo1">
<a href="#" class="sidebar-icon"> <span class="fa fa-bars"></span>
</a>
</header>
<div style="border-top:1px ridge rgba(255, 255, 255, 0.15)"></div>
<div class="menu">
<ul id="menu" >
<li><a href="home.php"><i class="fa fa-
tachometer"></i> <span>Dashboard </span><div class="clearfix"></div></a></li>

<li><a href="#"><i class="fa fa-


user"></i><span>Employee</span><span class="fa fa-angle-right" style="float:
right"></span><div class="clearfix"></div></a>
<ul>
<li><a href="employeeadd.php">Add
Employee</a></li>
<li><a href="employeeview.php">Employee
View</a></li>
<!-- <li><a href="atten.php">Attendece
Details</a></li>
<li><a href="modifiedlogout.php">Modified
Logout Time</a></li>
<li><a href="inquiry.php">Inquiry</a></li>
-->
</ul>
</li>
<li><a href="leaverequest.php"><i class="fa fa-
pagelines"></i><span>Leave</span></a>

</li>

<li id="menu-academico" ><a


href="changepassword.php"><i class="fa fa-cogs"></i><span>Change Password</span></a> <!--
<span class="fa fa-angle-right" style="float: right"></span><div class="clearfix"></div>
<ul id="menu-academico-sub">
<li id="menu-academico-avaliacoes" ><a
href="changepassword.php">Change Password</a></li>

</ul> -->
</li>
<!-- <li><a href="#"><i class="fa fa-check-square-o
nav_icon"></i><span>Forms</span> <span class="fa fa-angle-right" style="float:
right"></span><div class="clearfix"></div></a>
<ul>
<li><a href="employeeadd.php">All
Employee</a></li>
</ul>
</li> -->

<li><a href="#"><i class="fa fa-


list"></i><span>Master List</span> <span class="fa fa-angle-right" style="float:
right"></span><div class="clearfix"></div></a>
<ul>
<li><a href="city.php">City</a></li>
<li><a href="state.php">State</a></li>
<li><a href="country.php">Country</a></li>
<li><a
href="position.php">Position</a></li>
</ul>
</li>

</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
<script>
var toggle = true;

$(".sidebar-icon").click(function() {
if (toggle)
{
$(".page-container").addClass("sidebar-
collapsed").removeClass("sidebar-collapsed-back");
$("#menu span").css({"position":"absolute"});
}
else
{
$(".page-container").removeClass("sidebar-
collapsed").addClass("sidebar-collapsed-back");
setTimeout(function() {
$("#menu span").css({"position":"relative"});
}, 400);
}

toggle = !toggle;
});
</script>
<!--js -->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- /Bootstrap Core JavaScript -->

</body>
</html>

You might also like