static/register.html

<!DOCTYPE html>
<html> 
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>注册 - 一只猫的小家</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: "Microsoft Yahei", sans-serif;
		}

		body {
			background: linear-gradient(to bottom right, #fde2e4, #e2dafa, #d7f0e6);
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 2rem;
			position: relative; /* 让绝对定位的按钮参考body */
		}

		/* 置顶的注册提交按钮（如果是想把提交按钮放顶部） */
		.top-register-btn {
			position: fixed; /* 固定在顶部 */
			top: 1rem;
			left: 50%;
			transform: translateX(-50%);
			width: 90%;
			max-width: 400px;
			padding: 0.9rem;
			border-radius: 8px;
			border: none;
			background: linear-gradient(135deg, #f8bbd0 0%, #c1b3f0 100%);
			color: white;
			font-size: 1rem;
			cursor: pointer;
			transition: all 0.3s ease;
			z-index: 9999; /* 层级最顶层 */
		}

		.top-register-btn:hover {
			transform: translateX(-50%) translateY(-2px);
			box-shadow: 0 4px 12px rgba(248, 187, 208, 0.3);
		}

		.register-container {
			width: 90%;
			max-width: 400px;
			background: rgba(255, 255, 255, 0.92);
			border-radius: 16px;
			box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
			padding: 2.5rem;
			margin-top: 6rem; /* 给顶部按钮留空间 */
		}

		.title {
			font-size: 1.8rem;
			color: #2d3748;
			text-align: center;
			margin-bottom: 2rem;
			position: relative;
		}

		.title::after {
			content: "";
			display: block;
			width: 60px;
			height: 3px;
			background-color: #e2a8c0;
			margin: 0.8rem auto 0;
			border-radius: 3px;
		}

		.form-group {
			margin-bottom: 1.5rem;
		}

		.form-group label {
			display: block;
			color: #4a5568;
			margin-bottom: 0.5rem;
			font-size: 0.95rem;
		}

		.form-group input {
			width: 100%;
			padding: 0.9rem 1rem;
			border: 1px solid #e2e8f0;
			border-radius: 8px;
			font-size: 1rem;
			background: rgba(255, 255, 255, 0.8);
		}

		.form-group input:focus {
			outline: none;
			border-color: #e2a8c0;
			box-shadow: 0 0 0 3px rgba(226, 168, 192, 0.1);
		}

		.link-group {
			text-align: center;
			margin-top: 1.5rem;
			font-size: 0.9rem;
		}

		.link-group a {
			color: #e2a8c0;
			text-decoration: none;
		}

		.link-group a:hover {
			text-decoration: underline;
		}
	</style>
</head>
<body>
	<!-- 置顶的注册按钮（层级最顶） -->
	<button type="button" class="top-register-btn" onclick="document.getElementById('registerForm').submit()">注册</button>

	<div class="register-container">
		<h2 class="title">用户注册</h2>
		<form id="registerForm">
			<div class="form-group">
				<label for="regUsername">用户名</label>
				<input type="text" id="regUsername" placeholder="请设置用户名" required>
			</div>
			<div class="form-group">
				<label for="regPassword">密码</label>
				<input type="password" id="regPassword" placeholder="请设置密码（至少6位）" required>
			</div>
			<div class="form-group">
				<label for="regConfirmPwd">确认密码</label>
				<input type="password" id="regConfirmPwd" placeholder="请确认密码" required>
			</div>
		</form>
		<div class="link-group">
			<p>已有账号？<a href="login.html">立即登录</a></p>
			<p><a href="index.html">返回主页</a></p>
		</div>
	</div>

	<script>
		// 注册表单提交逻辑
		document.getElementById('registerForm').addEventListener('submit', (e) => {
			e.preventDefault();
			const username = document.getElementById('regUsername').value;
			const password = document.getElementById('regPassword').value;
			const confirmPwd = document.getElementById('regConfirmPwd').value;
			
			// 简单验证
			if (!username || password.length < 6) {
				alert("用户名不能为空，密码至少6位！");
				return;
			}
			if (password !== confirmPwd) {
				alert("两次输入的密码不一致！");
				return;
			}
			
			// 模拟注册成功（实际项目需对接后端）
			alert(`注册成功！用户名：${username}，请登录`);
			window.location.href = "login.html";
		});
	</script>
</body>
</html>