88 lines
5.0 KiB
HTML
88 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" data-theme="dark">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>魂镜 · 登录</title>
|
||
<link rel="stylesheet" href="assets/app.css?v=10">
|
||
</head>
|
||
<body>
|
||
<svg style="display:none" aria-hidden="true">
|
||
<symbol id="i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></symbol>
|
||
<symbol id="i-lock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></symbol>
|
||
<symbol id="i-key" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></symbol>
|
||
<symbol id="i-fingerprint" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 11a4 4 0 0 1 4 4v5"/><path d="M8 15a4 4 0 0 1 1-2.7"/><path d="M4 15a8 8 0 0 1 8-8 8 8 0 0 1 6.7 3.7"/><path d="M12 19v2"/><path d="M4.9 10.3A8 8 0 0 1 12 3a8 8 0 0 1 8 8c0 1-.1 2.3-.4 3"/></symbol>
|
||
</svg>
|
||
|
||
<div class="stage">
|
||
<div class="stage__bg" aria-hidden="true">
|
||
<div class="stage__rings">
|
||
<svg viewBox="0 0 800 800">
|
||
<defs><path id="ringpath" d="M400,400 m-300,0 a300,300 0 1,1 600,0 a300,300 0 1,1 -600,0"/></defs>
|
||
<circle class="ring-ink" cx="400" cy="400" r="392"/>
|
||
<circle class="ring-faint" cx="400" cy="400" r="336"/>
|
||
<g class="ring-slow"><circle class="ring-faint" cx="400" cy="400" r="272"/></g>
|
||
<circle class="ring-ink" cx="400" cy="400" r="206"/>
|
||
<circle class="ring-faint" cx="400" cy="400" r="158"/>
|
||
<g class="ring-slow" style="animation-direction:reverse"><circle class="ring-faint" cx="400" cy="400" r="104"/></g>
|
||
<text fill="var(--gilt-faint)" font-size="12" letter-spacing="6" style="font-family:var(--font-serif)">
|
||
<textPath href="#ringpath">镜中有镜 · 心外无心 · 汝来看此镜时 · 此镜亦照汝 · 铜镜本无字 · 照尽往来人 ·</textPath>
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
<svg style="position:absolute;inset:0;width:100%;height:100%;opacity:.035" aria-hidden="true"><filter id="grain"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2"/></filter><rect width="100%" height="100%" filter="url(#grain)"/></svg>
|
||
</div>
|
||
|
||
<header class="stage__topbar">
|
||
<span style="font-size:12px;color:var(--text-3)">静态原型 · 待审查</span>
|
||
<span class="spacer"></span>
|
||
<a href="index.html" style="font-size:12px;color:var(--text-3)">原型目录</a>
|
||
<button class="icon-btn" data-theme-toggle aria-label="切换到月白主题"><svg><use href="#i-moon"/></svg></button>
|
||
</header>
|
||
|
||
<main class="stage__main">
|
||
<div class="mirror-card">
|
||
<div class="mirror-card__brand">
|
||
<div class="brand__mark" aria-hidden="true"></div>
|
||
<div>
|
||
<div style="font-family:var(--font-serif);font-size:20px;font-weight:600;line-height:1.2">魂镜</div>
|
||
<div style="font-size:11px;color:var(--text-3)">Hunjing</div>
|
||
</div>
|
||
</div>
|
||
<div class="mirror-card__title">
|
||
<h1>登入魂镜</h1>
|
||
</div>
|
||
<p class="mirror-card__sub">长期 AI 角色、Agent 与创作社区平台</p>
|
||
|
||
<form onsubmit="return false">
|
||
<div class="field-group">
|
||
<label for="login-email">邮箱</label>
|
||
<input class="input" id="login-email" type="email" autocomplete="username" placeholder="you@example.com">
|
||
</div>
|
||
<div class="field-group">
|
||
<label for="login-pwd">密码</label>
|
||
<input class="input" id="login-pwd" type="password" autocomplete="current-password" placeholder="••••••••">
|
||
</div>
|
||
<a class="btn btn--primary" href="home.html" style="width:100%;margin-top:6px">登入</a>
|
||
</form>
|
||
|
||
<div class="login-alt">其他方式</div>
|
||
<div style="display:flex;gap:10px">
|
||
<a class="btn btn--outline btn--sm" href="#" style="flex:1" title="通行密钥（WebAuthn）"><svg><use href="#i-fingerprint"/></svg>通行密钥</a>
|
||
<a class="btn btn--outline btn--sm" href="#" style="flex:1" title="恢复钥匙（离线恢复码）"><svg><use href="#i-key"/></svg>恢复钥匙</a>
|
||
</div>
|
||
|
||
<p class="login-note">
|
||
Web 使用安全会话 Cookie（OAuth 2.1）；桌面与移动客户端使用 Authorization Code + PKCE。<br>
|
||
凭据只经 Header 传递，不进入 URL、日志或页面。连续失败将触发限流与通知。
|
||
</p>
|
||
<div class="login-foot">
|
||
还没有账户？<a href="register.html">创建账户</a>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
<script src="assets/app.js?v=3"></script>
|
||
</body>
|
||
</html>
|