20211054-殷洪午.html

<!DOCTYPE html>  
<html>  
 <head>  
   <meta charset="UTF-8">  
   <title>登录页面</title>  
   <style>  
     /* CSS 样式 */  
     body {
	   background-image: url("http://5b0988e595225.cdn.sohucs.com/images/20190321/864b5c1779cf47389e6b137907d61bc3.jpeg");
					background-repeat: no-repeat;
					background-size: cover;
					background-opacity: 0.8;
					opacity: 0.6;
					background-position: center center;
					height: 90vh;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1px solid #ccc; 
					border-radius: 5px;  
					width: 100%;
					height: 100%;
					margin: 0;
					padding: 0;
					box-sizing: border-box;
     }  
     .container {  
	margin: 200px auto;  
    max-width: 600px;  
    padding: 20px;  
	justify-content: center;
	align-items: center;
	border-radius: 5px;  
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
    border: 1px solid #000;  
	box-sizing: border-box;
     }  
     input[type="text"], input[type="password"] {  
    width: 100%;  
    padding: 10px;  
    margin-bottom: 10px;  
    border-radius: 5px;  
    box-sizing: border-box;  
	border: 1px solid #000; /* 设置边框为黑色 */  
     }  
     input[type="submit"] {  
    outline: 0;
	border: none;
	width: 100%;
	background-color: #f93a0b;
	padding: 0.938rem 1.5rem;
	border-radius: 1.125rem;
	font-weight: 400;
	font-size: 1.4rem;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	border: 1px solid #000; /* 设置边框为黑色 */  
     }  
     input[type="submit"]:hover {  
       background-color: #3e8e41;  
     }  
     .form-item {  
       margin-bottom: 10px; 
     }  
   </style>  
 </head>  
 <body>   
   <div class="container">  
     <form id="login-form">  
       <div class="form-item">  
         <label for="username"><strong>用户名<strong></label>  
         <input type="text" id="username" name="username" required>  
       </div>  
       <div class="form-item">  
         <label for="password"><strong>密码<strong></label>  
         <input type="password" id="password" name="password" required>  
       </div>  
       <input type="submit" value="登录">  
     </form>  
   </div>  
   <script>  
     // JS 代码  
     const username = 'parrot5';  
     const password = '123456';  
     const form = document.getElementById('login-form');  
     form.addEventListener('submit', function(event) {  
       event.preventDefault();  
       const usernameInput = document.getElementById('username');  
       const passwordInput = document.getElementById('password');  
       if (usernameInput.value === username && passwordInput.value === password) {  
         alert('登录成功');  
       } else {  
         alert('用户名或密码错误');  
       }  
     });  
   </script>  
 </body>  
</html>  