| 1 | <!DOCTYPE html>
|
|---|
| 2 | <html lang="en">
|
|---|
| 3 | <head>
|
|---|
| 4 | <meta charset="UTF-8">
|
|---|
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|---|
| 6 | <link rel="stylesheet" href="./CSS/Sign.css">
|
|---|
| 7 | <title>Sign-in/Sign-up Form</title>
|
|---|
| 8 | </head>
|
|---|
| 9 | <body>
|
|---|
| 10 |
|
|---|
| 11 | <div class="container" id="container">
|
|---|
| 12 | <div class="form-container sign-up-container">
|
|---|
| 13 | <form method="POST" action="validateSignUp.php" id="signupForm" autocomplete="off" novalidate>
|
|---|
| 14 | <h1>Create Account</h1>
|
|---|
| 15 | <div class="social-container">
|
|---|
| 16 | <a href="#" class="social">
|
|---|
| 17 | <svg viewBox="0 0 24 24">
|
|---|
| 18 | <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z"/>
|
|---|
| 19 | </svg>
|
|---|
| 20 | </a>
|
|---|
| 21 | <a href="#" class="social">
|
|---|
| 22 | <svg viewBox="0 0 24 24">
|
|---|
| 23 | <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.917 16.083c-2.258 0-4.083-1.825-4.083-4.083s1.825-4.083 4.083-4.083c1.103 0 2.024.402 2.735 1.067l-1.107 1.068c-.304-.292-.834-.63-1.628-.63-1.394 0-2.531 1.155-2.531 2.579 0 1.424 1.138 2.579 2.531 2.579 1.616 0 2.224-1.162 2.316-1.762h-2.316v-1.4h3.855c.036.204.064.408.064.677.001 2.332-1.563 3.988-3.919 3.988zm9.917-3.583h-1.75v1.75h-1.167v-1.75h-1.75v-1.167h1.75v-1.75h1.167v1.75h1.75v1.167z"/>
|
|---|
| 24 | </svg>
|
|---|
| 25 | </a>
|
|---|
| 26 | </div>
|
|---|
| 27 | <span>or use your email for registration</span>
|
|---|
| 28 |
|
|---|
| 29 | <input type="text" name="username" id="signup_username" placeholder="Username" />
|
|---|
| 30 | <div class="error-message" id="signup_username_error"></div>
|
|---|
| 31 |
|
|---|
| 32 | <input type="email" name="email" id="signup_email" placeholder="Email" />
|
|---|
| 33 | <div class="error-message" id="signup_email_error"></div>
|
|---|
| 34 |
|
|---|
| 35 | <input type="password" name="password" id="signup_password" placeholder="Password" />
|
|---|
| 36 | <div class="error-message" id="signup_password_error"></div>
|
|---|
| 37 |
|
|---|
| 38 | <div class="success-message" id="signup_success"></div>
|
|---|
| 39 | <button type="submit">Sign Up</button>
|
|---|
| 40 | </form>
|
|---|
| 41 | </div>
|
|---|
| 42 |
|
|---|
| 43 | <div class="form-container sign-in-container">
|
|---|
| 44 | <form method="POST" action="validateLogIn.php" id="loginForm" autocomplete="off" novalidate>
|
|---|
| 45 | <h1>Sign in</h1>
|
|---|
| 46 | <div class="social-container">
|
|---|
| 47 |
|
|---|
| 48 | <a href="#" class="social">
|
|---|
| 49 | <svg viewBox="0 0 24 24">
|
|---|
| 50 | <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z"/>
|
|---|
| 51 | </svg>
|
|---|
| 52 | </a>
|
|---|
| 53 | <a href="#" class="social">
|
|---|
| 54 | <svg viewBox="0 0 24 24">
|
|---|
| 55 | <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.917 16.083c-2.258 0-4.083-1.825-4.083-4.083s1.825-4.083 4.083-4.083c1.103 0 2.024.402 2.735 1.067l-1.107 1.068c-.304-.292-.834-.63-1.628-.63-1.394 0-2.531 1.155-2.531 2.579 0 1.424 1.138 2.579 2.531 2.579 1.616 0 2.224-1.162 2.316-1.762h-2.316v-1.4h3.855c.036.204.064.408.064.677.001 2.332-1.563 3.988-3.919 3.988zm9.917-3.583h-1.75v1.75h-1.167v-1.75h-1.75v-1.167h1.75v-1.75h1.167v1.75h1.75v1.167z"/>
|
|---|
| 56 | </svg>
|
|---|
| 57 | </a>
|
|---|
| 58 | </div>
|
|---|
| 59 | <span>or use your account</span>
|
|---|
| 60 |
|
|---|
| 61 | <input type="text" name="username" id="login_username" placeholder="Username"/>
|
|---|
| 62 | <div class="error-message" id="login_username_error"></div>
|
|---|
| 63 |
|
|---|
| 64 | <input type="password" name="password" id="login_password" placeholder="Password"/>
|
|---|
| 65 | <div class="error-message" id="login_password_error"></div>
|
|---|
| 66 |
|
|---|
| 67 | <div class="error-message" id="login_general_error"></div>
|
|---|
| 68 | <a href="#">Forgot your password?</a>
|
|---|
| 69 | <button type="submit">Sign In</button>
|
|---|
| 70 | </form>
|
|---|
| 71 | </div>
|
|---|
| 72 |
|
|---|
| 73 |
|
|---|
| 74 | <div class="overlay-container">
|
|---|
| 75 | <div class="overlay">
|
|---|
| 76 | <div class="overlay-panel overlay-left">
|
|---|
| 77 | <h1>Welcome Back!</h1>
|
|---|
| 78 | <p>To keep connected with us please login with your personal info</p>
|
|---|
| 79 | <button class="ghost" id="signIn">Sign In</button>
|
|---|
| 80 | </div>
|
|---|
| 81 | <div class="overlay-panel overlay-right">
|
|---|
| 82 | <h1>Hello, Reader!</h1>
|
|---|
| 83 | <p>Enter your personal details and start your literary journey with us</p>
|
|---|
| 84 | <button class="ghost" id="signUp">Sign Up</button>
|
|---|
| 85 | </div>
|
|---|
| 86 | </div>
|
|---|
| 87 | </div>
|
|---|
| 88 | </div>
|
|---|
| 89 | <script src="./Scripts/Sign.js"></script>
|
|---|
| 90 | </body>
|
|---|
| 91 | </html> |
|---|
