├── images ├── logo.png ├── user2.jpg ├── company.jpg ├── logout.png ├── profile.png └── setting.png ├── emp_images └── doraemon.jpg ├── webfonts ├── fa-brands-400.ttf ├── fa-solid-900.ttf ├── fa-brands-400.woff2 ├── fa-regular-400.ttf ├── fa-regular-400.woff2 ├── fa-solid-900.woff2 ├── fa-v4compatibility.ttf └── fa-v4compatibility.woff2 ├── js ├── emp_man.js ├── panel.js ├── script.js └── edit_profile.js ├── instruction.txt ├── admin ├── admin_logout.php ├── deleteUser.php ├── clearUser.php ├── clearLeave.php ├── admin_sidebar.php ├── admin_login.php ├── admin_panel.php ├── manage_employee.php ├── userApproval.php ├── admin_edit_profile.php └── manage_leave.php ├── database └── connection.php ├── employee ├── emp_logout.php ├── emp_upload_pic.php ├── emp_login.php ├── emp_panel.php ├── leave_req.php └── edit_profile.php ├── css ├── profileimage.css ├── dep_man.css ├── transformations.css ├── panel.css ├── animations.css └── style.css ├── home.php ├── README.md ├── emp_man_sys.sql └── register.php /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Utsav-Khanal/Employee-Management-System/HEAD/images/logo.png -------------------------------------------------------------------------------- /images/user2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Utsav-Khanal/Employee-Management-System/HEAD/images/user2.jpg -------------------------------------------------------------------------------- /images/company.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Utsav-Khanal/Employee-Management-System/HEAD/images/company.jpg -------------------------------------------------------------------------------- /images/logout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Utsav-Khanal/Employee-Management-System/HEAD/images/logout.png -------------------------------------------------------------------------------- /images/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Utsav-Khanal/Employee-Management-System/HEAD/images/profile.png -------------------------------------------------------------------------------- /images/setting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Utsav-Khanal/Employee-Management-System/HEAD/images/setting.png -------------------------------------------------------------------------------- /emp_images/doraemon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Utsav-Khanal/Employee-Management-System/HEAD/emp_images/doraemon.jpg -------------------------------------------------------------------------------- /webfonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Utsav-Khanal/Employee-Management-System/HEAD/webfonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /webfonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Utsav-Khanal/Employee-Management-System/HEAD/webfonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /js/emp_man.js: -------------------------------------------------------------------------------- 1 | 2 | function deleteUser() { 3 | return Confirm('Are you sure you want to delete this record?'); 4 | } 5 | -------------------------------------------------------------------------------- /webfonts/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Utsav-Khanal/Employee-Management-System/HEAD/webfonts/fa-brands-400.woff2 -------------------------------------------------------------------------------- /webfonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Utsav-Khanal/Employee-Management-System/HEAD/webfonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /webfonts/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Utsav-Khanal/Employee-Management-System/HEAD/webfonts/fa-regular-400.woff2 -------------------------------------------------------------------------------- /webfonts/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Utsav-Khanal/Employee-Management-System/HEAD/webfonts/fa-solid-900.woff2 -------------------------------------------------------------------------------- /webfonts/fa-v4compatibility.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Utsav-Khanal/Employee-Management-System/HEAD/webfonts/fa-v4compatibility.ttf -------------------------------------------------------------------------------- /webfonts/fa-v4compatibility.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Utsav-Khanal/Employee-Management-System/HEAD/webfonts/fa-v4compatibility.woff2 -------------------------------------------------------------------------------- /instruction.txt: -------------------------------------------------------------------------------- 1 | 1. Import Database sql extension 2 | 3 | ADMIN EMAIL & PASSWORD 4 | admin@gmail.com 5 | -> admin123 6 | 7 | USER EMAIL & PASSWORD 8 | doraemon@gmail.com 9 | -> dora123 10 | 11 | 2. Now you can enjoy EMS -------------------------------------------------------------------------------- /admin/admin_logout.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /database/connection.php: -------------------------------------------------------------------------------- 1 | connect_error){ 12 | die("Connection Failed: ".$conn->connect_error); 13 | } 14 | //echo "Connected Successfully"; 15 | 16 | ?> -------------------------------------------------------------------------------- /employee/emp_logout.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /admin/deleteUser.php: -------------------------------------------------------------------------------- 1 | alert('User Deleted')"; 13 | 14 | ?> 15 | 16 | 17 | Failed to Delete Records from database"; 21 | } 22 | ?> 23 | -------------------------------------------------------------------------------- /admin/clearUser.php: -------------------------------------------------------------------------------- 1 | alert('Record Deleted')" 14 | 15 | ?> 16 | 17 | 18 | Failed to Delete Records from database"; 22 | } 23 | ?> 24 | -------------------------------------------------------------------------------- /admin/clearLeave.php: -------------------------------------------------------------------------------- 1 | alert('Record Deleted')" 14 | 15 | ?> 16 | 17 | 18 | Failed to Delete Records from database"; 22 | } 23 | ?> 24 | -------------------------------------------------------------------------------- /css/profileimage.css: -------------------------------------------------------------------------------- 1 | .upload{ 2 | width: 125px; 3 | position: relative; 4 | margin: auto; 5 | } 6 | 7 | .upload img{ 8 | border-radius: 50%; 9 | border: 8px solid #DCDCDC; 10 | } 11 | 12 | .upload .round{ 13 | position: absolute; 14 | bottom: 0; 15 | right: 0; 16 | background: #00B4FF; 17 | width: 32px; 18 | height: 32px; 19 | line-height: 33px; 20 | text-align: center; 21 | border-radius: 50%; 22 | overflow: hidden; 23 | } 24 | 25 | .upload .round input[type = "file"]{ 26 | position: absolute; 27 | transform: scale(2); 28 | opacity: 0; 29 | } 30 | 31 | input[type=file]::-webkit-file-upload-button{ 32 | cursor: pointer; 33 | } 34 | -------------------------------------------------------------------------------- /css/dep_man.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Poppins:wght@200&display=swap'); 2 | 3 | body{ 4 | background-color: #f2f2f2; 5 | 6 | } 7 | .man_emp{ 8 | background-color: white; 9 | width: 55%; 10 | padding: 2px 25px; 11 | margin-top: 10%; 12 | margin-left: 30%; 13 | margin-bottom: 10%; 14 | border-top: 5px solid blue; 15 | box-shadow: 0 0 7px 5px rgba(0, 0, 0, 0.5); 16 | } 17 | .man_emp h2{ 18 | font-size: 24px; 19 | line-height: 12px; 20 | padding: 10px; 21 | text-align: center; 22 | } 23 | .emp_manage{ 24 | width: 0; 25 | 26 | } 27 | .table_info{ 28 | width: 90%; 29 | position: relative; 30 | margin: 20px auto; 31 | 32 | } -------------------------------------------------------------------------------- /css/transformations.css: -------------------------------------------------------------------------------- 1 | .bx-rotate-90 2 | { 3 | transform: rotate(90deg); 4 | 5 | -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'; 6 | } 7 | .bx-rotate-180 8 | { 9 | transform: rotate(180deg); 10 | 11 | -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'; 12 | } 13 | .bx-rotate-270 14 | { 15 | transform: rotate(270deg); 16 | 17 | -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'; 18 | } 19 | .bx-flip-horizontal 20 | { 21 | transform: scaleX(-1); 22 | 23 | -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)'; 24 | } 25 | .bx-flip-vertical 26 | { 27 | transform: scaleY(-1); 28 | 29 | -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)'; 30 | } 31 | -------------------------------------------------------------------------------- /home.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Employee Management System 8 | 9 | 10 | 11 |
12 | 13 | 21 |
22 | 23 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /employee/emp_upload_pic.php: -------------------------------------------------------------------------------- 1 | real_escape_string($img_data); 18 | 19 | // Insert the image data into the database 20 | $sql = "INSERT INTO register (image_name, image_data) VALUES ('$image_name', '$img_data')"; 21 | if ($conn->query($sql) === TRUE) { 22 | echo "Image uploaded and inserted successfully."; 23 | } else { 24 | echo "Error: " . $sql . "
" . $conn->error; 25 | } 26 | } else { 27 | echo "Invalid file format. Only JPG, PNG, and GIF images are allowed."; 28 | } 29 | } else { 30 | echo "Error uploading the image."; 31 | } 32 | 33 | ?> -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Employee-Management-System 2 | ![Screenshot (88)](https://github.com/Utsav-Khanal/Employee-Management-System/assets/100432431/37ecc0cc-d1b6-4d5c-a687-e1371d755caa) 3 | ![Screenshot (89)](https://github.com/Utsav-Khanal/Employee-Management-System/assets/100432431/190bd890-97a9-4e68-b278-8ae806212369) 4 | ![Screenshot (90)](https://github.com/Utsav-Khanal/Employee-Management-System/assets/100432431/f8c5438c-4784-49e6-9769-ca483066933b) 5 | ![Screenshot (91)](https://github.com/Utsav-Khanal/Employee-Management-System/assets/100432431/64d9f486-8ed2-4e76-a333-a6222d4999c1) 6 | ![Screenshot (92)](https://github.com/Utsav-Khanal/Employee-Management-System/assets/100432431/d12ce59d-8c6a-4b70-99af-81b418c6726b) 7 | ![Screenshot (93)](https://github.com/Utsav-Khanal/Employee-Management-System/assets/100432431/11607ac1-2028-4d7d-af23-04914663ba4f) 8 | ![Screenshot (94)](https://github.com/Utsav-Khanal/Employee-Management-System/assets/100432431/39afa0cf-5585-4f1e-8c6d-8e148268b62f) 9 | ![Screenshot (95)](https://github.com/Utsav-Khanal/Employee-Management-System/assets/100432431/858a7320-0b44-45d1-b218-c5a7b2afcb39) 10 | ![Screenshot (96)](https://github.com/Utsav-Khanal/Employee-Management-System/assets/100432431/f9eeac28-85c4-4b64-9252-6a66a34b02e7) 11 | ![Screenshot (97)](https://github.com/Utsav-Khanal/Employee-Management-System/assets/100432431/0f01e94d-874e-4921-9c66-ef2eba667cdf) 12 | ![Screenshot (98)](https://github.com/Utsav-Khanal/Employee-Management-System/assets/100432431/58627b6f-d121-4ed4-9155-0c4255c48ef1) 13 | ![Screenshot (99)](https://github.com/Utsav-Khanal/Employee-Management-System/assets/100432431/944e3723-636c-4db5-ba78-410b96046f8e) 14 | ![Screenshot (100)](https://github.com/Utsav-Khanal/Employee-Management-System/assets/100432431/8793e4a4-311d-4dab-81df-571c5244651e) 15 | -------------------------------------------------------------------------------- /js/panel.js: -------------------------------------------------------------------------------- 1 | //DropDown Menu Js 2 | let subMenu = document.getElementById("subMenu"); 3 | 4 | function toggleMenu() { 5 | subMenu.classList.toggle("open-menu"); 6 | } 7 | 8 | 9 | const body = document.querySelector("body"); 10 | const darkLight = document.querySelector("#darkLight"); 11 | const sidebar = document.querySelector(".sidebar"); 12 | const submenuItems = document.querySelectorAll(".submenu_item"); 13 | const sidebarOpen = document.querySelector("#sidebarOpen"); 14 | const sidebarClose = document.querySelector(".collapse_sidebar"); 15 | const sidebarExpand = document.querySelector(".expand_sidebar"); 16 | sidebarOpen.addEventListener("click", () => sidebar.classList.toggle("close")); 17 | 18 | sidebarClose.addEventListener("click", () => { 19 | sidebar.classList.add("close", "hoverable"); 20 | }); 21 | sidebarExpand.addEventListener("click", () => { 22 | sidebar.classList.remove("close", "hoverable"); 23 | }); 24 | 25 | sidebar.addEventListener("mouseenter", () => { 26 | if (sidebar.classList.contains("hoverable")) { 27 | sidebar.classList.remove("close"); 28 | } 29 | }); 30 | sidebar.addEventListener("mouseleave", () => { 31 | if (sidebar.classList.contains("hoverable")) { 32 | sidebar.classList.add("close"); 33 | } 34 | }); 35 | 36 | darkLight.addEventListener("click", () => { 37 | body.classList.toggle("dark"); 38 | if (body.classList.contains("dark")) { 39 | document.setI; 40 | darkLight.classList.replace("bx-sun", "bx-moon"); 41 | } else { 42 | darkLight.classList.replace("bx-moon", "bx-sun"); 43 | } 44 | }); 45 | 46 | submenuItems.forEach((item, index) => { 47 | item.addEventListener("click", () => { 48 | item.classList.toggle("show_submenu"); 49 | submenuItems.forEach((item2, index2) => { 50 | if (index !== index2) { 51 | item2.classList.remove("show_submenu"); 52 | } 53 | }); 54 | }); 55 | }); 56 | 57 | if (window.innerWidth < 768) { 58 | sidebar.classList.add("close"); 59 | } else { 60 | sidebar.classList.remove("close"); 61 | } 62 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | //RealTime Form Validation JS 2 | 3 | 4 | //FirstName Validation 5 | const fname = document.getElementById("fname"); 6 | const fnameErr = document.getElementById("fnameErr"); 7 | 8 | 9 | // const success = document.getElementById("success"); 10 | // success.innerHTML="Registration Successfull"; 11 | 12 | //LastName Validation 13 | const lname = document.getElementById("lname"); 14 | const lnameErr = document.getElementById("lnameErr"); 15 | 16 | //Email Validation 17 | const email = document.getElementById("email"); 18 | const emailErr = document.getElementById("emailErr"); 19 | 20 | //Password Validation 21 | const password = document.getElementById("password"); 22 | const passwordErr= document.getElementById("passwordErr"); 23 | 24 | const conpass = document.getElementById("conpass"); 25 | const conpassErr = document.getElementById("conpassErr"); 26 | 27 | 28 | 29 | 30 | //Realtime FirstName Validation 31 | fname.addEventListener('input',function(event){ 32 | const isfname = validfname(event.target.value); 33 | if(!isfname){ 34 | fnameErr.innerHTML="Please fill FirstName"; 35 | document.getElementById("fnameErr").classList.add("error"); 36 | } 37 | else{ 38 | fnameErr.innerHTML=""; 39 | } 40 | }) 41 | 42 | 43 | function validfname(fname){ 44 | if(fname){ 45 | return (true); 46 | } 47 | return (false); 48 | } 49 | 50 | //Realtime LastName Validation 51 | lname.addEventListener('input',function(event){ 52 | const islname = validlname(event.target.value); 53 | if(!islname){ 54 | lnameErr.innerHTML="Please fill LastName"; 55 | document.getElementById("lnameErr").classList.add("error"); 56 | } 57 | else{ 58 | lnameErr.innerHTML=""; 59 | } 60 | }) 61 | 62 | 63 | function validlname(lname){ 64 | if(lname){ 65 | return (true); 66 | } 67 | return (false); 68 | } 69 | 70 | //Real Time Email Validation 71 | email.addEventListener('input',function(event){ 72 | // console.log(validEmail(event.target.value)); 73 | 74 | const isEmailValid = validEmail(event.target.value); 75 | if(!isEmailValid){ 76 | emailErr.innerHTML="NOT VALID EMAIL"; 77 | document.getElementById("emailErr").classList.add("error"); 78 | }else{ 79 | emailErr.innerHTML=""; 80 | } 81 | 82 | }); 83 | 84 | //Matching Pattern Using Regular Expression 85 | function validEmail(email) 86 | { 87 | if(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) 88 | { 89 | return (true); 90 | } 91 | return (false); 92 | } 93 | 94 | //RealTime Checking Password Length 95 | password.addEventListener('input',function(event){ 96 | const isPasswordValid = validPassword(event.target.value); 97 | if(!isPasswordValid){ 98 | passwordErr.innerHTML="Password Less than 6"; 99 | document.getElementById("passwordErr").classList.add("error"); 100 | }else{ 101 | passwordErr.innerHTML=""; 102 | } 103 | }); 104 | 105 | function validPassword(password) 106 | { 107 | if(password.length > 6){ 108 | return (true); 109 | } 110 | return (false); 111 | } 112 | 113 | conpass.addEventListener('input',function(event){ 114 | const isConpassValid = validConpass(event.target.value); 115 | if(!isConpassValid){ 116 | conpassErr.innerHTML="Confirm Password Less than 6"; 117 | document.getElementById("conpassErr").classList.add("error"); 118 | }else{ 119 | conpassErr.innerHTML=""; 120 | } 121 | }); 122 | 123 | function validConpass(conpass) 124 | { 125 | if(conpass.length > 6){ 126 | return (true); 127 | } 128 | return (false); 129 | } 130 | 131 | -------------------------------------------------------------------------------- /js/edit_profile.js: -------------------------------------------------------------------------------- 1 | //RealTime Form Validation JS 2 | 3 | 4 | //FirstName Validation 5 | const fname = document.getElementById("fname"); 6 | const fnameErr = document.getElementById("fnameErr"); 7 | 8 | 9 | // const success = document.getElementById("success"); 10 | // success.innerHTML="Registration Successfull"; 11 | 12 | //LastName Validation 13 | const lname = document.getElementById("lname"); 14 | const lnameErr = document.getElementById("lnameErr"); 15 | 16 | //Email Validation 17 | const email = document.getElementById("email"); 18 | const emailErr = document.getElementById("emailErr"); 19 | 20 | //Password Validation 21 | const password = document.getElementById("password"); 22 | const passwordErr= document.getElementById("passwordErr"); 23 | 24 | const conpass = document.getElementById("conpass"); 25 | const conpassErr = document.getElementById("conpassErr"); 26 | 27 | 28 | 29 | 30 | //Realtime FirstName Validation 31 | fname.addEventListener('input',function(event){ 32 | const isfname = validfname(event.target.value); 33 | if(!isfname){ 34 | fnameErr.innerHTML="Please fill FirstName"; 35 | document.getElementById("fnameErr").classList.add("error"); 36 | } 37 | else{ 38 | fnameErr.innerHTML=""; 39 | } 40 | }) 41 | 42 | 43 | function validfname(fname){ 44 | if(fname){ 45 | return (true); 46 | } 47 | return (false); 48 | } 49 | 50 | //Realtime LastName Validation 51 | lname.addEventListener('input',function(event){ 52 | const islname = validlname(event.target.value); 53 | if(!islname){ 54 | lnameErr.innerHTML="Please fill LastName"; 55 | document.getElementById("lnameErr").classList.add("error"); 56 | } 57 | else{ 58 | lnameErr.innerHTML=""; 59 | } 60 | }) 61 | 62 | 63 | function validlname(lname){ 64 | if(lname){ 65 | return (true); 66 | } 67 | return (false); 68 | } 69 | 70 | //Real Time Email Validation 71 | email.addEventListener('input',function(event){ 72 | // console.log(validEmail(event.target.value)); 73 | 74 | const isEmailValid = validEmail(event.target.value); 75 | if(!isEmailValid){ 76 | emailErr.innerHTML="NOT VALID EMAIL"; 77 | document.getElementById("emailErr").classList.add("error"); 78 | }else{ 79 | emailErr.innerHTML=""; 80 | } 81 | 82 | }); 83 | 84 | //Matching Pattern Using Regular Expression 85 | function validEmail(email) 86 | { 87 | if(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) 88 | { 89 | return (true); 90 | } 91 | return (false); 92 | } 93 | 94 | //RealTime Checking Password Length 95 | password.addEventListener('input',function(event){ 96 | const isPasswordValid = validPassword(event.target.value); 97 | if(!isPasswordValid){ 98 | passwordErr.innerHTML="Password Less than 6"; 99 | document.getElementById("passwordErr").classList.add("error"); 100 | }else{ 101 | passwordErr.innerHTML=""; 102 | } 103 | }); 104 | 105 | function validPassword(password) 106 | { 107 | if(password.length > 6){ 108 | return (true); 109 | } 110 | return (false); 111 | } 112 | 113 | conpass.addEventListener('input',function(event){ 114 | const isConpassValid = validConpass(event.target.value); 115 | if(!isConpassValid){ 116 | conpassErr.innerHTML="Confirm Password Less than 6"; 117 | document.getElementById("conpassErr").classList.add("error"); 118 | }else{ 119 | conpassErr.innerHTML=""; 120 | } 121 | }); 122 | 123 | function validConpass(conpass) 124 | { 125 | if(conpass.length > 6){ 126 | return (true); 127 | } 128 | return (false); 129 | } 130 | 131 | 132 | 133 | 134 | -------------------------------------------------------------------------------- /admin/admin_sidebar.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 96 | 97 | 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /admin/admin_login.php: -------------------------------------------------------------------------------- 1 | '; 10 | echo "alert('You are already Logged In!... ');"; 11 | echo 'window.location.href = "../admin/admin_panel.php"'; 12 | echo ''; 13 | } 14 | 15 | ?> 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | Employee Management System 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 | 34 | 42 |
43 | 44 | 45 | 46 |
47 |

Admin Login

48 |

49 |

50 |
51 | 52 |
53 | 54 |
55 | 56 | 57 |
58 | 59 |
60 | 61 | 62 |
63 | 64 |
65 | 66 |
67 | 68 | 69 |
70 |
71 |
72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 0) 94 | { 95 | $row = mysqli_fetch_array($result); 96 | 97 | if($row['user_type'] == 'admin') 98 | { 99 | $_SESSION['admin_email'] = $row['email']; 100 | $_SESSION['admin_adminid'] = true; 101 | echo " 102 | 106 | "; 107 | 108 | ?> 109 | 110 | 111 | 121 | const loginErr = document.getElementById('loginErr'); 122 | loginErr.innerHTML='Invalid Credential'; 123 | 124 | 125 | "; 126 | 127 | } 128 | } 129 | 130 | ?> -------------------------------------------------------------------------------- /emp_man_sys.sql: -------------------------------------------------------------------------------- 1 | -- phpMyAdmin SQL Dump 2 | -- version 5.2.0 3 | -- https://www.phpmyadmin.net/ 4 | -- 5 | -- Host: 127.0.0.1 6 | -- Generation Time: Aug 20, 2023 at 06:48 PM 7 | -- Server version: 10.4.27-MariaDB 8 | -- PHP Version: 8.2.0 9 | 10 | SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; 11 | START TRANSACTION; 12 | SET time_zone = "+00:00"; 13 | 14 | 15 | /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; 16 | /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; 17 | /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; 18 | /*!40101 SET NAMES utf8mb4 */; 19 | 20 | -- 21 | -- Database: `emp_man_sys` 22 | -- 23 | 24 | -- -------------------------------------------------------- 25 | 26 | -- 27 | -- Table structure for table `admin_login` 28 | -- 29 | 30 | CREATE TABLE `admin_login` ( 31 | `id` int(11) NOT NULL, 32 | `firstname` varchar(50) NOT NULL, 33 | `lastname` varchar(50) NOT NULL, 34 | `email` varchar(40) NOT NULL, 35 | `password` varchar(40) NOT NULL, 36 | `confirmpassword` varchar(40) NOT NULL, 37 | `gender` varchar(10) NOT NULL, 38 | `user_type` varchar(255) NOT NULL DEFAULT 'admin' 39 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci; 40 | 41 | -- 42 | -- Dumping data for table `admin_login` 43 | -- 44 | 45 | INSERT INTO `admin_login` (`id`, `firstname`, `lastname`, `email`, `password`, `confirmpassword`, `gender`, `user_type`) VALUES 46 | (1, 'Admin', 'Admin', 'admin@gmail.com', '0192023a7bbd73250516f069df18b500', '0192023a7bbd73250516f069df18b500', 'male', 'admin'); 47 | 48 | -- -------------------------------------------------------- 49 | 50 | -- 51 | -- Table structure for table `leave_request` 52 | -- 53 | 54 | CREATE TABLE `leave_request` ( 55 | `id` int(20) NOT NULL, 56 | `email` varchar(50) NOT NULL, 57 | `subject` varchar(100) NOT NULL, 58 | `content` varchar(250) NOT NULL, 59 | `status` varchar(100) NOT NULL DEFAULT 'pending', 60 | `leave_submit_date` datetime NOT NULL DEFAULT current_timestamp(), 61 | `start_date` date NOT NULL DEFAULT current_timestamp(), 62 | `end_date` date NOT NULL DEFAULT current_timestamp() 63 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci; 64 | 65 | -- -------------------------------------------------------- 66 | 67 | -- 68 | -- Table structure for table `register` 69 | -- 70 | 71 | CREATE TABLE `register` ( 72 | `id` int(11) NOT NULL, 73 | `firstname` varchar(50) NOT NULL, 74 | `lastname` varchar(50) NOT NULL, 75 | `email` varchar(40) NOT NULL, 76 | `password` varchar(40) NOT NULL, 77 | `confirmpassword` varchar(40) NOT NULL, 78 | `department` varchar(30) NOT NULL, 79 | `gender` varchar(10) NOT NULL, 80 | `user_type` varchar(255) NOT NULL DEFAULT 'user', 81 | `status` varchar(100) NOT NULL DEFAULT 'pending', 82 | `date_registration` timestamp NOT NULL DEFAULT current_timestamp(), 83 | `images` varchar(50) NOT NULL 84 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci; 85 | 86 | -- 87 | -- Dumping data for table `register` 88 | -- 89 | 90 | INSERT INTO `register` (`id`, `firstname`, `lastname`, `email`, `password`, `confirmpassword`, `department`, `gender`, `user_type`, `status`, `date_registration`, `images`) VALUES 91 | (139, 'Doraemon', '21 Century', 'doraemon@gmail.com', '4ab52314fe615b468eaef0f57e06e6fd', '4ab52314fe615b468eaef0f57e06e6fd', 'account', 'male', 'user', 'approved', '2023-08-20 12:50:24', 'doraemon.jpg'); 92 | 93 | -- 94 | -- Indexes for dumped tables 95 | -- 96 | 97 | -- 98 | -- Indexes for table `admin_login` 99 | -- 100 | ALTER TABLE `admin_login` 101 | ADD PRIMARY KEY (`id`); 102 | 103 | -- 104 | -- Indexes for table `leave_request` 105 | -- 106 | ALTER TABLE `leave_request` 107 | ADD PRIMARY KEY (`id`); 108 | 109 | -- 110 | -- Indexes for table `register` 111 | -- 112 | ALTER TABLE `register` 113 | ADD PRIMARY KEY (`id`); 114 | 115 | -- 116 | -- AUTO_INCREMENT for dumped tables 117 | -- 118 | 119 | -- 120 | -- AUTO_INCREMENT for table `admin_login` 121 | -- 122 | ALTER TABLE `admin_login` 123 | MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2; 124 | 125 | -- 126 | -- AUTO_INCREMENT for table `leave_request` 127 | -- 128 | ALTER TABLE `leave_request` 129 | MODIFY `id` int(20) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=190; 130 | 131 | -- 132 | -- AUTO_INCREMENT for table `register` 133 | -- 134 | ALTER TABLE `register` 135 | MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=141; 136 | COMMIT; 137 | 138 | /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; 139 | /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; 140 | /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; 141 | -------------------------------------------------------------------------------- /employee/emp_login.php: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Employee Login 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 37 |
38 | 39 | 40 | 41 |
42 |

Employee Login

43 |

44 |

45 |
46 | 47 |
48 |
49 | 50 | 51 |
52 | 53 |
54 | 55 | 56 |
57 | 58 |
59 | 60 |

Don't have an account?

61 |
62 | 63 | 64 |
65 |
66 |
67 | 68 | 69 | 70 | 71 | 72 | 100 | const success = document.getElementById('success'); 101 | success.innerHTML='Successfull Login'; 102 | 103 | "; 104 | 105 | ?> 106 | 107 | 108 | '; 115 | echo 'alert("Your account is pending for approval! Please try again later");'; 116 | echo 'window.location.href = "../employee/emp_login.php"'; 117 | echo ''; 118 | 119 | session_destroy(); 120 | } 121 | elseif($status == "rejected") 122 | { 123 | echo ''; 127 | 128 | session_destroy(); 129 | } 130 | } 131 | else{ 132 | echo " 133 | 137 | 138 | "; 139 | } 140 | } 141 | 142 | ?> -------------------------------------------------------------------------------- /employee/emp_panel.php: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | Employee Dashboard 29 | 30 | 31 | 32 | 33 | 34 | 35 | 160 | 161 | 162 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | -------------------------------------------------------------------------------- /admin/admin_panel.php: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | Admin Dashboard 25 | 26 | 27 | 28 | 29 | 30 | 102 | 103 | 104 | 182 | 183 | 184 | 185 | 186 | 187 |
188 | 189 | 190 | Welcome Admin (".$result['firstname'] .")

201 | "; 202 | } 203 | } 204 | ?> 205 | 206 |
207 | 208 | 209 | 210 | 211 | 212 | 213 | -------------------------------------------------------------------------------- /css/panel.css: -------------------------------------------------------------------------------- 1 | /* Import Google font - Poppins */ 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"); 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: "Poppins", sans-serif; 8 | } 9 | :root { 10 | --bar-color: #012733; 11 | --side-bar-color: #10171a; 12 | --white-color: #fff; 13 | --blue-color: #4070f4; 14 | --grey-color: #707070; 15 | --grey-color-light: #aaa; 16 | --drop-down-color: #020202; 17 | } 18 | body { 19 | background-color: #e7f2fd; 20 | transition: all 0.5s ease; 21 | } 22 | body.dark { 23 | background-color: #333; 24 | } 25 | body.dark { 26 | --bar-color: #012733; 27 | --side-bar-color: #10171a; 28 | --white-color: #333; 29 | --blue-color: #fff; 30 | --grey-color: #f2f2f2; 31 | --grey-color-light: #aaa; 32 | } 33 | 34 | /* navbar */ 35 | .navbar { 36 | position: fixed; 37 | top: 0; 38 | width: 100%; 39 | left: 0; 40 | background-color: var(--bar-color); 41 | display: flex; 42 | align-items: center; 43 | justify-content: space-between; 44 | padding: 15px 30px; 45 | z-index: 1000; 46 | box-shadow: 0 0 2px var(--grey-color-light); 47 | } 48 | .logo_item { 49 | display: flex; 50 | align-items: center; 51 | column-gap: 10px; 52 | font-size: 22px; 53 | font-weight: 500; 54 | color: white; 55 | 56 | } 57 | #main_logo{ 58 | width: 70px; 59 | height: 25px; 60 | object-fit: cover; 61 | border-radius: 50%; 62 | } 63 | .navbar img { 64 | width: 35px; 65 | height: 35px; 66 | object-fit: cover; 67 | border-radius: 50%; 68 | } 69 | .search_bar { 70 | height: 47px; 71 | max-width: 430px; 72 | width: 100%; 73 | } 74 | .search_bar input { 75 | height: 100%; 76 | width: 100%; 77 | border-radius: 25px; 78 | font-size: 18px; 79 | outline: none; 80 | background-color: var(--white-color); 81 | color: var(--grey-color); 82 | border: 1px solid var(--grey-color-light); 83 | padding: 0 20px; 84 | } 85 | .navbar_content { 86 | display: flex; 87 | align-items: center; 88 | column-gap: 25px; 89 | } 90 | .navbar_content i { 91 | cursor: pointer; 92 | font-size: 20px; 93 | color: var(--grey-color); 94 | } 95 | /*Image DropDown*/ 96 | .user-pic{ 97 | width: 10%; 98 | border-radius: 50%; 99 | cursor: pointer; 100 | margin-right: 10px; 101 | } 102 | .sub-menu-wrap{ 103 | position: absolute; 104 | top: 100%; 105 | right: 0%; 106 | width: 320px; 107 | max-height: 0px; 108 | overflow: hidden; 109 | transition: max-height 0.5s; 110 | 111 | } 112 | .sub-menu-wrap.open-menu{ 113 | max-height: 400px; 114 | } 115 | .sub-menu{ 116 | color: #fff; 117 | background: var(--drop-down-color);; 118 | padding: 20px; 119 | margin: 10px; 120 | } 121 | .user-info{ 122 | display: flex; 123 | align-items: center; 124 | } 125 | .user-info h3{ 126 | font-weight: 500; 127 | } 128 | .user-info img{ 129 | width: 40px; 130 | border-radius: 50%; 131 | margin-right: 15px; 132 | object-fit: cover; 133 | 134 | } 135 | .sub-menu hr{ 136 | border: 0; 137 | height: 1px; 138 | width: 100%; 139 | background: #ccc; 140 | margin: 15px 0 10px; 141 | } 142 | .sub-menu-link{ 143 | display: flex; 144 | align-items: center; 145 | text-decoration: none; 146 | color: #d4caca; 147 | margin: 12px 0; 148 | } 149 | .sub-menu-link p { 150 | width: 100%; 151 | } 152 | .sub-menu-link img{ 153 | width: 40px; 154 | background: #e5e5e5; 155 | border-radius: 50%; 156 | padding: 8px; 157 | margin-right: 15px; 158 | 159 | } 160 | .sub-menu-link span{ 161 | font-size: 22px; 162 | transition: transform 0.5s; 163 | } 164 | .sub-menu-link:hover span{ 165 | transform: translateX(5px); 166 | } 167 | .sub-menu-link:hover p { 168 | color: #fff; 169 | font-weight: 600; 170 | } 171 | 172 | /* sidebar */ 173 | .sidebar { 174 | background-color: var(--side-bar-color); 175 | width: 260px; 176 | position: fixed; 177 | top: 0; 178 | left: 0; 179 | height: 100%; 180 | padding: 80px 20px; 181 | z-index: 100; 182 | overflow-y: scroll; 183 | box-shadow: 0 0 1px var(--grey-color-light); 184 | transition: all 0.5s ease; 185 | } 186 | .sidebar.close { 187 | padding: 60px 0; 188 | width: 80px; 189 | } 190 | .sidebar::-webkit-scrollbar { 191 | display: none; 192 | } 193 | .menu_content { 194 | position: relative; 195 | } 196 | .menu_title { 197 | margin: 15px 0; 198 | padding: 0 20px; 199 | font-size: 18px; 200 | } 201 | .menu_items a{ 202 | text-decoration: none; 203 | } 204 | .sidebar.close .menu_title { 205 | padding: 6px 30px; 206 | } 207 | .menu_title::before { 208 | color: var(--grey-color); 209 | white-space: nowrap; 210 | } 211 | .menu_dahsboard::before { 212 | content: "Dashboard"; 213 | } 214 | .menu_editor::before { 215 | content: "Editor"; 216 | } 217 | .menu_setting::before { 218 | content: "Setting"; 219 | } 220 | .sidebar.close .menu_title::before { 221 | content: ""; 222 | position: absolute; 223 | height: 2px; 224 | width: 18px; 225 | border-radius: 12px; 226 | background: var(--grey-color-light); 227 | } 228 | .menu_items { 229 | padding: 0; 230 | list-style: none; 231 | } 232 | .navlink_icon { 233 | position: relative; 234 | font-size: 22px; 235 | min-width: 50px; 236 | line-height: 40px; 237 | display: inline-block; 238 | text-align: center; 239 | border-radius: 6px; 240 | } 241 | .navlink_icon::before { 242 | content: ""; 243 | position: absolute; 244 | height: 100%; 245 | width: calc(100% + 100px); 246 | left: -20px; 247 | } 248 | .navlink_icon:hover { 249 | background: var(--blue-color); 250 | } 251 | 252 | /*Sidebar*/ 253 | .sidebar .nav_link { 254 | display: flex; 255 | align-items: center; 256 | width: 100%; 257 | padding: 4px 15px; 258 | border-radius: 8px; 259 | text-decoration: none; 260 | color: var(--grey-color); 261 | white-space: nowrap; 262 | } 263 | .sidebar.close .navlink { 264 | display: none; 265 | } 266 | .nav_link:hover { 267 | color: var(--white-color); 268 | background: var(--blue-color); 269 | } 270 | .sidebar.close .nav_link:hover { 271 | background: var(--white-color); 272 | } 273 | .submenu_item { 274 | cursor: pointer; 275 | } 276 | .submenu { 277 | display: none; 278 | } 279 | .submenu_item .arrow-left { 280 | position: absolute; 281 | right: 10px; 282 | display: inline-block; 283 | margin-right: auto; 284 | } 285 | .sidebar.close .submenu { 286 | display: none; 287 | } 288 | .show_submenu ~ .submenu { 289 | display: block; 290 | } 291 | .show_submenu .arrow-left { 292 | transform: rotate(90deg); 293 | } 294 | .submenu .sublink { 295 | padding: 15px 15px 15px 52px; 296 | } 297 | .bottom_content { 298 | position: fixed; 299 | bottom: 60px; 300 | left: 0; 301 | width: 260px; 302 | cursor: pointer; 303 | transition: all 0.5s ease; 304 | } 305 | .bottom { 306 | position: absolute; 307 | display: flex; 308 | align-items: center; 309 | left: 0; 310 | justify-content: space-around; 311 | padding: 18px 0; 312 | text-align: center; 313 | width: 100%; 314 | color: var(--grey-color); 315 | border-top: 1px solid var(--grey-color-light); 316 | background-color: var(--side-bar-color); 317 | } 318 | .bottom i { 319 | font-size: 20px; 320 | } 321 | .bottom span { 322 | font-size: 18px; 323 | } 324 | .sidebar.close .bottom_content { 325 | width: 50px; 326 | left: 15px; 327 | } 328 | .sidebar.close .bottom span { 329 | display: none; 330 | } 331 | .sidebar.hoverable .collapse_sidebar { 332 | display: none; 333 | } 334 | #sidebarOpen { 335 | display: none; 336 | } 337 | @media screen and (max-width: 768px) { 338 | #sidebarOpen { 339 | font-size: 25px; 340 | display: block; 341 | margin-right: 10px; 342 | cursor: pointer; 343 | color: var(--grey-color); 344 | } 345 | .sidebar.close { 346 | left: -100%; 347 | } 348 | .search_bar { 349 | display: none; 350 | } 351 | .sidebar.close .bottom_content { 352 | left: -100%; 353 | } 354 | } 355 | 356 | /*Admin Panel Css*/ 357 | 358 | .right_content{ 359 | padding-top: 6%; 360 | padding-left: 20%; 361 | color: gray; 362 | font-size: 18px; 363 | font-weight: bold; 364 | } 365 | 366 | /*Delete User Btn*/ 367 | #deleteUserBtn{ 368 | background-color: red; 369 | color: white; 370 | width: 100%; 371 | font-size: 18px; 372 | height: 35px; 373 | cursor: pointer; 374 | 375 | } 376 | #deleteUserBtn:hover{ 377 | cursor: pointer; 378 | background-color: rgb(175, 88, 88); 379 | } -------------------------------------------------------------------------------- /admin/manage_employee.php: -------------------------------------------------------------------------------- 1 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | Manage Employee 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 104 | 105 | 106 | 184 | 185 | 186 |
187 | 188 |

Manage Employee

189 |
190 | 191 |
192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | "; 224 | } 225 | 226 | } 227 | 228 | ?> 229 | 230 |
IDFirstNameLastNameEmailDepartmentOperations
".$result['id']." ".$result['firstname']." ".$result['lastname']." ".$result['email']." ".$result['department']."
231 |
232 |
233 | 234 | 235 | 240 | 241 | 242 | 243 | 244 | -------------------------------------------------------------------------------- /css/animations.css: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes spin 2 | { 3 | 0% 4 | { 5 | -webkit-transform: rotate(0); 6 | transform: rotate(0); 7 | } 8 | 100% 9 | { 10 | -webkit-transform: rotate(359deg); 11 | transform: rotate(359deg); 12 | } 13 | } 14 | @keyframes spin 15 | { 16 | 0% 17 | { 18 | -webkit-transform: rotate(0); 19 | transform: rotate(0); 20 | } 21 | 100% 22 | { 23 | -webkit-transform: rotate(359deg); 24 | transform: rotate(359deg); 25 | } 26 | } 27 | @-webkit-keyframes burst 28 | { 29 | 0% 30 | { 31 | -webkit-transform: scale(1); 32 | transform: scale(1); 33 | 34 | opacity: 1; 35 | } 36 | 90% 37 | { 38 | -webkit-transform: scale(1.5); 39 | transform: scale(1.5); 40 | 41 | opacity: 0; 42 | } 43 | } 44 | @keyframes burst 45 | { 46 | 0% 47 | { 48 | -webkit-transform: scale(1); 49 | transform: scale(1); 50 | 51 | opacity: 1; 52 | } 53 | 90% 54 | { 55 | -webkit-transform: scale(1.5); 56 | transform: scale(1.5); 57 | 58 | opacity: 0; 59 | } 60 | } 61 | @-webkit-keyframes flashing 62 | { 63 | 0% 64 | { 65 | opacity: 1; 66 | } 67 | 45% 68 | { 69 | opacity: 0; 70 | } 71 | 90% 72 | { 73 | opacity: 1; 74 | } 75 | } 76 | @keyframes flashing 77 | { 78 | 0% 79 | { 80 | opacity: 1; 81 | } 82 | 45% 83 | { 84 | opacity: 0; 85 | } 86 | 90% 87 | { 88 | opacity: 1; 89 | } 90 | } 91 | @-webkit-keyframes fade-left 92 | { 93 | 0% 94 | { 95 | -webkit-transform: translateX(0); 96 | transform: translateX(0); 97 | 98 | opacity: 1; 99 | } 100 | 75% 101 | { 102 | -webkit-transform: translateX(-20px); 103 | transform: translateX(-20px); 104 | 105 | opacity: 0; 106 | } 107 | } 108 | @keyframes fade-left 109 | { 110 | 0% 111 | { 112 | -webkit-transform: translateX(0); 113 | transform: translateX(0); 114 | 115 | opacity: 1; 116 | } 117 | 75% 118 | { 119 | -webkit-transform: translateX(-20px); 120 | transform: translateX(-20px); 121 | 122 | opacity: 0; 123 | } 124 | } 125 | @-webkit-keyframes fade-right 126 | { 127 | 0% 128 | { 129 | -webkit-transform: translateX(0); 130 | transform: translateX(0); 131 | 132 | opacity: 1; 133 | } 134 | 75% 135 | { 136 | -webkit-transform: translateX(20px); 137 | transform: translateX(20px); 138 | 139 | opacity: 0; 140 | } 141 | } 142 | @keyframes fade-right 143 | { 144 | 0% 145 | { 146 | -webkit-transform: translateX(0); 147 | transform: translateX(0); 148 | 149 | opacity: 1; 150 | } 151 | 75% 152 | { 153 | -webkit-transform: translateX(20px); 154 | transform: translateX(20px); 155 | 156 | opacity: 0; 157 | } 158 | } 159 | @-webkit-keyframes fade-up 160 | { 161 | 0% 162 | { 163 | -webkit-transform: translateY(0); 164 | transform: translateY(0); 165 | 166 | opacity: 1; 167 | } 168 | 75% 169 | { 170 | -webkit-transform: translateY(-20px); 171 | transform: translateY(-20px); 172 | 173 | opacity: 0; 174 | } 175 | } 176 | @keyframes fade-up 177 | { 178 | 0% 179 | { 180 | -webkit-transform: translateY(0); 181 | transform: translateY(0); 182 | 183 | opacity: 1; 184 | } 185 | 75% 186 | { 187 | -webkit-transform: translateY(-20px); 188 | transform: translateY(-20px); 189 | 190 | opacity: 0; 191 | } 192 | } 193 | @-webkit-keyframes fade-down 194 | { 195 | 0% 196 | { 197 | -webkit-transform: translateY(0); 198 | transform: translateY(0); 199 | 200 | opacity: 1; 201 | } 202 | 75% 203 | { 204 | -webkit-transform: translateY(20px); 205 | transform: translateY(20px); 206 | 207 | opacity: 0; 208 | } 209 | } 210 | @keyframes fade-down 211 | { 212 | 0% 213 | { 214 | -webkit-transform: translateY(0); 215 | transform: translateY(0); 216 | 217 | opacity: 1; 218 | } 219 | 75% 220 | { 221 | -webkit-transform: translateY(20px); 222 | transform: translateY(20px); 223 | 224 | opacity: 0; 225 | } 226 | } 227 | @-webkit-keyframes tada 228 | { 229 | from 230 | { 231 | -webkit-transform: scale3d(1, 1, 1); 232 | transform: scale3d(1, 1, 1); 233 | } 234 | 235 | 10%, 236 | 20% 237 | { 238 | -webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg); 239 | transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg); 240 | } 241 | 242 | 30%, 243 | 50%, 244 | 70%, 245 | 90% 246 | { 247 | -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg); 248 | transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg); 249 | } 250 | 251 | 40%, 252 | 60%, 253 | 80% 254 | { 255 | -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg); 256 | transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg); 257 | } 258 | 259 | to 260 | { 261 | -webkit-transform: scale3d(1, 1, 1); 262 | transform: scale3d(1, 1, 1); 263 | } 264 | } 265 | 266 | @keyframes tada 267 | { 268 | from 269 | { 270 | -webkit-transform: scale3d(1, 1, 1); 271 | transform: scale3d(1, 1, 1); 272 | } 273 | 274 | 10%, 275 | 20% 276 | { 277 | -webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg); 278 | transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg); 279 | } 280 | 281 | 30%, 282 | 50%, 283 | 70%, 284 | 90% 285 | { 286 | -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg); 287 | transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg); 288 | } 289 | 290 | 40%, 291 | 60%, 292 | 80% 293 | { 294 | -webkit-transform: rotate3d(0, 0, 1, -10deg); 295 | transform: rotate3d(0, 0, 1, -10deg); 296 | } 297 | 298 | to 299 | { 300 | -webkit-transform: scale3d(1, 1, 1); 301 | transform: scale3d(1, 1, 1); 302 | } 303 | } 304 | .bx-spin 305 | { 306 | -webkit-animation: spin 2s linear infinite; 307 | animation: spin 2s linear infinite; 308 | } 309 | .bx-spin-hover:hover 310 | { 311 | -webkit-animation: spin 2s linear infinite; 312 | animation: spin 2s linear infinite; 313 | } 314 | 315 | .bx-tada 316 | { 317 | -webkit-animation: tada 1.5s ease infinite; 318 | animation: tada 1.5s ease infinite; 319 | } 320 | .bx-tada-hover:hover 321 | { 322 | -webkit-animation: tada 1.5s ease infinite; 323 | animation: tada 1.5s ease infinite; 324 | } 325 | 326 | .bx-flashing 327 | { 328 | -webkit-animation: flashing 1.5s infinite linear; 329 | animation: flashing 1.5s infinite linear; 330 | } 331 | .bx-flashing-hover:hover 332 | { 333 | -webkit-animation: flashing 1.5s infinite linear; 334 | animation: flashing 1.5s infinite linear; 335 | } 336 | 337 | .bx-burst 338 | { 339 | -webkit-animation: burst 1.5s infinite linear; 340 | animation: burst 1.5s infinite linear; 341 | } 342 | .bx-burst-hover:hover 343 | { 344 | -webkit-animation: burst 1.5s infinite linear; 345 | animation: burst 1.5s infinite linear; 346 | } 347 | .bx-fade-up 348 | { 349 | -webkit-animation: fade-up 1.5s infinite linear; 350 | animation: fade-up 1.5s infinite linear; 351 | } 352 | .bx-fade-up-hover:hover 353 | { 354 | -webkit-animation: fade-up 1.5s infinite linear; 355 | animation: fade-up 1.5s infinite linear; 356 | } 357 | .bx-fade-down 358 | { 359 | -webkit-animation: fade-down 1.5s infinite linear; 360 | animation: fade-down 1.5s infinite linear; 361 | } 362 | .bx-fade-down-hover:hover 363 | { 364 | -webkit-animation: fade-down 1.5s infinite linear; 365 | animation: fade-down 1.5s infinite linear; 366 | } 367 | .bx-fade-left 368 | { 369 | -webkit-animation: fade-left 1.5s infinite linear; 370 | animation: fade-left 1.5s infinite linear; 371 | } 372 | .bx-fade-left-hover:hover 373 | { 374 | -webkit-animation: fade-left 1.5s infinite linear; 375 | animation: fade-left 1.5s infinite linear; 376 | } 377 | .bx-fade-right 378 | { 379 | -webkit-animation: fade-right 1.5s infinite linear; 380 | animation: fade-right 1.5s infinite linear; 381 | } 382 | .bx-fade-right-hover:hover 383 | { 384 | -webkit-animation: fade-right 1.5s infinite linear; 385 | animation: fade-right 1.5s infinite linear; 386 | } -------------------------------------------------------------------------------- /register.php: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Register 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 32 |
33 | 34 | 35 |
36 |

Registration Form

37 |

38 |

39 |
40 | 41 |
42 | 43 |
44 |

45 | 46 | "> 47 | 48 | 49 |

50 | 51 | "> 52 | 53 |
54 | 55 |
56 |

57 | 58 | "> 59 |
60 | 61 |
62 |

63 | 64 | "> 65 |
66 | 67 |
68 |

69 | 70 | "> 71 |
72 | 73 |
74 | 80 | 81 |
82 | 83 |
84 | 85 | 86 | 87 | 88 | 89 |
90 | 91 | 94 | 95 | 98 | 99 | 100 |
101 | 102 | 103 |
104 | 105 |
106 | 107 |

Already have an account?

108 |
109 | 110 | 111 | 112 |
113 |
114 |
115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 149 | const fieldErr = document.getElementById('fieldErr'); 150 | fieldErr.innerHTML='Please fill out all the fields'; 151 | 152 | 153 | "; 154 | 155 | } else { 156 | //Check if password and confirm password match 157 | if ($pass !== $conpass) { 158 | echo " 159 | 163 | 164 | "; 165 | } 166 | 167 | else { 168 | 169 | $sql = "SELECT * FROM register WHERE email = '$email'"; 170 | $result = mysqli_query($conn, $sql); 171 | $row = mysqli_fetch_array($result); 172 | 173 | if($row['status'] == 'rejected') 174 | { 175 | 176 | echo " 177 | 181 | 182 | "; 183 | } 184 | elseif($row['status'] == 'pending') 185 | { 186 | 187 | echo " 188 | 192 | 193 | "; 194 | } 195 | 196 | elseif (mysqli_num_rows($result) > 0) { 197 | //Email already exists in database 198 | echo " 199 | 202 | 203 | "; 204 | ?> 205 | 206 | 207 | 220 | const success = document.getElementById('success'); 221 | success.innerHTML='Registration Successfull!..Wait For Account Approval'; 222 | 223 | 224 | "; 225 | ?> 226 | 227 | 228 | -------------------------------------------------------------------------------- /admin/userApproval.php: -------------------------------------------------------------------------------- 1 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | User Verification 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 105 | 106 | 107 | 185 | 186 | 187 |
188 | 189 | 190 | Welcome Admin (" . $result['firstname'] . ")

200 | "; 201 | } 202 | } 203 | ?> 204 | 205 |
206 | 207 | 208 |
209 | 210 |
211 | 212 |

USER PENDING LIST

213 | 214 |
215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 252 | 253 |
FIRSTNAMELASTNAMEEMAILDEPARTMENTSTATUSACTION
240 | 241 | 242 |
254 |
255 |
256 | 257 | 258 | 259 | 260 |
261 |

REJECTED USER LIST

262 |

**DELETE REJECTED USER EMAIL FROM DATABASE**

263 |
264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 290 | 291 | 292 | 293 | 294 |
IDFIRSTNAMELASTNAMEEMAILDEPARTMENTSTATUSACTION
288 | '> 289 |
295 |
296 |
297 | 298 | 299 | 300 | 301 | 302 | 311 | 312 | 313 | 314 | 320 | 321 | 322 | 331 | 332 | 333 | 337 | 338 | 339 | -------------------------------------------------------------------------------- /admin/admin_edit_profile.php: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | Edit Profile 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 107 | 108 | 109 | 183 | 184 | 185 |
186 | 187 |
188 | 189 |

Admin Profile

190 | 191 |
192 | 193 |
194 | 195 | 237 |
238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 263 | const editErr = document.getElementById('editErr'); 264 | editErr.innerHTML='Please fill out all fields'; 265 | 266 | 267 | "; 268 | 269 | } 270 | else{ 271 | if($pass !== $conpass){ 272 | 273 | echo" 274 | 278 | 279 | "; 280 | 281 | } 282 | else{ 283 | if($_SESSION['admin_email'] == $email) 284 | { 285 | $query = "UPDATE admin_login SET firstname = '$fname', lastname = '$lname', password = '$hashedPd', confirmpassword = '$hashedConpass' WHERE email = '$email'"; 286 | $data = mysqli_query($conn, $query); 287 | 288 | if($data) 289 | { 290 | echo" 291 | 295 | 296 | "; 297 | 298 | ?> 299 | 300 | 301 | 307 | const editErr = document.getElementById('editErr'); 308 | editErr.innerHTML='You are not authorized to change this user data'; 309 | 310 | 311 | "; 312 | 313 | } 314 | } 315 | } 316 | 317 | } 318 | 319 | ?> 320 | -------------------------------------------------------------------------------- /admin/manage_leave.php: -------------------------------------------------------------------------------- 1 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | Leave Management Section 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 106 | 107 | 108 | 186 | 187 | 188 | 189 |
190 | 191 |
192 | 193 |

PENDING LEAVE LIST

194 | 195 |
196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 214 | 215 | 216 | 217 | 218 |
219 |
220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 232 | 233 | 234 | 235 | 236 | 237 | 240 | 241 |
EMAILSUBJECTCONTENTENTRY DATESTART DATEEND DATEACTION
229 | 230 | 231 |
242 |
243 |
244 |
245 | 246 | 247 | 248 |
249 |

APPROVED LEAVE LIST

250 |
251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 |
IDEMAILSUBJECTLeave Submission DateLEAVE START DATELEAVE END DATEACTION
'>
284 |
285 |
286 | 287 | 288 | 289 |
290 |

REJECTED LEAVE LIST

291 |
292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 |
IDEMAILSUBJECTLeave Submission DateLEAVE START DATELEAVE END DATEACTION
'>
323 |
324 |
325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 343 | 344 | 345 | 346 | 347 | 348 | 355 | 356 | 357 | 366 | 367 | 368 | -------------------------------------------------------------------------------- /employee/leave_req.php: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | Edit Profile 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 147 | 148 | 149 | 193 | 194 | 195 |
196 | 197 |
198 | 199 |

Leave Request

200 |

**DONOT SUBMIT MULTIPLE DATA**

201 | 202 | 239 |
240 |
241 | 242 | 243 | < 244 | 245 |
246 |

List of Leave

247 |
248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 291 | 292 | 293 | 294 | 295 | 296 | 297 |
SUBMISSION DATESUBJECTCONTENTSTART DATEEND DATESTATUS
272 | Pending

"; 276 | } 277 | elseif($row['status']=="approved"){ 278 | echo "

Approved

"; 279 | } 280 | elseif($row['status']=="rejected"){ 281 | echo "

Rejected

"; 282 | } 283 | else{ 284 | 285 | } 286 | 287 | 288 | ?> 289 | 290 |
298 |
299 |
300 | 301 | 302 | 303 | 304 | 305 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 340 | 341 |

342 | 343 | 357 | const fieldErr = document.getElementById('ErrMsg'); 358 | ErrMsg.innerHTML='Please fill out all the details'; 359 | 360 | 361 | "; 362 | } else { 363 | 364 | $leave_req = mysqli_query($conn, "INSERT INTO leave_request(email,subject,content,status,start_date,end_date) VALUE('$email','$subject','$content','pending','$start_date','$end_date')"); 365 | 366 | if ($leave_req > 0) { 367 | echo " 368 | 372 | 373 | "; 374 | ?> 375 | 376 | 377 | -------------------------------------------------------------------------------- /employee/edit_profile.php: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | Edit Profile 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 151 | 152 | 153 | 196 | 197 | 198 | 199 | 200 |
201 | 202 |
203 | 204 |

Edit Profile

205 | 206 | 207 | 208 |
209 | 210 | 220 | " width="125px" height="125px" alt="Image"> 221 | 222 | 223 | 229 | 230 |
231 | 232 | 233 | 234 | 235 | 236 | 276 |
277 |
278 | 279 | 280 | 281 | 282 | 283 | 284 | 289 | 290 | 291 | 292 | 293 | 309 | const editErr = document.getElementById('editErr'); 310 | editErr.innerHTML='Please fill out all fields'; 311 | 312 | "; 313 | } 314 | else 315 | { 316 | if($pass !== $conpass) 317 | { 318 | echo " 319 | 323 | "; 324 | } 325 | else 326 | { 327 | if($_SESSION['user_email'] == $email) 328 | { 329 | $query = "UPDATE register SET firstname = '$fname', lastname = '$lname', password = '$hashedPd', confirmpassword = '$hashedConpass' WHERE email = '$email'"; 330 | $data = mysqli_query($conn, $query); 331 | 332 | if($data) 333 | { 334 | echo " 335 | 342 | "; 343 | } 344 | } 345 | else 346 | { 347 | echo " 348 | 352 | "; 353 | } 354 | } 355 | } 356 | } 357 | 358 | // Handle profile picture update 359 | if (isset($_FILES['image']) && $_FILES['image']['size'] > 0) 360 | { 361 | // Image file is selected, proceed with the upload 362 | $image = $_FILES['image']; 363 | $allowedExtensions = ['jpg', 'jpeg', 'png']; 364 | $fileExtension = strtolower(pathinfo($image['name'], PATHINFO_EXTENSION)); 365 | 366 | if (in_array($fileExtension, $allowedExtensions)) 367 | { 368 | $targetDirectory = "../emp_images/"; 369 | $targetFilename = $targetDirectory . basename($image['name']); 370 | 371 | if (move_uploaded_file($image['tmp_name'], $targetFilename)) 372 | { 373 | // Get the old image filename from the database 374 | $email = $_SESSION['user_email']; 375 | $query = "SELECT images FROM register WHERE email = '$email'"; 376 | $result = mysqli_query($conn, $query); 377 | $row = mysqli_fetch_assoc($result); 378 | $oldImage = $row['images']; 379 | 380 | // Update the image filename in the database 381 | $query = "UPDATE register SET images = '" . basename($image['name']) . "' WHERE email = '$email'"; 382 | mysqli_query($conn, $query); 383 | 384 | // Delete the old image if it exists and it's not the default image 385 | if ($oldImage && $oldImage !== "default.jpg" && file_exists($targetDirectory . $oldImage)) 386 | { 387 | unlink($targetDirectory . $oldImage); 388 | } 389 | } 390 | else 391 | { 392 | echo "Error uploading the image."; 393 | } 394 | } 395 | else 396 | { 397 | echo "Invalid file format. Allowed formats: jpg, jpeg, png."; 398 | } 399 | } 400 | ?> 401 | 402 | 403 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Poppins:wght@200&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | /* background-color: #24252A; */ 8 | 9 | } 10 | 11 | body { 12 | background-color: #f2f2f2; 13 | 14 | } 15 | 16 | table { 17 | color: rgb(255, 250, 250); 18 | margin-top: 5%; 19 | background-color: rgb(0, 0, 0); 20 | 21 | width: 100%; 22 | border-collapse: collapse; 23 | table-layout: fixed; 24 | text-align: center; 25 | 26 | 27 | } 28 | 29 | tr, 30 | th { 31 | padding-top: 15px; 32 | /* Add padding for better spacing */ 33 | padding-bottom: 10px; 34 | word-wrap: break-word; 35 | /* To wrap long words within the cell */ 36 | font-size: 15px; 37 | 38 | } 39 | 40 | td { 41 | padding-top: 15px; 42 | /* Add padding for better spacing */ 43 | padding-bottom: 15px; 44 | font-size: 14px; 45 | 46 | 47 | } 48 | 49 | li, 50 | a, 51 | button { 52 | font-family: "Montserrat", sans-serif; 53 | font-weight: 500; 54 | font-size: 17px; 55 | color: #111; 56 | text-decoration: none; 57 | } 58 | 59 | header { 60 | display: flex; 61 | justify-content: flex-end; 62 | align-items: center; 63 | padding: 30px 10%; 64 | background-color: #012733; 65 | 66 | } 67 | 68 | .logo { 69 | height: 30px; 70 | cursor: pointer; 71 | margin-right: auto; 72 | } 73 | 74 | .nav_links { 75 | list-style: none; 76 | } 77 | 78 | .nav_links li { 79 | display: inline-block; 80 | padding: 0px 20px; 81 | 82 | 83 | } 84 | 85 | .nav_links li a { 86 | transition: all 0.3s ease 0s; 87 | color: white; 88 | } 89 | 90 | .nav_links li a:hover { 91 | color: #0088a9; 92 | } 93 | 94 | /* Banner */ 95 | .banner img { 96 | display: block; 97 | padding: 0; 98 | height: 500px; 99 | width: 100%; 100 | } 101 | 102 | /*Register*/ 103 | .container { 104 | background-color: white; 105 | width: 500px; 106 | padding: 2px 25px; 107 | margin: 25px auto 5px; 108 | border-top: 5px solid blue; 109 | box-shadow: 0 0 7px 5px rgba(0, 0, 0, 0.5); 110 | } 111 | 112 | .container h2 { 113 | font-size: 24px; 114 | line-height: 24px; 115 | padding: 30px; 116 | text-align: center; 117 | } 118 | 119 | .input-name { 120 | width: 100%; 121 | position: relative; 122 | margin: 20px auto; 123 | 124 | } 125 | 126 | .lock { 127 | padding: 8px 11px; 128 | } 129 | 130 | .name { 131 | width: 100%; 132 | padding: 8px 0 8px 40px; 133 | } 134 | 135 | .input-name span { 136 | margin-left: 35px; 137 | } 138 | 139 | .text-name { 140 | width: 100%; 141 | padding: 8px 0 8px 40px; 142 | } 143 | 144 | .input-name i { 145 | position: absolute; 146 | font-size: 17px; 147 | color: blue; 148 | border-right: 1px solid #cccccc; 149 | } 150 | 151 | .email { 152 | padding: 8px 10px; 153 | } 154 | 155 | .text-name, 156 | .name { 157 | border: 1px solid #cccccc; 158 | outline: none; 159 | -webkit-transition: all 0.30s ease-in-out; 160 | -moz-transition: all 0.30s ease-in-out; 161 | -ms-transition: all 0.30s ease-in-out; 162 | transition: all 0.30s ease-in-out; 163 | } 164 | 165 | .text-name:hover, 166 | .name:hover { 167 | background-color: #fafafa; 168 | } 169 | 170 | .text-name:focus, 171 | .name:focus { 172 | border: 1px solid blue; 173 | } 174 | 175 | .radio-button { 176 | margin-right: 4px; 177 | } 178 | 179 | /* .country{ 180 | display: inline-block; 181 | width: 100%; 182 | height: 35px; 183 | padding: 0 15px; 184 | cursor: pointer; 185 | border: 1px solid #cccccc; 186 | color: #7b7b7b; 187 | border-radius: 0; 188 | background-color: white; 189 | appearance: none; 190 | -webkit-appearance: none; 191 | -moz-appearance: none; 192 | transition: all 0.2s ease; 193 | } 194 | .country::-ms-expand{ 195 | display: none; 196 | } 197 | .country:hover, .country:focus{ 198 | color: blue; 199 | background-color: #fafafa; 200 | border-color: blue; 201 | outline: none; 202 | } */ 203 | 204 | .arrow { 205 | position: absolute; 206 | top: calc(50% - 4px); 207 | right: 15px; 208 | width: 0; 209 | height: 0; 210 | pointer-events: none; 211 | border-width: 8px 5px 0 5px; 212 | border-style: solid; 213 | border-color: #7b7b7b transparent transparent transparent; 214 | } 215 | 216 | .country:hover+.arrow, 217 | .country:focus+arrow { 218 | border-top-color: blue; 219 | } 220 | 221 | .check { 222 | margin-right: 15px; 223 | position: relative; 224 | } 225 | 226 | 227 | .check::before { 228 | content: ""; 229 | display: inline-block; 230 | width: 8px; 231 | height: 8px; 232 | margin-right: 8px; 233 | vertical-align: -2px; 234 | border: 2px solid #cccccc; 235 | padding: 2.5px; 236 | background-color: transparent; 237 | background-clip: content-box; 238 | transition: all 0.2s ease; 239 | } 240 | 241 | .check::after { 242 | border-right: 2px solid black; 243 | border-top: 2px solid black; 244 | content: ""; 245 | height: 20px; 246 | left: 2px; 247 | position: absolute; 248 | top: 7px; 249 | transform: scaleX(-1) rotate(135deg); 250 | transform-origin: left top; 251 | width: 7px; 252 | display: none; 253 | } 254 | 255 | .check-button { 256 | border: 0; 257 | clip: rect(0 0 0 0); 258 | height: 1px; 259 | margin: -1px; 260 | overflow: hidden; 261 | padding: 0; 262 | position: absolute; 263 | width: 1px; 264 | } 265 | 266 | 267 | .check-button:hover+.check::before { 268 | border-color: blue; 269 | 270 | } 271 | 272 | .check-button:checked+.check::before { 273 | border-color: green; 274 | } 275 | 276 | .check-button:checked+.check::after { 277 | -moz-animation: check 0.8s ease 0s running; 278 | -webkit-animation: check 0.8s ease 0s running; 279 | animation: check 0.8s ease 0s running; 280 | display: block; 281 | width: 7px; 282 | height: 20px; 283 | border-color: green; 284 | } 285 | 286 | @keyframes check { 287 | 0% { 288 | height: 0; 289 | width: 0; 290 | } 291 | 292 | 25% { 293 | height: 0; 294 | width: 7px; 295 | } 296 | 297 | 50% { 298 | height: 20px; 299 | width: 7px; 300 | } 301 | } 302 | 303 | .reg-button { 304 | background-color: blue; 305 | color: white; 306 | height: 35px; 307 | line-height: 35px; 308 | width: 100%; 309 | border: none; 310 | outline: none; 311 | font-size: 18px; 312 | cursor: pointer; 313 | margin-bottom: 10px; 314 | } 315 | 316 | .reg-button:hover { 317 | background-color: green; 318 | } 319 | 320 | /*Login-Css............*/ 321 | 322 | .login-container { 323 | background-color: white; 324 | width: 500px; 325 | padding: 2px 25px; 326 | margin: 100px auto auto auto; 327 | border-top: 5px solid blue; 328 | box-shadow: 0 0 7px 5px rgba(0, 0, 0, 0.5); 329 | } 330 | 331 | .login-container h2 { 332 | font-size: 24px; 333 | line-height: 24px; 334 | padding: 30px; 335 | text-align: center; 336 | } 337 | 338 | #login-btn { 339 | background-color: blue; 340 | color: white; 341 | height: 35px; 342 | line-height: 35px; 343 | width: 100%; 344 | border: none; 345 | outline: none; 346 | font-size: 18px; 347 | cursor: pointer; 348 | margin-bottom: 10px; 349 | } 350 | 351 | #login-btn:hover { 352 | background-color: green; 353 | } 354 | 355 | .login-link { 356 | font-size: 14px; 357 | } 358 | 359 | .login-container p { 360 | padding-bottom: 20px; 361 | } 362 | 363 | 364 | 365 | /*Media Query for mobile phone*/ 366 | @media (min-width:200px) and (max-width:480px) { 367 | .container { 368 | width: 100%; 369 | 370 | } 371 | 372 | .name { 373 | width: 100%; 374 | padding: 8px 0 8px 40px; 375 | margin-bottom: 10px; 376 | } 377 | 378 | .input-name span { 379 | margin: 0; 380 | padding: 0; 381 | } 382 | } 383 | 384 | /* Media Query for Nav Bar */ 385 | @media (min-width:0) and (max-width:480px) { 386 | .logo img { 387 | display: flex; 388 | height: 10vh; 389 | width: 100%; 390 | cursor: pointer; 391 | 392 | } 393 | 394 | .nav { 395 | display: inline-block; 396 | width: 100%; 397 | } 398 | 399 | .banner img { 400 | display: block; 401 | padding: 0; 402 | height: 320px; 403 | width: 100%; 404 | 405 | } 406 | } 407 | 408 | /*Media Query for Tablets or Ipad*/ 409 | /*Registration Form*/ 410 | @media (min-width: 480px) and (max-width:768px) { 411 | .container { 412 | width: 100%; 413 | } 414 | 415 | .input-name { 416 | margin-bottom: 10px; 417 | } 418 | 419 | .name { 420 | width: 100%; 421 | padding: 8px 0 8px 40px; 422 | margin-bottom: 10px; 423 | } 424 | 425 | .input-name span { 426 | margin: 0; 427 | padding: 0; 428 | } 429 | 430 | /* Media Query for Nav Bar */ 431 | @media (min-width: 480px) and (max-width:768px) { 432 | .logo img { 433 | display: flex; 434 | height: 10vh; 435 | width: 100%; 436 | cursor: pointer; 437 | 438 | } 439 | 440 | .nav { 441 | width: 100%; 442 | 443 | } 444 | 445 | .nav_links { 446 | width: 100%; 447 | margin-left: 17%; 448 | } 449 | } 450 | } 451 | 452 | /* Media Query for Laptop or small-size screen */ 453 | @media (min-width: 768px) and (max-width:1024px) { 454 | .container { 455 | width: 100%; 456 | 457 | } 458 | 459 | .name { 460 | width: 100%; 461 | padding: 8px 0 8px 40px; 462 | margin-bottom: 10px; 463 | } 464 | 465 | .input-name span { 466 | margin: 0; 467 | padding: 0; 468 | } 469 | 470 | /*Media for navbar*/ 471 | @media (min-width: 768px) and (max-width:1024px) { 472 | .logo img { 473 | display: flex; 474 | height: 10vh; 475 | width: 100%; 476 | cursor: pointer; 477 | 478 | } 479 | 480 | .nav { 481 | width: 100%; 482 | } 483 | 484 | .nav_links { 485 | width: 100%; 486 | margin-left: 60%; 487 | } 488 | } 489 | } 490 | 491 | /* Media Query for Desktop or Large size screen */ 492 | @media (min-width: 1024px) and (max-width:1200px) { 493 | .container { 494 | width: 100%; 495 | 496 | } 497 | 498 | .input-name { 499 | margin-bottom: -10px; 500 | } 501 | 502 | .name { 503 | width: 100%; 504 | padding: 8px 0 8px 40px; 505 | margin-bottom: 10px; 506 | } 507 | 508 | .input-name span { 509 | margin: 0; 510 | padding: 0; 511 | } 512 | 513 | /*Media for navbar*/ 514 | @media (min-width: 1024px) and (max-width:1200px) { 515 | .logo img { 516 | display: flex; 517 | height: 10vh; 518 | width: 100%; 519 | cursor: pointer; 520 | 521 | } 522 | 523 | .nav { 524 | width: 100%; 525 | 526 | } 527 | 528 | .nav_links { 529 | width: 100%; 530 | 531 | 532 | } 533 | } 534 | } 535 | 536 | /*Edit Profile Css*/ 537 | .edit-profile-container { 538 | background-color: white; 539 | width: 500px; 540 | padding: 2px 25px; 541 | margin: 100px auto auto auto; 542 | border-top: 5px solid blue; 543 | box-shadow: 0 0 7px 5px rgba(0, 0, 0, 0.5); 544 | } 545 | 546 | .edit-profile-container h2 { 547 | font-size: 24px; 548 | line-height: 12px; 549 | padding: 10px; 550 | text-align: center; 551 | } 552 | 553 | .user-edit-info { 554 | display: flex; 555 | align-items: center; 556 | margin-left: 40%; 557 | } 558 | 559 | .user-edit-info img { 560 | width: 30%; 561 | border-radius: 40%; 562 | margin-right: 35px; 563 | object-fit: cover; 564 | } 565 | 566 | .user-edit-info:hover img { 567 | cursor: pointer; 568 | } 569 | 570 | /*Leave Manage ADMIN CSS*/ 571 | 572 | .leave-container { 573 | background-color: white; 574 | width: 950px; 575 | padding: 2px 25px; 576 | margin-top: 100px; 577 | margin-left: 23%; 578 | margin-bottom: 3%; 579 | border-top: 5px solid blue; 580 | box-shadow: 0 0 7px 5px rgba(0, 0, 0, 0.5); 581 | } 582 | 583 | .leave-container h2 { 584 | font-size: 24px; 585 | line-height: 24px; 586 | padding-top: 30px; 587 | padding-bottom: 0px; 588 | text-align: center; 589 | } 590 | 591 | #approve { 592 | padding: 3px; 593 | background-color: rgb(109, 175, 89); 594 | color: white; 595 | width: 45%; 596 | font-size: 18px; 597 | height: 35px; 598 | 599 | 600 | } 601 | 602 | #approve:hover { 603 | cursor: pointer; 604 | background-color: rgb(74, 184, 129); 605 | color: black; 606 | } 607 | 608 | #deny { 609 | 610 | padding: 3px; 611 | background-color: red; 612 | color: white; 613 | width: auto; 614 | font-size: 18px; 615 | height: 35px; 616 | 617 | } 618 | 619 | #deny:hover { 620 | cursor: pointer; 621 | background-color: rgb(175, 88, 88); 622 | color: black; 623 | } 624 | 625 | .approve-container { 626 | background-color: white; 627 | width: 950px; 628 | padding: 2px 25px; 629 | margin-top: 5px; 630 | margin-left: 23%; 631 | margin-bottom: 3%; 632 | border-top: 5px solid blue; 633 | box-shadow: 0 0 7px 5px rgba(0, 0, 0, 0.5); 634 | } 635 | 636 | .approve-container h2 { 637 | font-size: 24px; 638 | line-height: 24px; 639 | text-align: center; 640 | padding-top: 30px; 641 | padding-bottom: 0px; 642 | } 643 | 644 | /*USER VERIFICATION CSS*/ 645 | .user-verification { 646 | background-color: white; 647 | width: 950px; 648 | padding: 2px 25px; 649 | margin-top: 100px; 650 | margin-left: 23%; 651 | margin-bottom: 3%; 652 | border-top: 5px solid blue; 653 | box-shadow: 0 0 7px 5px rgba(0, 0, 0, 0.5); 654 | } 655 | 656 | .user-verification h2 { 657 | font-size: 24px; 658 | line-height: 24px; 659 | padding-top: 30px; 660 | padding-bottom: 0px; 661 | text-align: center; 662 | 663 | } 664 | 665 | #approve_user_verification{ 666 | padding: 3px; 667 | background-color: green; 668 | color: white; 669 | width: auto; 670 | font-size: 18px; 671 | height: 35px; 672 | } 673 | 674 | #approve_user_verification:hover{ 675 | cursor: pointer; 676 | background-color: rgb(74, 184, 129); 677 | color: black; 678 | 679 | } 680 | 681 | 682 | 683 | #deny_user_verification{ 684 | padding: 3px; 685 | background-color: red; 686 | color: white; 687 | width: auto; 688 | font-size: 18px; 689 | height: 35px; 690 | } 691 | 692 | 693 | #deny_user_verification:hover{ 694 | cursor: pointer; 695 | background-color: rgb(175, 88, 88); 696 | color: black; 697 | 698 | } 699 | 700 | .user-reject-container { 701 | background-color: white; 702 | width: 950px; 703 | padding: 2px 25px; 704 | margin-top: 100px; 705 | margin-left: 23%; 706 | margin-bottom: 3%; 707 | border-top: 5px solid blue; 708 | box-shadow: 0 0 7px 5px rgba(0, 0, 0, 0.5); 709 | } 710 | 711 | .user-reject-container h2 { 712 | font-size: 24px; 713 | line-height: 24px; 714 | padding-top: 30px; 715 | padding-bottom: 0px; 716 | text-align: center; 717 | } 718 | 719 | /*Employee Leave Request CSS*/ 720 | .leaveReq-container { 721 | background-color: white; 722 | width: 800px; 723 | padding: 2px 25px; 724 | margin-left: 25%; 725 | margin-top: 100px; 726 | margin-bottom: 50px; 727 | border-top: 5px solid blue; 728 | box-shadow: 0 0 7px 5px rgba(0, 0, 0, 0.5); 729 | } 730 | 731 | .leaveReq-container h2 { 732 | font-size: 24px; 733 | line-height: 12px; 734 | padding: 10px; 735 | text-align: center; 736 | } 737 | 738 | 739 | .leaveEmp-container { 740 | background-color: white; 741 | width: 800px; 742 | padding: 2px 25px; 743 | margin-left: 25%; 744 | margin-top: 10px; 745 | margin-bottom: 30px; 746 | border-top: 5px solid blue; 747 | box-shadow: 0 0 7px 5px rgba(0, 0, 0, 0.5); 748 | } 749 | 750 | .leaveEmp-container h2 { 751 | font-size: 24px; 752 | line-height: 12px; 753 | padding: 10px; 754 | text-align: center; 755 | } 756 | 757 | /*Js Form Validation css*/ 758 | 759 | .error { 760 | color: red; 761 | } --------------------------------------------------------------------------------