Atualização 13 | Tornando a estrutura de configuração para ambientes dinâmica, além da construção de um POPs dedicado para todos os formulários e outro dedicado para todas as respostas do front-end ou back-end.

Css/page/Ambiente/Config/Ambientes/AmbientesConfig.css

@@ -9,5 +9,8 @@
 @import url(../Ambientes/estrutura/Sec_Cap_2.css);
 @import url(../Ambientes/estrutura/Sec_Cap_3.css);
 
-@import url(../Ambientes/Painel/PopUp.css);
+@import url(../Ambientes/Painel/Respostapopup.css);
+@import url(../Ambientes/Painel/Painelpopup.css);
+@import url(../Ambientes/Painel/EdicaoAmbientespop.css);
+
 @import url(../Ambientes/Painel/tags.css);

Css/page/Ambiente/Config/Ambientes/Componentes/Ambientes.css

@@ -4,6 +4,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: start;
+    gap: 2vh;
 
 }
 
@@ -20,8 +21,8 @@
 
 .bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_2 .painelItem .img {
 
-    width: 4vw;
+    width: 3.5vw;
-    height: 8vh;
+    height: 7vh;
     background-color: var(--Cor_Segundaria_2_1);
     box-shadow: 4px 4px 0px 0px var(--Cor_Segundaria_2_2);
     display: flex;
@@ -34,14 +35,14 @@
 
 .bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_2 .painelItem .img img {
 
-    width: 3vw;
+    width: 2.5vw;
 
 }
 
 
 .bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_2 .painelItem .corpo {
-    width: 80%;
+    width: 70%;
-    height: 8vh;
+    height: 7vh;
 
     display: flex;
     flex-direction: row;
@@ -53,6 +54,12 @@
 
 }
 
+.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_2 .painelItem .titulo h2 {
+
+    font-family: var(--font_titulo);
+    font-size: 0.8vw;
+    color: var(--Matriz);
+}
 
 .bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_2 .painelItem .corpo .alinhamentos {
     width: 50%;
@@ -72,9 +79,7 @@
     background-color: var(--Cor_Segundaria_5_1);
     box-shadow: 5px 5px 0px 0px var(--Cor_Segundaria_5_2);
 
-    width: 40%;
+    padding: 5%;
-    height: 5vh;
-
     display: flex;
     flex-direction: row;
     justify-content: space-around;
@@ -82,19 +87,12 @@
 
     font-family: var(--font_titulo);
     color: var(--Matriz);
-    font-size: 1vw;
+    font-size: 0.7vw;
 
 
 }
 
 
-.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_2 .painelItem .titulo h2 {
-
-    font-family: var(--font_titulo);
-    font-size: 1.4vw;
-    color: var(--Matriz);
-}
-
 .bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_2 .painelItem .edicao button {
 
     background: none;
@@ -105,7 +103,7 @@
     box-shadow: 5px 5px 0px 0px var(--Cor_Segundaria_2_2);
 
     width: 3vw;
-    height: 8vh;
+    height: 7vh;
 
     display: flex;
     flex-direction: row;

Css/page/Ambiente/Config/Ambientes/Componentes/AmbientesAlertas.css

@@ -0,0 +1,81 @@
+.subpainel_Status {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 1vw;
+
+}
+
+.subpainel_Status .bloco_1 {
+    width: 25%;
+    height: 6vh;
+
+    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: 6vh;
+
+    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.5vw;
+}
+
+.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: 1.6vw;
+    filter: drop-shadow(3px 3px 0px var(--Cor_Segundaria_2_2));
+}
+
+
+.subpainel_Status .bloco_2 .status_ambiente {
+    font-family: var(--font_titulo);
+    color: var(--Cor_Segundaria_5_1);
+    font-size: 0.7vw;
+
+    margin-right: 1vw;
+    background-color: var(--Matriz);
+    padding: 0.2vw;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 2vw;
+    width: 4vw;
+    height: 3vh;
+}

Css/page/Ambiente/Config/Ambientes/Componentes/AmbientesRelatorios.css

@@ -0,0 +1,14 @@
+.bloco_ambiente .coluna_2 .opicaoAmbie 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/Config/Ambientes/Painel/EdicaoAmbientespop.css

@@ -0,0 +1,234 @@
+.PopPainel.EdicaoAmbientes .fecharPainel {
+    width: 100%;
+    height: 12vh;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+}
+
+.PopPainel.EdicaoAmbientes .fecharPainel button {
+    background: none;
+    border: none;
+    outline: none;
+
+    width: 8vw;
+    height: 5vh;
+    background-color: #c6c6c6;
+    box-shadow: 5px 5px 0px #9a9a9a;
+    font-size: 1vw;
+    color: var(--Matriz);
+    transition: 1s ease;
+}
+
+.PopPainel.EdicaoAmbientes .fecharPainel button:hover {
+    background-color: var(--Cor_Segundaria_5_1);
+    box-shadow: -5px 5px 0px var(--Cor_Segundaria_5_2);
+}
+
+.PopPainel.EdicaoAmbientes .CorpoPainel {
+
+    width: 100%;
+    height: 70vh;
+    padding-top: 2vh;
+    overflow-y: auto;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: center;
+
+    gap: 2vh;
+
+}
+
+.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs {
+
+    width: 100%;
+    padding-top: 2vh;
+    margin-top: 0.8vh solid var(--Matriz);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: center;
+
+    margin-bottom: 2vh;
+
+}
+
+.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_1 {
+    width: 100%;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+
+}
+
+.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_1 .TitutloPopup {
+
+    width: 40%;
+    height: 8vh;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+
+    font-family: var(--font_titulo);
+    color: var(--Matriz);
+    font-size: 1vw;
+
+}
+
+.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_1 .PesquisaPopup {
+
+    width: 70%;
+    height: 8vh;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+
+}
+
+.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_1 .PesquisaPopup input {
+    background: none;
+    outline: none;
+    border: none;
+
+    width: 15vw;
+    height: 4vh;
+
+    background-color: var(--Matriz);
+    border: 0.4vw solid var(--Cor_Segundaria_5_1);
+    box-shadow: 4px 4px 0px 0px var(--Cor_Segundaria_5_2);
+
+    padding-left: 1vw;
+    padding-right: 1vw;
+
+    font-size: 0.8vw;
+    font-family: var(--font_titulo);
+    color: var(--Cor_Segundaria_5_1);
+
+
+
+}
+
+.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_1 .PesquisaPopup button {
+    background: none;
+    outline: none;
+    border: none;
+
+    width: 4vw;
+    height: 6vh;
+
+    background-color: var(--Cor_Segundaria_5_1);
+    box-shadow: 4px 4px 0px 0px var(--Cor_Segundaria_5_2);
+
+
+
+
+}
+
+.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_1 .PesquisaPopup img {
+    width: 2vw;
+}
+
+.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_2 {
+
+    width: 100%;
+    height: 30vh;
+    margin-top: 2vh;
+    padding-top: 2vh;
+    overflow-y: auto;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: center;
+    align-content: center;
+
+
+
+    background-color: var(--Matriz);
+
+    gap: 1vw;
+}
+
+
+/* Estilo customizado para o scroll (somente no Webkit) */
+.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_2::-webkit-scrollbar,
+.PopPainel.EdicaoAmbientes .CorpoPainel::-webkit-scrollbar {
+    width: 0.2vw;
+    /* Largura da barra de rolagem */
+    height: 0.2vw;
+    /* Para scroll horizontal, se necessário */
+}
+
+/* Estilo para o polegar da barra de rolagem */
+.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_2::-webkit-scrollbar-thumb,
+.PopPainel.EdicaoAmbientes .CorpoPainel::-webkit-scrollbar-thumb {
+    background-color: var(--Cor_Segundaria_5_1);
+    /* Cor da parte da barra que você arrasta */
+    border-radius: 10px;
+    /* Borda arredondada */
+    /* Borda ao redor do polegar */
+}
+
+/* Aumentando o tamanho do track (fundo da barra de rolagem) */
+.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_2::-webkit-scrollbar-track,
+.PopPainel.EdicaoAmbientes .CorpoPainel::-webkit-scrollbar-track {
+    background-color: var(--Cor_Segundaria_5_2);
+    /* Cor do fundo do scroll */
+    border-radius: 10px;
+    /* Borda arredondada */
+    /* Usar diretamente a largura ou altura aqui para aumentar o track */
+    width: 1vw;
+    /* Aumentando a largura do track para o scroll vertical */
+    height: 1vw;
+    /* Aumentando a altura do track para o scroll horizontal */
+}
+
+
+.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_2 .DashbordItem {
+
+    width: 18vw;
+    height: 8vh;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    align-content: center;
+
+    font-family: var(--font_titulo);
+    color: var(--Matriz);
+    font-size: 0.6vw;
+
+
+    background-color: var(--Cor_Segundaria_5_1);
+    box-shadow: 5px 5px 0px 0px var(--Cor_Segundaria_5_2);
+}
+
+
+.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_2 .DashbordItem button {
+    background: none;
+    border: none;
+    outline: none;
+
+    width: 6vw;
+    height: 3vh;
+    background-color: #c6c6c6;
+    box-shadow: 5px 5px 0px #9a9a9a;
+    font-size: 1vw;
+    color: var(--Matriz);
+    transition: 1s ease;
+
+}
+
+.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_2 .DashbordItem button:hover {
+    background-color: var(--Cor_Segundaria_2_1);
+    box-shadow: -5px 5px 0px var(--Cor_Segundaria_2_2);
+}

Css/page/Ambiente/Config/Ambientes/Painel/Painelpopup.css

@@ -0,0 +1,18 @@
+.PopPainel {
+
+    background-color: var(--Cor_Segundaria_3_1);
+    box-shadow: 5px 5px 0px 0px var(--Cor_Segundaria_3_2);
+    width: 40vw;
+    height: 60vh;
+    padding: 2vw;
+
+    position: absolute;
+    top: 10vh;
+    left: 40vw;
+
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: start;
+
+}

Css/page/Ambiente/Config/Ambientes/estrutura/Sec_Cap_1.css

@@ -1,5 +1,5 @@
 .bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap {
-    width: 90%;
+    width: 80%;
     height: 74vh;
     padding: 2vw;
 
@@ -22,16 +22,17 @@
 }
 
 .bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .insercao_ambiente button {
-    width: 14vw;
+    width: 7vw;
     height: 6vh;
 }
 
 .bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .pesquisa {
-    width: 60%;
+    width: 70%;
     height: 8vh;
     display: flex;
     justify-content: space-between;
     align-items: center;
+
 }
 
 .bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .pesquisa input {
@@ -39,7 +40,7 @@
     outline: none;
     border: none;
 
-    width: 15vw;
+    width: 13vw;
     height: 4vh;
 
     background-color: var(--Matriz);
@@ -53,4 +54,23 @@
     font-family: var(--font_titulo);
     color: var(--Cor_Segundaria_2_1);
 
+}
+
+.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .pesquisa button {
+    background: none;
+    outline: none;
+    border: none;
+
+    width: 4vw;
+    height: 6vh;
+
+    background-color: var(--Cor_Segundaria_2_1);
+    box-shadow: 4px 4px 0px 0px var(--Cor_Segundaria_2_2);
+
+
+}
+
+.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .pesquisa img {
+    width: 2vw;
+    filter: drop-shadow(2px 2px 0px var(--Cor_Segundaria_2_2));
 }

Css/page/Ambiente/Config/Ambientes/estrutura/Sec_Cap_2.css

@@ -43,88 +43,4 @@
     /* Aumentando a largura do track para o scroll vertical */
     height: 1vw;
     /* Aumentando a altura do track para o scroll horizontal */
-}
-
-
-
-.subpainel_Status {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: 1vw;
-
-}
-
-.subpainel_Status .bloco_1 {
-    width: 25%;
-    height: 6vh;
-
-    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: 6vh;
-
-    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.6vw;
-}
-
-.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: 1.6vw;
-    filter: drop-shadow(3px 3px 0px var(--Cor_Segundaria_2_2));
-}
-
-
-.subpainel_Status .bloco_2 .status_ambiente {
-    font-family: var(--font_titulo);
-    color: var(--Cor_Segundaria_5_1);
-    font-size: 0.7vw;
-
-    margin-right: 1vw;
-    background-color: var(--Matriz);
-    padding: 0.2vw;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 2vw;
-    width: 4vw;
-    height: 3vh;
 }

Css/page/Ambiente/Config/Ambientes/estrutura/Sec_Cap_3.css

@@ -74,19 +74,4 @@
     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/Config/Estrutura/estrutura_config.css

@@ -1,3 +1,5 @@
 @import url(../../../../global/import.css);
+
 @import url(./menu.css);
+@import url(./tela.css);
 @import url(./menu_houver.css);

Css/page/Ambiente/Config/Estrutura/menu.css

@@ -62,7 +62,7 @@ body {
 
 /* Estilo para o polegar da barra de rolagem */
 .menu::-webkit-scrollbar-thumb {
-    background-color: var(--Matriz);
+    background-color: var(--Cor_Segundaria_3_1);
     /* Cor da parte da barra que você arrasta */
     border-radius: 10px;
     /* Borda arredondada */
@@ -71,7 +71,7 @@ body {
 
 /* Aumentando o tamanho do track (fundo da barra de rolagem) */
 .menu::-webkit-scrollbar-track {
-    background-color: var(--Cor_Segundaria_5_2);
+    background-color: var(--Cor_Segundaria_3_2);
     /* Cor do fundo do scroll */
     border-radius: 10px;
     /* Borda arredondada */

Css/page/Ambiente/Config/Estrutura/menu_houver.css

@@ -48,7 +48,7 @@
     }
 
     to {
-        width: 20vw;
+        width: 25vw;
     }
 
 }

Css/page/Ambiente/Config/Estrutura/tela.css

@@ -0,0 +1,3 @@
+.telaConfig {
+    width: 75vw;
+}

html/Config.html

@@ -12,7 +12,7 @@
 
 
     <nav class="menu">
-        <a class="voltar" href="../Ambiente_Usuario_copy.html">
+        <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>
@@ -35,7 +35,7 @@
                 <h2>Ambiente</h2>
             </div>
             <ul>
-                <li class="opicao"><button id="opicao_2">
+                <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>
@@ -68,7 +68,7 @@
     </nav>
 
 
-    <div id="preenchimento"></div>
+    <div class="telaConfig" id="preenchimento"></div>
 
 
 

js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/Ambientes.js

@@ -0,0 +1,249 @@
+
+
+const dataAmbientes = {
+
+    itguys: {
+        nome: 'ItGuys',
+    },
+    enseg: {
+        nome: 'Enseg',
+    },
+    OestPan: {
+        nome: 'OestPan',
+    },
+    Prolog: {
+        nome: 'Prolog',
+    }
+
+}
+
+function AlinhamentoAmbientes() {
+
+    const ListaAmbientes = document.getElementById('apresentarAmbientes');
+    ListaAmbientes.innerHTML = ComponenteAmbientes();
+
+    setTimeout(() => {
+        for (let ambiente in dataAmbientes) {
+            const nome = dataAmbientes[ambiente].nome;
+            FormeEditarAmbiente(nome); // Agora chamamos a função para associar o evento de clique
+        }
+    }, 0);
+
+
+
+    FormeCriarAmbiente();
+
+}
+
+
+function ComponenteAmbientes() {
+    // Inicializa uma variável para armazenar o conteúdo HTML gerado
+    let htmlContent = '';
+
+    // Itera sobre as chaves de dataAmbientes (itguys, enseg, etc.)
+    for (let ambiente in dataAmbientes) {
+        const nome = dataAmbientes[ambiente].nome;
+
+        // Adiciona um painel para cada ambiente
+        htmlContent += `
+
+                        <div class="painelItem" id="Painel_${nome}">
+                            <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}</h2>
+                                </div>
+                                <div class="alinhamentos">
+                                    <button id="AtreladorDashbord">Dashbords</button>
+                                    <button id="AtreladorGrupos">Grupos</button>
+                                </div>
+                            </div>
+                            <div class="edicao">
+                                <button id="EdicacaoAmbiente_Itguys">:</button>
+                            </div>
+                        </div>
+
+`
+    }
+
+
+    // Retorna o HTML completo
+    return htmlContent;
+    // Chama a função para adicionar o evento de clique após o HTML ser inserido
+
+}
+
+
+
+function FormeCriarAmbiente() {
+    const InsercaoAmbiente = document.getElementById('criarAmbiente')
+    InsercaoAmbiente.addEventListener('click', CriarAmbiente);
+
+    function CriarAmbiente() {
+        const PainelCriacao = document.getElementById('PopPainel');
+        PainelCriacao.style.display = 'flex'
+        PainelCriacao.classList.add('CriacaoAmbientes');
+        PainelCriacao.innerHTML = PainelAmbiente();
+
+        function PainelAmbiente() {
+
+            return `
+            <div class='fecharPainel' id='FecharPainel'>
+                <button>X</button>
+            </div>
+            
+            <div id='formulario'>
+
+                <div class='Bloco_1' >
+
+                    <div class='TituloCampo'>
+                        <h2>Informações do Ambiente</h2>
+                    </div>
+
+                    <div class='Campo'>
+                        <label>Dominio</label>
+                        <input type="text" placeholder="Pesquise seu ambiente" id="pesquisarAmbiente">
+                    </div>
+
+                    <div class='Campo'>
+                        <label>Nome</label>
+                        <input type="text" placeholder="Pesquise seu ambiente" id="pesquisarAmbiente">
+                    </div>
+
+                    <div class='Campolong'>
+                        <label>Descrição</label>
+                        <textarea name="" id=""></textarea>
+                    </div>
+                </div>
+
+                <div class='Bloco_2' >
+
+                    <div class='TituloCampo'>
+                        <h2>Informações do Cliente</h2>
+                    </div>
+
+                    <div class='Campo'>
+                        <label>Nome</label>
+                        <input type="text" placeholder="Pesquise seu ambiente" id="pesquisarAmbiente">
+                    </div>
+
+                    <div class='CampoInsercao'>
+                        <label>Nome</label>
+                        <button>+</button>
+
+                    </div>
+
+                    
+                </div>
+
+                <div class='Bloco_3' >
+
+
+                    
+                </div>
+      
+            </div>
+
+            `;
+
+        }
+
+
+    }
+
+
+}
+
+function FormeEditarAmbiente(Empresa) {
+    const ItemAmbiente = document.getElementById(`Painel_${Empresa}`);
+    ItemAmbiente.addEventListener('click', PaineldeEdicao);
+
+    function PaineldeEdicao() {
+        const PainelEdicao = document.getElementById('PopPainel');
+
+        PainelEdicao.style.display = 'flex'
+        PainelEdicao.classList.add('EdicaoAmbientes');
+        PainelEdicao.innerHTML = PainelAmbiente();
+
+        Extras();
+
+        function PainelAmbiente() {
+            return `
+            <div class='fecharPainel' >
+                <button id='FecharPainel' >X</button>
+            </div>
+            <div class='CorpoPainel'>
+                <div class='PainelDasborhs'>
+                    <div class='Coluna_1'>
+                        <div class='TitutloPopup'>
+                            <h2>Dashbords ${Empresa}</h2>
+                        </div>
+                        <div class='PesquisaPopup'>
+                            <input type="text" placeholder="Pesquise seu ambiente" id="pesquisarAmbiente">
+                            <button id="pesquisa">
+                                <img src="../Acessts/Imagens/Iconis/lupa.png">
+                            </button>
+                        </div>
+                    </div>
+                    <div class='Coluna_2'>
+                        <div class='DashbordItem'>
+                            <h2>Nome da Dashbord</h2>
+                            <button id='DesvincularDashbord'>X</button>
+                        </div>
+        
+                    </div>
+                    
+                </div>
+                
+                <div class='PainelDasborhs'>
+                    <div class='Coluna_1'>
+                        <div class='TitutloPopup'>
+                            <h2>Grupos ${Empresa}</h2>
+                        </div>
+                        <div class='PesquisaPopup'>
+                            <input type="text" placeholder="Pesquise seu ambiente" id="pesquisarAmbiente">
+                            <button id="pesquisa">
+                                <img src="../Acessts/Imagens/Iconis/lupa.png">
+                            </button>
+                        </div>
+                    </div>
+                    <div class='Coluna_2'>
+                        <div class='DashbordItem'>
+                            <h2>Nome do Grupo</h2>
+                            <button id='DesvincularDashbord'>X</button>
+                        </div>
+        
+                    </div>
+                    
+                </div>
+            
+            </div>
+            
+            `;
+        }
+
+        function Extras() {
+            fechar();
+
+
+            function fechar() {
+                const FecharPainelEdicao = document.getElementById('FecharPainel');
+                FecharPainelEdicao.addEventListener('click', EncerrarTarefa);
+
+                function EncerrarTarefa() {
+
+                    PainelEdicao.style.display = 'none'
+                    PainelEdicao.classList.remove('EdicaoAmbientes');
+                    PainelEdicao.innerHTML = ``;
+
+
+                }
+
+
+            }
+
+        }
+    }
+}

js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/AmbientesAlertas.js

@@ -0,0 +1,43 @@
+
+function AlinhamentoAmbientesAlertas() {
+
+    const ListaAmbientesAlertas = document.getElementById('ListadeAlertas');
+    ListaAmbientesAlertas.innerHTML = ComponenteAmbientesAlertas();
+
+}
+
+function ComponenteAmbientesAlertas() {
+
+    return `
+
+                      <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>
+
+`
+
+}

js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/AmbientesRelatorio.js

@@ -0,0 +1,16 @@
+
+function AlinhamentoAmbientesRelatorios() {
+
+    const ListaAmbientesRelatorios = document.getElementById('ListeRelatorios');
+    ListaAmbientesRelatorios.innerHTML = ComponenteAmbientesRelatorios();
+
+}
+
+function ComponenteAmbientesRelatorios() {
+
+    return `
+            <button>Nome da empresa</button>
+
+        `
+
+}

js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/Ambientes_Root.js

@@ -1,6 +1,6 @@
 
 //Variavel botão 1 responsavel por inicar a função 
-var BotaoAmbienteConfig = document.getElementById('opicao_1');
+var BotaoAmbienteConfig = document.getElementById('StatusAmbiente');
 BotaoAmbienteConfig.addEventListener('click', surgirAmbiente);
 
 
@@ -9,8 +9,13 @@ function surgirAmbiente() {
 
     var estilo = document.getElementById('conexao');
     var painel = document.getElementById('preenchimento');
-    estilo.href = 'ola';
+    estilo.href = '../Css/page/Ambiente/Config/Ambientes/AmbientesConfig.css';
     painel.innerHTML = EstruturaPrincipal();
+
+
+    AlinhamentoAmbientesAlertas();
+    AlinhamentoAmbientesRelatorios();
+    AlinhamentoAmbientes();
 }
 
 
@@ -18,10 +23,90 @@ function EstruturaPrincipal() {
 
     return `
     
-    
+        <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">
+                            <img src="../Acessts/Imagens/Iconis/lupa.png">
+                            </button>
+                        </div>
+                    </div>
+                    <div class="coluna_2" id="apresentarAmbientes"></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" id="ListadeAlertas"></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="opicaoAmbie" id="ListeRelatorios"></div>
+
+
+                    </div>
+                </div>
+            </section>
+
+        </div>
+
+        <div class="PopResposta" id="PopResposta"></div>
+        <div class="PopPainel" id="PopPainel"></div>
+
+    </main>
+
     
     `;
 
 
 
-}
+}
+
+var AmbientesCriador = document.createElement('script');
+AmbientesCriador.src = '../js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/Ambientes.js';
+AmbientesCriador.type = 'text/javascript';
+AmbientesCriador.id = 'AmbientesCriador_11';
+document.body.appendChild(AmbientesCriador);
+
+
+var AmbientesAlertas = document.createElement('script');
+AmbientesAlertas.src = '../js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/AmbientesAlertas.js';
+AmbientesAlertas.type = 'text/javascript';
+AmbientesAlertas.id = 'AmbientesAlertas_11';
+document.body.appendChild(AmbientesAlertas);
+
+var AmbientesRelatorios = document.createElement('script');
+AmbientesRelatorios.src = '../js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/AmbientesRelatorio.js';
+AmbientesRelatorios.type = 'text/javascript';
+AmbientesRelatorios.id = 'AmbientesRelatoriso_11';
+document.body.appendChild(AmbientesRelatorios);

js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/config.js

@@ -1,7 +1,7 @@
 
 
 //Variavel botão 2 responsavel por inicar a função 
-var botao_2 = document.getElementById('opicao_2');
+var botao_2 = document.getElementById('opicao_1');
 botao_2.addEventListener('click', surgir2);
 
 //Variavel botão 3 responsavel por inicar a função