diff --git a/Css/global/Menu_Lateral.css b/Css/global/Menu_Lateral.css index 08cf26a..b4473aa 100644 --- a/Css/global/Menu_Lateral.css +++ b/Css/global/Menu_Lateral.css @@ -1,39 +1,3 @@ -:root { - - /*Fundos das telas de iframe de cada monitoramento*/ - --fundo_5: #e2e2e2; - - /*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; - -} - - /*Usar para construir toda a estrutura padrão do ambiente */ .matriz { display: flex; @@ -57,6 +21,7 @@ } +/* ------------------- Animações do painel lateral -------------------------- */ div.ativo { background-color: var(--Cor_Segundaria_5_2); @@ -138,7 +103,7 @@ div.ativo { } - +/* ------------------- Alinhamento do Menu lateral, primeiro painel de, personalização -------------------------- */ .Corpo_1 { display: flex; flex-direction: column; @@ -214,6 +179,8 @@ div.ativo { .Corpo_1 .Colunas_1 .seguimentos_2 .user_1 img { width: 6vw; + height: 10vh; + border-radius: 100%; margin-top: 2vh; margin-left: 35%; @@ -240,6 +207,7 @@ div.ativo { .Corpo_1 .Colunas_1 .seguimentos_2 .user_1 .icon_subcab2_2 { width: 2.5vw; + height: 5vh; opacity: 1; filter: blur(0px); position: absolute; @@ -276,6 +244,7 @@ div.ativo { } +/* ------------------- Drop down -------------------------- */ .Corpo_1 .Colunas_2 .seguimentos_2 .sessao_1 .forg .item_menu { font-family: var(--font_titulo); text-decoration: none; @@ -385,6 +354,8 @@ div.ativo { } +/* Segundo grupo de elementos do menu */ + .sessao_2 .item_menu { display: flex; diff --git a/Css/global/Telas.css b/Css/global/Telas.css index d8c84a8..a7054fa 100644 --- a/Css/global/Telas.css +++ b/Css/global/Telas.css @@ -1,30 +1,11 @@ -.capitulo_2 { - display: flex; - align-items: end; - justify-content: end; - align-content: end; - width: 98vw; -} +/* ------------------- +Estrutura de apresentação, possuindo a tela iframe, e cabeçario com o logo e o logout +-------------------------- */ -.Corpo_2 .Colunas_1 .transmissão { - width: 92vw; - height: 82vh; - transition: 1s ease; -} +/* ------------------- +Cabeçario da tela +-------------------------- */ -.Corpo_2 iframe { - outline: none; - border: none; - -} - -.Corpo_2 .Colunas_1 .transmissão.expansao { - - width: 81vw; - height: 82vh; - transition: 1s ease; - -} .menu { width: 100%; @@ -129,4 +110,36 @@ .Bloco_subcab2_2 .icon_subcab2_1 { width: 2.5vw; +} + +/*-------------- +Tela de apresentação de conteudo +------------------*/ + +.capitulo_2 { + display: flex; + align-items: end; + justify-content: end; + align-content: end; + width: 98vw; +} + +.Corpo_2 .Colunas_1 .transmissão { + width: 92vw; + height: 82vh; + transition: 1s ease; +} + +.Corpo_2 iframe { + outline: none; + border: none; + +} + +.Corpo_2 .Colunas_1 .transmissão.expansao { + + width: 81vw; + height: 82vh; + transition: 1s ease; + } \ No newline at end of file diff --git a/Css/page/Telas_acao/erro_404.css b/Css/page/Telas_acao/erro_404.css index e4a6a41..f7f4a32 100644 --- a/Css/page/Telas_acao/erro_404.css +++ b/Css/page/Telas_acao/erro_404.css @@ -1,3 +1,5 @@ +@import url(../../global/import.css); + #cap { display: flex; diff --git a/Css/page/Telas_acao/load.css b/Css/page/Telas_acao/load.css new file mode 100644 index 0000000..cfd998b --- /dev/null +++ b/Css/page/Telas_acao/load.css @@ -0,0 +1,16 @@ +body, +html { + margin: 0; + padding: 0; + height: 100%; + width: 100%; + overflow: hidden; + background-color: #282c34; + display: flex; + justify-content: center; + align-items: center; +} + +canvas { + border: 1px solid #fff; +} \ No newline at end of file diff --git a/html/Ambiente_Usuario copy.html b/html/Ambiente_Usuario copy.html index aea80d1..655bd8b 100644 --- a/html/Ambiente_Usuario copy.html +++ b/html/Ambiente_Usuario copy.html @@ -1,13 +1,14 @@ - + - - - + + Ambiente de teste + @@ -16,16 +17,78 @@
- +
- + - + + \ No newline at end of file diff --git a/html/Ambiente_Usuario.html b/html/Ambiente_Usuario.html index 2740dc1..1aec50d 100644 --- a/html/Ambiente_Usuario.html +++ b/html/Ambiente_Usuario.html @@ -4,9 +4,7 @@ - - - + Ambiente do Usuario @@ -128,14 +126,14 @@ -
+

Unidade Recreio

-
+

Client Vpn

diff --git a/html/Config.html b/html/Config.html new file mode 100644 index 0000000..ad9b2ad --- /dev/null +++ b/html/Config.html @@ -0,0 +1,47 @@ + + + + + + + Painel de configuração + + + + + +
+ + +
+ + + + + + + + \ No newline at end of file diff --git a/html/Erro.html b/html/Erro.html new file mode 100644 index 0000000..4a2a570 --- /dev/null +++ b/html/Erro.html @@ -0,0 +1,45 @@ + + + + + + + Painel de Blocos + + + + +
+ + +
+
+
+

Erro 404

+
+
+
+
+

Título Texto

+

Desculpa, mas não possivel encontra sua pagina!

+
+ +
+
+
+
+
+
+ + + +
+ + + + + \ No newline at end of file diff --git a/html/Monitor.js b/html/Monitor.js new file mode 100644 index 0000000..8205b4e --- /dev/null +++ b/html/Monitor.js @@ -0,0 +1,54 @@ +if (visuMonitor == true) { + + const construtor_Secundarios_Monitoramento = document.getElementById('sub_entrada'); + + construtor_Secundarios_Monitoramento.innerHTML = + '

Monitoramento

' + + + ''; + + + + +}; + + +document.getElementById('testes').addEventListener('mouseenter', function () { + document.getElementById('sub_menu').classList.add('show'); +}); + +document.getElementById('testes').addEventListener('mouseleave', function () { + document.getElementById('sub_menu').classList.remove('show'); +}); + +document.getElementById('sub_menu').addEventListener('mouseenter', function () { + this.classList.add('show'); +}); + +document.getElementById('sub_menu').addEventListener('mouseleave', function () { + this.classList.remove('show'); +}); \ No newline at end of file diff --git a/html/Reação_menu.js b/html/Reação_menu.js new file mode 100644 index 0000000..8b304a0 --- /dev/null +++ b/html/Reação_menu.js @@ -0,0 +1,24 @@ + +var botao = document.querySelector('#menu') +var cabecario = document.querySelector('.cabecario_1') +var tela = document.querySelector('.transmissão') +var menu = document.querySelector('.capitulo_1') +var temas = document.querySelectorAll('.item_menu') + + + +botao.addEventListener('click', function () { + menu.classList.toggle('expansao'); + cabecario.classList.toggle('expansao'); + tela.classList.toggle('expansao'); + +}); + +function selectLink() { + temas.forEach((item) => + item.classList.remove('ativo') + ) + this.classList.add('ativo') +} +temas.forEach((item) => + item.addEventListener('click', selectLink)) \ No newline at end of file diff --git a/html/config.js b/html/config.js new file mode 100644 index 0000000..0fc9043 --- /dev/null +++ b/html/config.js @@ -0,0 +1,61 @@ +var botao_1 = document.getElementById('opicao_1'); +botao_1.addEventListener('click', surgir1); + +function surgir1() { + + var estilo = document.getElementById('conexao'); + var painel = document.getElementById('preenchimento'); + estilo.href = 'ola'; + painel.innerHTML = 'ola1'; +} + +var botao_2 = document.getElementById('opicao_2'); +botao_2.addEventListener('click', surgir2); + +function surgir2() { + var estilo = document.getElementById('conexao'); + var painel = document.getElementById('preenchimento'); + estilo.href = 'ola2'; + painel.innerHTML = 'ola2'; +} + +var botao_3 = document.getElementById('opicao_3'); +botao_3.addEventListener('click', surgir3); + +function surgir3() { + var estilo = document.getElementById('conexao'); + var painel = document.getElementById('preenchimento'); + estilo.href = 'ola3'; + painel.innerHTML = 'ola3'; +} + +var botao_4 = document.getElementById('opicao_4'); +botao_4.addEventListener('click', surgir4); + +function surgir4() { + var estilo = document.getElementById('conexao'); + var painel = document.getElementById('preenchimento'); + estilo.href = 'ola3'; + painel.innerHTML = 'ola4'; +} + + +var botao_5 = document.getElementById('opicao_5'); +botao_5.addEventListener('click', surgir5); + +function surgir5() { + var estilo = document.getElementById('conexao'); + var painel = document.getElementById('preenchimento'); + estilo.href = 'ola3'; + painel.innerHTML = 'ola5'; +} + +var botao_6 = document.getElementById('opicao_6'); +botao_6.addEventListener('click', surgir6); + +function surgir6() { + var estilo = document.getElementById('conexao'); + var painel = document.getElementById('preenchimento'); + estilo.href = 'ola3'; + painel.innerHTML = 'ola6'; +} diff --git a/html/construtor_config.js b/html/construtor_config.js new file mode 100644 index 0000000..e69de29 diff --git a/html/padrao.js b/html/padrao.js index 287ce07..1ffb97a 100644 --- a/html/padrao.js +++ b/html/padrao.js @@ -1,153 +1,169 @@ -const construtor_primario = document.getElementById('entrada_1'); -construtor_primario.innerHTML = - '' - + - '
' - + - '
' - + - '
' - + - '
' - + - '
' - + - '
' - + - '
' - + - '' - + - '' - + - '
' - + - '

Usuario
Empresa

' - + - '
' - + - '
' - + - '
' - + - '
' - + - '
' - + - '

Home

' - + - '
' - + - '

Monitoramento

' - + - '
' - + - '
' - + - '

Servicedesk

' - + - '
' - + - '
' - + - '

Suporte

' - + - '

Configuracões

' - + - '
' - + - '
' - + - '
' - + - '
' - + - '
' - + - '
' - + - '
'; +//Variavel que recebe as validação do login do usuário +var autenteticação = true; + +if (autenteticação == true) { + + const estilos = document.getElementById('conexao'); + estilos.href = '../Css/global/Estrutura.css'; + + var Usuário = 'Daivid'; + var Empresa = 'ItGuys'; + var ImagemUser = '../Acessts/Imagens/1605305486169.jpg'; + var imagemFun = 'url(../Acessts/Imagens/01160209321024.jpg)'; + var visuMonitor = true; -const construtor_Secundarios_Monitoramento = document.getElementById('sub_entrada'); -construtor_Secundarios_Monitoramento.innerHTML = - ''; + const fundouser = document.getElementById('fundouser'); + + fundouser.innerHTML = + '.Corpo_1 .Colunas_1 {' + + + 'display: flex;' + + + 'flex-direction: row;' + + + 'background-image:' + imagemFun + ';' + + + 'background-position: center;' + + + 'background-size: cover;' + + + 'width: 15vw;' + + + 'height: 10vh;' + + + 'overflow: hidden;' + + + 'transition: 1s ease;' + ; + + const construtor_primario = document.getElementById('entrada_1'); + + construtor_primario.innerHTML = + '' + + + '
' + + + '
' + + + '
' + + + '
' + + + '
' + + + '
' + + + '
' + + + '' + + + '' + + + '
' + + + '

' + Usuário + '
' + Empresa + '

' + + + '
' + + + '
' + + + '
' + + + '
' + + + '
' + + + '

Home

' + + + '
' + + + '
' + + + '
' + + + '

Servicedesk

' + + + '
' + + + '
' + + + '

Suporte

' + + + '

Configuracões

' + + + '
' + + + '
' + + + '
' + + + '
' + + + '
' + + + '
' + + + '
' + ; + + const script1 = document.createElement('script'); + script1.src = './Reação_menu.js'; + document.body.appendChild(script1); + + const script2 = document.createElement('script'); + script2.src = './Monitor.js'; + document.body.appendChild(script2); + +} else { + + const estilos = document.getElementById('conexao'); + estilos.href = '../Css/page/Telas_acao/erro_404.css'; + + + var Status = 'Erro 404'; + var mensagem = 'Desculpe mas sua página não foi encontrada'; + var sub_mensagem = 'Tente fazer seu, login novamente'; + + const erro = document.getElementById('entrada_1'); + + erro.innerHTML = '
' + + + '

' + Status + '

' + + + '
' + + + '

' + mensagem + '

' + sub_mensagem + '

' + + + '' + + + '
' + + + '
' + + + '
' + + + '
' + + + '
' + + + '
' + ; -document.getElementById('testes').addEventListener('mouseenter', function () { - document.getElementById('sub_menu').classList.add('show'); -}); - -document.getElementById('testes').addEventListener('mouseleave', function () { - document.getElementById('sub_menu').classList.remove('show'); -}); - -document.getElementById('sub_menu').addEventListener('mouseenter', function () { - this.classList.add('show'); -}); - -document.getElementById('sub_menu').addEventListener('mouseleave', function () { - this.classList.remove('show'); -}); - - -var botao = document.querySelector('#menu') -var cabecario = document.querySelector('.cabecario_1') -var tela = document.querySelector('.transmissão') -var menu = document.querySelector('.capitulo_1') -var temas = document.querySelectorAll('.item_menu') - - -botao.addEventListener('click', function () { - menu.classList.toggle('expansao'); - cabecario.classList.toggle('expansao'); - tela.classList.toggle('expansao'); - -}); - -function selectLink() { - temas.forEach((item) => - item.classList.remove('ativo') - ) - this.classList.add('ativo') } -temas.forEach((item) => - item.addEventListener('click', selectLink)) +