dekun
f663867a25
Register service worker, install prompt UI, iOS meta tags, and document install steps in DEPLOY.md. Co-authored-by: Cursor <cursoragent@cursor.com>
146 lines
4.4 KiB
HTML
146 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="theme-color" content="#0f3460" />
|
|
<meta name="apple-mobile-web-app-title" content="道德经" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<link rel="icon" href="/favicon.ico" sizes="any" />
|
|
<link rel="shortcut icon" href="/favicon.ico" />
|
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
|
<link rel="icon" href="/favicon.png" type="image/png" sizes="512x512" />
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
<link rel="manifest" href="/site.webmanifest" />
|
|
<meta name="msapplication-TileColor" content="#0f3460" />
|
|
<meta name="msapplication-TileImage" content="/apple-touch-icon.png" />
|
|
<title>登录 · DAO DE JING</title>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
display: grid;
|
|
place-items: center;
|
|
font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
|
color: #e8e8e8;
|
|
}
|
|
.card {
|
|
width: min(92vw, 380px);
|
|
padding: 2rem;
|
|
border-radius: 12px;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
backdrop-filter: blur(8px);
|
|
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
|
|
}
|
|
h1 {
|
|
margin: 0 0 0.25rem;
|
|
font-size: 1.35rem;
|
|
font-weight: 600;
|
|
}
|
|
p.sub {
|
|
margin: 0 0 1.5rem;
|
|
color: #a8b2c1;
|
|
font-size: 0.9rem;
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: 0.35rem;
|
|
font-size: 0.85rem;
|
|
color: #c5cdd8;
|
|
}
|
|
input {
|
|
width: 100%;
|
|
margin-bottom: 1rem;
|
|
padding: 0.65rem 0.75rem;
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
border-radius: 8px;
|
|
background: rgba(0, 0, 0, 0.25);
|
|
color: #fff;
|
|
font-size: 1rem;
|
|
}
|
|
input:focus {
|
|
outline: none;
|
|
border-color: #5b8def;
|
|
}
|
|
button {
|
|
width: 100%;
|
|
padding: 0.7rem;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: #3b82f6;
|
|
color: #fff;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
}
|
|
button:hover { background: #2563eb; }
|
|
button:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
.error {
|
|
display: none;
|
|
margin-bottom: 1rem;
|
|
padding: 0.6rem 0.75rem;
|
|
border-radius: 8px;
|
|
background: rgba(239, 68, 68, 0.15);
|
|
border: 1px solid rgba(239, 68, 68, 0.35);
|
|
color: #fca5a5;
|
|
font-size: 0.85rem;
|
|
}
|
|
.error.show { display: block; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<h1>DAO DE JING</h1>
|
|
<p class="sub">请登录后访问站点</p>
|
|
<div id="error" class="error"></div>
|
|
<form id="loginForm">
|
|
<label for="username">用户名</label>
|
|
<input id="username" name="username" autocomplete="username" required />
|
|
<label for="password">密码</label>
|
|
<input id="password" name="password" type="password" autocomplete="current-password" required />
|
|
<button type="submit" id="submitBtn">登录</button>
|
|
</form>
|
|
</div>
|
|
<script>
|
|
const form = document.getElementById('loginForm')
|
|
const errorEl = document.getElementById('error')
|
|
const submitBtn = document.getElementById('submitBtn')
|
|
const params = new URLSearchParams(window.location.search)
|
|
const redirect = params.get('redirect') || '/'
|
|
|
|
form.addEventListener('submit', async (event) => {
|
|
event.preventDefault()
|
|
errorEl.classList.remove('show')
|
|
submitBtn.disabled = true
|
|
|
|
try {
|
|
const response = await fetch('/api/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
username: form.username.value.trim(),
|
|
password: form.password.value,
|
|
}),
|
|
})
|
|
|
|
const data = await response.json().catch(() => ({}))
|
|
if (!response.ok) {
|
|
throw new Error(data.message || '登录失败')
|
|
}
|
|
|
|
window.location.href = redirect
|
|
} catch (error) {
|
|
errorEl.textContent = error.message || '登录失败'
|
|
errorEl.classList.add('show')
|
|
} finally {
|
|
submitBtn.disabled = false
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|