Initial commit: 投注游戏平台初始化
This commit is contained in:
Executable
+175
@@ -0,0 +1,175 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>后台管理登录</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
|
||||
<!-- 配置Tailwind自定义颜色 -->
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#3b82f6',
|
||||
'primary-light': '#93c5fd',
|
||||
'primary-dark': '#2563eb',
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-900 via-slate-950 to-slate-900 p-4">
|
||||
<!-- 成功消息容器 -->
|
||||
<div id="successMessage" class="fixed top-4 right-4 px-6 py-3 rounded-lg shadow shadow-lg flex items-center z-50 transition-all duration-300 transform translate-x-full bg-primary-light border border-primary/20 text-primary-dark">
|
||||
<i class="fas fa-check-circle mr-2"></i>
|
||||
<span id="successText"></span>
|
||||
<button onclick="hideMessages()" class="ml-4 text-gray-500 hover:text-gray-700">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 错误消息容器 -->
|
||||
<div id="errorMessage" class="fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg flex items-center z-50 transition-all duration-300 transform translate-x-full bg-red-50 border border-red-200 text-red-700">
|
||||
<i class="fas fa-exclamation-circle mr-2"></i>
|
||||
<span id="errorText"></span>
|
||||
<button onclick="hideMessages()" class="ml-4 text-gray-500 hover:text-gray-700">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-md">
|
||||
<div class="auth-card bg-white/95 backdrop-blur rounded-2xl overflow-hidden w-full border border-slate-200 shadow-xl shadow-slate-900/20">
|
||||
<div class="px-8 pt-8 pb-4">
|
||||
<div class="flex flex-col items-center space-y-4">
|
||||
<a href="#" class="flex items-center text-primary font-bold text-2xl">
|
||||
<img src="/Static/img/logo.png" class="w-11 h-11 mr-3 rounded-xl shadow-sm" alt="Admin Logo">
|
||||
<span class="text-slate-800">管理后台</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-8 pb-8">
|
||||
<?php if (!empty($error)): ?>
|
||||
<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-6 relative" role="alert">
|
||||
<i class="fas fa-exclamation-circle mr-2"></i>
|
||||
<span class="block sm:inline"><?=htmlspecialchars($error)?></span>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<form id="loginForm" method="post" action="?s=login" class="space-y-6">
|
||||
<div class="space-y-1">
|
||||
<label for="username_or_email" class="block text-sm font-medium text-gray-700 mb-1">用户名或邮箱</label>
|
||||
<input type="text" id="username_or_email" name="username_or_email" required
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-colors duration-300"
|
||||
placeholder="请输入用户名或邮箱">
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
|
||||
<div class="relative">
|
||||
<input type="password" id="password" name="password" required
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-colors duration-300"
|
||||
placeholder="请输入您的密码">
|
||||
<button type="button" id="togglePassword"
|
||||
class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-primary transition-colors duration-300">
|
||||
<i class="far fa-eye"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs text-slate-400">
|
||||
<span>为保护数据安全,请勿在公共设备上勾选浏览器保存密码</span>
|
||||
</div>
|
||||
<button type="submit"
|
||||
class="w-full flex justify-center py-2.5 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-300">
|
||||
登录
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-6 text-center text-[11px] text-slate-400">
|
||||
© <?= date('Y') ?> 管理系统后台 · Internal Use Only
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 显示消息提示
|
||||
function showMessage(text, type = 'success') {
|
||||
// 隐藏所有消息
|
||||
hideMessages();
|
||||
|
||||
// 显示对应类型的消息
|
||||
const messageElement = document.getElementById(type + 'Message');
|
||||
const textElement = document.getElementById(type + 'Text');
|
||||
|
||||
textElement.textContent = text;
|
||||
messageElement.classList.remove('translate-x-full');
|
||||
|
||||
// 3秒后自动隐藏
|
||||
setTimeout(hideMessages, 3000);
|
||||
}
|
||||
|
||||
// 隐藏所有消息
|
||||
function hideMessages() {
|
||||
document.getElementById('successMessage').classList.add('translate-x-full');
|
||||
document.getElementById('errorMessage').classList.add('translate-x-full');
|
||||
}
|
||||
|
||||
// 密码可见性切换
|
||||
document.getElementById('togglePassword').addEventListener('click', function() {
|
||||
const passwordInput = document.getElementById('password');
|
||||
const icon = this.querySelector('i');
|
||||
|
||||
if (passwordInput.type === 'password') {
|
||||
passwordInput.type = 'text';
|
||||
icon.classList.remove('far', 'fa-eye');
|
||||
icon.classList.add('far', 'fa-eye-slash');
|
||||
} else {
|
||||
passwordInput.type = 'password';
|
||||
icon.classList.remove('far', 'fa-eye-slash');
|
||||
icon.classList.add('far', 'fa-eye');
|
||||
}
|
||||
});
|
||||
// 登录表单处理
|
||||
document.getElementById('loginForm').addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = {
|
||||
username_or_email: document.getElementById('username_or_email').value,
|
||||
password: document.getElementById('password').value,
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch('/admin/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(formData),
|
||||
credentials: 'include'
|
||||
});
|
||||
|
||||
// 直接解析JSON响应(与后端JSON格式匹配)
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
showMessage(result.message);
|
||||
// 使用后端返回的跳转地址
|
||||
if (result.redirect) {
|
||||
setTimeout(() => {
|
||||
window.location.href = result.redirect;
|
||||
}, 1500);
|
||||
}
|
||||
} else {
|
||||
showMessage(result.message || '登录失败,请检查账号密码', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('登录请求失败:', error);
|
||||
showMessage('网络错误,登录失败', 'error');
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user