Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Sign In/Up Form</title> | |
| <!-- Google Font --> | |
| <link href="https://fonts.googleapis.com/css?family=Montserrat:400,800" rel="stylesheet"> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: #f6f5f7; | |
| 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 #1c6bae; | |
| background-color: #1c6bae; | |
| color: #FFFFFF; | |
| font-size: 12px; | |
| font-weight: bold; | |
| padding: 12px 45px; | |
| margin-top: 30px; | |
| 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: 528px; | |
| max-width: 100%; | |
| min-height: 400px; | |
| } | |
| .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,#1c6bae, #1c6bae); | |
| background: linear-gradient(to right, #1c6bae, #1c6bae); | |
| 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; | |
| } | |
| /* Styling the logo inside a circle */ | |
| .logo-container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin-bottom: 20px; /* Add spacing between logo and text */ | |
| } | |
| .logo { | |
| border-radius: 50%; /* Make the image circular */ | |
| background-color: white; /* White background for the circle */ | |
| padding: 20px; /* Adjust the padding to create the circle effect */ | |
| width: 200px; /* Adjust size as needed */ | |
| height: 200px; /* Adjust size as needed */ | |
| object-fit: contain; /* Keep the image aspect ratio */ | |
| } | |
| 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; | |
| } | |
| </style> | |
| </head> | |
| <body class="hold-transition login-page" style="background-image: url('static/img/AI.jpg'); background-size: cover;"> | |
| <!-- <h2>Weekly Coding Challenge #1: Sign in/up Form</h2> --> | |
| <form action='/validate-user' name='loginForm' method="post" onsubmit="return validateForm()"> | |
| <div class="container" id="container"> | |
| <div class="form-container sign-up-container"> | |
| <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 for registration</span> | |
| <input type="text" placeholder="Name" /> | |
| <input type="password" placeholder="Password" /> | |
| <button>Sign Up</button> | |
| </form> | |
| </div> | |
| <div class="form-container sign-in-container"> | |
| <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" name="username" placeholder="Username" /> | |
| <input type="password" name="password" placeholder="Password" /> | |
| <a href="#">Forgot your password?</a> | |
| <button type="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 type="submit" class="ghost" id="signIn">Sign In</button> | |
| </div> | |
| <div class="overlay-panel overlay-right"> | |
| <div class="logo-container"> | |
| <img src="/static/img/redmindlogo3.jpg" alt="Logo" class="logo"> | |
| </div> | |
| <h1>RedMindGPT</h1> | |
| <p> Start Journey With Us</p> | |
| <button class="ghost" id="signUp">Sign Up</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p> | |
| Created with <i class="fa fa-heart"></i> by RedMind Technologies</p> | |
| </footer> | |
| <!-- jQuery --> | |
| </form> | |
| <script> | |
| function validateForm() { | |
| //alert("Validating form"); | |
| var username = document.forms["loginForm"]["username"].value; | |
| var password = document.forms["loginForm"]["password"].value; | |
| if (username == "" || password == "") { | |
| alert("Username and Password must be filled out"); | |
| return false; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |