<!DOCTYPE html>
<!
--suppress ALL
-->
<html lang="zh
-CN">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1.0">
<title>安全登录系统</title>
<style>
:root {
/* 合并后的统一变量 */
--white
: #e9e9e9;
--gray
: #333;
--blue
: #0367a6;
--lightblue
: #008997;
--button
-radius
: 0.7rem;
--max
-width
: 758px;
--max
-height
: 420px;
font
-size
: 16px;
font
-family
: -apple
-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans
-serif;
}
body {
align
-items
: center;
background: url("https
://res.cloudinary.com/dbhnlktrv/image/upload/v1599997626/
background_oeuhe7.jpg");
background-attachment: fixed;
background-position
: center;
background-repeat
: no
-repeat;
background-size
: cover;
display
: grid;
height
: 100vh;
place
-items
: center;
margin
: 0;
}
.form__title {
font
-weight
: 300;
margin
: 0;
margin
-bottom
: 1.25rem;
}
.link {
color
: var(
--gray);
font
-size
: 0.9rem;
margin
: 1.5rem 0;
text
-decoration
: none;
}
.container {
background-color
: var(
--white);
border
-radius
: var(
--button
-radius);
box
-shadow
: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
height
: var(
--max
-height);
max
-width
: var(
--max
-width);
overflow
: hidden;
position
: relative;
width
: 100%;
}
.container__form {
height
: 100%;
position
: absolute;
top
: 0;
transition
: all 0.6s ease
-in
-out;
}
.container
--signin {
left
: 0;
width
: 50%;
z
-index
: 2;
}
.container.right
-panel
-active .container
--signin {
transform
: translateX(100%);
}
.container
--signup {
left
: 0;
opacity
: 0;
width
: 50%;
z
-index
: 1;
}
.container.right
-panel
-active .container
--signup {
animation: show 0.6s;
opacity
: 1;
transform
: translateX(100%);
z
-index
: 5;
}
.container__overlay {
height
: 100%;
left
: 50%;
overflow
: hidden;
position
: absolute;
top
: 0;
transition
: transform 0.6s ease
-in
-out;
width
: 50%;
z
-index
: 100;
}
.container.right
-panel
-active .container__overlay {
transform
: translateX(
-100%);
}
.overlay {
background: url("https
://cdn.pixabay.com/photo/2018/08/14/13/23/ocean
-3605547_1280.jpg");
background-attachment: fixed;
background-position
: center;
background-repeat
: no
-repeat;
background-size
: cover;
height
: 100%;
left
: -100%;
position
: relative;
transform
: translateX(0);
transition
: transform 0.6s ease
-in
-out;
width
: 200%;
}
.container.right
-panel
-active .overlay {
transform
: translateX(50%);
}
.overlay__panel {
align
-items
: center;
display
: flex;
flex
-direction
: column;
height
: 100%;
justify
-content
: center;
position
: absolute;
text
-align
: center;
top
: 0;
transform
: translateX(0);
transition
: transform 0.6s ease
-in
-out;
width
: 50%;
}
.overlay
--left {
transform
: translateX(
-20%);
}
.container.right
-panel
-active .overlay
--left {
transform
: translateX(0);
}
.overlay
--right {
right
: 0;
transform
: translateX(0);
}
.container.right
-panel
-active .overlay
--right {
transform
: translateX(20%);
}
.btn {
background-color
: var(
--blue);
background-image
: linear
-gradient(90deg, var(
--blue) 0%, var(
--lightblue) 74%);
border
-radius
: 20px;
border
: 1px solid var(
--blue);
color
: var(
--white);
cursor
: pointer;
font
-size
: 0.8rem;
font
-weight
: bold;
letter
-spacing
: 0.1rem;
padding
: 0.9rem 4rem;
text
-transform
: uppercase;
transition
: transform 80ms ease
-in;
}
.form > .btn {
margin
-top
: 1.5rem;
}
.btn
:active {
transform
: scale(0.95);
}
.btn
:focus {
outline
: none;
}
.form {
background-color
: var(
--white);
display
: flex;
align
-items
: center;
justify
-content
: center;
flex
-direction
: column;
padding
: 0 3rem;
height
: 100%;
text
-align
: center;
}
.input {
background-color
: #fff;
border
: none;
padding
: 0.9rem 0.9rem;
margin
: 0.5rem 0;
width
: 100%;
box
-sizing
: border
-box;
}
@keyframes show {
0%, 49.99% {
opacity
: 0;
z
-index
: 1;
}
50%, 100% {
opacity
: 1;
z
-index
: 5;
}
}
/* 新增功能样式 */
.loader {
border
: 4px solid rgba(0, 0, 0, 0.1);
border
-top
: 4px solid #0367a6;
border
-radius
: 50%;
width
: 30px;
height
: 30px;
animation: spin 1s linear infinite;
display
: none;
margin
: 10px auto;
}
@keyframes spin {
0% {
transform
: rotate(0deg);
}
100% {
transform
: rotate(360deg);
}
}
.error
-message {
color
: #ff3860;
font
-size
: 0.85rem;
margin
-top
: 0.5rem;
height
: 20px;
display
: flex;
align
-items
: center;
justify
-content
: center;
}
.hidden {
display
: none;
}
.password
-container {
position
: relative;
width
: 100%;
}
.toggle
-password {
position
: absolute;
right
: 10px;
top
: 50%;
transform
: translateY(
-50%);
background: none;
border
: none;
color
: var(
--gray);
cursor
: pointer;
font
-size
: 0.8rem;
}
.s
uccess
-message {
color
: #23d160;
font
-size
: 0.85rem;
margin
-top
: 0.5rem;
display
: none;
}
</style>
</head>
<body>
<!
-- 登录页面容器
-->
<div id="loginPage" class="container right
-panel
-active">
<!
-- 注册表单
-->
<div class="container__form container
--signup">
<form class="form" id="signupForm">
<h2 class="form__title">注册账号</h2>
<input type="text" placeholder="用户名" class="input" required id="signupUsername"/>
<input type="email" placeholder="邮箱" class="input" required id="signupEmail"/>
<div class="password
-container">
<input type="password" placeholder="密码" class="input" required id="signupPassword"/>
<button type="button" class="toggle
-password">👁️</button>
</div>
<div class="error
-message" id="signupError"></div>
<div class="s
uccess
-message" id="signupS
uccess"></div>
<button class="btn" type="submit">注册</button>
</form>
</div>
<!
-- 登录表单
-->
<div class="container__form container
--signin">
<form class="form" id="loginForm">
<h2 class="form__title">用户登录</h2>
<input type="email" placeholder="邮箱" class="input" required id="loginEmail"/>
<div class="password
-container">
<input type="password" placeholder="密码" class="input" required id="loginPassword"/>
<button type="button" class="toggle
-password">👁️</button>
</div>
<div class="loader" id="loginLoader"></div>
<div class="error
-message" id="loginError"></div>
<button class="btn" type="submit">登录</button>
</form>
</div>
<!
-- 覆盖层
-->
<div class="container__overlay">
<div class="overlay">
<div class="overlay__panel overlay
--left">
<button class="btn" id="signInBtn">去登录</button>
</div>
<div class="overlay__panel overlay
--right">
<button class="btn" id="signUpBtn">去注册</button>
</div>
</div>
</div>
</div>
<!
-- 仪表盘页面 (登录成功后显示)
-->
<div id="dashboardPage" class="hidden">
<div class="container" style="
background-color
: #ffffff; padding
: 15rem; max
-width
: 1000px;">
<h2>欢迎, <span id="userDisplayName"></span>!</h2>
<p>您已成功登录！这是您的个人控制面板。</p>
<!
-- 文本输入区域
-->
<div style="margin
-top
: 2rem;">
<h3>内容编辑区</h3>
<textarea id="userContent" rows="6"
style="width
: 100%; padding
: 10px; font
-family
: inherit; font
-size
: 1rem;"></textarea>
<button id="saveContentBtn" class="btn" style="margin
-top
: 1rem; padding
: 0.7rem 2rem;">保存内容</button>
<div class="s
uccess
-message" id="saveS
uccess" style="text
-align
: left; margin
-top
: 0.5rem;"></div>
</div>
<div style="margin
-top
: 2rem;">
<p>电子邮箱
: <span id="userEmailDisplay"></span></p>
<p>注册时间
: <span id="registrationDate"></span></p>
<button id="logoutBtn" class="btn" style="margin
-top
: 2rem;">退出登录</button>
</div>
</div>
</div>
<script>
// ======== 页面元素 ========
const signInBtn = document.getElementById("signInBtn");
const signUpBtn = document.getElementById("signUpBtn");
const container = document.querySelector(".container");
const loginForm = document.getElementById("loginForm");
const signupForm = document.getElementById("signupForm");
const loginLoader = document.getElementById("loginLoader");
const loginError = document.getElementById("loginError");
const signupError = document.getElementById("signupError");
const signupS
uccess = document.getElementById("signupS
uccess");
const loginPage = document.getElementById("loginPage");
const dashboardPage = document.getElementById("dashboardPage");
const logoutBtn = document.getElementById("logoutBtn");
const userDisplayName = document.getElementById("userDisplayName");
const userEmailDisplay = document.getElementById("userEmailDisplay");
const registrationDate = document.getElementById("registrationDate");
const togglePasswordBtns = document.querySelectorAll(".toggle
-password");
// ======== 密码可见性切换 ========
togglePasswordBtns.forEach(btn => {
btn.addEventListener("click", function () {
const input = this.previousElementSibling;
const type = input.getAttribute("type") === "password" ? "text"
: "password";
input.setAttribute("type", type);
this.textContent = type === "password" ? "👁️"
: "🔒";
});
});
// ======== 面板切换功能 ========
signInBtn.addEventListener("click", () => {
container.classList.remove("right
-panel
-active");
clearMessages();
});
signUpBtn.addEventListener("click", () => {
container.classList.add("right
-panel
-active");
clearMessages();
});
// ======== 注册功能 ========
signupForm.addEventListener("submit", function (e) {
e.preventDefault();
const username = document.getElementById("signupUsername").value.trim();
const email = document.getElementById("signupEmail").value.trim();
const password = document.getElementById("signupPassword").value;
// 验证用户名（至少3个字符）
if (username.length < 3) {
showSignupError("用户名至少需要3个字符");
return;
}
// 验证邮箱格式
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
showSignupError("请输入有效的电子邮箱");
return;
}
// 验证密码强度（至少6个字符）
if (password.length < 6) {
showSignupError("密码长度至少为6个字符");
return;
}
// 检查用户是否已注册（伪代码）
if (localStorage.getItem(email)) {
showSignupError("该邮箱已注册");
return;
}
// 保存注册信息
const userData = {
username,
email,
password, // 实际应用中应存储哈希值而非明文
registrationDate
: new Date().toLocaleDateString()
};
localStorage.setItem(email, JSON.stringify(userData));
// 注册成功
signupS
uccess.textContent = "注册成功！";
signupS
uccess.style.display = "block";
signupError.style.display = "none";
// 3秒后切换到登录面板
setTimeout(() => {
container.classList.remove("right
-panel
-active");
signupForm.reset();
signupS
uccess.style.display = "none";
}, 3000);
});
// ======== 登录功能 ========
loginForm.addEventListener("submit", function (e) {
e.preventDefault();
const email = document.getElementById("loginEmail").value;
const password = document.getElementById("loginPassword").value;
// 显示加载状态
loginLoader.style.display = 'block';
loginError.style.display = 'none';
// 模拟登录请求延迟
setTimeout(() => {
const authResult = authenticateUser(email, password);
if (authResult.s
uccess) {
// 保存登录状态
localStorage.setItem("isLoggedIn", "true");
localStorage.setItem("currentUser", JSON.stringify(authResult.userData));
// 更新仪表盘信息
updateDashboard(authResult.userData);
// 切换到仪表盘
loginPage.classList.add("hidden");
dashboardPage.classList.remove("hidden");
} else {
showLoginError(authResult.message);
}
loginLoader.style.display = 'none';
}, 1500);
});
// ======== 退出功能 ========
logoutBtn.addEventListener("click", function () {
// 清除登录状态
localStorage.removeItem("isLoggedIn");
localStorage.removeItem("currentUser");
// 返回登录页面
dashboardPage.classList.add("hidden");
loginPage.classList.remove("hidden");
// 重置表单
loginForm.reset();
clearMessages();
});
// ======== 辅助函数 ========
function authenticateUser(email, password) {
// 从本地存储获取用户数据
const userData = localStorage.getItem(email);
if (!userData) {
return {
s
uccess
: false,
message
: "邮箱未注册"
};
}
const user = JSON.parse(userData);
// 实际应用中应
使用密码哈希值比较
if (password !== user.password) {
return {
s
uccess
: false,
message
: "邮箱或密码错误"
};
}
return {
s
uccess
: true,
userData
: user
};
}
function updateDashboard(userData) {
userDisplayName.textContent = userData.username;
userEmailDisplay.textContent = userData.email;
registrationDate.textContent = userData.registrationDate;
}
function showLoginError(message) {
loginError.textContent = message;
loginError.style.display = 'block';
}
function showSignupError(message) {
signupError.textContent = message;
signupError.style.display = 'block';
signupS
uccess.style.display = "none";
}
function clearMessages() {
loginError.style.display = 'none';
signupError.style.display = 'none';
signupS
uccess.style.display = 'none';
}
// 页面加载时检查登录状态
window.addEventListener('DOMContentLoaded', () => {
const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
const currentUser = localStorage.getItem('currentUser');
if (isLoggedIn && currentUser) {
updateDashboard(JSON.parse(currentUser));
loginPage.classList.add("hidden");
dashboardPage.classList.remove("hidden");
}
});
</script>
</body>
</html>
登陆成功后加一个上下滑动翻页功能
本文介绍了UC浏览器手机端对于CSS某些特性的兼容性问题，包括伪元素使用animation动画及background-attachment:fixed属性的支持情况。通过具体示例说明了这些问题的表现，并提供了相关参考资料。
扫一扫
254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
