公司日常考勤系统#5
对页面进行外观设计与美化
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>主菜单</title>
<style>
/* 页面背景 */
body {
font-family: Arial, sans-serif;
background-color: #E0F7FA; /* 浅湖蓝色 */
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* 菜单容器 */
.menu-container {
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 300px;
text-align: center;
}
/* 菜单链接 */
a {
display: block;
margin: 15px 0;
padding: 10px;
text-decoration: none;
color: #00ACC1; /* 湖蓝色 */
font-size: 18px;
border-radius: 4px;
transition: background-color 0.3s ease;
}
a:hover {
background-color: #B2EBF2; /* 悬停时的浅蓝色背景 */
}
/* 标题样式 */
h1 {
color: #00ACC1; /* 湖蓝色 */
font-size: 24px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="menu-container">
<h1>主菜单</h1>
<a href="addEmployee.jsp">新添员工基本信息</a>
<a href="/20241216/selectAllEmployeeServlet">员工基本信息管理</a>
<a href="addDepartment.jsp">新添部门基本信息</a>
<a href="/20241216/selectAllDepartmentServlet">部门基本信息管理</a>
<a href="addAttendance.jsp">日常考勤管理</a>
<a href="/20241216/selectAllAttendanceByJobIdServlet?jobId=123456">浏览个人考勤记录</a>
<a href="/20241216/selectAllAttendanceByDepartmentServlet?department=01">查询部门考勤记录</a>
<a href="changePassword.jsp">修改密码</a>
</div>
</body>
</html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<html>
<head>
<title>重置密码</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #E0F7FA; /* 浅湖蓝色背景 */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
form {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.button {
background-color: #00ACC1; /* 湖蓝色按钮 */
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
font-size: 16px;
}
.button:hover {
background-color: #0097A7; /* 深湖蓝色悬停效果 */
}
a {
color: #00ACC1; /* 湖蓝色链接 */
text-decoration: none;
display: block;
margin-top: 10px;
}
a:hover {
text-decoration: underline;
}
.reset-msg {
color: #333;
margin-bottom: 15px;
}
</style>
</head>
<body>
<form action="/20241216/resetPasswordServlet" name="form" method="post">
<div class="reset-msg">${reset_msg}</div>
<input name="id" id="id" type="text" placeholder="请输入用户ID">
<input type="submit" class="button" value="重置">
<a href="menu.jsp">返回首页</a>
</form>
</body>
</html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>设置角色管理</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #E0F7FA; /* 浅湖蓝色背景 */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
form {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: left;
}
label {
font-weight: bold;
color: #333;
}
input[type="radio"] {
margin: 10px 0;
}
.button {
background-color: #00ACC1; /* 湖蓝色按钮 */
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
font-size: 16px;
margin-top: 10px;
}
.button:hover {
background-color: #0097A7; /* 深湖蓝色悬停效果 */
}
a {
color: #00ACC1; /* 湖蓝色链接 */
text-decoration: none;
display: block;
margin-bottom: 20px;
text-align: center;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<form action="/20241216/setEmployeeRoleServlet" method="post" id="form">
<a href="menu.jsp">返回首页</a>
<!-- 隐藏员工 ID -->
<input type="hidden" name="id" value="${employee.jobId}">
<!-- 选择角色 -->
<label>选择角色：</label><br/>
<!-- 员工角色选择 -->
<input type="radio" name="role" value="员工"
<c:if test="${employee.role == '员工'}">checked</c:if>> 员工<br/>
<!-- 经理角色选择 -->
<input type="radio" name="role" value="经理"
<c:if test="${employee.role == '经理'}">checked</c:if>> 经理<br/>
<!-- 提交按钮 -->
<input type="submit" class="button" value="提交">
</form>
</body>
</html>
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2024/12/16
Time: 15:17
To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>员工信息</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #E0F7FA; /* 浅湖蓝色背景 */
margin: 0;
padding: 20px;
}
a {
color: #00ACC1; /* 湖蓝色链接 */
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
th, td {
padding: 12px;
text-align: center;
border-bottom: 1px solid #ddd;
}
th {
background-color: #00ACC1; /* 湖蓝色表头 */
color: white;
}
tr:hover {
background-color: #f5f5f5; /* 行悬停效果 */
}
.action-links a {
margin: 0 5px;
color: #00ACC1; /* 湖蓝色操作链接 */
}
.action-links a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="menu.jsp">返回首页</a>
<table>
<tr>
<th>工号</th>
<th>姓名</th>
<th>性别</th>
<th>生日</th>
<th>部门</th>
<th>角色</th>
<th>操作</th>
</tr>
<c:forEach items="${employees}" var="attendance" varStatus="status">
<tr align="center">
<td>${attendance.jobId}</td>
<td>${attendance.name}</td>
<td>${attendance.sex}</td>
<td>${attendance.birthday}</td>
<td>${attendance.department}</td>
<td>${attendance.role}</td>
<td class="action-links">
<a href="/20241216/selectByIdServlet?id=${attendance.jobId}&flag=0">更改</a>
<a href="/20241216/selectByIdServlet?id=${attendance.jobId}&flag=1">设置角色</a>
<a href="/20241216/deleteEmployeeServlet?id=${attendance.jobId}">删除</a>
<a href="/20241216/selectByIdServlet?id=${attendance.jobId}&flag=2">调出</a>
</td>
</tr>
</c:forEach>
</table>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 一文读懂知识蒸馏
· 终于写完轮子一部分：tcp代理 了，记录一下