Как сделать форму регистрации стационарной при скользящей регистрации / регистрации при нажатии кнопки регистрации?

Question

Я занимаюсь сайд-проектом, где создаю веб-сайт с формой входа / регистрации. Я использую HTML, CSS, PHP и некоторые JavaScript для создания сайта. Я следовал этому руководству , чтобы создать следующую скользящую форму входа и регистрации. GIF для демонстрации: здесь

Когда пользователь нажимает кнопку регистрации, форма перемещается, и появляется форма создания учетной записи.

Чего я хочу добиться, так это того, что когда пользователь заполняет страницу создания учетной записи и нажимает кнопку регистрации, на задней панели запускается PHP, чтобы выполнить некоторую аутентификацию пользователя, а затем отображать сообщение в окно где "Welcome Back!" обычно выглядит так, как будто

Однако, когда пользователь нажимает кнопку регистрации после заполнения формы, кажется, что страница обновляется и возвращается в форму входа. Только когда я нажимаю кнопку регистрации в форме входа, она возвращается к форме регистрации и отображает сообщение на обороте.

У меня вопрос, как я смогу сделать знак? при нажатии кнопки регистрации, чтобы сообщение могло появиться слева.

Вот мой код (loginRegister. html) ....

<div class="container" id="contPadding">
<div class="cont" id="cont">
    <div class="form-container signup-container">
        <form method="POST">
            <h1>Create Account</h1>
            <div class="social-container">
                <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
            </div>
            <span>or use your email to join us</span>
            <input type="text" placeholder="Username" name = "username"/>
            <input type="text" placeholder="Email" name = "email"/>
            <input type="password" placeholder="Password" name = "password"/>
            <input type="password" placeholder="Confirm Password" name = "pwdConfirm"/>
            <input type = "text" placeholder="First Name" name = "firstName">
            <input type = "text" placeholder="Last Name" name = "lastName">
            <button id="Sign-Up">Sign Up</button>
        </form>
    </div>

    <div class="form-container signin-container">
        <form method="POST" action="authentication.php">
            <h1>Sign In</h1>
            <div class="social-container">
                <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
            </div>
            <span>or use your account</span>
            <input type="text" placeholder="Username" name = "username" required/>
            <input type="password" placeholder="Password" name = "password" required/>
            <a href="#" class="forgot">Forgot your Password</a>
            <button type="submit" name="Sign-In">Sign In</button>
        </form>
    </div>

    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <?php
                require_once "db.php";
                if(isset($_POST['username']) && isset($_POST['password']) && isset($_POST['pwdConfirm']) && isset($_POST['firstName']) && isset($_POST['lastName']) && isset($_POST['email']))
                {
                    // Declaring and Initializing variables from the registration form
                    $uname = $_POST['username'];
                    $pwd = $_POST['password'];
                    $pc = $_POST['pwdConfirm'];
                    $fname = $_POST['firstName'];
                    $lname = $_POST['lastName'];
                    $email = $_POST['email'];

                    $usernameCheck = "SELECT * FROM user WHERE userName='$uname'";
                    $results = mysqli_query($db, $usernameCheck);
                    $table = mysqli_num_rows($results);

                    // Error checking the form to make sure it complies with the specifications given
                    if($uname == '' || $pwd == '' || $fname == '' || $pc == '' || $lname == '' || $email == '')
                    {
                        echo "<p class='error'>All fields must be filled in order to continue</p>";
                    }
                    else if($table > 0)
                    {
                        echo "<p class='error'>The user name that you have entered is already taken! Please enter a new username</p>";
                    }
                    else if($pwd != $pc)
                    {
                        echo "<p class='error'>The password that you have entered does not match! Please try again</p>";
                    }
                    else
                    {
                        $sql = "INSERT INTO user (userName, emailAddress, password, firstName, LastName) VALUES ('$uname', '$email', '$pwd', '$fname', '$lname')";
                        // Inserting the user's details into the database and displaying a confirmation message 
                        // to the user with a link to return to the login page
                        mysqli_query($db, $sql);
                        echo '<p>Congratulations! Your account was created successfully. Click <a href="index.html">here</a> to return to the home page</p>';
                    }
                }
                else
                {
                    echo " <h1>Welcome Back!</h1> ";
                    echo " <p>To keep connected with us please log in with your account</p> ";
                    echo '  <button class="over-btn" id="signin">Sign In</button> ';
                }
                ?>
            </div>
            <div class="overlay-panel overlay-right">
                <h1>Don't have an account?</h1>
                <p>Create an account by clicking the button bellow </p>
                <button class="over-btn" id="signup">Sign Up</button>
            </div>
        </div>
    </div>
</div>
</div>

.... и для Javascript (loginRegister. js)

const signUpbtn = document.getElementById('signup');
const signInbtn = document.getElementById('signin');
const container = document.getElementById('cont');

signUpbtn.addEventListener('click',()=>{
   container.classList.add('right-panel-active')
});

signInbtn.addEventListener('click',()=>{
    container.classList.remove('right-panel-active')
});

... и, наконец, CSS (logReg. css)

#contPadding{
    padding: 25px;
}
h1
{
    font-weight: bold;
    margin:0;
}

p{
    font-size: 14px;
    font-weight: 100;
    line-height: 20px;
    letter-spacing: 0.5px;
    margin: 20px 0 30px;
}
span{
    font-size: 12px;
}
a{
    color: #333;
    text-decoration: none;
}
.cont
{
    background: #fff;
    border-radius: 10px;
    box-shadow:  0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 546px;
    min-width: 50%;

}

.form-container
{
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 0 50px;
    height: 100%;
    justify-content: center;
    align-items:center;
    text-align: center;
}
.social-container
{
    margin: 20px 0;
}
.social-container a{
    border: 1px solid #ddd;
    border-radius: 50%;
    display: inline-flex;
    justify-content:center;
    align-items: center;
    margin: 0 5px;
    height: 40px;
    width: 40px;
}
.form-container input{
    background:  #eee;
    border: none;
    padding: 12px 15px;
    margin: 8px 0;
    width: 100%;
}
.form-container button
{
    margin-top: 10px;
}

button
{
    border-radius: 20px;
    border: 1px solid #ffaa23;
    background: #ffaa23;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding:12px 45px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 80ms ease-in;

}
button:active{
    transform: scale(0.95);
}
button:focus
{
    outline: none;
}
button.over-btn
{
    background: transparent;
    border-color: #fff;
}
.social:hover
{
    color: #ffaa23;
    border-color: #ffaa23;
}
.form-container
{
    position: absolute;
    top: 0;
    height:  100%;
    transition:  0.6s ease-in-out;
}

.signin-container
{
    left:0;
    width: 50%;
    z-index:2;
}

.signup-container
{
    left:0;
    width: 50%;
    z-index:1;
    opacity: 0;
}
.signup-container button
{
    background: #ff782b;
    border-color: #ff782b;
}
.signup-container .social:hover
{
    color: #ff782b;
    border-color: #ff782b;
}
.signin-container button
{
    background: #ffa705;
    border-color: #ffa705;
}
.signin-container .forgot
{
  font-size: 12px;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}


.overlay-container
{
    position: absolute;
    top=0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}
.overlay
{
    background: #ffaa23;
    background: linear-gradient(to right, #ed2a31,#ffaa23) no-repeat 0 0 / cover;
    color: #fff;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}
.overlay-panel
{
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 40px;
    height: 100%;
    width: 50%;
    text-align: center;
    transform: translateX(0);
    transition:  transform 0.6s ease-in-out;
}
.overlay-right
{
    right: 0;
    transform: translateX(0);
}
.overlay-left
{
    transform: translateX(-20%);
}


.cont.right-panel-active .signin-container
{
    transform: translateX(100%);
}
.cont.right-panel-active .overlay-container
{
    transform: translateX(-100%);
}
.cont.right-panel-active .signup-container
{
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
}


.cont.right-panel-active .overlay
{
    transform: translateX(50%);
}
.cont.right-panel-active .overlay-left
{
    transform: translateX(0);
}
.cont.right-panel-active .overlay-right
{
    transform: translateX(20%);
}

Я был бы очень признателен, если бы кто-нибудь мог мне помочь. Я застрял на этом некоторое время и хотел бы решить его.

Ура!