<!DOCTYPE html>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>EMS App</
title
>
</
head
>
<
style
>
body {
overflow-x: hidden;
scroll-behavior: smooth;
}
nav {
background-color: navy !important;
}
.navbar-brand {
color: whitesmoke !important;
font-size: 30px !important;
font-weight: bold;
}
.card {
box-shadow: rgba(14, 30, 37, 0.12) 1px 2px 2px 0px, rgba(14, 30, 37, 0.32) 1px 2px 2px 0px;
}
.card-body {
text-align: center;
}
.table-responsive {
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
th {
text-align: center;
font-size: 18px !important;
}
td {
text-align: center;
font-size: 15px;
font-weight: 500;
}
label {
font-weight: 500;
}
</
style
>
<
body
>
<
nav
class
=
"navbar navbar-expand-sm navbar-light mb-5"
>
<
div
class
=
"container"
>
<
a
class
=
"navbar-brand text-bold"
href
=
"#"
><
i
class
=
"fa fa-align-center"
aria-hidden
=
"true"
> EMS</
i
></
a
>
</
div
>
</
nav
>
<
main
>
<
div
class
=
"container p-4"
>
<
div
class
=
"head_section"
>
<
div
class
=
"row row-cols-1 row-cols-md-4 g-3"
>
<
div
class
=
"col"
>
<
a
href
=
"#exampleModalToggle1"
data-bs-toggle
=
"modal"
role
=
"button"
style
=
"text-decoration: none; color: white;"
>
<
div
class
=
"card h-100 bg-success"
>
<
div
class
=
"card-body"
>
<
h5
class
=
"text-light"
><
i
class
=
"fa fa-plus"
></
i
> Add Employee</
h5
>
</
div
>
</
div
>
</
a
>
</
div
>
<
div
class
=
"col"
>
<
a
href
=
"#exampleModalToggle2"
data-bs-toggle
=
"modal"
role
=
"button"
style
=
"text-decoration: none; color: white;"
>
<
div
class
=
"card h-100 bg-primary"
>
<
div
class
=
"card-body"
>
<
h5
class
=
"text-light"
><
i
class
=
"fa fa-area-chart"
aria-hidden
=
"true"
></
i
> Update Employee</
h5
>
</
div
>
</
div
>
</
a
>
</
div
>
<
div
class
=
"col"
>
<
a
href
=
"#exampleModalToggle3"
data-bs-toggle
=
"modal"
role
=
"button"
style
=
"text-decoration: none; color: white;"
>
<
div
class
=
"card h-100 bg-danger"
>
<
div
class
=
"card-body"
>
<
h5
class
=
"text-light"
><
i
class
=
"fa fa-trash"
></
i
> Delete Employee</
h5
>
</
div
>
</
div
>
</
a
>
</
div
>
<
div
class
=
"col"
>
<
a
href
=
"#deleteAllModal4"
data-bs-toggle
=
"modal"
role
=
"button"
style
=
"text-decoration: none; color: white;"
>
<
div
class
=
"card h-100 bg-dark"
>
<
div
class
=
"card-body"
>
<
h5
class
=
"text-light"
><
i
class
=
"fa fa-warning"
></
i
> Delete All</
h5
>
</
div
>
</
div
>
</
a
>
</
div
>
</
div
>
</
div
>
<
br
>
<
div
class
=
"items_table mt-5 mb-4"
>
<
div
class
=
"table-responsive p-2"
>
<
h4
class
=
"text-center p-2 class="
p-1" mt-2"
style
=
"font-family:'Times New Roman', Times, serif; font-weight: bold;"
>Employee Management
System</
h4
>
<
table
class
=
"table table-bordered table-hover mt-5"
>
<
thead
class
=
"bg-warning"
>
<
th
>SI.NO</
th
>
<
th
>ID</
th
>
<
th
>Name</
th
>
<
th
>Email</
th
>
<
th
>Phone</
th
>
<
th
>Gender</
th
>
<
th
>Salary</
th
>
<
th
>Role</
th
>
</
thead
>
<
tbody
>
<
tr
th:each
=
"employee, index : ${employees}"
>
<
td
th:text
=
"${index.index + 1}"
></
td
>
<
td
th:text
=
"${employee.id}"
></
td
>
<
td
th:text
=
"${employee.employeeName}"
></
td
>
<
td
th:text
=
"${employee.employeeEmail}"
></
td
>
<
td
th:text
=
"${employee.employeePhone}"
></
td
>
<
td
th:text
=
"${employee.employeeGender}"
></
td
>
<
td
th:text
=
"${employee.employeeSalary}"
></
td
>
<
td
th:text
=
"${employee.employeeRole+' Developer'}"
></
td
>
</
tr
>
</
tbody
>
</
table
>
</
div
>
</
div
>
</
div
>
</
main
>
<
div
class
=
"modal fade"
id
=
"exampleModalToggle1"
aria-hidden
=
"true"
aria-labelledby
=
"exampleModalToggleLabel"
tabindex
=
"-1"
>
<
div
class
=
"modal-dialog modal-dialog-centered"
>
<
div
class
=
"modal-content"
>
<
div
class
=
"modal-body"
>
<
div
th:if
=
"${success}"
class
=
"alert alert-success"
role
=
"alert"
>
<
p
th:text
=
"${success}"
></
p
>
</
div
>
<
form
class
=
"p-2"
th:action
=
"@{/create}"
th:object
=
"${employee}"
method
=
"post"
>
<
center
>
<
h4
style
=
"font-family: 'Times New Roman', Times, serif;"
>Add Employee</
h4
>
</
center
>
<
div
class
=
"row p-2"
>
<
label
class
=
"p-1"
for
=
"employeeName"
>Employee Name</
label
>
<
input
type
=
"text"
th:field
=
"*{employeeName}"
class
=
"form-control"
placeholder
=
"employee name"
required>
</
div
>
<
div
class
=
"row p-2"
>
<
label
class
=
"p-1"
for
=
"employeeEmail"
>Email</
label
>
<
input
type
=
"text"
th:field
=
"*{employeeEmail}"
class
=
"form-control"
placeholder
=
"email address"
required>
</
div
>
<
div
class
=
"row p-2"
>
<
label
class
=
"p-1"
for
=
"employeePhone"
>Phone</
label
>
<
input
type
=
"tel"
th:field
=
"*{employeePhone}"
class
=
"form-control"
placeholder
=
"phone number"
required>
</
div
>
<
div
class
=
"row p-2"
>
<
label
class
=
"p-1"
>Gender</
label
>
<
select
th:field
=
"*{employeeGender}"
class
=
"form-select"
required>
<
option
value
=
""
selected>select option</
option
>
<
option
value
=
"Male"
>Male</
option
>
<
option
value
=
"Female"
>Female</
option
>
</
select
>
</
div
>
<
div
class
=
"row p-2"
>
<
label
class
=
"p-1"
for
=
"employeeSalary"
>Phone</
label
>
<
input
type
=
"number"
th:field
=
"*{employeeSalary}"
class
=
"form-control"
placeholder
=
"salary"
required>
</
div
>
<
div
class
=
"row p-2"
>
<
label
class
=
"p-1"
for
=
"employeeRole"
>Employee Role</
label
>
<
select
th:field
=
"*{employeeRole}"
class
=
"form-select"
required>
<
option
value
=
""
selected>select option</
option
>
<
option
value
=
"Java"
>Java Developer</
option
>
<
option
value
=
"Python"
>Python Developer</
option
>
<
option
value
=
"Web"
>Web Developer</
option
>
<
option
value
=
"Android"
>Android Developer</
option
>
<
option
value
=
"UI"
>UI Developer</
option
>
</
select
>
</
div
>
<
button
type
=
"submit"
class
=
"btn btn-success mt-3 mb-2"
>Add Employee</
button
>
</
form
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"modal fade"
id
=
"exampleModalToggle2"
aria-hidden
=
"true"
aria-labelledby
=
"exampleModalToggleLabel"
tabindex
=
"-1"
>
<
div
class
=
"modal-dialog modal-dialog-centered"
>
<
div
class
=
"modal-content"
>
<
div
class
=
"modal-body"
>
<
form
class
=
"p-2"
th:action
=
"@{/update}"
th:object
=
"${employee}"
method
=
"post"
>
<
div
th:if
=
"${errorMessage}"
class
=
"alert alert-danger"
role
=
"alert"
>
<
p
th:text
=
"${errorMessage}"
></
p
>
</
div
>
<
center
>
<
h4
style
=
"font-family: 'Times New Roman', Times, serif;"
>Update Employee</
h4
>
</
center
>
<
div
class
=
"row p-1"
>
<
label
class
=
"p-1"
for
=
"id"
>Employee ID</
label
>
<
input
type
=
"text"
th:field
=
"*{id}"
class
=
"form-control"
placeholder
=
"employee id"
required>
</
div
>
<
div
class
=
"row p-1"
>
<
label
class
=
"p-1"
for
=
"employeeName"
>Employee Name</
label
>
<
input
type
=
"text"
th:field
=
"*{employeeName}"
class
=
"form-control"
placeholder
=
"employee name"
required>
</
div
>
<
div
class
=
"row p-1"
>
<
label
class
=
"p-1"
for
=
"employeeEmail"
>Email</
label
>
<
input
type
=
"text"
th:field
=
"*{employeeEmail}"
class
=
"form-control"
placeholder
=
"email address"
required>
</
div
>
<
div
class
=
"row p-1"
>
<
label
class
=
"p-1"
for
=
"employeePhone"
>Phone</
label
>
<
input
type
=
"tel"
th:field
=
"*{employeePhone}"
class
=
"form-control"
placeholder
=
"phone number"
required>
</
div
>
<
div
class
=
"row p-1"
>
<
label
class
=
"p-1"
>Gender</
label
>
<
select
th:field
=
"*{employeeGender}"
class
=
"form-select"
required>
<
option
value
=
""
selected>select option</
option
>
<
option
value
=
"Male"
>Male</
option
>
<
option
value
=
"Female"
>Female</
option
>
</
select
>
</
div
>
<
div
class
=
"row p-1"
>
<
label
class
=
"p-1"
for
=
"employeeSalary"
>Phone</
label
>
<
input
type
=
"number"
th:field
=
"*{employeeSalary}"
class
=
"form-control"
placeholder
=
"salary"
required>
</
div
>
<
div
class
=
"row p-1"
>
<
label
class
=
"p-1"
for
=
"employeeRole"
>Employee Role</
label
>
<
select
th:field
=
"*{employeeRole}"
class
=
"form-select"
required>
<
option
value
=
""
selected>select option</
option
>
<
option
value
=
"Java"
>Java Developer</
option
>
<
option
value
=
"Python"
>Python Developer</
option
>
<
option
value
=
"Web"
>Web Developer</
option
>
<
option
value
=
"Android"
>Android Developer</
option
>
<
option
value
=
"UI"
>UI Developer</
option
>
</
select
>
</
div
>
<
button
type
=
"submit"
class
=
"btn btn-primary mt-3 mb-2"
>Update Employee</
button
>
</
form
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"modal fade"
id
=
"exampleModalToggle3"
aria-hidden
=
"true"
aria-labelledby
=
"exampleModalToggleLabel"
tabindex
=
"-1"
>
<
div
class
=
"modal-dialog modal-dialog-centered"
>
<
div
class
=
"modal-content"
>
<
div
class
=
"modal-body"
>
<
form
class
=
"p-2"
th:action
=
"@{/remove}"
th:object
=
"${employee}"
method
=
"post"
>
<
div
th:if
=
"${alertMessage}"
class
=
"alert alert-danger"
>
<
p
th:text
=
"${alertMessage}"
></
p
>
</
div
>
<
center
>
<
h4
style
=
"font-family: 'Times New Roman', Times, serif;"
>Delete Employee</
h4
>
</
center
>
<
div
class
=
"row p-2"
>
<
label
class
=
"p-1"
for
=
"id"
>Employee ID</
label
>
<
input
type
=
"text"
th:field
=
"*{id}"
class
=
"form-control"
placeholder
=
"employee id"
required>
</
div
>
<
button
type
=
"submit"
class
=
"btn btn-danger mt-3 mb-2"
>Delete Employee</
button
>
</
form
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"modal fade"
id
=
"deleteAllModal4"
aria-hidden
=
"true"
aria-labelledby
=
"deleteAllModalLabe4"
tabindex
=
"-1"
>
<
div
class
=
"modal-dialog modal-dialog-centered"
>
<
div
class
=
"modal-content"
>
<
div
class
=
"modal-body"
>
<
form
class
=
"p-2"
th:action
=
"@{/remove/all}"
th:object
=
"${confirmationForm}"
method
=
"post"
>
<
center
>
<
h4
style
=
"font-family: 'Times New Roman', Times, serif;"
>Delete All Employees</
h4
>
</
center
>
<
div
class
=
"row p-2"
>
<
label
class
=
"p-3 text-warning"
for
=
"confirmation"
>Type 'Yes' For Confirmation</
label
>
<
input
type
=
"text"
th:field
=
"*{confirmation}"
class
=
"form-control"
placeholder
=
"confirmation"
required>
</
div
>
<
button
type
=
"submit"
class
=
"btn btn-dark mt-3 mb-2"
>Delete All Employees</
button
>
</
form
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>