<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./CSS/Sign.css">
    <title>Sign-in/Sign-up Form</title>
  </head>
  <body>

    <div class="container" id="container">
        <div class="form-container sign-up-container">
            <form method="POST" action="validateSignUp.php" id="signupForm" autocomplete="off" novalidate>
                <h1>Create Account</h1>
                <div class="social-container">
                  <a href="#" class="social">
                    <svg viewBox="0 0 24 24">
                      <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"/>
                    </svg>
                  </a>
                  <a href="#" class="social">
                    <svg viewBox="0 0 24 24">
                      <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"/>
                    </svg>
                  </a>
                </div>
                <span>or use your email for registration</span>
                
                <input type="text" name="username" id="signup_username" placeholder="Username" />
                <div class="error-message" id="signup_username_error"></div>
                
                <input type="email" name="email" id="signup_email" placeholder="Email" />
                <div class="error-message" id="signup_email_error"></div>
                
                <input type="password" name="password" id="signup_password" placeholder="Password" />
                <div class="error-message" id="signup_password_error"></div>
                
                <div class="success-message" id="signup_success"></div>
                <button type="submit">Sign Up</button>
            </form>
        </div>

        <div class="form-container sign-in-container">
            <form method="POST" action="validateLogIn.php" id="loginForm" autocomplete="off" novalidate>
                <h1>Sign in</h1>
                <div class="social-container">
                    
                  <a href="#" class="social">
                    <svg viewBox="0 0 24 24">
                      <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"/>
                    </svg>
                  </a>
                  <a href="#" class="social">
                    <svg viewBox="0 0 24 24">
                      <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"/>
                    </svg>
                  </a>
                </div>
                <span>or use your account</span>
                
                <input type="text" name="username" id="login_username" placeholder="Username"/>
                <div class="error-message" id="login_username_error"></div>
                
                <input type="password" name="password" id="login_password" placeholder="Password"/>
                <div class="error-message" id="login_password_error"></div>
                
                <div class="error-message" id="login_general_error"></div>
                <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 class="ghost" id="signIn">Sign In</button>
                </div>
                <div class="overlay-panel overlay-right">
                    <h1>Hello, Reader!</h1>
                    <p>Enter your personal details and start your literary journey with us</p>
                    <button class="ghost" id="signUp">Sign Up</button>
                </div>
            </div>
        </div>
    </div>
  <script src="./Scripts/Sign.js"></script>
  </body>
</html>