login
plain_text
13 days ago
16 kB
0
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>