You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
3.7 KiB
145 lines
3.7 KiB
<!doctype html>
|
|
<html lang="zh-Hans">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport"
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Document</title>
|
|
<style>
|
|
:root {
|
|
--color-primary: 139 69 19;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
background: #f7f7f7;
|
|
margin: 0;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
form {
|
|
width: 360px;
|
|
margin: 150px auto 24px;
|
|
padding: 48px 48px 56px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgb(var(--color-primary));
|
|
border: none;
|
|
}
|
|
|
|
form:focus-within {
|
|
/*box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), inset 0 0 0 2px rgb(var(--color-primary));*/
|
|
}
|
|
|
|
hr {
|
|
margin-bottom: 36px;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
fieldset {
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
legend {
|
|
padding: 0;
|
|
font-size: 140%;
|
|
}
|
|
|
|
section:not(:last-of-type) {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
input,
|
|
button {
|
|
appearance: none;
|
|
width: 100%;
|
|
padding-inline: 12px;
|
|
border-radius: 6px;
|
|
height: 40px;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
outline: none;
|
|
}
|
|
|
|
input {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
input:focus {
|
|
border-color: rgb(var(--color-primary));
|
|
box-shadow: 0 0 0 3px rgb(var(--color-primary) / 50%);
|
|
}
|
|
|
|
button:focus {
|
|
border-color: rgb(var(--color-primary));
|
|
background-color: rgb(var(--color-primary));
|
|
color: #fff;
|
|
}
|
|
.error {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #fff;
|
|
background: red;
|
|
border: 1px solid #f00;
|
|
text-align: center;
|
|
padding: 6px 12px;
|
|
border-radius: 0 0 6px 6px;
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
|
}
|
|
</style>
|
|
<script>
|
|
var legend = null
|
|
var timer = null
|
|
|
|
function showError(message) {
|
|
if (timer) {
|
|
clearTimeout(timer)
|
|
}
|
|
if (legend) {
|
|
legend.innerText = message
|
|
} else {
|
|
legend = document.createElement("div")
|
|
legend.className = "error"
|
|
legend.innerText = message
|
|
document.body.appendChild(legend)
|
|
}
|
|
timer = setTimeout(() => {
|
|
timer = null
|
|
legend.remove()
|
|
}, 5000);
|
|
}
|
|
|
|
window.addEventListener("DOMContentLoaded", function () {
|
|
var params = new URLSearchParams(location.search)
|
|
var error = params.get("error")
|
|
error && showError(error)
|
|
}, false)
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<form method="post">
|
|
<fieldset>
|
|
<legend>登录</legend>
|
|
<hr/>
|
|
<section>
|
|
<label for="username">账号</label>
|
|
<input name="username" id="username" placeholder="请输入账号">
|
|
</section>
|
|
<section>
|
|
<label for="password">登录密码</label>
|
|
<input name="password" type="password" id="password" placeholder="登录密码">
|
|
</section>
|
|
<section>
|
|
<label style="opacity: 0; color: transparent">登录</label>
|
|
<button type="submit">确定</button>
|
|
</section>
|
|
</fieldset>
|
|
</form>
|
|
</body>
|
|
</html> |