96 lines
5.3 KiB
HTML
96 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-br">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Login | iTGuys</title>
|
|
<link rel="icon" type="image/x-icon" href="./Acessts/Imagens/iT_Guys/logo1.png">
|
|
<link rel="stylesheet" href="./Css/page/Login/Estrutura_login.css" />
|
|
|
|
<!--Bloqueia a entrada, de escripts e estilos interno, na página html-->
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self';">
|
|
|
|
<!--força o navegador usar o modo de renderização mais seguro disponível.-->
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
<!--Meta dados para bloquear a capitação de certas informações do usuário-->
|
|
<meta http-equiv="Feature-Policy"
|
|
content="geolocation 'none'; microphone 'none'; camera 'none'; fullscreen 'none'; payment 'none'; vr 'none'; autoplay 'none'; accelerometer 'none'; ambient-light-sensor 'none'; gyroscope 'none'; magnetometer 'none';picture-in-picture 'none';sync-xhr 'none'; usb 'none';clipboard-write 'none'; clipboard-read 'none'; payments 'none'; ">
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<!--Div usada para apresentar o pop up do caso de erro 503, usando a classe para estilizar, e a id para definir as funções do painel-->
|
|
<div class="pop1" id="erro_503">
|
|
</div>
|
|
<!--Div usada para apresentar o pop up, do caso de invasão, onde o usuário tenta enviar comandos sqls ou comandos de scripts, usando a class pop2 para estilizar todo o painel, enquanto usa a id erro 504 para apresentar as informações do painel-->
|
|
<div class="pop2" id="erro_504">
|
|
</div>
|
|
|
|
|
|
<!-- Edições para aplicar uma alinhamento centralizado na página, definino a classe centralizar estilizar todo o corpo da página-->
|
|
|
|
<body class="centralizar">
|
|
<main>
|
|
<div>
|
|
<!-- essa div organiza todos os elementos do painel, além dela ser o painel com as bordas azuis, definindo a classe bloco para estilizar e alinhar todo o painel -->
|
|
<div class="Bloco">
|
|
|
|
<!--div responsavel por apresentar a logo da empresa, dentro no painel de login, defininido a classe logo, para alinhar e dimensionar a logo da empresa-->
|
|
<div class="logo">
|
|
<img src="./Acessts/Imagens/iT_Guys/Logo_itGuys.png" alt="Logo da empresa">
|
|
</div>
|
|
|
|
<!--Formulario que alinha todos os inputs da tela de login, usando a id formLogin para criar a base de interatividade com o script login.js-->
|
|
<form class="formulario" id="formLogin"> <!--Conversar com o Thiago-->
|
|
|
|
<!-- Campo oculto para incluir o token CSRF -->
|
|
<input type="hidden" name="csrf_token"
|
|
value="<?php echo htmlspecialchars($_SESSION['csrf_token']); ?>">
|
|
<!--Div responsavel por alinhar o titulo "Login" e definir suas especificações, utilizando o login_central para alinhar o titulo da página
|
|
<div class="login_central">
|
|
<h1>Login</h1>
|
|
</div>-->
|
|
<!--Div responsavel por alinhar a label e o input realacionados ao dominio do usuário, usando a classe Login focado unicamente e alinhar todos os elementos relacionados ao usuário.-->
|
|
|
|
<div class="colum_1">
|
|
<div class="Login">
|
|
<img src="./Acessts/Imagens/Iconis/User 2.png" alt="">
|
|
<!--caixa de entrada para os usuario, tendo a classe login_input para estilizar ela-->
|
|
<input class="Login_input" type="text" name="usuario" id="username"
|
|
placeholder="usuario@dominio.com.br" writingsuggestions="on" autocomplete="username">
|
|
</div>
|
|
<!--Div responsavel por alinhar a label e o input realacionados ao senha do usuário, usando a classe Senha focado unicamente e alinhar todos os elementos relacionados a senha-->
|
|
<div class="Senha">
|
|
<img src="./Acessts/Imagens/Iconis/User 1.png" alt="">
|
|
|
|
<!--caixa de entrada para a senha do usuário, tendo a classe Senha_input para estilizar ela-->
|
|
<input class="Senha_input" type="password" name="senha" id="password"
|
|
placeholder="escreva sua senha" writingsuggestions="on" autocomplete="new-password">
|
|
</div>
|
|
|
|
<div id="errorMessage" class="error-message"></div>
|
|
<!-- Dentro dessa div, é onde as mensagens de erro são apresentadas na tela , usando a classe erro-massege para sua estilização, e id erroMessage para aplicação de sua funcionalidades com o login.js-->
|
|
|
|
</div>
|
|
|
|
<div class="colum_2">
|
|
|
|
|
|
<!--Botão de envio para o mid end, usando a calsse botao para estilização, id submit para sua interação de envio.-->
|
|
<button class="botao" id="submit" name="submit">Login</button>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!--Script responsavel por lidar com o retiro das informações e as processar-->
|
|
<script src="./js/Login/login.js"></script>
|
|
<script src="./js/Login/seguranca.js"></script>
|
|
</body>
|
|
|
|
</html> |