384 lines
20 KiB
HTML
384 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>绑定账户 - 枢机协律 CreateE=mc²</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
dark: '#0f172a',
|
||
darker: '#020617',
|
||
primary: '#1e40af',
|
||
secondary: '#3b82f6',
|
||
accent: '#60a5fa',
|
||
success: '#10b981',
|
||
},
|
||
fontFamily: {
|
||
inter: ['Inter', 'system-ui', 'sans-serif'],
|
||
},
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style type="text/tailwindcss">
|
||
@layer utilities {
|
||
.text-shadow {
|
||
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
|
||
}
|
||
.bg-glass {
|
||
background: rgba(15, 23, 42, 0.7);
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
.animate-float {
|
||
animation: float 6s ease-in-out infinite;
|
||
}
|
||
@keyframes float {
|
||
0% { transform: translateY(0px); }
|
||
50% { transform: translateY(-15px); }
|
||
100% { transform: translateY(0px); }
|
||
}
|
||
.card-hover {
|
||
transition: all 0.3s ease;
|
||
}
|
||
.card-hover:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 25px -5px rgba(96, 165, 250, 0.1), 0 8px 10px -6px rgba(96, 165, 250, 0.1);
|
||
}
|
||
.input-focus {
|
||
@apply focus:border-accent focus:ring-1 focus:ring-accent focus:outline-none;
|
||
}
|
||
.btn-primary {
|
||
@apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded transition-all duration-200 transform hover:scale-[1.02] active:scale-[0.98];
|
||
}
|
||
.btn-primary:disabled {
|
||
@apply bg-primary/60 cursor-not-allowed hover:scale-100 active:scale-100;
|
||
}
|
||
.btn-secondary {
|
||
@apply bg-white/10 hover:bg-white/20 text-white font-medium py-2 px-4 rounded transition-all duration-200;
|
||
}
|
||
.error-msg {
|
||
@apply text-red-400 text-sm mt-1 text-center;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gradient-to-br from-darker to-dark text-gray-200 font-inter min-h-screen flex flex-col">
|
||
<!-- 导航栏 -->
|
||
<header class="sticky top-0 z-50 bg-glass border-b border-primary/30">
|
||
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
|
||
<div class="flex items-center space-x-2">
|
||
<i class="fa fa-cogs text-accent text-2xl"></i>
|
||
<h1 class="text-xl md:text-2xl font-bold text-white">
|
||
枢机协律 <span class="text-accent">CreateE=mc²</span>
|
||
</h1>
|
||
</div>
|
||
|
||
<!-- 桌面版导航 -->
|
||
<div class="hidden md:flex items-center space-x-6">
|
||
<nav class="flex space-x-6">
|
||
<a href="index.html#about" class="hover:text-accent transition-colors duration-200">关于服务器</a>
|
||
<a href="index.html#connect" class="hover:text-accent transition-colors duration-200">连接信息</a>
|
||
<a href="index.html#mods" class="hover:text-accent transition-colors duration-200">服务器模组</a>
|
||
<a href="index.html#target" class="hover:text-accent transition-colors duration-200">靶机信息</a>
|
||
<a href="https://3crb.gvsds.com" target="_blank" class="hover:text-accent transition-colors duration-200">3CRB 银行</a>
|
||
<a href="https://3crb.gvsds.com/PriceList.html" target="_blank" class="hover:text-accent transition-colors duration-200">物资价格表</a>
|
||
<a href="https://mc.gvsds.com:8100" target="_blank" class="hover:text-accent transition-colors duration-200 flex items-center">
|
||
<i class="fa fa-map-o mr-1"></i> 服务器地图
|
||
</a>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- 移动版导航 -->
|
||
<div class="flex items-center space-x-4 md:hidden">
|
||
<button id="mobile-menu-button" class="text-white text-xl focus:outline-none">
|
||
<i class="fa fa-bars"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 移动菜单（默认隐藏） -->
|
||
<div id="mobile-menu" class="hidden absolute top-16 left-0 right-0 bg-gray-800 z-50 md:hidden transition-all duration-300 ease-in-out transform">
|
||
<div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
|
||
<a href="index.html#about" class="hover:text-accent transition-colors duration-200 py-2">关于服务器</a>
|
||
<a href="index.html#connect" class="hover:text-accent transition-colors duration-200 py-2">连接信息</a>
|
||
<a href="index.html#mods" class="hover:text-accent transition-colors duration-200 py-2">服务器模组</a>
|
||
<a href="index.html#target" class="hover:text-accent transition-colors duration-200 py-2">靶机信息</a>
|
||
<a href="https://3crb.gvsds.com" target="_blank" class="hover:text-accent transition-colors duration-200 py-2">3CRB 银行</a>
|
||
<a href="https://3crb.gvsds.com/PriceList.html" target="_blank" class="hover:text-accent transition-colors duration-200 py-2">物资价格表</a>
|
||
<a href="https://mc.gvsds.com:8100" target="_blank" class="hover:text-accent transition-colors duration-200 py-2 flex items-center">
|
||
<i class="fa fa-map-o mr-2"></i> 服务器地图
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 移动菜单切换逻辑
|
||
document.getElementById('mobile-menu-button').addEventListener('click', function() {
|
||
const menu = document.getElementById('mobile-menu');
|
||
menu.classList.toggle('hidden');
|
||
});
|
||
|
||
// 点击菜单外区域关闭菜单
|
||
document.addEventListener('click', function(event) {
|
||
const menu = document.getElementById('mobile-menu');
|
||
const button = document.getElementById('mobile-menu-button');
|
||
|
||
if (!menu.contains(event.target) && event.target !== button && !button.contains(event.target)) {
|
||
menu.classList.add('hidden');
|
||
}
|
||
});
|
||
</script>
|
||
</header>
|
||
|
||
<!-- 主要内容区 -->
|
||
<main class="flex-grow container mx-auto px-4 py-12 md:py-20 flex flex-col md:flex-row items-center justify-center gap-8 md:gap-16">
|
||
<!-- 左侧装饰/信息区 -->
|
||
<div class="hidden md:block w-full md:w-1/2 max-w-md animate-float">
|
||
<div class="relative">
|
||
<img src="/assets/mien_notresize/10.png" alt="Minecraft服务器游戏场景" class="rounded-lg shadow-2xl">
|
||
<div class="absolute -bottom-6 -right-6 bg-primary/90 p-4 rounded-lg shadow-lg">
|
||
<p class="font-bold text-white">SERVER</p>
|
||
<p class="text-2xl font-bold text-white" id="player-count">1.21.10</p>
|
||
</div>
|
||
</div>
|
||
<div class="mt-12 space-y-4">
|
||
<div class="flex items-start space-x-3">
|
||
<div class="bg-accent/20 p-2 rounded-full mt-1">
|
||
<i class="fa fa-shield text-accent"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-white">安全保障</h3>
|
||
<p class="text-gray-400">数据加密传输，保证账号安全</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start space-x-3">
|
||
<div class="bg-accent/20 p-2 rounded-full mt-1">
|
||
<i class="fa fa-clock-o text-accent"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-white">稳定运行</h3>
|
||
<p class="text-gray-400">99% 的服务器在线率，让您随时畅玩无阻</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start space-x-3">
|
||
<div class="bg-accent/20 p-2 rounded-full mt-1">
|
||
<i class="fa fa-users text-accent"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-white">活跃社区</h3>
|
||
<p class="text-gray-400">加入我们的社区，结识更多游戏伙伴</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧登录表单 -->
|
||
<div class="w-full max-w-md">
|
||
<div class="bg-glass border border-primary/30 rounded-xl p-6 md:p-8 shadow-xl">
|
||
<div class="text-center mb-8">
|
||
<h2 class="text-2xl md:text-3xl font-bold text-white mb-2">账户绑定</h2>
|
||
<p class="text-gray-400">（使用你已经注册的工作室账户并保持你的我的世界账户在线，我们将会尝试向你的账户发送验证码，然后允许你绑定）</p>
|
||
</div>
|
||
|
||
<!-- 登录表单 -->
|
||
<form id="login-form" class="space-y-5">
|
||
<!-- 用户名/邮箱输入 -->
|
||
<div>
|
||
<label for="username" class="block text-sm font-medium text-gray-300 mb-1">游戏名</label>
|
||
<div class="relative">
|
||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||
<i class="fa fa-user text-gray-400"></i>
|
||
</div>
|
||
<input type="text" id="username" name="username"
|
||
class="block w-full pl-10 pr-3 py-2.5 bg-dark border border-gray-700 rounded-lg input-focus transition-all duration-200"
|
||
placeholder="请输入游戏账户名" required>
|
||
</div>
|
||
</div>
|
||
<!-- 密码输入 -->
|
||
<div>
|
||
<div class="flex justify-between items-center mb-1">
|
||
<label for="password" class="block text-sm font-medium text-gray-300">游戏密码</label>
|
||
</div>
|
||
<div class="relative">
|
||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||
<i class="fa fa-lock text-gray-400"></i>
|
||
</div>
|
||
<input type="password" id="password" name="password"
|
||
class="block w-full pl-10 pr-10 py-2.5 bg-dark border border-gray-700 rounded-lg input-focus transition-all duration-200"
|
||
placeholder="请输入游戏密码" required>
|
||
<button type="button" id="toggle-password" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-200 transition-colors">
|
||
<i class="fa fa-eye-slash"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 错误提示容器 -->
|
||
<div id="error-container"></div>
|
||
|
||
<!-- 绑定按钮（添加id用于控制禁用状态） -->
|
||
<button type="submit" id="activate-btn" class="w-full btn-primary flex items-center justify-center">
|
||
<span>绑定</span>
|
||
<i class="fa fa-arrow-right ml-2"></i>
|
||
</button>
|
||
|
||
<!-- 分隔线 -->
|
||
<div class="relative flex items-center">
|
||
<div class="flex-grow border-t border-gray-700"></div>
|
||
<span class="flex-shrink mx-4 text-gray-500 text-sm">或者</span>
|
||
<div class="flex-grow border-t border-gray-700"></div>
|
||
</div>
|
||
<a type="button" class="w-full btn-secondary flex items-center justify-center" onclick="window.location.href='https://www.gvsds.com/login.html'"><span>已有账户？登录</span></a>
|
||
<a type="button" class="w-full btn-secondary flex items-center justify-center" onclick="window.location.href='https://www.gvsds.com/enroll.html'"><span>没有账户？注册</span></a>
|
||
<a type="button" class="w-full btn-secondary flex items-center justify-center" onclick="window.location.href='https://mc.gvsds.com/setup.html'"><span>没有账户？使用你的游戏账号快速注册</span></a>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- 移动端额外信息 -->
|
||
<div class="mt-8 md:hidden space-y-4">
|
||
<div class="flex items-start space-x-3">
|
||
<div class="bg-accent/20 p-2 rounded-full mt-1">
|
||
<i class="fa fa-shield text-accent"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-white">安全保障</h3>
|
||
<p class="text-gray-400">所有数据传输均经过加密处理</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start space-x-3">
|
||
<div class="bg-accent/20 p-2 rounded-full mt-1">
|
||
<i class="fa fa-clock-o text-accent"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-white">稳定运行</h3>
|
||
<p class="text-gray-400">99.9%的服务器在线率</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="bg-darker border-t border-primary/30 py-8">
|
||
<div class="container mx-auto px-4">
|
||
<div class="flex flex-col md:flex-row justify-between items-center">
|
||
<div class="mb-6 md:mb-0">
|
||
<div class="flex items-center space-x-2">
|
||
<i class="fa fa-cogs text-accent text-xl"></i>
|
||
<h2 class="text-lg font-bold text-white">
|
||
枢机协律 <span class="text-accent">CreateE=mc²</span>
|
||
</h2>
|
||
</div>
|
||
<p class="text-gray-400 text-sm mt-2">争取来带您最好的游戏体验</p>
|
||
</div>
|
||
</div>
|
||
<div class="border-t border-gray-800 mt-6 pt-6 text-center text-gray-500 text-sm">
|
||
<p>© 2023 枢机协律 CreateE=mc² 服务器. 保留所有权利.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- JavaScript -->
|
||
<script>
|
||
// 密码显示/隐藏切换
|
||
const togglePassword = document.getElementById('toggle-password');
|
||
const passwordInput = document.getElementById('password');
|
||
|
||
togglePassword.addEventListener('click', function() {
|
||
// 切换类型
|
||
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
|
||
passwordInput.setAttribute('type', type);
|
||
|
||
// 切换图标
|
||
this.querySelector('i').classList.toggle('fa-eye');
|
||
this.querySelector('i').classList.toggle('fa-eye-slash');
|
||
});
|
||
|
||
// 登录表单提交处理
|
||
const loginForm = document.getElementById('login-form');
|
||
const activateBtn = document.getElementById('activate-btn'); // 绑定按钮元素
|
||
const errorContainer = document.getElementById('error-container'); // 错误提示容器
|
||
|
||
loginForm.addEventListener('submit', async function(e) {
|
||
e.preventDefault();
|
||
const PlayerName = document.getElementById('username').value;
|
||
const PlayerPasswd = document.getElementById('password').value;
|
||
|
||
// 1. 清空之前的错误提示
|
||
errorContainer.innerHTML = '';
|
||
// 2. 禁用绑定按钮，防止重复提交
|
||
activateBtn.disabled = true;
|
||
// 修改按钮文本为"绑定中..."并添加加载图标
|
||
activateBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i><span>绑定中...</span>';
|
||
|
||
try {
|
||
// 3. 先刷新 AccessToken Cookie（避免 access token 过期导致 401）
|
||
// RefreshToken Cookie 跨子域共享（domain=.gvsds.com），AllowAny 权限
|
||
try {
|
||
await fetch('/Auth/RefreshToken', {
|
||
method: 'POST',
|
||
credentials: 'include',
|
||
});
|
||
} catch (refreshErr) {
|
||
// 刷新失败不阻断流程，继续尝试绑定（后端会返回 401）
|
||
console.warn('刷新 AccessToken 失败：', refreshErr);
|
||
}
|
||
|
||
// 4. 发起绑定请求
|
||
const response = await fetch('/API/UserBind.api', {
|
||
method: 'POST', // 根据接口要求调整请求方法（GET/POST）
|
||
headers: {
|
||
'Content-Type': 'application/json', // 假设接口接收JSON格式
|
||
// 如需其他请求头可在此添加（如Authorization）
|
||
},
|
||
body: JSON.stringify({
|
||
PlayerName: PlayerName,
|
||
PlayerPasswd: PlayerPasswd
|
||
}),
|
||
credentials: 'include' // 如需携带Cookie（如登录态），添加此配置
|
||
});
|
||
|
||
// 5. 处理响应（确保响应为JSON格式）
|
||
if (!response.ok) {
|
||
// 401 时跳转登录页（refresh token 也已失效）
|
||
if (response.status === 401) {
|
||
window.location.href = 'https://www.gvsds.com/login.html?return=' + encodeURIComponent(window.location.href);
|
||
return;
|
||
}
|
||
throw new Error(`请求失败：${response.status} ${response.statusText}`);
|
||
}
|
||
const result = await response.json();
|
||
|
||
// 6. 根据返回状态处理
|
||
if (result.status === 0) {
|
||
// 成功：跳转到redirect指定的地址
|
||
if (result.redirect && typeof result.redirect === 'string') {
|
||
window.location.href = result.redirect;
|
||
} else {
|
||
throw new Error('绑定成功，但未获取到跳转地址');
|
||
}
|
||
} else if (result.status === 1) {
|
||
// 失败：显示msg中的错误信息
|
||
errorContainer.innerHTML = `<p class="error-msg"><i class="fa fa-exclamation-circle mr-1"></i>${result.msg || '绑定失败，请稍后重试'}</p>`;
|
||
} else {
|
||
// 未知状态：显示默认错误
|
||
errorContainer.innerHTML = '<p class="error-msg"><i class="fa fa-exclamation-circle mr-1"></i>未知响应状态，请联系管理员</p>';
|
||
}
|
||
|
||
} catch (error) {
|
||
// 7. 捕获网络错误或其他异常
|
||
errorContainer.innerHTML = `<p class="error-msg"><i class="fa fa-exclamation-circle mr-1"></i>网络错误：${error.message}</p>`;
|
||
console.error('绑定请求异常：', error); // 控制台打印错误，便于调试
|
||
} finally {
|
||
// 8. 无论成功/失败，都重新启用按钮并恢复文本
|
||
activateBtn.disabled = false;
|
||
activateBtn.innerHTML = '<span>绑定</span><i class="fa fa-arrow-right ml-2"></i>';
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |