69 lines
3.2 KiB
HTML
69 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>安全登录 · 示例演示页</title>
|
|
<style>
|
|
:root{--brand:#2563eb}
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
body{min-height:100vh;display:flex;align-items:center;justify-content:center;
|
|
font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif;
|
|
background:linear-gradient(135deg,#eef2ff 0%,#e0e7ff 100%);color:#1f2937}
|
|
.card{width:400px;max-width:92vw;background:#fff;border-radius:16px;
|
|
padding:40px 36px;box-shadow:0 18px 40px rgba(31,41,55,.14)}
|
|
.logo{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,#2563eb,#4f46e5);
|
|
display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;font-weight:700;
|
|
margin-bottom:18px;user-select:none}
|
|
h1{font-size:22px;font-weight:700;margin-bottom:4px}
|
|
.sub{color:#6b7280;font-size:13px;margin-bottom:26px}
|
|
label{display:block;font-size:13px;font-weight:600;margin:16px 0 6px}
|
|
input[type=text],input[type=password]{width:100%;height:44px;padding:0 14px;
|
|
border:1px solid #d1d5db;border-radius:10px;font-size:14px;outline:none;background:#f9fafb}
|
|
input:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.14)}
|
|
.row{display:flex;align-items:center;justify-content:space-between;margin:16px 0 22px;font-size:13px}
|
|
.row a{color:var(--brand);text-decoration:none}
|
|
button{width:100%;height:46px;border:none;border-radius:10px;background:var(--brand);color:#fff;
|
|
font-size:15px;font-weight:600;cursor:pointer;letter-spacing:2px}
|
|
button:hover{background:#1d4ed8}
|
|
.foot{text-align:center;color:#9ca3af;font-size:12px;margin-top:22px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<form class="card" id="loginForm">
|
|
<div class="logo">↗</div>
|
|
<h1>安全登录</h1>
|
|
<div class="sub">示例演示页面 · 仅用于功能说明</div>
|
|
|
|
<label for="username">用户名 / 邮箱</label>
|
|
<input type="text" id="username" name="username" placeholder="输入用户名或邮箱"
|
|
autocomplete="username" spellcheck="false">
|
|
|
|
<label for="password">密码</label>
|
|
<input type="password" id="password" name="password" placeholder="输入密码"
|
|
autocomplete="current-password">
|
|
|
|
<div class="row">
|
|
<label style="margin:0;font-weight:400;display:flex;align-items:center;gap:6px">
|
|
<input type="checkbox" name="remember"> 记住我
|
|
</label>
|
|
<a href="javascript:void(0)" onclick="return false">忘记密码？</a>
|
|
</div>
|
|
|
|
<button type="submit" id="loginBtn">登 录</button>
|
|
|
|
<div id="tip" class="foot"></div>
|
|
</form>
|
|
|
|
<script>
|
|
// 仅为演示停留页面：提交不真实跳转，并回显填充结果，方便截图。
|
|
document.getElementById('loginForm').addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
var u = document.getElementById('username').value;
|
|
var p = document.getElementById('password').value;
|
|
document.getElementById('tip').textContent =
|
|
'（演示）登录请求已发出 · 用户名=' + (u ? '已填写' : '空') + ' · 密码=' + (p ? '已填写' : '空');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |