html">
<! DOCTYPE html > < html lang = " zh" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style> css">body { display : flex; justify-content : center; align-items : center; height : 100vh; margin : 0; background-color : #000; font-family : Arial, sans-serif; user-select : none; } body::before { content : "" ; position : absolute; top : 0; left : 0; width : 100%; height : 100%; background : inherit; filter : blur ( 10px) ; z-index : -1; } .login-box { background-color : rgba ( 0, 0, 0, 0.5) ; padding : 30px; border-radius : 15px; backdrop-filter : blur ( 10px) ; width : 300px; border : 2px solid rgba ( 255, 255, 255, 0.2) ; transition : all 0.3s ease; position : relative; } .login-box h2 { margin : 0 0 30px 0; color : #fff; text-align : center; } .login-box input { width : calc ( 100% - 30px) ; padding : 15px; margin-bottom : 20px; border : 1px solid rgba ( 255, 255, 255, 0.2) ; border-radius : 8px; font-size : 16px; outline : none; transition : all 0.3s ease; color : #fff; background-color : rgba ( 0, 0, 0, 0.3) ; -webkit-appearance : none; -moz-appearance : none; appearance : none; -webkit-user-select : none; -moz-user-select : none; -ms-user-select : none; user-select : none; } .login-box input:focus { background-color : rgba ( 0, 0, 0, 0.5) ; border-color : rgba ( 255, 255, 255, 0.4) ; } .login-box button { width : 100%; padding : 15px; border : 1px solid rgba ( 255, 255, 255, 0.2) ; border-radius : 8px; background-color : rgba ( 0, 0, 0, 0.5) ; cursor : pointer; font-size : 16px; color : #fff; transition : all 0.3s ease; } .login-box button:hover { background-color : rgba ( 0, 0, 0, 0.7) ; border-color : rgba ( 255, 250, 255, 0.4) ; } .message { color : #fff; text-align : center; padding : 10px; border-radius : 8px; overflow : hidden; position : absolute; left : 0; right : 0; bottom : -60px; transition : opacity 0.3s ease; opacity : 0; margin : 0 auto; background-color : rgba ( 0, 0, 255, 0.3) ; } .link { color : #fff; text-align : center; margin-top : 20px; cursor : pointer; } </ style> </ head> < body> < divclass = " login-box" > < h2> </ h2> < formaction = " #" > < divclass = " input-container" > < inputtype = " text" id = " username" placeholder = " 用户名" autocomplete = " off" > </ div> < divclass = " input-container" > < inputtype = " password" id = " password" placeholder = " 密码" autocomplete = " off" > </ div> < buttontype = " submit" id = " loginButton" > </ button> </ form> < divclass = " message" id = " message" > </ div> < divclass = " link" > < spanid = " registerLink" > </ span> < spanid = " forgetPasswordLink" > </ span> </ div> </ div> < script> document. getElementById ( 'loginButton' ) . addEventListener ( 'click' , function ( event ) { event. preventDefault ( ) ; const username = document. getElementById ( 'username' ) . value; const password = document. getElementById ( 'password' ) . value; const message = document. getElementById ( 'message' ) ; if ( username && password) { message. innerHTML = '登录成功' ; showMessage ( ) ; clearInputsAndMessage ( ) ; setTimeout ( ( ) => { window. location. href = 'index.html ' ; } , 300 ) ; } else { message. innerHTML = '登录失败，请输入用户名和密码' ; showMessage ( ) ; clearInputsAndMessage ( ) ; } } ) ; document. getElementById ( 'registerLink' ) . addEventListener ( 'click' , function ( ) { window. location. href = 'register.html ' ; } ) ; document. getElementById ( 'forgetPasswordLink' ) . addEventListener ( 'click' , function ( ) { window. location. href = 'resetPassword.html ' ; } ) ; function showMessage ( ) { const message = document. getElementById ( 'message' ) ; message. style. opacity = '1' ; } function clearInputsAndMessage ( ) { const message = document. getElementById ( 'message' ) ; const username = document. getElementById ( 'username' ) ; const password = document. getElementById ( 'password' ) ; setTimeout ( ( ) => { message. innerHTML = '' ; message. style. opacity = '0' ; username. value = '' ; password. value = '' ; } , 3000 ) ; } </ script> </ body> </ html >
html">
<! DOCTYPE html > < html lang = " zh" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style> css">body { display : flex; justify-content : center; align-items : center; height : 100vh; margin : 0; background-color : #000; font-family : Arial, sans-serif; user-select : none; } body::before { content : "" ; position : absolute; top : 0; left : 0; width : 100%; height : 100%; background : inherit; filter : blur ( 10px) ; z-index : -1; } .register-box { background-color : rgba ( 0, 0, 0, 0.5) ; padding : 30px; border-radius : 15px; backdrop-filter : blur ( 10px) ; width : 300px; border : 2px solid rgba ( 255, 255, 255, 0.2) ; transition : all 0.3s ease; position : relative; } .register-box h2 { margin : 0 0 30px 0; color : #fff; text-align : center; } .register-box input { width : calc ( 100% - 30px) ; padding : 15px; margin-bottom : 20px; border : 1px solid rgba ( 255, 255, 255, 0.2) ; border-radius : 8px; font-size : 16px; outline : none; transition : all 0.3s ease; color : #fff; background-color : rgba ( 0, 0, 0, 0.3) ; -webkit-appearance : none; -moz-appearance : none; appearance : none; -webkit-user-select : none; -moz-user-select : none; -ms-user-select : none; user-select : none; } .register-box input:focus { background-color : rgba ( 0, 0, 0, 0.5) ; border-color : rgba ( 255, 255, 255, 0.4) ; } .register-box button { width : 100%; padding : 15px; border : 1px solid rgba ( 255, 255, 255, 0.2) ; border-radius : 8px; background-color : rgba ( 0, 0, 0, 0.5) ; cursor : pointer; font-size : 16px; color : #fff; transition : all 0.3s ease; } .register-box button:hover { background-color : rgba ( 0, 0, 0, 0.7) ; border-color : rgba ( 255, 250, 255, 0.4) ; } .message { color : #fff; text-align : center; padding : 10px; border-radius : 8px; overflow : hidden; position : absolute; left : 0; right : 0; bottom : -60px; transition : opacity 0.3s ease; opacity : 0; margin : 0 auto; background-color : rgba ( 0, 0, 255, 0.3) ; } .link { color : #fff; text-align : center; margin-top : 20px; cursor : pointer; } </ style> </ head> < body> < divclass = " register-box" > < h2> </ h2> < formaction = " #" > < divclass = " input-container" > < inputtype = " text" id = " username" placeholder = " 用户名" autocomplete = " off" > </ div> < divclass = " input-container" > < inputtype = " text" id = " account" placeholder = " 账号" autocomplete = " off" > </ div> < divclass = " input-container" > < inputtype = " email" id = " email" placeholder = " 邮箱" autocomplete = " off" > </ div> < buttontype = " submit" id = " registerButton" > </ button> </ form> < divclass = " message" id = " message" > </ div> < divclass = " link" > < spanid = " loginLink" > </ span> </ div> </ div> < script> document. getElementById ( 'registerButton' ) . addEventListener ( 'click' , function ( event ) { event. preventDefault ( ) ; const username = document. getElementById ( 'username' ) . value; const account = document. getElementById ( 'account' ) . value; const email = document. getElementById ( 'email' ) . value; const message = document. getElementById ( 'message' ) ; if ( username && account && email) { message. innerHTML = '注册成功' ; showMessage ( ) ; clearInputsAndMessage ( ) ; } else { message. innerHTML = '注册失败，请输入用户名、账号和邮箱' ; showMessage ( ) ; clearInputsAndMessage ( ) ; } } ) ; document. getElementById ( 'loginLink' ) . addEventListener ( 'click' , function ( ) { window. location. href = 'login.html ' ; } ) ; function showMessage ( ) { const message = document. getElementById ( 'message' ) ; message. style. opacity = '1' ; } function clearInputsAndMessage ( ) { const message = document. getElementById ( 'message' ) ; const username = document. getElementById ( 'username' ) ; const account = document. getElementById ( 'account' ) ; const email = document. getElementById ( 'email' ) ; setTimeout ( ( ) => { message. innerHTML = '' ; message. style. opacity = '0' ; username. value = '' ; account. value = '' ; email. value = '' ; } , 3000 ) ; } </ script> </ body> </ html >
html">
<! DOCTYPE html > < html lang = " zh" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style> css">body { display : flex; justify-content : center; align-items : center; height : 100vh; margin : 0; background-color : #000; font-family : Arial, sans-serif; user-select : none; } body::before { content : "" ; position : absolute; top : 0; left : 0; width : 100%; height : 100%; background : inherit; filter : blur ( 10px) ; z-index : -1; } .reset-box { background-color : rgba ( 0, 0, 0, 0.5) ; padding : 30px; border-radius : 15px; backdrop-filter : blur ( 10px) ; width : 300px; border : 2px solid rgba ( 255, 255, 255, 0.2) ; transition : all 0.3s ease; position : relative; } .reset-box h2 { margin : 0 0 30px 0; color : #fff; text-align : center; } .reset-box input { width : calc ( 100% - 30px) ; padding : 15px; margin-bottom : 20px; border : 1px solid rgba ( 255, 255, 255, 0.2) ; border-radius : 8px; font-size : 16px; outline : none; transition : all 0.3s ease; color : #fff; background-color : rgba ( 0, 0, 0, 0.3) ; -webkit-appearance : none; -moz-appearance : none; appearance : none; -webkit-user-select : none; -moz-user-select : none; -ms-user-select : none; user-select : none; } .reset-box input:focus { background-color : rgba ( 0, 0, 0, 0.5) ; border-color : rgba ( 255, 255, 255, 0.4) ; } .reset-box button { width : 100%; padding : 15px; border : 1px solid rgba ( 255, 255, 255, 0.2) ; border-radius : 8px; background-color : rgba ( 0, 0, 0, 0.5) ; cursor : pointer; font-size : 16px; color : #fff; transition : all 0.3s ease; } .reset-box button:hover { background-color : rgba ( 0, 0, 0, 0.7) ; border-color : rgba ( 255, 250, 255, 0.4) ; } .message { color : #fff; text-align : center; padding : 10px; border-radius : 8px; overflow : hidden; position : absolute; left : 0; right : 0; bottom : -60px; transition : opacity 0.3s ease; opacity : 0; margin : 0 auto; background-color : rgba ( 0, 0, 255, 0.3) ; } .link { color : #fff; text-align : center; margin-top : 20px; cursor : pointer; } </ style> </ head> < body> < divclass = " reset-box" > < h2> </ h2> < formaction = " #" > < divclass = " input-container" > < inputtype = " text" id = " account" placeholder = " 账号" autocomplete = " off" > </ div> < divclass = " input-container" > < inputtype = " email" id = " email" placeholder = " 邮箱" autocomplete = " off" > </ div> < buttontype = " submit" id = " resetButton" > </ button> </ form> < divclass = " message" id = " message" > </ div> < divclass = " link" > < spanid = " loginLink" > </ span> </ div> </ div> < script> document. getElementById ( 'resetButton' ) . addEventListener ( 'click' , function ( event ) { event. preventDefault ( ) ; const account = document. getElementById ( 'account' ) . value; const email = document. getElementById ( 'email' ) . value; const message = document. getElementById ( 'message' ) ; if ( account && email) { message. innerHTML = '密码重置请求已提交，请查收邮件' ; showMessage ( ) ; clearInputsAndMessage ( ) ; } else { message. innerHTML = '请输入账号和邮箱' ; showMessage ( ) ; clearInputsAndMessage ( ) ; } } ) ; document. getElementById ( 'loginLink' ) . addEventListener ( 'click' , function ( ) { window. location. href = 'login.html ' ; } ) ; function showMessage ( ) { const message = document. getElementById ( 'message' ) ; message. style. opacity = '1' ; } function clearInputsAndMessage ( ) { const message = document. getElementById ( 'message' ) ; const account = document. getElementById ( 'account' ) ; const email = document. getElementById ( 'email' ) ; setTimeout ( ( ) => { message. innerHTML = '' ; message. style. opacity = '0' ; account. value = '' ; email. value = '' ; } , 3000 ) ; } </ script> </ body> </ html >
html">
<! DOCTYPE html > < html lang = " zh" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style> css">body { margin : 0; padding : 0; font-family : Arial, sans-serif; background-color : #000; user-select : none; } body::before { content : "" ; position : absolute; top : 0; left : 0; width : 100%; height : 100%; background : inherit; filter : blur ( 10px) ; z-index : -1; } .header { display : flex; justify-content : space-between; align-items : center; padding : 10px 20px; background-color : rgba ( 0, 0, 0, 0.7) ; border-bottom : 1px solid rgba ( 255, 255, 255, 0.2) ; } .system-logo { height : 40px; width : 40px; border-radius : 50%; } .logout { color : #fff; cursor : pointer; padding : 5px 10px; border : 2px solid rgba ( 255, 255, 255, 0.2) ; border-radius : 5px; transition : background-color 0.3s ease; } .logout:hover { background-color : rgba ( 255, 255, 255, 0.2) ; } .card-container { display : flex; flex-wrap : wrap; justify-content : flex-start; padding : 20px; } .card { flex : 0 0 calc ( 20% - 20px) ; background-color : rgba ( 0, 0, 0, 0.5) ; border-radius : 15px; backdrop-filter : blur ( 10px) ; border : 2px solid rgba ( 255, 255, 255, 0.2) ; margin : 10px; padding : 15px; box-sizing : border-box; display : flex; } .logo { flex : 0 0 30%; height : 80px; width : 80px; margin-right : 10px; border-radius : 20%; user-drag : none; } .card-content { flex : 0 0 70%; padding-left : 10px; } .card-content h3 { color : #fff; margin : 10px 0; } .card-content p { color : #fff; } .modal { display : none; position : fixed; z-index : 1; left : 50%; top : 50%; transform : translate ( -50%, -50%) ; width : 300px; height : 150px; overflow : auto; background-color : rgba ( 0, 0, 0, 0.8) ; border : 2px solid rgba ( 255, 255, 255, 0.2) ; border-radius : 10px; box-shadow : 0 4px 8px rgba ( 0, 0, 0, 0.2) ; } .modal-content { padding : 20px; } .modal-content p { color : #fff; text-align : center; } .modal-buttons { display : flex; justify-content : center; margin-top : 20px; } .modal-buttons button { margin : 0 10px; padding : 10px 20px; cursor : pointer; border : none; border-radius : 5px; background-color : #007BFF; color : #fff; transition : background-color 0.3s ease; } .modal-buttons button:hover { background-color : #0056b3; } </ style> </ head> < body> < divclass = " header" > < divclass = " logo-container" > < imgclass = " system-logo" src = " https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1736960400&t=2bbb8a8e0be6e8ae7d1b4713751f1b0f" alt = " System Logo" draggable = " false" > </ div> < divclass = " logout" id = " logout" > </ div> </ div> < divclass = " card-container" > < divclass = " card" > < imgclass = " logo" src = " https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1736960400&t=2bbb8a8e0be6e8ae7d1b4713751f1b0f" alt = " Card Logo" draggable = " false" > < divclass = " card-content" > < h3> </ h3> < p> </ p> </ div> </ div> </ div> < divclass = " modal" id = " modal" > < divclass = " modal-content" > < p> </ p> < divclass = " modal-buttons" > < buttonid = " confirmLogout" > </ button> < buttonid = " cancelLogout" > </ button> </ div> </ div> </ div> < script> document. getElementById ( 'logout' ) . addEventListener ( 'click' , function ( ) { document. getElementById ( 'modal' ) . style. display = 'block' ; } ) ; document. getElementById ( 'confirmLogout' ) . addEventListener ( 'click' , function ( ) { window. location. href = 'login.html ' ; document. getElementById ( 'modal' ) . style. display = 'none' ; } ) ; document. getElementById ( 'cancelLogout' ) . addEventListener ( 'click' , function ( ) { document. getElementById ( 'modal' ) . style. display = 'none' ; } ) ; </ script> </ body> </ html > 
