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

Atualização 11

This commit is contained in:
daivid.alves 2024-10-24 18:20:41 -03:00
parent 5325d6107c
commit 843b95ce55
13 changed files with 603 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Acessts/Imagens/Iconis/exportar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

99
Css/page/Ambiente/Home/Ambiente/Ambi_sec_cap_1.css Normal file
View File

@ -0,0 +1,99 @@
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap {
width: 96vw;
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
align-content: center;
gap: 1vw;
overflow-y: scroll;
padding: 2vh;
background-color: var(--Cor_Segundaria_5_1);
height: 20vh;
}
.subpainel_Status {
width: 90%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1vw;
}
.subpainel_Status .bloco_1 {
width: 20%;
height: 8vh;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--Cor_Segundaria_2_1);
box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
}
.subpainel_Status .bloco_2 {
width: 70%;
height: 8vh;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1vw;
background-color: var(--Cor_Segundaria_2_1);
box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
}
.subpainel_Status .bloco_1 .titulo {
font-family: var(--font_titulo);
color: var(--Matriz);
font-size: 0.8vw;
}
.subpainel_Status .bloco_2 .Mensagem_ambiente {
font-family: var(--font_titulo);
margin-left: 1vw;
color: var(--Matriz);
font-size: 1vw;
}
.subpainel_Status .bloco_2 .button_rel button {
background: none;
outline: none;
border: none;
}
.subpainel_Status .bloco_2 .button_rel img {
width: 2vw;
filter: drop-shadow(5px 5px 0px var(--Cor_Segundaria_2_2));
}
.subpainel_Status .bloco_2 .status_ambiente {
font-family: var(--font_titulo);
color: var(--Matriz);
font-size: 1vw;
margin-right: 1vw;
background-color: var(--Cor_Segundaria_2_2);
padding: 0.2vw;
display: flex;
justify-content: center;
align-items: center;
border-radius: 2vw;
width: 5vw;
height: 5vh;
}

142
Css/page/Ambiente/Home/Ambiente/Ambi_sec_cap_2.css Normal file
View File

@ -0,0 +1,142 @@
.painel_Cap .carrossel_host {
width: 100%;
height: 20vh;
display: flex;
align-items: center;
position: relative;
}
.painel_Cap .carrossel_host .list {
overflow: hidden;
width: 100%;
height: 15vh;
scroll-behavior: smooth;
padding: 1vw;
display: flex;
align-items: center;
gap: 2vw;
}
.painel_Cap .carrossel_host .list .item button {
background: none;
border: none;
outline: none;
border-radius: 2vw;
background-color: var(--Matriz);
padding: 2.5vw;
color: var(--Cor_Segundaria_5_1);
font-family: var(--font_titulo);
}
.painel_Cap .carrossel_host .button button {
background: none;
outline: none;
border: none;
padding: 0.5vw;
border-radius: 0.5vw;
backdrop-filter: blur(2px);
background-color: #00000070;
}
.painel_Cap .carrossel_host .button img {
width: 2vw;
}
#next_1 {
position: absolute;
right: 0;
top: 8vh;
}
#prev_1 {
position: absolute;
left: 0;
top: 8vh;
}
.bloco_ambiente .dashbord {
width: 100%;
height: 50vh;
display: flex;
flex-direction: column;
align-items: center;
}
.bloco_ambiente .dashbord .dash_titulo {
display: flex;
justify-content: start;
width: 100%;
height: 5vh;
font-family: var(--font_titulo);
color: var(--Matriz);
font-size: 1vw;
}
.bloco_ambiente .dashbord .dash_painel {
width: 90%;
height: 40vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
gap: 1vw;
background-color: var(--Cor_Segundaria_2_1);
box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
}
.bloco_ambiente .dashbord .dash_painel .dash_subpaneis {
width: 10vw;
height: 10vh;
padding: 0.4vw;
background-color: var(--Matriz);
display: flex;
flex-direction: column;
align-items: center;
}
.bloco_ambiente .dashbord .dash_painel .dash_subpaneis .sub_titulo {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
border-bottom: 0.3vh solid var(--Cor_Segundaria_5_1);
}
.bloco_ambiente .dashbord .dash_painel .dash_subpaneis .sub_titulo .Name {
font-family: var(--font_titulo);
color: var(--Cor_Segundaria_5_1);
font-size: 0.5vw;
}
.bloco_ambiente .dashbord .dash_painel .dash_subpaneis .sub_titulo .sub_status {
font-family: var(--font_titulo);
font-size: 0.6vw;
}
.OFF {
color: red;
}
.ON {
color: var(--Cor_Segundaria_2_1);
}

42
Css/page/Ambiente/Home/Ambiente/Ambi_sec_cap_3.css Normal file
View File

@ -0,0 +1,42 @@
.bloco_ambiente .coluna_1 {
width: 100%;
margin-bottom: 2vh;
}
.bloco_ambiente .coluna_1 button {
outline: none;
background: none;
border: none;
width: 32.33%;
height: 6vh;
background-color: var(--Cor_Segundaria_2_1);
box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
font-family: var(--font_titulo);
color: var(--Matriz);
font-size: 1vw;
}
.coluna_2 {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.opicao button {
outline: none;
background: none;
border: none;
width: 20vw;
height: 6vh;
background-color: var(--Cor_Segundaria_2_1);
box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
font-family: var(--font_titulo);
color: var(--Matriz);
font-size: 1.2vw;
}

87
Css/page/Ambiente/Home/Ambiente/BlocoAmbiente.css Normal file
View File

@ -0,0 +1,87 @@
.bloco_ambiente {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.bloco_ambiente .seguimento_1,
.bloco_ambiente .seguimento_2 {
width: 100%;
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
}
.subseguimento_1 {
width: 70%;
display: flex;
justify-content: center;
}
.subseguimento_2 {
width: 30%;
display: flex;
justify-content: center;
}
.bloco_ambiente .seguimento_1 .capitulo_1,
.bloco_ambiente .seguimento_2 .capitulo_2,
.bloco_ambiente .seguimento_2 .capitulo_3 {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.bloco_ambiente .seguimento_1 .capitulo_1 .titulo_Cap,
.bloco_ambiente .seguimento_2 .capitulo_2 .titulo_Cap,
.bloco_ambiente .seguimento_2 .capitulo_3 .titulo_Cap {
width: 15vw;
display: flex;
justify-content: center;
align-items: center;
font-family: var(--font_titulo);
text-align: center;
font-size: 0.9vw;
background: var(--Cor_Segundaria_2_1);
box-shadow: 7px 7px 0px var(--Cor_Segundaria_2_2);
color: var(--Matriz);
margin-top: 2vh;
margin-bottom: 2vh;
}
.bloco_ambiente .seguimento_2 .capitulo_2 .painel_Cap {
width: 65vw;
padding: 2vh;
background-color: var(--Cor_Segundaria_5_1);
}
.bloco_ambiente .seguimento_2 .capitulo_3 .painel_Cap {
width: 26vw;
padding: 2vh;
background-color: var(--Cor_Segundaria_5_1);
}
.bloco_ambiente .seguimento_2 .capitulo_2 .painel_Cap,
.bloco_ambiente .seguimento_2 .capitulo_3 .painel_Cap {
overflow-y: scroll;
height: 80vh;
margin-bottom: 2vh;
}

5
Css/page/Ambiente/Home/BlocoHome.css
View File

@ -1,5 +0,0 @@
@import url(../../../global/import.css);
@import url(./root_Home.css);
@import url(./sec_cap_1.css);
@import url(./sec_cap_2.css);
@import url(./sec_cap_3.css);

74
Css/page/Ambiente/Home/Usuário/BlocoUsuário.css Normal file
View File

@ -0,0 +1,74 @@
.bloco_home {
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
}
.bloco_home .seguimento {
width: 50%;
height: 100vh;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
}
.bloco_home .capitulo_1,
.bloco_home .capitulo_2,
.bloco_home .capitulo_3 {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.bloco_home .capitulo_1 .titulo,
.bloco_home .capitulo_2 .titulo,
.bloco_home .capitulo_3 .titulo {
width: 15vw;
display: flex;
justify-content: center;
align-items: center;
font-family: var(--font_titulo);
text-align: center;
font-size: 0.9vw;
background: var(--Cor_Segundaria_2_1);
box-shadow: 7px 7px 0px var(--Cor_Segundaria_2_2);
color: var(--Matriz);
margin-top: 2vh;
margin-bottom: 2vh;
}
.bloco_home .capitulo_1 .painel,
.bloco_home .capitulo_2 .painel,
.bloco_home .capitulo_3 .painel {
width: 46vw;
padding: 2vh;
background-color: var(--Cor_Segundaria_5_1);
}
.bloco_home .capitulo_1 .painel {
height: 20vh;
}
.bloco_home .capitulo_2 .painel {
overflow-y: scroll;
height: 40vh;
}
.bloco_home .capitulo_3 .painel {
overflow-y: scroll;
height: 80vh;
}

0
Css/page/Ambiente/Home/sec_cap_1.css → Css/page/Ambiente/Home/Usuário/User_sec_cap_1.css
View File

14
Css/page/Ambiente/Home/sec_cap_2.css → Css/page/Ambiente/Home/Usuário/User_sec_cap_2.css
View File

@ -1,4 +1,4 @@
.dashbord {
.bloco_home .dashbord {
width: 100%;
height: 50vh;
display: flex;
@ -8,7 +8,7 @@
}
.dashbord .dash_titulo {
.bloco_home .dashbord .dash_titulo {
display: flex;
justify-content: start;
@ -20,7 +20,7 @@
}
.dashbord .dash_painel {
.bloco_home .dashbord .dash_painel {
width: 90%;
height: 40vh;
@ -36,7 +36,7 @@
box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
}
.dashbord .dash_painel .dash_subpaneis {
.bloco_home .dashbord .dash_painel .dash_subpaneis {
width: 10vw;
height: 10vh;
padding: 0.4vw;
@ -47,7 +47,7 @@
}
.dashbord .dash_painel .dash_subpaneis .sub_titulo {
.bloco_home .dashbord .dash_painel .dash_subpaneis .sub_titulo {
width: 100%;
display: flex;
@ -57,13 +57,13 @@
}
.dashbord .dash_painel .dash_subpaneis .sub_titulo .Name {
.bloco_home .dashbord .dash_painel .dash_subpaneis .sub_titulo .Name {
font-family: var(--font_titulo);
color: var(--Cor_Segundaria_5_1);
font-size: 0.5vw;
}
.dashbord .dash_painel .dash_subpaneis .sub_titulo .sub_status {
.bloco_home .dashbord .dash_painel .dash_subpaneis .sub_titulo .sub_status {
font-family: var(--font_titulo);
font-size: 0.6vw;

0
Css/page/Ambiente/Home/sec_cap_3.css → Css/page/Ambiente/Home/Usuário/User_sec_cap_3.css
View File

81
Css/page/Ambiente/Home/root_Home.css
View File

@ -1,74 +1,11 @@
.bloco_home {
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
@import url(../../../global/import.css);
}
@import url(./Ambiente/BlocoAmbiente.css);
@import url(./Ambiente/Ambi_sec_cap_1.css);
@import url(./Ambiente/Ambi_sec_cap_2.css);
@import url(./Ambiente/Ambi_sec_cap_3.css);
.seguimento {
width: 50%;
height: 100vh;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
}
.capitulo_1,
.capitulo_2,
.capitulo_3 {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.capitulo_1 .titulo,
.capitulo_2 .titulo,
.capitulo_3 .titulo {
width: 15vw;
display: flex;
justify-content: center;
align-items: center;
font-family: var(--font_titulo);
text-align: center;
font-size: 0.9vw;
background: var(--Cor_Segundaria_2_1);
box-shadow: 7px 7px 0px var(--Cor_Segundaria_2_2);
color: var(--Matriz);
margin-top: 2vh;
margin-bottom: 2vh;
}
.capitulo_1 .painel,
.capitulo_2 .painel,
.capitulo_3 .painel {
width: 46vw;
border-radius: 2vw;
padding: 2vh;
background-color: var(--Cor_Segundaria_5_1);
}
.capitulo_1 .painel {
height: 20vh;
}
.capitulo_2 .painel {
overflow-y: scroll;
height: 40vh;
}
.capitulo_3 .painel {
overflow-y: scroll;
height: 80vh;
}
@import url(./Usuário/BlocoUsuário.css);
@import url(./Usuário/User_sec_cap_1.css);
@import url(./Usuário/User_sec_cap_2.css);
@import url(./Usuário/User_sec_cap_3.css);

134
html/Home.html
View File

@ -6,7 +6,7 @@
<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/BlocoHome.css">
<link rel="stylesheet" href="../Css/page/Ambiente/Home/root_Home.css">
</head>
<body>
@ -259,58 +259,114 @@
<div class="seguimento_1">
<section class="capitulo_1">
<div class="titulo_Cap">
<h2>Titulo de Painel</h2>
<h2>Status dos Ambientes</h2>
</div>
<div class="painel_Cap">
<div class="colun_1">
<div class="subpainel_Status">
<div class="titulo">
<h2>Nome da empresa</h2>
<div class="bloco_1">
<div class="titulo">
<h2>Nome da Empresa</h2>
</div>
</div>
<div class="Mensagem_ambiente" id="Mensagem_ambiente">
p{mensagem de status do ambiente}
<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 class="button_rel">
<button id="Formulario">
<img src="" alt="">
</button>
</div>
<div class="status_ambiente" id="status_ambiente">
<p>OFF ON ERRO</p>
</div>
</div>
<div class="colun_2">
<div class="subpainel_Status">
<div class="titulo">
<h2>Nome da empresa</h2>
<div class="bloco_1">
<div class="titulo">
<h2>Nome da empresa</h2>
</div>
</div>
<div class="Mensagem_ambiente" id="Mensagem_ambiente">
<p>mensagem de status do ambiente</p>
<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 class="button_rel">
<button id="Formulario">
<img src="" alt="">
</button>
</div>
<div class="status_ambiente" id="status_ambiente">
<p>OFF ON ERRO</p>
</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>
@ -320,12 +376,12 @@
<section class="capitulo_2">
<div class="titulo_Cap">
<h2>Titulo de Painel</h2>
<h2>Detalhes do Ambiente</h2>
</div>
<div class="painel_Cap">
<div class="carrossel_host">
<div class="list" id="list">
<div class="list" id="list_1">
<div class="item"><!--Preenchivem com os servidores da empresa-->
<button>Host 1</button>
</div>
@ -355,10 +411,10 @@
</div>
</div>
<div class="button">
<button id="next">
<button id="next_1">
<img src="../Acessts/Imagens/Iconis/seta-direita.png" alt="">
</button>
<button id="prev">
<button id="prev_1">
<img src="../Acessts/Imagens/Iconis/seta-esquerda.png" alt="">
</button>
</div>
@ -430,13 +486,13 @@
<div class="subseguimento_2">
<section class="capitulo_3">
<div class="titulo_Cap">
<h2>Titulo de Painel</h2>
<h2>Controle de Ambiente</h2>
</div>
<div class="painel_Cap">
<div class="coluna_1">
<button>ON</button>
<button>ON</button>
<button>ON</button>
<button>OFF</button>
<button>ERRO</button>
</div>
<div class="coluna_2">

60
js/Ambiente/Home/RelatorioCeu.js
View File

@ -1,29 +1,65 @@
document.addEventListener('DOMContentLoaded', () => {
const productContainer3 = document.querySelector('#list');
const nxtBtn3 = document.getElementById('next');
const preBtn3 = document.getElementById('prev');
const productContainer = document.querySelector('#list');
const nxtBtn = document.getElementById('next');
const preBtn = document.getElementById('prev');
const atualizarDimensoesContainer = () => {
const dimensoesContainer3 = productContainer3.getBoundingClientRect();
const dimensoesContainer3 = productContainer.getBoundingClientRect();
return dimensoesContainer3.width;
};
let larguraContainer3 = atualizarDimensoesContainer();
nxtBtn3.addEventListener('click', () => {
productContainer3.scrollLeft += larguraContainer3;
nxtBtn.addEventListener('click', () => {
productContainer.scrollLeft += larguraContainer3;
// Verificação de limite
if (productContainer3.scrollLeft + larguraContainer3 >= productContainer3.scrollWidth) {
productContainer3.scrollLeft = productContainer3.scrollWidth; // Para no final
if (productContainer.scrollLeft + larguraContainer3 >= productContainer.scrollWidth) {
productContainer.scrollLeft = productContainer.scrollWidth; // Para no final
}
});
preBtn3.addEventListener('click', () => {
productContainer3.scrollLeft -= larguraContainer3;
preBtn.addEventListener('click', () => {
productContainer.scrollLeft -= larguraContainer3;
// Verificação de limite
if (productContainer3.scrollLeft < 0) {
productContainer3.scrollLeft = 0; // Para no início
if (productContainer.scrollLeft < 0) {
productContainer.scrollLeft = 0; // Para no início
}
});
// Recalcula a largura do container se necessário (por exemplo, ao redimensionar a janela)
window.addEventListener('resize', () => {
larguraContainer3 = atualizarDimensoesContainer();
});
});
document.addEventListener('DOMContentLoaded', () => {
const productContainer1 = document.querySelector('#list_1');
const nxtBtn1 = document.getElementById('next_1');
const preBtn1 = document.getElementById('prev_1');
const atualizarDimensoesContainer = () => {
const dimensoesContainer3 = productContainer1.getBoundingClientRect();
return dimensoesContainer3.width;
};
let larguraContainer3 = atualizarDimensoesContainer();
nxtBtn1.addEventListener('click', () => {
productContainer1.scrollLeft += larguraContainer3;
// Verificação de limite
if (productContainer1.scrollLeft + larguraContainer3 >= productContainer1.scrollWidth) {
productContainer1.scrollLeft = productContainer1.scrollWidth; // Para no final
}
});
preBtn1.addEventListener('click', () => {
productContainer1.scrollLeft -= larguraContainer3;
// Verificação de limite
if (productContainer1.scrollLeft < 0) {
productContainer1.scrollLeft = 0; // Para no início
}
});