diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f4031ab --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +/build/ +/classes/ +/logs/ diff --git a/WebContent/WEB-INF/views/login/login.jsp b/WebContent/WEB-INF/views/login/login.jsp index 1f0dc9c..70eaad5 100644 --- a/WebContent/WEB-INF/views/login/login.jsp +++ b/WebContent/WEB-INF/views/login/login.jsp @@ -1,779 +1,828 @@ -<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" - pageEncoding="UTF-8"%> -<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> +<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" + pageEncoding="UTF-8" %> +<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 贵送机具管理系统 - + - - -贵送机具管理系统 - 登录 + + + 贵送机具管理系统 - 登录 -<% - String uuid = UUID.randomUUID().toString().replaceAll("-", ""); - request.getSession().setAttribute("randTxt", uuid); - String sessionId = request.getSession().getId(); - response.setHeader("SET-COOKIE", "JSESSIONID="+sessionId+";secure;HttpOnly"); -%> + <% + String uuid = UUID.randomUUID().toString().replaceAll("-", ""); + request.getSession().setAttribute("randTxt", uuid); + String sessionId = request.getSession().getId(); + response.setHeader("SET-COOKIE", "JSESSIONID=" + sessionId + ";secure;HttpOnly"); + %> - - - - - - - - + + + + + + + + - - - - - - - + + + + + + + - + + + + + + 100% { + transform: rotate(360deg); + } + } + + .logo-container { + position: relative; + z-index: 2; + } + + .logo-container img { + max-width: 120px; + height: auto; + filter: brightness(1.2); + transition: transform 0.3s ease; + } + + .logo-container img:hover { + transform: scale(1.05); + } + + .system-title { + color: white; + font-size: 18px; + font-weight: 500; + margin-top: 10px; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); + letter-spacing: 1px; + } + + /* Form section */ + .login-form { + padding: 40px 30px 30px; + background: white; + } + + .form-group { + position: relative; + margin-bottom: 25px; + } + + .input-container { + position: relative; + display: flex; + align-items: center; + } + + .input-icon { + position: absolute; + left: 15px; + font-size: 18px; + color: var(--nangwang-blue); + z-index: 2; + transition: color 0.3s ease; + } + + .form-input { + width: 100%; + height: 50px; + padding: 0 15px 0 45px; + border: 2px solid #e1e5e9; + border-radius: 12px; + font-size: 16px; + background: #f8f9fa; + transition: all 0.3s ease; + outline: none; + } + + .form-input:focus { + border-color: var(--nangwang-blue); + background: white; + box-shadow: 0 0 0 3px var(--nangwang-blue-shadow-light); + transform: translateY(-1px); + } + + .form-input:focus + .input-icon { + color: var(--nangwang-blue-light); + } + + .form-input::placeholder { + color: #a0a0a0; + transition: color 0.3s ease; + } + + .form-input:focus::placeholder { + color: #c0c0c0; + } + + /* Error messages */ + .error-message { + position: absolute; + bottom: -20px; + left: 0; + color: #e74c3c; + font-size: 12px; + opacity: 0; + transition: opacity 0.3s ease; + } + + .error-message.show { + opacity: 1; + } + + /* 记住密码选项区域 */ + .remember-section { + display: flex; + justify-content: space-between; + align-items: center; + margin: 15px 0 20px; + font-size: 14px; + } + + .remember-label { + display: inline-flex; + align-items: center; + cursor: pointer; + color: #666; + transition: color 0.3s ease; + } + + .remember-label:hover { + color: #333; + } + + .remember-checkbox { + margin-right: 8px; + cursor: pointer; + transform: scale(1.1); + accent-color: var(--nangwang-blue); + } + + .forgot-password { + color: var(--nangwang-blue); + text-decoration: none; + font-size: 13px; + transition: all 0.3s ease; + } + + .forgot-password:hover { + color: var(--nangwang-blue-light); + text-decoration: underline; + } + + /* Agreement section */ + .agreement-section { + margin: 20px 0; + text-align: center; + } + + .agreement-label { + display: inline-flex; + align-items: center; + cursor: pointer; + font-size: 14px; + color: #666; + transition: color 0.3s ease; + } + + .agreement-label:hover { + color: #333; + } + + .agreement-checkbox { + margin-right: 8px; + cursor: pointer; + transform: scale(1.1); + accent-color: var(--nangwang-blue); + } + + .agreement-link { + color: var(--nangwang-blue); + text-decoration: none; + font-weight: 500; + margin-left: 4px; + border-bottom: 1px solid transparent; + transition: all 0.3s ease; + } + + .agreement-link:hover { + border-bottom-color: var(--nangwang-blue); + color: var(--nangwang-blue-light); + } + + /* Login button */ + .login-button { + width: 100%; + height: 50px; + background: var(--nangwang-blue-gradient); + border: none; + border-radius: 12px; + color: white; + font-size: 16px; + font-weight: 500; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + overflow: hidden; + margin-top: 10px; + } + + .login-button::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.5s ease; + } + + .login-button:hover { + transform: translateY(-2px); + box-shadow: 0 10px 20px var(--nangwang-blue-shadow); + background: linear-gradient(135deg, var(--nangwang-blue-light) 0%, var(--nangwang-blue-lighter) 100%); + } + + .login-button:hover::before { + left: 100%; + } + + .login-button:active { + transform: translateY(0); + } + + .login-button:disabled { + background: #ccc; + cursor: not-allowed; + transform: none; + box-shadow: none; + } + + /* Responsive design */ + @media (max-width: 768px) { + .login-container { + margin: 10px; + max-width: 100%; + } + + .login-form { + padding: 30px 20px 20px; + } + + .system-title { + font-size: 16px; + } + + .form-input { + height: 45px; + font-size: 14px; + } + + .login-button { + height: 45px; + font-size: 14px; + } + + .remember-section { + flex-direction: column; + align-items: flex-start; + gap: 10px; + } + } + + @media (max-width: 480px) { + .login-container { + margin: 5px; + } + + .login-header { + padding: 20px 15px; + } + + .login-form { + padding: 25px 15px 15px; + } + + .system-title { + font-size: 14px; + } + } + + /* Animation for form elements */ + .form-group { + animation: slideInUp 0.6s ease forwards; + opacity: 0; + transform: translateY(30px); + } + + .form-group:nth-child(1) { + animation-delay: 0.1s; + } + + .form-group:nth-child(2) { + animation-delay: 0.2s; + } + + .form-group:nth-child(3) { + animation-delay: 0.3s; + } + + .form-group:nth-child(4) { + animation-delay: 0.4s; + } + + .form-group:nth-child(5) { + animation-delay: 0.5s; + } + + @keyframes slideInUp { + to { + opacity: 1; + transform: translateY(0); + } + } + + /* Auto-fill styles */ + .form-input:-webkit-autofill { + -webkit-box-shadow: 0 0 0 1000px #f8f9fa inset; + -webkit-text-fill-color: #333; + } + + .form-input:-webkit-autofill:focus { + -webkit-box-shadow: 0 0 0 1000px white inset; + } + + /* Loading state */ + .login-button.loading { + pointer-events: none; + } + + .login-button.loading::after { + content: ''; + position: absolute; + width: 16px; + height: 16px; + margin: auto; + border: 2px solid transparent; + border-top-color: white; + border-radius: 50%; + animation: spin 1s linear infinite; + } + + @keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + + /* Focus indicators for accessibility */ + .form-input:focus, + .login-button:focus, + .agreement-checkbox:focus, + .remember-checkbox:focus, + .agreement-link:focus, + .forgot-password:focus { + outline: 2px solid var(--nangwang-blue); + outline-offset: 2px; + } + + /* High contrast mode support */ + @media (prefers-contrast: high) { + .login-card { + background: white; + border: 2px solid #333; + } + + .form-input { + border-color: #333; + } + + .login-button { + background: #333; + } + } + + /* Reduced motion support */ + @media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + } + + /* Custom checkbox styles for better visual consistency */ + .remember-checkbox, + .agreement-checkbox { + width: 18px; + height: 18px; + border-radius: 3px; + position: relative; + } + + .remember-checkbox:checked, + .agreement-checkbox:checked { + background-color: var(--nangwang-blue); + border-color: var(--nangwang-blue); + } + + /* 安全提示区域 */ + .security-tip { + background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); + border-left: 4px solid var(--nangwang-blue); + padding: 12px 15px; + margin: 20px 0; + border-radius: 0 8px 8px 0; + font-size: 13px; + color: #666; + } + + .security-tip .tip-icon { + color: var(--nangwang-blue); + margin-right: 8px; + font-weight: bold; + } + -