Skip to content

Commit 00340ef

Browse files
CommandstoneCommandstone
authored
Update login.html
1 parent 70913a3 commit 00340ef

File tree

1 file changed

+168
-25
lines changed

1 file changed

+168
-25
lines changed

‎denlu/login.html‎

Lines changed: 168 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,178 @@
11
<!DOCTYPE html>
2-
<html lang="zh">
2+
<html lang="zh-CN">
33
<head>
44
<meta charset="UTF-8">
5-
<title>登录</title>
6-
<link rel="stylesheet" href="style.css">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>登录系统</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
padding: 0;
11+
height: 100vh;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
background: linear-gradient(135deg, #FFD700 0%, #7CFC00 100%);
16+
font-family: 'Segoe UI', sans-serif;
17+
animation: gradientBG 10s ease infinite;
18+
}
19+
20+
@keyframes gradientBG {
21+
0% { background-position: 0% 50%; }
22+
50% { background-position: 100% 50%; }
23+
100% { background-position: 0% 50%; }
24+
}
25+
26+
.login-card {
27+
background: rgba(255, 255, 255, 0.95);
28+
padding: 2.5rem;
29+
border-radius: 1rem;
30+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
31+
width: 360px;
32+
transform: translateY(0);
33+
transition: transform 0.3s ease;
34+
}
35+
36+
.login-card:hover {
37+
transform: translateY(-5px);
38+
}
39+
40+
.login-header {
41+
text-align: center;
42+
margin-bottom: 2rem;
43+
}
44+
45+
.login-header h1 {
46+
color: #2c3e50;
47+
margin-bottom: 0.5rem;
48+
}
49+
50+
.login-header p {
51+
color: #95a5a6;
52+
font-size: 0.9rem;
53+
}
54+
55+
.input-group {
56+
margin-bottom: 1.5rem;
57+
position: relative;
58+
}
59+
60+
input {
61+
width: 100%;
62+
padding: 12px;
63+
border: 2px solid #ecf0f1;
64+
border-radius: 8px;
65+
font-size: 14px;
66+
transition: all 0.3s ease;
67+
}
68+
69+
input:focus {
70+
border-color: #7cfc00;
71+
box-shadow: 0 0 8px rgba(124, 252, 0, 0.3);
72+
}
73+
74+
.password-toggle {
75+
position: absolute;
76+
right: 15px;
77+
top: 50%;
78+
transform: translateY(-50%);
79+
cursor: pointer;
80+
color: #95a5a6;
81+
}
82+
83+
.submit-btn {
84+
background: linear-gradient(135deg, #7CFC00, #6dd400);
85+
color: white;
86+
padding: 14px;
87+
width: 100%;
88+
border: none;
89+
border-radius: 8px;
90+
cursor: pointer;
91+
font-weight: 600;
92+
transition: opacity 0.3s ease;
93+
}
94+
95+
.submit-btn:hover {
96+
opacity: 0.9;
97+
}
98+
99+
.error-message {
100+
color: #e74c3c;
101+
text-align: center;
102+
margin-top: 1rem;
103+
height: 0;
104+
opacity: 0;
105+
transition: all 0.3s ease;
106+
}
107+
108+
.error-message.show {
109+
height: auto;
110+
opacity: 1;
111+
margin-top: 1.5rem;
112+
}
113+
</style>
7114
</head>
8115
<body>
9-
<h2>登录</h2>
10-
<form id="loginForm">
11-
<label for="username">用户名:</label>
12-
<input type="text" name="username" id="username" required>
13-
<br>
14-
<label for="password">密码:</label>
15-
<input type="password" name="password" id="password" required>
16-
<br>
17-
<button type="submit">登录</button>
18-
</form>
19-
<a href="register.html">没有账号？点击注册</a>
116+
<div class="login-card">
117+
<div class="login-header">
118+
<h1>欢迎登录</h1>
119+
<p>支持账户：admin / cst / test| 测试账户密码：123456 </p>
120+
</div>
121+
<form id="loginForm">
122+
<div class="input-group">
123+
<input type="text"
124+
id="username"
125+
placeholder="用户名"
126+
required>
127+
</div>
128+
<div class="input-group">
129+
<input type="password"
130+
id="password"
131+
placeholder="密码"
132+
required>
133+
<span class="password-toggle" onclick="togglePassword()">👁️</span>
134+
</div>
135+
<button type="submit" class="submit-btn">立即登录</button>
136+
<div class="error-message" id="errorMsg">验证失败，请检查输入！</div>
137+
</form>
138+
</div>
20139

21140
<script>
22-
document.getElementById('loginForm').addEventListener('submit', async function(event) {
23-
event.preventDefault();
24-
const formData = new FormData(event.target);
25-
const response = await fetch('login.php', {
26-
method: 'POST',
27-
body: formData
28-
});
29-
const result = await response.text();
30-
alert(result);
31-
if (response.ok) {
32-
window.location.href = 'profile.html';
141+
// 密码可见切换
142+
function togglePassword() {
143+
const passwordField = document.getElementById('password');
144+
const toggleIcon = document.querySelector('.password-toggle');
145+
if (passwordField.type === 'password') {
146+
passwordField.type = 'text';
147+
toggleIcon.textContent = '👁️';
148+
} else {
149+
passwordField.type = 'password';
150+
toggleIcon.textContent = '👁️';
151+
}
152+
}
153+
154+
// 表单提交验证
155+
document.getElementById('loginForm').addEventListener('submit', (e) => {
156+
e.preventDefault();
157+
158+
const username = document.getElementById('username').value.trim();
159+
const password = document.getElementById('password').value;
160+
const errorMsg = document.getElementById('errorMsg');
161+
162+
// 验证逻辑
163+
const validUsers = ['admin', 'cst','test'];
164+
const validPasswords = ['123456', '24682468a','123456'];
165+
166+
if (validUsers.includes(username) && validPasswords.includes(password)) {
167+
// 登录成功处理
168+
window.location.href = 'dashboard.html'; // 修改跳转地址
169+
} else {
170+
// 显示错误提示
171+
errorMsg.classList.add('show');
172+
// 2秒后隐藏提示
173+
setTimeout(() => {
174+
errorMsg.classList.remove('show');
175+
}, 2000);
33176
}
34177
});
35178
</script>

0 commit comments

Comments
 (0)