hubian
7f8fbc9605
功能模块: - 技术交流: 发帖、评论回复、点赞收藏、标签分类 - 工具分享: 创建主题、子主题分支、问题追问、关注功能 - 用户系统: 用户名+邮箱(必填)+手机(可选)+密码确认 页面: - 首页: 帖子列表、热门标签、工具分享主题 - 登录/注册页 - 发帖页 - 帖子详情页 - 主题详情页 - 用户主页 技术栈: - Flask + Tailwind CSS - JSON文件存储 - JWT认证 - 响应式设计 端口: 19004
171 lines
8.1 KiB
HTML
171 lines
8.1 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>
|
|
<div class="space-y-4 mt-8">
|
|
<div class="flex items-start gap-3">
|
|
<i class="ri-code-s-slash-line text-2xl"></i>
|
|
<div>
|
|
<h3 class="font-medium">技术交流</h3>
|
|
<p class="text-sm text-white/80">与同行讨论技术问题</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<i class="ri-tools-line text-2xl"></i>
|
|
<div>
|
|
<h3 class="font-medium">工具分享</h3>
|
|
<p class="text-sm text-white/80">分享你使用的工具和框架</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<i class="ri-team-line text-2xl"></i>
|
|
<div>
|
|
<h3 class="font-medium">社区互动</h3>
|
|
<p class="text-sm text-white/80">互相帮助，共同成长</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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="registerForm" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
|
用户名 <span class="text-red-500">*</span>
|
|
</label>
|
|
<div class="relative">
|
|
<i class="ri-user-line absolute left-3 top-3 text-gray-400"></i>
|
|
<input type="text" id="username" placeholder="至少2个字符"
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
|
邮箱 <span class="text-red-500">*</span>
|
|
</label>
|
|
<div class="relative">
|
|
<i class="ri-mail-line absolute left-3 top-3 text-gray-400"></i>
|
|
<input type="email" id="email" placeholder="your@email.com"
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
|
手机号 <span class="text-gray-400">(可选)</span>
|
|
</label>
|
|
<div class="relative">
|
|
<i class="ri-phone-line absolute left-3 top-3 text-gray-400"></i>
|
|
<input type="tel" id="phone" placeholder="选填"
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
|
密码 <span class="text-red-500">*</span>
|
|
</label>
|
|
<div class="relative">
|
|
<i class="ri-lock-line absolute left-3 top-3 text-gray-400"></i>
|
|
<input type="password" id="password" placeholder="至少6个字符"
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
|
确认密码 <span class="text-red-500">*</span>
|
|
</label>
|
|
<div class="relative">
|
|
<i class="ri-lock-2-line absolute left-3 top-3 text-gray-400"></i>
|
|
<input type="password" id="confirmPassword" placeholder="再次输入密码"
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
</div>
|
|
<button type="submit"
|
|
class="w-full py-3 gradient-bg text-white rounded-lg font-medium hover:opacity-90 transition-opacity mt-6">
|
|
注册
|
|
</button>
|
|
</form>
|
|
|
|
<div class="mt-6 text-center">
|
|
<p class="text-gray-500">
|
|
已有账号？
|
|
<a href="/login" 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('registerForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const username = document.getElementById('username').value.trim();
|
|
const email = document.getElementById('email').value.trim();
|
|
const phone = document.getElementById('phone').value.trim();
|
|
const password = document.getElementById('password').value;
|
|
const confirm_password = document.getElementById('confirmPassword').value;
|
|
|
|
// 验证
|
|
if (!username || !email || !password || !confirm_password) {
|
|
showError('请填写必填项');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const res = await fetch('/api/register', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, email, phone, password, confirm_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> |