<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用门票加入 - 超协体</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purple-dark) 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.ticket-container {
background: var(--surface-50);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
width: 100%;
max-width: 450px;
padding: 40px;
animation: slideUp 0.5s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.logo {
text-align: center;
margin-bottom: 30px;
}
.logo h1 {
font-size: 28px;
background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purple-dark) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
}
.logo p {
color: var(--text-secondary);
font-size: 14px;
}
.ticket-badge {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.18) 100%);
padding: 20px;
border-radius: 12px;
text-align: center;
margin-bottom: 20px;
}
.ticket-badge .icon {
font-size: 48px;
margin-bottom: 10px;
}
.ticket-badge .title {
font-size: 16px;
font-weight: 600;
color: var(--text-main);
margin-bottom: 5px;
}
.ticket-badge .subtitle {
font-size: 13px;
color: var(--text-secondary);
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: var(--text-main);
font-weight: 500;
}
.form-group input {
width: 100%;
padding: 12px 16px;
border: 2px solid var(--surface-200);
border-radius: 10px;
font-size: 14px;
transition: all 0.3s;
}
.form-group input:focus {
outline: none;
border-color: var(--brand-purple);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.form-group small {
color: var(--text-secondary);
font-size: 12px;
margin-top: 4px;
display: block;
}
.btn-submit {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purple-dark) 100%);
color: var(--surface-50);
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.btn-submit:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}
.btn-submit:active {
transform: translateY(0);
}
.btn-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.error-message {
background: rgba(239, 68, 68, 0.08);
color: var(--error);
padding: 12px;
border-radius: 8px;
margin-bottom: 20px;
font-size: 14px;
display: none;
}
.success-message {
background: rgba(34, 197, 94, 0.08);
color: var(--success);
padding: 12px;
border-radius: 8px;
margin-bottom: 20px;
font-size: 14px;
display: none;
}
.info-box {
background: var(--surface-50);
padding: 16px;
border-radius: 10px;
margin-top: 20px;
font-size: 13px;
color: var(--text-secondary);
}
.info-box strong {
color: var(--text-main);
display: block;
margin-bottom: 8px;
}
.info-box ul {
margin-left: 20px;
}
.info-box li {
margin-bottom: 5px;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/bold/style.css">
<link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/fill/style.css">
<link rel="stylesheet" href="/css/theme.css">
</head>
<body>
<div class="ticket-container">
<div class="logo">
<h1><i class="ph-bold ph-ticket"></i> 使用门票</h1>
<p>进入超协体候选区</p>
</div>
<div class="ticket-badge">
<div class="icon"><i class="ph-bold ph-ticket"></i>️</div>
<div class="title">观察者门票</div>
<div class="subtitle">由正式成员推荐，等待AI评估</div>
</div>
<div id="errorMessage" class="error-message"></div>
<div id="successMessage" class="success-message"></div>
<form id="ticketForm">
<div class="form-group">
<label for="token">门票代码</label>
<input type="text" id="token" name="token" placeholder="ticket_xxxxxxxxxx" required>
<small>从推荐链接或邮件中获取</small>
</div>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" name="username" placeholder="2-20个字符" required minlength="2" maxlength="20">
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" id="email" name="email" placeholder="your@email.com" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" placeholder="至少6位字符" required minlength="6">
</div>
<button type="submit" class="btn-submit" id="submitBtn">
<span id="btnText">使用门票，开始观察</span>
</button>
</form>
<div class="info-box">
<strong><i class="ph-bold ph-lightbulb"></i> 成为候选者后你可以：</strong>
<ul>
<li><i class="ph-bold ph-check-circle"></i> 查看任务列表（只读）</li>
<li><i class="ph-bold ph-check-circle"></i> 浏览团队看板</li>
<li><i class="ph-bold ph-check-circle"></i> 填写你的五行画像</li>
<li><i class="ph-bold ph-hourglass"></i> 等待AI评估并发送正式邀请</li>
</ul>
</div>
</div>
<script>
const API_BASE = window.location.origin;
const ticketForm = document.getElementById('ticketForm');
const submitBtn = document.getElementById('submitBtn');
const btnText = document.getElementById('btnText');
const errorMessage = document.getElementById('errorMessage');
const successMessage = document.getElementById('successMessage');
// 从URL参数获取门票token
const urlParams = new URLSearchParams(window.location.search);
const tokenParam = urlParams.get('token');
if (tokenParam) {
document.getElementById('token').value = tokenParam;
}
ticketForm.addEventListener('submit', async (e) => {
e.preventDefault();
const token = document.getElementById('token').value;
const username = document.getElementById('username').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
// 隐藏之前的消息
errorMessage.style.display = 'none';
successMessage.style.display = 'none';
// 禁用按钮
submitBtn.disabled = true;
btnText.textContent = '注册中...';
try {
const response = await fetch(`${API_BASE}/api/ticket/redeem`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ token, email, password, username })
});
const data = await response.json();
if (data.success) {
// 保存token和用户信息
localStorage.setItem('token', data.token);
localStorage.setItem('user', JSON.stringify(data.user));
// 显示成功消息
successMessage.textContent = '<i class="ph-bold ph-check-circle"></i> 门票使用成功！正在进入候选区...';
successMessage.style.display = 'block';
// 跳转到工作台
setTimeout(() => {
window.location.href = '/dashboard.html';
}, 1500);
} else {
// 显示错误消息
errorMessage.textContent = data.message || '注册失败，请重试';
errorMessage.style.display = 'block';
// 恢复按钮
submitBtn.disabled = false;
btnText.textContent = '使用门票，开始观察';
}
} catch (error) {
console.error('注册错误:', error);
errorMessage.textContent = '网络错误，请检查连接后重试';
errorMessage.style.display = 'block';
// 恢复按钮
submitBtn.disabled = false;
btnText.textContent = '使用门票，开始观察';
}
});
</script>
</body>
</html>
