Atualização 11

Css/page/Ambiente/Home/Ambiente/Ambi_sec_cap_1.css

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

Css/page/Ambiente/Home/Ambiente/Ambi_sec_cap_2.css

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

Css/page/Ambiente/Home/Ambiente/Ambi_sec_cap_3.css

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

Css/page/Ambiente/Home/Ambiente/BlocoAmbiente.css

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

Css/page/Ambiente/Home/BlocoHome.css

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

Css/page/Ambiente/Home/Usuário/BlocoUsuário.css

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

Css/page/Ambiente/Home/Usuário/User_sec_cap_2.css

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

Css/page/Ambiente/Home/root_Home.css

@@ -1,74 +1,11 @@
-.bloco_home {
+@import url(../../../global/import.css);
-    width: 100%;
-    height: 100vh;
-    display: flex;
-    flex-direction: row;
 
-}
+@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 {
+@import url(./Usuário/BlocoUsuário.css);
-    width: 50%;
+@import url(./Usuário/User_sec_cap_1.css);
-    height: 100vh;
+@import url(./Usuário/User_sec_cap_2.css);
-    display: flex;
+@import url(./Usuário/User_sec_cap_3.css);
-    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;
-
-}

html/Home.html

@@ -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">
+                            <div class="bloco_1">
-                                <h2>Nome da empresa</h2>
+
+                                <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">
+                            <div class="bloco_1">
-                                <h2>Nome da empresa</h2>
+
+                                <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>OFF</button>
-                                <button>ON</button>
+                                <button>ERRO</button>
                             </div>
                             <div class="coluna_2">
 

js/Ambiente/Home/RelatorioCeu.js

@@ -1,29 +1,65 @@
 
 document.addEventListener('DOMContentLoaded', () => {
-    const productContainer3 = document.querySelector('#list');
+    const productContainer = document.querySelector('#list');
-    const nxtBtn3 = document.getElementById('next');
+    const nxtBtn = document.getElementById('next');
-    const preBtn3 = document.getElementById('prev');
+    const preBtn = document.getElementById('prev');
 
     const atualizarDimensoesContainer = () => {
-        const dimensoesContainer3 = productContainer3.getBoundingClientRect();
+        const dimensoesContainer3 = productContainer.getBoundingClientRect();
         return dimensoesContainer3.width;
     };
 
     let larguraContainer3 = atualizarDimensoesContainer();
 
-    nxtBtn3.addEventListener('click', () => {
+    nxtBtn.addEventListener('click', () => {
-        productContainer3.scrollLeft += larguraContainer3;
+        productContainer.scrollLeft += larguraContainer3;
         // Verificação de limite
-        if (productContainer3.scrollLeft + larguraContainer3 >= productContainer3.scrollWidth) {
+        if (productContainer.scrollLeft + larguraContainer3 >= productContainer.scrollWidth) {
-            productContainer3.scrollLeft = productContainer3.scrollWidth; // Para no final
+            productContainer.scrollLeft = productContainer.scrollWidth; // Para no final
         }
     });
 
-    preBtn3.addEventListener('click', () => {
+    preBtn.addEventListener('click', () => {
-        productContainer3.scrollLeft -= larguraContainer3;
+        productContainer.scrollLeft -= larguraContainer3;
         // Verificação de limite
-        if (productContainer3.scrollLeft < 0) {
+        if (productContainer.scrollLeft < 0) {
-            productContainer3.scrollLeft = 0; // Para no início
+            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
         }
     });