This is my start.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pepper App</title>
{% load static %}
<link rel="stylesheet" href="{% static 'css/start.css' %}">
</head>
<body>
<div class="container">
<!-- LOGIN Form -->
<div class="form login-form active" id="loginForm">
<div class="login-left"></div> <!-- Left section with background -->
<div class="login-right form-content">
<h2 class="form-title">Login</h2>
<form>
<div class="form-group">
<label for="username">Username or Email</label>
<input type="text" id="loginUsername" name="username" placeholder="Enter your username or email" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your password" required>
</div>
<button type="submit">Login</button>
</form>
<p>Don't have an account? <span onclick="toggleForms()" class="toggle-text">Register</span></p>
</div>
</div>
<!-- SIGNUP Form -->
<div class="form signup-form" id="signupForm">
<div class="signup-left form-content">
<h2 class="form-title">Sign Up</h2>
<form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="signupUsername" name="username" placeholder="Enter your username" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your password" required>
</div>
<button type="submit">Sign Up</button>
</form>
<p>Already have an account? <span onclick="toggleForms()" class="toggle-text">Login</span></p>
</div>
<div class="signup-right"></div>
</div>
</div>
<script src="{% static 'js/start.js' %}"></script>
</body>
</html>
this is my start.css:
/* Colors for reference: 9A3B3B, C08261, E2C799, F2ECBE */
body, html {
height: 100vh;
width: 100vw;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background-color: #F2ECBE;
overflow: hidden;
}
/* Default form styling */
.form {
display: none; /* Initially hidden */
width: 100%;
height: 100%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 10px;
position: absolute;
overflow: hidden;
transition: transform 0.6s ease-in-out;
}
/* Show the active form */
.form.active {
display: flex;
animation: slide-in 0.6s forwards;
}
.form-content {
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 5%;
width: 100%;
animation: fade-in 0.6s;
}
/* Left section with background */
.login-left, .signup-right {
width: 70%;
background-color: #9A3B3B;
}
/* Right section */
.login-right, .signup-left {
width: 30%;
background-color: #F2ECBE;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 5%;
}
/* Sliding Animation for Forms */
@keyframes slide-in {
0% { transform: translateX(100%); }
100% { transform: translateX(0); }
}
/* Text Animation */
@keyframes fade-out {
0% { opacity: 1; transform: translateX(0); }
100% { opacity: 0; transform: translateX(-50px); }
}
@keyframes fade-in {
0% { opacity: 0; transform: translateX(50px); }
100% { opacity: 1; transform: translateX(0); }
}
.form-title, .toggle-text {
animation: fade-in 0.6s;
}
/* Form elements styling */
.form-group {
margin-bottom: 15px;
width: 80%;
text-align: left;
}
.form-group label, button {
display: block;
font-size: 14px;
margin-bottom: 5px;
}
button {
width: 80%;
padding: 10px;
font-size: 16px;
color: #F2ECBE;
background-color: #AD5F4E;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #AD5F4E;
}
.toggle-text {
color: #AD5F4E;
cursor: pointer;
text-decoration: underline;
margin-top: 10px;
}
/* Slide in SIGNUP from the left */
@keyframes signup-slide-in-from-left {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}
/* Slide out SIGNUP to the right */
@keyframes signup-slide-out-to-right {
0% { transform: translateX(0); }
100% { transform: translateX(100%); }
}
/* Slide in LOGIN from the right */
@keyframes login-slide-in-from-right {
0% { transform: translateX(100%); }
100% { transform: translateX(0); }
}
/* Slide out LOGIN to the left */
@keyframes login-slide-out-to-left {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
/* Ensure each animation holds its final position */
.form {
animation-fill-mode: forwards;
}
and this is start.js:
function toggleForms() {
const loginForm = document.getElementById('loginForm');
const signupForm = document.getElementById('signupForm');
const container = document.querySelector('.container');
const title = document.querySelectorAll('.form-title');
const toggleText = document.querySelectorAll('.toggle-text');
if (loginForm.classList.contains('active')) {
// LOGIN slides out to the left, SIGNUP slides in from the left
loginForm.style.animation = 'login-slide-out-to-left 0.6s forwards';
signupForm.style.animation = 'signup-slide-in-from-left 0.6s forwards';
container.style.backgroundColor = '#F2ECBE'; // Green background for this transition
} else {
// SIGNUP slides out to the right, LOGIN slides in from the right
loginForm.style.animation = 'login-slide-in-from-right 0.6s forwards';
signupForm.style.animation = 'signup-slide-out-to-right 0.6s forwards';
container.style.backgroundColor = '#9A3B3B'; // Blue background for this transition
}
// Fade out text
title.forEach(el => el.style.animation = 'fade-out 0.4s forwards');
toggleText.forEach(el => el.style.animation = 'fade-out 0.4s forwards');
setTimeout(() => {
// Toggle active form
loginForm.classList.toggle('active');
signupForm.classList.toggle('active');
// Reset animations
loginForm.style.animation = '';
signupForm.style.animation = '';
// Fade text back in
title.forEach(el => el.style.animation = 'fade-in 0.6s forwards');
toggleText.forEach(el => el.style.animation = 'fade-in 0.6s forwards');
}, 400);
}
// Initialize the active form on page load
document.addEventListener("DOMContentLoaded", function() {
document.getElementById('loginForm').classList.add('active');
});
When I press Login in Sign up form, it slides to the right, I see #9A3B3B background. And Login slides from the right (outside the monitor). It is correct.
When I press Register in Login form. Login form slides to the left.
I see #F2ECBE background and then SIGNUP forms slides from the right.
But it’s not correct. I want SIGN UP slides from the left outside the monitor.
I prompted to ChatGPT several times, but it can’t solve the issue.
Help me, please, PEOPLE.