Atualização 1
This commit is contained in:
parent
6a9fb45829
commit
af79066ca0
|
|
@ -61,6 +61,7 @@ div.ativo {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.capitulo_1:hover {
|
.capitulo_1:hover {
|
||||||
|
|
||||||
width: 15vw;
|
width: 15vw;
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
/*Usar para construir toda a estrutura padrão do ambiente */
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
/*Definir elementos que estão sendo importando ou pré definidos*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: fonteTi;
|
||||||
|
src: url(../../Acessts/Fontes/zekton\ rg.otf);
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: fonteTa;
|
||||||
|
src: url(../../Acessts/Fontes/MADE\ Evolve\ Sans\ Bold\ \(PERSONAL\ USE\).otf);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Alinhamento de definições para todo o ambiente do usuário*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
|
||||||
|
/*Fundos das telas de iframe de cada monitoramento*/
|
||||||
|
--fundo_5: rgb(226, 226, 226);
|
||||||
|
|
||||||
|
/*padrão de fonts*/
|
||||||
|
--font_titulo: fonteTi;
|
||||||
|
--font_conteudo: fonteTa;
|
||||||
|
|
||||||
|
/*Cor matriz*/
|
||||||
|
--Matriz: #ffffff;
|
||||||
|
|
||||||
|
/*Paleta de cores padrão*/
|
||||||
|
--Cor_Primaria_1: #1B8C51;
|
||||||
|
--Cor_Primaria_2: #1B8C77;
|
||||||
|
--Cor_Primaria_3: #1B7C8C;
|
||||||
|
--Cor_Primaria_4: #1B8C2A;
|
||||||
|
--Cor_Primaria_5: #1B588C;
|
||||||
|
|
||||||
|
/*Paleta de cores padrão claro*/
|
||||||
|
--Cor_Segundaria_1_1: #22bb6c;
|
||||||
|
--Cor_Segundaria_2_1: #22c0a3;
|
||||||
|
--Cor_Segundaria_3_1: #26b1c7;
|
||||||
|
--Cor_Segundaria_4_1: #26c03a;
|
||||||
|
--Cor_Segundaria_5_1: #1478cf;
|
||||||
|
|
||||||
|
/*Paleta de cores padrão escuro*/
|
||||||
|
--Cor_Segundaria_1_1: #115834;
|
||||||
|
--Cor_Segundaria_2_2: #125f51;
|
||||||
|
--Cor_Segundaria_3_2: #1B7C8C;
|
||||||
|
--Cor_Segundaria_4_2: #105018;
|
||||||
|
--Cor_Segundaria_5_2: #123655;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -1,55 +1,3 @@
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: fonteTi;
|
|
||||||
src: url(../Acessts/Fontes/zekton\ rg.otf);
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: fonteTa;
|
|
||||||
src: url(../Acessts/Fontes/MADE\ Evolve\ Sans\ Bold\ \(PERSONAL\ USE\).otf);
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: fonteseta;
|
|
||||||
src: url(../Acessts/Fontes/venus\ rising\ rg.otf);
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
|
||||||
|
|
||||||
--fundo_1: #1478cf;
|
|
||||||
--fundo_2: #1B588C;
|
|
||||||
--fudno_3: #ffffff;
|
|
||||||
--fundo_4: #123655;
|
|
||||||
/*Fundos das telas de iframe de cada monitoramento*/
|
|
||||||
--fundo_5: rgb(226, 226, 226);
|
|
||||||
|
|
||||||
--font_titulo: fonteTi;
|
|
||||||
--font_conteudo: fonteTa;
|
|
||||||
|
|
||||||
--variante_font_1: #ffffff;
|
|
||||||
--variante_font_2: #000000;
|
|
||||||
--variante_font_3: #1B588C;
|
|
||||||
--variante_font_4: #1478cf;
|
|
||||||
|
|
||||||
--sombra_variante_1: #000000;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Estilos para o tema escuro */
|
|
||||||
.dark-theme {
|
|
||||||
background-color: #1B588C;
|
|
||||||
color: #1478CF;
|
|
||||||
|
|
||||||
--font_titulo: fonteTi;
|
|
||||||
--font_conteudo: fonteTa;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
422
Css/padrao.css
422
Css/padrao.css
|
|
@ -1,422 +0,0 @@
|
||||||
/*----------------------------- Cabe<62>alho inicial do site com os iconis externos -------------------------------------- */
|
|
||||||
|
|
||||||
/* Define as margens e preenchimentos padr<64>o para o corpo e a p<>gina HTML */
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Estilos para o Bloco_1 */
|
|
||||||
.Bloco_1 {
|
|
||||||
position: absolute;
|
|
||||||
/* Define a posi<73><69>o absoluta do bloco */
|
|
||||||
top: 0vh;
|
|
||||||
/* Alinha o topo do bloco */
|
|
||||||
display: flex;
|
|
||||||
/* Define o display como flex<65>vel */
|
|
||||||
justify-content: flex-end;
|
|
||||||
/* Alinha os itens <20> direita */
|
|
||||||
width: 100%;
|
|
||||||
/* Define a largura total */
|
|
||||||
backdrop-filter: blur(1vw);
|
|
||||||
/* Aplica um efeito de desfoque ao fundo */
|
|
||||||
background-color: #3535352a;
|
|
||||||
/* Cor de fundo com transpar<61>ncia */
|
|
||||||
|
|
||||||
/* Defini<6E><69>o de preenchimento e altura */
|
|
||||||
padding-top: 10px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
height: 3.9vh;
|
|
||||||
z-index: 99999;
|
|
||||||
/* Z-index para posicionamento em camadas */
|
|
||||||
}
|
|
||||||
|
|
||||||
.Bloco_1 a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Estilos para a classe icon2 */
|
|
||||||
.icon2 {
|
|
||||||
width: 1.6vw;
|
|
||||||
/* Largura do <20>cone */
|
|
||||||
padding-right: 20px;
|
|
||||||
/* Preenchimento <20> direita */
|
|
||||||
transition: ease 1s;
|
|
||||||
/* Transi<73><69>o suave */
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon2:hover {
|
|
||||||
transform: scale(1.5);
|
|
||||||
/* Aumenta o tamanho do <20>cone ao passar o mouse */
|
|
||||||
transition: ease 1s;
|
|
||||||
/* Transi<73><69>o suave */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*----------------------------- Fechamento do Cabe<62>alho inicial da p<>gina -------------------------------------- */
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------- Fontes externas que est<73>o sendo usadas no site -------------------------------------- */
|
|
||||||
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: fonteTi;
|
|
||||||
src: url(../Acessts/Fontes/zekton\ rg.otf);
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: fonteTa;
|
|
||||||
src: url(../Acessts/Fontes/MADE\ Evolve\ Sans\ Bold\ \(PERSONAL\ USE\).otf);
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: fonteseta;
|
|
||||||
src: url(../Acessts/Fontes/venus\ rising\ rg.otf);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*----------------------------- Fechamento das fontes que est<73>o sendo usados no site -------------------------------------- */
|
|
||||||
|
|
||||||
/*----------------------------- Todos os elementos dedicados para o menu -------------------------------------- */
|
|
||||||
|
|
||||||
/* Estilos para o Bloco_nav_1 */
|
|
||||||
.Bloco_nav_1 {
|
|
||||||
position: absolute;
|
|
||||||
/* Define a posi<73><69>o absoluta do bloco */
|
|
||||||
top: 8vh;
|
|
||||||
/* Alinha o topo do bloco */
|
|
||||||
display: flex;
|
|
||||||
/* Define o display como flex<65>vel */
|
|
||||||
flex-direction: row;
|
|
||||||
/* Define a dire<72><65>o dos itens como linha */
|
|
||||||
justify-content: space-around;
|
|
||||||
/* Distribui o espa<70>o ao redor dos itens */
|
|
||||||
backdrop-filter: blur(1vw);
|
|
||||||
/* Aplica um efeito de desfoque ao fundo */
|
|
||||||
width: 100%;
|
|
||||||
/* Define a largura total */
|
|
||||||
background-color: #3535352a;
|
|
||||||
/* Cor de fundo com transpar<61>ncia */
|
|
||||||
padding: 2px 0px;
|
|
||||||
/* Preenchimento superior e inferior */
|
|
||||||
height: 10vh;
|
|
||||||
/* Altura do bloco */
|
|
||||||
z-index: 99;
|
|
||||||
/* Z-index para posicionamento em camadas */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Estilos para os links no menu */
|
|
||||||
.Bloco_nav_1 a {
|
|
||||||
text-decoration: none;
|
|
||||||
/* Remove a decora<72><61>o do link */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Estilos para o Bloco_nav_2 */
|
|
||||||
.Bloco_nav_2 {
|
|
||||||
width: 60vw;
|
|
||||||
/* Largura do bloco */
|
|
||||||
order: 2;
|
|
||||||
/* Define a ordem do bloco */
|
|
||||||
display: flex;
|
|
||||||
/* Define o display como flex<65>vel */
|
|
||||||
align-content: center;
|
|
||||||
/* Alinha o conte<74>do verticalmente */
|
|
||||||
align-items: center;
|
|
||||||
/* Alinha os itens verticalmente */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Estilos para os itens do menu */
|
|
||||||
.nav_bloco_iten {
|
|
||||||
display: inline-block;
|
|
||||||
/* Define o display como bloco */
|
|
||||||
width: 6vw;
|
|
||||||
/* Largura do item */
|
|
||||||
padding-left: 5vw;
|
|
||||||
/* Preenchimento <20> esquerda */
|
|
||||||
font-size: 1.3vw;
|
|
||||||
/* Tamanho da fonte */
|
|
||||||
font-family: fonteTi;
|
|
||||||
/* Fonte */
|
|
||||||
justify-content: space-around;
|
|
||||||
/* Distribui o espa<70>o ao redor dos itens */
|
|
||||||
color: white;
|
|
||||||
/* Cor do texto */
|
|
||||||
transition: ease 1s;
|
|
||||||
/* Transi<73><69>o suave */
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav_bloco_iten:hover {
|
|
||||||
color: rgb(0, 89, 255);
|
|
||||||
/* Cor do texto ao passar o mouse */
|
|
||||||
transition: ease 1s;
|
|
||||||
/* Transi<73><69>o suave */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Estilos para a classe Logo */
|
|
||||||
.Logo {
|
|
||||||
order: 1;
|
|
||||||
/* Define a ordem do elemento */
|
|
||||||
width: 15vw;
|
|
||||||
/* Largura do elemento */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Estilos para o Botao1 */
|
|
||||||
.Botao1 {
|
|
||||||
order: 3;
|
|
||||||
/* Define a ordem do elemento */
|
|
||||||
position: relative;
|
|
||||||
/* Define a posi<73><69>o como relativa */
|
|
||||||
display: flex;
|
|
||||||
/* Define o display como flex<65>vel */
|
|
||||||
align-items: center;
|
|
||||||
/* Alinha os itens verticalmente */
|
|
||||||
transition: ease 1s;
|
|
||||||
/* Transi<73><69>o suave */
|
|
||||||
}
|
|
||||||
|
|
||||||
.Botao1 button {
|
|
||||||
outline: none;
|
|
||||||
/* Remove o contorno do bot<6F>o */
|
|
||||||
background: none;
|
|
||||||
/* Remove o plano de fundo do bot<6F>o */
|
|
||||||
border: none;
|
|
||||||
/* Remove a borda do bot<6F>o */
|
|
||||||
color: white;
|
|
||||||
/* Cor do texto */
|
|
||||||
font-family: fonteTi;
|
|
||||||
/* Fonte */
|
|
||||||
font-size: 1.2vw;
|
|
||||||
/* Tamanho da fonte */
|
|
||||||
border: 2px solid white;
|
|
||||||
/* Borda do bot<6F>o */
|
|
||||||
padding: 1vh 1vw;
|
|
||||||
/* Preenchimento do bot<6F>o */
|
|
||||||
}
|
|
||||||
|
|
||||||
.Botao1 a {
|
|
||||||
text-decoration: none;
|
|
||||||
/* Remove a decora<72><61>o do link */
|
|
||||||
}
|
|
||||||
|
|
||||||
.Botao1:hover {
|
|
||||||
transform: scale(0.8);
|
|
||||||
/* Reduz o tamanho ao passar o mouse */
|
|
||||||
cursor: pointer;
|
|
||||||
/* Altera o cursor ao passar o mouse */
|
|
||||||
transition: ease 1s;
|
|
||||||
/* Transi<73><69>o suave */
|
|
||||||
}
|
|
||||||
|
|
||||||
.Botao1 button:hover {
|
|
||||||
border: 2px solid rgb(0, 89, 255);
|
|
||||||
/* Borda do bot<6F>o ao passar o mouse */
|
|
||||||
color: rgb(0, 89, 255);
|
|
||||||
/* Cor do texto ao passar o mouse */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*----------------------------- Fechamento do menu -------------------------------------- */
|
|
||||||
|
|
||||||
/*----------------------------- Rodap<61> final do site -------------------------------------- */
|
|
||||||
|
|
||||||
/* Estilos para o Bloco_Rodape1 */
|
|
||||||
.Bloco_Rodape1 {
|
|
||||||
display: flex;
|
|
||||||
/* Define o display como flex<65>vel */
|
|
||||||
flex-direction: row;
|
|
||||||
/* Define a dire<72><65>o dos itens como linha */
|
|
||||||
justify-content: space-around;
|
|
||||||
/* Distribui o espa<70>o ao redor dos itens */
|
|
||||||
background-color: #3457a2;
|
|
||||||
/* Cor de fundo */
|
|
||||||
padding: 20px;
|
|
||||||
/* Preenchimento */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Estilos para a Coluna_Rod_1 */
|
|
||||||
.Coluna_Rod_1 {
|
|
||||||
width: 25vw;
|
|
||||||
/* Largura da coluna */
|
|
||||||
border-left: 1px solid white;
|
|
||||||
/* Borda <20> esquerda */
|
|
||||||
display: flex;
|
|
||||||
/* Define o display como flex<65>vel */
|
|
||||||
flex-direction: column;
|
|
||||||
/* Define a dire<72><65>o dos itens como coluna */
|
|
||||||
justify-content: center;
|
|
||||||
/* Alinha os itens verticalmente */
|
|
||||||
align-items: center;
|
|
||||||
/* Alinha os itens horizontalmente */
|
|
||||||
align-content: center;
|
|
||||||
/* Alinha o conte<74>do verticalmente */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Estilos para as Coluna_Rod_2, Coluna_Rod_3, Coluna_Rod_4 */
|
|
||||||
.Coluna_Rod_2,
|
|
||||||
.Coluna_Rod_3,
|
|
||||||
.Coluna_Rod_4 {
|
|
||||||
width: 20vw;
|
|
||||||
/* Largura das colunas */
|
|
||||||
display: flex;
|
|
||||||
/* Define o display como flex<65>vel */
|
|
||||||
justify-content: center;
|
|
||||||
/* Alinha os itens horizontalmente */
|
|
||||||
align-items: center;
|
|
||||||
/* Alinha os itens verticalmente */
|
|
||||||
align-content: center;
|
|
||||||
/* Alinha o conte<74>do verticalmente */
|
|
||||||
border-left: 1px solid white;
|
|
||||||
/* Borda <20> esquerda */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Estilos para os links nas colunas */
|
|
||||||
.Coluna_Rod_2 a,
|
|
||||||
.Coluna_Rod_3 a,
|
|
||||||
.Coluna_Rod_4 a {
|
|
||||||
font-family: fonteTi;
|
|
||||||
/* Fonte */
|
|
||||||
color: white;
|
|
||||||
/* Cor do texto */
|
|
||||||
text-decoration: none;
|
|
||||||
/* Remove a decora<72><61>o do link */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Estilos para as listas nas colunas */
|
|
||||||
.Coluna_Rod_2 li,
|
|
||||||
.Coluna_Rod_3 li,
|
|
||||||
.Coluna_Rod_4 li {
|
|
||||||
font-family: fonteTi;
|
|
||||||
/* Fonte */
|
|
||||||
font-size: 1vw;
|
|
||||||
/* Tamanho da fonte */
|
|
||||||
list-style: none;
|
|
||||||
/* Remove os marcadores de lista */
|
|
||||||
transition: 0.2s ease;
|
|
||||||
/* Transi<73><69>o suave */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Estilos para os itens da lista ao passar o mouse */
|
|
||||||
.Coluna_Rod_2 li:hover,
|
|
||||||
.Coluna_Rod_3 li:hover,
|
|
||||||
.Coluna_Rod_4 li:hover {
|
|
||||||
font-family: fonteTi;
|
|
||||||
/* Fonte */
|
|
||||||
font-size: 1vw;
|
|
||||||
/* Tamanho da fonte */
|
|
||||||
color: #11bb9c;
|
|
||||||
/* Cor do texto ao passar o mouse */
|
|
||||||
list-style: none;
|
|
||||||
/* Remove os marcadores de lista */
|
|
||||||
transition: 0.2s ease;
|
|
||||||
/* Transi<73><69>o suave */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Estilos para os t<>tulos nas colunas */
|
|
||||||
.Coluna_Rod_2 h2,
|
|
||||||
.Coluna_Rod_3 h2,
|
|
||||||
.Coluna_Rod_4 h2 {
|
|
||||||
font-family: fonteTi;
|
|
||||||
/* Fonte */
|
|
||||||
text-align: center;
|
|
||||||
/* Alinhamento do texto no centro */
|
|
||||||
color: white;
|
|
||||||
/* Cor do texto */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Estilos para a sub_coluna_Rod_1_1 */
|
|
||||||
.sub_coluna_Rod_1_1 img {
|
|
||||||
padding: auto;
|
|
||||||
/* Preenchimento autom<6F>tico */
|
|
||||||
width: 10vw;
|
|
||||||
/* Largura da imagem */
|
|
||||||
font-size: 15px;
|
|
||||||
/* Tamanho da fonte */
|
|
||||||
color: white;
|
|
||||||
/* Cor do texto */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Estilos para a sub_coluna_Rod_1_2 */
|
|
||||||
.sub_coluna_Rod_1_2 {
|
|
||||||
display: flex;
|
|
||||||
/* Define o display como flex<65>vel */
|
|
||||||
align-items: center;
|
|
||||||
/* Alinha os itens verticalmente */
|
|
||||||
justify-content: center;
|
|
||||||
/* Alinha os itens horizontalmente */
|
|
||||||
align-content: center;
|
|
||||||
/* Alinha o conte<74>do verticalmente */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Estilos para a classe icon2_rod */
|
|
||||||
.icon2_rod {
|
|
||||||
width: 1.6vw;
|
|
||||||
/* Largura do <20>cone */
|
|
||||||
gap: 160vw;
|
|
||||||
/* Espa<70>amento entre os <20>cones */
|
|
||||||
margin-top: 2vh;
|
|
||||||
/* Margem superior */
|
|
||||||
cursor: pointer;
|
|
||||||
/* Cursor do mouse */
|
|
||||||
padding: 5px;
|
|
||||||
/* Preenchimento */
|
|
||||||
border: solid 2px white;
|
|
||||||
/* Borda */
|
|
||||||
background-color: #3457a2;
|
|
||||||
/* Cor de fundo */
|
|
||||||
transition: ease 1s;
|
|
||||||
/* Transi<73><69>o suave */
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon2_rod:hover {
|
|
||||||
transform: scale(1.2);
|
|
||||||
/* Aumenta o tamanho ao passar o mouse */
|
|
||||||
transition: ease 1s;
|
|
||||||
/* Transi<73><69>o suave */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Estilos para os par<61>grafos dentro de Bloco_Rodape1 */
|
|
||||||
.Bloco_Rodape1 p {
|
|
||||||
padding: auto;
|
|
||||||
/* Preenchimento autom<6F>tico */
|
|
||||||
font-size: 1vw;
|
|
||||||
/* Tamanho da fonte */
|
|
||||||
font-family: fonteTi;
|
|
||||||
/* Fonte */
|
|
||||||
margin-left: 20px;
|
|
||||||
/* Margem esquerda */
|
|
||||||
color: white;
|
|
||||||
/* Cor do texto */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Estilos para o Bloco_Rodape2 */
|
|
||||||
.Bloco_Rodape2 {
|
|
||||||
background-color: #3457a2;
|
|
||||||
/* Cor de fundo */
|
|
||||||
border-top: solid 1px white;
|
|
||||||
/* Borda superior */
|
|
||||||
padding: 5px;
|
|
||||||
/* Preenchimento */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Estilos para os t<>tulos dentro de Bloco_Rodape2 */
|
|
||||||
.Bloco_Rodape2 h2 {
|
|
||||||
padding: auto;
|
|
||||||
/* Preenchimento autom<6F>tico */
|
|
||||||
font-size: 1vw;
|
|
||||||
/* Tamanho da fonte */
|
|
||||||
font-family: fonteTi;
|
|
||||||
/* Fonte */
|
|
||||||
color: white;
|
|
||||||
/* Cor do texto */
|
|
||||||
text-align: center;
|
|
||||||
/* Alinhamento do texto no centro */
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-message {
|
|
||||||
color: red;
|
|
||||||
margin-top: 1vh;
|
|
||||||
font-size: 1vw;
|
|
||||||
font-family: fonteTi;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------- Fechamento final do site -------------------------------------- */
|
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
/*Classe padrão para estilizar o dimensionamento de todas mensagens de erro*/
|
||||||
|
.error-message {
|
||||||
|
color: var(--Cor_Segundaria_2_1);
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Sub classe para edições especificas, para a tag p, usando como referencia da classe, error-message*/
|
||||||
|
.error-message p {
|
||||||
|
font-size: 1.2vw;
|
||||||
|
font-family: var(--font_conteudo);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Cria toda a estilização do painel de pop up*/
|
||||||
|
.pop {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 10000;
|
||||||
|
background-color: var(--Matriz);
|
||||||
|
border-bottom: 0.2vw solid var(--Cor_Segundaria_5_1);
|
||||||
|
border-top: 0.2vw solid var(--Cor_Segundaria_5_1);
|
||||||
|
border-left: 0.2vw solid var(--Cor_Segundaria_5_1);
|
||||||
|
border-right: 0.2vw solid var(--Cor_Segundaria_5_1);
|
||||||
|
|
||||||
|
color: var(--Cor_Segundaria_5_1);
|
||||||
|
width: 45vw;
|
||||||
|
|
||||||
|
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
font-size: 1.2vw;
|
||||||
|
font-family: var(--font_conteudo);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Cria toda a estilização de botão para fechar o pop up*/
|
||||||
|
.X {
|
||||||
|
position: absolute;
|
||||||
|
left: 0.5vw;
|
||||||
|
top: 0.8vh;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
color: var(--Cor_Segundaria_5_1);
|
||||||
|
font-family: var(--font_conteudo);
|
||||||
|
transition: 1s ease;
|
||||||
|
font-size: 1.5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Defini uma interatividade com o mouse, onde toda a vez que o mouse ficar sobre ele, ele por sua vez ira mudar de cor*/
|
||||||
|
.X:hover {
|
||||||
|
color: var(--Cor_Segundaria_2_1);
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
@ -1,14 +1,16 @@
|
||||||
|
/*importações de outros estilos css para o funcionamento desse proprio */
|
||||||
|
@import '../../global/import.css';
|
||||||
|
@import './Erros_login.css';
|
||||||
|
|
||||||
|
|
||||||
|
/*Alinhamento da propria pagina, tirar parametros bases da propria página html*/
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fundo {
|
/*Alinhamento da propria pagina, define um alinhamento de centralização do painel de login no centro da propria página*/
|
||||||
background-image: url('../../Acessts/Imagens/21321.png');
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.centralizar {
|
.centralizar {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -17,22 +19,16 @@
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
/*
|
||||||
font-family: fonteTi;
|
|
||||||
src: url(../Acessts/Fontes/zekton\ rg.otf);
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: fonteTa;
|
|
||||||
src: url(../Acessts/Fontes/MADE\ Evolve\ Sans\ Bold\ \(PERSONAL\ USE\).otf);
|
|
||||||
}
|
|
||||||
|
|
||||||
.invisivel {
|
.invisivel {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*Sendo todo o painel principal da pagina, e aplicações de alinhamento dentro desse proprio painel, sendo o proprio corpo do painel de login*/
|
||||||
.Bloco {
|
.Bloco {
|
||||||
box-shadow: 10px 10px 5px rgb(68, 68, 68);
|
box-shadow: 10px 10px 5px var(--Cor_Segundaria_5_2);
|
||||||
|
;
|
||||||
padding: 30px 45px;
|
padding: 30px 45px;
|
||||||
width: 30vw;
|
width: 30vw;
|
||||||
height: 75vh;
|
height: 75vh;
|
||||||
|
|
@ -50,29 +46,31 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*sendo a classe que defini alinhamentos para a propria logo*/
|
||||||
.logo {
|
.logo {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*Sendo uma especificação para toda a tag img, que esteja dentro da tag que está usando a classe logo, terá esse dimensionamento */
|
||||||
.logo img {
|
.logo img {
|
||||||
width: 10vw;
|
width: 10vw;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*Resumindamente lida diretamente em alinhar todos os elementos inputs e labels dentro do painel de login*/
|
||||||
.login_central {
|
.login_central {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: rgb(0, 119, 255);
|
color: var(--Cor_Segundaria_5_1);
|
||||||
font-family: fonteTi;
|
font-family: var(--font_conteudo);
|
||||||
font-size: 1.5vw;
|
font-size: 1.5vw;
|
||||||
padding: 0vw 1vh;
|
padding: 0vw 1vh;
|
||||||
margin-bottom: 4vh;
|
margin-bottom: 4vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*São as caixa de alinhamento tanto para o tudo relacionado a senha quanto para tudo que é relacionado a login*/
|
||||||
.Login,
|
.Login,
|
||||||
.Senha {
|
.Senha {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -85,6 +83,7 @@
|
||||||
margin-top: 2vh;
|
margin-top: 2vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*São os textos sobre tanto a caixa de texto de usuario quanto a caixa de texto de senha*/
|
||||||
.Login_label,
|
.Login_label,
|
||||||
.Senha_label {
|
.Senha_label {
|
||||||
|
|
||||||
|
|
@ -96,12 +95,14 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*edição especifica usando as classes superiores para editar tag img dento delas, sendo os iconis de login e senha*/
|
||||||
.Login img,
|
.Login img,
|
||||||
.Senha img {
|
.Senha img {
|
||||||
width: 3.5vw;
|
width: 3.5vw;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*São a edição sobre as caixa de texto, tanto do usuário quanto da senha.*/
|
||||||
.Login_input,
|
.Login_input,
|
||||||
.Senha_input {
|
.Senha_input {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
|
|
@ -114,13 +115,15 @@
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
||||||
font-size: 1vw;
|
font-size: 1vw;
|
||||||
color: #0077ff;
|
color: var(--Cor_Segundaria_5_1);
|
||||||
border: 2.5px solid #0077ff;
|
border: 2.5px solid var(--Cor_Segundaria_5_1);
|
||||||
|
|
||||||
|
|
||||||
transition: 1s ease;
|
transition: 1s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*Aqui só defini alguma dependencia de dimensionamento da tags inputs para as tags superiores com as classes .Login_input,
|
||||||
|
.Senha_input, ao mesmo tempo que defini os fundo do input transparentes */
|
||||||
.Login_input input,
|
.Login_input input,
|
||||||
.Senha_input input {
|
.Senha_input input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -128,110 +131,31 @@
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*Defini pequena mudança de cor, para o momento que o mouse interage com o input*/
|
||||||
.Login_input:hover,
|
.Login_input:hover,
|
||||||
.Senha_input:hover {
|
.Senha_input:hover {
|
||||||
border: 2.5px solid rgb(30, 121, 132);
|
border: 2.5px solid var(--Cor_Segundaria_2_1);
|
||||||
transition: 1s ease;
|
transition: 1s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*Defini edições em funcionalidade dos inputs que no caso é o placeholder, que resumidamente é textinho que fica inicialmente, antes do usuario escrever.*/
|
||||||
.Login input::placeholder,
|
.Login input::placeholder,
|
||||||
.Senha input::placeholder {
|
.Senha input::placeholder {
|
||||||
|
|
||||||
font-family: fonteTi;
|
font-family: var(--font_conteudo);
|
||||||
color: #696969;
|
color: #696969;
|
||||||
font-size: 1vw;
|
font-size: 1vw;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.select-menu {
|
/*Define edições para o botão do painel de login*/
|
||||||
margin-top: 2vh;
|
|
||||||
width: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select {
|
|
||||||
border: 0.2vw solid #0077ff;
|
|
||||||
width: 100%;
|
|
||||||
height: 6vh;
|
|
||||||
color: #0077ff;
|
|
||||||
font-family: fonteTi;
|
|
||||||
|
|
||||||
font-weight: 500;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
transition: ease 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select:hover {
|
|
||||||
background-color: #0077ff;
|
|
||||||
width: 100%;
|
|
||||||
height: 6vh;
|
|
||||||
color: #ffffff;
|
|
||||||
font-family: fonteTi;
|
|
||||||
|
|
||||||
font-weight: 500;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
transition: ease 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.options-list {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 0;
|
|
||||||
background-color: rgba(139, 139, 139, 0.459);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
|
|
||||||
overflow-y: auto;
|
|
||||||
transition: 1s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.option {
|
|
||||||
border-top: 0.2vh solid rgb(255, 255, 255);
|
|
||||||
color: white;
|
|
||||||
font-family: fonteTi;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
|
|
||||||
padding: 8px 0;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: .3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.option:hover {
|
|
||||||
background-color: #0077ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.options-list::-webkit-scrollbar {
|
|
||||||
background-color: transparent;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.options-list::-webkit-scrollbar-thumb {
|
|
||||||
background-color: #0077ff;
|
|
||||||
width: 0.2vw;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.options-list.active {
|
|
||||||
position: absolute;
|
|
||||||
height: 20vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.botao {
|
.botao {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 6vh;
|
height: 6vh;
|
||||||
background-color: #0077ff;
|
background-color: var(--Cor_Segundaria_5_1);
|
||||||
font-family: fonteTi;
|
font-family: var(--font_conteudo);
|
||||||
font-size: 1vw;
|
font-size: 1vw;
|
||||||
color: rgb(255, 255, 255);
|
color: rgb(255, 255, 255);
|
||||||
border: none;
|
border: none;
|
||||||
|
|
@ -239,8 +163,9 @@
|
||||||
transition: 1s ease;
|
transition: 1s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*Define pequena interatividade com o mouse, onde o botão muda a cor de seu fundo e seu proprio dimensionamento muda*/
|
||||||
.botao:hover {
|
.botao:hover {
|
||||||
background-color: rgb(30, 121, 132);
|
background-color: var(--Cor_Segundaria_2_1);
|
||||||
color: white;
|
color: white;
|
||||||
transform: scale(0.9);
|
transform: scale(0.9);
|
||||||
transition: 1s ease;
|
transition: 1s ease;
|
||||||
|
|
@ -0,0 +1,238 @@
|
||||||
|
// Função para obter a URL base do servidor
|
||||||
|
async function getApiUrl() {
|
||||||
|
try {
|
||||||
|
const response = await fetch('../ambiente_python/php/config_url.php'); // Solicita a URL base do PHP
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Network response was not ok');
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
return data.apiUrl; // Retorna a URL base
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching API URL:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adiciona um ouvinte de evento ao formulário de login para tratar o evento de submissão
|
||||||
|
document.getElementById("formLogin").addEventListener("submit", async function (event) {
|
||||||
|
event.preventDefault(); // Previne o comportamento padrão do formulário
|
||||||
|
|
||||||
|
// Obtém os elementos do DOM correspondentes ao nome de usuário, senha e mensagem de erro
|
||||||
|
const usernameElement = document.getElementById("username");
|
||||||
|
const passwordElement = document.getElementById("password");
|
||||||
|
const errorMessageElement = document.getElementById("errorMessage");
|
||||||
|
const erro5003 = document.getElementById("erro_503");
|
||||||
|
|
||||||
|
|
||||||
|
// Limpa qualquer mensagem de erro anterior e bordas de campo
|
||||||
|
errorMessageElement.innerHTML = '';
|
||||||
|
erro5003.innerHTML = '';
|
||||||
|
usernameElement.style.borderColor = '';
|
||||||
|
passwordElement.style.borderColor = '';
|
||||||
|
|
||||||
|
// Verifica se os elementos do nome de usuário e senha existem
|
||||||
|
if (!usernameElement || !passwordElement) {
|
||||||
|
console.error('Username or password element not found');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Obtém os valores inseridos pelo usuário nos campos de nome de usuário e senha
|
||||||
|
const username = usernameElement.value.trim();
|
||||||
|
const password = passwordElement.value.trim();
|
||||||
|
|
||||||
|
|
||||||
|
/*Caso em que o usuario não preenche os dois campos inputs, ou um deles*/
|
||||||
|
if (!username || !password) {
|
||||||
|
errorMessageElement.innerHTML = `<p>Preencha ambos os campos</p>`;
|
||||||
|
usernameElement.style.borderColor = 'red';
|
||||||
|
passwordElement.style.borderColor = 'red';
|
||||||
|
|
||||||
|
errorMessageElement.style.height = '10vh';
|
||||||
|
errorMessageElement.style.opacity = '1';
|
||||||
|
errorMessageElement.style.transition = ' 1s ease';
|
||||||
|
|
||||||
|
const tempoDeExibicao = 5000;
|
||||||
|
setTimeout(() => {
|
||||||
|
|
||||||
|
errorMessageElement.style.height = '0vh'; // Oculta a mensagem
|
||||||
|
usernameElement.style.borderColor = '#1478cf';
|
||||||
|
passwordElement.style.borderColor = '#1478cf';
|
||||||
|
|
||||||
|
errorMessageElement.style.opacity = '0';
|
||||||
|
errorMessageElement.style.transition = ' 1s ease';
|
||||||
|
}, tempoDeExibicao);
|
||||||
|
|
||||||
|
return;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Obtém a URL base do servidor
|
||||||
|
const apiUrl = await getApiUrl();
|
||||||
|
|
||||||
|
// Envia uma requisição POST para o servidor de login com os dados de usuário e senha
|
||||||
|
const response = await fetch(`${apiUrl}/login`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json' // Define o tipo de conteúdo como JSON
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ username, password }) // Converte os dados para JSON antes de enviar
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/*Caso de sucesso*/
|
||||||
|
if (response.ok) {
|
||||||
|
|
||||||
|
const data = await response.json(); // Extrai os dados JSON da resposta
|
||||||
|
localStorage.setItem('x-access-token', data.token); // Armazena o token de autenticação no localStorage
|
||||||
|
// Redireciona o usuário para a página do ambiente do usuário
|
||||||
|
window.location.href = "../ambiente_python/Ambiente_Usuario copy.html";
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Caso de erro*/
|
||||||
|
else {
|
||||||
|
|
||||||
|
/*Variavel que recebe os status de resposta do servidor, sendo respose uma variavel enquanto status uma tag especial do javascript*/
|
||||||
|
const comunica = response.status
|
||||||
|
|
||||||
|
/*Caso erro, onde o email usado é invalido*/
|
||||||
|
if (comunica === 400) {
|
||||||
|
|
||||||
|
errorMessageElement.innerHTML = `<p>O E-mail usado é invalido, formato esperado usuario@domino.com.br</p>`;
|
||||||
|
|
||||||
|
|
||||||
|
errorMessageElement.style.height = '10vh';
|
||||||
|
errorMessageElement.style.opacity = '1';
|
||||||
|
|
||||||
|
usernameElement.style.borderColor = 'red'; // Marca o campo do usuário com erro
|
||||||
|
errorMessageElement.style.transition = ' 1s ease';
|
||||||
|
|
||||||
|
const tempoDeExibicao = 5000;
|
||||||
|
setTimeout(() => {
|
||||||
|
|
||||||
|
usernameElement.style.borderColor = '#1478cf'; // Marca o campo do usuário com erro
|
||||||
|
errorMessageElement.style.height = '0vh'; // Oculta a mensagem
|
||||||
|
errorMessageElement.style.opacity = '0';
|
||||||
|
errorMessageElement.style.transition = ' 1s ease';
|
||||||
|
}, tempoDeExibicao);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Caso erro, quando há um erro na autenticação com o banco de dados*/
|
||||||
|
if (comunica === 401) {
|
||||||
|
|
||||||
|
errorMessageElement.innerHTML = `<p>Erro na autenticação, informe seu usuário ao suporte@itguys.com.br</p>`;
|
||||||
|
|
||||||
|
|
||||||
|
errorMessageElement.style.height = '10vh';
|
||||||
|
errorMessageElement.style.opacity = '1';
|
||||||
|
errorMessageElement.style.transition = ' 1s ease';
|
||||||
|
|
||||||
|
const tempoDeExibicao = 5000;
|
||||||
|
setTimeout(() => {
|
||||||
|
|
||||||
|
errorMessageElement.style.height = '0vh'; // Oculta a mensagem
|
||||||
|
errorMessageElement.style.opacity = '0';
|
||||||
|
errorMessageElement.style.transition = ' 1s ease';
|
||||||
|
}, tempoDeExibicao);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Caso erro, onde o usuário ou senha podem estar incorretos*/
|
||||||
|
if (comunica === 404) {
|
||||||
|
|
||||||
|
errorMessageElement.innerHTML = `<p>Usuario ou Senha estão incorretos</p>`;
|
||||||
|
|
||||||
|
|
||||||
|
errorMessageElement.style.height = '10vh';
|
||||||
|
errorMessageElement.style.opacity = '1';
|
||||||
|
|
||||||
|
usernameElement.style.borderColor = 'red'; // Marca o campo do usuário com erro
|
||||||
|
passwordElement.style.borderColor = 'red'; // Marca o campo da senha com erro
|
||||||
|
errorMessageElement.style.transition = ' 1s ease';
|
||||||
|
|
||||||
|
const tempoDeExibicao = 5000;
|
||||||
|
setTimeout(() => {
|
||||||
|
|
||||||
|
usernameElement.style.borderColor = '#1478cf'; // Marca o campo do usuário com erro
|
||||||
|
passwordElement.style.borderColor = '#1478cf'; // Marca o campo da senha com erro
|
||||||
|
errorMessageElement.style.height = '0vh'; // Oculta a mensagem
|
||||||
|
errorMessageElement.style.opacity = '0';
|
||||||
|
errorMessageElement.style.transition = ' 1s ease';
|
||||||
|
}, tempoDeExibicao);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Caso de erro especial, que é apresentado em um pop up, essa estrutura pega a informações da resposta em json e os apresenta sobre o pop up na tela*/
|
||||||
|
if (comunica === 500) {
|
||||||
|
|
||||||
|
const erro_500 = await response.json();
|
||||||
|
const erroMessage = JSON.stringify(erro_500, null, 2); // O segundo argumento é para substituição, e o terceiro é para a indentação
|
||||||
|
|
||||||
|
erro5003.innerHTML = `<p> Contate o suporte suporte@itguys.com.br e informe esse erro ${erroMessage} </p>
|
||||||
|
<button class='X' id='x'>X</button>`;
|
||||||
|
erro5003.style.height = '45vh'; // Oculta a mensagem
|
||||||
|
erro5003.style.opacity = '1';
|
||||||
|
erro5003.style.transition = ' 1s ease';
|
||||||
|
|
||||||
|
//função para fechar o pop up de erro.
|
||||||
|
var botao = window.document.getElementById('x');
|
||||||
|
|
||||||
|
botao.addEventListener('click', clicou);
|
||||||
|
|
||||||
|
function clicou() {
|
||||||
|
erro5003.style.height = '0vh'; // Oculta a mensagem
|
||||||
|
erro5003.style.opacity = '0';
|
||||||
|
erro5003.style.transition = ' 1s ease';
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Caso de erro, onde acontece um problema na comunicação com o proprio servidor*/
|
||||||
|
if (comunica === 503) {
|
||||||
|
|
||||||
|
errorMessageElement.innerHTML = `<p>Não foi possivel se conectar ao servidor, informe ao suporte@itguys.com.br</p>`;
|
||||||
|
|
||||||
|
errorMessageElement.style.height = '15vh';
|
||||||
|
errorMessageElement.style.opacity = '1';
|
||||||
|
|
||||||
|
errorMessageElement.style.transition = ' 1s ease';
|
||||||
|
|
||||||
|
const tempoDeExibicao = 5000;
|
||||||
|
setTimeout(() => {
|
||||||
|
|
||||||
|
errorMessageElement.style.height = '0vh'; // Oculta a mensagem
|
||||||
|
errorMessageElement.style.opacity = '0';
|
||||||
|
errorMessageElement.style.transition = ' 1s ease';
|
||||||
|
}, tempoDeExibicao);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Caso de erro onde nem mesmo acontece uma comunicação com o servidor*/
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error:', error); // Loga qualquer erro ocorrido
|
||||||
|
|
||||||
|
errorMessageElement.innerHTML = '<p>Erro ao tentar se comunicar com o servidor. Por favor, tente novamente mais tarde, entre contato </p>';
|
||||||
|
errorMessageElement.style.height = '15vh';
|
||||||
|
errorMessageElement.style.opacity = '1';
|
||||||
|
errorMessageElement.style.transition = ' 1s ease';
|
||||||
|
|
||||||
|
|
||||||
|
const tempoDeExibicao = 5000;
|
||||||
|
setTimeout(() => {
|
||||||
|
errorMessageElement.style.height = '1vh';
|
||||||
|
errorMessageElement.style.opacity = '0';
|
||||||
|
errorMessageElement.style.transition = ' 1s ease';
|
||||||
|
}, tempoDeExibicao);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
74
js/login.js
74
js/login.js
|
|
@ -1,74 +0,0 @@
|
||||||
// Função para obter a URL base do servidor
|
|
||||||
async function getApiUrl() {
|
|
||||||
try {
|
|
||||||
const response = await fetch('../ambiente_python/php/config_url.php'); // Solicita a URL base do PHP
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error('Network response was not ok');
|
|
||||||
}
|
|
||||||
const data = await response.json();
|
|
||||||
return data.apiUrl; // Retorna a URL base
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching API URL:', error);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Adiciona um ouvinte de evento ao formulário de login para tratar o evento de submissão
|
|
||||||
document.getElementById("formLogin").addEventListener("submit", async function (event) {
|
|
||||||
event.preventDefault(); // Previne o comportamento padrão do formulário
|
|
||||||
|
|
||||||
// Obtém os elementos do DOM correspondentes ao nome de usuário, senha e mensagem de erro
|
|
||||||
const usernameElement = document.getElementById("username");
|
|
||||||
const passwordElement = document.getElementById("password");
|
|
||||||
const errorMessageElement = document.getElementById("errorMessage");
|
|
||||||
|
|
||||||
// Limpa qualquer mensagem de erro anterior e bordas de campo
|
|
||||||
errorMessageElement.innerHTML = '';
|
|
||||||
usernameElement.style.borderColor = '';
|
|
||||||
passwordElement.style.borderColor = '';
|
|
||||||
|
|
||||||
// Verifica se os elementos do nome de usuário e senha existem
|
|
||||||
if (!usernameElement || !passwordElement) {
|
|
||||||
console.error('Username or password element not found');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Obtém os valores inseridos pelo usuário nos campos de nome de usuário e senha
|
|
||||||
const username = usernameElement.value.trim();
|
|
||||||
const password = passwordElement.value.trim();
|
|
||||||
|
|
||||||
if (!username || !password) {
|
|
||||||
errorMessageElement.innerText = "Preencha ambos os campos.";
|
|
||||||
usernameElement.style.borderColor = 'red';
|
|
||||||
passwordElement.style.borderColor = 'red';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Obtém a URL base do servidor
|
|
||||||
const apiUrl = await getApiUrl();
|
|
||||||
|
|
||||||
// Envia uma requisição POST para o servidor de login com os dados de usuário e senha
|
|
||||||
const response = await fetch(`${apiUrl}/login`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json' // Define o tipo de conteúdo como JSON
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ username, password }) // Converte os dados para JSON antes de enviar
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
const data = await response.json(); // Extrai os dados JSON da resposta
|
|
||||||
localStorage.setItem('x-access-token', data.token); // Armazena o token de autenticação no localStorage
|
|
||||||
// Redireciona o usuário para a página do ambiente do usuário
|
|
||||||
window.location.href = "../ambiente_python/Ambiente_Usuario copy.html";
|
|
||||||
} else {
|
|
||||||
errorMessageElement.innerText = "Usuário ou senha incorreto"; // Exibe mensagem de erro
|
|
||||||
usernameElement.style.borderColor = 'red'; // Marca o campo do usuário com erro
|
|
||||||
passwordElement.style.borderColor = 'red'; // Marca o campo da senha com erro
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error:', error); // Loga qualquer erro ocorrido
|
|
||||||
errorMessageElement.innerHTML = 'Erro ao tentar se comunicar com o servidor. Por favor, tente novamente mais tarde.';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
42
login.html
42
login.html
|
|
@ -1,46 +1,66 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en-us">
|
<html lang="pt-br">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Login | iTGuys</title>
|
<title>Login | iTGuys</title>
|
||||||
|
<link rel="stylesheet" href="./Css/page/login/Estrutura_login.css">
|
||||||
<link rel="stylesheet" href="./Css/Ambiente_Usuario/login.css">
|
<link rel="icon" type="image/x-icon" href="./Acessts/Imagens/iT_Guys/logo1.png">
|
||||||
<link rel="stylesheet" href="./Css/padrao.css">
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="fundo centralizar">
|
<!--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="pop" id="erro_503">
|
||||||
|
</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>
|
<main>
|
||||||
<div>
|
<div>
|
||||||
<div id="bloco" class="Bloco">
|
<!-- 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 -->
|
||||||
|
<!-- id="bloco" V -->
|
||||||
|
<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">
|
<div class="logo">
|
||||||
<img src="./Acessts/Imagens/iT_Guys/Logo_itGuys.png">
|
<img src="./Acessts/Imagens/iT_Guys/Logo_itGuys.png">
|
||||||
</div>
|
</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 id="formLogin">
|
<form id="formLogin">
|
||||||
|
<!--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">
|
<div class="login_central">
|
||||||
<h1>Login</h1>
|
<h1>Login</h1>
|
||||||
</div>
|
</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="Login">
|
<div class="Login">
|
||||||
<img src="./Acessts/Imagens/Iconis/User 2.png" alt="">
|
<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"
|
<input class="Login_input" type="text" name="usuario" id="username"
|
||||||
placeholder="usuario@dominio.com.br" autocomplete="username" required>
|
placeholder="usuario@dominio.com.br" autocomplete="username">
|
||||||
</div>
|
</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">
|
<div class="Senha">
|
||||||
<img src="./Acessts/Imagens/Iconis/User 1.png" alt="">
|
<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"
|
<input class="Senha_input" type="password" name="senha" id="password"
|
||||||
placeholder="Escreva sua senha" autocomplete="current-password" required>
|
placeholder="escreva sua senha" autocomplete="current-password">
|
||||||
</div>
|
</div>
|
||||||
<div id="errorMessage" class="error-message"></div> <!-- Adicionado para mensagem de erro -->
|
|
||||||
|
<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>
|
||||||
|
<!--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">Ok</button>
|
<button class="botao" id="submit" name="submit">Ok</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<script src="./js/login.js"></script>
|
<!--Script responsavel por lidar com o retiro das informações e as processar-->
|
||||||
|
<script src="./js/Login/login.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -91,7 +91,7 @@ def login():
|
||||||
return jsonify({'msg': 'Não foi possível conectar ao servidor LDAP. Verifique a conexão de rede e as configurações do servidor.'}), 503
|
return jsonify({'msg': 'Não foi possível conectar ao servidor LDAP. Verifique a conexão de rede e as configurações do servidor.'}), 503
|
||||||
except LDAPException as e:
|
except LDAPException as e:
|
||||||
# Captura qualquer outra exceção LDAP genérica
|
# Captura qualquer outra exceção LDAP genérica
|
||||||
return jsonify({'msg': f'Erro LDAP: {str(e)}'}), 500
|
return jsonify({'Erro 500': f'Erro LDAP: {str(e)}'}), 500
|
||||||
|
|
||||||
# Decorador para proteger rotas com JWT
|
# Decorador para proteger rotas com JWT
|
||||||
def token_required(f):
|
def token_required(f):
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue