<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-
8">
<meta name="v
iewport" content="width=device-width, initial-scale=1.0">
<title>安全登录系统</title>
<style>
/* 原样保留所有样式不变
*/
/* 添加加载动画
*/
.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: 0 auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 错误提示
*/
.error-message {
color: #ff3
860;
font-size: 0.
85rem;
margin-top: 0.5rem;
display: none;
}
/* 隐藏页面
*/
.hidden {
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"/>
<input type="password" placeholder="密码" class="input" required id="signupPassword"/>
<div class="error-message" id="signupError"></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"/>
<input type="password" placeholder="密码" class="input" required id="loginPassword"/>
<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: 2rem; max-width:
800px;">
<h2>欢迎来到...</h2>
<p>您已成功登录！这是您的个人控制面板。</p>
<
button id="logoutBtn" class="btn">退出登录</
button>
</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 loginPage = document.getElementById("loginPage");
const dashboardPage = document.getElementById("dashboardPage");
const logoutBtn = document.getElementById("logoutBtn");
// ======== 页面切换功能 ========
signInBtn.addEventListener("click", () => {
container.classList.remove("right-panel-active");
});
signUpBtn.addEventListener("click", () => {
container.classList.add("right-panel-active");
});
// ======== 登录功能 ========
loginForm.addEventListener("submit", async function(e) {
e.preventDefault();
const email = document.getElementById("loginEmail").value;
const password = document.getElementById("loginPassword").value;
// 显示加载状态，隐藏错误信息
loginLoader.style.display = 'block';
loginError.style.display = 'none';
try {
// 模拟登录请求（真实环境中应发送到服务器）
const loginSuccessful = await authenticateUser(email, password);
if (loginSuccessful) {
// 切换到仪表盘页面
loginPage.classList.add("hidden");
dashboardPage.classList.remove("hidden");
loginError.style.display = 'none';
} else {
showLoginError("邮箱或密码错误");
}
} catch (error) {
showLoginError("登录服务暂时不可用");
} finally {
loginLoader.style.display = 'none';
}
});
// ======== 退出功能 ========
if(logoutBtn) {
logoutBtn.addEventListener("click", function() {
// 清理会话（真实环境中应该调用后端API）
localStorage.removeItem("isLoggedIn");
// 返回登录页面
dashboardPage.classList.add("hidden");
loginPage.classList.remove("hidden");
});
}
// ======== 辅助函数 ========
async function authenticateUser(email, password) {
return new Promise(resolve => {
// 模拟网络请求延迟
setTimeout(() => {
// 简单逻辑：密码需要至少6个字符
resolve(email.includes('@') && password.length >= 6);
}, 1500);
});
}
function showLoginError(message) {
loginError.textContent = message;
loginError.style.display = 'block';
}
// 页面加载时检查登录状态
window.addEventListener('DOMContentLoaded', () => {
// 真实环境中应该检查用户会话
const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
if (isLoggedIn) {
loginPage.classList.add("hidden");
dashboardPage.classList.remove("hidden");
}
});
</script>
</body>
</html>
和
<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<!-- https://codepen.io/dan
ielkvist/pen/LYNVyPL -->
<head>
<meta charset="UTF-
8">
<meta name="v
iewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
/* COLORS
*/
--white: #e9e9e9;
--gray: #333;
--blue: #0367a6;
--lightblue: #00
8997;
/* RADII
*/
--
button-radius: 0.7rem;
/* SIZES
*/
--max-width: 75
8px;
--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-color: var(--white);
background: url("https://res.cloudinary.com/dbhnlktrv/image/upload/v1599997626/background_oeuhe7.jpg");
/* 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
*/
/* https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment
*/
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: grid;
height: 100vh;
place-items: center;
}
.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-color: var(--lightblue);
background: url("https://cdn.pixabay.com/photo/201
8/0
8/14/13/23/ocean-3605547_12
80.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-grad
ient(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%;
}
@keyframes show {
0%,
49.99% {
opacity: 0;
z-index: 1;
}
50%,
100% {
opacity: 1;
z-index: 5;
}
}
</style>
</head>
<body>
<div class="container right-panel-active">
<!-- Sign Up -->
<div class="container__form container--signup">
<form action="#" class="form" id="form1">
<h2 class="form__title">Sign Up</h2>
<input type="text" placeholder="User" class="input" />
<input type="email" placeholder="Email" class="input" />
<input type="password" placeholder="Password" class="input" />
<
button class="btn">Sign Up</
button>
</form>
</div>
<!-- Sign In -->
<div class="container__form container--signin">
<form action="#" class="form" id="form2">
<h2 class="form__title">Sign In</h2>
<input type="email" placeholder="Email" class="input" />
<input type="password" placeholder="Password" class="input" />
<
button class="btn">Sign In</
button>
</form>
</div>
<!-- Overlay -->
<div class="container__overlay">
<div class="overlay">
<div class="overlay__panel overlay--left">
<
button class="btn" id="signIn">Sign In</
button>
</div>
<div class="overlay__panel overlay--right">
<
button class="btn" id="signUp">Sign Up</
button>
</div>
</div>
</div>
</div>
<script>
const signInBtn = document.getElementById("signIn");
const signUpBtn = document.getElementById("signUp");
const fistForm = document.getElementById("form1");
const secondForm = document.getElementById("form2");
const container = document.querySelector(".container");
signInBtn.addEventListener("click", () => {
container.classList.remove("right-panel-active");
});
signUpBtn.addEventListener("click", () => {
container.classList.add("right-panel-active");
});
fistForm.addEventListener("submit", (e) => e.preventDefault());
secondForm.addEventListener("submit", (e) => e.preventDefault());
loginLoader.style.display = 'block';
loginError.style.display = 'none';
</script>
</body>
</html>
合一起
扫一扫
3939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
