iye
134778dde8
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 9s
220 lines
14 KiB
HTML
220 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>登录 · Airshelf</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/restraint.css?v=2026052607">
|
|
<style>
|
|
body { margin: 0; min-height: 100vh; background: var(--background-base); display: grid; place-items: center; padding: 32px 24px; }
|
|
|
|
.auth-wrap { width: 100%; max-width: 980px; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 0; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); position: relative; overflow: hidden; min-height: 560px; }
|
|
|
|
/* 4 装订线 */
|
|
.auth-wrap::before, .auth-wrap::after,
|
|
.auth-wrap > .corner-tr, .auth-wrap > .corner-bl {
|
|
content: ''; position: absolute; width: 14px; height: 14px;
|
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21' fill='%23e8e8e8'%3E%3Cpath d='M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z'/%3E%3C/svg%3E") no-repeat center;
|
|
background-size: contain; pointer-events: none; z-index: 2;
|
|
}
|
|
.auth-wrap::before { top: -7px; left: -7px; }
|
|
.auth-wrap::after { bottom: -7px; right: -7px; }
|
|
.auth-wrap > .corner-tr { top: -7px; right: -7px; }
|
|
.auth-wrap > .corner-bl { bottom: -7px; left: -7px; }
|
|
|
|
/* 左侧品牌区 · 深色 */
|
|
.auth-brand { background: var(--accent-black); color: var(--accent-white); padding: 40px 44px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
|
|
.auth-brand .logo { display: flex; align-items: center; height: 56px; }
|
|
.auth-brand .logo-img { display: block; width: 196px; height: auto; margin: -14px 0 -10px -14px; object-fit: contain; }
|
|
.auth-brand .tag { font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.5); letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
|
|
|
|
.auth-brand .hero { margin-top: auto; margin-bottom: auto; }
|
|
.auth-brand .hero h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 14px; }
|
|
.auth-brand .hero h1 .h { color: var(--heat); }
|
|
.auth-brand .hero p { font-size: 13.5px; color: rgba(255,255,255,.62); line-height: 1.7; max-width: 320px; margin: 0; }
|
|
|
|
/* ASCII 装饰行 */
|
|
.auth-brand .ascii { font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.32); letter-spacing: .04em; line-height: 1.8; margin-top: 28px; }
|
|
.auth-brand .ascii .ln .k { color: rgba(255,255,255,.5); }
|
|
.auth-brand .ascii .ln .v { color: var(--heat); }
|
|
|
|
.auth-brand .foot { font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.32); letter-spacing: .04em; margin-top: 22px; display: flex; gap: 14px; }
|
|
.auth-brand .foot a { color: rgba(255,255,255,.5); text-decoration: none; }
|
|
.auth-brand .foot a:hover { color: var(--heat); }
|
|
|
|
/* 右侧表单区 */
|
|
.auth-form { padding: 44px 44px 36px; display: flex; flex-direction: column; }
|
|
.auth-form .h-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
|
|
.auth-form h2 { font-size: 22px; font-weight: 600; letter-spacing: -.012em; margin: 0; }
|
|
.auth-form .sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase; }
|
|
.auth-form .lead { font-size: 13px; color: var(--black-alpha-56); margin: 0 0 28px; }
|
|
|
|
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
|
|
.field-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--black-alpha-56); font-family: var(--font-mono); letter-spacing: .02em; }
|
|
.field-label .req { color: var(--accent-crimson); }
|
|
.field-input-wrap { position: relative; }
|
|
.field-input-wrap .ic-l { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--black-alpha-32); width: 14px; height: 14px; pointer-events: none; }
|
|
.field input { width: 100%; box-sizing: border-box; padding: 11px 12px 11px 36px; font-size: 13.5px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); font-family: inherit; color: var(--accent-black); transition: border-color var(--t-base), box-shadow var(--t-base); }
|
|
.field input:focus { outline: none; border-color: var(--heat); box-shadow: 0 0 0 3px var(--heat-12); }
|
|
.field input::placeholder { color: var(--black-alpha-32); }
|
|
.field .toggle-pwd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--black-alpha-48); cursor: pointer; background: none; border: 0; padding: 0; display: grid; place-items: center; }
|
|
.field .toggle-pwd:hover { color: var(--accent-black); }
|
|
|
|
.row-between { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 22px; font-size: 12.5px; }
|
|
.row-between label { display: inline-flex; align-items: center; gap: 6px; color: var(--black-alpha-56); cursor: pointer; user-select: none; }
|
|
.row-between label input { width: 13px; height: 13px; accent-color: var(--heat); }
|
|
.row-between a { color: var(--heat); text-decoration: none; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; }
|
|
.row-between a:hover { text-decoration: underline; }
|
|
|
|
.btn-cta { background: var(--heat); color: var(--accent-white); border: 1px solid var(--heat); border-radius: var(--r-md); padding: 12px 14px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: box-shadow var(--t-base), transform var(--t-base); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
|
|
.btn-cta:hover { box-shadow: 0 4px 14px rgba(250,93,25,.28); }
|
|
.btn-cta:active { transform: translateY(1px); }
|
|
.btn-cta svg { width: 15px; height: 15px; }
|
|
|
|
.divider { display: flex; align-items: center; gap: 10px; margin: 22px 0 18px; }
|
|
.divider .line { flex: 1; height: 1px; background: var(--border-faint); }
|
|
.divider .txt { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-32); letter-spacing: .08em; text-transform: uppercase; }
|
|
|
|
.sso-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
|
.sso-btn { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 10px 12px; font-size: 12.5px; color: var(--accent-black); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: border-color var(--t-base); }
|
|
.sso-btn:hover { border-color: var(--black-alpha-32); }
|
|
.sso-btn svg { width: 14px; height: 14px; }
|
|
|
|
.switch-row { margin-top: auto; padding-top: 28px; text-align: center; font-size: 12.5px; color: var(--black-alpha-56); }
|
|
.switch-row a { color: var(--heat); text-decoration: none; font-weight: 500; }
|
|
.switch-row a:hover { text-decoration: underline; }
|
|
|
|
/* 响应式 */
|
|
@media (max-width: 820px) {
|
|
.auth-wrap { grid-template-columns: 1fr; min-height: 0; }
|
|
.auth-brand { padding: 32px 28px; }
|
|
.auth-brand .ascii { display: none; }
|
|
.auth-form { padding: 32px 28px; }
|
|
}
|
|
|
|
/* 顶部小返回链(可选) */
|
|
.top-back { position: fixed; top: 20px; left: 24px; font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); text-decoration: none; letter-spacing: .04em; }
|
|
.top-back:hover { color: var(--heat); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a class="top-back" href="index.html">← 返回工作台</a>
|
|
|
|
<div class="auth-wrap">
|
|
<span class="corner-tr" aria-hidden></span><span class="corner-bl" aria-hidden></span>
|
|
|
|
<!-- 左:品牌 -->
|
|
<aside class="auth-brand">
|
|
<div class="logo">
|
|
<img class="logo-img" src="assets/logo-dark.png" alt="Airshelf">
|
|
</div>
|
|
<div class="tag">// SHORT-VIDEO COMMERCE PLATFORM</div>
|
|
|
|
<div class="hero">
|
|
<h1>AI 全流程<br><span class="h">短剧化</span>带货生成</h1>
|
|
<p>商品 → AI 脚本 → 故事板 → Seedance 视频片段 → 一键导出 9:16 ≤60s 成片。</p>
|
|
</div>
|
|
|
|
<div class="ascii">
|
|
<div class="ln"><span class="k">// step·1</span> 脚本生成 <span class="v">●●●●●</span></div>
|
|
<div class="ln"><span class="k">// step·2</span> 基础资产 <span class="v">●●●●○</span></div>
|
|
<div class="ln"><span class="k">// step·3</span> 故事板 <span class="v">●●●○○</span></div>
|
|
<div class="ln"><span class="k">// step·4</span> 视频片段 <span class="v">●●○○○</span></div>
|
|
<div class="ln"><span class="k">// step·5</span> 拼接导出 <span class="v">●○○○○</span></div>
|
|
</div>
|
|
|
|
<div class="foot">
|
|
<a href="#">关于</a>
|
|
<a href="#">定价</a>
|
|
<a href="#">联系</a>
|
|
<a href="#">隐私</a>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- 右:表单 -->
|
|
<main class="auth-form">
|
|
<div class="h-row">
|
|
<h2>登录</h2>
|
|
<span class="sub">// /auth/login</span>
|
|
</div>
|
|
<p class="lead">使用团队邀请邮箱登录,接受邀请后自动加入对应团队。</p>
|
|
|
|
<form id="login-form" autocomplete="off" onsubmit="event.preventDefault(); doLogin();">
|
|
<div class="field">
|
|
<label class="field-label" for="auth-email">邮箱 <span class="req">*</span></label>
|
|
<div class="field-input-wrap">
|
|
<svg class="ic-l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><path d="m22 6-10 7L2 6"/></svg>
|
|
<input type="email" id="auth-email" placeholder="name@company.com" value="li@shop.com" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label" for="auth-pwd">密码 <span class="req">*</span></label>
|
|
<div class="field-input-wrap">
|
|
<svg class="ic-l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" 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"/></svg>
|
|
<input type="password" id="auth-pwd" placeholder="••••••••" value="demo-1234" required>
|
|
<button type="button" class="toggle-pwd" aria-label="切换密码可见" onclick="togglePwd()">
|
|
<svg id="pwd-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row-between">
|
|
<label><input type="checkbox" checked> 记住我 7 天</label>
|
|
<a href="#" onclick="event.preventDefault();_loginToast('已发送重置邮件','请到 li@shop.com 收件箱查看 · 链接 30 分钟有效');">忘记密码?</a>
|
|
</div>
|
|
|
|
<button class="btn-cta" type="submit">
|
|
登录
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
</button>
|
|
|
|
<div class="divider"><span class="line"></span><span class="txt">OR</span><span class="line"></span></div>
|
|
|
|
<div class="sso-row">
|
|
<button type="button" class="sso-btn" onclick="_loginToast('微信扫码','请在 60s 内用微信扫一扫完成授权 · 内测中,以邮箱登录为准');">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 4C5 4 2 6.5 2 9.5c0 1.7 1 3.2 2.5 4.2L4 16l2.2-1.1c.7.2 1.5.3 2.3.3-.3-.5-.5-1.1-.5-1.7 0-2.8 2.9-5 6.5-5h.5C14.6 6 12 4 9 4zm-2 3.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm4 0c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM15 9c-3.3 0-6 2.2-6 5s2.7 5 6 5c.7 0 1.4-.1 2-.3L19 20l-.4-1.7c1.4-.9 2.4-2.3 2.4-3.8 0-2.8-2.7-5-6-5zm-2 2.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm4 0c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1z"/></svg>
|
|
微信扫码
|
|
</button>
|
|
<button type="button" class="sso-btn" onclick="_loginToast('飞书 SSO','即将打开企业飞书登录授权页 · 内测中,以邮箱登录为准');">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="3" width="18" height="18" rx="3"/></svg>
|
|
飞书 SSO
|
|
</button>
|
|
</div>
|
|
|
|
<div class="switch-row">
|
|
还没账号? <a href="register.html">注册团队 →</a>
|
|
</div>
|
|
</form>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
function togglePwd() {
|
|
const inp = document.getElementById('auth-pwd');
|
|
inp.type = inp.type === 'password' ? 'text' : 'password';
|
|
}
|
|
function doLogin() {
|
|
const btn = document.querySelector('.btn-cta');
|
|
btn.innerHTML = '<span style="font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;">// 验证中...</span>';
|
|
btn.disabled = true;
|
|
setTimeout(() => { location.href = 'index.html'; }, 700);
|
|
}
|
|
// 轻量 toast(不依赖 shell.js,免登录页拉重)
|
|
function _loginToast(t, sub) {
|
|
let el = document.getElementById('__login-toast');
|
|
if (!el) {
|
|
el = document.createElement('div');
|
|
el.id = '__login-toast';
|
|
el.style.cssText = 'position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(20px);background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:12px 18px;box-shadow:0 8px 24px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:2px;opacity:0;transition:opacity .2s,transform .2s;z-index:9999;font-family:inherit;max-width:360px;';
|
|
document.body.appendChild(el);
|
|
}
|
|
el.innerHTML = '<div style="font-size:13.5px;font-weight:600;color:#262626;">' + t + '</div>' + (sub ? '<div style="font-size:11.5px;color:rgba(0,0,0,.56);font-family:\'Inter\',system-ui,sans-serif;letter-spacing:.02em;">// ' + sub + '</div>' : '');
|
|
requestAnimationFrame(() => { el.style.opacity = '1'; el.style.transform = 'translateX(-50%) translateY(0)'; });
|
|
clearTimeout(el._t);
|
|
el._t = setTimeout(() => { el.style.opacity = '0'; el.style.transform = 'translateX(-50%) translateY(20px)'; }, 2800);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|