368 lines
20 KiB
HTML
368 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.7</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>
|
||
<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://www.gvsds.com/bind.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. 发起fetch请求
|
||
const response = await fetch('/API/UserSetup.api', {
|
||
method: 'POST', // 根据接口要求调整请求方法（GET/POST）
|
||
headers: {
|
||
'Content-Type': 'application/json', // 假设接口接收JSON格式
|
||
// 如需其他请求头可在此添加（如Authorization）
|
||
},
|
||
body: JSON.stringify({
|
||
PlayerName: PlayerName,
|
||
PlayerPasswd: PlayerPasswd
|
||
}),
|
||
credentials: 'include' // 如需携带Cookie（如登录态），添加此配置
|
||
});
|
||
|
||
// 4. 处理响应（确保响应为JSON格式）
|
||
if (!response.ok) {
|
||
throw new Error(`请求失败：${response.status} ${response.statusText}`);
|
||
}
|
||
const result = await response.json();
|
||
|
||
// 5. 根据返回状态处理
|
||
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) {
|
||
// 6. 捕获网络错误或其他异常
|
||
errorContainer.innerHTML = `<p class="error-msg"><i class="fa fa-exclamation-circle mr-1"></i>网络错误：${error.message}</p>`;
|
||
console.error('激活请求异常：', error); // 控制台打印错误，便于调试
|
||
} finally {
|
||
// 7. 无论成功/失败，都重新启用按钮并恢复文本
|
||
activateBtn.disabled = false;
|
||
activateBtn.innerHTML = '<span>激活</span><i class="fa fa-arrow-right ml-2"></i>';
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |