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"> | |
| <link rel="stylesheet" href="/static/css/index.css"> | |
| <style> | |
| </style> | |
| </head> | |
| <body class="login-page" style="background-image: url('static/img/AI.jpg'); background-size: cover;"> | |
| <main> | |
| <div class="container" id="container"> | |
| <div class="form-container sign-up-container"> | |
| <form action='/validate-user' name='signUpForm' 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 for registration</span> | |
| <input type="text" placeholder="Name" required /> | |
| <input type="password" placeholder="Password" required /> | |
| <button type="submit">Sign Up</button> | |
| </form> | |
| </div> | |
| <div class="form-container sign-in-container" id="form-container"> | |
| <form action='/validate-user' name='loginForm' method="post" onsubmit="return validateForm()"> | |
| <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" required /> | |
| <input type="password" name="password" placeholder="Password" required /> | |
| <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> | |
| </main> | |
| <footer> | |
| <p>Developed with <i class="fas fa-heart"></i> by <a href="#">RedMind</a></p> | |
| </footer> | |
| <script> | |
| const signUpButton = document.getElementById('signUp'); | |
| const signInButton = document.getElementById('signIn'); | |
| const container = document.getElementById('container'); | |
| const formcontainer = document.getElementById('form-container'); | |
| signUpButton.addEventListener('click', () => { | |
| container.classList.add("right-panel-active"); | |
| formcontainer.style.display = 'none' | |
| }); | |
| signInButton.addEventListener('click', () => { | |
| container.classList.remove("right-panel-active"); | |
| formcontainer.style.display = 'block' | |
| }); | |
| </script> | |
| </body> | |
| </html> |