hubian
7f8fbc9605
功能模块: - 技术交流: 发帖、评论回复、点赞收藏、标签分类 - 工具分享: 创建主题、子主题分支、问题追问、关注功能 - 用户系统: 用户名+邮箱(必填)+手机(可选)+密码确认 页面: - 首页: 帖子列表、热门标签、工具分享主题 - 登录/注册页 - 发帖页 - 帖子详情页 - 主题详情页 - 用户主页 技术栈: - Flask + Tailwind CSS - JSON文件存储 - JWT认证 - 响应式设计 端口: 19004
124 lines
5.2 KiB
HTML
124 lines
5.2 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>技术论坛 - 登录</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
|
|
<style>
|
|
.gradient-bg { background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen">
|
|
<div class="min-h-screen flex">
|
|
<!-- 左侧装饰 -->
|
|
<div class="hidden lg:flex lg:w-1/2 gradient-bg items-center justify-center p-12">
|
|
<div class="text-white max-w-md">
|
|
<h1 class="text-4xl font-bold mb-6">👨💻 技术论坛</h1>
|
|
<p class="text-xl mb-4">技术交流 & 工具分享</p>
|
|
<ul class="space-y-3 text-white/90">
|
|
<li class="flex items-center gap-2">
|
|
<i class="ri-checkbox-circle-line"></i>
|
|
技术交流讨论
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<i class="ri-checkbox-circle-line"></i>
|
|
工具框架分享
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<i class="ri-checkbox-circle-line"></i>
|
|
问题追问解答
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧表单 -->
|
|
<div class="w-full lg:w-1/2 flex items-center justify-center p-8">
|
|
<div class="w-full max-w-md">
|
|
<div class="text-center mb-8">
|
|
<h2 class="text-2xl font-bold text-gray-800">欢迎回来</h2>
|
|
<p class="text-gray-500 mt-2">登录您的账号</p>
|
|
</div>
|
|
|
|
<form id="loginForm" class="space-y-5">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">用户名/邮箱</label>
|
|
<div class="relative">
|
|
<i class="ri-user-line absolute left-3 top-3 text-gray-400"></i>
|
|
<input type="text" id="username" placeholder="请输入用户名或邮箱"
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
|
|
<div class="relative">
|
|
<i class="ri-lock-line absolute left-3 top-3 text-gray-400"></i>
|
|
<input type="password" id="password" placeholder="请输入密码"
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
|
</div>
|
|
</div>
|
|
<button type="submit"
|
|
class="w-full py-3 gradient-bg text-white rounded-lg font-medium hover:opacity-90 transition-opacity">
|
|
登录
|
|
</button>
|
|
</form>
|
|
|
|
<div class="mt-6 text-center">
|
|
<p class="text-gray-500">
|
|
还没有账号？
|
|
<a href="/register" class="text-blue-500 hover:text-blue-600 font-medium">立即注册</a>
|
|
</p>
|
|
</div>
|
|
|
|
<div id="errorMsg" class="mt-4 p-3 bg-red-50 text-red-500 rounded-lg text-sm hidden"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 检查是否已登录
|
|
if (localStorage.getItem('token')) {
|
|
window.location.href = '/';
|
|
}
|
|
|
|
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const username = document.getElementById('username').value.trim();
|
|
const password = document.getElementById('password').value;
|
|
|
|
if (!username || !password) {
|
|
showError('请填写用户名和密码');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const res = await fetch('/api/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, password })
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (data.success) {
|
|
localStorage.setItem('token', data.token);
|
|
localStorage.setItem('user', JSON.stringify(data.user));
|
|
window.location.href = '/';
|
|
} else {
|
|
showError(data.error);
|
|
}
|
|
} catch (err) {
|
|
showError('网络错误，请重试');
|
|
}
|
|
});
|
|
|
|
function showError(msg) {
|
|
const el = document.getElementById('errorMsg');
|
|
el.textContent = msg;
|
|
el.classList.remove('hidden');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |