Atualização 9 - Inserção da tela de configuração css, e da tela de home css e html

Ambiente_Usuario_copy.html

@@ -17,6 +17,8 @@
     <title>Ambiente do Usuario</title>
 
     <script defer src="./js/Ambiente/Estrutura/load.js"></script>
+    <script src="./js/Ambiente/Estrutura/Estrutura_primaria.js"></script>
+
 
 
 </head>
@@ -34,6 +36,6 @@
 
 </body>
 
-<script defer src="./js/Ambiente/Estrutura/Estrutura_primaria.js"></script>
+
 
 </html>

Css/global/import.css

@@ -51,4 +51,7 @@ body {
     --Cor_Segundaria_4_2: #105018;
     --Cor_Segundaria_5_2: #123655;
 
+    --Vazio_Corpo: #c6c6c6;
+    --Vazio_Fundo: #9a9a9a;
+
 }

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

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

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

@@ -0,0 +1,131 @@
+body {
+    display: flex;
+
+}
+
+.voltar {
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 2vh;
+    margin-left: 1vw;
+    margin-bottom: 2vh;
+    gap: 0.5vw;
+    text-decoration: none;
+
+}
+
+.voltar .escrita_A {
+    width: 10vw;
+    height: 4vh;
+    background-color: var(--Vazio_Corpo);
+    box-shadow: 5px 5px 0px var(--Vazio_Fundo);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.3vw;
+
+    font-family: var(--font_titulo);
+    font-size: 0.8vw;
+    color: var(--Matriz);
+    transition: 1s ease;
+
+
+}
+
+.voltar .retrato_A {
+    width: 2vw;
+    height: 4vh;
+    padding: 0.3vw;
+    background-color: var(--Vazio_Corpo);
+    box-shadow: 5px 5px 0px var(--Vazio_Fundo);
+    transition: 1s ease;
+
+}
+
+.menu {
+    width: 20vw;
+    height: 100vh;
+    background-color: var(--Cor_Segundaria_5_1);
+    overflow: hidden;
+}
+
+.contener_1,
+.contener_2,
+.contener_3 {
+    width: 100%;
+    padding-bottom: 5vh;
+    list-style: none;
+    text-decoration: none;
+
+}
+
+.contener_1 li,
+.contener_2 li,
+.contener_3 li {
+    list-style: none;
+    text-decoration: none;
+
+}
+
+.contener_1 .titulos,
+.contener_2 .titulos,
+.contener_3 .titulos {
+    width: 15vw;
+    height: 5vh;
+    padding: 0.5vw;
+    margin-left: 1vw;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    gap: 1vw;
+
+    font-family: var(--font_titulo);
+    font-size: 1vw;
+    color: var(--Matriz);
+
+    background-color: var(--Cor_Segundaria_2_1);
+    box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
+}
+
+.contener_1 .titulos img,
+.contener_2 .titulos img,
+.contener_3 .titulos img {
+    width: 3vw;
+}
+
+.contener_1 .opicao button,
+.contener_2 .opicao button,
+.contener_3 .opicao button {
+    display: flex;
+    background: none;
+    border: none;
+    outline: none;
+
+    align-items: center;
+    align-content: center;
+    gap: 0.5vw;
+
+}
+
+.contener_1 .opicao .retrato,
+.contener_2 .opicao .retrato,
+.contener_3 .opicao .retrato {
+    width: 2vw;
+    filter: drop-shadow(5px 5px 0px var(--Vazio_Fundo));
+    transition: 1s ease;
+}
+
+.contener_1 .opicao .escrita,
+.contener_2 .opicao .escrita,
+.contener_3 .opicao .escrita {
+    width: 9vw;
+    padding: 0.6vw;
+    background-color: var(--Vazio_Corpo);
+    box-shadow: 5px 5px 0px var(--Vazio_Fundo);
+
+    font-family: var(--font_titulo);
+    color: var(--Matriz);
+    transition: 1s ease;
+}

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

@@ -0,0 +1,54 @@
+.contener_1 .opicao button:hover,
+.contener_2 .opicao button:hover,
+.contener_3 .opicao button:hover {
+
+
+    .retrato {
+        width: 2vw;
+        filter: drop-shadow(5px 5px 0px var(--Cor_Segundaria_2_2));
+    }
+
+    .escrita {
+        width: 9vw;
+        padding: 0.6vw;
+        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);
+    }
+
+}
+
+.voltar:hover {
+
+
+    .escrita_A {
+        background-color: var(--Cor_Segundaria_2_1);
+        box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
+    }
+
+    .retrato_A {
+        background-color: var(--Cor_Segundaria_2_1);
+        box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
+
+    }
+
+}
+
+.menu {
+    animation: aberturaConfig 1s ease;
+}
+
+@keyframes aberturaConfig {
+
+    from {
+        width: 0;
+
+    }
+
+    to {
+        width: 20vw;
+    }
+
+}

Css/page/Ambiente/Home/BlocoHome.css

@@ -0,0 +1,5 @@
+@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/root_Home.css

@@ -0,0 +1,72 @@
+.bloco_home {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: row;
+
+}
+
+.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: 40vw;
+    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;
+
+}

Css/page/Ambiente/Home/sec_cap_2.css

@@ -0,0 +1,79 @@
+.dashbord {
+    width: 100%;
+    height: 50vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+
+}
+
+.dashbord .dash_titulo {
+
+    display: flex;
+    justify-content: start;
+    width: 100%;
+    height: 5vh;
+    font-family: var(--font_titulo);
+    color: var(--Matriz);
+    font-size: 1vw;
+
+}
+
+.dashbord .dash_painel {
+    width: 90%;
+    height: 40vh;
+
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+
+    gap: 1vw;
+    background-color: var(--Cor_Segundaria_2_1);
+    box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
+}
+
+.dashbord .dash_painel .dash_subpaneis {
+    width: 10vw;
+    height: 15vh;
+    padding: 0.4vw;
+    background-color: var(--Matriz);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+}
+
+.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);
+
+}
+
+.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 {
+    font-family: var(--font_titulo);
+
+    font-size: 0.6vw;
+}
+
+.OFF {
+    color: red;
+}
+
+.ON {
+    color: var(--Cor_Segundaria_2_1);
+}
+
+.dashbord .dash_painel .dash_subpaneis .grafico {}

html/Config.html

@@ -5,32 +5,64 @@
     <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 href="./Ambiente_Usuario copy.html">Voltar</a>
+        <a class="voltar" href="../Ambiente_Usuario_copy.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">Estilos</div>
+            <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">Me escolha</button></li>
+                <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">Ambiente</div>
+            <div class="titulos">
+                <img src="../Acessts/Imagens/Iconis/caixa-de-ferramentas.png" alt="">
+                <h2>Ambiente</h2>
+            </div>
             <ul>
-                <li class="opicao"><button id="opicao_2">Me escolha</button></li>
+                <li class="opicao"><button id="opicao_2">
-                <li class="opicao"><button id="opicao_3">Me escolha</button></li>
+                        <img class="retrato" src="../Acessts/Imagens/Iconis/caixa-de-ferramentas.png" alt="">
-                <li class="opicao"><button id="opicao_4">Me escolha</button></li>
+                        <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">Suporte</div>
+            <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">Me escolha</button></li>
+                <li class="opicao"><button id="opicao_5">
-                <li class="opicao"><button id="opicao_6">Me escolha</button></li>
+                        <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>
@@ -42,6 +74,6 @@
 
 
 </body>
-<script src="./config.js"></script>
+<script src="../js/Ambiente/Config/Estrutural_config/config.js"></script>
 
 </html>

html/Home.html

@@ -6,10 +6,160 @@
     <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">
 </head>
 
 <body>
-    <h2>Aqui serão apresentandos os resumos das interfaces</h2>
+    <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"></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 class="grafico"></div><!--prenchivel-->
+                                </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 class="grafico"></div><!--prenchivel-->
+                                </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 class="grafico"></div><!--prenchivel-->
+                                </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 class="grafico"></div><!--prenchivel-->
+                                </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 class="grafico"></div><!--prenchivel-->
+                                </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 class="grafico"></div><!--prenchivel-->
+                                </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 class="grafico"></div><!--prenchivel-->
+                                </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 class="grafico"></div><!--prenchivel-->
+                                </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 class="grafico"></div><!--prenchivel-->
+                                </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 class="grafico"></div><!--prenchivel-->
+                                </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 class="grafico"></div><!--prenchivel-->
+                                </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 class="grafico"></div><!--prenchivel-->
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                </section>
+
+            </div>
+            <div class="seguimento">
+                <section class="capitulo_3">
+                    <div class="titulo">
+                        <h2>Detalhes da semana</h2>
+                    </div>
+                    <div class="painel"></div>
+                </section>
+            </div>
+        </div>
+    </main>
 </body>
 
 </html>

html/projetos_itguys.html

@@ -22,6 +22,7 @@
 
         <section class="capitulo_2" id="saida"></section>
         <div id="painel_Servico" class="popup_contener"></div>
+
         <script src="../js/Ambiente/Service/Datas_service.js"></script>
         <script src="../js/Ambiente/Service/Contrutor_Serviços.js"></script>
     </main>

js/Ambiente/Estrutura/Estrutura_Primaria.js

@@ -27,7 +27,6 @@ const Permissoes = {
 };
 
 
-
 // Função para carregar uma imagem protegida com token JWT e exibi-la
 
 // Função para carregar e exibir as imagens protegidas
@@ -52,6 +51,8 @@ async function criarBlocos() {
 
         const data = await response.json();
 
+
+
         // Agora acessa as propriedades do objeto
         const nomeCompleto = data.usuario.nome; // Nome completo do usuário
         const primeiroNome = nomeCompleto.split(' ')[0].substring(0, 10); // Pega o primeiro nome e limita a 10 caracteres // Limita a 10 caracteres;
@@ -517,7 +518,6 @@ async function loadBackgroundAndUpdateStyle() {
 
 // Inicia o carregamento das imagens quando o script for carregado
 document.addEventListener('DOMContentLoaded', async () => {
-
     await criarBlocos();
     await loadBackgroundAndUpdateStyle();
 

js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js

@@ -8,7 +8,7 @@ if (Permissoes.visuMonitor) {
 
     // Define o conteúdo HTML a ser inserido no 'sub_entrada'
     construtor_Secundarios_Monitoramento_button.innerHTML =
-        `<a href="" class="filheira_a" target="frame">
+        `<a href="./html/Monitoramento.html" class="filheira_a" target="frame">
             <div class="filheira">
                 <h2>Monitoramento</h2>
             </div>
@@ -40,3 +40,4 @@ document.getElementById('sub_menu').addEventListener('mouseenter', function () {
 document.getElementById('sub_menu').addEventListener('mouseleave', function () {
     this.classList.remove('show'); // Remove a classe 'show' para ocultar o submenu
 });
+

js/Ambiente/Service/Contrutor_Serviços.js

@@ -1,4 +1,70 @@
-const painel_serviços_icon = document.getElementById('saida');
+async function respostaServer_data() {
+    // Function to get the API URL
+    async function getApiUrl() {
+        try {
+            const response = await fetch('../../../Site_ItGuys/php/config_url.php');
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            const data = await response.json();
+            return data.apiUrl;
+        } catch (error) {
+            console.error('Error fetching API URL:', error);
+            throw error;
+        }
+    }
+
+    // Function to get the authentication token
+    function getAuthToken() {
+        return localStorage.getItem('x-access-token');
+    }
+
+    const apiUrl = await getApiUrl();
+    const token = getAuthToken();
+    return { apiUrl, token };
+}
+
+async function verificardados() {
+    try {
+        const { apiUrl, token } = await respostaServer_data();
+
+        const response = await fetch(`${apiUrl}/mounting`, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-access-token': token || ''
+            }
+        });
+
+        if (!response.ok) {
+            throw new Error('Erro na requisição: ' + response.statusText);
+        }
+
+        const data = await response.json();
+        const nameempresa = data.empresa?.nome || 'Empresa Desconhecida';
+
+        console.log(nameempresa);
+
+        const Data_Center = {
+            Ser_User: {},
+            Ser_Itguys: {}
+        };
+
+        if (nameempresa === 'itguys') {
+            setupItGuysServices(Data_Center);
+        }
+
+        if (true) { // Assuming this is a permission check
+            setupUserServices(Data_Center);
+        }
+
+        renderAllServices(Data_Center);
+    } catch (error) {
+        console.error('Erro ao verificar o ambiente:', error);
+    }
+}
+
+
 
 function renderService(service) {
     const { nome, Imagem, id_server, resposta_popup, resposta_script, resposta_estilo } = service;
@@ -7,14 +73,15 @@ function renderService(service) {
     serviceDiv.id = id_server;
 
     serviceDiv.innerHTML = `
-<div class="Colun_1">
+        <div class="Colun_1">
-<img src="${Imagem}" alt="">
+            <img src="${Imagem}" alt="">
-</div>
+        </div>
-<div class="Colun_2">
+        <div class="Colun_2">
-<h2>${nome}</h2>
+            <h2>${nome}</h2>
-</div>
+        </div>
-`;
+    `;
 
+    const painel_serviços_icon = document.getElementById('saida');
     painel_serviços_icon.appendChild(serviceDiv);
 
     serviceDiv.addEventListener('click', () => {
@@ -22,7 +89,8 @@ function renderService(service) {
     });
 }
 
-function renderAllServices() {
+function renderAllServices(Data_Center) {
+    const painel_serviços_icon = document.getElementById('saida');
     painel_serviços_icon.innerHTML = '';
 
     // Renderiza os serviços de Ser_Itguys
@@ -36,38 +104,29 @@ function renderAllServices() {
     }
 }
 
-// Inicializa a renderização
-renderAllServices();
-
 function popup(resposta, script, estilo) {
     const painel_serviços = document.getElementById('painel_Servico');
     painel_serviços.innerHTML = `
-<section>
+        <section>
-<div class='colun_1'>
+            <div class='colun_1'>
-    <button id='fechar'>
+                <button id='fechar'>X</button>
-        X
+            </div>
-    </button>
+            <div class='colun_2'>${resposta}</div>
-</div>
+        </section>
-<div class='colun_2'>
+    `;
-    ${resposta}
-</div>
-</section>
-`;
 
-    // Remover estilos e scripts anteriores
+    // Remove previous styles and scripts
-    const existingStyles = document.querySelectorAll('style');
+    document.querySelectorAll('style').forEach(style => style.remove());
-    existingStyles.forEach(style => style.remove());
+    document.querySelectorAll('script[data-dynamic]').forEach(script => script.remove());
-    const existingScripts = document.querySelectorAll('script[data-dynamic]');
-    existingScripts.forEach(script => script.remove());
 
-    // Injetar estilo se houver
+    // Inject style if present
     if (estilo) {
         const style = document.createElement('style');
         style.innerHTML = estilo;
         document.head.appendChild(style);
     }
 
-    // Injetar script se houver
+    // Inject script if present
     if (script) {
         const scriptElement = document.createElement('script');
         scriptElement.setAttribute('data-dynamic', '');
@@ -75,34 +134,11 @@ function popup(resposta, script, estilo) {
         document.body.appendChild(scriptElement);
     }
 
-    const button_servi = document.getElementById('fechar');
+    document.getElementById('fechar').addEventListener('click', () => {
-    button_servi.addEventListener('click', fecharPopup);
-
-    function fecharPopup() {
         painel_serviços.style.display = "none";
-    }
+    });
 
     painel_serviços.style.display = "flex";
 }
 
-const button_pesquisa = document.getElementById('button_pesqui');
+window.addEventListener('load', verificardados);
-const input_pesquisa = document.getElementById('pesquisa');
-
-button_pesquisa.addEventListener('click', pesquisar);
-input_pesquisa.addEventListener('keypress', function (event) {
-    if (event.key === 'Enter') {
-        pesquisar();
-    }
-});
-
-function pesquisar() {
-    const query = input_pesquisa.value.toLowerCase();
-    painel_serviços_icon.innerHTML = '';
-
-    // Filtra e renderiza os serviços
-    for (const service of Object.values(Data_Center.Ser_Itguys).concat(Object.values(Data_Center.Ser_User))) {
-        if (service.nome.toLowerCase().includes(query)) {
-            renderService(service);
-        }
-    }
-}

js/Ambiente/Service/Datas_service.js

@@ -1,81 +1,17 @@
-async function respostaServer_data() {
-    // Função para obter a URL base da API
-    async function getApiUrl() {
-        try {
-            const response = await fetch('../../../Sites/Site_ItGuys/php/config_url.php');
-            if (!response.ok) {
-                throw new Error('Network response was not ok');
-            }
-            const data = await response.json();
-            return data.apiUrl;
-        } catch (error) {
-            console.error('Error fetching API URL:', error);
-            throw error;
-        }
-    }
 
-    // Função para obter o token do localStorage
+function setupItGuysServices(Data_Center) {
-    function getAuthToken() {
+    Data_Center.Ser_Itguys.Gerador_de_arquivos_telefonia = createService({
-        return localStorage.getItem('x-access-token');
+        nome: 'Configurador de Telefonia',
-    }
+        imagem: '../../Acessts/Imagens/Iconis/chamada-telefonica.png',
-
+        id_server: 'serv_gat_1',
-    // Obtenha a URL da API e o token
+        resposta_popup: createTelefoniaForm(),
-    const apiUrl = await getApiUrl();
+        resposta_script: '../js/Ambiente/Service/List/Gerador_XML_Telefonia.js',
-    const token = getAuthToken();
+        resposta_estilo: generateTelefoniaStyles()
-
+    });
-    return { apiUrl, token }; // Retorne os valores
 }
 
-// Função para verificar o ambiente do usuário
+function createTelefoniaForm() {
-async function verificarAmbiente() {
+    return `        
-    try {
-        const { apiUrl, token } = await respostaServer_data(); // Desestruture a resposta
-
-        const response = await fetch(`${apiUrl}/mounting`, {
-            method: 'GET',
-            headers: {
-                'Content-Type': 'application/json',
-                'x-access-token': token || '' // Use um fallback para token
-            }
-        });
-
-        if (!response.ok) {
-            throw new Error('Erro na requisição: ' + response.statusText);
-        }
-
-        const data = await response.json(); // Mover para cá após a verificação de resposta
-        const nameempresa = data.empresa.nome || 'Empresa Desconhecida'; // Fallback 
-
-        console.log(data);
-
-        const Data_Center = {
-            Ser_User: {},
-            Ser_Itguys: {}
-        };
-
-        const permissa_User = true;
-        const permissa_Itguys = true;
-
-        if (permissa_User) {
-            Data_Center.Ser_User = {
-                resetar_senha: {
-                    nome: 'Resetar senha',
-                    Imagem: '../../Acessts/Imagens/Iconis/ferramentas.png',
-                    id_server: 'serv_gat_2',
-                    resposta_popup: '<h1>Olá do Resetar Senha!</h1>',
-                    resposta_script: `console.log('Script para Resetar Senha');`,
-                    resposta_estilo: `document.body.style.backgroundColor = '#f0f0f0';`
-                }
-            };
-        }
-
-        if (permissa_Itguys) {
-            Data_Center.Ser_Itguys = {
-                Gerador_de_arquivos_telefonia: {
-                    nome: 'Configurador de Telefonia',
-                    Imagem: '../../Acessts/Imagens/Iconis/ferramentas.png',
-                    id_server: 'serv_gat_1',
-                    resposta_popup: `        
     <form id="form" class='control'>
         <div class='formulario'>
             <h2>Preencha o Formulario</h2>
@@ -103,21 +39,39 @@ async function verificarAmbiente() {
         <div class='formulario'>
             <button type="button" onclick="gerarArquivo()">Gerar Arquivo</button>
         </div>
-                    </form>`,
+    </form>`;
-                    resposta_script: '../js/Ambiente/Service/List/Gerador_XML_Telefonia.js',
+}
-                    resposta_estilo: `.control {width: 100%; display: flex; flex-direction: column; justify-content: center; align-content: center; align-items: center;}
+
-                    .formulario {width: 80%; display: flex; flex-direction: column; animation: surgirpopup 0.8s ease;}
+function generateTelefoniaStyles() {
-                    @keyframes surgirpopup {to {opacity: 1; transform: translateY(0);} from {opacity: 0; transform: translateY(40vw);}}
+    return `.control { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
-                    .formulario input {border:none; outline: none; background: none; background-color: var(--Matriz); border: 0.2vw solid var(--Cor_Segundaria_2_1); box-shadow: 5px 5px 0px 2px var(--Cor_Segundaria_2_2); font-family: var(--font_titulo); font-size: 0.9vw; color: var(--Cor_Segundaria_2_1); padding-left: 1vw; padding-right: 1vw; width: 100%; height: 3vh;}
+    .formulario { width: 80%; display: flex; flex-direction: column; animation: surgirpopup 0.8s ease; }
-                    .formulario label {font-family: var(--font_titulo); font-size: 1vw; color: var(--Matriz);}
+    @keyframes surgirpopup { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(40vw); } }
-                    .formulario button {border: none; outline: none; background: none; font-family: var(--font_titulo); font-size: 1vw; color: var(--Matriz); background-color: #c6c6c6; box-shadow: -5px 5px 0px #9a9a9a; transition: 1s ease; width: 8vw; height: 4vh;}
+    .formulario input { border: none; outline: none; background: none; background-color: var(--Matriz); border: 0.2vw solid var(--Cor_Segundaria_2_1); box-shadow: 5px 5px 0px 2px var(--Cor_Segundaria_2_2); font-family: var(--font_titulo); font-size: 0.9vw; color: var(--Cor_Segundaria_2_1); padding-left: 1vw; padding-right: 1vw; width: 100%; height: 3vh; }
-                    .formulario button:hover {background-color: var(--Cor_Segundaria_2_1); box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);}
+    .formulario label { font-family: var(--font_titulo); font-size: 1vw; color: var(--Matriz); }
-                    .formulario h2 {font-family: var(--font_titulo); text-align:center; font-size: 2vw; color: var(--Matriz);}`
+    .formulario button { border: none; outline: none; background: none; font-family: var(--font_titulo); font-size: 1vw; color: var(--Matriz); background-color: #c6c6c6; box-shadow: -5px 5px 0px #9a9a9a; transition: 1s ease; width: 8vw; height: 4vh; }
-                }
+    .formulario button:hover { background-color: var(--Cor_Segundaria_2_1); box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2); }
-            };
+    .formulario h2 { font-family: var(--font_titulo); text-align: center; font-size: 2vw; color: var(--Matriz); }`;
-        }
+}
-
+
-    } catch (error) {
+function setupUserServices(Data_Center) {
-        console.error('Erro ao verificar o ambiente:', error);
+    Data_Center.Ser_User.resetar_senha = createService({
-    }
+        nome: 'Resetar senha',
+        imagem: '../../Acessts/Imagens/Iconis/ferramentas.png',
+        id_server: 'serv_gat_2',
+        resposta_popup: '<h1>Olá do Resetar Senha!</h1>',
+        resposta_script: `console.log('Script para Resetar Senha');`,
+        resposta_estilo: `document.body.style.backgroundColor = '#f0f0f0';`
+    });
+}
+
+
+function createService({ nome, imagem, id_server, resposta_popup, resposta_script, resposta_estilo }) {
+    return {
+        nome,
+        Imagem: imagem,
+        id_server,
+        resposta_popup,
+        resposta_script,
+        resposta_estilo
+    };
 }