<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Login e Registro</title>

    <link rel="stylesheet" href="css/sing.css"/>
    <link rel="stylesheet" href="css/base.css"/>
</head>
<body>
    <div class="form-wrapper">
        <div class="login-container active">
            <h2>LOGIN</h2>

            <div class="input-box">
                <i class="fas fa-user"></i>
                <input type="text" id="loginUsername" placeholder=" " />
                <label for="loginUsername">Usuário</label>
            </div>

            <div class="input-box">
                <i class="fas fa-lock"></i>
                <input type="password" id="loginPassword" placeholder=" " />
                <label for="loginPassword">Senha</label>
            </div>

            <div class="buttons">
                <button class="btn" id="loginBtn">Login</button>
                <button class="btn" id="showRegisterBtn">Registrar</button>
            </div>

            <button class="btn forgot">Esqueceu sua Senha?</button>
        </div>

        <div class="register-container">
            <h2>REGISTRO</h2>
            <form>
                <div class="form-group input-box">
                    <input type="text" id="registerUsername" name="username" placeholder=" ">
                    <label for="registerUsername">Usuário</label>
                </div>
                <div class="form-group input-box">
                    <input type="email" id="registerEmail" name="email" placeholder=" ">
                    <label for="registerEmail">Email</label>
                </div>
                <div class="form-group input-box">
                    <input type="password" id="registerPassword" name="password" placeholder=" ">
                    <label for="registerPassword">Senha</label>
                </div>
                <button type="submit" class="register-button" id="registerBtn">Registrar</button>
            </form>
            <button class="btn" id="showLoginBtn">Voltar para Login</button>
        </div>
    </div>

    <div id="custom-alert" class="custom-alert-hidden">
        <div class="custom-alert-content">
            <p id="custom-alert-message"></p>
            <button id="custom-alert-ok-btn">OK</button>
        </div>
    </div>

    <script src="javascript/singForm.js"></script>
</body>
</html>
