Olá tudo certo?
Bom meu nome é Micael, atualmente venho fazendo faculdade de análise e desenvolvimento de sistemas. Veio por meio desta tirar dúvidas referente ao código HTML, esse qual estou aproveitando de um trabalho antigo a qual fiz, e estou acrescentando algo a mais, como o método post e o direcionamento de página. Bom não sei se está certo e gostaria de uma ajuda nessa parte. Não estou conseguindo fazer o direcionamento para outra página quando faço o login, fica na mesma. Já o botão de reset está funcionando certo. Segue abaixo código HTML. Desde já agradeço quem puder ajudar
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>Login</title>
</head>
<body>
<div class="container">
<div class="container-login">
<div class="wrap-login">
<form class="login-form" method="post">
<span class="login-form-title">
Faça seu login
</span>
<div class="wrap-input margin-top-35 margin-bottom-35">
<input class="input-form" id="usuario" type="text" name="email" autocomplete="off" required>
<span class="focus-input-form" data-placeholder="E-mail"></span>
</div>
<div class="wrap-input margin-bottom-35">
<input class="input-form" id="senha" type="password" name="password" required>
<span class="focus-input-form" data-placeholder="Senha"></span>
</div>
<div class="container-login-form-btn">
<button class="login-form-btn" type="submit" name="B1" onclick="pass()">
Login
</button>
</div>
<div class="container-login-form-btn">
<button class="login-form-btn" type="reset" value="Limpar" name="B2">
Limpar
</button>
</div>
<ul class="login-utils">
<li class="margin-bottom-8 margin-top-8">
<span class="text1">
Esqueceu sua senha?
</span>
<a href="#" class="text2">
Clique aqui
</a>
<span class="text1">
para redefinir sua senha!
</span>
</li>
<li>
<span class="text1">
Não tem conta?
</span>
<a href="#" class="text2">
Clique aqui
</a>
<span class="text1">
para criar
</span>
</li>
</ul>
</form>
</div>
<video src="images/Computer login (1).mp4" poster="images/Computer login-pana.png" width="300" height="300" preload="auto"
autoplay loop auto></video>
</div>
</div>
<script>
function login(){
const $usuario = document.querySelector('#usuario');
const usuario = $usuario.value.toLowerCase();
const $senha = document.querySelector('#senha');
const senha = $senha.value.toLowerCase();
if($usuario.value === "" || $senha.value === "") {
alert("Preencha todos os campos");
} else if ($usuario.value === "exemplo@exemplo" && $senha.value == "admin") {
alert("Login realizado com sucesso");
} else {
alert("Usuário ou senha incorretos");
};
}
document.querySelector("button").addEventListener("click", (event)=>{
login()
});
let inputs = document.getElementsByClassName('input-form');
for (let input of inputs) {
input.addEventListener("blur", function() {
if(input.value.trim() != ""){
input.classList.add("has-val");
} else {
input.classList.remove("has-val");
}
});
}
</script>
</body>
</body>
</html>
/*
Variáveis
*/
:root {
--main-color: #407bff;
--link-color: #666666;
--text1: #999999;
--highligth-text: #333333;
--input-text: #555555;
--white-color: #FFFFFF;
--point-list: #CCCCCC;
--line-input: #D9D9D9;
}
/*
Fontes
*/
@font-face {
font-family: Poppins-Regular;
src: url('../fonts/poppins/Poppins-Regular.ttf');
}
@font-face {
font-family: Poppins-Medium;
src: url('../fonts/poppins/Poppins-Medium.ttf');
}
@font-face {
font-family: Poppins-Bold;
src: url('../fonts/poppins/Poppins-Bold.ttf');
}
@font-face {
font-family: Poppins-SemiBold;
src: url('../fonts/poppins/Poppins-SemiBold.ttf');
}
/*
Zerar estilos
*/
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: Poppins-Regular, sans-serif;
}
ul, li {
margin: 0px;
list-style-type: none;
}
input, button {
outline: none !important;
border: none;
}
button:hover {
cursor: pointer;
}
/*
Utilitários
*/
.text1 {
font-family: Poppins-Regular;
font-size: 15px;
color: var(--text1);
line-height: 1.5;
}
.text2 {
font-family: Poppins-Regular;
font-size: 15px;
color: var(--main-color);
line-height: 1.5;
}
.margin-bottom-35 {
margin-bottom: 35px;
}
.margin-top-35 {
margin-top: 35px;
}
.margin-bottom-8 {
margin-bottom: 8px;
}
.margin-top-8 {
margin-top: 8px;
}
.margin-left-50 {
margin-left: 50px;
}
/*
Login
*/
.container {
width: 100%;
margin: 0 auto;
}
.container-login {
width: 100%;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 15px;
background: var(--white-color);
}
.wrap-login {
width: 370px;
margin-right: 50px;
background: var(--white-color);
}
/*
Formulário
*/
.login-form {
width: 100%;
}
.login-form-title {
display: block;
font-family: Poppins-Bold;
font-size: 39px;
color: var(--highligth-text);
line-height: 1.2;
text-align: center;
}
/*
Input
*/
.wrap-input {
width: 100%;
position: relative;
border-bottom: 2px solid var(--line-input);
}
.input-form {
font-family: Poppins-SemiBold;
font-size: 18px;
color: var(--input-text);
line-height: 1.2;
display: block;
width: 100%;
height: 52px;
background: transparent;
padding: 0 5px;
}
.focus-input-form {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.focus-input-form::before {
content: "";
display: block;
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
transition: all 0.4s;
background: var(--main-color);
}
.focus-input-form::after {
font-family: Poppins-Medium;
font-size: 18px;
color: var(--text1);
line-height: 1.2;
content: attr(data-placeholder);
display: block;
width: 100%;
position: absolute;
top: 15px;
left: 0px;
padding-left: 5px;
transition: all 0.4s;
}
.input-form:focus + .focus-input-form::after {
top: -20px;
font-size: 15px;
}
.input-form:focus + .focus-input-form::before {
width: 100%;
}
.has-val.input-form + .focus-input-form::after {
top: -20px;
font-size: 15px;
}
.has-val.input-form + .focus-input-form::before {
width: 100%;
}
/*
Botão
*/
.container-login-form-btn {
width: 100%;
display: flex;
justify-content: center;
}
.login-form-btn {
font-family: Poppins-Medium;
font-size: 16px;
color: var(--white-color);
line-height: 1.2;
text-transform: uppercase;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
width: 100%;
height: 50px;
background-color: var(--main-color);
border-radius: 5px;
transition: all 0.4s;
}
.login-form-btn:hover {
background-color: var(--highligth-text);
}
/*
Links - Login utils
*/
a {
font-family: Poppins-Regular;
font-size: 14px;
line-height: 1.7;
color: var(--link-color);
margin: 0px;
transition: all 0.4s;
}
a:focus {
outline: none !important;
}
a:hover {
text-decoration: none;
color: var(--highligth-text);
}
/*
Login utils
*/
.login-utils {
margin-top: 30px;
}
.login-utils li {
position: relative;
padding-left: 17px;
}
.login-utils li::before {
content: "";
display: block;
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: var(--point-list);
top: 45%;
transform: translateY(-50%);
left: 0;
}
