testes/html/arquivos_extras/Ambiente_Usuario copy.html

209 lines
6.8 KiB
HTML

<!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>