body {
font-family: Arial
sans-serif;
background-color: #f7f7f7;
margin: 0;
padding: 0;
}
#container {
max-width: 800px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0
0
0
0.1);
}
.form-group {
margin-bottom: 20px;
}
label {
font-weight: bold;
}
input[type="text"]
input[type="email"]
input[type="password"] {
width: *;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type="submit"] {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
.error {
color: red;
}
.success {
color: green;
}
// Register form
const registerForm = document.getElementById('register-form');
const registerMessage = document.getElementById('register-message');
registerForm.addEventListener('submit'
(event) => {
event.preventDefault();
const username = registerForm.elements['username'].value;
const email = registerForm.elements['email'].value;
const password = registerForm.elements['password'].value;
// Perform registration logic here
registerMessage.innerHTML = '
注册成功!
';registerForm.reset();
});
// Login form
const loginForm = document.getElementById('login-form');
const loginMessage = document.getElementById('login-message');
loginForm.addEventListener('submit'
(event) => {
event.preventDefault();
const username = loginForm.elements['login-username'].value;
const password = loginForm.elements['login-password'].value;
// Perform login logic here
loginMessage.innerHTML = '
登录成功!
';loginForm.reset();
});