195 lines
5.5 KiB
HTML
195 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Welcome to film recommendation system.</title>
|
|
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
|
|
<style>
|
|
.container { width: 300px; margin: 50px auto; }
|
|
.form-toggle { display: flex; justify-content: center; margin-bottom: 10px; }
|
|
.form { display: none; }
|
|
.form.active { display: block; }
|
|
.role-select { margin-bottom: 10px; }
|
|
</style>
|
|
<script>
|
|
function toggleForm(mode) {
|
|
const loginForm = document.getElementById("loginForm");
|
|
const registerForm = document.getElementById("registerForm");
|
|
if (mode === "login") {
|
|
loginForm.classList.add("active");
|
|
registerForm.classList.remove("active");
|
|
} else {
|
|
registerForm.classList.add("active");
|
|
loginForm.classList.remove("active");
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<h2>Welcome to film recommendation system.</h2>
|
|
{% with messages = get_flashed_messages() %}
|
|
{% if messages %}
|
|
<ul>
|
|
{% for message in messages %}
|
|
<li>{{ message }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<div class="form-toggle">
|
|
<button onclick="toggleForm('login')">Login</button>
|
|
<button onclick="toggleForm('register')">Register</button>
|
|
</div>
|
|
|
|
<!-- 登录表单 -->
|
|
<form id="loginForm" class="form active" method="post">
|
|
<input type="hidden" name="mode" value="login">
|
|
<label>Email:</label>
|
|
<input type="email" name="email" required><br>
|
|
<label>Password:</label>
|
|
<input type="password" name="password" required><br>
|
|
<button type="submit">Login</button>
|
|
</form>
|
|
|
|
<!-- 注册表单 -->
|
|
<form id="registerForm" class="form" method="post">
|
|
<input type="hidden" name="mode" value="register">
|
|
<label>Email:</label>
|
|
<input type="email" name="email" required><br>
|
|
<label>Password:</label>
|
|
<input type="password" name="password" required><br>
|
|
<label>Nickname:</label>
|
|
<input type="text" name="nickname" required><br>
|
|
<label>User Role:</label>
|
|
<select name="user_type" class="role-select" required>
|
|
<option value="U">Normal User</option>
|
|
<option value="P">Producer</option>
|
|
</select>
|
|
<button type="submit">Register</button>
|
|
</form>
|
|
</div>
|
|
|
|
</body>
|
|
<style>
|
|
/* 设置页面背景图片 */
|
|
body {
|
|
background-image: url("static/bg.webp");
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
font-family: Arial, sans-serif;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
margin: 0;
|
|
}
|
|
/* 设置半透明的容器，并在页面垂直居中 */
|
|
.container {
|
|
width: 550px;
|
|
padding: 20px;
|
|
background-color: rgba(255, 255, 255, 0.8); /* 设置半透明 */
|
|
border: 1px solid rgba(221, 221, 221, 0.6); /* 透明边框 */
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
text-align: center;
|
|
}
|
|
|
|
/* 标题样式 */
|
|
h2 {
|
|
color: #333;
|
|
margin-bottom: 20px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
/* 按钮容器 */
|
|
.form-toggle {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* 按钮样式 */
|
|
.form-toggle button {
|
|
background-color: rgba(0, 123, 255, 0.8); /* 半透明 */
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
transition: background-color 0.3s;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.form-toggle button:hover {
|
|
background-color: rgba(0, 86, 179, 0.8); /* 半透明悬停效果 */
|
|
}
|
|
|
|
.form-toggle button:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* 标签文本样式 */
|
|
label {
|
|
display: block;
|
|
text-align: left;
|
|
font-weight: bold;
|
|
margin: 10px 0 5px;
|
|
color: #555;
|
|
}
|
|
|
|
/* 输入框和下拉列表样式 */
|
|
input[type="email"],
|
|
input[type="password"],
|
|
input[type="text"],
|
|
select {
|
|
width: 100%;
|
|
padding: 10px;
|
|
margin: 5px 0 15px;
|
|
border: 1px solid rgba(204, 204, 204, 0.8); /* 半透明边框 */
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
|
|
color: #333;
|
|
}
|
|
|
|
/* 提交按钮样式 */
|
|
button[type="submit"] {
|
|
background-color: rgba(0, 123, 255, 0.8); /* 半透明背景 */
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
width: 100%;
|
|
font-size: 16px;
|
|
}
|
|
|
|
button[type="submit"]:hover {
|
|
background-color: rgba(0, 86, 179, 0.8); /* 半透明悬停效果 */
|
|
}
|
|
|
|
/* 错误信息列表样式 */
|
|
ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
color: #d9534f;
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
/* 表单样式 */
|
|
.form {
|
|
text-align: left;
|
|
}
|
|
|
|
</style>
|
|
</html>
|