iye
086d92991e
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 7s
250 lines
16 KiB
HTML
250 lines
16 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) 460px; gap: 0; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); position: relative; overflow: hidden; min-height: 620px; }
|
|
|
|
/* 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; gap: 10px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
|
|
.auth-brand .logo .ic { width: 28px; height: 28px; background: var(--heat); border-radius: 6px; display: grid; place-items: center; }
|
|
.auth-brand .logo .ic svg { width: 16px; height: 16px; color: var(--accent-white); }
|
|
.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: 28px; }
|
|
.auth-brand .hero h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; 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; }
|
|
|
|
/* 价值点列表 */
|
|
.val-list { margin: 30px 0 0; display: flex; flex-direction: column; gap: 14px; }
|
|
.val-item { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 12px; align-items: start; }
|
|
.val-item .ic-v { width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-sm); display: grid; place-items: center; color: var(--heat); }
|
|
.val-item .ic-v svg { width: 12px; height: 12px; }
|
|
.val-item .txt-v { font-size: 12.5px; color: rgba(255,255,255,.78); line-height: 1.5; }
|
|
.val-item .txt-v b { color: var(--accent-white); font-weight: 600; }
|
|
|
|
.auth-brand .foot { font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.32); letter-spacing: .04em; margin-top: auto; padding-top: 24px; 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: 40px 44px 32px; 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 22px; }
|
|
|
|
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
|
|
.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-label .hint { margin-left: auto; font-size: 10.5px; color: var(--black-alpha-32); }
|
|
.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); }
|
|
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
|
|
.field-row .field { margin-bottom: 0; }
|
|
|
|
.agree { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--black-alpha-56); line-height: 1.6; margin: 8px 0 18px; cursor: pointer; user-select: none; }
|
|
.agree input { margin-top: 3px; width: 13px; height: 13px; accent-color: var(--heat); flex-shrink: 0; }
|
|
.agree a { color: var(--heat); text-decoration: none; }
|
|
.agree 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:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
|
|
.btn-cta svg { width: 15px; height: 15px; }
|
|
|
|
.switch-row { margin-top: 22px; 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 .val-list { 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="login.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">
|
|
<span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 19 12 4.5 19.5 19"/><path d="M8 14h8"/><path d="M7 17h10"/><path d="M9.5 10.3c1.5-1.2 3.5-1.2 5 0"/></svg></span>
|
|
<span>Airshelf</span>
|
|
</div>
|
|
<div class="tag">// SHORT-VIDEO COMMERCE PLATFORM</div>
|
|
|
|
<div class="hero">
|
|
<h1>开通团队,<br>开始 <span class="h">AI 带货</span> 第一条短剧</h1>
|
|
<p>个人 / 企业团队 1-2 小时出成片,失败不扣费,确认后扣。</p>
|
|
</div>
|
|
|
|
<div class="val-list">
|
|
<div class="val-item">
|
|
<span class="ic-v"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></span>
|
|
<span class="txt-v"><b>5 阶段流水线</b> · 脚本 → 资产 → 故事板 → 视频片段 → 拼接导出</span>
|
|
</div>
|
|
<div class="val-item">
|
|
<span class="ic-v"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></span>
|
|
<span class="txt-v"><b>失败不扣费</b> · 任务仅在用户通过时扣费,失败 / 超时 / 重跑一律不扣</span>
|
|
</div>
|
|
<div class="val-item">
|
|
<span class="ic-v"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></span>
|
|
<span class="txt-v"><b>团队 + 角色 + 四层额度</b> · 超管 / 团管 / 成员,日 / 月 + 团队 / 总四层防超支</span>
|
|
</div>
|
|
<div class="val-item">
|
|
<span class="ic-v"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></span>
|
|
<span class="txt-v"><b>跨项目资产库</b> · 主播 / 场景 / 商品图沉淀复用,不重复生成</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/register</span>
|
|
</div>
|
|
<p class="lead">填写团队信息开通账户,默认成为团队超管。</p>
|
|
|
|
<form id="register-form" autocomplete="off" onsubmit="event.preventDefault(); doRegister();">
|
|
<div class="field">
|
|
<label class="field-label" for="reg-team">团队名 <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="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg>
|
|
<input type="text" id="reg-team" placeholder="例: 小李的店 / XX 文化传媒" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-label" for="reg-email">超管邮箱 <span class="req">*</span><span class="hint">用于成员邀请 + 找回密码</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="reg-email" placeholder="name@company.com" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field-row">
|
|
<div class="field">
|
|
<label class="field-label" for="reg-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="reg-pwd" placeholder="至少 8 位" required>
|
|
<button type="button" class="toggle-pwd" onclick="togglePwd('reg-pwd')">
|
|
<svg 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="field">
|
|
<label class="field-label" for="reg-pwd2">确认密码 <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="reg-pwd2" placeholder="再输一次" required>
|
|
<button type="button" class="toggle-pwd" onclick="togglePwd('reg-pwd2')">
|
|
<svg 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>
|
|
|
|
<div class="field">
|
|
<label class="field-label" for="reg-invite">邀请码 <span class="hint">可选 · 团队邀请才需要</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="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
|
|
<input type="text" id="reg-invite" placeholder="例: TEAM-XXXX-XXXX">
|
|
</div>
|
|
</div>
|
|
|
|
<label class="agree">
|
|
<input type="checkbox" id="reg-agree" checked>
|
|
<span>我已阅读并同意 <a href="#" onclick="event.preventDefault();_regToast('用户协议','含数据处理 / 内容生成版权 / 计费规则三章 · 完整文本将在正式版接入');">用户协议</a> 与 <a href="#" onclick="event.preventDefault();_regToast('隐私政策','遵循《个人信息保护法》· 团队数据存中国境内 · 默认不用于模型训练');">隐私政策</a>,知悉「失败不扣费 · 确认后扣」的扣费规则。</span>
|
|
</label>
|
|
|
|
<button class="btn-cta" type="submit" id="reg-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="switch-row">
|
|
已有账号? <a href="login.html">登录 →</a>
|
|
</div>
|
|
</form>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
function togglePwd(id) {
|
|
const inp = document.getElementById(id);
|
|
inp.type = inp.type === 'password' ? 'text' : 'password';
|
|
}
|
|
function doRegister() {
|
|
const team = document.getElementById('reg-team').value.trim();
|
|
const email = document.getElementById('reg-email').value.trim();
|
|
const p1 = document.getElementById('reg-pwd').value;
|
|
const p2 = document.getElementById('reg-pwd2').value;
|
|
const agree = document.getElementById('reg-agree').checked;
|
|
if (!team || !email) return alert('请补全团队名 + 邮箱');
|
|
if (p1.length < 8) return alert('密码至少 8 位');
|
|
if (p1 !== p2) return alert('两次密码不一致');
|
|
if (!agree) return alert('请同意用户协议');
|
|
const btn = document.getElementById('reg-submit');
|
|
btn.innerHTML = '<span style="font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;">// 创建团队中...</span>';
|
|
btn.disabled = true;
|
|
setTimeout(() => { location.href = 'index.html'; }, 900);
|
|
}
|
|
// 轻量 toast(不依赖 shell.js)
|
|
function _regToast(t, sub) {
|
|
let el = document.getElementById('__reg-toast');
|
|
if (!el) {
|
|
el = document.createElement('div');
|
|
el.id = '__reg-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:380px;';
|
|
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)'; }, 3000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|