diff --git a/static/admin.html b/static/admin.html index 48cfa77..be7fc73 100644 --- a/static/admin.html +++ b/static/admin.html @@ -102,6 +102,21 @@ + +
+
+ + + + + + +
+
+
diff --git a/static/admin.js b/static/admin.js index 5901a2d..f5632c9 100644 --- a/static/admin.js +++ b/static/admin.js @@ -1,3 +1,37 @@ +// ==================================================================== +// 登录验证 +// ==================================================================== +(function () { + const ACCESS_KEY = 'oadmin123'; + const overlay = document.getElementById('loginOverlay'); + if (!overlay) return; + + if (sessionStorage.getItem('authed') === '1') { + overlay.classList.add('hidden'); + return; + } + + const pwdInput = document.getElementById('loginPassword'); + const loginBtn = document.getElementById('loginBtn'); + const errEl = document.getElementById('loginError'); + + function doLogin() { + if (pwdInput.value === ACCESS_KEY) { + sessionStorage.setItem('authed', '1'); + overlay.classList.add('hidden'); + errEl.textContent = ''; + } else { + errEl.textContent = '密码错误，请重试'; + pwdInput.value = ''; + pwdInput.focus(); + } + } + + loginBtn.addEventListener('click', doLogin); + pwdInput.addEventListener('keydown', e => { if (e.key === 'Enter') doLogin(); }); + pwdInput.focus(); +})(); + // 账号管理页面JavaScript class AdminManager { diff --git a/static/index.html b/static/index.html index c2f1a8c..984587c 100644 --- a/static/index.html +++ b/static/index.html @@ -10,6 +10,23 @@ + + + diff --git a/static/script.js b/static/script.js index 386e52f..01e0d36 100644 --- a/static/script.js +++ b/static/script.js @@ -1,3 +1,38 @@ +// ==================================================================== +// 登录验证 +// ==================================================================== +(function () { + const ACCESS_KEY = 'oadmin123'; + const overlay = document.getElementById('loginOverlay'); + if (!overlay) return; + + // 已登录则直接隐藏 + if (sessionStorage.getItem('authed') === '1') { + overlay.classList.add('hidden'); + return; + } + + const pwdInput = document.getElementById('loginPassword'); + const loginBtn = document.getElementById('loginBtn'); + const errEl = document.getElementById('loginError'); + + function doLogin() { + if (pwdInput.value === ACCESS_KEY) { + sessionStorage.setItem('authed', '1'); + overlay.classList.add('hidden'); + errEl.textContent = ''; + } else { + errEl.textContent = '密码错误，请重试'; + pwdInput.value = ''; + pwdInput.focus(); + } + } + + loginBtn.addEventListener('click', doLogin); + pwdInput.addEventListener('keydown', e => { if (e.key === 'Enter') doLogin(); }); + pwdInput.focus(); +})(); + // Outlook 邮件管理器 — 账号管理 + 双栏邮件查看器 class MailManager { diff --git a/static/style.css b/static/style.css index f71f34e..8b8e181 100644 --- a/static/style.css +++ b/static/style.css @@ -1,5 +1,106 @@ /* Outlook 邮件管理器 — 参考小苹果风格 */ +/* ============================================================================ + 登录遮罩 + ============================================================================ */ +.login-overlay { + position: fixed; + top: 0; left: 0; width: 100%; height: 100%; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(20px); + z-index: 999999; + display: flex; + align-items: center; + justify-content: center; +} + +.login-overlay.hidden { display: none; } + +.login-card { + text-align: center; + padding: 3rem 2.5rem; + background: white; + border-radius: 20px; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08); + border: 1px solid rgba(0, 0, 0, 0.04); + width: 360px; + max-width: 90vw; + animation: fadeInUp 0.4s ease; +} + +.login-icon { + width: 64px; height: 64px; + margin: 0 auto 1.2rem; + background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.08)); + border-radius: 18px; + display: flex; + align-items: center; + justify-content: center; + font-size: 28px; + color: #667eea; +} + +.login-title { + font-size: 22px; + font-weight: 700; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + margin: 0 0 4px; +} + +.login-subtitle { + font-size: 13px; + color: #94a3b8; + margin: 0 0 1.5rem; +} + +.login-input-wrap { + position: relative; + margin-bottom: 1.2rem; +} + +.login-input-wrap i { + position: absolute; + left: 14px; + top: 50%; + transform: translateY(-50%); + color: #94a3b8; + font-size: 15px; +} + +.login-input-wrap input { + width: 100%; + padding: 12px 14px 12px 42px; + border: 2px solid #e5e7eb; + border-radius: 10px; + font-size: 14px; + outline: none; + transition: all 0.3s ease; + color: #334155; +} + +.login-input-wrap input:focus { + border-color: #667eea; + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); +} + +.login-btn { + width: 100%; + height: 44px; + font-size: 15px; + border-radius: 10px; +} + +.login-error { + color: #f5576c; + font-size: 13px; + font-weight: 600; + margin: 0.8rem 0 0; + min-height: 20px; +} + /* ============================================================================ 基础重置 ============================================================================ */