Atualização 15 | Retirada dos htmls descartados
This commit is contained in:
parent
18fcbeba41
commit
34fa475212
|
|
@ -1,80 +0,0 @@
|
|||
<!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 rel="stylesheet" href="../Css/page/Ambiente/Config/Estrutura/estrutura_config.css">
|
||||
<link id="conexao" rel="stylesheet" href="">
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<nav class="menu">
|
||||
<a class="voltar" href="../Ambiente_Usuario.html">
|
||||
<img class="retrato_A" src="../Acessts/Imagens/Iconis/seta-esquerda.png" alt="">
|
||||
<p class="escrita_A">Retorne ao seu ambiente</p>
|
||||
</a>
|
||||
<div class="contener_1">
|
||||
<div class="titulos">
|
||||
<img src="../Acessts/Imagens/Iconis/caixa-de-ferramentas.png" alt="">
|
||||
<h2>Estilos</h2>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="opicao"><button id="opicao_1">
|
||||
<img class="retrato" src="../Acessts/Imagens/Iconis/caixa-de-ferramentas.png" alt="">
|
||||
<p class="escrita">Personalização</p>
|
||||
</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="contener_2">
|
||||
<div class="titulos">
|
||||
<img src="../Acessts/Imagens/Iconis/caixa-de-ferramentas.png" alt="">
|
||||
<h2>Ambiente</h2>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="opicao"><button id="StatusAmbiente">
|
||||
<img class="retrato" src="../Acessts/Imagens/Iconis/caixa-de-ferramentas.png" alt="">
|
||||
<p class="escrita">Status de ambientes</p>
|
||||
</button></li>
|
||||
<li class="opicao"><button id="opicao_3">
|
||||
<img class="retrato" src="../Acessts/Imagens/Iconis/caixa-de-ferramentas.png" alt="">
|
||||
<p class="escrita">Hierarquias</p>
|
||||
</button></li>
|
||||
<li class="opicao"><button id="opicao_4">
|
||||
<img class="retrato" src="../Acessts/Imagens/Iconis/caixa-de-ferramentas.png" alt="">
|
||||
<p class="escrita">Padrões</p>
|
||||
</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="contener_3">
|
||||
<div class="titulos">
|
||||
<img src="../Acessts/Imagens/Iconis/caixa-de-ferramentas.png" alt="">
|
||||
<h2>Suporte</h2>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="opicao"><button id="opicao_5">
|
||||
<img class="retrato" src="../Acessts/Imagens/Iconis/caixa-de-ferramentas.png" alt="">
|
||||
<p class="escrita">Documentação</p>
|
||||
</button></li>
|
||||
<li class="opicao"><button id="opicao_6">
|
||||
<img class="retrato" src="../Acessts/Imagens/Iconis/caixa-de-ferramentas.png" alt="">
|
||||
<p class="escrita">Contate</p>
|
||||
</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="telaConfig" id="preenchimento"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
<script src="../js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/config.js"></script>
|
||||
<script src="../js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/Ambientes_Root.js"></script>
|
||||
|
||||
</html>
|
||||
522
html/Home.html
522
html/Home.html
|
|
@ -1,522 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link id="conexao" rel="stylesheet" href="">
|
||||
<link rel="stylesheet" href="../Css/page/Ambiente/Home/root_Home.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<div class="bloco_home">
|
||||
<div class="seguimento">
|
||||
<section class="capitulo_1">
|
||||
<div class="titulo">
|
||||
<h2>Gráficos mais importantes</h2>
|
||||
</div>
|
||||
<div class="painel">
|
||||
<!--Editavel pelo usuário e capacidade de inserir graficos das outras dasbords-->
|
||||
<div class="corpo_controler">
|
||||
<div class="seguimento_1">
|
||||
<div class="dashbord_user_1">
|
||||
<div class="grafico"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seguimento_2">
|
||||
<div class="dashbord_user_2">
|
||||
<div class="grafico"></div>
|
||||
</div>
|
||||
<div class="dashbord_user_3">
|
||||
<div class="grafico"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="capitulo_2">
|
||||
<div class="titulo">
|
||||
<h2>DashBords</h2>
|
||||
</div>
|
||||
<div class="painel">
|
||||
|
||||
<div class="dashbord"> <!--Opição-->
|
||||
<div class="dash_titulo">Padrão</div>
|
||||
<div class="dash_painel">
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
<div class="Name" id="Name">
|
||||
<h2>Grafico</h2><!--prenchivel-->
|
||||
</div>
|
||||
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
<div class="Name" id="Name">
|
||||
<h2>Grafico</h2><!--prenchivel-->
|
||||
</div>
|
||||
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
<div class="Name" id="Name">
|
||||
<h2>Grafico</h2><!--prenchivel-->
|
||||
</div>
|
||||
<div class="sub_status ON" id="sub_status ">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
<div class="Name" id="Name">
|
||||
<h2>Grafico</h2><!--prenchivel-->
|
||||
</div>
|
||||
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
<div class="Name" id="Name">
|
||||
<h2>Grafico</h2><!--prenchivel-->
|
||||
</div>
|
||||
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
<div class="Name" id="Name">
|
||||
<h2>Grafico</h2><!--prenchivel-->
|
||||
</div>
|
||||
<div class="sub_status OFF" id="sub_status">OFF</div><!--prenchivel-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashbord"> <!--Opição-->
|
||||
<div class="dash_titulo">Padrão</div>
|
||||
<div class="dash_painel">
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
<div class="Name" id="Name">
|
||||
<h2>Grafico</h2><!--prenchivel-->
|
||||
</div>
|
||||
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
<div class="Name" id="Name">
|
||||
<h2>Grafico</h2><!--prenchivel-->
|
||||
</div>
|
||||
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
<div class="Name" id="Name">
|
||||
<h2>Grafico</h2><!--prenchivel-->
|
||||
</div>
|
||||
<div class="sub_status ON" id="sub_status ">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
<div class="Name" id="Name">
|
||||
<h2>Grafico</h2><!--prenchivel-->
|
||||
</div>
|
||||
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
<div class="Name" id="Name">
|
||||
<h2>Grafico</h2><!--prenchivel-->
|
||||
</div>
|
||||
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
<div class="Name" id="Name">
|
||||
<h2>Grafico</h2><!--prenchivel-->
|
||||
</div>
|
||||
<div class="sub_status OFF" id="sub_status">OFF</div><!--prenchivel-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="seguimento">
|
||||
<section class="capitulo_3"> <!--Painel de relatorios-->
|
||||
<div class="titulo">
|
||||
<h2>Detalhes da semana</h2>
|
||||
</div>
|
||||
|
||||
<div class="painel">
|
||||
<div class="subCapitulo_1">
|
||||
<div class="carrossel_host">
|
||||
<div class="list" id="list">
|
||||
<div class="item"><!--Preenchivem com os servidores da empresa-->
|
||||
<button>Host 1</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Host 2</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Host 3</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Host 4</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Host 5</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Host 6</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Host 7</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Host 8</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Host 9</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button">
|
||||
<button id="next">
|
||||
<img src="../Acessts/Imagens/Iconis/seta-direita.png" alt="">
|
||||
</button>
|
||||
<button id="prev">
|
||||
<img src="../Acessts/Imagens/Iconis/seta-esquerda.png" alt="">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="subCapitulo_2">
|
||||
|
||||
<div class="titulo_Sub_cap">
|
||||
<h2>Relatorios</h2>
|
||||
</div>
|
||||
<div class="relatorio">
|
||||
<!--Estrutura de conexão do relatorio com a ferramenta do João que cospe pdfs-->
|
||||
<div class="icon">
|
||||
<img src="../Acessts/Imagens/Iconis/relatorio.png" alt="">
|
||||
</div>
|
||||
<div class="painel_Ren">
|
||||
<div class="cabecario">
|
||||
<h2>25/10/2024</h2>
|
||||
<button>PDF</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relatorio">
|
||||
<div class="icon">
|
||||
<img src="../Acessts/Imagens/Iconis/relatorio.png" alt="">
|
||||
</div>
|
||||
<div class="painel_Ren">
|
||||
<div class="cabecario">
|
||||
<h2>24/10/2024</h2>
|
||||
<button>PDF</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bloco_ambiente">
|
||||
<div class="seguimento_1">
|
||||
<section class="capitulo_1">
|
||||
<div class="titulo_Cap">
|
||||
<h2>Status dos Ambientes</h2>
|
||||
</div>
|
||||
<div class="painel_Cap">
|
||||
|
||||
<div class="subpainel_Status">
|
||||
|
||||
<div class="bloco_1">
|
||||
|
||||
<div class="titulo">
|
||||
<h2>Nome da Empresa</h2>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bloco_2">
|
||||
|
||||
<div class="Mensagem_ambiente" id="Mensagem_ambiente">
|
||||
<p>mensagem de status do ambiente</p>
|
||||
|
||||
</div>
|
||||
<div class="button_rel">
|
||||
|
||||
<button id="Formulario">
|
||||
<img src="../Acessts/Imagens/Iconis/exportar.png" alt="">
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<div class="status_ambiente" id="status_ambiente">
|
||||
|
||||
<p>OFF</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="subpainel_Status">
|
||||
|
||||
<div class="bloco_1">
|
||||
|
||||
<div class="titulo">
|
||||
<h2>Nome da empresa</h2>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bloco_2">
|
||||
|
||||
<div class="Mensagem_ambiente" id="Mensagem_ambiente">
|
||||
<p>mensagem de status do ambiente</p>
|
||||
|
||||
</div>
|
||||
<div class="button_rel">
|
||||
|
||||
<button id="Formulario">
|
||||
<img src="../Acessts/Imagens/Iconis/exportar.png" alt="">
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<div class="status_ambiente" id="status_ambiente">
|
||||
|
||||
<p>OFF</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="subpainel_Status">
|
||||
|
||||
<div class="bloco_1">
|
||||
|
||||
<div class="titulo">
|
||||
<h2>Nome da empresa</h2>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bloco_2">
|
||||
|
||||
<div class="Mensagem_ambiente" id="Mensagem_ambiente">
|
||||
<p>mensagem de status do ambiente</p>
|
||||
|
||||
</div>
|
||||
<div class="button_rel">
|
||||
|
||||
<button id="Formulario">
|
||||
<img src="../Acessts/Imagens/Iconis/exportar.png" alt="">
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<div class="status_ambiente" id="status_ambiente">
|
||||
|
||||
<p>OFF</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="seguimento_2">
|
||||
<div class="subseguimento_1">
|
||||
|
||||
<section class="capitulo_2">
|
||||
<div class="titulo_Cap">
|
||||
<h2>Detalhes do Ambiente</h2>
|
||||
</div>
|
||||
<div class="painel_Cap">
|
||||
|
||||
<div class="carrossel_host">
|
||||
<div class="list" id="list_1">
|
||||
<div class="item"><!--Preenchivem com os servidores da empresa-->
|
||||
<button>Host 1</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Host 2</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Host 3</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Host 4</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Host 5</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Host 6</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Host 7</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Host 8</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Host 9</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button">
|
||||
<button id="next_1">
|
||||
<img src="../Acessts/Imagens/Iconis/seta-direita.png" alt="">
|
||||
</button>
|
||||
<button id="prev_1">
|
||||
<img src="../Acessts/Imagens/Iconis/seta-esquerda.png" alt="">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="dashbord"> <!--Opição-->
|
||||
<div class="dash_titulo">Padrão</div>
|
||||
<div class="dash_painel">
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
<div class="Name" id="Name">
|
||||
<h2>Grafico</h2><!--prenchivel-->
|
||||
</div>
|
||||
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
<div class="Name" id="Name">
|
||||
<h2>Grafico</h2><!--prenchivel-->
|
||||
</div>
|
||||
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
<div class="Name" id="Name">
|
||||
<h2>Grafico</h2><!--prenchivel-->
|
||||
</div>
|
||||
<div class="sub_status ON" id="sub_status ">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
<div class="Name" id="Name">
|
||||
<h2>Grafico</h2><!--prenchivel-->
|
||||
</div>
|
||||
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
<div class="Name" id="Name">
|
||||
<h2>Grafico</h2><!--prenchivel-->
|
||||
</div>
|
||||
<div class="sub_status ON" id="sub_status">ON</div><!--prenchivel-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="dash_subpaneis">
|
||||
<div class="sub_titulo">
|
||||
<div class="Name" id="Name">
|
||||
<h2>Grafico</h2><!--prenchivel-->
|
||||
</div>
|
||||
<div class="sub_status OFF" id="sub_status">OFF</div><!--prenchivel-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="subseguimento_2">
|
||||
<section class="capitulo_3">
|
||||
<div class="titulo_Cap">
|
||||
<h2>Controle de Ambiente</h2>
|
||||
</div>
|
||||
<div class="painel_Cap">
|
||||
<div class="coluna_1">
|
||||
<button>ON</button>
|
||||
<button>OFF</button>
|
||||
<button>ERRO</button>
|
||||
</div>
|
||||
<div class="coluna_2">
|
||||
|
||||
<div class="opicao">
|
||||
<button>Nome da empresa</button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<script src="../js/Ambiente/Home/RelatorioCeu.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Monitoramento</title>
|
||||
<link rel="stylesheet" href="../Css/page/Ambiente/Monitoramento/Monitor.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main>
|
||||
<section class="capitulo_1">
|
||||
<div class="carrossel_host">
|
||||
<div class="list" id="list">
|
||||
<div class="item"><!--Preenchivem com os servidores da empresa-->
|
||||
<button>Padrão 1</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Padrão 2</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Padrão 3</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Padrão 4</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Padrão 5</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Padrão 6</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Padrão 7</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Padrão 8</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Padrão 9</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Padrão 9</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Padrão 9</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Padrão 9</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Padrão 9</button>
|
||||
</div>
|
||||
<div class="item">
|
||||
<button>Padrão 9</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button">
|
||||
<button id="next">
|
||||
<img src="../Acessts/Imagens/Iconis/seta-direita.png" alt="">
|
||||
</button>
|
||||
<button id="prev">
|
||||
<img src="../Acessts/Imagens/Iconis/seta-esquerda.png" alt="">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="capitulo_2">
|
||||
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="../js/Ambiente/Monitoramento/monitorCeu.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,255 +0,0 @@
|
|||
|
||||
|
||||
// Array de objetos contendo os dados para cada bloco, podem cada definidos como variaveis para aplicar informações que estão constantimente mudando.
|
||||
|
||||
|
||||
//Data 1
|
||||
const dadosDosBlocos = [
|
||||
{
|
||||
//Logo da itguys
|
||||
imagem_Cab: '../Acessts/Imagens/iT_Guys/logo_340x100.png',
|
||||
//Botão de Logout
|
||||
A_cab: './Tela_Monitoramento/Monitoramento copy.html',
|
||||
button_Cab: 'Logout',
|
||||
|
||||
//imagem de trava/re-orientação do menu lateral
|
||||
imagem_segumento_1: '../Acessts/Imagens/Iconis/seta-direita.png',
|
||||
|
||||
//Imagem inicial do usuario no menu lateral
|
||||
imagem_User_1_segumento_2: '../Acessts/Imagens/Iconis/profile-user.png',
|
||||
//Imagem do usuario em tamanho total no menu lateral
|
||||
imagem_User_2_segumento_2: '../Acessts/Imagens/Iconis/profile-user.png',
|
||||
//Texto do nome do usuario
|
||||
texto_User_segumento_2: 'Usuario',
|
||||
//Texto do nome da empresa que o usuario participa
|
||||
texto_Empresa_segumento_2: 'Empresa',
|
||||
|
||||
//link de iframe da tela home
|
||||
Menu_home_a: 'http://grafana.itguys.com.br:3000/dashboard/snapshot/6sVz7BNJVCY4sZD0m9P40k7nFEc5MqLI?kiosk',
|
||||
//Iconi do Home
|
||||
Menu_home_img: '../Acessts/Imagens/Iconis/home.png',
|
||||
//Texto do Home
|
||||
Menu_home_text: 'Home',
|
||||
|
||||
//link de iframe da tela Monitoramento
|
||||
Menu_Monitor_a: './Tela_Monitoramento/Monitoramento copy.html',
|
||||
//Iconi do Monitoramento
|
||||
Menu_Monitor_img: '../Acessts/Imagens/Iconis/monitor.png',
|
||||
//Texto do Monitoramento
|
||||
Menu_Monitor_text: 'Monitoramento',
|
||||
|
||||
//link para o Servicdesk
|
||||
Menu_Servicedesk_a: 'https://servicedesk.itguys.com.br/HomePage.do',
|
||||
//Iconi do Servicdesk
|
||||
Menu_Servicedesk_img: '../Acessts/Imagens/Iconis/technical-support.png',
|
||||
//Texto do Servicedesck
|
||||
Menu_Servicedesk_text: 'Servicedesk',
|
||||
|
||||
//link para o Suport
|
||||
Menu_Suporte_a: 'https://api.whatsapp.com/send?phone=5521966344698',
|
||||
//Iconi do Suport
|
||||
Menu_Suporte_img: '../Acessts/Imagens/Iconis/central-de-atendimento.png',
|
||||
//Texto do Suport
|
||||
Menu_Suporte_text: 'Suporte',
|
||||
|
||||
//link de iframe da tela Configurações
|
||||
Menu_Config_a: './Tela_config/Config_Ambiente_usuario.html',
|
||||
//Iconi do Configurações
|
||||
Menu_Config_img: '../Acessts/Imagens/Iconis/engrenagem - Copia.png',
|
||||
//Texto do Configurações
|
||||
Menu_Config_text: 'Configuracões',
|
||||
|
||||
//Tela principal onde todos os conteudos vão ser apresentados
|
||||
Tela: 'http://grafana.itguys.com.br:3000/dashboard/snapshot/6sVz7BNJVCY4sZD0m9P40k7nFEc5MqLI?kiosk',
|
||||
|
||||
}
|
||||
];
|
||||
|
||||
//Data 2
|
||||
const dadosDosBlocos2 = [
|
||||
{
|
||||
//Logo da itguys
|
||||
imagem_Cab: '',
|
||||
//Botão de Logout
|
||||
A_cab: './Tela_Monitoramento/Monitoramento copy.html',
|
||||
button_Cab: 'Logout888',
|
||||
|
||||
//imagem de trava/re-orientação do menu lateral
|
||||
imagem_segumento_1: '../Acessts/Imagens/Iconis/seta-direita.png',
|
||||
|
||||
//Imagem inicial do usuario no menu lateral
|
||||
imagem_User_1_segumento_2: '../Acessts/Imagens/Iconis/profile-user.png',
|
||||
//Imagem do usuario em tamanho total no menu lateral
|
||||
imagem_User_2_segumento_2: '../Acessts/Imagens/Iconis/profile-user.png',
|
||||
//Texto do nome do usuario
|
||||
texto_User_segumento_2: 'Usuario',
|
||||
//Texto do nome da empresa que o usuario participa
|
||||
texto_Empresa_segumento_2: 'Anatram',
|
||||
|
||||
//link de iframe da tela home
|
||||
Menu_home_a: 'http://grafana.itguys.com.br:3000/dashboard/snapshot/6sVz7BNJVCY4sZD0m9P40k7nFEc5MqLI?kiosk',
|
||||
//Iconi do Home
|
||||
Menu_home_img: '../Acessts/Imagens/Iconis/home.png',
|
||||
//Texto do Home
|
||||
Menu_home_text: 'Home',
|
||||
|
||||
//link de iframe da tela Monitoramento
|
||||
Menu_Monitor_a: './Tela_Monitoramento/Monitoramento copy.html',
|
||||
//Iconi do Monitoramento
|
||||
Menu_Monitor_img: '../Acessts/Imagens/Iconis/monitor.png',
|
||||
//Texto do Monitoramento
|
||||
Menu_Monitor_text: 'Monitoramento',
|
||||
|
||||
//link para o Servicdesk
|
||||
Menu_Servicedesk_a: 'https://servicedesk.itguys.com.br/HomePage.do',
|
||||
//Iconi do Servicdesk
|
||||
Menu_Servicedesk_img: '../Acessts/Imagens/Iconis/technical-support.png',
|
||||
//Texto do Servicedesck
|
||||
Menu_Servicedesk_text: 'Servicedesk',
|
||||
|
||||
//link para o Suport
|
||||
Menu_Suporte_a: 'https://api.whatsapp.com/send?phone=5521966344698',
|
||||
//Iconi do Suport
|
||||
Menu_Suporte_img: '../Acessts/Imagens/Iconis/central-de-atendimento.png',
|
||||
//Texto do Suport
|
||||
Menu_Suporte_text: 'Suporte',
|
||||
|
||||
//link de iframe da tela Configurações
|
||||
Menu_Config_a: './Tela_config/Config_Ambiente_usuario.html',
|
||||
//Iconi do Configurações
|
||||
Menu_Config_img: '../Acessts/Imagens/Iconis/engrenagem - Copia.png',
|
||||
//Texto do Configurações
|
||||
Menu_Config_text: 'Configuracões',
|
||||
|
||||
//Tela principal onde todos os conteudos vão ser apresentados
|
||||
Tela: 'http://grafana.itguys.com.br:3000/dashboard/snapshot/6sVz7BNJVCY4sZD0m9P40k7nFEc5MqLI?kiosk',
|
||||
|
||||
}
|
||||
];
|
||||
|
||||
//Data 3
|
||||
const dadosDosBlocos3 = [
|
||||
{
|
||||
//Logo da itguys
|
||||
imagem_Cab: '',
|
||||
//Botão de Logout
|
||||
A_cab: './Tela_Monitoramento/Monitoramento copy.html',
|
||||
button_Cab: 'Logout',
|
||||
|
||||
//imagem de trava/re-orientação do menu lateral
|
||||
imagem_segumento_1: '../Acessts/Imagens/Iconis/seta-direita.png',
|
||||
|
||||
//Imagem inicial do usuario no menu lateral
|
||||
imagem_User_1_segumento_2: '../Acessts/Imagens/Iconis/profile-user.png',
|
||||
//Imagem do usuario em tamanho total no menu lateral
|
||||
imagem_User_2_segumento_2: '../Acessts/Imagens/Iconis/profile-user.png',
|
||||
//Texto do nome do usuario
|
||||
texto_User_segumento_2: 'Usuario',
|
||||
//Texto do nome da empresa que o usuario participa
|
||||
texto_Empresa_segumento_2: 'itGuys',
|
||||
|
||||
//link de iframe da tela home
|
||||
Menu_home_a: 'http://grafana.itguys.com.br:3000/dashboard/snapshot/6sVz7BNJVCY4sZD0m9P40k7nFEc5MqLI?kiosk',
|
||||
//Iconi do Home
|
||||
Menu_home_img: '../Acessts/Imagens/Iconis/home.png',
|
||||
//Texto do Home
|
||||
Menu_home_text: 'Home',
|
||||
|
||||
//link de iframe da tela Monitoramento
|
||||
Menu_Monitor_a: './Tela_Monitoramento/Monitoramento copy.html',
|
||||
//Iconi do Monitoramento
|
||||
Menu_Monitor_img: '../Acessts/Imagens/Iconis/monitor.png',
|
||||
//Texto do Monitoramento
|
||||
Menu_Monitor_text: 'Monitoramento',
|
||||
|
||||
//link para o Servicdesk
|
||||
Menu_Servicedesk_a: 'https://servicedesk.itguys.com.br/HomePage.do',
|
||||
//Iconi do Servicdesk
|
||||
Menu_Servicedesk_img: '../Acessts/Imagens/Iconis/technical-support.png',
|
||||
//Texto do Servicedesck
|
||||
Menu_Servicedesk_text: 'Servicedesk',
|
||||
|
||||
//link para o Suport
|
||||
Menu_Suporte_a: 'https://api.whatsapp.com/send?phone=5521966344698',
|
||||
//Iconi do Suport
|
||||
Menu_Suporte_img: '../Acessts/Imagens/Iconis/central-de-atendimento.png',
|
||||
//Texto do Suport
|
||||
Menu_Suporte_text: 'Suporte',
|
||||
|
||||
//link de iframe da tela Configurações
|
||||
Menu_Config_a: './Tela_config/Config_Ambiente_usuario.html',
|
||||
//Iconi do Configurações
|
||||
Menu_Config_img: '../Acessts/Imagens/Iconis/engrenagem - Copia.png',
|
||||
//Texto do Configurações
|
||||
Menu_Config_text: 'Configuracões',
|
||||
|
||||
//Tela principal onde todos os conteudos vão ser apresentados
|
||||
Tela: 'http://grafana.itguys.com.br:3000/dashboard/snapshot/6sVz7BNJVCY4sZD0m9P40k7nFEc5MqLI?kiosk',
|
||||
|
||||
}
|
||||
];
|
||||
|
||||
//Data 4
|
||||
const dadosDosBlocos4 = [
|
||||
{
|
||||
//Logo da itguys
|
||||
imagem_Cab: '',
|
||||
//Botão de Logout
|
||||
A_cab: './Tela_Monitoramento/Monitoramento copy.html',
|
||||
button_Cab: 'Logout',
|
||||
|
||||
//imagem de trava/re-orientação do menu lateral
|
||||
imagem_segumento_1: '../Acessts/Imagens/Iconis/seta-direita.png',
|
||||
|
||||
//Imagem inicial do usuario no menu lateral
|
||||
imagem_User_1_segumento_2: '../Acessts/Imagens/Iconis/profile-user.png',
|
||||
//Imagem do usuario em tamanho total no menu lateral
|
||||
imagem_User_2_segumento_2: '../Acessts/Imagens/Iconis/profile-user.png',
|
||||
//Texto do nome do usuario
|
||||
texto_User_segumento_2: 'Usuario',
|
||||
//Texto do nome da empresa que o usuario participa
|
||||
texto_Empresa_segumento_2: 'Enseg',
|
||||
|
||||
//link de iframe da tela home
|
||||
Menu_home_a: 'http://grafana.itguys.com.br:3000/dashboard/snapshot/6sVz7BNJVCY4sZD0m9P40k7nFEc5MqLI?kiosk',
|
||||
//Iconi do Home
|
||||
Menu_home_img: '../Acessts/Imagens/Iconis/home.png',
|
||||
//Texto do Home
|
||||
Menu_home_text: 'Home',
|
||||
|
||||
//link de iframe da tela Monitoramento
|
||||
Menu_Monitor_a: './Tela_Monitoramento/Monitoramento copy.html',
|
||||
//Iconi do Monitoramento
|
||||
Menu_Monitor_img: '../Acessts/Imagens/Iconis/monitor.png',
|
||||
//Texto do Monitoramento
|
||||
Menu_Monitor_text: 'Monitoramento',
|
||||
|
||||
//link para o Servicdesk
|
||||
Menu_Servicedesk_a: 'https://servicedesk.itguys.com.br/HomePage.do',
|
||||
//Iconi do Servicdesk
|
||||
Menu_Servicedesk_img: '../Acessts/Imagens/Iconis/technical-support.png',
|
||||
//Texto do Servicedesck
|
||||
Menu_Servicedesk_text: 'Servicedesk',
|
||||
|
||||
//link para o Suport
|
||||
Menu_Suporte_a: 'https://api.whatsapp.com/send?phone=5521966344698',
|
||||
//Iconi do Suport
|
||||
Menu_Suporte_img: '../Acessts/Imagens/Iconis/central-de-atendimento.png',
|
||||
//Texto do Suport
|
||||
Menu_Suporte_text: 'Suporte',
|
||||
|
||||
//link de iframe da tela Configurações
|
||||
Menu_Config_a: './Tela_config/Config_Ambiente_usuario.html',
|
||||
//Iconi do Configurações
|
||||
Menu_Config_img: '../Acessts/Imagens/Iconis/engrenagem - Copia.png',
|
||||
//Texto do Configurações
|
||||
Menu_Config_text: 'Configuracões',
|
||||
|
||||
//Tela principal onde todos os conteudos vão ser apresentados
|
||||
Tela: 'http://grafana.itguys.com.br:3000/dashboard/snapshot/6sVz7BNJVCY4sZD0m9P40k7nFEc5MqLI?kiosk',
|
||||
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document21</title>
|
||||
<link rel="stylesheet" href="../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../Css/padraouser.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<section id="entrada_1">
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<script src="../../js/Ambiente_Usuario/Data_Moni_A1.js"></script>
|
||||
<script src="../../js/Ambiente_Usuario/padrao_Moni_A1.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../Css/padraouser.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main class="Corpo">
|
||||
|
||||
<section class="Capitulos_1">
|
||||
|
||||
<a href="./SubTela_Alerta.html" target="iframe">
|
||||
<div class="reação">
|
||||
|
||||
<p>Alerta</p>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="./SubTela_Vpn.html" target="iframe">
|
||||
<div class="reação">
|
||||
|
||||
<p>VPN</p>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="./SubTela_DataCenter.html" target="iframe">
|
||||
<div class="reação">
|
||||
|
||||
<p>Data Center</p>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="./SubTela_Firewall.html" target="iframe">
|
||||
<div class="reação">
|
||||
|
||||
<p>FireWall</p>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="./SubTela_Ramais.html" target="iframe">
|
||||
<div class="reação">
|
||||
|
||||
<p>Ramais</p>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="./SubTela_CSTV.html" target="iframe">
|
||||
<div class="reação">
|
||||
|
||||
<p>CFTV</p>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
var temas = document.querySelectorAll('.reação')
|
||||
|
||||
function selectLink() {
|
||||
temas.forEach((item) =>
|
||||
item.classList.remove('ativo')
|
||||
)
|
||||
this.classList.add('ativo')
|
||||
}
|
||||
temas.forEach((item) =>
|
||||
item.addEventListener('click', selectLink))
|
||||
|
||||
</script>
|
||||
|
||||
<section class="Capitulos_2">
|
||||
<iframe src="./SubTela_Alerta.html" frameborder="0" name="iframe"></iframe>
|
||||
</section>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,199 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor_Enseg.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main class="Corpo">
|
||||
<section class="Capitulos_1">
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel1')">
|
||||
<p>Conexões</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel2')">
|
||||
|
||||
<p>Controle</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel3')">
|
||||
|
||||
<p>Servidores</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
var temas = document.querySelectorAll('.reação')
|
||||
|
||||
function selectLink() {
|
||||
temas.forEach((item) =>
|
||||
item.classList.remove('ativo')
|
||||
)
|
||||
this.classList.add('ativo')
|
||||
}
|
||||
temas.forEach((item) =>
|
||||
item.addEventListener('click', selectLink))
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<section class="Capitulos_2">
|
||||
|
||||
|
||||
<article id="panel1" class="Matriz_Conexao_Client_VPN">
|
||||
<section class="Subtela_Vpn_1">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=3"
|
||||
frameborder="0" class="Subtela_Vpn_frame_1">
|
||||
|
||||
</iframe>
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=4"
|
||||
frameborder="0" class="Subtela_Vpn_frame_2">
|
||||
|
||||
</iframe>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
</article>
|
||||
|
||||
|
||||
<article id="panel2" class="Matriz_Conectados_Client_VPN">
|
||||
<section class="Subtela_Data_1">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=5"
|
||||
frameborder="0" class="Subtela_Data_frame_1"></iframe>
|
||||
|
||||
</section>
|
||||
</article>
|
||||
|
||||
|
||||
<article id="panel3" class="Matriz_Servidores_Client_VPN">
|
||||
<section class="catalago">
|
||||
|
||||
<div class="painel_1"><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=14"
|
||||
frameborder="0" class="Painel_1 myIframe"></iframe>
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=17"
|
||||
frameborder="0" class="Painel_2 myIframe"></iframe>
|
||||
</div>
|
||||
<div class="painel_2"><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=15"
|
||||
frameborder="0" class="Painel_1 myIframe"></iframe><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=18"
|
||||
frameborder="0" class="Painel_2 myIframe"></iframe></div>
|
||||
<div class="painel_3"><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=16"
|
||||
frameborder="0" class="Painel_1 myIframe"></iframe><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=19"
|
||||
frameborder="0" class="Painel_2 myIframe"></iframe></div>
|
||||
<div class="painel_4"><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=20"
|
||||
frameborder="0" class="Painel_1 myIframe"></iframe><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=24"
|
||||
frameborder="0" class="Painel_2 myIframe"></iframe></div>
|
||||
<div class="painel_5"><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=21"
|
||||
frameborder="0" class="Painel_1 myIframe"></iframe><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=24"
|
||||
frameborder="0" class="Painel_2 myIframe"></iframe></div>
|
||||
|
||||
<div class="painel_6"><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=22"
|
||||
frameborder="0" class="Painel_1 myIframe"></iframe><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=25"
|
||||
frameborder="0" class="Painel_2 myIframe"></iframe></div>
|
||||
<div class="painel_7"><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=26"
|
||||
frameborder="0" class="Painel_1 myIframe"></iframe><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=29"
|
||||
frameborder="0" class="Painel_2 myIframe"></iframe></div>
|
||||
<div class="painel_8"><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=27"
|
||||
frameborder="0" class="Painel_1 myIframe"></iframe><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=30"
|
||||
frameborder="0" class="Painel_2 myIframe"></iframe></div>
|
||||
<div class="painel_9"><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=28"
|
||||
frameborder="0" class="Painel_1 myIframe"></iframe><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=31"
|
||||
frameborder="0" class="Painel_2 myIframe"></iframe></div>
|
||||
|
||||
</section>
|
||||
</article>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Obtém o elemento iframe
|
||||
var iframes = document.querySelectorAll('.myIframe');
|
||||
|
||||
iframes.forEach(function (iframe) {
|
||||
|
||||
// Adiciona um ouvinte de evento para o evento 'load' do iframe
|
||||
iframe.addEventListener('load', function () {
|
||||
// Ação a ser realizada quando o conteúdo do iframe é completamente carregado
|
||||
iframe.style.display = 'flex';
|
||||
// Adicione aqui qualquer outra ação que você deseje realizar
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
function togglePanelVisibility(panelId) {
|
||||
var panel = document.getElementById(panelId);
|
||||
var radio = document.querySelector('input[name="panelSelection"]:checked');
|
||||
var allPanels = document.querySelectorAll('article');
|
||||
|
||||
if (panel.style.display === "none" || panel.style.display === "") {
|
||||
// Exibe o painel clicado
|
||||
panel.style.display = "flex";
|
||||
|
||||
// Oculta todos os outros painéis
|
||||
allPanels.forEach(function (otherPanel) {
|
||||
if (otherPanel.id !== panelId) {
|
||||
otherPanel.style.display = "none";
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Se o botão de rádio não estiver selecionado, oculta o painel clicado
|
||||
if (!radio) {
|
||||
panel.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,301 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor_Enseg.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main class="Corpo">
|
||||
<section class="Capitulos_1">
|
||||
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel1')">
|
||||
|
||||
<p>Firewall</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel2')">
|
||||
<p>Relatorio</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel3')">
|
||||
<p>Rede</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
var temas = document.querySelectorAll('.reação')
|
||||
|
||||
function selectLink() {
|
||||
temas.forEach((item) =>
|
||||
item.classList.remove('ativo')
|
||||
)
|
||||
this.classList.add('ativo')
|
||||
}
|
||||
temas.forEach((item) =>
|
||||
item.addEventListener('click', selectLink))
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<section class="Capitulos_2">
|
||||
|
||||
|
||||
|
||||
<article id="panel1" class="Matriz_Firewall_Itaguai">
|
||||
|
||||
<section class="capitulo_1">
|
||||
|
||||
<section class="Hardware">
|
||||
|
||||
<div class="sessao_1">
|
||||
|
||||
<div class="tela_har_1">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/ab25a52e-6222-4bf8-9f7e-e46c50c35e09/firewall-enseg-itaguai?orgId=1&theme=light&panelId=15"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sessao_2">
|
||||
|
||||
<div class="tela_har_2">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/ab25a52e-6222-4bf8-9f7e-e46c50c35e09/firewall-enseg-itaguai?orgId=1&theme=light&panelId=5"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section class="capitulo_2">
|
||||
|
||||
<section class="trafegos">
|
||||
<div class="tela_traf_1">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/ab25a52e-6222-4bf8-9f7e-e46c50c35e09/firewall-enseg-itaguai?orgId=1&theme=light&panelId=2"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section class="speed_teste">
|
||||
<div class="tela_spe_1">
|
||||
|
||||
<iframe class="tela_5"
|
||||
src="https://grafana.itguys.com.br/d-solo/ab25a52e-6222-4bf8-9f7e-e46c50c35e09/firewall-enseg-itaguai?orgId=1&theme=light&panelId=6"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="tela_spe_2">
|
||||
|
||||
<iframe class="tela_4"
|
||||
src="https://grafana.itguys.com.br/d-solo/ab25a52e-6222-4bf8-9f7e-e46c50c35e09/firewall-enseg-itaguai?orgId=1&theme=light&panelId=7"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</article>
|
||||
|
||||
|
||||
<article id="panel2" class="Matriz_Relatorio_Itaguai">
|
||||
<section class="Subtela_ramais_1">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=9"
|
||||
frameborder="0" class="Subtela_Ramais_frame_1"></iframe>
|
||||
</section>
|
||||
|
||||
</article>
|
||||
|
||||
<article id="panel3" class="Matriz_Links_Itaguai">
|
||||
|
||||
<section class="capitulo_1">
|
||||
|
||||
<section class="Hardware">
|
||||
|
||||
<div class="sessao_1">
|
||||
|
||||
<div class="tela_har_1">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/ab25a52e-6222-4bf8-9f7e-e46c50c35e09/firewall-enseg-itaguai?orgId=1&theme=light&panelId=13"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sessao_2">
|
||||
|
||||
<div class="tela_har_2">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/ab25a52e-6222-4bf8-9f7e-e46c50c35e09/unidade-itaguai?orgId=1&theme=light&panelId=9"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tela_har_3">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/ab25a52e-6222-4bf8-9f7e-e46c50c35e09/unidade-itaguai?orgId=1&theme=light&panelId=11"
|
||||
frameborder="0"></iframe>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sessao_3">
|
||||
|
||||
<div class="tela_har_1">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/ab25a52e-6222-4bf8-9f7e-e46c50c35e09/firewall-enseg-itaguai?orgId=1&theme=light&panelId=14"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sessao_4">
|
||||
|
||||
<div class="tela_har_2">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/ab25a52e-6222-4bf8-9f7e-e46c50c35e09/unidade-itaguai?orgId=1&theme=light&panelId=10"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tela_har_3">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/ab25a52e-6222-4bf8-9f7e-e46c50c35e09/unidade-itaguai?orgId=1&theme=light&panelId=12"
|
||||
frameborder="0"></iframe>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section class="capitulo_2">
|
||||
|
||||
<section class="trafegos">
|
||||
<div class="tela_traf_1">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/ab25a52e-6222-4bf8-9f7e-e46c50c35e09/unidade-itaguai?orgId=1&theme=light&panelId=8"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tela_traf_2">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/ab25a52e-6222-4bf8-9f7e-e46c50c35e09/unidade-itaguai?orgId=1&theme=light&panelId=19"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tela_traf_3">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/ab25a52e-6222-4bf8-9f7e-e46c50c35e09/unidade-itaguai?orgId=1&theme=light&panelId=18"
|
||||
frameborder=" 0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section class="speed_teste">
|
||||
<div class="tela_spe_1">
|
||||
|
||||
<iframe class="tela_5"
|
||||
src="http://grafana.itguys.com.br/d-solo/ab25a52e-6222-4bf8-9f7e-e46c50c35e09/unidade-itaguai?orgId=1&theme=light&panelId=1"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</article>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
function togglePanelVisibility(panelId) {
|
||||
var panel = document.getElementById(panelId);
|
||||
var radio = document.querySelector('input[name="panelSelection"]:checked');
|
||||
var allPanels = document.querySelectorAll('article');
|
||||
|
||||
if (panel.style.display === "none" || panel.style.display === "") {
|
||||
// Exibe o painel clicado
|
||||
panel.style.display = "flex";
|
||||
|
||||
// Oculta todos os outros painéis
|
||||
allPanels.forEach(function (otherPanel) {
|
||||
if (otherPanel.id !== panelId) {
|
||||
otherPanel.style.display = "none";
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Se o botão de rádio não estiver selecionado, oculta o painel clicado
|
||||
if (!radio) {
|
||||
panel.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,197 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor_Enseg.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main class="Corpo">
|
||||
<section class="Capitulos_1">
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel1')">
|
||||
|
||||
<p>Firewall</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel2')">
|
||||
|
||||
<p>Relatorio</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
var temas = document.querySelectorAll('.reação')
|
||||
|
||||
function selectLink() {
|
||||
temas.forEach((item) =>
|
||||
item.classList.remove('ativo')
|
||||
)
|
||||
this.classList.add('ativo')
|
||||
}
|
||||
temas.forEach((item) =>
|
||||
item.addEventListener('click', selectLink))
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<section class="Capitulos_2">
|
||||
|
||||
|
||||
<article id="panel2" class="Matriz_Relatorios_Recreio">
|
||||
<section class="Subtela_ramais_1">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/cdl14zupgm3nkf/relatorio-geral-enseg-90-dias?orgId=1&theme=light&panelId=10"
|
||||
frameborder="0" class="Subtela_Ramais_frame_1"></iframe>
|
||||
</section>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
<article id="panel1" class="Matriz_Firewall_Recreio">
|
||||
|
||||
<section class="capitulo_1">
|
||||
|
||||
<section class="Hardware">
|
||||
|
||||
<div class="sessao_1">
|
||||
|
||||
<div class="tela_har_1">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/f668f4e0-4cb2-4354-990c-b95c5d6b3cf4/unidade-recreio?orgId=1&theme=light&panelId=7"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sessao_2">
|
||||
|
||||
<div class="tela_har_2">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/f668f4e0-4cb2-4354-990c-b95c5d6b3cf4/unidade-recreio?orgId=1&theme=light&panelId=5"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section class="capitulo_2">
|
||||
|
||||
<section class="trafegos">
|
||||
|
||||
<div class="sessao_1">
|
||||
<div class="tela_traf_1">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/f668f4e0-4cb2-4354-990c-b95c5d6b3cf4/unidade-recreio?orgId=1&theme=light&panelId=4"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sessao_2">
|
||||
<div class="tela_traf_2">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/f668f4e0-4cb2-4354-990c-b95c5d6b3cf4/unidade-recreio?orgId=1&theme=light&panelId=1"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tela_traf_3">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/f668f4e0-4cb2-4354-990c-b95c5d6b3cf4/unidade-recreio?orgId=1&theme=light&panelId=2"
|
||||
frameborder=" 0"></iframe>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<section class="speed_teste">
|
||||
<div class="tela_spe_1">
|
||||
|
||||
<iframe class="tela_5"
|
||||
src="http://grafana.itguys.com.br/d-solo/f668f4e0-4cb2-4354-990c-b95c5d6b3cf4/unidade-recreio?orgId=1&theme=light&panelId=3"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="tela_spe_2">
|
||||
|
||||
<iframe class="tela_4"
|
||||
src="http://grafana.itguys.com.br/d-solo/f668f4e0-4cb2-4354-990c-b95c5d6b3cf4/unidade-recreio?orgId=1&theme=light&panelId=6"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
function togglePanelVisibility(panelId) {
|
||||
var panel = document.getElementById(panelId);
|
||||
var radio = document.querySelector('input[name="panelSelection"]:checked');
|
||||
var allPanels = document.querySelectorAll('article');
|
||||
|
||||
if (panel.style.display === "none" || panel.style.display === "") {
|
||||
// Exibe o painel clicado
|
||||
panel.style.display = "flex";
|
||||
|
||||
// Oculta todos os outros painéis
|
||||
allPanels.forEach(function (otherPanel) {
|
||||
if (otherPanel.id !== panelId) {
|
||||
otherPanel.style.display = "none";
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Se o botão de rádio não estiver selecionado, oculta o painel clicado
|
||||
if (!radio) {
|
||||
panel.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,170 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor_Ferreira_Real.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main class="Corpo">
|
||||
<section class="Capitulos_1">
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel1')">
|
||||
|
||||
<p>Firewall</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
var temas = document.querySelectorAll('.reação')
|
||||
|
||||
function selectLink() {
|
||||
temas.forEach((item) =>
|
||||
item.classList.remove('ativo')
|
||||
)
|
||||
this.classList.add('ativo')
|
||||
}
|
||||
temas.forEach((item) =>
|
||||
item.addEventListener('click', selectLink))
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<section class="Capitulos_2">
|
||||
|
||||
|
||||
|
||||
<article id="panel1" class="Matriz_Firewall_Real">
|
||||
|
||||
<section class="capitulo_1">
|
||||
|
||||
<section class="Hardware">
|
||||
|
||||
<div class="sessao_1">
|
||||
|
||||
<div class="tela_har_1">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/d723f9e9-cafc-4947-b8e5-b189cf44f3c0/firewall-ferreira-real?orgId=1&theme=light&panelId=5"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sessao_2">
|
||||
|
||||
<div class="tela_har_2">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/d723f9e9-cafc-4947-b8e5-b189cf44f3c0/firewall-ferreira-real?orgId=1&theme=light&panelId=3"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section class="capitulo_2">
|
||||
|
||||
<section class="trafegos">
|
||||
<div class="tela_traf_1">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/d723f9e9-cafc-4947-b8e5-b189cf44f3c0/firewall-ferreira-real?orgId=1&theme=light&panelId=1"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tela_traf_2">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/d723f9e9-cafc-4947-b8e5-b189cf44f3c0/firewall-ferreira-real?orgId=1&theme=light&panelId=2"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section class="speed_teste">
|
||||
<div class="tela_spe_1">
|
||||
|
||||
<iframe class="tela_5"
|
||||
src="http://grafana.itguys.com.br/d-solo/d723f9e9-cafc-4947-b8e5-b189cf44f3c0/firewall-ferreira-real?orgId=1&theme=light&panelId=6"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="tela_spe_2">
|
||||
|
||||
<iframe class="tela_4"
|
||||
src="http://grafana.itguys.com.br/d-solo/d723f9e9-cafc-4947-b8e5-b189cf44f3c0/firewall-ferreira-real?orgId=1&theme=light&panelId=7"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
function togglePanelVisibility(panelId) {
|
||||
var panel = document.getElementById(panelId);
|
||||
var radio = document.querySelector('input[name="panelSelection"]:checked');
|
||||
var allPanels = document.querySelectorAll('article');
|
||||
|
||||
if (panel.style.display === "none" || panel.style.display === "") {
|
||||
// Exibe o painel clicado
|
||||
panel.style.display = "flex";
|
||||
|
||||
// Oculta todos os outros painéis
|
||||
allPanels.forEach(function (otherPanel) {
|
||||
if (otherPanel.id !== panelId) {
|
||||
otherPanel.style.display = "none";
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Se o botão de rádio não estiver selecionado, oculta o painel clicado
|
||||
if (!radio) {
|
||||
panel.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,193 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor_GAU.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main class="Corpo">
|
||||
<section class="Capitulos_1">
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel1')">
|
||||
<p>Ramais</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel2')">
|
||||
|
||||
<p>Firewall</p>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
var temas = document.querySelectorAll('.reação')
|
||||
|
||||
function selectLink() {
|
||||
temas.forEach((item) =>
|
||||
item.classList.remove('ativo')
|
||||
)
|
||||
this.classList.add('ativo')
|
||||
}
|
||||
temas.forEach((item) =>
|
||||
item.addEventListener('click', selectLink))
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<section class="Capitulos_2">
|
||||
|
||||
<article id="panel1" class="Matriz_Ramais_Fregusia">
|
||||
<section class="Subtela_ramais_1">
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/d1fd6474-911b-410f-b52b-e39578e85567/gau-freguesia?orgId=1&theme=light&panelId=11"
|
||||
frameborder="0" class="Subtela_Ramais_frame_1"></iframe>
|
||||
</section>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
<article id="panel2" class="Matriz_Firewall_Fregusia">
|
||||
|
||||
<section class="capitulo_1">
|
||||
|
||||
<section class="Hardware">
|
||||
|
||||
<div class="sessao_1">
|
||||
|
||||
<div class="tela_har_1">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/d1fd6474-911b-410f-b52b-e39578e85567/gau-freguesia?orgId=1&theme=light&panelId=7"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sessao_2">
|
||||
|
||||
<div class="tela_har_2">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/d1fd6474-911b-410f-b52b-e39578e85567/gau-freguesia?orgId=1&theme=light&panelId=1"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tela_har_3">
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/d1fd6474-911b-410f-b52b-e39578e85567/gau-freguesia?orgId=1&theme=light&panelId=10"
|
||||
frameborder="0"></iframe>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section class="capitulo_2">
|
||||
|
||||
<section class="trafegos">
|
||||
<div class="tela_traf_1">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/d1fd6474-911b-410f-b52b-e39578e85567/gau-freguesia?orgId=1&theme=light&panelId=4"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tela_traf_2">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/d1fd6474-911b-410f-b52b-e39578e85567/gau-freguesia?orgId=1&theme=light&panelId=2"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tela_traf_3">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/d1fd6474-911b-410f-b52b-e39578e85567/gau-freguesia?orgId=1&theme=light&panelId=3"
|
||||
frameborder=" 0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section class="speed_teste">
|
||||
<div class="tela_spe_1">
|
||||
|
||||
<iframe class="tela_5"
|
||||
src="https://grafana.itguys.com.br/d-solo/d1fd6474-911b-410f-b52b-e39578e85567/gau-freguesia?orgId=1&theme=light&panelId=9"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="tela_spe_2">
|
||||
|
||||
<iframe class="tela_4"
|
||||
src="https://grafana.itguys.com.br/d-solo/d1fd6474-911b-410f-b52b-e39578e85567/gau-freguesia?orgId=1&theme=light&panelId=8"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</article>
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
function togglePanelVisibility(panelId) {
|
||||
var panel = document.getElementById(panelId);
|
||||
var radio = document.querySelector('input[name="panelSelection"]:checked');
|
||||
var allPanels = document.querySelectorAll('article');
|
||||
|
||||
if (panel.style.display === "none" || panel.style.display === "") {
|
||||
// Exibe o painel clicado
|
||||
panel.style.display = "flex";
|
||||
|
||||
// Oculta todos os outros painéis
|
||||
allPanels.forEach(function (otherPanel) {
|
||||
if (otherPanel.id !== panelId) {
|
||||
otherPanel.style.display = "none";
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Se o botão de rádio não estiver selecionado, oculta o painel clicado
|
||||
if (!radio) {
|
||||
panel.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,200 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor_GAU.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main class="Corpo">
|
||||
<section class="Capitulos_1">
|
||||
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel1')">
|
||||
<p>Ramais</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel2')">
|
||||
|
||||
<p>Firewall</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel3')">
|
||||
<p>CFTV</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
var temas = document.querySelectorAll('.reação')
|
||||
|
||||
function selectLink() {
|
||||
temas.forEach((item) =>
|
||||
item.classList.remove('ativo')
|
||||
)
|
||||
this.classList.add('ativo')
|
||||
}
|
||||
temas.forEach((item) =>
|
||||
item.addEventListener('click', selectLink))
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<section class="Capitulos_2">
|
||||
|
||||
|
||||
|
||||
|
||||
<article id="panel1" class="Matriz_Ramais_Infantil">
|
||||
<section class="Subtela_ramais_1">
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c7ebb120-68ea-407a-b834-0b051f8917a0/gau-infantil?orgId=1&theme=light&panelId=9"
|
||||
frameborder="0" class="Subtela_Ramais_frame_1"></iframe>
|
||||
</section>
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
<article id="panel3" class="Matriz_CFTV_Infantil">
|
||||
|
||||
<section class="Subtela_CFTV_1">
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c7ebb120-68ea-407a-b834-0b051f8917a0/gau-infantil?orgId=1&theme=light&panelId=6"
|
||||
frameborder="0" class="Subtela_CFTV_frame_1"></iframe>
|
||||
</section>
|
||||
|
||||
</article>
|
||||
|
||||
<article id="panel2" class="Matriz_Firewall_Infantil">
|
||||
|
||||
<section class="capitulo_1">
|
||||
|
||||
<section class="Hardware">
|
||||
|
||||
<div class="sessao_1">
|
||||
|
||||
<div class="tela_har_1">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c7ebb120-68ea-407a-b834-0b051f8917a0/gau-infantil?orgId=1&theme=light&panelId=5"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sessao_2">
|
||||
|
||||
<div class="tela_har_2">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c7ebb120-68ea-407a-b834-0b051f8917a0/gau-infantil?orgId=1&theme=light&panelId=1"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tela_har_3">
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c7ebb120-68ea-407a-b834-0b051f8917a0/gau-infantil?orgId=1&theme=light&panelId=8"
|
||||
frameborder="0"></iframe>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section class="capitulo_2">
|
||||
|
||||
<section class="trafegos">
|
||||
<div class="tela_traf_1">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c7ebb120-68ea-407a-b834-0b051f8917a0/gau-infantil?orgId=1&theme=light&panelId=2"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tela_traf_2">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c7ebb120-68ea-407a-b834-0b051f8917a0/gau-infantil?orgId=1&theme=light&panelId=3"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section class="speed_teste">
|
||||
<div class="tela_spe_1">
|
||||
|
||||
<iframe class="tela_5"
|
||||
src="https://grafana.itguys.com.br/d-solo/c7ebb120-68ea-407a-b834-0b051f8917a0/gau-infantil?orgId=1&theme=light&panelId=7"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</article>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
function togglePanelVisibility(panelId) {
|
||||
var panel = document.getElementById(panelId);
|
||||
var radio = document.querySelector('input[name="panelSelection"]:checked');
|
||||
var allPanels = document.querySelectorAll('article');
|
||||
|
||||
if (panel.style.display === "none" || panel.style.display === "") {
|
||||
// Exibe o painel clicado
|
||||
panel.style.display = "flex";
|
||||
|
||||
// Oculta todos os outros painéis
|
||||
allPanels.forEach(function (otherPanel) {
|
||||
if (otherPanel.id !== panelId) {
|
||||
otherPanel.style.display = "none";
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Se o botão de rádio não estiver selecionado, oculta o painel clicado
|
||||
if (!radio) {
|
||||
panel.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,171 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor_IBAP.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main class="Corpo">
|
||||
<section class="Capitulos_1">
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel1')">
|
||||
|
||||
<p>Firewall</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
var temas = document.querySelectorAll('.reação')
|
||||
|
||||
function selectLink() {
|
||||
temas.forEach((item) =>
|
||||
item.classList.remove('ativo')
|
||||
)
|
||||
this.classList.add('ativo')
|
||||
}
|
||||
temas.forEach((item) =>
|
||||
item.addEventListener('click', selectLink))
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<section class="Capitulos_2">
|
||||
|
||||
|
||||
|
||||
<article id="panel1" class="Matriz_Firewall_IBAP">
|
||||
|
||||
<section class="capitulo_1">
|
||||
|
||||
<section class="Hardware">
|
||||
|
||||
<div class="sessao_1">
|
||||
|
||||
<div class="tela_har_1">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/c4daf778-ff87-4087-8a93-c746c5a06670/firewall-ibap?orgId=1&theme=light&panelId=5"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sessao_2">
|
||||
|
||||
<div class="tela_har_2">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/c4daf778-ff87-4087-8a93-c746c5a06670/firewall-ibap?orgId=1&theme=light&panelId=3"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section class="capitulo_2">
|
||||
|
||||
<section class="trafegos">
|
||||
<div class="tela_traf_1">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/c4daf778-ff87-4087-8a93-c746c5a06670/firewall-ibap?orgId=1&theme=light&panelId=1"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tela_traf_2">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/c4daf778-ff87-4087-8a93-c746c5a06670/firewall-ibap?orgId=1&theme=light&panelId=2"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section class="speed_teste">
|
||||
<div class="tela_spe_1">
|
||||
|
||||
<iframe class="tela_5"
|
||||
src="http://grafana.itguys.com.br/d-solo/c4daf778-ff87-4087-8a93-c746c5a06670/firewall-ibap?orgId=1&theme=light&panelId=6"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="tela_spe_2">
|
||||
|
||||
<iframe class="tela_4"
|
||||
src="http://grafana.itguys.com.br/d-solo/c4daf778-ff87-4087-8a93-c746c5a06670/firewall-ibap?orgId=1&theme=light&panelId=7"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
function togglePanelVisibility(panelId) {
|
||||
var panel = document.getElementById(panelId);
|
||||
var radio = document.querySelector('input[name="panelSelection"]:checked');
|
||||
var allPanels = document.querySelectorAll('article');
|
||||
|
||||
if (panel.style.display === "none" || panel.style.display === "") {
|
||||
// Exibe o painel clicado
|
||||
panel.style.display = "flex";
|
||||
|
||||
// Oculta todos os outros painéis
|
||||
allPanels.forEach(function (otherPanel) {
|
||||
if (otherPanel.id !== panelId) {
|
||||
otherPanel.style.display = "none";
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Se o botão de rádio não estiver selecionado, oculta o painel clicado
|
||||
if (!radio) {
|
||||
panel.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,217 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor_IVVCG.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main class="Corpo">
|
||||
<section class="Capitulos_1">
|
||||
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel1')">
|
||||
<p>CFTV</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel2')">
|
||||
|
||||
<p>Firewall</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel3')">
|
||||
<p>Antenas</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
var temas = document.querySelectorAll('.reação')
|
||||
|
||||
function selectLink() {
|
||||
temas.forEach((item) =>
|
||||
item.classList.remove('ativo')
|
||||
)
|
||||
this.classList.add('ativo')
|
||||
}
|
||||
temas.forEach((item) =>
|
||||
item.addEventListener('click', selectLink))
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<section class="Capitulos_2">
|
||||
|
||||
<article id="panel1" class="Matriz_CFTV_IVVCG">
|
||||
<section class="sub_tela_cftv_1">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/d47b37b4-e154-41bb-b45b-2fb08dbab234/ivvcg?orgId=1&theme=light&panelId=11"
|
||||
frameborder="0" class="sub_tela_cftv_frame_1"></iframe>
|
||||
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<article id="panel2" class="Matriz_Firewall_IVVCG">
|
||||
|
||||
<section class="capitulo_1">
|
||||
|
||||
<section class="Hardware">
|
||||
|
||||
<div class="sessao_1">
|
||||
|
||||
<div class="tela_har_1">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/d47b37b4-e154-41bb-b45b-2fb08dbab234/ivvcg?orgId=1&theme=light&panelId=7"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sessao_2">
|
||||
|
||||
<div class="tela_har_2">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/d47b37b4-e154-41bb-b45b-2fb08dbab234/ivvcg?orgId=1&theme=light&panelId=4"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tela_har_3">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/d47b37b4-e154-41bb-b45b-2fb08dbab234/ivvcg?orgId=1&theme=light&panelId=14"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section class="capitulo_2">
|
||||
|
||||
<section class="trafegos">
|
||||
<div class="tela_traf_1">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/d47b37b4-e154-41bb-b45b-2fb08dbab234/ivvcg?orgId=1&theme=light&panelId=12"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tela_traf_2">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/d47b37b4-e154-41bb-b45b-2fb08dbab234/ivvcg?orgId=1&theme=light&panelId=1"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section class="speed_teste">
|
||||
<div class="tela_spe_1">
|
||||
|
||||
<iframe class="tela_5"
|
||||
src="http://grafana.itguys.com.br/d-solo/d47b37b4-e154-41bb-b45b-2fb08dbab234/ivvcg?orgId=1&theme=light&panelId=6"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="tela_spe_2">
|
||||
|
||||
<iframe class="tela_4"
|
||||
src="http://grafana.itguys.com.br/d-solo/d47b37b4-e154-41bb-b45b-2fb08dbab234/ivvcg?orgId=1&theme=light&panelId=13"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<article id="panel3" class="Matriz_Antenas_IVVCG">
|
||||
|
||||
<section class="Subtela_Antenas_1">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/d47b37b4-e154-41bb-b45b-2fb08dbab234/ivvcg?orgId=1&theme=light&panelId=9"
|
||||
frameborder="0" class="Subtela_Antenas_frame_1"></iframe>
|
||||
</section>
|
||||
|
||||
<section class="Subtela_Antenas_2">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/d47b37b4-e154-41bb-b45b-2fb08dbab234/ivvcg?orgId=1&theme=light&panelId=10"
|
||||
frameborder="0" class="Subtela_Antenas_frame_2"></iframe>
|
||||
</section>
|
||||
|
||||
<section class="Subtela_Antenas_3">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/d47b37b4-e154-41bb-b45b-2fb08dbab234/ivvcg?orgId=1&theme=light&panelId=8"
|
||||
frameborder="0" class="Subtela_Antenas_frame_3"></iframe>
|
||||
</section>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
function togglePanelVisibility(panelId) {
|
||||
var panel = document.getElementById(panelId);
|
||||
var radio = document.querySelector('input[name="panelSelection"]:checked');
|
||||
var allPanels = document.querySelectorAll('article');
|
||||
|
||||
if (panel.style.display === "none" || panel.style.display === "") {
|
||||
// Exibe o painel clicado
|
||||
panel.style.display = "flex";
|
||||
|
||||
// Oculta todos os outros painéis
|
||||
allPanels.forEach(function (otherPanel) {
|
||||
if (otherPanel.id !== panelId) {
|
||||
otherPanel.style.display = "none";
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Se o botão de rádio não estiver selecionado, oculta o painel clicado
|
||||
if (!radio) {
|
||||
panel.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,460 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main class="Corpo">
|
||||
<section class="Capitulos_1">
|
||||
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel1')">
|
||||
<p>Alerta</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel2')">
|
||||
<p>VPN</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel3')">
|
||||
|
||||
<p>Data Center</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel4')">
|
||||
|
||||
<p>Firewall</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel5')">
|
||||
<p>Ramais</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel6')">
|
||||
<p>CFTV</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel7')">
|
||||
<p>Host</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel8')">
|
||||
<p>Consumo</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
var temas = document.querySelectorAll('.reação')
|
||||
|
||||
function selectLink() {
|
||||
temas.forEach((item) =>
|
||||
item.classList.remove('ativo')
|
||||
)
|
||||
this.classList.add('ativo')
|
||||
}
|
||||
temas.forEach((item) =>
|
||||
item.addEventListener('click', selectLink))
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<section class="Capitulos_2">
|
||||
|
||||
<article id="panel1" class="matriz_alert">
|
||||
<section class="sub_tela_alert_frame_1">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&theme=light&panelId=18"
|
||||
frameborder="0" class="sub_tela_alert_frame_1"></iframe>
|
||||
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<article id="panel2" class="Matriz_Vpn">
|
||||
<section class="Subtela_Vpn_1">
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&theme=light&panelId=14"
|
||||
frameborder="0" class="Subtela_Vpn_frame_1">
|
||||
|
||||
</iframe>
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&theme=light&panelId=16"
|
||||
frameborder="0" class="Subtela_Vpn_frame_2">
|
||||
|
||||
</iframe>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
|
||||
<article id="panel3" class="matriz_DataCenter">
|
||||
<section class="Subtela_Data_1">
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&theme=light&panelId=20"
|
||||
frameborder="0" class="Subtela_Data_frame_1"></iframe>
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&theme=light&panelId=21"
|
||||
frameborder="0" class="Subtela_Data_frame_2"></iframe>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<article id="panel4" class="matriz_Firewall">
|
||||
|
||||
<section class="capitulo_1">
|
||||
|
||||
<section class="Hardware">
|
||||
|
||||
<div class="sessao_1">
|
||||
|
||||
<div class="tela_har_1">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&theme=light&panelId=3"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sessao_2">
|
||||
|
||||
<div class="tela_har_2">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&theme=light&panelId=15"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tela_har_3">
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&theme=light&panelId=19"
|
||||
frameborder="0"></iframe>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section class="capitulo_2">
|
||||
|
||||
<section class="trafegos">
|
||||
<div class="tela_traf_1">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&theme=light&panelId=5"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tela_traf_2">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&theme=light&panelId=4"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tela_traf_3">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&theme=light&panelId=31"
|
||||
frameborder=" 0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section class="speed_teste">
|
||||
<div class="tela_spe_1">
|
||||
|
||||
<iframe class="tela_5"
|
||||
src="https://grafana.itguys.com.br/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&theme=light&panelId=7"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="tela_spe_2">
|
||||
|
||||
<iframe class="tela_4"
|
||||
src="https://grafana.itguys.com.br/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&theme=light&panelId=6"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<article id="panel5" class="matriz_Ramais">
|
||||
<section class="Subtela_ramais_1">
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&theme=light&panelId=30"
|
||||
frameborder="0" class="Subtela_Ramais_frame_1"></iframe>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
<article id="panel6" class="matriz_CFTV">
|
||||
|
||||
<section class="Subtela_CFTV_1">
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&theme=light&panelId=22"
|
||||
frameborder="0" class="Subtela_CFTV_frame_1"></iframe>
|
||||
</section>
|
||||
|
||||
<section class="Subtela_CFTV_2">
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&theme=light&panelId=26"
|
||||
frameborder="0" class="Subtela_CFTV_frame_2"></iframe>
|
||||
</section>
|
||||
|
||||
<section class="Subtela_CFTV_3">
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&theme=light&panelId=27"
|
||||
frameborder="0" class="Subtela_CFTV_frame_3"></iframe>
|
||||
</section>
|
||||
|
||||
<section class="Subtela_CFTV_4">
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&theme=light&panelId=28"
|
||||
frameborder="0" class="Subtela_CFTV_frame_4"></iframe>
|
||||
</section>
|
||||
|
||||
</article>
|
||||
|
||||
<article id="panel7" class="matriz_hosts">
|
||||
|
||||
<section class="host_2">
|
||||
<div class="Subtela_2_1">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/fdkljov89nawwa/consumo-energetico-ronaldo-santoro?orgId=1&theme=light&panelId=6"
|
||||
frameborder="0" class="subtela_frame_1"></iframe>
|
||||
</div>
|
||||
<div class="Subtela_2_2">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/fdkljov89nawwa/consumo-energetico-ronaldo-santoro?orgId=1&theme=light&panelId=10"
|
||||
frameborder="0" class="subtela_frame_2"></iframe>
|
||||
</div>
|
||||
<div class="Subtela_2_3">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/fdkljov89nawwa/consumo-energetico-ronaldo-santoro?orgId=1&theme=light&panelId=12"
|
||||
frameborder="0" class="subtela_frame_3"></iframe>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="host_3">
|
||||
<div class="Subtela_3_1">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/fdkljov89nawwa/consumo-energetico-ronaldo-santoro?orgId=1&theme=light&panelId=7"
|
||||
frameborder="0" class="subtela_frame_1"></iframe>
|
||||
</div>
|
||||
<div class="Subtela_3_2">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/fdkljov89nawwa/consumo-energetico-ronaldo-santoro?orgId=1&theme=light&panelId=11"
|
||||
frameborder="0" class="subtela_frame_2"></iframe>
|
||||
</div>
|
||||
<div class="Subtela_3_3">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/fdkljov89nawwa/consumo-energetico-ronaldo-santoro?orgId=1&theme=light&panelId=13"
|
||||
frameborder="0" class="subtela_frame_3"></iframe>
|
||||
</div>
|
||||
</section>
|
||||
<section class="host_4">
|
||||
<div class="Subtela_4_1">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/fdkljov89nawwa/consumo-energetico-ronaldo-santoro?orgId=1&theme=light&panelId=14"
|
||||
frameborder="0" class="subtela_frame_1"></iframe>
|
||||
</div>
|
||||
<div class="Subtela_4_2">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/fdkljov89nawwa/consumo-energetico-ronaldo-santoro?orgId=1&theme=light&panelId=15"
|
||||
frameborder="0" class="subtela_frame_2"></iframe>
|
||||
</div>
|
||||
<div class="Subtela_4_3">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/fdkljov89nawwa/consumo-energetico-ronaldo-santoro?orgId=1&theme=light&panelId=16"
|
||||
frameborder="0" class="subtela_frame_3"></iframe>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
|
||||
<article id="panel8" class="matriz_consumo_PDU">
|
||||
<section class="cap_1">
|
||||
<div class="sessao_1">
|
||||
|
||||
<div class="subtela_PDU_1"><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/fdkljov89nawwa/consumo-energetico-ronaldo-santoro?orgId=1&theme=light&panelId=20"
|
||||
frameborder="0" class="subtela_PDU_1_1"></iframe></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sessao_2">
|
||||
<div class="subtela_PDU_1">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/fdkljov89nawwa/consumo-energetico-ronaldo-santoro?orgId=1&theme=light&panelId=21"
|
||||
frameborder="0" class="subtela_PDU_1_1"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="subtela_PDU_2">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/fdkljov89nawwa/consumo-energetico-ronaldo-santoro?orgId=1&theme=light&panelId=24"
|
||||
frameborder="0" class="subtela_PDU_1_2"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cap_2">
|
||||
<div class="sessao_1">
|
||||
<div class="subtela_PDU_1"><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/fdkljov89nawwa/consumo-energetico-ronaldo-santoro?orgId=1&theme=light&panelId=41"
|
||||
frameborder="0" class="subtela_PDU_1_1"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="subtela_PDU_2"><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/fdkljov89nawwa/consumo-energetico-ronaldo-santoro?orgId=1&theme=light&panelId=36"
|
||||
frameborder="0" class="subtela_PDU_1_2"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="subtela_PDU_3"><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/fdkljov89nawwa/consumo-energetico-ronaldo-santoro?orgId=1&theme=light&panelId=43"
|
||||
frameborder="0" class="subtela_PDU_1_3"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="subtela_PDU_4"><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/fdkljov89nawwa/consumo-energetico-ronaldo-santoro?orgId=1&theme=light&panelId=42"
|
||||
frameborder="0" class="subtela_PDU_1_4"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="sessao_2">
|
||||
<div class="subtela_PDU_1"><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/fdkljov89nawwa/consumo-energetico-ronaldo-santoro?orgId=1&theme=light&panelId=34"
|
||||
frameborder="0" class="subtela_PDU_1_1"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="subtela_PDU_2"><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/fdkljov89nawwa/consumo-energetico-ronaldo-santoro?orgId=1&theme=light&panelId=33"
|
||||
frameborder="0" class="subtela_PDU_1_2"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cap_3">
|
||||
|
||||
<div class="sessao_1">
|
||||
<div class="subtela_PDU_1"><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/fdkljov89nawwa/consumo-energetico-ronaldo-santoro?orgId=1&theme=light&panelId=22"
|
||||
frameborder="0" class="subtela_PDU_1_1"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sessao_2">
|
||||
|
||||
<div class="esqueda">
|
||||
|
||||
<div class="subtela_PDU_1"><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/fdkljov89nawwa/consumo-energetico-ronaldo-santoro?orgId=1&theme=light&panelId=23"
|
||||
frameborder="0" class="subtela_PDU_1_1"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="direita">
|
||||
|
||||
<div class="subtela_PDU_2"><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/fdkljov89nawwa/consumo-energetico-ronaldo-santoro?orgId=1&theme=light&panelId=25"
|
||||
frameborder="0" class="subtela_PDU_1_2"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="subtela_PDU_3"><iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/fdkljov89nawwa/consumo-energetico-ronaldo-santoro?orgId=1&theme=light&panelId=27"
|
||||
frameborder="0" class="subtela_PDU_1_3"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
function togglePanelVisibility(panelId) {
|
||||
var panel = document.getElementById(panelId);
|
||||
var radio = document.querySelector('input[name="panelSelection"]:checked');
|
||||
var allPanels = document.querySelectorAll('article');
|
||||
|
||||
if (panel.style.display === "none" || panel.style.display === "") {
|
||||
// Exibe o painel clicado
|
||||
panel.style.display = "flex";
|
||||
|
||||
// Oculta todos os outros painéis
|
||||
allPanels.forEach(function (otherPanel) {
|
||||
if (otherPanel.id !== panelId) {
|
||||
otherPanel.style.display = "none";
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Se o botão de rádio não estiver selecionado, oculta o painel clicado
|
||||
if (!radio) {
|
||||
panel.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,198 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor_Oeste_Pan.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main class="Corpo">
|
||||
<section class="Capitulos_1">
|
||||
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel1')">
|
||||
<p>CFTV</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel2')">
|
||||
|
||||
<p>Firewall</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel3')">
|
||||
<p>Ramais</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
var temas = document.querySelectorAll('.reação')
|
||||
|
||||
function selectLink() {
|
||||
temas.forEach((item) =>
|
||||
item.classList.remove('ativo')
|
||||
)
|
||||
this.classList.add('ativo')
|
||||
}
|
||||
temas.forEach((item) =>
|
||||
item.addEventListener('click', selectLink))
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<section class="Capitulos_2">
|
||||
|
||||
<article id="panel1" class="Matriz_CFTV_Oeste">
|
||||
<section class="sub_tela_cftv_frame_1">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/b47912ca-7938-4828-988d-8530619d2999/oeste-pan?orgId=1&theme=light&panelId=6"
|
||||
frameborder="0" class="sub_tela_cftv_frame_1"></iframe>
|
||||
|
||||
</section>
|
||||
</article>
|
||||
|
||||
|
||||
<article id="panel2" class="Matriz_Firewall_Oeste">
|
||||
|
||||
<section class="capitulo_1">
|
||||
|
||||
<section class="Hardware">
|
||||
|
||||
<div class="sessao_1">
|
||||
|
||||
<div class="tela_har_1">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/b47912ca-7938-4828-988d-8530619d2999/oeste-pan?orgId=1&theme=light&panelId=5"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sessao_2">
|
||||
|
||||
<div class="tela_har_2">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/b47912ca-7938-4828-988d-8530619d2999/oeste-pan?orgId=1&theme=light&panelId=3"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section class="capitulo_2">
|
||||
|
||||
<section class="trafegos">
|
||||
<div class="tela_traf_1">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/b47912ca-7938-4828-988d-8530619d2999/oeste-pan?orgId=1&theme=light&panelId=2"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tela_traf_2">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/b47912ca-7938-4828-988d-8530619d2999/oeste-pan?orgId=1&theme=light&panelId=1"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
<section class="speed_teste">
|
||||
<div class="tela_spe_1">
|
||||
|
||||
<iframe class="tela_5"
|
||||
src="http://grafana.itguys.com.br/d-solo/b47912ca-7938-4828-988d-8530619d2999/oeste-pan?orgId=1&theme=light&panelId=7"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="tela_spe_2">
|
||||
|
||||
<iframe class="tela_4"
|
||||
src="http://grafana.itguys.com.br/d-solo/b47912ca-7938-4828-988d-8530619d2999/oeste-pan?orgId=1&theme=light&panelId=8"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<article id="panel3" class="Matriz_Ramais_Oeste">
|
||||
<section class="Subtela_ramais_1">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br/d-solo/b47912ca-7938-4828-988d-8530619d2999/oeste-pan?orgId=1&theme=light&panelId=9"
|
||||
frameborder="0" class="Subtela_Ramais_frame_1"></iframe>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
function togglePanelVisibility(panelId) {
|
||||
var panel = document.getElementById(panelId);
|
||||
var radio = document.querySelector('input[name="panelSelection"]:checked');
|
||||
var allPanels = document.querySelectorAll('article');
|
||||
|
||||
if (panel.style.display === "none" || panel.style.display === "") {
|
||||
// Exibe o painel clicado
|
||||
panel.style.display = "flex";
|
||||
|
||||
// Oculta todos os outros painéis
|
||||
allPanels.forEach(function (otherPanel) {
|
||||
if (otherPanel.id !== panelId) {
|
||||
otherPanel.style.display = "none";
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Se o botão de rádio não estiver selecionado, oculta o painel clicado
|
||||
if (!radio) {
|
||||
panel.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,198 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor_GAU.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main class="Corpo">
|
||||
<section class="Capitulos_1">
|
||||
|
||||
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel1')">
|
||||
<p>Ramais</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel2')">
|
||||
<p>CFTV</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="reação" onclick="togglePanelVisibility('panel3')">
|
||||
|
||||
<p>Firewall</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
var temas = document.querySelectorAll('.reação')
|
||||
|
||||
function selectLink() {
|
||||
temas.forEach((item) =>
|
||||
item.classList.remove('ativo')
|
||||
)
|
||||
this.classList.add('ativo')
|
||||
}
|
||||
temas.forEach((item) =>
|
||||
item.addEventListener('click', selectLink))
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<section class="Capitulos_2">
|
||||
|
||||
|
||||
|
||||
|
||||
<article id="panel1" class="Matriz_Ramais_Fabiano">
|
||||
<section class="Subtela_ramais_1">
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/a58c8eb8-a471-44dd-a9fa-e049a75b0837/sao-fabiano?orgId=1&theme=light&panelId=9"
|
||||
frameborder="0" class="Subtela_Ramais_frame_1"></iframe>
|
||||
</section>
|
||||
|
||||
</article>
|
||||
|
||||
<article id="panel2" class="Matriz_CFTV_Fabiano">
|
||||
|
||||
<section class="Subtela_CFTV_1">
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/a58c8eb8-a471-44dd-a9fa-e049a75b0837/sao-fabiano?orgId=1&theme=light&panelId=6"
|
||||
frameborder="0" class="Subtela_CFTV_frame_1"></iframe>
|
||||
</section>
|
||||
|
||||
</article>
|
||||
|
||||
<article id="panel3" class="Matriz_Firewall_Fabiano">
|
||||
|
||||
<section class="capitulo_1">
|
||||
|
||||
<section class="Hardware">
|
||||
|
||||
<div class="sessao_1">
|
||||
|
||||
<div class="tela_har_1">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/a58c8eb8-a471-44dd-a9fa-e049a75b0837/sao-fabiano?orgId=1&theme=light&panelId=5"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sessao_2">
|
||||
|
||||
<div class="tela_har_2">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/a58c8eb8-a471-44dd-a9fa-e049a75b0837/sao-fabiano?orgId=1&theme=light&panelId=3"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tela_har_3">
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/a58c8eb8-a471-44dd-a9fa-e049a75b0837/sao-fabiano?orgId=1&theme=light&panelId=8"
|
||||
frameborder="0"></iframe>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section class="capitulo_2">
|
||||
|
||||
<section class="trafegos">
|
||||
<div class="tela_traf_1">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/a58c8eb8-a471-44dd-a9fa-e049a75b0837/sao-fabiano?orgId=1&theme=light&panelId=1"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tela_traf_2">
|
||||
|
||||
<iframe
|
||||
src="https://grafana.itguys.com.br/d-solo/a58c8eb8-a471-44dd-a9fa-e049a75b0837/sao-fabiano?orgId=1&theme=light&panelId=2"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section class="speed_teste">
|
||||
<div class="tela_spe_1">
|
||||
|
||||
<iframe class="tela_5"
|
||||
src="https://grafana.itguys.com.br/d-solo/a58c8eb8-a471-44dd-a9fa-e049a75b0837/sao-fabiano?orgId=1&theme=light&panelId=7"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</article>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
function togglePanelVisibility(panelId) {
|
||||
var panel = document.getElementById(panelId);
|
||||
var radio = document.querySelector('input[name="panelSelection"]:checked');
|
||||
var allPanels = document.querySelectorAll('article');
|
||||
|
||||
if (panel.style.display === "none" || panel.style.display === "") {
|
||||
// Exibe o painel clicado
|
||||
panel.style.display = "flex";
|
||||
|
||||
// Oculta todos os outros painéis
|
||||
allPanels.forEach(function (otherPanel) {
|
||||
if (otherPanel.id !== panelId) {
|
||||
otherPanel.style.display = "none";
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Se o botão de rádio não estiver selecionado, oculta o painel clicado
|
||||
if (!radio) {
|
||||
panel.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Exemplo de script para iframe</title>
|
||||
<style>
|
||||
#myIframe {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<iframe width=" 853" height="480" src="https://www.youtube.com/embed/bQBbRWo0j5g"
|
||||
title="Relaxing Medieval Music - Bard/Tavern Ambience, Fantasy Celtic Music, Sleeping Tavern BGM"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../Css/Ambiente_Usuario/Sub_telas_monitor.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main class="matriz_CFTV">
|
||||
|
||||
<section class="Subtela_CFTV_1">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br:3000/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&from=1715002145253&to=1715023745253&theme=light&panelId=22"
|
||||
frameborder="0" class="Subtela_CFTV_frame_1"></iframe>
|
||||
</section>
|
||||
|
||||
<section class="Subtela_CFTV_2">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br:3000/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&from=1715002251378&to=1715023851378&theme=light&panelId=26"
|
||||
frameborder="0" class="Subtela_CFTV_frame_2"></iframe>
|
||||
</section>
|
||||
|
||||
<section class="Subtela_CFTV_3">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br:3000/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&from=1715002199164&to=1715023799164&theme=light&panelId=27"
|
||||
frameborder="0" class="Subtela_CFTV_frame_3"></iframe>
|
||||
</section>
|
||||
|
||||
<section class="Subtela_CFTV_4">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br:3000/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&from=1715002225027&to=1715023825027&theme=light&panelId=28"
|
||||
frameborder="0" class="Subtela_CFTV_frame_4"></iframe>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../Css/Ambiente_Usuario/Sub_telas_monitor.css">
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main class="matriz_DataCenter">
|
||||
<section class="Subtela_Data_1">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br:3000/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&from=1715001437976&to=1715023037976&theme=light&panelId=20"
|
||||
frameborder="0" class="Subtela_Data_frame_1"></iframe>
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br:3000/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&from=1715001463392&to=1715023063392&theme=light&panelId=21"
|
||||
frameborder="0" class="Subtela_Data_frame_2"></iframe>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../Css/Ambiente_Usuario/Sub_telas_monitor.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main class="matriz_Firewall">
|
||||
|
||||
<section class="capitulo_1">
|
||||
|
||||
<section class="Hardware">
|
||||
|
||||
<div class="sessao_1">
|
||||
|
||||
<div class="tela_har_1">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br:3000/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&from=1715001682125&to=1715023282125&theme=light&panelId=3"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sessao_2">
|
||||
|
||||
<div class="tela_har_2">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br:3000/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&from=1715001784347&to=1715023384347&theme=light&panelId=15"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tela_har_3">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br:3000/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&from=1715001721879&to=1715023321879&theme=light&panelId=19"
|
||||
frameborder="0"></iframe>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section class="capitulo_2">
|
||||
|
||||
<section class="trafegos">
|
||||
<div class="tela_traf_1">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br:3000/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&from=1715001819004&to=1715023419004&theme=light&panelId=5"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tela_traf_2">
|
||||
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br:3000/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&from=1715001852767&to=1715023452767&theme=light&panelId=4"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section class="speed_teste">
|
||||
<div class="tela_spe_1">
|
||||
|
||||
<iframe class="tela_5"
|
||||
src="http://grafana.itguys.com.br:3000/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&from=1715001914600&to=1715023514600&theme=light&panelId=7"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="tela_spe_2">
|
||||
|
||||
<iframe class="tela_4"
|
||||
src="http://grafana.itguys.com.br:3000/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&from=1715001893004&to=1715023493004&theme=light&panelId=6"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../Css/Ambiente_Usuario/Sub_telas_monitor.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main class="matriz_Ramais">
|
||||
<section class="Subtela_ramais_1">
|
||||
<iframe
|
||||
src="http://grafana.itguys.com.br:3000/d-solo/c44d02bc-649f-489d-8d2b-ed51fd5d2144/ronald-santoro?orgId=1&refresh=5s&from=1715002099917&to=1715023699917&theme=light&panelId=30"
|
||||
frameborder="0" class="Subtela_Ramais_frame_1"></iframe>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../Css/padraouser.css">
|
||||
<link rel="stylesheet" href="../../Css/Ambiente_Usuario/Blocos.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main id="entrada_1">
|
||||
</main>
|
||||
|
||||
<main id="entrada_2">
|
||||
</main>
|
||||
|
||||
|
||||
<script src="./Data_A1.js"></script>
|
||||
<script src="./padrao_A1.js"></script>
|
||||
<script src="./padrao_A2.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,264 +0,0 @@
|
|||
|
||||
|
||||
// Função para criar os blocos com base nos dados fornecidos
|
||||
function criarBlocos(dados) {
|
||||
// Limpar o container de blocos
|
||||
entrada_1.innerHTML = '';
|
||||
|
||||
// Iterar sobre o array de dados dos blocos
|
||||
dados.forEach(dadosDoBloco => {
|
||||
|
||||
const Painel = document.createElement('section'); // Responsavel por trazer todos os lementos da tela.
|
||||
const cab = document.createElement('section');
|
||||
cab.classList.add('menu');//Responsavel por trazer todo o cabeçario para a tela
|
||||
const Matriz = document.createElement('main');
|
||||
Matriz.classList.add('matriz');//Responsavel por trazer o menu e a tela do iframe.
|
||||
|
||||
|
||||
//Cabeçalho
|
||||
|
||||
const sucab = document.createElement('header');
|
||||
sucab.classList.add('cabecario_1');
|
||||
|
||||
//Bloco reponsavel pela imagem de logo da itguys
|
||||
|
||||
const bloco_subcab1_1 = document.createElement('div');//cria a tag div na página
|
||||
bloco_subcab1_1.classList.add('Bloco_subcab1_1');//Define a classe do Bloco_subcab1_1, para a constante Bloco_subcab1_1.
|
||||
const img_cab = document.createElement('img');//Cria a tag img na página
|
||||
img_cab.classList.add('icon_subcab1_1');//Define a classe do icon_subcab1_1, para a constante img_cab.
|
||||
img_cab.src = dadosDoBloco.imagem_Cab;//Cria o src para a tag img, e capita a informação registradas no dadosDoBlco no registro imagem_cab.
|
||||
img_cab.alt = '';//Cria uma alt sem nenhuma definição para a tag img.
|
||||
bloco_subcab1_1.appendChild(img_cab);//Define o img_cap como objeto filho do bloco_subcab1_1, logo a tag img estara dentor da div bloco_suvcab1_1.
|
||||
|
||||
const bloco_subcab1_2 = document.createElement('div');//cria a tag div na página
|
||||
bloco_subcab1_2.classList.add('Bloco_subcab1_2');//Define a classe do bloco_subcab1_2, para a constante Bloco_subcab1_2.
|
||||
const bloco_a_cab = document.createElement('a');//Criação da tag a na página.
|
||||
bloco_a_cab.href = dadosDoBloco.A_cab;//Criação do href para a tag a, e capita a informação registradas no dadosDoBlco no registro A_cab.
|
||||
bloco_subcab1_2.appendChild(bloco_a_cab);//Define o bloco_a_cab como objeto filho do bloco_subcab1_2, logo a tag a estara dentor da div bloco_subcab1_2.
|
||||
const bloco_button_cab = document.createElement('button');//cria a tag button na página.
|
||||
bloco_button_cab.textContent = dadosDoBloco.button_Cab;// Define um texto para o button.
|
||||
bloco_a_cab.appendChild(bloco_button_cab);//Define o bloco_button_cab como objeto filho do bloco_a_cab,logo a tag button estara dentor da div bloco_a_cab.
|
||||
|
||||
//Matriz
|
||||
|
||||
const capitulo_1 = document.createElement('section');//Cria uma tag section na página.
|
||||
capitulo_1.classList.add('capitulo_1');//adicina diretamente a classe capitulo_1, section recem criada.
|
||||
const Corpo_1 = document.createElement('section');//Cria uma tag section na página.
|
||||
Corpo_1.classList.add('Corpo_1');//adicina diretamente a classe corpo_1, section recem criada.
|
||||
const Coluna_1 = document.createElement('div');//Cria uma tag div na página.
|
||||
Coluna_1.classList.add('Colunas_1');//adicina diretamente a classe Colunas_1, div recem criada.
|
||||
|
||||
//Menu Lateral
|
||||
|
||||
//Painel personalizavel do usuario
|
||||
|
||||
const seguimento_1 = document.createElement('div');// Cria uma tag div na página.
|
||||
seguimento_1.classList.add('seguimentos_1'); // adiciona diretamente a classe seguimentos_1 na div recem criada
|
||||
Coluna_1.appendChild(seguimento_1); // define a div seguimento_1 como objeto filo da Coluna_1, log a tag div estara dentro da div Coluna_1
|
||||
const seguimento_1_button = document.createElement('button');
|
||||
seguimento_1.appendChild(seguimento_1_button);
|
||||
const seguimento_1_img = document.createElement('img');
|
||||
seguimento_1_img.id = "menu";
|
||||
seguimento_1_img.src = dadosDoBloco.imagem_segumento_1;
|
||||
seguimento_1_img.alt = "";
|
||||
seguimento_1_button.appendChild(seguimento_1_img);
|
||||
|
||||
const seguimento_2 = document.createElement('div');
|
||||
seguimento_2.classList.add('seguimentos_2');
|
||||
Coluna_1.appendChild(seguimento_2);
|
||||
|
||||
const user_1 = document.createElement('div');
|
||||
user_1.classList.add('user_1');
|
||||
seguimento_2.appendChild(user_1);
|
||||
|
||||
const seguimento_2_img_1_user_1 = document.createElement('img');
|
||||
seguimento_2_img_1_user_1.classList.add('icon_subcab2_2');
|
||||
seguimento_2_img_1_user_1.src = dadosDoBloco.imagem_User_1_segumento_2;
|
||||
seguimento_2_img_1_user_1.alt = "";
|
||||
user_1.appendChild(seguimento_2_img_1_user_1);
|
||||
const seguimento_2_img_2_user_1 = document.createElement('img');
|
||||
seguimento_2_img_2_user_1.classList.add('icon_subcab2_1');
|
||||
seguimento_2_img_2_user_1.src = dadosDoBloco.imagem_User_2_segumento_2;
|
||||
seguimento_2_img_2_user_1.alt = "";
|
||||
user_1.appendChild(seguimento_2_img_2_user_1);
|
||||
|
||||
|
||||
const user_2 = document.createElement('div');
|
||||
user_2.classList.add('user_2');
|
||||
seguimento_2.appendChild(user_2);
|
||||
|
||||
const identidade = document.createElement('p');
|
||||
user_2.appendChild(identidade);
|
||||
const User = document.createElement('div');
|
||||
User.id = "User";
|
||||
User.classList.add('user_2');
|
||||
User.textContent = dadosDoBloco.texto_User_segumento_2;
|
||||
identidade.appendChild(User);
|
||||
const Empresa = document.createElement('div');
|
||||
Empresa.id = "Empresa";
|
||||
Empresa.textContent = dadosDoBloco.texto_Empresa_segumento_2;
|
||||
user_2.classList.add('user_2');
|
||||
identidade.appendChild(Empresa);
|
||||
|
||||
const Coluna_2 = document.createElement('div');
|
||||
Coluna_2.classList.add('Colunas_2');
|
||||
|
||||
const seguimento_1_colun_2 = document.createElement('div');
|
||||
seguimento_1_colun_2.classList.add('seguimentos_1');
|
||||
Coluna_2.appendChild(seguimento_1_colun_2);
|
||||
|
||||
const seguimento_2_colun_2 = document.createElement('div');
|
||||
seguimento_2_colun_2.classList.add('seguimentos_2');
|
||||
Coluna_2.appendChild(seguimento_2_colun_2);
|
||||
|
||||
//Sessão de Cima
|
||||
|
||||
const sessao1 = document.createElement('div');
|
||||
sessao1.classList.add('sessao_1');
|
||||
seguimento_2_colun_2.appendChild(sessao1);
|
||||
|
||||
//Home
|
||||
|
||||
const sessao1_a_1 = document.createElement('a');
|
||||
sessao1_a_1.href = dadosDoBloco.Menu_home_a;
|
||||
sessao1_a_1.target = 'frame';
|
||||
sessao1.appendChild(sessao1_a_1);
|
||||
|
||||
const sessao1_a_1_item_menu = document.createElement('div');
|
||||
sessao1_a_1_item_menu.classList.add('item_menu');
|
||||
sessao1_a_1.appendChild(sessao1_a_1_item_menu);
|
||||
|
||||
const sessao1_a_1_item_menu_img = document.createElement('img');
|
||||
sessao1_a_1_item_menu_img.src = dadosDoBloco.Menu_home_img;
|
||||
sessao1_a_1_item_menu_img.alt = "";
|
||||
sessao1_a_1_item_menu.appendChild(sessao1_a_1_item_menu_img);
|
||||
const sessao1_a_1_item_menu_text = document.createElement('p');
|
||||
sessao1_a_1_item_menu_text.textContent = dadosDoBloco.Menu_home_text;
|
||||
sessao1_a_1_item_menu.appendChild(sessao1_a_1_item_menu_text);
|
||||
|
||||
//SevicDesck
|
||||
|
||||
const sessao1_a_2 = document.createElement('a');
|
||||
sessao1_a_2.href = dadosDoBloco.Menu_Servicedesk_a;
|
||||
sessao1.appendChild(sessao1_a_2);
|
||||
|
||||
const sessao1_a_2_item_menu = document.createElement('div');
|
||||
sessao1_a_2_item_menu.classList.add('item_menu');
|
||||
sessao1_a_2.appendChild(sessao1_a_2_item_menu);
|
||||
|
||||
const sessao1_a_2_item_menu_img = document.createElement('img');
|
||||
sessao1_a_2_item_menu_img.src = dadosDoBloco.Menu_Servicedesk_img;
|
||||
sessao1_a_2_item_menu_img.alt = "";
|
||||
sessao1_a_2_item_menu.appendChild(sessao1_a_2_item_menu_img);
|
||||
const sessao1_a_2_item_menu_text = document.createElement('p');
|
||||
sessao1_a_2_item_menu_text.textContent = dadosDoBloco.Menu_Servicedesk_text;
|
||||
sessao1_a_2_item_menu.appendChild(sessao1_a_2_item_menu_text);
|
||||
|
||||
//Monitoramento
|
||||
|
||||
const sessao1_a_3 = document.createElement('a');
|
||||
sessao1_a_3.href = dadosDoBloco.Menu_Monitor_a;
|
||||
sessao1_a_3.target = 'frame';
|
||||
sessao1.appendChild(sessao1_a_3);
|
||||
|
||||
const sessao1_a_3_item_menu = document.createElement('div');
|
||||
sessao1_a_3_item_menu.classList.add('item_menu');
|
||||
sessao1_a_3.appendChild(sessao1_a_3_item_menu);
|
||||
|
||||
const sessao1_a_3_item_menu_img = document.createElement('img');
|
||||
sessao1_a_3_item_menu_img.src = dadosDoBloco.Menu_Monitor_img;
|
||||
sessao1_a_3_item_menu_img.alt = "";
|
||||
sessao1_a_3_item_menu.appendChild(sessao1_a_3_item_menu_img);
|
||||
const sessao1_a_3_item_menu_text = document.createElement('p');
|
||||
sessao1_a_3_item_menu_text.textContent = dadosDoBloco.Menu_Monitor_text;
|
||||
sessao1_a_3_item_menu.appendChild(sessao1_a_3_item_menu_text);
|
||||
|
||||
//Sessão de baixo
|
||||
|
||||
const sessao2 = document.createElement('div');
|
||||
sessao2.classList.add('sessao_2');
|
||||
seguimento_2_colun_2.appendChild(sessao2);
|
||||
|
||||
//Suporte
|
||||
|
||||
const sessao2_a_1 = document.createElement('a');
|
||||
sessao2_a_1.href = dadosDoBloco.Menu_Suporte_a;
|
||||
sessao2.appendChild(sessao2_a_1);
|
||||
|
||||
const sessao2_a_1_item_menu = document.createElement('div');
|
||||
sessao2_a_1_item_menu.classList.add('item_menu');
|
||||
sessao2_a_1.appendChild(sessao2_a_1_item_menu);
|
||||
|
||||
const sessao2_a_1_item_menu_img = document.createElement('img');
|
||||
sessao2_a_1_item_menu_img.src = dadosDoBloco.Menu_Suporte_img;
|
||||
sessao2_a_1_item_menu_img.alt = "";
|
||||
sessao2_a_1_item_menu.appendChild(sessao2_a_1_item_menu_img);
|
||||
const sessao2_a_1_item_menu_text = document.createElement('p');
|
||||
sessao2_a_1_item_menu_text.textContent = dadosDoBloco.Menu_Suporte_text;
|
||||
sessao2_a_1_item_menu.appendChild(sessao2_a_1_item_menu_text);
|
||||
|
||||
//Configuração
|
||||
|
||||
const sessao2_a_2 = document.createElement('a');
|
||||
sessao2_a_2.href = dadosDoBloco.Menu_Config_a;
|
||||
sessao2_a_2.target = 'frame';
|
||||
sessao2.appendChild(sessao2_a_2);
|
||||
|
||||
const sessao2_a_2_item_menu = document.createElement('div');
|
||||
sessao2_a_2_item_menu.classList.add('item_menu');
|
||||
sessao2_a_2.appendChild(sessao2_a_2_item_menu);
|
||||
|
||||
const sessao2_a_2_item_menu_img = document.createElement('img');
|
||||
sessao2_a_2_item_menu_img.src = dadosDoBloco.Menu_Config_img;
|
||||
sessao2_a_2_item_menu_img.alt = "";
|
||||
sessao2_a_2_item_menu.appendChild(sessao2_a_2_item_menu_img);
|
||||
const sessao2_a_2_item_menu_text = document.createElement('p');
|
||||
sessao2_a_2_item_menu_text.textContent = dadosDoBloco.Menu_Config_text;
|
||||
sessao2_a_2_item_menu.appendChild(sessao2_a_2_item_menu_text);
|
||||
|
||||
//capitulo 2
|
||||
|
||||
const capitulo_2 = document.createElement('section');
|
||||
capitulo_2.classList.add('capitulo_2');
|
||||
const Corpo_2 = document.createElement('section');
|
||||
Corpo_2.classList.add('Corpo_2');
|
||||
const Corpo_2_Coluna_1 = document.createElement('div');
|
||||
Corpo_2_Coluna_1.classList.add('Colunas_1');
|
||||
|
||||
const Tela = document.createElement('iframe');
|
||||
Tela.classList.add('transmissão');
|
||||
Tela.src = dadosDoBloco.Tela;
|
||||
Tela.name = 'frame';
|
||||
Corpo_2_Coluna_1.appendChild(Tela);
|
||||
|
||||
|
||||
|
||||
// Adicionar o painel ao bloco
|
||||
|
||||
Painel.appendChild(cab);
|
||||
Painel.appendChild(Matriz);
|
||||
|
||||
|
||||
cab.appendChild(sucab);
|
||||
sucab.appendChild(bloco_subcab1_1);
|
||||
sucab.appendChild(bloco_subcab1_2);
|
||||
|
||||
Matriz.appendChild(capitulo_1);
|
||||
capitulo_1.appendChild(Corpo_1);
|
||||
Corpo_1.appendChild(Coluna_1);
|
||||
Corpo_1.appendChild(Coluna_2);
|
||||
|
||||
Matriz.appendChild(capitulo_2);
|
||||
capitulo_2.appendChild(Corpo_2);
|
||||
Corpo_2.appendChild(Corpo_2_Coluna_1);
|
||||
|
||||
|
||||
// Adicionar o bloco ao container de blocos
|
||||
entrada_1.appendChild(Painel);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Renderizar os blocos inicialmente ao carregar a página
|
||||
criarBlocos(dadosDosBlocos);
|
||||
|
||||
|
|
@ -1,264 +0,0 @@
|
|||
|
||||
|
||||
// Função para criar os blocos com base nos dados fornecidos
|
||||
function criarBlocos(dados) {
|
||||
// Limpar o container de blocos
|
||||
entrada_2.innerHTML = '';
|
||||
|
||||
// Iterar sobre o array de dados dos blocos
|
||||
dados.forEach(dadosDoBloco => {
|
||||
|
||||
const Painel = document.createElement('section'); // Responsavel por trazer todos os lementos da tela.
|
||||
const cab = document.createElement('section');
|
||||
cab.classList.add('menu');//Responsavel por trazer todo o cabeçario para a tela
|
||||
const Matriz = document.createElement('main');
|
||||
Matriz.classList.add('matriz');//Responsavel por trazer o menu e a tela do iframe.
|
||||
|
||||
|
||||
//Cabeçalho
|
||||
|
||||
const sucab = document.createElement('header');
|
||||
sucab.classList.add('cabecario_1');
|
||||
|
||||
//Bloco reponsavel pela imagem de logo da itguys
|
||||
|
||||
const bloco_subcab1_1 = document.createElement('div');//cria a tag div na página
|
||||
bloco_subcab1_1.classList.add('Bloco_subcab1_1');//Define a classe do Bloco_subcab1_1, para a constante Bloco_subcab1_1.
|
||||
const img_cab = document.createElement('img');//Cria a tag img na página
|
||||
img_cab.classList.add('icon_subcab1_1');//Define a classe do icon_subcab1_1, para a constante img_cab.
|
||||
img_cab.src = dadosDoBloco.imagem_Cab;//Cria o src para a tag img, e capita a informação registradas no dadosDoBlco no registro imagem_cab.
|
||||
img_cab.alt = '';//Cria uma alt sem nenhuma definição para a tag img.
|
||||
bloco_subcab1_1.appendChild(img_cab);//Define o img_cap como objeto filho do bloco_subcab1_1, logo a tag img estara dentor da div bloco_suvcab1_1.
|
||||
|
||||
const bloco_subcab1_2 = document.createElement('div');//cria a tag div na página
|
||||
bloco_subcab1_2.classList.add('Bloco_subcab1_2');//Define a classe do bloco_subcab1_2, para a constante Bloco_subcab1_2.
|
||||
const bloco_a_cab = document.createElement('a');//Criação da tag a na página.
|
||||
bloco_a_cab.href = dadosDoBloco.A_cab;//Criação do href para a tag a, e capita a informação registradas no dadosDoBlco no registro A_cab.
|
||||
bloco_subcab1_2.appendChild(bloco_a_cab);//Define o bloco_a_cab como objeto filho do bloco_subcab1_2, logo a tag a estara dentor da div bloco_subcab1_2.
|
||||
const bloco_button_cab = document.createElement('button');//cria a tag button na página.
|
||||
bloco_button_cab.textContent = dadosDoBloco.button_Cab;// Define um texto para o button.
|
||||
bloco_a_cab.appendChild(bloco_button_cab);//Define o bloco_button_cab como objeto filho do bloco_a_cab,logo a tag button estara dentor da div bloco_a_cab.
|
||||
|
||||
//Matriz
|
||||
|
||||
const capitulo_1 = document.createElement('section');//Cria uma tag section na página.
|
||||
capitulo_1.classList.add('capitulo_1');//adicina diretamente a classe capitulo_1, section recem criada.
|
||||
const Corpo_1 = document.createElement('section');//Cria uma tag section na página.
|
||||
Corpo_1.classList.add('Corpo_1');//adicina diretamente a classe corpo_1, section recem criada.
|
||||
const Coluna_1 = document.createElement('div');//Cria uma tag div na página.
|
||||
Coluna_1.classList.add('Colunas_1');//adicina diretamente a classe Colunas_1, div recem criada.
|
||||
|
||||
//Menu Lateral
|
||||
|
||||
//Painel personalizavel do usuario
|
||||
|
||||
const seguimento_1 = document.createElement('div');// Cria uma tag div na página.
|
||||
seguimento_1.classList.add('seguimentos_1'); // adiciona diretamente a classe seguimentos_1 na div recem criada
|
||||
Coluna_1.appendChild(seguimento_1); // define a div seguimento_1 como objeto filo da Coluna_1, log a tag div estara dentro da div Coluna_1
|
||||
const seguimento_1_button = document.createElement('button');
|
||||
seguimento_1.appendChild(seguimento_1_button);
|
||||
const seguimento_1_img = document.createElement('img');
|
||||
seguimento_1_img.id = "menu";
|
||||
seguimento_1_img.src = dadosDoBloco.imagem_segumento_1;
|
||||
seguimento_1_img.alt = "";
|
||||
seguimento_1_button.appendChild(seguimento_1_img);
|
||||
|
||||
const seguimento_2 = document.createElement('div');
|
||||
seguimento_2.classList.add('seguimentos_2');
|
||||
Coluna_1.appendChild(seguimento_2);
|
||||
|
||||
const user_1 = document.createElement('div');
|
||||
user_1.classList.add('user_1');
|
||||
seguimento_2.appendChild(user_1);
|
||||
|
||||
const seguimento_2_img_1_user_1 = document.createElement('img');
|
||||
seguimento_2_img_1_user_1.classList.add('icon_subcab2_2');
|
||||
seguimento_2_img_1_user_1.src = dadosDoBloco.imagem_User_1_segumento_2;
|
||||
seguimento_2_img_1_user_1.alt = "";
|
||||
user_1.appendChild(seguimento_2_img_1_user_1);
|
||||
const seguimento_2_img_2_user_1 = document.createElement('img');
|
||||
seguimento_2_img_2_user_1.classList.add('icon_subcab2_1');
|
||||
seguimento_2_img_2_user_1.src = dadosDoBloco.imagem_User_2_segumento_2;
|
||||
seguimento_2_img_2_user_1.alt = "";
|
||||
user_1.appendChild(seguimento_2_img_2_user_1);
|
||||
|
||||
|
||||
const user_2 = document.createElement('div');
|
||||
user_2.classList.add('user_2');
|
||||
seguimento_2.appendChild(user_2);
|
||||
|
||||
const identidade = document.createElement('p');
|
||||
user_2.appendChild(identidade);
|
||||
const User = document.createElement('div');
|
||||
User.id = "User";
|
||||
User.classList.add('user_2');
|
||||
User.textContent = dadosDoBloco.texto_User_segumento_2;
|
||||
identidade.appendChild(User);
|
||||
const Empresa = document.createElement('div');
|
||||
Empresa.id = "Empresa";
|
||||
Empresa.textContent = dadosDoBloco.texto_Empresa_segumento_2;
|
||||
user_2.classList.add('user_2');
|
||||
identidade.appendChild(Empresa);
|
||||
|
||||
const Coluna_2 = document.createElement('div');
|
||||
Coluna_2.classList.add('Colunas_2');
|
||||
|
||||
const seguimento_1_colun_2 = document.createElement('div');
|
||||
seguimento_1_colun_2.classList.add('seguimentos_1');
|
||||
Coluna_2.appendChild(seguimento_1_colun_2);
|
||||
|
||||
const seguimento_2_colun_2 = document.createElement('div');
|
||||
seguimento_2_colun_2.classList.add('seguimentos_2');
|
||||
Coluna_2.appendChild(seguimento_2_colun_2);
|
||||
|
||||
//Sessão de Cima
|
||||
|
||||
const sessao1 = document.createElement('div');
|
||||
sessao1.classList.add('sessao_1');
|
||||
seguimento_2_colun_2.appendChild(sessao1);
|
||||
|
||||
//Home
|
||||
|
||||
const sessao1_a_1 = document.createElement('a');
|
||||
sessao1_a_1.href = dadosDoBloco.Menu_home_a;
|
||||
sessao1_a_1.target = 'frame';
|
||||
sessao1.appendChild(sessao1_a_1);
|
||||
|
||||
const sessao1_a_1_item_menu = document.createElement('div');
|
||||
sessao1_a_1_item_menu.classList.add('item_menu');
|
||||
sessao1_a_1.appendChild(sessao1_a_1_item_menu);
|
||||
|
||||
const sessao1_a_1_item_menu_img = document.createElement('img');
|
||||
sessao1_a_1_item_menu_img.src = dadosDoBloco.Menu_home_img;
|
||||
sessao1_a_1_item_menu_img.alt = "";
|
||||
sessao1_a_1_item_menu.appendChild(sessao1_a_1_item_menu_img);
|
||||
const sessao1_a_1_item_menu_text = document.createElement('p');
|
||||
sessao1_a_1_item_menu_text.textContent = dadosDoBloco.Menu_home_text;
|
||||
sessao1_a_1_item_menu.appendChild(sessao1_a_1_item_menu_text);
|
||||
|
||||
//SevicDesck
|
||||
|
||||
const sessao1_a_2 = document.createElement('a');
|
||||
sessao1_a_2.href = dadosDoBloco.Menu_Servicedesk_a;
|
||||
sessao1.appendChild(sessao1_a_2);
|
||||
|
||||
const sessao1_a_2_item_menu = document.createElement('div');
|
||||
sessao1_a_2_item_menu.classList.add('item_menu');
|
||||
sessao1_a_2.appendChild(sessao1_a_2_item_menu);
|
||||
|
||||
const sessao1_a_2_item_menu_img = document.createElement('img');
|
||||
sessao1_a_2_item_menu_img.src = dadosDoBloco.Menu_Servicedesk_img;
|
||||
sessao1_a_2_item_menu_img.alt = "";
|
||||
sessao1_a_2_item_menu.appendChild(sessao1_a_2_item_menu_img);
|
||||
const sessao1_a_2_item_menu_text = document.createElement('p');
|
||||
sessao1_a_2_item_menu_text.textContent = dadosDoBloco.Menu_Servicedesk_text;
|
||||
sessao1_a_2_item_menu.appendChild(sessao1_a_2_item_menu_text);
|
||||
|
||||
//Monitoramento
|
||||
|
||||
const sessao1_a_3 = document.createElement('a');
|
||||
sessao1_a_3.href = dadosDoBloco.Menu_Monitor_a;
|
||||
sessao1_a_3.target = 'frame';
|
||||
sessao1.appendChild(sessao1_a_3);
|
||||
|
||||
const sessao1_a_3_item_menu = document.createElement('div');
|
||||
sessao1_a_3_item_menu.classList.add('item_menu');
|
||||
sessao1_a_3.appendChild(sessao1_a_3_item_menu);
|
||||
|
||||
const sessao1_a_3_item_menu_img = document.createElement('img');
|
||||
sessao1_a_3_item_menu_img.src = dadosDoBloco.Menu_Monitor_img;
|
||||
sessao1_a_3_item_menu_img.alt = "";
|
||||
sessao1_a_3_item_menu.appendChild(sessao1_a_3_item_menu_img);
|
||||
const sessao1_a_3_item_menu_text = document.createElement('p');
|
||||
sessao1_a_3_item_menu_text.textContent = dadosDoBloco.Menu_Monitor_text;
|
||||
sessao1_a_3_item_menu.appendChild(sessao1_a_3_item_menu_text);
|
||||
|
||||
//Sessão de baixo
|
||||
|
||||
const sessao2 = document.createElement('div');
|
||||
sessao2.classList.add('sessao_2');
|
||||
seguimento_2_colun_2.appendChild(sessao2);
|
||||
|
||||
//Suporte
|
||||
|
||||
const sessao2_a_1 = document.createElement('a');
|
||||
sessao2_a_1.href = dadosDoBloco.Menu_Suporte_a;
|
||||
sessao2.appendChild(sessao2_a_1);
|
||||
|
||||
const sessao2_a_1_item_menu = document.createElement('div');
|
||||
sessao2_a_1_item_menu.classList.add('item_menu');
|
||||
sessao2_a_1.appendChild(sessao2_a_1_item_menu);
|
||||
|
||||
const sessao2_a_1_item_menu_img = document.createElement('img');
|
||||
sessao2_a_1_item_menu_img.src = dadosDoBloco.Menu_Suporte_img;
|
||||
sessao2_a_1_item_menu_img.alt = "";
|
||||
sessao2_a_1_item_menu.appendChild(sessao2_a_1_item_menu_img);
|
||||
const sessao2_a_1_item_menu_text = document.createElement('p');
|
||||
sessao2_a_1_item_menu_text.textContent = dadosDoBloco.Menu_Suporte_text;
|
||||
sessao2_a_1_item_menu.appendChild(sessao2_a_1_item_menu_text);
|
||||
|
||||
//Configuração
|
||||
|
||||
const sessao2_a_2 = document.createElement('a');
|
||||
sessao2_a_2.href = dadosDoBloco.Menu_Config_a;
|
||||
sessao2_a_2.target = 'frame';
|
||||
sessao2.appendChild(sessao2_a_2);
|
||||
|
||||
const sessao2_a_2_item_menu = document.createElement('div');
|
||||
sessao2_a_2_item_menu.classList.add('item_menu');
|
||||
sessao2_a_2.appendChild(sessao2_a_2_item_menu);
|
||||
|
||||
const sessao2_a_2_item_menu_img = document.createElement('img');
|
||||
sessao2_a_2_item_menu_img.src = dadosDoBloco.Menu_Config_img;
|
||||
sessao2_a_2_item_menu_img.alt = "";
|
||||
sessao2_a_2_item_menu.appendChild(sessao2_a_2_item_menu_img);
|
||||
const sessao2_a_2_item_menu_text = document.createElement('p');
|
||||
sessao2_a_2_item_menu_text.textContent = dadosDoBloco.Menu_Config_text;
|
||||
sessao2_a_2_item_menu.appendChild(sessao2_a_2_item_menu_text);
|
||||
|
||||
//capitulo 2
|
||||
|
||||
const capitulo_2 = document.createElement('section');
|
||||
capitulo_2.classList.add('capitulo_2');
|
||||
const Corpo_2 = document.createElement('section');
|
||||
Corpo_2.classList.add('Corpo_2');
|
||||
const Corpo_2_Coluna_1 = document.createElement('div');
|
||||
Corpo_2_Coluna_1.classList.add('Colunas_1');
|
||||
|
||||
const Tela = document.createElement('iframe');
|
||||
Tela.classList.add('transmissão');
|
||||
Tela.src = dadosDoBloco.Tela;
|
||||
Tela.name = 'frame';
|
||||
Corpo_2_Coluna_1.appendChild(Tela);
|
||||
|
||||
|
||||
|
||||
// Adicionar o painel ao bloco
|
||||
|
||||
Painel.appendChild(cab);
|
||||
Painel.appendChild(Matriz);
|
||||
|
||||
|
||||
cab.appendChild(sucab);
|
||||
sucab.appendChild(bloco_subcab1_1);
|
||||
sucab.appendChild(bloco_subcab1_2);
|
||||
|
||||
Matriz.appendChild(capitulo_1);
|
||||
capitulo_1.appendChild(Corpo_1);
|
||||
Corpo_1.appendChild(Coluna_1);
|
||||
Corpo_1.appendChild(Coluna_2);
|
||||
|
||||
Matriz.appendChild(capitulo_2);
|
||||
capitulo_2.appendChild(Corpo_2);
|
||||
Corpo_2.appendChild(Corpo_2_Coluna_1);
|
||||
|
||||
|
||||
// Adicionar o bloco ao container de blocos
|
||||
entrada_2.appendChild(Painel);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Renderizar os blocos inicialmente ao carregar a página
|
||||
criarBlocos(dadosDosBlocos2);
|
||||
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../../Css/global/padraouser.css">
|
||||
<link rel="stylesheet" href="../../Css/global/import.css">
|
||||
<link rel="stylesheet" href="../../Css/Ambiente_Usuario/Configuracoes.css">
|
||||
</head>
|
||||
|
||||
<body class="default-theme">
|
||||
<section class="matriz">
|
||||
|
||||
<section class="menu">
|
||||
<div class="catalos_1">
|
||||
<img src="../../Acessts/Imagens/Iconis/paint-palette.png" alt="">
|
||||
<a href="./estilos.html" target="iframe">Estilos</a>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="apresentacao">
|
||||
<iframe src="./estilos.html" frameborder="0" name="iframe"></iframe>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
<script src="./tes.js"></script>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,129 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<div id="entrada"></div>
|
||||
<link rel="stylesheet" href="../../Css/Ambiente_Usuario/Configuracoes.css">
|
||||
</head>
|
||||
|
||||
<body class="default-theme">
|
||||
|
||||
<form action="" class="estilos">
|
||||
|
||||
<div class="tema_usuario">
|
||||
|
||||
<label for="Usuario">Seu nome</label>
|
||||
<input name="Usuario" type="text">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mudanca_Img">
|
||||
|
||||
<div class="container">
|
||||
<figure class="image-container">
|
||||
<img id="chosen-image1">
|
||||
</figure>
|
||||
<input type="file" id="upload-button1" accept="image/*">
|
||||
<label for="upload-button1">
|
||||
<i class="fas fa-upload-button"></i>
|
||||
choose a Photo
|
||||
</label>
|
||||
<script>
|
||||
let uploadButton1 = document.getElementById("upload-button1");
|
||||
let chosenImage1 = document.getElementById("chosen-image1");
|
||||
let fileName1 = document.getElementById("file-name1");
|
||||
|
||||
uploadButton1.onchange = () => {
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(uploadButton1.files[0]);
|
||||
console.log(uploadButton1.files[0]);
|
||||
reader.onload = () => {
|
||||
chosenImage1.setAttribute("src", reader.result);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div class="container2">
|
||||
<figure class="image-container2">
|
||||
<img id="chosen-image2">
|
||||
</figure>
|
||||
<input type="file" id="upload-button2" accept="image/*">
|
||||
<label for="upload-button2">
|
||||
<i class="fas fa-upload-button"></i>
|
||||
choose a Photo
|
||||
</label>
|
||||
<script>
|
||||
let uploadButton2 = document.getElementById("upload-button2");
|
||||
let chosenImage2 = document.getElementById("chosen-image2");
|
||||
let fileName2 = document.getElementById("file-name2");
|
||||
|
||||
uploadButton2.onchange = () => {
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(uploadButton2.files[0]);
|
||||
console.log(uploadButton2.files[0]);
|
||||
reader.onload = () => {
|
||||
chosenImage2.setAttribute("src", reader.result);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="Cap_1">
|
||||
<Label>Seu Perfil</Label>
|
||||
<input type="file">
|
||||
</div>
|
||||
<div class="Cap_2">
|
||||
<Label>Fundo personalizavel</Label>
|
||||
<input type="file">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tema_Pesonalizavel">
|
||||
<div class="fundo_1">
|
||||
<input type="radio" name="theme" value="light" id="lightTheme">
|
||||
<label for="lightTheme">Light Theme</label>
|
||||
|
||||
<input type="radio" name="theme" value="dark" id="darkTheme">
|
||||
<label for="darkTheme">Dark Theme</label>
|
||||
|
||||
|
||||
<input type="radio" name="theme" value="dark" id="darkTheme">
|
||||
<label for="darkTheme">Dark Theme</label>
|
||||
|
||||
<div id="content" data-theme="default">
|
||||
<!-- Seu conteúdo aqui -->
|
||||
</div>
|
||||
|
||||
<input type="radio" id="claro" name="fav_language" value="claro">
|
||||
<label for="claro">Claro</label><br>
|
||||
<img src="../../Acessts/Imagens/Painel Backup 2.png" alt="">
|
||||
</div>
|
||||
<div class="fundo_2">
|
||||
<input type="radio" id="escuro" name="fav_language" value="ESCURO">
|
||||
<label for="escuro">Escuro</label><br>
|
||||
<img src="../../Acessts/Imagens/Painel Backup 2.png" alt="">
|
||||
</div>
|
||||
<div class="fundo_3">
|
||||
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
|
||||
<label for="javascript">Padrão</label><br>
|
||||
<img src="../../Acessts/Imagens/Painel Backup 2.png" alt="">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="./tes.js"></script>
|
||||
|
||||
<button>Aplicar</button>
|
||||
|
||||
</form>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const lightThemeRadio = document.getElementById('lightTheme');
|
||||
const darkThemeRadio = document.getElementById('darkTheme');
|
||||
|
||||
// Verifica se há um tema armazenado no localStorage e aplica-o
|
||||
const storedTheme = localStorage.getItem('theme');
|
||||
if (storedTheme) {
|
||||
document.body.classList.add(storedTheme);
|
||||
}
|
||||
|
||||
lightThemeRadio.addEventListener('change', function () {
|
||||
if (this.checked) {
|
||||
document.body.classList.remove('dark-theme');
|
||||
document.body.classList.add('default-theme');
|
||||
localStorage.setItem('theme', 'default-theme'); // Armazena o tema escolhido no localStorage
|
||||
}
|
||||
});
|
||||
|
||||
darkThemeRadio.addEventListener('change', function () {
|
||||
if (this.checked) {
|
||||
document.body.classList.remove('default-theme');
|
||||
document.body.classList.add('dark-theme');
|
||||
localStorage.setItem('theme', 'dark-theme'); // Armazena o tema escolhido no localStorage
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
const dadosDosBlocos = [
|
||||
{
|
||||
imagem_Cab: '../Acessts/Imagens/iT_Guys/logo_340x100.png',
|
||||
A_cab: './Ambiente_Usuario copy.html',
|
||||
button_Cab: 'Logout',
|
||||
}
|
||||
|
||||
// Adicione mais objetos para mais blocos se necessário
|
||||
];
|
||||
|
||||
// Função para criar os blocos com base nos dados fornecidos
|
||||
function criarBlocos(dados) {
|
||||
// Limpar o container de blocos
|
||||
entrada.innerHTML = '';
|
||||
|
||||
// Iterar sobre o array de dados dos blocos
|
||||
dados.forEach(dadosDoBloco => {
|
||||
|
||||
const Painel = document.createElement('section'); // Responsavel por trazer todos os lementos da tela.
|
||||
|
||||
const css1 = document.createElement('link');
|
||||
css1.rel = 'stylesheet';
|
||||
css1.href = '../../Css/padraouser.css';
|
||||
|
||||
const css2 = document.createElement('link');
|
||||
css2.rel = 'stylesheet';
|
||||
css2.href = '../../Css/padraouser.css';
|
||||
//Cabeçalho
|
||||
|
||||
Painel.appendChild(css1);
|
||||
Painel.appendChild(css2);
|
||||
|
||||
// Adicionar o bloco ao container de blocos
|
||||
entrada.appendChild(Painel);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Renderizar os blocos inicialmente ao carregar a página
|
||||
criarBlocos(dadosDosBlocos);
|
||||
|
|
@ -1,209 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
|
||||
<head>
|
||||
<title>Ambiente de teste</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Feature-Policy"
|
||||
content="geolocation 'none'; microphone 'none'; camera 'none'; fullscreen 'none'; payment 'none'; vr 'none'; autoplay 'none'; accelerometer 'none'; ambient-light-sensor 'none'; gyroscope 'none'; magnetometer 'none';picture-in-picture 'none';sync-xhr 'none'; usb 'none';clipboard-write 'none'; clipboard-read 'none'; payments 'none'; ">
|
||||
|
||||
<link id="conexao" rel="stylesheet" href="../../Css/page/Ambiente/Estrutura/estrutura.css">
|
||||
<link rel="icon" type="image/x-icon" href="./Acessts/Imagens/iT_Guys/logo1.png">
|
||||
<style id="fundouser">
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body class="estrutura">
|
||||
|
||||
|
||||
<nav>
|
||||
<section class="menu_lateral">
|
||||
|
||||
<div class="seguimentacao_1">
|
||||
<div class="coluna_1"> <!--imagem de fundo-->
|
||||
<div class="subcolunas_1">
|
||||
|
||||
<div class="filheira">
|
||||
<img src="../../Acessts/Imagens/iT_Guys/Logo_itGuys - Copia.png" alt="">
|
||||
<!--Iconi da Itguys-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="coluna_2">
|
||||
<div class="subcolunas_1">
|
||||
|
||||
<div class="filheira">
|
||||
<img class="img" src="../../Acessts/Imagens/Iconis/home.png" alt="">
|
||||
</div><!--Home-->
|
||||
|
||||
<div class="filheira">
|
||||
<img class="img" src="../../Acessts/Imagens/Iconis/monitor.png" alt="">
|
||||
</div><!--Monitoramento-->
|
||||
|
||||
<div class="filheira">
|
||||
<img class="img" src="../../Acessts/Imagens/Iconis/technical-support.png" alt="">
|
||||
</div><!--Servicdesk-->
|
||||
|
||||
<div class="filheira">
|
||||
<img class="img" src="../../Acessts/Imagens/Iconis/caixa-de-ferramentas.png" alt="">
|
||||
</div><!--Ferramentas-->
|
||||
|
||||
|
||||
</div>
|
||||
<div class="subcolunas_2">
|
||||
|
||||
<div class="filheira">
|
||||
<img class="img" src="../../Acessts/Imagens/Iconis/central-de-atendimento.png" alt="">
|
||||
</div><!--Suporte-->
|
||||
|
||||
<div class="filheira">
|
||||
<img class="img" src="../../Acessts/Imagens/Iconis/engrenagem - Copia.png" alt="">
|
||||
</div><!--Configurações-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="seguimentacao_2">
|
||||
|
||||
<div class="coluna_1"> <!--imagem de fundo-->
|
||||
<div class="subcolunas_1">
|
||||
<div class="filheira">
|
||||
<img src="../../Acessts/Imagens/Iconis/profile-user.png" alt=""> <!--Usuário de fundo-->
|
||||
</div>
|
||||
<div class="filheira">
|
||||
<h2>Usuário</h2>
|
||||
<h2>Empresa</h2>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="subcolunas_2">
|
||||
<button class="id_ajuste" id="id_ajuste">
|
||||
<img class="imgjust" src="../../Acessts/Imagens/Iconis/seta-direita.png" alt="">
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="coluna_2">
|
||||
<div class="subcolunas_1">
|
||||
|
||||
<a href="" class="filheira_a" target="frame">
|
||||
<div class="filheira">
|
||||
<h2>Home</h2>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="" class="filheira_a" target="frame">
|
||||
<div class="filheira">
|
||||
|
||||
<h2>Monitoramento</h2>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="" class="filheira_a" target="frame">
|
||||
<div class="filheira">
|
||||
|
||||
|
||||
<h2>Servicdesk</h2>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="" class="filheira_a" target="frame">
|
||||
<div class="filheira">
|
||||
|
||||
|
||||
<h2>Ferramentas</h2>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="subcolunas_2">
|
||||
|
||||
<a href="" class="filheira_a" target="frame">
|
||||
<div class="filheira">
|
||||
|
||||
|
||||
<h2>Suporte</h2>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="" class="filheira_a">
|
||||
<div class="filheira">
|
||||
|
||||
|
||||
<h2>Configurações</h2>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
|
||||
<!-- Seu conteúdo principal aqui -->
|
||||
<main class="apresentacao">
|
||||
|
||||
<section class="capitulo_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>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="capitulo_2">
|
||||
|
||||
|
||||
|
||||
<iframe id="test1" name="frame" class="transmissão" src="../../Ambiente_Usuario_copy.html"
|
||||
frameborder="0"></iframe>
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
var botao = document.querySelector('#id_ajuste')
|
||||
var cabecario = document.querySelector('.capitulo_1')
|
||||
var tela = document.querySelector('.capitulo_2')
|
||||
var menu = document.querySelector('.menu_lateral')
|
||||
//var temas = document.querySelectorAll('.item_menu')
|
||||
|
||||
|
||||
//Aqui se aplica o evento de cliente, sobre afunção que aplica as classes no menu caberio e telas
|
||||
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))
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,286 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<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 rel="icon" type="image/x-icon" href="../Acessts/Imagens/iT_Guys/logo1.png">
|
||||
<title>Ambiente do Usuario</title>
|
||||
</head>
|
||||
|
||||
<body class="test">
|
||||
|
||||
<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 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>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
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');
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="Colunas_3"></div>
|
||||
<div class="Colunas_4"></div>
|
||||
</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 class="Colunas_2">
|
||||
|
||||
</div>
|
||||
<div class="Colunas_3"></div>
|
||||
<div class="Colunas_4"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
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))
|
||||
|
||||
</script>
|
||||
<div class="Corpo_3">
|
||||
<div class="Colunas_1"></div>
|
||||
<div class="Colunas_2"></div>
|
||||
<div class="Colunas_3"></div>
|
||||
<div class="Colunas_4"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<script src="./tes.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
|
||||
<head>
|
||||
<title>Ambiente de teste</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Feature-Policy"
|
||||
content="geolocation 'none'; microphone 'none'; camera 'none'; fullscreen 'none'; payment 'none'; vr 'none'; autoplay 'none'; accelerometer 'none'; ambient-light-sensor 'none'; gyroscope 'none'; magnetometer 'none';picture-in-picture 'none';sync-xhr 'none'; usb 'none';clipboard-write 'none'; clipboard-read 'none'; payments 'none'; ">
|
||||
|
||||
<link id="conexao" rel="stylesheet" href="../Css/page/Telas_acao/load.css">
|
||||
<link rel="icon" type="image/x-icon" href="./Acessts/Imagens/iT_Guys/logo1.png">
|
||||
<style id="fundouser">
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Seu conteúdo principal aqui -->
|
||||
<main id="entrada_1">
|
||||
|
||||
</main>
|
||||
|
||||
<script src="../js/Ambiente/Estrutura/Estrutura_Primaria.js"></script>
|
||||
<script src="../js/Ambiente/Estrutura/load.js"></script>
|
||||
|
||||
<!--padrao_A1 reponsavel ter toda a estrutura que aplicara o data na tela-->
|
||||
<!-- -->
|
||||
|
||||
</html>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,553 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Gráficos com Canvas e JavaScript</title>
|
||||
<style>
|
||||
canvas {
|
||||
border: 1px solid #000;
|
||||
margin: 20px;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Exemplos de Gráficos com Canvas e JavaScript</h1>
|
||||
|
||||
<!-- Gráficos -->
|
||||
<h2>Gráfico de Linha do Tempo</h2>
|
||||
<canvas id="timelineChart" width="600" height="400"></canvas>
|
||||
|
||||
<h2>Gráfico de Linhas</h2>
|
||||
<canvas id="lineChart" width="600" height="400"></canvas>
|
||||
|
||||
<h2>Gráfico de Barras</h2>
|
||||
<canvas id="barChart" width="600" height="400"></canvas>
|
||||
|
||||
<h2>Gráfico de Pizza</h2>
|
||||
<canvas id="pieChart" width="400" height="400"></canvas>
|
||||
|
||||
<h2>Gráfico de Área</h2>
|
||||
<canvas id="areaChart" width="600" height="400"></canvas>
|
||||
|
||||
<h2>Gráfico de Calor</h2>
|
||||
<canvas id="heatmapChart" width="600" height="400"></canvas>
|
||||
|
||||
<h2>Gráfico Donut</h2>
|
||||
<canvas id="donutChart" width="400" height="400"></canvas>
|
||||
|
||||
<h2>Gráfico de Dispersão</h2>
|
||||
<canvas id="scatterChart" width="600" height="400"></canvas>
|
||||
|
||||
<h2>Gráfico de Bolhas</h2>
|
||||
<canvas id="bubbleChart" width="600" height="400"></canvas>
|
||||
|
||||
<h2>Gráfico de Barras Empilhadas</h2>
|
||||
<canvas id="stackedBarChart" width="600" height="400"></canvas>
|
||||
|
||||
<h2>Gráfico de Linhas com Anotação</h2>
|
||||
<canvas id="annotatedLineChart" width="600" height="400"></canvas>
|
||||
|
||||
<h2>Gráfico de Velocímetro</h2>
|
||||
<canvas id="gaugeChart" width="400" height="400"></canvas>
|
||||
|
||||
<script>
|
||||
// Função para desenhar o gráfico de linha do tempo
|
||||
function drawTimelineChart(ctx, data, labels) {
|
||||
const padding = 40;
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const maxData = Math.max(...data);
|
||||
const minData = Math.min(...data);
|
||||
const lineColor = 'blue';
|
||||
const labelColor = 'black';
|
||||
const pointRadius = 5;
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Draw axes
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, padding);
|
||||
ctx.lineTo(padding, height - padding);
|
||||
ctx.lineTo(width - padding, height - padding);
|
||||
ctx.stroke();
|
||||
|
||||
// Draw data points and lines
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, height - padding - ((data[0] - minData) / (maxData - minData) * (height - 2 * padding)));
|
||||
data.forEach((point, i) => {
|
||||
const x = padding + i * (width - 2 * padding) / (data.length - 1);
|
||||
const y = height - padding - ((point - minData) / (maxData - minData) * (height - 2 * padding));
|
||||
ctx.lineTo(x, y);
|
||||
ctx.arc(x, y, pointRadius, 0, 2 * Math.PI);
|
||||
});
|
||||
ctx.strokeStyle = lineColor;
|
||||
ctx.stroke();
|
||||
ctx.fillStyle = lineColor;
|
||||
ctx.fill();
|
||||
|
||||
// Draw labels
|
||||
ctx.fillStyle = labelColor;
|
||||
labels.forEach((label, i) => {
|
||||
const x = padding + i * (width - 2 * padding) / (labels.length - 1);
|
||||
const y = height - padding + 20;
|
||||
ctx.fillText(label, x, y);
|
||||
});
|
||||
}
|
||||
|
||||
// Função para desenhar o gráfico de linhas
|
||||
function drawLineChart(ctx, data) {
|
||||
const padding = 40;
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const maxData = Math.max(...data);
|
||||
const minData = Math.min(...data);
|
||||
const lineColor = 'blue';
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Draw axes
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, padding);
|
||||
ctx.lineTo(padding, height - padding);
|
||||
ctx.lineTo(width - padding, height - padding);
|
||||
ctx.stroke();
|
||||
|
||||
// Draw line
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, height - padding - ((data[0] - minData) / (maxData - minData) * (height - 2 * padding)));
|
||||
data.forEach((point, i) => {
|
||||
const x = padding + i * (width - 2 * padding) / (data.length - 1);
|
||||
const y = height - padding - ((point - minData) / (maxData - minData) * (height - 2 * padding));
|
||||
ctx.lineTo(x, y);
|
||||
});
|
||||
ctx.strokeStyle = lineColor;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Função para desenhar o gráfico de barras
|
||||
function drawBarChart(ctx, data) {
|
||||
const padding = 40;
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const barWidth = (width - 2 * padding) / data.length - 10;
|
||||
const maxData = Math.max(...data);
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Draw bars
|
||||
data.forEach((point, i) => {
|
||||
const x = padding + i * ((width - 2 * padding) / data.length);
|
||||
const barHeight = (point / maxData) * (height - 2 * padding);
|
||||
ctx.fillStyle = 'blue';
|
||||
ctx.fillRect(x, height - padding - barHeight, barWidth, barHeight);
|
||||
});
|
||||
|
||||
// Draw axes
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, padding);
|
||||
ctx.lineTo(padding, height - padding);
|
||||
ctx.lineTo(width - padding, height - padding);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Função para desenhar o gráfico de pizza
|
||||
function drawPieChart(ctx, data) {
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const radius = Math.min(width, height) / 2 - 20;
|
||||
const centerX = width / 2;
|
||||
const centerY = height / 2;
|
||||
|
||||
let startAngle = 0;
|
||||
const total = data.reduce((acc, val) => acc + val, 0);
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
data.forEach((value, i) => {
|
||||
const sliceAngle = (value / total) * 2 * Math.PI;
|
||||
const endAngle = startAngle + sliceAngle;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(centerX, centerY);
|
||||
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = `hsl(${i * 360 / data.length}, 70%, 70%)`;
|
||||
ctx.fill();
|
||||
|
||||
startAngle = endAngle;
|
||||
});
|
||||
}
|
||||
|
||||
// Função para desenhar o gráfico de área
|
||||
function drawAreaChart(ctx, data) {
|
||||
const padding = 40;
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const maxData = Math.max(...data);
|
||||
const minData = Math.min(...data);
|
||||
const lineColor = 'blue';
|
||||
const fillColor = 'rgba(0, 0, 255, 0.2)';
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Draw axes
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, padding);
|
||||
ctx.lineTo(padding, height - padding);
|
||||
ctx.lineTo(width - padding, height - padding);
|
||||
ctx.stroke();
|
||||
|
||||
// Draw area
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, height - padding);
|
||||
data.forEach((point, i) => {
|
||||
const x = padding + i * (width - 2 * padding) / (data.length - 1);
|
||||
const y = height - padding - ((point - minData) / (maxData - minData) * (height - 2 * padding));
|
||||
ctx.lineTo(x, y);
|
||||
});
|
||||
ctx.lineTo(width - padding, height - padding);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = fillColor;
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = lineColor;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Função para desenhar o gráfico de calor
|
||||
function drawHeatmapChart(ctx, data) {
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const cellSize = 30;
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Draw heatmap
|
||||
data.forEach((row, y) => {
|
||||
row.forEach((value, x) => {
|
||||
const color = `rgba(255, 0, 0, ${value})`;
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Função para desenhar o gráfico Donut
|
||||
function drawDonutChart(ctx, data) {
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const radius = Math.min(width, height) / 2 - 20;
|
||||
const innerRadius = radius / 2;
|
||||
const centerX = width / 2;
|
||||
const centerY = height / 2;
|
||||
|
||||
let startAngle = 0;
|
||||
const total = data.reduce((acc, val) => acc + val, 0);
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
data.forEach((value, i) => {
|
||||
const sliceAngle = (value / total) * 2 * Math.PI;
|
||||
const endAngle = startAngle + sliceAngle;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
|
||||
ctx.arc(centerX, centerY, innerRadius, endAngle, startAngle, true);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = `hsl(${i * 360 / data.length}, 70%, 70%)`;
|
||||
ctx.fill();
|
||||
|
||||
startAngle = endAngle;
|
||||
});
|
||||
}
|
||||
|
||||
// Função para desenhar o gráfico de dispersão
|
||||
function drawScatterChart(ctx, data) {
|
||||
const padding = 40;
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const maxX = Math.max(...data.map(p => p[0]));
|
||||
const minX = Math.min(...data.map(p => p[0]));
|
||||
const maxY = Math.max(...data.map(p => p[1]));
|
||||
const minY = Math.min(...data.map(p => p[1]));
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Draw axes
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, padding);
|
||||
ctx.lineTo(padding, height - padding);
|
||||
ctx.lineTo(width - padding, height - padding);
|
||||
ctx.stroke();
|
||||
|
||||
// Draw points
|
||||
data.forEach(([x, y]) => {
|
||||
const px = padding + (x - minX) / (maxX - minX) * (width - 2 * padding);
|
||||
const py = height - padding - (y - minY) / (maxY - minY) * (height - 2 * padding);
|
||||
ctx.beginPath();
|
||||
ctx.arc(px, py, 5, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = 'blue';
|
||||
ctx.fill();
|
||||
});
|
||||
}
|
||||
|
||||
// Função para desenhar o gráfico de bolhas
|
||||
function drawBubbleChart(ctx, data) {
|
||||
const padding = 40;
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const maxX = Math.max(...data.map(p => p[0]));
|
||||
const minX = Math.min(...data.map(p => p[0]));
|
||||
const maxY = Math.max(...data.map(p => p[1]));
|
||||
const minY = Math.min(...data.map(p => p[1]));
|
||||
const maxSize = Math.max(...data.map(p => p[2]));
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Draw axes
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, padding);
|
||||
ctx.lineTo(padding, height - padding);
|
||||
ctx.lineTo(width - padding, height - padding);
|
||||
ctx.stroke();
|
||||
|
||||
// Draw bubbles
|
||||
data.forEach(([x, y, size]) => {
|
||||
const px = padding + (x - minX) / (maxX - minX) * (width - 2 * padding);
|
||||
const py = height - padding - (y - minY) / (maxY - minY) * (height - 2 * padding);
|
||||
const radius = (size / maxSize) * 20;
|
||||
ctx.beginPath();
|
||||
ctx.arc(px, py, radius, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = 'blue';
|
||||
ctx.fill();
|
||||
});
|
||||
}
|
||||
|
||||
// Função para desenhar o gráfico de barras empilhadas
|
||||
function drawStackedBarChart(ctx, data) {
|
||||
const padding = 40;
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const barWidth = (width - 2 * padding) / data[0].length - 10;
|
||||
const maxData = Math.max(...data.flat());
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Draw bars
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
data[i].forEach((point, j) => {
|
||||
const x = padding + j * ((width - 2 * padding) / data[0].length);
|
||||
const barHeight = (point / maxData) * (height - 2 * padding);
|
||||
ctx.fillStyle = `rgba(0, 0, 255, ${i / data.length})`;
|
||||
ctx.fillRect(x, height - padding - barHeight, barWidth, barHeight);
|
||||
});
|
||||
}
|
||||
|
||||
// Draw axes
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, padding);
|
||||
ctx.lineTo(padding, height - padding);
|
||||
ctx.lineTo(width - padding, height - padding);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
|
||||
function drawAnnotatedLineChart(ctx, data, annotations) {
|
||||
const padding = 40;
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const maxData = Math.max(...data);
|
||||
const minData = Math.min(...data);
|
||||
const lineColor = 'blue';
|
||||
const annotationColor = 'red';
|
||||
const gridColor = 'lightgray';
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Draw axes
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, padding);
|
||||
ctx.lineTo(padding, height - padding);
|
||||
ctx.lineTo(width - padding, height - padding);
|
||||
ctx.stroke();
|
||||
|
||||
// Draw grid lines and Y-axis labels
|
||||
const numGridLinesX = 10; // Número de linhas de grade no eixo X
|
||||
const numGridLinesY = 10; // Número de linhas de grade no eixo Y
|
||||
|
||||
// Linhas verticais e rótulos do eixo X
|
||||
for (let i = 0; i <= numGridLinesX; i++) {
|
||||
const x = padding + (i * (width - 2 * padding) / numGridLinesX);
|
||||
ctx.strokeStyle = gridColor;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, padding);
|
||||
ctx.lineTo(x, height - padding);
|
||||
ctx.stroke();
|
||||
|
||||
// Rótulo do eixo X
|
||||
ctx.fillText(`X${i}`, x, height - padding + 20);
|
||||
}
|
||||
|
||||
// Linhas horizontais e rótulos do eixo Y
|
||||
for (let i = 0; i <= numGridLinesY; i++) {
|
||||
const y = height - padding - (i * (height - 2 * padding) / numGridLinesY);
|
||||
ctx.strokeStyle = gridColor;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, y);
|
||||
ctx.lineTo(width - padding, y);
|
||||
ctx.stroke();
|
||||
|
||||
// Rótulo do eixo Y
|
||||
const yValue = minData + (i * (maxData - minData) / numGridLinesY);
|
||||
ctx.fillText(yValue.toFixed(2), padding - 30, y);
|
||||
}
|
||||
|
||||
// Draw line
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, height - padding - ((data[0] - minData) / (maxData - minData) * (height - 2 * padding)));
|
||||
data.forEach((point, i) => {
|
||||
const x = padding + i * (width - 2 * padding) / (data.length - 1);
|
||||
const y = height - padding - ((point - minData) / (maxData - minData) * (height - 2 * padding));
|
||||
ctx.lineTo(x, y);
|
||||
});
|
||||
ctx.strokeStyle = lineColor;
|
||||
ctx.stroke();
|
||||
|
||||
// Draw annotations
|
||||
annotations.forEach(([x, y, text]) => {
|
||||
ctx.fillStyle = annotationColor;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, 5, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
ctx.fillText(text, x + 10, y);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Função para desenhar o gráfico de velocímetro
|
||||
function drawGaugeChart(ctx, value) {
|
||||
const width = ctx.canvas.width;
|
||||
const height = ctx.canvas.height;
|
||||
const radius = Math.min(width, height) / 2 - 20;
|
||||
const centerX = width / 2;
|
||||
const centerY = height / 2;
|
||||
const maxValue = 100;
|
||||
const angle = (value / maxValue) * Math.PI;
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Draw gauge
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX, centerY, radius, Math.PI, Math.PI + Math.PI);
|
||||
ctx.lineTo(centerX, centerY);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = 'lightgrey';
|
||||
ctx.fill();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX, centerY, radius, Math.PI, Math.PI + angle);
|
||||
ctx.lineTo(centerX, centerY);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = 'blue';
|
||||
ctx.fill();
|
||||
|
||||
// Draw needle
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(centerX, centerY);
|
||||
const needleX = centerX + (radius - 10) * Math.cos(Math.PI + angle);
|
||||
const needleY = centerY + (radius - 10) * Math.sin(Math.PI + angle);
|
||||
ctx.lineTo(needleX, needleY);
|
||||
ctx.strokeStyle = 'black';
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
const timelineCanvas = document.getElementById('timelineChart');
|
||||
const lineCanvas = document.getElementById('lineChart');
|
||||
const barCanvas = document.getElementById('barChart');
|
||||
const pieCanvas = document.getElementById('pieChart');
|
||||
const areaCanvas = document.getElementById('areaChart');
|
||||
const heatmapCanvas = document.getElementById('heatmapChart');
|
||||
const donutCanvas = document.getElementById('donutChart');
|
||||
const scatterCanvas = document.getElementById('scatterChart');
|
||||
const bubbleCanvas = document.getElementById('bubbleChart');
|
||||
const stackedBarCanvas = document.getElementById('stackedBarChart');
|
||||
const annotatedLineCanvas = document.getElementById('annotatedLineChart');
|
||||
const gaugeCanvas = document.getElementById('gaugeChart');
|
||||
|
||||
const timelineCtx = timelineCanvas.getContext('2d');
|
||||
const lineCtx = lineCanvas.getContext('2d');
|
||||
const barCtx = barCanvas.getContext('2d');
|
||||
const pieCtx = pieCanvas.getContext('2d');
|
||||
const areaCtx = areaCanvas.getContext('2d');
|
||||
const heatmapCtx = heatmapCanvas.getContext('2d');
|
||||
const donutCtx = donutCanvas.getContext('2d');
|
||||
const scatterCtx = scatterCanvas.getContext('2d');
|
||||
const bubbleCtx = bubbleCanvas.getContext('2d');
|
||||
const stackedBarCtx = stackedBarCanvas.getContext('2d');
|
||||
const annotatedLineCtx = annotatedLineCanvas.getContext('2d');
|
||||
const gaugeCtx = gaugeCanvas.getContext('2d');
|
||||
|
||||
const timelineData = [5, 10, 15, 20, 25];
|
||||
const timelineLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
|
||||
|
||||
const lineData = [10, 20, 15, 25, 30];
|
||||
const barData = [12, 19, 3];
|
||||
const pieData = [300, 50, 100];
|
||||
const areaData = [10, 20, 15, 25, 30];
|
||||
const heatmapData = [
|
||||
[0.1, 0.3, 0.5, 0.7],
|
||||
[0.2, 0.4, 0.6, 0.8],
|
||||
[0.3, 0.5, 0.7, 0.9],
|
||||
[0.4, 0.6, 0.8, 1.0]
|
||||
];
|
||||
const donutData = [300, 50, 100];
|
||||
const scatterData = [
|
||||
[10, 20], [15, 25], [20, 30]
|
||||
];
|
||||
const bubbleData = [
|
||||
[10, 20, 30], [15, 25, 20], [20, 30, 10]
|
||||
];
|
||||
const stackedBarData = [
|
||||
[10, 20, 30],
|
||||
[15, 25, 35]
|
||||
];
|
||||
const annotatedLineData = [10, 20, 15, 25, 30];
|
||||
const annotations = [
|
||||
[100, 200, 'A'],
|
||||
[200, 300, 'B']
|
||||
];
|
||||
const gaugeValue = 75;
|
||||
|
||||
drawTimelineChart(timelineCtx, timelineData, timelineLabels);
|
||||
drawLineChart(lineCtx, lineData);
|
||||
drawBarChart(barCtx, barData);
|
||||
drawPieChart(pieCtx, pieData);
|
||||
drawAreaChart(areaCtx, areaData);
|
||||
drawHeatmapChart(heatmapCtx, heatmapData);
|
||||
drawDonutChart(donutCtx, donutData);
|
||||
drawScatterChart(scatterCtx, scatterData);
|
||||
drawBubbleChart(bubbleCtx, bubbleData);
|
||||
drawStackedBarChart(stackedBarCtx, stackedBarData);
|
||||
drawAnnotatedLineChart(annotatedLineCtx, annotatedLineData, annotations);
|
||||
drawGaugeChart(gaugeCtx, gaugeValue);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,281 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Gráficos Dinâmicos com Inputs</title>
|
||||
<style>
|
||||
canvas {
|
||||
border: 1px solid #000;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Gráficos Dinâmicos</h1>
|
||||
<div class="controls">
|
||||
<div class="control-group">
|
||||
<label for="slice1">Fatias 1:</label>
|
||||
<input type="number" id="slice1" min="0" max="100" value="20">
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label for="slice2">Fatias 2:</label>
|
||||
<input type="number" id="slice2" min="0" max="100" value="20">
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label for="slice3">Fatias 3:</label>
|
||||
<input type="number" id="slice3" min="0" max="100" value="20">
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label for="slice4">Fatias 4:</label>
|
||||
<input type="number" id="slice4" min="0" max="100" value="20">
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label for="slice5">Fatias 5:</label>
|
||||
<input type="number" id="slice5" min="0" max="100" value="20">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
<canvas id="pieChart" width="300" height="300"></canvas>
|
||||
<canvas id="barChart" width="300" height="300"></canvas>
|
||||
<canvas id="lineChart" width="300" height="300"></canvas>
|
||||
<canvas id="areaChart" width="300" height="300"></canvas>
|
||||
<canvas id="radarChart" width="300" height="300"></canvas>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Função para desenhar o gráfico de pizza
|
||||
function drawPieChart() {
|
||||
const canvas = document.getElementById('pieChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const slices = [
|
||||
parseInt(document.getElementById('slice1').value),
|
||||
parseInt(document.getElementById('slice2').value),
|
||||
parseInt(document.getElementById('slice3').value),
|
||||
parseInt(document.getElementById('slice4').value),
|
||||
parseInt(document.getElementById('slice5').value)
|
||||
];
|
||||
const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#FF9F40'];
|
||||
const total = slices.reduce((sum, value) => sum + value, 0);
|
||||
let startAngle = 0;
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.translate(canvas.width / 2, canvas.height / 2);
|
||||
|
||||
slices.forEach((value, index) => {
|
||||
const sliceAngle = (value / total) * 2 * Math.PI;
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, canvas.width / 2, startAngle, startAngle + sliceAngle);
|
||||
ctx.lineTo(0, 0);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = colors[index];
|
||||
ctx.fill();
|
||||
startAngle += sliceAngle;
|
||||
});
|
||||
|
||||
ctx.resetTransform();
|
||||
}
|
||||
|
||||
// Função para desenhar o gráfico de barras
|
||||
function drawBarChart() {
|
||||
const canvas = document.getElementById('barChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const barData = [
|
||||
parseInt(document.getElementById('slice1').value),
|
||||
parseInt(document.getElementById('slice2').value),
|
||||
parseInt(document.getElementById('slice3').value),
|
||||
parseInt(document.getElementById('slice4').value),
|
||||
parseInt(document.getElementById('slice5').value)
|
||||
];
|
||||
const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#FF9F40'];
|
||||
const barWidth = 50;
|
||||
const barSpacing = 70;
|
||||
const maxBarHeight = canvas.height;
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
barData.forEach((value, index) => {
|
||||
const x = index * barSpacing + 50;
|
||||
const y = canvas.height - value;
|
||||
const height = value;
|
||||
ctx.fillStyle = colors[index];
|
||||
ctx.fillRect(x, y, barWidth, height);
|
||||
});
|
||||
}
|
||||
|
||||
// Função para desenhar o gráfico de linhas
|
||||
function drawLineChart() {
|
||||
const canvas = document.getElementById('lineChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const data = [
|
||||
parseInt(document.getElementById('slice1').value),
|
||||
parseInt(document.getElementById('slice2').value),
|
||||
parseInt(document.getElementById('slice3').value),
|
||||
parseInt(document.getElementById('slice4').value),
|
||||
parseInt(document.getElementById('slice5').value)
|
||||
];
|
||||
const canvasWidth = canvas.width;
|
||||
const canvasHeight = canvas.height;
|
||||
const padding = 50;
|
||||
const plotWidth = canvasWidth - 2 * padding;
|
||||
const plotHeight = canvasHeight - 2 * padding;
|
||||
const maxDataValue = Math.max(...data);
|
||||
const minDataValue = Math.min(...data);
|
||||
|
||||
function valueToY(value) {
|
||||
return canvasHeight - padding - ((value - minDataValue) / (maxDataValue - minDataValue)) * plotHeight;
|
||||
}
|
||||
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
ctx.strokeStyle = '#007bff';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath();
|
||||
data.forEach((value, index) => {
|
||||
const x = padding + (index / (data.length - 1)) * plotWidth;
|
||||
const y = valueToY(value);
|
||||
index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
|
||||
});
|
||||
ctx.stroke();
|
||||
ctx.fillStyle = '#007bff';
|
||||
data.forEach((value, index) => {
|
||||
const x = padding + (index / (data.length - 1)) * plotWidth;
|
||||
const y = valueToY(value);
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, 5, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
});
|
||||
}
|
||||
|
||||
// Função para desenhar o gráfico de área
|
||||
function drawAreaChart() {
|
||||
const canvas = document.getElementById('areaChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const data = [
|
||||
parseInt(document.getElementById('slice1').value),
|
||||
parseInt(document.getElementById('slice2').value),
|
||||
parseInt(document.getElementById('slice3').value),
|
||||
parseInt(document.getElementById('slice4').value),
|
||||
parseInt(document.getElementById('slice5').value)
|
||||
];
|
||||
const canvasWidth = canvas.width;
|
||||
const canvasHeight = canvas.height;
|
||||
const padding = 50;
|
||||
const plotWidth = canvasWidth - 2 * padding;
|
||||
const plotHeight = canvasHeight - 2 * padding;
|
||||
const maxDataValue = Math.max(...data);
|
||||
const minDataValue = Math.min(...data);
|
||||
|
||||
function valueToY(value) {
|
||||
return canvasHeight - padding - ((value - minDataValue) / (maxDataValue - minDataValue)) * plotHeight;
|
||||
}
|
||||
|
||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
ctx.fillStyle = '#007bff';
|
||||
ctx.beginPath();
|
||||
data.forEach((value, index) => {
|
||||
const x = padding + (index / (data.length - 1)) * plotWidth;
|
||||
const y = valueToY(value);
|
||||
index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
|
||||
});
|
||||
ctx.lineTo(canvasWidth - padding, canvasHeight - padding);
|
||||
ctx.lineTo(padding, canvasHeight - padding);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
// Função para desenhar o gráfico de radar
|
||||
function drawRadarChart() {
|
||||
const canvas = document.getElementById('radarChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const data = [
|
||||
parseInt(document.getElementById('slice1').value),
|
||||
parseInt(document.getElementById('slice2').value),
|
||||
parseInt(document.getElementById('slice3').value),
|
||||
parseInt(document.getElementById('slice4').value),
|
||||
parseInt(document.getElementById('slice5').value)
|
||||
];
|
||||
const labels = ['A', 'B', 'C', 'D', 'E'];
|
||||
const maxDataValue = Math.max(...data);
|
||||
const centerX = canvas.width / 2;
|
||||
const centerY = canvas.height / 2;
|
||||
const radius = Math.min(centerX, centerY) - 10;
|
||||
const angleStep = 2 * Math.PI / data.length;
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.translate(centerX, centerY);
|
||||
|
||||
// Draw the radar grid
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const angle = i * angleStep;
|
||||
const x = radius * Math.cos(angle);
|
||||
const y = radius * Math.sin(angle);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.lineTo(x, y);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Draw the radar area
|
||||
ctx.beginPath();
|
||||
data.forEach((value, index) => {
|
||||
const angle = index * angleStep;
|
||||
const x = (radius * (value / maxDataValue)) * Math.cos(angle);
|
||||
const y = (radius * (value / maxDataValue)) * Math.sin(angle);
|
||||
index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
|
||||
});
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = 'rgba(0, 123, 255, 0.5)';
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = '#007bff';
|
||||
ctx.stroke();
|
||||
|
||||
// Draw labels
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
labels.forEach((label, index) => {
|
||||
const angle = index * angleStep;
|
||||
const x = (radius + 15) * Math.cos(angle);
|
||||
const y = (radius + 15) * Math.sin(angle);
|
||||
ctx.fillText(label, x, y);
|
||||
});
|
||||
|
||||
ctx.resetTransform();
|
||||
}
|
||||
|
||||
// Função para atualizar todos os gráficos
|
||||
function updateCharts() {
|
||||
drawPieChart();
|
||||
drawBarChart();
|
||||
drawLineChart();
|
||||
drawAreaChart();
|
||||
drawRadarChart();
|
||||
}
|
||||
|
||||
// Atualiza todos os gráficos quando qualquer input muda
|
||||
document.querySelectorAll('.controls input').forEach(input => {
|
||||
input.addEventListener('input', updateCharts);
|
||||
});
|
||||
|
||||
// Desenhe os gráficos inicialmente
|
||||
updateCharts();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Animação de Linha Trajetória Circular</title>
|
||||
<style>
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas id="animationCanvas"></canvas>
|
||||
|
||||
<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
|
||||
lineLength: 100, // Comprimento da linha
|
||||
rotationSpeed: 0.02,
|
||||
angle: 0,
|
||||
linePath: [] // Para armazenar a trajetória
|
||||
};
|
||||
|
||||
function drawRotatingLine() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(circle.centerX, circle.centerY);
|
||||
|
||||
// Cálculo da posição da linha
|
||||
const lineStartX = circle.radius * Math.cos(circle.angle);
|
||||
const lineStartY = circle.radius * Math.sin(circle.angle);
|
||||
const lineEndX = (circle.radius + circle.lineLength) * Math.cos(circle.angle);
|
||||
const lineEndY = (circle.radius + circle.lineLength) * Math.sin(circle.angle);
|
||||
|
||||
// Adiciona o ponto final da linha ao caminho
|
||||
circle.linePath.push({ x: lineEndX, y: lineEndY });
|
||||
|
||||
// Desenha a linha
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(lineStartX, lineStartY);
|
||||
ctx.lineTo(lineEndX, lineEndY);
|
||||
ctx.strokeStyle = '#61dafb';
|
||||
ctx.lineWidth = 5;
|
||||
ctx.stroke();
|
||||
|
||||
// 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 = 'rgba(255, 255, 255, 0.5)';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke();
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function animate() {
|
||||
circle.angle += circle.rotationSpeed;
|
||||
drawRotatingLine();
|
||||
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>
|
||||
</body>
|
||||
|
|
@ -1,111 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Em Construção</title>
|
||||
<style>
|
||||
/* Estilos básicos para garantir que a tela ocupe toda a viewport */
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.message {
|
||||
background: #ffffff;
|
||||
border: 1px solid #ccc;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
animation: fadeIn 2s ease-in-out;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
color: #1478cf;
|
||||
margin-bottom: 10px;
|
||||
animation: bounce 1s infinite;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.link {
|
||||
text-decoration: none;
|
||||
color: #0066cc;
|
||||
font-size: 1rem;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
text-decoration: underline;
|
||||
color: #004999;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
|
||||
0%,
|
||||
20%,
|
||||
50%,
|
||||
80%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="message">
|
||||
<h1>Em Construção</h1>
|
||||
<p>Estamos trabalhando nisso! Coisas podem ser modificadas</p>
|
||||
<a href="https://dev.itguys.com.br/ambiente_do_usu%C3%A1rio/html/Ambiente_Usuario.html" class="link">Voltar
|
||||
para a Página Inicial</a>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// Exemplo de script básico
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log('Página de "Em Construção" carregada.');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Gerenciar Domínios</title>
|
||||
<link rel="stylesheet" href="../Css/styles.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Gerenciar Domínios</h1>
|
||||
<form id="domainForm">
|
||||
<input type="text" id="domain" placeholder="Domínio (e.g., example.com)" required>
|
||||
<textarea id="data" placeholder="Dados do domínio (JSON format)" required></textarea>
|
||||
<div class="buttons">
|
||||
<button type="button" onclick="addDomain()">Adicionar</button>
|
||||
<button type="button" onclick="editDomain()">Editar</button>
|
||||
<button type="button" onclick="deleteDomain()">Excluir</button>
|
||||
</div>
|
||||
</form>
|
||||
<div id="message"></div>
|
||||
<h2>Domínios Existentes</h2>
|
||||
<ul id="domainList"></ul>
|
||||
</div>
|
||||
<script src="../js/Ambiente_Usuario/dominio.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Caminho Circular em Loop</title>
|
||||
<style>
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas id="animationCanvas"></canvas>
|
||||
|
||||
<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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Exibir Imagens Protegidas</title>
|
||||
<style>
|
||||
/* Define o fundo da página como preto */
|
||||
body {
|
||||
background-color: black;
|
||||
/* Fundo preto */
|
||||
color: white;
|
||||
/* Texto branco para melhor contraste */
|
||||
}
|
||||
|
||||
/* Define o fundo de um contêiner específico como preto */
|
||||
#logoContainer {
|
||||
background-color: black;
|
||||
/* Fundo preto */
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Adiciona algum estilo para as imagens */
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 style="color: white;">Imagens Protegidas com Fundo Preto</h1>
|
||||
|
||||
<!-- Contêiner com fundo preto onde a imagem será exibida -->
|
||||
<div id="logoContainer">
|
||||
<img id="profileImage" alt="Imagem de Perfil" width="200px">
|
||||
<img id="companyLogo" alt="Logo da Empresa" width="200px">
|
||||
</div>
|
||||
|
||||
<div id="result"></div> <!-- Onde erros serão exibidos -->
|
||||
|
||||
<script src="../js/tes.js"></script> <!-- O arquivo JS é referenciado aqui -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Formulário</title>
|
||||
<link rel="stylesheet" href="../Css/page/Ambiente/Service/Ferramentas.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main>
|
||||
<section class="capitulo_1">
|
||||
<div class="campo">
|
||||
<input type="text" id="pesquisa" placeholder="Pesquisar serviços...">
|
||||
<button id="button_pesqui">
|
||||
<img src="../Acessts/Imagens/Iconis/lupa.png" alt="">
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="capitulo_2" id="saida"></section>
|
||||
<div id="painel_Servico" class="popup_contener"></div>
|
||||
|
||||
<script src="../js/page/Ambiente/Service/Datas_service.js"></script>
|
||||
<script src="../js/page/Ambiente/Service/Contrutor_Serviços.js"></script>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,203 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../Css/page/Ambiente/Config/Ambientes/AmbientesConfig.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main class="bloco_ambiente">
|
||||
|
||||
|
||||
<div class="seguimento_1">
|
||||
<section class="capitulo_1">
|
||||
<div class="titulo_Cap">
|
||||
<h2>Ambientes</h2>
|
||||
</div>
|
||||
|
||||
<div class="painel_Cap">
|
||||
<div class="coluna_1">
|
||||
<div class="insercao_ambiente">
|
||||
<button id="criarAmbiente">+</button>
|
||||
</div>
|
||||
<div class="pesquisa">
|
||||
<input type="text" placeholder="Pesquise seu ambiente" id="pesquisarAmbiente">
|
||||
<button id="pesquisa">Pesquise aqui</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="coluna_2" id="apresentarAmbientes">
|
||||
|
||||
<div class="painelItem" id="Painel_itguys">
|
||||
<div class="img">
|
||||
<img src="../Acessts/Imagens/iT_Guys/Logo 32x32.png" alt="Logo da Itguys">
|
||||
</div>
|
||||
<div class="corpo">
|
||||
<div class="titulo">
|
||||
<h2>Nome da Empresa</h2>
|
||||
</div>
|
||||
<div class="alinhamentos">
|
||||
<button id="AtreladorDashbord">Atreladores</button>
|
||||
<button id="AtreladorGrupos">Atreladores</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="edicao">
|
||||
<button id="EdicacaoAmbiente_Itguys">:</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
<div class="seguimento_2">
|
||||
|
||||
<section class="capitulo_2">
|
||||
<div class="titulo_Cap">
|
||||
<h2>Status dos Ambientes</h2>
|
||||
</div>
|
||||
|
||||
<div class="painel_Cap">
|
||||
|
||||
<div class="subpainel_Status">
|
||||
|
||||
<div class="bloco_1">
|
||||
|
||||
<div class="titulo">
|
||||
<h2>Nome da Empresa</h2>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bloco_2">
|
||||
|
||||
<div class="Mensagem_ambiente" id="Mensagem_ambiente">
|
||||
<p>mensagem de status do ambiente</p>
|
||||
|
||||
</div>
|
||||
<div class="button_rel">
|
||||
|
||||
<button id="Formulario">
|
||||
<img src="../Acessts/Imagens/Iconis/exportar.png" alt="">
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<div class="status_ambiente" id="status_ambiente">
|
||||
|
||||
<p>OFF</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="subpainel_Status">
|
||||
|
||||
<div class="bloco_1">
|
||||
|
||||
<div class="titulo">
|
||||
<h2>Nome da empresa</h2>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bloco_2">
|
||||
|
||||
<div class="Mensagem_ambiente" id="Mensagem_ambiente">
|
||||
<p>mensagem de status do ambiente</p>
|
||||
|
||||
</div>
|
||||
<div class="button_rel">
|
||||
|
||||
<button id="Formulario">
|
||||
<img src="../Acessts/Imagens/Iconis/exportar.png" alt="">
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<div class="status_ambiente" id="status_ambiente">
|
||||
|
||||
<p>OFF</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="subpainel_Status">
|
||||
|
||||
<div class="bloco_1">
|
||||
|
||||
<div class="titulo">
|
||||
<h2>Nome da empresa</h2>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bloco_2">
|
||||
|
||||
<div class="Mensagem_ambiente" id="Mensagem_ambiente">
|
||||
<p>mensagem de status do ambiente</p>
|
||||
|
||||
</div>
|
||||
<div class="button_rel">
|
||||
|
||||
<button id="Formulario">
|
||||
<img src="../Acessts/Imagens/Iconis/exportar.png" alt="">
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<div class="status_ambiente" id="status_ambiente">
|
||||
|
||||
<p>OFF</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section class="capitulo_3">
|
||||
<div class="titulo_Cap">
|
||||
<h2>Controle de Ambiente</h2>
|
||||
</div>
|
||||
<div class="painel_Cap">
|
||||
<div class="coluna_1">
|
||||
<button>ON</button>
|
||||
<button>OFF</button>
|
||||
<button>ERRO</button>
|
||||
</div>
|
||||
<div class="coluna_2">
|
||||
|
||||
<div class="opicao">
|
||||
<button>Nome da empresa</button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue