509 lines
13 KiB
HTML
509 lines
13 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="#0c0e12">
|
|
<title>爱马仕 AI · 登录</title>
|
|
<link rel="icon" type="image/svg+xml" href="./icon.svg">
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--orange: #ff6900;
|
|
--orange-2: #ff8830;
|
|
--orange-3: #ffa85a;
|
|
--bg-0: #0c0e12;
|
|
--text: #f5f6f8;
|
|
--text-dim: rgba(245,246,248,0.72);
|
|
--text-dim2: rgba(245,246,248,0.48);
|
|
--text-dim3: rgba(245,246,248,0.28);
|
|
--line: rgba(255,255,255,0.10);
|
|
--line-strong: rgba(255,255,255,0.18);
|
|
--err: #ff5d7a;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
|
|
color: var(--text);
|
|
background: var(--bg-0);
|
|
-webkit-font-smoothing: antialiased;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ========== 背景 ========== */
|
|
.bg {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -2;
|
|
background:
|
|
radial-gradient(ellipse at 10% 10%, #1a2040 0%, var(--bg-0) 55%),
|
|
radial-gradient(ellipse at 90% 90%, #2a1030 0%, transparent 60%),
|
|
var(--bg-0);
|
|
overflow: hidden;
|
|
}
|
|
.blob {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(120px);
|
|
mix-blend-mode: screen;
|
|
animation: float 60s ease-in-out infinite;
|
|
}
|
|
.b1 { width: 720px; height: 720px; top: -180px; left: -120px; background: #3b6eff; opacity: 0.55; }
|
|
.b2 { width: 820px; height: 820px; bottom: -220px; right: -160px; background: #a33dff; opacity: 0.5; animation-delay: -15s; }
|
|
.b3 { width: 480px; height: 480px; top: 35%; left: 58%; background: #ff6900; opacity: 0.22; animation-delay: -30s; }
|
|
.b4 { width: 400px; height: 400px; bottom: 15%; left: 15%; background: #ff3d70; opacity: 0.3; animation-delay: -45s; }
|
|
@keyframes float {
|
|
0%, 100% { transform: translate3d(0,0,0) scale(1); }
|
|
25% { transform: translate3d(70px,-50px,0) scale(1.08); }
|
|
50% { transform: translate3d(-40px,60px,0) scale(0.94); }
|
|
75% { transform: translate3d(50px,40px,0) scale(1.05); }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) { .blob { animation: none; } }
|
|
|
|
/* 网格噪点 */
|
|
.grid-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
background-image:
|
|
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
|
|
background-size: 60px 60px;
|
|
mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
|
|
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
|
|
}
|
|
|
|
/* ========== 容器 ========== */
|
|
.wrap {
|
|
min-height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 32px;
|
|
}
|
|
|
|
.card {
|
|
width: 100%;
|
|
max-width: 960px;
|
|
min-height: 560px;
|
|
display: grid;
|
|
grid-template-columns: 1.15fr 1fr;
|
|
background: rgba(255,255,255,0.045);
|
|
border: 1px solid var(--line);
|
|
border-radius: 28px;
|
|
backdrop-filter: blur(36px) saturate(1.35);
|
|
-webkit-backdrop-filter: blur(36px) saturate(1.35);
|
|
box-shadow:
|
|
0 40px 100px rgba(0,0,0,0.6),
|
|
0 0 0 1px rgba(255,255,255,0.04),
|
|
inset 0 1px 0 rgba(255,255,255,0.18),
|
|
inset 0 -1px 0 rgba(255,255,255,0.04);
|
|
overflow: hidden;
|
|
animation: cardIn 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
@keyframes cardIn {
|
|
from { opacity: 0; transform: translateY(16px) scale(0.98); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
|
|
/* ========== 左侧品牌区 ========== */
|
|
.showcase {
|
|
position: relative;
|
|
padding: 56px 56px 48px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
background:
|
|
radial-gradient(ellipse at 20% 30%, rgba(255,105,0,0.18) 0%, transparent 60%),
|
|
radial-gradient(ellipse at 80% 80%, rgba(255,105,0,0.08) 0%, transparent 60%);
|
|
border-right: 1px solid var(--line);
|
|
overflow: hidden;
|
|
}
|
|
.showcase::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -20%;
|
|
left: -20%;
|
|
width: 140%;
|
|
height: 140%;
|
|
background: radial-gradient(circle at 30% 40%, rgba(255,105,0,0.25) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.mega-tag {
|
|
position: relative;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 32px 52px 36px;
|
|
background: var(--orange);
|
|
color: #111;
|
|
border-radius: 10px;
|
|
line-height: 1;
|
|
font-family: "Didot", "Bodoni 72", "SF Pro Display", serif;
|
|
font-weight: 700;
|
|
box-shadow:
|
|
0 24px 70px rgba(255,105,0,0.55),
|
|
0 0 0 1px rgba(26,15,8,0.3),
|
|
inset 0 2px 0 rgba(255,255,255,0.35),
|
|
inset 0 -2px 0 rgba(0,0,0,0.18);
|
|
align-self: flex-start;
|
|
}
|
|
.mega-tag::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 7px;
|
|
border: 1.5px solid rgba(26,15,8,0.42);
|
|
border-radius: 5px;
|
|
pointer-events: none;
|
|
}
|
|
.mega-tag .mt-top {
|
|
font-size: 52px;
|
|
letter-spacing: 8px;
|
|
}
|
|
.mega-tag .mt-mid {
|
|
font-size: 13px;
|
|
margin-top: 10px;
|
|
letter-spacing: 5.5px;
|
|
opacity: 0.78;
|
|
}
|
|
|
|
.showcase-text {
|
|
position: relative;
|
|
margin-top: 40px;
|
|
}
|
|
.mega-eyebrow {
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
letter-spacing: 4px;
|
|
color: var(--orange-3);
|
|
margin-bottom: 14px;
|
|
text-transform: uppercase;
|
|
}
|
|
.mega-title {
|
|
font-size: 64px;
|
|
font-weight: 900;
|
|
line-height: 1;
|
|
letter-spacing: -2.5px;
|
|
background: linear-gradient(135deg, #fff 0%, #ffd8a0 60%, #ff8830 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
margin-bottom: 10px;
|
|
}
|
|
.mega-title .mega-ai {
|
|
font-family: "Didot", "Bodoni 72", "SF Pro Display", serif;
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
font-size: 0.88em;
|
|
background: linear-gradient(135deg, #ffa85a 0%, #ff6900 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
padding-left: 4px;
|
|
}
|
|
.mega-cn {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin-bottom: 16px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.mega-sub {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-dim2);
|
|
line-height: 1.75;
|
|
max-width: 380px;
|
|
}
|
|
|
|
.showcase-foot {
|
|
position: relative;
|
|
display: flex;
|
|
gap: 24px;
|
|
margin-top: 32px;
|
|
padding-top: 24px;
|
|
border-top: 1px solid var(--line);
|
|
font-size: 11px;
|
|
color: var(--text-dim3);
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
text-transform: uppercase;
|
|
}
|
|
.showcase-foot b { color: var(--orange-3); font-weight: 700; letter-spacing: 0.8px; }
|
|
|
|
/* ========== 右侧表单区 ========== */
|
|
.form-side {
|
|
padding: 56px 52px 48px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.form-title {
|
|
font-size: 22px;
|
|
font-weight: 800;
|
|
letter-spacing: -0.3px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.form-sub {
|
|
font-size: 13px;
|
|
color: var(--text-dim2);
|
|
margin-bottom: 36px;
|
|
}
|
|
|
|
.field { margin-bottom: 18px; }
|
|
.field label {
|
|
display: block;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
color: var(--text-dim);
|
|
letter-spacing: 1.2px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 10px;
|
|
}
|
|
.field input {
|
|
width: 100%;
|
|
padding: 15px 18px;
|
|
background: rgba(0,0,0,0.28);
|
|
border: 1px solid var(--line-strong);
|
|
color: var(--text);
|
|
border-radius: 13px;
|
|
font-size: 15px;
|
|
font-family: inherit;
|
|
outline: none;
|
|
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
|
|
}
|
|
.field input:focus {
|
|
border-color: var(--orange);
|
|
background: rgba(0,0,0,0.35);
|
|
box-shadow: 0 0 0 4px rgba(255,105,0,0.13);
|
|
}
|
|
.field input::placeholder { color: var(--text-dim3); }
|
|
|
|
.err {
|
|
display: none;
|
|
margin: 6px 0 16px;
|
|
padding: 12px 16px;
|
|
background: rgba(255,93,122,0.1);
|
|
border: 1px solid rgba(255,93,122,0.32);
|
|
color: #ffb6c3;
|
|
font-size: 12.5px;
|
|
font-weight: 600;
|
|
border-radius: 11px;
|
|
}
|
|
.err.show { display: block; animation: shake 0.32s; }
|
|
@keyframes shake {
|
|
0%,100% { transform: translateX(0); }
|
|
20%,60% { transform: translateX(-5px); }
|
|
40%,80% { transform: translateX(5px); }
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
padding: 17px;
|
|
background: linear-gradient(135deg, var(--orange) 0%, var(--orange-2) 100%);
|
|
color: #1a0f08;
|
|
border: 0;
|
|
border-radius: 13px;
|
|
font-size: 15px;
|
|
font-weight: 800;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
margin-top: 10px;
|
|
letter-spacing: 1px;
|
|
box-shadow:
|
|
0 12px 32px rgba(255,105,0,0.4),
|
|
inset 0 1px 0 rgba(255,255,255,0.4),
|
|
inset 0 -1px 0 rgba(0,0,0,0.15);
|
|
transition: transform 0.15s, box-shadow 0.2s;
|
|
}
|
|
.btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow:
|
|
0 18px 40px rgba(255,105,0,0.5),
|
|
inset 0 1px 0 rgba(255,255,255,0.4),
|
|
inset 0 -1px 0 rgba(0,0,0,0.15);
|
|
}
|
|
.btn:active { transform: translateY(0); }
|
|
.btn:disabled { opacity: 0.55; cursor: wait; transform: none; }
|
|
|
|
.shortcuts {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
.shortcut-chip {
|
|
flex: 1;
|
|
padding: 9px 14px;
|
|
font-size: 11.5px;
|
|
background: rgba(255,255,255,0.04);
|
|
border: 1px solid var(--line);
|
|
border-radius: 9px;
|
|
color: var(--text-dim);
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
transition: all 0.15s;
|
|
}
|
|
.shortcut-chip:hover {
|
|
background: rgba(255,105,0,0.12);
|
|
border-color: rgba(255,105,0,0.38);
|
|
color: var(--orange-3);
|
|
}
|
|
.shortcut-chip::before {
|
|
content: "@ ";
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* ========== 响应式 ========== */
|
|
@media (max-width: 840px) {
|
|
.card {
|
|
grid-template-columns: 1fr;
|
|
max-width: 500px;
|
|
min-height: 0;
|
|
}
|
|
.showcase {
|
|
padding: 44px 40px 36px;
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.mega-tag { padding: 24px 36px 28px; align-self: center; }
|
|
.mega-tag .mt-top { font-size: 38px; letter-spacing: 6px; }
|
|
.mega-tag .mt-mid { font-size: 11px; letter-spacing: 4px; }
|
|
.showcase-text { margin-top: 28px; text-align: center; }
|
|
.mega-title { font-size: 38px; }
|
|
.mega-sub { max-width: 100%; }
|
|
.showcase-foot { justify-content: center; flex-wrap: wrap; }
|
|
.form-side { padding: 40px 36px 36px; }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.wrap { padding: 14px; }
|
|
.showcase { padding: 32px 24px 28px; }
|
|
.mega-tag { padding: 18px 28px 22px; }
|
|
.mega-tag .mt-top { font-size: 30px; letter-spacing: 5px; }
|
|
.mega-title { font-size: 30px; }
|
|
.form-side { padding: 32px 24px 28px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="bg">
|
|
<div class="blob b1"></div>
|
|
<div class="blob b2"></div>
|
|
<div class="blob b3"></div>
|
|
<div class="blob b4"></div>
|
|
</div>
|
|
<div class="grid-overlay"></div>
|
|
|
|
<div class="wrap">
|
|
<div class="card">
|
|
|
|
<!-- 左侧品牌 showcase -->
|
|
<div class="showcase">
|
|
<div class="mega-tag">
|
|
<span class="mt-top">HERMÈS</span>
|
|
<span class="mt-mid">PARIS</span>
|
|
</div>
|
|
|
|
<div class="showcase-text">
|
|
<div class="mega-eyebrow">YOUR PRIVATE</div>
|
|
<div class="mega-title">爱马仕</div>
|
|
<div class="mega-cn">你的私人 AI 助手</div>
|
|
<div class="mega-sub">
|
|
多智能体 · Skill 编排 · 75 真实 Hermes 技能库<br>
|
|
私密对话不外发 · 24 小时单点登录
|
|
</div>
|
|
</div>
|
|
|
|
<div class="showcase-foot">
|
|
<span><b>Kang</b> · 个人版</span>
|
|
<span>Gemini 3 Pro</span>
|
|
<span>v0.3</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧表单 -->
|
|
<div class="form-side">
|
|
<div class="form-title">欢迎回来</div>
|
|
<div class="form-sub">请输入你的账号和密码继续</div>
|
|
|
|
<form id="loginForm" autocomplete="on">
|
|
<div class="field">
|
|
<label for="user">账 号</label>
|
|
<input type="text" id="user" name="username" placeholder="kang" autocomplete="username" required autofocus>
|
|
</div>
|
|
<div class="field">
|
|
<label for="pass">密 码</label>
|
|
<input type="password" id="pass" name="password" placeholder="••••••••••" autocomplete="current-password" required>
|
|
</div>
|
|
<div class="err" id="err">账号或密码错误</div>
|
|
<button type="submit" class="btn" id="btn">登 录</button>
|
|
</form>
|
|
|
|
<div class="shortcuts">
|
|
<button type="button" class="shortcut-chip" onclick="document.getElementById('user').value='kang';document.getElementById('pass').focus()">kang</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const form = document.getElementById("loginForm");
|
|
const btn = document.getElementById("btn");
|
|
const err = document.getElementById("err");
|
|
|
|
form.addEventListener("submit", async (e) => {
|
|
e.preventDefault();
|
|
err.classList.remove("show");
|
|
btn.disabled = true;
|
|
btn.textContent = "验证中…";
|
|
|
|
const user = document.getElementById("user").value.trim();
|
|
const pass = document.getElementById("pass").value;
|
|
|
|
try {
|
|
const res = await fetch("/_auth/verify", {
|
|
method: "GET",
|
|
credentials: "same-origin",
|
|
headers: {
|
|
"Authorization": "Basic " + btoa(user + ":" + pass),
|
|
},
|
|
});
|
|
|
|
if (res.ok) {
|
|
btn.textContent = "登录成功 →";
|
|
setTimeout(() => { location.href = "/"; }, 220);
|
|
} else {
|
|
showError(res.status === 401 ? "账号或密码错误" : "HTTP " + res.status);
|
|
}
|
|
} catch (e) {
|
|
showError("网络错误: " + (e.message || e));
|
|
}
|
|
});
|
|
|
|
function showError(msg) {
|
|
err.textContent = msg;
|
|
err.classList.add("show");
|
|
btn.disabled = false;
|
|
btn.textContent = "登 录";
|
|
document.getElementById("pass").select();
|
|
}
|
|
|
|
if (document.cookie.split("; ").some(c => c.startsWith("hermes_auth="))) {
|
|
location.href = "/";
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|