143 lines
7.3 KiB
HTML
143 lines
7.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</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
|
|
|
<!--
|
|
<link href="./Estilo__CC.css" rel="stylesheet"> Sendo uma conexão direta com o arquivo css voltados para todos os estilos da página, levando a trazer todos os estilos desenvolvidos no outro arquivo, usando “./” para o início da navegação entre as pastas.
|
|
<link href="./Adapitacao__CC.css" rel="Stylesheet"> Sendo uma conexão direta com o arquivo css voltado para a adaptação da página a certas resoluções , levando a trazer todas as suas orientações de resolução para o html, usando “./” para o início da navegação entre as pastas.
|
|
-->
|
|
|
|
<link href="./Estilo__CC.css" rel="stylesheet">
|
|
<link href="./Adapitacao__CC.css" rel="Stylesheet">
|
|
|
|
</head>
|
|
|
|
<!--Tag Boby possui duas classes, que aplicam cada uma, um estilo nele, onde a fundo trabalha diretamente com o background do projeto, enquanto a centralizar trabalha diretamente com organizar do painel diante a página.
|
|
-->
|
|
|
|
|
|
<body class="fundo centralizar">
|
|
|
|
<!--Main uma tag semantica para organizar todos os elementos da página, toda configuração aplicada nela vai passar por todos os elementos da própria página-->
|
|
|
|
<main>
|
|
|
|
|
|
<!--Div 1 matriz focada na organização de todos os elementos do formulario de input, tendo todas as mesmas caracteristicas da proprio main, só que suas alterações serão focalizadas no campo input.-->
|
|
|
|
|
|
<div>
|
|
|
|
<!--Div bloco, sendo essa o corpo principal do painel login, tendo nela a classe bloco, que construi todo o estilo do corpo do proprio painel.-->
|
|
|
|
<div class="Bloco">
|
|
|
|
<!-- Div Img, div responsavel na inxersão da logo no painel, tendo uma estrutura simplis.
|
|
|
|
-Img: sendo sua tag principal para funcionamento da propria linha de inxersão.
|
|
-Src: resgata imagem de alguma localização dentro das pastas do proprio projeto, usando "/" para iniciar a navegação.
|
|
-width e height: sendo aqueles que regulam o tamanho da propria imagem, em pixels sendo Largura e altura respectivamente.-->
|
|
|
|
<div class="logo">
|
|
<img src="./Acessts_CC/logo_2.png" width="150px" height="150px">
|
|
|
|
</div>
|
|
|
|
<!--A bertura da tag formulario, onde possui todos os campos inputs "caixas de texto" do proprio projeto.-->
|
|
|
|
<form name="formLogin" id="formLogin" method="post" action="login.jsp">
|
|
|
|
<!--Div 1 Titulo do painel, basicamente focada na edição somente o texto inicial do painel, o definindo diretamente com um titulo com o h1, além de ser editada diretamente pela classe de login_central.-->
|
|
|
|
<div class="login_central">
|
|
|
|
<h1>
|
|
Login
|
|
</h1>
|
|
|
|
</div>
|
|
|
|
<!--Div 2 campo input área log, basicamene focalizada em ser uma matriz de organização para tanto o campo input, quanto para o campo label do próprio loguinho.
|
|
Possuindo a classe login responsavel diretamente por organizar todos os elemenetos rementenes campo e email do login.-->
|
|
|
|
<div class="Login">
|
|
|
|
<!--Label sendo a tag focada em ser um texo antes da caixa de dialgo do input, possuindo a classe Login_label para edição.
|
|
Ponto importante a escrita depois da abertura da tag e antes do fechamento dela, é o elemento textual que será apresentado na página.-->
|
|
|
|
<label class="Login_label" >Endereço de Email:</label><br>
|
|
|
|
<!--Input sendo a tag responsavel por o armazenamento de dados dedicados a ela, seu type é a definição do seu tipo, em outras palavras sendo um padrão de comportamento do campo input, neste caso sendo do padrão texto que comporta todos os elementos textuais.
|
|
-Size sendo responsavel pelo o tamanho da fonte
|
|
-Placholder sendo uma um texto presente dentro do campo input que desaparece ao iniciar a escrita.
|
|
-Required sendo a definição de um campo obrigatorio de resgitros empedido o usuario avançar sem colocar todos os dados no campo input.
|
|
-Autofocus Sendo uma definição para direcionar o foco do teclado do usuario diretamente para o campo input ao inicia a tela da página.
|
|
-->
|
|
|
|
<input class="Login_input" type="text" name="usuario" id="usuario" size="20" placeholder="Email"
|
|
required autofocus>
|
|
|
|
|
|
</div>
|
|
|
|
<!--
|
|
Div 3 campo input área log, basicamene focalizada em ser uma matriz de organização para tanto o campo imput quanto para o campo label da própria senha.
|
|
Possuindo a classe "Senha" responsavel diretamente por organizar todos os elemenetos direcionandos o campo de Senha.
|
|
-->
|
|
|
|
<div class="Senha">
|
|
|
|
<!---
|
|
Label sendo a tag focada em ser um texo antes da caixa de dialgo do input, possuindo a classe Senha_label para edição.
|
|
Ponto importante a escrita depois da abertura da tag e antes do fechamento dela, é o elemento textual que será apresentado na página.
|
|
-->
|
|
|
|
<label class="Senha_label">Senha:</label><br>
|
|
|
|
<!--Input sendo a tag responsavel por o armazenamento de dados dedicados a ela, seu type é a definição do seu tipo, em outras palavras sendo um padrão de comportamento do campo input, neste caso sendo do padrão neste caso sendo do padrão password que comporta todos os elementos textuais como uma senha.
|
|
-Size sendo responsavel pelo o tamanho da fonte.
|
|
-Placholder sendo uma um texto presente dentro do campo input que desaparece ao iniciar a escrita.
|
|
-Required sendo a definição de um campo obrigatorio de resgitros empedido o usuario avançar sem colocar todos os dados no campo input.
|
|
-->
|
|
|
|
<input class="Senha_input" type="password" name="password" id="password" size="20"
|
|
placeholder="Escreva uma senha forte" required>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!--
|
|
Div 4 campo input área botão, basicamene focalizada somente na edição do próprio botão de enviu do log.
|
|
Sendo sua tag principal button, com o seu type definido sbumit para o envio de todo o conteudo do proprio painel.
|
|
|
|
Ponto importante a escrita depois da abertura da tag e antes do fechamento dela, é o elemento textual que será apresentado na página.
|
|
-->
|
|
|
|
<div>
|
|
|
|
<button class="botao" type="sbumit" id="submit" name="submit">Ok</button>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script language="javascript">
|
|
document.getElementById("usuario").focus();
|
|
</script>
|
|
|
|
</main>
|
|
|
|
</body>
|
|
|
|
</html> |