login

mail@pastecode.io avatar
unknown
plain_text
9 months ago
16 kB
1
Indexable
Never
<%-- 
 Document   : login
 Created on : Aug 13, 2023, 11:00:47 PM
 Author     : MSI GTX
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0" />
        <script src="https://kit.fontawesome.com/e6d66f1665.js" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,800">
    </head>
    <body>
        <style>
            * {
                box-sizing: border-box;
            }

            body {
                background-image: url(https://i.pinimg.com/236x/25/85/51/258551fec542dea27fcb24dbedbd60ee.jpg);
                background-size: cover;
                background-repeat: no-repeat;
                background-attachment: fixed;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                font-family: 'Montserrat', sans-serif;
                height: 100vh;
                margin: -20px 0 50px;
            }

            h1 {
                font-weight: bold;
                margin: 0;
            }

            h2 {
                text-align: center;
            }

            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;
                font-size: 14px;
                text-decoration: none;
                margin: 15px 0;
            }

            button {
                border-radius: 20px;
                border: 1px solid #FF4B2B;
                background-color: #FF4B2B;
                color: #FFFFFF;
                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.ghost {
                background-color: transparent;
                border-color: #FFFFFF;
            }

            form {
                background-color: #FFFFFF;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                padding: 0 50px;
                height: 100%;
                text-align: center;
            }

            input {
                background-color: #eee;
                border: none;
                padding: 12px 15px;
                margin: 8px 0;
                width: 100%;
            }

            .container {
                background-color: #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: 768px;
                max-width: 100%;
                min-height: 580px;
            }

            .form-container {
                position: absolute;
                top: 0;
                height: 100%;
                transition: all 0.6s ease-in-out;
            }

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

            .container.right-panel-active .sign-in-container {
                transform: translateX(100%);
            }

            .sign-up-container {
                left: 0;
                width: 50%;
                opacity: 0;
                z-index: 1;
            }

            .container.right-panel-active .sign-up-container {
                transform: translateX(100%);
                opacity: 1;
                z-index: 5;
                animation: show 0.6s;
            }

            @keyframes show {

                0%,
                49.99% {
                    opacity: 0;
                    z-index: 1;
                }

                50%,
                100% {
                    opacity: 1;
                    z-index: 5;
                }
            }

            .overlay-container {
                position: absolute;
                top: 0;
                left: 50%;
                width: 50%;
                height: 100%;
                overflow: hidden;
                transition: transform 0.6s ease-in-out;
                z-index: 100;
            }

            .container.right-panel-active .overlay-container {
                transform: translateX(-100%);
            }

            .overlay {
                background: #FF416C;
                background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
                background: linear-gradient(to right, #FF4B2B, #FF416C);
                background-repeat: no-repeat;
                background-size: cover;
                background-position: 0 0;
                color: #FFFFFF;
                position: relative;
                left: -100%;
                height: 100%;
                width: 200%;
                transform: translateX(0);
                transition: transform 0.6s ease-in-out;
            }

            .container.right-panel-active .overlay {
                transform: translateX(50%);
            }

            .overlay-panel {
                position: absolute;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                padding: 0 40px;
                text-align: center;
                top: 0;
                height: 100%;
                width: 50%;
                transform: translateX(0);
                transition: transform 0.6s ease-in-out;
            }

            .overlay-left {
                transform: translateX(-20%);
            }

            .container.right-panel-active .overlay-left {
                transform: translateX(0);
            }

            .overlay-right {
                right: 0;
                transform: translateX(0);
            }

            .container.right-panel-active .overlay-right {
                transform: translateX(20%);
            }

            .social-container {
                margin: 20px 0;
            }

            .social-container a {
                border: 1px solid #DDDDDD;
                border-radius: 50%;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                margin: 0 5px;
                height: 40px;
                width: 40px;
            }

            footer {
                background-color: #222;
                color: #fff;
                font-size: 14px;
                bottom: 0;
                position: fixed;
                left: 0;
                right: 0;
                text-align: center;
                z-index: 999;
            }

            footer p {
                margin: 10px 0;
            }

            footer i {
                color: red;
            }

            footer a {
                color: #3c97bf;
                text-decoration: none;
            }
            /*.form-container {
                        position: relative;
                        max-width: 400px;
                        margin: 0 auto;
                    }*/
            .error-message {
                color: red;
                font-size: 14px;
                margin-top: 5px;
            }
        </style>

        <h2>Sign in/up Form</h2>
        <div class="container" id="container">
            <div class="form-container sign-up-container">
                <form id="signup-form" method="post" action="AccountController">
                    <h2>Create Account</h2>
                    <span> use your email for registration</span>
                    <input type="text" name="txtfullname" placeholder="FullName" />
                    <span class="error-message" id="fullname-error"></span>
                    <input type="text" name="txtaddress" placeholder="Address" />
                    <span class="error-message" id="address-error"></span>
                    <input type="text" name="txtphone" placeholder="Phone" />
                    <span class="error-message" id="phone-error"></span>
                    <input type="text" name="txtemail" placeholder="Email" />
                    <span class="error-message" id="emails-error"></span>
                    <input type="password" name="txtpass" placeholder="Password" />
                    <span class="error-message" id="pass-error"></span>
                    <button type="submit" name="btnsignup" value="signup">Sign Up</button>
                </form>
            </div>
            <div class="form-container sign-in-container">
                <form id="signin-form" method="post" action="AccountController">
                    <h2>Sign in</h2>
                    <input type="text" name="btnemail" placeholder="Email" />
                    <span class="error-message" id="email-error"></span>
                    <input type="password" name="btnpass" placeholder="Password" />
                    <span class="error-message" id="password-error"></span>
                    <a href="#">Forgot your password?</a>
                    <button type="submit" name="btnsignin" value="Submit">Sign In</button>
                </form>
            </div>
            <div class="overlay-container">
                <div class="overlay">
                    <div class="overlay-panel overlay-left">
                        <h1>Welcome Back!</h1>
                        <p>To keep connected with us please login with your personal info</p>
                        <button class="ghost" id="signIn">Sign In</button>
                    </div>
                    <div class="overlay-panel overlay-right">
                        <h1>Hello, Friend!</h1>
                        <p>Enter your personal details and start journey with us</p>
                        <button class="ghost" id="signUp">Sign Up</button>
                    </div>
                </div>
            </div>
        </div>

        <script>
            //chuyển đổi giữa login hoặc sign up
            const signUpButton = document.getElementById('signUp');
            const signInButton = document.getElementById('signIn');
            const container = document.getElementById('container');

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

            signInButton.addEventListener('click', () => {
                container.classList.remove('right-panel-active');
            });
            //báo lỗi khi không nhập gì
            document.addEventListener("DOMContentLoaded", function () {
                const form = document.getElementById("signin-form");
                const emailInput = document.querySelector('input[name="btnemail"]');
                const passwordInput = document.querySelector('input[name="btnpass"]');
                const emailError = document.getElementById("email-error");
                const passwordError = document.getElementById("password-error");

                form.addEventListener("submit", function (event) {
                    emailError.textContent = "";
                    passwordError.textContent = "";

                    if (emailInput.value.trim() === "") {
                        event.preventDefault();
                        emailError.textContent = "Please enter Email.";
                    } else if (!(emailInput.value.trim().includes("@"))) {
                        emailError.textContent = "Format of email ex: example@gmail.com ";
                    }
                    if (passwordInput.value.trim() === "") {
                        event.preventDefault();
                        passwordError.textContent = "Please enter Password.";
                    }
                });
            });
            //báo lỗi create account 
            document.addEventListener("DOMContentLoaded", function () {
                const form = document.getElementById("signup-form");
                const nameInput = document.querySelector('input[name="txtfullname"]');
                const addressInput = document.querySelector('input[name="txtaddress"]');
                const phoneInput = document.querySelector('input[name="txtphone"]');
                const emailsInput = document.querySelector('input[name="txtemail"]');
                const passInput = document.querySelector('input[name="txtpass"]');
                const nameError = document.getElementById("fullname-error");
                const addressError = document.getElementById("address-error");
                const phoneError = document.getElementById("phone-error");
                const emailsError = document.getElementById("emails-error");
                const passError = document.getElementById("pass-error");

                form.addEventListener("submit", function (event) {
                    nameError.textContent = "";
                    addressError.textContent = "";
                    phoneError.textContent = "";
                    emailsError.textContent = "";
                    passError.textContent = "";

                    if (nameInput.value.trim() === "") {
                        event.preventDefault();
                        nameError.textContent = "Please enter FullName.";
                    } else if (nameInput.value.trim().length < 2) {
                        nameError.textContent = "Please enter fullname more than 2 character";
                    }
                    if (addressInput.value.trim() === "") {
                        event.preventDefault();
                        addressError.textContent = "Please enter Address.";
                    }
                    if (phoneInput.value.trim() === "") {
                        event.preventDefault();
                        phoneError.textContent = "Please enter Phone Number.";
                    } else if (!(phoneInput.value.trim().length === 10 && phoneInput.startsWith("0") && !isNaN(phoneInput))) {
                        phoneError.textContent = "Please enter Phone start with 0 and have 9 numeric";
                    }
                    if (emailsInput.value.trim() === "") {
                        event.preventDefault();
                        emailsError.textContent = "Please enter Email.";
                    } else if (!(emailsInput.value.trim().includes("@"))) {
                        emailsError.textContent = "Format of email ex: example@gmail.com ";
                    }
                    if (passInput.value.trim() === "") {
                        event.preventDefault();
                        passError.textContent = "Please enter Password.";
                    }
                });
            });

        </script> 
    </body>
</html>