<!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;
}
.success-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="success-message" id="signupSuccess"></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="success-message" id="saveSuccess"
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 signupSuccess = document.getElementById("signupSuccess");
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));
// 注册成功
signupSuccess.textContent = "注册成功！";
signupSuccess.
style.display = "block";
signupError.
style.display = "none";
// 3秒后切换到登录面板
setTimeout(() => {
container.classList.remove("right-panel-active");
signupForm.reset();
signupSuccess.
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.success) {
// 保存登录状态
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 {
success
: false,
message
: "邮箱未注册"
};
}
const user = JSON.parse(userData);
// 实际应用中应使用密码哈希值比较
if (password !== user.password) {
return {
success
: false,
message
: "邮箱或密码错误"
};
}
return {
success
: 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';
signupSuccess.
style.display = "none";
}
function clearMessages() {
loginError.
style.display = 'none';
signupError.
style.display = 'none';
signupSuccess.
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>
登陆成功后加一个上下滑动翻页功能
本文介绍CSS中direction属性的作用及用法，包括ltr、rtl和inherit三个取值的意义，并解释了这些选项如何影响文本的流向。此外还提到了unicode-bidi属性的应用场景。
扫一扫
335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
