teste
/
testes
Template
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

Atualização 5 - Refinando o construtor

This commit is contained in:
daivid.alves 2024-10-01 18:43:57 -03:00
parent bf9a04305b
commit 689197674b
13 changed files with 528 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
Css/global/Menu_Lateral.css
View File

@ -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;

63
Css/global/Telas.css
View File

@ -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%;
@ -130,3 +111,35 @@
.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;
}

2
Css/page/Telas_acao/erro_404.css
View File

@ -1,3 +1,5 @@
@import url(../../global/import.css);
#cap {
display: flex;

16
Css/page/Telas_acao/load.css Normal file
View File

@ -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;
}

77
html/Ambiente_Usuario copy.html
View File

@ -1,13 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../Css/global/Estrutura.css">
<link id="conexao" rel="stylesheet" href="../Css/page/Telas_acao/load.css">
<style id="fundouser">
</style>
<title>Ambiente de teste</title>
</head>
<body>
@ -16,16 +17,78 @@
<!-- Seu conteúdo principal aqui -->
<main id="entrada_1">
<canvas id="animationCanvas"></canvas>
</main>
<!--padrao_A1 reponsavel ter toda a estrutura que aplicara o data na tela-->
<script>
const canvas = document.getElementById('animationCanvas');
const ctx = canvas.getContext('2d');
// Define canvas dimensions
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const circle = {
centerX: canvas.width / 2,
centerY: canvas.height / 2,
radius: 150, // Raio do caminho circular
rotationSpeed: 0.02,
angle: 0,
linePath: [], // Para armazenar a trajetória
maxPathLength: 500 // Limite para o comprimento da trajetória
};
function drawCircularPath() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Adiciona o ponto da trajetória atual ao caminho
const pathX = circle.centerX + circle.radius * Math.cos(circle.angle);
const pathY = circle.centerY + circle.radius * Math.sin(circle.angle);
circle.linePath.push({ x: pathX, y: pathY });
// Desenha a trajetória acumulada
ctx.beginPath();
for (let i = 0; i < circle.linePath.length - 1; i++) {
ctx.moveTo(circle.linePath[i].x, circle.linePath[i].y);
ctx.lineTo(circle.linePath[i + 1].x, circle.linePath[i + 1].y);
}
ctx.strokeStyle = '#61dafb';
ctx.lineWidth = 2;
ctx.stroke();
// Limita o comprimento da trajetória e reinicia a trajetória quando necessário
if (circle.linePath.length > circle.maxPathLength) {
circle.linePath.shift(); // Remove o primeiro ponto do caminho
if (circle.angle >= Math.PI * 2) { // Completa um ciclo
circle.angle = 0; // Reinicia o ângulo
circle.linePath = []; // Limpa a trajetória
}
}
}
function animate() {
circle.angle += circle.rotationSpeed;
drawCircularPath();
requestAnimationFrame(animate);
}
animate();
// Ajusta o tamanho do canvas quando a janela é redimensionada
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
circle.centerX = canvas.width / 2;
circle.centerY = canvas.height / 2;
});
</script>
<script src="./padrao.js"></script>
<script src="../js/Ambiente_Usuario/Erro_404.js"></script>
<!--padrao_A1 reponsavel ter toda a estrutura que aplicara o data na tela-->
<!-- -->
</html>

8
html/Ambiente_Usuario.html
View File

@ -4,9 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../Css/global/padraouser.css">
<link rel="stylesheet" href="../Css/global/Blocos.css">
<link rel="stylesheet" href="../Css/global/import.css">
<link rel="stylesheet" href="../Css/global/Estrutura.css">
<link rel="icon" type="image/x-icon" href="../Acessts/Imagens/iT_Guys/logo1.png">
<title>Ambiente do Usuario</title>
</head>
@ -128,14 +126,14 @@
<a href="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Recreio.html"
target="frame">
<div class="sub_item_2">
<div class="sub_item_1">
<img src="../Acessts/Imagens/Iconis/hospital.png" alt="">
<p>Unidade Recreio</p>
</div>
</a>
<a href="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Cliente_VPN.html"
target="frame">
<div class="sub_item_3">
<div class="sub_item_1">
<img src="../Acessts/Imagens/Iconis/vpn.png" alt="">
<p>Client Vpn</p>
</div>

47
html/Config.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Painel de configuração</title>
<link id="conexao" rel="stylesheet" href="">
<body>
<nav class="menu">
<a href="./Ambiente_Usuario copy.html">Voltar</a>
<div class="contener_1">
<div class="titulos">Estilos</div>
<ul>
<li class="opicao"><button id="opicao_1">Me escolha</button></li>
</ul>
</div>
<div class="contener_2">
<div class="titulos">Ambiente</div>
<ul>
<li class="opicao"><button id="opicao_2">Me escolha</button></li>
<li class="opicao"><button id="opicao_3">Me escolha</button></li>
<li class="opicao"><button id="opicao_4">Me escolha</button></li>
</ul>
</div>
<div class="contener_3">
<div class="titulos">Suporte</div>
<ul>
<li class="opicao"><button id="opicao_5">Me escolha</button></li>
<li class="opicao"><button id="opicao_6">Me escolha</button></li>
</ul>
</div>
</nav>
<div id="preenchimento"></div>
</body>
<script src="./config.js"></script>
</html>

45
html/Erro.html Normal file
View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Painel de Blocos</title>
<link rel="stylesheet" href="styles.css"> <!-- Inclua seu CSS aqui -->
</head>
<body>
<div id="entrada_1">
<!-- Os blocos serão inseridos aqui -->
<section class="matriz_404" id="cap">
<section class="paineis_1">
<div class="cap">
<h1>Erro 404</h1>
</div>
</section>
<section class="paineis_2">
<div class="cap">
<h2>Título Texto</h2>
<p>Desculpa, mas não possivel encontra sua pagina!</p>
</div>
<div class="cap_2">
<a href="https://dev.itguys.com.br/ambiente_do_usu%C3%A1rio/login.html">
<button>Retornar</button>
</a>
</div>
</section>
<div class="wave wave_1"></div>
<div class="wave wave_2"></div>
<div class="wave wave_3"></div>
<div class="wave wave_4"></div>
</section>
<!-- Repita a estrutura acima para cada bloco de dados -->
</div>
<script src="script.js"></script> <!-- Inclua seu JavaScript aqui -->
</body>
</html>

54
html/Monitor.js Normal file
View File

@ -0,0 +1,54 @@
if (visuMonitor == true) {
const construtor_Secundarios_Monitoramento = document.getElementById('sub_entrada');
construtor_Secundarios_Monitoramento.innerHTML =
'<div class="item_menu" id="testes"><img src="../Acessts/Imagens/Iconis/monitor.png" alt=""><p>Monitoramento</p></div>'
+
'<div class="sub_menu" id="sub_menu">'
+
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_Itguys.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>iTGuys</p></div></a>'
+
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_GAU_Freguesia.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Gau Freguesia</p></div></a>'
+
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_GAU_Infantil.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Gau Infantil</p></div></a>'
+
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_Sao_Fabiano.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>São Fabiano</p></div></a>'
+
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Itaguaí.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Unidade Itaguaí</p></div></a>'
+
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Recreio.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Unidade Recreio</p></div></a>'
+
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Cliente_VPN.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/vpn.png" alt=""><p>Client Vpn</p></div></a>'
+
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_Ferreira_Real.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Ferreira Real</p></div></a>'
+
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_Oeste_Pan.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Oeste Pan</p></div></a>'
+
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_IBAP.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>IBAP</p></div></a>'
+
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_IVVCG.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>IVVCG</p></div></a>'
+
'</div>';
};
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');
});

24
html/Reação_menu.js Normal file
View File

@ -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))

61
html/config.js Normal file
View File

@ -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';
}

0
html/construtor_config.js Normal file
View File

304
html/padrao.js
View File

@ -1,153 +1,169 @@
const construtor_primario = document.getElementById('entrada_1');
construtor_primario.innerHTML =
'<section class="menu">'
+
'<header class="cabecario_1">'
+
'<div class="Bloco_subcab1_1"><img src="../Acessts/Imagens/iT_Guys/logo_flat.png" alt="" class="icon_subcab1_1"></div>'
+
'<div class="Bloco_subcab1_2"><a href="https://dev.itguys.com.br/"><button>Logout</button></a></div>'
+
'</header>'
+
'</section>'
+
'<main class="matriz">'
+
'<section class="capitulo_1">'
+
'<div class="Corpo_1">'
+
'<div class="Colunas_1">'
+
'<div class="seguimentos_1"><button><img id="menu" src="../Acessts/Imagens/Iconis/seta-direita.png" alt=""></button></div>'
+
'<div class="seguimentos_2">'
+
'<div class="user_1">'
+
'<img src="../Acessts/Imagens/Iconis/profile-user.png" alt="" class="icon_subcab2_2">'
+
'<img src="../Acessts/Imagens/Iconis/profile-user.png" alt="" class="icon_subcab2_1">'
+
'</div>'
+
'<div class="user_2"><p> <div id="User">Usuario</div><div id="Empresa">Empresa</div></p></div>'
+
'</div>'
+
'</div>'
+
'<div class="Colunas_2">'
+
'<div class="seguimentos_1"></div>'
+
'<div class="seguimentos_2"><div class="sessao_1"><a href="https://dev.itguys.com.br/ambiente_do_usu%C3%A1rio/Ambiente_Usuario_copy.html" target="frame">'
+
'<div class="item_menu"><img src="../Acessts/Imagens/Iconis/home.png" alt=""><p>Home</p></div></a>'
+
'<section class="forg">'
+
'<div class="item_menu" id="testes"><img src="../Acessts/Imagens/Iconis/monitor.png" alt=""><p>Monitoramento</p></div>'
+
'<div id="sub_entrada"></div>'
+
'</section>'
+
'<a href="http://10.10.253.111/"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/technical-support.png" alt=""><p>Servicedesk</p></div></a>'
+
'</div>'
+
'<div class="sessao_2">'
+
'<a href="https://api.whatsapp.com/send?phone=5521966344698"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/central-de-atendimento.png" alt=""><p>Suporte</p></div></a>'
+
'<a href="./Tela_config/Config_Ambiente_usuario.html" target="frame"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/engrenagem - Copia.png" alt=""><p>Configuracões</p></div></a>'
+
' </div>'
+
'</section>'
+
'<section class="capitulo_2">'
+
'<div class="Corpo_2">'
+
'<div class="Colunas_1"><iframe id = "test1" name = "frame" class="transmissão" src = "http://grafana.itguys.com.br:3000/dashboard/snapshot/6sVz7BNJVCY4sZD0m9P40k7nFEc5MqLI?kiosk"frameborder = "0" ></iframe ></div>'
+
'</div>'
+
'</main>';
//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 =
'<div class="sub_menu" id="sub_menu">'
+
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_Itguys.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>iTGuys</p></div></a>'
+
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_GAU_Freguesia.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Gau Freguesia</p></div></a>'
+
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_GAU_Infantil.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Gau Infantil</p></div></a>'
+
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_Sao_Fabiano.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>São Fabiano</p></div></a>'
+
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Itaguaí.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Unidade Itaguaí</p></div></a>'
+
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Recreio.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Unidade Recreio</p></div></a>'
+
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Cliente_VPN.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/vpn.png" alt=""><p>Client Vpn</p></div></a>'
+
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_Ferreira_Real.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Ferreira Real</p></div></a>'
+
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_Oeste_Pan.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Oeste Pan</p></div></a>'
+
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_IBAP.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>IBAP</p></div></a>'
+
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_IVVCG.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>IVVCG</p></div></a>'
+
'</div>';
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 =
'<section class="menu">'
+
'<header class="cabecario_1">'
+
'<div class="Bloco_subcab1_1"><img src="../Acessts/Imagens/iT_Guys/logo_flat.png" alt="" class="icon_subcab1_1"></div>'
+
'<div class="Bloco_subcab1_2"><a href="https://dev.itguys.com.br/"><button>Logout</button></a></div>'
+
'</header>'
+
'</section>'
+
'<main class="matriz">'
+
'<section class="capitulo_1">'
+
'<div class="Corpo_1">'
+
'<div class="Colunas_1">'
+
'<div class="seguimentos_1"><button><img id="menu" src="../Acessts/Imagens/Iconis/seta-direita.png" alt=""></button></div>'
+
'<div class="seguimentos_2">'
+
'<div class="user_1">'
+
'<img src="' + ImagemUser + '" alt="" class="icon_subcab2_2">'
+
'<img src="' + ImagemUser + '" alt="" class="icon_subcab2_1">'
+
'</div>'
+
'<div class="user_2"><p> <div id="User">' + Usuário + '</div><div id="Empresa">' + Empresa + '</div></p></div>'
+
'</div>'
+
'</div>'
+
'<div class="Colunas_2">'
+
'<div class="seguimentos_1"></div>'
+
'<div class="seguimentos_2"><div class="sessao_1"><a href="https://dev.itguys.com.br/ambiente_do_usu%C3%A1rio/Ambiente_Usuario_copy.html" target="frame">'
+
'<div class="item_menu"><img src="../Acessts/Imagens/Iconis/home.png" alt=""><p>Home</p></div></a>'
+
'<section class="forg">'
+
'<div id="sub_entrada"></div>'
+
'</section>'
+
'<a href="http://10.10.253.111/"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/technical-support.png" alt=""><p>Servicedesk</p></div></a>'
+
'</div>'
+
'<div class="sessao_2">'
+
'<a href="https://api.whatsapp.com/send?phone=5521966344698"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/central-de-atendimento.png" alt=""><p>Suporte</p></div></a>'
+
'<a href="./Config.html" ><div class="item_menu"><img src="../Acessts/Imagens/Iconis/engrenagem - Copia.png" alt=""><p>Configuracões</p></div></a>'
+
' </div>'
+
'</section>'
+
'<section class="capitulo_2">'
+
'<div class="Corpo_2">'
+
'<div class="Colunas_1"><iframe id = "test1" name = "frame" class="transmissão" src = "http://grafana.itguys.com.br:3000/dashboard/snapshot/6sVz7BNJVCY4sZD0m9P40k7nFEc5MqLI?kiosk"frameborder = "0" ></iframe ></div>'
+
'</div>'
+
'</main>'
;
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 = '<section class="matriz_404" id="cap">'
+
'<section class="paineis_1"><div class="cap"><h1>' + Status + '</h1></div></section>'
+
'<section class="paineis_2">'
+
'<div class="cap"><h2>' + mensagem + '</h2><p>' + sub_mensagem + '</p></div>'
+
'<div class="cap_2"><a href="https://dev.itguys.com.br/ambiente_do_usu%C3%A1rio/login.html"><button>Retornar</button></a></div>'
+
'</section>'
+
'<div class="wave wave_1"></div>'
+
'<div class="wave wave_2"></div>'
+
'<div class="wave wave_3"></div>'
+
'<div class="wave wave_4"></div>'
+
'</section>'
;
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))